/* solutions.html — page-specific styles.
   Distinct treatment: service rows behave like an accordion (see solutions.js) —
   click a row to expand its detail list, with a sliding green accent bar. */

.service-row{
  cursor: pointer;
  position: relative;
  padding-left: 18px;
  transition: background-color 0.25s ease, padding-left 0.25s ease;
}
.service-row::before{
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--green);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.3s ease;
}
.service-row.is-active::before{ transform: scaleY(1); }
.service-row.is-active{ background: var(--light); padding-left: 26px; }
.service-row ul{
  overflow: hidden;
  max-height: 1000px;
  opacity: 1;
  transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.3s ease;
}
.service-row:not(.is-active) ul{
  max-height: 0;
  opacity: 0;
  margin-top: 0;
}
.service-row .service-index{
  transition: color 0.25s ease;
}
.service-row.is-active .service-index{ color: var(--navy); }