/* Progressive interaction layer. The original layout and dimensions stay untouched. */
:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --scroll-progress: 0;
}

body::before {
  content: "";
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: calc(var(--scroll-progress) * 100%);
  height: 2px;
  pointer-events: none;
  background: var(--copper);
  transform-origin: left center;
}

::selection {
  color: var(--cream);
  background: var(--forest);
}

:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 4px;
}

.site-header nav a,
.footer-links a,
.text-link,
.button,
.case-card > a,
.engagement-grid a {
  transition: color 250ms ease, border-color 250ms ease, opacity 250ms ease,
    background-color 250ms ease, transform 350ms var(--ease-out-expo);
}

.site-header nav a {
  position: relative;
}

.site-header nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -8px;
  left: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 400ms var(--ease-out-expo);
}

.site-header nav a:hover::after,
.site-header nav a:focus-visible::after,
.site-header nav a.is-active::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.site-header nav a.is-active {
  opacity: 1;
}

.wordmark-mark,
.button svg,
.text-link svg,
.case-card > a svg,
.engagement-grid a svg,
.contact-circle svg {
  transition: transform 450ms var(--ease-out-expo);
}

.wordmark:hover .wordmark-mark {
  transform: rotate(-10deg);
}

.motion-ready .motion-item {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity 800ms ease, transform 900ms var(--ease-out-expo);
  transition-delay: var(--motion-delay, 0ms);
  will-change: opacity, transform;
}

.motion-ready .motion-item.motion-left {
  transform: translate3d(-26px, 0, 0);
}

.motion-ready .motion-item.motion-right {
  transform: translate3d(26px, 0, 0);
}

.motion-ready .motion-item.motion-scale {
  transform: scale(0.965);
}

.motion-ready .motion-item.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.motion-ready .motion-item.is-visible.motion-complete {
  opacity: 1;
  transform: none;
  transition-delay: 0ms;
  will-change: auto;
}

.hero-visual img {
  transition: transform 120ms linear;
}

.profile-facts > div,
.sector-grid article,
.service-list article,
.proof-list article,
.outcome-grid article,
.organization-card,
.case-card,
.photo-story,
.qualification-list article,
.engagement-grid article,
.process-row > div,
.contact-prompts span {
  position: relative;
  transition: color 300ms ease, background-color 300ms ease,
    border-color 300ms ease, box-shadow 450ms var(--ease-out-expo),
    transform 450ms var(--ease-out-expo);
}

.profile-facts strong,
.sector-grid h3,
.service-title,
.service-list ul,
.proof-list strong,
.proof-list article > div,
.outcome-grid strong,
.organization-info,
.process-row h3 {
  transition: color 300ms ease, transform 450ms var(--ease-out-expo);
}

@media (hover: hover) and (pointer: fine) {
  .button:hover svg,
  .text-link:hover svg,
  .case-card > a:hover svg,
  .engagement-grid a:hover svg {
    transform: translate3d(4px, -4px, 0);
  }

  .text-link:hover,
  .footer-links a:hover {
    color: var(--cream);
  }

  .profile-facts > div:hover,
  .sector-grid article:hover,
  .process-row > div:hover {
    z-index: 1;
    background: #ffffff0a;
  }

  .profile-facts > div:hover strong {
    transform: translateY(-5px);
  }

  .sector-grid article:hover h3,
  .process-row > div:hover h3 {
    color: var(--sage);
    transform: translateX(7px);
  }

  .service-list article:hover .service-title,
  .service-list article:hover ul {
    transform: translateX(9px);
  }

  .service-list article:hover .service-title h3 {
    color: var(--forest);
  }

  .service-list li {
    transition: color 250ms ease, transform 350ms var(--ease-out-expo);
  }

  .service-list li:hover {
    color: var(--forest);
    transform: translateX(5px);
  }

  .proof-list article:hover strong {
    transform: scale(1.07);
  }

  .proof-list article:hover > div {
    transform: translateX(7px);
  }

  .outcome-grid article:hover {
    z-index: 1;
    background: #fff9;
    box-shadow: 0 20px 50px #18241d12;
  }

  .outcome-grid article:hover strong {
    color: var(--copper);
    transform: translateY(-5px);
  }

  .organization-card:hover,
  .case-card:hover,
  .engagement-grid article:hover {
    z-index: 2;
    transform: translateY(-7px);
    box-shadow: 0 22px 55px #0d2b1d1c;
  }

  .organization-card:hover .logo-stage img {
    transform: scale(1.045);
  }

  .logo-stage img {
    transition: transform 600ms var(--ease-out-expo);
  }

  .case-card:hover .case-top svg,
  .case-card:hover .mini-mark {
    transform: rotate(-8deg) scale(1.06);
  }

  .case-top svg,
  .mini-mark {
    transition: transform 500ms var(--ease-out-expo);
  }

  .photo-story:hover {
    z-index: 2;
    border-color: #ffffff55;
    box-shadow: 0 18px 45px #0006;
    transform: translateY(-4px);
  }

  .qualification-list article:hover {
    background: #ffffff08;
  }

  .engagement-grid article:hover h3 {
    color: var(--copper);
  }

  .engagement-grid article.recommended:hover h3 {
    color: var(--sage);
  }

  .contact-prompts span:hover {
    color: var(--cream);
    background: var(--forest);
    border-color: var(--forest);
    transform: translateY(-2px);
  }

  .contact-circle:hover svg {
    transform: translate3d(5px, -5px, 0);
  }
}

@media (width <= 720px) {
  body::before {
    height: 1px;
  }

  .motion-ready .motion-item {
    transform: translate3d(0, 18px, 0);
  }

  .motion-ready .motion-item.motion-left,
  .motion-ready .motion-item.motion-right {
    transform: translate3d(0, 18px, 0);
  }

  .motion-ready .motion-item.is-visible {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before {
    display: none;
  }

  .motion-ready .motion-item,
  .motion-ready .motion-item.motion-left,
  .motion-ready .motion-item.motion-right,
  .motion-ready .motion-item.motion-scale,
  .motion-ready .motion-item.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero-visual img {
    transform: none !important;
    transition: none;
  }
}