/* One contact action and the reference's staggered colour wave, in our palette. */
.contact-cta.contact-cta { display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 48px; padding: 7px 8px 7px 20px; border-radius: 999px; color: var(--ink); background: var(--paper); font-size: 12px; line-height: 1.2; font-weight: 550; text-transform: uppercase; box-shadow: 0 4px 16px rgba(20,45,83,.1); transition: box-shadow .2s; white-space: nowrap; }
.contact-cta.contact-cta:hover { background: var(--paper); box-shadow: 0 6px 20px rgba(20,45,83,.18); }
.contact-cta .cta-label { display: inline-block; }
.contact-cta .cta-char { display: inline-block; }
.contact-cta .cta-arrow { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 50%; background: var(--orange-ink); color: var(--paper); font-size: 23px; line-height: 1; transition: transform .3s,background .3s; }
.contact-cta:is(:hover,:focus-visible) .cta-char { animation: cta-colour-wave .6s linear both; animation-delay: calc(var(--char-index) * 20ms); }
.contact-cta:is(:hover,:focus-visible) .cta-arrow { background: var(--navy); transform: translateY(2px); }
@keyframes cta-colour-wave { 0%,100% { color: var(--ink); } 35%,55% { color: var(--orange); } }
.chi-badge { flex-wrap: wrap; }
.chi-badge .contact-cta { margin-top: 4px; }
@media (max-width: 1050px) and (min-width: 761px) { .nav-links .contact-cta { font-size: 11px; gap: 8px; padding-left: 14px; } }
@media (max-width: 760px) { .nav-links .contact-cta { background: var(--paper); color: var(--ink); border-radius: 999px !important; } }
@media (prefers-reduced-motion: reduce) { .contact-cta:is(:hover,:focus-visible) .cta-char { animation: none; color: var(--orange-ink); } .contact-cta:is(:hover,:focus-visible) .cta-arrow { transform: none; } }