/* ============================================================================
   АэроКлимат 3 — собственная вёрстка, без Bootstrap.
   Палитра выведена из логотипа. Оранжевый — только на действии.
   ========================================================================== */

:root{
  --navy-900:#0b0e2c;
  --navy-800:#12163c;
  --navy-700:#1f2166;
  --navy-600:#2d3180;
  --steel-500:#7c86a8;
  --steel-300:#b9c0d4;
  --paper:#ffffff;
  --paper-soft:#f4f6fb;
  --paper-line:#e3e7f1;
  --ink:#151827;
  --ink-soft:#4a5065;
  --accent:#ef6c1f;
  --accent-600:#d75c14;

  --max:1240px;
  --gut:28px;
  --r-lg:24px;
  --r-md:14px;
  --r-sm:10px;

  --sh-1:0 1px 2px rgba(11,14,44,.05), 0 2px 8px rgba(11,14,44,.04);
  --sh-2:0 4px 12px rgba(11,14,44,.06), 0 16px 40px rgba(11,14,44,.08);
  --sh-3:0 8px 20px rgba(11,14,44,.10), 0 32px 64px rgba(11,14,44,.14);

  --f-display:"Unbounded",system-ui,sans-serif;
  --f-body:"Manrope",system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;
  font-family:var(--f-body);
  font-size:17px;line-height:1.65;
  color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy-700);text-decoration:none}
a:hover{text-decoration:none}
h1,h2,h3,h4{margin:0;font-family:var(--f-display);font-weight:500;letter-spacing:-.02em;line-height:1.1}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
ul,ol{margin:0;padding:0}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}

/* skip link — из ядра, но в наших цветах */
.element-invisible{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}
.element-focusable:active,.element-focusable:focus{position:static!important;clip:auto;height:auto;width:auto;padding:10px 16px;background:var(--navy-800);color:#fff;z-index:200;display:inline-block}

/* ─── микрометка раздела ─────────────────────────────────────────── */
.ak-label{
  display:flex;align-items:center;gap:14px;
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--steel-500);margin-bottom:22px;
}
.ak-label::after{content:"";flex:1;height:1px;background:var(--paper-line);max-width:120px}
.ak-label .idx{color:var(--accent);font-variant-numeric:tabular-nums}

/* ─── шапка ──────────────────────────────────────────────────────── */
.hdr{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease,background .25s ease;
}
.hdr.is-stuck{border-bottom-color:var(--paper-line);background:rgba(255,255,255,.94)}
.hdr-in{display:flex;align-items:center;gap:36px;height:78px;transition:height .25s ease}
.hdr.is-stuck .hdr-in{height:64px}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.brand img{height:38px;width:auto}
.brand .rule{width:34px;height:2px;background:var(--accent)}
.nav{display:flex;gap:24px;margin-left:auto;font-size:14.5px;font-weight:600;list-style:none}
.nav li{margin:0}
.nav a{position:relative;color:var(--ink-soft);padding:6px 0;transition:color .18s ease;display:inline-block;white-space:nowrap}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--accent);transition:right .22s cubic-bezier(.4,0,.2,1)}
.nav a:hover,.nav .is-active a{color:var(--navy-700)}
.nav a:hover::after,.nav .is-active a::after{right:0}
.hdr-cta{display:flex;align-items:center;gap:18px}
.tel{font-family:var(--f-display);font-weight:500;font-size:18px;color:var(--navy-800);white-space:nowrap;line-height:1.2}
.tel small{display:block;font-family:var(--f-body);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--steel-500);margin-top:3px}
.burger{display:none;width:44px;height:44px;border:1px solid var(--paper-line);border-radius:var(--r-sm);background:#fff;cursor:pointer;padding:0}
.burger span{display:block;width:18px;height:2px;background:var(--navy-800);margin:4px auto}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 26px;border-radius:var(--r-md);
  font-weight:700;font-size:15px;letter-spacing:.01em;font-family:var(--f-body);
  border:1px solid transparent;cursor:pointer;text-decoration:none;
  transition:transform .18s cubic-bezier(.4,0,.2,1),box-shadow .18s ease,background .18s ease,border-color .18s ease;
}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 6px 18px rgba(239,108,31,.28)}
.btn-primary:hover{background:var(--accent-600);color:#fff;transform:translateY(-2px);box-shadow:0 10px 26px rgba(239,108,31,.34)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.34)}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff}
.btn .arw{transition:transform .2s ease}
.btn:hover .arw{transform:translateX(4px)}

/* ─── герой страницы (блок в регионе header) ─────────────────────── */
.ak-hero{position:relative;background:var(--navy-900);color:#fff;overflow:hidden}
.ak-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.06);transition:transform 1.6s cubic-bezier(.2,.6,.2,1)}
.js .ak-hero.ready .ak-hero-bg{transform:scale(1)}
/* вместо прежней белой маски 60% — синий скрим: фото читается, текст контрастен */
.ak-hero-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(11,14,44,.94) 0%,rgba(11,14,44,.80) 42%,rgba(11,14,44,.34) 78%,rgba(11,14,44,.52) 100%),
    linear-gradient(180deg,rgba(11,14,44,.55) 0%,transparent 30%);
}
.ak-hero-grid{
  position:absolute;inset:0;opacity:.16;
  background-image:linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 90% at 12% 40%,#000 20%,transparent 72%);
  mask-image:radial-gradient(120% 90% at 12% 40%,#000 20%,transparent 72%);
}
/* ВАЖНО: .ak-hero-in — это он же элемент .wrap. Шортханд padding здесь
   сбрасывал горизонтальный паддинг .wrap{padding:0 var(--gut)}, из-за чего
   текст героя прижимался к краю: x=100 против x=128 у остального контента на
   1440px и x=0 вместо 18px на 390px. Гуттер обязан быть в этом правиле.
   Нижний паддинг раньше был 0 — кнопки героя («Позвонить сейчас», телефон)
   прилипали к нижней границе тёмного блока (зазор 0px на /услуги,
   /о-компании и всех /node/163xx). */
.ak-hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:56px;padding:104px var(--gut) 72px}
.ak-hero-in.solo{grid-template-columns:minmax(0,1fr)}
.ak-hero h1{font-size:clamp(32px,4.4vw,58px);font-weight:500;max-width:20ch;color:#fff}
.ak-hero h1 .em{color:var(--accent);font-weight:700}
.ak-hero-sub{margin-top:24px;max-width:54ch;color:rgba(255,255,255,.78);font-size:18px}
.ak-hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.ak-facts{display:flex;flex-direction:column;border-top:1px solid rgba(255,255,255,.18)}
.ak-fact{padding:20px 0;border-bottom:1px solid rgba(255,255,255,.18)}
.ak-fact b{display:block;font-family:var(--f-display);font-weight:500;font-size:29px;letter-spacing:-.02em;color:#fff}
.ak-fact span{display:block;margin-top:4px;font-size:14px;color:rgba(255,255,255,.62)}
.ak-hero-strip{position:relative;margin-top:72px;border-top:1px solid rgba(255,255,255,.16);display:grid;grid-template-columns:repeat(4,1fr);gap:0 24px}
.ak-hero-strip div{padding:22px 0;font-size:14px;color:rgba(255,255,255,.66)}
.ak-hero-strip b{display:block;font-family:var(--f-display);font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#fff;margin-bottom:6px}

/* ─── секции ─────────────────────────────────────────────────────── */
.ak-sec{padding:88px 0}
.ak-sec-soft{background:var(--paper-soft)}
/* Внутренний боковой отступ тонированной панели. Без него текст и разделители
   упёрлись в край подложки: панель 18→372, текст 18→367 на 390px (зазор 0px
   слева и 5px справа) и padL 0 на всех страницах десктопа.
   Специфичность .ak-sec.ak-sec-soft (0,2,0) нужна потому, что ниже в файле
   стоит шортханд .ak-sec{padding:72px 0} в мобильном запросе — он сбрасывал
   левый/правый паддинг в 0. */
.ak-sec.ak-sec-soft{padding-left:32px;padding-right:32px}
.ak-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:56px}
/* страница уже оборачивает контент в .wrap (паддинг по горизонтали), и каждая
   секция внутри снова в своём .wrap — двойные 36px с каждой стороны сжимали
   колонку до 303px, из-за чего «Кондиционирование:» (334px) из неё вылезало.
   Внутренний паддинг убираем: секции в контенте ровняются по заголовку. */
.ak-content .ak-sec > .wrap{padding-left:0;padding-right:0}
.ak-sec-head h2{font-size:clamp(28px,3.4vw,44px);max-width:22ch;color:var(--navy-800)}
.ak-sec-head p{max-width:40ch;color:var(--ink-soft);margin:0}
.block-title{font-size:clamp(28px,3.4vw,44px);color:var(--navy-800);margin-bottom:40px}

/* преимущества: данные крупно, 2×2 на хайрлайнах */
.ak-adv{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--paper-line);list-style:none}
.ak-adv-item{padding:36px 32px 36px 0;border-bottom:1px solid var(--paper-line)}
.ak-adv-item:nth-child(even){padding-left:32px;border-left:1px solid var(--paper-line)}
.ak-adv-num{font-family:var(--f-display);font-weight:300;font-size:clamp(40px,5vw,64px);line-height:1;letter-spacing:-.03em;color:var(--navy-700)}
.ak-adv-num .u{font-size:.42em;color:var(--accent);margin-left:6px;letter-spacing:0}
.ak-adv-item h3{margin-top:14px;font-family:var(--f-body);font-weight:700;font-size:18px;letter-spacing:0;color:var(--navy-800)}
.ak-adv-item p{margin-top:10px;color:var(--ink-soft);font-size:15.5px;max-width:38ch}
/* Список частных задач (/услуги) и ссылки на нормативку (/о-компании).
   Padding 12px по вертикали держит цель тапа >=44px на мобильном. */
.ak-sublinks{list-style:none;margin:12px 0 0;padding:0}
.ak-sublinks li{margin:0;border-top:1px solid var(--paper-line)}
.ak-sublinks a{display:block;position:relative;padding:12px 22px 12px 0;font-size:15px;font-weight:600;color:var(--ink-soft);text-decoration:none;transition:color .18s ease}
.ak-sublinks a::after{content:"\2192";position:absolute;right:2px;top:12px;color:var(--accent);opacity:0;transition:opacity .18s ease}
.ak-sublinks a:hover{color:var(--navy-700)}
.ak-sublinks a:hover::after{opacity:1}
/* детальных страниц услуг больше нет — пункты списка идут как <span> */
.ak-sublinks li span{display:block;padding:12px 0;font-size:15px;font-weight:600;color:var(--ink-soft)}
.ak-doclink{display:inline-block;margin-top:12px;padding:12px 0;font-weight:700;font-size:15px;color:var(--accent);text-decoration:none}
.ak-doclink .arw{display:inline-block;margin-left:4px;transition:transform .2s ease}
.ak-doclink:hover .arw{transform:translateX(4px)}

/* услуги: редакционные строки, фото выезжает при наведении */
.ak-svc{border-top:1px solid var(--paper-line);list-style:none}
.ak-svc-row{
  /* Колонка описания была auto (max-content) и на планшетах съедала место:
     колонка заголовка сжималась до 83px, где слово «вентиляционных» в Unbounded
     20px не помещалось — текст обрезался (overflow:hidden на строке).
     Обе текстовые колонки теперь эластичные. */
  display:grid;grid-template-columns:64px minmax(0,1.15fr) minmax(0,1fr) 56px;
  align-items:center;gap:28px;padding:34px 0;border-bottom:1px solid var(--paper-line);
  position:relative;overflow:hidden;text-decoration:none;color:inherit;
  transition:padding .3s cubic-bezier(.4,0,.2,1);
}
.ak-svc-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(--navy-800);z-index:0;transition:width .45s cubic-bezier(.65,0,.35,1)}
.ak-svc-row > *{position:relative;z-index:1}
.ak-svc-row:hover{padding:44px 24px}
.ak-svc-row:hover::before{width:100%}
.ak-svc-i{font-family:var(--f-display);font-weight:300;font-size:15px;color:var(--steel-500);font-variant-numeric:tabular-nums}
.ak-svc-t{font-family:var(--f-display);font-weight:500;font-size:clamp(20px,2.4vw,30px);letter-spacing:-.02em;color:var(--navy-800);transition:color .3s ease;display:block}
.ak-svc-d{color:var(--ink-soft);font-size:15px;transition:color .3s ease}
.ak-svc-go{width:52px;height:52px;border:1px solid var(--paper-line);border-radius:50%;display:grid;place-items:center;transition:.3s ease;font-size:18px}
.ak-svc-row:hover .ak-svc-i,.ak-svc-row:hover .ak-svc-d{color:rgba(255,255,255,.66)}
.ak-svc-row:hover .ak-svc-t{color:#fff}
.ak-svc-row:hover .ak-svc-go{border-color:var(--accent);background:var(--accent);color:#fff}
.ak-svc-thumb{
  position:absolute;right:120px;top:50%;width:190px;height:120px;border-radius:var(--r-md);
  overflow:hidden;opacity:0;translate:24px -50%;box-shadow:var(--sh-3);
  transition:opacity .35s ease,translate .45s cubic-bezier(.65,0,.35,1);
}
.ak-svc-thumb img{width:100%;height:100%;object-fit:cover}
.ak-svc-row:hover .ak-svc-thumb{opacity:1;translate:0 -50%}

/* этапы */
.ak-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;position:relative;list-style:none}
.ak-steps::before{content:"";position:absolute;left:0;right:0;top:23px;height:1px;background:var(--paper-line)}
.ak-step{position:relative}
.ak-step-dot{
  width:46px;height:46px;border-radius:50%;background:#fff;border:1px solid var(--paper-line);
  display:grid;place-items:center;font-family:var(--f-display);font-weight:500;font-size:15px;
  color:var(--navy-700);position:relative;z-index:1;transition:.3s ease;
}
.ak-step:hover .ak-step-dot{background:var(--navy-800);border-color:var(--navy-800);color:#fff;transform:scale(1.08)}
.ak-step h3{margin-top:18px;font-family:var(--f-body);font-weight:700;font-size:16.5px;color:var(--navy-800)}
.ak-step p{margin-top:10px;font-size:14.5px;color:var(--ink-soft)}

/* объекты: мозаика фото */
.ak-mosaic{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:150px;gap:16px;margin:0}
.ak-tile{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--navy-800);margin:0}
.ak-tile img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.6,.2,1)}
.ak-tile:hover img{transform:scale(1.07)}
.ak-tile figcaption{position:absolute;left:16px;right:16px;bottom:16px;color:#fff;font-weight:600;font-size:15px;z-index:2}
.ak-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(11,14,44,.72) 100%)}
.ak-t-a{grid-column:span 3;grid-row:span 2}
.ak-t-b,.ak-t-c{grid-column:span 3}
.ak-t-d,.ak-t-e,.ak-t-f{grid-column:span 2}

/* CTA-полоса */
.ak-cta{background:var(--navy-800);color:#fff;padding:88px 0;position:relative;overflow:hidden}
/* фон задаётся inline-стилем внутри блока, поэтому класс отдельный */
.ak-cta-bg{position:absolute;inset:0;opacity:.10;background-size:cover;background-position:center}
.ak-cta::before{content:"";position:absolute;inset:0;opacity:.10;background-size:cover;background-position:center}
.ak-cta-in{position:relative;display:flex;align-items:center;justify-content:space-between;gap:48px;flex-wrap:wrap}
.ak-cta h2{font-size:clamp(26px,3.2vw,40px);max-width:20ch;color:#fff}
.ak-cta p{margin-top:14px;color:rgba(255,255,255,.7);max-width:44ch}
.ak-cta-tel{font-family:var(--f-display);font-weight:500;font-size:clamp(26px,3.4vw,42px);letter-spacing:-.02em;white-space:nowrap;color:#fff;display:block}
.ak-cta-tel small{display:block;font-family:var(--f-body);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:6px}

/* контакты: форм нет — только телефон, почта, адрес, график */
.ak-contacts{display:grid;gap:28px}
.ak-contact-tel{
  display:block;background:var(--navy-800);color:#fff;border-radius:var(--r-lg);
  padding:40px 44px;position:relative;overflow:hidden;text-decoration:none;
  transition:transform .25s cubic-bezier(.4,0,.2,1),box-shadow .25s ease;
}
.ak-contact-tel::before{content:"";position:absolute;inset:0;opacity:.14;background-size:cover;background-position:center;background-image:url(../img/cond-back.jpg)}
.ak-contact-tel > *{position:relative}
.ak-contact-tel:hover{transform:translateY(-3px);box-shadow:var(--sh-3);color:#fff}
.ak-c-label{display:block;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.ak-c-num{display:block;margin-top:10px;font-family:var(--f-display);font-weight:500;font-size:clamp(30px,5vw,58px);letter-spacing:-.02em;color:#fff}
.ak-c-hint{display:block;margin-top:10px;font-size:14px;color:rgba(255,255,255,.6)}
.ak-contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--paper-line);border:1px solid var(--paper-line);border-radius:var(--r-lg);overflow:hidden}
.ak-contact-cell{background:#fff;padding:30px}
.ak-contact-cell h3{margin:0 0 10px;font-family:var(--f-body);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel-500)}
.ak-contact-cell p{font-size:17px;color:var(--navy-800);font-weight:600;line-height:1.5;margin:0}
.ak-c-note{display:block;margin-top:12px;font-size:13.5px;color:var(--ink-soft)}
.ak-contact-grid-2{grid-template-columns:repeat(2,1fr)}

/* прозаические блоки «Сферы применения» на страницах услуг */
.ak-prose{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px}
.ak-prose-item h3{margin:0 0 12px;font-family:var(--f-display);font-weight:500;font-size:clamp(19px,2vw,26px);color:var(--navy-800)}
.ak-prose-item p{color:var(--ink);max-width:52ch}
.ak-prose-note{margin-top:14px;font-size:14.5px;color:var(--ink-soft);padding-left:14px;border-left:2px solid var(--accent)}

/* ─── контейнер контента ─────────────────────────────────── */
.ak-main{background:#fff}
.ak-content{display:grid;grid-template-columns:minmax(0,1fr);gap:0;padding-top:56px;padding-bottom:80px}

/* ─── подвал ─────────────────────────────────────────────────────── */
.ftr{background:var(--navy-900);color:rgba(255,255,255,.72);padding:76px 0 32px}
.ftr-top{display:grid;grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,1fr));gap:48px}
.ftr .brand img{height:44px;width:auto;filter:brightness(0) invert(1)}
.ftr .brand .rule{display:none}
.ftr-brand p{margin-top:18px;max-width:34ch;font-size:15px}
.ftr h4{margin:0 0 16px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45);font-family:var(--f-body)}
.ftr ul{list-style:none;display:grid;gap:11px;font-size:15px}
.ftr ul a{display:block;padding:5px 0}
.ftr a{color:rgba(255,255,255,.78)}
.ftr a:hover{color:#fff}
.ftr .tel{color:#fff;font-family:var(--f-display);font-size:22px;font-weight:500}
.ftr-bot{margin-top:56px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13.5px;color:rgba(255,255,255,.45)}

/* Юридический блок в футере: короткая формула видна всегда, подробности
   под <details> (индексируются, но не давят на дизайн). Без .rv — текст
   не должен зависеть от прокрутки и IntersectionObserver. */
.ftr-legal{margin-top:44px;padding-top:26px;border-top:1px solid rgba(255,255,255,.14);max-width:104ch;font-size:13.5px;line-height:1.62;color:rgba(255,255,255,.5)}
.ftr-legal p{margin:0}
.ftr-legal summary{display:inline-flex;align-items:center;gap:9px;min-height:44px;cursor:pointer;list-style:none;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.ftr-legal summary::-webkit-details-marker{display:none}
.ftr-legal summary::before{content:'';width:0;height:0;flex:none;border-left:5px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform .2s ease}
.ftr-legal details[open] summary::before{transform:rotate(90deg)}
.ftr-legal summary:hover{color:#fff}
.ftr-legal-body{display:grid;gap:14px;margin-top:6px;padding:4px 0 4px 18px;border-left:1px solid rgba(255,255,255,.14)}
.ftr-legal-body b{color:rgba(255,255,255,.8)}
.ftr-legal-body a{text-decoration:underline;text-underline-offset:3px}
/* инлайн-ссылка внутри абзаца давала цель тапа 19px — ниже минимума
   WCAG 2.5.8 (24px); padding на inline-элементе высоты не даёт */
.ftr-legal-body a{display:inline-block;padding:6px 4px}

/* ─── элементы ядра D7 на публичных страницах ────────────────────── */
.messages{border:1px solid var(--paper-line);border-left:4px solid var(--steel-500);background:var(--paper-soft);border-radius:var(--r-sm);padding:16px 20px;margin:24px 0;font-size:15px}
.messages.status{border-left-color:#2f8f5b}
.messages.warning{border-left-color:var(--accent)}
.messages.error{border-left-color:#c0392b}
.pager{display:flex;gap:8px;list-style:none;margin:32px 0;flex-wrap:wrap}
.pager a,.pager .pager-current{display:block;padding:9px 14px;border:1px solid var(--paper-line);border-radius:var(--r-sm);font-size:14px}
.pager .pager-current{background:var(--navy-800);color:#fff;border-color:var(--navy-800)}
.item-list ul.pager li{margin:0}

/* ─── scroll reveal: скрытие только при активном JS ─────────────── */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.6,.2,1)}
.js .rv.in{opacity:1;transform:none}
.js .rv[data-d="1"]{transition-delay:.08s}
.js .rv[data-d="2"]{transition-delay:.16s}
.js .rv[data-d="3"]{transition-delay:.24s}
.js .rv[data-d="4"]{transition-delay:.32s}
.js .rv[data-d="5"]{transition-delay:.40s}

@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none}
  .ak-hero-bg{transform:none}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ─── адаптив ────────────────────────────────────────────────────── */
@media (max-width:1080px){
  .nav{display:none}
  .burger{display:block;margin-left:auto}
  .ak-hero-in{grid-template-columns:1fr;gap:40px;padding:72px var(--gut) 56px}
  /* на десктопе текст живёт в левой колонке и не залезает на слабую
     часть скрима (на 78% ширины затемнение всего 34%). На мобильном
     текст идёт на всю ширину — там скрим должен быть сплошным. */
  .ak-hero-scrim{background:linear-gradient(180deg,rgba(11,14,44,.93) 0%,rgba(11,14,44,.88) 55%,rgba(11,14,44,.74) 100%)}
  .ak-hero-sub{font-size:16px;max-width:38ch}
  /* «кондиционирование» на 32px шире контейнера, а у .ak-hero
     overflow:hidden — слово обрезалось по правому краю */
  .ak-hero h1{font-size:27px;max-width:none;line-height:1.14}
  .ak-facts{flex-direction:row;flex-wrap:wrap;gap:0 32px}
  .ak-fact{flex:1 1 160px;border-left:1px solid rgba(255,255,255,.18);padding-left:18px}
  .ak-hero-strip{grid-template-columns:repeat(2,1fr);margin-top:52px}
  .ak-steps{grid-template-columns:repeat(2,1fr);gap:32px}
  .ak-steps::before{display:none}
  .ak-mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:170px}
  .ak-t-a,.ak-t-b,.ak-t-c,.ak-t-d,.ak-t-e,.ak-t-f{grid-column:span 1;grid-row:span 1}
  .ak-t-a{grid-column:span 2}
  .ftr-top{grid-template-columns:1fr 1fr;gap:36px}
}
@media (max-width:720px){
  :root{--gut:18px}
  .ak-sec{padding:64px 0}
  /* flex row с space-between выталкивал описание за правый край */
  .ak-sec-head{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:36px}
  .ak-sec-head p{max-width:none}
  /* flex-элемент не сжимается ниже min-content, а слово
     «Кондиционирование:» на 28px даёт ~374px — отсюда горизонтальный
     сдвиг на node/16340. overflow-wrap:anywhere порол слово
     («Кондиционирован/ие»), поэтому только min-width + растягивание
     на всю колонку и размер, при котором слово влезает целиком. */
  .ak-sec-head > *{min-width:0;width:100%}
  /* линия после метки не должна раздувать min-content строки */
  .ak-label::after{max-width:56px}
  /* 25px: слово «кондиционирование» в Unbounded = 324px, а колонка на 390px —
     318px, то есть буква обрезалась. 23px даёт 298px и слово влезает. */
  .ak-sec-head h2{max-width:none;font-size:23px;line-height:1.16}
  .ak-adv{grid-template-columns:1fr}
  .ak-adv-item:nth-child(even){padding-left:0;border-left:none}
  .ak-svc-row{grid-template-columns:44px 1fr;gap:14px;padding:26px 0}
  .ak-svc-row:hover{padding:30px 16px}
  .ak-svc-d,.ak-svc-thumb,.ak-svc-go{display:none}
  .ak-steps{grid-template-columns:1fr}
  .ak-contact-grid{grid-template-columns:1fr}
  .ak-contact-grid-2{grid-template-columns:1fr}
  .ak-prose{grid-template-columns:1fr;gap:32px}
  .ak-contact-tel{padding:28px}
  .ak-content{padding-top:48px;padding-bottom:64px}
  /* на узкой ширине 32px внутри панели съедают слишком много ширины */
  .ak-sec.ak-sec-soft{padding-left:18px;padding-right:18px}
  .cta-in,.ak-cta-in{flex-direction:column;align-items:flex-start}
  .ak-cta-tel{font-size:24px}
  .ftr-top{grid-template-columns:1fr}
  /* ссылки подвала: без паддингов цель тапа была 21px — ниже минимума
     WCAG 2.5.8 (24px) и вдвое меньше рекомендации Apple (44px) */
  .ftr ul{gap:0}
  .ftr ul a{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.10)}
  .ftr ul li:last-child a{border-bottom:none}
  .ftr-legal{margin-top:32px;padding-top:20px}
  .ftr-legal-body{padding-left:14px}
  .hdr-in{gap:12px}
  .burger{flex:none}
  .brand .rule{display:none}
  .hdr-cta{gap:10px}
  /* на мобильной телефон важнее кнопки: оставляем тап-звонок */
  .hdr-cta .btn{display:none}
  .tel{font-size:15px}
  .tel small{display:none}
  /* цель тапа: без паддингов ссылка охватывала только текст — 18px по высоте
     при рекомендованных 44px, а телефон в шапке — главный CTA сайта */
  .tel{padding:13px 0;min-height:44px;display:inline-flex;align-items:center}
  .brand{min-height:44px}
  .brand img{height:30px}
}

/* мобильное меню */
.ak-mobile-nav{display:none;border-top:1px solid var(--paper-line);background:#fff}
.ak-mobile-nav.is-open{display:block}
/* В статическом бандле мобильный список несёт класс .nav--mobile, а не .nav,
   поэтому ловушка «.nav{display:none} прячет и мобильное меню» сюда не попадает.
   В Drupal-теме она была: menu_navigation_links() выдаёт class="nav". */
.ak-mobile-nav ul{list-style:none;padding:12px 0}
.ak-mobile-nav li{margin:0}
.ak-mobile-nav li a{display:block;padding:12px var(--gut);font-weight:600;color:var(--ink-soft);border-left:3px solid transparent;position:static}
.ak-mobile-nav li a::after{display:none}
.ak-mobile-nav li.is-active a{color:var(--navy-800);border-left-color:var(--accent);background:var(--paper-soft)}
@media (min-width:1201px){.ak-mobile-nav{display:none!important}}

/* Печать/PDF: скролл-раскрытие не сработает, поэтому показываем всё.
   Без этого блок на opacity:0 ушёл бы в пустые страницы при печати. */
@media print{
  .rv{opacity:1 !important;transform:none !important}
  .ak-header,.ak-mobile-nav,.ak-hero-actions,.ak-cta,.ak-burger{display:none !important}
  .ak-hero{background:#fff;color:#000}
  .ak-hero h1,.ak-hero-sub{color:#000}
  body{background:#fff}
}

/* ─── лендинг: якорная навигация ──────────────────────────────────── */
/* Липкая шапка перекрывает верх секции при переходе по якорю — без отступа
   заголовок раздела уходит под шапку. */
section[id]{scroll-margin-top:96px}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
@media (max-width:720px){section[id]{scroll-margin-top:76px}}
/* scrollspy из app.js вешает is-active на саму ссылку, а не на li */
.nav a.is-active{color:var(--navy-700)}
.nav a.is-active::after{right:0}

/* ─── шапка лендинга: 6 пунктов якорной навигации ─────────────────── */
/* В многостраничной теме в шапке 4 пункта, здесь — 6 разделов. На 1180px
   строка не влезала и шапка давала горизонтальный переполнение 72px.
   Сначала уплотняем, потом (ниже 1200) переключаемся на бургер. */
@media (min-width:721px) and (max-width:1330px){
  .nav{gap:16px;font-size:13.5px}
  .hdr-in{gap:24px}
  .hdr-cta{gap:14px}
  .tel small{display:none}
  .tel{display:inline-flex;align-items:center;min-height:44px}
}
@media (max-width:1200px) and (min-width:1081px){
  .nav{display:none}
  .burger{display:block;margin-left:auto}
}

/* 320px — строка шапки не влезает. Замер на реальном 305px (320 минус
   скроллбар): логотип 86 + телефон 153 + бургер 44 + зазоры 16 = 299 при
   доступных 269, бургер вылезал за правый край на 30px. Прежних значений
   (логотип 30px, телефон 13px, зазор 8px) не хватало — проверка на 320px
   без учёта скроллбара этого не видела. */
@media (max-width:360px){
  .hdr .wrap{padding-left:14px;padding-right:14px}
  .brand img{height:24px}
  .tel{font-size:12px}
  .hdr-in{gap:5px}
  /* Телефон в CTA-полосе с white-space:nowrap на 26px давал 297px при
     доступных 248 — полоса вылезала за вьюпорт на 13px. */
  .ak-cta-tel{font-size:19px}
  .ak-label::after{display:none}
  .ak-cta{padding:64px 0}
  /* «Кондиционирование» в Unbounded 25px — это ~324px цельного слова: оно не
     переносится и ломало колонку 248–284px (переполнение 40px на 320px).
     Перенос по буквам порол слово, поэтому уменьшаем размер так, чтобы слово
     влезало целиком. */
  .ak-sec-head h2{font-size:18px}
  .ak-tile figcaption{font-size:11px;overflow-wrap:anywhere}
}