:root{
 --msa-navy:#082b57;--msa-navy-dark:#041d3b;--msa-gold:#d9aa3d;--msa-gold-light:#f3d27b; --msa-dark-golden:#6E5411;
 --msa-light:#f5f8fc;--msa-muted:#6c7a89;
}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;background:var(--msa-light);color:#1d2b3a}
a{text-decoration:none}
.text-primary{color:var(--msa-navy)!important}
.bg-primary{background-color:var(--msa-navy)!important}
.btn-primary{background-color:var(--msa-navy);border-color:var(--msa-navy)}
.btn-primary:hover,.btn-primary:focus{background-color:var(--msa-navy-dark);border-color:var(--msa-navy-dark)}
.btn-gold{background:var(--msa-gold);border-color:var(--msa-gold);color:#111;font-weight:700}
.btn-gold:hover{background:var(--msa-gold-light);border-color:var(--msa-gold-light);color:#111}
.brand-logo{width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid var(--msa-gold)}
.navbar .nav-link{font-weight:600;color:#24354a;padding:.65rem .65rem!important}
.navbar .nav-link:hover{color:var(--msa-navy)}
.navbar{z-index:1030}
.hero{min-height:650px;display:flex;align-items:center;background:linear-gradient(90deg,rgba(4,29,59,.94),rgba(8,43,87,.68)),url('../images/msa-impact-logo.jpg') center/cover no-repeat}
.hero-content{color:#fff;max-width:760px}
.hero h1{font-size:clamp(2.5rem,5vw,4.7rem);font-weight:800;line-height:1.05}
.hero p{font-size:1.15rem;color:rgba(255,255,255,.88);max-width:650px}
.eyebrow,.page-hero span,.section-kicker{font-size:.8rem;letter-spacing:.16em;font-weight:800;color:var(--msa-gold)}
.section{padding:80px 0}
.section-head{max-width:760px;margin:0 auto 42px}
.section-head h2{color:var(--msa-dark-golden);font-weight:800}
.dark .section-head h2{color:var(--msa-gold);font-weight:800}
.page-hero{padding:85px 0;background:linear-gradient(135deg,#eef4fa,#fff);border-bottom:1px solid #e4eaf1}
.page-hero h1{max-width:900px;color:var(--msa-navy);font-size:clamp(2.2rem,4.5vw,4rem);font-weight:800}
.info-card,.card,.verify-card{background:#fff;border:1px solid #e1e7ee;border-radius:18px;box-shadow:0 12px 35px rgba(8,35,70,.07)}
.info-card{height:100%;padding:28px;transition:.2s ease}
.info-card:hover{transform:translateY(-4px);box-shadow:0 18px 42px rgba(8,35,70,.12)}
.info-card h3{color:var(--msa-navy);font-weight:750}
.card-img{width:100%;height:210px;object-fit:cover;border-radius:12px}
.feature-img{max-height:550px;width:100%;object-fit:cover;border-radius:16px}
.section.dark{background:var(--msa-navy-dark);color:#fff}
.stats>div{background:#fff;border:1px solid #e1e7ee;border-radius:14px;padding:22px;height:100%}
.stats b{display:block;color:var(--msa-navy);font-size:1.25rem}
.doc-list{background:#fff;border:1px solid #e1e7ee;border-radius:14px;padding:22px;margin-bottom:20px}
.doc-row{display:flex;justify-content:space-between;gap:15px;align-items:center;padding:13px 0;border-bottom:1px solid #edf0f3}
.doc-row:last-child{border-bottom:0}
.verify-card{padding:35px;text-align:center}
.verified{display:inline-block;padding:7px 15px;background:#e7f7ed;color:#176b36;border-radius:30px;font-weight:800}
.gallery-grid figure{background:#fff;border:1px solid #e1e7ee;border-radius:14px;overflow:hidden}
.gallery-grid img{width:100%;height:240px;object-fit:cover}
.site-footer{background:var(--msa-navy-dark)}
.site-footer a{display:block;color:#bdcad9;margin:.45rem 0;font-size:.93rem}
.site-footer a:hover{color:#fff}
.footer-logo{width:58px;height:58px;border-radius:50%;object-fit:cover;border:2px solid var(--msa-gold)}
.auth-page{min-height:75vh;display:flex;align-items:center;padding:70px 0}
.auth-card{width:min(480px,100%);background:#fff;border:1px solid #e1e7ee;border-radius:18px;padding:35px;box-shadow:0 15px 45px rgba(8,35,70,.09)}
.auth-logo{width:95px;height:95px;border-radius:50%;object-fit:cover;border:2px solid var(--msa-gold);display:block;margin:0 auto 20px}
.form-control,.form-select{border-color:#dce3ea;padding:.7rem .8rem}
.form-control:focus,.form-select:focus{border-color:var(--msa-navy);box-shadow:0 0 0 .2rem rgba(8,43,87,.1)}
.table-wrap{overflow:auto}
table{background:#fff}
@media(max-width:575px){.hero{min-height:580px}.section{padding:60px 0}.doc-row{align-items:flex-start;flex-direction:column}}


/* --- Header logo sizing fix --- */
.site-header .navbar{
    min-height:76px;
}
.site-header .navbar-brand{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    white-space:nowrap;
    line-height:1;
    padding-top:0 !important;
    padding-bottom:0 !important;
}
.site-header .navbar-brand .brand-logo{
    width:58px !important;
    height:58px !important;
    min-width:58px !important;
    max-width:58px !important;
    min-height:58px !important;
    max-height:58px !important;
    display:block !important;
    object-fit:cover !important;
    object-position:center !important;
    border-radius:50% !important;
    flex:0 0 58px !important;
}
.site-header .navbar-brand span{
    font-size:1.08rem;
    line-height:1;
}
.site-header .navbar .container{
    min-height:72px;
}
@media(max-width:991px){
    .site-header .navbar-brand .brand-logo{
        width:50px !important;
        height:50px !important;
        min-width:50px !important;
        max-width:50px !important;
        min-height:50px !important;
        max-height:50px !important;
        flex-basis:50px !important;
    }
    .site-header .navbar .container{min-height:64px}
}

/* MSA IMPACT - Responsive 3-2-1 Cards Layout */
main .cards-3 {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px !important;
    width: 100%;
    align-items: stretch;
}

main .cards-3 > .info-card {
    display: block;
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    height: 100%;
    margin: 0 !important;
    box-sizing: border-box;
}

main .cards-3 > .info-card p {
    margin-bottom: 0;
}

/* Tablet: 2 columns */
@media (max-width: 991px) {
    main .cards-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 20px !important;
    }
}

/* Mobile: 1 column */
@media (max-width: 575px) {
    main .cards-3 {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 16px !important;
    }
}