.site-footer {
    margin-top: var(--space-40);
    padding: var(--space-64) clamp(var(--layout-gutter-mobile), 16.8vw, 243px) var(--space-32);
    color: var(--color-text-inverse);
    background: var(--color-bg-inverse);
    transition: padding var(--transition-base);
}

.footer-inner {
    width: min(100%, var(--layout-container-narrow));
    margin: 0 auto;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-40);
    margin-bottom: var(--space-48);
    transition:
        gap var(--transition-base),
        margin-bottom var(--transition-base);
}

.footer-brand,
.footer-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-10);
    transition:
        gap var(--transition-base),
        padding var(--transition-base);
}

.footer-logo {
    width: 127px;
    display: inline-flex;
    margin-bottom: var(--space-4);
    transition:
        width var(--transition-base),
        margin var(--transition-base);
}

.footer-logo img {
    width: 100%;
    height: auto;
}

.footer-brand p,
.footer-column a,
.footer-bottom,
.footer-legal a {
    color: var(--color-primary-60);
    font: var(--font-caption-loose);
    letter-spacing: var(--tracking-wide);
    text-decoration: none;
}

.footer-brand p {
    max-width: 520px;
    white-space: normal;
    transition:
        max-width var(--transition-base),
        color var(--transition-base);
}

.footer-column a {
    position: relative;
    width: fit-content;
    transition: color var(--transition-base);
}

.footer-column a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(var(--space-4) * -1);
    height: var(--space-1);
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 260ms var(--ease-out);
}

.footer-column a:hover {
    color: var(--color-primary);
}

.footer-column a:hover::after {
    transform: scaleX(1);
}

.footer-contact a,
.footer-contact a:hover {
    color: var(--color-primary-60);
}

.footer-contact a::after {
    display: none;
}

.footer-column h2 {
    margin: 0;
    color: var(--color-text-inverse);
    font: var(--font-label);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.footer-column {
    gap: var(--space-10);
}

.footer-column h2 {
    margin-bottom: var(--space-6);
}

.footer-socials {
    display: flex;
    gap: var(--space-8);
    transition:
        gap var(--transition-base),
        padding var(--transition-base);
}

.footer-socials a {
    width: var(--size-social);
    height: var(--size-social);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    color: var(--color-text-inverse);
    background: var(--color-surface-20);
    font: var(--font-caption);
    text-decoration: none;
    transition:
        color var(--transition-base),
        background-color var(--transition-base);
}

.footer-socials a:hover {
    color: var(--color-surface);
    background: var(--color-primary);
}

.footer-socials img {
    width: var(--size-icon-sm);
    height: var(--size-icon-sm);
    display: block;
    transition: filter var(--transition-base);
}

.footer-socials a:hover img {
    filter: brightness(0) saturate(100%) invert(27%) sepia(85%) saturate(2059%) hue-rotate(215deg) brightness(89%) contrast(94%);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: var(--space-32);
    padding-top: var(--space-32);
    border-top: var(--border-width) solid var(--color-primary-20);
    transition:
        gap var(--transition-base),
        padding var(--transition-base);
}

.footer-bottom p {
    margin: 0;
}

.footer-legal {
    display: flex;
    gap: var(--space-20);
}

@media (max-width: 900px) {
    .site-footer {
        padding: var(--space-48) var(--layout-gutter-mobile) var(--space-32);
    }

    .footer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-40);
        margin-bottom: var(--space-40);
    }

    .footer-brand {
        grid-column: 1 / -1;
        max-width: none;
        align-items: center;
        gap: var(--space-10);
        margin-bottom: 0;
        text-align: center;
    }

    .footer-socials {
        justify-content: center;
        padding-top: 0;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: center;
        gap: var(--space-24);
        padding-top: var(--space-40);
        text-align: center;
    }

    .footer-legal {
        justify-content: center;
        flex-wrap: wrap;
    }
}

@media (max-width: 560px) {
    .site-footer {
        padding-top: var(--space-40);
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--space-32);
    }

    .footer-brand,
    .footer-column {
        gap: var(--space-12);
    }

    .footer-brand {
        max-width: none;
    }

    .footer-column {
        padding-top: var(--space-24);
        border-top: var(--border-width) solid var(--color-primary-20);
    }

    .footer-legal {
        flex-direction: column;
        gap: var(--space-10);
    }
}