/* =====================================================================
   modal.css — окно «Join the Movement» и мобильное меню.
   Оба открываются кнопками с data-open="modal" / data-open="menu" (js/main.js).
   ===================================================================== */

/* ---------- окно «Join the Movement»: по центру экрана, фон затемнён ---------- */
.modal {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: 16px;
  background: rgba(31, 63, 91, .35);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  animation: fade-in .3s ease-in-out;
}
.modal[hidden] { display: none; }
html.is-locked { overflow: hidden; }          /* страница под окном не прокручивается */

.modal__box {
  position: relative; width: 1132px; height: 520px; max-height: calc(100dvh - 32px);
  border: 2px solid #fff; border-radius: 20px; background: #fff; overflow: clip;
}
.modal__box > * { position: absolute; }
.modal__glow  { inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.modal__decor { left: -9px; top: 194px; width: 933px; height: 323px; object-fit: cover; object-position: 50% 0; }
.modal__close { right: 8.8%; top: 20px; width: 2.98%; }
.modal__close img { width: 100%; }

.modal__tabs  { left: 50%; translate: -50% 0; top: 15px; }
.modal__title { left: 50%; translate: -50% 0; top: 84px; width: 796px; font: 500 50px/55px var(--head); text-align: center; }
.modal__text  { left: 50%; translate: -50% 0; top: 151px; width: 832px; line-height: 19.2px; text-align: center; }

/* формы Fouita (iframe); высоту подгоняет js/main.js */
.modal__form  { left: 271.1px; top: 212px; width: 613px; height: 259px; border: 0; background: transparent; }
.modal__form[data-panel="businesses"] { left: 270.9px; top: 182px; }
.modal__form:not(.is-active) { display: none; }

/* desktop 1250–1439 */
@media (max-width: 1439px) {
  .modal__box   { width: 84.01vw; background: rgba(255, 255, 255, .7); }
  .modal__decor { left: 0; }
  .modal__close { right: 5.79%; top: 16px; width: 3.02%; }
  .modal__tabs  { top: 10px; }
  .modal__title { top: 79px; }
  .modal__form  { left: 29%; top: 206px; width: 49.56%; height: 279px; }
  .modal__form[data-panel="businesses"] { left: 29%; top: 181px; }
}
/* tablet 740–1249 */
@media (max-width: 1249px) {
  .modal__box   { width: 74.07vw; height: 621px; }
  .modal__close { right: 3.93%; top: 20.5px; width: 3%; }
  .modal__title { top: 84px; width: 640px; font-size: 40px; line-height: 44px; }
  .modal__text  { left: 7.7px; translate: none; top: 147px; width: 668px; font-size: 14px; line-height: 16.8px; }
  .modal__form, .modal__form[data-panel="businesses"] { left: .8px; top: 217.4px; width: 99.76%; height: 137px; }
}
/* mobile <740 */
@media (max-width: 739px) {
  .modal__box   { width: 90vw; height: 478px; }
  .modal__decor { width: 374.4px; }
  .modal__close { right: 3.41%; top: 15px; width: 5.93%; }
  .modal__tabs  { left: 40.8px; translate: none; top: 13px; width: 236px; height: 28px; }
  .modal__tabs button { width: 117px; height: 26px; font-size: 12px; }
  .modal__title { top: 53px; width: 337px; font-size: 25px; line-height: 27.5px; }
  .modal__text  { left: 13px; top: 89px; width: 321px; }
  .modal__form  { left: 0; top: 130px; width: 99.93%; height: 292px; }
  .modal__form[data-panel="businesses"] { left: 0; top: 115px; }
}

/* ---------- мобильное меню (планшет и телефон) ----------
   Во весь экран, сверху своя «шапка» с крестиком. Координаты — от колонки, как у секций. */
.menu {
  position: fixed; inset: 0; z-index: 150; overflow-y: auto;
  background: linear-gradient(180deg, #cbd5de 0, var(--bg) 772px);
}
.menu[hidden] { display: none; }
.menu .wrap { height: 772px; }
.menu .wrap > * { position: absolute; }

.menu__bar {
  left: -4.1px; top: 20px; width: 740px; height: 80px;
  border-radius: 10px; box-shadow: inset 0 0 0 1px #fff;
  background: rgba(255, 255, 255, .4);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.menu__bar > * { position: absolute; }
.menu__logo-icon     { left: 17px; top: 22.9px; width: 35px; }
.menu__logo-wordmark { left: 64px; top: 25.4px; width: 85px; }
.menu__close         { left: 659.3px; top: 17px; width: 48.7px; }
.menu__close img     { width: 100%; }

.menu__nav a {
  position: absolute; left: 0; width: 595px; height: 30px;
  padding-left: 77.1px; font: 400 22px/28px var(--head);
}
.menu__nav a::before {   /* стрелка-маркер */
  content: ""; position: absolute; left: 0; top: 0; width: 30px; height: 30px;
  background: url(../img/icon-arrow-bullet.png) center / contain no-repeat;
}
.menu__nav a:nth-child(1) { left: .2px;  top: 160px; }
.menu__nav a:nth-child(2) { left: -1.8px; top: 220px; }
.menu__nav a:nth-child(3) { left: .2px;  top: 280px; }
.menu__nav a:nth-child(4) { left: .2px;  top: 340px; }
.menu__nav a:nth-child(5) { left: .2px;  top: 400px; }

.menu__line     { left: -.2px; top: 500px; width: 738px; height: 1px; background: var(--line); }
.menu__wordmark { left: -1.8px; top: 546px; width: 174px; }
.menu__tagline  { left: -1.8px; top: 620px; width: 292px; font: 500 20px/20px var(--head); }
.menu__video    { left: 345.2px; top: 545px; width: 392px; height: 149px; object-fit: cover; border: 1px solid var(--line); border-radius: 20px; }

@media (max-width: 739px) {
  .menu .wrap { height: 100vh; }
  .menu__bar { left: 50%; translate: -50% 0; top: 10px; width: 85.6vw; height: 51px; }
  .menu__logo-icon     { left: 16px; top: 14px; width: 27px; }
  .menu__logo-wordmark { left: 52px; top: 16px; width: 66px; }
  .menu__close         { left: auto; right: 21.8px; top: 9px; width: 34px; }

  .menu__nav a { width: 233px; height: 28px; padding-left: 30.2px; }
  .menu__nav a::before { top: 3px; width: 22.2px; height: 22.2px; }
  .menu__nav a:nth-child(1) { left: 14.9px; top: 120px; }
  .menu__nav a:nth-child(2) { left: 14.9px; top: 180px; }
  .menu__nav a:nth-child(3) { left: 14.9px; top: 240px; }
  .menu__nav a:nth-child(4) { left: 14.9px; top: 300px; }
  .menu__nav a:nth-child(5) { left: 14.9px; top: 360px; }

  .menu__line     { left: -5.8px; top: 445px; width: 332.8px; }
  .menu__wordmark { left: -7.5px; top: 487.3px; width: 102px; }
  .menu__tagline  { left: 126.7px; top: 484px; width: 200px; font-size: 14px; line-height: 14px; }
  .menu__video    { left: .6px; top: 554px; width: 320px; height: 139px; }
}