/* ══════════════════════════════════════════════════════════════
   NEO — FOOTER
   One stylesheet for every page. The footer markup used to be
   duplicated across neo-styles.css, neo-page.css and four inline
   <style> blocks; this replaces all of them so the layout only
   exists once.

   Three tiers: brand + CTA beside the link columns, a contact strip,
   then a bottom bar. Light-theme values live at the end.
   ══════════════════════════════════════════════════════════════ */

footer{
  background:#150720;
  color:rgba(255,255,255,0.6);
  padding:0;
  border-top:1px solid rgba(255,255,255,0.08);
}
footer .wrap{ padding-top:0; padding-bottom:0; }

/* ── Tier 1: brand + nav ─────────────────────────────────────── */
.ft-top{
  display:grid; grid-template-columns:minmax(280px,1.1fr) 2fr;
  gap:72px; padding:76px 0 56px;
}
.ft-lead img{ height:30px; margin-bottom:22px; }
.ft-tag{
  font-size:15px; font-weight:300; line-height:1.65;
  color:rgba(255,255,255,0.58); max-width:330px; margin-bottom:26px;
}
.ft-nav{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
.ft-col h5{
  font-size:10.5px; font-weight:700; letter-spacing:0.16em;
  text-transform:uppercase; color:#fff; margin-bottom:20px;
}
.ft-col a{
  display:block; width:fit-content; font-size:14px;
  color:rgba(255,255,255,0.56); padding:6px 0;
  transition:color .22s;
}
.ft-col a:hover{ color:#fff; }

/* ── Tier 2: contact strip ───────────────────────────────────── */
.ft-contact{
  display:grid; grid-template-columns:repeat(3,1fr); gap:40px;
  padding:30px 0; border-top:1px solid rgba(255,255,255,0.08);
}
.ft-kv span{
  display:block; font-size:10px; font-weight:600; letter-spacing:0.16em;
  text-transform:uppercase; color:rgba(255,255,255,0.4); margin-bottom:9px;
}
.ft-kv a, .ft-kv b{
  font-size:15px; font-weight:500; color:rgba(255,255,255,0.88);
  transition:color .22s;
}
.ft-kv a:hover{ color:var(--nc-magenta); }

/* ── Tier 3: bottom bar ──────────────────────────────────────── */
.ft-bottom > span{ white-space:nowrap; }
.ft-bottom{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
  padding:24px 0 30px; border-top:1px solid rgba(255,255,255,0.08);
  font-size:12.5px; color:rgba(255,255,255,0.42); text-align:left;
}
.ft-legal{ display:flex; gap:26px; flex-wrap:wrap; }
.ft-legal a{ white-space:nowrap; }
.ft-legal a{ color:rgba(255,255,255,0.42); transition:color .22s; }
.ft-legal a:hover{ color:#fff; }@media (max-width:900px){
  .ft-top{ grid-template-columns:1fr; gap:48px; padding:56px 0 40px; }
  .ft-nav{ grid-template-columns:1fr 1fr; gap:32px; }
  .ft-contact{ grid-template-columns:1fr; gap:24px; }
  .ft-bottom{ flex-direction:column; align-items:flex-start; gap:16px; }}@media (max-width:560px){ .ft-nav{ grid-template-columns:1fr; }}

/* ══ Light theme ═══════════════════════════════════════════════
   The light version gets a light footer rather than a dark anchor,
   so the page ends on the same surface family it lives on. */
body.theme-light footer{
  /* Muted footer text sits on a tinted surface, so the white-tuned grey
     (#8B7A9E, 3.2:1) failed AA. One token, dark enough for #EFE6F8. */
  --ft-muted:#6A5880;
  background:#F4EEFA;
  color:var(--ink-soft);
  border-top:1px solid var(--line);
}
body.theme-light .ft-tag{ color:var(--ink-soft); }
body.theme-light .ft-col h5{ color:var(--ink); }
body.theme-light .ft-col a{ color:var(--ink-soft); }
body.theme-light .ft-col a:hover{ color:var(--nc-magenta-ink); }
body.theme-light .ft-contact,
body.theme-light .ft-bottom{ border-top:1px solid var(--line); }
body.theme-light .ft-kv span{ color:var(--ft-muted); }
body.theme-light .ft-kv a,
body.theme-light .ft-kv b{ color:var(--ink); }
body.theme-light .ft-kv a:hover{ color:var(--nc-magenta-ink); }
body.theme-light .ft-bottom{ color:var(--ft-muted); }
body.theme-light .ft-legal a{ color:var(--ft-muted); }
body.theme-light .ft-legal a:hover{ color:var(--nc-magenta-ink); }
body.theme-light .ft-lead img{ filter:none; }
/* ── Ghost wordmark ──────────────────────────────────────────────
   The brand name set very large and very faint across the base of
   the page. Two details make it a watermark rather than a banner:
   opacity low enough that it never competes with the links, and a
   line-height under 1 so the letters sit tight to the page edge
   instead of floating in their own band of space. */
.site-footer{ position:relative; overflow:hidden; }
.ft-wordmark{
  font-family:var(--font-display,"Poppins",system-ui,sans-serif);
  font-weight:700; letter-spacing:-.06em; line-height:.76;
  font-size:clamp(5rem,24vw,18rem);
  text-align:center;
  color:rgba(251,247,254,.055);
  user-select:none; pointer-events:none;
  margin:clamp(10px,2vw,22px) 0 -0.14em;
  position:relative; z-index:0;
}
body.theme-light .ft-wordmark{ color:rgba(27,13,38,.055); }

/* Everything above it stays on top. */
.site-footer > *:not(.ft-wordmark){ position:relative; z-index:1; }

@media (max-width:560px){
  .ft-wordmark{ font-size:clamp(4rem,30vw,8rem); margin-bottom:-0.12em; }
}


/* ── Spacing ─────────────────────────────────────────────────────
   The wordmark was added with a negative bottom margin to pull it
   tight to the page edge, and that dragged it up against the rule
   above it. It needs clear air above and only a hair below. */
.site-footer{ position:relative; overflow:hidden; }
.site-footer .ft-wordmark{
  margin-top:clamp(28px,4vw,52px);
  margin-bottom:-0.1em;
  padding-top:0;
}
/* Restore breathing room around the bottom bar, which the wordmark
   had been sitting on top of. */
.site-footer .ft-bottom{
  margin-top:clamp(22px,3vw,34px);
  padding-top:clamp(16px,2vw,22px);
  padding-bottom:clamp(8px,1.4vw,14px);
}
/* When a block is switched off, the one above it should not inherit
   a margin meant to separate them. */
.site-footer .ft-contact{ margin-top:clamp(20px,2.6vw,30px); }
.site-footer .ft-top{ padding-bottom:clamp(8px,1.4vw,16px); }
@media (max-width:560px){
  .site-footer .ft-wordmark{ margin-top:26px; }
}