body {
  margin: 0;
  background: #fafcfb;
}

main {
  width: min(100%, 1440px);
  margin-inline: auto;
}

.frame, .hero {
  width: 100% !important;
}

.hero {
  --hero-bottom-space: 96px;
  padding-bottom: calc(var(--hero-bottom-space) + 3cm) !important;
}

.frame div {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 1279px) {
  .frame {
    --gutter: clamp(20px, 5vw, 64px);
    --section-space: clamp(56px, 8vw, 100px);
    --section-gap: clamp(28px, 5vw, 56px);
  }

  .frame > div {
    padding-inline: var(--gutter) !important;
  }

  .hero {
    height: auto !important;
    min-height: 680px;
    gap: 32px;
    --hero-bottom-space: 64px;
  }

  .hero > :last-child > :nth-child(2) > div:first-child > div,
  .hero > :last-child > :nth-child(2) > div:last-child {
    font-size: clamp(35px, 6vw, 72px) !important;
    line-height: 1.08 !important;
  }

  .hero > :last-child > :last-child,
  .services > :first-child,
  .intro,
  .notice > div,
  .contact {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--section-gap) !important;
  }

  .hero > :last-child > :last-child {
    gap: 24px !important;
  }

  .hero > :last-child > :last-child > :last-child,
  .footer, .footer > div {
    flex-wrap: wrap;
  }

  .intro, .services, .process, .experts, .principle, .contact {
    padding-block: var(--section-space) !important;
  }

  .notice {
    padding-block: 0 !important;
  }

  .notice > div, .contact > :last-child {
    padding: clamp(24px, 5vw, 56px) !important;
  }

  .intro > :last-child {
    padding-top: 0 !important;
  }

  .process > :last-child {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 32px !important;
  }

  .experts > :last-child > div {
    flex-direction: column !important;
    gap: 16px !important;
    padding: clamp(16px, 3vw, 28px) !important;
  }

  .experts > :last-child > div > :first-child {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 5 / 4;
  }

  .footer {
    gap: 20px;
  }

  .frame [style*="font-size:52px"],
  .frame [style*="font-size:56px"] {
    font-size: clamp(32px, 5vw, 54px) !important;
    line-height: 1.12 !important;
  }
}

@media (max-width: 599px) {
  .hero {
    min-height: min(700px, 100svh);
    --hero-bottom-space: 40px;
  }

  .hero > :last-child > :last-child > :first-child {
    font-size: 17px !important;
    line-height: 1.55 !important;
  }

  .intro > :last-child > :last-child,
  .services > :last-child > div,
  .experts > :last-child,
  .contact > :last-child > :first-child,
  .contact > :last-child > :last-child {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 20px !important;
  }

  .services > :last-child > div > div + div {
    border-top: 1px solid #dadada;
    padding-top: 20px;
  }

  .process > :last-child {
    grid-template-columns: minmax(0, 1fr);
  }

  .services, .process, .experts {
    gap: var(--section-gap) !important;
  }

  .contact > :last-child > :last-child > :last-child {
    align-self: flex-start;
  }

  .footer > div {
    gap: 12px 20px !important;
  }
}