/* ============================================================
   FOOTER (simple version) — brand, tagline and contact on the left,
   four short link lists on the right, small print underneath, with
   plenty of space between. Sits on the footer's existing dark navy.
   ============================================================ */

.foot { padding-top: 1.5rem; }

.foot-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 3rem;
  padding-bottom: 6rem;
}

.foot-brand img { height: 48px; margin-bottom: 1.25rem; filter: brightness(0) invert(1); }
.foot-tagline { margin: 0 0 1rem; font-size: 0.95rem; font-weight: 600; white-space: nowrap; color: var(--white); }   /* the tagline is never split across lines */
.foot-contact { margin: 0; font-size: 0.9rem; line-height: 1.8; color: rgba(255, 255, 255, 0.65); }

.foot-cols { display: flex; gap: 3.5rem; }
.foot-col h5 { margin: 0 0 1.1rem; font-size: 0.95rem; font-weight: 700; color: var(--white); }
.foot-col a { display: block; padding: 0.4rem 0; font-size: 0.9rem; color: rgba(255, 255, 255, 0.65); }
.foot a { transition: color var(--transition); }
.foot-contact a { color: rgba(255, 255, 255, 0.65); border-bottom: 1px solid rgba(255, 255, 255, 0.25); }
.foot a:hover,
.foot a:focus-visible { color: var(--light-blue); }

.foot-bottom {
  display: grid;
  gap: 0.2rem;
  padding: 0 0 2.5rem;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 900px) {
  .foot-top { flex-direction: column; gap: 2.5rem; padding-bottom: 3.5rem; }
  .foot-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 1.5rem; width: 100%; }
}