/* ═══════════════════════════════════════════════════════════════
   COMPONENTS — buttons, region pill
   Rebuilt 2026-10-01 — see css/tokens.css header for context.
   ═══════════════════════════════════════════════════════════════ */




  .btn:active{ transform:scale(.97); }




  .btn--brand:hover::before, .btn--teal:hover::before{ transform:translateX(120%); }




  .btn--brand{ background:var(--primary); color:#fff; box-shadow:0 8px 20px -6px rgba(58,37,156,.5); }




  .btn--brand:hover{ background:var(--primary-hover); box-shadow:0 10px 26px -6px rgba(58,37,156,.6); translate:0 -1px; }




  .btn--brand:active{ background:var(--primary-press); }




  .btn--teal{ background:var(--secondary); color:#fff; box-shadow:0 8px 20px -6px rgba(30,143,201,.45); }




  .btn--teal:hover{ background:var(--secondary-hover); box-shadow:0 10px 26px -6px rgba(30,143,201,.55); translate:0 -1px; }




  .btn--teal:active{ background:var(--secondary-press); }




  /* ARAUK-80: client asked for these — "Talk to Our Team" / "Book Your Free Discovery Call"
     are .btn--outline(-white) — to drop the pill border and hover fill/highlight sitewide and
     show text only. border-color stays transparent in every state (default, hover, active) so
     no highlight ever appears; .btn's own border:1.5px solid transparent keeps the box model
     (padding/size) identical, just invisible. Browser focus-visible outline is untouched. */
  .btn--outline{ background:transparent; color:var(--secondary); border-color:transparent; }




  .btn--outline:hover{ background:transparent; }




  .btn--outline:active{ background:transparent; }




  .btn--outline-white{ background:transparent; color:#fff; border-color:transparent; }




  .btn--outline-white:hover{ border-color:transparent; background:transparent; }




  .btn--sm{ padding:.6rem 1.25rem; font-size:.8125rem; }




  .btn[disabled]{ opacity:.4; cursor:not-allowed; }




  .eyebrow--on-dark::before{ background:#9ACDE7; box-shadow:0 0 0 4px rgba(154,205,231,.3); }




  .eyebrow--on-dark:hover{ background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.32); }




  .region-pill{ display:inline-flex; align-items:center; gap:.6rem; border:1px solid rgba(255,255,255,.18); border-radius:var(--radius-pill); padding:.5rem 1.1rem; font-size:.8125rem; font-weight:600; color:#fff; }




  .region-pill svg{ width:12px; height:12px; }