/* ==========================================================
   PEK styles.css (STABLE) — 2025-12-22
   FIXES:
   - midj5: animation-play-state (без этого всё "плавает")
   - contacts: круг НЕ больше высоты экрана -> не режется в прямоугольник
   - убраны конфликтующие хвосты PATCH
   - midj: текст стабильно справа, без "пляски" от max-width контейнера
   ========================================================== */

/* ---------- base ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{
  color-scheme:dark;
  scroll-behavior:smooth;
  scrollbar-width:none;
}
html::-webkit-scrollbar, body::-webkit-scrollbar{width:0;height:0}

:root{
  --bg:#0b0b0f;
  --surface:#0d1116;
  --glass:rgba(17,20,25,.6);
  --text:#e8eef7;
  --muted:#b8c2d2;
  --accent:#a3e635;
  --line:rgba(255,255,255,.12);
  --radius:16px;

  --container:1200px;
  --pad: clamp(16px, 2.2vw, 30px);

  --drawerW:clamp(254px,27.7vw,492px);
  --shiftL: clamp(12px, 2.0vw, 44px);
  --shiftXL: clamp(18px, 3.2vw, 70px);

  --dropDur:3.2s;

  /* CONTACTS: размер круга НИКОГДА не больше высоты */
  --mapSize: min(92svh, 78vw);
  --mapOut: 55%;
  --mapIn: -18%;
}

@supports (height:100dvh){
  :root{ --mapSize: min(92dvh, 78vw); }
}

html,body{overflow-x:hidden}

body{
  background:var(--bg);
  color:var(--text);
  font:400 16px/1.6 system-ui,-apple-system,"Segoe UI",Inter,Roboto,Arial;
  font-size:clamp(14px, calc(12px + 0.45vw), 18px);
}

img,video,svg,iframe{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.p{color:var(--muted)}
.hr{border-top:1px solid var(--line)}

.container{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--pad);
}

/* ---------- HAMBURGER + DRAWER (adaptive + no broken values) ---------- */
:root{
  /* ширина меню: одинаково “по ощущению” на разных экранах */
  --drawerW: min(92vw, 460px);

  /* правый внутренний отступ контента (чтобы было ровно и не “гуляло”) */
  --drawerPadR: clamp(18px, 3.2vw, 56px);
  --drawerPadL: 26px;
  --hambSize: 48px;
  --hambOffset: clamp(14px, 1.2vw, 18px);
  --hambSafe: calc(var(--hambSize) + var(--hambOffset) + 8px);
}
@media (pointer:coarse){
  :root{ --hambSize: 52px; }
}
/* кнопка гамбургера: одинаковый размер, нормальный tap-area */
.hamb{
  position:fixed;
  right:clamp(14px, 1.2vw, 18px);
  top:clamp(14px, 1.2vw, 18px);
  z-index:2147480000;

  width:48px;
  height:48px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:6px;

  background:rgba(17,20,25,.55);
  border:1px solid var(--line);
  border-radius:12px;
  backdrop-filter:saturate(150%) blur(8px);
  cursor:pointer;

  transition:transform .2s ease;
  pointer-events:auto;
}
.hamb:hover{transform:translateY(-1px)}
.hamb span{
  width:24px;
  height:2px;
  background:#e5e7eb;
  border-radius:2px;
  display:block;
}

@media (pointer:coarse){
  .hamb{width:52px;height:52px}
  .hamb span{width:26px}
}

/* затемнение */
.backshade{
  position:fixed;
  inset:0;
  z-index:100;
  background:rgba(0,0,0,0);
  opacity:0;
  transition:opacity .28s ease, background .28s ease;
}
.backshade.show{background:rgba(0,0,0,.35);opacity:1}

/* оболочка drawer */
.drawer{
  position:fixed;
  inset:0 0 0 auto;
  width:var(--drawerW);
  z-index:110;
  pointer-events:none;
}
.drawer.open{pointer-events:auto}

.drawer-in{
  height:100%;
  width:100%;
  background:#000;
  border-left:1px solid rgba(255,255,255,.08);
  display:flex;
  flex-direction:column;

  /* чтобы на маленьких высотах ничего не “ломалось” */
  overflow:hidden;
}

.page{
  position:relative;
  z-index:120;
  transition:transform 1.5s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.drawer.open ~ .page{
  transform:translateX(calc(-1 * var(--drawerW)));
}

/* header */
.drawer-header{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:22px var(--hambSafe) 22px var(--drawerPadL);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.dr-brand{
  display:flex;
  align-items:center;
  gap:14px;

  font-family:'Goldman',system-ui,-apple-system,"Segoe UI",Inter,Roboto,Arial;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:lowercase;
  font-size:clamp(28px, 2.4vw, 40px);
  color:#fff;

  white-space:nowrap; /* не ломаем строку */
}
.dr-lines{display:flex;flex-direction:column;gap:6px}
.dr-lines i{
  display:block;
  height:1px;
  background:rgba(255,255,255,.85);
  border-radius:1px
}
.dr-lines i:nth-child(1){width:36px}
.dr-lines i:nth-child(2){width:22px}

/* body */
.drawer-body{
  display:flex;
  flex-direction:column;
  flex:1;
  justify-content:space-between;
  min-height:0;
}
.drawer-nav{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  text-align:right;

  gap:22px;
  padding:42px var(--drawerPadR) 28px var(--drawerPadL);
  margin-top:clamp(18px,5vh,72px);

  overflow:auto;                /* если по высоте не влезло */
  overscroll-behavior:contain;
}
.drawer-nav a{
  display:block;
  font-family:'Roboto',system-ui,-apple-system,"Segoe UI",Inter,Roboto,Arial;
  font-weight:300;
  text-transform:uppercase;

  /* чтобы на разных экранах было похоже и не разваливалось */
  font-size:clamp(18px, 1.1vw + 12px, 24px);
  letter-spacing:clamp(.12em, .22vw, .20em);
  line-height:1.1;

  color:#fff;
  white-space:nowrap;           /* НЕ рвём пункты меню */
}
.drawer-nav a:hover{color:#cfd7e6}

.dr-sep{
  height:1px;
  border:0;
  background:rgba(255,255,255,.14);
  margin:12px var(--drawerPadL);
}

/* footer */
.drawer-foot{
  padding:28px var(--drawerPadR) 24px var(--drawerPadL);
  color:#cfd7e6;
  text-align:right;
}
.drawer-foot, .drawer-foot *{
  font-family:'Roboto',system-ui,-apple-system,"Segoe UI",Inter,Roboto,Arial
}
.drawer-foot a{color:inherit;font-weight:inherit;text-decoration:none}

/* на очень узких — разрешаем перенос, но уменьшаем разрядку (иначе будет “рваться”) */
@media (max-width:420px){
  .drawer-nav a{
    white-space:normal;
    letter-spacing:.14em;
  }
}
/* ---------- Глобальный логотип ---------- */
.brand-pecomplect{
  color:#fff;
  letter-spacing:.12em;
  text-transform:lowercase;
  font-family:'Goldman',system-ui,-apple-system,"Segoe UI",Inter,Roboto,Arial;
  font-weight:700;
  font-size:clamp(24px,2.1vw,30px);
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}
.brand-pecomplect.global{
  position:fixed;
  left:24px;
  top:20px;
  z-index:1300;
  pointer-events:auto;
  cursor:pointer;
  text-decoration:none;
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:end;
  overflow:hidden;
}
.hero .bg{position:absolute;inset:0;z-index:0}
.hero .bg video{width:100%;height:100%;object-fit:cover;display:block}
.hero .shade{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.36) 26%, rgba(11,11,15,.82) 78%, var(--bg) 100%);
}
.hero .inner{position:relative;z-index:2;width:100%;padding-bottom:min(9vh,110px)}
.hero-title{margin:0;text-align:left;display:block}
.hero-title .thin{
  font-family:'Roboto',system-ui,-apple-system,"Segoe UI",Inter,Roboto,Arial;
  font-weight:300;
  letter-spacing:.20em;
  text-transform:uppercase;
  color:#fff;
  font-size:clamp(18px, calc(14px + 0.7vw), 32px);
}
.hero-words{white-space:nowrap}
.hero-words .word{opacity:0}
@media (max-width:520px){
  .hero-words{white-space:normal}
  .hero-title .thin{letter-spacing:.12em}
}

/* ---------- full screen slide ---------- */
.fs{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  overflow:hidden;
}
.fs .overlay{position:absolute;inset:0}
.fs .container{position:relative;z-index:2}

/* ---------- METRICS ---------- */
.fs-metrics{
  background-image:image-set(url("metrics-bg.webp") type("image/webp"), url("metrics-bg.jpg") type("image/jpeg"));
  background-size:cover;
  background-position:center;
}
.fs-metrics .overlay{background:rgba(10,12,16,.78)}

.metrics{
  display:grid;
  grid-template-columns:1fr;
  row-gap:clamp(20px,4vh,32px);
}
.metric{
  position:relative;
  padding:clamp(24px,8vh,40px) 10px clamp(20px,6vh,32px) 12px;
}
.m-num{
  font-weight:300;
  text-shadow:0 10px 30px rgba(0,0,0,.35);
  font-variant-numeric:tabular-nums lining-nums;
  text-align:center;
  font-size:clamp(32px,10vw,44px);
}
.m-cap{
  color:#d7deea;
  margin-top:12px;
  max-width:30ch;
  text-align:center;
  margin-inline:auto;
  font-size:clamp(13px,3.4vw,16px);
}

@media (min-width:768px){
  .metrics{
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:clamp(24px,3vw,40px);
    row-gap:clamp(30px,5vh,40px);
  }
  .m-num{text-align:left;font-size:clamp(36px,5.5vw,60px)}
  .m-cap{text-align:left;margin-inline:0;font-size:clamp(14px,1.6vw,18px)}
}

@media (min-width:1200px){
  .metrics{
    grid-template-columns:repeat(4,minmax(0,1fr));
    column-gap:clamp(24px,3vw,56px);
  }
  .metric{padding:14vh 0 12vh 0}
  .metric::before{
    content:"";
    position:absolute;left:0;top:50%;
    transform:translateY(-50%);
    width:1px;height:42%;
    background:rgba(255,255,255,.22);
  }
  .metric:first-child::before{display:none}
  .m-num{min-width:0;text-align:left;font-size:clamp(44px,6.2vw,86px)}
  .m-cap{text-align:left;margin-inline:0;font-size:clamp(14px,1.1vw,18px)}
}

/* ---------- CITY (Партнёры) ---------- */
.fs-city{background:#0a0c10}
.fs-city .overlay{background:rgba(8,10,14,.75);z-index:1}
.bg-stack{position:absolute;inset:0;z-index:0;overflow:hidden}
.bg-stack .slide{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;
  animation:cf 14s linear infinite;
}
.bg-stack .s1{
  background-image:image-set(url("msk6.webp") type("image/webp"), url("msk6.jpg") type("image/jpeg"));
  animation-delay:0s;
}
.bg-stack .s2{
  background-image:image-set(url("msk4.webp") type("image/webp"), url("msk4.jpg") type("image/jpeg"));
  animation-delay:7s;
}
@keyframes cf{
  0%{opacity:0}
  8%{opacity:1}
  45%{opacity:1}
  53%{opacity:0}
  100%{opacity:0}
}
.partners-marquee{
  position:absolute;left:0;right:0;
  bottom:clamp(32px,8vh,120px);
  z-index:2;
  overflow:hidden;
  padding:0 clamp(20px,5vw,80px);
  -webkit-mask-image:linear-gradient(to right,transparent 0,black 6%,black 94%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,black 6%,black 94%,transparent 100%);
}
.partners-track{
  display:flex;align-items:flex-end;
  gap:0;width:max-content;
  will-change:transform;
  animation:partnersLoop 32s linear infinite;
}
.partners-strip{
  flex:0 0 auto;
  height:clamp(36px,5.8vh,80px);
  width:auto;display:block;
  filter:brightness(0) invert(1) contrast(1.15);
}
@media (max-width:767px){
  .partners-marquee{bottom:clamp(20px,7vh,40px);padding:0 16px}
  .partners-strip{height:clamp(28px,6vh,52px)}
}
@keyframes partnersLoop{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ---------- MIDJ backgrounds ---------- */
.fs-img{background-size:cover;background-position:center}
.fs-img .overlay{background:rgba(8,10,14,.78)}
#midj1{background-image:url("midj/dom1-q95.webp")}
#midj2{background-image:url("midj/doma-q95.webp")}
#midj3{background-image:url("midj/fasad-q95.webp")}
#midj4{background-image:url("midj/reka1-q95.webp")}
#midj5{background-image:url("midj/reka2-q95.webp")}

/* важно: midj-wrap НЕ ограничиваем container-ом, иначе "плавает" */
.fs-img .container.midj-wrap{
  max-width:none;
  width:100%;
  padding-inline:clamp(20px,5vw,120px);
}

.midj-wrap{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}
.midj-block{
  color:#fff;
  max-width:min(760px, 48vw);   /* чуть больше воздуха под длинные заголовки */
  margin-left:auto;
}

.midj-title{
  margin:0 0 10px;
  font-family:'Roboto',system-ui,-apple-system,"Segoe UI",Inter,Roboto,Arial;
  font-weight:300;
  letter-spacing:clamp(.08em,.18vw,.16em); /* на больших экранах меньше разрядка */
  text-transform:uppercase;
  line-height:1.12;
  color:#D6DEE9;
  text-shadow:0 10px 30px rgba(0,0,0,.35);
  font-size:clamp(16px, 1.55vw, 30px);     /* чуть мягче верхняя граница */
  overflow-wrap:anywhere;
  hyphens:auto;
}
.midj-list{
  color:#AEB9C9;
  font-family:'Roboto',system-ui,-apple-system,"Segoe UI",Inter,Roboto,Arial;
  font-weight:300;
  letter-spacing:.18em;
  text-transform:uppercase;
  display:grid;
  row-gap:clamp(8px,1.6vh,14px);
  margin-top:clamp(12px,2.2vh,20px);
  font-size:clamp(13px, 1.05vw, 20px);
}

@media (max-width:1100px){
  .midj-block{max-width:100%}
  .midj-title{letter-spacing:.14em;font-size:clamp(18px,2.4vw,28px)}
  .midj-list{font-size:clamp(13px,1.8vw,18px)}
}
@media (max-width:767px){
  .midj-wrap{justify-content:flex-start;align-items:flex-start;padding-top:clamp(72px,10vh,120px)}
}
/* ---------- MIDJ1-4: одинаковое позиционирование текстового блока ---------- */
@media (min-width:1101px){
  #midj1 .midj-block,
  #midj2 .midj-block,
  #midj3 .midj-block,
  #midj4 .midj-block{
    margin-right: clamp(140px, 14vw, 520px);
    transform: translateY(calc(-1 * clamp(0px, 2.2vh, 26px)));
    max-width: min(640px, 44vw);
    min-width: 0; /* страховка от переполнения во flex/grid */
  }

  #midj1 .midj-title, #midj1 .midj-list,
  #midj2 .midj-title, #midj2 .midj-list,
  #midj3 .midj-title, #midj3 .midj-list,
  #midj4 .midj-title, #midj4 .midj-list{
    max-width: 100%;
  }
}

@media (max-width:1100px){
  #midj1 .midj-block,
  #midj2 .midj-block,
  #midj3 .midj-block,
  #midj4 .midj-block{
    margin-right: 0;
    transform: none;
    max-width: 100%;
    min-width: 0;
  }
}

/* --- FIX: 6-й и 7-й слайды — заголовок строго в одну строку --- */
#midj3 .midj-title,
#midj4 .midj-title{
  white-space:nowrap;
  overflow-wrap:normal;
  word-break:keep-all;
  hyphens:none;
}

/* слегка ужимаем именно длинные заголовки, чтобы 100% помещались */
#midj3 .midj-title{
  letter-spacing:clamp(.04em, .12vw, .09em);
  font-size:clamp(14px, 1.55vw, 28px);
}
#midj4 .midj-title{
  letter-spacing:clamp(.03em, .11vw, .08em);
  font-size:clamp(14px, 1.45vw, 26px);
}

/* даём блоку больше “полезной ширины” на широких экранах */
@media (min-width:1101px){
  #midj3 .midj-block,
  #midj4 .midj-block{
    max-width:min(980px, 60vw);
  }
}

/* ---------- MIDJ5 (2-й слайд): слоган ↔ 3 категории (ВОССТАНОВЛЕНО) ---------- */
#midj5{ background-image:url("midj/reka2-q95.webp"); }

/* сбрасываем влияние общих .container/.midj-wrap именно для #midj5 */
#midj5 .container.midj-wrap{
  max-width:none !important;
  width:100% !important;
  margin:0 !important;
  padding-inline:0 !important;
  position:relative;
}

/* общий слой с контентом по центру */
#midj5 .midj5-block{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  pointer-events:none;
}

/* линия из 3 блоков */
#midj5 .midj5-grid{
  --side:clamp(28px,4.8vw,120px);   /* одинаковый “воздух” по краям */
  --gapX:clamp(10px,1.6vw,22px);

  width:calc(100vw - (2 * var(--side))); /* БЕЗ 1200px cap */
  max-width:none;

  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr;
  align-items:center;
  column-gap:var(--gapX);
  text-align:center;

  transform:translateY(clamp(-56px,-5vh,-32px));
}

#midj5 .midj5-item{
  padding:clamp(8px,1.6vh,14px) clamp(10px,1.2vw,16px);
  color:#C7D2E3;
  text-shadow:0 10px 30px rgba(0,0,0,.35);
}
#midj5 .midj5-item .l1,
#midj5 .midj5-item .l2{
  display:block;
  font-family:'Roboto',system-ui,-apple-system,"Segoe UI",Inter,Roboto,Arial;
  font-weight:300;
  letter-spacing:.20em;
  text-transform:uppercase;
  line-height:1.08;
  font-size:clamp(20px,2.45vw,34px);
}
#midj5 .midj5-item .l1{ margin-bottom:2mm; }

#midj5 .midj5-sep{
  width:2px;
  height:calc(2 * 1.08em + 2mm);
  background:rgba(255,255,255,.85);
  border-radius:2px;
  justify-self:center;
  align-self:center;
}

/* слоган по центру */
#midj5 .midj5-bottom{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:calc(100vw - (2 * clamp(28px,4.8vw,120px))); /* как у grid */
  max-width:none;
  text-align:center;
}

#midj5 .midj5-tagline{
  color:#D4DEEE;
  font-family:'Roboto',system-ui,-apple-system,"Segoe UI",Inter,Roboto,Arial;
  font-weight:300;

  /* ключ: адаптивнее, иначе на 1200px режется */
  letter-spacing:clamp(.14em,.36vw,.24em);
  font-size:clamp(23px,2.7vw,44px);

  text-transform:uppercase;
  line-height:1.08;
  text-shadow:0 10px 30px rgba(0,0,0,.35);

  white-space:nowrap;
  max-width:100%;
}

/* ---------- АНИМАЦИЯ: слоган ~3с → блоки 1с/1с/1с → держим ~3с → скрыть ---------- */
#midj5 .stagger{
  --midj5Cycle:18s;   /* общий цикл */
  --midj5Lead:.0s;   /* “запуск без пустоты” при входе в слайд */
}

#midj5 .midj5-tagline,
#midj5 .midj5-item,
#midj5 .midj5-sep{
  opacity:0;
  clip-path:inset(0 100% 0 0);
  animation-duration:var(--midj5Cycle);
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  animation-delay:calc(-1 * var(--midj5Lead));
  animation-fill-mode:both;
  animation-play-state:paused;
  will-change:opacity, clip-path;
}

/* стартуем только когда секция реально во вьюпорте */
#midj5.snap.inview .midj5-tagline,
#midj5.snap.inview .midj5-item,
#midj5.snap.inview .midj5-sep{
  animation-play-state:running;
}

/* привязка анимаций */
#midj5 .midj5-tagline{animation-name:midj5Tag;}
#midj5 .midj5-item:nth-of-type(1){animation-name:midj5Item1;}
#midj5 .midj5-item:nth-of-type(2){animation-name:midj5Item2;}
#midj5 .midj5-item:nth-of-type(3){animation-name:midj5Item3;}
#midj5 .midj5-sep:nth-of-type(1){animation-name:midj5Sep1;}
#midj5 .midj5-sep:nth-of-type(2){animation-name:midj5Sep2;}
/* ---------- KEYFRAMES 2-го слайда (midj5) — ТАЙМИНГИ КАК В СТАРОМ САЙТЕ ---------- */
@keyframes midj5Tag{
  0%{ opacity:0; clip-path:inset(0 100% 0 0); }
  17.3%{ opacity:1; clip-path:inset(0 0 0 0); }
  27.3%{ opacity:1; clip-path:inset(0 0 0 0); }
  31.3%{ opacity:0; clip-path:inset(0 0 0 0); }
  100%{ opacity:0; clip-path:inset(0 100% 0 0); }
}

@keyframes midj5Item1{
  0%,33%{ opacity:0; clip-path:inset(0 100% 0 0); }
  42%{ opacity:1; clip-path:inset(0 0 0 0); }
  90%{ opacity:1; clip-path:inset(0 0 0 0); }
  96%{ opacity:0; clip-path:inset(0 0 0 0); }
  100%{ opacity:0; clip-path:inset(0 100% 0 0); }
}

@keyframes midj5Item2{
  0%,45%{ opacity:0; clip-path:inset(0 100% 0 0); }
  54%{ opacity:1; clip-path:inset(0 0 0 0); }
  90%{ opacity:1; clip-path:inset(0 0 0 0); }
  96%{ opacity:0; clip-path:inset(0 0 0 0); }
  100%{ opacity:0; clip-path:inset(0 100% 0 0); }
}

@keyframes midj5Item3{
  0%,57%{ opacity:0; clip-path:inset(0 100% 0 0); }
  66%{ opacity:1; clip-path:inset(0 0 0 0); }
  90%{ opacity:1; clip-path:inset(0 0 0 0); }
  96%{ opacity:0; clip-path:inset(0 0 0 0); }
  100%{ opacity:0; clip-path:inset(0 100% 0 0); }
}

@keyframes midj5Sep1{
  0%,45%{ opacity:0; clip-path:inset(0 100% 0 0); }
  54%{ opacity:1; clip-path:inset(0 0 0 0); }
  90%{ opacity:1; clip-path:inset(0 0 0 0); }
  96%{ opacity:0; clip-path:inset(0 0 0 0); }
  100%{ opacity:0; clip-path:inset(0 100% 0 0); }
}

@keyframes midj5Sep2{
  0%,57%{ opacity:0; clip-path:inset(0 100% 0 0); }
  66%{ opacity:1; clip-path:inset(0 0 0 0); }
  90%{ opacity:1; clip-path:inset(0 0 0 0); }
  96%{ opacity:0; clip-path:inset(0 0 0 0); }
  100%{ opacity:0; clip-path:inset(0 100% 0 0); }
}

/* ---------- АДАПТИВ ---------- */
@media (max-width: 1100px){
  #midj5 .midj5-tagline{
    white-space:normal;
    letter-spacing:.16em;
    padding-inline:4vw;
  }
}
@media (max-width: 820px){
  #midj5 .midj5-grid{
    grid-template-columns:1fr;
    row-gap:clamp(10px,2.2vh,16px);
    transform:translateY(clamp(-28px,-3vh,-16px));
  }
  #midj5 .midj5-sep{ display:none; }
}

/* ---------- CONTACTS ---------- */
.fs-contacts{
  min-height:100svh;
  display:grid;
  grid-template-columns:minmax(320px,42vw) 1fr;
  overflow-x:clip;  /* не даём горизонтальный скролл */
  overflow-y:hidden;
  isolation:isolate;
}
@supports not (overflow: clip){
  .fs-contacts{overflow-x:hidden}
}
.ct-left{
  background:#000;
  padding:8vh clamp(24px,4vw,48px);
  position:relative;
  z-index:2;
  font-size:clamp(16px, 0.9vw, 22px);
}
.fs-contacts .ct-left,
.fs-contacts .ct-left *{
  font-family:'Roboto',system-ui,-apple-system,"Segoe UI",Inter,Roboto,Arial;
}
.ct-stack{margin-top:clamp(24px,6vh,72px)}
.ct-title{
  font-weight:300;
  letter-spacing:.10em;
  text-transform:uppercase;
  margin:24px 0 8px;
}
.ct-line{margin:8px 0;color:#cfd7e6;font-weight:400}
.ct-phone{margin-top:10px}

.ct-map{
  position:relative;
  background:#000;
  filter:grayscale(1) contrast(1.05) brightness(.96);
  overflow:visible;
  z-index:1;
}
.map-circle{
  position:absolute;
  top:50%;
  right:0;
  transform:translate(var(--mapOut), -50%);
  width:var(--mapSize);
  height:var(--mapSize);
  border-radius:50%;
  overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.16), 0 20px 60px rgba(0,0,0,.55);
  opacity:0;
  will-change:transform,opacity;
}

@keyframes mapSlideIn{
  0%{transform:translate(var(--mapOut), -50%);opacity:0}
  100%{transform:translate(var(--mapIn), -50%);opacity:1}
}
#contacts.snap.inview .map-circle{
  animation:mapSlideIn 1.6s cubic-bezier(.22,.61,.36,1) forwards;
}

/* тонкая подстройка "до середины" */
@media (max-width:1700px){ :root{ --mapIn:-12%; } }
@media (max-width:1400px){ :root{ --mapIn:-6%;  } }

@media (max-width:1200px){
  .fs-contacts{grid-template-columns:1fr;min-height:auto}
  .ct-left{padding:clamp(40px,10vh,60px) 32px 32px;font-size:clamp(15px,2vw,18px)}
  .ct-map{padding:32px 0 40px;min-height:360px;overflow:hidden}
  .map-circle{
    position:relative;
    top:auto;right:auto;
    transform:none;
    width:min(520px,88vw);
    height:auto;
    aspect-ratio:1/1;
    margin:0 auto;
    opacity:1;
    animation:none;
  }
  #contacts.snap.inview .map-circle{animation:none;opacity:1;transform:none}
}

@media (max-width:767px){
  .ct-left{padding:clamp(32px,9vh,48px) 20px 24px}
  .ct-map{padding-top:16px;padding-bottom:32px}
  .map-circle{width:min(420px,90vw)}
}

/* ---------- общие анимации ---------- */
@keyframes dropIn{
  0%{opacity:0;transform:translateY(-12px);clip-path:inset(0 100% 0 0)}
  100%{opacity:1;transform:translateY(0);clip-path:inset(0 0 0 0)}
}
@keyframes wipeOnly{
  0%{opacity:0;clip-path:inset(0 100% 0 0)}
  100%{opacity:1;clip-path:inset(0 0 0 0)}
}
.stagger h1,.stagger h2,.stagger .line,.stagger .midj-list div{opacity:0}
section.snap.inview .stagger h1,
section.snap.inview .stagger h2,
section.snap.inview .stagger .line,
section.snap.inview .stagger .midj-list div{
  animation:dropIn var(--dropDur) cubic-bezier(.22,.61,.36,1) both;
}
section.snap.inview .hero-words .w1{animation:wipeOnly 1s linear both;animation-delay:0s}
section.snap.inview .hero-words .w2{animation:wipeOnly 1s linear both;animation-delay:1s}
section.snap.inview .hero-words .w3{animation:wipeOnly 1s linear both;animation-delay:2s}
/* ---------- MIDJ1-4 (слайды 4-7): тайминги как в старой версии (вариант Б с fallback) ---------- */

/* базовые настройки цикла для midj1-4 */
#midj1 .stagger,
#midj2 .stagger,
#midj3 .stagger,
#midj4 .stagger{
  --d0: .25s;                  /* базовая задержка */
  --dropDur: 1.5s;            /* скорость появления заголовка */
  --fadeDur: 1.5s;            /* базовая длительность wipeOnly */
  --midjPause: 1s;            /* пауза после заголовка до 1-й строки */
  --midjStep: .5s;            /* шаг между строками */
  --midjExtra: 1s;            /* +1s как было в старой конфигурации */
}

/* заголовок: появляется первым */
#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-delay: var(--d0, .25s) !important;
}

/* строки списка: появляются по очереди, как в старой версии */
#midj1.snap.inview .stagger .midj-list div:nth-child(1),
#midj2.snap.inview .stagger .midj-list div:nth-child(1),
#midj3.snap.inview .stagger .midj-list div:nth-child(1),
#midj4.snap.inview .stagger .midj-list div:nth-child(1){
  animation: wipeOnly calc(var(--fadeDur, 1.5s) + var(--midjExtra, 1s)) linear both !important;
  animation-delay: calc(var(--d0, .25s) + var(--dropDur, 1.5s) + var(--midjPause, 1s) + (0 * var(--midjStep, .5s))) !important;
}

#midj1.snap.inview .stagger .midj-list div:nth-child(2),
#midj2.snap.inview .stagger .midj-list div:nth-child(2),
#midj3.snap.inview .stagger .midj-list div:nth-child(2),
#midj4.snap.inview .stagger .midj-list div:nth-child(2){
  animation: wipeOnly calc(var(--fadeDur, 1.5s) + var(--midjExtra, 1s)) linear both !important;
  animation-delay: calc(var(--d0, .25s) + var(--dropDur, 1.5s) + var(--midjPause, 1s) + (1 * var(--midjStep, .5s))) !important;
}

#midj1.snap.inview .stagger .midj-list div:nth-child(3),
#midj2.snap.inview .stagger .midj-list div:nth-child(3),
#midj3.snap.inview .stagger .midj-list div:nth-child(3),
#midj4.snap.inview .stagger .midj-list div:nth-child(3){
  animation: wipeOnly calc(var(--fadeDur, 1.5s) + var(--midjExtra, 1s)) linear both !important;
  animation-delay: calc(var(--d0, .25s) + var(--dropDur, 1.5s) + var(--midjPause, 1s) + (2 * var(--midjStep, .5s))) !important;
}

#midj1.snap.inview .stagger .midj-list div:nth-child(4),
#midj2.snap.inview .stagger .midj-list div:nth-child(4),
#midj3.snap.inview .stagger .midj-list div:nth-child(4),
#midj4.snap.inview .stagger .midj-list div:nth-child(4){
  animation: wipeOnly calc(var(--fadeDur, 1.5s) + var(--midjExtra, 1s)) linear both !important;
  animation-delay: calc(var(--d0, .25s) + var(--dropDur, 1.5s) + var(--midjPause, 1s) + (3 * var(--midjStep, .5s))) !important;
}


/* Drawer: блокируем прокрутку страницы без inline-style */
body.drawer-active{
  overflow:hidden;
}