/* ==========================================================================
   About page
   ========================================================================== */

.page-about .hero { padding: 160px var(--sp-5) 90px; }
.page-about .hero-container { max-width: 1000px; text-align: center; }
.page-about .hero h1 { font-size: var(--fs-3xl); }
.page-about .hero p { max-width: 800px; margin: 0 auto var(--sp-6); line-height: 1.7; }

.card {
    background-color: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--sp-6);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
}
.card .icon { width: var(--icon-lg); height: var(--icon-lg); color: var(--primary-color); margin-bottom: var(--sp-4); }
.card h3 { margin-bottom: var(--sp-3); color: var(--dark-bg); font-size: var(--fs-lg); }
.card p { color: var(--text-main); line-height: var(--lh-base); }

.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--sp-6); }
.services-grid .card {
    transition: transform var(--dur-2) var(--ease-out),
                box-shadow var(--dur-2) var(--ease-out),
                border-color var(--dur-2) var(--ease-out);
}
.services-grid .card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 16px 35px rgba(13, 71, 161, 0.12);
    border-color: var(--primary-color);
}

.what-we-do-title { text-align: center; font-size: var(--fs-2xl); color: var(--dark-bg); margin-bottom: var(--sp-3); }
.what-we-do-subtitle { text-align: center; color: var(--text-main); max-width: 760px; margin: 0 auto var(--sp-7); line-height: var(--lh-base); }

/* Same 160px-on-a-phone problem as insights.css — see the note there. */
@media (max-width: 900px) {
    .page-about .hero { padding: calc(var(--header-h) + var(--sp-7)) var(--sp-5) var(--sp-8); }
}