/* Footer: fixed near-black surface in BOTH themes (matches production .af-foot).
   Every color below is intentionally hard-coded because the footer does not
   change with the theme, so no html.dark overrides are required. */

.s-footer {
  background: var(--footer-bg);
  color: #c9cbc4;
  position: relative;
  z-index: 5;
  font-family: var(--font-ui);
  /* production footer inherits the default body line-height, not the 1.6 from
     this build's base.css; normal gives the 30px link rhythm seen in the crop */
  line-height: normal;
  -webkit-font-smoothing: antialiased;
}

.s-footer .af-in {
  max-width: 1220px;
  margin: 0 auto;
  padding: 66px 40px 34px;
}

/* top area: brand + link columns */
.s-footer .af-main {
  display: grid;
  grid-template-columns: 1.5fr 3fr;
  gap: 48px;
  padding-bottom: 46px;
  border-bottom: 1px solid #ffffff12;
}

.s-footer .af-br {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #fff;
  margin-bottom: 17px;
}
.s-footer .af-br img {
  width: 27px;
  height: auto;
  display: block;
}
.s-footer .af-br b {
  font: 400 21px/1 var(--font-serif);
  letter-spacing: 0.1px;
}

.s-footer .af-brand p {
  font-size: 14px;
  line-height: 1.62;
  color: #93968d;
  max-width: 330px;
  margin: 0 0 24px;
}

.s-footer .af-soc {
  display: flex;
  gap: 11px;
}
.s-footer .af-soc a {
  width: 38px;
  height: 38px;
  border: 1px solid #ffffff1f;
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: #ffffffd1;
  transition: border-color 0.18s, background 0.18s, color 0.18s;
}
.s-footer .af-soc a:hover {
  border-color: var(--accent);
  background: #ffffff08;
  color: var(--accent);
}
.s-footer .af-soc svg {
  width: 15px;
  height: 15px;
  display: block;
}

.s-footer .af-cols {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 26px;
}
.s-footer .af-cols h3 {
  font: 700 11px/1 var(--font-ui);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #71746a;
  margin: 0 0 19px;
}
.s-footer .af-cols a {
  display: block;
  font-size: 14px;
  color: #c4c7be;
  text-decoration: none;
  margin-bottom: 13px;
  width: fit-content;
  transition: color 0.15s;
}
.s-footer .af-cols a:hover {
  color: var(--accent);
}

/* important disclosures */
.s-footer .af-fine {
  padding: 34px 0 6px;
  border-bottom: 1px solid #ffffff12;
}
.s-footer .af-fine .fh {
  font: 700 9.5px var(--font-ui);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #71746a;
  margin: 0 0 14px;
}
.s-footer .af-fine p {
  font-size: 10.5px;
  line-height: 1.7;
  color: #7c7f75;
  max-width: none;
  margin: 0 0 10px;
}
.s-footer .af-fine p b {
  color: #93968d;
  font-weight: 600;
}

/* bottom bar */
.s-footer .af-bot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 26px;
}
.s-footer .af-bot .c {
  font-size: 12.5px;
  color: #6f7269;
}
.s-footer .af-bot .r {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}
.s-footer .af-bot .r a,
.s-footer .af-bot .r span {
  font: 700 9.5px var(--font-ui);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #71746a;
  text-decoration: none;
}
.s-footer .af-bot .r a:hover {
  color: var(--accent);
}

@media (max-width: 767px) {
  .s-footer .af-in {
    padding: 48px 22px 30px;
  }
  .s-footer .af-main {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .s-footer .af-cols {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
  .s-footer .af-bot {
    gap: 16px;
  }
}

/* footer wordmark now uses the shared bucket glyph */
.s-footer .af-br .af-flogo {
  width: 27px;
  height: auto;
  display: block;
  color: var(--accent);
  fill: currentColor;
}