/* About page – small visual tweaks beyond global */

.pillars-section .pillar-card {
  min-height: 140px;
}

.audience-section .audience-card {
  min-height: 120px;
}

.expectations-grid .expectation-card {
  text-align: left;
}

.expectation-icon {
  margin-bottom: var(--space-xs);
}

.about-graphic,
.about-timeline,
.about-principles {
  max-width: 1100px;
  margin: 60px auto;
  padding: 0 24px;
}

.about-graphic h2,
.about-timeline h2,
.about-principles h2 {
  text-align: center;
  margin-bottom: 20px;
}

.graphic-wrap {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

/* Timeline */
.timeline-grid {
  display: flex;
  gap: 24px;
  justify-content: center;
}
.timeline-item {
  flex: 1;
  padding: 20px;
  border-radius: 12px;
  background: #f5f7ff;
  border: 1px solid #e3e3e3;
  text-align: center;
}

/* Principles */
.principles-grid {
  display: flex;
  gap: 24px;
}
.principle {
  flex: 1;
  padding: 20px;
  background: #fafbff;
  border: 1px solid #e3e3e3;
  border-radius: 12px;
  text-align: center;
}

/* adding tweaks for the image on hero page */
.hero-visual {
  flex: 0 0 420px;
  max-width: 460px;
  position: relative;
}

.hero-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;

  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.25) 20%,
    rgba(0, 0, 0, 0.6) 40%,
    rgba(0, 0, 0, 1) 75%
  );
  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.25) 20%,
    rgba(0, 0, 0, 0.6) 40%,
    rgba(0, 0, 0, 1) 75%
  );

  opacity: 0.85;
}