.site-footer {
  background: var(--color-primary-dark);
  color: #d9e3df;
  padding: var(--space-10) 0 var(--space-6);
  /* Breathing room between a page's content and the footer. Right for the
     usual case, where the page ends in text on the paper background. */
  margin-top: var(--space-12);
}
/* ...but too much when the page ends in a full-bleed band. 96px of paper
   between two edge-to-edge dark blocks reads as a rendering fault.

   Not zero either, which was the first attempt: flush, the band's dark
   overlay and the footer's --color-primary-dark are close enough in value
   that the two merge into one ambiguous mass instead of reading as two
   deliberate blocks.

   0.5rem is a seam, not spacing. Enough for the paper ground to draw a
   crisp line between them; past about 1rem it starts reading as a gap
   again, which is the thing being fixed. Compared 0 / 8 / 12 / 16px side
   by side against the real photo and footer colour before picking.

   `:last-child` is load-bearing: .edge is also used mid-page (the home
   page's hero band), and matching that one would pull the footer up
   against whatever happens to follow it. */
main:has(> .edge:last-child) + .site-footer { margin-top: var(--space-2); }
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
.footer-brand { margin-bottom: var(--space-3); }
.footer-brand .logo-word { font-size: 1.25rem; }
.footer-tagline { color: #a9bdb6; font-size: 0.9375rem; max-width: 32ch; }
.footer-column h4 { color: #fff; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-3); }
.footer-column ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.footer-column a { color: #c3d3cd; }
.footer-column a:hover { color: #fff; }
.footer-bottom {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  font-size: 0.8125rem;
  color: #a9bdb6;
}
.footer-fee-note { font-size: 0.8125rem; color: #a9bdb6; }

@media (min-width: 640px) {
  .footer-grid { grid-template-columns: minmax(240px, 1fr) 1fr 1fr; }
}
@media (min-width: 960px) {
  .footer-grid { grid-template-columns: minmax(280px, 1fr) 1fr 1fr 1fr; }
}