

.home-hero {
  position: relative;

  width: 100%;
  min-height: calc(100svh - var(--header-height));

  overflow: hidden;

  background: var(--hero-yellow);

  isolation: isolate;
}

.hero-icon-rain {
  position: absolute;
  z-index: 1;
  inset: 0;

  overflow: hidden;

  pointer-events: none;
}

.hero-icon-rain__sprite {
  position: absolute;

  width: 0;
  height: 0;

  overflow: hidden;
}

.hero-icon-rain__item {
  position: absolute;
  top: -52px;
  left: 0;

  display: grid;
  place-items: center;

  width: var(--size, 24px);
  height: var(--size, 24px);

  opacity: 0;

  transform:
    translate3d(var(--x, 50vw), -64px, 0)
    rotate(var(--r0, 0deg));

  animation:
    heroIconRain var(--duration, 24s) linear infinite;
  animation-delay: var(--delay, -2s);

  will-change: transform, opacity;
}

.hero-icon-rain__item svg {
  width: 100%;
  height: 100%;

  overflow: visible;

  filter: drop-shadow(0 2px 3px rgba(48, 45, 45, 0.18));
}

.hero-icon-rain__item:nth-of-type(1) { --x: 4vw; --drift: 7vw; --size: 19px; --duration: 22s; --delay: -17s; --r0: -18deg; --r1: 148deg; --peak: 0.16; }
.hero-icon-rain__item:nth-of-type(2) { --x: 13vw; --drift: -5vw; --size: 24px; --duration: 27s; --delay: -6s; --r0: 24deg; --r1: -176deg; --peak: 0.18; }
.hero-icon-rain__item:nth-of-type(3) { --x: 22vw; --drift: 9vw; --size: 31px; --duration: 31s; --delay: -23s; --r0: -42deg; --r1: 204deg; --peak: 0.2; }
.hero-icon-rain__item:nth-of-type(4) { --x: 31vw; --drift: -8vw; --size: 17px; --duration: 24s; --delay: -11s; --r0: 12deg; --r1: -142deg; --peak: 0.17; }
.hero-icon-rain__item:nth-of-type(5) { --x: 40vw; --drift: 5vw; --size: 28px; --duration: 34s; --delay: -29s; --r0: -8deg; --r1: 182deg; --peak: 0.2; }
.hero-icon-rain__item:nth-of-type(6) { --x: 49vw; --drift: -10vw; --size: 21px; --duration: 26s; --delay: -14s; --r0: 30deg; --r1: -214deg; --peak: 0.25; }
.hero-icon-rain__item:nth-of-type(7) { --x: 58vw; --drift: 8vw; --size: 26px; --duration: 29s; --delay: -3s; --r0: -28deg; --r1: 168deg; --peak: 0.28; }
.hero-icon-rain__item:nth-of-type(8) { --x: 67vw; --drift: -6vw; --size: 18px; --duration: 23s; --delay: -20s; --r0: 44deg; --r1: -156deg; --peak: 0.26; }
.hero-icon-rain__item:nth-of-type(9) { --x: 76vw; --drift: 11vw; --size: 30px; --duration: 33s; --delay: -8s; --r0: -16deg; --r1: 216deg; --peak: 0.24; }
.hero-icon-rain__item:nth-of-type(10) { --x: 88vw; --drift: -7vw; --size: 22px; --duration: 25s; --delay: -18s; --r0: 18deg; --r1: -188deg; --peak: 0.22; }
.hero-icon-rain__item:nth-of-type(11) { --x: 96vw; --drift: -12vw; --size: 16px; --duration: 30s; --delay: -12s; --r0: -35deg; --r1: 135deg; --peak: 0.19; }
.hero-icon-rain__item:nth-of-type(12) { --x: 8vw; --drift: -4vw; --size: 27px; --duration: 36s; --delay: -31s; --r0: 10deg; --r1: -198deg; --peak: 0.14; }
.hero-icon-rain__item:nth-of-type(13) { --x: 18vw; --drift: 6vw; --size: 20px; --duration: 21s; --delay: -4s; --r0: -12deg; --r1: 158deg; --peak: 0.16; }
.hero-icon-rain__item:nth-of-type(14) { --x: 27vw; --drift: -9vw; --size: 32px; --duration: 32s; --delay: -25s; --r0: 36deg; --r1: -224deg; --peak: 0.18; }
.hero-icon-rain__item:nth-of-type(15) { --x: 36vw; --drift: 10vw; --size: 23px; --duration: 28s; --delay: -9s; --r0: -26deg; --r1: 172deg; --peak: 0.19; }
.hero-icon-rain__item:nth-of-type(16) { --x: 45vw; --drift: -5vw; --size: 18px; --duration: 35s; --delay: -16s; --r0: 40deg; --r1: -150deg; --peak: 0.23; }
.hero-icon-rain__item:nth-of-type(17) { --x: 54vw; --drift: 12vw; --size: 29px; --duration: 24s; --delay: -2s; --r0: -22deg; --r1: 188deg; --peak: 0.27; }
.hero-icon-rain__item:nth-of-type(18) { --x: 63vw; --drift: -11vw; --size: 21px; --duration: 31s; --delay: -27s; --r0: 16deg; --r1: -232deg; --peak: 0.29; }
.hero-icon-rain__item:nth-of-type(19) { --x: 72vw; --drift: 4vw; --size: 25px; --duration: 26s; --delay: -7s; --r0: -48deg; --r1: 126deg; --peak: 0.25; }
.hero-icon-rain__item:nth-of-type(20) { --x: 81vw; --drift: -8vw; --size: 17px; --duration: 38s; --delay: -34s; --r0: 28deg; --r1: -170deg; --peak: 0.23; }
.hero-icon-rain__item:nth-of-type(21) { --x: 91vw; --drift: 5vw; --size: 31px; --duration: 29s; --delay: -15s; --r0: -6deg; --r1: 196deg; --peak: 0.22; }
.hero-icon-rain__item:nth-of-type(22) { --x: 2vw; --drift: 13vw; --size: 24px; --duration: 33s; --delay: -22s; --r0: 34deg; --r1: -186deg; --peak: 0.15; }
.hero-icon-rain__item:nth-of-type(23) { --x: 11vw; --drift: -6vw; --size: 18px; --duration: 25s; --delay: -5s; --r0: -30deg; --r1: 160deg; --peak: 0.14; }
.hero-icon-rain__item:nth-of-type(24) { --x: 25vw; --drift: 8vw; --size: 26px; --duration: 37s; --delay: -30s; --r0: 8deg; --r1: -204deg; --peak: 0.17; }
.hero-icon-rain__item:nth-of-type(25) { --x: 34vw; --drift: -10vw; --size: 20px; --duration: 23s; --delay: -13s; --r0: -20deg; --r1: 154deg; --peak: 0.18; }
.hero-icon-rain__item:nth-of-type(26) { --x: 43vw; --drift: 7vw; --size: 32px; --duration: 30s; --delay: -24s; --r0: 26deg; --r1: -216deg; --peak: 0.22; }
.hero-icon-rain__item:nth-of-type(27) { --x: 52vw; --drift: -4vw; --size: 17px; --duration: 27s; --delay: -19s; --r0: -38deg; --r1: 132deg; --peak: 0.26; }
.hero-icon-rain__item:nth-of-type(28) { --x: 61vw; --drift: 9vw; --size: 23px; --duration: 35s; --delay: -10s; --r0: 14deg; --r1: -178deg; --peak: 0.29; }
.hero-icon-rain__item:nth-of-type(29) { --x: 70vw; --drift: -7vw; --size: 28px; --duration: 22s; --delay: -1s; --r0: -14deg; --r1: 206deg; --peak: 0.27; }
.hero-icon-rain__item:nth-of-type(30) { --x: 79vw; --drift: 10vw; --size: 19px; --duration: 32s; --delay: -26s; --r0: 46deg; --r1: -146deg; --peak: 0.24; }
.hero-icon-rain__item:nth-of-type(31) { --x: 86vw; --drift: -5vw; --size: 30px; --duration: 28s; --delay: -21s; --r0: -24deg; --r1: 174deg; --peak: 0.22; }
.hero-icon-rain__item:nth-of-type(32) { --x: 98vw; --drift: -14vw; --size: 22px; --duration: 39s; --delay: -35s; --r0: 20deg; --r1: -230deg; --peak: 0.2; }
.hero-icon-rain__item:nth-of-type(33) { --x: 6vw; --drift: 9vw; --size: 23px; --duration: 31s; --delay: -28s; --r0: -18deg; --r1: 176deg; }
.hero-icon-rain__item:nth-of-type(34) { --x: 15vw; --drift: -7vw; --size: 18px; --duration: 24s; --delay: -12s; --r0: 32deg; --r1: -154deg; }
.hero-icon-rain__item:nth-of-type(35) { --x: 24vw; --drift: 11vw; --size: 29px; --duration: 36s; --delay: -33s; --r0: -40deg; --r1: 210deg; }
.hero-icon-rain__item:nth-of-type(36) { --x: 33vw; --drift: -6vw; --size: 21px; --duration: 27s; --delay: -18s; --r0: 12deg; --r1: -186deg; }
.hero-icon-rain__item:nth-of-type(37) { --x: 42vw; --drift: 8vw; --size: 26px; --duration: 33s; --delay: -7s; --r0: -24deg; --r1: 166deg; }
.hero-icon-rain__item:nth-of-type(38) { --x: 51vw; --drift: -9vw; --size: 17px; --duration: 22s; --delay: -15s; --r0: 44deg; --r1: -204deg; }
.hero-icon-rain__item:nth-of-type(39) { --x: 60vw; --drift: 6vw; --size: 31px; --duration: 38s; --delay: -36s; --r0: -10deg; --r1: 192deg; }
.hero-icon-rain__item:nth-of-type(40) { --x: 69vw; --drift: -10vw; --size: 20px; --duration: 29s; --delay: -20s; --r0: 28deg; --r1: -170deg; }
.hero-icon-rain__item:nth-of-type(41) { --x: 78vw; --drift: 12vw; --size: 28px; --duration: 35s; --delay: -4s; --r0: -34deg; --r1: 218deg; }
.hero-icon-rain__item:nth-of-type(42) { --x: 87vw; --drift: -5vw; --size: 16px; --duration: 26s; --delay: -23s; --r0: 18deg; --r1: -138deg; }
.hero-icon-rain__item:nth-of-type(43) { --x: 94vw; --drift: -13vw; --size: 25px; --duration: 32s; --delay: -9s; --r0: -46deg; --r1: 182deg; }
.hero-icon-rain__item:nth-of-type(44) { --x: 1vw; --drift: 10vw; --size: 19px; --duration: 28s; --delay: -25s; --r0: 22deg; --r1: -190deg; }
.hero-icon-rain__item:nth-of-type(45) { --x: 19vw; --drift: 5vw; --size: 32px; --duration: 40s; --delay: -39s; --r0: -12deg; --r1: 154deg; }
.hero-icon-rain__item:nth-of-type(46) { --x: 47vw; --drift: -8vw; --size: 22px; --duration: 30s; --delay: -11s; --r0: 36deg; --r1: -226deg; }
.hero-icon-rain__item:nth-of-type(47) { --x: 73vw; --drift: 7vw; --size: 27px; --duration: 34s; --delay: -30s; --r0: -28deg; --r1: 198deg; }
.hero-icon-rain__item:nth-of-type(48) { --x: 99vw; --drift: -15vw; --size: 18px; --duration: 23s; --delay: -16s; --r0: 16deg; --r1: -160deg; }
.hero-icon-rain__item:nth-of-type(49) { --x: 3vw; --drift: 8vw; --size: 26px; --duration: 21s; --delay: -19s; --r0: -22deg; --r1: 180deg; }
.hero-icon-rain__item:nth-of-type(50) { --x: 10vw; --drift: -4vw; --size: 17px; --duration: 29s; --delay: -6s; --r0: 38deg; --r1: -142deg; }
.hero-icon-rain__item:nth-of-type(51) { --x: 17vw; --drift: 9vw; --size: 31px; --duration: 34s; --delay: -31s; --r0: -36deg; --r1: 214deg; }
.hero-icon-rain__item:nth-of-type(52) { --x: 21vw; --drift: -6vw; --size: 20px; --duration: 25s; --delay: -14s; --r0: 14deg; --r1: -172deg; }
.hero-icon-rain__item:nth-of-type(53) { --x: 29vw; --drift: 7vw; --size: 24px; --duration: 30s; --delay: -27s; --r0: -18deg; --r1: 156deg; }
.hero-icon-rain__item:nth-of-type(54) { --x: 38vw; --drift: -11vw; --size: 28px; --duration: 37s; --delay: -34s; --r0: 26deg; --r1: -206deg; }
.hero-icon-rain__item:nth-of-type(55) { --x: 46vw; --drift: 6vw; --size: 16px; --duration: 22s; --delay: -8s; --r0: -44deg; --r1: 132deg; }
.hero-icon-rain__item:nth-of-type(56) { --x: 55vw; --drift: -8vw; --size: 30px; --duration: 33s; --delay: -21s; --r0: 10deg; --r1: -194deg; }
.hero-icon-rain__item:nth-of-type(57) { --x: 64vw; --drift: 10vw; --size: 22px; --duration: 27s; --delay: -4s; --r0: -28deg; --r1: 188deg; }
.hero-icon-rain__item:nth-of-type(58) { --x: 71vw; --drift: -5vw; --size: 19px; --duration: 35s; --delay: -30s; --r0: 42deg; --r1: -150deg; }
.hero-icon-rain__item:nth-of-type(59) { --x: 83vw; --drift: 8vw; --size: 32px; --duration: 24s; --delay: -10s; --r0: -12deg; --r1: 220deg; }
.hero-icon-rain__item:nth-of-type(60) { --x: 92vw; --drift: -12vw; --size: 21px; --duration: 31s; --delay: -24s; --r0: 24deg; --r1: -184deg; }
.hero-icon-rain__item:nth-of-type(61) { --x: 7vw; --drift: 12vw; --size: 18px; --duration: 38s; --delay: -36s; --r0: -32deg; --r1: 168deg; }
.hero-icon-rain__item:nth-of-type(62) { --x: 26vw; --drift: -9vw; --size: 27px; --duration: 26s; --delay: -17s; --r0: 18deg; --r1: -222deg; }
.hero-icon-rain__item:nth-of-type(63) { --x: 35vw; --drift: 5vw; --size: 23px; --duration: 32s; --delay: -2s; --r0: -16deg; --r1: 146deg; }
.hero-icon-rain__item:nth-of-type(64) { --x: 44vw; --drift: -7vw; --size: 29px; --duration: 28s; --delay: -23s; --r0: 34deg; --r1: -198deg; }
.hero-icon-rain__item:nth-of-type(65) { --x: 53vw; --drift: 11vw; --size: 20px; --duration: 36s; --delay: -13s; --r0: -40deg; --r1: 172deg; }
.hero-icon-rain__item:nth-of-type(66) { --x: 62vw; --drift: -6vw; --size: 25px; --duration: 23s; --delay: -20s; --r0: 12deg; --r1: -136deg; }
.hero-icon-rain__item:nth-of-type(67) { --x: 75vw; --drift: 9vw; --size: 17px; --duration: 30s; --delay: -28s; --r0: -24deg; --r1: 202deg; }
.hero-icon-rain__item:nth-of-type(68) { --x: 89vw; --drift: -10vw; --size: 31px; --duration: 39s; --delay: -35s; --r0: 46deg; --r1: -214deg; }
.hero-icon-rain__item:nth-of-type(69) { --x: 97vw; --drift: -16vw; --size: 24px; --duration: 25s; --delay: -12s; --r0: -8deg; --r1: 164deg; }
.hero-icon-rain__item:nth-of-type(70) { --x: 13vw; --drift: 6vw; --size: 19px; --duration: 33s; --delay: -26s; --r0: 30deg; --r1: -174deg; }
.hero-icon-rain__item:nth-of-type(71) { --x: 58vw; --drift: -12vw; --size: 28px; --duration: 29s; --delay: -16s; --r0: -34deg; --r1: 190deg; }
.hero-icon-rain__item:nth-of-type(72) { --x: 80vw; --drift: 7vw; --size: 22px; --duration: 41s; --delay: -40s; --r0: 20deg; --r1: -230deg; }

.hero-icon-rain .hero-icon-rain__item {
  --peak: 0.68;
}

.hero-icon-rain .hero-icon-rain__item:nth-of-type(1),
.hero-icon-rain .hero-icon-rain__item:nth-of-type(2),
.hero-icon-rain .hero-icon-rain__item:nth-of-type(4),
.hero-icon-rain .hero-icon-rain__item:nth-of-type(12),
.hero-icon-rain .hero-icon-rain__item:nth-of-type(13),
.hero-icon-rain .hero-icon-rain__item:nth-of-type(23),
.hero-icon-rain .hero-icon-rain__item:nth-of-type(24),
.hero-icon-rain .hero-icon-rain__item:nth-of-type(25) {
  --peak: 0.5;
}

.hero-icon-rain.is-paused .hero-icon-rain__item,
.home-hero.hero-is-away .hero-icon-rain__item {
  animation-play-state: paused;
}

@keyframes heroIconRain {
  0% {
    opacity: 0;
    transform:
      translate3d(var(--x), -64px, 0)
      rotate(var(--r0));
  }

  10% {
    opacity: var(--peak, 0.22);
  }

  52% {
    opacity: var(--peak, 0.22);
    transform:
      translate3d(
        calc(var(--x) + var(--drift-mid, var(--drift))),
        64svh,
        0
      )
      rotate(var(--rmid, 92deg));
  }

  92% {
    opacity: calc(var(--peak, 0.22) * 0.88);
  }

  100% {
    opacity: 0;
    transform:
      translate3d(
        calc(var(--x) + var(--drift)),
        calc(125svh + 90px),
        0
      )
      rotate(var(--r1));
  }
}

@media (max-width: 900px) {
  .hero-icon-rain__item:nth-of-type(n + 37) {
    display: none;
  }
}

@media (max-width: 640px) {
  .hero-icon-rain__item {
    --size: 20px;
  }

  .hero-icon-rain__item:nth-of-type(3n) {
    --size: 24px;
  }

  .hero-icon-rain__item:nth-of-type(4n) {
    --size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-icon-rain {
    display: none;
  }
}

.hero-swiper {
  position: relative;
  z-index: 5;

  width: 100%;
  min-height: inherit;
}

.hero-swiper .swiper-wrapper {
  min-height: inherit;
}

.hero-slide {
  position: relative;

  display: flex;
  align-items: center;

  min-height: calc(100svh - var(--header-height));

  overflow: hidden;

  transition:
    background-color 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-slide--yellow {
  color: var(--color-graphite);
  background: var(--hero-yellow);
}

.hero-slide--green {
  color: var(--color-white);
  background: var(--hero-green);
}

.hero-slide--turquoise {
  color: var(--color-white);
  background: var(--hero-turquoise);
}

.hero-slide--orange {
  color: var(--color-white);
  background: var(--hero-orange);
}

.hero-slide--light {
  color: var(--color-graphite);
  background: var(--hero-light);
}

.hero-slide::before {
  position: absolute;
  top: 9%;
  right: 8%;

  width: clamp(180px, 21vw, 370px);
  aspect-ratio: 1;

  content: "";

  border: 1px solid currentColor;
  border-radius: 50%;

  opacity: 0.09;

  pointer-events: none;
}

.hero-slide::after {
  position: absolute;
  right: 26%;
  bottom: 9%;

  width: clamp(80px, 9vw, 150px);
  aspect-ratio: 1;

  content: "";

  border: 1px solid currentColor;
  border-radius: 50%;

  opacity: 0.08;

  pointer-events: none;
}

.hero-slide__inner {
  position: relative;
  z-index: 6;

  display: grid;
  grid-template-columns:
    minmax(0, 0.87fr)
    minmax(0, 1.13fr);

  align-items: center;

  gap: clamp(40px, 6vw, 100px);

  width: min(
    var(--container),
    calc(100% - (var(--container-padding) * 2))
  );

  min-height: inherit;

  margin-inline: auto;

  padding-block:
    clamp(76px, 8vh, 116px)
    clamp(106px, 11vh, 150px);
}

.hero-slide__content {
  position: relative;
  z-index: 3;

  max-width: 700px;
}

.hero-slide__title {
  max-width: 720px;

  margin-bottom: 26px;

  font-size:
    clamp(54px, 5.2vw, 84px);

  font-weight: var(--font-weight-regular);
  line-height: 0.98;
  letter-spacing: -0.052em;

  text-wrap: balance;
}

.hero-slide__copy {
  max-width: 590px;

  margin-bottom: 34px;

  font-size:
    clamp(17px, 1.3vw, 20px);

  line-height: 1.65;

  color: inherit;

  opacity: 0.78;
}

.hero-slide__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 12px;
}

.hero-slide--green .button--dark,
.hero-slide--turquoise .button--dark,
.hero-slide--orange .button--dark {
  color: var(--color-graphite);
  background: var(--color-white);
}

.hero-slide--green .button--outline,
.hero-slide--turquoise .button--outline,
.hero-slide--orange .button--outline {
  color: var(--color-white);

  border-color: rgba(255, 255, 255, 0.5);
}

.hero-slide--green .button--outline:hover,
.hero-slide--turquoise .button--outline:hover,
.hero-slide--orange .button--outline:hover {
  color: var(--color-graphite);
  background: var(--color-white);

  border-color: var(--color-white);
}

.hero-mini-ticker {
  display: flex;
  align-items: center;

  width: fit-content;
  max-width: 100%;

  margin-bottom: 28px;

  overflow: hidden;
}

.hero-mini-ticker__track {
  display: flex;
  align-items: center;

  gap: 12px;

  white-space: nowrap;
}

.hero-mini-ticker__item {
  display: inline-flex;
  align-items: center;

  gap: 12px;

  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;

  opacity: 0.74;
}

.hero-mini-ticker__item:not(:last-child)::after {
  width: 5px;
  height: 5px;

  content: "";

  background: currentColor;

  border-radius: 50%;

  opacity: 0.5;
}

.hero-slide__visual {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  min-width: 0;
  min-height: 570px;
}

.hero-slide__art {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: center;

  width: min(100%, 760px);

  margin-inline: auto;
}

.hero-slide__art img,
.hero-slide__art svg {
  width: 100%;
  max-height: 680px;

  object-fit: contain;

  transform-origin: center center;
}

.hero-slide .hero-slide__art {
  opacity: 0;

  transform:
    translate3d(36px, 12px, 0)
    scale(0.97);

  transition:
    opacity 720ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 920ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-slide.swiper-slide-active
.hero-slide__art {
  opacity: 1;

  transform:
    translate3d(0, 0, 0)
    scale(1);
}

.hero-slide .hero-slide__content {
  opacity: 0;

  transform: translate3d(-24px, 0, 0);

  transition:
    opacity 620ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 760ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-slide.swiper-slide-active
.hero-slide__content {
  opacity: 1;

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

.hero-float {
  position: absolute;
  z-index: 4;

  display: flex;
  align-items: center;

  gap: 10px;

  padding: 11px 15px;

  color: var(--color-graphite);
  background: var(--color-white);

  border: 1px solid rgba(48, 45, 45, 0.09);
  border-radius: var(--radius-pill);

  box-shadow: var(--shadow-sm);

  font-size: 12px;
  font-weight: var(--font-weight-semibold);

  white-space: nowrap;
}

.hero-float--top {
  top: 12%;
  left: 3%;
}

.hero-float--bottom {
  right: 2%;
  bottom: 14%;
}

.hero-float__dot {
  width: 9px;
  height: 9px;

  background: var(--color-green);

  border-radius: 50%;
}

.hero-navigation {
  position: absolute;
  z-index: 10;

  top: 50%;
  left: 0;

  display: flex;
  justify-content: space-between;

  width: 100%;

  padding-inline: max(18px, calc((100vw - var(--container)) / 2 - 78px));

  transform: translateY(-50%);

  pointer-events: none;
}

.hero-nav-button {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 54px;
  height: 54px;

  color: currentColor;
  background: rgba(255, 255, 255, 0.16);

  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 50%;

  cursor: pointer;

  pointer-events: auto;

  transition:
    background-color var(--transition-base),
    border-color var(--transition-base),
    transform var(--transition-base);
}

.hero-slide--yellow ~ .hero-navigation,
.hero-slide--light ~ .hero-navigation {
  color: var(--color-graphite);
}

.hero-nav-button:hover {
  background: rgba(255, 255, 255, 0.3);

  transform: scale(1.05);
}

.hero-nav-button::before {
  width: 18px;
  height: 18px;

  content: "";

  background: currentColor;
  mask: var(--hero-arrow-mask) center / contain no-repeat;
  -webkit-mask: var(--hero-arrow-mask) center / contain no-repeat;
}

.hero-nav-button--prev::before {
  --hero-arrow-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8' viewBox='0 0 24 24'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='m11 6-6 6 6 6'/%3E%3C/svg%3E");
}

.hero-nav-button--next::before {
  --hero-arrow-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E");
}

.hero-pagination {
  position: absolute;
  z-index: 12;

  right: 0;
  bottom: 38px;
  left: 0;

  display: flex;
  justify-content: center;
  align-items: center;

  color: currentColor;
}

.hero-pagination
.swiper-pagination-bullet {
  background: currentColor;
}

.hero-services {
  position: absolute;
  z-index: 9;

  right: 0;
  bottom: 0;
  left: 0;

  background: rgba(255, 255, 255, 0.96);

  border-top: 1px solid rgba(48, 45, 45, 0.08);

  backdrop-filter: blur(14px);
}

.hero-services__inner {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));

  width: min(
    var(--container),
    calc(100% - (var(--container-padding) * 2))
  );

  margin-inline: auto;
}

.hero-services__item {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 78px;

  padding: 13px 20px;

  font-size: 13px;
  font-weight: var(--font-weight-medium);
  line-height: 1.25;

  color: var(--color-text-soft);

  text-align: center;

  border-right: 1px solid var(--color-border);

  cursor: pointer;

  transition:
    color var(--transition-base),
    background-color var(--transition-base);
}

.hero-services__item:first-child {
  border-left: 1px solid var(--color-border);
}

.hero-services__item::before {
  position: absolute;
  right: 24%;
  bottom: 0;
  left: 24%;

  height: 3px;

  content: "";

  background: var(--color-turquoise);

  transform: scaleX(0);

  transition:
    transform var(--transition-base);
}

.hero-services__item:hover,
.hero-services__item.is-active {
  color: var(--color-graphite);
  background: var(--color-surface-alt);
}

.hero-services__item.is-active::before {
  transform: scaleX(1);
}

.home-about {
  overflow: hidden;

  padding-block: calc(var(--section-space-xl) / 2);

  background: var(--color-white);
}

.home-about__grid {
  display: grid;
  grid-template-columns:
    minmax(0, 1.04fr)
    minmax(0, 0.96fr);

  align-items: center;

  gap: clamp(64px, 8vw, 128px);
}

.home-about__visual {
  position: relative;

  min-height: 650px;
}

.home-about__media {
  position: absolute;
  inset: 0 10% 0 0;

  overflow: hidden;

  border-radius: var(--radius-2xl);

  background: var(--color-surface-alt);
}

.home-about__media img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.home-about__panel {
  position: absolute;
  right: 0;
  bottom: 48px;
  z-index: 2;

  width: min(340px, 58%);

  padding: 30px;

  color: var(--color-graphite);
  background: var(--color-yellow);

  border-radius: var(--radius-xl);

  box-shadow: var(--shadow-md);
}

.home-about__panel-title {
  margin-bottom: 12px;

  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.home-about__panel-text {
  margin: 0;

  font-size: 14px;
  line-height: 1.65;

  color: rgba(48, 45, 45, 0.74);
}

.home-about__content {
  max-width: 660px;
}

.home-about__title {
  margin-bottom: 26px;
}

.home-about__text {
  max-width: 610px;

  font-size: var(--font-lg);
}

.home-about__points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 14px 28px;

  margin-top: 32px;
}

.home-about__point {
  display: flex;
  align-items: center;

  gap: 12px;

  min-width: 0;

  font-size: 14px;
  font-weight: var(--font-weight-medium);

  color: var(--color-graphite);
}

.home-about__point::before {
  flex: 0 0 auto;

  width: 8px;
  height: 8px;

  content: "";

  background: var(--color-turquoise);

  border-radius: 50%;
}

.home-about__actions {
  display: flex;
  flex-wrap: wrap;

  gap: 12px;

  margin-top: 36px;
}

.audit-strip {
  padding-block: 30px;

  background: var(--color-surface-alt);
}

.audit-strip__inner {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 40px;

  padding: 38px 44px;

  color: var(--color-white);
  background: var(--color-turquoise);

  border-radius: var(--radius-xl);
}

.audit-strip__content {
  display: flex;
  align-items: center;

  gap: 26px;
}

.audit-strip__icon {
  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  width: 70px;
  height: 70px;

  color: var(--color-graphite);
  background: var(--color-white);

  border-radius: 50%;
}

.audit-strip__icon svg,
.audit-strip__icon img {
  width: 34px;
  height: 34px;
}

.audit-strip__title {
  margin-bottom: 8px;

  font-size: clamp(25px, 2.3vw, 36px);
  line-height: 1.08;
}

.audit-strip__text {
  max-width: 720px;

  margin: 0;

  color: rgba(255, 255, 255, 0.76);
}

.home-parallax {
  position: relative;

  min-height: 720px;

  overflow: hidden;

  display: flex;
  align-items: center;

  color: var(--color-white);
  background: var(--color-graphite);
}

.home-parallax__media {
  position: absolute;
  inset: 0;

  overflow: hidden;
}

.home-parallax__image {
  position: absolute;
  inset: -9% 0;

  width: 100%;
  height: 118%;

  object-fit: cover;

  opacity: 0.46;

  will-change: transform;
}

.home-parallax__overlay {
  position: absolute;
  inset: 0;

  background: rgba(29, 27, 27, 0.49);
}

.home-parallax__inner {
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns:
    minmax(0, 0.9fr)
    minmax(0, 1.1fr);

  align-items: end;

  gap: 80px;

  padding-block: 110px;
}

.home-parallax__title {
  max-width: 680px;

  margin-bottom: 0;

  font-size: clamp(46px, 4.6vw, 72px);
}

.home-parallax__content {
  max-width: 620px;
}

.home-parallax__text {
  font-size: var(--font-lg);

  color: rgba(255, 255, 255, 0.72);
}

.home-parallax__actions {
  margin-top: 30px;
}

.home-process {
  background: var(--color-white);
}

.home-process__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 60px;

  margin-bottom: 64px;
}

.home-process__head .section-heading {
  margin: 0;
}

.home-process__intro {
  max-width: 480px;

  margin: 0;

  color: var(--color-text-soft);
}

.home-process__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 20px;
}

.process-card {
  position: relative;

  min-height: 330px;

  padding: 32px;

  overflow: hidden;

  background: var(--color-surface-alt);

  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);

  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    background-color var(--transition-base);
}

.process-card:nth-child(2) {
  background: #fff8eb;
}

.process-card:nth-child(3) {
  background: #eef9f4;
}

.process-card:nth-child(4) {
  background: #edf8f8;
}

.process-card:hover {
  transform: translateY(-7px);

  box-shadow: var(--shadow-md);
}

.process-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 72px;
  height: 72px;

  margin-bottom: 48px;

  color: var(--color-graphite);
  background: var(--color-white);

  border-radius: 50%;

  box-shadow: var(--shadow-xs);
}

.process-card__icon svg,
.process-card__icon img {
  width: 35px;
  height: 35px;
}

.process-card__title {
  margin-bottom: 14px;

  font-size: 25px;
}

.process-card__text {
  margin: 0;

  font-size: 14px;
  line-height: 1.7;
}

.home-marquee {
  padding-block: 26px;

  overflow: hidden;

  color: var(--color-graphite);
  background: var(--color-yellow);

  border-block:
    1px solid rgba(48, 45, 45, 0.12);
}

.home-marquee .marquee__item {
  display: flex;
  align-items: center;

  gap: 32px;

  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 48px);
  line-height: 1;
  letter-spacing: -0.04em;
}

.home-marquee .marquee__item::after {
  flex: 0 0 auto;

  width: 30px;
  height: 30px;

  content: "";

  background: url("../illustrations/v6/ads-ball.svg") center / contain no-repeat;

  border-radius: 0;

  opacity: 1;
}

.home-marquee--google-icons .marquee__item::after {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.home-marquee--google-icons .marquee__item:nth-child(1)::after {
  background-image: url("../illustrations/v6/google-search.svg");
}

.home-marquee--google-icons .marquee__item:nth-child(2)::after {
  background-image: url("../illustrations/v6/google-ads.svg");
}

.home-marquee--google-icons .marquee__item:nth-child(3)::after {
  background-image: url("../illustrations/v6/google-analytics.svg");
}

.home-marquee--google-icons .marquee__item:nth-child(4)::after {
  background-image: url("../illustrations/v6/google-shopping.svg");
}

.home-marquee--google-icons .marquee__item:nth-child(5)::after {
  background-image: url("../illustrations/v6/google-tag.svg");
}

.home-marquee--google-icons .marquee__item:nth-child(6)::after {
  background-image: url("../illustrations/v6/google-business.svg");
}

.home-services {
  overflow: hidden;

  background: var(--color-surface-alt);
}

.home-services__head {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(300px, 520px);

  align-items: end;

  gap: 64px;

  margin-bottom: 62px;
}

.home-services__head .section-heading {
  margin: 0;
}

.home-services__description {
  margin: 0;

  font-size: var(--font-lg);
}

.home-services__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 24px;
}

.service-card {
  position: relative;

  display: grid;
  grid-template-columns:
    minmax(0, 0.92fr)
    minmax(220px, 0.68fr);

  align-items: center;

  padding: 44px;

  overflow: hidden;

  color: var(--color-graphite);
  background: var(--color-white);

  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);

  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.service-card:hover {
  transform: translateY(-7px);

  border-color: rgba(79, 193, 195, 0.28);

  box-shadow: var(--shadow-md);
}

.service-card--yellow {
  background: #fff8e9;
}

.service-card--green {
  background: #eef8f3;
}

.service-card--turquoise {
  background: #edf8f8;
}

.service-card--orange {
  background: #fff0eb;
}

.service-card__content {
  position: relative;
  z-index: 2;

  max-width: 430px;
}

.service-card__title {
  margin-bottom: 18px;

  font-size:
    clamp(28px, 2.3vw, 38px);
}

.service-card__text {
  margin-bottom: 28px;

  font-size: 15px;
  line-height: 1.7;
}

.service-card__media {
  align-self: stretch;

  display: flex;
  align-items: center;
  justify-content: center;

  min-width: 0;
}

.service-card__media img,
.service-card__media svg {
  width: 100%;
  max-height: 280px;

  object-fit: contain;

  transition:
    transform 760ms cubic-bezier(0.16, 1, 0.3, 1);
}

.service-card:hover
.service-card__media img,
.service-card:hover
.service-card__media svg {
  transform:
    translateY(-5px)
    scale(1.025);
}

.home-work {
  overflow: hidden;

  background: var(--color-white);
}

.home-work__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 40px;

  margin-bottom: 54px;
}

.home-work__controls {
  display: flex;

  gap: 10px;
}

.work-swiper {
  overflow: visible;
}

.work-card {
  position: relative;

  height: 100%;

  overflow: hidden;

  background: var(--color-surface-alt);

  border-radius: var(--radius-xl);
}

.work-card__media {
  position: relative;

  aspect-ratio: 1.23;

  overflow: hidden;
}

.work-card__media img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.work-card:hover
.work-card__media img {
  transform: scale(1.04);
}

.work-card__content {
  padding: 28px 30px 32px;
}

.work-card__meta {
  margin-bottom: 11px;

  font-size: 12px;
  font-weight: var(--font-weight-semibold);

  letter-spacing: 0.07em;
  text-transform: uppercase;

  color: var(--color-turquoise-dark);
}

.work-card__title {
  margin-bottom: 11px;

  font-size: 27px;
}

.work-card__text {
  margin: 0;

  font-size: 14px;
}

.slider-button {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 50px;
  height: 50px;

  color: var(--color-graphite);
  background: var(--color-white);

  border: 1px solid var(--color-border);
  border-radius: 50%;

  cursor: pointer;

  transition:
    color var(--transition-base),
    background-color var(--transition-base),
    border-color var(--transition-base),
    transform var(--transition-base);
}

.slider-button:hover {
  color: var(--color-white);
  background: var(--color-graphite);

  border-color: var(--color-graphite);

  transform: translateY(-2px);
}

.slider-button::before {
  width: 18px;
  height: 18px;

  content: "";

  background: currentColor;
  mask: var(--slider-arrow-mask) center / contain no-repeat;
  -webkit-mask: var(--slider-arrow-mask) center / contain no-repeat;
}

.slider-button--prev::before {
  --slider-arrow-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8' viewBox='0 0 24 24'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='m11 6-6 6 6 6'/%3E%3C/svg%3E");
}

.slider-button--next::before {
  --slider-arrow-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E");
}

.home-pricing {
  background: var(--color-surface-alt);
}

.home-pricing__head {
  max-width: 900px;

  margin: 0 auto 60px;

  text-align: center;
}

.home-pricing__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  align-items: stretch;

  gap: 22px;
}

.pricing-card {
  position: relative;

  display: flex;
  flex-direction: column;

  min-height: 520px;

  padding: 42px;

  overflow: hidden;

  color: var(--color-graphite);
  background: var(--color-white);

  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);

  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.pricing-card:hover {
  transform: translateY(-7px);

  box-shadow: var(--shadow-md);
}

.pricing-card--featured {
  color: var(--color-white);
  background: var(--color-graphite);

  border-color: var(--color-graphite);
}

.pricing-card__label {
  width: fit-content;

  margin-bottom: 34px;

  padding: 7px 12px;

  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;

  color: var(--color-graphite);
  background: var(--color-yellow);

  border-radius: var(--radius-pill);
}

.pricing-card__title {
  margin-bottom: 18px;

  font-size: 31px;
}

.pricing-card__price {
  display: flex;
  align-items: baseline;

  gap: 8px;

  margin-bottom: 27px;
}

.pricing-card__amount {
  font-family: var(--font-display);
  font-size:
    clamp(44px, 4vw, 62px);
  line-height: 1;
  letter-spacing: -0.05em;
}

.pricing-card__period {
  font-size: 13px;

  color: var(--color-text-muted);
}

.pricing-card--featured
.pricing-card__period {
  color: rgba(255, 255, 255, 0.52);
}

.pricing-card__text {
  margin-bottom: 28px;

  font-size: 14px;
}

.pricing-card--featured
.pricing-card__text {
  color: rgba(255, 255, 255, 0.62);
}

.pricing-card__features {
  display: grid;

  gap: 13px;

  margin-bottom: 34px;
}

.pricing-card__feature {
  position: relative;

  padding-left: 20px;

  font-size: 14px;

  color: var(--color-text-soft);
}

.pricing-card__feature::before {
  position: absolute;
  top: 0.67em;
  left: 0;

  width: 7px;
  height: 7px;

  content: "";

  background: var(--color-green);

  border-radius: 50%;

  transform: translateY(-50%);
}

.pricing-card--featured
.pricing-card__feature {
  color: rgba(255, 255, 255, 0.69);
}

.pricing-card__action {
  margin-top: auto;
}

.home-team {
  overflow: hidden;

  background: var(--color-white);
}

.home-team__head {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(280px, 500px);

  align-items: end;

  gap: 70px;

  margin-bottom: 54px;
}

.home-team__head .section-heading {
  margin: 0;
}

.home-team__intro {
  margin: 0;

  font-size: var(--font-lg);
}

.team-swiper {
  overflow: visible;
}

.team-card {
  position: relative;

  height: 100%;

  overflow: hidden;

  background: var(--color-surface-alt);

  border-radius: var(--radius-xl);
}

.team-card__media {
  position: relative;

  aspect-ratio: 0.88;

  overflow: hidden;

  background: var(--color-surface-soft);
}

.team-card__media img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.team-card:hover
.team-card__media img {
  transform: scale(1.035);
}

.team-card__content {
  padding: 24px 26px 28px;
}

.team-card__name {
  margin-bottom: 6px;

  font-size: 24px;
}

.team-card__role {
  margin: 0;

  font-size: 13px;

  color: var(--color-turquoise-dark);
}

.home-marquee--dark {
  color: var(--color-white);
  background: var(--color-graphite);

  border-color: rgba(255, 255, 255, 0.1);
}

.home-marquee--dark
.marquee__item::after {
  background: url("../illustrations/v6/ads-ball.svg") center / contain no-repeat;

  opacity: 1;
}

.home-marquee--dark.home-marquee--google-icons .marquee__item::after {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.home-marquee--dark.home-marquee--google-icons .marquee__item:nth-child(1)::after {
  background-image: url("../illustrations/v6/google-search.svg");
}

.home-marquee--dark.home-marquee--google-icons .marquee__item:nth-child(2)::after {
  background-image: url("../illustrations/v6/google-ads.svg");
}

.home-marquee--dark.home-marquee--google-icons .marquee__item:nth-child(3)::after {
  background-image: url("../illustrations/v6/google-analytics.svg");
}

.home-marquee--dark.home-marquee--google-icons .marquee__item:nth-child(4)::after {
  background-image: url("../illustrations/v6/google-shopping.svg");
}

.home-marquee--dark.home-marquee--google-icons .marquee__item:nth-child(5)::after {
  background-image: url("../illustrations/v6/google-tag.svg");
}

.home-marquee--dark.home-marquee--google-icons .marquee__item:nth-child(6)::after {
  background-image: url("../illustrations/v6/google-business.svg");
}

.home-faq {
  background: var(--color-surface-alt);
}

.home-faq__grid {
  display: grid;
  grid-template-columns:
    minmax(320px, 0.76fr)
    minmax(0, 1.24fr);

  align-items: start;

  gap: clamp(60px, 8vw, 130px);
}

.home-faq__intro {
  position: sticky;
  top: calc(var(--header-height) + 44px);
}

.home-faq__text {
  max-width: 480px;

  margin-bottom: 30px;

  font-size: var(--font-lg);
}

.faq-list {
  display: grid;

  border-top: 1px solid var(--color-border);
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
}

.faq-item__button {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    34px;

  align-items: center;

  gap: 24px;

  width: 100%;

  min-height: 92px;

  padding: 22px 0;

  color: var(--color-graphite);
  background: transparent;

  border: 0;

  text-align: left;

  cursor: pointer;
}

.faq-item__question {
  font-family: var(--font-display);
  font-size:
    clamp(20px, 1.8vw, 26px);

  line-height: 1.25;
  letter-spacing: -0.025em;
}

.faq-item__icon {
  position: relative;

  width: 32px;
  height: 32px;

  border: 1px solid var(--color-border-dark);
  border-radius: 50%;

  transition:
    color var(--transition-base),
    background-color var(--transition-base),
    border-color var(--transition-base);
}

.faq-item__icon::before {
  position: absolute;
  top: 50%;
  left: 50%;

  width: 16px;
  height: 16px;

  content: "";

  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;

  transform: translate(-50%, -50%);

  transition:
    mask-image var(--transition-base),
    -webkit-mask-image var(--transition-base);
}

.faq-item.is-open
.faq-item__icon {
  color: var(--color-white);
  background: var(--color-turquoise);

  border-color: var(--color-turquoise);
}

.faq-item.is-open
.faq-item__icon::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}

.faq-item__body {
  display: grid;

  grid-template-rows: 0fr;

  opacity: 0;

  transition:
    grid-template-rows 460ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 300ms ease;
}

.faq-item.is-open
.faq-item__body {
  grid-template-rows: 1fr;

  opacity: 1;
}

.faq-item__body-inner {
  overflow: hidden;
}

.faq-item__answer {
  max-width: 780px;

  padding:
    0
    68px
    28px
    0;

  margin: 0;

  font-size: 15px;
  line-height: 1.75;
}

.home-contact {
  overflow: hidden;

  background: var(--color-white);
}

.home-contact__shell {
  position: relative;

  display: grid;
  grid-template-columns:
    minmax(0, 0.82fr)
    minmax(0, 1.18fr);

  gap: 80px;

  padding: clamp(46px, 5vw, 78px);

  overflow: hidden;

  background: var(--color-surface-alt);

  border-radius: var(--radius-2xl);
}

.home-contact__shell::before {
  position: absolute;
  top: -110px;
  left: -100px;

  width: 280px;
  height: 280px;

  content: "";

  border: 1px solid rgba(48, 45, 45, 0.08);
  border-radius: 50%;

  pointer-events: none;
}

.home-contact__content {
  position: relative;
  z-index: 2;

  max-width: 580px;
}

.home-contact__title {
  margin-bottom: 24px;
}

.home-contact__text {
  max-width: 500px;

  font-size: var(--font-lg);
}

.home-contact__email-block {
  display: grid;

  gap: 7px;

  margin-top: 36px;
}

.home-contact__email-label {
  font-size: 11px;
  font-weight: var(--font-weight-semibold);

  letter-spacing: 0.08em;
  text-transform: uppercase;

  color: var(--color-text-muted);
}

.home-contact__email {
  width: fit-content;

  font-family: var(--font-display);
  font-size: clamp(21px, 2vw, 29px);
  letter-spacing: -0.03em;

  color: var(--color-graphite);

  transition:
    color var(--transition-fast);
}

.home-contact__email:hover {
  color: var(--color-turquoise-dark);
}

.contact-form {
  position: relative;
  z-index: 2;

  display: grid;

  gap: 17px;
}

.contact-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 17px;
}

.contact-form__field {
  display: grid;

  gap: 8px;
}

.contact-form__label {
  font-size: 12px;
  font-weight: var(--font-weight-semibold);

  color: var(--color-graphite);
}

.contact-form__field.is-error input,
.contact-form__field.is-error textarea,
.contact-form__field.is-error select {
  border-color: var(--color-error);
}

.contact-form__error {
  display: none;

  margin: 0;

  font-size: 12px;
  line-height: 1.4;

  color: var(--color-error);
}

.contact-form__field.is-error
.contact-form__error {
  display: block;
}

.contact-form__select-wrap {
  position: relative;
}

.contact-form__select-wrap select {
  padding-right: 46px;

  cursor: pointer;
}

.contact-form__select-wrap::after {
  position: absolute;
  top: 50%;
  right: 20px;

  width: 8px;
  height: 8px;

  content: "";

  border-right: 1.5px solid var(--color-text-soft);
  border-bottom: 1.5px solid var(--color-text-soft);

  transform:
    translateY(-70%)
    rotate(45deg);

  pointer-events: none;
}

.contact-form__privacy {
  display: flex;
  align-items: flex-start;

  gap: 11px;

  margin-top: 2px;
}

.contact-form__privacy input {
  flex: 0 0 auto;

  width: 18px;
  height: 18px;
  min-height: 0;

  margin-top: 3px;

  accent-color: var(--color-turquoise);

  cursor: pointer;
}

.contact-form__privacy-label {
  font-size: 12px;
  line-height: 1.6;

  color: var(--color-text-soft);
}

.contact-form__privacy-label a {
  color: var(--color-graphite);

  text-decoration: underline;
  text-decoration-color: rgba(48, 45, 45, 0.28);
  text-underline-offset: 3px;
}

.contact-form__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 18px;

  margin-top: 5px;
}

.contact-form__honeypot {
  position: absolute !important;
  top: auto !important;
  left: -10000px !important;

  width: 1px !important;
  height: 1px !important;

  overflow: hidden !important;

  opacity: 0 !important;

  pointer-events: none !important;
}

@media (max-width: 1320px) {
  .hero-slide__inner {
    grid-template-columns:
      minmax(0, 0.94fr)
      minmax(0, 1.06fr);

    gap: 52px;
  }

  .hero-slide__visual {
    min-height: 520px;
  }

  .service-card {
    padding: 36px;
  }

  .home-process__grid {
    gap: 16px;
  }

  .process-card {
    padding: 28px;
  }
}

@media (max-width: 1080px) {
  .home-hero,
  .hero-slide {
    min-height: auto;
  }

  .hero-slide__inner {
    grid-template-columns: 1fr 0.92fr;

    min-height: 760px;

    padding-top: 82px;
    padding-bottom: 132px;
  }

  .hero-slide__title {
    font-size:
      clamp(48px, 6vw, 66px);
  }

  .hero-slide__visual {
    min-height: 440px;
  }

  .hero-services__inner {
    overflow-x: auto;

    scrollbar-width: none;
  }

  .hero-services__inner::-webkit-scrollbar {
    display: none;
  }

  .hero-services__item {
    flex: 0 0 auto;

    min-width: 190px;
  }

  .home-about__grid,
  .home-parallax__inner {
    gap: 60px;
  }

  .home-about__visual {
    min-height: 560px;
  }

  .home-process__grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .service-card {
    grid-template-columns: 1fr;

    min-height: 500px;
  }

  .service-card__media {
    min-height: 220px;

    margin-top: 28px;
  }

  .home-pricing__grid {
    gap: 16px;
  }

  .pricing-card {
    padding: 32px;
  }

  .home-contact__shell {
    gap: 54px;
  }
}

@media (max-width: 900px) {
  .hero-slide__inner {
    grid-template-columns: 1fr;

    align-content: center;

    min-height: 900px;

    gap: 34px;

    padding-top: 70px;
    padding-bottom: 128px;
  }

  .hero-slide__content {
    max-width: 760px;

    margin-inline: auto;

    text-align: center;
  }

  .hero-slide__title {
    max-width: 760px;

    margin-inline: auto;
  }

  .hero-slide__copy {
    margin-inline: auto;
  }

  .hero-slide__actions,
  .hero-mini-ticker {
    justify-content: center;

    margin-inline: auto;
  }

  .hero-slide__visual {
    min-height: 390px;
  }

  .hero-slide__art {
    width: min(76vw, 580px);
  }

  .hero-float {
    display: none;
  }

  .hero-navigation {
    display: none;
  }

  .home-about__grid {
    grid-template-columns: 1fr;

    gap: 54px;
  }

  .home-about__content {
    max-width: 760px;

    margin-inline: auto;
  }

  .home-about__visual {
    width: min(100%, 760px);

    margin-inline: auto;
  }

  .audit-strip__inner {
    grid-template-columns: 1fr;

    gap: 26px;
  }

  .home-parallax {
    min-height: 660px;
  }

  .home-parallax__inner {
    grid-template-columns: 1fr;

    align-items: start;

    gap: 34px;

    padding-block: 90px;
  }

  .home-process__head {
    align-items: flex-start;
    flex-direction: column;

    gap: 20px;
  }

  .home-services__head,
  .home-team__head {
    grid-template-columns: 1fr;

    gap: 20px;
  }

  .home-services__grid {
    grid-template-columns: 1fr;
  }

  .service-card {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(230px, 0.6fr);

    min-height: 390px;
  }

  .home-pricing__grid {
    grid-template-columns: 1fr;

    max-width: 680px;

    margin-inline: auto;
  }

  .pricing-card {
    min-height: auto;
  }

  .home-faq__grid {
    grid-template-columns: 1fr;

    gap: 44px;
  }

  .home-faq__intro {
    position: static;
  }

  .home-contact__shell {
    grid-template-columns: 1fr;

    gap: 48px;
  }

  .home-contact__content {
    max-width: 680px;
  }
}

@media (max-width: 640px) {
  .hero-slide__inner {
    min-height:
      calc(100svh - var(--header-height));

    gap: 20px;

    padding-top: 48px;
    padding-bottom: 118px;
  }

  .hero-slide::before {
    top: 8%;
    right: -60px;
  }

  .hero-slide::after {
    display: none;
  }

  .hero-mini-ticker {
    margin-bottom: 20px;

    overflow-x: auto;

    scrollbar-width: none;
  }

  .hero-mini-ticker::-webkit-scrollbar {
    display: none;
  }

  .hero-slide__title {
    margin-bottom: 19px;

    font-size:
      clamp(40px, 12vw, 52px);
  }

  .hero-slide__copy {
    margin-bottom: 25px;

    font-size: 15px;
    line-height: 1.6;
  }

  .hero-slide__actions {
    width: 100%;

    justify-content: center;
  }

  .hero-slide__actions .button {
    width: fit-content;
  }

  .hero-slide__visual {
    min-height: 300px;
  }

  .hero-slide__art {
    width: min(88vw, 430px);
  }

  .hero-services__item {
    min-width: 162px;
    min-height: 70px;

    padding-inline: 14px;

    font-size: 12px;
  }

  .hero-pagination {
    bottom: 83px;
  }

  .home-about__visual {
    min-height: 440px;
  }

  .home-about__media {
    inset: 0 7% 0 0;

    border-radius: var(--radius-xl);
  }

  .home-about__panel {
    right: 0;
    bottom: 26px;

    width: min(280px, 76%);

    padding: 22px;

    border-radius: var(--radius-lg);
  }

  .home-about__panel-title {
    font-size: 22px;
  }

  .home-about__points {
    grid-template-columns: 1fr;

    gap: 12px;
  }

  .home-about__actions {
    justify-content: center;
  }

  .audit-strip {
    padding-block: 18px;
  }

  .audit-strip__inner {
    padding: 28px 22px;

    text-align: center;
  }

  .audit-strip__content {
    flex-direction: column;

    gap: 18px;
  }

  .audit-strip__icon {
    width: 62px;
    height: 62px;
  }

  .audit-strip__inner > .button {
    width: fit-content;

    margin-inline: auto;
  }

  .home-parallax {
    min-height: 0;
  }

  .home-parallax__inner {
    padding-block: 42px;

    text-align: center;
  }

  .home-parallax__title {
    margin-inline: auto;

    text-align: center;
  }

  .home-parallax__content {
    margin-inline: auto;
  }

  .home-parallax__actions {
    display: flex;
    justify-content: center;
  }

  .home-process__head {
    text-align: center;
  }

  .home-process__intro {
    margin-inline: auto;
  }

  .home-process__grid {
    grid-template-columns: 1fr;
  }

  .process-card {
    min-height: 0;

    padding: 24px;
  }

  .process-card__icon {
    margin-bottom: 36px;
  }

  .home-marquee {
    padding-block: 20px;
  }

  .home-marquee .marquee__item {
    gap: 24px;

    font-size: 31px;
  }

  .home-services__head,
  .home-team__head {
    text-align: center;
  }

  .home-services__description,
  .home-team__intro {
    margin-inline: auto;
  }

  .service-card {
    grid-template-columns: 1fr;

    min-height: 0;

    padding: 28px;

    text-align: center;
  }

  .service-card__content {
    margin-inline: auto;
  }

  .service-card__text {
    margin-inline: auto;
  }

  .service-card__content .text-link {
    margin-inline: auto;
  }

  .service-card__media {
    min-height: 190px;

    margin-top: 22px;
  }

  .service-card__media img,
  .service-card__media svg {
    max-height: 220px;
  }

  .home-work__head {
    align-items: center;
    flex-direction: column;

    text-align: center;
  }

  .home-work__controls {
    display: none;
  }

  .work-card__content {
    padding: 23px 23px 27px;
  }

  .home-pricing__head {
    margin-bottom: 42px;
  }

  .pricing-card {
    min-height: 0;

    padding: 26px;

    text-align: center;
  }

  .pricing-card__label,
  .pricing-card__price,
  .pricing-card__action {
    margin-inline: auto;
  }

  .pricing-card:hover {
    transform: none;
  }

  .home-team__head {
    margin-bottom: 40px;
  }

  .faq-item__button {
    min-height: 80px;

    gap: 16px;
  }

  .faq-item__question {
    font-size: 20px;
  }

  .faq-item__answer {
    padding:
      0
      0
      24px;
  }

  .home-contact__shell {
    gap: 40px;

    padding: 30px 22px;

    border-radius: var(--radius-xl);
  }

  .home-contact__content {
    text-align: center;
  }

  .home-contact__text {
    margin-inline: auto;
  }

  .home-contact__email-block {
    justify-items: center;
  }

  .contact-form__row {
    grid-template-columns: 1fr;
  }

  .contact-form__actions {
    justify-content: center;
  }

  .contact-form__actions .button {
    width: fit-content;
  }
}

@media (max-width: 390px) {
  .hero-slide__inner {
    padding-top: 38px;
  }

  .hero-slide__title {
    font-size:
      clamp(37px, 11.7vw, 46px);
  }

  .hero-slide__visual {
    min-height: 260px;
  }

  .home-about__visual {
    min-height: 390px;
  }

  .home-about__panel {
    width: 82%;
  }

  .service-card,
  .pricing-card {
    padding: 24px;
  }

  .process-card {
    padding: 24px;
  }
}

@media (hover: none) {
  .service-card:hover,
  .process-card:hover,
  .pricing-card:hover {
    transform: none;
  }

  .service-card:hover
  .service-card__media img,
  .service-card:hover
  .service-card__media svg,
  .work-card:hover
  .work-card__media img,
  .team-card:hover
  .team-card__media img {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide .hero-slide__art,
  .hero-slide .hero-slide__content {
    opacity: 1;

    transform: none;

    transition: none;
  }

  .hero-slide__art img,
  .hero-slide__art svg,
  .service-card__media img,
  .service-card__media svg,
  .work-card__media img,
  .team-card__media img,
  .home-parallax__image {
    transform: none !important;

    transition: none !important;
  }

  .faq-item__body {
    transition: none;
  }
}
