/* ==========================================================================
   Footer  (.pf-footer)
   Mirrors the nav's condensed uppercase links, with a hairline top rule.
   Inverse variant reproduces the dark "say hello" band from the case studies.
   ========================================================================== */

.pf-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--pf-space-3);
  padding: var(--pf-space-5) var(--pf-gutter);
  background: var(--pf-surface);
  color: var(--pf-ink);
  border-top: var(--pf-border) solid var(--pf-hairline);
}

.pf-footer__link {
  font-family: var(--pf-font-display);
  font-weight: var(--pf-weight-display);
  font-size: var(--pf-text-label);
  letter-spacing: var(--pf-tracking-label);
  text-transform: uppercase;
  color: var(--pf-ink);
  transition: color var(--pf-dur) var(--pf-ease);
}
.pf-footer__link:hover,
.pf-footer__link:focus-visible {
  color: var(--pf-ink);
  text-decoration: underline;
  text-decoration-color: var(--pf-accent);
  text-underline-offset: 0.2em;
}

/* Contact meta row (email / phone / links) — serif, secondary */
.pf-footer__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--pf-space-2) var(--pf-space-4);
  font-family: var(--pf-font-body);
  color: var(--pf-ink-secondary);
  font-size: var(--pf-text-body);
}

/* --- Inverse band (dark "say hello") --- */
.pf-footer--inverse {
  flex-direction: column;
  background: var(--pf-surface-inverse);
  color: var(--pf-ink-inverse);
  border-top: none;
  padding-block: var(--pf-space-7);
  text-align: center;
}
.pf-footer--inverse .pf-footer__link {
  color: var(--pf-ink-inverse);
}
.pf-footer--inverse .pf-footer__link:hover,
.pf-footer--inverse .pf-footer__link:focus-visible {
  color: var(--pf-ink-inverse);
  text-decoration: underline;
  text-decoration-color: var(--pf-accent);
  text-underline-offset: 0.2em;
}
.pf-footer--inverse .pf-footer__meta {
  color: var(--pf-ink-inverse);
  opacity: 0.85;
}