/* ==========================================================================
   Buttons — values taken from the live site's computed styles.

   CONTRAST: the original paired #FFFFFF with #5B8C85 (3.79:1), which fails
   WCAG 2.2 AA for text this size. Approved change: the button base is now
   #4D7771, giving 5.01:1. Visually near-identical, and it passes.
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 40px;
  border: 2.67px solid var(--c-accent-dark);
  border-radius: 100px;
  background: var(--c-accent-dark);
  color: var(--c-white);
  font-family: var(--font);
  font-size: var(--fs-btn);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.4px;
  text-transform: capitalize;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

/* Hover states taken from the original's CSS:
   background -> #4D7771, label -> #FFFFFF (or cream on the card CTA),
   border -> #9F9F9F on the card and outline variants. */
.btn:hover {
  background: var(--c-accent-darker);
  border-color: var(--c-accent-darker);
  color: var(--c-white);
}
.btn--card:hover {
  background: var(--c-accent-darker);
  border-color: #9F9F9F;
  color: var(--c-cream);
}

/* Card CTA: the original uses 14px/56px here, not the 20px/40px default */
.btn--card { padding: 14px 56px; border-width: 0; }

/* Compact variant used in the header bar */
.btn--header { padding: 15px 40px 14px; border-width: .67px; }

/* Outlined variant used over the hero photograph */
.btn--outline {
  background: transparent;
  border-color: var(--c-white);
  color: var(--c-white);
}
.btn--outline:hover {
  background: var(--c-accent-darker);
  border-color: #9F9F9F;
  color: var(--c-white);
}

/* Ghost variant: used for the email action in the mobile menu, where a second
   solid button would compete with "Book a conversation". */
.btn--ghost {
  padding: 15px 28px 14px;
  border-width: 1.5px;
  border-color: rgba(77, 119, 113, .5);
  background: rgba(77, 119, 113, .06);   /* text stays at 4.65:1 on this */
  color: var(--c-accent-dark);
  text-transform: none;
}
.btn--ghost:hover {
  background: var(--c-accent-dark);
  border-color: var(--c-accent-dark);
  color: var(--c-white);
}

/* Text link that behaves as a call to action */
.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: var(--fs-btn);
  letter-spacing: -.4px;
  text-transform: capitalize;
  text-decoration: none;
  color: var(--c-accent-dark);
}
.btn-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* The original keeps buttons auto-width and centred at every size -
   no full-width stretch on small screens. */