/* ---- four columns, Industries stacked under Services --------------------
   Five columns across 1240px gave each one about 220px, which is narrower
   than several of the labels in it, so half the list was wrapping to two
   lines and the block read as noise. The data still has five groups; they are
   placed on a four column grid instead, with Industries dropped into the
   second row of the first column and Who we serve spanning both rows so its
   fifteen entries have somewhere to go. */
.at-foot-cols{grid-template-columns:repeat(4,1fr);column-gap:30px;row-gap:36px;
  align-items:start}
.at-foot-cols > *:nth-child(1){grid-column:1;grid-row:1}   /* Services      */
.at-foot-cols > *:nth-child(3){grid-column:1;grid-row:2}   /* Industries    */
.at-foot-cols > *:nth-child(2){grid-column:2;grid-row:1}   /* Who we serve */
/* Who we serve sits in row 1 only. Spanning it across both rows took it out
   of the row-height calculation, so row 1 was sized by Services at twelve
   entries and Industries began three rows above where the fifteen-entry
   column actually ended. Held to one row, it is the tallest thing in row 1
   and everything in row 2 starts below all of it. */
.at-foot-cols > *:nth-child(4){grid-column:3;grid-row:1}   /* Platform      */
.at-foot-cols > *:nth-child(5){grid-column:4;grid-row:1}   /* Company       */
.at-foot-cols a{font-size:13.5px}

@media(max-width:1000px){
  /* the placement is a desktop composition; below this the groups just flow */
  .at-foot-cols{grid-template-columns:repeat(3,1fr);row-gap:30px}
  .at-foot-cols > *{grid-column:auto !important;grid-row:auto !important}
}
@media(max-width:700px){
  .at-foot-cols{grid-template-columns:1fr 1fr;column-gap:20px}
}