/* footer.css */
.footer { background: var(--kkf-black); color: #fff; padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr));
  gap: clamp(1.6rem, 4vw, 3rem);
}
.footer h4 {
  font-size: .76rem; letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--kkf-sky-light); margin-bottom: 1rem;
}
.footer ul { display: grid; gap: .6rem; }
.footer a { color: rgba(255,255,255,.72); font-size: .92rem; }
.footer a:hover { color: #fff; }
.footer p { color: rgba(255,255,255,.6); font-size: .92rem; }
.footer .brand__name { color: #fff; }
.footer .brand__sub { color: rgba(255,255,255,.5); }
.footer .brand { margin-bottom: 1rem; }
.footer__socials { display: flex; gap: .6rem; margin-top: 1.2rem; }
.footer__socials a {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2);
  display: grid; place-items: center; font-size: .8rem; font-weight: 700;
  transition: var(--transition);
}
.footer__socials a:hover { background: var(--kkf-sky); border-color: var(--kkf-sky); color: #fff; }
.footer__bottom {
  margin-top: clamp(2rem, 5vw, 3.2rem); padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; justify-content: space-between; align-items: center;
  font-size: .84rem; color: rgba(255,255,255,.55);
}
.footer__bottom nav { display: flex; gap: 1.2rem; flex-wrap: wrap; }

/* Simple brand-only footer */
.footer--simple .footer__simple {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: clamp(1.4rem, 4vw, 2.6rem);
}
.footer--simple .brand { margin-bottom: 0; }
.footer__meta { display: grid; gap: .35rem; }
.footer__meta p { margin: 0; font-size: .92rem; }
.footer__meta a { color: rgba(255,255,255,.78); }
.footer__meta a:hover { color: #fff; }
.footer__meta strong { color: var(--kkf-sky-light); }
.footer--simple .footer__socials { margin-top: 0; }
.footer--simple .footer__bottom { justify-content: center; text-align: center; }
@media (max-width: 720px) {
  .footer--simple .footer__simple { flex-direction: column; align-items: flex-start; }
}