/* NOMO · монография. Сетка 12 колонок, бумага, тушь, хвоя. */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--paper);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-serif);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, figure, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: text-decoration-thickness var(--dur-fast), color var(--dur-fast); }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
:target { scroll-margin-top: 16px; }
section[id] { scroll-margin-top: 0; }

.vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 8px; top: -100px; z-index: 50;
  padding: 10px 16px; background: var(--ink); color: var(--paper);
  font: 600 var(--fs-ui)/1 var(--f-sans);
}
.skip:focus { top: 8px; }

.wrap {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* общие элементы */
.h2 {
  font-size: var(--fs-h2);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.no {
  font-family: var(--f-sans);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: var(--green);
}
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px;
  border: 1px solid var(--ink); border-radius: 0;
  background: var(--ink); color: var(--paper);
  font: 600 1rem/1.1 var(--f-sans); letter-spacing: 0.01em;
  text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.btn:hover { background: var(--green); border-color: var(--green); }
.btn--light { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--light:hover { background: #fff; border-color: #fff; color: var(--green-deep); }
.btn--line { background: transparent; color: var(--paper); border-color: currentColor; }
.btn--line:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* ссылка-подпись растягивается на всю фигуру: кликается и фото, и название */
.plate-link { position: relative; }
.plate-link__a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.plate-link__a:focus-visible { outline: none; }
.plate-link__a:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 4px; }
.plate-link img { transition: transform var(--dur-base) var(--ease); }

/* ---------- шапка ---------- */
.head { border-bottom: 1px solid var(--rule); }
.head__in {
  display: flex; flex-wrap: wrap; align-items: center;
  column-gap: clamp(8px, 2vw, 32px); row-gap: 4px;
  min-height: var(--head-h);
  padding-block: 8px;
}
/* логотип: оригинальный nomo-logo.svg, пропорция 282 × 96 (~2,93 : 1) */
.head__logo { display: block; flex: none; margin-right: auto; padding: 4px 0; }
.head__logo img { height: 26px; width: auto; aspect-ratio: 282 / 96; }
.head__nav {
  display: flex; flex-wrap: wrap; gap: 4px 20px;
  font: 500 var(--fs-ui)/1.2 var(--f-sans);
}
.head__nav a { text-decoration: none; padding: 8px 0; }
.head__nav a:hover { text-decoration: underline; }
.head__tel { font-variant-numeric: tabular-nums; }
.head__cta, .head__menu {
  display: inline-flex; align-items: center; min-height: 40px;
  padding: 0 16px; border: 1px solid var(--ink);
  font: 600 var(--fs-ui)/1 var(--f-sans);
  text-decoration: none; white-space: nowrap;
  border-radius: 0; cursor: pointer;
}
.head__cta { background: var(--ink); color: var(--paper); }
.head__cta:hover { background: var(--green); border-color: var(--green); }
.head__menu { background: transparent; color: var(--ink); }
.head__menu:hover { background: var(--paper-2); }

/* без JS шапка показывает ссылки; с диалогом на узких экранах их заменяет «Меню» */
@media (max-width: 1023.98px) {
  .head__nav { order: 3; flex-basis: 100%; }
  .has-dialog .head__nav { display: none; }
  .has-dialog .head__in { flex-wrap: nowrap; }
}
@media (min-width: 1024px) {
  .head__menu { display: none !important; }
  .head__logo img { height: 30px; }
}
@media (max-width: 399.98px) {
  .head__logo img { height: 22px; }
  .head__cta, .head__menu { padding: 0 10px; font-size: 0.875rem; }
  .head__in { column-gap: 8px; }
}

/* ---------- меню ---------- */
.menu {
  width: 100%; max-width: 100%; height: 100%; max-height: 100%;
  margin: 0; padding: 0; border: 0;
  background: var(--paper); color: var(--ink);
}
.menu::backdrop { background: var(--paper); }
.menu__in { display: flex; flex-direction: column; min-height: 100%; padding-bottom: 32px; }
.menu__bar {
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--head-h); border-bottom: 1px solid var(--rule);
}
.menu__title { font: 600 var(--fs-small)/1 var(--f-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.menu__close {
  min-height: 40px; padding: 0 16px; border: 1px solid var(--ink); background: transparent;
  color: var(--ink); font: 600 var(--fs-ui)/1 var(--f-sans); cursor: pointer; border-radius: 0;
}
.menu__list { padding-block: 24px; }
.menu__list li { border-bottom: 1px solid var(--rule); }
.menu__list a {
  display: block; padding: 14px 0;
  font-size: clamp(1.75rem, 1.2rem + 3vw, 2.75rem); font-weight: 300; line-height: 1.15;
  text-decoration: none;
}
.menu__list a:hover { color: var(--green); }
.menu__foot { margin-top: auto; display: grid; gap: 10px; font: 500 1.0625rem/1.3 var(--f-sans); }
.menu__foot a { overflow-wrap: anywhere; }

/* ---------- первый экран ---------- */
.hero { padding-block: clamp(12px, 2vw, 28px) clamp(40px, 5vw, 72px); }
.hero__grid { display: grid; gap: 20px; }
.hero__text, .hero__more, .hero__scene, .hero__fig { min-width: 0; }
/* без схемы (нет JS или она не загрузилась) фото из каталога идёт главным кадром, как раньше */
.hero__fig { order: -1; }
.hero__text { display: flex; flex-direction: column; }

.hero__frame {
  position: relative; overflow: hidden;
  width: 100%;
  aspect-ratio: 1200 / 1008;
  max-height: max(170px, 36svh);
  background: var(--paper-3);
}
.hero__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.hero__cap {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px;
  padding-top: 10px; border-top: 1px solid var(--ink); margin-top: 10px;
}
.hero__name { font-size: 1.125rem; font-weight: 500; text-decoration: none; }
.hero__name:hover { text-decoration: underline; }
.hero__where { font: 400 var(--fs-small)/1.3 var(--f-sans); color: var(--ink-3); }

.hero__kicker {
  font: 600 var(--fs-small)/1.2 var(--f-sans); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--green);
}
.hero__title {
  margin-top: 10px;
  font-size: var(--fs-hero);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.025em;
  font-variation-settings: "opsz" 72;
}
.hero__title em { font-style: italic; color: var(--green); }
.hero__act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 20px; }
.hero__direct { display: flex; flex-wrap: wrap; gap: 4px 16px; font: 500 var(--fs-ui)/1.3 var(--f-sans); }
.hero__direct a { padding: 6px 0; font-variant-numeric: tabular-nums; }
.hero__lead { margin-top: 20px; font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); max-width: 34em; }
.hero__routes { margin-top: 24px; border-top: 1px solid var(--rule); }
.hero__routes li { border-bottom: 1px solid var(--rule); }
.hero__routes a {
  display: grid; grid-template-columns: 7.5em 1fr; gap: 12px; align-items: baseline;
  padding: 12px 0; text-decoration: none;
}
.hero__route-name { font: 600 var(--fs-ui)/1.2 var(--f-sans); }
.hero__route-text { font-size: 0.9375rem; line-height: 1.35; color: var(--ink-2); }
.hero__routes a:hover .hero__route-name { color: var(--green); text-decoration: underline; }

/* со схемой фото проекта становится компактной плашкой после маршрутов */
.js .hero:not(.is-scene-off) .hero__fig {
  order: 0;
  display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); column-gap: 14px; align-items: start;
  padding-top: 14px; border-top: 1px solid var(--rule);
}
.js .hero:not(.is-scene-off) .hero__frame { aspect-ratio: 4 / 3; max-height: none; min-height: 0; }
.js .hero:not(.is-scene-off) .hero__frame img { transform: none !important; will-change: auto; }
.js .hero:not(.is-scene-off) .hero__cap {
  flex-direction: column; align-items: flex-start; gap: 4px;
  margin-top: 0; padding-top: 0; border-top: 0;
}

@media (min-width: 600px) and (max-width: 899.98px) {
  .hero__frame { max-height: 50svh; }
}
@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto 1fr;
    column-gap: var(--gap); align-items: start;
  }
  .hero__text { grid-column: 1 / 7; grid-row: 1; padding-top: clamp(8px, 2vw, 32px); }
  .hero__more { grid-column: 1 / 7; grid-row: 2; }
  .hero__scene, .hero__fig { grid-column: 7 / 13; grid-row: 1 / 4; order: 0; }
  .hero__frame { max-height: calc(100svh - var(--head-h) - 120px); min-height: 320px; }
  .hero__act { margin-top: 28px; }
  .hero__lead { margin-top: 12px; }
  .js .hero:not(.is-scene-off) .hero__fig { grid-column: 1 / 7; grid-row: 3; align-self: end; margin-top: 8px; }
  .hero.is-scene-off .hero__scene { grid-row: 4; }
}
@media (min-width: 1200px) {
  .hero__text, .hero__more, .js .hero:not(.is-scene-off) .hero__fig { grid-column: 1 / 6; }
  .hero__scene, .hero__fig { grid-column: 6 / 13; }
}

/* ---------- схема Москва-Сити ---------- */
html:not(.js) .scene { display: none; }
.scene { display: flex; flex-direction: column; }
.scene__stage {
  position: relative; overflow: hidden;
  width: 100%; aspect-ratio: 1 / 1; max-height: 68svh;
  background: radial-gradient(120% 90% at 50% 42%, #fbf8f1 0%, var(--paper-2) 68%, var(--paper-3) 100%);
  touch-action: pan-y; cursor: grab;
  -webkit-user-select: none; user-select: none;
}
.scene__stage.is-drag { cursor: grabbing; }
.scene[data-state="plan"] .scene__stage { cursor: default; touch-action: auto; }
.scene__stage canvas, .scene__plan {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
}
.scene[data-state="loading"] .scene__stage::after,
.scene[data-state="boot"] .scene__stage::after {
  content: "Загружаем схему…";
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  font: 500 var(--fs-small)/1 var(--f-sans); letter-spacing: 0.06em; color: var(--ink-3);
}
.scene__label {
  position: absolute; left: 0; top: 0; z-index: 1; margin: 0;
  white-space: nowrap; pointer-events: none;
}
.scene__label--city {
  translate: -50% -100%;
  padding: 5px 9px 6px; border-top: 1px solid var(--ink);
  background: rgba(245, 241, 232, 0.88);
  font: 600 0.75rem/1 var(--f-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink);
}
.scene__label--river {
  translate: -50% -50%;
  font: italic 400 0.9375rem/1 var(--f-serif); color: var(--paper);
  text-shadow: 0 0 6px rgba(13, 51, 39, 0.9), 0 0 2px rgba(13, 51, 39, 0.9);
}
.scene__compass {
  position: absolute; left: 12px; top: 12px; z-index: 1;
  width: 34px; height: 34px; border: 1px solid var(--ink-3); border-radius: 50%;
  background: rgba(245, 241, 232, 0.85);
  transform: rotate(var(--north, 0deg));
  pointer-events: none;
}
.scene__compass span {
  position: absolute; left: 50%; top: 3px; translate: -50% 0;
  font: 700 0.6875rem/1 var(--f-sans); color: var(--green);
}
.scene__compass::after {
  content: ""; position: absolute; left: 50%; top: 16px; bottom: 6px; width: 1px; background: var(--ink-3);
}
.scene__osm {
  position: absolute; right: 0; bottom: 0; z-index: 2;
  padding: 5px 8px; background: rgba(245, 241, 232, 0.9);
  font: 400 0.75rem/1.2 var(--f-sans); color: var(--ink-2);
}
.scene__osm:focus-visible { outline-offset: -3px; }

.scene__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 10px; }
.scene__views { display: flex; flex-wrap: wrap; gap: 6px; }
.scene__btn {
  min-height: 44px; padding: 0 14px;
  border: 1px solid var(--rule); border-radius: 0; background: transparent; color: var(--ink);
  font: 500 var(--fs-ui)/1 var(--f-sans); cursor: pointer;
  transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.scene__btn:hover { border-color: var(--ink); }
.scene__btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.scene__status { flex: 1 1 14em; min-width: 0; font: 400 var(--fs-small)/1.35 var(--f-sans); color: var(--ink-3); }
.scene__status:empty { display: none; }
.scene__cap { display: grid; gap: 3px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ink); }
.scene__title { font-size: 1.0625rem; font-weight: 500; line-height: 1.3; }
.scene__note, .scene__msg { font: 400 var(--fs-small)/1.4 var(--f-sans); color: var(--ink-3); }
.scene__msg { color: var(--ink-2); }

/* схема не загрузилась: остаётся одна строка с пояснением, кадр отдан фото */
.scene[data-state="off"] .scene__stage,
.scene[data-state="off"] .scene__bar,
.scene[data-state="off"] .scene__title,
.scene[data-state="off"] .scene__note { display: none; }
.scene[data-state="off"] .scene__cap { margin-top: 0; border-top-color: var(--rule); }

@media (min-width: 600px) and (max-width: 899.98px) {
  .scene__stage { aspect-ratio: 4 / 3; }
}
@media (min-width: 900px) {
  .scene__stage { aspect-ratio: auto; height: max(400px, calc(100svh - var(--head-h) - 220px)); max-height: 820px; }
}

/* проявление и лёгкий параллакс кадра (включает main.js) */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .js .hero__frame img { transform: translate3d(0, var(--py, 0px), 0) scale(1.06); will-change: transform; }
}
.js .hero.is-wait .hero__frame { clip-path: inset(0 0 100% 0); }
.js .hero.is-wait .hero__frame img { opacity: 0; transform: scale(1.12); }
.js .hero.is-shown .hero__frame { transition: clip-path var(--dur-scene) var(--ease); }
.js .hero.is-shown .hero__frame img { transition: opacity var(--dur-scene) var(--ease), transform 1400ms var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .js .hero.is-wait .hero__frame { clip-path: none; }
  .js .hero.is-wait .hero__frame img { transform: none; }
  .js .hero.is-shown .hero__frame img { transition: opacity 150ms linear; }
}

/* ---------- как ведём сделку ---------- */
.deal { padding-block: var(--sec-y); border-top: 1px solid var(--ink); }
.deal__grid { display: grid; gap: clamp(32px, 4vw, 56px); }
.deal__aside, .deal__main { min-width: 0; }
.deal__intro { margin-top: 20px; font-size: var(--fs-lead); line-height: 1.55; color: var(--ink-2); max-width: 36em; }
.deal__fig { margin-top: 28px; }
.deal__fig figcaption, .kinds__fig figcaption {
  margin-top: 8px; font: 400 var(--fs-small)/1.3 var(--f-sans); color: var(--ink-3);
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .deal__aside { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gap); }
  .deal__aside .h2, .deal__intro { grid-column: 1; }
  .deal__fig { grid-column: 2; grid-row: 1 / 3; margin-top: 0; }
}
@media (min-width: 1024px) {
  .deal__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .deal__aside { grid-column: 1 / 5; }
  .deal__main { grid-column: 6 / 13; }
}

/* путь сделки */
.path { counter-reset: none; font: 500 var(--fs-ui)/1.3 var(--f-sans); }
.path li {
  position: relative; display: flex; gap: 12px; align-items: baseline;
  padding: 8px 0 8px 28px;
}
.path li::before {
  content: ""; position: absolute; left: 4px; top: 0; bottom: 0; width: 1px; background: var(--ink);
}
.path li:first-child::before { top: 50%; }
.path li:last-child::before { bottom: 50%; }
.path li::after {
  content: ""; position: absolute; left: 0; top: calc(50% - 4.5px);
  width: 9px; height: 9px; border: 1px solid var(--ink); border-radius: 50%; background: var(--paper);
}
.path__no { font-variant-numeric: tabular-nums; color: var(--ink-3); min-width: 1ch; }
.path__you { color: var(--green); font-weight: 700; }
.path__you::after { background: var(--green) !important; border-color: var(--green) !important; transform: scale(1.35); }
@media (min-width: 1100px) {
  .path { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); font-size: 0.875rem; }
  .path li { display: block; padding: 22px 10px 0 0; hyphens: auto; }
  .path li::before { left: 0; right: 0; top: 4px; bottom: auto; width: auto; height: 1px; }
  .path li:first-child::before { top: 4px; left: 4px; }
  .path li:last-child::before { bottom: auto; right: auto; width: 5px; }
  .path li::after { top: 0; left: 0; }
  .path__no { display: block; margin-bottom: 4px; }
}

/* два маршрута */
.routes { display: grid; gap: 40px; margin-top: clamp(32px, 4vw, 56px); }
.route { min-width: 0; display: flex; flex-direction: column; }
.route__title { font-size: var(--fs-h3); font-weight: 400; line-height: 1.15; padding-bottom: 14px; border-bottom: 2px solid var(--ink); }
.route__steps li {
  display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: 10px; align-items: baseline;
  padding: 12px 0; border-bottom: 1px solid var(--rule);
  font-size: 1rem; line-height: 1.45;
}
.who {
  display: inline-block; justify-self: start;
  padding: 2px 7px 3px; border: 1px solid var(--ink-3); border-radius: 2px;
  font: 600 0.75rem/1.2 var(--f-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2);
}
.who--you { background: var(--green); border-color: var(--green); color: var(--paper); }
.route__act {
  align-self: flex-start; margin-top: 18px; padding: 6px 0;
  font: 600 var(--fs-ui)/1.3 var(--f-sans); color: var(--green);
}
@media (min-width: 768px) {
  .routes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
  .route:first-child { padding-right: var(--gap); }
  .route:last-child { padding-left: var(--gap); border-left: 1px solid var(--ink); }
}

/* ---------- с чем работаем ---------- */
.kinds { padding-block: var(--sec-y); background: var(--paper-2); }
.kinds__grid { display: grid; gap: 28px; }
.kinds__title, .kinds__list, .kinds__fig { min-width: 0; }
.kinds__list { border-top: 1px solid var(--ink); }
.kind {
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: 12px;
  padding: 18px 0 20px; border-bottom: 1px solid var(--rule);
}
.kind__no { grid-row: 1 / 3; font: 600 var(--fs-small)/2.2 var(--f-sans); letter-spacing: 0.06em; color: var(--green); }
.kind__name { font-size: clamp(1.5rem, 1.05rem + 1.8vw, 2.5rem); font-weight: 300; line-height: 1.1; letter-spacing: -0.01em; }
.kind__text { margin-top: 6px; font-size: 1rem; line-height: 1.5; color: var(--ink-2); max-width: 32em; }
@media (min-width: 1024px) {
  .kinds__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 32px; align-items: start; }
  .kinds__title { grid-column: 1 / 8; }
  .kinds__list { grid-column: 1 / 8; }
  .kinds__fig { grid-column: 8 / 13; grid-row: 1 / 3; align-self: end; }
  .kind { grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gap); align-items: baseline; }
  .kind__no { grid-row: auto; }
  .kind__text { margin-top: 0; }
}

/* ---------- каталог ---------- */
.catalog { padding-block: var(--sec-y); }
.catalog__head { display: grid; gap: 14px; margin-bottom: clamp(28px, 4vw, 56px); }
.catalog__lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); max-width: 34em; }
.catalog__note {
  justify-self: start; padding-left: 12px; border-left: 3px solid var(--green);
  font: 500 var(--fs-ui)/1.4 var(--f-sans);
}
@media (min-width: 1024px) {
  .catalog__head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
  .catalog__head .h2 { grid-column: 1 / 6; grid-row: 1 / 3; align-self: start; }
  .catalog__lead { grid-column: 7 / 13; }
  .catalog__note { grid-column: 7 / 13; }
}
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* поиск и разделы */
.cat__tools {
  display: grid; gap: 18px;
  padding-top: 18px; border-top: 1px solid var(--ink);
}
.cat__label {
  display: block; padding: 0; margin-bottom: 8px;
  font: 600 var(--fs-small)/1.2 var(--f-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3);
}
.cat__search, .seg { min-width: 0; }
.cat__search input {
  width: 100%; min-height: 48px; padding: 11px 14px;
  border: 1px solid var(--ink); border-radius: 0;
  background: #fbf9f3; color: var(--ink);
  font: 400 1.0625rem/1.4 var(--f-sans);
  -webkit-appearance: none; appearance: none;
}
.cat__search input::placeholder { color: var(--ink-3); opacity: 1; }
.seg { margin: 0; padding: 0; border: 0; }
.seg__row { display: flex; flex-wrap: wrap; gap: 8px; }
.seg label { position: relative; display: inline-flex; cursor: pointer; }
.seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg__box {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 14px;
  border: 1px solid var(--rule); background: transparent;
  font: 500 var(--fs-ui)/1 var(--f-sans);
  transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.seg__n { font-size: var(--fs-small); font-variant-numeric: tabular-nums; color: var(--ink-3); }
.seg label:hover .seg__box { border-color: var(--ink); }
.seg input:checked + .seg__box { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.seg input:checked + .seg__box .seg__n { color: #c9d3cc; }
.seg input:focus-visible + .seg__box { outline: 2px solid var(--focus); outline-offset: 3px; }
@media (min-width: 900px) {
  .cat__tools { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--gap); align-items: end; }
}

.cat__status {
  margin-top: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--rule);
  font: 500 var(--fs-ui)/1.4 var(--f-sans); color: var(--ink-2);
}
.cat__state {
  display: grid; gap: 12px; justify-items: start;
  margin-top: 24px; padding: 18px 20px; border-left: 3px solid var(--green); background: var(--paper-2);
  font: 400 1rem/1.5 var(--f-sans);
}
.cat__state-links a { font-weight: 600; }
.cat__reset {
  min-height: 44px; padding: 0 16px; border: 1px solid var(--ink); border-radius: 0;
  background: transparent; color: var(--ink); font: 600 var(--fs-ui)/1 var(--f-sans); cursor: pointer;
}
.cat__reset:hover { background: var(--ink); color: var(--paper); }

/* карточки: фото проекта или набранное название, без подставных картинок */
.cat__list {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 32px var(--gap); margin-top: 28px;
}
@media (min-width: 560px) { .cat__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cat__list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 44px; } }
@media (min-width: 1280px) { .cat__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.cc { min-width: 0; display: flex; flex-direction: column; }
.cc__media { overflow: hidden; aspect-ratio: 4 / 3; background: var(--paper-3); }
.cc__media img { width: 100%; height: 100%; object-fit: cover; }
.cc.plate-link:hover .cc__media img { transform: scale(1.02); }
.cc__cap {
  display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: 8px;
  align-items: baseline; padding-top: 12px;
}
.cc__name { font-size: 1.25rem; font-weight: 400; line-height: 1.2; overflow-wrap: anywhere; }
.cc__link { text-decoration: none; }
.cc__link:hover { text-decoration: underline; }
.cc__where { margin-top: 3px; font: 400 var(--fs-small)/1.35 var(--f-sans); color: var(--ink-3); }
.cc__desc { margin-top: 6px; font-size: 0.9375rem; line-height: 1.45; color: var(--ink-2); }

.cc__panel {
  display: flex; flex-direction: column; gap: 6px;
  aspect-ratio: 4 / 3; padding: 16px 18px 18px;
  border-top: 2px solid var(--ink); background: var(--paper-2);
}
.cc__kicker {
  display: flex; gap: 10px; align-items: baseline;
  font: 600 var(--fs-small)/1.2 var(--f-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3);
}
.cc__kicker .no { letter-spacing: 0.08em; }
.cc--text .cc__name {
  margin-top: auto;
  font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2.1rem); font-weight: 300; line-height: 1.08; letter-spacing: -0.01em;
  text-wrap: balance;
}
.cc--text .cc__where { font-size: var(--fs-ui); color: var(--ink-2); }
.cc--text .cc__desc { margin-top: 2px; }
.cc.plate-link:hover .cc__panel { background: var(--paper-3); }
.cc__panel { transition: background-color var(--dur-fast); }
@media (max-width: 559.98px) {
  .cc__media { aspect-ratio: 16 / 10; }
  .cc__panel { aspect-ratio: auto; min-height: 9.5rem; }
}

.cc__foot {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px;
  margin-top: auto; padding-top: 8px; border-top: 1px solid var(--rule);
}
.cc__cap, .cc__panel { margin-bottom: 10px; }
.cc__terms { font: 400 var(--fs-small)/1.35 var(--f-sans); color: var(--ink-3); }
.cc__ask {
  position: relative; z-index: 2;
  padding: 6px 0; font: 600 var(--fs-small)/1.2 var(--f-sans); color: var(--green); white-space: nowrap;
}

.cat__more { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 40px; }
.cat__more:not(:has(button:not([hidden]))) { margin-top: 0; }
.cat__all {
  min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 600 var(--fs-ui)/1.3 var(--f-sans); color: var(--green);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em;
}
.cat__all:hover { text-decoration-thickness: 2px; }
.cat__stamp { margin-top: 24px; max-width: 60em; font: 400 var(--fs-small)/1.45 var(--f-sans); color: var(--ink-3); }
.cat__stamp:empty { display: none; }

/* разделы-источники: без JS это и есть вход в каталог */
.cat-src { margin-top: clamp(32px, 4vw, 56px); padding-top: 16px; border-top: 1px solid var(--ink); }
.cat-src__title {
  font: 600 var(--fs-small)/1.2 var(--f-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3);
}
.cat-src__list { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: 10px; }
.cat-src__list a {
  display: inline-block; padding: 6px 0;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem); font-weight: 300; line-height: 1.25;
}
html:not(.js) .cat-src { margin-top: 0; }
html:not(.js) .cat-src__list { display: grid; gap: 0; }
html:not(.js) .cat-src__list li { border-bottom: 1px solid var(--rule); }
html:not(.js) .cat-src__list a { padding: 12px 0; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); }

/* ---------- запрос ---------- */
.ask {
  --focus: var(--paper);
  padding-block: var(--sec-y);
  background: var(--green-deep); color: var(--paper);
}
.ask__grid { display: grid; gap: 40px; }
.ask__head, .composer { min-width: 0; }
.ask__lead { margin-top: 18px; font-size: var(--fs-lead); line-height: 1.5; color: #d9e3dc; max-width: 32em; }
.ask__tips { display: grid; gap: 10px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--green-line); font-size: 1rem; line-height: 1.5; color: #d9e3dc; }
.ask__tips b { color: var(--paper); font-weight: 600; }
.ask__direct { margin-top: 28px; border-top: 1px solid var(--green-line); }
.ask__direct li {
  display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 12px; align-items: baseline;
  padding: 12px 0; border-bottom: 1px solid var(--green-line);
}
.ask__direct span { font: 500 var(--fs-small)/1.3 var(--f-sans); letter-spacing: 0.06em; text-transform: uppercase; color: #b5c7bc; }
.ask__direct a { font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem); font-weight: 400; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
@media (min-width: 1024px) {
  .ask__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .ask__head { grid-column: 1 / 6; }
  .composer { grid-column: 7 / 13; }
}

/* составитель письма */
.composer { display: grid; gap: 18px; font-family: var(--f-sans); }
.composer__req { font-size: var(--fs-small); color: #b5c7bc; }
.field { display: grid; gap: 6px; min-width: 0; border: 0; padding: 0; }
.field__label { font: 600 var(--fs-ui)/1.3 var(--f-sans); color: var(--paper); padding: 0; }
.field__opt { font-weight: 400; color: #b5c7bc; }
.field__hint { font-size: var(--fs-small); color: #b5c7bc; }
.field__error { min-height: 0; font-size: var(--fs-small); font-weight: 600; color: #ffc2b2; }
.field__error:empty { display: none; }
.field input[type="text"], .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 11px 14px;
  border: 1px solid var(--paper); border-radius: 0;
  background: var(--paper); color: var(--ink);
  font: 400 1rem/1.4 var(--f-sans);
}
.field select { appearance: auto; }
.field textarea { resize: vertical; min-height: 120px; }
.field [aria-invalid="true"], .choice[aria-invalid="true"] .choice__row { box-shadow: 0 0 0 2px #ffc2b2; }
.choice__row { display: flex; flex-wrap: wrap; gap: 10px; }
.choice__row label {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 18px; border: 1px solid #8fae9f; cursor: pointer;
  font: 500 1rem/1 var(--f-sans);
}
.choice__row label:has(input:checked) { border-color: var(--paper); background: rgba(245, 241, 232, 0.12); }
.choice__row input { width: 18px; height: 18px; margin: 0; accent-color: var(--paper); }
.composer__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.composer__status { font-size: var(--fs-ui); line-height: 1.45; }
.composer__status:empty { display: none; }
.composer__status[data-tone="ok"] { padding: 12px 14px; border-left: 3px solid var(--paper); background: rgba(245, 241, 232, 0.08); }
.composer__status[data-tone="error"] { color: #ffc2b2; font-weight: 600; }
.composer__spare textarea { min-height: 140px; font-size: 0.9375rem; }
.composer__self { font-size: var(--fs-small); color: #b5c7bc; }
.composer__self a { color: var(--paper); }

/* ---------- подвал ---------- */
.foot { padding-block: clamp(48px, 6vw, 88px) 32px; border-top: 1px solid var(--ink); }
.foot__grid { display: grid; gap: 24px; }
.foot__letter { font-size: var(--fs-h3); font-weight: 300; line-height: 1.3; max-width: 22em; }
.foot__logo { justify-self: start; height: 36px; width: auto; aspect-ratio: 282 / 96; }
.foot__contacts { display: flex; flex-wrap: wrap; gap: 8px 28px; font: 500 var(--fs-ui)/1.3 var(--f-sans); }
.foot__contacts a { display: inline-block; padding: 6px 0; overflow-wrap: anywhere; }
.foot__copy { font: 400 var(--fs-small)/1 var(--f-sans); color: var(--ink-3); }
@media (min-width: 1024px) {
  .foot__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
  .foot__letter { grid-column: 1 / 8; }
  .foot__logo { grid-column: 10 / 13; justify-self: end; }
  .foot__contacts { grid-column: 1 / 10; }
  .foot__copy { grid-column: 10 / 13; justify-self: end; }
}

/* ---------- короткие экраны: первый экран плотнее ---------- */
@media (max-height: 620px) and (max-width: 899.98px) {
  .hero__frame { max-height: max(150px, 30svh); }
  .hero__title { margin-top: 6px; }
  .hero__act { margin-top: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
  .cc.plate-link:hover .cc__media img { transform: none; }
}