.site-footer {
  padding: clamp(32px, 4vh, 44px) 0 18px;
  background: var(--teal-deep);
  color: var(--on-dark);
}

/* Flex rather than a fractional grid. The link columns hold three short items,
   so fr units stretched them across the full width and left a large gap in the
   middle. Auto widths keep them grouped. */
.footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 56px);
}

.footer-brand { max-width: 30ch; }

.footer-note {
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--on-dark-soft);
  margin: 10px 0 0;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 5vw, 72px);
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-col-title {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  margin: 0 0 2px;
  white-space: nowrap;
}

.footer-link {
  font-size: var(--text-sm);
  color: var(--on-dark-soft);
  white-space: nowrap;
  transition: color 0.2s;
}
.footer-link:hover { color: var(--on-dark); }

.footer-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  margin-top: clamp(24px, 3vh, 36px);
  padding-top: 16px;
  border-top: 1px solid rgba(237, 243, 242, 0.14);
}

/* Legal pages have no link columns above the strip, so the divider and the
   offset would sit against nothing. */
.footer-base-plain { margin-top: 0; padding-top: 0; border-top: 0; }

.footer-meta {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--on-dark-muted);
}

.footer-legal {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-xs);
}

.footer-legal-link {
  color: var(--on-dark-soft);
  white-space: nowrap;
  transition: color 0.2s;
}
.footer-legal-link:hover { color: var(--on-dark); text-decoration: underline; }


@media (max-width: 640px) {
  .footer-row { gap: 26px; }
  .footer-links { gap: 32px; }
}