:root {
  --motion-out: cubic-bezier(.22, 1, .36, 1);
  --motion-in-out: cubic-bezier(.65, 0, .35, 1);
}

.motion-replay {
  width: 24px;
  height: 24px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: #d3fa83;
  border-radius: 3px;
}
.motion-replay:hover { background: #334238; }
.concept-ribbon { padding-block: 2px; }
.hero h1 { display: grid; }
.hero h1 .motion-line {
  display: block;
  overflow: hidden;
  color: inherit;
  /* Extend the reveal mask around descenders without changing line spacing. */
  padding-block: .15em;
  margin-block: -.15em;
}
.hero h1 .motion-line > span { display: block; color: inherit; }
.hero h1 .motion-accent { color: var(--lime); }
.workspace { box-shadow: 0 22px 60px #0003; }
.workspace-tabs { position: relative; isolation: isolate; }
.workspace-cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: 3px;
  background: #dceacb;
}
.has-motion-cursor .workspace-tabs > button[aria-selected=true] { background: transparent; }
.workspace-tabs > button { transition: color 180ms ease, background 180ms ease; }
.workspace-tabs > button[aria-selected=true]:hover { background: transparent; }
.site-header { transition: box-shadow 240ms ease, border-color 240ms ease; }
.site-header.is-scrolled { box-shadow: 0 8px 28px #0c140e29; border-color: #57614f; }
.button { transition: background 180ms ease, color 180ms ease, transform 220ms var(--motion-out); }
.button:active { transform: scale(.98); }
.button svg, .text-link svg, .resource-bottom svg { transition: transform 260ms var(--motion-out); }
.button:hover svg, .text-link:hover svg, .resource:hover .resource-bottom svg { transform: translate(3px, -3px); }
.text-link:has([data-lucide=arrow-down]):hover svg { transform: translateY(3px); }
.service-row summary > svg, .questions summary > svg { transition: transform 320ms var(--motion-out); }
.service-row summary > span { transition: color 180ms ease, transform 260ms var(--motion-out); }
.service-row summary:hover > span { color: #406128; transform: translateX(5px); }
.desktop-nav > a { position: relative; padding-block: 15px; }
.desktop-nav > a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 1px;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 240ms var(--motion-out);
}
.desktop-nav > a:hover { text-decoration: none; }
.desktop-nav > a:hover::after, .desktop-nav > a:focus-visible::after { transform: scaleX(1); }
.resource-graphic > i, .resource-graphic > svg, .graphic-knowledge > span { transition: transform 320ms var(--motion-out); }
.resource:hover .graphic-first > i:nth-child(1) { transform: translateX(5px); }
.resource:hover .graphic-first > i:nth-child(2) { transform: translateX(10px); }
.resource:hover .graphic-first > i:nth-child(3) { transform: translateX(3px); }
.resource:hover .graphic-first > svg { transform: translateY(4px); }
.resource:hover .graphic-approval > svg { transform: translateY(-5px); }
.resource:hover .graphic-knowledge > span:first-child { transform: translateX(4px); }
.resource:hover .graphic-knowledge > span:last-child { transform: translateX(-4px); }
dialog[open] { animation: relay-dialog-in 260ms var(--motion-out); }
dialog[open]::backdrop { animation: relay-backdrop-in 200ms ease-out; }
.solutions-menu:not([hidden]), #mobile-nav:not([hidden]) { animation: relay-menu-in 220ms var(--motion-out); }
@keyframes relay-dialog-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes relay-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes relay-menu-in { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: none; } }
@media (max-width:800px) {
  .concept-ribbon > a:last-of-type { display: flex; }
  .workspace-cursor { border-radius: 0; background: #eaf2de; }
  .hero h1 .motion-line { display: block; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .button:active, .button:hover svg, .text-link:hover svg, .resource:hover svg,
  .resource:hover i, .resource:hover .graphic-knowledge > span, .service-row summary:hover > span { transform: none; }
}