@font-face {
  font-family: "Anton";
  src: url("../assets/fonts/Anton-Cyrillic-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #f6f1e6;
  --bg-alt: #ece4d3;
  --dark: #17150f;
  --text: #1b1912;
  --text-muted: #6b6559;
  --accent: #24c9bd;
  --border: #ddd4bd;

  --font-head: "Anton", "Arial Narrow", Arial, sans-serif;
  --font-body: "Geist", "Segoe UI", sans-serif;

  --container: 1720px;
  --gap: 24px;

  --ease: cubic-bezier(.16,.84,.44,1);

  /* ---------- Type scale ----------
     display        — hero statement
     content-title   — section H2s / major standalone headings
     content-title-sm — bold lead callouts inside a section (non-uppercase)
     body / body-small — running text
     label           — uppercase kickers, meta, form labels */
  --fs-display: clamp(30px, 2.6vw, 44px);
  --lh-display: 1.2;

  --fs-content-title: clamp(26px, 3vw, 38px);
  --lh-content-title: 1.35;

  --fs-content-title-sm: clamp(20px, 2.2vw, 28px);
  --lh-content-title-sm: 1.3;

  --fs-body: 16px;
  --lh-body: 1.6;

  --fs-body-small: 15px;
  --lh-body-small: 1.55;

  --fs-label: 13px;
  --lh-label: 1.3;
  --ls-label: .08em;

  /* ---------- Vertical rhythm ---------- */
  --section-space-desktop: 120px;
  --section-space-mobile: 80px;
  --title-gap: 32px;
  --title-gap-mobile: 16px;
  --content-gap: 88px;
  --content-gap-sm: 64px;
  --content-gap-mobile: 40px;

  /* ---------- Motion ---------- */
  --transition-fast: .2s;
  --transition-base: .3s;
  --transition-slow: .5s;
  --reveal-duration: .7s;
  --stagger-step: .08s;

  /* ---------- Buttons ---------- */
  --btn-width: 264px;

  /* .header-inner height (84px) + its 1px bottom border — constant across
     breakpoints, so one value covers both desktop and mobile. */
  --header-height: 85px;
  --anchor-gap: 24px;
}

* { box-sizing: border-box; }

/* Guards against the .hero-image 100vw breakout adding scrollbar width to the page.
   scroll-padding-top keeps every in-page anchor jump (nav links, hash URLs,
   scrollIntoView) clear of the sticky header in one place, instead of each
   section needing its own offset. */
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  scroll-padding-top: calc(var(--header-height) + var(--anchor-gap));
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}

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

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

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 64px);
}

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 400;
  font-synthesis: none;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0;
  line-height: 1.05;
}

.arrow { display: inline-block; transition: transform var(--transition-fast) var(--ease); }
a:hover .arrow, button:hover .arrow { transform: translateX(4px); }
a:hover .arrow-diag, button:hover .arrow-diag { transform: translate(3px, -3px); }

/* Shared secondary "text + arrow" link — property links, accordion CTA,
   2GIS: one underline, one weight, one arrow system. Size and color stay
   per-component (context decides whether it reads as label or body text
   and whether it starts muted or dark), but the link itself always looks
   like the same kind of thing. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}

/* ---------- Focus ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 26px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .01em;
  border-radius: 0;
  white-space: nowrap;
}
.btn-dark {
  background: var(--dark);
  color: var(--bg);
  transition: background var(--transition-base) var(--ease), transform var(--transition-base) var(--ease);
}
.btn-dark:hover { background: #000; transform: translateY(-2px); }

/* Shared rectangular CTA — one width, one arrow position, one hover
   across every full-size "Подобрать объект / О компании / Обсудить
   задачу"-style button on the page. The compact nav-bar CTA stays on
   plain .btn.btn-dark since it lives in a space-constrained row. */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: var(--btn-width);
  max-width: 100%;
  padding: 16px 26px;
  background: var(--dark);
  color: var(--bg);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .01em;
  border-radius: 0;
  border: 0;
  cursor: pointer;
  transition: background var(--transition-base) var(--ease), transform var(--transition-base) var(--ease);
}
.btn-primary:hover { background: #000; transform: translateY(-2px); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
  gap: 24px;
}
.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.logo-mark { height: 48px; width: auto; flex-shrink: 0; }

.main-nav {
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: 16px;
  font-weight: 500;
  flex-wrap: wrap;
}
.main-nav a { position: relative; transition: color var(--transition-fast); }
.main-nav a:hover { color: var(--text-muted); }

.header-phone {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
  white-space: nowrap;
}
.phone-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 0;
  background: var(--dark);
  color: var(--bg);
}

/* ---------- Mobile nav ---------- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: var(--dark);
  flex-shrink: 0;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 16px;
  height: 2px;
  background: var(--bg);
  transition: transform var(--transition-base) var(--ease), opacity var(--transition-base) var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  display: none;
  position: fixed;
  top: 84px;
  left: 0;
  right: 0;
  width: 100vw;
  max-width: 100%;
  z-index: 60;
  /* 100vh includes area hidden behind the mobile browser's address/toolbar
     chrome, which crops the bottom block on real devices. 100dvh tracks the
     actually visible viewport; the vh line stays as a fallback for browsers
     without dvh support. */
  height: calc(100vh - 84px);
  height: calc(100dvh - 84px);
  background: var(--bg);
  color: var(--dark);
  flex-direction: column;
  justify-content: space-between;
  padding: 24px clamp(20px, 4vw, 64px) calc(32px + env(safe-area-inset-bottom, 0px));
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity var(--transition-base) var(--ease), transform var(--transition-base) var(--ease);
  pointer-events: none;
  overflow-y: auto;
}
.mobile-nav.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.mobile-nav-links {
  display: flex;
  flex-direction: column;
}
.mobile-nav-links a {
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-head);
  font-size: 26px;
  font-weight: 400;
  font-synthesis: none;
  text-transform: uppercase;
  color: var(--dark);
}
.mobile-nav-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 24px;
  flex-shrink: 0;
}
.mobile-nav-bottom .btn {
  padding: 12px 18px;
  font-size: 13px;
  flex-shrink: 0;
}
.mobile-nav-phone {
  font-weight: 700;
  font-size: 16px;
  color: var(--dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Hero ---------- */
.hero { padding: 56px clamp(20px, 4vw, 64px) 0; }

.hero-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr auto;
  gap: 40px;
  align-items: center;
  margin-bottom: 32px;
}
.hero-title {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
}
.hero-lead {
  font-size: var(--fs-body-small);
  line-height: var(--lh-body-small);
  color: var(--text);
  max-width: 320px;
  margin: 0;
}
.hero-btn { justify-self: end; align-self: center; }

.hero-image {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
  aspect-ratio: 16 / 6.2;
}
.hero-image img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Sections ---------- */
.section { padding: 0 clamp(20px, 4vw, 64px); margin-top: var(--section-space-desktop); }

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--title-gap);
  gap: var(--gap);
}
.section-heading h2 { font-size: var(--fs-content-title); line-height: var(--lh-content-title); }
.section-number {
  font-family: var(--font-head);
  font-weight: 400;
  font-synthesis: none;
  font-size: clamp(46px, 6vw, 72px);
  color: var(--border);
  line-height: .8;
  flex-shrink: 0;
}

/* ---------- Stats ---------- */
.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  margin-bottom: var(--content-gap);
}
.stat-card {
  background: var(--bg-alt);
  border-radius: 0;
  padding: 36px 32px;
}
.stat-num {
  font-family: var(--font-head);
  font-weight: 400;
  font-synthesis: none;
  font-size: clamp(32px, 3.6vw, 44px);
  margin-bottom: 8px;
}
.stat-label { font-size: var(--fs-label); color: var(--text-muted); font-weight: 500; }

/* ---------- About grid ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  margin-bottom: var(--content-gap);
}
.about-title { font-size: var(--fs-content-title); line-height: var(--lh-content-title); }
.about-copy { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.about-copy p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
}
.about-copy .btn-primary { margin-top: 8px; }

/* ---------- Property grid ---------- */
.property-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
.property-card { display: block; }
.property-image {
  border-radius: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  margin-bottom: 16px;
}
.property-image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--transition-slow) var(--ease);
}
.property-card:hover .property-image img { transform: scale(1.06); }
.property-title { font-weight: 600; font-size: var(--fs-body-small); margin-bottom: 6px; }
.property-link { font-size: var(--fs-label); color: var(--text-muted); }
.property-card:hover .property-link { color: var(--text); }

/* ---------- Directions (Block 02) — editorial list + visual ---------- */
.directions {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 56px;
  align-items: stretch;
}

.directions-list {
  display: flex;
  flex-direction: column;
}

.direction-item {
  border-top: 1px solid var(--border);
  padding: 26px 0;
  cursor: pointer;
  opacity: .5;
  transition: opacity .4s var(--ease);
}
.direction-item:first-child { border-top: none; }
.direction-item:last-child { border-bottom: 1px solid var(--border); }
.direction-item.is-active { opacity: 1; }

.direction-head {
  display: flex;
  align-items: baseline;
  gap: 24px;
}
.direction-num {
  font-family: var(--font-head);
  font-weight: 400;
  font-synthesis: none;
  font-size: var(--fs-label);
  color: var(--text-muted);
  width: 24px;
  flex-shrink: 0;
  transition: color var(--transition-base) var(--ease);
}
.direction-title {
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: 0;
  font-size: clamp(18px, 1.7vw, 22px);
  font-weight: 600;
  color: var(--text-muted);
  margin: 0;
  transition: color var(--transition-base) var(--ease);
}
.direction-item.is-active .direction-num,
.direction-item.is-active .direction-title {
  color: var(--text);
}

.direction-panel {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows .5s var(--ease);
}
.direction-panel-inner { min-height: 0; overflow: hidden; }
.direction-item.is-active .direction-panel { grid-template-rows: 1fr; }

.direction-text, .direction-note {
  margin: 16px 0 0 48px;
  max-width: 480px;
  font-size: var(--fs-body-small);
  line-height: var(--lh-body-small);
  color: var(--text-muted);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .4s var(--ease) .08s, transform .4s var(--ease) .08s;
}
.direction-note {
  font-size: var(--fs-label);
  margin-top: 10px;
  padding-left: 14px;
  border-left: 2px solid var(--border);
}
.direction-link {
  margin: 16px 0 0 48px;
  font-size: var(--fs-label);
  color: var(--text);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .4s var(--ease) .12s, transform .4s var(--ease) .12s, color var(--transition-fast);
}
.direction-link:hover { color: var(--text-muted); }
.direction-item.is-active .direction-text,
.direction-item.is-active .direction-note,
.direction-item.is-active .direction-link {
  opacity: 1;
  transform: translateY(0);
}

.directions-visual {
  position: relative;
  overflow: hidden;
  min-height: 440px;
  background: var(--bg-alt);
}
.visual-slide {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  transform: scale(.97) translateY(10px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.visual-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.visual-slide.is-active {
  opacity: 1;
  transform: scale(1) translateY(0);
  z-index: 1;
}

/* Mobile image for the expanded direction; the shared desktop stage is hidden below 960px. */
.direction-visual-mobile { display: none; }

/* ---------- Mortgage (Block 03) — asymmetric editorial split + bank list ---------- */
.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.mortgage-title {
  color: var(--text);
}

.mortgage-visual {
  width: 100%;
  aspect-ratio: 21 / 8;
  background: url("../assets/img/ipoteka.jpg") center/cover no-repeat;
  border: 1px solid var(--border);
  margin-bottom: var(--content-gap-sm);
}

.mortgage-banks {
  padding-top: 8px;
  margin-bottom: var(--content-gap-sm);
}
.mortgage-banks .eyebrow { margin-bottom: 16px; }

.banks-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.bank-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 122px;
  padding: 16px;
  transition: opacity var(--transition-base) var(--ease), transform var(--transition-base) var(--ease);
}
.bank-item + .bank-item {
  border-left: 1px solid var(--border);
}
.bank-logo-wrap {
  width: min(220px, 100%);
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bank-logo {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform var(--transition-base) var(--ease);
}
.bank-logo-domrf { max-height: 62px; }
.bank-logo-alfa { max-height: 54px; mix-blend-mode: normal; }
.bank-logo-sber { max-height: 42px; }
.bank-logo-vtb { max-height: 46px; }
.bank-item:hover {
  opacity: .68;
  transform: translateY(-2px);
}
.bank-item:hover .bank-logo { transform: scale(1.02); }

.mortgage-outro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .95fr) minmax(280px, .8fr);
  gap: clamp(40px, 4vw, 72px);
  align-items: stretch;
  padding-top: 48px;
  border-top: 1px solid var(--border);
}
.mortgage-outro-text {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.mortgage-text {
  margin: 0;
  max-width: 480px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
}
.mortgage-text-muted { color: var(--text-muted); font-size: var(--fs-body-small); }

.mortgage-steps {
  position: relative;
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
  margin: 0;
  width: fit-content;
  justify-self: start;
}
.mortgage-steps::before,
.mortgage-steps::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border);
}
.mortgage-steps::before { left: calc(clamp(40px, 4vw, 72px) / -2); }
.mortgage-steps::after { right: calc(clamp(40px, 4vw, 72px) / -2); }
.mortgage-step {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  padding: 0 0 10px;
}
.mortgage-step + .mortgage-step {
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.mortgage-step-num {
  padding-top: 2px;
  font-family: var(--font-head);
  font-weight: 400;
  font-synthesis: none;
  font-size: var(--fs-label);
  line-height: 1.25;
  color: var(--text-muted);
}
.mortgage-step h3 {
  margin: 0 0 5px;
  font-size: var(--fs-body);
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.25;
}
.mortgage-step p {
  margin: 0;
  font-size: var(--fs-body-small);
  font-weight: 500;
  line-height: 1.45;
  color: var(--text-muted);
}

.mortgage-outro-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  min-height: 100%;
}
.mortgage-outro-cta-title {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-content-title-sm);
  line-height: var(--lh-content-title-sm);
  color: var(--text);
}

@media (max-width: 1180px) and (min-width: 961px) {
  .mortgage-outro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mortgage-outro-text { grid-column: 1 / -1; }
  .mortgage-text { max-width: 680px; }
  .mortgage-steps::before { display: none; }
}

/* ---------- Reasons (Block 04) — one typographic grid ---------- */
.reasons-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.reason-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(36px, 4vw, 56px) clamp(36px, 4.5vw, 68px);
}
.reason-item:nth-child(odd) { padding-left: 0; }
.reason-item:nth-child(even) {
  padding-right: 0;
  border-left: 1px solid var(--border);
}
.reason-item:nth-child(n + 3) { border-top: 1px solid var(--border); }
.reason-num {
  margin-bottom: 28px;
  font-family: var(--font-head);
  font-weight: 400;
  font-synthesis: none;
  font-size: var(--fs-label);
  line-height: 1;
  color: var(--text-muted);
  transition: color var(--transition-base) var(--ease);
}
.reason-title {
  margin: 0;
  font-size: var(--fs-content-title);
  line-height: var(--lh-content-title);
  transition: transform var(--transition-base) var(--ease);
}
.reason-text {
  margin: 20px 0 0;
  max-width: 48ch;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-muted);
}
.reason-item:nth-child(1) { transition-delay: 0s; }
.reason-item:nth-child(2) { transition-delay: calc(var(--stagger-step) * 1); }
.reason-item:nth-child(3) { transition-delay: calc(var(--stagger-step) * 2); }
.reason-item:nth-child(4) { transition-delay: calc(var(--stagger-step) * 3); }

@media (hover: hover) and (pointer: fine) {
  .reason-item:hover .reason-num { color: var(--text); }
  .reason-item:hover .reason-title { transform: translateX(5px); }
}

/* ---------- Reviews (Block 05) — horizontal card strip, plain CSS scroll ---------- */
.reviews-v2-section {
  position: relative;
  height: auto;
}
.reviews-v2-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 40px;
  font-size: var(--fs-body);
  color: var(--text-muted);
}
.reviews-v2-rating { font-weight: 700; color: var(--text); }
.reviews-v2-rating-denom { font-weight: 500; color: var(--text-muted); }
.reviews-v2-dot { color: var(--border); }
.reviews-v2-2gis {
  color: var(--text);
}
.reviews-v2-2gis:hover { color: var(--text-muted); }

/* "Show more" toggle — mobile-only, see the max-width:768px block below. */
.reviews-v2-more {
  display: none;
}

/* Default (no-JS / reduced-motion) fallback: a plain native horizontal
   scroll ribbon — the browser handles swipe/drag/scrollbar on its own. */
.reviews-v2-viewport {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.reviews-v2-list {
  display: flex;
  gap: 20px;
  padding: 20px;
  margin: 0;
  list-style: none;
}

/* Once JS confirms it can drive the track itself, the viewport's own
   scrollbar is switched off and .reviews-v2-list is moved purely via
   transform, timed to the section's normal vertical scroll progress. */
.reviews-v2-viewport.js-scroll-driven {
  overflow-x: hidden;
}
.reviews-v2-viewport.js-scroll-driven .reviews-v2-list {
  will-change: transform;
}
.reviews-v2-card {
  flex: 0 0 88%;
  background: var(--bg-alt);
  border-radius: 0;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 280px;
}
.reviews-v2-quote {
  margin: 0;
  font-size: 19px;
  line-height: 1.5;
  color: var(--text);
}
.reviews-v2-footer { margin-top: 28px; display: flex; align-items: center; gap: 14px; }
.reviews-v2-avatar {
  flex-shrink: 0;
  display: block;
  width: 52px;
  height: 52px;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  background: var(--border);
}
.reviews-v2-name { margin: 0; font-size: var(--fs-body); font-weight: 600; color: var(--text); }
.reviews-v2-source { margin: 4px 0 0; font-size: var(--fs-label); color: var(--text-muted); }

@media (min-width: 641px) {
  .reviews-v2-card { flex: 0 0 clamp(260px, 42%, 620px); min-height: 320px; padding: 40px 36px; }
  .reviews-v2-quote { font-size: 21px; }
}

/* Mobile (<=768px): no slider. The horizontal-track JS stays off (see
   main.js), cards stack as an ordinary vertical, sequential-reading list —
   full width, no clipped neighbors, same flat --bg-alt plate used by the
   stat cards above. Only the first 2 show until "Показать ещё". */
@media (max-width: 768px) {
  .reviews-v2-viewport {
    overflow: visible;
    -webkit-overflow-scrolling: auto;
  }
  .reviews-v2-list {
    flex-direction: column;
    gap: 16px;
    padding: 0;
    transform: none !important;
  }
  .reviews-v2-card {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    background: var(--bg-alt);
    padding: 28px 24px;
  }
  .reviews-v2-card:nth-child(n + 3) {
    display: none;
  }
  .reviews-v2-list.is-expanded .reviews-v2-card:nth-child(n + 3) {
    display: flex;
  }
  .reviews-v2-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-weight: 600;
    font-size: var(--fs-body);
    color: var(--text);
    cursor: pointer;
    transition: color var(--transition-fast);
  }
  .reviews-v2-more:hover { color: var(--text-muted); }
}

/* ---------- About preview (Block 06) ---------- */
.about-preview-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.72fr) minmax(280px, 1fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: stretch;
}
.about-preview-media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.about-preview-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.about-preview-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 0;
  height: 100%;
  padding-top: clamp(24px, 3vw, 48px);
}
.about-preview-label {
  margin: 0 0 24px;
  color: var(--text-muted);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.about-preview-lead {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-content-title-sm);
  line-height: var(--lh-content-title-sm);
  color: var(--text);
  max-width: 25ch;
}
.about-preview-text {
  margin: 20px 0 28px;
  max-width: 46ch;
  color: var(--text-muted);
  font-size: var(--fs-body-small);
  line-height: var(--lh-body-small);
}
.about-preview-copy .btn-primary { margin-top: 0; }
.about-preview-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: auto 0 0;
  padding: 0;
  color: var(--text-muted);
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1.45;
  list-style: none;
}

/* ---------- Contact form (Block 07) ---------- */
.contact-form-section {
  padding-bottom: clamp(72px, 8vw, 120px);
}
.contact-form-heading {
  margin-bottom: clamp(48px, 5vw, 72px);
}
.contact-form-heading-copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.contact-form-intro {
  max-width: 54ch;
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: var(--lh-body);
}
.contact-form-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(32px, 5vw, 80px);
  row-gap: clamp(32px, 4vw, 56px);
}
.contact-form-field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  transition: border-color var(--transition-base) var(--ease);
}
.contact-form-field:focus-within {
  border-color: var(--text);
}
.contact-form-field-wide {
  grid-column: 1 / -1;
}
.contact-form-label {
  color: var(--text-muted);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.45;
  caret-color: var(--text);
}
.contact-form textarea {
  min-height: 72px;
  resize: vertical;
}
.contact-form input:-webkit-autofill,
.contact-form textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  box-shadow: 0 0 0 1000px var(--bg) inset;
}
.contact-form-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "consent button"
    "status  button";
  column-gap: 28px;
  row-gap: 16px;
  align-items: start;
  margin-top: 28px;
}
.contact-form-consent {
  grid-area: consent;
  max-width: 52ch;
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: var(--lh-body-small);
}
.contact-form-consent a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.contact-form-consent a:hover {
  color: var(--text);
}
.contact-form-submit {
  grid-area: button;
  align-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-height: 44px;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid var(--text);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body-small);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .02em;
  cursor: pointer;
}
.contact-form-submit:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.contact-form-status {
  grid-area: status;
  min-height: 1.55em;
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-body-small);
  font-weight: 500;
  line-height: var(--lh-body-small);
}
.contact-form-status.is-success {
  color: var(--text);
}
.contact-form-status.is-error {
  color: #b3402f;
}

/* ---------- Footer ---------- */
.site-footer {
  margin-top: 0;
  background: var(--bg);
  color: var(--text);
}
.site-footer-inner {
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  border-top: 1px solid var(--border);
  padding-top: 56px;
  padding-bottom: 24px;
}
.site-footer-top {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.site-footer-links-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
}
.site-footer-top > *,
.site-footer-bottom > * { min-width: 0; }
.site-footer h2 {
  margin: 0;
  color: inherit;
}
.site-footer-cta h2 {
  font-family: var(--font-head);
  font-size: var(--fs-content-title);
  font-weight: 400;
  font-synthesis: none;
  line-height: var(--lh-content-title);
  letter-spacing: .01em;
  text-transform: uppercase;
}
.site-footer-cta p {
  max-width: 48ch;
  margin: 20px 0 32px;
  color: var(--text);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: var(--lh-body);
}
.site-footer-nav h2,
.site-footer-contacts h2 {
  margin-bottom: 16px;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: var(--lh-label);
  letter-spacing: .02em;
}
.site-footer-links,
.site-footer-phones,
.site-footer-socials {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.site-footer-links { gap: 2px; }
.site-footer-links a,
.site-footer-phones a,
.site-footer-socials a {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 0;
  font-size: var(--fs-body-small);
  line-height: 1.35;
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}
.site-footer-links a:hover,
.site-footer-phones a:hover,
.site-footer-socials a:hover {
  color: var(--text-muted);
  text-decoration-color: currentColor;
}
.site-footer address { font-style: normal; }
.site-footer-phones { gap: 2px; }
.site-footer-phones a { white-space: nowrap; }
.site-footer-phones a[href^="mailto"] { white-space: normal; overflow-wrap: anywhere; }
.site-footer-socials {
  gap: 2px;
  margin-top: 24px;
}
.site-footer-wordmark {
  position: relative;
  z-index: 0;
  display: block;
  margin: clamp(18px, 4vw, 42px) 0 0;
  padding: 0;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  color: currentColor;
  font-family: var(--font-head);
  /* Match the wordmark's natural Anton width to the shared footer grid. */
  font-size: 21.5cqw;
  font-weight: 400;
  font-synthesis: none;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  overflow-wrap: normal;
}
.site-footer-bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: baseline;
  margin-top: 24px;
  color: var(--text-muted);
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1.45;
}
.site-footer-credit { justify-self: end; text-align: right; }
.site-footer-bottom a {
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}
.site-footer-bottom a:hover {
  color: var(--text);
  text-decoration-color: currentColor;
}
.site-footer-credit a { color: var(--text); font-weight: 600; }

/* ---------- Scroll reveal ---------- */
/* No static will-change here: it was promoting every heading/name using
   this class (hero titles, section headings, team names) to its own
   compositing layer from first paint, before the reveal transition ever
   starts. On iOS Safari, if the Anton/Geist webfont finished loading
   after that layer had already been rasterized with the fallback font,
   the layer sometimes never got repainted with the correct font — text
   stayed stuck on the fallback, inconsistently across headings depending
   on load timing. The transition itself still promotes to a layer on its
   own once it's actually running, so dropping the pre-emptive hint costs
   nothing visually. */
.reveal, .reveal-line {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--reveal-duration) var(--ease), transform var(--reveal-duration) var(--ease);
}
.reveal.is-visible, .reveal-line.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-instant { transition: none !important; }

.reveal-lines .reveal-line-mask { display: block; overflow: hidden; }
.reveal-lines .reveal-line { display: block; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-line, .accordion-text {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* stagger helper — one shared step (--stagger-step) across every grid */
.stats-row .stat-card:nth-child(1) { transition-delay: 0s; }
.stats-row .stat-card:nth-child(2) { transition-delay: calc(var(--stagger-step) * 1); }
.stats-row .stat-card:nth-child(3) { transition-delay: calc(var(--stagger-step) * 2); }
.property-grid .property-card:nth-child(1) { transition-delay: 0s; }
.property-grid .property-card:nth-child(2) { transition-delay: calc(var(--stagger-step) * 1); }
.property-grid .property-card:nth-child(3) { transition-delay: calc(var(--stagger-step) * 2); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero { padding-top: 22px; }
  .section { margin-top: var(--section-space-mobile); }
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
  .header-phone { display: none; }
  .mobile-nav { display: flex; }
  body.nav-open { position: fixed; overflow: hidden; width: 100%; }
  /* Locking body via `position: fixed` freezes the sticky header's own
     scroll offset instead of re-anchoring it, so it would scroll away
     with whatever the page's position was when the menu opened. Pin it
     to the real viewport directly for as long as the menu is open. */
  body.nav-open .site-header { position: fixed; top: 0; left: 0; right: 0; }
  .hero-top { grid-template-columns: 1fr; align-items: start; gap: 0; }
  .hero-title { margin-bottom: 16px; }
  .hero-lead { margin-bottom: 20px; }
  .hero-btn { justify-self: start; }
  .section-heading { margin-bottom: var(--title-gap-mobile); }
  .stats-row { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; gap: 16px; }
  .property-grid { grid-template-columns: 1fr; }
  .directions { grid-template-columns: 1fr; gap: 0; }
  .directions-visual { display: none; }
  .direction-text, .direction-note, .direction-link { margin-left: 0; }

  .direction-item.is-active:not(.mobile-expanded) .direction-num,
  .direction-item.is-active:not(.mobile-expanded) .direction-title {
    color: var(--text-muted);
  }

  .direction-head { position: relative; padding-right: 28px; }
  .direction-head::after {
    content: '→';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    font-size: 14px;
    color: var(--text-muted);
    transition: transform .35s var(--ease), color .3s var(--ease);
  }
  .direction-item.mobile-expanded .direction-head::after {
    transform: translateY(-50%) rotate(90deg);
    color: var(--text);
  }

  .direction-panel {
    display: block;
    grid-template-rows: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height .5s var(--ease);
  }
  .direction-item.mobile-expanded .direction-panel { max-height: 720px; }

  .direction-visual-mobile {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    margin-top: 16px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--bg-alt), var(--border));
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .4s var(--ease) .05s, transform .4s var(--ease) .05s;
  }
  .direction-visual-mobile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .direction-item.mobile-expanded .direction-visual-mobile {
    opacity: 1;
    transform: translateY(0);
  }

  .mortgage-visual { aspect-ratio: 4 / 3; margin-bottom: var(--content-gap-mobile); }

  .mortgage-banks { padding-top: 20px; margin-bottom: var(--content-gap-mobile); }
  .banks-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bank-item { min-height: 122px; padding: 16px; }
  .bank-item:nth-child(odd) { border-left: 0; }
  .bank-item:nth-child(n + 3) { border-top: 1px solid var(--border); }

  .mortgage-outro { grid-template-columns: 1fr; gap: 32px; align-items: start; padding-top: 32px; }
  .mortgage-text { max-width: none; }
  .mortgage-steps::before, .mortgage-steps::after { display: none; }
  .mortgage-steps { width: auto; justify-self: stretch; padding-top: 4px; }
  .mortgage-outro-cta {
    padding-top: 24px;
    border-top: 1px solid var(--border);
  }

  .reasons-grid { grid-template-columns: 1fr; }
  .reason-item,
  .reason-item:nth-child(odd),
  .reason-item:nth-child(even) {
    padding: 32px 0;
    border-left: 0;
  }
  .reason-item:nth-child(n + 2) { border-top: 1px solid var(--border); }
  .reason-num { margin-bottom: 20px; }
  .reason-text { margin-top: 14px; max-width: 40ch; }

  .about-preview-layout { grid-template-columns: 1fr; gap: 28px; }
  .about-preview-media { aspect-ratio: 4 / 3; }
  .about-preview-copy { height: auto; padding-top: 0; }
  .about-preview-label { margin-bottom: 16px; }
  .about-preview-lead { max-width: 30ch; }
  .about-preview-meta { margin-top: 40px; }

  .contact-form-heading { margin-bottom: var(--content-gap-mobile); }
  .contact-form-fields { grid-template-columns: 1fr; row-gap: 32px; }
  .contact-form-field-wide { grid-column: auto; }
  .contact-form-footer {
    grid-template-columns: 1fr;
    grid-template-areas:
      "consent"
      "button"
      "status";
    row-gap: 20px;
    align-items: start;
  }
  .contact-form-submit { justify-self: start; }

  .site-footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .site-footer-links-group { gap: 20px; }
  .site-footer-links a,
  .site-footer-phones a,
  .site-footer-socials a { min-height: 44px; align-items: center; }
  .site-footer-bottom {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .site-footer-credit { justify-self: start; text-align: left; }
}

@media (max-width: 700px) {
  .site-footer-inner { padding-top: 40px; }
  .site-footer-top { grid-template-columns: 1fr; gap: 48px; }
  .site-footer-links-group { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: 20px; }
  .site-footer-cta p { margin: 20px 0 24px; }
  .site-footer-wordmark { margin-top: 13px; }
  .site-footer-socials { margin-top: 16px; }
  .site-footer-links a,
  .site-footer-phones a,
  .site-footer-socials a { font-size: 14px; }
}