/*
 * Authoritative alignment for the shared site header and footer.
 * Page-specific styles may shape page content, but must not change this shell.
 */

.site-footer,
.new-home-frame > .site-footer {
  border-top-color: var(--line-soft);
}

@media (max-width: 767px) {
  .new-home-frame,
  .services-reference-shell,
  .portfolio-reference-shell,
  .about-reference-shell,
  .contact-reference-shell,
  .legal-reference-shell {
    overflow: clip;
  }

  .services-reference-header,
  .new-home-page .services-reference-header {
    position: sticky;
    top: 0;
    z-index: 100;
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    min-height: 120px;
    gap: 0 12px;
    padding-block: 26px 24px;
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
    border-bottom-color: rgba(97, 91, 81, 0.54);
    background: rgba(8, 8, 8, 0.96);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    text-align: center;
  }

  .services-reference-logo,
  .new-home-page .services-reference-logo {
    grid-column: 1 / 3;
    grid-row: 1;
    justify-self: start;
    width: min(158px, calc(100vw - 152px));
    max-width: 100%;
  }

  .services-reference-logo span,
  .new-home-page .services-reference-logo span {
    font-size: 30px;
  }

  .services-reference-logo small,
  .new-home-page .services-reference-logo small {
    margin-top: 9px;
    font-size: 13px;
  }

  .services-reference-menu-toggle,
  .new-home-page .services-reference-menu-toggle {
    grid-column: 3;
    grid-row: 1;
  }

  .portfolio-reference-card {
    scroll-margin-top: 132px;
  }

  .services-reference-nav,
  .new-home-page .services-reference-nav {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .footer-main {
    padding-top: 20px;
    padding-bottom: max(16px, calc(8px + env(safe-area-inset-bottom)));
  }

  .footer-link-groups {
    margin-top: 8px;
  }

  .footer-nav-list {
    gap: 0 8px;
  }

  .footer-contact {
    margin-top: 8px;
    gap: 0;
  }
}