/* ==========================================================================
   Site footer
   ========================================================================== */

.site-footer {
  position: relative;
  background: var(--c-black);
  color: rgba(255,255,255,.72);
  padding-top: calc(var(--section-y) + var(--diagonal-h));
  /* Pull up over the green CTA so the diagonal cut reveals green, not the
     page background. */
  margin-top: calc(var(--diagonal-h) * -1);
  clip-path: polygon(0 var(--diagonal-h), 100% 0, 100% 100%, 0 100%);
}

.footer-cta {
  position: relative;
  background: var(--c-green);
  color: var(--c-white);
  text-align: center;
  /* Extra bottom room equal to the diagonal so the footer's angled top
     overlaps empty green, never the buttons. */
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) calc(clamp(3rem, 2rem + 4vw, 5.5rem) + var(--diagonal-h));
}
.footer-cta .statement { margin-inline: auto; max-width: 20ch; }

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid var(--c-border-dark);
}
@media (max-width: 880px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .site-footer__grid { grid-template-columns: 1fr; } }

.site-footer__brand img { height: clamp(84px, 6vw, 104px); width: auto; margin-bottom: var(--sp-4); }
.site-footer h4 {
  font-family: var(--font-sans); font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; font-size: .8rem;
  color: var(--c-white); margin-bottom: var(--sp-4);
}
.site-footer a { color: rgba(255,255,255,.72); }
.site-footer a:hover { color: var(--c-green); }
.site-footer .footer-menu { display: grid; gap: var(--sp-3); }

.footer-prop { display: grid; gap: var(--sp-1); margin-bottom: var(--sp-4); }
.footer-prop strong { color: var(--c-white); font-weight: 700; }

.footer-social { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); }
.footer-social a {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--c-border-dark); border-radius: 50%;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.footer-social a:hover { background: var(--c-green); border-color: var(--c-green); color: var(--c-ink); transform: translateY(-2px); }
.footer-social a:active { transform: translateY(0); }
.footer-social svg { width: 18px; height: 18px; }

.site-footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  align-items: center; justify-content: space-between;
  padding-block: var(--sp-6);
  font-size: var(--fs-300);
  color: rgba(255,255,255,.5);
}
.site-footer__tagline { color: rgba(255,255,255,.5); }
.site-footer__tagline a { color: rgba(255,255,255,.8); text-underline-offset: 3px; }
.site-footer__tagline a:hover { color: var(--c-white); text-decoration: underline; }