body.about-page {
  background: #fff;
  color: #000;
}

.about-page .site-header {
  position: absolute;
}

.about-page .about-hero {
  background: #0d2ad3;
  padding: 250px 50px 120px;
}

.about-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 590px) minmax(0, 670px);
  gap: 80px;
  align-items: end;
}

.about-hero-grid h1 {
  font-size: 55px;
  line-height: 1.2;
  color: #fff;
}

.about-hero-grid p {
  margin: 0;
  font-size: 25px;
  line-height: 1.5;
  color: #fff;
}

.about-mission {
  padding: 120px 50px;
}

.about-mission .container {
  display: grid;
  gap: 50px;
}

.about-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  min-height: 400px;
}

.about-row--reverse {
  align-items: start;
}

.about-copy {
  padding: 0 0 50px;
  display: grid;
  align-content: center;
  gap: 24px;
}

.about-copy h2 {
  font-size: 25px;
  font-weight: 500;
  line-height: 1.5;
}

.about-copy p {
  font-size: 18px;
  line-height: 1.5;
  color: #000;
  max-width: 620px;
}

.about-media {
  background: #b9b9b9;
}

.about-values {
  padding: 120px 50px;
  background: #000;
}

.about-values-grid {
  display: grid;
  grid-template-columns: minmax(0, 670px) minmax(0, 590px);
  gap: 80px;
  align-items: stretch;
}

.about-values-image {
  min-height: 800px;
  background:
    linear-gradient(180deg, rgba(13, 42, 211, 0.35), rgba(13, 42, 211, 0.8)),
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.16), transparent 45%),
    linear-gradient(120deg, #0d2ad3, #061260);
}

.about-values h2 {
  color: #fff;
  margin-bottom: 40px;
}

.about-value-list {
  display: grid;
  gap: 0;
}

.about-value-item {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.45);
  opacity: 0.62;
  transition: opacity 220ms ease, border-top-color 220ms ease;
}

.about-value-item h3 {
  margin: 0;
  color: #fff;
  font-size: 25px;
  font-weight: 400;
  line-height: 1.3;
}

.about-value-item p {
  margin: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-4px);
  transition: max-height 260ms ease, opacity 220ms ease, transform 220ms ease, margin-top 220ms ease;
}

.about-value-item.is-active {
  opacity: 1;
  border-top: 2.5px solid #fff;
}

.about-value-item.is-active h3 {
  font-weight: 700;
}

.about-value-item.is-active p {
  max-height: 200px;
  opacity: 1;
  transform: translateY(0);
  margin-top: 12px;
  color: #fff;
  font-size: 16px;
  line-height: 1.5;
}

.about-testimonials {
  padding: 120px 50px;
}

.about-testimonials h2 {
  max-width: 768px;
  margin: 0 auto;
  text-align: center;
}

.about-testimonial-grid {
  margin-top: 80px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}

.about-testimonial-card {
  border: 1px solid #000;
  border-right: 0;
  padding: 30px;
  display: grid;
  gap: 28px;
  min-height: 350px;
}

.about-testimonial-card:last-child {
  border-right: 1px solid #000;
}

.about-testimonial-card p {
  margin: 0;
  color: #000;
  font-size: 16px;
  line-height: 1.5;
}

.about-testimonial-meta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.about-testimonial-meta strong {
  display: block;
  font-size: 16px;
}

.about-testimonial-meta span {
  font-size: 14px;
  color: #000;
}

.about-testimonial-brand {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.about-news {
  padding: 120px 50px;
  background: #fff;
}

.about-news.is-hidden {
  display: none;
}

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

.about-news h2 {
  font-size: 55px;
  line-height: 1.2;
}

.about-news-feature {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 50px;
  align-items: stretch;
}

.about-news-feature-media {
  width: 100%;
  min-height: 360px;
  object-fit: cover;
  background: #d9d9d9;
}

.about-news-feature-content {
  display: grid;
  gap: 16px;
  align-content: end;
}

.about-news-feature-content h3 {
  margin: 0;
  font-size: 40px;
  line-height: 1.3;
}

.about-news-feature-content p {
  font-size: 16px;
  color: #000;
}

.about-news-feature-content .news-date {
  color: rgba(0, 0, 0, 0.7);
}

.about-news-feature-content .news-link {
  color: #000;
  font-weight: 500;
}

@media (max-width: 1100px) {
  .about-page .about-hero {
    padding: 210px 0 90px;
  }

  .about-hero-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .about-hero-grid h1 {
    font-size: 44px;
  }

  .about-hero-grid p {
    font-size: 22px;
  }

  .about-mission,
  .about-values,
  .about-testimonials {
    padding-inline: 0;
  }

  .about-row,
  .about-values-grid {
    grid-template-columns: 1fr;
  }

  .about-row--reverse .about-media {
    order: 2;
  }

  .about-row--reverse .about-copy {
    order: 1;
  }

  .about-media {
    min-height: 320px;
  }

  .about-values-image {
    min-height: 460px;
  }

  .about-testimonial-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .about-testimonial-card,
  .about-testimonial-card:last-child {
    border-right: 1px solid #000;
  }

  .about-news {
    padding-inline: 0;
  }

  .about-news-feature {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .about-page .header-actions .btn {
    display: none;
  }

  .about-page .primary-nav {
    position: absolute;
    left: 20px;
    right: 20px;
    top: 86px;
    display: none;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    background: rgba(20, 20, 20, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.24);
  }

  .about-page .primary-nav.open {
    display: flex;
  }

  .about-hero-grid h1 {
    font-size: 40px;
  }

  .about-hero-grid p {
    font-size: 20px;
  }
}