/* ==========================================================================
   TESTIMONIAL GRID — avatar + short pull-quote, N-up   (visual only)
   ==========================================================================
   A centred row of client quotes, each led by a round initial-badge avatar,
   with a short deep-red serif quote below. Pairs with a centred section
   heading and a centred CTA (`.cta-center`).

   Build: element_group `row testimonial-grid` with N children `col-1-4`, each a
   `text` element:
       <span class="tavatar">RB</span>
       <blockquote><p>They tell it to you straight…</p></blockquote>
   ========================================================================== */
.testimonial-grid {
    margin-top: clamp(1.75rem, 3.5vw, 3.5rem);
    align-items: start;
}
.testimonial-grid > * {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

/* Round initial badge. */
.tavatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(72px, 6.5vw, 110px);
    height: clamp(72px, 6.5vw, 110px);
    border-radius: 50%;
    background: var(--prime);
    color: var(--white);
    font-family: var(--type-display);
    font-weight: 700;
    font-size: clamp(1.5rem, 2.4vw, 2.25rem);
    line-height: 1;
    margin-bottom: clamp(1rem, 1.6vw, 1.5rem);
    margin-inline: auto;          /* centre the avatar; the quote below stays left-aligned */
}

.testimonial-grid {
    blockquote { margin: 0; }
    blockquote p {
        margin: 0;
        font-family: var(--type-display);
        font-weight: 500;
        font-size: clamp(1rem, 1.15vw, 1.1875rem);
        line-height: 1.4;
        color: var(--accent-deep);
    }
}

/* Centred CTA under a centred block (heading / grid). */
.cta-center { text-align: center; margin-top: clamp(1.5rem, 3vw, 2.75rem); }
.cta-center a.btn { margin-bottom: 0; }

@media only screen and (max-width: 700px) {
    .testimonial-grid > * + * { margin-top: 2rem; }
}