.purpose {
  -webkit-margin-after: var(--space-96);
  -webkit-margin-before: var(--space-96);
  margin-block-end: var(--space-96);
  margin-block-start: var(--space-96);
  padding: 0 var(--side-spacing);
}
.purpose [class^="title"] {
  color: var(--theme-foreground);
  opacity: 0.3;
}
.purpose .title1 {
  -webkit-margin-start: var(--space-97);
  font-family: var(--text-serif);
  font-size: 27.94872vw;
  font-variation-settings: "wght" 400, "wdth" 0;
  letter-spacing: -0.05em;
  line-height: 0.82569;
  margin-inline-start: var(--space-97);
  white-space: nowrap;
}
@media (min-width: 640px) {
  .purpose .title1 {
    font-size: 17.03125vw;
  }
}
@media (min-width: 1024px) {
  .purpose .title1 {
    font-size: 10.64453vw;
  }
}
@media (min-width: 1440px) {
  .purpose .title1 {
    font-size: 7.56944vw;
  }
}
@media (min-width: 1920px) {
  .purpose .title1 {
    font-size: 5.67708vw;
  }
}
.purpose .title2 {
  font-family: var(--text-sans);
  font-size: 27.69231vw;
  font-variation-settings: "wght" 400, "wdth" 0;
  letter-spacing: -0.05em;
  line-height: 0.83333;
  white-space: nowrap;
}
@media (min-width: 640px) {
  .purpose .title2 {
    font-size: 16.875vw;
  }
}
@media (min-width: 1024px) {
  .purpose .title2 {
    font-size: 10.54688vw;
  }
}
@media (min-width: 1440px) {
  .purpose .title2 {
    font-size: 7.5vw;
  }
}
@media (min-width: 1920px) {
  .purpose .title2 {
    font-size: 5.625vw;
  }
}
.purpose .title3 {
  -webkit-margin-after: var(--space-24);
  font-family: var(--text-serif-italic);
  font-size: 27.69231vw;
  font-variation-settings: "wght" 400, "wdth" 0;
  letter-spacing: -0.05em;
  line-height: 0.83333;
  margin-block-end: var(--space-24);
  text-align: right;
  white-space: nowrap;
}
@media (min-width: 640px) {
  .purpose .title3 {
    font-size: 16.875vw;
  }
}
@media (min-width: 1024px) {
  .purpose .title3 {
    font-size: 10.54688vw;
  }
}
@media (min-width: 1440px) {
  .purpose .title3 {
    font-size: 7.5vw;
  }
}
@media (min-width: 1920px) {
  .purpose .title3 {
    font-size: 5.625vw;
  }
}
.purpose [class^="text"] .cta {
  display: block;
}
.purpose [class^="text"] .cta,
.purpose [class^="text"]:not(:first-of-type) {
  -webkit-margin-before: var(--space-24);
  margin-block-start: var(--space-24);
}
@media (min-width: 40rem) {
  .purpose .title1 {
    -webkit-margin-end: 0;
    font-size: 46.66667vw;
    line-height: 0.84615;
    margin-inline-end: 0;
    text-align: right;
  }
}
@media (min-width: 40rem) and (min-width: 640px) {
  .purpose .title1 {
    font-size: 28.4375vw;
  }
}
@media (min-width: 40rem) and (min-width: 1024px) {
  .purpose .title1 {
    font-size: 17.77344vw;
  }
}
@media (min-width: 40rem) and (min-width: 1440px) {
  .purpose .title1 {
    font-size: 12.63889vw;
  }
}
@media (min-width: 40rem) and (min-width: 1920px) {
  .purpose .title1 {
    font-size: 9.47917vw;
  }
}
@media (min-width: 40rem) {
  .purpose .title2 {
    -webkit-margin-end: var(--space-85);
    font-size: 46.41026vw;
    line-height: 0.85083;
    margin-inline-end: var(--space-85);
    text-align: right;
  }
}
@media (min-width: 40rem) and (min-width: 640px) {
  .purpose .title2 {
    font-size: 28.28125vw;
  }
}
@media (min-width: 40rem) and (min-width: 1024px) {
  .purpose .title2 {
    font-size: 17.67578vw;
  }
}
@media (min-width: 40rem) and (min-width: 1440px) {
  .purpose .title2 {
    font-size: 12.56944vw;
  }
}
@media (min-width: 40rem) and (min-width: 1920px) {
  .purpose .title2 {
    font-size: 9.42708vw;
  }
}
@media (min-width: 40rem) {
  .purpose .title3 {
    -webkit-margin-after: var(--space-48);
    font-size: 46.41026vw;
    line-height: 0.74033;
    margin-block-end: var(--space-48);
    text-align: left;
  }
}
@media (min-width: 40rem) and (min-width: 640px) {
  .purpose .title3 {
    font-size: 28.28125vw;
  }
}
@media (min-width: 40rem) and (min-width: 1024px) {
  .purpose .title3 {
    font-size: 17.67578vw;
  }
}
@media (min-width: 40rem) and (min-width: 1440px) {
  .purpose .title3 {
    font-size: 12.56944vw;
  }
}
@media (min-width: 40rem) and (min-width: 1920px) {
  .purpose .title3 {
    font-size: 9.42708vw;
  }
}
@media (min-width: 40rem) {
  .purpose [class^="text"] {
    width: 75%;
  }
}
@media (min-width: 64rem) {
  .purpose .title1 {
    font-size: 58.46154vw;
    line-height: 0.79386;
  }
}
@media (min-width: 64rem) and (min-width: 640px) {
  .purpose .title1 {
    font-size: 35.625vw;
  }
}
@media (min-width: 64rem) and (min-width: 1024px) {
  .purpose .title1 {
    font-size: 22.26563vw;
  }
}
@media (min-width: 64rem) and (min-width: 1440px) {
  .purpose .title1 {
    font-size: 15.83333vw;
  }
}
@media (min-width: 64rem) and (min-width: 1920px) {
  .purpose .title1 {
    font-size: 11.875vw;
  }
}
@media (min-width: 64rem) {
  .purpose .title2 {
    -webkit-margin-end: 0;
    font-size: 58.46154vw;
    line-height: 0.79386;
    margin-inline-end: 0;
    text-align: center;
  }
}
@media (min-width: 64rem) and (min-width: 640px) {
  .purpose .title2 {
    font-size: 35.625vw;
  }
}
@media (min-width: 64rem) and (min-width: 1024px) {
  .purpose .title2 {
    font-size: 22.26563vw;
  }
}
@media (min-width: 64rem) and (min-width: 1440px) {
  .purpose .title2 {
    font-size: 15.83333vw;
  }
}
@media (min-width: 64rem) and (min-width: 1920px) {
  .purpose .title2 {
    font-size: 11.875vw;
  }
}
@media (min-width: 64rem) {
  .purpose .title3 {
    -webkit-margin-after: var(--space-96);
    font-size: 58.46154vw;
    line-height: 0.79386;
    margin-block-end: var(--space-96);
  }
}
@media (min-width: 64rem) and (min-width: 640px) {
  .purpose .title3 {
    font-size: 35.625vw;
  }
}
@media (min-width: 64rem) and (min-width: 1024px) {
  .purpose .title3 {
    font-size: 22.26563vw;
  }
}
@media (min-width: 64rem) and (min-width: 1440px) {
  .purpose .title3 {
    font-size: 15.83333vw;
  }
}
@media (min-width: 64rem) and (min-width: 1920px) {
  .purpose .title3 {
    font-size: 11.875vw;
  }
}
@media (min-width: 64rem) {
  .purpose [class^="text"] {
    width: 50%;
  }
}
@media (min-width: 90rem) {
  .purpose {
    -moz-column-gap: var(--grid-gap);
    column-gap: var(--grid-gap);
    display: grid;
    grid-template-columns: repeat(12, 1fr);
  }
  .purpose .title1 {
    -webkit-margin-start: var(--space-589);
    font-size: 90.25641vw;
    grid-column: 1 / span 7;
    grid-row: 1;
    line-height: 0.85227;
    margin-inline-start: var(--space-589);
    text-align: left;
  }
}
@media (min-width: 90rem) and (min-width: 640px) {
  .purpose .title1 {
    font-size: 55vw;
  }
}
@media (min-width: 90rem) and (min-width: 1024px) {
  .purpose .title1 {
    font-size: 34.375vw;
  }
}
@media (min-width: 90rem) and (min-width: 1440px) {
  .purpose .title1 {
    font-size: 24.44444vw;
  }
}
@media (min-width: 90rem) and (min-width: 1920px) {
  .purpose .title1 {
    font-size: 18.33333vw;
  }
}
@media (min-width: 90rem) {
  .purpose .title2 {
    font-size: 90.25641vw;
    grid-column: 1 / span 8;
    grid-row: 2;
    line-height: 0.85227;
    margin: 0;
    text-align: left;
  }
}
@media (min-width: 90rem) and (min-width: 640px) {
  .purpose .title2 {
    font-size: 55vw;
  }
}
@media (min-width: 90rem) and (min-width: 1024px) {
  .purpose .title2 {
    font-size: 34.375vw;
  }
}
@media (min-width: 90rem) and (min-width: 1440px) {
  .purpose .title2 {
    font-size: 24.44444vw;
  }
}
@media (min-width: 90rem) and (min-width: 1920px) {
  .purpose .title2 {
    font-size: 18.33333vw;
  }
}
@media (min-width: 90rem) {
  .purpose .title3 {
    font-size: 90.25641vw;
    grid-column: 5 / span 8;
    grid-row: 3;
    justify-self: end;
    line-height: 0.85227;
    margin: 0;
  }
}
@media (min-width: 90rem) and (min-width: 640px) {
  .purpose .title3 {
    font-size: 55vw;
  }
}
@media (min-width: 90rem) and (min-width: 1024px) {
  .purpose .title3 {
    font-size: 34.375vw;
  }
}
@media (min-width: 90rem) and (min-width: 1440px) {
  .purpose .title3 {
    font-size: 24.44444vw;
  }
}
@media (min-width: 90rem) and (min-width: 1920px) {
  .purpose .title3 {
    font-size: 18.33333vw;
  }
}
@media (min-width: 90rem) {
  .purpose [class^="text"] {
    -webkit-margin-before: 0;
    margin-block-start: 0;
    width: auto;
  }
  .purpose .text1 {
    grid-column: 1 / span 5;
    grid-row: 1;
  }
  .purpose .text2 {
    grid-column: 9 / span 4;
    grid-row: 2;
  }
  .purpose .text2,
  .purpose .text3 {
    -webkit-padding-after: var(--space-32);
    align-self: end;
    padding-block-end: var(--space-32);
  }
  .purpose .text3 {
    grid-column: 1 / span 4;
    grid-row: 3;
  }
}
@media (min-width: 120rem) {
  .purpose .title1 {
    -webkit-margin-start: var(--space-804);
    font-size: 123.07692vw;
    line-height: 0.85417;
    margin-inline-start: var(--space-804);
  }
}
@media (min-width: 120rem) and (min-width: 640px) {
  .purpose .title1 {
    font-size: 75vw;
  }
}
@media (min-width: 120rem) and (min-width: 1024px) {
  .purpose .title1 {
    font-size: 46.875vw;
  }
}
@media (min-width: 120rem) and (min-width: 1440px) {
  .purpose .title1 {
    font-size: 33.33333vw;
  }
}
@media (min-width: 120rem) and (min-width: 1920px) {
  .purpose .title1 {
    font-size: 25vw;
  }
}
@media (min-width: 120rem) {
  .purpose .title2 {
    font-size: 123.07692vw;
    line-height: 0.85417;
  }
}
@media (min-width: 120rem) and (min-width: 640px) {
  .purpose .title2 {
    font-size: 75vw;
  }
}
@media (min-width: 120rem) and (min-width: 1024px) {
  .purpose .title2 {
    font-size: 46.875vw;
  }
}
@media (min-width: 120rem) and (min-width: 1440px) {
  .purpose .title2 {
    font-size: 33.33333vw;
  }
}
@media (min-width: 120rem) and (min-width: 1920px) {
  .purpose .title2 {
    font-size: 25vw;
  }
}
@media (min-width: 120rem) {
  .purpose .title3 {
    font-size: 123.07692vw;
    line-height: 0.85417;
  }
}
@media (min-width: 120rem) and (min-width: 640px) {
  .purpose .title3 {
    font-size: 75vw;
  }
}
@media (min-width: 120rem) and (min-width: 1024px) {
  .purpose .title3 {
    font-size: 46.875vw;
  }
}
@media (min-width: 120rem) and (min-width: 1440px) {
  .purpose .title3 {
    font-size: 33.33333vw;
  }
}
@media (min-width: 120rem) and (min-width: 1920px) {
  .purpose .title3 {
    font-size: 25vw;
  }
}
@media (min-width: 120rem) {
  .purpose .text1 {
    grid-column: 1 / span 4;
  }
  .purpose .text2 {
    -webkit-padding-after: var(--space-48);
    padding-block-end: var(--space-48);
  }
  .purpose .text3 {
    -webkit-padding-after: var(--space-40);
    grid-column: 1 / span 3;
    padding-block-end: var(--space-40);
  }
  .purpose [class^="text"] .cta {
    -webkit-margin-before: var(--space-24);
    display: block;
    margin-block-start: var(--space-24);
  }
}