/* максимально плавный якорный скролл без JS */
html { scroll-behavior: smooth; }

.hhv2 {display: none;}

.collection-H-gallery__hero{
  --hero-pos: 35% center;
  --hero-pos-m: center center;
  --panel-bg: rgba(18,18,22,.36);
  --panel-brd: rgba(255,255,255,.12);
  --blur: 12px;
  --radius: 20px;
  --pad: clamp(16px,2.4vw,32px);
  --gap: clamp(10px,1.6vw,18px);
  --accent: #af0b0b;
}
.site-content { background:#fff; }

/* десктоп: 100vh, мобайл оставляем как было */
.collection-H-gallery__hero .hh-fullbleed{
  position: relative; width: 100%;
  height: 100vh; min-height: 560px;                 /* десктоп */
  background: var(--hero-desk) no-repeat var(--hero-pos) / cover;
  overflow: clip;
}

.collection-H-gallery__hero .ops{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,0) 25% 60%, rgba(0,0,0,.25));
}

.collection-H-gallery__hero .front-block{ position:relative; height:100%; }

/* правая стеклянная карточка (без изменений) */
.collection-H-gallery__hero .right-block-front{
  position:absolute; inset-block-start:80%; inset-inline-end:clamp(16px,3vw,40px);
  transform: translateY(-50%);
}
.collection-H-gallery__hero .right-block-front-wrapper{
  display:flex; flex-direction:column; gap:var(--gap);
  padding: var(--pad) clamp(22px,3.2vw,44px);
  background: var(--panel-bg);
  border:1px solid var(--panel-brd);
  border-radius: var(--radius);
  backdrop-filter: blur(var(--blur)) saturate(120%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(120%);
  color:#fff;
}
.collection-H-gallery__hero .right-block-front-name img{
  display:block; height:120px; width:auto;
}

/* разделители в списке ссылок справа */
.right-block-front-text-p {margin: 0 0 5px;}
.collection-H-gallery__hero .right-block-front-links a{ position:relative; padding-inline:16px; }
.collection-H-gallery__hero .right-block-front-links a + a::before{
  content:""; position:absolute; width:2px; height:14px; left:0; top:50%;
  transform:translateY(-50%); background:var(--accent); border-radius:2px;
}

/* ---------- стрелка по центру снизу (без кружка) ---------- */
.collection-H-gallery__hero .hero-down{
  position:absolute; left:50%; bottom: clamp(16px, 4vh, 40px);
  transform: translateX(-50%);
  color:#fff; opacity:.95; text-decoration:none;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.45));
  transition: opacity .28s ease, transform .24s ease;
  animation: hero-down-breathe 1.9s ease-in-out infinite; /* мягкая "дышащая" */
}
.collection-H-gallery__hero .hero-down:hover{
  opacity:1; transform: translateX(-50%) translateY(-1px);
}
@keyframes hero-down-breathe{
  0%,100%{ transform: translateX(-50%) translateY(0); }
  50%    { transform: translateX(-50%) translateY(6px); }
}

/* ===== Мобильный патч: как было (стрелку скрываем) ===== */
@media (max-width: 999.98px){
  .collection-H-gallery__hero .hh-fullbleed{
    height: 64vh; min-height: 440px;
    background: var(--hero-mob) no-repeat var(--hero-pos-m) / cover;
    position: relative;
  }

  /* скрыть десктопные тексты */
  .collection-H-gallery__hero .right-block-front-text-links,
  .collection-H-gallery__hero .right-block-front-links{ display:none !important; }

  .collection-H-gallery__hero .right-block-front{
    position: static; inset:auto; transform:none;
  }
  .collection-H-gallery__hero .right-block-front-wrapper{
    background: transparent; border:0; padding:0; backdrop-filter:none; gap:0;
  }

  /* буква H — левый нижний угол */
  .collection-H-gallery__hero .right-block-front-name{
    position: absolute;
    left:  calc(env(safe-area-inset-left, 0px) + clamp(10px, 3vw, 20px));
    bottom:calc(env(safe-area-inset-bottom, 0px) + clamp(10px, 3vw, 20px));
    z-index: 2;
  }
  .collection-H-gallery__hero .right-block-front-name img{
    height: clamp(64px, 13vw, 96px);
    width: auto;
    opacity: .95;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
    pointer-events: none;
  }

  .collection-H-gallery__hero .hero-down{ display:none; }
}

/* ===== Секция: заголовок + подзаголовок ===== */
.hh-section-title{
  --side-pad: clamp(16px, 4vw, 40px);
  --maxw:  min(1120px, 100%);
  --title-color: #0e0e12;
  --sub-color:   #5f5f63;
  padding: clamp(28px, 6vw, 96px) 0 0 0;
  background: transparent;
}

.hh-section-title .hh-wrap{
  margin-inline: auto;
  padding-inline: var(--side-pad);
  padding-left: clamp(24px, 6vw, 88px);
}

/* Заголовок */
.hh-section-title .hh-title{
  color: var(--title-color);
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.1;
  font-size: clamp(21px, 3.2vw, 48px);
  margin: 0 0 .45em; 
  text-align: center;
}

/* Подзаголовок — компактно и читабельно */
.hh-section-title .hh-subtitle{
  color: var(--sub-color);
  font-size: clamp(14px, 1.25vw, 18px);
  line-height: 1.55;
  margin: 0;
  text-align: center;
}

/* Центрирование на узких экранах (по желанию оставь всегда) */
@media (max-width: 767.98px){
  .hh-section-title .hh-wrap{ text-align: left; }
  .hh-section-title .hh-subtitle{ max-width: 60ch; }
}

/* Тёмный фон (если секция окажется на тёмном блоке) */
.hh-section-title.is-dark{
  --title-color:#ffffff;
  --sub-color:rgba(255,255,255,.72);
}


/* ===== HERO (Коллекция H): параллакс «как на О нас» ===== */
.collection-H-gallery__hero .hh-fullbleed{
  position: relative;
  width: 100%;
  height: 100vh;                 /* во весь экран */
  min-height: 560px;
  /* разнесено по свойствам, чтобы можно было переопределить attachment */
  background-image: var(--hero-desk);
  background-position: var(--hero-pos, 50% center);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;  /* параллакс на десктопе */
  overflow: clip;
}

/* затемняющий градиент — как было */
.collection-H-gallery__hero .ops{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,0) 25% 60%, rgba(0,0,0,.25));
}

/* iOS / мобильные: без fixed, чтобы не дёргалось */
@media (max-width: 999.98px){
  .collection-H-gallery__hero .hh-fullbleed{
    height: 75vh;
    min-height: 440px;
    background-image: var(--hero-mob);
    background-position: var(--hero-pos-m, center center);
    background-size: cover;
    background-attachment: scroll; /* снимаем fixed */
  }
}

/* уважение к reduced motion */
@media (prefers-reduced-motion: reduce){
  .collection-H-gallery__hero .hh-fullbleed{ background-attachment: scroll; }
}

/* ===== Стрелка вниз — тонкая, с мягкой анимацией ===== */
.collection-H-gallery__hero .hero-down{
  position:absolute; left:50%; bottom:clamp(16px,3.5vh,28px);
  transform:translateX(-50%);
  color:#fff; text-decoration:none; opacity:.95;
}
.collection-H-gallery__hero .hero-down svg{
  display:block;
  animation: hh-down 1.6s ease-in-out infinite;
}
@keyframes hh-down{
  0%   { transform: translateY(0);    opacity:.65; }
  50%  { transform: translateY(6px);  opacity:1;   }
  100% { transform: translateY(0);    opacity:.65; }
}


/* ====== Небольшой тюнинг встроенных частей model-viewer (если доступны) ====== */
/* Прогресс-бар крупнее */
.h3d-stage model-viewer::part(progress-bar) {
  height: 6px;
  background: rgba(255,255,255,.25);
}
.h3d-stage model-viewer::part(default-progress-bar) {
  height: 6px;
}
/* Подсказка вращения — чуть ярче */
.h3d-stage model-viewer{
  --poster-color: #111;
  --progress-bar-color: #fff;
  --progress-mask: linear-gradient(90deg, transparent, #fff);
}

/* === Текстовый блок (центр, узкая колонка) - черный фон === */
.hh-cons-dark{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: -20px;
  padding-top: 120px;
  padding-bottom: 120px;
  background: #0e0e12;
  color: inherit;
}

.hh-cons__in-dark{
  max-width: 1920px;
  padding-left: clamp(24px, 6vw, 88px);
  padding-right: clamp(24px, 5vw, 64px);
  margin-inline: auto;
}

/* заголовок — по центру, динамичный размер */
.hh-cons__title-dark{
  margin: 0 0 clamp(16px, 2.4vw, 28px);
  font-weight: 500;
  line-height: 1.05;
  font-size: clamp(28px, 4.2vw, 48px);
  text-align: center;
  color: #fff;
}

/* текст — узкая колонка, по центру блока */
.hh-cons__text-dark{
  max-width: 90ch;               /* комфортная длина строки */
  margin: 0 auto;                /* центрируем колонку */
  font-size: clamp(14px, 1.1vw, 18px);
  line-height: 1.65;
  text-align: center;
  color: #fff;
}

.hh-cons__text-dark p{ margin: 0; }

@media (max-width:1024px){
	.hh-cons-dark {padding-top: 0px; padding-bottom: 0px; padding-block: clamp(48px, 10vw, 250px);}
    .hh-cons__text-dark p{ margin: 0; font-size: 10px;}
}


/* ===== HH Spec Card (20% text / 80% media) ===== */
.hh-spec{
  --gap: clamp(16px, 3vw, 40px);
  --maxw: 1600px;             /* можно увеличить/уменьшить при желании */
  color:#1d1d1d;
  min-block-size: 100svh;     /* высота секции = экран (десктоп) */
  display:block;
}
.hh-spec__inner{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(12px, 3.5vw, 45px);
  display: grid;
  grid-template-columns: minmax(260px, 20%) 80%;  /* 20 / 80 */
  align-items: center;
  gap: var(--gap);
  height: 100vh;
}

/* --- текстовая колонка (20%) --- */
.hh-spec__text{ align-self:center; }
.hh-spec__title{
  margin:0 0 .35em;
  font-weight:800;
  letter-spacing:-.01em;
  line-height:1.05;
  font-size: clamp(36px, 6.2vw, 80px);   /* заголовок крупнее чисел */
}
.hh-kv{ margin: 0 0 1.2em; }
.hh-kv__name{
  display:block; opacity:.7;
  font-size: clamp(12px, 1.2vw, 14px); line-height:1.3;
}
.hh-kv__num{
  display:block; font-weight:700; letter-spacing:-.01em;
  font-size: clamp(28px, 4.6vw, 34px); line-height:1.1;
}
.hh-spec__cta{
  display:inline-flex; align-items:center; gap:10px;
  padding:.65em 2.2em; border-radius:10px; text-decoration:none;
  background:#fff; color:#0e0e12; font-weight:600;
  transition: transform .18s ease, opacity .2s ease; border: 2px solid #0e0e12;
}
.hh-spec__cta:hover{ transform: translateY(-1px); }

/* --- медиа-колонка (80%) — картинка на всю ширину колонки --- */
.hh-spec__media{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  inline-size: 100%; block-size: 100%;
  padding:0; margin:0;
}

/* Сбрасываем любые ограничения темы на изображения внутри блока */
.hh-spec__media picture,
.hh-spec__media img{
  display:block;
  inline-size: 100% !important;   /* занять всю ширину своей колонки */
  max-inline-size: 100% !important;
  block-size: auto;
  height: auto;                   /* сохраняем пропорции */
  max-height: 100%;               /* без «выпрыгивания» из колонки */
  object-fit: contain;            /* не обрезаем */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Вариант шахматки (когда нужно картинку слева, текст справа) */
.hh-spec--reverse .hh-spec__inner{
  grid-template-columns: 80% minmax(260px, 20%);
}
.hh-spec--reverse .hh-spec__media{ order:1; }
.hh-spec--reverse .hh-spec__text{  order:2; text-align: right;}

/* ===== Адаптив ===== */
@media (max-width: 1100px){
  .hh-spec{ min-block-size:auto; }
  .hh-spec__inner{
    grid-template-columns: 1fr;        /* в одну колонку */
    gap: clamp(14px, 4vw, 24px);
  }
  .hh-spec__media{
    order:1;
  }
  .hh-spec__media img{
    inline-size:100% !important;
    block-size:auto;
    max-height: 56vh;                  /* крупно, но не выше 56% вьюпорта */
  }
  .hh-spec__text{ order:2; }
}


/* ===== Mobile Porsche-like (≤ 991px) ===== */
@media (max-width: 991px){
  .hh-spec{ min-block-size: auto; padding: 0; }

  .hh-spec__inner{
    grid-template-columns: 1fr;
    gap: clamp(14px, 4vw, 24px);
    padding: clamp(12px, 4vw, 24px) clamp(16px, 6vw, 24px) clamp(28px, 8vw, 40px);
    max-width: 820px;              /* чуть уже, чтобы типографика «дышала» */
  }

  /* Крупное изображение сверху, как у Porsche */
  .hh-spec__media{ order: 1; margin: 0 auto; }
  .hh-spec__media img{
    inline-size: min(92vw, 100%);
    max-height: 46vh;              /* не «задавливает» контент */
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 18px 28px rgba(0,0,0,.18));
  }

  /* Текстовый блок по центру */
  .hh-spec__text{
    order: 2;
    text-align: center;
    margin-inline: auto;
    max-width: 720px;
  }

  /* Заголовок крупный, но компактнее, чем на десктопе */
  .hh-spec__title{
    font-size: clamp(28px, 9vw, 44px);
    line-height: 1.05;
    margin: clamp(16px, 4vw, 24px) 0 clamp(6px, 2vw, 8px);
  }

  /* Пары «лейбл/значение»: большая цифра + подпись серым ниже */
  .hh-kv{ margin: clamp(10px, 3.5vw, 18px) 0; }
  .hh-kv__num{
    font-size: clamp(28px, 11vw, 56px);
    line-height: 1.05;
    letter-spacing: -.01em;
    display: block;
  }
  .hh-kv__name{
    display: block;
    margin-top: .35em;
    font-size: clamp(12px, 3.5vw, 16px);
    line-height: 1.3;
    color: #6b6b6b;
  }
  .hh-kv__metre sup{ font-size: .6em; top: -.5em; }

  /* Кнопка — широкая «рамка», как в референсе */
  .hh-spec__cta{
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: clamp(20px, 6vw, 28px) auto 0;
    padding: clamp(14px, 3.8vw, 18px) clamp(18px, 5.5vw, 22px);
    background: transparent;
    color: #111;
    border: 2px solid #111;
    border-radius: 14px;
    text-align: center;
    transform: none;
  }
  .hh-spec--reverse .hh-spec__text{ text-align: center; }
  .hh-spec--reverse .hh-kv__name,
  .hh-spec--reverse .hh-kv__num{ text-align: inherit; }
}

/* === FIX: Mobile stacking for both normal & reverse cards === */
@media (max-width: 991px){

  /* Всегда grid с одной колонкой и явными областями */
  .hh-spec__inner{
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "media"
      "text" !important;
    gap: clamp(14px, 4vw, 24px);
    padding: clamp(12px, 4vw, 24px) clamp(16px, 6vw, 24px) clamp(28px, 8vw, 40px);
    max-width: 820px;
    margin-inline: auto;
    height: 90vh;
  }

  /* И у .hh-spec--reverse — те же самые области */
  .hh-spec--reverse .hh-spec__inner{
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "media"
      "text" !important;
  }

  /* Привязываем элементы к областям + сбрасываем возможные float/flex-ширины */
  .hh-spec__media{
    grid-area: media !important;
    margin: 0 auto;
    width: auto !important;
    float: none !important;
    justify-self: center;
  }
  .hh-spec__text{
    grid-area: text !important;
    width: auto !important;
    float: none !important;
    text-align: center;
    margin-inline: auto;
  }

  /* Изображение — большое, по центру */
  .hh-spec__media img{
    display: block;
    inline-size: min(92vw, 100%);
    max-height: 46vh;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 18px 28px rgba(0,0,0,.18));
  }

  /* Типографика под референс */
  .hh-spec__title{
    font-size: clamp(28px, 11vw, 44px);
    line-height: 1.05;
    letter-spacing: -.01em;
    margin: clamp(16px, 4vw, 24px) 0 clamp(6px, 2vw, 8px);
  }
  .hh-kv{ margin: clamp(10px, 3.5vw, 18px) 0; }
  .hh-kv__num{
    font-size: clamp(30px, 1vw, 56px);
    line-height: 1.05;
    letter-spacing: -.01em;
    display: block;
  }
  .hh-kv__name{
    display: block;
    margin-top: .35em;
    font-size: clamp(12px, 3.5vw, 16px);
    line-height: 1.3;
    color: #6b6b6b;
  }
  .hh-kv__metre sup{ font-size: .6em; top: -.5em; }

  /* Кнопка-рамка как у Porsche */
  .hh-spec__cta{
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: clamp(20px, 6vw, 28px) auto 0;
	min-width: 300px;
    padding: clamp(14px, 3.8vw, 18px) clamp(18px, 5.5vw, 22px);
    background: transparent;
    color: #111;
    border: 1px solid #111;
    border-radius: 14px;
    text-align: center;
  }
}

.hh-spec{ position: relative; }
.hh-spec::before{
  content:"";
  position:absolute; inset-inline:0; top:0;
  height: clamp(220px, 78vh, 750px);
  background: linear-gradient(180deg, #fff 0%, #fff 48%, #f2f3f5 100%);
  pointer-events:none; z-index:0;
}
.hh-spec__inner{ position:relative; z-index:1; }
@media (max-width:991px){ .hh-spec::before{ height: clamp(160px, 21vh, 620px); } }



:root{
  --hh-footer: #0e0e12;              /* цвет вашего футера */
  --hhpf-pos: 55% 50%;               /* фокальная точка картинки (object-position) */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}

/* === Пре-футерный модуль (секция) === */
.hh-prefooter-hero{
  position: relative;
  isolation: isolate;                 /* чтобы слои не смешивались снаружи */
  width: 100%;
  min-height: clamp(360px, 86vh, 820px);
  overflow: hidden;
  background: var(--hh-footer);       /* на всякий случай, пока картинка грузится */
}

/* Картинка покрывает весь блок */
.hhpf-picture, .hhpf-img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.hhpf-img{
  object-fit: cover;
  object-position: var(--hhpf-pos);
  transform: translateZ(0);           /* сглаживание */
}

/* Нижняя тёмная «подложка» для читабельности текста */
.hh-prefooter-hero::before{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height: 52%;
  background: linear-gradient(180deg,
              rgba(0,0,0,0) 0%,
              rgba(0,0,0,.45) 38%,
              rgba(0,0,0,.75) 100%);
  z-index: 1;
  pointer-events: none;
}

/* Высокая полоса с блюром и плавным переходом в футер */
.hh-prefooter-hero::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height: clamp(140px, 24vh, 320px);
  background: linear-gradient(
              to bottom,
              rgba(14,14,18,0) 0%,
              rgba(14,14,18,.35) 45%,
              rgba(14,14,18,.7) 75%,
              var(--hh-footer) 100%);
  z-index: 2;
  pointer-events: none;
}

/* Текстовый слой */
.hhpf-text{
  position: relative;
  z-index: 3;
  max-width: min(1100px, 92vw);
  margin: 0 auto;
  padding: calc(24px + var(--sat)) clamp(16px,4vw,40px) calc(30px + var(--sab));
  display: grid;
  gap: 10px;
  align-items: end;
  min-height: inherit;
  /* прижимаем текст вниз, как в референсе */
  grid-template-rows: 1fr auto auto;
}
.hhpf-title{
  grid-row: 2;
  color:#fff;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: clamp(24px, 4.2vw, 48px);
  line-height: 1.12;
  text-wrap: balance;
}
.hhpf-sub{
  grid-row: 3;
  color: rgba(255,255,255,.9);
  font-size: clamp(14px, 1.4vw, 18px);
  line-height: 1.55;
  max-width: 72ch;
  margin: 0 auto;
  text-align: center;
}

/* Небольшая корректировка на мобильных */
@media (max-width: 768px){
  .hh-prefooter-hero{ min-height: clamp(320px, 58vh, 560px); margin-top: 80px; }
  .hh-prefooter-hero::before{ height: 60%; }
  .hhpf-text{ gap: 8px; }
}


/* ===== Base / tokens ===== */
.irpb--arch{
  --padX: clamp(16px, 6vw, 120px);
  --padTop: clamp(80px, 22vw, 280px);
  --content-max: 720px;
  --radius-card: 16px;
  --shadow-card: 0 14px 40px rgba(0,0,0,.28);
  --white: #fff;
  --bg-dark: #0e0e12;
}

/* ===== Hero background ===== */
.irpb__bg{ position: relative; min-height: clamp(520px, 70vw, 760px); height: 100vh;}
.irpb__bg picture, .irpb__bg .irpb__bg-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.irpb__bg-overlay{
  position:absolute; inset:0;
  /* затемнение сверху и мягкий переход к белому снизу */
  background:
    linear-gradient(180deg, rgba(14,14,18,.55) 0%, rgba(14,14,18,.35) 40%, rgba(14,14,18,0) 62%),
    linear-gradient( to bottom,
      rgba(0,0,0,0) 0%,
      rgba(14,14,18,0.22) 26%,
      rgba(14,14,18,0.44) 55%,
      rgba(14,14,18,0.75) 78%,
      var(--white) 100%);
}
.irpb__content{
  position: relative;
  z-index: 2;
  padding: var(--padTop) var(--padX) 140px;
  color:#fff;
  max-width: var(--content-max);
}
.irpb-h1{
  margin:0 0 16px;
  font-weight: 500;
  font-size: clamp(28px, 4.8vw, 48px);
  line-height: 1.1;
  letter-spacing: .01em;
}
.irpb-lead{
  margin:0;
  font-size: clamp(12px, 2.2vw, 18px);
  line-height: 1.6;
  color: rgba(255,255,255,.92);
}

/* ===== Panel with images ===== */
.irpb__panel{
  position: relative;
  margin-top: -330px;           /* поджимаем к герою */
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  padding: 32px var(--padX) 56px;
}
.irpb__rail{
  display:flex; gap: clamp(18px, 2.4vw, 32px);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width:none;
}
.irpb__rail::-webkit-scrollbar{ display:none; }

.irpb-card{
  margin:0; flex: 0 0 clamp(280px, 28vw, 420px);
  scroll-snap-align:start;
}
.irpb-card__img{
  display:block; width:100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: var(--radius-card);
  background: #000;
}

/* Desktop: показываем ровно три, но трек при желании можно скроллить */
@media (min-width: 1200px){
  .irpb__rail{ justify-content: center; }
  .irpb-card{ flex-basis: 30%; max-width: 480px; }
}

@media (max-width: 768px){
	.hh-section-title {padding-bottom: 40px;}
    .irpb__bg {display: none;}
	.irpb__panel {margin-top: 0px;} 
    .vsd-model-viewer.vsd-button-align-left .vsd-model-viewer-ar-button, .vsd-model-viewer.vsd-button-align-left .vsd-model-viewer-cam-button, .vsd-model-viewer.vsd-button-align-left .vsd-model-viewer-close-button, .vsd-model-viewer.vsd-button-align-left .vsd-model-viewer-fs-button, .vsd-model-viewer.vsd-button-align-right .vsd-model-viewer-zoom-in-button, .vsd-model-viewer.vsd-button-align-right .vsd-model-viewer-zoom-out-button { left: unset;}
}


/* ===== H3D — блок с 3D-моделью коллекции ===== */

.h3d{
  --h3d-max: 1440px;
  --h3d-pad: 16px;
  --h3d-radius: 16px;

  width: 100%;
  max-width: var(--h3d-max);
  margin-inline: auto;
  padding-inline: var(--h3d-pad);
  box-sizing: border-box;
 /*   height: 95vh;             тянем блок по высоте экрана на десктопе */
}

/* Заголовок блока */
.h3d-head{
  text-align: center;
  margin: 90px 0 14px;
}

.h3d-title{
  margin: 0;
  font-size: clamp(22px, 3.3vw, 45px);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: #111;
}
.h3d-subtitle{
    color: #5f5f63;
    font-size: clamp(14px, 1.25vw, 18px);
    line-height: 1.55;
    margin: 1.45em 0 1.45em;
	text-align: center;}

/* Сцена с моделью — всегда 16:9 */
.h3d-stage{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;      /* единая пропорция для десктопа и мобилы */
  border-radius: var(--h3d-radius);
  overflow: hidden;
  background: #fff;
}

.h3d-stage__inner{
  position: absolute;
  inset: 0;
  display: grid;
}

/* Сам viewer/Visody заполняет сцену целиком */
.h3d-stage model-viewer,
.h3d-stage .visody-wrapper,
.h3d-stage iframe{
  width: 100% !important;
  height: 100% !important;
  display: block;
  border: 0;
}

/* ===== Мобильная версия ===== */

@media (max-width: 767.98px){
  .h3d{
    --h3d-pad: 16px;
    --h3d-radius: 12px;

    height: auto;            /* убираем 90vh */
    padding-inline: var(--h3d-pad);
    padding-top: 32px;       /* отступ сверху для модели */
  }

  .h3d-head{
    margin: 0 0 40px;        /* заголовок ближе к модели */
  }

  .h3d-title{
    font-size: clamp(20px, 5.2vw, 28px);
  }

  .h3d-stage{
    margin-top: 16px;        /* небольшой зазор от заголовка */
  }

  /* Прячем кнопки зума Visody/model-viewer, если они есть */
  .vsd-model-viewer-zoom-in-button,
  .vsd-model-viewer-zoom-out-button{
    display: none !important;
  }
}