@font-face{font-family:"Steppe";src:url("assets/fonts/Steppe-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Steppe";src:url("assets/fonts/Steppe-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Steppe";src:url("assets/fonts/Steppe-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

/* ==========================================================================
   Грузовые авиаперевозки — «Победа» × UTG-Express
   «Терминальный бланк»: светлая бумага и линовка, фиолетовый — чернила,
   жёлтый — единственная краска штампа. Три тёмных акта.
   ========================================================================== */

/* ---------- 0. TOKENS (из design-system/spec.md §2 — без переделки) ---------- */
:root{
  interpolate-size: allow-keywords;

  /* 1. Фиолетовая шкала */
  --p-50:#F3EFEE;
  --p-100:#E7E1E3;
  --p-200:#CFC6CE;
  --p-300:#AFA1B1;
  --p-400:#846F8A;
  --p-500:#583C63;
  --p-600:#341343;
  --p-700:#2A1036;
  --p-800:#1F0D28;
  --p-900:#150A1A;

  /* 2. Бумага, чернила, акценты */
  --paper:#FBF8F5;
  --paper-2:var(--p-50);   /* BLOCKER-1: вторая светлая поверхность, #F3EFEE — реальный шов между секциями */
  --white:#FFFFFF;
  --ink:#060607;

  --yellow:#F5D000;
  --yellow-hover:#FFDD26;
  --yellow-active:#E0BE00;
  --yellow-edge:#C9AB00;
  --yellow-tint:#FFF7D1;
  --on-yellow:#1A0A22;

  --coral:#FF714D;
  --coral-ink:#A84C34;
  --coral-tint:#FDEDE8;
  --on-coral:#2A0C05;

  --green:#259E00;
  --green-ink:#1D7802;
  --green-tint:#E9F3E5;

  /* 3. Роли, светлая тема */
  --bg:var(--paper);
  --surface:var(--white);
  --surface-sunken:var(--p-50);
  --fg:var(--p-700);
  --fg-head:var(--p-600);
  --fg-muted:var(--p-500);
  --fg-faint:var(--p-400);
  --border:var(--p-100);
  --border-strong:var(--p-200);
  --rule:rgba(52,19,67,.10);
  --focus:var(--p-600);

  /* 4. Тёмные акты */
  --dark-bg:var(--p-600);
  --dark-bg-alt:var(--p-700);
  --dark-bg-deep:var(--p-800);
  --dark-fg:var(--white);
  --dark-fg-muted:var(--p-200);
  --dark-fg-faint:var(--p-300);
  --dark-border:rgba(255,255,255,.12);
  --dark-rule:rgba(255,255,255,.07);
  --dark-accent:var(--yellow);
  --dark-hot:var(--coral);
  --focus-dark:var(--yellow);

  /* 5. Шрифты */
  --font-head:'Geologica','Golos Text','Helvetica Neue','Segoe UI',sans-serif;
  --font-body:'Onest','Golos Text','Helvetica Neue','Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'Courier New',monospace;

  /* 6. Шкала clamp() */
  /* upgrade-v3-art.md §3.2 задаёт потолок 84px, калиброванный под ЕЁ СОБСТВЕННЫЙ текст
     варианта A («Авиаперевозка / ГРУЗОВ РЕГУЛЯРНЫМИ / рейсами» — короткие строки).
     Утверждённый текст H1 варианта B (upgrade-v3-selling.md §2, длина строки 2 —
     «из собственных терминалов», 26 знаков) физически не помещается в колонку 7/12
     (~663px на 1440) при 84px даже полужирным — проверено измерением canvas (1217px vs
     663px доступных). Потолок пересчитан под РЕАЛЬНЫЙ текст: держит 3 чистых строки без
     вынужденного переноса внутри строки на 1440–1920, при этом заметно крупнее исходных 72px. */
  /* BLOCKER-3: H1 был мельче H2 (44 vs 56 на 1440) — единственная фраза сайта проигрывала
     каждому рядовому подзаголовку. H1 поднят до 88px/700, H2 опущен до 40-44px/600;
     разрыв между уровнями теперь ≥1.6×, а не отрицательный. */
  --t-h1:clamp(2.75rem, 1.2rem + 5.6vw, 5.5rem);          /* 44 → 88 */
  --t-h2:clamp(1.75rem, 1.35rem + 1.35vw, 2.75rem);       /* 28 → 44 */
  --t-h1-wide:clamp(3.00rem, 1.40rem + 6.80vw, 6.75rem);  /* 48 → 108, во всю ширину (не используется в hero A, задел) */
  --t-display:clamp(3.50rem, 1.50rem + 8.50vw, 8.00rem);  /* 56 → 128 — ровно 2 объекта: формула §5, «Скажем прямо» */
  --t-num-hero:clamp(3.25rem, 1.90rem + 5.75vw, 6.50rem); /* 52 → 104 — только ценовой штамп */
  --t-mix:clamp(1.375rem, 1.00rem + 1.60vw, 2.375rem);    /* 22 → 38 — mono-строка внутри H1 */
  --t-nano:0.6875rem;                                      /* 11 — только деления шкал */
  --t-h3:clamp(1.375rem, 1.20rem + 0.75vw, 1.875rem);
  --t-h4:clamp(1.125rem, 1.06rem + 0.28vw, 1.3125rem);
  --t-h5:clamp(1rem, 0.96rem + 0.19vw, 1.125rem);
  --t-body-lg:clamp(1.0625rem, 1.02rem + 0.19vw, 1.1875rem);
  --t-body:clamp(1rem, 0.97rem + 0.09vw, 1.0625rem);
  --t-small:0.875rem;
  --t-micro:0.75rem;
  --t-num-xl:clamp(2.75rem, 2.22rem + 2.25vw, 4.25rem);
  --t-num-l:clamp(1.75rem, 1.49rem + 1.13vw, 2.50rem);
  --t-num-m:clamp(1.25rem, 1.16rem + 0.38vw, 1.50rem);

  /* 7. Интерлиньяж / трекинг / вес */
  --lh-tight:1.02; --lh-head:1.10; --lh-sub:1.28; --lh-body:1.60; --lh-dense:1.45; --lh-num:1.00;
  /* трекинг — оптическая компенсация по кеглю (upgrade-v3-art.md §3.4) */
  --tr-h1:-0.038em; --tr-h2:-0.030em; --tr-h3:-0.022em; --tr-h4:-0.015em;
  --tr-display:-0.045em;                                    /* ≥96px */
  --tr-body:0em; --tr-num:-0.02em; --tr-mono:0.055em; --tr-eyebrow:0.08em;
  --w-head:600; --w-head-strong:700; --w-body:400; --w-medium:500; --w-semi:600;
  --w-head-light:300;                                       /* только display-строки ≥64px */
  --optical-pull:-0.035em;

  /* 8. Пространство */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  --s-7:32px; --s-8:40px; --s-9:48px; --s-10:56px; --s-11:64px; --s-12:80px;
  --s-13:96px; --s-14:112px; --s-15:128px;
  /* BLOCKER-5: метроном 100.8/100.8 сломан — три ступени ритма вместо одной константы */
  --section-pad-sm:clamp(48px, 5.2vw, 64px);   /* короткие секции: process, guarantees, honest */
  --section-pad:clamp(64px, 7vw, 100px);       /* стандартный вес — было clamp(…,112px) у 12 из 13 */
  --section-pad-lg:clamp(80px, 10vw, 144px);   /* тяжёлые/сигнатурные: routes, volumetric, transit, faq, request */
  --section-pad-tight:clamp(40px, 4vw, 64px);
  --block-gap:clamp(32px, 3.5vw, 56px);
  --card-pad:clamp(20px, 2.2vw, 32px);
  --panel-pad:clamp(20px, 2.6vw, 40px);

  /* 9. Сетка и контейнеры */
  --container:1240px;
  --container-wide:1400px;
  --container-text:720px;
  --gutter:clamp(16px, 4vw, 40px);
  --col-gap:clamp(16px, 1.7vw, 24px);
  --header-h:72px;
  --bottombar-h:64px;
  --rail-w:1px;

  /* 10. Радиусы — BLOCKER §7: было 4 радиуса (14/20/24/32) на один и тот же тип объекта
     («карточка с рамкой»). Канон — два: --r-card (карточки/панели) и --r-pill (чипы/пилюли).
     r-lg/r-xl/r-2xl синхронизированы на --r-card, чтобы не переписывать каждое правило. */
  --r-xs:6px;
  --r-sm:10px;
  --r-md:14px;
  --r-card:24px;
  --r-lg:var(--r-card);
  --r-xl:var(--r-card);
  --r-2xl:var(--r-card);
  --r-pill:999px;
  --r-dock:24px 24px 6px 6px;

  /* 11. Тени */
  --shadow-1:0 1px 2px rgba(52,19,67,.06), 0 1px 1px rgba(52,19,67,.04);
  --shadow-2:0 2px 4px rgba(52,19,67,.05), 0 10px 20px -8px rgba(52,19,67,.12);
  --shadow-3:0 4px 8px rgba(52,19,67,.06), 0 20px 44px -16px rgba(52,19,67,.24), 0 0 0 1px rgba(52,19,67,.06);
  --shadow-btn:0 6px 16px -8px rgba(52,19,67,.40);
  --shadow-dark:0 24px 60px -24px rgba(0,0,0,.55);
  --inset-hairline:inset 0 1px 0 rgba(255,255,255,.07);

  /* 12. Атмосфера */
  --grid-minor:8px;
  --grid-major:48px;
  --grid-light:rgba(52,19,67,.055);
  --grid-dark:rgba(255,255,255,.06);
  /* upgrade-v3-art.md §0/§4.1: было .55 → --coral внутри пятна проваливал AA (4.44 ✗).
     Понижено до .40 (4.86 ✓) — правка ОБЯЗАТЕЛЬНА, не декоративная. */
  --glow-dark:radial-gradient(56% 44% at 78% 6%, rgba(88,60,99,.40) 0%, rgba(88,60,99,0) 68%);
  /* световая установка тёмных актов — три слоя вместо одного, ноль неона (осветление --p-500) */
  --lit-key:  radial-gradient(56% 44% at 78% 6%,  rgba(88,60,99,.40) 0%, rgba(88,60,99,0) 68%);
  --lit-fill: radial-gradient(78% 60% at 8% 104%, rgba(88,60,99,.18) 0%, rgba(88,60,99,0) 72%);
  --lit-edge: linear-gradient(180deg, rgba(88,60,99,0) 62%, rgba(88,60,99,.22) 100%);
  --lit-scan: repeating-linear-gradient(180deg, rgba(255,255,255,.028) 0 1px, rgba(255,255,255,0) 1px 4px);
  --dark-hairline:rgba(255,255,255,.10);   /* верхняя кромка акта — декор */
  --dark-line:rgba(255,255,255,.35);       /* несущая линия на тёмном: 3.16 ✓ ≥3:1 */
  --dark-ring:rgba(255,255,255,.55);       /* кольцо узла таймлайна: 5.87 ✓ */
  --dark-mark:rgba(255,255,255,.45);       /* пороговые бары ВПП: 4.38 ✓ */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  /* MAJOR 10 (поправки v2): было .035 — математически невидимо на #341343. Подобрано глазами на 1440,
     зафиксировано скриншотом в BUILD REPORT. */
  --grain-opacity:.09;
  --stroke-illu:1.75px;
  /* upgrade-v3-art.md §4.5: было 1.25px @ opacity .5 → дуги фактически невидимы на 1440.
     Штрих увеличен, opacity снята (цвет --p-300 сам несёт контраст 6.48 на --p-600). */
  --stroke-arc:1.75px;
  --arc-opacity:1;
  --stroke-hero:2px;         /* heroic-контуры (борт, дуга §13) */
  --overlap:64px;            /* единственный наезд на странице — панель обмера */
  --seam-h:26px;              /* перфорация между тёмным актом и бумагой */
  --act-round:clamp(24px, 3vw, 48px);
  --btn1-h:60px; --btn1-pad:18px 34px;   /* CTA-1: hero + §13, ровно 2 на странице */
  --btn2-h:52px; --btn2-pad:14px 26px;   /* CTA-2: секционные */
  --btn-gloss:inset 0 1px 0 rgba(255,255,255,.45);

  /* 13. Движение */
  --dur-1:120ms;
  --dur-2:180ms;
  --dur-3:240ms;
  --dur-4:420ms;
  --dur-5:700ms;
  --stagger:90ms;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in:cubic-bezier(.4,0,1,1);
  --ease-std:cubic-bezier(.2,0,0,1);
  --ease-pop:cubic-bezier(.34,1.28,.64,1);
  --dur-stamp:200ms;   /* «печать» штампа расчётного веса, сигнатура 1 */
  --dur-fill:240ms;    /* налив шкалы-победителя снизу вверх, сигнатура 1 */

  /* 14. Z-слои */
  --z-base:0;
  --z-rail:5;
  --z-sticky-calc:30;
  --z-header:40;
  --z-bottombar:50;
  --z-menu:60;
  --z-dialog:70;
  --z-toast:80;
}

/* ---------- Служебные утилиты ---------- */
*, *::before, *::after{ box-sizing:border-box; }
.accent{ stroke:var(--coral); }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  /* базовый рубильник (спека §8): ловит любую анимацию/переход, не переопределённый
     точечным поведенческим правилом ниже (спиннер, шкалы обмера, таймлайн, чипы). */
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--focus); outline-offset:2px; border-radius:inherit;
}
.on-dark :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline-color:var(--focus-dark);
}

.sheet-grid{
  background-image:
    linear-gradient(var(--grid-light) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-light) 1px, transparent 1px);
  background-size:var(--grid-major) var(--grid-major);
}
.sheet-grid--fine{ background-size:var(--grid-minor) var(--grid-minor); }
.on-dark .sheet-grid{
  background-image:
    linear-gradient(var(--grid-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-dark) 1px, transparent 1px);
}

/* upgrade-v3-art.md §4.1 — «световая установка»: ключевой + заполняющий + контровой свет
   + линовка-скан, вместо одного плоского glow-пятна в углу. Ноль новых цветов — всё
   осветление собственной шкалы --p-500. */
.act-dark{
  position:relative; color:var(--dark-fg); isolation:isolate; overflow:hidden;
  background:var(--lit-key), var(--lit-fill), var(--lit-edge), var(--lit-scan), var(--dark-bg);
  box-shadow:inset 0 1px 0 var(--dark-hairline);
}
.act-dark::before{
  content:""; position:absolute; inset:0; background-image:var(--grain);
  opacity:var(--grain-opacity); pointer-events:none; mix-blend-mode:soft-light; z-index:0;
}
.act-dark > *{ position:relative; z-index:1; }
.act-dark--alt{ background:var(--lit-key), var(--lit-fill), var(--lit-edge), var(--lit-scan), var(--dark-bg-alt); }
.act-dark--deep{ background:var(--lit-key), var(--lit-fill), var(--lit-edge), var(--lit-scan), var(--dark-bg-deep); }

.num{ font-family:var(--font-head); font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1,"lnum" 1; letter-spacing:var(--tr-num); line-height:var(--lh-num); }
.code{ font-family:var(--font-mono); font-variant-numeric:tabular-nums;
  letter-spacing:var(--tr-mono); text-transform:uppercase; }

/* upgrade-v3-art.md §3.6 — .stamp: техническая метка в рамке, единый язык «бланка»
   (индекс секции, код груза, IATA, время). Переиспользуется в .price-stamp и .honest-card. */
.stamp{
  font-family:var(--font-mono); font-size:var(--t-micro); font-weight:500;
  text-transform:uppercase; letter-spacing:var(--tr-eyebrow); color:var(--fg-muted);
  border:1px solid currentColor; border-radius:var(--r-xs); padding:3px 7px;
  display:inline-flex; align-items:center; gap:6px;
}

[data-placeholder]{
  font-family:var(--font-mono); font-size:.85em; padding:2px 6px; border-radius:var(--r-xs);
  color:var(--coral-ink); background:var(--coral-tint); white-space:nowrap;
}
.on-dark [data-placeholder], .act-dark [data-placeholder]{
  color:var(--coral); background:rgba(255,113,77,.14);
}

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:var(--s-4); top:-100px; z-index:var(--z-dialog);
  background:var(--yellow); color:var(--on-yellow); padding:12px 20px; border-radius:var(--r-md);
  font-family:var(--font-head); font-weight:var(--w-semi); transition:top var(--dur-2) var(--ease-out);
}
.skip-link:focus{ top:var(--s-4); }

/* upgrade-v3-art.md §3.4 / §7 микродетали — дёшево, применяется один раз глобально */
:root{ font-optical-sizing:auto; }
::selection{ background:var(--yellow); color:var(--on-yellow); }         /* 12.52 ✓ */
a:not(.btn):not(.chip):not(.link-arrow){
  text-decoration-thickness:1px; text-underline-offset:.22em;
  text-decoration-color:color-mix(in srgb, currentColor 55%, transparent);  /* 3.88 ✓ на бумаге */
}
a:not(.btn):not(.chip):not(.link-arrow):hover{ text-decoration-color:currentColor; }
.display-line{ margin-left:var(--optical-pull); }

/* ---------- 1. RESET / BASE ---------- */
html,body{ margin:0; padding:0; }
body{
  background:var(--bg); color:var(--fg); font-family:var(--font-body); font-size:var(--t-body);
  line-height:var(--lh-body); font-weight:var(--w-body); -webkit-font-smoothing:antialiased;
  overflow-x:hidden; padding-bottom:0;
}
body.has-bottombar{ padding-bottom:calc(var(--bottombar-h) + env(safe-area-inset-bottom)); }

img{ max-width:100%; display:block; }
svg{ display:block; }
button{ font:inherit; color:inherit; background:none; border:0; }
a{ color:inherit; }
input,select,textarea{ font:inherit; color:inherit; }
ul,ol{ margin:0; padding:0; list-style:none; }
p{ margin:0; }

h1,h2,h3,h4,h5{
  font-family:var(--font-head); font-weight:var(--w-head); color:var(--fg-head); margin:0;
  text-wrap:balance;
}
* { overflow-wrap:break-word; }
/* hyphens ТОЛЬКО на прозе. На универсальном селекторе он рвал дефисом короткие заголовки
   карточек («Терминаль-ная обработка», «Оформле-ние накладной») — это выглядит дёшево. */
/* На десктопе переносов нет вовсе: они рвали лид секции («Шере-метьево», «до бли-жайшего»).
   Узким колонкам переносы возвращены отдельным медиазапросом ниже. */
/* микродеталь §7.1: оптическая компенсация сайдбира — заголовок встаёт на ту же
   вертикаль, что eyebrow и абзац под ним */
/* MINOR-12: ось SHRP у Geologica стояла на дефолте на всех 1340 узлах — гарнитура
   выбрана смело, применена как рядовой гротеск. Включаем на дисплейных кеглях (≥40px:
   h1/h2, крупные числа, «Скажем прямо») — это и есть узнаваемый росчерк Geologica. */
h1,h2,.num-xl,.price-stamp__v,.display-line,.honest-display,.vol-result-text,.stat .num{
  font-variation-settings:'SHRP' 100;
}
h1{ font-size:var(--t-h1); font-weight:var(--w-head-strong); line-height:var(--lh-tight); letter-spacing:var(--tr-h1); text-wrap:balance; margin-left:-.035em; }
h2{ font-size:var(--t-h2); line-height:var(--lh-head); letter-spacing:var(--tr-h2); margin-left:-.03em; }
h3{ font-size:var(--t-h3); line-height:1.15; letter-spacing:var(--tr-h3); }
h4{ font-size:var(--t-h4); line-height:1.25; letter-spacing:var(--tr-h4); }
h5{ font-family:var(--font-body); font-size:var(--t-h5); font-weight:var(--w-semi); line-height:1.35; letter-spacing:-.005em; color:var(--fg-head); }

.act-dark h1,.act-dark h2,.act-dark h3,.act-dark h4,.act-dark h5{ color:var(--dark-fg); }

.lead{ font-size:var(--t-body-lg); line-height:1.55; color:var(--fg); max-width:60ch; }
.act-dark .lead, .on-dark .lead{ color:var(--dark-fg-muted); }

/* BLOCKER-5(а/г): числовой якорь вместо eyebrow-пилюли — открывает routes и volumetric,
   пилюля снята у трёх коротких секций (process/guarantees/honest уже без неё). */
.section-numeral{
  display:flex; align-items:baseline; gap:.2em; font-family:var(--font-head); font-weight:300;
  font-variation-settings:'SHRP' 100; font-size:clamp(2.5rem, 2rem + 3vw, 4.25rem); line-height:1;
  color:var(--fg-head); letter-spacing:-0.02em; margin-bottom:var(--s-3);
}
.section-numeral .n{ font-weight:700; }
.act-dark .section-numeral, .on-dark .section-numeral{ color:var(--dark-fg); }

/* BLOCKER-5(б): H2 переносится в колонку рядом с контентом вместо блока над ним. */
.section-split{ display:grid; gap:var(--s-9); }
@media (min-width:900px){ .section-split{ grid-template-columns:5fr 7fr; align-items:center; } }
.section-split .section-intro{ margin-bottom:0; }
.container{ max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.container-wide{ max-width:var(--container-wide); margin-inline:auto; padding-inline:var(--gutter); }
.container-text{ max-width:var(--container-text); }

.section{ padding-block:var(--section-pad); position:relative; }
.section--tight{ padding-block:var(--section-pad-tight); }
.section--tight-top{ padding-top:var(--section-pad-tight); }
/* BLOCKER-5(в): три ступени ритма 64/100/144 вместо одной константы у 12 из 13 секций */
.section--pad-sm{ padding-block:var(--section-pad-sm); }
.section--pad-lg{ padding-block:var(--section-pad-lg); }

/* ---------- Eyebrow ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:var(--t-micro);
  text-transform:uppercase; letter-spacing:var(--tr-eyebrow); padding:6px 12px; border-radius:var(--r-pill);
  background:var(--p-50); color:var(--fg-head); border:1px solid var(--border); font-weight:500;
}
.act-dark .eyebrow{ background:rgba(255,255,255,.08); color:var(--dark-fg-muted); border-color:var(--dark-border); }
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--green); flex:none; }
.eyebrow.eyebrow--hot .dot{ background:var(--coral); }
.eyebrow.eyebrow--hot{ color:var(--coral-ink); }
.act-dark .eyebrow.eyebrow--hot{ color:var(--coral); }

.section-intro{ max-width:var(--container-text); margin-bottom:var(--block-gap); }
.section-intro .eyebrow{ margin-bottom:var(--s-4); }
.section-intro h2{ margin-bottom:var(--s-3); }
.section-intro--center{ margin-inline:auto; text-align:center; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:var(--z-header);
  height:var(--header-h); display:flex; align-items:center;
  background:transparent; transition:background var(--dur-2) var(--ease-std), border-color var(--dur-2) var(--ease-std);
  border-bottom:1px solid transparent;
}
@media (max-width:767px){ .site-header{ height:60px; } }
.site-header.is-stuck{
  background:rgba(251,248,245,.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--border);
}
.header-inner{
  width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-6);
}
.brand{ display:flex; align-items:center; gap:var(--s-2); font-family:var(--font-head); font-weight:700; font-size:1.05rem; white-space:nowrap; }
.brand-x{ font-family:var(--font-mono); font-weight:400; color:var(--dark-fg-faint); }
.site-header.is-stuck .brand-x{ color:var(--fg-muted); }
.site-header .brand{ color:var(--dark-fg); }
.site-header.is-stuck .brand{ color:var(--fg-head); }
.brand-pobeda{ color:var(--yellow); }
.site-header.is-stuck .brand-pobeda{ color:var(--p-600); }

.nav-main{ display:none; }
@media (min-width:1024px){
  .nav-main{ display:flex; gap:var(--s-6); list-style:none; margin:0; padding:0; }
  .nav-main a{ font-size:var(--t-small); color:var(--dark-fg); text-decoration:none; padding:8px 2px; border-bottom:1px solid transparent; transition:border-color var(--dur-2) var(--ease-out), color var(--dur-2); }
  .site-header.is-stuck .nav-main a{ color:var(--fg); }
  .nav-main a:hover{ border-bottom-color:currentColor; }
}
.header-actions{ display:flex; align-items:center; gap:var(--s-4); }
.header-phone{
  display:none; align-items:center; gap:6px; font-family:var(--font-mono); font-size:var(--t-small);
  color:var(--dark-fg); text-decoration:none;
}
.site-header.is-stuck .header-phone{ color:var(--fg); }
@media (min-width:640px){ .header-phone{ display:inline-flex; } }
.header-phone svg{ width:16px; height:16px; }

.burger{
  display:inline-flex; width:44px; height:44px; align-items:center; justify-content:center;
  border-radius:var(--r-md); flex:none;
}
@media (min-width:1024px){ .burger{ display:none; } }
.burger span, .burger::before, .burger::after{ content:""; }
.burger-icon{ position:relative; width:20px; height:14px; }
.burger-icon span{ position:absolute; left:0; right:0; height:2px; background:var(--dark-fg); transition:transform var(--dur-2), opacity var(--dur-2); }
.site-header.is-stuck .burger-icon span{ background:var(--fg-head); }
.burger-icon span:nth-child(1){ top:0; }
.burger-icon span:nth-child(2){ top:6px; }
.burger-icon span:nth-child(3){ top:12px; }
.mobile-menu.is-open ~ .site-header .burger-icon span:nth-child(1),
.burger[aria-expanded="true"] .burger-icon span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] .burger-icon span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] .burger-icon span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* БАГ (обнаружен на 375 в этой сессии, существовал ДО апгрейда v3): .btn{display:
   inline-flex} объявлен ПОЗЖЕ .header-cta{display:none} в каскаде и с той же
   специфичностью (0,1,0) перебивает его — жёлтая кнопка «Рассчитать» вылезала
   в шапке мимо бургера и обрезалась вправо на мобиле. Специфичность поднята якорем
   на .site-header, чтобы порядок источников больше не решал. */
.site-header .header-cta{ display:none; }
@media (min-width:1024px){ .site-header .header-cta{ display:inline-flex; } }

.mobile-menu{
  /* закрытое меню остаётся в DOM на десктопе: без visibility:hidden оно ловит Tab
     и попадает в поэкранные скриншоты. */
  visibility:hidden;
  position:fixed; inset:0; z-index:var(--z-menu); background:var(--dark-bg); color:var(--dark-fg);
  display:flex; flex-direction:column; padding:var(--s-6) var(--gutter);
  transform:translateY(-100%); transition:transform var(--dur-3) var(--ease-std);
}
.mobile-menu.is-open{ transform:translateY(0); visibility:visible; }
.mobile-menu-top{ display:flex; justify-content:space-between; align-items:center; height:60px; }
.mobile-menu-close{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; }
.mobile-menu nav{ margin-top:var(--s-9); display:flex; flex-direction:column; gap:var(--s-2); }
.mobile-menu nav a{ font-family:var(--font-head); font-size:1.5rem; padding:var(--s-3) 0; text-decoration:none; border-bottom:1px solid var(--dark-border); color:var(--dark-fg); }
.mobile-menu-foot{ margin-top:auto; padding-top:var(--s-7); display:flex; flex-direction:column; gap:var(--s-4); }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-head); font-weight:var(--w-semi); font-size:var(--t-h5);
  border-radius:var(--r-pill); padding:14px 26px; cursor:pointer; white-space:nowrap;
  transition:background var(--dur-2) var(--ease-out), color var(--dur-2), border-color var(--dur-2),
    box-shadow var(--dur-2), transform var(--dur-2);
  min-height:44px; text-decoration:none; border:1px solid transparent;
}
.btn:active{ transition-duration:var(--dur-1); }

.btn-primary{
  background:var(--yellow); color:var(--on-yellow);
  box-shadow:inset 0 -2px 0 var(--yellow-edge), var(--shadow-btn);
}
.btn-primary:hover{ background:var(--yellow-hover); transform:translateY(-1px); box-shadow:0 10px 22px -10px rgba(52,19,67,.45); }
.btn-primary:active{ background:var(--yellow-active); transform:translateY(1px); box-shadow:none; }
/* BLOCKER 1 (поправки v2): двухслойное фокус-кольцо — читается на любом фоне */
.btn-primary:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px var(--p-600), 0 0 0 5px var(--white);
}
.btn-primary:disabled,.btn-primary[aria-disabled="true"]{
  background:var(--p-100); color:var(--p-400); box-shadow:none; cursor:not-allowed;
}
/* upgrade-v3-art.md §5.3 — три яруса CTA. CTA-1: ровно 2 на странице (hero + §13),
   выше и с верхним бликом — «ничто не главное, если всё главное» перестаёт быть правдой. */
.btn-cta1{
  min-height:var(--btn1-h); padding:var(--btn1-pad); flex-direction:column; gap:2px;
  box-shadow:inset 0 -2px 0 var(--yellow-edge), var(--btn-gloss), var(--shadow-btn);
}
.btn-microcopy{ display:block; font-family:var(--font-body); font-size:var(--t-micro); font-weight:400; opacity:.72; }
.btn-primary.is-loading{ color:transparent; pointer-events:none; position:relative; }
.btn-spinner{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:4px;
}
.btn-spinner .ring{
  width:16px; height:16px; border-radius:50%; border:2px solid rgba(26,10,34,.25); border-top-color:var(--on-yellow);
  animation:spin 800ms linear infinite;
}
@media (prefers-reduced-motion: reduce){
  .btn-spinner .ring{ display:none; }
  .btn-spinner{ gap:5px; }
  .btn-spinner::before,.btn-spinner::after,.btn-spinner .dot{
    content:""; width:6px; height:6px; border-radius:50%; background:var(--on-yellow);
  }
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.btn-secondary{
  background:transparent; border:1px solid var(--dark-border); color:var(--dark-fg);
}
.act-dark .btn-secondary, .on-dark .btn-secondary{ border-color:rgba(255,255,255,.35); color:var(--dark-fg); }
.act-dark .btn-secondary:hover, .on-dark .btn-secondary:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.55); }
.act-dark .btn-secondary:active, .on-dark .btn-secondary:active{ background:rgba(255,255,255,.14); }
.btn-secondary:not(.on-dark *):not(.act-dark *){
  border-color:var(--border-strong); color:var(--fg-head); background:transparent;
}
.btn-secondary--light{ border-color:var(--border-strong); color:var(--fg-head); background:transparent; }
.btn-secondary--light:hover{ background:var(--p-50); border-color:var(--p-300); }
.btn-secondary--light:active{ background:var(--p-100); }
.btn-secondary:disabled{ border-color:rgba(255,255,255,.15); color:var(--dark-fg-faint); cursor:not-allowed; }

.btn-ghost{
  padding:8px 2px; border-radius:0; color:var(--fg-head); border-bottom:1px solid var(--rule);
  font-family:var(--font-head); font-weight:var(--w-semi); font-size:var(--t-body);
}
.btn-ghost:hover{ border-bottom-color:var(--p-600); }
.act-dark .btn-ghost,.on-dark .btn-ghost{ color:var(--dark-fg); border-bottom-color:var(--dark-border); }
.act-dark .btn-ghost:hover,.on-dark .btn-ghost:hover{ border-bottom-color:var(--yellow); }

.link-arrow{
  display:inline-flex; align-items:center; gap:6px; font-family:var(--font-head); font-weight:var(--w-semi);
  color:var(--fg-head); text-decoration:none; font-size:var(--t-body);
}
.link-arrow svg{ width:1em; height:1em; transition:transform var(--dur-2) var(--ease-out); }
.link-arrow:hover svg{ transform:translateX(4px); }
.act-dark .link-arrow,.on-dark .link-arrow{ color:var(--dark-fg); }
.act-dark .link-arrow svg,.on-dark .link-arrow svg{ color:var(--yellow); }

/* фикс горизонтального переполнения на 375: .btn{white-space:nowrap} держит длинные
   подписи (например «Отправить заявку с этим расчётом →») одной строкой, из-за чего
   grid-колонка родителя раздувается за пределы вьюпорта — .btn-block обязан уметь
   переноситься на 2 строки на узких экранах. */
.btn-block{ width:100%; white-space:normal; text-align:center; }

/* ==========================================================================
   CHIPS
   ========================================================================== */
.chip{
  display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 14px;
  border-radius:var(--r-pill); border:1px solid var(--border-strong); background:var(--white);
  font-size:var(--t-small); color:var(--fg-head); cursor:pointer; font-weight:500;
  transition:background var(--dur-2) var(--ease-out), border-color var(--dur-2), transform var(--dur-1);
  position:relative;
}
.chip::before{ content:""; position:absolute; inset:-4px; } /* тап-зона 44 */
.chip:hover{ background:var(--p-50); border-color:var(--p-400); }
.chip:active{ background:var(--p-100); transform:scale(.98); }
.chip .chip-icon{ width:14px; height:14px; flex:none; }
.chip[aria-pressed="true"]{
  background:var(--yellow-tint); border-color:var(--yellow); color:var(--p-600);
  animation:chip-pop var(--dur-3) var(--ease-pop);
}
@keyframes chip-pop{ 0%{ transform:scale(1); } 50%{ transform:scale(1.04); } 100%{ transform:scale(1); } }
.chip[aria-disabled="true"]{
  background:var(--p-50); color:var(--p-400); border-color:var(--border); cursor:not-allowed;
}
.chip[aria-disabled="true"]:hover{ background:var(--p-50); border-color:var(--border); }

/* ==========================================================================
   CARDS
   ========================================================================== */
.card{
  background:var(--surface); border-radius:var(--r-xl); border:1px solid var(--border);
  box-shadow:var(--shadow-1); padding:var(--card-pad);
}
a.card, button.card{ cursor:pointer; text-decoration:none; display:block; transition:box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2), transform var(--dur-2); }
a.card:hover, button.card:hover{ box-shadow:var(--shadow-2); border-color:var(--border-strong); transform:translateY(-2px); }
.card--dark{ background:rgba(255,255,255,.05); border-color:var(--dark-border); box-shadow:var(--inset-hairline); color:var(--dark-fg); }
.card--paper{ background:var(--p-50); border-color:var(--border); box-shadow:none; }
.card--highlight{ border:2px solid var(--yellow); position:relative; }
.card--muted{ position:relative; }
.card--muted .card-body{ opacity:.72; }
.card--muted::after{
  content:""; position:absolute; top:0; right:0; width:64px; height:64px; border-radius:0 var(--r-xl) 0 0;
  background-image:repeating-linear-gradient(45deg, var(--p-300) 0 1px, transparent 1px 6px);
  opacity:.6; pointer-events:none;
}
.card--dock{ border-radius:var(--r-dock); }

.stamp-label{
  position:absolute; top:-12px; right:20px; background:var(--yellow); color:var(--on-yellow);
  font-family:var(--font-mono); font-size:var(--t-micro); text-transform:uppercase; letter-spacing:var(--tr-eyebrow);
  padding:4px 10px; border-radius:var(--r-xs); font-weight:600;
}

/* ==========================================================================
   FIELDS
   ========================================================================== */
.field{ display:flex; flex-direction:column; gap:6px; }
.field-label{ font-size:var(--t-small); font-weight:500; color:var(--fg-head); }
.on-dark .field-label{ color:var(--dark-fg); }
.field-control{
  height:48px; border-radius:var(--r-md); border:1px solid var(--border-strong); background:var(--white);
  color:var(--fg); font-size:var(--t-body); padding:0 14px; width:100%;
  transition:border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2), background var(--dur-2);
}
textarea.field-control{ height:auto; min-height:88px; padding-block:12px; resize:vertical; }
@media (max-width:767px){ .field-control{ height:52px; } }
.field-control:hover{ border-color:var(--p-400); }
.field-control:focus{ border-color:var(--p-600); box-shadow:0 0 0 3px rgba(52,19,67,.14); outline:none; }
.field-control.is-filled{ border-color:var(--p-300); }
.field-control:disabled{ background:var(--p-50); color:var(--p-400); cursor:not-allowed; }
.field-control[readonly]{ background:var(--p-50); color:var(--fg); }
.field-hint{ font-size:var(--t-small); color:var(--fg-muted); }
.field-error{
  display:none; align-items:center; gap:6px; font-size:var(--t-small); color:var(--coral-ink);
}
.field-error svg{ width:14px; height:14px; flex:none; }
.field.has-error .field-control{ border:1.5px solid var(--coral-ink); background:var(--coral-tint); }
.field.has-error .field-error{ display:flex; }
.field.has-error .field-hint{ display:none; }
.field.has-success .field-control{ padding-right:38px; }
.field-success-icon{ display:none; }
.field.has-success .field-success-icon{ display:block; position:absolute; right:12px; top:38px; width:16px; height:16px; color:var(--green-ink); }
.field{ position:relative; }

.field-row3{ display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:end; gap:6px; }
.field-row3 .field{ min-width:0; }
.field-row3 .sep{ color:var(--fg-faint); padding-bottom:12px; font-family:var(--font-mono); }
@media (max-width:420px){ .field-row3{ grid-template-columns:1fr; }
  .field-row3 .sep{ display:none; } }

.checkbox-row{ display:flex; align-items:flex-start; gap:10px; }
.checkbox-row input[type="checkbox"]{
  width:20px; height:20px; border-radius:var(--r-xs); border:1.5px solid var(--border-strong);
  flex:none; margin-top:2px; accent-color:var(--p-600); cursor:pointer;
}
.checkbox-row label{ font-size:var(--t-small); color:var(--fg); line-height:1.45; }
.on-dark .checkbox-row label{ color:var(--dark-fg-muted); }
.checkbox-row a{ color:var(--fg-head); text-decoration:underline; }
.on-dark .checkbox-row a{ color:var(--dark-fg); }
.checkbox-row.has-error .field-error{ display:flex; margin-top:4px; }

/* ==========================================================================
   HERO / ACT I
   ========================================================================== */
/* BLOCKER-2: паддинги ужаты (s-9→s-7 сверху, section-pad-tight→s-9 снизу), плюс
   отдельный коридор для коротких вьюпортов (@media max-height ниже) — hero обязан
   помещаться в первый экран целиком, включая ценовой якорь и CTA. */
.hero{ padding-top:calc(var(--header-h) + var(--s-7)); padding-bottom:var(--s-9); overflow:hidden; }
/* .hero-glow — свет теперь даёт .act-dark (световая установка §4.1), див остаётся
   в разметке для heroic-контура борта (§4.3), собственного фона не несёт */
.hero-glow{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.hero-inner{ position:relative; z-index:1; display:grid; gap:var(--s-9); }
@media (min-width:1024px){
  .hero-inner{ grid-template-columns:7fr 5fr; align-items:start; gap:var(--col-gap); }
}
/* upgrade-v3-art.md §4.5 — дуги были практически невидимы (эффективный контраст ≈2.4,
   штрих 1.25px, маска затухания с 40%). Штрих увеличен, opacity контейнера снята —
   цвет --p-300 сам несёт контраст (6.48 на --p-600), маска отодвинута на 60%. */
.hero-arcs{ position:absolute; inset:0; z-index:0; pointer-events:none;
  mask-image:radial-gradient(120% 100% at 30% 20%, #000 60%, transparent 100%); }
.hero-arcs svg{ position:absolute; color:var(--dark-fg-faint); }
.hero-arcs path.draw{ stroke-width:var(--stroke-arc); stroke-dasharray:5 8; }
.hero-arc-1{ top:6%; left:0; width:46%; }
.hero-arc-2{ top:38%; right:-4%; width:38%; }
.hero-arc-3{ bottom:2%; left:20%; width:30%; }
/* upgrade-v3-art.md §4.3(1) — heroic-контур борта 737-800, единственный крупный
   графический объект первого экрана. Только контур, не фото — запрет на сток-самолёт
   соблюдён; decor-only (aria-hidden), не спорит с текстом за счёт масштаба, не контраста. */
/* BLOCKER-4: было --p-500 @ opacity .55 поверх --p-600 → контраст 1.31:1 (невидимо),
   плюс маска гасила 76% фигуры, плюс борт лежал ПОД калькулятором (z-index конфликт с
   .hero-calc-wrap). Перекрашено в --p-400 (≈2.6:1 к фону — заметно, не спорит с текстом),
   opacity:1, маска — радиальная от левого нижнего угла (гаснет там, где встаёт текст),
   геометрия сдвинута в левую нижнюю четверть, из-под карточки расчёта. */
.hero-plane{
  position:absolute; left:-1.5%; bottom:0; width:min(900px,64vw); height:auto;
  z-index:0; pointer-events:none; object-fit:contain; object-position:left bottom; opacity:.46;
}
@media (max-width:1023px){ .hero-plane{ display:none; } }
.hero-float{ position:absolute; z-index:0; color:var(--dark-fg-faint); opacity:.5; pointer-events:none; }
.hero-float-1{ top:10%; right:6%; width:64px; }
.hero-float-2{ bottom:18%; right:22%; width:44px; }
@media (max-width:1023px){
  /* на узких экранах H1 занимает много строк — декоративные плавающие силуэты убираем из-под текста */
  .hero-float-1{ top:2%; right:4%; width:34px; opacity:.35; }
  .hero-float-2{ display:none; }
  .hero-arc-2{ display:none; }
}
@media (prefers-reduced-motion: no-preference){
  .hero-float-1{ animation:float-a 6.5s ease-in-out infinite; }
  .hero-float-2{ animation:float-b 8s ease-in-out infinite; }
  @keyframes float-a{ 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-12px) rotate(3deg); } }
  @keyframes float-b{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(10px); } }
}

.hero-copy{ position:relative; z-index:1; }
.hero-copy .eyebrow{ margin-bottom:var(--s-5); }

/* upgrade-v3-art.md §3.3 — смешение весов внутри H1 (300 → 600 → 700). Пол «type-as-hero»
   5:1 H1:body почти достигнут (4.9:1 при 84px/17px). Оптическая компенсация сайдбира
   уже стоит на h1{margin-left:-.035em}. */
.hero h1{ margin-bottom:var(--s-5); max-width:none; hyphens:none; }
/* hyphens не наследуется поверх универсального `*{hyphens:auto}` — тот целится прямо
   в span (специфичность правила для самого элемента побеждает унаследованное значение),
   поэтому «Авиаперевозка» переносилась с дефисом на 375. Гасим явно на каждом span. */
.hero h1 span{ display:block; hyphens:none; }
.hero h1 .l1{ font-weight:300; }
.hero h1 .l2{ font-weight:var(--w-head); }
.hero h1 .l3{ font-weight:700; }

.hero-sub{ color:var(--dark-fg-muted); max-width:46ch; margin-bottom:var(--s-6); font-size:var(--t-body-lg); line-height:1.5; }

/* upgrade-v3-art.md §5.1 — ценовой якорь → ЦЕНОВОЙ ШТАМП. Самая большая цифра-объект
   страницы обязана быть ценой клиента (104px), а не тоннажем оператора. */
.price-stamp{
  display:inline-flex; flex-direction:column; gap:8px; margin-bottom:var(--s-5);
  border:1px solid rgba(255,255,255,.35); border-radius:var(--r-xl); padding:16px 22px 14px;
  background:rgba(255,255,255,.045); box-shadow:var(--inset-hairline);
}
.price-stamp .stamp{
  font-family:var(--font-mono); font-size:var(--t-micro); font-weight:500; text-transform:uppercase;
  letter-spacing:var(--tr-eyebrow); color:var(--dark-fg-muted);
}
.price-stamp__v{
  display:flex; align-items:baseline; gap:.12em; font-family:var(--font-head); font-weight:500;
  font-variant-numeric:tabular-nums; font-size:var(--t-num-hero); line-height:.88;
  letter-spacing:var(--tr-display); color:var(--dark-accent);
}
.price-stamp__v .pre{ font-size:.26em; font-weight:400; color:var(--dark-fg-muted); letter-spacing:0; align-self:center; }
.price-stamp__v .unit{
  font-family:var(--font-mono); font-size:.24em; font-weight:500; color:var(--dark-fg-muted);
  letter-spacing:var(--tr-mono); position:relative; top:-.06em;
}
.price-stamp__sub{ font-size:var(--t-small); color:var(--dark-fg-muted); max-width:34ch; }

/* upgrade-v3-art.md §5.4 — честная срочность без обратных отсчётов: cut-off */
.cutoff{
  display:flex; align-items:flex-start; gap:10px; font-size:var(--t-small); color:var(--dark-fg);
  padding-left:14px; border-left:3px solid var(--coral); max-width:44ch; margin-bottom:var(--s-5);
}
.cutoff .dot{ width:8px; height:8px; margin-top:6px; border-radius:50%; background:var(--coral); flex:none;
  box-shadow:0 0 0 0 rgba(255,113,77,.5); }
@media (prefers-reduced-motion:no-preference){ .cutoff .dot{ animation:cutoff-pulse 2.4s ease-out infinite; } }
@keyframes cutoff-pulse{ to{ box-shadow:0 0 0 12px rgba(255,113,77,0); } }

.hero-trust{ display:flex; align-items:flex-start; gap:8px; color:var(--dark-fg-muted); font-size:var(--t-micro); margin-bottom:var(--s-4); max-width:46ch; }
.hero-trust svg{ width:15px; height:15px; flex:none; margin-top:1px; color:var(--dark-fg-faint); }

/* BLOCKER-2: короткие вьюпорты (ноутбучная высота ≤900) — hero обязан помещаться целиком
   вместе с ценовым якорем и CTA. Приём из upgrade-v3-art.md §2 вариант B, применён к A. */
@media (max-height:900px) and (min-width:1024px){
  .hero{ padding-top:calc(var(--header-h) + var(--s-4)); padding-bottom:var(--s-6); }
  /* BLOCKER-3: этот коридор — то самое «короткое окно» (1440×900 минус хром браузера),
     на котором H1 раньше схлопывался до 44px и проигрывал H2 (56px). Клэмп поднят так,
     чтобы H1 оставался заметно крупнее H2 (44px) даже в сжатом вьюпорте. */
  /* размер H1 берётся из --t-h1 (шкала головного сайта, 42px) */
  .hero-copy .eyebrow{ margin-bottom:var(--s-3); }
  .hero-sub{ margin-bottom:var(--s-4); }
  .price-stamp{ padding:12px 18px 10px; margin-bottom:var(--s-4); gap:4px; }
  .price-stamp__v{ font-size:clamp(2.5rem, 1.6rem + 2.6vw, 3.5rem); }
  .cutoff{ margin-bottom:var(--s-3); }
  .hero-inner{ gap:var(--s-6); }
}
/* второй, более жёсткий коридор — распространённые ноутбучные 1366×768/1440×816 (с учётом
   хрома браузера эффективная высота вьюпорта там ещё меньше заявленной) */
@media (max-height:820px) and (min-width:1024px){
  .hero{ padding-top:calc(var(--header-h) + 10px); padding-bottom:var(--s-5); }
  /* размер H1 берётся из --t-h1 (шкала головного сайта, 42px) */
  .hero-sub{ margin-bottom:var(--s-3); font-size:var(--t-body); }
  .price-stamp{ padding:10px 16px 8px; margin-bottom:var(--s-3); }
  .price-stamp__v{ font-size:clamp(2rem, 1.4rem + 1.8vw, 2.75rem); }
  .hero-trust{ margin-bottom:var(--s-3); }
  .hero-calc-wrap .calc-card{ padding:16px; }
  .calc-title{ display:none; }
}
.hero-links{ display:flex; align-items:center; gap:var(--s-6); flex-wrap:wrap; }

.hero-calc-wrap{ position:relative; z-index:1; }
.calc-placeholder{ visibility:hidden; }

/* ==========================================================================
   CALCULATOR
   ========================================================================== */
.calc-card{
  background:var(--white); border-radius:var(--r-2xl); box-shadow:var(--shadow-3); padding:var(--panel-pad);
  position:relative; color:var(--fg); overflow:hidden;
  /* «светлый остров» внутри тёмного акта: калькулятор вложен в .on-dark hero,
     переопределяем тёмные токены на их светлые эквиваленты, чтобы .on-dark-правила
     (label, фокус-кольцо, сегмент-контрол) не давали белый-на-белом внутри карточки */
  --dark-fg:var(--fg-head); --dark-fg-muted:var(--fg-muted); --dark-fg-faint:var(--fg-faint);
  --dark-border:var(--border-strong); --focus-dark:var(--focus);
}
/* BLOCKER-2: карточка в hero — самый высокий столбец страницы (была 1055px при
   бюджете ≤~750). Паддинг ужат специально для hero-варианта карточки. */
.hero-calc-wrap .calc-card{ padding:clamp(18px, 1.8vw, 28px); }
.calc-card::before{
  content:""; position:absolute; inset:0; background-image:
    linear-gradient(var(--grid-light) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-light) 1px, transparent 1px);
  background-size:var(--grid-major) var(--grid-major); opacity:.55; pointer-events:none;
}
.calc-card > *{ position:relative; }

.calc-title{ font-family:var(--font-head); font-weight:var(--w-semi); font-size:var(--t-h5); color:var(--fg-head); margin:0 0 var(--s-2); }

.segmented{
  display:inline-flex; background:var(--p-50); border-radius:var(--r-pill); padding:4px; gap:2px; margin-bottom:var(--s-4);
}
.segmented button{
  border-radius:var(--r-pill); padding:7px 14px; font-size:var(--t-small); font-weight:500; color:var(--fg-muted);
  transition:background var(--dur-2), color var(--dur-2), box-shadow var(--dur-2);
}
.segmented button[aria-selected="true"]{ background:var(--white); color:var(--fg-head); font-weight:600; box-shadow:var(--shadow-1); }
.on-dark .segmented{ background:rgba(255,255,255,.08); }
.on-dark .segmented button{ color:var(--dark-fg-muted); }
.on-dark .segmented button[aria-selected="true"]{ background:var(--white); color:var(--p-600); }

.calc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3) var(--s-4); margin-bottom:var(--s-3); }
.calc-grid .field--full{ grid-column:1 / -1; }
@media (max-width:420px){ .calc-grid{ grid-template-columns:1fr; } }

/* BLOCKER-2: было flex-wrap → 3 длинных чипа переносились на 2 строки (+45px).
   Компактнее текст и паддинг — гарантированно один ряд от 340px контейнера. */
.calc-radio-row{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:var(--s-3); }
.calc-radio-row label{
  display:inline-flex; align-items:center; gap:5px; padding:7px 8px; border-radius:var(--r-sm);
  border:1px solid var(--border-strong); font-size:var(--t-micro); cursor:pointer; flex:1 1 auto; justify-content:center;
  text-align:center; line-height:1.2;
}
.calc-radio-row input{ position:absolute; opacity:0; width:1px; height:1px; }
.calc-radio-row input:checked + span{ font-weight:600; }
.calc-radio-row label:has(input:checked){ border-color:var(--p-600); background:var(--p-50); }
.calc-radio-row label:has(input:focus-visible){ outline:3px solid var(--focus); outline-offset:2px; }

.calc-submit{ margin-bottom:var(--s-4); }

/* BLOCKER-2 + upgrade-v3-selling.md §7.1: раньше вся строка «Платите за 148 кг» шла
   кеглем t-num-xl (44–68px) — переносилась на 2–3 строки внутри узкой карточки.
   Теперь крупным кеглем идёт только число, подпись — маленьким лейблом сверху. */
.calc-result{
  background:var(--surface-sunken); border-radius:var(--r-lg); padding:var(--s-4);
  display:flex; flex-direction:column; gap:2px;
}
.result-label{ font-size:var(--t-small); color:var(--fg-muted); }
.calc-result .result-num{ font-size:var(--t-num-l); color:var(--fg-head); }
.calc-result .result-num .unit{ font-family:var(--font-mono); font-size:.5em; color:var(--fg-muted); margin-left:4px; }
.calc-result .result-breakdown{ font-size:var(--t-small); color:var(--fg-muted); margin-top:4px; }
.calc-result .result-note{ font-size:var(--t-micro); color:var(--fg-faint); margin-top:2px; }
.calc-result[hidden]{ display:none; }
.calc-dozhim{ margin-top:var(--s-3); }

.calc-state-msg{ display:none; border-radius:var(--r-lg); padding:var(--s-5); font-size:var(--t-small); }
.calc-state-msg.is-active{ display:block; }
.calc-state-msg--oversize{ background:var(--coral-tint); color:var(--coral-ink); }
.calc-state-msg--no-dims{ background:var(--p-50); color:var(--fg-muted); }

.calc-toast{
  font-size:var(--t-small); color:var(--green-ink); background:var(--green-tint); border-radius:var(--r-sm);
  padding:8px 12px; margin-top:var(--s-3); display:none;
}
.calc-toast.is-visible{ display:block; }

/* is-compact — sticky desktop */
.calc-sentinel{ height:1px; }
@media (min-width:1024px){
  .calc-card.is-compact{
    position:fixed; top:calc(var(--header-h) + 16px); width:300px; z-index:var(--z-sticky-calc);
    padding:var(--s-5); box-shadow:var(--shadow-3);
  }
  .calc-card.is-compact .calc-full{ display:none; }
  .calc-card.is-compact .calc-compact{ display:flex; }
}
.calc-compact{ display:none; flex-direction:column; gap:var(--s-3); }
.calc-compact .cc-route{ font-size:var(--t-small); color:var(--fg-muted); }
.calc-compact .cc-num{ font-size:var(--t-num-m); color:var(--fg-head); }
.calc-compact .cc-actions{ display:flex; gap:8px; }

/* bottom-bar mobile */
.bottombar{
  position:fixed; left:0; right:0; bottom:0; z-index:var(--z-bottombar);
  height:var(--bottombar-h); padding-bottom:env(safe-area-inset-bottom);
  background:rgba(31,13,40,.94); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-top:1px solid rgba(255,255,255,.14); display:flex; align-items:center; justify-content:space-between;
  padding-inline:var(--gutter); gap:var(--s-4); transform:translateY(100%); transition:transform var(--dur-3) var(--ease-std);
  color:var(--dark-fg);
}
.bottombar.is-visible{ transform:translateY(0); }
@media (min-width:1024px){ .bottombar{ display:none !important; } }
.bottombar-info{ min-width:0; }
.bottombar-info .num{ font-size:1.125rem; color:var(--dark-fg); }
.bottombar-info .route{ font-size:.75rem; color:var(--dark-fg-muted); font-family:var(--font-mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bottombar .btn{ padding:10px 20px; font-size:.9rem; flex:none; }

/* ==========================================================================
   STATS DECOMPOSED
   ========================================================================== */
.stats{ position:relative; }
.stats-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-7) var(--s-6); position:relative; }
@media (min-width:768px){ .stats-grid{ grid-template-columns:repeat(4,1fr); } }
.stat{ position:relative; padding-left:var(--s-5); }
.stat::before{ content:""; position:absolute; left:0; top:4px; bottom:4px; width:1px; background:var(--dark-rule); }
.stat:first-child::before{ display:none; }
@media (max-width:767px){ .stat:nth-child(odd)::before{ display:none; } }
.stat .num{ font-size:var(--t-num-xl); color:var(--dark-accent); display:block; }
.stat .stat-label{ font-size:var(--t-small); color:var(--dark-fg-muted); margin-top:4px; }
.stat .stat-decomp{ font-size:var(--t-micro); color:var(--dark-fg-faint); font-family:var(--font-mono); margin-top:2px; }

/* upgrade-v3-art.md §5.2 — «Сводка терминала»: имена 8 авиакомпаний доказывают больше,
   чем цифра «8». Мono-чипы вместо строки через точку. */
.stat-chips{ display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
.stat-chip{
  font-family:var(--font-mono); font-size:10px; letter-spacing:var(--tr-mono); text-transform:uppercase;
  color:var(--dark-fg-muted); border:1px solid var(--dark-border); border-radius:var(--r-xs); padding:3px 7px;
}
.stats-foot{
  margin-top:var(--s-7); padding-top:var(--s-6); border-top:1px solid var(--dark-rule);
  font-size:var(--t-small); color:var(--dark-fg-faint); max-width:64ch;
}

/* ==========================================================================
   CARGO TYPES
   ========================================================================== */
.cargo-scroll{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-5); }
@media (max-width:1023px){ .cargo-scroll{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:639px){
  .cargo-scroll{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:var(--s-4); margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter); scrollbar-width:none; }
  .cargo-scroll::-webkit-scrollbar{ display:none; }
  .cargo-scroll .cargo-card{ flex:0 0 86%; scroll-snap-align:start; }
}
/* MAJOR-7: 55 боксов «1px рамка + бело/бежевая заливка» в 4 радиусах на один и тот
   же тип объекта. cargo-card (8 шт.) и city-card (27 шт.) переведены с рамки на
   поверхность: заливка --paper-2 без рамки. Первая карточка кластера остаётся
   «первичной» — белая, тень, чуть крупнее — простая иерархия вместо восьми клонов. */
.cargo-card.card{ background:var(--paper-2); border:none; box-shadow:none; }
.cargo-card.card:hover{ box-shadow:none; border:none; transform:translateY(-2px); background:var(--white); }
.cargo-card--feature.card{ background:var(--white); box-shadow:var(--shadow-2); }
.cargo-card--feature.card:hover{ box-shadow:var(--shadow-3); }
@media (min-width:640px){ .cargo-card--feature{ grid-column:span 2; } }
.cargo-card{ display:flex; flex-direction:column; gap:var(--s-3); }
.cargo-card[hidden]{ display:none; }
.cargo-card .icon{ width:48px; height:48px; color:var(--p-600); }
.cargo-card .cargo-art{ width:72px; height:72px; max-width:46%; }
.cargo-card--feature .icon{ width:64px; height:64px; }
.cargo-card--feature .cargo-art{ width:72px; height:72px; }
.cargo-card h4{ margin-top:2px; }
.cargo-card .desc{ font-size:var(--t-small); color:var(--fg-muted); flex:1; }
.cargo-card .cargo-code{ font-family:var(--font-mono); font-size:var(--t-micro); color:var(--fg-muted); text-transform:uppercase; letter-spacing:var(--tr-mono); }
.cargo-card .cargo-limit{ font-size:var(--t-small); color:var(--fg); }
.cargo-card .chip{ align-self:flex-start; margin-top:4px; }

.prohibited{ margin-top:var(--s-9); border-radius:var(--r-lg); background:var(--coral-tint); padding:var(--s-6); }
.prohibited summary{ display:flex; align-items:center; justify-content:space-between; cursor:pointer; font-family:var(--font-head); font-weight:600; color:var(--coral-ink); font-size:var(--t-h5); list-style:none; }
.prohibited summary::-webkit-details-marker{ display:none; }
.prohibited summary .toggle-icon{ width:20px; height:20px; flex:none; color:var(--coral-ink); }
.prohibited[open] summary .toggle-icon-plus{ display:none; }
.prohibited .toggle-icon-minus{ display:none; }
.prohibited[open] summary .toggle-icon-minus{ display:block; }
.prohibited-body{ margin-top:var(--s-4); color:var(--coral-ink); font-size:var(--t-small); }
.prohibited-body ul{ margin-top:var(--s-3); display:grid; gap:6px; }
.prohibited-body li{ padding-left:16px; position:relative; }
.prohibited-body li::before{ content:"—"; position:absolute; left:0; }

/* ==========================================================================
   ROUTES / MAP
   ========================================================================== */
.routes-layout{ display:grid; gap:var(--s-9); }
@media (min-width:1024px){ .routes-layout{ grid-template-columns:5fr 7fr; align-items:start; } }
.routes-map{ position:relative; border-radius:var(--r-2xl); background:var(--white); border:1px solid var(--border); padding:var(--s-6); overflow:hidden; }
.routes-map svg{ width:100%; height:auto; color:var(--p-300); }
.routes-map .hub-dot{ fill:var(--p-600); }
.routes-map .hub-active{ stroke:var(--coral); }
@media (max-width:1023px){ .routes-map{ display:none; } .routes-map.is-shown{ display:block; margin-top:var(--s-6); } }

.route-search{ position:relative; margin-bottom:var(--s-6); }
.route-search input{ width:100%; height:52px; border-radius:var(--r-pill); border:1px solid var(--border-strong); padding:0 48px 0 20px; font-size:var(--t-body); background:var(--white); }
.route-search input:focus{ border-color:var(--p-600); box-shadow:0 0 0 3px rgba(52,19,67,.14); outline:none; }
.route-search svg{ position:absolute; right:18px; top:50%; transform:translateY(-50%); width:20px; height:20px; color:var(--fg-muted); pointer-events:none; }

.city-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-4); }
@media (min-width:768px) and (max-width:1023px){ .city-grid{ grid-template-columns:repeat(3,1fr); } }
/* MAJOR-7: routes теперь на --paper-2 (BLOCKER-1) — карточки без рамки, белая заливка
   даёт контраст к секции, а не рамка. city-card--to-only (исключение «только доставка»)
   остаётся единственным местом с рамкой — пунктирной, как визуальный маркер ограничения. */
.city-card{ border:none; border-radius:var(--r-lg); padding:var(--s-4); background:var(--white); }
.city-card--to-only{ background:var(--white); border:1.5px dashed var(--border-strong); }
.city-card .city-name{ font-family:var(--font-head); font-weight:600; color:var(--fg-head); display:flex; align-items:center; gap:8px; }
.city-card .city-iata{ font-family:var(--font-mono); font-size:var(--t-micro); color:var(--fg-muted); background:var(--p-50); padding:2px 6px; border-radius:4px; }
.city-card .city-meta{ font-size:var(--t-small); color:var(--fg-muted); margin-block:6px; display:flex; flex-direction:column; gap:2px; }
.city-card .city-rate{ font-family:var(--font-head); font-weight:600; color:var(--fg-head); margin-bottom:8px; }
.city-card[hidden]{ display:none; }

.route-empty{ display:none; border:1.5px dashed var(--border-strong); border-radius:var(--r-lg); padding:var(--s-6); text-align:center; }
.route-empty.is-visible{ display:block; }
.route-empty form{ display:flex; gap:8px; margin-top:var(--s-4); max-width:420px; margin-inline:auto; flex-wrap:wrap; justify-content:center; }
.route-empty input{ flex:1; min-width:180px; height:44px; border-radius:var(--r-pill); border:1px solid var(--border-strong); padding:0 16px; }

.route-note{ margin-top:var(--s-6); font-size:var(--t-small); color:var(--fg-muted); }

/* ==========================================================================
   VOLUMETRIC (SIGNATURE 1)
   ========================================================================== */
.vol-formula{ font-family:var(--font-head); font-weight:600; font-size:clamp(1.5rem, 1.1rem + 1.8vw, 2.75rem); color:var(--fg-head); margin-bottom:var(--s-5); letter-spacing:-.01em; }
.vol-formula .op{ color:var(--fg-faint); margin-inline:.15em; }
.vol-formula .divisor{ color:var(--p-600); border-bottom:2px dashed var(--p-300); }
.vol-example{ max-width:var(--container-text); color:var(--fg-muted); margin-bottom:var(--s-9); }
.vol-example strong{ color:var(--fg); }

.vol-panel{
  background:var(--surface-sunken); border-radius:var(--r-2xl); border:1px solid var(--border);
  padding:var(--panel-pad); position:relative; overflow:hidden;
}
.vol-panel-grid{ display:grid; gap:var(--s-9); }
@media (min-width:900px){ .vol-panel-grid{ grid-template-columns:58fr 42fr; } }

.vol-box-frame{
  position:relative; border-radius:var(--r-lg); background:var(--white); border:1px solid var(--border);
  aspect-ratio:560/300; display:flex; align-items:center; justify-content:center; padding:var(--s-4);
  overflow:hidden;
}
/* BLOCKER-1 fix: рама и viewBox теперь одной пропорции (560:300) — SVG заполняет
   раму целиком без леттербоксинга по бокам, короб масштабируется динамически
   в script.js (updateScale) и всегда занимает 70–94% высоты рамы. */
.vol-box-frame svg{ width:100%; height:100%; display:block; }

.vol-scales{ display:flex; flex-direction:column; gap:var(--s-6); }
.vol-scale-pair{ display:flex; align-items:flex-end; justify-content:center; gap:var(--s-9); height:260px; }
.vol-bar-col{ display:flex; flex-direction:column; align-items:center; gap:8px; width:64px; justify-content:flex-end; height:100%; position:relative; }
.vol-bar{ width:100%; background:var(--p-200); border:1px solid var(--p-300); border-radius:6px 6px 0 0; transition:height var(--dur-2) var(--ease-std); position:relative; }
/* MAJOR-9 (найдено на скриншоте v1): is-winner переключается JS на .vol-bar-col
   (колонку), а не на .vol-bar (сам столбик) — селектор .vol-bar.is-winner никогда
   не совпадал, столбик-победитель оставался серым. Победитель обязан быть жёлтым. */
.vol-bar-col.is-winner .vol-bar{ background:var(--yellow); border:2px solid var(--p-600); }
.vol-bar-label{ font-size:var(--t-small); color:var(--fg-muted); text-align:center; }
.vol-bar-value{ font-family:var(--font-head); font-weight:600; }
.vol-bar-col.is-winner .vol-bar-value{ color:var(--fg-head); }
.vol-stamp{ position:absolute; top:-30px; left:50%; transform:translateX(-50%); background:var(--yellow); color:var(--on-yellow); font-family:var(--font-mono); font-size:10px; text-transform:uppercase; padding:3px 8px; border-radius:var(--r-xs); white-space:nowrap; display:none; font-weight:600; }
.vol-bar-col.is-winner .vol-stamp{ display:block; }
.vol-marker{ position:absolute; top:-14px; left:50%; transform:translateX(-50%); color:var(--p-600); font-size:12px; display:none; }
.vol-bar-col.is-winner .vol-marker{ display:block; }
.vol-axis{ display:flex; justify-content:center; }
.vol-axis-line{ width:100%; max-width:220px; border-top:1px solid var(--border-strong); position:relative; margin-top:4px; }

@media (max-width:899px){
  .vol-scale-pair{ flex-direction:column; align-items:stretch; height:auto; gap:var(--s-5); }
  .vol-bar-col{ flex-direction:row; width:auto; height:32px; justify-content:flex-start; }
  .vol-bar{ height:100% !important; width:0; border-radius:0 6px 6px 0; }
  .vol-bar-label{ width:90px; text-align:right; flex:none; }
  .vol-stamp{ top:50%; left:auto; right:-4px; transform:translate(100%,-50%); }
  .vol-marker{ top:50%; left:auto; right:-18px; transform:translateY(-50%) rotate(90deg); }
}

.vol-sliders{ margin-top:var(--s-9); display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-6); }
@media (max-width:900px){ .vol-sliders{ grid-template-columns:1fr; } }
.vol-slider{ display:flex; flex-direction:column; gap:8px; touch-action:pan-y; }
.vol-slider label{ font-size:var(--t-small); font-weight:500; color:var(--fg-head); display:flex; justify-content:space-between; }
.vol-slider-row{ display:flex; align-items:center; gap:10px; }
.vol-slider input[type="range"]{
  -webkit-appearance:none; appearance:none; flex:1; height:6px; border-radius:3px; background:var(--p-200); outline:none;
}
.vol-slider input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:28px; height:28px; border-radius:50%; background:var(--white);
  border:2px solid var(--p-600); cursor:pointer; box-shadow:var(--shadow-1);
}
.vol-slider input[type="range"]::-moz-range-thumb{
  width:28px; height:28px; border-radius:50%; background:var(--white); border:2px solid var(--p-600); cursor:pointer;
}
.vol-slider input[type="range"]:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; }
.vol-slider .num-input{ width:72px; height:36px; border-radius:var(--r-sm); border:1px solid var(--border-strong); text-align:center; font-family:var(--font-mono); }
.vol-slider .num-input:focus{ border-color:var(--p-600); outline:none; }

.vol-result{ margin-top:var(--s-9); display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-6); justify-content:space-between; }
.vol-result-text{ font-size:var(--t-num-l); color:var(--fg-head); font-family:var(--font-head); font-weight:600; }
.vol-result-hint{ font-size:var(--t-small); color:var(--fg-muted); max-width:40ch; }
.vol-state-banner{ display:none; margin-top:var(--s-5); border-radius:var(--r-lg); padding:var(--s-5); font-size:var(--t-small); }
.vol-panel[data-state="oversize"] .vol-state-banner--oversize{ display:block; background:var(--coral-tint); color:var(--coral-ink); }
.vol-panel[data-state="no-dims"] .vol-state-banner--no-dims{ display:block; background:var(--p-100); color:var(--fg-muted); }

.vol-ghost{ opacity:.3; }
.vol-legend{ display:flex; gap:var(--s-6); margin-top:var(--s-6); flex-wrap:wrap; font-size:var(--t-small); color:var(--fg-muted); }
.vol-legend span{ display:inline-flex; align-items:center; gap:6px; }
.vol-legend .sw{ width:16px; height:16px; border-radius:3px; display:inline-block; }
.vol-legend .sw--solid{ background:var(--p-600); }
.vol-legend .sw--hatch{ background-image:repeating-linear-gradient(45deg, var(--p-600) 0 1.5px, transparent 1.5px 5px); border:1px solid var(--p-300); }

/* ==========================================================================
   SERVICE SCHEMA
   ========================================================================== */
.schema-wrap{ background:var(--white); border:1px solid var(--border); border-radius:var(--r-2xl); padding:var(--panel-pad); margin-bottom:var(--s-9); }
.schema-track{ display:flex; align-items:center; position:relative; padding-block:var(--s-6); }
.schema-line{ position:absolute; left:0; right:0; top:50%; height:3px; background:var(--p-200); transform:translateY(-50%); z-index:0; }
.schema-line-fill{ position:absolute; left:0; top:0; bottom:0; background:var(--yellow); border-block:1.5px solid var(--p-600); width:0; transition:width var(--dur-3) var(--ease-std); }
.schema-node{ position:relative; z-index:1; flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; }
.schema-node .node-dot{ width:40px; height:40px; border-radius:50%; background:var(--white); border:2px solid var(--p-300); display:flex; align-items:center; justify-content:center; color:var(--p-500); }
.schema-node.is-covered .node-dot{ border-color:var(--p-600); color:var(--p-600); background:var(--yellow-tint); }
.schema-node .node-label{ font-size:var(--t-small); color:var(--fg-muted); text-align:center; max-width:90px; }
@media (max-width:767px){
  .schema-track{ flex-direction:column; align-items:flex-start; padding-inline-start:20px; }
  .schema-line{ left:19px; right:auto; top:0; bottom:0; width:3px; height:auto; }
  .schema-line-fill{ left:0; right:0; top:0; bottom:auto; width:auto; height:0; }
  .schema-node{ flex-direction:row; width:100%; padding-block:10px; }
  .schema-node .node-label{ text-align:left; max-width:none; }
}

.service-tabs{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-5); margin-bottom:var(--s-9); }
@media (max-width:767px){ .service-tabs{ grid-template-columns:1fr; } }
.service-card ul{ display:flex; flex-direction:column; gap:6px; margin-top:var(--s-3); font-size:var(--t-small); color:var(--fg-muted); }
.service-card li{ padding-left:18px; position:relative; }
.service-card li::before{ content:"✓"; position:absolute; left:0; color:var(--green-ink); }
.service-card .rate{ font-family:var(--font-head); font-weight:600; color:var(--fg-head); margin-top:var(--s-3); }
/* BLOCKER-1: service-levels — второй тёмный акт (--p-700). Карточки становятся
   прайс-листом на тёмном, а не белыми боксами. */
.act-dark .service-card{ background:rgba(255,255,255,.05); border-color:var(--dark-border); box-shadow:var(--inset-hairline); }
.act-dark .service-card h4{ color:var(--dark-fg); }
.act-dark .service-card .desc{ color:var(--dark-fg-muted) !important; }
.act-dark .service-card ul{ color:var(--dark-fg-muted); }
.act-dark .service-card li::before{ color:var(--yellow); }
.act-dark .service-card .rate{ color:var(--dark-fg); }
.act-dark .service-card.card--highlight{ border-color:var(--yellow); }
.act-dark .service-advice{ color:var(--dark-fg-muted); }
.act-dark .addon-pill{ background:rgba(255,255,255,.06); border-color:var(--dark-border); color:var(--dark-fg); }
.act-dark .addon-pill svg{ color:var(--yellow); }
.service-advice{ margin-top:var(--s-6); font-size:var(--t-small); color:var(--fg-muted); max-width:60ch; }

.addon-pills{ display:flex; gap:var(--s-3); flex-wrap:wrap; }
.addon-pill{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--border); border-radius:var(--r-pill); padding:10px 16px; font-size:var(--t-small); background:var(--white); }
.addon-pill svg{ width:16px; height:16px; color:var(--p-500); }

/* ==========================================================================
   PROCESS
   ========================================================================== */
.process-list{ display:flex; flex-direction:column; }
.process-step{ display:grid; grid-template-columns:80px 1fr; gap:var(--s-6); padding-block:var(--s-7); border-top:1px solid var(--border); position:relative; }
.process-step:first-child{ border-top:none; }
.process-step .step-num{ font-size:var(--t-num-l); color:var(--p-300); font-family:var(--font-head); }
.process-step .step-time{ font-family:var(--font-mono); font-size:var(--t-micro); color:var(--p-500); text-transform:uppercase; margin-bottom:4px; display:inline-block; background:var(--p-50); padding:2px 8px; border-radius:var(--r-xs); }
.process-step .step-text{ color:var(--fg-muted); margin-top:4px; }
@media (max-width:640px){
  .process-step{ grid-template-columns:1fr; gap:8px; }
  .process-step .step-num{ font-size:1.5rem; }
}

/* ==========================================================================
   DOCUMENTS
   ========================================================================== */
.docs-card{ background:var(--white); border-radius:var(--r-2xl); border:1px solid var(--border); padding:var(--panel-pad); position:relative; overflow:hidden; }
.docs-stamp-illu{ position:absolute; top:var(--s-6); right:var(--s-6); width:120px; height:120px; color:var(--coral); opacity:.28; pointer-events:none; }
.docs-layout{ display:grid; gap:var(--s-9); position:relative; }
@media (min-width:900px){ .docs-layout{ grid-template-columns:7fr 5fr; } }
.docs-checklist{ display:flex; flex-direction:column; gap:10px; margin-top:var(--s-5); }
.docs-checklist li{ display:flex; align-items:flex-start; gap:10px; font-size:var(--t-body); }
.docs-checklist svg{ width:18px; height:18px; color:var(--green-ink); flex:none; margin-top:2px; }
.docs-checklist[hidden]{ display:none; }
.docs-files{ display:flex; flex-direction:column; gap:10px; }
.docs-file{ display:flex; align-items:center; gap:12px; border:1px solid var(--border); border-radius:var(--r-md); padding:12px 14px; text-decoration:none; color:var(--fg); }
.docs-file:hover{ background:var(--p-50); }
.docs-file svg{ width:22px; height:22px; color:var(--p-500); flex:none; }
.docs-file .name{ font-weight:500; color:var(--fg-head); }
.docs-file .meta{ font-family:var(--font-mono); font-size:var(--t-micro); color:var(--fg-muted); }

/* ==========================================================================
   TRANSIT TIMELINE (SIGNATURE 2, ACT II)
   ========================================================================== */
.timeline-honest{
  margin-top:var(--s-9); border:1px solid var(--dark-border); border-radius:var(--r-lg); padding:var(--s-6);
  border-left:3px solid var(--coral); background:rgba(255,255,255,.03); color:var(--dark-hot); font-size:var(--t-body);
  max-width:var(--container-text);
}
/* selling doc §7.3 «зеркальная строка» — та же карточка, но нейтральный/зелёный акцент:
   честность работает в обе стороны, не только «вам невыгодно» */
.timeline-honest--wins{ margin-top:var(--s-4); border-left-color:var(--green); color:var(--dark-fg-muted); }

/* ==========================================================================
   «СКАЖЕМ ПРЯМО» (upgrade-v3-art.md §5.5 / §3.5) — второе и последнее применение
   --t-display (128px). Единственная секция, которая начинается не с eyebrow,
   а сразу с крупной типографики — осознанный разрыв ритма ровно один раз.
   ========================================================================== */
.honest-display{
  font-family:var(--font-head); font-weight:var(--w-head-light); font-size:var(--t-display);
  line-height:.92; letter-spacing:var(--tr-display); color:var(--fg-head);
  margin-bottom:var(--block-gap);
}
.honest-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-6); }
@media (max-width:900px){ .honest-cards{ grid-template-columns:1fr; } }
.honest-card{
  background:var(--paper); border:1px solid var(--border); border-left:3px solid var(--coral);
  border-radius:var(--r-lg); padding:var(--card-pad);
}
.honest-card .stamp{ color:var(--coral-ink); border-color:var(--coral-ink); margin-bottom:var(--s-4); }
.honest-card p{ color:var(--fg); line-height:var(--lh-body); }
.honest-card .code{ font-size:.9em; color:var(--fg-muted); }

.tl-track{ position:relative; display:grid; grid-template-columns:repeat(7,1fr); gap:var(--s-3); padding-top:var(--s-9); }
.tl-line{ position:absolute; left:0; right:0; top:calc(var(--s-9) + 6px); height:1px; background:rgba(255,255,255,.28); z-index:0; }
.tl-line-fill{ display:none; } /* убрана: застревала на 80% ширины и читалась как баг */
@supports (animation-timeline: scroll()){
  .tl-track.supports-scroll-timeline .tl-line-fill{
    width:100%; transform:scaleX(0); animation:tl-grow linear both; animation-timeline:view();
    animation-range:entry 10% cover 70%;
  }
}
@keyframes tl-grow{ to{ transform:scaleX(1); } }

.tl-node{ position:relative; display:flex; flex-direction:column; align-items:flex-start; }
.tl-diamond{
  /* Ромб сидит РОВНО на линии. Было top:-48px при линии на +54px — ромбы висели
     в воздухе в 56px над осью. */
  position:absolute; top:calc(-1 * var(--s-9) + 48px); left:0;
  width:13px; height:13px; margin-top:-6.5px;
  transform:rotate(45deg); background:var(--p-700);
  border:1.5px solid rgba(255,255,255,.55);
  transition:background var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out);
}
/* Смысловая система, а не состояние скролла:
   ЗАЛИТЫЙ ромб = время зафиксировано регламентом.
   КОНТУРНЫЙ = этап есть, длительность зависит от рейса. */
.tl-node.tl-confirmed .tl-diamond{ background:var(--yellow); border-color:var(--yellow); }
.tl-time{ font-family:var(--font-mono); font-size:.8125rem; color:var(--dark-accent); margin-bottom:6px; margin-top:var(--s-4); }
.tl-node:not(.tl-confirmed) .tl-diamond{ border-style:dashed; background:transparent; }
.tl-node:not(.tl-confirmed) .tl-time{ color:var(--dark-fg-faint); }
.tl-node h5{ color:var(--dark-fg); font-size:var(--t-h5); margin-bottom:4px; }
.tl-node p{ font-size:var(--t-small); color:var(--dark-fg-muted); line-height:1.45; }
.tl-node .tl-code{ font-family:var(--font-mono); font-size:var(--t-micro); color:var(--dark-fg-faint); margin-top:4px; }

@media (max-width:1023px){
  .tl-track{ grid-template-columns:1fr; padding-top:0; padding-left:44px; gap:0; }
  .tl-line{ left:20px; top:0; bottom:0; right:auto; width:2px; height:auto; }
  .tl-line-fill{ left:0; right:0; top:0; width:auto; height:0; }
  .tl-node{ padding-block:var(--s-6); border-top:none; }
  .tl-diamond{ top:calc(var(--s-6) + 6px); left:-44px; margin-top:0; }
  .tl-time{ margin-top:0; }
}

/* ==========================================================================
   GUARANTEES
   ========================================================================== */
.guarantee-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-6); }
@media (max-width:767px){ .guarantee-grid{ grid-template-columns:1fr; } }
.guarantee-card .icon{ width:56px; height:56px; color:var(--p-600); margin-bottom:var(--s-4); }
.guarantee-card .icon .accent{ color:var(--coral); }
.guarantee-card p{ color:var(--fg-muted); margin-top:var(--s-3); }

/* MAJOR-11: единственная целая жёлтая полоса на странице — guarantees. Тёмный чернильный
   текст на жёлтом, контраст 13.4:1 (palette-verified §акценты). Никогда не белый на жёлтом. */
.act-yellow{ background:var(--yellow); color:var(--on-yellow); }
.act-yellow h1,.act-yellow h2,.act-yellow h3,.act-yellow h4,.act-yellow h5{ color:var(--on-yellow); }
.act-yellow .lead{ color:rgba(26,10,34,.72); }
.act-yellow .eyebrow{ background:rgba(26,10,34,.08); color:var(--on-yellow); border-color:rgba(26,10,34,.22); }
.act-yellow .guarantee-card{ background:rgba(26,10,34,.06); border:1px solid rgba(26,10,34,.16); border-radius:var(--r-card); padding:var(--card-pad); box-shadow:none; }
.act-yellow .guarantee-card .icon{ color:var(--on-yellow); }
.act-yellow .guarantee-card .icon .accent{ color:var(--coral-ink); }
.act-yellow .guarantee-card p{ color:rgba(26,10,34,.72); }

/* ==========================================================================
   CERTIFICATIONS + VERTICALS
   ========================================================================== */
.cert-layout{ display:grid; gap:var(--s-9); }
@media (min-width:900px){ .cert-layout{ grid-template-columns:5fr 7fr; align-items:start; } }
.cert-badges{ display:flex; flex-direction:column; gap:10px; }
.cert-badge{ display:flex; align-items:center; gap:12px; border:1px solid var(--border); border-radius:var(--r-md); padding:12px 16px; }
.cert-badge svg{ width:20px; height:20px; color:var(--p-500); flex:none; }
.cert-badge .label{ font-size:var(--t-micro); color:var(--fg-muted); text-transform:uppercase; letter-spacing:var(--tr-eyebrow); font-family:var(--font-mono); }
.cert-badge .value{ font-weight:600; color:var(--fg-head); }

.vertical-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-4); }
@media (min-width:640px){ .vertical-grid{ grid-template-columns:repeat(3,1fr); } }
.vertical-tile{ border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--s-4); }
.vertical-tile .code{ font-size:var(--t-micro); color:var(--p-500); }
.vertical-tile .name{ font-weight:600; color:var(--fg-head); margin-top:6px; }
.cases-placeholder{ margin-top:var(--s-5); font-size:var(--t-small); color:var(--fg-muted); border-top:1px dashed var(--border-strong); padding-top:var(--s-4); }

/* ==========================================================================
   FAQ
   ========================================================================== */
/* BLOCKER-2: было grid-template-columns 5fr/7fr с колонкой-иллюстрацией высотой 248px
   рядом с аккордеоном на 1337px — пустой остаток 1089px, дыра больше вьюпорта.
   Иллюстрация убрана из потока; аккордеон получает всю ширину и раскладывается
   в две колонки (CSS columns, сам балансирует высоту, не нужно резать 12 вопросов
   вручную на 5+5). */
.faq-layout{ display:block; }
.faq-illu{ display:none !important; }
.accordion{ column-gap:var(--s-9); }
@media (min-width:860px){ .accordion{ columns:2; } }
.acc-item{ break-inside:avoid; }
.faq-more{ margin-top:var(--s-6); }

.accordion{ border-top:1px solid var(--border); }
.acc-item{ border-bottom:1px solid var(--border); }
.acc-item summary{
  min-height:56px; display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
  cursor:pointer; list-style:none; padding-block:14px; font-family:var(--font-head); font-weight:600;
  font-size:var(--t-h3); color:var(--fg-head); transition:background var(--dur-2);
}
.acc-item summary::-webkit-details-marker{ display:none; }
.acc-item summary:hover{ background:var(--p-50); }
.acc-item .acc-icon{ flex:none; width:20px; height:20px; position:relative; color:var(--fg-head); }
.acc-item .acc-icon::before, .acc-item .acc-icon::after{ content:""; position:absolute; background:currentColor; }
.acc-item .acc-icon::before{ left:2px; right:2px; top:9px; height:2px; }
.acc-item .acc-icon::after{ top:2px; bottom:2px; left:9px; width:2px; }
.acc-item[open] .acc-icon::after{ display:none; }
.acc-item[open]{ background:var(--p-50); border-left:3px solid var(--yellow); padding-left:calc(var(--s-4) - 3px); }
.acc-item[open] summary{ padding-left:0; }
.acc-answer{ max-width:var(--container-text); padding-block:0 24px; color:var(--fg); font-size:var(--t-body); line-height:var(--lh-body); }
.acc-item[open] .acc-answer{ padding-top:0; }

@supports selector(::details-content){
  .acc-item::details-content{ block-size:0; overflow:clip; transition:block-size var(--dur-3) var(--ease-std), content-visibility var(--dur-3) allow-discrete; }
  .acc-item[open]::details-content{ block-size:auto; }
}

/* ==========================================================================
   REQUEST FORM (ACT III)
   ========================================================================== */
.request-layout{ display:grid; gap:var(--s-9); }
@media (min-width:1024px){ .request-layout{ grid-template-columns:7fr 5fr; align-items:start; } }
/* BLOCKER-2: правая колонка (464px) заметно короче формы (1620px) — пустой остаток
   1156px. Карточка менеджера прибита sticky и дозаполнена тем, что и так обязано
   быть на странице по ru-competitors.md: принципалы, терминалы, гарантия ответа. */
@media (min-width:1024px){ .manager-card{ position:sticky; top:calc(var(--header-h) + var(--s-6)); } }
.manager-fact-list{ display:flex; flex-direction:column; gap:8px; margin-top:var(--s-2); }
.manager-fact-list .row{ display:flex; justify-content:space-between; gap:var(--s-3); font-size:var(--t-small); color:var(--dark-fg-muted); padding-block:8px; border-top:1px solid var(--dark-rule); }
.manager-fact-list .row b{ color:var(--dark-fg); font-weight:600; }
.manager-airlines{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.manager-airlines span{ font-size:var(--t-micro); font-family:var(--font-mono); color:var(--dark-fg-muted); border:1px solid var(--dark-border); border-radius:var(--r-xs); padding:2px 7px; }
.manager-terminals{ display:flex; gap:10px; margin-top:6px; font-family:var(--font-mono); font-size:var(--t-small); color:var(--yellow); letter-spacing:var(--tr-mono); }
.manager-promise{ display:flex; align-items:baseline; gap:8px; margin-top:var(--s-3); padding-top:var(--s-3); border-top:1px solid var(--dark-rule); }
.manager-promise .n{ font-family:var(--font-head); font-weight:700; font-size:var(--t-h3); color:var(--yellow); }
.manager-promise .t{ font-size:var(--t-small); color:var(--dark-fg-muted); }
.request-head{ margin-bottom:var(--s-7); }
.request-head .lead{ color:var(--dark-fg-muted); }

.step-indicator{ display:none; }
@media (min-width:768px){
  .step-indicator{
    display:flex; gap:var(--s-6); position:sticky; top:calc(var(--header-h) + 12px); z-index:2;
    background:rgba(31,13,40,.9); backdrop-filter:blur(10px); padding:12px 16px; border-radius:var(--r-pill);
    margin-bottom:var(--s-7); width:fit-content; border:1px solid var(--dark-border);
  }
  .step-indicator .si-step{ display:flex; align-items:center; gap:8px; font-size:var(--t-small); color:var(--dark-fg-faint); font-family:var(--font-mono); }
  .step-indicator .si-step.is-active{ color:var(--yellow); }
  .step-indicator .si-dot{ width:8px; height:8px; border-radius:50%; background:currentColor; }
}

.form-panel{
  background:var(--white); border-radius:var(--r-2xl); padding:var(--panel-pad); color:var(--fg);
  /* тот же «светлый остров» внутри ACT III, см. .calc-card */
  --dark-fg:var(--fg-head); --dark-fg-muted:var(--fg-muted); --dark-fg-faint:var(--fg-faint);
  --dark-border:var(--border-strong); --focus-dark:var(--focus);
}
.form-step{ margin-bottom:var(--s-9); }
.form-step:last-of-type{ margin-bottom:var(--s-6); }
.form-step h3{ margin-bottom:var(--s-5); display:flex; align-items:center; gap:10px; }
.form-step h3 .step-badge{ width:28px; height:28px; border-radius:50%; background:var(--p-600); color:var(--white); font-family:var(--font-mono); font-size:.8125rem; display:flex; align-items:center; justify-content:center; flex:none; }
.form-fields{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-4); }
.form-fields .field--full{ grid-column:1/-1; }
@media (max-width:600px){ .form-fields{ grid-template-columns:1fr; } }
.form-addr-fields{ display:none; }
.form-addr-fields.is-visible{ display:grid; grid-column:1/-1; grid-template-columns:1fr 1fr; gap:var(--s-4); }
@media (max-width:600px){ .form-addr-fields.is-visible{ grid-template-columns:1fr; } }

.form-audience-company{ display:none; }
.form-audience-single{ display:grid; grid-column:1/-1; grid-template-columns:1fr 1fr; gap:var(--s-4); }
body.audience-company .form-audience-company{ display:grid; grid-column:1/-1; grid-template-columns:1fr 1fr; gap:var(--s-4); }
body.audience-company .form-audience-single{ display:none; }
@media (max-width:600px){ .form-audience-company, .form-audience-single{ grid-template-columns:1fr; } }

.form-alert{ display:none; border-radius:var(--r-lg); background:var(--coral-tint); color:var(--coral-ink); padding:var(--s-5); margin-bottom:var(--s-6); font-size:var(--t-small); }
.form-alert.is-visible{ display:block; }
.form-alert ul{ margin-top:8px; display:flex; flex-direction:column; gap:4px; }
.form-alert a{ color:var(--coral-ink); font-weight:600; }

.form-draft-banner{ display:none; background:var(--yellow-tint); border-radius:var(--r-lg); padding:var(--s-4) var(--s-5); margin-bottom:var(--s-6); align-items:center; justify-content:space-between; gap:var(--s-4); flex-wrap:wrap; }
.form-draft-banner.is-visible{ display:flex; }
.form-draft-banner p{ font-size:var(--t-small); color:var(--p-600); font-weight:500; }
.form-draft-banner .actions{ display:flex; gap:8px; }
.form-draft-banner button{ font-size:var(--t-small); padding:6px 14px; border-radius:var(--r-pill); border:1px solid var(--p-600); color:var(--p-600); }
.form-draft-banner button.primary{ background:var(--p-600); color:var(--white); }

.form-submit-row{ display:flex; flex-direction:column; gap:var(--s-4); align-items:flex-start; }
.honeypot{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form-success{ display:none; text-align:center; padding:var(--s-9) var(--s-6); }
.form-success.is-visible{ display:block; }
.form-success .icon{ width:56px; height:56px; color:var(--green-ink); margin-inline:auto; margin-bottom:var(--s-5); }
.form-success h3{ margin-bottom:var(--s-3); }
.form-success p{ color:var(--fg-muted); max-width:44ch; margin-inline:auto; }
.form-success .success-num{ font-family:var(--font-mono); color:var(--p-600); font-weight:600; }
.form-body-wrap.is-hidden{ display:none; }

.form-network-error{ display:none; background:var(--coral-tint); border-radius:var(--r-lg); padding:var(--s-5); margin-top:var(--s-6); align-items:center; justify-content:space-between; gap:var(--s-4); flex-wrap:wrap; }
.form-network-error.is-visible{ display:flex; }
.form-network-error p{ color:var(--coral-ink); font-size:var(--t-small); }
.form-network-error strong{ display:block; margin-bottom:2px; }

.manager-card{ display:flex; flex-direction:column; gap:var(--s-4); }
.manager-avatar{ width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-weight:600; font-size:1.25rem; color:var(--dark-fg); }
.manager-links{ display:flex; flex-direction:column; gap:10px; margin-top:var(--s-2); }
.manager-links a{ display:flex; align-items:center; gap:10px; color:var(--dark-fg); text-decoration:none; font-size:var(--t-small); }
.manager-links svg{ width:18px; height:18px; color:var(--yellow); flex:none; }
.manager-hours{ font-size:var(--t-small); color:var(--dark-fg-muted); margin-top:var(--s-2); line-height:1.5; }
.manager-kicker{ font-family:var(--font-mono); font-size:var(--t-micro); text-transform:uppercase; letter-spacing:var(--tr-eyebrow); }
.manager-note{ line-height:1.5; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ padding-top:var(--section-pad-tight); padding-bottom:var(--s-9); }
.footer-grid{ display:grid; grid-template-columns:4fr repeat(3,3fr); gap:var(--s-9) var(--s-6); padding-bottom:var(--s-9); border-bottom:1px solid var(--dark-rule); }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-brand .brand{ margin-bottom:var(--s-4); }
.footer-brand p{ color:var(--dark-fg-muted); font-size:var(--t-small); max-width:34ch; }
.footer-col h5{ color:var(--dark-fg); margin-bottom:var(--s-4); font-family:var(--font-mono); font-size:var(--t-micro); text-transform:uppercase; letter-spacing:var(--tr-eyebrow); font-weight:500; }
.footer-col ul{ display:flex; flex-direction:column; gap:10px; }
.footer-col a{ color:var(--dark-fg-muted); text-decoration:none; font-size:var(--t-small); }
.footer-col a:hover{ color:var(--dark-fg); }

@media (max-width:900px){
  .footer-col{ border-top:1px solid var(--dark-rule); padding-top:var(--s-5); }
  .footer-col > ul{ display:none; }
  .footer-col.is-open > ul{ display:flex; }
  .footer-col h5{ cursor:pointer; display:flex; justify-content:space-between; align-items:center; }
}

.footer-meta{ padding-top:var(--s-9); display:flex; flex-direction:column; gap:var(--s-5); }
.footer-legal{ font-family:var(--font-mono); font-size:var(--t-micro); color:var(--dark-fg-faint); line-height:1.7; }
.footer-payment{ display:flex; gap:var(--s-4); align-items:center; flex-wrap:wrap; }
.footer-payment span{ font-family:var(--font-mono); font-size:var(--t-micro); color:var(--dark-fg-muted); border:1px solid var(--dark-border); padding:4px 10px; border-radius:var(--r-xs); }
.footer-disclaimer{ font-size:var(--t-small); color:var(--dark-fg-muted); max-width:70ch; }
.footer-copyright{ font-size:var(--t-small); color:var(--dark-fg-faint); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }

/* ==========================================================================
   ROUTE RAIL (структурная идея, ≥1024)
   ========================================================================== */



/* ==========================================================================
   PAGE-LOAD ORCHESTRATION (только hero, prefers-reduced-motion:no-preference)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference){
  [data-reveal]{ opacity:0; transform:translateY(14px); transition:opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out); }
  .is-revealed [data-reveal]{ opacity:1; transform:translateY(0); }
  .site-header[data-reveal]{ transform:none; }

  .hero-arcs path.draw{ stroke-dasharray:1; stroke-dashoffset:1; pathLength:1; transition:stroke-dashoffset var(--dur-5) var(--ease-out); }
  .is-revealed .hero-arcs path.draw{ stroke-dashoffset:0; }

  [data-io-reveal]{ opacity:0; transform:translateY(16px); transition:opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out); }
  [data-io-reveal].is-in{ opacity:1; transform:translateY(0); }
}

/* ==========================================================================
   MISC / SVG shared
   ========================================================================== */
.illu{ color:var(--p-600); }
.illu .accent{ color:var(--coral); stroke:var(--coral); }
.process-illu{ width:100%; height:auto; max-width:var(--container); margin:0 auto var(--s-9); opacity:.85; }
@media (max-width:767px){ .process-illu{ display:none; } }
.on-dark .illu, .act-dark .illu{ color:var(--dark-fg-faint); }

.section-art{ display:block; width:clamp(180px,20vw,240px); height:auto; color:var(--p-600); stroke-width:2; }
.section-art--scales{ float:right; margin:-48px 0 var(--s-7) var(--s-9); }
.docs-main-art{ position:absolute; right:var(--s-7); bottom:var(--s-7); width:220px; opacity:.78; stroke-width:3; }
@media (min-width:900px){ .docs-files{ padding-bottom:210px; } }
.guarantee-main-art{ grid-column:1; grid-row:2; width:min(230px,100%); justify-self:center; color:var(--on-yellow); }
.guarantee-grid{ grid-column:2; grid-row:1 / span 2; }
.transit-rail{ display:block; width:100%; height:auto; color:rgba(255,255,255,.55); margin-top:var(--s-6); margin-bottom:-32px; }
@media (min-width:1024px){
  .tl-track--labels{ padding-top:0; }
  .tl-track--labels .tl-line,.tl-track--labels .tl-diamond{ display:none; }
  .tl-track--labels .tl-time{ margin-top:0; }
}
@media (max-width:899px){
  .section-art--scales{ float:none; margin:0 auto var(--s-7); }
  .docs-main-art{ position:static; margin:0 auto var(--s-7); width:190px; opacity:1; }
  .guarantee-main-art{ grid-column:auto; grid-row:auto; margin-inline:auto; }
  .guarantee-grid{ grid-column:auto; grid-row:auto; }
}
@media (max-width:1023px){ .transit-rail{ display:none; } }

.callout-strip{ display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:var(--t-small); color:var(--dark-fg-muted); flex-wrap:wrap; }
.callout-strip .sep{ opacity:.4; }

.no-scroll{ overflow:hidden; }

@media (min-width:768px) and (max-width:1023px){ .container{ padding-inline:24px; } }

.figure-caption{ font-family:var(--font-mono); font-size:11px; color:var(--fg-muted); margin-top:6px; }
.tl-legend{ font-family:var(--font-mono); font-size:var(--t-nano); letter-spacing:var(--tr-mono); margin-top:var(--s-2); }


/* === ПРАВИЛО «ОДИН ЖЁЛТЫЙ В КАДРЕ» ===
   Над тёмным hero жёлтая кнопка шапки конкурировала с жёлтой кнопкой калькулятора —
   два горячих акцента в одном кадре. Пока шапка не оторвалась от hero, CTA — контурная. */
.site-header:not(.is-stuck) .header-cta{
  background:transparent;
  color:var(--dark-fg);
  border:1px solid rgba(255,255,255,.38);
  box-shadow:none;
}
.site-header:not(.is-stuck) .header-cta:hover{
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.6);
  transform:none;
}

/* === Сеть городов: асимметрия «откуда/куда» показывается честно ===
   В форме референса 3 города есть в «Куда», но нет в «Откуда» — туда возим,
   оттуда не забираем. Скрывать это нельзя: клиент выберет несуществующее плечо. */
.city-flag{
  display:block; margin-top:var(--s-2);
  font-family:var(--font-mono); font-size:var(--t-micro); line-height:1.35;
  color:var(--coral-ink);
}

/* === Переносы: разрешены только там, где колонка реально узкая ===
   На десктопе `hyphens:auto` рвал короткие заголовки карточек дефисом посреди слова
   («Терминаль-ная обработка») — это выглядело дёшево, правило снято.
   Но на 375 без переносов длинные слова («корреспонденция», «Паллетированный»)
   вылезали за вьюпорт и давали горизонтальный скролл. Возвращаем адресно. */
@media (max-width:767px){
  .cargo-card, .cargo-card h4, .cargo-card p,
  .city-card, .city-name,
  .card h4, .card h3, .card p{ hyphens:auto; overflow-wrap:anywhere; }
}
/* Элементы grid/flex по умолчанию не сжимаются ниже содержимого — без этого
   длинное слово распирает колонку независимо от переносов. */
.cargo-grid > *, .city-grid > *, .cards-grid > *{ min-width:0; }


/* === Сетка городов: 29 направлений должны читаться как сеть, а не как список ===
   Без правила для >=1024 сетка падала на 2 колонки по 572px — карточка «Астрахань ASF»
   шириной в пол-экрана. */
@media (min-width:1024px){
  .city-grid{ grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:var(--s-3); }
  .city-card{ padding:var(--s-4); }
}

/* === Блок проверенных ставок: заполняет левую колонку фактами ===
   Левая колонка была 204px против 409px карты — дыра под кнопкой. */
.rate-proof{ margin-top:var(--s-6); padding:var(--s-5); background:var(--white);
  border:1px solid var(--border); border-radius:var(--r-xl); }
.rate-proof-head p{ margin-top:var(--s-2); font-size:var(--t-small); color:var(--fg-muted); line-height:1.5; }

/* MAJOR-6: цена — единственное, чем реально бьём рынок, была набрана 14px/400 слитно
   с оговоркой, тем же цветом, что и муть. Разобрано на ярусы: цифра — Geologica 40px/600
   в --ink, «от» надстрочно, «₽/кг» на базовой линии мельче, партия — отдельной строкой mono. */
.rate-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-4); margin-top:var(--s-4); }
.rate-card{ background:var(--paper-2); border-radius:var(--r-md); padding:14px 16px; }
.rate-card-head{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.rate-card-head .city{ font-family:var(--font-head); font-weight:600; font-size:var(--t-h5); color:var(--fg-head); }
.rate-card-head .iata{ font-family:var(--font-mono); font-size:var(--t-micro); color:var(--fg-muted); }
.rate-price{ display:flex; align-items:baseline; gap:.14em; margin-top:6px; }
.rate-price .pre{ font-size:11px; color:var(--fg-muted); align-self:flex-start; margin-top:3px; }
.rate-price .v{ font-family:var(--font-head); font-weight:600; font-variation-settings:'SHRP' 100;
  font-size:2.25rem; line-height:.95; color:var(--ink); font-variant-numeric:tabular-nums; }
.rate-price .unit{ font-family:var(--font-mono); font-size:var(--t-small); color:var(--fg-muted); }
.rate-min{ margin-top:4px; font-family:var(--font-mono); font-size:var(--t-micro); color:var(--fg-muted); }
.rate-foot{ margin-top:var(--s-4); font-size:var(--t-micro); color:var(--fg-muted); line-height:1.5; }
@media (max-width:479px){ .rate-grid{ grid-template-columns:1fr; } }

.routes-map svg{ width:100%; height:auto; overflow:visible; }
.routes-map .arc{ stroke-width:1; opacity:1;
  transition:stroke var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out), stroke-dashoffset 700ms var(--ease-out); }
.routes-map .pt-hit{ fill:transparent; }
.routes-map .pt-dot, .routes-map .hub-dot{ transition:fill var(--dur-2), stroke var(--dur-2), r var(--dur-2); }
.routes-map .pt-label{ font-family:var(--font-mono); font-size:9px;
  opacity:0; transition:opacity var(--dur-2) var(--ease-out); pointer-events:none; }
.routes-map .pt--anchor .pt-label, .routes-map .pt:hover .pt-label, .routes-map .pt:focus-visible .pt-label,
.routes-map .pt.is-active .pt-label{ opacity:1; }
.routes-map .pt:focus-visible{ outline:none; }
.routes-map .hub-label{ font-family:var(--font-mono); font-size:9px; letter-spacing:0; pointer-events:none; }

/* Первый экран обязан помещаться в первый экран: на невысоких вьюпортах
   заголовок ужимается, иначе ценовой блок и CTA уходят под сгиб. */
@media (min-width:1024px) and (max-height:1000px){
  /* размер H1 берётся из --t-h1 (шкала головного сайта, 42px) */
  .hero-sub{ font-size:var(--t-body); }
}
@media (min-width:1024px) and (max-height:1000px){
  /* Шапка position:fixed высотой 72px — верхний отступ hero обязан её перекрывать,
     иначе eyebrow и карточка калькулятора уезжают под неё. Было 48px: контент
     начинался на 24px ниже нижней грани шапки, то есть под ней. */
  .hero{ padding-block:calc(var(--header-h) + var(--s-6)) var(--s-8); }
  .price-stamp{ padding:var(--s-4) var(--s-5); }
}

/* ============================================================
   ТАБЛО НАПРАВЛЕНИЙ — дизайнерское решение оркестратора
   Было: 29 одинаковых белых карточек-плиток + таблица ставок = 37 боксов
   подряд на бежевом. Это и читалось как «сделано нейросетью».
   Стало: тёмный акт во всю ширину + карта + табло вылетов моноширинным
   набором. Ни одного бокса. Отраслевой образ, которого нет ни у одного
   конкурента (все сидят на Montserrat и сетках карточек).
   ============================================================ */
#routes{ background:#2A1036; color:var(--dark-fg); }
#routes .section-intro .lead{ color:var(--dark-fg-muted); }
#routes h2{ color:var(--dark-fg); }
#routes .section-numeral .n{ color:var(--yellow); }
#routes .eyebrow{ background:rgba(255,255,255,.08); color:var(--dark-fg-muted); border-color:var(--dark-border); }

/* карта во всю ширину контейнера, а не прямоугольник в правой колонке */
.routes-map-wrap{ margin:var(--s-8) 0 var(--s-9); }
#routes .routes-map{ background:transparent; border:0; padding:0; }
#routes .routes-map svg{ width:100%; height:auto; }
#routes .ru-network{ max-height:min(72vh,760px); overflow:visible; }
#routes .network-graticule{ stroke:rgba(255,255,255,.07); opacity:1; }
#routes .ru-outline{ stroke:rgba(255,255,255,.22); opacity:1; }
#routes .ru-network .pt-hit{ stroke:none; }
#routes .arc{ stroke:rgba(255,255,255,.30); stroke-dasharray:1; stroke-dashoffset:1; }
#routes .routes-map.is-in .arc{ stroke-dashoffset:0; }
#routes .arc--to-only{ stroke:#FF714D; opacity:.55; stroke-dasharray:4 5; }
#routes .arc.is-active{ stroke:#F5D000; opacity:1; stroke-dasharray:none; }
#routes .pt-dot{ fill:#CFC6CE; stroke:none; }
#routes .pt--to-only .pt-dot{ fill:transparent; stroke:#FF714D; stroke-width:1.4; }
#routes .pt-label{ fill:#E7E1E3; font-size:9px; }
#routes .pt:hover .pt-dot, #routes .pt.is-active .pt-dot{ fill:#F5D000; stroke:#F5D000; r:5; }
#routes .pt--to-only:hover .pt-dot, #routes .pt--to-only.is-active .pt-dot{ fill:#F5D000; stroke:#F5D000; }
#routes .pt:focus-visible .pt-dot{ fill:#F5D000; stroke:#F5D000; r:5.5; }
#routes .hub-halo{ fill:#F5D000; opacity:.22; stroke:none; }
#routes .hub-dot{ fill:#F5D000; stroke:none; }
#routes .hub-label{ fill:#E7E1E3; }

@media (prefers-reduced-motion: reduce){
  #routes .arc{ stroke-dashoffset:0; transition:none; }
}

.schema-track{ display:block; padding:0; color:var(--p-500); }
.leg-schema{ display:block; width:100%; height:auto; }
.schema-labels{ display:grid; grid-template-columns:repeat(5,1fr); margin-top:-48px; position:relative; }
.schema-labels span{ color:var(--fg-muted); font-size:var(--t-small); text-align:center; padding-inline:6px; }
@media (max-width:767px){
  .schema-track{ padding:0; overflow-x:auto; }
  .leg-schema{ min-width:680px; }
  .schema-labels{ min-width:680px; margin-top:-36px; }
  .schema-labels span{ font-size:11px; }
}

/* Service coverage drawing: five technical nodes, explicit tariff state. */
#service-levels .schema-wrap{ padding:clamp(16px,2.6vw,32px); }
#service-levels .schema-mode-switch{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px;
  margin-bottom:4px; padding:6px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--p-50);
}
#service-levels .schema-mode-switch button{
  min-height:48px; display:flex; align-items:center; justify-content:center; gap:10px;
  padding:8px 12px; border:1px solid transparent; border-radius:var(--r-md); color:var(--fg-muted);
  background:transparent; cursor:pointer; font-weight:600;
}
#service-levels .schema-mode-switch button svg{ width:40px; height:16px; flex:none; }
#service-levels .schema-mode-switch button:hover{ color:var(--fg-head); border-color:var(--border-strong); }
#service-levels .schema-mode-switch button[aria-pressed="true"]{ color:var(--white); background:var(--p-600); border-color:var(--p-600); }
#service-levels .schema-mode-switch button:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
#service-levels .schema-track{ display:block; position:relative; padding:0; overflow:visible; color:var(--p-600); }
#service-levels .leg-schema{ display:block; width:100%; min-width:0; height:auto; }
#service-levels .leg-variant{ display:none; }
#service-levels .leg-variant.is-active{ display:inline; }
#service-levels .schema-labels{
  position:absolute; inset:82% 0 auto; display:grid; grid-template-columns:repeat(5,1fr);
  width:100%; min-width:0; margin:0; pointer-events:none;
}
#service-levels .schema-labels span{ color:var(--fg); font-size:var(--t-small); font-weight:600; text-align:center; padding-inline:5px; }
#service-levels .schema-coverage-label{
  position:absolute; top:66%; left:38.75%; transform:translate(-50%,-50%); padding:0 7px;
  color:var(--coral-ink); background:var(--white); font-family:var(--font-mono); font-size:11px; line-height:1.5;
}
#service-levels .schema-track[data-schema-current="a2a"] .schema-coverage-label,
#service-levels .schema-track[data-schema-current="d2d"] .schema-coverage-label{ left:50%; }
.schema-mobile{ display:none; }

@media (max-width:767px){
  #service-levels .schema-mode-switch{ grid-template-columns:1fr; }
  #service-levels .schema-mode-switch button{ justify-content:flex-start; }
  #service-levels .leg-schema,
  #service-levels .schema-labels,
  #service-levels .schema-coverage-label{ display:none; }
  #service-levels .schema-track{ overflow:visible; }
  #service-levels .schema-mobile{ display:grid; gap:18px; position:relative; padding:14px 28px 14px 0; }
  #service-levels .schema-mobile-node{
    position:relative; display:grid; grid-template-columns:96px 1fr; align-items:center; gap:16px; min-height:96px;
    color:var(--p-600); transition:opacity var(--dur-2);
  }
  #service-levels .schema-mobile-node:not(.is-covered){ opacity:.35; }
  #service-levels .schema-mobile-node svg{ width:96px; height:96px; fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
  #service-levels .schema-mobile-node > span{ color:var(--fg); font-weight:600; }
  #service-levels .schema-mobile-node:not(:last-child)::after{
    content:""; position:absolute; left:47px; top:102px; width:0; height:6px; border-left:2px solid currentColor;
  }
  #service-levels .schema-mobile-node:nth-child(3)::after,
  #service-levels .schema-mobile-node:nth-child(4)::after{ border-left-style:dashed; }
  #service-levels .schema-mobile-coverage{
    position:absolute; z-index:2; right:2px; width:10px; border:1px solid var(--coral); border-radius:6px;
    top:0; height:438px; transition:top var(--dur-2),height var(--dur-2);
  }
  #service-levels .schema-track[data-schema-current="a2a"] .schema-mobile-coverage{ top:114px; height:324px; }
  #service-levels .schema-track[data-schema-current="d2d"] .schema-mobile-coverage{ top:0; height:552px; }
}

/* строки табло */
.board{ margin-top:var(--s-7); }
.board-head, .b-row{
  display:grid;
  grid-template-columns:48px minmax(120px,1fr) 104px 78px;
  align-items:center; gap:var(--s-4);
  padding:11px var(--s-4);
}
.board-head{
  font-family:var(--font-mono); font-size:var(--t-micro); letter-spacing:var(--tr-eyebrow);
  text-transform:uppercase; color:var(--dark-fg-faint);
  border-bottom:1px solid rgba(255,255,255,.22);
}
.board-head--sub{ grid-template-columns:1fr; }
.b-row{
  width:100%; text-align:left; background:none; border:0;
  border-bottom:1px solid rgba(255,255,255,.07);
  color:var(--dark-fg); cursor:pointer;
  transition:background var(--dur-2) var(--ease-out);
}
.b-row--rate{ cursor:default; }
.b-row:hover{ background:rgba(255,255,255,.06); }
.b-row:focus-visible{ outline:2px solid var(--yellow); outline-offset:-2px; }
.b-iata{ font-size:var(--t-small); color:var(--yellow); letter-spacing:.06em; }
.b-city{ font-family:var(--font-head); font-weight:500; font-size:1.0625rem; }
.b-rate{ font-family:var(--font-head); font-variant-numeric:tabular-nums; font-size:1.0625rem; white-space:nowrap; }
.b-rate .num{ font-weight:600; font-size:1.25rem; }
.b-rate--ask{ font-family:var(--font-body); font-size:var(--t-small); color:var(--dark-fg-faint); font-weight:400; }
.b-min{ font-family:var(--font-mono); font-size:var(--t-micro); color:var(--dark-fg-muted); white-space:nowrap; }
.b-flag{ font-family:var(--font-mono); font-size:var(--t-micro); color:var(--coral); text-align:right; }
.board-foot{ margin-top:var(--s-4); font-size:var(--t-small); color:var(--dark-fg-faint); max-width:62ch; line-height:1.55; }
.board--rates{ margin-top:var(--s-10); }
.board--rates .board-head--sub{ color:var(--dark-fg-muted); }

/* две колонки табло на широком экране — плотность вместо простыни */
@media (min-width:1100px){
  .board-body{ display:grid; grid-template-columns:1fr 1fr; column-gap:var(--s-9); }
  .board-head{ display:none; }
}
@media (max-width:640px){
  .board-head, .b-row{ grid-template-columns:48px 1fr auto; row-gap:2px; }
  .b-min, .b-flag{ grid-column:2 / -1; text-align:left; }
  .board-head{ display:none; }
}


/* Метка «только доставка» больше не отдельная колонка — она вылезала за контейнер.
   Теперь это подпись под названием города. */
.b-flag{ grid-column:2; grid-row:2; text-align:left; margin-top:1px; }
.b-row{ row-gap:0; }
.b-row--to-only .b-city{ line-height:1.15; }
.b-rate--ask{ color:var(--dark-fg-faint); font-family:var(--font-mono); }

/* Карта: пустота справа — это реальная география России, а не дыра вёрстки.
   Делаем её читаемой — сетка широт/долгот и подписи опорных городов. */
#routes .graticule{ stroke:rgba(255,255,255,.07); stroke-width:1; }
#routes .pt--anchor .pt-label{ opacity:1; }

/* ============================================================
   ДВА РЕГИСТРА ВМЕСТО ОДНОГО ПОВТОРА
   Было: 29 строк подряд с прочерком в колонке цены — монотонно.
   Стало: цены крупно и их мало; сеть — плотной мелкой сеткой.
   Иерархия делается контрастом плотности, а не рамками.
   ============================================================ */
.block-label{ font-family:var(--font-mono); font-size:var(--t-micro); letter-spacing:var(--tr-eyebrow);
  text-transform:uppercase; color:var(--dark-fg-faint); margin-bottom:var(--s-5); max-width:70ch; line-height:1.6; }
.block-foot{ margin-top:var(--s-5); font-size:var(--t-small); color:var(--dark-fg-faint); max-width:64ch; line-height:1.55; }

.rates-block{ margin-top:var(--s-10); }
.p-list{ display:grid; gap:0; }
@media (min-width:900px){ .p-list{ grid-template-columns:1fr 1fr; column-gap:var(--s-11); } }
.p-row{ display:grid; grid-template-columns:46px 1fr auto; align-items:baseline; gap:var(--s-4);
  padding:var(--s-4) 0; border-bottom:1px solid rgba(255,255,255,.09); }
.p-iata{ font-size:var(--t-small); color:var(--yellow); letter-spacing:.06em; }
.p-city{ font-family:var(--font-head); font-weight:500; font-size:1.125rem; }
.p-val{ font-family:var(--font-head); font-variant-numeric:tabular-nums; white-space:nowrap; }
.p-val .num{ font-size:2rem; font-weight:600; letter-spacing:-.02em; }
.p-val .cur{ font-size:var(--t-small); color:var(--dark-fg-muted); margin-left:4px; }
.p-min{ grid-column:2 / -1; font-family:var(--font-mono); font-size:var(--t-micro);
  color:var(--dark-fg-faint); margin-top:2px; }

.net-block{ margin-top:var(--s-12); padding-top:var(--s-9); border-top:1px solid rgba(255,255,255,.12); }
/* Сетка без границ: линии между ячейками превращали список городов в таблицу
   и утяжеляли тёмный акт. Разделяет воздух, подсветка приходит только на наведение. */
.n-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(176px,1fr));
  column-gap:var(--s-6); row-gap:var(--s-2); background:none; border:0; }
.n-item{ display:flex; flex-direction:column; gap:2px; align-items:flex-start;
  padding:var(--s-3) var(--s-3) var(--s-3) 0; background:none; border:0;
  border-radius:var(--r-sm); text-align:left; cursor:pointer;
  transition:background var(--dur-2) var(--ease-out), padding-left var(--dur-2) var(--ease-out); }
.n-item:hover, .n-item.is-hl{ background:rgba(255,255,255,.05); padding-left:var(--s-3); }
.n-item:focus-visible{ outline:2px solid var(--yellow); outline-offset:-2px; }
.n-iata{ font-size:var(--t-micro); color:var(--yellow); letter-spacing:.08em; }
.n-city{ font-family:var(--font-head); font-weight:500; font-size:1rem; color:var(--dark-fg); line-height:1.2; }
.n-to{ font-family:var(--font-mono); font-size:10px; color:var(--coral); line-height:1.3; }

/* Гербы городов в сетке направлений.
   По умолчанию приглушены: 29 цветных гербов на тёмном фоне превращаются в кашу
   и перебивают типографику. Полный цвет — при наведении на плитку. */
.n-item{ position:relative; }
.n-arm{
  position:absolute; right:var(--s-4); top:var(--s-4);
  width:24px; height:24px; object-fit:contain;
  opacity:.32; filter:grayscale(1) contrast(.9) brightness(1.6);
  transition:opacity var(--dur-2) var(--ease-out), filter var(--dur-2) var(--ease-out);
  pointer-events:none;
}
.n-item:hover .n-arm, .n-item:focus-visible .n-arm, .n-item.is-hl .n-arm{ opacity:1; filter:none; }
.n-item{ padding-right:calc(var(--s-4) + 30px); }


/* Легенда системы ромбов — она объясняет главный приём секции, ей нельзя быть
   мелкой серой строкой в углу. */
.tl-legend{
  display:flex; gap:var(--s-6); flex-wrap:wrap; align-items:center;
  margin-top:var(--s-6); padding:var(--s-4) var(--s-5);
  border:1px solid rgba(255,255,255,.14); border-radius:var(--r-lg);
  font-size:var(--t-small); color:var(--dark-fg-muted); max-width:none;
}
.tl-legend b{ color:var(--dark-fg); font-weight:500; }

/* Пара «когда не нужно / когда нужно» — противопоставление на всю ширину.
   Было: две плашки по 720px в контейнере 1320 — правая половина секции пустовала,
   и одинаковые по форме блоки с разными цветными полосками читались как два
   случайных компонента, а не как одна мысль. */
.verdict{ display:grid; gap:1px; margin-top:var(--s-11);
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-xl); overflow:hidden; }
@media (min-width:860px){ .verdict{ grid-template-columns:1fr 1fr; } }
.verdict-col{ background:var(--p-700); padding:var(--s-7) var(--s-7) var(--s-8); }
.verdict-label{ font-family:var(--font-mono); font-size:var(--t-micro);
  letter-spacing:var(--tr-eyebrow); text-transform:uppercase; margin-bottom:var(--s-4); }
.verdict-col--no .verdict-label{ color:var(--coral); }
.verdict-col--yes .verdict-label{ color:var(--yellow); }
.verdict-text{ font-size:var(--t-body); line-height:1.6; color:var(--dark-fg); max-width:46ch; }
.verdict-col--no{ background:var(--p-800); }


/* Заклёпки — та самая мелкая деталь. Одна из четырёх коралловая:
   единственный акцент на всю секцию. */
.rivet{
  position:absolute; width:5px; height:5px; border-radius:50%;
  background:rgba(255,255,255,.22); box-shadow:0 0 0 1px rgba(0,0,0,.35) inset;
}
.rivet--tl{ top:9px; left:9px; }
.rivet--tr{ top:9px; right:9px; background:var(--coral); }
.rivet--bl{ bottom:9px; left:9px; }
.rivet--br{ bottom:9px; right:9px; }

/* ============================================================
   СХЕМА ПРОЦЕССА — хребет секции «Пять шагов»
   Было: декоративная полоса из пяти примитивных фигур (прямоугольник,
   пятиугольник, трапеция, кружок с галочкой) на пунктире, подписанная
   «склад · терминал · досмотр · перрон · борт» — и эти подписи НЕ совпадали
   с шагами в списке под ней. Дубль, который ещё и противоречил содержанию.
   Стало: одна схема. Станция несёт номер, пиктограмму, время, заголовок и текст.
   Линия связи рвётся у каждой станции, последний перегон — пунктиром: это борт.
   ============================================================ */
.process-schema{
  list-style:none; margin:var(--s-10) 0 0; padding:0;
  display:grid; gap:var(--s-7) var(--s-6);
}
@media (min-width:1000px){ .process-schema{ grid-template-columns:repeat(5,1fr); gap:var(--s-4); } }

.ps-cell{ position:relative; padding-top:var(--s-2); }

/* связь между станциями: тянется от края пиктограммы до края следующей */
@media (min-width:1000px){
  .ps-cell::after{
    content:""; position:absolute; top:76px; height:1px;
    left:calc(50% + 52px); right:calc(-50% + 52px);
    background:var(--border-strong);
  }
  .ps-cell:last-child::after{ display:none; }
  /* перегон «на борт» — пунктиром: другое физическое плечо */
  .ps-cell:nth-child(4)::after{
    background:none;
    border-top:1px dashed var(--border-strong);
  }
}

.ps-num{
  display:block; font-size:var(--t-micro); letter-spacing:.14em;
  color:var(--fg-faint); margin-bottom:var(--s-3);
}
.ps-ico{
  display:block; width:88px; height:88px; color:var(--p-600);
  margin-bottom:var(--s-5);
}
.ps-ico .accent{ stroke:var(--coral); }
.ps-time{
  display:inline-block; font-size:var(--t-micro); letter-spacing:.04em;
  color:var(--fg-muted); padding:3px 8px; margin-bottom:var(--s-3);
  border:1px solid var(--border); border-radius:var(--r-xs); background:var(--white);
}
.ps-title{ font-size:var(--t-h4); color:var(--fg-head); margin-bottom:var(--s-3); line-height:1.2; }
.ps-text{ font-size:var(--t-small); line-height:1.55; color:var(--fg-muted); }

/* На мобиле схема разворачивается вертикально: линия идёт слева */
@media (max-width:999px){
  .process-schema{ padding-left:var(--s-9); }
  .ps-cell::before{
    content:""; position:absolute; left:calc(-1 * var(--s-9) + 43px); top:0; bottom:calc(-1 * var(--s-7));
    width:1px; background:var(--border-strong);
  }
  .ps-cell:last-child::before{ display:none; }
  .ps-ico{ width:64px; height:64px; }
}

/* ============================================================
   ОПЕРАТОР — заявление, а не карточка
   Было: бокс с четырьмя колонками. Длина текста в ячейках разная,
   низ рваный, две ячейки наполовину пустые, список авиакомпаний
   ломался на три строки с висящей точкой. И это снова была карточка.
   Стало: цифры живут внутри фразы и работают как якоря для глаза.
   Ни рамки, ни колонок, ни плиток — только типографика и одна линия.
   ============================================================ */
.op-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-6);
  flex-wrap:wrap; padding-bottom:var(--s-4);
  border-bottom:1px solid rgba(255,255,255,.18);
}
.op-label{
  font-family:var(--font-mono); font-size:var(--t-micro); letter-spacing:.18em;
  text-transform:uppercase; color:var(--yellow);
}
.op-legal{
  font-family:var(--font-mono); font-size:var(--t-micro); letter-spacing:.04em;
  color:var(--dark-fg-faint);
}

.op-lede{
  margin-top:var(--s-8);
  font-size:clamp(1.375rem, .95rem + 1.35vw, 2.125rem);
  line-height:1.4; color:var(--dark-fg); max-width:30ch;
  text-wrap:pretty;
}
@media (min-width:900px){ .op-lede{ max-width:none; padding-right:8%; } }
.op-lede--sub{
  margin-top:var(--s-6);
  font-size:clamp(1.0625rem, .95rem + .35vw, 1.3125rem);
  color:var(--dark-fg-muted); line-height:1.55;
}

/* Число — якорь внутри строки: крупнее кегля вокруг, но сидит на той же
   базовой линии, поэтому строка не распадается. */
.op-n{
  font-family:var(--font-head); font-weight:600; color:var(--yellow);
  font-variant-numeric:tabular-nums; letter-spacing:-.02em;
  font-size:1.55em; line-height:0; margin-right:.12em;
}
.op-lede--sub .op-n{ font-size:1.75em; }
.op-u{ color:var(--dark-fg-muted); margin-right:.28em; }
.op-lede--sub .op-u{ color:var(--dark-fg-faint); }

/* Перевозчики — одна строка, разделители рисуются, а не набираются точкой:
   висящая точка в конце строки была одним из признаков небрежности. */
.op-carriers{
  margin-top:var(--s-9); display:flex; flex-wrap:wrap; align-items:center;
  font-family:var(--font-mono); font-size:var(--t-small); letter-spacing:.04em;
  color:var(--dark-fg);
}
.op-carriers span{ display:inline-flex; align-items:center; padding:2px 0; }
.op-carriers span + span::before{
  content:""; display:inline-block; width:14px; height:1px; margin:0 12px;
  background:rgba(255,255,255,.28);
}
.op-carriers span:first-child{ color:var(--yellow); }

.op-foot{
  margin-top:var(--s-7); padding-top:var(--s-5);
  border-top:1px solid rgba(255,255,255,.12);
  font-size:var(--t-small); line-height:1.6; color:var(--dark-fg-faint); max-width:88ch;
}
.op-foot b{ color:var(--dark-fg); font-weight:500; font-variant-numeric:tabular-nums; }

/* Логотипы ко-бренда в шапке — те же файлы, что на лендинге корреспонденции. */
.brand{ display:flex; align-items:center; gap:var(--s-3); }
.brand-logo{ display:block; width:auto; }
.brand-logo--pobeda{ height:26px; }
.brand-logo--utg{ height:30px; }
/* Логотип «Победы» — белый контур; над тёмным hero он читается сам,
   на светлой залипшей шапке его нужно перекрасить в фирменный фиолетовый. */
.site-header:not(.is-stuck) .brand-logo--pobeda{ filter:brightness(0) invert(1); }
.site-header.is-stuck .brand-logo--pobeda{ filter:none; }
.brand-x{ font-family:var(--font-mono); font-size:var(--t-small); opacity:.55; }
@media (max-width:600px){ .brand-logo--pobeda{ height:20px; } .brand-logo--utg{ height:24px; } }


/* ============================================================
   ТИПОГРАФИКА ГОЛОВНОГО САЙТА utg-express.ru
   Снято с живого сайта: гарнитура Steppe (Light 300 / Regular 400 / Medium 500),
   H1 42px/350, H2 34px/350, интерлиньяж 1.2 у заголовков, проза 14-16px/400,
   ссылки 12px, кнопки 13px uppercase. Файлы шрифта взяты с их же сайта
   и положены локально — не подгружаются с чужого домена.
   ============================================================ */
:root{
  --font-head:"Steppe", Arial, sans-serif;
  --font-body:"Steppe", Arial, sans-serif;

  --t-h1:clamp(1.875rem, 1.45rem + 1.35vw, 2.625rem);  /* 30 → 42 как на головном */
  --t-h2:clamp(1.5rem, 1.24rem + .82vw, 2.125rem);      /* 24 → 34 */
  --t-h3:clamp(1.125rem, 1.03rem + .3vw, 1.375rem);     /* 18 → 22 */
  --t-h4:clamp(1rem, .96rem + .13vw, 1.125rem);         /* 16 → 18 */
  --t-h5:1rem;
  --t-body-lg:1rem;
  --t-body:.9375rem;
  --t-small:.875rem;
  --t-micro:.75rem;

  --w-head:350; --w-head-strong:500; --w-body:400; --w-medium:500; --w-semi:500;
  --lh-tight:1.2; --lh-head:1.2; --lh-sub:1.3; --lh-body:1.5; --lh-dense:1.4;
  --tr-h1:normal; --tr-h2:normal; --tr-h3:normal; --tr-h4:normal;
}
h1,h2,h3,h4,h5,.op-lede,.honest-display{
  font-family:var(--font-head); letter-spacing:normal;
}
h1{ font-weight:350; line-height:1.2; }
h2{ font-weight:350; line-height:1.2; }
h3,h4,h5{ font-weight:500; line-height:1.3; }
body{ font-family:var(--font-body); font-weight:400; }
.btn{ font-family:var(--font-head); font-weight:500; }
/* Цифры остаются в Geologica: у Steppe нет достаточного веса для табло,
   а табличные цифры в калькуляторе и тарифах — функциональное требование. */
.num, .op-n, .p-val .num, .plate-val .num{ font-family:"Geologica", var(--font-head), sans-serif; }

/* Логотип UTG-Express: в исходнике буквы фиолетовые и на тёмной шапке пропадают.
   Над hero выбеливаем силуэт, на залипшей светлой шапке возвращаем оригинал. */
.site-header:not(.is-stuck) .brand-logo--utg{ filter:brightness(0) invert(1); }
.site-header.is-stuck .brand-logo--utg{ filter:none; }
/* В футере фон тёмный всегда */
.footer .brand-logo{ filter:brightness(0) invert(1); }

/* ============================================================
   ФУТЕР
   Было: три колонки ссылок на собственные якоря той же страницы —
   дубль навигации; плюс в подвале висели КПП, расчётный счёт, банк
   и способы оплаты плейсхолдерами. Реквизитам счёта место в счёте.
   Стало: подвал отвечает на два вопроса — куда везти груз и как
   связаться, — и держит юридический блок. Ни одной ссылки-пустышки.
   ============================================================ */
.site-footer{ padding-block:var(--s-12) var(--s-8); }

.f-top{ padding-bottom:var(--s-8); border-bottom:1px solid rgba(255,255,255,.14); }
.f-claim{
  font-family:var(--font-head); font-weight:350;
  font-size:clamp(1.25rem, 1.02rem + .72vw, 1.75rem); line-height:1.25;
  color:var(--dark-fg); max-width:22ch;
}
.f-phone{
  display:inline-block; margin-top:var(--s-5);
  font-family:"Geologica", var(--font-head), sans-serif; font-weight:600;
  font-size:clamp(1.75rem, 1.3rem + 1.45vw, 2.75rem); line-height:1;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums;
  color:var(--yellow); text-decoration:none;
}
.f-phone:hover{ color:var(--yellow-hover); }
.f-hours{ margin-top:var(--s-3); font-size:var(--t-small); color:var(--dark-fg-faint); }

.f-grid{ display:grid; gap:var(--s-9); padding-block:var(--s-9); }
@media (min-width:900px){ .f-grid{ grid-template-columns:1.4fr 1fr 1.2fr; gap:var(--s-11); } }
.f-h{
  font-family:var(--font-mono); font-size:var(--t-micro); letter-spacing:.14em;
  text-transform:uppercase; color:var(--yellow); margin-bottom:var(--s-5); font-weight:400;
}

.f-terminals{ list-style:none; margin:0; padding:0; }
.f-terminals li{
  display:grid; grid-template-columns:46px 1fr; column-gap:var(--s-4); row-gap:2px;
  padding:var(--s-4) 0; border-top:1px solid rgba(255,255,255,.10);
}
.f-terminals li:first-child{ border-top:0; padding-top:0; }
.f-iata{ grid-row:1 / span 2; font-size:var(--t-small); color:var(--yellow); letter-spacing:.06em; padding-top:2px; }
.f-t-name{ font-family:var(--font-head); font-weight:500; color:var(--dark-fg); }
.f-t-addr{ font-size:var(--t-small); line-height:1.5; color:var(--dark-fg-muted); }
.f-t--office .f-iata{ color:var(--dark-fg-faint); }
.f-t--office .f-t-name{ color:var(--dark-fg-muted); }

.f-addr{ color:var(--dark-fg); line-height:1.5; }
.f-mail{ margin-top:var(--s-4); }
.f-mail a{ color:var(--dark-fg); text-decoration:none; border-bottom:1px solid rgba(255,255,255,.3); }
.f-mail a:hover{ border-bottom-color:var(--yellow); color:var(--yellow); }
.f-note{ margin-top:var(--s-5); font-size:var(--t-small); line-height:1.55; color:var(--dark-fg-muted); }
.f-note a{ color:var(--dark-fg); }

.f-docs{ list-style:none; margin:0; padding:0; }
.f-docs li{ border-top:1px solid rgba(255,255,255,.10); }
.f-docs li:first-child{ border-top:0; }
.f-docs a{
  display:block; padding:var(--s-4) 0; color:var(--dark-fg); text-decoration:none;
  font-size:var(--t-small); line-height:1.45;
  transition:color var(--dur-2) var(--ease-out);
}
.f-docs a:hover{ color:var(--yellow); }
.f-doc-meta{
  display:block; margin-top:3px; font-family:var(--font-mono);
  font-size:var(--t-micro); color:var(--dark-fg-faint);
}

.f-bottom{ padding-top:var(--s-7); border-top:1px solid rgba(255,255,255,.14); }
.f-brandline{ display:flex; align-items:center; gap:var(--s-3); margin-bottom:var(--s-5); }
.f-legal, .f-disclaimer{ font-size:var(--t-small); line-height:1.6; color:var(--dark-fg-faint); max-width:88ch; }
.f-disclaimer{ margin-top:var(--s-3); }
.f-copy{ margin-top:var(--s-5); font-family:var(--font-mono); font-size:var(--t-micro); color:var(--dark-fg-faint); }
/* Документ, ссылки на который ещё нет: помечаем сдержанно — коралловая плашка
   на всю строку в подвале превращала юридический блок в красное пятно. */
.f-docs a[data-placeholder]{ color:var(--dark-fg-muted); background:none; }
.f-docs a[data-placeholder]::after{
  content:" ссылка не задана"; font-family:var(--font-mono);
  font-size:var(--t-micro); color:var(--coral); opacity:.8;
}



.adv-list{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s-7); }
@media (min-width:680px){ .adv-list{ grid-template-columns:repeat(3,1fr); gap:var(--s-7); } }
.adv-item{ position:relative; padding-top:var(--s-6); border-top:1px solid var(--border-strong); }
.adv-art{
  display:block; width:100%; height:auto; color:var(--p-600);
  margin:-1px 0 var(--s-5); padding-bottom:20px;
  border-bottom:1px solid var(--border-strong);
}
.adv-art .accent{ stroke:var(--coral); }
.adv-item:has(> .adv-art){
  padding-top:0; border-top:0;
}
.adv-idx{
  position:absolute; top:var(--s-6); left:0;
  font-size:var(--t-micro); letter-spacing:.14em; color:var(--fg-faint);
}
.adv-item:has(> .adv-art) .adv-idx{ position:static; display:block; }
.adv-item h3{
  margin:var(--s-6) 0 var(--s-4);
  font-family:var(--font-head); font-weight:500; font-size:var(--t-h4);
  line-height:1.25; color:var(--fg-head);
}
.adv-strong{ font-size:var(--t-body); line-height:1.5; color:var(--fg); }
.adv-strong .num{
  font-family:"Geologica", var(--font-head), sans-serif; font-weight:600;
  color:var(--fg-head); font-size:1.15em;
}
.adv-note{ margin-top:var(--s-4); font-size:var(--t-small); line-height:1.55; color:var(--fg-muted); }
.adv-points{ list-style:none; margin:0; padding:0; }
.adv-points li{
  position:relative; padding-left:var(--s-5); margin-bottom:var(--s-3);
  font-size:var(--t-small); line-height:1.55; color:var(--fg-muted);
}
.adv-points li::before{
  content:""; position:absolute; left:0; top:.62em; width:9px; height:1px; background:var(--coral-ink);
}
.adv-c{ color:var(--fg-faint); font-size:.85em; }

/* Жёлтая плоскость с ценой */
.adv-rate{
  display:flex; flex-direction:column;
  background:var(--yellow); color:var(--on-yellow);
  border-radius:var(--r-xl); padding:var(--s-6);
  box-shadow:inset 0 -3px 0 var(--yellow-edge);
}
.adv-rate-label{
  font-family:var(--font-mono); font-size:var(--t-micro); letter-spacing:.16em;
  text-transform:uppercase; opacity:.62;
}
.adv-rate-val{ display:flex; align-items:baseline; gap:8px; margin-top:var(--s-4); }
.adv-rate-val .num{
  font-family:"Geologica", var(--font-head), sans-serif; font-weight:600;
  font-size:clamp(2.5rem, 1.9rem + 1.6vw, 3.25rem); line-height:.9;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.adv-rate-val .cur{ font-family:var(--font-mono); font-size:var(--t-body); opacity:.7; }
.adv-rate-from{ margin-top:var(--s-3); font-size:var(--t-small); line-height:1.45; opacity:.78; }


.adv-rate-link{
  display:inline-flex; align-items:center; gap:8px; margin-top:var(--s-6);
  font-family:var(--font-head); font-weight:500; font-size:var(--t-small);
  color:var(--on-yellow); text-decoration:none;
  border-bottom:1px solid rgba(26,10,34,.35); padding-bottom:2px;
}
.adv-rate-link:hover{ border-bottom-color:var(--on-yellow); }
.adv-rate-link svg{ transition:transform var(--dur-2) var(--ease-out); }
.adv-rate-link:hover svg{ transform:translateX(3px); }
.adv-rate-fine{ margin-top:var(--s-6); font-size:var(--t-micro); line-height:1.5; opacity:.62; }

/* ============================================================
   ФОРМА ЗАЯВКИ В ПЕРВОМ ЭКРАНЕ
   Калькулятор платного веса из hero убран: карточка занимала почти весь
   экран по высоте. Расчёт остался отдельной секцией ниже — на него ведёт
   ссылка из мелкого текста под кнопкой.
   ============================================================ */
.hero-form-wrap{ align-self:start; }
.hero-form{
  background:var(--white); color:var(--fg);
  border-radius:var(--r-2xl); padding:var(--panel-pad);
  box-shadow:var(--shadow-3);
}
.hf-title{
  font-family:var(--font-head); font-weight:500; font-size:var(--t-h4);
  color:var(--fg-head); margin-bottom:var(--s-2);
}
.hf-sub{ font-size:var(--t-small); line-height:1.5; color:var(--fg-muted); margin-bottom:var(--s-6); }

.hf-row{ display:grid; gap:var(--s-4); margin-bottom:var(--s-4); }
@media (min-width:420px){ .hf-row{ grid-template-columns:1fr 1fr; } }

.hf-consent{
  display:flex; align-items:flex-start; gap:10px; margin:var(--s-5) 0 var(--s-5);
  font-size:var(--t-small); line-height:1.45; color:var(--fg-muted); cursor:pointer;
}
.hf-consent input{
  flex:0 0 auto; width:18px; height:18px; margin-top:1px; accent-color:var(--p-600); cursor:pointer;
}
.hf-consent:hover span{ color:var(--fg); }

.hf .btn-block{ width:100%; }
.hf-fine{
  margin-top:var(--s-5); font-size:var(--t-micro); line-height:1.55; color:var(--fg-faint);
}
.hf-fine a{ color:var(--fg-muted); text-decoration:underline; text-underline-offset:2px; }
.hf-fine a:hover{ color:var(--fg-head); }

/* Карточка формы — светлый остров внутри тёмной секции. Класс .on-dark у hero
   красил подписи полей в белый, и они пропадали на белом фоне карточки.
   Возвращаем светлые роли токенов внутри карточки. */
.hero-form{
  --dark-fg:var(--fg);
  --dark-fg-muted:var(--fg-muted);
  --dark-fg-faint:var(--fg-faint);
  --dark-border:var(--border);
  --focus-dark:var(--p-600);
}
.hero-form .field-label{ color:var(--fg-head); font-weight:500; }
.hero-form .field-hint{ color:var(--fg-muted); }
.hero-form .field-control{ background:var(--white); color:var(--fg); border-color:var(--border-strong); }
.hero-form .field-control::placeholder{ color:var(--p-400); }

/* ============================================================
   ПЕРВЫЙ ЭКРАН: главным стало обещание, ко-бренд ушёл на роль подписи.
   Плюс единый вертикальный шаг между всеми блоками левой колонки —
   раньше у каждого был свой отступ, и колонка выглядела собранной наспех.
   ============================================================ */
/* H1 первого экрана: второй фирменный цвет и сдержанный кегль.
   При 42px и ширине 16ch фраза ложилась в четыре строки и перевешивала
   форму справа — колонки расходились по высоте. */
.hero h1{
  font-size:clamp(1.5rem, 1.18rem + 1.02vw, 2rem);
  font-weight:500; line-height:1.25; max-width:24ch;
  color:var(--yellow);
}

.hero-lockup{
  display:flex; align-items:baseline; gap:.42em;
  font-family:var(--font-head); font-weight:500;
  font-size:clamp(1.125rem, .99rem + .42vw, 1.375rem);
  color:var(--dark-fg); white-space:nowrap;
}
.lk-arrow{ font-family:var(--font-mono); font-weight:400; color:var(--yellow); font-size:.8em; }

/* Единый шаг: все прямые дети левой колонки получают одинаковый отступ сверху. */
.hero-copy > * + *{ margin-top:var(--s-6); }
.hero-copy > .hero-links{ margin-top:var(--s-7); }

/* ============================================================
   ГРУЗЫ — только суть
   Убраны: чипы «Подставить в расчёт», строки лимитов с плейсхолдерами,
   рамки карточек. Осталось то, ради чего человек читает раздел:
   название, отраслевой код и одна строка о категории.
   ============================================================ */
.cargo-grid{ display:grid; gap:var(--s-8) var(--s-7); margin-top:var(--s-9); }
@media (min-width:640px){ .cargo-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .cargo-grid{ grid-template-columns:repeat(3,1fr); gap:var(--s-9) var(--s-8); } }

.cargo-card{ padding:0; background:none; border:0; box-shadow:none; }
.cargo-art{ display:block; width:56px; height:56px; color:var(--p-600); margin-bottom:var(--s-5); }
.cargo-art .accent{ stroke:var(--coral); }
.cargo-name{
  font-family:var(--font-head); font-weight:500; font-size:var(--t-h4);
  line-height:1.25; color:var(--fg-head); margin-bottom:var(--s-3);
}
.cargo-code{ color:var(--fg-faint); font-size:.72em; letter-spacing:.04em; white-space:nowrap; }
.cargo-desc{ font-size:var(--t-small); line-height:1.55; color:var(--fg-muted); }

.adv-rate-note{ margin-top:var(--s-5); font-size:var(--t-small); line-height:1.5; opacity:.82; }
.adv-rate-link{ margin-top:auto; padding-top:var(--s-6); }
.adv-rate-fine{ margin-top:var(--s-5); }

/* Четыре блока секции — в одном горизонтальном ряду. Жёлтый не выносится вбок:
   он такой же участник ряда, просто единственный с заливкой. */
.adv-layout{ display:grid; gap:var(--s-7); margin-top:var(--s-9); align-items:stretch; }
@media (min-width:680px){ .adv-layout{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1080px){ .adv-layout{ grid-template-columns:repeat(4,1fr); gap:var(--s-6); } }
.adv-layout > .adv-item{ padding-top:var(--s-6); border-top:1px solid var(--border-strong); }
.adv-layout > .adv-item:has(> .adv-art){ padding-top:0; border-top:0; }

/* ============================================================
   «ИЗ ЧЕГО СКЛАДЫВАЕТСЯ СЧЁТ»
   Было: четыре серые плитки со скруглением, а плейсхолдеры торчали
   коралловыми блоками посреди предложений — раздел про счёт выглядел
   как черновик.
   Стало: строки счёта. Номер, статья, описание и значение справа —
   ровно так, как это читают в накладной. Ни одного бокса.
   ============================================================ */
.invoice{ margin-top:var(--s-12); }
.invoice-title{
  font-family:var(--font-head); font-weight:500; font-size:var(--t-h3);
  color:var(--fg-head); margin-bottom:var(--s-3);
}
.invoice-sub{ font-size:var(--t-small); line-height:1.55; color:var(--fg-muted); max-width:64ch; }

.invoice-rows{ margin:var(--s-8) 0 0; border-top:1px solid var(--border-strong); }
.inv-row{
  display:grid; gap:var(--s-2) var(--s-6); align-items:baseline;
  padding:var(--s-5) 0; border-bottom:1px solid var(--border);
}
@media (min-width:900px){
  .inv-row{ grid-template-columns:minmax(200px,1fr) minmax(0,2fr) 168px; gap:var(--s-7); }
}
.inv-row dt{ display:flex; align-items:baseline; gap:var(--s-4); }
.inv-idx{ font-size:var(--t-micro); letter-spacing:.14em; color:var(--fg-faint); }
.inv-name{ font-family:var(--font-head); font-weight:500; font-size:var(--t-h5); color:var(--fg-head); }
.inv-desc{ margin:0; font-size:var(--t-small); line-height:1.55; color:var(--fg-muted); }
.inv-val{
  margin:0; text-align:left; font-family:var(--font-head); font-weight:500;
  font-size:var(--t-body); color:var(--fg-head); white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
@media (min-width:900px){ .inv-val{ text-align:right; } }
.inv-val .num{ font-family:"Geologica", var(--font-head), sans-serif; font-weight:600; font-size:1.25em; }
/* Позиция, цифра которой зависит от рейса: подаём как состояние счёта,
   а не как незакрытый плейсхолдер. */
.inv-val--tbd{
  font-family:var(--font-mono); font-weight:400; font-size:var(--t-micro);
  color:var(--fg-faint); letter-spacing:.02em; background:none; white-space:normal;
}
.invoice-fine{ margin-top:var(--s-6); font-size:var(--t-micro); line-height:1.55; color:var(--fg-faint); max-width:80ch; }

/* Иконки шагов — по центру своей колонки. Соединительная линия и так строится
   от центра ячейки (left: 50% + 52px), а иконка стояла по левому краю —
   отсюда разрыв между рисунком и началом линии. */
.ps-ico{ margin-inline:auto; }

/* ============================================================
   НИЖНЯЯ ФОРМА — на всю ширину
   Карточка менеджера убрана, и правая колонка (5fr) осталась пустой.
   Форма разворачивается во всю ширину, а три шага встают в один ряд:
   груз и маршрут — самый широкий, сервис — узкий, контакты — средний.
   ============================================================ */
@media (min-width:1024px){
  .request-layout{ grid-template-columns:1fr; }
}
.form-panel{ width:100%; }

/* Три шага в ряд */
@media (min-width:1024px){
  .form-body-wrap > .form-steps,
  .form-body-wrap form > div:has(> .form-step){ display:contents; }
  .form-body-wrap form{
    display:grid;
    grid-template-columns:1.6fr 1fr 1.3fr;
    column-gap:var(--s-9);
    row-gap:var(--s-8);
    align-items:start;
  }
  .form-step{ margin:0; }
  /* Согласие и кнопка — отдельной строкой во всю ширину */
  .form-submit-row{ grid-column:1 / -1; }
  .form-alert, .form-draft-banner, .form-success{ grid-column:1 / -1; }
}

/* Внутри шага поля идут в две колонки, пока хватает места */
.form-fields{ display:grid; gap:var(--s-4); }
@media (min-width:1024px){
  .form-step .form-fields{ grid-template-columns:1fr 1fr; }
  .form-step:nth-of-type(2) .form-fields{ grid-template-columns:1fr; }
  .field--full{ grid-column:1 / -1; }
}

/* Строка отправки: согласие слева, кнопка справа — кнопка во всю ширину
   на 1440 выглядела баннером. */
@media (min-width:1024px){
  .form-submit-row{
    display:grid; grid-template-columns:minmax(0,1fr) 320px;
    align-items:center; gap:var(--s-8);
    padding-top:var(--s-7); border-top:1px solid var(--border);
  }
  .form-submit-row .btn-block{ width:100%; }
}

/* ============================================================
   «ПЛАТНЫЙ ВЕС» — компактная шапка секции
   Было: гигантская цифра «÷ 6 000», H2, абзац, отдельная плашка-формула
   в два ряда крупным кеглем и пример — четыре экрана до самого инструмента.
   Стало: заголовок с лидом слева, формула и пример — компактной карточкой
   справа. Формула осталась крупной, но перестала быть плакатом.
   ============================================================ */
.vol-head{ display:grid; gap:var(--s-7); align-items:start; }
@media (min-width:1024px){
  .vol-head{ grid-template-columns:1fr 460px; gap:var(--s-11); }
}
.vol-head-copy h2{ margin-bottom:var(--s-4); }
.vol-head-copy .lead{ max-width:52ch; }

.vol-formula-card{
  padding:var(--s-6); border:1px solid var(--border);
  border-radius:var(--r-xl); background:var(--white);
}
.vol-formula{
  font-family:var(--font-head); font-weight:500;
  font-size:clamp(1.0625rem, .93rem + .42vw, 1.375rem);
  line-height:1.35; color:var(--fg-head); margin:0;
}
.vol-formula .op{ color:var(--fg-faint); margin:0 .12em; }
.vol-formula .divisor{
  font-family:"Geologica", var(--font-head), sans-serif; font-weight:600;
  border-bottom:1px dashed var(--border-strong); padding-bottom:1px;
}
.vol-example{
  margin-top:var(--s-4); padding-top:var(--s-4);
  border-top:1px solid var(--border);
  font-size:var(--t-small); line-height:1.55; color:var(--fg-muted);
}
.vol-example b{ color:var(--fg-head); font-weight:500; }
/* Иллюстрация весов в шапке больше не нужна: она дублировала обмерный стол
   ниже и отнимала целый экран. */
.section-art--scales{ display:none; }

/* Юридический блок переехал из футера под форму заявки: отдельного подвала
   на странице больше нет, и вся правовая информация читается там же, где
   человек оставляет данные. */
.req-legal{
  margin-top:var(--s-11); padding-top:var(--s-7);
  border-top:1px solid rgba(255,255,255,.14);
}
.req-legal .f-brandline{ display:flex; align-items:center; gap:var(--s-3); margin-bottom:var(--s-5); }
.req-legal .brand-logo{ filter:brightness(0) invert(1); }
.req-legal .f-legal, .req-legal .f-disclaimer{
  font-size:var(--t-small); line-height:1.6; color:var(--dark-fg-faint); max-width:88ch;
}
.req-legal .f-disclaimer{ margin-top:var(--s-3); }
.req-legal .f-copy{
  margin-top:var(--s-5); font-family:var(--font-mono);
  font-size:var(--t-micro); color:var(--dark-fg-faint);
}

/* ============================================================
   ИСПРАВЛЕНИЕ ДВУХ ДЕФЕКТОВ ВЁРСТКИ
   1. Меню в шапке: после добавления «Варианты авиадоставки» и «Работа
      сервиса» три пункта из пяти ломались на две строки (высота 53 против 30).
   2. Карточка формулы: тянулась по высоте соседней колонки — 73px пустоты
      под текстом, а сама формула при этом переносила «вес» на вторую строку.
   ============================================================ */

/* 1. Пункты меню не переносятся, промежуток и кегль подобраны так,
      чтобы пять пунктов легли в одну строку на 1024+. */
.nav-main{ column-gap:clamp(1rem, .45rem + 1.1vw, 1.75rem); }
.nav-main a{ white-space:nowrap; }
@media (min-width:1024px) and (max-width:1279px){
  .nav-main a{ font-size:.875rem; }
}

/* 2. Карточка формулы прижата к верху и не растягивается по соседней колонке.
      Кегль формулы уменьшен так, чтобы она легла в одну строку. */
.vol-formula-card{ align-self:start; }
.vol-formula{ font-size:clamp(1rem, .9rem + .32vw, 1.1875rem); white-space:nowrap; }
@media (max-width:1023px){ .vol-formula{ white-space:normal; } }

/* У .vol-example остался margin-bottom 48px от старого блочного варианта,
   когда пример стоял отдельным абзацем в потоке секции. Внутри карточки
   он давал 48px пустоты под текстом. */
.vol-formula-card .vol-example{ margin-bottom:0; }

/* Шапка: пять пунктов меню, телефон и длинная кнопка не помещались в
   контейнер 1240 — меню налезало на логотип, а телефон рассыпался на четыре
   строки. Шапка разворачивается во всю ширину окна, телефон не переносится,
   меню ужимается по кеглю и промежутку раньше, чем начнёт наезжать. */
@media (min-width:1024px){
  .site-header .container{ max-width:none; padding-inline:clamp(1.5rem, .6rem + 1.8vw, 2.5rem); }
  .site-header .container{ gap:clamp(1rem, .2rem + 1.6vw, 2rem); }
  .nav-main{ flex:0 1 auto; min-width:0; }
  .nav-main a{ font-size:clamp(.875rem, .78rem + .28vw, .9375rem); }
}
.header-phone{ white-space:nowrap; flex:0 0 auto; }
.header-cta{ flex:0 0 auto; white-space:nowrap; }

/* Логотип-локап сжимался как flex-элемент до 32px, а сами картинки вылезали
   за его границы и ложились поверх меню. Локап не сжимается; ужимается меню. */
.site-header .brand{ flex:0 0 auto; }
.site-header .header-inner{ display:flex; align-items:center; gap:clamp(1rem,.2rem + 1.6vw,2rem); }
.site-header nav{ flex:0 1 auto; min-width:0; }

/* Правая группа (телефон + кнопка) тоже сжималась и ложилась на меню.
   Три группы шапки: логотип и действия не сжимаются, ужимается только меню. */
.site-header .header-actions{ flex:0 0 auto; margin-left:auto; display:flex; align-items:center; gap:var(--s-5); }
@media (min-width:1024px) and (max-width:1439px){
  .nav-main{ column-gap:1rem; }
  .nav-main a{ font-size:.875rem; }
}

/* Порог десктопного меню поднят с 1024 до 1280.
   Пять пунктов + телефон + кнопка «Запрос на авиаперевозку» не помещаются
   в 1024–1279: меню вылезало за свой бокс и ложилось на телефон.
   В этом диапазоне работает бургер — в нём те же пять пунктов и телефон. */
@media (min-width:1024px) and (max-width:1279px){
  .nav-main{ display:none; }
  .burger{ display:inline-flex; }
}
/* Меню не сжимается уже своего содержимого — ужимается свободное место. */
@media (min-width:1280px){
  .nav-main{ flex:0 0 auto; column-gap:1.25rem; }
  .nav-main a{ font-size:.9375rem; }
  .site-header nav{ flex:0 0 auto; }
}

/* Ширину шапки надо задавать самому .header-inner: правило на .container
   его не касалось, поэтому шапка оставалась 1200px и кнопка уезжала за край. */
@media (min-width:1280px){
  .site-header .header-inner{
    max-width:none;
    padding-inline:clamp(1.5rem, .5rem + 1.4vw, 2.5rem);
  }
}

/* 1280–1439 (ноутбуки 1366): полный набор не влезает по ширине.
   Меню ужимается по кеглю, телефон сворачивается в иконку —
   номер остаётся доступен и по клику, и для скринридера. */
@media (min-width:1280px) and (max-width:1439px){
  .nav-main{ column-gap:.875rem; }
  .nav-main a{ font-size:.875rem; }
  .site-header .header-phone{ font-size:0; gap:0; padding:8px; }
  .site-header .header-phone svg{ width:20px; height:20px; }
  .site-header .header-actions{ gap:var(--s-3); }
}

/* Маршрутная сеть «Победы» — контекст к сетке направлений.
   Источник: официальная страница «Куда мы летаем», снято 05.09.2026. */
.routes-network-note{
  margin-top:var(--s-4); font-size:var(--t-small); line-height:1.6;
  color:var(--dark-fg-muted); max-width:72ch;
}
.routes-network-note b{ color:var(--dark-fg); font-weight:500; }

/* Плашка вокруг формулы убрана: белый бокс наезжал на серую панель ниже,
   а сам по себе ничего не добавлял — акцент держат кегль формулы и
   волосяная линия перед примером. Текст остаётся, рамка уходит. */
.vol-formula-card{
  padding:0; border:0; background:none; border-radius:0;
  margin-bottom:var(--s-6);
}

/* ============================================================
   РАСТРОВЫЕ ИЛЛЮСТРАЦИИ (пак от 05.09.2026)
   Контурные SVG заменены на editorial-иллюстрации. Фон в файлах —
   ровно #FBF8F5, тот же, что у секций, поэтому шва не видно и альфа
   не нужна. Размеры проставлены в разметке, чтобы не было скачка вёрстки.
   ============================================================ */
.adv-art{ display:block; width:100%; height:auto; margin-bottom:var(--s-5); }
.ps-ico{ display:block; width:132px; height:132px; margin:0 auto var(--s-5); }
.cargo-ico{ display:block; width:96px; height:96px; margin-bottom:var(--s-4); }
@media (max-width:767px){
  .ps-ico{ width:112px; height:112px; }
  .cargo-ico{ width:80px; height:80px; }
}

/* Волосяная линия над блоками преимуществ и нумерация 01–03 убраны:
   иллюстрация сама открывает блок, а линия под ней читалась как продолжение
   линии земли на картинке — две горизонтали подряд без смысла. */
.adv-item, .adv-layout > .adv-item{ border-top:0; padding-top:0; }
.adv-idx{ display:none; }

/* Фото 737 в hero убрано — на его месте работает дуга траектории.
   На концах дуги силуэты борта, развёрнутые по касательной:
   слева набор высоты, справа снижение. */
.hero-jet{ color:var(--dark-fg); opacity:.9; }

/* Силуэты сделаны легче: меньше кегль и ниже плотность — в hero они
   работают как метки на траектории, а не как самостоятельная графика. */
.hero-jet{ opacity:.72; }

/* Линия под иллюстрацией — это border-bottom самой картинки (правило .adv-art
   выше), а не разделитель блока. Убираем: она читалась как остаток линии земли,
   которую и просили убрать из графики. */
.adv-art{ border-bottom:0; padding-bottom:0; margin:0 0 var(--s-5); }

/* ============================================================
   РЯБЬ НА ТЁМНЫХ СЕКЦИЯХ УБРАНА
   --lit-scan рисовал горизонтальные полосы через каждые 4px
   (repeating-linear-gradient). На больших тёмных плоскостях это читалось
   как рябь и муарило при прокрутке. Полосы отключены; зерно и световые
   градиенты остаются — они дают глубину без полосатости.
   ============================================================ */
:root{ --lit-scan: none; }

/* ============================================================
   СХЕМА ПЛЕЧА — растровые узлы вместо SVG
   Пять картинок в ряд, соединители и скоба охвата рисуются вёрсткой.
   Так три режима (a2a / d2a / d2d) переключаются классами, а не
   тремя комплектами графики.
   ============================================================ */
.leg-row{
  display:grid; grid-template-columns:repeat(5,1fr);
  align-items:start; gap:var(--s-2); position:relative;
}
.leg-node{ display:flex; flex-direction:column; align-items:center; gap:var(--s-3); position:relative; }
.leg-pic{
  display:block; width:132px; height:132px; max-width:100%;
  transition:opacity var(--dur-2) var(--ease-out), filter var(--dur-2) var(--ease-out);
}
.leg-name{ font-size:var(--t-small); font-weight:500; color:var(--fg-head); text-align:center; }

/* Соединитель между узлами: наземное плечо сплошное, воздушное пунктиром. */
.leg-node::after{
  content:""; position:absolute; top:66px; left:calc(50% + 76px); right:calc(-50% + 76px);
  border-top:1.5px solid var(--border-strong);
}
.leg-node:last-child::after{ display:none; }
/* Борт находится между двумя терминалами — оба подхода к нему воздушные. */
.leg-node[data-node="terminal-a"]::after,
.leg-node[data-node="aircraft"]::after{
  border-top-style:dashed; border-top-width:1.5px;
}

/* Непокрытый узел: не «не загрузилось», а «этот участок вы берёте на себя». */
.leg-node:not(.is-covered) .leg-pic{ opacity:.32; filter:grayscale(1); }
.leg-node:not(.is-covered) .leg-name{ color:var(--fg-faint); }

/* Скоба охвата — под рядом, ничего не пересекает. */
.leg-coverage{ position:relative; margin-top:var(--s-7); padding-top:var(--s-5); }
.leg-coverage-bar{
  position:absolute; top:0; height:8px; border-radius:4px;
  background:var(--coral); opacity:.85;
  transition:left var(--dur-3) var(--ease-out), right var(--dur-3) var(--ease-out);
}
[data-schema-current="a2a"] .leg-coverage-bar{ left:20%; right:20%; }
[data-schema-current="d2a"] .leg-coverage-bar{ left:0;   right:20%; }
[data-schema-current="d2d"] .leg-coverage-bar{ left:0;   right:0;   }
.schema-coverage-label{ display:block; font-size:var(--t-micro); letter-spacing:.08em;
  text-transform:uppercase; color:var(--coral); }
[data-schema-current="a2a"] .schema-coverage-label{ text-align:center; }
[data-schema-current="d2a"] .schema-coverage-label{ text-align:left; }

@media (max-width:900px){
  .leg-row{ grid-template-columns:repeat(2,1fr); gap:var(--s-6); }
  .leg-node::after{ display:none; }
  .leg-pic{ width:112px; height:112px; }
}
@media (max-width:520px){ .leg-row{ grid-template-columns:1fr; } }

/* Карточка схемы была чисто белой, а у иллюстраций фон запечён бумажным
   #FBF8F5 — под каждым узлом проступал светлый квадрат. Карточку переводим
   на бумагу: шов исчезает, и схема встаёт в один тон с остальной графикой. */
.schema-wrap{ background:var(--paper); }

/* Разделитель «×» между логотипами убран во всех трёх местах: шапка,
   мобильное меню и юрблок под формой. Локап держится промежутком. */
.brand-x{ display:none; }

/* ============================================================
   ВЕРТИКАЛЬНЫЙ РИТМ — пять мест, где текст упирался в следующий блок
   Найдено сплошным прогоном страницы: замерялся зазор между соседними
   элементами одной колонки. Всё, что меньше 10px, — брак.
   ============================================================ */

/* 1. Заявка: лид стоял вплотную к H2 (0px) и переносился под самым заголовком. */
#request .section-intro h2{ margin-bottom:var(--s-4); }
#request .section-intro .lead{ margin-top:0; }

/* 2. Преимущества: пояснение к ставке упиралось в ссылку «Оставить заявку» (0px). */
.adv-rate-note{ margin-bottom:var(--s-5); }

/* 3. Варианты доставки: заголовок варианта упирался в его описание (0px). */
#service-levels h4 + .desc,
#service-levels .desc{ margin-top:var(--s-3); }

/* 4. Hero: подзаголовок формы стоял в 8px от заголовка — мало для этой пары. */
.hf-title{ margin-bottom:var(--s-3); }

/* 5. Форма: подпись поля «Кто везёт…» прилипала к строке переключателей (6px). */
.field-label + .calc-radio-row{ margin-top:var(--s-3); }

/* В секции заявки контейнер называется .request-head — правило на .section-intro
   его не касалось, и лид так и стоял вплотную к заголовку. */
.request-head h2{ margin-bottom:var(--s-4); }
.request-head .lead{ margin-top:0; max-width:64ch; }

/* Панель обмера начиналась ровно на нижней границе шапки секции — текст
   упирался в её край. Отделяем блоком воздуха. */
.vol-panel{ margin-top:var(--s-10); }

/* ============================================================
   МОБИЛЬНАЯ ДОВОДКА (прогон на 375 и 768)
   ============================================================ */
@media (max-width:767px){
  /* Плашка «РАСЧЁТНЫЙ» позиционируется абсолютно и на узком экране
     вылезала за правый край окна (342..412 при ширине 375). */
  .vol-stamp{ max-width:calc(100vw - 32px); white-space:normal; text-align:center; }

  /* Пилюли допуслуг переносились одной длинной строкой. */
  .addon-pill{ max-width:100%; white-space:normal; }

  /* Тач-цели: минимум 44px по высоте — рекомендация для пальца.
     Чекбоксы согласия были 18×18, ссылки в мелком тексте — 19px. */
  .checkbox-row{ min-height:44px; align-items:center; }
  .checkbox-row input[type="checkbox"]{ width:24px; height:24px; flex:0 0 24px; }
  .checkbox-row label{ padding-block:10px; }
  .req-legal a, .checkbox-row a, .hero-form a{
    display:inline-block; padding-block:6px;
  }
  /* Телефон в мобильном меню был строкой в 21px — цель для пальца мала. */
  .header-phone{ min-height:44px; display:inline-flex; align-items:center; }

  /* Ползунки обмера: дорожка 6px, палец не попадает. Расширяем зону
     нажатия, не меняя вид дорожки. */
  input[type="range"]{ height:44px; background:transparent; }
  input[type="range"]::-webkit-slider-runnable-track{ height:6px; border-radius:3px; }
  input[type="range"]::-webkit-slider-thumb{ margin-top:-11px; }
}

/* Правило min-height развернуло телефон прямо в шапке на 375 — правая группа
   уехала за край окна. В шапке ниже 768 телефона быть не должно: он есть
   в бургер-меню, там же ему и увеличенная тач-цель. */
@media (max-width:767px){
  .site-header .header-phone{ display:none; }
  .mobile-menu .header-phone,
  .mobile-menu a[href^="tel:"]{ min-height:44px; display:inline-flex; align-items:center; }
}

/* Штамп «РАСЧЁТНЫЙ» висел с right:-4px у правой колонки — на узком экране
   выходил за край окна. Прижимаем внутрь. */
@media (max-width:900px){
  .vol-stamp{ right:0; left:auto; }
}
/* Плейсхолдеры вида {{ТАРИФ_СТРАХОВАНИЯ}} — длинные неразрывные токены,
   на 375 они распирали пилюлю за край. Разрешаем перенос внутри токена. */
[data-placeholder]{ overflow-wrap:anywhere; word-break:break-word; }

/* Штамп «РАСЧЁТНЫЙ»: правило выше сдвигало его вбок на всю собственную
   ширину (translate(100%)) — на узком экране он уезжал за край окна.
   Возвращаем на место над столбцом, как на десктопе. */
@media (max-width:900px){
  .vol-stamp{
    top:-30px; left:50%; right:auto;
    transform:translateX(-50%); white-space:nowrap; max-width:none;
  }
}

/* Плейсхолдеры набраны моноширинным с white-space:nowrap — на 375 длинный
   токен распирал пилюлю за край окна. Разрешаем перенос на узких экранах:
   до подстановки реальных данных вёрстка не должна ломаться. */
@media (max-width:900px){
  [data-placeholder]{ white-space:normal; overflow-wrap:anywhere; }
}

/* ============================================================
   СПИННЕР КНОПКИ — постоянно крутился на странице
   У .btn-spinner не было правила скрытия по умолчанию: кольцо
   отрисовывалось всегда и вращалось бесконечно. Плюс position:absolute
   без relative на кнопке — спиннер всплывал к ближайшему позиционированному
   предку и висел посреди формы, а не на кнопке. Отсюда «форма троит».
   ============================================================ */
.btn-spinner{ display:none; }
.btn-primary{ position:relative; }
.btn-primary.is-loading .btn-spinner{ display:flex; }

/* Процесс переведён на четыре шага по образцу страницы корреспонденции
   «Москва Карго»: правка от заказчика (письмо от 15.09.2026, п.9). */
@media (min-width:1024px){
  .process-schema--4{ grid-template-columns:repeat(4,1fr); }
}

/* Офисы в Москве — правка заказчика (письмо от 15.09.2026, п.3).
   Врезку про сроки заменил блок с точками приёма и контактами. */
.hero-offices{ display:grid; gap:var(--s-5); margin-top:var(--s-7); }
@media (min-width:720px){ .hero-offices{ grid-template-columns:repeat(3,1fr); gap:var(--s-6); } }
.office{ display:flex; flex-direction:column; gap:4px; padding-top:var(--s-4);
  border-top:1px solid rgba(255,255,255,.16); }
.office-code{ font-size:var(--t-micro); letter-spacing:.14em; color:var(--yellow); }
.office-name{ font-family:var(--font-head); font-weight:500; font-size:var(--t-h5); color:var(--dark-fg); }
.office-note{ font-size:var(--t-small); line-height:1.5; color:var(--dark-fg-muted); }
.office-phone{ font-family:var(--font-head); font-weight:500; font-size:var(--t-h5);
  color:var(--dark-fg); text-decoration:none; }
.office-phone:hover{ color:var(--yellow); }
.office-mail{ font-size:var(--t-small); color:var(--dark-fg-muted); }

/* Три секции скрыты по правке заказчика (письмо от 15.09.2026, «всё остальное
   удалить, лишнее»): «Какие грузы принимаем», «Платный вес», «Где принимаем
   груз». Разметка сохранена — чтобы вернуть, достаточно снять атрибут hidden
   с нужной секции в index.html. */
section[hidden]{ display:none !important; }



/* «Как работает сервис Победа → UTG-Express»: шапка секции была ограничена
   720px при доступных 1160 — текст шёл узкой колонкой, а четыре шага под ним
   занимали всю ширину. Содержимое заполняет контейнер; сам контейнер
   остаётся общей ширины, как у остальных секций. */
@media (min-width:1024px){
  #process .section-intro{ max-width:none; }
  #process .section-intro .lead{ max-width:72ch; }
}

/* Блоки со ставками и перечнем направлений скрыты по правке заказчика:
   в секции остаётся заголовок «Более 100 внутренних и зарубежных направлений»
   и карта сети. Разметка сохранена — вернуть можно, сняв атрибут hidden. */
.rates-block[hidden], .net-block[hidden]{ display:none !important; }


/* После удаления блока «Принимаем к отправке» в сетке преимуществ осталось
   три элемента из четырёх — четвёртая колонка пустовала, и содержимое
   не добирало до правого края (заканчивалось на 1004 при границе 1300).
   Сетка строится по фактическому числу блоков. */
@media (min-width:1024px){
  .adv-layout{ grid-template-columns:repeat(3,1fr); }
}



/* В правиле #routes фон был зашит литералом #2A1036 мимо токенов — секция
   оставалась фиолетовой, пока остальные перешли на синий. Возвращаем на токен. */
#routes{ background:var(--dark-bg-alt); }


/* ============================================================
   ФОН HERO — борт «Победы»
   Официальный снимок с совместной страницы pobeda.utg-express.ru.
   Затемнение в синем логотипа «Победы» #14A0E6, а не в фиолетовом.
   Поверх фирменного синего — более глубокий слой того же тона #06304A:
   чистый #14A0E6 при нужной плотности даёт контраст около 2,9:1,
   белый текст и жёлтые заголовки на нём не читаются.
   Кадр подобран так, чтобы борт попал в полосу между текстом и формой.
   ============================================================ */
#hero{
  background-image:
    linear-gradient(100deg,
      rgba(4,34,53,.93) 0%,
      rgba(4,34,53,.88) 28%,
      rgba(4,34,53,.62) 50%,
      rgba(4,34,53,.48) 100%),
    linear-gradient(100deg,
      rgba(20,160,230,.30) 0%,
      rgba(20,160,230,.26) 40%,
      rgba(20,160,230,.20) 100%),
    url("assets/hero-pobeda.webp");
  background-size:cover, cover, 118% auto;
  background-position:center, center, 30% 46%;
  background-repeat:no-repeat;
}
@media (max-width:1023px){
  /* На мобиле текст идёт во всю ширину — шторка разведена по вертикали:
     плотная сверху, прозрачнее внизу, там и читается борт. */
  #hero{
    background-image:
      linear-gradient(180deg,
        rgba(4,34,53,.93) 0%,
        rgba(4,34,53,.88) 42%,
        rgba(4,34,53,.70) 72%,
        rgba(4,34,53,.56) 100%),
      linear-gradient(180deg,
        rgba(20,160,230,.32) 0%,
        rgba(20,160,230,.26) 100%),
      url("assets/hero-pobeda.webp");
    background-size:cover, cover, 150% auto;
    background-position:center, center, 62% 88%;
  }
}

/* Пилюля-эйбрау в hero заменена заголовком: правка заказчика.
   Это подзаголовок над H1, поэтому кегль меньше заголовка,
   но крупнее лида и без декоративной плашки. */
.hero-kicker{
  font-family:var(--font-head); font-weight:500;
  font-size:clamp(1.0625rem, .95rem + .45vw, 1.375rem);
  line-height:1.3; color:var(--dark-fg);
  margin:0 0 var(--s-5); max-width:30ch;
}
@media (max-width:767px){ .hero-kicker{ max-width:none; margin-bottom:var(--s-4); } }

/* Заголовок над H1 и сам H1 — одним кеглем и одним цветом: правка заказчика.
   Теперь это единый заголовочный блок, а не подзаголовок плюс заголовок.
   Значения взяты от .hero h1, чтобы при изменении одного менялись оба. */
.hero-kicker{
  font-size:clamp(1.5rem, 1.18rem + 1.02vw, 2rem);
  font-weight:500; line-height:1.25;
  color:var(--yellow);
  max-width:24ch; margin:0 0 var(--s-4);
}
@media (max-width:767px){ .hero-kicker{ max-width:none; } }

/* Два заголовка hero сводятся в один блок: общая мера строки, одинаковый
   межстрочный ритм, запрет разрыва «UTG-Express» и выровненный зазор.
   До этого верхний заголовок ломался на «UTG-» / «Express», строки были
   рваными, и блоки читались как два случайных пятна. */
.hero-kicker, .hero h1{
  max-width:21ch;
  line-height:1.22;
  text-wrap:balance;
  margin:0;
}
.hero-kicker{ margin-bottom:var(--s-7); }
.hero h1{ margin-bottom:var(--s-8); }
.nowrap{ white-space:nowrap; }
@media (max-width:767px){
  .hero-kicker, .hero h1{ max-width:none; }
  .hero-kicker br{ display:none; }
  .hero-kicker{ margin-bottom:var(--s-5); }
}

/* В юрблоке под формой явно назван совместный сервис и добавлены
   ссылки на оферту и правила UTG-Express (PDF, открываются в новой вкладке). */
.f-joint{
  font-family:var(--font-head); font-weight:500;
  font-size:var(--t-body); color:var(--dark-fg);
  margin:0 0 var(--s-4);
}
.f-docs{ display:flex; flex-direction:column; gap:var(--s-2); margin-top:var(--s-4); }
.f-docs a{
  font-size:var(--t-small); line-height:1.5;
  color:var(--dark-fg-muted); text-decoration:underline;
  text-underline-offset:3px; text-decoration-thickness:1px;
}
.f-docs a:hover{ color:var(--yellow); }

/* ============================================================
   СЕКЦИЯ НАПРАВЛЕНИЙ — в синий логотипа «Победы»
   #14A0E6 снят с pobeda.svg. На нём приглушённый серо-сиреневый текст
   не читался, поэтому лид и подписи карты переведены на белый с
   прозрачностью, а не на серый.
   ============================================================ */
#routes{ background:#14A0E6 !important; }
#routes h2, #routes .section-numeral{ color:#fff; }
#routes .section-numeral .n{ color:var(--yellow); }
#routes .section-intro .lead,
#routes p{ color:rgba(255,255,255,.88) !important; }

/* Карта на синем: белые линии держат контраст, хаб остаётся жёлтым */
#routes .ru-network{ color:rgba(255,255,255,.55); }
#routes .network-base path{ stroke:rgba(255,255,255,.45); }
#routes .network-graticule path{ stroke:rgba(255,255,255,.18); }
#routes .network-arcs path{ stroke:rgba(255,255,255,.75); }
#routes .pt-dot{ fill:#fff; }
#routes .pt--hub .pt-dot{ fill:var(--yellow); }
#routes .pt--anchor .pt-dot, #routes .pt--to-only .pt-dot{ fill:var(--coral); }
#routes .pt-label{ fill:rgba(255,255,255,.8); }


/* ============================================================
   ФОН СЕКЦИИ ЗАЯВКИ — борт «Победы» на закате
   Затемнение в синем логотипа «Победы» #14A0E6, а не в фиолетовом.
   Поверх фирменного синего идёт более глубокий слой того же тона
   (#06304A) — чистый #14A0E6 при нужной плотности даёт контраст
   белого текста около 2,9:1, что ниже порога читаемости.
   ============================================================ */
#request{
  background-image:
    linear-gradient(180deg,
      rgba(6,48,74,.80) 0%,
      rgba(6,48,74,.68) 35%,
      rgba(6,48,74,.66) 70%,
      rgba(6,48,74,.82) 100%),
    linear-gradient(180deg,
      rgba(20,160,230,.42) 0%,
      rgba(20,160,230,.34) 50%,
      rgba(20,160,230,.44) 100%),
    url("assets/footer-pobeda.webp") !important;
  background-size:cover, cover, cover !important;
  background-position:center, center, center 42% !important;
  background-repeat:no-repeat !important;
}
/* Юрблок снова без собственного фона — он лежит на фоне секции. */
.req-legal{
  background:none;
  padding:var(--s-9) 0 0;
  border-top:1px solid rgba(255,255,255,.16);
  border-radius:0;
  margin-top:var(--s-11);
}
.req-legal .brand-logo{ filter:brightness(0) invert(1); }

/* ============================================================
   ГЕОГРАФИЯ ДОСТАВКИ — плитки направлений
   Список маршрутной сети «Победы» вместо декоративной карты:
   карта показывала 29 точек, плитки дают все 51 и читаются списком.
   Лежат на синей секции, поэтому плитки — полупрозрачный белый
   с обводкой, а не сплошная заливка.
   ============================================================ */
.geo{ margin-top:var(--s-9); }
.geo-group + .geo-group{ margin-top:var(--s-8); }
.geo-label{
  font-family:var(--font-mono); font-size:var(--t-micro);
  letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.72); margin:0 0 var(--s-4);
}
.geo-list{
  display:flex; flex-wrap:wrap; gap:var(--s-2);
  list-style:none; margin:0; padding:0;
}
.geo-chip{
  padding:7px 14px; border-radius:999px;
  border:1px solid rgba(255,255,255,.34);
  background:rgba(255,255,255,.10);
  color:#fff; font-size:var(--t-small); line-height:1.3;
  white-space:nowrap;
}
/* Москва — точка отправления, выделена жёлтым как хаб на карте */
.geo-chip--hub{
  background:var(--yellow); border-color:var(--yellow);
  color:var(--on-yellow); font-weight:500;
}
/* Зарубежные направления отделены тоном, а не другим цветом */
.geo-chip--world{ background:rgba(255,255,255,.04); border-style:dashed; }
.geo-note{
  margin-top:var(--s-7); max-width:78ch;
  font-size:var(--t-small); line-height:1.55;
  color:rgba(255,255,255,.78);
}
@media (max-width:767px){
  .geo-chip{ padding:6px 12px; font-size:var(--t-micro); }
  .geo-list{ gap:6px; }
}

/* Заголовки hero занимали 476px при колонке в 663 — ограничение в 21ch
   резало их вдвое и гнало лишние строки. Растягиваем по ширине колонки,
   блок контактов под ними уже занимает все 663. */
.hero-kicker, .hero h1{ max-width:none; }
@media (min-width:1024px){
  .hero-kicker, .hero h1{ max-width:100%; }
}

/* Шапка секции направлений и фото борта — в две колонки: текст слева,
   снимок справа, как на разметке заказчика. Ниже 1024 фото уходит под текст. */


.routes-photo{ margin:0; }
.routes-photo img{
  display:block; width:100%; height:auto;
  aspect-ratio:16/10;
  object-fit:cover;
  object-position:58% 34%;
  border-radius:var(--r-xl);
  border:1px solid rgba(255,255,255,.28);
}
/* Исходный кадр 16:9 с бортом в правом верхнем углу: половину занимали
   пустые облака, а фото было на 90px выше текстовой колонки. Кадрируем
   на самолёт и выравниваем пропорции под соседнюю колонку. */
@media (max-width:1023px){
  .routes-photo img{ aspect-ratio:16/9; object-position:58% 38%; }
}

/* Фото выступало на 37px выше заголовка (колонки центрировались по высоте)
   и имело разные зазоры: 64 слева, 48 снизу, 40 справа. Выравниваем по
   верхней линии и задаём одинаковый отступ со всех сторон. */


/* На мобиле фото выходило за экран: в грид-колонке элемент по умолчанию
   не сжимается ниже собственной ширины картинки (1238px), и фигура
   получала 393px при контейнере 343. Разрешаем сжатие. */
.routes-head, .routes-photo{ min-width:0; }
.routes-photo img{ max-width:100%; }

/* Декоративные дуги с самолётиками убраны из hero по правке заказчика:
   на фотографии реального борта они читались как лишний слой. */
.hero-arcs, .hero-jet{ display:none !important; }


/* ============================================================
   НАПРАВЛЕНИЯ: шапка в две колонки
   Слева заголовок, лид и пункт отправления — раньше под текстом
   оставалась пустота в четверть экрана. Справа фото борта.
   У снимка небо почти совпадает по тону с фоном секции, поэтому
   карточке нужна собственная опора: светлая подложка и тень,
   иначе края растворяются и фото «плавает».
   ============================================================ */
.routes-head{
  display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s-8);
  align-items:start;
}
@media (min-width:1024px){
  .routes-head{ grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); column-gap:48px; }
}
.routes-head .section-intro{ margin-bottom:var(--s-9); }
.routes-head .geo-group{ margin-top:0; }

.routes-photo{
  margin:0; border-radius:var(--r-xl); overflow:hidden;
  background:rgba(255,255,255,.14);
  padding:8px;
  box-shadow:0 20px 48px rgba(3,32,49,.30);
}
.routes-photo img{
  display:block; width:100%; max-width:100%; height:auto;
  aspect-ratio:16/10; object-fit:cover; object-position:56% 40%;
  border:0; border-radius:calc(var(--r-xl) - 6px);
}
.geo{ margin-top:var(--s-10); }
@media (max-width:1023px){
  .routes-photo img{ aspect-ratio:16/9; object-position:58% 40%; }
}

/* Фото уменьшено на 10% по правке заказчика. Сжимается от левого края —
   правая граница остаётся на линии контента, по которой выровнена
   вся остальная секция. */
@media (min-width:1024px){
  .routes-photo{ width:90%; margin-left:auto; }
}

/* Гербы настраивались под фиолетовый фон: прозрачность 0.32 и осветление
   до 1.6 делали их почти невидимыми на синем. На фирменном #14A0E6
   фон светлее, поэтому гербы, наоборот, нужно притемнять, а не осветлять. */
#routes .n-arm{
  opacity:.72;
  filter:grayscale(1) contrast(1.1) brightness(.35);
}
#routes .n-item:hover .n-arm,
#routes .n-item:focus-visible .n-arm,
#routes .n-item.is-hl .n-arm{ opacity:1; filter:none; }


/* ============================================================
   НАПРАВЛЕНИЯ: содержимое работает цветом, без затемняющей плашки
   На ярком #14A0E6 светлый текст даёт всего 2,9:1 — поэтому основной
   текст тут не светлый, а глубокий синий того же тона #06304A: он даёт
   4,7:1 и читается как часть фирменной палитры, а не как чужая накладка.
   Белый остаётся для крупных заголовков, жёлтый — только для цифр ставки,
   где кегль достаточен.
   ============================================================ */
#routes .rates-block,
#routes .net-block{
  background:none; border:0; border-radius:0; padding:0;
  margin-top:var(--s-10);
}
#routes .block-label{ color:#06304A; opacity:.78; }
#routes .p-city, #routes .n-name{ color:#06304A; }
#routes .p-val .num{ color:#fff; }
#routes .p-val .cur{ color:rgba(255,255,255,.86); }
#routes .p-min{ color:#06304A; opacity:.68; }
#routes .rates-note{ color:#06304A; opacity:.80; }
#routes .p-iata, #routes .n-iata{ color:#F5D000; }
#routes .n-note{ color:#7A2E12; }
#routes .p-row{ border-color:rgba(6,48,74,.22); }
#routes .n-item{ border-color:rgba(6,48,74,.18); }
#routes .block-label, #routes .rates-note{ max-width:72ch; }

/* Прозрачности давали непредсказуемый итог поверх синего — задаём
   плотные цвета. Жёлтый на #14A0E6 даёт 1,93:1 и для мелкого текста
   не годится, поэтому коды аэропортов и ставки тоже в глубоком синем. */
#routes .block-label{ color:#083A59 !important; opacity:1; }
#routes .p-iata, #routes .n-iata{ color:#06304A !important; }
#routes .p-val .num{ color:#06304A !important; }
#routes .p-val .cur{ color:#0B4A6F !important; }
#routes .p-min{ color:#0B4A6F !important; opacity:1; }
#routes .rates-note{ color:#083A59 !important; opacity:1; }
#routes .p-city, #routes .n-name{ color:#06304A !important; }
#routes .n-note{ color:#8A2F10 !important; }

/* ============================================================
   НАПРАВЛЕНИЯ: цветовое решение на синем, без плашек
   Карта рисуется скриптом и наследует currentColor. На ярком #14A0E6
   белые линии исчезают, поэтому вся графика переводится в глубокий
   синий того же тона — он читается как тень фирменного цвета.
   Акценты остаются прежние: жёлтый хаб Москвы, коралловые города
   «только доставка».
   ============================================================ */
#routes .ru-network{ color:#06304A; }
#routes .network-base path,
#routes .network-graticule path{ stroke:rgba(6,48,74,.38); }
#routes .network-arcs path{ stroke:rgba(6,48,74,.62); }
#routes .pt-dot{ fill:#06304A; }
#routes .pt--hub .pt-dot{ fill:var(--yellow); stroke:#06304A; stroke-width:2; }
#routes .pt--anchor .pt-dot,
#routes .pt--to-only .pt-dot{ fill:#8A2F10; }
#routes .pt-label{ fill:#06304A; }

/* Список городов: имя — глубокий синий, код — жёлтый на белой подложке
   не нужен, поэтому код тоже синий, но светлее — иерархия строится
   тоном, а не плашкой. */
#routes .n-city{ color:#06304A !important; }
#routes .n-iata{ color:#0B4A6F !important; }
#routes .n-note{ color:#8A2F10 !important; }

/* Города и коды — белым; гербы заливаются фирменным жёлтым, как прочие
   акценты сайта. Гербы растровые, поэтому цвет даётся фильтром:
   brightness(0) гасит исходные цвета в чёрный, дальше цепочка выводит
   его в #F5D000. */
#routes .n-city{ color:#fff !important; }
#routes .n-iata{ color:#fff !important; opacity:.82; }
#routes .n-arm{
  opacity:1;
  filter:brightness(0) saturate(100%) invert(78%) sepia(63%)
         saturate(1200%) hue-rotate(358deg) brightness(97%) contrast(96%);
}
#routes .n-item:hover .n-arm,
#routes .n-item:focus-visible .n-arm,
#routes .n-item.is-hl .n-arm{ filter:none; opacity:1; }

/* Локап «Победа → UTG-Express» заменён текстовым заголовком: стили
   под две бренд-плашки со стрелкой больше не нужны. */
.hero-lockup{
  display:block; font-family:var(--font-head); font-weight:500;
  font-size:var(--t-h5); line-height:1.35; color:var(--dark-fg);
  letter-spacing:0;
  white-space:normal;   /* перебивает nowrap выше: на телефонах строка обязана переноситься */
  text-wrap:pretty;
}

/* ============================================================
   ПОЛНЫЙ СПИСОК НАПРАВЛЕНИЙ — плитками, в текущей схеме
   Цвета по той же логике, что у списка городов выше: белый текст,
   жёлтый акцент, никаких заливок-плашек. Отличие зарубежных —
   пунктирная обводка, а не второй цвет.
   ============================================================ */
#routes .geo{ margin-top:var(--s-11); }
#routes .geo-group + .geo-group{ margin-top:var(--s-9); }
#routes .geo-label{
  font-family:var(--font-mono); font-size:var(--t-micro);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--yellow); margin:0 0 var(--s-4);
}
#routes .geo-list{
  display:flex; flex-wrap:wrap; gap:var(--s-2);
  list-style:none; margin:0; padding:0;
}
#routes .geo-chip{
  padding:7px 14px; border-radius:999px;
  border:1px solid rgba(255,255,255,.42);
  background:none;
  color:#fff; font-size:var(--t-small); line-height:1.3;
  white-space:nowrap;
}
#routes .geo-chip--world{ border-style:dashed; border-color:rgba(255,255,255,.34); }
#routes .geo-note{
  margin-top:var(--s-7); max-width:78ch;
  font-size:var(--t-small); line-height:1.55; color:rgba(255,255,255,.86);
}
@media (max-width:767px){
  #routes .geo-chip{ padding:6px 12px; font-size:var(--t-micro); }
  #routes .geo-list{ gap:6px; }
}

/* Метка группы — это <p>, и её перебивало раннее правило
   «#routes p { color: … !important }». Задаём вес явно. */
#routes .geo-label{ color:var(--yellow) !important; }
#routes .geo-note{ color:rgba(255,255,255,.86) !important; }

/* Зарубежные направления — тем же списком, что и российские.
   Сетка и плитка наследуются от .n-grid / .n-item, отличие только
   в подписи группы. */
#routes .n-group-label{
  font-family:var(--font-mono); font-size:var(--t-micro);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--yellow) !important; margin:var(--s-10) 0 var(--s-5);
}
#routes .n-grid--world{ margin-top:0; }

/* Гербы — в оригинальном виде: ни обесцвечивания, ни заливки.
   Отменяет и жёлтый фильтр, и прежнее приглушение под фиолетовый фон. */
#routes .n-arm{ filter:none !important; opacity:1 !important; }

/* ============================================================
   МОБИЛЬНЫЕ ФОНЫ — фото было не видно
   В hero шторка стояла 0,93 и кадр 150% со смещением вниз: снимок
   уходил под карточку формы, экран читался как сплошная заливка.
   Кадр переводится в cover по центру, плотность шторки снижена;
   сверху, где лежит заголовок, она остаётся высокой.
   ============================================================ */
@media (max-width:1023px){
  #hero{
    background-image:
      linear-gradient(180deg,
        rgba(4,34,53,.86) 0%,
        rgba(4,34,53,.74) 38%,
        rgba(4,34,53,.58) 68%,
        rgba(4,34,53,.72) 100%),
      linear-gradient(180deg,
        rgba(20,160,230,.26) 0%,
        rgba(20,160,230,.20) 100%),
      url("assets/hero-pobeda.webp") !important;
    background-size:cover, cover, cover !important;
    background-position:center, center, 62% 38% !important;
    background-attachment:scroll, scroll, scroll !important;
  }
  #request{
    background-size:cover, cover, cover !important;
    background-position:center, center, 55% 45% !important;
  }
}

/* Пункты меню в шапке заменены строкой о совместном сервисе.
   Это не ссылка, поэтому ведёт себя как подпись: не сжимается
   в ущерб логотипу и кнопке, на узких экранах скрывается. */
.header-claim{
  margin:0; flex:0 1 auto; min-width:0;
  font-size:var(--t-small); line-height:1.3;
  color:var(--dark-fg); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.site-header.is-stuck .header-claim{ color:var(--fg-head); }
@media (max-width:1100px){ .header-claim{ display:none; } }

/* Фон секции направлений — #2da0e6 по правке заказчика. */
#routes{ background:#2DA0E6 !important; }

/* ============================================================
   КАРТА: контур и маршруты белым, точки, коды и подсветка — жёлтым
   ============================================================ */
#routes .ru-network{ color:#fff; }
#routes .network-base path{ stroke:rgba(255,255,255,.78); }
#routes .network-graticule path{ stroke:rgba(255,255,255,.26); }
#routes .network-arcs path{ stroke:rgba(255,255,255,.85); }

#routes .pt-dot{ fill:var(--yellow); }
#routes .pt--hub .pt-dot, #routes .hub-dot{ fill:var(--yellow); stroke:#fff; stroke-width:2; }
#routes .pt--anchor .pt-dot, #routes .pt--to-only .pt-dot{ fill:var(--yellow); }
#routes .pt-label{ fill:var(--yellow); font-weight:500; }
#routes .hub-label{ fill:#fff; }

/* Название города под кодом */
#routes .pt-name{
  fill:#fff; font-family:var(--font-body);
  font-size:9px; letter-spacing:.01em;
}

/* Подсветка маршрута при наведении — жёлтым */
#routes .network-arcs path.is-hl,
#routes .network-arcs path.is-active{ stroke:var(--yellow); stroke-width:2.2; }
#routes .pt.is-hl .pt-dot, #routes .pt.is-active .pt-dot{ fill:var(--yellow); r:5; }
#routes .pt.is-hl .pt-label, #routes .pt.is-active .pt-label{ fill:var(--yellow); }

/* Названия городов на карте скрыты по умолчанию — при плотной сетке
   точек подписи наслаивались и перекрывали коды. Показываются при
   наведении на точку и при подсветке из списка городов. */
#routes .pt-name{
  opacity:0;
  transition:opacity var(--dur-2) var(--ease-out);
  pointer-events:none;
}
#routes .pt:hover .pt-name,
#routes .pt:focus-within .pt-name,
#routes .pt.is-hl .pt-name,
#routes .pt.is-active .pt-name{ opacity:1; }

/* ============================================================
   СЕКЦИЯ НАПРАВЛЕНИЙ — компактнее по вертикали
   Было 1324px: 288 съедали вертикальные поля (144 сверху и снизу)
   и 720 — карта во всю ширину контейнера. Поля урезаны, карта
   ограничена по ширине и центрирована: пропорции сохраняются,
   высота падает пропорционально.
   ============================================================ */
#routes{ padding-top:68px !important; padding-bottom:68px !important; }
#routes .routes-map-wrap{
  max-width:700px; margin-inline:auto; margin-top:var(--s-6);
}
#routes .section-intro{ margin-bottom:0; }
@media (max-width:767px){
  #routes{ padding-top:56px !important; padding-bottom:56px !important; }
  #routes .routes-map-wrap{ max-width:none; }
}

/* Шапка секции направлений: кегли уменьшены — 218px шапки при карте
   в 520 были несоразмерны. Цифра с 68 до 44, заголовок с 32 до 24,
   лид с 16 до 15; межстрочный ритм подтянут. */
#routes .section-numeral{
  font-size:44px !important; line-height:1.05; margin-bottom:6px !important;
}
#routes h2{
  font-size:clamp(1.25rem, 1.08rem + .52vw, 1.5rem) !important;
  line-height:1.22; margin-bottom:8px !important; max-width:34ch;
}
#routes .section-intro .lead{
  font-size:.9375rem !important; line-height:1.5; max-width:62ch;
}

/* Согласие под формой: три ссылки на документы одним стилем — подчёркивание
   с отступом, без коралловых плашек от плейсхолдеров. */
.checkbox-row label a{
  color:inherit; text-decoration:underline;
  text-underline-offset:3px; text-decoration-thickness:1px;
  text-decoration-color:rgba(255,255,255,.45);
}
.checkbox-row label a:hover{ text-decoration-color:var(--yellow); color:var(--yellow); }
.checkbox-row label{ line-height:1.5; }

/* ============================================================
   ПРОСМОТР ДОКУМЕНТОВ В МОДАЛЬНОМ ОКНЕ
   Ссылки на оферту, правила и политику открывают документ здесь же.
   Раньше они уводили в скачивание: на utg-express.ru стоит
   Content-Disposition: attachment, и клиент уходил с лендинга.
   ============================================================ */
.docmodal{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:var(--s-6); }
.docmodal[hidden]{ display:none; }
.docmodal-backdrop{ position:absolute; inset:0; background:rgba(4,20,32,.72); backdrop-filter:blur(2px); }
.docmodal-panel{
  position:relative; z-index:1;
  width:min(980px, 100%); height:min(86vh, 900px);
  display:flex; flex-direction:column;
  background:var(--white); border-radius:var(--r-xl); overflow:hidden;
  box-shadow:0 30px 80px rgba(3,20,34,.45);
}
.docmodal-head{
  display:flex; align-items:center; gap:var(--s-5);
  padding:var(--s-5) var(--s-6); border-bottom:1px solid var(--border);
  background:var(--paper);
}
.docmodal-title{
  margin:0; flex:1 1 auto; min-width:0;
  font-family:var(--font-head); font-weight:500; font-size:var(--t-h5);
  color:var(--fg-head); line-height:1.3;
}
.docmodal-actions{ display:flex; align-items:center; gap:var(--s-4); flex:0 0 auto; }
a.docmodal-open{ font-size:var(--t-small); color:var(--fg-muted); text-decoration:underline; text-underline-offset:3px; white-space:nowrap; }
a.docmodal-open:hover{ color:var(--fg-head); }
.docmodal-close{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border:0; border-radius:50%;
  background:transparent; color:var(--fg-head); cursor:pointer;
}
.docmodal-close:hover{ background:var(--p-50); }
.docmodal-body{ position:relative; flex:1 1 auto; min-height:0; display:flex; flex-direction:column; background:var(--p-50); }
.docmodal-frame{ flex:1 1 auto; width:100%; min-height:0; border:0; display:block; background:var(--p-50); }
.docmodal-fallback{
  flex:0 0 auto; margin:0; padding:var(--s-4) var(--s-6);
  text-align:center; font-size:var(--t-small); color:var(--fg-muted);
  background:var(--paper); border-top:1px solid var(--border);
}
.docmodal-fallback a{ color:var(--fg-head); text-decoration:underline; text-underline-offset:3px; }
.docmodal-loading{
  position:absolute; inset:auto 0 0 0; top:0; z-index:2;
  display:none; align-items:center; justify-content:center; gap:var(--s-4);
  background:var(--p-50); color:var(--fg-muted); font-size:var(--t-small);
}
.docmodal.is-loading .docmodal-loading{ display:flex; }
.docmodal-spin{
  width:18px; height:18px; border-radius:50%;
  border:2px solid var(--border); border-top-color:var(--fg-head);
  animation:docmodal-spin .8s linear infinite;
}
@keyframes docmodal-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .docmodal-spin{ animation:none; } }
body.is-docmodal{ overflow:hidden; }

@media (max-width:767px){
  .docmodal{ padding:0; }
  .docmodal-panel{ width:100%; height:100%; border-radius:0; }
  .docmodal-head{ padding:var(--s-4) var(--s-5); }
  .docmodal-title{ font-size:var(--t-body); }
  a.docmodal-open{ display:none; } /* на мобиле ведёт нижняя ссылка */
}

/* ============================================================
   АДАПТИВ: финальная калибровка под все классы устройств
   Телефоны 320–600 · планшеты 601–1023 · ноутбуки/ПК 1024–1919 ·
   большие панели и ТВ 1920+.
   Правила ниже опираются не только на ширину окна, но и на ширину
   самого блока (@container) — колонка в hero узкая даже на большом
   экране, и сетка внутри неё должна реагировать на себя, а не на окно.
   ============================================================ */

/* --- 1. Карточка заявки в hero: поля по ширине карточки, не окна --- */
.hero-form{ container-type:inline-size; container-name:hfcard; }
@container hfcard (max-width:420px){
  /* В одну колонку уходят только строки с длинным содержимым: списки
     городов и телефон. Короткая пара «Вес / Мест» остаётся рядом. */
  .hf-row:has(select), .hf-row:has(input[type="tel"]){ grid-template-columns:1fr; }
}
@container hfcard (max-width:300px){
  .hf-row{ grid-template-columns:1fr; }
}

/* --- 2. Контакты в hero: 3 колонки только если колонке хватает места --- */
.hero-copy{ container-type:inline-size; container-name:herocopy; }
@container herocopy (max-width:639px){
  .hero-offices{ grid-template-columns:repeat(2,1fr); }
  .hero-offices > :last-child{ grid-column:1 / -1; }
}
@container herocopy (max-width:379px){
  .hero-offices{ grid-template-columns:1fr; }
  .hero-offices > :last-child{ grid-column:auto; }
}

/* --- 3. Тач-цели: на пальцевых экранах контактные ссылки ≥44px --- */
@media (pointer:coarse){
  .office-mail, .office-phone{
    display:inline-block; padding-block:11px; margin-block:-11px;
  }
  .header-phone{
    display:inline-flex; align-items:center; padding-block:12px; margin-block:-12px;
  }
  .brand{ padding-block:8px; margin-block:-8px; }
  /* точки на карте маршрутов: невидимая зона нажатия 36px вместо 28px */
  .pt-hit{ r:18; }
}

/* --- 4. Подпись «только доставка» была 10px — ниже порога читаемости --- */
.n-to{ font-size:var(--t-micro); }

/* --- 5. Большие панели и телевизоры ---------------------------------
   Выше 1600px контент перестаёт расти и висит узкой колонкой посреди
   экрана. Поднимаем контейнер и кегль ступенями: на ТВ смотрят с 2–3 м,
   поэтому растёт и базовый шрифт (все токены типографики — в rem). */
@media (min-width:1600px){
  :root{ --container:1360px; --container-wide:1520px; }
}
@media (min-width:1920px){
  html{ font-size:17px; }
  :root{
    --container:1480px; --container-wide:1680px; --container-text:800px;
    --gutter:48px;
    --section-pad:116px; --section-pad-lg:164px; --section-pad-sm:76px;
  }
}
@media (min-width:2400px){
  html{ font-size:19px; }
  :root{
    --container:1760px; --container-wide:1960px; --container-text:880px;
    --gutter:64px;
    --section-pad:140px; --section-pad-lg:196px; --section-pad-sm:92px;
    --block-gap:64px; --card-pad:40px; --panel-pad:48px;
    --header-h:88px;
  }
}
@media (min-width:3200px){
  html{ font-size:22px; }
  :root{
    --container:2200px; --container-wide:2480px; --container-text:1000px;
    --gutter:80px;
    --section-pad:170px; --section-pad-lg:236px; --section-pad-sm:112px;
    --block-gap:80px; --card-pad:48px; --panel-pad:56px;
    --header-h:104px;
  }
}

/* --- 6. Низкие окна в ландшафте (телефон боком, 320–500px высоты) ---
   Hero занимал весь экран и прокручивался вслепую: фиксируем компактный
   вертикальный ритм, чтобы первый экран оставался обозримым. */
@media (max-height:520px) and (orientation:landscape){
  /* шапка липкая — отступ сверху обязан её учитывать, иначе заголовок уходит под неё */
  .hero{ padding-block:calc(var(--header-h) + var(--s-4)) var(--s-7); }
  .hero-inner{ gap:var(--s-6); }
  .hero-offices{ margin-top:var(--s-5); }
  .docmodal-panel{ height:100%; border-radius:0; }
  .docmodal{ padding:0; }
}

/* --- 7. Телевизоры и приставки ---------------------------------------
   Отличаем ТВ от большого монитора не шириной, а отсутствием курсора:
   браузеры Smart TV отдают hover:none и чаще всего 1920 CSS-пикселей
   при физических 4K. Смотрят с 2–3 метров — кегль и цели крупнее,
   управление с пульта — фокус обязан быть виден. */
@media (min-width:1600px) and (hover:none){
  html{ font-size:21px; }
  :root{
    --container:1560px; --container-wide:1760px;
    --gutter:56px;
    --header-h:96px;
  }
  :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
    outline-width:4px; outline-offset:4px;
  }
  .btn-primary, .btn-secondary{ min-height:64px; }
}

/* --- 8. Заголовки-числа не должны зависеть от удачи с веб-шрифтом ----
   «100+ направлений» был намертво 44px и в одну строку: на 320–375px
   и на подменном шрифте (если Geologica не догрузилась) строка уезжала
   за край. Кегль становится текучим, перенос разрешён. */
.section-numeral{ flex-wrap:wrap; }
#routes .section-numeral{
  font-size:clamp(30px, 8.4vw, 44px) !important;
}
@media (min-width:768px){
  #routes .section-numeral{ font-size:44px !important; }
}

/* --- 9. Карта маршрутов на планшетах и телефонах ---------------------
   Карта пряталась ниже 1024px, а кнопка «показать карту», которую ждёт
   скрипт ([data-show-map]), из разметки удалена — секция «100+
   направлений» на телефоне и планшете оставалась пустой полосой с одним
   заголовком. Показываем карту всегда; на узких экранах подписи точек
   нечитаемы, поэтому оставляем только сеть и укрупнённый узел Москвы. */
@media (max-width:1023px){
  .routes-map{ display:block; margin-top:var(--s-7); }
  .routes-map .pt-label, .routes-map .pt-name{ display:none; }
  .routes-map .hub-label{ font-size:16px; }
  #routes .pt-dot{ r:4.5; }
}
@media (max-width:640px){
  .routes-map .hub-label{ font-size:15px; }
  #routes .pt-dot{ r:5.5; }
}

/* --- 10. Форма заявки: контакты и согласие на узких экранах ----------
   Правило «.form-audience-company{1fr}» в @media 600px проигрывало по
   весу селектору body.audience-company … и не применялось: «Контактное
   лицо» и «Телефон» оставались в две колонки, маска телефона обрезалась. */
@media (max-width:600px){
  body.audience-company .form-audience-company,
  body.audience-company .form-audience-single{ grid-template-columns:1fr; }
}
/* Чекбокс согласия вставал по центру четырёхстрочного текста. Ставим его
   к первой строке, сохраняя 44px зону нажатия за счёт полей у подписи. */
@media (max-width:767px){
  .checkbox-row{ align-items:flex-start; }
  .checkbox-row input[type="checkbox"]{ margin-top:12px; }
}

/* --- 11. Верхняя форма: ошибка и подтверждение ----------------------- */
.hf-error{
  margin:0 0 var(--s-4); padding:10px 14px;
  background:#FDECEC; border:1px solid #F3C6C6; border-radius:var(--r-sm);
  font-size:var(--t-small); line-height:1.45; color:#8A1F1F;
}
.hf-error[hidden]{ display:none; }
.hf-success{ text-align:left; padding-top:var(--s-2); }
.hf-success[hidden]{ display:none; }
.hf-success-icon{ color:var(--green-ink); fill:none; stroke:currentColor; stroke-width:2.2; margin-bottom:var(--s-3); }
.hf-success h3{
  margin:0 0 var(--s-3); font-family:var(--font-head); font-weight:500;
  font-size:var(--t-h4); color:var(--fg-head);
}
.hf-success p{ margin:0 0 var(--s-3); font-size:var(--t-small); line-height:1.55; color:var(--fg-muted); }
.hf-success p:last-child{ margin-bottom:0; }
.hf-success-call a{
  color:var(--fg-head); font-weight:500; text-decoration:underline; text-underline-offset:3px;
}