@import url("https://fonts.googleapis.com/css2?family=Mona+Sans:wght@400;500;600;700&display=swap");

:root {
  color-scheme: light;
  --bg: #ffffff;
  --border: rgba(15, 23, 42, 0.12);
  --text: rgba(15, 23, 42, 0.92);
  --muted: rgba(15, 23, 42, 0.68);
  font-family:
    "Mona Sans",
    "Mona Sans Variable",
    ui-sans-serif,
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Ubuntu,
    Cantarell,
    Noto Sans,
    Helvetica,
    Arial;
}

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

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

.container {
  width: min(1100px, calc(100% - 40px));
  margin-inline: auto;
}

.page {
  flex: 1;
}

@media (min-width: 1160px) {
  .container {
    width: calc(100% - 200px);
  }
}

/* Header */
.header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(10px);
}

.inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 52px;
  padding: 14px 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: rgba(15, 23, 42, 0.92);
  min-width: 160px;
}

.mark {
  width: 163px;
  height: 58px;
  display: inline-grid;
  place-items: center;
}

.mark img {
  width: 163px;
  height: 58px;
  object-fit: contain;
  display: block;
}

.nav {
  display: flex;
  align-items: center;
  gap: 52px;
  flex: 1;
  justify-content: flex-start;
  min-width: 200px;
}

.rightActions {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.headerQuoteBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  border-radius: 8px;
  background: #f37110;
  color: #ffffff;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  padding: 0;
  transition:
    max-width 360ms ease,
    opacity 260ms ease,
    transform 300ms ease,
    padding 360ms ease;
}

.headerQuoteBtn:hover {
  filter: brightness(0.98);
}

[data-header-root][data-show-quote="true"] .headerQuoteBtn {
  max-width: 360px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  padding: 0 20px;
}

.navItem {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.navLink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #1a1a1a;
  font-size: 18px;
  font-weight: 500;
  white-space: nowrap;
}

.navLink:hover {
  color: rgba(15, 23, 42, 0.92);
}

.dropdownTrigger {
  padding: 10px 16px;
  border-radius: 12px;
  background: transparent;
  transition: background 260ms ease;
  position: relative;
}

.dropdownTrigger::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0px;
  width: 0%;
  height: 4px;
  border-radius: 5px 5px 0 0;
  background: #f37110;
  transform: translateX(-50%);
  transition: width 0.35s ease;
}

.dropdown:hover .dropdownTrigger,
.dropdown:focus-within .dropdownTrigger {
  background: rgba(15, 23, 42, 0.04);
}

.dropdown:hover .dropdownTrigger::after,
.dropdown:focus-within .dropdownTrigger::after {
  width: 22%;
}

.dropdownPanel {
  position: absolute;
  top: calc(100% + 5px);
  left: 155px;
  transform: translateX(-35%) translateY(10px);
  width: min(440px, 70vw);
  padding: 18px 18px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  box-shadow: 0 26px 70px rgba(2, 6, 23, 0.16);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 260ms ease,
    transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
    visibility 0ms linear 320ms;
  z-index: 30;
}

.dropdownPanel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -16px;
  height: 16px;
}

.dropdown:hover .dropdownPanel,
.dropdown:focus-within .dropdownPanel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-35%) translateY(0px);
  transition-delay: 80ms, 80ms, 0ms;
}

.dropdownGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 38px;
}

.dropdownCol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
  align-content: start;
}

.dropdownLink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: #1a1a1a;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  padding: 10px 10px;
  border-radius: 12px;
  transition:
    background 220ms ease,
    transform 220ms ease;
}

.dropdownLink:hover {
  color: #f37110;
}

.ddIcon {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.45);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
  flex: 0 0 auto;
  transition: background 220ms ease;
}

.dropdownLink:hover .ddIcon {
  background: #f37110;
}

.icon,
.external {
  height: 18px;
  display: inline-grid;
  place-items: center;
  color: rgba(15, 23, 42, 0.62);
}

.icon img,
.external img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
}

.menuBtn {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 0;
  background: #f1f1f1;
  cursor: pointer;
  display: none;
  place-items: center;
  transition: background 240ms ease;
}

.menuBtn:hover {
  background: rgba(15, 23, 42, 0.06);
}

.menuIcon {
  width: 20px;
  height: 16px;
  position: relative;
  display: inline-block;
}

.bar {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #1a1a1a;
  border-radius: 999px;
  transition:
    transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 220ms ease,
    top 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.bar1 {
  top: 0;
}

.bar2 {
  top: 7px;
}

.bar3 {
  top: 14px;
}

[data-header-root][data-menu-open="true"] .bar1 {
  top: 7px;
  transform: rotate(45deg);
}

[data-header-root][data-menu-open="true"] .bar2 {
  opacity: 0;
}

[data-header-root][data-menu-open="true"] .bar3 {
  top: 7px;
  transform: rotate(-45deg);
}

.mobileMenu {
  position: fixed;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 280ms ease, visibility 0ms linear 280ms;
  z-index: 19;
}

.mobileSheet {
  position: absolute;
  inset: 0;
  margin-top: 87px;
  height: calc(100dvh - 87px);
  overflow: hidden;
  background: #fff;
  transform: translateY(10px);
  opacity: 0;
  transition:
    transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 260ms ease;
}

.header [data-header-root][data-menu-open="true"]~.mobileMenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0ms;
}

.header [data-header-root][data-menu-open="true"]~.mobileMenu .mobileSheet {
  transform: translateY(0);
  opacity: 1;
}

.mobileInner {
  width: 100%;
  margin: 0 auto;
  padding: 24px 100px 30px;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
}

.mobileContent {
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
}

.mobileFooter {
  flex: 0 0 auto;
  margin-top: auto;
  display: grid;
  gap: 14px;
  padding-top: 12px;
}

.mobileSection {
  display: grid;
}

.mobileAccordion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: #1a1a1a;
}

.mobileTitle {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
}

.accIcon {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
}

.accIcon img {
  width: 16px;
  height: 16px;
  display: block;
  transform: rotate(180deg);
  opacity: 0.8;
}

.mobileServices {
  overflow: hidden;
  max-height: 1200px;
  opacity: 1;
  transform: translateY(0);
  transition:
    max-height 420ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 260ms ease,
    transform 260ms ease;
}

[data-services-panel][data-expanded="false"] {
  max-height: 0px;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}

[data-services-toggle][aria-expanded="false"] .accIcon {
  transform: rotate(180deg);
}

.mobileList {
  list-style: none;
  padding: 0;
  display: grid;
}

.mobileLink {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  color: #1a1a1a;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  padding: 10px 6px;
  border-radius: 12px;
  transition: color 220ms ease, background 220ms ease;
}

.mobileLink:hover {
  color: #f37110;
  background: rgba(15, 23, 42, 0.03);
}

.mIcon {
  width: 26px;
  height: 26px;
  background: rgba(15, 23, 42, 0.45);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
  flex: 0 0 auto;
  transition: background 220ms ease;
}

.mobileLink:hover .mIcon {
  background: #f37110;
}

.mobileDivider {
  height: 1px;
  background: rgba(15, 23, 42, 0.12);
}

.mobileRowLink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-decoration: none;
  color: #1a1a1a;
  font-size: 18px;
  font-weight: 500;
  padding: 18px 6px;
  border-radius: 12px;
  transition: background 220ms ease, color 220ms ease;
}

.mobileRowLink:hover {
  background: rgba(15, 23, 42, 0.03);
  color: #f37110;
}

.rowArrow {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  opacity: 0.65;
}

.rowArrow img {
  width: 18px;
  height: 18px;
  display: block;
}

.mobileCta {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border-radius: 12px;
  background: #f37110;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-size: 16px;
}

.mobileBottomLink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-decoration: none;
  color: #1a1a1a;
  font-size: 18px;
  font-weight: 500;
  padding: 14px 6px;
  border-radius: 12px;
  transition: background 220ms ease, color 220ms ease;
}

.mobileBottomLink:hover {
  background: rgba(15, 23, 42, 0.03);
  color: #f37110;
}

.bottomIcon,
.bottomArrow {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  opacity: 0.75;
}

.bottomIcon img,
.bottomArrow img {
  width: 20px;
  height: 20px;
  display: block;
}

html.menuOpen {
  overflow: hidden;
}

@media (min-width: 744px) and (max-width: 1160px) {
  .inner {
    gap: 32px;
  }

  .mobileInner {
    padding: 20px 32px;
  }

  .nav {
    gap: 32px;
  }

  .navLink {
    font-size: 16px;
  }

  .dropdownPanel {
    width: min(620px, 72vw);
  }
}

@media (max-width: 1160px) {
  .nav {
    display: none;
  }

  .headerQuoteBtn {
    display: none;
  }

  .brand {
    min-width: 0;
  }

  .menuBtn {
    display: grid;
  }
}

@media (max-width: 744px) {
  .inner {
    gap: 18px;
    padding: 12px 0;
  }

  .mobileInner {
    padding: 20px 18px;
  }

  .mobileSheet {
    margin-top: 80px;
    height: calc(100dvh - 80px);
  }

  .mark,
  .mark img {
    width: 140px;
    height: 50px;
  }
}

@media (max-width: 390px) {
  .inner {
    gap: 12px;
  }

  .mobileSheet {
    margin-top: 75px;
    height: calc(100dvh - 75px);
  }
}

@media (max-width: 320px) {

  .mark,
  .mark img {
    width: 128px;
    height: 46px;
  }

  .mobileSheet {
    margin-top: 75px;
    height: calc(100dvh - 75px);
  }
}

/* Hero (home) */
.hero {
  padding: 56px 0 34px;
}

.trust {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  color: rgba(15, 23, 42, 0.68);
  font-weight: 650;
  margin-bottom: 18px;
}

.trustItem {
  display: inline-flex;
  gap: 10px;
  line-height: 120%;
  color: #1a1a1a;
  letter-spacing: 0%;
  font-weight: 500;
  align-items: center;
  font-size: 13px;
  white-space: nowrap;
}

.trustItem img {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
}

.sep {
  width: 1px;
  height: 18px;
  background: rgba(15, 23, 42, 0.14);
}

.hero .title {
  margin: 0 auto;
  text-align: center;
  font-size: 50px;
  font-family: "Mona Sans", "Mona Sans Variable";
  letter-spacing: -0.03em;
  line-height: 120%;
  font-weight: 700;
  width: 700px;
  color: #1a1a1a;
  justify-self: center;
}

.accent {
  position: relative;
  color: #f37110;
  white-space: nowrap;
}

.accent::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.1em;
  height: 6px;
  border-radius: 999px;
  background: #f37110;
}

.hero .subtitle {
  margin: 18px auto 0;
  text-align: center;
  color: #1a1a1a;
  font-size: 20px;
  font-weight: 500;
  line-height: 148%;
  max-width: 52ch;
  white-space: pre-wrap;
}

.quote {
  background: #F2F2F2;
    border-radius: 16px;
    padding: 10px;
    margin: 30px auto 0;
  width: min(600px, 100%);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
}

.review {
  padding-bottom: 10px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
}

.hero .selectWrap {
  display: grid;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #fff;
  box-shadow: 0 18px 40px rgba(2, 6, 23, 0.06);
  position: relative;
}

.selectLabel {
  font-size: 13px;
  color: #9a9b9e;
  line-height: 115%;
  font-weight: 500;
}

select {
  appearance: none;
  border: 0;
  background: transparent;
  font-size: 16px;
  font-weight: 500;
  color: #1a1a1a;
  padding: 0;
  outline: none;
  width: 100%;
}

.hero .selectWrap::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 36%;
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(15, 23, 42, 0.35);
  border-bottom: 2px solid rgba(15, 23, 42, 0.35);
  transform: translateY(2px) rotate(45deg);
  pointer-events: none;
}

.hero .btn {
  height: 56px;
  border-radius: 8px;
  border: 0;
  background: #f37110;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0 24px;
  white-space: nowrap;
  cursor: pointer;
}

.hero .btn:hover {
  filter: brightness(0.98);
}

@media (min-width: 744px) and (max-width: 1160px) {
  .hero .title {
    font-size: 28px;
  }

  .quote {
    width: min(520px, 100%);
  }
}

@media (max-width: 744px) {
  .hero .container {
    display: flex;
    flex-direction: column;
  }

  .trust {
    gap: 10px;
  }

  .trustItem {
    font-size: 11px;
    gap: 5px;
  }

  .hero .title {
    order: 1;
    font-size: 28px;
    width: 100%;
  }

  .hero .subtitle {
    order: 2;
    font-size: 18px;
    white-space: normal;
  }

  .quote {
    order: 3;
  }

  .trust {
    order: 4;
    margin-top: 18px;
    margin-bottom: 0;
  }

  .hero {
    padding: 44px 0 28px;
  }
}

@media (max-width: 980px) {
  .quote {
    grid-template-columns: 1fr;
  }

  .hero .btn {
    width: 100%;
  }
}

@media (max-width: 390px) {
  .hero {
    padding: 34px 0 22px;
  }

  .sep {
    display: none;
  }

  .hero .accent::after {
    height: 5px;
  }

  .hero .subtitle {
    margin-top: 14px;
    font-size: 16px;
    white-space: normal;
  }

  .quote {
    margin-top: 22px;
  }

  .hero .selectWrap {
    padding: 8px 14px;
  }

  .hero .btn {
    height: 52px;
    font-size: 15px;
  }
}

@media (max-width: 320px) {
  .hero .title {
    font-size: 22px;
  }

  .hero .subtitle {
    font-size: 15px;
    white-space: normal;
  }

  .hero .btn {
    padding: 0 18px;
  }
}

/* Gallery marquee */
.gallery {
  padding: 28px 0 60px;
}

.gallery .marquee {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  --gap: 14px;
  mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}

.gallery .track {
  display: flex;
  flex-direction: row;
  gap: var(--gap);
  width: max-content;
  padding: 6px 0;
  animation: gallery-scroll var(--duration) linear infinite;
  will-change: transform;
}

.gallery .marquee:hover .track {
  animation-play-state: paused;
}

.gallery .group {
  display: flex;
  flex-direction: row;
  gap: var(--gap);
}

.gallery .gCard {
  width: var(--size);
  height: var(--size);
  border-radius: 22px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.03);
  box-shadow: 0 18px 44px rgba(2, 6, 23, 0.06);
  flex: 0 0 auto;
}

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

.gallery .srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes gallery-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 980px) {
  .gallery .marquee {
    --size: 180px;
  }
}

@media (max-width: 744px) {
  .gallery .marquee {
    --size: 160px;
    --gap: 18px;
  }
}

@media (max-width: 390px) {
  .gallery .marquee {
    --size: 140px;
    --gap: 16px;
  }
}

@media (max-width: 320px) {
  .gallery .marquee {
    --size: 120px;
    --gap: 14px;
  }
}

/* Experts */
.experts {
  padding: 60px 0 60px;
  text-align: center;
  background: #f8f8f8;
  font-family:
    "Mona Sans",
    ui-sans-serif,
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    "Noto Sans",
    "Liberation Sans",
    sans-serif;
}

.experts * {
  font-family: inherit;
}

.experts .expertsHeader {
  max-width: 71ch;
  margin: 0 auto 10px;
}

.experts .expertsHeader h2 {
  margin: 0;
  font-size: 32px;
  line-height: 116%;
  letter-spacing: 0%;
  font-weight: 700;
  color: #1a1a1a;
}

.experts .expertsHeader p {
  margin: 10px 0 0;
  color: #1a1a1a;
  font-size: 18px;
  letter-spacing: 0%;
  line-height: 1.5;
}

.experts .tabs {
  display: inline-flex;
  justify-content: center;
  margin: 14px auto 14px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

#experts-cards {
  max-width: 80rem;
  margin: 0 auto;
}

.experts .tab {
  position: relative;
  padding: 12px 82px;
  cursor: pointer;
  border: 0;
  line-height: 150%;
  background: none;
  color: #1a1a1a;
  font-weight: 500;
  font-size: 16px;
}

.experts .tab+.tab {
  border-left: 1px solid rgba(15, 23, 42, 0.08);
}

.experts .tab::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0%;
  border-radius: 5px 5px 0 0;
  height: 4px;
  background: #f37110;
  transform: translateX(-50%);
  transition: width 0.35s ease;
}

.experts .tab.active {
  color: #1a1a1a;
  font-weight: 600;
}

.experts .tab.active::after {
  width: 62%;
}

.experts .fadeOut {
  opacity: 0;
  transition: opacity 240ms ease;
}

.experts .fadeIn {
  opacity: 1;
  transition: opacity 240ms ease;
}

.experts .expertsGrid {
  display: flex;
  flex-wrap: wrap;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  justify-content: center;
  margin-top: 8px;
}

.experts .expertsCard {
  border: 1.5px solid #e6e6e6;
  border-radius: 14px;
  text-align: center;
  padding: 22px 14px 18px;
  color: rgba(15, 23, 42, 0.86);
  background: #fff;
  text-decoration: none;
  width: 300px;
  height: 180px;
}

.experts .expertsCard.inactive {
  color: rgba(15, 23, 42, 0.42);
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: none;
}

.experts .icon {
  height: 56px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}

.experts .icon img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  display: block;
}

.experts .expertsCard.inactive .icon {
  opacity: 0.5;
}

.experts .name {
  font-weight: 500;
  font-size: 16px;
  line-height: 150%;
  padding-top: 10px;
  color: #1a1a1a;
}

.experts .expertsCard.inactive .name {
  color: rgba(15, 23, 42, 0.45);
}

.experts .rating {
  margin-top: 12px;
  color: #e07b2c;
  font-weight: 500;
  font-size: 13px;
}

.experts .expertsCard.inactive .rating {
  color: rgba(15, 23, 42, 0.45);
  font-weight: 800;
}

@media (max-width: 768px) {
  .experts .tabs {
    display: none;
  }

  .experts {
    padding-top: 18px;
  }

  .experts .expertsCard {
    max-width: 48%;
  }
}

@media (min-width: 744px) and (max-width: 1160px) {
  .experts .tab {
    padding: 12px 52px;
  }

  .experts .expertsGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: stretch;
    gap: 14px;
  }

  .experts .expertsCard {
    width: 100%;
  }
}

@media (max-width: 744px) {
  .experts .expertsHeader h2 {
    font-size: 28px;
  }

  .experts .expertsHeader p {
    font-size: 16px;
  }
}

@media (max-width: 390px) {
  .experts {
    padding-bottom: 34px;
  }

  .experts .expertsGrid {
    align-items: stretch;
    gap: 15px 4%;
  }

  .experts .expertsCard {
    width: 48%;
    max-width: none;
    height: auto;
    padding: 18px 14px 16px;
  }
}

@media (max-width: 320px) {
  .experts .expertsHeader h2 {
    font-size: 26px;
  }
}

/* Reviews */
.reviews {
  text-align: center;
  padding: 50px 0 54px;
  background: #fff;
  font-family:
    "Mona Sans",
    ui-sans-serif,
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    "Noto Sans",
    "Liberation Sans",
    sans-serif;
}

.reviews * {
  font-family: inherit;
}

.reviews .reviewsContent {
  max-width: 100%;
}

.reviews .reviewsHeader {
  max-width: 40rem;
  text-align: center;
  margin: 0 auto 18px;
}

.reviews .reviewsHeader h2 {
  margin: 0;
  font-size: 32px;
  line-height: 116%;
  letter-spacing: 0%;
  font-weight: 700;
  color: #1a1a1a;
}

.reviews .avg {
  margin: 10px 0 0;
  font-weight: 500;
  font-size: 18px;
  line-height: 150%;
  color: #1a1a1a;
}

.reviews .avg .star {
  color: #f37110;
  margin-right: 2px;
  font-size: 20px;
}

.reviews .subtitle {
  margin: 10px auto 0;
  color: rgba(15, 23, 42, 0.62);
  font-size: 16px;
  line-height: 1.55;
}

.reviews .carouselContainer {
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

.reviews .carousel {
  display: flex;
  gap: 20px;
  transition: transform 0.4s ease;
  will-change: transform;
}

.reviews .reviewCard {
  background: #f3f3f3;
  text-align: left;
  border-radius: 16px;
  flex: 0 0 calc((100% - 60px) / 4);
  padding: 22px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 230px;
}

.reviews .quote {
  width: 22px;
  height: 22px;
  margin-bottom: 12px;
  color: rgba(15, 23, 42, 0.45);
}

.reviews .text {
  margin: 0;
  font-size: 14px;
  color: rgba(15, 23, 42, 0.86);
  line-height: 1.55;
  flex: 1 1 auto;
}

.reviews .reviewFooter {
  margin-top: 18px;
}

.reviews .name {
  font-weight: 700;
  color: rgba(15, 23, 42, 0.9);
}

.reviews .metaLine {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
  font-size: 13px;
}

.reviews .place {
  color: rgba(15, 23, 42, 0.5);
  font-weight: 500;
}

.reviews .starsLine {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
  color: rgba(15, 23, 42, 0.62);
  font-size: 13px;
}

.reviews .starsRow {
  letter-spacing: 1px;
  color: #e07b2c;
  font-size: 14px;
}

.reviews .score {
  font-weight: 900;
  color: rgba(15, 23, 42, 0.78);
}

.reviews .controls {
  text-align: center;
  margin-top: 18px;
  display: flex;
  justify-content: center;
  gap: 14px;
  align-items: center;
}

.reviews .leaveReviewText {
  margin: 22px auto 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 22px;
  border-radius: 12px;
  color: #1a1a1a;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.16;
  letter-spacing: 0%;
  text-align: center;
  text-transform: uppercase;
}

.reviews .navBtn {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.18);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  color: rgba(15, 23, 42, 0.72);
}

.reviews .navBtn svg {
  width: 18px;
  height: 18px;
}

.reviews .dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  align-items: center;
}

.reviews .dot {
  width: 10px;
  height: 10px;
  background: rgba(15, 23, 42, 0.22);
  border-radius: 50%;
  display: inline-block;
  transition: background 0.3s ease;
  cursor: pointer;
}

.reviews .dot.active {
  background: #e07b2c;
}

@media (max-width: 768px) {
  .reviews .carouselContainer {
    width: 100%;
  }

  .reviews .reviewsHeader {
    padding: 0 20px;
  }

  .reviews .reviewCard {
    flex: 0 0 calc(100% - 85px);
  }
}

@media (max-width: 390px) {
  .reviews .reviewsHeader {
    padding: 0 16px;
  }

  .reviews .reviewsHeader h2 {
    font-size: 26px;
  }

  .reviews .reviewsHeader p {
    font-size: 16px;
  }

  .reviews .reviewCard {
    padding: 18px;
  }

  .reviews .leaveReviewText {
    padding: 12px 16px;
    font-size: 14px;
  }
}

@media (max-width: 320px) {
  .reviews .reviewsHeader h2 {
    font-size: 24px;
  }

  .reviews .reviewCard {
    padding: 16px;
  }
}

@media (min-width: 769px) and (max-width: 1100px) {
  .reviews .reviewCard {
    flex: 0 0 calc((100% - 20px) / 2);
  }
}

/* How it works */
.howWorks {
  text-align: center;
  background-color: #fff1e6;
  padding: 50px 0;
}

.howWorks .howWorksContent {
  max-width: 70rem;
  padding: 50px 0;
}

.howWorksTitle {
  margin: 0 0 18px;
  font-size: 32px;
  letter-spacing: 0%;
  line-height: 116%;
  font-weight: 700;
  color: #1a1a1a;
}

.howWorksRow {
  display: flex;
  gap: 18px;
  max-width: 70rem;
  margin: 0 auto;
  justify-content: center;
  align-items: flex-start;
}

.howWorks .step {
  width: min(365px, 100%);
  text-align: center;
}

.howWorks .stepImg {
  width: auto;
  max-height: 230px;
  display: block;
  margin: 0 auto 12px;
}

.howWorks .stepTitle {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 135%;
  color: #1a1a1a;
}

.howWorks .stepDesc {
  margin: 8px auto 0;
  font-weight: 400;
  font-size: 14px;
  line-height: 145%;
  color: #1a1a1a;
}

.howWorks .arrow {
  width: 30px;
  height: auto;
  opacity: 0.65;
  margin-top: 146px;
}

@media (max-width: 1264px) {
  .howWorks {
    padding: 0 20px;
  }

  .howWorksRow {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .howWorks .arrow {
    width: 22px;
    opacity: 0.55;
    margin: 8px 0 2px;
  }

  .howWorks .step {
    width: min(520px, 100%);
  }

  .howWorks .stepTitle {
    font-size: 20px;
  }

  .howWorks .stepDesc {
    font-size: 14px;
    max-width: 100ch;
  }

  .howWorks .howWorksContent {
    width: 100%;
  }
}

@media (max-width: 390px) {
  .howWorksTitle {
    font-size: 26px;
    margin-bottom: 14px;
  }

  .howWorks .stepImg {
    max-height: 190px;
  }

  .howWorks .stepTitle {
    font-size: 17px;
  }

  .howWorks .stepDesc {
    font-size: 13px;
  }
}

@media (max-width: 320px) {
  .howWorksTitle {
    font-size: 24px;
  }

  .howWorks .stepImg {
    max-height: 160px;
  }
}

/* Contractor CTA */
.ctaPanel {
  padding: 80px 0 80px;
}

.ctaPanel .panel {
  margin: 0 auto;
  background: #fff2e0;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  display: grid;
  grid-template-columns: 1.45fr 0.95fr;
  gap: 32px;
  max-width: 1080px;
  height: 318px;
  overflow: visible;
  padding: 22px 22px 20px;
  justify-self: center;
  align-items: center;
}

.ctaPanel .left {
  min-width: 0;
}

.ctaPanel .title {
  margin: 0;
  font-size: 28px;
  line-height: 115%;
  font-weight: 700;
  color: #1a1a1a;
}

.ctaPanel .subtitle {
  margin: 10px 0 14px;
  color: #1a1a1a;
  line-height: 140%;
  font-size: 18px;
  white-space: pre-wrap;
}

.ctaPanel .form {
  background: #fff;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid #f2dec3;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
}

.ctaPanel .selectWrap {
  display: grid;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #fff;
  box-shadow: 0 18px 40px rgba(2, 6, 23, 0.06);
  position: relative;
}

.ctaPanel .label {
  font-size: 13px;
  color: #9a9b9e;
  line-height: 115%;
  font-weight: 500;
}

.ctaPanel .selectWrap::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 36%;
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(15, 23, 42, 0.35);
  border-bottom: 2px solid rgba(15, 23, 42, 0.35);
  transform: translateY(2px) rotate(45deg);
  pointer-events: none;
}

.ctaPanel .btn {
  height: 56px;
  border-radius: 8px;
  border: 0;
  background: #f37110;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0 24px;
  white-space: nowrap;
  box-shadow: none;
  cursor: pointer;
}

.ctaPanel .btn:hover {
  filter: brightness(0.98);
}

.ctaPanel .right {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  height: 100%;
  min-height: 150px;
  overflow: visible;
}

.ctaPanel .img {
  width: min(420px, 100%);
  height: auto;
  display: block;
  object-fit: contain;
  object-position: right bottom;
  margin-top: -50px;
  margin-bottom: -20px;
}

@media (min-width: 744px) and (max-width: 1160px) {
  .ctaPanel {
    padding: 64px 0;
  }

  .ctaPanel .panel {
    grid-template-columns: 1.3fr 1fr;
    gap: 24px;
    height: 300px;
  }

  .ctaPanel .img {
    width: min(380px, 100%);
  }
}

@media (max-width: 980px) {
  .ctaPanel .panel {
    grid-template-columns: 1fr;
    padding: 18px;
    height: auto;
  }

  .ctaPanel .img {
    width: min(520px, 100%);
    margin-top: 0;
  }

  .ctaPanel .form {
    grid-template-columns: 1fr;
  }

  .ctaPanel .btn {
    width: 100%;
  }
}

@media (max-width: 744px) {
  .ctaPanel {
    padding: 56px 0;
  }

  .ctaPanel .title {
    font-size: 26px;
    text-align: center;
  }

  .ctaPanel .subtitle {
    font-size: 16px;
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 390px) {
  .ctaPanel {
    padding: 44px 0;
  }

  .ctaPanel .panel {
    padding: 16px;
    border-radius: 12px;
  }

  .ctaPanel .title {
    font-size: 24px;
    text-align: center;
  }

  .ctaPanel .subtitle {
    font-size: 16px;
    width: 100%;
    text-align: center;
  }

  .ctaPanel .form {
    padding: 8px;
    border-radius: 12px;
  }
}

@media (max-width: 320px) {
  .ctaPanel .title {
    font-size: 22px;
    text-align: center;
  }

  .ctaPanel .subtitle {
    font-size: 15px;
    width: 100%;
    text-align: center;
  }
}

/* Footer */
.footer {
  background: #f8f8f8;
  border-top: 1px solid rgba(15, 23, 42, 0.1);
  color: rgba(15, 23, 42, 0.86);
  padding: 68px 0;
  font-family:
    "Mona Sans",
    ui-sans-serif,
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    "Noto Sans",
    "Liberation Sans",
    sans-serif;
}

.footer * {
  font-family: inherit;
}

.footer .grid {
  display: grid;
  grid-template-columns: 1.15fr 1.45fr 1fr 1.15fr;
  gap: 80px;
  align-items: start;
}

.footer .brandCol {
  min-width: 240px;
}

.footer .logo {
  display: block;
  width: min(155px, 100%);
  height: auto;
  justify-self: left;
}

.footer .meta {
  margin-top: 18px;
  display: grid;
  gap: 10px;
  line-height: 1.55;
}

.footer .muted {
  color: #252628;
  font-size: 14px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0%;
}

.footer .address {
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0%;
  color: #252628;
}

.footer .title {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 18px;
  color: #1a1a1a;
  letter-spacing: 0%;
  line-height: 20px;
}

.footer .twoCols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
}

.footer .list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  color: #5b5b5b;
  align-content: start;
  gap: 12px;
}

.footer .list a {
  text-decoration: none;
  color: #5b5b5b;
  font-size: 13px;
  font-weight: 400;
}

.footer .list a:hover {
  color: #1a1a1a;
}

.footer .contactsGrid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 26px;
  align-items: start;
}

.footer .contacts {
  display: grid;
  gap: 12px;
  margin-bottom: 22px;
}

.footer .contactLink {
  color: #5b5b5b;
  text-decoration: none;
  font-size: 13px;
  font-weight: 400;
}

.footer .contactLink:hover {
  color: #1a1a1a;
}

.footer .contactsRight {
  display: grid;
  gap: 14px;
  min-width: 130px;
  justify-items: end;
  justify-content: start;
}

.footer .actionLink {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  line-height: 20px;
  text-decoration: none;
  color: #5b5b5b;
  font-weight: 400;
  font-size: 13px;
  width: 100%;
}

.footer .actionLink:hover {
  color: #1a1a1a;
}

.footer .arrow {
  width: 16px;
  height: 16px;
  opacity: 0.9;
}

.footer .social {
  display: flex;
  gap: 15px;
  align-items: center;
  color: #8f8f8f;
  flex-direction: row;
}

.footer .socialLink {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  color: #8f8f8f;
  text-decoration: none;
}

.footer .socialIcon {
  width: 24px;
  height: 24px;
  display: block;
}

.footer .tabletBottom {
  display: none;
}

.footer .mobileAcc {
  display: none;
}

.footer .mobileBrand {
  display: grid;
  justify-items: center;
  padding: 6px 0 10px;
}

.footer .acc {
  border-top: 1px solid rgba(15, 23, 42, 0.12);
  padding: 14px 0;
}

.footer .acc:first-of-type {
  border-top: 0;
}

.footer .acc:last-of-type {
  border-bottom: 1px solid rgba(15, 23, 42, 0.12);
}

.footer .accHead {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}

.footer .accHead::-webkit-details-marker {
  display: none;
}

.footer .accTitle {
  font-weight: 600;
  font-size: 16px;
  line-height: 1.1;
  color: #1a1a1a;
}

.footer .accIcon {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  transition: transform 260ms ease;
  flex: 0 0 auto;
}

.footer details.acc[open] .accIcon {
  transform: rotate(180deg);
}

.footer .accIcon img {
  width: 18px;
  height: 18px;
  display: block;
  opacity: 0.8;
}

.footer .accBody {
  padding-top: 14px;
  display: grid;
  gap: 14px;
}

.footer .actions {
  display: grid;
  gap: 12px;
}

.footer .mobileBottom {
  padding-top: 22px;
  display: grid;
  justify-items: center;
}

.footer .mobileBottom .meta {
  text-align: center;
  margin-top: 14px;
}

@media (min-width: 980px) and (max-width: 1500px) {
  .footer .grid {
    gap: 40px;
  }
  .footer .twoCols{
    gap: 30px;
  }

  .footer .brandCol {
    min-width: 0;
    display: grid;
    justify-items: center;
  }

  .footer .contactsRight{
    min-width: 130px;
  }
  
}

@media (min-width: 744px) and (max-width: 1275px) {
  .footer .grid {
    grid-template-columns: 1fr 1fr;
    gap: 26px 54px;
    grid-template-areas:
      "brand brand"
      "contacts contacts"
      "services legal";
  }
  .footer .logo {
    justify-self: center;
  }

  .footer .brandCol {
    grid-area: brand;
    min-width: 0;
    display: grid;
    justify-items: center;
  }

  .footer .brandCol .meta {
    display: none;
  }

  .footer .contactsCol {
    grid-area: contacts;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.12);
  }

  .footer .servicesCol {
    grid-area: services;
    padding-top: 6px;
  }

  .footer .legalCol {
    grid-area: legal;
    padding-top: 6px;
  }

  .footer .twoCols {
    gap: 42px;
  }

  .footer .contactsGrid {
    grid-template-columns: 1fr 1fr;
    gap: 50px;
  }

  .footer .contactsLeft .social {
    display: none;
  }

  .footer .contactsRight {
    min-width: 0;
  }

  .footer .tabletBottom {
    display: grid;
    justify-items: center;
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid rgba(15, 23, 42, 0.12);
  }

  .footer .tabletBottom .meta {
    text-align: center;
    margin-top: 18px;
  }
}

@media (max-width: 744px) {
  .footer {
    padding: 52px 0;
  }

  .footer .grid {
    display: none;
  }
  .footer .logo {
    justify-self: center;
  }

  .footer .mobileAcc {
    display: block;
  }
}

@media (max-width: 390px) {
  .footer {
    padding: 40px 0;
  }

  .footer .title {
    margin-bottom: 12px;
    font-size: 15px;
  }
  .footer .logo {
    justify-self: center;
  }


  .footer .list {
    gap: 10px;
  }

  .footer .social {
    gap: 14px;
  }
}

@media (max-width: 320px) {
  .footer {
    padding: 34px 0;
  }
  .footer .logo {
    justify-self: center;
  }

}