/* =============================================
   Chysio — About page (about.html) specific styles
   Shared header/footer/base styles live in common.css
   ============================================= */

/* ---------- Story section ---------- */
.story{ background:var(--bg); }
.story-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:60px;
  align-items:center;
}
.signature{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid rgba(31,46,39,.12);
}
.signature-name{ font-family:var(--font-display); font-size:1.15rem; color:var(--pine); }
.signature-title{ font-size:.85rem; color:var(--gray); }

/* ---------- Values ---------- */
.values{ background:var(--white); }

/* ---------- Achievement (reuses .stat-grid from common.css) ---------- */
.achievement{ background:var(--mint); }

/* ---------- Team ---------- */
.team{ background:var(--bg); }
.team-card{
  background:var(--white);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
  overflow:hidden;
  text-align:center;
}
.team-photo{ border-radius:0; }
.team-photo img{ object-position: top; }
.team-body{ padding:24px 20px 28px; }
.team-role{ font-size:.85rem; font-weight:600; color:var(--teal-dark); margin-bottom:4px; display:block; }
.team-body h3{ margin-bottom:4px; }
.team-body p{ font-size:.92rem; margin-bottom:0; }

/* =============================================
   Responsive — Tablet
   ============================================= */
@media (max-width: 1024px){
  .story-grid{ grid-template-columns:1fr; }
  .story-visual{ order:2; }
}