/*
 * Временный слой для запуска статической сборки.
 * Он намеренно не меняет собранный assets/index-*.js.
 * После восстановления исходного проекта правила нужно перенести в компоненты.
 */

.pd-aq__ctaReveal {
  display: none !important;
}

/* В мобильной раскладке оставляем одну кнопку IMO. */
@media (width < 768px) {
  .pd-contact__btn--mobileOnly,
  .pd-wd__cta {
    display: none !important;
  }
}

.pd-siteFooter__legal {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.pd-siteFooter__legal a,
.pd-siteFooter__legal .pd-siteFooter__cookieSettings {
  color: var(--pd-footer-text);
  font-family: var(--pd-font-sans);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.28px;
  line-height: normal;
}

.pd-siteFooter__email {
  width: 100%;
  max-width: 100%;
  margin: 0;
  color: var(--pd-footer-text);
  font-family: var(--pd-font-sans);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.28px;
  line-height: normal;
  user-select: all;
}

.pd-root button,
.pd-languageSwitch {
  text-transform: none !important;
}

/* Утвержденный продающий текст первого экрана: сохраняем исходную композицию. */
.pd-hero__promo {
  gap: 16px;
}

.pd-hero__titleStrong--brand {
  white-space: nowrap;
}

.pd-hero__subtitle {
  max-width: 585px;
  margin: 0;
  color: #f5f1ffcc;
  font: 400 16px/1.3 var(--pd-font-sans);
  letter-spacing: -0.32px;
}

.pd-hero__subtitleLine {
  display: block;
}

.pd-hero__subtitleLine + .pd-hero__subtitleLine {
  margin-top: 4px;
}

@media (width < 768px) {
  .pd-sticky__desc--visible {
    max-height: none;
    overflow: visible;
  }

  /* The Consulting copy is longer than the other chips. Allow the active
     pane to expand the reserved text stack so the text doesn't overflow
     and overlap the Prism image. */
  .pd-wd--consulting .pd-wd__copyPane--active {
    position: relative;
  }

  .pd-wd--consulting .pd-wd__copyStack {
    padding-bottom: 12px;
  }

}

/* Дверь встроена в поток первого экрана: она всегда ниже текста, но остается
   частью общей композиции кадра. Работает одинаково для RU и EN, где длина
   заголовка разная. */
@media (width < 1200px) {
  .pd-hero__desktopBg {
    display: none;
  }

  .pd-hero__imageFrame {
    display: block;
    top: auto;
    bottom: 0;
    left: 50%;
    width: 100vw;
    height: clamp(190px, 30vh, 300px);
    aspect-ratio: auto;
    transform: translateX(-50%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 24%, #000 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 24%, #000 100%);
  }

  .pd-hero__image {
    object-fit: cover;
    object-position: center 46%;
  }
}

@media (768px <= width < 1200px) {
  .pd-hero__imageFrame {
    height: clamp(240px, 38vh, 380px);
  }
}

/* Широкий desktop: дверь занимает правую часть кадра и мягко растворяется
   в фоне слева, поэтому текстовая колонка остается чистой. */
@media (width >= 1200px) {
  .pd-hero__desktopBg {
    right: 0;
    left: auto;
    width: min(62vw, 1040px);
    mask-image: linear-gradient(to right, transparent 0%, #000 26%, #000 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 26%, #000 100%);
  }

  .pd-hero__desktopBgImg {
    height: 100%;
    object-fit: cover;
    object-position: 58% 45%;
    transform: none;
  }
}

@media (width >= 768px) {
  .pd-hero__promo {
    gap: 20px;
  }

  .pd-hero__subtitle {
    max-width: 650px;
    font-size: 18px;
    line-height: 1.32;
    letter-spacing: -0.36px;
  }

}

.pd-mobileHeader .pd-languageSwitch {
  flex: none;
  width: auto;
  min-width: 64px;
  height: 42px;
  margin-left: 12px;
  padding: 0 18px;
  color: #f5f2ff;
  text-decoration: none;
  transform-origin: 50%;
  transition: transform 180ms ease, opacity 180ms ease;
}

@media (hover: hover) {
  .pd-mobileHeader .pd-languageSwitch:hover {
    transform: scale(0.92);
  }
}

.pd-mobileHeader .pd-languageSwitch:active {
  transform: scale(0.92);
}

.pd-languageMenu {
  display: none;
}

@media (600px <= width < 768px) {
  .pd-mobileHeader .pd-languageSwitch {
    min-width: 54px;
    height: 38px;
    margin-left: auto;
    margin-right: 18px;
    padding: 0 14px;
    font-size: 12px;
  }
}

@media (width < 600px) {
  /* EN creators: increase only the title-to-collage gap by exactly 1 cm. */
  html[lang="en"] .pd-bg__collageSlot {
    margin-top: calc(-28px + 1cm);
  }

  /* EN mobile only: preserve the fixed buttons and raise only the door. */
  html[lang="en"] .pd-hero__imageFrame {
    transform: translateX(-50%) translateY(-4cm);
  }

  .pd-mobileHeader .pd-languageSwitch {
    display: none;
  }

  .pd-languageMenu {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 52px;
    padding: 0 14px;
    color: #f5f1ff80;
    border-bottom: 1px solid #f5f1ff17;
    font: 500 16px/1 var(--pd-font-sans);
    letter-spacing: -0.2px;
  }

  .pd-languageMenu__link {
    color: #f5f1ff80;
    text-decoration: none;
    transition: color 180ms ease;
  }

  .pd-languageMenu__link--active,
  .pd-languageMenu__link:hover {
    color: #9671f5;
  }
}

/* EN desktop and tablet only: raise the two hero CTAs by 4 cm. */
@media (width >= 600px) {
  html[lang="en"] .pd-hero__buttons {
    transform: translateY(-4cm);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pd-mobileHeader .pd-languageSwitch {
    transition: none;
  }
}

@media (width >= 768px) {
  .pd-siteFooter__legal {
    grid-area: 1 / 2;
    align-items: flex-end;
    align-self: start;
    justify-self: end;
    width: auto;
  }

  .pd-siteFooter__email {
    grid-area: 2 / 2;
    justify-self: end;
    width: auto;
  }
}



/* Responsive position calibration for the approved hero artwork. */
@media (768px <= width < 1200px) {
  html:not([lang="en"]) .pd-hero__imageFrame {
    transform: translateX(-50%) translateY(-5cm);
  }

  html:not([lang="en"]) .pd-hero__buttons {
    transform: translateY(-1.5cm);
  }

  html[lang="en"] .pd-hero__imageFrame {
    transform: translateX(-50%) translateY(-7cm);
  }

  html[lang="en"] .pd-hero__buttons {
    transform: translateY(3.5cm);
  }
}

@media (width < 768px) {
  html:not([lang="en"]) .pd-hero__imageFrame {
    transform: translateX(-50%) translateY(-5cm);
  }

  html:not([lang="en"]) .pd-hero__buttons {
    transform: translateY(-2cm);
  }

  html[lang="en"] .pd-hero__imageFrame {
    transform: translateX(-50%) translateY(-6cm);
  }

  html[lang="en"] .pd-hero__buttons {
    transform: translateY(-2cm);
  }

  .pd-bg {
    padding-bottom: calc(64px + 1cm);
  }

  .pd-bg__collageSlot {
    transform: translateY(1cm);
  }
}

@media (width >= 768px) {
  .pd-bg {
    padding-bottom: calc(72px + 1cm);
  }

  .pd-bg__collageSlot {
    transform: translateY(1cm);
  }
}

/* On mobile and narrow desktop, reserve space below the creators collage so
   the following copy and cards never overlap the photographs. */
@media (width < 1200px) {
  .pd-bg__collageSlot {
    margin-bottom: calc(-12px + 2cm);
  }
}

/* The English introduction contains more copy, so it receives one extra
   viewport of scroll space before the cards enter the frame. */
@media (width >= 768px) {
  html[lang="en"] .pd-sticky-track {
    min-height: 580vh;
  }

  html:not([lang="en"]) .pd-sticky-track {
    min-height: 465vh;
  }

  /* The EN description is taller than the source 320px transition cap.
     The extra centimetre plus four pixels keeps every line visible and moves the card row
     down by the same amount through the normal flex layout. */
  html[lang="en"] .pd-sticky__desc--visible {
    max-height: calc(320px + 1cm + 4px);
  }
}

/* Reserve distinct scroll distance for the three benefit cards and the CTA
   without accelerating the word-by-word text reveal. */
@media (width < 768px) {
  html:not([lang="en"]) .pd-sticky-track {
    min-height: 605vh;
  }

  html[lang="en"] .pd-sticky-track {
    min-height: 580vh;
  }
}

@media (width < 768px) and (prefers-reduced-motion: no-preference) {
  .pd-sticky__word {
    opacity: 0.22;
    transform: translateY(0.3em);
    transition: color 0.2s, opacity 0.38s ease, transform 0.38s ease;
  }

  .pd-sticky__word--filled {
    opacity: 1;
    transform: translateY(0);
  }

  .pd-sticky__desc {
    transform: translateY(0.6rem);
    transition: opacity 0.45s ease, max-height 0.45s ease, transform 0.45s ease, visibility 0s linear 0.45s;
  }

  .pd-sticky__desc--visible {
    transform: translateY(0);
  }
}

.pd-siteFooter__utility {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
}

.pd-siteFooter__legal {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  width: auto;
}

.pd-siteFooter__legal > :first-child::after {
  content: " |";
  margin-right: 6px;
}

.pd-siteFooter__utility .pd-siteFooter__email {
  grid-area: auto;
  justify-self: auto;
  width: auto;
}

@media (width >= 768px) {
  .pd-siteFooter__inner {
    position: relative;
  }

  .pd-siteFooter__utility {
    position: absolute;
    top: 72px;
    right: 16px;
    align-items: flex-end;
    width: auto;
  }

  .pd-siteFooter__utility .pd-siteFooter__legal {
    grid-area: auto;
    align-self: auto;
    justify-self: auto;
  }
}

.pd-siteFooter__cookieSettings {
  white-space: nowrap;
}

@media (width >= 768px) {
  .pd-siteFooter__metaRow {
    grid-template-rows: auto;
  }

  .pd-siteFooter__copyright {
    grid-area: 1 / 1;
    align-self: center;
  }
}

.pd-siteFooter__legal {
  flex-wrap: nowrap;
  white-space: nowrap;
}

.pd-siteFooter__legal > * {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  white-space: nowrap;
}

.pd-siteFooter__legal a,
.pd-siteFooter__legal .pd-siteFooter__cookieSettings {
  font-size: 12px;
}

@media (width >= 768px) {
  .pd-siteFooter__metaRow {
    grid-template-rows: auto;
  }

  .pd-siteFooter__copyright {
    grid-area: 1 / 1;
    align-self: center;
  }
}

/* Owner-provided hero artwork: media is intentionally static in both locales. */
.pd-hero__staticImage {
  animation: none !important;
  transition: none !important;
}