:root {
  --mobile-contact-bar-content-height: 0px;
  --mobile-contact-bar-bottom-space: 0px;
  --mobile-contact-bar-height: 0px;
}

satori-mobile-contact-bar,
.mobile-contact-bar {
  display: none;
}

@media (max-width: 760px) {
  :root {
    --mobile-contact-bar-content-height: 104px;
    --mobile-contact-bar-bottom-space: 0.5rem;
    --mobile-contact-bar-height:
      calc(
        var(--mobile-contact-bar-content-height) +
        env(safe-area-inset-bottom)
      );
    --mobile-page-bottom:
      calc(var(--mobile-contact-bar-height) + 16px);
  }

  satori-mobile-contact-bar {
    display: contents;
  }

  .mobile-contact-bar {
    --mobile-contact-bar-left: max(
      10px,
      env(safe-area-inset-left)
    );
    --mobile-contact-bar-right: max(
      10px,
      env(safe-area-inset-right)
    );
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    height: var(--mobile-contact-bar-height);
    padding:
      0
      var(--mobile-contact-bar-right)
      calc(
        env(safe-area-inset-bottom) +
        var(--mobile-contact-bar-bottom-space)
      )
      var(--mobile-contact-bar-left);
    display: grid;
    grid-template-rows: auto auto;
    align-content: center;
    justify-items: center;
    gap: 12px;
    background: #e3f74d;
    border: 0;
    border-radius:
      clamp(38px, 11.5vw, 48px)
      clamp(38px, 11.5vw, 48px)
      0
      0;
    transition: opacity 220ms ease, transform 280ms ease;
  }

  body[data-slide="9"] .mobile-contact-bar {
    opacity: 0;
    transform: translateY(110%);
    pointer-events: none;
  }

  .mobile-contact-bar a {
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    color: #020801;
    border-bottom: 2px solid rgba(2, 8, 1, 0.72);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
    text-transform: lowercase;
  }

  .mobile-contact-bar-label {
    color: rgba(2, 8, 1, 0.5);
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1;
    text-transform: lowercase;
    pointer-events: none;
  }

  .mobile-contact-bar-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(28px, 7.5vw, 34px);
  }

  .mobile-contact-bar a:focus-visible {
    outline: 2px solid #020801;
    outline-offset: 4px;
  }

}

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