.site-footer {
     margin: 22px auto 110px;
     width: min(1240px, calc(100% - 24px));
     padding: 20px;
     border-radius: var(--radius-xl);
     border: 1px solid hsla(0, 0%, 100%, 0.16);
     background: linear-gradient(140deg, hsla(0, 0%, 100%, 0.06), hsla(0, 0%, 100%, 0.01));
     backdrop-filter: blur(14px);
     display: grid;
     grid-template-columns: 1fr;
     gap: 18px;
}

.footer-brand h3 {
     font-size: var(--fs-3);
     color: var(--white-2);
     margin-bottom: 8px;
}

.footer-brand p {
     color: var(--light-gray);
     line-height: 1.6;
     font-size: var(--fs-7);
     margin-bottom: 8px;
}

.footer-brand span {
     color: var(--light-gray-70);
     font-size: var(--fs-8);
}

.footer-nav p,
.footer-connect p {
     color: var(--white-2);
     font-size: var(--fs-7);
     font-weight: var(--fw-600);
     margin-bottom: 10px;
}

.footer-nav-links {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
}

.footer-nav-links a {
     padding: 8px 12px;
     border-radius: 999px;
     border: 1px solid var(--jet);
     color: var(--light-gray);
     background: var(--onyx);
     transition: var(--transition-1);
     text-decoration: none;
}

.footer-nav-links a:hover {
     color: var(--orange-yellow-crayola);
     border-color: var(--orange-yellow-crayola);
     transform: translateY(-2px);
}

.footer-mail {
     color: var(--orange-yellow-crayola);
     font-weight: var(--fw-600);
     margin-bottom: 10px;
}

.footer-availability {
     margin: 0 0 10px;
     color: var(--light-gray);
     line-height: 1.6;
     font-size: var(--fs-7);
}

.footer-contact-btn {
     padding: 9px 14px;
     border-radius: 999px;
     border: 1px solid var(--orange-yellow-crayola);
     color: var(--orange-yellow-crayola);
     background: transparent;
     transition: var(--transition-1);
     text-decoration: none;
     display: inline-flex;
     align-items: center;
}

.footer-contact-btn:hover {
     background: var(--orange-yellow-crayola);
     color: hsl(223, 42%, 8%);
     transform: translateY(-2px);
}

@media (min-width: 768px) {
     .site-footer {
          grid-template-columns: 1.2fr 1fr;
     }
}

@media (min-width: 1080px) {
     .site-footer {
          margin-bottom: 28px;
          padding: 26px;
          grid-template-columns: 1.4fr 1fr 1fr;
          align-items: start;
     }
}