/* The footer's menu, the same on every page that has the shared footer (12 Nov 2026, Charlie: "2 please push to the actual
   website for all pages", after "change the layout of this, it looks terrible ... options"; the three layouts he saw were
   _tools/designs_footer.py, and he picked "Tidy columns").

   The block is <div class="wl-foot-menu"> of <div class="wl-foot-col"> (standard_layout.footer_menu: the page's own menu
   groups, then the team's About links). The team's own long grid stays in the page, hidden, so its links remain for search
   engines. Nothing here adds, moves out or changes a word; it only says where each group sits.
   Why it was redone: every grid row was as tall as its tallest group, so Services (seven links) left 150 to 250 px of empty
   space under its neighbours, two groups sat alone on a second row, each link was 43 px apart (Webflow's .link-footer
   carries margin: 0 28px 14px 0, reset here), the About links were a ragged run, and on a phone the columns were 161 px
   wide and every link wrapped (footer 1,275 px tall; now 585 px on a laptop, about 1,070 px on a phone).
   Laptop: four even columns; the group with the most links (data-wl-tall, Services) runs down two rows, so the others
   fill in beside it and nothing hangs; the About group (data-wl-about) is a ruled row on the same four columns.
   Tablet: three columns. Phone: each group is a title with its links running across and wrapping.
   Loads last, with faq.css (build.py), so one rule here beats the page styles. */
html[data-wl-redesign] .wl-foot-menu + .grid-footer-navigation { display: none; }
html[data-wl-redesign] .wl-foot-menu {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-flow: row dense;
  gap: 32px 40px;
  align-items: start;
  padding: 36px 0 44px;
  border-top: 1px solid var(--wl-line);
}
html[data-wl-redesign] .wl-foot-menu .wl-foot-col { display: flex; flex-direction: column; gap: 0; min-width: 0; padding: 0; border: 0; }
html[data-wl-redesign] .wl-foot-menu .wl-foot-col[data-wl-tall] { grid-row: span 2; }
html[data-wl-redesign] .wl-foot-menu .wl-foot-col[data-wl-about] {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 40px;
  margin-top: 4px;
  padding-top: 28px;
  border-top: 1px solid var(--wl-line);
}
html[data-wl-redesign] .wl-foot-menu .label-footer-navigation { margin: 0 0 8px; font-size: 12px; line-height: 1.2; }
html[data-wl-redesign] .wl-foot-menu .wl-foot-col[data-wl-about] .label-footer-navigation { grid-column: 1 / -1; }
/* links 33 px apart (a tap target well over the 24 px minimum), nothing wider than its box */
html[data-wl-redesign] .wl-foot-menu .link-footer { display: block; margin: 0; padding: 7px 0; font-size: 14px; line-height: 1.4; overflow-wrap: normal; }
@media (max-width: 991px) {
  html[data-wl-redesign] .wl-foot-menu { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 32px; }
  html[data-wl-redesign] .wl-foot-menu .wl-foot-col[data-wl-about] { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; }
}
@media (max-width: 640px) {
  html[data-wl-redesign] .wl-foot-menu { display: flex; flex-direction: column; gap: 0; padding: 4px 0 20px; }
  html[data-wl-redesign] .wl-foot-menu .wl-foot-col,
  html[data-wl-redesign] .wl-foot-menu .wl-foot-col[data-wl-about] {
    display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 24px;
    margin: 0; padding: 18px 0 12px; border: 0; border-top: 1px solid var(--wl-line);
  }
  html[data-wl-redesign] .wl-foot-menu .wl-foot-col:first-child { border-top: 0; }
  html[data-wl-redesign] .wl-foot-menu .label-footer-navigation,
  html[data-wl-redesign] .wl-foot-menu .wl-foot-col[data-wl-about] .label-footer-navigation { flex: 1 0 100%; width: auto; margin: 0 0 4px; }
  html[data-wl-redesign] .wl-foot-menu .link-footer { flex: 0 1 auto; max-width: 100%; }
}
/* the brand-logo band under the footer: four across on the homepage and the shell pages (the standard pages have it in _standard.css) */
html:is([data-wl-redesign="shell"], [data-wl-redesign="home"]) .container-logos-inverted .grid-brand-logos[class*="variant-"] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }