/* ============ Fonts ============
   Шрифты макета: Unbounded (заголовки, кнопки, меню подвала), Exo 2 (текст, меню шапки, форма, надзаголовки). */
@font-face { font-family: "Unbounded"; src: url("../assets/fonts/unbounded-500.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Unbounded"; src: url("../assets/fonts/unbounded-700.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Exo 2"; src: url("../assets/fonts/exo2-400.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Exo 2"; src: url("../assets/fonts/exo2-500.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Exo 2"; src: url("../assets/fonts/exo2-700.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }

/* ============ Tokens (из UI KIT в Figma) ============ */
:root {
  --bg: #fbfaf6;
  --red: #a43e20;
  --txt: #3a3a3a;
  --sand: #d7c6bf;
  --beige: #bdb09e;

  --f-head: "Unbounded", sans-serif;
  --f-body: "Exo 2", sans-serif;

  /* Макет 1728px: поля 120px, контент 1488px. Всё масштабируется пропорционально. */
  --gutter: 6.944vw;
  --u: calc((100vw - 2 * var(--gutter)) / 1488); /* 1 px макета */

  /* Шкала UI KIT: H1 72 Bold · H2 48 Bold · H3 32 Medium · H4 28 Medium (Unbounded);
     h5 24 Medium · h6 20 · h7 16 (Exo 2) — px на ширине 1728 */
  --fs-h1: clamp(28px, 4.167vw, 72px);
  --fs-h2: clamp(22px, 2.778vw, 48px);
  --fs-h3: clamp(19px, 1.852vw, 32px);
  --fs-h4: clamp(18px, 1.62vw, 28px);
  --fs-h5: clamp(18px, 1.389vw, 24px);
  --fs-body: clamp(16px, 1.157vw, 20px);
  --fs-small: clamp(12px, 0.926vw, 16px);

  --gap-section: clamp(72px, 8.333vw, 144px);
  --radius: clamp(16px, 1.389vw, 24px);
  --btn-h: clamp(56px, 4.63vw, 80px);
}
@media (min-width: 1728px) {
  :root { --gutter: calc((100vw - 1488px) / 2); --u: 1px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.2;
}
main, .site-footer { overflow-x: clip; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 700; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: calc(100% - 2 * var(--gutter)); max-width: 1488px; margin-inline: auto; position: relative; }

/* ============ Typography ============ */
.h1, .h2, .h3, .h4 { font-family: var(--f-head); font-weight: 700; text-transform: uppercase; line-height: 1.24; position: relative; z-index: 1; }
.h3, .h4 { font-weight: 500; }
.h1 + .h2 { margin-top: 8px; }
/* Высоты строк как в Figma (на 1728: 72/89 · 48/60 · 32/40 · 28/35 · 24/29 · 20/24 · 16/19), дальше — пропорционально */
.h1 { font-size: var(--fs-h1); line-height: 1.2361; }
.h2 { font-size: var(--fs-h2); line-height: 1.25; }
.h3 { font-size: var(--fs-h3); line-height: 1.25; }
.h4 { font-size: var(--fs-h4); line-height: 1.25; }
.body { font-size: var(--fs-body); line-height: 1.2; }
.body p + p { margin-top: 16px; }
.red { color: var(--red); }
/* Ручные переносы строк из Figma (<br class="fbr">): работают на широких экранах,
   где текст идёт в размере макета; на узких — текст переносится сам. */
.fbr { display: none; }
.mf { display: none; } /* переносы мобильного макета (430 px), см. mobile.css */
@media (min-width: 1384px) { .fbr { display: inline; } }

/* Компьютер 1101–1727 px (класс .zoomed ставит скрипт в <head>): вёрстка ровно в размерах макета 1728,
   затем вся страница пропорционально уменьшается через zoom — как макет в Figma при уменьшении. */
html.zoomed {
  --gutter: 120px; --u: 1px;
  --fs-h1: 72px; --fs-h2: 48px; --fs-h3: 32px; --fs-h4: 28px; --fs-h5: 24px; --fs-body: 20px; --fs-small: 16px;
  --gap-section: 144px; --radius: 24px; --btn-h: 80px;
  overflow-x: hidden;
}
html.zoomed body { width: 1728px; zoom: var(--z, 1); }
html.zoomed .fbr { display: inline; }
.dark { color: var(--txt); }

.eyebrow {
  display: flex; align-items: center; gap: 24px;
  font-size: var(--fs-small); text-transform: uppercase; line-height: 1.1875;
  margin-bottom: 32px; position: relative; z-index: 1;
}
.eyebrow::before { content: ""; width: 80px; height: 1px; background: var(--txt); flex: none; }

/* ============ Button ============ */
.btn {
  display: flex; align-items: center; justify-content: center;
  height: var(--btn-h); width: 100%;
  padding: 0 24px;
  border: 1px solid var(--txt); border-radius: var(--radius);
  background: var(--txt); color: var(--bg);
  font-family: var(--f-head); font-weight: 500; font-size: var(--fs-h3);
  text-transform: uppercase; line-height: 1; text-align: center;
  transition: background .2s, color .2s;
  position: relative; z-index: 1;
}
.btn:hover, .btn:focus-visible { background: transparent; color: var(--red); }
.btn:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* ============ Decorative layers (desktop) ============ */
.decor {
  position: absolute; z-index: 0; pointer-events: none;
  left: calc(var(--x, 0) * var(--u));
  top: calc(var(--y, 0) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
}
img.decor { object-fit: cover; max-width: none; }
.d-band { background: var(--sand); }
.d-bleed-l { left: calc(-1 * var(--gutter)); width: calc(var(--w) * var(--u) + var(--gutter) - 120 * var(--u)); }
.d-bleed-r { width: calc(100% - var(--x) * var(--u) + var(--gutter)); }
.d-center { left: 50%; transform: translateX(-50%); }

/* ============ Header ============ */
.site-header { padding-top: 16px; }
.header-row {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 15px; border-bottom: 1px solid var(--txt); /* 16 − 1 px линии: в макете линии нулевой толщины */
}
.logo { display: block; flex: none; }
.logo img { width: 160px; height: 64px; object-fit: contain; }
.menu { display: flex; align-items: center; justify-content: flex-end; gap: 120px; } /* от FAQ до иконок всегда 120 px макета */
.menu-links { display: flex; gap: 40px; }
.menu-links a { font-size: var(--fs-h5); font-weight: 500; text-transform: uppercase; white-space: nowrap; transition: color .2s; }
.menu-links a:hover, .menu-links a:focus-visible { color: var(--red); }
.socials { display: flex; gap: 8px; }
.socials img { width: 40px; height: 40px; transition: opacity .2s; }
.socials a:hover img { opacity: .7; }
.burger { display: none; }

/* ============ Sections ============ */
main > section { margin-top: var(--gap-section); }

/* БЛОК 1 */
.hero { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.hero-text { display: flex; flex-direction: column; position: relative; z-index: 1; }
.hero-sub { text-align: right; }
.hero-desc { margin-top: 64px; }
.hero-text .btn { margin-top: auto; }
.hero-photo { position: relative; overflow: hidden; min-height: calc(727 * var(--u)); } /* photo1 732×727 */
.hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* БЛОК 2 */
.stats {
  display: flex; align-items: center; justify-content: center;
  border-top: 1px solid var(--txt); border-bottom: 1px solid var(--txt);
  padding: 24px 20px;
}
.stat { flex: 1 1 0; display: flex; align-items: center; gap: 16px; font-family: var(--f-head); font-weight: 500; font-size: var(--fs-h4); text-transform: uppercase; color: var(--red); white-space: nowrap; }
.stat img { width: calc(80 * var(--u)); height: calc(80 * var(--u)); min-width: 48px; min-height: 48px; flex: none; }
.stat { min-height: calc(112 * var(--u)); }
.stat + .stat { border-left: 1px solid var(--txt); padding-left: 32px; margin-left: 32px; }
.stats { padding-top: 8px; padding-bottom: 7px; } /* 8 − 1 px нижней линии */

/* БЛОК 3 */
.karnataka > .h1 { white-space: nowrap; }
.k-row { display: grid; grid-template-columns: 921fr 543fr; gap: 24px; align-items: end; margin-top: 64px; position: relative; z-index: 1; }
.k-photo img { width: 100%; aspect-ratio: 921 / 394; object-fit: cover; }
.k-side { display: flex; flex-direction: column; gap: 48px; }

/* БЛОК 4 */
.route-sub { padding-left: calc(475 * var(--u)); }
/* В макете: 4 колонки по 354, между ними 24, разделитель — посередине промежутка */
.regions { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: calc(24 * var(--u)); margin-top: 64px; position: relative; z-index: 1; }
.regions article { position: relative; padding: 16px; display: flex; flex-direction: column; gap: 8px; min-height: calc(275 * var(--u)); }
.regions article + article::before { content: ""; position: absolute; left: calc(-12 * var(--u)); top: 0; bottom: 0; width: 1px; background: var(--txt); }

/* БЛОК 5 — программа */
.days { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 64px; position: relative; z-index: 1; align-items: start; }
.day { border-bottom: 1px solid var(--txt); }
.days-col .day:first-child { border-top: 1px solid var(--txt); }
.days-col .day:first-child .day-head { padding-top: 23px; } /* 24 − 1 px верхней линии */
.day-head { display: flex; align-items: flex-start; gap: 8px; width: 100%; text-align: left; padding: 24px 0 23px; font-family: var(--f-head); font-weight: 500; font-size: var(--fs-h4); text-transform: uppercase; line-height: 1.25; }
.day-head img { width: 48px; height: 48px; flex: none; }
.day-head .day-n { color: var(--red); white-space: nowrap; }
.day-head .day-t { padding-top: 0; }
.day-head:hover .day-t { color: var(--red); }
.day-title { display: flex; column-gap: 8px; padding-top: 6px; }
.day-t { flex: 1; min-width: 0; }
.day-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.day-body > div { overflow: hidden; }
.day-body .body { padding: 0 0 24px; }
.day-body .body p + p { margin-top: 8px; }
.day.is-open .day-body { grid-template-rows: 1fr; }
.day.is-open .day-head { padding-bottom: 8px; } /* в макете текст идёт сразу под заголовком, отступ 8 */

.carousel { display: grid; grid-template-columns: 543fr 921fr; gap: 24px; margin-top: 64px; position: relative; z-index: 1; }
.car-tabs { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; }
.car-tab { font-family: var(--f-head); font-weight: 500; font-size: var(--fs-h3); text-transform: uppercase; line-height: 1.25; text-align: left; transition: color .3s ease-in-out; }
.car-tab:hover, .car-tab.is-active { color: var(--red); }
/* Прототип Figma: при наведении на вкладку из-за левого края экрана выезжает песочная плашка
   до конца левой колонки (0…663 px), Smart Animate 300 мс ease-in-out */
@media (min-width: 1101px) {
  .car-tabs { position: relative; z-index: 0; }
  .car-tab { position: relative; }
  .car-tab::before {
    content: ""; position: absolute; z-index: -1; top: 0; bottom: 0;
    left: calc(-1 * var(--gutter)); width: calc(var(--gutter) + 543 * var(--u));
    background: var(--sand); transform: scaleX(0); transform-origin: left center;
    transition: transform .3s ease-in-out;
  }
  .car-tab:hover::before, .car-tab:focus-visible::before { transform: scaleX(1); }
}
.car-text { transition: opacity .3s ease-in-out; }
.car-text.is-fading { opacity: 0; }
.car-text { margin-top: max(24px, calc(320 * var(--u) - 3 * 1.25 * var(--fs-h3) - 80px)); }
.car-text p + p { margin-top: 8px; }
.car-stage { position: relative; aspect-ratio: 921 / 640; overflow: hidden; background: var(--sand); }
.car-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; z-index: 0; }
.car-img.is-under { opacity: 1; }
.car-img.is-front { opacity: 1; z-index: 1; transition: opacity .3s ease-in-out; } /* смена фото — как Smart Animate в Figma */
.car-arrow { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; color: var(--bg); transition: color .3s ease-out; }
.car-arrow:active { color: var(--sand); } /* прототип: нажатие — стрелка меняет цвет, 300 мс ease-out */
.car-arrow svg { width: 48px; height: 48px; display: block; }
.car-arrow:hover, .car-arrow:focus-visible { color: var(--sand); }
.car-arrow[disabled] { visibility: hidden; } /* в Figma у крайних слайдов стрелка скрыта */
.car-prev { left: 0; }
.car-next { right: 0; }
/* Счётчик фото: отступ от края фото справа и снизу одинаковый (на телефоне — 4 px, см. mobile.css) */
.car-dots { position: absolute; z-index: 2; right: 16px; bottom: 16px; display: flex; gap: 8px; }
.car-dots span { width: 16px; height: 16px; border-radius: 8px; background: var(--bg); transition: background-color .3s ease-in-out; }
.car-dots span.on { background: var(--red); } /* в макете активная точка — такой же кружок 16 px, только красный */

/* БЛОК 6 */
.guide-row { display: grid; grid-template-columns: 543fr 921fr; gap: 24px; margin-top: 8px; position: relative; z-index: 1; }
.guide-photo { margin-top: calc(57 * var(--u)); }
.guide-photo img { width: 100%; aspect-ratio: 543 / 527; object-fit: cover; object-position: bottom; }
.guide-sub { text-align: right; align-self: stretch; } /* правый край — по краю контента, как в макете */
.guide-text { display: flex; flex-direction: column; align-items: flex-start; }
.guide-text .facts { margin-top: calc(65 * var(--u)); }
.facts li { display: flex; align-items: center; gap: 16px; text-transform: uppercase; font-size: var(--fs-h5); font-weight: 500; line-height: 1.2083; }
.facts li + li { margin-top: 16px; }
.facts li::before { content: ""; width: 16px; height: 16px; flex: none; background: url("../assets/icons/ui-bullet.svg") center / contain no-repeat; }
.guide-text > .body { margin-top: 32px; }
.guide-text .btn { margin-top: 48px; width: calc(543 / 921 * 100%); min-width: min(100%, 320px); }

/* БЛОК 7 */
.price > .h1 { z-index: 2; }
.price { padding-bottom: calc(1 * var(--u)); } /* в макете блок 7 на 1 px выше своего содержимого (705) */
.price-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 64px; position: relative; z-index: 1; }
.incl li { display: flex; align-items: center; gap: 16px; font-family: var(--f-head); font-weight: 500; font-size: var(--fs-h4); text-transform: uppercase; line-height: 1.25; min-height: 48px; }
.incl li + li { margin-top: 16px; }
.incl li::before { content: ""; width: 48px; height: 48px; flex: none; background: url("../assets/icons/ui-check.svg") center / contain no-repeat; }
.incl li.no::before { background-image: url("../assets/icons/ui-cross.svg"); }
.price-side { margin-top: calc(-272 * var(--u)); display: flex; flex-direction: column; align-items: flex-end; }
.price-photo { width: calc(615 / 732 * 100%); }
.price-photo img { width: 100%; aspect-ratio: 615 / 393; object-fit: cover; } /* Figma 4pik 615×393 ($2500) */
.price-notes { margin-top: calc(31 * var(--u)); align-self: stretch; } /* 71 − 40 на строку «Едете компанией…»: кнопка остаётся вровень с последним пунктом слева */
.price-dates .red { font-weight: 500; }
/* Сезон в надзаголовке первого блока: отделён короткой чертой, красным */
/* Полоса «Сезон экспедиций» между шапкой и блоком 1: высота 80, на всю ширину, по 64 px сверху и снизу.
   Шрифты H4 (Unbounded Medium 28) + h5 (Exo 2 Medium 24), цвета айдентики. */
.season { margin-top: 64px; min-height: 80px; background: var(--sand); display: flex; align-items: center; padding: 8px 0; }
.season-t { font-family: var(--f-head); font-weight: 500; font-size: var(--fs-h4); line-height: 1.25; text-transform: uppercase; }
.season-s { font-family: var(--f-body); font-weight: 500; font-size: var(--fs-h5); line-height: 1.2083; text-transform: uppercase; }
main > .season + section { margin-top: 64px; }
.price-side .btn { margin-top: 48px; }

/* БЛОК 8 и 9 — списки вопросов */
.qa-list { border-top: 1px solid var(--txt); position: relative; z-index: 1; }
.qa { padding: 24px 0 23px; border-bottom: 1px solid var(--txt); }
.qa:first-child { padding-top: 23px; } /* 24 − 1 px верхней линии списка */
.qa .h3 { margin-bottom: 16px; }
.qa-arrow { display: none; } /* стрелка нужна только на телефоне */
.m-cta { display: none; }   /* кнопка внизу экрана — только на телефоне */
.faq .qa-list { width: calc(921 * var(--u)); margin-top: 64px; }
.faq > .h1 { max-width: calc(1064 * var(--u)); }
.d-6gr { object-fit: fill; }

main > .tips { margin-top: 64px; } /* в макете блоки 8 и 9 идут одной группой с отступом 64 */
.tips { display: grid; grid-template-columns: 543fr 921fr; gap: 24px; align-items: start; }
.tips-gfx { position: relative; min-height: calc(1024 * var(--u)); }
.tips-photo { position: absolute; left: calc(-216 * var(--u)); top: 0; width: calc(510 * var(--u)); max-width: none; height: calc(402 * var(--u)); object-fit: cover; }
.tips-7gr { position: absolute; left: 0; top: calc(426 * var(--u)); width: calc(520 * var(--u)); height: calc(598 * var(--u)); }
.tips-head { position: relative; text-align: right; }
.tips-band { --x: 189; left: calc(189 * var(--u)); top: calc(40 * var(--u)); height: calc(80 * var(--u)); width: calc(100% - 189 * var(--u) + var(--gutter)); }
.tips .qa-list { margin-top: 64px; }

/* БЛОК 10 */
.cta-title { text-align: right; }
.lead-form { width: calc(732 * var(--u)); min-width: min(100%, 520px); margin: 64px auto 0; position: relative; z-index: 1; }
.field { display: block; position: relative; border-top: 1px solid var(--txt); border-bottom: 1px solid var(--txt); margin-top: -1px; padding: 0; } /* шаг полей 60 px, как в макете */
.field input, .field textarea {
  display: block; width: 100%; border: 0; background: transparent; color: var(--txt);
  font-family: var(--f-body); font-weight: 500; font-size: var(--fs-h5); line-height: 1.2083;
  padding: 15px 16px; min-height: 59px; resize: vertical; outline: none;
}
.field textarea { min-height: 124px; }
.field ::placeholder { color: var(--txt); opacity: 1; text-transform: uppercase; }
.field:focus-within { border-color: var(--red); }
.field:focus-within ::placeholder { color: var(--beige); }
.field.invalid { border-color: var(--red); }
.field-contact { display: flex; align-items: center; padding-right: 0; }
.field-contact input { flex: 1; min-width: 0; }
.contact-toggle { display: flex; align-items: center; padding-right: 8px; }
.contact-toggle img { width: 48px; height: 48px; }
.contact-list { position: absolute; right: 0; top: 100%; z-index: 5; background: var(--bg); border: 1px solid var(--txt); padding: 8px 0; min-width: 220px; }
.contact-list li { padding: 8px 16px; font-size: var(--fs-h5); font-weight: 500; text-transform: uppercase; cursor: pointer; }
.contact-list li:hover, .contact-list li[aria-selected="true"] { color: var(--red); }
/* Галочка согласия на обработку персональных данных */
/* В макете между полем комментария и кнопкой 48 px: галочка встаёт ровно в этот промежуток,
   поэтому кнопка, «Хотите увидеть…» и подвал стоят там же, где в Figma */
.consent { display: flex; align-items: center; gap: 12px; margin: 24px 0 0; cursor: pointer; font-family: var(--f-body); font-size: var(--fs-small); line-height: 1.1875; } /* 24 px от поля, шрифт h7 (Exo 2, 16) */
.consent input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.consent-box { flex: none; width: 24px; height: 24px; border: 1px solid var(--txt); border-radius: 4px; display: grid; place-items: center; transition: background .2s, border-color .2s; }
.consent-box::after { content: ""; width: 7px; height: 12px; border: solid var(--bg); border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); opacity: 0; }
.consent input:checked + .consent-box { background: var(--red); border-color: var(--red); }
.consent input:checked + .consent-box::after { opacity: 1; }
.consent input:focus-visible + .consent-box { outline: 2px solid var(--red); outline-offset: 3px; }
.consent-text { padding-top: 0; }
.consent-text a { text-decoration: underline; text-underline-offset: 2px; }
.consent-text a:hover { color: var(--red); }
.consent.invalid .consent-box { border-color: var(--red); border-width: 2px; }
.consent.invalid .consent-text { color: var(--red); }
.lead-form .btn { margin-top: 48px; }
.lead-form .btn[disabled] { opacity: .6; cursor: wait; }
.form-error { margin-top: 16px; color: var(--red); }
.form-error a { text-decoration: underline; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-cta { display: flex; align-items: center; gap: 24px; margin-top: 32px; }
.form-cta img { width: 58px; height: 50px; flex: none; }

/* ============ Footer ============ */
.site-footer { margin-top: var(--gap-section); }
.footer-up { background: var(--sand); padding: 64px 0; }
.footer-grid { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; }
.footer-left { display: flex; align-items: flex-start; gap: calc(160 * var(--u)); }
.footer-logo { width: 256px; height: 256px; flex: none; display: flex; justify-content: center; }
.footer-logo img { width: 219px; height: 245px; }
.footer-menu { display: flex; gap: calc(80 * var(--u)); }
.footer-col { display: flex; flex-direction: column; gap: 40px; width: 238px; }
.footer-menu a { font-family: var(--f-head); font-weight: 500; font-size: var(--fs-h4); text-transform: uppercase; line-height: 1.25; transition: color .2s; }
.footer-menu a:hover { color: var(--red); }
.footer-side { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; width: 240px; flex: none; }
/* «Дизайн и иллюстрации @art_usdi»: 40 px левее иконок, низ текста на 24 px выше низа иконок (как в макете) */
.credit { position: absolute; right: calc(100% + 40px); bottom: 24px; width: max-content; font-family: var(--f-body); font-size: var(--fs-small); line-height: 1.1875; text-transform: uppercase; }
.credit a { transition: color .2s; }
.credit a:hover { color: var(--red); }
.footer-gr { width: 224px; height: auto; }
.socials-xl { gap: 24px; }
.socials-xl img { width: 64px; height: 64px; }
.footer-down { display: flex; justify-content: space-between; gap: 32px; padding: 16px 0; font-size: var(--fs-small); line-height: 1.1875; text-transform: uppercase; }
.footer-legal { display: flex; gap: 48px; }
.footer-legal a:hover { color: var(--red); }

/* ============ Modal ============ */
.modal { position: fixed; inset: 0; z-index: 50; background: rgba(58, 58, 58, .45); display: grid; place-items: center; padding: 16px; }
.modal[hidden] { display: none; }
.modal-box { background: var(--bg); width: min(732px, 100%); border-top: 1px solid var(--txt); border-bottom: 1px solid var(--txt); padding: 40px 16px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.modal-gfx { width: min(544px, 100%); display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: -43px; }
.modal-gfx picture:first-child img { width: 191px; height: 83px; }
.modal-gfx picture:last-child img { width: 122px; height: 122px; }
.modal-box .body { margin-top: 16px; }
.modal-ok { margin-top: 48px; width: min(544px, 100%); }

/* ============ Responsive ============ */

@media (max-width: 1100px) {
  :root { --gutter: 32px; --u: calc((100vw - 64px) / 1488); }

  .burger { display: flex; flex-direction: column; justify-content: center; gap: 6px; width: 44px; height: 44px; }
  .burger span { display: block; height: 2px; background: var(--txt); transition: transform .2s, opacity .2s; }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .header-row { flex-wrap: wrap; position: relative; }
  .menu { display: none; width: 100%; flex-direction: column; align-items: flex-start; gap: 24px; padding: 24px 0 8px; }
  .menu.open { display: flex; }
  .menu-links { flex-direction: column; gap: 16px; }

  .decor, .d-img.decor { display: none; }
  .d-band.keep { display: block; }

  .hero, .k-row, .carousel, .guide-row, .price-row, .tips, .days { grid-template-columns: 1fr; }
  .hero-photo { min-height: 0; aspect-ratio: 4 / 3; order: -1; }
  .hero-desc { margin-top: 32px; }
  .hero-text .btn { margin-top: 32px; }

  .stats { flex-wrap: wrap; padding: 8px 0; }
  .stat { flex: 1 1 50%; padding: 16px 0; gap: 16px; }
  .stat + .stat { border-left: 0; margin-left: 0; padding-left: 0; min-height: 0; }
  .stat:nth-child(even) { border-left: 1px solid var(--txt); padding-left: 16px; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--txt); }

  .karnataka > .h1 { white-space: normal; }
  .k-row { margin-top: 32px; }
  .k-side { gap: 32px; }

  .route-sub { padding-left: 0; }
  .regions { grid-template-columns: 1fr 1fr; column-gap: 0; margin-top: 32px; }
  .regions article + article::before { display: none; }
  .regions article { min-height: 0; padding: 16px 0; }
  .regions article + article { border-left: 0; }
  .regions article:nth-child(even) { border-left: 1px solid var(--txt); padding-left: 16px; }
  .regions article:nth-child(odd) { padding-right: 16px; }
  .regions article:nth-child(n+3) { border-top: 1px solid var(--txt); }

  .days { gap: 0; margin-top: 32px; }
  .days-col + .days-col .day:first-child { border-top: 0; }
  .days-col + .days-col .day:first-child .day-head { padding-top: 24px; }
  .carousel { margin-top: 48px; }
  .car-tabs { gap: 16px; }
  .car-text { margin-top: 24px; }
  .car-stage { order: -1; }
  .carousel .car-side { order: 0; }
  
  .guide-row { gap: 0; }
  .guide-photo { margin-top: 24px; order: 1; }
  .guide-text { display: contents; }
  .guide-sub { order: 0; text-align: left; }
  .guide-text .facts { order: 2; margin-top: 32px; }
  .guide-text > .body { order: 3; }
  .guide-text .btn { order: 4; width: 100%; }

  .price-row { margin-top: 32px; }
  .price-side { margin-top: 24px; align-items: stretch; }
  .price-photo { width: 100%; order: -1; }
  .price-notes { margin-top: 24px; }
  .price-side .btn { margin-top: 32px; }
  .incl li::before { width: 40px; height: 40px; }

  .faq .qa-list, .faq > .h1 { width: auto; max-width: none; }
  .faq .qa-list, .tips .qa-list { margin-top: 32px; }
  .tips-gfx { display: none; }
  .tips-head { text-align: left; }
  .tips-band { display: none; }

  .cta-title { text-align: left; }
  .lead-form { width: 100%; margin-top: 40px; }

  .footer-up { padding: 48px 0; }
  .footer-grid { flex-wrap: wrap; row-gap: 40px; }
  .footer-left { flex-wrap: wrap; gap: 32px 48px; }
  .footer-logo { width: auto; height: auto; }
  .footer-col { gap: 24px; width: auto; }
  .footer-menu { gap: 48px; }
  .footer-down { flex-direction: column; gap: 8px; }
  .footer-legal { flex-direction: column; gap: 8px; }
}

/* Телефон (≤600 px) — отдельный файл css/mobile.css по мобильному макету Figma «design phone». */

/* Якоря: блок не прячется под верхним краем экрана */
section[id], main > section { scroll-margin-top: 24px; }

/* Появление при прокрутке (класс .reveal ставит main.js).
   Элементы блока поднимаются по очереди (задержка --rd), песочные плашки «прочерчиваются»,
   рисунки и фото-нашивки проявляются. */
.js .reveal > :not(.decor):not(.mdec):not(.mband) {
  opacity: 0; transform: translateY(32px);
  transition: opacity .7s ease var(--rd, 0s), transform .7s cubic-bezier(.2, .7, .2, 1) var(--rd, 0s);
}
.js .reveal > .decor, .js .reveal > .mdec { opacity: 0; transition: opacity 1s ease calc(var(--rd, 0s) + .15s); }
.js .reveal > .d-band, .js .reveal > .mband { opacity: 1; clip-path: inset(0 100% 0 0); transition: clip-path .9s cubic-bezier(.6, 0, .2, 1) .1s; }
.js .reveal > .d-bleed-r, .js .reveal > .mband-r { clip-path: inset(0 0 0 100%); }
.js .reveal.is-visible > :not(.decor):not(.mdec):not(.mband) { opacity: 1; transform: none; }
.js .reveal.is-visible > .decor, .js .reveal.is-visible > .mdec { opacity: 1; }
.js .reveal.is-visible > .d-band, .js .reveal.is-visible > .mband { clip-path: inset(0); }
/* плашка за «…и полезные советы от гида» лежит внутри заголовка — прочерчиваем её так же */
.js .reveal .tips-band { clip-path: inset(0 0 0 100%); transition: clip-path .9s cubic-bezier(.6, 0, .2, 1) .3s; }
.js .reveal.is-visible .tips-band { clip-path: inset(0); }

/* Анимации показываются всегда, в том числе при системной настройке «уменьшить движение»
   (в Windows — выключенные «Эффекты анимации»): так решил автор сайта. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ============ Страницы документов (privacy.html, consent.html) ============ */
.legal-header .header-row { align-items: center; }
.legal-back { font-size: var(--fs-h5); font-weight: 500; text-transform: uppercase; transition: color .2s; }
.legal-back:hover { color: var(--red); }
.legal { max-width: 920px; padding-top: 64px; padding-bottom: 64px; }
.legal .h2 { margin-bottom: 8px; overflow-wrap: anywhere; }
.legal-date { font-size: var(--fs-small); text-transform: uppercase; margin-bottom: 40px; }
.legal .h4 { font-weight: 500; color: var(--red); margin: 40px 0 12px; }
.legal p, .legal li { font-size: var(--fs-body); line-height: 1.45; }
.legal p + p { margin-top: 12px; }
.legal ul { list-style: none; padding: 0; margin: 8px 0 12px; }
.legal li { position: relative; padding-left: 24px; }
.legal li + li { margin-top: 6px; }
.legal li::before { content: ""; position: absolute; left: 4px; top: .6em; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.legal a { text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--red); }
.legal-footer { border-top: 1px solid var(--txt); }
.footer-legal a[aria-current="page"] { color: var(--red); }
@media (max-width: 600px) {
  .legal { padding-top: 32px; padding-bottom: 40px; }
  .legal .h4 { margin-top: 28px; }
  .legal .h2 { font-size: min(20px, 4.6vw); }
  .legal-back { font-size: 14px; }
  .footer-legal a { display: inline-block; padding: 6px 0; }
}