body{font-family: var(--font-family);min-width: 360px;}
img{max-width: 100%;}

/* НАЧАЛО ЦВЕРА ТИМБЕРИКА */

.tm-colors-v2 {
  position: relative;
  background-color: #4D897C; /* Зеленый фон */
  border-radius: 30px;
padding: 40px 60px 90px 60px;
  overflow: hidden;
  box-sizing: border-box;
}

.tm-colors-v2::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('img/Rectangle41.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top right;
  z-index: 1;
  pointer-events: none;
}

/* Контентная зона */
.tm-colors-v2__content {
  position: relative;
  z-index: 3;
  margin-bottom: 60px;
}

.tm-colors-v2__title {
font-style: normal;
margin-bottom: 20px;
font-weight: 600;
font-size: 48px;
line-height: 100%;
color: #FFFFFF;
  font-family: var(--second-family);
}

.tm-colors-v2__text {
max-width:760px;
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 125%;margin-bottom: 40px;
color: rgba(255, 255, 255, 0.65);
}

.tm-colors-v2__btn {
  display: inline-flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 24px 32px;
gap: 10px;
width: 194px;
height: 70px;
background: #FFFFFF;
border-radius: 50px;
flex: none;
order: 1;
flex-grow: 0;

  transition: background-color 0.2s ease;
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 140%;
color: #1B3B34;
text-decoration: none;
}

.tm-colors-v2__btn:hover {
  background-color: #f3f3f3;
}

.tm-colors-v2__media {
  position: absolute;
  right: 60px;
  top: 0;
  width: auto;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.tm-colors-v2__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right bottom;
}

.tm-colors-v2__popular {
  position: relative;
  z-index: 4;
}

.tm-colors-v2__popular-title {
  font-family: var(--second-family);
font-style: normal;
font-weight: 600;
font-size: 28px;
line-height: 125%;
color: #FFFFFF;
margin-top: 80px;margin-bottom: 40px;
}

.tm-colors-v2__grid {
  display: flex;
  gap: 4px;
  align-items: center; 
}


.tm-colors-v2-card {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 84px; 
  flex: 1; 
  min-width: 150px;
  cursor: pointer;
  box-sizing: border-box;
  will-change: transform, height;
  justify-content: center;
}

.tm-colors-v2-card__circle {
width: 44px;
height: 44px;
flex: none;
order: 0;
flex-grow: 0;
border-radius: 50%;
}


.tm-colors-v2-card__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.tm-colors-v2-card__name {

color: #1B3B34;

font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 140%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tm-colors-v2-card__link {
border-bottom: 1px solid #1B3B34;
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 140%;
  color: #1B3B34;
  text-decoration: none;
  
  opacity: 0;
  max-height: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease, max-height 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
  display: block;padding-bottom: 2px;
}

/* --- ХОВЕР НА ПК: РАСТЕТ И ВВЕРХ, И ВНИЗ --- */
.tm-colors-v2-card:hover {
	background-color: #ffffff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	height: 99px;
	transform: translateY(-12px);
	margin-top: -12px;
	margin-bottom: -25px;
}

.tm-colors-v2-card:hover .tm-colors-v2-card__link {
  opacity: 1;
  max-height: 20px;
  transform: translateY(0);
  margin-top: 2px;
}


/* --- АДАПТИВНОСТЬ ПОД МОБИЛЬНЫЙ МАКЕТ --- */

@media (max-width: 1024px) {
.tm-colors-v2__grid {
    flex-wrap: wrap;
  }
  .tm-colors-v2-card {
    flex: 0 1 calc(33.33% - 8px);
  }
.tm-colors-v2__media {
	right: 0;
	height: 80%;
	top: auto;
	bottom: 0;
}
}
@media (max-width: 768px) {
  .tm-colors-v2 {
    padding: 24px 16px 46px;
    border-radius: 20px;
  }

  .tm-colors-v2::before {
    inset: unset;
    top: 0;
    right: 0;
 width: 100%;
    height: 100%;
    background-image: url('img/Rectangle41m.png');
    background-repeat: no-repeat;
    background-position: top right;
    background-size: contain;
  }
  
  .tm-colors-v2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
   width: 100%;
    height: 100%;
    background-image: url('img/Rectangle41mb.png');
    background-repeat: no-repeat;
    background-position: bottom left;
    z-index: 1;
    pointer-events: none;
    background-size: contain;
  }

  .tm-colors-v2__content {
    max-width: 100%;
    margin-bottom: 30px;
  }

  .tm-colors-v2__title {
font-weight: 600;
font-size: 24px;
line-height: 100%;margin-bottom: 10px;
  }

  .tm-colors-v2__text {
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 140%;
margin-bottom: 0;
  }
  .tm-colors-v2__popular-title {
    font-weight: 600;
    font-size: 18px;
    margin-top: 30px;
    margin-bottom: 20px;
}
.tm-colors-v2__btn {
padding: 20px 26px;
gap: 10px;
width: 158px;
height: 58px;
font-style: normal;
font-weight: 600;
font-size: 13px;
line-height: 140%;
margin-top: 30px;
    margin-bottom: 60px;
}
  .tm-colors-v2__media {
width: auto;
    height: 62%;
  }

  .tm-colors-v2__img {
    object-position: center center;
  }

 .tm-colors-v2__grid {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 6px !important;
  }

  .tm-colors-v2-card,
  .tm-colors-v2-card:link,
  .tm-colors-v2-card:visited {
    display: inline-flex !important;
    align-items: center !important;
    border-radius: 8px;
    flex: none !important; 
    width: auto !important;
    max-width: max-content !important;
    min-width: auto;
    height: 54px !important; 
    padding: 6px 8px !important;
    box-sizing: border-box !important;
    
    /* Сбрасываем десктопные трансформации */
    transform: none !important;
    margin: 0 !important;
    background: rgba(255, 255, 255, 0.75) !important;
    box-shadow: none !important;gap: 10px;
  }
  .tm-colors-v2-card__circle {
    width: 26px;
    height: 26px;
  }

  .tm-colors-v2-card__name {
    white-space: nowrap !important;
font-weight: 600;
font-size: 12px;
line-height: 140%;
border-bottom: 1px solid #1B3B34;
  
  }

  .tm-colors-v2-card:hover {
    flex: none !important;
    width: auto !important;
    max-width: max-content !important;
    height: 54px !important;
    transform: none !important;
    box-shadow: none !important;
    background: rgba(255, 255, 255, 0.75) !important;
    margin: 0 !important;
  }
  
  .tm-colors-v2-card:hover .tm-colors-v2-card__link {
    display: none !important;
  }

  /* КЛАСС АКТИВНОСТИ (для Битрикса на будущее или для клика) */
  .tm-colors-v2-card--active {
    background: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  }
  .tm-colors-v2-card--active .tm-colors-v2-card__name {
    text-decoration: underline !important;
  }
  .tm-colors-v2-card__link{display:none;}
  .s_timberica_colors .wrapper {
	padding: 0;
}
.tm-interior__header {
    padding: 0 12px;
}
}

/* КОНЕЦ ЦВЕТА ТИМБЕРИКА */

/* НАЧАЛО ИНТЕРЬЕРНЫЕ РЕШЕНИЯ */

.tm-interior {
  padding: 40px 0;
  box-sizing: border-box;
}

.tm-interior__header {
  margin-bottom: 32px;
}

.tm-interior__main-title {
font-family: var(--second-family);
font-style: normal;
font-weight: 600;
font-size: 48px;
line-height: 100%;
color: #1B3B34;
margin-bottom: 20px;
}

.tm-interior__main-subtitle {
font-weight: 400;
font-size: 20px;
line-height: 125%;
color: #6A7F7B;
margin-bottom: 50px;
}

/* Контейнер баннера */
.tm-interior__banner {
  position: relative;
  width: 100%;
  border-radius: 24px;
  overflow: hidden;
  box-sizing: border-box;
}

.tm-interior__picture {
  display: block;
  width: 100%;
}

.tm-interior__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Абсолютное позиционирование текстового контента на ПК */
.tm-interior__content {
  position: absolute;
  left: 60px;
  top: 50%;
  transform: translateY(-50%);
  max-width: 489px;
  z-index: 2;
  box-sizing: border-box;
}

.tm-interior__title {
  font-family: var(--second-family);
font-weight: 600;
font-size: 42px;
line-height: 100%;
color: #1B3B34;
margin-bottom: 20px;
}

.tm-interior__text {
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 140%;
color: #6A7F7B;
margin-bottom: 32px;
}

.tm-interior__btn {
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 140%;
color: #FFFFFF;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 24px 32px;
gap: 10px;
width: 207px;
height: 70px;
background: #4D897C;
border-radius: 50px;
  transition: background-color 0.2s ease;
  text-decoration: none;
}

.tm-interior__btn:hover {
  background-color: #3d6e63;
}


/* --- АДАПТИВНОСТЬ ПОД МОБИЛЬНЫЕ УСТРОЙСТВА --- */

@media (max-width: 1024px) {
  .tm-interior__content {
    left: 60px;
    max-width: 350px;
  }
  .tm-interior__title {
    font-size: 28px;
  }
}

@media (max-width: 768px) {
 /* НАЧАЛО ИНТЕРЬЕРНЫЕ РЕШЕНИЯ */

  .tm-interior__main-title {
    font-size: 26px;
  }
  
  .tm-interior__main-subtitle {
    font-size: 14px;display: none;
  }
.tm-categories-header {
    margin-bottom: 24px;
}
.tm-categories-footer {
    margin-top: 30px;
}
  /* На мобильных перестраиваем баннер во флекс-колонку */
  /* Картинка встает вниз, а текст на бежевой подложке уходит наверх, как на твоем мобильном макете */
  .tm-interior__banner {
    display: flex;
    flex-direction: column;
    background-color: #F4EFE6; /* Фирменная светлая подложка из мобильного макета */
    border-radius: 16px;
  }
  
  /* Переводим блок в обычный поток контента на мобилке */
  .tm-interior__content {
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
  padding: 20px 20px 44px 14px;
    max-width: 100%;
    order: -1; /* Выталкивает текст СВЕРХУ картинки */
  }
  
  .tm-interior__title {
    font-weight: 600;
    font-size: 24px;
    line-height: 100%;
  }
  
  .tm-interior__text {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
    color: #6A7F7B;
            margin-bottom: 30px;
  }
  
  .tm-interior__btn {
    font-style: normal;
    font-weight: 600;
    font-size: 13px;
    line-height: 140%;
    box-sizing: border-box;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 20px 26px;
    gap: 10px;
    width: 193px;
    height: 58px;
    background: #4D897C;
    border-radius: 50px;
  }

  /* Картинка спускается строго под контент и обрезает пустой верх */
.tm-interior__picture {
	order: 2;
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	overflow: hidden;
}

  /* Стилизация картинки внутри урезанного кадра */
  .tm-interior__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    
    /* Жестко прижимаем изображение к нижнему краю, заставляя верхнюю часть спрятаться */
    object-position: center bottom !important; 
  }
.s_interior_solutions .wrapper{padding: 0;}
/* КОНЕЦ ИНТЕРЬЕРНЫЕ РЕШЕНИЯ */

}
@media (max-width: 500px) {
  .tm-interior__picture {
	aspect-ratio: unset;
}
}
/* КОНЕЦ ИНТЕРЬЕРНЫЕ РЕШЕНИЯ */



/* НАЧАЛО ШКАФЫ-КРОВАТИ (ФИНАЛЬНАЯ МОЗАИКА) */

.tm-categories-inner {
  padding: 40px 0;
  box-sizing: border-box;
}

.tm-categories-header {
  margin-bottom: 32px;
}


.tm-categories-mosaic {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 220px; 
  gap: 20px;
  box-sizing: border-box;
}


.tm-cat-card--w2 {
  grid-column: span 2;
}

/* Шкафы, Буфеты (2 ряда в высоту) */
.tm-cat-card--h2 {
  grid-row: span 2;
  height: 100%;
}

/* Общие стили карточки категории */
.tm-cat-card {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  overflow: hidden;
  text-decoration: none;
  box-sizing: border-box;
  border-radius: 30px;
}

.tm-cat-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.tm-cat-card__title {
  position: absolute;
  left: 24px;
  top: 24px;
  z-index: 2;
  font-style: normal;
font-weight: 600;
font-size: 28px;
line-height: 125%;
font-family: var(--second-family);

color: #FFFFFF;
flex-grow: 0;

}

/* Всплывающая кнопка "Смотреть" при наведении */
.tm-cat-card__hover-btn {
  position: absolute;
  right: 24px;
  bottom: 24px;
  background-color: #4D897C; border-radius: 50px;
  color: #ffffff;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;
  z-index: 3;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
width: 144px;
height: 70px;
font-weight: 600;
font-size: 16px;
line-height: 140%;
/* Frame 165 */

/* Auto layout */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 24px 32px;
gap: 10px;

}

/* --- ХОВЕРЫ --- */
.tm-cat-card:hover .tm-cat-card__img {
  transform: scale(1.03);
}

.tm-cat-card:hover .tm-cat-card__hover-btn {
  opacity: 1;
  transform: translateY(0);
}

/* Футер блока */
.tm-categories-footer {
  display: flex;
  justify-content: center;
margin-top: 50px;
}

.tm-categories-show-all {
  background: none;
  border-radius: 30px;
  cursor: pointer;
  font-size: 14px;
box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 20px 30px;
gap: 10px;
width: 167px;
height: 62px;
border: 1px solid #E3E7E6;
border-radius: 50px;
font-weight: 600;
font-size: 16px;
line-height: 140%;
color: #1B3B34;
white-space: nowrap;
}
.tm-categories-show-all:hover{background: var(--bg);}

/* --- МОБИЛЬНЫЙ АДАПТИВ (Переход в стандартную плитку 2х2) --- */
@media (max-width: 1024px) {
  .tm-cat-card__title{font-size: 24px;}
}
@media (max-width: 768px) {
  .tm-categories-mosaic {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: unset; 
    gap: 12px;
  }

  /* Сбрасываем асимметрию, выравниваем в ровные стандартные квадраты */
  .tm-cat-card {
    grid-column: unset !important;
    grid-row: unset !important;
    aspect-ratio: 1 / 1; 
    border-radius: 16px;
  }
  
  .tm-cat-card__title {
    left: 16px;
    top: 16px;
font-weight: 600;
font-size: 18px;
line-height: 125%;

  }

  /* Отключаем кнопку "Смотреть" на мобильных экранах */
  .tm-cat-card__hover-btn {
    display: none !important;
  }

  /* Скрываем нижние карточки (с 6 по 9) до нажатия кнопки */
  .tm-cat-card--mobile-hidden {
    display: none;
  }

  /* Класс появления для JS */
  .tm-cat-card.tm-is-visible {
    display: block !important;
    animation: catFadeIn 0.4s ease forwards;
  }
  .tm-categories-show-all {

	font-size: 13px;
	width: 135px;
	height: 50px;
}

@keyframes catFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
}

/* Добавляем нижнюю стеклянную маску на каждую карточку */
.tm-cat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  
  z-index: 1; /* Встает ПОВЕРХ картинки, но ПОД твой текст названия */
  pointer-events: none;

filter: blur(24.3823px);
left: calc(50% - 375px/2 - 72px);
top: calc(50% - 375px/2 - 136px);

background: radial-gradient(50% 50% at 50% 50%, #000000 0%, rgba(0, 0, 0, 0) 100%);
mix-blend-mode: plus-darker;
opacity: 0.5;
filter: blur(24.3823px);

/* Inside auto layout */
flex: none;
order: 1;
flex-grow: 0;
z-index: 1;

}

/* КОНЕЦ ШКАФЫ-КРОВАТИ (ФИНАЛЬНАЯ МОЗАИКА) */


/* НАЧАЛО О КОМПАНИИ */
.s_about_company{background: #F5F5F5;padding: 40px 0;}
.tm-about-inner {
  display: grid;
  grid-template-columns: 3fr 4fr; /* Две равные колонки на ПК */
  gap: 60px; /* Отступ между текстом и баннером */
  align-items: center;
  box-sizing: border-box;
}

/* --- ЛЕВАЯ КОЛОНКА (ТЕКСТ) --- */
.tm-about__content {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;max-width: 560px;
}

.tm-about__main-title {
  margin: 0 0 30px 0;

font-family: var(--second-family);
font-style: normal;
font-weight: 600;
font-size: 48px;
line-height: 100%;
color: #1B3B34;
}

.tm-about__main-subtitle {
font-family: var(--second-family);
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 125%;
color: #1B3B34;
margin-top:0;margin-bottom:80px;

}

/* Блок преимущества с иконкой */
.tm-about__feature-block {
  margin-bottom: 30px;
}

.tm-about__icon-wrap {
  
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 27px 28px;
gap: 10px;

width: 90px;
height: 90px;
background: #FFFFFF;
border-radius: 500px;
}

.tm-about__icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.tm-about__feature-title {
font-family: var(--second-family);
font-style: normal;
font-weight: 600;
font-size: 24px;
line-height: 125%;
color: #1B3B34;
margin-top: 30px;margin-bottom: 16px;
}

.tm-about__feature-text {
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 140%;
color: #6A7F7B;
margin: 0;

}

/* Ссылка "О компании" с подчеркиванием */
.tm-about__link {
  align-self: flex-start;
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 140%;
/* or 22px */

/* Black */
color: #1B3B34;
  text-decoration: none;
  border-bottom: 2px solid #1B3B34;
  padding-bottom: 0;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.tm-about__link:hover {
  color: #4D897C;
  border-color: #4D897C;
}

/* --- ПРАВАЯ КОЛОНКА (БАННЕР) --- */
.tm-about__media {
  width: 100%;
  box-sizing: border-box;
}

.tm-about__banner {
  position: relative;
  width: 100%;
  border-radius: 30px;
  overflow: hidden; /* Срезаем углы основного баннера */
  box-sizing: border-box;
}

.tm-about__banner-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Белая плашка внизу баннера */
.tm-about__badge {
  position: absolute;
right:40px;
  bottom: 0;
  background-color: #ffffff;
  border-radius: 30px 30px 0 0; /* Закругляем только верхние углы */
  padding: 0 24px 30px 24px;
  text-align: center;
  box-sizing: border-box;
  z-index: 2;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
padding: 30px 30px 0px;
gap: 10px;
isolation: isolate;
width: 447px;
height: 205px;
background: #FFFFFF;
border-radius: 500px 500px 0px 0px;

}

/* Круглое окошко-превью, врезанное в плашку */
.tm-about__badge-circle {
position: absolute;
width: 148px;
height: 148px;
left: calc(50% - 148px/2 - 0.5px);
top: -78px;
/* Inside auto layout */
flex: none;
order: 1;
flex-grow: 0;
z-index: 1;

}

.tm-about__circle-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.tm-about__badge-title {
font-weight: 600;
font-size: 18px;
line-height: 140%;
text-align: center;
color: #1B3B34;margin-bottom: 0;
}

.tm-about__badge-text {
font-weight: 400;
font-size: 16px;
line-height: 140%;
margin-top: 0;
color: #6A7F7B;
margin-bottom: 40px;

}


/* --- АДАПТИВНОСТЬ ПОД ТЕЛЕФОНЫ --- */

@media (max-width: 1024px) {
  .tm-about-inner {
    gap: 40px;
  }
  .tm-about__main-title {
    font-size: 32px;
  }
  .tm-about-inner {
	grid-template-columns: 1fr;
}
.tm-about__content {
	max-width: 100%;
}
}
@media (max-width: 768px) {
  /* Перестраиваем в одну колонку: текст сверху, баннер снизу */
  .tm-about-inner {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 40px 0;
  }
  
  /* Прячем внутреннее преимущество с иконкой на мобилке, как на твоем втором скрине */
  .tm-about__feature-block {
    display: none !important;
  }
  
  .tm-about__main-title {
font-style: normal;
font-weight: 600;
font-size: 24px;
line-height: 100%;
margin-bottom: 16px;
  }
  
  .tm-about__main-subtitle {
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 125%;
margin-bottom: 18px;
  }
  
  .tm-about__link {

font-size: 13px;
line-height: 140%;
  }

  .tm-about__banner {
    border-radius: 24px;
  }

  .tm-about__badge {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
padding: 30px 30px 0px;
gap: 24px;
isolation: isolate;

position: absolute;
width: 332px;
height: 153px;
left: calc(50% - 332px/2);
bottom: 0px;
border-radius: 500px 500px 0px 0px;

  }

  .tm-about__badge-circle {
position: absolute;
width: 114px;
height: 114px;
left: calc(50% - 114px/2 - 1px);
top: -57px;
flex: none;
order: 1;
flex-grow: 0;
z-index: 1;

  }

  .tm-about__badge-title {
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 140%;top: 66px;
    position: absolute;
    margin-bottom: 23px;
  }

  .tm-about__badge-text {
font-style: normal;
font-weight: 400;
font-size: 13px;
line-height: 140%;

  }
    .tm-about__banner {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1 !important; /* Принудительный квадрат 1:1 */
    border-radius: 24px;
    overflow: hidden;
    box-sizing: border-box;
  }

  /* Картинка заполняет квадрат, центрируется и отсекает бока */
  .tm-about__banner-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Срезает боковые части, сохраняя пропорции комнат */
    object-position: center !important; /* Держит фокус по центру */
    display: block;
  }

}

/* КОНЕЦ О КОМПАНИИ */
/* НАЧАЛО ЖУРНАЛ */

.tm-journal-inner {
  padding: 60px 0;
  box-sizing: border-box;
}

.tm-journal__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 30px;
  gap: 20px;
}

.tm-journal__main-title {
font-family: var(--second-family);
font-style: normal;
font-weight: 600;
font-size: 48px;
line-height: 100%;
color: #1B3B34;
margin-bottom: 20px;
}

.tm-journal__main-subtitle {
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 125%;
color: #6A7F7B;
}

.tm-journal__nav {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
margin-top: 80px;
}

.tm-journal__nav-btn {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 1px solid #E3E7E6;
  background-color: #ffffff;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.tm-journal__nav-btn:hover {
  background-color: #F5F5F5;
}

.tm-journal__nav-btn--prev {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://w3.org' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M10 12L4 8L10 4' stroke='%231B3B34' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.tm-journal__nav-btn--next {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://w3.org' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M6 4L12 8L6 12' stroke='%231B3B34' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* КОНТЕЙНЕР ДЛЯ НАЛОЖЕНИЯ МАСКИ (Rectangle 54 из Фигмы) */
.tm-journal__slider-wrap {
  position: relative;
  width: 100%;
  overflow: hidden; /* Обрезает вылезающую третью карточку за пределами wrapper */
  box-sizing: border-box;
}

/* Слой градиента Rectangle 54 из Фигмы */
.tm-journal__slider-wrap::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 120px; /* Ширина зоны размытия маски */
  height: 100%;
  /* Мягкий градиент из прозрачного в белый цвет фона сайта */
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
  z-index: 3;
  pointer-events: none; /* Пропускает клики сквозь маску */
}

/* ЛЕНТА КАРТОЧЕК (На ПК работает как резиновый контейнер) */
.tm-journal__grid {
  display: flex;
  flex-direction: row;
  gap: 24px;
  margin-bottom: 50px;
  box-sizing: border-box;
padding-left: 0;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  cursor: grab; 
}
.tm-journal__grid.tm-is-dragging {
  cursor: grabbing; /* Курсор в виде сжатого кулака */
}
/* Прячем скроллбар в Chrome/Safari на десктопе, чтобы была видна только чистая лента */
.tm-journal__grid::-webkit-scrollbar {
  display: none;
}

/* РАСЧЕТ ДЛЯ 2.5 КАДРОВ: */
/* Чтобы на экране помещалось ровно 2 целых кадра и половинка третьего с учетом отступов (gap), */
/* мы вычитаем доли отступов из общей ширины ячейки */
.tm-journal-card {
  flex: 0 0 calc((100% - (24px * 2)) / 2.4); 
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.tm-journal-card__link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.tm-journal-card__img-wrap {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 16px;
  background-color: #F5F7F6;
}

.tm-journal-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.tm-journal-card__title {
font-family: var(--second-family);
font-style: normal;
font-weight: 600;
font-size: 28px;
line-height: 125%;
color: #1B3B34;margin-bottom: 16px;
}

.tm-journal-card__date {
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 140%;
color: #6A7F7B;

}

.tm-journal-card:hover .tm-journal-card__img {
  transform: scale(1.03);
}

.tm-journal-card:hover .tm-journal-card__title {
  color: #4D897C;
}

.tm-journal__footer {
  display: flex;
  justify-content: center;
}

.tm-journal__btn-all {
box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 20px 30px;
gap: 10px;
width: 172px;
height: 62px;
border: 1px solid #E3E7E6;
border-radius: 50px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 140%;
color: #1B3B34;
text-decoration: none;
}

.tm-journal__btn-all:hover {
  background-color: #f9f9f9;
  border-color: #cccccc;
}
/* НАЧАЛО ЖУРНАЛ */

/* Обязательно добавь position: relative обертке картинки, если его там нет */
.tm-journal-card__img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 16px;
  background-color: #F5F7F6;
}

/* Создаем скрытый слой для размытия ховера */
.tm-journal-card__img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.08); /* Имитация Plus darker (легкое затемнение) */
  
  /* Изначально размытие и слой полностью скрыты */
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  opacity: 0;
  
  z-index: 2;
  transition: opacity 0.35s ease, backdrop-filter 0.35s ease;
  pointer-events: none;
}

/* Картинка должна оставаться под оверлеем */
.tm-journal-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
}

/* --- ЭФФЕКТ ХОВЕРА ПРИ НАВЕДЕНИИ НА КАРТОЧКУ --- */

.tm-journal-card:hover .tm-journal-card__img-wrap::after {
/* Ellipse 7 */

position: absolute;
width: 1244px;
height: 769px;
left: -344px;
top: 299px;

background: radial-gradient(50% 50% at 50% 50%, #000000 0%, rgba(0, 0, 0, 0) 100%);
mix-blend-mode: plus-darker;
opacity: 1;
filter: blur(100px);

/* Inside auto layout */
flex: none;
order: 1;
flex-grow: 0;
z-index: 1;
}
/* НАЧАЛО ЖУРНАЛ */

/* Запрещаем браузеру перетаскивать картинки как файлы */
.tm-journal-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
  
  /* ДОПИШИ ЭТИ ДВЕ СТРОЧКИ: */
  -webkit-user-drag: none !important; /* Для Safari и Chrome */
  user-select: none !important;       /* Запрещает случайное выделение синим цветом */
}

/* Запрещаем браузеру перетягивать ссылки */
.tm-journal-card__link {
  text-decoration: none;
  color: inherit;
  display: block;
  
  /* ДОПИШИ СЮДА ТОЖЕ: */
  -webkit-user-drag: none !important;
}

/* КОНЕЦ ЖУРНАЛ */

/* КОНЕЦ ЖУРНАЛ */


/* --- АДАПТИВНОСТЬ ПОД МОБИЛЬНЫЙ СТАНДАРТ --- */

@media (max-width: 768px) {
  .tm-journal-inner {
    padding: 40px 0;
  }

  .tm-journal__nav {
    display: none !important;
  }

  /* На мобилках градиентная маска не нужна, так как там границы экрана обрезают блок естественным образом */
  .tm-journal__slider-wrap::after {
    display: none !important;
  }

  .tm-journal__main-title {
    font-size: 24px;
    margin-bottom: 8px;
  }

  .tm-journal__main-subtitle {
    font-size: 14px;
  }
  
.tm-journal__header {
    margin-bottom: 18px;
}

  /* Мобильный скролл-поток */
  .tm-journal__grid {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin: 0 -20px 24px 0px;
    padding: 0 20px;
    gap: 12px;
  }

  .tm-journal__grid::-webkit-scrollbar {
    display: none;
  }

  /* На мобилке оставляем стандартную ширину карточки под свайп */
  .tm-journal-card {
    flex: 0 0 75% !important;
    scroll-snap-align: start;
  }

  .tm-journal-card__img-wrap {
    border-radius: 16px;
    margin-bottom: 12px;
  }

  .tm-journal-card__title {
font-style: normal;
font-weight: 600;
font-size: 18px;
line-height: 125%;
  }

  .tm-journal-card__date {
font-style: normal;
font-weight: 400;
font-size: 13px;
line-height: 140%;

  }
  .tm-journal__main-title {
font-weight: 600;
font-size: 24px;
line-height: 100%;

}
.tm-journal__main-subtitle{display: none;}
.tm-journal__btn-all{
font-style: normal;
font-weight: 600;
font-size: 13px;
line-height: 140%;
width: 139px;
height: 50px;
white-space: nowrap;
}
.tm-journal-inner {
	margin-right: -20px;
}
}


/* КОНЕЦ ЖУРНАЛ */