:root {
  --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-fast: 180ms;
  --dur-med: 500ms;
  --dur-slow: 700ms;
}

html.js [data-reveal] { opacity: 0; transform: translateY(20px); }
html.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-slow) var(--ease-out-expo), transform var(--dur-slow) var(--ease-out-expo);
  transition-delay: calc(var(--reveal-i, 0) * 70ms);
}

.card { transition: transform var(--dur-med) var(--ease-spring), background-color var(--dur-med) var(--ease-spring); }
.card--media img { transition: transform var(--dur-slow) var(--ease-out-expo); }
/* Product figures in padded cards need rounded image corners on every edge. */
.card:not(.card--media) > .card-figure > img { border-radius: var(--radius-card); }
.btn { transition: background-color var(--dur-fast) var(--ease-out-expo), transform var(--dur-fast) var(--ease-out-expo); }
.btn:active { transform: scale(0.97); }

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  transition: box-shadow var(--dur-med) var(--ease-out-expo), background-color var(--dur-med) var(--ease-out-expo);
}
.nav.is-scrolled { box-shadow: 0 1px 0 rgba(14, 15, 12, 0.08), 0 8px 24px -16px rgba(14, 15, 12, 0.18); }

/* Preserve the compact nav height while restoring the Contact pill's width. */
.nav-links a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 20px;
}

.nav-links a:not(.btn) {
  background-image: linear-gradient(var(--primary), var(--primary));
  background-position: left calc(100% - 3px);
  background-repeat: no-repeat;
  background-size: 0 2px;
  transition: background-size 240ms var(--ease-out-expo);
}
.nav-links a:not(.btn):hover,
.nav-links a:not(.btn):focus-visible,
.nav-links a:not(.btn)[aria-current="page"] {
  background-size: 100% 2px;
  text-decoration: none;
}

html.js .steprail[data-reveal] li + li::before { transform: scaleX(0); transform-origin: left; }
html.js .steprail[data-reveal] .node { opacity: 0; transform: scale(0.6); }
html.js .steprail[data-reveal].is-visible li + li::before {
  transform: scaleX(1);
  transition: transform 900ms var(--ease-out-expo);
}
html.js .steprail[data-reveal].is-visible .node {
  opacity: 1;
  transform: scale(1);
  transition: opacity var(--dur-med) var(--ease-out-expo), transform var(--dur-med) var(--ease-spring);
}
html.js .steprail[data-reveal].is-visible li:nth-child(2) .node { transition-delay: 80ms; }
html.js .steprail[data-reveal].is-visible li:nth-child(3) .node { transition-delay: 160ms; }

@media (hover: hover) {
  a.card:hover, .card--link:hover { transform: translateY(-4px); }
  .card--media:hover img { transform: scale(1.03); }
  .btn--primary:hover { transform: translateY(-1px); }
}

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal], html.js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
  html.js .steprail[data-reveal] li + li::before,
  html.js .steprail[data-reveal] .node,
  html.js .steprail[data-reveal].is-visible li + li::before,
  html.js .steprail[data-reveal].is-visible .node {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---- Macro whitespace ---------------------------------------------------- */
@media (min-width: 1024px) {
  .band { padding-block: 80px; }
  .band--hero { padding-block: 104px; }
  .band--dark { padding-block: 88px; }
  .footer { padding-top: 64px; }
}