/* ====== TITLE ====== */
.title-video-main {color: #000000; padding-left:100px; padding-top: 30px; padding-bottom: 30px; font-weight: 500; letter-spacing: -.01em; line-height: 1.1;
font-size: clamp(21px, 3.2vw, 52px);}
.title-desc-1 {color: #000000; font-weight: 400; font-size: 14px;padding: 0px 250px 0px 250px; }
.title-desc-2 {color: #000000; font-weight: 400; font-size: 14px;padding: 0px 250px; }
@media (max-width:767px){
 .title-video-main{padding: 0px 0px 20px 0px;}
 .title-desc-1 {display:none;}
 .title-desc-2 {color: #000000; font-weight: 400; padding: 10px; text-align: center; font-weight: 400; font-size: 9px;}
}


/* ====== CTA + SLIDER ====== */
.hh-cta{/*padding:clamp(28px,5vw,125px) 0;*/ padding-left:120px; padding-right:120px;padding-top:100px;padding-bottom:120px; background: #fff;}
.hh-cta__in{/*max-width:1240px; */ margin:0 auto; padding: 0px; /*padding:0 clamp(16px,2vw,24px);*/}
.hh-cta__panel{display:grid;grid-template-columns:1.05fr 1.2fr;gap:24px;
  background:#0e0e12;border-radius:20px;overflow:hidden;/*box-shadow:0 12px 40px rgba(0,0,0,.12);*/}
.hh-cta__left{color:#fff;padding:clamp(24px,4vw,56px)}
.hh-cta__title{margin:0 0 14px;font-weight:500;letter-spacing:-.01em;line-height:1.1;font-size:clamp(20px,2.6vw,36px)}
.hh-cta__desc{margin:0 0 22px;max-width:54ch;color:#d0d0d0;
  font-size:clamp(14px,1.15vw,18px);}
.hh-cta__btn{display:inline-block;background:#fff;color:#111;font-weight:400;border-radius:10px;
  padding:12px 18px;border:0;cursor:pointer}
.hh-cta__slider{position:relative;background:#000}
.hh-cta__viewport{position:relative;overflow:hidden;aspect-ratio:16/9;min-height:300px}
.hh-cta__track{display:flex;transition:transform .45s ease}
.hh-cta__slide{position:relative;flex:0 0 100%}
.hh-cta__media{display:block;width:100%;height:100%;object-fit:cover}
.dots{position:absolute;left:18px;bottom:18px;z-index:3;display:flex;align-items:center;gap:16px;
  background:#2b2b30;border-radius:999px;padding:10px 18px}
.dots__thumb{position:absolute;left:0;top:50%;transform:translate(var(--thumb-x,0),-50%);
  width:34px;height:16px;background:#fff;border-radius:999px;transition:transform .3s ease}
.dot{position:relative;width:12px;height:12px;border-radius:50%;background:#8b8b92;border:0;padding:0;cursor:pointer;z-index:1}
.dot[aria-current="true"]{background:#d7d7dc}
.pp{position:absolute;right:18px;bottom:18px;z-index:3;width:48px;height:48px;display:grid;place-items:center;
  border-radius:999px;background:#2b2b30;color:#fff;border:0;cursor:pointer;transition:transform .18s ease,background .18s ease}
.pp:hover{transform:scale(1.06);background:#323238}
.is-paused .pp .fa-pause{display:none}
.is-playing .pp .fa-play{display:none}
@media (max-width:1024px){
  .hh-cta__in {padding: 15px;}
  .hh-cta__left {margin-top: 20px;}
  .hh-cta{ padding-left:0px; padding-right:0px;padding-top:30px;padding-bottom:0px;}
  .hh-cta__panel{grid-template-columns:1fr}
  .hh-cta__viewport{aspect-ratio:3/2}
  .hh-cta__title{text-wrap: balance;}
  .hh-cta .hh-cta__left .hh-cta__desc{max-width: 38vh; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; word-break: normal; text-wrap: pretty;}
  .hh-cta__desc {max-width: 38vh;}
  .hh-cta li {max-width: 37vh;font-size: 14px;}
  .pp { display: none;}
}

/* === CTA slider: fix для Safari и разных высот колонок === */

/* панель тянет обе колонки по высоте строки */
.hh-cta__panel{
  align-items: stretch;
}

/* сам контейнер слайдера без фона */
.hh-cta__slider{
  background: transparent;
  line-height: 0; /* убираем базовую линию на всякий случай */
}

/* viewport: на ДЕСКТОПЕ занимаем всю высоту строки, aspect-ratio отключаем */
@media (min-width:1025px){
  .hh-cta__viewport{
    height: 100%;
    aspect-ratio: auto;        /* критично: иначе правая колонка ниже */
    overflow: hidden;
    border-radius: inherit;
    background: #131315;       /* как у .hh-cta__panel */
    transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(white, black);
  }
  .hh-cta__track,
  .hh-cta__slide{ height: 100%; }
  .hh-cta__slide{ position: relative; }
  .hh-cta__media{
    position: absolute;
    inset: 0px;                               /* overscan, чтобы не было щелей */
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    object-fit: cover;
    display: block;
    backface-visibility: hidden;
    transform: translateZ(0);
  }
}

/* на МОБИЛЕ оставляем соотношение сторон */
@media (max-width:1024px){
  .hh-cta__viewport{
    aspect-ratio: 3 / 2;
    height: auto;
    overflow: hidden;
    border-radius: inherit;
    background: #131315;
  }
	  .dots {padding: 5px 18px;}
  .dot {width: 10px; height: 10px;}
  .hh-cta__track,
  .hh-cta__slide{ height: 100%; }
  .hh-cta__slide{ position: relative; }
  .hh-cta__media{
    position: absolute;
    inset: -2px;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    object-fit: cover;
  }
}


/* ====== CARDS GRID ====== */
.hh-cards{color:#fff;padding:clamp(28px,4vw,64px) 0}
.hh-cards__in{max-width:1240px;margin:0 auto;padding:0 clamp(16px,2vw,24px)}
.hh-cards__list{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;list-style:none;margin:0;padding:0}
.hh-card{--radius:18px;position:relative;border-radius:var(--radius);overflow:hidden;/*box-shadow:0 10px 30px rgba(0,0,0,.35)*/}
.hh-card a{display:block;position:relative;isolation:isolate;aspect-ratio:3/4}
.hh-card__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.hh-card__shade{position:absolute;left:0;right:0;bottom:0;height:44%;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.15) 45%,rgba(0,0,0,.55) 100%);z-index:1;pointer-events:none}
.hh-card__cap{position:absolute;left:16px;right:16px;bottom:14px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px}
.hh-card__title{font-weight:300;letter-spacing:-.01em;line-height:1.2;font-size:18px;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.hh-card__arr{width:36px;height:36px;display:grid;place-items:center;transition:transform .2s ease,background .2s ease}
.hh-card__arr svg{width:16px;height:16px;transition:transform .2s ease}
.hh-card:hover .hh-card__img{transform:scale(1.04)}
.hh-card:hover .hh-card__arr svg{transform:translateX(2px)}
.hh-card a:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:var(--radius)}
@media (max-width:1024px){
  .hh-cards__list{display:flex;gap:16px;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;padding:0 8px}
  .hh-card{flex:0 0 86vw;scroll-snap-align:start}
}

/* ====== ACCORDION + RIGHT IMAGE ====== */
.hh-acc{
  /* можно задать фон: --bg:#1d1d1d; */
  --text:#fff; --muted:#cfcfcf; --accent:#af0b0b;
  --media-w: min(44vw, 660px);          /* ширина правой колонки */
  --media-pad: clamp(16px, 3vw, 40px);  /* внутренний отступ справа/слева внутри колонки */
  position:relative; color:var(--text); background:var(--bg);
  width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  overflow:hidden; isolation:isolate;
}

.hh-acc__in{
  margin:0 auto;
  padding: 180px 50px;
  padding-right: calc(var(--media-w));  /* оставляем место под правую колонку */
}

.hh-acc__title{
  margin:0 0 22px; font-weight:300; letter-spacing:.02em; line-height:1.05;
  font-size:clamp(28px,4.2vw,64px)
}
.hh-acc__sub{
  display:inline-block; margin:0 0 26px; padding:0 0 5px;
  font-size:clamp(18px,1.6vw,28px); font-weight:300;
  border-bottom:1px solid var(--accent); color:#e9e9e9
}

.acc{ max-width:860px }
.acc__item{ border-bottom:1px solid rgba(255,255,255,.08) }
.acc__btn{
  width:100%; text-align:left; background:transparent; border:0; color:inherit;
  padding:24px 56px 24px 0; cursor:pointer; position:relative;
  font-size:clamp(16px,1vw,30px); font-weight:400; letter-spacing:.02em
}
.acc__btn:after,.acc__btn:before{
  content:""; position:absolute; top:50%; right:6px; width:24px; height:2px; background:#fff;
  transform:translateY(-50%); transition:transform .2s ease, opacity .2s ease
}
.acc__btn:before{ transform:translateY(-50%) rotate(90deg) }
.acc__item.is-open .acc__btn:before{ transform:translateY(-50%) rotate(0deg); opacity:0 }

.acc__panel{ overflow:hidden; max-height:0; transition:max-height .35s ease }
.acc__inner{ padding:0 0 22px; color:var(--muted); font-size:clamp(14px,1.15vw,18px); line-height:1.65 }

/* ПРАВАЯ КОЛОНКА: теперь центрируем картинку внутри колонки и даём «внутренний гаттер» от краёв экрана */
.hh-acc__media{
  position:absolute; right:0; top:0; bottom:0; width:var(--media-w);
  display:flex; align-items:center; justify-content:center;   /* центр по колонке */
  padding: 0 var(--media-pad);                                /* отступ от краёв экрана */
  box-sizing:border-box;
  pointer-events:none;
  padding-top: 90px;
    padding-bottom: 90px;
}
.hh-acc__img{
  width:100%; height:auto; object-fit:cover;
  pointer-events:auto; display:block;
  /* если хочешь, чтобы картинка не упиралась в верх/низ при экстремальных соотношениях сторон: */
  max-height: calc(100% - 2*var(--media-pad));
  border-radius: 12px; /* можно убрать, если нужен «квадратный» край */
}

/* MOBILE */
@media (max-width:1024px){
  .hh-acc {padding-bottom: 60px;}
  .hh-acc__title {margin-top: 30px;}
  .acc__btn {padding: 10px 56px 10px 0;}
  .hh-acc__in{ padding-right:16px; padding: 20px 20px;}
  .hh-acc__media{position:relative; width:100%; top:auto; bottom:auto; padding: 0; margin-top:18px;}
  .hh-acc__img{ width:90%; max-height:none; border-radius:12px; margin-bottom: 25px; }
}



/* === Текстовый блок (центр, узкая колонка) - белый фон === */
.hh-cons{
  /* full-bleed контейнер как у остальных секций */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  /* вертикальные отступы секции 
  padding-block: clamp(48px, 10vw, 250px); */
  padding-top: 120px;
  padding-bottom: 120px;
  background: #fff;
  color: inherit;
}

.hh-cons__in{
  /* такая же «рабочая ширина», как у карточных/строительных блоков */
  max-width: 1920px;
  padding-left: clamp(24px, 6vw, 88px);
  padding-right: clamp(24px, 5vw, 64px);
  margin-inline: auto;
}

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

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

.hh-cons__text p{ margin: 0; }

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


/* === Текстовый блок (центр, узкая колонка) - черный фон === */
.hh-cons-dark{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-top: 120px;
  padding-bottom: 120px;
  background: transparent;
  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;}
}












/* ====== Porsche Editorial clone — fixed ====== */
.PcomModuleWrapper__root__1eec4.PcomModuleWrapper__background-none__1eec4{
  --mx: min(1440px, 94vw);
  --padX: clamp(16px, 2vw, 24px);
  --padY: clamp(28px, 4vw, 30px);
  --gap: clamp(16px, 2.2vw, 28px);
  --radius: 18px;
  color:#1d1d1d;
  background: #fff;
  padding: var(--padY) 0;
}

/* Общая сетка контейнеров */
.PcomModuleWrapper__root__1eec4 .PcomGrid__grid__f560b{
  width: var(--mx);
  margin: 0 auto;
  display:grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  padding: 0 var(--padX);
}

/* ---------- Заголовок секции ---------- */
.PcomModuleWrapper__root__1eec4 .PcomSectionTitle__root__b2967{
  max-width: 980px;
  margin-inline: auto;
}
.PcomModuleWrapper__root__1eec4 .PcomSectionTitle__root__b2967 .PcomHeading__root__39ea1{
  margin: 0 0 .35em;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.01em;
  font-size: clamp(24px, 3.3vw, 48px);
  text-align: center;
}
.PcomModuleWrapper__root__1eec4 .PcomSectionTitle__root__b2967 .PcomText__root__bf0ad{
  margin: 0;
  line-height: 1.6;
  font-size: clamp(15px, 1.15vw, 18px);
  text-align: center;
  text-wrap: balance;
  hyphens: auto;
}

/* ---------- Редакционная сетка ---------- */
.PcomModuleWrapper__root__1eec4 .Editorial__root__dc5b0{ /* mobile: одна колонка */ }

/* Медиа: 16:9, радиус, лёгкая тень как на референсе */
.PcomModuleWrapper__root__1eec4 .EditorialMedia__mediaContainer__86d93{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius: var(--radius);
  background:#e9eaec;
  box-shadow: 0 8px 28px rgba(0,0,0,.12);
}
.PcomModuleWrapper__root__1eec4 .PcomImage__root__1fab8{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* Текст снизу под левой колонкой (по умолчанию моб. порядок как в HTML) */
.PcomModuleWrapper__root__1eec4 .Editorial__textContainer__dc5b0{
  margin-top: clamp(14px, 1.8vw, 24px);
}
.PcomModuleWrapper__root__1eec4 .PcomHeading__size-large__39ea1{
  font-size: clamp(20px, 2vw, 28px);
  margin: 0 0 .4em;
  font-weight: 500;
}
.PcomModuleWrapper__root__1eec4 .PcomText__size-small__bf0ad{
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.6;
  max-width: 720px;
}

/* ---------- Десктопная раскладка (как у Porsche в sizes) ---------- */
@media (min-width: 760px){
  .PcomModuleWrapper__root__1eec4 .Editorial__root__dc5b0{
    grid-template-columns: 61.8% 38.2%;
    grid-auto-rows: auto;
    align-items: start;
  }

  /* Левый большой кадр — на два ряда */
  .PcomModuleWrapper__root__1eec4 .Editorial__mediaBig__dc5b0{
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  /* Правые кадры — верх/низ */
  .PcomModuleWrapper__root__1eec4 .Editorial__imageMedium__dc5b0{
    grid-column: 2; grid-row: 1;
  }
  .PcomModuleWrapper__root__1eec4 .Editorial__imageSmall__dc5b0{
    grid-column: 2; grid-row: 2;
  }

  /* ВАЖНО: текст только под левой колонкой, а не на всю ширину */
  .PcomModuleWrapper__root__1eec4 .Editorial__textContainer__dc5b0{
    grid-column: 1;        /* фикс: НЕ 1 / -1 */
    grid-row: 3;
    align-self: start;
    padding-right: clamp(8px, 1.6vw, 24px);
  }
}

/* ---------- Крупные экраны (≈1920+) ---------- */
@media (min-width: 1920px){
  .PcomModuleWrapper__root__1eec4 .PcomGrid__grid__f560b{
    width: min(1440px, 86vw);
  }
}

/* ---------- Мягкие появления (если класс добавлен) ---------- */
.PcomModuleWrapper__root__1eec4 .EditorialMedia__root__86d93,
.PcomModuleWrapper__root__1eec4 .Editorial__textContainer__dc5b0{
  opacity:0; transform:translateY(10px);
  transition:opacity .5s ease, transform .5s ease;
}
.PcomModuleWrapper__root__1eec4 .EditorialMedia__isVisible__86d93,
.PcomModuleWrapper__root__1eec4 .Editorial__isVisible__dc5b0{
  opacity:1; transform:none;
}

/* 1) SectionTitle — растянуть на всю ширину и стэкнуть элементы */
.PcomModuleWrapper__root__1eec4 .PcomGrid__grid__f560b.PcomSectionTitle__root__b2967{
  width: var(--mx);              /* держим ту же контейнерную ширину */
  grid-template-columns: 1fr;    /* один столбец */
  row-gap: clamp(8px, 1.2vw, 14px);
}
.PcomModuleWrapper__root__1eec4 .PcomSectionTitle__root__b2967{
  max-width: none;               /* убираем случайные ограничения */
}
.PcomModuleWrapper__root__1eec4 .PcomSectionTitle__row__b2967{
  grid-column: 1 / -1;
  justify-self: center;
  text-align: center;
}

/* 2) Editorial — текст под 1-й картинкой, напротив 3-й */
@media (min-width: 760px){
  .PcomModuleWrapper__root__1eec4 .Editorial__root__dc5b0{
    grid-template-columns: 61.8% 38.2%;
    grid-template-rows: auto auto;   /* ровно две строки */
    align-items: start;
  }

  /* row 1 */
  .PcomModuleWrapper__root__1eec4 .Editorial__mediaBig__dc5b0{
    grid-column: 1; grid-row: 1;     /* БОЛЬШАЯ слева, больше НЕ span 2 */
  }
  .PcomModuleWrapper__root__1eec4 .Editorial__imageMedium__dc5b0{
    grid-column: 2; grid-row: 1;     /* средняя справа сверху */
  }

  /* row 2 */
  .PcomModuleWrapper__root__1eec4 .Editorial__textContainer__dc5b0{
    grid-column: 1; grid-row: 2;     /* ТЕКСТ слева снизу */
    margin-top: 0;                    /* отступ даёт gap сетки */
    padding-right: clamp(8px, 1.6vw, 24px);
    max-width: 720px;                 /* как на референсе — компактнее строки */
    text-align: left;
  }
  .PcomModuleWrapper__root__1eec4 .Editorial__imageSmall__dc5b0{
    grid-column: 2; grid-row: 2;     /* малая справа снизу */
  }
}


/* MOBILE layout: big on top, two half-width below, then text */
@media (max-width: 759.98px){
  .PcomModuleWrapper__root__1eec4 .Editorial__root__dc5b0{
    display: grid;
    grid-template-columns: 1fr 1fr;                  /* две колонки */
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "big   big"                                    /* большой кадр на всю ширину */
      "med   small"                                  /* два кадра по 1/2 */
      "text  text";                                  /* текст под ними, на всю */
    gap: var(--gap);
  }

  .PcomModuleWrapper__root__1eec4 .Editorial__mediaBig__dc5b0{   grid-area: big; }
  .PcomModuleWrapper__root__1eec4 .Editorial__imageMedium__dc5b0{ grid-area: med; }
  .PcomModuleWrapper__root__1eec4 .Editorial__imageSmall__dc5b0{  grid-area: small; }
  .PcomModuleWrapper__root__1eec4 .Editorial__textContainer__dc5b0{
    grid-area: text;
    margin-top: 0;                 /* отступ даёт gap */
    padding-right: 0;
    max-width: none;               /* на мобиле текст на всю ширину */
    text-align: left;
  }
	.PcomModuleWrapper__root__1eec4 .PcomHeading__size-large__39ea1 {padding-top: 20px;}

  /* чтобы все три кадра были одинаковой формы */
  .PcomModuleWrapper__root__1eec4 .EditorialMedia__mediaContainer__86d93{
    aspect-ratio: 16/9;            /* фиксируем соотношение */
    border-radius: 18px;           /* как у десктопа */
  }
}

.PcomModuleWrapper__root__1eec4 .Editorial__root__dc5b0{padding-bottom: 90px;}
@media (max-width: 759.98px){ .PcomModuleWrapper__root__1eec4 .Editorial__root__dc5b0padding-bottom: 0px;}}

.vc_col-has-fill>.vc_column-inner, .vc_row-has-fill+.vc_row-full-width+.vc_row>.vc_column_container>.vc_column-inner, .vc_row-has-fill+.vc_row>.vc_column_container>.vc_column-inner, .vc_row-has-fill>.vc_column_container>.vc_column-inner {padding-top: 0px;}