/* Footer, laid out and styled like the main Clarity Writers footer (7 Nov 2026). */
.foot { padding: 5rem 0 3rem; background: #fff; border-top: 1px solid rgba(10, 14, 28, .1); font-family: 'Plus Jakarta Sans', sans-serif; color: #0a0e1c; }
.foot p { margin: 0; }
.foot__cols { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 2rem; margin-bottom: 3rem; }
.foot__brand { display: flex; flex-direction: column; gap: .5rem; max-width: 22rem; }
.foot .foot__by { display: flex; align-items: center; gap: .15rem; margin-top: -.9rem; color: rgba(10, 14, 28, .6); font-size: .95rem; font-weight: 400; }
.foot__by img { display: block; width: 192px; height: 48px; object-fit: contain; object-position: left center; }
.foot__about { color: rgba(10, 14, 28, .6); font-size: .85rem; font-weight: 400; line-height: 1.5; }
.foot__col { display: flex; flex-direction: column; gap: .6rem; }
.foot .foot__label { margin-bottom: .25rem; color: #0a0e1c; font-size: .7rem; font-weight: 700; line-height: 1.5; letter-spacing: .2em; text-transform: uppercase; }
.foot__col > a, .foot__col > span { color: rgba(10, 14, 28, .6); font-size: .9rem; font-weight: 400; line-height: 1.5; text-decoration: none; transition: color .2s; }
.foot__col > a:hover { color: #0a0e1c; }
.foot__socials { display: flex; gap: .6rem; margin-top: .5rem; }
.foot__socials a { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid rgba(10, 14, 28, .14); border-radius: 50%; color: rgba(10, 14, 28, .6); transition: color .2s, background .2s, border-color .2s; }
.foot__socials a:hover { color: #fff; background: #1979eb; border-color: #1979eb; }
.foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; padding-top: 1.5rem; border-top: 1px solid rgba(10, 14, 28, .08); color: rgba(10, 14, 28, .68); font-size: .8rem; font-weight: 300; line-height: 1.5; }
.foot__panel { color: #0a0e1c; }

@media (max-width: 880px) {
  .foot__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot__brand { grid-column: 1 / -1; max-width: none; }
}

@media (max-width: 560px) {
  .foot__cols { grid-template-columns: 1fr; }
}