:root { --blue: #0879a9; --blue-deep: #08709f; }
.service-card .service-card__media { right: 14px; bottom: 14px; }
.service-card--compact .service-card__media { left: max(14px, 5%); }
@media (min-width: 571px) and (max-width: 820px) {
  .service-card--compact .service-card__media { left: 56%; }
}
/* The service cards carry a lot of empty space, so on desktop the visual box grows about a fifth and
   uses the full card width; `object-fit: contain` keeps every photo inside it. Running into the arrow
   is acceptable — the arrow sits at the left of the copy and the artwork is anchored bottom right. */
@media (min-width: 1161px) {
  .service-card--installation .service-card__media { top: 0; left: 16%; }
  .service-card--repair .service-card__media { top: 51%; }
  .service-card--compact .service-card__media,
  .service-card--diagnostics .service-card__media,
  .service-card--inspection .service-card__media,
  .service-card--dismantling .service-card__media { top: 58%; right: 0; left: 0; }
}
.reveal { opacity: 1; transform: none; }
:root .button:not(.button--outline) { background: linear-gradient(135deg, #08709f, #0879a9); }
.lead-form__label-row em, .site-footer__legal { color: #62696e; }
.stat__label--editable, .hero h1, .installation-hero h1, .repair-hero h1, .secondary-hero h1 { white-space: pre-line; }
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
  .reveal.is-visible { opacity: 1; transform: none; }
  .hero__copy, .installation-hero__copy { animation: arrive .55s ease both; }
  .button { transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
  .button:hover { transform: translateY(-2px); }
  .lead-modal[open] .lead-modal__panel { animation: arrive .2s ease both; }
  @keyframes arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}
:focus-visible { outline: 3px solid #168fc7; outline-offset: 4px; }
.legal-copy a.button { color: #fff; }
@media print {
  .reveal { opacity: 1 !important; transform: none !important; }
  .site-header { position: static !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

.ui-icon { display: inline-block; width: 1em; height: 1em; flex: 0 0 auto; vertical-align: -.125em; }
.carousel-button .ui-icon, .service-card__arrow .ui-icon { width: 24px; height: 24px; }
button .ui-icon, summary .ui-icon { pointer-events: none; }
.payback-number__stepper .ui-icon, .fleet-number__control .ui-icon { width: 20px; height: 20px; }
.ui-icon--toggle { width: 20px; height: 20px; color: var(--blue); }
details[open] > summary > .ui-icon--toggle .ui-icon__vertical { display: none; }
.faq-clean summary > .ui-icon--toggle { justify-self: center; }
.lead-modal__close .ui-icon { width: 24px; height: 24px; }

@media (min-width: 1161px) { .services-grid { grid-auto-rows: 480px; } }
.services-grid:not(:has(.service-card)) { display: none; }
.promotions:not(:has(.promo-card)) .carousel-status { display: none; }
/* Short names fit in one row, as on the original site; groups added in the panel wrap instead of hiding behind a scroll without a scrollbar. Narrow screens keep the original swipe. */
@media (min-width: 1161px) { .prices-tabs { flex-wrap: wrap; overflow: visible; row-gap: 12px; } }
/* The two-column block leaves the tabs under 700px here; the original font and gaps need about 690px. */
@media (min-width: 1161px) and (max-width: 1365px) { .prices-tabs { column-gap: clamp(14px, calc(10.2vw - 104px), 28px); } .prices-tabs__item { font-size: 13px; } }
.prices-group-description { color: var(--muted); line-height: 1.5; margin: 0 0 24px; }
.prices-table-wrap + .prices-list-grid, .prices-page__table-wrap + .prices-page__list-columns { margin-top: 24px; }
/* Documents in the contacts look like the documents under the team block. */
.contact-certificates { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 20px; }
.contact-certificates a { min-height: 42px; display: inline-flex; align-items: center; padding: 9px 13px; color: var(--blue-deep); background: #f3f8fb; border: 1px solid #cbdce4; border-radius: 7px; font-size: 13px; font-weight: 650; line-height: 1.25; text-decoration: none; overflow-wrap: anywhere; }
.contact-certificates a:hover, .contact-certificates a:focus-visible { border-color: var(--blue); outline: 3px solid rgba(22, 143, 199, 0.16); outline-offset: 2px; }
.services-grid { grid-template-rows: none; }
@media (min-width: 821px) {
  .services-grid { grid-auto-rows: minmax(480px, auto); }
  .services-grid > [data-card-size="small"] { grid-column: span 3; }
  .services-grid > [data-card-size="medium"] { grid-column: span 4; }
  .services-grid > [data-card-size="large"] { grid-column: span 8; }
  .service-card[data-card-size="small"] .service-card__copy, .service-card[data-card-size="medium"] .service-card__copy { width: 100%; }
  .service-card[data-card-size="small"] .service-card__media, .service-card[data-card-size="medium"] .service-card__media { top: 58%; left: max(14px, 10%); width: auto; }
}

/* Sticky header shrinks once the page is scrolled; data-compact is set in legacy/site.ts. */
.site-header { transition: height 220ms ease, box-shadow 220ms ease; }
.site-header[data-compact] { height: 74px; box-shadow: 0 10px 26px rgba(15, 25, 31, .09); }
.site-header[data-compact] .brand__logo { width: clamp(98px, 6.6vw, 112px); }
/* The nav links render in Inter and need about 1340px before the last one runs into the phone number, so
   the header alone falls back to the mobile menu earlier than the 1160px the rest of the layout uses. */
@media (max-width: 1339px) {
  .site-header { height: 92px; }
  .site-header__inner { grid-template-columns: 190px 1fr auto; }
  .main-nav { display: none; }
  .mobile-menu { display: block; }
  .header-actions { grid-column: 3; }
  .hero { min-height: calc(100svh - 92px); }
  .site-header[data-compact] { height: 68px; }
}

/* This sheet loads last, so the block above also matches narrow screens; re-assert their header here. */
@media (max-width: 820px) {
  .site-header { height: 78px; }
  .site-header__inner { grid-template-columns: 1fr auto; gap: 14px; }
  .header-actions { grid-column: 2; }
  .hero { min-height: auto; }
  .site-header[data-compact] { height: 58px; }
}

/* Pointer cursor on everything that reacts to a click. */
.button,
button:not(:disabled),
summary,
[role="button"]:not([aria-disabled="true"]),
input[type="checkbox"]:not(:disabled),
input[type="radio"]:not(:disabled),
input[type="range"]:not(:disabled),
.lead-form__consent span label { cursor: pointer; }
button:disabled,
.button[aria-disabled="true"],
[role="button"][aria-disabled="true"] { cursor: not-allowed; }

/* The reveal transition is skipped when a details toggle — not a scroll — brings a section into view. */
.reveal--instant { transition: none !important; }
/* «Написать в MAX» without an address: a link without href, shown inactive like the original placeholder. */
.contact-actions__menu a.contact-actions__pending, .contact-actions__menu a.contact-actions__pending:hover { color: #7d8388; background: none; cursor: not-allowed; }