/* ============================================================
   grow-in 7 — shared site footer (consistent across every page)
   Loaded alongside style.css / pages.css / start.css. Uses design
   tokens with hard fallbacks so it renders on any page's stylesheet.
   ============================================================ */

.site-footer {
  background: var(--ink, #1a1a1a);
  color: rgba(247, 243, 235, 0.62);
  padding: clamp(56px, 8vw, 96px) var(--pad-x, var(--pad, clamp(20px, 5vw, 96px))) clamp(26px, 4vw, 40px);
  font-family: var(--font-body, "Manrope", system-ui, sans-serif);
}
.site-footer__top {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: clamp(32px, 4vw, 64px);
  max-width: 1300px; margin: 0 auto;
  padding-bottom: clamp(36px, 5vw, 56px);
}
@media (max-width: 880px) { .site-footer__top { grid-template-columns: 1fr 1fr; gap: 40px 28px; } }
@media (max-width: 520px) { .site-footer__top { grid-template-columns: 1fr; gap: 32px; } }

/* brand block */
.site-footer__logo {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display, "Bricolage Grotesque", sans-serif);
  font-weight: 800; font-size: 22px; color: var(--bg, #f7f3eb);
}
.site-footer__logo svg { width: 28px; height: 28px; }
.site-footer__logo em { color: var(--primary-vivid, #e94b35); font-style: normal; }
.site-footer__tagline { margin-top: 16px; max-width: 300px; font-size: 14.5px; line-height: 1.6; }
.site-footer__social { display: flex; gap: 10px; margin-top: 22px; }
.site-footer__social a {
  width: 40px; height: 40px; border-radius: 999px;
  display: grid; place-items: center;
  background: rgba(247, 243, 235, 0.08); color: var(--bg, #f7f3eb);
  border: 1px solid rgba(247, 243, 235, 0.14);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.site-footer__social a:hover {
  background: var(--primary, #c4351f); border-color: var(--primary, #c4351f);
  transform: translateY(-2px);
}
.site-footer__social svg { width: 18px; height: 18px; }

/* link columns */
.site-footer__col h4 {
  font-family: var(--font-display, sans-serif);
  font-weight: 800; font-size: 15px; letter-spacing: 0.4px;
  color: var(--bg, #f7f3eb); margin-bottom: 16px;
}
.site-footer__col ul { list-style: none; display: grid; gap: 11px; margin: 0; padding: 0; }
.site-footer__col a {
  font-size: 14.5px; color: rgba(247, 243, 235, 0.62);
  text-decoration: none; transition: color 0.2s ease;
}
.site-footer__col a:hover { color: var(--bg, #f7f3eb); }

/* legal strip */
.site-footer__bottom {
  max-width: 1300px; margin: 0 auto;
  border-top: 1px solid rgba(247, 243, 235, 0.12);
  padding-top: clamp(22px, 3vw, 32px);
  text-align: center; line-height: 1.7;
  font-size: 13px; font-weight: 600;
  color: var(--primary-vivid, #e94b35);
}