/* TAMGARD PARTNERS — фирменный слой сайта.
   Источник: прототип UIkit 3 (встроенный <style> страниц), извлечён tools/theme.py.
   Порядок подключения: fonts → uikit → user.css (структурный слой шаблона) → этот файл.
   Руками не править: правки вносятся в прототип и переизвлекаются. */
/* ==========================================================================
   ТЕМА TAMGARD · слой 1 — токены, слой 2 — переопределения uk-*,
   слой 3 — свои компоненты с префиксом tm-.
   Контекстных правил вида «.блок .uk-компонент» нет.
   ========================================================================== */

/* ---------- 1. ТОКЕНЫ ---------- */
:root{
  /* палитра бука */
  --ink:#1A2A3A; --ink-2:#3A4A5A; --muted:#5F6B74;
  --paper:#F5F8FB; --white:#FFFFFF; --wash:#EAF1F8;
  --blue:#1E4E7A; --blue-dark:#163B5C; --blue-sky:#7FB4E4;
  --terra:#A85020; --terra-on-ink:#D98A5A;
  /* ступени грунта */
  --deep:#12202D; --surf-ink:#24384A; --surf-ink-2:#2C4457;
  /* роли на инверсии */
  --on-ink:#F5F8FB; --on-ink-dim:#AAC4DE;
  --on-ink-line:rgba(245,248,251,.18);
  --on-ink-line-2:rgba(245,248,251,.3);
  --on-ink-veil:rgba(245,248,251,.055);
  --line:rgba(26,42,58,.16); --line-2:rgba(26,42,58,.28);
  /* гарнитуры */
  --sans:'Noto Sans','Noto Sans SC',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --mono:'JetBrains Mono','Noto Sans SC',ui-monospace,'SFMono-Regular',Consolas,monospace;
  /* раскладка */
  --container-max:1360px;
  --container-edge:clamp(20px,4vw,56px);
  /* фирменные приёмы */
  --knife:64px;
  --kerege-step:46px;
  --kerege-ink:rgba(44,109,168,.13);
  --blind-fill:11px; --blind-gap:4px;
}

/* ---------- 2. ПЕРЕОПРЕДЕЛЕНИЯ UK-* ---------- */

/* Base */
html{background:var(--paper);overflow-x:clip}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:clamp(16.5px,1.02vw,18px);line-height:1.62;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6,
.uk-h1,.uk-h2,.uk-h3,.uk-h4,.uk-h5,.uk-h6,
.uk-heading-small,.uk-heading-medium,.uk-heading-large,
.uk-heading-xlarge,.uk-heading-2xlarge,.uk-heading-3xlarge,
.uk-card-title,.uk-modal-title,.uk-logo{
  font-family:var(--sans);color:inherit;font-weight:900;
  text-transform:uppercase;letter-spacing:-.03em;line-height:1.24}
/* Верхний регистр остаётся только у заголовка страницы: подзаголовки
   в капсе теряют читаемость, особенно в длинных русских фразах */
h2,h3,h4,h5,h6,.uk-h2,.uk-h3,.uk-h4,.uk-h5,.uk-h6,.uk-card-title,.uk-modal-title{
  text-transform:none;letter-spacing:-.015em}
a{color:var(--blue-dark);text-decoration:none}
a:hover,a:focus,a:active{color:var(--blue);text-decoration:none}
:focus-visible{outline:1px solid var(--blue);outline-offset:6px}
::selection{background:var(--blue);color:var(--on-ink)}

/* Heading / Text — ступени шкалы принадлежат теме */
.uk-heading-2xlarge{font-size:clamp(30px,5.4vw,76px);line-height:1.1;letter-spacing:-.03em;max-width:18ch}
.uk-h1{font-size:clamp(26px,4.1vw,50px);line-height:1.16;max-width:20ch}
.uk-h2{font-size:clamp(22px,2.6vw,34px)}
.uk-h3,.uk-card-title{font-size:clamp(19px,1.5vw,23px);font-weight:800;letter-spacing:-.02em;line-height:1.3}
.uk-h4{font-size:18px;font-weight:800;letter-spacing:-.02em;text-transform:none}
.uk-text-lead{font-family:var(--sans);font-weight:400;font-size:clamp(17.5px,1.28vw,21px);
  line-height:1.55;color:var(--ink-2);text-transform:none;letter-spacing:0;max-width:58ch}
/* Китайская версия: иероглифам не нужны разрядка и верхний регистр */
html:lang(zh) .uk-text-meta,html:lang(zh) .tm-kicker,html:lang(zh) .uk-button,
html:lang(zh) .tm-stage-label,html:lang(zh) .tm-box-label,html:lang(zh) .tm-post-title{
  letter-spacing:.04em;text-transform:none;font-weight:500}
/* Иероглиф вдвое ёмче знака кириллицы — меры строк пересчитаны */
html:lang(zh) .tm-hero-lead{max-width:32ch}
html:lang(zh) .tm-measure,html:lang(zh) .tm-art p{max-width:36ch}
html:lang(zh) .tm-head-title,html:lang(zh) .tm-h1{max-width:12ch}
html:lang(zh) .tm-head-lead{max-width:26ch}
html:lang(zh) .uk-heading-2xlarge,html:lang(zh) .uk-h1,html:lang(zh) .uk-h2,
html:lang(zh) .uk-h3,html:lang(zh) .tm-geo{letter-spacing:0;text-transform:none;font-weight:800}
.uk-text-meta{font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums;font-size:clamp(11px,.72vw,11.5px);
  letter-spacing:.22em;text-transform:uppercase;color:var(--muted);line-height:1.6}
.uk-text-small{font-size:clamp(15.5px,1.05vw,17.5px);line-height:1.62}
.uk-light .uk-text-lead{color:var(--on-ink-dim)}
.uk-light .uk-text-meta{color:var(--on-ink-dim)}

/* Перекраска фреймворка: штатные #1e87f0 / #0f6ecd / #f0506e / #333 / #999
   сведены к токенам бренда. Правила без носителей — резерв на будущие блоки. */
a,.uk-link{color:var(--blue-dark)}
a:hover,.uk-link:hover,.uk-link-toggle:hover .uk-link{color:var(--blue)}
.uk-link-muted a:hover,.uk-link-muted:hover,.uk-link-toggle:hover .uk-link-muted{color:var(--blue)}
.uk-link-text:hover,.uk-link-toggle:hover .uk-link-text{color:var(--blue)}
.uk-link-heading:hover,.uk-link-toggle:hover .uk-link-heading{color:var(--blue)}
.uk-light .uk-link-heading:hover,.uk-light .uk-link-toggle:hover .uk-link-heading{color:var(--blue-sky)}
.uk-light a,.uk-light .uk-link{color:var(--on-ink)}
.uk-light a:hover,.uk-light .uk-link:hover{color:var(--blue-sky)}
/* uk-text-primary / -muted / -emphasis объявлены с !important — переопределять
   их правилом той же специфичности бесполезно. Акцент бренда вынесен в tm-hl. */
.uk-background-primary,.uk-section-primary,.uk-tile-primary,.uk-card-primary{background-color:var(--blue)}
.uk-background-secondary,.uk-tile-secondary{background-color:var(--ink)}
.uk-button-secondary{background-color:var(--ink);color:var(--on-ink)}
.uk-button-secondary:hover,.uk-button-secondary:focus{background-color:var(--deep);color:var(--on-ink)}
.uk-button-danger{background-color:var(--terra);color:var(--on-ink)}
.uk-button-link{color:var(--blue-dark)}
.uk-button-link:hover{color:var(--blue)}
.uk-badge{background-color:var(--blue);border-radius:0}
.uk-marker{background-color:var(--ink);border-radius:0}
.uk-label-danger{border-color:rgba(168,80,32,.6);color:var(--terra);background:none}
.uk-label-success{border-color:var(--line-2);color:var(--blue);background:none}
.uk-alert-primary{background:var(--wash);color:var(--blue-dark)}
.uk-alert-danger{background:rgba(168,80,32,.1);color:var(--terra)}
.uk-overlay-primary{background:rgba(26,42,58,.82)}
.uk-radio:checked,.uk-checkbox:checked,.uk-checkbox:indeterminate{background-color:var(--blue);border-color:var(--blue)}
.uk-radio:checked:focus,.uk-checkbox:checked:focus{background-color:var(--blue-dark)}
.uk-form-danger,.uk-input.uk-form-danger,.uk-textarea.uk-form-danger{border-color:var(--terra)}
.uk-progress::-webkit-progress-value{background-color:var(--blue)}
.uk-progress::-moz-progress-bar{background-color:var(--blue)}
.uk-progress{border-radius:0;background:var(--wash)}
.uk-dotnav>.uk-active>*{background-color:var(--blue);border-color:var(--blue)}
.uk-subnav-pill>.uk-active>a{background-color:var(--blue);color:var(--on-ink)}
.uk-tab>.uk-active>a{border-color:var(--blue);color:var(--ink)}
.uk-pagination>.uk-active>*,.uk-breadcrumb>:last-child>*{color:var(--blue-dark)}
.uk-accordion-title:hover,.uk-totop:hover,.uk-slidenav:hover,.uk-search-toggle:hover{color:var(--blue)}
.uk-notification-message-primary{color:var(--blue-dark)}
.uk-notification-message{border-radius:0;font-family:var(--mono);font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--blue-dark)}
.uk-spinner>*{color:var(--blue)}

/* Акцент в заголовке и служебном слое */
.uk-light .tm-hl{color:var(--blue-sky)}

/* Container */
.uk-container{max-width:var(--container-max);
  padding-left:var(--container-edge);padding-right:var(--container-edge)}

/* Section */
.uk-section-default{background-color:var(--paper)}
.uk-section-secondary{background-color:var(--ink);
  background-image:linear-gradient(178deg,var(--deep) 0%,var(--ink) 44%,#16242F 100%)}
.uk-section-muted{background-color:var(--wash)}

/* Card */
.uk-card{border-radius:0}
.uk-card-default{background:var(--white);border:1.5px solid var(--line);box-shadow:none}
.uk-card-default.uk-card-hover:hover{box-shadow:none;border-color:var(--blue)}
.uk-card-hover:not(.uk-card-default):not(.uk-card-primary):not(.uk-card-secondary):hover{
  background:var(--wash);box-shadow:none}
.uk-card-secondary{background:var(--surf-ink);color:var(--on-ink)}
.uk-card-secondary.uk-card-hover:hover{background:var(--surf-ink-2);box-shadow:none}
.uk-card-title{margin-bottom:12px}
.uk-card-body{padding:30px 28px}

/* Button */
.uk-button{display:inline-flex;align-items:center;gap:12px;min-height:46px;padding:15px 26px;
  border-radius:0;font-family:var(--mono);font-weight:700;font-size:clamp(11px,.72vw,12px);
  white-space:nowrap;letter-spacing:.22em;
  text-transform:uppercase;line-height:1.2;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.uk-button svg{width:15px;height:14px;flex:0 0 auto}
.uk-button-primary{background:var(--blue);color:var(--on-ink)}
.uk-button-primary:hover,.uk-button-primary:focus{background:var(--blue-dark);color:var(--on-ink)}
.uk-button-default{background:none;border:1.5px solid var(--ink);color:var(--ink)}
.uk-button-default:hover,.uk-button-default:focus{background:var(--ink);color:var(--on-ink)}
.uk-light .uk-button-default{border-color:var(--on-ink-line-2);color:var(--on-ink)}
.uk-light .uk-button-default:hover{background:var(--on-ink);color:var(--ink)}
.uk-button-text{min-height:44px;padding:13px 0;color:var(--blue-dark);
  font-size:clamp(11px,.82vw,12.5px);letter-spacing:.22em}
.uk-button-text::before{display:none}
.uk-button-text:hover,.uk-button-text:focus{color:var(--blue)}
.uk-light .uk-button-text{color:var(--blue-sky)}
.uk-light .uk-button-text:hover{color:var(--on-ink)}

/* Label — «чипсы» бука */
.uk-label{display:inline-block;padding:8px 14px;border:1px solid var(--line-2);border-radius:0;
  background:none;color:var(--blue-dark);font-family:var(--mono);font-weight:700;font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;line-height:1.3}
.uk-light .uk-label{border-color:var(--on-ink-line-2);color:var(--on-ink-dim)}
.uk-label-warning{background:none;border-color:rgba(168,80,32,.6);color:var(--terra)}
.uk-light .uk-label-warning{border-color:rgba(168,80,32,.85);color:var(--terra-on-ink)}

/* List / Table / Description list — цвет линеек по токенам */
.uk-list-divider>li:nth-child(n+2){border-top-color:var(--line)}
.uk-column-divider{column-rule-color:var(--line);column-gap:clamp(30px,3.4vw,56px)}
.uk-light .uk-column-divider{column-rule-color:var(--on-ink-line)}
.uk-light .uk-list-divider>li:nth-child(n+2){border-top-color:var(--on-ink-line)}
.uk-list-large>li:nth-child(n+2){margin-top:22px}
.uk-table{font-size:15px;margin-bottom:0}
.uk-table th,.uk-table td{padding:16px 12px;vertical-align:middle}
.uk-table-divider>:first-child>tr:not(:first-child),
.uk-table-divider>:not(:first-child)>tr,
.uk-table-divider>tr:not(:first-child){border-top-color:var(--line)}
.uk-light .uk-table-divider>:first-child>tr:not(:first-child),
.uk-light .uk-table-divider>:not(:first-child)>tr,
.uk-light .uk-table-divider>tr:not(:first-child){border-top-color:var(--on-ink-line)}
.uk-description-list>dt{font-family:var(--mono);font-weight:700;letter-spacing:-.01em;
  font-size:clamp(21px,2.2vw,30px);color:var(--blue-dark);text-transform:none}
.uk-description-list>dd{font-family:var(--mono);font-weight:600;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);margin-top:8px}
.uk-description-list-divider>dt:nth-child(n+2){margin-top:20px;padding-top:20px;border-top-color:var(--line)}

/* Form */
.uk-input,.uk-select,.uk-textarea{background:none;border:0;border-bottom:1.5px solid var(--ink);
  border-radius:0;padding:0 0 12px;height:auto;font-family:var(--sans);font-size:17px;color:var(--ink);
  box-shadow:none;transition:border-color .2s ease}
.uk-textarea{min-height:104px;line-height:1.6;resize:vertical}
.uk-input:focus,.uk-textarea:focus,.uk-select:focus{background:none;border-bottom-color:var(--blue);color:var(--ink)}
.uk-form-label{font-family:var(--mono);font-weight:600;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.uk-form-help{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.1em;
  line-height:1.7;color:var(--muted)}
/* Инверсия в UIkit не покрывает поля и кнопки — задаём обе стороны явно.
   Селектор секции (.uk-section-secondary:not(.uk-preserve-color) .uk-input) весит
   четыре класса, поэтому светлая карточка внутри тёмной секции держится
   на такой же специфичности: .uk-card.uk-dark.uk-card-default + элемент. */
.uk-card.uk-dark.uk-card-default{color:var(--ink)}
.uk-card.uk-dark.uk-card-default .uk-form-label,
.uk-card.uk-dark.uk-card-default .uk-form-help{color:var(--muted)}
.uk-card.uk-dark.uk-card-default .uk-input,
.uk-card.uk-dark.uk-card-default .uk-textarea{background:none;color:var(--ink);
  border-bottom-color:var(--ink)}
.uk-card.uk-dark.uk-card-default .uk-input:focus,
.uk-card.uk-dark.uk-card-default .uk-textarea:focus{background:none;color:var(--ink);
  border-bottom-color:var(--blue)}
.uk-card.uk-dark.uk-card-default .uk-input::placeholder,
.uk-card.uk-dark.uk-card-default .uk-textarea::placeholder{color:var(--muted)}
.uk-card.uk-dark.uk-card-default .uk-button-primary{background:var(--blue);color:var(--on-ink)}
.uk-card.uk-dark.uk-card-default .uk-button-primary:hover,
.uk-card.uk-dark.uk-card-default .uk-button-primary:focus{background:var(--blue-dark);color:var(--on-ink)}
.uk-light .uk-form-label,.uk-light .uk-form-help{color:var(--on-ink-dim)}
.uk-light .uk-input,.uk-light .uk-textarea{background:none;color:var(--on-ink);
  border-bottom-color:var(--on-ink-line-2)}
.uk-light .uk-button-primary,.uk-dark .uk-button-primary{background:var(--blue);color:var(--on-ink)}
.uk-light .uk-button-primary:hover,.uk-dark .uk-button-primary:hover{background:var(--blue-dark);color:var(--on-ink)}

/* Navbar */
.uk-navbar-container:not(.uk-navbar-transparent){background:rgba(245,248,251,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.uk-navbar-left,.uk-navbar-right{flex-wrap:nowrap}
.uk-navbar-nav>li>a{min-height:72px;padding:0 11px;font-family:var(--mono);font-weight:600;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2);
  transition:color .2s ease}
.uk-navbar-nav>li>a:hover,.uk-navbar-nav>li>a:focus,.uk-navbar-nav>li.uk-active>a{color:var(--blue)}
.uk-navbar-item{min-height:72px;padding:0 10px;white-space:nowrap}
.uk-navbar-toggle{gap:12px;min-height:44px;padding:0 6px 0 14px;border:0;background:none;
  color:var(--ink);font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;transition:color .2s ease}
.uk-navbar-toggle:hover,.uk-navbar-toggle:focus{color:var(--blue)}
.uk-logo{display:flex;align-items:center;color:var(--blue)}
.uk-logo:hover{color:var(--blue-dark)}

.uk-breadcrumb>*>*{font-family:var(--mono);font-weight:600;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted)}
.uk-breadcrumb>:last-child>span{color:var(--ink)}

/* Nav — пункты полотна */
.uk-nav-primary>li>a{padding:16px 0;font-family:var(--sans);font-weight:900;
  font-size:clamp(21px,2.4vw,32px);text-transform:uppercase;letter-spacing:-.03em;line-height:1.24;
  transition:color .2s ease}
.uk-light .uk-nav-primary>li>a{color:var(--on-ink)}
.uk-light .uk-nav-primary>li>a:hover,.uk-light .uk-nav-primary>li>a:focus{color:var(--blue-sky)}
.uk-nav-divider>li:nth-child(n+2){border-top-color:var(--on-ink-line)}
.uk-nav-primary .uk-nav-divider{border-top-color:var(--on-ink-line)}

/* Modal — полотно приходит сверху */
.uk-modal-full .uk-modal-dialog{transform:translateY(-100%);
  transition:transform .48s cubic-bezier(.2,.8,.25,1)}
.uk-open>.uk-modal-dialog{transform:translateY(0)}
.uk-modal-close-full{background:none;color:var(--on-ink);padding:20px}

/* Subnav */
.uk-subnav>*>:first-child{font-family:var(--mono);font-weight:600;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--on-ink-dim)}
.uk-subnav>*>a:hover{color:var(--on-ink)}

/* ---------- 3. СВОИ КОМПОНЕНТЫ (штатных нет) ---------- */

/* Ссылка перехода: снятие uk-hidden-visually при фокусе */
.tm-skip:focus{position:fixed;top:10px;left:10px;z-index:1000;width:auto;height:auto;
  clip:auto;clip-path:none;overflow:visible;padding:12px 20px;
  background:var(--blue);color:var(--on-ink);font-family:var(--mono);font-size:11px;letter-spacing:.22em}

/* Нож: V-образная вырезка кромки. Глубина 64/34, запас сверху обязателен.
   padding-top пишется отдельным свойством — шорткат перебивает класс. */
.tm-knife{position:relative;overflow:hidden;margin-top:calc(-1 * var(--knife));
  clip-path:polygon(0 0,calc(50% - var(--knife)) 0,50% var(--knife),
  calc(50% + var(--knife)) 0,100% 0,100% 100%,0 100%)}
.tm-knife-pad{padding-top:calc(var(--knife) + clamp(40px,4vw,60px))}
/* Секция над зубцом отдаёт ему свою нижнюю полосу */
.tm-knife-tail{padding-bottom:calc(var(--knife) + clamp(32px,3.4vw,64px))}
.tm-knife-glyph{position:absolute;top:calc(var(--knife) + 16px);left:50%;transform:translateX(-50%);
  z-index:3;width:52px;height:auto;color:var(--blue);opacity:.9}
.uk-light .tm-knife-glyph{color:var(--blue-sky)}

/* Триггер меню: три сжатых шеврона, раздвигаются при наведении */
.tm-burger path{transition:transform .38s cubic-bezier(.2,.8,.3,1)}
.tm-burger path:nth-child(1){transform:translateY(17px)}
.tm-burger path:nth-child(3){transform:translateY(-17px)}
.uk-navbar-toggle:hover .tm-burger path:nth-child(1),
.uk-navbar-toggle:focus .tm-burger path:nth-child(1){transform:translateY(0)}
.uk-navbar-toggle:hover .tm-burger path:nth-child(3),
.uk-navbar-toggle:focus .tm-burger path:nth-child(3){transform:translateY(0)}

/* Метка: параллелограмм с торцами под 45° */
.tm-bar{display:inline-block;flex:0 0 auto;background:var(--blue)}
.tm-bar-h{width:34px;height:7px;clip-path:polygon(12% 0,100% 0,88% 100%,0 100%)}
.tm-bar-dot{width:9px;height:9px;clip-path:polygon(0 12%,100% 0,100% 88%,0 100%)}
.tm-bar-terra{background:var(--terra)}
.uk-light .tm-bar{background:var(--blue-sky)}
.uk-light .tm-bar-terra{background:var(--terra)}

/* Решётка кереге — проявляется полностью один раз */
.tm-kerege{background-image:
  repeating-linear-gradient(45deg,var(--kerege-ink) 0 1px,transparent 1px var(--kerege-step)),
  repeating-linear-gradient(-45deg,var(--kerege-ink) 0 1px,transparent 1px var(--kerege-step))}

/* Полотно меню */
.tm-sheet{position:relative;background:var(--ink);padding:clamp(28px,4vw,56px) 0}
.tm-sheet::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(45deg,var(--kerege-ink) 0 1px,transparent 1px var(--kerege-step)),
    repeating-linear-gradient(-45deg,var(--kerege-ink) 0 1px,transparent 1px var(--kerege-step))}
.tm-sheet>*{position:relative}

.tm-arrow{transform:rotate(90deg)}
/* Знак подвала: бургер развёрнут вниз — указывает на ссылки под ним */
.tm-knife-nav{width:42px;color:var(--blue);opacity:.6;stroke-width:2.2;
  transform:translateX(-50%) rotate(180deg);transition:opacity .3s ease}
@media(max-width:959px){.tm-knife-nav{width:34px;stroke-width:2}}
.uk-light .tm-knife-nav,.uk-section-secondary .tm-knife-nav{color:var(--on-ink)}
.tm-foot:hover .tm-knife-nav,.tm-knife:hover .tm-knife-nav{opacity:.9}

/* Дуотон и жалюзи 45° */
.tm-duo{position:relative;overflow:hidden;background:var(--deep);margin:0}
/* Портрет: кадр в цвете со срезанной кромкой, без ромбической маски */
.tm-person{color:var(--ink)}
.tm-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.tm-chips li{font-family:var(--mono);font-weight:600;font-size:clamp(10.5px,.8vw,12px);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
  border:1px solid var(--line-2);padding:7px 12px}
.tm-portrait{position:relative;overflow:hidden;margin:0;aspect-ratio:4/5;background:var(--wash)}
.tm-portrait img{width:100%;height:100%;object-fit:cover;object-position:center}
.tm-duo img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.12) brightness(.7);transition:filter .4s ease}
.tm-duo::after{content:"";position:absolute;inset:0;background:var(--blue);
  mix-blend-mode:color;opacity:.92;pointer-events:none;transition:opacity .4s ease}
a:hover .tm-duo img{filter:none}
a:hover .tm-duo::after{opacity:0}
.tm-blinds{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  background-image:repeating-linear-gradient(45deg,var(--ink) 0 var(--blind-fill),
    transparent var(--blind-fill) calc(var(--blind-fill) + var(--blind-gap)))}
.tm-js .tm-blinds{opacity:1;transition:opacity 1.1s cubic-bezier(.2,.8,.25,1) .45s}
.tm-js.tm-ready .tm-blinds{opacity:0}

/* Ромб-маска портрета: контур с отступом 9 px, линия глаз в верхней трети */

/* Маршрут: семь станций. Доли седьмых в шкале UIkit отсутствуют
   (1-1…1-6, auto, expand), произведением не собираются — свой класс обоснован. */

/* Направление каталога: ссылка с иконкой и номером */

/* Кейс: карточка на поверхности чернил */

/* Объём тёмных секций: водяной знак и штриховка */
.tm-wm{position:absolute;z-index:0;pointer-events:none;height:auto;color:var(--on-ink);opacity:.055}
.tm-wm-r{right:-5%;top:50%;transform:translateY(-50%);width:clamp(240px,36vw,540px)}
.tm-wm-l{left:-7%;bottom:-6%;width:clamp(220px,30vw,440px);opacity:.045}
.tm-hatch{position:absolute;left:0;right:0;bottom:0;z-index:1;pointer-events:none;
  height:clamp(140px,20vw,260px);
  background-image:repeating-linear-gradient(45deg,var(--on-ink-veil) 0 var(--blind-fill),
    transparent var(--blind-fill) calc(var(--blind-fill) + var(--blind-gap)));
  -webkit-mask-image:linear-gradient(to top,#000,transparent);
  mask-image:linear-gradient(to top,#000,transparent)}

/* ---------- 4. МОБИЛЬНЫЕ ПОРОГИ ---------- */
@media(max-width:1279px){
}
@media(max-width:959px){
  :root{--knife:34px}
  .tm-knife-pad{padding-top:calc(var(--knife) + 40px)}
  .tm-knife-glyph{width:38px;top:calc(var(--knife) + 12px)}
  .uk-card-body{padding:26px 22px}
}
@media(max-width:719px){
}
@media(max-width:639px){

  .uk-button{padding:14px 20px;letter-spacing:.16em}
  .uk-navbar-item{padding:0 8px}
  .tm-cta-long{display:none}
  .tm-wm,.tm-hatch{opacity:.04}
}
@media(min-width:640px){.tm-cta-short{display:none}}
@media(max-width:400px){
  .uk-heading-2xlarge{font-size:31px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  .tm-js .tm-blinds{opacity:0 !important}
}

/* ==========================================================================
   ДОБАВЛЕНИЯ К ТЕМЕ v8 — композиционный слой
   ========================================================================== */


/* --- Первый экран внутренней страницы: воздух сверху и снизу --- */
.tm-hero-page{padding-top:clamp(24px,2.6vw,40px);padding-bottom:clamp(40px,4vw,72px)}
.tm-hero-mark{padding-bottom:clamp(48px,4.6vw,84px)}
/* Если под первым экраном зубец, полоса под наезд перекрывает обычный отступ */
.tm-hero-mark.tm-knife-tail{padding-bottom:calc(var(--knife) + clamp(32px,3.4vw,64px))}
.tm-measure{max-width:64ch}
/* Расправленный первый экран: заголовок во всю ширину, лид отдельной мерой */
.tm-h1{max-width:21ch}
.tm-hero-lead{max-width:58ch;font-size:clamp(19px,1.5vw,24px);line-height:1.5}

/* --- Портфолио: подборка живёт на решётке кереге, ряды идут зеркально --- */
.tm-lattice{position:relative}
.tm-lattice::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(45deg,rgba(30,78,122,.10) 0 1px,transparent 1px var(--kerege-step)),
    repeating-linear-gradient(-45deg,rgba(30,78,122,.10) 0 1px,transparent 1px var(--kerege-step));
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent)}
.tm-lattice>*{position:relative;z-index:1}
.tm-works>li:nth-child(n+2){margin-top:clamp(28px,3.2vw,52px);padding-top:clamp(28px,3.2vw,52px)}
.tm-work{display:block;color:var(--ink)}
.tm-work-fig{aspect-ratio:4/3}
.tm-work:hover .tm-num{color:var(--blue)}
.tm-work:hover .tm-case-title{color:var(--blue-dark)}

/* Спецификация кейса: факты отдельными ячейками, а не строкой через точки */
.tm-specs{margin-top:clamp(30px,3.4vw,54px);padding-top:clamp(26px,3vw,42px);
  border-top:1px solid var(--line)}
.tm-spec-item{display:block;font-family:var(--mono);font-weight:600;
  font-size:clamp(11.5px,.85vw,13px);letter-spacing:.14em;line-height:1.7;
  text-transform:uppercase;color:var(--ink-2)}

/* Итог этапа: светлая плашка с гранью и цветной кромкой */
.tm-stage-box{margin-top:clamp(26px,3vw,44px);border-left:4px solid var(--blue);
  background:var(--wash);padding:clamp(26px,3vw,42px) clamp(24px,3vw,46px)}
.tm-stage-label{font-family:var(--mono);font-weight:700;font-size:11.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--blue-dark)}
.tm-stage-text{margin-top:14px;max-width:76ch;color:var(--ink);
  font-size:clamp(17.5px,1.4vw,21px);line-height:1.5}
.tm-stage-terra{border-left-color:var(--terra)}
.tm-stage-terra .tm-stage-label{color:var(--terra)}

/* --- Врезка «В чём суть»: три величины в графах, вывод отдельной строкой --- */
.tm-key{background:var(--wash);padding:clamp(28px,3.2vw,48px);margin:clamp(36px,4vw,64px) 0}
.tm-key-label{margin:0;font-family:var(--mono);font-weight:700;font-size:11.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--blue-dark)}
.tm-key-num{margin:0;font-family:var(--mono);font-weight:700;font-size:clamp(26px,2.8vw,42px);
  line-height:1;letter-spacing:-.03em;color:var(--blue);font-variant-numeric:tabular-nums}
.tm-key-cap{margin-top:12px;font-size:clamp(13.5px,.95vw,15px);line-height:1.4;color:var(--ink-2)}
.tm-key-note{margin-top:clamp(24px,2.6vw,36px);padding-top:clamp(20px,2.2vw,28px);
  border-top:1px solid var(--line-2);font-size:clamp(17px,1.4vw,21px);line-height:1.4;color:var(--ink)}

/* --- Шеринг материала: квадратные цели нажатия по 44 px --- */
.tm-share{max-width:340px}
.tm-share-list{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.tm-share-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  padding:0;background:none;border:1px solid var(--line-2);color:var(--blue);cursor:pointer;
  transition:color .2s ease,border-color .2s ease,background-color .2s ease}
.tm-share-btn:hover,.tm-share-btn:focus{color:var(--blue-dark);border-color:var(--blue);background:var(--wash)}
.tm-share-btn svg{width:20px;height:20px;stroke-width:1.5}

/* --- Печать: остаются заголовок, текст, врезки и источники --- */
@media print{
  .uk-navbar-container,.tm-share,.tm-hero-glyph,.tm-hatch,
  .uk-modal-full,footer,.uk-button,.tm-knife-glyph{display:none!important}
  .tm-knife{clip-path:none!important;margin-top:0!important}
  .uk-section{padding:0!important;background:#fff!important;color:#000!important}
  .uk-section-secondary{background:#fff!important}
  .uk-light,.uk-light *{color:#000!important}
  .tm-art p,.tm-key-note,.tm-quote p{color:#000!important}
  .tm-art-fig{max-height:70mm}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#444}
}

/* --- Материал: перечень «что делать» и список источников --- */
.tm-todo-list li{font-size:clamp(15.5px,1.05vw,17.5px);line-height:1.55;color:var(--on-ink-dim);
  counter-increment:tm-todo;position:relative;padding-left:44px}
.tm-todo{max-width:64ch}
.tm-todo-list{counter-reset:tm-todo}
.tm-todo-list li::before{content:counter(tm-todo,decimal-leading-zero);position:absolute;left:0;top:1px;
  font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.06em;color:var(--blue-sky)}
.tm-sources li{display:flex;align-items:baseline;gap:18px;font-size:clamp(14px,.98vw,15.5px);line-height:1.5}
.tm-sources li:nth-child(n+2){margin-top:16px}
.tm-src-n{flex:0 0 auto;font-family:var(--mono);font-weight:700;font-size:12.5px;letter-spacing:.06em;
  color:var(--blue-dark);font-variant-numeric:tabular-nums}
.tm-sources i{display:block;font-style:normal;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  color:var(--muted);margin-top:4px}

/* --- Материал: колонка текста, цитата, врезка фактов, боковая рейка --- */
.tm-art{max-width:none}
.tm-art p{font-size:clamp(16.5px,1.15vw,19px);line-height:1.65;color:var(--ink);max-width:68ch}
.tm-art p+p{margin-top:1.1em}
p.tm-lede{font-size:clamp(19px,1.5vw,23px);line-height:1.5;color:var(--ink-2)}
.tm-art-fig{position:relative;overflow:hidden;margin:0;aspect-ratio:16/9;background:var(--wash)}
.tm-art-fig img{width:100%;height:100%;object-fit:cover}

/* Цитата — светлое поле, а не линейка сбоку.
   Вертикальная линейка спорила со знаком кавычек: две метки на одном
   краю, и глаз не понимает, какая отмечает начало. Поле отделяет цитату
   целиком, не претендуя на роль метки, — знак остаётся единственной.
   Оттенок и отступы те же, что у .tm-box: цитата и врезка это соседние
   приёмы, разводить их по разным светлотам не за что. */
.tm-quote{margin:clamp(40px,4.4vw,72px) 0;background:var(--wash);
  padding:clamp(26px,3vw,42px)}

/* Мера расширена с 26 до 40 знаков. Двадцать шесть держали висячую
   цитату узкой колонкой у линейки; внутри поля такая колонка оставляет
   справа пустоту в половину ширины и читается как незавёрстанный блок.
   Сорок знаков крупным кеглем — всё ещё комфортная строка. */
.tm-quote p{font-family:var(--sans);font-weight:400;font-size:clamp(21px,2vw,30px);
  line-height:1.35;letter-spacing:-.01em;color:var(--ink);max-width:40ch}
.tm-box{background:var(--wash);padding:clamp(26px,3vw,42px);margin:clamp(36px,4vw,64px) 0}
.tm-box-label{font-family:var(--mono);font-weight:700;font-size:11.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--blue-dark)}
.tm-box-list{margin-top:22px}
.tm-box-list li{display:flex;align-items:baseline;gap:18px}
.tm-box-list b{flex:0 0 auto;min-width:66px;font-family:var(--mono);font-weight:700;
  font-size:clamp(24px,2.4vw,38px);line-height:1;letter-spacing:-.03em;color:var(--blue)}
.tm-box-list span{font-size:clamp(14.5px,1vw,16.5px);line-height:1.45;color:var(--ink-2)}
.tm-side{background:var(--wash);padding:clamp(22px,2.4vw,32px)}
.tm-rel{color:var(--ink)}
.tm-rel-title{font-weight:700;font-size:clamp(16px,1.15vw,18px);line-height:1.3;letter-spacing:-.01em;margin:0}
.tm-rels>li:nth-child(n+2){margin-top:18px;padding-top:18px}

/* --- Лента разборов: рубрика слева, материалы строками справа.
       В заголовке жирным — то, что до двоеточия: тезис, потом его развёртка. --- */
.tm-group{margin-top:clamp(44px,4.6vw,80px);padding-top:clamp(44px,4.6vw,80px);border-top:1px solid var(--line)}
.tm-group:first-of-type{margin-top:0;padding-top:0;border-top:0}
.tm-group-name{font-family:var(--mono);font-weight:700;font-size:clamp(12px,1vw,14px);letter-spacing:.2em;
  text-transform:uppercase;color:var(--blue-dark);margin:0}
.tm-item{color:var(--ink)}
.tm-item-fig{width:clamp(96px,9vw,132px);aspect-ratio:4/3}
.tm-item-title{margin:0;font-size:clamp(16.5px,1.25vw,20px);line-height:1.35;letter-spacing:-.01em;font-weight:400}
.tm-item-title b{font-weight:800}
.tm-items>li:nth-child(n+2){margin-top:26px;padding-top:26px}

/* --- Инсайты: лента вопросов. Вопрос крупно, заголовок под ним --- */
.tm-rubs{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.tm-rubs a{display:flex;align-items:baseline;gap:10px;padding:12px 18px;border:1px solid var(--line-2);
  color:var(--ink-2);font-family:var(--mono);font-weight:600;font-size:clamp(11px,.85vw,12.5px);
  letter-spacing:.16em;text-transform:uppercase;transition:color .25s ease,border-color .25s ease,background-color .25s ease}
.tm-rubs a:hover{color:var(--blue);border-color:var(--blue);background:var(--wash)}
.tm-rubs i{font-style:normal;color:var(--muted)}
.tm-post{color:var(--ink)}
.tm-post-q{font-family:var(--sans);font-weight:400;font-size:clamp(20px,1.9vw,29px);line-height:1.3;
  letter-spacing:-.01em;color:var(--ink);max-width:30ch;margin:0}
.tm-post-q-ink{color:var(--on-ink);max-width:26ch}
.tm-post-title{font-family:var(--mono);font-weight:700;font-size:clamp(12px,1vw,14px);letter-spacing:.2em;
  text-transform:uppercase;color:var(--blue-dark);margin:0}
.tm-post-fig{aspect-ratio:4/3}
.tm-lead-fig{aspect-ratio:4/3}
.tm-posts>li:nth-child(n+2){margin-top:clamp(36px,4vw,64px);padding-top:clamp(36px,4vw,64px)}

/* --- Контакты: канал связи строкой, геоблок офиса --- */
.tm-channels>li:nth-child(n+2){margin-top:10px;padding-top:10px}
.tm-ch{color:var(--ink)}
.tm-ch-icon{display:block;width:clamp(26px,2.2vw,32px);height:auto;color:var(--blue);stroke-width:1.4;
  transition:color .3s ease}
.tm-ch:hover .tm-ch-icon,.tm-ch:hover .tm-ch-arrow{color:var(--blue-dark)}
.tm-ch-value{font-weight:700;font-size:clamp(18px,1.6vw,24px);line-height:1.25;letter-spacing:-.01em}
.tm-ch-note{color:var(--ink-2)}
.tm-ch-arrow{color:var(--blue);transition:color .3s ease}
.tm-geo{font-family:var(--sans);font-weight:900;text-transform:uppercase;letter-spacing:-.03em;
  line-height:.94;font-size:clamp(40px,5.4vw,76px);color:var(--on-ink);margin:0}
.tm-geo-sub{font-family:var(--mono);font-weight:600;font-size:clamp(12px,1vw,14px);letter-spacing:.22em;
  text-transform:uppercase;color:var(--blue-sky)}
.tm-office li{display:flex;align-items:flex-start;gap:16px}
.tm-office b{display:block;font-family:var(--mono);font-weight:700;font-size:clamp(15px,1.3vw,19px);
  letter-spacing:.06em;color:var(--on-ink)}
.tm-office span{font-size:clamp(13.5px,.95vw,15px);line-height:1.5;color:var(--on-ink-dim)}

/* --- Компания: знак-подложка в первом экране, заголовок во всю ширину --- */
/* Обрезание живёт на слое знака, а не на секции: overflow:hidden у предка
   лишает position:sticky опоры, и боковая рейка перестаёт липнуть */
.tm-hero-clip{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.tm-hero-glyph{position:absolute;left:54%;top:48%;transform:translate(-50%,-50%);z-index:0;
  width:clamp(360px,58vw,900px);height:auto;color:var(--blue);opacity:.07;pointer-events:none}
.tm-h1-wide{max-width:none}
@media(max-width:959px){.tm-hero-glyph{left:62%;top:52%;width:clamp(340px,86vw,560px);opacity:.05}}

/* --- Компания: ведомость фактов, досье, разбор знака --- */
.tm-facts{margin:0;padding:0}
.tm-facts li{display:flex;align-items:baseline;gap:16px}
.tm-facts b{flex:0 0 auto;min-width:132px;font-family:var(--mono);font-weight:700;
  font-size:clamp(13px,1vw,15px);letter-spacing:.06em;color:var(--blue-dark)}
.tm-facts span{font-size:clamp(13.5px,.95vw,15px);line-height:1.5;color:var(--ink-2)}

.tm-co-fig{aspect-ratio:3/4}
.tm-co-audit{aspect-ratio:4/3}
.tm-cd-fig{height:100%;min-height:300px}
@media(max-width:959px){.tm-cd-fig{height:auto;aspect-ratio:16/10;min-height:0}}
.tm-people>li:nth-child(n+2){margin-top:clamp(40px,4.4vw,72px);padding-top:clamp(40px,4.4vw,72px)}
.tm-brand-part{font-family:var(--sans);font-weight:900;letter-spacing:-.03em;line-height:1.05;
  font-size:clamp(30px,3.6vw,50px);color:var(--on-ink)}
.tm-scope li{font-size:clamp(15.5px,1.05vw,17.5px);line-height:1.5;color:var(--ink-2)}
@media(max-width:959px){.tm-co-fig{aspect-ratio:16/10}}

/* --- Страница услуги: таблица уровней проверки --- */
.tm-levels th{padding-bottom:16px}
.tm-levels td{font-size:clamp(15px,1.02vw,17px);line-height:1.45;vertical-align:top;padding:18px 0}
.tm-levels .tm-lvl-name{font-weight:700;letter-spacing:-.01em;white-space:nowrap;padding-right:28px}
.tm-lvl-term{font-family:var(--mono);font-weight:700;font-size:clamp(13px,.95vw,15px);letter-spacing:.06em;
  white-space:nowrap;color:var(--blue-sky);font-variant-numeric:tabular-nums}
@media(max-width:959px){
  .tm-levels .tm-lvl-name,.tm-levels .tm-lvl-term{white-space:normal;padding-right:0}
}

/* --- Страница направления: знак-штамп на кромке кадра и карточки состава --- */
.tm-hero-frame{position:relative}
.tm-dir-stamp{position:absolute;left:0;bottom:0;z-index:2;display:flex;align-items:center;
  justify-content:center;width:clamp(72px,7vw,116px);height:clamp(72px,7vw,116px);
  background:var(--paper);
  clip-path:polygon(0 0,calc(100% - clamp(18px,1.8vw,28px)) 0,100% clamp(18px,1.8vw,28px),100% 100%,0 100%)}
.tm-dir-stamp svg{width:52%;height:auto;color:var(--blue);stroke-width:1.1}
.tm-scope-card{display:flex;flex-direction:column;align-items:flex-start;gap:0;width:100%;
  text-align:left;cursor:pointer;color:var(--ink)}
.tm-scope-icon{width:clamp(34px,3.2vw,46px);height:auto;color:var(--blue);stroke-width:1.2;
  transition:color .25s ease}
.tm-scope-card:hover .tm-scope-icon{color:var(--blue-dark)}
.tm-scope-name{margin-top:clamp(18px,2vw,28px);font-weight:700;letter-spacing:-.01em;
  font-size:clamp(16.5px,1.25vw,19px);line-height:1.32}
.tm-scope-go{margin-top:auto;padding-top:clamp(16px,1.8vw,24px);min-height:0}

/* --- Страница направления: исполнения, спецификация, состав поставки --- */
.tm-sol-hero{aspect-ratio:16/9}
.tm-sol-fig2{aspect-ratio:4/3}
.tm-type{color:var(--ink);display:block}
.tm-type:hover .tm-num{color:var(--blue)}
.tm-types>li:nth-child(n+2){margin-top:clamp(24px,2.6vw,40px);padding-top:clamp(24px,2.6vw,40px)}
.tm-params li{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap}
.tm-par-name{font-size:clamp(15.5px,1.05vw,17.5px);line-height:1.4;color:var(--ink-2)}
.tm-par-val{font-family:var(--mono);font-weight:700;font-size:clamp(14px,1vw,16px);letter-spacing:.06em;
  color:var(--blue-dark);white-space:nowrap;font-variant-numeric:tabular-nums}
.tm-data li{font-size:clamp(15.5px,1.05vw,17.5px);line-height:1.45;color:var(--ink-2)}
.tm-incl li{display:flex;align-items:flex-start;gap:14px;font-size:clamp(15.5px,1.05vw,17.5px);line-height:1.45}
.tm-incl li:nth-child(n+2){margin-top:16px}
.tm-incl svg{flex:0 0 auto;width:12px;height:12px;margin-top:7px;color:var(--blue-sky);stroke-width:1.6}
.tm-incl-limit svg{color:var(--terra)}

/* --- Крупная кнопка закрытия: знак и подпись, цель нажатия 64 px --- */
.uk-modal-close-full.tm-close{top:clamp(14px,2vw,26px);right:clamp(14px,2vw,26px);
  display:flex;align-items:center;gap:12px;min-height:64px;padding:0 22px 0 18px;
  background:none;border:1px solid var(--line-2);color:var(--ink);
  transition:color .2s ease,border-color .2s ease,background-color .2s ease}
.uk-modal-close-full.tm-close:hover{color:var(--blue);border-color:var(--blue);background:var(--wash)}
.uk-modal-close-full.tm-close svg{width:30px;height:30px}
.uk-modal-close-full.tm-close span{font-family:var(--mono);font-weight:700;font-size:11.5px;
  letter-spacing:.22em;text-transform:uppercase}
.uk-light .uk-modal-close-full.tm-close{border-color:var(--on-ink-line-2);color:var(--on-ink)}
.uk-light .uk-modal-close-full.tm-close:hover{color:var(--blue-sky);border-color:var(--blue-sky);background:none}
@media(max-width:639px){
  .uk-modal-close-full.tm-close{gap:0;padding:0;width:56px;min-height:56px;justify-content:center}
  .uk-modal-close-full.tm-close span{display:none}
  .uk-modal-close-full.tm-close svg{width:26px;height:26px}
}

/* --- Субкатегория как строка-кнопка: открывает окно с параметрами --- */
.tm-sub{display:flex;align-items:flex-start;gap:14px;width:100%;padding:0;background:none;border:0;
  text-align:left;color:var(--ink-2);cursor:pointer;
  font-size:clamp(15.5px,1.05vw,17.5px);line-height:1.45;transition:color .2s ease}
.tm-sub:hover,.tm-sub:focus-visible{color:var(--blue)}
.tm-sub>span{flex:1 1 auto}
.tm-sub-go{flex:0 0 auto;width:13px;height:12px;margin-top:5px;color:var(--line-2);
  transform:rotate(90deg);transition:color .2s ease}
.tm-sub:hover .tm-sub-go{color:var(--blue)}

/* --- Полноэкранное окно параметров --- */
.tm-modal{background:var(--paper);padding:clamp(104px,9vw,140px) 0 clamp(48px,5vw,88px);
  min-height:100vh;overflow-y:auto}
.tm-modal-icon{width:clamp(46px,4.4vw,68px);height:auto;color:var(--blue);stroke-width:1.1}
.tm-modal-title{max-width:22ch}

/* --- Направление каталога. Раскладка целиком на сетке UIkit: заголовок во всю
       ширину, ниже кадр 3/5 и расшивка 2/5 списком с линейками. Своё — только
       шаг между направлениями, скос кромки кадра и кегли. --- */
.tm-sols>li:nth-child(n+2){margin-top:clamp(40px,4.4vw,72px);padding-top:clamp(40px,4.4vw,72px)}
.tm-sol{color:var(--ink)}
.tm-sol-icon{display:block;width:clamp(52px,5vw,76px);height:auto;color:var(--blue);stroke-width:1.05;
  transition:color .3s ease}
.uk-link-toggle:hover .tm-sol-icon{color:var(--blue-dark)}
.uk-link-toggle:hover .tm-num{color:var(--blue)}
.tm-sol-title{max-width:26ch}
.tm-sol-fig{aspect-ratio:16/10}
.tm-cut-tr{clip-path:polygon(0 0,calc(100% - clamp(30px,3.6vw,60px)) 0,100% clamp(30px,3.6vw,60px),100% 100%,0 100%)}
.tm-cut-tl{clip-path:polygon(clamp(30px,3.6vw,60px) 0,100% 0,100% 100%,0 100%,0 clamp(30px,3.6vw,60px))}
.tm-sol-list li{display:flex;align-items:flex-start;gap:14px;
  font-size:clamp(15.5px,1.05vw,17.5px);line-height:1.45;color:var(--ink-2)}
.tm-sc-icon{flex:0 0 auto;width:26px;height:26px;margin-top:-1px;color:var(--blue);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;transition:color .3s ease}
.uk-link-toggle:hover .tm-sc-icon{color:var(--blue-dark)}
.uk-list-divider.tm-sol-list>li:nth-child(n+2){margin-top:14px;padding-top:14px}
@media(max-width:959px){
  .tm-sol-fig{aspect-ratio:16/10}
  .tm-sol-icon{width:clamp(44px,9vw,58px)}
}



/* --- Отбивка блоков одного грунта: линия растворяется к краям,
       в центре — грань ромба. Мягко, без штриховки. --- */
.tm-rule-open{margin-top:0}

/* Отступы сняты: линейка стоит внутри секции, у которой уже есть свой
   вертикальный ритм. Собственные поля в 52-92px складывались с ним и
   давали разрыв там, где нужна пауза, а не раздел. Ритм задаёт секция,
   линейка только делит. */
.tm-rule{position:relative;height:34px;margin:0}
.tm-rule::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line-2);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 20%,#000 80%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 20%,#000 80%,transparent)}
.tm-rule span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;background:var(--paper);padding:0 20px}
.tm-rule svg{width:13px;height:13px;color:var(--blue);stroke-width:1.6}

/* --- Крупный номер в поле строки --- */
.tm-num{display:block;font-family:var(--mono);font-weight:700;font-variant-numeric:tabular-nums;line-height:.9;letter-spacing:-.04em;
  font-size:clamp(36px,4.6vw,74px);color:var(--line);transition:color .3s ease}
.tm-num-sm{font-size:clamp(30px,3.2vw,46px)}
.tm-case-title{font-size:clamp(24px,2.6vw,40px);max-width:20ch}
/* Поле и подсветка строки — от uk-card-body и uk-card-hover, линейки — от uk-list-divider.
   Свой класс держит только реакцию номера. */
.tm-row-svc{display:block;color:var(--ink)}
.tm-row-svc:hover .tm-num{color:var(--blue)}


/* --- Корпоративная услуга и формат --- */
.tm-corp{color:var(--ink)}
.tm-corp:hover{color:var(--blue-dark)}
.tm-rhomb-bullet{width:14px;height:14px;color:var(--blue);stroke-width:6;margin-right:12px;flex:0 0 auto}
.tm-format{padding-right:20px}
.tm-plume-xl{width:clamp(56px,6vw,92px);height:auto;color:var(--blue-sky)}

/* --- Шапка секции во всю ширину: заголовок слева, лид и ссылка справа --- */
.tm-head{margin-bottom:clamp(34px,4vw,58px);padding-bottom:clamp(18px,2.2vw,30px);
  border-bottom:1px solid var(--line)}
.uk-light .tm-head{border-bottom-color:var(--on-ink-line)}
.tm-head-title{max-width:15ch}
.tm-head-lead{max-width:44ch}
/* Поверхность на бумаге отбивает соседние блоки внутри одной секции */
.tm-panel{background:var(--wash);margin:clamp(56px,5.6vw,96px) calc(-1 * var(--container-edge));
  padding:clamp(52px,5.4vw,96px) var(--container-edge)}
.tm-panel .tm-head{border-bottom-color:var(--line-2)}

/* --- Фаска 45°: грань ромба на плоскости --- */
.tm-chamfer{clip-path:polygon(0 0,calc(100% - 30px) 0,100% 30px,100% 100%,0 100%)}
@media(max-width:639px){.tm-chamfer{clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%)}}

/* --- Крупный порядковый номер как опора композиции --- */
.tm-index{display:block;font-family:var(--mono);font-weight:700;
  font-size:clamp(30px,3.2vw,46px);line-height:1;letter-spacing:-.02em;color:var(--line-2)}
.uk-light .tm-index{color:var(--on-ink-line-2)}
.tm-index-on{color:var(--blue)}

/* --- Первый экран --- */
.tm-hero{padding-top:clamp(26px,3.6vw,54px);padding-bottom:clamp(40px,5vw,74px)}
.tm-glyph{width:clamp(150px,25vw,420px);height:auto;color:var(--blue)}
.tm-glyph .pl{opacity:0;animation:tm-plume .42s cubic-bezier(.2,.8,.3,1) forwards}
.tm-glyph .pl-1{animation-delay:.10s}
.tm-glyph .pl-2{animation-delay:.24s}
.tm-glyph .pl-3{animation-delay:.38s}
.tm-glyph .pl-4{animation-delay:.52s}
.tm-glyph .pl-5{animation-delay:.66s}
@keyframes tm-plume{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* --- Маршрут: семь станций лентой. Седьмых долей в шкале UIkit нет
       (1-1…1-6, auto, expand), произведением не собираются — свой класс. --- */
.tm-flow{position:relative}
.tm-stages{margin:0;padding:0;list-style:none;position:relative;z-index:1}
.tm-flow-line{position:absolute;left:0;right:0;top:5px;height:1px;overflow:hidden;
  background:var(--line-2);z-index:0}
.tm-flow-fill{display:block;width:100%;height:100%;background:var(--blue)}
.tm-step{position:relative;display:flex;flex-direction:column;padding:30px 26px 0 0}
.tm-step-dot{position:absolute;left:0;top:0;width:11px;height:11px;background:var(--paper);
  border:1.5px solid var(--line-2);transition:background-color .35s ease,border-color .35s ease}
.tm-step.tm-on .tm-step-dot{background:var(--blue);border-color:var(--blue)}
.tm-step.tm-risk.tm-on .tm-step-dot{background:var(--terra);border-color:var(--terra)}
.tm-step.tm-on .tm-step-id{color:var(--blue)}
.tm-step.tm-risk.tm-on .tm-step-id{color:var(--terra)}
.tm-step-id{transition:color .35s ease}
@media(max-width:1199px){
  .tm-flow-line{display:none}
  .tm-step{padding:26px 0 30px 30px;border-top:1px solid var(--line)}
  .tm-step-dot{top:32px}
}
@media(max-width:719px){.tm-flow-list{grid-template-columns:1fr}}

/* --- Кадры: фиксированная обрезка вместо натуральной высоты --- */
.tm-fig-16-10{aspect-ratio:16/10}
.tm-fig-4-5{aspect-ratio:4/5}
.tm-cat-figure{aspect-ratio:3/4}
@media(max-width:959px){.tm-cat-figure{aspect-ratio:16/10}}
.tm-slat{position:absolute;left:0;right:0;bottom:0;height:38px;z-index:2;pointer-events:none;
  background-image:repeating-linear-gradient(45deg,var(--ink) 0 var(--blind-fill),
    transparent var(--blind-fill) calc(var(--blind-fill) + var(--blind-gap)));opacity:.5;
  -webkit-mask-image:linear-gradient(to top,#000,transparent);
  mask-image:linear-gradient(to top,#000,transparent)}
.tm-cap{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:52px 26px 22px;
  background:linear-gradient(to top,rgba(18,32,45,.94),rgba(18,32,45,.62) 46%,transparent)}
.tm-band-figure{height:calc(clamp(300px,32vw,470px) + var(--knife))}
/* Затемнение доведено до нижней кромки кадра: зубец ножа вырезается из уже
   затемнённой полосы, иначе в треугольнике оставался светлый кусок фото. */
.tm-band-cap{position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:56px 0 calc(22px + var(--knife));
  background:linear-gradient(to top,rgba(26,42,58,.92),rgba(26,42,58,0))}

/* --- Кейс: кадр слева, документная правая колонка --- */
.tm-case{display:block;transition:background-color .2s ease}
.tm-case:hover{background:var(--surf-ink-2)}

/* --- Услуги: три строки, флагман на чернилах --- */
/* Поле и подсветка — от uk-card-body и uk-card-hover, линейки — от uk-list-divider */
.tm-svc-flag{margin:16px 0}
.tm-plume-lg{width:clamp(34px,3.4vw,52px);height:auto;color:var(--blue)}
.uk-light .tm-plume-lg{color:var(--blue-sky)}


/* --- Каталог: шесть направлений строками --- */
.tm-dirs{margin:0;padding:0;list-style:none}
.tm-dirs>li{border-top:1px solid var(--line)}
.tm-dirs>li:first-child{border-top:0}
.tm-dir{display:flex;align-items:center;gap:18px;padding:18px 4px;color:var(--ink);
  transition:background-color .2s ease,color .2s ease}
.tm-dir:hover{background:var(--wash);color:var(--blue-dark)}
.tm-dir svg{width:24px;height:24px;flex:0 0 auto;color:var(--blue);stroke-width:1.3}
.tm-dir b{font-weight:700;font-size:clamp(16px,1.15vw,18px);line-height:1.35;letter-spacing:-.01em;flex:1 1 auto}
.tm-dir i{font-style:normal;font-family:var(--mono);font-weight:700;font-size:11px;
  letter-spacing:.2em;color:var(--muted)}

/* --- Инсайты: подпись поверх кадра --- */
.tm-ins-lead{display:block;position:relative;overflow:hidden}
.tm-ins-lead .tm-cap{padding:96px 30px 30px}
@media(max-width:639px){.tm-cap{padding:44px 20px 20px}.tm-ins-lead .tm-cap{padding:72px 20px 22px}}
.tm-ins-row{display:flex;align-items:center;gap:18px;padding:18px 0;color:var(--on-ink);
  transition:color .2s ease}
.tm-ins-row:hover{color:var(--blue-sky)}
.tm-ins-thumb{width:92px;flex:0 0 auto;aspect-ratio:16/11}
@media(max-width:479px){.tm-ins-thumb{width:74px}}
.tm-ins-num{font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.2em;
  color:var(--blue-sky);flex:0 0 auto}

/* --- Досье команды --- */
.tm-person{border-top:1.5px solid var(--line-2);padding-top:26px}
.tm-rhomb{position:relative;aspect-ratio:1;margin:0}
@media(max-width:639px){.tm-rhomb{max-width:190px}}
.tm-rhomb-mask{position:absolute;inset:0;overflow:hidden;background:var(--wash);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.tm-rhomb-mask img{width:100%;height:100%;object-fit:cover;object-position:center 26%}
.tm-rhomb-line{position:absolute;inset:-9px;width:calc(100% + 18px);height:calc(100% + 18px);
  color:var(--blue);stroke-width:1.5}
.tm-spec{margin-top:22px}
.tm-spec td{padding:11px 0;font-size:14px}
.tm-spec td:last-child{text-align:right;font-family:var(--mono);font-weight:700;font-size:12px;
  letter-spacing:.1em;color:var(--blue-dark);white-space:nowrap}

/* --- Прочее --- */
.tm-hl{color:var(--blue)}
.uk-light .tm-hl{color:var(--blue-sky)}
.tm-kicker{display:flex;align-items:center;gap:12px}
.tm-row-small{display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center}
.tm-row{display:flex;flex-wrap:wrap;gap:16px}
.tm-foot-bottom{gap:14px 30px;border-top:1px solid var(--on-ink-line)}
.tm-foot{overflow:hidden;background-image:none;background-color:var(--surf-ink);
  border-top:1px solid var(--on-ink-line-2)}


/* =========================================================================
   МОСТ СЛОЁВ — фирменные значения структурных токенов шаблона wmarka.
   Собрано tools/css.py. Здесь и только здесь фирменный слой знает об именах
   токенов шаблона; сама тема выше про шаблон ничего не знает.
   ========================================================================= */
:root{
  --dark-primary:var(--ink);
  --white-bg:var(--white);
  --tm-text-main:var(--ink);
  --tm-text-muted:var(--muted);
  --tm-border:var(--line);
  --tm-mono:var(--mono);
  --gold-brand:var(--blue);
  --gold-deep:var(--blue-dark);
  --gold-light:var(--wash);
  --gold-pale:var(--paper);
  --rust:var(--terra);
  --wm-ico:var(--blue);
  --wm-anchor:84px;
}
@media(max-width:639px){ :root{ --wm-anchor:76px; } }

/* Шапка всегда на светлой подложке. Она может оказаться внутри инверсного
   контекста — от секции, от офф-канваса, от перенесённой UIkit в конец body
   модалки, — и тогда тёмный вариант знака и штрих гамбургера сливаются с
   фоном. Правило страхует от этого, не отменяя инверсию для самого знака:
   парный светлый лоckup выводится рядом и выбирается механизмом UIkit. */
.uk-light .uk-navbar-container:not(.uk-navbar-transparent),
.uk-dark .uk-navbar-container:not(.uk-navbar-transparent){
  background:rgba(245,248,251,.94);border-bottom:1px solid var(--line)}
.uk-light .uk-navbar-container .uk-navbar-nav>li>a,
.uk-dark .uk-navbar-container .uk-navbar-nav>li>a{color:var(--ink-2)}
.uk-light .uk-navbar-container .uk-navbar-toggle,
.uk-dark .uk-navbar-container .uk-navbar-toggle,
.uk-light .uk-navbar-container .uk-navbar-item,
.uk-dark .uk-navbar-container .uk-navbar-item{color:var(--ink)}

/* Активный пункт меню: печать под словом.
   Цвета одного мало — в строке из пяти пунктов, набранных одним кеглем и
   одним трекингом, глаз не ловит оттенок. Полоса цвета печати читается
   сразу и не спорит с типографикой: она под строкой, а не в ней.
   Толщина и положение подобраны так, чтобы совпасть с нижней линией
   моноширинных прописных.
   Движения нет — только прозрачность: сдвиг на наведении заставляет
   перецеливаться. */
.uk-navbar-container .uk-navbar-nav>li>a{position:relative}
.uk-navbar-container .uk-navbar-nav>li>a::after{content:"";position:absolute;
  left:11px;right:11px;bottom:24px;height:2px;background:var(--terra);
  opacity:0;transition:opacity .2s ease}
.uk-navbar-container .uk-navbar-nav>li.uk-active>a::after{opacity:1}
.uk-navbar-container .uk-navbar-nav>li>a:hover::after{opacity:.35}

/* Тот же приём в полотне меню, по его масштабу */
.tm-sheet .uk-nav-primary>li.uk-active>a{color:var(--blue-sky)}
.tm-sheet .uk-nav-primary>li.uk-active>a::before{content:"";display:inline-block;
  width:18px;height:2px;margin-right:14px;vertical-align:middle;background:var(--terra)}

/* Лупа в шапке: тот же размер цели, что у переключателя полотна */
.tm-search-link{display:flex;align-items:center;justify-content:center;
  min-height:44px;min-width:44px;color:var(--ink);transition:color .2s ease}
.tm-search-link:hover,.tm-search-link:focus{color:var(--blue)}
.tm-search-link svg{width:19px;height:19px}

/* Акцент внутри заголовка: цвет печати на смысловом итоге фразы.
   Не отдельный размер и не другое начертание — только цвет: заголовок
   должен остаться одной фразой, а не распасться на две. */
.tm-accent{color:var(--blue)}

/* Строчный предлог в наборе прописными: приём против сплошной стены.
   Начертание оставляем полужирным, иначе предлог проваливается. */
/* Кегль заголовка главной. В теме он clamp(...,76px) и рассчитан на фразу
   без жёстких переносов: браузер тогда сам ломает строку где влезет. Здесь
   разбивка задана по смыслу — действие, предмет, результат, — и самая
   длинная доля «в работающие сделки» при 76 px занимает 1085 px в колонке
   898. Замер дал предельные 62 px; ставим 60 с запасом на другие гарнитуры
   и масштаб текста в браузере. */
/* Мера 18ch в теме рассчитана на заголовок, который браузер ломает сам:
   ограничение ширины и есть механизм переноса. Здесь переносы заданы
   вручную по смыслу, и мера только мешает — она резала строку «в работающие
   сделки» на две. Снимаем меру, кегль опускаем до 60: при нём самая длинная
   доля занимает 857 px в колонке 968. */
.tm-hero h1.uk-heading-2xlarge{font-size:clamp(29px,4.6vw,68px);max-width:none}
.uk-light .tm-accent,.uk-section-secondary .tm-accent{color:var(--blue-sky)}

/* Шаги процесса: строки выровнены по колонкам, а не каждая сама по себе.

   Четыре шага — четыре независимые колонки, и в каждой заголовок занимает
   свою высоту: «Сужаем рынок» одну строку, «Сопоставляем и ведём переговоры»
   две. Описания начинались на разной высоте — замер дал разброс 29 px. Глаз
   читает это как сбитую вёрстку: строки прыгают.

   Выравниваем сеткой, а не подпоркой в виде min-height. Список становится
   гридом на три ряда (номер, заголовок, описание), каждый шаг наследует эти
   ряды через subgrid — и высоту ряда задаёт самый высокий заголовок среди
   всех четырёх. Добавится пятый шаг с тремя строками — выровняется само,
   без правки чисел.

   Список размечен тегом ol, а не ul: нумерованный по смыслу. Селектор
   покрывает оба — правило не должно зависеть от того, каким тегом сверстан
   список.

   Только с широких экранов: ниже шаги идут друг под другом, выравнивать
   нечего. */
@media(min-width:1200px){
  ol.tm-stages,ul.tm-stages{display:grid;grid-template-columns:repeat(4,1fr);
    grid-template-rows:auto auto auto;column-gap:clamp(24px,2.4vw,44px);
    margin-left:0}
  ol.tm-stages>li.tm-step,ul.tm-stages>li.tm-step{display:grid;grid-row:span 3;grid-template-rows:subgrid;
    padding-left:0;align-content:start;
    /* UIkit задаёт пункту width:25% для флексовой раскладки. В гриде это
       становится четвертью уже самой колонки, и текст сжимается в столбик
       по два слова. Ширину задаёт колонка, пункт её только заполняет */
    width:auto;max-width:none}
  ol.tm-stages>li.tm-step>.tm-step-id,
  ul.tm-stages>li.tm-step>.tm-step-id{align-self:start}
}

/* Надзаголовок не заезжает под глиф в вырезе.

   Глиф стоит по центру секции, абсолютно, в вырезе кромки. Надзаголовок
   прижат влево. На широком экране они расходятся: контейнер шире, и строка
   «01 · Как мы работаем» до середины не доходит. На узком доходит — замер
   дал тринадцать наложений на 390 и 768 px и ноль на 1440.

   Опускаем содержимое секции ниже глифа, а не прячем его: глиф отмечает
   стык секций, и на узком экране, где стык виден хуже всего, он нужнее.
   Отступ равен высоте глифа и его собственному отступу сверху. */
@media(max-width:959px){
  .tm-knife-glyph ~ .uk-container{padding-top:calc(38px + 12px)}
}

/* Заголовки не рвутся посреди слова.

   Обёртка модуля несёт uk-text-break, а это overflow-wrap:break-word — оно
   наследуется всем содержимым. На длинном слове в узкой карточке браузер
   рвёт его где придётся: «АВТОМАТИЗИРОВАНН / АЯ КОФЕЙНАЯ ТОЧКА».

   Заголовкам возвращаем обычный перенос по словам. Расстановку по слогам
   тоже отключаем: в крупном наборе заглавными перенос со знаком читается
   как дефект вёрстки. Вместо этого сокращены сами заголовки — длинных слов
   в них больше нет, и переносить нечего.

   Абзацы не трогаем: там слова короче колонки. */
.tm-art [class*="uk-heading-"],
.uk-panel [class*="uk-heading-"],.uk-panel .uk-h1,.uk-panel .uk-h2,
.uk-panel .uk-h3,.uk-panel .uk-h4,.uk-panel h1,.uk-panel h2,.uk-panel h3{
  overflow-wrap:normal;word-break:normal;hyphens:none}

/* Срез на портрете — по размеру портрета.

   Мера среза в теме задана в пикселях от ширины окна: clamp(30px,3.6vw,60px).
   Для кадра во всю ширину это 4% и читается как фирменная деталь. Портрет же
   выводится в 135 px, и те же 52 px превращаются в 39% ширины — диагональ
   срезает угол вместе с головой. Замер по всем фигурам сайта: у остальных
   двадцати доля среза 2–8%, портрет единственный выброс.

   Здесь своя мера, дающая те же 9% и на широком экране, и на телефоне. Срез
   остаётся, портрет перестаёт выглядеть надорванным. */
.tm-portrait.tm-cut-tr{
  clip-path:polygon(0 0,calc(100% - clamp(9px,.85vw,14px)) 0,
  100% clamp(9px,.85vw,14px),100% 100%,0 100%)}

/* Плашка-ремарка на тёмной карточке: контур, а не белый блок.

   Тема рисует .uk-label контуром: фона нет, рамка и текст цветные. Но UIkit
   для инверсных карточек ставит .uk-card-secondary.uk-card-body .uk-label с
   белой заливкой, и его селектор специфичнее темы — на тёмных карточках
   плашка превращалась в белый прямоугольник во всю строку.

   Повторяем селекторы UIkit один в один: на равной специфичности выигрывает
   тот, кто объявлен позже, а фирменный слой идёт последним. */
.uk-card-secondary.uk-card-body .uk-label,
.uk-card-secondary>:not([class*=uk-card-media]) .uk-label,
.uk-section-secondary:not(.uk-preserve-color) .uk-label{
  background:none;border-color:var(--on-ink-line-2);color:var(--on-ink-dim)}
/* Тон печати на карточке — светлее общего --terra-on-ink.

   Фон карточки не чернила, а на два шага светлее: rgb(36,56,74). Штатный
   тон даёт на нём 4.45:1 при норме 4.5 для мелкого текста — промах на
   сотые. Плашка набрана моноширинным в 11 px, послаблений для крупного
   текста тут нет.

   Отсюда собственный тон: 4.8:1 у текста, 3.3:1 у рамки при норме 3:1 для
   нетекстовых границ. Рамка — тот же цвет при 75%: она обводит плашку, а не
   спорит с надписью. */
.uk-card-secondary.uk-card-body .uk-label-warning,
.uk-card-secondary>:not([class*=uk-card-media]) .uk-label-warning,
.uk-section-secondary:not(.uk-preserve-color) .uk-label-warning{
  border-color:color-mix(in srgb,#DE9163 75%,transparent);
  color:#DE9163}

/* Полотно меню: колонки делает стиль, а не разметка.

   Список один. От средних экранов и шире он раскладывается сеткой по
   колонкам: число строк приходит из разметки переменной --wm-rows, потому
   что в CSS количество пунктов меню неизвестно.

   На узком экране правило не действует, и список остаётся списком — с
   ровными интервалами и разделителями между всеми пунктами. Прежде колонок
   было две в разметке, и на стыке оставался разрыв в высоту отступа сетки
   без линии: меню разваливалось надвое посередине.

   У пункта, открывающего вторую колонку, снимаем верхнюю линейку: в своей
   колонке он первый, а UIkit ставит её всем, кроме первого в списке. */
.tm-sheet-nav{margin-bottom:0}
@media(min-width:960px){
  .tm-sheet-nav{display:grid;grid-auto-flow:column;
    grid-template-rows:repeat(var(--wm-rows,4),auto);
    column-gap:clamp(40px,5vw,90px)}
  .tm-sheet-nav>li.wm-col-2{border-top:none}
}

/* Цвет по наведению там, где карточка не ссылка.

   В теме есть правило «a:hover .tm-duo img{filter:none}» — кадр теряет
   дуотон и оживает. Работает оно только внутри ссылки, поэтому в проектах
   срабатывает, а в решениях нет: карточка решения это div, ссылаться ей
   некуда, детальных страниц у направлений не существует.

   Два правила вместо одного. Первое ловит наведение на ВСЮ карточку
   решения — так же, как в проектах ловится вся карточка-ссылка. Второе
   работает от самого кадра и закрывает остальные блоки без ссылки: полосу
   на главной, врезку компании, хиро проверки контрагентов.

   Переходы уже описаны у .tm-duo, добавлять их сюда не нужно — иначе на
   уходе курсора кадр гас бы рывком. */
.tm-sol:hover .tm-duo img,
.tm-work:hover .tm-duo img,
.tm-duo:hover img{filter:none}
.tm-sol:hover .tm-duo::after,
.tm-work:hover .tm-duo::after,
.tm-duo:hover::after{opacity:0}

/* Текст внутри карточки-ссылки выделяется мышью.
   По умолчанию протаскивание внутри <a> начинает перетаскивание ссылки, а
   не выделение: скопировать название кейса или цифру из карточки нельзя. */
a.tm-case,a.tm-work{-webkit-user-drag:none;user-select:text}

/* Цитата: ромбические кавычки подложкой.

   Знак — версия С ОБВОДКОЙ: ромб залит, хвост идёт линией, между ними
   остаётся характерный вырез. Контурная версия из спрайта на увеличении
   даёт другую фигуру — хвост отрывается от ромба и читается как молоток,
   а не как кавычка.

   viewBox поджат ПО ФАКТИЧЕСКИМ границам рисунка, снятым растеризацией:
   обводка выходит за координаты фигур примерно на 0.6, и viewBox из файла
   иконки срезал левый ромб по краю. Пропорция 1.50 взята оттуда же.

   Маска, а не тег <use>: маска красится обычным background, поэтому цвет и
   прозрачность задаются стилем, а файл не трогается. И ничего не нужно
   дописывать в разметку — подложку получают все цитаты, включая будущие.

   Прозрачность низкая намеренно: это водяной знак под текстом, а не второй
   акцент рядом с левой линейкой.

   ОТКОС. Поле срезано по верхнему правому углу тем же приёмом и той же
   мерой, что кадры и карточки сайта — clamp(30px,3.6vw,60px), как у
   .tm-cut-tr. Так цитата перестаёт быть просто прямоугольником с картинкой
   внутри и собирается в один объект фирменного языка: знак в левом верхнем
   углу, срез в правом верхнем.

   Срез не отдельным классом, а прямо здесь: дописать класс к семидесяти
   четырём цитатам в текстах нельзя, да и новые пришлось бы помечать вручную.
   Значение продублировано из .tm-cut-tr сознательно — меняете там, меняйте
   и тут; проверка приёмки следит, что откос не пропал. */
blockquote.tm-quote{position:relative;isolation:isolate;
  clip-path:polygon(0 0,calc(100% - clamp(30px,3.6vw,60px)) 0,
  100% clamp(30px,3.6vw,60px),100% 100%,0 100%)}
blockquote.tm-quote::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  left:clamp(18px,2.2vw,34px);top:clamp(10px,1.4vw,22px);
  width:clamp(130px,14vw,210px);aspect-ratio:16.1800/10.7800;
  background:var(--blue);opacity:.14;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1.40 5.02 16.18 10.78' fill='black' stroke='black' stroke-width='1.2' stroke-linecap='miter' stroke-linejoin='miter'%3E%3Cpolygon points='5,9.6 7.6,12.2 5,14.8 2.4,12.2'/%3E%3Cline x1='5' y1='9.6' x2='9' y2='5.6'/%3E%3Cpolygon points='13,9.6 15.6,12.2 13,14.8 10.4,12.2'/%3E%3Cline x1='13' y1='9.6' x2='17' y2='5.6'/%3E%3C/svg%3E") no-repeat left top/contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1.40 5.02 16.18 10.78' fill='black' stroke='black' stroke-width='1.2' stroke-linecap='miter' stroke-linejoin='miter'%3E%3Cpolygon points='5,9.6 7.6,12.2 5,14.8 2.4,12.2'/%3E%3Cline x1='5' y1='9.6' x2='9' y2='5.6'/%3E%3Cpolygon points='13,9.6 15.6,12.2 13,14.8 10.4,12.2'/%3E%3Cline x1='13' y1='9.6' x2='17' y2='5.6'/%3E%3C/svg%3E") no-repeat left top/contain}
.uk-light blockquote.tm-quote::before,
.uk-section-secondary blockquote.tm-quote::before{background:var(--on-ink);opacity:.16}

/* На тёмной секции светлое поле неуместно: там оно должно быть плёнкой на
   чернилах, а не заплаткой цвета бумаги.

   Цвет текста тоже приходится задавать здесь: в теме он прибит к чернилам
   без оглядки на контекст. На тёмной секции цитата выходила чернилами по
   чернилам — нечитаемо. Раньше это не бросалось в глаза, потому что цитата
   не имела своего поля и сливалась с секцией целиком. */
.uk-light blockquote.tm-quote,
.uk-section-secondary blockquote.tm-quote{background:rgba(245,248,251,.06)}
.uk-light blockquote.tm-quote p,
.uk-section-secondary blockquote.tm-quote p{color:var(--on-ink)}

/* Фоновый кадр секции.
   Обработка та же, что у всех снимков сайта: обесцвечивание, синий тон,
   затемнение. Поверх — вуаль чернил градиентом, чтобы текст читался по всей
   ширине.

   Настройки подобраны замером В БРАУЗЕРЕ, а не расчётом. Расчёт сначала дал
   7.4:1, отрисовка — 3.7:1: mix-blend-mode:color сохраняет яркость снимка и
   берёт от синего только тон, а модель перемножала каналы и потому занижала
   светлоту вдвое. Правильный способ проверки один — погасить содержимое,
   снять страницу и найти самый светлый пиксель фона.

   Текущие значения дают 5.3:1 при норме AA 4.5:1 и оставляют кадр хорошо
   читаемым. Меняете снимок — перемеряйте: тёмная фотография не гарантия,
   контраст определяет самое светлое пятно, а не средняя яркость. */
.tm-shade{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.tm-shade img{width:100%;height:100%;object-fit:cover;object-position:center;
  filter:grayscale(1) contrast(1.08) brightness(.62)}
.tm-shade::after{content:"";position:absolute;inset:0;z-index:1;
  background:var(--blue);mix-blend-mode:color;opacity:.92}
.tm-shade::before{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(100deg,var(--ink) 0%,var(--ink) 34%,
  color-mix(in srgb,var(--ink) 82%,transparent) 58%,
  color-mix(in srgb,var(--ink) 44%,transparent) 100%)}

/* На узком экране колонки складываются в одну, и текст занимает всю ширину
   — там, где на широком был светлый край градиента. Замер на 390 px дал
   2.8:1 при тех же настройках. Поэтому вуаль здесь идёт сверху вниз и
   плотнее: 7.1:1 при норме 4.5, кадр при этом виден лучше, чем на широком. */
@media(max-width:959px){
  .tm-shade::before{background:linear-gradient(180deg,
    color-mix(in srgb,var(--ink) 52%,transparent) 0%,
    color-mix(in srgb,var(--ink) 78%,transparent) 100%)}
}

/* Плетёнка поверх кадра гасится: два узора спорят между собой */
.tm-has-shade .tm-hatch{opacity:.3}
.tm-has-shade>.uk-container{z-index:1}

/* Кнопка закрытия полотна — в правый верхний угол.
   Правило .tm-sheet>* ставит всем прямым детям position:relative, и кнопка
   закрытия попадала под него: UIkit держит её на absolute с top/right, а
   relative это отменяет — кнопка вставала в поток, то есть слева сверху и
   наполовину за краем. Возвращаем absolute селектором на класс: он
   специфичнее, чем .tm-sheet>*, и не трогает остальных детей. */
.tm-sheet>.uk-modal-close-full{position:absolute;z-index:4}

/* Страница ошибки: печать отказа.
   Код набран крупно и приглушённо — он справка, а не заголовок; заголовок
   тут словами. Знак лежит поверх косо, как штамп на непропущенном
   документе: цвет печати, невысокая непрозрачность, лёгкий наклон.
   Анимации нет: ошибка не повод развлекать. */
.tm-err-body{background:var(--ink)}
.tm-err{min-height:100vh;display:flex;align-items:center}
.tm-err-stamp{position:relative;display:flex;align-items:center;justify-content:center;
  min-height:clamp(220px,26vw,340px)}
.tm-err-code{font-family:var(--mono);font-weight:700;font-variant-numeric:tabular-nums;
  font-size:clamp(96px,15vw,210px);line-height:.9;letter-spacing:-.04em;
  color:var(--on-ink-line-2)}
.tm-err-mark{position:absolute;width:clamp(150px,19vw,250px);height:auto;
  color:var(--terra);opacity:.5;transform:rotate(-11deg)}

/* Знак не должен схлопнуться до нуля во флекс-строке шапки */
/* display здесь НЕ задаём. UIkit скрывает инверсный знак правилом
   .uk-logo-inverse{display:none}, а показ самого знака делает правилом с
   :where(), у которого нулевая специфичность. Собственное display:block с
   классом (0,1,0) перебивало скрытие на равной специфичности — и в шапке
   рисовались оба лоckup'а сразу. */
.tm-logo-mark{flex:0 0 auto;height:auto;max-width:100%}
.tm-burger{flex:0 0 auto;display:block;width:16px;height:31px}

/* Заголовок материала — без верхнего регистра.
   Капслок работает на коротком названии раздела: «УСЛУГИ», «ЧТО МЕНЯЕТСЯ
   СЕЙЧАС». Заголовок разбора — это фраза на 15–20 слов с двоеточием и
   тире; набранная капслоком, она читается по буквам, а не по словам, и
   теряет интонацию, ради которой и написана. Плотный трекинг там тоже
   лишний: он рассчитан на крупные короткие слова. */
.tm-h1-plain{text-transform:none;letter-spacing:-.015em;line-height:1.14;
  font-size:clamp(27px,4.2vw,58px);max-width:22ch}

/* Запасное начертание логотипа: показывается, когда спрайта знаков нет.
   Не «как в макете», а читаемо и в ритме бренда — задача этого правила
   в том, чтобы отсутствие файла не выглядело как развалившаяся вёрстка. */
.tm-logo-text{font-family:var(--sans);font-weight:900;font-size:20px;
  letter-spacing:-.02em;text-transform:uppercase;color:currentColor}