.footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: auto;
  padding-top: var(--sp-8);
  background: var(--leaf-900);
  border-top: 3px solid var(--c-accent);
  color: color-mix(in srgb, var(--c-ink-inverse) 70%, transparent);
}

.footer::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 50%;
  right: max(-2rem, calc((100% - var(--w-page)) / 2 - 4rem));
  height: 125%;
  aspect-ratio: 1493 / 2214;
  transform: translateY(-50%) rotate(-8deg);
  background: url('../img/ecoil-mark.svg') center / contain no-repeat;
  opacity: 0.07;
  pointer-events: none;
}

.footer__grid { display: grid; gap: var(--sp-6); padding-bottom: var(--sp-7); }

@media (min-width: 640px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.6fr repeat(2, minmax(0, 1fr)); gap: var(--sp-7); } }

.footer__brand p { margin: var(--sp-4) 0 0; max-width: 42ch; font-size: 0.9375rem; }

.footer__logo { width: 210px; height: auto; }

.footer__col { display: flex; flex-direction: column; gap: var(--sp-3); font-size: 0.9375rem; }
.footer__col a { transition: color var(--dur) var(--ease); }
.footer__col a:hover { color: var(--c-paper); }

.footer__title {
  margin: 0 0 var(--sp-1);
  font-family: var(--f-label);
  font-size: var(--fs-eyebrow);
  font-weight: 400;
  color: color-mix(in srgb, var(--c-ink-inverse) 42%, transparent);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  justify-content: space-between;
  padding-block: var(--sp-4);
  border-top: 1px solid color-mix(in srgb, var(--c-ink-inverse) 12%, transparent);
  font-size: var(--fs-caption);
}

.footer__legal { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.footer__legal a:hover { color: var(--c-paper); }

.footer__col a, .footer__legal a { padding-block: 3px; }

@media (max-width: 719px) {
  .footer::after { top: auto; bottom: -3rem; right: -4rem; height: 22rem; transform: rotate(-8deg); }
}