/* ==========================================================================
   site-chrome/footer.css — the SITE FOOTER, "Settled Canvas", on every page.
   2026-09-20, on "my home page header and footer same apply in all pages".
   Markup: <footer class="mx mx-settled" id="site-foot"> — the same block on
   index.html and the five inner pages (the inner pages' old <footer id="sfoot">
   was replaced; their brand link points at index.html). Linked LAST in <head> on
   the five inner pages. The homepage does not load this file: the same rules
   close home-system/home.css (block "footer-canvas-m5x/settled.css"). The two
   copies are identical — change the footer in both, or the pages drift apart.
   Every rule is .mx-* scoped.
   ========================================================================== */

/* ==========================================================================
   Footer canvas · shared layer  (footer-canvas-m5x)
   The picked "Map Canvas", settled. Every version shares:
   · ONE 12-column grid (--cg gutters) inside the page lane, used by the map
     zone and the deck alike, so edges line up top to bottom: the reach card
     sits on columns 9–12 and its edge runs straight into the Company column.
   · a settled map — inside the lane, never full-bleed; on a white 8px mat;
     a fixed minimum height (--mh) that grows only if the card needs it.
   · the reach card — cobalt head with the real hours, the call as the
     heaviest row, WhatsApp + directions as two equal keys, e-mail, the
     address with its landmark.
   · the cobalt deck — company, what we do, company pages; base with the CIN.
   · one 8px spacing scale: 8 · 16 · 24 · 32 · 48 · 64.
   Square surfaces, flat edges, no shadows; keys 7px, chips 4px.
   ========================================================================== */
.mx{
  --ink:#0E1E35; --ink-2:#505C6C; --ink-3:#5B6778; --ink-4:#24364F;
  --act:#0760C6; --act-h:#004EA6; --cobalt:#004594;
  --edge:#DCE3EE; --edge-b:#C6D9F4; --edge-bb:#AEC9EF; --edge-h:#7FA6DC;
  --tint:#EEF4FC; --pale:#DDE9F9; --ground:#F3F7FC; --live:#2FB67C;
  --on-2:#DCE8FA; --on-3:#AEC9EF; --on-line:rgba(255,255,255,.16);
  --gut: clamp(24px, 4vw, 72px);
  --cg: clamp(16px, 1.7vw, 24px);
  --mh: clamp(408px, 31vw, 448px);
  --mat: 8px; --inset: 24px;
  --cpad: 20px;
  display: block; margin: 0; background: var(--cobalt); border-top: 1px solid var(--edge);
  font-family: var(--sans); color: var(--ink);
  scroll-margin-top: var(--barh);
}
.mx *{ box-sizing: border-box; }
.mx :where(a){ color: inherit; text-decoration: none; }
.mx :where(p, h3, ul, li){ margin: 0; padding: 0; }
.mx :where(ul){ list-style: none; }
.mx :where(button, input){ font: inherit; }
.mx [hidden]{ display: none !important; }
.mx :focus-visible{ outline: 2px solid var(--act); outline-offset: 2px; border-radius: 4px; }
/* inner-page leftovers: the inner pages' own sheets set img,svg{max-width:100%;display:block} and
   h1,h2,h3,h4{text-wrap:balance} on every element; the homepage footer has neither, and at 320px the
   first squeezed the clock in the hours chip to 8px. Class-scoped so they win over those bare selectors. */
.mx :where(svg){ max-width: none; }
.mx :where(h3){ text-wrap: wrap; }
.mx-in{ width: min(1440px, 100% - 2 * var(--gut)); margin-inline: auto; }
.mx-grid{ display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); }
.mx-label{
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--on-3); line-height: 1.4;
}
.mx-on{ color: #FFFFFF; }
.mx-sample{
  flex: none; display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 4px;
  background: #FFE9A8; color: #5A4300; font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
}

/* ---- the settled map zone ---- */
.mx-stage{ background: var(--ground); padding: 64px 0; }
.mx-stage .mx-grid{ align-items: center; }
.mx-frame{
  grid-column: 1 / -1; grid-row: 1; align-self: stretch; position: relative;
  min-height: var(--mh); background: #FFFFFF; border: 1px solid var(--edge-b);
}
.mx-map{ position: absolute; inset: var(--mat); background: var(--tint); }
.mx-map iframe{ display: block; width: 100%; height: 100%; border: 0; }
.mx-card{
  grid-column: 9 / 13; grid-row: 1; position: relative; z-index: 1;
  margin: calc(var(--mat) + var(--inset)) calc(var(--mat) + var(--inset)) calc(var(--mat) + var(--inset)) 0;
  background: #FFFFFF; border: 1px solid var(--edge-bb);
}
.mx-ch{ display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding: 0 12px 0 var(--cpad); background: var(--cobalt); }
.mx-hours{ display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px; border-radius: 4px;
  background: rgba(255,255,255,.12); color: #FFFFFF; font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.mx-hours svg{ width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mx-call{ display: flex; align-items: center; gap: 16px; padding: 16px var(--cpad); transition: background-color .15s ease; }
.mx-plate{ flex: none; width: 40px; height: 40px; display: grid; place-items: center; background: var(--cobalt); }
.mx-plate svg{ width: 18px; height: 18px; fill: none; stroke: #FFFFFF; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mx-plate-l{ width: 32px; height: 32px; background: var(--tint); }
.mx-plate-l svg{ width: 16px; height: 16px; stroke: var(--cobalt); }
.mx-num{ flex: 1; font-size: clamp(20px, 1.6vw, 23px); font-weight: 800; letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
.mx-call:hover{ background: #F5F8FD; }
.mx-call:hover .mx-num{ color: var(--act); }
.mx-call:focus-visible{ outline-offset: -2px; border-radius: 0; }
.mx-key{ flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 7px;
  background: #FFFFFF; border: 1px solid var(--edge-bb); transition: background-color .15s ease, border-color .15s ease; }
.mx-key svg{ width: 15px; height: 15px; fill: none; stroke: var(--act); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mx-call:hover > .mx-key{ background: var(--act); border-color: var(--act); }
.mx-call:hover > .mx-key svg{ stroke: #FFFFFF; }
.mx-acts{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 var(--cpad) 16px; border-bottom: 1px solid var(--edge); }
.mx-act{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 7px;
  background: #FFFFFF; border: 1px solid var(--edge-b); font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap;
  transition: border-color .15s ease, background-color .15s ease; }
.mx-act svg{ width: 17px; height: 17px; flex: none; }
.mx-act-wa svg{ fill: #1FA855; }
.mx-act-dir svg{ fill: none; stroke: var(--cobalt); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mx-act:hover{ border-color: var(--edge-h); background: var(--tint); }
.mx-ln{ display: flex; align-items: flex-start; gap: 16px; padding: 16px var(--cpad); }
.mx-ln + .mx-ln{ border-top: 1px solid var(--edge); }
.mx-ln > .mx-plate-l{ margin-left: 4px; }
.mx-tx{ min-width: 0; padding-top: 5px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.mx-tx a{ font-weight: 650; color: var(--ink); }
.mx-tx a:hover{ color: var(--act); text-decoration: underline; text-underline-offset: 3px; }
.mx-addr{ color: #21416D; }
.mx-near{ margin-top: 6px; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-3); }
.mx-near svg{ width: 15px; height: 15px; flex: none; fill: none; stroke: var(--ink-3); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---- the cobalt deck: same 12 columns ---- */
.mx-deck{ background: var(--cobalt); color: #FFFFFF; padding-top: 64px; }
.mx-cols > .mx-id{ grid-column: 1 / 5; }
.mx-cols > .mx-svc{ grid-column: 5 / 9; }
.mx-cols > .mx-co{ grid-column: 9 / 13; }
/* each column after the first: a 1px seam at its track start + the card's own 20px padding,
   so the Company words start exactly where the card's words start above */
.mx-cols > .mx-col{ border-left: 1px solid var(--on-line); padding-left: var(--cpad); }
.mx-brand{ display: inline-flex; align-items: center; gap: 16px; }
.mx-mk{ flex: none; display: block; width: 56px; height: 56px; padding: 3px; border-radius: 50%; background: #FFFFFF; }
.mx-mk svg{ display: block; width: 100%; height: 100%; }
.mx-mk svg text > tspan:nth-child(odd){ fill: #000000; }
.mx-mk svg text > tspan:nth-child(2){ fill: #0B57F5; }
.mx-mk svg circle{ stroke: #0B57F5; fill: #FFFFFF; }
.mx-mk svg text{ transform: translate(-0.9px, 0.85px); }
.mx-brand b{ font-size: clamp(22px, 1.9vw, 27px); font-weight: 800; letter-spacing: -.034em; line-height: 1.12; color: #FFFFFF; }
.mx-lede{ margin-top: 16px; max-width: 44ch; font-size: 15px; line-height: 1.6; color: var(--on-2); }
.mx-badge{ margin-top: 24px; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border-radius: 7px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.26); font-size: 13px; font-weight: 650; color: #FFFFFF; }
.mx-badge svg{ width: 16px; height: 16px; flex: none; fill: none; stroke: #FFFFFF; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mx-soc{ margin-top: 16px; display: flex; gap: 8px; }
.mx-soc a{ width: 44px; height: 44px; display: grid; place-items: center; border-radius: 7px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.28); color: #FFFFFF;
  transition: background-color .15s ease, color .15s ease; }
.mx-soc a svg{ width: 18px; height: 18px; fill: currentColor; }
.mx-soc a:hover{ background: #FFFFFF; color: var(--cobalt); }
.mx-deck :focus-visible{ outline-color: #FFFFFF; }

.mx-colh{ display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 20px; margin-bottom: 16px; }
.mx-col ul{ border-top: 1px solid var(--on-line); }
.mx-col li + li{ border-top: 1px solid var(--on-line); }
.mx-row{ position: relative; isolation: isolate; display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 8px 0; }
.mx-row::before{ content: ""; position: absolute; z-index: -1; inset: 0 0 0 calc(-1 * var(--cpad)); background: rgba(255,255,255,.07); opacity: 0; transition: opacity .15s ease; }
.mx-tile{ flex: none; width: 36px; height: 36px; display: grid; place-items: center; background: #FFFFFF; }
.mx-tile svg{ width: 20px; height: 20px; }
.mx-tile-c svg{ width: 18px; height: 18px; fill: none; stroke: var(--cobalt); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mx-na .mx-tile{ background: rgba(255,255,255,.12); }
.mx-na .mx-tile svg{ filter: brightness(0) invert(1); opacity: .55; }
.mx-nm{ flex: 1; min-width: 0; font-size: 15px; line-height: 1.35; }
a.mx-row .mx-nm{ font-weight: 700; color: #FFFFFF; }
.mx-na .mx-nm{ font-weight: 550; color: var(--on-3); }
.mx-na{ cursor: default; }
.mx-live{ display: inline-block; vertical-align: middle; width: 6px; height: 6px; margin: -2px 0 0 8px; border-radius: 50%; background: #4CD394; }
.mx-deck .mx-key{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.34); }
.mx-deck .mx-key svg{ stroke: #FFFFFF; }
a.mx-row:hover::before{ opacity: 1; }
a.mx-row:hover > .mx-key{ background: #FFFFFF; border-color: #FFFFFF; }
a.mx-row:hover > .mx-key svg{ stroke: var(--cobalt); }
.mx-soon{
  flex: none; padding: 2px 6px 1px; border-radius: 4px; background: rgba(255,255,255,.14);
  font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: #FFFFFF; line-height: 1.5;
}

/* ---- base ---- */
.mx-base{ margin-top: 48px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 32px; padding: 16px 0 24px; border-top: 1px solid var(--on-line); }
.mx-copy{ margin-right: auto; font-size: 13.5px; line-height: 1.4; color: var(--on-2); }
.mx-cin{ margin-left: 12px; padding-left: 16px; border-left: 1px solid var(--on-line); font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--on-3); }
.mx-legal{ display: flex; align-items: center; flex-wrap: wrap; gap: 0 24px; }
.mx-legal a, .mx-na2{ display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-size: 13.5px; line-height: 1.4; }
.mx-legal a{ font-weight: 650; color: #FFFFFF; }
.mx-legal a:hover{ text-decoration: underline; text-underline-offset: 3px; }
.mx-na2{ color: var(--on-2); cursor: default; }

/* ---- tablet: card on columns 7–12; deck = company row, then two columns on the same seam ---- */
@media (max-width: 1180px){
  .mx-card{ grid-column: 7 / 13; }
  .mx-cols{ row-gap: 48px; }
  .mx-cols > .mx-id{ grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; align-items: start; }
  .mx-cols > .mx-id > .mx-brand, .mx-cols > .mx-id > .mx-lede, .mx-cols > .mx-id > .mx-badge{ grid-column: 1; }
  .mx-cols > .mx-id > .mx-badge{ justify-self: start; }
  .mx-cols > .mx-id > .mx-soc{ grid-column: 2; grid-row: 1; margin-top: 0; }
  .mx-cols > .mx-svc{ grid-column: 1 / 7; border-left: 0; padding-left: 0; }
  .mx-cols > .mx-co{ grid-column: 7 / 13; }
  .mx-row::before{ inset: 0; }
}
@media (max-width: 900px){
  .mx-stage{ padding: 48px 0; }
  .mx-frame{ min-height: 0; }
  .mx-map{ position: relative; inset: auto; margin: var(--mat); height: 320px; }
  .mx-card{ grid-column: 1 / -1; grid-row: 2; margin: 16px 0 0; }
}

/* ---- phones ---- */
@media (max-width: 760px){
  .mx{ --gut: 18px; --cpad: 16px; }
  .mx-stage{ padding: 24px 0 32px; }
  .mx-map{ height: 240px; margin: 6px; }
  .mx-card{ margin-top: 12px; }
  .mx-hours{ font-size: 12px; padding: 0 8px; }
  .mx-num{ font-size: clamp(18px, 5.6vw, 22px); }
  .mx-act{ font-size: 13.5px; padding: 0 8px; }
  .mx-deck{ padding-top: 40px; }
  .mx-grid{ column-gap: 0; }
  .mx-cols{ row-gap: 32px; }
  .mx-cols > *{ grid-column: 1 / -1 !important; border-left: 0 !important; padding-left: 0 !important; }
  .mx-cols > .mx-id{ display: block; }
  .mx-cols > .mx-id > .mx-soc{ margin-top: 16px; }
  .mx-mk{ width: 50px; height: 50px; }
  .mx-brand{ gap: 12px; }
  .mx-brand b{ font-size: 21px; }
  .mx-row::before{ inset: 0 -18px; }
  .mx-base{ margin-top: 32px; flex-direction: column; align-items: flex-start; gap: 0; padding: 8px 0 24px; }
  .mx-copy{ order: 2; padding-top: 8px; }
  .mx-cin{ display: block; margin: 4px 0 0; padding: 0; border: 0; }
  .mx-tx{ overflow-wrap: anywhere; }
  .mx-tx a{ position: relative; }
  .mx-tx a::after{ content: ""; position: absolute; inset: -13px -4px; }
}
@media (max-width: 380px){ .mx-acts{ grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce){ .mx *{ transition: none !important; } }


/* ==========================================================================
   1 · SETTLED CANVAS — the picked design, settled, plus the company's facts.
   The map frame straddles the seam where the page's pale ground turns into
   the cobalt deck, so map and deck read as one object. The deck opens on
   four real facts laid on the same columns as everything below them.
   ========================================================================== */
.mx-settled .mx-stage{ padding-bottom: 0;
  background: linear-gradient(to bottom, var(--ground) 0, var(--ground) calc(100% - 176px), var(--cobalt) calc(100% - 176px)); }
.mx-settled .mx-deck{ padding-top: 56px; }
.mx-facts{ display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg);
  padding-bottom: 40px; margin-bottom: 48px; border-bottom: 1px solid var(--on-line); }
.mx-fact{ display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; }
.mx-fact:nth-child(1){ grid-column: 1 / 3; }
.mx-fact:nth-child(2){ grid-column: 3 / 5; }
.mx-fact:nth-child(3){ grid-column: 5 / 9; border-left: 1px solid var(--on-line); padding-left: var(--cpad); }
.mx-fact:nth-child(4){ grid-column: 9 / 13; border-left: 1px solid var(--on-line); padding-left: var(--cpad); }
.mx-fic{ grid-row: 1 / 3; width: 40px; height: 40px; display: grid; place-items: center; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); }
.mx-fic svg{ width: 18px; height: 18px; fill: none; stroke: #FFFFFF; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mx-fk{ font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--on-3); }
.mx-fv{ font-size: 16px; font-weight: 750; letter-spacing: -.01em; color: #FFFFFF; line-height: 1.35; }
@media (max-width: 1180px){
  .mx-fact:nth-child(1){ grid-column: 1 / 4; } .mx-fact:nth-child(2){ grid-column: 4 / 7; }
  .mx-fact:nth-child(3){ grid-column: 7 / 13; }
  .mx-fact:nth-child(4){ grid-column: 1 / -1; border-left: 0; padding-left: 0; margin-top: 24px; }
}
@media (max-width: 900px){
  .mx-settled .mx-stage{ background: linear-gradient(to bottom, var(--ground) 0, var(--ground) calc(100% - 120px), var(--cobalt) calc(100% - 120px)); }
}
@media (max-width: 760px){
  .mx-facts{ row-gap: 20px; padding-bottom: 32px; margin-bottom: 32px; }
  .mx-fact:nth-child(n){ grid-column: 1 / -1; border-left: 0; padding-left: 0; margin-top: 0; }
  .mx-fact:nth-child(1){ grid-column: 1 / 7; } .mx-fact:nth-child(2){ grid-column: 7 / 13; }
}