:root {
  --hero-heading-stack-gap: 0.08em;
}

.hero-heading-arranged {
  display: inline-block;
  max-inline-size: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
  text-wrap: balance;
}

.hero-heading-arranged .hero-heading-line {
  display: block;
  max-inline-size: 100%;
  white-space: normal;
}

.hero-heading-arranged .hero-heading-line + .hero-heading-line {
  margin-top: var(--hero-heading-stack-gap);
}

:is(h2, h3, h4, h5, h6).hero-heading-arranged .hero-heading-line {
  display: inline;
}

:is(h2, h3, h4, h5, h6).hero-heading-arranged .hero-heading-line + .hero-heading-line {
  margin-top: 0;
  margin-left: 0.3ch;
}

@media (max-width: 640px) {
  .hero-heading-arranged {
    line-height: 1.06;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--head);
}

h1 {
  font-size: clamp(40px, 4.8vw, 68px);
}

h1.hero-heading-arranged {
  font-size: clamp(38px, 5.8vw, 72px);
  font-weight: 900;
  letter-spacing: -0.038em;
  line-height: 1.04;
}

h2 {
  font-size: clamp(30px, 3.6vw, 52px);
}

h3 {
  font-size: clamp(24px, 2.4vw, 36px);
}

h4 {
  font-size: clamp(20px, 2vw, 30px);
}