/* Семья «Модуль» — квадрат-центр.рф
   Несущая идея: квадратный модуль. Все собственные плитки, кадры и поля семьи —
   квадраты или их кратные; углы прямые. Слой 3, использует токены skin.css. */

/* Канон центрирует h2 и вешает на него декоративные линии; семья набирает
   заголовки секций по левому краю — гасим точечно, канон не трогаем. */
h2.kv-h2{text-align:left;border:0;padding:0;background:none;text-transform:none}
h2.kv-h2::before,h2.kv-h2::after{content:none;display:none}

.kv-sec{padding:var(--kv-s5) 0}
.kv-wrap{max-width:1200px;margin:0 auto;padding:0 var(--kv-s3)}
.kv-h2{font-size:clamp(24px,3vw,34px);font-weight:800;margin:0 0 var(--kv-s3);color:var(--kv-navy)}
.kv-cap{font-family:var(--kv-body);font-size:12px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--kv-muted);margin:0 0 var(--kv-s1)}

/* ── Иммунная схема квадратного кадра (photo-rules §2) ───────────────── */
.kv-ph{position:relative;width:100%;padding-top:100%;overflow:hidden;background:var(--kv-line)}
.kv-ph img{position:absolute;top:0;left:0;width:100%!important;height:100%!important;
  max-width:none!important;object-fit:cover;display:block}

/* ── Первый экран ────────────────────────────────────────────────────── */
/* Канонная шапка позиционирована абсолютно поверх первой секции — резервируем
   под неё место, иначе меню ложится на h1. Высота — токен скина. */
.kv-hero{padding:var(--kv-header-h) 0 var(--kv-s5)}
.kv-hero__in{display:flex;gap:var(--kv-s5);align-items:center}
.kv-hero__text{flex:1 1 0;min-width:0}
.kv-hero__media{flex:0 0 42%;max-width:42%;min-width:0}
/* потолок = --skin-h1-max скина (56px для 20-знакового имени); литерал продублирован,
   чтобы кегль читался статическим анализом и не зависел от порядка подключения */
.kv-hero h1{font-size:clamp(31px,6.2vw,56px);font-weight:800;line-height:1.04;
  margin:0 0 var(--kv-s3);color:var(--kv-navy)}
.kv-fact{font-family:var(--kv-display);font-weight:600;font-size:clamp(17px,2.1vw,23px);
  line-height:1.35;color:var(--kv-navy);margin:0 0 var(--kv-s3)}
.kv-fact span{white-space:nowrap}
.kv-fact i{font-style:normal;color:var(--kv-steel)}
.kv-lead{font-size:17px;line-height:1.62;color:var(--kv-muted);max-width:46ch;margin:0 0 var(--kv-s4)}
.kv-cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--kv-s2) var(--kv-s3)}
.kv-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;
  padding:0 var(--kv-s4);background:var(--kv-ochre);color:var(--kv-white);text-decoration:none;
  font-family:var(--kv-body);font-weight:600;font-size:16px;border:0}
.kv-btn:hover,.kv-btn:focus{background:var(--kv-navy);color:var(--kv-white)}
.kv-tel{display:inline-flex;flex-direction:column;min-height:52px;justify-content:center;
  text-decoration:none;color:var(--kv-navy)}
.kv-tel b{font-family:var(--kv-display);font-weight:800;font-size:21px;line-height:1.15;
  font-variant-numeric:tabular-nums}
.kv-tel span{font-size:13px;color:var(--kv-muted)}
.kv-tel:hover b{color:var(--kv-ochre)}

/* ── Модульная сетка характеристик ───────────────────────────────────── */
.kv-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--kv-line);border:1px solid var(--kv-line)}
.kv-tile{position:relative;background:var(--kv-white);padding:var(--kv-s3);
  display:flex;flex-direction:column;justify-content:space-between;min-height:176px}
.kv-tile__ico{width:44px;height:44px;object-fit:contain;display:block;margin:0 0 var(--kv-s3)}
.kv-tile__val{font-family:var(--kv-display);font-weight:800;font-size:clamp(26px,3.6vw,40px);
  line-height:1;color:var(--kv-navy);font-variant-numeric:tabular-nums}
.kv-tile__val em{font-style:normal;font-size:.5em;font-weight:600;color:var(--kv-muted);
  margin-left:.25em;letter-spacing:0}
.kv-tile__lab{font-size:13px;font-weight:600;color:var(--kv-muted);margin-top:var(--kv-s1)}

.kv-clusters{columns:2;column-gap:var(--kv-s5);margin-top:var(--kv-s5)}
.kv-cluster{break-inside:avoid;-webkit-column-break-inside:avoid;
  border-top:1px solid var(--kv-line);padding-top:var(--kv-s2);margin:0 0 var(--kv-s4)}
.kv-rows{display:flex;flex-direction:column;gap:var(--kv-s2);margin:0;padding:0;list-style:none}
.kv-row{display:flex;gap:var(--kv-s2);align-items:flex-start}
.kv-row img{flex:0 0 32px;width:32px;height:32px;object-fit:contain;display:block;margin-top:2px}
.kv-row>div{min-width:0}
.kv-row b{display:block;font-family:var(--kv-body);font-weight:600;font-size:13px;
  color:var(--kv-muted);margin-bottom:2px}
.kv-row span{display:block;font-size:16px;line-height:1.45;color:var(--kv-navy)}

/* ── Тёмная полоса-стейтмент ─────────────────────────────────────────── */
.kv-band{background:var(--kv-navy);color:var(--kv-paper);padding:var(--kv-s6) 0}
.kv-band .kv-h2{color:var(--kv-paper);margin-bottom:var(--kv-s2)}
.kv-band p{font-family:var(--kv-display);font-weight:600;font-size:clamp(19px,2.5vw,28px);
  line-height:1.38;color:var(--kv-paper);margin:0 0 var(--kv-s4);max-width:34ch}
.kv-band__link{display:inline-flex;align-items:center;min-height:44px;color:var(--kv-ochre-hi);
  font-family:var(--kv-body);font-weight:600;font-size:16px;text-decoration:none;
  border-bottom:1px solid var(--kv-ochre-hi)}
.kv-band__link:hover{color:var(--kv-paper);border-bottom-color:var(--kv-paper)}

/* ── Триптих тейков ──────────────────────────────────────────────────── */
/* Лейблов и иконок к тейкам нет: тема тейка приходит из params и меняется
   от объекта к объекту — подпись была бы связкой, которой нет в данных. */
.kv-trip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--kv-line);border:1px solid var(--kv-line)}
.kv-trip>div{background:var(--kv-white);padding:var(--kv-s4)}
.kv-trip p{margin:0;font-size:16px;line-height:1.6;color:var(--kv-navy);max-width:44ch}

/* ── Остаточный спек-лист ────────────────────────────────────────────── */
.kv-specs{display:flex;flex-wrap:wrap;gap:var(--kv-s3) var(--kv-s5);
  margin:var(--kv-s4) 0 0;padding:var(--kv-s3) 0 0;border-top:1px solid var(--kv-line)}
.kv-specs>div{flex:1 1 200px;min-width:0}
.kv-specs dt{font-size:13px;font-weight:600;color:var(--kv-muted)}
.kv-specs dd{margin:2px 0 0;font-size:16px;color:var(--kv-navy);font-variant-numeric:tabular-nums}

/* ── Фото-полоса ─────────────────────────────────────────────────────── */
.kv-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--kv-s2)}

/* ── Мобайл ──────────────────────────────────────────────────────────── */
@media (max-width:1024px){
  .kv-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:768px){
  .kv-sec{padding:var(--kv-s4) 0}
  .kv-hero{padding:var(--kv-header-h) 0 var(--kv-s4)}
  .kv-hero__in{display:block}
  .kv-hero__media{max-width:none;margin:30px 0 var(--kv-s4)}
  .kv-trip{grid-template-columns:1fr}
  .kv-strip{grid-template-columns:1fr 1fr;gap:var(--kv-s1)}
  .kv-band{padding:var(--kv-s5) 0}
}
@media (max-width:560px){
  .kv-clusters{columns:1}
  .kv-strip{grid-template-columns:1fr}
  .kv-tile{min-height:140px;padding:var(--kv-s2)}
  .kv-tile__ico{width:32px;height:32px;margin-bottom:var(--kv-s2)}
  .kv-tile__val{font-size:24px}
  .kv-cta{display:block}
  .kv-btn{display:flex;width:100%}
  .kv-tel{display:flex;width:100%;align-items:flex-start;margin-top:var(--kv-s2)}
}