/* ==========================================================================
   Contact — окрема сторінка форми (Figma 735:1984 / 789:1407)

   Це той самий блок CTA, що на головній, але як самостійна сторінка:
   на десктопі під шапкою лежить смуга 90px кольору #211F12, а знімок і
   скляна панель починаються вже під нею. На мобільному шапка накриває
   знімок, а контент просто опускається з 70 на 109.
   ========================================================================== */

@media (min-width: 48em) {
  /* Секція в макеті 1449 = 90 (смуга шапки) + 1359 (сам блок). */
  .cta--page {
    padding-top: var(--header-height); /* 90px */
    background-color: var(--color-dark);
  }

  /* Знімок 1440×1359 стоїть на y=90, тобто під смугою шапки.
     Зсуваємо тільку сам <picture> — <img> усередині лишається inset: 0,
     інакше offset застосується двічі й кадр поїде вниз. */
  .cta--page .cta__bg,
  .cta--page::after {
    top: var(--header-height);
    height: auto;
    bottom: 0;
  }

  /* Панель у макеті рівно 1359 — інакше скло не доходить до низу секції. */
  .cta--page .cta__panel {
    min-height: 84.9375rem;
  }
}

@media (max-width: 47.99em) {
  /* Мобільна секція 1761 проти 1722 на головній — рівно на ті 39px,
     на які контент опустився з 70 на 109. */
  .cta--page {
    min-height: 110.0625rem; /* 1761px */
  }

  .cta--page .cta__panel {
    padding-top: 6.8125rem; /* 109px */
  }
}

/* Активний пункт меню: на цій сторінці ним є кнопка CONTACT. */
.header__cta.is-active,
.nav__item--cta .btn--ghost.is-active {
  color: var(--color-dark);
  background-color: var(--color-border-gold);
}