/* Extracted from index.html inline <style> blocks */

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

li::marker {
  color: #40A7D1;
}

.w-dropdown-link.w--current {
  color: #40A7CD !important;
}

/* Responsive font sizing (vw-based) */
body {
  font-size: 0.8333333333333334vw;
}

@media screen and (min-width: 1920px) {
  body {
    font-size: 16px;
  }
}

.container {
  max-width: 1920px;
}

@media screen and (max-width: 991px) {
  body {
    font-size: 8.258333333333335px;
  }
}

/* Hover effects */
.linkcube:hover .callout-2 {
  text-shadow: 1px 0 0 currentColor, -1px 0 0 currentColor;
}

.herocta:hover .arrowcircle {
  background-color: #f2fcff;
}

.herocta:hover .arrowcircle-arrow {
  color: #011624;
}

.linkcube:hover .arrowcircle {
  background-color: #C3A362;
}

.linkcube:hover .arrowcircle path {
  fill: #011624;
}

.textcta:hover .arrowcircle {
  background-color: #C3A362;
}

.textcta:hover .arrowcircle path {
  fill: #011624;
}

.home-news-item:last-child .newsdivider {
  display: none;
}

.home-news-feature:hover .newsarticlelink {
  color: #2F6275;
}

.home-news-item-container:hover .newsarticlelink {
  color: #2F6275;
}

section#announcement {
  display: flex !important;
}

/* Built-by-team: two cards side by side, 50vw each */
.built-by-team-cards {
  display: flex !important;
  flex-wrap: nowrap;
  width: 100%;
}

.built-by-team-cell {
  width: 50vw !important;
  min-width: 50vw;
  flex-shrink: 0;
}

/*
  Text slider - matching txse.com exactly.
  Swiper slidesPerView:"auto" + centeredSlides = Slick centerMode + variableWidth.
  Base text layer stays in-flow to size each slide; gold layer overlays it.
*/
.text-slider {
  overflow: hidden;
}

.text-slider .slide {
  position: relative;
  text-align: center;
  padding: 20px;
}

/* Base layer: in-flow so it sizes the slide width naturally */
.text-slider .slide .slide-text-base {
  position: relative;
  margin: 0;
  display: block;
  color: transparent;
  background-image: linear-gradient(90deg, rgba(8, 22, 31, 0) 24%, rgb(64, 167, 209));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 1;
  transition: opacity 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

/* Active (gold) layer: absolutely overlaid on top of base */
.text-slider .slide .slide-text-active {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 20px;
  margin: 0;
  display: block;
  background-image: radial-gradient(circle at 0 100%, #c3a362, #c3a362 19% 37%, #dbc8a0 69%, #f5e1b8 82%, #c3a362);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

/* Crossfade: active slide shows gold, hides turquoise */
.text-slider .swiper-slide-active .slide-text-active {
  opacity: 1;
}
.text-slider .swiper-slide-active .slide-text-base {
  opacity: 0;
}

/* Next slide: reversed gradient direction (matches live site) */
.text-slider .swiper-slide-next .slide-text-base {
  background-image: linear-gradient(270deg, rgba(8, 22, 31, 0) 24%, rgb(64, 167, 209));
}

/* Scale + opacity for non-active slides */
.text-slider .swiper-slide {
  transform: scale(0.8);
  opacity: 0.7;
  transition: transform 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95),
              opacity 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.text-slider .swiper-slide-active {
  transform: scale(1);
  opacity: 1;
}

/* Left/right fade overlays */
.text-slider-container {
  position: relative;
}

.text-slider-fade-left {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 120px;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(270deg, rgba(16, 32, 42, 0) 0.31%, #08161F 82.3%);
}

.text-slider-fade-right {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 120px;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(90deg, rgba(16, 32, 42, 0) 0.31%, #070A11 82.3%);
}

/* Hero SVG Line Motif */
.dotline-animated {
  width: 100%;
  height: auto;
  max-width: 1205px;
  overflow: visible !important;
  position: absolute;
  inset: auto -5% -25% auto;
}

.dotline-animated .line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dotline-animated .circle {
  fill: #C3A362;
}

/* Graph SVG Line Styling */
.circle-1 {
  fill: #2F6275;
}

.circle-2 {
  fill: #C3A362;
}

.circle-3 {
  fill: #F2FCFF;
}

.graph-lines {
  width: 120%;
  height: 120%;
  position: absolute;
  top: 20%;
  left: 20%;
}

.graph-lines svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scale(1.2);
  transform-origin: center center;
}

.linkcube:hover .callout-2 {
  text-shadow: none !important;
}

/* Video wrapper */
.video-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: #000;
  overflow: hidden;
}

#vimeoPlayer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#vimeoPlayer iframe {
  width: 100% !important;
  height: 100% !important;
}

.video-thumbnail,
.video-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.video-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  width: 80px;
  height: 80px;
  background: none;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.play-btn:hover {
  transform: translate(-50%, -50%) scale(1.1);
}

.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Footer citations: two columns side by side, numbered 1-10 */
.footer-citations .quick-stack-7.wf-layout-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  width: 100%;
}

.footer-citations .citation-list {
  list-style-type: decimal;
  list-style-position: outside;
  padding-left: 1.5em;
  margin: 0;
}

.footer-citations .citation-list li {
  margin-bottom: 0.5em;
}

/* Hero dot lines - grow from edge toward the dot (dot at growing tip) */
@keyframes hero-dotline-width {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes hero-dotline-vertical {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

/* Origin at edge so line extends toward the dot. */
.hero-dotline-animate .linedotline.leftright {
  animation: hero-dotline-width 1s cubic-bezier(0.45, 0, 0.55, 1) 0.3s forwards;
  transform-origin: left center;
}

.hero-dotline-animate .linedotline.linedotvertical {
  animation: hero-dotline-vertical 1s cubic-bezier(0.45, 0, 0.55, 1) 0.2s forwards;
  transform-origin: center top;
}

/* Solutions timeline: side-by-side two-column layout */
.solutions-section-timeline .solutions---timeline---grid {
  display: grid;
  grid-template-columns: 1fr minmax(200px, 1fr);
  grid-column-gap: 2em;
  grid-row-gap: 2em;
  align-items: start;
}

@media screen and (max-width: 767px) {
  .solutions-section-timeline .solutions---timeline---grid {
    grid-template-columns: 1fr;
  }
}

/* Solutions status quo: side-by-side two-column layout (bar graph left, copy right) */
.solutions-50-50-section .solutions-50-50-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 10em;
  align-items: start;
}

@media screen and (max-width: 991px) {
  .solutions-50-50-section .solutions-50-50-grid {
    grid-template-columns: 1fr;
  }
}

/* Bar graph Lottie: anchor to bottom of container so baseline of bars is at bottom */
.solutions-50-50-section .bar-graph-container {
  min-height: 320px;
}

.solutions-50-50-section .bar-graph-lines {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  height: 100%;
  min-height: 200px;
}

.solutions-50-50-section .bar-graph-lines > div {
  width: 100%;
  height: auto;
  display: block;
}

/* BugHerd #41: contain + center the "making history" intro (Figma 360-6225) so the
   text + photo carousel sit as a centered block rather than spread to the edges. */
.team-section-contact.main-section.image_slider_section {
  max-width: 1200px;
}

/* Meet the team intro: slider mask show one slide at a time */
.team-section-contact.mtt_image .mask-2.w-slider-mask,
.team-section-contact .slider-4 .w-slider-mask {
  overflow: hidden;
  width: 100%;
}
.team-section-contact .w-slider-mask-inner {
  height: 100%;
}
.team-section-contact .w-slider-mask-inner > div {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* BugHerd #219: the visible carousel (slider-4) rendered ~square because
   `.slider-4` is height:30vw with a 100%-width mask. Drive its height off a
   landscape aspect ratio instead so the photos read wide, not boxy. Higher
   specificity than the breakpoint `.slider-4 { height: 30vw }` rules. */
.team-section-contact .slider-4 {
  height: auto;
  min-height: 0;
}
.team-section-contact .slider-4 .w-slider-mask {
  height: auto;
  aspect-ratio: 16 / 10;
}
.team-section-contact .mtt_image.image_carousel {
  min-height: 0;
}

/* Lever jobs (careers section) */
#lever-jobs-container ul {
  list-style: none;
  padding-left: 0;
}
#lever-jobs-container h4.lever-team-title {
  font-family: "Neue Haas Grotesk Text Pro", sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 34px;
  color: var(--Cold-Grey, #B3C1C6);
}
#lever-jobs-container .JobDetails {
  font-family: "Neue Haas Grotesk Text Pro", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  color: #C3A362;
  display: flex;
  gap: 17px;
}
#lever-jobs-container .jobTitle {
  font-family: "Neue Haas Grotesk Text Pro", sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 34px;
  color: var(--Ice-White, #F2FCFF);
}
#lever-jobs-container .jobholder {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px 0;
  border-top: 1px solid #2F6275;
}
#lever-jobs-container .job_right a,
#lever-jobs-container .jobsButton a {
  color: var(--Ice-White, #F2FCFF);
  font-family: "Neue Haas Grotesk Text Pro", sans-serif;
  font-size: 12.018px;
  font-weight: 400;
  line-height: 16.024px;
  text-decoration: none;
  border-radius: 36.722px;
  border: 0.668px solid var(--Ice-White, #F2FCFF);
  padding: 9px 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 500ms;
}
#lever-jobs-container .jobsButton {
  display: flex;
  margin-bottom: 30px;
}
#lever-jobs-container .job_right a:hover,
#lever-jobs-container .jobsButton a:hover {
  background-color: #f2fcff;
  color: #011624;
}
#lever-jobs-container .lever-loading,
#lever-jobs-container .lever-error {
  text-align: center;
  padding: 40px 20px;
  color: var(--Ice-White, #F2FCFF);
  font-family: "Neue Haas Grotesk Text Pro", sans-serif;
}
#lever-jobs-container .lever-error {
  color: #ff6b6b;
}
#lever-jobs-container {
  border-bottom: 1px solid #2F6275;
  margin-bottom: 50px;
}
@media (max-width: 550px) {
  #lever-jobs-container .jobholder {
    flex-wrap: wrap;
    gap: 20px;
  }
}

/* Board hero: ensure overlay doesn't block; fallback if image missing */
.team-hero-section.team-hero-section-has-bg {
  overflow: hidden;
}
.team-hero-section-bg-overlay {
  background-color: rgba(1, 22, 36, 0.85);
}
/* Keep hero content above overlay */
.team-hero-section.team-hero-section-has-bg .team-hero-section-content {
  position: relative;
  z-index: 1;
}
/* Let linedots reach viewport edges: team hero sections use full width so linedots (align-self start/end) hit the edges */
.team-hero-section.w-container,
.team-hero-section.w-layout-blockcontainer {
  max-width: 1920px;
  width: 100vw;
}

/* Board grid: ensure boardmember can position ::before row divider */
.boardlistwrapper .board-list .boardmember {
  position: relative;
}
/* Board grid: row dividers (gradient line above each row) */
.boardlistwrapper .board-list .boardmember:nth-child(4n+1)::before {
  content: '';
  position: absolute;
  z-index: 1; /* sit above the board photos so the divider isn't hidden (BugHerd #147) */
  /* Center the rule over the grid row with an EQUAL 120px overhang each side (BugHerd
     #307, Thomas — was left-anchored 1340px, hanging left + short on the right). Below the
     max-w-1440 cap the board grid is full-bleed (width == 100vw), so 100vw + 240 (2x the
     120 overhang), started 120px left, is even. Above the cap the grid is centred at
     ~1300px, handled by the min-width:1440 override below. */
  left: -120px;
  top: -1.5px;
  width: calc(100vw + 240px);
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, #C3A362 8%, #C3A362 92.5%, transparent 100%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}
.boardlistwrapper .board-list .boardmember:first-child::before {
  content: '';
  position: absolute;
  z-index: 1; /* sit above the board photos so the divider isn't hidden (BugHerd #147) */
  left: -120px;
  top: -1.5px;
  width: calc(100vw + 240px);
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, #C3A362 8%, #C3A362 92.5%, transparent 100%);
  pointer-events: none;
}
/* At/above the max-w-1440 cap the grid stops growing (~1300px wide, centred), so the rule
   is a fixed 1300 + 240 = 1540px (still 120px overhang each side) instead of 100vw-based. */
@media (min-width: 1440px) {
  .boardlistwrapper .board-list .boardmember:nth-child(4n+1)::before,
  .boardlistwrapper .board-list .boardmember:first-child::before {
    width: 1540px;
  }
}

/* Board grid: bio centered below row with connector under active card */
.board-list.open .boardmember:not(.active) > div {
  opacity: 0.15;
  transition: opacity 500ms cubic-bezier(0.37, 0, 0.63, 1);
}
.board-list.open .boardmember:not(.active):hover {
  opacity: 1;
  transition: opacity 300ms cubic-bezier(0.37, 0, 0.63, 1);
}
.boardmember.active .board-card {
  transform: translate3d(0, -10px, 0);
  transition: transform 500ms cubic-bezier(0.37, 0, 0.63, 1);
}
.team-bio-container-2 {
  width: 1100px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.team-bio-container-2 .connector_line {
  background-color: #40a7d1;
  width: 1px;
  height: 22px;
  margin: auto;
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
}
/* Position bio container so it sits centered under the active card (4-col grid: 275px card width) */
.boardmember:nth-child(4n+1) .team-bio-container-2 { transform: translate(0, 0); }
.boardmember:nth-child(4n+2) .team-bio-container-2 { transform: translate(-275px, 0); }
.boardmember:nth-child(4n+3) .team-bio-container-2 { transform: translate(-550px, 0); }
.boardmember:nth-child(4n+4) .team-bio-container-2 { transform: translate(-825px, 0); }
.boardmember:nth-child(1) .team-bio-container-2 .connector_line { transform: translate(-415px, 0); }
.boardmember:nth-child(2) .team-bio-container-2 .connector_line { transform: translate(-140px, 0); }
.boardmember:nth-child(3) .team-bio-container-2 .connector_line { transform: translate(135px, 0); }
.boardmember:nth-child(4) .team-bio-container-2 .connector_line { transform: translate(400px, 0); }
.boardmember:nth-child(4n+1) .team-bio-container-2 .connector_line { transform: translate(-415px, 0); }
.boardmember:nth-child(4n+2) .team-bio-container-2 .connector_line { transform: translate(-140px, 0); }
.boardmember:nth-child(4n+3) .team-bio-container-2 .connector_line { transform: translate(135px, 0); }
.boardmember:nth-child(4n+4) .team-bio-container-2 .connector_line { transform: translate(400px, 0); }

@media (max-width: 998px) {
  .boardlistwrapper .board-list .boardmember:nth-child(4n+1)::before,
  .boardlistwrapper .board-list .boardmember:first-child::before { content: unset; }
  .boardmember:nth-child(4n+1) .team-bio-container-2,
  .boardmember:nth-child(4n+2) .team-bio-container-2,
  .boardmember:nth-child(4n+3) .team-bio-container-2,
  .boardmember:nth-child(4n+4) .team-bio-container-2 { transform: unset; }
  .boardmember:nth-child(3n+1) .team-bio-container-2 { transform: translate(0, 0); }
  .boardmember:nth-child(3n+2) .team-bio-container-2 { transform: translate(-33.333vw, 0); }
  .boardmember:nth-child(3n+3) .team-bio-container-2 { transform: translate(-66.666vw, 0); }
  .boardmember:nth-child(3n+1) .team-bio-container-2 .connector_line { transform: translate(-33.333vw, 0); }
  .boardmember:nth-child(3n+2) .team-bio-container-2 .connector_line { transform: translate(0, 0); }
  .boardmember:nth-child(3n+3) .team-bio-container-2 .connector_line { transform: translate(33.333vw, 0); }
}
@media (max-width: 768px) {
  .boardmember:nth-child(3n+1) .team-bio-container-2,
  .boardmember:nth-child(3n+2) .team-bio-container-2,
  .boardmember:nth-child(3n+3) .team-bio-container-2 { transform: unset; }
  .boardmember:nth-child(2n+1) .team-bio-container-2 { transform: translate(0, 0); }
  .boardmember:nth-child(2n+2) .team-bio-container-2 { transform: translate(-50vw, 0); }
  .boardmember:nth-child(2n+1) .team-bio-container-2 .connector_line { transform: translate(-25vw, 0); }
  .boardmember:nth-child(2n+2) .team-bio-container-2 .connector_line { transform: translate(25vw, 0); }
}
@media (max-width: 478px) {
  .boardmember:nth-child(2n+1) .team-bio-container-2,
  .boardmember:nth-child(2n+2) .team-bio-container-2 { transform: unset; }
  .boardmember:nth-child(1n+1) .team-bio-container-2 { transform: translate(0, 0); }
  .boardmember:nth-child(1n+1) .team-bio-container-2 .connector_line { transform: translate(0, 0); }
}

/* Team/leadership grid: "Read Bio" slides open on card hover (and stays open
   on the active card) — mirrors the live site's jQuery hover handler. */
.team-card .textcta.leftalign.readbiolink {
  height: 0;
  overflow: hidden;
  transition: height 0.25s ease;
}
.team-card:hover .textcta.leftalign.readbiolink {
  height: 40px;
  padding-bottom: 10px;
}
/* On the active card the bio is already open — hide Read Bio entirely (even on hover). */
.team-member.active .textcta.leftalign.readbiolink {
  height: 0 !important;
  padding-bottom: 0 !important;
}

/* Leadership grid fills the section's content area so the first card's left edge
   sits at the page gutter, aligned with the heading text above (BugHerd #185 —
   Thomas: "align text and the card grids left sides on larger screens"). The
   wrapper already has the 1rem/2rem/5.5rem page-gutter padding below; with no
   inner cap, the grid flows edge-to-edge of the gutter (the auto-fit 230px
   tracks below cap the column count, so no overflow). */
div#leadershipGrid {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}

.team-list.leadership-list {
  grid-template-columns: repeat(auto-fit, 230px);
  justify-content: flex-start;
  width: 100%;
}
/* Heading shares the grid's 1190px column so it lines up with the first card. */
.collection-list-wrapper.leadershipgrid h2 {
  width: 100%;
  max-width: 1190px;
  margin-inline: auto;
  margin-bottom: 35px;
}
.team-list:not(.leadership-list) {
  /* Fixed 200px tracks so team cards render 200×406 (the ~1:2.02 crop sets the
     height) instead of stretching to 1fr (Trey). */
  grid-template-columns: repeat(auto-fill, 200px);
  justify-content: flex-start;
  width: 100%;
}
.team-member {
  min-width: 0;
}

/* Mobile team grids: the fixed 230px/200px tracks only fit one column on a phone,
   so force columns — leadership capsules 2-up (BugHerd #291), Meet-the-Team 3-up
   (#293) — and centre + enlarge the Meet-the-Team heading (#292). */
@media (max-width: 767px) {
  .team-list.leadership-list { grid-template-columns: repeat(2, 1fr); column-gap: 12px; }
  .team-list:not(.leadership-list) { grid-template-columns: repeat(3, 1fr); column-gap: 8px; }
  .collection-list-wrapper.leadershipgrid h2 {
    text-align: center;
    font-size: 2.5rem;
    line-height: 1.1;
    padding-top: 0.5rem;
    margin-bottom: 1.75rem;
  }
  /* The governance board never got the leadership grid's gutters, so its group
     heading ("Executive Committee") was clipped at the left edge and the cards +
     names/titles ran edge-to-edge with no margin (BugHerd #289). Inset it so it
     breathes like the rest of the page. */
  .boardlistwrapper { padding-left: 1.25rem; padding-right: 1.25rem; }
}

/* Leadership wrapper gets site gutters so the "Meet the Team" heading and the
   card grid don't run to the viewport edge (BugHerd #14, #15). */
.collection-list-wrapper.leadershipgrid {
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 768px) {
  .collection-list-wrapper.leadershipgrid {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
@media (min-width: 1280px) {
  .collection-list-wrapper.leadershipgrid {
    padding-left: 5.5rem;
    padding-right: 5.5rem;
  }
}

/* Board card meta block: let long role titles wrap fully with a little bottom
   padding instead of being clipped by the fixed 87px/100px height (BugHerd #18). */
.div-block-14 {
  height: auto;
  max-height: none;
  padding-bottom: 16px;
}
/* Slight sky-blue gradient behind the name + role title so the meta block lifts
   off the page canvas (same hue family as the insight/card gradients). */
.boardmember .div-block-14 {
  background-image: linear-gradient(159deg, rgba(25, 66, 83, 0.55) 0%, rgba(12, 33, 41, 0) 72%);
  padding-top: 14px;
  padding-inline: 6px;
}

/* About page location section: the live site's 2-col split comes from a
   #w-node-… Webflow ID rule our markup doesn't carry — recreate it here. */
.about-section-location .quick-stack-6 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-column-gap: 114px;
}
@media (max-width: 767px) {
  .about-section-location .quick-stack-6 {
    grid-template-columns: 1fr;
    grid-row-gap: 32px;
  }
}

/* "Our home in Dallas" body + bullet copy reads ice-white, not cold-grey
   (Figma 339:12109 — overrides txse.css's .coldgrey #b3c1c6). BugHerd #132. */
.about-section-location .locationcontent .body-2.coldgrey { color: var(--ice-white); }

/* Team/leadership card name labels render ice-white (no inherited muted tone). */
.team-member-label { color: var(--ice-white); }
/* The team (nonleadership) last name uses line-height:0 in txse.css, which collapses
   the box to 0 height — fine for short single-word names, but a long/hyphenated
   surname (e.g. "Cordova-Wong") then overlaps the first name. Give it a real line
   box + allow a clean break so two-line names stack legibly (BugHerd #248). */
.team-member-label.last-name.nonleadership { line-height: 1.05; overflow-wrap: anywhere; }
/* Leadership last name: txse.css sets line-height .3em, which squishes the box and
   crowds the surname against the first name; give it a real line box (Trey). */
.team-member-label.last-name { line-height: 1.1em; }
/* Leadership title: add a matching bottom margin so it isn't crowded below (Trey). */
.leadershiptitle { margin-bottom: 7px; }

/* #247: the governance open-bio read narrow next to the leadership grid's, because
   the board sits in a 1300px wrapper (#235) while the leadership grid is full width —
   both inset the bio 14em each side. Shrink just the governance bio's side insets so
   its content runs ~as wide as leadership's (~1150px). Board grid (#235) + centred
   bio (#96) are untouched; scoped to .boardlistwrapper so leadership is unaffected. */
.boardlistwrapper .flex-block-10.bio-container-inner { margin-left: 5em; margin-right: 5em; }

/* ── Team/leadership bio panel ─────────────────────────────────────────── */
/* Transparent over the page canvas (no flat navy fill). */
.team-bio-container { background-color: transparent; }
/* Bio name + body render ice-white; pipe divider stays ice-white (role keeps primary). */
.team-bio-headline .teamtitle { color: var(--ice-white); }
.team-bio-headline .divider { background-color: var(--ice-white); }
.team-bio-container .body-1 { color: var(--ice-white); }

/* Leadership capsule grid: cards left-align within the wrapper (BugHerd #13). */
.team-list.leadership-list { margin-left: 0; margin-right: 0; }

/* Card overlay: clear at top, darkening toward the bottom for label legibility. */
.team-card-overlay {
  background-image: linear-gradient(#10202a00, #0d2331a8 70%, #061623 90%);
}

/* Selected state: the active card lifts; every other card fades right back. */
.team-member.active .team-card {
  transform: translate3d(0px, -10px, 0px) !important;
  transition: transform 500ms cubic-bezier(0.37, 0, 0.63, 1);
  -webkit-transition: transform 500ms cubic-bezier(0.37, 0, 0.63, 1);
}
.team-list.open .team-member:not(.active) {
  opacity: 0.15;
  transition: opacity 500ms cubic-bezier(0.37, 0, 0.63, 1);
  -webkit-transition: opacity 500ms cubic-bezier(0.37, 0, 0.63, 1);
}
/* Hovering a faded card brings it back to full so you can read it before clicking. */
.team-list.open .team-member:not(.active):hover {
  opacity: 1;
  transition: opacity 300ms cubic-bezier(0.37, 0, 0.63, 1);
  -webkit-transition: opacity 300ms cubic-bezier(0.37, 0, 0.63, 1);
}

/* BugHerd #141: bio connector + top-border lines at 2px to match the Figma
   component-library dot-line weight (leadership + governance bio panels). */
.connector_line { width: 2px; }
.bio-top-border { height: 2px; }
.team-bio-container-2 .connector_line { width: 2px; }

/* Governance/leadership bio dividers use the GOLD rule (not blue) to match the
   gold row dividers above each board row. */
.boardlistwrapper .connector_line,
.team-bio-container .connector_line { background-color: #C3A362; }
.boardlistwrapper .bio-top-border,
.team-bio-container .bio-top-border {
  background-image: linear-gradient(90deg, rgba(195, 163, 98, 0) 0%, #C3A362 14%, #C3A362 86%, rgba(195, 163, 98, 0) 100%);
}

/* BugHerd #235: give the board sections more width so role titles double-line
   less, and guarantee member NAMES never wrap. Widen the desktop wrapper
   (max-width, so narrow viewports never overflow) and let each card fill its
   column (the desktop base pinned .board-card to 275px); the role title uses
   the full card width (was 87%); the name is forced single-line. */
.boardlistwrapper.collection-list-wrapper-4 { width: 100%; max-width: 1300px; }
.boardlistwrapper .board-card { width: 100%; }
.boardlistwrapper .text-block-12 { width: 100%; }
.boardlistwrapper .text-block-11 { white-space: nowrap; }