@keyframes harbor-enter {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes harbor-photo {
  from { opacity: 0; transform: translateY(22px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-copy .eyebrow { animation: harbor-enter .65s both; }
  .hero-copy h1 { animation: harbor-enter .8s .08s both; }
  .hero-copy .intro { animation: harbor-enter .8s .16s both; }
  .hero-copy .under-button { animation: harbor-enter .7s .24s both; }
  .hero figure { animation: harbor-photo 1s .12s both; }
  .hero figcaption { animation: harbor-enter .8s .35s both; }
  .button { transition: transform .22s ease, box-shadow .22s ease, background .22s ease; }
  .button span { display: inline-block; transition: transform .22s ease; }
  .button:active { transform: translateY(1px) scale(.98); }
  .benefit-grid article { transition: background .25s ease, box-shadow .25s ease; }
  .navlink { position: relative; }
  .navlink::after { content: ''; position: absolute; left: 0; bottom: -5px; width: 100%; height: 2px; background: #dc763b; transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
  .navlink:hover::after, .navlink:focus-visible::after { transform: scaleX(1); }
  @media (hover: hover) and (pointer: fine) {
    .button:hover { transform: translateY(-3px); box-shadow: 0 8px 20px #0b1d3426; }
    .button:hover span { transform: translate(2px, -2px); }
    .benefit-grid article:hover { background: #eef3fa; box-shadow: 0 10px 28px #1836590f; }
  }
}