/* ==========================================================================
   TESTIMONIAL — deep-red pull quote + advisor photo   (visual only)
   ==========================================================================
   Cornerstone design: a large deep-red serif quote on the left, an advisor
   photo filling the right. Big decorative quote mark; red attribution.

   Build: element_group `row testimonial` →
       text  `col-1-2`  (blockquote: quote <p> + `.cite` attribution <p>, then a.btn)
       image `col-1-2`  (advisor photo — fills the column)
   ========================================================================== */
.testimonial {
    --quote-red: #93191D;
    /* Penpot red-700; layout = .testimonial-band (home.css) */

    blockquote { position: relative; margin: 0; }

    /* The quote at the board's 45px / 600 (in proportion below 2400). Its marks
       are drawn, not typed into the copy, in the same type and size as the
       text; the opening one hangs outside the text's left edge so every line
       starts flush (Bob, 10 Oct 2026). */
    blockquote > p:first-of-type {
        position: relative;
        font-family: var(--type-display);
        font-weight: 600;
        font-size: clamp(1.5rem, 1.875vw, 2.8125rem);
        line-height: 1.4;
        color: var(--quote-red);
        margin: 0 0 1em;
    }
    blockquote > p:first-of-type::before {
        content: "\201C";
        position: absolute;
        right: 100%;
        padding-right: 0.08em;
    }
    blockquote > p:first-of-type::after { content: "\201D"; }
    blockquote .cite, blockquote > p:last-child {
        font-family: var(--type-body);
        font-weight: 600;
        font-size: 0.9rem;
        color: var(--quote-red);
        margin: 0;
    }
    blockquote strong { font-weight: 700; }

    a.btn { margin-top: 1.5rem; margin-bottom: 0; }
}