/* ============================================================
   Shared Footer — used on every page
   ============================================================ */

.site-footer {
  padding: 48px var(--pad-x) 28px;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  align-items: start;
}

.site-footer .brand { grid-column: 1 / span 4; }
.site-footer .brand img { height: 24px; margin-bottom: 14px; }
.site-footer__logo {
  display: inline-flex;
  color: #fff;
  margin-bottom: 16px;
}
.site-footer__logo svg { height: 36px; width: auto; }
.site-footer__logo svg path { opacity: 1; transform: none; }
.site-footer .brand p {
  color: var(--muted);
  font-size: 13px;
  max-width: 34ch;
  line-height: 1.6;
  margin-bottom: 18px;
}
.site-footer .brand .social {
  display: flex; gap: 14px;
}
.site-footer .brand .social a {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .2s;
}
.site-footer .brand .social a:hover { color: #fff; }

/* Icon variant — email / linkedin / instagram / youtube rendered as
   compact square icons matching the nav icon rail. */
.site-footer .brand .social--icons { gap: 10px; }
.site-footer__logo + p + .social--icons { margin-top: 4px; }
.site-footer .social--icons .social__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  transition: color .2s, border-color .2s, background .2s;
}
.site-footer .social--icons .social__icon svg { width: 18px; height: 18px; display: block; }
.site-footer .social--icons .social__icon:hover {
  color: var(--blue);
  border-color: var(--blue);
  background: rgba(91, 90, 255, .08);
}

/* Small SEO-only contact page link — subtle, inherits muted treatment */
.site-footer__seo-link { color: var(--muted-2, #5a5a5a) !important; font-size: 12px !important; }
.site-footer__seo-link:hover { color: var(--muted) !important; }

.site-footer .col { grid-column: span 2; }
.site-footer .col h5 {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.site-footer .col ul {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.site-footer .col a {
  color: #cfcfcf;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 13.5px;
  transition: color .2s;
}
.site-footer .col a:hover { color: #fff; }

.site-footer .tail {
  grid-column: 1 / span 12;
  border-top: 1px solid var(--border);
  padding-top: 22px;
  margin-top: 28px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.site-footer .tail a { color: var(--muted); transition: color .2s; }
.site-footer .tail a:hover { color: #fff; }

/* Legal cluster — Privacy · Cookies · Cookie settings sit together
   in the centre of the tail row so they read as one navigation chunk
   rather than three orphans. The bullets between them use the same
   muted treatment as the rest of the tail copy. */
.site-footer .site-footer__legal {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.site-footer .site-footer__legal a { cursor: none; }
@media (hover: none) {
  .site-footer .site-footer__legal a { cursor: pointer; }
}

/* About-PXL summary block — entity definition surfaced on every
   page so AI search engines have explicit context. Spans the full
   row above the legal tail; reads as a compact factual paragraph
   rather than promotional copy. */
.site-footer__about {
  grid-column: 1 / span 12;
  border-top: 1px solid var(--border);
  padding-top: 22px;
  margin-top: 28px;
  max-width: 80ch;
}
.site-footer__about h5 {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}
.site-footer__about p {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.6;
  color: #b8b8b8;
  margin: 0 0 8px;
}
.site-footer__about-meta {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted) !important;
  margin-top: 8px !important;
}
.site-footer__about a { color: #cfcfcf; transition: color .2s; }
.site-footer__about a:hover { color: #fff; }

@media (max-width: 820px) {
  .site-footer .brand { grid-column: 1 / span 12; }
  .site-footer .col { grid-column: span 6; }
}
@media (max-width: 480px) {
  .site-footer .col { grid-column: span 12; }
}