/* The site footer. Deliberately standalone.

   This site runs two design systems that share no variables: index.html and
   voices.html load assets/premium/*, everything else loads assets/css/*. The
   footer is the one component that has to appear on all eleven pages and look
   the same, so it hard-codes its values instead of reading tokens that exist
   in only one of the two. Loading this file is the whole integration. */

.footer {
  background: #fff;
  border-top: 1px solid #d5e2ee;
  padding-block: 52px 34px;
  margin-top: 0;
}

.footer-inner {
  width: min(1152px, calc(100% - 80px));
  margin-inline: auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 44px;
  flex-wrap: wrap;
}

.foot-brand {
  max-width: 34ch;
  display: grid;
  gap: 13px;
  justify-items: start;
}
.foot-brand .brand { display: block; }
.foot-brand .brand-logo { width: 148px; height: auto; display: block; }
.foot-brand p {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: #4e647b;
}
.foot-contact { margin: 0; }
.foot-contact a {
  font-size: 13.5px;
  font-weight: 600;
  color: #0066ff;
  text-decoration: none;
}
.foot-contact a:hover { color: #0052cc; text-decoration: underline; }

.foot-links {
  display: flex;
  gap: 46px;
  flex-wrap: wrap;
}

.foot-col h2 {
  margin: 0 0 11px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #6b8095;
}
.foot-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.foot-col a {
  font-size: 13.5px;
  line-height: 1.4;
  color: #081f38;
  text-decoration: none;
  /* A dense link list, not a menu — full 44px rows would stretch this to the
     height of the page. The gap above carries the separation instead. */
  display: inline-block;
  padding-block: 3px;
}
.foot-col a:hover { color: #0066ff; text-decoration: underline; }
.foot-col a:focus-visible,
.foot-contact a:focus-visible,
.foot-brand .brand:focus-visible {
  outline: 2px solid #0066ff;
  outline-offset: 2px;
  border-radius: 3px;
}

.foot-bottom {
  width: min(1152px, calc(100% - 80px));
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  gap: 10px 30px;
  flex-wrap: wrap;
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid #d5e2ee;
}
.foot-bottom small {
  font-size: 11.5px;
  line-height: 1.6;
  color: #6b8095;
  max-width: 54ch;
}

@media (max-width: 900px) {
  .footer-inner,
  .foot-bottom { width: calc(100% - 40px); }
  .footer-inner { gap: 32px; }
  .foot-links { gap: 30px; }
  .foot-col a { padding-block: 5px; }
}

@media (max-width: 620px) {
  .footer { padding-block: 38px 28px; }
  .footer-inner,
  .foot-bottom { width: calc(100% - 32px); }
  .foot-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 18px;
  }
}