/* =========================================================================
   КІНДРАТ-ТРАНС — дизайн-система

   Ідея інтерфейсу: товарно-транспортний документ.
   Клієнт перевізника щодня бачить CMR — бланк із пронумерованими графами,
   тонкими лініями, моноширинними даними у полях. Це його рідна мова.
   Сайт побудований як такий бланк: пронумеровані графи замість секцій,
   ліва службова колонка з метаданими, дані завжди моноширинним.

   Світла паперова база. Темні кадри — рідко і тільки там, де це кіно.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Wix+Madefor+Display:wght@400;500;600;700;800&family=Wix+Madefor+Text:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Archivo:wdth,wght@62..125,500..900&display=swap');

:root{
  /* папір і чорнило */
  --paper:#F2F1ED;
  --paper-2:#E9E7E1;
  --card:#FFFFFF;
  --ink:#101317;
  --ink-2:#2A2E34;
  --muted:#5B6068;
  --steel:#C9CCD1;
  --line:rgba(16,19,23,.14);
  --line-2:rgba(16,19,23,.07);
  --line-inv:rgba(242,241,237,.18);

  /* фірмовий */
  --red:#C8102E;
  --red-deep:#8E1220;

  --display:'Wix Madefor Display',-apple-system,'Segoe UI',sans-serif;
  --sans:'Wix Madefor Text',-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',monospace;
  --tech:'Archivo','Wix Madefor Display',sans-serif;

  --u:8px;
  --rail:132px;          /* ліва службова колонка */
  --nav:70px;
  /* одна крива на весь сайт: важкий розгін, довге гальмування */
  --e:cubic-bezier(.16,.72,.16,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.62;overflow-x:hidden;text-wrap:pretty;
  padding-bottom:64px}
body.locked{overflow:hidden;height:100vh}
img,video{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
/* ---------------------------------------------------------------
   ТИПОГРАФІКА
   --------------------------------------------------------------- */
.d1{font-family:var(--display);font-weight:800;letter-spacing:-.032em;line-height:.94;
  font-size:clamp(40px,8.4vw,124px);text-transform:uppercase}
.d2{font-family:var(--display);font-weight:800;letter-spacing:-.028em;line-height:1.0;
  font-size:clamp(28px,4.6vw,64px)}
.d3{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.1;
  font-size:clamp(20px,2.4vw,32px)}
.d1 em,.d2 em,.d3 em{font-style:normal;color:var(--red)}
.lede{font-size:clamp(16px,1.35vw,19px);line-height:1.72;color:var(--ink-2);max-width:58ch}
p{max-width:66ch}
.small{font-size:14px;line-height:1.68;color:var(--muted);max-width:60ch}
.k{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--muted)}
.val{font-family:var(--mono);font-size:15px;color:var(--ink)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
/* ---------------------------------------------------------------
   БЛАНК: графа = секція
   --------------------------------------------------------------- */
.sheet{max-width:1440px;margin:0 auto;padding:0 calc(var(--u)*4)}
.graf{position:relative;border-top:1px solid var(--line);
  display:grid;grid-template-columns:var(--rail) 1fr;gap:0}
.graf:first-of-type{border-top:0}
/* ліва службова колонка */
.graf-rail{position:relative;border-right:1px solid var(--line);
  padding:26px 18px 40px 0}
.graf-rail .no{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--red)}
.graf-rail .nm{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--muted);
  margin-top:10px;line-height:1.9}
.graf-rail .meta{margin-top:22px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  color:var(--steel);line-height:2.1}
.graf-body{padding:26px 0 72px 40px;min-width:0}
@media(max-width:960px){
  :root{--rail:0px}
  .sheet{padding:0 18px}
  .graf{grid-template-columns:1fr}
  .graf-rail{border-right:0;border-bottom:1px solid var(--line-2);
    padding:18px 0 14px;display:flex;gap:16px;align-items:baseline;flex-wrap:wrap}
  .graf-rail .nm{margin-top:0}
  .graf-rail .meta{display:none}
  .graf-body{padding:22px 0 52px}
}
/* ---------------------------------------------------------------
   НАВІГАЦІЯ
   --------------------------------------------------------------- */
.nav{position:fixed;top:0;left:0;right:0;height:var(--nav);z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 calc(var(--u)*4);background:rgba(242,241,237,.86);
  backdrop-filter:blur(14px);border-bottom:1px solid transparent;
  transition:border-color .5s var(--e),background .5s var(--e)}
.nav.stuck{border-color:var(--line)}
.nav .brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.nav .brand img{height:34px}
.nav .brand span{font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--muted);
  padding-left:14px;border-left:1px solid var(--line)}
.nav menu{display:flex;gap:2px;list-style:none;align-items:center}
.nav menu a{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-decoration:none;
  padding:10px 14px;color:var(--ink-2);transition:color .3s var(--e)}
.nav menu a:hover{color:var(--red)}
.nav menu a[aria-current]{color:var(--red)}
.nav .go{background:var(--ink);color:#fff!important;padding:12px 18px;margin-left:10px;
  transition:background .35s var(--e)}
.nav .go:hover{background:var(--red)}
.burger{display:none;background:none;border:0;cursor:pointer;padding:10px}
.burger span{display:block;width:22px;height:1.5px;background:var(--ink);margin:5px 0}
.mob{position:fixed;inset:0;z-index:45;background:var(--paper);padding:24px 18px;
  transform:translateY(-101%);transition:transform .6s var(--e);
  display:flex;flex-direction:column;justify-content:center;gap:4px}
.mob.on{transform:none}
.mob a{font-family:var(--display);font-weight:800;font-size:30px;text-decoration:none;padding:10px 0;
  border-bottom:1px solid var(--line-2)}
.mob .cl{position:absolute;top:22px;right:18px;background:none;border:0;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.2em}
@media(max-width:960px){
  .nav{padding:0 18px}
  .nav menu{display:none}
  .burger{display:block}
  .nav .brand span{display:none}
}
/* ---------------------------------------------------------------
   ШАПКА-БЛАНК
   --------------------------------------------------------------- */
.head{padding-top:calc(var(--nav) + 40px)}
.head .row{display:grid;grid-template-columns:var(--rail) 1fr;gap:0}
.head .stamp{padding:0 18px 0 0;border-right:1px solid var(--line)}
.head .main{padding-left:40px}
.head .d1{margin:8px 0 0}
.head .under{display:flex;flex-wrap:wrap;gap:0;margin-top:38px;border-top:1px solid var(--line)}
.head .under div{flex:1 1 190px;padding:16px 20px 16px 0;border-right:1px solid var(--line-2)}
.head .under div:last-child{border-right:0}
.head .under b{display:block;font-family:var(--mono);font-size:19px;font-weight:500}
.head .under span{display:block;margin-top:6px;font-family:var(--mono);font-size:11px;
  letter-spacing:.16em;color:var(--muted)}
@media(max-width:960px){
  .head{padding-top:calc(var(--nav) + 24px)}
  .head .row{grid-template-columns:1fr}
  .head .stamp{border-right:0;padding:0 0 14px}
  .head .main{padding-left:0}
  .head .under div{padding:14px 14px 14px 0}
}
/* живий рядок стану */
.live{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);
  font-size:11px;letter-spacing:.16em;color:var(--muted)}
.live i{width:7px;height:7px;border-radius:50%;background:var(--red);
  animation:pulse 2.6s ease-in-out infinite}
0%,100%{opacity:1}
50%{opacity:.22}
/* ---------------------------------------------------------------
   КНОПКИ
   --------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:12px;text-decoration:none;cursor:pointer;
  border:0;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  padding:16px 22px;transition:background .35s var(--e),color .35s var(--e)}
.btn::after{content:'';width:16px;height:1px;background:currentColor;
  transition:width .4s var(--e)}
.btn:hover::after{width:26px}
.btn-p{background:var(--red);color:#fff}
.btn-p:hover{background:var(--ink)}
.btn-s{border:1px solid var(--line);color:var(--ink)}
.btn-s:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
@media(max-width:640px){.btns .btn{flex:1 1 100%;justify-content:center}}
/* ---------------------------------------------------------------
   ЗАГАЛЬНЕ
   --------------------------------------------------------------- */
.dark{background:var(--ink);color:var(--paper)}
.dark .k,.dark .graf-rail .nm{color:#8A8F98}
.dark .graf,.dark .graf-rail{border-color:var(--line-inv)}
.dark .lede,.dark p{color:#B7BCC3}
.frame{position:relative;overflow:hidden;background:var(--ink)}
.frame img,.frame video{width:100%;height:100%;object-fit:cover}
.cine{position:relative;height:78svh;min-height:440px;overflow:hidden;background:var(--ink)}
.cine img,.cine video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Затемнення тягнемо вище: підпис і заголовок мусять читатись на будь-якому
   кадрі, а не лише на темному. */
.cine::after{content:'';position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(16,19,23,.94) 2%,rgba(16,19,23,.78) 22%,
    rgba(16,19,23,.34) 48%,rgba(16,19,23,.04) 78%)}
.cine .cap{position:absolute;inset:auto 0 0 0;z-index:2;padding:0 calc(var(--u)*4) 8vh;color:var(--paper)}
/* Підпис білий, а не червоний: кадр під ним буває світлим, і червоне на
   білій кабіні зникає. Бренд тримає ромб перед текстом. */
.cine .cap .k{color:var(--paper)!important;display:inline-flex;align-items:center;gap:11px}
.cine .cap .k::before{content:'';width:7px;height:7px;flex:none;
  background:var(--red);transform:rotate(45deg)}
.cine .cap .in{max-width:1440px;margin:0 auto}
@media(max-width:960px){.cine{height:66svh}.cine .cap{padding:0 18px 7vh}}
/* дані таблицею */
.tbl{width:100%;border-collapse:collapse}
.tbl tr{border-top:1px solid var(--line)}
.dark .tbl tr{border-color:var(--line-inv)}
.tbl td{padding:13px 0;vertical-align:baseline}
.tbl td:first-child{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--muted)}
.tbl td:last-child{font-family:var(--mono);font-size:15px;text-align:right}
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.tags li{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--muted);
  border:1px solid var(--line);padding:9px 11px}
/* сітки */
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line)}
.cols3>*{background:var(--card);padding:28px 26px}
@media(max-width:960px){.cols2{grid-template-columns:1fr;gap:26px}.cols3{grid-template-columns:1fr}}
/* ---------------------------------------------------------------
   ФОРМА
   --------------------------------------------------------------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:34px}
.fld{display:flex;flex-direction:column;gap:8px}
.fld.w{grid-column:1/-1}
.fld label{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--muted)}
.fld input,.fld select,.fld textarea{background:transparent;border:0;
  border-bottom:1px solid var(--line);color:var(--ink);font-family:var(--mono);font-size:15px;
  padding:11px 2px;outline:none;transition:border-color .35s var(--e)}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--red)}
.dark .fld input,.dark .fld select,.dark .fld textarea{color:var(--paper);border-color:var(--line-inv)}
@media(max-width:960px){
  .form{grid-template-columns:1fr;gap:18px}
  .fld input,.fld select,.fld textarea{font-size:16px}
}
.formout{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--muted)}
/* ---------------------------------------------------------------
   ПОЯВА — одна логіка на весь сайт: витирання в бік руху
   --------------------------------------------------------------- */
.rv{clip-path:inset(0 100% 0 0);opacity:.001;
  transition:clip-path .95s var(--e) var(--d,0ms),opacity .4s linear var(--d,0ms)}
.rv.on{clip-path:inset(0 0 0 0);opacity:1}

/* Кадр усередині рамки їде назустріч витиранню: шторка відкриває кадр,
   який у цей час сідає на місце. Читається як наїзд камери, а не як
   картинка, що просто з'явилась. */
.rv .frame img,.rv .frame video,.frame.rv img,.frame.rv video,
.rv .pv-shot img,.pv-shot.rv img{
  transform:scale(1.1);transform-origin:50% 55%;
  transition:transform 1.5s var(--e) var(--d,0ms)}
.rv.on .frame img,.rv.on .frame video,.frame.rv.on img,.frame.rv.on video,
.rv.on .pv-shot img,.pv-shot.rv.on img{transform:scale(1)}
/* ---------------------------------------------------------------
   ПІДВАЛ
   --------------------------------------------------------------- */
footer{background:var(--ink);color:var(--paper);margin-top:0}
footer .in{max-width:1440px;margin:0 auto;padding:70px calc(var(--u)*4) 40px;
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px}
footer img{height:44px}
footer .t{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:#8A8F98;margin-bottom:14px}
footer .v{font-family:var(--mono);font-size:13px;line-height:2.15}
footer .v a{text-decoration:none;border-bottom:1px solid rgba(242,241,237,.22)}
footer .v a:hover{border-color:var(--red)}
footer .base{border-top:1px solid var(--line-inv);padding:20px calc(var(--u)*4);
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:#9AA0A8;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  max-width:1440px;margin:0 auto}
@media(max-width:960px){
  footer .in{grid-template-columns:1fr 1fr;padding:48px 18px 30px}
  footer .base{padding:18px 18px;flex-direction:column;gap:8px}
}
@media (prefers-reduced-motion:reduce){
  .rv{clip-path:none;opacity:1;transition:none}
  .rv .frame img,.rv .frame video,.frame.rv img,.frame.rv video,
  .rv .pv-shot img,.pv-shot.rv img{transform:none;transition:none}
  .live i{animation:none}
}
/* =========================================================================
   ГРАФА: ЄВРОПЕЙСЬКІ КОРИДОРИ (assets/corridors.js)
   ========================================================================= */
.cor-head{max-width:60ch;margin-bottom:34px}
.cor-head h2{margin-bottom:14px}
.cor-body{display:grid;grid-template-columns:1.6fr .9fr;border:1px solid var(--line);background:var(--card)}
.cor-map{position:relative;border-right:1px solid var(--line);background:var(--paper-2);
  min-height:480px;display:flex;align-items:center}
.cor-map svg{width:100%;height:auto}
.grat line{stroke:rgba(16,19,23,.06);stroke-width:1}
.cor{fill:none;stroke:rgba(16,19,23,.12);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .6s var(--e)}
.cor.on{stroke:rgba(16,19,23,.2)}
.live{fill:none;stroke:var(--red);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.node circle{fill:rgba(16,19,23,.2);transition:fill .5s var(--e)}
.node text{font-family:var(--mono);font-size:11px;fill:rgba(16,19,23,.32);
  paint-order:stroke;stroke:var(--paper-2);stroke-width:3px;stroke-linejoin:round;
  transition:fill .5s var(--e)}
.node.lit circle{fill:var(--ink)}
.node.lit text{fill:var(--ink)}
.node.brd circle{fill:var(--red-deep)}
.node.brd.lit circle,.node.ua.lit circle{fill:var(--red)}
.rig path{stroke:var(--ink);stroke-width:3.4;stroke-linecap:round}
.rig circle{fill:var(--red)}
.cor-odo{position:absolute;left:24px;bottom:20px;display:flex;align-items:baseline;gap:7px;
  font-family:var(--mono)}
.cor-odo span{font-size:30px;font-variant-numeric:tabular-nums}
.cor-odo i{font-style:normal;font-size:11px;letter-spacing:.18em;color:var(--muted)}
.cor-side{display:flex;flex-direction:column}
.cor-pick{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}
.cor-tab{background:none;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:13px 15px;text-align:left;cursor:pointer;font-family:var(--sans);
  transition:background .3s var(--e)}
.cor-tab:nth-child(2n){border-right:0}
.cor-tab b{display:block;font-size:14px;font-weight:600}
.cor-tab span{display:block;margin-top:3px;font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;color:var(--muted)}
.cor-tab:hover{background:var(--paper-2)}
.cor-tab[aria-selected="true"]{background:var(--ink)}
.cor-tab[aria-selected="true"] b{color:var(--paper)}
.cor-tab[aria-selected="true"] span{color:var(--red)}
.cor-read{padding:24px;display:flex;flex-direction:column;gap:18px;flex:1}
.cor-dest{font-family:var(--display);font-weight:800;font-size:clamp(22px,2.4vw,32px);
  line-height:1.06;letter-spacing:-.02em}
.cor-facts>div{display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  border-top:1px solid var(--line);padding:11px 0}
.cor-facts dt{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--muted)}
.cor-facts dd{font-family:var(--mono);font-size:15px}
.cor-k{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  color:var(--muted);margin-bottom:9px}
.cor-chips{display:flex;flex-wrap:wrap;gap:6px}
.cor-chip{background:none;border:1px solid var(--line);cursor:pointer;font-family:var(--mono);
  font-size:11px;letter-spacing:.08em;color:var(--muted);padding:9px 10px;
  transition:background .3s var(--e),color .3s var(--e)}
.cor-chip:hover{color:var(--ink);border-color:var(--ink)}
.cor-chip.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.cor-trailer b{display:block;font-family:var(--display);font-weight:700;font-size:16px;margin-bottom:6px}
.cor-trailer p{font-size:14px;line-height:1.62;color:var(--ink-2)}
.cor-cta{margin-top:auto;align-self:flex-start}
.cor-note{font-size:12.5px;line-height:1.6;color:var(--muted)}
@media(max-width:1080px){.cor-body{grid-template-columns:1fr}
  .cor-map{border-right:0;border-bottom:1px solid var(--line);min-height:0}}
@media(max-width:960px){.cor-read{padding:18px}.node text{font-size:13px}
  .cor-cta{align-self:stretch;justify-content:center}}
/* =========================================================================
   ГРАФА: ДЕФЕКТНИЙ АКТ (assets/inspect.js)
   ========================================================================= */
.insp{display:grid;grid-template-columns:1.35fr .95fr;border:1px solid var(--line);background:var(--card)}
.insp-stage{position:relative;border-right:1px solid var(--line);background:var(--paper-2);
  min-height:460px}
.insp-stage img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.insp-dot{position:absolute;width:30px;height:30px;transform:translate(-50%,-50%);
  border-radius:50%;border:1px solid rgba(242,241,237,.75);background:rgba(16,19,23,.4);
  cursor:pointer;transition:background .35s var(--e),transform .35s var(--e)}
.insp-dot::after{content:'';position:absolute;left:50%;top:50%;width:6px;height:6px;
  margin:-3px 0 0 -3px;border-radius:50%;background:var(--paper)}
.insp-dot:hover{transform:translate(-50%,-50%) scale(1.15)}
.insp-dot[aria-selected="true"]{background:var(--red);border-color:var(--red)}
.insp-read{padding:26px;display:flex;flex-direction:column;gap:16px}
.insp-read h3{font-family:var(--display);font-weight:800;font-size:clamp(20px,2.2vw,28px);
  line-height:1.1;letter-spacing:-.02em}
.insp-list{list-style:none}
.insp-list li{position:relative;padding-left:16px;margin-bottom:7px;font-size:14.5px;
  line-height:1.6;color:var(--ink-2)}
.insp-list li::before{content:'';position:absolute;left:0;top:.66em;width:7px;height:1px;background:var(--red)}
.insp-time{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:12px;
  font-family:var(--mono);font-size:13px}
.insp-time span{color:var(--muted);font-size:11px;letter-spacing:.14em}
@media(max-width:1080px){.insp{grid-template-columns:1fr}
  .insp-stage{border-right:0;border-bottom:1px solid var(--line);min-height:300px;position:relative}}
/* =========================================================================
   ЗЧІПКА — один тягач на весь сайт (assets/rig.js)
   Дорога внизу екрана. Машина має масу: розганяється довго, гальмує довше,
   при переході на іншу сторінку виїжджає за край і в'їжджає на новій.
   ========================================================================= */
.rig-road{position:fixed;left:0;right:0;bottom:0;height:56px;z-index:44;pointer-events:none}
.rig-surface{position:absolute;left:0;right:0;bottom:13px;height:2px;background:rgba(16,19,23,.12)}
.rig-travelled{display:block;height:100%;background:var(--red);
  transform:scaleX(0);transform-origin:left;will-change:transform}
.rig-unit{position:absolute;left:0;bottom:5px;width:132px;height:46px;will-change:transform}
.rig-unit svg{display:block;overflow:visible}
.rig-body{transform-origin:60% 90%;will-change:transform}
.rig-body .shell{fill:#fff;stroke:var(--ink);stroke-width:1.4;stroke-linejoin:round}
.rig-body .glass{fill:rgba(16,19,23,.72)}
.rig-body .accent{fill:var(--red-deep)}
.rig-body .pin{fill:var(--red)}
.rig-body .frame{fill:var(--ink)}
.rig-body .tank{fill:#C9CCD1;stroke:var(--ink);stroke-width:.8}
.rig-body .stack{fill:#9AA0A8}
.rig-axle .tyre{fill:var(--ink)}
.rig-axle .hub{fill:#C9CCD1}
.rig-axle .spokes path{stroke:rgba(16,19,23,.45);stroke-width:1}
/* підпис стоїть ЛІВОРУЧ від боксу гаража: раніше він лежав просто
   на чорному прямокутнику, і з нього виходила пляма без тексту */
.rig-stop{position:absolute;right:112px;bottom:13px;font-family:var(--mono);
  font-size:11px;line-height:1;letter-spacing:.2em;white-space:nowrap;
  padding:6px 9px;background:rgba(242,241,237,.92);color:var(--ink);
  opacity:0;transition:opacity .6s var(--e)}
.rig-road.moving .rig-stop{opacity:1}
.rig-bay{position:absolute;right:24px;bottom:13px;width:70px;height:42px;
  border-left:2px solid var(--ink);border-top:2px solid var(--ink)}
.rig-bay span{position:absolute;inset:0;background:var(--ink);
  transform-origin:top;transition:transform .9s var(--e)}
.rig-bay.open span{transform:scaleY(.12)}
.rig-road.leaving .rig-stop{opacity:0}
.pagefade{position:fixed;inset:0;z-index:60;pointer-events:none;background:var(--paper);
  opacity:0;transition:opacity .36s var(--e)}
body.page-out .pagefade{opacity:1}
body.page-in .pagefade{opacity:0}
@media(max-width:960px){
  .rig-road{height:38px}
  .rig-unit{width:86px;height:30px;bottom:4px}
  .rig-unit svg{width:86px;height:30px}
  .rig-surface{bottom:9px}
  .rig-stop,.rig-bay{display:none}
}
@media (prefers-reduced-motion:reduce){ .rig-road,.pagefade{display:none} }
/* =========================================================================
   ГРАФА: ВІДГУКИ — 3D-каруселя (assets/reviews.js)
   Картки стоять по колу навколо вертикальної осі. Кільце тягнеться
   мишею або пальцем і має інерцію.
   ========================================================================= */
.rev-stage{position:relative;height:420px;perspective:1500px;
  perspective-origin:50% 50%;cursor:grab;user-select:none;
  -webkit-user-select:none;touch-action:pan-y}
.rev-stage.grabbing{cursor:grabbing}
.rev-stage:focus-visible{outline:2px solid var(--red);outline-offset:6px}
.rev-ring{position:absolute;inset:0;transform-style:preserve-3d;
  will-change:transform}
.rev-card{position:absolute;left:50%;top:50%;width:min(320px,72vw);
  margin:-134px 0 0 max(-160px,-36vw);height:268px;
  background:var(--card);border:1px solid var(--line);
  padding:22px 22px 18px;display:flex;flex-direction:column;gap:14px;
  backface-visibility:hidden;
  transition:opacity .5s var(--e),box-shadow .5s var(--e),border-color .5s var(--e)}
.rev-card.front{box-shadow:0 26px 60px -34px rgba(16,19,23,.5);border-color:rgba(16,19,23,.22)}
.rev-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rev-stars{display:flex;gap:3px}
.rev-stars i{width:9px;height:9px;background:var(--line);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.rev-stars i.on{background:var(--red)}
.rev-date{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--muted)}
.rev-text{flex:1;font-size:15px;line-height:1.66;color:var(--ink-2);
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical}
.rev-foot{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  border-top:1px solid var(--line-2);padding-top:12px}
.rev-name{font-family:var(--display);font-weight:700;font-size:14px}
.rev-src{font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--muted)}
/* світло під центральною карткою — м'який відблиск, як у референсі */
.rev-glow{position:absolute;left:50%;top:50%;width:min(420px,84vw);height:150px;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(200,16,46,.13),transparent 68%);
  filter:blur(26px)}
.rev-nav{position:absolute;top:50%;width:44px;height:44px;margin-top:-22px;z-index:3;
  background:var(--card);border:1px solid var(--line);cursor:pointer;
  transition:background .3s var(--e),border-color .3s var(--e)}
.rev-nav::after{content:'';position:absolute;left:50%;top:50%;width:9px;height:9px;
  margin:-5px 0 0 -5px;border-left:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink)}
.rev-nav.prev{left:0;transform:none}
.rev-nav.prev::after{transform:rotate(45deg)}
.rev-nav.next{right:0}
.rev-nav.next::after{transform:rotate(-135deg);margin-left:-7px}
.rev-nav:hover{background:var(--ink);border-color:var(--ink)}
.rev-nav:hover::after{border-color:var(--paper)}
.rev-hint{margin-top:18px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  color:var(--muted);text-align:center}
@media(max-width:960px){
  .rev-stage{height:360px;perspective:1100px}
  .rev-card{height:238px;padding:18px}
  .rev-text{font-size:14px;-webkit-line-clamp:5}
  .rev-nav{display:none}
}
@media (prefers-reduced-motion:reduce){
  .rev-card{transition:none}
}
/* =========================================================================
   КАРТА ДОСТАВОК (assets/earth.js)
   Світла сторінка, куля без підкладки: малюється тільки сама сфера,
   світіння розчиняється в папері. Текст ліворуч, куля праворуч.
   ========================================================================= */
.earth-sec{position:relative;overflow:hidden;background:var(--paper);color:var(--ink)}
.earth-in{position:relative;z-index:2;max-width:1440px;margin:0 auto;
  padding:calc(var(--u)*14) calc(var(--u)*4);
  display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:24px;align-items:center;min-height:96svh}
.earth-copy{min-width:0}
.earth-kick{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--red)}
.earth-h{font-family:var(--tech);font-variation-settings:'wdth' 106;font-weight:800;
  text-transform:uppercase;letter-spacing:-.024em;line-height:.98;
  font-size:clamp(36px,4.6vw,72px);margin-top:20px}
.earth-h em{font-style:normal;color:var(--red)}
.earth-sub{margin-top:22px;font-size:16px;line-height:1.8;color:var(--ink-2);max-width:34ch}
/* на телефоні цифри йдуть окремими рядками, а не ламаною сіткою */
@media(max-width:620px){.earth-stats{grid-template-columns:1fr!important;gap:16px!important}
  .earth-stats>div{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
  .earth-stats>div i{text-align:right}}
.earth-stats{display:flex;gap:0;margin-top:44px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:20px}
.earth-stats div{flex:1 1 150px;padding-right:22px}
.earth-stats span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  color:var(--muted)}
.earth-stats b{display:block;margin-top:9px;font-family:var(--mono);font-size:15px;font-weight:400}
.earth-stats i{display:block;margin-top:5px;font-style:normal;font-family:var(--mono);
  font-size:11px;letter-spacing:.14em;color:var(--muted)}
.earth-cta{margin-top:34px}
/* сцена — без фону і без рамки */
.earth-stage{position:relative;height:min(860px,88svh);
  width:calc(100% + 16vw);margin-right:-16vw;cursor:grab;touch-action:pan-y}
.earth-stage.grabbing{cursor:grabbing}
.earth-cv{position:absolute;inset:0}
.earth-pins{position:absolute;inset:0;pointer-events:none}
.earth-hint{position:absolute;left:0;right:0;bottom:4px;text-align:center;
  font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--muted);pointer-events:none}
/* підписи міст — білим по кулі */
.earth-pin{position:absolute;left:0;top:0;transform:translate3d(0,0,0);
  will-change:transform,opacity;pointer-events:none;white-space:nowrap;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:#fff;
  text-shadow:0 0 12px rgba(0,0,0,.95),0 0 4px rgba(0,0,0,.9)}
.earth-pin.hq{background:var(--red);padding:5px 9px;font-weight:500;
  box-shadow:0 0 26px rgba(255,42,72,.55);text-shadow:none}
@media(max-width:1080px){
  .earth-in{grid-template-columns:1fr;gap:24px;min-height:0;
    padding:calc(var(--u)*8) 18px}
  .earth-stage{height:min(430px,52svh);width:100%;margin-right:0;order:-1}
  .earth-sub{max-width:100%}
  .earth-cta{align-self:stretch;justify-content:center}
  .earth-pin{font-size:9px}
}
/* =========================================================================
   ГРАФА: ДЕФЕКТНИЙ АКТ (assets/inspect.js)
   ========================================================================= */
.insp{display:grid;grid-template-columns:1.35fr .95fr;border:1px solid var(--line);background:var(--card)}
.insp-stage{position:relative;border-right:1px solid var(--line);background:var(--paper-2);
  min-height:460px}
.insp-stage img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.insp-dot{position:absolute;width:30px;height:30px;transform:translate(-50%,-50%);
  border-radius:50%;border:1px solid rgba(242,241,237,.75);background:rgba(16,19,23,.4);
  cursor:pointer;transition:background .35s var(--e),transform .35s var(--e)}
.insp-dot::after{content:'';position:absolute;left:50%;top:50%;width:6px;height:6px;
  margin:-3px 0 0 -3px;border-radius:50%;background:var(--paper)}
.insp-dot:hover{transform:translate(-50%,-50%) scale(1.15)}
.insp-dot[aria-selected="true"]{background:var(--red);border-color:var(--red)}
.insp-read{padding:26px;display:flex;flex-direction:column;gap:16px}
.insp-read h3{font-family:var(--display);font-weight:800;font-size:clamp(20px,2.2vw,28px);
  line-height:1.1;letter-spacing:-.02em}
.insp-list{list-style:none}
.insp-list li{position:relative;padding-left:16px;margin-bottom:7px;font-size:14.5px;
  line-height:1.6;color:var(--ink-2)}
.insp-list li::before{content:'';position:absolute;left:0;top:.66em;width:7px;height:1px;background:var(--red)}
.insp-time{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:12px;
  font-family:var(--mono);font-size:13px}
.insp-time span{color:var(--muted);font-size:11px;letter-spacing:.14em}
@media(max-width:1080px){.insp{grid-template-columns:1fr}
  .insp-stage{border-right:0;border-bottom:1px solid var(--line);min-height:300px;position:relative}}
/* =========================================================================
   ЗЧІПКА — один тягач на весь сайт (assets/rig.js)
   Дорога внизу екрана. Машина має масу: розганяється довго, гальмує довше,
   при переході на іншу сторінку виїжджає за край і в'їжджає на новій.
   ========================================================================= */
.rig-road{position:fixed;left:0;right:0;bottom:0;height:56px;z-index:44;pointer-events:none}
.rig-surface{position:absolute;left:0;right:0;bottom:13px;height:2px;background:rgba(16,19,23,.12)}
.rig-travelled{display:block;height:100%;background:var(--red);
  transform:scaleX(0);transform-origin:left;will-change:transform}
.rig-unit{position:absolute;left:0;bottom:5px;width:132px;height:46px;will-change:transform}
.rig-unit svg{display:block;overflow:visible}
.rig-body{transform-origin:60% 90%;will-change:transform}
.rig-body .shell{fill:#fff;stroke:var(--ink);stroke-width:1.4;stroke-linejoin:round}
.rig-body .glass{fill:rgba(16,19,23,.72)}
.rig-body .accent{fill:var(--red-deep)}
.rig-body .pin{fill:var(--red)}
.rig-body .frame{fill:var(--ink)}
.rig-body .tank{fill:#C9CCD1;stroke:var(--ink);stroke-width:.8}
.rig-body .stack{fill:#9AA0A8}
.rig-axle .tyre{fill:var(--ink)}
.rig-axle .hub{fill:#C9CCD1}
.rig-axle .spokes path{stroke:rgba(16,19,23,.45);stroke-width:1}
/* підпис стоїть ЛІВОРУЧ від боксу гаража: раніше він лежав просто
   на чорному прямокутнику, і з нього виходила пляма без тексту */
.rig-stop{position:absolute;right:112px;bottom:13px;font-family:var(--mono);
  font-size:11px;line-height:1;letter-spacing:.2em;white-space:nowrap;
  padding:6px 9px;background:rgba(242,241,237,.92);color:var(--ink);
  opacity:0;transition:opacity .6s var(--e)}
.rig-road.moving .rig-stop{opacity:1}
.rig-bay{position:absolute;right:24px;bottom:13px;width:70px;height:42px;
  border-left:2px solid var(--ink);border-top:2px solid var(--ink)}
.rig-bay span{position:absolute;inset:0;background:var(--ink);
  transform-origin:top;transition:transform .9s var(--e)}
.rig-bay.open span{transform:scaleY(.12)}
.rig-road.leaving .rig-stop{opacity:0}
.pagefade{position:fixed;inset:0;z-index:60;pointer-events:none;background:var(--paper);
  opacity:0;transition:opacity .36s var(--e)}
body.page-out .pagefade{opacity:1}
body.page-in .pagefade{opacity:0}
@media(max-width:960px){
  .rig-road{height:38px}
  .rig-unit{width:86px;height:30px;bottom:4px}
  .rig-unit svg{width:86px;height:30px}
  .rig-surface{bottom:9px}
  .rig-stop,.rig-bay{display:none}
}
@media (prefers-reduced-motion:reduce){ .rig-road,.pagefade{display:none} }
/* =========================================================================
   ГРАФА: ВІДГУКИ — 3D-каруселя (assets/reviews.js)
   Картки стоять по колу навколо вертикальної осі. Кільце тягнеться
   мишею або пальцем і має інерцію.
   ========================================================================= */
.rev-stage{position:relative;height:420px;perspective:1500px;
  perspective-origin:50% 50%;cursor:grab;user-select:none;
  -webkit-user-select:none;touch-action:pan-y}
.rev-stage.grabbing{cursor:grabbing}
.rev-stage:focus-visible{outline:2px solid var(--red);outline-offset:6px}
.rev-ring{position:absolute;inset:0;transform-style:preserve-3d;
  will-change:transform}
.rev-card{position:absolute;left:50%;top:50%;width:min(320px,72vw);
  margin:-134px 0 0 max(-160px,-36vw);height:268px;
  background:var(--card);border:1px solid var(--line);
  padding:22px 22px 18px;display:flex;flex-direction:column;gap:14px;
  backface-visibility:hidden;
  transition:opacity .5s var(--e),box-shadow .5s var(--e),border-color .5s var(--e)}
.rev-card.front{box-shadow:0 26px 60px -34px rgba(16,19,23,.5);border-color:rgba(16,19,23,.22)}
.rev-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rev-stars{display:flex;gap:3px}
.rev-stars i{width:9px;height:9px;background:var(--line);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.rev-stars i.on{background:var(--red)}
.rev-date{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--muted)}
.rev-text{flex:1;font-size:15px;line-height:1.66;color:var(--ink-2);
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical}
.rev-foot{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  border-top:1px solid var(--line-2);padding-top:12px}
.rev-name{font-family:var(--display);font-weight:700;font-size:14px}
.rev-src{font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--muted)}
/* світло під центральною карткою — м'який відблиск, як у референсі */
.rev-glow{position:absolute;left:50%;top:50%;width:min(420px,84vw);height:150px;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(200,16,46,.13),transparent 68%);
  filter:blur(26px)}
.rev-nav{position:absolute;top:50%;width:44px;height:44px;margin-top:-22px;z-index:3;
  background:var(--card);border:1px solid var(--line);cursor:pointer;
  transition:background .3s var(--e),border-color .3s var(--e)}
.rev-nav::after{content:'';position:absolute;left:50%;top:50%;width:9px;height:9px;
  margin:-5px 0 0 -5px;border-left:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink)}
.rev-nav.prev{left:0;transform:none}
.rev-nav.prev::after{transform:rotate(45deg)}
.rev-nav.next{right:0}
.rev-nav.next::after{transform:rotate(-135deg);margin-left:-7px}
.rev-nav:hover{background:var(--ink);border-color:var(--ink)}
.rev-nav:hover::after{border-color:var(--paper)}
.rev-hint{margin-top:18px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  color:var(--muted);text-align:center}
@media(max-width:960px){
  .rev-stage{height:360px;perspective:1100px}
  .rev-card{height:238px;padding:18px}
  .rev-text{font-size:14px;-webkit-line-clamp:5}
  .rev-nav{display:none}
}
@media (prefers-reduced-motion:reduce){
  .rev-card{transition:none}
}
/* =========================================================================
   ГРАФА: ДЕФЕКТНИЙ АКТ (assets/inspect.js)
   ========================================================================= */
.insp{display:grid;grid-template-columns:1.35fr .95fr;border:1px solid var(--line);background:var(--card)}
.insp-stage{position:relative;border-right:1px solid var(--line);background:var(--paper-2);
  min-height:460px}
.insp-stage img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.insp-dot{position:absolute;width:30px;height:30px;transform:translate(-50%,-50%);
  border-radius:50%;border:1px solid rgba(242,241,237,.75);background:rgba(16,19,23,.4);
  cursor:pointer;transition:background .35s var(--e),transform .35s var(--e)}
.insp-dot::after{content:'';position:absolute;left:50%;top:50%;width:6px;height:6px;
  margin:-3px 0 0 -3px;border-radius:50%;background:var(--paper)}
.insp-dot:hover{transform:translate(-50%,-50%) scale(1.15)}
.insp-dot[aria-selected="true"]{background:var(--red);border-color:var(--red)}
.insp-read{padding:26px;display:flex;flex-direction:column;gap:16px}
.insp-read h3{font-family:var(--display);font-weight:800;font-size:clamp(20px,2.2vw,28px);
  line-height:1.1;letter-spacing:-.02em}
.insp-list{list-style:none}
.insp-list li{position:relative;padding-left:16px;margin-bottom:7px;font-size:14.5px;
  line-height:1.6;color:var(--ink-2)}
.insp-list li::before{content:'';position:absolute;left:0;top:.66em;width:7px;height:1px;background:var(--red)}
.insp-time{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:12px;
  font-family:var(--mono);font-size:13px}
.insp-time span{color:var(--muted);font-size:11px;letter-spacing:.14em}
@media(max-width:1080px){.insp{grid-template-columns:1fr}
  .insp-stage{border-right:0;border-bottom:1px solid var(--line);min-height:300px;position:relative}}
/* =========================================================================
   ЗЧІПКА — один тягач на весь сайт (assets/rig.js)
   Дорога внизу екрана. Машина має масу: розганяється довго, гальмує довше,
   при переході на іншу сторінку виїжджає за край і в'їжджає на новій.
   ========================================================================= */
.rig-road{position:fixed;left:0;right:0;bottom:0;height:56px;z-index:44;pointer-events:none}
.rig-surface{position:absolute;left:0;right:0;bottom:13px;height:2px;background:rgba(16,19,23,.12)}
.rig-travelled{display:block;height:100%;background:var(--red);
  transform:scaleX(0);transform-origin:left;will-change:transform}
.rig-unit{position:absolute;left:0;bottom:5px;width:132px;height:46px;will-change:transform}
.rig-unit svg{display:block;overflow:visible}
.rig-body{transform-origin:60% 90%;will-change:transform}
.rig-body .shell{fill:#fff;stroke:var(--ink);stroke-width:1.4;stroke-linejoin:round}
.rig-body .glass{fill:rgba(16,19,23,.72)}
.rig-body .accent{fill:var(--red-deep)}
.rig-body .pin{fill:var(--red)}
.rig-body .frame{fill:var(--ink)}
.rig-body .tank{fill:#C9CCD1;stroke:var(--ink);stroke-width:.8}
.rig-body .stack{fill:#9AA0A8}
.rig-axle .tyre{fill:var(--ink)}
.rig-axle .hub{fill:#C9CCD1}
.rig-axle .spokes path{stroke:rgba(16,19,23,.45);stroke-width:1}
/* підпис стоїть ЛІВОРУЧ від боксу гаража: раніше він лежав просто
   на чорному прямокутнику, і з нього виходила пляма без тексту */
.rig-stop{position:absolute;right:112px;bottom:13px;font-family:var(--mono);
  font-size:11px;line-height:1;letter-spacing:.2em;white-space:nowrap;
  padding:6px 9px;background:rgba(242,241,237,.92);color:var(--ink);
  opacity:0;transition:opacity .6s var(--e)}
.rig-road.moving .rig-stop{opacity:1}
.rig-bay{position:absolute;right:24px;bottom:13px;width:70px;height:42px;
  border-left:2px solid var(--ink);border-top:2px solid var(--ink)}
.rig-bay span{position:absolute;inset:0;background:var(--ink);
  transform-origin:top;transition:transform .9s var(--e)}
.rig-bay.open span{transform:scaleY(.12)}
.rig-road.leaving .rig-stop{opacity:0}
.pagefade{position:fixed;inset:0;z-index:60;pointer-events:none;background:var(--paper);
  opacity:0;transition:opacity .36s var(--e)}
body.page-out .pagefade{opacity:1}
body.page-in .pagefade{opacity:0}
@media(max-width:960px){
  .rig-road{height:38px}
  .rig-unit{width:86px;height:30px;bottom:4px}
  .rig-unit svg{width:86px;height:30px}
  .rig-surface{bottom:9px}
  .rig-stop,.rig-bay{display:none}
}
@media (prefers-reduced-motion:reduce){ .rig-road,.pagefade{display:none} }
/* =========================================================================
   ГРАФА: ВІДГУКИ — 3D-каруселя (assets/reviews.js)
   Картки стоять по колу навколо вертикальної осі. Кільце тягнеться
   мишею або пальцем і має інерцію.
   ========================================================================= */
.rev-stage{position:relative;height:420px;perspective:1500px;
  perspective-origin:50% 50%;cursor:grab;user-select:none;
  -webkit-user-select:none;touch-action:pan-y}
.rev-stage.grabbing{cursor:grabbing}
.rev-stage:focus-visible{outline:2px solid var(--red);outline-offset:6px}
.rev-ring{position:absolute;inset:0;transform-style:preserve-3d;
  will-change:transform}
.rev-card{position:absolute;left:50%;top:50%;width:min(320px,72vw);
  margin:-134px 0 0 max(-160px,-36vw);height:268px;
  background:var(--card);border:1px solid var(--line);
  padding:22px 22px 18px;display:flex;flex-direction:column;gap:14px;
  backface-visibility:hidden;
  transition:opacity .5s var(--e),box-shadow .5s var(--e),border-color .5s var(--e)}
.rev-card.front{box-shadow:0 26px 60px -34px rgba(16,19,23,.5);border-color:rgba(16,19,23,.22)}
.rev-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rev-stars{display:flex;gap:3px}
.rev-stars i{width:9px;height:9px;background:var(--line);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.rev-stars i.on{background:var(--red)}
.rev-date{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--muted)}
.rev-text{flex:1;font-size:15px;line-height:1.66;color:var(--ink-2);
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical}
.rev-foot{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  border-top:1px solid var(--line-2);padding-top:12px}
.rev-name{font-family:var(--display);font-weight:700;font-size:14px}
.rev-src{font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--muted)}
/* світло під центральною карткою — м'який відблиск, як у референсі */
.rev-glow{position:absolute;left:50%;top:50%;width:min(420px,84vw);height:150px;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(200,16,46,.13),transparent 68%);
  filter:blur(26px)}
.rev-nav{position:absolute;top:50%;width:44px;height:44px;margin-top:-22px;z-index:3;
  background:var(--card);border:1px solid var(--line);cursor:pointer;
  transition:background .3s var(--e),border-color .3s var(--e)}
.rev-nav::after{content:'';position:absolute;left:50%;top:50%;width:9px;height:9px;
  margin:-5px 0 0 -5px;border-left:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink)}
.rev-nav.prev{left:0;transform:none}
.rev-nav.prev::after{transform:rotate(45deg)}
.rev-nav.next{right:0}
.rev-nav.next::after{transform:rotate(-135deg);margin-left:-7px}
.rev-nav:hover{background:var(--ink);border-color:var(--ink)}
.rev-nav:hover::after{border-color:var(--paper)}
.rev-hint{margin-top:18px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  color:var(--muted);text-align:center}
@media(max-width:960px){
  .rev-stage{height:360px;perspective:1100px}
  .rev-card{height:238px;padding:18px}
  .rev-text{font-size:14px;-webkit-line-clamp:5}
  .rev-nav{display:none}
}
@media (prefers-reduced-motion:reduce){
  .rev-card{transition:none}
}
/* =========================================================================
   MOVING EUROPE FORWARD — кінематографічна сцена мережі
   (assets/geo-scene.js). Куля піднімається знизу і зрізається краєм кадру.
   ========================================================================= */
.geo-scene{position:relative;height:320vh;background:var(--paper)}
.geo-sticky{position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;flex-direction:column;align-items:center}
.geo-canvas{position:absolute;inset:0;z-index:1}
.geo-cv{position:absolute;inset:0}
.geo-pins{position:absolute;inset:0;pointer-events:none}
.geo-copy{position:relative;z-index:3;text-align:center;padding:calc(var(--nav) + 46px) 24px 0;
  max-width:900px;pointer-events:none}
.geo-tag{display:inline-flex;align-items:center;gap:8px;background:var(--red);color:#fff;
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;padding:7px 12px}
.geo-tag i{width:5px;height:5px;border-radius:50%;background:#fff;
  animation:pulse 2.4s ease-in-out infinite}
.geo-h{font-family:var(--tech);font-variation-settings:'wdth' 116;font-weight:800;
  text-transform:uppercase;letter-spacing:-.018em;line-height:.95;
  font-size:clamp(34px,5.4vw,76px);margin-top:20px}
.geo-h em{font-style:normal;color:var(--red)}
.geo-sub{margin:16px auto 0;font-size:15.5px;line-height:1.65;color:var(--muted);max-width:40ch}
.geo-cta{position:relative;z-index:3;margin-top:26px;pointer-events:auto}
/* підписи міст — виноска і картка, як у референсі */
.geo-pin{position:absolute;left:0;top:0;transform:translate3d(0,0,0);
  will-change:transform,opacity;pointer-events:none}
.geo-pin .bx{position:absolute;left:0;top:0;transform:translate(-50%,-100%);
  display:block;white-space:nowrap;background:rgba(10,13,17,.9);
  border:1px solid rgba(242,241,237,.2);padding:6px 10px;text-align:left}
.geo-pin b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--paper)}
.geo-pin i{display:block;margin-top:3px;font-style:normal;font-family:var(--mono);
  font-size:8.5px;letter-spacing:.12em;color:rgba(242,241,237,.55)}
.geo-pin.hq .bx{background:var(--red);border-color:var(--red)}
.geo-pin.hq i{color:rgba(255,255,255,.8)}
/* маленька шкала етапів унизу */
.geo-steps{position:absolute;left:0;right:0;bottom:22px;z-index:3;display:flex;
  justify-content:center;gap:10px;pointer-events:none}
.geo-steps span{width:34px;height:2px;background:rgba(16,19,23,.16)}
.geo-steps span.on{background:var(--red)}
@media(max-width:900px){
  .geo-scene{height:270vh}
  .geo-copy{padding-top:calc(var(--nav) + 26px)}
  .geo-pin b{font-size:9px}
  .geo-pin i{display:none}
}
@media (prefers-reduced-motion:reduce){
  .geo-scene{height:auto}
  .geo-sticky{position:relative;height:78svh}
}
/* =========================================================================
   ГРАФА: ДЕФЕКТНИЙ АКТ (assets/inspect.js)
   ========================================================================= */
.insp{display:grid;grid-template-columns:1.35fr .95fr;border:1px solid var(--line);background:var(--card)}
.insp-stage{position:relative;border-right:1px solid var(--line);background:var(--paper-2);
  min-height:460px}
.insp-stage img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.insp-dot{position:absolute;width:30px;height:30px;transform:translate(-50%,-50%);
  border-radius:50%;border:1px solid rgba(242,241,237,.75);background:rgba(16,19,23,.4);
  cursor:pointer;transition:background .35s var(--e),transform .35s var(--e)}
.insp-dot::after{content:'';position:absolute;left:50%;top:50%;width:6px;height:6px;
  margin:-3px 0 0 -3px;border-radius:50%;background:var(--paper)}
.insp-dot:hover{transform:translate(-50%,-50%) scale(1.15)}
.insp-dot[aria-selected="true"]{background:var(--red);border-color:var(--red)}
.insp-read{padding:26px;display:flex;flex-direction:column;gap:16px}
.insp-read h3{font-family:var(--display);font-weight:800;font-size:clamp(20px,2.2vw,28px);
  line-height:1.1;letter-spacing:-.02em}
.insp-list{list-style:none}
.insp-list li{position:relative;padding-left:16px;margin-bottom:7px;font-size:14.5px;
  line-height:1.6;color:var(--ink-2)}
.insp-list li::before{content:'';position:absolute;left:0;top:.66em;width:7px;height:1px;background:var(--red)}
.insp-time{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:12px;
  font-family:var(--mono);font-size:13px}
.insp-time span{color:var(--muted);font-size:11px;letter-spacing:.14em}
@media(max-width:1080px){.insp{grid-template-columns:1fr}
  .insp-stage{border-right:0;border-bottom:1px solid var(--line);min-height:300px;position:relative}}
/* =========================================================================
   ЗЧІПКА — один тягач на весь сайт (assets/rig.js)
   Дорога внизу екрана. Машина має масу: розганяється довго, гальмує довше,
   при переході на іншу сторінку виїжджає за край і в'їжджає на новій.
   ========================================================================= */
.rig-road{position:fixed;left:0;right:0;bottom:0;height:56px;z-index:44;pointer-events:none}
.rig-surface{position:absolute;left:0;right:0;bottom:13px;height:2px;background:rgba(16,19,23,.12)}
.rig-travelled{display:block;height:100%;background:var(--red);
  transform:scaleX(0);transform-origin:left;will-change:transform}
.rig-unit{position:absolute;left:0;bottom:5px;width:132px;height:46px;will-change:transform}
.rig-unit svg{display:block;overflow:visible}
.rig-body{transform-origin:60% 90%;will-change:transform}
.rig-body .shell{fill:#fff;stroke:var(--ink);stroke-width:1.4;stroke-linejoin:round}
.rig-body .glass{fill:rgba(16,19,23,.72)}
.rig-body .accent{fill:var(--red-deep)}
.rig-body .pin{fill:var(--red)}
.rig-body .frame{fill:var(--ink)}
.rig-body .tank{fill:#C9CCD1;stroke:var(--ink);stroke-width:.8}
.rig-body .stack{fill:#9AA0A8}
.rig-axle .tyre{fill:var(--ink)}
.rig-axle .hub{fill:#C9CCD1}
.rig-axle .spokes path{stroke:rgba(16,19,23,.45);stroke-width:1}
/* підпис стоїть ЛІВОРУЧ від боксу гаража: раніше він лежав просто
   на чорному прямокутнику, і з нього виходила пляма без тексту */
.rig-stop{position:absolute;right:112px;bottom:13px;font-family:var(--mono);
  font-size:11px;line-height:1;letter-spacing:.2em;white-space:nowrap;
  padding:6px 9px;background:rgba(242,241,237,.92);color:var(--ink);
  opacity:0;transition:opacity .6s var(--e)}
.rig-road.moving .rig-stop{opacity:1}
.rig-bay{position:absolute;right:24px;bottom:13px;width:70px;height:42px;
  border-left:2px solid var(--ink);border-top:2px solid var(--ink)}
.rig-bay span{position:absolute;inset:0;background:var(--ink);
  transform-origin:top;transition:transform .9s var(--e)}
.rig-bay.open span{transform:scaleY(.12)}
.rig-road.leaving .rig-stop{opacity:0}
.pagefade{position:fixed;inset:0;z-index:60;pointer-events:none;background:var(--paper);
  opacity:0;transition:opacity .36s var(--e)}
body.page-out .pagefade{opacity:1}
body.page-in .pagefade{opacity:0}
@media(max-width:960px){
  .rig-road{height:38px}
  .rig-unit{width:86px;height:30px;bottom:4px}
  .rig-unit svg{width:86px;height:30px}
  .rig-surface{bottom:9px}
  .rig-stop,.rig-bay{display:none}
}
@media (prefers-reduced-motion:reduce){ .rig-road,.pagefade{display:none} }
/* =========================================================================
   ГРАФА: ВІДГУКИ — 3D-каруселя (assets/reviews.js)
   Картки стоять по колу навколо вертикальної осі. Кільце тягнеться
   мишею або пальцем і має інерцію.
   ========================================================================= */
.rev-stage{position:relative;height:420px;perspective:1500px;
  perspective-origin:50% 50%;cursor:grab;user-select:none;
  -webkit-user-select:none;touch-action:pan-y}
.rev-stage.grabbing{cursor:grabbing}
.rev-stage:focus-visible{outline:2px solid var(--red);outline-offset:6px}
.rev-ring{position:absolute;inset:0;transform-style:preserve-3d;
  will-change:transform}
.rev-card{position:absolute;left:50%;top:50%;width:min(320px,72vw);
  margin:-134px 0 0 max(-160px,-36vw);height:268px;
  background:var(--card);border:1px solid var(--line);
  padding:22px 22px 18px;display:flex;flex-direction:column;gap:14px;
  backface-visibility:hidden;
  transition:opacity .5s var(--e),box-shadow .5s var(--e),border-color .5s var(--e)}
.rev-card.front{box-shadow:0 26px 60px -34px rgba(16,19,23,.5);border-color:rgba(16,19,23,.22)}
.rev-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rev-stars{display:flex;gap:3px}
.rev-stars i{width:9px;height:9px;background:var(--line);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.rev-stars i.on{background:var(--red)}
.rev-date{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--muted)}
.rev-text{flex:1;font-size:15px;line-height:1.66;color:var(--ink-2);
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical}
.rev-foot{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  border-top:1px solid var(--line-2);padding-top:12px}
.rev-name{font-family:var(--display);font-weight:700;font-size:14px}
.rev-src{font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--muted)}
/* світло під центральною карткою — м'який відблиск, як у референсі */
.rev-glow{position:absolute;left:50%;top:50%;width:min(420px,84vw);height:150px;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(200,16,46,.13),transparent 68%);
  filter:blur(26px)}
.rev-nav{position:absolute;top:50%;width:44px;height:44px;margin-top:-22px;z-index:3;
  background:var(--card);border:1px solid var(--line);cursor:pointer;
  transition:background .3s var(--e),border-color .3s var(--e)}
.rev-nav::after{content:'';position:absolute;left:50%;top:50%;width:9px;height:9px;
  margin:-5px 0 0 -5px;border-left:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink)}
.rev-nav.prev{left:0;transform:none}
.rev-nav.prev::after{transform:rotate(45deg)}
.rev-nav.next{right:0}
.rev-nav.next::after{transform:rotate(-135deg);margin-left:-7px}
.rev-nav:hover{background:var(--ink);border-color:var(--ink)}
.rev-nav:hover::after{border-color:var(--paper)}
.rev-hint{margin-top:18px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  color:var(--muted);text-align:center}
@media(max-width:960px){
  .rev-stage{height:360px;perspective:1100px}
  .rev-card{height:238px;padding:18px}
  .rev-text{font-size:14px;-webkit-line-clamp:5}
  .rev-nav{display:none}
}
@media (prefers-reduced-motion:reduce){
  .rev-card{transition:none}
}
/* =========================================================================
   ГРАФА: ГЕОГРАФІЯ — світла сцена, велика куля з обрізом по правому краю
   ========================================================================= */
.geo{background:var(--paper);color:var(--ink);position:relative;overflow:hidden;
  border-top:1px solid var(--line)}
.geo-stage{position:relative;height:min(560px,64svh);cursor:grab;touch-action:pan-y}
.geo-stage.grabbing{cursor:grabbing}
.globe-cv{position:absolute;inset:0}
.globe-labels{position:absolute;inset:0;pointer-events:none}
.geo-in{position:relative;z-index:2;max-width:1440px;margin:0 auto;
  padding:calc(var(--u)*13) calc(var(--u)*4);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.geo-copy{padding-right:10px}
.geo-kick{font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--red)}
.geo-h{font-family:var(--tech);font-variation-settings:'wdth' 118;font-weight:800;
  text-transform:uppercase;letter-spacing:-.015em;line-height:.94;
  font-size:clamp(38px,5.6vw,82px);margin-top:16px}
.geo-h em{font-style:normal;color:var(--red)}
.geo-sub{margin-top:20px;font-size:16px;line-height:1.7;color:var(--ink-2);max-width:40ch}
/* легенда — щоб одразу було зрозуміло, де саме возимо */
.geo-legend{display:flex;gap:22px;flex-wrap:wrap;margin-top:24px;
  border-top:1px solid var(--line);padding-top:16px}
.geo-legend span{display:flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--muted)}
.geo-legend i{width:9px;height:9px;display:block}
.geo-legend .ua i{background:var(--red)}
.geo-legend .eu i{background:var(--ink)}
.geo-legend .ua i{background:var(--red)}
.geo-legend .off i{background:rgba(16,19,23,.14)}
.geo-adv{list-style:none;margin-top:26px;border-top:1px solid var(--line)}
.geo-adv li{border-bottom:1px solid var(--line);padding:15px 0;
  display:grid;grid-template-columns:46px 1fr;gap:16px;align-items:baseline}
.geo-adv .n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--red)}
.geo-adv b{font-family:var(--tech);font-variation-settings:'wdth' 112;font-weight:700;
  font-size:16px;text-transform:uppercase;display:block}
.geo-adv p{margin-top:5px;font-size:14px;line-height:1.58;color:var(--muted);max-width:36ch}
.globe-chip{position:absolute;left:0;top:0;white-space:nowrap;
  font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:var(--paper);
  background:rgba(10,12,15,.82);border:1px solid rgba(242,241,237,.22);
  padding:4px 7px;will-change:transform,opacity;transition:opacity .35s linear}
.globe-chip.ua{border-color:rgba(242,241,237,.45)}
.globe-chip.home{background:var(--red);color:#fff;border-color:var(--red);font-weight:500}
.geo-hint{position:absolute;left:0;right:0;bottom:14px;text-align:center;
  font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--muted)}
@media(max-width:1080px){
  .geo-stage{height:min(380px,50svh);order:-1}
  .geo-in{grid-template-columns:1fr;min-height:0;padding:calc(var(--u)*8) 18px;gap:22px}
  .geo-copy{background:none;padding-right:0}
  .globe-chip{font-size:8.5px;padding:3px 6px}
}
/* =========================================================================
   КАТЕГОРІЇ ТЕХНІКИ — одразу під картою, без розриву
   ========================================================================= */
.fleet-strip{position:relative;margin-top:-40px;padding-bottom:calc(var(--u)*12);z-index:3}
.fleet-strip .lead-row{display:flex;align-items:baseline;justify-content:space-between;
  gap:20px;flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid var(--line)}
.fleet-strip .lead-row h3{font-family:var(--tech);font-variation-settings:'wdth' 112;
  font-weight:700;text-transform:uppercase;font-size:clamp(18px,2vw,26px);letter-spacing:-.01em}
.fleet-strip .lead-row span{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--muted)}
.fleet-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-top:0}
.fleet-card{background:var(--card);padding:24px 22px 22px;display:flex;flex-direction:column;gap:12px;
  transition:background .4s var(--e)}
.fleet-card:hover{background:var(--paper-2)}
.fleet-card .no{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--red)}
.fleet-card h4{font-family:var(--tech);font-variation-settings:'wdth' 110;font-weight:700;
  text-transform:uppercase;font-size:17px;letter-spacing:-.005em}
.fleet-card p{font-size:13.5px;line-height:1.6;color:var(--muted)}
.fleet-card dl{margin-top:auto;border-top:1px solid var(--line-2);padding-top:12px;
  display:flex;flex-direction:column;gap:7px}
.fleet-card dl>div{display:flex;justify-content:space-between;gap:12px;
  font-family:var(--mono);font-size:11.5px}
.fleet-card dt{color:var(--muted);letter-spacing:.08em}
.fleet-card dd{color:var(--ink)}
@media(max-width:1080px){.fleet-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){
  .fleet-grid{grid-template-columns:1fr}
  .fleet-strip{margin-top:-12px;padding-bottom:calc(var(--u)*7)}
}
/* =========================================================================
   ПАРК — три конфігурації (assets/park.js)
   Секція липне, скрол веде стрічку вбік. Фон білий, тому перехід
   із паперової карти в парк іде без видимої межі.
   ========================================================================= */
.dwrap{height:230vh;position:relative;background:#fff}
/* м'який стик із секцією карти зверху */
.dwrap::before{content:'';position:absolute;left:0;right:0;top:0;height:160px;z-index:5;
  pointer-events:none;background:linear-gradient(180deg,var(--paper),rgba(255,255,255,0))}
.dsticky{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;
  justify-content:center;overflow:hidden;background:#fff}
.dhead{position:absolute;top:13vh;left:0;right:0;padding:0 calc(var(--u)*4);z-index:4}
.dhead .k{display:block;margin-bottom:10px}
.dtitle{font-family:var(--display);font-weight:800;letter-spacing:-.028em;
  font-size:clamp(22px,3vw,44px);line-height:1.02}
.dtitle em{font-style:normal;color:var(--red)}
.dghost{position:absolute;left:0;right:0;top:24vh;text-align:center;z-index:1;pointer-events:none;
  font-family:var(--tech);font-variation-settings:'wdth' 122;font-weight:800;
  font-size:clamp(90px,19vw,290px);line-height:.8;color:rgba(16,19,23,.05);
  letter-spacing:-.04em;white-space:nowrap;overflow:hidden}
.dghost span{display:inline-block;transition:opacity .3s var(--e),transform .5s var(--e)}
.dstage{position:relative;z-index:2;overflow:hidden}
.dtrack{display:flex;width:300%;will-change:transform}
.dslide{width:33.3333%;padding:0 4vw;display:flex;align-items:center;justify-content:center;
  position:relative}
.dslide video,.dslide img{width:100%;max-height:42vh;object-fit:contain;position:relative;z-index:2;
  /* кадри зняті на білому — множення прибирає підкладку, лишається сама машина */
  mix-blend-mode:multiply}
.dline{position:relative;height:1px;background:rgba(16,19,23,.09);
  margin:3vh calc(var(--u)*4) 0}
.dline i{position:absolute;left:0;top:-1px;height:3px;width:0;background:var(--red)}
.dmeta{position:absolute;bottom:11vh;left:0;right:0;padding:0 calc(var(--u)*4);z-index:4;
  display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.dnames{position:relative;min-height:82px;flex:1 1 400px}
.dn{position:absolute;inset:0;opacity:0;transform:translateY(14px);transition:all .45s var(--e)}
.dn.act{opacity:1;transform:none}
.dn b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(16px,2vw,26px);
  letter-spacing:-.02em}
.dn span{display:block;margin-top:9px;font-size:13px;color:var(--ink-2);max-width:540px;line-height:1.7}
.dn i{font-style:normal;color:var(--muted)}
.dnums{display:flex;gap:26px}
.dnums b{display:block;font-family:var(--mono);font-size:clamp(15px,1.8vw,22px);font-weight:500}
.dnums span{display:block;margin-top:7px;font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;color:var(--muted)}
.ddots{position:absolute;bottom:5.5vh;left:0;right:0;display:flex;gap:7px;
  justify-content:center;z-index:4}
.ddots i{width:26px;height:2px;background:rgba(16,19,23,.16);transition:background .4s var(--e)}
.ddots i.act{background:var(--red)}
@media(max-width:900px){
  .dwrap{height:230vh}
  .dhead,.dmeta{padding:0 18px}
  .dline{margin:3vh 18px 0}
  .dslide video,.dslide img{max-height:32vh}
  .dnames{min-height:104px;flex:1 1 100%}
  .dnums{gap:18px}
}
@media (prefers-reduced-motion:reduce){
  .dwrap{height:auto}
  .dsticky{position:relative;height:auto;padding:60px 0}
}
/* === FINAL CINEMATIC GLOBE — video-reference composition === */
.earth-in{max-width:1600px;grid-template-columns:minmax(360px,.78fr) minmax(620px,1.22fr);gap:0;padding-left:max(32px,4vw);padding-right:0}
.earth-copy{position:relative;z-index:3;max-width:560px;transform:translateX(-1vw)}
.earth-h{font-size:clamp(42px,4.35vw,74px);max-width:9.3ch}
.earth-stage{height:min(900px,90svh);width:58vw;max-width:none;margin-left:-4vw;margin-right:-6vw;overflow:visible}
.earth-cv{overflow:visible}
.earth-hint{bottom:26px;color:rgba(13,17,20,.38)}
.earth-pin{font-size:9px;letter-spacing:.10em;background:rgba(7,8,10,.72);border:1px solid rgba(255,255,255,.10);padding:3px 6px;border-radius:2px;text-shadow:none;color:rgba(255,255,255,.86);backdrop-filter:blur(4px)}
.earth-pin.hq{background:rgba(211,21,35,.90);border-color:rgba(255,255,255,.12);padding:4px 7px;box-shadow:0 0 16px rgba(230,28,40,.22)}
@media(max-width:1200px){.earth-in{grid-template-columns:minmax(320px,.86fr) minmax(540px,1.14fr)}.earth-stage{width:61vw;margin-left:-5vw}.earth-h{font-size:clamp(40px,4.6vw,64px)}}
@media(max-width:1080px){.earth-in{grid-template-columns:1fr;padding:64px 18px}.earth-copy{transform:none;max-width:none}.earth-stage{width:100%;height:min(560px,64svh);margin:0;order:-1}.earth-h{max-width:none}.earth-hint{bottom:4px}}
/* =========================================================================
   FINAL ROUTE MAP — 3D EUROPE / animated logistics network
   Replaces the globe. Keeps the site's warm paper language and adds only
   restrained motion: route pulses, HQ heartbeat and subtle perspective drift.
   ========================================================================= */
.earth-sec{
  /* Exact paper tone sampled from the Higgsfield map asset.
     Using the same tone makes the image edge disappear without cutting away its soft shadows. */
  background:#EFEBE6;
  overflow:hidden;
}
.earth-in{
  max-width:1720px;
  min-height:94svh;
  grid-template-columns:minmax(360px,.76fr) minmax(700px,1.34fr);
  gap:0;
  padding:clamp(72px,8vh,116px) 0 clamp(72px,8vh,116px) max(32px,4.7vw);
  align-items:center;
}
.earth-copy{
  z-index:6;
  max-width:575px;
  transform:none;
  padding-right:24px;
}
.earth-h{
  max-width:9.6ch;
  font-size:clamp(44px,4.7vw,80px);
  line-height:.94;
}
.earth-sub{max-width:37ch;margin-top:24px}
.earth-stats{margin-top:38px;max-width:620px}
.route-map-stage{
  position:relative;
  z-index:2;
  width:min(68vw,1160px);
  height:min(790px,80svh);
  margin-left:-7vw;
  margin-right:-5vw;
  display:flex;
  align-items:center;
  justify-content:center;
  isolation:isolate;
}
.route-map-stage::before{
  content:'';
  position:absolute;
  inset:13% 5% 5% 7%;
  background:radial-gradient(ellipse at 58% 60%,rgba(16,19,23,.075),rgba(16,19,23,.018) 46%,transparent 73%);
  filter:blur(34px);
  opacity:.36;
  pointer-events:none;
  z-index:-1;
}
.route-map-visual{
  position:relative;
  width:100%;
  max-width:1160px;
  transform-style:preserve-3d;
  transform-origin:56% 58%;
  will-change:transform;
}
.route-map-img{
  width:100%;
  height:auto;
  object-fit:contain;
  user-select:none;
  pointer-events:none;
  filter:contrast(1.018) saturate(.96) drop-shadow(0 24px 30px rgba(16,19,23,.055));
  -webkit-mask-image:none;
  mask-image:none;
}
.route-map-overlay{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
}
.route-paths path{
  fill:none;
  stroke:rgba(200,16,46,.075);
  stroke-width:1.25;
  stroke-linecap:round;
  stroke-dasharray:1.5 9;
}
.route-stop{
  fill:#fff;
  stroke:rgba(200,16,46,.62);
  stroke-width:2;
  filter:drop-shadow(0 0 6px rgba(200,16,46,.24));
  opacity:.72;
}
.route-old-hq-cover{
  fill:rgba(164,31,54,.72);
  filter:blur(.2px);
}
.route-traveler{mix-blend-mode:multiply}
.route-hq-core{fill:#fff;stroke:var(--red);stroke-width:4;filter:drop-shadow(0 0 5px rgba(200,16,46,.55))}
.route-hq-glow{opacity:.58;animation:routeHqGlow 2.8s ease-in-out infinite}
.route-hq-wave{fill:none;stroke:rgba(200,16,46,.44);stroke-width:1.55;transform-box:fill-box;transform-origin:center;opacity:0}
.route-hq-wave-a{animation:routeWave 3.2s ease-out infinite}
.route-hq-wave-b{animation:routeWave 3.2s 1.6s ease-out infinite}
0%{transform:scale(.3);opacity:.48}
72%,100%{transform:scale(2.25);opacity:0}
0%,100%{opacity:.35;transform:scale(.84)}
50%{opacity:.76;transform:scale(1.12)}
.route-map-tag{
  position:absolute;
  left:61.9%;top:46.8%;
  transform:translate(16px,-50%);
  display:flex;align-items:center;gap:8px;
  padding:7px 10px;
  background:rgba(239,235,230,.90);
  border:1px solid rgba(16,19,23,.10);
  box-shadow:0 8px 24px rgba(16,19,23,.045);
  backdrop-filter:blur(10px);
  font-family:var(--mono);font-size:8px;letter-spacing:.15em;color:var(--ink-2);
  white-space:nowrap;
}
.route-map-tag span{width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px rgba(200,16,46,.09)}
.route-map-caption{
  position:absolute;
  right:7.5%;bottom:5%;
  display:flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:8px;letter-spacing:.18em;color:rgba(16,19,23,.43);
}
.route-map-caption span{color:var(--red);font-weight:500}
@media(max-width:1280px){
  .earth-in{grid-template-columns:minmax(330px,.82fr) minmax(610px,1.18fr);padding-left:32px}
  .route-map-stage{width:66vw;margin-left:-8vw}
  .earth-h{font-size:clamp(42px,4.9vw,68px)}
}
@media(max-width:1080px){
  .earth-in{display:flex;flex-direction:column;min-height:0;padding:72px 18px 64px;gap:28px}
  .earth-copy{max-width:760px;width:100%;padding-right:0;order:1}
  .earth-h{max-width:12ch}
  .route-map-stage{order:2;width:min(112vw,920px);height:auto;min-height:480px;margin:-14px -9vw -10px}
  .route-map-caption{right:10%;bottom:4%}
}
@media(max-width:700px){
  .earth-in{padding-top:58px}
  .earth-h{font-size:clamp(40px,13vw,62px);max-width:9.5ch}
  .earth-sub{font-size:15px}
  .earth-stats{margin-top:30px}
  .route-map-stage{width:124vw;min-height:360px;margin:0 -18vw -18px}
  .route-map-tag{display:none}
  .route-map-caption{right:15%;bottom:2%;font-size:7px}
  .route-paths path{stroke-width:2}
}
@media(prefers-reduced-motion:reduce){
  .route-map-visual{transform:none!important}
  .route-traveler{display:none}
  .route-hq-wave,.route-hq-glow{animation:none}
}
/* =========================================================================
   V12 — SEAMLESS MAP + REFERENCE-LIKE FLEET TRANSITION
   ========================================================================= */
.earth-sec{
  background:var(--paper)!important;
}
.earth-in{
  max-width:1760px;
  grid-template-columns:minmax(360px,.72fr) minmax(720px,1.38fr);
  padding-left:max(30px,4.2vw);
}
.earth-copy{max-width:570px;padding-right:18px}
.route-map-stage{
  width:min(72vw,1240px);
  height:min(820px,82svh);
  margin-left:-10vw;
  margin-right:-6vw;
}
.route-map-stage::before{
  inset:11% 4% 4% 8%;
  background:radial-gradient(ellipse at 61% 61%,rgba(16,19,23,.058),rgba(16,19,23,.012) 49%,transparent 75%);
  filter:blur(38px);
  opacity:.28;
}
.route-map-visual{
  max-width:1240px;
  /* картинка тепер має фон, зведений до --paper; додатково губимо край
     у великій зоні негативного простору, а не по самій географії */
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.30) 4%,#000 12%,#000 96%,rgba(0,0,0,.78) 100%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.30) 4%,#000 12%,#000 96%,rgba(0,0,0,.78) 100%);
}
.route-map-img{
  filter:contrast(1.012) saturate(.95) drop-shadow(0 22px 28px rgba(16,19,23,.045));
}
.route-old-hq-cover{
  fill:rgba(190,28,52,.80);
  opacity:.28;
  filter:blur(7px);
}
.route-paths path{
  stroke:rgba(200,16,46,.13);
  stroke-width:1.15;
  stroke-dasharray:none;
}
.route-stop{opacity:.55;stroke-width:1.6}
.route-hq-core{stroke-width:3.2}
.route-map-tag{
  left:60.9%;top:47.1%;
  background:rgba(242,241,237,.91);
  border-color:rgba(16,19,23,.085);
  box-shadow:0 9px 26px rgba(16,19,23,.035);
}
/* Парк — довший scroll runway, щоб третя машина реально продовжувала рух. */
.dwrap{height:230vh}
.dsticky{--park-outro:0}
.dsticky::after{
  content:'';position:absolute;z-index:1;left:5vw;right:-4vw;top:53%;height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(16,19,23,.055) 18%,rgba(200,16,46,.28) 55%,rgba(16,19,23,.07) 100%);
  transform:scaleX(var(--park-outro));transform-origin:left center;
  opacity:calc(var(--park-outro) * .85);pointer-events:none;
}
.dhead,.dmeta,.ddots,.dline{will-change:opacity,transform}
.dslide video,.dslide img{
  width:92%;
  max-height:39vh;
  transition:none;
  transform-origin:58% 66%;
  will-change:transform,opacity;
}
.dslide:nth-child(3) img{
  width:88%;
  max-height:37vh;
}
/* Під час фінального виїзду прибираємо відчуття каруселі й лишаємо машину. */
.dsticky[style*="--park-outro"] .dstage{overflow:visible}
/* Наступна частина сайту підхоплює рух без різкого стику. */
.sheet{position:relative;z-index:6;background:var(--paper)}
/* у темній секції аркуш не має замальовувати фон — інакше поля форми зникають */
.dark .sheet{background:transparent}
.dark .sheet::before{background:linear-gradient(90deg,transparent,rgba(242,241,237,.15) 18%,rgba(242,241,237,.15) 82%,transparent)}
.sheet::before{
  content:'';display:block;height:1px;margin:0 calc(var(--u)*-4) 0;
  background:linear-gradient(90deg,transparent,rgba(16,19,23,.11) 18%,rgba(16,19,23,.11) 82%,transparent);
}
@media(max-width:1280px){
  .route-map-stage{width:70vw;margin-left:-10vw}
}
@media(max-width:1080px){
  .route-map-visual{-webkit-mask-image:none;mask-image:none}
  .route-map-stage{width:min(114vw,940px);margin:-10px -8vw -12px}
  .dwrap{height:230vh}
  .dslide video,.dslide img{width:96%;max-height:34vh}
}
@media(max-width:700px){
  .route-map-stage{width:126vw;margin:0 -18vw -16px}
  .dwrap{height:230vh}
}
@media(prefers-reduced-motion:reduce){
  .dsticky::after{display:none}
  .dslide:nth-child(3) img{transform:none!important;opacity:1!important}
}
/* =========================================================================
   V13 — ROAD STORY / COMPANY ADVANTAGES
   Reference mechanic: the final truck leaves the fleet, road bends downward,
   then the vehicle continues through a vertical story while copy appears beside it.
   ========================================================================= */
.road-story{position:relative;height:440vh;background:var(--paper);z-index:7}
.road-sticky{position:sticky;top:0;height:100vh;min-height:680px;overflow:hidden;background:var(--paper);isolation:isolate}
.road-scene{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible}
.road-asphalt{fill:none;stroke:#101317;stroke-width:215;stroke-linecap:round;stroke-linejoin:round}
.road-edge{display:none}
.road-center{fill:none;stroke:rgba(242,241,237,.50);stroke-width:3.3;stroke-linecap:round;stroke-dasharray:34 34}
.road-vehicle{will-change:transform}
.road-trailer{fill:#F3F2EE;stroke:#20242A;stroke-width:1.4}
.road-cab{fill:#F7F6F2;stroke:#20242A;stroke-width:1.4}
.road-glass{fill:#242930}
.road-wheels rect{fill:#050607}
.road-truck-word{font-family:var(--mono);font-size:13px;letter-spacing:.14em;fill:#20242A}
.road-ghost{position:absolute;z-index:0;left:-2vw;top:31%;font-family:var(--display);font-weight:800;font-size:clamp(120px,19vw,360px);line-height:.78;letter-spacing:-.06em;color:var(--ink);white-space:nowrap;opacity:.035;pointer-events:none;will-change:transform,opacity}
.road-intro{position:absolute;z-index:3;left:5vw;top:12.5%;display:flex;align-items:center;gap:28px;will-change:transform,opacity}
.road-intro-line{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:8px;letter-spacing:.18em;color:var(--muted)}
.road-intro-line span{display:block;width:62px;height:1px;background:var(--red)}
.road-intro-line b{font-weight:500}
.road-copy,.road-benefit{position:absolute;z-index:4;opacity:0;will-change:opacity,transform}
.road-copy-main{left:5.1vw;top:43%;width:min(35vw,560px)}
.road-copy-main h2{margin-top:12px;font-family:var(--display);font-weight:800;font-size:clamp(42px,5.1vw,82px);letter-spacing:-.045em;line-height:.88;text-transform:uppercase}
.road-copy-main h2 em{font-style:normal;color:var(--red)}
.road-copy-main p{margin-top:23px;max-width:44ch;font-size:14px;line-height:1.7;color:var(--muted)}
.road-benefit{display:grid;grid-template-columns:48px minmax(0,1fr);gap:18px;width:min(29vw,430px);padding-top:14px;border-top:1px solid var(--line)}
.road-benefit-no{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--red);padding-top:2px}
.road-benefit h3{margin-top:8px;font-family:var(--display);font-size:clamp(20px,1.8vw,30px);line-height:1.04;letter-spacing:-.025em}
.road-benefit p{margin-top:9px;font-size:12.5px;line-height:1.58;color:var(--muted);max-width:38ch}
.road-benefit-a{right:5.2vw;top:46%}
.road-benefit-b{left:6.2vw;top:69%}
.road-benefit-c{right:6vw;top:68%}
.road-benefit-d{right:8.5vw;top:84%}
.road-progress{position:absolute;z-index:5;left:5vw;right:5vw;bottom:26px;height:1px;background:rgba(16,19,23,.08);overflow:hidden}
.road-progress i{display:block;width:100%;height:100%;background:var(--red);transform:scaleX(0);transform-origin:left center;will-change:transform}
/* Fleet hand-off: the last vehicle exits farther and slightly downward before the road sequence takes over. */
.dwrap{height:230vh}
.dslide:nth-child(3) img{transform-origin:62% 64%}
@media(max-width:1180px){
  .road-copy-main{width:min(39vw,500px)}
  .road-benefit{width:min(31vw,390px)}
  .road-asphalt{stroke-width:190}
  .road-edge{stroke-width:168}
}
@media(max-width:900px){
  .road-story{height:360vh}
  .road-sticky{min-height:620px}
  .road-ghost{top:26%;font-size:27vw}
  .road-copy-main{left:22px;top:40%;width:43vw}
  .road-copy-main h2{font-size:clamp(34px,7vw,58px)}
  .road-benefit{width:36vw;grid-template-columns:32px 1fr;gap:10px}
  .road-benefit-a{right:20px;top:47%}.road-benefit-b{left:22px;top:72%}.road-benefit-c{right:20px;top:70%}.road-benefit-d{right:20px;top:86%}
  .road-asphalt{stroke-width:155}.road-edge{stroke-width:137}.road-center{stroke-width:2.5;stroke-dasharray:25 25}
}
@media(max-width:700px){
  .road-story{height:330vh}
  .road-sticky{height:100svh;min-height:620px}
  .road-intro{left:18px;top:12%;gap:14px}.road-intro-line{display:none}
  .road-copy-main{left:18px;right:18px;top:35%;width:auto;max-width:360px}
  .road-copy-main p{font-size:13px;max-width:32ch}
  .road-benefit{width:43vw;padding-top:9px}.road-benefit p{font-size:11px}.road-benefit h3{font-size:18px}
  .road-benefit-a{right:14px;top:52%}.road-benefit-b{left:14px;top:70%}.road-benefit-c{right:14px;top:73%}.road-benefit-d{right:14px;top:88%}
  .road-asphalt{stroke-width:128}.road-edge{stroke-width:112}.road-center{stroke-width:2.2;stroke-dasharray:20 20}
  .road-progress{left:18px;right:18px}
}
@media(prefers-reduced-motion:reduce){
  .road-story{height:auto}.road-sticky{position:relative;height:auto;min-height:980px}
  .road-copy,.road-benefit{opacity:1!important;transform:none!important}
  .road-progress{display:none}
}
/* =========================================================================
   V14 — TRUE TRUCK HAND-OFF / T-JUNCTION STORY
   The last fleet vehicle stays visible, then the same livery morphs through
   side -> overhead 3/4 -> top view and turns down at a real T-junction.
   ========================================================================= */
.dwrap{height:230vh}
.dslide:nth-child(3) img{
  width:min(88%,1260px);max-height:39vh;object-fit:contain;
  filter:drop-shadow(0 18px 24px rgba(16,19,23,.10));
  transform-origin:55% 58%;
}
.road-story{height:500vh;background:var(--paper)}
.road-sticky{background:var(--paper)}
.road-scene{z-index:1}
.road-asphalt{stroke:#111418;stroke-width:226;stroke-linecap:butt;stroke-linejoin:miter}
.road-center{stroke:rgba(242,241,237,.57);stroke-width:3.2;stroke-linecap:round;stroke-dasharray:30 34}
.road-junction-core{fill:#111418}
.road-junction-ring{fill:none;stroke:rgba(200,16,46,.20);stroke-width:1.4}
.road-vehicle{will-change:transform;transform-box:fill-box;transform-origin:center}
.road-truck-img{opacity:0;will-change:opacity;pointer-events:none}
#roadTruckSide{opacity:1}
.road-copy-main{left:5vw;top:47%;width:min(32vw,520px)}
.road-benefit-a{right:5vw;top:45%}
.road-benefit-b{left:5.8vw;top:68%}
.road-benefit-c{right:5.5vw;top:68%}
.road-benefit-d{right:7vw;top:84%}
.road-intro{top:10.5%}
.road-ghost{top:34%;opacity:.025}
@media(max-width:1180px){
  .road-asphalt{stroke-width:194}
  .road-copy-main{width:min(36vw,470px)}
}
@media(max-width:900px){
  .road-story{height:410vh}
  .road-asphalt{stroke-width:158}
  .road-copy-main{width:42vw}
}
@media(max-width:700px){
  .road-story{height:360vh}
  .road-asphalt{stroke-width:128}
  .road-copy-main{top:37%}
  .road-benefit-a{top:56%}.road-benefit-b{top:73%}.road-benefit-c{top:76%}.road-benefit-d{top:89%}
}
/* =========================================================================
   V15 — seamless fleet hand-off + top-view road story
   ========================================================================= */
.dwrap{height:230vh}
.dsticky{overflow:hidden}
.dstage{will-change:transform,opacity;transition:none}
.park-handoff{
  position:absolute;z-index:9;left:50%;top:48%;width:min(72vw,1180px);aspect-ratio:1.96/1;
  pointer-events:none;opacity:0;transform:translate(-50%,-50%);transform-origin:center center;
  will-change:transform,opacity;filter:drop-shadow(0 18px 22px rgba(16,19,23,.10));
}
.park-handoff img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
/* Keep the third configurator vehicle exactly as its original slide asset. */
.dslide:nth-child(3) img{width:100%;max-height:40vh;transform:none!important;transform-origin:center center}
.road-story{position:relative;height:590vh;background:var(--paper);z-index:7}
.road-sticky{position:sticky;top:0;height:100vh;min-height:680px;overflow:hidden;background:var(--paper);isolation:isolate}
.road-chapter-a{position:absolute;inset:0;z-index:0;pointer-events:none}
.road-kicker{position:absolute;left:5vw;top:10vh;display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--muted)}
.road-kicker span{width:58px;height:1px;background:var(--red)}
.road-huge{position:absolute;left:-1.5vw;top:32vh;font-family:var(--display);font-size:clamp(150px,22vw,410px);font-weight:800;letter-spacing:-.065em;line-height:.72;white-space:nowrap;color:var(--ink);opacity:.03;will-change:transform,opacity}
.road-world{position:absolute;inset:0;z-index:1;pointer-events:none;--road-shift:0px}
.road-horizontal,.road-vertical,.road-junction{position:absolute;background:#101215;box-shadow:0 0 0 1px rgba(16,19,23,.03);will-change:transform,opacity}
.road-horizontal{left:-10vw;top:17.8vh;width:120vw;height:18vh;transform-origin:left center;transform:scaleX(0)}
.road-vertical{left:56.1vw;top:17.8vh;width:13.2vw;height:108vh;transform-origin:center top;transform:scaleY(0)}
.road-junction{left:55.7vw;top:17.4vh;width:14vw;height:18.8vh;border-radius:0 0 46% 46%;opacity:0}
.road-horizontal i,.road-vertical i{position:absolute;display:block;opacity:.50}
.road-horizontal i{left:0;right:0;top:50%;height:3px;transform:translateY(-50%);background:repeating-linear-gradient(90deg,rgba(245,244,240,.72) 0 34px,transparent 34px 68px);background-position-x:var(--road-shift)}
.road-vertical i{top:0;bottom:0;left:50%;width:3px;transform:translateX(-50%);background:repeating-linear-gradient(180deg,rgba(245,244,240,.72) 0 34px,transparent 34px 68px);background-position-y:var(--road-shift)}
.road-horizontal::before,.road-vertical::before{content:'';position:absolute;inset:7px;border:1px solid rgba(255,255,255,.045);pointer-events:none}
.road-truck-stage{
  position:absolute;z-index:4;width:min(34vw,620px);aspect-ratio:1.96/1;left:22.5vw;top:16.6vh;
  transform:translate(-50%,-50%);transform-origin:center center;will-change:left,top,transform;
  filter:drop-shadow(0 14px 15px rgba(16,19,23,.16));pointer-events:none;
}
.road-truck-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;will-change:opacity}
.road-truck-side{opacity:1}
.road-wheel{position:absolute;top:73.3%;width:3.55%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(250,250,248,.88);background:conic-gradient(from 0deg,#27292c 0 10deg,#7e1422 10deg 20deg,#27292c 20deg 38deg,#aaa 38deg 45deg,#27292c 45deg 72deg);box-shadow:inset 0 0 0 2px rgba(8,9,10,.78);opacity:0;transform-origin:center;will-change:transform,opacity}
.rw1{left:17.2%}
.rw2{left:42.6%}
.rw3{left:74.1%}
.rw4{left:82.4%}
.rw5{left:90.0%}
.road-utp{position:absolute;z-index:6;opacity:0;will-change:opacity,transform;color:var(--ink)}
.road-utp .road-utp-no{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--red);margin-bottom:10px}
.road-utp .k{color:var(--red)}
.road-utp h2,.road-utp h3{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.045em;line-height:.88}
.road-utp h2{font-size:clamp(46px,5.4vw,88px);margin-top:10px}
.road-utp h3{font-size:clamp(32px,3.5vw,58px);margin-top:10px}
.road-utp h2 em{font-style:normal;color:var(--red)}
.road-utp p{margin-top:18px;max-width:42ch;font-size:13px;line-height:1.65;color:var(--muted)}
.road-utp-hero{left:5vw;top:42vh;width:min(39vw,600px)}
.road-utp-a{right:4.5vw;top:43vh;width:min(28vw,440px);text-align:left}
.road-utp-b{left:5vw;top:65vh;width:min(27vw,420px)}
.road-utp-c{right:4.5vw;top:65vh;width:min(28vw,430px)}
.road-utp-d{left:5vw;top:79vh;width:min(29vw,440px)}
.road-scroll-note{position:absolute;z-index:7;right:5vw;bottom:34px;display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:8px;letter-spacing:.2em;color:var(--muted);will-change:opacity}
.road-scroll-note span{width:54px;height:1px;background:var(--red)}
.road-progress{position:absolute;z-index:8;left:5vw;right:5vw;bottom:22px;height:1px;background:rgba(16,19,23,.08);overflow:hidden}
.road-progress i{display:block;width:100%;height:100%;background:var(--red);transform:scaleX(0);transform-origin:left center;will-change:transform}
@media(max-width:1180px){
  .road-truck-stage{width:min(39vw,570px)}
  .road-vertical{left:56vw;width:14vw}.road-junction{left:55.7vw;width:14.5vw}
  .road-utp-hero{width:42vw}.road-utp-a,.road-utp-c{width:31vw}.road-utp-b,.road-utp-d{width:30vw}
}
@media(max-width:900px){
  .dwrap{height:230vh}
  .park-handoff{width:84vw}
  .road-story{height:520vh}
  .road-horizontal{top:19vh;height:15vh}.road-vertical{top:19vh;left:58vw;width:15vw}.road-junction{top:18.8vh;left:57.7vw;width:15.6vw;height:16vh}
  .road-truck-stage{width:45vw}
  .road-utp-hero{left:22px;top:41vh;width:47vw}.road-utp-a{right:20px;top:44vh;width:35vw}.road-utp-b{left:22px;top:67vh;width:34vw}.road-utp-c{right:20px;top:67vh;width:35vw}.road-utp-d{left:22px;top:81vh;width:36vw}
  .road-utp h2{font-size:clamp(38px,7vw,60px)}.road-utp h3{font-size:clamp(26px,4.7vw,42px)}
}
@media(max-width:700px){
  .road-story{height:450vh}.road-sticky{min-height:620px}
  .road-kicker{left:18px;top:8vh}.road-huge{font-size:34vw;top:27vh}
  .road-horizontal{top:17vh;height:12vh}.road-vertical{top:17vh;left:63vw;width:19vw}.road-junction{top:16.8vh;left:62.5vw;width:20vw;height:13vh}
  .road-truck-stage{width:58vw}
  .road-utp p{font-size:11.5px}.road-utp h2{font-size:34px}.road-utp h3{font-size:26px}
  .road-utp-hero{left:18px;top:38vh;width:52vw}.road-utp-a{right:14px;top:45vh;width:36vw}.road-utp-b{left:18px;top:68vh;width:41vw}.road-utp-c{right:14px;top:70vh;width:38vw}.road-utp-d{left:18px;top:83vh;width:42vw}
  .road-progress{left:18px;right:18px}.road-scroll-note{right:18px}
}
@media(prefers-reduced-motion:reduce){
  .park-handoff{display:none}.road-story{height:auto}.road-sticky{position:relative;height:auto;min-height:1150px}
  .road-horizontal,.road-vertical{transform:none!important}.road-junction{opacity:1!important}.road-truck-stage{left:63vw!important;top:42vh!important;transform:translate(-50%,-50%) rotate(-90deg) scale(.44)!important}
  .road-truck-side,.road-truck-angle{opacity:0!important}.road-truck-top{opacity:1!important}.road-utp{opacity:1!important;transform:none!important}.road-progress,.road-scroll-note{display:none}
}
/* =========================================================================
   V17 — unified ISO-to-road cinematic. Starts INSIDE the last fleet category.
   No separate road-story section; the same sticky scene grows into the journey.
   ========================================================================= */
.dsticky-bgfix{}  /* висота .dwrap живе нижче, в одному місці */
.dsticky{overflow:hidden!important;background:var(--paper)!important;isolation:isolate}
.dstage{z-index:2!important;transition:none!important;will-change:transform,opacity}
.dhead,.dmeta,.ddots,.dline,.dghost{will-change:opacity,transform}
.dslide:nth-child(3) img{width:100%!important;max-height:40vh!important;transform:none!important;filter:none!important;opacity:1;will-change:opacity}
.park-handoff{display:none!important}
.pw1{left:15.9%}
.pw2{left:42.4%}
.pw3{left:74.1%}
.pw4{left:82.1%}
.pw5{left:89.6%}
@media(max-width:1180px){
  
}
@media(max-width:900px){
  
}
@media(max-width:700px){
  
}
@media(prefers-reduced-motion:reduce){
  .dwrap{height:auto}.dsticky{position:relative!important;height:auto!important;min-height:980px}
  .park-journey{display:none!important}.dslide:nth-child(3) img{opacity:1!important}.dhead,.dmeta,.ddots,.dline,.dghost{opacity:1!important;transform:none!important}
}
.dsticky::after{display:none!important}
/* ===== V18 refinements: transparent truck frames + dark lower road scene ===== */
.dslide:nth-child(3) img{background:transparent!important}
/* ===== v23 park rebuild: static category trucks + shared road + clean journey ===== */

.dstage{padding-bottom:5.6vh}
.dslide{position:relative}
.dslide .dcard{width:100%;max-height:40vh;object-fit:contain;position:relative;z-index:2;display:block;filter:drop-shadow(0 18px 24px rgba(16,19,23,.08))}
.dslide .dcard-iso{width:88%;max-height:37vh}
.droad{position:absolute;left:4vw;right:4vw;bottom:8.2vh;height:62px;z-index:1;pointer-events:none;border-radius:40px;
  background:linear-gradient(180deg,rgba(16,19,23,.02),rgba(16,19,23,.08));
  box-shadow:inset 0 0 0 1px rgba(16,19,23,.05), inset 0 -10px 16px rgba(0,0,0,.04);
  overflow:hidden}
.droad::before{content:'';position:absolute;inset:8px;border-radius:32px;border:1px solid rgba(255,255,255,.35)}
.droad span{position:absolute;left:0;right:0;top:50%;height:2px;transform:translateY(-50%);opacity:.78;
  background:repeating-linear-gradient(90deg,rgba(246,245,241,.95) 0 28px,transparent 28px 56px)}
.dline{margin-top:2.2vh;position:relative;z-index:2}
@media(max-width:1180px){
  
  .dslide .dcard{max-height:36vh}
}
@media(max-width:900px){
  
  .droad{height:54px;bottom:8.8vh}
}
@media(max-width:700px){
  
  .droad{left:18px;right:18px;bottom:10vh;height:44px}
}
/* v25 journey overrides */
/* ЄДИНЕ місце, де задано бюджет прокрутки автопарку. Було 700vh — сім
   екранів на три слайди; відвідувач крутив і крутив, а нового не ставало. */
/* (висота автопарку задана нижче, рядок ~1768 — одне місце на весь файл) */
@media(max-width:1180px){
  
}
@media(max-width:900px){
  
}
@media(max-width:700px){
  
}
/* =========================================================================
   ПАРТНЕРИ — дві зустрічні стрічки з вантажівками (assets/partners.js)
   ========================================================================= */
.pt{background:var(--paper);border-top:1px solid var(--line);
  padding:calc(var(--u)*12) 0 calc(var(--u)*13);overflow:hidden}
.pt-head{max-width:1440px;margin:0 auto calc(var(--u)*6);
  padding:0 clamp(24px,4vw,64px);display:flex;align-items:flex-end;
  justify-content:space-between;gap:26px;flex-wrap:wrap}
.pt-head .k{display:block;margin-bottom:12px}
.pt-head .d2 em{font-style:normal;color:var(--red)}
.pt-head aside{font-size:13.5px;line-height:1.7;color:var(--muted);max-width:36ch}
.pt-rail{position:relative;overflow:hidden;padding:22px 0;
  border-top:1px solid var(--line)}
.pt-rail:last-of-type{border-bottom:1px solid var(--line)}
.pt-rail::before,.pt-rail::after{content:'';position:absolute;top:0;bottom:0;width:16vw;
  z-index:2;pointer-events:none}
.pt-rail::before{left:0;background:linear-gradient(90deg,var(--paper) 12%,rgba(242,241,237,0))}
.pt-rail::after{right:0;background:linear-gradient(270deg,var(--paper) 12%,rgba(242,241,237,0))}
.pt-track{display:flex;align-items:center;width:max-content;will-change:transform}
.pt-item{position:relative;display:flex;align-items:baseline;gap:12px;white-space:nowrap;
  padding:0 clamp(20px,2.2vw,34px);
  font-family:var(--tech);font-variation-settings:'wdth' 106;font-weight:700;
  text-transform:uppercase;font-size:clamp(19px,2.5vw,34px);letter-spacing:-.012em;
  color:var(--ink);transition:color .35s var(--e),opacity .35s var(--e)}
.pt-no{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.14em;
  color:var(--red);font-style:normal;transform:translateY(-.9em)}
.pt-rail:hover .pt-item{opacity:.35}
.pt-item:hover{opacity:1;color:var(--red)}
/* ромб із брендингу — єдиний роздільник у стрічці */
.pt-sep{flex:none;width:7px;height:7px;background:var(--red);
  transform:rotate(45deg);opacity:.55;margin:0 clamp(22px,2.6vw,46px)}
@media(max-width:900px){
  .pt{padding:calc(var(--u)*8) 0 calc(var(--u)*9)}
  .pt-head{padding:0 18px}
  .pt-rail{padding:16px 0}
  .pt-rail::before,.pt-rail::after{width:18vw}
  .pt-truck img{height:24px}
}
@media (prefers-reduced-motion:reduce){ .pt-track{transform:none!important} }
/* =========================================================================
   ПІДВАЛ — контакти, розташування і назва з крапок у самому низу
   ========================================================================= */
.ft{position:relative;background:var(--ink);color:var(--paper)}
.ft-top{border-top:1px solid rgba(242,241,237,.12)}
.ft-in{max-width:1560px;margin:0 auto;padding:calc(var(--u)*9) clamp(24px,4vw,72px) calc(var(--u)*7)}
.ft-grid{display:grid;grid-template-columns:.9fr 1.05fr .95fr 1.05fr;
  gap:clamp(24px,3.4vw,64px);align-items:start}
.ft-shot{background:#0C0F13;border:1px solid rgba(242,241,237,.10);
  display:flex;align-items:center;justify-content:center;padding:18px}
.ft-shot img{width:100%;height:auto;object-fit:contain;
  filter:grayscale(1) contrast(1.05) brightness(.95)}
.ft-blk .t,.ft-map .t{font-family:var(--mono);font-size:12px;letter-spacing:.12em;
  color:#7E858F;margin-bottom:12px}
.ft-blk p{font-size:14px;line-height:1.85;color:var(--paper)}
.ft-blk a{display:inline-block;font-size:14px;line-height:1.85;color:var(--paper);
  text-decoration:none;border-bottom:1px solid rgba(242,241,237,.28);
  transition:border-color .3s var(--e),color .3s var(--e)}
.ft-blk a:hover{color:var(--red);border-color:var(--red)}
.ft-dir{margin-top:8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em}
.ft-map-box{position:relative;background:#0C0F13;border:1px solid rgba(242,241,237,.14)}
.ft-map-box canvas{display:block;width:100%}
.ft-coords{margin-top:10px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  color:#7E858F}
.ft-legal{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  border-top:1px solid rgba(242,241,237,.12);
  padding:16px clamp(24px,4vw,72px);
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:#9AA0A8}
/* назва з крапок — в самому низу, курсор її розкидає */
.wm{position:relative;width:100%;background:var(--ink);
  padding:0 clamp(16px,2vw,40px) clamp(10px,1.4vw,22px);
  cursor:crosshair;touch-action:pan-y;overflow:clip}
.wm-cv{display:block;width:100%;max-width:100%}
.wm::after{content:'НАВЕДІТЬ КУРСОР';position:absolute;right:clamp(16px,2vw,40px);top:-2px;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;color:#4A5058;
  pointer-events:none}

/* Запасний напис. Звичайно схований — показуємо лише тоді, коли скрипт
   сам виявив, що з крапок слово не склалось (немає кириличного шрифту,
   полотно не намалювалось). Краще рівний напис, ніж кришиво з рисок. */
.wm-plain{display:none}
.wm.wm-failed,.wm.wm-plain-mode{height:auto !important;padding-top:clamp(14px,1.8vw,26px);cursor:default}
.wm.wm-failed .wm-cv,.wm.wm-plain-mode .wm-cv{display:none}
.wm.wm-failed::after,.wm.wm-plain-mode::after{content:none}
.wm.wm-failed .wm-plain,.wm.wm-plain-mode .wm-plain{display:block;text-align:center;
  font-family:var(--tech),Arial,sans-serif;font-weight:800;
  font-variation-settings:'wdth' 72,'wght' 800;
  /* хвіст «Д» виходить за базову лінію — лишаємо під нього місце,
     інакше overflow:clip у підвалі його зріже */
  font-size:clamp(34px,8.4vw,120px);line-height:1;letter-spacing:-.02em;
  padding-bottom:.14em;color:rgba(242,241,237,.46)}
@media(max-width:1080px){
  .ft-grid{grid-template-columns:1fr 1fr;gap:28px}
  .ft-shot{grid-column:1/-1}
}
@media(max-width:640px){
  .ft-grid{grid-template-columns:1fr}
  .ft-in{padding:calc(var(--u)*6) 18px calc(var(--u)*5)}
  .ft-legal{padding:14px 18px;flex-direction:column;gap:8px}
  .wm::after{display:none}
}
@media (prefers-reduced-motion:reduce){ .wm{cursor:default} }
/* позначка бази на великій карті маршрутів */
.route-hq-pulse{fill:none;stroke:#c8102e;stroke-width:2;opacity:.55;
  transform-origin:1248px 720px;animation:rhq 2.8s cubic-bezier(.16,.72,.16,1) infinite}
0%{transform:scale(.7);opacity:.7}
70%{transform:scale(2.6);opacity:0}
100%{opacity:0}
.route-hq-dot{fill:rgba(200,16,46,.22)}
.route-hq-core{fill:#c8102e;stroke:#fff;stroke-width:1.4}
.route-hq-lead{stroke:rgba(16,19,23,.45);stroke-width:1.4}
.route-hq-label{font-family:var(--mono);font-size:19px;letter-spacing:.14em;
  fill:var(--ink);text-anchor:middle;font-weight:500}
.route-hq-coords{font-family:var(--mono);font-size:15px;letter-spacing:.12em;
  fill:rgba(16,19,23,.5);text-anchor:middle}
/* =========================================================================
   УТП — чотири кінематографічні сцени (assets/drive.js)
   Кадр у заокругленій рамці майже на всю сторінку, текст виїжджає
   рядками при появі. Широке накреслення в заголовках.
   ========================================================================= */
.sc-wrap{background:var(--paper);padding:calc(var(--u)*12) 0 calc(var(--u)*14)}
.sc-head{max-width:1560px;margin:0 auto calc(var(--u)*7);padding:0 clamp(24px,4vw,72px)}
.sc-head .k{display:block;margin-bottom:14px}
.sc-title{font-family:var(--tech);font-variation-settings:'wdth' 118;font-weight:800;
  text-transform:uppercase;letter-spacing:-.026em;line-height:.98;
  font-size:clamp(30px,4.4vw,72px)}
.sc-title em{font-style:normal;color:var(--red)}

.sc{max-width:1560px;margin:0 auto calc(var(--u)*10);padding:0 clamp(24px,4vw,72px);
  position:relative}
.sc:last-child{margin-bottom:0}

/* кадр */
.sc-media{position:relative;overflow:hidden;border-radius:clamp(14px,1.6vw,26px);
  background:var(--ink);aspect-ratio:16/9;
  box-shadow:0 40px 80px -50px rgba(16,19,23,.7)}
.sc-media video,.sc-media img{display:block;width:100%;height:100%;object-fit:cover;
  transform:scale(1.08);will-change:transform}
.sc-media::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(9,11,14,.72) 4%,rgba(9,11,14,.12) 46%,rgba(9,11,14,.3))}
.sc-tag{position:absolute;left:clamp(16px,2vw,30px);top:clamp(16px,2vw,30px);z-index:3;
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:rgba(242,241,237,.82);
  background:rgba(9,11,14,.42);border:1px solid rgba(242,241,237,.2);
  padding:8px 12px;border-radius:999px;backdrop-filter:blur(6px)}

/* текст поверх кадру */
.sc-copy{position:absolute;left:clamp(46px,6vw,110px);right:clamp(46px,6vw,110px);
  bottom:clamp(34px,5vw,74px);z-index:4;color:var(--paper);pointer-events:none}
.sc-h{font-family:var(--tech);font-variation-settings:'wdth' 116;font-weight:800;
  text-transform:uppercase;letter-spacing:-.022em;line-height:1.0;
  font-size:clamp(24px,3.8vw,62px)}
.sc-line{display:block;overflow:hidden}
.sc-line i{display:block;font-style:normal;transform:translateY(105%);
  transition:transform .85s cubic-bezier(.16,.72,.16,1) var(--d,0ms)}
.sc.in .sc-line i{transform:none}
.sc-p{margin-top:clamp(12px,1.4vw,20px);max-width:52ch;
  font-size:clamp(14px,1.1vw,16.5px);line-height:1.72;color:rgba(242,241,237,.82);
  opacity:0;transform:translateY(16px);
  transition:opacity .7s var(--e) .35s,transform .7s var(--e) .35s}
.sc.in .sc-p{opacity:1;transform:none}

@media(max-width:900px){
  .sc-wrap{padding:calc(var(--u)*8) 0 calc(var(--u)*9)}
  .sc-head{padding:0 18px;margin-bottom:calc(var(--u)*4)}
  .sc{padding:0 18px;margin-bottom:calc(var(--u)*6)}
  .sc-media{aspect-ratio:4/5}
  .sc-copy{left:20px;right:20px;bottom:22px}
  .sc-p{max-width:100%}
}
@media (prefers-reduced-motion:reduce){
  .sc-line i{transform:none}
  .sc-p{opacity:1;transform:none}
  .sc-media video,.sc-media img{transform:none}
}

/* парк починається білим — стик із проїздом непомітний */
.dwrap{height:420vh;position:relative;background:var(--paper)}


/* =========================================================================
   КНОПКИ-ПІГУЛКИ — тільки у верхньому блоці
   Навігація і перша секція. Решта сайту зберігає свої кнопки.
   ========================================================================= */
.nav .go,
#geografiya .btn{position:relative;display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-weight:600;letter-spacing:.005em;text-transform:none;
  border-radius:999px;border:0;cursor:pointer;text-decoration:none;
  transition:transform .35s var(--e),box-shadow .35s var(--e),background .35s var(--e)}

#geografiya .btn{font-size:14.5px;padding:15px 26px}
#geografiya .btn::after{content:'';width:15px;height:1px;background:currentColor;
  transition:width .35s var(--e);opacity:.85}
#geografiya .btn:hover::after{width:24px}

#geografiya .btn-p{background:var(--red);color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset,
             0 10px 22px -10px rgba(200,16,46,.65),
             0 3px 8px -3px rgba(16,19,23,.28)}
#geografiya .btn-p:hover{transform:translateY(-1px);
  box-shadow:0 1px 0 rgba(255,255,255,.32) inset,
             0 16px 30px -12px rgba(200,16,46,.72),
             0 5px 12px -4px rgba(16,19,23,.3)}
#geografiya .btn-p:active{transform:translateY(1px);
  box-shadow:0 2px 6px -2px rgba(16,19,23,.35) inset}

#geografiya .btn-s{background:var(--paper-2);color:var(--ink);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,
             0 8px 18px -10px rgba(16,19,23,.45),
             0 2px 6px -2px rgba(16,19,23,.16)}
#geografiya .btn-s:hover{transform:translateY(-1px);background:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,1) inset,
             0 14px 26px -12px rgba(16,19,23,.5),
             0 4px 10px -3px rgba(16,19,23,.2)}
#geografiya .btn-s:active{transform:translateY(1px);
  box-shadow:0 2px 6px -2px rgba(16,19,23,.3) inset}

.nav .go{font-size:13px;padding:11px 20px;
  box-shadow:0 1px 0 rgba(255,255,255,.24) inset,
             0 8px 18px -10px rgba(16,19,23,.6)}
.nav .go:hover{transform:translateY(-1px)}
.nav .go:active{transform:translateY(1px)}

/* =========================================================================
   ЗАЇЗД У БОКС — відео на всю ширину, висота як була
   ========================================================================= */
.gt{background:var(--paper);border-top:1px solid var(--line);
  padding-top:calc(var(--u)*11)}
.gt-copy{max-width:1440px;margin:0 auto calc(var(--u)*5);
  padding:0 clamp(24px,4vw,72px)}
.gt-copy .k{display:block;color:var(--red);margin-bottom:14px}
.gt-h{font-family:var(--display);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(26px,3.5vw,54px);line-height:1.04;max-width:22ch}
.gt-h em{font-style:normal;color:var(--red)}
.gt-copy p{margin-top:16px;font-size:15.5px;line-height:1.75;color:var(--ink-2);max-width:52ch}

/* повна ширина екрана, висота фіксована — кадр не витягується */
.gt-frame{margin:0;position:relative;width:100%;background:var(--ink);overflow:hidden}
.gt-media{display:block;width:100%;height:clamp(300px,52vh,560px);object-fit:cover}
.gt-frame figcaption{position:absolute;left:clamp(24px,4vw,72px);bottom:16px;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:rgba(242,241,237,.75);
  background:rgba(9,11,14,.5);padding:7px 11px;backdrop-filter:blur(4px)}

@media(max-width:900px){
  .gt{padding-top:calc(var(--u)*7)}
  .gt-copy{padding:0 18px;margin-bottom:calc(var(--u)*3)}
  .gt-media{height:clamp(220px,38vh,360px)}
  .gt-frame figcaption{left:18px;bottom:12px}
}

/* =========================================================================
   ТЕХНІЧНИЙ РОЗБІР — боковий проїзд (assets/teardown.js)
   Машина стоїть боком, промінь іде вздовж неї, вузли спрацьовують по
   черзі. Підписи чергуються над і під машиною, тому не накладаються.
   ========================================================================= */
.tx{height:420vh;position:relative;background:var(--paper)}
.tx-sticky{position:sticky;top:0;height:100svh;overflow:hidden;
  display:grid;grid-template-rows:auto auto 1fr auto;row-gap:2vh;
  padding:8vh clamp(24px,4vw,72px) 7vh}

.tx-ghost{position:absolute;left:0;top:50%;transform:translateY(-50%);z-index:1;
  white-space:nowrap;pointer-events:none;user-select:none;will-change:transform,opacity;
  font-family:var(--tech);font-variation-settings:'wdth' 120;font-weight:800;
  text-transform:uppercase;letter-spacing:-.045em;
  font-size:clamp(120px,26vw,380px);line-height:.82;color:rgba(16,19,23,.06)}

.tx-head{position:relative;z-index:5}
.tx-lede{position:relative;z-index:5;margin-top:12px;font-size:14.5px;line-height:1.7;
  color:var(--muted);max-width:52ch}
.tx-head .k{display:block;margin-bottom:12px}
.tx-h{font-family:var(--display);font-weight:800;letter-spacing:-.028em;
  font-size:clamp(22px,2.9vw,44px);line-height:1.06;max-width:26ch}
.tx-h em{font-style:normal;color:var(--red)}

/* сцена з машиною */
.tx-mid{position:relative;display:flex;align-items:center;justify-content:center;min-height:0}
.tx-stage{position:relative;z-index:2;width:min(1080px,84vw);
  will-change:transform}
.tx-truck{display:block;width:100%;height:auto;
  filter:drop-shadow(0 26px 34px rgba(16,19,23,.20))}

/* промінь сканування */
.tx-scan{position:absolute;top:-6%;bottom:-6%;width:2px;margin-left:-1px;z-index:3;
  background:linear-gradient(180deg,rgba(200,16,46,0),var(--red) 18%,var(--red) 82%,rgba(200,16,46,0));
  box-shadow:0 0 18px rgba(200,16,46,.55)}

/* підписи */
.tx-notes{position:absolute;inset:0;z-index:4;pointer-events:none}
.tx-note{--v:0;position:absolute;left:var(--x);width:min(250px,22vw);
  opacity:var(--v);will-change:opacity}
.tx-note.up{bottom:100%;transform:translate(-50%,-22px)}
.tx-note.down{top:100%;transform:translate(-50%,22px)}

/* виноска від вузла до підпису */
.tx-note::before{content:'';position:absolute;left:50%;width:1px;
  background:var(--ink);opacity:.4}
.tx-note.up::before{top:100%;height:calc(24px * var(--v))}
.tx-note.down::before{bottom:100%;height:calc(24px * var(--v))}
.tx-note::after{content:'';position:absolute;left:50%;width:5px;height:5px;margin-left:-2.5px;
  background:var(--red);border-radius:50%;transform:scale(var(--v))}
.tx-note.up::after{top:calc(100% + 22px)}
.tx-note.down::after{bottom:calc(100% + 22px)}

.tx-note .c{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  color:var(--red);margin-bottom:7px}
.tx-note b{display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(14px,1.4vw,18px);letter-spacing:-.01em;line-height:1.2}
.tx-note p{margin-top:7px;font-size:12.5px;line-height:1.6;color:var(--muted)}

.tx-bar{position:absolute;left:0;right:0;bottom:0;height:2px;z-index:7;
  background:rgba(16,19,23,.1)}
.tx-bar i{display:block;height:100%;background:var(--red);transform:scaleX(0);transform-origin:left}

@media(max-width:1080px){
  .tx{height:340vh}
  .tx-sticky{padding:7vh 18px 6vh}
  .tx-stage{width:112vw}
  .tx-note{width:min(160px,32vw)}
  .tx-note p{display:none}
  .tx-note b{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .tx{height:auto}
  .tx-sticky{position:relative;height:auto;padding:80px 0 60px}
  .tx-note{--v:1}
  .tx-scan{display:none}
}

/* рентген: копія машини під променем показується наскрізь */
.tx-xray{position:absolute;left:0;top:0;width:100%;height:auto;pointer-events:none;
  clip-path:inset(0 100% 0 0);
  filter:invert(1) grayscale(1) contrast(1.55) brightness(1.12)
         drop-shadow(0 0 16px rgba(90,170,255,.45));
  mix-blend-mode:screen;opacity:.92}
.tx-cta{position:relative;z-index:6;justify-self:start}
@media(max-width:1080px){
  .tx-cta{left:18px;right:18px;justify-content:center;bottom:5vh}
}


/* =========================================================================
   ЦЕХ І БАЗА — реальні знімки, без прикрас
   ========================================================================= */
.tr{background:#fff;border-top:1px solid var(--line)}
.tr-in{max-width:1440px;margin:0 auto;padding:calc(var(--u)*12) clamp(24px,4vw,72px)}
.tr-head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,60px);
  align-items:end;margin-bottom:calc(var(--u)*5)}
.tr-head .k{display:block;margin-bottom:12px}
.tr-h{font-family:var(--display);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(26px,3.4vw,52px);line-height:1.04}
.tr-h em{font-style:normal;color:var(--red)}
.tr-lede{font-size:15px;line-height:1.75;color:var(--ink-2);max-width:48ch}

.tr-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tr-ph{margin:0;position:relative;overflow:hidden;background:var(--paper-2)}
.tr-ph.tall{grid-row:span 1}
.tr-ph img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;
  transition:transform .8s var(--e)}
.tr-ph.tall img{aspect-ratio:3/4}
.tr-ph:hover img{transform:scale(1.03)}
.tr-ph figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 14px 12px;
  background:linear-gradient(0deg,rgba(9,11,14,.86),rgba(9,11,14,0));color:var(--paper)}
.tr-ph figcaption b{display:block;font-family:var(--display);font-weight:700;font-size:14px}
.tr-ph figcaption span{display:block;margin-top:4px;font-family:var(--mono);font-size:11px;
  letter-spacing:.12em;color:rgba(242,241,237,.7)}

.tr-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,48px);
  margin-top:calc(var(--u)*6);border-top:1px solid var(--line);padding-top:24px}
.tr-facts dt{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--red);
  margin-bottom:10px}
.tr-facts dd{margin:0;font-size:14px;line-height:1.72;color:var(--ink-2)}

@media(max-width:1080px){
  .tr-head{grid-template-columns:1fr;gap:16px;align-items:start}
  .tr-grid{grid-template-columns:1fr 1fr}
  .tr-ph.wide{grid-column:span 2}
  .tr-facts{grid-template-columns:1fr 1fr;gap:18px}
}
@media(max-width:640px){
  .tr-in{padding:calc(var(--u)*8) 18px}
  .tr-grid{grid-template-columns:1fr}
  .tr-ph.wide{grid-column:span 1}
  .tr-facts{grid-template-columns:1fr}
}

/* === SERVICE STORY v41 — one pinned frame / changing copy + scene === */
.svc-story{position:relative;height:360vh;background:var(--paper);border-top:1px solid rgba(16,19,23,.12);border-bottom:1px solid rgba(16,19,23,.12)}
.svc-sticky{position:sticky;top:0;height:100svh;min-height:680px;overflow:hidden;background:var(--paper)}
.svc-shell{width:min(1760px,100%);height:100%;margin:0 auto;padding:clamp(84px,9vh,120px) clamp(28px,4.4vw,82px) clamp(34px,4vh,58px);display:grid;grid-template-columns:minmax(330px,.72fr) minmax(660px,1.28fr);gap:clamp(42px,5vw,96px);align-items:center}
.svc-copy{height:min(720px,78vh);display:flex;flex-direction:column;min-width:0}
.svc-eyebrow{display:flex;justify-content:space-between;align-items:center;padding-bottom:18px;border-bottom:1px solid rgba(16,19,23,.18)}
.svc-count{font:500 10px/1 var(--mono);letter-spacing:.18em;color:#7a7e82}.svc-count b{color:var(--red);font-weight:700}
.svc-copy-stack{position:relative;flex:1;min-height:430px}
.svc-copy-item{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;opacity:0;transform:translate3d(0,34px,0);pointer-events:none;transition:opacity .45s cubic-bezier(.22,.61,.36,1),transform .65s cubic-bezier(.16,1,.3,1)}
.svc-copy-item.is-active{opacity:1;transform:none;pointer-events:auto}
.svc-no{font:600 11px/1 var(--mono);letter-spacing:.18em;color:var(--red);margin-bottom:20px}
.svc-copy-item h2{font:800 clamp(48px,5.15vw,88px)/.88 var(--display);letter-spacing:-.055em;text-transform:uppercase;color:var(--ink);max-width:760px}
.svc-copy-item h2 em{font-style:normal;color:var(--red)}
.svc-copy-item p{max-width:570px;margin-top:28px;font-size:clamp(15px,1.12vw,19px);line-height:1.62;color:#555b60}
.svc-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:18px;border-top:1px solid rgba(16,19,23,.18)}
.svc-progress{display:flex;gap:7px;width:45%}.svc-progress i{height:2px;flex:1;background:#cac8c2;transition:background .35s,transform .35s;transform-origin:left}.svc-progress i.is-active{background:var(--red);transform:scaleY(1.8)}
.svc-link{font:700 10px/1 var(--mono);letter-spacing:.14em;color:var(--ink);text-decoration:none}.svc-link span{color:var(--red);margin-left:8px}
.svc-visual-wrap{height:min(760px,78vh);min-height:520px;display:flex;align-items:stretch}
.svc-visual{position:relative;width:100%;height:100%;overflow:hidden;background:#11161b;clip-path:polygon(0 0,92% 0,100% 8%,100% 100%,8% 100%,0 92%);box-shadow:0 28px 70px rgba(16,19,23,.16);isolation:isolate}
.svc-scene{position:absolute;inset:0;margin:0;opacity:0;transform:scale(1.045);transition:opacity .5s cubic-bezier(.22,.61,.36,1),transform 1.05s cubic-bezier(.16,1,.3,1);z-index:1}.svc-scene.is-active{opacity:1;transform:scale(1);z-index:2}
.svc-scene video,.svc-scene img{width:100%;height:100%;object-fit:cover;filter:saturate(.82) contrast(1.025)}
.svc-scene::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,12,15,.04),rgba(8,12,15,.18));pointer-events:none}
.svc-scene figcaption{position:absolute;left:26px;bottom:24px;z-index:5;color:white;display:flex;flex-direction:column;gap:7px;text-shadow:0 1px 10px rgba(0,0,0,.38)}
.svc-scene figcaption span{font:600 9px/1 var(--mono);letter-spacing:.18em;color:#ff5a70}.svc-scene figcaption b{font:600 13px/1.2 var(--display);letter-spacing:.03em;text-transform:uppercase}
.svc-corner-label{position:absolute;right:22px;top:22px;z-index:8;background:rgba(242,241,237,.9);backdrop-filter:blur(10px);padding:10px 12px;font:600 8px/1 var(--mono);letter-spacing:.16em;color:#24282c}.svc-corner-label span{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red);margin-right:7px}
.svc-index{position:absolute;right:24px;bottom:24px;z-index:7;color:rgba(255,255,255,.5);font:500 8px/1 var(--mono);letter-spacing:.18em}
.svc-tech-lines{position:absolute;inset:0;z-index:6;pointer-events:none;mix-blend-mode:screen}.svc-tech-lines i{position:absolute;background:rgba(200,16,46,.28);opacity:.5}.svc-tech-lines i:nth-child(1){width:90px;height:1px;right:0;top:17%}.svc-tech-lines i:nth-child(2){width:1px;height:72px;left:8%;bottom:0}.svc-tech-lines i:nth-child(3){width:56px;height:1px;left:0;bottom:8%}
@media(max-width:980px){.svc-story{height:310vh}.svc-sticky{min-height:640px}.svc-shell{grid-template-columns:1fr;grid-template-rows:.72fr 1.28fr;padding-top:78px;gap:18px}.svc-copy{height:auto;min-height:300px}.svc-copy-stack{min-height:210px}.svc-copy-item{justify-content:flex-start;padding-top:24px}.svc-copy-item h2{font-size:clamp(38px,9vw,62px)}.svc-copy-item p{margin-top:16px;font-size:14px}.svc-visual-wrap{height:46vh;min-height:330px}.svc-foot{margin-top:10px}}
@media(max-width:620px){.svc-story{height:290vh}.svc-shell{padding-left:18px;padding-right:18px}.svc-eyebrow{padding-bottom:12px}.svc-copy-item h2{font-size:40px}.svc-copy-item p{font-size:13px;line-height:1.5}.svc-visual{clip-path:polygon(0 0,90% 0,100% 9%,100% 100%,10% 100%,0 91%)}.svc-scene figcaption{left:16px;bottom:16px}.svc-corner-label{right:14px;top:14px}.svc-foot{gap:12px}.svc-link{font-size:8px}.svc-progress{width:38%}}
@media(prefers-reduced-motion:reduce){.svc-story{height:auto}.svc-sticky{position:relative;height:auto}.svc-shell{min-height:900px}.svc-copy-item,.svc-scene{transition:none}}

/* v42 cache-proof build marker — remove after user confirms */
.build-badge{position:fixed;right:12px;bottom:12px;z-index:9999;padding:7px 9px;background:rgba(16,19,23,.88);color:#fff;font:600 7px/1 var(--mono);letter-spacing:.14em;pointer-events:none;opacity:.55}

/* =========================================================================
   V43 BASE HOME STORY — superseded by V44 four-scene playback below
   The film remains in one visual window; copy and scene state change on scroll.
   ========================================================================= */
.home-story{position:relative;height:300vh;background:var(--paper);border-top:1px solid rgba(16,19,23,.12);border-bottom:1px solid rgba(16,19,23,.12);z-index:6}
.home-sticky{position:sticky;top:0;height:100vh;min-height:650px;overflow:hidden;display:flex;align-items:center;padding-top:var(--nav)}
.home-shell{width:min(1680px,100%);height:min(880px,calc(100vh - 104px));margin:0 auto;padding:0 clamp(24px,4.2vw,76px);display:grid;grid-template-columns:minmax(330px,.94fr) minmax(540px,1.2fr);gap:clamp(34px,5vw,92px);align-items:stretch}
.home-copy{display:flex;min-width:0;flex-direction:column;padding:18px 0 12px}
.home-eyebrow{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-bottom:18px;border-bottom:1px solid rgba(16,19,23,.16)}
.home-count{font:600 10px/1 var(--mono);letter-spacing:.18em;color:rgba(16,19,23,.48);white-space:nowrap}.home-count b{color:var(--red);font-weight:700}
.home-copy-stack{position:relative;flex:1;min-height:420px}
.home-copy-item{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;opacity:0;transform:translate3d(0,28px,0);pointer-events:none;transition:opacity .42s cubic-bezier(.22,.61,.36,1),transform .72s cubic-bezier(.16,1,.3,1)}
.home-copy-item.is-active{opacity:1;transform:none;pointer-events:auto}
.home-no{font:600 10px/1 var(--mono);letter-spacing:.2em;color:var(--red);margin-bottom:18px}
.home-copy-item h2{font-family:var(--tech);font-variation-settings:'wdth' 110;font-weight:800;text-transform:uppercase;letter-spacing:-.034em;line-height:.95;font-size:clamp(38px,3.55vw,62px);max-width:none;overflow-wrap:break-word}
.home-copy-item h2 em{font-style:normal;color:var(--red)}
.home-copy-item p{margin-top:24px;max-width:44ch;font-size:clamp(14px,1vw,16px);line-height:1.66;color:var(--muted)}
.home-foot{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:18px;border-top:1px solid rgba(16,19,23,.16)}
.home-progress{height:2px;background:rgba(16,19,23,.12);display:grid;grid-template-columns:repeat(4,1fr);width:min(250px,42%);gap:2px}.home-progress i{display:block;background:rgba(16,19,23,.12);transition:background .35s}.home-progress i.is-active{background:var(--red)}
.home-link{font:700 9px/1 var(--mono);letter-spacing:.14em;text-decoration:none;color:var(--ink);white-space:nowrap}.home-link span{color:var(--red);margin-left:7px}
.home-visual-wrap{position:relative;min-width:0;height:100%}
.home-visual{position:absolute;inset:0;overflow:hidden;background:#11161a;clip-path:polygon(0 0,92% 0,100% 8%,100% 100%,8% 100%,0 92%);box-shadow:0 34px 90px -54px rgba(16,19,23,.62);isolation:isolate}
.home-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.015);filter:saturate(.88) contrast(1.035)}
.home-film-shade{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(5,9,12,.03),rgba(5,9,12,.10) 56%,rgba(5,9,12,.38) 100%)}
.home-corner-label{position:absolute;right:clamp(24px,8.5%,96px);top:22px;z-index:5;color:rgba(255,255,255,.9);font:600 9px/1 var(--mono);letter-spacing:.16em;display:flex;align-items:center;gap:9px;text-shadow:0 1px 12px rgba(0,0,0,.35)}.home-corner-label span{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 0 5px rgba(200,16,46,.13)}
.home-film-caption{position:absolute;left:clamp(28px,9%,104px);bottom:47px;z-index:5;color:#fff;display:flex;flex-direction:column;gap:7px;text-shadow:0 1px 12px rgba(0,0,0,.42)}
.home-film-caption span{font:650 9px/1 var(--mono);letter-spacing:.18em;color:#ff687c}.home-film-caption b{font:650 13px/1.2 var(--display);text-transform:uppercase;letter-spacing:.025em}
.home-tech-lines{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.42}.home-tech-lines i{position:absolute;background:rgba(255,255,255,.22)}.home-tech-lines i:nth-child(1){left:7%;right:7%;top:12%;height:1px}.home-tech-lines i:nth-child(2){top:7%;bottom:7%;right:10%;width:1px}.home-tech-lines i:nth-child(3){left:7%;width:22%;bottom:10%;height:1px;background:rgba(200,16,46,.52)}
.home-index{position:absolute;right:26px;bottom:46px;z-index:5;color:rgba(255,255,255,.52);font:600 8px/1 var(--mono);letter-spacing:.17em}
@media(max-width:1050px){.home-story{height:270vh}.home-sticky{min-height:640px}.home-shell{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);padding-top:72px;padding-bottom:22px;gap:20px}.home-copy{padding:0}.home-copy-stack{min-height:250px}.home-copy-item{justify-content:flex-start;padding-top:22px}.home-copy-item h2{font-size:clamp(28px,6vw,48px);max-width:none}.home-copy-item p{margin-top:14px}.home-visual-wrap{min-height:330px}.home-foot{padding-top:12px}}
@media(max-width:620px){.home-story{height:250vh}.home-shell{padding-left:18px;padding-right:18px;padding-top:68px}.home-eyebrow{padding-bottom:11px}.home-copy-stack{min-height:286px}.home-copy-item h2{font-size:28px}.home-copy-item p{font-size:13.5px;line-height:1.55;margin-top:12px}.home-visual{clip-path:polygon(0 0,90% 0,100% 9%,100% 100%,10% 100%,0 91%)}.home-film-caption{left:clamp(16px,11%,56px);bottom:16px}.home-corner-label,.home-index{display:none}.home-progress{width:38%}.home-link{font-size:8px}}
@media(prefers-reduced-motion:reduce){.home-story{height:auto}.home-sticky{position:relative;height:auto}.home-shell{min-height:900px}.home-copy-item{transition:none}}
/* scene-state overlays: useful even before/while the continuous film buffers */
.home-visual::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .55s var(--e);background-image:linear-gradient(rgba(255,255,255,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.10) 1px,transparent 1px);background-size:9% 12%,11% 9%;mix-blend-mode:screen}
.home-story[data-phase="1"] .home-visual::before{opacity:.30}.home-story[data-phase="2"] .home-visual::before{opacity:.48}.home-story[data-phase="3"] .home-visual::before{opacity:.12}
.home-story[data-phase="1"] .home-tech-lines,.home-story[data-phase="2"] .home-tech-lines{opacity:.72}.home-story[data-phase="3"] .home-tech-lines{opacity:.28}
.home-story[data-phase="2"] .home-film-shade{background:linear-gradient(180deg,rgba(8,12,15,.10),rgba(8,12,15,.16) 50%,rgba(74,0,13,.30) 100%)}

/* =========================================================================
   V44 HOME STORY — FOUR DISTINCT PLAYING SCENES, ZERO SCROLL VIDEO SCRUBBING
   Only current + adjacent scene are hydrated. Hidden scenes are paused.
   ========================================================================= */
.home-film-stack{position:absolute;inset:0;overflow:hidden;background:#11161a}
.home-film-stack .home-film{position:absolute;inset:-1.5%;width:103%;height:103%;object-fit:cover;display:block;opacity:0;visibility:hidden;transform:scale(1.045);filter:saturate(.86) contrast(1.04);transition:opacity .58s cubic-bezier(.22,.61,.36,1),transform 1.35s cubic-bezier(.16,1,.3,1),visibility 0s linear .62s;will-change:opacity,transform;backface-visibility:hidden}
.home-film-stack .home-film.is-active{opacity:1;visibility:visible;transform:scale(1.012);transition-delay:0s;z-index:1}
.home-film-stack::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(10,13,16,.03),transparent 28%,transparent 75%,rgba(10,13,16,.07));mix-blend-mode:multiply}
.home-story[data-phase="0"] .home-film-stack .home-film.is-active{object-position:50% 52%}
.home-story[data-phase="1"] .home-film-stack .home-film.is-active{object-position:50% 50%}
.home-story[data-phase="2"] .home-film-stack .home-film.is-active{object-position:50% 50%}
.home-story[data-phase="3"] .home-film-stack .home-film.is-active{object-position:50% 47%}
@media(max-width:760px){.home-film-stack .home-film{width:108%;height:108%;inset:-4%;}.home-story[data-phase="0"] .home-film-stack .home-film.is-active{object-position:55% 50%}.home-story[data-phase="2"] .home-film-stack .home-film.is-active{object-position:58% 50%}}
@media(prefers-reduced-motion:reduce){.home-film-stack .home-film{transition:none;transform:none}.home-film-stack .home-film:not(.is-active){display:none}}

/* =========================================================================
   СКАНУВАННЯ ВУЗЛІВ (assets/scan.js)
   Без фону: машина лежить просто на сторінці. Один прохід зліва
   направо, і на місці кожного вузла проступає сам вузол у рентгені.
   ========================================================================= */
.sn{height:360vh;position:relative;background:var(--paper)}
.sn-sticky{position:sticky;top:0;height:100svh;overflow:hidden;
  display:grid;grid-template-rows:auto 1fr;row-gap:clamp(16px,3vh,34px);
  padding:9vh clamp(24px,4vw,72px) 7vh}

.sn-head .k{display:block;margin-bottom:12px}
.sn-title{font-family:var(--tech);font-variation-settings:'wdth' 112;font-weight:800;
  text-transform:uppercase;letter-spacing:-.022em;line-height:1.02;
  font-size:clamp(22px,2.9vw,44px)}
.sn-title em{font-style:normal;color:var(--red)}

.sn-shell{display:grid;grid-template-columns:minmax(0,.66fr) minmax(0,1.34fr);
  gap:clamp(24px,4vw,64px);align-items:center;min-height:0}

/* список */
.sn-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.sn-list li{display:grid;grid-template-columns:32px 1fr;gap:14px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid var(--line);cursor:pointer;
  opacity:.3;transition:opacity .45s var(--e)}
.sn-list li.is-active{opacity:1}
.sn-list b{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--red);font-weight:400}
.sn-list i{display:block;font-style:normal;font-family:var(--display);font-weight:700;
  font-size:clamp(14px,1.4vw,18px);letter-spacing:-.01em;margin-bottom:4px}
.sn-list span{font-size:12.5px;line-height:1.55;color:var(--muted)}
.sn-list li.is-active span{color:var(--ink-2)}

/* кадр без підкладки */
.sn-stage{position:relative}
.sn-truck{display:block;width:100%;height:auto}
.sn-xray{position:absolute;inset:0;width:100%;height:auto;pointer-events:none;
  clip-path:inset(0 100% 0 0);
  filter:invert(1) grayscale(1) contrast(1.45) brightness(1.08);
  mix-blend-mode:multiply;opacity:.55}

.sn-beam{position:absolute;top:-4%;bottom:-4%;width:2px;margin-left:-1px;z-index:4;
  background:linear-gradient(180deg,rgba(200,16,46,0),var(--red) 16%,var(--red) 84%,rgba(200,16,46,0));
  box-shadow:0 0 20px rgba(200,16,46,.5)}

/* «Скелет» машини: під променем звичайне фото змінюється просвіченим
   негативом — видно внутрішню структуру, як на рентгені. Рамок немає. */
.sn-nodes{display:none}
.sn-xray{position:absolute;inset:0;width:100%;height:auto;pointer-events:none;
  clip-path:inset(0 100% 0 0);
  filter:invert(1) grayscale(1) contrast(2.1) brightness(1.06)
         sepia(1) hue-rotate(178deg) saturate(2.2);
  mix-blend-mode:multiply;opacity:.88}
/* легкий блиск уздовж променя, щоб перехід не був різким */
.sn-beam::before{content:'';position:absolute;top:0;bottom:0;right:0;width:120px;
  background:linear-gradient(90deg,rgba(200,16,46,0),rgba(200,16,46,.10));
  pointer-events:none}

.sn-meta{position:absolute;left:0;right:0;bottom:-30px;z-index:5;display:flex;
  justify-content:space-between;gap:12px;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--muted)}
.sn-meta i{font-style:normal}

@media(max-width:1080px){
  .sn{height:310vh}
  .sn-sticky{padding:7vh 18px 6vh;grid-template-rows:auto auto 1fr}
  .sn-shell{grid-template-columns:1fr;gap:18px;align-content:start}
  .sn-stage{order:-1}
  .sn-list li{padding:10px 0;grid-template-columns:26px 1fr;gap:10px}
  .sn-list span{display:none}
  .sn-node span{display:none}
  .sn-meta{bottom:-24px}
}
@media (prefers-reduced-motion:reduce){
  .sn{height:auto}
  .sn-sticky{position:relative;height:auto;padding:60px 18px}
  .sn-beam{display:none}
  .sn-list li{opacity:1}
  .sn-node{--v:1}
}

/* ── полірування головної історії (v45) ── */
/* текст міняється зі зсувом, а не миготінням */
.home-copy-item{position:absolute;inset:0;opacity:0;transform:translateY(22px);
  transition:opacity .55s var(--e),transform .7s var(--e);pointer-events:none}
.home-copy-item.is-active{opacity:1;transform:none;pointer-events:auto}
.home-copy-stack{position:relative;min-height:clamp(190px,26vh,300px)}

/* кадр змінюється перекриттям, без чорного провалу між сценами */
.home-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.04);
  transition:opacity .8s var(--e),transform 1.4s var(--e)}
.home-film.is-active{opacity:1;transform:scale(1)}

/* лічильник і смуги */
.home-progress i{transition:background .45s var(--e),transform .45s var(--e);
  transform-origin:left}
.home-progress i.is-active{background:var(--red)}

/* =========================================================================
   ВСТУПНИЙ ЕКРАН СТОРІНКИ — заголовок із кадрами всередині рядка
   Використовується на «Компанії» та «Перевезеннях».
   ========================================================================= */
.hx{background:var(--paper);padding:calc(var(--nav) + 7vh) 0 calc(var(--u)*9)}
.hx-in{max-width:1560px;margin:0 auto;padding:0 clamp(20px,4vw,72px)}

.hx-kick{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  color:var(--red);margin-bottom:clamp(18px,3vh,34px)}

.hx-title{font-family:var(--tech);font-variation-settings:'wdth' 100;font-weight:800;
  text-transform:uppercase;letter-spacing:-.045em;line-height:.86;margin:0}
.hx-line{display:flex;align-items:center;gap:clamp(6px,.9vw,16px);flex-wrap:nowrap}
.hx-w{font-size:clamp(38px,10.4vw,168px);white-space:nowrap}

/* кадр, вставлений просто в рядок тексту */
.hx-m{flex:0 0 auto;display:block;overflow:hidden;border-radius:clamp(4px,.5vw,9px);
  background:var(--paper-2);position:relative;
  /* висота прив'язана до кегля рядка, тому кадр завжди сидить у рядку */
  height:.72em;width:1.9em;
  box-shadow:0 6px 18px -12px rgba(16,19,23,.6)}
.hx-m img,.hx-m video{display:block;width:100%;height:100%;object-fit:cover;
  object-position:center 42%}
/* тонкий кант, щоб світлий кадр не зливався з папером */
.hx-m::after{content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(16,19,23,.10)}

.hx-lead{margin-top:clamp(20px,3.4vh,40px);max-width:none;
  font-family:var(--mono);font-size:clamp(10.5px,.92vw,13px);line-height:1.85;
  letter-spacing:.04em;color:var(--ink-2);text-align:justify;
  columns:2;column-gap:clamp(24px,3vw,56px)}

.hx-foot{margin-top:clamp(22px,3.4vh,40px);display:flex;align-items:center;
  justify-content:space-between;gap:18px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:18px}
.hx-scroll,.hx-cta{display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;border-radius:999px;
  padding:12px 20px;transition:background .35s var(--e),color .35s var(--e)}
.hx-scroll{border:1px solid var(--line);color:var(--muted)}
.hx-scroll::after{content:'↓'}
.hx-scroll:hover{color:var(--ink);border-color:var(--ink)}
.hx-cta{background:var(--ink);color:var(--paper)}
.hx-cta::after{content:'→'}
.hx-cta:hover{background:var(--red)}

@media(max-width:900px){
  .hx{padding:calc(var(--nav) + 4vh) 0 calc(var(--u)*6)}
  .hx-lead{columns:1;font-size:11px}
  .hx-line{gap:6px}
  .hx-foot .hx-cta{flex:1 1 100%;justify-content:center}
}

/* =========================================================================
   ШВИДКІСТЬ І МОБІЛЬНИЙ — спільні правила
   ========================================================================= */
img,video{max-width:100%}
img{height:auto}
/* важкі шари не перемальовуються постійно */
.sn-node,.sn-beam,.sc-media video,.hx-m video{will-change:transform,opacity}
/* на дотикових екранах довгі липкі сцени коротші, інакше скрол нескінченний */
@media(hover:none) and (pointer:coarse){
  .sn{height:280vh}
  .sc-wrap .sc-media{aspect-ratio:4/5}
}

/* дрібні кадри у вступному заголовку (компанія) */
.hx-title.hx-small .hx-m{height:.62em;width:1.55em}
.hx-title.hx-small .hx-line{gap:clamp(8px,1.1vw,20px)}

/* що возимо — мінімальний перелік */
.cargo{list-style:none;margin:26px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.cargo li{background:#fff;padding:18px 18px 16px;transition:background .35s var(--e)}
.cargo li:hover{background:var(--paper)}
.cargo b{display:block;font-family:var(--display);font-weight:700;font-size:15px;
  letter-spacing:-.01em}
.cargo span{display:block;margin-top:7px;font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;color:var(--muted)}
@media(max-width:900px){
  .cargo{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .cargo{grid-template-columns:1fr}
}


/* =========================================================================
   ШАПКА — помітніша: більший логотип, щільніший фон, чіткий поділ
   ========================================================================= */
.nav{height:78px;background:rgba(242,241,237,.94);
  border-bottom:1px solid transparent;backdrop-filter:blur(16px) saturate(1.2)}
.nav.stuck{border-color:var(--line);box-shadow:0 10px 30px -26px rgba(16,19,23,.55)}
.nav .brand img{height:46px}
.nav .brand span{font-size:11px;letter-spacing:.24em;color:var(--ink-2)}
.nav menu a{font-size:11.5px;letter-spacing:.16em;color:var(--ink);font-weight:500;
  padding:12px 15px;position:relative}
.nav menu a::after{content:'';position:absolute;left:15px;right:15px;bottom:6px;height:1px;
  background:var(--red);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--e)}
.nav menu a:hover::after{transform:scaleX(1)}
.nav menu a.go::after{display:none}
@media(max-width:960px){
  .nav{height:66px}
  .nav .brand img{height:38px}
}

/* міста на карті */
.route-city-ring{fill:none;stroke:rgba(200,16,46,.45);stroke-width:2}
.route-city-label{font-family:var(--mono);font-size:19px;letter-spacing:.14em;
  fill:var(--ink);font-weight:500;
  paint-order:stroke;stroke:rgba(242,241,237,.9);stroke-width:5px;stroke-linejoin:round}

/* =========================================================================
   ФОРМИ — однакові на всіх сторінках, читабельні на світлому і темному
   ========================================================================= */
.form2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:30px;max-width:860px}
.f2{display:flex;flex-direction:column;gap:8px;min-width:0}
.f2-wide{grid-column:1/-1}
.f2 label{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--muted)}

.f2 input,.f2 select,.f2 textarea{
  width:100%;box-sizing:border-box;
  background:#fff;color:var(--ink);
  border:1px solid var(--line);border-radius:10px;
  padding:15px 16px;font-family:var(--sans);font-size:16px;line-height:1.35;
  outline:none;appearance:none;
  transition:border-color .3s var(--e),box-shadow .3s var(--e)}
.f2 textarea{resize:vertical;min-height:96px}
.f2 select{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                           linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:44px}
.f2 input::placeholder,.f2 textarea::placeholder{color:rgba(16,19,23,.38)}
.f2 input:focus,.f2 select:focus,.f2 textarea:focus{
  border-color:var(--red);box-shadow:0 0 0 3px rgba(200,16,46,.12)}
.f2 input:invalid:not(:placeholder-shown){border-color:rgba(200,16,46,.55)}

/* на темних секціях — той самий контроль, інша підкладка */
.dark .f2 input,.dark .f2 select,.dark .f2 textarea,
.ft .f2 input,.ft .f2 select,.ft .f2 textarea{
  background:rgba(255,255,255,.06);color:var(--paper);
  border-color:rgba(242,241,237,.24)}
.dark .f2 input::placeholder,.dark .f2 textarea::placeholder{color:rgba(242,241,237,.42)}
.dark .f2 select{color:var(--paper)}
.dark .f2 select option{color:var(--ink)}
.dark .f2 label{color:#8A8F98}

.f2-send{flex-direction:row;align-items:center;gap:18px;flex-wrap:wrap;margin-top:4px}
.f2-send .btn{cursor:pointer}
.f2-note{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--muted);
  max-width:38ch;line-height:1.7}
.form2 .formout{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;
  line-height:1.7;color:var(--muted);min-height:1.2em}
.form2 .formout.ok{color:#2E9E52}
.form2 .formout.err{color:var(--red)}
.dark .form2 .formout.ok{color:#7BD08A}
.dark .form2 .formout.err{color:#FF7A8A}

@media(max-width:720px){
  .form2{grid-template-columns:1fr}
  .f2-send{flex-direction:column;align-items:stretch}
  .f2-send .btn{justify-content:center}
}

/* =========================================================================
   ПЕРЕВЕЗЕННЯ — для кого возимо, що возимо, як працюємо
   ========================================================================= */
.pv{background:var(--paper);border-top:1px solid var(--line)}
.pv-alt{background:#fff}
.pv-in{max-width:1440px;margin:0 auto;padding:calc(var(--u)*11) clamp(20px,4vw,72px)}
.pv-head{max-width:62ch;margin-bottom:calc(var(--u)*5)}
.pv-head .k{display:block;margin-bottom:12px}
.pv-h{font-family:var(--display);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(24px,3.2vw,48px);line-height:1.05}
.pv-h em{font-style:normal;color:var(--red)}
.pv-lede{margin-top:16px;font-size:15.5px;line-height:1.75;color:var(--ink-2);max-width:52ch}
.pv-note{margin-top:20px;font-size:13.5px;line-height:1.7;color:var(--muted);max-width:56ch}

.pv-shots{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pv-shot{margin:0;position:relative;overflow:hidden;background:var(--paper-2)}
.pv-shot.big{grid-column:span 2}
.pv-shot img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;
  transition:transform .8s var(--e)}
.pv-shot:hover img{transform:scale(1.03)}
.pv-shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px;
  background:linear-gradient(0deg,rgba(9,11,14,.88),rgba(9,11,14,0));color:var(--paper)}
.pv-shot figcaption b{display:block;font-family:var(--display);font-weight:700;font-size:14px}
.pv-shot figcaption span{display:block;margin-top:4px;font-family:var(--mono);font-size:11px;
  letter-spacing:.12em;color:rgba(242,241,237,.72)}

.pv-steps{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line)}
.pv-steps li{background:#fff;padding:22px 20px 20px}
.pv-steps b{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--red);
  font-weight:400}
.pv-steps i{display:block;margin-top:12px;font-style:normal;font-family:var(--display);
  font-weight:700;font-size:16px}
.pv-steps span{display:block;margin-top:8px;font-size:13px;line-height:1.65;color:var(--muted)}

@media(max-width:900px){
  .pv-shots{grid-template-columns:1fr 1fr}
  .pv-shot.big{grid-column:span 2}
  .pv-steps{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .pv-shots,.pv-steps{grid-template-columns:1fr}
  .pv-shot.big{grid-column:span 1}
}

/* =========================================================================
   МОБІЛЬНИЙ — липкі сцени коротші й без горизонтальних зсувів
   ========================================================================= */
@media(max-width:760px){
  /* clip замість hidden: hidden робить body контейнером прокрутки і вбиває position:sticky */
  html,body{overflow-x:clip}
  .sn{height:260vh}
  .dwrap{height:260vh}
  .sc-wrap .sc-copy{left:16px;right:16px;bottom:18px}
  .sc-h{font-size:clamp(20px,7vw,30px)}
  .hx-w{font-size:clamp(30px,11vw,58px)}
  .hx-m{height:clamp(24px,7vw,44px);width:clamp(40px,12vw,76px)}
  .earth-in,.gt-in{grid-template-columns:1fr}
  .tr-facts,.cargo{grid-template-columns:1fr}
}

/* =========================================================================
   ІСТОРІЯ КОМПАНІЇ — послідовність рішень, у кінці нинішній стан
   ========================================================================= */
.hs{background:var(--paper);border-top:1px solid var(--line)}
.hs-now{background:#fff}
.hs-in{max-width:1240px;margin:0 auto;padding:calc(var(--u)*11) clamp(20px,4vw,72px)}
.hs-head{max-width:60ch;margin-bottom:calc(var(--u)*5)}
.hs-head .k{display:block;margin-bottom:12px}
.hs-h{font-family:var(--display);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(24px,3.2vw,48px);line-height:1.05}
.hs-h em{font-style:normal;color:var(--red)}
.hs-lede{margin-top:14px;font-size:15.5px;line-height:1.75;color:var(--ink-2);max-width:52ch}

.hs-line{list-style:none;margin:0;padding:0;position:relative}
/* вертикальна вісь часу */
.hs-line::before{content:'';position:absolute;left:clamp(64px,9vw,120px);top:6px;bottom:6px;
  width:1px;background:var(--line)}
.hs-item{position:relative;display:grid;
  grid-template-columns:clamp(64px,9vw,120px) 1fr;gap:clamp(20px,3vw,44px);
  padding:0 0 calc(var(--u)*5)}
.hs-item:last-child{padding-bottom:0}
.hs-year{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--muted);
  padding-top:4px}
.hs-item.is-now .hs-year{color:var(--red)}
/* крапка на осі */
.hs-body{position:relative;padding-left:clamp(18px,2.4vw,34px)}
.hs-body::before{content:'';position:absolute;left:calc(clamp(18px,2.4vw,34px) * -1 - 4px);
  top:9px;width:9px;height:9px;border-radius:50%;background:var(--paper);
  border:2px solid var(--line)}
.hs-item.is-now .hs-body::before{background:var(--red);border-color:var(--red);
  box-shadow:0 0 0 5px rgba(200,16,46,.14)}
.hs-body h3{font-family:var(--display);font-weight:700;font-size:clamp(17px,1.9vw,24px);
  letter-spacing:-.015em}
.hs-body p{margin-top:10px;font-size:14.5px;line-height:1.72;color:var(--ink-2);max-width:56ch}

.hs-shot{margin:18px 0 0;max-width:520px}
/* пункт із кадром: текст ліворуч, фото поруч — інакше права половина порожня */
.hs-body.has-shot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  column-gap:clamp(24px,3.4vw,56px);align-items:start}
.hs-body.has-shot h3,.hs-body.has-shot p{grid-column:1}
.hs-body.has-shot p{max-width:46ch}
.hs-body.has-shot .hs-shot{grid-column:2;grid-row:1 / span 3;margin:4px 0 0;max-width:none}
.hs-shot img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.hs-shot figcaption{margin-top:8px;font-family:var(--mono);font-size:11px;
  letter-spacing:.12em;color:var(--muted)}

.hs-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line)}
.hs-facts>div{background:#fff;padding:22px 20px 20px}
.hs-facts b{display:block;font-family:var(--display);font-weight:700;font-size:16px;
  letter-spacing:-.01em}
.hs-facts span{display:block;margin-top:8px;font-size:13px;line-height:1.65;color:var(--muted)}

@media(max-width:900px){
  .hs-body.has-shot{grid-template-columns:minmax(0,1fr)}
  .hs-body.has-shot .hs-shot{grid-column:1;grid-row:auto;margin-top:16px;max-width:520px}
  .hs-body.has-shot p{max-width:none}
  .hs-line::before{left:8px}
  .hs-item{grid-template-columns:1fr;gap:8px;padding-bottom:calc(var(--u)*4)}
  .hs-year{padding-left:26px}
  .hs-body{padding-left:26px}
  .hs-body::before{left:4px}
  .hs-facts{grid-template-columns:1fr}
}

/* =========================================================================
   ВСТУП «КОМПАНІЯ» — текст на всю ширину, відео між текстовими блоками
   ========================================================================= */
.hx2{background:var(--paper);padding:calc(var(--nav) + 7vh) 0 calc(var(--u)*9)}
.hx2-in{max-width:1560px;margin:0 auto;padding:0 clamp(20px,4vw,72px)}
.hx2-kick{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  color:var(--red);margin-bottom:clamp(16px,2.6vh,30px)}

.hx2-title{margin:0;font-family:var(--tech);font-variation-settings:'wdth' 100;
  font-weight:800;text-transform:uppercase;letter-spacing:-.045em;line-height:.88;
  font-size:clamp(46px,12.5vw,200px)}
.hx2-title em{font-style:normal;color:var(--red)}

/* два темні кадри однакової висоти між заголовком і текстом */
.hx2-media{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,26px);
  margin:clamp(22px,4vh,48px) 0}
.hx2-media figure{margin:0;position:relative;overflow:hidden;background:#0A0D11;
  border-radius:clamp(8px,1vw,16px)}
.hx2-media video{display:block;width:100%;height:clamp(180px,30vh,330px);object-fit:cover;
  filter:brightness(.86) contrast(1.06) saturate(.92)}
.hx2-media figure::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(9,11,14,.7),rgba(9,11,14,0) 58%)}
.hx2-media figcaption{position:absolute;left:14px;bottom:12px;z-index:2;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:rgba(242,241,237,.82)}

/* основний текст і дрібніший під ним */
.hx2-text{display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(20px,3vw,56px);align-items:start}
.hx2-lead{margin:0;font-size:clamp(17px,1.7vw,24px);line-height:1.55;
  letter-spacing:-.01em;color:var(--ink);max-width:30ch}
.hx2-sub{margin:0;font-size:clamp(13px,1.02vw,15px);line-height:1.8;color:var(--muted);
  max-width:52ch}

.hx2-foot{margin-top:clamp(22px,3.4vh,40px);display:flex;align-items:center;
  justify-content:space-between;gap:18px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:18px}

@media(max-width:900px){
  .hx2{padding:calc(var(--nav) + 4vh) 0 calc(var(--u)*6)}
  .hx2-media{grid-template-columns:1fr;gap:10px}
  .hx2-media video{height:clamp(150px,26vh,240px)}
  .hx2-text{grid-template-columns:1fr;gap:14px}
  .hx2-lead{max-width:100%}
  .hx2-foot .hx-cta{flex:1 1 100%;justify-content:center}
}

/* =========================================================================
   КАР'ЄРА — картинка компанії, потім умови, потім анкета
   ========================================================================= */
.kr{position:relative;min-height:78svh;display:flex;align-items:flex-end;
  overflow:hidden;background:var(--ink)}
.kr-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(.7) contrast(1.05) saturate(.9)}
.kr-veil{position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(9,11,14,.94) 6%,rgba(9,11,14,.35) 52%,rgba(9,11,14,.5))}
.kr-in{position:relative;z-index:2;max-width:1560px;margin:0 auto;width:100%;
  padding:0 clamp(20px,4vw,72px) clamp(40px,7vh,90px);color:var(--paper)}
.kr-kick{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  color:var(--red);margin-bottom:16px}
.kr-title{margin:0;font-family:var(--tech);font-variation-settings:'wdth' 104;
  font-weight:800;text-transform:uppercase;letter-spacing:-.035em;line-height:.92;
  font-size:clamp(34px,7vw,104px)}
.kr-title em{font-style:normal;color:var(--red)}
.kr-lead{margin-top:18px;max-width:46ch;font-size:clamp(14.5px,1.2vw,17px);
  line-height:1.72;color:#B7BCC3}
.kr-foot{margin-top:26px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.kr-note{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:#8A8F98;
  max-width:34ch;line-height:1.7}

.kr-wrap{max-width:1440px;margin:0 auto;padding:calc(var(--u)*11) clamp(20px,4vw,72px)}
.kr-why{background:var(--paper)}
.kr-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line)}
.kr-grid article{background:#fff;padding:24px 22px 22px}
.kr-grid .n{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--red)}
.kr-grid h3{margin-top:12px;font-family:var(--display);font-weight:700;font-size:17px;
  letter-spacing:-.01em}
.kr-grid p{margin-top:9px;font-size:13.5px;line-height:1.68;color:var(--muted)}

.kr-shots{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.kr-shots figure{margin:0;position:relative;overflow:hidden;background:var(--paper-2)}
.kr-shots img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.kr-shots figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px;
  background:linear-gradient(0deg,rgba(9,11,14,.86),rgba(9,11,14,0));
  color:var(--paper);font-family:var(--mono);font-size:11px;letter-spacing:.14em}

.kr-req{background:#fff}
.kr-req-in{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(24px,4vw,64px);
  align-items:start}
.kr-h{font-family:var(--display);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(22px,2.8vw,40px);line-height:1.06;margin-top:12px}
.kr-h em{font-style:normal;color:var(--red)}
.kr-req ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.kr-req li{border-bottom:1px solid var(--line);padding:14px 0 14px 22px;position:relative;
  font-size:15px;line-height:1.6}
.kr-req li::before{content:'';position:absolute;left:0;top:1.05em;width:9px;height:1px;
  background:var(--red)}

@media(max-width:900px){
  .kr{min-height:70svh}
  .kr-grid{grid-template-columns:1fr 1fr}
  .kr-shots{grid-template-columns:1fr}
  .kr-req-in{grid-template-columns:1fr;gap:16px}
  .kr-foot .btn{flex:1 1 100%;justify-content:center}
}
@media(max-width:560px){ .kr-grid{grid-template-columns:1fr} }

/* =========================================================================
   ГРАФА 02 · ДВА НАПРЯМКИ
   Стрічка, що біжить, і дві картки. У спокої картка світла й тиха;
   при наведенні кадр заповнює її і вона перевертається в темне.
   ========================================================================= */
.dir2{background:var(--paper);padding:0 0 clamp(56px,7vw,110px);margin-top:70px;
  scroll-margin-top:calc(var(--nav) + 10px);
  border-top:1px solid var(--line-2)}
.pv-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ── стрічка ─────────────────────────────────────────────────────────── */
.mq{overflow:hidden;padding:clamp(20px,3vw,44px) 0 clamp(18px,2.4vw,36px);
  border-bottom:1px solid var(--line-2)}
.mq-row{display:flex;width:max-content;will-change:transform;
  animation:mq-slide 38s linear infinite}
.mq-set{display:flex;align-items:center;flex:0 0 auto}
.mq-set b{font-family:var(--tech);font-variation-settings:'wdth' 108;font-weight:800;
  text-transform:uppercase;font-size:clamp(42px,8.4vw,132px);line-height:.92;
  letter-spacing:-.035em;color:var(--ink);padding:0 clamp(14px,1.6vw,30px);white-space:nowrap}
.mq-star{flex:0 0 auto;width:clamp(30px,4.4vw,74px);height:clamp(30px,4.4vw,74px);
  margin:0 clamp(10px,1.4vw,26px);
  background:var(--steel);
  -webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat}
:root{--star:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%3E%3Cg%20fill%3D%27black%27%3E%3Cpath%20d%3D%27M54.0%2049.7Q88.7%2042.1%2097.0%2050.0Q88.7%2057.9%2054.0%2050.3Z%27%2F%3E%3Cpath%20d%3D%27M53.6%2051.7Q87.4%2062.5%2090.7%2073.5Q79.6%2076.2%2053.3%2052.3Z%27%2F%3E%3Cpath%20d%3D%27M52.3%2053.3Q76.2%2079.6%2073.5%2090.7Q62.5%2087.4%2051.7%2053.6Z%27%2F%3E%3Cpath%20d%3D%27M50.3%2054.0Q57.9%2088.7%2050.0%2097.0Q42.1%2088.7%2049.7%2054.0Z%27%2F%3E%3Cpath%20d%3D%27M48.3%2053.6Q37.5%2087.4%2026.5%2090.7Q23.8%2079.6%2047.7%2053.3Z%27%2F%3E%3Cpath%20d%3D%27M46.7%2052.3Q20.4%2076.2%209.3%2073.5Q12.6%2062.5%2046.4%2051.7Z%27%2F%3E%3Cpath%20d%3D%27M46.0%2050.3Q11.3%2057.9%203.0%2050.0Q11.3%2042.1%2046.0%2049.7Z%27%2F%3E%3Cpath%20d%3D%27M46.4%2048.3Q12.6%2037.5%209.3%2026.5Q20.4%2023.8%2046.7%2047.7Z%27%2F%3E%3Cpath%20d%3D%27M47.7%2046.7Q23.8%2020.4%2026.5%209.3Q37.5%2012.6%2048.3%2046.4Z%27%2F%3E%3Cpath%20d%3D%27M49.7%2046.0Q42.1%2011.3%2050.0%203.0Q57.9%2011.3%2050.3%2046.0Z%27%2F%3E%3Cpath%20d%3D%27M51.7%2046.4Q62.5%2012.6%2073.5%209.3Q76.2%2020.4%2052.3%2046.7Z%27%2F%3E%3Cpath%20d%3D%27M53.3%2047.7Q79.6%2023.8%2090.7%2026.5Q87.4%2037.5%2053.6%2048.3Z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}
@keyframes mq-slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media(prefers-reduced-motion:reduce){.mq-row{animation:none}}

/* ── дві картки ──────────────────────────────────────────────────────── */
.dir2-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(14px,1.6vw,26px);
  max-width:1440px;margin:0 auto;padding:clamp(30px,4vw,64px) clamp(18px,4vw,64px) 0}
.dc{position:relative;display:block;text-decoration:none;color:var(--ink);
  background:#fff;border:1px solid var(--line);overflow:hidden;
  transition:background .5s var(--e),border-color .5s var(--e),color .5s var(--e)}
.dc-pill{position:absolute;left:16px;top:16px;z-index:4;
  font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.1em;
  padding:7px 13px;border-radius:999px;background:#fff;color:var(--ink-2);
  border:1px solid var(--line);
  transition:background .45s var(--e),color .45s var(--e),border-color .45s var(--e)}

.dc-stage{position:relative;aspect-ratio:16/8;display:flex;align-items:center;
  justify-content:center;overflow:hidden;background:#fff;
  transition:background .5s var(--e)}
.dc-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:var(--op,50% 50%);
  opacity:0;transform:scale(1.08);
  transition:opacity .55s var(--e),transform 1.2s var(--e)}
.dc-stage::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(60% 52% at 50% 50%,rgba(6,8,10,.72),rgba(6,8,10,.14) 70%,transparent);
  opacity:0;transition:opacity .5s var(--e)}
.dc:hover .dc-stage::after,.dc:focus-visible .dc-stage::after{opacity:1}
.dc-name{position:relative;z-index:3;font-family:var(--tech);
  font-variation-settings:'wdth' 108;font-weight:800;text-transform:uppercase;
  font-size:clamp(30px,4vw,64px);letter-spacing:-.035em;color:var(--ink);
  transition:color .45s var(--e)}

.dc-nums{display:grid;grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line);transition:border-color .5s var(--e)}
.dc-nums>div{padding:16px 18px 15px;border-right:1px solid var(--line);
  transition:border-color .5s var(--e)}
.dc-nums>div:nth-child(2n){border-right:0}
.dc-nums>div:nth-child(-n+2){border-bottom:1px solid var(--line)}
.dc-nums b{display:block;font-family:var(--display);font-weight:700;font-size:16px;
  letter-spacing:-.01em;color:var(--ink);transition:color .45s var(--e)}
.dc-nums span{display:block;margin-top:5px;font-size:13px;color:var(--muted);
  transition:color .45s var(--e)}

/* наведення: кадр заповнює картку, вона перевертається в темне */
.dc:hover,.dc:focus-visible{background:#0C0F13;border-color:#0C0F13;color:#fff}
.dc:hover .dc-stage,.dc:focus-visible .dc-stage{background:#0C0F13}
.dc:hover .dc-shot,.dc:focus-visible .dc-shot{opacity:1;transform:scale(1)}
.dc:hover .dc-name,.dc:focus-visible .dc-name{color:#fff}
.dc:hover .dc-pill,.dc:focus-visible .dc-pill{background:var(--red);color:#fff;border-color:var(--red)}
.dc:hover .dc-nums,.dc:focus-visible .dc-nums,
.dc:hover .dc-nums>div,.dc:focus-visible .dc-nums>div{border-color:rgba(255,255,255,.18)}
.dc:hover .dc-nums b,.dc:focus-visible .dc-nums b{color:#fff}
.dc:hover .dc-nums span,.dc:focus-visible .dc-nums span{color:#B7BCC3}
.dc:focus-visible{outline:3px solid var(--red);outline-offset:3px}

/* на сенсорному екрані наведення немає — показуємо кадр одразу */
@media(hover:none){
  .dc{background:#0C0F13;border-color:#0C0F13;color:#fff}
  .dc-stage{background:#0C0F13}
  .dc-stage::after{opacity:1}
  .dc-shot{opacity:1;transform:none}
  .dc-name{color:#fff}
  .dc-pill{background:var(--red);color:#fff;border-color:var(--red)}
  .dc-nums,.dc-nums>div{border-color:rgba(255,255,255,.18)}
  .dc-nums b{color:#fff}
  .dc-nums span{color:#B7BCC3}
}
@media(max-width:860px){
  .dir2-grid{grid-template-columns:minmax(0,1fr)}
  .dc-stage{aspect-ratio:16/9}
  .mq-set b{font-size:13vw}
}
@media(prefers-reduced-motion:reduce){
  .dc,.dc-shot,.dc-stage,.dc-name,.dc-pill,.dc-nums b,.dc-nums span{transition:none}
}

/* ГРАФА 05 · карта компактніша — секція не має займати півтора екрана */
@media(min-width:1081px){
  .earth-sec .route-map-stage{width:min(56vw,860px)}
  .earth-in{align-items:center}
}

/* цифри конфігуратора міняються разом із конфігурацією — хай це буде видно */
.dnums b{display:inline-block;transition:transform .42s var(--e),opacity .42s var(--e)}
.dnums b.roll{transform:translateY(-70%);opacity:0}
.dnums span{display:block;transition:opacity .3s var(--e)}
.dnums span.roll{opacity:0}
@media(prefers-reduced-motion:reduce){
  .dnums b,.dnums span{transition:none}
  .dnums b.roll,.dnums span.roll{transform:none;opacity:1}
}

/* =========================================================================
   ГРАФА 04 · ЧОМУ НАМ ДОВІРЯЮТЬ
   Чорна секція, записи «текст ліворуч — кадр праворуч», і крізь кожен запис
   їде велике червоне слово. Слово лежить НАД кадром у режимі screen: на
   чорному воно чисте червоне, на світлих місцях кадру світлішає, тож кадр
   крізь нього читається. isolation тримає це змішування всередині секції.
   ========================================================================= */
.why{background:#090B0D;color:#fff;isolation:isolate;overflow:clip;
  padding-block:clamp(64px,8vw,132px);position:relative;z-index:6}

.why-top{max-width:1440px;margin:0 auto clamp(56px,8vw,132px);
  padding:0 calc(var(--u)*4);
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.55fr);
  gap:clamp(18px,3vw,56px);align-items:start}
.why-kick{color:#7E868F;padding-top:10px}
.why-top-r h2{margin:0;font-family:var(--disp);font-weight:700;
  font-size:clamp(31px,4.3vw,66px);line-height:1.04;letter-spacing:-.032em;
  color:#fff;text-wrap:balance}
.why-top-r h2 em{font-style:normal;color:var(--red)}
.why-top-r p{margin:clamp(18px,2vw,30px) 0 0;max-width:52ch;
  font-size:clamp(14.5px,1.12vw,16.5px);line-height:1.68;color:#9BA2AA}

/* ─── записи ───────────────────────────────────────────────────────────── */
.why-row{position:relative;max-width:1440px;margin:0 auto;
  padding:clamp(40px,6vw,96px) calc(var(--u)*4);
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(24px,4vw,86px);align-items:start}

/* z-index вищий за смугу: навіть якби вона підійшла, текст лишиться зверху */
.why-txt{position:relative;z-index:5;padding-top:clamp(6px,1.4vw,26px)}
.why-txt h3{margin:0 0 clamp(14px,1.5vw,20px);font-family:var(--disp);
  font-weight:700;font-size:clamp(19px,1.72vw,26px);line-height:1.2;
  letter-spacing:-.018em;color:#fff;max-width:18ch}
.why-txt p{margin:0;font-size:clamp(14px,1.05vw,15.5px);line-height:1.72;
  color:#949BA3;max-width:40ch}

.why-img{position:relative;z-index:2;margin:0;overflow:hidden;background:#111418}
/* запас під смугу: вона заходить на нижню частину кадру, а не на текст */
.why-row{padding-bottom:clamp(86px,9vw,168px)}
.why-img img{width:100%;height:100%;display:block;object-fit:cover;
  aspect-ratio:var(--ar,16/10)}
.why-row:nth-of-type(3) .why-img{--ar:4/5}
.why-row:nth-of-type(4) .why-img{--ar:3/2}

/* ─── стрічка, що біжить ───────────────────────────────────────────────
   Стоїть у власній смузі МІЖ записами, а не поверх них: ні текст, ні кадр
   вона не перекриває. Рухається від прокрутки, сусідні смуги — у різні боки.
   Текст продубльовано двічі, тому край ніколи не оголюється.            */
.why-tape{position:absolute;left:0;right:0;bottom:var(--tb,13%);z-index:3;
  overflow:hidden;mix-blend-mode:screen;
  -webkit-user-select:none;user-select:none;pointer-events:none}
.why-tape>span{display:flex;width:max-content;
  transform:translate3d(var(--wx,0px),0,0);will-change:transform}
.why-set{display:flex;align-items:center;flex:none}
.why-tape b{font-family:'Archivo',var(--display),sans-serif;font-weight:800;
  font-variation-settings:'wdth' 118,'wght' 800;
  font-size:clamp(44px,7.4vw,118px);line-height:1.04;letter-spacing:-.022em;
  color:#E4102F;white-space:nowrap}
.why-tape i{flex:none;width:clamp(11px,1.1vw,18px);height:clamp(11px,1.1vw,18px);
  margin:0 clamp(22px,2.8vw,52px);background:#E4102F;transform:rotate(45deg);
  opacity:.85}

/* ─── поява ────────────────────────────────────────────────────────────── */
.why-motion .why-txt,
.why-motion .why-img{opacity:0;transform:translateY(26px);
  transition:opacity .7s var(--e),transform .95s var(--e)}
.why-motion .why-img{transition-delay:.07s}
.why-motion .why-row.in .why-txt,
.why-motion .why-row.in .why-img{opacity:1;transform:none}

@media(max-width:960px){
  .why-top{grid-template-columns:minmax(0,1fr);gap:16px}
  .why-kick{padding-top:0}
  .why-row{grid-template-columns:minmax(0,1fr);
    gap:clamp(20px,4vw,30px);padding-block:clamp(34px,7vw,56px)}
  .why-txt{order:1}
  .why-img{order:2}
  .why-img,.why-row:nth-of-type(3) .why-img,.why-row:nth-of-type(4) .why-img{--ar:16/10}
  .why-tape b{font-size:clamp(38px,11vw,72px)}
  .why-row{padding-bottom:clamp(58px,13vw,96px)}
  .why-tape{--tb:9%}
}

@media (prefers-reduced-motion:reduce){
  .why-motion .why-txt,.why-motion .why-img{opacity:1;transform:none;transition:none}
  .why-tape>span{transform:none}
}

/* =========================================================================
   ШАПКА — акценти
   «ПЕРЕВЕЗЕННЯ × СЕРВІС» було дрібним службовим написом у 9.5px; це два
   напрямки бізнесу, тож воно має читатись одразу. Пункти меню теж підняті.
   ========================================================================= */
.nav .brand span{font-family:var(--display);font-weight:800;
  font-size:clamp(11px,.92vw,14px);letter-spacing:.1em;color:var(--ink);
  padding-left:16px;border-left:1px solid var(--line);white-space:nowrap}
.nav .brand span i{font-style:normal;color:var(--red);
  padding:0 .18em;font-weight:700}

.nav menu a{font-family:var(--display);font-weight:700;
  font-size:clamp(11.5px,.88vw,13.5px);letter-spacing:.055em;
  padding:11px 15px;color:var(--ink);position:relative}
/* підкреслення росте з-під пункту, а не блимає кольором */
.nav menu a:not(.go)::after{content:'';position:absolute;left:15px;right:15px;bottom:6px;
  height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--e)}
.nav menu a:not(.go):hover::after,
.nav menu a[aria-current]::after{transform:scaleX(1)}
.nav menu a[aria-current]{color:var(--red)}

.nav .go{font-family:var(--display);font-weight:800;letter-spacing:.055em;
  background:var(--red);color:#fff!important;padding:13px 22px;margin-left:14px;
  border-radius:999px}
.nav .go:hover{background:var(--ink)}

@media(max-width:1180px){
  .nav .brand span{font-size:11px;letter-spacing:.06em}
  .nav menu a{padding:11px 11px;font-size:11.5px}
}
@media(max-width:960px){ .nav .brand span{display:none} }

/* Заголовок героя наїжджав на плашку «Перемишляни»: line-height .94 робить
   рядок нижчим за самі літери, і верхівки лізли вгору. Даємо запас. */
.head .d1{margin:26px 0 0}
@media(max-width:620px){ .head .d1{margin:18px 0 0} }

/* =========================================================================
   ГРАФА 02 — доповнення
   Підпис графи, короткий опис під назвою і ряд показників, що відраховуються
   при появі. Напрямки стоять окремим рядком унизу картки.
   ========================================================================= */
.dir2-head{max-width:1440px;margin:0 auto clamp(26px,3.4vw,52px);
  padding:0 calc(var(--u)*4)}
.dir2-head .k{display:block;margin-bottom:14px;color:var(--muted)}
.dir2-head h2{margin:0;font-family:var(--display);font-weight:800;
  font-size:clamp(27px,3.9vw,58px);line-height:1.04;letter-spacing:-.03em;
  text-wrap:balance}
.dir2-head h2 em{font-style:normal;color:var(--red)}

.dc-lead{margin:18px 0 0;font-size:clamp(13.5px,1.02vw,15px);line-height:1.66;
  color:var(--muted);max-width:46ch}

.dc-nums b{font-variant-numeric:tabular-nums}
.dc-dirs{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:18px;
  padding-top:16px;border-top:1px solid var(--line-2)}
.dc-dirs span{display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2)}
.dc-dirs i{width:6px;height:6px;flex:none;background:var(--red);
  transform:rotate(45deg)}

/* показники з'їжджаються знизу, коли ряд входить у кадр */
.kt-motion .facts-in>div,
.kt-motion .dc-nums>div{opacity:0;transform:translateY(14px);
  transition:opacity .55s var(--e),transform .7s var(--e)}
.kt-motion .facts-in>div:nth-child(2),
.kt-motion .dc-nums>div:nth-child(2){transition-delay:.08s}
.kt-motion .facts-in>div:nth-child(3),
.kt-motion .dc-nums>div:nth-child(3){transition-delay:.16s}
.kt-motion .facts-in>div:nth-child(4),
.kt-motion .dc-nums>div:nth-child(4){transition-delay:.24s}
.kt-motion .facts-in.in>div,
.kt-motion .dc-nums.in>div{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .kt-motion .facts-in>div,
  .kt-motion .dc-nums>div{opacity:1;transform:none;transition:none}
}
@media(max-width:620px){
  .dc-dirs{gap:8px 16px}
  .dc-dirs span{font-size:11px}
}

/* =========================================================================
   ГРАФА 03 — автопарк
   Ізотерм був менший за BDF і тент (88% проти 100%) — у ряду це читалось
   як інший масштаб. Вирівнюємо. Дорогу під машинами прибираємо: тепер,
   коли кадри стали більші, вона з-під них не видно й лишається смітинкою.
   ========================================================================= */
.dslide .dcard,
.dslide .dcard-iso{width:100%;max-height:40vh}
.droad{display:none!important}
@media(max-width:900px){ .dslide .dcard,.dslide .dcard-iso{max-height:36vh} }
@media(max-width:620px){ .dslide .dcard,.dslide .dcard-iso{max-height:32vh} }

/* =========================================================================
   ПЕРЕХІД 04 → 05
   Кадр на всю ширину і висоту екрана, крізь який проїжджаєш. Він прилипає,
   темна графа 04 сходить із нього вгору, світла графа 05 насуває згори.

   Прилипання ОБОВ'ЯЗКОВО тримати в обгортці .xwrap: без неї контейнером
   стає <body>, кадр лишається приклеєним до кінця сторінки й проступає
   крізь усі наступні секції.
   ========================================================================= */
/* Фото НЕ рухається — ні масштабу, ні зсуву. Воно просто стоїть
   на задньому плані на всю шибку, а обидві сусідні графи їздять ПО ньому.

   Обидві обгортки підняті негативним margin-ом, і це принципово:
     • .xwrap на -100svh — кадр прилипає ще під графою 04, тож темна
       графа зʼїжджає з нього вгору й відкриває фото;
     • .sto на -100svh — наступна графа насуває ЗВЕРХУ на ще прилиплий
       кадр. Без цього вона ставала б одразу під кадром і штовхала його
       вгору — фото «втикалося» б у неї замість лишатись позаду.

   Висота .xwrap рахується як P + 2·B + 100svh, де B — висота кадру,
   P — пауза з чистим фото. 40 + 200 + 100 = 340svh.                    */
.xwrap{position:relative;z-index:0;margin-top:-100svh;height:340svh}
.xband{position:sticky;top:0;height:100svh;overflow:hidden;background:#090B0D}
.xband img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  display:block;transform:none}
/* сусіди мусять бути непрозорі й вище за шаром, інакше кадр просвічує */
.why,.sto{position:relative;z-index:2}
@media(max-width:620px){
  /* B = 76svh, P = 24svh → 24 + 152 + 100 = 276svh */
  .xwrap{margin-top:-76svh;height:276svh}
  .xband{height:76svh}
}
@media (prefers-reduced-motion:reduce){
  .xwrap{margin-top:0;height:auto}
  .xband{position:relative;height:56svh}
}

/* =========================================================================
   ГРАФА 05 — НАПРЯМКИ
   Карта показувала контур Європи, але не відповідала на питання «куди ви
   возите». Два плеча, перелік країн і міст, і підсумковий ряд унизу.
   ========================================================================= */
.dirs{background:var(--paper);padding-block:clamp(54px,7vw,110px);
  border-top:1px solid var(--line);overflow:clip}
.dirs-in{max-width:1440px;margin:0 auto;padding:0 calc(var(--u)*4)}
.dirs-head{max-width:66ch;margin-bottom:clamp(34px,4.4vw,66px)}
.dirs-head .k{display:block;margin-bottom:16px;color:var(--muted)}
.dirs-head h2{margin:0;font-family:var(--display);font-weight:800;
  font-size:clamp(30px,4.4vw,66px);line-height:1.03;letter-spacing:-.032em}
.dirs-head h2 em{font-style:normal;color:var(--red)}
.dirs-head p{margin:20px 0 0;font-size:clamp(14px,1.08vw,16px);line-height:1.68;
  color:var(--muted);max-width:52ch}

.dirs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2vw,32px)}
.dirs-card{border:1px solid var(--line);background:var(--card,#fff);
  padding:clamp(22px,2.6vw,40px);position:relative;overflow:hidden;
  transition:border-color .4s var(--e),transform .5s var(--e)}
.dirs-card::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--red);transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--e)}
.dirs-card:hover{border-color:var(--ink);transform:translateY(-3px)}
.dirs-card:hover::before{transform:scaleX(1)}
.dirs-card header{display:flex;align-items:center;justify-content:space-between;
  gap:16px;margin-bottom:clamp(18px,2.4vw,34px)}
.dirs-no{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--red)}
.dirs-tag{font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  color:var(--muted);border:1px solid var(--line);padding:7px 11px}
.dirs-card h3{margin:0;font-family:var(--display);font-weight:800;
  font-size:clamp(22px,2.5vw,40px);line-height:1.08;letter-spacing:-.028em}
.dirs-card h3 i{font-style:normal;color:var(--red);padding:0 .12em}
.dirs-card>p{margin:16px 0 0;font-size:14.5px;line-height:1.68;
  color:var(--muted);max-width:40ch}
.dirs-list{list-style:none;display:flex;flex-wrap:wrap;gap:8px;
  margin:clamp(20px,2.4vw,32px) 0 0;padding:0}
.dirs-list li{font-family:var(--mono);font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-2);
  border:1px solid var(--line);padding:9px 13px}

.dirs-foot{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:clamp(26px,3.2vw,52px);border-top:1px solid var(--line)}
.dirs-foot>div{padding:22px 20px 0 0;border-right:1px solid var(--line-2)}
.dirs-foot>div:last-child{border-right:0}
.dirs-foot span{display:block;font-family:var(--mono);font-size:11px;
  letter-spacing:.17em;color:var(--muted);margin-bottom:12px}
.dirs-foot b{display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(17px,1.7vw,26px);letter-spacing:-.02em;line-height:1.1}
.dirs-foot i{display:block;margin-top:8px;font-style:normal;font-size:12.5px;
  line-height:1.5;color:var(--muted)}

@media(max-width:900px){
  .dirs-grid{grid-template-columns:minmax(0,1fr)}
  .dirs-foot{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 0}
  .dirs-foot>div{padding-bottom:20px}
  .dirs-foot>div:nth-child(2){border-right:0}
}
@media(max-width:560px){
  .dirs-foot{grid-template-columns:minmax(0,1fr)}
  .dirs-foot>div{border-right:0;border-bottom:1px solid var(--line-2)}
  .dirs-foot>div:last-child{border-bottom:0}
}

/* =========================================================================
   ГРАФА 06 — ВЛАСНЕ СТО
   Було два окремі блоки з однаковим номером (сервіс і база). Тепер один:
   ліворуч текст, що лишається на місці, праворуч чотири кроки з кадрами.
   ========================================================================= */
.sto{background:var(--ink);color:var(--paper);
  padding-block:clamp(54px,7vw,112px);overflow:clip}
.sto-in{max-width:1440px;margin:0 auto;padding:0 calc(var(--u)*4);
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(28px,4.4vw,84px);align-items:start}

.sto-left{position:sticky;top:calc(var(--nav) + 36px)}
.sto-left .k{display:block;margin-bottom:16px;color:#8E959D}
.sto-left h2{margin:0;font-family:var(--display);font-weight:800;
  font-size:clamp(28px,3.6vw,56px);line-height:1.04;letter-spacing:-.03em;color:#fff}
.sto-left h2 em{font-style:normal;color:var(--red)}
.sto-left>p{margin:20px 0 0;font-size:clamp(14px,1.05vw,15.5px);line-height:1.7;
  color:#9BA2AA;max-width:44ch}
/* адреса одразу під заголовком — саме вона і є акцентом цієї графи */
.sto-left>p.sto-where{margin:14px 0 0;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:#C3C9D0;max-width:none}
.sto-where a{color:var(--red);text-decoration:none;white-space:nowrap;
  margin-left:.9em;border-bottom:1px solid rgba(228,16,47,.35);padding-bottom:1px}
.sto-where a:hover{border-bottom-color:var(--red)}
@media(max-width:620px){
  .sto-where a{display:block;margin:8px 0 0}
}
.sto-meta{display:grid;gap:0;margin:clamp(22px,2.6vw,36px) 0 clamp(22px,2.6vw,34px);
  border-top:1px solid rgba(255,255,255,.14)}
.sto-meta>div{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.09);
  display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.sto-meta span{font-family:var(--mono);font-size:11px;letter-spacing:.17em;color:#7E868F}
.sto-meta b{font-family:var(--display);font-weight:700;font-size:14.5px;color:#fff}

.sto-steps{list-style:none;margin:0;padding:0;display:grid;
  gap:clamp(16px,2vw,30px)}
.sto-step{position:relative;display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(16px,2.2vw,32px);align-items:center;
  border:1px solid rgba(255,255,255,.12);padding:clamp(14px,1.6vw,22px);
  transition:border-color .45s var(--e),background .45s var(--e)}
.sto-step:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.03)}
.sto-no{position:absolute;top:clamp(14px,1.6vw,22px);right:clamp(14px,1.6vw,22px);
  z-index:2;font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--red)}
.sto-step figure{margin:0;overflow:hidden;background:#15181C}
.sto-step figure img{width:100%;height:100%;display:block;object-fit:cover;
  aspect-ratio:4/3;transition:transform 1.1s var(--e)}
.sto-step:hover figure img{transform:scale(1.045)}
.sto-txt h3{margin:0 0 10px;font-family:var(--display);font-weight:700;
  font-size:clamp(16px,1.4vw,20px);letter-spacing:-.015em;color:#fff}
.sto-txt p{margin:0;font-size:13.5px;line-height:1.66;color:#949BA3}
.sto-link{display:inline-block;margin-top:14px;font-family:var(--mono);
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--red);text-decoration:none;border-bottom:1px solid transparent;
  transition:border-color .3s var(--e)}
.sto-link:hover{border-color:var(--red)}

/* поява кроків */
.kt-motion .sto-step{opacity:0;transform:translateY(22px);
  transition:opacity .6s var(--e),transform .8s var(--e),
             border-color .45s var(--e),background .45s var(--e)}
.kt-motion .sto-step.in{opacity:1;transform:none}

@media(max-width:1000px){
  .sto-in{grid-template-columns:minmax(0,1fr)}
  .sto-left{position:static}
}
@media(max-width:620px){
  .sto-step{grid-template-columns:minmax(0,1fr);gap:14px}
  .sto-step figure img{aspect-ratio:16/10}
  .sto-no{top:auto;bottom:calc(100% - 34px);right:16px}
}
@media (prefers-reduced-motion:reduce){
  .kt-motion .sto-step{opacity:1;transform:none;transition:none}
  .sto-step:hover figure img{transform:none}
}

/* =========================================================================
   ЄДИНА СІТКА
   Поля роз'їхались: більшість секцій стоять на 1440px із відступом
   calc(--u*4) = 32px, а стрічка замовників, підвал і блок заявки мали свої
   значення (57.6px, 1560px, двоколонкову рейку). Зводимо все до одного.
   Правити ширину й поле далі тільки тут.
   ========================================================================= */
:root{ --shell:1440px; --gut:calc(var(--u) * 4); }

.pt-head{max-width:var(--shell);padding-inline:var(--gut)}
.ft-in{max-width:var(--shell);padding-inline:var(--gut)}

/* Блок заявки лишався на старій рейці й починався на 204px, коли сусідні
   секції починались на 32px. Робимо його одноколонковим, а службові
   підписи — горизонтальним рядком угорі. */
/* .sheet навколо вже дає потрібне поле — своє тут не додаємо, інакше
   відступ подвоюється до 64px. */
#vidhuky.graf,
#zayavka .graf{grid-template-columns:minmax(0,1fr);
  max-width:var(--shell);margin:0 auto;padding-inline:0}
#vidhuky .graf-rail,
#zayavka .graf-rail{border-right:0;border-bottom:1px solid var(--line-inv,rgba(242,241,237,.14));
  padding:26px 0 18px;display:flex;align-items:baseline;gap:26px;flex-wrap:wrap}
#vidhuky .graf-rail .nm, #vidhuky .graf-rail .meta,
#zayavka .graf-rail .nm, #zayavka .graf-rail .meta{margin:0;line-height:1.5}
/* переносів у цих підписах більше немає — вони стоять одним рядком */
#vidhuky .graf-body,
#zayavka .graf-body{padding:30px 0 72px}
/* світла секція — межа під підписами має бути темною, а не світлою */
#vidhuky.graf{max-width:var(--shell);margin:0 auto;padding-inline:var(--gut)}
#vidhuky .graf-rail{border-bottom-color:var(--line)}

@media(max-width:620px){
  #vidhuky .graf-rail,
  #zayavka .graf-rail{gap:12px 18px;padding-top:22px}
}


/* =========================================================================
   ПЕРЕХОДИ МІЖ СЕКЦІЯМИ
   Рівна горизонтальна межа між світлим і темним читається як стик двох
   шматків. Даємо темним секціям скошений верх і низ — межа стає лінією
   композиції. Кут малий (16px на всю ширину), тож на телефоні не ріже.
   ========================================================================= */
.why,.sto,#zayavka{
  --cut:clamp(10px,1.5vw,26px);
  clip-path:polygon(0 var(--cut), 100% 0, 100% calc(100% - var(--cut)), 0 100%)}
.why{margin-top:calc(var(--cut) * -1)}
.sto{margin-block:calc(var(--cut) * -1)}
/* графа 05 насуває на прилиплий кадр переходу — див. блок .xwrap вище.
   Тримаємо тут, бо правило --cut іде пізніше й інакше перебило б його. */
.sto{margin-top:-100svh}
@media(max-width:620px){ .sto{margin-top:-100svh} }
@media (prefers-reduced-motion:reduce){ .sto{margin-top:calc(var(--cut) * -1)} }
#zayavka{margin-top:calc(var(--cut) * -1)}

/* хвостик-індикатор переходу: тонка червона риска, що тягнеться вниз
   від межі секції й показує, що далі є продовження */
.dirs-head,.sto-left,.dir2-head{position:relative}
.dirs-head::before,.dir2-head::before{content:'';position:absolute;
  left:0;top:calc(var(--u) * -5);width:1px;height:calc(var(--u) * 4);
  background:linear-gradient(180deg,transparent,var(--red))}

@media (prefers-reduced-motion:reduce){
  .why,.sto,#zayavka{clip-path:none;margin-block:0}
}

/* =========================================================================
   ПОКАЗНИКИ — у графі 02, між заголовком і двома напрямками
   Цифри прокручуються розрядами, як на механічному лічильнику: кожен
   розряд — стовпчик 0…9, що доїжджає до свого числа зі своєю затримкою.
   Без скрипта в розмітці вже стоїть готове число, тому нічого не зникає.
   ========================================================================= */
.facts{max-width:var(--shell,1440px);margin:0 auto;
  padding:0 var(--gut,calc(var(--u)*4));
  margin-bottom:clamp(38px,4.6vw,76px);
  counter-reset:fct}
.facts-in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding-block:clamp(30px,4vw,60px)}
.fact{counter-increment:fct;position:relative;
  padding-right:clamp(16px,2.4vw,40px);border-right:1px solid var(--line-2)}
.fact:last-child{border-right:0}
/* порядковий номер показника — тонка мітка над цифрою */
.fact::before{content:'0' counter(fct);display:block;
  margin-bottom:clamp(14px,1.5vw,22px);font-family:var(--mono);font-size:11px;
  letter-spacing:.2em;color:var(--red)}
.fact b{display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(52px,7.6vw,122px);line-height:1;letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;color:var(--red)}
.fact b > i{font-style:normal;padding:0 .06em}
.flip i{color:inherit;padding:0}
/* одиниця при числі: менша й темна, щоб не сперечалась із червоним */
.fact b em{font-style:normal;font-size:.26em;font-weight:700;
  letter-spacing:.02em;color:var(--ink,#0E1114);padding-left:.3em;
  vertical-align:.52em;text-transform:uppercase}
.fact>span{display:block;margin-top:clamp(14px,1.6vw,24px);
  font-family:var(--mono);font-size:11px;letter-spacing:.15em;line-height:1.5;
  text-transform:uppercase;color:var(--muted);max-width:22ch}

/* ─── лічильник ────────────────────────────────────────────────────────
   Розряд — стовпчик із трьох наборів 0…9. Доїжджаємо не до найближчої
   цифри, а на два оберти далі, тож число встигає «розкрутитись». Крива
   різко гальмує в кінці — як у механічного лічильника.                */
.roll{display:inline-flex;overflow:hidden;vertical-align:baseline}
.roll-d{display:block;overflow:hidden;height:1em}
.roll-d u{display:block;text-decoration:none;
  transform:translateY(var(--ry,0));
  transition:transform 1.45s cubic-bezier(.16,1,.26,1) var(--rd,0ms)}
.roll-d u s{display:block;text-decoration:none;height:1em;line-height:1}

/* літери, що не крутяться, виїжджають з-під рядка по черзі */
.flip{display:inline-flex;overflow:hidden;vertical-align:baseline}
.flip i{display:block;font-style:normal;transform:translateY(100%);
  transition:transform .8s cubic-bezier(.16,1,.26,1) var(--fd,0ms)}
.facts-in.in .flip i{transform:none}

/* одиниця при числі підтягується слідом */
.fact b em{opacity:0;transform:translateY(6px);
  transition:opacity .5s var(--e) var(--ed,0ms),transform .6s var(--e) var(--ed,0ms)}
.facts-in.in .fact b em{opacity:1;transform:none}

/* ─── риска веде за собою ─────────────────────────────────────────────
   Один жест: лінія йде зліва направо, і кожен показник вмикається
   саме тоді, коли вона його проходить.                                */
.kt-motion .facts-in{position:relative}
.kt-motion .facts-in::after{content:'';position:absolute;left:0;right:0;top:-1px;
  height:1px;background:var(--red);transform:scaleX(0);transform-origin:left;
  transition:transform 1.25s cubic-bezier(.3,.9,.2,1)}
.kt-motion .facts-in.in::after{transform:scaleX(1)}
.kt-motion .fact{opacity:0;transform:translateY(12px)}
.kt-motion .facts-in.in .fact{opacity:1;transform:none;
  transition:opacity .55s var(--e) var(--fo,0ms),transform .7s var(--e) var(--fo,0ms)}

@media(max-width:760px){
  .facts-in{grid-template-columns:minmax(0,1fr);gap:0}
  .fact{border-right:0;padding:16px 0;border-bottom:1px solid var(--line-2)}
  .fact:last-child{border-bottom:0;padding-bottom:0}
  .fact:first-child{padding-top:0}
}
@media(max-width:420px){
  .fact b{font-size:60px}
  .fact>span{font-size:11px;letter-spacing:.12em}
}
@media (prefers-reduced-motion:reduce){
  .kt-motion .fact{opacity:1;transform:none;transition:none}
  .kt-motion .facts-in::after{transform:scaleX(1)}
  .roll-d u,.flip i,.fact b em{transition:none}
  .flip i{transform:none}
  .fact b em{opacity:1;transform:none}
}

}

/* =========================================================================
   ЦЕХ — стрічка замість сітки.
   Замовник просив: без прикрас, чорно-білі, не згрупувати, а прогорнути
   вбік, частково і не на всю сторінку. Тому стрічка живе всередині
   звичайної колонки, останній кадр навмисно зрізаний краєм — це й
   показує, що далі є ще.

   Колесо НЕ перехоплюємо: вертикальна прокрутка над стрічкою має
   гортати сторінку. Вбік — трекпад, Shift+колесо, пальцем або стрілками.
   ========================================================================= */
.tr-rail{position:relative;margin-top:clamp(26px,3.2vw,48px)}
.tr-track{list-style:none;margin:0;padding:0;display:flex;
  gap:clamp(10px,1.2vw,18px);
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  /* край стрічки розчиняється — видно, що вона триває далі */
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 92%,transparent 100%);
          mask-image:linear-gradient(90deg,#000 0,#000 92%,transparent 100%)}
.tr-track::-webkit-scrollbar{display:none}
.tr-track li{flex:0 0 clamp(196px,22vw,300px);scroll-snap-align:start}
.tr-track figure{margin:0}
.tr-track img{display:block;width:100%;height:auto;aspect-ratio:3/4;
  object-fit:cover;background:var(--paper-2)}
.tr-track figcaption{margin-top:13px}
.tr-track figcaption b{display:block;font-family:var(--display);font-weight:700;
  font-size:14.5px;letter-spacing:-.012em;color:var(--ink)}
.tr-track figcaption span{display:block;margin-top:5px;font-family:var(--mono);
  font-size:11px;letter-spacing:.1em;line-height:1.55;text-transform:uppercase;
  color:var(--muted)}

.tr-rail-foot{display:flex;align-items:center;gap:18px;
  margin-top:clamp(18px,2vw,28px)}
.tr-hint{flex:0 0 auto;font-family:var(--mono);font-size:11px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--muted)}
.tr-hint::after{content:' →'}
.tr-bar{flex:1 1 auto;height:1px;background:var(--line);position:relative}
.tr-bar i{position:absolute;left:0;top:-1px;height:3px;width:var(--w,28%);
  background:var(--red);transform:translateX(var(--x,0));
  transition:width .25s var(--e)}
@media(max-width:620px){
  .tr-track li{flex:0 0 68vw}
  .tr-hint{font-size:11px}
}

/* =========================================================================
   ДОТИКИ НА ТЕЛЕФОНІ
   Найважливіші посилання сайту — телефон, пошта, маршрут — мали висоту
   21–27px, а кнопка закриття меню взагалі 13px. Пальцем у таке не
   влучиш. Додаємо площу дотику, не чіпаючи вигляд: на вузькому екрані
   посилання лишається тим самим, просто навколо нього з'являється поле.
   ========================================================================= */
@media(max-width:760px){
  .mob .cl{padding:14px 6px;margin:-14px -6px}
  .ft-blk a,.ft-dir{display:inline-block;padding-block:10px}
  .sto-link,.co-hero-link,.fx-link,.sto-where a,
  .fx-form-meta a,.fx-geo-base a{
    display:inline-flex;align-items:center;min-height:44px}
  /* у підвалі посилання стоять у стовпчик — лишній відступ зверху зайвий */
  .ft-blk a:first-of-type{padding-top:4px}
}

/* прямий телефон біля форми запису — для тих, кому простіше подзвонити */
.zv-call{margin:14px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  line-height:1.7;text-transform:uppercase;color:#8E959D}
.zv-call a{color:var(--red);text-decoration:none;
  border-bottom:1px solid rgba(228,16,47,.4);padding-bottom:2px}
.zv-call a:hover{border-bottom-color:var(--red)}
@media(max-width:760px){ .zv-call a{display:inline-flex;align-items:center;min-height:44px} }

/* =========================================================================
   КОНТРАСТ НА ТЕМНИХ СЕКЦІЯХ
   Фірмовий червоний #C8102E на чорнилі дає лише 3.2 замість потрібних
   4.5, а приглушений сірий — 2.9. Для дрібного тексту на темному
   беремо трохи світліші відтінки; заливки й світлі секції не чіпаємо.
   ========================================================================= */
:root{ --red-on-dark:#FF1F3C; --muted-on-dark:#9AA2AA }
.dark .graf-rail .no,
.dark .zv-call a,
.zv-call a{color:var(--red-on-dark);border-bottom-color:rgba(255,31,60,.42)}
.dark .f2-note,
.dark .zv-call,
.dark .graf-rail .meta{color:var(--muted-on-dark)}
/* службова мітка в шапці була майже невидима: сталевий по паперу — 1.4 */
.head .stamp .k[style]{color:var(--muted)!important}

/* =========================================================================
   СЕРВІС · ПИТАННЯ ПЕРЕД ВІЗИТОМ
   Сторінка вже показує, що дивимось, що робимо і як рахуємо. Бракувало
   відповідей на те, що власник машини питає ПЕРЕД тим, як її привезти.
   Рідний <details>: працює без скрипта і доступний із клавіатури.
   ========================================================================= */
.sv-faq{background:var(--paper);border-top:1px solid var(--line)}
.sv-faq-in{max-width:1440px;margin:0 auto;padding:calc(var(--u)*11) clamp(24px,4vw,72px)}
.sv-faq-head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,60px);
  align-items:end;margin-bottom:clamp(30px,4vw,56px)}
.sv-faq-head .k{display:block;margin-bottom:12px}
.sv-faq-lede{font-size:clamp(14px,1.05vw,15.5px);line-height:1.7;color:var(--muted);
  max-width:46ch}
.sv-faq-list{border-top:1px solid var(--line)}
.sv-faq-list details{border-bottom:1px solid var(--line-2)}
.sv-faq-list summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;
  justify-content:space-between;gap:20px;padding:clamp(20px,2.2vw,30px) 0;
  font-family:var(--display);font-weight:700;
  font-size:clamp(16px,1.5vw,22px);letter-spacing:-.018em;color:var(--ink);
  transition:color .3s var(--e)}
.sv-faq-list summary::-webkit-details-marker{display:none}
.sv-faq-list summary:hover{color:var(--red)}
.sv-faq-list summary::after{content:'+';flex:0 0 auto;font-family:var(--mono);
  font-size:20px;line-height:1;color:var(--red);transition:transform .35s var(--e)}
.sv-faq-list details[open] summary{color:var(--red)}
.sv-faq-list details[open] summary::after{transform:rotate(45deg)}
.sv-faq-a{padding:0 0 clamp(22px,2.4vw,32px);max-width:72ch;
  font-size:clamp(14px,1.05vw,15.5px);line-height:1.72;color:var(--ink-2)}
.sv-faq-a strong{font-weight:700;color:var(--ink)}
@media(max-width:860px){
  .sv-faq-head{grid-template-columns:minmax(0,1fr);align-items:start;gap:18px}
}
@media(max-width:760px){
  .sv-faq-list summary{min-height:44px}
}

/* ═══ СЕРВІС · ВОРОТА ══════════════════════════════════════════════════
   Одна велика фотографія цеху і коротка відповідь на питання, яке
   питають найчастіше: «а якщо я приїду ввечері».                      */
.sv-gate{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:stretch;background:var(--ink);color:var(--paper)}
.sv-gate-img{margin:0;position:relative;min-height:clamp(300px,42vw,620px);overflow:hidden}
.sv-gate-img img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 56%;display:block}
.sv-gate-txt{padding:clamp(32px,5vw,86px) clamp(22px,4.4vw,78px);
  display:flex;flex-direction:column;justify-content:center}
.sv-gate-lab{font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--red-on-dark)}
.sv-gate-txt h2{margin:clamp(16px,2vw,26px) 0 0;font-family:var(--display);
  font-weight:800;letter-spacing:-.022em;line-height:1.08;
  font-size:clamp(26px,3.1vw,50px);color:var(--paper)}
.sv-gate-txt h2 em{font-style:normal;color:var(--red-on-dark)}
.sv-gate-txt p{margin:clamp(14px,1.8vw,24px) 0 0;max-width:52ch;
  font-size:clamp(14px,1.02vw,16px);line-height:1.74;color:#C3C8CD}
.sv-gate-dl{margin:clamp(22px,2.8vw,38px) 0 0;display:grid;gap:0;
  border-top:1px solid rgba(242,241,237,.14)}
.sv-gate-dl div{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);
  gap:clamp(12px,2vw,28px);padding:clamp(12px,1.5vw,18px) 0;
  border-bottom:1px solid rgba(242,241,237,.08)}
.sv-gate-dl dt{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-on-dark)}
.sv-gate-dl dd{margin:0;font-size:14px;line-height:1.5;color:var(--paper)}
.sv-gate-go{align-self:start;margin-top:clamp(22px,2.8vw,36px);
  display:inline-flex;align-items:center;min-height:46px;
  padding:0 clamp(20px,2.4vw,32px);background:var(--red);color:#fff;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-decoration:none;
  transition:background .25s var(--e)}
.sv-gate-go:hover{background:#A50D26}
@media(max-width:900px){
  .sv-gate{grid-template-columns:minmax(0,1fr)}
  .sv-gate-img{min-height:0;aspect-ratio:4/3}
}

/* ═══ КОНТРАСТ У ТЕМНІЙ СЕКЦІЇ СТО ════════════════════════════════════
   На тлі #101317 фірмовий --red (#C8102E) дає 3.17:1 замість 4.5, а
   світла кнопка-«привид» успадковувала --ink і ставала чорною на
   чорному — тексту не було видно взагалі. Нижче — точкові заміни.   */
.sto .btn-s{color:var(--paper);border-color:rgba(242,241,237,.34)}
.sto .btn-s:hover,.sto .btn-s:focus-visible{background:var(--paper);color:var(--ink);
  border-color:var(--paper)}
/* картка на hover світлішає до ~#1A1D21, де #FF1F3C дає 4.4 —
   для цих двох дрібних елементів беремо ще на крок світліший */
.sto-no,.sto-link{color:#FF4760}
.sto-link:hover{border-color:#FF4760}
.sto-where a{color:var(--red-on-dark)}
.sto-left h2 em{color:var(--red-on-dark)}

/* --steel на папері — 1.42:1, тобто підпису просто не видно */
.graf-rail .meta{color:var(--muted)}

/* У темних коробках підвалу (#0C0F13) --muted дає 3.0:1 — замало */
.ft-shot .k,.ft-map .k,.ft-coords{color:var(--muted-on-dark)}

/* ═══ СЕРВІС · БІГАЮЧА СТРІЧКА ════════════════════════════════════════
   Та сама механіка, що на перевезеннях: два однакові треки їдуть
   поруч, тож коли перший виходить за край, другий уже на його місці. */
.tick{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;background:var(--paper);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.tick-in{display:flex;width:max-content}
.tick-tr{display:flex;align-items:center;flex:none;
  padding:clamp(13px,1.5vw,20px) 0;animation:tick-run 46s linear infinite}
.tick:hover .tick-tr{animation-play-state:paused}
.tick-tr span{flex:none;padding:0 clamp(16px,2vw,30px);
  font-family:var(--mono);font-size:clamp(11px,.92vw,13px);letter-spacing:.17em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap}
.tick-tr i{flex:none;font-style:normal;color:var(--red);font-size:9px;line-height:1}
@keyframes tick-run{from{transform:translate3d(0,0,0)}to{transform:translate3d(-100%,0,0)}}
@media(prefers-reduced-motion:reduce){ .tick-tr{animation:none} }

/* ═══ СЕРВІС · ЦЕХ ЇДЕ САМ ════════════════════════════════════════════
   Замість стрічки, яку треба тягнути пальцем, — та сама прокрутка, що
   на перевезеннях. Підписи лишаються: без них кадри нічого не кажуть. */
.srail{position:relative;overflow:hidden;margin-top:clamp(26px,3.4vw,44px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.srail-in{display:flex;width:max-content}
.srail-tr{display:flex;flex:none;gap:clamp(10px,1.2vw,20px);
  padding-right:clamp(10px,1.2vw,20px);
  animation:srail-run 72s linear infinite}
.srail:hover .srail-tr{animation-play-state:paused}
.srail figure{flex:none;margin:0;width:clamp(230px,26vw,380px)}
.srail figure>img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;
  background:var(--paper-2)}
.srail figcaption{margin-top:12px}
.srail figcaption b{display:block;font-family:var(--display);font-weight:700;
  font-size:14px;letter-spacing:-.01em;color:var(--ink)}
.srail figcaption span{display:block;margin-top:5px;font-family:var(--mono);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  line-height:1.5}
@keyframes srail-run{from{transform:translate3d(0,0,0)}to{transform:translate3d(-100%,0,0)}}
@media(prefers-reduced-motion:reduce){
  .srail{mask-image:none;-webkit-mask-image:none}
  .srail-in{width:auto;overflow-x:auto;scroll-snap-type:x proximity}
  .srail-tr{animation:none}
  .srail-tr+.srail-tr{display:none}
  .srail figure{scroll-snap-align:start}
}

/* Підпис над дорожньою стрічкою прибрано: він стояв рівно там, куди
   наприкінці шляху доїжджає машина, і вони накладались один на одного.
   Сам бокс гаража лишається — він і є ціллю, до якої їде вантажівка. */
.rig-stop{display:none}

/* Пастка для ботів. Приховуємо так, щоб поле лишалось у формі для
   автозаповнювачів ботів, але не потрапляло ні на екран, ні під Tab,
   ні в читалку. display:none частина ботів розпізнає й обходить. */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;
  overflow:hidden;opacity:0;pointer-events:none}