@font-face{
  font-family:'Manrope';
  src:url('../fonts/manrope-var.woff2') format('woff2-variations'),
      url('../fonts/manrope-var.woff2') format('woff2');
  font-weight:200 800;
  font-style:normal;
  font-display:swap;
}

/* =========================================================
   ETIKO — international logistics
   Стили сайта. Все размеры и цвета — в :root
   ========================================================= */

:root{
  /* Палитра снята с макета */
  --navy:        #14314F;   /* заголовки, кнопки, тёмная полоса */
  --navy-deep:   #0F2843;   /* hover тёмной кнопки */
  --text:        #33506B;   /* основной текст */
  --muted:       #7E93A6;   /* второстепенный текст */
  --gold:        #E8A63E;   /* кнопка в шапке */
  --gold-dark:   #D6942C;
  --gold-ink:    #C6913D;   /* eyebrow в hero */
  --terra:       #DE7C45;   /* eyebrow секций */
  --line:        #DFE4E9;   /* линии и рамки */
  --surface:     #E8ECEF;   /* фон блока с формой */
  --white:       #ffffff;   /* белые блоки контента */
  --page:        #F8F6F3;   /* фон страницы под блоками, как в макете */

  /* Сетка */
  --site-max:    1200px;    /* ширина «полотна» сайта, как в макете */
  --header-h:    84px;      /* высота шапки */
  --pad:         72px;      /* внутренние поля полотна */
  --radius:      6px;

  /* Типографика */
  --font: "Manrope", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}

/* ---------------------------- Reset ---------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--page);
  color:var(--text);
  font-family:var(--font);
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
img{max-width:100%;display:block}
a{color:inherit}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--navy);color:#fff;padding:12px 18px;border-radius:0 0 6px 0;
}
.skip-link:focus{left:0}

/* Полотно сайта по центру, как в макете */
.site-header,
main,
.site-footer{max-width:var(--site-max);margin-left:auto;margin-right:auto}

.wrap{padding-left:var(--pad);padding-right:var(--pad)}

/* --------------------------- Кнопки ---------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;line-height:1;
  text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.btn--gold{background:var(--gold);color:var(--navy);border-radius:999px;padding:12px 22px;font-size:14px}
.btn--gold:hover{background:var(--gold-dark)}
.btn--navy{background:var(--navy);color:#fff;border-radius:999px;padding:17px 30px}
.btn--navy:hover{background:var(--navy-deep)}
.btn--ghost{background:transparent;color:var(--navy);border-color:var(--line);border-radius:999px;padding:12px 20px;font-size:14px}
.btn--ghost:hover{border-color:var(--navy)}
.btn--block{width:100%;border-radius:var(--radius);padding:19px 24px;font-size:16px}

/* --------------------------- Шапка ----------------------------- */
.site-header{
  position:sticky;top:0;z-index:40;
  background:var(--white);
  border-bottom:1px solid var(--line);
}
/* полотно ограничено 1200px, но выпадающее меню должно доходить до краёв экрана */
.site-header{overflow:visible}
/* три колонки: логотип — меню по центру — язык и кнопка справа */
.site-header__inner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;height:var(--header-h)}

.brand-group{display:flex;align-items:center;gap:18px;min-width:0}
.brand{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.brand__logo{width:124px;height:auto;max-height:56px;object-fit:contain;display:block}
.brand__tag{
  font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--navy);white-space:nowrap;
}

.mainnav{justify-self:center;display:flex;align-items:center;gap:30px}
.mainnav a{font-size:15px;font-weight:500;color:#6E859B;text-decoration:none;transition:color .15s}
.mainnav a:hover{color:var(--navy)}
.mainnav__mobile-extra{display:none}

.site-header__right{justify-self:end;display:flex;align-items:center;gap:20px;flex-shrink:0}
.langswitch{display:flex;align-items:center;gap:11px;font-size:13px;font-weight:700;letter-spacing:.04em}
.langswitch__current{color:var(--navy)}
.langswitch__alt{color:#9CADBC;text-decoration:none;transition:color .15s}
.langswitch__alt:hover{color:var(--navy)}

.burger{
  display:none;width:42px;height:42px;padding:10px;
  background:none;border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;
}
.burger span{display:block;height:2px;background:var(--navy);border-radius:2px}
.burger span + span{margin-top:5px}

/* ------------------------ Общие элементы ----------------------- */
.section{padding:88px 0}
.eyebrow{
  font-size:12px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--terra);
}
.eyebrow--gold{color:var(--gold-ink)}
.section__title{
  font-size:clamp(28px,3.4vw,42px);
  line-height:1.14;font-weight:800;letter-spacing:-.02em;
  color:var(--navy);margin-top:22px;
}
.services .section__title{max-width:620px}
.quote .section__title{max-width:470px}

/* ---------------------------- Hero ----------------------------- */
.hero{background:var(--white);padding-bottom:24px}
.hero__grid{
  display:grid;
  grid-template-columns:minmax(0,460px) minmax(0,1fr);
  gap:80px;align-items:start;
}
.hero__text{padding-top:70px;padding-bottom:40px}
.hero__title{
  font-size:clamp(38px,4.6vw,56px);
  line-height:1.07;font-weight:800;letter-spacing:-.025em;
  color:var(--navy);margin:20px 0 26px;
}
.hero__lead{font-size:17px;line-height:1.62;color:var(--text);max-width:44ch}
.hero__actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:34px}
.hero__note{font-size:14px;color:var(--muted)}
.hero__media{overflow:hidden;aspect-ratio:513/588}
.hero__media img{width:100%;height:100%;object-fit:cover;display:block}

/* -------------------------- Услуги ----------------------------- */
.services{padding-top:80px}
.strip{
  margin-top:44px;background:var(--navy);color:#fff;
  display:grid;grid-template-columns:repeat(5,1fr);gap:26px;
  padding:32px 34px;
}
.strip__item{font-size:14px;font-weight:700;line-height:1.35}

/* --------------------------- О нас ----------------------------- */
.about__grid{display:grid;grid-template-columns:224px minmax(0,600px);gap:24px;align-items:start}
.about__body .section__title{margin-top:0}
.about__text{margin-top:26px;font-size:17px;line-height:1.68}

/* ------------------------- Экспертиза -------------------------- */
.exlist{
  margin-top:52px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius);
}
.exlist__row{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,470px);
  gap:48px;padding:30px 26px;border-bottom:1px solid var(--line);align-items:start;
}
.exlist__row:last-child{border-bottom:0}
.exlist__name{font-size:27px;font-weight:600;letter-spacing:-.015em;color:var(--navy);line-height:1.2}
.exlist__text{font-size:15px;line-height:1.6;color:var(--text)}

/* --------------------------- Почему ---------------------------- */
.why__head{display:flex;justify-content:space-between;align-items:flex-end;gap:48px}
.why__title{text-align:right;margin-top:0;max-width:none}

.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:58px}
.card{
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);padding:26px 24px;min-height:212px;
}
.card__title{font-size:15px;font-weight:600;color:var(--navy);line-height:1.35}
.card__text{margin-top:24px;font-size:15px;line-height:1.55;color:var(--text)}

.process{
  margin-top:60px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius);padding:38px 42px;
}
.process__list{display:flex;flex-wrap:wrap;gap:12px 30px;margin-top:24px}
.process__step{font-size:18px;font-weight:600;color:var(--navy)}
.process__num{font-weight:700;margin-right:4px}

/* --------------------------- Досвід ---------------------------- */
.experience .section__title{margin-top:0}
.facts{display:grid;grid-template-columns:repeat(5,1fr);gap:22px;margin-top:56px}
.facts__item{font-size:24px;line-height:1.28;font-weight:500;letter-spacing:-.01em;color:var(--navy)}

/* --------------------------- Галузі ---------------------------- */
.industries{padding-top:24px}
.industries__grid{display:grid;grid-template-columns:224px minmax(0,660px);gap:24px;align-items:start}
.industries__list{font-size:19px;line-height:1.6;font-weight:500;color:var(--navy)}
.industries__list .sep{color:var(--muted);margin:0 2px}

/* ---------------------------- Форма ---------------------------- */
.quote{background:var(--surface);padding:72px 0 84px}
.quote .section__title{margin-top:22px}
.quote__lead{margin-top:22px;font-size:16px;color:var(--text);max-width:60ch}

.qform{margin-top:34px;max-width:620px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.field{position:relative;margin-bottom:14px}
.field input,
.field textarea{
  width:100%;background:#fff;border:1px solid #D9DFE5;border-radius:var(--radius);
  padding:23px 18px 9px;font-family:inherit;font-size:16px;color:var(--navy);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.field textarea{padding-top:28px;min-height:150px;resize:vertical;line-height:1.5}
.field input:focus,
.field textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(20,49,79,.08)}

.field label{
  position:absolute;left:19px;top:8px;
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:#93A3B2;pointer-events:none;transition:all .16s ease;
}
/* Пока поле пустое и не в фокусе — подпись стоит «в поле», как в макете */
.js .field--empty label{
  top:17px;font-size:16px;font-weight:400;
  letter-spacing:0;text-transform:none;color:#8A9BAA;
}
.js .field--area.field--empty label{top:19px}

.field__hint{
  display:block;font-size:12.5px;color:#7C8FA1;
  max-height:0;opacity:0;overflow:hidden;transition:all .18s ease;
}
.field:focus-within .field__hint{max-height:40px;opacity:1;margin:6px 0 0 2px}

.field.has-error input,
.field.has-error textarea{border-color:#C0453C;box-shadow:0 0 0 3px rgba(192,69,60,.08)}
.field__error{display:block;margin:6px 0 0 2px;font-size:13px;color:#C0453C}

.consent{display:flex;gap:12px;align-items:flex-start;margin:14px 0 22px;font-size:14px;line-height:1.5;color:var(--text)}
.consent input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--navy);flex-shrink:0}
.consent a{color:var(--navy);text-decoration:underline;text-underline-offset:2px}
.consent.has-error span{color:#C0453C}

.qform__msg{margin-top:16px;font-size:15px;line-height:1.5;min-height:1px}
.qform__msg.is-ok{color:#1F6B44;font-weight:600}
.qform__msg.is-error{color:#C0453C;font-weight:600}
.qform.is-sending .btn--block{opacity:.65;pointer-events:none}

/* ---------------------------- Футер ---------------------------- */
.site-footer{background:var(--white);padding:54px 0 64px}
.site-footer__brand{display:inline-block;line-height:0}
.site-footer__brand img{width:150px;height:auto;display:block}
.site-footer__meta{margin-top:14px;font-size:14.5px;color:var(--muted)}
.site-footer__meta a{color:var(--muted);text-decoration:none}
.site-footer__meta a:hover{color:var(--navy)}
.site-footer .dot{margin:0 8px;color:#B6C3CE}
.site-footer__nav{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14.5px}
.site-footer__nav a{color:var(--navy);font-weight:600;text-decoration:none}
.site-footer__nav a:hover{text-decoration:underline}
.site-footer__nav span{color:#B6C3CE}
.cookie-reopen{
  background:none;border:0;padding:0;margin:0;cursor:pointer;
  font:inherit;font-weight:600;color:var(--navy);text-decoration:underline;text-underline-offset:2px;
}
.cookie-reopen:hover{color:var(--terra)}

.site-footer__legal{margin-top:18px;font-size:13.5px;color:var(--muted)}
.site-footer__copy{margin-top:10px;font-size:13px;color:#95A6B4}
.site-footer__copy a{color:#95A6B4;text-decoration:none}
.site-footer__copy a:hover{color:var(--navy)}

/* --------------------- Кнопка WhatsApp ------------------------- */
.wa-float{
  position:fixed;right:24px;bottom:24px;z-index:50;
  display:flex;align-items:center;justify-content:center;
  width:58px;height:58px;border-radius:50%;
  background:#25D366;color:#fff;text-decoration:none;
  box-shadow:0 8px 24px rgba(16,40,67,.24);
  transition:transform .18s ease, box-shadow .18s ease;
}
.wa-float:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(16,40,67,.3)}
.wa-float:active{transform:translateY(0)}
/* пока висит банер cookie — поднимаем кнопку, чтобы не перекрывались */
body:has(.cookiebar:not([hidden])) .wa-float{bottom:150px}

/* ------------------------ Cookie-баннер ------------------------ */
.cookiebar{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:60;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 12px 40px rgba(16,40,67,.16);
}
.cookiebar[hidden]{display:none}
.cookiebar__inner{
  max-width:calc(var(--site-max) - 2 * var(--pad));margin:0 auto;
  display:flex;align-items:center;gap:26px;padding:18px 22px;
}
.cookiebar__text{font-size:14px;line-height:1.5;color:var(--text)}
.cookiebar__text a{color:var(--navy);text-decoration:underline;text-underline-offset:2px}
.cookiebar__actions{display:flex;gap:10px;margin-left:auto;flex-shrink:0}

/* ------------------------ Правовые страницы -------------------- */
.legal{padding-top:64px}
.legal__wrap{max-width:860px}
.legal__title{font-size:clamp(30px,3.6vw,44px);line-height:1.12;font-weight:800;letter-spacing:-.02em;color:var(--navy);margin-top:18px}
.legal__updated{margin-top:12px;font-size:14px;color:var(--muted)}
.legal__intro{margin-top:26px;font-size:17px;line-height:1.7}
.legal__block{margin-top:42px}
.legal__block h2{font-size:21px;font-weight:700;color:var(--navy);line-height:1.3;display:flex;gap:12px;align-items:baseline}
.legal__num{font-size:13px;font-weight:700;color:var(--terra);letter-spacing:.06em}
.legal__block p{margin-top:14px;font-size:16px;line-height:1.7}
.legal__block ul{margin-top:14px;display:grid;gap:10px}
.legal__block li{position:relative;padding-left:20px;font-size:16px;line-height:1.65}
.legal__block li::before{content:"";position:absolute;left:0;top:11px;width:7px;height:1.5px;background:var(--terra)}
.legal__block a{color:var(--navy);text-decoration:underline;text-underline-offset:2px}
.legal__tablewrap{margin-top:32px;overflow-x:auto}
.legal__table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:560px}
.legal__table th{
  text-align:left;background:var(--navy);color:#fff;font-weight:700;
  padding:14px 16px;font-size:13px;letter-spacing:.04em;text-transform:uppercase;
}
.legal__table td{padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.55}
.legal__back{margin-top:52px}

/* =========================== Адаптив =========================== */
@media (max-width:1160px){
  :root{--pad:44px}
  .hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px}
  .facts{grid-template-columns:repeat(3,1fr);gap:26px}
  .strip{grid-template-columns:repeat(3,1fr);gap:22px}
}

@media (max-width:980px){
  .section{padding:68px 0}
  :root{--header-h:64px}
  /* меню на всю ширину экрана: fixed внутри полотна 1200px обрезался по его краю */
  .mainnav{
    position:fixed;top:var(--header-h);left:0;right:0;width:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--white);border-bottom:1px solid var(--line);
    padding:4px var(--pad) 24px;
    box-shadow:0 16px 40px rgba(16,40,67,.12);
    max-height:calc(100vh - var(--header-h));overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    transform:translateY(-12px);opacity:0;visibility:hidden;transition:all .18s ease;
  }
  .mainnav.is-open{transform:none;opacity:1;visibility:visible}
  .mainnav a{width:100%;padding:14px 0;font-size:17px;border-bottom:1px solid var(--line)}
  .mainnav__mobile-extra{display:block;margin-top:18px;align-self:flex-start}
  /* специфичность выше, чем у .mainnav a — иначе текст кнопки становится серым */
  .mainnav .mainnav__mobile-extra a.btn--gold{
    border:0;padding:13px 24px;width:auto;display:inline-flex;
    color:var(--navy);font-size:15px;
  }
  .burger{display:block}
  .site-header__cta{display:none}

  /* язык и бургер прижаты к правому краю */
  .site-header__inner{grid-template-columns:auto 1fr auto;gap:12px}
  .site-header__right{gap:14px}

  /* баннер на мобильном — шире и ниже, портретный кроп там ни к чему */
  .hero__media{aspect-ratio:4/3}

  .hero__grid{grid-template-columns:1fr;gap:32px}
  .hero__text{padding-top:44px;padding-bottom:0}
  .hero__lead{max-width:none}

  .about__grid,
  .industries__grid{grid-template-columns:1fr;gap:14px}
  .about__body .section__title{margin-top:8px}

  .exlist__row{grid-template-columns:1fr;gap:12px;padding:24px 20px}
  .exlist__name{font-size:24px}

  .why__head{flex-direction:column;align-items:flex-start;gap:0}
  .why__title{text-align:left;max-width:none}
  .cards{grid-template-columns:repeat(2,1fr)}
  .card{min-height:0}

  .cookiebar__inner{flex-direction:column;align-items:flex-start;gap:14px}
  .cookiebar__actions{margin-left:0;width:100%}
  .cookiebar__actions .btn{flex:1}
}

@media (max-width:640px){
  :root{--pad:20px}
  body{font-size:16px}
  .section{padding:52px 0}
  .brand__tag{display:none}
  .brand__logo{width:96px}
  .site-footer__brand img{width:124px}
  .strip{grid-template-columns:1fr;gap:14px;padding:24px}
  .facts{grid-template-columns:1fr;gap:16px}
  .facts__item{font-size:21px}
  .cards{grid-template-columns:1fr}
  .process{padding:26px 22px}
  .process__list{gap:10px 22px}
  .industries__list{font-size:17px}
  .quote{padding:56px 0 64px}
  .wa-float{right:16px;bottom:16px;width:52px;height:52px}
  body:has(.cookiebar:not([hidden])) .wa-float{bottom:210px}
  .site-footer__brand{font-size:26px}
  .legal__block h2{font-size:19px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;scroll-behavior:auto !important}
}

/* Плавный скролл по якорям с учётом липкой шапки */
html{scroll-behavior:smooth}
[id]{scroll-margin-top:calc(var(--header-h) + 16px)}