/* ==========================================================================
   Site footer. Deliberately quiet: the closing CTA lives in SYS.10 directly
   above, so the footer is wayfinding and legals only — no third call to
   action, and no back-to-top button (the floating control in chrome.css
   covers that from anywhere on the page).
   ========================================================================== */

footer{ border-top:1px solid var(--line); padding-block:11vh 5vh; position:relative; overflow:hidden; }

.foot-cols{ display:grid; grid-template-columns:1.55fr 1.65fr 1.2fr 1.05fr; gap:clamp(28px,4vw,56px); }
.foot-col h2{ font-size:var(--fs-2xs); letter-spacing:.2em; text-transform:uppercase; color:var(--faint); }
.foot-col ul{ list-style:none; margin-top:10px; display:grid; gap:2px; }
.foot-col li, .foot-col a{ font-size:var(--fs-md); letter-spacing:.03em; color:var(--muted); }
.foot-col li{ display:flex; align-items:center; min-height:44px; }
.foot-col a{ display:flex; align-items:center; min-height:44px; width:100%; transition:color .35s var(--ease-out); }
@media (hover:hover){ .foot-col a:hover{ color:var(--accent); } }

/* Navigate is the full sitemap — eight entries against four in every other
   column, which left it running ~180px past its neighbours. Split into two,
   flowing DOWN each column rather than across rows, so the list still reads in
   page order: Modules -> Scopes on the left, Engagement -> Contact on the right. */
.foot-navcol ul{ grid-auto-flow:column; grid-template-rows:repeat(4,auto); column-gap:clamp(14px,1.8vw,30px); }

.foot-brandcol .fb-name{ font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:1.2rem; color:var(--ink); }
.foot-brandcol .fb-tag{ margin-top:14px; font-size:var(--fs-md); line-height:1.75; color:var(--muted); max-width:32ch; }
.foot-brandcol .fb-tag strong{ color:var(--ink); font-weight:500; }
.f-status{ display:inline-flex; align-items:center; gap:9px; margin-top:22px; font-size:var(--fs-2xs); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.f-status .dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); animation:pulse 2.6s var(--ease-out) infinite; }

.foot-meta{ margin-top:8vh; padding-top:4vh; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; font-size:var(--fs-2xs); letter-spacing:.16em; text-transform:uppercase; color:var(--faint); }

@media (max-width:960px){ .foot-cols{ grid-template-columns:1fr 1fr; gap:32px clamp(24px,4vw,48px); } .foot-brandcol{ grid-column:1 / -1; } }
@media (max-width:520px){
  .foot-cols{ grid-template-columns:1fr; }
  /* Full width now, so two sub-columns still hold and halve the footer's height. */
  .foot-navcol ul{ column-gap:clamp(12px,4vw,28px); }
}
@media (max-width:360px){
  /* Tap targets sit too close side by side at this width. */
  .foot-navcol ul{ grid-auto-flow:row; grid-template-rows:none; }
}

/* Oversized wordmark, sized to the footer's own content box rather than the
   viewport: a vw-based size overflowed by up to 915px once .wrap's max-width
   capped the container, so most of the word sat outside the clip. cqi is 1% of
   that box, and 11.1cqi is the largest size at which the nine glyphs still fit
   on one line.
   Ghosted rather than outline-only — a 0.16-alpha hairline was close to
   invisible. A light fill plus a stronger stroke reads as a watermark without
   competing with the footer text above it. */
footer{ container-type:inline-size; }
footer .big{ font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:11.1cqi; line-height:.8; letter-spacing:-.03em; margin-top:8vh; white-space:nowrap;
  color:color-mix(in oklab, var(--ink) 7%, transparent);
  -webkit-text-stroke:1.5px color-mix(in oklab, var(--ink) 30%, transparent); }
@supports not (font-size:1cqi){ footer .big{ font-size:clamp(2.2rem,10vw,9.6rem); } }