/* =========================================================
   FOOTER — BASE (1920px DESIGN MEASUREMENTS - WHITE THEME)
   ========================================================= */

.footer,
.footer * {
    box-sizing: border-box;
}

.footer {
    width: 100%;
    background-color: var(--color-white);
    color: var(--color-black);
    position: relative;
    overflow: hidden;
    padding-top: 6.25rem;
    padding-bottom: 0;
}

.footer__container {
    width: 100%;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    position: relative;
}


/* =========================================================
   CTA BANNER (BLUE ROUNDED RECTANGLE)
   ========================================================= */

.footer__cta {
    width: 100%;
    min-height: 9.375rem;
    background: var(--color-blue);
    border-radius: 1.25rem;
    padding: 1.5rem 1.875rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.875rem;
    margin-bottom: 5rem;
    position: relative;
    overflow: hidden;
    box-shadow: none;
}

.footer__cta-content {
    display: flex;
    align-items: center;
    gap: 1.75rem;
}

.footer__cta-avatar-wrapper {
    position: relative;
    width: 5.625rem;
    height: 5.625rem;
    flex-shrink: 0;
    margin-left: 1.25rem;
}

.footer__cta-layer {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: 0.25rem solid #ffffff;
    pointer-events: none;
    box-sizing: border-box;
}

/* SMALL (BACK) */
.footer__cta-layer--1 {
    width: 4.625rem;
    height: 4.625rem;
    border-radius: 0.875rem;
    left: -1.125rem;
    background: rgba(255, 255, 255, 0.4);
    opacity: 0.65;
    z-index: 1;
}

/* MEDIUM (MIDDLE) */
.footer__cta-layer--2 {
    width: 5.125rem;
    height: 5.125rem;
    border-radius: 1rem;
    left: -0.625rem;
    background: rgba(255, 255, 255, 0.55);
    opacity: 0.85;
    z-index: 2;
}

/* LARGE (FRONT) */
.footer__cta-avatar {
    width: 5.625rem;
    height: 5.625rem;
    border-radius: 1.125rem;
    overflow: hidden;
    border: 0.25rem solid #ffffff;
    position: relative;
    z-index: 3;
    background-color: #202020;
    box-shadow: none;
}

.footer__cta-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.footer__cta-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.footer__cta-title {
    color: #ffffff;
    font-size: 1.625rem;
    font-weight: 600;
    line-height: 2.125rem;
    letter-spacing: 0;
    text-wrap: balance;
    max-width: 31.375rem;
    margin: 0;
}

.footer__cta-subtitle {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.625rem;
    letter-spacing: 0;
    opacity: 0.6;
    max-width: 34.75rem;
    margin: 0;
}

.footer__cta-button {
    background-color: #ffffff;
    color: #000000;
    font-family: var(--font-dm-sans, 'DM Sans', sans-serif);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0;
    width: 15.75rem;
    height: 3.125rem;
    border-radius: 0.625rem;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-decoration: none;
    transition: background-color 0.25s ease, transform 0.2s ease;
    box-shadow: none;
}

.footer__cta-button:hover {
    background-color: #ffffff;
    transform: translateY(-0.125rem);
    box-shadow: none;
}

.footer__cta-button:active {
    transform: translateY(0);
}


/* =========================================================
   MAIN FOOTER NAVIGATION (4 COLUMNS - WHITE THEME)
   ========================================================= */

.footer__main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 9.75rem;
    margin-bottom: 6.25rem;
}

/* BRAND COLUMN */
.footer__brand-col {
    width: 30.8125rem;
    max-width: 30.8125rem;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.footer__logo-link {
    display: inline-block;
    width: fit-content;
}

.footer__logo {
    width: 13.75rem;
    height: auto;
    display: block;
}

.footer__brand-description {
    color: #000000;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.875rem;
    letter-spacing: 0;
    opacity: 0.6;
    max-width: 30.8125rem;
    margin: 0;
}

.footer__socials {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-top: 0.25rem;
    width: fit-content;
}

.footer__social-link {
    width: 3.125rem;
    height: 3.125rem;
    border-radius: 50%;
    background-color: #f0f0f0;
    color: #111111;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.footer__social-link:hover {
    background-color: var(--color-blue);
    color: #ffffff;
    transform: translateY(-0.125rem);
}

/* NAV COLUMNS GRID */
.footer__nav-grid {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    gap: 3.75rem;
}

/* NAV COLUMNS */
.footer__nav-col {
    width: fit-content;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.footer__nav-title {
    color: var(--color-blue);
    font-size: 1.625rem;
    font-weight: 900;
    line-height: 2.125rem;
    letter-spacing: 0;
    margin: 0;
    opacity: 1;
}

.footer__nav-chevron {
    display: none;
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
    color: var(--color-blue);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.footer__nav-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer__nav-item {
    margin: 0;
    padding: 0;
}

.footer__nav-link {
    color: #000000;
    font-size: 1rem;
    font-weight: 400;
    line-height: 2.25rem;
    letter-spacing: 0;
    opacity: 0.6;
    text-decoration: none;
    display: inline-block;
    transition: opacity 0.2s ease, color 0.2s ease;
}

.footer__nav-link:hover {
    opacity: 1;
    color: var(--color-blue);
}


/* =========================================================
   WATERMARK & COPYRIGHT (FLUSH WITH BOTTOM, END-TO-END)
   ========================================================= */

.footer__bottom {
    width: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: calc(9.6875rem * 0.75);
    padding: 0;
}

.footer__bottom-container {
    width: 100%;
    max-width: min(calc(100% - 2rem), clamp(18rem, 79.1667vw, 95rem));
    margin-inline: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.25rem;
    position: relative;
    z-index: 2;
}

.footer__copyright {
    color: #000000;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.875rem;
    letter-spacing: 0;
    opacity: 0.6;
    margin: 0;
}

.footer__legal-links {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.footer__legal-link {
    color: #000000;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.875rem;
    letter-spacing: 0;
    opacity: 0.6;
    text-decoration: none;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.footer__legal-link:hover {
    color: var(--color-blue);
    opacity: 1;
}

.footer__watermark {
    position: absolute;
    bottom: -0.05em;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    font-size: 9.6875rem;
    font-weight: 900;
    line-height: 0.8;
    color: rgba(0, 0, 0, 0.035);
    letter-spacing: clamp(0.0625rem, 0.12vw, 0.15625rem);
    text-transform: uppercase;
    white-space: nowrap;
    text-align: center;
    pointer-events: none;
    user-select: none;
    z-index: 1;
    margin: 0;
    padding: 0;
}

/* Laptop widths need a wrapped footer layout; the full desktop column gaps
   leave too little room for the brand and three navigation columns. */
@media (min-width: 1024px) and (max-width: 1279px) {
    .footer {
        padding-top: 4rem;
    }

    .footer__cta {
        min-height: 7.5rem;
        gap: 1.25rem;
        padding: 1.25rem 1.5rem;
        margin-bottom: 3.75rem;
    }

    .footer__cta-content {
        flex: 1 1 auto;
        min-width: 0;
        gap: 1.25rem;
    }

    .footer__cta-avatar-wrapper {
        width: 4.5rem;
        height: 4.5rem;
        margin-left: 0.75rem;
    }

    .footer__cta-avatar {
        width: 4.5rem;
        height: 4.5rem;
    }

    .footer__cta-title {
        font-size: 1.375rem;
        line-height: 1.3;
    }

    .footer__cta-subtitle {
        font-size: 0.9375rem;
        line-height: 1.5;
    }

    .footer__cta-button {
        flex: 0 0 auto;
        width: 13rem;
        height: 3rem;
        font-size: 0.9375rem;
    }

    .footer__main {
        flex-direction: column;
        gap: 2.75rem;
        margin-bottom: 3.75rem;
    }

    .footer__brand-col {
        width: min(100%, 36rem);
        max-width: 36rem;
    }

    .footer__brand-description {
        max-width: 36rem;
        font-size: 0.9375rem;
        line-height: 1.6;
    }

    .footer__nav-grid {
        width: 100%;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(1.5rem, 3vw, 2.5rem);
    }

    .footer__nav-col {
        width: auto;
        min-width: 0;
    }

    .footer__nav-title {
        font-size: 1.375rem;
        line-height: 1.3;
    }

    .footer__nav-link {
        font-size: 0.9375rem;
        line-height: 1.8;
        white-space: normal;
    }

    .footer__bottom-container {
        max-width: min(calc(100% - 3rem), 75rem);
    }

    .footer__copyright,
    .footer__legal-link {
        font-size: 0.875rem;
        line-height: 1.5;
    }

    .footer__legal-links {
        gap: 1.5rem;
    }

    .footer__watermark {
        font-size: clamp(5.125rem, 8.07vw, 6.458312rem);
        bottom: -0.05em;
    }

}


/* =========================================================
   1280–1919px
   PROPORTIONAL DESKTOP SCALING (1920px -> 1280px)
   ========================================================= */

@media (min-width: 1280px) and (max-width: 1919px) {

    .footer {
        padding-top: clamp(3.333312rem, 4.1667vw, 5rem);
    }



    .footer__cta {
        min-height: clamp(6.25rem, 7.8125vw, 9.375rem);
        border-radius: clamp(0.833313rem, 1.0417vw, 1.25rem);
        padding: clamp(1rem, 1.25vw, 1.5rem) clamp(1.25rem, 1.5625vw, 1.875rem);
        margin-bottom: clamp(3.333312rem, 4.1667vw, 5rem);
        gap: clamp(1.25rem, 1.5625vw, 1.875rem);
    }

    .footer__cta-content {
        gap: clamp(1.166688rem, 1.4583vw, 1.75rem);
    }

    .footer__cta-avatar-wrapper {
        width: clamp(3.75rem, 4.6875vw, 5.625rem);
        height: clamp(3.75rem, 4.6875vw, 5.625rem);
        margin-left: clamp(0.833313rem, 1.0417vw, 1.25rem);
    }

    .footer__cta-layer {
        border-width: clamp(0.166687rem, 0.208vw, 0.25rem);
    }

    .footer__cta-layer--1 {
        width: clamp(3.083312rem, 3.854vw, 4.625rem);
        height: clamp(3.083312rem, 3.854vw, 4.625rem);
        border-radius: clamp(0.583313rem, 0.729vw, 0.875rem);
        left: clamp(-0.75rem, -0.9375vw, -1.125rem);
    }

    .footer__cta-layer--2 {
        width: clamp(3.416688rem, 4.271vw, 5.125rem);
        height: clamp(3.416688rem, 4.271vw, 5.125rem);
        border-radius: clamp(0.666687rem, 0.8333vw, 1rem);
        left: clamp(-0.416687rem, -0.52vw, -0.625rem);
    }

    .footer__cta-avatar {
        width: 100%;
        height: 100%;
        border-radius: clamp(0.75rem, 0.9375vw, 1.125rem);
        border-width: clamp(0.166687rem, 0.208vw, 0.25rem);
    }

    .footer__cta-title {
        font-size: clamp(1.083312rem, calc(1.354vw * var(--desktop-font-vw-scale, 1)), 1.625rem);
        line-height: clamp(1.416688rem, 1.77vw, 2.125rem);
        max-width: clamp(20.916687rem, 26.146vw, 31.375rem);
    }

    .footer__cta-subtitle {
        font-size: clamp(0.666687rem, calc(0.8333vw * var(--desktop-font-vw-scale, 1)), 1rem);
        line-height: clamp(1.083312rem, 1.3542vw, 1.625rem);
        max-width: clamp(23.166687rem, 28.958vw, 34.75rem);
    }

    .footer__cta-button {
        width: clamp(10.5rem, 13.125vw, 15.75rem);
        height: clamp(2.083312rem, 2.6042vw, 3.125rem);
        font-size: clamp(0.666687rem, calc(0.8333vw * var(--desktop-font-vw-scale, 1)), 1rem);
        border-radius: clamp(0.416687rem, 0.5208vw, 0.625rem);
    }

    .footer__main {
        gap: clamp(6.5rem, 8.125vw, 9.75rem);
        margin-bottom: clamp(4.166688rem, 5.208vw, 6.25rem);
    }

    .footer__brand-col {
        width: clamp(20.541687rem, 25.677vw, 30.8125rem);
        max-width: clamp(20.541687rem, 25.677vw, 30.8125rem);
    }

    .footer__nav-grid {
        grid-template-columns: repeat(3, max-content);
        gap: 3.75rem;
    }

    .footer__logo {
        width: clamp(9.166688rem, 11.458vw, 13.75rem);
    }

    .footer__brand-description {
        font-size: clamp(0.666687rem, calc(0.8333vw * var(--desktop-font-vw-scale, 1)), 1rem);
        line-height: clamp(1.25rem, 1.5625vw, 1.875rem);
        max-width: clamp(20.541687rem, 25.677vw, 30.8125rem);
    }

    .footer__socials {
        gap: clamp(0.416687rem, 0.52vw, 0.625rem);
    }

    .footer__social-link {
        width: clamp(2.083312rem, 2.604vw, 3.125rem);
        height: clamp(2.083312rem, 2.604vw, 3.125rem);
    }

    .footer__nav-col {
        gap: clamp(0.833313rem, 1.04167vw, 1.25rem);
    }

    .footer__nav-title {
        font-size: clamp(1.083312rem, calc(1.354vw * var(--desktop-font-vw-scale, 1)), 1.625rem);
        line-height: clamp(1.416688rem, 1.77vw, 2.125rem);
    }

    .footer__nav-list {
        gap: 0;
    }

    .footer__nav-link {
        font-size: clamp(0.666687rem, calc(0.8333vw * var(--desktop-font-vw-scale, 1)), 1rem);
        line-height: clamp(1.5rem, 1.875vw, 2.25rem);
    }

    .footer__bottom {
        min-height: calc(clamp(6.458312rem, 8.0729vw, 9.6875rem) * 0.75);
        padding: 0;
    }


    .footer__copyright {
        font-size: clamp(0.666687rem, calc(0.8333vw * var(--desktop-font-vw-scale, 1)), 1rem);
        line-height: clamp(1.25rem, 1.5625vw, 1.875rem);
    }

    .footer__legal-links {
        gap: clamp(1.333312rem, 1.667vw, 2rem);
    }

    .footer__legal-link {
        font-size: clamp(0.666687rem, calc(0.8333vw * var(--desktop-font-vw-scale, 1)), 1rem);
        line-height: clamp(1.25rem, 1.5625vw, 1.875rem);
    }

    .footer__watermark {
        font-size: clamp(6.458312rem, 8.0729vw, 9.6875rem);
        bottom: -0.05em;
    }

}

/* =========================================================
   BELOW 1440px: WRAP FOOTER LINK COLUMNS TO NEXT ROW
   ========================================================= */

@media (max-width: 1023px) {
    .footer__watermark {
        display: none !important;
    }

    .footer__main {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: clamp(2rem, 2.5vw, 3rem);
        margin-bottom: clamp(2.916688rem, 3.6458vw, 4.375rem);
    }

    .footer__brand-col {
        width: 100%;
        max-width: 36.25rem;
    }

    .footer__brand-description {
        max-width: 36.25rem;
    }

    .footer__nav-grid {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, max-content);
        column-gap: 3.75rem;
        row-gap: clamp(2.083312rem, 2.6042vw, 3.125rem);
    }

    .footer__nav-col {
        width: fit-content;
    }
}


/* =========================================================
   1279–1024px
   SECOND FLUID RANGE
   ========================================================= */




/* =========================================================
   1023–768px
   TABLET
   ========================================================= */

@media (min-width: 768px) and (max-width: 1023px) {

    .footer {
        padding-top: 3rem;
    }



    .footer__cta {
        flex-wrap: wrap;
        padding: 1.375rem 1.5rem;
        border-radius: 1rem;
        margin-bottom: 3rem;
        gap: 1.25rem;
    }

    .footer__cta-content {
        flex: 1 1 100%;
        gap: 1.125rem;
    }

    .footer__cta-avatar-wrapper {
        width: 4.5rem;
        height: 4.5rem;
        margin-left: 1rem;
    }

    .footer__cta-layer {
        border-width: 0.1875rem;
    }

    .footer__cta-layer--1 {
        width: 3.625rem;
        height: 3.625rem;
        border-radius: 0.75rem;
        left: -0.875rem;
    }

    .footer__cta-layer--2 {
        width: 4.0625rem;
        height: 4.0625rem;
        border-radius: 0.8125rem;
        left: -0.5rem;
    }

    .footer__cta-avatar {
        width: 100%;
        height: 100%;
        border-radius: 0.9375rem;
        border-width: 0.1875rem;
    }

    .footer__cta-title {
        font-size: 1.25rem;
        line-height: 1.625rem;
    }

    .footer__cta-subtitle {
        font-size: 0.84375rem;
        line-height: 1.25rem;
    }

    .footer__cta-button {
        width: 100%;
        height: 2.875rem;
        font-size: 0.875rem;
        border-radius: 0.625rem;
        margin-left: 0;
    }

    .footer__main {
        display: flex;
        flex-direction: column;
        gap: clamp(1.5rem, 1.875vw, 2.25rem);
        margin-bottom: clamp(1.333312rem, 1.6667vw, 2rem);
    }

    .footer__brand-col {
        width: 100%;
        max-width: 30rem;
        gap: 1rem;
    }

    .footer__logo {
        width: 11.25rem;
    }

    .footer__brand-description {
        font-size: 0.875rem;
        line-height: 1.5rem;
        max-width: 30rem;
    }

    .footer__socials {
        gap: 0.625rem;
    }

    .footer__social-link {
        width: 2.625rem;
        height: 2.625rem;
    }

    .footer__nav-grid {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, max-content);
        row-gap: clamp(1.5rem, 1.875vw, 2.25rem);
        column-gap: 3.75rem;
    }

    .footer__nav-col {
        width: fit-content;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .footer__nav-title {
        font-size: 1.25rem;
        line-height: 1.625rem;
    }

    .footer__nav-list {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .footer__nav-link {
        font-size: 0.875rem;
        line-height: 1.875rem;
        white-space: nowrap;
    }

    .footer__bottom {
        min-height: auto;
        padding-top: 2rem;
        padding-bottom: clamp(1rem, 1.25vw, 1.5rem);
    }


    .footer__copyright {
        font-size: 0.875rem;
        line-height: 1.25rem;
        align-self: flex-start;
    }

    .footer__legal-links {
        align-items: flex-start;
        flex-direction: column;
        gap: 0;
    }

    .footer__legal-link {
        font-size: 0.875rem;
    }

}


/* =========================================================
   767–481px
   LARGE MOBILE
   ========================================================= */

@media (min-width: 481px) and (max-width: 767px) {

    .footer {
        padding-top: 2.5rem;
    }

    .footer__container,
    .footer__bottom-container {
        width: 100% !important;
        max-width: calc(100% - 2.5rem) !important;
        margin-inline: auto !important;
        padding-inline: 0 !important;
        box-sizing: border-box !important;
    }



    .footer__cta {
        flex-direction: column;
        align-items: flex-start;
        border-radius: 1rem;
        padding: 1.5rem 1.25rem;
        margin-bottom: 2.5rem;
        gap: 1.25rem;
    }

    .footer__cta-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        width: 100%;
    }

    .footer__cta-avatar-wrapper {
        width: 3.75rem;
        height: 3.75rem;
        margin-left: 0.75rem;
    }

    .footer__cta-layer {
        border-width: 0.1875rem;
    }

    .footer__cta-layer--1 {
        width: 3rem;
        height: 3rem;
        border-radius: 0.625rem;
        left: -0.75rem;
    }

    .footer__cta-layer--2 {
        width: 3.375rem;
        height: 3.375rem;
        border-radius: 0.6875rem;
        left: -0.375rem;
    }

    .footer__cta-avatar {
        width: 100%;
        height: 100%;
        border-radius: 0.8125rem;
        border-width: 0.1875rem;
    }

    .footer__cta-text {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .footer__cta-title {
        font-size: 1.1875rem;
        line-height: 1.5625rem;
        max-width: 100%;
    }

    .footer__cta-subtitle {
        font-size: 0.84375rem;
        line-height: 1.25rem;
        max-width: 100%;
    }

    .footer__cta-button {
        width: 100%;
        height: 3rem;
        text-align: center;
        font-size: 0.875rem;
        border-radius: 0.625rem;
    }

    .footer__main {
        flex-direction: column;
        gap: 2rem;
        margin-bottom: 1.75rem;
    }

    .footer__brand-col {
        width: 100%;
        max-width: 100%;
    }

    .footer__nav-grid {
        width: fit-content;
        max-width: 100%;
        grid-template-columns: max-content;
        gap: 1.5rem;
        border-top: none;
    }

    .footer__nav-col {
        width: fit-content;
        gap: 0.75rem;
    }

    .footer__nav-title {
        font-size: 1.125rem;
        line-height: 1.5rem;
        cursor: default;
        user-select: auto;
    }

    .footer__nav-list {
        display: flex;
        flex-direction: column;
        gap: 0;
        max-height: none;
        overflow: visible;
        opacity: 1;
        margin-top: 0;
    }

    .footer__nav-link {
        font-size: 0.875rem;
        line-height: 2rem;
    }

    .footer__logo {
        width: 10.625rem;
    }

    .footer__brand-description {
        font-size: 0.875rem;
        line-height: 1.5rem;
        max-width: 100%;
    }

    .footer__socials {
        gap: 0.5rem;
    }

    .footer__social-link {
        width: 2.5rem;
        height: 2.5rem;
    }

    .footer__bottom {
        min-height: auto;
        padding: 0 !important;
    }

    .footer__bottom-container {
        padding-block: 1.25rem !important;
        padding-inline: 0 !important;
        box-sizing: border-box !important;
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start !important;
        text-align: left !important;
    }

    .footer__copyright {
        font-size: 0.78125rem;
        line-height: 1.25rem;
        text-align: left !important;
        width: 100% !important;
        margin: 0 !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    .footer__legal-links {
        gap: 1rem;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        text-align: left !important;
        width: 100% !important;
        flex-wrap: wrap;
    }

    .footer__legal-link {
        font-size: 0.78125rem;
        line-height: 1.25rem;
        text-align: left !important;
    }

}


/* =========================================================
   480px AND BELOW
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .footer {
        padding-top: 2rem;
    }

    .footer__container,
    .footer__bottom-container {
        width: 100% !important;
        max-width: calc(100% - 2.5rem) !important;
        margin-inline: auto !important;
        padding-inline: 0 !important;
        box-sizing: border-box !important;
    }

    .footer__cta {
        flex-direction: column;
        align-items: flex-start;
        border-radius: 1rem;
        padding: 1.375rem 1.125rem;
        margin-bottom: clamp(1.666688rem, 2.0833vw, 2.5rem);
        gap: 1.125rem;
    }

    .footer__cta-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.875rem;
        width: 100%;
    }

    .footer__cta-text {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .footer__cta-avatar-wrapper {
        width: 3.25rem;
        height: 3.25rem;
        margin-left: 0.625rem;
    }

    .footer__cta-layer {
        border-width: 0.15625rem;
    }

    .footer__cta-layer--1 {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 0.5625rem;
        left: -0.625rem;
    }

    .footer__cta-layer--2 {
        width: 2.875rem;
        height: 2.875rem;
        border-radius: 0.625rem;
        left: -0.3125rem;
    }

    .footer__cta-avatar {
        width: 100%;
        height: 100%;
        border-radius: 0.75rem;
        border-width: 0.15625rem;
    }

    .footer__cta-title {
        font-size: 1.125rem;
        line-height: 1.5rem;
        max-width: 100%;
    }

    .footer__cta-subtitle {
        font-size: 0.875rem;
        line-height: 1.1875rem;
        max-width: 100%;
    }

    .footer__cta-button {
        width: 100%;
        height: 2.875rem;
        text-align: center;
        font-size: 0.875rem;
        border-radius: 0.625rem;
    }

    .footer__main {
        flex-direction: column;
        gap: 1.75rem;
        margin-bottom: 1.5rem;
    }

    .footer__brand-col {
        width: 100%;
        max-width: 100%;
        gap: 1rem;
    }

    .footer__nav-grid {
        width: fit-content;
        max-width: 100%;
        grid-template-columns: max-content;
        gap: 1.25rem;
        border-top: none;
    }

    .footer__nav-col {
        width: fit-content;
        gap: 0.625rem;
    }

    .footer__nav-title {
        font-size: 1.0625rem;
        line-height: 1.375rem;
        cursor: default;
        user-select: auto;
    }

    .footer__nav-list {
        display: flex;
        flex-direction: column;
        gap: 0;
        max-height: none;
        overflow: visible;
        opacity: 1;
        margin-top: 0;
    }

    .footer__nav-link {
        font-size: 0.84375rem;
        line-height: 1.875rem;
    }

    .footer__logo {
        width: 9.375rem;
    }

    .footer__brand-description {
        font-size: 0.84375rem;
        line-height: 1.375rem;
    }

    .footer__socials {
        gap: 0.5rem;
    }

    .footer__social-link {
        width: 2.375rem;
        height: 2.375rem;
    }

    .footer__bottom {
        min-height: auto;
        padding: 0 !important;
    }

    .footer__bottom-container {
        padding-block: 1.25rem !important;
        padding-inline: 0 !important;
        box-sizing: border-box !important;
        flex-direction: column;
        gap: 0.375rem;
        align-items: flex-start !important;
        text-align: left !important;
    }

    .footer__copyright {
        font-size: 0.875rem;
        line-height: 1.25rem;
        text-align: left !important;
        width: 100% !important;
        margin: 0 !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    .footer__legal-links {
        gap: 0.875rem;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        text-align: left !important;
        width: 100% !important;
        flex-wrap: wrap;
    }

    .footer__legal-link {
        font-size: 0.875rem;
        line-height: 1.25rem;
        text-align: left !important;
    }

}

@media (min-width: 768px) and (max-width: 1023px) {
    .footer__cta-title,
    .footer__nav-title {
        font-size: 1.375rem;
        line-height: 1.25;
    }

    .footer__cta-subtitle,
    .footer__brand-description,
    .footer__nav-link,
    .footer__copyright,
    .footer__legal-link {
        font-size: 1rem;
        line-height: 1.55;
    }
}

@media (max-width: 767px) {
    .footer__cta-title,
    .footer__nav-title {
        font-size: 1.125rem;
        line-height: 1.25;
    }

    .footer__cta-subtitle,
    .footer__brand-description,
    .footer__nav-link,
    .footer__copyright,
    .footer__legal-link {
        font-size: 0.9375rem;
        line-height: 1.5;
    }
}