/* ============================================================================
   FARR.DESIGN — редизайн, направление «Технический разворот»
   Reference Index: Technical Brutalism (Obsidian, VKA, ChainGPT, PlayerZero)
                  × Editorial Precision (VOID, Esper Bionics)
                  + Monochrome Index (Bondar) / Warm Brutalism (Romy Keane)

   Бумага, обнажённая сетка, метки совмещения, две плашечные краски, зерно.
   Радиус 0 везде. Теней нет. Градиентов нет.
   ========================================================================== */

:root {
  --newsprint: #EDE9E1;
  --sheet:     #F6F4EF;
  --ink:       #171613;
  --ink-mid:   #6E6A62;
  --ink-faint: #A8A399;
  --rule:      #D6D1C6;
  --violet:    #4B3FA6;   /* краска №1 — бывший неоновый акцент, теперь плашка */
  --flame:     #D2522B;   /* краска №2 — меняется на #2E6E9E для ceramic-варианта */
  --night:     #12110F;
  --night-2:   #1A1916;

  /* Golos Text в стеке обязателен: Space Grotesk кириллицы не имеет,
     и без него заголовки рисует системный шрифт устройства — разный
     на Windows, Android и iOS. Обводка у «прибыли» это показывала швами. */
  --disp: 'Space Grotesk', 'Golos Text', system-ui, sans-serif;   /* логотип сохранён */
  --sans: 'Golos Text', -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  --t-lab:  10px;
  --t-sm:   14px;
  --t-md:   16px;
  --t-lede: clamp(17px, 1.5vw, 21px);
  --t-h3:   clamp(19px, 1.8vw, 26px);
  --t-h2:   clamp(30px, 4.4vw, 68px);
  --t-h1:   clamp(44px, 11.5vw, 190px);

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 140px;

  --max: 1560px;
  --pad: 36px;
  --gap: 24px;

  --fast: 100ms; --base: 200ms; --slow: 380ms;
  --ease: cubic-bezier(0.22, 0, 0, 1);
}
@media (max-width: 760px) { :root { --pad: 18px; --gap: 14px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--newsprint);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, p, dl, dd, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--violet); color: var(--newsprint); }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }

.shell { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }

.lab {
  font-family: var(--mono);
  font-size: var(--t-lab);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  line-height: 1.4;
}
em { font-style: normal; color: var(--violet); }

/* ── бумага: два слоя ------------------------------------------------
   1) мелкое зерно — «шум» печати, даёт шероховатость на просвет
   2) волокно — крупная неравномерность тона, как у газетной бумаги
   Оба слоя в multiply, поэтому работают только по светлому; тёмная секция
   получает своё зерно локально (.work::after), иначе она осталась бы стерильной. */
.grain {
  position: fixed; inset: -50%;
  z-index: 9998; pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.11;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 150px 150px;
}
.grain--fiber {
  opacity: 0.16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.05' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='700' height='700' filter='url(%23f)'/%3E%3C/svg%3E");
  background-size: 700px 700px;
}

/* ── метки совмещения ------------------------------------------------ */
.cross { position: absolute; width: 13px; height: 13px; pointer-events: none; }
.cross::before, .cross::after { content: ''; position: absolute; background: var(--ink-faint); }
.cross::before { left: 6px; top: 0; width: 1px; height: 13px; }
.cross::after { top: 6px; left: 0; height: 1px; width: 13px; }
.cross--tl { top: 18px; left: 18px; }
.cross--tr { top: 18px; right: 18px; }
.cross--bl { bottom: 18px; left: 18px; }
.cross--br { bottom: 18px; right: 18px; }

/* ── маркер концепта — в продакшн не уезжает ------------------------- */
.stage {
  position: fixed; right: 0; bottom: 0; z-index: 9997;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-faint); background: var(--newsprint);
  border-top: 1px solid var(--rule); border-left: 1px solid var(--rule);
  padding: 6px 11px;
}

/* ============================================================  ЛОАДЕР */
.loader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--newsprint);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s5);
  transition: opacity var(--slow) var(--ease), visibility var(--slow) var(--ease);
}
.loader.is-done { opacity: 0; visibility: hidden; }
.loader__mark {
  font-family: var(--disp); font-weight: 700;
  font-size: clamp(26px, 6vw, 58px); letter-spacing: -0.03em;
}
.loader__mark span { color: var(--flame); }
.loader__bar { width: min(320px, 62vw); height: 1px; background: var(--rule); }
.loader__bar i { display: block; height: 100%; width: 0; background: var(--violet); }
.loader__pct {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.3em;
  font-variant-numeric: tabular-nums; color: var(--ink-mid);
}
.loader__meta {
  position: absolute; left: 0; right: 0; bottom: 22px;
  display: flex; justify-content: space-between; padding: 0 var(--pad);
  font-family: var(--mono); font-size: var(--t-lab);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint);
}

/* ============================================================== ШАПКА */
.head {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--newsprint) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.head__in { display: flex; align-items: center; gap: var(--s7); height: 62px; }
.logo {
  font-family: var(--disp); font-weight: 700;
  font-size: 19px; letter-spacing: -0.02em; white-space: nowrap;
}
.logo span { color: var(--flame); }
.nav { display: flex; gap: var(--s6); margin-right: auto; }
.nav a {
  font-family: var(--mono); font-size: var(--t-lab);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mid);
  padding: 3px 0; border-bottom: 1px solid transparent;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--violet); }

/* «Прайс» — единственный пункт меню, помеченный краской: он ведёт на страницу,
   которую посетитель ищет глазами, и в ряду одинаковых серых меток теряется. */
.nav a.is-mark { color: var(--violet); }
.nav a.is-mark:hover { color: var(--violet); border-bottom-color: var(--violet); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: var(--t-lab);
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 11px 18px; border: 1px solid var(--ink);
  transition: background var(--base) var(--ease), color var(--base) var(--ease),
              border-color var(--base) var(--ease);
}
.btn:hover { background: var(--ink); color: var(--newsprint); }
.btn--ink { background: var(--violet); border-color: var(--violet); color: var(--newsprint); }
.btn--ink:hover { background: var(--ink); border-color: var(--ink); }

.nav i { display: none; }
.nav__cta { display: none; }

.burger { display: none; width: 36px; height: 36px; border: 1px solid var(--ink); position: relative; }
.burger span {
  position: absolute; left: 9px; width: 16px; height: 1px; background: var(--ink);
  transition: transform var(--base) var(--ease), opacity var(--fast) var(--ease);
}
.burger span:first-child { top: 15px; }
.burger span:last-child { top: 20px; }
.burger[aria-expanded='true'] span:first-child { transform: translateY(2.5px) rotate(45deg); }
.burger[aria-expanded='true'] span:last-child { transform: translateY(-2.5px) rotate(-45deg); }

@media (max-width: 1000px) {
  /* backdrop-filter делает шапку containing block для position:fixed внутри неё —
     панель меню обрезалась бы по высоте шапки. На мобильном блюр не нужен. */
  .head { backdrop-filter: none; background: var(--newsprint); }
  .head__cta { display: none; }
  .burger { display: block; margin-left: auto; }
  .head__in { gap: var(--s4); }

  /* мобильное меню — лист бумаги на весь экран, а не выпадашка */
  .nav {
    position: fixed; inset: 62px 0 0; z-index: 55;
    display: grid; align-content: start;
    gap: 0; margin: 0;
    background: var(--newsprint);
    border-top: 1px solid var(--rule);
    padding: var(--s5) var(--pad) var(--s8);
    transform: translateY(-8px);
    opacity: 0; visibility: hidden;
    transition: opacity var(--base) var(--ease), transform var(--base) var(--ease),
                visibility var(--base) var(--ease);
    overflow-y: auto;
  }
  .nav[data-open] { opacity: 1; visibility: visible; transform: none; }
  .nav a {
    display: flex; align-items: baseline; gap: var(--s4);
    font-family: var(--disp); font-weight: 700;
    font-size: clamp(26px, 8vw, 40px); letter-spacing: -0.035em; text-transform: uppercase;
    color: var(--ink);
    padding: var(--s4) 0; border-bottom: 1px solid var(--rule);
  }
  .nav a:hover { border-bottom-color: var(--rule); }
  /* .nav a задаёт color: var(--ink) внутри медиазапроса и перебивает .is-mark
     по порядку каскада — метку приходится повторить здесь. */
  .nav a.is-mark { color: var(--violet); }
  .nav i {
    display: block;
    font-family: var(--mono); font-style: normal; font-size: var(--t-lab);
    letter-spacing: 0.16em; color: var(--ink-faint);
  }
  .nav__cta {
    display: inline-flex; justify-self: start;
    margin-top: var(--s6); border-bottom: 0 !important;
    font-family: var(--mono) !important; font-size: var(--t-lab) !important;
    letter-spacing: 0.16em !important; text-transform: uppercase;
    color: var(--newsprint) !important;
  }
  body[data-lock] { overflow: hidden; }
}

/* =============================================================== АФИША */
.hero { position: relative; padding: var(--s8) 0 var(--s9); }
.hero__rail {
  display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap;
  padding-bottom: var(--s6);
  font-family: var(--mono); font-size: var(--t-lab);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint);
  border-bottom: 1px solid var(--rule);
}
.hero__rail .is-ink { color: var(--flame); }

.hero__t {
  font-family: var(--disp); font-weight: 700;
  font-size: var(--t-h1); line-height: 0.85; letter-spacing: -0.045em;
  text-transform: uppercase;
  padding: var(--s7) 0 var(--s6);
  display: grid; gap: 0;
}
.hero__t span { display: block; }
.hero__t .is-outline {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ink);
  text-stroke: 1.5px var(--ink);
}
@media (max-width: 700px) { .hero__t .is-outline { -webkit-text-stroke-width: 1px; } }

.hero__b {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap);
  align-items: end;
  padding-bottom: var(--s8);
}
.hero__lede { grid-column: 1 / span 6; font-size: var(--t-lede); color: var(--ink-mid); max-width: 52ch; }
.hero__act { grid-column: 9 / span 4; display: flex; gap: var(--s3); justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 900px) {
  .hero__lede, .hero__act { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ── шильдик акции ─────────────────────────────────────────────────────
   Газетная врезка: на широком экране — в пустой правой части афиши,
   на одном уровне с заголовком; на узком — в потоке под кнопками.
   Акцент — контраст размеров (метка 10 px против цены 64 px), без теней
   и градиентов; кресты по углам — те же метки совмещения, что у афиши. */
.hero .shell { position: relative; }
.offer {
  grid-column: 1 / -1; justify-self: start; width: 100%; max-width: 420px; margin-top: var(--s4);
  position: relative; display: block; text-decoration: none; color: var(--ink);
  background: var(--sheet); border: 1px solid var(--ink); padding: 22px 24px 24px;
  transition: transform var(--base) var(--ease);
}
.offer:hover { transform: translateY(-3px); }
.offer::before, .offer::after { content: '+'; position: absolute; font: 400 14px/1 var(--mono); color: var(--ink-faint); }
.offer::before { left: -18px; top: -18px; }
.offer::after { right: -18px; bottom: -18px; }
.offer__lab { display: block; font: 500 var(--t-lab)/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--flame); }
.offer__k { display: block; margin-top: 18px; font: 500 13px/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mid); }
.offer__n { display: block; margin-top: 6px; font: 700 64px/0.92 var(--disp); letter-spacing: -0.045em; white-space: nowrap; }
.offer__n small { font-size: 0.42em; letter-spacing: -0.02em; vertical-align: 0.9em; margin-right: 6px; }
.offer__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 15px; }
.offer__row b { font: 500 13px/1 var(--mono); color: var(--violet); white-space: nowrap; }
.offer__go {
  display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding: 14px 16px;
  background: var(--ink); color: var(--newsprint);
  font: 500 11px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase;
  transition: background var(--base) var(--ease);
}
.offer:hover .offer__go { background: var(--violet); }
@media (min-width: 1181px) {
  .offer { position: absolute; right: var(--pad); top: 118px; width: 340px; margin: 0; z-index: 3; }
}
@media (max-width: 420px) {
  .offer::before, .offer::after { display: none; }
  .offer__n { font-size: 52px; }
}

.specs { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rule); }
.specs > div { padding: var(--s5) var(--s5) var(--s5) 0; border-right: 1px solid var(--rule); }
.specs > div:last-child { border-right: 0; }
.specs > div:not(:first-child) { padding-left: var(--s5); }
.specs dt {
  font-family: var(--mono); font-size: var(--t-lab);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint);
}
.specs dd {
  font-family: var(--disp); font-weight: 700;
  font-size: clamp(20px, 2.4vw, 34px); letter-spacing: -0.03em; text-transform: uppercase;
  margin-top: var(--s3);
}
.specs dd i { font-style: normal; color: var(--flame); }
@media (max-width: 780px) {
  .specs { grid-template-columns: repeat(2, 1fr); }
  .specs > div { border-bottom: 1px solid var(--rule); }
  .specs > div:nth-child(2n) { border-right: 0; }
  .specs > div:nth-child(2n+1) { padding-left: 0; }
  .specs > div:nth-child(2n) { padding-left: var(--s5); }
}

/* ====================================================== БЕГУЩАЯ СТРОКА */
.ticker {
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  overflow: hidden; background: var(--sheet);
}
.ticker__t {
  display: flex; align-items: center; gap: var(--s5);
  padding: 13px 0; white-space: nowrap;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  animation: run 46s linear infinite;
}
.ticker__t i { color: var(--flame); font-style: normal; }
/* сдвиг задаёт скрипт — ровно на ширину одной копии содержимого */
@keyframes run { from { transform: translateX(0); } to { transform: translateX(var(--shift, -50%)); } }

/* ============================================================== СЕКЦИИ */
.section { padding: var(--s10) 0; }
.section--rule { border-top: 1px solid var(--rule); }
@media (max-width: 760px) { .section { padding: var(--s8) 0; } }

.sechead {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap);
  align-items: end; padding-bottom: var(--s7);
  border-bottom: 1px solid var(--rule);
}
.sechead .lab { grid-column: 1 / span 2; }
.sechead__t {
  grid-column: 3 / span 6;
  font-family: var(--disp); font-weight: 700;
  font-size: var(--t-h2); line-height: 0.94; letter-spacing: -0.04em; text-transform: uppercase;
}
.sechead__a { grid-column: 10 / span 3; font-size: var(--t-sm); color: var(--ink-mid); }
.sechead__link {
  display: block; margin-top: var(--s3);
  font-family: var(--mono); font-size: var(--t-lab);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink);
  border-bottom: 1px solid var(--rule); padding-bottom: 3px; width: max-content;
  transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.sechead__link:hover { color: var(--flame); border-bottom-color: var(--flame); }
@media (max-width: 1000px) {
  .sechead { grid-template-columns: 1fr; gap: var(--s4); }
  .sechead .lab, .sechead__t, .sechead__a { grid-column: auto; }
}

/* ── принципы: ячейки с общей границей (ChainGPT) --------------------- */
.cells { display: grid; grid-template-columns: repeat(4, 1fr); }
.cell {
  padding: var(--s6) var(--s5) var(--s8);
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  position: relative;
  transition: background var(--base) var(--ease);
}
.cell:last-child { border-right: 0; }
.cell:hover { background: var(--sheet); }
.cell h3 {
  font-family: var(--disp); font-weight: 700; font-size: var(--t-h3);
  letter-spacing: -0.03em; line-height: 1.02; text-transform: uppercase;
  margin: var(--s5) 0 var(--s4);
}
.cell p:last-child { font-size: var(--t-sm); color: var(--ink-mid); }
.cell::after {
  content: ''; position: absolute; right: -1px; bottom: -1px;
  width: 7px; height: 7px; background: var(--flame);
  opacity: 0; transition: opacity var(--base) var(--ease);
}
.cell:hover::after { opacity: 1; }
@media (max-width: 1000px) { .cells { grid-template-columns: repeat(2, 1fr); } .cell:nth-child(2n) { border-right: 0; } }
@media (max-width: 620px)  { .cells { grid-template-columns: 1fr; } .cell { border-right: 0; } }

/* ── услуги: таблица строк, инверсия при наведении -------------------- */
.svc { padding-top: var(--s2); }
/* строка целиком — ссылка: кликается любая точка, а не только заголовок */
.svc__i > a {
  display: grid; grid-template-columns: 92px minmax(0, 1fr) minmax(0, 1.05fr) 44px;
  gap: var(--s5); align-items: baseline;
  padding: var(--s6) var(--s4);
  margin: 0 calc(var(--s4) * -1);
  border-bottom: 1px solid var(--rule);
  transition: background var(--base) var(--ease), color var(--base) var(--ease);
}
.svc__n { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; color: var(--ink-faint); }
.svc__i h3 {
  font-family: var(--disp); font-weight: 700;
  font-size: clamp(20px, 2vw, 30px); letter-spacing: -0.035em; line-height: 1.04;
  text-transform: uppercase;
}
.svc__i p { font-size: var(--t-sm); color: var(--ink-mid); }
.svc__go { justify-self: end; font-family: var(--mono); color: var(--ink-faint); }
.svc__i > a:hover { background: var(--ink); color: var(--newsprint); }
.svc__i > a:hover .svc__n, .svc__i > a:hover p { color: color-mix(in srgb, var(--newsprint) 70%, transparent); }
.svc__i > a:hover .svc__go { color: var(--flame); }
.svc__all { margin-top: var(--s6); }
@media (max-width: 900px) {
  .svc__i > a { grid-template-columns: 56px 1fr; gap: var(--s3) var(--s4); }
  .svc__i p { grid-column: 2; }
  .svc__go { display: none; }
}

/* ── работы: единственная инверсия ------------------------------------ */
.work {
  background: var(--night); color: var(--newsprint);
  padding: var(--s10) 0; position: relative; overflow: hidden;
}
/* своё зерно для инвертированной секции: multiply по чёрному не читается */
.work::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  opacity: 0.14;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 150px 150px;
}
.work > .shell { position: relative; z-index: 1; }
.work .lab { color: #6E6A62; }
.sechead--night { border-bottom-color: rgba(237, 233, 225, 0.16); }
.work .sechead__a { color: #9A958C; }

.chips { display: flex; gap: var(--s2); flex-wrap: wrap; padding: var(--s6) 0; }
.chip {
  font-family: var(--mono); font-size: var(--t-lab);
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 8px 13px; border: 1px solid rgba(237, 233, 225, 0.2); color: #9A958C;
  display: inline-flex; gap: 8px; align-items: baseline;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.chip i { font-style: normal; font-size: 9px; color: #57534C; }
.chip:hover { color: var(--newsprint); border-color: rgba(237, 233, 225, 0.45); }
.chip.is-on { background: var(--newsprint); color: var(--night); border-color: var(--newsprint); }
.chip.is-on i { color: var(--flame); }

.works { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s7) var(--gap); }
.w { grid-column: span 3; }
.w--lg { grid-column: span 6; }
.w[hidden] { display: none; }
.w__img {
  position: relative;
  aspect-ratio: 4 / 5;
  border: 1px solid rgba(237, 233, 225, 0.18);
  background: var(--night-2);
  display: grid; place-items: center;
  overflow: hidden;
  transition: border-color var(--base) var(--ease);
}
.w--lg .w__img { aspect-ratio: 16 / 10; }
.w__img::before, .w__img::after {
  content: ''; position: absolute; background: rgba(237, 233, 225, 0.12);
}
.w__img::before { left: 0; right: 0; top: 50%; height: 1px; }
.w__img::after { top: 0; bottom: 0; left: 50%; width: 1px; }
.w:hover .w__img { border-color: var(--flame); }

/* Обложка проекта. Порядок слоёв снизу вверх:
   фото → потёртость → визирные линии → метка слота.
   Фото никогда не перекрывает разметку — оно под ней, как под калькой. */
.w__ph {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
}
.w__wear {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23w)'/%3E%3C/svg%3E");
  background-size: 190px 190px;
}
.w__img::before, .w__img::after { z-index: 2; }
.w__img .lab { position: relative; z-index: 3; background: var(--night-2); padding: 4px 8px; }
/* когда обложка есть, метка садится в угол и не занимает центр */
.has-ph { display: block; }
.has-ph .lab { position: absolute; left: 0; bottom: 0; background: var(--night); }
.w__m { padding-top: var(--s4); display: grid; gap: 5px; }
.w__m h3 {
  font-family: var(--disp); font-weight: 700; font-size: var(--t-h3);
  letter-spacing: -0.03em; text-transform: uppercase;
}
.w__d { font-size: var(--t-sm); color: #9A958C; }
.work__note { padding-top: var(--s8); max-width: 62ch; }
@media (max-width: 1100px) { .w { grid-column: span 4; } .w--lg { grid-column: span 8; } }
@media (max-width: 820px)  { .w { grid-column: span 6; } .w--lg { grid-column: span 12; } }
@media (max-width: 520px)  { .w, .w--lg { grid-column: span 12; } }

/* ── стандарты: чек-лист в две колонки --------------------------------
   Не карточки: пункты разделены только линейкой сверху, номер вынесен
   в поле. Так десять позиций читаются списком, а не стеной блоков. */
.std {
  display: grid; grid-template-columns: repeat(2, 1fr);
  column-gap: var(--s9);
  padding-top: var(--s6);
}
.std__i {
  display: grid; grid-template-columns: 44px 1fr; gap: var(--s2) var(--s4);
  align-content: start;
  padding: var(--s5) var(--s4) var(--s6) 0;
  border-top: 1px solid var(--rule);
  position: relative;
  transition: background var(--base) var(--ease), padding-left var(--base) var(--ease);
}
.std__i:hover { background: var(--sheet); padding-left: var(--s3); }
.std__n {
  font-family: var(--mono); font-size: var(--t-lab);
  letter-spacing: 0.16em; color: var(--ink-faint);
  padding-top: 3px;
}
.std__i h3 {
  font-family: var(--disp); font-weight: 700;
  font-size: clamp(16px, 1.4vw, 20px); letter-spacing: -0.025em;
  text-transform: uppercase; line-height: 1.1;
}
.std__i p { grid-column: 2; font-size: var(--t-sm); color: var(--ink-mid); max-width: 46ch; }
/* киноварная метка — тот же приём, что в ячейках «Почему выбирают нас» */
.std__i::after {
  content: ''; position: absolute; left: 0; top: -1px;
  width: 22px; height: 1px; background: var(--flame);
  opacity: 0; transition: opacity var(--base) var(--ease);
}
.std__i:hover::after { opacity: 1; }
@media (max-width: 900px) {
  .std { grid-template-columns: 1fr; column-gap: 0; }
  .std__i { padding-bottom: var(--s5); }
}

/* ── контакт ---------------------------------------------------------- */
.cta {
  position: relative; overflow: hidden;
  border-top: 1px solid var(--ink); padding: var(--s10) 0; background: var(--sheet);
}
/* ── контакты: текст слева, форма справа ------------------------------ */
.cta__grid {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s8) var(--gap);
  position: relative; z-index: 1;
}
.cta__left { grid-column: 1 / span 6; display: grid; gap: var(--s5); align-content: start; }
.cta__right { grid-column: 8 / span 5; }
@media (max-width: 1000px) { .cta__left, .cta__right { grid-column: 1 / -1; } }

/* ── контактные строки ------------------------------------------------ */
.contacts { display: grid; margin-top: var(--s3); }
.contacts li { border-top: 1px solid var(--rule); }
.contacts li:last-child { border-bottom: 1px solid var(--rule); }
.contacts a {
  display: grid; grid-template-columns: 22px 96px 1fr; gap: var(--s4);
  align-items: center; padding: var(--s4) var(--s3) var(--s4) 0;
  transition: background var(--base) var(--ease), padding-left var(--base) var(--ease);
}
.contacts a:hover { background: var(--sheet); padding-left: var(--s3); }
.contacts svg { width: 18px; height: 18px; fill: var(--ink); transition: fill var(--fast) var(--ease); }
.contacts a:hover svg { fill: var(--flame); }
.contacts span {
  font-family: var(--mono); font-size: var(--t-lab);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint);
}
.contacts i { font-style: normal; font-size: var(--t-md); }
@media (max-width: 520px) {
  .contacts a { grid-template-columns: 22px 1fr; gap: var(--s2) var(--s3); }
  .contacts span, .contacts i { grid-column: 2; }
}

/* ── форма заявки ----------------------------------------------------- */
.form {
  display: grid; gap: var(--s5);
  border: 1px solid var(--ink); background: var(--sheet);
  padding: var(--s6);
  position: relative;
}
.form__lab { color: var(--flame); }
.field { display: grid; gap: 6px; }
.field__lab {
  font-family: var(--mono); font-size: var(--t-lab);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mid);
}
.field__lab i { font-style: normal; color: var(--flame); }
.field input, .field textarea {
  font-family: var(--sans); font-size: var(--t-md); color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--rule);
  padding: 10px 0; width: 100%; resize: vertical;
  transition: border-color var(--fast) var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--ink); }
.field.is-bad input, .field.is-bad textarea { border-bottom-color: var(--flame); }
.field__err { font-family: var(--mono); font-size: var(--t-lab); letter-spacing: 0.06em; color: var(--flame); }
.field__err[hidden] { display: none; }

.form__go { display: grid; gap: var(--s4); justify-items: start; }
.form__note { font-size: var(--t-sm); color: var(--ink-mid); max-width: 44ch; }
.form__note a { border-bottom: 1px solid var(--rule); }
.form__note a:hover { border-bottom-color: var(--ink); }

/* успех подменяет форму, а не всплывает поверх */
.form__ok {
  position: absolute; inset: 0; display: grid; align-content: center; gap: var(--s3);
  background: var(--sheet); padding: var(--s6);
}
.form__ok[hidden] { display: none; }
.form__ok .lab { color: var(--flame); }
.form__ok p { font-family: var(--disp); font-weight: 700; font-size: var(--t-h3); letter-spacing: -0.02em; }
.cta__t {
  font-family: var(--disp); font-weight: 700;
  font-size: clamp(38px, 8vw, 116px); line-height: 0.86; letter-spacing: -0.045em;
  text-transform: uppercase;
}
.cta__d { font-size: var(--t-lede); color: var(--ink-mid); max-width: 46ch; }
.cta__act { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s3); }

/* ── подвал ----------------------------------------------------------- */
.foot { border-top: 1px solid var(--rule); padding: var(--s7) 0 var(--s5); overflow: hidden; }

.foot__cols {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6) var(--gap);
  padding-bottom: var(--s7);
}
.foot__req { margin-top: var(--s3); font-size: var(--t-sm); color: var(--ink-mid); line-height: 1.9; }
.foot__req a { border-bottom: 1px solid var(--rule); }
.foot__req a:hover { color: var(--ink); border-bottom-color: var(--flame); }
@media (max-width: 760px) { .foot__cols { grid-template-columns: 1fr; } }

/* ── cookie ----------------------------------------------------------- */
.cookie {
  position: fixed; left: var(--pad); right: var(--pad); bottom: var(--pad); z-index: 80;
  max-width: 700px;
  display: grid; gap: var(--s4);
  background: var(--newsprint); border: 1px solid var(--ink);
  padding: var(--s5);
}
.cookie[hidden] { display: none; }
.cookie p { font-size: var(--t-sm); color: var(--ink-mid); }
.cookie a { color: var(--ink); border-bottom: 1px solid var(--rule); }
.cookie a:hover { border-bottom-color: var(--flame); }
.cookie__act { display: flex; gap: var(--s3); flex-wrap: wrap; }
.foot__rail {
  display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap;
  font-family: var(--mono); font-size: var(--t-lab);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint);
  padding-bottom: var(--s6);
}
.foot__mark {
  font-family: var(--disp); font-weight: 700;
  font-size: clamp(52px, 15.5vw, 260px); line-height: 0.78; letter-spacing: -0.05em;
  color: transparent; -webkit-text-stroke: 1px var(--rule);
  white-space: nowrap;
}
.foot__mark span { color: var(--flame); -webkit-text-stroke: 0; }

/* ── моушен ----------------------------------------------------------- */
.js .reveal { opacity: 0; transform: translateY(12px); }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
  transition-delay: calc(var(--d, 0) * 60ms);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; }
  .ticker__t { animation: none; }
  *, *::before, *::after { transition-duration: 0.001ms !important; }
}

/* ============================================================ СТРАНИЦЫ УСЛУГ
   Новый тип страницы: /services и /services/*. Никаких новых приёмов —
   те же линейки, тот же моно 10 px, радиус 0. Отличие одно: у услуги
   заголовок в одну строку, поэтому он мельче афиши главной. */

/* ── хлебные крошки ─────────────────────────────────────────────────── */
.crumbs {
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  padding-bottom: var(--s5);
  font-family: var(--mono); font-size: var(--t-lab);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint);
}
.crumbs a { border-bottom: 1px solid transparent; transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.crumbs a:hover { color: var(--ink); border-bottom-color: var(--violet); }
.crumbs i { font-style: normal; color: var(--rule); }
.crumbs [aria-current] { color: var(--ink-mid); }

/* ── первый экран услуги ────────────────────────────────────────────── */
.srvhero { position: relative; padding: var(--s7) 0 var(--s9); }
.srvhero__t {
  font-family: var(--disp); font-weight: 700;
  font-size: clamp(38px, 7.2vw, 118px); line-height: 0.9; letter-spacing: -0.045em;
  text-transform: uppercase;
  padding: var(--s7) 0 var(--s6);
  max-width: 18ch;
}
.srvhero__b {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap);
  align-items: end; border-top: 1px solid var(--rule); padding-top: var(--s6);
}
.srvhero__lede { grid-column: 1 / span 6; font-size: var(--t-lede); color: var(--ink-mid); max-width: 52ch; }
.srvhero__act { grid-column: 9 / span 4; display: flex; gap: var(--s3); justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 900px) {
  .srvhero__lede, .srvhero__act { grid-column: 1 / -1; justify-content: flex-start; }
  .srvhero__b { gap: var(--s6); }
}

/* вводные абзацы: колонка текста, а не полоса во всю ширину сетки */
.srvintro { display: grid; gap: var(--s5); max-width: 68ch; font-size: var(--t-lede); color: var(--ink-mid); }
.srvintro p { margin: 0; }

/* ── состав работ ───────────────────────────────────────────────────── */
.feat { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); }
.feat__i {
  display: grid; gap: var(--s3); align-content: start;
  padding: var(--s6) var(--s5) var(--s7) 0;
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  min-width: 0;
}
.feat__i:nth-child(3n) { border-right: 0; }
.feat__i:not(:nth-child(3n+1)) { padding-left: var(--s5); }
.feat__n { font-family: var(--mono); font-size: var(--t-lab); letter-spacing: 0.16em; color: var(--flame); }
.feat__i h3 { font-family: var(--disp); font-weight: 700; font-size: var(--t-h3); letter-spacing: -0.03em; }
.feat__i p { font-size: var(--t-sm); color: var(--ink-mid); }
@media (max-width: 900px) {
  .feat { grid-template-columns: 1fr; }
  .feat__i { border-right: 0; padding: var(--s5) 0 !important; }
}

/* ── порядок работы: нумерованная лента ─────────────────────────────── */
.flow { display: grid; border-top: 1px solid var(--ink); }
.flow__i {
  display: grid; grid-template-columns: 88px minmax(0, 22ch) minmax(0, 1fr);
  gap: var(--s5); align-items: baseline;
  padding: var(--s5) 0; border-bottom: 1px solid var(--rule);
  transition: background var(--base) var(--ease), padding-left var(--base) var(--ease);
}
.flow__i:hover { background: var(--sheet); padding-left: var(--s3); }
.flow__n { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; color: var(--ink-faint); }
.flow__i h3 { font-family: var(--disp); font-weight: 700; font-size: var(--t-h3); letter-spacing: -0.03em; }
.flow__i p { font-size: var(--t-sm); color: var(--ink-mid); max-width: 62ch; }
@media (max-width: 820px) {
  .flow__i { grid-template-columns: 44px 1fr; gap: var(--s3) var(--s4); }
  .flow__i p { grid-column: 2; }
}

/* ── цены на странице услуги ────────────────────────────────────────── */
.srv__note { margin-top: var(--s4); font-size: var(--t-sm); color: var(--ink-mid); max-width: 78ch; }
.srv__note a { border-bottom: 1px solid var(--rule); }
.srv__note a:hover { border-bottom-color: var(--flame); }

/* ── работы внутри услуги: три карточки, без фильтра ────────────────── */
.srvwork { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s7) var(--gap); }
.srvwork__i { display: grid; gap: 5px; align-content: start; min-width: 0; }
.srvwork__i h3 { font-family: var(--disp); font-weight: 700; font-size: var(--t-h3); letter-spacing: -0.03em; }
.srvwork__i .w__img { margin-bottom: var(--s4); }
@media (max-width: 820px) { .srvwork { grid-template-columns: 1fr; } }

/* ── вопросы ────────────────────────────────────────────────────────── */
.faq { border-top: 1px solid var(--ink); }
.faq__i { border-bottom: 1px solid var(--rule); }
.faq__i summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s5);
  padding: var(--s5) 0; cursor: pointer; list-style: none;
  font-family: var(--disp); font-weight: 700; font-size: var(--t-h3); letter-spacing: -0.03em;
  transition: color var(--fast) var(--ease);
}
.faq__i summary::-webkit-details-marker { display: none; }
.faq__i summary:hover { color: var(--violet); }
.faq__i summary i {
  font-family: var(--mono); font-style: normal; font-size: 18px; color: var(--ink-faint);
  transition: transform var(--base) var(--ease), color var(--fast) var(--ease);
}
.faq__i[open] summary i { transform: rotate(45deg); color: var(--flame); }
.faq__i p { padding: 0 0 var(--s5); font-size: var(--t-md); color: var(--ink-mid); max-width: 78ch; }

/* ── смежные услуги / список услуг ──────────────────────────────────── */
.rel { display: grid; border-top: 1px solid var(--ink); }
.rel a {
  display: grid; grid-template-columns: 88px minmax(0, 26ch) minmax(0, 1fr);
  gap: var(--s5); align-items: baseline;
  padding: var(--s5) 0; border-bottom: 1px solid var(--rule);
  transition: background var(--base) var(--ease), padding-left var(--base) var(--ease);
}
.rel a:hover { background: var(--sheet); padding-left: var(--s3); }
.rel i { font-family: var(--mono); font-style: normal; font-size: 12px; letter-spacing: 0.16em; color: var(--ink-faint); }
.rel b { font-family: var(--disp); font-weight: 700; font-size: var(--t-h3); letter-spacing: -0.03em; }
.rel span { font-size: var(--t-sm); color: var(--ink-mid); }
.rel--wide a { grid-template-columns: 88px minmax(0, 26ch) minmax(0, 1fr) 150px; }
.rel em {
  font-style: normal; text-align: right; white-space: nowrap;
  font-family: var(--mono); font-size: var(--t-sm); font-variant-numeric: tabular-nums;
  color: var(--violet);
}
@media (max-width: 900px) {
  .rel a, .rel--wide a { grid-template-columns: 44px 1fr; gap: var(--s2) var(--s4); }
  .rel span, .rel em { grid-column: 2; text-align: left; }
  /* списки статей: рубрика — слово, а не двузначный номер, в колонку 44px не помещается */
  .rel--art a { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
  .rel--art span { grid-column: 1; }
}

/* ── реестр цен ─────────────────────────────────────────────────────────
   Переехал сюда из price.css: та же таблица нужна на страницах услуг,
   а price.css они не подключают. */
.ptab { width: 100%; border-collapse: collapse; }
.ptab + .ptab { margin-top: var(--s6); }
.ptab tr { transition: background var(--base) var(--ease); }
.ptab tr:hover { background: var(--sheet); }
.ptab td {
  padding: var(--s4) var(--s3);
  border-bottom: 1px solid var(--rule);
  vertical-align: baseline;
}
.ptab td:first-child { padding-left: 0; font-size: var(--t-md); }
.ptab td:last-child {
  padding-right: 0; text-align: right; white-space: nowrap;
  font-family: var(--mono); font-size: var(--t-sm); font-variant-numeric: tabular-nums;
}
.ptab tr.is-key td:last-child { color: var(--violet); font-weight: 500; }
.ptab tr.is-new td:first-child::after {
  content: 'НОВОЕ'; margin-left: var(--s3);
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em;
  color: var(--flame); vertical-align: 2px;
}
@media (max-width: 620px) {
  .ptab td { display: block; border-bottom: 0; padding: 0; }
  .ptab td:first-child { padding-top: var(--s4); }
  .ptab td:last-child { text-align: left; padding-bottom: var(--s4); border-bottom: 1px solid var(--rule); color: var(--ink-mid); }
}

/* ── липкая панель связи (только мобильный) ─────────────────────────────
   Заявка и телефон не должны требовать скролла в конец страницы:
   на длинной странице услуги это основной путь к обращению. */
.dock { display: none; }
@media (max-width: 760px) {
  .dock {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: grid; grid-template-columns: repeat(3, 1fr);
    background: var(--newsprint); border-top: 1px solid var(--ink);
  }
  .dock a {
    padding: 13px 6px; text-align: center;
    font-family: var(--mono); font-size: var(--t-lab);
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink);
    border-right: 1px solid var(--rule);
  }
  .dock a:last-child { border-right: 0; }
  .dock__cta { background: var(--violet); color: var(--newsprint); }
  /* иначе панель перекрывает последние строки футера и баннер cookie */
  .foot { padding-bottom: 66px; }
  .cookie { bottom: 46px; }
}

/* подпись под колонками футера (собираемые страницы) */
.foot__note { margin: var(--s5) 0 0; font-size: var(--t-sm); color: var(--ink-faint); }

/* поле-ловушка для роботов: убрано из потока и от экранных дикторов,
   но остаётся в разметке — робот его видит и заполняет */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ==================================================================== БЛОГ
   Статья — единственное место на сайте, где текст читают подряд, а не
   сканируют. Поэтому здесь одна колонка, увеличенный кегль и интерлиньяж,
   а не сетка из двенадцати колонок. Всё остальное — та же система. */

/* ── список статей ──────────────────────────────────────────────────── */
.posts { display: grid; border-top: 1px solid var(--ink); }
.post a {
  display: grid; grid-template-columns: 88px minmax(0, 1fr) 150px;
  gap: var(--s5); align-items: baseline;
  padding: var(--s6) 0; border-bottom: 1px solid var(--rule);
  transition: background var(--base) var(--ease), padding-left var(--base) var(--ease);
}
.post a:hover { background: var(--sheet); padding-left: var(--s3); }
.post__n { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; color: var(--ink-faint); }
.post__m { display: grid; gap: var(--s3); min-width: 0; }
.post__rub {
  font-family: var(--mono); font-size: var(--t-lab); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--flame);
}
.post__m h2 {
  font-family: var(--disp); font-weight: 700;
  font-size: clamp(21px, 2.2vw, 32px); letter-spacing: -0.035em; line-height: 1.06;
  max-width: 24ch;
}
.post__m p { font-size: var(--t-sm); color: var(--ink-mid); max-width: 62ch; }
.post__d {
  display: grid; gap: 4px; justify-items: end; text-align: right;
  font-family: var(--mono); font-size: var(--t-lab);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint);
}
.post__d i { font-style: normal; }
@media (max-width: 900px) {
  .post a { grid-template-columns: 44px 1fr; gap: var(--s3) var(--s4); }
  .post__d { grid-column: 2; justify-items: start; text-align: left; flex-direction: row; }
}

/* ── статья ─────────────────────────────────────────────────────────── */
.art { padding: var(--s7) 0 var(--s9); }
/* колонка текста уже страницы: длинная строка не читается,
   оптимум для кириллицы — 60–75 знаков */
.art__shell { max-width: 1100px; }

.art__meta {
  display: flex; gap: var(--s5); flex-wrap: wrap; align-items: baseline;
  padding-bottom: var(--s5); border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: var(--t-lab);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint);
}
.art__rub { color: var(--flame); }

.art__t {
  font-family: var(--disp); font-weight: 700;
  font-size: clamp(32px, 5.2vw, 76px); line-height: 0.98; letter-spacing: -0.04em;
  padding: var(--s6) 0 var(--s5); max-width: 20ch;
}
.art__lede {
  font-size: clamp(19px, 1.9vw, 25px); line-height: 1.5; color: var(--ink-mid);
  max-width: 60ch; padding-bottom: var(--s7); border-bottom: 1px solid var(--ink);
}

.art__body { padding-top: var(--s7); max-width: 68ch; }
.art__body h2 {
  font-family: var(--disp); font-weight: 700;
  font-size: clamp(22px, 2.6vw, 34px); letter-spacing: -0.035em; line-height: 1.1;
  margin: var(--s8) 0 var(--s4);
}
.art__body h2:first-child { margin-top: 0; }
.art__body p { font-size: var(--t-md); line-height: 1.7; margin-bottom: var(--s4); }
.art__body b { font-weight: 600; }

.art__list { display: grid; gap: var(--s3); margin: var(--s4) 0 var(--s5); }
.art__list li {
  position: relative; padding-left: var(--s5);
  font-size: var(--t-md); line-height: 1.65;
}
/* маркер — короткая линейка, а не точка: тот же приём, что и в сетке */
.art__list li::before {
  content: ''; position: absolute; left: 0; top: 0.72em;
  width: 11px; height: 1px; background: var(--flame);
}

.art__tab { width: 100%; border-collapse: collapse; margin: var(--s5) 0 var(--s6); }
.art__tab td {
  padding: var(--s4) var(--s4) var(--s4) 0;
  border-bottom: 1px solid var(--rule); vertical-align: baseline;
  font-size: var(--t-sm); color: var(--ink-mid); line-height: 1.55;
}
.art__tab td:first-child {
  width: 34%; color: var(--ink); font-weight: 600; font-size: var(--t-md);
}
@media (max-width: 620px) {
  .art__tab td { display: block; padding: 0; border-bottom: 0; }
  .art__tab td:first-child { width: auto; padding-top: var(--s4); }
  .art__tab td:last-child { padding-bottom: var(--s4); border-bottom: 1px solid var(--rule); }
}

/* врезка — единственный блок статьи с заливкой */
.art__note {
  background: var(--sheet); border-left: 2px solid var(--flame);
  padding: var(--s5); margin: var(--s6) 0;
  font-size: var(--t-sm); color: var(--ink-mid); line-height: 1.6;
}

/* переход на услугу — ради него статья и существует */
.art__cta { margin: var(--s8) 0 0; max-width: 68ch; }
.art__go {
  display: grid; gap: 6px; margin-top: var(--s3);
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule);
  padding: var(--s5) 0;
  transition: background var(--base) var(--ease), padding-left var(--base) var(--ease);
}
.art__go:hover { background: var(--sheet); padding-left: var(--s3); }
.art__go b {
  font-family: var(--disp); font-weight: 700; font-size: var(--t-h3);
  letter-spacing: -0.03em;
}
.art__go span { font-size: var(--t-sm); color: var(--ink-mid); }

.art__faq { margin-top: var(--s9); max-width: 68ch; }
.art__faq h2, .art__rel h2 {
  font-family: var(--disp); font-weight: 700;
  font-size: clamp(22px, 2.6vw, 34px); letter-spacing: -0.035em;
  margin-bottom: var(--s5);
}
.art__rel { margin-top: var(--s9); }