:root {
  --heom-green: #2b9b7c;
}
html {
  background: #f2f2f2;
}
@media (max-width: 767px), not all and (max-aspect-ratio: 5 / 4) {
  html,
  body {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  html::-webkit-scrollbar,
  body::-webkit-scrollbar {
    display: none;
  }
}
@font-face {
  font-family: "Space Grotesk";
  src: url(./fonts/space-grotesk.woff2) format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Nunito Sans";
  src: url(./fonts/nunito-sans-400.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
.glitch {
  display: inline-block;
  position: relative;
}
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  pointer-events: none;
}
.glitch::before {
  text-shadow: -2px 0 #ff00c1;
}
.glitch::after {
  text-shadow: 2px 0 #00fff9;
}
.glitch.is-intro {
  animation: glitch-skew 0.9s linear 1;
}
.glitch.is-intro::before {
  animation: glitch-a 0.9s steps(3, jump-none) 1;
}
.glitch.is-intro::after {
  animation: glitch-b 0.75s steps(3, jump-none) 1;
}
@keyframes glitch-a {
  0% {
    opacity: 1;
    clip-path: inset(18% 0 62% 0);
    transform: translateX(-2px);
  }
  25% {
    opacity: 1;
    clip-path: inset(62% 0 10% 0);
    transform: translateX(2px);
  }
  50% {
    opacity: 1;
    clip-path: inset(40% 0 41% 0);
    transform: translateX(-3px);
  }
  75% {
    opacity: 1;
    clip-path: inset(8% 0 78% 0);
    transform: translateX(1px);
  }
  100% {
    opacity: 1;
    clip-path: inset(75% 0 8% 0);
    transform: translateX(2px);
  }
}
@keyframes glitch-b {
  0% {
    opacity: 1;
    clip-path: inset(70% 0 12% 0);
    transform: translateX(2px);
  }
  25% {
    opacity: 1;
    clip-path: inset(12% 0 68% 0);
    transform: translateX(-2px);
  }
  50% {
    opacity: 1;
    clip-path: inset(48% 0 33% 0);
    transform: translateX(3px);
  }
  75% {
    opacity: 1;
    clip-path: inset(30% 0 55% 0);
    transform: translateX(-1px);
  }
  100% {
    opacity: 1;
    clip-path: inset(6% 0 80% 0);
    transform: translateX(-2px);
  }
}
@keyframes glitch-skew {
  0%, 100% {
    transform: skewX(0deg);
  }
  20% {
    transform: skewX(4deg);
  }
  40% {
    transform: skewX(-3deg);
  }
  60% {
    transform: skewX(2deg);
  }
  80% {
    transform: skewX(-2deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .glitch,
  .glitch::before,
  .glitch::after {
    animation: none;
  }
}
.btn-consultation {
  appearance: none;
  -webkit-appearance: none;
  border: 3px solid #000;
  cursor: pointer;
  display: inline-block;
  padding: 1.1em 2.6em;
  border-radius: 999px;
  background: none;
  color: #000;
  text-decoration: none;
  font-family:
    "Space Grotesk",
    "Avenir Next",
    Avenir,
    sans-serif;
  font-weight: 400;
  font-size: 0.9375rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
}
.btn-consultation.is-filled {
  background: #000;
  color: #fff;
}
.btn-consultation:focus-visible {
  outline: 2px solid #000;
  outline-offset: 3px;
}
.btn-consultation--dark {
  border-color: #fff;
  color: #fff;
}
.btn-consultation--dark:focus-visible {
  outline-color: #fff;
}
.btn-consultation.is-soon {
  border-color: transparent;
  color: #8c8c8c;
  cursor: default;
}