/* Autentica · reusable action signature. Animation needs no JavaScript. */
.cta-mark {
  --cta-wine: #71283C;
  --cta-travel: 20px;
  --cta-square: 8px;
  --cta-ease: cubic-bezier(.22, .61, .36, 1);
  position: relative;
  display: inline-block;
  width: calc(var(--cta-square) + var(--cta-travel));
  height: var(--cta-square);
  flex: 0 0 calc(var(--cta-square) + var(--cta-travel));
  vertical-align: middle;
  pointer-events: none;
}
.cta-mark::before,
.cta-mark::after {
  content: "";
  position: absolute;
  left: 0;
  background: var(--cta-wine);
  transition: transform 460ms var(--cta-ease);
}
.cta-mark::before {
  top: calc((var(--cta-square) - 1px) / 2);
  width: var(--cta-travel);
  height: 1px;
  transform: scaleX(0);
  transform-origin: left center;
}
.cta-mark::after {
  top: 0;
  width: var(--cta-square);
  height: var(--cta-square);
  transform: translateX(0);
}
/* Focus works on links and real buttons, including cards with nested CTAs. */
:is(a, button):focus-visible .cta-mark::before { transform: scaleX(1); }
:is(a, button):focus-visible .cta-mark::after { transform: translateX(var(--cta-travel)); }
@media (hover: hover) and (pointer: fine) {
  :is(a, button):hover .cta-mark::before { transform: scaleX(1); }
  :is(a, button):hover .cta-mark::after { transform: translateX(var(--cta-travel)); }
}
.cta-brand {
  max-width: 100%;
  min-height: 44px;
  white-space: normal;
  overflow-wrap: anywhere;
}
.cta-brand:focus-visible {
  outline: 2px solid #F2EEE6;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px #71283C;
}
/* Keep existing type, padding and gaps; only the signature moves. */
.button.cta-brand,
.button.cta-brand:hover {
  background: var(--gold, #B78845);
  border-color: var(--gold, #B78845);
  color: #082744;
}
.button.light.cta-brand,
.button.light.cta-brand:hover {
  background: transparent;
  border-color: #08274455;
  color: #082744;
}
.home-outline.cta-brand:hover { background: transparent; }
.nav-cta.cta-brand .cta-mark { margin-left: 28px; }
/* An instant state change honors reduced motion without hiding the cue. */
@media (prefers-reduced-motion: reduce) {
  .cta-mark::before, .cta-mark::after { transition: none; }
}

/* Header invitation: a quiet, repeating signature with a stable label. */
header .nav-cta.cta-brand{background:#d2ad76;border-color:#d2ad76;color:#082744;font-weight:600;transition:background 480ms cubic-bezier(.22,.61,.36,1),border-color 480ms cubic-bezier(.22,.61,.36,1)}
.home-view header .nav-cta.cta-brand .cta-mark,header .nav-cta.cta-brand .cta-mark{visibility:visible}
header .nav-cta.cta-brand .cta-mark::before{animation:nav-signature-trail 5s cubic-bezier(.22,.61,.36,1) infinite}
header .nav-cta.cta-brand .cta-mark::after{animation:nav-signature-square 5s cubic-bezier(.22,.61,.36,1) infinite}
header .nav-cta.cta-brand:is(:hover,:focus-visible){background:#e0bf8d;border-color:#e0bf8d}
header .nav-cta.cta-brand:is(:hover,:focus-visible) .cta-mark::before,header .nav-cta.cta-brand:is(:hover,:focus-visible) .cta-mark::after{animation-play-state:paused}
@keyframes nav-signature-trail{0%,18%,88%,100%{transform:scaleX(0)}48%,62%{transform:scaleX(1)}}
@keyframes nav-signature-square{0%,18%,88%,100%{transform:translateX(0)}48%,62%{transform:translateX(var(--cta-travel))}}
@media(prefers-reduced-motion:reduce){header .nav-cta.cta-brand{transition:none}header .nav-cta.cta-brand .cta-mark::before,header .nav-cta.cta-brand .cta-mark::after{animation:none}}