/* Back to top: fixed on the right, around the lower middle of the viewport
   (the page is long, so it stays within easy reach instead of the far bottom corner). */
.back-to-top {
  position: fixed; right: 24px; top: 62vh; z-index: 40;
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; padding: 0;
  border: 1px solid var(--primary, #0a4d28); border-radius: 3px;
  background: var(--primary, #0a4d28); color: #fff; cursor: pointer;
  box-shadow: 0 14px 30px -16px rgba(10,77,40,.55);
  opacity: 0; visibility: hidden; translate: 0 12px;
  transition: opacity .35s ease, visibility .35s, translate .45s cubic-bezier(.22,1,.36,1), background .2s, border-color .2s;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; translate: 0 0; }
.back-to-top svg { width: 22px; height: 22px; transition: translate .35s cubic-bezier(.22,1,.36,1); }
.back-to-top:focus-visible { outline: 2px solid #11743f; outline-offset: 3px; }

@media (hover: hover) and (pointer: fine) {
  .back-to-top:hover { background: #11743f; border-color: #11743f; }
  .back-to-top:hover svg { translate: 0 -3px; }
}

@media (max-width: 640px) {
  .back-to-top { right: 16px; width: 46px; height: 46px; }
  .back-to-top svg { width: 20px; height: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top, .back-to-top svg { transition: none; }
}

@media print { .back-to-top { display: none; } }