.hero--about {
  background: radial-gradient(circle at top left, #f6f0de 0, transparent 45%), radial-gradient(circle at bottom right, #e5e9f5 0, transparent 55%), #ffffff;
}

.hero--about .hero__layout {
  align-items: center;
}

.hero__actions {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.about-hero-media,
.about-team-media,
.about-experience-media {
  max-width: 520px;
  margin: 0 auto;
}

.about-hero-image,
.about-team-image,
.about-experience-image {
  overflow: hidden;
}

.about-hero-image img,
.about-team-image img,
.about-experience-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform var(--transition-slow);
}

.about-hero-image:hover img,
.about-team-image:hover img,
.about-experience-image:hover img {
  transform: scale(1.06);
}

.about-values-list,
.about-why-list {
  padding-left: 1.25rem;
}

.about-values-list li,
.about-why-list li {
  margin-bottom: 0.4rem;
}

.about-contact-cta {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(201, 165, 82, 0.35);
  background: linear-gradient(135deg, rgba(246, 240, 222, 0.9), #ffffff);
  box-shadow: var(--shadow-sm);
}

.about-contact-cta h3 {
  margin-top: 0;
}

.about-contact-actions {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

@media (min-width: 768px) {
  .about-intro-grid,
  .about-values-grid,
  .about-team-grid,
  .about-experience-grid,
  .about-safety-grid,
  .about-why-grid {
    align-items: center;
  }
}

@media (max-width: 767.98px) {
  .hero--about {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
  }
}