/* ==========================================================================
   Footer
   ========================================================================== */

.footer{
  border-top: 1px solid var(--border);
  padding-block: clamp(48px, 6vw, 72px) var(--s6);
  background: var(--bg-deep);
}

.footer-top{
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: var(--s7);
  border-bottom: 1px solid var(--border);
}

.footer-pitch h3{
  font-size: 20px;
  margin-bottom: var(--s3);
}

.footer-pitch p{
  color: var(--text-2);
  font-size: 15px;
  max-width: 34ch;
  margin-bottom: var(--s4);
}

.footer-col h4{
  font: 500 11.5px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--s4);
}

.footer-col ul{
  display: grid;
  gap: var(--s3);
}

.footer-col a{
  font-size: 15px;
  color: var(--text-2);
  text-decoration: none;
  transition: color var(--fast) ease;
}
.footer-col a:hover{ color: var(--accent-text); }

.footer-bottom{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding-top: var(--s5);
}

.footer-copy{
  font: 500 13px/1.5 var(--mono);
  color: var(--text-3);
}

.footer-note{
  font: 400 13px/1.5 var(--mono);
  color: var(--text-3);
}

@media (max-width: 800px){
  .footer-top{ grid-template-columns: 1fr 1fr; }
  .footer-pitch{ grid-column: 1 / -1; }
}

@media (max-width: 520px){
  .footer-bottom{ flex-direction: column; align-items: flex-start; }
}