/* Боевая вёрстка. Mobile first. Цвета клиента: переменные в :root в themes.css */
/* Manrope: свой хостинг (без Google CDN), variable 200–800, 4 подмножества. Лицензия OFL: assets/fonts/OFL.txt */
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url(/assets/fonts/manrope-cyrillic-ext.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url(/assets/fonts/manrope-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url(/assets/fonts/manrope-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url(/assets/fonts/manrope-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* запасной шрифт, подогнанный по размеру под Manrope: пока файл грузится или если не загрузился, вёрстка не прыгает */
@font-face{font-family:"Manrope Fallback";src:local("Arial"),local("Helvetica"),local("Liberation Sans");size-adjust:104%;ascent-override:96%;descent-override:26%;line-gap-override:0%}
:root{
  --font:"Manrope","Manrope Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --nav-h:60px;
  --nav-top:100px;          /* шапка наверху страницы, со слоганом (поле body сверху) */
  --gutter:20px;
  --ease:cubic-bezier(.16,1,.3,1);   /* плавное торможение для всех появлений */
  interpolate-size:allow-keywords;   /* анимация высоты FAQ до auto (где поддерживается) */
  /* отступы: шаг 4px, ниже только эти переменные. Мобилка / от 720px */
  --sec:48px;             /* поля секции сверху и снизу (64) */
  --sec-gap:56px;         /* между двумя светлыми секциями подряд (80), поля не складываются */
  --head:24px;           /* заголовок блока → контент (32) */
  --cta:24px;             /* контент → кнопка блока (32) */
  --pad:20px;             /* внутреннее поле карточки (24) */
  --cols:16px;            /* зазор между карточками (24) */
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border-radius:var(--radius)}
/* иконки не скругляем: общий radius 14px на svg 22px срезал углы у знаков (Instagram выглядел как «(O)») */
svg{border-radius:0}
/* прямые линии и структурные контейнеры не скругляем */
html,body,header,section,footer,main,nav,.wrap,.faq details,.faq summary{border-radius:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px);-webkit-text-size-adjust:100%}
body{font-family:var(--font);font-variant-numeric:lining-nums;color:var(--ink);line-height:1.45;padding-top:var(--nav-top,var(--nav-h));font-size:16px;overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
h1,h2,h3{line-height:1.15;font-weight:800}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-9999px;top:0;padding:12px 16px;z-index:100}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--link);outline-offset:2px}

section{padding:var(--sec) 0}
/* светлые секции одного тона: нижнее поле предыдущей + верхнее следующей давали 96 px (128), клиенту много */
section:not(.dark)+section:not(.dark){padding-top:calc(var(--sec-gap) - var(--sec))}
.soft{background:var(--soft)}
h1{font-size:clamp(27px,7.4vw,46px)}
h2{font-size:clamp(24px,6vw,34px);margin-bottom:12px}
h3{font-size:18px}
.lead{font-size:16px;color:var(--muted);max-width:720px;margin-bottom:var(--head)}
.center{text-align:center}
.center h2,.center .lead{margin-left:auto;margin-right:auto}
.center h2{max-width:760px}
/* h2 + .gap = тот же шаг, что h2 + .lead */
.gap{height:calc(var(--head) - 12px)}

/* ---------- шапка ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50}
.nav .wrap{min-height:var(--nav-h);padding-block:8px;display:flex;align-items:center;justify-content:space-between;gap:12px;transition:padding-block .4s var(--ease)}
.nav.scrolled .wrap{padding-block:0}
/* слоган под логотипом (клиент 19.10): наверху страницы шапка выше на две строки слогана,
   при прокрутке (.scrolled, main.js) слоган сворачивается и шапка возвращается к --nav-h.
   Ширину слогана задаёт надпись SMART TRANSFER (width:0 + min-width:100%), слоган переносится в её ширину */
/* слоган плашкой-указателем (клиент 19.10: «блекло», «стрелочки в одну и в другую сторону»): зелёная плашка
   в ширину надписи с остриями по обоим концам, как дорожный указатель «туда и обратно»; белый текст.
   Острия режет clip-path, глубина --tip. При сворачивании уходят и поля плашки, иначе от неё оставалась полоска */
.brand-slogan{display:grid;grid-template-rows:1fr;width:0;min-width:100%;margin-top:2px;border-radius:0;transition:grid-template-rows .4s var(--ease),opacity .25s var(--ease),margin-top .4s var(--ease)}
.brand-slogan>span{--tip:6px;min-height:0;overflow:hidden;padding:4px var(--tip) 5px;background:var(--brand);clip-path:polygon(var(--tip) 0,calc(100% - var(--tip)) 0,100% 50%,calc(100% - var(--tip)) 100%,var(--tip) 100%,0 50%);font-size:11px;font-weight:700;line-height:1.2;letter-spacing:-.01em;white-space:normal;text-wrap:balance;text-align:center;color:var(--card);transition:padding .4s var(--ease)}
.nav.scrolled .brand-slogan>span{padding-block:0}
.nav.scrolled .brand-slogan{grid-template-rows:0fr;opacity:0;margin-top:calc(var(--bf) * -.34)}
.menu{display:none}
/* соцсети: Instagram, Telegram, WhatsApp в ряд и на телефоне (клиент 19.10), по 40 px; язык на узких телефонах уходит в меню.
   Когда выезжают шарики, иконки шапки улетают к ним (.flown, main.js) и возвращаются при прокрутке к форме */
.nav-social{display:flex;align-items:center}
.nav-social .soc{width:40px;height:40px}
.nav-social .soc svg{width:24px;height:24px}
.nav-social .soc[aria-disabled]{cursor:default}
.nav-social .soc{transition:color .15s,background-color .2s,opacity .2s var(--ease),visibility 0s}
.nav-social .soc.flown{opacity:0;visibility:hidden;transition:opacity .2s var(--ease),visibility 0s .2s}
.soc{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%}
.soc svg,.soc-link svg,.mobile-social svg{flex:none;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
/* иконки мессенджеров: контурные знаки Remix Icon (Apache 2.0) одной толщины, это заливка формы, а не stroke, поэтому stroke из правила выше гасим */
use[href="#i-telegram"],use[href="#i-whatsapp"],use[href="#i-instagram"]{fill:currentColor;stroke:none}
.nav .btn{display:none}
.nav .wrap > .btn{display:inline-block}  /* «На главную» на юридических страницах */
.burger{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.burger span,.burger span::before,.burger span::after{display:block;width:20px;height:2px;background:var(--ink);content:"";position:relative;border-radius:0}
.burger span::before{position:absolute;top:-6px}
.burger span::after{position:absolute;top:6px}
/* бургер превращается в крестик, когда меню открыто */
.burger span{transition:background-color .15s}
.burger span::before,.burger span::after{transition:top .2s var(--ease),transform .25s var(--ease)}
.burger[aria-expanded=true] span{background-color:transparent}
.burger[aria-expanded=true] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded=true] span::after{top:0;transform:rotate(-45deg)}
.mobile-menu{position:absolute;top:100%;left:0;right:0;border-bottom:1px solid var(--line);max-height:0;overflow:hidden;visibility:hidden;transition:max-height .25s ease,visibility .25s}
.mobile-menu.open{max-height:440px;visibility:visible}
.mobile-menu a{display:block;padding:16px var(--gutter);font-weight:700;border-top:1px solid var(--line);border-radius:0}
/* контейнер мобильного меню обрезает содержимое, поэтому кольцо фокуса рисуем внутри ссылки */
.mobile-menu a:focus-visible{outline-offset:-3px}
.mobile-social{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line);border-radius:0}
.mobile-menu .mobile-social a{display:flex;align-items:center;gap:10px;border-top:0;min-height:56px}
.mobile-menu .mobile-social a+a{border-left:1px solid var(--line)}

/* ---------- кнопки ---------- */
.btn{position:relative;display:inline-block;white-space:normal;text-align:center;font-size:16px;border:2px solid var(--accent);cursor:pointer;max-width:100%}
.btn{transition:filter .15s,background-color .15s,transform .12s var(--ease)}
.btn:active{transform:translateY(1px) scale(.985)}
.btn.small{font-size:15px}
.btn[disabled]{opacity:.6;cursor:default}
/* отправка: крутилка слева, кнопка не кликается */
.btn.loading{opacity:.85;pointer-events:none;padding-left:52px}
.btn.loading::after{content:"";position:absolute;left:20px;top:50%;width:18px;height:18px;margin-top:-9px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
.btn-badge{position:absolute;top:-11px;right:-6px;font-size:11.5px;font-weight:700;border:1px solid var(--ink);padding:2px 8px;border-radius:999px;line-height:1.3;white-space:nowrap}

/* ---------- hero ---------- */
.hero{padding:14px 0 var(--sec)}  /* 14 px + верхнее поле букв H1 = 20 px до заглавной, как --gutter по бокам */
.hero-grid{display:grid;gap:16px;grid-template-columns:minmax(0,1fr);grid-template-areas:"text" "form" "anchors"}
.hero-text{grid-area:text}
/* H1 в две ступени (клиент 19.10, круг 3): «Индивидуальный трансфер» крупно цветом бренда, куда и откуда ступенью ниже.
   Подзаголовок под H1 убран: он повторял заголовок. Обе ступени по центру (клиент 19.10) */
.hero h1{text-align:center}
.h1-key{display:block;font-size:clamp(30px,9.2vw,58px);line-height:1.02;letter-spacing:-.035em;color:var(--brand)}
.h1-rest{display:block;margin-top:.55em;font-size:clamp(18px,5.1vw,27px);line-height:1.62;font-weight:700;letter-spacing:-.02em;color:var(--ink);max-width:24em;margin-inline:auto}
/* флажки после названий стран (клиент 19.10): круг 0.78 кегля, тонкое кольцо, чтобы белый у Польши не терялся на фоне.
   Слово и флаг в одном .fl без переноса: флаг не уезжает на новую строку один.
   Страна с флагом стоит белой пилюлей в тексте, как белые панели ниже; строки разведены до 1.62, чтобы ряды пилюль не касались */
/* плашка и запятая после неё вместе: иначе запятая уезжает в начало следующей строки (EN, телефон) */
.h1-rest .nw{white-space:nowrap}
.h1-rest .fl{display:inline-block;white-space:nowrap;padding:.02em .3em .04em .4em;line-height:1.2;background:var(--card);border:1px solid var(--card-line);border-radius:999px}
.h1-rest .flag{display:inline-block;width:.78em;height:.78em;margin-left:.24em;vertical-align:-.07em;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1px rgba(16,40,20,.16)}
/* «куда возим»: одна полоса на четыре колонки, иконка в круге над подписью. Одна белая панель с разделителями,
   а не четыре кнопки: пункты не кликаются и не должны так выглядеть */
.hero-svc{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:20px;padding:14px 6px 12px;background:var(--card);border:1px solid var(--card-line);border-radius:16px}
.hero-svc li{display:flex;flex-direction:column;align-items:center;gap:8px;padding:0 4px;font-size:12.5px;font-weight:700;line-height:1.2;letter-spacing:-.01em;text-align:center;border-radius:0}
.hero-svc li+li{border-left:1px solid var(--card-line)}
.hero-svc svg{flex:none;width:44px;height:44px;padding:11px;border-radius:50%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:359px){.hero-svc{padding-inline:4px}.hero-svc li{padding:0;font-size:11.5px;letter-spacing:-.02em}.hero-svc svg{width:40px;height:40px;padding:10px}}
@media (min-width:560px){.hero-svc{padding:18px 8px 16px}.hero-svc li{gap:10px;font-size:14px}.hero-svc svg{width:52px;height:52px;padding:13px}}
.form-box{grid-area:form}
/* форма в hero компактнее, чтобы кнопка «Отправить» уместилась на первом экране телефона */
.hero .form-box{padding:16px}
.hero .lf-grid{margin-bottom:10px}

/* ---------- формы ---------- */
.form-box{padding:var(--pad)}
.form-box h2,.form-box .form-title{font-size:20px;line-height:1.2;font-weight:800;margin:0 0 12px}
.field{display:block;width:100%;padding:13px 16px;font-size:16px;margin-bottom:12px;min-height:46px}
.field{transition:border-color .15s,box-shadow .15s}
.field.error{animation:nudge .34s var(--ease)}
.field-err{display:none;font-size:13px;font-weight:700;line-height:1.3;margin:-8px 0 12px}
.field-err.on{display:block;animation:fall-in .22s var(--ease)}
.on-dark .consent input.error{outline-color:#ff9d9d}
.field:disabled,.field[readonly]{opacity:.7}
.consent{display:flex}
.consent label{cursor:pointer}
.form-msg{display:none;font-weight:700;padding:12px 16px;margin-top:12px;font-size:15px;animation:fall-in .3s var(--ease)}
.form-msg.ok{display:flex;align-items:center;gap:10px}
.form-msg .ok-ic{flex:none;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.form-msg .ok-ic circle{stroke-dasharray:63;stroke-dashoffset:63;animation:draw .5s var(--ease) forwards}
.form-msg .ok-ic path{stroke-dasharray:18;stroke-dashoffset:18;animation:draw .35s .3s var(--ease) forwards}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
/* сообщение получает фокус программно после отправки: кольцо вокруг неинтерактивного блока не нужно */
.form-msg:focus{outline:none}

/* ---------- заявка одним фреймом: пять полей и кнопка, без шагов и подсказок (цвета: themes.css) ---------- */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.lf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:12px}
.lf-field{min-width:0}
.lf-from,.lf-to,.lf-contact{grid-column:1/-1}
.lf-label{display:block;margin:0 0 4px;font-size:12.5px;font-weight:600;line-height:1.3}
.lf-field .field{margin-bottom:0}
.lf-field .field-err{margin:6px 0 0}
.lf-field input[type=date]{-webkit-appearance:none;appearance:none;min-height:50px;text-align:left}
.lf-field input[type=date]::-webkit-date-and-time-value{text-align:left}
/* календарь: своя иконка справа (цвет --link #145c22, в data-URI переменная не работает), родная кнопка
   браузера прозрачная и растянута на всё поле, поэтому календарь открывается по клику в любом месте, в том числе по иконке */
.lf-field input[type=date]{position:relative;cursor:pointer;padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23145c22' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:20px 20px}
.lf-field input[type=date]::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:auto;height:auto;margin:0;padding:0;opacity:0;cursor:pointer;background:none}
/* Firefox свою кнопку календаря спрятать не даёт: там оставляем только её, без нашей иконки и запаса справа,
   иначе в поле две иконки, а маска «дд.мм.гггг» обрезается */
@supports (-moz-appearance:none){
  .lf-grid .lf-field input[type=date]{padding-right:12px;background-image:none}  /* сильнее правил узких экранов ниже */
}
.lf-pax .field{-moz-appearance:textfield;appearance:textfield}
.lf-pax .field::-webkit-outer-spin-button,.lf-pax .field::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* согласие: строка не ниже 44 px, вся строка кликабельна; сам чекбокс 22 px, область касания расширена невидимым слоем */
.lead-form .consent{margin:0 0 10px}
.lead-form .consent label{padding:8px 0}
.lead-form .consent input{position:relative}
.lead-form .consent input::before{content:"";position:absolute;inset:-11px}
.lead-form .consent + .field-err{margin:-6px 0 12px}
.lead-send{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;font-size:16px;text-wrap:balance}
.lead-send.loading{padding-left:48px}
/* широкая форма в тёмных блоках: на планшете и выше поля встают в ряд, как у comfortline */
.form-wide{max-width:760px;margin:0 auto;text-align:left}
@media (min-width:720px){
  .form-wide .lf-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .form-wide .lf-from,.form-wide .lf-to,.form-wide .lf-contact{grid-column:span 2}
  .form-wide .lf-date,.form-wide .lf-pax{grid-column:span 1}
}

/* ---------- галерея ---------- */
.cap{font-size:14px;font-weight:700;margin-top:8px}

/* ---------- сетки карточек ---------- */
.grid{display:grid;gap:var(--cols)}
.dir{padding:var(--pad);display:flex;flex-direction:column}
.dir h3{font-size:18px}
.dir .price{font-size:26px;font-weight:800;margin:12px 0 16px}
.dir .btn{margin-top:auto}

/* ---------- этапы ---------- */
.steps{display:grid;gap:var(--cols);list-style:none}
.step{padding:var(--pad)}
.step .n{font-size:13px;font-weight:700;margin-bottom:8px}
.step p{font-size:14px;margin-top:4px}
.step.final h3{font-size:22px}

/* ---------- автопарк, доверие, отзывы ---------- */
.pic{overflow:hidden}
.pic img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--pos,center)}
.pic.map img{object-fit:contain;mix-blend-mode:multiply}
.dir .pic{height:120px;margin-bottom:16px}
.cta-row{margin-top:var(--cta)}
/* отзывы: белая карточка палитры, фото, имя и звёзды цветом текста-акцента; без логотипов площадок и дат (демо) */
.rev{padding:20px;display:flex;flex-direction:column;gap:14px}
.rev-head{display:flex;align-items:center;gap:12px}
.rev-ava{width:44px;height:44px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;background:var(--fill);color:var(--link);font-weight:700;font-size:18px;object-fit:cover}
.rev-who{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;line-height:1.2}
.rev-who b{display:block;font-size:16px}
.rev-stars{display:inline-flex;gap:2px;color:var(--link)}
.rev-stars svg{width:14px;height:14px;fill:currentColor}
.rev blockquote{font-size:15px;font-weight:400;line-height:1.5}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line);padding:16px 0}
.faq summary{font-size:17px;font-weight:700;cursor:pointer;-webkit-tap-highlight-color:transparent;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
/* плюс нарисован двумя линиями: глиф «+» не по центру своей рамки и при повороте «гулял» */
.faq{overflow-anchor:none}
.faq summary::after{content:"";flex:none;width:14px;height:14px;margin-top:5px;border-radius:0;background:linear-gradient(var(--ink),var(--ink)) center/100% 2px no-repeat,linear-gradient(var(--ink),var(--ink)) center/2px 100% no-repeat;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin-top:8px;font-size:15px;color:var(--muted)}
/* плавное раскрытие ответа (Chrome / Safari новых версий; иначе раскрывается сразу) */
@supports selector(::details-content){
  .faq details::details-content{block-size:0;overflow:clip;opacity:0;transition:block-size .35s var(--ease),opacity .25s,content-visibility .35s allow-discrete}
  .faq details[open]::details-content{block-size:auto;opacity:1}
}

/* ---------- SEO-текст ---------- */
.seo-text h2{font-size:20px;margin-bottom:16px}
.seo-text p{font-size:14px;color:var(--muted);max-width:820px}
.seo-text p+p{margin-top:12px}

/* ---------- подвал ---------- */
.footer{padding:var(--sec) 0 32px;font-size:14px}
.footer .cols{display:grid;gap:32px;margin-bottom:32px}
.footer h2{font-size:17px;margin-bottom:8px}
.footer a{display:flex;align-items:center;min-height:44px}
.footer p{margin:0}
.footer .slogan{font-weight:700;margin-bottom:8px}
/* иконка и подпись: область касания не меньше 44px */
.footer .soc-link{display:flex;align-items:center;gap:10px;min-height:44px;margin-bottom:0}

/* ---------- кнопки мессенджеров справа (клиент 19.10) ---------- */
/* на телефоне шарики 44 px (минимум для пальца) у самого края, в нижней трети экрана.
   Появляются, когда низ формы в hero ушёл выше них (.on ставит main.js), и дальше остаются на виду;
   уходят под открытое мобильное меню (.away). Без JS видны сразу */
.float-soc{position:fixed;right:2px;bottom:calc(88px + env(safe-area-inset-bottom,0px));z-index:60;display:flex;flex-direction:column;gap:8px;transition:opacity .2s var(--ease),visibility 0s}
/* стекло как у шапки: полупрозрачная фисташка с размытием того, что под шариком (размытие с 720 px и только под мышь,
   ниже блок «шарики ... без размытия»), тонкий край, блик сверху и мягкая тень со смещением */
.float-soc a{--i:0;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--glass);color:var(--link);border:1px solid var(--hair);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 6px 16px -4px color-mix(in srgb,var(--dark-bg) 28%,transparent);transition:transform .15s var(--ease),background-color .15s,translate .5s var(--ease) calc(var(--i)*60ms),opacity .3s var(--ease) calc(var(--i)*60ms),visibility 0s}
.float-soc a:nth-child(2){--i:1}
.float-soc a:nth-child(3){--i:2}
/* спрятаны за правым краем; выезжают по очереди сверху вниз и тормозят у края, уходят быстрее и все сразу.
   Сдвиг через translate, а не transform: transform занят нажатием и наведением */
.js .float-soc:not(.on) a{translate:calc(100% + 24px) 0;opacity:0;visibility:hidden;pointer-events:none;transition:transform .15s var(--ease),background-color .15s,translate .22s cubic-bezier(.4,0,1,1),opacity .18s,visibility 0s .22s}
/* наведение только для мыши: на телефоне :hover залипает после тапа, и шарик оставался белым, когда возвращаешься из мессенджера */
@media (hover:hover){.float-soc a:hover{transform:scale(1.08);background:var(--card)}}
.float-soc a:active{transform:scale(.94)}
.float-soc a:focus-visible{outline:2px solid var(--link);outline-offset:3px}
.float-soc svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
/* WhatsApp: номера пока нет (TODO в разметке), шарик без href и неактивен */
.float-soc .wa[aria-disabled]{cursor:default}
.float-soc.away{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s var(--ease),visibility 0s .2s}
/* Telegram-шарик ждёт, пока долетит его копия из шапки (.wait), и подменяется ею без перехода */
#float-soc a.wait{opacity:0;visibility:hidden;transition:none}
/* иконки контактов в подвале ждут шарики: пока до них не доскроллили, спрятаны (.away), шарики прилетают на их место */
.footer .soc-link svg{transition:opacity .2s var(--ease),visibility 0s}
.footer .soc-link svg.away{opacity:0;visibility:hidden;transition:opacity .2s var(--ease),visibility 0s .2s}
/* летящая копия: размеры и цвета (стекло шарика или голая иконка) main.js берёт у настоящих элементов на концах пути */
.soc-fly{position:fixed;left:0;top:0;z-index:61;pointer-events:none;will-change:transform}
/* летит в подвал: стоит в документе и прокручивается вместе со страницей */
.soc-fly.abs{position:absolute}
.soc-fly i{position:relative;display:grid;place-items:center;border-radius:50%;color:var(--link)}
/* стекло шарика отдельным слоем: проявляется и гаснет только прозрачностью */
.soc-fly b{position:absolute;inset:0;border-radius:50%;background:var(--glass);border:1px solid var(--hair);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 6px 16px -4px color-mix(in srgb,var(--dark-bg) 28%,transparent);will-change:opacity}
.soc-fly svg{position:relative;width:22px;height:22px}

/* ---------- юридические страницы (policy.html, consent.html) ----------
   Режим чтения: шапка документа на фисташке, сам текст белым листом (от 720px), на десктопе слева
   оглавление, которое едет вместе с прокруткой. Строка текста не шире ~68 знаков */
.legal-page{--nav-top:var(--nav-h)}        /* у этих страниц нет слогана в шапке, лишнее поле сверху не нужно */
.legal{padding:32px 0 var(--sec)}
.legal-head{max-width:760px;margin-bottom:28px}
.legal-head h1{font-size:clamp(28px,7.4vw,44px);line-height:1.08;text-wrap:balance;margin-bottom:14px}
.legal-meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;color:var(--muted)}
.legal-meta b{font-weight:600;color:var(--ink)}
.legal-intro{margin-top:16px;font-size:17px;line-height:1.5;color:var(--sub-hi);max-width:62ch;text-wrap:pretty}
.legal-toc{display:none}
.legal .legal-toc a,.legal a.legal-next{text-decoration:none}
.legal-doc .legal-lead{font-size:17px;line-height:1.55;color:var(--ink)}
.legal-doc .legal-after{margin-top:20px}
.legal-doc{max-width:68ch}
.legal-doc section{padding:0;scroll-margin-top:calc(var(--nav-h) + 24px)}
.legal-doc section+section{margin-top:36px}
.legal-doc h2{display:flex;align-items:baseline;gap:12px;font-size:20px;line-height:1.25;letter-spacing:-.02em;margin:0 0 14px;text-wrap:balance}
.legal-doc h2 .n{flex:none;min-width:1.4em;font-size:15px;font-weight:800;color:var(--link);font-variant-numeric:tabular-nums}
.legal-doc p,.legal-doc li{font-size:16px;line-height:1.6;color:var(--sub-hi);text-wrap:pretty}
.legal-doc p+p,.legal-doc p+ul,.legal-doc ul+p{margin-top:12px}
.legal-doc .label{font-weight:700;color:var(--ink)}
.legal-doc ul{list-style:none;display:grid;gap:8px;margin-top:8px}
.legal-doc li{position:relative;padding-left:22px}
.legal-doc li::before{content:"";position:absolute;left:4px;top:.72em;width:8px;height:2px;border-radius:2px;background:var(--accent)}
.legal-doc strong{font-weight:700;color:var(--ink)}
.legal-doc a{color:var(--link);font-weight:600}
/* важное (передача за границу): тонированная плашка без цветной полосы сбоку */
.legal-note+p{margin-top:14px}
.legal-note{margin-top:14px;padding:16px 18px;background:var(--svc-tint);border-radius:12px;color:var(--ink)}
.legal-doc .legal-note p{color:var(--ink)}
/* «Коротко»: суть документа до чтения, список с иконками-галочками */
.legal-sum{margin-bottom:40px;padding:20px;background:var(--fill);border:1px solid var(--card-line);border-radius:16px}
.legal-sum h2{font-size:17px;margin:0 0 12px;display:block}
.legal-sum ul{gap:10px;margin:0}
.legal-sum li{padding-left:30px;color:var(--ink);line-height:1.45}
.legal-sum li::before{left:0;top:.1em;width:20px;height:20px;border-radius:50%;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.4l2.6 2.6L14 7.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat}
/* условия согласия: таблица «что — как» */
.terms{display:grid;margin-top:24px;border-top:1px solid var(--card-line);border-radius:0}
.terms>div{display:grid;gap:4px;border-radius:0;padding:16px 0;border-bottom:1px solid var(--card-line)}
.terms dt{font-size:14px;font-weight:700;color:var(--link)}
.terms dd{font-size:16px;line-height:1.6;color:var(--sub-hi);text-wrap:pretty}
/* «не согласны»: выход без формы */
.legal-out{display:grid;gap:16px;margin-top:32px;padding:20px;background:var(--fill);border:1px solid var(--card-line);border-radius:16px}
.legal-out p{color:var(--ink)}
.legal-doc .legal-out a.btn{color:#fff;font-weight:600;text-decoration:none}
.legal-out .btn{justify-self:start;display:inline-flex;align-items:center;gap:10px}
.legal-out .btn svg{width:20px;height:20px}
/* низ страницы: второй документ и связь */
.legal-foot{margin-top:40px;display:grid;gap:12px}
.legal-next{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;background:var(--card);border:1px solid var(--card-line);border-radius:16px;transition:border-color .2s,box-shadow .25s var(--ease),transform .25s var(--ease)}
.legal-next small{display:block;font-size:13px;color:var(--muted);margin-bottom:2px}
.legal-next span{font-weight:700;font-size:17px;line-height:1.3}
.legal-next svg{flex:none;width:24px;height:24px;color:var(--link);transition:transform .25s var(--ease)}
.legal-next:hover{border-color:var(--stroke);box-shadow:0 10px 24px -14px color-mix(in srgb,var(--dark-bg) 35%,transparent)}
.legal-next:hover svg{transform:translateX(4px)}
.legal-copy{font-size:14px;color:var(--muted)}
.todo{padding:12px 16px;font-size:14px;margin-bottom:24px}

/* ================= планшет ================= */
@media (min-width:720px){
  :root{--nav-top:107px;--gutter:32px;--nav-h:64px;--sec:64px;--sec-gap:80px;--head:32px;--cta:32px;--pad:24px;--cols:24px}
  h3{font-size:19px}
  .lead{font-size:17px}
  .hero{padding-top:40px}
  .nav-social .soc{width:44px;height:44px}
  .nav-social .soc svg{width:22px;height:22px}
  .float-soc{right:20px;bottom:auto;top:50%;transform:translateY(-50%);gap:10px}
  .float-soc a{-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
  .soc-fly b{-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
  .float-soc a{width:48px;height:48px}
  .float-soc svg{width:24px;height:24px}
  .mobile-social{display:none}
  .grid.c3{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .faq details{padding:20px 0}
  .faq p{margin-top:12px}
  .footer .cols{grid-template-columns:1.4fr 1fr 1fr;gap:48px}
  .legal{padding-top:48px}
  .legal-head{margin-bottom:36px}
  .legal-sheet{max-width:780px;padding:40px 48px 48px;background:var(--card);border:1px solid var(--card-line);border-radius:20px}
  .legal-sum{padding:24px}
  .terms>div{grid-template-columns:200px 1fr;gap:24px;padding:18px 0}
  .terms dt{font-size:15px;line-height:1.6}
  .legal-out{grid-template-columns:1fr auto;align-items:center;padding:24px}
  .legal-out .btn{justify-self:end}
  .legal-foot{max-width:780px;grid-template-columns:1fr auto;align-items:center}
}

/* ================= десктоп ================= */
@media (min-width:1024px){
  /* политика: оглавление слева едет с прокруткой, подсвечивает текущий раздел (скрипт внизу policy.html) */
  .legal-body{display:grid;grid-template-columns:240px minmax(0,1fr);gap:48px;align-items:start}
  .legal-toc{display:block;position:sticky;top:calc(var(--nav-h) + 32px)}
  .legal-toc h2{font-size:14px;font-weight:700;letter-spacing:0;color:var(--muted);margin:0 0 10px}
  .legal-toc ol{list-style:none;display:grid;gap:2px;border-left:1px solid var(--line)}
  .legal-toc a{display:flex;gap:10px;padding:6px 0 6px 14px;margin-left:-1px;border-left:1px solid transparent;border-radius:0;font-size:15px;line-height:1.35;color:var(--sub);transition:color .15s,border-color .15s}
  .legal-toc a .n{min-width:1.3em;color:var(--muted);font-variant-numeric:tabular-nums}
  .legal-toc a:hover{color:var(--ink);border-left-color:var(--stroke)}
  .legal-toc a[aria-current="true"]{color:var(--ink);font-weight:600;border-left-color:var(--accent)}
  .legal-toc a[aria-current="true"] .n{color:var(--link)}
  .legal-solo{max-width:880px}
  .menu{display:flex;gap:8px;margin:0 -8px;font-size:15px}
  .menu a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 8px;font-weight:600}
  .nav .btn{display:inline-block;padding:12px 16px;font-size:14px;white-space:nowrap}
  .burger,.mobile-menu{display:none}
  .float-soc{right:10px}
  .float-soc a{width:44px;height:44px}
  .hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:48px;row-gap:24px;grid-template-areas:"text form" "anchors form";align-items:start}
    .form-box{padding:32px}
  .form-box h2,.form-box .form-title{font-size:22px}
  .grid.c3{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:1fr 1fr 1fr 1.4fr}
}
/* 1024–1199: название стало длиннее, а иконки соцсетей заняли место телефона. Меню и бренд чуть плотнее, чтобы кнопка осталась в одну строку */
@media (min-width:1024px) and (max-width:1199px){
  :root{--nav-top:100px}
  .menu{gap:0;font-size:14px}
  .nav .btn{padding:12px 14px}
}
@media (min-width:1200px){:root{--nav-top:110px}}
@media (max-width:1023px){
  /* полоски бургера встают по правому краю контента, как логотип по левому: поле 12 px у кнопки 44 px уходит в отступ страницы */
  .burger{margin-right:-12px}
}
@media (max-width:420px){
  /* в верхнем регистре название стало шире: рядом с ним силуэт машины, язык и бургер; на юридических страницах ещё «На главную» */
  .nav .wrap{gap:8px}
  .nav .wrap > .btn.small{padding:10px 12px;font-size:14px}
}
/* до 399: название, три мессенджера, язык и бургер в строку не влезают; язык остаётся в меню («English version») */
@media (max-width:399px){
  .nav-right .lang{display:none}
}
/* 320–359: название, мессенджеры и бургер не влезали в строку */
@media (max-width:359px){
  .nav .wrap{gap:6px}
  .nav .nav-right{gap:2px}
  .nav-social .soc{width:36px;height:36px}
  .nav-social .soc svg{width:22px;height:22px}
  /* 10px был ниже порога читаемости; сузили межбукв. интервал, чтобы «Грамотная организация»
     не переносилось третьей строкой при 11px (ширина плашки задана шириной надписи выше) */
  .brand-slogan>span{--tip:5px;font-size:11px;letter-spacing:-.03em}
}
/* шарики и их летящие копии на телефонах и сенсорных экранах: без размытия, сплошной фисташкой, как шапка.
   Сквозь стекло 86 % без размытия резко проступало бы фото; блик, край и тень остаются, шарик по-прежнему объёмный */
@media (max-width:719px),(hover:none){
  .float-soc a,.soc-fly b{background:var(--paper);-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ================= движение ================= */
/* откуда начинается появление, задаёт элемент: --from-o (прозрачность) и --from-y (сдвиг); по умолчанию из пустоты */
@keyframes rise{from{opacity:var(--from-o,0);transform:translateY(var(--from-y,12px))}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:var(--from-o,0)}to{opacity:1}}
@keyframes fall-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes nudge{20%{transform:translateX(-5px)}50%{transform:translateX(4px)}80%{transform:translateX(-2px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{50%{opacity:.35}}
@keyframes draw{to{stroke-dashoffset:0}}

/* hero: на загрузке текст, форма и плитки приходят по очереди; фото раскрывается ниже по скроллу.
   Первый экран целиком встаёт за ~0,6 с: посетитель с рекламы не ждёт. Заголовок виден с первого кадра
   (с 35 % и сдвига 6 px), чтобы его можно было читать сразу и браузер считал его отрисованным (LCP) */
.h1-key{--from-o:.35;--from-y:6px;animation:rise .5s var(--ease) both}
.h1-rest{--from-o:.35;--from-y:6px;animation:rise .5s .04s var(--ease) both}
.hero-svc{animation:rise .5s .08s var(--ease) both}
.hero .form-box{animation:rise .5s .06s var(--ease) both}
.hero .anchors{animation:rise .45s .1s var(--ease) both}
.hero .anchor{animation:fade .3s calc(.14s + var(--i,0) * 30ms) var(--ease) both}
.anchor:nth-child(2){--i:1}
.anchor:nth-child(3){--i:2}
.anchor:nth-child(4){--i:3}

/* появление при скролле. Скрытое состояние включается только когда JS жив (класс .js на html),
   иначе страница остаётся видимой. --i ставит JS: порядок внутри группы, которая входит в экран вместе */
.js [data-r]{--td:calc(var(--i,0) * 70ms + var(--d,0s));transition:opacity .6s var(--ease) var(--td),transform .7s var(--ease) var(--td),clip-path .9s var(--ease) var(--td)}
.js [data-r=up]{opacity:0;transform:translateY(18px)}
.js [data-r=left]{opacity:0;transform:translateX(-14px)}
.js [data-r=up].is-in,.js [data-r=left].is-in{opacity:1;transform:none}

/* этапы идут по порядку, у последнего после всей цепочки проступает акцентная рамка: «встреча» это итог */
.js .step[data-r]{transition:opacity .6s var(--ease) calc(var(--i,0) * 110ms),transform .7s var(--ease) calc(var(--i,0) * 110ms),background-color .7s var(--ease) .9s,color .7s var(--ease) .9s,border-color .7s var(--ease) .9s}

/* наведение: фото в карточках чуть приближается */
@media (hover:hover){
  .dir .pic img{transition:transform .7s var(--ease)}
  .dir:hover .pic img{transform:scale(1.045)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .mobile-menu{transition:none}
  /* без движения в пространстве: остаются плавные появления и смена состояний */
  .h1-key,.h1-rest,.hero .form-box,.hero .anchors,.hero .anchor,.hero-svc{animation-name:fade;animation-duration:.3s}
  .js [data-r]{transform:none!important}
  .dir:hover .pic img{transform:none}
  .field.error{animation:none}
  .field-err.on,.form-msg{animation-name:fade}
  .float-soc{transition:opacity .2s}
  .float-soc a{transition:opacity .2s,visibility 0s}
  .js .float-soc:not(.on) a{translate:none;transition:opacity .15s,visibility 0s .15s}
  .float-soc a:hover,.float-soc a:active{transform:none}
  .btn:active{transform:none}
  .btn.loading::after{animation:pulse 1.2s ease-in-out infinite;border-right-color:currentColor}
  .form-msg .ok-ic circle,.form-msg .ok-ic path{animation:none;stroke-dashoffset:0}
  .burger span::before,.burger span::after{transition:none}
}


/* ---------- фото: единый грейдинг, зерно, виньетка ---------- */
.gi{position:relative;isolation:isolate}
.gi img{filter:saturate(.86) contrast(1.06) brightness(.97)}
/* ::before: виньетка + плёночное зерно; ::after: холодный тон в тенях под цвет сайта.
   Затемнение снизу усилено (.8 к низу, старт с 38%), чтобы подпись читалась даже на светлом фото:
   белый текст на самой тёмной части даёт контраст около 10:1, выше требуемых 4.5:1 */
.gi::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .14 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    radial-gradient(120% 95% at 50% 42%,transparent 58%,rgba(0,0,0,.5) 100%),
    var(--shade,none);
  background-blend-mode:soft-light,normal,normal;opacity:1}
.gi::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;background:var(--photo-tint,#0e3a1c);mix-blend-mode:soft-light;opacity:.16}
.gi{--shade:linear-gradient(180deg,rgba(4,16,8,.28) 0,transparent 30%,transparent 38%,rgba(0,0,0,.8) 100%)}

/* ---------- галерея: неравная сетка (четыре фото) ---------- */
.bento{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:168px;gap:12px}
.gi{background:var(--dark-bg);overflow:hidden;margin:0}
.gi img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,center);transition:transform .8s var(--ease)}
.g1{grid-column:span 2;grid-row:span 2}
.g4{grid-column:span 2}
/* подпись: двойная тень даёт чёткий тёмный край буквам даже на самом светлом участке фото */
.gi .cap{position:absolute;left:14px;right:14px;bottom:12px;z-index:3;margin:0;color:#fff;font-size:14px;line-height:1.3;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.85),0 1px 14px rgba(0,0,0,.6)}
.g1 .cap{font-size:20px;bottom:16px;left:18px}
@media(min-width:900px){
  .bento{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:210px;gap:16px}
  .gi .cap{font-size:15px}
  .g1 .cap{font-size:26px;left:24px;bottom:22px}
}
@media(hover:hover){.gi:hover img{transform:scale(1.04)}}
@media(prefers-reduced-motion:reduce){.gi:hover img{transform:none}}


/* hero: шесть преимуществ одним блоком в порядке клиента (правки 19.10, круг 3).
   Белая панель с разделителями, иконки в зелёных кругах (клиент 19.10: выбрал из тёмного/оранжевого и белого/зелёного). Телефон 2×3, с 560 px 3×2.
   Разделители рисуют сами ячейки: левая линия у всех, кроме первой в ряду, верхняя у всех, кроме первого ряда */
.anchors{grid-area:anchors;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:4px 18px;background:var(--card);border:1px solid var(--card-line);border-radius:18px;color:var(--ink)}
.anchor{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:16px 0;font-size:14.5px;font-weight:700;line-height:1.25;letter-spacing:-.015em;color:var(--ink);border-radius:0}
.anchor span:last-child{text-wrap:balance}
.anchor-ic{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff}  /* белый на #208030 5:1 */
.anchor-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.anchor:nth-child(even){padding-left:16px;border-left:1px solid var(--card-line)}
.anchor:nth-child(odd){padding-right:12px}
.anchor:nth-child(n+3){border-top:1px solid var(--card-line)}
.anchor:nth-child(5){--i:4}
.anchor:nth-child(6){--i:5}
@media (min-width:560px){
  .anchors{grid-template-columns:repeat(3,minmax(0,1fr));padding:4px 24px}
  .anchor,.anchor:nth-child(n){padding:20px 16px;border-left:1px solid var(--card-line);border-top:0}
  .anchor:nth-child(3n+1){padding-left:0;border-left:0}
  .anchor:nth-child(n+4){border-top:1px solid var(--card-line)}
  .anchor{font-size:15.5px}
}
@media (min-width:1024px){
  .anchors{align-self:end}
  .anchor-ic{width:44px;height:44px}
  .anchor-ic svg{width:24px;height:24px}
}
/* ---------- популярные маршруты: три направления из Беларуси и «свой маршрут» ----------
   Все четыре карточки одной конструкции (фото, маршрут, «в обе стороны», кнопка) и одного цвета.
   Минск - Вильнюс выделен только местом: первая, на десктопе шире.
   Телефон: горизонтальная лента со scroll-snap, виден край следующей карточки; 720+: 2x2; 1024+: четыре в ряд. */
.routes-grid{display:grid;grid-auto-flow:column;grid-auto-columns:min(78%,300px);gap:12px;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter) 2px;scroll-padding-inline:var(--gutter);
  border-radius:0;scrollbar-width:none}
.routes-grid::-webkit-scrollbar{display:none}
.routes-grid>.dir{scroll-snap-align:start;min-width:0}
/* в ленте карточки справа за экраном: появление при скролле им не нужно, иначе они пустые до свайпа */
@media (max-width:719px){.js .routes-grid>[data-r]{opacity:1;transform:none}}
/* с JS жёсткий snap выключен: он гасил инерцию свайпа. Доводку до карточки и перетаскивание мышью делает main.js */
@media (max-width:719px){
  .js .routes-grid{scroll-snap-type:none}
  .routes-grid.drag{cursor:grabbing;user-select:none}
}
@media (max-width:719px) and (hover:hover) and (pointer:fine){.js .routes-grid{cursor:grab}}
.routes-grid .dir h3{font-size:18px;margin:0}
.routes-grid .dir .pic{height:132px;margin-bottom:16px}
/* «в обе стороны» показывают стрелки ⇄ между городами: подпись под заголовком читалась как цена туда-обратно.
   relative держит скрытый .sr-only внутри карточки: иначе в ленте на телефоне он вылезает за край и расширяет страницу */
.routes-grid .dir h3.route{position:relative;display:flex;align-items:center;flex-wrap:wrap;column-gap:.28em}
.two-way{flex:none;width:1em;height:1em;fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.routes-grid .dir .price{margin:10px 0 16px}
.routes-grid .btn{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;min-height:44px;margin-top:auto}
/* карта: та же рамка фото, силуэт Европы крупно и приглушённо (multiply на --fill из themes.css), без отдельной плашки */
.routes-grid .routes-other .pic img{object-fit:cover;object-position:62% 52%;opacity:.7}
@media (min-width:720px){
  .routes-grid{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--cols);
    overflow:visible;margin:0;padding:0;scroll-snap-type:none}
  .routes-grid .dir h3{font-size:19px}
  .routes-grid .dir .pic{height:160px;margin-bottom:20px}
}
/* четыре в ряд, только когда колонка .wrap полная (1080 px): уже названия и кнопки ломаются */
@media (min-width:1120px){
  .routes-grid{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr))}
  .routes-grid .dir .pic{height:170px}
}

/* ---------- доверие: опыт на границе, опция приоритета и факт об авто (автопарк как отдельный блок убран) ---------- */
/* светлая карточка на фоне страницы: после тёмных «этапов» не читается как рекламный баннер.
   Цифра опыта крупно цветом текста-акцента, кнопка внутри карточки (на телефоне в конце, на десктопе под текстом слева) */
.trust-main{display:grid;grid-template-areas:"exp" "side" "cta";gap:28px;padding:32px 24px;border-radius:16px;background:var(--card);border:1px solid var(--card-line);color:var(--ink)}
.trust-exp{grid-area:exp}
.trust-main h2{font-size:clamp(26px,6.6vw,34px);line-height:1.1;margin-bottom:18px}
.trust-num{display:block;margin-top:.12em;font-size:clamp(52px,14vw,84px);line-height:.98;letter-spacing:-.04em;color:var(--link)}
/* счётчик опыта: моноширинные цифры, ширину под «10» JS замеряет до счёта, чтобы «лет» не дёргалось и цифра не отрывалась от слова */
.trust-years{white-space:nowrap}
.trust-count{display:inline-block;text-align:right;font-variant-numeric:tabular-nums}
.trust-main p{font-size:16px;line-height:1.5;color:var(--sub);max-width:44ch}
.trust-side{grid-area:side;display:grid;gap:20px;border-radius:0}
.trust-opt{padding-top:20px;border-top:1px solid var(--card-line);border-radius:0}
.trust-opt h3{font-size:19px;line-height:1.25;margin-bottom:6px}
.trust-main .cta-row{grid-area:cta;margin:0}
@media (min-width:720px){
  .trust-main{padding:48px}
}
@media (min-width:1024px){
  .trust-main{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);grid-template-areas:"exp side" "cta side";gap:36px 56px;align-items:start;padding:56px}
  .trust-side{align-self:stretch;align-content:center;padding:0 0 0 56px;border-left:1px solid var(--card-line)}
  .trust-side .trust-opt{padding-top:0;border-top:0}
  .trust-side .trust-opt+.trust-opt{padding-top:20px;border-top:1px solid var(--card-line)}
}
/* FAQ: поле строки вопроса лежит на summary, а не на details: кликабельна вся строка (выше 44px), ответ держит читаемую длину */
.faq details{padding:0}
.faq summary{padding:16px 0;align-items:flex-start;transition:color .15s}
.faq details[open] summary{padding-bottom:6px}
.faq summary:focus-visible{outline:2px solid var(--link);outline-offset:4px;border-radius:10px}
.faq p{max-width:72ch;text-wrap:pretty;margin-top:0;padding:0 30px 18px 0;line-height:1.55}
@media (hover:hover){.faq summary:hover{color:var(--link)}}
@media (min-width:720px){.faq summary{padding:20px 0}.faq details[open] summary{padding-bottom:8px}.faq p{font-size:16px;padding-bottom:22px}}
/* ---------- язык: RU / EN ----------
   в шапке кнопка без рамки в пару к бургеру, подпись это язык, на который ведёт ссылка;
   после удаления переключателя темы место есть и на 320 px, плюс язык в мобильном меню и в подвале */
.lang{width:44px;height:44px;flex:none;border-radius:12px;border:0;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;letter-spacing:.04em;line-height:1;transition:background-color .2s,transform .15s var(--ease)}
.lang:hover{background:var(--fill)}
.lang:active{transform:scale(.94)}
.mobile-menu a.lang-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.lang-row span{font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--sub);border:1px solid var(--stroke);border-radius:999px;padding:4px 9px}
.footer .langs{display:flex;gap:16px;margin-top:16px}
.footer .langs a,.footer .langs span{display:inline-flex;align-items:center;min-height:44px;margin:0}
.footer .langs span{color:var(--ink);font-weight:700}
@media (prefers-reduced-motion:reduce){.lang{transition:none}}

.seo-text p{max-width:72ch}
/* самые узкие телефоны (320 px): подсказка в полях маршрута должна помещаться целиком.
   Шрифт полей не уменьшаем ниже 16 px: iOS иначе зумит страницу при фокусе */
@media (max-width:400px){
  .lf-field input[type=date]{padding-left:10px;padding-right:34px;background-position:right 10px center;background-size:18px 18px}
}
@media (max-width:340px){
  .lf-field input[type=date]{padding-right:10px;background-image:none}
  .field{padding-inline:12px}
  .field::placeholder{font-size:14px}
}