.anchor-target {
  scroll-margin-top: 70px;
}

/* Минимальная ширина страницы — горизонтальный скролл вместо разваливания вёрстки */
body {
  min-width: 960px;
}

/* МЕНЮ: не на весь экран, скруглены только нижние углы, прижато к верху — как в Wix */
/* clamp плавно масштабирует отступы: 190px на широких экранах → 0px при сужении.
   Формула держит nav ~1000px при viewport от 1000px до ~1380px.
   Ниже 1000px — nav растягивается на всю ширину (margins → 0).
   position:fixed не реагирует на body min-width, поэтому здесь.
   overflow:hidden — клипает содержимое по границам pill; мобильный брейкпоинт
   переопределяет его на visible для dropdown. */
.container-grid.container-24 {
  left: clamp(0px, calc((100vw - 1000px) / 2), 190px);
  right: clamp(0px, calc((100vw - 1000px) / 2), 190px);
  width: auto;
  top: 0;
  border-radius: 0 0 24px 24px;
  overflow: hidden;
}

/* МЕНЮ: пустой спейсер — flex-grow:1 от нуля, вытесняет кнопки языков вправо.
   width:100% от container-26 переопределяем: basis=0, grow=1 — классический spacer */
#nav-right {
  flex: 1 1 0%;
  width: 0;
  min-width: 0;
}

/* МЕНЮ: nav-left НЕ должен давить Bootstrap-овым width:100% —
   он flex-item, его ширина = содержимое. Иначе кружки языков вылетают за правый край. */
#nav-left {
  width: auto !important;
  flex-shrink: 1;
  min-width: 0;
}

/* МЕНЮ: пункты в одну строку — меньше отступы, запрет переноса */
a.link-text.text-link-1 {
  margin-right: 22px;
  white-space: nowrap;
  font-size: 16px;
}

/* МЕНЮ: сдвигаем блок пунктов вправо */
.container-grid.container-25 {
  padding-left: 50px;
}

/* МЕНЮ: языковые кнопки — кружочки */
a.link-text.text-link-2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  min-width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(242, 242, 242, 0.4);
  margin-right: 14px;
  font-size: 13px;
  color: rgba(242, 242, 242, 0.6);
  text-decoration: none;
  flex-shrink: 0;
  align-self: center;
  box-sizing: content-box;
}

/* МЕНЮ: активный язык — яркий кружок */
a.link-text.text-link-2.lang-active {
  border-color: #f2f2f2;
  color: #f2f2f2;
  font-weight: 700;
}

/* ЛОГОТИП: алеф большой, вертикально отцентрован между словами */
h1.heading-2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1;
  font-size: 75px;
}

h1 span.heading-text-14 {
  font-size: 187px;
  line-height: 1;
  font-family: Arial, sans-serif;
  font-weight: 600;
  display: inline-block;
  transform: translateY(-17px) scaleX(1.08);
}

/* HERO слоган: убрать артефактную линию сверху */
p.paragraph.header-paragraph {
  border-top: none;
}

/* ГОРИЗОНТАЛЬНЫЕ АНИМИРОВАННЫЕ ЛИНИИ у заголовков секций */
#heading-services,
#heading-languages,
#heading-prices,
#heading-about-translations,
#heading-partners,
#heading-about-us,
#heading-contact {
  position: relative;
}

/* Линия — вне потока, не трогает заголовок.
   Нечётные (01,03,05,07): правый край у оси, линия слева.
   Чётные (02,04,06): левый край у оси, линия справа. */
.h-line-wrap {
  position: absolute;
  right: calc(50% + 15px); /* левая линия: заканчивается у оси */
  width: 220px;
  top: calc(50% - 5px);
  transform: translateY(-50%);
  overflow: hidden;
  pointer-events: none;
}

/* Правая линия (чётные заголовки: 02, 04, 06) */
.h-line-wrap.h-line-right {
  right: auto;
  left: calc(50% + 15px); /* начинается у оси, уходит вправо */
}

/* Правые линии: анимация справа налево (к заголовку).
   Используем scaleX вместо width — transform-origin: right держит правый конец,
   левый конец движется к заголовку. */
.h-line-wrap.h-line-right .h-line {
  width: 100%;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 1.2s ease-out;
}

.h-line-wrap.h-line-right.anim-done .h-line {
  width: 100%;
  transform: scaleX(1);
}

.h-line {
  height: 4px;
  width: 0;
  background-color: #c99a22;
  transition: width 1.2s ease-out;
}

.h-line-wrap.anim-done .h-line {
  width: 100%;
}

/* ЛОГОТИП: части выплывают сверху каскадом при загрузке страницы */
.logo-step1, .logo-step2, .logo-step3 {
  opacity: 0;
  transform: translateY(-22px);
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

h1.heading-2.logo-visible .logo-step1 { opacity: 1; transform: none; transition-delay: 0s; }
h1.heading-2.logo-visible .logo-step2 { opacity: 1; transform: none; transition-delay: 0.3s; }
h1.heading-2.logo-visible .logo-step3 { opacity: 1; transform: none; transition-delay: 0.6s; }

/* ЯЗЫКИ: слова выплывают сверху вниз при скролле, каскадом */
.lang-step1, .lang-step2, .lang-step3, .lang-step4 {
  opacity: 0;
  transform: translateY(-18px);
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

#languages.lang-visible .lang-step1 { opacity: 1; transform: none; transition-delay: 0s; }
#languages.lang-visible .lang-step2 { opacity: 1; transform: none; transition-delay: 0.25s; }
#languages.lang-visible .lang-step3 { opacity: 1; transform: none; transition-delay: 0.5s; }
#languages.lang-visible .lang-step4 { opacity: 1; transform: none; transition-delay: 0.75s; }

/* ПАРТНЕРЫ: левая колонка слева, правая справа, каскадом по рядам */
#p1, #p4, #p7 {
  opacity: 0;
  transform: translateX(-7vw);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

#p3, #p6, #p9 {
  opacity: 0;
  transform: translateX(7vw);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.paragraph.paragraph-2 {
  opacity: 0;
  transform: translateX(7vw);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

/* Ряд 1 */
#partners.partners-visible #p1 { opacity: 1; transform: none; transition-delay: 0s; }
#partners.partners-visible #p3 { opacity: 1; transform: none; transition-delay: 0s; }
/* Ряд 2 */
#partners.partners-visible #p4 { opacity: 1; transform: none; transition-delay: 0.15s; }
#partners.partners-visible #p6 { opacity: 1; transform: none; transition-delay: 0.15s; }
/* Ряд 3 */
#partners.partners-visible #p7 { opacity: 1; transform: none; transition-delay: 0.3s; }
#partners.partners-visible #p9 { opacity: 1; transform: none; transition-delay: 0.3s; }
/* Финал: "...и многие другие" справа налево */
#partners.partners-visible .paragraph-2 { opacity: 1; transform: none; transition-delay: 0.5s; }

/* ЦЕНЫ: 16 ЕВРО выплывает справа, 22 ЕВРО выплывает слева */
h1.heading-14 {
  opacity: 0;
  transform: translateX(7vw);
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

h1.heading-17 {
  opacity: 0;
  transform: translateX(-7vw);
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
  transition-delay: 0.3s;
}

#prices-wide-new.prices-visible h1.heading-14 { opacity: 1; transform: none; }
#prices-wide-new.prices-visible h1.heading-17 { opacity: 1; transform: none; }

h1.heading-5 {
  padding-left: calc(50% + 30px);
  padding-right: 0;
  text-align: left;
}

/* Чётные (02,04,06) — левая сторона, номер над ближней к оси буквой */
h1.heading-1 {
  padding-left: 0;
  padding-right: calc(50% + 30px);
  text-align: right;
}

/* СЕКЦИИ 03, 04: убрать боковые отступы sd-cols → колонки от края до края */
.container-grid.sd-three-cols,
.container-grid.sd-two-cols {
  padding-left: 0;
  padding-right: 0;
}

/* СЕКЦИЯ 06: фото-колонка прижата к левому краю, текст-колонка — к правому */
.container-grid.container-14 {
  padding-left: 0;
}
.container-grid.container-16 {
  padding-right: 0;
}

/* СЕКЦИЯ 06: текст вертикально по центру фотографии */
.container-grid.container-17 {
  align-items: center;
}

/* HERO: слоган вверху, лого внизу, воздух между ними */
.container-grid.container-fluid.heading-highlight {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 45vw;
  padding-top: 6vw;
  padding-bottom: 6vw;
}

/* =========================================
   RESPONSIVE — DESKTOP NARROW
   Узкий desktop: 1000–1280px
   При такой ширине nav = 1000px, и длинные
   пункты меню + кружки языков давят друг на
   друга. Сжимаем отступы, не меняя дизайн.
   ========================================= */
@media (min-width: 1000px) and (max-width: 1500px) {
  /* Меньше отступы между пунктами */
  a.link-text.text-link-1 {
    margin-right: 10px;
    font-size: 14px;
  }
  /* Меньше отступ слева у блока пунктов */
  .container-grid.container-25 {
    padding-left: 20px;
  }

  /* СЕКЦИЯ 04: правый отступ — на iPad landscape (1024px) колонка ~512px,
     paragraph-12 с margin-left:60px упирается в правый край без отступа */
  .container-grid.container-12 {
    padding-right: 24px;
  }

  /* СЕКЦИЯ 06: восстанавливаем правый отступ у текст-колонки
     (глобально обнулён для десктопа, на iPad landscape это выглядит как обрезка) */
  .container-grid.container-16 {
    padding-right: 24px !important;
  }

  /* HERO: iOS Safari не поддерживает background-attachment:fixed —
     картинка пропадает в landscape на iPad (1024px ≥ 1000px → этот блок).
     Дублируем фикс из планшетного блока. */
  .container-grid.container-fluid.heading-highlight {
    background-attachment: scroll;
  }

  /* СЕКЦИЯ 02 (ЯЗЫКИ): main.css при ≥992px выставляет offer-section
     background-attachment:fixed,fixed — iOS Safari это не поддерживает → блюр.
     iPad landscape (1024px) попадает сюда; iPhone landscape (~667-812px) <992px,
     поэтому у него работало и без фикса. Переключаем на scroll. */
  .container-grid.offer-section {
    background-attachment: scroll;
    min-height: 350px;
  }
}

/* =========================================
   RESPONSIVE — ПЛАНШЕТ & МОБИЛКА
   Планшет : 600–999px
   Мобилка : ≤ 599px
   Десктоп ≥ 1000px — без изменений
   ========================================= */

/* --- Мобильный логотип в nav (скрыт на десктопе) --- */
/* Flex-контейнер: три части — KETHER / алеф / TRANSLATIONS */
.mob-nav-logo {
  display: none;
  flex: 1;
  align-items: center;
  gap: 5px;
  align-self: center;
  padding-left: 16px;
  white-space: nowrap;
  overflow: hidden;
}
/* Слова KETHER и TRANSLATIONS — Signika 700, как в hero */
.mob-logo-word {
  font-family: 'Signika', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.05em;
  color: #f2f2f2;
  line-height: 1;
}
/* Алеф — масштаб ~2.5× от слов, как в hero (187/75).
   translateY(-3px): пропорционально hero (-17px при 187px → -3px при 34px),
   чтобы алеф был на одной горизонтальной оси со словами. */
.mob-logo-aleph {
  font-family: Arial, sans-serif;
  font-weight: 600;
  font-size: 34px;
  line-height: 1;
  color: #ffffff;
  display: inline-block;
  transform: translateY(-3px) scaleX(1.08);
}
/* Старый класс золотого цвета — оставляем для совместимости, но не используем */
.mob-logo-gold { color: #c99a22; }

/* --- Бургер-кнопка (скрыта на десктопе) --- */
.burger-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 10px;
  margin-right: 6px;
  flex-shrink: 0;
  align-self: center;
}
.burger-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background: #f2f2f2;
  border-radius: 1px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.burger-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger-btn.open span:nth-child(2) { opacity: 0; }
.burger-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Мобильное выпадающее меню (скрыто по умолчанию) --- */
.mobile-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #2f2e2e;
  border-radius: 0 0 20px 20px;
  padding: 6px 24px 22px;
  flex-direction: column;
  border-top: 1px solid rgba(242,242,242,0.1);
  z-index: 10;
}
.mobile-menu.open { display: flex; }
.mobile-menu-links { display: flex; flex-direction: column; }
.mobile-menu .mob-nav-link {
  color: rgba(242,242,242,0.85);
  text-decoration: none;
  font-size: 14px;
  font-family: Roboto, sans-serif;
  font-weight: 400;
  padding: 11px 0;
  border-bottom: 1px solid rgba(242,242,242,0.07);
  letter-spacing: 0.05em;
}
.mobile-menu .mob-nav-link:last-child { border-bottom: none; }
.mobile-menu-langs {
  display: flex;
  gap: 10px;
  padding-top: 16px;
}
/* Языковые кружки внутри mobile-menu — показать поверх !important-скрытия */
.mobile-menu a.link-text.text-link-2 { display: inline-flex !important; }

/* ===== ПЛАНШЕТ: 600–999px ===== */
@media (max-width: 999px) {
  body { min-width: 0; }

  /* NAV: полная ширина, overflow visible для dropdown */
  .container-grid.container-24 {
    left: 0 !important;
    right: 0 !important;
    overflow: visible !important;
  }
  /* NAV-INNER: лого слева, бургер справа */
  #nav-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 70px;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Скрыть десктопные элементы */
  #nav-left, #nav-right { display: none !important; }
  a.link-text.text-link-2 { display: none !important; }
  /* Показать мобильные */
  .burger-btn { display: flex; }
  .mob-nav-logo { display: flex; }

  /* ЗАГОЛОВКИ СЕКЦИЙ: центровать, убрать боковые padding */
  h1.heading-5 {
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
  }
  h1.heading-1 {
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
  }
  /* Анимированные линии — скрыть */
  .h-line-wrap { display: none; }

  /* ЛОГОТИП HERO: плавно масштабируется по ширине планшета.
     7vw при 600px = 42px, при 999px = 70px — везде помещается без обрезки.
     Мобильный блок (≤599px) переопределяет на фиксированные 40px/105px. */
  h1.heading-2 {
    font-size: clamp(40px, 7vw, 70px);
  }
  h1 span.heading-text-14 {
    font-size: clamp(105px, 17.5vw, 175px);
  }

  /* HERO: чуть выше */
  .container-grid.container-fluid.heading-highlight {
    min-height: 65vw;
    padding-top: 9vw;
    padding-bottom: 9vw;
    /* iOS Safari не поддерживает background-attachment:fixed — картинка пропадает.
       Переключаем на scroll; на десктопе fixed остаётся (там этот блок не применяется). */
    background-attachment: scroll;
  }

  /* СЕКЦИЯ 02 (ЯЗЫКИ): min-height:700px из main.css при узкой планшетной колонке
     заставляет cover масштабировать картинку по высоте → сильный zoom.
     Уменьшаем высоту — cover переключается на масштаб по ширине → нормальный кадр. */
  .container-grid.offer-section {
    min-height: 350px;
  }

  /* УСЛУГИ: при стекировании карточек картинка предыдущей вплотную к заголовку следующей.
     padding-top даёт воздух сверху каждой карточки — как снизу (padding-bottom из мобильного блока). */
  .container-grid.container-20,
  .container-grid.container-21,
  .container-grid.container-22 {
    padding-top: 24px;
  }

  /* ЯЗЫКИ: немного меньше */
  .lang-step1, .lang-step2, .lang-step3, .lang-step4 { font-size: 2.2rem; }

  /* СЕКЦИЯ 04 (О ПЕРЕВОДАХ): центровать текст, убрать асимметричный margin-left: 60px */
  p.paragraph.paragraph-12 {
    margin: 20px auto;
    padding: 0 24px;
    text-align: center;
  }
  .container-grid.container-12 {
    padding: 24px 0;
  }

  /* СЕКЦИЯ 06 (О НАС): центровать текст при стекировании.
     paragraph-11 имеет margin-left:60px из main.css — перебиваем на auto с обеих сторон. */
  .container-grid.container-16 {
    text-align: center !important;
  }
  p.paragraph.paragraph-11 {
    margin: 20px auto;
    padding: 0 24px;
    max-width: 100%;
  }

  /* ПАРТНЁРЫ: сетка 3 колонки */
  #partners-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 0 20px;
    align-items: center;
  }
  .partner-tile {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 8px;
  }
  .partner-tile img {
    max-width: 100%;
    height: auto;
    max-height: 50px;
    object-fit: contain;
  }

  /* О НАС: стекировать на планшете */
  .container-grid.container-17 { flex-wrap: wrap; }
  .container-grid.container-14,
  .container-grid.container-16 {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ===== МОБИЛКА: ≤ 599px ===== */
@media (max-width: 599px) {
  /* HERO: предыдущий clamp (10.67vw) достигал максимума 40px уже при 375px —
     т.е. не масштабировался на реальных iPhone и лого вылезало за края.
     7.5vw при 375px = 28px, при 430px = 32px — помещается с запасом.
     При 533px+ clamp упирается в 40px, но это уже планшетная зона (≥600px
     перехватывает tablet-блок). */
  h1.heading-2 { font-size: clamp(22px, 7.5vw, 40px); gap: 4px; }
  h1 span.heading-text-14 { font-size: clamp(58px, 19.7vw, 105px); }
  p.paragraph.header-paragraph {
    font-size: 13px;
    padding: 0 20px;
    text-align: center;
  }
  .container-grid.container-fluid.heading-highlight {
    min-height: 80vw;
    padding-top: 12vw;
    padding-bottom: 12vw;
  }

  /* ЗАГОЛОВКИ */
  h1.heading-5 { padding-left: 16px; padding-right: 16px; }
  h1.heading-1 { padding-left: 16px; padding-right: 16px; }

  /* УСЛУГИ: отступы карточек */
  .container-grid.container-20,
  .container-grid.container-21,
  .container-grid.container-22 {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-bottom: 24px;
  }

  /* УСЛУГИ: заголовки карточек — страховка от длинных слов без пробелов
     (например SPETSIALISEERUMINE в ET-версии: 18 символов × 40px > ширина контейнера).
     heading-7 конкретно: уменьшаем размер чтобы слово вошло без переноса. */
  h1.heading-6, h1.heading-7, h1.heading-8 {
    overflow-wrap: break-word;
    word-break: break-word;
    text-align: center;
  }
  h1.heading-7 {
    font-size: clamp(20px, 7.5vw, 40px);
  }

  /* ЯЗЫКИ: убираем лесенку (margin-left/right: 20rem из main.css = 320px —
     на iPhone portrait это выбрасывает АНГЛИЙСКИЙ за правый край).
     Центруем все три слова. Анимация (translateY + opacity) остаётся — только margins меняем. */
  h1.lang-step1 { margin-left: auto; margin-right: auto; text-align: center; }
  h1.lang-step2 { margin-left: auto; margin-right: auto; text-align: center; }
  h1.lang-step3 { margin-left: auto; margin-right: auto; text-align: center; }
  .lang-step1, .lang-step2, .lang-step3, .lang-step4 { font-size: 1.8rem; }
  /* ЯЗЫКИ: воздух снизу раздела — padding-bottom: 0 из main.css → текст
     вплотную к краю фона. */
  .container-grid.offer-section { padding-bottom: 40px; }
  .container-grid.container-3 { padding: 0 16px; }

  /* ЦЕНЫ: убрать пустые боковые колонки */
  .container-grid.container-9,
  .container-grid.container-8 { display: none !important; }
  .container-grid.container-10 {
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box;
  }

  /* СЕКЦИЯ 04 (О ПЕРЕВОДАХ): фото-колонка схлопывается без высоты — даём min-height */
  .container-grid.container-11 {
    min-height: 220px;
  }

  /* СЕКЦИЯ 01 (УСЛУГИ): карточки имеют padding:16px для текста, но картинки
     должны быть от края до края — компенсируем отрицательными margin */
  div.responsive-picture.picture-2,
  div.responsive-picture.picture-3,
  div.responsive-picture.picture-4 {
    margin-left: -16px;
    margin-right: -16px;
    width: calc(100% + 32px);
  }

  /* СЕКЦИЯ 06 (О НАС): центровать текст на мобиле */
  .container-grid.container-16 {
    text-align: center !important;
  }
  p.paragraph.paragraph-11 {
    margin: 20px auto;
    padding: 0 16px;
    max-width: 100%;
  }

  /* ПАРТНЁРЫ: компактнее */
  #partners-grid { gap: 10px; padding: 0 10px; }
  .partner-tile { padding: 6px; }
  .partner-tile img { max-height: 36px; }

  /* О НАС: полная ширина.
     Зазоры могут идти от container-13 / container-17 / container-14 —
     обнуляем всю цепочку предков фото.
     Текст-колонка (container-16) получает отступы отдельно. */
  .container-grid.container-13 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .container-grid.container-17 {
    flex-direction: column;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .container-grid.container-14 {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Резервный трюк: picture-1 вылезает на любые остаточные отступы */
  div.responsive-picture.picture-1 {
    margin-left: -20px;
    margin-right: -20px;
    width: calc(100% + 40px);
    overflow: hidden;
  }
  .container-grid.container-16 {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* СЕКЦИЯ 01: убираем градиент — на мобиле стек карточек короче и тёмный
     низ градиента вылезает полосой под последней картинкой */
  .container-grid.container-19 {
    background-image: none;
  }

  /* Уменьшить амплитуду анимаций на мобиле */
  #p1, #p4, #p7 { transform: translateX(-25px); }
  #p3, #p6, #p9 { transform: translateX(25px); }
  .paragraph.paragraph-2 { transform: translateX(25px); }
  h1.heading-14 { transform: translateX(25px); }
  h1.heading-17 { transform: translateX(-25px); }
}