/* ============================================================================
   About page — styles specific to this page only.
   ========================================================================== */

/* ---------------------------------------------------------------- story */
.about-story {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--s-9);
    align-items: start;
}

.about-story__body { display: grid; gap: var(--s-5); }

.about-story__body p { font-size: var(--fs-md); color: var(--text-muted); }

/* The opening paragraph carries the weight of the page. */
.about-story__body p:first-child {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 600;
    line-height: var(--lh-snug);
    color: var(--text);
}

@media (max-width: 1023px) {
    .about-story { grid-template-columns: 1fr; gap: var(--s-7); }
}

/* ---------------------------------------------------------- vision & mission */
.about-vm { margin-top: var(--s-9); }

.vm-card {
    padding: var(--s-7);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .03);
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.vm-card:hover { border-color: var(--gold-700); background: rgba(255, 255, 255, .05); }

.vm-card__icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: var(--s-5);
    color: var(--c-gold);
    border: 1px solid var(--gold-700);
    border-radius: 50%;
}

.vm-card__title { font-size: var(--fs-xl); color: var(--c-white); }

.vm-card__text {
    margin-top: var(--s-4);
    font-size: var(--fs-md);
    color: var(--ink-300);
}

/* ---------------------------------------------------------------- values */
.about-values,
.about-why,
.about-process { margin-top: var(--s-9); }

/* ---------------------------------------------------------------- team */
.about-team { margin-top: var(--s-9); }

.team-card__photo {
    margin-bottom: var(--s-4);
    border-radius: var(--radius);
}
.team-card__photo img { transition: transform var(--dur-slow) var(--ease-out); }
.team-card:hover .team-card__photo img { transform: scale(1.04); }

.team-card__name { font-size: var(--fs-md); }

.team-card__role {
    margin-top: var(--s-1);
    font-size: var(--fs-sm);
    color: var(--c-gold);
}