.footer {
    width: 100%;
    background: #191919
}

.footer .inner {
    padding-top: clamp(6.25rem, 12.0773vw + 3.5326rem, 12.5rem);
    padding-bottom: 0
}

@media(min-width: 1024px) {
    .footer .inner {
        padding-top: 200px
    }
}

.footer .inner .nav {
    margin-bottom: 40px;
    align-items: flex-start
}

@media(min-width: 1024px) {
    .footer .inner .nav {
        margin-bottom: 80px
    }
}

.footer .inner .nav .col {
    padding-bottom: 40px
}

@media(min-width: 1024px) {
    .footer .inner .nav .col {
        padding-right: 37px
    }
}

.footer .inner .nav .col.col--logo {
    padding-top: 2px;
    margin-bottom: clamp(0rem, 4.8309vw + -1.087rem, 2.5rem)
}

.footer .inner .nav .col.col--products,
.footer .inner .nav .col.col--info {
    display: flex;
    flex-direction: column
}

.footer .inner .nav .col .logo {
    display: inline-block
}

.footer .inner .nav .col .logo img {
    height: 36px;
    width: auto
}

.footer .inner .nav .col .section {
    margin-bottom: clamp(2.5rem, 4.8309vw + 1.413rem, 5rem)
}

.footer .inner .nav .col .section:last-child {
    margin-bottom: 0
}

.footer .inner .nav .col .section .heading {
    font-family: var(--font-helvetica-now-display), "Helvetica Now Display", "Helvetica Neue", Arial, sans-serif;
    font-size: clamp(0.875rem, 0.2415vw + 0.8207rem, 1rem);
    font-weight: 700;
    line-height: 130%;
    color: #979797;
    margin: 0 0 clamp(0.625rem, 2.4155vw + 0.0815rem, 1.875rem);
    letter-spacing: 0
}

.footer .inner .nav .col .section .links {
    list-style: none;
    margin: 0 0 0 20px;
    padding: 0;
    display: flex;
    flex-direction: column
}

.footer .inner .nav .col .section .links li {
    line-height: normal;
    margin-bottom: 4px;
    color: #fff;
    position: relative
}

.footer .inner .nav .col .section .links li.indent {
    padding-left: 20px
}

.footer .inner .nav .col .section .links li::before {
    content: ">";
    padding-right: 15px;
    font-weight: 300;
    position: absolute;
    color: #fff;
    left: -20px
}

.footer .inner .nav .col .section .links li a {
    font-family: var(--font-helvetica-now-display), "Helvetica Now Display", "Helvetica Neue", Arial, sans-serif;
    font-size: clamp(1rem, 0.2415vw + 0.9457rem, 1.125rem);
    font-weight: 700;
    font-style: normal;
    letter-spacing: -0.48px;
    text-decoration: none;
    color: inherit
}

.footer .inner .nav .col .section .links li a:hover {
    color: #979797
}

.footer .inner .bottom {
    border-top: 1px solid hsla(0, 0%, 100%, .12);
    padding: 30px 0 50px
}

@media(min-width: 1024px) {
    .footer .inner .bottom {
        padding-bottom: 40px
    }
}

.footer .inner .bottom .social {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 20px
}

.footer .inner .bottom .social .social-link {
    display: flex;
    align-items: center
}

.footer .inner .bottom .social .social-link img {
    height: 16px;
    width: auto
}

.footer .inner .bottom .social .social-link:hover {
    opacity: .7
}

.footer .inner .bottom .legal {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px
}

@media(min-width: 1024px) {
    .footer .inner .bottom .legal {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        flex-wrap: wrap
    }
}

.footer .inner .bottom .legal .legal-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start
}

@media(min-width: 1024px) {
    .footer .inner .bottom .legal .legal-links {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 24px
    }
}

.footer .inner .bottom .legal .legal-links .legal-link {
    font-family: var(--font-helvetica-now-display), "Helvetica Now Display", "Helvetica Neue", Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.36px;
    text-transform: capitalize;
    text-decoration: none
}

.footer .inner .bottom .legal .legal-links .legal-link:hover {
    color: #979797
}

.footer .inner .bottom .legal .copyright {
    font-family: var(--font-helvetica-now-display), "Helvetica Now Display", "Helvetica Neue", Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.36px;
    margin: 0
}

@media(min-width: 1024px) {
    .footer .inner .bottom .legal .copyright {
        white-space: nowrap
    }
}