/* ── CTA BUTTON (shared) ── */
.cta_button {
  display: inline-block;
  background: var(--brand-primary, #cc3300); color: var(--onDark, #f0ece0);
  font-family: var(--f-mono, monospace); font-size: 13.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 18px 30px 12px; position: relative;
  transition: color 0.25s, background 0.3s;
  text-decoration: none; border: none; cursor: pointer;
  text-align: center; border-radius: 2px;
}
.cta_button::before,
.cta_button::after {
  content: ''; position: absolute;
  border: 1.2px solid rgba(240,236,224,0);
  transition: border-color 0.3s, clip-path 0.4s cubic-bezier(0.25,0,0,1);
  pointer-events: none;
}
.cta_button::before {
  top: 0; left: 0; right: 0; bottom: 0;
  border-right: none; border-bottom: none;
  clip-path: inset(0 100% 100% 0);
}
.cta_button::after {
  top: 0; left: 0; right: 0; bottom: 0;
  border-left: none; border-top: none;
  clip-path: inset(100% 0 0 100%);
}
.cta_button:hover { color: var(--onDark, #f0ece0); background: transparent; }
.cta_button:hover::before { border-color: rgba(240,236,224,0.6); clip-path: inset(0 0 0 0); }
.cta_button:hover::after { border-color: rgba(240,236,224,0.6); clip-path: inset(0 0 0 0); }
.cta_button--light:hover { color: var(--onLight, #1a1a1a); background: transparent; }
.cta_button--light::before, .cta_button--light::after { border-color: rgba(180,140,20,0); }
.cta_button--light:hover::before, .cta_button--light:hover::after { border-color: var(--brand-accent, #b8a020); }
.cta_button:focus-visible {
  outline: 2px solid rgba(240,236,224,0.8);
  outline-offset: 3px;
}
.cta_button--light:focus-visible {
  outline: 2px solid var(--onLight, #1a1410);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .cta_button,
  .cta_button::before,
  .cta_button::after { transition: none; }
}