/* ============================================================
   МЭГ Логистика — дизайн-токены

   Палитра «Нейтральная дымка», утверждена заказчиком 28.08.2026.
   Собрана движком «Пигмент» по мотивам картины Юбера Робера
   «Обелиск»: тёплая светлая подложка, жжёная умбра на кнопке —
   это второй тон самого холста, а не подобранный акцент.

   Тема светлая. Тёмная доступна только по явному
   data-theme="dark" и сама не включается.
   ============================================================ */

:root{
  /* --- поверхности --- */
  --paper:        #FEF9F6;   /* фон страницы */
  --surface:      #F8F1ED;   /* карточки, панели */
  --surface-2:    #F0E8E2;   /* приподнятое, наведение */
  --surface-3:    #E7DED7;
  --line:         #DCD4CF;   /* волосяная линия */
  --line-strong:  #C3B8B0;

  /* --- текст --- */
  --ink:          #231811;   /* контраст к фону 16.6 */
  --ink-2:        #7B6F67;   /* 4.66 — проходит для текста */
  --ink-3:        #9A8F87;   /* подписи, только крупные */
  --ink-inv:      #FEF9F6;

  /* --- фирменные ---
     Синий взят из логотипа без изменений. На светлом фоне он даёт 3.54:
     хватает для цифр, плашек и элементов интерфейса, но не для ссылки
     внутри абзаца. Для ссылок — затемнённый вариант того же тона. */
  --data:         #1E8CCC;   /* цифры сроков, схемы, крупные акценты */
  --data-link:    #15628F;   /* ссылки в тексте, контраст 4.68 */
  --data-soft:    #E3F0F9;

  --action:       #8F491C;   /* кнопка, контраст 6.40 */
  --action-hover: #7A3E17;
  --action-ink:   #FFFFFF;   /* надпись на кнопке, 6.7 */
  --action-soft:  #F5E7DE;

  /* --- статусы: только крупный текст и плашки --- */
  --ok:           #40A35C;  --ok-soft:   #E4F2E8;
  --warn:         #B88A00;  --warn-soft: #F8EFD6;
  --risk:         #D0635E;  --risk-soft: #FAE7E5;

  /* --- типографика --- */
  --font-head: "Onest", "Segoe UI", system-ui, sans-serif;
  --font-body: "Onest", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.0625rem;
  --fs-lg:   1.3125rem;
  --fs-xl:   1.625rem;
  --fs-2xl:  2.125rem;
  --fs-3xl:  2.875rem;
  --fs-4xl:  3.625rem;

  /* --- ритм --- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  --radius:    4px;
  --radius-lg: 8px;
  --wrap:      1200px;
  --measure:   68ch;

  --shadow-1: 0 1px 2px rgba(35,24,17,.05), 0 2px 8px rgba(35,24,17,.04);
  --shadow-2: 0 2px 6px rgba(35,24,17,.07), 0 14px 34px rgba(35,24,17,.08);

  /* --- вуаль над кадром героя ---
     0.54 — значение из утверждённого решения. Ниже кадр забивает текст,
     выше пропадает сам кадр. */
  --veil: 0.54;

  --ease: cubic-bezier(.2,.6,.3,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  color-scheme: light;
}

/* Тёмная тема — только по явному выбору, автоматически не включается. */
:root[data-theme="dark"]{
  --paper:       #14100D;
  --surface:     #1D1813;
  --surface-2:   #26201A;
  --surface-3:   #302921;
  --line:        #332C25;
  --line-strong: #4A4038;

  --ink:         #F2ECE7;
  --ink-2:       #B6ABA2;
  --ink-3:       #8A8079;
  --ink-inv:     #14100D;

  --data:        #4FB0E8;
  --data-link:   #6FC1EE;
  --data-soft:   #10242F;

  --action:      #D2703A;
  --action-hover:#E08350;
  --action-ink:  #17100A;
  --action-soft: #2B1810;

  --ok:          #5DBE7A;  --ok-soft:   #12240F;
  --warn:        #D6A83C;  --warn-soft: #251C0A;
  --risk:        #E07E79;  --risk-soft: #291310;

  --shadow-1: 0 1px 2px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.35);
  --shadow-2: 0 2px 6px rgba(0,0,0,.5), 0 14px 34px rgba(0,0,0,.45);

  color-scheme: dark;
}

/* Движение выключаем для тех, кто просил его выключить. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
/* ============================================================
   МЭГ Логистика — стили темы.
   Палитра «Нейтральная дымка». Токены — в tokens.css.
   ============================================================ */



*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-body);font-size:var(--fs-md);line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--data-link);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--action)}
:focus-visible{outline:2px solid var(--data-link);outline-offset:3px;border-radius:2px}

h1,h2,h3,h4{font-family:var(--font-head);font-weight:800;letter-spacing:-.022em;line-height:1.08;margin:0;text-wrap:balance}
h1{font-size:clamp(2.1rem,4.4vw,var(--fs-4xl))}
h2{font-size:clamp(1.65rem,3vw,var(--fs-2xl));letter-spacing:-.02em}
h3{font-size:var(--fs-xl);font-weight:700;letter-spacing:-.015em}
h4{font-size:var(--fs-md);font-weight:700;letter-spacing:0}
p{margin:0 0 var(--sp-4)}
p:last-child{margin-bottom:0}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--sp-6)}
.measure{max-width:var(--measure)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.muted{color:var(--ink-2)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:var(--sp-4);top:var(--sp-4);z-index:99;background:var(--surface);
  padding:var(--sp-3) var(--sp-4);border-radius:var(--radius)}

/* ---------- секции ---------- */
.section{padding:var(--sp-9) 0}
.section--tight{padding:var(--sp-8) 0}
.section--surface{background:var(--surface)}
.section--line{border-top:1px solid var(--line)}
.section-head{margin-bottom:var(--sp-7);max-width:var(--measure)}
.section-head p{margin-top:var(--sp-3);color:var(--ink-2);font-size:var(--fs-lg)}
.eyebrow{display:block;font-family:var(--font-mono);font-size:var(--fs-xs);
  letter-spacing:.19em;text-transform:uppercase;color:var(--data);margin-bottom:var(--sp-3)}
.lead{font-size:var(--fs-lg);line-height:1.55;color:var(--ink-2)}

/* ---------- кнопки ---------- */
.btn{display:inline-flex;align-items:center;gap:var(--sp-2);border:1px solid transparent;
  padding:13px 22px;border-radius:var(--radius);font-family:var(--font-head);
  font-size:var(--fs-base);font-weight:600;text-decoration:none;cursor:pointer;
  transition:background .18s var(--ease),border-color .18s var(--ease),
             transform .18s var(--ease),box-shadow .18s var(--ease)}
.btn--primary{background:var(--action);color:var(--action-ink)}
.btn--primary:hover{background:var(--action-hover);color:var(--action-ink);
  transform:translateY(-1px);box-shadow:var(--shadow-1)}
.btn--primary:active{transform:translateY(0)}
.btn--ghost{background:transparent;border-color:var(--line-strong);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink);color:var(--ink);background:var(--surface-2)}
.btn--wide{width:100%;justify-content:center}

/* ---------- шапка ---------- */
.site-header{position:sticky;top:0;z-index:40;background:rgba(254,249,246,.88);
  backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid var(--line)}
.site-header__bar{display:flex;align-items:center;gap:var(--sp-6);padding:var(--sp-3) var(--sp-6);
  max-width:var(--wrap);margin:0 auto}
.logo{display:flex;align-items:center;gap:var(--sp-3);margin-right:auto;text-decoration:none}
.logo img{height:42px;width:auto}
.nav{display:flex;gap:var(--sp-5);list-style:none;margin:0;padding:0}
.nav a{color:var(--ink-2);text-decoration:none;font-size:var(--fs-base);white-space:nowrap;
  padding:6px 0;border-bottom:1px solid transparent;transition:color .16s,border-color .16s}
.nav a:hover{color:var(--ink);border-bottom-color:var(--action)}
.header-cta{display:flex;align-items:center;gap:var(--sp-4)}
.header-phone{font-family:var(--font-mono);font-size:var(--fs-base);color:var(--ink);
  text-decoration:none;white-space:nowrap}
.header-phone small{display:block;font-size:var(--fs-xs);color:var(--ink-2);letter-spacing:.02em}
.burger{display:none;flex-direction:column;gap:4px;background:none;border:0;padding:10px;cursor:pointer}
.burger span{width:22px;height:2px;background:var(--ink);display:block;transition:transform .2s,opacity .2s}

/* ---------- первый экран ---------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero__media{position:absolute;inset:0;background-size:cover;background-position:center;
  background-repeat:no-repeat}
.hero__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(96deg,
    rgba(254,249,246,calc(var(--veil) + .40)) 0%,
    rgba(254,249,246,calc(var(--veil) + .26)) 42%,
    rgba(254,249,246,var(--veil)) 78%,
    rgba(254,249,246,calc(var(--veil) + .14)) 100%)}
.hero__inner{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;
  gap:var(--sp-8);align-items:center;padding:var(--sp-9) var(--sp-6);max-width:var(--wrap);margin:0 auto}
.hero h1{margin-bottom:var(--sp-4)}
.hero__sub{font-size:var(--fs-lg);color:var(--ink-2);max-width:46ch;line-height:1.5}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-6)}

/* панель маршрутов */
.routes{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-2);overflow:hidden}
.routes h3{padding:var(--sp-5) var(--sp-5) var(--sp-4);font-size:var(--fs-md);font-weight:700;
  border-bottom:1px solid var(--line)}
.route{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--line)}
.route__path{font-weight:500}
.route__mode{display:block;font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--ink-2);
  letter-spacing:.09em;text-transform:uppercase;text-decoration:none;margin-top:3px}
.route__days{font-family:var(--font-mono);font-size:var(--fs-md);color:var(--data);
  font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums}
.routes__note{padding:var(--sp-4) var(--sp-5);font-size:var(--fs-sm);color:var(--ink-2);line-height:1.5}

/* ---------- сетки и карточки ---------- */
.grid{display:grid;gap:var(--sp-5)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:var(--sp-5);display:flex;flex-direction:column;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease)}
.card:hover{border-color:var(--line-strong);box-shadow:var(--shadow-1);transform:translateY(-2px)}
.card h3{margin-bottom:var(--sp-3);font-size:var(--fs-md);font-weight:700}
.card p{color:var(--ink-2);font-size:var(--fs-base);margin-bottom:var(--sp-4)}
.card__label{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-2);display:block;margin-bottom:var(--sp-2)}
.card__more{margin-top:auto;font-weight:600;text-decoration:none;color:var(--data-link);
  border-bottom:1px solid currentColor;align-self:flex-start;padding-bottom:1px}
.card__more:hover{color:var(--action)}

/* цифры компании */
.figures{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-4)}
.figure{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:var(--sp-5)}
.figure b{display:block;font-family:var(--font-head);font-size:var(--fs-2xl);font-weight:800;
  color:var(--data);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.figure span{display:block;margin-top:var(--sp-2);font-size:var(--fs-sm);color:var(--ink-2)}

/* шаги */
.steps{counter-reset:step;display:grid;gap:var(--sp-4)}
.step{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-5);
  padding:var(--sp-5) 0;border-top:1px solid var(--line)}
.step__n{counter-increment:step;font-family:var(--font-mono);font-size:var(--fs-sm);
  color:var(--data);padding-top:3px}
.step__n::before{content:counter(step,decimal-leading-zero)}
.step h4{margin-bottom:var(--sp-2)}
.step p{color:var(--ink-2);font-size:var(--fs-base)}

/* плашки направлений */
.tags{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.tag{display:inline-block;padding:8px 14px;border:1px solid var(--line-strong);
  border-radius:100px;font-size:var(--fs-sm);color:var(--ink);background:var(--surface);
  transition:background .16s,border-color .16s}
.tag:hover{background:var(--surface-2);border-color:var(--ink-3)}
.tag--accent{border-color:var(--data);color:var(--data-link);background:var(--data-soft)}

/* список стоимости */
.costs{list-style:none;margin:0;padding:0}
.costs li{padding:var(--sp-4) 0;border-bottom:1px solid var(--line);display:grid;
  grid-template-columns:auto 1fr;gap:var(--sp-4)}
.costs li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--action);
  margin-top:11px}
.costs b{font-weight:600}
.costs span{color:var(--ink-2)}

/* ---------- вопросы и ответы ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:var(--sp-5) var(--sp-8) var(--sp-5) 0;
  position:relative;font-family:var(--font-head);font-weight:700;font-size:var(--fs-md)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--ink-2);border-bottom:2px solid var(--ink-2);
  transform:translateY(-70%) rotate(45deg);transition:transform .22s var(--ease)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq__body{padding:0 var(--sp-8) var(--sp-5) 0;color:var(--ink-2)}

/* ---------- форма ---------- */
.lead-form{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:var(--sp-6);box-shadow:var(--shadow-1)}
.field{margin-bottom:var(--sp-4)}
.field label{display:block;font-size:var(--fs-sm);color:var(--ink-2);margin-bottom:6px}
.field input,.field textarea{width:100%;padding:12px 14px;border:1px solid var(--line-strong);
  border-radius:var(--radius);background:var(--paper);color:var(--ink);
  font-family:inherit;font-size:var(--fs-base);transition:border-color .16s,box-shadow .16s}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--data);
  box-shadow:0 0 0 3px var(--data-soft)}
.field textarea{min-height:96px;resize:vertical}
.field--error input,.field--error textarea{border-color:var(--risk)}
.field__error{color:var(--risk);font-size:var(--fs-sm);margin-top:5px}
.consent{display:flex;gap:9px;align-items:flex-start;font-size:var(--fs-sm);color:var(--ink-2);margin:var(--sp-2) 0 var(--sp-4);line-height:1.5;cursor:pointer}
.consent input{width:16px;height:16px;margin-top:2px;flex:0 0 auto;accent-color:var(--action)}
.consent a{color:var(--data-link)}
.form-note{font-size:var(--fs-sm);color:var(--ink-2);margin-top:var(--sp-3)}
.form-status{margin-top:var(--sp-4);padding:var(--sp-4);border-radius:var(--radius);font-size:var(--fs-base)}
.form-status--ok{background:var(--ok-soft);color:var(--ok)}
.form-status--err{background:var(--risk-soft);color:var(--risk)}

/* ---------- таблицы ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:480px;font-size:var(--fs-base)}
th{text-align:left;font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-2);padding:var(--sp-4) var(--sp-5);
  border-bottom:1px solid var(--line);font-weight:400}
td{padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}

/* ---------- хлебные крошки ---------- */
.crumbs{padding:var(--sp-5) 0 0;font-size:var(--fs-sm);color:var(--ink-2)}
.crumbs a{color:var(--ink-2)}
.crumbs a:hover{color:var(--action)}

/* ---------- подвал ---------- */
.site-footer{background:var(--surface);border-top:1px solid var(--line);
  padding:var(--sp-8) 0 var(--sp-6);margin-top:var(--sp-9)}
.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-6)}
.footer-grid h4{margin-bottom:var(--sp-4);font-size:var(--fs-sm);font-family:var(--font-mono);
  font-weight:400;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2)}
.footer-grid ul{list-style:none;margin:0;padding:0}
.footer-grid li{margin-bottom:var(--sp-2);font-size:var(--fs-base)}
.footer-grid a{color:var(--ink);text-decoration:none}
.footer-grid a:hover{color:var(--action)}
.footer-legal{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-top:var(--sp-7);
  padding-top:var(--sp-5);border-top:1px solid var(--line);
  font-size:var(--fs-sm);color:var(--ink-2)}

/* ---------- появление при прокрутке ----------
   Сдержанно: сдвиг на 14 пикселей и проявление. Без параллакса
   и разлёта — на странице с таблицами сроков это мешает читать. */
.reveal{opacity:0;transform:translateY(14px);
  transition:opacity .55s var(--ease-out),transform .55s var(--ease-out)}
.reveal.is-in{opacity:1;transform:none}
.reveal-group>*{opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.reveal-group.is-in>*{opacity:1;transform:none}
.reveal-group.is-in>*:nth-child(2){transition-delay:.06s}
.reveal-group.is-in>*:nth-child(3){transition-delay:.12s}
.reveal-group.is-in>*:nth-child(4){transition-delay:.18s}
.reveal-group.is-in>*:nth-child(5){transition-delay:.24s}
.reveal-group.is-in>*:nth-child(6){transition-delay:.3s}

/* ---------- адаптив ---------- */
@media (max-width:1000px){
  .hero__inner{grid-template-columns:1fr;gap:var(--sp-7);padding:var(--sp-8) var(--sp-5)}
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .burger{display:flex}
  .nav{position:fixed;inset:60px 0 auto;background:var(--paper);flex-direction:column;
    gap:0;padding:var(--sp-4) var(--sp-6);border-bottom:1px solid var(--line);
    transform:translateY(-120%);transition:transform .25s var(--ease);z-index:39}
  .nav.is-open{transform:none}
  .nav li{border-bottom:1px solid var(--line)}
  .nav a{display:block;padding:var(--sp-4) 0}
  .header-phone small{display:none}
  .section{padding:var(--sp-8) 0}
  .grid--2,.grid--3,.grid--4,.figures{grid-template-columns:1fr}
  .hero h1{font-size:2rem}
  .step{grid-template-columns:1fr;gap:var(--sp-2)}
}

/* Editorial cover captions, 2026-10-07. */
.editorial-band{margin:0;position:relative}.editorial-band figcaption{position:absolute;z-index:2;right:1rem;bottom:.75rem;padding:.2rem .55rem;background:#1e252bdd;color:#fff;font-size:.75rem;border-radius:.25rem}

/* колонки карточек строго равные: при 1fr длинная строка («от 30 до 40 дней»)
   распирала свою колонку, и плитки в соседних карточках кейсов не совпадали.
   Двухколоночные блоки с заголовком не трогаем: там колонка должна подстроиться
   под длинное слово («Железнодорожные»), иначе оно рвётся посередине.
   Стоит сразу после темы, чтобы частные сетки ниже (калькулятор) её перекрывали */
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.figures{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1000px){.grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.grid--2,.grid--3,.grid--4,.figures{grid-template-columns:1fr}}

/* мессенджеры */
.msgr{display:inline-flex;gap:8px;align-items:center}
.msgr a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line-strong);color:var(--ink-2);transition:all .18s var(--ease-out)}
.msgr a:hover{border-color:var(--data);color:var(--data)}
.msgr svg{width:19px;height:19px;fill:currentColor}

/* списки «входит / не входит» */
.tick{list-style:none;display:grid;gap:11px;margin-top:var(--sp-4)}
.tick li{padding-left:26px;position:relative;line-height:1.55}
.tick li::before{position:absolute;left:0;top:0;font-family:var(--font-mono);font-weight:600}
.tick--in li::before{content:"+";color:var(--data)}
.tick--out li::before{content:"–";color:var(--ink-3)}

/* широкая полоса под заголовком */
.band{position:relative;height:clamp(180px,26vw,300px);overflow:hidden;background:var(--surface-2)}
.band img{width:100%;height:100%;object-fit:cover;display:block}
.band::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(254,249,246,.10),rgba(254,249,246,.72))}
.band--tall{height:clamp(240px,34vw,400px)}

/* карточка с картинкой */
.card--pic{padding:0;overflow:hidden;display:flex;flex-direction:column}
.card--pic img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;
  transition:transform .5s var(--ease-out)}
.card--pic:hover img{transform:scale(1.03)}
.card--pic__body{padding:var(--sp-5)}

/* собственные снимки */
.shots{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4)}
.shots figure{margin:0}
.shots img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;
  border-radius:var(--radius);border:1px solid var(--line)}
.shots figcaption{font-size:var(--fs-sm);color:var(--ink-2);margin-top:10px;line-height:1.45}
@media (max-width:900px){.shots{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.shots{grid-template-columns:1fr}}

/* восемь пунктов меню — шаг чуть меньше */
@media (min-width:1100px){.nav{gap:18px}.nav a{font-size:15px}}

/* блог и новости */
.feed{display:grid;gap:0;margin-top:var(--sp-6);border-top:1px solid var(--line)}
.feed a{display:grid;grid-template-columns:150px 1fr;gap:var(--sp-5);
  padding:var(--sp-4) 0;border-bottom:1px solid var(--line);align-items:baseline;
  text-decoration:none;transition:background .18s var(--ease-out)}
.feed a:hover{background:var(--surface)}
.feed time{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--ink-3);
  white-space:nowrap}
.feed b{display:block;font-weight:600;color:var(--ink);line-height:1.35}
.feed span{display:block;color:var(--ink-2);font-size:var(--fs-sm);margin-top:5px;
  line-height:1.5}
@media (max-width:640px){.feed a{grid-template-columns:1fr;gap:6px}}

/* текст статьи */
.article{max-width:44rem}
.article p{margin-top:var(--sp-4)}
.article h2{margin-top:var(--sp-7)}
.article h3{margin-top:var(--sp-5)}
.article ul{margin-top:var(--sp-4);display:grid;gap:9px;padding-left:22px}
.article li{line-height:1.55}
.article__meta{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--ink-3);
  margin-top:var(--sp-3)}

/* карта */
.map{border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  background:var(--surface-2);min-height:320px}
.map iframe{display:block;width:100%;height:340px;border:0}

/* Заголовок, которому сборка подняла уровень ради структуры без перескоков,
   несёт класс прежнего уровня и выглядит как раньше (build.py, urovni). */
.h3{font-size:var(--fs-xl);font-weight:700;letter-spacing:-.015em}
.card .h3{margin-bottom:var(--sp-3);font-size:var(--fs-md);font-weight:700}
.routes .h3{padding:var(--sp-5) var(--sp-5) var(--sp-4);font-size:var(--fs-md);font-weight:700;
  border-bottom:1px solid var(--line)}
.article .h3{margin-top:var(--sp-5)}
/* автор материала: значок и одна фраза */
.article__author{display:flex;gap:10px;align-items:center;margin:var(--sp-3) 0 var(--sp-5);
  font-size:var(--fs-sm);color:var(--ink-2)}
.article__author img{width:32px;height:32px;border-radius:50%;flex:none}
.article__author a{color:var(--ink);font-weight:600}
.article__author span{display:flex;flex-direction:column;line-height:1.35}
/* Колонки подвала: по смыслу разделы второго уровня, по виду прежние h4. */
.h4{font-size:var(--fs-md);font-weight:700;letter-spacing:0}
.step .h4{margin-bottom:var(--sp-2)}
.footer-grid .h4{margin-bottom:var(--sp-4);font-size:var(--fs-sm);font-family:var(--font-mono);
  font-weight:400;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2)}

/* окно про cookie: маленькая карточка в углу, не плашка поверх текста */
.cookie{position:fixed;left:16px;bottom:16px;z-index:50;max-width:340px;padding:var(--sp-4);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:0 8px 24px rgba(35,24,17,.12);font-size:var(--fs-sm);color:var(--ink-2)}
.cookie p{margin:0}
.cookie a{color:var(--data-link)}
.cookie__knopki{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--sp-3)}
.cookie__knopki .btn{padding:8px 14px;font-size:var(--fs-sm)}
@media (max-width:420px){.cookie{left:8px;right:8px;bottom:8px;max-width:none}}

/* шапка: меню под бургером уже 1280 px (deploy/shapka.py) */
.site-header__bar{position:relative;max-width:1600px;gap:24px;padding-left:32px;padding-right:32px}
.site-header .logo,.site-nav,.header-cta{flex-shrink:0}
.site-nav{display:flex;align-items:center}
.site-nav .nav{position:static;transform:none;inset:auto;background:none;border:0;padding:0;
  transition:none;flex-direction:row;gap:16px}
.site-nav .nav a{font-size:14px}
.menu-extra,.header-call-icon,.compact-label{display:none}
.burger{display:none;flex-shrink:0;width:44px;height:44px;padding:0;margin:0;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;color:var(--ink);
  background:none;border:1px solid var(--line-strong);border-radius:4px}
.burger span{display:block;width:20px;height:2px;background:currentColor;
  transition:transform .2s,opacity .2s}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* метка-бургер для режима без скрипта (см. ниже) */
.burger-cb{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.burger--css{display:none}
html:not(.js) .burger-cb:checked~.burger--css span:nth-child(1){transform:translateY(7px) rotate(45deg)}
html:not(.js) .burger-cb:checked~.burger--css span:nth-child(2){opacity:0}
html:not(.js) .burger-cb:checked~.burger--css span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (min-width:1280px){
  .header-cta .msgr,.header-cta .header-phone small{display:none}
}
@media (min-width:1440px){
  .site-nav .nav{gap:22px}.site-nav .nav a{font-size:15px}
  .header-cta .header-phone small{display:block}
}
@media (min-width:1600px){.header-cta .msgr{display:inline-flex}}
/* 320 px: логотип, телефон, «Заявка» и меню не помещались, бургер торчал
   за край на 14 px и страница ездила вбок */
@media (max-width:359px){
  .site-header__bar{padding-left:12px;padding-right:12px}
}
@media (max-width:1280px){
  .site-nav{order:5;flex-basis:100%}
  .header-cta{margin-left:auto}
  .site-header__bar{flex-wrap:nowrap}
  /* меню под бургером работает и без скрипта: кнопка-метка переключает
     скрытую галочку (просмотрщик файла в телефоне скрипты не выполняет,
     30.09 там меню стояло в шапке тремя строками). Со скриптом стоит кнопка */
  .js .burger:not(.burger--css){display:flex}
  html:not(.js) .burger--css{display:flex}
  .site-nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;
    align-items:stretch;padding:12px 32px 24px;background:var(--paper);
    border-bottom:1px solid var(--line);box-shadow:0 12px 22px rgba(35,24,17,.08);
    max-height:calc(100dvh - 80px);overflow:auto;z-index:40}
  .js .site-nav.is-open,html:not(.js) .burger-cb:checked~.site-nav{display:flex}
  .site-nav .nav{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
  .site-nav .nav li{border-bottom:1px solid var(--line)}
  .site-nav .nav a{display:block;font-size:16px;padding:13px 0;min-height:48px}
  .menu-extra{display:flex;flex-wrap:wrap;gap:16px;align-items:center;
    justify-content:space-between;margin-top:20px}
  .menu-extra a:not(.btn){font-family:var(--font-mono);color:var(--ink);text-decoration:none}
}
@media (max-width:760px){
  .site-header__bar{padding:10px 24px;gap:10px}
  .logo img{height:36px;width:auto}
  .header-cta{gap:10px}
  .header-cta .msgr,.header-cta .header-phone small{display:none}
  .header-cta .header-phone{font-size:13px}
  .site-nav{padding:8px 24px 20px}
}
@media (max-width:540px){
  .site-header__bar{padding:10px 16px;gap:8px}
  .logo img{height:32px}
  .header-cta{gap:6px}
  /* только в шапке: класс header-phone стоит и у крупного номера на «Контактах» */
  .header-cta .header-phone{display:flex;width:40px;height:44px;align-items:center;justify-content:center;
    border:1px solid var(--line-strong);border-radius:4px}
  .header-cta .header-phone-text{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0,0,0,0);white-space:nowrap}
  .header-call-icon{display:block;width:20px;height:20px}
  .full-label{display:none}
  .compact-label{display:inline}
  .header-cta>.btn{padding:10px 12px}
  .site-nav{padding:8px 16px 20px}
  .site-nav .nav{grid-template-columns:1fr}
  /* подвал одной колонкой: длинные названия услуг не влезают по две в ряд */
  .footer-grid{grid-template-columns:1fr;gap:28px}
}
/* длинное слово в заголовке («Железнодорожная», «Международные») на 320 px
   не влезает в строку: переносим по слогам и чуть уменьшаем H1 */
h1,h2{overflow-wrap:break-word;hyphens:auto}
@media (max-width:380px){h1{font-size:clamp(26px,8.4vw,32px)}}

/* калькулятор растаможки (deploy/kalkulyator.py) */
.kalk{display:grid;gap:var(--sp-4)}
.kalk__ryad{display:grid;grid-template-columns:1fr 150px;gap:12px;align-items:end}
.kalk select,.kalk input[type=text]{width:100%}
.kalk__podskazka{font-size:var(--fs-sm);color:var(--ink-2);margin-top:4px}
.kalk__nds{display:flex;gap:18px;flex-wrap:wrap}
.kalk__nds label,.kalk__radio{display:flex;gap:8px;align-items:center;font-size:var(--fs-sm)}
.kalk-itog{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);
  padding:var(--sp-5)}
.kalk-itog table{width:100%;border-collapse:collapse}
/* в теме у таблиц min-width 480px под широкие таблицы с прокруткой;
   здесь две колонки, на телефоне они должны сжиматься */
.kalk-itog table,.kalk-shkala{min-width:0}
.kalk-itog td{padding:10px 0;border-bottom:1px solid var(--line)}
.kalk-itog td:last-child{text-align:right;font-family:var(--font-mono);white-space:nowrap}
.kalk-itog tr:last-child td{border-bottom:0;font-weight:700;font-size:var(--fs-md)}
.kalk-itog__zamechanie{font-size:var(--fs-sm);color:var(--ink-2);margin-top:var(--sp-3)}
.kalk-shkala td{padding:8px 0;border-bottom:1px solid var(--line)}
.kalk-shkala td:last-child{text-align:right;font-family:var(--font-mono);white-space:nowrap}
@media (max-width:540px){.kalk__ryad{grid-template-columns:1fr}}
/* правки по проверке глазами 29.09: список валют и блок НДС были
   браузерными по умолчанию, суммы моноширинным с широкими пробелами */
.kalk select{appearance:none;-webkit-appearance:none;height:auto;padding:12px 38px 12px 14px;
  border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--paper)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23231811' stroke-width='1.6'/%3E%3C/svg%3E")
  no-repeat right 14px center;color:var(--ink);font-family:inherit;font-size:var(--fs-base);
  line-height:normal;cursor:pointer}  /* как у поля суммы: иначе список на 4 px выше соседа */
.kalk select:focus{outline:0;border-color:var(--data);box-shadow:0 0 0 3px var(--data-soft)}
.kalk fieldset{border:0;padding:0;margin:0 0 var(--sp-4);min-width:0}
.kalk legend{padding:0;margin-bottom:8px;font-size:var(--fs-sm);color:var(--ink-2)}
.kalk__nds label{white-space:nowrap}
.kalk-itog td:last-child,.kalk-shkala td:last-child{font-family:inherit;
  font-variant-numeric:tabular-nums;padding-left:16px}
.kalk-shkala td:first-child{font-variant-numeric:tabular-nums}
/* на планшете форма и итог друг под другом: в две колонки поля узкие */
@media (max-width:1099px){.kalk-setka{grid-template-columns:1fr}}

/* правки вида по проверке 29.09 (deploy/vid.py) */
/* подвал сразу за последним разделом: отступ над ним показывал полосу
   фона страницы между двумя бежевыми блоками */
.site-footer{margin-top:0}
/* два раздела подряд на одном фоне: отступ между ними один, а не двойной */
.section:not(.section--surface):not(.hero)+.section:not(.section--surface):not(.section--line){padding-top:0}
/* «Подробнее» и «Читать» внизу карточки, в ряду на одной высоте */
.card--pic__body{display:flex;flex-direction:column;flex:1 1 auto}
.card--pic__body p{margin-bottom:var(--sp-4)}
.card--pic{position:relative}
.card--pic__metka{position:absolute;top:12px;left:12px;z-index:1;background:var(--paper);
  border:1px solid var(--line-strong);border-radius:999px;padding:3px 10px;font-size:var(--fs-xs)}
/* заголовок карточки в две строки не слипается */
.card :is(h2,h3){line-height:1.25}
/* одна текстовая карточка во втором ряду на планшете: во всю ширину */
@media (min-width:761px) and (max-width:1000px){
  .grid--3>.card:not(.card--pic):last-child:nth-child(odd){grid-column:1/-1}
}
/* частые вопросы на телефоне: ответ во всю ширину, место только под стрелку */
@media (max-width:540px){
  .faq summary{padding-right:36px}
  .faq__body{padding-right:0}
}
/* карточка-ссылка: ссылка на заголовке растянута на всю карточку */
.card--ssylka{position:relative}
/* сборка поднимает h3 до h2, если выше нет h2 (urovni в build.py): оба уровня */
.card--ssylka :is(h2,h3) a{color:inherit;text-decoration:none}
.card--ssylka :is(h2,h3) a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.card--ssylka :is(h2,h3) a:focus-visible{outline:0}
.card--ssylka :is(h2,h3) a:focus-visible::after{outline:2px solid var(--data);outline-offset:3px}
.card--ssylka:hover .card__more{color:var(--action)}
/* перелинковка: под статьёй услуги по теме и «Читайте также» (perelinkovka.py) */
.po-teme{margin-top:var(--sp-8);padding-top:var(--sp-6);border-top:1px solid var(--line)}
.po-teme>h2{font-size:var(--fs-xl)}
.po-teme .grid{margin-top:var(--sp-5)}
.po-teme .card :is(h2,h3){font-size:var(--fs-md)}
.po-teme+.po-teme{border-top:0;padding-top:0;margin-top:var(--sp-7)}
/* маршрут на телефоне: поля панели как у колонки, срок чуть мельче, чтобы
   длинный «Нинбо → Санкт-Петербург» встал в строку со сроком; на 320 px
   срок уходит строкой ниже, а не за край */
@media (max-width:400px){
  .route{padding-left:16px;padding-right:16px;gap:10px;flex-wrap:wrap;row-gap:4px}
  .route__days{font-size:15px;margin-left:auto}
  .routes .h3,.routes h3,.routes__note{padding-left:16px;padding-right:16px}
}
/* от 341 px срок стоит справа, а переносится название маршрута в своей колонке */
@media (min-width:341px) and (max-width:400px){
  .route{display:grid;grid-template-columns:1fr auto}
}
/* карточка услуги под статьёй: у заголовка в тексте статьи свой отступ сверху */
.po-teme .card :is(h2,h3){margin-top:0}
/* две кнопки первого экрана в столбик одной ширины */
.hero__cta .btn{min-width:260px;justify-content:center;text-align:center}
/* поля колонки на телефоне: край текста совпадает с краем логотипа в шапке */
@media (max-width:760px){
  .wrap{padding-left:24px;padding-right:24px}
  .hero__inner{padding-left:24px;padding-right:24px}
}
@media (max-width:540px){
  .wrap{padding-left:16px;padding-right:16px}
  .hero__inner{padding-left:16px;padding-right:16px}
}
/* даты в списках статей читались бледно (контраст около 3:1) */
.feed time{color:var(--ink-2)}
/* списки «входит / не входит»: без отступа списка браузера, отступ даёт знак */
.tick{padding-left:0}
/* цифры в плашках: табличная единица стояла с пробелом, «18» читалось как «1 8» */
.figure b{font-variant-numeric:normal}
/* смысловой кадр страницы (комплект дизайнера 7.09) */
.page-visual-section{padding:var(--sp-5) 0 var(--sp-8)}
.page-visual-section+.section:not(.section--surface){padding-top:0}
.page-visual-frame{margin:0;overflow:hidden;border:1px solid var(--line);
  border-radius:var(--radius-lg);background:var(--surface-2);box-shadow:var(--shadow-1)}
.page-visual-frame img{display:block;width:100%;height:auto}
@media (max-width:760px){.page-visual-section{padding:var(--sp-3) 0 var(--sp-7)}}
/* «Контакты»: карточка офиса с кнопкой под картой */
.kontakt-mesto{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;
  justify-content:space-between;margin-top:var(--sp-5)}
.kontakt-mesto h3{font-size:var(--fs-md)}
.kontakt-mesto p{margin-top:4px;color:var(--ink-2)}
/* страница направления: карточка «откуда, как везём, срок» */
.napravlenie-fakty dl{display:grid;grid-template-columns:auto 1fr;gap:12px 20px;margin:0}
.napravlenie-fakty dt{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2);padding-top:4px}
.napravlenie-fakty dd{margin:0;font-weight:500}
/* вторичный серый текст на бежевом фоне был 4,4:1 при норме 4,5:1; чуть темнее */
:root:not([data-theme="dark"]){--ink-2:#6F645C}
/* смысловой кадр на телефоне: широкая полоса 2,3:1 выходила высотой 140 px,
   люди и детали мельчили; показываем середину кадра выше */
@media (max-width:540px){.page-visual-frame img{aspect-ratio:3/2!important;object-fit:cover}}
/* текущий раздел в меню */
.site-nav .nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--action)}
/* обрезка обложки в карточке 3:2: у пяти кадров по центру резались люди
   (проверка картинок 29.09). На сайте картинка стоит в src, в файле для
   заказчика фоном по классу, поэтому оба способа сразу. */
.card--pic img:is([src*="m-0cedrvidh1"],[class*="m-0cedrvidh1"]){object-position:10% 50%;background-position:10% 50%}
.card--pic img:is([src*="m-126p1plv21"],[class*="m-126p1plv21"]){object-position:60% 50%;background-position:60% 50%}
.card--pic img:is([src*="m-iztn04sag1"],[class*="m-iztn04sag1"]){object-position:95% 50%;background-position:95% 50%}
.card--pic img:is([src*="m-tamozhennaya"],[class*="m-tamozhennaya"]){object-position:0% 50%;background-position:0% 50%}
.card--pic img:is([src*="m-yvxuoy81k1"],[class*="m-yvxuoy81k1"]){object-position:20% 50%;background-position:20% 50%}
/* подпись автора статьи читалась мелко (около 11 px) */
.article__author small{font-size:var(--fs-sm)}
/* полоса над статьёй: у обложки о пошлинах по центру резалась голова */
.band img:is([src*="m-p8g62jmca1"],[class*="m-p8g62jmca1"]){object-position:50% 20%;background-position:50% 20%}
/* неразрывная связка для «Санкт-Петербург» и подобных */
.nobr{white-space:nowrap}
/* без JavaScript блоки с появлением не должны оставаться прозрачными */
html:not(.js) .reveal,html:not(.js) .reveal-group>*{opacity:1;transform:none}

/* факты направления на 320 px: «Как везём» и «мультимодальные» в две колонки
   не помещались, колонка раздвигала страницу вбок на 8 px. Подпись над значением */
@media (max-width:400px){.napravlenie-fakty dl{grid-template-columns:1fr;gap:2px 0}
  .napravlenie-fakty dd{margin:0 0 10px}}
/* правки по проверке снимков 29.09, вечер */
/* одиночное слово в последней строке абзаца и заголовка */
p,li,dd,summary,figcaption{text-wrap:pretty}
h1,h2,h3,h4{text-wrap:balance}
/* переключатели и галочки в цвет кнопок, а не браузерные синие */
input[type=radio],input[type=checkbox]{accent-color:var(--action)}
/* кнопки в первом экране направления стояли вплотную, зазор 4 px */
.knopki{display:flex;flex-wrap:wrap;gap:12px}
/* полоса-картинка под шапкой была почти молочной: заливку снизу ослабили */
.band::after{background:linear-gradient(to bottom,rgba(254,249,246,0),rgba(254,249,246,.38))}
/* карточки «ВЭД под ключ» и «Страхование»: у края резался человек.
   На ВЭД показываем одного собеседника целиком, на страховании обоих справа */
.card--pic img:is([src*="w-ved."],[class*="w-ved"]){object-position:0% 50%;background-position:0% 50%}
.card--pic img:is([src*="w-strahovanie"],[class*="w-strahovanie"]){object-position:100% 50%;background-position:100% 50%}
/* главная: шестая ячейка сетки «Пять задач» ведёт в каталог */
.card--katalog{background:var(--paper);border-style:dashed}
/* каталог направлений: восемь карточек по четыре в ряд, без пустой ячейки */
@media (min-width:1001px){.napr-setka{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* плитки веса и срока в кейсах: крупный кегль не влезал в узкую колонку */
@media (min-width:761px){.kejs-setka{grid-template-columns:repeat(2,minmax(0,1fr))}}
.card .figure{padding:var(--sp-4)}
.card .figure b{font-size:clamp(1.25rem,1.1rem + 0.9vw,1.625rem)}
/* калькулятор: итог держится на экране, пока заполняешь форму слева */
@media (min-width:1100px){.kalk-itog{position:sticky;top:96px}}
/* о компании: плитки с цифрами не оставляют пустую колонку рядом с текстом */
@media (min-width:761px){.grid--2>.figures{position:sticky;top:96px}}

[hidden]{display:none!important}.form-status{margin-top:1rem}.map-load{margin:1rem}

.route__days{color:var(--data-link)}
.skip-link{position:fixed;left:1rem;top:-100px;z-index:1000;padding:.75rem 1rem;background:var(--paper);color:var(--ink);border:2px solid var(--action)}.skip-link:focus{top:1rem}

/* focus-scroll-offset */
html{scroll-padding-top:100px}.field input,.field textarea,.field select{scroll-margin-top:100px}

/* audit-accessibility-20261007 */
.article__meta{color:var(--ink-2)}
.eyebrow{color:var(--data-link)}
.form-status--ok{color:#246A39}
.form-status--err,.field__error{color:#963C36}

/* service-catalog-grouping */
.service-catalog__group+.service-catalog__group{margin-block-start:var(--sp-8)}

/* footer-compact-20261007 */
.footer-grid.footer-grid--compact{grid-template-columns:1.1fr .9fr 1.1fr;gap:var(--sp-7);align-items:start}
.footer-grid--compact h2{font-family:var(--font-head);font-size:20px;line-height:1.35;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink);margin-bottom:var(--sp-4)}
.footer-grid--compact .footer-brand{display:block;font-family:var(--font-head);font-size:24px;line-height:1.2;font-weight:800}
.footer-about p{margin:var(--sp-4) 0 var(--sp-5);font-size:var(--fs-base);color:var(--ink-2);max-width:32ch}
.footer-grid--compact li{margin:0;font-size:var(--fs-base)}
.footer-grid--compact li>a{display:inline-block;padding-block:6px;line-height:1.4}
.footer-grid--compact .btn--primary{color:var(--action-ink)}
.footer-grid--compact .footer-address{margin-block:var(--sp-3);line-height:1.6}
.footer-hours{font-size:var(--fs-sm);color:var(--ink-2);margin-top:var(--sp-3)}
@media(max-width:960px){.footer-grid.footer-grid--compact{grid-template-columns:1fr 1fr}.footer-about{grid-column:1/-1}.footer-about p{max-width:54ch}}
@media(max-width:600px){.footer-grid.footer-grid--compact{grid-template-columns:1fr;gap:var(--sp-6)}.footer-about{grid-column:auto}}

/* Подтверждение отправки заявки */
.form-status:empty{display:none}
.form-status:not(:empty){position:relative;border:1px solid var(--line);padding:20px 20px 20px 66px;line-height:1.55;text-align:left;overflow-wrap:anywhere}
.form-status::before{position:absolute;left:20px;top:22px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:18px;font-weight:700}
.form-status--ok{background:#edf5ef!important;border-color:#b9d3bf!important;color:#205b31!important}
.form-status--ok::before{content:'✓';color:#fff;background:#246a39}
.form-status--err::before{content:'!';color:#fff;background:#963c36}
.form-status--pending::before{content:'…';color:var(--ink);background:var(--paper)}
.form-status__title{display:block;font-size:20px;line-height:1.3;margin-bottom:6px;font-weight:700;color:inherit}
.form-status__text{display:block;font-size:15px;color:inherit}
@media(max-width:400px){.form-status:not(:empty){padding:16px 14px 16px 52px}.form-status::before{left:14px;top:18px;width:24px;height:24px;font-size:16px}.form-status__title{font-size:18px}}

/* Подсказки формы, возвращение наверх и страница 404 */
.field-hint{display:block;margin-top:7px;font-size:13px;line-height:1.5;color:var(--ink-2)}
.field__error{display:block;font-size:14px;line-height:1.5;margin-top:7px}
.field input[aria-invalid="true"]{border-color:#963c36}
.field textarea[name="cargo"]{min-height:116px}
.footer-top-row{display:flex;justify-content:flex-end;margin-bottom:24px}
.back-to-top{font:inherit;font-size:14px;font-weight:600;background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--radius);padding:10px 16px;min-height:44px;cursor:pointer}
.back-to-top:hover{background:var(--paper)}
.error-page{max-width:780px;padding-block:24px}
.error-page__code{display:block;font-weight:700;font-size:clamp(72px,12vw,128px);line-height:1;letter-spacing:-.06em;color:var(--data-link);opacity:.32;margin-bottom:20px}
.error-page__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.error-page__actions .btn{min-height:48px}
.error-page__links{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:24px;line-height:1.6}
.error-page__contact{margin-top:32px;color:var(--ink-2);line-height:1.65}
@media(max-width:480px){.error-page__actions{flex-direction:column}.error-page__actions .btn{width:100%;text-align:center}.error-page__links{flex-direction:column;gap:14px}.error-page{padding-block:0}}

/* Cookie: independent choice, keyboard controls, no page reload. */
.cookie{width:420px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);overflow:auto;padding:24px;color:var(--ink);}
.cookie h2{font-size:20px;line-height:1.25;margin:0 24px 12px 0;letter-spacing:0;}
.cookie p{line-height:1.55;}.cookie .cookie__state{margin-top:12px;font-weight:600;}
.cookie__knopki{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px;}
.cookie__knopki .btn{min-height:44px;padding:10px 8px;white-space:normal;text-align:center;border:1px solid var(--ink-2);}
.cookie .cookie__details{margin-top:14px;font-size:12px;}.cookie .cookie__hint{margin-top:10px;font-size:12px;}
.cookie__close{position:absolute;right:8px;top:6px;border:0;background:transparent;color:var(--ink);font-size:26px;width:36px;height:36px;cursor:pointer;}
.cookie-status{position:fixed;bottom:16px;left:16px;z-index:51;max-width:calc(100vw - 32px);padding:14px 18px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:0 8px 24px rgba(35,24,17,.12);font-size:14px;}
.cookie button:focus-visible,.cookie a:focus-visible{outline:3px solid var(--ink);outline-offset:3px;}
#cookie-vybor + a{display:inline-block;margin-inline-start:12px;}
@media(max-width:480px){.cookie{left:8px;right:8px;bottom:8px;width:auto;max-width:none;max-height:calc(100dvh - 16px);padding:18px;}.cookie__knopki{grid-template-columns:1fr;}}