/* ============================================================================
   SITE FOOTER, CREDENTIAL STRIP AND HELP ROUTING — added 2026-08-12.

   WHY THIS FILE EXISTS: Mark, after looking at presidio.com — "i like the look
   and feel of this site, can we adjust our site, while keeping our message
   clear, to be more organized like this". The ask is ORGANISATION, not voice,
   so nothing here restyles or rewrites a word of the existing copy. It adds the
   three things that site does and this one did not:

     1. A footer that is a grouped sitemap. THIS SITE HAD NO FOOTER AT ALL —
        `<footer>` did not appear in business.html; the homepage simply ended on
        its contact button. That was the single biggest gap and the cheapest to
        close.
     2. A credential strip, so the twenty years and the certifications are
        skimmable rather than buried in a paragraph two thirds down.
     3. A three-way "what do you actually want" routing block, in place of one
        button that assumes everybody wants the same thing.

   UNHASHED FILENAME, ON PURPOSE. Every page already loads /assets/palette.css
   the same way. The hashed site.<hash>.css is hashed because it changes with
   the design; this file is additive and referenced by eight pages, and a hash
   would mean rewriting all eight every time a padding value moves.

   IT USES ONLY EXISTING TOKENS from palette.css — no new colours are invented
   here. A footer that introduced its own palette would be the opposite of
   organised.
   ========================================================================= */

/* --- The credential strip --------------------------------------------------
   Facts already stated in prose on the homepage, pulled out where they can be
   read at a glance. NOTHING NEW IS CLAIMED HERE and nothing should be added
   that is not already written, and already true, further down the page. */
.credbar{
  display:flex;flex-wrap:wrap;gap:10px 28px;align-items:baseline;
  margin:26px 0 0;padding:16px 0 0;border-top:1px solid var(--line-ui);
}
.credbar span{font:600 13px/1.4 var(--mono);color:var(--ink-dim);
  letter-spacing:.04em}
.credbar b{color:var(--ink);font-weight:700}

/* --- The three-way routing block -------------------------------------------
   DELIBERATELY NOT A PRICE GRID. business.html's own comment on the four
   offerings is explicit that "four boxes with numbers in them is the failure
   mode this section was written to avoid", and that judgement is not overturned
   by a layout task. These three route by what the reader WANTS; the prices stay
   in sentences where they were put on purpose. */
.routes{display:grid;gap:18px;margin:28px 0 8px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.route{padding:20px 22px;border:1px solid var(--line-ui);border-radius:10px;
  background:var(--bg-2)}
.route h3{margin:0 0 8px;font-size:16.5px;line-height:1.3;color:var(--ink-bright)}
.route p{margin:0 0 14px;font-size:15px;line-height:1.55;color:var(--ink-read)}
.route a{font:700 13.5px/1 var(--mono);letter-spacing:.06em;
  text-transform:uppercase;color:var(--signal);text-decoration:none;
  border-bottom:1px solid transparent}
.route a:hover,.route a:focus-visible{border-bottom-color:var(--signal)}

/* --- The footer ------------------------------------------------------------
   Four groups, because that is how many distinct reasons there are to be on
   this site. If a page is added it goes in a group here AND in the nav on every
   page — the nav's own comment says a page missing from that list is invisible,
   and the same is true of this one. */
.sitefoot{border-top:1px solid var(--line);background:var(--bg-2);
  padding:clamp(40px,6vw,64px) 0 28px;margin-top:0}
.sitefoot .footgrid{display:grid;gap:28px 32px;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
/* color:var(--ink-dim), NOT --ink-faint — fixed 2026-08-17 (Wren, site
   uniformity pass 2, on Nadia's measurement). site.cc17860c.css's own
   accessibility note already says --ink-faint is decorative only and
   measures 3.23:1, under the 4.5:1 floor, and that body/footer text should
   use --ink-dim instead — this rule and .footbase p below just never got the
   memo. Real pixels behind real text, GPU-backed Chromium over CDP: this
   heading was 2.93:1 in the dark theme. --ink-dim clears both themes without
   a new token (5.27:1 dark on --bg-2, 6.96:1 light) — see palette.css's own
   closing comment for the full numbers. The decorative "~$ " prompt below
   keeps --ink-faint on purpose; it repeats information the link text already
   carries, which is exactly the case that comment says the token is for. */
.sitefoot h2{font:700 12px/1 var(--mono);letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-dim);margin:0 0 14px}
.sitefoot ul{list-style:none;margin:0;padding:0}
.sitefoot li{margin:0 0 9px}
/* --- THE FOOTER LINKS AS TERMINAL LINES -------------------------------------
   Mark, 2026-08-12: "down at the bottom.. where it has the links in the
   footers..does it hurt search of function if we make them look like linux
   commands". Short answer: not the way this is done, and it would have if it
   were done the obvious way.

   THE COST IS IN THE ANCHOR TEXT, NOT THE LOOK. Search engines read the words
   inside a link to work out what the target page is about, and a screen reader
   announces those same words. Rewriting "Our team" to "cd /team" in the markup
   would throw both of those away — every internal link would describe a shell
   command instead of a page, and someone listening would hear "see dee slash
   team".

   SO NOT ONE CHARACTER OF MARKUP CHANGED. The prompt is a CSS ::before, which
   is decoration: it is not part of the link's accessible name, and it is not
   anchor text. The words stay exactly as they were written. Same appearance,
   nothing given up — and it matches the wordmark at the top of every page,
   which has been doing this since long before the footer existed.

   IF ANYONE LATER "TIDIES" THIS by moving the prompt into the HTML, they have
   quietly taken the cost this comment exists to avoid. */
.sitefoot li a{color:var(--ink-read);text-decoration:none;
  font:500 14px/1.5 var(--mono);letter-spacing:.01em;text-transform:lowercase;
  border-bottom:1px solid transparent}
.sitefoot li a::before{content:"~$ ";color:var(--ink-faint)}
.sitefoot li a:hover,.sitefoot li a:focus-visible{color:var(--signal);
  border-bottom-color:var(--signal)}
.sitefoot li a:hover::before,.sitefoot li a:focus-visible::before{
  color:var(--signal)}
.sitefoot .footbase{display:flex;flex-wrap:wrap;gap:8px 24px;
  align-items:baseline;margin-top:34px;padding-top:20px;
  border-top:1px solid var(--line-ui)}
/* color:var(--ink-dim) — same fix, same reasoning as .sitefoot h2 above.
   Measured 2.10:1 in the dark theme; --ink-dim clears it. .footbase b (the
   name) already used --ink-dim, so this line now matches it exactly rather
   than sitting two tokens dimmer than the bold name beside it. */
.sitefoot .footbase p{margin:0;font:600 12.5px/1.5 var(--mono);
  color:var(--ink-dim);letter-spacing:.04em}
.sitefoot .footbase b{color:var(--ink-dim)}

@media (prefers-reduced-motion:no-preference){
  .route a,.sitefoot li a{transition:color .15s ease,border-color .15s ease}
}