/* ==========================
   ABOUT
========================== */

.about{

    padding:100px 0;

    background:#fff;

}

.about__grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

/* ==========================
   VIDEO
========================== */

.about__frame{

    overflow:hidden;

    border-radius:24px;

    box-shadow:0 20px 45px rgba(0,0,0,.12);

}

.about__video{

    width:100%;

    height:100%;

    display:block;

    aspect-ratio:4/5;

    object-fit:cover;

}

/* ==========================
   CONTENT
========================== */

.about__content h2{

    margin:15px 0 20px;

    font-size:48px;

    line-height:1.1;

}

.about__content p{

    margin-bottom:35px;

    line-height:1.8;

    color:#666;

}

.btp-eyebrow{

    display:inline-block;

    color:#FF2D7A;

    font-weight:700;

    margin-bottom:10px;

}

/* ==========================
   STATS — BOX FRAME (pink border visible by default)
========================== */

.about__stats{

    display:flex;

    gap:20px;

    margin-bottom:40px;

}

.about__stat-box{

    flex:1;

    text-align:center;

    padding:22px 14px;

    border:1.5px solid #FF2D7A;

    border-radius:16px;

    background:#fff;

    transition:transform .2s ease, box-shadow .2s ease;
}

.about__stat-box:hover{

    transform:translateY(-4px);

    box-shadow:0 12px 26px rgba(255,45,122,.18);

}

/* number badge — pink bg, only place accent bg is used */

.about__stat-box strong{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:64px;

    padding:6px 12px;

    margin-bottom:10px;

    border-radius:999px;

    background:#FF2D7A;

    color:#fff;

    font-size:22px;

    font-weight:700;

    line-height:1.2;

}

.about__stat-box small{

    display:block;

    color:#666;

    font-size:14px;

    font-weight:500;

}

/* ==========================
   BUTTON — MATCH HERO BUTTON
========================== */

.about__content .btp-btn{

    height:58px;

    padding:0 34px;

    border-radius:999px;

    font-size:15px;

    font-weight:700;

}

/* ==========================
   REDUCED MOTION
========================== */

@media(prefers-reduced-motion:reduce){

    .about__stat-box{

        transition:none;

    }

}

/* ==========================
   TABLET
========================== */

@media(max-width:991px){

    .about{

        padding:80px 0;

    }

    .about__grid{

        display:flex;

        flex-direction:column;

    }

    .about__content{

        order:1;

        text-align:center;

    }

    .about__visual{

        order:2;

        width:100%;

    }

    .about__stats{

        justify-content:center;

    }

}

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

@media(max-width:767px){

    .about{

        padding:60px 0;

    }

    .about__content h2{

        font-size:34px;

    }

    .about__stats{

        flex-wrap:wrap;

        gap:14px;

    }

    .about__stat-box{

        flex:1 1 calc(50% - 14px);

        min-width:110px;

        padding:16px 10px;

    }

    .about__stat-box strong{

        font-size:18px;

        min-width:52px;

    }

    .about__video{

        aspect-ratio:16/10;

    }

    .btp-btn{

        width:100%;

        justify-content:center;

    }

}