/* yacht.camp — главная, перенос дизайна из Figma (эталон 6:10).
   Значения только из tokens.css (собран из design/tokens.json). */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* псевдо-жир снят: у Inter Tight есть настоящий 800 (директор 14.09) */
section { scroll-margin-top: var(--bar-height-stuck); }

body {
  margin: 0;
  background: var(--semantic-bg-page);
  color: var(--semantic-text-on-light);
  font-family: var(--font-family-sans);
  -webkit-font-smoothing: antialiased;
}

/* ─── Q1 · фильм-скроллинг ──────────────────────────────────────
   Высота задаёт длину скраба: 3 экрана прокрутки = 9 секунд плёнки. */

.film { height: 300vh; position: relative; }
.film__sticky {
  position: sticky; top: 0; height: 100svh;
  overflow: clip; isolation: isolate;
}
.film__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  /* на широких экранах cover режет кадр по вертикали — držим нижний край
     (вода под яхтами), запас неба сверху уходит под шапку */
  object-position: center bottom;
}

/* H1: Comfortaa Bold капсом, navy (решение директора 29.08 — жёлтый снят,
   контраст-вопрос закрыт), верхняя треть кадра, по центру */
.film__title {
  position: absolute; inset: 0; z-index: 2;
  display: flex; justify-content: center;
  padding: calc(var(--bar-height-hero) + 4vh) var(--space-8) 0;
  pointer-events: none;
}
.film__title h1 {
  margin: 0; text-align: center;
  color: var(--color-navy-600);
}

/* ─── Бегущая строка после фильма ──────────────────────────────── */

.marquee {
  background: var(--color-navy-600);
  overflow: hidden;
  padding: var(--space-4) 0;
}
.marquee__track {
  display: flex; width: max-content;
  will-change: transform;   /* ленту двигает скролл страницы, см. home.js */
}
.marquee__seq { display: flex; align-items: center; flex: none; }
.marquee__item {
  font-family: var(--font-family-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 1.9vw, 1.75rem);
  color: var(--semantic-text-on-dark);
  white-space: nowrap;
}
.marquee__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-sun-500);
  margin: 0 var(--space-6); flex: none;
}

/* ─── Заглушки блоков Q2–Q9 ────────────────────────────────────── */

.stub {
  min-height: var(--block-height); display: grid; align-items: center;
  padding: var(--space-24) var(--space-8);
  border-top: 1px solid var(--semantic-border-light);
}
.stub__in { max-width: 1180px; margin: 0 auto; width: 100%; text-align: center; }
.stub__tag { color: var(--color-navy-300); margin: 0 0 var(--space-4); }
.stub h2 { margin: 0; color: var(--color-navy-600); }
.stub:last-of-type { padding-bottom: calc(var(--space-24) + 30px); }

/* ─── Полноширинное фото (контраст даёт фотография, журнал п.8) ── */

.photo { position: relative; height: var(--block-height); overflow: clip; }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo__caption {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  margin: 0; width: max-content; max-width: 90%;
  color: var(--semantic-text-on-dark); text-align: center;
  text-shadow: 0 2px 30px rgb(11 42 72 / .5);
}
.photo__caption h2 { margin: 0; }
.photo__lead { margin: var(--space-6) 0 var(--space-8); }
.photo__ctas { display: flex; gap: var(--space-4); justify-content: center;
  flex-wrap: wrap; text-shadow: none; }
/* цвета кнопок туров — приказ директора 03.09: navy-300 и verde-400 */
.cta--tour { margin-left: 0; border-color: transparent; }
.cta--yacht { background: var(--color-navy-300); color: var(--color-navy-900); }
.cta--yacht:hover { background: var(--color-navy-600); color: var(--semantic-text-on-dark); }
.cta--cat { background: var(--color-verde-400); color: var(--color-navy-900); }
.cta--cat:hover { background: var(--color-verde-600); color: var(--semantic-text-on-dark); }

/* ─── Q4 · экипаж: карточки 3:4 по центру, тайтл и текст под ними
   (директор 31.08) ──────────────────────────────────────────────── */

/* карта-подложка ~10% под кремовой вуалью (директор 12.09) */
.crew { min-height: var(--block-height); display: grid; align-items: center;
  padding: var(--space-16) var(--block-inset); position: relative;
  background:
    linear-gradient(rgb(249 240 220 / .9), rgb(249 240 220 / .9)),
    url(/assets/q8-map.jpg) center bottom / cover no-repeat; }
.crew__in { width: 100%; display: flex; flex-direction: column;
  align-items: center; text-align: center; }
.crew__cards { display: flex; gap: var(--space-6); justify-content: center; }
/* Карточка экипажа: фото + скругление + тени, без стекла и каймы
   (директор 13.09: стекло снято, тени оставить) */
.crewcard { position: relative; margin: 0; width: 300px; flex: none;
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: 0 5px 8px -4px rgb(11 42 72 / .3),
              0 18px 32px -12px rgb(11 42 72 / .3); }
.crewcard img { display: block; width: 100%; aspect-ratio: 3 / 4;
  height: auto; object-fit: cover; }
.crewcard figcaption {
  position: absolute; inset: auto 0 0 0; padding: var(--space-12) var(--space-6) var(--space-6);
  background: linear-gradient(to top, rgb(11 42 72 / .85), rgb(11 42 72 / 0));
  display: flex; flex-direction: column; gap: 2px; text-align: left;
}
.crewcard__role { color: var(--color-sun-500); }
.crewcard__name { color: var(--semantic-text-on-dark);
  font-family: var(--font-family-display); font-weight: 700; font-size: 24px; }
.crewcard__sub { color: var(--color-sand-300); }

.crew__h { margin: var(--space-12) 0 0; color: var(--color-navy-600); }
.crew__lead { color: var(--semantic-text-muted-light);
  margin: var(--space-6) auto var(--space-8); max-width: 62ch; }
.cta--navy { display: inline-block; margin-left: 0; border-color: var(--color-navy-600);
  color: var(--color-navy-600); }
.cta--navy:hover { background: var(--color-navy-600); color: var(--semantic-text-on-dark); }

@media (max-width: 1024px) {
  /* грид-ячейка не ужимается ниже контента — без min-width:0 три карточки
     (804px) распирают страницу и дают горизонтальный скролл всему документу */
  .crew__in { min-width: 0; max-width: 100%; }
  /* peek-паттерн как у отзывов (директор 13.09): лента во весь экран,
     следующая карточка уходит ЗА край, а не режется рамкой */
  .crew__cards { width: calc(100% + 2 * var(--block-inset));
    margin: 0 calc(-1 * var(--block-inset));
    padding: 0 var(--block-inset) var(--space-2);
    justify-content: flex-start;
    overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
  .crew__cards::-webkit-scrollbar { display: none; }
  .crewcard { width: 252px; scroll-snap-align: center; }
}
@media (max-width: 560px) {
  /* тайтл «Meet your skipper» в одну строку */
  .crew__h { font-size: 7.2vw; white-space: nowrap; }
}

/* ─── Q5 · безопасность: тайтл жёлтым на воде, пункты белым внизу
   (разметка директора 30.08, подложка снята) ─────────────────── */

.safety { position: relative; overflow: clip;
  /* стандарт фото-блока из эталона Figma: 620px при 1440 (Q5), кроп cover */
  height: var(--block-height); }
.safety__bg { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 70% 81%; z-index: -1; }  /* кроп сдвинут: +высота меню низа, верх срезан */
/* тайтл + колонки — один блок, прижатый к низу кадра (красная линия директора) */
.safety__content { position: absolute; left: 0; right: 0; bottom: 6%;
  padding: 0 var(--block-inset); }
.safety__h { margin: 0 0 calc(var(--space-12) + var(--space-6)); color: var(--color-sun-500); }  /* низ тайтла = низ катамарана */
.safety__list { margin: 0; display: flex; gap: var(--space-12); }
.safety__list > div { flex: 1 1 0; }
.safety__list dt {  /* H3 по шкале (24), капс не нужен — как в эталоне Q4 */
  font-family: var(--font-family-display); font-weight: 700;
  font-size: 1.5rem; line-height: 1.25; color: #fff;
}
.safety__dots { display: none; }
.safety__list dd { margin: var(--space-3) 0 0;  /* дискрипшен = lead 21 везде (директор 31.08, эталон — блок экипажа) */
  font-size: clamp(1.125rem, 1.5vw, 1.3125rem); line-height: 1.45; color: #fff; opacity: .92; }



/* ─── Q6 · нас много: флотилия, тайтл-дискрипшен-кнопка внизу слева ── */

.many { position: relative; overflow: clip; height: var(--block-height); }
.many__bg { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%; z-index: -1; }
.many__content { position: absolute; left: 0; right: 0; bottom: 6%;
  padding: 0 var(--block-inset); }
.many__h { margin: 0; color: var(--color-sun-500); }
.many__lead { margin: var(--space-6) 0 var(--space-8);
  color: #fff; max-width: 58ch; }
.cta--sun { display: inline-block; margin-left: 0; border-color: transparent;
  background: var(--semantic-cta-bg); color: var(--semantic-cta-text); }
.cta--sun:hover { background: var(--color-cream-100); color: var(--color-navy-900); }

@media (max-width: 900px) {
  .many { height: auto; }
  .many__content { position: static; padding: var(--space-16) var(--space-4); }
}

/* ─── Q8 · отзывы: бесконечная карусель, 4 карточки в кадре ────── */

/* подложка отзывов: коллаж фото гостей ~20% под кремовой вуалью
   (фон на самой секции — ::before с z-index:-1 глючит в iOS Safari) */
.reviews { min-height: var(--block-height); display: flex;
  flex-direction: column; justify-content: center;
  padding: var(--space-16) 0; overflow: clip; position: relative;
  background:
    linear-gradient(rgb(249 240 220 / .8), rgb(249 240 220 / .8)),
    url(/assets/q8-collage2.jpg) center bottom / cover no-repeat; }
.reviews__h { margin: 0 var(--block-inset) var(--space-12);
  color: var(--color-navy-600); text-align: center; }
.reviews__wrap { display: flex; align-items: center; gap: var(--space-3);
  padding: 0 var(--space-4);
  /* потолок ленты: 3 карточки по 330 (чуть шире капитанских 300) + зазоры
     + стрелки, дальше центрируется */
  max-width: 1166px; margin: 0 auto; width: 100%; }
/* Финал 13.09: НИКАКОГО нативного скролла — на iOS любой overflow-скроллер
   уходит в отдельный слой и рисуется мимо любых клипов/масок. Ленту возит
   JS-transform, свайп — pointer-события; статичный overflow:hidden iOS
   режет без фокусов. */
.reviews__viewport { flex: 1 1 auto; min-width: 0;
  container-type: inline-size;
  overflow: hidden; border-radius: var(--radius-lg);
  /* 2px с боков: гасит антиалиасинговый волосок кромки обрезанной соседней
     карточки (её край стоит ровно на линии клипа); лента статична —
     clip-path здесь работает надёжно */
  clip-path: inset(0 2px);
  touch-action: pan-y; cursor: grab; }
.reviews__viewport.is-dragging { cursor: grabbing; }
.reviews__track { display: flex; width: max-content;
  will-change: transform;
  padding: var(--space-2) 0 var(--space-8); }   /* воздух под тени карточек */
.reviews__nav { flex: none; width: 40px; height: 40px; border: none;
  cursor: pointer; border-radius: 50%;
  background: var(--semantic-cta-bg); color: var(--semantic-cta-text);
  /* глиф «›» кривой по метрикам — центр гридом + оптическая поправка */
  font-size: 24px; display: grid; place-items: center;
  line-height: 0; padding: 0 0 3px; }
.reviews__nav:hover { background: var(--color-navy-600);
  color: var(--semantic-text-on-dark); }
.reviews__dots { display: flex; justify-content: center; align-items: center;
  gap: 10px; margin-top: var(--space-8); min-height: 12px; }
.reviews__dots button { width: 10px; height: 10px; padding: 0; border: none;
  cursor: pointer; border-radius: 5px; background: rgb(22 74 123 / .35);
  transition: width .25s ease, background .25s ease; }
.reviews__dots button:hover { background: rgb(22 74 123 / .6); }
.reviews__dots .is-active { width: 30px; background: var(--color-navy-600); }

.revcard { position: relative; margin: 0 var(--space-3);
  /* ровно 3 в кадре (директор): ширина от вьюпорта-скроллера (container query),
     track теперь max-content и проценты от него не работают */
  flex: none;
  width: calc((100cqw - 6 * var(--space-3)) / 3); min-width: 300px;
  background: #fff; border: 1px solid var(--semantic-border-light);
  border-radius: var(--radius-lg);
  /* контактная тень с нулевым горизонтальным выносом: тень соседней
     карточки затекала в кадр и читалась «полосой» на iPad (диагноз 13.09) */
  box-shadow: 0 3px 5px -3px rgb(11 42 72 / .3);
  padding: var(--space-12) var(--space-8) var(--space-8);
  display: flex; flex-direction: column; }
/* объёмная тень — суженным слоем под карточкой, за её бока не выходит */
.revcard::after { content: ""; position: absolute; z-index: -1;
  left: 16px; right: 16px; top: 40%; bottom: 2px; border-radius: inherit;
  box-shadow: 0 8px 12px -6px rgb(11 42 72 / .3),
              0 22px 36px -14px rgb(11 42 72 / .3); }
.revcard__mark { position: absolute; top: 2px; left: var(--space-6);
  font-family: var(--font-family-display); font-weight: 700;
  font-size: 72px; line-height: 1; color: var(--color-sun-500); }
.revcard blockquote { margin: var(--space-6) 0 0; flex: 1;
  font-size: 1.125rem; line-height: 1.55;
  color: var(--semantic-text-on-light); }
/* ≤900 (планшет-портрет и телефон): peek-паттерн (директор 13.09) —
   лента во весь экран, следующая карточка видна справа и уходит ЗА край
   экрана (не режется рамкой в середине). Стрелки прячем: свайп + точки. */
@media (max-width: 900px) {
  .reviews__wrap { max-width: none; padding: 0; }
  .reviews__nav { display: none; }
  .reviews__viewport { border-radius: 0; clip-path: none; }
  /* 2 карточки + подглядывание третьей */
  .revcard { width: calc((100cqw - 88px) / 2); min-width: 0; }
}
@media (max-width: 560px) {
  /* 1 карточка + подглядывание следующей (~40px за краем) */
  .revcard { width: calc(100cqw - 64px); }
}
.revcard figcaption { margin-top: var(--space-6);
  display: flex; align-items: center; gap: var(--space-4);
  font-weight: var(--font-weight-semibold); color: var(--color-navy-600);
  font-size: 1.3125rem; }   /* имя крупнее (директор 13.09) */
.revcard__ava { width: 104px; height: 104px; border-radius: 50%;
  object-fit: cover; border: 3px solid var(--color-sun-500); flex: none; }
.revcard figcaption span { line-height: 1.25; }   /* имя и фамилия — в 2 строки */

/* ─── Q9 · финал: форма на море, футер на воде (эталон 9:40) ───── */

.finale { position: relative; overflow: clip;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: max(var(--block-height), 78vw); }
.finale__bg { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -1; }
/* страница растворяется в воду: крем уходит в кадр сверху */
.finale::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 24%;
  background: linear-gradient(to bottom, var(--semantic-bg-page), rgb(249 240 220 / 0)); }

.finale__in { display: flex; align-items: center; gap: var(--space-16);
  padding: 0 var(--block-inset); margin-bottom: var(--space-16); }
.finale__text { flex: 1 1 50%; }
.finale__h { margin: 0;
  font-family: var(--font-family-display); font-weight: 700;
  font-size: clamp(2.5rem, 4.45vw, 4rem); line-height: 1.05;
  /* строчными: директор 14.09 сменил пару заголовков (было — капсом) */
  color: var(--color-cream-100); }
.finale__lead { color: var(--color-cream-100); max-width: 38ch;
  margin: var(--space-12) 0 0; }

.finale__form { flex: 0 1 520px;
  background: rgb(11 42 72 / .38);
  border: 1px solid var(--glass-on-dark-border);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-radius: var(--radius-lg);
  padding: var(--space-12) var(--space-12) var(--space-12); }
.finale__field { display: block; margin-bottom: var(--space-8); }
.finale__field span { display: block; color: var(--color-cream-100);
  font-size: 1.125rem; margin-bottom: var(--space-2); }
.finale__field input {   /* поля — линии, не коробки (журнал п.14) */
  width: 100%; background: none; border: none;
  border-bottom: 1px solid rgb(249 240 220 / .45);
  color: var(--color-cream-100); font: inherit; font-size: 1.125rem;
  padding: var(--space-1) 0; outline: none; border-radius: 0; }
.finale__field input:focus { border-bottom-color: var(--color-sun-500); }
.finale__send { margin-top: var(--space-4); border: none; cursor: pointer;
  font: inherit; font-size: 0.75rem; font-weight: var(--font-weight-semibold);
  letter-spacing: .14em; text-transform: uppercase; }
.finale__done { color: var(--color-sun-500); margin: var(--space-4) 0 0; }

.finale__footer { position: relative; padding: 0 var(--block-inset)
  calc(var(--space-12) + 30px); color: var(--color-cream-100); }
.finale__rule { border: none; height: 1px;
  background: rgb(249 240 220 / .3); margin: 0 0 var(--space-8); }
.finale__frow { display: flex; align-items: center; gap: var(--space-12);
  flex-wrap: wrap; }
.finale__brand { color: var(--color-cream-100); }
.finale__nav { display: flex; gap: var(--space-8); flex-wrap: wrap;
  margin-left: auto; }
.finale__nav a { color: var(--color-cream-100); text-decoration: none;
  opacity: .9; }
.finale__nav a:hover { opacity: 1; text-decoration: underline; }
.finale__legal { margin: var(--space-6) 0 0; opacity: .75; }

@media (max-width: 1024px) {
  .finale { min-height: auto; }
  .finale__in { flex-direction: column; align-items: stretch;
    padding-top: var(--space-24); gap: var(--space-12); }
  .finale__form { flex: none; }
  .finale__frow { flex-direction: column; align-items: flex-start;
    gap: var(--space-6); }
  .finale__nav { margin-left: 0; }
}

/* ─── Прогресс-бар вопросов ─────────────────────────────────────
   30px, glass; пройдено — navy, актуальное — sun, впереди — прозрачно. */

.qbar {
  position: fixed; inset: auto 0 0 0; z-index: 60;
  height: calc(30px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: flex;
  background: rgb(11 42 72 / .55);           /* тон скрима шапки */
  backdrop-filter: blur(var(--glass-on-dark-blur)) saturate(1.3);
  -webkit-backdrop-filter: blur(var(--glass-on-dark-blur)) saturate(1.3);
  border-top: 1px solid var(--glass-on-dark-border);
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.qbar::-webkit-scrollbar { display: none; }

.qbar a {
  flex: 1 0 auto; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0 var(--space-3);
  font-size: 10px; font-weight: var(--font-weight-semibold);
  letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap; text-decoration: none;
  color: var(--semantic-text-on-dark);
  border-right: 1px solid var(--glass-on-dark-border);
  transition: background var(--motion-duration-base) ease,
              color var(--motion-duration-base) ease;
}
.qbar a:last-child { border-right: none; }
.qbar a.done { background: rgb(22 74 123 / .85); }        /* navy-600 */
.qbar a.now  { background: var(--color-sun-500); color: var(--color-navy-900); }

@media (min-width: 861px) { .qbar a { flex: 1 1 0; } }

/* ─── Мобильная раскладка ──────────────────────────────────────── */

@media (max-width: 860px) {
  /* видео-окно 70% экрана: кадр 16:9 кропится меньше, картинки видно больше */
  .film__sticky { height: 70svh; }
  .stub { padding: var(--space-16) var(--space-4); min-height: 50vh; }  /* мобайл: по контенту */
  .qbar a { flex: 0 0 auto; }   /* горизонтальная прокрутка секций */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bar, .mark, .qbar a, .cta { transition: none; }
}

/* ─── Попап 3D-тура ─────────────────────────────────────────────── */

.tourmodal { position: fixed; inset: 0; z-index: 200; }
.tourmodal[hidden] { display: none; }
.tourmodal__backdrop { position: absolute; inset: 0;
  background: rgb(11 42 72 / .72);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.tourmodal__win { position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(94vw, 1600px); height: min(90vh, 1000px);
  display: flex; flex-direction: column;
  background: var(--color-navy-900); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: 0 30px 80px rgb(11 42 72 / .5); }
.tourmodal__bar { display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-6);
  background: var(--color-navy-900); color: var(--semantic-text-on-dark); }
.tourmodal__close { width: 40px; height: 40px; border: none; cursor: pointer;
  background: none; color: var(--semantic-text-on-dark); font-size: 28px; line-height: 1;
  border-radius: 50%; }
.tourmodal__close:hover { color: var(--color-sun-500); }
.tourmodal__frame { flex: 1; width: 100%; border: none; background: #000; }

/* ── досье экипажа (попап с карточки, пока только Viktor) ── */
.crewcard--open { cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease; }
.crewcard--open:hover, .crewcard--open:focus-visible { transform: translateY(-4px);
  box-shadow: 0 8px 12px -5px rgb(11 42 72 / .32),
              0 26px 48px -14px rgb(11 42 72 / .34); }
.crewcard--open:focus-visible { outline: 2px solid var(--color-navy-600); outline-offset: 3px; }

.crewmodal { position: fixed; inset: 0; z-index: 200; }
.crewmodal[hidden] { display: none; }
.crewmodal__backdrop { position: absolute; inset: 0;
  background: rgb(11 42 72 / .72);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.crewmodal__win { position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 960px); max-height: min(90vh, 760px);
  display: grid; grid-template-columns: minmax(0, 420px) 1fr;
  background: var(--color-cream-100); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: 0 30px 80px rgb(11 42 72 / .5); }
.crewmodal__close { position: absolute; top: var(--space-2); right: var(--space-2);
  z-index: 2; width: 40px; height: 40px; border: none; cursor: pointer;
  background: none; color: var(--color-navy-600); font-size: 28px; line-height: 1;
  border-radius: 50%; }
.crewmodal__close:hover { background: rgb(11 42 72 / .08); }

.crewmodal__gallery { position: relative; background: var(--color-navy-900); min-height: 0; }
/* track в абсолюте: иначе вертикальное фото задаёт intrinsic-высоту
   грид-строке и раздувает окно выше max-height */
.crewmodal__track { position: absolute; inset: 0; display: flex; overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: none; }
.crewmodal__track::-webkit-scrollbar { display: none; }
.crewmodal__slide { position: relative; flex: none; width: 100%; height: 100%;
  scroll-snap-align: center; overflow: hidden; }
/* подложка: та же фотография, cover + blur; поверх — фото целиком (contain).
   Вертикальные и горизонтальные кадры живут в одном кадре без дыр */
.crewmodal__slide-bg { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transform: scale(1.18);
  filter: blur(22px) brightness(.72) saturate(.9); }
.crewmodal__slide-ph { position: relative; z-index: 1; display: block;
  width: 100%; height: 100%; object-fit: contain; }
.crewmodal__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; border: none; cursor: pointer; border-radius: 50%;
  background: rgb(11 42 72 / .45); color: var(--semantic-text-on-dark);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-size: 24px; display: grid; place-items: center;
  line-height: 0; padding: 0 0 3px; }
.crewmodal__nav:hover { background: rgb(11 42 72 / .7); }
.crewmodal__nav--prev { left: var(--space-2); }
.crewmodal__nav--next { right: var(--space-2); }
.crewmodal__thumbs { position: absolute; bottom: var(--space-2); left: 50%; z-index: 2;
  transform: translateX(-50%); display: flex; gap: var(--space-1);
  max-width: calc(100% - var(--space-8)); overflow-x: auto; scrollbar-width: none;
  padding: var(--space-1); border-radius: var(--radius-md);
  background: rgb(11 42 72 / .45);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.crewmodal__thumbs::-webkit-scrollbar { display: none; }
.crewmodal__thumbs button { flex: none; width: 44px; height: 56px; padding: 0;
  border: 2px solid transparent; border-radius: var(--radius-sm);
  overflow: hidden; cursor: pointer; background: none; opacity: .65;
  transition: opacity .2s ease, border-color .2s ease; }
.crewmodal__thumbs button img { display: block; width: 100%; height: 100%;
  object-fit: cover; }
.crewmodal__thumbs button:hover { opacity: 1; }
.crewmodal__thumbs .is-active { opacity: 1;
  border-color: var(--color-sun-500); }

.crewmodal__doss { padding: var(--space-8) var(--space-8) var(--space-6);
  overflow-y: auto; text-align: left; }
.crewmodal__role { color: var(--semantic-text-muted-light); }
.crewmodal__name { margin: var(--space-1) 0 0;
  font-family: var(--font-family-display); font-weight: 700;
  text-transform: uppercase; font-size: 24px; color: var(--color-navy-600); }
.crewmodal__sub { margin: 2px 0 0; color: var(--semantic-text-muted-light); }
.crewmodal__bio { margin-top: var(--space-4); }
.crewmodal__bio p { margin: 0 0 var(--space-3); color: var(--semantic-text-on-light); }
.crewmodal__facts { margin: var(--space-4) 0 0; padding-top: var(--space-4);
  border-top: 1px solid rgb(11 42 72 / .15);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-4); }
.crewmodal__facts div { margin: 0; }
.crewmodal__facts dt { font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--semantic-text-muted-light); }
.crewmodal__facts dd { margin: 2px 0 0; color: var(--semantic-text-on-light); }

@media (max-width: 720px) {
  .crewmodal__win { grid-template-columns: 1fr; width: 94vw; max-height: 92vh;
    overflow-y: auto; display: block; }
  .crewmodal__gallery { aspect-ratio: 3 / 4; }
  .crewmodal__close { color: var(--semantic-text-on-dark);
    background: rgb(11 42 72 / .45);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
}

/* ─── Телефон: каждый блок главной = один экран (директор 11.09).
   Q1-фильм не трогаем — у него своя высота 300vh для скраба. ───── */
/* ─── Планшет и телефон: блок = зона между стик-шапкой (60) и qbar (30 + safe-area),
   иначе десктопный токен 848–1008 выше зоны и низ блока уходит под qbar
   (директор 11.09: сначала телефон, затем планшет) ─────────────── */
@media (max-width: 1024px) {
  :root { --block-height: calc(100svh - var(--bar-height-stuck) - 30px
    - env(safe-area-inset-bottom, 0px)); }
  /* safety и many возвращаются к раскладке «контент прижат к низу кадра» —
     правила height:auto из @media 900 писались под старую фикс-высоту */
  .safety, .many { height: var(--block-height); }
  .safety__content, .many__content { position: absolute; left: 0; right: 0;
    bottom: 6%; padding: 0 var(--block-inset); }
  .finale { min-height: var(--block-height); }
  /* Q4: ужатые отступы — на планшете в ландшафте зона 678, контент был 705 */
  .crew { padding: var(--space-4) var(--block-inset); }
  .crew__h { margin-top: var(--space-4); }
  .crew__lead { margin: var(--space-4) auto; }
  .crew__cards { padding-bottom: 0; }
}


/* ─── Q5 до 900px (планшет-портрет и телефон): тайтл наверху, лента пунктов
   снизу с точками. Вертикальная колонка в фикс-высоте резала заголовок (Codex) ─ */
@media (max-width: 900px) {
  /* Q5: тайтл наверху (на зелени), пункты внизу под катамараном —
     горизонтальная лента со снапом + точки (директор 11.09, реф MedSailors) */
  .safety__content { inset: 0; bottom: auto; height: 100%; padding: 0;
    display: flex; flex-direction: column; justify-content: flex-start; }
  .safety__h { margin: var(--space-6) var(--space-4) auto; }  /* auto снизу: лента и точки уходят к низу кадра */
  .safety__bg { object-position: 62% 40%; }  /* лодка в середине кадра, текст под ней на воде */
  .safety__list { flex-direction: row; gap: 0; overflow-x: auto;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    padding: 0 var(--space-4) var(--space-2); }
  .safety__list::-webkit-scrollbar { display: none; }
  .safety__list > div { flex: 0 0 100%; scroll-snap-align: center;
    padding-right: var(--space-4); box-sizing: border-box; }
  .safety__list dt, .safety__list dd { text-shadow: 0 1px 14px rgb(11 42 72 / .55); }
  .safety__dots { display: flex; justify-content: center; gap: 6px;
    padding-bottom: var(--space-3); }
  .safety__dots span { width: 6px; height: 6px; border-radius: 3px;
    background: rgb(249 240 220 / .55); transition: width .2s ease, background .2s ease; }
  .safety__dots .is-active { width: 20px; background: var(--color-sun-500); }
}

@media (max-width: 720px) {
  .safety__content, .many__content { padding: 0 var(--space-4); }
  /* Q6: тайтл наверху в небе, лид и кнопка у низа (директор 11.09) */
  .many__content { inset: 0; bottom: auto; height: 100%; padding: 0 var(--space-4) 6%;
    display: flex; flex-direction: column; }
  .many__h { margin: var(--space-6) 0 auto; }
  .finale { min-height: var(--block-height); }
  /* ужимаем вертикаль Q5 под block-height 722 (экран 812) */
}