.reading-progress{position:absolute;
  left:0;
  bottom:-1px;
  width:100%;
  height:2px;
  background:var(--blue);
  transform-origin:left;
  transform:scaleX(0);
  pointer-events:none}

.motion-toggle{display:inline-flex;
  align-items:center;
  gap:10px;
  background:transparent;
  border:0;
  color:inherit;
  font-size:11px;
  padding:10px 0;
  min-height:44px}
.pause-icon{width:11px;
  height:12px;
  position:relative;
  border-left:2px solid currentColor;
  border-right:2px solid currentColor}
.motion-paused .pause-icon{border:0;
  width:0;
  height:0;
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
  border-left:9px solid currentColor}

.motion-enabled .hero h1>span{animation:headline-enter .85s cubic-bezier(.22,1,.36,1) both;
  animation-delay:calc(var(--line-index,0)*90ms)}
.hero h1>span:nth-child(2){--line-index:1}
.hero h1>span:nth-child(3){--line-index:2}

.motion-enabled .hero-photo>img{animation:photo-enter 1.05s cubic-bezier(.22,1,.36,1) both}
.motion-enabled .hero-photo>img{transform:translateY(var(--hero-offset,0)) scale(1.09)}

.motion-enabled .firm-photo{clip-path:inset(0 0 0 0 round 20px);
  transition:clip-path 1s cubic-bezier(.22,1,.36,1)}
.motion-enabled .firm-photo.awaiting-reveal{clip-path:inset(0 0 16% 0 round 20px)}

.practice-open{transition:background .25s,color .25s,transform .25s}
.practice-trigger:hover .practice-open{transform:rotate(90deg)}
.practice-thumb img{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.practice-trigger:hover .practice-thumb img{transform:scale(1.08)}
.preview-image.changing{animation:preview-enter .45s cubic-bezier(.22,1,.36,1)}
.motion-enabled dialog[open]{animation:dialog-enter .25s ease-out}

@keyframes headline-enter{from{opacity:0;
  transform:translateY(25px)}
to{opacity:1;
  transform:translateY(0)}
}

@keyframes photo-enter {
  from { opacity: .35; }
  to { opacity: 1; }
}

@keyframes preview-enter{from{opacity:.5;
  transform:scale(1.04)}
to{opacity:1;
  transform:scale(1)}
}

@keyframes dialog-enter{from{opacity:0;
  transform:translateY(12px)}
to{opacity:1;
  transform:translateY(0)}
}

.motion-paused *{animation:none!important;
  transition:none!important}
.motion-paused .hero-photo>img{transform:scale(1.04)}
.motion-paused .firm-photo{clip-path:none}

@media(prefers-reduced-motion:reduce){.hero-photo>img{transform:scale(1.04)!important}
.firm-photo{clip-path:none!important}
}