/* GRASSA brand concept: shared page-local styles for brand.html and website.html. Tokens only. */
.lockup { display: inline-flex; align-items: center; gap: .75em; text-decoration: none; color: inherit; }
.lockup img { height: 3.4em; width: auto; flex: none; }
.lockup .wm { display: flex; flex-direction: column; }
.lockup .wm b { font: 800 1.9em/1 var(--font-display); letter-spacing: .02em; color: var(--ink); }
.lockup .wm small { font: 600 .72em/1 var(--font-display); letter-spacing: .3em; text-transform: uppercase; margin-top: .55em; padding-top: .55em; border-top: 2px solid var(--brand); color: var(--ink-2); }
.lockup.on-dark .wm b { color: var(--highlight); }
.lockup.on-dark .wm small { color: var(--on-dark-3); border-top-color: var(--brand-on-dark); }

@keyframes c-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes c-settle { from { transform: scale(1.07); } to { transform: scale(1); } }
.rise { animation: c-rise .9s var(--ease) both; animation-delay: calc(var(--i, 0) * 120ms + 120ms); }
.js .rv { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1; transform: none; }
  .rise { animation: none; }
}