@layer ds.block {
    .block-quote-band {
        position: relative;
        overflow: clip;
        background: var(--color-heading);
        color: var(--color-text-invert);
    }

    .quote-band__motif { position: absolute; color: var(--brand-sage); }
    .quote-band__motif--stem { right: -1.5rem; bottom: -2.5rem; width: 13rem; opacity: 0.35; }
    .quote-band__motif--sprig { left: 1.5rem; top: 2rem; width: 11rem; opacity: 0.3; }

    .quote-band__inner {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-5);
        text-align: center;
    }

    .quote-band__kicker {
        margin: 0;
        font-size: var(--text-xs);
        font-weight: var(--font-weight-bold);
        letter-spacing: var(--tracking-wide);
        text-transform: uppercase;
        color: var(--brand-apricot);
    }

    .quote-band__quote {
        margin: 0;
        max-width: 26ch;
        font-family: var(--font-display);
        font-style: italic;
        font-size: var(--text-h2);
        line-height: 1.35;
        color: var(--color-text-invert);
    }

    .quote-band__body {
        margin: 0;
        max-width: 62ch;
        font-size: var(--text-lead);
        line-height: var(--line-height-base);
        color: var(--brand-sage-pale);
    }

    @media (prefers-reduced-motion: reduce) { .quote-band__motif { transition: none; } }
}