/**
 * ============================================================================
 * ABOUT.CSS - Стили для страницы "О консорциуме"
 * ============================================================================
 * Версия: 1.0.0
 * Описание: Специфичные стили для страницы about.html
 * Автор: Senior Fullstack Developer
 * ============================================================================
 */

/* ===========================================
   ЗАГОЛОВОК "О КОНСОРЦИУМЕ" (стилизация как "Основные направления")
   =========================================== */
   .about-content { padding: 48px 0 80px; }

   .about-headline {
    width: 100%;
    display: flex;
    justify-content: left;
    align-items: center;
    background: transparent;
    padding-bottom: clamp(3rem, 5.5vw, 7.5rem);
  }

  .about-headline__wrap {
    width: 100%;
    max-width: 82.5em;
    height: 15em;
    position: relative;
  }

  .about-headline__title {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    color: #B4B4B4;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 900; /* Black */
    font-size: clamp(4rem, 9vw, 11rem);
    line-height: 1; /* 100% */
    letter-spacing: 0;
    text-transform: uppercase;
  }

/* ===========================================
   ВВОДНЫЙ ТЕКСТ
   =========================================== */
.about-intro {
  padding: clamp(0rem, 0vh, 2.5rem) 0 3.75rem 0;
}

.about-intro .grid-12 .span-10 {
  grid-column: span 12;

}

.about-intro__text {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 1.25em;
    line-height: 1.6;
    color: #1A2642;
    margin: 0 0 24px 0;
  }

.about-intro__text:last-child {
  margin-bottom: 0;
}

/* ===========================================
   ПОДЗАГОЛОВОК ВЫЗОВОВ
   =========================================== */
.about-challenges-header {
  padding: 20px 0 40px 0;
}

.about-challenges-header .grid-12 .span-7 {
  grid-column: span 8;
}


.about-challenges-header__title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 700;
    font-size: clamp(2.3rem, 2.6vw, 3.388rem);
    line-height: 1.2;
    color: #000;
    margin: 0;
  }

/* ===========================================
   БЛОК ВЫЗОВОВ С ИНТЕРАКТИВНОЙ ГАЛЕРЕЕЙ
   =========================================== */
.about-challenges {
    padding: 2.5em 0 5em 0;
}

.about-challenges__content {
    position: relative;
    padding-right: 2.5em;
    min-height: 100%;
  }

/* Фоновая цифра */
.about-challenges__number {
    position: absolute;
    left: -25px;
    bottom: 0px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 700;
    font-size: clamp(365px, 22vw, 450px);
    line-height: 0.7;
    color: rgba(247, 5, 24, 0.25); /* #F70518 с прозрачностью 25% */
    z-index: 1;
    user-select: none;
    pointer-events: none;
  }

/* Заголовок вызова */
.about-challenges__title {
    position: relative;
    z-index: 2;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 700;
    font-size: clamp(2rem, 2vw, 2.25em);
    line-height: 1.2;
    color: #d9001b;
    margin: 0 0 1.5em 0;
    margin-right: 1em; /* чтобы не заходить на 6-й столбец */
  }

.about-challenges__text {
    position: relative;
    z-index: 2;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: clamp(0rem, 1vw, 1.5rem);
    line-height: 1.6;
    color: #1A2642;
    margin-right: 4.75em;
    margin-top: 3.75em; /* чтобы не заходить на 6-й столбец */
  }

/* Медиа контейнер */
.about-challenges__media {
  position: relative;
}

.about-challenges__image-container {
  position: relative;
  width: 100%;
  height: auto;
}

.about-challenges__image {
    width: 100%;
    height: auto;
    border-radius: 10px;
    object-fit: cover;
  }

  .about-challenges__nav {
    position: absolute;
    bottom: 0.188em;
    left: -48px;
    display: flex;
    z-index: 3;
  }

.about-challenges__nav-btn--prev {
    width: 3.75em;
    height: 3.75em;
    background: #F70518;
    border: none;
    border-radius: 0.25em 0px 0px 0.25em;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .about-challenges__nav-btn--prev:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  .about-challenges__nav-btn--prev img {
    width: 16px;
    height: 16px;
  }

  .about-challenges__nav-btn--next {
    width: 3em;
    height: 3em;
    margin-top: 0.75em;
    background: #3E3E41;
    border: none;
    border-radius: 0px 0.25em 0.25em 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .about-challenges__nav-btn--next:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  .about-challenges__nav-btn--next img {
    width: 16px;
    height: 16px;
  }

 /* ===========================================
    БЛОК МИССИЯ
    =========================================== */
 .about-mission {
   padding: 0;
 }

 .about-mission__title {
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   font-weight: 900; /* Black - как у "О консорциуме" */
   font-size: clamp(9em, 10vw, 13rem);
   line-height: 1;
   color: #B4B4B4;
   margin: 0;
   text-transform: uppercase;
   letter-spacing: 0;
 }

 .about-mission__text {
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   font-size: clamp(1.3rem, 1.6vw, 1.7em);
   font-weight: 700; 
   line-height: 1.6;
   color: #1A2642;
   margin: 2em 0 0 0;
   text-align: left;
 }

 /* ===========================================
    БЛОК ПАРТНЕР И ВИДЕНИЕ
    =========================================== */
 .about-partner-vision {
   padding-top: clamp(3rem, 6vw, 10rem);
 }

 .about-partner-vision__title {
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   font-weight: 700;
   font-size: clamp(2.3rem, 2.6vw, 3.25em);
   line-height: 1.2;
   color: #d9001b;
   margin: 0;
 }

 .about-partner-vision__vision-title {
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   font-weight: 900; /* Black - как у "О консорциуме" */
   font-size: clamp(7rem, 8vw, 9rem);
   line-height: 1;
   color: #B4B4B4;
   margin: 0;
   text-transform: uppercase;
   letter-spacing: 0;
   text-align: right;
 }

 .about-partner-vision__text {
   margin: 2em 0 0 0;
 }

 .about-partner-vision__text p {
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   font-size: 1.225em;
   line-height: 1.5;
   color: #1A2642;
   margin: 0 0 1.5em 0;
 }

.about-partner-vision__text li {
  font-family: 'Inter', sans-serif;
  font-size: 1em;
  line-height: 1.4;
  color: #000;
  margin: 0 0 0.5em 0;
  position: relative;
  padding-left: 1em;
}

.about-partner-vision__text li::marker {
  content: '•';
    color: #000000;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.5em;
    font-weight: bold;
    line-height: 1;
}

 
 .about-partner-vision__text p:last-child {
   margin-bottom: 0;
 }

 .about-partner-vision__text strong {
   font-weight: 700;
   color: #000000;
 }

.strategic-goal {
    width: 100%;
    display: flex;
    justify-content: left;
    align-items: center;
    background: transparent;
    padding-bottom: clamp(0rem, 3vw, 7.5em);
    margin-top: clamp(3rem, 5vw, 7rem);
}

.strategic-goal__title {
  width: 100%;
  margin: 0;
  color: #B4B4B4;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 900;
  font-size: clamp(4rem, 8vw, 11rem);
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}

.strategic-goal__text {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: clamp(1.3rem, 1.6vw, 1.7em);
    font-weight: 700;
    line-height: 1.6;
    color: #1A2642;
    margin: 2em 0 0 0;
    text-align: left;
}



 /* ===========================================
    БЛОК "КПТМ — ВАШ ПАРТНЕР"
    =========================================== */
 .about-partner {
   padding: 5em 0;
   position: relative;
 }

 .about-partner__content {
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding-right: 2.5em;
 }

 .about-partner__title {
   position: absolute;
   left: 0;
   padding-top: clamp(1rem, 1.4vh, 1.6rem);
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   font-weight: 900;
   font-size: clamp(2.5rem, 3vw, 3.9em);
   line-height: 1.2;
   color: #d9001b;
   margin: 0;
   z-index: 10;
   max-width: 60%;
   text-shadow: 0 0.125em 0.25em rgba(255, 255, 255, 0.8);
 }

 .about-partner__text {
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   font-size: 1.125em;
   line-height: 1.6;
   color: #1A2642;
   margin: 0 0 1.5em 0;
 }

 .about-partner__media {
   position: relative;
   overflow: hidden;
   border-radius: 1em;
 }

 .about-partner__image {
   width: 100%;
   height: auto;
   object-fit: cover;
   transition: transform 0.3s ease;
 }

 .about-partner__cta {
   margin-top: clamp(15rem, 17vh, 20rem);
 }

 .about-partner__cta .btn {
   background: #d9001b;
   color: #ffffff;
   border: 0.125em solid #d9001b;
   border-radius: 0.3em;
   padding: 1em clamp(1rem, 3vw, 6rem);
   font-size: 1em;
   font-weight: 600;
   text-decoration: none;
   transition: all 0.3s ease;
   display: inline-block;
 }

 .about-partner__cta .btn:hover {
   background: #ffffff;
   color: #d9001b;
   transform: translateY(-0.125em);
 }

 /* ===========================================
    БЛОКИ ЦЕННОСТЕЙ
    =========================================== */
 .about-values {
   padding: 5em 0;
 }

 .about-values__grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 0.313em;
 }

 .about-values__card {
   background: #F5F5F5;
   border-radius: 1em;
   padding: clamp(1.4rem, 1.8rem, 2rem);
   cursor: pointer;
   transition: all 0.3s ease;
   border: 0.125em solid transparent;
   position: relative;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   min-height: clamp(15rem, 18vw, 20rem);
 }

 .about-values__card:hover {
   transform: translateY(-0.25em);
   box-shadow: 0 0.5em 2em rgba(0, 0, 0, 0.1);
 }

 .about-values__card--active {
   background: #F81E2F;
   color: #ffffff;
 }

 .about-values__card--active .about-values__icon,
 .about-values__card--active .about-values__title,
 .about-values__card--active .about-values__text,
 .about-values__card--active .about-values__more {
   color: #ffffff;
 }

 .about-values__card--viewed {
   background: #F81E2F;
   color: #ffffff;
 }

 .about-values__card--viewed .about-values__icon,
 .about-values__card--viewed .about-values__title,
 .about-values__card--viewed .about-values__text,
 .about-values__card--viewed .about-values__more {
   color: #ffffff;
 }

 .about-values__card-content {
   flex: 1;
   display: flex;
   flex-direction: column;
 }

 .about-values__icon {
   width: 3em;
   height: 3em;
   margin-bottom: 1.5em;
   transition: all 0.3s ease;
   filter: brightness(0) saturate(100%) invert(22%) sepia(75%) saturate(2547%) hue-rotate(339deg) brightness(113%) contrast(119%) opacity(0.5);
 }

 .about-values__card--viewed .about-values__icon,
 .about-values__card--active .about-values__icon {
   filter: brightness(0) invert(1) !important;
 }

 .about-values__title {
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   font-weight: 700;
   font-size: 1.25em;
   line-height: 1.3;
   color: #B4B4B4;
   margin: 0 0 1em 0;
   transition: all 0.3s ease;
 }

 .about-values__text {
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   font-size: clamp(0.6rem, 0.8vw, 1em);
   line-height: 1.5;
   color: #B4B4B4;
   margin: 0 0 1.5em 0;
   transition: all 0.3s ease;
   flex: 1;
 }

 .about-values__more {
   display: flex;
   align-items: center;
   gap: 0.5em;
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   font-size: 0.875em;
   font-weight: 600;
   color: #000000;
   text-decoration: none;
   transition: all 0.3s ease;
   margin-top: auto;
   align-self: flex-start;
 }

 .about-values__card--viewed .about-values__more,
 .about-values__card--active .about-values__more {
   color: #ffffff;
 }

 .about-values__more-text {
   color: #000000;
   transition: all 0.3s ease;
 }

 .about-values__card--viewed .about-values__more-text,
 .about-values__card--active .about-values__more-text {
   color: #ffffff;
 }

 .about-values__more-icon {
   width: 1em;
   height: 1em;
   transition: transform 0.3s ease;
   filter: brightness(0) saturate(100%) invert(14%) sepia(78%) saturate(6426%) hue-rotate(354deg) brightness(95%) contrast(106%); /* red arrow */
 }

 .about-values__card--viewed .about-values__more-icon,
 .about-values__card--active .about-values__more-icon {
   filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%); /* white arrow */
 }

 .about-values__card:hover .about-values__more-icon {
   transform: translateX(0.25em);
 }

 /* ===========================================
    МОДАЛЬНОЕ ОКНО
    =========================================== */
 .about-modal {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.6);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 1000;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.25s ease, visibility 0.25s ease;
   will-change: opacity;
 }

 .about-modal--visible {
   opacity: 1;
   visibility: visible;
 }

 .about-modal__wrapper {
   position: relative;
   width: 95%;
   max-width: 50em;
   max-height: 90vh;
   display: flex;
   flex-direction: column;
 }

 .about-modal__close {
   position: absolute;
   top: -3em;
   right: 0;
   background: transparent;
   border: none;
   cursor: pointer;
   display: flex;
   align-items: center;
   gap: 0.75em;
   transition: all 0.3s ease;
   color: #ffffff;
   z-index: 1001;
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   font-size: 1em;
   font-weight: 500;
 }

 .about-modal__close::before {
   content: 'Закрыть';
   color: #ffffff;
   font-size: 1em;
   font-weight: 500;
 }

 .about-modal__close::after {
   content: '×';
   font-size: 2.5em;
   font-weight: 300;
   line-height: 1;
   color: #ffffff;
 }

 .about-modal__close:hover {
   opacity: 0.8;
   transform: scale(1.05);
 }

 .about-modal__content {
   background: #ffffff;
   border-radius: 1.25em;
   padding: 3em 3em 4em 3em;
   width: 100%;
   overflow-y: auto;
   position: relative;
   transform: translateY(2em);
   opacity: 0;
   transition: transform 0.25s ease, opacity 0.25s ease;
   will-change: transform, opacity;
   box-shadow: 0 1.25em 3.75em rgba(0, 0, 0, 0.2);
 }

 .about-modal--visible .about-modal__content {
   transform: translateY(0);
   opacity: 1;
 }

 .about-modal__title {
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   font-weight: 700;
   font-size: 3.6em;
   line-height: 1.3;
   color: #d9001b;
   margin: 0 0 0.5em 0;
 }

 .about-modal__text {
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   font-size: 1.125em;
   line-height: 1.6;
   color: #1A2642;
   margin: 0;
 }

 /* ===========================================
    АДАПТИВНЫЕ СТИЛИ
    =========================================== */
    @media (min-width: 1280px) and (max-width: 1439px) {

      .about-headline__title { font-size: clamp(6rem, 7vw, 9rem);}
      .about-headline {padding-bottom: clamp(3rem, 5.5vw, 7.5rem);}
      .about-headline {padding-bottom: 0}
      .about-intro .grid-12 .span-10 {grid-column: span 10;}
      .about-intro__text {font-size: clamp(0.9rem, 1vw, 1.25em); margin: 0 0 clamp(1rem, 1.2vw, 1.5rem) 0}
      .about-intro {padding: clamp(0rem, 0vh, 2.5rem) 0 clamp(2rem, 3vh, 3.75rem) 0}
      .about-challenges {padding: clamp(1rem, 1.5vw, 2.5rem) 0 5em 0;}
      .about-challenges-header__title {font-size: clamp(2rem, 2.3vw, 2.6rem);}
      .about-challenges-header {padding: clamp(0.75rem, 1vh, 1.25rem) 0 clamp(2rem, 2.25vh, 2.5rem) 0;}
      .about-challenges__title {font-size: clamp(1.6rem, 1.8vw, 2em);}
      .about-challenges__text{font-size: clamp(0.5rem, 1vw, 1.5rem); margin-right: clamp(3.5rem, 4vw, 4.75rem); margin-top: clamp(2.5rem, 3vw, 3.75em);}
      .about-challenges__number {left: -16px; font-size: clamp(18rem, 22vw, 24rem); }
      .about-mission__title {font-size: clamp(6em, 8vw, 10rem);}
      .about-mission__text {font-size: clamp(1rem, 1.3vw, 1.6em); margin: clamp(1rem, 1.5vw, 2rem) 0 0 0;}
      .about-partner-vision {padding-top: clamp(2rem, 4vw, 6rem);}
      .about-partner-vision__title {font-size: clamp(1.9rem, 2vw, 2.6em);}
      .about-partner-vision__vision-title {font-size: clamp(6em, 8vw, 10rem);}
      .about-partner-vision__text {margin: clamp(1.5rem, 1.8vh, 2rem) 0 0 0;}
      .about-partner-vision__text p {font-size: clamp(1.1rem, 1.2vw, 1.225rem); margin: 0 0 clamp(1rem, 1.3vh, 1.5rem) 0}
      .strategic-goal {margin-top: clamp(2rem, 3vw, 5rem); padding-bottom: clamp(1rem, 2vw, 4rem); }
      .strategic-goal__title {font-size: clamp(6em, 8vw, 10rem);}
      .strategic-goal__text {font-size: clamp(1.2rem, 1.4vw, 1.6em);}
      .about-partner {padding: clamp(3rem, 4vh, 5rem) 0;}
      .about-partner__content {padding-right: 0;}
      .about-partner__title {max-width: 50%; font-size: clamp(2.3rem, 2.5vw, 3em);}
      .about-partner__cta .btn { font-size: clamp(0.9rem, 0.9vw, 1rem) !important;}
      .about-values__card {padding: clamp(1.3rem, 1.5rem, 1.8rem); min-height: clamp(13rem, 17vw, 20rem);}
      .about-values {padding: clamp(3rem, 4vh, 5rem) 0; }
      .about-values__title {font-size: clamp(1rem, 1.1vw, 1.25rem); }
      .about-values__icon {width: clamp(2rem, 2.5vw, 3rem); height: clamp(2rem, 2.5vh, 3rem)}
      .about-values__text {font-size: clamp(0.6rem, 0.7vw, 0.8rem); }
      .about-values__more {font-size: clamp(0.5rem, 0.7vw, 0.9rem);}
      .about-modal__title {font-size: clamp(2rem, 2.5vw, 3rem); }
      .about-modal__text {font-size: clamp(0.8rem, 1.1vw, 1.125rem); }
      .about-modal__close {font-size: clamp(0.5rem, 0.8vw, 1rem);}
      body:has(.about-content) .news-section .span-12, .about-content ~ .news-section .span-12 {margin: 2rem 0 !important;}
      .news-section {padding-bottom: 0 !important;}
     
    }

  @media (min-width: 1024px) and (max-width: 1279px) {
    .about-challenges__number {left: -11px; font-size: clamp(18rem, 23vw, 25.5rem);}
    .about-headline__title { font-size: clamp(6rem, 7vw, 8rem);}
    .about-headline {padding-bottom: clamp(3rem, 4vw, 5rem);}
    .about-intro {padding: clamp(0rem, 0vh, 2.5rem) 0 1.75rem 0;}
    .about-intro__text {font-size: clamp(1rem, 1.1vw, 1.25rem); margin: 0 0 clamp(1rem, 1.1vw, 1.2rem) 0;}
    .about-challenges-header {padding: 10px 0 20px 0;}
    .about-challenges-header__title {font-size: clamp(1.8rem, 2.2vw, 2.8rem);}
    .about-challenges {padding: 1.25rem 0 2.5rem 0;}
    .about-mission__title { font-size: clamp(6rem, 7vw, 8rem);}
    .about-mission__text {padding: 1em 0 0 0; font-size: clamp(1.1rem, 1.3vw, 1.5em);}
    .about-partner-vision__vision-title {font-size: clamp(5.5rem, 6vw, 7rem);}
    .about-partner-vision__text p {font-size: clamp(1rem, 1.225vw, 1.3rem);}
    .about-partner-vision__text li {font-size: clamp(0.8rem, 0.9vw, 1rem);}
    .strategic-goal {margin-top: clamp(1rem, 3vw, 5rem);}
    .strategic-goal__title {font-size: clamp(5rem, 6vw, 8rem);}
    .strategic-goal__text {font-size: clamp(1.1rem, 1.4vw, 1.6em);}
    .about-partner {padding: 2em 0;}
    .about-partner__title {font-size: clamp(2.3rem, 3vw, 3.5em);}
    .btn {height: 100%; padding: 10px 30px !important;}
    .about-partner__cta .btn {font-size: clamp(0.8rem, 0.9vw, 1rem) !important;}
    .about-values {padding: 2rem 0;}
    body:has(.about-content) .news-section .span-12, .about-content ~ .news-section .span-12 {margin: 2rem 0; }
    .about-content {padding: 48px 0 0;}
    .about-partner-vision__title {font-size: clamp(1.8rem, 2.5vw, 3em);}
    

    }

@media (min-width: 768px) and (max-width: 1023px) {
  .about-headline {
    padding-bottom: clamp(1rem, 2.5vw, 4.5rem);
    
  }
  .about-headline__title {
    font-size: clamp(4rem, 9vw, 10rem);
  }
  .about-intro__text {
    font-size: clamp(0.8rem, 1.3vw, 1.5rem);
    margin: 0 0 12px 0;
  }
  .about-intro {
    padding: clamp(0rem, 0vh, 2.5rem) 0 0.75rem 0;
  }
  .about-challenges-header {
    padding: 10px 0 20px 0;
  }
  .about-challenges-header__title {
    font-size: clamp(1.8rem, 2.5vw, 3rem);
  }
  .about-challenges {
    padding: 0.5em 0 3em 0;
  }
  
  /* ============================================================================
     БЛОК "ОСНОВНЫЕ ВЫЗОВЫ" - АДАПТАЦИЯ ПОД ДИАПАЗОН 768-1023px
     Цель: Заголовок+текст слева, изображение справа, ближе друг к другу
     Референс: стиль как в диапазоне 1024-1279px
     ============================================================================ */
  
  /* КРИТИЧЕСКОЕ ИСПРАВЛЕНИЕ: Адаптация под 6-колоночную grid систему */
  .about-challenges .grid-12 {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important; /* Принудительно 6 колонок */
  }
  
  .about-challenges__content.span-6 {
    grid-column: span 3 !important; /* 3 из 6 колонок = 50% */
  }
  
  .about-challenges__media.span-6 {
    grid-column: span 3 !important; /* 3 из 6 колонок = 50% */
  }
  
  .about-challenges__content {
    padding-right: 1.5em !important; /* Уменьшаем расстояние между текстом и изображением */
  }
  
  .about-challenges__media {
    margin-left: -1em !important; /* Приближаем изображение к тексту */
  }
  
  /* Адаптация размеров для лучшего соотношения */
  .about-challenges__number {
    left: -15px !important; /* Корректируем позицию фоновой цифры */
    font-size: clamp(16rem, 20vw, 22rem) !important; /* Пропорциональный размер */
  }
  
  .about-challenges__title {
    font-size: clamp(1.1rem, 2.2vw, 2.5rem) !important; /* Оптимальный размер заголовка */
    margin: 0 0 0.5em 0;
  }
  
  
  .about-challenges__text {
    font-size: clamp(0.8rem, 1.2vw, 1.4rem) !important; /* Читаемый размер текста */
    margin-top: 0; /* Отступ от заголовка */
    line-height: 1.2;
    margin-right: 0;
  }
  .about-challenges__nav {
    left: 0px;
  }
  .about-mission__title {
    font-size: clamp(4rem, 9vw, 10rem);
  }
  .about-mission__text {
    margin: 1em 0 0 0;
    font-size: clamp(1rem, 1.5vw, 1.7em);
  }
  .about-partner-vision__title {
    font-size: clamp(1.35rem, 2vw, 3rem);
  }
  .about-partner-vision__text p {
    font-size: clamp(1.2rem, 1.3vw, 1.225rem);
  }
  .strategic-goal__title {
    font-size: clamp(4rem, 9vw, 10rem);}
    .about-partner-vision__vision-title {
      font-size: clamp(4rem, 9vw, 10rem);
    }
    .strategic-goal__text {
      font-size: clamp(1.2rem, 1.6vw, 1.7em);
    }
    .about-partner {
      padding: 2em 0;
    }
    
    /* ============================================================================
       БЛОК "КПТМ — ВАШ ПАРТНЕР" - ВЕРТИКАЛЬНАЯ АДАПТАЦИЯ ДЛЯ 768-1023px
       Порядок: Заголовок → Изображение → Кнопка
       ============================================================================ */
    
    /* Адаптация grid колонок под 6-колоночную систему */
    .about-partner .grid-12 {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      gap: 2rem !important;
    }
    
    /* Заголовок - первый, полная ширина, статичное позиционирование */
    .about-partner__title {
      position: static !important;
      order: 1 !important;
      width: 100% !important;
      text-align: center !important;
      margin: 0 0 1rem 0 !important;
      padding-top: 0 !important;
      font-size: clamp(2rem, 3.5vw, 3.5rem) !important;
    }
    
    /* Изображение - второе, полная ширина */
    .about-partner__media {
      order: 2 !important;
      width: 100% !important;
      max-width: 600px !important; /* Ограничиваем максимальную ширину */
    }
    
    .about-partner__media.span-8 {
      grid-column: unset !important;
    }
    
    /* Кнопка - третья, центрирована */
    .about-partner__content {
      order: 3 !important;
      width: auto !important;
      padding-right: 0 !important;
      display: flex !important;
      justify-content: center !important;
    }
    
    .about-partner__content.span-4 {
      grid-column: unset !important;
    }
    
    .about-partner__cta {
      margin-top: 0 !important;
    }
    
    .about-partner__cta .btn {
      padding: 1em 2em !important;
      font-size: clamp(1rem, 1.2vw, 1.25rem) !important;
    }
    
    .about-values {
      padding: 2em 0;
    }
    body:has(.about-content) .news-section .span-12, .about-content ~ .news-section .span-12 { 
      margin: 1rem 0 !important;
    }
}


 @media (max-width: 1200px) {
   .about-headline__wrap { height: 10em; }
   .about-values__grid { grid-template-columns: repeat(2, 1fr); }
 }

 /* ИСПРАВЛЕНО: Изменен диапазон чтобы не конфликтовать с 768-1023px */
 @media (max-width: 767px) {
   .about-headline__wrap { height: 8.75em; }
   .about-challenges__number { font-size: 6.25em; }
   .about-challenges__title { font-size: 1.25em; }
   .about-challenges__text { font-size: 0.9375em; }
   .about-partner__title { font-size: 1.75em; max-width: 75%; }

   .about-values__grid { grid-template-columns: 1fr; }
   .about-modal__wrapper { max-width: 90%; }
 }

 @media (max-width: 667px) {
   .about-headline { padding: 1em 0; }
   .about-headline__wrap { height: 6.25em; padding: 0 1em; }
   .about-challenges__number { font-size: 5em; top: -0.625em; }
   .about-challenges__title { font-size: 1.125em; margin-right: 0; }
   .about-challenges__text { font-size: 0.875em; margin-right: 0; }
   .about-challenges__content { padding-right: 0; margin-bottom: 1.5em; }
   .about-partner__title { font-size: 1.5em; max-width: 80%; }
   .about-values { padding: 2.5em 0; }
   .about-values__card { padding: 1.5em; min-height: 18em; }
   .about-modal__content { padding: 2em; }
   .about-modal__close { 
     top: -2.5em; 
     font-size: 0.875em; 
   }
   .about-modal__close::after { 
     font-size: 2em; 
   }
 }

 @media (min-width: 575px) and (max-width: 767px) {
  .about-headline__title {
    font-size: clamp(3.5rem, 10vw, 12rem) !important;
  }
  .about-intro__text {
    font-size: clamp(1rem, 1.2vw, 2rem);
    
  }
  .about-intro__text {
    margin: 0 0 10px 0;
  }
  .about-intro {
    padding: clamp(0rem, 0vh, 2.5rem) 0 0.75rem 0;
  }
  .about-challenges-header__title {
    font-size: clamp(1.5rem, 1.7vw, 2rem);
  }
  .about-mission__title {
    font-size: clamp(3.5rem, 10vw, 12rem);
  }
  .about-mission {
    padding: 0;
  }
  .about-mission__text {
    margin: 1em 0 0 0;
    font-size: clamp(1rem, 2.5vw, 4rem);
  }
  .about-partner-vision__vision-title {
    font-size: clamp(3.5rem, 10vw, 12rem);
  }
  .about-partner-vision__title {
    font-size: clamp(1rem, 3vw, 4rem);
  }
  .about-partner-vision__text p {
    font-size: clamp(1.1rem, 1.4vw, 1.6rem);
  }
  .about-partner-vision__text p {
    margin: 0 0 0.5em 0;
  }
  .about-partner-vision__text li {
    font-size: clamp(0.9rem, 1.5vw, 1.7rem);
  }
  .about-partner-vision {
    padding: 2em 0 0;
  }
  .strategic-goal {
    margin: 2em 0 0;
  }
  .strategic-goal__title {
    font-size: clamp(3.4rem, 9vw, 12rem);
  }
  .strategic-goal__text {
    font-size: clamp(1.1rem, 1.6vw, 1.7em);
    margin: 1em 0 0 0;
  }
  .about-partner {
    padding: 0.5em 0;
  }
  .about-modal__title {
    font-size: clamp(2rem, 2.5vw, 3rem);
  }
  body:has(.about-content) .news-section .span-12, .about-content ~ .news-section .span-12 { 
    margin: 0;
  }
 }


@media (min-width: 320px) and (max-width: 575px) {
   
  .about-headline__title {
    font-size: clamp(2rem, 8vw, 10rem) !important;
  }
  .about-intro__text {
    font-size: clamp(0.8rem, 1vw, 1.2rem);
  }
  .about-challenges-header .grid-12 .span-7 {
    grid-column: span 12;
  }
  .about-intro__text {
    margin: 0 0 10px 0;
  }
  .about-intro {
    padding: clamp(0rem, 0vh, 2.5rem) 0 0.75rem 0;
  }
  .about-challenges-header__title {
    font-size: clamp(1rem, 4vw, 6rem);
  }
  .about-mission__title {
    font-size: clamp(2rem, 8vw, 10rem) !important;
  }
  .about-challenges {
    padding: 2.5em 0 0 0;
  }
  .about-mission__text {
    margin: 0 0 1em 0;
    font-size: clamp(0.8rem, 3vw, 4rem);
  }
  .about-mission {
    padding: 0;
  }
  .about-partner-vision__title {
    font-size: clamp(1rem, 3vw, 4rem);
  }

  .about-partner-vision__vision-title {
    font-size: clamp(2rem, 8vw, 10rem) !important;
  }

  .about-partner-vision .grid-12 .span-6 {
    grid-column: span 12;
  }
  .about-partner-vision__text {
    margin: 1em 0 0 0;
  }
  .about-partner-vision__text p {
    font-size: clamp(1rem, 1.2vw, 1.3rem);
  }
  .about-partner-vision__text li {
    font-size: clamp(0.8rem, 1vw, 1rem);
  }
  .about-partner-vision {
    padding: 1em 0;
  }
  .strategic-goal {
    margin-top: 0;
  }
  .strategic-goal__title {
    font-size: clamp(1.9rem, 8vw, 10rem);
  }
  .strategic-goal__text {
    margin: 1em 0 0 0;
    font-size: clamp(0.9rem, 1.6vw, 1.7rem);
  }
  .about-modal__title {
    font-size: clamp(1rem, 2vw, 3rem);

  }
  .about-modal__text {
    font-size: clamp(0.9rem, 1vw, 1.125rem);
  }
  body:has(.about-content) .news-section .span-12, .about-content ~ .news-section .span-12 { 
    margin: 0 !important;
  }
  .breadcrumbs {
    margin: 2em 0 0 0 !important;
  }
  .breadcrumbs-grid {
    margin: 3rem auto 0 !important;
    padding: 0 10px;
  }
  .about-partner {
    padding: 2em 0;
  }

  /* ============================================================================
     МОБИЛЬНЫЙ ЛАЙАУТ ДЛЯ БЛОКА "ОСНОВНЫЕ ВЫЗОВЫ" - ДИАПАЗОН 320-575px
     ============================================================================ */
  
  /* Основной контейнер - достаточная высота для всех элементов */
  .about-challenges .grid-12 {
    position: relative !important;
    min-height: 450px !important;
    height: auto !important;
    overflow: visible !important;
  }
  
  /* Контентный блок - базовое позиционирование */
  .about-challenges__content.span-6 {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2 !important;
  }
  
  /* Медиа блок - первая строка справа */
  .about-challenges__media.span-6 {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 120px !important;
    height: 80px !important;
    z-index: 3 !important;
  }
  
  /* Заголовок - первая строка слева */
  .about-challenges__title {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: calc(100% - 140px) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-weight: 700 !important;
    font-size: clamp(1.1rem, 4vw, 1.4rem) !important;
    line-height: 1.2 !important;
    color: #F70518 !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 4 !important;
  }
  
  /* Картинка - первая строка справа */
  .about-challenges__image-container {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
  }
  
  .about-challenges__image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 8px !important;
  }
  
  /* Кнопки навигации для мобильного */
  .about-challenges__nav {
    position: absolute !important;
    bottom: -8px !important;
    left: -24px !important;
    display: flex !important;
    z-index: 5 !important;
    align-items: end;
  }
  
  .about-challenges__nav-btn {
    width: 24px !important;
    height: 24px !important;
    border: none !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
  }
  
  .about-challenges__nav-btn--prev {
    background: #F70518 !important;
    margin-right: 2px !important;
  }
  
  .about-challenges__nav-btn--next {
    background: #3E3E41 !important;
  }
  
  .about-challenges__nav-btn img {
    width: 12px !important;
    height: 12px !important;
  }
  
  /* Текст - вторая строка (под картинкой + отступ) */
  .about-challenges__text {
    position: absolute !important;
    top: 100px !important;
    left: 0 !important;
    width: 100% !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: clamp(0.8rem, 3vw, 1rem) !important;
    line-height: 1.4 !important;
    color: #1A2642 !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 2 !important;
  }
  
  /* Фоновая цифра - на фоне текста */
  .about-challenges__number {
    position: absolute !important;
    right: 0 !important;
    top: 44% !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-weight: 700 !important;
    font-size: clamp(18rem, 20vw, 22rem) !important;
    line-height: 0.8 !important;
    color: rgba(247, 5, 24, 0.1) !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  /* ============================================================================
     БЛОК "КПТМ — ВАШ ПАРТНЕР" - МОБИЛЬНЫЙ ЛАЙАУТ ДЛЯ 320-575px
     Порядок: Заголовок → Изображение → Кнопка
     ============================================================================ */
  
  /* Адаптация grid колонок под вертикальный лайаут */
  .about-partner .grid-12 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 1.5rem !important;
  }
  
  /* Заголовок - первый, полная ширина, статичное позиционирование */
  .about-partner__title {
    position: static !important;
    order: 1 !important;
    width: 100% !important;
    text-align: center !important;
    margin: 0 0 1rem 0 !important;
    padding-top: 0 !important;
    font-size: clamp(1.5rem, 4vw, 2.5rem) !important;
    max-width: 100% !important;
    text-shadow: none !important;
  }
  
  /* Изображение - второе, полная ширина */
  .about-partner__media {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .about-partner__media.span-8 {
    grid-column: unset !important;
  }
  
  /* Кнопка - третья, центрирована */
  .about-partner__content {
    order: 3 !important;
    width: auto !important;
    padding-right: 0 !important;
    display: flex !important;
    justify-content: center !important;
  }
  
  .about-partner__content.span-4 {
    grid-column: unset !important;
  }
  
  .about-partner__cta {
    margin-top: 0 !important;
  }
  
  .about-partner__cta .btn {
    font-size: clamp(0.9rem, 2.5vw, 1.1rem) !important;
  }
}

 @media (max-width: 375px) {
   .about-headline__wrap { height: 5em; padding: 0 0.75em; }
 
   .about-challenges__number { font-size: 3.75em; }
   .about-partner__title { font-size: 1.25em; max-width: 85%; }

   .about-values__card { padding: 1.25em; min-height: 16em; }
   .about-modal__wrapper { width: 95%; max-width: none; }
   .about-modal__content { padding: 1.5em; }
   .about-modal__close { 
     top: -2em; 
     font-size: 0.75em; 
   }
   .about-modal__close::after { 
     font-size: 1.75em; 
   }
 }

 /* ===========================================
    СТИЛИ ДЛЯ СЕКЦИИ НОВОСТЕЙ НА СТРАНИЦЕ ABOUT
    =========================================== */
 
 /* Исправляем ширину контейнера новостей для соответствия главной странице */
 /* Секция новостей находится вне .about-content, поэтому используем более общий селектор */
 body:has(.about-content) .news-section .container,
 .about-content ~ .news-section .container {
   width: 100%;
   max-width: 1905px !important; /* Такая же ширина как на главной странице */
   padding-left: var(--container-pad);
   padding-right: var(--container-pad);
   margin: 0 auto;
   box-sizing: border-box;
 }

 /* Обеспечиваем правильное отображение карточек новостей */
 body:has(.about-content) .news-section .news-grid,
 .about-content ~ .news-section .news-grid {
   display: flex;
   gap: 1px;
   overflow-x: auto;
   overflow-y: hidden;
   scroll-behavior: smooth;
   padding: 6px 0px;
   position: relative;
   z-index: 1;
   scrollbar-width: none;
   -ms-overflow-style: none;
   -webkit-overflow-scrolling: touch;
   scroll-snap-type: x mandatory;
 }

 /* Скрываем скроллбар для WebKit браузеров */
 body:has(.about-content) .news-section .news-grid::-webkit-scrollbar,
 .about-content ~ .news-section .news-grid::-webkit-scrollbar {
   display: none;
   width: 0;
   height: 0;
 }

 /* Фиксируем ширину карточек новостей (как на главной странице) */
 body:has(.about-content) .news-section .news-card,
 .about-content ~ .news-section .news-card {
   min-width: 528px !important;
   max-width: 528px !important;
   flex-shrink: 0;
   scroll-snap-align: start;
   width: 528px !important;
 }

 /* Адаптивность для секции новостей на about */
 @media (max-width: 1200px) {
   body:has(.about-content) .news-section .container,
   .about-content ~ .news-section .container {
     max-width: 95%;
   }
 }

 @media (max-width: 667px) {
   body:has(.about-content) .news-section .news-card,
   .about-content ~ .news-section .news-card {
     min-width: 400px !important;
     max-width: 400px !important;
     width: 400px !important;
   }
 }

 @media (max-width: 375px) {
   body:has(.about-content) .news-section .news-card,
   .about-content ~ .news-section .news-card {
     min-width: 350px !important;
     max-width: 350px !important;
     width: 350px !important;
   }
 }

 /* Дополнительные стили для гарантированного переопределения */
 /* Принудительно устанавливаем ширину контейнера новостей на странице about */
 body:has(.about-content) .news-section,
 .about-content ~ .news-section {
   width: 100% !important;
   max-width: none !important;
 }

 body:has(.about-content) .news-section .container,
 .about-content ~ .news-section .container {
   width: 100% !important;
   max-width: 1905px !important;
   min-width: 1905px !important;
   padding-left: var(--container-pad) !important;
   padding-right: var(--container-pad) !important;
   margin: 0 auto !important;
   box-sizing: border-box !important;
 }

 /* Переопределяем медиа-запросы из main.css для страницы about */
 @media (max-width: 1280px) {
   body:has(.about-content) .news-section .container,
   .about-content ~ .news-section .container {
     max-width: 1905px !important;
     min-width: 1905px !important;
   }
 }

 @media (max-width: 1200px) {
   body:has(.about-content) .news-section .container,
   .about-content ~ .news-section .container {
     max-width: 1905px !important;
     min-width: 1905px !important;
   }
 }

 @media (max-width: 900px) {
   body:has(.about-content) .news-section .container,
   .about-content ~ .news-section .container {
     max-width: 1905px !important;
     min-width: 1905px !important;
     padding: 0 var(--container-pad) !important;
   }
 }

 @media (max-width: 600px) {
   body:has(.about-content) .news-section .container,
   .about-content ~ .news-section .container {
     max-width: 1905px !important;
     min-width: 1905px !important;
     padding: 0 var(--container-pad) !important;
   }
 }

 /* Стили для news-grid-container на странице about */
 body:has(.about-content) .news-section .news-grid-container,
 .about-content ~ .news-section .news-grid-container {
   max-width: 1905px !important;
   width: 100% !important;
   margin: 0 auto !important;
 }

 /* ИСПРАВЛЕНИЕ: Убираем отступы слева для секции новостей на about */
 /* Проблема была в том, что .container имеет padding-left: var(--container-pad) = 144px */
 body:has(.about-content) .news-section .container,
 .about-content ~ .news-section .container {
   padding-left: 0 !important;
   padding-right: 0 !important;
   margin: 0 !important;
   width: 100% !important;
   max-width: 100% !important;
   min-width: 100% !important;
 }

 /* Убираем отступы у grid-12 внутри секции новостей */
 body:has(.about-content) .news-section .grid-12,
 .about-content ~ .news-section .grid-12 {
   margin: 0 !important;
   padding: 0 !important;
   width: 100% !important;
 }

 /* Убираем отступы у span-12 внутри секции новостей */
 body:has(.about-content) .news-section .span-12,
 .about-content ~ .news-section .span-12 {
   margin: 3rem 0;
   padding: 0 !important;
 }

 /* Убираем отступы у directions-headline внутри секции новостей */
 body:has(.about-content) .news-section .directions-headline,
 .about-content ~ .news-section .directions-headline {
   margin: 0 !important;
   padding: 0 !important;
 }

 body:has(.about-content) .news-section .directions-headline__wrap,
 .about-content ~ .news-section .directions-headline__wrap {
   margin: 0 !important;
   padding: 0 !important;
   max-width: none !important;
   width: 100% !important;
 }

 /* Центрируем заголовок "НОВОСТИ" */
 body:has(.about-content) .news-section .directions-headline__title,
 .about-content ~ .news-section .directions-headline__title {
   position: relative !important;
   left: auto !important;
   top: auto !important;
   width: 100% !important;
   margin: 0 auto !important;
 }

 /* Медиа-запросы для убирания отступов на всех разрешениях */
 @media (max-width: 1280px) {
   body:has(.about-content) .news-section .container,
   .about-content ~ .news-section .container {
     padding-left: 0 !important;
     padding-right: 0 !important;
   }
 }

 @media (max-width: 1200px) {
   body:has(.about-content) .news-section .container,
   .about-content ~ .news-section .container {
     padding-left: 0 !important;
     padding-right: 0 !important;
   }
 }

 @media (max-width: 900px) {
   body:has(.about-content) .news-section .container,
   .about-content ~ .news-section .container {
     padding-left: 0 !important;
     padding-right: 0 !important;
   }
 }

 @media (max-width: 600px) {
   body:has(.about-content) .news-section .container,
   .about-content ~ .news-section .container {
     padding-left: 0 !important;
     padding-right: 0 !important;
   }
 }