/* ITKS — фирменный стиль «Бренд»: уголь #0E0E11, графит #17171B, красный #E5493D, Manrope + Inter */
@font-face { font-family: "ITKS Inter"; src: url("/brand/fonts/inter-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "ITKS Inter"; src: url("/brand/fonts/inter-semibold.woff2") format("woff2"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: "ITKS Inter"; src: url("/brand/fonts/inter-bold.woff2") format("woff2"); font-weight: 700 800; font-display: swap; }

html {
  --site-font-body: "ITKS Inter", var(--font-sans), ui-sans-serif, sans-serif !important;
  --site-font-heading: var(--font-manrope), "ITKS Inter", sans-serif !important;
  --site-on-dark: #e6e6e8 !important;
  --itks-red: #e5493d;
  --itks-red-hi: #ff4d3d;
  --itks-wine: #842f29;
  --itks-graphite: #17171b;
  --itks-edge: #2a2a2f;
  accent-color: #e5493d;
}
::selection { background: rgba(229, 73, 61, .28); }

/* Заливка красным: белый текст, наведение — яркий красный */
.bg-cyan,
.bg-cyan.text-navy,
.bg-cyan .text-navy { color: #fff !important; }
a.bg-cyan:hover, button.bg-cyan:hover,
.bg-cyan.hover\:bg-white:hover,
.bg-cyan.hover\:bg-navy:hover { background-color: var(--itks-red-hi) !important; color: #fff !important; }
a.bg-cyan, button.bg-cyan { box-shadow: 0 10px 26px -14px rgba(229, 73, 61, .9); }

/* Кнопки-контуры на тёмном: наведение — красная рамка вместо белой заливки */
.bg-navy a.border-white\/50:hover,
a.border-white\/50.hover\:bg-white:hover {
  background-color: rgba(229, 73, 61, .14) !important;
  border-color: var(--itks-red) !important;
  color: #fff !important;
}

/* Тёмные блоки и плашки на них — графит с тонкой кромкой */
.bg-navy .bg-white\/5, .bg-navy .bg-white\/10 { border-color: rgba(255, 255, 255, .09); }

/* Поля формы — красная рамка при фокусе */
input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: var(--itks-red) !important;
  box-shadow: 0 0 0 3px rgba(229, 73, 61, .18) !important;
}

/* Заголовки — Manrope ExtraBold */
h1, h2, h3 { font-family: var(--site-font-heading); }

/* Блоки стыкуются ровно, без размытых полос-переходов */
.tone-join { display: none !important; }
section + section, #proposal, footer { border-top: 0; }

/* Метка «ITKS» над заголовком — знак и надпись как в логотипе */
.font-brand {
  font-family: var(--font-manrope), "ITKS Inter", sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  color: #f4f4f5 !important;
  display: flex;
  width: fit-content;
  align-items: center;
  gap: .5em;
}
.font-brand::before {
  content: "";
  width: 1.5em;
  height: 1.5em;
  flex: 0 0 auto;
  background: url("/brand/logo/itks-mark.svg?v=bh1") center / contain no-repeat;
}

/* Логотип в карточке предложения — полной яркости */
#proposal .proposal-nav img[alt^="ITKS"] { filter: none !important; }
main img[src*="/images/clients/"] { filter: none !important; }

/* Блок клиентов — отдельные карточки в стиле айдентики */
.logo-plaques {
  gap: 14px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px) { .logo-plaques { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .logo-plaques { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.logo-plaques > li > :is(div, a) {
  position: relative;
  height: auto !important;
  aspect-ratio: 16 / 9;
  border: 2px solid #e5493d !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: 0 10px 24px -18px rgba(229, 73, 61, .55) !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.logo-plaques > li > :is(div, a)::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 14px;
  width: 16px;
  height: 4px;
  border-radius: 2px;
  background: #e5493d;
  transition: width .3s ease;
}
.logo-plaques > li > :is(div, a) > span {
  position: absolute !important;
  inset: 24px 8% 24px 8%;
  padding: 0 !important;
}
.logo-plaques img {
  max-height: 100% !important;
  max-width: 100% !important;
  transition: filter .25s ease, opacity .25s ease;
}
.logo-plaques > li > :is(div, a) > p {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 24px !important;
  padding: 0 10px !important;
  font-family: "ITKS Inter", sans-serif;
  font-size: 9.5px !important;
  line-height: 20px !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8a8a90 !important;
}
@media (hover: hover) {
  .logo-plaques > li > :is(div, a):hover {
    transform: translateY(-3px);
    border-color: #ff4d3d !important;
    box-shadow: 0 2px 4px rgba(14, 14, 17, .05), 0 18px 34px -18px rgba(229, 73, 61, .45) !important;
  }
  .logo-plaques > li > :is(div, a):hover::before { width: 32px; }
}
.logo-plaques > li { display: flex; }
.logo-plaques > li > :is(div, a) { flex: 1 1 auto; }
.logo-plaques img[src$="/mircli.svg"] { transform: scale(1.3); }
.logo-plaques img[src$="/offcon.svg"] { max-height: 82% !important; }
.logo-plaques img[src$="/cluev.svg"] { max-height: 84% !important; }
.logo-plaques img[src$="/best-brands.svg"] { transform: scale(1.6); }
.logo-plaques img[src$="/sgs.svg"] { transform: scale(1.3); }
.logo-plaques img[src$="/hotwalls.svg"] { transform: scale(1.75); }
@media (max-width: 639px) {
  .logo-plaques { gap: 10px !important; }
  .logo-plaques > li > :is(div, a) { aspect-ratio: 4 / 3; border-radius: 14px !important; }
  .logo-plaques > li > :is(div, a)::before { top: 10px; left: 10px; width: 12px; height: 3px; }
  .logo-plaques img[src$="/mircli.svg"] { transform: scale(1.15); }
  .logo-plaques > li > :is(div, a) > span { inset: 20px 8% 22px 8%; }
  .logo-plaques > li > :is(div, a) > p { height: 22px !important; line-height: 18px !important; font-size: 8.5px !important; letter-spacing: .06em; }
}
div:has(> .logo-plaques) > p:first-child {
  display: flex;
  align-items: center;
  gap: .6em;
  font-size: .75rem !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #0e0e11 !important;
}
div:has(> .logo-plaques) > p:first-child::before {
  content: "";
  width: .6em;
  height: .6em;
  flex: 0 0 auto;
  border-radius: 3px;
  background: #e5493d;
}

/* Фирменный паттерн из фигур знака */
footer { position: relative; overflow: hidden; isolation: isolate; }
footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("/brand/pattern/bauhaus-night.svg?v=p1") right -40px center / 168px repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 25%, #000 80%);
  mask-image: linear-gradient(90deg, transparent 25%, #000 80%);
  pointer-events: none;
}
.slogan-soft {
  position: relative;
  isolation: isolate;
  background-image: url("/brand/pattern/bauhaus-red.svg?v=p1") !important;
  background-size: 96px !important;
  background-position: center !important;
}
.slogan-soft > p { position: relative; color: #fff !important; text-shadow: 0 1px 10px rgba(132, 47, 41, .35); }
@media (max-width: 767px) {
  footer::before { background-size: 120px; -webkit-mask-image: linear-gradient(90deg, transparent 35%, #000 95%); mask-image: linear-gradient(90deg, transparent 35%, #000 95%); }
}