/* ============================================================
   ABOUT PAGE
   ============================================================ */


/* ============================================================
   INTRODUCTION
   ============================================================ */

.intro-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.4fr)
        minmax(300px, 0.8fr);

    gap:
        var(--spacing-4xl);

    align-items: center;

}


.intro-grid__content {

    max-width: 760px;

}


.intro-grid__visual {

    width: 100%;

}


/* ============================================================
   CONTENT PLACEHOLDER
   ============================================================ */

.content-placeholder {

    margin-top:
        var(--spacing-xl);

    padding:
        var(--spacing-lg);

    border-left:
        3px solid
        var(--color-accent);

    background:
        var(--color-background);

}


.content-placeholder__label {

    display: block;

    margin-bottom:
        var(--spacing-sm);

    color:
        var(--color-accent);

    font-size:
        var(--font-size-xs);

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

}


.content-placeholder p {

    margin:
        0;

    color:
        var(--color-text-muted);

    font-size:
        var(--font-size-sm);

}


/* ============================================================
   PROFILE IMAGE PLACEHOLDER
   ============================================================ */

.profile-placeholder {

    min-height:
        360px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        var(--spacing-sm);

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-md);

    background:
        var(--color-background);

    color:
        var(--color-text-muted);

    text-align:
        center;

}


.profile-placeholder__icon {

    font-size:
        4rem;

    opacity:
        0.35;

}


.profile-placeholder span {

    font-weight:
        600;

}


.profile-placeholder small {

    color:
        var(--color-text-muted);

}


/* ============================================================
   EXPERTISE
   ============================================================ */

.service-card {

    padding:
        var(--spacing-xl);

    background:
        var(--color-white);

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-md);

    box-shadow:
        var(--shadow-sm);

    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal),
        border-color var(--transition-normal);

}


.service-card:hover {

    transform:
        translateY(-4px);

    border-color:
        var(--color-secondary-light);

    box-shadow:
        var(--shadow-md);

}


.service-card__icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        48px;

    height:
        48px;

    margin-bottom:
        var(--spacing-lg);

    border-radius:
        var(--radius-sm);

    background:
        rgba(182, 139, 64, 0.12);

    color:
        var(--color-accent);

    font-size:
        var(--font-size-sm);

    font-weight:
        700;

}


.service-card__title {

    margin-bottom:
        var(--spacing-sm);

    color:
        var(--color-primary);

    font-size:
        var(--font-size-lg);

}


.service-card__description {

    margin:
        0;

    color:
        var(--color-text-light);

}


/* ============================================================
   CERTIFICATIONS
   ============================================================ */

.certifications-list {

    display:
        grid;

    gap:
        var(--spacing-md);

    max-width:
        850px;

    margin:
        0 auto;

}


.certification-item {

    display:
        flex;

    align-items:
        center;

    gap:
        var(--spacing-md);

    padding:
        var(--spacing-lg);

    background:
        var(--color-white);

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-md);

}


.certification-item__icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        32px;

    height:
        32px;

    flex-shrink:
        0;

    border-radius:
        50%;

    background:
        var(--color-primary);

    color:
        var(--color-white);

    font-size:
        var(--font-size-sm);

    font-weight:
        700;

}


/* ============================================================
   VISION
   ============================================================ */

.vision {

    max-width:
        900px;

    margin:
        0 auto;

    text-align:
        center;

}


.vision__text {

    margin-top:
        var(--spacing-xl);

    color:
        var(--color-text-light);

    font-size:
        var(--font-size-lg);

    line-height:
        1.8;

}


.vision__quote {

    margin:
        var(--spacing-2xl)
        0
        0;

    padding:
        var(--spacing-xl);

    border-left:
        4px solid
        var(--color-accent);

    background:
        var(--color-background);

    color:
        var(--color-primary);

    font-size:
        var(--font-size-xl);

    font-weight:
        600;

    line-height:
        1.6;

    text-align:
        left;

}


/* ============================================================
   MISSION
   ============================================================ */

.mission {

    max-width:
        850px;

    margin:
        0 auto;

    text-align:
        center;

}


.mission__text {

    margin-top:
        var(--spacing-xl);

    color:
        var(--color-primary);

    font-size:
        var(--font-size-2xl);

    font-weight:
        600;

    line-height:
        1.6;

}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {

    .intro-grid {

        grid-template-columns:
            1fr;

        gap:
            var(--spacing-2xl);

    }

}


@media (max-width: 600px) {

    .profile-placeholder {

        min-height:
            280px;

    }


    .vision__quote {

        padding:
            var(--spacing-lg);

    }


    .mission__text {

        font-size:
            var(--font-size-xl);

    }

}