/* KH v2.9.2. Autoplay cross-dissolve; no explanatory UI or playback toggles. */
@keyframes kh292-headline {
  from { opacity:.24; transform:translateY(95%); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes kh292-fade-up {
  from { opacity:0; transform:translateY(26px); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes kh292-float {
  from {transform:scale(1) translate3d(0,0,0)}
  to {transform:scale(1.018) translate3d(-.35%,.25%,0)}
}
@media (prefers-reduced-motion:no-preference) {
  html.motion .page .editorial-hero .clip-line:nth-child(1)>span {
    animation:kh292-headline 1.03s .20s cubic-bezier(.2,.8,.2,1) both !important;
  }
  html.motion .page .editorial-hero .clip-line:nth-child(2)>span {
    animation:kh292-headline 1.03s .42s cubic-bezier(.2,.8,.2,1) both !important;
  }
  html.motion .page .editorial-hero .entrance {
    animation:kh292-fade-up .86s cubic-bezier(.22,.77,.22,1) both !important;
  }
  html.motion .page .editorial-hero .entrance--one {animation-delay:.12s !important}
  html.motion .page .editorial-hero .entrance--two {animation-delay:.82s !important}
  html.motion .page .editorial-hero .entrance--three {animation-delay:1.05s !important}
  html.motion .page .reveal.is-visible {animation:kh292-fade-up .95s cubic-bezier(.2,.75,.18,1) both}
  html.motion .page .editorial-hero .ambient-graphic {animation:kh292-float 14s ease-in-out infinite alternate}
}
/* The real training slide is swapped via two stacked images; both remain
   visible while the front layer's opacity changes. */
.page--training #program-slide-image .image-loading {
  position:relative;
  width:100%;height:100%;overflow:hidden;
}
.page--training #program-slide-image .image-loading img {
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  transition:opacity 1.15s ease !important;
  animation:none !important;
}
.page--training #program-slide-image.is-switching img {animation:none!important}
/* Two example case slides dissolve in precisely the same position. */
.page--cases .cases-hero-art {
  position:relative;
  height:clamp(430px,40vw,550px);
  min-height:0!important;
  padding:12px 0 64px!important;
  overflow:hidden;
  isolation:isolate;
  animation:none!important;
}
.page--cases .cases-hero-slide,
.page--cases .cases-hero-slide--one,
.page--cases .cases-hero-slide--two {
  position:absolute!important;
  inset:12px 0 64px!important;
  width:100%!important;
  height:auto!important;
  margin:0!important;
  z-index:1!important;
  opacity:0!important;
  filter:none!important;
  transform:none!important;
  transition:opacity 1.15s ease!important;
  pointer-events:none;
}
.page--cases .cases-hero-slide.is-front {
  z-index:2!important;
  opacity:1!important;
  pointer-events:auto;
}
.page--cases .cases-hero-slide .image-loading {aspect-ratio:4/3}
.page--cases .cases-hero-slide figcaption,
.page--cases .cases-hero-slide .hero-slide-meta {color:#dbe7f0}
/* Clean, single forward control. Do not show the old progress rail. */
.page--training #program-slide-image::after,
.page--cases .cases-hero-art::after {display:none!important;content:none!important}
.page--training .hero-rotation-controls {
  position:absolute;
  right:8px;
  bottom:82px;
  z-index:10;
  display:flex;
  margin:0;
  border:0;
}
.page--cases .case-slide-controls {
  position:absolute;
  right:0;
  bottom:0;
  left:auto;
  z-index:10;
  border:0;
  padding:0;
  display:flex;
  justify-content:flex-end;
}
.page .kh292-arrow {
  display:grid;
  place-items:center;
  width:48px;height:48px;
  padding:0;
  border:1px solid rgba(255,255,255,.55);
  border-radius:0;
  color:#fff;
  background:rgba(5,25,41,.65);
  font:300 27px/1 sans-serif;
  cursor:pointer;
  transition:background .23s ease,border-color .23s ease;
}
.page .kh292-arrow:hover,
.page .kh292-arrow:focus-visible {background:#fff;color:#071a28;border-color:#fff}
@media(max-width:1000px){
  .page--cases .cases-hero-art {height:clamp(560px,100vw,720px)}
}
@media(max-width:600px){
  .page--cases .cases-hero-art {height:clamp(325px,100vw,510px);padding:6px 0 48px!important}
  .page--cases .cases-hero-slide,
  .page--cases .cases-hero-slide--one,
  .page--cases .cases-hero-slide--two {inset:6px 0 48px!important}
  .page .kh292-arrow {width:42px;height:42px;font-size:24px}
  .page--training .hero-rotation-controls {bottom:79px;right:5px}
}
@media(prefers-reduced-motion:reduce) {
  .page--training #program-slide-image .image-loading img,
  .page--cases .cases-hero-slide {transition:none!important;animation:none!important}
  html .page .editorial-hero .clip-line>span,
  html .page .editorial-hero .entrance {animation:none!important;opacity:1!important;transform:none!important}
  html .page .reveal {opacity:1!important;transform:none!important;animation:none!important}
}
/* More specific than the inherited generic control styles. */
.page--training .hero-rotation-controls button.kh292-arrow,
.page--cases .case-slide-controls button.kh292-arrow {
  display:grid!important;
  place-items:center!important;
  width:48px!important;
  height:48px!important;
  padding:0!important;
  margin:0!important;
  color:#fff!important;
  background:rgba(5,25,41,.84)!important;
  border:1px solid rgba(255,255,255,.8)!important;
  border-radius:0!important;
  font-size:26px!important;
  font-weight:300!important;
  line-height:1!important;
  cursor:pointer!important;
}
.page--training .hero-rotation-controls button.kh292-arrow:hover,
.page--training .hero-rotation-controls button.kh292-arrow:focus-visible,
.page--cases .case-slide-controls button.kh292-arrow:hover,
.page--cases .case-slide-controls button.kh292-arrow:focus-visible {
  background:#fff!important;
  border-color:#fff!important;
  color:#092338!important;
}
@media(max-width:600px) {
  .page--training .hero-rotation-controls button.kh292-arrow,
  .page--cases .case-slide-controls button.kh292-arrow {width:44px!important;height:44px!important;}
}