/* Keep the project enquiry within thumb reach without covering the form. */
.mobile-project-cta { display: none; }

@media screen and (max-width: 767px) {
  html { scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  body:has(> .mobile-project-cta) { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }

  .mobile-project-cta {
    --layer-mobile-cta: 10; /* Above content; below the existing menu and header. */
    position: fixed;
    z-index: var(--layer-mobile-cta);
    inset: auto 0 0;
    display: flex;
    justify-content: center;
    padding: 12px max(20px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
    background: linear-gradient(to bottom, transparent, var(--paper) 75%);
    pointer-events: none;
  }

  .mobile-project-cta[hidden],
  .nav-open .mobile-project-cta { display: none; }

  :root .design-v2 .mobile-project-cta .button {
    width: 100%;
    max-width: 480px;
    min-height: 60px;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 10px 9px 24px;
    background: #c7df6d;
    color: #132c39;
    font-size: 1rem;
    box-shadow: 0 8px 28px #07111926;
    pointer-events: auto;
  }

  :root .design-v2 .mobile-project-cta .button-mark {
    width: 40px;
    height: 40px;
    background: var(--lime);
    color: #132c39;
    font-size: 1.3rem;
  }

  :root .design-v2 .mobile-project-cta .button:hover { background: #d0e684; }
  :root .design-v2 .mobile-project-cta .button:active { transform: translateY(1px); }
  :root .design-v2 .mobile-project-cta .button:focus-visible {
    outline: 3px solid var(--navy);
    outline-offset: 3px;
  }

  @media (max-width: 359px) {
    .mobile-project-cta { padding-inline: max(12px, env(safe-area-inset-left, 0px)) max(12px, env(safe-area-inset-right, 0px)); }
    :root .design-v2 .mobile-project-cta .button { padding-left: 18px; font-size: .9rem; gap: 8px; }
  }
}