/* lower4/footer.css - the footer (div role=contentinfo, not <footer>: app.js forces dark header chrome over <footer>).
   A silver plate continuing the contact plate (same face-milled finish, a step darker), the logo, the two brand marks
   in their own colours, the nav in page order, and an Auto Life navy bar that mirrors the hero's navy foot band.
   The light on the plate follows scroll and rests at the end of the page. */
.l4-foot { color: var(--l4-ink); }
.ft-plate {
  position: relative; overflow: hidden; padding: 76px 0 0;
  background: var(--l4-plate) url("assets/lower4/contact/milled_plate.webp") 0 0 / 480px 240px;
  /* the plate is a separate machined part butted against the contact plate: a fine shadow line and a lit chamfer */
  box-shadow: inset 0 1px 0 rgba(72, 86, 102, .38), inset 0 2px 0 rgba(255, 255, 255, .75);
}
.ft-light { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.ft-light i {
  position: absolute; top: -60%; left: 0; width: 70vw; height: 220%; display: block; margin-left: -35vw;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .5), rgba(255, 255, 255, .18) 55%, rgba(255, 255, 255, 0));
  transform: translate3d(62vw, 0, 0); will-change: transform;
}
.ft-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.ft-logo { display: block; flex: none; }
.ft-logo img { width: 300px; height: auto; display: block; }
.ft-dist { display: flex; align-items: center; gap: 32px; }
.ft-dist-l { color: var(--l4-ink-2); }
.ft-marks { display: flex; align-items: center; gap: 36px; }
/* equal optical weight: the THG badge is an open ellipse of thin lines, the Takoma lockup a dense wide wordmark, so the
   badge is set taller to carry the same ink as the wordmark */
.ft-marks img { display: block; width: auto; }
.ft-thg { height: 88px; }
.ft-tak { height: 40px; }
.ft-thg, .ft-tak { width: auto; max-width: none; flex: none; object-fit: contain; }
.ft-nav {
  position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 14px 40px; margin-top: 56px; padding-top: 26px; padding-bottom: 30px;
}
.ft-nav::before { content: ""; position: absolute; left: var(--l4-pad); right: var(--l4-pad); top: 0; height: 1px; background: rgba(16, 48, 92, .28); box-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
.ft-nav a { font: 500 12px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--l4-ink); padding: 4px 0; border-bottom: 1px solid transparent; transition: color .18s var(--l4-ease), border-color .18s var(--l4-ease); }
.ft-nav a:hover { color: var(--l4-navy); border-color: var(--l4-navy); }
/* the two social links close the nav row on the right: the same mono caps as the page links, each led by its glyph */
.ft-soc { display: flex; flex-wrap: wrap; gap: 14px 34px; margin-left: auto; }
.ft-nav .ft-soc a { display: inline-flex; align-items: center; gap: 9px; padding: 0; border-bottom: 0; }
.ft-soc svg { width: 19px; height: 19px; flex: none; display: block; }
.ft-soc a span { padding: 4px 0; border-bottom: 1px solid transparent; transition: border-color .18s var(--l4-ease); }
.ft-soc a:hover span { border-color: var(--l4-navy); }
@media (max-width: 1100px) { .ft-soc { margin-left: 0; flex-basis: 100%; margin-top: 12px; } }
.ft-bar { background: var(--l4-navy); color: rgba(255, 255, 255, .86); font: 400 14px/1.45 var(--body); }
.ft-bar-in { display: flex; justify-content: space-between; gap: 8px 32px; flex-wrap: wrap; padding-top: 20px; padding-bottom: 20px; }
.l4-foot :focus-visible { outline-offset: 4px; }
.ft-bar :focus-visible { outline-color: #fff; }

@media (max-width: 760px) {
  .ft-plate { padding-top: 52px; }
  .ft-top { flex-direction: column; align-items: flex-start; gap: 36px; }
  .ft-logo img { width: 230px; }
  .ft-dist { flex-direction: column; align-items: flex-start; gap: 16px; }
  .ft-marks { gap: 28px; }
  .ft-thg { height: 76px; }
  .ft-tak { height: 34px; }
  .ft-nav { margin-top: 40px; gap: 6px 26px; }
  .ft-bar-in { flex-direction: column; font-size: 13px; }
  .ft-light i { width: 140vw; margin-left: -70vw; }
}

/* below.css (an older, still-linked stylesheet) also uses .ft-dist / .ft-logo; these scoped rules win over it */
.l4-foot .ft-logo { height: auto; }
.l4-foot .ft-dist img { width: auto; }
.l4-foot .ft-marks .ft-thg { height: 88px; }
.l4-foot .ft-marks .ft-tak { height: 40px; }
@media (max-width: 760px) {
  .l4-foot .ft-marks .ft-thg { height: 76px; }
  .l4-foot .ft-marks .ft-tak { height: 34px; }
}