/* ==========================================================================
   SITE FOOTER · colour "Soft Cobalt" (owner-approved 2026-10-13)
   Linked on every page just before assets/shared/design/fold.css.
   Applies to <footer class="mx mx-settled" id="site-foot">, the same block
   on every page. Colour only: the footer's layout, sizes, borders and
   positions come from assets/home/design.css (homepage) and
   assets/shared/header-footer.css (other pages) and are not changed here;
   a border keeps its width, only its colour moves.
   Undo: delete the <link> line on each page.

   Why: the cobalt footer read as dark, heavy and "blurry" next to the white
   pages. The cause was colour, not rendering: a large saturated dark field,
   pure-white icon tiles flashing against it, 19 light outlines, and the
   smallest capitals in #AEC9EF at 5.4 : 1.

   Colours, and their contrast on the footer blue #2661A4:
     footer blue              #2661A4   the header cobalt #004594 at 85% over white:
                                        twice as light, less saturated, still the header's blue
     names, values, brand     #FFFFFF   6.3 : 1
     capitals, CIN, notes     #F0F5FC   5.8 : 1
     icon tiles               #D8E4F6   the header's second bar, not glaring white
     keys, fact boxes,        8% white veil, outline coloured like the veil
     social boxes
     chips (hours, company)   #004594   the header bar itself, white text 9.2 : 1
     dividers                 12% white, quieter than the text they separate
   Hover is unchanged: a white key with a blue arrow.
   ========================================================================== */
html body #site-foot.mx{ --c-deck:#2661A4; --c-tile:#D8E4F6; --c-text:#F0F5FC; --c-veil:rgba(255,255,255,.08); --c-line:rgba(255,255,255,.12);
  background: var(--c-deck); }

/* the footer blue: the deck, the band behind the map, the reach card's head bar */
html body #site-foot.mx.mx-settled .mx-stage{
  background: linear-gradient(to bottom, var(--ground) 0, var(--ground) calc(100% - 176px), var(--c-deck) calc(100% - 176px)); }
@media (max-width: 900px){
  html body #site-foot.mx.mx-settled .mx-stage{
    background: linear-gradient(to bottom, var(--ground) 0, var(--ground) calc(100% - 120px), var(--c-deck) calc(100% - 120px)); }
}
html body #site-foot.mx .mx-deck,
html body #site-foot.mx .mx-ch{ background: var(--c-deck); }
/* the hours chip in that bar: the header's own cobalt, so its white text keeps 9.2 : 1 */
html body #site-foot.mx .mx-hours{ background: #004594; }

/* small text: every label and note at ≥ 5.8 : 1 */
html body #site-foot.mx .mx-deck .mx-label,
html body #site-foot.mx .mx-fk,
html body #site-foot.mx .mx-cin,
html body #site-foot.mx .mx-lede,
html body #site-foot.mx .mx-copy{ color: var(--c-text); }

/* tiles: the header's pale blue instead of glaring white */
html body #site-foot.mx .mx-tile{ background: var(--c-tile); }

/* keys, fact boxes, social boxes: tone-on-tone; the company badge is a chip like the hours */
html body #site-foot.mx .mx-deck .mx-key{ background: var(--c-veil); border-color: transparent; }
html body #site-foot.mx .mx-deck .mx-key svg{ stroke: #DCE8FA; }
html body #site-foot.mx a.mx-row:hover > .mx-key{ background: #FFFFFF; border-color: #FFFFFF; }
html body #site-foot.mx a.mx-row:hover > .mx-key svg{ stroke: var(--c-deck); }
html body #site-foot.mx .mx-fic{ background: var(--c-veil); border-color: transparent; }
html body #site-foot.mx .mx-fic svg{ stroke: #FFFFFF; }
html body #site-foot.mx .mx-soc a{ background: var(--c-veil); border-color: transparent; }
html body #site-foot.mx .mx-soc a:hover{ background: #FFFFFF; border-color: #FFFFFF; color: var(--c-deck); }
html body #site-foot.mx .mx-badge{ background: #004594; border-color: transparent; }

/* dividers: quieter than the text */
html body #site-foot.mx .mx-facts{ border-bottom-color: var(--c-line); }
html body #site-foot.mx .mx-fact:nth-child(3),
html body #site-foot.mx .mx-fact:nth-child(4){ border-left-color: var(--c-line); }
html body #site-foot.mx .mx-cols > .mx-col{ border-left-color: var(--c-line); }
html body #site-foot.mx .mx-col ul,
html body #site-foot.mx .mx-col li + li{ border-top-color: var(--c-line); }
html body #site-foot.mx .mx-base{ border-top-color: var(--c-line); }
html body #site-foot.mx .mx-cin{ border-left-color: var(--c-line); }