.footer {
    background: var(--color-navy-900);
    color: rgba(255, 255, 255, 0.7);
    padding-top: var(--space-16);
    /* The floating contact buttons live in the bottom-left corner of
       the viewport, so the footer keeps extra room at the bottom to
       make sure they never sit on top of its last row of content.
       Two stacked pills: 2 × 52px + 8px gap + 16px offset. */
    padding-bottom: calc(var(--space-6) + 128px);
}

/* A Customizer logo replaces the inline logo mark in the brand
   column, so it has to fill the column and keep its corners. */
.footer .custom-logo {
    width: 100%;
    display: block;
    margin: auto;
    border-radius: 15px;
    overflow: hidden;
}

/* The footer's own logo (Theme Options → Footer — Logo) sits in the
   same column, so it is sized the same way. */
.footer .footer__brand-logo {
    width: 100%;
    height: auto;
    display: block;
    margin: auto;
    overflow: hidden;
}

.footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-10);
    margin-bottom: var(--space-12);
}

.footer__brand p {
    margin-top: var(--space-5);
    font-size: var(--fs-sm);
    line-height: 1.7;
    max-width: 320px;
}

/* The "Powered by Century Mechanical Holdings" link that closes the
   footer: stacked and centered on small screens, left-aligned once
   there is room for it beside the other columns. */
.cmh-logo-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    text-align: center;
    font-size: var(--fs-xs);
    color: rgba(255, 255, 255, 0.6);
    transition: color var(--t-base);
}

.cmh-logo-wrapper:hover {
    color: var(--color-gold-500);
}

.footer-cmh-logo {
    width: 125px !important;
}

.footer__social {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

.footer__social a {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-white);
    border-radius: var(--radius-md);
    transition: all var(--t-base);
}

.footer__social a:hover {
    background: var(--color-gold-500);
    color: var(--color-navy-900);
    transform: translateY(-2px);
}

.footer__col h4 {
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: var(--fs-base);
    margin-bottom: var(--space-5);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    position: relative;
    padding-bottom: var(--space-3);
}

.footer__col h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background: var(--color-gold-500);
}

.footer__col ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.footer__col a {
    color: rgba(255, 255, 255, 0.65);
    font-size: var(--fs-sm);
    transition: all var(--t-fast);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.footer__col a:hover {
    color: var(--color-gold-500);
    padding-left: 4px;
}

.footer__contact li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    color: rgba(255, 255, 255, 0.65);
    font-size: var(--fs-sm);
    line-height: 1.6;
}

.footer__contact i {
    color: var(--color-gold-500);
    margin-top: 4px;
    flex-shrink: 0;
}

/* Every link in the footer picks up the accent color on hover. The
   `padding: 0` cancels the 4px nudge that `.footer__col a:hover`
   applies, so links outside the columns don't shift. */
.footer a:hover {
    padding: 0;
    color: var(--color-gold-500);
}

.footer__bottom {
    padding-top: var(--space-6);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--fs-xs);
    color: rgba(255, 255, 255, 0.5);
}

@media (min-width: 700px) {
    .footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-8);
    }

    .cmh-logo-wrapper {
        justify-content: flex-start;
        align-items: flex-start;
        text-align: left;
    }
}

@media (min-width: 1101px) {
    .footer__grid {
        grid-template-columns: 1.5fr 1fr 1fr 1fr;
        gap: var(--space-8);
    }
}

@media (max-width: 699px) {
    /* The contact buttons stack on phones, so they need more room. */
    .footer {
        padding-bottom: calc(var(--space-6) + 114px);
    }

    .footer .custom-logo {
        max-width: 300px;
    }

    .footer .footer__brand-logo {
        max-width: 300px;
    }

    .footer__brand p {
        text-align: center;
        margin-inline: auto;
    }

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

    .footer__col h4 {
        text-align: center;
    }

    .footer__col h4::after {
        left: 50%;
        transform: translateX( -50% );
    }

    .footer__col ul,
    .footer__contact ul {
        padding: 0;
        justify-content: center;
        text-align: center;
    }

    .footer__contact li {
        justify-content: center;
    }

    .footer__bottom {
        gap: 0;
        flex-direction: column;
    }

    .footer__bottom p {
        margin-bottom: 0;
    }
}

/* ============================================
   FLOATING CONTACT BUTTONS
   A call and an email button pinned to the bottom-left corner of the
   viewport, so the contact details are one tap away on every page.
   Phones show the icon on its own; from the tablet breakpoint up the
   icon is joined by the label and the full phone number / email
   address. The two buttons are stacked in every size.
   ============================================ */

.footer-contact-buttons {
    position: fixed;
    left: var(--space-4);
    bottom: var(--space-4);
    z-index: 98;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    max-width: calc(100vw - var(--space-8));
}

.footer-contact-buttons__btn {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    max-width: 100%;
    padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);
    background: var(--color-navy-900);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-lg);
    color: var(--color-white);
    text-decoration: none;
    transition: transform var(--t-base), background var(--t-base);
}

.footer-contact-buttons__btn:hover,
.footer-contact-buttons__btn:focus-visible {
    background: var(--color-navy-700);
    color: var(--color-white);
    transform: translateY(-2px);
}

.footer-contact-buttons__icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-full);
    background: var(--color-gold-500);
    color: var(--color-navy-900);
    font-size: 0.95rem;
}

.footer-contact-buttons__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.footer-contact-buttons__label {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-gold-500);
}

.footer-contact-buttons__value {
    font-size: var(--fs-sm);
    color: var(--color-white);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Phones: the icon is the whole button. */
@media (max-width: 699px) {
    .footer-contact-buttons {
        gap: 0.625rem;
    }

    .footer-contact-buttons__btn {
        width: 44px;
        height: 44px;
        padding: 0;
        justify-content: center;
        background: var(--color-gold-500);
        border-color: var(--color-gold-500);
    }

    .footer-contact-buttons__btn:hover,
    .footer-contact-buttons__btn:focus-visible {
        background: var(--color-gold-600);
    }

    .footer-contact-buttons__icon {
        width: 44px;
        height: 44px;
        font-size: 1rem;
        background: transparent;
    }

    /* The label and the value are what would make the circle a pill,
       so the whole text block steps aside on a phone. */
    .footer-contact-buttons__body {
        display: none;
    }
}