/* Keep the footer copy stationary, above its own touchable skyline band. */
@media (max-width: 720px) {
  #footer .footer-main { gap: 28px; padding-bottom: 24px; }
  #footer .footer-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) !important;
    gap: 24px 20px;
    align-items: start;
  }
  #footer .footer-col:first-child { grid-column: 1; grid-row: 1; }
  #footer .footer-col:nth-child(2) { grid-column: 2; grid-row: 1 / span 2; }
  #footer .footer-col--end {
    display: contents;
  }
  #footer .footer-col--end h3 { display: none; }
  #footer .footer-col--end > ul { grid-column: 1; grid-row: 2; align-self: start; }
  #footer .footer-col:nth-child(2) li:has(a[href="consumer-catalogue.html"]),
  #footer .footer-col:nth-child(2) li:has(a[href="industrial-catalogue.html"]) { display: none; }
  #footer .footer-col a { font-size: .83rem; line-height: 1.5; }
  #footer .footer-col ul { gap: 12px; }
  #footer .footer-cta-stack {
    grid-column: 1 / -1;
    display: flex;
    /* Wrap, because this row carries three things now: the CTA, the email and
       the location. As a nowrap row the button was squeezed until its label was
       clipped mid-word and the location broke onto two lines beside it. */
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin-top: 0;
    padding-top: 18px;
    border-top: 1px solid color-mix(in srgb, var(--ink) 13%, transparent);
    gap: 12px 10px;
  }
  #footer .footer-cta-button { flex: 0 0 auto; }
  /* Email and location share the line under the button rather than fighting it. */
  /* Sized to its text, not grown to the line. Growing made the address take the
     whole row on its own, which pushed the button onto a second line — the two
     are meant to share one. */
  #footer .footer-cta-stack .footer-email { flex: 0 1 auto; min-width: 0; }
  #footer .footer-place { flex: 1 0 100%; }
  /* Address first, button after it. Source order keeps the button early for
     anyone tabbing through, so the swap is done with order rather than by
     moving the markup. The email grows into the slack, which is what carries
     the button over to the right edge. */
  #footer .footer-cta-stack .footer-email { order: 1; }
  #footer .footer-cta-button { order: 2; }
  #footer .footer-place { order: 3; }
  #footer .footer-cta-button,
  #footer .footer-cta-button .button-copy {
    color: var(--action-ink) !important;
    -webkit-text-fill-color: var(--action-ink);
    opacity: 1;
    visibility: visible;
  }
  #footer .footer-cta-button {
    background: var(--action);
    border-color: var(--action);
  }
  #footer .footer-cta-button:hover,
  #footer .footer-cta-button:focus-visible {
    background: var(--cta-hover, #3357d7);
    border-color: var(--cta-hover, #3357d7);
    box-shadow: none;
    filter: none;
    color: var(--action-ink);
  }
  #footer .footer-cta-button:hover .button-copy,
  #footer .footer-cta-button:focus-visible .button-copy {
    color: var(--action-ink) !important;
    -webkit-text-fill-color: var(--action-ink);
  }
  html[data-skin="nocturne"] #footer .footer-cta-button:hover,
  html[data-skin="nocturne"] #footer .footer-cta-button:focus-visible {
    background: var(--cta-hover, #4087f7);
    border-color: var(--cta-hover, #4087f7);
    box-shadow: none;
    filter: none;
    color: #061026;
  }
  html[data-skin="nocturne"] #footer .footer-cta-button:hover .button-copy,
  html[data-skin="nocturne"] #footer .footer-cta-button:focus-visible .button-copy {
    color: #061026 !important;
    -webkit-text-fill-color: #061026;
  }
  #footer .footer-cta-stack .footer-email {
    margin-left: 0;
    text-align: left;
  }
  #footer .footer-stage {
    margin-top: 0 !important;
    height: 340px !important;
    min-height: 340px !important;
    max-height: 340px !important;
    touch-action: pan-y;
    overscroll-behavior-x: contain;
  }
}