/* ==========================================================================
   Site footer
   Was a <style> block inside footer.php that silently depended on the host
   page having already declared :root.
   ========================================================================== */

.site-footer {
    background-color: var(--dark-bg);
    color: var(--slate-300);
    padding: 70px var(--sp-5) 0;
    position: relative;
    border-top: 1px solid transparent;
}
/* Gradient hairline along the top edge — the light page hands off to the dark
   footer through a thin brand seam. */
.site-footer::before {
    content: '';
    position: absolute;
    top: -1px; left: 0; right: 0;
    height: 2px;
    background: var(--grad-brand);
    opacity: 0.85;
}

.footer-inner {
    max-width: var(--container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    gap: var(--sp-7);
    padding-bottom: var(--sp-10);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Was an h4 — footer nav chrome, not a content heading; it sat after every
   page's own h1 but the outline still shouldn't repeat h4 three times with
   no h2/h3 in between. Selector renamed to match; styling unchanged. */
.footer-col-title {
    color: var(--white);
    font-size: var(--fs-sm);
    font-weight: 700;
    margin-bottom: var(--sp-5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.footer-col ul { display: flex; flex-direction: column; gap: var(--sp-3); }
.footer-col ul li a {
    color: var(--slate-400);
    text-decoration: none;
    font-size: var(--fs-sm);
    transition: color var(--dur-2) var(--ease-out), padding-left var(--dur-2) var(--ease-out);
}
.footer-col ul li a:hover { color: var(--white); padding-left: 4px; }

/* Serves assets/logo-reversed.png, not a filtered copy of the normal logo.
   `filter: brightness(0) invert(1)` was doing the reversing here, which flattens
   every colour to solid white — the blue gradient mark and the blue/green
   "BUILD GROW SCALE" tagline all collapsed into one white silhouette. The
   reversed asset lifts only the dark wordmark and keeps the brand colours.
   The scale(2.9) is gone for the same reason as the header — see 04-nav.css. */
.footer-brand .footer-logo img {
    height: 30px;
    width: auto;
    display: block;
    margin-bottom: 22px;
}
.footer-brand p {
    font-size: var(--fs-sm);
    line-height: 1.7;
    color: var(--slate-400);
    margin-bottom: var(--sp-5);
    max-width: 340px;
}

.footer-social { display: flex; gap: var(--sp-3); }
.footer-social a {
    width: 38px; height: 38px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.06);
    display: flex; align-items: center; justify-content: center;
    color: var(--white);
    text-decoration: none;
    font-size: var(--fs-sm);
    transition: background-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.footer-social a:hover { background-color: var(--primary-color); transform: translateY(-3px); }

.footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--slate-400);
    line-height: var(--lh-snug);
}
.footer-contact li .icon,
.footer-contact li i { color: var(--secondary-color); margin-top: 3px; width: 14px; flex-shrink: 0; }

.footer-bottom {
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--sp-5) 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-3);
}
.footer-bottom p { font-size: var(--fs-xs); color: var(--slate-500); }

.footer-legal { display: flex; gap: var(--sp-5); }
.footer-legal a { color: var(--slate-400); text-decoration: none; font-size: var(--fs-xs); transition: color var(--dur-2) var(--ease-out); }
.footer-legal a:hover { color: var(--white); text-decoration: underline; }

@media (max-width: 900px) {
    .footer-inner { grid-template-columns: 1fr 1fr; }

    /* .mobile-sticky-cta is position:fixed and therefore out of flow, so
       without this it permanently covers .footer-legal on every phone page —
       nothing else in the stylesheet compensated for it. The padding goes on
       the footer rather than body: body's background is --light-bg, so padding
       there would show a pale strip below the dark footer. */
    .site-footer { padding-bottom: calc(var(--cta-bar-h) + var(--safe-b)); }
}
@media (max-width: 560px) {
    .footer-inner { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; text-align: center; }
}

/* --- Consent checkbox (used by every data-collection form) --- */
.consent-group {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
    font-size: var(--fs-xs);
    color: var(--text-main);
    line-height: var(--lh-snug);
}
.consent-group input[type="checkbox"] {
    margin-top: 3px;
    width: 16px; height: 16px;
    flex-shrink: 0;
    accent-color: var(--primary-color);
    cursor: pointer;
}
.consent-group label { font-weight: 400; margin-bottom: 0; cursor: pointer; }
.consent-group a { color: var(--primary-color); font-weight: 600; text-decoration: none; }
.consent-group a:hover { text-decoration: underline; }