/* Word masks preserve the original heading, wrapping and accessible name. */
.wq-word-mask { display: inline-block; vertical-align: top; overflow: clip; padding-bottom: .13em; margin-bottom: -.13em; }
.wq-word { display: inline-block; }
/* A single long word may exceed a narrow heading column. Let it wrap inside
   both animation wrappers instead of letting the mask clip its final letters. */
.wq-word-mask,
.wq-word { max-width: 100%; overflow-wrap: anywhere; hyphens: auto; }
.hero h1 span.wq-word-mask,
.hero h1 span.wq-word { background: none; -webkit-text-fill-color: currentColor; color: inherit; }
.hero h1 > span:not(.wq-word-mask) .wq-word { color: var(--label); }
@media (prefers-reduced-motion: no-preference) {
  .wq-text-ready:not(.wq-text-in):not(.wq-text-rest) .wq-word { opacity: 0; transform: translateY(110%) rotateX(12deg); }
  .wq-text-in .wq-word { animation: wq-word-arrive .85s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--wq-word-index) * 32ms); }
  @keyframes wq-word-arrive {
    from { opacity: 0; transform: translateY(110%) rotateX(12deg); }
    to { opacity: 1; transform: translateY(0) rotateX(0); }
  }
}
.wq-text-rest .wq-word { animation: none !important; opacity: 1; transform: none; }

/* The process reads like a connected sequence, rather than four static tiles. */
#process .steps.wq-flow { position: relative; border-color: var(--glass-separator, var(--line)); }
#process .steps.wq-flow::before {
  content: ""; position: absolute; top: -1px; left: 0;
  width: calc(var(--wq-flow-progress, 0) * 100%); height: 2px;
  background: var(--grad); border-radius: 2px;
  box-shadow: 0 0 12px color-mix(in srgb, var(--a2) 20%, transparent);
  transition: width .5s cubic-bezier(.2, .7, .2, 1), height .5s cubic-bezier(.2, .7, .2, 1);
}
#process .wq-flow .step { position: relative; padding-top: 32px; }
#process .wq-flow .step::before {
  content: ""; position: absolute; left: 0; top: -6px;
  width: 12px; height: 12px; border: 2px solid var(--line); border-radius: 50%;
  background: var(--bg); transition: background .35s, border-color .35s, box-shadow .35s;
}
#process .wq-flow .step[data-wq-flow="done"]::before,
#process .wq-flow .step[data-wq-flow="current"]::before { background: var(--a2); border-color: var(--a2); }
#process .wq-flow .step[data-wq-flow="current"] b { color: var(--label); transition: color .35s; }
#process .wq-flow.wq-flow-in-view .step[data-wq-flow="current"]::before { animation: wq-node-pulse 2.4s ease-out infinite; }
@keyframes wq-node-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--a2) 24%, transparent); }
  65% { box-shadow: 0 0 0 9px transparent; }
}
@media (min-width: 901px) {
  #process .steps.wq-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  #process .steps.wq-flow { grid-template-columns: minmax(0, 1fr); border-top: 0; border-left: 1px solid var(--glass-separator, var(--line)); padding-left: 26px; gap: 24px; margin-left: 6px; }
  #process .steps.wq-flow::before { top: 0; left: -1px; width: 2px; height: calc(var(--wq-flow-progress, 0) * 100%); }
  #process .wq-flow .step { padding: 0; }
  #process .wq-flow .step::before { left: -33px; top: 5px; }
}

/* Native route transitions keep normal navigation and browser history. */
@view-transition { navigation: auto; }
header.top { view-transition-name: wq-navigation; }
::view-transition-old(root) { animation: wq-page-out .22s ease-out both; }
::view-transition-new(root) { animation: wq-page-in .42s cubic-bezier(.16, 1, .3, 1) both; }
::view-transition-group(wq-navigation) { animation-duration: .32s; }
@keyframes wq-page-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes wq-page-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .wq-word { animation: none !important; opacity: 1 !important; transform: none !important; }
  #process .steps.wq-flow::before, #process .wq-flow .step::before { transition: none; animation: none !important; }
}
@media (forced-colors: active) {
  #process .steps.wq-flow::before { background: CanvasText; box-shadow: none; }
  #process .wq-flow .step::before { border-color: CanvasText; animation: none !important; }
}
@media print {
  .wq-word { animation: none !important; opacity: 1 !important; transform: none !important; }
  #process .wq-flow .step::before { animation: none !important; }
}