*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Wix Madefor Text","Segoe UI",Arial,Helvetica,sans-serif;
}

html{
    scroll-behavior:smooth;
}

body{
    background:#f4f4f2;
    color:#08173a;
    font-size:16px;
    line-height:1.5;
}

a{
    color:inherit;
}

.about-hero{
    padding:80px 5% 72px;
    animation: fadeUp .6s ease both;
}

.tagline,
.section-label{
    font-size:12px;
    letter-spacing:8px;
    text-transform:uppercase;
}

.tagline{
    margin-bottom:18px;
}

.about-hero h1{
    font-family:"Wix Madefor Display","Segoe UI",Arial,Helvetica,sans-serif;
    font-size:clamp(54px, 7vw, 92px);
    line-height:.95;
    margin-bottom:0;
}

.hero-copy{
    max-width:700px;
    font-size:18px;
    line-height:1.6;
}

.who-we-are{
    width:90%;
    margin:0 auto;
    background:#dfe7ef;
    padding:72px 5% 60px;
    animation: fadeUp .6s ease .08s both;
}

.content-grid{
    display:block;
    margin-top:26px;
}

.left h2,
.why-us h2{
    font-family:"Wix Madefor Display","Segoe UI",Arial,Helvetica,sans-serif;
}

.left h2{
    font-size:clamp(44px, 5.5vw, 72px);
    line-height:.95;
}

.left{
    margin-bottom:24px;
}

.line{
    height:1px;
    background:#08173a;
    width:100%;
    margin:0 0 34px;
}

.right{
    text-align:center;
}

.right p{
    font-size:18px;
    line-height:1.65;
    margin:0 auto 22px;
    max-width:1060px;
}

.why-us{
    padding:88px 5% 100px;
    animation: fadeUp .6s ease .16s both;
}

.why-us h2{
    font-size:clamp(44px, 5.5vw, 72px);
    margin:12px 0 40px;
}

.cards{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:30px;
}

.card{
    background:#dfe7ef;
    padding:42px;
    animation: cardRise .6s ease both;
}

.cards .card:nth-child(2) { animation-delay: .08s; }
.cards .card:nth-child(3) { animation-delay: .16s; }
.cards .card:nth-child(4) { animation-delay: .24s; }

.card span{
    display:block;
    font-family:"Wix Madefor Display","Segoe UI",Arial,Helvetica,sans-serif;
    font-size:clamp(42px, 5vw, 72px);
    font-weight:900;
    color:#1e2f66;
    margin-bottom:14px;
}

.card h3{
    font-family:"Wix Madefor Display","Segoe UI",Arial,Helvetica,sans-serif;
    font-size:24px;
    margin-bottom:18px;
}

.card p{
    font-size:16px;
    line-height:1.7;
    color:#4f5668;
}

@media(max-width:900px){
    .about-hero{
        padding:50px 5% 40px;
    }

    .about-hero h1{
        font-size:clamp(36px, 9vw, 56px);
    }

    .hero-copy{
        font-size:16px;
    }

    .who-we-are{
        width:100%;
        padding:40px 5%;
    }

    .left h2,
    .why-us h2{
        font-size:clamp(32px, 8vw, 48px);
    }

    .why-us{
        padding:50px 5%;
    }

    .cards{
        grid-template-columns:1fr;
        gap:20px;
    }

    .card{
        padding:24px;
    }
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes cardRise {
    from { opacity: 0; transform: translateY(22px); }
    to { opacity: 1; transform: translateY(0); }
}