@layer sections {
  .site-footer {
    background: var(--surface-muted);
    color: var(--text-muted);
    padding: clamp(var(--space-40, 2.5rem), 7vw, var(--space-64, 4rem)) 0;
  }

  .footer-layout {
    display: grid;
    gap: clamp(var(--space-32, 2rem), 6vw, var(--space-48, 3rem));
  }

  .footer-brand {
    align-items: flex-start;
    gap: var(--space-12, 0.75rem);
    max-width: 28rem;
  }

  .footer-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8, 0.5rem);
    font-weight: var(--font-weight-semibold, 600);
    font-size: var(--font-size-base);
    color: inherit;
    text-decoration: none;
    letter-spacing: var(--letter-spacing-tight, -0.01em);
  }

  .footer-logo-mark {
    font-size: var(--font-size-lg);
  }

  .footer-logo-type {
    font-weight: var(--font-weight-semibold, 600);
  }

  .footer-tagline {
    margin: 0;
    max-width: 26rem;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-default, 1.55);
  }

  .footer-copy {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--font-size-xs);
  }

  .footer-columns {
    display: grid;
    gap: clamp(var(--space-24, 1.5rem), 6vw, var(--space-40, 2.5rem));
  }

  .footer-column {
    gap: var(--space-8, 0.5rem);
  }

  .footer-column h4 {
    margin: 0 0 var(--space-8, 0.5rem);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium, 500);
    letter-spacing: var(--letter-spacing-wide, 0.08em);
    text-transform: uppercase;
    color: var(--text-secondary);
  }

  .footer-column a {
    
    font-size: var(--font-size-sm);
    text-decoration: none;
    transition: color var(--motion-duration-base, 0.22s) var(--motion-ease-standard, ease);
  }

  .footer-column a:hover,
  .footer-column a:focus {
    color: var(--color-accent-support-500);
  }

  @media (min-width: 56rem) {
    .footer-layout {
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
      align-items: start;
    }

    .footer-columns {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: clamp(var(--space-24, 1.5rem), 4vw, var(--space-32, 2rem));
    }
  }

  @media (max-width: 48rem) {
    .footer-brand {
      align-items: center;
      text-align: center;
    }

    .footer-logo {
      justify-content: center;
    }

    .footer-tagline {
      max-width: 100%;
    }

    .footer-columns {
      justify-items: center;
      text-align: center;
    }
  }
}