/* ==========================================================================
   A|U ARCHITECT URBANI — landing styles
   Palette, type system and composition follow style-guide.md.
   Reference mood: quiet luxury, air, confidence without shouting.
   ========================================================================== */

:root {
  --color-bg: #f5f0e8;       /* warm cream background */
  --color-white: #ffffff;    /* clean contrast background (About) */
  --color-ink: #2b2926;      /* graphite, not black */
  --color-ink-soft: #5c584f; /* softened graphite for secondary text */
  --color-accent: #c17f4f;   /* terracotta / copper accent */
  --color-accent-dark: #a1653a;
  --color-concrete: #8b8680; /* warm grey backing for photos */
  --color-line: rgba(43, 41, 38, 0.14);

  --font-display: "General Sans", "Inter", -apple-system, "Segoe UI", sans-serif;
  --font-body: "General Sans", "Inter", -apple-system, "Segoe UI", sans-serif;

  --container: 1240px;
  --gap-section: clamp(4rem, 9vw, 9rem);
  --radius: 2px;
}

* { box-sizing: border-box; }

/* Safety net: a stray overflow anywhere must not turn into a page-wide
   horizontal scroll. Applied to html as well as body — with html left at
   `visible` the browser propagates body's overflow to the viewport, and the
   behaviour differs between engines. */
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  max-width: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  /* long words and addresses wrap instead of pushing the page sideways;
     the hidden axis is a backstop, each section is sized to fit on its own */
  overflow-wrap: break-word;
  overflow-x: hidden;
  max-width: 100%;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 0 0 0.4em;
}

p { margin: 0 0 1em; }
a { color: inherit; }

/* ==========================================================================
   Маркированные списки — ЕДИНСТВЕННОЕ место, где задаётся маркер списка.

   Любой маркированный список на сайте получает класс .list-arrow и вместе с
   ним стрелку «›». Не заводите локальные li::before по разделам: именно так
   в блоке «Команда» и в тарифах снова появились точки. Разделам оставлены
   только их собственные размеры, цвета и отступы между пунктами.

   Стрелка описана один раз в --marker-arrow. Цвет внутри data-URI приходится
   дублировать литералом (%23c17f4f) — SVG в background-image не видит
   CSS-переменных; он обязан совпадать с --color-accent.
   ========================================================================== */
:root {
  --marker-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23c17f4f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 2.5L7.5 6l-4 3.5'/%3E%3C/svg%3E");
}

.list-arrow {
  list-style: none;
  padding-left: 0;
}
.list-arrow > li {
  position: relative;
  padding-left: 1.6rem;
}
.list-arrow > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  /* в em, а не в px: в списке с более мелким текстом стрелка уменьшается
     пропорционально. 0.8em при 0.94rem даёт те же 12px, что были в «Услугах». */
  width: 0.8em;
  height: 0.8em;
  background-image: var(--marker-arrow);
  background-repeat: no-repeat;
  background-size: contain;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
}

.eyebrow {
  font-size: 0.76rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-accent);
  margin-bottom: 1em;
  display: inline-block;
}

.section { padding: var(--gap-section) 0; position: relative; }

/* The header is fixed, so an anchor jump would park the section heading
   underneath it. Reserve its height on every link target. */
section[id] { scroll-margin-top: 8rem; }

.section-head { max-width: 760px; margin-bottom: 3.5rem; }
.section-head h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); }
.section-head p.lead { font-size: 1.05rem; color: var(--color-ink-soft); }

.accent { color: var(--color-accent); }

/* ---------- Georgian ----------
   Georgian letters carry taller ascenders and deeper descenders than Latin
   or Cyrillic, and they render in a fallback face with its own metrics. The
   display leading is tuned tight (0.9-0.98) for the Latin face and makes
   Georgian lines collide, so it is relaxed for this language only. */
/* General Sans has no Georgian glyphs. These faces are named only for the
   Georgian build — kept out of the global stack because they also cover
   Latin and Cyrillic, so a failed webfont load would hand the whole site to
   Sylfaen, whose metrics run much wider than Inter or Segoe UI. */
html[lang="ka"] {
  --font-display: "General Sans", "Inter", "Noto Sans Georgian", "BPG Nino Mtavruli", Sylfaen, -apple-system, "Segoe UI", sans-serif;
  --font-body: "General Sans", "Inter", "Noto Sans Georgian", "BPG Nino Mtavruli", Sylfaen, -apple-system, "Segoe UI", sans-serif;
}

html[lang="ka"] h1,
html[lang="ka"] h2,
html[lang="ka"] h3,
html[lang="ka"] h4 { line-height: 1.18; }
html[lang="ka"] .about-heading { line-height: 1.05; }
html[lang="ka"] .eyebrow { letter-spacing: 0.12em; }
/* this one holds a word ("12 თვე"), unlike the purely numeric figures */
html[lang="ka"] .trust-stat .num { line-height: 1.15; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 1em 2em;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.92rem;
  border: 1px solid var(--color-ink);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
  background: transparent;
  color: var(--color-ink);
}
.btn-primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}
.btn-primary:hover { background: var(--color-accent-dark); border-color: var(--color-accent-dark); transform: translateY(-1px); }
.btn-outline:hover { background: rgba(43,41,38,0.06); }
.btn-on-dark { border-color: rgba(255,255,255,0.55); color: #fff; }
.btn-on-dark:hover { background: rgba(255,255,255,0.1); }
.btn .arrow { transition: transform 0.2s ease; }
.btn:hover .arrow { transform: translateX(3px); }

.todo-flag {
  display: block;
  margin-top: 0.9rem;
  padding: 0.7rem 1rem;
  background: rgba(193,127,79,0.08);
  border: 1px dashed var(--color-accent);
  color: var(--color-accent-dark);
  font-size: 0.8rem;
  border-radius: var(--radius);
}
.note-soft {
  display: block;
  margin-top: 0.9rem;
  font-size: 0.8rem;
  color: var(--color-ink-soft);
}

/* ---------- torn edge photo treatment (used sparingly) ---------- */
.torn-edge { position: relative; overflow: hidden; background: var(--color-concrete); }
.torn-edge--bottom {
  clip-path: polygon(
    0% 0%, 100% 0%, 100% 96%,
    96% 98.4%, 92% 96.6%, 88% 99%, 84% 97%, 80% 99.4%,
    76% 96.8%, 72% 98.8%, 68% 96.4%, 64% 99.2%, 60% 97.2%,
    56% 99%, 52% 96.6%, 48% 98.6%, 44% 96.8%, 40% 99.4%,
    36% 97%, 32% 99.2%, 28% 96.6%, 24% 98.8%, 20% 96.4%,
    16% 99%, 12% 97%, 8% 99.4%, 4% 96.8%, 0% 98.6%
  );
}
.torn-edge--right {
  clip-path: polygon(
    0% 0%, 96% 0%, 98.4% 4%, 96.6% 8%, 99% 12%, 97% 16%, 99.4% 20%,
    96.8% 24%, 98.8% 28%, 96.4% 32%, 99.2% 36%, 97.2% 40%,
    99% 44%, 96.6% 48%, 98.6% 52%, 96.8% 56%, 99.4% 60%,
    97% 64%, 99.2% 68%, 96.6% 72%, 98.8% 76%, 96.4% 80%,
    99% 84%, 97% 88%, 99.4% 92%, 96.8% 96%, 100% 100%, 0% 100%
  );
}

/* ---------- header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem clamp(1.25rem, 4vw, 3rem);
  color: #fff;
  background: linear-gradient(180deg, rgba(43,41,38,0.55), rgba(43,41,38,0));
  transition: background 0.3s ease, color 0.3s ease;
}
.site-header.is-scrolled {
  background: rgba(245,240,232,0.92);
  backdrop-filter: blur(6px);
  color: var(--color-ink);
  box-shadow: 0 1px 0 var(--color-line);
}

.logo { display: flex; align-items: center; text-decoration: none; color: inherit; }
.logo img { height: 84px; width: auto; filter: brightness(0) invert(1); transition: filter 0.3s ease; }
.site-header.is-scrolled .logo img { filter: none; }

.main-nav { display: flex; gap: 1.9rem; }
.main-nav a { text-decoration: none; font-size: 1.15rem; letter-spacing: 0.02em; opacity: 0.9; }
.main-nav a:hover { opacity: 1; text-decoration: underline; }

.header-actions { display: flex; align-items: center; gap: 1rem; }

.lang-switch { display: flex; gap: 0.35rem; }
.lang-switch button {
  background: transparent;
  border: 1px solid currentColor;
  opacity: 0.7;
  color: inherit;
  font-size: 0.74rem;
  padding: 0.3em 0.6em;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
}
.lang-switch button.is-active { opacity: 1; background: var(--color-accent); border-color: var(--color-accent); color: #fff; }

.nav-toggle { display: none; background: none; border: none; color: inherit; font-size: 1.5rem; cursor: pointer; }

/* ---------- hero ---------- */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  color: #fff;
  background: var(--color-ink);
  /* Content is pinned to the bottom, so a longer translation grows upward.
     This reserves the fixed header's height as a floor the text can never
     cross — the gap below the logo is the same in every language. */
  padding-top: 9rem;
  padding-bottom: 6rem;
  /* the section spans the viewport and never more, whatever sits inside */
  width: 100%;
  max-width: 100%;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-bg img { width: 100%; height: 100%; max-width: 100%; object-fit: cover; }
.hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(43,41,38,0.25) 0%, rgba(43,41,38,0.3) 40%, rgba(43,41,38,0.88) 100%);
}
.hero-content { position: relative; z-index: 1; width: 100%; max-width: 100%; display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; }
.hero-left { max-width: 760px; }
.hero h1 {
  /* 5.6rem is the original desktop size and it is reached at ~1195px, so
     anything from 1200px up looks exactly like the first version. Below that
     the 7.5vw term scales it down through the tablet range, and the 2.4rem
     floor takes over around 512px — the largest size at which the longest
     word ("Недвижимость") still clears a 360px screen. */
  font-size: clamp(2.4rem, 7.5vw, 5.6rem);
  margin-bottom: 0.3em;
}
.hero h1 .accent { color: var(--color-accent); }
.hero .subtitle {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: rgba(255,255,255,0.82);
  max-width: 520px;
  margin-bottom: 2em;
}
.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; }

/* The width lives on the container, not on the cards: letting each card size
   itself between a min and a max made them come out different widths. A grid
   with equal rows also gives both cards the same height, so the pair reads as
   one shape whatever the caption lengths are. */
.hero-stats {
  display: grid;
  grid-auto-rows: 1fr;
  gap: 0.9rem;
  position: absolute;
  top: 8.5rem;
  right: clamp(1.25rem, 4vw, 3rem);
  z-index: 1;
  width: 340px;
  max-width: calc(100% - 2 * clamp(1.25rem, 4vw, 3rem));
}
/* Без рамки намеренно. Белая полупрозрачная рамка 1px давала на тёмном теле
   карточки светлую строку (яркость 145 против 123 внутри) — её и было видно
   как «шов» по верхнему краю. Само backdrop-filter здесь ни при чём: строки
   внутри карточки замеряются идеально ровными, разрыва на границе размытия
   нет. Если понадобится вернуть контур — берите тон самой карточки, а не
   белый, иначе линия появится снова. */
.hero-stat {
  background: rgba(43,41,38,0.45);
  backdrop-filter: blur(4px);
  padding: 1.35rem 1.8rem;
  min-width: 0;
}
.hero-stat .num { font-family: var(--font-display); font-size: 2.55rem; color: var(--color-accent); display: block; }
.hero-stat .label { font-size: 1.11rem; color: rgba(255,255,255,0.78); }

.scroll-hint {
  position: absolute;
  /* The torn-paper clip-path eats the bottom 1-4% of the hero, and at 1.6rem
     the caption sat inside that band and lost its lower half. */
  bottom: 3.5rem; left: clamp(1.25rem, 4vw, 3rem);
  white-space: nowrap;
  z-index: 1;
  color: rgba(255,255,255,0.75);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ---------- about ---------- */
.about {
  background: var(--color-white);
}
.about-heading {
  font-size: clamp(2.8rem, 8.5vw, 7rem);
  margin-bottom: 1.8rem;
  line-height: 0.9;
}
.about-offer {
  font-size: clamp(1.2rem, 2.1vw, 1.7rem);
  max-width: 900px;
  color: var(--color-ink);
  font-weight: 500;
  margin-bottom: 2.5rem;
}
.about-offer .accent { color: var(--color-accent); }

.about-grid {
  display: grid;
  /* Колонка с фото не делит ширину по долям: портреты имеют жёсткий размер,
     поэтому `auto` отдаёт им ровно 320+18+320 = 658px, а весь остаток
     достаётся списку слева. Ниже 1200px грид схлопывается в одну колонку —
     на 658px фото списку рядом уже не оставалось читаемой ширины. */
  grid-template-columns: 1fr auto;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  /* обязательно: со `stretch` (значение по умолчанию) колонка с фото
     растянулась бы по высоте списка слева */
  align-items: start;
}
/* маркер приходит из .list-arrow — здесь только раскладка и типографика */
.about-values { margin: 0; display: grid; gap: 1rem; }
.about-values > li { font-size: 1.14rem; color: var(--color-ink-soft); }

/* Два портрета строго 320x320. Размер задан в пикселях намеренно: ни ширина,
   ни высота не должны зависеть ни от ширины колонки, ни от высоты списка
   слева. Поэтому здесь нет ни процентов, ни auto, ни flex-grow, ни stretch.
   Размер ступенчато уменьшается вниз по брейкпоинтам — квадрат при этом
   всегда строгий, меняется только сторона. */
.about-photos {
  display: flex;
  flex-direction: row;
  gap: 18px;
  /* не тянуть карточки по высоте самой высокой из них */
  align-items: flex-start;
}
.about-photos figure {
  margin: 0;
  /* 0 0 auto, а не 1: figure не должна забирать свободное место в строке */
  flex: 0 0 auto;
  width: 320px;
}
.about-photos img {
  display: block;
  width: 320px;
  height: 320px;
  object-fit: cover;
  /* кадрируем снизу, лицо остаётся в кадре */
  object-position: top center;
  background: var(--color-concrete);
}
.about-photos figcaption {
  margin-top: 0.7rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-ink);
}
.about-photos figcaption .role {
  display: block;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--color-ink-soft);
}

/* trust bar */
.trust-bar {
  margin-top: calc(var(--gap-section) * 0.5);
  padding-top: 2.2rem;
  border-top: 1px solid var(--color-line);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.trust-stat .num { font-family: var(--font-display); font-size: clamp(2rem, 3.6vw, 3rem); color: var(--color-ink); display: block; line-height: 1; margin-bottom: 0.3em; }
.trust-stat .num .accent { color: var(--color-accent); }
.trust-stat .label { font-size: 0.82rem; color: var(--color-ink-soft); }

/* ---------- services ---------- */
/* Asymmetric composition: a tall photo card, a narrow text card, and a wide
   horizontal card — deliberately unequal, per style-guide.md. */
.services-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.5rem;
}
.service-card {
  background: var(--color-white);
  padding: 2.4rem;
  display: flex;
  flex-direction: column;
}
.service-card--buyers { grid-column: span 4; }
.service-card--sellers { grid-column: span 2; }
.service-card--investors {
  grid-column: span 6;
  flex-direction: row;
  padding: 0;
}

.service-card .tag { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-accent); font-weight: 700; margin-bottom: 0.8em; }
.service-card h3 { font-size: 1.6rem; font-weight: 600; }

/* маркер приходит из .list-arrow — здесь только типографика */
.service-card ul { margin: 1.1rem 0 0; font-size: 0.94rem; color: var(--color-ink-soft); }
.service-card li { margin-bottom: 0.7em; }

.service-card .torn-photo { height: 190px; margin: -2.4rem -2.4rem 1.6rem; }
.service-card .torn-photo img { width: 100%; height: 100%; object-fit: cover; }

.service-card__media { flex: 0 0 36%; background: var(--color-concrete); }
.service-card__media img { width: 100%; height: 100%; object-fit: cover; min-height: 260px; }
.service-card__body { flex: 1; padding: 2.4rem; display: flex; flex-direction: column; }

.service-cta { margin-top: auto; padding-top: 1.8rem; }
.service-cta .btn { padding: 0.85em 1.7em; font-size: 0.88rem; }

/* Plain photo anchoring the narrow card — no torn edge, that treatment is
   reserved for a single photo per block. */
.service-photo {
  margin: 1.8rem -2.4rem -2.4rem;
  height: 210px;
  background: var(--color-concrete);
}
.service-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- calculators ---------- */
.calc-tabs { display: flex; gap: 0.6rem; margin-bottom: 2.2rem; flex-wrap: wrap; }
.calc-tab {
  padding: 0.7em 1.3em;
  border-radius: 999px;
  border: 1px solid var(--color-line);
  background: transparent;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--color-ink-soft);
}
.calc-tab.is-active { background: var(--color-ink); color: #fff; border-color: var(--color-ink); }
.calc-panel { display: none; }
.calc-panel.is-active { display: block; }

.calc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(min(280px, 100%), 0.72fr);
  gap: 3rem;
  align-items: start;
  background: var(--color-white);
  padding: 2.4rem;
}
.calc-fields { display: grid; gap: 1.6rem; }
.field { margin: 0; }
.field-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.55em; }
.field-head label { font-size: 0.85rem; font-weight: 600; color: var(--color-ink-soft); }
.field-head .val {
  color: var(--color-accent);
  font-weight: 700;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
.field input[type="range"] { width: 100%; accent-color: var(--color-accent); display: block; }
.field input[type="number"] {
  width: 100%;
  padding: 0.7em 0.9em;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: var(--color-bg);
  color: var(--color-ink);
}

/* label sits left of the input, on a shared column so every row lines up */
.field-amount {
  display: grid;
  grid-template-columns: 5.6rem minmax(0, 1fr);
  align-items: center;
  gap: 0.8rem;
  margin-top: 0.7em;
}
.field-amount-label { font-size: 0.8rem; color: var(--color-ink-soft); }
.field-amount-input { display: flex; align-items: center; gap: 0.45em; }
.field-amount-input input { flex: 1; min-width: 0; }
.field-amount-prefix { color: var(--color-ink-soft); font-size: 0.9rem; }

.calc-result {
  background: var(--color-bg);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid var(--color-line);
}
.calc-result .label { font-size: 0.82rem; color: var(--color-ink-soft); text-transform: uppercase; letter-spacing: 0.06em; }
.calc-result .big-number {
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 600;
  color: var(--color-ink);
  margin: 0.1em 0 0.2em;
  font-variant-numeric: tabular-nums;
}
/* two headline figures carrying equal weight */
.result-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.result-pair > div { display: flex; flex-direction: column; }
.result-pair .big-number { font-size: 2.3rem; }

.calc-result .breakdown { margin-top: 1.2rem; font-size: 0.88rem; color: var(--color-ink-soft); display: grid; gap: 0.55rem; }
.calc-result .breakdown div { display: flex; justify-content: space-between; gap: 1rem; }
.calc-result .breakdown span:last-child {
  font-weight: 700;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

/* ROI carries no footnote, so its figures spread across the freed height
   instead of sitting bunched in the middle of the block */
#panel-roi .calc-result { justify-content: space-evenly; gap: 1.6rem; }
#panel-roi .calc-result .breakdown { margin-top: 0; gap: 0.9rem; }
#panel-roi .result-pair { gap: 1.6rem; }

/* nothing to compute yet — figures go muted and a hint explains what's missing */
.calc-hint { display: none; margin: 0.9rem 0 0; font-size: 0.82rem; color: var(--color-ink-soft); }
.calc-result.is-empty .calc-hint { display: block; }
.calc-result.is-empty .big-number,
.calc-result.is-empty .breakdown span:last-child { color: var(--color-ink-soft); opacity: 0.45; }

/* the only element wider than the screen by design — it scrolls inside its
   own box so the 1080px table never reaches the page */
.compare-table-wrap { overflow-x: auto; max-width: 100%; }
table.compare-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; min-width: 1130px; background: var(--color-white); }
table.compare-table th, table.compare-table td { border: 1px solid var(--color-line); padding: 0.6em 0.7em; text-align: left; }
table.compare-table th {
  background: var(--color-bg);
  font-weight: 600;
  font-size: 0.78rem;
  line-height: 1.3;
  vertical-align: bottom;
}
table.compare-table input { width: 100%; border: none; background: transparent; font-family: var(--font-body); font-size: 0.88rem; padding: 0.2em; color: var(--color-ink); }
table.compare-table input:focus { outline: 1px solid var(--color-accent); }
table.compare-table input::placeholder { color: var(--color-ink-soft); opacity: 0.5; }

.compare-col-actions { width: 44px; text-align: center; }
.compare-remove {
  width: 32px; height: 32px;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  background: transparent;
  color: var(--color-ink-soft);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.compare-remove:hover,
.compare-remove:focus-visible {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

.compare-empty {
  text-align: center;
  padding: 2.2rem 1rem;
  color: var(--color-ink-soft);
  font-size: 0.92rem;
}

/* derived column — not editable, so it reads as an output, not a field */
table.compare-table td.cell-computed {
  background: var(--color-bg);
  font-weight: 700;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.calc-add { align-self: flex-start; margin-top: 1.2rem; padding: 0.8em 1.6em; font-size: 0.88rem; }

.compare-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.2rem; }

/* ---------- floating request button ----------
   z-index sits above the page and the header (100) but below every dialog
   (review modal 200, name prompt 300, toast 320). */
.floating-cta {
  position: fixed;
  right: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 150;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 1em 1.7em;
  border-radius: 999px;
  background: var(--color-accent);
  color: #fff;
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.92rem;
  box-shadow: 0 14px 34px -12px rgba(43, 41, 38, 0.6);
  /* visibility keeps it out of the tab order while hidden */
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease, background 0.2s ease;
}
.floating-cta.is-visible { opacity: 1; visibility: visible; transform: none; }
.floating-cta:hover,
.floating-cta:focus-visible { background: var(--color-accent-dark); }
.floating-cta__icon { width: 18px; height: 18px; flex: 0 0 auto; }

@media (prefers-reduced-motion: reduce) {
  .floating-cta { transition: opacity 0.2s ease, visibility 0.2s ease; transform: none; }
}

/* ---------- generic modal (project name prompt) ---------- */
.au-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.au-modal__backdrop { position: absolute; inset: 0; background: rgba(43, 41, 38, 0.6); }
.au-modal__box {
  position: relative;
  z-index: 1;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: 14px;
  box-shadow: 0 24px 60px -22px rgba(43, 41, 38, 0.5);
  padding: 2rem;
  width: 100%;
  max-width: 460px;
}
.au-modal__box h3 { font-size: 1.3rem; margin-bottom: 1rem; }

/* corner close button — sits in the padding, so it never crowds the heading */
.au-modal__close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  z-index: 2;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.au-modal__close:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}
.au-modal__close:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(193, 127, 79, 0.28);
}
.au-modal__box input {
  width: 100%;
  padding: 0.85em 1em;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 1rem;
  background: var(--color-bg);
  color: var(--color-ink);
}
.au-modal__actions { display: flex; gap: 0.7rem; justify-content: flex-end; margin-top: 1.4rem; flex-wrap: wrap; }

/* fade the backdrop, lift the panel slightly */
.au-modal__backdrop { animation: au-modal-fade 200ms ease-out; }
.au-modal__box { animation: au-modal-rise 220ms cubic-bezier(0.2, 0.7, 0.3, 1); }
.au-modal.is-closing .au-modal__backdrop,
.au-modal.is-closing .au-modal__box { animation: au-modal-out 180ms ease-in forwards; }

@keyframes au-modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes au-modal-rise {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes au-modal-out { from { opacity: 1; } to { opacity: 0; } }

/* The request dialog carries a whole form. It stays a compact card: the panel
   itself never scrolls, so the heading and the close button stay put — only the
   form scrolls, and only when the viewport is too short to show it whole. */
.au-modal--form .au-modal__box {
  display: flex;
  flex-direction: column;
  max-width: 500px;
  max-height: min(90vh, 760px);
  overflow: hidden;
  padding: 1.9rem 1.9rem 1.7rem;
}
.au-modal--form h3 { font-size: 1.4rem; margin-bottom: 1.15rem; padding-right: 2.4rem; flex: none; }
.au-modal--form .contact-form {
  gap: 0.9rem;
  overflow-y: auto;
  min-height: 0; /* lets the form shrink inside the column flex box */
  /* room for the focus ring, which the scroll container would otherwise clip */
  padding: 4px;
  margin: -4px;
}
/* Slightly tighter controls than the full-width Contacts form: the whole card
   has to clear a short laptop viewport without falling back to inner scroll. */
.au-modal--form .contact-form input,
.au-modal--form .contact-form select,
.au-modal--form .contact-form textarea { padding: 0.75em 0.95em; }
.au-modal--form .contact-form textarea { min-height: 68px; }
.au-modal--form .contact-form label { margin-bottom: 0.3em; }
.au-modal--form .note-soft { margin-top: 0.3rem; font-size: 0.76rem; }

@media (prefers-reduced-motion: reduce) {
  .au-modal__backdrop,
  .au-modal__box,
  .au-modal.is-closing .au-modal__backdrop,
  .au-modal.is-closing .au-modal__box { animation: none; }
}

@media (max-width: 640px) {
  /* still a centred card on phones — inset from every edge, never edge-to-edge */
  .au-modal { padding: 1rem; }
  .au-modal--form .au-modal__box {
    max-width: 100%;
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem); /* excludes the mobile browser chrome */
    padding: 1.6rem 1.25rem 1.4rem;
  }
  .au-modal--form h3 { font-size: 1.2rem; margin-bottom: 0.9rem; padding-right: 2.2rem; }
  .au-modal__close { top: 0.6rem; right: 0.6rem; }
}

/* ---------- toast ---------- */
.au-toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  z-index: 320;
  transform: translate(-50%, 1.5rem);
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.3rem;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-ink);
  color: var(--color-bg);
  font-family: var(--font-body);
  font-size: 0.92rem;
  cursor: pointer;
  box-shadow: 0 18px 40px -22px rgba(43, 41, 38, 0.9);
  max-width: calc(100vw - 2rem);
}
.au-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.au-toast__action { color: var(--color-accent); font-weight: 700; white-space: nowrap; }
.au-toast:hover .au-toast__action { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .au-toast { transition: none; }
}
#compare-pdf-error { display: none; }
#compare-pdf-error.is-visible { display: block; color: var(--color-accent-dark); }
#compare-pdf-error.is-busy { color: var(--color-ink-soft); }
#compare-pdf-error.is-done { color: var(--color-sea, #2f6e75); }

/* ---------- offers (promotions + top resale) ---------- */
.offers-block { margin-bottom: var(--gap-section); }
.offers-block:last-of-type { margin-bottom: 0; }
.offers-block__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.9rem 1.4rem;
  padding-bottom: 1.2rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--color-line);
}
.offers-block__head h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin: 0; }
.offers-deadline {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.offers-deadline--card {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--color-ink-soft);
  margin: 0 0 1.2rem;
}

.promo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: stretch;   /* every card in a row takes the row's full height */
}
.promo-card {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.promo-card__media { position: relative; }
.promo-card__media img { width: 100%; height: 230px; object-fit: cover; display: block; }
.promo-card__body { padding: 1.7rem; display: flex; flex-direction: column; flex: 1 1 auto; }
.promo-card__body h4 { font-size: 1.3rem; font-weight: 600; margin: 0 0 1rem; }

.promo-badge {
  position: absolute;
  top: 1rem; left: 1rem;
  background: var(--color-accent);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  padding: 0.35em 0.8em;
  border-radius: 999px;
}
.promo-badge--new { font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; }

/* The terms list absorbs the height difference between cards, so everything
   below it - price, deadline, button - lines up across all three. Preferred
   over a fixed min-height: it needs no magic number and holds up when the
   translations change length. `align-content: start` is required, otherwise
   the grid rows would stretch and spread the bullets apart. */
/* маркер приходит из .list-arrow — здесь только раскладка и типографика */
.promo-terms {
  margin: 0 0 1.3rem;
  display: grid;
  gap: 0.6rem;
  align-content: start;
  flex: 1 1 auto;
}
.promo-terms > li {
  font-size: 0.92rem;
  color: var(--color-ink-soft);
}

.promo-price {
  padding: 1rem 1.2rem;
  margin-bottom: 1rem;
  background: var(--color-bg);
  border-left: 2px solid var(--color-accent);
}
.promo-price__label { display: block; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-ink-soft); }
.promo-price__value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.promo-price__unit { font-size: 0.95rem; font-weight: 500; color: var(--color-ink-soft); }
.promo-price__note { display: block; font-size: 0.82rem; color: var(--color-ink-soft); }

.resale-facts { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.resale-price {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}
.resale-area { font-size: 0.95rem; color: var(--color-ink-soft); font-variant-numeric: tabular-nums; }
.resale-note { font-size: 0.92rem; color: var(--color-ink-soft); margin: 0 0 1.3rem; }

.promo-cta { margin-top: auto; align-self: flex-start; padding: 0.85em 1.7em; font-size: 0.88rem; }

/* ---------- photo gallery inside a resale card ---------- */
.promo-gallery { position: relative; background: var(--color-concrete); }
.promo-gallery__viewport { overflow: hidden; touch-action: pan-y; }
.promo-gallery__track {
  display: flex;
  transition: transform 400ms ease-in-out;
  will-change: transform;
}
.promo-gallery__track.is-dragging { transition: none; }
.promo-gallery__track img {
  flex: 0 0 100%;
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.promo-gallery__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(43, 41, 38, 0.55);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}
.promo-gallery__arrow:hover,
.promo-gallery__arrow:active { background: var(--color-accent); }
.promo-gallery__arrow--prev { left: 0.6rem; }
.promo-gallery__arrow--next { right: 0.6rem; }
.promo-gallery__counter {
  position: absolute;
  right: 0.7rem; bottom: 0.7rem;
  background: rgba(43, 41, 38, 0.65);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 0.25em 0.65em;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

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

/* ---------- telegram banner ---------- */
.offers-telegram {
  margin-top: var(--gap-section);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.2rem;
  padding: clamp(1.5rem, 3vw, 2.4rem) clamp(1.5rem, 4vw, 3rem);
  background: var(--color-ink);
  color: var(--color-bg);
  text-decoration: none;
  transition: background 0.25s ease;
}
.offers-telegram:hover { background: #1f1e1b; }
.offers-telegram__text {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.7rem);
  font-weight: 600;
  line-height: 1.25;
  max-width: 30ch;
}
/* a real button, matching the primary buttons elsewhere on the site */
.offers-telegram__action {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  flex: 0 0 auto;
  padding: 0.9em 2em;
  border-radius: 999px;
  background: var(--color-accent);
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  transition: background 0.2s ease, transform 0.2s ease;
}
.offers-telegram:hover .offers-telegram__action,
.offers-telegram:focus-visible .offers-telegram__action {
  background: var(--color-accent-dark);
  transform: translateY(-1px);
}
.offers-telegram:hover .arrow { transform: translateX(4px); }
.offers-telegram .arrow { transition: transform 0.2s ease; }

/* ---------- process ---------- */
.process-list { display: grid; gap: 0; }
.process-step { display: grid; grid-template-columns: 100px 1fr; gap: 1.5rem; padding: 2rem 0; border-top: 1px solid var(--color-line); }
.process-step:last-child { border-bottom: 1px solid var(--color-line); }
.process-step .step-num { font-family: var(--font-display); font-size: 2.6rem; color: var(--color-accent); line-height: 1; }
.process-step h3 { font-size: 1.2rem; margin-bottom: 0.3em; font-weight: 600; }
.process-step p { color: var(--color-ink-soft); margin: 0; }

/* ---------- cases ---------- */
.cases-empty {
  border: 1px dashed var(--color-line);
  padding: 3.5rem 2rem;
  text-align: center;
  color: var(--color-ink-soft);
}

/* ---------- contacts ---------- */
.contacts { background: var(--color-bg); }
.contacts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start; }
.contact-list { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.contact-list li { margin-bottom: 1.1rem; font-size: 1.02rem; }
.contact-list a { text-decoration: none; border-bottom: 1px solid var(--color-line); }
.contact-list .label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-accent); margin-bottom: 0.25em; }

.map-actions { margin-bottom: 1rem; }
.map-embed { border: 0; width: 100%; height: 320px; background: var(--color-paper-dim, #ece5d6); }
.map-fallback {
  padding: 2.5rem 1.5rem;
  text-align: center;
  background: var(--color-white);
  border: 1px dashed var(--color-line);
  color: var(--color-ink-soft);
}
.map-fallback p { margin-bottom: 1rem; }

/* info window — Google injects its own chrome, so only the content is styled */
.gm-au-info { font-family: var(--font-body); color: var(--color-ink); max-width: 260px; line-height: 1.55; }
.gm-au-name { display: block; font-size: 1rem; font-weight: 600; margin-bottom: 0.35em; }
.gm-au-addr { font-size: 0.85rem; color: var(--color-ink-soft); margin-bottom: 0.4em; }
.gm-au-rating { font-size: 0.85rem; color: var(--color-accent); font-weight: 600; margin-bottom: 0.5em; }
.gm-au-hours { display: grid; gap: 0.1em; font-size: 0.78rem; color: var(--color-ink-soft); margin-bottom: 0.7em; }
.gm-au-link {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-accent-dark);
}

/* ---------- google reviews ---------- */
.reviews-loading { color: var(--color-ink-soft); font-size: 0.95rem; }

/* summary sits on its own solid panel so the figure always reads crisply */
.reviews-summary {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 2.5rem;
  padding: 1.1rem 1.7rem;
  background: var(--color-white);
  border: 1px solid var(--color-line);
}
.reviews-score {
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 1;
  font-weight: 600;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}
.reviews-summary-meta { display: flex; flex-direction: column; gap: 0.2rem; }
.reviews-stars { font-size: 1.25rem; line-height: 1.1; color: var(--color-accent); letter-spacing: 0.08em; }
.reviews-count { font-size: 0.9rem; color: var(--color-ink-soft); }

/* ---------- carousel ---------- */
.carousel-stage { display: flex; align-items: center; gap: 0.8rem; }

.carousel-viewport {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  /* horizontal drags belong to the carousel, vertical ones scroll the page */
  touch-action: pan-y;
}
.carousel-viewport.is-dragging { cursor: grabbing; }

.carousel-track {
  display: flex;
  gap: 1.5rem;
  transition: transform 450ms ease-in-out;
  will-change: transform;
}
.carousel-track.is-dragging { transition: none; }

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

.carousel-arrow {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-line);
  background: var(--color-white);
  color: var(--color-ink);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.carousel-arrow:hover:not(:disabled),
.carousel-arrow:active:not(:disabled) { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.carousel-arrow:disabled { opacity: 0.35; cursor: default; }

/* Wraps at every width: the videos carousel draws one dot per playlist entry,
   and the playlist is free to grow. A single row would silently squash them
   into slivers once the count outruns the container. The dots are a sibling of
   .carousel-stage, so extra rows push nothing but the section below. */
.carousel-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.15rem; margin-top: 1.2rem; }
/* the dot stays 8px visually, but the button around it is a real tap target */
.carousel-dot {
  width: 32px; height: 32px;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.carousel-dot::after {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-line);
  transition: background 0.2s ease, transform 0.2s ease;
}
.carousel-dot.is-active::after { background: var(--color-accent); transform: scale(1.3); }

/* ---------- review card ---------- */
.review-card {
  flex: 0 0 calc((100% - 3rem) / 3);
  height: 340px;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.review-head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.7rem; }
.review-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.review-author { display: block; font-weight: 600; font-size: 0.95rem; }
.review-date { display: block; font-size: 0.8rem; color: var(--color-ink-soft); }
.review-stars { color: var(--color-accent); letter-spacing: 0.08em; margin-bottom: 0.6rem; }

/* the body clips, and a fade hints there is more text behind the link */
.review-body { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.review-body.is-clipped::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3em;
  background: linear-gradient(180deg, rgba(255,255,255,0), var(--color-white));
  pointer-events: none;
}
.review-text { font-size: 0.92rem; color: var(--color-ink-soft); margin: 0; }

.review-more {
  align-self: flex-start;
  margin-top: 0.9rem;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--color-accent-dark);
  cursor: pointer;
  border-bottom: 1px solid currentColor;
}
.review-more:hover { color: var(--color-accent); }

.reviews-cta { margin-top: 2.5rem; }

/* ---------- video cards ---------- */
/* Sits inside the process section, after the five steps: it needs the same
   breathing room above it as any other major block. Nothing below, because the
   section's own bottom padding already separates it from the next section —
   stacking both produced a visibly oversized gap. */
.videos-block { margin-top: var(--gap-section); margin-bottom: 0; }
/* The playlist is Shorts, shot vertically, so the cards are portrait. Three
   across a desktop row (gap is 1.5rem, hence the 3rem for the two gaps). */
.video-card {
  flex: 0 0 calc((100% - 3rem) / 3);
  /* 9:16 turns width into height fast — without a ceiling a mid-size screen
     ends up with cards taller than the window */
  max-width: 340px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.video-card__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  padding: 0;
  border: 1px solid var(--color-line);
  background: var(--color-concrete);
  cursor: pointer;
  overflow: hidden;
}
.video-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-card__media iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-card__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.video-card__play svg { width: 68px; height: 68px; }
.video-card__media:hover .video-card__play,
.video-card__media:focus-visible .video-card__play { transform: scale(1.07); }

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

/* ---------- review modal ---------- */
.review-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.review-modal__backdrop { position: absolute; inset: 0; background: rgba(43, 41, 38, 0.6); }
.review-modal__box {
  position: relative;
  z-index: 1;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: 14px;
  box-shadow: 0 24px 60px -22px rgba(43, 41, 38, 0.5);
  padding: 2.2rem;
  max-width: 620px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
}
/* same corner affordance as the request dialog, so the two read as one component */
.review-modal__close {
  position: absolute;
  top: 0.85rem; right: 0.85rem;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-ink);
  font-size: 1.45rem; line-height: 1;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.review-modal__close:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}
.review-modal__close:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(193, 127, 79, 0.28);
}
.review-modal__text { font-size: 1rem; color: var(--color-ink); margin: 0; white-space: pre-line; }

[hidden] { display: none !important; }

@media (max-width: 1000px) {
  .review-card { flex-basis: calc((100% - 1.5rem) / 2); }
  .video-card { flex-basis: calc((100% - 1.5rem) / 2); }
}
@media (max-width: 680px) {
  .review-card { flex-basis: 100%; height: 360px; }
  .video-card__play svg { width: 52px; height: 52px; }

  /* Arrows stay beside the carousel at every width, same as on desktop and
     the same in both carousels. They used to drop below into the dots row,
     but that row wraps once a carousel has more than about five dots, which
     is what left the arrows stacked on top of each other. */
  .carousel-stage { gap: 0.4rem; }
  .carousel-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    font-size: 1.3rem;
  }
}

/* Narrow phones only: with the arrows back on the sides there is no room for
   two portrait cards, and a single one is still a sensible height here. */
@media (max-width: 520px) {
  .video-card { flex-basis: 100%; }
}

form.contact-form { display: grid; gap: 1.1rem; }
form.contact-form input, form.contact-form select, form.contact-form textarea {
  width: 100%;
  padding: 0.9em 1em;
  border-radius: var(--radius);
  border: 1px solid var(--color-line);
  font-family: var(--font-body);
  font-size: 0.95rem;
  background: var(--color-white);
}
form.contact-form textarea { resize: vertical; min-height: 100px; }
/* One focus treatment for every control, including the one the request dialog
   focuses on open. Without this the browser draws its own hard black ring. */
form.contact-form input:hover,
form.contact-form select:hover,
form.contact-form textarea:hover { border-color: rgba(43, 41, 38, 0.28); }
/* after :hover on purpose — equal specificity, so focus has to win the tie */
form.contact-form input:focus,
form.contact-form select:focus,
form.contact-form textarea:focus,
.au-modal__box input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(193, 127, 79, 0.22);
}
/* Windows high-contrast mode drops box-shadows, so hand the ring back. */
@media (forced-colors: active) {
  form.contact-form input:focus,
  form.contact-form select:focus,
  form.contact-form textarea:focus,
  .au-modal__box input:focus,
  .au-modal__close:focus-visible { outline: 2px solid Highlight; outline-offset: 1px; }
}
form.contact-form label { font-size: 0.8rem; font-weight: 600; color: var(--color-ink-soft); display: block; margin-bottom: 0.4em; }
.form-status { font-size: 0.86rem; margin-top: 0.4rem; }
.form-status.is-success { color: var(--color-accent-dark); }
/* delivery failed — carries the Telegram/WhatsApp fallback links */
.form-status.is-error { color: #a3352b; }
.form-status.is-error a { color: inherit; text-decoration: underline; font-weight: 600; }
.form-status.is-error a:hover { color: var(--color-ink); }
form.contact-form button[type="submit"]:disabled { opacity: 0.55; cursor: progress; }

/* ---------- footer ---------- */
.site-footer { background: var(--color-ink); color: rgba(245,240,232,0.75); padding: 3.5rem 0 2rem; font-size: 0.88rem; }
/* Three columns of unequal weight, with generous gaps — the widths follow the
   content that is actually left rather than the removed legal block. */
.footer-grid {
  display: grid;
  grid-template-columns: 1.1fr 1.2fr 0.8fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  margin-bottom: 2.5rem;
  align-items: start;
}
.footer-grid h4 { font-family: var(--font-body); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(245,240,232,0.5); margin-bottom: 0.9em; }
.footer-logo { height: 54px; width: auto; margin-bottom: 1.1rem; filter: invert(1); }
.footer-social { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.footer-social a { border: 1px solid rgba(245,240,232,0.3); border-radius: 999px; padding: 0.5em 1.1em; text-decoration: none; font-size: 0.82rem; }
.footer-bottom {
  border-top: 1px solid rgba(245,240,232,0.15);
  padding-top: 1.5rem;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.8rem;
  font-size: 0.78rem; color: rgba(245,240,232,0.5);
}

/* ---------- responsive ---------- */
/* Enlarged nav no longer fits alongside the logo and language switch, so it
   collapses into the burger panel well before tablet widths. The threshold is
   set by the Georgian labels, the longest of the three languages (~1120px). */
@media (max-width: 1200px) {
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    right: clamp(1.25rem, 4vw, 3rem);
    flex-direction: column;
    gap: 0.4rem;
    padding: 1.2rem 1.6rem;
    background: var(--color-bg);
    color: var(--color-ink);
    box-shadow: 0 18px 40px -24px rgba(43, 41, 38, 0.6);
    border: 1px solid var(--color-line);
    min-width: min(260px, calc(100vw - 2.5rem));
  }
  .main-nav.is-open { display: flex; }
  .nav-toggle { display: block; }

  /* Колонка с фото занимает 658px. Уже при 1200px рядом с ней списку остаётся
     около 300px, а ниже — нечитаемая полоса, поэтому блок переходит в одну
     колонку раньше остальных секций. Фото при этом остаются 320px. */
  .about-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .about-grid, .contacts-grid { grid-template-columns: 1fr; }
  /* 320px перестают помещаться в контейнер примерно с 730px ширины окна */
  .about-photos figure { width: 240px; }
  .about-photos img { width: 240px; height: 240px; }
  .calc-layout { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr; }
  .service-card--buyers,
  .service-card--sellers,
  .service-card--investors { grid-column: span 1; }
  .service-card--investors { flex-direction: column; }
  /* in a column card the 36% basis would resolve against height */
  .service-card--investors .service-card__media { flex: 0 0 auto; }
  .service-card__media img { min-height: 220px; height: auto; }
  .trust-bar { grid-template-columns: repeat(2, 1fr); }
  /* Раньше здесь ужимался gap: фото занимали всю ширину колонки и на узких
     экранах блок разрастался. Теперь они фиксированы (160px, ниже 640px —
     120px), места хватает, и gap остаётся единым на всех разрешениях. */
  .promo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* The hero is a flex row, so a static .hero-stats would sit BESIDE the
     headline and outside the container padding. Stack the section instead
     and give the stats the same gutters as the content. */
  .hero {
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
  }
  .hero-content { order: 1; flex-direction: column; align-items: flex-start; }
  .hero-stats {
    order: 2;
    position: static;
    width: 100%;
    max-width: var(--container);
    margin: 1.6rem auto 0;
    padding: 0 clamp(1.25rem, 4vw, 3rem);
    box-sizing: border-box;
    /* side by side once the cards drop into the flow */
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* The 340px ceiling is there to stop the absolutely positioned column from
     stretching on desktop. In the flow the grid already sets the width, so the
     cap only left dead space inside each column. */
  .hero-stat { max-width: 100%; }
}

/* ---------- phones (360 / 390 / 414) ---------- */
@media (max-width: 640px) {
  /* Портреты меньше, но квадрат остаётся строгим — вытянутого портрета не
     появляется ни на одной ступени. 200+18+200 = 418px, помещается от ~460px
     ширины окна; ниже идут ещё две ступени. */
  .about-photos figure { width: 200px; }
  .about-photos img { width: 200px; height: 200px; }

  /* nav */
  section[id] { scroll-margin-top: 5rem; }   /* shorter header on phones */
  .logo img { height: 52px; }
  .site-header { padding: 0.8rem 1.25rem; }
  .nav-toggle {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
  }
  .main-nav { left: 1.25rem; right: 1.25rem; min-width: 0; }
  .main-nav a { font-size: 1.05rem; padding: 0.55rem 0; }
  .header-actions { gap: 0.6rem; }
  .lang-switch button {
    min-width: 42px; min-height: 40px;
    padding: 0.4em 0.6em;
    font-size: 0.8rem;
  }

  /* hero — header is shorter here, so the reserved strip shrinks with it */
  .hero { padding-top: 6.5rem; padding-bottom: 3.5rem; }
  .hero h1 { overflow-wrap: break-word; }
  /* one under the other on phones */
  .hero-stats { gap: 0.7rem; grid-template-columns: 1fr; }
  .hero-stat { padding: 0.9rem 1.1rem; }
  .hero-stat .num { font-size: 1.9rem; }
  .hero-stat .label { font-size: 0.9rem; }
  .scroll-hint { display: none; }      /* would collide with the stacked stats */

  /* about — photos stay 1:1, they are pre-cropped with the heads aligned */
  .trust-bar { grid-template-columns: 1fr; }

  /* services — отступы и размеры фото задаёт единый мобильный шаблон ниже
     (@media max-width: 767px), здесь только размер заголовка */
  .service-card h3 { font-size: 1.35rem; }

  /* calculators */
  .calc-layout { padding: 1.25rem; gap: 1.8rem; }
  .calc-tab { padding: 0.85em 1.2em; }
  .calc-result { padding: 1.4rem; }
  .calc-result .big-number { font-size: 2.2rem; }
  .result-pair { grid-template-columns: 1fr; gap: 1.2rem; }
  /* stack label above the input so the row never squeezes the field */
  .field-amount { grid-template-columns: 1fr; gap: 0.35rem; }
  .field input[type="range"] { height: 32px; }
  .compare-table-wrap { -webkit-overflow-scrolling: touch; }
  .compare-actions .btn { width: 100%; justify-content: center; }

  /* 16px keeps iOS from zooming the page when a field gets focus */
  .field input[type="number"],
  form.contact-form input,
  form.contact-form select,
  form.contact-form textarea,
  table.compare-table input { font-size: 16px; }

  /* offers */
  .promo-grid { grid-template-columns: 1fr; }
  .promo-card__body { padding: 1.4rem; }
  .promo-card__media img { height: 200px; }
  .promo-gallery__track img { height: 240px; }
  .promo-cta { width: 100%; justify-content: center; align-self: stretch; }
  .offers-telegram { flex-direction: column; align-items: flex-start; }

  /* process */
  .process-step { grid-template-columns: 46px 1fr; gap: 1rem; }
  .process-step .step-num { font-size: 2rem; }

  /* reviews */
  .reviews-summary { display: flex; width: 100%; box-sizing: border-box; padding: 1rem 1.2rem; gap: 0.9rem; }
  .reviews-score { font-size: 2.4rem; }
  .reviews-stars { font-size: 1.1rem; }
  .reviews-count { font-size: 0.85rem; }
  .review-card { padding: 1.4rem; }
  .review-more { padding: 0.4rem 0; }
  .reviews-cta .btn { width: 100%; justify-content: center; }
  .review-modal { padding: 1rem; }
  .review-modal__box { padding: 1.5rem 1.25rem; max-height: 85vh; }

  /* contacts */
  .map-embed { height: 260px; }
  .map-actions .btn { width: 100%; justify-content: center; }
  .contact-list li { margin-bottom: 1.3rem; }
  form.contact-form button[type="submit"] { width: 100%; justify-content: center; }

  /* floating cta — icon only, so it covers as little content as possible */
  .floating-cta {
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    width: 56px;
    height: 56px;
    padding: 0;
    justify-content: center;
    gap: 0;
  }
  .floating-cta__label { display: none; }
  .floating-cta__icon { width: 22px; height: 22px; }

  /* footer */
  .site-footer { padding: 2.5rem 0 1.5rem; }
  .footer-grid { gap: 2rem; }
}

/* Последние две ступени портретов. Отступы контейнера не опускаются ниже
   1.25rem, поэтому доступная ширина на узком телефоне считается как
   (ширина окна - 40px); пара квадратов плюс gap должна в неё уложиться,
   иначе появится горизонтальная прокрутка страницы. */
@media (max-width: 480px) {
  .about-photos figure { width: 150px; }
  .about-photos img { width: 150px; height: 150px; }
}
@media (max-width: 360px) {
  .about-photos figure { width: 130px; }
  .about-photos img { width: 130px; height: 130px; }
}

/* ==========================================================================
   Карточки услуг: единый мобильный шаблон (до 767px)

   На десктопе три карточки намеренно асимметричны — разный размер, разное
   место фото, у одной рваный край. Ниже 768px вся эта асимметрия снимается, и
   все три сводятся к одному виду: фото сверху во всю ширину карточки, дальше
   лейбл, название, список, кнопка.

   Блок стоит последним в файле осознанно. Правила разделов имеют ту же
   специфичность, что и правила отдельных карточек (.service-card против
   .service-card--investors — оба 0,1,0), поэтому спор решает порядок. Именно
   на этом ломалась вёрстка раньше: `.service-card--investors { padding: 0 }`
   перебивался более поздним `.service-card { padding: 1.4rem }`, и фото
   инвесторов уходило внутрь на величину отступа, тогда как у двух других
   выходило в край.
   ========================================================================== */
@media (max-width: 767px) {
  /* Одна точка правды для отступа: фото гасит его отрицательным margin,
     поэтому величины обязаны совпадать. Через переменную они не разъедутся. */
  .services-grid { --card-pad: 1.5rem; }

  .service-card,
  .service-card--investors {
    padding: var(--card-pad);
    flex-direction: column;
  }
  /* внутренние отступы больше не нужны — их держит сама карточка */
  .service-card__body { padding: 0; flex: 1 1 auto; }

  /* Все три обёртки фото ведут себя одинаково, каким бы классом ни были
     размечены. order: -1 поднимает фото наверх у «Продавцам», где в разметке
     оно стоит последним. */
  .service-card .torn-photo,
  .service-card .service-photo,
  .service-card .service-card__media {
    order: -1;
    flex: none;
    width: auto;
    height: auto;
    /* Обязательно оба. Автоматический минимальный размер флекс-элемента равен
       высоте контента, и без min-height картинка 1200x800 не даёт контейнеру
       сжаться до 16:9 — вместо этого он принимает её родные 3:2. overflow
       обрезает то, что вылезло за кадр после object-fit: cover. */
    min-height: 0;
    overflow: hidden;
    /* 16:9 — исходники все 3:2, при обрезке по ширине теряется немного верха
       и низа. 4:3 дало бы на 60px более высокое фото в каждой из трёх
       карточек подряд, и блок услуг вырос бы почти на экран. */
    aspect-ratio: 16 / 9;
    margin: calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) 1.2rem;
    background: var(--color-concrete);
  }
  .service-card .torn-photo img,
  .service-card .service-photo img,
  .service-card .service-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 0;        /* снимает min-height: 260px/220px с десктопных правил */
  }

  /* Рваный край — приём для одной фотографии на блок. В одинаковой серии из
     трёх карточек он выбивается, поэтому на мобильном край прямой у всех. */
  .service-card .torn-edge--bottom { clip-path: none; }
}