/* ============================================
   Master-Zamka — Design Tokens
   Source: specs/technical_specification.md §3
   ============================================ */

:root {
  /* Typography (§3.1) */
  --font-primary: 'Roboto', sans-serif;

  /* Colors (§3.2) */
  --color-primary: #4579B6;
  --color-text-dark: #2A2E3E;
  --color-text-body: #3F474C;
  --color-cta-green: #4FB300;
  --color-white: #FFFFFF;
  --color-bg-light: #F6F7FA;
  --color-bg-hover: #E3E9EE;
  --color-bg-alt: #E7E9F2;
  --color-footer-bg: #3F474C;
  --color-footer-dark: #485055;
  --color-text-muted: #8B8F92;
  --color-text-secondary: #556672;
  --color-danger: #F31E17;
  --color-border: #DFE3EF;
  --color-border-light: #E3E9EE;
  --color-black: #000000;

  /* Spacing (§3.3) */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 15px;
  --space-5: 20px;
  --space-6: 25px;
  --space-7: 30px;
  --space-8: 40px;
  --space-9: 50px;
  --space-10: 80px;

  /* Special sizes (§3.3.2) */
  --header-height-mobile: 50px;
  --header-height-tablet: 64px;
  --header-height-desktop: 130px;
  --modal-width: 558px;
  --modal-height: 627px;
  --content-max-width: 1180px;
  --nav-width: 1253px;

  /* Border Radius (§3.4) */
  --radius-sm: 4px;
  --radius-md: 5px;
  --radius-lg: 8px;
  --radius-pill: 50px;
  --radius-round: 20px;

  /* Shadows (§3.5) */
  --shadow-header: 0 10px 40px rgba(72, 127, 191, 0.1);
  --shadow-card: 0 6px 10px rgba(70, 86, 132, 0.08);
  --shadow-card-hover: 0 6px 10px rgba(70, 86, 132, 0.2);
  --shadow-carousel-nav: 0 8px 10px rgba(63, 71, 76, 0.1);

  /* Z-Index (§3.7) */
  --z-base: 1;
  --z-overlay-content: 10;
  --z-service-img: 10;
  --z-loget: 100;
  --z-header: 1000;
  --z-header-desktop: 10000;
}

/* Utility: hide on mobile, show on tablet+ */
.desk-only { display: none; }
@media (min-width: 1440px) { .desk-only { display: inline; } }

/* ============================================
   @font-face — Roboto v51 variable font (Google Fonts CDN match)
   Subset: cyrillic-ext + cyrillic + latin-ext + latin (CR-01)
   font-display: swap (§6.2.2)
   Variable font: single file per subset covers all weights (100-900)
   ============================================ */

/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto-cyrillic-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-stretch: 100%;
  font-display: swap;
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto-cyrillic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-stretch: 100%;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* latin-ext */
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-stretch: 100%;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-stretch: 100%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================
   Base Reset — Mobile-first (C-06)
   Base styles = viewport 375px
   ============================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  background: #F6F7FA;
  overflow-x: hidden;
}

body {
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  color: var(--color-text-body);
  background-color: #F6F7FA;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

input {
  font-family: inherit;
}

/* Desktop-only elements: hidden on mobile, shown at >=1180px */
.desk {
  display: none;
}

/* Mobile-only line breaks: shown on mobile, hidden at >=768px */
.mobil {
  display: inline;
}

/* Main content offset for fixed header (§5.2.1) */
.main {
  padding-top: var(--header-height-mobile);
}

.main--flush {
  padding-bottom: 0;
}

/* Content container (§5.2.1) */
.container {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

/* ============================================
   Breakpoints (C-06: only min-width, 0 max-width)
   768px — Tablet
   1024px — Desktop narrow
   1180px — Desktop full
   ============================================ */

@media (min-width: 768px) {
  .main {
    padding-top: 47px;
  }

  .mobil {
    display: none;
  }
}

@media (min-width: 1180px) {
  .main {
    padding-top: 132px;
  }

  .desk {
    display: initial;
  }
}

/* ============================================
   Section 1: Header (SC-01)
   Mobile: 50px, burger + logo + phone icon
   ≥768px: 64px, + info + phone text + CTA
   ≥1180px: 130px, + desktop nav, burger hidden
   ============================================ */

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height-mobile);
  background: var(--color-white);
  z-index: var(--z-header);
  box-shadow: 0 10px 40px rgba(72, 127, 191, 0.1);
  color: #000;
}

.header__top {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 15px;
}

/* Burger button (right side) */
.header__burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  padding: 0;
}

.header__burger-line {
  display: block;
  width: 18px;
  height: 2px;
  background: #2A2E3E;
  border-radius: 1px;
  transition: all 0.6s;
}

.header__burger-line + .header__burger-line {
  margin-top: 4px;
}

/* Burger → cross animation (open) */
.header__burger.is-open .header__burger-line:nth-child(1) {
  width: 21px;
  transform: translateY(6px) rotate(-45deg);
}

.header__burger.is-open .header__burger-line:nth-child(2) {
  opacity: 0;
}

.header__burger.is-open .header__burger-line:nth-child(3) {
  width: 21px;
  transform: translateY(-6px) rotate(45deg);
}

/* Logo: icon on mobile, full on tablet+ */
.header__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  text-decoration: none;
}

.header__logo-icon {
  height: 38px;
  width: auto;
}

.header__logo-full {
  display: none;
}

/* Info block: hidden on mobile */
.header__info {
  display: none;
}

.header__info-icon {
  flex-shrink: 0;
  width: 23px;
  height: 30px;
}

.header__info-title {
  font-size: 13px;
  font-weight: 500;
  color: #000;
}

.header__info-sub {
  font-size: 13px;
  font-weight: 400;
  color: #000;
}

/* Phone (center on mobile, digits always visible) */
.header__phone-wrap {
  flex: 1;
  text-align: center;
}

.header__phone {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.header__phone-number {
  font-size: 17px;
  font-weight: 600;
  color: #000;
  white-space: nowrap;
}

.header__phone-label {
  display: none;
}

/* CTA button: hidden on mobile */
.header__cta {
  display: none;
}

/* Desktop nav: hidden on mobile/tablet */
.header__nav {
  display: none;
}

/* Focus visible states (accessibility) */
.header__burger:focus-visible,
.header__cta:focus-visible,
.header__phone:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ---- Tablet ≥768px ---- */
@media (min-width: 768px) {
  .header {
    height: var(--header-height-tablet);
  }

  .header__logo-icon {
    display: none;
  }

  .header__logo-full {
    display: block;
    height: 36px;
    width: auto;
  }

  .header__phone-number {
    font-size: 18px;
    font-weight: 400;
  }

  .header__cta {
    display: block;
    background: var(--color-cta-green);
    color: var(--color-white);
    font-size: 14px;
    font-weight: 500;
    padding: 12px 23px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    min-height: auto;
    min-width: 44px;
    flex-shrink: 0;
    margin-left: 15px;
    cursor: pointer;
  }
}

/* ---- Desktop ≥1180px ---- */
@media (min-width: 1180px) {
  .header {
    height: var(--header-height-desktop);
    z-index: var(--z-header-desktop);
  }

  .header__top {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 0 15px;
    height: 80px;
  }

  .header__burger {
    display: none;
  }

  .header__logo-full {
    height: 48px;
  }

  .header__phone-wrap {
    margin-left: auto;
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .header__phone-label {
    display: inline;
    font-size: 14px;
    font-weight: 400;
    color: #68777F;
    white-space: nowrap;
  }

  .header__phone-number {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-text-dark);
    letter-spacing: 0.3px;
  }

  .header__cta {
    min-height: auto;
    margin-right: 5px;
    margin-left: 15px;
  }

  /* Desktop navigation */
  .header__nav {
    display: block;
    position: relative;
    top: 0;
    background: var(--color-white);
    height: 50px;
    border-top: 1px solid rgba(151, 151, 151, 0.22);
  }

  .header__nav-list {
    display: table;
    width: var(--nav-width);
    margin: 0 auto;
    table-layout: fixed;
  }

  .header__nav-item {
    display: table-cell;
    text-align: center;
    line-height: 50px;
    font-size: 16px;
    color: var(--color-text-body);
  }

  .header__nav-item a,
  .header__nav-link {
    display: block;
    width: 100%;
    padding: 0;
    color: inherit;
    font: inherit;
    transition: color 0.2s;
  }

  .header__nav-item a:hover,
  .header__nav-link:hover {
    color: var(--color-primary);
  }

  .header__nav-item a:focus-visible,
  .header__nav-link:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
  }

  /* Dropdown: Наши услуги */
  .header__nav-item--dropdown {
    position: relative;
  }

  .header__nav-arrow {
    display: inline-block;
    width: 10px;
    height: 6px;
    margin-left: 4px;
    vertical-align: middle;
    fill: currentColor;
    transition: transform 0.3s;
  }

  .header__nav-sub {
    display: none;
    position: absolute;
    top: 100%;
    left: -30px;
    width: 264px;
    line-height: 32px;
    text-align: left;
    background: var(--color-white);
    box-shadow: var(--shadow-header);
    border-radius: var(--radius-sm);
    z-index: var(--z-header-desktop);
    padding: 27px 37px 26px 47px;
  }

  .header__nav-sub::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 124px;
    transform: rotate(45deg);
    width: 20px;
    height: 20px;
    background: var(--color-white);
  }

  .header__nav-item--dropdown:hover .header__nav-link {
    color: var(--color-primary);
  }

  .header__nav-item--dropdown:hover .header__nav-arrow {
    transform: rotate(180deg);
  }


  .header__nav-item--dropdown:hover .header__nav-sub {
    display: block;
  }


  .header__nav-sub li {
    color: var(--color-primary);
    list-style: disc;
  }

  .header__nav-sub li a {
    display: block;
    padding: 0;
    font-size: 16px;
    font-weight: 400;
    color: inherit;
  }

  .header__nav-sub li a:hover {
    background: var(--color-bg-light);
    color: var(--color-primary);
  }
}

/* ============================================
   Floating CTA bar
   ============================================ */

.floating-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 0;
  background: var(--color-cta-green);
  z-index: var(--z-header);
  text-align: center;
}

.floating-cta__btn {
  display: block;
  width: 100%;
  background: transparent;
  color: var(--color-white);
  font-size: 20px;
  font-weight: 700;
  padding: 0;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

/* Hide floating CTA when mobile menu is open */
.floating-cta.is-hidden {
  display: none;
}

/* ---- Tablet ≥768px: hide floating CTA (header__cta takes over) ---- */
@media (min-width: 768px) {
  .floating-cta {
    display: none;
  }
}

/* ============================================
   Section 2: Mobile Menu (SC-02)
   Full-screen overlay, hidden by default
   Visible when .is-open, hidden ≥1180px
   ============================================ */

.mobile-menu {
  position: fixed;
  top: var(--header-height-mobile);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-bg-light);
  z-index: calc(var(--z-header) - 1);
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 0.5s;
  padding: var(--space-5) 0;
}

.mobile-menu.is-open {
  transform: translateX(0);
}

.mobile-menu[aria-hidden="true"] {
  visibility: hidden;
}

.mobile-menu[aria-hidden="false"] {
  visibility: visible;
}

.mobile-menu__list {
  padding: 0 var(--space-5);
}

.mobile-menu__item {
  line-height: 32px;
}

.mobile-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 32px;
  color: var(--color-text-body);
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}

.mobile-menu__link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

/* Dropdown arrow — hidden on mobile (live site has no toggle) */
.mobile-menu__arrow {
  display: none;
}

/* Submenu: always visible on mobile (matches live site) */
.mobile-menu__sub {
  padding-left: 40px;
}

.mobile-menu__sub li {
  list-style: disc;
  color: var(--color-primary);
  line-height: 32px;
}

.mobile-menu__sub-link {
  display: block;
  font-size: 14px;
  font-weight: 400;
  line-height: 32px;
  color: var(--color-primary);
}

.mobile-menu__sub-link:hover {
  color: var(--color-primary);
}

.mobile-menu__sub-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

/* ---- Tablet ≥768px ---- */
@media (min-width: 768px) {
  .mobile-menu {
    top: var(--header-height-tablet);
  }
}

/* ---- Desktop ≥1180px: menu hidden, desktop nav takes over ---- */
@media (min-width: 1180px) {
  .mobile-menu {
    display: none;
  }
}

/* ============================================
   Section 3: H1 + Hero Slider (IE-02)
   6 slides: services with prices and links
   CSS scroll-snap + vanilla JS carousel
   ============================================ */

.hero {
  color: #000;
}

/* H1 — critical CSS provides base; this refines with tokens */
.hero__title {
  font-size: 20px;
  font-weight: 900;
  line-height: 24px;
  margin-bottom: 13.4px;
  color: var(--color-text-dark);
  margin-top: 14px;
  padding: 0 var(--space-4);
  text-align: center;
}

.hero__title-brand {
  display: none;
}

@media (min-width: 1400px) {
  .hero__title-brand {
    display: inline;
  }
}

/* Slider container */
.hero__slider {
  position: relative;
}

/* Track: scrollable flex row with scroll-snap */
.hero__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #c0c0c0 transparent;
  gap: 13px;
  padding: 0 var(--space-4);
  scroll-padding-left: var(--space-4);
  scroll-behavior: smooth;
}

.hero__track::-webkit-scrollbar {
  height: 4px;
}

.hero__track::-webkit-scrollbar-track {
  background: transparent;
}

.hero__track::-webkit-scrollbar-thumb {
  background: #c0c0c0;
  border-radius: 2px;
}

/* Individual slide */
.hero__slide {
  flex: 0 0 calc(50% - 26px);
  scroll-snap-align: start;
  min-width: 0;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  margin-bottom: 15px;
}

/* Card link wrapper */
.hero__card {
  display: block;
  text-decoration: none;
}

.hero__card:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-lg);
}

/* Card image container */
.hero__card-img {
  position: relative;
}

.hero__card-img img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Price badge overlay */
.hero__price {
  position: absolute;
  bottom: 0;
  left: 0;
  background: var(--color-danger);
  color: var(--color-white);
  font-size: 14px;
  font-weight: 700;
  padding: 3px 7px;
  border-top-right-radius: 10px;
  line-height: normal;
  white-space: nowrap;
}

/* Service name below image */
.hero__card-title {
  display: block;
  font-size: 13px;
  font-weight: 500;
  line-height: 24px;
  color: var(--color-text-secondary);
  text-align: center;
  padding: 4px;
  background: #fff;
}

/* Navigation arrows — hidden on mobile */
.hero__nav-btn {
  display: none;
}

/* Dots navigation — hidden on mobile/tablet (live has none below desktop) */
.hero__dots {
  display: none;
  justify-content: center;
  gap: 8px;
  padding-top: var(--space-1);
}

.hero__dot {
  width: 8px;
  height: 8px;
  border: none;
  border-radius: 20px;
  background: #DADDE8;
  padding: 0;
  cursor: pointer;
  transition: background 0.3s;
  position: relative;
}

/* Invisible touch target ≥44×44px (C-06) */
.hero__dot::before {
  content: '';
  position: absolute;
  top: -18px;
  left: -18px;
  right: -18px;
  bottom: -18px;
}

.hero__dot.is-active {
  background: #4980C0;
}

.hero__dot:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
}

/* ---- Tablet ≥768px ---- */
@media (min-width: 768px) {
  .hero__title {
    font-size: 38px;
    line-height: 58px;
    margin-top: 43px;
    margin-bottom: 12px;
    padding: 0 15px;
  }

  .hero__slider {
    margin-bottom: 43px;
  }

  .hero__track {
    padding: 15px 20px;
    scroll-padding-left: 20px;
    gap: 30px;
  }

  .hero__slide {
    flex: 0 0 271px;
  }

  .hero__price {
    font-size: 16px;
    padding: 3px 11px;
  }

  .hero__card-title {
    font-size: 18px;
    padding: 15px 8px;
  }
}

/* ---- Desktop ≥1180px ---- */
@media (min-width: 1180px) {
  .hero__title {
    font-size: 48px;
    font-weight: 900;
    line-height: 58px;
    width: var(--content-max-width);
    max-width: 100%;
    margin: 50px auto 40px auto;
    padding: 0;
    text-align: center;
  }

  .hero__track {
    max-width: var(--content-max-width);
    margin: 0 auto;
    gap: 32px;
    scrollbar-width: none;
    padding: 15px 0 15px;
    cursor: grab;
  }

  .hero__track::-webkit-scrollbar {
    display: none;
  }

  .hero__slide {
    flex: 0 0 271px;
    margin-bottom: 0;
  }

  .hero__slide:hover {
    box-shadow: var(--shadow-card-hover);
  }

  .hero__price {
    font-size: 16px;
    padding: 3px 11px;
  }

  .hero__card-title {
    font-size: 18px;
  }

  /* Dots — visible on desktop (live: .owl-dot 8×8, no border, margin-right:6px) */
  .hero__dots {
    display: flex;
    justify-content: center;
    gap: 0;                                      /* override base gap */
    padding: 21px 0 4px;
  }

  .hero__dot {
    margin-right: 6px;                           /* live: every owl-dot has margin-right:6px (incl. last) */
  }

  /* Navigation arrows — visible on desktop (live: .owl-nav + .owl-prev/.owl-next) */
  .hero__nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 100px;                                  /* live: .owl-nav { top: 100px } */
    width: 42px;
    height: 42px;
    border-radius: var(--radius-pill);
    background: var(--color-white);
    box-shadow: var(--shadow-carousel-nav);
    z-index: var(--z-overlay-content);
    cursor: pointer;
    transition: box-shadow 0.2s;
  }

  .hero__nav-btn svg {
    display: block;
    flex-shrink: 0;
  }

  .hero__nav-btn:hover {
    box-shadow: var(--shadow-card-hover);
  }

  .hero__nav-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }

  .hero__nav-btn--prev {
    left: calc(50% - 664px);                     /* live: .owl-nav width:1328px left:-74px → 1328/2=664 */
  }

  .hero__nav-btn--prev svg {
    transform: translateX(-2px);                   /* optical centering: shift arrow toward pointing direction */
  }

  .hero__nav-btn--next {
    right: calc(50% - 664px);
  }

  .hero__nav-btn--next svg {
    transform: translateX(2px);                    /* optical centering: shift arrow toward pointing direction */
  }
}

/* Services section wrapper */
.services {
  padding: 0 15px 15px;
  color: #000;
}

.services__list {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 5px;
}

/* ---- Tablet ≥768px ---- */
@media (min-width: 768px) {
  .services {
    padding: 0 20px 46px;
  }
}

/* ---- Desktop ≥1180px ---- */
@media (min-width: 1180px) {
  .services {
    padding: 0;
    margin-bottom: 100px;
  }
}

/* ============================================
   Section 5: Price Cards (IE-03)
   ============================================ */

.prices {
  background: var(--color-white);
  padding: 0 var(--space-4) 40px;
  color: #000;
}

.prices__title {
  font-size: 20px;
  font-weight: 900;
  line-height: 24px;
  color: #000;
  padding-top: 30px;
  margin-bottom: 17px;
  text-align: center;
}

.prices__list {
  max-width: var(--content-max-width);
  margin: 0 auto;
}

/* Price list table layout */
.price-list {
  list-style: none;
  padding: 0;
}

.price-list__item {
  display: table;
  width: 100%;
  padding: 11px 0;
  border-bottom: 1px solid rgba(151, 151, 151, 0.19);
  font-size: 14px;
  font-weight: 500;
}

.price-list__item:last-child {
  border-bottom: none;
}

.price-list__name {
  display: table-cell;
  vertical-align: middle;
  text-align: left;
}

.price-list__cost {
  display: table-cell;
  text-align: right;
  color: var(--color-primary);
  white-space: nowrap;
}

/* ---- Tablet ≥768px ---- */
@media (min-width: 768px) {
  .prices {
    padding: 0 20px 90px;
  }

  .prices__title {
    font-size: 40px;
    line-height: 50px;
    padding-top: 89px;
    margin-bottom: 49px;
  }

  .price-list__item {
    padding: 18px 0;
    font-size: 18px;
  }

  .price-list__item:last-child {
    padding: 20px 0;
  }
}

/* ---- Desktop ≥1180px ---- */
@media (min-width: 1180px) {
  .prices {
    padding: 0 0 90px;
  }

  .prices__title {
    font-size: 40px;
    line-height: 50px;
    padding-top: 89px;
    margin-bottom: 49px;
  }

  .prices__list {
    max-width: 900px;
  }
}

/* ============================================
   Service cards (simple offers, no accordion)
   ============================================ */
.service-card {
  display: flex;
  align-items: center;
  background: var(--color-white);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 5px;
}

.service-card__icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  margin-right: 10px;
  fill: #4980C0;
  stroke: none;
}

.service-card__title {
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  color: #3F474C;
}

@media (min-width: 768px) {
  .service-card {
    padding: 20px 25px;
  }
  .service-card__icon {
    width: 44px;
    height: 44px;
    margin-right: 20px;
  }
  .service-card__title {
    font-size: 18px;
  }
}

@media (min-width: 1180px) {
  .services__list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 0;
  }
  .service-card {
    flex: 0 1 calc(50% - 6px);
    margin-bottom: 0;
    padding: 18px 25px;
    box-shadow: var(--shadow-card);
  }
  .service-card__icon {
    width: 40px;
    height: 40px;
    margin-right: 18px;
  }
  .service-card__title {
    font-size: 16px;
    font-weight: 600;
    color: #505050;
  }
}

/* ============================================
   Price list flat (no accordion)
   ============================================ */
.price-list--flat {
  list-style: none;
  padding: 0;
  margin: 0 5px 25px;
}

.price-list--flat .price-list__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 15px;
  background: #fff;
  border-radius: 5px;
  margin-bottom: 3px;
  box-shadow: 0 2px 10px rgba(70, 86, 132, 0.15);
}

.price-list--flat .price-list__name {
  font-size: 14px;
  font-weight: 500;
  color: #3F474C;
}

.price-list--flat .price-list__cost {
  font-size: 14px;
  font-weight: 500;
  color: #4980C0;
  white-space: nowrap;
  margin-left: 15px;
}

@media (min-width: 768px) {
  .price-list--flat .price-list__item {
    padding: 16px 25px;
  }
  .price-list--flat .price-list__name {
    font-size: 16px;
  }
  .price-list--flat .price-list__cost {
    font-size: 16px;
  }
}

@media (min-width: 1180px) {
  .price-list--flat {
    max-width: 900px;
    margin: 0 auto 30px;
  }
}

/* ============================================
   Trust blocks (always open, replaces advantages accordion)
   ============================================ */
/* ===== Mid-page CTA ===== */
.mid-cta {
  text-align: center;
  padding: 25px 15px;
  background: #F6F7FA;
}

.mid-cta__phone {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text-dark);
  text-decoration: none;
  margin-bottom: 12px;
}

.mid-cta__btn {
  display: inline-block;
  background: var(--color-cta-green);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  padding: 14px 40px;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
}

@media (min-width: 768px) {
  .mid-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    padding: 30px;
  }

  .mid-cta__phone {
    font-size: 26px;
    margin-bottom: 0;
  }
}

@media (min-width: 1180px) {
  .mid-cta {
    padding: 40px;
  }

  .mid-cta__phone {
    font-size: 30px;
  }

  .mid-cta__btn {
    font-size: 18px;
    padding: 16px 50px;
  }
}

/* ===== Trust blocks ===== */
.trust-blocks {
  padding: 0;
  color: #000;
}

.trust-blocks__title {
  font-size: 20px;
  font-weight: 900;
  line-height: 24px;
  color: #000;
  margin: 17px 15px;
  text-align: center;
}

.trust-blocks__list {
  max-width: var(--content-max-width);
  margin: 0 15px 25px;
}

.trust-block {
  background: var(--color-white);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  padding: 20px 15px;
}

.trust-block__header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.trust-block__icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  margin-right: 15px;
  stroke: #4980C0;
  fill: none;
}

.trust-block__name {
  font-size: 15px;
  font-weight: 700;
  color: #3F474C;
  margin: 0;
}

.trust-block__body p {
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  color: #3F474C;
  margin: 0 0 6px;
}

.trust-block__body p:last-child {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .trust-block {
    padding: 25px;
  }
  .trust-block__name {
    font-size: 20px;
  }
  .trust-block__body p {
    font-size: 14px;
    line-height: 20px;
  }
}

@media (min-width: 1180px) {
  .trust-blocks__title {
    font-size: 40px;
    line-height: 50px;
    margin: 35px auto 35px;
  }
  .trust-blocks__list {
    display: flex;
    gap: 15px;
    margin: 0 auto 30px;
  }
  .trust-block {
    flex: 1;
    margin-bottom: 0;
  }
  .trust-block__icon {
    width: 42px;
    height: 42px;
  }
}

/* ============================================
   Blog link section
   ============================================ */
.blog-link-section {
  text-align: center;
  padding: 20px 15px;
}

.blog-link-btn {
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-sm);
  padding: 14px 40px;
  transition: background 0.2s, color 0.2s;
}

.blog-link-btn:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

@media (min-width: 1180px) {
  .blog-link-section {
    padding: 30px 0;
  }
  .blog-link-btn {
    font-size: 18px;
    padding: 16px 60px;
  }
}

/* ============================================
   Section 8: Specialists Carousel (SC-08, IE-06)
   Live: div.bezopas > h2 + section.slider > div.razmer > [div.shap > a > div > img + p.nameaction] × 5
   Ours: section.specialists > h2 + div.specialists__slider > div.specialists__track > [div.specialists__card ...] × 5
   R-15: content-box→border-box, float→flex, inline-block→block
   ============================================ */

/* --- Mobile (base, <768px) --- */
/* Live .bezopas has NO side padding; cards handle own left offset */
/* ===== Geo block (minimal) ===== */
.geo {
  padding: 20px 15px;
  text-align: center;
}

.geo__line {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text-dark);
  margin: 0;
}

.geo__link {
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1px dashed var(--color-primary);
  cursor: pointer;
}

.geo__link:hover {
  border-bottom-style: solid;
}

.geo__link[aria-expanded="true"] {
  font-weight: 700;
  border-bottom-style: solid;
}

.geo__panel {
  max-width: 600px;
  margin: 12px auto 0;
}

.geo__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  justify-content: center;
}

.geo__list li a {
  font-size: 13px;
  color: #555;
  text-decoration: none;
}

.geo__list li a:hover {
  color: var(--color-primary);
}

@media (min-width: 1180px) {
  .geo {
    width: var(--content-max-width);
    margin: 0 auto;
    padding: 30px 0;
  }

  .geo__line {
    font-size: 17px;
  }

  .geo__panel {
    max-width: 900px;
  }

  .geo__list {
    gap: 8px 28px;
  }

  .geo__list li a {
    font-size: 14px;
  }
}

/* ===== Reviews carousel ===== */
.reviews {
  padding: 0;
  background: #F6F7FA;
}

.reviews__title {
  font-family: var(--font-primary);
  font-size: 20px;
  font-weight: 900;
  line-height: 24px;
  text-align: center;
  margin: 30px 15px 17px;
  color: var(--color-text-dark);
}

.reviews__slider {
  position: relative;
}

.reviews__viewport {
  overflow: hidden;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 15px;
}

.reviews__track {
  display: flex;
  gap: 12px;
  padding-left: 15px;
}

.reviews__card {
  flex: 0 0 auto;
  width: 70vw;
  max-width: 340px;
  border-radius: var(--radius-md);
  overflow: hidden;
  scroll-snap-align: start;
  line-height: 0;
  font-size: 0;
  margin-bottom: 15px;
}

.reviews__photo {
  display: block;
  width: 100%;
  height: auto;
}

.reviews__dots {
  display: none;
}

@media (min-width: 768px) {
  .reviews__title {
    font-size: 24px;
    line-height: 30px;
  }

  .reviews__track {
    gap: 20px;
    padding-left: 20px;
  }

  .reviews__card {
    width: 45vw;
    max-width: 380px;
  }
}

@media (min-width: 1180px) {
  .reviews {
    width: var(--content-max-width);
    margin: 0 auto;
    padding: 0;
  }

  .reviews__title {
    font-size: 40px;
    line-height: 50px;
    padding-top: 40px;
    margin-bottom: 30px;
    margin-top: 0;
  }

  .reviews__viewport {
    overflow: hidden;
  }

  .reviews__track {
    display: flex;
    gap: 32px;
    padding-left: 0;
    transition: transform 250ms ease;
    will-change: transform;
    cursor: grab;
  }

  .reviews__track:active {
    cursor: grabbing;
  }

  .reviews__card {
    width: calc((100% - 64px) / 3);
    max-width: none;
  }

  .reviews__dots {
    display: flex;
    justify-content: center;
    padding: 20px 0 30px;
  }

  .reviews__dot {
    position: relative;
    width: 8px;
    height: 8px;
    border: none;
    border-radius: 20px;
    background: #DADDE8;
    padding: 0;
    cursor: pointer;
    margin-right: 6px;
  }

  .reviews__dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
  }

  .reviews__dot.is-active {
    background: var(--color-primary);
  }
}

/* ===== Specialists carousel ===== */
.specialists {
  padding: 0;
}

.specialists__title {
  font-family: var(--font-primary);
  font-size: 20px;
  font-weight: 900;
  line-height: 24px;
  text-align: center;
  color: #000;
  margin: 17px 0;
}

.specialists__slider {
  position: relative;
}

.specialists__viewport {
  overflow: hidden;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 15px;
}

.specialists__track {
  display: flex;
  gap: 12px;
  padding-left: 15px;
}

.specialists__card {
  flex: 0 0 auto;
  width: 39.2vw;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  scroll-snap-align: start;
  margin-bottom: 15px;
}

.specialists__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.specialists__photo-wrap {
  position: relative;
  width: 100%;
  display: block;
}

.specialists__photo {
  display: block;
  width: 100%;
  height: auto;
}

.specialists__name {
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 500;
  line-height: 24px;
  color: var(--color-text-secondary);
  background: var(--color-white);
  text-align: center;
  padding: 4px;
  margin: 0;
}

/* Dots hidden on mobile/tablet (CSS scroll) */
.specialists__dots {
  display: none;
}

/* --- Tablet (768px) --- */
/* Live: .bezopas has NO side padding at tablet; h2 stays 20px until 1180px */
@media (min-width: 768px) {
  .specialists {
    padding: 0;                     /* live .bezopas has NO padding at 768px; gap comes from slider margin-bottom */
  }

  .specialists__slider {
    margin-bottom: 43px;
  }

  .specialists__viewport {
    scroll-padding-left: 20px;
  }

  .specialists__track {
    gap: 34px;
    padding-left: 20px;
  }

  .specialists__card {
    width: 271px;
    margin-top: 15px;
    margin-bottom: 15px;
  }

  .specialists__name {
    font-size: 18px;
    padding: 15px 8px;
  }
}

/* --- Desktop (1180px) --- */
@media (min-width: 1180px) {
  .specialists {
    width: var(--content-max-width);
    margin: 0 auto;
    padding: 0;
  }

  .specialists__title {
    color: var(--color-text-dark);
    font-size: 40px;
    line-height: 50px;
    padding-top: 80px;
    margin-bottom: 49px;
    margin-top: 0;
  }

  .specialists__slider {
    margin-bottom: 43px;
  }

  .specialists__viewport {
    overflow: hidden;
  }

  .specialists__track {
    display: flex;
    gap: 32px;
    padding-left: 0;
    transition: transform 250ms ease;
    will-change: transform;
    cursor: grab;
  }

  .specialists__track:active {
    cursor: grabbing;
  }

  .specialists__card {
    /* 4 cards + 3 gaps of 32px in 1180px: (1180 - 96) / 4 = 271px */
    flex: 0 0 271px;
    width: 271px;
    margin-top: 15px;
    margin-bottom: 15px;
  }

  .specialists__card:hover {
    box-shadow: var(--shadow-card-hover);
  }

  /* Dots — 8×8px visual, 44×44px touch target via ::after */
  .specialists__dots {
    display: flex;
    justify-content: center;
    padding: 6px 0 4px;                          /* live: inline-block line-height = 18px */
  }

  .specialists__dot {
    position: relative;
    width: 8px;
    height: 8px;
    border: none;
    border-radius: 20px;
    background: #DADDE8;
    padding: 0;
    cursor: pointer;
    margin-right: 6px;                           /* live: every owl-dot has margin-right:6px */
  }

  .specialists__dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
  }

  .specialists__dot.is-active {
    background: var(--color-primary);
  }
}

/* ============================================
   Section 9: SEO Text (SC-09)
   ============================================ */

/* -- Mobile (base) -- */
.seo-text h2 {
  font-size: 20px;
  font-weight: 900;
  line-height: 24px;
  color: var(--color-text-dark);
  text-align: center;
  padding-top: 30px;
  margin-bottom: 0.83em;
}

.seo-text h3 {
  font-weight: 700;
  margin: 1em 0;
  text-align: center;
  font-size: 18px;
  line-height: 24px;
}

.seo-text p {
  margin: 1em 0;
}

.seo-text ul {
  padding-left: 23px;
  margin: 1em 0;
  list-style: disc;
}

.seo-text ul li {
  margin-top: 8px;
}

.seo-text ul li:first-child {
  margin-top: 0;
}

/* Geo pages: dash-style list (live .blueul) */
.seo-text ul.seo-text__blueul {
  color: #4980C0;
  list-style: none;
  padding-left: 18px;
}

.seo-text ul.seo-text__blueul li {
  font-weight: 500;
  color: #4980C0;
  margin: 7px 0 0;
}

.seo-text ul.seo-text__blueul li:first-child {
  margin: 0;
}

.seo-text ul.seo-text__blueul li::before {
  content: "\2014";                              /* em-dash — */
  position: relative;
  left: -9px;
  top: 1px;
  font-size: 16px;
}

.seo-text ol {
  padding-left: 40px;
  margin: 1em 0;
  list-style: decimal;
}

.seo-text ol ul {
  padding-left: 20px;
  margin: 0.5em 0;
  list-style: disc;
}

.seo-text .text-center {
  text-align: center;
}

.seo-text .align-right {
  width: 100%;
  height: auto;
  margin-bottom: 15px; /* mobile: visual gap below full-width image before next block */
}
.seo-text .align-left {
  width: 100%;
  height: auto;
  margin-bottom: 15px;
}

/* T-BRAND: brand logo overlay on hero image */
.service-hero__brand-logo {
  position: absolute;
  top: 15px;
  left: 0;
  z-index: 2;
  background: rgba(255,255,255,.6);
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  padding: 12px 12px 16px;                     /* live: 12px all + ~4px inline img descender gap = 16px bottom */
  width: 134px; /* live: content-box 110px + padding 12px*2 = 134px border-box */
  height: auto;
}

/* -- Tablet (768px) -- */
@media (min-width: 768px) {
  .seo-text h2 {
    font-size: 40px;
    line-height: 50px;
    padding-top: 89px;
    margin-bottom: 49px;
  }

  .seo-text h3 {
    font-size: 24px;
    line-height: 30px;
  }

  .seo-text p {
    margin: -6px 0 25px;
  }

  .seo-text .align-right {
    float: right;
    padding: 0 0 10px 0;                        /* no side padding — full-width at tablet */
  }

  .seo-text .align-left {
    float: left;
    padding: 0 0 10px 0;                        /* no side padding — border-box + width:100% would shrink image */
  }
}

/* -- Desktop (1180px) -- */
@media (min-width: 1180px) {
  .seo-text {
    width: 900px;
    margin: 0 auto;
  }

  .seo-text .align-right {
    width: auto;
    padding: 0 0 10px 10px;                     /* live: float right, gap on left side */
  }

  .seo-text .align-left {
    width: auto;
    padding: 0 20px 10px 0;                     /* live: float left, gap on right side */
  }
}

/* ============================================
   T-GEO: Geo Service Area (map + districts)
   Live: h4.center.map-hed + img.karta-80 + ul.map-ul
   Ours: div.geo-service-area > h4 + p > img + div > p + ul
   ============================================ */

/* -- Mobile (base) -- */
.geo-service-area {
  margin: 20px 0;
}

.geo-service-area__heading {
  font-size: 20px;                                 /* live .map-hed: 20px */
  font-weight: 900;                                /* live .map-hed: 900 */
  line-height: 24px;                               /* live .map-hed: 24px */
  color: var(--color-text-dark);
  text-align: center;                              /* live .center: center */
  margin: 30px 0 29px;                             /* live .map-hed: 30px 0 29px */
}

.seo-text p.geo-service-area__map-wrap {
  margin: 0;                                       /* override .seo-text p margin (higher specificity) */
}

.geo-service-area__map {
  width: 100%;
  height: auto;
}

.seo-text .geo-service-area__districts {
  margin: 25px 0 20px;                          /* live: .map-ul */
  padding: 0;
  text-align: center;                           /* center the toggle button */
  list-style: none;
}

.geo-service-area__districts > li {
  list-style: none;
}

.geo-service-area__district-title {
  color: #4980C0;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  display: inline-block;
  padding: 11px 19px;
  cursor: pointer;
  margin-bottom: 10px;
  border-radius: 4px;
  border: 2px solid #E3E9EE;
}

.geo-service-area__district-title.active {
  background: #E3E9EE;                          /* live: .map-ul li span.activ */
}

.seo-text .geo-service-area__district-list {
  display: none;                                 /* collapsed by default */
  padding: 0;
  margin: 15px 0;                                /* live: margin:15px 0 */
}

.geo-service-area__district-list.active {
  display: block;                                /* live: .map-ul li ul.activ */
}

.geo-service-area__district-list li {
  list-style-type: disc;
  list-style-position: inside;
  text-align: left;
  font-size: 13px;
  line-height: 18px;
  margin: 0 0 7px;                               /* live @375: margin-bottom:7px, gap=7px */
}

/* SEO text links (geo pages) */
.seo-text a {
  color: #4980C0;
  text-decoration: none;                         /* live: links colored, not underlined */
}

.seo-text a:hover {
  text-decoration: none;                         /* live: no underline on hover */
}

/* -- Tablet (768px) -- */
@media (min-width: 768px) {
  .geo-service-area {
    margin: 30px 0;
  }

  .geo-service-area__heading {
    font-size: 24px;                               /* live .map-hed @768: 24px */
    font-weight: 700;                              /* live .map-hed @768: 700 */
    line-height: 30px;                             /* live .map-hed @768: 30px */
    margin: 33px 0 43px;                           /* live .map-hed @768: 33px 0 43px */
  }

  .seo-text .geo-service-area__districts {
    margin: 40px 0 34px;
  }

  .geo-service-area__districts > li {
    display: inline-block;
    vertical-align: top;
  }

  .geo-service-area__districts > li.open {
    display: flow-root;                          /* BFC prevents inner UL margin collapse (like live inline-block) */
  }

  .geo-service-area__districts > li:first-child {
    margin-right: 27px;
  }

  .geo-service-area__district-title {
    font-size: 16px;
  }

  .seo-text .geo-service-area__district-list {
    padding-left: 0;
    columns: 2;
    column-gap: 20px;
  }

  .geo-service-area__district-list li {
    font-size: 18px;                             /* live @768+: 18px */
    line-height: 32.4px;                         /* live @768+: 32.4px */
    margin: 0;
  }
}

/* -- Desktop (1180px) -- */
@media (min-width: 1180px) {
  .geo-service-area__heading {
    margin: 0 0 25px;
  }

  .geo-service-area__district-title {
    font-size: 16px;                             /* live: .map-ul li span @1180 */
  }
}

/* Geo Office block (city pages: Lyubertsy etc.)
   Live: span.ofice > img.align-right + span.gorodt
   Visual: image + gray caption form one right-floated unit, text wraps around */
.geo-office {
  display: block;                                  /* block container for img + caption */
  margin: 0 0 10px;
}

.geo-office__map {
  width: 100%;                                     /* live @mobile: 100% */
  height: auto;
  display: block;
}

.geo-office__text {
  display: block;                                  /* live .gorodt: block */
  line-height: 22px;                               /* live .gorodt: 22px */
  background: #f0f0f0;                             /* live .gorodt: #f0f0f0 */
  font-size: 14px;                                 /* live .gorodt: 14px */
  font-weight: 400;                                /* live .gorodt: normal (not bold) */
  padding: 5px;                                    /* live .gorodt: 5px */
  text-align: center;                              /* live .gorodt: center */
  margin: 0 0 10px;                                /* live .gorodt: margin-bottom:10px */
}

@media (min-width: 768px) {
  .geo-office {
    float: right;                                  /* float the whole unit (img + caption) */
    width: auto;                                   /* natural width from image */
    max-width: 50%;                                /* don't exceed half the text block */
    margin: 0 0 10px 10px;                         /* live .align-right: padding-left:10px */
  }
}

/* ============================================
   Section 10: Auto Brands Carousel (IE-04)
   Live: section.label.silid.auto > h2 + div.slider > div.razmer > [div.shap > a > div.table > div > img] × 66
   Ours: section.auto-brands > h2 + div.slider > div.track > [div.item > a > div.logo-wrap > img] × 66
   R-15: content-box→border-box, inline-block→flex, table-cell→flex
   ============================================ */

/* --- Mobile (base, <768px) --- */
.auto-brands {
  padding: 0;
  background: #fff;
}

.auto-brands__title {
  font-family: var(--font-primary);
  font-size: 20px;
  font-weight: 900;
  line-height: 24px;
  color: #2A2E3E;
  text-align: center;
  padding-top: 25px;
  margin: 0 0 17px;
}

.auto-brands__slider {
  overflow: hidden;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.auto-brands__track {
  display: flex;
  padding-left: 15px;
  gap: 13px;
}

.auto-brands__item {
  flex: 0 0 auto;
  /* Live (content-box): content = 1.25% × 2000% parent = 25vw = 93.75px.
     + 2px border = 95.75px total. Our border-box: calc(25vw + 2px) */
  width: calc(25vw + 2px);
  margin: 15px 0;
  border: 1px solid #DFE3EF;
  border-radius: 3px;
  box-shadow: 0 6px 10px rgba(70, 86, 132, .08);
  overflow: hidden;
}

.auto-brands__link {
  display: block;
  text-decoration: none;
}

.auto-brands__logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Live: table-cell padding 12px 10px */
  padding: 12px 10px;
}

.auto-brands__logo {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Nav arrows hidden on mobile/tablet */
.auto-brands__nav {
  display: none;
}

/* Dots hidden on mobile/tablet (CSS scroll) */
.auto-brands__dots {
  display: none;
}

/* --- Tablet (768px) --- */
@media (min-width: 768px) {
  .auto-brands {
    padding: 0;
  }

  .auto-brands__title {
    font-size: 40px;
    line-height: 50px;
    padding-top: 50px;
    margin-bottom: 30px;
  }

  .auto-brands__slider {
    margin-bottom: 43px;
  }

  .auto-brands__item {
    /* Live computed: 209×147px at 768px (content-box 207px + 2px border).
       Our border-box: width: 209px gives same total */
    width: 209px;
  }

  .auto-brands__logo-wrap {
    /* R-15: live table+border-spacing gives 147px item height.
       Our flex: 12px pad = 136px. Increase to 17.5px = 147px */
    padding: 17.5px 10px;
  }
}

/* --- Desktop (1180px) — JS carousel takes over --- */
@media (min-width: 1180px) {
  .auto-brands {
    /* Full-width bg, inner elements constrained to 1180px */
    position: relative;
    padding: 0;
  }

  .auto-brands__title {
    color: #2A2E3E;
    font-size: 40px;
    line-height: 50px;
    padding-top: 50px;
    margin-bottom: 30px;
  }

  .auto-brands__slider {
    overflow: hidden;
    max-width: 1180px;
    margin: 0 auto;
  }

  .auto-brands__track {
    display: flex;
    gap: 10px;
    padding-left: 0;
    transition: transform 250ms ease;
    will-change: transform;
  }

  .auto-brands__item {
    /* 7 items + 6×10px gaps in 1180px: (1180 - 60) / 7 = 160px */
    flex: 0 0 160px;
    width: 160px;
    margin: 15px 0;
  }

  .auto-brands__logo-wrap {
    /* Reset tablet 17.5px back to 12px for desktop */
    padding: 12px 10px;
  }

  .auto-brands__item:hover {
    box-shadow: 0 6px 10px rgba(70, 86, 132, .2);
  }

  /* Nav arrows — 42×42px white circles, positioned outside carousel */
  .auto-brands__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 185px;
    width: 42px;
    height: 42px;
    border-radius: 50px;
    background: #fff;
    box-shadow: 0 8px 10px rgba(63, 71, 76, .1);
    border: none;
    cursor: pointer;
    z-index: 10;
    padding: 0;
  }

  .auto-brands__prev {
    left: calc(50% - 666px);
  }

  .auto-brands__next {
    right: calc(50% - 662px);
  }

  /* Dots — 8×8px visual, 44×44px touch target via ::after */
  .auto-brands__dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 12px 0 40px;
    max-width: 1180px;
    margin: 0 auto;
  }

  .auto-brands__dot {
    position: relative;
    width: 8px;
    height: 8px;
    border: none;
    border-radius: 20px;
    background: #DADDE8;
    padding: 0;
    cursor: pointer;
  }

  .auto-brands__dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
  }

  .auto-brands__dot.is-active {
    background: #4980C0;
  }
}

/* (lock-brands CSS moved to single block below, near line 4594+) */

/* Door brands override: fixed height + object-fit for non-uniform logos */
#door-brands .auto-brands__logo-wrap {
  height: 80px;
}

#door-brands .auto-brands__logo {
  max-height: 60px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

@media (min-width: 768px) {
  #door-brands .auto-brands__logo-wrap {
    height: 110px;
  }

  #door-brands .auto-brands__logo {
    max-height: 80px;
  }
}

@media (min-width: 1180px) {
  #door-brands .auto-brands__logo-wrap {
    height: 100px;
  }

  #door-brands .auto-brands__logo {
    max-height: 70px;
  }
}

/* ============================================
   S-11: Blog
   ============================================ */

.s-blog {
  padding: 0;
  background: #fff;
}

.s-blog__title {
  font-size: 20px;
  font-weight: 900;
  line-height: 24px;
  color: #2A2E3E;
  text-align: center;
  margin: 0 0 17px;
  font-family: var(--font-primary);
}

.s-blog__slider {
  overflow-x: auto;
  overflow-y: hidden;
}

.s-blog__track {
  display: flex;
  flex-wrap: nowrap;
  width: 263%;
}

.s-blog__card {
  flex-shrink: 0;
  width: 31%;
  position: relative;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 6px 10px rgba(70, 86, 132, .08);
  margin: 0 0 15px 10px;
}

.s-blog__card:first-child {
  margin-left: 15px;
}

.s-blog__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.s-blog__img-wrap {
  position: relative;
  overflow: hidden;
}

.s-blog__img {
  display: block;
  width: 100%;
  height: auto;
}

.s-blog__name {
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  color: #3F474C;
  text-align: left;
  padding: 18px 21px 13px;
  background: #fff;
  margin: 0;
  font-family: var(--font-primary);
}

.s-blog__date {
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  color: #556672;
  padding: 0 21px 24px;
  background: #fff;
  margin: 0;
  opacity: 0.5;
  font-family: var(--font-primary);
}

.s-blog__desc {
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  color: #7B8C96;
  padding: 0 21px 20px;
  background: #fff;
  margin: 0;
  font-family: var(--font-primary);
}

.s-blog__cta {
  text-align: center;
  margin: 0;
}

.s-blog__btn {
  display: inline-block;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  color: #4980C0;
  padding: 11px 23px;
  border: 2px solid #E3E9EE;
  border-radius: 5px;
  margin-bottom: 7px;
  text-decoration: none;
  font-family: var(--font-primary);
}

.s-blog__btn:hover {
  color: #4980C0;
}

.s-blog__arrow {
  display: inline;
  margin-left: 10px;
  position: relative;
  margin-bottom: -1px;
}

/* --- S-11: Blog — Tablet (768px) --- */
@media (min-width: 768px) {
  .s-blog__title {
    font-size: 40px;
    line-height: 50px;
    margin-bottom: 49px;
  }

  .s-blog__slider {
    margin-bottom: 43px;
  }

  .s-blog__track {
    width: 1081px;
    margin: 0 auto;
  }

  .s-blog__card {
    width: 334px;
    margin: 0 0 15px 16px;
  }

  .s-blog__card:first-child {
    margin: 0 0 15px 20px;
  }

  .s-blog__name {
    font-size: 18px;
    line-height: 24px;
  }

  .s-blog__date {
    font-size: 16px;
    line-height: 24px;
  }

  .s-blog__cta {
    padding-bottom: 80px;
  }
}

/* --- S-11: Blog — Desktop (1180px) --- */
@media (min-width: 1180px) {
  .s-blog__title {
    margin-bottom: 49px;                           /* live: 49px (same as tablet) */
  }

  .s-blog__slider {
    overflow: hidden;
  }

  .s-blog__track {
    width: 1180px;
  }

  .s-blog__card {
    width: 377px;
  }

  .s-blog__card:first-child {
    margin: 0 0 15px 0;
  }

  .s-blog__card:hover {
    box-shadow: 0 6px 10px rgba(70, 86, 132, .2);
  }
}

/* ============================================
   S-12: Reviews / Comments
   Live: section.label.white-label.lebel-text.blog-item.comment
   Ours: section.reviews
   ============================================ */

/* --- Base (375px) --- */
/* Source: live computed @375 + inline CSS */

/* Old reviews/comments styles removed — now using photo reviews carousel */

.reviews__form-wrap {
  width: 100%; /* live: 100% */
  position: relative; /* anchor for .otg absolute */
}

/* Old reviews__title removed — using carousel reviews styles */

.reviews__form {
  /* live: form#commentary — no padding at mobile */
}

.reviews__textarea {
  /* ⚠️ R-15: live content-box → our border-box. height = content(140) + pT(12) + pB(12) + bT(1) + bB(1) = 166px */
  width: 100%; /* live: 92% content-box ≈ 100% border-box (rect matches parent) */
  height: 166px; /* live: height:140px content-box = 166px border-box */
  outline: 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  border-left: 0; /* live: 0px solid on mobile */
  border-right: 0;
  border-radius: 0;
  padding: 12px 4%; /* live: 12px 4% */
  font-size: 14px; /* live computed: 14px */
  line-height: 28px; /* live computed: 28px */
  font-family: var(--font-primary);
  color: var(--color-black); /* live computed: rgb(0,0,0) */
  resize: vertical;
}

.reviews__submit {
  position: absolute;
  appearance: none;
  right: 10px; /* live: 10px */
  bottom: 17px; /* live: 17px */
  background: var(--color-primary); /* live: #4980C0 */
  border: 0;
  padding: 10px 22px; /* live: 10px 22px */
  color: var(--color-white);
  font-size: 16px; /* live: 16px */
  font-weight: 600; /* live: 600 */
  font-family: Arial, sans-serif; /* live: UA default Arial for input */
  border-radius: var(--radius-sm); /* live: 4px */
  cursor: pointer;
}

.reviews__popup {
  /* ⚠️ R-15: live content-box w:228+padding:30+border:2=260px. h:145+30+2=177px */
  display: none;
  position: absolute;
  width: 260px; /* live: 228px content-box → 260px border-box */
  height: 177px; /* live: 145px content-box → 177px border-box */
  padding: 15px;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  border-radius: var(--radius-sm);
  bottom: 69px; /* live: 69px */
  right: 10px; /* live: 10px */
  box-shadow: 0 2px 10px rgba(70, 86, 132, 0.15);
}

.reviews__popup.is-visible {
  display: block;
}

.reviews__popup-label {
  display: block;
  font-family: var(--font-primary);
  font-size: 16px; /* live: 16px */
  font-weight: 900; /* live: 900 */
  color: var(--color-text-dark); /* live: #2A2E3E */
  margin-bottom: 11px; /* live: 11px */
}

.reviews__popup-input {
  width: 100%; /* ⚠️ R-15: live 85% content-box ≈ 100% border-box for simplicity */
  outline: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 6px 15px; /* live: 6px 15px */
  font-size: 14px; /* live: 14px */
  line-height: 28px; /* live: 28px */
  font-family: var(--font-primary);
  margin-bottom: 12px;
}

.reviews__popup-arrow {
  display: inline-block;
  width: 13px;
  height: 13px;
  transform: rotate(45deg);
  background: var(--color-white);
  position: absolute;
  bottom: -8px;
  left: 116px; /* live: 116px */
  border-bottom: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
}

.reviews__list {
  padding: 30px 15px 40px; /* live: 30px 15px 40px 15px */
}

.reviews__avatar-wrap {
  display: inline-block; /* live: inline-block */
}

.reviews__avatar {
  width: 40px; /* live: 40px */
  height: 40px; /* live: 40px */
}

.reviews__name {
  display: inline-block; /* live CSS: inline-block */
  vertical-align: top; /* live CSS: vertical-align:top */
  position: absolute; /* live: absolute (no explicit top/left — stays at natural position) */
  font-family: var(--font-primary);
  font-size: 14px; /* live: 14px */
  font-weight: 900; /* live: 900 */
  padding-left: 10px; /* live: 10px */
  padding-top: 2px; /* live: 2px */
}

.reviews__time {
  color: var(--color-text-secondary); /* live: #556672 */
  font-family: var(--font-primary);
  font-weight: 500; /* live: 500 */
  padding-left: 10px; /* live: 10px */
  position: relative;
  top: -5px; /* live: -5px */
}

.reviews__text {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 13px; /* live: 13px */
  color: var(--color-text-body); /* live: #3F474C */
}

/* --- Tablet (768px) --- */
/* Source: live computed @768 */

@media (min-width: 768px) {
  /* Old reviews tablet styles removed */

  .reviews__form {
    padding: 0 15px; /* live: form#commentary padding: 0 15px */
  }

  .reviews__textarea {
    /* ⚠️ R-15: live content-box h:180+pT:20+pB:20+bT:1+bB:1=222px */
    width: 100%; /* live: 93% content-box ≈ 100% border-box (diff ≤2px) */
    height: 222px; /* live: 180px content-box → 222px border-box */
    padding: 20px 25px; /* live: 20px 25px */
    font-size: 18px; /* live: 18px */
    border: 1px solid var(--color-border); /* live: all sides at tablet */
    border-radius: var(--radius-sm); /* live: 4px */
  }

  .reviews__submit {
    right: 34px; /* live: 34px */
    bottom: 26px; /* live: 26px */
    padding: 15px 31px; /* live: 15px 31px */
    font-size: 18px; /* live: 18px */
  }

  .reviews__popup {
    /* ⚠️ R-15: live content-box w:300+30+2=332px. h:186+30+2=218px */
    width: 332px;
    height: 218px;
    bottom: 93px; /* live: 93px */
    right: 23px; /* live: 23px */
  }

  .reviews__popup-label {
    font-size: 20px; /* live: 20px */
  }

  .reviews__popup-input {
    padding: 12px 20px; /* live: 12px 20px */
    font-size: 18px; /* live: 18px */
  }

  .reviews__popup-arrow {
    left: 170px; /* live: 170px */
  }

  .reviews__avatar {
    width: 50px; /* live: 50px */
    height: 50px; /* live: 50px */
  }

  .reviews__name {
    font-size: 18px; /* live: 18px */
    padding-top: 0; /* live: 0px */
  }

  .reviews__time {
    font-size: 16px; /* live: 16px */
  }

  .reviews__text {
    font-size: 18px; /* live: 18px */
  }
}

/* --- Desktop (1180px) --- */
/* Source: live computed @1200 */

@media (min-width: 1180px) {
  .reviews__form-wrap {
    width: 900px; /* live: 900px */
    margin: 0 auto; /* live computed: margin auto centering */
  }

  /* Old reviews__title desktop removed */

  .reviews__form {
    padding: 0; /* live: 0px 0px */
  }

  .reviews__submit {
    right: 22px; /* live: 22px */
  }

  .reviews__list {
    /* ⚠️ R-15: live content-box w:900+pLR:30=930px → border-box w:930px */
    width: 930px;
    margin: 0 auto; /* live: margin:auto */
  }
}

/* ============================================
   Section 13: Geo Blocks (SC-05)
   ============================================ */

.geo-blocks {
  display: none;
  background: var(--color-footer-bg);
  color: var(--color-white);
}

.geo-blocks__trigger {
  font-size: 13px;
  font-weight: 400;
  line-height: normal;
  color: var(--color-text-muted);
  margin: 0 0 25px;
  padding: 0 20px;
}

.geo-blocks__link {
  color: var(--color-white);
  cursor: pointer;
  text-decoration: none;
}

.geo-blocks__link--active {
  color: var(--color-primary);
}

.geo-blocks__panel[hidden] {
  display: none;
}

.geo-blocks__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0;
  margin: 16px 0;
  list-style: none;
}

.geo-blocks__tab {
  flex: 0 0 48%;
  background: var(--color-footer-dark);
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  line-height: 39px;
  color: var(--color-white);
  cursor: pointer;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
}

.geo-blocks__tab--active {
  border-color: var(--color-white);
}

.geo-blocks__tab:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.geo-blocks__content[hidden] {
  display: none;
}

.geo-blocks__list {
  padding: 0 20px;
  margin: 16px 0;
  column-count: 1;
}

.geo-blocks__list li {
  font-size: 13px;
  line-height: 23px;
  list-style-type: disc;
}

.geo-blocks__list a {
  color: var(--color-white);
  text-decoration: none;
}

/* Tablet */
@media (min-width: 768px) {
  #geo-msk {
    margin: 0 20px;
  }

  #geo-obl {
    padding: 0 20px;
  }

  .geo-blocks__list {
    column-count: 2;
  }
}

/* Desktop */
@media (min-width: 1180px) {
  #geo-msk {
    margin: 42px 0 0;
  }

  #geo-obl {
    margin-top: 42px;
    padding: 0;
  }

  .geo-blocks__tab {
    flex-basis: 49.66%;
  }

  .geo-blocks__list {
    column-count: 4;
  }
}

/* ============================================
   Section 14: CTA Modal (SC-03)
   CTA Modal
   ============================================ */

/* Overlay — hidden by default */
.cta-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100000;                               /* live: 100000 */
  background: rgba(38, 41, 43, 0.8);             /* live: rgba(38,41,43,.8) */
  opacity: 0;
  transition: opacity 0.5s;                       /* live: transition: all .5s */
  /* ⚠️ R-15: live display:table + table-cell → our display:flex */
  align-items: center;
  justify-content: center;
  overflow-y: auto;
}

/* Active state — show overlay */
.cta-modal.is-active {
  display: flex;
}

/* Fade-in (added next frame via JS for transition) */
.cta-modal.is-visible {
  opacity: 1;
}

/* Modal window — mobile base */
.cta-modal__window {
  background: #fff;
  text-align: center;
  position: relative;
  transform: translateY(-100vh);
  transition: transform 0.5s;
  width: 100%;
  max-height: 100vh;
  overflow-y: auto;
  padding: 30px 30px 0;
}

/* Slide-in animation */
.cta-modal.is-visible .cta-modal__window {
  transform: translateY(0);
}

/* Close button — mobile */
.cta-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;                                    /* C-06: ≥44×44px touch target */
  height: 44px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.cta-modal__close img {
  width: 18px;
  height: 18px;
  filter: invert(1);
}

/* Title H2 — mobile base */
.cta-modal__title {
  font-size: 28px;
  font-weight: 900;
  color: #2A2E3E;
  margin-bottom: 4px;
  line-height: 1.2;
}

/* Subtitle H3 — hidden for cleaner form (placeholder already says "Ваш телефон") */
.cta-modal__subtitle {
  display: none;
}

/* Note H4 */
.cta-modal__note {
  font-size: 20px;
  font-weight: 700;                               /* live: 700 */
  line-height: 30px;                              /* live: 30px */
  color: var(--color-primary);                    /* live: #4980C0 */
  margin: 2px 0 0;
}

/* Form group */
.cta-modal__form {
  text-align: left;
  width: 100%;
  margin: 16px 0 0;
  position: relative;                             /* live: relative */
}

/* Phone input — mobile */
/* ⚠️ R-15: content-box→border-box: live w:280+pad:40+border:2=322, h:28+pad:30+border:2=60 */
.cta-modal__input {
  width: 100%;
  height: 54px;
  outline: 0;                                     /* live: 0 */
  color: #2A2E3E;                                 /* live: #2A2E3E */
  font-size: 18px;
  line-height: 24px;
  border-radius: var(--radius-sm);                /* live: 4px */
  border: 1px solid #DFE3EF;                      /* live: 1px solid #DFE3EF */
  padding: 14px 18px;
  display: block;                                 /* live: block */
  margin-bottom: 8px;
  font-family: inherit;
}

/* Checkbox */
.cta-modal__checkbox {
  display: inline-block;                          /* live: inline-block */
  margin: 0 4px 0 0;
  vertical-align: middle;
}

/* Consent text */
.cta-modal__consent-text {
  display: inline-block;
  color: #9CA3AF;
  font-size: 12px;
  line-height: 17px;
  vertical-align: middle;
}

.cta-modal__consent-text a {
  color: inherit;
  text-decoration: underline;
}

/* Submit button */
.cta-modal__submit {
  width: 100%;                                    /* live: 100% */
  color: #fff;                                    /* live: #FFF */
  background: var(--color-primary);               /* live: #4980C0 */
  border-radius: var(--radius-sm);                /* live: 4px */
  outline: 0;
  border: 0;
  font-weight: 700;                               /* live: 700 */
  padding: 16px;
  font-size: 18px;
  margin-top: 8px;
  cursor: pointer;
  font-family: inherit;
}

/* Wait text H5 — hidden by default */
.cta-modal__wait {
  display: none;                                  /* live: none */
  color: #3F474C;                                 /* live: #3F474C */
  font-size: 23px;                                /* live: 23px */
  margin: 0;                                      /* live: 0 */
  padding: 55px 0 15px;                           /* live: 55px 0 15px */
}

/* Timer — hidden by default */
.cta-modal__timer {
  display: none;                                  /* live: none */
  color: var(--color-primary);                    /* live: #4980C0 */
  font-size: 50px;                                /* live: 50px */
  font-weight: 700;                               /* live: 700 */
}

/* Sending state — hidden by default */
.cta-modal__sending {
  display: none;                                  /* live: none */
  width: 90%;
  max-width: 323px;
  margin: 0 auto;
}

/* Footer — phone info */
/* ⚠️ R-15: live display:table + table-cell → our display:flex */
.cta-modal__footer {
  width: 100%;
  margin: 24px 0 28px;
  padding: 20px 0 0;
  border-top: 1px solid #EAEDF3;
  text-align: center;
}

/* Phone icon in footer */
.cta-modal__phone-icon {
  width: 18px;
  height: 18px;
  color: #3F474C;                                 /* live: #3F474C */
  flex-shrink: 0;
  margin-right: 12px;
  fill: currentColor;
}

/* Phone text */
.cta-modal__phone-text {
  color: #3F474C;
  text-align: center;
  font-weight: 500;                               /* live: 500 */
  font-size: 14px;
  line-height: 1.4;
}

.cta-modal__phone-text span {
  font-size: 20px;
  font-weight: 700;                               /* live: 700 */
}

.cta-modal__phone-text a {
  color: inherit;
  text-decoration: none;
}

/* ---- Tablet ≥768px: match live site exactly ---- */
@media (min-width: 768px) {
  .cta-modal__window {
    width: var(--modal-width);                    /* live: 558px */
    height: auto;
    min-height: auto;
    border-radius: var(--radius-lg);              /* live: 8px */
    margin: auto;
    padding: 10px 0 0;
  }

  .cta-modal__close {
    width: 44px;
    height: 44px;
    top: 12px;
    right: 12px;
  }

  .cta-modal__close img {
    filter: invert(1);                            /* dark cross inside white modal */
  }

  .cta-modal__title {
    font-size: 48px;                              /* live: 48px */
    line-height: 58px;                            /* live: 58px */
    padding-top: 50px;                            /* live: 50px */
    margin-bottom: 25px;                          /* live: 25px */
  }

  .cta-modal__subtitle {
    font-size: 30px;                              /* live: 30px */
    margin-top: 25px;                             /* live: 25px (collapses with h2 mb:25) */
    margin-bottom: 12px;                          /* live: 12px */
  }

  .cta-modal__note {
    font-size: 24px;                              /* live: 24px */
    margin-top: 12px;                             /* live: 12px (collapses with h3 mb:12) */
    margin-bottom: 1.33em;                        /* live: browser default h4 margin-bottom (~32px) */
  }

  .cta-modal__form {
    width: 323px;                                 /* live: 323px */
    margin: 0 auto;
  }

  /* ⚠️ R-15: content-box→border-box recalc */
  .cta-modal__input {
    width: 322px;                                 /* live: 280+20+20+1+1=322px total */
    height: 60px;                                 /* live: 28+15+15+1+1=60px total */
    font-size: 24px;                              /* live: 24px */
  }

  .cta-modal__consent-text {
    width: 90%;                                   /* live: 90% */
  }

  .cta-modal__footer {
    margin: 16px auto 24px;
  }

  .cta-modal__phone-icon {
    width: 52px;                                  /* live: .fot .mp width:52px */
    height: 52px;                                 /* live: table-cell 124px, SVG preserveAspectRatio → 52×52 */
    margin-right: 15px;
  }

  .cta-modal__phone-text {
    font-size: 16px;                              /* live: inherits browser default 16px */
    font-weight: 500;                             /* live: 500 */
    line-height: normal;                          /* live: inherits browser default normal (~1.2) */
  }

  .cta-modal__phone-text span {
    font-size: 24px;                              /* live: 24px */
    font-weight: 700;                             /* live: 700 */
    display: block;                               /* keeps phone number on separate line */
    margin-top: 8px;                              /* live: margin: 8px 0 0 */
    line-height: normal;                          /* live: normal */
  }
}

/* ============================================
   Section 15: Footer (SC-06)
   ============================================ */

/* --- Base (Mobile 375) --- */
.footer {
  background: var(--color-footer-bg);         /* #3F474C */
  color: var(--color-white);
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: normal;                        /* override inherited 18px from body */
  padding: 35px 15px 80px;                    /* live: 35px 15px 80px */
  position: relative;                          /* R-15: live=absolute, ours=relative (normal flow) */
  z-index: var(--z-loget);                    /* 100, same as live */
}

.footer__inner {
  display: flex;
  flex-direction: column;
}

/* Mobile visual order: row-info → row-actions → nav → row-bottom */
.footer__row-info    { order: -2; }
.footer__row-actions { order: -1; }
.footer__nav         { order: 0; }
.footer__row-bottom  { order: 1; }
.footer__inner > .geo-blocks__panel { order: 2; }   /* geo panels after bottom row */

/* --- Logo: hidden on mobile --- */
.footer__logo {
  display: none;
}

/* --- Phone --- */
.footer__phone {
  text-align: center;
  margin-bottom: 15px;                        /* live: mb 15px */
}

.footer__phone a {
  color: var(--color-white);
  text-decoration: none;
  font-size: 20px;                            /* live: 20px */
  font-weight: 700;                           /* live: 700 */
}

/* --- Email --- */
.footer__email {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 400;
  color: var(--color-white);
  margin-bottom: 15px;
}

.footer__email-icon {
  width: 16px;
  height: 12px;
  fill: var(--color-white);
  flex-shrink: 0;
  max-width: 16px;
  max-height: 12px;
}

/* --- Address --- */
.footer__address {
  font-size: 14px;                            /* live: 14px */
  font-weight: 400;                           /* live: 400 */
  line-height: normal;                        /* live: normal */
  text-align: center;
  margin-bottom: 35px;                        /* live: 35px */
}

/* --- Contact blocks (email/review) --- */
.footer__contact-block {
  display: flex;
  align-items: center;
  padding: 10px 0;
}

.footer__contact-icon {
  width: 22px;                                /* live: 22px */
  height: 16px;                               /* live: 16px */
  margin-right: 11px;                         /* live: 11px */
  flex-shrink: 0;
  fill: var(--color-white);
}

.footer__contact-text {
  font-size: 14px;                            /* live: 14px */
  font-weight: 400;
  color: var(--color-white);
}

/* --- Footer CTA: hidden on mobile (floating-cta handles it) --- */
.footer__cta {
  display: none;
}

/* --- Nav menu --- */
.footer__nav {
  margin-top: 26px;                           /* live: menuimg mt 29px, but collapses with blocpach mb 3px → max=29; flex: 26+3=29 */
}

.footer__menu {
  list-style: none;
  padding: 0;
  margin: 0;                                   /* live: menuimg mb 16px, but collapses with oplate mt 29px → max=29; flex doesn't collapse → remove */
}

.footer__menu > li {
  font-size: 14px;                            /* live: 14px */
  font-weight: 400;                           /* live: 400 */
  line-height: 32px;                          /* live: 32px */
}

.footer__menu a,
.footer__menu span {
  color: var(--color-white);
  text-decoration: none;
  cursor: pointer;
}

/* --- Submenu: visible on mobile, dropdown on tablet/desktop --- */
.footer__submenu {
  display: block;
  list-style: none;
  padding: 5px 0 5px 20px;
  margin: 0;
}

.footer__submenu li {
  font-size: 13px;
  font-weight: 400;
  line-height: 28px;
  list-style: disc;
  color: rgba(255,255,255,0.5);
}

.footer__submenu li a {
  color: var(--color-white);
}

.footer__arrow {
  display: none;
}

.footer__submenu a {
  color: var(--color-white);
  text-decoration: none;
}

.footer__menu-drop {
  position: relative;
}

/* Mobile open state */
.footer__menu-drop.is-open .footer__submenu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 200px;
  background: var(--color-footer-dark);
  border-radius: 8px;
  padding: 10px 0;
  margin-top: 5px;
  z-index: 10;
  list-style: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

.footer__menu-drop.is-open .footer__submenu li {
  list-style: none;
  display: block;
  padding: 6px 20px;
  font-size: 14px;
  line-height: 20px;
}

/* --- Arrow icon --- */
.footer__arrow {
  width: 10px;                                /* live: 10px */
  height: 6px;                                /* live: 6px */
  margin-left: 4px;                           /* live: 4px */
  position: relative;
  top: -1.2px;                                /* live: -1.2px */
  fill: var(--color-white);
  transition: transform 0.3s;
}

.footer__menu-drop.is-open .footer__arrow {
  transform: rotate(180deg);
}

/* --- Payment list --- */
.footer__row-bottom {
  display: flex;
  flex-direction: column;
}

/* Payment before legal on mobile */
.footer__payment { order: -1; }
.footer__legal   { order: 0; }

.footer__payment-list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
  margin-top: 29px;                           /* live: 29px */
  margin-bottom: 18px;                        /* live CSS: 31px, but collapses with legal p margin-top 13px; flex doesn't collapse → 18+13=31 */
}

.footer__payment-list li {
  display: inline-block;
  width: 48px;                                /* live: 48px */
  height: 48px;                               /* live: 48px */
  background: var(--color-footer-dark);       /* #485055 */
  border-radius: var(--radius-sm);            /* 4px */
  text-align: center;
  margin-left: 2.9%;                          /* live: 2.9% */
}

.footer__payment-list li:first-child {
  margin-left: 0;                             /* live: 0 */
}

.footer__payment-list li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}

.footer__payment-list li img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 4px;
}

/* --- Legal text --- */
.footer__legal p {
  font-size: 13px;                            /* live: 13px */
  font-weight: 400;
  color: var(--color-text-muted);             /* #8B8F92 */
  margin-top: 13px;                           /* live: 13px */
  margin-bottom: 13px;                        /* live: 13px (browser default 1em@13px); collapses between siblings → no visual change */
  line-height: normal;
}

.footer__legal p + p {
  margin-top: 13px;
}

/* Mobile: disclaimer acts as separate paragraph */
.footer__disclaimer {
  display: block;
  margin-top: 13px;
}

.footer__legal a {
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255,255,255,0.4);
}

.footer__geo-link {
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255,255,255,0.4);
  border-bottom: none;
}

.footer__legal a.footer__geo-link--active {
  color: var(--color-primary);
}

.footer__geo-panel {
  margin-top: 10px;
}

.footer__geo-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}

.footer__geo-list li a,
.footer__geo-list li span {
  font-size: 12px;
  color: #aaa;
  text-decoration: none;
}


/* ============================================
   Section 15: Footer — Tablet ≥768px
   ============================================ */
@media (min-width: 768px) {
  .footer {
    padding: 47px 0 80px;                     /* live: 47px 0 80px */
  }

  .footer__inner {
    padding: 0;                                /* live: #zone has no padding; children have own padding */
    overflow: hidden;
  }

  /* Reset mobile order — all back to DOM order */
  .footer__row-info,
  .footer__row-actions,
  .footer__nav,
  .footer__row-bottom { order: 0; }

  /* --- Nav row: flex, centered, full-bleed --- */
  .footer__nav {
    margin-top: 0;
    overflow: hidden;
    margin-bottom: 0;
    padding: 0 20px;                           /* live: .meyt padding 0 20px */
  }

  .footer__menu {
    display: table;                            /* live: .menuimg.tablet display:table — stretches items across full width */
    width: calc(100% + 6vw);                  /* live: 100.6vw, extend beyond container */
    position: relative;
    left: -3vw;                                /* live: left -3vw */
    margin-bottom: 60px;                       /* live: 60px */
  }

  .footer__menu > li {
    display: table-cell;                       /* live: table-cell — auto-distributes width */
    font-size: 16px;                           /* live: 16px */
    line-height: 28px;                         /* live: 28px */
    text-align: center;
    white-space: nowrap;
    padding: 0;
  }

  /* --- Logo: visible (text) --- */
  .footer__logo {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: var(--color-white);
    white-space: nowrap;
  }

  /* --- Row info: flex row (logo + phone + address) --- */
  .footer__row-info {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0 20px;                           /* live: .rower padding 0 20px */
    margin-bottom: 46px;                       /* live: .rower mb 46px */
    min-height: 55px;                          /* live: .rower height 55px (table-cell stretching) */
  }

  .footer__phone {
    text-align: left;
    margin-bottom: 15px;                       /* live: .phone mb 15px */
  }

  .footer__phone a {
    font-size: 24px;                           /* live: 24px */
    font-weight: 700;                          /* live: 700 */
    position: relative;
    top: -6px;                                 /* live: top -6px */
  }

  .footer__address {
    text-align: right;
    margin-bottom: 0;
    width: 230px;                              /* live: 230px */
    flex-shrink: 0;
    font-size: 14px;                           /* live: 14px */
    line-height: 20px;                         /* live: 20px */
  }

  .footer__address span {
    display: inline-block;
    text-align: left;
  }

  /* --- Row actions: CTA only --- */
  .footer__row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 20px;
    margin-bottom: 40px;
  }

  .footer__contact-block {
    flex: 0 0 auto;
    margin-bottom: 0;
  }

  .footer__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--color-cta-green);        /* #4FB300 */
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-sm);           /* 4px */
    font-size: 18px;                           /* live: 18px */
    font-weight: 700;                          /* live: 700 */
    height: 58px;                              /* live: 58px (same as review block — table-cell equal height) */
    width: 214px;                              /* live: 214px */
    cursor: pointer;
    font-family: inherit;
  }

  /* --- Row bottom: legal + payment side by side --- */
  .footer__row-bottom {
    flex-direction: row;
    align-items: flex-start;
  }

  .footer__payment { order: 0; }
  .footer__legal   { order: 0; }
  .footer__inner > .geo-blocks__panel { order: 0; grid-column: 1 / -1; }

  .footer__legal {
    width: calc(50% + 20px);
    padding-left: 20px;
  }

  .footer__legal p,
  .footer__legal p + p {
    margin-top: 0;                             /* live: .textfot p { margin-top:0 } */
    margin-bottom: 25px;                       /* live: 25px */
  }

  .footer__disclaimer {
    display: block;
    margin-top: 16px;
  }

  .footer__payment {
    width: 44.8vw;                             /* live: 44.8vw */
    text-align: right;
  }

  .footer__payment-list {
    text-align: right;
    margin-top: 0;                             /* live CSS: 29px on .oplate, but display:inline → no visual effect */
    margin-bottom: 0;                          /* live CSS: 31px on .oplate, but display:inline → no visual effect */
  }

  .footer__payment-list li {
    margin-left: 10px;                         /* live: ~10px */
  }

  .footer__payment-list li:first-child {
    margin-left: 0;
  }

  /* Tablet+: hide submenu, show arrow, dropdown on click */
  .footer__submenu {
    display: none;
    padding: 0;
  }

  .footer__arrow {
    display: inline;
  }

  .footer__menu-drop.is-open .footer__submenu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    background: var(--color-footer-dark);
    border-radius: 8px;
    padding: 10px 0;
    margin-top: 8px;
    z-index: 10;
    list-style: none;
    column-count: 1;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  }

  .footer__menu-drop.is-open .footer__submenu li {
    display: block;
    font-size: 14px;
    line-height: 20px;
    text-align: left;
    list-style: none;
    padding: 6px 20px;
    margin-left: 0;
  }
}


/* ============================================
   Section 15: Footer — Desktop ≥1180px
   ============================================ */
@media (min-width: 1180px) {
  .footer__inner {
    width: 1180px;                             /* live: 1180px */
    margin: 0 auto;
    padding: 0;
    overflow: visible;                         /* live: overflow initial */
    position: relative;
    /* Grid: nav full-width, info+actions share row, bottom full-width */
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto;
  }

  /* --- Nav row with logo --- */
  .footer__nav {
    grid-column: 1 / -1;
    grid-row: 1;
    margin-bottom: 0;
    padding: 0;                                /* reset tablet 0 20px — live: no padding at desktop */
  }

  .footer__logo {
    position: absolute;
    top: 0;
    left: 0;
    margin-right: 84px;
    font-size: 22px;
  }

  .footer__menu {
    display: flex;
    justify-content: space-between;
    width: 700px;
    margin-left: auto;
    margin-right: 0;
    position: relative;
    left: 0;
    margin-bottom: 60px;
  }

  .footer__menu > li {
    display: block;
    padding: 0;
    text-align: center;
    position: relative;
  }

  /* --- Row 2: info (left) + actions (right) on SAME line --- */
  .footer__row-info {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 0;
    padding: 0;                                  /* reset tablet 0 20px — live: .rower padding 0 at desktop */
  }

  .footer__phone {
    margin-bottom: 0;
  }

  .footer__phone a {
    font-size: 30px;                           /* live: 30px */
    font-weight: 900;                          /* live: 900 */
    /* top:-6px persists from tablet — live keeps it at desktop too */
  }

  .footer__address {
    width: auto;
    text-align: left;
    line-height: 20px;                         /* live: 20px */
    margin-bottom: 35px;                       /* live: 35px */
  }

  .footer__address br {
    display: none;                             /* single line at desktop (live: 20px height = 1 line) */
  }

  .footer__address span {
    white-space: nowrap;                       /* prevent wrapping — single line at desktop */
  }

  .footer__row-actions {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    align-self: start;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
  }

  .footer__cta {
    width: 198px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* --- Row 3: bottom full-width --- */
  .footer__row-bottom {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 11px;                          /* live: 46px gap (address mb:35px + 11px = 46px) */
  }

  .footer__inner > .geo-blocks__panel { grid-column: 1 / -1; }

  .footer__legal {
    width: 50%;                                /* live: 50% */
    padding-left: 0;                           /* live: 0 at desktop */
    min-height: 63px;                          /* was height:63px — changed to min-height so geo panels can expand */
  }

  .footer__legal p {
    margin-top: 0;
    margin-bottom: 25px;                       /* live: 25px; last p slightly clipped by height:63px — matches live */
  }

  .footer__legal p:last-child {
    margin-bottom: 0;
  }

  .footer__payment {
    width: 50%;
    text-align: right;
  }

  .footer__payment-list li {
    margin-left: 17px;
  }

  .footer__payment-list li:first-child {
    margin-left: 0;
  }

  /* --- Diamond arrow indicator above submenu (desktop) --- */
  /* live: li#nash.drop.activ:before { 20×20 rotated square } */
  .footer__menu-drop.is-open .footer__submenu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 210px;
    background: var(--color-footer-dark);
    border-radius: 8px;
    padding: 10px 0;
    margin-top: 8px;
    z-index: 10;
    list-style: none;
    column-count: 1;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  }

  .footer__menu-drop.is-open .footer__submenu li {
    font-size: 15px;
    line-height: 22px;
    text-align: left;
    list-style: none;
    display: block;
    padding: 6px 20px;
    margin-left: 0;
  }

  .footer__menu-drop.is-open .footer__submenu li:hover {
    background: rgba(255,255,255,0.08);
  }
}

/* =========================================================
   T-SERVICE: Hero (vskrytie-dverej)
   Mobile-first: base → @768 → @1180
   ========================================================= */

/* --- Base mobile (375px) --- */
.service-hero {
  margin: 0;                                   /* live computed: 0px (25px collapses) */
}

.service-hero__title {
  font-size: 20px;                             /* live: 20px */
  font-weight: 900;                            /* live: 900 */
  line-height: 24px;                           /* live: 24px */
  text-align: center;                          /* live: center */
  color: #2A2E3E;                              /* live: rgb(42,46,62) */
  margin: 14px 0 13.4px;                       /* live: 14px 0 13.4px */
  padding: 0 15px;                             /* live: 0 15px */
}

.service-hero__image-wrap {
  padding: 0 15px;                             /* live .service: padding:0 15px */
}

.service-hero__image-inner {
  position: relative;                          /* live .ser: relative */
  border-radius: 5px;                          /* live: 5px */
  overflow: hidden;                            /* live: hidden */
  margin-bottom: 14px;                         /* live: 14px */
  /* Aspect ratio container — live: 198.75px tall at 345px wide = 57.6% */
  padding-top: 57.6%;                          /* maintain aspect ratio */
}

.service-hero__img {
  position: absolute;                          /* live: absolute */
  top: 0;                                      /* live: 0 */
  left: 0;                                     /* live: 0 */
  width: 102%;                                 /* slight zoom to crop watermark */
  height: auto;
  display: block;
}

.service-hero__price {
  position: absolute;                          /* live: absolute */
  bottom: -1px;                                 /* live: -1px */
  left: 0;                                     /* live: 0 */
  padding: 5px 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: normal;
  color: #fff;
  background: var(--color-danger);
  border-radius: 0 10px 0 4px;
}

.service-hero__advantages {
  padding: 0 15px 25px;                        /* live .label.sryi: 0 15px 25px */
}

.service-hero__adv-item {
  height: 54px;                                /* live: 54px */
  background: #fff;                            /* live: rgb(255,255,255) */
  border-radius: 5px;                          /* live: 5px */
  margin-bottom: 3px;                          /* live: 3px */
  box-shadow: 0 2px 10px rgba(70, 86, 132, .15); /* live: same */
  overflow: hidden;                            /* live: hidden */
}

.service-hero__adv-row {
  display: flex;                               /* R-15: table→flex */
  align-items: center;                         /* R-15: vertical-align:middle→align-items:center */
  width: 100%;                                 /* live .led: 100% */
  height: inherit;                             /* live .led: height:inherit → 54px */
  /* R-15: no padding-right — text width:70vw controls layout, remaining space = arrow spacer */
}

.service-hero__adv-icon {
  width: 45px;                                 /* live: 45px (content-box, no horiz padding) */
  flex-shrink: 0;                              /* prevent shrink */
  text-align: center;                          /* live: center */
  /* R-15: live has padding-top:2px in table-cell+vertical-align:middle which raises content.
     In flex+align-items:center, padding-top shifts SVG DOWN. Omit to match live position. */
}

.service-hero__adv-icon svg {
  width: 23px;                                 /* live: 23px (icon15 overridden to 19px via inline style) */
  height: 30px;                                /* live: 30px */
  display: inline-block;
  vertical-align: middle;
  fill: #000;                                  /* live: inherits #000 (body has no color). Our body=#3F474C makes icons thinner */
  margin-top: -2px;                            /* R-15: flex center vs live table-cell v-align — slight raise to match live */
}

.service-hero__adv-text {
  font-size: 14px;                             /* live: 14px */
  font-weight: 500;                            /* live: 500 */
  line-height: normal;                         /* live: normal */
  color: #3F474C;                              /* live: rgb(63,71,76) */
  padding-right: 10px;                         /* live: padding-right:10px */
  width: 66vw;                                 /* R-15: live 70vw in table with 3 cells; spacer reduces effective width */
  box-sizing: content-box;                     /* live uses content-box */
}

/* Mobile-only item visible by default */
.service-hero__adv-item--mobile {
  display: block;                              /* live .mobq: block */
}

/* --- @768px Tablet --- */
@media (min-width: 768px) {
  .service-hero__title {
    font-size: 38px;                           /* live: 38px */
    line-height: 58px;                         /* live: 58px */
    margin: 48px 0 12px;                       /* live: 43px, +5px visual compensation */
    padding: 0 15px;                           /* live: 0 15px */
  }

  .service-hero__image-inner {
    margin-bottom: 30px;                       /* live .ser: margin-bottom:30px */
    padding-top: 0;                            /* override mobile padding-top */
    height: 369px;                             /* live: 369px explicit (viewport-dependent) */
  }

  .service-hero__img {
    /* live: width:721px (100%), height:537px */
    width: 100%;
    height: auto;
  }

  .service-hero__price {
    padding: 10px 18px;
    font-size: 15px;
    border-radius: 0 12px 0 4px;
  }

  .service-hero__advantages {
    padding: 0 20px 46px;                      /* live: 0 20px 46px */
  }

  .service-hero__adv-item {
    height: 74px;                              /* live: 74px */
    margin-bottom: 10px;                       /* live: 10px */
  }

  .service-hero__adv-row {
    padding-right: 55px;                       /* R-15: live spacer 55px @768 */
  }

  .service-hero__adv-icon {
    width: 55px;                               /* live: 55px (content-box, no horiz padding) */
    /* R-15: padding-top removed — see base rule comment */
  }

  .service-hero__adv-icon svg {
    width: 23px;                               /* live: 23px */
    height: 30px;                              /* live: 30px */
  }

  .service-hero__adv-text {
    font-size: 20px;                           /* live: 20px */
  }

  /* Hide mobile-only item */
  .service-hero__adv-item--mobile {
    display: none;                             /* live .mobq: display:none */
  }
}

/* --- @1180px Desktop --- */
@media (min-width: 1180px) {
  .service-hero {
    display: flex;                             /* flex layout for side-by-side at desktop */
    flex-wrap: wrap;                           /* h1 full-width, then advantages + image on second row */
    align-items: stretch;                      /* offers and image same height */
    width: 1180px;                             /* live: 1180px */
    margin: 0 auto 100px;                      /* live: .derk margin-bottom:100px */
    position: relative;
  }

  .service-hero__title {
    flex: 0 0 100%;                            /* full width, forces wrap */
    font-size: 48px;                           /* live: 48px */
    line-height: 58px;                         /* live: 58px */
    margin: 55px 0 40px;                       /* live: 50px, +5px visual compensation */
    padding: 0;                                /* live: no padding @1200 */
  }

  /* Desktop layout: offers/advantages left + image right */
  .service-hero__image-wrap {
    order: 2;                                  /* image goes right */
    position: static;                          /* override mobile/tablet absolute */
    flex: 1;                                   /* takes ~50% of 1180px */
    min-width: 0;                              /* override flex min-width:auto so inner can overflow */
    margin-left: 30px;                         /* gap between offers and image */
    margin-right: 0;
    padding: 0;                                /* remove mobile padding */
  }

  .service-hero__image-inner {
    width: 100%;                               /* fill flex item */
    border-radius: 5px;                        /* live: 5px */
    height: 100%;                              /* stretch to match offers height */
    overflow: hidden;                          /* clip image to rounded corners */
    padding-top: 0;                            /* override mobile */
    margin-bottom: 0;                          /* no margin on desktop */
  }

  .service-hero__img {
    width: 102%;                               /* slight zoom to crop watermark in corner */
    height: 102%;
    object-fit: cover;                         /* cover both dimensions, crop excess */
    object-position: left top;                 /* anchor to left-top, watermark right-bottom crops out */
    border-radius: 5px;                        /* live: 5px */
  }

  .service-hero__price {
    padding: 14px 22px;
    font-size: 16px;
    border-radius: 0 12px 0 5px;
    text-align: center;
  }

  .service-hero__advantages {
    order: 1;                                  /* advantages/offers go left */
    width: 574px;                              /* live: 574px */
    padding: 0;                                /* live: padding:0 @1180 */
    margin-bottom: 0;                          /* live: .sryi margin-bottom:80px absorbed by .derk fixed height; in flex, 80px would over-extend grey bg */
  }

  .service-hero__adv-item {
    width: 574px;                              /* live: 574px */
    height: 78px;                              /* live: 78px */
    margin-bottom: 10px;                       /* live: 10px */
  }

  .service-hero__adv-row {
    padding-right: 50px;                       /* R-15: live spacer 50px @1200 */
  }

  .service-hero__adv-icon {
    width: 97px;                               /* R-15: content-box 64px + padding 10+23 = 97px total */
    padding: 0 10px 0 23px;                    /* live: 0 10px 0 23px */
  }

  .service-hero__adv-icon svg {
    width: 42px;                               /* live: 42px */
    height: 42px;                              /* live: 42px */
    margin-top: -3px;                          /* R-15: flex center vs live table-cell v-align — shift up to match live icon position */
  }

  .service-hero__adv-text {
    font-size: 20px;                           /* live: 20px */
    color: #4980C0;                            /* live: rgb(73,128,192) — blue on desktop */
  }
}

/* =========================================================
   T-SERVICE: Service Hero Offers Grid (replaces advantages)
   Used on service pages: 2x3 grid of service-card components
   ========================================================= */

/* --- Base mobile --- */
.service-hero__offers {
  padding: 0 15px 15px;
}

.service-hero__offers .service-card {
  padding: 8px 12px;
  margin-bottom: 4px;
}

/* --- @768px Tablet: single column --- */
@media (min-width: 768px) {
  .service-hero__offers {
    padding: 0 15px 30px;
  }

  .service-hero__offers .service-card {
    padding: 10px 16px;
    margin-bottom: 5px;
  }
}

/* --- @1180px Desktop: left side of hero, single column --- */
@media (min-width: 1180px) {
  .service-hero__offers {
    order: 1;                                  /* offers go left, image goes right */
    flex: 1;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;                   /* vertically center the 6 rows */
  }

  .service-hero__offers .service-card {
    padding: 10px 16px;
    margin-bottom: 0;
  }
}

/* =========================================================
   T-SERVICE: Price Tables (vskrytie-dverej)
   Live: section.label.white-label > h2 + div.block-lebel.pricer × 11
   Ours: section.service-prices > h2 + div.service-prices__row × 11
   R-15: table+table-cell→flex, content-box→border-box (no width+padding conflict)
   ========================================================= */

/* --- Base mobile (375px) --- */
.service-prices {
  background: #fff;                            /* live: rgb(255,255,255) */
  padding: 0 15px 40px;                        /* live: 0px 15px 40px */
}

.service-prices__title {
  font-size: 20px;                             /* live: 20px */
  font-weight: 900;                            /* live: 900 */
  line-height: 24px;                           /* live: 24px */
  color: #2A2E3E;                              /* live: rgb(42,46,62) */
  text-align: center;                          /* live: center */
  padding-top: 30px;                           /* live: 30px (.white-label h2) */
  margin-bottom: 17px;                         /* live: 16.6px (browser default 0.83em) */
}

.service-prices__row {
  display: flex;                               /* R-15: table→flex */
  align-items: center;                         /* R-15: vertical-align:middle→align-items:center */
  height: 54px;                                /* live: 54px */
  margin-bottom: 3px;                          /* live: 3px */
  border-radius: 0;                            /* live: 0px (no radius on price rows) */
  box-shadow: 0 2px 10px rgba(70,86,132,.15);  /* live: exact match */
  overflow: hidden;                            /* live: hidden */
  background: #fff;                            /* live: rgb(255,255,255) */
  cursor: pointer;                             /* live: pointer on hover */
  transition: box-shadow .5s;                  /* live: all .5s */
}

.service-prices__row:hover {
  box-shadow: 0 6px 10px rgba(70,86,132,.3);  /* live: hover effect */
}

.service-prices__row.active .service-prices__name,
.service-prices__row.active .service-prices__price {
  background: #E7E9F2;                          /* live: .block-lebel.activ .led { background:#E7E9F2 } */
}

.service-prices__row.active {
  background: #E7E9F2;
}

.service-prices__name {
  flex: 1;                                     /* R-15: table-cell auto-width→flex:1 */
  padding: 0 10px 0 13px;                      /* live: 0px 10px 0px 13px */
  font-size: 14px;                             /* live: 14px */
  font-weight: 500;                            /* live: 500 */
  line-height: normal;                         /* live: normal */
  color: #3F474C;                              /* live computed: rgb(63,71,76) */
}

.service-prices__price {
  flex-shrink: 0;                              /* prevent shrink */
  min-width: 110px;                            /* R-15: table-cell auto-sizes to widest; flex needs explicit */
  padding: 0 10px 0 8px;                       /* live: 0px 10px 0px 8px */
  font-size: 14px;                             /* live: 14px */
  font-weight: 500;                            /* live: 500 */
  line-height: normal;                         /* live: normal */
  color: #4980C0;                              /* live: rgb(73,128,192) */
  text-align: right;                           /* live: right */
  white-space: nowrap;                         /* prevent price wrapping */
}

/* --- @768px Tablet --- */
@media (min-width: 768px) {
  .service-prices {
    padding: 0 20px 90px;                      /* live: 0px 20px 90px */
  }

  .service-prices__title {
    font-size: 40px;                           /* live: 40px */
    line-height: 50px;                         /* live: 50px */
    padding-top: 89px;                         /* live: 89px */
    margin-bottom: 49px;                       /* live: 49px */
  }

  .service-prices__row {
    height: 62px;                              /* live: 62px (.white-label override) */
    margin-bottom: 10px;                       /* live: 10px */
  }

  .service-prices__name {
    padding: 0 10px 0 30px;                    /* live: 0px 10px 0px 30px */
    font-size: 18px;                           /* live: 18px */
  }

  .service-prices__price {
    padding: 0 30px 0 8px;                     /* live: 0px 30px 0px 8px */
    font-size: 18px;                           /* live: 18px */
  }
}

/* --- @1180px Desktop --- */
@media (min-width: 1180px) {
  .service-prices {
    padding: 0 0 90px;                         /* live: 0px 0px 90px */
  }

  .service-prices__row {
    width: 900px;                              /* live: 900px (.pricer @1180) */
    margin: 0 auto 10px;                       /* live: 0px 150px 10px (centered in 1200px) */
  }

  .service-prices__price {
    padding: 0 25px 0 8px;                     /* live: 0px 25px 0px 8px */
  }
}

/* =========================================================
   T-SERVICE: Trust Badges (vskrytie-dverej)
   Live: div.bezopas > h2 + section.label.baz.sertv > div.block-lebel × 3
   Ours: div.service-trust > h2 + section.service-badges > div.service-badges__item × 3
   R-15: table+table-cell→flex, inline-block side-by-side→flex @desktop
   ========================================================= */

/* --- Base mobile (375px) --- */
.service-trust__title {
  font-size: 20px;                             /* live: 20px */
  font-weight: 900;                            /* live: 900 */
  line-height: 24px;                           /* live: 24px */
  color: #000;                                 /* live: rgb(0,0,0) (no color set, inherits #000) */
  text-align: center;                          /* live: center */
  margin: 17px 0;                              /* live: 16.6px 0 (browser default 0.83em) */
}

.service-badges {
  padding: 0 15px 25px;                        /* live: 0px 15px 25px */
}

.service-badges__item {
  display: flex;                               /* R-15: table→flex */
  align-items: center;                         /* R-15: vertical-align:middle→align-items:center */
  height: 54px;                                /* live: 54px */
  margin-bottom: 3px;                          /* live: 3px */
  border-radius: 5px;                          /* live: 5px */
  box-shadow: 0 2px 10px rgba(70,86,132,.15);  /* live: exact match */
  overflow: hidden;                            /* live: hidden */
  background: #fff;                            /* live: rgb(255,255,255) */
  cursor: pointer;                             /* live: pointer (from .block-lebel) */
  transition: box-shadow .5s;                  /* live: all .5s */
}

.service-badges__item:hover {
  box-shadow: 0 6px 10px rgba(70,86,132,.3);  /* live: hover effect */
}

.service-badges__icon-wrap {
  display: flex;                               /* R-15: table-cell with icon→flex */
  align-items: center;                         /* center icon vertically */
  justify-content: center;                     /* center icon horizontally */
  flex-shrink: 0;                              /* prevent shrink */
}

.service-badges__icon {
  width: 23px;                                 /* live: 23px */
  height: 30px;                                /* live: 30px */
  margin: 0 11px;                              /* live: 0px 11px */
  overflow: hidden;                            /* live: hidden */
}

.service-badges__text {
  width: 71vw;                                 /* R-15: live 70vw in table; badges need wider to fit "до 3-х" on line 1 */
  box-sizing: content-box;                     /* live uses content-box */
  padding-right: 10px;                         /* live: padding-right:10px */
  font-size: 14px;                             /* live: 14px */
  font-weight: 500;                            /* live: 500 */
  line-height: normal;                         /* live: normal */
  color: #3F474C;                              /* live: rgb(63,71,76) */
}

/* --- @768px Tablet --- */
@media (min-width: 768px) {
  .service-badges {
    padding: 0 20px 46px;                      /* live: 0px 20px 46px */
  }

  .service-badges__item {
    height: 74px;                              /* live: 74px */
    margin-bottom: 10px;                       /* live: 10px */
  }

  .service-badges__icon-wrap {
    padding: 0 40px;                           /* live: .baz .led div padding:0 40px @768 */
  }

  .service-badges__text {
    font-size: 20px;                           /* live: 20px */
  }
}

/* --- @1180px Desktop --- */
@media (min-width: 1180px) {
  .service-trust {
    display: flex;                             /* side-by-side: badges + video */
    flex-wrap: wrap;                           /* h2 on first line, badges+video on second */
    align-items: flex-start;                   /* R-15: live inline-block vertical-align:top → flex-start */
    width: 1180px;                             /* live: .bezopas width:1180px (fixed, not max-width) */
    margin: 0 auto;                            /* live: margin:auto → centered */
  }

  .service-trust__title {
    flex: 0 0 100%;                            /* full width, forces wrap */
    font-size: 40px;                           /* live: 40px */
    line-height: 50px;                         /* live: 50px */
    color: #2A2E3E;                            /* live: rgb(42,46,62) */
    padding-top: 80px;                         /* live: 80px */
    margin: 0 0 49px;                          /* live: 0px 0px 49px */
  }

  .service-badges {
    width: 574px;                              /* live: 574px */
    flex-shrink: 0;                            /* prevent shrink */
    padding: 0;                                /* live: 0px (reset mobile padding) */
    margin: 0 14px 60px 0;                     /* live: 0px 10px 60px 0px + 4px inline-block whitespace (R-15) */
  }

  .service-badges__item {
    height: 113.5px;                           /* live: 113.5px */
    margin-bottom: 10px;                       /* live: 10px */
  }

  .service-badges__icon-wrap {
    padding: 0 40px;                           /* live .led div: width:20px + padding:0 40px (content-box) = 100px. In border-box: auto width + 80px padding, icon 42px inside → 122px total */
  }

  .service-badges__icon {
    width: 42px;                               /* live: 42px */
    height: 42px;                              /* live: 42px */
    margin: 0;                                 /* live: 0px (reset mobile margin) */
    overflow: visible;                         /* live: no overflow clip on icon */
  }

  .service-badges__text {
    font-size: 20px;                           /* live: 20px */
    color: #4980C0;                            /* live: rgb(73,128,192) — blue on desktop */
  }
}

/* ============================================
   Lock Brands Carousel (zamena-zamkov page)
   ============================================ */

/* --- Mobile (base) --- */
.lock-brands {
  padding: 0;
  background: #fff;
  position: relative;
}

.lock-brands__title {
  font-family: var(--font-primary);
  font-size: 20px;
  font-weight: 900;
  line-height: 24px;
  color: #2A2E3E;
  text-align: center;
  padding-top: 25px;
  margin: 0 0 17px;
}

.lock-brands__slider {
  overflow: hidden;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.lock-brands__track {
  display: flex;
  padding-left: 15px;
  gap: 13px;
}

.lock-brands__item {
  flex: 0 0 auto;
  width: calc(25vw + 2px);
  margin: 15px 0;
  border: 1px solid #DFE3EF;
  border-radius: 3px;
  box-shadow: 0 6px 10px rgba(70, 86, 132, .08);
  overflow: hidden;
}

.lock-brands__link {
  display: flex;
  text-decoration: none;
  height: 100%;
}

.lock-brands__logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 10px;
  width: 100%;
  height: 100%;
}

.lock-brands__logo-wrap img {
  display: block;
  max-width: 100%;
  height: auto;
}

.lock-brands__nav {
  display: none;
}

.lock-brands__dots {
  display: none;
}

/* --- Tablet (768px) --- */
@media (min-width: 768px) {
  .lock-brands {
    padding: 0;
  }

  .lock-brands__title {
    font-size: 40px;
    line-height: 50px;
    padding-top: 50px;
    margin-bottom: 30px;
  }

  .lock-brands__slider {
    margin-bottom: 43px;
  }

  .lock-brands__item {
    width: 209px;
  }

  .lock-brands__logo-wrap {
    padding: 17.5px 10px;
  }
}

/* --- Desktop (1180px) — JS carousel --- */
@media (min-width: 1180px) {
  .lock-brands {
    position: relative;
    padding: 0;
  }

  .lock-brands__title {
    color: #2A2E3E;
    font-size: 40px;
    line-height: 50px;
    padding-top: 50px;
    margin-bottom: 30px;
  }

  .lock-brands__slider {
    overflow: hidden;
    max-width: 1180px;
    margin: 0 auto;
  }

  .lock-brands__track {
    display: flex;
    gap: 10px;
    padding-left: 0;
    transition: transform 250ms ease;
    will-change: transform;
  }

  .lock-brands__item {
    flex: 0 0 160px;
    width: 160px;
    margin: 15px 0;
  }

  .lock-brands__logo-wrap {
    padding: 12px 10px;
  }

  .lock-brands__item:hover {
    box-shadow: 0 6px 10px rgba(70, 86, 132, .2);
  }

  .lock-brands__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 185px;
    width: 42px;
    height: 42px;
    border-radius: 50px;
    background: #fff;
    box-shadow: 0 8px 10px rgba(63, 71, 76, .1);
    border: none;
    cursor: pointer;
    z-index: 10;
    padding: 0;
  }

  .lock-brands__prev {
    left: calc(50% - 666px);
  }

  .lock-brands__next {
    right: calc(50% - 662px);
  }

  .lock-brands__dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 12px 0 40px;
    max-width: 1180px;
    margin: 0 auto;
  }

  .lock-brands__dot {
    position: relative;
    width: 8px;
    height: 8px;
    border: none;
    border-radius: 50%;
    background: #DADDE8;
    padding: 0;
    cursor: pointer;
  }

  .lock-brands__dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
  }

  .lock-brands__dot.is-active {
    background: #4980C0;
  }
}

/* Service page SEO large h2 (live: 30px/900/40px @375) */
.seo-text h2.seo-text__h2-large,
.seo-text h2.h2l {
  font-size: 30px;
  font-weight: 900;
  line-height: 40px;
  padding-top: 10px;
  margin-bottom: 30px;
}

/* === T-CONTACTS: kontakty === */

.contacts__map-fullscreen {
  position: relative;
  min-height: calc(100vh - 50px);
  overflow: hidden;
}

.contacts__map-fullscreen picture,
.contacts__map-fullscreen img {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
}

.contacts__overlay {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .12);
  padding: 28px 24px;
  margin: 20px 15px 0;
  text-align: center;
}

.contacts__name {
  font-size: 18px;
  font-weight: 700;
  color: #2A2E3E;
  margin-bottom: 8px;
}

.contacts__address {
  font-size: 14px;
  font-weight: 400;
  color: #7B8C96;
  margin-bottom: 16px;
}

.contacts__call {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: #2A2E3E;
  margin-bottom: 12px;
}

.contacts__detail {
  font-size: 13px;
  font-weight: 400;
  color: #7B8C96;
  margin-top: 4px;
}

.contacts__btn {
  display: block;
  background: #4FB300;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  padding: 14px;
  border-radius: 8px;
  text-align: center;
}

/* Tablet */
@media (min-width: 768px) {
  .contacts__map-fullscreen {
    min-height: calc(100vh - 64px);
  }

  .contacts__overlay {
    max-width: 360px;
    margin: 40px auto 0;
    padding: 32px 28px;
  }

  .contacts__name {
    font-size: 20px;
  }

  .contacts__call {
    font-size: 24px;
  }
}

/* Desktop */
@media (min-width: 1180px) {
  .contacts__map-fullscreen {
    min-height: calc(100vh - 130px);
  }

  .contacts__overlay-wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 1180px;
    margin: 0 auto;
    padding: 100px 15px;
    pointer-events: none;
  }

  .contacts__overlay {
    pointer-events: auto;
    margin: 0;
    max-width: 360px;
  }
}

/* ============================================
   T-PRICES: ceny-na-uslugi
   ============================================ */

/* H1 */
.prices-page__h1 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
  color: #2A2E3E;
  margin: 20px 0 16px;
  padding: 0 15px;
}

/* Single-column wrapper */
.prices-page__grid {
  padding: 0 15px 10px;
  max-width: 700px;
  margin: 0 auto;
}

/* Each category = white card */
.prices__group {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 6px rgba(70, 86, 132, 0.07);
  margin-bottom: 24px;
}

/* Category title */
.prices__group-title {
  font-size: 15px;
  font-weight: 600;
  color: #556672;
  padding: 16px 15px 0;
  margin: 0;
  letter-spacing: 0.02em;
}

/* Price rows inside card */
.prices__group .price-list--flat {
  margin: 0;
  padding: 10px 0 8px;
}

.prices__group .price-list--flat .price-list__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 15px;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  border-bottom: none;
}

.prices__group .price-list--flat .price-list__name {
  font-size: 14px;
  font-weight: 400;
  color: #5A6670;
}

.prices__group .price-list--flat .price-list__cost {
  font-size: 14px;
  font-weight: 500;
  color: #4980C0;
  white-space: nowrap;
  margin-left: 12px;
}

/* Note below all cards */
.prices-page__note {
  text-align: center;
  max-width: 700px;
  margin: -10px auto 40px;
  padding: 0 15px;
  font-size: 14px;
  color: #7B8C96;
  line-height: 20px;
}

/* ---- Tablet ≥768px ---- */
@media (min-width: 768px) {
  .prices-page__h1 {
    font-size: 38px;
    line-height: 58px;
    margin: 40px 0 24px;
  }

  .prices__group-title {
    font-size: 17px;
    padding: 18px 20px 0;
  }

  .prices__group .price-list--flat .price-list__item {
    padding: 11px 20px;
  }

  .prices__group .price-list--flat .price-list__name {
    font-size: 16px;
  }

  .prices__group .price-list--flat .price-list__cost {
    font-size: 16px;
  }

  .prices-page__note {
    font-size: 16px;
    padding: 14px 20px 0;
  }
}

/* ---- Desktop ≥1180px ---- */
@media (min-width: 1180px) {
  .prices-page__h1 {
    font-size: 48px;
    font-weight: 700;
    margin: 50px auto 28px;
  }

  .prices-page__grid {
    max-width: 760px;
  }

  .prices__group-title {
    font-size: 18px;
    padding: 20px 24px 0;
  }

  .prices__group .price-list--flat .price-list__item {
    padding: 12px 24px;
  }

  .prices-page__note {
    max-width: 760px;
    padding: 14px 0 0;
  }
}

/* ============================================
   T-BLOG: Blog Page (/blog)
   Live: main.blog > h1.center + ul.filter + section.label.silid.no-silid
   Ours: main.main--blog > .blog-page__*
   ============================================ */

/* --- Base (375px) --- */

.blog-page__title {
  font-size: 20px;
  font-weight: 900;
  line-height: 24px;
  color: #2A2E3E;
  text-align: center;
  margin: 22px 0 13px;
  padding: 0 15px;
  font-family: var(--font-primary);
}

.blog-page__filter {
  list-style: none;
  padding: 0 15px;
  margin: 16px 0;
  display: flex;
  flex-wrap: nowrap;
  gap: 0 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.blog-page__filter::-webkit-scrollbar {
  display: none;
}

.blog-page__filter li {
  display: inline-block;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  cursor: pointer;
  margin-right: 0;
  color: #7B8C96;
  padding: 4px 0;
  border: none;
  border-bottom: 2px solid transparent;
  transition: color .2s;
  white-space: nowrap;
  flex-shrink: 0;
}

.blog-page__filter li:last-child {
  margin-right: 0;
}

.blog-page__filter li:hover {
  color: #3F474C;
}

.blog-page__filter li.active {
  color: #2A2E3E;
  font-weight: 500;
  border-bottom-color: #2A2E3E;
}

.blog-page__content {
  margin-top: 16px;
  padding: 0 0 60px;
  position: relative;
  background: transparent;
}
.blog-page__content::before {
  content: '';
  position: absolute;
  top: 115px;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  z-index: 0;
}
.blog-page__grid {
  position: relative;
  z-index: 1;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
}

/* Override S-11 card styles for blog page grid */
.blog-page__grid .s-blog__card {
  width: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: 5px;
  box-shadow: 0 6px 10px rgba(70, 86, 132, .08);
}

.blog-page__grid .s-blog__img-wrap {
  aspect-ratio: 400 / 274;
  overflow: hidden;
}

.blog-page__grid .s-blog__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Pagination */
.blog-page__pagination {
  list-style: none;
  padding: 0;
  margin: 16px 0;
  text-align: center;
  flex: 0 0 100%;
}

.blog-page__pagination li {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  cursor: pointer;
  border: 2px solid #E3E9EE;
  color: #4980C0;
  border-radius: 50px;
  padding: 11px 15px;
  margin-right: 6px;
}

.blog-page__pagination li:last-child {
  margin-right: 0;
}

.blog-page__pagination li:hover {
  background: #E3E9EE;
  color: #3F474C;
}

.blog-page__pagination li.active {
  background: #E3E9EE;
}

.blog-page__pagination-dots {
  color: #4980C0;
  border: 0 !important;
  padding: 0 !important;
  cursor: default !important;
}

.blog-page__pagination-dots:hover {
  background: transparent !important;
}

/* --- Tablet (768px) --- */
@media (min-width: 768px) {
  .blog-page__content::before {
    top: 115px;
  }

  .blog-page__title {
    font-size: 38px;
    line-height: 58px;
    margin: 43px 0 12px;
    padding: 0 15px;
  }

  .blog-page__filter li {
    font-size: 18px;
  }

  .blog-page__filter {
    gap: 0 28px;
    justify-content: center;
    overflow-x: visible;
  }

  .blog-page__grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .blog-page__pagination li {
    font-size: 18px;
    padding: 15px 20px;
  }
}

/* --- Desktop (1180px) --- */
@media (min-width: 1180px) {
  .blog-page__content::before {
    top: 130px;
  }

  .blog-page__title {
    font-size: 48px;
    font-weight: 900;
    line-height: 58px;
    max-width: 1180px;
    margin: 50px auto 40px;
    padding: 0 10px;
  }

  .blog-page__grid {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
  }

  .blog-page__grid .s-blog__card:hover {
    box-shadow: 0 6px 10px rgba(70, 86, 132, .2);
  }
}

/* ==========================================================================
   T-ARTICLE: Blog article page
   Live: content-box, inline-block → ours: border-box, flexbox
   R-15: margin-top:-6px on <p> is live global rule — NOT needed here
   ========================================================================== */

/* Article wrapper — white bg, full width */
.blog-article {
  background: #fff;
  padding: 0 15px 40px;
}

/* Article body — text container */
.blog-article__body {
  font-size: 13px;
  line-height: 18px;
  color: #3F474C;
}

/* H1 — article title */
.blog-article__body h1 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  color: #2A2E3E;
  text-align: center;
  margin: 0 0 17px;
  padding: 18px 15px 0;
}

/* H2 — section headings */
.blog-article__body h2 {
  font-size: 14px;
  font-weight: 700;
  line-height: 16px;
  color: #2A2E3E;
  margin: 0 0 15px;
  padding: 6px 0 0;
  scroll-margin-top: 60px;
}

/* Paragraphs */
.blog-article__body p {
  margin: 13px 0;
}

/* Green important box */
.blog-article__body .impzel {
  padding: 25px;
  background: rgba(79, 179, 0, 0.2);
  color: #000;
  margin: 13px 0;
  font-size: 13px;
  line-height: 18px;
}

/* TOC list */
.blog-article__body .jak {
  padding: 20px 50px;
  margin: 13px 0;
  list-style: disc;
  background: rgba(182, 204, 237, 0.21);
}

.blog-article__body .jak li {
  color: #4980C0;
}

.blog-article__body .jak a {
  color: #4980C0;
}

/* Regular lists */
.blog-article__body ul:not(.jak) {
  padding: 0 0 0 40px;
  margin: 13px 0;
  list-style: disc;
}

.blog-article__body ol {
  padding: 0 0 0 40px;
  margin: 13px 0;
  list-style: decimal;
}

.blog-article__body li {
  font-size: 13px;
  line-height: 18px;
}

/* Images — mobile: full-width, no float */
.blog-article__body img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

/* Picture wrappers — mobile: inside container (15px padding each side) */
.blog-article__body picture {
  display: block;
  margin: 18px 0;
}

.blog-article__body picture img {
  width: 100%;
}

.blog-article__body picture .align-center {
  margin: 0;
}

.blog-article__body picture:has(.align-center) {
  margin: 0 0 30px;
}

.blog-article__body video.align-center {
  display: block;
  width: 100%;
  margin: 0 0 30px;
  max-width: none;
  height: auto;
}

/* ---------- Tablet (768px) ---------- */
@media (min-width: 768px) {
  .blog-article {
    padding: 0 20px 40px;
  }

  .blog-article__body {
    font-size: 18px;
    line-height: 28px;
  }

  .blog-article__body h1 {
    font-size: 38px;
    line-height: 58px;
    margin: 0 0 12px;
  }

  .blog-article__body h2 {
    font-size: 25px;
    line-height: 26px;
    margin: 0 0 20px;
    scroll-margin-top: 74px;
  }

  .blog-article__body p {
    font-size: 18px;
    line-height: 28px;
    margin: -6px 0 25px;
  }

  .blog-article__body .impzel {
    font-size: 18px;
    line-height: 28px;
    margin: -6px 0 25px;
  }

  .blog-article__body li {
    font-size: 18px;
    line-height: 28px;
  }

  .blog-article__body ul:not(.jak) {
    margin: 18px 0;
  }

  .blog-article__body ol {
    margin: 18px 0;
  }

  .blog-article__body .jak {
    margin: 18px 0;
  }

  /* Images — floated, overflow container like live (img 738px in 728px container) */
  .blog-article__body picture:has(.align-right) {
    float: right;
    width: calc(100% + 10px);
    margin: 0 0 0 -10px;
  }

  .blog-article__body picture:has(.align-right) img {
    width: 100%;
    height: auto;
    padding: 0 0 10px 10px;
  }

  .blog-article__body picture:has(.align-left) {
    float: left;
    width: calc(100% + 20px);
    margin: 0;
  }

  .blog-article__body picture:has(.align-left) img {
    width: 100%;
    height: auto;
    padding: 0 20px 10px 0;
  }

  .blog-article__body picture:has(.align-center) {
    margin: 0 0 30px;
  }

  /* Videos — full container width, 300px height (like live iframes) */
  .blog-article__body video.align-center {
    display: block;
    width: 100%;
    height: 300px;
    margin: 0 0 30px;
    max-width: none;
  }

}

/* ---------- Desktop (1180px) ---------- */
@media (min-width: 1180px) {
  .blog-article {
    padding: 0 0 40px;
  }

  .blog-article__body {
    max-width: 900px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 28px;
  }

  .blog-article__body h1 {
    font-size: 48px;
    font-weight: 700;
    line-height: 58px;
    margin: 0 0 40px;
    padding: 18px 0 0;
  }

  .blog-article__body h2 {
    font-size: 25px;
    line-height: 26px;
    margin: 0 0 20px;
    scroll-margin-top: 140px;
  }

  .blog-article__body p {
    font-size: 18px;
    line-height: 28px;
    margin: -6px 0 25px;
  }

  .blog-article__body .impzel {
    font-size: 18px;
    line-height: 28px;
    padding: 25px;
    margin: -6px 0 25px;
  }

  .blog-article__body li {
    font-size: 18px;
    line-height: 28px;
  }

  .blog-article__body picture:has(.align-right) {
    float: right;
    width: initial;
    max-width: 40%;
    margin: 0;
  }

  .blog-article__body picture:has(.align-right) img {
    width: 100%;
    height: auto;
    padding-left: 10px;
    padding-bottom: 10px;
  }

  .blog-article__body picture:has(.align-left) {
    float: left;
    width: initial;
    max-width: 40%;
    margin: 0;
  }

  .blog-article__body picture:has(.align-left) img {
    width: 100%;
    height: auto;
    padding-right: 20px;
    padding-bottom: 10px;
  }

  .blog-article__body picture:has(.align-center) {
    display: block;
    clear: both;
    margin: 0 auto 30px;
    float: none;
  }

  .blog-article__body picture:has(.align-center) img {
    width: initial;
    height: auto;
    margin: 0 auto;
  }

  /* Video — original size, centered (400×300 like live) */
  .blog-article__body video.align-center {
    width: 400px;
    height: 300px;
    margin: 0 auto 30px;
    max-width: 100%;
  }

}

/* ============================================
   T-POST: Blog article — clean text (.post__*)
   ============================================ */

.post {
  background: #fff;
  padding: 0 15px 40px;
}

.post__title {
  font-size: 22px;
  font-weight: 700;
  line-height: 28px;
  color: #2A2E3E;
  margin: 0 0 8px;
}

.post__meta {
  font-size: 13px;
  color: #9EAAB2;
  margin: 0 0 20px;
}

.post__hero {
  display: block;
  margin: 0 -15px 24px;
}

.post__hero img {
  width: 100%;
  height: auto;
  display: block;
}

.post__content {
  font-size: 15px;
  line-height: 24px;
  color: #3F474C;
}

.post__content p {
  margin: 0 0 16px;
}

.post__content h2 {
  font-size: 18px;
  font-weight: 700;
  line-height: 22px;
  color: #2A2E3E;
  margin: 32px 0 12px;
  scroll-margin-top: 60px;
}

.post__content ul,
.post__content ol {
  padding-left: 20px;
  margin: 0 0 16px;
}

.post__content ul { list-style: disc; }
.post__content ol { list-style: decimal; }

.post__content li {
  margin-bottom: 8px;
  line-height: 22px;
}

.post__content picture {
  display: block;
  margin: 24px -15px;
}

.post__content picture img {
  width: 100%;
  height: auto;
}

/* ---------- Tablet (768px) ---------- */
@media (min-width: 768px) {
  .post {
    padding: 0 40px 50px;
  }

  .post__title {
    font-size: 32px;
    line-height: 40px;
  }

  .post__meta {
    font-size: 14px;
    margin-bottom: 24px;
  }

  .post__hero {
    margin: 0 0 28px;
    border-radius: 6px;
    overflow: hidden;
  }

  .post__content {
    font-size: 17px;
    line-height: 28px;
  }

  .post__content h2 {
    font-size: 22px;
    line-height: 28px;
    margin-top: 40px;
    scroll-margin-top: 74px;
  }

  .post__content li {
    line-height: 26px;
  }

  .post__content picture {
    margin: 28px 0;
    border-radius: 6px;
    overflow: hidden;
  }
}

/* ---------- Desktop (1180px) ---------- */
@media (min-width: 1180px) {
  .post {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 0 60px;
  }

  .post__title {
    font-size: 38px;
    line-height: 46px;
  }

  .post__content h2 {
    font-size: 24px;
    line-height: 30px;
    margin-top: 48px;
    scroll-margin-top: 140px;
  }
}

/* ============================================
   T-ARTICLE-EXT: Breadcrumbs, meta, related articles
   ============================================ */

/* Breadcrumbs */
.blog-breadcrumbs {
  padding: 12px 15px 0;
  font-size: 13px;
  line-height: 18px;
  color: #7B8C96;
}

.blog-breadcrumbs a {
  color: #4980C0;
  border-bottom: 1px dashed #4980C0;
}

.blog-breadcrumbs a:hover {
  border-bottom-color: transparent;
}

.blog-breadcrumbs__sep {
  margin: 0 6px;
  color: #B0BEC5;
}

/* Article meta (date) */
.blog-article__meta {
  font-size: 13px;
  color: #7B8C96;
  text-align: center;
  margin: 0 0 20px;
}

/* Related articles */
.blog-related {
  padding: 30px 15px 60px;
}

.blog-related__title {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  color: #2A2E3E;
  margin: 0 0 20px;
}

.blog-related__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.blog-related__grid .s-blog__card {
  flex: 0 0 100%;
  width: 100%;
}

@media (min-width: 768px) {
  .blog-breadcrumbs {
    padding: 16px 20px 0;
    font-size: 14px;
  }

  .blog-article__meta {
    font-size: 14px;
    margin: 0 0 24px;
  }

  .blog-related {
    padding: 40px 20px 60px;
  }

  .blog-related__title {
    font-size: 28px;
    margin: 0 0 24px;
  }

  .blog-related__grid .s-blog__card {
    flex: 0 0 48%;
    width: 48%;
  }
}

@media (min-width: 1180px) {
  .blog-breadcrumbs {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px 0 0;
  }

  .blog-article__meta {
    font-size: 15px;
    margin: 0 0 30px;
  }

  .blog-related {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 0 60px;
  }

  .blog-related__title {
    font-size: 32px;
    margin: 0 0 30px;
  }

  .blog-related__grid .s-blog__card {
    flex: 0 0 48%;
    width: 48%;
  }

  .blog-related__grid .s-blog__card:hover {
    box-shadow: 0 6px 10px rgba(70, 86, 132, .2);
  }
}


/* ============================================
   T-BRAND: brand logo — desktop override
   Live @1180: .loget { position:absolute; left:51%; width:100px; padding:22px; }
   R-15: live content-box 100px + 22px*2 = 144px. Ours border-box = 144px total.
   ============================================ */
@media (min-width: 1180px) {
  .service-hero__brand-logo {
    position: absolute;
    left: 0;
    top: 15px;
    width: 144px; /* live content-box 100px + 2*22px padding */
    padding: 22px 22px 26px;                   /* live: 22px + ~4px inline img descender = 26px bottom */
    border-radius: 0;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
  }
}

/* ============================================
   Model Grid (T-AUTO-BRAND: car model cards)
   Live: .label.model > .carsm (overflow:hidden, fixed height) > a/.mos (inline-block) × N
   Ours: .model-grid > .model-grid__cards (overflow:hidden, fixed height) > a/div.model-grid__card (flex) × N
   R-15: live uses inline-block → we use flexbox wrap
   ============================================ */

/* -- Mobile (base, 375px) -- */
.model-grid {
  background: #fff;
  padding: 0 0 30px;
}

.model-grid__title {
  color: #2A2E3E;
  text-align: center;
  font-size: 20px;
  font-weight: 900;
  line-height: 24px;
  padding-top: 30px;
  margin-bottom: 15px;
}

.model-grid__cards {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 73vw;
  /* live .carsm: no padding at mobile — cards use margin:10px 20px for spacing */
}

.model-grid__card {
  position: relative;
  display: block;
  margin: 10px 20px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  flex-shrink: 0;                              /* prevent flex column from squeezing cards */
}

.model-grid__img-wrap img {
  width: 100%;
  height: auto;
  display: block;
}

.model-grid__name {
  position: absolute;
  bottom: 0;                                       /* R-15: live bottom:4px compensates inline gap; our img is display:block (no gap) → bottom:0 */
  left: 0;
  right: 0;
  height: 76px;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(63,71,76,1) 100%);
  text-align: center;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}

.model-grid__name p {
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
  color: #FFF;
  margin-top: 36px;
}

.model-grid__more {
  display: block;
  text-align: center;
  margin: 30px auto 0;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.model-grid__more span {
  font-size: 14px;
  line-height: 18px;
  color: #4980C0;
  font-weight: 500;
  padding: 11px 31px;
  border: 2px solid #E3E9EE;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
}

.model-grid__more:focus {
  outline: none;
}

.model-grid__more:active span,
.model-grid__more:focus span {
  color: #4980C0;
  background: none;
}

.model-grid__more span:hover {
  color: #4980C0;
}

/* -- Tablet (768px) -- */
@media (min-width: 768px) {
  .model-grid {
    padding: 0 0 6px 20px;
  }

  .model-grid__title {
    font-size: 40px;
    line-height: 50px;
    margin-bottom: 49px;
    padding-top: 0;
  }

  .model-grid__cards {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    height: 36vw;
    text-align: center;
    padding: 0;
  }

  .model-grid__card {
    /* Live: inline-block 46.2vw + margin 5px 16px 10px 0
       R-15: inline-block has ~4px inline whitespace, flex doesn't
       Live 2-per-row: 46.2vw * 2 + 16px margin + ~4px gap ≈ 96.4vw
       Flex: use calc(50% - 10px) with 10px gap to approximate */
    width: calc(50% - 10px);
    margin: 5px 0 10px;
    flex-shrink: 0;
  }

  .model-grid__card + .model-grid__card {
    margin-left: 0;
  }

  /* Use gap instead of margin-right for flex */
  .model-grid__cards {
    gap: 0 16px;
  }

  .model-grid__card {
    width: calc(50% - 8px); /* 2 cards, 1 gap of 16px → each loses 8px */
  }

  .model-grid__name p {
    font-size: 18px;
  }

  .model-grid__more {
    margin-top: 70px;
  }

  .model-grid__more span {
    font-size: 16px;
    line-height: 19px;
    padding: 17px 42px;
  }
}

/* -- Desktop (1180px) -- */
@media (min-width: 1180px) {
  .model-grid__cards {
    height: 215px;
    width: 1200px;
    margin: 0 auto;
    text-align: center;
  }

  .model-grid__card {
    width: calc(25% - 12px); /* 4 cards, 3 gaps of 16px → each loses 12px */
    margin: 5px 0 10px;
  }
}

/* ============================================
   T-ABOUT: About page (/zamok-servis)
   ============================================ */

.about-text {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 15px 15px;
}

.about-text p {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: #3F474C;
  margin-bottom: 12px;
}

/* Legal subheadings spacing (privacy policy) */
.about-text--legal p:has(> b) {
  margin-top: 20px;
  margin-bottom: 2px;
}

@media (min-width: 768px) {
  .about-text p {
    font-size: 16px;
    line-height: 24px;
  }

  .about-text--legal p:has(> b) {
    margin-top: 28px;
    margin-bottom: 2px;
  }
}

@media (min-width: 1180px) {
  .about-text--legal p:has(> b) {
    margin-top: 32px;
    margin-bottom: 4px;
  }
}