.site-footer {
  background: var(--color-ink);
  color: var(--color-cream);
}

.site-footer__inner {
  width: min(100%, var(--container-max));
  margin-inline: auto;
  padding: clamp(56px, 7vw, 88px) clamp(24px, 5vw, 48px) clamp(40px, 4vw, 56px);
  display: grid;
  grid-template-columns: 1.5fr .8fr 1.2fr;
  gap: clamp(32px, 5vw, 64px);
}

.site-footer__logo {
  display: block;
  width: 124px;
  height: auto;
}

.site-footer__tagline {
  margin: 20px 0 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.site-footer__description {
  max-width: 335px;
  margin: 10px 0 0;
  color: color-mix(in srgb, var(--color-cream) 65%, transparent);
  font-size: 15px;
  line-height: 1.55;
}

.site-footer__heading {
  margin: 0 0 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-cream) 55%, transparent);
}

.site-footer__list,
.site-footer__contact {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.site-footer__link,
.site-footer__contact-link {
  color: color-mix(in srgb, var(--color-cream) 82%, transparent);
  font-size: 14px;
  line-height: 1.5;
  transition: color 160ms ease;
}

.site-footer__link { display: inline-block; }

.site-footer__contact-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.site-footer__contact-icon {
  width: 20px;
  height: 20px;
  flex: none;
}

.site-footer__link:hover,
.site-footer__contact-link:hover {
  color: var(--color-cream);
}

.site-footer__bottom {
  border-top: 1px solid color-mix(in srgb, var(--color-cream) 15%, transparent);
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 24px; max-width: var(--container-max); margin: 0 auto; padding: 0 clamp(24px, 5vw, 48px) 24px; font-size: 12px; color: color-mix(in srgb, var(--color-cream) 70%, transparent); }
.site-footer__legal a { text-decoration: underline; text-underline-offset: 3px; }

.site-footer__bottom p {
  width: min(100%, var(--container-max));
  margin: 0 auto;
  padding: 22px clamp(24px, 5vw, 48px);
  font-size: 12px;
  color: color-mix(in srgb, var(--color-cream) 55%, transparent);
}
@media (max-width: 900px) {
  .site-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .site-footer__inner { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .site-footer__brand { grid-column: auto; }
  .site-footer__logo { width: 116px; }
}