/* ADVISO — Вариант A (стиль заказчика: boutique advisory / editorial dossier).
   Дизайн-токены и все стили. Тёплый монохром (бумага/графит) + один
   акцентный тёплый оттенок (бронза), редакторская типографика, ledger/
   bento-структура вместо карточек с тенями. Сборка не нужна — обычный CSS. */

/* ============================== RESET ================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; }
img, svg { display: block; max-width: 100%; }
button, input, textarea { font: inherit; color: inherit; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure { margin: 0; }
fieldset { border: none; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* ============================== TOKENS ================================= */
:root {
  /* -- warm-monochrome canvas, light -- */
  --bg: #F5F3EE;
  --surface: #FFFFFF;
  --surface-2: #FBF9F4;
  --ink: #1B1D24;
  --ink-soft: #5B5D66;
  --ink-faint: #686A72;
  --line: #E4E0D6;
  --line-strong: #D6D0C0;

  /* -- one accent, two roles: graphic (icons/buttons/borders) vs
     text-safe (readable at body-text sizes, WCAG AA) -- */
  --accent: #A9702E;
  --accent-text: #8B5A22;
  --accent-soft-bg: #F1E7D8;
  --accent-soft-ink: #7A5323;
  --accent-hover: #8B5A22;

  --slate-soft-bg: #EAEAE3;
  --slate-soft-ink: #4B4D46;

  --ok: #346538;
  --ok-soft-bg: #EDF3EC;
  --danger: #9F3A2E;
  --danger-soft-bg: #F5E3E0;

  /* -- spotlight tile (Areas-of-work bento standout): a fixed dark-graphite
     highlight card. Deliberately NOT built from --ink/--bg, which flip
     between themes — reusing those would turn the "dark highlight" card
     white-on-dark in dark mode. Redefined per theme below instead, so it
     stays a legible, self-consistent highlight in both. -- */
  --spotlight-bg: #1B1D24;
  --spotlight-ink: #F5F3EE;
  --spotlight-ink-soft: rgba(245, 243, 238, 0.72);
  --spotlight-line: rgba(245, 243, 238, 0.14);

  /* -- type -- */
  --font-serif: "Piazzolla", Georgia, "Times New Roman", serif;
  --font-sans: "IBM Plex Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", Consolas, monospace;

  --fs-hero: clamp(2.5rem, 1.85rem + 2.9vw, 4.25rem);
  --fs-h2: clamp(1.875rem, 1.55rem + 1.5vw, 2.75rem);
  --fs-h3: 1.375rem;
  --fs-h4: 1.0625rem;
  --fs-lede: 1.1875rem;
  --fs-body: 1rem;
  --fs-small: 0.9375rem;
  --fs-caption: 0.75rem;

  /* -- shape / spacing -- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --container: 1200px;
  --prose: 42rem;
  --section-pad: clamp(64px, 5vw + 32px, 120px);
  --gutter: clamp(20px, 4vw, 56px);

  --shadow-card: 0 1px 2px rgba(27, 29, 36, 0.03);
  --shadow-hover: 0 8px 24px rgba(27, 29, 36, 0.06);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #16171D;
    --surface: #1C1D24;
    --surface-2: #202128;
    --ink: #F1EFE9;
    --ink-soft: #B7B9C0;
    --ink-faint: #82848C;
    --line: #2C2D34;
    --line-strong: #383A42;

    --accent: #D08A46;
    --accent-text: #E3A868;
    --accent-soft-bg: #2B2420;
    --accent-soft-ink: #E0A868;
    --accent-hover: #E3A868;

    --slate-soft-bg: #24252C;
    --slate-soft-ink: #C7C9CE;

    --ok: #6FBE76;
    --ok-soft-bg: #1E2A20;
    --danger: #E5988A;
    --danger-soft-bg: #33201C;

    /* a graphite lighter than the dark-mode page bg, so the tile still
       reads as an elevated highlight instead of collapsing to white. */
    --spotlight-bg: #2A2B33;
    --spotlight-ink: #F1EFE9;
    --spotlight-ink-soft: rgba(241, 239, 233, 0.7);
    --spotlight-line: rgba(241, 239, 233, 0.12);

    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-hover: 0 10px 28px rgba(0, 0, 0, 0.35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #16171D; --surface: #1C1D24; --surface-2: #202128;
  --ink: #F1EFE9; --ink-soft: #B7B9C0; --ink-faint: #82848C;
  --line: #2C2D34; --line-strong: #383A42;
  --accent: #D08A46; --accent-text: #E3A868; --accent-soft-bg: #2B2420;
  --accent-soft-ink: #E0A868; --accent-hover: #E3A868;
  --slate-soft-bg: #24252C; --slate-soft-ink: #C7C9CE;
  --ok: #6FBE76; --ok-soft-bg: #1E2A20;
  --danger: #E5988A; --danger-soft-bg: #33201C;
  --spotlight-bg: #2A2B33; --spotlight-ink: #F1EFE9;
  --spotlight-ink-soft: rgba(241, 239, 233, 0.7); --spotlight-line: rgba(241, 239, 233, 0.12);
  color-scheme: dark;
}

/* ============================== BASE ==================================== */
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-serif); font-weight: 600; letter-spacing: -0.015em; line-height: 1.12; color: var(--ink); }
h1 { font-size: var(--fs-hero); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 600; }
h4 { font-family: var(--font-sans); font-size: var(--fs-h4); font-weight: 600; letter-spacing: -0.005em; color: var(--ink); }
p { color: var(--ink-soft); }
strong, b { color: var(--ink); font-weight: 600; }

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.prose { max-width: var(--prose); }

section { padding-block: var(--section-pad); position: relative; }
.section-tint { background: var(--surface-2); }

/* hairline dot-grid texture — CSS only, no image request, ultra-low
   opacity so it never competes with the type: depth without breaking
   the flat monochrome surface. */
.section-tint::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(currentColor 1px, transparent 1px);
  background-size: 28px 28px;
  color: var(--ink);
  opacity: 0.035;
}

/* ============================== EYEBROW / SECTION HEAD ================= */
.eyebrow {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--font-mono); font-size: var(--fs-caption);
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--accent-text); margin: 0 0 14px;
}
.eyebrow__index { color: var(--ink-faint); }
.section-head { max-width: 46rem; margin-bottom: clamp(32px, 4vw, 56px); }
.section-title { margin-bottom: 14px; }
.section-lede { font-size: var(--fs-lede); line-height: 1.55; max-width: 40rem; }

/* Margin index — the page's signature device: a hairline rule threading
   down the left gutter of each numbered section, with a small rotated
   case-file tab. Enhancement only on wide viewports; every section's
   number/name is already carried by the eyebrow above, so nothing is
   lost where this is hidden. */
.has-index { position: relative; }
@media (min-width: 1180px) {
  .has-index::after {
    content: attr(data-index-label);
    position: absolute; left: 8px; top: var(--section-pad);
    writing-mode: vertical-rl; transform: rotate(180deg);
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--ink-faint);
  }
  .has-index .container { padding-left: calc(var(--gutter) + 28px); }
  .has-index .container::before {
    content: ""; position: absolute; left: 8px; top: calc(-1 * var(--section-pad) + 8px);
    bottom: calc(-1 * var(--section-pad) + 8px); width: 1px; background: var(--line-strong);
  }
}

/* ============================== ICONS =================================== */
.icon { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: square; stroke-linejoin: miter; flex-shrink: 0; }
.icon--sm { width: 16px; height: 16px; }
.flag-icon { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; }

/* ============================== BUTTONS ================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-sans); font-weight: 600; font-size: 0.9375rem;
  padding: 14px 26px; border-radius: var(--radius-sm);
  border: 1px solid transparent; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  min-height: 48px;
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out),
    border-color 160ms var(--ease-out), transform 120ms var(--ease-out);
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--ink); color: var(--bg); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-text); }
.btn-block { width: 100%; }
.btn .icon { width: 18px; height: 18px; }

/* small pill — reserved for tags/badges only, never large containers or
   primary buttons. */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 5px 12px; border-radius: 999px;
  background: var(--accent-soft-bg); color: var(--accent-soft-ink);
}

/* ============================== UTILITY BAR ================================
   Fixed dark masthead strip carrying the site's two pieces of persistent
   "where am I / what language" chrome — always visible, not hidden behind a
   hover/click menu for the service links; the language switch (right side)
   is the one deliberate exception — three language names read as clutter
   sitting in plain text next to the service links, so it's a compact
   dropdown instead (.utility-lang below), restyled for this dark bar rather
   than reusing the old light-header treatment verbatim.
     .utility-bar__nav — which of ADVISO's three services is open, with
                         direct links to the other two
     .utility-lang     — RU/EN/UK dropdown, moved up here 2026-09-03 so the
                         whole bar reads as one wayfinding strip instead of
                         splitting "which page" and "which language" across
                         two different UI patterns
   Multi-line professional-service sites (see
   Plan_Multipage_Relocation_Realestate.md) conventionally split navigation
   this way: a slim utility bar for "which line of business" (and, here,
   language) sits above the ordinary section nav, since visitors who can't
   place their need within a few seconds tend to leave. Built on
   --spotlight-* — the one pair of tokens in this file deliberately NOT
   redefined between themes — so the strip reads as constant site chrome
   rather than content that flips with light/dark mode. Scrolls away with
   the page; .site-header (below) is the one that stays sticky.

   Layout: the two groups sit at opposite ends of one row on wide viewports
   (`justify-content: space-between`); the service-links group scrolls
   horizontally within itself if it's too wide for its share of the row,
   and if there isn't room for both groups side by side at all, the row
   wraps and the language dropdown drops to its own second line — plain
   flexbox reflow, no breakpoint, no JS. */
.utility-bar { background: var(--spotlight-bg); border-bottom: 1px solid var(--spotlight-line); }
.utility-bar__row {
  min-height: 38px; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; column-gap: clamp(16px, 4vw, 40px); row-gap: 2px;
  padding-block: 8px;
}
.utility-bar__nav {
  display: flex; align-items: center; gap: clamp(10px, 2vw, 22px);
  max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.utility-bar__nav::-webkit-scrollbar { display: none; }
.utility-bar__link {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; flex-shrink: 0;
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.03em;
  color: var(--spotlight-ink-soft); text-decoration: none; padding: 3px 1px;
  border-bottom: 2px solid transparent; transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.utility-bar__link .icon { width: 14px; height: 14px; }
.utility-bar__link:hover { color: var(--spotlight-ink); }
.utility-bar__link[aria-current="page"] { color: var(--spotlight-ink); font-weight: 600; border-bottom-color: var(--accent); }
.utility-bar__sep { color: var(--spotlight-line); flex-shrink: 0; }

/* ---- Language dropdown, dark-bar variant — trigger sits in the strip     */
/* itself (transparent, spotlight-toned text, same underline language as    */
/* .utility-bar__link); the open panel switches to the ordinary light       */
/* surface, since a dark-on-dark floating panel would read as a glitch      */
/* rather than a menu. ---- */
.utility-lang { position: relative; flex-shrink: 0; }
.utility-lang__trigger {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.03em;
  color: var(--spotlight-ink-soft); background: transparent; border: none; cursor: pointer; padding: 3px 1px;
  border-bottom: 2px solid transparent;
  transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.utility-lang__trigger:hover { color: var(--spotlight-ink); }
.utility-lang[data-open] .utility-lang__trigger { color: var(--spotlight-ink); border-bottom-color: var(--accent); }
.utility-lang__chevron { width: 12px; height: 12px; transition: transform 160ms var(--ease-out); }
.utility-lang[data-open] .utility-lang__chevron { transform: rotate(180deg); }

.utility-lang__menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 50;
  min-width: 168px; margin: 0; padding: 4px; list-style: none;
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-hover);
}
.utility-lang__menu[hidden] { display: none; }
.utility-lang__menu li + li { border-top: 1px solid var(--line); }
.utility-lang__menu a {
  display: block; text-decoration: none; color: var(--ink-soft);
  font-family: var(--font-sans); font-size: 0.875rem; padding: 9px 12px; border-radius: 4px;
  transition: background-color 140ms var(--ease-out), color 140ms var(--ease-out);
}
.utility-lang__menu a:hover { background: var(--accent-soft-bg); color: var(--ink); }
/* Current language marked by weight, not colour alone. */
.utility-lang__menu a[aria-current="true"] { color: var(--ink); font-weight: 600; }

/* ============================== HEADER =================================== */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .site-header { background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
}
.site-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 16px; }

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand__mark { width: 22px; height: 22px; display: grid; gap: 3px; align-content: center; }
.brand__mark span { display: block; height: 3px; border-radius: 2px; background: var(--accent); }
.brand__mark span:nth-child(1) { width: 100%; opacity: .55; }
.brand__mark span:nth-child(2) { width: 74%; opacity: .8; }
.brand__mark span:nth-child(3) { width: 46%; }
.brand__word { font-family: var(--font-sans); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.06em; color: var(--ink); }

.nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); }
.nav__link {
  font-size: 0.9375rem; font-weight: 500; text-decoration: none; color: var(--ink-soft);
  position: relative; padding-block: 4px;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--accent); transition: right 180ms var(--ease-out);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after { right: 0; }
.nav__mobile-extra { display: none; }

/* Mobile equivalents of .utility-bar's two groups (services + language) —
   below 1180px the utility bar itself is hidden (see .utility-bar in the
   @media (max-width: 1179px) block) and these live inside the full-screen
   mobile nav instead, where a phone actually has room for them: cramming
   a service switcher, a language dropdown and the section anchors into one
   38px strip never worked on narrow screens (fixed 2026-09-03) — the
   overlay already opens to near-full height, so plain readable rows here
   cost nothing. Language links reuse the same a[data-lang] hookup as the
   desktop dropdown (see js/main.js), so no extra JS is needed for them. */
.nav__mobile-group + .nav__mobile-group { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 14px; }
.nav__mobile-label {
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 4px;
}
.nav__mobile-link {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.9375rem; font-weight: 500; color: var(--ink-soft); text-decoration: none; padding: 9px 0;
}
.nav__mobile-link .icon { width: 18px; height: 18px; color: var(--ink-faint); flex-shrink: 0; }
.nav__mobile-link:hover { color: var(--ink); }
.nav__mobile-link[aria-current] { color: var(--ink); font-weight: 600; }
.nav__mobile-link[aria-current] .icon { color: var(--accent-text); }

.header-actions { display: flex; align-items: center; gap: 14px; }

.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: transparent; border: 1px solid var(--line-strong);
}
.nav-toggle .icon--close { display: none; }
.nav-toggle[aria-expanded="true"] .icon--menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon--close { display: block; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--bg); padding: 12px 18px; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* ============================== HERO ====================================== */
.hero { padding-top: clamp(48px, 6vw, 96px); padding-bottom: var(--section-pad); }
.hero__grid { display: grid; grid-template-columns: 1fr; gap: clamp(40px, 6vw, 72px); align-items: start; }
.hero__eyebrow { margin-bottom: 22px; }
.hero h1 { margin-bottom: 22px; }
/* Longer, keyword-carrying H1s (relocation.html, real-estate.html — the
   country names make the headline noticeably longer than the default
   short marketing line index.html uses) need a smaller scale so they
   still read as a headline, not a wall of oversized wrapped text. */
.hero h1.h1--long { font-size: clamp(1.85rem, 1.35rem + 2.2vw, 3.15rem); }
.hero__lede { font-size: var(--fs-lede); line-height: 1.6; max-width: 38rem; margin-bottom: 32px; }
/* Mobile-first: stacked, both buttons full-width. Left to size themselves
   to their own text, the primary/ghost pair ends up a different width on
   every page (button copy differs — "Получить консультацию" vs "Записаться
   на диагностику" — and again between the two buttons on the same page),
   which reads as visually mismatched on narrow screens (fixed 2026-09-03).
   Matching widths side by side only makes sense once there's room for both
   on one line — see the row layout at min-width: 760px below. */
.hero__actions { display: flex; flex-direction: column; align-items: stretch; gap: 14px; margin-bottom: 40px; }
.hero__actions .btn { width: 100%; }
.hero__proof { display: flex; flex-direction: column; gap: 12px; }
.hero__proof li { display: flex; align-items: center; gap: 10px; font-size: 0.9375rem; color: var(--ink-soft); }
.hero__proof .icon { color: var(--accent-text); }

/* Signature element: the "case file" card — a static, document-styled
   read of the RAD cycle. No auto-cycling motion: this variant's quiet,
   editorial register carries the identity, not an animated gimmick. */
.case-file { border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-card); overflow: hidden; }
.case-file__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px; border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint);
}
.case-file__row { display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding: 22px; border-bottom: 1px solid var(--line); }
.case-file__row:last-child { border-bottom: none; }
.case-file__num { font-family: var(--font-mono); font-size: 0.9375rem; color: var(--accent-text); font-weight: 600; }
.case-file__row h3 { font-size: 1.0625rem; margin-bottom: 4px; }
.case-file__row p { font-size: 0.9375rem; margin: 0; }

/* ============================== GRIDS / CARDS ============================ */
.grid-3 { display: grid; grid-template-columns: 1fr; gap: 20px; }
.grid-6 { display: grid; grid-template-columns: 1fr; gap: 16px; }

.card {
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--surface); padding: 30px; box-shadow: var(--shadow-card);
  transition: box-shadow 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.card:hover { box-shadow: var(--shadow-hover); border-color: var(--line-strong); }

/* ---- Problem: bordered 2x2 ledger instead of four floating cards ---- */
.problem__grid {
  display: grid; grid-template-columns: 1fr; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); overflow: hidden;
}
.problem__symptom { padding: 28px; border-bottom: 1px solid var(--line); display: flex; gap: 16px; }
.problem__symptom:last-child { border-bottom: none; }
.problem__icon { color: var(--accent-text); flex-shrink: 0; margin-top: 2px; }
.problem__symptom p { margin: 0; font-size: 0.9688rem; }
.problem__symptom p b { display: block; margin-bottom: 4px; font-family: var(--font-serif); font-size: 1.0625rem; font-weight: 600; }

.problem__bridge {
  margin-top: 32px; padding: 4px 0 4px 24px; border-left: 2px solid var(--accent);
  font-family: var(--font-serif); font-style: italic; font-size: 1.1875rem; line-height: 1.55; color: var(--ink);
  max-width: 46rem;
}

/* ---- Method: a horizontal ledger line with three stations ---- */
.method-line { display: grid; grid-template-columns: 1fr; gap: 0; position: relative; }
.method-step { padding: 26px 0; border-top: 1px solid var(--line); position: relative; }
.method-step:first-child { border-top: none; }
.method-step__top { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.method-step__num { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--accent-text); border: 1px solid var(--line-strong); border-radius: 999px; width: 30px; height: 30px; display: grid; place-items: center; flex-shrink: 0; }
.method-step h3 { font-size: 1.1875rem; }
.method-step p { margin: 0; max-width: 34rem; }

/* ---- Formats: table-like triptych, dividers not cards ---- */
.formats { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.formats__col { padding: 28px 0; border-bottom: 1px solid var(--line); }
.formats__col:last-child { border-bottom: none; }
.formats__index { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--accent-text); margin-bottom: 10px; }
.formats__col h3 { font-size: 1.1875rem; margin-bottom: 8px; }
.formats__col p { margin: 0; }

/* ---- Areas of work: asymmetric bento ---- */
.work-card { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); padding: 28px; box-shadow: var(--shadow-card); transition: box-shadow 200ms var(--ease-out); }
.work-card:hover { box-shadow: var(--shadow-hover); }
.work-card--spotlight { background: var(--spotlight-bg); border-color: var(--spotlight-bg); }
.work-card--spotlight, .work-card--spotlight h4, .work-card--spotlight p { color: var(--spotlight-ink); }
.work-card--spotlight .work-card__icon { color: var(--accent-text); }
.work-card--spotlight .work-card__insight { border-top-color: var(--spotlight-line); color: var(--spotlight-ink-soft); }
.work-card__icon { color: var(--accent-text); margin-bottom: 16px; }
.work-card h4 { margin-bottom: 8px; }
.work-card p { margin: 0; font-size: 0.9375rem; }
.work-card__insight { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 0.875rem; font-style: italic; font-family: var(--font-serif); color: var(--ink-soft); }

/* ---- Boundaries: one bordered ledger split by a hairline ---- */
.boundaries { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); display: grid; grid-template-columns: 1fr; overflow: hidden; }
.boundaries__col { padding: 30px; }
.boundaries__col + .boundaries__col { border-top: 1px solid var(--line); }
.boundaries__col h3 { margin-bottom: 18px; font-size: 1.1875rem; }
.boundary-list { display: flex; flex-direction: column; gap: 14px; }
.boundary-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.9688rem; color: var(--ink-soft); }
.boundary-list--in .icon { color: var(--ok); }
.boundary-list--out .icon { color: var(--ink-faint); }
.boundary-list--in span, .boundary-list--out span { padding-top: 1px; }

.boundary-callout {
  margin-top: 24px; padding: 22px 24px; border-left: 2px solid var(--accent);
  background: var(--accent-soft-bg); border-radius: 0 var(--radius-md) var(--radius-md) 0;
  display: flex; gap: 14px; align-items: flex-start; max-width: 50rem;
}
.boundary-callout .icon { color: var(--accent-text); margin-top: 2px; }
.boundary-callout span { color: var(--accent-soft-ink); font-size: 0.9688rem; font-weight: 500; }

/* ---- Process: vertical itinerary, no cards ---- */
.process-list { border-top: 1px solid var(--line); }
.process-row { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 30px 0; border-bottom: 1px solid var(--line); }
.process-row__meta { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); }
.process-row__code { color: var(--accent-text); font-weight: 600; font-size: 0.9375rem; }
.process-row__time { color: var(--ink-faint); font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase; }
.process-row h3 { font-size: 1.1875rem; margin-bottom: 8px; }
.process-row > p { max-width: 42rem; margin-bottom: 14px; }
.process-row__points { display: flex; flex-direction: column; gap: 8px; }
.process-row__points li { display: flex; gap: 10px; font-size: 0.9375rem; color: var(--ink-soft); }
.process-row__points li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex-shrink: 0; margin-top: 8px; }

/* ---- About ---- */
.about { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
.about p { margin-bottom: 14px; max-width: 42rem; }
.about__facts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.about__fact { display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--ink-soft); }
.about__fact .icon { color: var(--accent-text); width: 18px; height: 18px; }
.about__fact--flags { display: inline-flex; gap: 8px; }
.flag-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--slate-soft-bg); color: var(--slate-soft-ink); font-size: 0.8125rem; }

/* ---- FAQ ---- */
.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item__q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 0; cursor: pointer; list-style: none; font-weight: 500; font-size: 1rem;
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q:hover { color: var(--accent-text); }
.faq-toggle { position: relative; width: 18px; height: 18px; flex-shrink: 0; }
.faq-toggle span { position: absolute; background: currentColor; border-radius: 1px; }
.faq-toggle .v { left: 8px; top: 1px; width: 2px; height: 16px; transition: transform 180ms var(--ease-out), opacity 180ms; }
.faq-toggle .h { left: 1px; top: 8px; width: 16px; height: 2px; }
details[open] .faq-toggle .v { transform: rotate(90deg); opacity: 0; }
.faq-item__a { padding: 0 0 24px; max-width: 46rem; }
.faq-item__a span { color: var(--ink-soft); font-size: 0.9688rem; line-height: 1.65; }

/* ---- Contact ---- */
.contact { display: grid; grid-template-columns: 1fr; gap: 48px; }
.field { margin-bottom: 22px; }
.field label { display: block; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; margin-bottom: 8px; color: var(--ink); }
.field input, .field textarea {
  width: 100%; border: none; border-bottom: 1px solid var(--line-strong); background: transparent;
  padding: 10px 2px; font-size: 1rem; color: var(--ink); resize: vertical; font-family: var(--font-sans);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.field-hint { display: block; margin-top: 6px; font-size: 0.8125rem; color: var(--ink-faint); }

/* Choice groups (anketa "Цель обращения" / "Страна интереса" / "Бюджет" /
   "Сроки", and the quick-form "Страна интереса") — every option shown as a
   chip, never hidden behind a native <select>: the whole point is that a
   visitor sees the full range of answers at a glance. Same markup pattern
   for checkboxes (multi-select) and radios (single-select) — only the input
   type differs, the chip styling doesn't care which. The native control
   stays visible and functional on its own (a11y + a working fallback in any
   browser); :has() is a pure visual enhancement on top of that. */
.field-group { margin-bottom: 22px; }
.field-group__legend { display: block; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; margin-bottom: 10px; color: var(--ink); }
.field-checks { display: flex; flex-wrap: wrap; gap: 10px; }
.field-check {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px 9px 12px; border: 1px solid var(--line-strong); border-radius: 999px;
  font-size: 0.875rem; color: var(--ink-soft); cursor: pointer;
  transition: border-color 160ms var(--ease-out), background-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.field-check:hover { border-color: var(--accent); color: var(--ink); }
.field-check input { width: 16px; height: 16px; accent-color: var(--accent); flex-shrink: 0; margin: 0; }
@supports selector(:has(*)) {
  .field-check:has(input:checked) { background: var(--accent-soft-bg); border-color: var(--accent); color: var(--accent-soft-ink); }
}

/* Anketa — collapsible full questionnaire below the quick lead form on
   relocation.html / real-estate.html (see #contact on both). A ledger box,
   not a modal: stays in document flow, no focus-trap needed. */
.anketa { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); margin-top: 28px; overflow: hidden; }
.anketa__summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px; cursor: pointer; list-style: none; font-weight: 600; font-size: 0.9688rem; color: var(--ink);
}
.anketa__summary::-webkit-details-marker { display: none; }
.anketa__summary:hover { color: var(--accent-text); }
.anketa__summary .icon { color: var(--ink-faint); transition: transform 180ms var(--ease-out); }
.anketa[open] .anketa__summary .icon { transform: rotate(180deg); }
.anketa__body { padding: 4px 24px 28px; border-top: 1px solid var(--line); }
.anketa__body .field:first-child,
.anketa__body .field-group:first-child { margin-top: 22px; }

/* Lead magnet — due-diligence checklist link (real-estate.html only).
   Icon+text are one sub-row (.leadmagnet__row) so the button can sit beside
   them on wide screens but drop to its own full-width row on narrow ones,
   instead of all three flex children fighting for space in a single line
   and squeezing the button into an awkward sliver (see fix 2026-09-03). */
.leadmagnet { display: flex; align-items: center; gap: 18px; padding: 20px 22px; border-radius: var(--radius-md); background: var(--accent-soft-bg); margin-bottom: 24px; }
.leadmagnet__row { display: flex; align-items: flex-start; gap: 14px; flex: 1; min-width: 0; }
.leadmagnet__icon { color: var(--accent-soft-ink); flex-shrink: 0; margin-top: 2px; }
.leadmagnet__text { flex: 1; min-width: 0; font-size: 0.875rem; color: var(--accent-soft-ink); }
.leadmagnet__text strong { display: block; color: var(--ink); font-family: var(--font-serif); font-size: 1.0625rem; font-weight: 600; margin-bottom: 2px; }
.leadmagnet__btn { flex-shrink: 0; }
/* .btn sets its own `display`, which as an author rule beats the browser's
   default `[hidden]{display:none}` — without this, all three per-language
   copies of the button (data-ru/data-en/data-uk) show at once instead of
   just the active language's. */
.leadmagnet__btn[hidden] { display: none; }

@media (max-width: 619px) {
  .leadmagnet { flex-direction: column; align-items: stretch; gap: 16px; }
  .leadmagnet__row { align-items: center; }
  .leadmagnet__btn { width: 100%; }
}

/* Honeypot field — off-screen and unreachable by tab/mouse for people,
   still present and fillable for form-filling bots (see netlify/functions/contact.js). */
.field-trap { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.contact-form__status { margin-top: 16px; padding: 14px 16px; background: var(--ok-soft-bg); border-radius: var(--radius-sm); font-size: 0.9375rem; color: var(--ink); }
.contact-form__status--error { display: flex; align-items: flex-start; gap: 10px; background: var(--danger-soft-bg); }
.contact-form__status--error[hidden] { display: none; }
.contact-form__status--error .icon { flex-shrink: 0; margin-top: 2px; color: var(--danger); }
.contact__reassure { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.contact__reassure li { display: flex; gap: 10px; align-items: center; font-size: 0.875rem; color: var(--ink-soft); }
.contact__reassure .icon { width: 16px; height: 16px; color: var(--accent-text); }

.contact-alt { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; margin-bottom: 24px; }
.contact-alt__heading { padding: 18px 22px 4px; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.contact-alt__item {
  display: flex; align-items: center; gap: 14px; padding: 16px 22px; border-top: 1px solid var(--line);
  text-decoration: none; color: var(--ink);
}
.contact-alt__item:hover { color: var(--accent-text); }
.contact-alt__item .icon { color: var(--accent-text); }
.contact-alt__item span { display: flex; flex-direction: column; font-weight: 500; font-size: 0.9375rem; }
.contact-alt__item small { color: var(--ink-faint); font-weight: 400; font-size: 0.8125rem; }

.contact-next { padding: 4px 4px; }
.contact-next__heading { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 14px; }
.contact-next__list { display: flex; flex-direction: column; gap: 14px; counter-reset: step; }
.contact-next__list li { display: flex; gap: 12px; font-size: 0.9375rem; color: var(--ink-soft); counter-increment: step; }
.contact-next__list li::before {
  content: counter(step); font-family: var(--font-mono); font-size: 0.75rem; color: var(--accent-text);
  border: 1px solid var(--line-strong); border-radius: 50%; width: 22px; height: 22px; flex-shrink: 0; display: grid; place-items: center;
}

/* ============================== FOOTER =================================== */
.site-footer { border-top: 1px solid var(--line); padding-block: 40px; }
.site-footer__row { display: flex; flex-direction: column; gap: 20px; }
.site-footer__legal { font-size: 0.8125rem; color: var(--ink-faint); line-height: 1.7; }
.site-footer__links { display: flex; gap: 16px; }
.site-footer__links a { color: var(--ink-faint); }
.site-footer__links a:hover { color: var(--accent-text); }

/* ============================== BACK TO TOP ================================
   Reuses the existing chevron icon rotated 180°, not a new symbol — one
   fewer thing to keep in sync across three duplicated SVG sprites. Sits
   below the mobile nav overlay in stacking order (z-index 30 < .nav's 39)
   so it's covered rather than floating over the open menu; no extra JS
   needed to hide it while the menu is up. */
.to-top {
  position: fixed; z-index: 30;
  right: max(18px, env(safe-area-inset-right, 0px) + 18px);
  bottom: max(18px, env(safe-area-inset-bottom, 0px) + 18px);
  width: 46px; height: 46px; display: grid; place-items: center;
  background: var(--ink); border: none; border-radius: var(--radius-md);
  color: var(--bg); cursor: pointer; box-shadow: var(--shadow-card);
  opacity: 0; visibility: hidden; transform: translateY(10px); pointer-events: none;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out),
    visibility 200ms, background-color 160ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.to-top--visible { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.to-top:hover { background: var(--accent-hover); box-shadow: var(--shadow-hover); }
.to-top:active { transform: scale(0.94); }
.to-top .icon { width: 20px; height: 20px; transform: rotate(180deg); }
@media (max-width: 520px) { .to-top { width: 42px; height: 42px; } }

/* ============================== REVEAL ==================================== */
.reveal { opacity: 1; transform: none; }
.reveal--pending { opacity: 0; transform: translateY(12px); }
.reveal--in { animation: reveal-in 600ms var(--ease-out) both; }
@keyframes reveal-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* Cascade: once a group's own entrance finishes settling, its items step
   in one after another instead of popping in all at once. */
.reveal--in.problem__grid .problem__symptom,
.reveal--in.method-line .method-step,
.reveal--in.formats .formats__col,
.reveal--in.grid-6 .work-card,
.reveal--in.grid-3 .card,
.reveal--in.process-list .process-row,
.reveal--in.faq .faq-item {
  animation: reveal-in 600ms var(--ease-out) both;
}
.problem__symptom:nth-child(1), .method-step:nth-child(1), .formats__col:nth-child(1), .work-card:nth-child(1), .grid-3 .card:nth-child(1), .process-row:nth-child(1), .faq-item:nth-child(1) { animation-delay: 0ms; }
.problem__symptom:nth-child(2), .method-step:nth-child(2), .formats__col:nth-child(2), .work-card:nth-child(2), .grid-3 .card:nth-child(2), .process-row:nth-child(2), .faq-item:nth-child(2) { animation-delay: 80ms; }
.problem__symptom:nth-child(3), .method-step:nth-child(3), .formats__col:nth-child(3), .work-card:nth-child(3), .grid-3 .card:nth-child(3), .process-row:nth-child(3), .faq-item:nth-child(3) { animation-delay: 160ms; }
.problem__symptom:nth-child(4), .work-card:nth-child(4), .process-row:nth-child(4), .faq-item:nth-child(4) { animation-delay: 240ms; }
.work-card:nth-child(5), .faq-item:nth-child(5) { animation-delay: 320ms; }
.work-card:nth-child(6), .faq-item:nth-child(6) { animation-delay: 400ms; }
.faq-item:nth-child(7) { animation-delay: 480ms; }
.faq-item:nth-child(8) { animation-delay: 560ms; }
.faq-item:nth-child(9) { animation-delay: 640ms; }
.faq-item:nth-child(10) { animation-delay: 720ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal--pending, .reveal--in,
  .reveal--in.problem__grid .problem__symptom, .reveal--in.method-line .method-step,
  .reveal--in.formats .formats__col, .reveal--in.grid-6 .work-card, .reveal--in.grid-3 .card,
  .reveal--in.process-list .process-row, .reveal--in.faq .faq-item {
    opacity: 1 !important; transform: none !important; animation: none !important;
  }
  .btn, .card, .nav__link::after, .work-card, .faq-toggle .v { transition: none !important; }
  .anketa__summary .icon { transition: none !important; }
  .field-check, .utility-bar__link { transition: none !important; }
  .utility-lang__trigger, .utility-lang__chevron, .utility-lang__menu a { transition: none !important; }
  .to-top { transition: opacity 120ms linear, visibility 120ms !important; transform: none !important; }
  .to-top:active { transform: none !important; }
}

/* ============================== RESPONSIVE ================================ */
@media (min-width: 620px) {
  .problem__grid { grid-template-columns: 1fr 1fr; }
  .problem__symptom:nth-child(2n) { border-left: 1px solid var(--line); }
  .problem__symptom:nth-child(1), .problem__symptom:nth-child(2) { border-bottom: 1px solid var(--line); }
  .problem__symptom:nth-child(3), .problem__symptom:nth-child(4) { border-bottom: none; }

  .boundaries { grid-template-columns: 1fr 1fr; }
  .boundaries__col + .boundaries__col { border-top: none; border-left: 1px solid var(--line); }

  .formats { grid-template-columns: repeat(3, 1fr); border-bottom: none; }
  .formats__col { border-bottom: none; padding: 8px 28px; }
  .formats__col:not(:first-child) { border-left: 1px solid var(--line); }
  .formats__col:first-child { padding-left: 0; }

  .process-row { grid-template-columns: 200px 1fr; }
}

@media (min-width: 760px) {
  .hero__actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .hero__actions .btn { width: auto; }
  .site-footer__row { flex-direction: row; align-items: center; justify-content: space-between; }
}

@media (min-width: 860px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .contact { grid-template-columns: 1.15fr 0.85fr; }
}

@media (min-width: 900px) {
  .grid-6 { grid-template-columns: repeat(3, 1fr); }
  .work-card--spotlight { grid-column: span 2; display: grid; grid-template-columns: auto 1fr; column-gap: 24px; align-items: start; }
  .work-card--spotlight .work-card__icon { grid-row: span 3; margin-bottom: 0; margin-top: 2px; }
}

@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: 1.05fr 0.95fr; }
  .method-line { grid-template-columns: repeat(3, 1fr); column-gap: 32px; }
  .method-step { border-top: none; border-left: 1px solid var(--line); padding: 4px 0 4px 28px; }
  .method-step:first-child { border-left: none; padding-left: 0; }

  .nav { position: static; }
}

@media (min-width: 1180px) {
  .nav { display: flex; }
  .nav-toggle { display: none !important; }
}

@media (max-width: 1179px) {
  .header-actions .btn { display: none; }
  .nav-toggle { display: inline-flex; }
  /* Below this width the utility bar's job — switch service, switch
     language — moves into .nav__mobile-extra inside the full-screen menu
     (see the .nav__mobile-group rules above); the strip itself is dropped
     rather than squeezed, see the note there for why. */
  .utility-bar { display: none; }
  .nav {
    /* explicit height, not top+bottom auto-stretch: as a flex item of
       .site-header__bar, a fixed-position child left to auto-size against
       inset alone collapses to its content height in some engines instead
       of stretching to the viewport — pin the height directly instead. */
    position: fixed; top: 65px; left: 0; right: 0; z-index: 39;
    height: calc(100vh - 65px); height: calc(100dvh - 65px);
    background: var(--bg); flex-direction: column; align-items: stretch;
    padding: 28px var(--gutter) 32px; gap: 4px; overflow-y: auto;
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 180ms;
  }
  .nav--open { transform: translateY(0); opacity: 1; visibility: visible; }
  .nav__link { font-size: 1.0625rem; padding-block: 14px; border-bottom: 1px solid var(--line); }
  .nav__link::after { display: none; }
  .nav__mobile-extra { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; }
}

@media (max-width: 520px) {
  .site-header__bar { padding-block: 12px; }
  .brand__word { font-size: 0.95rem; }
}