/* ═══════════════════════════════════════════════════════════════════════════
   APER × JIVA — вёрстка 1:1 по макету Figma «Ретрит Ингушетия»
   Артборд: Desktop — 1440 (node 1:2), 1440 × 6555.

   Принцип: холст свёрстан в реальных координатах макета (1440 px),
   на узких экранах он пропорционально масштабируется (см. скрипт внизу),
   поэтому на любой ширине картинка совпадает с макетом попиксельно.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Шрифты макета */
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --f-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* TT Norms Pro Trl Expanded — коммерческий; если он установлен/подключён,
     подхватится первым, иначе используется Inter как ближайший заменитель. */
  --f-exp: "TT Norms Pro Trl Expanded", "TT Norms Pro Expanded", "TT Norms Pro", "Inter", sans-serif;

  /* Цвета макета */
  --c-cream:   #edeae0;
  --c-cream-85: rgba(237,234,224,.85);
  --c-cream-65: rgba(237,234,224,.65);
  --c-cream-60: rgba(237,234,224,.6);
  --c-cream-55: rgba(237,234,224,.55);
  --c-cream-35: rgba(237,234,224,.35);
  --c-line:    rgba(237,234,224,.28);
  --c-line-14: rgba(237,234,224,.14);
  --c-gold:    #d3a54b;
  --c-deep:    #2f3a2c;
  --c-olive:   #57654f;
  --c-footer:  #222a20;
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:#12160f;
  color:var(--c-cream);
  font-family:var(--f-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{ display:block; }

a{ color:inherit; text-decoration:none; }

p{ margin:0; }

:focus-visible{ outline:2px solid var(--c-gold); outline-offset:3px; }

/* ── Холст макета ────────────────────────────────────────────────────────── */
.viewport{ position:relative; width:100%; overflow:hidden; }

.canvas{
  position:relative;
  width:1440px;
  height:6615px;
  transform-origin:0 0;
}

.sec{ position:relative; width:1440px; overflow:hidden; }

/* Фоновая фотография секции «на всю» */
.sec__bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  pointer-events:none;
}

/* Утилиты типографики макета */
.mono{ font-family:var(--f-mono); font-weight:400; line-height:normal; white-space:nowrap; }
.abs{ position:absolute; }

/* ═══ 01 HERO — 1440 × 900 ══════════════════════════════════════════════ */
.hero{ height:900px; }

.hero__deco{ position:absolute; left:0; top:0; width:1440px; height:900px; overflow:hidden; }

.hero__grid{ position:absolute; top:0; width:1px; height:900px; }
.hero__grid img{ width:1px; height:900px; }
.hero__grid--1{ left:239.5px }
.hero__grid--2{ left:479.5px }
.hero__grid--3{ left:719.5px }
.hero__grid--4{ left:959.5px }
.hero__grid--5{ left:1199.5px }

.hero__path{ position:absolute; left:60px; top:186.9px; width:1222.51px; height:340.3px; }
.hero__path img{ width:100%; height:100%; }

.hero__dot{ position:absolute; width:10px; height:10px; }
.hero__dot img{ width:10px; height:10px; }
.hero__dot--1{ left:303px;  top:178px }
.hero__dot--2{ left:577px;  top:313px }
.hero__dot--3{ left:980px;  top:416px }

.hero__tag{
  position:absolute;
  font-family:var(--f-mono); font-weight:400; line-height:normal;
  font-size:11px; letter-spacing:2px; color:var(--c-cream-85);
  white-space:nowrap;
}
.hero__tag--1{ left:278px; top:153px }
.hero__tag--2{ left:545px; top:277px }
.hero__tag--3{ left:946px; top:386px }

.hero__meta{
  position:absolute; top:38px;
  font-size:13px; letter-spacing:1.6px; color:var(--c-cream);
}
.hero__meta--l{ left:60px }
.hero__meta--c{ left:620px }
.hero__meta--r{ left:1230px }

.hero__title{
  position:absolute; left:720px; top:560px;
  transform:translateX(-50%);
  margin:0;
  font-family:var(--f-exp); font-weight:700; font-style:normal;
  font-size:185px; line-height:normal; letter-spacing:1.85px;
  text-align:center; color:var(--c-cream); white-space:nowrap;
}

.hero__cta{
  position:absolute; left:608.5px; top:790px;
  display:inline-flex; align-items:flex-start;
  padding:16px 44px;
  border:1px solid rgba(237,234,224,.4);
  border-radius:999px;
  background:rgba(237,234,224,.14);
  box-shadow:0 6px 18px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.12);
  font-size:12px; letter-spacing:1.9px; color:var(--c-cream);
  cursor:pointer;
  transition:background .25s ease, border-color .25s ease;
}
.hero__cta:hover{ background:rgba(237,234,224,.22); border-color:rgba(237,234,224,.6); }

.hero__foot{
  position:absolute; top:855px;
  font-size:11px; letter-spacing:1.2px; color:var(--c-cream-60);
}
.hero__foot--l{ left:60px }
.hero__foot--c{ left:640px }
.hero__foot--r{ left:1250px }

/* Карточка погоды (Open-Meteo, live) */
.wx{
  position:absolute; left:1120px; top:80px;
  width:280px; height:160px;
  border:1px solid var(--c-line);
  border-radius:22px;
  background:rgba(237,234,224,.12);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  overflow:hidden;
}
.wx__info{ position:absolute; left:-1px; top:-1px; width:280px; height:150px; overflow:hidden; }
.wx__blob{ position:absolute; }
.wx__blob--1{ left:210px; top:-140px; width:200px; height:200px }
.wx__blob--2{ left:210px; top:-110px; width:140px; height:140px }
.wx__blob--3{ left:245px; top:-45px;  width:70px;  height:70px  }
.wx__blob img{ width:100%; height:100%; }
.wx__icon{ position:absolute; left:20px; top:22px; width:28px; height:28px; }
.wx__icon img{ width:28px; height:28px; }
.wx__state{ position:absolute; left:56px; top:28px; font-family:var(--f-body); font-size:13px; color:var(--c-cream-85); white-space:nowrap; }
.wx__temp{ position:absolute; left:20px; top:58px; font-family:var(--f-sans); font-weight:700; font-size:38px; line-height:normal; color:var(--c-cream); white-space:nowrap; }
.wx__range{ position:absolute; left:20px; top:104px; font-size:11.5px; color:var(--c-cream-60); }
.wx__place{ position:absolute; left:20px; top:126px; font-size:9.5px; letter-spacing:1px; color:var(--c-cream-55); }

/* ═══ 03 PHOTO BREAK — 1440 × 720 ══════════════════════════════════════ */
.break{ height:720px; }

.break__kicker{
  position:absolute; left:658px; top:213px;
  font-size:12px; letter-spacing:1.6px; color:rgba(255,255,255,.6);
}

.break__lead{
  position:absolute; left:calc(50% - .5px); top:283px;
  transform:translateX(-50%);
  width:1149px;
  font-family:var(--f-exp); font-weight:500; font-style:normal;
  font-size:44px; line-height:1.28; text-align:center; color:#fff;
}
.break__lead p + p{ margin-top:0; }

.break__pill{
  position:absolute; left:596.5px; top:640px;
  display:inline-flex; align-items:flex-start;
  padding:9px 20px;
  border:1px solid rgba(61,61,61,.25);
  border-radius:999px;
  background:rgba(61,61,61,.56);
  font-size:11px; letter-spacing:1.4px; color:var(--c-cream);
}

/* ═══ 04 HIGHLIGHTS — 1440 × 1150 ══════════════════════════════════════ */
.highlights{ height:1150px; }

.h2--exp{
  position:absolute; left:60px; top:90px;
  margin:0;
  font-family:var(--f-exp); font-weight:700; font-style:normal;
  font-size:80px; line-height:normal; color:var(--c-cream); white-space:nowrap;
}

.highlights__rail{ position:absolute; left:710px; top:230px; width:20px; height:880px; }
.highlights__rail img{ width:20px; height:880px; }

.glass{
  position:absolute;
  display:flex; flex-direction:column; gap:12px; align-items:flex-start;
  padding:24px 26px;
  border:1px solid var(--c-line);
  border-radius:18px;
  background:rgba(6,6,6,.56);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  overflow:hidden;
}
.glass--1{ left:340px; top:230px }
.glass--2{ left:760px; top:400px }
.glass--3{ left:340px; top:570px }
.glass--4{ left:760px; top:740px }
.glass--5{ left:340px; top:910px }

.glass__num{ font-size:11px; letter-spacing:1.5px; color:var(--c-cream-60); }
.glass__text{
  width:308px;
  font-family:var(--f-exp); font-weight:500; font-style:normal;
  font-size:19px; line-height:1.35; color:var(--c-cream);
}

/* ═══ 05 PROGRAM — 1440 × 775 ══════════════════════════════════════════ */
.program{ height:775px; }

.program__photo{
  position:absolute; left:-14px; top:-179px;
  width:1455px; height:1819px;
  object-fit:cover; pointer-events:none;
}

.day{
  position:absolute; top:230px;
  display:flex; flex-direction:column; gap:8px; align-items:flex-start;
  width:308px;
  padding:28px 24px;
  border:1px solid var(--c-line);
  border-radius:18px;
  background:rgba(0,0,0,.12);
  overflow:hidden;
}
.day--1{ left:60px;   min-height:393px }
.day--2{ left:390px;  min-height:393px }
.day--3{ left:720px }
.day--4{ left:1050px; min-height:275px }

.day__num{ font-size:11px; letter-spacing:1.5px; color:var(--c-cream); }
.day__title{
  width:258px;
  font-family:var(--f-exp); font-weight:700; font-style:normal;
  font-size:21px; line-height:normal; color:#fff;
}
.day__date{
  font-family:var(--f-exp); font-weight:400; font-style:normal;
  font-size:13px; line-height:normal; color:var(--c-cream); white-space:nowrap;
}
.day__row{
  display:flex; gap:10px; align-items:flex-start;
  padding:9px 0 2px;
  border-top:1px solid var(--c-line-14);
  overflow:hidden;
}
.day__time{ font-family:var(--f-mono); font-weight:400; font-size:11px; line-height:normal; color:var(--c-cream); white-space:nowrap; }
.day__act{
  width:190px;
  font-family:var(--f-exp); font-weight:400; font-style:normal;
  font-size:13.5px; line-height:1.45; color:#fff;
}

/* ═══ 06 STORIES — 1440 × 660 ══════════════════════════════════════════ */
.stories{ height:660px; background:var(--c-olive); }

.stories__title{
  position:absolute; left:60px; top:90px;
  margin:0; width:519px; height:73px;
  font-family:var(--f-exp); font-weight:900; font-style:normal;
  font-size:56px; line-height:normal; color:var(--c-cream);
}
.stories__track{
  position:absolute; left:60px; top:210px;
  display:flex; gap:24px;
  transition:transform .55s cubic-bezier(.4,0,.2,1);
}

.slide{
  position:relative; flex:0 0 auto;
  width:300px; height:400px;
  border:1px solid rgba(237,234,224,.16);
  border-radius:24px;
  box-shadow:0 18px 34px rgba(0,0,0,.32);
  overflow:hidden;
}
.slide img, .slide video{ width:100%; height:100%; object-fit:cover; display:block; }

.stories__nav{
  position:absolute; top:150px;
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  padding:0;
  border:1px solid var(--c-line);
  border-radius:999px;
  background:rgba(237,234,224,.12);
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  box-shadow:0 5px 14px rgba(0,0,0,.22);
  cursor:pointer;
  transition:background .25s ease;
}
.stories__nav:hover{ background:rgba(237,234,224,.22); }
.stories__nav--prev{ left:1280px }
.stories__nav--next{ left:1336px }
.stories__nav img{ width:16px; height:16px; }

/* ═══ 07 PRICING — 1440 × 640 ══════════════════════════════════════════ */
.pricing{ height:700px; }

.pricing__bg{
  position:absolute; left:0; top:-687.7px;
  width:1440px; height:2015.5px;
  max-width:none; pointer-events:none;
}

.h2--sans{
  position:absolute; left:60px; top:70px;
  margin:0;
  font-family:var(--f-exp); font-weight:700; font-style:normal;
  font-size:56px; line-height:normal; color:var(--c-cream); white-space:nowrap;
}

.pricing__glow{ position:absolute; left:-80px; top:50px; width:480px; height:480px; pointer-events:none; }
.pricing__glow img{ width:480px; height:480px; }

.card--glass{
  position:absolute;
  border:1px solid rgba(237,234,224,.22);
  border-radius:20px;
  background:rgba(237,234,224,.12);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:0 22px 40px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.14);
  overflow:hidden;
}

.price{
  left:118px; top:183px; width:552px;
  display:flex; flex-direction:column; gap:16px; align-items:flex-start;
  padding:40px;
}
.price__badge{
  display:inline-flex; align-items:flex-start;
  width:266px;
  padding:8px 18px;
  border:1px solid rgba(211,165,75,.4);
  border-radius:999px;
  background:rgba(211,165,75,.16);
  font-size:11px; letter-spacing:1.2px; color:var(--c-gold);
}
.price__value{
  font-family:var(--f-sans); font-weight:700; font-style:normal;
  font-size:84px; line-height:normal; color:var(--c-cream); white-space:nowrap;
}
.price__note{ font-family:var(--f-body); font-size:15px; line-height:1.5; color:var(--c-cream-65); white-space:normal; }
.price__timer{ font-size:11.5px; letter-spacing:.6px; color:var(--c-gold); }
.price__cta{
  display:inline-flex; align-items:flex-start;
  padding:15px 36px;
  border:0; border-radius:999px;
  background:var(--c-cream);
  box-shadow:0 10px 26px rgba(0,0,0,.28),
             inset 0 -1px 2px rgba(0,0,0,.06),
             inset 0 1px 0 rgba(255,255,255,.5);
  font-family:var(--f-mono); font-weight:400; line-height:normal;
  font-size:12px; letter-spacing:1.6px; color:var(--c-deep);
  white-space:nowrap; cursor:pointer;
  transition:transform .2s ease;
}
.price__cta:hover{ transform:translateY(-2px); }

.includes{
  left:923px; top:190px; width:400px; height:auto; min-height:358px;
  display:flex; flex-direction:column; align-items:flex-start;
  padding:36px 40px 20px;
}
.includes__title{
  font-family:var(--f-sans); font-weight:500; font-style:normal;
  font-size:18px; line-height:normal; letter-spacing:.6px; color:var(--c-cream);
  white-space:nowrap;
}
.includes__spacer{ width:1px; height:14px; flex:0 0 auto; }
.includes__item{
  position:relative;
  width:100%; min-height:44px; flex:0 0 auto;
  display:flex; align-items:center; gap:12px; padding:11px 0;
  border-top:1px solid var(--c-line-14);
  overflow:hidden;
}
.includes__item img{ position:static; width:16px; height:16px; flex:0 0 auto; }
.includes__item span{
  position:static;
  font-family:var(--f-body); font-size:15px; line-height:1.35;
  color:var(--c-cream); white-space:normal;
}

/* ═══ 08 FINAL + FORM — 1440 × 1250 ════════════════════════════════════ */
.final{ height:1250px; }

.final__title{
  position:absolute; left:404px; top:123px;
  margin:0;
  font-family:var(--f-exp); font-weight:700; font-style:normal;
  font-size:72px; line-height:normal; color:var(--c-cream); white-space:nowrap;
}

.form{
  position:absolute; left:350px; top:415px;
  width:740px;
  display:flex; flex-direction:column; gap:18.5px; align-items:flex-start;
  padding:58.143px 52.857px;
  border:1.321px solid var(--c-line);
  border-radius:29.071px;
  background:rgba(0,0,0,.67);
  -webkit-backdrop-filter:blur(11.893px); backdrop-filter:blur(11.893px);
  overflow:hidden;
}

.form__intro{
  width:100%;
  font-family:var(--f-mono); font-weight:400; line-height:normal;
  font-size:14.536px; letter-spacing:1.9821px; text-align:center;
  color:var(--c-cream-60);
}

.form__row{ display:flex; gap:18.5px; align-items:flex-start; width:100%; }

.field{ display:flex; flex-direction:column; gap:10.571px; align-items:flex-start; flex:1 1 0; min-width:0; }
.field--wide{ width:100%; flex:0 0 auto; }

.field__label{
  font-family:var(--f-mono); font-weight:400; line-height:normal;
  font-size:13.214px; letter-spacing:1.85px; color:var(--c-cream-60);
  white-space:nowrap;
}

.field__input{
  width:100%; height:60.786px;
  padding:17.179px 21.143px;
  border:1.321px solid rgba(237,234,224,.22);
  border-radius:15.857px;
  background:rgba(237,234,224,.08);
  font-family:var(--f-body); font-weight:400;
  font-size:18.5px; line-height:normal; color:var(--c-cream);
  transition:border-color .25s ease, background .25s ease;
}
.field__input::placeholder{ color:var(--c-cream-35); }
.field__input:focus{ outline:none; border-color:rgba(237,234,224,.5); background:rgba(237,234,224,.12); }

/* Каретка «▾» в макете стоит сразу за текстом, поэтому она живёт
   в подписи опции, а не в фоне контрола. */
select.field__input{
  appearance:none; -webkit-appearance:none;
  color:var(--c-cream-35);
  cursor:pointer;
}
select.field__input option{ background:#141712; color:var(--c-cream); }

.form__check{
  display:flex; gap:8px; align-items:center;
  font-family:var(--f-body); font-size:15.857px; line-height:normal;
  color:var(--c-cream-60); cursor:pointer;
}
.form__check input{ width:16px; height:16px; margin:0; accent-color:var(--c-cream); cursor:pointer; }

.form__submit{
  display:flex; align-items:center; justify-content:center;
  width:100%;
  padding:22.464px 0;
  border:0; border-radius:999px;
  background:var(--c-cream);
  box-shadow:0 13.214px 34.357px rgba(0,0,0,.28),
             inset 0 -1.321px 2.643px rgba(0,0,0,.06),
             inset 0 1.321px 0 rgba(255,255,255,.5);
  font-family:var(--f-mono); font-weight:400; line-height:normal;
  font-size:15.857px; letter-spacing:2.5107px; color:var(--c-deep);
  white-space:nowrap; cursor:pointer;
  transition:transform .2s ease;
}
.form__submit:hover{ transform:translateY(-2px); }

/* ── Состояния формы (FormIt) ──────────────────────────────────────────────
   Сообщение об успехе/ошибке занимает слот вводного текста, а не добавляет
   новый блок: карточка не растёт и не наезжает на подписи внизу секции. */
.form__intro--ok{ color:#a9c8a0; }
.form__intro--err{ color:#e0a58f; }
.form:has(.form__intro--ok, .form__intro--err)
  .form__intro:not(.form__intro--ok):not(.form__intro--err){ display:none; }

.field__input--err{
  border-color:rgba(224,165,143,.65);
  background:rgba(224,165,143,.10);
}

/* Ловушка для ботов: человек поле не видит, автозаполнялки спама — заполняют,
   и такая заявка отсекается на сервере. Прячем обрезкой, а не выносом за экран:
   элемент на left:-9999px расширяет прокручиваемую область влево, и страницу
   на телефоне начинает таскать по горизонтали. */
.form__hp{
  position:absolute; width:1px; height:1px;
  padding:0; border:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}

/* ═══ ПОПАП «ЗАЯВКА ОТПРАВЛЕНА» ════════════════════════════════════════════
   Лежит вне .canvas: у холста на десктопе есть transform, а position:fixed
   внутри трансформированного предка считается от предка и масштабируется
   вместе с ним — попап уехал бы и уменьшился. */
.modal[hidden]{ display:none; }
.modal{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.modal__backdrop{
  position:absolute; inset:0;
  background:rgba(6,8,5,.72);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.modal__card{
  position:relative;
  width:100%; max-width:430px;
  padding:38px 32px 32px;
  border:1px solid var(--c-line);
  border-radius:24px;
  background:#1b2118;
  box-shadow:0 30px 70px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
  text-align:center;
  animation:modal-in .28s cubic-bezier(.2,.8,.3,1);
}
@keyframes modal-in{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }

.modal__mark{
  width:58px; height:58px; margin:0 auto 20px;
  border:1px solid rgba(169,200,160,.4); border-radius:999px;
  background:rgba(169,200,160,.14);
  font-size:26px; line-height:56px; color:#a9c8a0;
}
.modal__title{
  margin:0 0 12px;
  font-family:var(--f-sans); font-weight:700;
  font-size:27px; line-height:1.15; color:var(--c-cream);
}
.modal__text{
  font-family:var(--f-body); font-size:15px; line-height:1.55;
  color:var(--c-cream-65);
}
.modal__btn{
  width:100%; margin-top:26px; padding:17px 0;
  border:0; border-radius:999px;
  background:var(--c-cream);
  font-family:var(--f-mono); font-size:13px; letter-spacing:2.2px;
  color:var(--c-deep); cursor:pointer;
  transition:transform .2s ease;
}
.modal__btn:hover{ transform:translateY(-2px); }

/* Пока попап открыт, фон не прокручивается — иначе страница уезжает
   под карточкой, а на телефоне попап «улетает» вместе с ней. */
html.is-locked, body.is-locked{ overflow:hidden; }

.final__foot{
  position:absolute; top:1180px;
  font-size:11px; letter-spacing:1.2px; color:var(--c-cream-60);
}
.final__foot--l{ left:60px }
.final__foot--c{ left:600px }
.final__foot--r{ left:1180px }

/* ═══ 09 FOOTER — 1440 × 460 ═══════════════════════════════════════════ */
.footer{ height:460px; background:var(--c-footer); }

.footer__divider{ position:absolute; left:60px; top:330px; width:1320px; height:1px; background:var(--c-line-14); }

.footer__logo{
  position:absolute; left:60px; top:60px;
  margin:0;
  font-family:var(--f-sans); font-weight:700; font-style:normal;
  font-size:38px; line-height:normal; color:var(--c-cream); white-space:nowrap;
}
.footer__about{
  position:absolute; left:60px; top:120px;
  font-family:var(--f-body); font-size:14px; line-height:1.6;
  color:var(--c-cream-60); white-space:nowrap;
}

.footer__cap{
  position:absolute; top:60px;
  font-size:11px; letter-spacing:1.4px; color:var(--c-cream-55);
}
.footer__link{
  position:absolute;
  font-family:var(--f-body); font-size:14.5px; line-height:normal;
  color:var(--c-cream-85); white-space:nowrap;
  transition:color .2s ease;
}
.footer__link:hover{ color:var(--c-cream); }
.footer__link--wrap{ width:165px; white-space:normal; }

.footer__meta{
  position:absolute; top:365px;
  font-size:11px; letter-spacing:1px; color:var(--c-cream-55);
}
.footer__meta--1{ left:60px }
.footer__meta--2{ left:340px }
.footer__meta--3{ left:680px }

.footer__top{
  position:absolute; left:1220px; top:353px;
  display:inline-flex; align-items:flex-start;
  padding:10px 22px;
  border:1px solid rgba(237,234,224,.4);
  border-radius:999px;
  background:rgba(237,234,224,.14);
  box-shadow:0 6px 18px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.12);
  font-size:11px; letter-spacing:1.4px; color:var(--c-cream);
  transition:background .25s ease;
}
.footer__top:hover{ background:rgba(237,234,224,.22); color:var(--c-cream); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition-duration:.01ms !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   МОБИЛЬНАЯ И ПЛАНШЕТНАЯ ВЁРСТКА — до 1024 px
   ───────────────────────────────────────────────────────────────────────────
   Выше 1024 px работает холст из Figma: макет 1440 px целиком масштабируется
   и совпадает с дизайном попиксельно.

   Ниже 1024 px масштабирование выключается (см. скрипт внизу страницы) и
   вместо него включается обычная вёрстка потоком: секции получают auto-высоту,
   абсолютные координаты снимаются (`position:static` — при нём left/top,
   включая проставленные инлайном в подвале, просто игнорируются), размеры
   шрифтов переводятся на clamp(). Порядок блоков в разметке уже правильный,
   поэтому переставлять ничего не нужно.

   Правило: правки макета вносить в основные стили выше, здесь — только то,
   что должно вести себя иначе на узком экране.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:1023.98px){

  /* ── Холст: снимаем фиксированные размеры и transform из скрипта ───────── */
  .viewport{ height:auto !important; overflow:visible; }
  .canvas{
    width:100%; height:auto;
    transform:none !important;
    margin-left:0 !important;
  }
  .sec{ width:100%; height:auto; isolation:isolate; }

  /* На десктопе весь контент абсолютный и рисуется поверх фото по порядку
     разметки. В потоке же абсолютные картинки перекрывают обычные блоки —
     поэтому уводим фоны на слой ниже. isolation:isolate держит этот слой
     внутри секции, чтобы фото не ушло под фон страницы. */
  .sec__bg,.program__photo,.pricing__bg{ z-index:-1; }

  /* Секции — колонки с внутренними отступами вместо координат */
  .hero,.break,.highlights,.program,.stories,.pricing,.final,.footer{
    display:flex; flex-direction:column;
    padding:72px 20px;
  }

  /* Длинные строки макета на узком экране обязаны переноситься */
  .mono{ white-space:normal; }

  /* Блюр за стеклянными карточками на телефонах ощутимо роняет прокрутку —
     заменяем его более плотной заливкой. */
  .glass,.card--glass,.wx,.form,.stories__nav{
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }

  /* ── 01 HERO ───────────────────────────────────────────────────────────── */
  .hero{
    min-height:100vh; min-height:100svh;
    justify-content:center;
    padding:96px 20px 48px;
  }
  .hero__deco,.hero__dot--3,.hero__tag--3{ display:none; }

  .hero__meta{ position:static; font-size:11px; letter-spacing:1.4px; }
  .hero__meta--c,.hero__meta--r{ margin-top:6px; color:var(--c-cream-60); }

  /* Слово «ИНГУШЕТИЯ» не переносится, поэтому размер считается от ширины
     экрана с запасом: при 12.5vw оно упиралось в края на 390 px. */
  .hero__title{
    position:static; transform:none;
    margin:26px 0 22px;
    font-size:min(9.6vw,96px); letter-spacing:0;
    text-align:left;
  }

  .hero__cta{
    position:static; align-self:flex-start;
    padding:17px 34px; font-size:12px;
  }

  .hero__foot{ position:static; margin-top:8px; font-size:10.5px; }
  .hero__foot--l{ margin-top:32px; }

  .wx{
    position:relative; left:auto; top:auto;
    align-self:flex-start; margin-top:32px;
    background:rgba(0,0,0,.42);
  }

  /* ── 03 PHOTO BREAK ────────────────────────────────────────────────────── */
  .break{ align-items:center; text-align:center; gap:18px; }
  .break__kicker{ position:static; }
  .break__lead{
    position:static; transform:none;
    width:100%; max-width:620px;
    font-size:clamp(21px,5.4vw,34px); line-height:1.32;
  }
  .break__lead br{ display:none; }
  .break__lead p + p{ margin-top:14px; }
  .break__pill{ position:static; }

  /* ── 04 HIGHLIGHTS ─────────────────────────────────────────────────────── */
  .highlights{ gap:14px; }
  .h2--exp{
    position:static; margin-bottom:12px;
    font-size:clamp(32px,8vw,60px); white-space:normal;
  }
  .highlights__rail{ display:none; }
  .glass{
    position:static; left:auto; top:auto;
    width:100%; padding:20px 22px;
    background:rgba(6,6,6,.7);
  }
  .glass__text{ width:auto; font-size:17px; }

  /* ── 05 PROGRAM ────────────────────────────────────────────────────────── */
  .program{ gap:14px; }
  .program__photo{
    left:0; top:0;
    width:100%; height:100%;
  }
  .day,.day--1,.day--2,.day--3,.day--4{
    position:static; left:auto; top:auto;
    width:100%; min-height:0;
    padding:22px 20px;
    background:rgba(0,0,0,.55);
  }
  .day__title{ width:auto; }
  .day__act{ width:auto; flex:1 1 auto; }
  .day__row{ width:100%; }

  /* ── 06 STORIES ────────────────────────────────────────────────────────── */
  /* Стрелки на телефоне лишние — карусель листается пальцем, с примагничиванием */
  .stories{ padding:64px 0; gap:20px; }
  .stories__title{
    position:static; width:auto; height:auto; padding:0 20px;
    font-size:clamp(30px,7.6vw,52px);
  }
  .stories__track{
    position:static;
    transform:none !important;
    gap:14px; padding:0 20px 10px;
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .stories__track::-webkit-scrollbar{ display:none; }
  .slide{
    width:min(76vw,300px); height:min(101vw,400px);
    scroll-snap-align:center;
  }
  .stories__nav{ display:none; }

  /* ── 07 PRICING ────────────────────────────────────────────────────────── */
  .pricing{ gap:16px; }
  .pricing__bg{
    left:0; top:0;
    width:100%; height:100%;
    object-fit:cover;
  }
  .pricing__glow{ display:none; }
  .h2--sans{
    position:static; margin-bottom:10px;
    font-size:clamp(30px,7.6vw,52px); white-space:normal;
  }
  .price,.includes{
    position:static; left:auto; top:auto;
    width:100%; height:auto;
    padding:26px 22px;
    background:rgba(0,0,0,.5);
  }
  .price__badge{ width:auto; }
  .price__value{ font-size:clamp(40px,11vw,72px); }
  .price__note,.price__timer{ white-space:normal; }
  .price__cta{
    width:100%; justify-content:center;
    padding:18px 24px; text-align:center;
  }
  .includes__item{
    display:flex; align-items:center; gap:12px;
    width:100%; height:auto;
    padding:13px 0;
  }
  .includes__item img{ position:static; }
  .includes__item span{ position:static; white-space:normal; }

  /* ── 08 FINAL + ФОРМА ──────────────────────────────────────────────────── */
  .final{ align-items:center; gap:22px; }
  .final__title{
    position:static;
    font-size:clamp(32px,8vw,56px); text-align:center; white-space:normal;
  }

  .form{
    position:relative; left:auto; top:auto;
    width:100%; max-width:520px;
    gap:14px; padding:24px 20px;
    border-radius:20px;
    background:rgba(0,0,0,.78);
  }
  .form__intro{ font-size:12.5px; letter-spacing:1.2px; }
  .form__row{ flex-direction:column; gap:14px; }
  .field{ width:100%; }
  .field__label{ font-size:11.5px; letter-spacing:1.5px; white-space:normal; }
  /* 16px — минимум, при котором iOS не зумит страницу на фокусе поля */
  .field__input{
    height:52px; padding:14px 16px;
    border-radius:13px; font-size:16px;
  }
  .form__check{ align-items:flex-start; font-size:14px; }
  .form__check input{ width:20px; height:20px; margin-top:1px; flex:0 0 auto; }
  .form__submit{ padding:19px 0; font-size:14px; letter-spacing:2px; }

  .final__foot{
    position:static; margin-top:6px;
    font-size:10.5px; text-align:center;
  }
  .final__foot--l{ margin-top:16px; }

  /* ── 09 FOOTER ─────────────────────────────────────────────────────────── */
  /* Инлайновые left/top в разметке подвала при position:static не действуют */
  .footer{ padding:56px 20px 44px; }
  .footer__logo{ position:static; font-size:30px; }
  .footer__about{ position:static; margin-top:12px; white-space:normal; }
  .footer__divider{ position:static; width:100%; margin:30px 0 4px; }
  .footer__cap{ position:static; margin:24px 0 4px; }
  .footer__link{
    position:static; width:auto;
    padding:9px 0; font-size:15px;
  }
  .footer__meta{ position:static; margin-top:6px; }
  .footer__meta--1{ margin-top:28px; }
  .footer__top{ position:static; align-self:flex-start; margin-top:26px; }

  /* Якорные переходы не прилипают к верхней кромке экрана */
  .sec[id]{ scroll-margin-top:16px; }

  /* ── Попап ─────────────────────────────────────────────────────────────── */
  .modal{ padding:16px; }
  .modal__card{ padding:30px 22px 24px; border-radius:20px; }
  .modal__title{ font-size:23px; }
  .modal__text{ font-size:14.5px; }
}

/* Мелкие телефоны — ужимаем внутренние отступы, чтобы не съедать ширину */
@media (max-width:400px){
  .hero,.break,.highlights,.program,.pricing,.final,.footer{ padding-left:16px; padding-right:16px; }
  .stories__title,.stories__track{ padding-left:16px; padding-right:16px; }
  .form{ padding:20px 16px; }
  .wx{ transform:scale(.94); transform-origin:0 50%; }
}