@font-face {
  font-family: "TT Drugs";
  src: url("/assets/fonts/TTDrugs-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TT Drugs";
  src: url("/assets/fonts/TTDrugs-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TT Drugs";
  src: url("/assets/fonts/TTDrugs-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter-cyrillic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #f3ebe2;
  --paper: #fffdf5;
  --ink: #1d1512;
  --muted: #543a30;
  --accent: #ad4f1a;
  --header: 50px;
  --page: 80px;
  --sans: "Inter", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-padding-top: var(--header);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
}

button,
a {
  font: inherit;
}

img {
  max-width: 100%;
  display: block;
}

/* Шапка */

.header {
  position: sticky;
  top: 0;
  z-index: 20;
  color: #fff;
}

.header--stuck {
  background: var(--muted);
}

.header__bar {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  height: var(--header);
  padding: 0 var(--page);
  gap: 32px;
}

/* Разделитель по макету: линия 1px #ecece8 с прозрачностью 40% от края до края контента.
   У шапки на коричневом фоне (при прокрутке) и в мобильной шапке линии в макете нет */
.header__bar::after {
  content: "";
  position: absolute;
  right: var(--page);
  bottom: 0;
  left: var(--page);
  height: 1px;
  background: rgba(236, 236, 232, 0.4);
}

.header--stuck .header__bar::after {
  display: none;
}

.header__mark {
  display: none;
}

.header__nav,
.header__tools {
  display: flex;
  flex-shrink: 0;
  flex-wrap: nowrap;
  align-items: center;
}

.header__nav {
  gap: 32px;
}

.header__tools {
  margin-left: auto;
  gap: 28px;
}

.header__link,
.header__phone,
.header__call {
  flex-shrink: 0;
  color: #fff;
  font-size: 16px;
  line-height: 1.55;
  white-space: nowrap;
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.header__link:hover,
.header__phone:hover,
.header__call:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

.header__icon-button,
.header__burger {
  display: none;
}

.header__drawer {
  display: none;
}

.header--open .header__drawer {
  display: flex;
}

body.menu-open {
  overflow: hidden;
}

/* Блок 1 */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: max(100vh, 640px);
  min-height: max(100svh, 640px);
  margin-top: calc(var(--header) * -1);
  padding: calc(var(--header) + 16px) var(--page) 40px;
  color: #fff;
  background: #1d1512;
}

.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

.hero__toolbar,
.hero__brand,
.hero__facts {
  position: relative;
  z-index: 1;
}

.hero__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
}

.hero__presentation {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  padding: 0;
  color: #fff;
  font-size: 16px;
  background: none;
  border: 0;
  cursor: pointer;
}

.hero__presentation-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(173, 79, 26, 0.6);
}

.hero__brand {
  width: 100%;
  margin: auto 0;
  padding-top: 42px;
  text-align: center;
}

.hero__wordmark {
  width: min(620px, 100%);
  height: auto;
  margin: 0 auto;
  filter: brightness(0) invert(1);
}

.hero__tagline {
  margin: 24px 0 0;
  font-family: "TT Drugs", serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
}

.hero__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}

.hero__fact {
  min-height: 124px;
  padding: 10px 16px 16px 15px;
  border-radius: 12px;
  background: rgba(33, 11, 11, 0.2);
}

.hero__fact-value,
.hero__fact-label {
  margin: 0;
}

.hero__fact-value {
  font-family: "TT Drugs", serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.55;
}

.hero__fact-value span {
  font-size: 22px;
}

.hero__star {
  margin-left: 2px;
  color: #fff;
  font-size: 16px;
  line-height: 1;
  vertical-align: top;
}

.hero__fact-label {
  max-width: 16em;
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.2;
}

/* Блок 2 */

.about {
  background: var(--bg);
  padding-top: 120px;
}

.about__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  padding: 0 var(--page);
}

.about__eyebrow {
  margin: 0;
  color: var(--accent);
  font-size: 13px;
  line-height: 1;
  text-transform: uppercase;
}

.about__text {
  margin: 0;
  max-width: 644px;
  color: var(--muted);
  font-family: "TT Drugs", serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.3;
}

.about__photo {
  width: calc(100% - var(--page));
  height: auto;
  aspect-ratio: 1920 / 1007;
  margin: 80px 0 0 var(--page);
  object-fit: cover;
  object-position: left top;
}

/* Блок 3 */

.weekends {
  background: var(--bg);
  padding-top: 100px;
}

.weekends__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  padding: 0 var(--page) 60px;
}

.weekends__title {
  margin: 0;
  max-width: 530px;
  color: var(--accent);
  font-family: "TT Drugs", serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
}

.weekends__lead {
  margin: 0;
  max-width: 345px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.2;
}

.weekends__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.weekends__card {
  position: relative;
  display: flex;
  align-items: flex-start;
  min-height: 613px;
  color: #fff;
  overflow: hidden;
}

.weekends__card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
}

.weekends__card-text {
  position: relative;
  z-index: 1;
  margin-top: 437px;
  padding: 0 0 56px 80px;
}

.weekends__card:last-child .weekends__card-text {
  padding-left: 60px;
}

.weekends__card h3 {
  margin: 0 0 24px;
  font-family: "TT Drugs", serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.4;
  text-transform: uppercase;
}

.weekends__card p {
  margin: 0;
  max-width: 500px;
  font-size: 16px;
  line-height: 1.2;
}

.weekends__card:last-child p {
  max-width: 310px;
}

/* Блок 4 */

.environment {
  display: grid;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  grid-template-columns: minmax(280px, 450px) max-content;
  justify-content: space-between;
  align-items: start;
  gap: 48px 80px;
  padding: 100px var(--page) 150px;
}

.environment__title {
  margin: 0;
  max-width: 450px;
  color: var(--muted);
  font-family: "TT Drugs", serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.3;
}

.environment__list {
  display: grid;
  grid-template-columns: repeat(3, 193px);
  gap: 72px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.environment__photo {
  width: 190px;
  height: 190px;
  margin-bottom: 14px;
  border-radius: 50%;
  object-fit: cover;
}

.environment__item h3 {
  margin: 0 0 8px;
  color: var(--muted);
  font-family: "TT Drugs", serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.4;
}

.environment__item p {
  margin: 0;
  color: rgba(84, 58, 48, 0.5);
  font-size: 16px;
  line-height: 1.2;
}

/* Плейсхолдеры остальных блоков */

.block {
  padding: 28px 32px;
}

.block__inner {
  min-height: 180px;
  padding: 28px;
  background: var(--paper);
  border: 1px dashed var(--accent);
}

.block__label {
  margin: 0 0 8px;
  color: var(--accent);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.block h2 {
  margin: 0 0 12px;
  font-family: "TT Drugs", serif;
  font-weight: 400;
  font-size: 40px;
  overflow-wrap: anywhere;
}

.block__note {
  margin: 0;
  max-width: 46em;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
}

/* Ссылки капсом шире обычных, поэтому до 1360 шапку приходится уплотнять, иначе правое поле съедается */
@media (max-width: 1360px) {
  .header__bar {
    gap: 24px;
    padding-inline: 40px;
  }

  .header__nav {
    gap: 18px;
  }
}

@media (max-width: 1200px) {
  .header__bar {
    gap: 16px;
    padding-inline: 24px;
  }

  .header__nav {
    gap: 12px;
  }

  .header__tools {
    gap: 16px;
  }
}

@media (max-width: 1100px) {
  :root {
    --page: 40px;
  }

  .header__nav {
    gap: 16px;
  }

  .header__tools {
    gap: 16px;
  }

  .hero__facts {
    grid-template-columns: 1fr 1fr;
  }

  .about__head,
  .weekends__head {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .weekends__lead {
    max-width: none;
  }

  .about__text {
    font-size: 20px;
  }
}

@media (max-width: 1120px) {
  :root {
    --header: 68px;
  }

  .header__bar {
    gap: 12px;
    padding-inline: 20px;
  }

  .header__bar::after {
    display: none;
  }

  .header__tools {
    gap: 10px;
  }

  .header__mark,
  .header__icon-button {
    display: grid;
  }

  .header__burger {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .header__nav,
  .header__call,
  .header__phone {
    display: none;
  }

  .header__mark {
    margin-right: auto;
  }

  .header__icon-button,
  .header__burger {
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    border: 0;
    border-radius: 50%;
    backdrop-filter: blur(12px);
  }

  .header__burger span {
    display: block;
    width: 16px;
    height: 1.6px;
    margin: 2px 0;
    background: #fff;
  }

  .header__burger span {
    transition: transform 0.25s ease, opacity 0.2s ease;
  }

  .header--open .header__burger span:nth-child(1) {
    transform: translateY(5.6px) rotate(45deg);
  }

  .header--open .header__burger span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }

  .header--open .header__burger span:nth-child(3) {
    transform: translateY(-5.6px) rotate(-45deg);
  }

  /* Открытое меню: коричневая панель под шапкой, остальная страница затемнена */
  .header--open {
    background: var(--muted);
  }

  .header--open::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
  }

  /* Панель лежит поверх страницы под строкой шапки, поэтому высота шапки не меняется и контент не прыгает */
  .header__drawer {
    position: absolute;
    z-index: 1;
    top: 100%;
    left: 0;
    width: 100%;
    display: none;
    flex-direction: column;
    gap: 24px;
    padding: 39px var(--page) 24px;
    background: var(--muted);
  }

  .header--open .header__drawer .header__link {
    display: block;
    font-family: "TT Drugs", serif;
    font-size: 20px;
    line-height: 1.2;
    text-align: left;
    white-space: normal;
  }

  .header--open .header__drawer .header__call {
    display: block;
    margin-top: 36px;
    padding: 12px 34px;
    border: 1px solid #fff;
    font-size: 13px;
    line-height: 1.55;
    text-align: center;
  }

  .header__drawer .header__link:focus-visible,
  .header__drawer .header__call:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
  }

  .hero__mark {
    display: none;
  }

  .hero__toolbar {
    justify-content: flex-start;
  }

  .hero__presentation {
    margin-left: 0;
  }
}

@media (max-width: 768px) {
  :root {
    --page: 20px;
  }

  .hero {
    min-height: max(100vh, 564px);
    min-height: max(100svh, 564px);
    padding-top: calc(var(--header) + 8px);
    padding-bottom: 12px;
  }

  .hero__photo {
    object-position: center 30%;
  }

  .hero__presentation {
    font-size: 13px;
  }

  .hero__presentation-icon {
    width: 40px;
    height: 40px;
  }

  .hero__brand {
    margin: auto 0;
    padding: 76px 0 75px;
  }

  .hero__wordmark {
    width: min(320px, 100%);
  }

  .hero__tagline {
    margin-top: 16px;
    font-size: 16px;
  }

  .hero__facts {
    gap: 4px;
    margin-top: 0;
  }

  .hero__fact {
    min-height: 101px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(33, 11, 11, 0.4);
  }

  .hero__fact-value {
    font-size: 28px;
    white-space: nowrap;
  }

  .hero__fact-value span {
    font-size: 16px;
  }

  .hero__unit::before {
    content: "\00a0";
  }

  .hero__fact-label {
    margin-top: 8px;
    font-size: 14px;
  }

  .hero__fact-label--compact {
    font-size: 13px;
  }

  .hero__fact-value .hero__unit {
    font-size: 18px;
  }

  .about {
    padding-top: 48px;
  }

  .about__head {
    gap: 24px;
  }

  .about__eyebrow {
    font-size: 12px;
  }

  .about__text {
    font-size: 16px;
  }

  .about__photo {
    width: calc(100% - var(--page));
    height: 307px;
    aspect-ratio: auto;
    margin: 32px 0 0 var(--page);
    object-position: left top;
  }

  .block {
    padding: 16px;
  }

  .block h2 {
    font-size: 28px;
  }

  .weekends {
    padding-top: 56px;
  }

  .weekends__head {
    gap: 24px;
    padding-bottom: 32px;
  }

  .weekends__title {
    font-size: 26px;
  }

  .weekends__cards {
    grid-template-columns: 1fr;
  }

  .weekends__card {
    align-items: flex-end;
    min-height: 307px;
  }

  .weekends__card-text,
  .weekends__card:last-child .weekends__card-text {
    margin-top: 0;
    max-width: none;
    padding: 20px;
  }

  .weekends__card h3 {
    margin-bottom: 4px;
    font-size: 20px;
  }

  .weekends__card p,
  .weekends__card:last-child p {
    max-width: none;
  }
}

@media (max-width: 1080px) {
  .environment {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 48px;
    padding-bottom: 96px;
  }

  .environment__title {
    width: 100%;
    max-width: 450px;
    justify-self: start;
    text-align: left;
  }

  .environment__list {
    width: 100%;
    grid-template-columns: repeat(3, 193px);
    justify-content: space-between;
    column-gap: 0;
    row-gap: 72px;
  }

  .environment__item {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .environment__item h3,
  .environment__item p {
    align-self: stretch;
    text-align: left;
  }
}

@media (max-width: 768px) {
  .environment {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-top: 56px;
    padding-bottom: 64px;
  }

  .environment__title {
    font-size: 16px;
  }

  .environment__list {
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
    grid-template-columns: repeat(3, 150px);
    justify-content: center;
    column-gap: clamp(24px, calc(24.5614vw - 108.63px), 80px);
    row-gap: 24px;
  }

  .environment__photo {
    width: 150px;
    height: 150px;
    margin-bottom: 10px;
  }

  .environment__item h3 {
    margin-bottom: 4px;
    font-size: 18px;
  }

  .environment__item p {
    font-size: 12px;
    line-height: 1.2;
  }
}

@media (max-width: 540px) {
  .environment__list {
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
    grid-template-columns: repeat(2, 150px);
    justify-content: center;
    column-gap: clamp(10px, calc(38.8889vw - 130px), 80px);
    row-gap: 24px;
  }
}

/* Блок 5 */

.why__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  padding: 100px var(--page) 80px;
}

.why__title {
  margin: 0;
  color: var(--accent);
  font-family: "TT Drugs", serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
}

.why__lead {
  margin: 0;
  max-width: 625px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.2;
}

.why__stage {
  position: relative;
  min-height: 594px;
  overflow: hidden;
  color: var(--paper);
  touch-action: pan-y;
  user-select: none;
  cursor: grab;
}

.why__stage.is-dragging {
  cursor: grabbing;
}

.why__slide {
  position: absolute;
  inset: 0;
}

.why__slide[hidden] {
  display: none;
}

.why__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  pointer-events: none;
}

/* Подпись держится от низа, поэтому длинный текст растёт вверх и не залезает на полоски */
.why__caption {
  position: absolute;
  bottom: 106px;
  left: var(--page);
  width: min(593px, calc(100% - 2 * var(--page)));
}

.why__caption h3 {
  margin: 0 0 24px;
  font-family: "TT Drugs", serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.4;
  text-transform: uppercase;
}

.why__caption p {
  max-width: 436px;
  margin: 0;
  font-size: 16px;
  line-height: 1.2;
}

.why__bars {
  position: absolute;
  z-index: 2;
  left: var(--page);
  bottom: 18px;
  display: flex;
  gap: 12px;
  width: min(1200px, calc(100% - 2 * var(--page)));
}

.why__bar {
  position: relative;
  flex: 1;
  height: 4px;
  padding: 0;
  overflow: hidden;
  background: rgba(249, 249, 249, 0.45);
  border: 0;
}

button.why__bar {
  cursor: pointer;
}

.why__bar span {
  display: block;
  width: 0;
  height: 100%;
  background: #f9f9f9;
}

.why__bar.is-active span {
  animation: why-progress 5s linear forwards;
}

.why__stage.is-dragging .why__bar.is-active span {
  animation-play-state: paused;
}

.why__bar:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

@keyframes why-progress {
  from { width: 0; }
  to { width: 100%; }
}

/* Блок 6. Доход */

.income {
  padding: 100px var(--page) 100px;
}

.income__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 24px;
  align-items: start;
  margin-bottom: 60px;
}

.income__title {
  margin: 0;
  max-width: 629px;
  color: var(--accent);
  font-family: "TT Drugs", serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
}

.income__lead {
  margin: 0;
  max-width: 540px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.2;
}

.income__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 25px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.income__card {
  position: relative;
  min-height: 514px;
  overflow: hidden;
  color: var(--paper);
}

.income__card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

/* Текст в потоке: верхний отступ даёт позицию по макету, а карточка сама растёт, если подпись длиннее */
.income__card-text {
  position: relative;
  padding: 340px 32px 32px;
}

.income__card h3 {
  margin: 0 0 32px;
  font-family: "TT Drugs", serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.4;
}

.income__card p {
  margin: 0;
  font-size: 16px;
  line-height: 1.2;
}

.income__dots {
  display: none;
}

.income.is-armed .income__card h3,
.income.is-armed .income__card p {
  opacity: 0;
  transform: translateY(12px);
}

.income.is-armed .income__card h3.is-in,
.income.is-armed .income__card p.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.45s ease, transform 0.45s ease;
}

/* Блок 6. Расчёт */

.owner {
  position: relative;
  max-width: 1440px;
  min-height: 776px;
  margin-inline: auto;
  padding: 80px 0;
}

.owner__photo {
  position: absolute;
  z-index: 1;
  top: 272px;
  left: 80px;
  width: 319px;
  height: 424px;
  object-fit: cover;
}

.owner__scheme {
  position: absolute;
  top: 80px;
  left: 204px;
  width: 390px;
  height: 382px;
}

.owner__copy {
  max-width: 497px;
  margin-left: 781px;
}

.owner__title {
  margin: 0;
  color: var(--accent);
  font-family: "TT Drugs", serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
}

.owner__note {
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.2;
}

.owner__calc {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 77px;
  padding: 0;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  text-transform: uppercase;
  background: none;
  border: 0;
  cursor: pointer;
}

.owner__calc-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--accent);
}

.owner__calc:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

@media (max-width: 1380px) and (min-width: 1201px),
       (max-width: 884px) and (min-width: 769px) {
  .income__card-text {
    padding-top: 292px;
  }

  .income__card h3 {
    min-height: 2.8em;
    margin-bottom: 16px;
  }
}

@media (max-width: 1360px) {
  .owner {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    min-height: 0;
    padding: 80px max(20px, calc(100% - 1278px)) 80px 80px;
  }

  .owner__visual {
    position: relative;
    flex: 0 100000 514px;
    width: auto;
    min-width: 300px;
    max-width: 514px;
    height: auto;
    aspect-ratio: 514 / 616;
  }

  .owner__copy {
    flex: 0 1 clamp(300px, calc(226.63px + 19.88vw), 497px);
    width: auto;
    min-width: 300px;
    max-width: clamp(300px, calc(226.63px + 19.88vw), 497px);
    margin-left: auto;
  }

  .owner__title {
    font-size: clamp(24px, calc(18.24px + 1.6vw), 40px);
  }

  .owner__photo {
    top: 31.169%;
    left: 0;
    width: 62.062%;
    height: 68.831%;
  }

  .owner__scheme {
    top: 0;
    left: 24.125%;
    width: 75.875%;
    height: 62.013%;
  }
}

@media (max-width: 720px) {
  .owner {
    padding-left: 40px;
  }
}

@media (max-width: 520px) {
  .owner {
    padding-left: 20px;
  }
}

@media (max-width: 740px) {
  .owner {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
    padding-right: var(--page);
    padding-left: var(--page);
  }

  .owner__copy {
    flex: none;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin-left: 0;
    order: -1;
  }

  .owner__visual {
    flex: none;
    width: min(514px, 100%);
    max-width: 514px;
    margin-inline: auto;
  }

  .owner__calc {
    margin-top: 32px;
  }
}

@media (max-width: 1200px) {
  .income__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .why__head {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 56px var(--page) 32px;
  }

  .why__title {
    font-size: 26px;
  }

  .why__title br {
    display: none;
  }

  .why__lead {
    max-width: none;
    font-size: 14px;
  }

  .why__stage {
    min-height: 350px;
  }

  .why__caption {
    bottom: 36px;
    width: calc(100% - 2 * var(--page));
  }

  .why__caption p {
    max-width: none;
  }

  .why__caption h3 {
    margin-bottom: 4px;
    font-size: 20px;
  }

  .why__bars {
    bottom: 20px;
    gap: 4px;
  }

  .why__bar {
    height: 3px;
  }

  .income {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .income__head {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 32px;
  }

  .income__title {
    max-width: none;
    font-size: 24px;
  }

  .income__lead {
    max-width: none;
  }

  .income__list {
    display: flex;
    gap: 8px;
    margin-inline: calc(var(--page) * -1);
    padding-inline: var(--page);
    overflow-x: auto;
    scroll-padding-inline: var(--page);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .income__list::-webkit-scrollbar {
    display: none;
  }

  .income__card {
    flex: 0 0 320px;
    min-height: 400px;
    scroll-snap-align: start;
  }

  .income__card-text {
    padding: 255px 16px 24px;
  }

  .income__card h3 {
    margin-bottom: 16px;
    font-size: 20px;
  }

}

@media (max-width: 360px) {
  .owner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
    min-height: 0;
    padding: 56px var(--page);
  }

  .owner__visual {
    flex: none;
    align-self: stretch;
    width: auto;
    min-width: 0;
    max-width: none;
    height: 383px;
    margin-inline: 0;
    aspect-ratio: auto;
  }

  .owner__copy {
    flex: none;
    width: auto;
    max-width: none;
    margin-left: 0;
    order: -1;
  }

  .owner__photo {
    top: auto;
    bottom: 0;
    left: 0;
    width: 199px;
    height: 263px;
  }

  .owner__scheme {
    top: 0;
    left: 77px;
    width: 243px;
    height: 238px;
  }

  .owner__title {
    font-size: 24px;
  }

  .owner__note {
    margin-top: 20px;
  }

  .owner__calc {
    margin-top: 32px;
    font-size: 12px;
  }

  .owner__calc-icon {
    width: 40px;
    height: 40px;
  }

  .income__dots {
    display: flex;
    gap: 4px;
    margin-top: 16px;
  }

  .income__dots span {
    width: 50px;
    height: 3px;
    background: rgba(84, 58, 48, 0.35);
  }

  .income__dots span.is-active {
    background: var(--muted);
  }
}

@media (prefers-reduced-motion: reduce) {
  .why__slide,
  .interior__slide,
  .gallery__slide {
    transition: none;
  }

  .why__bar.is-active span {
    width: 100%;
    animation: none;
  }

  .income.is-armed .income__card h3,
  .income.is-armed .income__card p {
    opacity: 1;
    transform: none;
  }
}

/* Форма заявки */

body.lead-open {
  overflow: hidden;
}

.lead[hidden] {
  display: none;
}

.lead {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 24px;
}

.lead__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(29, 21, 18, 0.46);
}

.lead__dialog {
  position: relative;
  width: min(440px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 40px 36px 36px;
  background: var(--paper);
  color: var(--ink);
}

.lead__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.lead__title {
  margin: 0 0 28px;
  font-family: "TT Drugs", serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.15;
}

.lead__form {
  display: grid;
  gap: 18px;
}

.lead__form[hidden] {
  display: none;
}

.lead__field {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.lead__field input {
  width: 100%;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid rgba(84, 58, 48, 0.35);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}

.lead__field input:focus {
  outline: none;
  border-bottom-color: var(--accent);
}

.lead__field input::placeholder {
  color: rgba(84, 58, 48, 0.35);
}

.lead__field input[aria-invalid] {
  border-bottom-color: #c0392b;
}

.lead__agree {
  display: grid;
  gap: 6px;
}

.lead__error {
  color: #c0392b;
  font-size: 12px;
  line-height: 1.3;
}

.lead__error[hidden] {
  display: none;
}

.lead__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.lead__consent input {
  margin-top: 2px;
  accent-color: var(--accent);
}

.lead__consent a {
  color: inherit;
}

.lead__status {
  margin: 0;
  font-size: 15px;
  line-height: 1.35;
}

.lead__captcha-notice {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.lead__captcha-notice a {
  color: inherit;
}

.lead__dialog[data-state="error"] .lead__status {
  color: var(--accent);
}

.lead__submit {
  justify-self: start;
  padding: 14px 28px;
  border: 0;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
}

.lead__submit:disabled {
  cursor: default;
  opacity: 0.6;
}

.lead__submit:focus-visible,
.lead__close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.lead__success {
  display: grid;
  gap: 28px;
}

.lead__success[hidden] {
  display: none;
}

.lead__success-text {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.35;
}

.lead__success-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.lead__download[hidden] {
  display: none;
}

.lead__success-actions:has(.lead__download:not([hidden])) .lead__done {
  background: transparent;
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

@media (max-width: 440px) {
  .lead__dialog {
    padding: 32px 20px 24px;
  }

  /* Справа место под крестик, длинный заголовок («Получить презентацию») переносится ровными строками */
  .lead__title {
    margin-bottom: 20px;
    padding-right: 36px;
    font-size: 26px;
    text-wrap: balance;
  }
}

/* Блок 7. Карта */

.map {
  display: grid;
  grid-template-columns: minmax(0, 708fr) minmax(0, 732fr);
  background: var(--accent);
  color: #fff;
}

.map__panel {
  padding: 100px 89px 80px 80px;
}

.map__title {
  max-width: 539px;
  margin: 0;
  font-family: "TT Drugs", serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
}

.map__lead {
  max-width: 337px;
  margin-top: 40px;
}

.map__lead p {
  margin: 0;
  font-size: 16px;
  line-height: 1.2;
}

.map__lead p + p {
  margin-top: 1.2em;
}

.map__routes {
  max-width: 505px;
  margin-top: 67px;
}

.map__group + .map__group {
  margin-top: 39px;
}

.map__mode {
  margin: 0 0 11px;
  font-family: "TT Drugs", serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.3;
  text-transform: uppercase;
}

.map__group:first-child .map__mode {
  margin-bottom: 19px;
}

.map__list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.map__route {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.map__time {
  flex: none;
  font-family: "TT Drugs", serif;
  font-size: 20px;
  line-height: 1.3;
}

.map__line {
  flex: 1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.map__place {
  flex: none;
  font-family: "TT Drugs", serif;
  font-size: 13px;
  line-height: 1.3;
  text-align: right;
}

.map__picture {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  background: #f3ebe4;
}

.map__picture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}

@media (min-width: 1441px) {
  .map {
    grid-template-columns: 1fr 1fr;
  }

  .map__picture img {
    right: auto;
    width: auto;
    max-width: none;
    height: 100%;
  }
}

@media (max-width: 1100px) {
  .map__panel {
    padding: 80px 40px;
  }
}

@media (max-width: 880px) {
  .map {
    grid-template-columns: 1fr;
  }

  .map__panel {
    padding: 56px var(--page) 32px;
  }

  .map__title {
    max-width: none;
    font-size: 24px;
  }

  .map__lead {
    max-width: none;
    margin-top: 20px;
  }

  .map__lead p + p {
    margin-top: 8px;
  }

  .map__routes {
    max-width: none;
    margin-top: 24px;
  }

  .map__group + .map__group {
    margin-top: 24px;
  }

  .map__mode,
  .map__group:first-child .map__mode {
    margin-bottom: 12px;
    font-size: 16px;
  }

  .map__list {
    gap: 8px;
  }

  .map__time {
    font-size: 14px;
  }

  .map__place {
    font-size: 12px;
  }

  .map__picture {
    aspect-ratio: 360 / 370;
  }

  .map__picture img {
    position: static;
    height: auto;
  }
}

/* Блок 8. Архитектура и интерьер */

.concept {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 302px));
  column-gap: 24px;
  justify-content: center;
  background: #1c1412;
  padding: 100px var(--page);
}

.concept__title {
  grid-column: 3 / 5;
  max-width: 563px;
  margin: 0 0 60px;
  color: var(--accent);
  font-family: "TT Drugs", serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
}

.concept__list {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.concept__card {
  position: relative;
  aspect-ratio: 302 / 678;
  overflow: hidden;
  cursor: pointer;
}

/* Затемнение раскрытой карточки */
.concept__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(28, 20, 18, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.concept__card--open::after {
  opacity: 1;
}

.concept__card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
}

.concept__name {
  position: absolute;
  z-index: 1;
  top: 40px;
  left: 24px;
  width: min(217px, calc(100% - 48px));
  margin: 0;
  color: #fff;
  font-family: "TT Drugs", serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.3;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}

.concept__text {
  position: absolute;
  z-index: 1;
  top: 40px;
  left: 24px;
  width: calc(100% - 48px);
  margin: 0;
  color: #fff;
  font-size: 16px;
  line-height: 1.2;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s;
}

.concept__card--open .concept__name {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
}

.concept__card--open .concept__text {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0.15s, 0.15s, 0s;
}

.concept__card:nth-child(2) .concept__name {
  font-size: 25px;
  line-height: 1.2;
}

.concept__card:nth-child(4) .concept__name {
  width: min(268px, calc(100% - 34px));
}

.concept__star {
  margin-left: 2px;
  font-size: 0.6em;
  line-height: 1;
  vertical-align: top;
}

.concept__more {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 47px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(173, 79, 26, 0.4);
  color: #fff;
  transform: translateX(-50%);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.concept__more svg {
  display: block;
  width: 14px;
  height: 14px;
  fill: currentColor;
  transition: transform 0.3s ease;
}

.concept__card--open .concept__more {
  background: rgba(173, 79, 26, 0.6);
}

.concept__card--open .concept__more svg {
  transform: rotate(45deg);
}

.concept__list--drag,
.concept__list--drag * {
  cursor: grabbing;
  user-select: none;
}

.concept__more:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@media (max-width: 1360px) {
  .concept {
    display: block;
    padding: 100px 0;
  }

  .concept__title {
    margin: 0 var(--page) 60px max(var(--page), calc(100% - 563px - var(--page)));
    font-size: clamp(24px, calc(18.24px + 1.6vw), 40px);
  }

  .concept__list {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    padding: 0 var(--page);
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--page);
    scrollbar-width: none;
    cursor: grab;
  }

  .concept__list::-webkit-scrollbar {
    display: none;
  }

  .concept__card {
    flex: none;
    width: 302px;
    scroll-snap-align: start;
  }
}

@media (max-width: 1278px) {
  .concept__title {
    max-width: none;
    margin-left: var(--page);
    margin-right: var(--page);
  }
}

@media (max-width: 768px) {
  .concept {
    padding: 80px 0;
  }

  .concept__title {
    margin-bottom: 48px;
  }

  .concept__list {
    gap: 16px;
  }

  /* На мобильном карточки работают как на десктопе: сначала заголовок и «+», по нажатию заголовок сменяется текстом.
     Размер карточки при этом не меняется */
  .concept__card {
    width: min(320px, calc(100vw - 2 * var(--page)));
    height: 410px;
    aspect-ratio: auto;
  }

  /* Затемнение по макету: градиент #2b120a сверху (под заголовком) до прозрачного к низу, слой 70% */
  .concept__card::after {
    background: linear-gradient(to bottom, rgba(43, 18, 10, 0.7) 19%, rgba(43, 18, 10, 0) 76%);
    opacity: 1;
  }

  /* У раскрытой карточки фон плотнее, чтобы текст читался поверх светлых фасадов */
  .concept__card::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(to bottom, rgba(28, 20, 18, 0.82), rgba(28, 20, 18, 0.55));
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
  }

  .concept__card--open::before {
    opacity: 1;
  }

  .concept__card .concept__name,
  .concept__card:nth-child(2) .concept__name,
  .concept__card:nth-child(4) .concept__name {
    top: 29px;
    left: 16px;
    width: calc(100% - 32px);
    font-size: 20px;
    line-height: 1.4;
  }

  .concept__card .concept__text {
    top: 29px;
    left: 16px;
    width: calc(100% - 32px);
    font-size: 14px;
    line-height: 1.35;
    text-shadow: 0 1px 6px rgba(28, 20, 18, 0.7);
  }

  .concept__more {
    bottom: 28px;
  }
}

@media (max-width: 440px) {
  .concept {
    padding: 56px 0;
  }

  .concept__title {
    max-width: none;
    margin: 0 var(--page) 34px;
  }

  .concept__list {
    gap: 6px;
  }
}

/* Блок 9. Благоустройство */

.zones {
  width: 100%;
  padding: 100px var(--page);
  container-type: inline-size;
}

.zones__head {
  display: grid;
  grid-template-columns: 628px minmax(0, 1fr);
  column-gap: 24px;
  margin-bottom: 128px;
}

.zones__track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
}

.zones__track::-webkit-scrollbar {
  display: none;
}

.zones__slide {
  display: grid;
  grid-template-columns: repeat(2, min(628px, 100cqi));
  column-gap: 24px;
  flex: none;
  width: max-content;
  scroll-snap-align: start;
}

.zones__card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
  align-items: start;
  width: 100%;
}

.zones__title {
  max-width: 529px;
  margin: 0;
  color: var(--accent);
  font-family: "TT Drugs", serif;
  font-size: clamp(24px, calc(18.24px + 1.6vw), 40px);
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
}

.zones__lead {
  max-width: 440px;
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.2;
}

.zones__card--low .zones__copy {
  margin-top: calc(100% * 331 / 302);
}

.zones__copy h3 {
  margin: 0 0 32px;
  color: var(--muted);
  font-family: "TT Drugs", serif;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.4;
}

.zones__copy p {
  margin: 0;
  color: rgba(84, 58, 48, 0.5);
  font-size: 16px;
  line-height: 1.2;
}

.zones__photo {
  width: 100%;
  height: auto;
  aspect-ratio: 302 / 494;
  max-width: none;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
}

.zones__track--drag,
.zones__track--drag * {
  cursor: grabbing;
  user-select: none;
}

/* Полоса прокрутки трека там, где он листается руками */
.zones__progress {
  position: relative;
  display: none;
  height: 3px;
  margin-top: 12px;
  background: rgba(84, 58, 48, 0.25);
}

.zones__progress-thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--muted);
}

.zones__progress.is-scrollable {
  display: block;
}

.zones--pinned .zones__progress {
  display: none;
}

/* Десктоп: секция закрепляется, вертикальный скролл двигает слайды влево (высоту секции задаёт JS) */
.zones--pinned {
  padding: 0;
}

.zones--pinned .zones__stage {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  padding: 100px var(--page);
}

.zones--pinned .zones__track {
  overflow: clip;
  scroll-snap-type: none;
  cursor: default;
}

.zones--pinned .zones__slide {
  scroll-snap-align: none;
  transform: translate3d(var(--zones-x, 0px), 0, 0);
  will-change: transform;
}

@media (max-width: 1439px) {
  .zones__head {
    display: block;
  }

  .zones__lead {
    margin-top: 24px;
  }

  .zones__track {
    cursor: grab;
  }
}

@media (max-width: 668px) {
  .zones__slide {
    scroll-snap-align: none;
  }

  .zones__card {
    scroll-snap-align: start;
  }
}

@media (max-width: 583px) {
  .zones {
    padding: 56px 0 0;
  }

  .zones__head {
    display: block;
    margin: 0 var(--page) 32px;
  }

  .zones__title {
    max-width: none;
  }

  .zones__lead {
    max-width: none;
    margin-top: 20px;
  }

  .zones__track {
    gap: 24px;
    padding: 0 var(--page);
    scroll-padding-inline: var(--page);
    cursor: grab;
  }

  .zones__progress {
    margin: 12px var(--page) 0;
  }

  .zones__slide {
    display: contents;
  }

  .zones__track::-webkit-scrollbar {
    display: none;
  }

  .zones__card {
    display: flex;
    flex: none;
    flex-direction: column;
    gap: 17px;
    width: 191px;
    scroll-snap-align: start;
  }

  .zones__card--low .zones__copy {
    margin-top: 0;
  }

  .zones__copy h3 {
    margin-bottom: 8px;
    font-size: 18px;
  }

  /* Фото прижаты к низу карточки: у подписей разное число строк, но верх и низ фото на одной линии */
  .zones__photo {
    width: 191px;
    height: 313px;
    margin-top: auto;
    aspect-ratio: auto;
  }
}

/* Блок 10. Личное пространство */

.interior {
  max-width: 1440px;
  margin-inline: auto;
  padding: 100px var(--page);
  container-type: inline-size;
}

.interior__head {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

.interior__title {
  flex: 0 1 567px;
  min-width: max-content;
  max-width: 567px;
  margin: 0;
  color: var(--accent);
  font-family: "TT Drugs", serif;
  font-size: clamp(24px, calc(18.24px + 1.6vw), 40px);
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
}

.interior__lead {
  flex: 0 1 628px;
  max-width: 628px;
  margin: 0 0 0 auto;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.2;
}

.interior__stage {
  position: relative;
  display: grid;
  grid-template-columns: 411fr 869fr;
  width: 100%;
  aspect-ratio: 1280 / 738;
  margin-top: 60px;
  touch-action: pan-y;
}

.interior__view {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  cursor: none;
  touch-action: pan-y;
}

.interior__slide {
  position: absolute;
  inset: 0;
}

.interior__slide[hidden] {
  display: none;
}

.interior__view picture,
.interior__photo {
  position: absolute;
  inset: 0;
}

.interior__photo {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
}

.interior__cursor {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(173, 79, 26, 0.4);
  color: #fff;
  transform: translate(-50%, -50%);
  visibility: hidden;
  pointer-events: none;
}

.interior__view.is-cursor .interior__cursor {
  visibility: visible;
}

.interior__view.is-over-pager .interior__cursor {
  visibility: hidden;
}

/* Номера слайдов: активный показан точкой, остальные цифрами */
.interior__pager {
  position: absolute;
  z-index: 2;
  right: 24px;
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 6px;
  border-radius: 300px;
  background: rgba(173, 79, 26, 0.4);
  cursor: default;
}

.interior__page {
  position: relative;
  display: grid;
  place-items: center;
  width: 16px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  font-size: 16px;
  line-height: 1.2;
  cursor: pointer;
}

.interior__page::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.4);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.interior__page span {
  transition: opacity 0.2s ease;
}

.interior__page.is-active::before {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.interior__page.is-active span {
  opacity: 0;
}

.interior__page:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -2px;
  border-radius: 50%;
}

.interior__cursor svg,
.interior__arrow svg {
  display: block;
}

.interior__panel {
  display: flex;
  grid-column: 1;
  grid-row: 1;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  padding: 60px 36px 50px 32px;
  background: var(--accent);
  color: #fff;
}

/* Тексты всех слайдов лежат в одной ячейке, поэтому высота панели не прыгает */
.interior__infos {
  display: grid;
  flex: 1 1 auto;
}

.interior__info {
  display: flex;
  grid-area: 1 / 1;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s;
}

.interior__info.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0.15s, 0.15s, 0s;
}

.interior__name {
  margin: 0;
  font-family: "TT Drugs", serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.4;
}

.interior__copy {
  margin-top: auto;
}

.interior__copy p {
  margin: 0;
  font-size: 16px;
  line-height: 1.2;
}

.interior__copy p + p {
  margin-top: 1.2em;
}

.interior__nav {
  display: none;
  gap: 12px;
  margin-top: 30px;
}

.interior__arrow {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  cursor: pointer;
}

.interior__arrow--prev svg {
  transform: scaleX(-1);
}

.interior__cursor:focus-visible,
.interior__arrow:focus-visible,
.interior__view:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@container (max-width: 935px) {
  .interior__head {
    display: block;
  }

  .interior__title {
    min-width: 0;
  }

  .interior__lead {
    max-width: 628px;
    margin-top: 24px;
    margin-left: 0;
  }
}

@media (max-width: 980px) {
  .interior {
    padding: 56px var(--page);
  }

  .interior__lead {
    max-width: none;
    margin-top: 20px;
  }
}

@media (max-width: 980px), (hover: none), (pointer: coarse) {
  .interior__stage {
    display: flex;
    flex-direction: column;
    aspect-ratio: auto;
    margin-top: 32px;
  }

  .interior__view {
    order: -1;
    height: auto;
    aspect-ratio: 320 / 180;
    cursor: auto;
  }

  .interior__cursor {
    display: none;
  }

  /* На мобилке номера слайдов стоят в нижней строке панели рядом со стрелками */
  .interior__pager {
    right: 16px;
    bottom: 29px;
    background: rgba(255, 255, 255, 0.2);
  }

  .interior__panel {
    height: auto;
    padding: 20px 16px;
  }

  .interior__name {
    font-size: 20px;
  }

  .interior__copy {
    margin-top: 16px;
  }

  .interior__nav {
    display: flex;
  }
}

/* Блок 11. Галерея */

@property --gallery-turn {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

.gallery {
  width: 100%;
  padding-bottom: 100px;
}

.gallery__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1440 / 740;
  max-height: 1080px;
  overflow: hidden;
  color: #fff;
  touch-action: pan-y;
}

.gallery__slide {
  position: absolute;
  inset: 0;
}

.gallery__slide[hidden] {
  display: none;
}

.gallery__photo {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
}

.gallery__label {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: rgba(173, 79, 26, 0.4);
  color: #fff;
  font: inherit;
  font-size: 16px;
  line-height: 1;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
  visibility: hidden;
  pointer-events: none;
}

.gallery__stage.is-cursor .gallery__label {
  visibility: visible;
}

.gallery__thumbs {
  --thumb: 40px;
  --thumb-active: 60px;
  --thumb-gap: 4px;
  position: absolute;
  z-index: 3;
  bottom: 32px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: var(--thumb-gap);
  padding: 6px;
  border-radius: 999px;
  background: rgba(197, 185, 173, 0.8);
  transform: translateX(-50%);
  cursor: pointer;
}

.gallery__thumb {
  position: relative;
  display: block;
  width: var(--thumb);
  height: var(--thumb);
  padding: 0;
  border: 0;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
  transition: width 0.45s ease, height 0.45s ease;
}

.gallery__thumb.is-active {
  width: var(--thumb-active);
  height: var(--thumb-active);
}

.gallery__thumb img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  -webkit-user-drag: none;
}

.gallery__ring {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: var(--thumb-active);
  height: var(--thumb-active);
  transform: translate(6px, 6px);
  pointer-events: none;
  transition: transform 0.45s ease, width 0.45s ease, height 0.45s ease;
  animation: gallery-progress 3s linear forwards;
}

.gallery__ring.is-moving {
  animation: none;
  visibility: hidden;
}

.gallery__arc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 180deg,
    #ad4f1a 0turn,
    #fff calc(var(--gallery-turn) * 1turn),
    transparent calc(var(--gallery-turn) * 1turn)
  );
  -webkit-mask: radial-gradient(closest-side, transparent 80%, #000 80%);
  mask: radial-gradient(closest-side, transparent 80%, #000 80%);
}

.gallery__orbit {
  position: absolute;
  inset: 0;
  transform: rotate(calc(180deg + var(--gallery-turn) * 360deg));
}

.gallery__orbit--start {
  transform: rotate(180deg);
}

.gallery__cap {
  position: absolute;
  left: 50%;
  top: 5%;
  width: 10%;
  height: 10%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.gallery__cap--start {
  background: #ad4f1a;
  clip-path: inset(0 50% 0 0);
}

.gallery__cap--end {
  background: #fff;
  clip-path: inset(0 0 0 50%);
}

.gallery.is-paused .gallery__ring {
  animation-play-state: paused;
}

.gallery__thumb:focus-visible,
.gallery__stage:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

@keyframes gallery-progress {
  from { --gallery-turn: 0; }
  to { --gallery-turn: 1; }
}

@media (hover: hover) and (pointer: fine) {
  .gallery__stage {
    cursor: none;
  }
}

@media (hover: none), (pointer: coarse) {
  .gallery__label {
    display: none;
  }
}

@media (max-width: 760px) {
  .gallery {
    padding-bottom: 0;
  }

  .gallery__stage {
    aspect-ratio: 360 / 420;
    max-height: none;
  }

  .gallery__thumbs {
    --thumb: 32px;
    --thumb-active: 48px;
    bottom: 16px;
    padding: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery__thumb,
  .gallery__ring {
    transition: none;
  }

  .gallery__ring {
    animation: none;
    --gallery-turn: 1;
  }
}

/* Блок 12. Инфраструктура на все сезоны */

.seasons {
  display: grid;
  grid-template-columns: minmax(0, 653fr) minmax(0, 787fr);
  align-items: start;
  max-width: 1440px;
  margin: 0 auto;
  padding: 100px 0 114px;
  overflow-x: clip;
  background: var(--bg);
}

.seasons__intro {
  display: flex;
  flex-direction: column;
  gap: 40px;
  min-width: 0;
  padding: 0 48px 0 var(--page);
}

.seasons__title {
  margin: 0;
  color: var(--accent);
  font-family: "TT Drugs", serif;
  font-size: clamp(24px, calc(18.24px + 1.6vw), 40px);
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
}

.seasons__lead {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 426px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.2;
}

.seasons__lead p {
  margin: 0;
}

.seasons__stage {
  position: relative;
  min-width: 0;
  aspect-ratio: 787 / 798;
  overflow: clip;
  color: #fff;
  touch-action: pan-y;
  user-select: none;
  cursor: grab;
}

.seasons__stage.is-dragging {
  cursor: grabbing;
}

.seasons__slide {
  position: absolute;
  inset: 0;
}

.seasons__slide[hidden] {
  display: none;
}

.seasons__photo {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center bottom;
  -webkit-user-drag: none;
  user-select: none;
}

.seasons__caption {
  position: absolute;
  z-index: 2;
  right: 80px;
  bottom: 81px;
  left: 60px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.seasons__caption-title {
  margin: 0;
  font-family: "TT Drugs", serif;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.4;
}

.seasons__caption-text {
  margin: 0;
  max-width: 465px;
  font-size: 16px;
  line-height: 1.2;
}

.seasons__bars {
  position: absolute;
  z-index: 2;
  right: 80px;
  bottom: 34px;
  left: 60px;
  display: flex;
  gap: 12px;
}

.seasons__bar {
  position: relative;
  flex: 1 1 0;
  height: 4px;
  padding: 0;
  border: 0;
  background: rgba(249, 249, 249, 0.4);
  overflow: hidden;
}

button.seasons__bar {
  cursor: pointer;
}

.seasons__bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left center;
}

.seasons__bar.is-active .seasons__bar-fill {
  animation: seasons-progress 5s linear forwards;
}

.seasons.is-paused .seasons__bar-fill,
.seasons__stage.is-dragging .seasons__bar-fill {
  animation-play-state: paused;
}

.seasons__bar:focus-visible,
.seasons__stage:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

@keyframes seasons-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (max-width: 900px) {
  .seasons {
    display: block;
    padding: 56px 0 0;
  }

  .seasons__intro {
    gap: 20px;
    padding: 0 var(--page);
  }

  .seasons__lead {
    gap: 8px;
  }

  .seasons__stage {
    margin-top: 32px;
  }

  .seasons__caption {
    right: 20px;
    bottom: 39px;
    left: 20px;
    gap: 4px;
  }

  .seasons__caption-title {
    font-size: 20px;
  }

  .seasons__caption-text {
    max-width: none;
  }

  .seasons__bars {
    right: 20px;
    bottom: 20px;
    left: 20px;
    gap: 4px;
  }

  .seasons__bar {
    height: 3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .seasons__bar-fill {
    animation: none;
    transform: scaleX(0);
  }

  .seasons__bar.is-active .seasons__bar-fill {
    transform: scaleX(1);
  }
}

/* Блок 13. Генплан */
.masterplan {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 100px 0;
  overflow-x: clip;
  background: var(--bg);
}

.masterplan__title {
  grid-row: 1;
  margin: 0 0 60px;
  padding: 0 var(--page);
  color: var(--accent);
  font-family: "TT Drugs", serif;
  font-size: clamp(24px, calc(18.24px + 1.6vw), 40px);
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
}

.masterplan__stage {
  position: relative;
  grid-row: 2;
  grid-column: 1;
  justify-self: stretch;
  margin: 0 24px;
  /* Во всю ширину, высота не больше 1080px: на очень широком экране картинка обрезается сверху и снизу,
     а не сужается (иначе подпись справа уезжала на светлый фон) */
  height: min(calc((100vw - 48px) * 740 / 1392), 1080px);
  overflow: clip;
}

.masterplan__plane {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  aspect-ratio: 1392 / 740;
  transform: translateY(-50%);
}

.masterplan__photo {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.masterplan__mark {
  position: absolute;
  top: var(--y);
  left: var(--x);
  padding: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 16px;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.masterplan__info {
  z-index: 1;
  grid-row: 2;
  grid-column: 1;
  align-self: end;
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 24px;
  margin: 0 84px 60px;
  color: #fff;
  text-align: right;
}

.masterplan__opening {
  margin: 0;
  font-family: "TT Drugs", serif;
  font-size: clamp(24px, calc(18.24px + 1.6vw), 40px);
  line-height: 1.2;
  text-transform: uppercase;
}

.masterplan__address {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font-family: "TT Drugs", serif;
  font-size: 20px;
  line-height: 1.55;
}

.masterplan__icon {
  flex: none;
  margin: 0 2px;
  color: var(--accent);
}

@media (max-width: 760px) {
  .masterplan {
    padding: 56px 0 0;
  }

  .masterplan__title {
    margin-bottom: 20px;
  }

  .masterplan__info {
    grid-row: 2;
    align-self: auto;
    justify-self: stretch;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 32px;
    padding: 0 var(--page);
    color: var(--muted);
    text-align: left;
  }

  .masterplan__opening {
    font-size: 20px;
  }

  .masterplan__opening br {
    display: none;
  }

  .masterplan__address {
    font-size: 16px;
  }

  .masterplan__stage {
    grid-row: 3;
    height: 345px;
    margin: 0;
    aspect-ratio: auto;
  }

  .masterplan__plane {
    inset: 0 auto 0 min(0px, calc(50% - 324.5px));
    width: calc(345px * 1392 / 740);
    aspect-ratio: auto;
    transform: none;
  }

  .masterplan__mark {
    top: var(--my);
    left: var(--mx);
    padding: 3px 8px;
  }
}

/* Блок 14. Стандарты безупречной жизни */
.security {
  display: grid;
  grid-template-columns: minmax(0, 515fr) minmax(0, 925fr);
  max-width: 1440px;
  margin: 0 auto;
  padding: 100px 0 80px;
  overflow-x: clip;
  background: var(--bg);
}

.security__title {
  grid-row: 1;
  grid-column: 2;
  margin: 0 0 60px;
  color: var(--accent);
  font-family: "TT Drugs", serif;
  font-size: clamp(24px, calc(18.24px + 1.6vw), 40px);
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
}

.security__list {
  grid-row: 2;
  grid-column: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  min-width: 0;
  padding: 0 26px 0 var(--page);
}

.security__item {
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-family: "TT Drugs", serif;
  font-size: clamp(20px, calc(10px + 1.111vw), 26px);
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: color 0.3s ease;
}

.security__item:hover,
.security__item.is-active {
  color: var(--accent);
}

.security__item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.security__arrow {
  position: absolute;
  top: 50%;
  left: -45px;
  opacity: 0;
  transform: translate(-8px, -50%);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.security__item.is-active .security__arrow {
  opacity: 1;
  transform: translate(0, -50%);
}

.security__stage {
  position: relative;
  grid-row: 2;
  grid-column: 2;
  min-width: 0;
  aspect-ratio: 925 / 566;
  overflow: clip;
  color: #fff;
}

.security__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}

.security__slide.is-active {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s ease;
}

.security__slide[hidden] {
  display: none;
}

.security__slide picture {
  display: block;
  height: 100%;
}

.security__photo {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center bottom;
  transform: scale(1.04);
  transition: transform 1.2s ease;
  -webkit-user-drag: none;
  user-select: none;
}

.security__slide.is-active .security__photo {
  transform: none;
}

.security__caption {
  position: absolute;
  z-index: 2;
  right: 60px;
  bottom: 60px;
  left: 60px;
  max-width: 530px;
}

.security__caption-title {
  display: none;
  margin: 0;
  font-family: "TT Drugs", serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.4;
}

.security__caption-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.2;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.security__slide.is-active .security__caption-text {
  opacity: 1;
  transform: none;
  transition-delay: 0.2s;
}

.security__bars {
  display: none;
}

.security__stage:focus-visible,
.security__bar:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

@keyframes security-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (max-width: 1100px) {
  .security__arrow {
    left: -32px;
  }
}

@media (max-width: 980px) {
  .security {
    display: block;
    padding: 56px 0 0;
  }

  .security__title {
    margin-bottom: 32px;
    padding: 0 var(--page);
  }

  .security__list {
    display: none;
  }

  .security__stage {
    width: 100%;
    aspect-ratio: 360 / 470;
    max-height: 760px;
    touch-action: pan-y;
    user-select: none;
    cursor: grab;
  }

  .security__stage.is-dragging {
    cursor: grabbing;
  }

  .security__slide,
  .security__slide.is-active {
    opacity: 1;
    visibility: visible;
    transition: none;
  }

  .security__photo,
  .security__slide.is-active .security__photo {
    transform: none;
    transition: none;
  }

  .security__caption {
    right: 20px;
    bottom: 29px;
    left: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: none;
  }

  .security__caption-title {
    display: block;
  }

  .security__caption-text,
  .security__slide.is-active .security__caption-text {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .security__bars {
    position: absolute;
    z-index: 2;
    right: 20px;
    bottom: 10px;
    left: 20px;
    display: flex;
    gap: 4px;
  }

  .security__bar {
    position: relative;
    flex: 1 1 0;
    height: 3px;
    padding: 0;
    border: 0;
    background: rgba(249, 249, 249, 0.4);
    overflow: hidden;
    cursor: pointer;
  }

  .security__bar-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 100%;
    background: #fff;
    transform: scaleX(0);
    transform-origin: left center;
  }

  .security__bar.is-active .security__bar-fill {
    animation: security-progress 5s linear forwards;
  }

  .security.is-paused .security__bar-fill,
  .security__stage.is-dragging .security__bar-fill {
    animation-play-state: paused;
  }
}

@media (prefers-reduced-motion: reduce) {
  .security__slide,
  .security__slide.is-active,
  .security__photo,
  .security__caption-text,
  .security__arrow {
    transition: none;
  }

  .security__bar-fill {
    animation: none;
  }

  .security__bar.is-active .security__bar-fill {
    animation: none;
    transform: scaleX(1);
  }
}

/* Блок 15. Планировки */
.plans {
  --edge: var(--plans-start, var(--page));
  padding-top: 100px;
  background: var(--bg);
}

.plans__title {
  max-width: 532px;
  margin: 0 0 60px max(var(--page), calc((100% - 1440px) / 2 + var(--page)));
  color: var(--accent);
  font-family: "TT Drugs", serif;
  font-size: clamp(24px, calc(18.24px + 1.6vw), 40px);
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
}

.plans__track {
  display: flex;
  gap: 24px;
  padding: 0 var(--edge);
  overflow-x: auto;
  scroll-padding-left: var(--edge);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
}

.plans__track::-webkit-scrollbar {
  display: none;
}

.plans__track--drag,
.plans__track--drag * {
  cursor: grabbing;
  user-select: none;
}

.plans__card {
  display: flex;
  flex: none;
  flex-direction: column;
  width: 340px;
  padding: 0 16px 24px;
  background: #fbf8f4;
  scroll-snap-align: start;
}

.plans__media {
  position: relative;
  height: 295px;
  margin: 0 -16px;
  overflow: hidden;
}

.plans__slide {
  width: 100%;
  height: 100%;
  max-width: none;
  padding: 10px;
  object-fit: contain;
  -webkit-user-drag: none;
  user-select: none;
}

.plans__area {
  margin: 16px 0 0;
  color: #302d29;
  font-family: "TT Drugs", serif;
  font-size: 26px;
  line-height: 1.2;
}

.plans__specs {
  display: grid;
  gap: 8px;
  margin: 21px 0 0;
}

.plans__row {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.plans__row::after {
  content: "";
  flex: 1 1 auto;
  order: 1;
  height: 1px;
  margin-top: 14px;
  background: #dfdbd8;
}

.plans__row dt {
  flex: none;
}

.plans__row dd {
  flex: none;
  order: 2;
  margin: 0;
  color: rgba(84, 58, 48, 0.6);
  text-align: right;
}

.plans__price {
  margin-top: 20px;
  padding: 12px 16px;
  border: 1px solid var(--accent);
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  line-height: 1.55;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.plans__price:hover {
  background: var(--accent);
  color: #fff;
}

.plans__price:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (max-width: 760px) {
  .plans {
    padding-top: 56px;
  }

  .plans__title {
    margin-bottom: 32px;
  }

  .plans__track {
    gap: 8px;
  }

  .plans__card {
    width: 320px;
    padding-bottom: 20px;
  }

  .plans__media {
    height: 250px;
  }

  .plans__slide {
    padding: 10px 24px;
  }

  .plans__area {
    font-size: 24px;
  }

  .plans__specs {
    margin-top: 16px;
  }

  .plans__row {
    font-size: 12px;
  }

  .plans__row::after {
    margin-top: 13px;
  }

  .plans__price {
    margin-top: 32px;
  }
}

/* Блок 16. Консультация */
.consult {
  display: grid;
  grid-template-columns: minmax(0, 652fr) minmax(0, 628fr);
  align-items: start;
  max-width: 1440px;
  margin: 0 auto;
  padding: 100px var(--page);
  background: var(--bg);
}

.consult__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding-right: 40px;
}

.consult__title {
  margin: 0;
  color: var(--accent);
  font-family: "TT Drugs", serif;
  font-size: clamp(24px, calc(18.24px + 1.6vw), 40px);
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
}

.consult__text {
  display: flex;
  flex-direction: column;
  gap: 17px;
  max-width: 364px;
  margin-top: 41px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.2;
}

.consult__text p {
  margin: 0;
}

.consult__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  text-transform: uppercase;
  cursor: pointer;
}

.consult__cta-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  transition: transform 0.2s ease;
}

.consult__cta:hover .consult__cta-icon {
  transform: translateX(4px);
}

.consult__cta:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.consult__operator {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 94px;
}

.consult__texture {
  width: 190px;
  height: 190px;
  border-radius: 50%;
}

.consult__logo {
  width: 235px;
  height: auto;
}

.consult__visual {
  min-width: 0;
}

.consult__photo {
  width: 100%;
  height: auto;
  aspect-ratio: 628 / 739;
  object-fit: cover;
}

@media (max-width: 900px) {
  .consult {
    display: block;
    padding: 56px 0 0;
  }

  .consult__copy {
    padding: 0 var(--page);
  }

  .consult__text {
    gap: 8px;
    max-width: none;
    margin-top: 20px;
  }

  .consult__cta {
    margin-top: 24px;
    color: var(--muted);
    font-size: 12px;
  }

  .consult__cta-icon {
    width: 40px;
    height: 40px;
    color: var(--accent);
  }

  .consult__operator {
    gap: 8px;
    margin-top: 24px;
  }

  .consult__texture {
    width: 65px;
    height: 65px;
  }

  .consult__logo {
    width: 80px;
  }

  .consult__visual {
    display: block;
    margin-top: 32px;
  }

  .consult__photo {
    aspect-ratio: 360 / 300;
    max-height: 600px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .consult__cta-icon {
    transition: none;
  }
}

/* Подвал */

.footer {
  background: linear-gradient(180deg, #ad4f1a, #543a30);
  color: #fff;
}

.footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 411px);
  column-gap: 40px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 63px var(--page) 50px;
}

.footer a {
  color: inherit;
}

.footer__brand {
  min-width: 0;
}

.footer__logo {
  width: min(372px, 100%);
  height: auto;
  filter: brightness(0) invert(1);
}

.footer__tagline {
  margin: 10px 0 0;
  font-family: "TT Drugs", serif;
  font-size: 15px;
  line-height: 1.25;
}

.footer__contacts {
  display: grid;
  justify-items: start;
  align-content: start;
  gap: 18px;
  font-style: normal;
}

.footer__contact {
  font-size: 20px;
  line-height: 1.25;
  text-decoration: none;
}

.footer__office {
  display: grid;
  gap: 6px;
  margin: 17px 0 0;
  font-size: 16px;
  line-height: 1.25;
}

.footer__office-label {
  opacity: 0.5;
  font-size: 12px;
}

.footer__legal {
  grid-column: 1 / -1;
  margin-top: 96px;
}

.footer__developer {
  width: 164px;
  height: auto;
  opacity: 0.5;
}

.footer__disclaimer {
  max-width: 1240px;
  margin: 20px 0 0;
  opacity: 0.5;
  font-size: 16px;
  line-height: 17px;
}

.footer__bottom {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 40px;
  margin-top: 50px;
  font-size: 16px;
  line-height: 17px;
}

.footer__copy {
  margin: 0;
  opacity: 0.5;
}

.footer__link {
  opacity: 0.5;
  text-decoration: none;
  transition: opacity 0.2s;
}

.footer__studio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.footer__studio img {
  width: 55px;
  height: auto;
}

.footer__contact:hover,
.footer__disclaimer a:hover {
  text-decoration: underline;
}

.footer__link:hover,
.footer__link:focus-visible {
  opacity: 1;
}

@media (max-width: 860px) {
  .footer__inner {
    display: block;
    padding: 40px var(--page);
  }

  .footer__logo {
    width: 100%;
    max-width: 372px;
  }

  .footer__tagline {
    max-width: 320px;
    margin-top: 12px;
    line-height: 19px;
  }

  .footer__contacts {
    gap: 16px;
    margin-top: 24px;
  }

  .footer__office {
    margin-top: 0;
  }

  .footer__legal {
    margin-top: 57px;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer__link {
    transition: none;
  }
}

/* Кнопка «Наверх» */

.to-top {
  position: fixed;
  z-index: 15;
  right: 50px;
  bottom: 32px;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(187, 89, 33, 0.6);
  color: #fff;
  transition: background-color 0.2s ease;
}

.to-top:hover {
  background: rgba(187, 89, 33, 0.9);
}

/* Та же стрелка из макета, повёрнутая вверх */
.to-top svg {
  transform: rotate(-90deg);
}

.to-top:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

@media (max-width: 768px) {
  .to-top {
    right: 20px;
    bottom: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .to-top {
    transition: none;
  }
}

/* Ссылки и кнопки, открывающие форму: 14px только на десктопе, на планшете и телефоне остаются свои размеры */
@media (min-width: 1025px) {
  .owner__calc,
  .consult__cta,
  .plans__price {
    font-size: 14px;
  }
}

/* Основной мелкий текст 16px только на десктопе (от 1025px), на планшете и телефоне остаётся 14px */
@media (max-width: 1024px) {
  .weekends__lead,
  .weekends__card p,
  .why__caption p,
  .income__lead,
  .income__card p,
  .owner__note,
  .map__lead p,
  .zones__lead,
  .zones__copy p,
  .interior__lead,
  .interior__page,
  .interior__copy p,
  .gallery__label,
  .seasons__lead,
  .seasons__caption-text,
  .masterplan__mark,
  .security__caption-text,
  .consult__text,
  .footer__disclaimer,
  .footer__bottom {
    font-size: 14px;
  }
}

/* У этих блоков на 768px и ниже свои значения, поэтому возвращаем 14px только на планшете */
@media (min-width: 769px) and (max-width: 1024px) {
  .hero__presentation,
  .environment__item p,
  .concept__text {
    font-size: 14px;
  }
}

/* Телефон: отступы перед этими блоками намеренно больше, чем в макете: примерно в 1,5 раза, перед блоком 10 в 2 раза */
@media (max-width: 768px) {
  .weekends,
  .environment,
  .income {
    padding-top: 84px;
  }

  .interior {
    padding-top: 112px;
  }
}

/* У генплана свой порог 760px, поэтому «Стандарты безупречной жизни» двигаем с ним */
@media (max-width: 760px) {
  .security {
    padding-top: 84px;
  }
}