/* =========================================================
   ТОКЕНИ
   ========================================================= */
:root{
  --ink:#101214;          /* основний темний */
  --ink-2:#191C20;        /* поверхня на темному */
  --ink-3:#24282D;        /* бордер на темному */
  --amber:#FFC42E;        /* акцент */
  --amber-d:#E8A800;      /* акцент hover */
  --paper:#F6F5F3;        /* світлий фон секцій */
  --white:#fff;
  --grey:#8D9298;         /* текст другорядний */
  --grey-l:#E3E1DC;

  --wa:#25D366; --vb:#7360F2; --tg:#2AABEE;

  --c: 1180px;            /* контейнер */
  --r: 14px;              /* радіус карток */
  --r-s: 8px;

  --f: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* =========================================================
   БАЗА
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--f); font-size:17px; line-height:1.6;
  color:var(--ink); background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block; height:auto}
a{color:inherit; text-decoration:none}
button{font:inherit}
:focus-visible{outline:3px solid var(--amber); outline-offset:3px; border-radius:4px}

h1,h2,h3,h4{margin:0 0 .5em; font-variation-settings:"wdth" 92; line-height:1.08; letter-spacing:-.015em}
h1{font-weight:800; font-size:clamp(34px,5.4vw,60px)}
h2{font-weight:800; font-size:clamp(27px,3.6vw,42px)}
h3{font-weight:700; font-size:clamp(19px,2vw,23px); line-height:1.25}
p{margin:0 0 1em}
.lead{font-size:clamp(17px,1.6vw,20px); color:#4A4F55}

.wrap{max-width:var(--c); margin:0 auto; padding:0 20px}
.sec{padding:clamp(52px,7vw,92px) 0}
.sec--paper{background:var(--paper)}
.sec--dark{background:var(--ink); color:var(--white)}
.sec--dark .lead{color:#B6BBC1}
.sec-head{max-width:760px; margin-bottom:clamp(28px,4vw,44px)}

/* Кнопки */
.btn{
  display:inline-flex; align-items:center; gap:10px; justify-content:center;
  padding:15px 26px; border-radius:var(--r-s); border:0; cursor:pointer;
  font-weight:700; font-size:16px; letter-spacing:.01em;
  transition:background .18s, color .18s, transform .18s;
}
.btn:active{transform:translateY(1px)}
.btn--amber{background:var(--amber); color:var(--ink)}
.btn--amber:hover{background:var(--amber-d)}
.btn--ghost{background:transparent; color:var(--white); border:1.5px solid rgba(255,255,255,.35)}
.btn--ghost:hover{border-color:var(--amber); color:var(--amber)}
.btn--dark{background:var(--ink); color:var(--white)}
.btn--dark:hover{background:#2A2F35}
.btn--sm{padding:11px 18px; font-size:15px}
.btn--wide{width:100%}

/* Смуга «небезпека» — фірмовий елемент */
.hazard{
  height:16px;
  background:repeating-linear-gradient(135deg,var(--amber) 0 26px,var(--ink) 26px 52px);
}

/* =========================================================
   ШАПКА
   ========================================================= */
.topbar{background:#0B0D0F; color:#A9AEB4; font-size:14px}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:42px}
.topbar b{color:var(--amber); font-weight:600}
.topbar-msg{display:flex; align-items:center; gap:8px}

.hdr{position:sticky; top:0; z-index:60; background:rgba(16,18,20,.96); backdrop-filter:blur(8px); border-bottom:1px solid var(--ink-3)}
.hdr .wrap{display:flex; align-items:center; gap:24px; min-height:74px; color:#fff}
.logo{display:flex; align-items:center; gap:11px; font-weight:800; font-size:21px; letter-spacing:-.02em; color:#fff}
.logo span{color:var(--amber)}
.logo svg{flex:0 0 auto}
.nav{display:flex; gap:26px; margin-left:auto; font-size:15px; font-weight:600; color:#D6D9DD}
.nav a:hover{color:var(--amber)}
.hdr-phone{display:flex; flex-direction:column; line-height:1.15}
.hdr-phone a{font-size:19px; font-weight:700; color:#fff}
.hdr-phone a:hover{color:var(--amber)}
.hdr-phone small{color:var(--grey); font-size:12.5px}
.burger{display:none; margin-left:auto; background:none; border:0; color:#fff; padding:8px; cursor:pointer}

/* Месенджери */
.msgr{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:#1E2227; color:#fff; transition:transform .15s, background .15s}
.msgr:hover{transform:translateY(-2px)}
.msgr--wa:hover{background:var(--wa)} .msgr--vb:hover{background:var(--vb)} .msgr--tg:hover{background:var(--tg)}
.msgr svg{width:17px; height:17px; fill:currentColor}

/* =========================================================
   HERO
   ========================================================= */
.hero{background:var(--ink); color:#fff; position:relative; overflow:hidden}
.hero::after{content:""; position:absolute; inset:auto 0 0 0; height:16px;
  background:repeating-linear-gradient(135deg,var(--amber) 0 26px,var(--ink) 26px 52px)}
.hero .wrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:48px; align-items:center;
  padding-top:clamp(40px,5vw,66px); padding-bottom:clamp(56px,6vw,86px)}
.hero h1{font-variation-settings:"wdth" 86}
.hero h1 em{font-style:normal; color:var(--amber)}
.hero-sub{color:#B6BBC1; font-size:clamp(16px,1.7vw,19px); max-width:52ch; margin-bottom:26px}
.hero-pts{list-style:none; margin:0 0 30px; padding:0; display:grid; gap:12px}
.hero-pts li{display:flex; gap:11px; align-items:flex-start; font-size:15.5px; color:#E4E6E9}
.hero-pts svg{flex:0 0 auto; margin-top:2px; color:var(--amber)}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; align-items:center}
.hero-media{position:relative}
.hero-media picture{display:block}
.hero-media img{border-radius:var(--r); aspect-ratio:4/3; object-fit:cover; border:1px solid var(--ink-3)}
.hero-badge{position:absolute; left:-14px; bottom:-22px; background:var(--amber); color:var(--ink); border-radius:var(--r);
  padding:16px 22px; box-shadow:0 18px 40px rgba(0,0,0,.35)}
.hero-badge b{display:block; font-size:30px; font-weight:800; line-height:1}
.hero-badge span{font-size:13.5px; font-weight:600}

/* =========================================================
   ПОСЛУГИ
   ========================================================= */
.svc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.svc{background:var(--white); border:1px solid var(--grey-l); border-radius:var(--r); padding:0 22px 22px; display:flex; flex-direction:column;
  overflow:hidden; transition:border-color .18s, box-shadow .18s}
.svc:hover{border-color:var(--ink); box-shadow:0 10px 26px rgba(16,18,20,.08)}
.svc-img{margin:0 -22px 18px; width:calc(100% + 44px); max-width:none; aspect-ratio:16/10; object-fit:cover; background:var(--grey-l)}
.svc h3{margin-top:2px}
.svc h3{margin-bottom:8px}
.svc p{font-size:15px; color:#5A5F65; margin-bottom:16px}
.svc-act{margin-top:auto; padding-top:16px; border-top:1px dashed var(--grey-l)}

/* =========================================================
   ГЕОГРАФІЯ
   ========================================================= */
.geo{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:44px; align-items:start}
.city-list{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; list-style:none; margin:0; padding:0}
.city-list a{display:flex; align-items:center; justify-content:space-between; gap:8px; background:var(--white);
  border:1px solid var(--grey-l); border-radius:var(--r-s); padding:13px 15px; font-weight:600; font-size:15px}
.city-list a:hover{border-color:var(--ink); background:var(--amber)}
.city-list a i{font-style:normal; color:var(--grey); font-size:13px; font-weight:500}
.city-list a:hover i{color:var(--ink)}

/* =========================================================
   КРОКИ
   ========================================================= */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; counter-reset:s}
.step{background:var(--ink-2); border:1px solid var(--ink-3); border-radius:var(--r); padding:26px 24px; position:relative}
.step::before{counter-increment:s; content:counter(s); position:absolute; top:20px; right:22px;
  font-size:46px; font-weight:800; color:rgba(255,196,46,.16); line-height:1}
.step h3{color:var(--amber); font-size:19px}
.step p{color:#B6BBC1; font-size:15px; margin:0}

/* =========================================================
   ПРО НАС / ЦИФРИ
   ========================================================= */
.about{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:46px; align-items:center}
.about img{border-radius:var(--r); aspect-ratio:5/4; object-fit:cover}
.nums{display:flex; flex-wrap:wrap; gap:36px; margin-top:26px}
.num b{display:block; font-size:clamp(38px,5vw,56px); font-weight:800; line-height:1; font-variation-settings:"wdth" 86}
.num span{font-size:14.5px; color:#5A5F65; font-weight:600}
.num i{display:block; width:44px; height:4px; background:var(--amber); margin:10px 0 8px}

/* =========================================================
   МЕСЕНДЖЕРИ (блок)
   ========================================================= */
.chat{background:var(--amber); border-radius:var(--r); padding:clamp(28px,4vw,44px); display:grid;
  grid-template-columns:minmax(0,1fr) auto; gap:clamp(24px,3.5vw,44px); align-items:center}
.chat h2{margin-bottom:8px}
.chat p{margin:0; font-size:16.5px; max-width:46ch}
.chat-btns{display:flex; flex-wrap:wrap; gap:12px}
.chat-btn{display:inline-flex; align-items:center; gap:9px; background:var(--ink); color:#fff; padding:14px 20px; border-radius:var(--r-s); font-weight:700; font-size:15.5px}
.chat-btn svg{width:19px; height:19px; fill:currentColor}
.chat-btn--wa:hover{background:var(--wa)} .chat-btn--vb:hover{background:var(--vb)} .chat-btn--tg:hover{background:var(--tg)}

/* =========================================================
   ФОРМА
   ========================================================= */
.form-sec{background:var(--ink); color:#fff}
.form-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr); gap:48px; align-items:center}
.form-card{background:var(--ink-2); border:1px solid var(--ink-3); border-radius:var(--r); padding:clamp(24px,3vw,32px)}
.field{margin-bottom:14px}
.field label{display:block; font-size:14px; font-weight:600; color:#B6BBC1; margin-bottom:6px}
.field input,.field textarea{width:100%; padding:14px 16px; border-radius:var(--r-s); border:1px solid var(--ink-3);
  background:#101316; color:#fff; font:inherit; font-size:16px}
.field input::placeholder,.field textarea::placeholder{color:#6B7076}
.field input:focus,.field textarea:focus{border-color:var(--amber); outline:none}
.consent{display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--grey); margin:14px 0 18px}
.consent a{color:var(--amber); text-decoration:underline}
.consent input{margin-top:3px; accent-color:var(--amber); width:17px; height:17px}
.form-note{font-size:14px; color:var(--grey); margin-top:12px; text-align:center}

/* =========================================================
   FAQ
   ========================================================= */
.faq{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; align-items:start}
.faq details{background:var(--white); border:1px solid var(--grey-l); border-radius:var(--r-s)}
.faq summary{list-style:none; cursor:pointer; padding:18px 52px 18px 20px; font-weight:700; font-size:16.5px; position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:20px; top:22px; width:14px; height:14px;
  background:linear-gradient(var(--ink),var(--ink)) center/14px 2px no-repeat,
             linear-gradient(var(--ink),var(--ink)) center/2px 14px no-repeat;
  transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details[open] summary{color:var(--ink)}
.faq p{padding:0 20px 18px; margin:0; font-size:15.5px; color:#5A5F65}

/* =========================================================
   SEO-ТЕКСТ
   ========================================================= */
.seo{position:relative; max-height:250px; overflow:hidden; font-size:16px; color:#4A4F55}
.seo.is-open{max-height:none}
.seo::after{content:""; position:absolute; inset:auto 0 0 0; height:110px; background:linear-gradient(transparent,var(--paper))}
.seo.is-open::after{display:none}
.seo h3{color:var(--ink); margin-top:26px}
.seo ul{padding-left:20px}
.seo li{margin-bottom:6px}
.seo-toggle{display:block; margin:18px auto 0; background:none; border:0; color:var(--ink); font-weight:700; cursor:pointer; border-bottom:2px solid var(--amber); padding:4px 2px}

/* =========================================================
   ПІДВАЛ
   ========================================================= */
.ftr{background:var(--ink); color:#9AA0A6; font-size:15px}
.ftr .wrap{padding-top:56px; padding-bottom:30px}
.ftr-grid{display:grid; grid-template-columns:1.25fr 1fr 1fr 1.15fr; gap:34px}
.ftr h4{color:#fff; font-size:16px; margin-bottom:14px}
.ftr ul{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.ftr a:hover{color:var(--amber)}
.ftr-phone{display:block; color:#fff; font-size:21px; font-weight:700; margin-bottom:6px}
.ftr-msgr{display:flex; gap:9px; margin-top:14px}
.ftr-bot{border-top:1px solid var(--ink-3); margin-top:38px; padding-top:20px; display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; font-size:13.5px; color:#6B7076}

/* Мобільна панель дзвінка */
.callbar{display:none; position:fixed; left:0; right:0; bottom:0; z-index:70; background:rgba(16,18,20,.97); border-top:1px solid var(--ink-3); padding:9px 12px calc(9px + env(safe-area-inset-bottom)); gap:9px}
.callbar a{flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:13px 6px; border-radius:var(--r-s); font-weight:700; font-size:15px; color:#fff; background:#1E2227}
.callbar a.is-main{background:var(--amber); color:var(--ink)}
.callbar svg{width:18px; height:18px; fill:currentColor}

/* =========================================================
   МАНІПУЛЯТОР (блок #manipulyator)
   Ліва колонка: текст + прайс .mlist + CTA.
   Права колонка .crane: ілюстрація/фото + типи вантажів .cargo.
   Розмітка: <div class="wrap geo geo--crane"> … </div>
   ========================================================= */
.mlist{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:10px}
.mlist li{display:flex; align-items:baseline; gap:12px; padding:12px 16px; background:var(--white); border:1px solid var(--grey-l); border-radius:var(--r)}
.mlist span{flex:1; line-height:1.4}
.mlist b{white-space:nowrap; font-size:17px}
.geo--crane{align-items:center}
.crane-fig{margin:0; border-radius:var(--r); overflow:hidden; background:#E9EEF3}
.crane-fig img{display:block; width:100%; height:auto}
.crane-h{font-size:17px; font-weight:700; margin:22px 0 12px}
.cargo{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.cargo li{position:relative; padding:11px 12px 11px 28px; background:var(--paper); border-radius:var(--r-s); font-size:14.5px; line-height:1.35}
.cargo li::before{content:""; position:absolute; left:12px; top:17px; width:8px; height:8px; border-radius:2px; background:var(--amber)}

/* =========================================================
   ФОТО В КОНТЕНТІ
   .shots — смуга реальних фото з виїздів (Бориспіль).
   .seo-fig — ілюстрація всередині SEO-тексту (Житомир).
   ========================================================= */
.shots{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:0; padding:0}
.shots figure{margin:0; background:var(--white); border:1px solid var(--grey-l); border-radius:var(--r); overflow:hidden}
.shots img{width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--grey-l)}
.shots figcaption{padding:12px 14px; font-size:14px; line-height:1.45; color:var(--grey)}
.seo-fig{float:right; width:min(46%,420px); margin:4px 0 14px 22px}
.seo-fig img{width:100%; height:auto; border-radius:var(--r); display:block}
.seo-fig figcaption{font-size:13px; color:var(--grey); margin-top:6px; line-height:1.4}
@media (max-width:820px){ .shots{grid-template-columns:1fr 1fr} .shots figure:last-child{grid-column:span 2} }
@media (max-width:640px){ .seo-fig{float:none; width:100%; margin:6px 0 16px} }
@media (max-width:520px){ .shots{grid-template-columns:1fr} .shots figure:last-child{grid-column:auto} }

/* =========================================================
   АДАПТИВ
   ========================================================= */
@media (max-width:1000px){
  .hero .wrap{grid-template-columns:1fr; gap:38px}
  .hero-media{order:-1}
  .svc-grid,.steps,.city-list{grid-template-columns:repeat(2,1fr)}
  .geo,.about,.form-grid,.chat{grid-template-columns:1fr; gap:26px}
  .gal{grid-template-columns:repeat(3,1fr)}
  .gal a:first-child{grid-column:span 2; grid-row:span 1}
  .ftr-grid{grid-template-columns:1fr 1fr}
  .nav{display:none}
  .burger{display:block}
  .hdr .wrap{gap:12px}
  .hdr-phone{margin-left:auto}
  .nav.is-open{display:grid; position:absolute; top:74px; left:0; right:0; background:var(--ink); padding:18px 20px 24px; gap:14px; border-bottom:1px solid var(--ink-3)}
  .faq{grid-template-columns:1fr}
}
@media (max-width:640px){
  body{font-size:16px}
  .topbar{display:none}
  .svc-grid,.steps,.city-list,.gal{grid-template-columns:1fr}
  .city-list{grid-template-columns:1fr 1fr}
  .cargo{grid-template-columns:1fr 1fr}
  .gal{grid-template-columns:1fr 1fr}
  .gal a:first-child{grid-column:span 2}
  .ftr-grid{grid-template-columns:1fr}
  .hdr-phone small{display:none}
  .hero-media{order:2; margin-top:2px}
  .hero-media picture{display:none}
  .hero-badge{position:static; display:inline-flex; align-items:baseline; gap:9px; box-shadow:none; padding:13px 18px}
  .hero-badge b{display:inline; font-size:24px}
  .hero-badge span{font-size:13px}
  .callbar{display:flex}
  body{padding-bottom:74px}
  .nav.is-open{top:66px}
  .hdr .wrap{min-height:66px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
  html{scroll-behavior:auto}
}
/* =========================================================
   ПРАЙС
   ========================================================= */
.price-wrap{display:grid; grid-template-columns:1.15fr .85fr; gap:22px; margin-bottom:22px}
.ptab{width:100%; border-collapse:collapse; background:var(--white);
  border:1px solid var(--grey-l); border-radius:var(--r); overflow:hidden}
.ptab caption{
  caption-side:top; text-align:left; padding:16px 20px 14px;
  font-weight:700; font-size:19px; font-variation-settings:"wdth" 92;
  background:var(--ink); color:var(--white);
}
.ptab th,.ptab td{padding:13px 20px; text-align:left; font-size:16px; border-top:1px solid var(--grey-l)}
.ptab th{font-weight:600; color:var(--grey); font-size:14px; border-top:0}
.ptab td b{font-size:18px; white-space:nowrap}
.ptab tbody tr:nth-child(even){background:#FBFAF9}

.surcharge{list-style:none; margin:0 0 30px; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.surcharge li{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:var(--white); border:1px solid var(--grey-l); border-radius:var(--r-s);
  padding:12px 16px; font-size:15px;
}
.surcharge b{white-space:nowrap; color:var(--ink)}

/* =========================================================
   КАЛЬКУЛЯТОР
   ========================================================= */
.calc{background:var(--ink); color:var(--white); border-radius:var(--r); padding:28px 28px 22px}
.calc h3{color:var(--amber); margin-bottom:18px; font-size:23px}
.calc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.calc-grid label{display:flex; flex-direction:column; gap:7px; font-size:14px; color:#B6BBC1}
.calc-grid select,.calc-grid input{
  font:inherit; font-size:16px; padding:12px 14px; border-radius:var(--r-s);
  border:1px solid var(--ink-3); background:var(--ink-2); color:var(--white);
}
.calc-grid select:focus-visible,.calc-grid input:focus-visible{outline:3px solid var(--amber); outline-offset:2px}
.calc-out{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  margin-top:20px; padding-top:20px; border-top:1px solid var(--ink-3);
}
.calc-out span{display:block; font-size:14px; color:var(--grey)}
.calc-out b{font-size:34px; color:var(--amber); font-variation-settings:"wdth" 92; line-height:1.1}
.calc-note{margin:16px 0 0; font-size:14px; color:var(--grey); max-width:62ch}

/* =========================================================
   НАПРЯМКИ
   ========================================================= */
.routes{list-style:none; margin:0 0 16px; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.routes li{
  background:var(--white); border:1px solid var(--grey-l); border-radius:var(--r);
  padding:16px 18px; display:grid; gap:3px;
}
.routes span{font-weight:700; font-size:17px}
.routes i{font-style:normal; font-size:14px; color:var(--grey)}
.routes b{font-size:19px; color:var(--ink); margin-top:4px}
.routes-note{font-size:15px; color:var(--grey)}
.routes-note a{color:var(--ink); font-weight:700; border-bottom:2px solid var(--amber)}

/* Список районів/міст без посилань */
.city-list a,.city-list span{display:block}
.city-list span{padding:11px 14px}
.city-list--wide{grid-template-columns:repeat(4,1fr)}

@media(max-width:900px){
  .price-wrap{grid-template-columns:1fr}
  .surcharge{grid-template-columns:repeat(2,1fr)}
  .calc-grid{grid-template-columns:1fr}
  .routes{grid-template-columns:repeat(2,1fr)}
  .city-list--wide{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .surcharge{grid-template-columns:1fr}
  .routes{grid-template-columns:1fr}
  .calc{padding:22px 18px 18px}
  .ptab th,.ptab td{padding:11px 13px; font-size:15px}
  .ptab caption{padding:14px 13px 12px; font-size:17px}
}

/* Мобільна панель: Подзвонити, WhatsApp, Telegram — іконки месенджерів у фірмових кольорах */
.callbar a.cb-wa svg{fill:var(--wa)} .callbar a.cb-tg svg{fill:var(--tg)}
.callbar a{min-width:0}
@media (max-width:420px){ .callbar{gap:6px; padding-left:8px; padding-right:8px} .callbar a{font-size:14px; gap:5px; padding-left:4px; padding-right:4px} .callbar svg{width:16px; height:16px} }

/* Месенджери в шапці та першому екрані (WhatsApp, Telegram) */
.hdr-msgr{display:flex; gap:8px}
@media (max-width:1000px){ .hdr-msgr{margin-left:auto} .hdr-msgr + .hdr-phone{margin-left:0} }
.msgr--fill{width:40px; height:40px}
.msgr--fill svg{width:20px; height:20px}
.msgr--fill.msgr--wa{background:var(--wa)} .msgr--fill.msgr--tg{background:var(--tg)}
.hero-msgr{display:flex; gap:10px; flex-wrap:wrap}
.btn-msgr{display:inline-flex; align-items:center; gap:8px; padding:12px 16px; border-radius:var(--r-s); font-weight:700; font-size:15px; color:#fff; transition:filter .15s, transform .15s}
.btn-msgr:hover{filter:brightness(1.1); transform:translateY(-1px)}
.btn-msgr svg{width:18px; height:18px; fill:currentColor}
.btn-msgr--wa{background:var(--wa)} .btn-msgr--tg{background:var(--tg)}
@media (max-width:640px){ .hdr-msgr{display:none} .hdr-msgr + .hdr-phone{margin-left:auto} }
.nav a, .hdr-phone small{white-space:nowrap}
@media (min-width:1001px) and (max-width:1260px){ .nav{gap:16px; font-size:14.5px} .hdr .wrap{gap:18px} .hdr-msgr .msgr--fill{width:36px; height:36px} }
@media (min-width:1001px) and (max-width:1180px){ .hdr-msgr{display:none} }

/* Шапка на мобільному: замість номера — кнопка-трубка */
.hdr-call{display:none}
@media (max-width:640px){
  .hdr:has(.hdr-call) .hdr-phone{display:none}
  .hdr-call{display:flex; align-items:center; justify-content:center; width:42px; height:42px; margin-left:auto; border-radius:50%; background:var(--amber); color:var(--ink)}
  .hdr-call svg{width:20px; height:20px; fill:currentColor}
}

/* Таблиця цін на вузьких екранах */
@media (max-width:420px){
  .ptab th,.ptab td{padding:10px 9px; font-size:14px}
  .ptab th{font-size:12.5px; line-height:1.25}
  .ptab td b{font-size:16px}
  .ptab caption{padding:13px 9px 11px}
}
@media (max-width:350px){
  .ptab th,.ptab td{padding:9px 6px; font-size:13px}
  .ptab th{font-size:11.5px}
  .ptab td b{font-size:15px}
}
/* Калькулятор: поля не розпирають сітку на дуже вузьких екранах */
.calc-grid label{min-width:0}
.calc-grid select,.calc-grid input{min-width:0; width:100%; max-width:100%}
@media(max-width:900px){ .calc-grid{grid-template-columns:minmax(0,1fr)} }
/* Сітки на вузьких екранах не ширші за екран */
@media (max-width:1000px){ .geo,.about,.form-grid,.chat{grid-template-columns:minmax(0,1fr)} }
@media (max-width:900px){ .price-wrap{grid-template-columns:minmax(0,1fr)} }
@media (max-width:640px){ .city-list{grid-template-columns:repeat(2,minmax(0,1fr))} }
.city-list span, .city-list a{overflow-wrap:break-word}
/* Блок маніпулятора: типи вантажів не виходять за екран */
.cargo{grid-template-columns:repeat(3,minmax(0,1fr))}
.cargo li{overflow-wrap:break-word; hyphens:auto}
@media (max-width:640px){ .cargo{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:350px){ .cargo li{font-size:13.5px; padding-left:24px} .cargo li::before{left:9px} }
/* Довгі слова в заголовках і тексті переносяться на вузьких екранах */
h1,h2,h3,p,li{overflow-wrap:break-word}
@media (max-width:360px){ h1{hyphens:auto} }