:root {
  /* font families (match @font-face) */
  --font-spikes: "HelveestiSpikes", system-ui, sans-serif;
  --font-normal: "Helveesti", system-ui, sans-serif;

  /* font sizes – desktop */
  --fs-h1: 11vw;
  --fs-h-arrow: 6vw;
  --fs-h2: 36px;
  --fs-h2-name: 36px;
  --fs-p1: 18px;

  /* font sizes – mobile */
  --fs-h1-mobile: 60px;
  --fs-h-arrow-mobile: 40px;
  --fs-h2-mobile: 24px;
  --fs-h2-name-mobile: 24px;
  --fs-p1-mobile: 15px;

  /* line-heights */
  --lh-h1: 6vw;
  --lh-h1-mobile: 40px;

  --ls-h-arrow: 48px;
  --ls-h-arrow-mobile: 36px;

  --lh-h2: 48px;
  --lh-h2-mobile: 36px;

  --lh-p1: 28px;
  --lh-p1-mobile: 23px;

  /* letter-spacing */
  --ls-h1: 0.05em;
  --ls-h1-mobile: 2.1px;

  --ls-h-arrow: 1.2px;
  --ls-h-arrow-mobile: 0.8px;

  --ls-h2: 1.08px;
  --ls-h2-mobile: 0.72px;

  --ls-p1: 0.6px;
  --ls-p1-mobile: 0.4px;
}

.type-h1 {
  font-family: var(--font-spikes);
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  color: var(--color-grey-light);
}

@media (max-width: 768px) {
  .type-h1 {
    font-size: var(--fs-h1-mobile);
    line-height: var(--lh-h1-mobile);
    letter-spacing: var(--ls-h1-mobile);
  }
  .type-h1.is-contact {
    line-height: 60px;
  }
}

.type-h-arrow {
  font-family: var(--font-spikes);
  font-size: var(--fs-h-arrow);
  font-weight: 800;
  line-height: var(--lh-h-arrow);
  letter-spacing: var(--ls-h-arrow);
  color: var(--color-grey-dark);
}

@media (max-width: 768px) {
  .type-h-arrow {
    font-size: var(--fs-h-arrow-mobile);
    line-height: var(--lh-h-arrow-mobile);
    letter-spacing: var(--ls-h-arrow-mobile);
  }
}

.type-h2 {
  font-family: var(--font-spikes);
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: var(--color-grey-dark);
}

@media (max-width: 768px) {
  .type-h2 {
    font-size: var(--fs-h2-mobile);
    line-height: var(--lh-h2-mobile);
    letter-spacing: var(--ls-h2-mobile);
  }
}

.type-h2-name {
  font-family: var(--font-normal);
  font-size: var(--fs-h2-name);
  font-weight: 400;
  line-height: normal;
  letter-spacing: var(--ls-h2);
  color: var(--color-black);
}

@media (max-width: 768px) {
  .type-h2-name {
    font-size: var(--fs-h2-name-mobile);
    line-height: var(--lh-h2-mobile);
    letter-spacing: var(--ls-h2-mobile);
  }
}

.type-p1 {
  font-family: var(--font-normal);
  font-size: var(--fs-p1);
  font-weight: 400;
  line-height: var(--lh-p1);
  letter-spacing: var(--ls-p1);
  color: var(--color-black);
}

@media (max-width: 768px) {
  .type-p1 {
    font-size: var(--fs-p1-mobile);
    line-height: var(--lh-p1-mobile);
    letter-spacing: var(--ls-p1-mobile);
  }
}

.type-p2 {
  font-family: var(--font-normal);
  font-size: var(--fs-p1);
  font-weight: 500;
  line-height: var(--lh-p1);
  letter-spacing: var(--ls-p1);
  color: var(--color-grey-dark);
}

@media (max-width: 768px) {
  .type-p2 {
    font-size: var(--fs-p1-mobile);
    line-height: var(--lh-p1-mobile);
    letter-spacing: var(--ls-p1-mobile);
  }
}

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