/* Toxigenesis has wider, taller glyphs than the previous display face.
   These overrides recalibrate the existing compositions without changing content. */

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

h1,
h2,
h3 {
  font-weight: 700;
  text-wrap: balance;
}

.hero-title {
  max-width: none;
  font-size: clamp(48px, 6vw, 90px);
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.hero-title .line > span {
  max-width: 100%;
  white-space: nowrap;
}

.section-heading h2,
.contact-copy h2 {
  line-height: var(--display-leading-section);
  letter-spacing: -0.02em;
}

.section-heading h2 {
  font-size: var(--display-section);
}

.section-heading h2.display-section-long,
.contact-copy h2 {
  font-size: var(--display-section-long);
  line-height: var(--display-leading-long);
  letter-spacing: -0.015em;
}

.service h3 {
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.benefit h3 {
  line-height: 1.12;
}

.header-inner,
.hero-inner,
.section-heading,
.section-heading h2,
.contact-layout,
.contact-copy,
.service > * {
  min-width: 0;
}

@media (max-width: 900px) {
  .header-inner {
    gap: 16px;
  }

  .brand {
    flex: 0 1 auto;
    min-width: 0;
  }

  .menu-toggle {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    margin-left: auto;
    padding: 0 0 0 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 7px;
  }

  .menu-toggle span {
    width: 27px;
    height: 1px;
    margin: 0;
    flex: 0 0 1px;
  }

  .mobile-menu {
    inset: 72px 0 0;
  }

  .hero-title {
    font-size: clamp(43px, 10.2vw, 70px);
    line-height: 1.04;
    letter-spacing: -0.025em;
  }

  .hero-title .line > span {
    white-space: normal;
  }

  .section-heading h2,
  .contact-copy h2 {
    line-height: var(--display-leading-section);
    letter-spacing: -0.018em;
    overflow-wrap: normal;
    word-break: normal;
  }

  .hero-bottom {
    gap: 38px;
  }
}

@media (max-width: 580px) {
  .hero {
    min-height: 100svh;
    align-items: flex-start;
    padding-top: 152px;
    padding-bottom: 48px;
  }

  .hero-title {
    margin-bottom: 38px;
    font-size: clamp(39px, 10.4vw, 52px);
    line-height: 1.04;
    letter-spacing: -0.02em;
  }

  .hero-bottom {
    gap: 30px;
  }

  .section-heading h2,
  .contact-copy h2 {
    line-height: var(--display-leading-section);
    letter-spacing: -0.012em;
  }

  .section-heading {
    margin-bottom: 48px;
  }

  .service {
    grid-template-columns: 32px minmax(0, 1fr) 22px;
    gap: 16px;
  }

  .service h3 {
    font-size: clamp(17px, 5vw, 20px);
    overflow-wrap: anywhere;
  }

  .service p {
    grid-column: 2 / 4;
  }

  .contact-copy h2 {
    margin-block: 24px;
  }
}

@media (max-width: 360px) {
  .hero {
    padding-top: 132px;
  }

  .hero-title {
    font-size: clamp(30px, 9.6vw, 35px);
  }

}