/* ═══════════════════════════════════════════════════════════
   COMPONENT — BUTTONS  (reusable)
   The whole button family: amber (primary), ghost (on navy),
   navy (on cream) and the large size. Used by the nav, hero,
   journey cards, CTAs and modal. Depends on tokens.css.
═══════════════════════════════════════════════════════════ */
.btn{font-family:var(--font-body);font-weight:600;font-size:14px;border:none;cursor:pointer;border-radius:8px;transition:all .3s;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap}

.btn-amber{background:var(--amber);color:var(--navy-ink);padding:13px 26px;box-shadow:0 8px 26px rgba(255,204,0,.28)}
.btn-amber:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(255,204,0,.45)}

.btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(228,222,210,.35);padding:12px 26px}
.btn-ghost:hover{border-color:var(--amber);color:var(--amber)}

.btn-navy{background:var(--navy);color:#fff;padding:13px 26px;box-shadow:0 8px 26px rgba(11,28,61,.25)}
.btn-navy:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(11,28,61,.4)}

.btn-lg{padding:16px 36px;font-size:15px}