/* =========================================================
   PEK patch.css — CLEAN (compressed)
   Цель: сохранить ВНЕШНИЙ ВИД как сейчас, убрать дубли.
   Подключается ПОСЛЕ styles.css.
   ========================================================= */

/* ---------- 0) Safety: no horizontal scroll ---------- */
html,body{ overflow-x:hidden !important; }

/* ---------- 1) Safe-area vars (iOS notch etc.) ---------- */
:root{
  --safeT: env(safe-area-inset-top, 0px);
  --safeR: env(safe-area-inset-right, 0px);
  --safeL: env(safe-area-inset-left, 0px);
}

/* ---------- 2) LOGO + BURGER (DPI/Windows Scale + safe-area) ---------- */
.brand-pecomplect.global{
  left: calc(var(--safeL) + clamp(12px, 2vw, 24px)) !important;
  top:  calc(var(--safeT) + clamp(12px, 2vw, 20px)) !important;

  /* зона бургера справа (кнопка + отступы) */
  max-width: calc(100vw - (var(--safeR) + clamp(12px, 2vw, 18px)) - 92px) !important;

  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

.hamb{
  right: calc(var(--safeR) + clamp(10px, 2vw, 18px)) !important;
  top:   calc(var(--safeT) + clamp(10px, 2vw, 18px)) !important;

  padding:clamp(10px, 1.2vw, 14px) !important;
  border-radius:clamp(10px, 1.2vw, 14px) !important;
  gap:clamp(4px, .55vw, 6px) !important;

  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.hamb span{ width:clamp(22px, 2.4vw, 28px) !important; }

@media (max-width:420px){
  .hamb{ padding:14px !important; }
  .hamb span{ width:28px !important; }
}

/* ---------- 3) HERO (1): стабильная позиция слогана ---------- */
#home.hero{ position:relative !important; }
#home.hero .container.inner{
  max-width:none !important;
  margin-inline:0 !important;
  width:100% !important;
  position:static !important;
  padding-bottom:0 !important;
}
#home.hero h1.hero-words{
  --heroShift: clamp(90px, 7vw, 170px);
  position:absolute !important;
  left:50% !important;
  bottom:clamp(26px, 6vh, 90px) !important;
  width:min(92vw, 1200px) !important;
  text-align:center !important;
  transform:translate3d(calc(-50% - var(--heroShift)), 0, 0) !important;
  white-space:nowrap !important;
  margin:0 !important;
}
@media (max-width:900px){
  #home.hero h1.hero-words{
    white-space:normal !important;
    line-height:1.35 !important;
    --heroShift: clamp(10px, 3vw, 40px);
  }
}
@media (max-width:520px){
  #home.hero .hero-title .thin{
    letter-spacing:.12em !important;
    font-size:clamp(16px, 4.2vw, 22px) !important;
  }
}

/* ---------- 4) CONTACTS (9): круг-карта большая “полулуной” ---------- */
#contacts.fs-contacts{ background:#000 !important; overflow:hidden !important; }
#contacts.fs-contacts .ct-left{ background:transparent !important; position:relative !important; z-index:3 !important; }
#contacts.fs-contacts .ct-map{ position:relative !important; z-index:2 !important; }
#contacts.fs-contacts .ct-title{ display:none !important; }

#contacts.fs-contacts .ct-left{
  font-size:clamp(18px, 1.15vw, 24px) !important;
  line-height:1.35 !important;
}
#contacts.fs-contacts .ct-stack{
  margin-top:calc(clamp(24px, 6vh, 72px) + clamp(75px, 12vh, 300px)) !important;
}

@media (min-width:900px){
  :root{
    --mapSize:min(150vh, 110vw) !important;
    --mapStart:55% !important;
    --mapFinal:20% !important;
  }
  #contacts .map-circle{
    position:absolute !important;
    top:50% !important; right:0 !important; left:auto !important;

    width:var(--mapSize) !important;
    height:var(--mapSize) !important;
    border-radius:50% !important;
    overflow:hidden !important;

    clip-path:none !important;
    -webkit-mask-image:none !important;
    mask-image:none !important;

    animation:none !important;
    opacity:0 !important;
    transform:translate(var(--mapStart), -50%) !important;

    transition:transform 1.6s cubic-bezier(.22,.61,.36,1), opacity .9s ease;
    will-change:transform,opacity;
  }
  #contacts.snap.inview .map-circle{
    opacity:1 !important;
    transform:translate(var(--mapFinal), -50%) !important;
  }

}

@media (max-width:899px){
  :root{
    --mapSize:min(115vh, 160vw) !important;
    --mapFinal:8% !important;
  }
  #contacts .map-circle{
    position:absolute !important;
    top:50% !important; right:0 !important; left:auto !important;

    width:var(--mapSize) !important;
    height:var(--mapSize) !important;
    border-radius:50% !important;
    overflow:hidden !important;

    clip-path:none !important;
    -webkit-mask-image:none !important;
    mask-image:none !important;

    animation:none !important;
    transition:none !important;

    opacity:1 !important;
    transform:translate(var(--mapFinal), -50%) !important;
  }

}

/* ---------- 5) METRICS (3): подписи +10% + “палочки” левее ---------- */
.fs-metrics .m-cap{
  font-size:clamp(14px, 3.7vw, 18px) !important;
}
@media (min-width:768px){
  .fs-metrics .m-cap{ font-size:clamp(15px, 1.8vw, 20px) !important; }
}
@media (min-width:1200px){
  .fs-metrics .m-cap{ font-size:clamp(15px, 1.25vw, 20px) !important; }
  .fs-metrics .metric{ padding-left:clamp(26px, 2.2vw, 38px) !important; }
}

/* ---------- 6) MIDJ1–MIDJ4 (4–7): финальная типографика (без дублей) ---------- */
/* Desktop (>=1101px) */
#midj1 .midj-title,
#midj2 .midj-title{
  font-size:clamp(19px, 1.82vw, 36px) !important;
}
#midj3 .midj-title{
  font-size:clamp(17px, 1.76vw, 33px) !important;
  letter-spacing:clamp(.03em, .10vw, .08em) !important; /* компактнее */
}
#midj4 .midj-title{
  font-size:clamp(17px, 1.66vw, 29px) !important;
  letter-spacing:clamp(.03em, .09vw, .07em) !important; /* компактнее */
}

#midj1 .midj-list,
#midj2 .midj-list,
#midj3 .midj-list,
#midj4 .midj-list{
  font-size:clamp(16px, 1.22vw, 23px) !important;
}

/* Tablet/Laptop (<=1100px) */
@media (max-width:1100px){
  #midj1 .midj-title,
  #midj2 .midj-title{
    font-size:clamp(21px, 2.76vw, 33px) !important;
  }
  #midj3 .midj-title{
    font-size:clamp(18px, 2.48vw, 29px) !important;
  }
  #midj4 .midj-title{
    font-size:clamp(18px, 2.32vw, 27px) !important;
  }

  #midj1 .midj-list,
  #midj2 .midj-list,
  #midj3 .midj-list,
  #midj4 .midj-list{
    font-size:clamp(16px, 2.10vw, 21px) !important;
  }
}

/* Заголовки midj1/midj2 — снова в 1 строку и не “режутся” (desktop) */
@media (min-width:1101px){
  #midj1 .midj-block,
  #midj2 .midj-block{
    max-width:min(980px, 62vw) !important;
    margin-right: clamp(110px, 11vw, 420px) !important;
  }
  #midj1 .midj-title,
  #midj2 .midj-title{
    white-space:nowrap !important;
    overflow-wrap:normal !important;
    word-break:keep-all !important;
    hyphens:none !important;
    letter-spacing:clamp(.04em, .12vw, .09em) !important;
  }
}

/* На узких экранах разрешаем перенос (как было по адаптиву) */
@media (max-width:1100px){
  #midj2 .midj-title{ white-space:normal !important; }
}

/* Ultra-narrow: nowrap = риск обрезания (midj1–midj3) */
@media (max-width:420px){
  #midj1 .midj-title,
  #midj2 .midj-title,
  #midj3 .midj-title{
    white-space:normal !important;
    line-height:1.12 !important;
    letter-spacing:.10em !important;
    text-wrap:balance;
  }
}

/* Заголовок midj1–midj4 появляется в 2 раза медленнее (только title) */
#midj1.snap.inview .stagger .midj-title,
#midj2.snap.inview .stagger .midj-title,
#midj3.snap.inview .stagger .midj-title,
#midj4.snap.inview .stagger .midj-title{
  animation-duration: calc(2 * var(--dropDur, 1.5s)) !important;
}

/* MIDJ1: твои тайминги появления (сохраняем) */
#midj1.snap.inview .midj-title{ animation-delay:0s !important; }
#midj1.snap.inview .midj-list > div{ animation-delay:.70s !important; }
#midj1.snap.inview .midj-list > div:nth-child(2){ animation-delay:.85s !important; }
#midj1.snap.inview .midj-list > div:nth-child(3){ animation-delay:1.00s !important; }
#midj1.snap.inview .midj-list > div:nth-child(4){ animation-delay:1.15s !important; }

/* ---------- 7) MIDJ5: убираем "mm" (чтобы не зависеть от DPI) ---------- */
#midj5 .midj5-item .l1{
  margin-bottom: clamp(4px, .45vh, 6px) !important;
}
#midj5 .midj5-sep{
  height: calc(2 * 1.08em + clamp(4px, .45vh, 6px)) !important;
}

/* ---------- 8) Drawer: убрать “телефон” ---------- */
.drawer .dr-foot-label{ display:none !important; }
.drawer .dr-foot-phone{ margin-top:0 !important; }

/* ---------- 9) CITY (8): логотипы +10% ---------- */
#city .partners-strip{
  height: calc(1.10 * clamp(36px, 5.8vh, 80px)) !important;
}
@media (max-width:767px){
  #city .partners-strip{
    height: calc(1.10 * clamp(28px, 6vh, 52px)) !important;
  }
}
/* =========================================================
   MIDJ5 (слайд 2): всегда стартовать анимацию заново при возврате
   (как на METRICS: выход из вью → сброс, вход → старт с 0)
   ========================================================= */
#midj5.snap:not(.inview) .midj5-tagline,
#midj5.snap:not(.inview) .midj5-item,
#midj5.snap:not(.inview) .midj5-sep{
  animation: none !important;                 /* ключ: сброс таймлайна */
  opacity: 0 !important;
  clip-path: inset(0 100% 0 0) !important;    /* в исходное “закрытое” состояние */
}
/* =========================================================
   iPhone / mobile snap fix:
   убираем "стык" между слайдами на телефонах
   ========================================================= */

@supports (height: 100dvh){
  @media (max-width: 899px){

    /* Только полноэкранные визуальные слайды (НЕ contacts) */
    #home,
    #midj5,
    #metrics,
    #midj1,
    #midj2,
    #midj3,
    #midj4,
    #city{
      height: 100dvh !important;
      min-height: 100dvh !important;
    }

    /* Внутренние обёртки не должны быть выше секции */
    #home .container.inner,
    #midj5 .container.midj-wrap,
    #midj1 .midj-wrap,
    #midj2 .midj-wrap,
    #midj3 .midj-wrap,
    #midj4 .midj-wrap{
      min-height: 100% !important;
      height: 100% !important;
    }

    /* Чуть подстрахуем от тонкой полосы/шва на iOS */
    #home .shade,
    #midj5 .overlay,
    #metrics .overlay,
    #midj1 .overlay,
    #midj2 .overlay,
    #midj3 .overlay,
    #midj4 .overlay,
    #city .overlay{
      inset: -1px !important;
    }

    /* Чтобы фон вёл себя стабильно */
    #midj1, #midj2, #midj3, #midj4, #midj5{
      background-position: center center !important;
      background-size: cover !important;
    }

    /* На телефоне лучше без лишнего "воздуха" сверху */
    #midj1 .midj-wrap,
    #midj2 .midj-wrap,
    #midj3 .midj-wrap,
    #midj4 .midj-wrap{
      padding-top: clamp(64px, 9dvh, 96px) !important;
      align-items: flex-start !important;
      justify-content: flex-start !important;
    }
  }
}
/* =========================================================
   MOBILE FIX (phones only)
   - убираем "стыки" между слайдами
   - выравниваем текст на midj-слайдах
   - не трогаем ПК/ноутбуки
   ========================================================= */
@media (max-width: 820px){

  /* iPhone/Safari: более предсказуемый скролл */
  html, body{
    overscroll-behavior-y: none;
  }

  /* Нативный snap на телефоне (помогает "дощёлкивать" слайд) */
  html{
    scroll-snap-type: y proximity;
    scroll-padding-top: 0;
  }
  section.snap{
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* -------- фикс "стыков" / чёрных полос между full-screen слайдами -------- */
  #home.hero,
  #midj5,
  #midj1, #midj2, #midj3, #midj4,
  #city{
    min-height: 100dvh !important;
    height: 100dvh !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center center !important;
  }

  /* метрики не фиксируем жёстко по height (там высокий контент), только min-height */
  #metrics{
    min-height: 100dvh !important;
  }

  /* hero-video тоже в высоту экрана */
  #home.hero .bg,
  #home.hero .bg video{
    min-height: 100dvh !important;
    height: 100dvh !important;
  }

  /* Внутренний wrap у midj-слайдов тоже ровно в экран */
  #midj1 .midj-wrap,
  #midj2 .midj-wrap,
  #midj3 .midj-wrap,
  #midj4 .midj-wrap{
    min-height: 100dvh !important;
    height: 100dvh !important;

    align-items: flex-start !important;
    justify-content: flex-start !important;

    /* отступ вниз от логотипа+бургера */
    padding-top: calc(var(--safeT, 0px) + 78px) !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Текстовый блок на телефоне всегда слева, без desktop-смещений */
  #midj1 .midj-block,
  #midj2 .midj-block,
  #midj3 .midj-block,
  #midj4 .midj-block{
    margin: 0 !important;
    transform: none !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Заголовки: нормальный перенос, без странных разрывов */
  #midj1 .midj-title,
  #midj2 .midj-title,
  #midj3 .midj-title,
  #midj4 .midj-title{
    white-space: normal !important;
    hyphens: none !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    text-wrap: balance;

    line-height: 1.08 !important;
    letter-spacing: .08em !important;
    margin-bottom: 12px !important;

    text-shadow: 0 8px 24px rgba(0,0,0,.45);
  }

  /* Отдельная подстройка размеров заголовков под телефон */
  #midj1 .midj-title{
    font-size: clamp(18px, 5.8vw, 24px) !important;
    max-width: 18ch !important;
  }
  #midj2 .midj-title{
    font-size: clamp(18px, 5.6vw, 23px) !important;
    max-width: 20ch !important;
  }
  #midj3 .midj-title{
    font-size: clamp(16px, 4.9vw, 21px) !important;
    max-width: 24ch !important;
  }
  #midj4 .midj-title{
    font-size: clamp(16px, 4.7vw, 20px) !important;
    max-width: 24ch !important;
  }

  /* Списки на слайдах 4-7: меньше разрядка, чтобы не "плыли" */
  #midj1 .midj-list,
  #midj2 .midj-list,
  #midj3 .midj-list,
  #midj4 .midj-list{
    font-size: clamp(12px, 3.9vw, 16px) !important;
    line-height: 1.18 !important;
    letter-spacing: .10em !important;
    row-gap: 10px !important;
    max-width: 95% !important;
  }

  /* CONTACTS на телефоне: убираем огромную пустоту сверху */
  #contacts.fs-contacts .ct-left{
    padding-top: calc(var(--safeT, 0px) + 76px) !important;
  }
  #contacts.fs-contacts .ct-stack{
    margin-top: 0 !important;
  }
}

/* Совсем узкие экраны */
@media (max-width: 390px){
  #midj1 .midj-list,
  #midj2 .midj-list,
  #midj3 .midj-list,
  #midj4 .midj-list{
    font-size: clamp(12px, 3.6vw, 15px) !important;
    letter-spacing: .08em !important;
  }

  #midj1 .midj-wrap,
  #midj2 .midj-wrap,
  #midj3 .midj-wrap,
  #midj4 .midj-wrap{
    padding-top: calc(var(--safeT, 0px) + 74px) !important;
  }
}

/* ---------- CONTACTS: local static map ---------- */
#contacts .map-circle .map-static{
  display:block !important;
  width:100% !important;
  height:100% !important;
}

#contacts .map-circle .map-static img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}