/* ==========================================================================
   About Section
   DOM ref: .framer-1yz1f9v (D section in DOM map)
   Container: 1425px wide, padding 160px 40px 120px, gap 120px
   ========================================================================== */

.about {
  --about-inline-padding: var(--page-padding);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 72px;
  width: min(100%, 1560px);
  margin-inline: auto;
  padding: var(--space-20) var(--page-padding) 56px;
  overflow: hidden;
}

.approach {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  padding: 0 0 var(--space-16);
}

/* --------------------------------------------------------------------------
   D1. About Header
   DOM ref: .framer-1d2w5pr — flex column, gap 32px, 1345px x 250px
   -------------------------------------------------------------------------- */

.about__header {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: start;
  width: 100%;
}

.about__header-copy {
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
}

/* Eyebrow + heading group — flex column, gap 16px */
.about__heading-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);                           /* 16px */
  overflow: hidden;
}

/* Eyebrow: "/about" — 14px, 400, rgba(39,39,39,0.5) */
.about__eyebrow {
  font-size: var(--eyebrow-font-size);           /* 14px */
  font-weight: var(--eyebrow-font-weight);       /* 400 */
  line-height: var(--eyebrow-line-height);       /* 15.4px */
  color: var(--eyebrow-color);                   /* rgba(39,39,39,0.5) */
}

/* Title: 40px, 500, -0.8px letter-spacing, 44px line-height, max 680px */
.about__title {
  font-size: var(--heading-xl-font-size);        /* 40px */
  font-weight: var(--heading-xl-font-weight);    /* 500 */
  line-height: var(--heading-xl-line-height);    /* 44px */
  letter-spacing: var(--heading-xl-letter-spacing); /* -0.8px */
  color: var(--color-text-primary);
  max-width: var(--container-base);              /* 680px */
  margin: 0;
}

/* Body text: 14px, 400, 18.2px line-height, max 500px */
.about__body {
  font-size: var(--body-font-size);              /* 14px */
  font-weight: var(--body-font-weight);          /* 400 */
  line-height: var(--body-line-height);          /* 18.2px */
  color: var(--body-color);
  max-width: 52ch;
  margin: 0;
}

.about__header-panel {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  padding-top: 8px;
}

/* --------------------------------------------------------------------------
   D2. Info area wrapper
   DOM ref: .framer-y79xjr — flex column, center/center, gap 80px
   -------------------------------------------------------------------------- */

.approach__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 72px;
  max-width: 100%;
  width: 100%;
}

/* --------------------------------------------------------------------------
   Responsive: single column below 1100px
   -------------------------------------------------------------------------- */

@media (max-width: 1099.98px) {
  .about {
    --about-inline-padding: 24px;
    padding: 80px 24px 40px;
    gap: 60px;
  }

  .approach {
    padding: 0 0 60px;
  }

  .about__header {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .about__header-panel {
    justify-content: flex-start;
    padding-top: 0;
  }

  .about__title {
    font-size: 28px;
    line-height: 34px;
    letter-spacing: -0.5px;
  }

  .approach__content {
    gap: 48px;
  }
}

@media (max-width: 639.98px) {
  .about {
    --about-inline-padding: 20px;
    padding: 60px 20px 32px;
    gap: 48px;
  }

  .approach {
    padding: 0 0 48px;
  }

  .about__title {
    font-size: 26px;
    line-height: 32px;
    letter-spacing: -0.4px;
  }

  .approach__content {
    gap: 40px;
  }

  .about__header-copy {
    gap: 24px;
  }
}

@media (max-width: 519.98px) {
  .about {
    --about-inline-padding: 16px;
    padding: 48px 16px 24px;
    gap: 40px;
  }

  .approach {
    padding: 0 0 40px;
  }

  .about__title {
    font-size: 24px;
    line-height: 30px;
  }
}