/* ==========================================================================
   Ecosystems — Webflow Component (V3)
   Statement header matches Solutions (.bd-eco__intro).
   Tabs and board share one grey plate (Hero 8px radius). Title-only tabs;
   the selected tab's line sits as the board heading, with Learn more beside it.
   Each tab has a 4px underline: grey when idle, accent when selected.
   Role columns are open type (no cards): Lucide icon before the header.
   Self-contained: does not need base.css. Tokens used with fallbacks.
   Prefix is .bd-ekos so it does not collide with Solutions (.bd-eco)
   or Original network (.bd-network). Loaded only from index.html (V3).
   ========================================================================== */

.bd-ekos,
.bd-ekos *,
.bd-ekos *::before,
.bd-ekos *::after {
  box-sizing: border-box;
}

.bd-ekos {
  --bd-ekos-rule: #d5d7da;
  --bd-ekos-bar-h: 4px;
  --bd-ekos-tab-bg: #f7f7f7;
  --bd-ekos-tab-bar-hover: #b9a7fb;
  --bd-ekos-board-bg: #f4f4f4;
  --bd-ekos-board-radius: var(--bd-radius, 8px);
  --bd-ekos-board-pad: 48px;
  --bd-ekos-brand-h: 20px;
  display: block;
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
  padding: 64px 0;
  font-family: var(--bd-font, InterVariable, sans-serif);
  font-feature-settings: "liga" 1, "calt" 1, "cv02", "cv03", "cv04", "cv11";
  font-optical-sizing: auto;
  color: var(--bd-text, #000);
}

.bd-ekos .bd-wrap {
  width: 100%;
  max-width: var(--bd-content, 1280px);
  margin-inline: auto;
  scroll-margin-top: 104px;
}

.bd-ekos__intro {
  width: 100%;
  margin: 0 0 var(--bd-space-8, 32px);
}

.bd-ekos__eyebrow {
  margin: 0 0 var(--bd-space-2, 8px);
  font-size: var(--bd-text-sm, 14px);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--bd-accent, #6434d8);
}

.bd-ekos__title {
  margin: 0;
  font-size: 32px;
  font-weight: var(--bd-weight-heading, 500);
  font-variation-settings: "wght" var(--bd-weight-heading, 500);
  line-height: 1.2;
  color: var(--bd-text, #000);
  hyphens: none;
  overflow-wrap: normal;
}

.bd-ekos__lead {
  margin: var(--bd-space-3, 12px) 0 0;
  max-width: 40rem;
  font-size: var(--bd-text-base, 16px);
  font-weight: 400;
  line-height: 1.5;
  color: var(--bd-text, #000);
}

/* --- One plate: title-only tabs attached to the board --- */

.bd-ekos__deck {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  background: var(--bd-ekos-board-bg);
  border-radius: var(--bd-ekos-board-radius);
}

.bd-ekos__tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
  background: var(--bd-ekos-tab-bg, #f7f7f7);
  border-radius: var(--bd-ekos-board-radius) var(--bd-ekos-board-radius) 0 0;
}

.bd-ekos__tab {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 80px;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--bd-ekos-tab-bg, #f7f7f7);
  font: inherit;
  font-optical-sizing: auto;
  font-size: 18px;
  font-weight: 500;
  font-variation-settings: "wght" 500;
  line-height: 1.3;
  color: var(--bd-text, #000);
  text-align: center;
  cursor: pointer;
  transition: background var(--bd-dur, 0.3s) var(--bd-ease, ease);
}

.bd-ekos__tab-bar {
  display: block;
  position: absolute;
  left: 0;
  right: 1px;
  bottom: 0;
  flex: none;
  width: auto;
  height: var(--bd-ekos-bar-h, 4px);
  margin: 0;
  background: var(--bd-ekos-rule, #d5d7da);
  transition: background var(--bd-dur, 0.3s) var(--bd-ease, ease);
}

.bd-ekos__tab:last-child .bd-ekos__tab-bar {
  right: 0;
}

/* Hover keeps the tab background; the bar warms to light accent. */
.bd-ekos__tab:not(.is-active):not([aria-selected="true"]):hover .bd-ekos__tab-bar {
  background: var(--bd-ekos-tab-bar-hover, #b9a7fb);
}

.bd-ekos__tab.is-active .bd-ekos__tab-bar,
.bd-ekos__tab[aria-selected="true"] .bd-ekos__tab-bar {
  background: var(--bd-accent, #6434d8);
}

.bd-ekos__tab:focus {
  outline: none;
}

.bd-ekos__tab:focus-visible {
  outline: 2px solid var(--bd-text, #000);
  outline-offset: -2px;
}

.bd-ekos__tab-name {
  display: block;
  width: 100%;
  padding: 0 var(--bd-space-5, 20px);
  font-size: inherit;
  font-weight: 500;
  font-variation-settings: "wght" 500;
  line-height: inherit;
  color: inherit;
  text-align: center;
  box-sizing: border-box;
}

.bd-ekos__sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* --- Board: same plate as the selected tab, no extra fill or gap --- */

.bd-ekos__board {
  width: 100%;
  min-width: 0;
  padding: var(--bd-ekos-board-pad);
  background: transparent;
  border-radius: 0 0 var(--bd-ekos-board-radius) var(--bd-ekos-board-radius);
}

.bd-ekos__board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bd-space-6, 24px);
  margin: 0 0 var(--bd-ekos-board-pad);
  padding: 0;
  border-bottom: 0;
}

/* Heading, separator and link read as one line; the mark stays far right. */
.bd-ekos__board-lead {
  display: flex;
  align-items: center;
  gap: var(--bd-space-3, 12px);
  min-width: 0;
}

/* Short rule, cut to the heading's cap height, not the full row. */
.bd-ekos__head-rule {
  flex: 0 0 auto;
  width: 1px;
  height: 16px;
  background: var(--bd-ekos-rule);
}

.bd-ekos__head-more {
  flex: 0 0 auto;
  color: var(--bd-link, #2563EB);
  font-size: var(--bd-text-base, 16px);
  font-weight: 400;
  font-variation-settings: "wght" 400;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.bd-ekos__head-more:hover {
  color: var(--bd-link, #2563EB);
}

.bd-ekos__head-more:focus-visible {
  outline: 2px solid var(--bd-link, #2563EB);
  outline-offset: 3px;
}

/* The mark of the selected ecosystem. Items are stacked, only one is shown,
   so the row keeps its height while the panels crossfade. */

.bd-ekos__brand {
  flex: 0 0 auto;
  display: grid;
  align-items: center;
  justify-items: end;
  height: var(--bd-ekos-brand-h);
}

/* Grid stacking, not absolute: the box takes the width of the widest mark,
   so the right edge never shifts as the tabs change. */
.bd-ekos__brand-item {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  gap: var(--bd-space-2, 8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--bd-dur, 0.3s) var(--bd-ease, ease);
}

.bd-ekos__brand-item.is-active {
  opacity: 1;
  visibility: visible;
}

/* Height is set, width follows the ratio: an SVG mark carries no intrinsic
   size, so `height: auto` would collapse it. max-width also beats Webflow's
   `img { max-width: 100% }`. */
.bd-ekos__brand-item img {
  display: block;
  width: auto;
  height: var(--bd-ekos-brand-h);
  max-width: 180px;
  object-fit: contain;
}

.bd-ekos__brand-word {
  font-size: var(--bd-text-base, 16px);
  font-weight: 500;
  font-variation-settings: "wght" 500;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  color: var(--bd-text, #000);
}

/* Tracks the mark height so this tab is not taller than the logo tabs. The
   box shrinks, the hairline does not — see the non-scaling-stroke below. */
.bd-ekos__brand-icon {
  flex: 0 0 auto;
  display: block;
  width: var(--bd-ekos-brand-h);
  height: var(--bd-ekos-brand-h);
  color: var(--bd-text, #000);
  overflow: visible;
}

.bd-ekos__brand-icon :is(rect, path, circle, line, polyline, polygon) {
  vector-effect: non-scaling-stroke;
}

/* --- Panels + role columns --- */

.bd-ekos__panels {
  display: grid;
}

.bd-ekos__panel {
  grid-area: 1 / 1;
  min-width: 0;
}

.bd-ekos__panel[hidden] {
  display: none;
}

.bd-ekos__roles-title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--bd-text-base, 16px);
  font-weight: 500;
  font-variation-settings: "wght" 500;
  line-height: 1.2;
  color: var(--bd-text, #000);
  text-align: left;
}

.bd-ekos__roles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--bd-space-6, 24px);
  width: 100%;
  min-width: 0;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity var(--bd-dur, 0.3s) var(--bd-ease, ease),
    transform var(--bd-dur, 0.3s) var(--bd-ease, ease);
}

.bd-ekos__roles.is-prep,
.bd-ekos__roles.is-leave {
  opacity: 0;
  transform: translate3d(0, 6px, 0);
}

.bd-ekos__roles.is-prep {
  transition: none;
}

.bd-ekos__role {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.bd-ekos__role-head {
  display: flex;
  align-items: center;
  gap: var(--bd-space-3, 12px);
  margin: 0 0 var(--bd-space-3, 12px);
}

.bd-ekos__role-icon {
  flex: 0 0 auto;
  display: block;
  width: 24px;
  height: 24px;
  color: var(--bd-text, #000);
  overflow: visible;
}

.bd-ekos__role-name {
  margin: 0;
  font-size: var(--bd-text-sm, 14px);
  font-weight: 500;
  font-variation-settings: "wght" 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--bd-text, #000);
}

.bd-ekos__role-copy {
  margin: 0;
  font-size: var(--bd-text-base, 16px);
  font-weight: 400;
  line-height: 1.5;
  color: var(--bd-text, #000);
}

.bd-ekos__link {
  color: var(--bd-link, #2563EB);
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
  text-decoration: none;
}

.bd-ekos__link:hover {
  color: var(--bd-link, #2563EB);
}

.bd-ekos__link:focus-visible {
  outline: 2px solid var(--bd-link, #2563EB);
  outline-offset: 3px;
}

@media (max-width: 1023px) {
  .bd-ekos {
    --bd-ekos-board-pad: 36px;
    --bd-ekos-brand-h: 18px;
    padding: 48px 0;
  }

  .bd-ekos__title {
    font-size: 28px;
  }

  /* Title-only tabs still fit four-up in the 768–1023 band. */
  .bd-ekos__tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .bd-ekos {
    --bd-ekos-board-pad: 30px;
  }

  .bd-ekos .bd-wrap {
    scroll-margin-top: 80px;
  }

  .bd-ekos__title {
    font-size: 24px;
  }

  /* Two-up on the same plate — bars still run edge to edge, 1px apart. */
  .bd-ekos__tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0;
  }

  .bd-ekos__tab {
    min-height: 64px;
    font-size: 16px;
  }

  .bd-ekos__tab:nth-child(even) .bd-ekos__tab-bar {
    right: 0;
  }

  .bd-ekos__tab:nth-child(odd) .bd-ekos__tab-bar {
    right: 1px;
  }

  /* Mark above the heading — the row is too narrow to hold both. */
  .bd-ekos__board-head {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: var(--bd-space-4, 16px);
  }

  .bd-ekos__brand {
    justify-items: start;
  }

  /* Heading and link stack; a vertical rule between them reads as noise. */
  .bd-ekos__board-lead {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--bd-space-2, 8px);
  }

  .bd-ekos__head-rule {
    display: none;
  }

  .bd-ekos__roles {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bd-ekos__tab,
  .bd-ekos__roles,
  .bd-ekos__brand-item {
    transition: none;
  }
}