/* ---------------------------------------------------------------------------
   Site footer.

   Brand brief: Navy background with off-white text, and nothing decorative
   that is not also doing a job. The previous footer's empty background shape
   has been removed rather than restyled.

   Accent Orange (#F2994A) is reserved for the logo icon and is deliberately
   absent here, including on links and hover states.
   --------------------------------------------------------------------------- */
.bp-footer {
    --bp-footer-navy: #1B2A4A;
    --bp-footer-text: #F2F0EA;
    background: var(--bp-footer-navy);
    color: var(--bp-footer-text);
    padding: 64px 0 0;
}

    .bp-footer a {
        color: var(--bp-footer-text);
        text-decoration: none;
        transition: opacity 0.2s ease;
    }

        .bp-footer a:hover,
        .bp-footer a:focus-visible {
            color: var(--bp-footer-text);
            opacity: 0.72;
            text-decoration: underline;
        }

.bp-footer__grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    gap: 40px;
}

.bp-footer__about {
    /* One body size for the whole footer -- see the scale note above .bp-footer__heading.
       !important only to beat asset/sass/style.css:337 `p { font-size:24px !important }`. */
    font-size: 1.2rem !important;
    line-height: 1.7;
    opacity: 0.85;
    margin-bottom: 20px;
    max-width: 38ch;
}

.bp-footer__heading {
    /* ---- Footer type scale ----
       heading 1.35rem / body 1.2rem / copyright 1rem, all weight 400.

       1.05rem was below the 1.2rem links it labels, so the hierarchy read
       backwards. That was invisible while the theme forced these to 22px;
       pinning the size exposed it. 1.35rem keeps the ~22px the headings
       actually had, without the theme's synthetic bold.

       !important only to beat asset/sass/style.css:307
       `h4 { font-size:22px !important; font-weight:700 !important }`. */
    font-size: 1.35rem !important;
    /* 400: Arno has no heavier real weight (see fonts.css). */
    font-weight: 400 !important;
    /* Theme h4 sets 1.63, which is body leading on a heading. */
    line-height: 1.3;
    color: var(--bp-footer-text);
    margin-bottom: 18px;
}

.bp-footer__list {
    list-style: none;
    padding: 0;
    margin: 0;
    /* Matches .bp-footer__contact below, so link rows and contact rows step by
       the same amount. Without this the list inherits the theme's fixed
       body line-height (26px) while contact uses 1.7. */
    line-height: 1.7;
}

    .bp-footer__list li + li {
        margin-top: 12px;   /* same step as .bp-footer__contact */
    }

    .bp-footer__list a,
    .bp-footer__contact a {
        font-size: 1.2rem;
        opacity: 0.85;
    }

.bp-footer__contact {
    list-style: none;
    padding: 0;
    margin: 0;
    /* Was 1.3rem, which made the address a different size from every other
       column. One size across all four. */
    font-size: 1.2rem;
    line-height: 1.7;
}

    .bp-footer__contact li {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        opacity: 0.85;
    }

        .bp-footer__contact li + li {
            margin-top: 12px;
        }

    .bp-footer__contact i {
        /* Re-nudged for the 1.2rem/1.7 text above. */
        margin-top: 7px;
        flex: 0 0 auto;
    }

/* Connect icons. Inline SVG rather than an icon font, so nothing depends on a
   webfont loading, and the class name deliberately avoids the word "social" --
   content blockers routinely hide [class*="social"] and links to facebook.com
   or x.com, which makes correct markup look broken. */
.bp-footer__connect {
    display: flex;
    gap: 12px;
    padding: 0;
    margin: 0;
    list-style: none;
}

    .bp-footer__connect a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border: 1px solid rgba(242, 240, 234, 0.35);
        border-radius: 50%;
        opacity: 1;
    }

        .bp-footer__connect a:hover {
            background: rgba(242, 240, 234, 0.12);
            border-color: var(--bp-footer-text);
            text-decoration: none;
        }

    .bp-footer__connect svg {
        width: 15px;
        height: 15px;
        display: block;
    }

/* Brand mark, centred just above the copyright bar.

   The whole logotype renders white by default. One full-colour copy per word
   is stacked on top, each clipped to that word's band, so hovering a word
   lights only that word and leaves the rest white. */
.bp-footer__brand {
    display: flex;
    justify-content: center;
    padding: 8px 0 30px;
}

    /* Width spans the Company column start to the Services column end.
       The grid is 1.6fr 1fr 1fr 1.2fr (4.8fr total) with three 40px gutters,
       so one fr is (100% - 120px) / 4.8; two of them plus the gutter between
       gives (100% - 120px) / 2.4 + 40px.

       The calc sits on the link, not the stack: the stack shrink-wraps its
       image, so a percentage inside it would have nothing definite to resolve
       against. */
    .bp-footer__logo-link {
        display: block;
        width: calc((100% - 120px) / 1.4 + 40px);
        max-width: 100%;
        line-height: 0;
    }

    .bp-footer__logo-stack {
        position: relative;
        display: block;
        width: 100%;
    }

    .bp-footer__logo {
        display: block;
        width: 100%;
        height: auto;
    }

        /* brightness(0) crushes every pixel to black, invert(1) lifts it to
           white; the PNG alpha is untouched so only the mark is recoloured. */
        .bp-footer__logo--white {
            filter: brightness(0) invert(1);
        }

    /* One full-colour copy per word, each clipped to just that word's band.
       The band comes from --from/--to, measured off the artwork: the gap
       between the two words sits at 46.2% of the image width.

       clip-path also clips hit-testing, so a word only responds to a pointer
       inside its own band -- hovering one word leaves the others white. */
    .bp-footer__logo-word {
        position: absolute;
        inset: 0;
        clip-path: inset(0 calc(100% - var(--to)) 0 var(--from));
        opacity: 0;
        transition: opacity 0.25s ease;
    }

        .bp-footer__logo-word:hover {
            opacity: 1;
        }

        /* keyboard users get the whole mark in colour, since there is no
           pointer to single out one word */
        .bp-footer__logo-link:focus-visible .bp-footer__logo-word {
            opacity: 1;
        }
@media (prefers-reduced-motion: reduce) {
    .bp-footer__logo-word {
        transition: none;
    }
}

.bp-footer__bottom {
    /*margin-top: 52px;*/
    border-top: 1px solid rgba(242, 240, 234, 0.18);
    padding: 20px 0;
    text-align: center;
}

    .bp-footer__bottom p {
        margin: 0;
        /* Smallest step of the footer scale. !important only to beat the
           theme's p { font-size:24px !important }. */
        font-size: 1rem !important;
        line-height: 1.6;
        opacity: 0.78;
    }

@media (max-width: 991.98px) {
    .bp-footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 34px;
    }
}

@media (max-width: 575.98px) {
    .bp-footer__grid {
        grid-template-columns: 1fr;
        /* Stacked now, so the 34px inherited from the 992px query is a
           vertical gutter -- tighten it. */
        gap: 26px;
    }

    .bp-footer {
        padding-top: 48px;
    }
}

/* Below the four-column layout that span no longer maps to real columns,
   so fall back to a proportion of the row. */
@media (max-width: 991.98px) {
    .bp-footer__logo-link {
        width: 55%;
    }
}

@media (max-width: 575.98px) {
    .bp-footer__logo-link {
        width: 72%;
    }
}