/* MNK v67   informational expertise cards: pointer hover on desktop,
   click/tap disclosure on touch and keyboard. No card links. */
#services .expertise-card{
  appearance:none;-webkit-appearance:none;
  width:100%;min-width:0;margin:0;
  text-align:left;font-family:inherit;font-size:inherit;line-height:inherit;
  cursor:pointer;border-style:solid;
  -webkit-tap-highlight-color:transparent;
}
#services .expertise-card:focus-visible{
  outline:2px solid #607684;outline-offset:4px;
}
#services .expertise-card .expertise-overlay,
#services .expertise-card .expertise-icon,
#services .expertise-card .expertise-list{
  pointer-events:none;
}
#services .expertise-card.is-open .expertise-overlay{transform:scale(1)}
#services .expertise-card.is-open .expertise-icon{transform:rotate(180deg)}
#services .expertise-card.is-open .expertise-title{color:var(--navy)}
#services .expertise-card.is-open .expertise-list span{opacity:1;transform:translateY(0)}
#services .expertise-card.is-open .expertise-list span:nth-child(2){transition-delay:.05s}
#services .expertise-card.is-open .expertise-list span:nth-child(3){transition-delay:.1s}
#services .expertise-card.is-open .expertise-list span:nth-child(4){transition-delay:.15s}
#services .expertise-card.is-open .expertise-list span:nth-child(5){transition-delay:.2s}
/* Match the existing icon color treatment when selected. */
#services .expertise-card.is-open .expertise-icon{
  background:var(--navy)!important;color:var(--gold)!important;
}
@media (hover:none), (pointer:coarse){
  /* Touch browsers can leave :hover stuck after a tap; only the explicit
     is-open state should expose the details. */
  #services .expertise-card:not(.is-open):hover .expertise-overlay,
  #services .expertise-card:not(.is-open):active .expertise-overlay{transform:scale(0)}
  #services .expertise-card:not(.is-open):hover .expertise-list span{opacity:0;transform:translateY(1em)}
  #services .expertise-card:not(.is-open):hover .expertise-icon{transform:none}
  #services .expertise-card:not(.is-open):hover .expertise-title,
  #services .expertise-card:not(.is-open):active .expertise-title{color:#304551}
  #services .expertise-card{min-height:clamp(315px,83vw,420px);aspect-ratio:auto}
  #services .expertise-list{max-width:calc(100% - 3em);gap:.4em}
  #services .expertise-list span{font-size:clamp(15px,4vw,18px);line-height:1.2}
  #services .expertise-title{font-size:clamp(24px,7vw,34px)}
}
@media (prefers-reduced-motion:reduce){
  #services .expertise-card .expertise-overlay,
  #services .expertise-card .expertise-icon,
  #services .expertise-card .expertise-title,
  #services .expertise-card .expertise-list span{transition-duration:.01ms!important;transition-delay:0ms!important}
}
/* At 768–1023px the original three-column cards were too short for all
   five detail lines; allow them enough room without changing the grid. */
@media (min-width:701px) and (max-width:1023px){
  #services .expertise-card{aspect-ratio:auto;min-height:365px}
  #services .expertise-list{top:4.25em;max-width:calc(100% - 2.6em);gap:.34em}
  #services .expertise-list span{font-size:.97em;line-height:1.15}
  #services .expertise-title{font-size:clamp(23px,2.4vw,30px)}
}