/* ============================================================
   Shared site footer - single source of truth, loaded on EVERY page.
   Everything is scoped under .kn-footer so these rules override any
   legacy footer CSS (index inline, site-chrome.css, case-page.css,
   about/blog inline) purely by specificity - no need to strip the old
   rules. Colours and fonts fall back to hardcoded brand values so the
   footer renders identically whether or not the host page defines the
   design tokens.
   Keep the footer MARKUP in sync across all pages (canonical block).
   ============================================================ */
.kn-footer{
  background:var(--ink,#14100D);color:var(--cream,#F2F1EB);
  padding:80px 0 32px;position:relative;overflow:hidden;
  font-family:var(--font-text,system-ui,'Helvetica Neue',sans-serif);
}
.kn-footer *{box-sizing:border-box}
.kn-footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--terra,#A02F06),transparent);
}
.kn-footer .footer-inner{max-width:1500px;margin:0 auto;padding:0 40px}

/* Top: brand + 3 link columns */
.kn-footer .footer-top{
  display:grid;grid-template-columns:1fr auto auto auto;
  column-gap:clamp(32px,3.5vw,56px);row-gap:32px;padding-bottom:56px;
  border-bottom:1px solid rgba(242,241,235,0.1);align-items:start;
}
.kn-footer .footer-brand{max-width:440px}
.kn-footer .footer-brand .wm{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.kn-footer .footer-brand .wm-symbol{height:46px;width:auto;display:block;filter:brightness(0) invert(1);opacity:0.95}
.kn-footer .footer-brand .wm-text{height:40px;width:auto;display:block;filter:brightness(0) invert(1);opacity:0.95}
.kn-footer .footer-brand p{margin:0;color:rgba(242,241,235,0.6);font-size:14px;max-width:360px;line-height:1.6}

/* Newsletter sign-up (captured via Netlify Forms) */
.kn-footer .footer-news{margin-top:26px;max-width:400px}
.kn-footer .footer-news-label{display:block;font-family:var(--font-mono,ui-monospace,'SF Mono',Menlo,monospace);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-faint,#7A6F66);margin:0 0 14px}
.kn-footer .footer-news-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.kn-footer .footer-news-note{margin:16px 0 0;font-size:12px;line-height:1.5;color:rgba(242,241,235,0.5)}
.kn-footer .footer-news-row{display:flex;align-items:stretch;border:1px solid rgba(242,241,235,0.22);border-radius:100px;overflow:hidden;background:rgba(242,241,235,0.04);transition:border-color 0.2s}
.kn-footer .footer-news-row:focus-within{border-color:rgba(165,207,249,0.6)}
.kn-footer .footer-news input[type=email]{flex:1;min-width:0;background:transparent;border:none;color:var(--cream,#F2F1EB);padding:13px 20px;font-family:inherit;font-size:14px;outline:none}
.kn-footer .footer-news input[type=email]::placeholder{color:rgba(242,241,235,0.4)}
.kn-footer .footer-news button{background:var(--terra,#A02F06);color:var(--cream,#F2F1EB);border:none;padding:13px 24px;font-family:var(--font-display,system-ui,sans-serif);font-weight:700;text-transform:uppercase;letter-spacing:0.1em;font-size:12px;cursor:pointer;white-space:nowrap;transition:background 0.2s,color 0.2s}
.kn-footer .footer-news button:hover{background:var(--sky,#A5CFF9);color:var(--ink,#14100D)}

/* Link columns (Agency / Legal / Connect), left-aligned */
.kn-footer .footer-col{text-align:left}
.kn-footer .footer-col h4{font-family:var(--font-mono,ui-monospace,'SF Mono',Menlo,monospace);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-faint,#7A6F66);margin:0 0 24px;font-weight:500}
.kn-footer .footer-col a{display:block;color:var(--cream,#F2F1EB);text-decoration:none;font-size:14px;margin:0 0 13px;opacity:0.72;transition:opacity 0.2s,color 0.2s,transform 0.2s}
.kn-footer .footer-col a:hover{opacity:1;color:var(--sky,#A5CFF9);transform:translateX(3px)}
.kn-footer .footer-col a.footer-social-link{display:flex;align-items:center;justify-content:flex-start;gap:9px}
.kn-footer .footer-social-link svg{width:16px;height:16px;flex-shrink:0;display:block}

/* Bottom bar + copyright note */
.kn-footer .footer-bottom{padding-top:32px;display:flex;justify-content:space-between;align-items:center;gap:16px 32px;flex-wrap:wrap;font-family:var(--font-mono,ui-monospace,'SF Mono',Menlo,monospace);font-size:11px;letter-spacing:0.08em;color:var(--ink-faint,#7A6F66);text-transform:uppercase}
.kn-footer .footer-bottom-right{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.kn-footer .footer-legal-note{margin:18px 0 0;max-width:680px;font-size:11px;line-height:1.55;color:var(--ink-faint,#7A6F66)}

@media (max-width:900px){
  .kn-footer{padding:64px 0 28px}
  .kn-footer .footer-inner{padding:0 24px}
  .kn-footer .footer-top{grid-template-columns:1fr 1fr;gap:32px 24px}
  .kn-footer .footer-brand{grid-column:1/3;max-width:none}
}
@media (max-width:600px){
  /* Three link menus side by side, brand spanning the full width above.
     Every item is explicitly placed (with .kn-footer specificity) so stale
     per-page inline footer CSS can't collide items into the same cell. */
  .kn-footer .footer-top{grid-template-columns:1fr 1fr 1fr;column-gap:14px;row-gap:30px}
  .kn-footer .footer-brand{grid-column:1/4;grid-row:1;max-width:none;text-align:left}
  .kn-footer .footer-col.agency{grid-column:1;grid-row:2;text-align:left}
  .kn-footer .footer-col.connect{grid-column:2;grid-row:2;text-align:left}
  .kn-footer .footer-col.legal{grid-column:3;grid-row:2;text-align:left}
  .kn-footer .footer-col h4{margin-bottom:16px}
  .kn-footer .footer-col a{font-size:13px}
  .kn-footer .footer-col a.footer-social-link{gap:7px}
  .kn-footer .footer-bottom{flex-direction:column;align-items:flex-start;gap:14px}
}