@layer utilities {
  .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .sr-only-focusable:active, .sr-only-focusable:focus {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
  }

  /* Spacing utilities (additive, low risk) */
  .gap-inline-4 { column-gap: var(--size-4); }
  .gap-block-4 { row-gap: var(--size-4); }
  .p-block-4 { padding-block: var(--size-4); }
  .p-inline-4 { padding-inline: var(--size-4); }
  .m-block-4 { margin-block: var(--size-4); }
  .m-inline-4 { margin-inline: var(--size-4); }

  /* Display helpers */
  .flex { display: flex; }
  .grid { display: grid; }
  .items-center { align-items: center; }
  .justify-between { justify-content: space-between; }
  .wrap { flex-wrap: wrap; }

  /* Containers (additive) */
  .container-fluid { width: 100%; padding-inline: var(--size-4); }
  .container-responsive { width: min(100%, var(--bp-lg)); margin-inline: auto; padding-inline: var(--size-4); }

  /* Grid helpers (additive) */
  .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--size-4); }
  .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--size-4); }
  .grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--size-4); }

  @media (max-width: 768px) {
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
  }
}