/* Desktop composition from Figma frame 36:504. */
.about-page { padding: 22px 0 120px; background: var(--paper); }
.about-page__lead { display: flex; align-items: flex-start; gap: 61px; }
.about-page__lead > img { width: 143px; height: 175px; object-fit: contain; }
.about-page h1 { width: 776px; margin: 0; font-size: 58px; line-height: 1.1; }
.about-page h1 span { color: var(--muted); }
.about-page__story { display: grid; grid-template-columns: 384px 384px; gap: 228px; margin-top: 60px; }
.about-page__mission { align-self: start; height: 270px; padding: 30px; border-radius: 10px; background: var(--surface); font-size: 16px; line-height: 1.3; letter-spacing: 1.28px; text-transform: uppercase; }
.about-page__mission strong { font-weight: 600; }
.about-page__content > img { display: block; width: 384px; height: 192px; object-fit: cover; }
.about-page__content p { margin: 20px 0 0; font-size: 16px; line-height: 1.3; }
.about-page__content > img + p { margin-top: 24px; }
.about-page__content .button { display: inline-flex; align-items: center; justify-content: center; min-width: 270px; margin-top: 28px; text-decoration: none; transition: background-color .18s ease; }
.about-page__content .button:hover { background: var(--blue); }
.requisites { display: grid; grid-template-columns: 578px 1fr; gap: 27px; height: 424px; margin-top: 60px; padding: 9px; border: 1px solid var(--muted); border-radius: 15px; }
.requisites__company { height: 404px; padding: 26px 30px; border-radius: 10px; background: var(--blue); color: var(--paper); }
.requisites h2 { margin: 0; font-family: "Onest", Arial, sans-serif; font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: 1.28px; text-transform: uppercase; }
.requisites__company h2 { width: 503px; font-size: 20px; line-height: 1.2; letter-spacing: 1.6px; }
.requisites__company p { width: 399px; margin: 0; font-size: 16px; line-height: 1.3; }
.requisites__company h2 + p { margin-top: 34px; }
.requisites__company p + p { margin-top: 12px; }
.requisites__banks { padding-top: 26px; }
.requisites__banks p { margin: 24px 0 0; font-size: 14px; line-height: 1.3; }
.requisites__banks p + p { margin-top: 24px; }
.about-contacts { padding-bottom: 120px; }

@media (max-width: 900px) {
  .about-page { padding: 56px 0 72px; }
  .about-page__lead { gap: 25px; }
  .about-page__lead > img { width: 110px; height: 135px; }
  .about-page h1 { width: auto; font-size: 42px; }
  .about-page__story { grid-template-columns: 1fr; gap: 48px; }
  .about-page__content, .about-page__content > img { width: 100%; }
  .about-page__content > img { height: auto; aspect-ratio: 2 / 1; }
  .requisites { grid-template-columns: 1fr; height: auto; gap: 24px; }
  .requisites__company { height: auto; min-height: 404px; }
  .requisites__banks { padding: 22px 21px 28px; }
}

@media (max-width: 600px) {
  .about-page__lead { display: block; }
  .about-page__lead > img { display: block; margin-bottom: 25px; }
  .about-page h1 { font-size: 42px; }
  .about-page__story { margin-top: 45px; }
  .about-page__mission { height: auto; padding: 24px; }
  .requisites { margin-top: 44px; padding: 6px; }
  .requisites__company { min-height: 0; padding: 24px; }
  .requisites__company h2, .requisites__company p { width: auto; }
  .requisites__company h2 { font-size: 18px; }
}