.about-profile {
  display: grid;
  gap: 80px;
}

.about-profile > *,
.about-profile__intro > * { min-width: 0; }

.about-profile__intro {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(48px, 8vw, 132px);
  align-items: start;
}

.about-profile__title-art {
  width: 100%;
  max-width: 620px;
  margin-bottom: 0;
  line-height: 0;
}

.about-profile__title-art img {
  width: 100%;
  height: auto;
}

.about-profile__copy {
  padding-top: 34px;
}

.about-profile__copy > p {
  margin-bottom: 20px;
}

.about-profile__copy > p:last-child {
  max-width: 760px;
  margin-bottom: 0;
}

.about-profile .customers { padding-top: 0; }

.about-profile .developer-logo--monochrome { filter: grayscale(1) brightness(0); }
.about-profile .developer-logo--padded { height: 90px; max-width: 180px; margin-block: -21px; }

.about-story.service-panel--dark { background: #182d42; }
.about-stories .about-story { height: 520px; }
.about-stories .about-story .service-panel__image {
  width: calc(100% + 52px);
  height: 330px;
  margin-inline: -26px;
  object-fit: cover;
  mix-blend-mode: normal;
}
.about-stories .about-story:hover .service-panel__image,
.about-stories .about-story:focus-within .service-panel__image { height: 0; opacity: 0; }
.about-story .service-panel__details { overflow-y: auto; }
.about-story .service-panel__details p { font-size: .88rem; line-height: 1.55; }
.about-story .service-panel__details p + p { margin-top: 18px; }
.about-story .button { margin-top: 24px; }

.about-story__mark {
  display: block;
  width: 96px;
  height: 52px;
  margin-top: 24px;
  object-fit: contain;
  object-position: left center;
}

.about-story__mark--nhqb { width: 74px; height: 65px; }
.about-story:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
.about-story:focus-within { flex-grow: 2.8; }
.about-story:focus-within .service-panel__summary { width: 42%; }
.about-story:focus-within .service-panel__image { height: 0; opacity: 0; }
.about-story:focus-within .service-panel__details { opacity: 1; transform: none; visibility: visible; }

@media (max-width: 980px) {
  .about-profile__intro { grid-template-columns: 1fr; gap: 24px; }
  .about-profile__copy { padding-top: 0; }
  .about-stories .about-story { height: auto; }
  .about-story:focus-within .service-panel__summary { width: auto; }
}

@media (max-width: 680px) {
  .about-profile { gap: 24px; }
  .about-stories .about-story { height: 400px; }
  .about-stories .about-story .service-panel__image { height: 220px; }
  .about-stories .about-story:focus-within { height: auto; }
  .about-stories .about-story:hover .service-panel__image,
  .about-stories .about-story:focus-within .service-panel__image { height: 0; }
  .about-stories .about-story:focus-within .service-panel__details {
    max-height: none;
    padding-top: 18px;
    margin-top: 18px;
    border-top: 1px solid var(--line);
  }
  .about-story.service-panel--dark:focus-within .service-panel__details { border-color: rgba(255, 255, 255, .24); }
}