/* ── ARROW TEXT LINK: one site-wide component ─────────────────────────────
   Every text link with a trailing arrow uses a.arrow-link.
   The 2px orange underline is PERMANENT and visible at rest.
   It is part of the component, never a hover effect.
   Hover/focus: text and arrow warm to orange, arrow slides 4px right.
   The underline does not change. */
a.arrow-link {
  display: inline-block;
  width: max-content;
  max-width: 100%;
  align-self: flex-start; /* underline spans text plus arrow only, even inside flex cards */
  font-family: 'Inter', sans-serif !important;
  font-size: clamp(0.82rem, 0.95vw, 0.9rem) !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: rgba(239,239,239,0.85) !important;
  text-decoration: none !important;
  border-bottom: 2px solid #FF6B35 !important;
  padding-bottom: 6px !important;
  line-height: 1.5;
  transition: color 0.2s ease;
}
a.arrow-link::after { content: "\2192"; display: inline-block; margin-left: 0.45em; transition: transform 0.2s ease; }
a.arrow-link:visited { color: rgba(239,239,239,0.85) !important; }
@media (hover: hover) {
  a.arrow-link:hover { color: #FF6B35 !important; }
  a.arrow-link:hover::after { transform: translateX(4px); }
}
a.arrow-link:focus-visible { color: #FF6B35 !important; }
a.arrow-link:focus-visible::after { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { a.arrow-link, a.arrow-link::after { transition: none; } }