/* ==========================================================================
   AE Creative — Footer component
   Everything needed to render the site footer on ANY page. Pairs with
   assets/partials/footer.html. No JS behavior of its own beyond the
   generic hover/focus states below.
   ========================================================================== */

.site-footer{background:var(--footer-bg);border-top:1px solid var(--line)}
.site-footer__inner{max-width:var(--container);margin:0 auto;padding:64px clamp(18px,4vw,40px) 0}
.footer-cols{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.3fr;gap:36px;padding-bottom:48px}

.footer-brand{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.footer-brand img{height:36px}
.footer-brand span{font-family:var(--ff-display);font-weight:700;font-size:18px;color:var(--footer-text)}
.footer-about{
  margin:0 0 22px;font-size:14px;line-height:1.75;color:var(--footer-text-3);max-width:300px;
}
.footer-socials{display:flex;gap:12px;flex-wrap:wrap}
.footer-social{
  width:44px;height:44px;border-radius:12px;border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;color:var(--footer-icon);
  font-size:13px;transition:all .2s;
}
.footer-social svg{width:20px;height:20px}
.footer-social:hover{border-color:var(--brand-line);color:var(--brand);background:var(--brand-soft);transform:scale(1.08)}
.footer-col-title{
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.16em;
  color:var(--footer-text-4);margin-bottom:16px;
}
.footer-links{display:flex;flex-direction:column;gap:11px;font-size:14px;color:var(--footer-text-2)}
.footer-links a{transition:color .2s}
.footer-links a:hover{color:var(--footer-text)}
.footer-contact-list{
  display:flex;flex-direction:column;gap:12px;font-size:14px;
  color:var(--footer-text-2);margin-bottom:20px;
}
.footer-contact-list span[dir="ltr"]{text-align:right}
.newsletter-form{display:flex;gap:8px}
.newsletter-input{
  flex:1;min-width:0;padding:11px 13px;border-radius:10px;
  border:1px solid var(--line-2);background:var(--footer-input-bg);
  color:var(--footer-text);font-size:13px;outline:none;
}
.newsletter-input:focus{border-color:var(--brand)}
.newsletter-submit{
  padding:11px 15px;border:none;border-radius:10px;background:var(--grad);
  color:#fff;cursor:pointer;font-size:14px;
}
.footer-bottom{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:22px 0;
  border-top:1px solid var(--line);font-size:12.5px;
  color:var(--footer-text-4);font-family:var(--ff-mono);
}
.footer-bottom-links{display:flex;gap:20px}
.footer-bottom-links a:hover{color:var(--footer-text)}
.footer-credit{color:inherit;text-decoration:none;transition:color .2s}
.footer-credit:hover{color:var(--brand)}