/* =============================================
   АДАПТИВНЫЕ СТИЛИ
   Брейкпоинты:
   - Mobile:    < 640px
   - Tablet:    640px — 1023px
   - Desktop:   1024px — 1439px
   - Wide:      1440px+
   ============================================= */

/* --- Tablet (640px+) --- */
@media (min-width: 640px) {
  :root {
    --container-padding: var(--space-10);
  }
}

/* --- Desktop (1024px+) --- */
@media (min-width: 1024px) {
  :root {
    --container-padding: var(--space-12);
  }
}

/* --- Wide (1440px+) --- */
@media (min-width: 1440px) {
  :root {
    --container-padding: var(--space-16);
  }
}

/* ===========================================
   HEADER — Responsive
   =========================================== */

/* Tablet & smaller: burger menu */
@media (max-width: 1279px) {
  .header {
    padding: clamp(12px, 2.5vh, 16px) clamp(16px, 2.5vw, 20px) 0;
  }

  .header__inner {
    padding: 0 clamp(16px, 2.5vw, 20px);
    height: clamp(48px, min(5.5vw, 8vh), 56px);
  }

  .header__nav-list {
    gap: clamp(16px, min(2.2vw, 4vh), 28px);
  }

  .header__nav-link {
    font-size: clamp(14px, min(1.25vw, 2.3vh), 16px);
    line-height: clamp(20px, min(1.72vw, 3.1vh), 22px);
  }

  .header__sout {
    font-size: clamp(14px, min(1.25vw, 2.3vh), 16px);
  }

  /* Scrolled header on tablet */
  .header--scrolled {
    padding: 0;
  }

  .header--scrolled .header__inner {
    height: clamp(44px, min(4.9vw, 7.1vh), 50px);
    padding: 0 clamp(16px, 2.5vw, 20px);
  }
}

@media (max-width: 1023px) {
  .header {
    padding: clamp(8px, 1.8vh, 12px) clamp(12px, 2vw, 16px) 0;
  }

  .header__burger {
    display: flex;
    margin-left: auto;
    width: 22px;
    height: 22px;
    gap: 4px;
  }

  /* Смещение при превращении в крестик подогнано под новый размер:
     контейнер 22, stack из 3×2px + 2×4px = 14, верхний паддинг (22-14)/2 = 4
     → центр span 1 = 5, центр span 2 = 11, сдвиг 6px */
  .header__burger.is-active span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .header__burger.is-active span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  /* Когда меню открыто — убираем backdrop-filter с .header__inner.
     Иначе он: (1) создаёт stacking context, в котором z-index панели замкнут;
     (2) в Chrome становится containing block для position: fixed потомков,
     из-за чего overlay не растягивается на viewport. */
  .header.is-menu-open .header__inner {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Затемнённый фон за панелью — на .header (её stacking context),
     под .header__nav (99). */
  .header::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 98;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }

  .header.is-menu-open::before {
    opacity: 1;
    pointer-events: auto;
    touch-action: none;
  }

  /* Правая панель */
  .header__nav {
    position: fixed;
    top: 12px;
    right: 12px;
    left: auto;
    width: clamp(240px, 50vw, 320px);
    height: auto;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    background: #fff;
    border-radius: 16px;
    padding: clamp(56px, 9vh, 72px) clamp(24px, 4vw, 36px) clamp(24px, 4vh, 36px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    transform: translateX(calc(100% + 12px));
    visibility: hidden;
    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), visibility 0.3s;
    z-index: 99;
  }

  .header__nav.is-open {
    transform: translateX(0);
    visibility: visible;
    z-index: 99;
    overscroll-behavior: contain;
  }

  /* Вертикальный список с разделителями одной длины */
  .header__nav-list {
    flex-direction: column;
    align-items: stretch;       /* пункты на всю ширину панели */
    gap: 0;
    text-align: left;
    width: 100%;
  }

  .header__nav-list li {
    border-bottom: none;
    position: relative;
    width: 100%;
  }

  /* Разделители одной длины — тонкая сплошная линия во всю ширину */
  .header__nav-list li:not(:last-child)::after {
    content: '';
    display: block;
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  }

  .header__nav-link {
    display: block;
    width: 100%;
    padding: clamp(12px, 2vh, 18px) 0;
    font-size: clamp(14px, min(2vw, 2.8vh), 18px);
    font-weight: 600;
    line-height: 1.3;
    color: #2a2a2a;
    letter-spacing: 0.02em;
    text-align: left;
  }

  /* На мобилке СОУТ-пункт бургер-меню виден, отдельная кнопка — скрыта */
  .header__sout {
    display: none;
  }

  .header__nav-item--mobile-only {
    display: list-item;
  }

  /* Кнопка темы — скрыта в навбаре, видна только в бургер-панели */
  .header__theme-toggle,
  .header__language-toggle {
    display: none;
  }

  .header__nav.is-open ~ .header__theme-toggle,
  .header__nav.is-open ~ .header__language-toggle {
    display: flex;
    position: fixed;
    top: 24px;
    right: calc(clamp(240px, 50vw, 320px) - 36px);
    z-index: 100;
    margin: 0;
    /* Убираем серый кружок — оставляем только иконку */
    background: transparent;
    border: none;
    box-shadow: none;
  }

  .header__nav.is-open ~ .header__language-toggle {
    right: calc(clamp(240px, 50vw, 320px) - 112px);
  }

  .header__nav.is-open ~ .header__theme-toggle:hover,
  .header__nav.is-open ~ .header__language-toggle:hover {
    background: transparent;
  }

  /* Бургер/крестик — поверх панели */
  .header__burger {
    z-index: 100;
  }

  .header__burger.is-active {
    position: fixed;
    top: 20px;
    right: 24px;
  }

  /* Scrolled header on mobile */
  .header--scrolled {
    padding: 0;
  }

  .header--scrolled .header__inner {
    height: clamp(42px, 7vh, 48px);
    padding: 0 clamp(12px, 2vw, 16px);
  }

  /* Показать СОУТ в мобильном меню — добавлен в nav-list через JS */
}

/* ===========================================
   HERO — Responsive
   =========================================== */

@media (max-width: 1279px) {
  .hero {
    --hero-white-strip: 0px;
  }

  .hero__content {
    padding: 0 40px 0;
  }

  .hero:not(.vacancies-hero) .hero__tagline {
    /* font-size/line-height — base clamp handles scaling */
    margin-bottom: clamp(-214px, -17vw, -156px);
  }
}

@media (max-width: 1023px) {
  .hero {
    --hero-white-strip: 0px;
  }

  .hero__content {
    padding: 0 24px 0;
  }

  .hero:not(.vacancies-hero) .hero__tagline {
    /* font-size/line-height — base clamp handles scaling */
    margin-bottom: clamp(-174px, -17vw, -156px);
  }

  .hero__logo-icon {
    width: clamp(40px, 10vw, 80px);
  }
}

@media (max-width: 767px) {
  .hero__bottom {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding-bottom: clamp(24px, 6vh, 44px);
  }

  .hero__logo-title {
    margin-bottom: 0;
  }

  .hero__logo-svg {
    width: clamp(260px, 82vw, 420px);
  }

  .hero:not(.vacancies-hero) .hero__tagline {
    margin-bottom: clamp(18px, 4.5vh, 32px);
  }
}

@media (max-width: 639px) {
  .header {
    padding: 8px clamp(8px, 1.9vw, 12px) 0;
    transition: none;
  }

  .header__inner {
    height: 48px;
    padding: 0 clamp(12px, 2.5vw, 16px);
    border-radius: 10px;
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  }

  .header--scrolled .header__inner {
    height: 48px;
    padding: 0 clamp(12px, 2.5vw, 16px);
    border-radius: 10px;
  }

  .header__logo svg {
    width: clamp(28px, 8.8vw, 33px);
    height: clamp(36px, 11.2vw, 42px);
  }

  .header__nav-link {
    font-size: var(--mobile-body);
    line-height: var(--mobile-body-line);
    letter-spacing: 0;
  }

  .hero {
    --hero-white-strip: 0px;
    min-height: calc(var(--app-stable-vh) * 100);
  }

  .hero__content {
    min-height: calc(var(--app-stable-vh) * 100);
    padding: 0 16px 0;
  }

  .hero:not(.vacancies-hero) .hero__tagline {
    font-size: clamp(15px, 4.45vw, 18px);
    line-height: 1.3;
    margin-bottom: clamp(16px, 7vw, 28px);
  }

  .hero__bottom {
    padding-bottom: clamp(22px, 9vw, 36px);
  }

  .hero__logo-svg {
    width: clamp(250px, 84vw, 340px);
  }

}

/* ===========================================
   GENERIC — Responsive
   =========================================== */

/* --- Mobile overrides (max 639px) --- */
@media (max-width: 639px) {
  .heading-1 {
    font-size: var(--mobile-title);
    line-height: var(--mobile-title-line);
  }

  .heading-2 {
    font-size: var(--mobile-title);
    line-height: var(--mobile-title-line);
  }

  .heading-3 {
    font-size: var(--mobile-subtitle);
    line-height: var(--mobile-subtitle-line);
  }

  .section {
    padding-block: var(--space-12);
  }

  .section__title {
    margin-bottom: var(--space-8);
  }
}

/* --- Tablet overrides (640–1023px) --- */
@media (min-width: 640px) and (max-width: 1023px) {
  .heading-1 {
    font-size: var(--text-5xl);
  }

  .heading-2 {
    font-size: var(--text-4xl);
  }

  .section {
    padding-block: var(--space-16);
  }
}


/* ===========================================
   ABOUT — Responsive
   =========================================== */
@media (max-width: 1279px) {
  .about {
    padding: clamp(56px, 8vh, 76px) var(--page-gutter);
  }
}

@media (max-width: 1023px) {
  .about {
    padding: clamp(48px, 7vh, 64px) var(--page-gutter);
  }

  .about__mission {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: clamp(16px, 2.5vw, 32px);
  }

  .about__mission-title-block {
    grid-row: 1;
    grid-column: 1;
  }

  .about__mission-values {
    grid-row: 2;
    grid-column: 1;
  }

  .about__mission-geo {
    grid-row: 1;
    grid-column: 2;
    align-self: center;
    justify-self: end;
  }

  .about__mission-title {
    font-size: clamp(28px, 5vw, 45px);
    line-height: 1.1;
  }

  .about__mission-values-text,
  .about__mission-geo-text {
    font-size: clamp(14px, 2vw, 22px);
  }
}

@media (max-width: 639px) {
  .about {
    padding: clamp(36px, 10vw, 48px) var(--page-gutter);
  }

  .about__mission {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 0;
  }

  .about__mission-title-block {
    grid-row: 1;
    grid-column: 1;
  }

  .about__mission-values {
    grid-row: 2;
    grid-column: 1;
    align-self: start;
    justify-self: start;
    border-left: 0;
    padding-left: 0;
    margin-left: 0;
  }

  .about__mission-geo {
    grid-row: 3;
    grid-column: 1 / -1;
    justify-self: unset;
    margin-top: 16px;
    padding-top: 0;
    border-top: 0;
  }

  .about__mission-title {
    font-size: clamp(25px, 7vw, 30px);
    line-height: 1.02;
  }

  .about__mission-values-text,
  .about__mission-geo-text {
    font-size: clamp(13px, 3.75vw, 15px);
    line-height: 1.28;
  }

  .about__mission-geo-light br {
    display: none;
  }

  .about__map {
    margin: 0 auto 28px;
    width: min(100%, 332px);
  }

  /* Описание компании — на мобилке расширяем во всю ширину
     контейнера секции, чтобы занимал всю полезную ширину экрана. */
  .about__description {
    max-width: 100%;
  }

  /* Лейблы на карте — чуть мельче, чтобы «СЕВЕРО-КАСПИЙСКИЙ РЕГИОН»
     не накладывался на красную область (на мобилке карта очень
     маленькая, а шрифт упирался в min 10px — для 375px этого много). */
  .about__map-label-text {
    font-size: clamp(7.5px, 2.08vw, 8.5px);
    line-height: 0.98;
  }

  .about__map-city-marker {
    width: 8px;
    height: 8px;
  }

  .about__map-city-text {
    font-size: clamp(7px, 1.98vw, 8px);
    line-height: 1;
  }

  .about__map-label {
    display: none;
  }

  .about__map-label--siberia {
    top: 54.5%;
  }

  .about__map-label--caspian {
    left: 14.45%;
    top: 90.25%;
  }

  .about__map-city--astrakhan {
    left: 13.25%;
    top: 85.95%;
  }

  .about__map-city--astrakhan .about__map-city-text {
    top: calc(100% + 4px);
    transform: none;
  }
}


/* ===========================================
   MEANING — Responsive
   =========================================== */
@media (min-width: 1024px) and (max-width: 1599px) {
  .meaning__inner {
    grid-template-columns: minmax(360px, 0.95fr) minmax(520px, 1.05fr);
    gap: clamp(22px, 2.4vw, 40px);
  }

  .meaning__content {
    flex: 0 1 610px;
  }

  .meaning__texts,
  .meaning__text--narrow {
    max-width: 560px;
  }

  .meaning__text--wide {
    max-width: 520px;
  }

  .meaning__logo {
    min-width: 0;
    gap: clamp(16px, 1.8vw, 28px);
  }

  .meaning__logo-note {
    flex-basis: clamp(250px, 20vw, 320px);
    margin-top: clamp(-6px, 0.6vw, 12px);
    padding: clamp(14px, 1.1vw, 18px);
  }

  svg.meaning__logo-svg {
    width: clamp(300px, min(29vw, 47vh), 460px);
    transform: translateZ(0);
  }

  .meaning__logo:hover svg.meaning__logo-svg,
  .meaning__logo:focus-visible svg.meaning__logo-svg,
  .meaning__logo--open svg.meaning__logo-svg {
    transform: translateY(-8px) rotateY(-10deg) rotateX(4deg) scale(1.05);
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .meaning__inner {
    grid-template-columns: minmax(300px, 0.9fr) minmax(420px, 1.1fr);
  }

  .meaning__logo {
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
  }

  .meaning__logo-note {
    flex-basis: clamp(210px, 20vw, 230px);
  }

  svg.meaning__logo-svg {
    width: clamp(260px, min(28vw, 42vh), 310px);
  }

  .meaning__logo-note-title {
    font-size: clamp(16px, 1.45vw, 18px);
  }

  .meaning__logo-note-text {
    font-size: clamp(12px, 1.05vw, 14px);
  }
}

@media (max-width: 1023px) {
  .meaning {
    padding-top: clamp(36px, 7vh, 56px);
  }

  .meaning__inner {
    display: block;
  }

  .meaning__content {
    max-width: 100%;
    padding-left: 0;
    margin-top: 0;
    margin-bottom: clamp(36px, 7vh, 56px);
  }

  .meaning__title {
    font-size: var(--section-title-size);
    line-height: var(--section-title-line);
    margin-bottom: clamp(36px, 6vh, 52px);
  }

  .meaning__logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(14px, 3vw, 24px);
    margin-top: clamp(28px, 5vw, 44px);
  }

  svg.meaning__logo-svg {
    width: clamp(230px, 42vw, 360px);
    margin-bottom: clamp(-66px, -4.6vw, -28px);
  }

  .meaning__logo-note {
    display: none;
    flex: 0 1 auto;
    width: min(100%, 420px);
    margin-top: clamp(28px, 5vw, 44px);
    opacity: 1;
    transform: none;
    filter: none;
    pointer-events: auto;
  }

  .meaning__logo--open .meaning__logo-note {
    display: block;
  }

  @media (hover: none), (pointer: coarse) {
    .meaning__logo:not(.meaning__logo--open):hover svg.meaning__logo-svg,
    .meaning__logo:not(.meaning__logo--open):focus-visible svg.meaning__logo-svg {
      transform: translateZ(0);
      filter: drop-shadow(0 0 0 rgba(224, 47, 18, 0));
    }

    .meaning__logo.meaning__logo--open svg.meaning__logo-svg {
      transform: translateY(-8px) rotateY(-10deg) rotateX(4deg) scale(1.075);
      filter:
        drop-shadow(18px 20px 0 rgba(122, 24, 10, 0.18))
        drop-shadow(0 28px 32px rgba(53, 53, 53, 0.2));
    }
  }
}

@media (max-width: 639px) {
  .meaning {
    padding: clamp(40px, 12vw, 48px) var(--page-gutter);
  }

  .meaning__title {
    font-size: clamp(25px, 6.75vw, 29px);
    line-height: 1.12;
    margin-bottom: clamp(36px, 14vw, 52px);
  }

  .meaning__content {
    margin-bottom: clamp(24px, 8vw, 36px);
    padding-bottom: 0;
  }

  .meaning__text {
    font-size: var(--mobile-body-lg);
    line-height: var(--mobile-body-line);
  }

  svg.meaning__logo-svg {
    width: clamp(152px, 47.5vw, 228px);
    margin-bottom: clamp(-22px, -2vw, -8px);
  }

  .meaning__logo-note {
    margin-top: clamp(30px, 8vw, 42px);
    padding: 14px 16px;
  }

  .meaning__logo-note-title {
    font-size: var(--mobile-body-lg);
  }

  .meaning__logo-note-text {
    font-size: var(--mobile-body);
    line-height: var(--mobile-body-line);
  }
}


/* ===========================================
   CONTACT — Responsive
   =========================================== */
@media (max-width: 1279px) {
  .contact__cards {
    gap: 16px;
  }

  .contact__form-section {
    gap: clamp(24px, 3vw, 48px);
  }

  .contact__submit-btn {
    width: clamp(180px, 15vw, 260px);
    height: clamp(44px, 3.5vw, 60px);
    font-size: clamp(15px, 1.4vw, 22px);
  }
}

@media (max-width: 1023px) {
  .contact__cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .contact-card {
    padding: clamp(16px, 2.5vw, 24px);
  }

  .contact__form-section {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }

  .contact__form-title {
    text-align: left;
    white-space: normal;
  }

  .contact__form-intro {
    flex: none;
    min-height: 0;
    padding-bottom: 0;
    gap: 14px;
  }

  .contact__form {
    width: 100%;
    max-width: none;
    margin-left: 0;
  }
}

@media (max-width: 639px) {
  .contact {
    padding: calc(104px + env(safe-area-inset-top, 0px)) var(--page-gutter) 48px;
    scroll-margin-top: 80px;
  }

  .contact__header {
    margin-bottom: 22px;
  }

  .contact__title {
    font-size: var(--section-title-size);
    line-height: var(--section-title-line);
  }

  .contact__cards {
    gap: 12px;
    margin-bottom: 36px;
  }

  .contact-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    align-items: start;
    gap: 12px;
    min-height: 136px;
    padding: 16px;
    border-radius: 10px;
    box-shadow: none;
    overflow: hidden;
  }

  .contact-card__title {
    font-size: var(--mobile-body-lg);
    line-height: 1.12;
    margin-bottom: 8px;
  }

  .contact-card__desc {
    font-size: var(--mobile-body);
    line-height: var(--mobile-body-line);
    margin-bottom: 12px;
  }

  .contact-card__email-line {
    white-space: normal;
    overflow-wrap: anywhere;
    padding-top: 11px;
    font-size: var(--mobile-small);
    line-height: var(--mobile-small-line);
  }

  .contact-card__email-line::before {
    width: 32px;
    height: 2px;
  }

  .contact-card__icon {
    position: static;
    justify-self: end;
    align-self: end;
    width: calc(var(--contact-icon-size, 48px) * 0.85);
    height: calc(var(--contact-icon-size, 48px) * 0.85);
    transform: none;
  }

  .contact__form-section {
    padding: 16px;
    border-top: 0;
    border-radius: 10px;
    gap: 18px;
  }

  .contact__form-text {
    font-size: var(--mobile-body);
    line-height: var(--mobile-body-line);
  }

  .contact__form-text br {
    display: none;
  }

  .contact__form-title {
    font-size: var(--section-title-size);
    line-height: var(--section-title-line);
    text-align: left;
  }

  .contact__form {
    gap: 12px;
  }

  .contact__row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .contact__input,
  .contact__textarea {
    min-height: 40px;
    padding: 9px 14px;
    font-size: var(--mobile-body);
    line-height: var(--mobile-body-line);
    border-radius: 8px;
  }

  .contact__textarea {
    height: 78px;
    min-height: 78px;
  }

  .contact__textarea-wrap textarea {
    padding-bottom: 24px;
  }

  .contact__textarea-wrap::after {
    width: 24px;
    height: 24px;
  }

  .contact__checkbox-label {
    gap: 10px;
    margin-top: 2px;
  }

  .contact__checkbox {
    width: 18px;
    height: 18px;
    margin-top: 1px;
  }

  .contact__checkbox-text {
    font-size: var(--mobile-small);
    line-height: 1.32;
  }

  .contact__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 8px;
  }

  .contact__submit-btn {
    align-self: stretch;
    width: 100%;
    height: 48px;
    font-size: var(--mobile-body);
    line-height: 1;
    letter-spacing: 0;
    border-radius: 8px;
  }

  .contact__submit-btn img {
    width: 22px;
    height: 22px;
  }

  .contact__notice {
    width: 100%;
    min-height: 42px;
    padding: 10px 14px 10px 40px;
    font-size: var(--mobile-small);
    line-height: 1.28;
    box-shadow: none;
  }

  .contact__notice::before {
    left: 14px;
    width: 16px;
    height: 16px;
  }

  .contact__notice::after {
    left: 19px;
    width: 7px;
    height: 4px;
  }
}


/* ===========================================
   BLOG — Responsive
   =========================================== */
@media (max-width: 1279px) {
  .blog__card {
    flex: 0 0 clamp(170px, 20.8vw, 284px);
  }
}

@media (max-width: 639px) {
  .blog {
    /* 40px сверху — заголовок «НОВОСТНОЙ БЛОГ» получает минимум
       воздуха от низа предыдущей секции (у контакта и так 60px
       под кнопкой ОТПРАВИТЬ, итоговый межсекционный разрыв ~76px). */
    padding: 20px 0 24px;
  }

  /* Отступ между заголовком и каруселью */
  .blog__title {
    font-size: var(--section-title-size);
    line-height: var(--section-title-line);
    margin-bottom: 0;
  }

  .blog__viewport {
    min-height: clamp(388px, 108vw, 480px);
    margin-top: 22px;
    margin-bottom: 24px;
    transform: none;
  }

  .blog__slide {
    flex-basis: clamp(214px, 60vw, 256px);
    padding: 0 5px;
  }

  .blog__card {
    border-radius: 14px;
  }

  .blog__card-bottom {
    padding: 16px;
    gap: 9px;
  }

  .blog__card-title {
    font-size: clamp(15px, 4.4vw, 18px);
    line-height: 1.14;
  }

  .blog__card-btn {
    font-size: clamp(12px, 3.4vw, 14px);
    line-height: 1.1;
    gap: 4px;
  }

  .blog__card-btn-icon {
    width: 16px;
    height: 16px;
    margin-left: -1px;
  }

  .blog__card-illustration {
    padding: 12px;
  }

  .blog__card-illustration--photo img.blog__photo-icon {
    width: 28px;
    max-width: 28px;
    height: 28px;
  }

  .blog__arrow {
    top: calc(var(--section-title-size) * -0.55);
    width: 28px;
    height: 28px;
  }

  .blog__card--pos-near .blog__card-illustration {
    display: flex;
  }

  .blog__card--pos-near .blog__card-bottom {
    display: flex;
  }

  /* ---- Мыльные крайние карточки на мобилке ----
     На мобилке в карусели видны только 3 карточки подряд: центр
     и два её соседа (pos-near). Далёкие (pos-far) уезжают за край
     экрана. Чтобы крайние видимые карты (которые обрезаются краем
     вьюпорта) выглядели так же, как 1-я и 5-я на десктопе — то есть
     как градиент-«туман», — применяем к pos-near то же поведение,
     что и к pos-far: прячем контент и рисуем градиент. */
  .blog__card--pos-near .blog__card-illustration,
  .blog__card--pos-near .blog__card-bottom {
    display: flex;
  }

  /* У pos-near нет модификатора -left/-right, но карты всегда идут
     в фиксированном порядке внутри .blog__track: 1 far-left,
     2 near-left, 3 center, 4 near-right, 5 far-right. Используем
     nth-child, чтобы направить градиент в нужную сторону. */

  /* Gray */
  .blog__track .blog__card--gray.blog__card--pos-near:nth-child(2) {
    background: linear-gradient(to right, #1a1a1a 0%, #4a4a4a 35%, #9F9F9F 100%);
  }
  .blog__track .blog__card--gray.blog__card--pos-near:nth-child(4) {
    background: linear-gradient(to left, #1a1a1a 0%, #4a4a4a 35%, #9F9F9F 100%);
  }

  /* Red */
  .blog__track .blog__card--red.blog__card--pos-near:nth-child(2) {
    background: linear-gradient(to right, #2a0803 0%, #7a1a0a 35%, #EC3F22 100%);
  }
  .blog__track .blog__card--red.blog__card--pos-near:nth-child(4) {
    background: linear-gradient(to left, #2a0803 0%, #7a1a0a 35%, #EC3F22 100%);
  }

  /* White */
  .blog__track .blog__card--white.blog__card--pos-near:nth-child(2) {
    background: linear-gradient(to right, #8a8a8a 0%, #c0c0c0 35%, #F7F7F7 100%);
  }
  .blog__track .blog__card--white.blog__card--pos-near:nth-child(4) {
    background: linear-gradient(to left, #8a8a8a 0%, #c0c0c0 35%, #F7F7F7 100%);
  }

  .blog__track .blog__card--gray.blog__card--pos-near {
    background: #9F9F9F;
  }

  .blog__track .blog__card--red.blog__card--pos-near {
    background: #EC3F22;
  }

  .blog__track .blog__card--white.blog__card--pos-near {
    background: #F7F7F7;
  }

  .blog__track .blog__card--pos-near:nth-child(2)::after {
    background: linear-gradient(to right, rgba(26, 26, 26, 0.28), rgba(26, 26, 26, 0.08) 58%, rgba(26, 26, 26, 0));
  }

  .blog__track .blog__card--pos-near:nth-child(4)::after {
    background: linear-gradient(to left, rgba(26, 26, 26, 0.28), rgba(26, 26, 26, 0.08) 58%, rgba(26, 26, 26, 0));
  }

  .blog__track .blog__card--pos-near .blog__card-illustration {
    display: flex;
  }

  .blog__track .blog__card--pos-near .blog__card-bottom {
    display: flex;
  }

  .blog__track .blog__card--pos-near-left::after {
    background: linear-gradient(to right, rgba(26, 26, 26, 0.24), rgba(26, 26, 26, 0.07) 58%, rgba(26, 26, 26, 0));
  }

  .blog__track .blog__card--pos-near-right::after {
    background: linear-gradient(to left, rgba(26, 26, 26, 0.24), rgba(26, 26, 26, 0.07) 58%, rgba(26, 26, 26, 0));
  }
}


/* ===========================================
   FOOTER — Responsive
   =========================================== */
@media (max-width: 1279px) {
  .footer__inner {
    padding: 48px 40px 32px;
  }

  .footer__nav-link {
    font-size: 1.25rem;
    line-height: 1.5rem;
  }

  .footer__address {
    font-size: 1.25rem;
    line-height: 1.5rem;
  }

  .footer__phone {
    font-size: 1.75rem;
  }

  .footer__bottom {
    margin: 0 40px;
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .footer--ru .footer__bottom {
    grid-template-columns: 1fr;
  }

  .footer__legal {
    justify-content: center;
  }

  .footer--ru .footer__legal {
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (max-width: 1023px) {
  .footer__inner {
    padding: 40px 24px 32px;
    flex-wrap: wrap;
  }

  /* footer__brand scales via base clamp — no overrides needed */

  .footer__nav-link {
    font-size: 1rem;
    line-height: 1.25rem;
  }

  .footer__address {
    font-size: 1rem;
    line-height: 1.25rem;
  }

  .footer__phone {
    font-size: 1.5rem;
  }

  .footer__bottom {
    margin: 0 24px;
    gap: 12px;
  }
}

@media (max-width: 639px) {
  /* 2-колоночная сетка: слева — кнопки (внизу, в 2 ряда), справа — nav + контакты */
  .footer__inner {
    padding: 32px 16px 32px;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "actions info"
      "brand   info";
    gap: 16px 20px;
    align-items: start;
    flex-direction: initial;      /* сброс старого column */
  }

  .footer__info {
    grid-area: info;
    align-items: flex-end;
    text-align: right;
    gap: 16px;
  }

  .footer__nav {
    align-items: flex-end;
    border-right: 1px solid #353535;
    border-left: none;
    padding-right: 16px;
    padding-left: 0;
    gap: 7px;
    margin-top: 24px;
    margin-bottom: 12px;
  }

  .footer__address {
    text-align: right;
  }

  .footer__contacts {
    align-items: flex-end;
    gap: 6px;
  }

  .footer__brand {
    grid-area: brand;
    position: static;
    align-self: end;
    justify-self: start;
    transform: translateY(-6px);
    opacity: 0.42;
  }

  .footer__brand-svg {
    width: clamp(156px, 45vw, 224px);
    height: auto;
  }

  /* Кнопка наверх выровнена по верхнему краю nav.
     .footer__nav имеет margin-top: 2rem — повторяем, чтобы кнопка
     была на одной горизонтали с первой ссылкой nav. */
  .footer__actions {
    grid-area: actions;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 10px;
    margin-top: 24px;             /* совпадает с margin-top у .footer__nav */
    align-self: start;
  }

  .footer__nav-link {
    font-size: clamp(14px, 4vw, 16px);
    line-height: 1.28;
  }

  .footer__address {
    font-size: clamp(14px, 4vw, 16px);
    line-height: 1.28;
  }

  .footer__phone {
    font-size: clamp(18px, 5.1vw, 21px);
    line-height: 1.12;
    white-space: nowrap;
  }

  .footer__bottom {
    margin: 0 16px;
    padding: 18px 0 22px;
    gap: 0;
    justify-items: start;
    text-align: left;
    overflow: hidden;
  }

  .footer__copyright {
    order: 3;
    margin-top: 14px;
  }

  .footer--ru .footer__bottom {
    grid-template-columns: 1fr;
  }

  .footer__requisites {
    order: 1;
    width: 100%;
    gap: 0;
    justify-content: flex-start;
    margin-top: 10px;
  }

  .footer__requisites li {
    font-size: clamp(11px, 3vw, 12px);
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .footer__requisites li + li {
    position: relative;
    margin-left: 14px;
    padding-left: 15px;
  }

  .footer__requisites li + li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 12px;
    background: rgba(42, 42, 42, 0.26);
    transform: translateY(-50%);
  }

  .footer__legal {
    order: 2;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    margin-top: 10px;
  }

  .footer--ru .footer__legal {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  .footer__legal-link {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 14px;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(42, 42, 42, 0.1);
    color: rgba(42, 42, 42, 0.76);
    font-size: clamp(11px, 3vw, 12px);
    line-height: 1.24;
    white-space: normal;
    overflow-wrap: normal;
  }

  .footer--ru .footer__legal-link {
    white-space: normal;
  }

  .footer__legal-link:last-child {
    border-bottom: 0;
  }

  .footer__legal-icon {
    display: block;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: rgba(42, 42, 42, 0.72);
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .footer__legal-chevron {
    display: block;
    width: 14px;
    height: 14px;
    fill: none;
    stroke: rgba(42, 42, 42, 0.42);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .footer__legal-text {
    min-width: 0;
  }

}

/* Business directions responsive overrides */
@media (max-width: 1099px) {
  .services__inner {
    display: block;
    max-width: 746px;
  }

  .services__business-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .services__business-card-wrap--standard {
    grid-column: span 1;
    min-height: 274px;
  }

  .services__business-card-wrap--wide {
    grid-column: 1 / -1;
    min-height: 292px;
  }

  .services__business-card {
    min-height: 100%;
  }

  .services__title {
    text-align: left;
    font-family: var(--font-primary);
    font-weight: var(--font-weight-bold);
    font-size: var(--section-title-size);
    line-height: var(--section-title-line);
    margin-bottom: clamp(32px, min(4.8vw, 5vh), 76px);
  }

  .partners__inner,
  .achievements__inner {
    max-width: 746px;
  }

  .partners__heading,
  .achievements__heading {
    align-items: start;
    gap: 14px;
  }

  .achievements__grid {
    --achievements-gap: 13px;
    grid-auto-columns: calc((100% - var(--achievements-gap)) / 2);
  }
}

@media (min-width: 768px) and (max-width: 1099px) {
  .services__business-card-wrap--equipment {
    grid-column: span 1;
    min-height: 274px;
  }

  .services__business-card--equipment.services__business-card--wide .services__business-content {
    width: min(100%, 64%);
  }

  .services__business-card--equipment .services__business-title {
    font-size: clamp(17px, 1.85vw, 20px);
    line-height: 1.03;
  }

  .services__business-card--equipment .services__business-backside {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .services__business-card--equipment .services__business-backside--corner .services__business-backcopy {
    align-self: start;
    justify-self: start;
    align-items: flex-start;
    justify-content: flex-start;
    padding-bottom: 0;
  }

  .services__business-card--equipment .services__business-media--repair {
    right: -44px;
    bottom: 10px;
    width: clamp(158px, 18.5vw, 198px);
  }
}

@media (max-width: 767px) {
  .services {
    padding: 48px var(--page-gutter) 56px;
  }

  .services__business-grid {
    grid-template-columns: 1fr;
  }

  .services__business-card-wrap,
  .services__business-card,
  .services__business-card-wrap--wide {
    min-height: 268px;
  }

  .services__business-card-wrap--standard,
  .services__business-card-wrap--wide {
    grid-column: 1 / -1;
  }

  .services__business-content,
  .services__business-card--wide .services__business-content,
  .services__business-card--accent .services__business-content {
    width: min(100%, 56%);
  }

  .services__business-content--back {
    width: min(100%, 52%);
  }

  .services__business-backside {
    grid-template-columns: minmax(0, 1fr) minmax(180px, 0.84fr);
  }

  .services__business-media--repair {
    width: clamp(213px, 44.2vw, 323px);
  }

  .services__business-media--pipe {
    width: clamp(196px, 40.8vw, 306px);
  }

  .partners {
    padding: 48px var(--page-gutter) 28px;
  }

  .achievements {
    padding: 28px var(--page-gutter) 36px;
  }

  .achievements__grid {
    --achievements-gap: 12px;
    grid-auto-columns: calc((100% - var(--achievements-gap)) / 2);
  }

  .achievements__nav {
    gap: 10px;
  }

  .achievements__arrow {
    width: 28px;
    height: 28px;
  }

  .achievements__card {
    width: 100%;
    min-width: 0;
    height: clamp(318px, 84vw, 352px);
    min-height: 0;
    padding: 10px;
    grid-template-rows: clamp(196px, 52vw, 218px) auto;
    align-content: start;
    gap: 10px;
  }

  .achievements__document {
    aspect-ratio: 0.72 / 1;
    width: 100%;
    height: 100%;
    padding: 10px;
    gap: 8px;
  }

  .achievements__year {
    font-size: var(--mobile-subtitle);
    line-height: var(--mobile-subtitle-line);
  }

  .achievements__type {
    font-size: var(--mobile-caption);
    line-height: var(--mobile-caption-line);
  }

  .achievements__content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: clamp(8px, 2.4vw, 10px);
    width: 100%;
    min-width: 0;
    min-height: 0;
  }

  .achievements__type,
  .achievements__name {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: normal;
  }

  .achievements__name {
    font-size: clamp(12px, 3.4vw, 14px);
    line-height: 1.08;
    text-transform: none;
    margin-top: 0;
  }

  .achievements__line {
    height: 1px;
  }
}

@media (max-width: 639px) {
  .services__inner {
    display: block;
  }

  .services__title {
    margin-top: 0;
    font-family: var(--font-primary);
    font-weight: var(--font-weight-bold);
    font-size: var(--section-title-size);
    line-height: var(--section-title-line);
    margin-bottom: var(--section-heading-margin);
  }

  .services__business-grid {
    display: grid;
  }

  .services__business-card-wrap,
  .services__business-card,
  .services__business-card-wrap--wide {
    min-height: 288px;
  }

  .services__business-card {
    padding: 18px;
  }

  .services__business-title {
    font-size: var(--mobile-subtitle);
    line-height: var(--mobile-subtitle-line);
  }

  .services__business-title--pipe {
    font-size: clamp(16px, 4.6vw, 18px);
    line-height: var(--mobile-subtitle-line);
  }

  .services__business-content,
  .services__business-card--wide .services__business-content,
  .services__business-card--accent .services__business-content {
    width: min(100%, 62%);
    gap: 9px;
  }

  .services__business-card--isolation .services__business-content {
    width: min(100%, 72%);
    gap: 8px;
  }

  .services__business-backside,
  .services__business-card--wide .services__business-backside {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .services__business-backside--top,
  .services__business-backside--corner {
    display: grid;
  }

  .services__business-content--back {
    width: min(100%, 62%);
  }

  .services__business-backcopy {
    padding-top: 0;
  }

  .services__business-backside--top .services__business-backcopy,
  .services__business-backside--corner .services__business-backcopy {
    width: 100%;
    justify-self: start;
    align-self: start;
    align-items: flex-start;
    justify-content: flex-start;
    padding-bottom: 0;
  }

  .services__business-backside--corner .services__business-link--back,
  .services__business-backside--top .services__business-link--back {
    grid-column: 1 / -1;
    align-self: start;
    justify-self: end;
    margin-top: 4px;
    left: 18px;
    bottom: 14px;
  }

  .services__business-desc {
    font-size: var(--mobile-small);
    line-height: var(--mobile-small-line);
  }

  .services__business-desc--front {
    max-width: min(100%, 210px);
    font-size: clamp(12px, 3.55vw, 14px);
    line-height: 1.32;
  }

  .services__business-card--isolation .services__business-desc--front {
    max-width: min(100%, 285px);
    line-height: 1.28;
  }

  .services__business-desc--back {
    font-size: var(--mobile-body);
    line-height: var(--mobile-body-line);
  }

  .services__business-link {
    font-size: var(--mobile-small);
    line-height: var(--mobile-small-line);
    gap: 4px;
    padding-right: 0;
  }

  .services__business-face--front .services__business-link {
    left: 18px;
    bottom: 14px;
  }

  .services__business-link .services__business-link-icon {
    width: 19px;
    height: 19px;
    margin-left: -2px;
  }

  .services__business-media--column {
    right: -10px;
    bottom: 4px;
    width: clamp(144px, 38vw, 196px);
  }

  .services__business-media--truck {
    right: -8px;
    width: clamp(160px, 42vw, 214px);
  }

  .services__business-media--nautical {
    right: -8px;
    bottom: 4px;
    width: clamp(154px, 40.5vw, 208px);
  }

  .services__business-media--repair {
    right: -6px;
    bottom: 10px;
    width: clamp(178px, 47.5vw, 254px);
  }

  .services__business-media--pipe {
    right: -12px;
    bottom: 14px;
    width: clamp(188px, 51.5vw, 272px);
  }

  .partners__lead {
    font-size: var(--section-lead-size);
    line-height: var(--section-lead-line);
    max-width: 100%;
  }

  .partners__carousel {
    --partners-slide-width: clamp(136px, 43vw, 180px);
  }

  .partners__slide {
    height: clamp(76px, 21vw, 96px);
    padding: 10px 12px;
  }

  .partners__slide--vpt,
  .partners__slide--meretoyakha {
    flex-basis: clamp(104px, 32vw, 142px);
    width: clamp(104px, 32vw, 142px);
  }

  .partners__carousel::before,
  .partners__carousel::after {
    width: clamp(12px, 4vw, 18px);
  }

  .partners__carousel .partners__logo--vpt,
  .partners__carousel .partners__logo--digital {
    transform: none;
  }

  .achievements__name {
    font-size: clamp(12px, 3.4vw, 14px);
    line-height: 1.08;
    margin-top: 0;
    text-transform: none;
  }

  .partners__logo--lukoil {
    max-width: min(72%, 210px);
  }
}

/* Low-height desktop windows: keep the 1920-wide composition, but reduce
   vertical pressure when browser chrome leaves less real viewport height. */
@media (min-width: 1280px) and (max-height: 860px) {
  .hero:not(.vacancies-hero) .hero__tagline {
    margin-bottom: clamp(-9.8em, -16vh, -8.2em);
  }

  .about {
    padding-top: clamp(48px, 6.6vh, 64px);
    padding-bottom: clamp(44px, 6.2vh, 64px);
  }

  .about__map {
    width: min(100%, 118vh);
    margin-top: clamp(-132px, -7vw, -42px);
    margin-bottom: clamp(48px, 6.4vh, 84px);
  }

  .meaning {
    padding-top: clamp(56px, 7.2vh, 72px);
  }

  .meaning__content {
    margin-top: clamp(36px, 5.2vh, 48px);
    margin-bottom: clamp(36px, 5.2vh, 48px);
  }

  .meaning__title {
    margin-bottom: clamp(42px, 6.4vh, 58px);
  }

  .services,
  .partners {
    padding-top: clamp(44px, 6.8vh, 76px);
  }

  .services {
    padding-bottom: clamp(52px, 7.2vh, 82px);
  }

  .services__business-card-wrap,
  .services__business-card {
    min-height: clamp(248px, 16.8vw, 322px);
  }

  .achievements {
    padding-bottom: clamp(52px, 7.2vh, 82px);
  }
}