.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  border-radius: 999px;
  padding: 0 32px;
  /* The class also lands on native <button> / <input type="submit"> (contact
     and booking forms, availability picker). Clear the browser's control
     styling so they match the <a> pills exactly. */
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  margin: 0;
  background: none;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
  color: #ffffff;
  font-family: var(--display-font);
  /* >=18.66px + bold keeps white-on-brand-colour label text within the WCAG
     large-text threshold (3:1). Recheck contrast before shrinking this. */
  font-size: 1.18rem;
  font-weight: 800;
  white-space: nowrap;
  transition:
    filter 120ms ease,
    transform 120ms ease,
    box-shadow 120ms ease;
}

.button:hover {
  filter: brightness(1.05);
}

.button:active {
  transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
  .button {
    transition: none;
  }
}

.button-pink {
  min-height: 52px;
  padding: 0 30px;
  background: var(--pink);
}

.button-green {
  min-height: 86px;
  padding: 0 58px;
  margin-top: 36px;
  background: var(--green);
  /* Style guide: solid offset "pressed" shadow, never a blurred drop shadow. */
  box-shadow: 0 9px 0 var(--green-shadow);
  font-size: 1.3rem;
}

.button-green:active {
  transform: translateY(5px);
  box-shadow: 0 4px 0 var(--green-shadow);
}

/* White label per client direction, matching the comp. Note this is 2.0:1
   against #3EC1FF and does not meet WCAG AA; charcoal would be 6.8:1.
   Darkening the sky blue is the only way to keep a white label and pass. */
.button-blue {
  background: var(--blue);
}

.button-small {
  min-height: 48px;
  padding: 0 28px;
  font-family: var(--body-font);
  font-size: 1rem;
  font-weight: 800;
}

.button-white {
  min-height: 68px;
  min-width: 300px;
  background: #ffffff;
  color: var(--purple);
}

/* Breakpoints sit at the end of the file, not beside each rule: the shared
   `.button` override below has to come after the `.button-pink` / `.button-green`
   variants to beat them, since they carry the same specificity. */

@media (max-width: 960px) {
  .button-pink {
    min-height: 58px;
    padding: 0 30px;
  }
}

@media (max-width: 640px) {
  .button {
    min-height: 48px;
    padding: 0 18px;
    font-size: 1.06rem;
  }

  .button-green {
    width: 100%;
    max-width: 310px;
    min-height: 68px;
    margin-top: 28px;
  }

  /* Smaller than the shared `.button` mobile size so it sits beside the price
     on one row. min-height stays at 44px to keep a usable touch target. */
  .button-small {
    min-height: 44px;
    padding: 0 20px;
    font-size: 0.95rem;
  }

  .button-white {
    width: min(100%, 300px);
    min-width: 0;
  }
}

/* Header "Book Now" on iPhone SE-class phones: slimmer side padding so the nav
   row (links + pill) stays on one line. See the matching gap rule in
   branding.css. Label size is unchanged. */
@media (max-width: 400px) {
  .site-nav .button-pink {
    min-height: 44px;
    padding: 0 12px;
    font-size: 1rem;
  }
}