/* ═══════════════════════════════════════════
   Styles extracted from: about.html
   ═══════════════════════════════════════════ */


    .about-page { min-height: 100vh; }
    .about-hero {
      background: linear-gradient(180deg, #FFFFFF 0%, #FAF8F5 100%);
      border-bottom: 1px solid var(--border);
    }
    .values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 36px; }
    .value-card {
      background: #FFFFFF; border: 1.5px solid var(--border);
      border-radius: var(--radius-lg); padding: 34px 28px; text-align: center;
      transition: var(--trans); box-shadow: var(--shadow-sm);
    }
    .value-card:hover {
      border-color: var(--border-accent); transform: translateY(-5px);
      box-shadow: var(--shadow-md);
    }
    .value-icon { font-size: 2.6rem; margin-bottom: 16px; }
    .value-name { font-size: 1.1rem; font-weight: 800; margin-bottom: 10px; color: var(--text); }
    .value-desc { font-size: 0.88rem; color: var(--text-muted); line-height: 1.75; }

    /* Contact Cards */
    .contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 36px; }
    .contact-card {
      background: #FFFFFF; border: 1.5px solid var(--border);
      border-radius: var(--radius-lg); padding: 32px 24px; text-align: center;
      transition: var(--trans); box-shadow: var(--shadow-sm);
    }
    .contact-card:hover { border-color: var(--border-accent); transform: translateY(-4px); box-shadow: var(--shadow-md); }
    .contact-card-icon { font-size: 2.2rem; margin-bottom: 14px; }
    .contact-card-label { font-size: 0.88rem; color: var(--text-muted); margin-bottom: 8px; font-weight: 600; }
    .contact-card-value { font-size: 1.05rem; font-weight: 800; color: var(--primary-dark); }
    .contact-card a { color: inherit; }

    @media (max-width: 900px) {
      .values-grid { grid-template-columns: 1fr; }
      .contact-cards { grid-template-columns: 1fr; }
    }
    @media (max-width: 640px) {
      .contact-card { padding: 22px 16px; }
      .about-story { padding: 24px 16px; }
    }