/* Footer. Dark navy band in both themes. */
.site-footer {
  --teal: #1FB5AD;
  --teal-text: #5FD8D1;
  background: var(--strip-bg);
  color: #B9C6DD;
  padding-block: 44px 28px;
  padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
}
.site-footer .logo { color: #FFFFFF; }
.foot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.foot-tag { margin-top: 14px; font-size: 14px; max-width: 36ch; }
.site-footer h4 {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: #FFFFFF; margin-bottom: 12px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.site-footer li a { display: inline-block; padding-block: 8px; }
.site-footer a { color: #B9C6DD; text-decoration: none; }
.site-footer a:hover { color: #FFFFFF; }
.legal {
  margin-top: 36px; padding-top: 20px; border-top: 1px solid #1F3355;
  display: flex; flex-direction: column; gap: 6px; font-size: 12.5px;
}

@media (min-width: 520px) {
  .foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
}
@media (min-width: 860px) {
  .foot { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
  .foot-brand { grid-column: auto; }
  .legal { flex-direction: row; justify-content: space-between; gap: 8px 24px; }
}