.ngf-site-footer {
  background: linear-gradient(180deg, rgb(10 10 8 / 50%), transparent), url(/themes/custom/ngf/assets/images/subnav-bg.webp) center / cover no-repeat;
  color: #e7e5e0;
}

.ngf-site-footer__accent {
  height: 8px;
  margin: 0;
  border: 0;
  background: linear-gradient(90deg, var(--ngf-geodetic-400), var(--ngf-seismic-400));
}

.ngf-site-footer__social {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
  padding: 28px 48px;
  border-bottom: 1px solid rgba(255,255,255,0.18);
}
.ngf-site-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--ngf-r-sm);
  border: 1px solid rgba(255,255,255,0.24);
  background: rgba(255,255,255,0.1);
  color: #e7e5e0;
  transition: background var(--ngf-dur-base) var(--ngf-ease-out),
              border-color var(--ngf-dur-base) var(--ngf-ease-out),
              color var(--ngf-dur-base) var(--ngf-ease-out),
              transform var(--ngf-dur-base) var(--ngf-ease-out);
}
.ngf-site-footer__social-link svg { width: 24px; height: 24px; fill: currentColor; display: block; }
.ngf-site-footer__social-link:hover {
  background: #fff;
  border-color: #fff;
  color: var(--ngf-ink-900);
  transform: translateY(-2px);
}

.ngf-site-footer__inner {
  padding-top: 56px;
  padding-bottom: 36px;
}

.ngf-site-footer__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 56px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255,255,255,0.18);
}

.ngf-site-footer__brand {
  flex: 0 1 400px;
}

/* The menu is content-managed, so the number of columns isn't fixed — however
   many footer-columns produces share the space left of the brand block evenly.
   Long link text wraps inside its column rather than pushing the whole column
   onto a second row. The floor is min-content, not 0: at 0 the tracks squeeze
   past .ngf-site-footer__col's min-width and an unbreakable word like
   INSTRUMENTATION overflows into the next column around 1060px. */
.ngf-site-footer__menu-cols {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(min-content, 1fr);
  gap: 40px;
}

/* The footer-columns menu renders one <ul> wrapping the column <li>s. Let the
   wrapper dissolve so each column becomes a grid item of the container above. */
.ngf-site-footer__cols { display: contents; }
.ngf-site-footer__col { list-style: none; min-width: 120px; }

/* Brand block */
.ngf-site-footer__wordmark {
  font-family: var(--ngf-font-display);
  font-size: 2rem;
  font-weight: var(--ngf-w-black);
  letter-spacing: var(--ngf-tr-tight);
  color: #fff;
}
.ngf-site-footer__fullname {
  font-family: var(--ngf-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c2beb5;
  margin-top: 8px;
}
.ngf-site-footer__logo { display: block; height: 64px; width: auto; opacity: 0.92; }
.ngf-site-footer__about {
  margin-top: 18px;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: #c2beb5;
  max-width: 360px;
}
/* Inline links in the about text and legal row: inherit their surrounding
   colour, underline on interaction (WCAG 1.4.1). Declared before __about-em so
   that rule's colour still wins on the link that carries both classes. */
.ngf-site-footer__inline-link {
  color: inherit;
  text-decoration: none;
}
/* #fff overrides base.css's global a:hover, matching __link's hover. */
.ngf-site-footer__inline-link:hover,
.ngf-site-footer__inline-link:focus-visible {
  color: #fff;
  text-decoration: underline;
}
.ngf-site-footer__about-em {
  color: #e7e5e0;
  font-weight: var(--ngf-w-semi);
}
.ngf-site-footer__partners {
  margin-top: 18px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ngf-site-footer__chip {
  font-family: var(--ngf-font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--ngf-r-sm);
  color: #c6cacb;
}

/* Link columns */
.ngf-site-footer__col-head {
  font-family: var(--ngf-font-mono);
  font-size: 0.8125rem; /* ~13px; was 11px — larger + scales with user font size */
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c2beb5;
  margin-bottom: 14px;
}
.ngf-site-footer__col-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ngf-site-footer__link {
  display: inline-block;
  padding: 3px 0; /* taller hit area toward the 24px target minimum */
  font-family: var(--ngf-font-body);
  letter-spacing: normal;
  font-size: 1rem; /* was 13px — larger + scales with user font size */
  color: #fff; /* was #c6cacb / fallback blue — white ≈ 17:1 on ink-900 */
  text-decoration: none;
  transition: color var(--ngf-dur-base) var(--ngf-ease-out);
}
/* Underline on interaction so links aren't conveyed by colour alone (WCAG 1.4.1) */
.ngf-site-footer__link:hover,
.ngf-site-footer__link:focus-visible {
  color: #fff;
  text-decoration: underline;
}
/* Keyboard focus uses the site-wide --ngf-focus-ring token (see base.css);
   its white inner ring stays visible against this dark footer. */

/* Legal row */
.ngf-site-footer__legal {
  padding-top: 24px;
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.8125rem; /* ~13px; was 11px */
  color: #c2beb5;
  font-family: var(--ngf-font-mono);
  letter-spacing: 0.04em;
}

@media (max-width: 1024px) {
  .ngf-site-footer__top { flex-direction: column; gap: 36px; }
  .ngf-site-footer__brand { flex-basis: auto; max-width: 480px; }
  /* __top stacks here, so the grid needs the full width to lay out against —
     as a flex-start child it would otherwise shrink to one column wide. */
  .ngf-site-footer__menu-cols {
    align-self: stretch;
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
}
@media (max-width: 560px) {
  .ngf-site-footer__top { gap: 28px; }
  .ngf-site-footer__menu-cols { gap: 28px; }
  .ngf-site-footer__legal { flex-direction: column; align-items: flex-start; gap: 10px; }
}