/* ==========================================================================
   Component — Buttons
   Pill buttons with uppercase Manrope label + chevron icon.
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-pill);
  padding: 15px 24px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.56px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.btn .ico { width: 16px; height: 16px; }
.btn:active { transform: translateY(1px); }

/* Variants */
.btn--primary { background: var(--brand); color: var(--white); }
.btn--primary:hover { background: #0000a8; color: var(--white); }
.btn--primary .ico { color: var(--white); }

.btn--white { background: var(--white); color: var(--brand); }
.btn--white:hover { background: var(--bg-soft); color: var(--brand); }
.btn--white .ico { color: var(--brand); }

.btn--outline-blue {
  background: transparent; color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
}
.btn--outline-blue:hover { background: var(--brand); color: var(--white); }
.btn--outline-blue:hover .ico { color: var(--white); }
.btn--outline-blue .ico { color: var(--brand); }

.btn--outline-white {
  background: transparent; color: var(--white);
  box-shadow: inset 0 0 0 1px var(--white);
}
.btn--outline-white:hover { background: var(--white); color: var(--brand); }
.btn--outline-white:hover .ico { color: var(--brand); }
.btn--outline-white .ico { color: var(--white); }

/* Ghost — text + arrow, no fill (e.g. "Call Us Now") */
.btn--ghost { padding: 15px 0; background: transparent; }
.btn--ghost.on-dark { color: var(--white); }
.btn--ghost.on-dark .ico { color: var(--white); }
.btn--ghost.on-light { color: var(--ink); }
.btn--ghost.on-light .ico { color: var(--ink); }
.btn--ghost:hover { opacity: 0.75; }

/* Sizes */
.btn--sm { padding: 0 16px 0 20px; height: 44px; font-size: 12px; }
.btn--sm.btn--pad { padding: 0 24px; }