.client-start {
  position: relative;
  overflow: clip;
  padding-bottom: 90px;
  background: #f5f5f5;
  font-family: "Inter", sans-serif;
}

.client-start__inner {
  width: min(calc(100% - 2 * var(--gutter)), var(--content-max));
  margin: 0 auto;
  padding: clamp(104px, 9.03vw, 138px) 0 clamp(112px, 8.95vw, 138px);
}

.client-start__header {
  display: grid;
  grid-template-columns: minmax(0, 650px) minmax(320px, 389px);
  justify-content: space-between;
  gap: clamp(64px, 9vw, 170px);
  align-items: start;
}

.client-start__title {
  margin: 0;
  color: #202529;
  font-size: clamp(42px, 4.167vw, 65px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: normal;
  text-wrap: balance;
}

.client-start__title strong {
  display: inline-block;
  font-weight: 700;
  white-space: nowrap;
}

.client-start__title .reveal-char {
  display: inline-block;
  color: rgba(0, 0, 0, .28);
  will-change: color;
}

.client-start__title .reveal-word {
  display: inline-block;
  white-space: nowrap;
}

.client-start__aside {
  display: flex;
  flex-direction: column;
  gap: 38px;
  padding-top: 25px;
}

.client-start__lead {
  color: #212529;
  font-size: clamp(17px, 1.38vw, 20px);
  line-height: 1.4;
}

.client-start__lead p {
  margin: 0;
}

.client-start__lead p + p {
  margin-top: 28px;
}

.client-start__video {
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 23px;
  padding: 0;
  background: transparent;
  color: #212529;
  cursor: pointer;
  font-size: 16px;
  line-height: 1.2;
}

.client-start__video-roll {
  display: block;
  height: 1.2em;
  overflow: hidden;
}

.client-start__video-roll > span {
  display: block;
  transition: transform .55s var(--ease-out);
}

.client-start__video:hover .client-start__video-roll > span,
.client-start__video:focus-visible .client-start__video-roll > span {
  transform: translateY(-100%);
}

.client-start__video-icon {
  display: grid;
  width: 61px;
  height: 61px;
  overflow: hidden;
  border-radius: 50%;
  background: transparent;
  place-items: center;
  transition: background-color .5s var(--ease-out);
}

.client-start__video-icon img {
  display: block;
  width: 100%;
  height: 100%;
  transition: filter .5s var(--ease-out), transform .5s var(--ease-out);
}

.client-start__video:hover .client-start__video-icon img,
.client-start__video:focus-visible .client-start__video-icon img {
  filter: invert(1);
  transform: scale(1.03);
}

.client-start__video:hover .client-start__video-icon,
.client-start__video:focus-visible .client-start__video-icon {
  background: #202529;
}

.client-start__swipe-hint {
  display: none;
}

.client-start__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 420px));
  justify-content: space-between;
  gap: clamp(24px, 3.47vw, 50px);
  margin-top: clamp(204px, 16.68vw, 242px);
}

.client-start-card {
  position: relative;
  isolation: isolate;
  min-width: 0;
  height: 379px;
  border-radius: 20px;
  background: #fff;
  color: #202529;
}

.client-start-card__fill {
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 0;
  border-radius: 20px;
  background: #202529;
  pointer-events: none;
  transition: height .72s cubic-bezier(.77, 0, .18, 1);
  will-change: height;
}

.client-start-card__content {
  position: relative;
  z-index: 2;
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: flex-end;
  gap: 22px;
  padding: 40px;
}

.client-start-card__icon {
  position: relative;
  display: block;
  width: 35px;
  height: 36px;
  flex: 0 0 auto;
  transform-origin: center;
  transition: transform .6s var(--ease-out);
}

.client-start-card__icon--photo {
  width: 39px;
  height: 42px;
  margin: -4px 0 -2px;
}

.client-start-card__icon--sample {
  width: 35px;
  height: 35px;
}

.client-start-card__icon-state {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity .35s var(--ease-out);
}

.client-start-card__icon-state--dark {
  opacity: 1;
}

.client-start-card__icon-state--white {
  opacity: 0;
}

.client-start-card__copy {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.client-start-card__copy h3,
.client-start-card__copy p {
  margin: 0;
  transition: color .45s var(--ease-out);
}

.client-start-card__copy h3 {
  color: #202529;
  font-size: 37px;
  font-weight: 400;
  line-height: 1.08;
  white-space: nowrap;
}

.client-start-card__copy p {
  color: #76777a;
  font-size: 16px;
  line-height: 1.3;
}

.client-start-card__button {
  display: inline-flex;
  width: max-content;
  min-height: 44px;
  align-items: center;
  gap: 5px;
  padding: 9px 20px 9px 10px;
  border: 1px solid #202529;
  border-radius: 10px;
  background: #fff;
  color: #202529;
  cursor: pointer;
  font-size: 16px;
  line-height: 1.15;
  transition: border-color .45s var(--ease-out), background-color .45s var(--ease-out),
    color .45s var(--ease-out), transform .45s var(--ease-out);
}

.client-start-card__button img {
  display: block;
  width: 24px;
  height: 24px;
  transition: filter .45s var(--ease-out);
}

.client-start-card__object {
  position: absolute;
  z-index: 3;
  display: block;
  max-width: none;
  pointer-events: none;
  object-fit: contain;
  filter: drop-shadow(0 18px 20px rgba(32, 37, 41, .08));
  transition: transform .9s var(--ease-out);
  will-change: transform;
}

.client-start-card__object--sketch {
  top: -153px;
  left: 50%;
  width: 215px;
  height: 257px;
  transform: translateX(-50%);
}

.client-start-card__object--photo {
  top: -158px;
  right: -18px;
  width: 299px;
  height: 256px;
}

.client-start-card__object--sample {
  top: -147px;
  left: 91px;
  width: 245px;
  height: 243px;
}

@media (hover: hover) and (pointer: fine) {
  .client-start-card:hover .client-start-card__fill,
    .client-start-card:focus-within .client-start-card__fill {
      height: 100%;
    }

  .client-start-card:hover .client-start-card__copy h3,
    .client-start-card:hover .client-start-card__copy p,
    .client-start-card:focus-within .client-start-card__copy h3,
    .client-start-card:focus-within .client-start-card__copy p {
      color: #fff;
    }

  .client-start-card:hover .client-start-card__icon,
    .client-start-card:focus-within .client-start-card__icon {
      transform: rotate(-4deg) translateY(-2px);
    }

  .client-start-card:hover .client-start-card__icon-state--dark,
    .client-start-card:focus-within .client-start-card__icon-state--dark {
      opacity: 0;
    }

  .client-start-card:hover .client-start-card__icon-state--white,
    .client-start-card:focus-within .client-start-card__icon-state--white {
      opacity: 1;
    }

  .client-start-card:hover .client-start-card__button,
    .client-start-card:focus-within .client-start-card__button {
      border-color: #fff;
      background: transparent;
      color: #fff;
      transform: translateY(-2px);
    }

  .client-start-card:hover .client-start-card__button img,
    .client-start-card:focus-within .client-start-card__button img {
      filter: brightness(0) invert(1);
    }

  .client-start-card:hover .client-start-card__object--sketch,
    .client-start-card:focus-within .client-start-card__object--sketch {
      transform: translateX(-50%) translateY(-10px) rotate(-2deg) scale(1.025);
    }

  .client-start-card:hover .client-start-card__object--photo,
    .client-start-card:focus-within .client-start-card__object--photo,
    .client-start-card:hover .client-start-card__object--sample,
    .client-start-card:focus-within .client-start-card__object--sample {
      transform: translateY(-10px) rotate(2deg) scale(1.025);
    }
}

@media (max-width: 1099px) {
  .client-start__header {
      grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
      gap: 52px;
    }

  .client-start__cards {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 20px;
    }

  .client-start-card {
      height: 390px;
    }

  .client-start-card__content {
      gap: 18px;
      padding: 28px;
    }

  .client-start-card__copy h3 {
      font-size: clamp(25px, 2.8vw, 31px);
    }

  .client-start-card__copy p,
    .client-start-card__button {
      font-size: 14px;
    }

  .client-start-card__object--sketch {
      top: -132px;
      width: 185px;
      height: 221px;
    }

  .client-start-card__object--photo {
      top: -132px;
      right: -12px;
      width: 242px;
      height: 207px;
    }

  .client-start-card__object--sample {
      top: -107px;
      left: calc(12% + 35px);
      width: 205px;
      height: 203px;
    }
}

@media (max-width: 767px) {
  .client-start__inner {
      width: 100%;
      padding: 82px 0 90px;
    }

  .client-start__header {
      display: flex;
      padding: 0 var(--gutter);
      flex-direction: column;
      gap: 46px;
    }

  .client-start__title {
      font-size: clamp(27px, 7vw, 44px);
      line-height: 1.2;
      letter-spacing: normal;
    }

  .client-start__aside {
      gap: 28px;
      padding-top: 0;
    }

  .client-start__lead {
      max-width: 560px;
      font-size: 17px;
      line-height: 1.45;
    }

  .client-start__lead p + p {
      margin-top: 20px;
    }

  .client-start .client-start__swipe-hint {
      display: flex;
      margin: 30px var(--gutter) 0;
    }

  .client-start.has-scrolled .client-start__swipe-hint {
      opacity: 0;
      transform: translateY(-6px);
    }

  .client-start__cards {
      display: grid;
      grid-auto-columns: min(84vw, 360px);
      grid-auto-flow: column;
      grid-template-columns: none;
      justify-content: start;
      gap: 16px;
      margin-top: 0;
      padding: 118px var(--gutter) 16px;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scroll-padding-inline: var(--gutter);
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
    }

  .client-start__cards::-webkit-scrollbar {
      display: none;
    }

  .client-start-card {
      height: 379px;
      scroll-snap-align: start;
    }

  .client-start-card__content {
      gap: 20px;
      padding: 30px;
    }

  .client-start-card__copy h3 {
      font-size: 30px;
    }

  .client-start-card__copy p {
      font-size: 15px;
      line-height: 1.35;
    }

  .client-start-card__button {
      font-size: 15px;
    }

  .client-start-card__object--sketch {
      top: -118px;
      width: 170px;
      height: 203px;
    }

  .client-start-card__object--photo {
      top: -118px;
      right: -2px;
      width: 220px;
      height: 188px;
    }

  .client-start-card__object--sample {
      top: -93px;
      left: calc(13% + 35px);
      width: 186px;
      height: 185px;
    }
}

@media (max-width: 420px) {
  .client-start__header {
      padding: 0 20px;
    }

  .client-start__cards {
      grid-auto-columns: calc(100vw - 52px);
      padding-right: 20px;
      padding-left: 20px;
      scroll-padding-inline: 20px;
    }

  .client-start-card__content {
      padding: 26px;
    }
}

@media (min-width: 1280px) {
  .client-start__header {
      grid-template-columns: minmax(0, 650px) 462px;
    }
}

@media (max-width: 767px) {
  .client-start {
      padding-bottom: 0;
    }
}