:root {
  color-scheme: dark;
  --red: #ec0f13;
  --red-dark: #ce0f12;
  --white: #fff;
  --black: #0e0e0e;
  --border: #222;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--black);
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: "Manrope", sans-serif;
}

.page-filters,
.floating-header {
  display: none;
}

button,
a {
  color: inherit;
  font: inherit;
}

button {
  border: 0;
}

a {
  text-decoration: none;
}

.quick-call {
  position: fixed;
  z-index: 3600;
  right: max(24px, env(safe-area-inset-right));
  bottom: max(var(--quick-call-bottom, 24px), env(safe-area-inset-bottom));
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 50%;
  background: rgb(236 15 19 / 92%);
  box-shadow: 0 18px 42px rgb(0 0 0 / 34%), 0 0 0 8px rgb(236 15 19 / 14%);
  opacity: 0;
  pointer-events: none;
  text-decoration: none;
  transform: translate3d(0, 12px, 0) scale(.96);
  visibility: hidden;
  backdrop-filter: blur(10px);
  transition: opacity 180ms ease, transform 220ms ease, visibility 0s linear 220ms;
}

body.quick-call-is-visible .quick-call {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
  visibility: visible;
  transition-delay: 0s;
}

.quick-call img {
  width: 29px;
  height: 29px;
  filter: brightness(0) invert(1);
}

@media (min-width: 1101px) and (hover: hover) and (pointer: fine) {
  .quick-call {
    transition: opacity 180ms ease, transform 180ms ease, filter 180ms ease, box-shadow 180ms ease, visibility 0s linear 220ms;
  }

  body.quick-call-is-visible .quick-call:hover {
    transform: translateY(-3px);
    filter: brightness(1.08);
    box-shadow: 0 22px 48px rgb(0 0 0 / 38%), 0 0 0 10px rgb(236 15 19 / 16%);
  }
}

@media (max-width: 1100px) {
  .quick-call {
    right: max(16px, env(safe-area-inset-right));
    bottom: max(var(--quick-call-bottom, 16px), env(safe-area-inset-bottom));
    width: 56px;
    height: 56px;
    box-shadow: 0 14px 34px rgb(0 0 0 / 34%), 0 0 0 7px rgb(236 15 19 / 13%);
  }

  .quick-call img {
    width: 25px;
    height: 25px;
  }
}

@media (max-width: 720px) {
  .quick-call {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(var(--quick-call-bottom, 12px), env(safe-area-inset-bottom));
    width: 52px;
    height: 52px;
  }

  .quick-call img {
    width: 23px;
    height: 23px;
  }
}

.page-shell {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding-top: 15px;
}

.hero {
  --parallax-y: 0px;
  --hero-bg-x: 0px;
  position: relative;
  width: calc(100% - 30px);
  height: min(800px, calc(100vw * 800 / 1476));
  min-height: 620px;
  margin: 0 auto;
  overflow: hidden;
  isolation: isolate;
  border: 6px solid var(--border);
  border-radius: 30px;
  background: #050505;
}

.hero::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background: rgba(0, 0, 0, 0.8);
}

.hero__background {
  position: absolute;
  z-index: -2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero__background img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% + 180px);
  max-width: none;
  object-fit: cover;
  object-position: center top;
  transform: translate3d(var(--hero-bg-x), var(--parallax-y), 0);
  transform-origin: 50% 0;
  will-change: transform;
}

.desktop-menu {
  display: none;
}

.address-popup {
  display: none;
}

@media (min-width: 1101px) and (hover: hover) and (pointer: fine) {
  .page-filters {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
  }

  .floating-header {
    position: fixed;
    z-index: 3000;
    top: 12px;
    left: 50%;
    display: grid;
    width: 500px;
    height: 66px;
    grid-template-columns: 172px 205px 113px;
    align-items: center;
    padding: 6px;
    transform: translate3d(-50%, -105px, 0) scale(.88);
    transform-origin: 50% 0;
    color: #fff;
    background: rgb(10 10 10 / 28%);
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: 18px;
    box-shadow: 0 18px 46px rgb(0 0 0 / 22%);
    backdrop-filter: blur(16px);
    opacity: 0;
    pointer-events: none;
    transition: transform 420ms cubic-bezier(.2, .8, .2, 1), opacity 240ms ease;
  }

  body.has-compact-header .floating-header,
  body.menu-is-open .floating-header {
    transform: translate3d(-50%, 0, 0) scale(1);
    opacity: 1;
    pointer-events: auto;
  }

  body.menu-is-open .floating-header,
  body.address-popup-is-open .floating-header {
    color: #0e0e0e;
    background: #fff;
    border-color: rgb(14 14 14 / 18%);
  }

  .floating-header__logo {
    position: relative;
    display: block;
    width: 132px;
    height: 46px;
    margin-left: 12px;
    overflow: hidden;
  }

  .floating-header__logo img {
    position: absolute;
    top: -18px;
    left: -35px;
    width: 198px;
    height: auto;
    max-width: none;
    filter: url("#logo-red-black");
  }

  .floating-header__address {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0;
    border: 0;
    color: inherit;
    background: none;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    font-size: 12px;
  }

  .floating-header__address img {
    width: 22px;
    height: 22px;
  }

  .floating-header__address span,
  .desktop-menu__address span,
  .hero__address span {
    display: grid;
    gap: 2px;
    line-height: 1.08;
  }

  .floating-header__address strong,
  .desktop-menu__address strong,
  .hero__address strong,
  .floating-header__address small,
  .desktop-menu__address small,
  .hero__address small {
    display: block;
    font: inherit;
    color: inherit;
  }

  .floating-header__address strong,
  .desktop-menu__address strong,
  .hero__address strong {
    font-weight: 700;
  }

  .floating-header__address small,
  .desktop-menu__address small,
  .hero__address small {
    font-size: .82em;
    opacity: .72;
  }

  .floating-header__menu {
    display: flex;
    width: 103px;
    height: 52px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: inherit;
    background: rgb(255 255 255 / 12%);
    border: 1px solid rgb(255 255 255 / 24%);
    border-radius: 15px;
    font-family: "Oswald", sans-serif;
    font-size: 17px;
    text-transform: uppercase;
  }

  .floating-header__menu-open {
    display: grid;
    width: 18px;
    height: 18px;
    place-items: center;
  }

  .floating-header__menu-open img {
    width: 16px;
    height: 14px;
    filter: brightness(0) invert(1);
  }

  body.menu-is-open .floating-header__menu,
  body.address-popup-is-open .floating-header__menu {
    color: #0e0e0e;
    background: #fff;
    border-color: #0e0e0e;
  }

  body.menu-is-open .floating-header__menu-open img,
  body.address-popup-is-open .floating-header__menu-open img {
    filter: none;
  }

  .floating-header__menu-close {
    display: none;
    font-family: "Manrope", sans-serif;
    font-size: 22px;
    line-height: 1;
  }

  body.menu-is-open .floating-header__menu-open {
    display: none;
  }

  body.menu-is-open .floating-header__menu-close {
    display: inline;
  }

  .desktop-menu {
    position: fixed;
    z-index: 2900;
    inset: 0;
    display: block;
    overflow-y: auto;
    background: rgb(8 8 8 / 82%);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    backdrop-filter: blur(10px);
    transition: opacity 220ms ease, visibility 0s linear 220ms;
  }

  body.menu-is-open {
    overflow: hidden;
  }

  body.address-popup-is-open {
    overflow: hidden;
  }

  body.menu-is-open .desktop-menu {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition-delay: 0s;
  }

  .desktop-menu__header {
    display: none;
  }

  .desktop-menu__logo {
    position: relative;
    display: block;
    width: 132px;
    height: 46px;
    margin-left: 12px;
    overflow: hidden;
  }

  .desktop-menu__logo img {
    position: absolute;
    top: -18px;
    left: -35px;
    width: 198px;
    height: auto;
    max-width: none;
  }

  .desktop-menu__address {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0;
    border: 0;
    color: inherit;
    background: none;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    font-size: 12px;
  }

  .desktop-menu__address img {
    width: 22px;
    height: 22px;
  }

  .desktop-menu__close {
    display: flex;
    width: 103px;
    height: 52px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #0e0e0e;
    background: #fff;
    border: 1px solid #0e0e0e;
    border-radius: 15px;
    font-family: "Oswald", sans-serif;
    font-size: 17px;
    text-transform: uppercase;
  }

  .desktop-menu__close > span:first-child {
    font-family: "Manrope", sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
  }

  .desktop-menu__content {
    position: relative;
    top: 140px;
    left: 50%;
    width: min(1000px, calc(100% - 180px));
    min-height: 630px;
    padding-bottom: 50px;
    transform: translateX(-50%);
  }

  .desktop-menu__categories {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .desktop-menu__category {
    min-height: 164px;
    padding: 0 0 37px;
    border-bottom: 1px solid #272727;
  }

  .desktop-menu__category:nth-child(odd) {
    padding-right: 46px;
    border-right: 1px solid #272727;
  }

  .desktop-menu__category:nth-child(even) {
    padding-left: 46px;
  }

  .desktop-menu__category:nth-child(n + 3) {
    padding-top: 37px;
  }

  .desktop-menu__category h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
    font-family: "Oswald", sans-serif;
    font-size: 32px;
    font-weight: 400;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .desktop-menu__category h2 span {
    font-family: "Manrope", sans-serif;
    font-size: 27px;
    font-weight: 600;
  }

  .desktop-menu__heading-arrow {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    width: .42em;
    height: .42em;
    color: currentColor;
    font-size: 1em;
  }

  .desktop-menu__heading-arrow::before,
  .desktop-menu__heading-arrow::after {
    position: absolute;
    right: 0;
    bottom: 0;
    display: block;
    content: "";
  }

  .desktop-menu__heading-arrow::before {
    width: .68em;
    height: .08em;
    background: currentColor;
    transform: rotate(45deg);
    transform-origin: right center;
  }

  .desktop-menu__heading-arrow::after {
    width: .34em;
    height: .34em;
    border-right: .08em solid currentColor;
    border-bottom: .08em solid currentColor;
  }

  .desktop-menu__category > div {
    display: flex;
    align-items: center;
    gap: 31px;
  }

  .desktop-menu__category a {
    color: #aaa;
    white-space: nowrap;
    font-size: 14px;
    transition: color 160ms ease;
  }

  .desktop-menu__category a:hover,
  .desktop-menu__primary-links a:hover,
  .desktop-menu__legal a:hover {
    color: #fff;
  }

  .desktop-menu__primary-links {
    display: grid;
    height: 126px;
    grid-template-columns: 1.1fr 1fr .83fr .95fr;
    align-items: center;
    border-bottom: 1px solid #272727;
  }

  .desktop-menu__primary-links a {
    font-family: "Oswald", sans-serif;
    font-size: 31px;
    line-height: 1.2;
    text-transform: uppercase;
    transition: color 160ms ease;
  }

  .desktop-menu__footer {
    display: flex;
    height: 82px;
    align-items: center;
    gap: 48px;
  }

  .desktop-menu__language {
    display: flex;
    width: 110px;
    height: 48px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid #262626;
    border-radius: 16px;
    font-size: 14px;
  }

  .desktop-menu__language strong {
    color: #ec0f13;
    font-weight: 600;
  }

  .desktop-menu__language button {
    padding: 0;
    cursor: pointer;
    color: #aaa;
    background: none;
  }

  .desktop-menu__contacts {
    display: flex;
    gap: 10px;
  }

  .desktop-menu__contacts a {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    background: #111;
    border: 1px solid #262626;
    border-radius: 15px;
  }

  .desktop-menu__contacts img {
    width: 22px;
    height: 22px;
    filter: invert(1);
  }

  .desktop-menu__chat span {
    position: relative;
    display: grid;
    width: 23px;
    height: 18px;
    place-items: center;
    color: #0e0e0e;
    background: #fff;
    border-radius: 8px;
    font-size: 10px;
    letter-spacing: 1px;
  }

  .desktop-menu__chat span::after {
    position: absolute;
    bottom: -3px;
    left: 4px;
    width: 6px;
    height: 6px;
    content: "";
    background: #fff;
    transform: rotate(45deg);
  }

  .desktop-menu__legal {
    display: flex;
    gap: 28px;
  }

  .desktop-menu__legal a {
    color: #8b8b8b;
    font-size: 12px;
    transition: color 160ms ease;
  }

  .address-popup {
    position: fixed;
    z-index: 4000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 40px;
    background: rgb(8 8 8 / 82%);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    backdrop-filter: blur(14px);
    transition: opacity 220ms ease, visibility 0s linear 220ms;
  }

  body.address-popup-is-open .address-popup {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition-delay: 0s;
  }

  .address-popup__panel {
    position: relative;
    width: min(1180px, calc(100vw - 80px));
    min-height: clamp(540px, 72vh, 690px);
    max-height: calc(100vh - 70px);
    padding: clamp(34px, 3vw, 54px) clamp(34px, 3.6vw, 58px) clamp(32px, 3vw, 46px);
    overflow: hidden;
    border: 1px solid #262626;
    border-radius: 24px;
    background: #101010;
    box-shadow: 0 24px 70px rgb(0 0 0 / 44%);
    transform: translateY(18px) scale(.985);
    transition: transform 220ms ease;
  }

  body.address-popup-is-open .address-popup__panel {
    transform: translateY(0) scale(1);
  }

  .address-popup__close {
    position: absolute;
    top: 30px;
    right: 30px;
    display: flex;
    width: 118px;
    height: 54px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid transparent;
    border-radius: 16px;
    color: var(--black);
    background: var(--white);
    font-family: "Oswald", sans-serif;
    font-size: 20px;
    line-height: 1;
    text-transform: uppercase;
    transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease;
  }

  .address-popup__close > span:first-child {
    font-family: "Manrope", sans-serif;
    font-size: 29px;
    line-height: .8;
  }

  .address-popup__eyebrow {
    margin: 0 0 12px;
    color: var(--red);
    font-family: "Manrope", sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
  }

  .address-popup h2 {
    width: min(720px, calc(100% - 150px));
    margin: 0 0 clamp(24px, 3vh, 38px);
    color: #fff;
    font-family: "Oswald", sans-serif;
    font-size: clamp(42px, 4.25vw, 58px);
    font-weight: 500;
    line-height: .98;
    text-transform: uppercase;
  }

  .address-popup__body {
    display: grid;
    grid-template-columns: minmax(340px, .88fr) minmax(430px, 1.12fr);
    gap: clamp(24px, 3.2vw, 42px);
    align-items: stretch;
  }

  .address-popup__content {
    display: flex;
    height: 100%;
    min-width: 0;
    flex-direction: column;
  }

  .address-popup__list {
    display: grid;
    flex: 1;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 1.6vh, 18px);
    margin-bottom: clamp(18px, 2.2vh, 28px);
  }

  .address-popup__list article {
    position: relative;
    display: flex;
    min-height: 0;
    flex-direction: column;
    justify-content: center;
    padding: clamp(14px, 1.6vh, 18px) 22px clamp(14px, 1.6vh, 18px) 28px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: rgb(255 255 255 / 3%);
    cursor: pointer;
    transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
  }

  .address-popup__list article::before {
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 0;
    width: 4px;
    border-radius: 999px;
    background: var(--red);
    content: "";
  }

  .address-popup__list span {
    display: block;
    margin-bottom: 7px;
    color: #fff;
    font-family: "Oswald", sans-serif;
    font-size: 25px;
    font-weight: 500;
    line-height: 1.1;
    text-transform: uppercase;
  }

  .address-popup__list strong {
    color: rgb(255 255 255 / 78%);
    font-family: "Manrope", sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.35;
  }

  .address-popup__phone {
    display: inline-flex;
    width: 100%;
    height: 62px;
    align-items: center;
    justify-content: center;
    padding: 0 30px;
    border: 1px solid var(--red);
    border-radius: 20px;
    color: #fff;
    background: var(--red);
    font-family: "Oswald", sans-serif;
    font-size: 28px;
    font-weight: 500;
    text-decoration: none;
    transition: transform 180ms ease, filter 180ms ease, background-color 180ms ease;
  }

  .address-popup__phone--mobile {
    display: none;
  }

  .address-popup__map {
    position: relative;
    min-width: 0;
    min-height: clamp(360px, 50vh, 500px);
    overflow: hidden;
    border: 6px solid var(--border);
    border-radius: 24px;
    background: #0b0f14;
  }

  .address-popup__leaflet {
    width: 100%;
    height: 100%;
    background: #0b0f14;
  }

  .address-popup__leaflet .leaflet-control-zoom {
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 14%);
    border-radius: 12px;
    box-shadow: 0 16px 34px rgb(0 0 0 / 28%);
  }

  .address-popup__leaflet .leaflet-control-zoom a {
    width: 48px;
    height: 48px;
    border: 0;
    background: rgb(18 18 18 / 90%);
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    line-height: 48px;
  }

  .address-popup__leaflet .leaflet-control-zoom a:hover {
    background: var(--red);
    color: #fff;
  }

  .address-popup__phone:hover,
  .address-popup__close:hover {
    transform: translateY(-2px);
    filter: brightness(1.12);
  }

  @media (max-width: 1280px) {
    .address-popup__panel {
      width: min(1040px, calc(100vw - 56px));
    }

    .address-popup__body {
      grid-template-columns: minmax(320px, .9fr) minmax(390px, 1.1fr);
      gap: 24px;
    }

    .address-popup__map {
      min-height: clamp(330px, 48vh, 440px);
    }

    .address-popup__list span {
      font-size: 22px;
    }

    .address-popup__list strong {
      font-size: 16px;
    }
  }
}

.hero__brand,
.hero__location,
.hero__actions {
  border: 1px solid #262626;
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(8px);
}

.hero__brand {
  position: absolute;
  top: 32px;
  left: 47px;
  display: grid;
  width: 187px;
  height: 80px;
  place-items: center;
  overflow: hidden;
  border-radius: 20px;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

.hero__brand-crop {
  position: relative;
  display: block;
  width: 152px;
  height: 55px;
  overflow: hidden;
}

.hero__brand-crop img {
  position: absolute;
  top: -21px;
  left: -40px;
  width: 228.5px;
  height: 101px;
  max-width: none;
}

.hero__location {
  position: absolute;
  top: 32px;
  right: 47px;
  display: flex;
  width: 400px;
  height: 80px;
  align-items: center;
  justify-content: space-between;
  padding: 9px 9px 9px 19px;
  border-radius: 20px;
}

.hero__address {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  color: inherit;
  background: none;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  font-size: 17px;
}

.hero__address img {
  width: 24px;
  height: 24px;
}

.hero__menu {
  display: flex;
  width: 120px;
  height: 60px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 20px;
  background: var(--white);
  color: var(--black);
  font-family: "Oswald", sans-serif;
  font-size: 20px;
  text-transform: uppercase;
  transition: transform 180ms ease, background-color 180ms ease;
}

.hero__menu img {
  width: 26px;
  height: 26px;
}

.hero__menu:hover {
  transform: scale(0.97);
  background: #ececec;
}

/* --- 0.1 static header: завжди видимий верхній блок для сторінок без власного hero --- */

.static-header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1500px, calc(100% - 100px));
  margin: 20px auto 0;
}

.static-header__brand {
  display: grid;
  flex-shrink: 0;
  width: 187px;
  height: 80px;
  place-items: center;
  overflow: hidden;
  border: 1px solid #262626;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(8px);
  color: inherit;
  text-decoration: none;
}

.static-header__brand-crop {
  position: relative;
  display: block;
  width: 152px;
  height: 55px;
  overflow: hidden;
}

.static-header__brand-crop img {
  position: absolute;
  top: -21px;
  left: -40px;
  width: 228.5px;
  height: 101px;
  max-width: none;
}

.static-header__location {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 400px;
  height: 80px;
  padding: 9px 9px 9px 19px;
  border: 1px solid #262626;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(8px);
}

body.menu-is-open .static-header {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 1100px) {
  .static-header {
    width: calc(100% - 36px);
    margin-top: 16px;
  }

  .static-header__brand {
    width: 150px;
    height: 66px;
  }

  .static-header__brand-crop {
    width: 122px;
    height: 44px;
  }

  .static-header__brand-crop img {
    top: -17px;
    left: -32px;
    width: 183px;
    height: 81px;
  }

  .static-header__location {
    width: 300px;
    height: 66px;
    padding: 7px 7px 7px 16px;
  }

  .static-header .hero__menu {
    width: 100px;
    height: 52px;
    font-size: 17px;
  }
}

@media (max-width: 720px) {
  .static-header {
    width: calc(100% - 20px);
    margin-top: 10px;
  }

  .static-header__brand {
    width: 120px;
    height: 56px;
    border-radius: 16px;
  }

  .static-header__brand-crop {
    width: 98px;
    height: 35px;
  }

  .static-header__brand-crop img {
    top: -14px;
    left: -26px;
    width: 147px;
    height: 65px;
  }

  .static-header__location {
    width: auto;
    height: 56px;
    padding: 6px;
    border-radius: 16px;
    gap: 8px;
  }

  .static-header .hero__address span {
    display: none;
  }

  .static-header .hero__menu {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  .static-header .hero__menu span {
    display: none;
  }
}

.hero__copy {
  position: absolute;
  top: 188px;
  left: 47px;
  width: 810px;
}

.hero__eyebrow {
  margin: 0 0 20px;
  color: var(--red);
  font-family: "Oswald", sans-serif;
  font-size: 30px;
  line-height: 1.5;
  text-transform: none;
}

.hero h1 {
  max-width: 810px;
  margin: 0;
  font-family: "Oswald", sans-serif;
  font-size: 90px;
  font-weight: 400;
  line-height: 1.3;
  text-transform: uppercase;
}

.hero__lead {
  margin: 40px 0 0;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.4;
}

.hero__services {
  position: absolute;
  top: 182px;
  right: 53px;
  display: flex;
  width: 239px;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
}

.hero__services-mark {
  width: 18px;
  height: 18px;
}

.hero__services-list {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.hero__services a {
  transition: color 160ms ease, transform 160ms ease;
}

.hero__services a:hover {
  color: var(--red);
  transform: translateX(5px);
}

.hero__actions {
  position: absolute;
  bottom: 56px;
  left: 50%;
  display: flex;
  width: 432px;
  height: 90px;
  align-items: center;
  gap: 10px;
  padding: 9px;
  transform: translateX(-50%);
  border-color: rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.06);
}

.hero__primary {
  display: flex;
  width: 252px;
  height: 70px;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-right: 10px;
  border-radius: 20px;
  background: var(--red);
  font-family: "Oswald", sans-serif;
  font-size: 20px;
  text-transform: uppercase;
  transition: filter 180ms ease, transform 180ms ease;
}

.hero__primary > span:first-child {
  flex: 1;
  text-align: center;
}

.hero__primary-icon {
  display: grid;
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  place-items: center;
  border-radius: 15px;
  background: var(--red-dark);
}

.hero__primary-icon img {
  width: 20px;
  height: 18px;
}

.hero__primary:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
}

.hero__icon-button {
  display: grid;
  width: 70px;
  height: 70px;
  flex: 0 0 70px;
  place-items: center;
  border-radius: 20px;
  background: var(--white);
  transition: transform 180ms ease, background-color 180ms ease;
}

.hero__icon-button img {
  width: 31px;
  height: 31px;
  object-fit: contain;
}

.hero__icon-button:hover {
  transform: translateY(-2px);
  background: #ececec;
}

@media (max-width: 1100px) {
  .hero__menu:hover,
  .hero__services a:hover,
  .hero__primary:hover,
  .hero__icon-button:hover,
  .hero__address:hover,
  .floating-header__logo:hover,
  .floating-header__menu:hover,
  .desktop-menu__logo:hover,
  .desktop-menu__category a:hover,
  .desktop-menu__primary-links a:hover,
  .desktop-menu__legal a:hover,
  .services__tab:hover,
  .service-card__actions a:hover,
  .works__all:hover,
  .complex__primary:hover,
  .complex__secondary:hover,
  .complex__slider-controls button:hover,
  .start-help__button:hover,
  .contact__submit:hover,
  .site-footer__logo:hover,
  .site-footer__button:hover,
  .site-footer__socials a:hover {
    transform: none;
    filter: none;
  }

  .hero__services a:hover,
  .desktop-menu__category a:hover,
  .desktop-menu__primary-links a:hover,
  .desktop-menu__legal a:hover {
    color: inherit;
  }

  .hero__menu:hover,
  .hero__icon-button:hover {
    background: var(--white);
  }
}

.about {
  display: grid;
  width: calc(100% - 100px);
  height: 495px;
  margin: 40px auto 0;
  grid-template-columns: 325px 25px 170px 25px 505px 25px 25px 300px;
  grid-template-rows: 250px 25px 220px;
}

.about__card,
.about__image {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
}

.about__card {
  background: #151515;
}

.about__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about__video {
  background: #111111;
}

.about__video video {
  position: absolute;
  inset: 0;
  width: 116%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}

.about__stat--dark {
  grid-column: 1;
  grid-row: 1;
}

.about__image--grille {
  grid-column: 3 / 6;
  grid-row: 1;
}

.about__stat--red {
  grid-column: 7 / 9;
  grid-row: 1;
  background: #411516;
}

.about__atelier {
  grid-column: 1 / 4;
  grid-row: 3;
  background: #411516;
}

.about__llumar {
  grid-column: 5 / 7;
  grid-row: 3;
}

.about__image--console {
  grid-column: 8;
  grid-row: 3;
}

.about__image--console img {
  height: calc(100% + 140px);
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.about__stat {
  text-align: center;
}

.about__stat strong {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translate3d(-50%, var(--stat-y, 0px), 0) scale(var(--stat-scale, 1));
  opacity: var(--stat-opacity, 1);
  filter: blur(var(--stat-blur, 0px));
  color: var(--white);
  font-size: 80px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  will-change: transform, opacity, filter;
}

.about__stat-label {
  position: absolute;
  top: 121px;
  right: 20px;
  left: 20px;
  display: block;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.about__stat p {
  position: absolute;
  right: 20px;
  bottom: 27px;
  left: 20px;
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 18px;
  line-height: 1.4;
}

.about__stat--dark p {
  bottom: 20px;
  font-size: 15px;
  line-height: 1.24;
}

.about__atelier-car {
  position: absolute;
  top: 73px;
  left: -162px;
  width: 366px;
  height: 166px;
  transform: rotate(-4.95deg);
}

.about__atelier-car img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.about__atelier-wheel {
  top: -78px;
  left: -205px;
  width: 420px;
  height: 420px;
  transform: none;
  pointer-events: none;
  will-change: transform;
}

.about__atelier-wheel img {
  transform-origin: 50% 50%;
  will-change: transform;
}

.about__atelier-logo {
  position: absolute;
  top: 30px;
  left: 20px;
  width: 129px;
  height: 47px;
  overflow: hidden;
}

.about__atelier-logo img {
  position: absolute;
  top: -18px;
  left: -34px;
  width: 194px;
  height: 86px;
  max-width: none;
}

.about__atelier-copy {
  position: absolute;
  top: 50%;
  left: 251px;
  width: 239px;
  transform: translateY(-50%);
}

.about h2,
.about p {
  letter-spacing: 0;
}

.about h2 {
  margin: 0;
  font-family: "Oswald", sans-serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.3;
  text-transform: uppercase;
}

.about__atelier-copy p,
.about__llumar-copy p {
  margin: 20px 0 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 18px;
  line-height: 1.4;
}

.about__llumar-logo {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 232px;
  height: 49px;
}

.about__llumar-logo-base {
  display: block;
  width: 232px;
  height: 49px;
  object-fit: cover;
}

.about__llumar-logo-text {
  position: absolute;
  top: 0;
  left: 49px;
  display: block;
  width: 183px;
  height: 49px;
  overflow: hidden;
}

.about__llumar-logo-text img {
  position: absolute;
  top: 0;
  left: -49px;
  width: 232px;
  height: 49px;
  max-width: none;
  filter: brightness(0) invert(1);
}

.about__llumar-copy {
  position: absolute;
  top: 116px;
  left: 30px;
  width: 470px;
}

.about__llumar-copy h2 {
  white-space: nowrap;
}

.section-divider {
  width: calc(100% - 100px);
  height: 100px;
  margin: 76px auto 0;
}

.section-divider img {
  display: block;
  width: 100%;
  height: 100%;
}

.services {
  position: relative;
  width: 100%;
  height: 918px;
  margin-top: 30px;
}

.services__header {
  position: absolute;
  top: 0;
  left: 50%;
  width: 950px;
  transform: translateX(-50%);
  text-align: center;
  text-transform: uppercase;
}

.services__header p {
  margin: 0 0 25px;
  color: rgba(255, 255, 255, 0.8);
  font-family: "Oswald", sans-serif;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: 0.4px;
}

.services__header h2 {
  margin: 0;
  font-family: "Oswald", sans-serif;
  font-size: 56px;
  font-weight: 400;
  line-height: 1.3;
}

.services__header h2 span {
  color: var(--red);
}

.services__tabs {
  position: absolute;
  top: 154px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
  transform: translateX(-50%);
}

.services__tab {
  min-height: 65px;
  padding: 20px 30px;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--white);
  font-size: 18px;
  line-height: 1.3;
  white-space: nowrap;
}

.services__tab.is-active {
  border-color: rgba(255, 255, 255, 0.03);
  background: var(--white);
  color: var(--black);
  font-weight: 600;
}

.services__list {
  position: absolute;
  top: 247px;
  left: 50px;
  display: flex;
  gap: 25px;
}

.service-card {
  position: relative;
  width: 450px;
  height: 561px;
  flex: 0 0 450px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: #101010;
}

.service-card__media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 280px;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
  transition: height 520ms cubic-bezier(.22, 1, .36, 1), border-radius 520ms cubic-bezier(.22, 1, .36, 1);
}

.service-card__media--shade::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, transparent 48.4%, #000 92.6%);
  pointer-events: none;
}

.service-card > .service-card__image {
  position: absolute;
  top: 0;
  left: 0;
}

.service-card__image {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 20px 20px 0 0;
  transition: height 520ms cubic-bezier(.22, 1, .36, 1), border-radius 520ms cubic-bezier(.22, 1, .36, 1), transform 520ms cubic-bezier(.22, 1, .36, 1);
}

.service-card__media .service-card__image {
  position: absolute;
  inset: 0;
}

.service-card__heading {
  position: absolute;
  top: 319px;
  right: 24px;
  left: 24px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.service-card__heading h3 {
  margin: 0;
  font-family: "Oswald", sans-serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;
}

.service-card__heading p {
  width: 232px;
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 18px;
  line-height: 1.3;
  text-align: right;
}

.service-card__price {
  position: absolute;
  top: 412px;
  left: 24px;
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 22px;
  line-height: 1.3;
}

.service-card__actions {
  position: absolute;
  right: -1px;
  bottom: -1px;
  left: -1px;
  display: grid;
  height: 80px;
  grid-template-columns: 1fr 1fr;
}

.service-card__actions > a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  border: 1px solid var(--border);
  font-family: "Oswald", sans-serif;
  font-size: 20px;
  line-height: 1.2;
  text-transform: uppercase;
}

.service-card__actions > a:first-child {
  border-radius: 0 0 0 10px;
}

.service-card__actions > a:last-child {
  border-radius: 0 0 10px;
}

.service-card__actions span {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 15px;
  background: var(--border);
}

.service-card__actions img {
  width: 16px;
  height: 14px;
}

.services__all {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  width: 314px;
  height: 70px;
  align-items: center;
  justify-content: center;
  transform: translateX(-50%);
  border-radius: 20px;
  background: #411516;
  font-family: "Oswald", sans-serif;
  font-size: 20px;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}

.complex {
  position: relative;
  width: calc(100% - 100px);
  height: 700px;
  margin: 100px auto 0;
  overflow: hidden;
  color: #0e0e0e;
  background: #fff;
  border: 6px solid #222;
  border-radius: 30px;
}

.complex__content {
  position: absolute;
  inset: 47px auto 47px 47px;
  width: 620px;
}

.complex__title {
  margin: 0;
  font-family: "Oswald", sans-serif;
  font-size: 56px;
  font-weight: 400;
  line-height: 1.3;
  text-transform: uppercase;
}

.complex__title span,
.complex__title strong {
  display: block;
  font-weight: 400;
}

.complex__title strong {
  color: #ec0f13;
}

.complex__description {
  width: 639px;
  margin: 17px 0 0;
  font-family: "Manrope", sans-serif;
  font-size: 18px;
  line-height: 1.4;
}

.complex__package {
  margin-top: 26px;
}

.complex__package h3 {
  margin: 0 0 12px;
  font-family: "Oswald", sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.3;
  text-transform: uppercase;
}

.complex__chips,
.complex__chip-row {
  display: flex;
  gap: 10px;
}

.complex__chips {
  flex-direction: column;
}

.complex__chip-row span {
  display: inline-flex;
  min-height: 45px;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  white-space: nowrap;
  background: #f5f5f5;
  border-radius: 10px;
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
}

.complex__chip-row img {
  width: 2px;
  height: 15px;
}

.complex__price {
  display: flex;
  width: 620px;
  height: 80px;
  align-items: center;
  margin-top: 29px;
  padding: 0 20px;
  background: #f5f5f5;
  border-radius: 20px;
}

.complex__price-value {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex: 0 0 163px;
  font-family: "Oswald", sans-serif;
}

.complex__price-value span {
  font-size: 20px;
  line-height: 1.3;
}

.complex__price-value strong {
  font-size: 40px;
  font-weight: 500;
  line-height: 1.3;
}

.complex__price p {
  margin: 0;
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  line-height: 1.35;
}

.complex__price p strong {
  font-weight: 600;
}

.complex__actions {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  gap: 20px;
}

.complex__primary,
.complex__secondary {
  display: flex;
  width: 300px;
  height: 70px;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  font-family: "Oswald", sans-serif;
  font-size: 20px;
  line-height: 1.3;
  text-decoration: none;
  text-transform: uppercase;
}

.complex__primary {
  position: relative;
  justify-content: flex-start;
  padding-left: 38px;
  color: #fff;
  background: #ec0f13;
}

.complex__primary-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  background: #ce0f12;
  border-radius: 15px;
}

.complex__primary-icon img {
  width: 20px;
  height: 18px;
}

.complex__secondary {
  color: #411516;
  background: #f5f5f5;
  border: 1px solid #411516;
}

.complex__media {
  position: absolute;
  top: 47px;
  right: 47px;
  width: 639px;
  height: 600px;
  overflow: hidden;
  border-radius: 20px;
}

.complex__media-image {
  position: absolute;
  top: -1.67%;
  left: -23.85%;
  width: 153.79%;
  height: 109.17%;
  max-width: none;
  object-fit: cover;
}

.complex__media-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 61.8%, #0e0e0e 100%);
}

.complex__media > p {
  position: absolute;
  bottom: 27px;
  left: 30px;
  margin: 0;
  color: #fff;
  font-family: "Oswald", sans-serif;
  font-size: 36px;
  line-height: 1.3;
  text-transform: uppercase;
}

.complex__slider-controls {
  position: absolute;
  right: 21px;
  bottom: 20px;
  display: flex;
  gap: 20px;
}

.complex__slider-controls button {
  display: grid;
  width: 70px;
  height: 70px;
  padding: 0;
  place-items: center;
  cursor: pointer;
  background: rgb(255 255 255 / 5%);
  border: 1px solid #222;
  border-radius: 20px;
  backdrop-filter: blur(2.5px);
}

.complex__slider-controls img {
  width: 20px;
  height: 18px;
  transform: rotate(-45deg);
}

.complex__slider-controls button:first-child img {
  transform: rotate(135deg);
}

.works {
  position: relative;
  width: 1500px;
  max-width: 1500px;
  height: 914px;
  margin: 135px auto 0;
  overflow: hidden;
}

.works__canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 1500px;
  height: 914px;
}

.works__rail {
  display: contents;
}

.works__head {
  position: absolute;
  top: 0;
  left: 275px;
  width: 950px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  text-align: center;
  text-transform: uppercase;
}

.works__eyebrow {
  margin: 0;
  color: rgb(255 255 255 / 80%);
  font-family: "Oswald", sans-serif;
  font-weight: 300;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: 0.4px;
}

.works__title {
  margin: 0;
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  font-size: 56px;
  line-height: 1.3;
  color: #fff;
}

.works__title span {
  color: var(--red);
}

.works__line {
  position: absolute;
  background: rgb(255 255 255 / 8%);
}

.works__line--v {
  width: 1px;
}

.works__line--h {
  height: 1px;
}

.works-card {
  position: absolute;
  color: #fff;
}

.works-card--wide {
  width: 680px;
  height: 345px;
}

.works-card--mini {
  width: 360px;
  height: 330px;
}

.works-card__media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  border-radius: 20px;
}

.works-card--wide .works-card__media {
  height: 300px;
}

.works-card--mini .works-card__media {
  height: 260px;
}

.works-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.works-card__tag {
  position: absolute;
  left: 15px;
  bottom: 15px;
  z-index: 1;
  padding: 14.5px 20px;
  border-radius: 15px;
  border: 1px solid var(--border);
  background: rgb(14 14 14 / 72%);
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.3;
  white-space: nowrap;
  text-shadow: none;
}

.works-card--wide .works-card__tag {
  background: rgb(14 14 14 / 62%);
}

.works-card__caption {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0;
  font-family: "Manrope", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
  color: #fff;
}

.works-card--wide .works-card__caption {
  top: 315px;
  right: 10px;
}

.works-card--mini .works-card__caption {
  top: 275px;
}

.works__all {
  position: absolute;
  width: 200px;
  height: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #411516;
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
}

.works__all span {
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.2;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
}

.works__feature {
  width: calc(100% - 100px);
  max-width: 1400px;
  height: 400px;
  margin: 82px auto 0;
  overflow: hidden;
  border: 0;
  border-radius: 24px;
  background: #111;
}

.works__feature img {
  display: block;
  width: calc(100% + 6px);
  height: calc(100% + 380px);
  margin-left: -3px;
  object-fit: cover;
  object-position: center;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.start-help {
  position: relative;
  width: calc(100% - 100px);
  max-width: 1400px;
  height: 470px;
  margin: 120px auto 0;
  overflow: hidden;
  padding: 86px 50px 70px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: #101010;
  isolation: isolate;
}

.start-help::before,
.start-help::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
}

.start-help::before {
  z-index: -2;
  inset: 0;
  background: url("assets/images/carsound-magnitola-kharkiv.jpg") center / 100% auto no-repeat;
  filter: brightness(.58) saturate(.9);
  opacity: 1;
  transform: none;
}

.start-help::after {
  z-index: -1;
  background:
    linear-gradient(90deg, rgb(8 8 8 / 98%) 0%, rgb(8 8 8 / 88%) 42%, rgb(8 8 8 / 48%) 72%, rgb(8 8 8 / 82%) 100%),
    radial-gradient(circle at 58% 45%, rgb(236 15 19 / 26%), transparent 30%);
}

.start-help__content {
  position: relative;
  z-index: 1;
  width: min(860px, 100%);
}

.start-help h2 {
  margin: 0;
  font-family: "Oswald", sans-serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 1.35;
  text-transform: uppercase;
}

.start-help h2 span {
  display: block;
  margin-bottom: 2px;
  color: var(--red);
}

.start-help p {
  width: min(720px, 100%);
  margin: 30px 0 0;
  color: rgb(255 255 255 / 64%);
  font-family: "Manrope", sans-serif;
  font-size: 18px;
  line-height: 1.45;
}

.start-help__button {
  position: relative;
  display: flex;
  width: 460px;
  height: 70px;
  align-items: center;
  margin-top: 31px;
  padding-right: 78px;
  padding-left: 36px;
  color: #fff;
  background: var(--red);
  border-radius: 18px;
  font-family: "Oswald", sans-serif;
  font-size: 16px;
  line-height: 1.25;
  white-space: nowrap;
  text-transform: uppercase;
}

.start-help__button span:last-child {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  border-radius: 14px;
  background: var(--red-dark);
}

.start-help__button img {
  width: 18px;
  height: 16px;
}

.start-help__marquee {
  position: absolute;
  top: -60px;
  right: 50px;
  z-index: 1;
  display: grid;
  width: 410px;
  height: 610px;
  grid-template-columns: repeat(2, 200px);
  gap: 10px;
  overflow: hidden;
  pointer-events: none;
}

.start-help__lane {
  overflow: hidden;
}

.start-help__track {
  display: grid;
  gap: 10px;
  will-change: transform;
}

.start-help__lane--up .start-help__track {
  animation: start-help-marquee-up 18s linear infinite;
}

.start-help__lane--down .start-help__track {
  animation: start-help-marquee-down 20s linear infinite;
}

.start-help__logo {
  display: grid;
  width: 200px;
  height: 90px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 12px;
  background: rgb(255 255 255 / 3.5%);
  backdrop-filter: blur(8px);
}

.start-help__logo img {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: contain;
  image-rendering: auto;
  filter: none;
}

.brand-logo {
  position: relative;
  display: grid;
  place-items: center;
  color: #fff;
  font-family: "Oswald", sans-serif;
  line-height: 1;
  text-transform: uppercase;
}

.brand-logo--mercedes,
.brand-logo--bmw,
.brand-logo--vw {
  width: 66px;
  height: 66px;
  border: 4px solid #fff;
  border-radius: 50%;
}

.brand-logo--mercedes::before {
  position: absolute;
  color: #fff;
  content: "✦";
  font-family: Georgia, serif;
  font-size: 54px;
  line-height: 1;
  transform: translateY(-1px);
}

.brand-logo--mercedes::after {
  content: none;
}

.brand-logo--bmw {
  background:
    radial-gradient(circle, transparent 0 24px, #fff 25px 27px, transparent 28px),
    conic-gradient(#fff 0 25%, #2a8dd8 0 50%, #fff 0 75%, #2a8dd8 0);
  border-color: #fff;
}

.brand-logo--bmw::before {
  position: absolute;
  inset: -11px;
  display: grid;
  place-items: start center;
  color: #fff;
  content: "BMW";
  font-family: "Manrope", sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
}

.brand-logo--audi {
  width: 128px;
  height: 54px;
}

.brand-logo--audi::before,
.brand-logo--audi::after {
  position: absolute;
  top: 10px;
  width: 38px;
  height: 30px;
  border: 4px solid #fff;
  border-radius: 50%;
  content: "";
}

.brand-logo--audi::before {
  left: 13px;
  box-shadow: 28px 0 0 -4px #111, 28px 0 0 0 #fff;
}

.brand-logo--audi::after {
  right: 13px;
  box-shadow: -28px 0 0 -4px #111, -28px 0 0 0 #fff;
}

.brand-logo--vw {
  font-size: 31px;
  font-weight: 500;
  letter-spacing: -2px;
}

.brand-logo--ford,
.brand-logo--porsche,
.brand-logo--toyota,
.brand-logo--rolls {
  color: #fff;
  font-weight: 500;
  text-shadow: 0 0 12px rgb(255 255 255 / 30%);
}

.brand-logo--ford {
  width: 112px;
  height: 46px;
  border: 3px solid #fff;
  border-radius: 50%;
  font-family: Georgia, serif;
  font-size: 30px;
  font-style: italic;
  text-transform: none;
}

.brand-logo--porsche {
  font-size: 25px;
  letter-spacing: .4px;
  text-transform: none;
}

.brand-logo--toyota {
  font-size: 22px;
  letter-spacing: 1px;
}

.brand-logo--toyota::before {
  display: block;
  width: 62px;
  height: 22px;
  margin: 0 auto 5px;
  border: 4px solid #fff;
  border-radius: 50%;
  content: "";
}

.brand-logo--rolls {
  font-family: Georgia, serif;
  font-size: 44px;
  letter-spacing: -7px;
}

@keyframes start-help-marquee-up {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(0, calc(-50% - 5px), 0);
  }
}

@keyframes start-help-marquee-down {
  from {
    transform: translate3d(0, calc(-50% - 5px), 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.contact {
  position: relative;
  width: 1500px;
  max-width: 1500px;
  height: 926px;
  margin: 135px auto 0;
  overflow: hidden;
}

.contact__info {
  position: absolute;
  top: 0;
  left: 50px;
  width: 700px;
  height: 396px;
}

.contact h2 {
  width: 660px;
  margin: 0;
  font-family: "Oswald", sans-serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 1.55;
  text-transform: uppercase;
}

.contact h2 span {
  color: var(--red);
}

.contact__rows {
  position: absolute;
  top: 176px;
  left: 0;
  width: 700px;
  height: 220px;
  border-right: 1px solid var(--border);
}

.contact__row {
  display: grid;
  grid-template-columns: 142px minmax(0, 1fr);
  min-height: 105px;
  align-items: stretch;
  border-bottom: 1px solid var(--border);
}

.contact__row + .contact__row {
  min-height: 114px;
}

.contact__icon {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-left: 0;
  border-right: 1px solid var(--border);
  color: #fff;
  font-family: "Oswald", sans-serif;
  font-size: 20px;
  line-height: 1.2;
  text-transform: uppercase;
}

.contact__icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(19%) sepia(96%) saturate(4891%) hue-rotate(352deg) brightness(104%) contrast(93%);
}

.contact__data {
  display: grid;
  align-content: center;
  gap: 11px;
  padding-left: 30px;
}

.contact__data p {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 22px;
  margin: 0;
  color: rgb(255 255 255 / 68%);
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  line-height: 1.25;
}

.contact__data strong {
  color: #fff;
  font-weight: 500;
}

.contact__data a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.contact__data a:hover,
.contact__data a:focus-visible {
  color: var(--red);
}

.contact__form {
  position: absolute;
  top: 18px;
  right: 50px;
  display: grid;
  width: 620px;
  gap: 6px;
}

.contact__form label {
  position: relative;
  display: block;
}

.contact__form label span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.contact__form input,
.contact__form select {
  width: 100%;
  height: 65px;
  padding: 0 20px;
  color: #fff;
  background: #111;
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 20px;
  outline: 0;
  font-family: "Manrope", sans-serif;
  font-size: 16px;
}

.contact__form input::placeholder {
  color: rgb(255 255 255 / 40%);
}

.contact__form input:focus,
.contact__form select:focus {
  border-color: rgb(236 15 19 / 55%);
  background: #171717;
}

.contact__select span {
  display: none;
}

.contact__form select {
  appearance: none;
  color: rgb(255 255 255 / 48%);
  background-image:
    linear-gradient(45deg, transparent 50%, rgb(255 255 255 / 70%) 50%),
    linear-gradient(135deg, rgb(255 255 255 / 70%) 50%, transparent 50%);
  background-position:
    calc(100% - 38px) 28px,
    calc(100% - 31px) 28px;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}

.contact__submit {
  position: relative;
  display: flex;
  width: 100%;
  height: 70px;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
  padding: 0 88px 0 30px;
  cursor: pointer;
  color: #fff;
  background: var(--red);
  border: 0;
  border-radius: 18px;
  font-family: "Oswald", sans-serif;
  font-size: 20px;
  line-height: 1.25;
  text-transform: uppercase;
}

.contact__submit span:last-child {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  border-radius: 14px;
  background: var(--red-dark);
}

.contact__submit img {
  width: 20px;
  height: 18px;
}

.contact__map {
  position: absolute;
  z-index: 0;
  left: 50px;
  bottom: 0;
  width: 1400px;
  height: 500px;
  overflow: hidden;
  border: 6px solid var(--border);
  border-radius: 30px;
  background: #0b0f14;
  isolation: isolate;
}

.contact__leaflet {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  background: #0b0f14;
}

.contact__maps-logo {
  position: absolute;
  z-index: 5;
  top: 28px;
  right: 32px;
  width: 190px;
  height: auto;
  filter: brightness(0) invert(1);
  opacity: 0.94;
  pointer-events: none;
}

.contact__map-city {
  position: absolute;
  z-index: 5;
  left: 34px;
  bottom: 34px;
  color: rgb(255 255 255 / 18%);
  font-family: "Oswald", sans-serif;
  font-size: 72px;
  font-weight: 400;
  line-height: 0.86;
  letter-spacing: 0;
  text-transform: uppercase;
  pointer-events: none;
}

.contact__leaflet .leaflet-control-zoom {
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 12px;
  box-shadow: 0 16px 34px rgb(0 0 0 / 28%);
}

.contact__leaflet .leaflet-control-zoom a {
  width: 108px;
  height: 108px;
  border: 0;
  background: rgb(18 18 18 / 90%);
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-size: 60px;
  line-height: 108px;
}

.contact__leaflet .leaflet-control-zoom a:hover {
  background: var(--red);
  color: #fff;
}

.contact__leaflet .leaflet-control-attribution {
  background: rgb(10 10 10 / 70%);
  color: rgb(255 255 255 / 46%);
  font-family: "Manrope", sans-serif;
  font-size: 10px;
}

.contact__leaflet .leaflet-control-attribution a {
  color: rgb(255 255 255 / 66%);
}

.carsound-map-dot-icon {
  background: transparent;
  border: 0;
}

.carsound-map-dot {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 8px rgb(236 15 19 / 20%), 0 0 30px rgb(236 15 19 / 72%);
}

.carsound-map-dot::after {
  position: absolute;
  inset: -14px;
  border: 1px solid rgb(236 15 19 / 52%);
  border-radius: 50%;
  content: "";
  animation: contact-pin-pulse 1.9s ease-out infinite;
}

.carsound-map-tooltip {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  cursor: pointer;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 12px;
  background: rgb(12 12 12 / 88%);
  box-shadow: 0 18px 40px rgb(0 0 0 / 36%);
  color: #fff;
  font-family: "Manrope", sans-serif;
  pointer-events: auto;
}

.carsound-map-tooltip::before {
  display: none;
}

.carsound-map-tooltip strong {
  font-family: "Oswald", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.1;
  text-transform: uppercase;
}

.carsound-map-tooltip em {
  color: rgb(255 255 255 / 72%);
  font-size: 13px;
  font-style: normal;
  line-height: 1.25;
}

.carsound-map-marker {
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  transform: translateY(-50%);
}

.carsound-map-marker--left {
  flex-direction: row-reverse;
  transform: translate(-100%, -50%);
}

.carsound-map-marker__dot {
  position: relative;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 8px rgb(236 15 19 / 20%), 0 0 30px rgb(236 15 19 / 72%);
}

.carsound-map-marker__dot::after {
  position: absolute;
  inset: -14px;
  border: 1px solid rgb(236 15 19 / 52%);
  border-radius: 50%;
  content: "";
  animation: contact-pin-pulse 1.9s ease-out infinite;
}

.carsound-map-marker__label {
  display: grid;
  min-width: 168px;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 12px;
  background: rgb(12 12 12 / 88%);
  box-shadow: 0 18px 40px rgb(0 0 0 / 36%);
  backdrop-filter: blur(10px);
}

.carsound-map-marker__label strong {
  font-family: "Oswald", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.1;
  text-transform: uppercase;
}

.carsound-map-marker__label em {
  color: rgb(255 255 255 / 72%);
  font-family: "Manrope", sans-serif;
  font-size: 13px;
  font-style: normal;
  line-height: 1.25;
}

.carsound-map-marker:hover .carsound-map-marker__label,
.carsound-map-marker:focus-visible .carsound-map-marker__label {
  border-color: rgb(236 15 19 / 48%);
  background: rgb(18 18 18 / 94%);
}

.contact__pin {
  position: absolute;
  z-index: 2;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: #fff;
  text-decoration: none;
  transform: translate(-50%, -50%);
}

.contact__pin--office {
  left: 46%;
  top: 42%;
}

.contact__pin--detailing {
  left: 15.5%;
  top: 64%;
}

.contact__pin--interior {
  left: 18.5%;
  top: 68%;
}

.contact__pin-dot {
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 8px rgb(236 15 19 / 20%), 0 0 28px rgb(236 15 19 / 70%);
}

.contact__pin-dot::after {
  position: absolute;
  inset: -13px;
  border: 1px solid rgb(236 15 19 / 55%);
  border-radius: 50%;
  content: "";
  animation: contact-pin-pulse 1.9s ease-out infinite;
}

.contact__pin-card {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  display: grid;
  min-width: 190px;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 12px;
  background: rgb(12 12 12 / 88%);
  box-shadow: 0 18px 40px rgb(0 0 0 / 36%);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-50%, 8px, 0);
  transition: opacity 180ms ease, transform 180ms ease;
}

.contact__pin-card strong {
  font-family: "Oswald", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.1;
  text-transform: uppercase;
}

.contact__pin-card em {
  color: rgb(255 255 255 / 72%);
  font-family: "Manrope", sans-serif;
  font-size: 13px;
  font-style: normal;
  line-height: 1.25;
}

.contact__pin:hover,
.contact__pin:focus-visible {
  z-index: 4;
}

.contact__pin:hover .contact__pin-card,
.contact__pin:focus-visible .contact__pin-card {
  opacity: 1;
  transform: translate3d(-50%, 0, 0);
}

.site-footer {
  position: relative;
  width: 100%;
  max-width: 1500px;
  height: 421px;
  margin: 60px auto 0;
  overflow: hidden;
  background: #101010;
  border-top: 1px solid #262626;
  border-bottom: 1px solid #262626;
}

.site-footer::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 446px;
  width: 1px;
  background: #262626;
  content: "";
}

.site-footer a {
  color: inherit;
  text-decoration: none;
}

.site-footer a:not(.site-footer__logo):not(.site-footer__button):not(.site-footer__socials a) {
  position: relative;
  transition: color 180ms ease, opacity 180ms ease;
}

.site-footer a:not(.site-footer__logo):not(.site-footer__button):not(.site-footer__socials a):not(.footer-roll)::after {
  position: absolute;
  right: 0;
  bottom: -4px;
  left: 0;
  height: 1px;
  background: var(--red);
  opacity: 0;
  transform: scaleX(.35);
  transform-origin: left center;
  transition: opacity 180ms ease, transform 180ms ease;
  content: "";
}

.site-footer__brand {
  position: absolute;
  top: 24px;
  left: 50px;
  width: 344px;
}

.site-footer__logo {
  position: relative;
  display: block;
  width: 238px;
  height: 86px;
  overflow: hidden;
}

.site-footer__logo img {
  position: absolute;
  top: -38.25%;
  left: -26.15%;
  width: 150.28%;
  height: 183.67%;
  max-width: none;
  object-fit: contain;
}

.site-footer__text {
  width: 344px;
  margin: 20px 0 0;
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.3;
}

.site-footer__partner {
  display: flex;
  width: 238px;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.3;
  white-space: nowrap;
}

.site-footer__partner img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.site-footer__button {
  position: absolute;
  top: 243px;
  left: 50px;
  display: flex;
  width: 340px;
  height: 70px;
  align-items: center;
  overflow: hidden;
  border-radius: 20px;
  background: var(--red);
  color: #fff;
  font-family: "Oswald", sans-serif;
  font-size: 20px;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}

.site-footer__button > span:first-child {
  flex: 1;
  min-width: 0;
  padding-left: 10px;
}

.site-footer__button > span:last-child {
  display: grid;
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
  place-items: center;
  margin-right: 10px;
  border-radius: 15px;
  background: var(--red-dark);
}

.site-footer__button img {
  width: 20px;
  height: 18px;
}

.site-footer__policy {
  position: absolute;
  top: 361px;
  left: 50px;
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

.site-footer h2 {
  margin: 0 0 30px;
  color: rgb(255 255 255 / 60%);
  font-family: "Oswald", sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.3;
  text-transform: uppercase;
}

.site-footer__services {
  position: absolute;
  top: 40px;
  left: 503px;
  width: 374px;
}

.site-footer__services div {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(5, auto);
  gap: 10px 30px;
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-size: 18px;
  line-height: normal;
  white-space: nowrap;
}

.site-footer__info {
  position: absolute;
  top: 39px;
  left: 937px;
  width: 127px;
}

.site-footer__info div,
.site-footer__addresses div {
  display: grid;
  gap: 10px;
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-size: 18px;
  line-height: normal;
  white-space: nowrap;
}

.site-footer__addresses {
  position: absolute;
  top: 39px;
  left: 1124px;
  width: 326px;
}

.site-footer__addresses p {
  margin: 0;
}

.site-footer__links {
  position: absolute;
  top: 361px;
  left: 503px;
  display: flex;
  gap: 50px;
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

.site-footer__socials {
  position: absolute;
  top: 320px;
  left: 1151px;
  display: flex;
  gap: 20px;
}

.site-footer__socials a {
  display: grid;
  width: 60px;
  height: 60px;
  place-items: center;
  overflow: hidden;
  border: 1px solid #262626;
  border-radius: 15px;
  background: rgb(255 255 255 / 5%);
  backdrop-filter: blur(2.5px);
}

.site-footer__socials img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  transition: transform 180ms ease;
}

.site-footer__socials a:nth-child(2) img {
  width: 30px;
}

.site-footer__socials a:nth-child(3) img {
  width: 40px;
  height: 41px;
}

@keyframes contact-pin-pulse {
  0% {
    opacity: .9;
    transform: scale(.65);
  }

  100% {
    opacity: 0;
    transform: scale(1.45);
  }
}

@media (min-width: 1101px) {
  .reveal-on-scroll {
    opacity: 0;
    transition: opacity 480ms ease;
    transition-delay: var(--reveal-delay, 0ms);
  }

  .reveal-on-scroll.is-revealed {
    opacity: 1;
  }

  .hero__primary,
  .hero__icon-button,
  .hero__address,
  .services__tab,
  .service-card__actions a,
  .services__all,
  .complex__primary,
  .complex__secondary,
  .complex__slider-controls button,
  .works__all,
  .start-help__button,
  .contact__submit,
  .site-footer__button,
  .site-footer__socials a,
  .floating-header__menu {
    transition: transform 180ms ease, filter 180ms ease, background-color 180ms ease, border-color 180ms ease;
  }

  .site-footer__logo {
    transition: opacity 180ms ease, filter 180ms ease;
  }

  .floating-header__logo,
  .desktop-menu__logo,
  .hero__brand {
    transition: opacity 180ms ease, filter 180ms ease, transform 180ms ease;
  }

  .floating-header__logo:hover,
  .desktop-menu__logo:hover,
  .hero__brand:hover {
    opacity: .86;
    filter: brightness(1.12);
  }

  .site-footer__logo:hover {
    opacity: .82;
    filter: brightness(1.15);
  }

  .site-footer a:not(.site-footer__logo):not(.site-footer__button):not(.site-footer__socials a):hover {
    color: #fff;
  }

  .site-footer a:not(.site-footer__logo):not(.site-footer__button):not(.site-footer__socials a):not(.footer-roll):hover::after {
    opacity: 1;
    transform: scaleX(1);
  }

  .hero__primary:hover,
  .complex__primary:hover,
  .complex__secondary:hover,
  .start-help__button:hover,
  .contact__submit:hover,
  .site-footer__button:hover {
    transform: translateY(-3px);
    filter: brightness(1.08);
  }

  .hero__icon-button:hover,
  .hero__address:hover,
  .service-card__actions a:hover,
  .works__all:hover,
  .complex__slider-controls button:hover,
  .site-footer__socials a:hover,
  .floating-header__menu:hover {
    transform: translateY(-2px) scale(1.03);
    filter: brightness(1.12);
  }

  .site-footer__socials a:hover {
    border-color: rgb(255 23 23 / 70%);
    background: rgb(255 23 23 / 14%);
  }

  .site-footer__socials a:hover img {
    transform: scale(1.08);
  }

  .services__tab:hover {
    transform: translateY(-2px);
  }

  .hero__primary:active,
  .hero__icon-button:active,
  .hero__address:active,
  .services__tab:active,
  .service-card__actions a:active,
  .works__all:active,
  .start-help__button:active,
  .contact__submit:active,
  .site-footer__button:active,
  .site-footer__socials a:active,
  .complex__primary:active,
  .complex__secondary:active,
  .complex__slider-controls button:active,
  .floating-header__menu:active {
    transform: translateY(0) scale(.97);
  }

  .services__all:hover {
    transform: translateX(-50%) translateY(-3px);
    filter: brightness(1.08);
  }

  .services__all:active {
    transform: translateX(-50%) scale(.97);
  }

}

@media (max-width: 1350px) {
  .complex {
    height: auto;
    padding: 40px;
  }

  .complex__content,
  .complex__media {
    position: relative;
    inset: auto;
    width: 100%;
  }

  .complex__description,
  .complex__price {
    width: 100%;
  }

  .complex__actions {
    position: relative;
    margin-top: 35px;
  }

  .complex__media {
    height: 600px;
    margin-top: 40px;
  }

  .start-help {
    height: 500px;
  }

  .start-help__content {
    width: min(700px, calc(100% - 420px));
  }

  .start-help h2 {
    font-size: 43px;
  }

  .start-help__marquee {
    right: 34px;
  }

}

@media (max-width: 1100px) {
  .hero {
    height: auto;
    min-height: 800px;
  }

  .hero__copy {
    top: 180px;
    width: calc(100% - 94px);
  }

  .hero h1 {
    max-width: 720px;
    font-size: 72px;
  }

  .hero__services {
    display: none;
  }

  .about {
    width: calc(100% - 40px);
    height: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, 250px);
    gap: 20px;
  }

  .about > * {
    grid-column: auto;
    grid-row: auto;
  }

  .about__image--grille {
    grid-column: 2;
    grid-row: 1;
  }

  .about__stat--red {
    grid-column: 1;
    grid-row: 2;
  }

  .about__atelier {
    grid-column: 2;
    grid-row: 2;
  }

  .about__llumar {
    grid-column: 1;
    grid-row: 3;
  }

  .about__image--console {
    grid-column: 2;
    grid-row: 3;
  }

  .section-divider {
    width: calc(100% - 40px);
    margin-top: 60px;
  }

  .services {
    height: auto;
    padding: 0 20px 90px;
  }

  .services__header,
  .services__tabs,
  .services__list,
  .services__all {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    transform: none;
  }

  .services__header {
    width: 100%;
  }

  .services__tabs {
    justify-content: flex-start;
    margin-top: 35px;
    overflow-x: auto;
    padding-bottom: 8px;
  }

  .services__list {
    margin-top: 30px;
    overflow-x: auto;
    padding-bottom: 10px;
  }

  .services__all {
    margin: 30px auto 0;
  }

  .start-help {
    width: calc(100% - 40px);
    height: auto;
    min-height: 760px;
    padding: 56px 34px 340px;
  }

  .start-help__content {
    width: 100%;
  }

  .start-help h2 {
    max-width: 760px;
    font-size: 44px;
    line-height: 1.2;
  }

  .start-help__marquee {
    top: auto;
    right: 34px;
    bottom: -48px;
    left: 34px;
    width: auto;
    height: 330px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .start-help__logo {
    width: 100%;
  }

  .contact {
    width: calc(100% - 40px);
    height: auto;
    max-width: none;
    display: grid;
    gap: 30px;
  }

  .contact__info,
  .contact__rows,
  .contact__form,
  .contact__map {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    height: auto;
  }

  .contact h2 {
    width: min(760px, 100%);
  }

  .contact__info {
    display: grid;
    gap: 34px;
  }

  .contact__rows {
    border-right: 0;
  }

  .contact__map {
    height: 420px;
  }

  .contact__pin-card {
    min-width: 150px;
    padding: 9px 10px;
  }

}

@media (max-width: 720px) {
  html,
  body {
    overflow-x: hidden;
  }

  .page-shell {
    width: 100%;
    max-width: none;
    padding-top: 0;
  }

  .hero {
    width: 100%;
    height: 704px;
    min-height: 704px;
    border-width: 4px;
    border-radius: 20px 20px 0 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .hero__background img {
    left: -3px;
    width: 366px;
    height: 700px;
    object-fit: cover;
    object-position: center top;
  }

  .hero__brand {
    top: 6px;
    left: 6px;
    width: 120px;
    height: 56px;
    border-radius: 15px 0 0 15px;
    border-right: 0;
  }

  .hero__brand-crop {
    width: 94px;
    height: 34px;
  }

  .hero__brand-crop img {
    top: -13px;
    left: -25px;
    width: 141px;
    height: auto;
  }

  .hero__location {
    top: 6px;
    right: auto;
    left: 126px;
    width: 220px;
    height: 56px;
    padding: 5px 6px 5px 8px;
    border-radius: 0 15px 15px 0;
    border-left: 0;
  }

  .hero__address {
    display: flex;
    width: 120px;
    gap: 5px;
    font-size: 13px;
    line-height: 1.2;
    white-space: normal;
  }

  .hero__address img {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
  }

  .hero__address span {
    width: 81px;
  }

  .hero__menu {
    width: 90px;
    height: 44px;
    gap: 5px;
    border-radius: 12px;
    font-size: 16px;
  }

  .hero__menu span {
    display: inline;
  }

  .hero__menu img {
    width: 20px;
    height: 20px;
  }

  .hero__copy {
    top: 121px;
    left: 6px;
    width: 340px;
  }

  .hero__eyebrow {
    margin-bottom: 10px;
    font-size: 18px;
    line-height: 1.5;
    text-transform: uppercase;
  }

  .hero h1 {
    width: 442px;
    max-width: none;
    font-size: 38px;
    line-height: 1.3;
    transform: scaleX(.77);
    transform-origin: left top;
  }

  .hero__lead {
    width: 316px;
    margin-top: 24px;
    font-size: 16px;
    line-height: 1.3;
  }

  .hero__services {
    top: 404px;
    right: auto;
    left: 6px;
    display: flex;
    width: 340px;
    gap: 15px;
    font-size: 14px;
    font-weight: 500;
  }

  .hero__services-mark {
    width: 15px;
    height: 15px;
  }

  .hero__services-list {
    display: grid;
    width: 100%;
    grid-template-columns: max-content max-content;
    justify-content: space-between;
    gap: 12px 14px;
  }

  .hero__services-list a {
    line-height: 1.2;
  }

  .hero__services-list a:nth-child(1) { grid-column: 1; grid-row: 1; }
  .hero__services-list a:nth-child(2) { grid-column: 1; grid-row: 2; }
  .hero__services-list a:nth-child(3) { grid-column: 1; grid-row: 3; }
  .hero__services-list a:nth-child(4) { grid-column: 1; grid-row: 4; }
  .hero__services-list a:nth-child(5) { grid-column: 2; grid-row: 1; }
  .hero__services-list a:nth-child(6) { grid-column: 2; grid-row: 2; }
  .hero__services-list a:nth-child(7) { grid-column: 2; grid-row: 3; }
  .hero__services-list a:nth-child(8) { grid-column: 2; grid-row: 4; }

  .hero__actions {
    display: grid;
    grid-template-columns: 202px 56px 56px;
    bottom: 26px;
    left: 6px;
    width: 340px;
    height: 72px;
    gap: 5px;
    padding: 7px;
    transform: none;
    border-radius: 20px;
  }

  .hero__primary {
    width: 100%;
    min-width: 0;
    height: 56px;
    flex: none;
    justify-content: center;
    padding-right: 5px;
    border-radius: 15px;
    font-size: 16px;
  }

  .hero__primary > span:first-child {
    flex: 1;
    white-space: nowrap;
  }

  .hero__primary-icon {
    width: 46px;
    height: 46px;
    border-radius: 15px;
  }

  .hero__icon-button {
    width: 56px;
    height: 56px;
    flex: none;
    border-radius: 15px;
  }


  .address-popup {
    position: fixed;
    z-index: 4000;
    inset: 0;
    display: grid;
    place-items: stretch;
    height: 100dvh;
    overflow: hidden;
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    background: rgb(5 5 5 / 78%);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    backdrop-filter: blur(10px);
    transition: opacity 200ms ease, visibility 0s linear 200ms;
  }

  body.address-popup-is-open .address-popup {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition-delay: 0s;
  }

  .address-popup__panel {
    position: relative;
    width: 100%;
    height: calc(100dvh - max(16px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 48px 8px 8px;
    border: 1px solid #262626;
    border-radius: 20px;
    background: #0e0e0e;
    box-sizing: border-box;
  }

  .address-popup__close {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    height: 36px;
    align-items: center;
    gap: 5px;
    padding: 0 12px;
    border: 0;
    border-radius: 12px;
    color: #0e0e0e;
    background: #fff;
    font-family: "Oswald", sans-serif;
    font-size: 14px;
    text-transform: uppercase;
  }

  .address-popup__close span:first-child {
    font-family: "Manrope", sans-serif;
    font-size: 22px;
    line-height: 1;
  }

  .address-popup__eyebrow {
    margin: 0 0 3px;
    color: var(--red);
    font-family: "Oswald", sans-serif;
    font-size: 12px;
    line-height: 1;
    text-transform: uppercase;
  }

  .address-popup h2 {
    max-width: calc(100% - 104px);
    margin: 0 0 6px;
    color: #fff;
    font-family: "Oswald", sans-serif;
    font-size: clamp(22px, 6vw, 27px);
    font-weight: 400;
    line-height: 1.02;
    text-transform: uppercase;
  }

  .address-popup__body {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    flex: 1;
    min-height: 0;
    gap: 6px;
  }

  .address-popup__content {
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto;
    gap: 5px;
  }

  .address-popup__list {
    display: grid;
    gap: 4px;
  }

  .address-popup__list article {
    position: relative;
    padding: 5px 8px 5px 14px;
    border: 1px solid #262626;
    border-radius: 10px;
    background: rgb(255 255 255 / 4%);
  }

  .address-popup__list article::before {
    position: absolute;
    top: 7px;
    bottom: 7px;
    left: 0;
    width: 3px;
    border-radius: 999px;
    background: var(--red);
    content: "";
  }

  .address-popup__list span {
    display: block;
    margin-bottom: 1px;
    color: #fff;
    font-family: "Oswald", sans-serif;
    font-size: clamp(14px, 4vw, 17px);
    line-height: 1;
    text-transform: uppercase;
  }

  .address-popup__list strong {
    color: rgb(255 255 255 / 76%);
    font-size: clamp(9px, 2.7vw, 11px);
    font-weight: 500;
    line-height: 1.08;
  }

  .address-popup__phone {
    display: flex;
    width: 100%;
    height: 34px;
    margin-top: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--red);
    border-radius: 10px;
    color: #fff;
    background: rgb(255 23 23 / 14%);
    font-family: "Oswald", sans-serif;
    font-size: 18px;
    text-decoration: none;
  }

  .address-popup__map {
    position: relative;
    height: auto;
    min-height: 0;
    overflow: hidden;
    border: 3px solid var(--border);
    border-radius: 14px;
    background: #0b0f14;
  }

  .address-popup__leaflet {
    width: 100%;
    height: 100%;
    min-height: 100%;
    background: #0b0f14;
  }

  .address-popup__leaflet .leaflet-control-zoom {
    transform: scale(.7);
    transform-origin: top left;
  }

  .address-popup__leaflet .carsound-map-tooltip {
    max-width: 118px;
    padding: 6px 8px;
    white-space: normal;
  }

  .address-popup__leaflet .carsound-map-tooltip strong {
    font-size: 12px;
    line-height: 1.05;
  }

  .address-popup__leaflet .carsound-map-tooltip em {
    font-size: 10px;
  }

  @media (max-height: 760px) {
    .address-popup__panel {
      padding-top: 44px;
      padding-bottom: 6px;
    }

    .address-popup__close {
      height: 32px;
      border-radius: 9px;
      font-size: 12px;
    }

    .address-popup__eyebrow {
      margin-bottom: 2px;
      font-size: 10px;
    }

    .address-popup h2 {
      max-width: calc(100% - 92px);
      margin-bottom: 4px;
      font-size: 20px;
      line-height: 1;
    }

    .address-popup__body {
      gap: 4px;
    }

    .address-popup__list {
      gap: 3px;
    }

    .address-popup__list article {
      padding-top: 4px;
      padding-bottom: 4px;
      border-radius: 9px;
    }

    .address-popup__list span {
      font-size: 13px;
    }

    .address-popup__list strong {
      font-size: 9px;
      line-height: 1.05;
    }

    .address-popup__phone {
      height: 30px;
      margin-top: 0;
      font-size: 16px;
      border-radius: 9px;
    }

    .address-popup__map {
      border-width: 3px;
      border-radius: 12px;
    }
  }

  .start-help {
    width: calc(100% - 36px);
    min-height: 720px;
    margin-top: 70px;
    padding: 42px 24px 320px;
    border-radius: 18px;
  }

  .start-help h2 {
    font-size: 34px;
    line-height: 1.18;
  }

  .start-help p {
    margin-top: 24px;
    font-size: 16px;
  }

  .start-help__button {
    width: 100%;
    height: 66px;
    margin-top: 28px;
    padding-right: 72px;
    padding-left: 22px;
    font-size: 18px;
  }

  .start-help__button span:last-child {
    width: 46px;
    height: 46px;
  }

  .start-help__marquee {
    right: 24px;
    bottom: -54px;
    left: 24px;
    height: 300px;
  }

  .start-help__logo {
    height: 78px;
  }

  .start-help__logo span {
    font-size: 22px;
  }

  .contact__map {
    height: 360px;
  }

  .carsound-map-marker__label {
    min-width: 132px;
    padding: 8px 9px;
  }

  .carsound-map-marker__label strong {
    font-size: 15px;
  }

  .carsound-map-marker__label em {
    font-size: 11px;
  }

  .carsound-map-tooltip {
    padding: 8px 9px;
  }

  .carsound-map-tooltip strong {
    font-size: 15px;
  }

  .carsound-map-tooltip em {
    font-size: 11px;
  }

  .contact__pin {
    width: 40px;
    height: 40px;
  }


  .contact__pin-card {
    display: none;
  }

  .about {
    width: calc(100% - 36px);
    margin-top: 24px;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6, 240px);
  }

  .about > * {
    grid-column: 1;
    grid-row: auto;
  }

  .about__image--grille {
    grid-row: 2;
  }

  .about__stat--red {
    grid-row: 3;
  }

  .about__atelier {
    grid-row: 4;
  }

  .about__llumar {
    grid-row: 5;
  }

  .about__image--console {
    grid-row: 6;
  }

  .about__atelier-copy {
    right: 20px;
    left: auto;
  }

  .about__llumar-copy {
    right: 20px;
    width: auto;
  }

  .about__llumar-copy h2 {
    white-space: normal;
  }

  .section-divider {
    width: calc(100% - 36px);
    height: 70px;
    margin-top: 45px;
  }

  .services {
    margin-top: 24px;
    padding-inline: 18px;
  }

  .services__header h2 {
    font-size: 42px;
  }

  .service-card {
    width: min(450px, calc(100vw - 52px));
    flex-basis: min(450px, calc(100vw - 52px));
  }

  .service-card > .service-card__image,
  .service-card__media {
    width: calc(100% - 18px);
  }

  .service-card__media .service-card__image {
    width: 100%;
  }

  .service-card__heading p {
    width: 50%;
  }

  .service-card__actions {
    grid-template-columns: 44% 56%;
  }

  .complex {
    width: calc(100% - 36px);
    margin-top: 60px;
    padding: 24px;
    border-width: 3px;
    border-radius: 22px;
  }

  .complex__title {
    font-size: 39px;
  }

  .complex__description {
    margin-top: 18px;
    font-size: 16px;
  }

  .complex__package {
    margin-top: 24px;
  }

  .complex__chip-row {
    flex-wrap: wrap;
  }

  .complex__chip-row span {
    min-height: 42px;
    padding: 10px 12px;
    font-size: 14px;
  }

  .complex__price {
    height: auto;
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
    margin-top: 24px;
    padding: 16px 18px;
  }

  .complex__price-value {
    flex-basis: auto;
  }

  .complex__price p br {
    display: none;
  }

  .complex__actions {
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
  }

  .complex__primary,
  .complex__secondary {
    width: 100%;
  }

  .complex__media {
    height: 440px;
    margin-top: 24px;
  }

  .complex__media > p {
    bottom: 22px;
    left: 20px;
    font-size: 28px;
  }

  .complex__slider-controls {
    right: 14px;
    bottom: 14px;
    gap: 10px;
  }

  .complex__slider-controls button {
    width: 56px;
    height: 56px;
    border-radius: 15px;
  }
}

@media (max-width: 430px) {
  .hero__actions {
    gap: 5px;
    padding: 7px;
  }

  .hero__primary {
    font-size: 16px;
  }

  .hero__primary-icon {
    display: grid;
  }

  .hero__icon-button {
    width: 56px;
    height: 56px;
    flex-basis: 56px;
  }

  .complex {
    padding: 18px;
  }

  .complex__title {
    font-size: 33px;
  }

  .complex__media {
    height: 360px;
  }

  .complex__media > p {
    bottom: 88px;
  }
}

@media (min-width: 721px) and (max-width: 1100px) {
  .page-shell { max-width: 768px; padding-top: 10px; }

  .floating-header {
    position: fixed;
    z-index: 3100;
    top: 10px;
    left: 50%;
    display: grid;
    width: min(680px, calc(100vw - 32px));
    height: 74px;
    grid-template-columns: 180px 1fr 132px;
    align-items: center;
    padding: 8px;
    transform: translate3d(-50%, -105px, 0) scale(.92);
    transform-origin: 50% 0;
    color: #0e0e0e;
    background: #fff;
    border: 1px solid rgb(14 14 14 / 18%);
    border-radius: 20px;
    box-shadow: 0 14px 40px rgb(0 0 0 / 24%);
    opacity: 0;
    pointer-events: none;
    transition: transform 420ms cubic-bezier(.2, .8, .2, 1), opacity 240ms ease;
  }

  body.has-compact-header .floating-header {
    transform: translate3d(-50%, 0, 0) scale(1);
    opacity: 1;
    pointer-events: auto;
  }

  .floating-header__logo {
    position: relative;
    display: block;
    width: 150px;
    height: 54px;
    margin-left: 8px;
    overflow: hidden;
  }

  .floating-header__logo img {
    position: absolute;
    top: -21px;
    left: -40px;
    width: 224px;
    height: auto;
    max-width: none;
    filter: url("#logo-red-black");
  }

  .floating-header__address {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0;
    border: 0;
    color: inherit;
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 16px;
    white-space: nowrap;
  }

  .floating-header__address img {
    width: 24px;
    height: 24px;
  }

  .floating-header__menu {
    display: flex;
    width: 120px;
    height: 52px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #0e0e0e;
    background: #fff;
    border: 1px solid #0e0e0e;
    border-radius: 16px;
    font-family: "Oswald", sans-serif;
    font-size: 20px;
    text-transform: uppercase;
  }

  .floating-header__menu-open {
    display: grid;
    place-items: center;
  }

  .floating-header__menu-open img {
    width: 24px;
    height: 24px;
  }

  .floating-header__menu-close {
    display: none;
    font-size: 28px;
    line-height: 1;
  }

  body.menu-is-open .floating-header__menu-open {
    display: none;
  }

  body.menu-is-open .floating-header__menu-close {
    display: inline;
  }

  .hero { width: calc(100% - 20px); height: 860px; min-height: 860px; border-width: 4px; border-radius: 30px; }
  .hero__background img { width: 104%; height: calc(100% + 170px); object-position: center top; }
  .hero__brand { top: 18px; left: 18px; width: 170px; height: 70px; border-radius: 20px; }
  .hero__brand-crop { width: 142px; height: 52px; }
  .hero__brand-crop img { top: -20px; left: -38px; width: 214px; height: auto; }
  .hero__location { top: 18px; right: 32px; width: 380px; height: 70px; border-radius: 20px; }
  .hero__address { width: 248px; gap: 10px; padding-left: 19px; font-size: 16px; }
  .hero__address img { width: 20px; height: 20px; }
  .hero__menu { width: 120px; height: 50px; border-radius: 20px; font-size: 20px; }
  .hero__copy { top: 155px; left: 18px; width: 690px; }
  .hero__eyebrow { margin-bottom: 18px; font-family: "Oswald", sans-serif; font-size: 22px; line-height: 1.5; text-transform: uppercase; }
  .hero h1 { width: 820px; max-width: none; font-size: 70px; line-height: 1.26; transform: scaleX(0.84); transform-origin: left top; }
  .hero__lead { margin-top: 24px; font-size: 24px; }
  .hero__services { top: 475px; right: auto; left: 18px; display: flex; width: 486px; gap: 22px; font-size: 20px; font-weight: 500; }
  .hero__services-mark { width: 18px; height: 18px; }
  .hero__services-list { display: grid; width: 486px; grid-template-columns: 235px 236px; column-gap: 22px; row-gap: 20px; }
  .hero__services-list a { line-height: 1.2; }
  .hero__services-list a:nth-child(1) { grid-column: 1; grid-row: 1; }
  .hero__services-list a:nth-child(2) { grid-column: 1; grid-row: 2; }
  .hero__services-list a:nth-child(3) { grid-column: 1; grid-row: 3; }
  .hero__services-list a:nth-child(4) { grid-column: 1; grid-row: 4; }
  .hero__services-list a:nth-child(5) { grid-column: 2; grid-row: 1; }
  .hero__services-list a:nth-child(6) { grid-column: 2; grid-row: 2; }
  .hero__services-list a:nth-child(7) { grid-column: 2; grid-row: 3; }
  .hero__services-list a:nth-child(8) { grid-column: 2; grid-row: 4; }
  .hero__actions { bottom: 50px; width: 432px; height: 90px; border-radius: 20px; }

  .desktop-menu { position: fixed; z-index: 2900; inset: 0; display: block; overflow-y: auto; padding: 16px 20px 32px; background: rgb(8 8 8 / 88%); opacity: 0; pointer-events: none; visibility: hidden; backdrop-filter: blur(10px); transition: opacity 220ms ease, visibility 0s linear 220ms; }
  body.menu-is-open { overflow: hidden; }
  body.menu-is-open .desktop-menu { opacity: 1; pointer-events: auto; visibility: visible; transition-delay: 0s; }
  .desktop-menu__header, .desktop-menu__content, .desktop-menu__footer { width: min(728px, 100%); margin: 0 auto; }
  .desktop-menu__header { display: grid; grid-template-columns: 190px 1fr 128px; align-items: center; gap: 12px; min-height: 80px; padding: 8px; border: 1px solid rgb(255 255 255 / 14%); border-radius: 22px; background: rgb(255 255 255 / 6%); }
  body.menu-is-open.has-compact-header .desktop-menu__header { display: none; }
  body.menu-is-open.has-compact-header .desktop-menu__content { padding-top: 118px; }
  .desktop-menu__logo { position: relative; display: block; width: 160px; height: 58px; overflow: hidden; }
  .desktop-menu__logo img { position: absolute; top: -24px; left: -44px; width: 240px; max-width: none; }
  .desktop-menu__address, .desktop-menu__close { display: flex; align-items: center; justify-content: center; gap: 10px; height: 62px; border-radius: 18px; cursor: pointer; }
  .desktop-menu__address { color: #fff; background: rgb(255 255 255 / 5%); font-size: 14px; }
  .desktop-menu__address img { width: 22px; height: 22px; }
  .desktop-menu__close { color: #0e0e0e; background: #fff; font-family: "Oswald", sans-serif; font-size: 20px; text-transform: uppercase; }
  .desktop-menu__close span:first-child { font-family: "Manrope", sans-serif; font-size: 28px; line-height: 1; }
  .desktop-menu__content { display: grid; gap: 26px; padding-top: 28px; }
  .desktop-menu__categories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .desktop-menu__category { min-height: 188px; padding: 22px; border: 1px solid rgb(255 255 255 / 10%); border-radius: 20px; background: rgb(255 255 255 / 4%); }
  .desktop-menu__category h2 { display: flex; justify-content: space-between; margin: 0 0 18px; font-family: "Oswald", sans-serif; font-size: 25px; font-weight: 400; line-height: 1.2; text-transform: uppercase; }
  .desktop-menu__category div, .desktop-menu__primary-links, .desktop-menu__legal { display: grid; gap: 10px; }
  .desktop-menu__category a, .desktop-menu__primary-links a, .desktop-menu__legal a { color: rgb(255 255 255 / 78%); font-size: 16px; }
  .desktop-menu__primary-links { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 18px 0; border-top: 1px solid rgb(255 255 255 / 10%); border-bottom: 1px solid rgb(255 255 255 / 10%); }
  .desktop-menu__primary-links a { color: #fff; font-family: "Oswald", sans-serif; font-size: 22px; text-transform: uppercase; }
  .desktop-menu__footer { display: grid; grid-template-columns: 90px 1fr 250px; align-items: center; gap: 20px; color: #fff; }
  .desktop-menu__language, .desktop-menu__contacts { display: flex; align-items: center; gap: 10px; }
  .desktop-menu__language button { color: rgb(255 255 255 / 55%); background: none; }
  .desktop-menu__contacts { justify-content: center; }
  .desktop-menu__contacts a { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 15px; background: #fff; color: #0e0e0e; }
  .desktop-menu__contacts img { width: 24px; height: 24px; }
  .desktop-menu__legal { justify-items: end; }

  .address-popup { position: fixed; z-index: 4000; inset: 0; display: grid; place-items: center; padding: 20px; background: rgb(5 5 5 / 72%); opacity: 0; pointer-events: none; visibility: hidden; backdrop-filter: blur(10px); transition: opacity 200ms ease, visibility 0s linear 200ms; }
  body.address-popup-is-open { overflow: hidden; }
  body.address-popup-is-open .address-popup { opacity: 1; pointer-events: auto; visibility: visible; transition-delay: 0s; }
  .address-popup__panel { position: relative; width: min(728px, 100%); max-height: calc(100vh - 40px); overflow: auto; padding: 28px; border: 1px solid rgb(255 255 255 / 14%); border-radius: 28px; background: #101010; box-shadow: 0 30px 80px rgb(0 0 0 / 48%); }
  .address-popup__close { position: absolute; top: 18px; right: 18px; display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px; border-radius: 15px; color: #0e0e0e; background: #fff; cursor: pointer; font-family: "Oswald", sans-serif; font-size: 18px; text-transform: uppercase; }
  .address-popup__eyebrow { margin: 0 0 8px; color: var(--red); font-family: "Oswald", sans-serif; font-size: 16px; text-transform: uppercase; }
  .address-popup h2 { width: 470px; margin: 0; font-family: "Oswald", sans-serif; font-size: 38px; font-weight: 400; line-height: 1.2; text-transform: uppercase; }
  .address-popup__body { display: grid; gap: 18px; margin-top: 24px; }
  .address-popup__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .address-popup__list article { display: grid; gap: 8px; min-height: 118px; padding: 18px; border: 1px solid rgb(255 255 255 / 10%); border-left: 4px solid var(--red); border-radius: 18px; background: rgb(255 255 255 / 4%); }
  .address-popup__list span { color: #fff; font-family: "Oswald", sans-serif; font-size: 20px; line-height: 1.1; text-transform: uppercase; }
  .address-popup__list strong { color: rgb(255 255 255 / 72%); font-size: 14px; font-weight: 400; line-height: 1.28; }
  .address-popup__phone { display: flex; width: 100%; height: 64px; align-items: center; justify-content: center; margin-top: 14px; border: 1px solid var(--red); border-radius: 18px; background: #2b0c0d; color: #fff; font-family: "Oswald", sans-serif; font-size: 28px; }
  .address-popup__map { height: 310px; overflow: hidden; border: 4px solid var(--border); border-radius: 24px; }
  .address-popup__leaflet { width: 100%; height: 100%; }

  .about { position: relative; display: block; width: 728px; height: 620px; margin-top: 20px; }
  .about > * { position: absolute; }
  .about__stat--dark { top: 0; left: 0; width: 359px; height: 200px; }
  .about__stat--red { top: 0; right: 0; width: 359px; height: 200px; }
  .about__image--grille { top: 210px; left: 0; width: 310px; height: 220px; }
  .about__llumar { top: 210px; right: 0; width: 408px; height: 220px; }
  .about__atelier { top: 440px; left: 0; width: 470px; height: 180px; }
  .about__image--console { top: 440px; right: 0; width: 248px; height: 180px; }
  .about__stat strong { top: 20px; font-size: 70px; }
  .about__stat-label { top: 106px; font-size: 24px; }
  .about__stat p { right: 24px; bottom: 24px; left: 24px; font-size: 16px; line-height: 1.4; }
  .about__stat--dark p { bottom: 16px; font-size: 13px; line-height: 1.25; }
  .about__stat--red p { width: 260px; margin: 0 auto; }
  .about__video video { width: 145%; object-position: left center; }
  .about__atelier-copy { top: 50%; right: 25px; left: 161px; width: 284px; transform: translateY(-50%); }
  .about__atelier-copy h2 { font-size: 24px; line-height: 1.4; }
  .about__atelier-copy p { width: 224px; margin-top: 10px; font-size: 16px; line-height: 1.4; }
  .about__atelier-wheel { top: -120px; left: -170px; width: 360px; height: 360px; }
  .about__llumar-logo { top: 25px; left: 25px; transform: scale(.83); transform-origin: left top; }
  .about__llumar-copy { top: 113px; right: 25px; left: 25px; width: auto; }
  .about__llumar-copy h2 { width: auto; font-size: 20px; line-height: 1.4; white-space: nowrap; transform: none; }
  .about__llumar-copy p { width: 221px; margin-top: 10px; font-size: 16px; line-height: 1.4; }
  .about__image--console img { width: 100%; height: calc(100% + 130px); object-position: center; }

  .section-divider { width: 728px; height: 86px; margin-top: 55px; }
  .services { position: relative; width: 768px; height: 1146px; margin: 0 auto; padding: 0; overflow: visible; }
  .services__header { position: absolute; top: 0; right: auto; bottom: auto; left: 50%; width: 449px; transform: translateX(-50%); text-align: center; }
  .services__header p { margin-bottom: 25px; font-size: 16px; letter-spacing: .32px; }
  .services__header h2 { font-size: 40px; line-height: 1.3; white-space: nowrap; }
  .services__tabs { position: absolute; top: 123px; right: auto; bottom: auto; left: 50%; justify-content: center; gap: 10px; margin-top: 0; padding-bottom: 0; overflow: visible; transform: translateX(-50%); }
  .services__tab { min-height: 54px; height: 54px; padding: 0 20px; font-size: 16px; border-radius: 15px; }
  .services__list { position: absolute; top: 196px; right: auto; bottom: auto; left: 20px; display: block; width: 728px; height: 840px; margin-top: 0; padding-bottom: 0; overflow: visible; transform: none; }
  .service-card { position: absolute; width: 359px; height: 410px; flex: 0 0 auto; flex-basis: auto; border-radius: 20px; }
  .service-card:nth-child(1) { top: 0; left: 0; }
  .service-card:nth-child(2) { top: 0; right: 0; }
  .service-card:nth-child(3) { top: 430px; left: 50%; transform: translateX(-50%); }
  .service-card__media { top: 9px; left: 9px; width: 338px; height: 220px; border-radius: 20px; }
  .service-card__image, .service-card > .service-card__image { width: 338px; height: 220px; border-radius: 20px; }
  .service-card__media--shade, .service-card > .service-card__image { top: 9px; left: 9px; }
  .service-card__heading { top: 244px; right: 12px; left: 19px; }
  .service-card__heading h3 { font-size: 30px; }
  .service-card__heading p { width: 166px; font-size: 16px; line-height: 1.3; }
  .service-card__price { top: 295px; left: 19px; font-size: 16px; }
  .service-card__actions { height: 70px; grid-template-columns: 150px 1fr; }
  .service-card__actions > a { font-size: 18px; }
  .service-card__actions span { width: 40px; height: 40px; }
  .services__all { position: absolute; top: auto; right: auto; bottom: 0; left: 50%; width: 314px; height: 70px; margin: 0; transform: translateX(-50%); font-size: 20px; border-radius: 20px; }

  .complex { width: 734px; height: 1221px; margin-top: 72px; padding: 0; border-width: 6px; border-radius: 30px; }
  .complex__content { position: absolute; inset: 37px auto auto 37px; width: 648px; }
  .complex__title { width: 560px; font-size: 40px; line-height: 1.3; transform: scaleX(.78); transform-origin: left top; }
  .complex__description { width: 545px; margin-top: 17px; font-size: 15px; line-height: 1.4; }
  .complex__package { margin-top: 24px; }
  .complex__package h3 { font-size: 20px; line-height: 1.3; }
  .complex__chips { gap: 10px; margin-top: 12px; }
  .complex__chip-row { flex-wrap: nowrap; gap: 10px; }
  .complex__chip-row span { min-height: 43px; padding: 12px 15px; border-radius: 10px; font-size: 15px; }
  .complex__chip-row img { height: 15px; }
  .complex__price { display: grid; width: 620px; height: 80px; min-height: 80px; grid-template-columns: 153px 1fr; align-items: center; margin-top: 20px; padding: 0 22px; border-radius: 20px; }
  .complex__price-value { flex-basis: auto; align-items: baseline; justify-content: flex-start; gap: 8px; white-space: nowrap; transform: scaleX(.84); transform-origin: left center; }
  .complex__price-value span { font-size: 20px; }
  .complex__price-value strong { font-size: 40px; }
  .complex__price p { font-size: 16px; line-height: 1.4; }
  .complex__actions { position: static; display: flex; gap: 20px; margin-top: 20px; }
  .complex__primary, .complex__secondary { width: 314px; height: 70px; font-size: 20px; border-radius: 20px; }
  .complex__primary { justify-content: center; padding: 0 64px 0 20px; }
  .complex__primary > span:first-child { flex: 1; text-align: center; }
  .complex__primary-icon { width: 50px; height: 50px; border-radius: 15px; }
  .complex__media { position: absolute; top: 572px; right: auto; left: 37px; width: 648px; height: 600px; margin-top: 0; border-radius: 20px; }
  .complex__media-image { top: -10px; left: -155px; width: 997px; height: 655px; object-fit: cover; }
  .complex__media > p { left: 30px; bottom: 30px; font-size: 36px; }
  .complex__slider-controls { right: 20px; bottom: 20px; gap: 20px; }
  .complex__slider-controls button { width: 70px; height: 70px; border-radius: 20px; }

  .works { width: 768px; height: 684px; margin-top: 90px; }
  .works__canvas { width: 768px; height: 684px; }
  .works__canvas::before {
    position: absolute;
    inset: 123px 20px 0;
    content: "";
    pointer-events: none;
    background:
      linear-gradient(#222, #222) 0 0 / 100% 1px no-repeat,
      linear-gradient(#222, #222) 0 280px / 100% 1px no-repeat,
      linear-gradient(#222, #222) 0 560px / 571px 1px no-repeat,
      linear-gradient(#222, #222) 364px 0 / 1px 280px no-repeat,
      linear-gradient(#222, #222) 280px 280px / 1px 280px no-repeat,
      linear-gradient(#222, #222) 570px 280px / 1px 280px no-repeat;
  }
  .works__line { display: none; }
  .works__head { top: 0; left: 66px; width: 636px; gap: 25px; }
  .works__eyebrow { font-size: 16px; }
  .works__title { width: 636px; font-size: 40px; line-height: 1.3; white-space: nowrap; transform: scaleX(.96); transform-origin: center top; }
  .works-card--wide { width: 354px; height: 260px; }
  .works-card--wide:nth-of-type(1) { left: 20px !important; top: 133px !important; }
  .works-card--wide:nth-of-type(2) { left: 394px !important; top: 133px !important; }
  .works-card--mini { width: 270px; height: 260px; }
  .works-card--mini:nth-of-type(3) { left: 20px !important; top: 413px !important; }
  .works-card--mini:nth-of-type(4) { left: 310px !important; top: 413px !important; }
  .works-card--mini:nth-of-type(5) { display: none; }
  .works-card--wide .works-card__media, .works-card--mini .works-card__media { height: 200px; }
  .works-card__caption { top: 215px !important; font-size: 16px; }
  .works-card__tag { left: 15px; bottom: 12px; height: 36px; padding: 8px 16px; border-radius: 12px; font-size: 13px; }
  .works__all { left: 600px !important; top: 413px !important; width: 148px; height: 260px; }
  .works__all span { font-size: 18px; }
  .works__feature { width: 728px; max-width: none; height: 330px; margin-top: 52px; border: 6px solid var(--border); border-radius: 30px; }
  .works__feature img { width: 100%; height: auto; margin-left: 0; object-fit: contain; object-position: center top; }

  .start-help { width: 728px; height: 453px; min-height: 0; margin-top: 60px; padding: 49px 29px 51px; border-radius: 30px; }
  .start-help::before { background-size: 155% auto; background-position: center; }
  .start-help::after { background: linear-gradient(90deg, rgb(8 8 8 / 97%) 0%, rgb(8 8 8 / 90%) 55%, rgb(8 8 8 / 28%) 100%), radial-gradient(circle at 56% 48%, rgb(236 15 19 / 26%), transparent 34%); }
  .start-help__content { width: 450px; }
  .start-help h2 { max-width: 450px; font-size: 40px; line-height: 1.3; }
  .start-help p { width: 450px; margin-top: 18px; font-size: 16px; }
  .start-help__button { width: 440px; height: 70px; margin-top: 31px; padding-right: 66px; padding-left: 18px; font-size: 17px; }
  .start-help__button > span:first-child { flex: 1; min-width: 0; text-align: center; }
  .start-help__marquee { top: -63px; right: 21px; bottom: auto; left: auto; width: 200px; height: 566px; grid-template-columns: 200px; gap: 6px; }
  .start-help__lane--up { display: none; }
  .start-help__logo { width: 200px; height: 100px; border-radius: 10px; }

  .contact { position: relative; display: block; width: 768px; height: 1193px; margin-top: 82px; overflow: visible; }
  .contact__info { position: absolute; top: 0; left: 20px; width: 728px; height: 349px; margin: 0; }
  .contact h2 { position: absolute; top: 0; left: 0; width: 610px; margin: 0; font-size: 40px; line-height: 1.3; transform: none; }
  .contact__rows { position: absolute; top: 129px; left: 0; width: 728px; height: 220px; margin-top: 0; }
  .contact__row { grid-template-columns: 142px 1fr; }
  .contact__data { padding-left: 30px; }
  .contact__data p { grid-template-columns: 148px 1fr; font-size: 16px; }
  .contact__form { position: absolute; top: 379px; left: 22px; width: 728px; margin: 0; gap: 5px; }
  .contact__form input, .contact__form select { height: 66px; }
  .contact__submit { height: 70px; margin-top: 25px; }
  .contact__map { position: absolute; top: 793px; left: 22px; width: 728px; height: 400px; margin: 0; border-width: 0; border-radius: 30px; }
  .contact__maps-logo { top: 22px; right: 24px; width: 150px; }
  .contact__leaflet .leaflet-control-zoom a { width: 64px; height: 64px; font-size: 34px; line-height: 64px; }

  .site-footer { width: 768px; height: 600px; margin-top: 70px; }
  .site-footer::before { display: none; }
  .site-footer::after { position: absolute; right: 0; bottom: 49px; left: 0; height: 1px; background: #262626; content: ""; }
  .site-footer__brand { top: 27px; left: 50%; width: 732px; transform: translateX(-50%); text-align: center; }
  .site-footer__logo { width: 196px; height: 72px; margin: 0 auto; }
  .site-footer__text { width: 732px; margin: 25px auto 0; font-size: 16px; }
  .site-footer__partner { justify-content: center; width: 229px; margin: 12px auto 0; font-size: 16px; }
  .site-footer__services { top: 225px; left: 20px; width: 298px; }
  .site-footer h2 { margin-bottom: 20px; font-size: 20px; }
  .site-footer__services div { grid-template-rows: repeat(5, auto); gap: 10px 20px; font-size: 15px; }
  .site-footer__info { top: 225px; left: 340px; width: 112px; }
  .site-footer__info h2,
  .site-footer__addresses h2 { font-size: 18px; }
  .site-footer__info div { gap: 10px; font-size: 15px; }
  .site-footer__addresses div { gap: 10px; font-size: 14px; }
  .site-footer__addresses { top: 225px; right: 20px; left: auto; width: 264px; }
  .site-footer__button { top: 451px; left: 18px; width: 340px; }
  .site-footer__socials { top: 456px; right: 20px; left: auto; gap: 20px; }
  .site-footer__policy { top: 566px; left: 20px; font-size: 16px; }
  .site-footer__links { top: 566px; right: 20px; left: auto; gap: 60px; font-size: 16px; }
}

@media (max-width: 720px) {
  body.menu-is-open,
  body.address-popup-is-open {
    width: 100%;
    height: 100dvh;
    overflow: hidden;
  }

  .hero {
    width: min(100%, 360px);
    height: 704px;
    min-height: 704px;
    margin-right: auto;
    margin-left: auto;
    overflow: hidden;
    border-width: 4px;
    border-radius: 20px;
  }

  .hero__background img {
    top: 0;
    left: -3px;
    width: 366px;
    height: 700px;
    max-width: none;
    object-fit: cover;
    object-position: center top;
  }

  .hero__brand {
    top: 6px;
    left: 6px;
    width: 120px;
    height: 56px;
    border-radius: 15px 0 0 15px;
    border-right: 0;
  }

  .hero__location {
    top: 6px;
    right: auto;
    left: 126px;
    width: 220px;
    height: 56px;
    padding: 5px 6px 5px 8px;
    border-left: 0;
    border-radius: 0 15px 15px 0;
  }

  .hero__copy {
    top: 121px;
    left: 6px;
    width: 340px;
  }

  .hero__eyebrow {
    margin-bottom: 10px;
    font-size: 18px;
    line-height: 1.5;
  }

  .hero h1 {
    width: 442px;
    max-width: none;
    font-size: 38px;
    line-height: 1.3;
    letter-spacing: 0;
    transform: scaleX(.77);
    transform-origin: left top;
  }

  .hero__lead {
    width: 316px;
    margin-top: 24px;
    font-size: 16px;
    line-height: 1.3;
  }

  .hero__services {
    top: 404px;
    right: auto;
    left: 6px;
    display: flex;
    width: 340px;
    gap: 15px;
    font-size: 14px;
  }

  .hero__services-list {
    width: 100%;
    grid-template-columns: max-content max-content;
    justify-content: space-between;
    gap: 12px 14px;
  }

  .hero__actions {
    right: auto;
    bottom: 26px;
    left: 6px;
    display: grid;
    width: 340px;
    height: 72px;
    grid-template-columns: 202px 56px 56px;
    gap: 5px;
    padding: 7px;
    border-radius: 20px;
    transform: none;
  }

  .hero__primary,
  .hero__icon-button {
    height: 56px;
    border-radius: 15px;
  }

  .hero__primary {
    width: 100%;
    min-width: 0;
    justify-content: center;
    padding-right: 5px;
    font-size: 16px;
  }

  .hero__primary > span:first-child {
    flex: 1;
    min-width: 0;
    text-align: center;
    white-space: nowrap;
  }

  .hero__primary-icon {
    width: 46px;
    height: 46px;
    border-radius: 15px;
  }

  .hero__icon-button {
    width: 56px;
  }


  .address-popup {
    z-index: 6000;
    height: 100dvh;
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    overflow: hidden;
  }

  .address-popup__panel {
    width: 100%;
    height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(8px, env(safe-area-inset-bottom)));
    max-height: none;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    padding: 48px 8px 8px;
    overflow: hidden;
    border-radius: 20px;
  }

  .address-popup__close {
    top: 8px;
    right: 8px;
    height: 34px;
    padding: 0 11px;
    border-radius: 12px;
    font-size: 16px;
  }

  .address-popup__close span:first-child {
    font-size: 19px;
  }

  .address-popup__eyebrow {
    margin-bottom: 5px;
    font-size: 13px;
    line-height: 1;
  }

  .address-popup h2 {
    width: calc(100% - 6px);
    font-size: clamp(23px, 7.4vw, 31px);
    line-height: 1.08;
  }

  .address-popup__body {
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 6px;
    margin-top: 8px;
    overflow: hidden;
  }

  .address-popup__content {
    min-height: 0;
    display: grid;
    grid-template-rows: auto 34px;
    gap: 5px;
  }

  .address-popup__list {
    min-height: 0;
    display: grid;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  .address-popup__list article {
    min-height: 0;
    gap: 2px;
    justify-content: center;
    padding: 5px 8px 5px 15px;
    border-radius: 13px;
  }

  .address-popup__list article::before {
    left: 0;
    width: 4px;
    height: 62%;
    border-radius: 0 4px 4px 0;
  }

  .address-popup__list span {
    font-size: clamp(15px, 4.8vw, 19px);
    line-height: 1.05;
  }

  .address-popup__list strong {
    font-size: clamp(10px, 3.5vw, 14px);
    line-height: 1.15;
  }

  .address-popup__phone {
    height: 34px;
    margin: 0;
    border-radius: 13px;
    font-size: clamp(20px, 6vw, 27px);
  }

  .address-popup__map {
    min-height: 0;
    height: 100%;
    border-width: 4px;
    border-radius: 18px;
  }

  .address-popup__leaflet .leaflet-control-zoom {
    top: 10px;
    left: 10px;
  }

  .address-popup__leaflet .leaflet-control-zoom a {
    width: 34px;
    height: 34px;
    font-size: 22px;
    line-height: 34px;
  }

  .address-popup__leaflet .carsound-map-tooltip {
    padding: 7px 9px;
    border-radius: 10px;
  }

  .address-popup__leaflet .carsound-map-tooltip strong {
    font-size: 13px;
  }

  .address-popup__leaflet .carsound-map-tooltip em {
    font-size: 10px;
  }
}

@media (max-width: 720px) and (max-height: 760px) {

  .address-popup__panel {
    padding-top: 42px;
  }

  .address-popup__close {
    height: 30px;
    font-size: 14px;
  }

  .address-popup__eyebrow {
    font-size: 12px;
  }

  .address-popup h2 {
    font-size: clamp(20px, 6.3vw, 25px);
  }

  .address-popup__body {
    gap: 5px;
    margin-top: 6px;
  }

  .address-popup__content {
    grid-template-rows: auto 30px;
    gap: 4px;
  }

  .address-popup__list {
    gap: 4px;
  }

  .address-popup__list article {
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .address-popup__list span {
    font-size: clamp(13px, 4.2vw, 16px);
  }

  .address-popup__list strong {
    font-size: clamp(9px, 3.1vw, 12px);
  }

  .address-popup__phone {
    height: 30px;
    font-size: clamp(18px, 5.4vw, 23px);
  }
}

@media (min-width: 721px) and (max-width: 1024px) {
  .hero {
    width: calc(100% - 20px);
    height: 860px;
    min-height: 860px;
    border-radius: 30px;
  }

  .desktop-menu {
    height: 100dvh;
    overflow: hidden;
  }

  .address-popup {
    height: 100dvh;
    overflow: hidden;
  }
}

@media (max-width: 1100px) {
  .floating-header {
    position: fixed;
    z-index: 5200;
    top: max(8px, env(safe-area-inset-top));
    left: 50%;
    display: grid;
    width: calc(100% - 20px);
    max-width: 728px;
    height: 56px;
    grid-template-columns: 33% minmax(0, 1fr) 90px;
    align-items: center;
    gap: 6px;
    padding: 4px;
    transform: translate3d(-50%, -84px, 0);
    color: #fff;
    background: rgb(0 0 0 / 72%);
    border: 1px solid #222;
    border-radius: 15px;
    box-shadow: 0 14px 40px rgb(0 0 0 / 28%);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    backdrop-filter: blur(10px);
    transition: transform 260ms ease, opacity 180ms ease, visibility 0s linear 260ms;
  }

  body.has-compact-header .floating-header,
  body.menu-is-open .floating-header,
  body.address-popup-is-open .floating-header {
    transform: translate3d(-50%, 0, 0);
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition-delay: 0s;
  }

  body.address-popup-is-open .floating-header {
    pointer-events: auto;
  }

  .floating-header__logo {
    position: relative;
    display: block;
    width: 100%;
    height: 36px;
    overflow: hidden;
  }

  .floating-header__logo img {
    position: absolute;
    top: -13px;
    left: -24px;
    width: 142px;
    height: auto;
    max-width: none;
  }

  .floating-header__address {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0;
    border: 0;
    color: inherit;
    background: none;
    font-size: 13px;
    line-height: 1.15;
    text-align: left;
  }

  .floating-header__address img {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
  }

  .floating-header__address span {
    min-width: 0;
  }

  .floating-header__menu {
    display: flex;
    width: 90px;
    height: 44px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: #0e0e0e;
    background: #fff;
    border-radius: 12px;
    font-family: "Oswald", sans-serif;
    font-size: 16px;
    text-transform: uppercase;
  }

  .floating-header__menu-open {
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
  }

  .floating-header__menu-open img {
    width: 20px;
    height: 20px;
  }

  .floating-header__menu-close {
    display: none;
    color: #0e0e0e;
    font-family: "Manrope", sans-serif;
    font-size: 22px;
    line-height: 1;
  }

  body.menu-is-open .floating-header__menu-open {
    display: none;
  }

  body.menu-is-open .floating-header__menu-close {
    display: inline;
  }
}

@media (max-width: 370px) {
  .floating-header {
    grid-template-columns: 31% minmax(0, 1fr) 84px;
  }

  .floating-header__address {
    font-size: 12px;
  }

  .floating-header__menu {
    width: 84px;
    font-size: 15px;
  }
}

@media (max-width: 720px) {
  :root {
    --about-u: .277778vw;
    --about-x: max(0px, calc((100svw - (360 * var(--about-u))) / 2));
  }

  .about {
    position: relative;
    display: block;
    width: 100%;
    height: calc(575 * var(--about-u));
    margin-top: calc(14 * var(--about-u));
    overflow: hidden;
  }

  .about > * {
    position: absolute;
  }

  .about__card,
  .about__image {
    border-radius: calc(15 * var(--about-u));
  }

  .about__stat--dark {
    top: 0;
    left: calc(var(--about-x) + (10 * var(--about-u)));
    width: calc(185 * var(--about-u));
    height: calc(140 * var(--about-u));
  }

  .about__stat--red {
    top: 0;
    right: auto;
    left: calc(var(--about-x) + (205 * var(--about-u)));
    width: calc(145 * var(--about-u));
    height: calc(140 * var(--about-u));
  }

  .about__image--grille {
    top: calc(150 * var(--about-u));
    left: calc(var(--about-x) + (10 * var(--about-u)));
    width: calc(340 * var(--about-u));
    height: calc(140 * var(--about-u));
  }

  .about__llumar {
    top: calc(300 * var(--about-u));
    right: auto;
    left: calc(var(--about-x) + (10 * var(--about-u)));
    width: calc(340 * var(--about-u));
    height: calc(130 * var(--about-u));
  }

  .about__atelier {
    top: calc(440 * var(--about-u));
    right: auto;
    left: calc(var(--about-x) + (10 * var(--about-u)));
    width: calc(340 * var(--about-u));
    height: calc(135 * var(--about-u));
  }

  .about__image--console {
    display: none;
  }

  .about__video video {
    width: 100%;
    height: 100%;
    object-position: center;
  }

  .about__stat strong {
    top: calc(11 * var(--about-u));
    font-size: calc(40 * var(--about-u));
    line-height: 1.2;
  }

  .about__stat-label {
    top: calc(60 * var(--about-u));
    right: calc(15 * var(--about-u));
    left: calc(15 * var(--about-u));
    font-size: calc(14 * var(--about-u));
    line-height: 1.1;
  }

  .about__stat p {
    right: calc(12 * var(--about-u));
    bottom: calc(14 * var(--about-u));
    left: calc(12 * var(--about-u));
    font-size: calc(11 * var(--about-u));
    line-height: 1.24;
  }

  .about__stat--dark p {
    bottom: calc(12 * var(--about-u));
    font-size: calc(10.5 * var(--about-u));
    line-height: 1.18;
  }

  .about__stat--red strong {
    font-size: calc(36 * var(--about-u));
  }

  .about__stat--red p {
    right: calc(15 * var(--about-u));
    bottom: calc(23 * var(--about-u));
    left: calc(15 * var(--about-u));
    width: auto;
    font-size: calc(14 * var(--about-u));
    line-height: 1.28;
  }

  .about__llumar-logo {
    top: calc(15 * var(--about-u));
    left: calc(15 * var(--about-u));
    width: calc(117 * var(--about-u));
    height: calc(25 * var(--about-u));
    transform: none;
  }

  .about__llumar-logo-base {
    width: calc(117 * var(--about-u));
    height: calc(25 * var(--about-u));
  }

  .about__llumar-logo-text {
    left: calc(25 * var(--about-u));
    width: calc(92 * var(--about-u));
    height: calc(25 * var(--about-u));
  }

  .about__llumar-logo-text img {
    left: calc(-25 * var(--about-u));
    width: calc(117 * var(--about-u));
    height: calc(25 * var(--about-u));
  }

  .about__llumar-copy {
    top: calc(47 * var(--about-u));
    right: auto;
    left: calc(15 * var(--about-u));
    width: calc(319 * var(--about-u));
  }

  .about__llumar-copy h2 {
    width: calc(302 * var(--about-u));
    font-size: calc(18 * var(--about-u));
    line-height: 1.4;
    white-space: normal;
  }

  .about__llumar-copy p {
    width: calc(196 * var(--about-u));
    margin-top: calc(5 * var(--about-u));
    font-size: calc(14 * var(--about-u));
    line-height: 1.3;
  }

  .about__atelier-wheel {
    display: block;
    top: calc(-52 * var(--about-u));
    left: calc(-70 * var(--about-u));
    width: calc(220 * var(--about-u));
    height: calc(220 * var(--about-u));
    pointer-events: none;
  }

  .about__atelier-copy {
    top: 50%;
    right: auto;
    left: calc(158 * var(--about-u));
    width: calc(170 * var(--about-u));
    text-align: left;
    transform: translateY(-50%);
  }

  .about__atelier-copy::before {
    display: none;
  }

  .about__atelier-copy h2 {
    width: calc(170 * var(--about-u));
    font-size: calc(18 * var(--about-u));
    line-height: 1.28;
  }

  .about__atelier-copy p {
    width: calc(160 * var(--about-u));
    margin-top: calc(8 * var(--about-u));
    font-size: calc(13 * var(--about-u));
    line-height: 1.32;
  }
}

@media (max-width: 720px) {
  :root {
    --hero-u: var(--hero-u-lock, min(.277778svw, .142045svh));
    --hero-x: max(0px, calc((100svw - (360 * var(--hero-u))) / 2));
    --services-u: .277778svw;
    --services-x: max(0px, calc((100svw - (360 * var(--services-u))) / 2));
  }

  .hero {
    width: 100%;
    height: calc(704 * var(--hero-u));
    min-height: 0;
    margin-top: 6px;
    margin-right: 0;
    margin-left: 0;
    border-width: calc(2 * var(--hero-u));
    border-radius: calc(20 * var(--hero-u));
  }

  .hero__background img {
    top: 0;
    left: 0;
    width: 100%;
    height: calc(700 * var(--hero-u) + 170px);
  }

  .hero__brand {
    top: calc(6 * var(--hero-u));
    left: calc(var(--hero-x) + (10 * var(--hero-u)));
    width: calc(118 * var(--hero-u));
    height: calc(56 * var(--hero-u));
    border: 0;
    border-radius: calc(15 * var(--hero-u)) 0 0 calc(15 * var(--hero-u));
  }

  .hero__brand-crop {
    width: calc(94 * var(--hero-u));
    height: calc(34 * var(--hero-u));
  }

  .hero__brand-crop img {
    top: calc(-13 * var(--hero-u));
    left: calc(-25 * var(--hero-u));
    width: calc(141 * var(--hero-u));
  }

  .hero__location {
    top: calc(6 * var(--hero-u));
    left: calc(var(--hero-x) + (128 * var(--hero-u)));
    width: calc(222 * var(--hero-u));
    height: calc(56 * var(--hero-u));
    padding: calc(5 * var(--hero-u)) calc(6 * var(--hero-u)) calc(5 * var(--hero-u)) calc(8 * var(--hero-u));
    border: 0;
    border-radius: 0 calc(15 * var(--hero-u)) calc(15 * var(--hero-u)) 0;
  }

  .hero__address {
    width: calc(120 * var(--hero-u));
    gap: calc(5 * var(--hero-u));
    font-size: calc(13 * var(--hero-u));
  }

  .hero__address img {
    width: calc(16 * var(--hero-u));
    height: calc(16 * var(--hero-u));
  }

  .hero__address span {
    width: calc(81 * var(--hero-u));
  }

  .hero__menu {
    width: calc(90 * var(--hero-u));
    height: calc(44 * var(--hero-u));
    gap: calc(5 * var(--hero-u));
    border-radius: calc(12 * var(--hero-u));
    font-size: calc(16 * var(--hero-u));
  }

  .hero__menu img {
    width: calc(20 * var(--hero-u));
    height: calc(20 * var(--hero-u));
  }

  .hero__copy {
    top: calc(121 * var(--hero-u));
    left: calc(var(--hero-x) + (6 * var(--hero-u)));
    width: calc(340 * var(--hero-u));
  }

  .hero__eyebrow {
    margin-bottom: calc(10 * var(--hero-u));
    font-size: calc(18 * var(--hero-u));
  }

  .hero h1 {
    width: calc(442 * var(--hero-u));
    font-size: calc(38 * var(--hero-u));
  }

  .hero__lead {
    width: calc(316 * var(--hero-u));
    margin-top: calc(24 * var(--hero-u));
    font-size: calc(16 * var(--hero-u));
  }

  .hero__services {
    top: calc(404 * var(--hero-u));
    left: calc(var(--hero-x) + (6 * var(--hero-u)));
    width: calc(340 * var(--hero-u));
    gap: calc(15 * var(--hero-u));
    font-size: calc(12.4 * var(--hero-u));
  }

  .hero__services-mark {
    width: calc(15 * var(--hero-u));
    height: calc(15 * var(--hero-u));
  }

  .hero__services-list {
    width: calc(340 * var(--hero-u));
    grid-template-columns: minmax(0, calc(155 * var(--hero-u))) minmax(0, calc(169 * var(--hero-u)));
    justify-content: space-between;
    gap: calc(12 * var(--hero-u)) calc(7 * var(--hero-u));
  }

  .hero__services-list a {
    white-space: nowrap;
  }

  .hero__actions {
    bottom: calc(26 * var(--hero-u));
    left: calc(var(--hero-x) + (6 * var(--hero-u)));
    width: calc(340 * var(--hero-u));
    height: calc(72 * var(--hero-u));
    grid-template-columns: calc(202 * var(--hero-u)) calc(56 * var(--hero-u)) calc(56 * var(--hero-u));
    gap: calc(5 * var(--hero-u));
    padding: calc(7 * var(--hero-u));
    border: 0;
    border-radius: calc(20 * var(--hero-u));
  }

  .hero__primary,
  .hero__icon-button {
    height: calc(56 * var(--hero-u));
    border-radius: calc(15 * var(--hero-u));
  }

  .hero__primary {
    font-size: calc(16 * var(--hero-u));
    padding-right: calc(5 * var(--hero-u));
  }

  .hero__primary-icon {
    width: calc(46 * var(--hero-u));
    height: calc(46 * var(--hero-u));
    border-radius: calc(15 * var(--hero-u));
  }

  .hero__icon-button {
    width: calc(56 * var(--hero-u));
  }

  .section-divider {
    display: none;
  }

  .services {
    position: relative;
    width: 100%;
    height: calc(585 * var(--services-u));
    margin: calc(30 * var(--services-u)) 0 0;
    padding: 0;
    overflow: visible;
  }

  .services::before,
  .services::after {
    display: none;
  }

  .services::before {
    top: calc(202 * var(--services-u));
    right: 0;
    width: calc(54 * var(--services-u));
    height: calc(345 * var(--services-u));
    background: linear-gradient(90deg, rgb(14 14 14 / 0), #0e0e0e 82%);
  }

  .services::after {
    top: calc(202 * var(--services-u));
    left: 0;
    width: calc(24 * var(--services-u));
    height: calc(345 * var(--services-u));
    background: linear-gradient(90deg, #0e0e0e 0%, rgb(14 14 14 / 0) 100%);
  }

  .services__header::before,
  .services__header::after {
    position: absolute;
    top: calc(566 * var(--services-u));
    left: 50%;
    z-index: 6;
    height: calc(2 * var(--services-u));
    border-radius: 999px;
    content: "";
    pointer-events: none;
  }

  .services__header::before {
    width: calc(64 * var(--services-u));
    background: rgb(255 255 255 / 16%);
    transform: translateX(-50%);
  }

  .services__header::after {
    width: calc(18 * var(--services-u));
    background: rgb(255 255 255 / 76%);
    transform: translateX(calc(-32 * var(--services-u)));
    animation: services-scroll-cue 2.6s ease-in-out 1.2s 3 both;
  }

  @keyframes services-scroll-cue {
    0%, 100% {
      opacity: .32;
      transform: translateX(calc(-32 * var(--services-u)));
    }
    42% {
      opacity: .9;
      transform: translateX(calc(14 * var(--services-u)));
    }
    70% {
      opacity: .58;
      transform: translateX(calc(6 * var(--services-u)));
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .services__header::after {
      animation: none;
    }
  }

  .services__header {
    position: absolute;
    top: 0;
    left: 50%;
    width: calc(334 * var(--services-u));
    text-align: center;
    transform: translateX(-50%);
  }

  .services__header p {
    margin: 0 0 calc(15 * var(--services-u));
    font-size: calc(13 * var(--services-u));
    line-height: 1.3;
    letter-spacing: calc(.26 * var(--services-u));
  }

  .services__header h2 {
    margin: 0;
    font-size: calc(30 * var(--services-u));
    line-height: 1.3;
    white-space: nowrap;
  }

  .services__tabs {
    position: absolute;
    top: calc(82 * var(--services-u));
    left: calc(var(--services-x) + (10 * var(--services-u)));
    display: grid;
    width: calc(340 * var(--services-u));
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(10 * var(--services-u));
    margin: 0;
    padding: 0;
    overflow: visible;
    transform: none;
  }

  .services__tab {
    width: auto;
    min-width: 0;
    height: calc(49 * var(--services-u));
    min-height: 0;
    padding: 0 calc(18 * var(--services-u));
    justify-content: center;
    border-radius: calc(12 * var(--services-u));
    font-size: calc(15 * var(--services-u));
    line-height: 1.3;
    white-space: nowrap;
  }

  .services__tab:nth-child(3) {
    grid-column: 1;
    grid-row: 2;
    width: calc(125 * var(--services-u));
  }

  .services__tab:nth-child(4) {
    grid-column: 2;
    grid-row: 2;
    width: calc(205 * var(--services-u));
    justify-self: end;
  }

  .services__list {
    position: absolute;
    top: calc(202 * var(--services-u));
    left: 0;
    display: flex;
    width: 100%;
    height: calc(430 * var(--services-u));
    flex-direction: row;
    gap: calc(14 * var(--services-u));
    margin: 0;
    padding: 0 calc(var(--services-x) + (18 * var(--services-u))) 0 calc(var(--services-x) + (16 * var(--services-u)));
    overflow-x: auto;
    overflow-y: hidden;
    scroll-padding-left: calc(var(--services-x) + (16 * var(--services-u)));
    scroll-snap-type: x mandatory;
    transform: none;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

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

  .service-card,
  .service-card:nth-child(1),
  .service-card:nth-child(2),
  .service-card:nth-child(3) {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    width: calc(266 * var(--services-u));
    height: calc(410 * var(--services-u));
    flex: 0 0 auto;
    flex-basis: calc(266 * var(--services-u));
    border-radius: calc(15 * var(--services-u));
    scroll-snap-align: start;
    transform: none;
  }

  .service-card__media,
  .service-card__media--shade,
  .service-card > .service-card__image {
    position: absolute;
    top: calc(4 * var(--services-u));
    left: calc(4 * var(--services-u));
    width: calc(256 * var(--services-u));
    height: calc(194 * var(--services-u));
    border-radius: calc(15 * var(--services-u));
  }

  .service-card__image,
  .service-card__media .service-card__image,
  .service-card > .service-card__image {
    width: calc(256 * var(--services-u));
    height: calc(194 * var(--services-u));
    border-radius: calc(15 * var(--services-u));
    object-fit: cover;
  }

  .service-card__media--shade::after {
    border-radius: calc(15 * var(--services-u));
  }

  .service-card__heading {
    position: absolute;
    top: calc(220 * var(--services-u));
    right: calc(12 * var(--services-u));
    left: calc(12 * var(--services-u));
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: calc(8 * var(--services-u));
  }

  .service-card__heading h3 {
    margin: 0;
    font-size: calc(22 * var(--services-u));
    line-height: 1.3;
    white-space: nowrap;
  }

  .service-card__heading p {
    width: calc(118 * var(--services-u));
    margin: calc(2 * var(--services-u)) 0 0;
    font-size: calc(12.5 * var(--services-u));
    line-height: 1.3;
    text-align: right;
  }

  .service-card__price {
    position: absolute;
    top: calc(292 * var(--services-u));
    left: calc(14 * var(--services-u));
    margin: 0;
    font-size: calc(16 * var(--services-u));
    line-height: 1.3;
  }

  .service-card__actions {
    position: absolute;
    right: calc(-1 * var(--services-u));
    bottom: calc(-1 * var(--services-u));
    left: calc(-1 * var(--services-u));
    display: grid;
    height: calc(66 * var(--services-u));
    grid-template-columns: 1fr 1.18fr;
    border-top: 1px solid #222;
  }

  .service-card__actions > a {
    display: flex;
    position: static;
    min-width: 0;
    height: calc(66 * var(--services-u));
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0 calc(8 * var(--services-u));
    border-radius: 0;
    font-size: calc(13 * var(--services-u));
    line-height: 1.1;
    white-space: nowrap;
  }

  .service-card__actions > a:first-child {
    grid-column: 1;
    border-right: 1px solid #222;
  }

  .service-card__actions > a:last-child {
    grid-column: 2;
    gap: calc(6 * var(--services-u));
  }

  .service-card__actions span {
    width: calc(34 * var(--services-u));
    height: calc(34 * var(--services-u));
    flex: 0 0 auto;
    border-radius: calc(10 * var(--services-u));
  }

  .service-card__actions img {
    width: calc(14 * var(--services-u));
    height: calc(13 * var(--services-u));
  }

  .services__all {
    position: absolute;
    top: calc(580 * var(--services-u));
    left: 50%;
    display: flex;
    width: calc(230 * var(--services-u));
    height: calc(56 * var(--services-u));
    align-items: center;
    justify-content: center;
    margin: 0;
    transform: translateX(-50%);
    border-radius: calc(15 * var(--services-u));
    background: #411516;
    color: #fff;
    font-family: "Oswald", sans-serif;
    font-size: calc(17 * var(--services-u));
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
  }

  .complex {
    position: relative;
    width: 100%;
    height: calc(1000 * var(--services-u));
    margin: calc(30 * var(--services-u)) 0 0;
    padding: 0;
    overflow: hidden;
    border-width: calc(4 * var(--services-u));
    border-radius: calc(20 * var(--services-u));
    background: #fff;
  }

  .complex__content {
    display: contents;
  }

  .complex__title {
    position: absolute;
    top: calc(26 * var(--services-u));
    left: 50%;
    width: calc(403 * var(--services-u));
    margin: 0;
    color: #0e0e0e;
    font-size: calc(30 * var(--services-u));
    line-height: 1.3;
    text-align: center;
    text-transform: uppercase;
    transform: translateX(-50%);
  }

  .complex__title span,
  .complex__title strong {
    display: block;
    font-weight: 400;
  }

  .complex__title strong {
    color: var(--red);
  }

  .complex__description {
    position: absolute;
    top: calc(119 * var(--services-u));
    left: calc(var(--services-x) + (11 * var(--services-u)));
    width: calc(278 * var(--services-u));
    margin: 0;
    color: #0e0e0e;
    font-size: calc(14 * var(--services-u));
    line-height: 1.4;
  }

  .complex__package {
    position: absolute;
    top: calc(215 * var(--services-u));
    left: calc(var(--services-x) + (10 * var(--services-u)));
    width: calc(340 * var(--services-u));
    margin: 0;
  }

  .complex__package h3 {
    margin: 0 0 calc(10 * var(--services-u));
    color: #0e0e0e;
    font-size: calc(20 * var(--services-u));
    line-height: 1.3;
  }

  .complex__chips {
    display: flex;
    width: calc(332 * var(--services-u));
    flex-wrap: wrap;
    gap: calc(5 * var(--services-u));
    margin: 0;
  }

  .complex__chip-row {
    display: contents;
  }

  .complex__chip-row span {
    min-height: calc(38 * var(--services-u));
    padding: calc(10 * var(--services-u)) calc(14 * var(--services-u));
    border-radius: calc(10 * var(--services-u));
    background: #f5f5f5;
    color: #0e0e0e;
    font-size: calc(14 * var(--services-u));
    line-height: 1.3;
    white-space: nowrap;
  }

  .complex__chip-row img {
    width: auto;
    height: calc(15 * var(--services-u));
  }

  .complex__price {
    position: absolute;
    top: calc(396 * var(--services-u));
    left: 50%;
    display: grid;
    width: calc(330 * var(--services-u));
    height: calc(90 * var(--services-u));
    min-height: 0;
    grid-template-columns: calc(140 * var(--services-u)) 1fr;
    align-items: center;
    gap: calc(10 * var(--services-u));
    margin: 0;
    padding: 0 calc(16 * var(--services-u));
    border-radius: calc(15 * var(--services-u));
    background: #f5f5f5;
    color: #0e0e0e;
    transform: translateX(-50%);
  }

  .complex__price-value {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: calc(5 * var(--services-u));
    white-space: nowrap;
  }

  .complex__price-value span {
    font-size: calc(13 * var(--services-u));
  }

  .complex__price-value strong {
    font-size: calc(34 * var(--services-u));
    line-height: 1.1;
  }

  .complex__price p {
    margin: 0;
    font-size: calc(12 * var(--services-u));
    line-height: 1.3;
  }

  .complex__actions {
    position: absolute;
    top: calc(496 * var(--services-u));
    left: 50%;
    display: grid;
    width: calc(330 * var(--services-u));
    gap: calc(15 * var(--services-u));
    margin: 0;
    transform: translateX(-50%);
  }

  .complex__primary,
  .complex__secondary {
    width: calc(330 * var(--services-u));
    height: calc(56 * var(--services-u));
    border-radius: calc(15 * var(--services-u));
    font-size: calc(16 * var(--services-u));
  }

  .complex__primary {
    justify-content: center;
    padding: 0 calc(5 * var(--services-u)) 0 0;
  }

  .complex__primary > span:first-child {
    flex: 1;
    text-align: center;
  }

  .complex__primary-icon {
    width: calc(46 * var(--services-u));
    height: calc(46 * var(--services-u));
    border-radius: calc(15 * var(--services-u));
  }

  .complex__primary-icon img {
    width: calc(16 * var(--services-u));
    height: calc(14 * var(--services-u));
  }

  .complex__secondary {
    border-color: rgba(14, 14, 14, .2);
    background: #f5f5f5;
    color: #0e0e0e;
  }

  .complex__media {
    position: absolute;
    top: calc(656 * var(--services-u));
    left: calc(var(--services-x) + (15 * var(--services-u)));
    width: calc(330 * var(--services-u));
    height: calc(330 * var(--services-u));
    margin: 0;
    border-radius: calc(20 * var(--services-u));
  }

  .complex__media-image {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: calc(20 * var(--services-u));
  }

  .complex__media > p {
    left: calc(19 * var(--services-u));
    bottom: calc(19 * var(--services-u));
    font-size: calc(26 * var(--services-u));
    line-height: 1.3;
  }

  .complex__slider-controls {
    right: calc(20 * var(--services-u));
    bottom: calc(20 * var(--services-u));
    gap: calc(10 * var(--services-u));
  }

  .complex__slider-controls button {
    width: calc(50 * var(--services-u));
    height: calc(50 * var(--services-u));
    border-radius: calc(15 * var(--services-u));
  }

  .complex__slider-controls img {
    width: calc(16.667 * var(--services-u));
    height: calc(15 * var(--services-u));
  }
}

@media (max-width: 720px) {
  .complex {
    position: relative;
    width: 100%;
    height: calc(1000 * var(--services-u));
    margin: calc(30 * var(--services-u)) 0 0;
    padding: 0;
    overflow: hidden;
    color: #0e0e0e;
    background: #fff;
    border: calc(4 * var(--services-u)) solid #222;
    border-radius: calc(20 * var(--services-u));
  }

  .complex__content {
    display: contents;
  }

  .complex__title {
    position: absolute;
    top: calc(26 * var(--services-u));
    left: 50%;
    width: calc(403 * var(--services-u));
    margin: 0;
    color: #0e0e0e;
    font-size: calc(30 * var(--services-u));
    line-height: 1.3;
    text-align: center;
    text-transform: uppercase;
    transform: translateX(-50%);
  }

  .complex__title span,
  .complex__title strong {
    display: block;
    font-weight: 400;
  }

  .complex__title strong {
    color: var(--red);
  }

  .complex__description {
    position: absolute;
    top: calc(119 * var(--services-u));
    left: calc(var(--services-x) + (11 * var(--services-u)));
    width: calc(278 * var(--services-u));
    margin: 0;
    color: #0e0e0e;
    font-size: calc(14 * var(--services-u));
    line-height: 1.4;
  }

  .complex__package {
    position: absolute;
    top: calc(215 * var(--services-u));
    left: calc(var(--services-x) + (10 * var(--services-u)));
    width: calc(340 * var(--services-u));
    height: calc(164 * var(--services-u));
    margin: 0;
  }

  .complex__package h3 {
    margin: 0;
    color: #0e0e0e;
    font-size: calc(20 * var(--services-u));
    line-height: 1.3;
  }

  .complex__chips,
  .complex__chip-row {
    display: contents;
  }

  .complex__chip-row span {
    position: absolute;
    display: inline-flex;
    min-height: calc(38 * var(--services-u));
    align-items: center;
    gap: calc(8 * var(--services-u));
    padding: calc(10 * var(--services-u)) calc(14 * var(--services-u));
    border-radius: calc(10 * var(--services-u));
    background: #f5f5f5;
    color: #0e0e0e;
    font-size: calc(14 * var(--services-u));
    line-height: 1.3;
    white-space: nowrap;
  }

  .complex__chip-row img {
    width: calc(2 * var(--services-u));
    height: calc(15 * var(--services-u));
  }

  .complex__chip-row:nth-child(1) span:nth-child(1) { top: calc(36 * var(--services-u)); left: 0; }
  .complex__chip-row:nth-child(1) span:nth-child(2) { top: calc(36 * var(--services-u)); left: calc(103 * var(--services-u)); }
  .complex__chip-row:nth-child(1) span:nth-child(4) { top: calc(79 * var(--services-u)); left: 0; }
  .complex__chip-row:nth-child(2) span:nth-child(1) { top: calc(79 * var(--services-u)); left: calc(117 * var(--services-u)); }
  .complex__chip-row:nth-child(1) span:nth-child(3) { top: calc(79 * var(--services-u)); left: calc(201 * var(--services-u)); }
  .complex__chip-row:nth-child(2) span:nth-child(3) { top: calc(122 * var(--services-u)); left: 0; }
  .complex__chip-row:nth-child(2) span:nth-child(4) { top: calc(122 * var(--services-u)); left: calc(119 * var(--services-u)); }
  .complex__chip-row:nth-child(2) span:nth-child(2) { top: calc(122 * var(--services-u)); left: calc(219 * var(--services-u)); }

  .complex__price {
    position: absolute;
    top: calc(396 * var(--services-u));
    left: 50%;
    display: grid;
    width: calc(330 * var(--services-u));
    height: calc(90 * var(--services-u));
    min-height: 0;
    grid-template-columns: calc(140 * var(--services-u)) 1fr;
    align-items: center;
    gap: calc(10 * var(--services-u));
    margin: 0;
    padding: 0 calc(16 * var(--services-u));
    border-radius: calc(15 * var(--services-u));
    background: #f5f5f5;
    color: #0e0e0e;
    transform: translateX(-50%);
  }

  .complex__price-value {
    display: flex;
    align-items: baseline;
    gap: calc(5 * var(--services-u));
    white-space: nowrap;
  }

  .complex__price-value span {
    font-size: calc(13 * var(--services-u));
  }

  .complex__price-value strong {
    font-size: calc(34 * var(--services-u));
    line-height: 1.1;
  }

  .complex__price p {
    margin: 0;
    font-size: calc(12 * var(--services-u));
    line-height: 1.3;
  }

  .complex__actions {
    position: absolute;
    top: calc(496 * var(--services-u));
    left: 50%;
    display: block;
    width: calc(330 * var(--services-u));
    height: calc(127 * var(--services-u));
    gap: calc(15 * var(--services-u));
    margin: 0;
    transform: translateX(-50%);
  }

  .complex__primary,
  .complex__secondary {
    position: absolute;
    left: 0;
    display: flex;
    width: calc(330 * var(--services-u));
    height: calc(56 * var(--services-u));
    align-items: center;
    justify-content: center;
    border-radius: calc(15 * var(--services-u));
    font-size: calc(16 * var(--services-u));
    line-height: 1.2;
  }

  .complex__primary {
    top: 0;
    justify-content: center;
    padding: 0 calc(5 * var(--services-u)) 0 0;
  }

  .complex__primary > span:first-child {
    flex: 1;
    text-align: center;
  }

  .complex__primary-icon {
    top: calc(5 * var(--services-u));
    right: calc(5 * var(--services-u));
    width: calc(46 * var(--services-u));
    height: calc(46 * var(--services-u));
    border-radius: calc(15 * var(--services-u));
  }

  .complex__primary-icon img {
    width: calc(16 * var(--services-u));
    height: calc(14 * var(--services-u));
  }

  .complex__secondary {
    top: calc(71 * var(--services-u));
    border: 1px solid rgba(14, 14, 14, .2);
    background: #f5f5f5;
    color: #0e0e0e;
  }

  .complex__media {
    position: absolute;
    top: calc(651 * var(--services-u));
    left: calc(var(--services-x) + (11 * var(--services-u)));
    width: calc(330 * var(--services-u));
    height: calc(330 * var(--services-u));
    margin: 0;
    border-radius: calc(20 * var(--services-u));
  }

  .complex__media-image {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: calc(20 * var(--services-u));
  }

  .complex__media > p {
    left: calc(19 * var(--services-u));
    bottom: calc(19 * var(--services-u));
    font-size: calc(26 * var(--services-u));
    line-height: 1.3;
  }

  .complex__slider-controls {
    right: calc(20 * var(--services-u));
    bottom: calc(20 * var(--services-u));
    gap: calc(10 * var(--services-u));
  }

  .complex__slider-controls button {
    width: calc(50 * var(--services-u));
    height: calc(50 * var(--services-u));
    border-radius: calc(15 * var(--services-u));
  }

  .complex__slider-controls img {
    width: calc(16.667 * var(--services-u));
    height: calc(15 * var(--services-u));
  }
}

@media (max-width: 720px) {
  .works {
    position: relative;
    width: 100%;
    height: calc(453 * var(--services-u));
    margin: calc(46 * var(--services-u)) 0 0;
    overflow: hidden;
  }

  .works__canvas {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .works__line {
    display: none;
  }

  .works__head {
    position: absolute;
    top: 0;
    left: 50%;
    width: calc(289 * var(--services-u));
    gap: calc(15 * var(--services-u));
    align-items: center;
    text-align: center;
    transform: translateX(-50%);
  }

  .works__eyebrow {
    margin: 0;
    font-size: calc(13 * var(--services-u));
    line-height: 1.3;
    letter-spacing: calc(.26 * var(--services-u));
  }

  .works__title {
    width: calc(271 * var(--services-u));
    margin: 0;
    font-size: calc(30 * var(--services-u));
    line-height: 1.3;
  }

  .works__title span {
    display: block;
  }

  .works__head::after {
    display: block;
    width: calc(26 * var(--services-u));
    height: calc(26 * var(--services-u));
    margin-top: calc(-2 * var(--services-u));
    background: url("assets/services-tap-figma.svg") center / contain no-repeat;
    content: "";
  }

  .works-card,
  .works-card--wide,
  .works-card--mini {
    position: relative;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    width: calc(300 * var(--services-u));
    height: calc(206 * var(--services-u));
    flex: 0 0 calc(300 * var(--services-u));
    color: #fff;
  }

  .works-card:nth-of-type(n + 3) {
    display: block;
  }

  .works-card__media,
  .works-card--wide .works-card__media,
  .works-card--mini .works-card__media {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(300 * var(--services-u));
    height: calc(160 * var(--services-u));
    border-radius: calc(15 * var(--services-u));
  }

  .works-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .works-card__tag,
  .works-card--wide .works-card__tag {
    left: calc(10 * var(--services-u));
    bottom: calc(30 * var(--services-u));
    height: calc(30 * var(--services-u));
    padding: 0 calc(20 * var(--services-u));
    display: flex;
    align-items: center;
    border-radius: calc(10 * var(--services-u));
    font-size: calc(11 * var(--services-u));
    line-height: 1.3;
    background: rgb(14 14 14 / 40%);
    backdrop-filter: blur(2px);
  }

  .works-card__caption,
  .works-card--wide .works-card__caption,
  .works-card--mini .works-card__caption {
    top: calc(168 * var(--services-u)) !important;
    right: auto;
    left: 0;
    width: calc(220 * var(--services-u));
    font-size: calc(15 * var(--services-u));
    line-height: 1.3;
  }

  .works-card:nth-of-type(2) .works-card__caption {
    width: calc(279 * var(--services-u));
  }

  .works__all {
    position: absolute;
    top: auto !important;
    bottom: 0;
    left: 50% !important;
    width: calc(340 * var(--services-u));
    height: calc(56 * var(--services-u));
    border-radius: calc(15 * var(--services-u));
    transform: translateX(-50%);
  }

  .works__all span {
    font-size: calc(16 * var(--services-u));
    line-height: 1.2;
  }

  .works__feature {
    width: 100%;
    height: calc(360 * var(--services-u));
    margin: calc(28 * var(--services-u)) 0 0;
    border-radius: calc(20 * var(--services-u));
  }

  .works__canvas {
    overflow: hidden;
  }

  .works__canvas .works-card:nth-of-type(1) {
    margin-left: calc(var(--services-x) + (10 * var(--services-u)));
  }

  .works__canvas {
    display: block;
  }

  .works__canvas::after {
    position: absolute;
    top: calc(156 * var(--services-u));
    right: 0;
    width: calc(42 * var(--services-u));
    height: calc(206 * var(--services-u));
    pointer-events: none;
    background: linear-gradient(90deg, rgb(14 14 14 / 0), #0e0e0e);
    content: "";
  }

  .works__head {
    z-index: 2;
  }

  .works__canvas {
    scrollbar-width: none;
  }

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

  .works__canvas {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .works__canvas .works-card {
    scroll-snap-align: start;
  }

  .works__canvas {
    padding-top: calc(156 * var(--services-u));
    white-space: nowrap;
  }

  .works__canvas .works-card {
    display: inline-block;
    margin-right: calc(15 * var(--services-u));
    vertical-align: top;
    white-space: normal;
  }

  .works__canvas .works__head,
  .works__canvas .works__all {
    white-space: normal;
  }
}

@media (max-width: 720px) {
  .works__canvas {
    overflow: hidden;
    padding-top: 0;
    white-space: normal;
  }

  .works__rail {
    position: absolute;
    top: calc(156 * var(--services-u));
    left: 0;
    display: flex;
    width: 100%;
    height: calc(220 * var(--services-u));
    gap: calc(15 * var(--services-u));
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 calc(10 * var(--services-u)) 0 calc(var(--services-x) + (10 * var(--services-u)));
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

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

  .works__rail .works-card,
  .works__rail .works-card--wide,
  .works__rail .works-card--mini {
    position: relative;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    display: block;
    flex: 0 0 calc(300 * var(--services-u));
    width: calc(300 * var(--services-u));
    height: calc(206 * var(--services-u));
    margin: 0;
    scroll-snap-align: start;
    transform: none;
  }

  .works__canvas .works-card:nth-of-type(1) {
    margin-left: 0;
  }

  .works__canvas::after {
    z-index: 3;
  }
}

@keyframes start-help-mobile-marquee {
  0% {
    transform: translate3d(calc(-636 * var(--start-u, var(--services-u))), 0, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

@media (max-width: 720px) {
  .start-help {
    position: relative;
    --start-u: var(--services-u);
    width: calc(340 * var(--start-u));
    height: calc(374 * var(--start-u));
    min-height: 0;
    margin: calc(34 * var(--start-u)) auto 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #222;
    border-radius: calc(20 * var(--start-u));
    background: #101010;
  }

  .start-help::before {
    background-size: auto calc(914 * var(--start-u));
    background-position: left calc(-125 * var(--start-u)) top calc(-145 * var(--start-u));
    filter: brightness(.5) saturate(.9);
  }

  .start-help::after {
    background:
      linear-gradient(180deg, rgb(8 8 8 / 76%) 0%, rgb(8 8 8 / 83%) 100%),
      radial-gradient(circle at 50% 52%, rgb(236 15 19 / 15%), transparent 36%);
  }

  .start-help__content {
    position: static;
    width: 100%;
  }

  .start-help h2 {
    position: absolute;
    top: calc(19 * var(--start-u));
    left: 50%;
    width: calc(320 * var(--start-u));
    margin: 0;
    font-size: calc(26 * var(--start-u));
    line-height: 1.3;
    text-align: center;
    transform: translateX(-50%);
  }

  .start-help h2 span {
    margin: 0;
  }

  .start-help p {
    position: absolute;
    top: calc(139 * var(--start-u));
    left: 50%;
    width: calc(297 * var(--start-u));
    margin: 0;
    font-size: calc(14 * var(--start-u));
    line-height: 1.4;
    text-align: center;
    transform: translateX(-50%);
  }

  .start-help__marquee {
    top: calc(233 * var(--start-u));
    right: auto;
    left: 0;
    display: block;
    width: 100%;
    height: calc(60 * var(--start-u));
    overflow: hidden;
    transform: none;
  }

  .start-help__lane {
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .start-help__lane--up {
    display: none;
  }

  .start-help__track {
    display: flex;
    width: max-content;
    gap: calc(6 * var(--start-u));
    animation: none;
  }

  .start-help__lane--down .start-help__track {
    display: flex;
    animation: start-help-mobile-marquee 18s linear infinite;
  }

  .start-help__lane--up .start-help__track {
    animation: none;
  }

  .start-help__logo {
    width: calc(100 * var(--start-u));
    height: calc(60 * var(--start-u));
    flex: 0 0 calc(100 * var(--start-u));
    border-radius: calc(10 * var(--start-u));
    background: rgb(255 255 255 / 3%);
  }

  .start-help__logo img {
    width: calc(44 * var(--start-u));
    height: calc(44 * var(--start-u));
  }

  .start-help__button {
    position: absolute;
    top: calc(309 * var(--start-u));
    bottom: auto;
    left: 50%;
    width: calc(290 * var(--start-u));
    height: calc(57 * var(--start-u));
    margin: 0;
    padding: 0 calc(56 * var(--start-u)) 0 calc(12 * var(--start-u));
    justify-content: center;
    border-radius: calc(15 * var(--start-u));
    font-size: calc(16 * var(--start-u));
    line-height: 1.2;
    text-align: center;
    white-space: normal;
    transform: translateX(-50%);
  }

  .start-help__button > span:first-child {
    flex: 1;
    min-width: 0;
  }

  .start-help__button span:last-child {
    top: calc(5 * var(--start-u));
    right: calc(5 * var(--start-u));
    width: calc(46 * var(--start-u));
    height: calc(46 * var(--start-u));
    border-radius: calc(15 * var(--start-u));
  }

  .start-help__button img {
    width: calc(16 * var(--start-u));
    height: calc(14 * var(--start-u));
  }
}

@media (max-width: 720px) {
  .contact {
    position: relative;
    display: block;
    width: 100%;
    max-width: none;
    height: calc(996 * var(--services-u));
    margin: calc(34 * var(--services-u)) auto 0;
    overflow: hidden;
  }

  .contact__info {
    position: absolute;
    top: 0;
    left: var(--services-x);
    width: calc(360 * var(--services-u));
    height: calc(367 * var(--services-u));
  }

  .contact h2 {
    position: absolute;
    top: 0;
    left: calc(8 * var(--services-u));
    width: calc(344 * var(--services-u));
    margin: 0;
    font-size: calc(27 * var(--services-u));
    line-height: 1.22;
    letter-spacing: 0;
  }

  .contact__rows {
    position: absolute;
    top: calc(91 * var(--services-u));
    left: calc(9 * var(--services-u));
    width: calc(341 * var(--services-u));
    height: calc(276 * var(--services-u));
    border-right: 0;
  }

  .contact__row {
    position: absolute;
    left: 0;
    display: block;
    width: 100%;
    min-height: 0;
    border-bottom: 1px solid rgb(255 255 255 / 12%);
  }

  .contact__row:first-child {
    top: 0;
    height: calc(177 * var(--services-u));
  }

  .contact__row + .contact__row {
    top: calc(203 * var(--services-u));
    height: calc(73 * var(--services-u));
    min-height: 0;
  }

  .contact__icon {
    position: absolute;
    top: 0;
    left: 0;
    align-items: flex-start;
    width: calc(145 * var(--services-u));
    height: 100%;
    gap: calc(7 * var(--services-u));
    padding-top: calc(7 * var(--services-u));
    padding-left: calc(1 * var(--services-u));
    border-right: 1px solid rgb(255 255 255 / 12%);
    font-size: calc(15 * var(--services-u));
    line-height: 1.1;
  }

  .contact__icon img {
    width: calc(17 * var(--services-u));
    height: calc(17 * var(--services-u));
  }

  .contact__data {
    position: absolute;
    top: calc(54 * var(--services-u));
    right: 0;
    left: 0;
    display: grid;
    gap: calc(9 * var(--services-u));
    padding: 0;
  }

  .contact__row + .contact__row .contact__data {
    top: calc(9 * var(--services-u));
  }

  .contact__row + .contact__row .contact__data p span {
    visibility: hidden;
  }

  .contact__row + .contact__row .contact__data p strong {
    grid-column: 2;
  }

  .contact__data p {
    display: grid;
    grid-template-columns: calc(145 * var(--services-u)) minmax(0, 1fr);
    gap: calc(22 * var(--services-u));
    font-size: calc(12 * var(--services-u));
    line-height: 1.25;
  }

  .contact__data p span,
  .contact__data p strong {
    display: block;
  }

  .contact__data p span {
    margin-bottom: 0;
    padding-left: calc(1 * var(--services-u));
    color: rgb(255 255 255 / 62%);
  }

  .contact__data strong {
    font-size: calc(12 * var(--services-u));
    line-height: 1.25;
  }

  .contact__form {
    position: absolute;
    top: calc(392 * var(--services-u));
    left: calc(var(--services-x) + (10 * var(--services-u)));
    display: grid;
    width: calc(340 * var(--services-u));
    gap: calc(7 * var(--services-u));
  }

  .contact__form input,
  .contact__form select {
    height: calc(57 * var(--services-u));
    padding: 0 calc(18 * var(--services-u));
    border-color: rgb(255 255 255 / 12%);
    border-radius: calc(13 * var(--services-u));
    background: #121212;
    color: #fff;
    font-size: calc(15 * var(--services-u));
  }

  .contact__form input::placeholder {
    color: rgb(255 255 255 / 42%);
  }

  .contact__form select {
    color: rgb(255 255 255 / 48%);
    background-position:
      calc(100% - (32 * var(--services-u))) calc(24 * var(--services-u)),
      calc(100% - (25 * var(--services-u))) calc(24 * var(--services-u));
  }

  .contact__submit {
    height: calc(57 * var(--services-u));
    margin-top: calc(15 * var(--services-u));
    padding: 0 calc(64 * var(--services-u)) 0 calc(18 * var(--services-u));
    border-radius: calc(13 * var(--services-u));
    font-size: calc(15 * var(--services-u));
  }

  .contact__submit span:last-child {
    top: calc(5 * var(--services-u));
    right: calc(5 * var(--services-u));
    width: calc(47 * var(--services-u));
    height: calc(47 * var(--services-u));
    border-radius: calc(13 * var(--services-u));
  }

  .contact__submit img {
    width: calc(17 * var(--services-u));
    height: calc(15 * var(--services-u));
  }

  .contact__map {
    position: absolute;
    top: calc(737 * var(--services-u));
    left: 0;
    width: 100%;
    height: calc(259 * var(--services-u));
    margin: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
  }

  .contact__leaflet {
    height: 100%;
    border-radius: 0;
  }

  .contact__maps-logo {
    top: calc(18 * var(--services-u));
    right: calc(var(--services-x) + (16 * var(--services-u)));
    display: block;
    width: calc(96 * var(--services-u));
  }

  .contact__map-city {
    left: calc(var(--services-x) + (14 * var(--services-u)));
    bottom: calc(13 * var(--services-u));
    font-size: calc(33 * var(--services-u));
  }

  .contact__leaflet .leaflet-control-zoom {
    top: calc(15 * var(--services-u));
    left: calc(var(--services-x) + (27 * var(--services-u)));
    border-radius: calc(5 * var(--services-u));
  }

  .contact__leaflet .leaflet-control-zoom a {
    width: calc(19 * var(--services-u));
    height: calc(19 * var(--services-u));
    font-size: calc(13 * var(--services-u));
    line-height: calc(19 * var(--services-u));
  }
}

@media (max-width: 720px) {

  html,
  body,
  .page-shell {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .site-footer {
    position: relative;
    width: 100%;
    max-width: none;
    height: calc(665 * var(--services-u));
    margin: calc(46 * var(--services-u)) auto 0;
    overflow: hidden;
    border-top: 1px solid #242424;
    border-bottom: 0;
    background: #101010;
  }

  .site-footer::before {
    display: none;
  }

  .site-footer::after {
    position: absolute;
    right: calc(var(--services-x) + (10 * var(--services-u)));
    bottom: calc(12 * var(--services-u));
    left: calc(var(--services-x) + (10 * var(--services-u)));
    height: 1px;
    background: #262626;
    content: "";
  }

  .site-footer__brand {
    top: calc(17 * var(--services-u));
    left: 50%;
    width: calc(340 * var(--services-u));
    transform: translateX(-50%);
    text-align: center;
  }

  .site-footer__logo {
    width: calc(140 * var(--services-u));
    height: calc(51 * var(--services-u));
    margin: 0 auto;
  }

  .site-footer__text {
    width: calc(292 * var(--services-u));
    margin: calc(15 * var(--services-u)) auto 0;
    font-size: calc(12 * var(--services-u));
    line-height: 1.32;
  }

  .site-footer__partner {
    justify-content: center;
    width: calc(194 * var(--services-u));
    gap: calc(7 * var(--services-u));
    margin: calc(11 * var(--services-u)) auto 0;
    font-size: calc(12 * var(--services-u));
    line-height: 1.25;
  }

  .site-footer__partner img {
    width: calc(20 * var(--services-u));
    height: calc(20 * var(--services-u));
  }

  .site-footer__services {
    top: calc(171 * var(--services-u));
    left: calc(var(--services-x) + (10 * var(--services-u)));
    width: calc(340 * var(--services-u));
    padding-top: calc(21 * var(--services-u));
    border-top: 1px solid #262626;
  }

  .site-footer h2 {
    margin: 0 0 calc(16 * var(--services-u));
    font-size: calc(16 * var(--services-u));
    line-height: 1.3;
  }

  .site-footer__services div {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(5, auto);
    grid-template-columns: repeat(3, max-content);
    gap: calc(8 * var(--services-u)) calc(41 * var(--services-u));
    font-size: calc(14 * var(--services-u));
    line-height: 1.25;
  }

  .site-footer__info {
    top: calc(386 * var(--services-u));
    left: calc(var(--services-x) + (10 * var(--services-u)));
    width: calc(96 * var(--services-u));
  }

  .site-footer__addresses {
    top: calc(386 * var(--services-u));
    left: calc(var(--services-x) + (125 * var(--services-u)));
    width: calc(205 * var(--services-u));
  }

  .site-footer__info h2,
  .site-footer__addresses h2 {
    margin-bottom: calc(15 * var(--services-u));
    font-size: calc(16 * var(--services-u));
  }

  .site-footer__info div,
  .site-footer__addresses div {
    gap: calc(8 * var(--services-u));
    font-size: calc(14 * var(--services-u));
    line-height: 1.32;
    white-space: normal;
  }

  .site-footer__addresses p {
    width: calc(205 * var(--services-u));
  }

  .site-footer__button {
    top: calc(571 * var(--services-u));
    left: calc(var(--services-x) + (10 * var(--services-u)));
    width: calc(340 * var(--services-u));
    height: calc(57 * var(--services-u));
    border-radius: calc(13 * var(--services-u));
    font-size: calc(15 * var(--services-u));
  }

  .site-footer__button > span:first-child {
    padding-left: calc(13 * var(--services-u));
  }

  .site-footer__button > span:last-child {
    width: calc(47 * var(--services-u));
    height: calc(47 * var(--services-u));
    margin-right: calc(5 * var(--services-u));
    border-radius: calc(13 * var(--services-u));
  }

  .site-footer__button img {
    width: calc(17 * var(--services-u));
    height: calc(15 * var(--services-u));
  }

  .site-footer__policy,
  .site-footer__links,
  .site-footer__socials {
    display: none;
  }
}

/* ============================================================
   MOBILE MENU — rebuilt clean per Figma (node 51:243)
   Full-screen overlay, fixed white top bar, scrollable body.
   Scales with --services-u (1u = viewport/360px, defined :root per range).
   ============================================================ */
@media (max-width: 720px) {
  .desktop-menu {
    position: fixed;
    inset: 0;
    z-index: 4200;
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: calc(8 * var(--services-u)) calc(10 * var(--services-u)) calc(18 * var(--services-u));
    background: linear-gradient(180deg, rgb(11 11 11 / 98%), rgb(13 13 13 / 96%));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    backdrop-filter: blur(12px);
    transition: opacity 220ms ease, visibility 0s linear 220ms;
  }

  body.menu-is-open,
  body.address-popup-is-open {
    overflow: hidden;
  }

  body.menu-is-open .desktop-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }

  /* ---------------------------------------------------------
     ONE header for every state (hero / scrolled / addresses / menu).
     The hero's own header and the menu's own header are removed so
     there is nothing left to drift out of sync.
     --------------------------------------------------------- */
  .hero__brand,
  .hero__location,
  .desktop-menu__header {
    display: none;
  }

  .floating-header {
    position: fixed;
    z-index: 5200;
    top: calc(14 * var(--services-u));
    left: 50%;
    display: grid;
    width: calc(340 * var(--services-u));
    max-width: none;
    height: calc(56 * var(--services-u));
    grid-template-columns: calc(112 * var(--services-u)) minmax(0, 1fr) calc(90 * var(--services-u));
    align-items: center;
    gap: calc(5 * var(--services-u));
    padding: 0 calc(5 * var(--services-u)) 0 calc(8 * var(--services-u));
    border: 0;
    border-radius: calc(15 * var(--services-u));
    background: rgb(0 0 0 / 10%);
    box-shadow: none;
    backdrop-filter: blur(8px);
    /* always pinned — no scroll-dependent reveal */
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(-50%, 0, 0);
    transition: background 200ms ease;
  }

  .floating-header__logo {
    position: relative;
    display: block;
    width: calc(94 * var(--services-u));
    height: calc(34 * var(--services-u));
    overflow: hidden;
  }

  .floating-header__logo img {
    position: absolute;
    top: calc(-13 * var(--services-u));
    left: calc(-25 * var(--services-u));
    width: calc(141 * var(--services-u));
    height: auto;
    max-width: none;
    filter: none;
  }

  .floating-header__address {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-start;
    gap: calc(5 * var(--services-u));
    padding: 0;
    border: 0;
    color: #fff;
    background: none;
    font-family: "Manrope", sans-serif;
    font-size: calc(13 * var(--services-u));
    line-height: 1.2;
    text-align: left;
  }

  .floating-header__address img {
    width: calc(16 * var(--services-u));
    height: calc(16 * var(--services-u));
    flex: 0 0 auto;
  }

  .floating-header__address span {
    width: calc(84 * var(--services-u));
  }

  body.address-popup-is-open .floating-header__address span {
    display: block;
    width: calc(120 * var(--services-u));
    line-height: 1.08;
  }

  body.address-popup-is-open .floating-header__address strong,
  body.address-popup-is-open .floating-header__address small {
    display: block;
    white-space: nowrap;
  }

  body.address-popup-is-open .floating-header__address strong {
    font-size: calc(11.5 * var(--services-u));
    font-weight: 700;
  }

  body.address-popup-is-open .floating-header__address small {
    margin-top: calc(2 * var(--services-u));
    font-size: calc(10 * var(--services-u));
    opacity: .72;
  }

  body.address-popup-is-open .floating-header__address img {
    display: none;
  }

  .floating-header__menu {
    display: flex;
    width: calc(90 * var(--services-u));
    height: calc(44 * var(--services-u));
    justify-self: end;
    align-items: center;
    justify-content: center;
    gap: calc(5 * var(--services-u));
    border: 0;
    border-radius: calc(12 * var(--services-u));
    color: #0e0e0e;
    background: #fff;
    font-family: "Oswald", sans-serif;
    font-size: calc(16 * var(--services-u));
    text-transform: uppercase;
  }

  /* --- overlays (menu / addresses): same bar, white --- */
  body.menu-is-open .floating-header,
  body.address-popup-is-open .floating-header {
    background: #fff;
    backdrop-filter: none;
  }

  body.menu-is-open .floating-header__logo img,
  body.address-popup-is-open .floating-header__logo img {
    filter: url("#logo-red-black");
  }

  body.menu-is-open .floating-header__address,
  body.address-popup-is-open .floating-header__address {
    color: #0e0e0e;
  }

  body.menu-is-open .floating-header__menu,
  body.address-popup-is-open .floating-header__menu {
    border: 1px solid #0e0e0e;
    color: #0e0e0e;
    background: none;
  }

  /* addresses show the same × as the menu — it closes the addresses */
  body.address-popup-is-open .floating-header__menu-open {
    display: none;
  }

  body.address-popup-is-open .floating-header__menu-close {
    display: inline;
  }

  /* --- fixed white top bar --- */
  .desktop-menu__logo {
    position: relative;
    display: block;
    width: calc(94 * var(--services-u));
    height: calc(34 * var(--services-u));
    margin: 0;
    overflow: hidden;
  }

  .desktop-menu__logo img {
    position: absolute;
    top: calc(-13 * var(--services-u));
    left: calc(-25 * var(--services-u));
    width: calc(141 * var(--services-u));
    height: auto;
    max-width: none;
    /* white bar: recolour the white logo to black, keep the red */
    filter: url("#logo-red-black");
  }

  .desktop-menu__address {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: calc(5 * var(--services-u));
    padding: 0;
    border: 0;
    color: #0e0e0e;
    background: none;
    font-family: "Manrope", sans-serif;
    font-size: calc(13 * var(--services-u));
    line-height: 1.16;
    text-align: left;
  }

  .desktop-menu__address img {
    width: calc(16 * var(--services-u));
    height: calc(16 * var(--services-u));
    flex: 0 0 auto;
  }

  .desktop-menu__address span {
    width: auto;
  }

  .desktop-menu__close {
    display: flex;
    width: calc(90 * var(--services-u));
    height: calc(44 * var(--services-u));
    justify-self: end;
    align-items: center;
    justify-content: center;
    gap: calc(5 * var(--services-u));
    border: 1px solid #0e0e0e;
    border-radius: calc(12 * var(--services-u));
    color: #0e0e0e;
    background: none;
    font-family: "Oswald", sans-serif;
    font-size: calc(16 * var(--services-u));
    text-transform: uppercase;
  }

  .desktop-menu__close > span:first-child {
    width: auto;
    height: auto;
    background: transparent;
    font-family: "Manrope", sans-serif;
    font-size: calc(20 * var(--services-u));
    line-height: 1;
  }

  /* --- scrollable body: vertical list --- */
  .desktop-menu__content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "cats   cats"
      "links  lang"
      "links  social"
      "legal  legal";
    align-content: start;
    column-gap: calc(12 * var(--services-u));
    row-gap: 0;
    width: 100%;
    margin: 0;
    /* clear the pinned header (top 14u + height 56u + 18u gap, minus the overlay's 8u padding) */
    padding: calc(80 * var(--services-u)) 0 0;
  }

  .desktop-menu__categories {
    grid-area: cats;
    display: block;
    min-height: 0;
    gap: 0;
    border-top: 0;
  }

  .desktop-menu__category {
    min-width: 0;
    min-height: 0;
    margin: 0 0 calc(16 * var(--services-u));
    padding: 0 0 calc(16 * var(--services-u));
    border: 0;
    border-bottom: 1px solid rgb(255 255 255 / 10%);
    border-radius: 0;
    background: transparent;
    overflow: visible;
  }

  .desktop-menu__category h2 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: calc(8 * var(--services-u));
    margin: 0 0 calc(12 * var(--services-u));
    color: #fff;
    font-family: "Oswald", sans-serif;
    font-size: calc(22 * var(--services-u));
    font-weight: 400;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .desktop-menu__category h2 span {
    font-family: "Manrope", sans-serif;
    font-weight: 400;
    font-size: calc(17 * var(--services-u));
    line-height: 1;
    color: #fff;
  }

  .desktop-menu__heading-arrow {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    width: calc(10 * var(--services-u));
    height: calc(10 * var(--services-u));
    font-size: 0;
  }

  .desktop-menu__heading-arrow::before,
  .desktop-menu__heading-arrow::after {
    position: absolute;
    right: 0;
    bottom: 0;
    display: block;
    background: currentColor;
    content: "";
  }

  .desktop-menu__heading-arrow::before {
    width: calc(14 * var(--services-u));
    height: calc(2 * var(--services-u));
    transform: rotate(45deg);
    transform-origin: right center;
  }

  .desktop-menu__heading-arrow::after {
    width: calc(8 * var(--services-u));
    height: calc(8 * var(--services-u));
    border-right: calc(2 * var(--services-u)) solid currentColor;
    border-bottom: calc(2 * var(--services-u)) solid currentColor;
    background: transparent;
  }

  .desktop-menu__category > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(12 * var(--services-u)) calc(26 * var(--services-u));
  }

  .desktop-menu__category a {
    color: rgb(255 255 255 / 80%);
    font-family: "Manrope", sans-serif;
    font-size: calc(14 * var(--services-u));
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
  }

  .desktop-menu__primary-links {
    grid-area: links;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(16 * var(--services-u));
    margin: 0;
    padding: 0;
    border: 0;
  }

  .desktop-menu__primary-links a {
    color: #fff;
    font-family: "Oswald", sans-serif;
    font-size: calc(22 * var(--services-u));
    line-height: 1.2;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
  }

  /* footer wrapper dissolves; children join the content grid */
  .desktop-menu__footer {
    display: contents;
  }

  .desktop-menu__language {
    grid-area: lang;
    justify-self: end;
    align-self: start;
    display: flex;
    width: calc(90 * var(--services-u));
    height: calc(50 * var(--services-u));
    align-items: center;
    justify-content: center;
    gap: 0;
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: calc(12 * var(--services-u));
    background: rgb(14 14 14 / 90%);
    font-family: "Manrope", sans-serif;
    font-size: calc(15 * var(--services-u));
    line-height: 1.3;
  }

  .desktop-menu__language strong {
    color: #ec0f13;
    font-weight: 500;
    letter-spacing: 1px;
  }

  .desktop-menu__language span {
    margin: 0 calc(3 * var(--services-u)) 0 0;
    color: #fff;
    letter-spacing: 1px;
  }

  .desktop-menu__language button {
    padding: 0;
    border: 0;
    color: #fff;
    background: none;
    font: inherit;
    cursor: pointer;
  }

  .desktop-menu__contacts {
    grid-area: social;
    justify-self: end;
    align-self: start;
    display: flex;
    gap: calc(10 * var(--services-u));
    margin-top: calc(10 * var(--services-u));
  }

  .desktop-menu__contacts a {
    display: grid;
    width: calc(50 * var(--services-u));
    height: calc(50 * var(--services-u));
    place-items: center;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: calc(12 * var(--services-u));
    background: rgb(14 14 14 / 90%);
  }

  .desktop-menu__contacts img {
    width: calc(22 * var(--services-u));
    height: calc(22 * var(--services-u));
    filter: brightness(0) invert(1);
  }

  .desktop-menu__chat span {
    display: grid;
    width: calc(22 * var(--services-u));
    height: calc(18 * var(--services-u));
    place-items: center;
    color: #0e0e0e;
    background: #fff;
    border-radius: calc(6 * var(--services-u));
    font-size: calc(9 * var(--services-u));
    letter-spacing: 1px;
  }

  .desktop-menu__legal {
    grid-area: legal;
    display: flex;
    justify-content: space-between;
    gap: calc(20 * var(--services-u));
    margin-top: calc(18 * var(--services-u));
    padding-top: calc(17 * var(--services-u));
    border-top: 1px solid rgb(255 255 255 / 10%);
  }

  .desktop-menu__legal a {
    color: rgb(255 255 255 / 55%);
    font-family: "Manrope", sans-serif;
    font-size: calc(12 * var(--services-u));
    text-decoration: none;
    white-space: nowrap;
  }
}

@media (max-width: 1100px), (hover: none), (pointer: coarse) {
  .hero,
  .hero__background,
  .hero__background img,
  .hero__brand,
  .hero__location,
  .hero__services,
  .hero__primary,
  .hero__icon-button,
  .hero__address,
  .floating-header__logo,
  .floating-header__menu,
  .desktop-menu__logo,
  .desktop-menu__category a,
  .desktop-menu__primary-links a,
  .desktop-menu__legal a,
  .services__tab,
  .service-card__actions a,
  .services__all,
  .works-card,
  .works-card__media img,
  .works__all,
  .complex__primary,
  .complex__secondary,
  .complex__slider-controls button,
  .start-help__button,
  .contact__submit,
  .site-footer__logo,
  .site-footer__button,
  .site-footer__socials a,
  .site-footer__socials a img {
    transition-property: background-color, border-color, color, opacity;
  }

  .hero__brand:hover,
  .hero__location:hover,
  .hero__services:hover,
  .hero__primary:hover,
  .hero__icon-button:hover,
  .hero__address:hover,
  .floating-header__logo:hover,
  .floating-header__menu:hover,
  .desktop-menu__logo:hover,
  .desktop-menu__category a:hover,
  .desktop-menu__primary-links a:hover,
  .desktop-menu__legal a:hover,
  .services__tab:hover,
  .service-card__actions a:hover,
  .services__all:hover,
  .works-card:hover,
  .works-card:hover .works-card__media img,
  .works__all:hover,
  .complex__primary:hover,
  .complex__secondary:hover,
  .complex__slider-controls button:hover,
  .start-help__button:hover,
  .contact__submit:hover,
  .site-footer__logo:hover,
  .site-footer__button:hover,
  .site-footer__socials a:hover,
  .site-footer__socials a:hover img {
    transform: none !important;
    filter: none !important;
  }

  .hero {
    --hero-bg-x: 0px !important;
  }
}

/* ============================================================
   ADDRESS POPUP — shared by mobile and tablet (scales via --services-u)
   ============================================================ */
@media (max-width: 1100px) {
  .address-popup {
    z-index: 4300;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: calc(86 * var(--services-u)) calc(10 * var(--services-u)) calc(10 * var(--services-u));
    background: rgb(5 5 5 / 46%);
    backdrop-filter: blur(7px);
  }

  .address-popup__panel {
    display: grid;
    width: min(calc(340 * var(--services-u)), calc(100svw - (20 * var(--services-u))));
    height: auto;
    max-height: calc(100svh - (100 * var(--services-u)));
    overflow: hidden;
    gap: calc(9 * var(--services-u));
    padding: 0;
    border: 0;
    border-radius: calc(10 * var(--services-u));
    background: #fff;
    box-shadow: 0 calc(18 * var(--services-u)) calc(46 * var(--services-u)) rgb(0 0 0 / 32%);
    color: #0e0e0e;
    transform: translateY(-10px) scale(.98);
  }

  .address-popup__close,
  .address-popup h2 {
    display: none;
  }

  .address-popup__eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(6 * var(--services-u));
    margin: calc(12 * var(--services-u)) calc(12 * var(--services-u)) 0;
    color: #0e0e0e;
    font-size: calc(16 * var(--services-u));
    line-height: 1.1;
  }

  .address-popup__eyebrow::before {
    width: calc(15 * var(--services-u));
    height: calc(15 * var(--services-u));
    background: url("assets/untitled-hero/location.svg") center / contain no-repeat;
    content: "";
  }

  .address-popup__body {
    display: grid;
    grid-template-rows: auto minmax(calc(170 * var(--services-u)), 1fr) auto;
    height: min(calc(520 * var(--services-u)), calc(100svh - (138 * var(--services-u))));
    min-height: 0;
    gap: 0;
    margin: 0;
    padding: 0 calc(12 * var(--services-u)) calc(12 * var(--services-u));
  }

  .address-popup__content,
  .address-popup__list {
    position: static;
  }

  .address-popup__list {
    display: grid;
    grid-template-columns: calc(109 * var(--services-u)) 1fr;
    gap: calc(7 * var(--services-u)) calc(10 * var(--services-u));
    margin-bottom: calc(9 * var(--services-u));
  }

  .address-popup__list article {
    display: contents;
    min-height: 0;
    padding: 0;
    cursor: pointer;
    border: 0;
    background: none;
  }

  .address-popup__list article::before {
    display: none;
  }

  .address-popup__list span {
    color: rgb(14 14 14 / 76%);
    font-family: "Manrope", sans-serif;
    font-size: calc(11 * var(--services-u));
    line-height: 1.2;
    text-transform: none;
  }

  .address-popup__list strong {
    color: #0e0e0e;
    font-family: "Manrope", sans-serif;
    font-size: calc(13 * var(--services-u));
    font-weight: 400;
    line-height: 1.22;
  }

  .address-popup__content .address-popup__phone {
    display: none;
  }

  .address-popup__phone--mobile {
    display: flex;
    position: relative;
    z-index: 1;
    width: calc(100% + (24 * var(--services-u)));
    height: calc(38 * var(--services-u));
    align-items: center;
    justify-content: center;
    margin: 0 calc(-12 * var(--services-u)) calc(-12 * var(--services-u));
    border: 1px solid rgb(255 255 255 / 72%);
    border-top: 0;
    border-radius: 0 0 calc(10 * var(--services-u)) calc(10 * var(--services-u));
    background: var(--red);
    color: #fff;
    font-family: "Oswald", sans-serif;
    font-size: calc(17 * var(--services-u));
    line-height: 1;
    text-decoration: none;
    opacity: 0;
    transform: translateY(calc(-38 * var(--services-u)));
    transition: transform 520ms cubic-bezier(.22, 1, .36, 1), opacity 260ms ease;
  }

  body.address-popup-is-open .address-popup__phone--mobile {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1s, 1s;
  }

  .address-popup__phone--mobile:hover,
  .address-popup__phone--mobile:focus-visible {
    background: var(--red);
    color: #fff;
  }

  .address-popup__map {
    position: relative;
    z-index: 2;
    display: block;
    width: calc(100% + (24 * var(--services-u)));
    min-height: 0;
    height: 100%;
    margin: 0 calc(-12 * var(--services-u));
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 72%);
    border-bottom: 0;
    border-radius: calc(10 * var(--services-u)) calc(10 * var(--services-u)) 0 0;
    background: #090909;
  }

  .address-popup__city {
    position: absolute;
    z-index: 500;
    bottom: calc(7 * var(--services-u));
    left: calc(9 * var(--services-u));
    color: rgb(255 255 255 / 22%);
    font-family: "Oswald", sans-serif;
    font-size: calc(25 * var(--services-u));
    line-height: 1;
    text-transform: uppercase;
    pointer-events: none;
  }

  .address-popup__leaflet {
    width: 100%;
    height: 100%;
    border-radius: inherit;
  }

  .address-popup__leaflet .leaflet-control-zoom {
    margin: calc(8 * var(--services-u)) 0 0 calc(8 * var(--services-u));
  }

  .address-popup__leaflet .leaflet-control-zoom a {
    width: calc(28 * var(--services-u));
    height: calc(28 * var(--services-u));
    font-size: calc(21 * var(--services-u));
    line-height: calc(28 * var(--services-u));
  }

  .address-popup__leaflet .carsound-map-tooltip {
    display: block;
    width: calc(72 * var(--services-u));
    min-width: 0;
    padding: calc(5 * var(--services-u)) calc(6 * var(--services-u));
    border-radius: calc(7 * var(--services-u));
    white-space: normal;
  }

  .address-popup__leaflet .carsound-map-tooltip strong {
    display: block;
    font-size: calc(8.5 * var(--services-u));
    line-height: 1.05;
    overflow-wrap: anywhere;
  }

  .address-popup__leaflet .carsound-map-tooltip em {
    display: block;
    margin-top: calc(2 * var(--services-u));
    font-size: calc(7.2 * var(--services-u));
    line-height: 1.12;
    overflow-wrap: anywhere;
  }

  @media (max-height: 650px) {
    .address-popup {
      padding-top: calc(76 * var(--services-u));
    }

    .address-popup__panel {
      gap: calc(7 * var(--services-u));
      padding: 0;
    }

    .address-popup__eyebrow {
      font-size: calc(15 * var(--services-u));
    }

    .address-popup__list {
      gap: calc(5 * var(--services-u)) calc(8 * var(--services-u));
    }

    .address-popup__list span {
      font-size: calc(10.5 * var(--services-u));
      line-height: 1.15;
    }

    .address-popup__list strong {
      font-size: calc(12 * var(--services-u));
      line-height: 1.16;
    }

    .address-popup__map {
      height: 100%;
    }

    .address-popup__phone--mobile {
      height: calc(30 * var(--services-u));
      font-size: calc(15 * var(--services-u));
    }

    .address-popup__city {
      font-size: calc(19 * var(--services-u));
    }

    .address-popup__leaflet .carsound-map-tooltip {
      width: calc(58 * var(--services-u));
      padding: calc(3 * var(--services-u)) calc(4 * var(--services-u));
    }

    .address-popup__leaflet .carsound-map-tooltip strong {
      font-size: calc(7.2 * var(--services-u));
    }

    .address-popup__leaflet .carsound-map-tooltip em {
      font-size: calc(6.5 * var(--services-u));
    }
  }
}

/* ============================================================
   TABLET (721–1100) — per Figma "Main-page tablet" (768px, node 58:306).
   Header = the hero's own two pills (logo 170x70 + address 380x70),
   simply pinned to the top. Menu/addresses follow the mobile
   structure at tablet sizes.
   ============================================================ */
@media (min-width: 721px) and (max-width: 1100px) {
  /* Header = two pills per Figma (logo 170x70 + address 380x70).
     Built on .floating-header because it lives at body level — the hero's
     own pills sit inside .hero, whose stacking context traps them under
     the menu/address overlays. */
  .hero__brand,
  .hero__location,
  .desktop-menu__header {
    display: none;
  }

  .floating-header {
    position: fixed;
    /* above the menu (4200) and the address popup (4300) */
    z-index: 5300;
    top: 40px;
    left: 50%;
    display: block;
    /* inset 30px inside the hero (Figma: pills at x=30 .. 718 of a 748 frame),
       so the bar never rides over the hero's 4px border / 30px corners */
    width: min(728px, calc(100vw - 40px));
    max-width: none;
    height: 70px;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    transform: translate3d(-50%, 0, 0) scale(1);
    /* always pinned */
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  body.has-compact-header .floating-header {
    transform: translate3d(-50%, 0, 0) scale(1);
    opacity: 1;
    pointer-events: auto;
  }

  /* right pill (sits behind the address + menu button) */
  .floating-header::after {
    position: absolute;
    top: 0;
    right: 0;
    width: 380px;
    height: 70px;
    border-radius: 20px;
    background: rgb(0 0 0 / 10%);
    backdrop-filter: blur(8px);
    content: "";
    transition: background 200ms ease;
  }

  /* left pill */
  .floating-header__logo {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: block;
    width: 170px;
    height: 70px;
    margin: 0;
    overflow: hidden;
    border-radius: 20px;
    background: rgb(0 0 0 / 10%);
    backdrop-filter: blur(8px);
    transition: background 200ms ease;
  }

  .floating-header__logo img {
    position: absolute;
    top: -13px;
    left: -30px;
    width: 224px;
    height: auto;
    max-width: none;
    filter: none;
  }

  .floating-header__address {
    position: absolute;
    top: 0;
    right: 148px;
    z-index: 1;
    display: flex;
    width: 212px;
    height: 70px;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 0;
    border: 0;
    color: #fff;
    background: none;
    font-family: "Manrope", sans-serif;
    font-size: 16px;
    line-height: 1.2;
    text-align: left;
  }

  .floating-header__address img {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
  }

  .floating-header__address span {
    width: auto;
  }

  body.address-popup-is-open .floating-header__address {
    gap: 0;
  }

  body.address-popup-is-open .floating-header__address img {
    display: none;
  }

  body.address-popup-is-open .floating-header__address span {
    display: block;
    width: 100%;
    line-height: 1.08;
  }

  body.address-popup-is-open .floating-header__address strong,
  body.address-popup-is-open .floating-header__address small {
    display: block;
    white-space: nowrap;
  }

  body.address-popup-is-open .floating-header__address strong {
    font-size: 15px;
    font-weight: 700;
  }

  body.address-popup-is-open .floating-header__address small {
    margin-top: 3px;
    font-size: 13px;
    opacity: .72;
  }

  .floating-header__menu {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    display: flex;
    width: 120px;
    height: 50px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 20px;
    color: #0e0e0e;
    background: #fff;
    font-family: "Oswald", sans-serif;
    font-size: 20px;
    text-transform: uppercase;
  }

  /* --- overlays (menu / addresses): the same pills, white --- */
  body.menu-is-open .floating-header::after,
  body.address-popup-is-open .floating-header::after,
  body.menu-is-open .floating-header__logo,
  body.address-popup-is-open .floating-header__logo {
    background: #fff;
    backdrop-filter: none;
  }

  body.menu-is-open .floating-header__logo img,
  body.address-popup-is-open .floating-header__logo img {
    filter: url("#logo-red-black");
  }

  body.menu-is-open .floating-header__address,
  body.address-popup-is-open .floating-header__address {
    color: #0e0e0e;
  }

  body.menu-is-open .floating-header__menu,
  body.address-popup-is-open .floating-header__menu {
    border: 1px solid #0e0e0e;
    color: #0e0e0e;
    background: none;
  }

  /* addresses show the same × as the menu — it closes the addresses */
  body.address-popup-is-open .floating-header__menu-open {
    display: none;
  }

  body.address-popup-is-open .floating-header__menu-close {
    display: inline;
  }


  /* ---------------- menu: mobile structure, tablet sizes ---------------- */
  .desktop-menu {
    position: fixed;
    inset: 0;
    z-index: 4200;
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 108px max(18px, calc((100vw - 748px) / 2 + 30px)) 40px;
    background: linear-gradient(180deg, rgb(11 11 11 / 98%), rgb(13 13 13 / 96%));
    backdrop-filter: blur(12px);
  }

  .desktop-menu__header {
    display: none;
  }

  .desktop-menu__content,
  body.menu-is-open.has-compact-header .desktop-menu__content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "cats   cats"
      "links  lang"
      "links  social"
      "legal  legal";
    align-content: start;
    column-gap: 24px;
    row-gap: 0;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .desktop-menu__categories {
    grid-area: cats;
    display: block;
    grid-template-columns: none;
    gap: 0;
  }

  .desktop-menu__category {
    min-height: 0;
    margin: 0 0 22px;
    padding: 0 0 22px;
    border: 0;
    border-bottom: 1px solid rgb(255 255 255 / 10%);
    border-radius: 0;
    background: transparent;
    overflow: visible;
  }

  .desktop-menu__category h2 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin: 0 0 16px;
    color: #fff;
    font-family: "Oswald", sans-serif;
    font-size: 30px;
    font-weight: 400;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .desktop-menu__category h2 span {
    width: 22px;
    height: 22px;
    font-size: 22px;
  }

  .desktop-menu__category > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 36px;
  }

  .desktop-menu__category a {
    color: rgb(255 255 255 / 80%);
    font-family: "Manrope", sans-serif;
    font-size: 17px;
    line-height: 1.2;
    white-space: nowrap;
  }

  .desktop-menu__primary-links {
    grid-area: links;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    grid-template-columns: none;
    gap: 20px;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .desktop-menu__primary-links a {
    color: #fff;
    font-family: "Oswald", sans-serif;
    font-size: 30px;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .desktop-menu__footer {
    display: contents;
  }

  .desktop-menu__language {
    grid-area: lang;
    justify-self: end;
    align-self: start;
    display: flex;
    width: 130px;
    height: 60px;
    align-items: center;
    justify-content: center;
    gap: 0;
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 14px;
    background: rgb(14 14 14 / 90%);
    font-family: "Manrope", sans-serif;
    font-size: 18px;
  }

  .desktop-menu__language strong {
    color: #ec0f13;
    font-weight: 500;
  }

  .desktop-menu__language span {
    margin: 0 4px 0 0;
    color: #fff;
  }

  .desktop-menu__language button {
    padding: 0;
    border: 0;
    color: #fff;
    background: none;
    font: inherit;
  }

  .desktop-menu__contacts {
    grid-area: social;
    justify-self: end;
    align-self: start;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 14px;
  }

  .desktop-menu__contacts a {
    display: grid;
    width: 60px;
    height: 60px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 14px;
    background: rgb(14 14 14 / 90%);
  }

  .desktop-menu__contacts img {
    width: 26px;
    height: 26px;
    filter: brightness(0) invert(1);
  }

  .desktop-menu__chat span {
    display: grid;
    width: 26px;
    height: 21px;
    place-items: center;
    color: #0e0e0e;
    background: #fff;
    border-radius: 7px;
    font-size: 11px;
    letter-spacing: 1px;
  }

  .desktop-menu__legal {
    grid-area: legal;
    display: flex;
    justify-content: space-between;
    justify-items: initial;
    gap: 24px;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid rgb(255 255 255 / 10%);
  }

  .desktop-menu__legal a {
    color: rgb(255 255 255 / 55%);
    font-family: "Manrope", sans-serif;
    font-size: 14px;
    white-space: nowrap;
  }
}

/* Tablet: the address popup keeps its mobile structure — only the unit grows,
   so every calc(N * --services-u) inside it scales together. */
@media (min-width: 721px) and (max-width: 1100px) {
  .address-popup {
    --services-u: clamp(1.3px, .2svw, 1.8px);
  }
}

.floating-header__logo img {
  filter: none !important;
}

body.menu-is-open .floating-header__logo img,
body.address-popup-is-open .floating-header__logo img {
  filter: url("#logo-red-black") !important;
}

.floating-logo-mask {
  position: fixed;
  z-index: 5100;
  display: block;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.floating-logo-mask.is-active {
  opacity: 1;
}

.floating-logo-mask img {
  position: absolute;
  filter: url("#logo-red-black") !important;
}

.address-label--open {
  display: none !important;
}

body.address-popup-is-open [data-address-popup-open] .address-label--default {
  display: none !important;
}

body.address-popup-is-open [data-address-popup-open] .address-label--open {
  display: block !important;
}

body.address-popup-is-open .floating-header__address .address-label--open {
  width: 100% !important;
  line-height: 1.08;
}

body.address-popup-is-open .floating-header__address .address-label--open strong,
body.address-popup-is-open .floating-header__address .address-label--open small {
  display: block;
  white-space: nowrap;
}

@media (min-width: 1101px) and (hover: hover) and (pointer: fine) {
  body:not(.menu-is-open):not(.address-popup-is-open) .floating-header {
    color: #fff !important;
    background: rgb(10 10 10 / 28%) !important;
    border-color: rgb(255 255 255 / 18%) !important;
    box-shadow: 0 18px 46px rgb(0 0 0 / 22%) !important;
    backdrop-filter: blur(16px);
  }

  body:not(.menu-is-open):not(.address-popup-is-open) .floating-header__menu {
    color: #0e0e0e !important;
    background: #fff !important;
    border-color: rgb(255 255 255 / 70%) !important;
  }

  body:not(.menu-is-open):not(.address-popup-is-open) .floating-header__menu-open img {
    filter: none !important;
  }
}

body.services-page {
  background: #0e0e0e;
  color: #fff;
}

body.services-page .floating-header {
  position: fixed;
  top: 16px;
  margin-top: 14px;
}

.services-page__shell {
  width: min(100%, 1600px);
  margin: 0 auto;
  overflow: hidden;
}

.services-page-hero {
  position: relative;
  width: min(1500px, calc(100% - 60px));
  min-height: 620px;
  margin: 24px auto 90px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 34px;
  background: #080808;
}

.services-page-hero__media {
  position: absolute;
  inset: 0;
}

.services-page-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(0 0 0 / 82%), rgb(0 0 0 / 34%) 54%, rgb(0 0 0 / 72%)), linear-gradient(180deg, rgb(0 0 0 / 8%), rgb(0 0 0 / 70%));
}

.services-page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.services-page-hero__content {
  position: relative;
  z-index: 1;
  width: min(760px, calc(100% - 96px));
  padding: 150px 0 80px 56px;
}

.services-page-hero__content p,
.services-catalog__head p,
.services-choice__content p {
  margin: 0 0 18px;
  color: var(--red);
  font-family: "Oswald", sans-serif;
  font-size: 24px;
  line-height: 1.1;
  text-transform: uppercase;
}

.services-page-hero__content h1,
.services-catalog__head h2,
.services-choice__content h2 {
  margin: 0;
  font-family: "Oswald", sans-serif;
  font-size: clamp(72px, 6vw, 116px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: 0;
  text-transform: uppercase;
}

.services-page-hero__content span {
  display: block;
  max-width: 560px;
  margin-top: 30px;
  color: rgb(255 255 255 / 78%);
  font-size: 22px;
  line-height: 1.35;
}

.services-page-hero__cta,
.services-choice > a {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-width: 320px;
  margin-top: 44px;
  padding: 12px 12px 12px 30px;
  border-radius: 22px;
  background: var(--red);
  color: #fff;
  font-family: "Oswald", sans-serif;
  font-size: 24px;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
}

.services-page-hero__cta span:last-child,
.services-choice > a span:last-child {
  display: grid;
  width: 68px;
  height: 68px;
  place-items: center;
  border-radius: 18px;
  background: rgb(0 0 0 / 12%);
}

.services-page-hero__cta img,
.services-choice > a img {
  width: 26px;
  height: 26px;
}

.services-catalog {
  width: min(1500px, calc(100% - 60px));
  margin: 0 auto;
}

.services-catalog__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 42px;
  margin-bottom: 32px;
}

.services-catalog__head h2 {
  max-width: 920px;
  font-size: clamp(64px, 5vw, 96px);
}

.services-catalog__head h2 span {
  color: var(--red);
}

.services-catalog__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.services-tile {
  position: relative;
  min-height: 430px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 13%);
  border-radius: 24px;
  background: #161616;
  color: #fff;
}

.services-tile--wide {
  grid-column: span 2;
}

.services-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.78;
  transition: transform 0.6s ease, opacity 0.3s ease;
}

.services-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(0 0 0 / 6%), rgb(0 0 0 / 82%));
}

.services-tile div {
  position: absolute;
  z-index: 1;
  right: 28px;
  bottom: 78px;
  left: 28px;
}

.services-tile span {
  display: block;
  margin-bottom: 10px;
  color: var(--red);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
}

.services-tile h3 {
  margin: 0;
  font-family: "Oswald", sans-serif;
  font-size: 42px;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}

.services-tile p {
  max-width: 480px;
  margin: 14px 0 0;
  color: rgb(255 255 255 / 76%);
  font-size: 17px;
  line-height: 1.35;
}

.services-tile a {
  position: absolute;
  z-index: 1;
  bottom: 24px;
  left: 28px;
  color: #fff;
  font-family: "Oswald", sans-serif;
  font-size: 22px;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
}

.services-tile--red {
  background: #4e1114;
}

.services-choice {
  position: relative;
  width: min(1500px, calc(100% - 60px));
  min-height: 430px;
  margin: 90px auto;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 13%);
  border-radius: 30px;
  background: #111;
}

.services-choice > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.42;
}

.services-choice::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(12 12 12 / 92%), rgb(36 6 8 / 62%), rgb(10 10 10 / 84%));
}

.services-choice__content {
  position: relative;
  z-index: 1;
  width: min(820px, calc(100% - 80px));
  padding: 64px 0 0 52px;
}

.services-choice__content h2 {
  font-size: clamp(56px, 4.8vw, 86px);
}

.services-choice__content span {
  display: block;
  max-width: 650px;
  margin-top: 22px;
  color: rgb(255 255 255 / 76%);
  font-size: 22px;
  line-height: 1.35;
}

.services-choice > a {
  position: relative;
  z-index: 1;
  margin-left: 52px;
}

body.services-page .contact {
  margin-top: 90px;
}

body.services-page .site-footer {
  margin-top: 70px;
}

@media (hover: hover) and (pointer: fine) {
  .services-tile:hover {
    border-color: rgb(255 255 255 / 28%);
  }

  .services-tile:hover img {
    transform: scale(1.055);
    opacity: 0.92;
  }
}

@media (max-width: 1100px) {
  .services-page-hero,
  .services-catalog,
  .services-choice {
    width: calc(100% - 32px);
  }

  .services-page-hero {
    min-height: 580px;
    margin-bottom: 70px;
  }

  .services-page-hero__content {
    width: min(690px, calc(100% - 56px));
    padding: 130px 0 58px 34px;
  }

  .services-catalog__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .services-tile,
  .services-tile--wide {
    grid-column: auto;
    min-height: 380px;
  }
}

@media (max-width: 720px) {
  body.services-page .floating-header {
    top: max(6px, env(safe-area-inset-top));
    margin-top: 6px;
  }

  .services-page__shell {
    width: 100%;
  }

  .services-page-hero {
    width: calc(100% - 16px);
    min-height: 520px;
    margin: 8px auto 52px;
    border-radius: 24px;
  }

  .services-page-hero__content {
    width: calc(100% - 34px);
    padding: 110px 0 34px 17px;
  }

  .services-page-hero__content p,
  .services-catalog__head p,
  .services-choice__content p {
    margin-bottom: 12px;
    font-size: 18px;
  }

  .services-page-hero__content h1 {
    font-size: clamp(42px, 12.6vw, 60px);
  }

  .services-page-hero__content span {
    max-width: 92%;
    margin-top: 18px;
    font-size: 18px;
  }

  .services-page-hero__cta,
  .services-choice > a {
    min-width: 0;
    width: min(100%, 340px);
    margin-top: 28px;
    padding: 10px 10px 10px 20px;
    border-radius: 18px;
    font-size: 20px;
  }

  .services-page-hero__cta span:last-child,
  .services-choice > a span:last-child {
    width: 58px;
    height: 58px;
    border-radius: 15px;
  }

  .services-catalog {
    width: calc(100% - 16px);
  }

  .services-catalog__head {
    display: block;
    margin-bottom: 18px;
  }

  .services-catalog__head h2 {
    font-size: clamp(42px, 13vw, 58px);
  }

  .services-catalog__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .services-tile,
  .services-tile--wide {
    min-height: 354px;
    border-radius: 22px;
  }

  .services-tile div {
    right: 18px;
    bottom: 70px;
    left: 18px;
  }

  .services-tile h3 {
    font-size: 32px;
  }

  .services-tile p {
    font-size: 16px;
  }

  .services-tile a {
    bottom: 22px;
    left: 18px;
    font-size: 20px;
  }

  .services-choice {
    width: calc(100% - 16px);
    min-height: 420px;
    margin: 52px auto 58px;
    border-radius: 24px;
  }

  .services-choice__content {
    width: calc(100% - 34px);
    padding: 34px 0 0 17px;
  }

  .services-choice__content h2 {
    font-size: clamp(40px, 12vw, 54px);
  }

  .services-choice__content span {
    margin-top: 16px;
    font-size: 18px;
  }

  .services-choice > a {
    margin-left: 17px;
  }

  body.services-page .contact {
    margin-top: 58px;
  }

  body.services-page .site-footer {
    margin-top: 48px;
  }
}

body.services-page .services-page__shell {
  padding-top: 86px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

.services-page-intro {
  display: flex;
  width: min(1500px, calc(100% - 60px));
  margin: 0 auto 38px;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  text-align: center;
}

.services-page-intro__crumbs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgb(255 255 255 / 60%);
  font-size: 15px;
  line-height: 1.25;
}

.services-page-intro__crumbs a {
  display: inline-flex;
  color: rgb(255 255 255 / 60%);
  text-decoration: none;
}

.services-page-intro__crumbs svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.services-page-intro h1 {
  width: 100%;
  margin: 0;
  color: #fff;
  font-family: "Oswald", sans-serif;
  font-size: 70px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
}

.services-page-intro h1 span {
  color: var(--red);
}

.services-page-intro > p {
  width: min(661px, 100%);
  margin: 0;
  color: #fff;
  font-size: 18px;
  line-height: 1.5;
}

.services-catalog__filters {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 0 0 25px;
}

.services-catalog__filters a {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border: 1px solid #222;
  border-radius: 10px;
  background: rgb(0 0 0 / 10%);
  color: #fff;
  font-size: 16px;
  line-height: 1.3;
  text-decoration: none;
}

.services-catalog__filters a.is-active {
  border-color: #f5f5f5;
  background: #f5f5f5;
  color: #0e0e0e;
}

@media (min-width: 1101px) {
  body.services-page .services-page__shell {
    padding-top: 116px;
  }

  .services-catalog__grid {
    gap: 25px;
  }

  .services-tile,
  .services-tile--wide {
    min-height: 561px;
    border-radius: 20px;
  }

  .services-tile--wide {
    grid-column: auto;
  }
}

@media (max-width: 1100px) {
  body.services-page .services-page__shell {
    padding-top: 104px;
  }

  .services-page-intro {
    width: calc(100% - 32px);
    margin-bottom: 30px;
    gap: 22px;
  }

  .services-page-intro h1 {
    font-size: clamp(50px, 7.5vw, 70px);
  }

  .services-catalog__filters {
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .services-catalog__filters::-webkit-scrollbar {
    display: none;
  }

  .services-catalog__filters a {
    flex: 0 0 auto;
  }
}

@media (max-width: 720px) {
  body.services-page .services-page__shell {
    padding-top: 88px;
  }

  .services-page-intro {
    width: calc(100% - 20px);
    margin-bottom: 22px;
    gap: 16px;
  }

  .services-page-intro__crumbs {
    font-size: 13px;
  }

  .services-page-intro h1 {
    font-size: clamp(38px, 12vw, 52px);
  }

  .services-page-intro > p {
    font-size: 15px;
  }

  .services-catalog__filters {
    width: calc(100vw - 16px);
    margin-left: calc((100% - (100vw - 16px)) / 2);
    padding: 0 0 4px;
  }

  .services-catalog__filters a {
    min-height: 40px;
    padding: 0 16px;
    font-size: 15px;
  }
}

/* WordPress popup/header fixes kept outside layout rules */
.address-label--open {
  display: none !important;
}

body.address-popup-is-open .floating-header__address .address-label--default {
  display: none !important;
}

body.address-popup-is-open .floating-header__address .address-label--open {
  display: block !important;
}

body.address-popup-is-open .floating-header__address .address-label--open {
  width: 100% !important;
  line-height: 1.08;
}

body.address-popup-is-open .floating-header__address .address-label--open strong,
body.address-popup-is-open .floating-header__address .address-label--open small {
  display: block;
  white-space: nowrap;
}

body.menu-is-open .floating-header,
body.address-popup-is-open .floating-header {
  z-index: 6500 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  filter: none !important;
  backdrop-filter: none !important;
}

body.address-popup-is-open .floating-header {
  transform: translate3d(-50%, 0, 0) scale(1) !important;
  background: #fff !important;
  color: #0e0e0e !important;
  border-color: rgb(14 14 14 / 14%) !important;
  box-shadow: 0 18px 44px rgb(0 0 0 / 20%) !important;
}

body.address-popup-is-open .floating-header::before,
body.address-popup-is-open .floating-header::after {
  filter: none !important;
  backdrop-filter: none !important;
}

body.address-popup-is-open .floating-header__address img {
  display: none !important;
}

body.address-popup-is-open .hero__address .address-label--default,
body.address-popup-is-open .desktop-menu__address .address-label--default {
  display: inline !important;
}

body.address-popup-is-open .hero__address .address-label--open,
body.address-popup-is-open .desktop-menu__address .address-label--open {
  display: none !important;
}

body.address-popup-is-open .floating-header__address .address-label--default {
  display: none !important;
}

body.address-popup-is-open .floating-header__address .address-label--open {
  display: block !important;
}

@media (max-width: 720px) {
  .address-popup__map {
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    width: 100% !important;
    height: clamp(210px, 34svh, 320px) !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgb(255 255 255 / 72%) !important;
    border-bottom: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    background: #090909 !important;
  }

  .address-popup__leaflet {
    width: 100% !important;
    height: 100% !important;
    border-radius: inherit !important;
  }

  .address-popup__phone--mobile {
    width: 100% !important;
    height: clamp(46px, 8svh, 58px) !important;
    margin: 0 !important;
    border: 1px solid var(--red) !important;
    border-top: 0 !important;
    border-radius: 0 0 18px 18px !important;
    background: #4b080a !important;
    color: #fff !important;
    font-size: clamp(24px, 7vw, 34px) !important;
  }

  .address-popup__city {
    top: auto !important;
    right: auto !important;
    bottom: 12px !important;
    left: 14px !important;
    z-index: 500 !important;
    color: rgb(255 255 255 / 20%) !important;
    font-family: "Oswald", sans-serif !important;
    font-size: clamp(34px, 10vw, 52px) !important;
    line-height: .9 !important;
    text-transform: uppercase !important;
    pointer-events: none !important;
  }
}

@media (max-width: 720px) {
  .services {
    --services-scroll-thumb-x: calc(-30 * var(--services-u));
  }

  .services__header::after {
    display: none !important;
  }

  .services::before,
  .services::after {
    content: "" !important;
    position: absolute !important;
    z-index: 4 !important;
    left: 50% !important;
    display: block !important;
    pointer-events: none !important;
  }

  .services::before {
    top: calc(608 * var(--services-u)) !important;
    width: calc(84 * var(--services-u)) !important;
    height: calc(3 * var(--services-u)) !important;
    border-radius: 999px !important;
    background: rgb(255 255 255 / 28%) !important;
    transform: translateX(-50%) !important;
  }

  .services::after {
    top: calc(608 * var(--services-u)) !important;
    width: calc(24 * var(--services-u)) !important;
    height: calc(3 * var(--services-u)) !important;
    border-radius: 999px !important;
    background: rgb(255 255 255 / 88%) !important;
    transform: translateX(calc(-50% + var(--services-scroll-thumb-x))) !important;
    transition: transform 90ms linear !important;
  }

  .services {
    height: calc(720 * var(--services-u)) !important;
  }

  .services__list {
    height: calc(420 * var(--services-u)) !important;
  }

  .service-card,
  .service-card:nth-child(1),
  .service-card:nth-child(2),
  .service-card:nth-child(3) {
    width: calc(258 * var(--services-u)) !important;
    height: calc(405 * var(--services-u)) !important;
    flex-basis: calc(258 * var(--services-u)) !important;
  }

  .service-card__media,
  .service-card__media--shade,
  .service-card > .service-card__image {
    width: calc(248 * var(--services-u)) !important;
    height: calc(194 * var(--services-u)) !important;
  }

  .service-card__image,
  .service-card__media .service-card__image,
  .service-card > .service-card__image {
    width: calc(248 * var(--services-u)) !important;
    height: calc(194 * var(--services-u)) !important;
  }

  .service-card__heading {
    top: calc(218 * var(--services-u)) !important;
    right: calc(12 * var(--services-u)) !important;
    left: calc(12 * var(--services-u)) !important;
    gap: calc(10 * var(--services-u)) !important;
  }

  .service-card__heading h3 {
    font-size: calc(22 * var(--services-u)) !important;
  }

  .service-card__heading p {
    width: calc(112 * var(--services-u)) !important;
    font-size: calc(12.5 * var(--services-u)) !important;
  }

  .service-card__price {
    top: calc(288 * var(--services-u)) !important;
    left: calc(14 * var(--services-u)) !important;
    font-size: calc(16 * var(--services-u)) !important;
  }

  .service-card__actions {
    height: calc(64 * var(--services-u)) !important;
    grid-template-columns: 1fr 1fr !important;
  }

  .service-card__actions > a {
    height: calc(64 * var(--services-u)) !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding: 0 calc(8 * var(--services-u)) !important;
    font-size: calc(13 * var(--services-u)) !important;
    white-space: nowrap !important;
  }

  .service-card__actions > a:last-child {
    justify-content: space-around !important;
    gap: calc(5 * var(--services-u)) !important;
  }

  .service-card__actions span {
    width: calc(34 * var(--services-u)) !important;
    height: calc(34 * var(--services-u)) !important;
    flex: 0 0 auto !important;
  }

  .services__all {
    top: calc(642 * var(--services-u)) !important;
  }
}

@media (min-width: 1101px) and (hover: hover) and (pointer: fine) {
  .service-card {
    transition: border-color 180ms ease, background-color 180ms ease;
  }

  .service-card__actions > a {
    transition: background-color 180ms ease, color 180ms ease, opacity 180ms ease;
  }

  .service-card__actions > a:hover {
    background: rgb(255 255 255 / 6%);
  }

  .service-card__actions > a:last-child:hover span {
    background: var(--red);
  }
}

.quick-call {
  border-color: rgb(255 255 255 / 72%) !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: 0 18px 42px rgb(0 0 0 / 28%) !important;
  backdrop-filter: none !important;
}

.quick-call img {
  filter: brightness(0) saturate(100%) !important;
}

@media (min-width: 1101px) and (hover: hover) and (pointer: fine) {
  body.quick-call-is-visible .quick-call:hover {
    transform: translateY(-3px) !important;
    filter: none !important;
    box-shadow: 0 22px 48px rgb(0 0 0 / 34%) !important;
  }
}

@media (max-width: 720px) {
  .quick-call {
    border-radius: 15px !important;
  }
}

@media (min-width: 1101px) {
  html {
    scrollbar-color: var(--red) #161616;
    scrollbar-width: thin;
  }

  body::-webkit-scrollbar {
    width: 12px;
  }

  body::-webkit-scrollbar-track {
    background: #161616;
  }

  body::-webkit-scrollbar-thumb {
    border: 3px solid #161616;
    border-radius: 999px;
    background: var(--red);
  }

  body::-webkit-scrollbar-thumb:hover {
    background: #ff2327;
  }
}

/* Services page rebuilt from Figma nodes 62:450 and 62:458 */
body.services-page .services-page__shell {
  width: 100%;
  max-width: none;
  padding-top: 104px;
  overflow: hidden;
}

body.services-page .services-page-intro {
  display: flex;
  width: min(100%, 1500px);
  margin: 0 auto 70px;
  padding: 0 40px;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  text-align: center;
}

body.services-page .services-page-intro__crumbs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  color: rgb(255 255 255 / 60%);
  font-family: "Manrope", sans-serif;
  font-size: 15px;
  font-weight: 300;
  line-height: 1;
}

body.services-page .services-page-intro__crumbs a {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  color: rgb(255 255 255 / 60%);
}

body.services-page .services-page-intro__crumbs svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
}

body.services-page .services-page-intro h1 {
  width: 100%;
  margin: 0;
  color: #fff;
  font-family: "Oswald", sans-serif;
  font-size: 70px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
}

body.services-page .services-page-intro h1 span {
  color: var(--red);
}

body.services-page .services-page-intro > p {
  width: min(661px, 100%);
  margin: 0;
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
}

body.services-page .services-catalog__filters {
  display: flex;
  width: auto;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 2px 0 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

body.services-page .services-catalog__filters::-webkit-scrollbar {
  display: none;
}

body.services-page .services-catalog__filters a {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: center;
  padding: 20px 30px;
  border: 1px solid #222;
  border-radius: 20px;
  background: rgb(255 255 255 / 3%);
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.3;
  white-space: nowrap;
}

body.services-page .services-catalog__filters a.is-active {
  border-color: rgb(255 255 255 / 3%);
  background: #fff;
  color: #0e0e0e;
  font-weight: 600;
}

body.services-page .services-catalog {
  width: min(1500px, calc(100% - 80px));
  margin: 0 auto;
}

body.services-page .services-catalog__grid {
  display: grid;
  grid-template-columns: repeat(3, 450px);
  justify-content: center;
  gap: 25px;
}

body.services-page .services-catalog__grid .service-card {
  width: 450px;
  height: 561px;
  flex: none;
}

body.services-page .complex {
  width: min(1500px, calc(100% - 80px));
  max-width: 1500px;
}

body.services-page .services-tile {
  position: relative;
  width: 450px;
  height: 561px;
  overflow: hidden;
  border: 1px solid #222;
  border-radius: 20px;
  background: #0e0e0e;
  color: #fff;
}

body.services-page .services-tile__media {
  position: absolute;
  top: 9px;
  left: 9px;
  width: 430px;
  height: 280px;
  overflow: hidden;
  border-radius: 20px;
}

body.services-page .services-tile__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease, opacity .3s ease;
}

body.services-page .services-tile__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(0 0 0 / 0%) 48%, rgb(0 0 0 / 72%) 93%);
  pointer-events: none;
}

body.services-page .services-tile__body {
  position: absolute;
  top: 319px;
  right: 24px;
  left: 24px;
  display: grid;
  grid-template-columns: 1fr 232px;
  column-gap: 18px;
  align-items: start;
}

body.services-page .services-tile h3 {
  grid-column: 1;
  margin: 0;
  font-family: "Oswald", sans-serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;
}

body.services-page .services-tile p {
  grid-column: 2;
  margin: 1px 0 0;
  color: rgb(255 255 255 / 80%);
  font-family: "Manrope", sans-serif;
  font-size: 18px;
  line-height: 1.3;
  text-align: right;
}

body.services-page .services-tile strong {
  display: block;
  grid-column: 1;
  margin-top: 72px;
  color: rgb(255 255 255 / 80%);
  font-family: "Manrope", sans-serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.3;
}

body.services-page .services-tile__actions {
  position: absolute;
  right: -1px;
  bottom: -1px;
  left: -1px;
  display: grid;
  height: 80px;
  grid-template-columns: 200px 1fr;
}

body.services-page .services-tile__actions a {
  position: static;
  z-index: auto;
  bottom: auto;
  left: auto;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid #222;
  color: #fff;
  font-family: "Oswald", sans-serif;
  font-size: 20px;
  line-height: 1.2;
  text-transform: uppercase;
}

body.services-page .services-tile__actions a:first-child {
  border-radius: 0 0 0 10px;
}

body.services-page .services-tile__actions a:last-child {
  gap: 15px;
  border-radius: 0 0 10px 0;
}

body.services-page .services-tile__actions span {
  display: grid;
  width: 46px;
  height: 46px;
  margin: 0;
  place-items: center;
  border-radius: 15px;
  background: #222;
}

body.services-page .services-tile__actions img {
  width: 16px;
  height: 14px;
}

@media (hover: hover) and (pointer: fine) {
  body.services-page .services-tile:hover .services-tile__media img {
    transform: scale(1.045);
    opacity: .9;
  }

  body.services-page .services-catalog__filters a:hover {
    border-color: rgb(255 255 255 / 22%);
  }
}

@media (max-width: 1100px) {
  body.services-page .services-page__shell {
    padding-top: 96px;
  }

  body.services-page .services-page-intro {
    width: calc(100% - 32px);
    margin-bottom: 52px;
    padding: 0;
  }

  body.services-page .services-page-intro h1 {
    font-size: clamp(50px, 7.2vw, 70px);
  }

  body.services-page .services-catalog {
    width: calc(100% - 32px);
  }

  body.services-page .services-catalog__grid {
    grid-template-columns: repeat(2, minmax(0, 450px));
  }

  body.services-page .services-catalog__grid .service-card {
    width: 100%;
  }

  body.services-page .complex {
    width: calc(100% - 48px);
  }
}

@media (max-width: 720px) {
  body.services-page .services-page__shell {
    padding-top: 88px;
  }

  body.services-page .services-page-intro {
    width: calc(100% - 20px);
    margin-bottom: 36px;
    gap: 18px;
  }

  body.services-page .services-page-intro__crumbs {
    font-size: 13px;
  }

  body.services-page .services-page-intro h1 {
    font-size: clamp(38px, 11.4vw, 52px);
    line-height: 1.16;
  }

  body.services-page .services-page-intro > p {
    font-size: 15px;
  }

  body.services-page .services-catalog__filters {
    width: calc(100vw - 20px);
    justify-content: flex-start;
    margin-top: 4px;
    padding-bottom: 2px;
  }

  body.services-page .services-catalog__filters a {
    min-height: 44px;
    padding: 12px 18px;
    border-radius: 14px;
    font-size: 15px;
  }

  body.services-page .services-catalog {
    width: calc(100% - 20px);
  }

  body.services-page .services-catalog__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  body.services-page .services-catalog__grid .service-card {
    width: 100% !important;
  }

  body.services-page .complex {
    width: calc(100% - 20px) !important;
  }

  body.services-page .services-tile {
    width: 100%;
    height: auto;
    min-height: 448px;
    border-radius: 20px;
  }

  body.services-page .services-tile__media {
    width: calc(100% - 18px);
    height: 220px;
  }

  body.services-page .services-tile__body {
    top: 247px;
    right: 18px;
    left: 18px;
    grid-template-columns: 1fr minmax(120px, 52%);
    column-gap: 12px;
  }

  body.services-page .services-tile h3 {
    font-size: 34px;
  }

  body.services-page .services-tile p {
    font-size: 16px;
  }

  body.services-page .services-tile strong {
    margin-top: 56px;
    font-size: 20px;
  }

  body.services-page .services-tile__actions {
    height: 70px;
    grid-template-columns: 42% 1fr;
  }

  body.services-page .services-tile__actions a {
    font-size: 20px;
  }

  body.services-page .services-tile__actions span {
    width: 42px;
    height: 42px;
    border-radius: 13px;
  }
}

/* --- 0.1 hero: сторінка "Про нас" --- */

.hero--page {
  height: min(600px, calc(100vw * 600 / 1476));
  min-height: 460px;
}

.hero--page::before {
  background: rgba(4, 4, 4, 0.9);
}

.hero__copy--center {
  top: 210px;
  left: 50%;
  width: min(1176px, calc(100% - 60px));
  transform: translateX(-50%);
  text-align: center;
}

.hero__crumbs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 20px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 15px;
  line-height: 1.25;
}

.hero__crumbs a {
  display: inline-flex;
  color: rgba(255, 255, 255, 0.6);
}

.hero__crumbs svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.hero__copy--center h1 {
  width: 100%;
  max-width: none;
  font-size: 70px;
}

.hero__copy--center h1 span {
  color: var(--red);
}

.hero__copy--center .hero__lead {
  width: min(661px, 100%);
  margin: 30px auto 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
}

@media (max-width: 1100px) {
  .hero--page {
    height: 620px;
    min-height: 620px;
  }

  .hero__copy--center {
    top: 168px;
    width: calc(100% - 48px);
  }

  .hero__copy--center h1 {
    font-size: clamp(48px, 7vw, 70px);
  }
}

@media (max-width: 720px) {
  .hero--page {
    height: 640px;
    min-height: 640px;
  }

  .hero__copy--center {
    top: 150px;
    width: calc(100% - 32px);
  }

  .hero__crumbs {
    font-size: 13px;
  }

  .hero__copy--center h1 {
    font-size: clamp(34px, 10vw, 48px);
    line-height: 1.2;
  }

  .hero__copy--center .hero__lead {
    margin-top: 18px;
    font-size: 15px;
  }
}

/* Final mobile services card fix */
@media (max-width: 1100px) {
  .services {
    height: calc(700 * var(--services-u)) !important;
  }

  .services__list {
    height: calc(430 * var(--services-u)) !important;
  }

  .service-card,
  .service-card:nth-child(1),
  .service-card:nth-child(2),
  .service-card:nth-child(3) {
    width: calc(266 * var(--services-u)) !important;
    height: calc(410 * var(--services-u)) !important;
    flex: 0 0 calc(266 * var(--services-u)) !important;
  }

  .service-card__media,
  .service-card__media--shade,
  .service-card > .service-card__image {
    width: calc(256 * var(--services-u)) !important;
    height: calc(194 * var(--services-u)) !important;
  }

  .service-card__image,
  .service-card__media .service-card__image,
  .service-card > .service-card__image {
    width: calc(256 * var(--services-u)) !important;
    height: calc(194 * var(--services-u)) !important;
  }

  .service-card__heading {
    top: calc(220 * var(--services-u)) !important;
    right: calc(12 * var(--services-u)) !important;
    left: calc(12 * var(--services-u)) !important;
    gap: calc(10 * var(--services-u)) !important;
  }

  .service-card__heading h3 {
    font-size: calc(22 * var(--services-u)) !important;
  }

  .service-card__heading p {
    width: calc(118 * var(--services-u)) !important;
    margin-top: calc(2 * var(--services-u)) !important;
    font-size: calc(12.5 * var(--services-u)) !important;
  }

  .service-card__price {
    top: calc(292 * var(--services-u)) !important;
    left: calc(14 * var(--services-u)) !important;
    font-size: calc(16 * var(--services-u)) !important;
  }

  .service-card__actions {
    right: calc(-1 * var(--services-u)) !important;
    bottom: calc(-1 * var(--services-u)) !important;
    left: calc(-1 * var(--services-u)) !important;
    display: grid !important;
    height: calc(66 * var(--services-u)) !important;
    grid-template-columns: 1fr 1fr !important;
    border-top: 1px solid #222 !important;
  }

  .service-card__actions > a {
    position: static !important;
    display: flex !important;
    min-width: 0 !important;
    height: calc(66 * var(--services-u)) !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding: 0 calc(8 * var(--services-u)) !important;
    border-radius: 0 !important;
    font-size: calc(13 * var(--services-u)) !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    transform: none !important;
  }

  .service-card__actions > a:first-child {
    border-right: 1px solid #222 !important;
  }

  .service-card__actions > a:last-child {
    gap: calc(6 * var(--services-u)) !important;
  }

  .service-card__actions span {
    display: grid !important;
    width: calc(34 * var(--services-u)) !important;
    height: calc(34 * var(--services-u)) !important;
    flex: 0 0 auto !important;
    place-items: center !important;
    border-radius: calc(10 * var(--services-u)) !important;
  }

  .service-card__actions img {
    display: block !important;
    width: calc(14 * var(--services-u)) !important;
    height: calc(13 * var(--services-u)) !important;
  }

  .services__all {
    top: calc(638 * var(--services-u)) !important;
  }
}

@media (min-width: 1101px) and (hover: hover) and (pointer: fine) {
  .service-card__actions > a,
  body.services-page .services-tile__actions a {
    transition: color 180ms ease, opacity 180ms ease !important;
  }

  .service-card__actions > a:hover,
  body.services-page .services-tile__actions a:hover {
    background: transparent !important;
    color: var(--red) !important;
  }

  .service-card__actions > a:last-child:hover span,
  body.services-page .services-tile__actions a:last-child:hover span {
    background: var(--red) !important;
    transition: background-color 180ms ease !important;
  }
}

/* Services cards hard fix: main slider + /poslugy/ catalog */
@media (max-width: 1100px) {
  .service-card,
  .service-card:nth-child(1),
  .service-card:nth-child(2),
  .service-card:nth-child(3) {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    width: calc(266 * var(--services-u)) !important;
    height: calc(410 * var(--services-u)) !important;
    flex: 0 0 calc(266 * var(--services-u)) !important;
    flex-basis: calc(266 * var(--services-u)) !important;
    transform: none !important;
  }

  .service-card__actions,
  body.services-page .services-tile__actions {
    position: absolute !important;
    right: -1px !important;
    bottom: -1px !important;
    left: -1px !important;
    display: grid !important;
    height: calc(66 * var(--services-u)) !important;
    grid-template-columns: 1fr 1.18fr !important;
    border-top: 1px solid #222 !important;
  }

  .service-card__actions > a,
  body.services-page .services-tile__actions a {
    position: static !important;
    display: flex !important;
    min-width: 0 !important;
    height: calc(66 * var(--services-u)) !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding: 0 calc(8 * var(--services-u)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #fff !important;
    font-size: calc(13 * var(--services-u)) !important;
    line-height: 1.1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    transform: none !important;
  }

  .service-card__actions > a:first-child,
  body.services-page .services-tile__actions a:first-child {
    grid-column: 1 !important;
    border-right: 1px solid #222 !important;
  }

  .service-card__actions > a:last-child,
  body.services-page .services-tile__actions a:last-child {
    grid-column: 2 !important;
    gap: calc(6 * var(--services-u)) !important;
  }

  .service-card__actions span,
  body.services-page .services-tile__actions span {
    display: grid !important;
    width: calc(34 * var(--services-u)) !important;
    height: calc(34 * var(--services-u)) !important;
    flex: 0 0 auto !important;
    place-items: center !important;
    border-radius: calc(10 * var(--services-u)) !important;
    background: #222 !important;
  }

  .service-card__actions img,
  body.services-page .services-tile__actions img {
    display: block !important;
    width: calc(14 * var(--services-u)) !important;
    height: calc(13 * var(--services-u)) !important;
  }

  body.services-page .services-tile {
    height: calc(410 * var(--services-u)) !important;
    min-height: 0 !important;
  }

  body.services-page .services-tile__media {
    top: calc(4 * var(--services-u)) !important;
    left: calc(4 * var(--services-u)) !important;
    width: calc(100% - (8 * var(--services-u))) !important;
    height: calc(194 * var(--services-u)) !important;
  }

  body.services-page .services-tile__body {
    top: calc(220 * var(--services-u)) !important;
    right: calc(12 * var(--services-u)) !important;
    left: calc(12 * var(--services-u)) !important;
    display: grid !important;
    grid-template-columns: 1fr calc(118 * var(--services-u)) !important;
    column-gap: calc(10 * var(--services-u)) !important;
    align-items: start !important;
  }

  body.services-page .services-tile h3 {
    margin: 0 !important;
    font-size: calc(22 * var(--services-u)) !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
  }

  body.services-page .services-tile p {
    margin: calc(2 * var(--services-u)) 0 0 !important;
    font-size: calc(12.5 * var(--services-u)) !important;
    line-height: 1.3 !important;
    text-align: right !important;
  }

  body.services-page .services-tile strong {
    grid-column: 1 !important;
    margin-top: calc(42 * var(--services-u)) !important;
    font-size: calc(16 * var(--services-u)) !important;
  }
}

body.services-page .services-tile__actions a {
  position: static !important;
  z-index: auto !important;
  bottom: auto !important;
  left: auto !important;
  display: flex !important;
  min-width: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  margin: 0 !important;
  background: transparent !important;
  text-decoration: none !important;
  transform: none !important;
}

body.services-page .services-tile__actions span {
  margin: 0 !important;
}

@media (min-width: 1101px) {
  body.services-page .services-tile__actions a {
    height: 80px !important;
    padding: 0 18px !important;
    font-size: 20px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }

  body.services-page .services-tile__actions a:first-child {
    border-right: 0 !important;
  }

  body.services-page .services-tile__actions a:last-child {
    gap: 14px !important;
  }
}

.service-card,
body.services-page .services-catalog__grid .service-card {
  border: 1px solid var(--border) !important;
  background: #101010 !important;
}

.service-card__actions > a {
  border: 1px solid var(--border) !important;
}

.service-card__actions {
  grid-template-columns: 1fr 1fr !important;
}

.service-card__media,
.service-card__media--shade,
.service-card > .service-card__image {
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  border-radius: 20px 20px 0 0 !important;
}

.service-card__media,
.service-card__image,
.service-card > .service-card__image {
  height: 280px !important;
}

.service-card__image,
.service-card__media .service-card__image,
.service-card > .service-card__image {
  width: 100% !important;
  object-fit: cover !important;
  border-radius: 20px 20px 0 0 !important;
}

@media (min-width: 1101px) and (hover: hover) and (pointer: fine) {
  .service-card__media,
  .service-card > .service-card__image {
    transition: height 520ms cubic-bezier(.22, 1, .36, 1), border-radius 520ms cubic-bezier(.22, 1, .36, 1), transform 520ms cubic-bezier(.22, 1, .36, 1) !important;
  }

  .service-card:hover .service-card__media,
  .service-card:hover > .service-card__image {
    height: calc(100% - 80px) !important;
    border-radius: 20px !important;
  }

  .service-card:hover .service-card__image {
    height: 100% !important;
    border-radius: 20px !important;
    transform: scale(1.035) !important;
  }
}

@media (max-width: 1100px) {
  .service-card__media,
  .service-card__media--shade,
  .service-card > .service-card__image {
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
  }

  .service-card__media,
  .service-card__image,
  .service-card > .service-card__image {
    height: calc(198 * var(--services-u)) !important;
  }
}

.address-popup__map {
  box-sizing: border-box !important;
  padding-top: 14px !important;
  background: #090909 !important;
}

.address-popup__leaflet {
  height: calc(100% - 14px) !important;
  border-radius: 16px 16px 0 0 !important;
}

.address-popup__leaflet .leaflet-control-zoom {
  margin-top: 8px !important;
}

@media (max-width: 720px) {
  .address-popup__map {
    padding-top: calc(10 * var(--services-u)) !important;
  }

  .address-popup__leaflet {
    height: calc(100% - (10 * var(--services-u))) !important;
    border-radius: calc(14 * var(--services-u)) calc(14 * var(--services-u)) 0 0 !important;
  }
}

/* --- about: розділ "Хто ми" на сторінці "Про нас" --- */

.studio-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  width: min(1500px, calc(100% - 100px));
  margin: 100px auto;
}

.studio-intro__text {
  display: flex;
  flex-direction: column;
  width: 758px;
  min-height: 506px;
  max-width: 100%;
}

.studio-intro__eyebrow {
  margin: 0 0 28px;
  color: rgba(255, 255, 255, 0.8);
  font-family: "Oswald", sans-serif;
  font-weight: 300;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.studio-intro__text h2 {
  margin: 0 0 30px;
  color: #fff;
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  font-size: 56px;
  line-height: 1.2;
  text-transform: uppercase;
}

.studio-intro__text h2 span {
  color: var(--red);
}

.studio-intro__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 30px;
  color: rgba(255, 255, 255, 0.8);
  font-family: "Manrope", sans-serif;
  font-size: 18px;
  line-height: 1.4;
}

.studio-intro__body p {
  margin: 0;
}

.studio-intro__note {
  width: 770px;
  max-width: 100%;
  min-height: 90px;
  margin: auto 0 0;
  padding: 20px;
  border-radius: 20px;
  background: rgba(21, 21, 21, 0.7);
  color: rgba(255, 255, 255, 0.8);
  font-family: "Manrope", sans-serif;
  font-size: 18px;
  line-height: 1.4;
}

.studio-intro__note strong {
  color: #fff;
  font-weight: 600;
}

.studio-intro__media {
  width: 600px;
  max-width: 100%;
  height: 506px;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 20px;
}

.studio-intro__media img {
  width: 100%;
  height: calc(100% + 100px);
  object-fit: cover;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

@media (max-width: 1100px) {
  .studio-intro {
    flex-direction: column;
    align-items: stretch;
    gap: 30px;
    width: calc(100% - 48px);
    margin: 70px auto;
  }

  .studio-intro__text {
    order: 1;
    width: 100%;
    min-height: 0;
  }

  .studio-intro__media {
    order: 2;
    width: 100%;
    height: min(506px, 60vw);
  }

  .studio-intro__text h2 {
    font-size: clamp(38px, 6vw, 56px);
  }

  .studio-intro__note {
    width: 100%;
  }
}

@media (max-width: 720px) {
  .studio-intro {
    width: calc(100% - 32px);
    margin: 50px auto;
    gap: 24px;
  }

  .studio-intro__eyebrow {
    margin-bottom: 18px;
    font-size: 16px;
  }

  .studio-intro__text h2 {
    margin-bottom: 20px;
    font-size: clamp(30px, 9vw, 38px);
  }

  .studio-intro__body {
    gap: 14px;
    font-size: 16px;
  }

  .studio-intro__note {
    padding: 16px;
    font-size: 15px;
  }

  .studio-intro__media {
    height: 260px;
    border-radius: 16px;
  }
}

/* --- LLumar: банер офіційного партнера на сторінці "Про нас" --- */

.studio-llumar {
  display: flex;
  align-items: center;
  gap: 56px;
  width: min(1500px, calc(100% - 100px));
  min-height: 230px;
  margin: 0 auto 60px;
  padding: 30px 56px;
  border-radius: 20px;
  background: #fff;
}

.studio-llumar__logo {
  width: 315px;
  flex: 0 0 auto;
}

.studio-llumar__logo img {
  display: block;
  width: 100%;
  height: auto;
}

.studio-llumar__copy h2 {
  margin: 0 0 15px;
  color: var(--black);
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  font-size: 56px;
  line-height: 1.3;
  text-transform: uppercase;
}

.studio-llumar__copy h2 span {
  color: var(--red);
}

.studio-llumar__copy p {
  margin: 0;
  max-width: 905px;
  color: rgba(14, 14, 14, 0.9);
  font-family: "Manrope", sans-serif;
  font-size: 18px;
  line-height: 1.4;
}

@media (max-width: 1100px) {
  .studio-llumar {
    position: relative;
    align-items: flex-start;
    width: calc(100% - 48px);
    min-height: 0;
    padding: 30px;
    margin-bottom: 40px;
  }

  .studio-llumar__copy {
    width: 100%;
  }

  .studio-llumar__logo {
    position: absolute;
    top: 34px;
    right: 30px;
    width: 220px;
  }

  .studio-llumar__copy h2 {
    max-width: 280px;
    font-size: clamp(30px, 4.5vw, 40px);
  }

  .studio-llumar__copy p {
    max-width: none;
    font-size: 16px;
  }
}

@media (max-width: 720px) {
  .studio-llumar {
    flex-direction: column;
    align-items: center;
    width: calc(100% - 32px);
    padding: 28px 20px;
    gap: 15px;
    margin-bottom: 30px;
    text-align: center;
  }

  .studio-llumar__copy {
    display: contents;
  }

  .studio-llumar__logo {
    order: 2;
    position: static;
    width: 180px;
  }

  .studio-llumar__copy h2 {
    order: 1;
    max-width: none;
    margin: 0;
    font-size: 30px;
  }

  .studio-llumar__copy p {
    order: 3;
    max-width: 303px;
    margin: 0 auto;
    font-size: 14px;
  }
}

/* Service cards image spacing and hover reveal */
.service-card__media,
.service-card__media--shade,
.service-card > .service-card__image {
  top: 6px !important;
  left: 6px !important;
  width: calc(100% - 12px) !important;
  border-radius: 0 !important;
}

.service-card__image,
.service-card__media .service-card__image,
.service-card > .service-card__image {
  width: 100% !important;
  border-radius: 0 !important;
}

@media (min-width: 1101px) and (hover: hover) and (pointer: fine) {
  .service-card:hover .service-card__media,
  .service-card:hover > .service-card__image {
    top: 6px !important;
    left: 6px !important;
    width: calc(100% - 12px) !important;
    height: calc(100% - 92px) !important;
    border-radius: 12px 12px 0 0 !important;
  }

  .service-card:hover .service-card__image {
    height: 100% !important;
    border-radius: 12px 12px 0 0 !important;
    transform: scale(1.025) !important;
  }
}

@media (max-width: 1100px) {
  .service-card__media,
  .service-card__media--shade,
  .service-card > .service-card__image {
    top: calc(5 * var(--services-u)) !important;
    left: calc(5 * var(--services-u)) !important;
    width: calc(100% - (10 * var(--services-u))) !important;
    border-radius: 0 !important;
  }

  .service-card__image,
  .service-card__media .service-card__image,
  .service-card > .service-card__image {
    border-radius: 0 !important;
  }
}

/* Service card image reveal: direct images and media-wrapped images behave the same */
.service-card__media,
.service-card__media--shade {
  top: 6px !important;
  left: 6px !important;
  width: calc(100% - 12px) !important;
  overflow: hidden !important;
  border-radius: 14px 14px 0 0 !important;
}

.service-card__image,
.service-card__media .service-card__image {
  width: 100% !important;
  border-radius: 14px 14px 0 0 !important;
  object-fit: cover !important;
}

@media (min-width: 1101px) and (hover: hover) and (pointer: fine) {
  .service-card:hover .service-card__media {
    top: 6px !important;
    left: 6px !important;
    width: calc(100% - 12px) !important;
    height: calc(100% - 92px) !important;
    border-radius: 14px 14px 0 0 !important;
  }

  .service-card:hover .service-card__media .service-card__image {
    height: 100% !important;
    border-radius: 14px 14px 0 0 !important;
    transform: scale(1.025) !important;
  }
}

@media (min-width: 1101px) and (hover: hover) and (pointer: fine) {
  .service-card__actions > a {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    transition: color 220ms ease, border-color 220ms ease, transform 220ms cubic-bezier(.22, 1, .36, 1), background-color 220ms ease !important;
  }

  .service-card__actions > a::before {
    content: "" !important;
    position: absolute !important;
    z-index: -1 !important;
    top: -40% !important;
    bottom: -40% !important;
    left: -55% !important;
    width: 58% !important;
    background: radial-gradient(ellipse at center, rgb(255 255 255 / 16%) 0%, rgb(255 255 255 / 8%) 34%, transparent 72%) !important;
    opacity: 0 !important;
    transform: translateX(-35%) rotate(8deg) !important;
    transition: transform 420ms cubic-bezier(.22, 1, .36, 1), opacity 220ms ease !important;
  }

  .service-card__actions > a:hover {
    border-color: rgb(255 255 255 / 38%) !important;
    background: transparent !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
  }

  .service-card__actions > a:hover::before {
    opacity: 1 !important;
    transform: translateX(245%) rotate(8deg) !important;
  }

  .service-card__actions > a:last-child:hover {
    border-color: var(--red) !important;
    background: var(--red) !important;
    color: #fff !important;
  }

  .service-card__actions > a:last-child:hover span {
    background: rgb(255 255 255 / 14%) !important;
  }

  .service-card__actions > a:last-child:hover img {
    filter: brightness(0) invert(1) !important;
  }
}

/* --- Чому Car Sound: сітка переваг на сторінці "Про нас" --- */

.studio-why {
  width: min(1400px, calc(100% - 100px));
  margin: 0 auto 100px;
}

.studio-why__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  width: min(950px, 100%);
  margin: 0 auto 60px;
  text-align: center;
  text-transform: uppercase;
}

.studio-why__eyebrow {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  font-family: "Oswald", sans-serif;
  font-weight: 300;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: 0.4px;
}

.studio-why__head h2 {
  margin: 0;
  color: #fff;
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  font-size: 56px;
  line-height: 1.3;
}

.studio-why__head h2 span {
  color: var(--red);
}

.studio-why__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 210px);
}

.studio-why__cell {
  position: relative;
  min-width: 0;
}

.studio-why__cell--text {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid #222;
  background: var(--black);
}

.studio-why__cell--text h3 {
  margin: 0;
  max-width: 360px;
  color: #fff;
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.4;
  text-transform: uppercase;
}

.studio-why__cell--text p {
  max-width: 300px;
  margin: auto 0 0;
  color: rgba(255, 255, 255, 0.8);
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  line-height: 1.3;
}

.studio-why__cell--media {
  overflow: hidden;
}

.studio-why__cell--media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.studio-why__cell--bl img {
  border-radius: 0 0 0 20px;
}

.studio-why__cell--br img {
  border-radius: 0 0 20px 0;
}

.studio-why__cell--logo {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #222;
  background: var(--black);
}

.studio-why__logo-crop {
  position: relative;
  display: block;
  width: 160px;
  height: 58px;
  overflow: hidden;
}

.studio-why__logo-crop img {
  position: absolute;
  top: -22px;
  left: -42px;
  width: 240px;
  max-width: none;
}

.studio-why__cross {
  position: absolute;
  z-index: 2;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.studio-why__cross img {
  display: block;
  width: 100%;
  height: 100%;
}

.studio-why__cross--1 { left: 33.333%; top: 33.333%; }
.studio-why__cross--2 { left: 66.667%; top: 33.333%; }
.studio-why__cross--3 { left: 33.333%; top: 66.667%; }
.studio-why__cross--4 { left: 66.667%; top: 66.667%; }

@media (max-width: 1100px) {
  .studio-why {
    width: calc(100% - 48px);
    margin-bottom: 70px;
  }

  .studio-why__head {
    gap: 20px;
    margin-bottom: 40px;
  }

  .studio-why__head h2 {
    font-size: clamp(36px, 6vw, 56px);
  }

  /* Tablet: 2-column, 3-row grid — only the first media image survives,
     the two corner images and the logo cell are dropped. */
  .studio-why__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 160px 160px 180px;
  }

  .studio-why__cell--text h3 {
    max-width: 300px;
    font-size: 22px;
  }

  .studio-why__cell:nth-child(1) {
    order: 1;
    border-radius: 20px 0 0 0;
  }

  .studio-why__cell:nth-child(3) {
    order: 2;
    border-radius: 0 20px 0 0;
  }

  .studio-why__cell:nth-child(2) {
    order: 3;
  }

  .studio-why__cell:nth-child(4) {
    order: 4;
  }

  .studio-why__cell:nth-child(5) {
    order: 5;
    border-radius: 0 0 0 20px;
  }

  .studio-why__cell:nth-child(6) {
    order: 6;
    border-radius: 0 0 20px 0;
  }

  .studio-why__cell:nth-child(7),
  .studio-why__cell:nth-child(8),
  .studio-why__cell:nth-child(9) {
    display: none;
  }

  .studio-why__cross {
    display: none;
  }
}

@media (max-width: 720px) {
  .studio-why__eyebrow {
    font-size: 16px;
  }

  .studio-why__head h2 {
    font-size: clamp(28px, 9vw, 38px);
  }

  /* Mobile: single column, image moves to the 4th slot. */
  .studio-why__grid {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    grid-template-rows: none;
  }

  .studio-why__cell {
    margin-bottom: -1px;
  }

  .studio-why__cell--text {
    min-height: 120px;
    padding: 20px;
  }

  .studio-why__cell--media {
    height: 200px;
  }

  .studio-why__cell--text h3 {
    max-width: none;
    font-size: 18px;
  }

  .studio-why__cell--text p {
    max-width: none;
    font-size: 14px;
  }

  .studio-why__cell:nth-child(1) {
    order: 1;
    border-radius: 15px 15px 0 0;
  }

  .studio-why__cell:nth-child(3) {
    order: 2;
    border-radius: 0;
  }

  .studio-why__cell:nth-child(4) {
    order: 3;
  }

  .studio-why__cell:nth-child(2) {
    order: 4;
  }

  .studio-why__cell:nth-child(5) {
    order: 5;
    border-radius: 0;
  }

  .studio-why__cell:nth-child(6) {
    order: 6;
    border-radius: 0 0 15px 15px;
  }
}

/* --- Відгуки: сторінка "Про нас" --- */

.studio-reviews {
  position: relative;
  width: min(1500px, calc(100% - 100px));
  height: 573px;
  margin: 100px auto;
}

.studio-reviews__rating {
  position: absolute;
  top: 0;
  left: 50px;
  width: 250px;
}

.studio-reviews__rating-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 24px;
}

.studio-reviews__rating-number {
  display: block;
  margin: 0;
  color: #fff;
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  font-size: 60px;
  line-height: 1;
}

.studio-reviews__rating-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.studio-reviews__rating-stars {
  display: flex;
  align-items: center;
  gap: 3px;
}

.studio-reviews__rating-stars img {
  width: 24px;
  height: 24px;
}

.studio-reviews__rating-count {
  margin: 0;
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.3;
}

.studio-reviews__all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  padding: 0 46px;
  overflow: hidden;
  border: 1px solid #262626;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(3px);
  color: #fff;
  font-family: "Oswald", sans-serif;
  font-size: 20px;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
}

.studio-reviews__title {
  position: absolute;
  top: 0;
  left: 525px;
  width: 652px;
  margin: 0;
  color: #fff;
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  font-size: 60px;
  line-height: 1.3;
  text-transform: uppercase;
}

.studio-reviews__title span {
  display: block;
  color: var(--red);
}

.studio-reviews__nav {
  position: absolute;
  top: 78px;
  right: 50px;
  display: flex;
  gap: 20px;
}

.studio-reviews__nav button {
  display: grid;
  width: 70px;
  height: 70px;
  padding: 0;
  overflow: hidden;
  place-items: center;
  cursor: pointer;
  background: rgba(30, 30, 30, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  backdrop-filter: blur(2.5px);
}

.studio-reviews__nav img {
  width: 20px;
  height: 18px;
  transform: rotate(-45deg);
}

.studio-reviews__nav button:first-child img {
  transform: rotate(135deg);
}

.studio-reviews__list {
  position: absolute;
  top: 203px;
  left: 50px;
  right: 50px;
  bottom: 0;
  display: flex;
  gap: 25px;
}

.studio-reviews__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 450px;
  padding: 29px;
  border: 1px solid #262626;
  border-radius: 20px;
}

.studio-reviews__text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: rgba(255, 255, 255, 0.8);
  font-family: "Manrope", sans-serif;
  font-size: 18px;
  line-height: 1.3;
}

.studio-reviews__text p {
  margin: 0;
}

.studio-reviews__card footer {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 20px;
}

.studio-reviews__name {
  margin: 0;
  color: #fff;
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.3;
  text-transform: uppercase;
}

.studio-reviews__meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.studio-reviews__stars {
  display: block;
  width: 113px;
  height: 26px;
}

.studio-reviews__meta span {
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.3;
}

@media (max-width: 1100px) {
  /* Tablet: rating + title share a row, cards become a horizontally
     scrollable rail (2 fit, rest peek in), and the "Всі відгуки" button
     escapes to a centered bottom bar. */
  .studio-reviews {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "rating title"
      "list list";
    align-items: start;
    row-gap: 24px;
    width: calc(100% - 48px);
    height: auto;
    margin: 70px auto 0;
    padding-bottom: 96px;
  }

  .studio-reviews__rating {
    grid-area: rating;
    position: static;
    width: auto;
  }

  .studio-reviews__rating-number {
    font-size: 50px;
  }

  .studio-reviews__rating-stars img {
    width: 32px;
    height: 32px;
  }

  .studio-reviews__title {
    grid-area: title;
    position: static;
    width: auto;
    text-align: right;
    font-size: clamp(28px, 4vw, 40px);
  }

  .studio-reviews__nav {
    display: none;
  }

  .studio-reviews__list {
    grid-area: list;
    position: static;
    display: flex;
    gap: 25px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    scrollbar-width: none;
  }

  .studio-reviews__list::-webkit-scrollbar {
    display: none;
  }

  .studio-reviews__card {
    flex: 0 0 420px;
    width: 420px;
    scroll-snap-align: start;
  }

  .studio-reviews__all {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
  }
}

@media (max-width: 720px) {
  .studio-reviews {
    grid-template-areas:
      "title title"
      "rating rating"
      "list list";
    row-gap: 16px;
    margin-top: 50px;
    padding-bottom: 84px;
  }

  .studio-reviews__title {
    grid-column: 1 / -1;
    text-align: center;
    font-size: clamp(24px, 7vw, 30px);
  }

  .studio-reviews__rating-number {
    font-size: 36px;
  }

  .studio-reviews__rating-stars img {
    width: 18px;
    height: 18px;
  }

  .studio-reviews__rating-count {
    font-size: 13px;
  }

  .studio-reviews__card {
    flex-basis: 280px;
    width: 280px;
    padding: 19px;
  }

  .studio-reviews__text {
    font-size: 14px;
  }

  .studio-reviews__card footer {
    gap: 5px;
  }

  .studio-reviews__name {
    font-size: 18px;
  }

  .studio-reviews__meta span {
    font-size: 14px;
  }

  .studio-reviews__stars {
    width: 100px;
    height: 22px;
  }

  .studio-reviews__all {
    height: 52px;
    padding: 0 30px;
    font-size: 17px;
  }
}

/* Map labels guard: keep tile labels away from rounded top edge */
.address-popup__map {
  position: relative !important;
  overflow: hidden !important;
}

.address-popup__map::before {
  content: "" !important;
  position: absolute !important;
  z-index: 4 !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  height: 36px !important;
  background: linear-gradient(180deg, #080808 0%, rgb(8 8 8 / 88%) 44%, rgb(8 8 8 / 0%) 100%) !important;
  pointer-events: none !important;
}

.address-popup__city {
  position: absolute !important;
  z-index: 650 !important;
  top: auto !important;
  right: auto !important;
  left: 34px !important;
  bottom: 34px !important;
  display: block !important;
  color: rgb(255 255 255 / 18%) !important;
  font-family: "Oswald", sans-serif !important;
  font-size: 72px !important;
  font-weight: 400 !important;
  line-height: .86 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  pointer-events: none !important;
}

.address-popup__city {
  left: 18px !important;
  bottom: 18px !important;
  font-size: 44px !important;
}

.address-popup__leaflet {
  position: relative !important;
  z-index: 1 !important;
}

@media (max-width: 720px) {
  .address-popup__map::before {
    height: calc(24 * var(--services-u)) !important;
  }

  .address-popup__city {
    left: calc(14 * var(--services-u)) !important;
    bottom: calc(14 * var(--services-u)) !important;
    font-size: clamp(34px, 10vw, 52px) !important;
  }
}

/* Address popup map reset: keep Leaflet labels and markers visible */
.address-popup__map {
  padding: 0 !important;
  overflow: hidden !important;
  background: #090909 !important;
}

.address-popup__map::before,
.address-popup__map::after {
  display: none !important;
  content: none !important;
}

.address-popup__leaflet {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
}

.address-popup__leaflet .leaflet-tile-pane {
  z-index: 200 !important;
}

.address-popup__leaflet .leaflet-overlay-pane {
  z-index: 400 !important;
}

.address-popup__leaflet .leaflet-shadow-pane {
  z-index: 500 !important;
}

.address-popup__leaflet .leaflet-marker-pane {
  z-index: 600 !important;
}

.address-popup__leaflet .leaflet-tooltip-pane {
  z-index: 650 !important;
}

.address-popup__leaflet .leaflet-popup-pane {
  z-index: 700 !important;
}

.address-popup__leaflet .leaflet-control-container {
  position: relative !important;
  z-index: 800 !important;
}

.address-popup__leaflet .carsound-map-tooltip {
  z-index: 660 !important;
}

.address-popup__city {
  z-index: 620 !important;
  left: 24px !important;
  bottom: 24px !important;
}

@media (max-width: 720px) {
  .address-popup__map {
    padding: 0 !important;
  }

  .address-popup__leaflet {
    height: 100% !important;
  }

  .address-popup__city {
    left: calc(14 * var(--services-u)) !important;
    bottom: calc(14 * var(--services-u)) !important;
  }
}

/* Main contact block must not inherit popup map fixes */
.contact__info,
.contact__form {
  z-index: 3 !important;
}

.contact__map {
  z-index: 0 !important;
  padding: 0 !important;
}

.contact__map::before,
.contact__map::after {
  display: none !important;
  content: none !important;
}

.contact__leaflet {
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
}

.contact__map-city {
  z-index: 5 !important;
  left: 34px !important;
  bottom: 34px !important;
  font-size: 72px !important;
}

/* --- FAQ: сторінка "Про нас" --- */

.studio-faq {
  width: min(1400px, calc(100% - 100px));
  margin: 100px auto;
  padding: 60px;
  border: 6px solid #222;
  border-radius: 30px;
  background: #fff;
}

.studio-faq__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 60px;
}

.studio-faq__title {
  width: 460px;
  flex: 0 0 auto;
  margin: 0;
  color: var(--black);
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  font-size: 56px;
  line-height: 1.3;
  text-transform: uppercase;
}

.studio-faq__title span {
  display: block;
  color: var(--red);
}

.studio-faq__list {
  width: 640px;
  flex: 0 0 auto;
}

.studio-faq__item {
  border-top: 1px solid #e5e5e5;
}

.studio-faq__item:last-child {
  border-bottom: 1px solid #e5e5e5;
}

.studio-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 27px 9px;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  color: var(--black);
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
}

.studio-faq__toggle {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #dcdcdc;
  border-radius: 14px;
}

.studio-faq__toggle img {
  width: 18px;
  height: 18px;
  transition: transform 220ms ease;
}

.studio-faq__item.is-open .studio-faq__toggle img {
  transform: rotate(45deg);
}

.studio-faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 260ms ease;
}

.studio-faq__answer-inner {
  overflow: hidden;
}

.studio-faq__answer-inner p {
  margin: 0;
  padding: 0 9px 27px;
  color: rgba(14, 14, 14, 0.75);
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.studio-faq__item.is-open .studio-faq__answer {
  grid-template-rows: 1fr;
}

@media (max-width: 1100px), (hover: none), (pointer: coarse) {
  .hero {
    /* --parallax-y (scroll parallax) stays live on touch/tablet — only the
       cursor-driven --hero-bg-x is disabled since there's no mouse there. */
    --hero-bg-x: 0px !important;
  }

  .works__feature img,
  .about__image--console img,
  .studio-intro__media img {
    transform: translate3d(0, 0, 0) !important;
    will-change: auto;
  }
}

@media (max-width: 720px) {
  body:not(.services-page) .works__feature {
    display: none !important;
  }
}

@media (max-width: 1100px) {
  .studio-faq {
    width: calc(100% - 48px);
    margin: 70px auto;
    padding: 36px;
  }

  .studio-faq__inner {
    flex-direction: column;
    gap: 30px;
  }

  .studio-faq__title {
    width: 100%;
    font-size: clamp(34px, 6vw, 56px);
  }

  .studio-faq__list {
    width: 100%;
  }
}

@media (max-width: 720px) {
  .studio-faq {
    padding: 24px;
    border-width: 4px;
    border-radius: 20px;
  }

  .studio-faq__title {
    font-size: clamp(28px, 9vw, 38px);
  }

  .studio-faq__question {
    gap: 12px;
    padding: 20px 4px;
    font-size: 17px;
  }

  .studio-faq__toggle {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }

  .studio-faq__toggle img {
    width: 15px;
    height: 15px;
  }

  .studio-faq__answer-inner p {
    padding: 0 4px 20px;
    font-size: 15px;
  }
}

/* Mobile address popup: map fills the whole space above phone */
@media (max-width: 720px) {
  .address-popup__panel {
    max-height: calc(100svh - (96 * var(--services-u))) !important;
  }

  .address-popup__body {
    display: grid !important;
    grid-template-rows: auto minmax(calc(250 * var(--services-u)), 1fr) auto !important;
    height: min(calc(610 * var(--services-u)), calc(100svh - (130 * var(--services-u)))) !important;
    min-height: 0 !important;
  }

  .address-popup__content {
    min-height: 0 !important;
  }

  .address-popup__map {
    align-self: stretch !important;
    width: 100% !important;
    height: 100% !important;
    min-height: calc(250 * var(--services-u)) !important;
    margin: 0 !important;
  }

  .address-popup__leaflet {
    width: 100% !important;
    height: 100% !important;
  }

  .address-popup__phone--mobile {
    align-self: stretch !important;
    width: 100% !important;
    margin: 0 !important;
  }
}

/* Desktop footer: full-width background and borders, centered 1500px content */
@media (min-width: 1101px) {
  .site-footer {
    --footer-x: max(calc(50% - 750px), 30px);
    width: 100% !important;
    max-width: none !important;
    background: #101010 !important;
    border-top: 1px solid #262626 !important;
    border-bottom: 1px solid #262626 !important;
  }

  .site-footer::before {
    left: calc(var(--footer-x) + 446px) !important;
  }

  .site-footer__brand {
    left: calc(var(--footer-x) + 50px) !important;
  }

  .site-footer__button {
    left: calc(var(--footer-x) + 50px) !important;
  }

  .site-footer__policy {
    left: calc(var(--footer-x) + 50px) !important;
  }

  .site-footer__services {
    left: calc(var(--footer-x) + 503px) !important;
  }

  .site-footer__info {
    left: calc(var(--footer-x) + 937px) !important;
  }

  .site-footer__addresses {
    left: calc(var(--footer-x) + 1124px) !important;
  }

  .site-footer__links {
    left: calc(var(--footer-x) + 503px) !important;
  }

  .site-footer__socials {
    left: calc(var(--footer-x) + 1151px) !important;
  }
}

/* Services page tablet layout */
@media (min-width: 721px) and (max-width: 1100px) {
  body.services-page .services-page__shell {
    padding-top: 118px !important;
  }

  body.services-page .services-page-intro {
    width: 728px !important;
    max-width: calc(100% - 40px) !important;
    margin: 0 auto 54px !important;
    padding: 0 !important;
    gap: 25px !important;
  }

  body.services-page .services-page-intro__crumbs {
    font-size: 14px !important;
  }

  body.services-page .services-page-intro h1 {
    width: 528px !important;
    max-width: 100% !important;
    font-size: 60px !important;
    line-height: 1.2 !important;
  }

  body.services-page .services-page-intro > p {
    width: min(612px, 100%) !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
  }

  body.services-page .services-catalog__filters {
    width: 728px !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
    overflow: visible !important;
  }

  body.services-page .services-catalog__filters a {
    min-height: 0 !important;
    padding: 16px 20px !important;
    border-radius: 15px !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
  }

  body.services-page .services-catalog {
    width: 728px !important;
    max-width: calc(100% - 40px) !important;
    margin: 0 auto !important;
  }

  body.services-page .services-catalog__grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-content: center !important;
    gap: 16px 10px !important;
  }

  body.services-page .services-catalog__grid .service-card:nth-child(n) {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 410px !important;
    flex: none !important;
    flex-basis: auto !important;
    transform: none !important;
    border-radius: 20px !important;
  }

  body.services-page .services-catalog__grid .service-card__media,
  body.services-page .services-catalog__grid .service-card__media--shade,
  body.services-page .services-catalog__grid .service-card > .service-card__image {
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 220px !important;
    border-radius: 20px 20px 0 0 !important;
  }

  body.services-page .services-catalog__grid .service-card__image,
  body.services-page .services-catalog__grid .service-card__media .service-card__image,
  body.services-page .services-catalog__grid .service-card > .service-card__image {
    width: 100% !important;
    height: 220px !important;
    object-fit: cover !important;
    border-radius: 20px 20px 0 0 !important;
  }

  body.services-page .services-catalog__grid .service-card__heading {
    top: 244px !important;
    right: 12px !important;
    left: 19px !important;
    gap: 12px !important;
  }

  body.services-page .services-catalog__grid .service-card__heading h3 {
    font-size: 30px !important;
    line-height: 1.15 !important;
  }

  body.services-page .services-catalog__grid .service-card__heading p {
    width: 166px !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
  }

  body.services-page .services-catalog__grid .service-card__price {
    top: 295px !important;
    left: 19px !important;
    font-size: 16px !important;
  }

  body.services-page .services-catalog__grid .service-card__actions {
    right: -1px !important;
    bottom: -1px !important;
    left: -1px !important;
    height: 70px !important;
    grid-template-columns: 1fr 1fr !important;
    border-top: 1px solid #222 !important;
  }

  body.services-page .services-catalog__grid .service-card__actions > a {
    height: 70px !important;
    padding: 0 10px !important;
    font-size: 18px !important;
  }

  body.services-page .services-catalog__grid .service-card__actions span {
    width: 40px !important;
    height: 40px !important;
    border-radius: 13px !important;
  }

  body.services-page .complex {
    width: 734px !important;
    max-width: calc(100% - 34px) !important;
    margin-top: 72px !important;
  }

  body.services-page .contact {
    margin-top: 72px !important;
  }

  body.services-page .site-footer {
    margin-top: 70px !important;
  }
}

/* Mobile services page filters scroll cue */
@media (max-width: 720px) {
  body.services-page .services-page-intro {
    --services-filter-thumb-x: calc(-30 * var(--services-u));
    position: relative !important;
    padding-bottom: calc(18 * var(--services-u)) !important;
  }

  body.services-page .services-page-intro::before,
  body.services-page .services-page-intro::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 0 !important;
    display: block !important;
    height: calc(3 * var(--services-u)) !important;
    border-radius: 999px !important;
    pointer-events: none !important;
  }

  body.services-page .services-page-intro::before {
    width: calc(84 * var(--services-u)) !important;
    background: rgb(255 255 255 / 26%) !important;
    transform: translateX(-50%) !important;
  }

  body.services-page .services-page-intro::after {
    width: calc(24 * var(--services-u)) !important;
    background: rgb(255 255 255 / 88%) !important;
    transform: translateX(calc(-50% + var(--services-filter-thumb-x))) !important;
    transition: transform 90ms linear !important;
  }

  body.services-page .services-page-intro:not(.has-filter-scroll)::before,
  body.services-page .services-page-intro:not(.has-filter-scroll)::after {
    display: none !important;
  }
}

/* Services page catalog guard: keep homepage services styles away */
body.services-page .services-catalog__grid .service-card:nth-child(n) {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
}

@media (min-width: 1101px) {
  body.services-page .services-catalog__grid {
    grid-template-columns: repeat(3, minmax(0, 450px)) !important;
    gap: 25px !important;
  }

  body.services-page .services-catalog__grid .service-card:nth-child(n) {
    width: 450px !important;
    height: 561px !important;
    flex: none !important;
  }
}

@media (min-width: 721px) and (max-width: 1100px) {
  body.services-page .services-catalog__grid .service-card:nth-child(n) {
    display: block !important;
    overflow: hidden !important;
  }
}

@media (max-width: 720px) {
  body.services-page .services-page-intro {
    padding-bottom: calc(30 * var(--services-u)) !important;
  }

  body.services-page .services-page-intro::before,
  body.services-page .services-page-intro::after {
    bottom: calc(6 * var(--services-u)) !important;
  }
}

/* Services page subtle city background */
body.services-page .services-page__shell {
  --services-city-y: 0px;
}

@media (min-width: 721px) {
  body.services-page .services-page__shell {
    position: relative !important;
    isolation: isolate !important;
  }

  body.services-page .services-page__shell::before {
    content: "ХАРКІВ" !important;
    position: absolute !important;
    z-index: 0 !important;
    top: 126px !important;
    left: 50% !important;
    color: rgb(255 255 255 / 3.5%) !important;
    font-family: "Oswald", sans-serif !important;
    font-size: clamp(150px, 16vw, 255px) !important;
    font-weight: 400 !important;
    line-height: .86 !important;
    letter-spacing: .03em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    transform: translate3d(-50%, var(--services-city-y), 0) !important;
    will-change: transform !important;
  }

  body.services-page .services-page-intro,
  body.services-page .services-catalog {
    position: relative !important;
    z-index: 1 !important;
  }
}

/* EOF override: /poslugy/ mobile filters and card media */
@media (max-width: 720px) {
  body.services-page .services-page-intro {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  body.services-page .services-page-intro::before,
  body.services-page .services-page-intro::after {
    content: none !important;
    display: none !important;
  }

  body.services-page .services-catalog {
    margin-top: calc(2 * var(--services-u)) !important;
  }

  body.services-page .services-catalog__grid {
    gap: calc(14 * var(--services-u)) !important;
  }

  body.services-page .services-catalog__grid .service-card:nth-child(n) {
    overflow: hidden !important;
    border-radius: calc(20 * var(--services-u)) !important;
  }

  body.services-page .services-catalog__grid .service-card__media,
  body.services-page .services-catalog__grid .service-card__media--shade,
  body.services-page .services-catalog__grid .service-card > .service-card__image {
    top: calc(4 * var(--services-u)) !important;
    right: calc(4 * var(--services-u)) !important;
    left: calc(4 * var(--services-u)) !important;
    width: calc(100% - (8 * var(--services-u))) !important;
    height: calc(195 * var(--services-u)) !important;
    overflow: hidden !important;
    border-radius: calc(17 * var(--services-u)) calc(17 * var(--services-u)) 0 0 !important;
  }

  body.services-page .services-catalog__grid .service-card__image,
  body.services-page .services-catalog__grid .service-card__media .service-card__image,
  body.services-page .services-catalog__grid .service-card > .service-card__image {
    inset: 0 !important;
    width: 100% !important;
    height: calc(196 * var(--services-u)) !important;
    object-fit: cover !important;
    border-radius: calc(17 * var(--services-u)) calc(17 * var(--services-u)) 0 0 !important;
  }
}

/* TRUE LAST override: mobile /poslugy/ */
@media (max-width: 720px) {
  body.services-page .services-page-intro {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  body.services-page .services-page-intro::before,
  body.services-page .services-page-intro::after {
    content: none !important;
    display: none !important;
  }

  body.services-page .services-catalog {
    margin-top: calc(2 * var(--services-u)) !important;
  }

  body.services-page .services-catalog__grid {
    gap: calc(14 * var(--services-u)) !important;
  }

  body.services-page .services-catalog__grid .service-card:nth-child(n) {
    overflow: hidden !important;
    border-radius: calc(20 * var(--services-u)) !important;
  }

  body.services-page .services-catalog__grid .service-card__media,
  body.services-page .services-catalog__grid .service-card__media--shade,
  body.services-page .services-catalog__grid .service-card > .service-card__image {
    top: calc(4 * var(--services-u)) !important;
    right: calc(4 * var(--services-u)) !important;
    left: calc(4 * var(--services-u)) !important;
    width: calc(100% - (8 * var(--services-u))) !important;
    height: calc(195 * var(--services-u)) !important;
    overflow: hidden !important;
    border-radius: calc(17 * var(--services-u)) calc(17 * var(--services-u)) 0 0 !important;
  }

  body.services-page .services-catalog__grid .service-card__image,
  body.services-page .services-catalog__grid .service-card__media .service-card__image,
  body.services-page .services-catalog__grid .service-card > .service-card__image {
    inset: 0 !important;
    width: 100% !important;
    height: calc(196 * var(--services-u)) !important;
    object-fit: cover !important;
    border-radius: calc(17 * var(--services-u)) calc(17 * var(--services-u)) 0 0 !important;
  }
}

/* Absolute final mobile /poslugy/ spacing and card crop */
@media (max-width: 720px) {
  body.services-page .services-page-intro {
    padding-bottom: calc(4 * var(--services-u)) !important;
    margin-bottom: 0 !important;
  }

  body.services-page .services-catalog {
    margin-top: calc(4 * var(--services-u)) !important;
  }

  body.services-page .services-catalog__grid {
    gap: calc(14 * var(--services-u)) !important;
  }

  body.services-page .services-catalog__grid .service-card:nth-child(n) {
    overflow: hidden !important;
    border-radius: calc(20 * var(--services-u)) !important;
    background: #111 !important;
  }

  body.services-page .services-catalog__grid .service-card__media,
  body.services-page .services-catalog__grid .service-card__media--shade,
  body.services-page .services-catalog__grid .service-card > .service-card__image {
    top: calc(4 * var(--services-u)) !important;
    right: calc(4 * var(--services-u)) !important;
    left: calc(4 * var(--services-u)) !important;
    width: calc(100% - (8 * var(--services-u))) !important;
    height: calc(194 * var(--services-u)) !important;
    overflow: hidden !important;
    border-radius: calc(17 * var(--services-u)) calc(17 * var(--services-u)) 0 0 !important;
  }

  body.services-page .services-catalog__grid .service-card__image,
  body.services-page .services-catalog__grid .service-card__media .service-card__image,
  body.services-page .services-catalog__grid .service-card > .service-card__image {
    inset: 0 !important;
    width: 100% !important;
    height: calc(195 * var(--services-u)) !important;
    object-fit: cover !important;
    border-radius: calc(17 * var(--services-u)) calc(17 * var(--services-u)) 0 0 !important;
  }
}

/* Hard final /poslugy/ card + tablet header stabilization */
@media (max-width: 720px) {
  body.services-page .services-page-intro {
    padding-bottom: calc(12 * var(--services-u)) !important;
    margin-bottom: 0 !important;
  }

  body.services-page .services-page-intro::before,
  body.services-page .services-page-intro::after {
    content: none !important;
    display: none !important;
  }

  body.services-page .services-catalog {
    margin-top: calc(14 * var(--services-u)) !important;
  }

  body.services-page .services-catalog__grid .service-card:nth-child(n) {
    overflow: hidden !important;
    background: #111 !important;
    border: 1px solid #252525 !important;
    border-radius: calc(20 * var(--services-u)) !important;
  }

  body.services-page .services-catalog__grid .service-card__media,
  body.services-page .services-catalog__grid .service-card__media--shade,
  body.services-page .services-catalog__grid .service-card > .service-card__image {
    overflow: hidden !important;
    border-radius: calc(18 * var(--services-u)) calc(18 * var(--services-u)) 0 0 !important;
  }

  body.services-page .services-catalog__grid .service-card__actions {
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    overflow: hidden !important;
    border-radius: 0 0 calc(20 * var(--services-u)) calc(20 * var(--services-u)) !important;
  }

  body.services-page .services-catalog__grid .service-card__actions > a {
    overflow: hidden !important;
    border-radius: 0 !important;
  }

  body.services-page .services-catalog__grid .service-card__actions span {
    flex: 0 0 calc(38 * var(--services-u)) !important;
    width: calc(38 * var(--services-u)) !important;
    height: calc(38 * var(--services-u)) !important;
    overflow: hidden !important;
    border-radius: calc(12 * var(--services-u)) !important;
  }

  body.services-page .services-catalog__grid .service-card__actions img {
    width: calc(14 * var(--services-u)) !important;
    height: calc(13 * var(--services-u)) !important;
    max-width: none !important;
  }

  body.services-page .services-page__shell::before {
    top: calc(66 * var(--services-u)) !important;
    width: 100vw !important;
    color: rgb(255 255 255 / 2.4%) !important;
    font-size: calc(118 * var(--services-u)) !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    transform: translate3d(-50%, var(--services-city-y), 0) scaleX(1.28) !important;
  }
}

@media (min-width: 721px) and (max-width: 1100px) {
  .floating-header,
  body.services-page .floating-header {
    left: 50% !important;
    width: min(728px, calc(100vw - 40px)) !important;
    transform: translate3d(-50%, 0, 0) !important;
  }

  body.services-page .services-catalog__grid .service-card:nth-child(n) {
    overflow: hidden !important;
    background: #111 !important;
    border: 1px solid #252525 !important;
    border-radius: 20px !important;
  }

  body.services-page .services-catalog__grid .service-card__actions {
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    overflow: hidden !important;
    border-radius: 0 0 20px 20px !important;
  }

  body.services-page .services-catalog__grid .service-card__actions > a {
    overflow: hidden !important;
    border-radius: 0 !important;
  }

  body.services-page .services-catalog__grid .service-card__actions span {
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    overflow: hidden !important;
  }

  body.services-page .services-catalog__grid .service-card__actions img {
    width: 16px !important;
    height: 14px !important;
    max-width: none !important;
  }
}

/* Final mobile services filters spacing fix */
@media (max-width: 720px) {
  body.services-page .services-page-intro {
    padding-bottom: calc(12 * var(--services-u)) !important;
    margin-bottom: 0 !important;
  }

  body.services-page .services-page-intro::before,
  body.services-page .services-page-intro::after {
    content: none !important;
    display: none !important;
  }

  body.services-page .services-catalog {
    margin-top: calc(14 * var(--services-u)) !important;
  }

  body.services-page .services-catalog__filters {
    margin-bottom: 0 !important;
  }
}

/* Final services page mobile polish */
@media (max-width: 720px) {
  body.services-page .services-page-intro {
    padding-bottom: 0 !important;
  }

  body.services-page .services-page-intro::before,
  body.services-page .services-page-intro::after {
    content: none !important;
    display: none !important;
  }

  body.services-page .services-page__shell::before {
    top: calc(66 * var(--services-u)) !important;
    left: 50% !important;
    width: 100vw !important;
    color: rgb(255 255 255 / 2.4%) !important;
    font-size: calc(118 * var(--services-u)) !important;
    line-height: .82 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    transform: translate3d(-50%, var(--services-city-y), 0) scaleX(1.28) !important;
  }
}

@media (min-width: 721px) {
  body.services-page .services-page__shell::before {
    color: rgb(255 255 255 / 2.5%) !important;
  }
}

/* Absolute last fix: /poslugy/ tablet catalog must always render */
@media (min-width: 721px) and (max-width: 1100px) {
  body.services-page .services-catalog {
    display: block !important;
    width: 728px !important;
    max-width: calc(100% - 40px) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  body.services-page .services-catalog__grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 359px)) !important;
    gap: 16px 10px !important;
    justify-content: center !important;
    align-items: start !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  body.services-page .services-catalog__grid .service-card,
  body.services-page .services-catalog__grid .service-card:nth-child(n) {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    display: block !important;
    width: 359px !important;
    max-width: 100% !important;
    height: 410px !important;
    flex: none !important;
    flex-basis: auto !important;
    overflow: hidden !important;
    border-radius: 20px !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  body.services-page .services-catalog__grid .service-card.reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  body.services-page .services-catalog__grid .service-card__media,
  body.services-page .services-catalog__grid .service-card__media--shade,
  body.services-page .services-catalog__grid .service-card > .service-card__image {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 220px !important;
    overflow: hidden !important;
    border-radius: 20px 20px 0 0 !important;
  }

  body.services-page .services-catalog__grid .service-card__image,
  body.services-page .services-catalog__grid .service-card__media .service-card__image,
  body.services-page .services-catalog__grid .service-card > .service-card__image {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 220px !important;
    max-width: none !important;
    object-fit: cover !important;
    border-radius: 20px 20px 0 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  body.services-page .services-catalog__grid .service-card__heading {
    position: absolute !important;
    top: 244px !important;
    right: 12px !important;
    left: 19px !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  body.services-page .services-catalog__grid .service-card__heading h3 {
    margin: 0 !important;
    font-size: 30px !important;
    line-height: 1.15 !important;
  }

  body.services-page .services-catalog__grid .service-card__heading p {
    width: 166px !important;
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
    text-align: right !important;
  }

  body.services-page .services-catalog__grid .service-card__price {
    position: absolute !important;
    top: 295px !important;
    left: 19px !important;
    margin: 0 !important;
    font-size: 16px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  body.services-page .services-catalog__grid .service-card__actions {
    position: absolute !important;
    right: -1px !important;
    bottom: -1px !important;
    left: -1px !important;
    display: grid !important;
    height: 70px !important;
    grid-template-columns: 1fr 1fr !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  body.services-page .services-catalog__grid .service-card__actions > a {
    display: flex !important;
    height: 70px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 10px !important;
    font-size: 18px !important;
  }

  body.services-page .services-catalog__grid .service-card__actions span {
    width: 40px !important;
    height: 40px !important;
    border-radius: 13px !important;
  }
}

@media (max-width: 720px) {
  body.services-page .services-page-intro {
    padding-bottom: calc(64 * var(--services-u)) !important;
  }

  body.services-page .services-page-intro::before,
  body.services-page .services-page-intro::after {
    bottom: calc(18 * var(--services-u)) !important;
  }
}

/* Absolute last fix: homepage services block, not /poslugy/ */
@media (min-width: 721px) and (max-width: 1100px) {
  body:not(.services-page) .services {
    position: relative !important;
    width: 768px !important;
    max-width: 100% !important;
    height: 1146px !important;
    min-height: 1146px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body:not(.services-page) .services__header {
    position: absolute !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    width: 449px !important;
    text-align: center !important;
    transform: translateX(-50%) !important;
  }

  body:not(.services-page) .services__tabs {
    position: absolute !important;
    top: 123px !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    overflow: visible !important;
    transform: translateX(-50%) !important;
  }

  body:not(.services-page) .services__list {
    position: absolute !important;
    top: 196px !important;
    right: auto !important;
    bottom: auto !important;
    left: 20px !important;
    display: block !important;
    width: 728px !important;
    height: 840px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  body:not(.services-page) .services__list .service-card:nth-child(n) {
    position: absolute !important;
    width: 359px !important;
    height: 410px !important;
    flex: 0 0 auto !important;
    flex-basis: auto !important;
    border-radius: 20px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  body:not(.services-page) .services__list .service-card:nth-child(1) {
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    left: 0 !important;
    transform: none !important;
  }

  body:not(.services-page) .services__list .service-card:nth-child(2) {
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
  }

  body:not(.services-page) .services__list .service-card:nth-child(3) {
    top: 430px !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  body:not(.services-page) .services__all {
    position: absolute !important;
    top: auto !important;
    right: auto !important;
    bottom: 0 !important;
    left: 50% !important;
    width: 314px !important;
    height: 70px !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
  }
}

@media (max-width: 720px) {
  body:not(.services-page) .services {
    height: calc(736 * var(--services-u)) !important;
  }

  body:not(.services-page) .services__header::before,
  body:not(.services-page) .services__header::after {
    display: none !important;
  }

  body:not(.services-page) .services::before,
  body:not(.services-page) .services::after {
    top: calc(632 * var(--services-u)) !important;
  }
}

/* Mobile homepage services carousel cue sits below cards */
@media (max-width: 720px) {
  body:not(.services-page) .services::before,
  body:not(.services-page) .services::after {
    top: calc(624 * var(--services-u)) !important;
  }
}

/* Final visible catalog fix for /poslugy/ tablet and mobile filter cue */
@media (min-width: 721px) and (max-width: 1100px) {
  body.services-page .services-catalog {
    display: block !important;
    width: 728px !important;
    max-width: calc(100% - 40px) !important;
    margin: 0 auto !important;
    overflow: visible !important;
  }

  body.services-page .services-catalog__grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 359px)) !important;
    gap: 16px 10px !important;
    justify-content: center !important;
    align-items: start !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body.services-page .services-catalog__grid .service-card:nth-child(n) {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    display: block !important;
    width: 359px !important;
    max-width: 100% !important;
    height: 410px !important;
    flex: none !important;
    flex-basis: auto !important;
    overflow: hidden !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  body.services-page .services-catalog__grid .service-card.reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
  }

  body.services-page .services-catalog__grid .service-card__media,
  body.services-page .services-catalog__grid .service-card__media--shade,
  body.services-page .services-catalog__grid .service-card > .service-card__image {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 220px !important;
    overflow: hidden !important;
    border-radius: 20px 20px 0 0 !important;
  }

  body.services-page .services-catalog__grid .service-card__image,
  body.services-page .services-catalog__grid .service-card__media .service-card__image,
  body.services-page .services-catalog__grid .service-card > .service-card__image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 220px !important;
    object-fit: cover !important;
    border-radius: 20px 20px 0 0 !important;
  }

  body.services-page .services-catalog__grid .service-card__heading {
    position: absolute !important;
    top: 244px !important;
    right: 12px !important;
    left: 19px !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  body.services-page .services-catalog__grid .service-card__heading h3 {
    font-size: 30px !important;
    line-height: 1.15 !important;
  }

  body.services-page .services-catalog__grid .service-card__heading p {
    width: 166px !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
    text-align: right !important;
  }

  body.services-page .services-catalog__grid .service-card__price {
    position: absolute !important;
    top: 295px !important;
    left: 19px !important;
    font-size: 16px !important;
  }

  body.services-page .services-catalog__grid .service-card__actions {
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    display: grid !important;
    height: 70px !important;
    grid-template-columns: 1fr 1fr !important;
    overflow: hidden !important;
    border-radius: 0 0 20px 20px !important;
  }

  body.services-page .services-catalog__grid .service-card__actions > a {
    height: 70px !important;
    padding: 0 10px !important;
    font-size: 18px !important;
    overflow: hidden !important;
    border-radius: 0 !important;
  }

  body.services-page .services-catalog__grid .service-card__actions span {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
    overflow: hidden !important;
    border-radius: 13px !important;
  }

  body.services-page .services-catalog__grid .service-card__actions img {
    width: 16px !important;
    height: 14px !important;
    max-width: none !important;
  }
}

@media (max-width: 720px) {
  body.services-page .services-page-intro {
    gap: calc(18 * var(--services-u)) !important;
    padding-bottom: calc(12 * var(--services-u)) !important;
  }

  body.services-page .services-page-intro::before,
  body.services-page .services-page-intro::after {
    content: none !important;
    display: none !important;
  }
}

/* Final guard for services page responsive layout */
@media (min-width: 1101px) {
  body.services-page .services-catalog {
    display: block !important;
    width: min(1500px, calc(100% - 80px)) !important;
    margin: 0 auto !important;
  }

  body.services-page .services-catalog__grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 450px)) !important;
    gap: 25px !important;
    justify-content: center !important;
    align-items: start !important;
  }

  body.services-page .services-catalog__grid .service-card:nth-child(n) {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    display: block !important;
    width: 450px !important;
    height: 561px !important;
    flex: none !important;
    transform: none !important;
  }
}

@media (min-width: 721px) and (max-width: 1100px) {
  body:not(.services-page) .services {
    min-height: 1146px !important;
  }

  body.services-page .services-catalog {
    display: block !important;
    width: 728px !important;
    max-width: calc(100% - 40px) !important;
    margin: 0 auto !important;
  }

  body.services-page .services-catalog__grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 359px)) !important;
    gap: 16px 10px !important;
    justify-content: center !important;
    align-items: start !important;
  }

  body.services-page .services-catalog__grid .service-card:nth-child(n) {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    display: block !important;
    width: 359px !important;
    max-width: 100% !important;
    height: 410px !important;
    flex: none !important;
    transform: none !important;
  }
}

@media (max-width: 720px) {
  body.services-page .services-page-intro {
    padding-bottom: calc(12 * var(--services-u)) !important;
  }

  body.services-page .services-page-intro::before,
  body.services-page .services-page-intro::after {
    content: none !important;
    display: none !important;
  }
}

@media (max-width: 720px) {
  body.services-page .services-page__shell {
    position: relative !important;
    isolation: isolate !important;
  }

  body.services-page .services-page__shell::before {
    content: "ХАРКІВ" !important;
    position: absolute !important;
    z-index: 0 !important;
    top: calc(66 * var(--services-u)) !important;
    left: 50% !important;
    width: 100vw !important;
    color: rgb(255 255 255 / 2.4%) !important;
    font-family: "Oswald", sans-serif !important;
    font-size: calc(118 * var(--services-u)) !important;
    font-weight: 400 !important;
    line-height: .8 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    transform: translate3d(-50%, var(--services-city-y), 0) scaleX(1.28) !important;
    will-change: transform !important;
  }

  body.services-page .services-page-intro,
  body.services-page .services-catalog {
    position: relative !important;
    z-index: 1 !important;
  }
}

/* ============================================================
   CONTACTS PAGE
   ============================================================ */

.contacts-page__topbar {
  position: relative;
  width: calc(100% - 30px);
  max-width: 1470px;
  height: 80px;
  margin: 0 auto;
}

.contacts-page__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  width: min(1176px, calc(100% - 60px));
  margin: 70px auto 0;
  text-align: center;
}

.contacts-page__title {
  margin: 0;
  color: #fff;
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  font-size: 70px;
  line-height: 1.2;
  text-transform: uppercase;
}

.contacts-page__title span {
  color: var(--red);
}

.contacts-page__info {
  display: flex;
  width: min(1500px, calc(100% - 100px));
  margin: 60px auto 0;
  border-top: 1px solid #262626;
  border-bottom: 1px solid #262626;
}

.contacts-page__group {
  display: flex;
  flex: 1;
  align-items: flex-start;
  gap: 30px;
  padding: 24px 0;
}

.contacts-page__group + .contacts-page__group {
  margin-left: 30px;
  padding-left: 30px;
  border-left: 1px solid #262626;
}

.contacts-page__label {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-family: "Oswald", sans-serif;
  font-size: 20px;
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;
}

.contacts-page__label img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.contacts-page__rows {
  display: grid;
  flex: 1;
  gap: 10px;
  padding-left: 24px;
  border-left: 1px solid #262626;
}

.contacts-page__row {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 20px;
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  line-height: 1.3;
  white-space: nowrap;
}

.contacts-page__row span {
  color: rgba(255, 255, 255, 0.8);
}

.contacts-page__row strong {
  color: #fff;
  font-weight: 500;
}

.contacts-page__row a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.contacts-page__row a:hover,
.contacts-page__row a:focus-visible {
  color: var(--red);
}

.contacts-page__main {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  width: min(1500px, calc(100% - 100px));
  margin: 60px auto 100px;
}

.contacts-page__main .contact__map {
  position: static;
  flex: 0 0 750px;
  width: 750px;
  height: 440px;
  margin: 0;
}

.contacts-page__main .contact__form {
  position: static;
  flex: 1;
  width: auto;
  margin: 0;
  top: auto;
  right: auto;
}

@media (max-width: 1100px) {
  .contacts-page__topbar {
    height: 0;
  }

  .contacts-page__head {
    gap: 20px;
    margin-top: 40px;
  }

  .contacts-page__title {
    font-size: clamp(40px, 7vw, 60px);
  }

  .contacts-page__info {
    flex-direction: column;
    width: calc(100% - 48px);
    margin-top: 40px;
  }

  .contacts-page__group {
    width: 100%;
    padding: 20px 0;
  }

  .contacts-page__group + .contacts-page__group {
    margin-left: 0;
    padding-top: 20px;
    padding-left: 0;
    border-top: 1px solid #262626;
    border-left: 0;
  }

  .contacts-page__label {
    width: 140px;
  }

  .contacts-page__main {
    flex-direction: column;
    width: calc(100% - 48px);
    gap: 20px;
    margin: 40px auto 70px;
  }

  .contacts-page__main .contact__map {
    flex: 0 0 auto;
    width: 100%;
    height: 400px;
  }

  .contacts-page__main .contact__form {
    width: 100%;
  }
}

@media (max-width: 720px) {
  .contacts-page__head {
    margin-top: 30px;
  }

  .contacts-page__title {
    font-size: clamp(30px, 9vw, 38px);
  }

  .contacts-page__info {
    width: calc(100% - 32px);
    margin-top: 30px;
  }

  .contacts-page__label {
    width: auto;
    font-size: 16px;
  }

  .contacts-page__label img {
    width: 16px;
    height: 16px;
  }

  .contacts-page__rows {
    padding-left: 16px;
  }

  .contacts-page__row {
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 10px;
    font-size: 14px;
    white-space: normal;
  }

  .contacts-page__main {
    width: calc(100% - 32px);
    margin: 30px auto 50px;
  }

  .contacts-page__main .contact__map {
    height: 260px;
  }
}

/* --- 0.1 blog: сторінка "Блог" --- */

body.blog-page {
  background: #0e0e0e;
  color: #fff;
}

body.blog-page .floating-header {
  position: fixed;
  top: 16px;
  margin-top: 14px;
}

.blog-page__shell {
  width: min(100%, 1600px);
  margin: 0 auto;
  overflow: hidden;
  padding-top: 116px;
}

.blog-intro {
  display: flex;
  width: min(1176px, calc(100% - 60px));
  margin: 0 auto 60px;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  text-align: center;
}

.blog-intro__crumbs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgb(255 255 255 / 60%);
  font-size: 15px;
  line-height: 1.25;
}

.blog-intro__crumbs a {
  display: inline-flex;
  color: rgb(255 255 255 / 60%);
  text-decoration: none;
}

.blog-intro__crumbs svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.blog-intro h1 {
  width: 100%;
  margin: 0;
  color: #fff;
  font-family: "Oswald", sans-serif;
  font-size: 70px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
}

.blog-intro h1 span {
  color: var(--red);
}

.blog-grid-section {
  width: min(1500px, calc(100% - 60px));
  margin: 0 auto;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 25px;
  margin: 0 0 60px;
}

.blog-empty {
  margin: 0 0 60px;
  color: rgb(255 255 255 / 70%);
  font-size: 18px;
  text-align: center;
}

.blog-card {
  display: flex;
  flex-direction: column;
  padding: 9px;
  border: 1px solid #222;
  border-radius: 20px;
  background: #0e0e0e;
  color: #fff;
}

.blog-card__media {
  position: relative;
  display: block;
  aspect-ratio: 430 / 250;
  overflow: hidden;
  border-radius: 20px;
}

.blog-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-card__date {
  position: absolute;
  top: 14px;
  right: 10px;
  padding: 13px 18px;
  border-radius: 15px;
  background: rgb(21 21 21 / 30%);
  backdrop-filter: blur(2.5px);
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-size: 15px;
  line-height: 1.3;
  white-space: nowrap;
}

.blog-card__title {
  margin: 24px 15px 0;
  font-family: "Oswald", sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.4;
  text-transform: uppercase;
}

.blog-card__title a {
  color: inherit;
  text-decoration: none;
}

.blog-card__excerpt {
  flex: 1;
  margin: 12px 15px 0;
  color: rgb(255 255 255 / 80%);
  font-size: 16px;
  line-height: 1.3;
}

.blog-card__more {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 15px;
  margin: 20px 15px 15px;
  color: #fff;
  text-decoration: none;
}

.blog-card__more span:first-child {
  font-family: "Oswald", sans-serif;
  font-size: 20px;
  text-transform: uppercase;
}

.blog-card__more-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 15px;
  background: #222;
}

.blog-card__more-icon img {
  width: 16px;
  height: 14px;
}

.blog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin: 0 0 90px;
}

.blog-pagination__arrow {
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  border-radius: 15px;
  background: #411516;
  text-decoration: none;
}

.blog-pagination__arrow.is-disabled {
  opacity: 0.35;
  pointer-events: none;
}

.blog-pagination__arrow img {
  width: 16px;
  height: 14px;
}

.blog-pagination__arrow--prev img {
  transform: rotate(135deg);
}

.blog-pagination__arrow--next img {
  transform: rotate(-45deg);
}

.blog-pagination__pages {
  display: flex;
  align-items: center;
  gap: 5px;
}

.blog-pagination__page,
.blog-pagination__ellipsis {
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  border: 1px solid #222;
  border-radius: 15px;
  color: rgb(255 255 255 / 40%);
  font-family: "Oswald", sans-serif;
  font-size: 18px;
  text-decoration: none;
  text-transform: uppercase;
}

.blog-pagination__ellipsis {
  border-color: transparent;
}

.blog-pagination__page.is-active {
  border-color: #fff;
  background: #fff;
  color: #0e0e0e;
}

@media (max-width: 1100px) {
  .blog-page__shell {
    padding-top: 104px;
  }

  .blog-intro {
    width: calc(100% - 32px);
    margin-bottom: 40px;
    gap: 22px;
  }

  .blog-intro h1 {
    font-size: clamp(50px, 7.5vw, 70px);
  }

  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .blog-page__shell {
    padding-top: 88px;
  }

  .blog-intro {
    width: calc(100% - 20px);
    margin-bottom: 30px;
    gap: 16px;
  }

  .blog-intro__crumbs {
    font-size: 13px;
  }

  .blog-intro h1 {
    font-size: clamp(38px, 12vw, 52px);
  }

  .blog-grid {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 40px;
  }

  .blog-pagination {
    gap: 8px;
    margin-bottom: 60px;
  }

  .blog-pagination__pages {
    gap: 4px;
  }

  .blog-pagination__arrow,
  .blog-pagination__page,
  .blog-pagination__ellipsis {
    width: 42px;
    height: 42px;
  }
}

/* --- 0.1 blog: сторінка окремої статті --- */

.blog-post__shell {
  width: min(100%, 1600px);
  margin: 0 auto;
  overflow: hidden;
  padding-top: 116px;
}

.blog-post-intro {
  display: flex;
  width: min(1176px, calc(100% - 60px));
  margin: 0 auto 30px;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.blog-post-intro__crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgb(255 255 255 / 60%);
  font-size: 15px;
  line-height: 1.25;
}

.blog-post-intro__crumbs a {
  display: inline-flex;
  color: rgb(255 255 255 / 60%);
  text-decoration: none;
}

.blog-post-intro__crumbs svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.blog-post-intro__crumbs .is-current {
  color: #fff;
}

.blog-post-intro h1 {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  color: #fff;
  font-family: "Oswald", sans-serif;
  font-size: 50px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
}

.blog-post-intro h1 span {
  color: var(--red);
}

.blog-post-hero {
  width: min(1200px, calc(100% - 60px));
  aspect-ratio: 1200 / 450;
  margin: 0 auto 30px;
  overflow: hidden;
  border-radius: 30px;
}

.blog-post-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-post-lead {
  width: min(1116px, calc(100% - 60px));
  margin: 0 auto 40px;
  color: #fff;
  font-size: 18px;
  line-height: 1.3;
  text-align: center;
}

.blog-post-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  width: min(1200px, calc(100% - 60px));
  margin: 0 auto 60px;
}

.blog-post-meta__item {
  padding: 20px;
  border-radius: 20px;
  background: rgb(21 21 21 / 70%);
}

.blog-post-meta__label {
  margin: 0 0 4px;
  color: rgb(255 255 255 / 50%);
  font-size: 16px;
  line-height: 1.3;
}

.blog-post-meta__value {
  margin: 0;
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.3;
}

.blog-post-content {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: min(1111px, calc(100% - 60px));
  margin: 0 auto 80px;
  color: rgb(255 255 255 / 80%);
  font-size: 18px;
  line-height: 1.3;
}

.blog-post-content h2 {
  margin: 0 0 20px;
  color: #fff;
  font-family: "Oswald", sans-serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 1.4;
  text-transform: uppercase;
}

.blog-post-content p {
  margin: 0 0 10px;
}

.blog-post-content p:last-child {
  margin-bottom: 0;
}

.blog-post-content a {
  color: var(--red);
  text-decoration: underline;
}

.blog-post-content strong {
  color: #fff;
}

.blog-post-content img {
  max-width: 100%;
  border-radius: 20px;
}

@media (max-width: 1100px) {
  .blog-post__shell {
    padding-top: 104px;
  }

  .blog-post-intro {
    width: calc(100% - 32px);
    margin-bottom: 24px;
  }

  .blog-post-intro h1 {
    font-size: clamp(34px, 6vw, 50px);
  }

  .blog-post-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .blog-post-content h2 {
    font-size: 30px;
  }
}

@media (max-width: 720px) {
  .blog-post__shell {
    padding-top: 88px;
  }

  .blog-post-intro {
    width: calc(100% - 20px);
    margin-bottom: 20px;
    gap: 14px;
  }

  .blog-post-intro__crumbs {
    font-size: 13px;
  }

  .blog-post-intro h1 {
    font-size: clamp(28px, 8vw, 38px);
  }

  .blog-post-hero {
    aspect-ratio: 4 / 3;
    border-radius: 20px;
  }

  .blog-post-lead {
    margin-bottom: 30px;
    font-size: 16px;
  }

  .blog-post-meta {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 40px;
  }

  .blog-post-content {
    gap: 24px;
    margin-bottom: 50px;
    font-size: 16px;
  }

  .blog-post-content h2 {
    font-size: 26px;
  }
}

/* --- 0.1 наші роботи: сторінка кейсу --- */

.work-gallery {
  display: flex;
  gap: 30px;
  width: min(1400px, calc(100% - 60px));
  margin: 0 auto 40px;
}

.work-gallery__item {
  flex: 1 1 0;
  aspect-ratio: 685 / 450;
  overflow: hidden;
  border-radius: 20px;
}

.work-gallery__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work-story {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: flex-start;
  width: min(1400px, calc(100% - 60px));
  margin: 0 auto 40px;
}

.work-story__text {
  flex: 1 1 480px;
  min-width: 0;
}

.work-story__head {
  margin: 0 0 20px;
}

.work-story__eyebrow {
  margin: 0 0 10px;
  color: rgb(255 255 255 / 80%);
  font-family: "Oswald", sans-serif;
  font-weight: 300;
  font-size: 20px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.work-story__subtitle {
  margin: 0;
  color: #fff;
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  font-size: 40px;
  line-height: 1.3;
  text-transform: uppercase;
}

.work-story__subtitle span {
  color: var(--red);
}

.work-story__content {
  color: rgb(255 255 255 / 80%);
  font-size: 18px;
  line-height: 1.3;
}

.work-story__content p {
  margin: 0 0 10px;
}

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

.work-story__content h2,
.work-story__content h3 {
  margin: 20px 0 10px;
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.3;
}

.work-story__content ul,
.work-story__content ol {
  margin: 0 0 10px;
  padding-left: 20px;
}

.work-story__content li {
  margin: 0 0 4px;
  font-size: 18px;
  line-height: 1.3;
}

.work-story__content a {
  color: var(--red);
  text-decoration: underline;
}

.work-story__content strong {
  color: #fff;
}

.work-story__media {
  flex: 1 1 380px;
  min-width: 0;
  aspect-ratio: 661 / 629;
  overflow: hidden;
  border-radius: 20px;
  align-self: stretch;
}

.work-story__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work-highlight {
  display: flex;
  align-items: center;
  gap: 30px;
  width: min(1400px, calc(100% - 60px));
  margin: 0 auto 40px;
  padding: 24px;
  border-radius: 20px;
  background: rgb(21 21 21 / 70%);
}

.work-highlight__label {
  flex-shrink: 0;
  margin: 0;
  color: var(--red);
  font-family: "Oswald", sans-serif;
  font-size: 30px;
  text-transform: uppercase;
}

.work-highlight__text {
  flex: 1;
  margin: 0;
  color: rgb(255 255 255 / 80%);
  font-size: 18px;
  line-height: 1.3;
}

.work-highlight__logo {
  flex-shrink: 0;
  width: 120px;
  height: auto;
}

.work-full-image {
  width: min(1400px, calc(100% - 60px));
  aspect-ratio: 1400 / 700;
  margin: 0 auto 60px;
  overflow: hidden;
  border: 6px solid #222;
  border-radius: 30px;
}

.work-full-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work-results {
  width: min(1400px, calc(100% - 60px));
  margin: 0 auto 60px;
  padding: 50px 30px;
  border-radius: 30px;
  background: rgb(255 255 255 / 2%);
}

.work-results__head {
  margin: 0 0 30px;
  text-align: center;
}

.work-results__eyebrow {
  margin: 0 0 10px;
  color: rgb(255 255 255 / 80%);
  font-family: "Oswald", sans-serif;
  font-weight: 300;
  font-size: 20px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.work-results__title {
  margin: 0 auto;
  max-width: 1083px;
  color: #fff;
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  font-size: 40px;
  line-height: 1.3;
  text-transform: uppercase;
}

.work-results__title span {
  color: var(--red);
}

.work-results__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}

.work-results__item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px 23px;
  border-radius: 20px;
  background: rgb(21 21 21 / 70%);
}

.work-results__check {
  display: flex;
  flex-shrink: 0;
  width: 31px;
  height: 30px;
}

.work-results__item p {
  margin: 0;
  color: #fff;
  font-size: 18px;
  line-height: 1.3;
}

@media (max-width: 1100px) {
  .work-gallery {
    flex-wrap: wrap;
  }

  .work-gallery__item {
    flex: 1 1 260px;
  }

  .work-story__subtitle,
  .work-results__title {
    font-size: 30px;
  }

  .work-highlight {
    flex-wrap: wrap;
  }

  .work-highlight__logo {
    display: none;
  }

  .work-results {
    padding: 34px 20px;
  }
}

@media (max-width: 720px) {
  .work-gallery {
    flex-direction: column;
    margin-bottom: 30px;
  }

  .work-gallery__item {
    aspect-ratio: 4 / 3;
  }

  .work-story {
    margin-bottom: 30px;
  }

  .work-story__media {
    aspect-ratio: 4 / 3;
  }

  .work-story__subtitle,
  .work-results__title {
    font-size: 24px;
  }

  .work-highlight {
    padding: 18px;
  }

  .work-highlight__label {
    font-size: 22px;
  }

  .work-full-image {
    margin-bottom: 40px;
    border-width: 3px;
    border-radius: 20px;
  }

  .work-results {
    margin-bottom: 40px;
  }

  .work-results__item {
    padding: 16px 18px;
  }
}