/* ===================== FOOTER ===================== */
footer {
  position: relative; z-index: 1;
  background: var(--bg-dark);
  border-top: 1px solid var(--border);
  padding: 64px 0 32px;
  overflow: hidden;
}
.footer-grid {
  display: grid;
  grid-template-columns: 420px 220px 220px;
  gap: 48px;
  margin-bottom: 48px;
  justify-content: space-between;
  align-items: start;    /* each column starts at the top independently */
}
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  /* no min-height, no stretching */
}
.footer-logo {
  display: block;
  height: auto;
  max-height: 50px;   /* ← change only this to resize, nothing else moves */
  width: auto;
  opacity: 0.85;
  transition: opacity var(--transition);
  flex-shrink: 0;     /* prevents it from affecting flex layout */
}
.footer-logo:hover { opacity: 1; }

.footer-brand p {
  font-size: 14px; color: var(--text-body);
  line-height: 1.7; max-width: 320px; margin: 0;
}
.footer-socials { display: flex; gap: 12px; }
.footer-social {
  width: 38px; height: 38px; border-radius: 8px;
  background: var(--bg-card); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; transition: var(--transition);
  flex-shrink: 0;
}
.footer-social svg { width: 16px; height: 16px; fill: currentColor; }
.footer-social:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-3px); }

.footer-col h4 {
  font-family: var(--font-head); font-size: 15px; font-weight: 700;
  margin-bottom: 18px; color: var(--text-white);
}
.footer-col li { margin-bottom: 10px; }
.footer-col a { font-size: 14px; color: var(--text-body); transition: color var(--transition); }
.footer-col a:hover { color: var(--accent); }

/* Bottom bar — sits below the grid, never affected by column heights */
.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 24px;
  margin-top: 0;        /* grid margin-bottom handles the spacing */
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  clear: both;          /* safety net */
}
.footer-bottom p { font-size: 13px; color: var(--text-muted); }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .footer-grid   { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
}