/* "The Conversation Continues": the shared closing block on the Invest, Advertise and landing pages
   (Figma 1297:20952). A slanted strip of five performers sits on the left; the orange heading,
   "Follow · Watch · Join · Engage" and six social buttons in the logo's colours sit centred on the right.
   Self-contained (brand colours and heading font built in) so it renders the same on every page.
   Image paths are set in each page's HTML. */
/* One heading font for every page: Haboro Soft Ext ExBold when installed, otherwise the bundled Rubik ExtraBold
   (assets/headline.ttf, next to this file). */
@font-face {
  font-family: FjHead; font-weight: 800; font-display: swap;
  src: local('Haboro Soft Ext ExBold'), local('HaboroSoft-ExtExBold'), local('HaboroSoft-ExtExB'), url("../fonts/rubik-extrabold.ttf") format("truetype");
}
.footer-join {
  --fj-navy: #03022e; --fj-orange: #f7a51d; --fj-snow: #fbfbfa;
  --fj-head: FjHead, Rubik, sans-serif;
  --fj-body: Rubik, sans-serif;
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  margin: 0;
  /* Figma: 96 top, 64 bottom and left, 112 right, inside a 1440 frame; wider screens keep that content width centred. */
  padding: 96px max(112px, calc((100% - 1264px) / 2 + 48px)) 64px max(64px, calc((100% - 1264px) / 2));
  background: var(--fj-navy); color: var(--fj-snow);
}
.footer-join, .footer-join * { box-sizing: border-box; }
.fj-stage { position: relative; flex: 0 1 706px; width: 706px; min-width: 0; aspect-ratio: 706 / 243; }
.fj-cast { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fj-copy {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center;
}
.footer-join h2 {
  margin: 0; width: 100%; font: 800 clamp(32px, 3.4vw, 48px)/1.17 var(--fj-head); letter-spacing: -.03em;
  text-transform: uppercase; color: var(--fj-orange);
}
.fj-kicker { margin: 0; max-width: 520px; font: 400 16px/1.5 var(--fj-body); color: var(--fj-snow); }
.fj-social { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin: 0; padding: 0; list-style: none; }
.fj-social a {
  display: grid; place-items: center; width: 50px; height: 50px; border-radius: 8px;
  border: 1px solid rgba(251, 251, 250, .12); background: var(--fj-tile); color: #000; text-decoration: none;
  transition: transform .2s ease, filter .2s ease;
}
.fj-social svg { width: 24px; height: 24px; fill: currentColor; }
/* YouTube and X use a 32px icon box in Figma. */
.fj-social .fj-lg { width: 32px; height: 32px; }
.fj-social a:hover { transform: translateY(-4px); filter: brightness(1.06); }
.fj-social a:focus-visible { outline: 2px solid var(--fj-snow); outline-offset: 3px; }
/* One colour per button, left to right in the Bow logo's order. */
.fj-social li:nth-child(1) a { --fj-tile: #ff6a3c; }
.fj-social li:nth-child(2) a { --fj-tile: #ff9c2f; }
.fj-social li:nth-child(3) a { --fj-tile: #ffd955; }
.fj-social li:nth-child(4) a { --fj-tile: #4ec44e; }
.fj-social li:nth-child(5) a { --fj-tile: #00b3ad; }
.fj-social li:nth-child(6) a { --fj-tile: #917bb9; }

/* Motion: the cast fades up, then the heading, line and buttons fade up in turn. */
.fj-motion .fj-cast { opacity: 0; transform: translateY(24px); transition: opacity 800ms ease, transform 900ms cubic-bezier(.2,.8,.2,1); }
.fj-motion .fj-copy > *, .fj-motion .fj-social li { opacity: 0; transform: translateY(16px); transition: opacity 600ms ease, transform 600ms ease; }
.fj-motion .fj-social { opacity: 1; transform: none; }
.fj-motion .fj-copy > :nth-child(1) { transition-delay: 200ms; }
.fj-motion .fj-copy > :nth-child(2) { transition-delay: 300ms; }
.fj-motion .fj-social li:nth-child(1) { transition-delay: 400ms; }
.fj-motion .fj-social li:nth-child(2) { transition-delay: 460ms; }
.fj-motion .fj-social li:nth-child(3) { transition-delay: 520ms; }
.fj-motion .fj-social li:nth-child(4) { transition-delay: 580ms; }
.fj-motion .fj-social li:nth-child(5) { transition-delay: 640ms; }
.fj-motion .fj-social li:nth-child(6) { transition-delay: 700ms; }
.fj-motion.is-in .fj-cast, .fj-motion.is-in .fj-copy > *, .fj-motion.is-in .fj-social li { opacity: 1; transform: none; }

/* Small laptops: the photo gives up width before the heading does. */
@media (max-width: 1280px) {
  .footer-join { padding-inline: 48px 64px; gap: 32px; }
  .fj-stage { flex-basis: 52%; }
}
/* Tablet and phone: heading and buttons first, then the cast. */
@media (max-width: 900px) {
  .footer-join { flex-direction: column; gap: 40px; padding: 64px 32px; }
  .fj-copy { order: -1; flex: none; width: 100%; }
  .fj-stage { flex: none; width: min(706px, 100%); }
}
@media (max-width: 600px) {
  .footer-join { padding: 48px 20px; gap: 32px; }
  .footer-join h2 { font-size: 30px; }
  .fj-social { gap: 10px; }
  .fj-social a { width: 44px; height: 44px; }
  .fj-social svg { width: 22px; height: 22px; }
  .fj-social .fj-lg { width: 28px; height: 28px; }
  .fj-stage { width: 100%; }
}
/* Narrow phones: tighten gaps while preserving usable touch targets. */
@media (max-width: 380px) {
  .fj-social { gap: 6px; }
  .fj-social a { width: 44px; height: 44px; }
  .fj-social svg { width: 20px; height: 20px; }
  .fj-social .fj-lg { width: 26px; height: 26px; }
}

/* Invest page variant (Figma 1285:19921): the cast with the Bow arches stands on a blue band that runs edge to edge.
   The band is drawn into the bottom of the image; ::before carries it out to both sides of the screen. */
.footer-join--stage { padding: 96px max(112px, calc((100% - 1216px) / 2)); }
.footer-join--stage .fj-stage { flex: 0 1 620px; width: 620px; aspect-ratio: 1240 / 624; }
.footer-join--stage .fj-stage::before {
  content: ""; position: absolute; left: -100vw; right: -100vw; bottom: 0; height: 11.3%; background: #0415d8;
}
.footer-join--stage .fj-cast { z-index: 1; object-fit: contain; }
.footer-join--stage .fj-copy { padding-bottom: 64px; }
@media (max-width: 1280px) {
  .footer-join--stage { padding-inline: 48px 64px; }
  .footer-join--stage .fj-stage { flex-basis: 48%; }
}
@media (max-width: 900px) {
  .footer-join--stage { padding: 64px 32px; }
  .footer-join--stage .fj-copy { padding-bottom: 0; }
  .footer-join--stage .fj-stage { width: min(620px, 100%); }
}
@media (max-width: 600px) {
  .footer-join--stage { padding: 48px 20px; }
}
/* The band behind stays put, so the cast only fades in here (sliding would split its band from the one behind). */
.footer-join--stage.fj-motion .fj-cast { transform: none; }

/* Landing page variant (Figma 1297:21036): the cast on stage, cut out over the crowd.
   Extra room on top so the hero frame above has space to breathe (Figma's 64 felt tight under it). */
.footer-join--crowd { margin-top: 24px; padding-block: 112px 64px; }
.footer-join--crowd .fj-stage { flex: 0 1 587px; width: 587px; aspect-ratio: 1174 / 620; }
.footer-join--crowd .fj-cast { object-fit: contain; }
@media (max-width: 1280px) {
  .footer-join--crowd .fj-stage { flex-basis: 46%; }
}
@media (max-width: 900px) {
  .footer-join--crowd { padding-top: 88px; }
  .footer-join--crowd .fj-copy { order: 0; }
  .footer-join--crowd .fj-stage { flex: none; width: min(587px, 100%); }
}
@media (max-width: 600px) {
  .footer-join--crowd { padding-top: 72px; }
}

/* Phones: 32px from the closing block to the footer on every page (the block adds no space of its own below). */
@media (max-width: 600px) {
  .footer-join, .footer-join--stage, .footer-join--crowd { padding-bottom: 0; }
  .footer-join + footer { padding-top: 32px; }
}