/* ============================================================
   YSN EXTRACTORS — about.css
   ============================================================ */

/* ── INTRO ── */
.about-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }

.about-intro__images { position: relative; padding-bottom: 60px; padding-right: 44px; }

.about-intro__main {
  width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.about-intro__accent {
  position: absolute;
  bottom: 0; right: 0;
  width: 56%; aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 5px solid var(--white);
  box-shadow: var(--shadow-md);
}
.about-intro__tag {
  position: absolute;
  top: 24px; left: -16px;
  background: var(--green);
  color: var(--white);
  padding: 10px 22px;
  font-family: var(--font-display);
  font-size: 12px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  box-shadow: var(--shadow-sm);
}

.about-intro__text h2 { margin-bottom: 18px; color: var(--text-dark); }
.about-intro__text p  { margin-bottom: 16px; }

/* ── MISSION BAND ── */
.mission-band {
  background: linear-gradient(135deg, var(--green-dark) 0%, var(--green) 50%, var(--blue) 100%);
  padding-block: 80px; padding-inline: 5%;
  text-align: center;
}
.mission-band blockquote {
  font-family: var(--font-display);
  font-size: clamp(22px, 3.5vw, 40px);
  font-weight: 700;
  color: var(--white);
  max-width: 820px;
  margin-inline: auto;
  line-height: 1.3;
}
.mission-band blockquote em { font-style: italic; color: rgba(255,255,255,0.85); }
.mission-band cite { display: block; font-style: normal; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-top: 22px; }

/* ── VALUES ── */
.values { background: var(--light-bg); }

.values__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 52px; }

.value-card {
  background: var(--white);
  padding: 36px 28px;
  border-radius: var(--radius-lg);
  border-top: 3px solid var(--green);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.value-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.value-card .icon-box { margin-bottom: 18px; }
.value-card h3 { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--green-dark); margin-bottom: 10px; }
.value-card p  { font-size: 14px; line-height: 1.75; color: var(--text-mid); font-weight: 300; }

/* ── GOALS TIMELINE ── */
.goals { background: var(--white); }

.goals__track { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 56px; position: relative; }
.goals__track::before {
  content: '';
  position: absolute;
  top: 22px; left: 10px; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--green), var(--blue));
  opacity: 0.3;
}

.goal { padding: 56px 24px 0 0; position: relative; }
.goal__dot {
  position: absolute; top: 14px; left: 0;
  width: 22px; height: 22px;
  background: var(--green);
  border: 4px solid var(--white);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--green);
  z-index: 1;
}
.goal:nth-child(2) .goal__dot { background: var(--blue-mid); box-shadow: 0 0 0 2px var(--blue-mid); }
.goal:nth-child(3) .goal__dot { background: var(--blue-dark); box-shadow: 0 0 0 2px var(--blue-dark); }

.goal__year { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--green); font-weight: 700; margin-bottom: 10px; }
.goal:nth-child(2) .goal__year { color: var(--blue-mid); }
.goal:nth-child(3) .goal__year { color: var(--blue-dark); }
.goal h3 { font-size: 15px; font-weight: 700; margin-bottom: 10px; color: var(--text-dark); }
.goal p   { font-size: 13px; line-height: 1.75; color: var(--text-mid); font-weight: 300; }

/* ── CLIENTS ── */
.client-types { background: var(--light-bg); }

.client-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 48px; }

.client-card {
  background: var(--white);
  padding: 28px;
  border-radius: var(--radius-md);
  border-left: 4px solid var(--green);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
}
.client-card:nth-child(2) { border-left-color: var(--blue); }
.client-card:nth-child(3) { border-left-color: var(--green-mid); }
.client-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.client-card h4 { font-family: var(--font-display); font-size: 17px; font-weight: 700; margin-bottom: 8px; color: var(--green-dark); }
.client-card:nth-child(2) h4 { color: var(--blue-dark); }
.client-card p  { font-size: 14px; line-height: 1.75; color: var(--text-mid); font-weight: 300; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .about-intro { grid-template-columns: 1fr; gap: 40px; }
  .about-intro__images { padding-bottom: 80px; }
  .goals__track { grid-template-columns: 1fr; gap: 28px; }
  .goals__track::before { display: none; }
  .goal__dot { display: none; }
  .goal { padding-top: 0; padding-right: 0; }
}