/*----------------------------------------*/
/*  Equal-height product/project cards
/*  Scoped to .tp-project__area so the section
/*  header row (.tp-project__section-box) is untouched.
/*----------------------------------------*/
.tp-project__area .row > [class*="col-"]:has(> .tp-project__item) {
  display: flex;
}
.tp-project__area .row > [class*="col-"]:has(> .tp-project__item) > .tp-project__item {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* .mb-30 class already applies the 30px bottom spacing (spacing.css) */
}
.tp-project__area .tp-project__item .tp-project__content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/*----------------------------------------*/
/*  Equal-height service cards (Build / Launch / Grow)
/*  Scoped to #tp-solutions (.tp-service__area). This section
/*  is a Slick slider. Actual DOM (verified via DevTools):
/*  .slick-track (flex) > .slick-slide (the real flex item)
/*  > div (plain Slick-generated wrapper, no class) >
/*  .tp-service__item, which carries an inline
/*  "display:inline-block; width:100%" that wins over any
/*  rule targeting .tp-service__item alone. Every level in
/*  the chain must be flexed for equal-height cards to work.
/*----------------------------------------*/
.tp-service__area .tp-service__slider-active .slick-track {
  display: flex !important;
  align-items: stretch;
}
.tp-service__area .tp-service__slider-active .slick-slide {
  height: auto !important;
  display: flex !important;
  float: none;
}
.tp-service__area .tp-service__slider-active .slick-slide > div {
  display: flex;
  width: 100%;
}
.tp-service__area .tp-service__slider-active .tp-service__item {
  display: flex !important;
  flex-direction: column;
  width: 100%;
  height: auto !important;
  max-height: none;
}
.tp-service__area .tp-service__slider-active .tp-service__item .tp-service__link {
  margin-top: auto;
}