::selection{background:var(--brand-red)!important;color:#fff!important}
img{user-select:none}
.hidden,.hide{display:none!important;}
body::-webkit-scrollbar-track{background:#f4f4f4}
body::-webkit-scrollbar-thumb{background-color:#e2080a;border-radius:6px;border:4px solid #fff}
body::-webkit-scrollbar{width:6px}
[data-scroll="false"] {position: fixed!important; overflow: hidden!important; width: 100%!important;}
[data-scroll="true"] {position: static!important; overflow: auto!important; width: auto!important;}
[data-navlinkunderline] {transform: scaleX(0);transform-origin: left;transition: transform 0.3s ease-in-out;}
[data-mainnav-link]:hover [data-navlinkunderline] {transform: scaleX(1);}
[data-active="true"] [data-navlinkunderline] {transform: scaleX(1);}
[data-subnav]{position:relative;min-height:77px}
[data-underline]{position:absolute;left:0;top:0;height:2px;width:0;background:var(--brand-red);display:block;pointer-events:none;z-index:9999;transition:left .35s,width .35s}
.card-text-clip {overflow: hidden; max-height: 0;transition: max-height 1000ms ease-in-out;}
.solution-card{height:auto;overflow:visible;}
.solution-card.is-active {opacity: 1;}
.card-text-clip { overflow: hidden; max-height: 0; transition: max-height 800ms ease-in-out;}
.solution-card.is-active {filter: none;transform: translateY(0);}


/* hooks */
[data-team="wrap"] { position: relative; }
[data-team="grid"] {display: grid;grid-template-columns: repeat(4, minmax(0, 1fr));gap: 2rem;}
@media (max-width: 991px){[data-team="grid"] { grid-template-columns: repeat(2, minmax(0, 1fr));}}
@media (max-width: 767px){[data-team="grid"] { grid-template-columns: 1fr; }}
/* in-card bio stays hidden; we copy its HTML into the floating panel */
.team-card .bio { display: none; }

/* dim non-active cards */
.team-card.dim { opacity: .2; pointer-events: none; transition: opacity .3s ease; }
/* image wrapper should be position:relative; */
/* image wrapper */
.staff-img {
  position: relative;
  overflow: hidden; width: 100%;
  height: 308px;
  filter: grayscale(100%) contrast(150%);
  transition: filter 0.3s ease; display: block;
}
/* overlay layer: light gray at 50% */
.staff-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(--var(light-gray),0.2); /* adjust color/opacity */
  transition: opacity 0.3s ease;
}
/* hover or active card = full color, no overlay */
.team-card:hover .staff-img ,
.team-card.is-open .staff-img  {
  filter: grayscale(0%);
}

.team-card:hover .staff-img::after,
.team-card.is-open .staff-img::after {
  opacity: 0;
}

/* floating panel (reused) */
.bio-panel{
  position: absolute; top: 0; left: 0;
  background: #fff;
  border-radius: 1rem; 
  padding: 20px;
  min-height:400px;
  max-height: 80vh; overflow: auto;
  opacity: 0; pointer-events: none;
  transform: translate3d(0,8px,0);
  transition: opacity .2s ease, transform .2s ease;
  z-index: 5; /* optional but helpful */
}
.bio-panel.is-open{ opacity:1; pointer-events:auto; transform:translate3d(0,0,0); }

/* mobile: stack below grid */
@media (max-width: 767px){
  .bio-panel{ position: static; width: auto; max-height: none; margin-top: 16px; }
  .team-card.is-open .bio{display:flex}
  .team-card.is-closed .bio{display:none}
}

/* frames */
[data-history-left],
[data-history-right],
[data-history-images] { position: relative; overflow: hidden; }

/* belts */
.slide-track,
.slide-track2,
.slide-track--images {display: flex;will-change: transform;transition: transform .6s cubic-bezier(.25,.8,.25,1);}
.slide-track,
.slide-track2 { flex-direction: column; }
.slide-track--images { flex-direction: row-reverse; transition: transform .7s cubic-bezier(.25,.8,.25,1) .08s;}

/* slides */
.slide-content-1-slide,
.slide-content-2-slide,
.slide-img-item { flex: 0 0 auto; }

/* timeline dual-icon toggle */
[data-timeline-icon="active"] { display: none; }
[data-timeline-step].is-active [data-timeline-icon="active"] { display: block; }
[data-timeline-step].is-active [data-timeline-icon="default"] { display: none; }
[data-timeline-step].is-active [data-timeline-label] {font-weight: 700; background: var(--Gradient-Red, linear-gradient(136deg, #E2080A 26.25%, #8A0002 102.29%));background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;}

/* disabled arrows look */
.history-slider-button[disabled] { border:1px solid var(--gray); color:var(--gray);pointer-events:none; }
/* timeline becomes a horizontal scroller */
[data-timeline]{
  display: flex;                 /* lay steps in a row */
  align-items: center;
  justify-content: flex-start;   /* don't space-between; let it be content-width */
  gap: 24px;                     /* your spacing between steps/lines */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory; /* optional nice feel */
  padding-bottom: 6px;           /* room for hidden scrollbar if any */
}

/* optional: hide scrollbar */
[data-timeline]::-webkit-scrollbar{ display:none; }
[data-timeline]{ scrollbar-width:none; }

/* each step snaps; your lines can stay as-is */
[data-timeline-step]{ scroll-snap-align: center; }
  a [data-tf-popup] {
    font-family: inherit !important;
    height: var(--_sizes---38px)!important;
    border-top-left-radius: var(--_sizes---40px)!important;
    border-top-right-radius: var(--_sizes---40px)!important;
    border-bottom-left-radius: var(--_sizes---40px)!important;
    border-bottom-right-radius: var(--_sizes---40px)!important;
    background-color: transparent!important;
    background:transparent!important;
    color: #fff!important;
    font-size: var(--_sizes---1-25-rem)!important;
    line-height: var(--_sizes---1-rem)!important;
    text-align: center!important;
    cursor: pointer!important;
    -webkit-user-select: none!important;
    user-select: none!important;
    justify-content: center!important;
    align-items: center!important;
    padding:inherit!important;
    font-weight: 600!important;
    transition-property: all,color,background-color!important;
    transition-duration: .4s,.5s,.4s!important;
    transition-timing-function: ease,ease,ease-in-out!important;
    display: flex!important;
}