/* ==========================================================================
   THE FOOTER, ON EVERY PAGE.

   The markup lives in footer.html and is synced into each page by
   tools/footer.py; these are its styles. Everything is scoped under
   .site-footer, which also settles the ties: the landing pages each style a
   bare `footer` element in their own <style> block, and a class beats an
   element selector whatever the order of the two.

   The colours are written out rather than taken from the page: the legal
   pages do not define the home page's variables, and the footer is the same
   dark band everywhere.
   ========================================================================== */

.site-footer {
  --ft-ink: #252420;
  --ft-tan: #c5a28c;
  --ft-ease: cubic-bezier(0.22,1,0.36,1);
  /* index draws the footer over the page's own background layers */
  position: relative;
  z-index: 1;
  display: block;
  max-width: none;
  margin: 0;
  background: var(--ft-ink);
  padding: clamp(3.5rem,8vh,5.5rem) clamp(1.5rem,5vw,5rem) 2.2rem;
  font-family: Satoshi,'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size: 16px;
  line-height: 1.6;
  text-align: left;
}

.site-footer .ft {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 2.4rem clamp(1.5rem,4vw,3.5rem);
  max-width: 1240px;
  margin: 0 auto;
  color: rgba(244,244,239,.72);
}
.site-footer .ft-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.site-footer .ft-brand img { height: 26px; width: auto; display: block; }
.site-footer .ft-tag { margin: 0; max-width: 30ch; padding: 0; border: 0;
  font-size: .86rem; line-height: 1.6; color: rgba(244,244,239,.6); }
.site-footer .ft-social { display: flex; gap: 1.2rem; }
.site-footer .ft-social a, .site-footer .ft-col a {
  color: rgba(244,244,239,.72); text-decoration: none; border: 0; font-size: .88rem;
  /* pinned, not inherited: the legal pages set a taller line for body copy
     and the columns would stand a few pixels apart from every other page */
  line-height: 1.5; padding: 0; margin: 0;
  transition: color .2s var(--ft-ease); }
.site-footer .ft-col a { display: block; }
.site-footer .ft-social a:hover, .site-footer .ft-col a:hover { color: #fff; }
.site-footer .ft-social a { display: inline-flex; align-items: center; gap: .45rem; }
.site-footer .ft-social svg { width: 16px; height: 16px; flex: none; }
/* The legal pages style a bare `nav` element for their own fixed bar, and the
   three link columns here are <nav> too: without this they fly to the top of
   the window. Anything the footer borrows from the element namespace gets
   put back to normal before it is styled. */
.site-footer nav { position: static; inset: auto; z-index: auto;
  background: none; border: 0; padding: 0; margin: 0; box-shadow: none;
  width: auto; height: auto; }

.site-footer .ft-col { display: flex; flex-direction: column; gap: .55rem; align-items: flex-start; }
.site-footer .ft-col h4 { margin: 0 0 .35rem; font-size: .66rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ft-tan); }

/* The call with the founder: a card of its own, centred, wide enough for a
   subtitle to sit under the title without either running long. */
.site-footer .ft-callrow { margin: 2.6rem 0 0; display: flex; justify-content: center; }
.site-footer .ft-call {
  display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center;
  max-width: 420px; padding: 1.6rem 1.8rem 1.4rem; border-radius: 18px; text-decoration: none;
  border: 1px solid rgba(244,244,239,.18); background: rgba(244,244,239,.03);
  transition: border-color .25s var(--ft-ease), background .25s var(--ft-ease), transform .25s var(--ft-ease); }
.site-footer .ft-call:hover { border-color: var(--ft-tan); background: rgba(244,244,239,.06); transform: translateY(-2px); }
.site-footer .ft-call:focus-visible { outline: 2px solid var(--ft-tan); outline-offset: 3px; }
.site-footer .ft-call-t { font-size: 1.08rem; font-weight: 900; letter-spacing: -.02em; line-height: 1.2; color: #fff; }
.site-footer .ft-call-s { font-size: .78rem; line-height: 1.6; color: rgba(244,244,239,.55); }
.site-footer .ft-call-go { display: inline-flex; align-items: center; gap: .4rem; margin-top: .3rem;
  font-size: .76rem; font-weight: 700; letter-spacing: .01em; color: var(--ft-tan); }
.site-footer .ft-call-go > span { transition: transform .28s var(--ft-ease); }
.site-footer .ft-call:hover .ft-call-go > span { transform: translateX(3px); }

/* the company particulars, one quiet line under the card */
.site-footer .ft-company { display: flex; flex-direction: column; align-items: center; gap: .15rem;
  max-width: 440px; margin: 1.4rem auto 0; padding: 0; border: 0; text-align: center;
  font-size: .72rem; letter-spacing: .02em; line-height: 1.6; color: rgba(244,244,239,.5); }
.site-footer .ft-co { color: rgba(244,244,239,.82); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

/* Credit where it is owed, right under Pablo's own two links: two quiet
   lines in the brand column, the size of the company particulars. */
.site-footer .ft-credits { display: flex; flex-direction: column; align-items: flex-start;
  gap: .15rem; margin: 0; padding: 0; border: 0;
  font-size: .72rem; letter-spacing: .02em; line-height: 1.6; color: rgba(244,244,239,.5); }
.site-footer .ft-credits a { color: rgba(244,244,239,.78); text-decoration: none;
  border-bottom: 1px solid rgba(244,244,239,.25); transition: color .2s var(--ft-ease), border-color .2s var(--ft-ease); }
.site-footer .ft-credits a:hover { color: #fff; border-bottom-color: #fff; }

.site-footer .ft-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 1.5rem;
  max-width: 1240px; margin: 2.6rem auto 0; padding-top: 1.3rem;
  border-top: 1px solid rgba(244,244,239,.12);
  font-size: .72rem; letter-spacing: .03em; color: rgba(244,244,239,.45); }
.site-footer .ft-bar strong { color: #fff; font-weight: 700; }
.site-footer .ft-bar a { color: rgba(244,244,239,.55); text-decoration: none; border: 0; }
.site-footer .ft-bar a:hover { color: #fff; }

@media (max-width:900px) {
  .site-footer .ft { grid-template-columns: 1fr 1fr; }
  .site-footer .ft-brand { grid-column: 1 / -1; }
}
@media (max-width:520px) { .site-footer .ft { grid-template-columns: 1fr; } }