/* The end of the brands and services pages: the homepage's rings CTA (retargeted per page), "Let's talk." and footer,
   from /footer.css and /footer.js as they are. This file only fits them to these pages: the homepage's button recipe
   for the CTA card (the homepage sets .btn in its own styles), the homepage's body type they inherit there, the
   stacking over the fixed hero, the footer's slide with the menu, and the wordmark's two transitions. */
.join, .talk, .footer {
  z-index: 25;                               /* in the page flow over the fixed hero, like the other sections */
  font-family: 'Archivo', 'Switzer Fallback', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 300;
  font-size: clamp(16px, 1.667vw, 20px);
  line-height: 1.45;
  letter-spacing: -.02em;
}
/* the footer sits after <main>, so it takes the menu's slide itself (chrome.css moves .page-flow) */
.footer { translate: var(--page-x, 0px) 0; }

/* the homepage's one button (ugc-style) */
.join .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 24px;
  background: #fff;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: .01em;
  border: 2px solid var(--ink);
  border-radius: 0;
  box-shadow: 3px 3px 0 var(--ink);
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
}
.join .btn--ink { background: var(--ink); color: #fff; }   /* the primary: ink ground at rest */
.join .btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .join .btn:hover { background: var(--pop, var(--pop-pink)); color: var(--ink); transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
}
.join .btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* footer.css gives the wordmark an opacity fade (it steps aside over the footer); keep chrome.css's colour fade too */
.chrome .brand { transition: color .4s ease, opacity .25s ease; }

@media (prefers-reduced-motion: reduce) {
  .join .btn { transition: none; }
}