/* ==========================================================================
   Home Premium (page template page-home-premium.php) · 2026-09-22
   Design system "The Steel Ledger": squared geometry, 1px hairlines,
   one accent (#ff6600), Roboto Condensed display over Roboto body.
   Scoped to .hp — nothing else on the site is touched.
   ========================================================================== */

/* Full-bleed insets have to be right on the FIRST paint. home-premium.js
   measures the theme's own gutter and writes --hp-bleed-l/r on `load`, i.e.
   long after the page was already visible, so the hero jumped sideways by the
   gutter width (measured 2026-09-30: 0.238 on mobile, same on the objects
   page). These are the theme's gutters, measured the same day at
   320 / 800 / 1280 / 2200 / 2600 px; above 2600 the theme grows the gutter
   linearly. The script then writes the same numbers, so nothing moves. */
.hp { --hp-bleed-l: 20px; --hp-bleed-r: 20px; }
@media (min-width: 800px)  { .hp { --hp-bleed-l: 50px; --hp-bleed-r: 50px; } }
@media (min-width: 1280px) { .hp { --hp-bleed-l: 74px; --hp-bleed-r: 74px; } }
@media (min-width: 2200px) { .hp { --hp-bleed-l: 98px; --hp-bleed-r: 98px; } }
@media (min-width: 2600px) { .hp { --hp-bleed-l: calc(50vw - 1210px); --hp-bleed-r: calc(50vw - 1210px); } }

.hp {
  /* Single full-bleed root: bands span the viewport, .hp-wrap keeps every
     section's text on the same measure (the theme caps #content at 1200px). */
  margin-left: calc(-1 * var(--hp-bleed-l, 0px));
  margin-right: calc(-1 * var(--hp-bleed-r, 0px));
  --hp-accent: #ff6600;
  --hp-ink: #1a1a1a;
  --hp-body: #424242;
  --hp-muted: #616161;
  --hp-faint: #757575;
  --hp-line: #e0e0e0;
  --hp-alt: #f5f5f5;
  --hp-display: 'Roboto Condensed', 'Arial Narrow', Arial, sans-serif;
  --hp-text: Roboto, Helvetica, Arial, Verdana, sans-serif;
  overflow-x: clip;
}

.hp *,
.hp *::before,
.hp *::after { box-sizing: border-box; }

.hp ul,
.hp ol { list-style: none; margin: 0; padding: 0; }
.hp ul > li::marker,
.hp ol > li::marker { content: none; }
.hp ul > li::before { content: none; display: none; }

.hp-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

.hp-kicker {
  margin: 0 0 12px;
  font-family: var(--hp-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hp-faint);
}
.hp-kicker--light { color: #fff; }
.hp-hero .hp-kicker { color: rgba(255, 255, 255, .85); }

.hp-h2 {
  margin: 0 0 20px;
  font-family: var(--hp-display);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  line-height: 1.08;
  text-transform: uppercase;
  color: var(--hp-ink);
  text-wrap: balance;
}
.hp-h2--light { color: #fff; }

.hp-section { padding: 24px 0; }

/* ---------- Buttons ---------- */
.hp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  font-family: var(--hp-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0;
  cursor: pointer;
}
.hp-btn--accent { background: var(--hp-accent); color: var(--hp-ink); }
.hp-btn--accent:hover { opacity: .9; }
.hp-btn--dark { background: var(--hp-ink); color: #fff; }
.hp-btn--dark:hover { background: #000; }
.hp-btn--ghost {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .55);
}
.hp-btn--ghost:hover { border-color: var(--hp-accent); color: var(--hp-accent); }
/* Призрачная кнопка на светлом фоне (внутри .hp-section) — тёмная, иначе белым по белому. */
.hp-section .hp-btn--ghost { color: var(--hp-ink); border-color: var(--hp-line); }
.hp-section .hp-btn--ghost:hover,
.hp-section .hp-btn--ghost:focus-visible { color: var(--hp-accent); border-color: var(--hp-accent); }

/* ---------- Hero ---------- */
.hp-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: min(720px, calc(100vh - 79px));
  background: var(--hp-ink);
  color: #fff;
  isolation: isolate;
}
.hp-hero__media { position: absolute; inset: 0; overflow: hidden; }
.hp-hero__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hp-hero__slide.is-active { opacity: 1; }
.hp-hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hp-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(26, 26, 26, .62) 0%, rgba(26, 26, 26, .38) 42%, rgba(26, 26, 26, .9) 100%);
  z-index: 1;
}
.hp-hero .hp-wrap { position: relative; z-index: 2; }
.hp-hero__inner { padding-top: 76px; padding-bottom: 12px; }
.hp-hero__title {
  margin: 0 0 12px;
  max-width: 18ch;
  font-family: var(--hp-display);
  font-size: clamp(38px, 6.2vw, 76px);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
  text-wrap: balance;
}
.hp-hero__lead {
  margin: 0 0 14px;
  max-width: 62ch;
  font-family: var(--hp-text);
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .88);
}
.hp-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}
.hp-hero__chips li {
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, .35);
  font-family: var(--hp-text);
  font-size: 13px;
  color: #fff;
  display: flex;
  align-items: center;
  min-height: 44px;
}
.hp-hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 0;
}
.hp-phone {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
  color: #fff;
  font-family: var(--hp-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none;
}
.hp-phone:hover { color: var(--hp-accent); }

.hp-hero__foot {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 28px;
  align-items: end;
  padding-top: 10px;
  padding-bottom: 12px;
  border-top: 1px solid rgba(255, 255, 255, .22);
}
.hp-hero__figures {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hp-hero__figures strong {
  display: block;
  font-family: var(--hp-display);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.hp-hero__figures strong::after {
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  margin-top: 8px;
  background: var(--hp-accent);
}
.hp-hero__figures span {
  display: block;
  margin-top: 8px;
  font-family: var(--hp-text);
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .72);
}

/* Телефон: фото героя не должно занимать полтора экрана. Шесть кнопок-ссылок
   укладываем в две колонки, четыре цифры — в сетку 2×2: блок теряет около
   250 px высоты, и в первый экран (844 px) помещаются заголовок, текст и
   кнопка заявки. На ПК и планшете раскладка прежняя. */
@media (max-width: 700px) {
  .hp-hero__title {
    font-size: 30px;
  }
  .hp-hero__chips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin: 0 0 18px;
  }
  .hp-hero__chips li {
    min-height: 0;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.3;
  }
  .hp-hero__figures {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 16px;
  }
  .hp-hero__figures strong {
    font-size: 26px;
  }
  .hp-hero__figures strong::after {
    margin-top: 6px;
  }
  .hp-hero__figures span {
    margin-top: 6px;
    font-size: 12px;
  }
}
.hp-hero__caption {
  font-family: var(--hp-text);
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .78);
}
.hp-hero__caption strong { display: block; color: #fff; font-weight: 700; }
.hp-hero__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, .18);
  z-index: 3;
}
.hp-hero__progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--hp-accent);
}

/* ---------- Trust cards ---------- */
.hp-trust { background: #fff; }
.hp-trust__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--hp-line);
  border: 1px solid var(--hp-line);
}
.hp-trust__card {
  display: flex;
  flex-direction: column;
  background: #fff;
  padding: 0 0 24px;
}
.hp-trust__media { margin: 0 0 18px; aspect-ratio: 4 / 3; overflow: hidden; }
.hp-trust__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.19, 1, .22, 1);
}
.hp-trust__card:hover .hp-trust__media img { transform: scale(1.04); }
.hp-trust__title {
  margin: 0 20px 8px;
  font-family: var(--hp-display);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--hp-ink);
}
.hp-trust__text {
  margin: 0 20px;
  font-family: var(--hp-text);
  font-size: 15px;
  line-height: 1.6;
  color: var(--hp-body);
}
.hp-trust__link {
  display: inline-block;
  margin: 14px 20px 0;
  color: var(--hp-accent);
  font-family: var(--hp-text);
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.hp-trust__link:hover { color: var(--hp-ink); }

/* ---------- Realtime ---------- */
.hp-realtime { background: var(--hp-alt); }
.hp-realtime__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: center;
}
.hp-realtime__lead {
  margin: 0 0 18px;
  font-family: var(--hp-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--hp-ink);
}
.hp-realtime__label { margin: 0 0 12px; font-family: var(--hp-text); font-size: 15px; color: var(--hp-muted); }
.hp-realtime__list { margin: 0 0 18px; padding: 0; list-style: none; }
.hp-realtime__list li {
  position: relative;
  padding: 0 0 0 22px;
  margin: 0 0 9px;
  font-family: var(--hp-text);
  font-size: 16px;
  line-height: 1.6;
  color: var(--hp-body);
}
.hp .hp-realtime__list > li::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: .55em;
  width: 9px;
  height: 9px;
  background: var(--hp-accent);
}
.hp-realtime__note {
  margin: 0;
  padding: 16px 18px;
  background: #fff;
  border-left: 3px solid var(--hp-accent);
  font-family: var(--hp-text);
  font-size: 15px;
  line-height: 1.6;
  color: var(--hp-ink);
}
.hp-realtime__media { margin: 0; border: 1px solid var(--hp-line); }
.hp-realtime__media img { width: 100%; height: auto; display: block; }

/* ---------- Figures ---------- */
.hp-figures {
  padding: 72px 0;
  background: var(--hp-accent);
}
.hp-figures .hp-kicker--light,
.hp-figures .hp-h2--light { color: var(--hp-ink); }
.hp-figures__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.hp-figures__grid[style*="--ob-fcols"] { grid-template-columns: repeat(var(--ob-fcols, 4), minmax(0, 1fr)); }
@media (max-width: 767px) {
  .hp-figures__grid[style*="--ob-fcols"] { grid-template-columns: 1fr; }
}

.hp-figures__icon { width: 46px; height: 46px; object-fit: contain; display: block; filter: brightness(0) saturate(100%); }
.hp-figures__grid strong {
  display: block;
  margin-top: 14px;
  font-family: var(--hp-display);
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  color: var(--hp-ink);
  font-variant-numeric: tabular-nums;
}
.hp-figures__grid span {
  display: block;
  margin-top: 8px;
  font-family: var(--hp-text);
  font-size: 14px;
  line-height: 1.5;
  color: var(--hp-ink);
}

/* ---------- Objects rail (interactive centrepiece) ---------- */
.hp-objects { background: #fff; }
.hp-objects__head {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 28px;
}
.hp-objects__head .hp-h2 { margin-bottom: 0; max-width: 24ch; }
.hp-objects__more { margin: 0; }

.hp-rail { position: relative; }
.hp-rail__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
}
.hp-rail__viewport::-webkit-scrollbar { display: none; }
.hp-rail__viewport.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.hp-rail__viewport:focus-visible { outline: 2px solid var(--hp-ink); outline-offset: 3px; }
.hp-rail__track {
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 0 0 4px;
  list-style: none;
}
.hp-card { flex: 0 0 clamp(260px, 31%, 380px); scroll-snap-align: start; }
.hp-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--hp-line);
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: box-shadow .25s cubic-bezier(.19, 1, .22, 1), transform .25s cubic-bezier(.19, 1, .22, 1);
}
.hp-card__link:hover,
.hp-card__link:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(26, 26, 26, .12);
}
.hp-card__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--hp-alt); }
.hp-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.19, 1, .22, 1); }
.hp-card__link:hover .hp-card__media img { transform: scale(1.04); }
.hp-card__num {
  position: absolute;
  left: 0;
  top: 0;
  padding: 6px 10px;
  background: var(--hp-accent);
  color: var(--hp-ink);
  font-family: var(--hp-display);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.hp-card__body { display: flex; flex-direction: column; flex: 1; padding: 18px 18px 22px; }
.hp-card__title {
  font-family: var(--hp-display);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--hp-ink);
}
.hp-card__text {
  margin-top: 10px;
  font-family: var(--hp-text);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--hp-body);
}
.hp-card__cta {
  margin-top: auto;
  padding-top: 16px;
  color: var(--hp-accent);
  font-family: var(--hp-text);
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.hp-rail__bar {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 20px;
  align-items: center;
  margin-top: 22px;
}
.hp-rail__nav { display: flex; gap: 10px; }
.hp-rail__btn {
  position: relative;
  width: 46px;
  height: 46px;
  padding: 0;
  background: #fff;
  border: 1px solid var(--hp-line);
  cursor: pointer;
}
.hp-rail__btn span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--hp-ink);
  border-right: 2px solid var(--hp-ink);
}
.hp-rail__btn[data-hp-prev] span { transform: translate(-40%, -50%) rotate(-135deg); }
.hp-rail__btn[data-hp-next] span { transform: translate(-60%, -50%) rotate(45deg); }
.hp-rail__btn:hover { border-color: var(--hp-accent); }
.hp-rail__btn:disabled { opacity: .35; cursor: default; }
.hp-rail__btn:disabled:hover { border-color: var(--hp-line); }
.hp-rail__count {
  margin: 0;
  font-family: var(--hp-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--hp-muted);
  font-variant-numeric: tabular-nums;
}
.hp-rail__count [data-hp-index] { color: var(--hp-ink); }
.hp-rail__progress { height: 2px; background: var(--hp-line); }
.hp-rail__progress span { display: block; width: 0; height: 100%; background: var(--hp-accent); }

/* ---------- Clients marquee ---------- */
.hp-clients { background: var(--hp-alt); }
.hp-clients__sub { margin: 0; font-family: var(--hp-text); font-size: 15px; color: var(--hp-muted); }
.hp-marquee {
  margin-top: 34px;
  overflow: hidden;
  border-top: 1px solid var(--hp-line);
  border-bottom: 1px solid var(--hp-line);
  background: #fff;
}
.hp-marquee__track {
  display: flex;
  align-items: center;
  gap: 64px;
  width: max-content;
  margin: 0;
  padding: 30px 32px;
  list-style: none;
  animation: hp-marquee 38s linear infinite;
}
.hp-marquee:hover .hp-marquee__track,
.hp-marquee:focus-within .hp-marquee__track { animation-play-state: paused; }
.hp-marquee__item { flex: none; display: flex; align-items: center; }
.hp-marquee__item img { height: 46px; width: auto; display: block; opacity: .85; }
@keyframes hp-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Quotes ---------- */
.hp-quotes { background: #fff; }
.hp-quotes__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--hp-line);
  border: 1px solid var(--hp-line);
}
.hp-quotes__item { display: flex; flex-direction: column; background: #fff; padding: 26px 24px; }
.hp-quotes__text {
  margin: 0;
  font-family: var(--hp-text);
  font-size: 16px;
  line-height: 1.65;
  color: var(--hp-body);
}
.hp-quotes__text p { margin: 0 0 12px; }
.hp-quotes__text p:last-child { margin-bottom: 0; }
.hp-quotes__by {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--hp-line);
  font-family: var(--hp-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--hp-ink);
}
.hp-quotes__all { margin: 30px 0 0; }

/* ---------- Closing quote band ---------- */
.hp-quote {
  padding: 72px 0;
  background: var(--hp-ink);
}
.hp-quote__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
.hp-quote__lead { margin: 0 0 22px; max-width: 52ch; font-family: var(--hp-text); font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .82); }
.hp-quote__smeta { margin: 0 0 22px; font-family: var(--hp-text); font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .72); }
.hp-quote__contacts { margin: 0; padding: 0; list-style: none; }
.hp-quote__contacts li { margin: 0 0 8px; font-family: var(--hp-text); font-size: 14.5px; color: rgba(255, 255, 255, .75); }
.hp-quote__form .wpcf7 { margin: 0; }
.hp-quote__form input[type="text"],
.hp-quote__form input[type="email"],
.hp-quote__form input[type="tel"],
.hp-quote__form textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--hp-line);
  background: #fff;
  color: var(--hp-ink);
  font-family: var(--hp-text);
  font-size: 15px;
  padding: 12px 14px;
}
.hp-quote__form input[type="submit"] {
  width: 100%;
  min-height: 52px;
  margin-top: 6px;
  border: 0;
  background: var(--hp-accent);
  color: var(--hp-ink);
  font-family: var(--hp-display);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 0;
}
.hp-quote__form input[type="submit"]:hover { opacity: .9; }


/* ---------- Responsive ---------- */
@media (max-width: 992px) {
  .hp-section { padding: 40px 0; }
  .hp-hero { min-height: auto; }
  .hp-hero__inner { padding-top: 120px; }
  .hp-hero__foot { grid-template-columns: 1fr; gap: 20px; }
  .hp-hero__figures { grid-template-columns: repeat(2, 1fr); }
  .hp-trust__grid { grid-template-columns: repeat(2, 1fr); }
  .hp-realtime__grid { grid-template-columns: 1fr; gap: 28px; }
  .hp-figures { padding: 56px 0; }
  .hp-figures__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .hp-quote__grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 560px) {
  .hp-wrap { padding: 0 20px; }
  .hp-hero__title { font-size: 30px; }
  .hp-hero__lead { font-size: 15.5px; }
  .hp-btn { width: 100%; }
  .hp-phone { padding: 8px 0; }
  .hp-hero__figures { grid-template-columns: 1fr 1fr; gap: 14px; }
  .hp-hero__figures strong { font-size: 28px; }
  .hp-trust__grid { grid-template-columns: 1fr; }
  .hp-figures__grid { grid-template-columns: 1fr; text-align: center; }
  .hp-figures__icon { margin: 0 auto; }
  .hp-figures__grid strong { font-size: 40px; }
  .hp-quotes__grid { grid-template-columns: 1fr; }
  .hp-card { flex-basis: 84%; }
  .hp-rail__bar { grid-template-columns: auto 1fr; gap: 14px; }
  .hp-rail__progress { grid-column: 1 / -1; }
  .hp-marquee__track { gap: 40px; padding: 22px; }
  .hp-marquee__item img { height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .hp-hero__slide { transition: none; }
  .hp-marquee__track { animation: none; }
  .hp-trust__media img,
  .hp-card__media img,
  .hp-card__link { transition: none; }
}

/* GEO answer block: self-contained, ~150 words, first screenful region */
.hp-lead {
  max-width: 72ch;
  margin: 0 0 32px;
  font-family: var(--hp-text);
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--hp-body);
}
.hp-lead::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin-top: 18px;
  background: var(--hp-accent);
}


/* ---------- Competencies (semantic core) ---------- */
.hp-hero__chips a {
  display: block;
  color: #fff;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.hp-hero__chips a:hover,
.hp-hero__chips a:focus-visible {
  color: var(--hp-accent);
  border-bottom-color: var(--hp-accent);
}
.hp-comp { background: var(--hp-alt); }
.hp-comp__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--hp-line);
  border: 1px solid var(--hp-line);
}
.hp-comp__item { background: #fff; }
.hp-comp__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px 22px 26px;
  color: inherit;
  text-decoration: none;
  transition: box-shadow .25s cubic-bezier(.19, 1, .22, 1), transform .25s cubic-bezier(.19, 1, .22, 1);
}
/* 5 cards in a 3-col grid: the flagship card takes two columns so the last
   row fills 3 / 3 with no empty cell. */
.hp-comp__item:first-child { grid-column: span 2; }
.hp-comp__item:first-child .hp-comp__title { font-size: 24px; }
@media (max-width: 992px) {
  .hp-comp__item:first-child { grid-column: span 2; }
}
@media (max-width: 560px) {
  .hp-comp__item:first-child { grid-column: span 1; }
}
.hp-comp__link:hover,
.hp-comp__link:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(26, 26, 26, .12);
}
.hp-comp__num {
  font-family: var(--hp-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--hp-accent);
}
.hp-comp__title {
  margin-top: 10px;
  font-family: var(--hp-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--hp-ink);
}
.hp-comp__text {
  margin-top: 10px;
  font-family: var(--hp-text);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--hp-body);
}
.hp-comp__cta {
  margin-top: auto;
  padding-top: 16px;
  color: var(--hp-accent);
  font-family: var(--hp-text);
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.hp-comp__hub { margin: 24px 0 0; }
@media (max-width: 992px) {
  .hp-comp__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .hp-comp__grid { grid-template-columns: 1fr; }
}

/* The CF7 form carries its own <h2>; the band already has one — no duplicate heading. */
.hp-quote__form .wpcf7 > h2,
.hp-quote__form form > h2 { display: none; }

/* ==========================================================================
   Desktop composition fixes (2026-09-22b)
   Hero: two columns so the headline + lead fill the viewport width instead of
   wrapping into a narrow left column with a dead right half.
   ========================================================================== */
.hp-hero__lead-col { min-width: 0; }
.hp-hero__side-col { min-width: 0; }

/* Hero stays single-column at every width: a wide headline block over a
   wide lead reads as a statement and cannot collapse the way a 2-col grid
   did at 2560px (the min-content of one long word starved the other track). */
@media (min-width: 993px) {
  .hp-hero__inner { display: block; }
  .hp-hero__title { max-width: 26ch; font-size: clamp(48px, 4.6vw, 76px); }
  .hp-hero__lead { max-width: 62ch; margin-bottom: 24px; }
}

/* Closing CTA: the CF7 panel (file dropzone + fields) needs real width. */
@media (min-width: 993px) {
  .hp-quote__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 52px; }
}
.hp-quote__form .wpcf7,
.hp-quote__form form.wpcf7-form {
  border: 1px solid var(--hp-line) !important;
  background: #fff;
  padding: 28px !important;
}
.hp-quote__form .wpcf7 form { padding: 0 !important; }
.hp-quote__form br { display: none; }
.hp-quote__form .wpcf7-form-control-wrap { display: block; }
.hp-quote__form input[type="text"],
.hp-quote__form input[type="email"],
.hp-quote__form input[type="tel"] { width: 100%; }
.hp-quote__form .codedropz-upload-wrapper,
.hp-quote__form .codedropz-upload-inner { width: 100% !important; }
.hp-quote__form .codedropz-upload-inner {
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.hp-quote__form label { display: block; margin-bottom: 14px; font-size: 14px; color: var(--hp-ink); }
.hp-quote__form .acceptance,
.hp-quote__form .wpcf7-acceptance { display: block; margin: 14px 0 10px; font-size: 13px; line-height: 1.5; }
.hp-quote__form .d-cf7-required { margin: 0 0 14px; font-size: 13px; color: var(--hp-muted); }

/* Форма 7647 после обновления codedropz 1.4.0 (2026-09-30): заголовок зоны
   файлов — h3, был тёмным по тёмной полосе; галка согласия — label стал
   блочным, текст уехал под чекбокс. Форма общая для всех премиум-страниц,
   чинится здесь. */
.hp-quote__form .codedropz-upload-inner h1,
.hp-quote__form .codedropz-upload-inner h2,
.hp-quote__form .codedropz-upload-inner h3,
.hp-quote__form .codedropz-upload-inner h4 { color: rgba(255, 255, 255, .9) !important; }
.hp-quote__form .wpcf7-acceptance .wpcf7-list-item > label { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 0; }
.hp-quote__form .wpcf7-acceptance input[type="checkbox"] { flex-shrink: 0; margin-top: 2px; }

/* ==========================================================================
   4K / wide screens (2026-09-22c)
   A 1200px column is a thin strip on a 2560–3840px display. Widen the measure
   and scale the display type with it, keeping the 1200px design intact below.
   ========================================================================== */
@media (min-width: 1600px) {
  .hp-wrap { max-width: 1360px; }
  .hp-hero__title { max-width: 24ch; }
  .hp-hero__lead { max-width: 64ch; }
  .hp-quote__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 64px; }
}

@media (min-width: 2000px) {
  .hp-wrap { max-width: 1560px; }
  .hp-section { padding: 56px 0; }
  .hp-hero { min-height: min(820px, calc(100vh - 79px)); }
  .hp-hero__inner { padding-top: 110px; padding-bottom: 28px; }
  .hp-hero__title { font-size: clamp(72px, 3.2vw, 96px); max-width: 24ch; }
  .hp-hero__lead { font-size: 19px; max-width: 66ch; }
  .hp-hero__chips li { font-size: 14px; padding: 10px 16px; }
  .hp-hero__figures strong { font-size: 44px; }
  .hp-hero__figures span { font-size: 14px; }
  .hp-hero__caption { font-size: 14px; }
  .hp-h2 { font-size: clamp(40px, 2.4vw, 52px); }
  .hp-lead { font-size: 18px; max-width: 78ch; }
  .hp-trust__title { font-size: 22px; }
  .hp-trust__text { font-size: 16.5px; }
  .hp-comp__title { font-size: 23px; }
  .hp-comp__text { font-size: 16px; }
  .hp-figures__grid strong { font-size: 60px; }
  .hp-figures__grid span { font-size: 16px; }
  .hp-card { flex-basis: clamp(320px, 26%, 420px); }
  .hp-card__title { font-size: 21px; }
  .hp-card__text { font-size: 16px; }
  .hp-quotes__text { font-size: 17.5px; }
  .hp-quote__lead { font-size: 17.5px; }
  .hp-marquee__item img { height: 56px; }
}

@media (min-width: 2600px) {
  .hp-wrap { max-width: 1720px; }
  .hp-hero__title { font-size: clamp(84px, 2.8vw, 108px); }
  .hp-h2 { font-size: clamp(46px, 2vw, 58px); }
}

/* ==========================================================================
   Fixes 2026-09-22d
   ========================================================================== */

/* 1. Accent button hover: the theme's generic a:hover repainted the label
      orange on an orange fill. Keep ink on accent in every state. */
.hp-btn--accent,
.hp-btn--accent:hover,
.hp-btn--accent:focus,
.hp-btn--accent:focus-visible,
.hp-btn--accent:active { color: var(--hp-ink) !important; }
.hp-btn--accent:hover { opacity: 1; background: #ff7a1f; }

/* 2. No panel frame around the CF7 form — fields sit directly on the ink band
      (same model as the region pages), no thin box around them. */
.hp-quote__form .wpcf7,
.hp-quote__form form.wpcf7-form {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}
.hp-quote__form .wpcf7 form { padding: 0 !important; }

/* 3. GEO answer paragraph fills the section measure on wide screens instead of
      stopping at the old 1200px column. */
@media (min-width: 1400px) {
  .hp-lead { max-width: none; font-size: 17.5px; }
}
@media (min-width: 2000px) {
  .hp-lead { font-size: 19px; max-width: none; }
}

/* Frameless CF7 on the ink band: all form copy must be light, links accent. */
.hp-quote__form label,
.hp-quote__form .wpcf7 label { color: rgba(255, 255, 255, .92) !important; }
.hp-quote__form .acceptance,
.hp-quote__form .wpcf7-acceptance,
.hp-quote__form .wpcf7-list-item-label,
.hp-quote__form .wpcf7-acceptance .wpcf7-list-item-label { color: rgba(255, 255, 255, .82) !important; }
.hp-quote__form .acceptance a,
.hp-quote__form .wpcf7-acceptance a { color: var(--hp-accent) !important; }
.hp-quote__form .d-cf7-required { max-width: none; color: rgba(255, 255, 255, .6) !important; }
.hp-quote__form input[type="checkbox"] { accent-color: var(--hp-accent); width: 18px; height: 18px; }
.hp-quote__form .codedropz-upload-inner,
.hp-quote__form .codedropz-upload-wrapper { color: rgba(255, 255, 255, .85) !important; }
.hp-quote__form .codedropz-upload-inner { border: 1px dashed rgba(255, 255, 255, .45) !important; background: transparent !important; }
.hp-quote__form .codedropz-upload-inner a,
.hp-quote__form .codedropz-btn,
.hp-quote__form .codedropz-upload-inner span { color: var(--hp-accent) !important; }
.hp-quote__form .dnd-upload-counter { color: rgba(255, 255, 255, .6) !important; }
.hp-quote__form .wpcf7-not-valid-tip { color: var(--hp-accent) !important; }

/* ==========================================================================
   4K scaling continued (2026-09-25)
   Beyond the 2600 breakpoint the 1720px column still leaves wide empty fields
   on 3200–3840 displays. Scale the container further; text measure is capped
   per-block (.hp-lead/.eq-*), so wider tracks carry grids, not long lines.
   ========================================================================== */
@media (min-width: 3200px) {
  .hp-wrap { max-width: 1920px; }
}
@media (min-width: 3600px) {
  .hp-wrap { max-width: 2160px; }
}

/* Genpodryad (5565): WPBakery content below the premium hero is full-bleed
   inside .hp, so it needs the same measure as .hp-wrap — without it every
   column sat at the viewport edge with a different width. */
.hp-body {
  max-width: 1248px;
  margin: 0 auto;
  padding: 0 24px;
}
.hp-body > .vc_row { margin-bottom: 0; }

/* Hero measure fix (2026-09-25): .hp-wrap has `margin: 0 auto`, and inside the
   column flex .hp-hero that turns the inline auto margins into fit-content
   centring, so the headline block shrank to its text (1126px at 1440) while the
   figures row stayed 1200px and the sections below used .hp-wrap at 1200px.
   Width:100% restores the shared measure, so hero text lines up with the body
   on every breakpoint (was: 37px offset at 1440, 467px at 3840). */
.hp-hero__inner,
.hp-hero__foot { width: 100%; }

/* Гео: герой во всю ширину экрана (внутри .region-hub--prem с padding 24px). */
.region-hub--prem > .hp-hero { width: 100vw; margin-left: calc((100% - 100vw) / 2); }

/* Труба: её лид и чипсы выше остальных — подгоняем высоту героя к общей (701). */
.pipes-hero .hp-hero__lead { line-height: 1.45; }

/* Objects hub (3242, 2026-09-25): portfolio grid + map sit inside .hp, so they
   need the same measure as the rest and no inherited list resets. */
.ob-grid__list .filter-categories { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.ob-grid__list .filter-categories a { font-family: var(--hp-text); font-size: 15px; color: var(--hp-muted); text-decoration: none; }
.ob-grid__list .filter-categories a.act,
.ob-grid__list .filter-categories a:hover { color: var(--hp-ink); }

/* Objects hub: grouped filter (three labelled rows). */
.ob-filter-groups { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.ob-filter-group { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 16px; }
.ob-filter-group__title { font-family: var(--hp-display); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--hp-faint); min-width: 190px; }
.ob-filter-group__list { display: flex; flex-wrap: wrap; gap: 10px 16px; }
/* Objects hub: grid and map keep the same measure as .hp-wrap; the portfolio
   script measures its container, so the grid no longer spans the whole screen. */
.ob-grid__list .filter-categories { margin: 0 0 28px; width: 100%; }
.ob-grid__list .dt-css-grid,
.ob-grid__list .portfolio-shortcode { width: 100%; }
.ob-map__canvas iframe,
.ob-map__canvas > div { width: 100%; }

/* ==========================================================================
   Отзывы (/otzyvy/, ID 3256) — блоки .rev-*, 2026-09-26
   Карточки отзывов, логотипы заказчиков и FAQ в том же ритме, что остальные
   премиум-страницы. Цвета — только токены из :root, новых оттенков нет.
   ========================================================================== */
.rev-section { padding: 72px 0; }
@media (max-width: 900px) { .rev-section { padding: 52px 0; } }


.rev-reviews__title,
.rev-reviews__count { display: block; }
.rev-reviews__title { margin: 0 0 24px; }
.rev-reviews__count { font-size: .9375rem; color: var(--ink); opacity: .75; margin: 0 0 32px; }

.rev-grid { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 900px) { .rev-grid { grid-template-columns: 1fr; } }

.rev-card { display: flex; gap: 20px; background: var(--surface); border: 1px solid var(--border-color); padding: 24px; }
.rev-card__avatar { flex: 0 0 80px; }
.rev-card__photo { width: 80px; height: 80px; border-radius: 0; object-fit: cover; display: block; }
.rev-card__body { flex: 1 1 auto; min-width: 0; }
.rev-card__name { font-weight: 700; font-size: 1rem; line-height: 1.3; margin: 0 0 2px; color: var(--ink); }
.rev-card__role { font-size: .875rem; line-height: 1.4; margin: 0 0 12px; color: var(--ink); opacity: .75; }
.rev-card__text p { font-size: .9375rem; line-height: 1.6; margin: 0 0 12px; }
.rev-card__text p:last-child { margin-bottom: 0; }

.rev-rev-logos__title { font-family: var(--font-display); font-size: 2.4rem; line-height: 1.1; margin: 0 0 32px; }
.rev-logos__grid { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
@media (max-width: 900px) { .rev-logos__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .rev-logos__grid { grid-template-columns: repeat(2, 1fr); } }
.rev-logos__item { border: 1px solid var(--border-color); background: var(--surface); padding: 12px; display: flex; align-items: center; justify-content: center; }
.rev-logos__item img { max-width: 100%; height: auto; display: block; }

.rev-faq__title { font-family: var(--font-display); font-size: 2.4rem; line-height: 1.1; margin: 0 0 32px; }
.rev-faq details.d-faq { max-width: 900px; }

/* Видеоотзывы (/otzyvy/): постер + ссылка на ролик, без iframe — 4 тяжёлых
   плеера съедали бы скорость страницы (решение владельца: страница быстрая). */
.hp-rev-video__title { margin: 0 0 24px; }
.hp-rev-video__note { font-size: .9375rem; line-height: 1.6; margin: 0 0 32px; }
.rev-videos { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 1100px) { .rev-videos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .rev-videos { grid-template-columns: 1fr; } }
.rev-video__link { display: block; background: var(--surface); border: 1px solid var(--border-color); height: 100%; }
.rev-video__poster { position: relative; display: block; background: var(--surface-alt); }
.rev-video__poster img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.rev-video__play { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; background: var(--accent-color); }
.rev-video__play::after { content: ''; position: absolute; left: 21px; top: 16px; border-left: 16px solid var(--ink); border-top: 12px solid transparent; border-bottom: 12px solid transparent; }
.rev-video__meta { display: block; padding: 16px; }
.rev-video__name { display: block; font-weight: 700; font-size: .9375rem; line-height: 1.3; color: var(--ink); }
.rev-video__role { display: block; font-size: .8125rem; line-height: 1.4; color: var(--ink); opacity: .75; margin-top: 4px; }
.rev-video__link:hover { border-color: var(--accent-text); }

/* Закрывающая полоса отзывов: одна колонка по центру. На тёмном фоне светлый
   текст (классы .hp-h2--light и .hp-quote__lead из системы). */
.rev-cta { max-width: 760px; margin: 0 auto; text-align: center; }
.rev-cta .hp-h2 { margin: 0 0 20px; }
.rev-cta .hp-quote__lead { margin: 0 auto 28px; max-width: 52ch; }
.rev-cta__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px; margin: 0; }
.rev-cta__actions .hp-phone { font-size: 1.125rem; }
@media (max-width: 560px) {
  .rev-cta__actions { flex-direction: column; gap: 16px; }
  .rev-cta__actions .hp-btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   Завод металлоконструкций (6390) — блоки .mk-*, 2026-09-26
   Наследует .hp: сетки, .hp-h2, .hp-section, .hp-figures, .hp-quote уже
   в системе. Здесь только то, чего в системе нет: шаги производства,
   раскладка «фактор + фото», галерея, список ГОСТов и объекты.
   ========================================================================== */

/* Шаги производства */
.mk-steps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 1100px) { .mk-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .mk-steps { grid-template-columns: 1fr; } }
.mk-step { background: var(--surface); border: 1px solid var(--border-color); padding: 28px 24px; }
.mk-step__num { display: block; font-family: var(--font-display); font-size: 2rem; font-weight: 700; line-height: 1; color: var(--accent-text); margin-bottom: 12px; }
.mk-step__title { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.2; margin: 0 0 10px; }
.mk-step__text { font-size: .9375rem; line-height: 1.6; margin: 0; }

/* Пять факторов: текст + фото, фото чередуются */
.mk-quality { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 24px; }
.mk-quality__item { display: grid; grid-template-columns: 1.15fr 1fr; gap: 32px; align-items: center; background: var(--surface-alt); }
.mk-quality__item:nth-child(even) .mk-quality__text { order: 2; }
.mk-quality__text { padding: 32px; }
.mk-quality__title { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.2; margin: 0 0 12px; }
.mk-quality__lead { font-size: .9375rem; line-height: 1.6; margin: 0; }
.mk-quality__media { height: 100%; }
.mk-quality__img { display: block; width: 100%; height: 100%; min-height: 260px; object-fit: cover; }
@media (max-width: 900px) {
  .mk-quality__item { grid-template-columns: 1fr; gap: 0; }
  .mk-quality__item:nth-child(even) .mk-quality__text { order: 0; }
  .mk-quality__text { padding: 24px; }
  .mk-quality__img { min-height: 200px; height: 220px; }
}

/* Галерея производства */
.mk-gallery__grid { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1100px) { .mk-gallery__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .mk-gallery__grid { grid-template-columns: repeat(2, 1fr); } }
.mk-gallery__item { background: var(--surface-alt); overflow: hidden; }
.mk-gallery__img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s var(--ease-out); }
.mk-gallery__item:hover .mk-gallery__img { transform: scale(1.04); }

/* Нормативная база */
.mk-gosts__list { margin: 32px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--border-color); border: 1px solid var(--border-color); }
@media (max-width: 700px) { .mk-gosts__list { grid-template-columns: 1fr; } }
.mk-gosts__item a { display: block; background: var(--surface); padding: 20px 24px; height: 100%; }
.mk-gosts__item strong { display: block; font-family: var(--font-display); font-size: 1.0625rem; line-height: 1.2; margin-bottom: 6px; }
.mk-gosts__item span { display: block; font-size: .875rem; line-height: 1.5; color: var(--ink); opacity: .78; }
.mk-gosts__item a:hover strong { color: var(--accent-text); }

/* Объекты */
.mk-objects__grid { margin: 32px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .mk-objects__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .mk-objects__grid { grid-template-columns: 1fr; } }
.mk-objects__item { background: var(--surface); border: 1px solid var(--border-color); }
.mk-objects__link { display: flex; flex-direction: column; height: 100%; }
.mk-objects__media { display: block; background: var(--surface-alt); overflow: hidden; }
.mk-objects__img { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .5s var(--ease-out); }
.mk-objects__body { display: flex; flex-direction: column; gap: 12px; padding: 20px 24px 24px; flex: 1 1 auto; }
.mk-objects__name { font-family: var(--font-display); font-size: 1.0625rem; line-height: 1.3; }
.mk-objects__more { font-size: .875rem; color: var(--accent-text); margin-top: auto; }
.mk-objects__item:hover { border-color: var(--accent-text); }
.mk-objects__item:hover .mk-objects__img { transform: scale(1.04); }

.mk-faq details.d-faq { max-width: 900px; }

/* Тема на всех страницах выводит служебный блок «Запросить расчёт» с h2 без
   класса — и тот получает 51.2px (тема задаёт размер только .hp-h2).
   Задеваем только две наши премиум-страницы; остальной сайт не трогаем. */
.rev-pp h2:not([class]),
.mk-pp h2:not([class]),
.sv-pp h2:not([class]) { font-size: 2.5rem; line-height: 1.08; margin: 0 0 16px; }
@media (max-width: 900px) {
  .rev-pp h2:not([class]),
  .mk-pp h2:not([class]),
  .sv-pp h2:not([class]) { font-size: 1.75rem; line-height: 1.15; }
}

/* Навигация по разделам завода (13 пунктов меню). На узких экранах —
   горизонтальная прокрутка, чтобы не превращать блок в 13 строк. */
.mk-nav { background: var(--surface-alt); border-bottom: 1px solid var(--border-color); }
.mk-nav ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 28px; }
.mk-nav li { margin: 0; }
.mk-nav a { display: inline-block; padding: 16px 0; font-size: .9375rem; line-height: 1.3; color: var(--ink); }
.mk-nav a:hover { color: var(--accent-text); }
.mk-nav .current-menu-item > a,
.mk-nav .current_page_item > a { color: var(--accent-text); font-weight: 700; }
@media (max-width: 900px) {
  .mk-nav > .hp-wrap { overflow-x: auto; }
  .mk-nav ul { flex-wrap: nowrap; gap: 0 24px; }
  .mk-nav a { white-space: nowrap; }
}

/* ==========================================================================
   Сервисные страницы (ремонт и ТО, 17421) — на системе .hp, 2026-09-26.
   Шаги и карточки переиспользуют .mk-steps / .mk-objects__* из блока МК,
   здесь только то, что нужно сервисному разделу.
   ========================================================================== */
.mk-objects__text { font-size: .9375rem; line-height: 1.5; color: var(--ink); opacity: .78; }
.sv-types__note { margin: 24px 0 0; font-size: .9375rem; line-height: 1.6; }
.sv-types__note a { color: var(--accent-text); }
.sv-pp .mk-gosts__item > div { display: block; background: var(--surface); padding: 20px 24px; height: 100%; }

/* Широкие экраны (2026-09-28): пределы в ch/px оставляли пол-экрана пустым
   на 4К — описание героя шло полосой 62–66ch, вопросы МК 900px. Ответы
   вопросов (.eq-faq) отпущены во всю ширину общим правилом в
   equipment-premium.css. Ниже 1600px ничего не меняется. */
@media (min-width: 1600px) {
  .hp-hero__lead { max-width: none; }
  .mk-faq details.d-faq { max-width: none; }
}