/* =====================================================
   TESTIMONIALS HERO — "QUOTE CARD"
   Same family as the experts hub: a light-blue banner, a big blue label as
   the left headline, and the shared compact blue stats card that sits half
   inside the banner. Its own identity comes from a giant faint quotation-mark
   motif and a white "quote card" holding the headline. The half-inside stats
   card is kept identical to contact / resources / experts for a consistent UX.
===================================================== */

.testimonials-hero-banner{
    position:relative;
    overflow:hidden;
    width:100%;
    background:#e9f1fc;
    text-align:left;
    /* Top padding clears the fixed nav pill. No stats card on this page, so the
       bottom padding is a normal band rather than room for a half-inside card. */
    padding:78px 0 48px;
}

/* Signature motif: a giant faint quotation mark bleeding off the top-right. */
.testimonials-hero-banner::before{
    content:"\201C";
    position:absolute;
    top:-0.36em;
    right:3%;
    z-index:0;
    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(200px,30vw,420px);
    line-height:1;
    color:rgba(47,103,183,.10);
    pointer-events:none;
}

/* Faint blue glow highlights in the top corners. */
.testimonials-hero-banner::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    background:
        radial-gradient(circle at 15% 15%,rgba(47,103,183,.06),transparent 35%),
        radial-gradient(circle at 85% 20%,rgba(47,103,183,.06),transparent 30%);
    pointer-events:none;
}

.testimonials-hero-banner__content{
    position:relative;
    z-index:5;
    /* Mirror the site .container so the banner copy lines up with the grids
       and stats below it. */
    width:100%;
    max-width:var(--container);
    margin-inline:auto;
    padding-inline:var(--space-6);
}

/* Stacked layout: the label centred at the top, the italic intro centred
   below it, and the headline right-aligned beneath that. */
.testimonials-hero-banner__content--split{
    display:block;
}

/* The label is the centred headline at the top of the stack. */
.testimonials-hero-banner__tag{
    color:#2F67B7;
    font-size:clamp(1.9rem,1rem + 3vw,3rem);
    font-weight:700;
    letter-spacing:1px;
    line-height:1.05;
    text-transform:uppercase;
    text-align:center;
    margin:0 0 14px;
    opacity:0;
    transform:scale(.8);
    animation:testimonialsTagPopup .9s ease forwards;
}

@keyframes testimonialsTagPopup{
    0%{opacity:0;transform:scale(.8) translateY(20px);}
    70%{transform:scale(1.05) translateY(-3px);}
    100%{opacity:1;transform:scale(1) translateY(0);}
}

/* Centred italic intro, directly under the label. */
.testimonials-hero-banner__description{
    margin:16px auto 0;
    max-width:680px;
    color:var(--fg-muted,#556);
    font-size:17px;
    font-style:italic;
    line-height:1.6;
    text-align:center;
}

/* No card in this layout — the headline is plain text pushed to the right. */
.testimonials-hero-banner__box{
    position:relative;
    width:auto;
    max-width:none;
    background:none;
    border:none;
    border-radius:0;
    padding:0;
    margin-top:clamp(22px,3vw,36px);
    box-shadow:none;
}

.testimonials-hero-banner__box::before{
    content:none;
}

.testimonials-hero-banner__title{
    margin:0;
    font-weight:800;
    line-height:1.15;
    letter-spacing:-0.015em;
}

/* Right-aligned, bold, in the brand blue so it stands apart from the navy /
   grey copy above it. */
.testimonials-hero-banner__title--boxed{
    color:#2F67B7;
    font-weight:800;
    font-size:clamp(1.5rem,1rem + 1.8vw,2.1rem);
    line-height:1.25;
    text-align:right;
}

.testimonials-hero-banner__title--boxed .testimonials-hero-banner__line{
    display:block;
}

.testimonials-hero-banner__line{
    /* inline-block keeps the phrase intact while still allowing the slide-in
       transform (a plain inline span would ignore it). */
    display:inline-block;
    opacity:0;
    transform:translateX(-120px);
    animation:testimonialsHeadingSlide 1s ease forwards;
}

.testimonials-hero-banner__line:nth-child(2){
    animation-delay:.35s;
}

.testimonials-hero-banner__line--accent{
    color:#2F67B7;
}

@keyframes testimonialsHeadingSlide{
    from{opacity:0;transform:translateX(-120px);}
    to{opacity:1;transform:translateX(0);}
}

@media (prefers-reduced-motion: reduce){
    .testimonials-hero-banner__tag,
    .testimonials-hero-banner__line{
        opacity:1;
        transform:none;
        animation:none;
    }
}


/* =====================================================
   SHARED COMPACT BLUE STATS CARD
   Identical to contact / resources / experts so the "card half inside the
   banner" reads the same across the whole site. Sits half inside the banner.
===================================================== */

.testimonials-hero-stats{
    background:#2F67B7;
    border-radius:26px;
    max-width:760px;
    /* Overlap the banner's lower edge. */
    margin:-55px auto 0;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    overflow:hidden;
    box-shadow:0 18px 60px rgba(0,0,0,.12);
    position:relative;
    z-index:20;
}

.testimonials-hero-stat{
    padding:24px 16px;
    text-align:center;
    position:relative;
}

.testimonials-hero-stat:not(:last-child)::after{
    content:"";
    position:absolute;
    right:0;
    top:20%;
    height:60%;
    width:1px;
    background:rgba(255,255,255,.22);
}

.testimonials-hero-stat h2{
    margin:0;
    color:#fff;
    font-size:34px;
    font-weight:800;
}

.testimonials-hero-stat p{
    margin-top:6px;
    font-size:14px;
    color:rgba(255,255,255,.82);
}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:860px){
    .testimonials-hero-banner__content--split{
        grid-template-columns:1fr;
        gap:26px;
    }
    .testimonials-hero-banner__box{
        max-width:100%;
    }
}

@media(max-width:900px){
    .testimonials-hero-banner{
        padding:84px 0 44px;
    }
    .testimonials-hero-banner__description{
        font-size:16px;
    }
    .testimonials-hero-stats{
        grid-template-columns:repeat(2,1fr);
    }
    .testimonials-hero-stat:nth-child(2)::after{
        display:none;
    }
}

@media(max-width:640px){
    .testimonials-hero-banner__description{
        font-size:15px;
    }
    .testimonials-hero-stats{
        grid-template-columns:1fr;
    }
    .testimonials-hero-stat::after{
        display:none;
    }
}

/* =====================================================
   INLINE VIDEO CARDS — click a poster to play the real
   YouTube video in place (testimonials / mantras / spotlight)
===================================================== */
.vid-card{
    position:relative;
    cursor:pointer;
    overflow:hidden;
}
.vid-card:focus-visible{
    outline:3px solid #0f75ba;
    outline-offset:2px;
}
.vid-card__play{
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    pointer-events:none;
    transition:background .25s ease;
    background:rgba(12,24,45,.18);
}
.vid-card__play svg{
    width:34px;
    height:34px;
    color:#0f75ba;
    background:rgba(255,255,255,.94);
    border-radius:50%;
    padding:14px;
    box-sizing:content-box;
    box-shadow:0 10px 30px rgba(12,24,45,.35);
    transition:transform .2s ease, background .2s ease;
}
.vid-card:hover .vid-card__play{ background:rgba(12,24,45,.30); }
.vid-card:hover .vid-card__play svg{ transform:scale(1.08); color:#0c5e97; }
.vid-card[data-playing="true"]{ cursor:default; }
.vid-card__frame{
    display:block;
    width:100%;
    aspect-ratio:16/9;
    height:100%;
    min-height:200px;
    border:0;
}