.about-story {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 100vh;
  overflow: visible;
  background: var(--black);
}

.about-story-shell {
  width: min(calc(100% - 32px), var(--squirrelli-page-max));
  min-height: 100%;
  margin: 0 auto;
  padding: clamp(126px, 10vw, 148px) clamp(10px, 2vw, 28px) clamp(34px, 4vw, 62px);
}

.about-story-title {
  width: fit-content;
  margin: 0;
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(75px, calc(12.4vw - 17px), 157px);
  font-weight: 900;
  line-height: 0.86;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}

.about-story-body {
  display: grid;
  grid-template-columns: minmax(520px, 0.52fr) minmax(360px, 0.48fr);
  gap: clamp(54px, 9vw, 130px);
  align-items: start;
  margin-top: clamp(22px, 2.2vw, 34px);
}

.about-story-media {
  width: min(100%, 620px);
  min-height: clamp(430px, 33vw, 480px);
  margin: 0;
  background: url("../image assets/ChatGPT Image Jun 25, 2026, 12_12_48 PM.png") center / cover no-repeat;
  border-radius: var(--sq-corner-radius);
}

.about-story-copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  max-width: 620px;
  margin: 0;
  color: var(--white);
}

.about-story-copy p,
.who-we-are-copy p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.62;
  letter-spacing: 0;
  text-transform: none;
}

.about-story-copy p + p,
.who-we-are-copy p + p {
  margin-top: 30px;
}

.who-we-are {
  width: 100%;
  min-height: min(760px, 72vw);
  background: var(--black);
  color: var(--white);
}

.who-we-are-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  column-gap: clamp(24px, 3vw, 56px);
  align-items: start;
  width: min(calc(100% - 32px), var(--squirrelli-page-max));
  min-height: inherit;
  margin: 0 auto;
  padding: clamp(58px, 7vw, 92px) clamp(10px, 2vw, 28px) clamp(42px, 5vw, 76px);
}

.who-we-are-copy {
  align-self: end;
  width: min(100%, 920px);
  max-width: none;
  margin: 0 0 clamp(22px, 3vw, 44px);
  color: var(--white);
}

.who-we-are-title {
  justify-self: end;
  margin: 0;
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(75px, calc(12.4vw - 17px), 157px);
  font-weight: 900;
  line-height: 0.78;
  letter-spacing: var(--tracking-display);
  text-align: right;
  text-transform: uppercase;
}

.who-we-are-line {
  display: block;
  white-space: nowrap;
  line-height: 0.9;
}

.who-we-are-line-main {
  margin: 0;
}

.who-we-are-line-sub {
  margin-left: 0;
}

@media (max-width: 959px) {
  .about-story {
    aspect-ratio: auto;
  }

  .about-story-shell {
    height: auto;
    padding: 92px 8px 56px;
  }

  .about-story-title {
    font-size: clamp(61px, calc(24vw - 17px), 87px);
  }

  .about-story-body {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 28px;
  }

  .about-story-media {
    width: 100%;
    min-height: 320px;
  }

  .about-story-copy {
    min-height: auto;
    max-width: none;
    margin: 0;
  }

  .who-we-are {
    min-height: auto;
  }

  .who-we-are-shell {
    display: flex;
    flex-direction: column-reverse;
    gap: 56px;
    min-height: auto;
    padding: 50px 8px 52px;
  }

  .who-we-are-title {
    align-self: flex-end;
    font-size: clamp(61px, calc(24vw - 17px), 87px);
  }

  .who-we-are-copy {
    width: min(100%, 920px);
    max-width: none;
    align-self: flex-start;
    margin: 0;
  }

}