/* ============================================================
   Cognitivv — the footer
   ------------------------------------------------------------
   One footer, one markup, loaded by both stylesheet families
   (pm.css on the brand pages, site.css on the training funnel).
   It used to be two different bars with two different link sets,
   which meant a visitor who crossed from /pm to /dental got a
   different map of the same company.

   It carries the taxonomy the mega menu does — Products, Go
   deeper, Company, Elsewhere — so somebody who scrolled past the
   nav still meets the site's own idea of how it is organised.
   The positioning line on the left is the only place that
   sentence is repeated, and that is deliberate: it is the last
   thing on the page.

   Self-contained on purpose: it sets its own container rather
   than borrowing .wrap or .footer-inner, because those two mean
   different widths in the two families.
   ============================================================ */

.footer-wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}
@media (max-width: 560px) { .footer-wrap { padding: 0 20px; } }

.footer {
  padding: 72px 0 40px;
  background: var(--bg-charcoal);
  color: var(--fg-on-dark-3);
  font-size: 13px;
  /* A hairline of warmth where the cream page meets the charcoal foot, so
     the seam reads as a fold rather than a cut. */
  box-shadow: inset 0 1px 0 rgba(250, 246, 239, 0.07);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(230px, 1fr) minmax(0, 2.15fr);
  gap: 48px 72px;
  padding-bottom: 44px;
}

/* ---- brand block ---- */
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.footer-brand .footer-line { margin-top: -4px; }
.footer-mark { display: inline-block; }
.footer img { height: 44px; width: auto; display: block; }
.footer-line {
  margin: 0;
  max-width: 17em;
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.3;
  letter-spacing: 0.012em;
  color: var(--fg-on-dark-1);
}
/* The one link in the footer that is an invitation rather than a destination,
   so it gets the underline the others do not. */
.footer-cta {
  color: var(--accent-soft);
  text-decoration: none;
  font-size: 13px;
  line-height: 1.4;
  max-width: 21em;
  /* text-decoration, not a border: the rule has to hug the words on each
     wrapped line, and a border-bottom draws one line the full width of the
     box instead. */
  text-decoration: underline;
  text-decoration-color: rgba(244, 184, 154, 0.4);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-2) var(--ease-out), text-decoration-color var(--dur-2) var(--ease-out);
}
.footer-cta:hover { color: var(--fg-on-dark-1); text-decoration-color: var(--fg-on-dark-1); }

/* ---- link columns ---- */
.footer-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 36px 28px;
}
.footer-h {
  margin: 0 0 14px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-on-dark-3);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer-col a {
  color: var(--fg-on-dark-2);
  text-decoration: none;
  font-size: 13.5px;
  line-height: 1.35;
  transition: color var(--dur-1) var(--ease-out);
}
.footer-col a:hover { color: var(--accent-soft); }

/* ---- base row ---- */
.footer-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(250, 246, 239, 0.12);
  font-size: 12.5px;
}
.footer-base a {
  color: var(--fg-on-dark-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.footer-base a:hover { color: var(--accent-soft); border-bottom-color: currentColor; }
.footer-legal { display: flex; gap: 18px; }

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 560px) {
  .footer { padding-top: 56px; }
  .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 20px; }
  .footer-base { justify-content: flex-start; }