:root{
    --panel:#eaeaea;
    --ink:#222;
    --muted:#6f757a;
    --card:#ffffff;
}

.testimonials{
    --bg-url: url('');
    --bg-w: 1600;
    --bg-h: 900;

    width: 100%;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;

    background-image: var(--bg-url);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    padding: 50px 0;

    min-height: calc(100vw * var(--bg-h) / var(--bg-w));

    display: flex;
    flex-direction: column;
    justify-content: center;

    border-left: 1px solid rgba(0,0,0,.06);
    border-right: 1px solid rgba(0,0,0,.06);
    color: var(--ink);
}



.t-row{ position: relative; z-index: 1; }
.t-g{ row-gap: 1.5rem; }

/* Testimonials fixed at 300×300 */
.t-card{
    position: relative;
    background: var(--card);
    border-radius: 14px;
    box-shadow: 0 12px 28px rgba(0,0,0,.12);
    padding: 24px;
    width: 320px;
    height: 320px;
    display: flex;
    flex-direction: column;
    margin-inline: auto; /* keep centered */
}

.t-card::before{
    content:"“";
    position:absolute;
    top:.1rem;
    left:.6rem;
    font-size:58px;
    line-height:1;
    color:rgba(0,0,0,.10);
    font-weight:700;
    pointer-events: none;
}

.t-copy{
    margin: 14px 0 18px;
    font-size: 1rem;
    line-height: 1.6;
    color:#2a2a2a;
    flex: 1 1 auto;
    overflow: hidden;
}
.btn-dark{
    display: inline-block;
    text-decoration: none;
    padding: .6rem 1.5rem;
    border-radius: 999px;
    font-weight: 700;
    transition: opacity .2s ease, transform .15s ease, box-shadow .15s ease;
    box-shadow: 0 6px 16px rgba(0,0,0,.35);
    max-width:500px;
}
.t-name{ font-weight:700; }
.t-role{ color:var(--muted); font-size:.9rem; }

.t-hash{
    position:absolute;
    right:18px;
    bottom:-18px;
    width:112px;
    height:100px;
    background:repeating-linear-gradient(to right, #111 0 2px, transparent 2px 4px);
    filter:drop-shadow(0 3px 4px rgba(0,0,0,.15));
    opacity:.95;
}

/* Rotate only the SECOND card’s hash */
.testimonials .row .col:nth-child(2) .t-hash{
    transform: rotate(90deg);
    transform-origin: center;
}
.t-card--heading .t-heading {
    margin: 0 0 .5rem;
    line-height: 1.15;
    margin-right: auto;
}
.t-card--heading .t-heading {
    margin: 0 0 .5rem;
    line-height: 1.15;
    margin-right: auto;
}
/* Make row stretch columns to the tallest item (helps mixed cards) */
.t-g { align-items: stretch; }

/* Heading block: same footprint as testimonial (300×300) + vertical centering */
.t-card--heading{
    width: 100%;
    height: 100%;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;   /* <- vertical center */
    margin-inline: auto;       /* keep centered like .t-card */
}

/* Eyebrow now uses .t-eyebrow */
.t-card--heading .t-heading .t-eyebrow{
    font-weight: 600;
    text-transform: uppercase;
}

@media (max-width: 991.98px){
    .testimonials{
        min-height: auto;
    }
    .t-card--heading{
        max-width:600px;
        text-align:center;
    }
    .t-card--heading .t-heading{
    margin-left: auto;
    margin-right: auto;
    }
}
@media (max-width: 768px){
    .testimonials{
        min-height: auto;
    }
    .t-card--heading{
        max-width:300px;
        text-align:center;
    }
    .t-card--heading .t-heading{
        margin-left: auto;
        margin-right: auto;
    }
}