/* ============================================================================
   Clients page.
   ========================================================================== */

.clients-page__logos,
.clients-page__projects { margin-top: var(--s-9); }

.clients-page__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s-5);
}

/* ---------------------------------------------------------------- statement */
.statement {
    max-width: 62ch;
    margin-inline: auto;
    text-align: center;
}

.statement__mark {
    display: block;
    font-family: var(--font-display);
    font-size: 5rem;
    line-height: .6;
    color: var(--c-gold);
}

.statement__quote {
    margin-top: var(--s-5);
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 600;
    line-height: var(--lh-snug);
    color: var(--c-white);
}

.statement__source {
    margin-top: var(--s-5);
    font-size: var(--fs-sm);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--c-gold);
}

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

.testimonial {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--s-6);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.testimonial:hover { border-color: var(--gold-200); box-shadow: var(--shadow); }

.testimonial__rating {
    font-size: var(--fs-md);
    letter-spacing: 2px;
    color: var(--c-gold);
}
.testimonial__rating-off { color: var(--ink-200); }

.testimonial__quote {
    flex: 1;
    margin-top: var(--s-4);
    color: var(--text-muted);
}

.testimonial__person {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    margin-top: var(--s-6);
    padding-top: var(--s-5);
    border-top: 1px solid var(--border);
}

.testimonial__photo {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 50%;
}

.testimonial__name {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
}

.testimonial__role {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}