/* Built on the West Kite Design System 1.10 · https://westkite.com/brand · wk-78fa6fe5 */
/* The site footer, shared by every page. Markup: tools/parcel-art/partials/footer.html,
   inlined at build time with {{partial:footer}}. Tokens come from /site-assets/westkite-6eeaa366d0d3.css. */

/* The wordmark, sat on the page just above the footer with its lower third cut off. It is
   outlined text in the display face: the SVG box is the word's own ink box in font
   units (baseline at 0, ink from -1429 up to 20 below, 1449 tall), trimmed to 1014 units so
   exactly the top 70 percent shows. The box carries the crop, so it holds at every width. Outlines also keep the offscreen SVG mask from becoming a spurious LCP text candidate. */
.foot-word {
  padding: 0 32px;
  background: var(--wk-paper, #ffffff);
}

.foot-word svg {
  display: block;
  /* Short of the full width, so the name reads as a word rather than a stretched banner. */
  width: 85%;
  margin: 0 auto;
  height: auto;
}


.foot-word .wm-ink {
  fill: var(--wk-ash, #ebeae9);
  fill: url(#wk-foot-pearl);
}

/* White in a mask means "let this through", so the mask copy is the letters, solid. */
.foot-word .wm-mask {
  fill: #ffffff;
}

/* The grainy colour wash follows the pointer behind the letter shapes. */
.wm-sheen {
  opacity: 0;
  transform: translateX(-3000px);
  transition: opacity 150ms ease, transform 90ms ease-out;
}

.wm-grain {
  opacity: 0.3;
  mix-blend-mode: soft-light;
}

.foot-word.is-lit .wm-sheen {
  opacity: 1;
}

.site-foot {
  padding: 64px 32px 24px;
  background: var(--wk-carbon, #1c1c1c);
  color: var(--wk-text, #f7f6f5);
}

.foot-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px 48px;
}

.foot-say {
  display: grid;
  justify-items: start;
  gap: 32px;
}

/* The page links, stacked down the right. The inset keeps the longest of them clear of the
   edge: left-aligned, it is the widest link that decides how close the column comes. */
.foot-nav {
  display: grid;
  /* Two columns of three, filled down then across. */
  grid-auto-flow: column;
  grid-template-rows: repeat(3, auto);
  gap: 12px 48px;
  /* Dropped past the lockup and the gap under it, so the first link starts level with the
     first of the three lines. */
  margin-top: calc(40px + 32px);
  margin-right: 64px;
  font-size: 14px;
  color: var(--wk-text-muted, rgba(255, 255, 250, 0.6));
}

/* The lockup as the guide exports it for a dark ground: mark and wordmark, both Linen, with
   the clear space around them already built in. */
.foot-lockup {
  display: block;
  height: 40px;
  width: auto;
}

/* A two-line sign-off with the focus on the industry it serves. */
.foot-lines {
  margin: 0;
  font-family: var(--wk-display, "Newsreader", Georgia, serif);
  font-weight: var(--wk-display-weight, 375);
  font-variation-settings: var(--wk-display-vs, "opsz" 28);
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.12;
  letter-spacing: var(--wk-display-track, -0.03em);
}

.foot-lines span {
  display: block;
}

.foot-lines span:first-child {
  opacity: 0.68;
}

/* The AI shortcuts and company profiles share the footer's full width. */
.foot-social {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-top: 32px;
}

/* Ask AI about us: a label and four small square buttons. */
.ask-ai {
  display: grid;
  justify-items: start;
  grid-template-rows: 28px auto;
  align-items: center;
  gap: 12px;
}

.ask-ai-row {
  display: flex;
  gap: 8px;
}

.foot-community {
  display: grid;
  justify-items: end;
  grid-template-rows: 28px auto;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.foot-backed {
  display: flex;
  align-items: center;
  gap: 10px;
}

.foot-backed-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--wk-text-muted, rgba(255, 255, 250, 0.6));
}

.foot-backed-link {
  display: block;
  overflow: hidden;
  border-radius: 2px;
}

.foot-backed-link:focus-visible {
  outline: 2px solid var(--wk-text, #f7f6f5);
  outline-offset: 4px;
}

.foot-ef-logo {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: cover;
}

.foot-profiles {
  display: flex;
  gap: 8px;
}

.ask-ai-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--wk-text-muted, rgba(255, 255, 250, 0.6));
}

.ask-ai-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--wk-border, rgba(255, 255, 255, 0.22));
  border-radius: var(--wk-radius, 4px);
  background: transparent;
  color: var(--wk-text, #f7f6f5);
  transition: background 160ms ease, border-color 160ms ease;
}

.ask-ai-btn:hover,
.ask-ai-btn:focus-visible {
  background: var(--wk-hover, #2a2927);
  border-color: var(--wk-text-muted, rgba(255, 255, 250, 0.6));
}

.ask-ai-icon {
  display: block;
  width: 18px;
  height: 18px;
}

/* Legal name and contact, under one hairline. */
.foot-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 96px;
  padding-top: 24px;
  border-top: 1px solid var(--wk-hairline, rgba(255, 255, 255, 0.11));
  font-size: 13px;
  color: var(--wk-text-muted, rgba(255, 255, 250, 0.6));
}

.foot-nav a,
.foot-base a {
  color: inherit;
  text-decoration: none;
  transition: color 160ms ease;
}

.foot-nav a:hover,
.foot-nav a:focus-visible,
.foot-base a:hover,
.foot-base a:focus-visible {
  color: var(--wk-text, #f7f6f5);
}

@media (max-width: 900px) {
  .foot-word {
    padding: 0 20px;
  }

  .foot-word svg {
    width: 100%;
  }

  .site-foot {
    padding: 48px 20px 20px;
  }

  .foot-top {
    align-items: flex-start;
    gap: 32px;
  }

  .foot-lockup {
    height: 32px;
  }

  .foot-nav {
    margin-top: 0;
    margin-right: 0;
  }

  .foot-base {
    margin-top: 48px;
  }

}

/* Touch: the system returns controls to 44px on a coarse pointer. */
@media (pointer: coarse) {
  .ask-ai-btn {
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 480px) {
  .foot-social {
    flex-wrap: nowrap;
    gap: 4px;
  }

  .ask-ai-row,
  .foot-profiles {
    gap: 4px;
  }

  .ask-ai-btn {
    width: clamp(30px, 9vw, 38px);
    height: clamp(30px, 9vw, 38px);
  }

  .ask-ai-icon {
    width: clamp(15px, 4.5vw, 18px);
    height: clamp(15px, 4.5vw, 18px);
  }

  .foot-backed {
    gap: 6px;
    white-space: nowrap;
  }

  .foot-ef-logo {
    width: clamp(24px, 7vw, 28px);
    height: clamp(24px, 7vw, 28px);
  }
}

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

  .foot-nav a,
  .foot-base a,
  .ask-ai-btn {
    transition: none;
  }
}