:root {
    --blue-900: #0d2446;
    --blue-800: #123a66;
    --blue-700: #1f4f84;
    --brand-red-900: #7f0d1d;
    --brand-red-800: #9f1239;
    --brand-red-700: #b00020;
    --brand-red-600: #c1121f;
    --brand-red-100: #fde8ea;
    --gray-900: #0f172a;
    --gray-700: #334155;
    --gray-600: #475569;
    --gray-300: #cbd5e1;
    --gray-200: #e2e8f0;
    --gray-100: #f1f5f9;
    --white: #fff;
    --shadow-sm: 0 3px 12px rgba(15,23,42,.08);
    --shadow-md: 0 16px 40px rgba(15,23,42,.18);
    --radius: 14px;
}

/* =========================
   FOOTER BASE
========================= */
.site-footer {
    background: var(--gray-900);
    color: #d1d5db;
    padding: 2rem 0 .9rem;
    text-align: left;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.2fr .9fr .9fr;
    gap: 1.15rem 2rem;
    align-items: start;
}

.footer-logo {
    height: 42px;
    width: auto;
    margin-bottom: .65rem;
}

.footer-muted {
    margin: 0;
    color: #cbd5e1;
}

.site-footer h3 {
    margin: 0 0 .55rem;
    color: var(--white);
}

.site-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .35rem;
}

    .site-footer ul li a {
        display: inline-block;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: #d1d5db;
        transition: color .2s ease;
        text-decoration: none;
    }

.site-footer a:hover {
    color: var(--white);
}

.footer-bottom {
    margin-top: .85rem;
    padding-top: .85rem;
    border-top: 1px solid rgba(255,255,255,.08);
    text-align: center;
    font-size: .92rem;
    color: #94a3b8;
}

/* =========================
   TABLET (2x2 layout)
========================= */
@media (max-width: 991px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        text-align: center;
    }

    .site-footer {
        text-align: center;
    }

    .footer-logo {
        margin: 0 auto .65rem;
    }

    .site-footer ul {
        justify-items: center;
    }
}

/* =========================
   MOBILE (1 column center)
========================= */
@media (max-width: 576px) {
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .site-footer {
        text-align: center;
    }

    .footer-logo {
        display: block;
        margin: 0 auto .65rem;
    }

    .site-footer ul li a {
        display: block;
        padding: .2rem 0;
    }
}