/* ── WhatsApp button ──
   Fixed to the viewport so it travels with the visitor, but only after the
   contact section is reached. Before that it is not just transparent — it is
   also non-interactive, so it can never swallow a click on the hero. */
.wa {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: var(--z-menu);

  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);

  background: #25d366;          /* WhatsApp brand green, not a DM colour */
  color: #06301a;
  border-radius: 999px;
  font-size: var(--size-sm);
  font-weight: 600;
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.55);

  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.96);
  pointer-events: none;
  transition:
    opacity 320ms var(--ease-out),
    transform 320ms var(--ease-out),
    visibility 0s linear 320ms,
    background 180ms var(--ease-out);
}

.wa.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition-delay: 0s;
}

.wa:hover { background: #1fbe5a; }
.wa:active { transform: translateY(1px); }
.wa:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.wa svg { width: 24px; height: 24px; flex: none; }

/* A soft pulse that runs a few times and stops. A ring that never stops
   pulsing reads as an advert rather than an offer of help. */
.wa.is-visible::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid #25d366;
  animation: wa-pulse 2.2s var(--ease-out) 3;
  pointer-events: none;
}
@keyframes wa-pulse {
  0%   { transform: scale(1);    opacity: 0.7; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* On a phone the label costs width that the thumb needs; the mark alone is
   unmistakable, so the text is dropped and it becomes a round button. */
@media (max-width: 560px) {
  .wa { padding: var(--space-3); border-radius: 50%; }
  .wa__text { display: none; }
  .wa svg { width: 26px; height: 26px; }
}

.wa.is-instant { transition: opacity 1ms linear; transform: none; }
.wa.is-instant.is-visible::before { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .wa { transition: opacity 1ms linear; transform: none; }
  .wa.is-visible::before { animation: none; }
}