/* Altruismpackage · Phase 1 visual identity · UTF-8
   Load this file, then opt in with class="vi-system" on a wrapper or body.
   Logo SVG colors are fixed master artwork; do not recolor with CSS. */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 700;
  font-stretch: 75% 100%;
  font-display: swap;
}
:root {
  /* Original palette — not sampled from reference assets. */
  --vi-blue-900: #123449;
  --vi-blue-800: #12476E;
  --vi-blue-700: #175B8E;
  --vi-blue-050: #EDF4F8;
  --vi-green-700: #36754B;
  --vi-green-050: #EEF5EF;
  --vi-gray-950: #1E2A32;
  --vi-gray-700: #52616B;
  --vi-gray-500: #73818B;
  --vi-gray-400: #88959F;
  --vi-gray-300: #B8C3CC;
  --vi-gray-200: #D8E0E6;
  --vi-gray-100: #F3F5F7;
  --vi-white: #FFFFFF;
  --vi-error: #A52E33;
  --vi-error-bg: #FCF0F0;
  --vi-warning: #7A5714;
  --vi-warning-bg: #FBF5E8;
  /* Roles. Green does not imply certification or environmental compliance. */
  --vi-primary: var(--vi-blue-700);
  --vi-primary-hover: var(--vi-blue-800);
  --vi-primary-active: var(--vi-blue-900);
  --vi-heading: var(--vi-blue-900);
  --vi-text: var(--vi-gray-950);
  --vi-text-muted: var(--vi-gray-700);
  --vi-surface: var(--vi-white);
  --vi-surface-subtle: var(--vi-gray-100);
  --vi-section-tint: var(--vi-blue-050);
  --vi-border: var(--vi-gray-200);
  --vi-control-border: var(--vi-gray-400);
  --vi-disabled-bg: var(--vi-gray-200);
  --vi-disabled-text: var(--vi-gray-700);
  --vi-focus: var(--vi-blue-700);
  /* One rational family; tabular figures align quantity/specification columns. */
  --vi-font-heading: "IBM Plex Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --vi-font-body: "IBM Plex Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --vi-font-number: "IBM Plex Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --vi-text-xs: .75rem;
  --vi-text-sm: .875rem;
  --vi-text-base: 1rem;
  --vi-text-lg: 1.125rem;
  --vi-text-h3: 1.5rem;
  --vi-text-h2: 2rem;
  --vi-text-h1: clamp(2rem, 1.5rem + 2vw, 3rem);
  --vi-leading-heading: 1.2;
  --vi-leading-body: 1.6;
  --vi-leading-compact: 1.4;
  --vi-weight-regular: 400;
  --vi-weight-medium: 500;
  --vi-weight-semibold: 600;
  --vi-space-1: .25rem;
  --vi-space-2: .5rem;
  --vi-space-3: .75rem;
  --vi-space-4: 1rem;
  --vi-space-5: 1.5rem;
  --vi-space-6: 2rem;
  --vi-space-7: 3rem;
  --vi-space-8: 4rem;
  --vi-space-9: 6rem;
  --vi-container: 75rem;
  --vi-gutter: clamp(1rem, 3vw, 2rem);
  --vi-radius: 3px;
  --vi-border-width: 1px;
  --vi-control-height: 2.75rem;
  --vi-motion: 140ms;
  --vi-ease: cubic-bezier(.2, .7, .3, 1);
}
/* Scoped foundations: no changes to unwrapped existing pages. */
.vi-system { font: var(--vi-weight-regular) var(--vi-text-base)/var(--vi-leading-body) var(--vi-font-body); color: var(--vi-text); background: var(--vi-surface); -webkit-text-size-adjust: 100%; }
.vi-system, .vi-system *, .vi-system *::before, .vi-system *::after { box-sizing: border-box; }
.vi-system img { max-width: 100%; height: auto; }
.vi-system button, .vi-system input, .vi-system select, .vi-system textarea { font: inherit; }
.vi-system :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--vi-focus); outline-offset: 3px; }
.vi-container { width: min(var(--vi-container), calc(100% - 2 * var(--vi-gutter))); margin-inline: auto; }
.vi-section { padding-block: var(--vi-space-8); }
.vi-section--tint { background: var(--vi-section-tint); }
.vi-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--vi-space-5); }
.vi-stack > * + * { margin-block-start: var(--vi-space-4); }
.vi-h1, .vi-h2, .vi-h3 { margin: 0; color: var(--vi-heading); font-family: var(--vi-font-heading); font-weight: var(--vi-weight-semibold); line-height: var(--vi-leading-heading); overflow-wrap: break-word; }
.vi-h1 { font-size: var(--vi-text-h1); letter-spacing: -.025em; }
.vi-h2 { font-size: var(--vi-text-h2); letter-spacing: -.015em; }
.vi-h3 { font-size: var(--vi-text-h3); }
.vi-body { margin: 0; font-size: var(--vi-text-base); line-height: var(--vi-leading-body); max-width: 70ch; }
.vi-lead { margin: 0; font-size: var(--vi-text-lg); line-height: var(--vi-leading-body); max-width: 65ch; }
.vi-small { font-size: var(--vi-text-sm); line-height: var(--vi-leading-compact); }
.vi-caption { font-size: var(--vi-text-xs); line-height: var(--vi-leading-compact); }
.vi-muted { color: var(--vi-text-muted); }
.vi-number { font-family: var(--vi-font-number); font-variant-numeric: tabular-nums lining-nums; }
.vi-eyebrow { margin: 0; color: var(--vi-text-muted); font-size: var(--vi-text-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
/* Actions: 44px minimum target; states never rely on shadows. */
.vi-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--vi-space-2); min-height: var(--vi-control-height); padding: .625rem 1.25rem; border: 1px solid transparent; border-radius: var(--vi-radius); font-weight: 600; line-height: var(--vi-leading-compact); text-decoration: none; text-align: center; overflow-wrap: anywhere; cursor: pointer; transition: background-color var(--vi-motion) var(--vi-ease), border-color var(--vi-motion) var(--vi-ease); }
.vi-button--primary { background: var(--vi-primary); color: var(--vi-white); }
.vi-button--primary:hover { background: var(--vi-primary-hover); }
.vi-button--primary:active { background: var(--vi-primary-active); }
.vi-button--secondary { color: var(--vi-primary); background: var(--vi-white); border-color: var(--vi-primary); }
.vi-button--secondary:hover { background: var(--vi-section-tint); border-color: var(--vi-primary-hover); }
.vi-button--secondary:active { background: var(--vi-gray-200); }
.vi-button:disabled, .vi-button[aria-disabled="true"] { color: var(--vi-disabled-text); background: var(--vi-disabled-bg); border-color: var(--vi-disabled-bg); cursor: not-allowed; }
/* aria-disabled is visual only: host application must block activation. */
.vi-link { color: var(--vi-primary); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; overflow-wrap: anywhere; }
.vi-link:hover { color: var(--vi-primary-hover); text-decoration-thickness: 2px; }
.vi-link:active { color: var(--vi-primary-active); }
.vi-link--action { display: inline-flex; align-items: center; min-height: var(--vi-control-height); font-weight: 600; }
/* Cards: data first; approved imagery only. */
.vi-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--vi-surface); border: 1px solid var(--vi-border); border-radius: var(--vi-radius); }
.vi-card__media { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--vi-surface-subtle); }
.vi-card__media img { width: 100%; height: 100%; object-fit: contain; }
.vi-card__body { display: flex; flex-direction: column; gap: var(--vi-space-3); flex: 1; padding: var(--vi-space-5); overflow-wrap: anywhere; }
.vi-card__action { margin-top: auto; padding-top: var(--vi-space-2); }
/* Tables: preserve all columns on small screens in a keyboard-focusable region. */
.vi-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--vi-border); border-radius: var(--vi-radius); }
.vi-table { width: 100%; border-collapse: collapse; font-size: var(--vi-text-sm); text-align: left; }
.vi-table caption { padding: var(--vi-space-4); text-align: left; font-weight: 600; color: var(--vi-heading); background: var(--vi-surface); }
.vi-table th, .vi-table td { padding: .875rem 1rem; border-bottom: 1px solid var(--vi-border); vertical-align: top; overflow-wrap: break-word; }
.vi-table thead th { background: var(--vi-section-tint); color: var(--vi-heading); font-weight: 600; }
.vi-table tbody th { font-weight: 500; }
.vi-table tbody tr:nth-child(even) { background: var(--vi-surface-subtle); }
.vi-table tbody tr:last-child > * { border-bottom: 0; }
.vi-table__numeric { text-align: right; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
/* Navigation: native details supplies a keyboard-operable mobile disclosure. */
.vi-nav { border-bottom: 1px solid var(--vi-border); background: var(--vi-surface); }
.vi-nav__inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--vi-space-5); padding-block: var(--vi-space-4); }
.vi-nav__brand { display: inline-flex; align-items: center; min-height: var(--vi-control-height); flex-shrink: 0; }
.vi-nav__logo { display: block; width: 280px; }
.vi-nav__symbol { display: none; width: 44px; }
.vi-nav__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vi-space-5); }
.vi-nav__link { display: inline-flex; align-items: center; min-height: var(--vi-control-height); color: var(--vi-text); text-decoration: none; font-weight: 500; border-bottom: 2px solid transparent; }
.vi-nav__link:hover { color: var(--vi-primary); border-bottom-color: var(--vi-border); }
.vi-nav__link[aria-current] { color: var(--vi-primary); border-bottom-color: var(--vi-primary); }
.vi-nav__mobile { display: none; }
.vi-nav__mobile summary { list-style: none; cursor: pointer; min-height: var(--vi-control-height); padding: .625rem 1rem; border: 1px solid var(--vi-control-border); border-radius: var(--vi-radius); font-weight: 600; }
.vi-nav__mobile summary::-webkit-details-marker { display: none; }
.vi-nav__mobile summary::after { content: " +"; }
.vi-nav__mobile[open] summary::after { content: " −"; }
/* Forms: labels are mandatory; errors use text and aria-describedby. */
.vi-form { display: grid; gap: var(--vi-space-5); }
.vi-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vi-space-5); }
.vi-field { display: grid; align-content: start; gap: var(--vi-space-2); min-width: 0; }
.vi-label { color: var(--vi-text); font-size: var(--vi-text-sm); font-weight: 600; }
.vi-input, .vi-select, .vi-textarea { width: 100%; min-height: var(--vi-control-height); padding: .625rem .75rem; border: 1px solid var(--vi-control-border); border-radius: var(--vi-radius); background: var(--vi-white); color: var(--vi-text); line-height: var(--vi-leading-compact); }
.vi-input::placeholder, .vi-textarea::placeholder { color: var(--vi-text-muted); opacity: 1; }
.vi-input:hover, .vi-select:hover, .vi-textarea:hover { border-color: var(--vi-primary); }
.vi-textarea { min-height: 7.5rem; resize: vertical; }
.vi-input[aria-invalid="true"], .vi-select[aria-invalid="true"], .vi-textarea[aria-invalid="true"] { border: 2px solid var(--vi-error); }
.vi-input:disabled, .vi-select:disabled, .vi-textarea:disabled { color: var(--vi-disabled-text); background: var(--vi-disabled-bg); cursor: not-allowed; }
.vi-help, .vi-error { margin: 0; font-size: var(--vi-text-sm); line-height: var(--vi-leading-compact); }
.vi-help { color: var(--vi-text-muted); }
.vi-error { color: var(--vi-error); }
.vi-check { display: flex; align-items: center; gap: var(--vi-space-3); min-height: var(--vi-control-height); cursor: pointer; }
.vi-check input { width: 1.125rem; height: 1.125rem; flex-shrink: 0; accent-color: var(--vi-primary); }
/* Badges communicate categories, never unsupported assurance. */
.vi-badge { display: inline-flex; align-items: center; gap: var(--vi-space-1); width: fit-content; padding: .25rem .5rem; border: 1px solid var(--vi-border); border-radius: var(--vi-radius); color: var(--vi-text-muted); background: var(--vi-surface-subtle); font-size: var(--vi-text-xs); font-weight: 600; line-height: var(--vi-leading-compact); }
.vi-badge--blue { color: var(--vi-primary); background: var(--vi-section-tint); border-color: var(--vi-section-tint); }
.vi-badge--green { color: var(--vi-green-700); background: var(--vi-green-050); border-color: var(--vi-green-050); }
.vi-badge--error { color: var(--vi-error); background: var(--vi-error-bg); border-color: var(--vi-error-bg); }
.vi-badge--warning { color: var(--vi-warning); background: var(--vi-warning-bg); border-color: var(--vi-warning-bg); }
/* Footer: solid structural field, no decorative graphics. */
.vi-footer { background: var(--vi-blue-900); color: var(--vi-white); padding-block: var(--vi-space-7); }
.vi-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--vi-space-7); }
.vi-footer__logo { width: 280px; display: block; }
.vi-footer__heading { font-size: var(--vi-text-base); font-weight: 600; margin: 0 0 var(--vi-space-3); color: var(--vi-white); }
.vi-footer__links { list-style: none; padding: 0; margin: 0; }
.vi-footer a { color: var(--vi-white); text-decoration: underline; text-underline-offset: .2em; display: inline-flex; align-items: center; min-height: var(--vi-control-height); }
.vi-footer a:hover { text-decoration-thickness: 2px; }
.vi-footer :focus-visible { outline-color: var(--vi-white); }
.vi-footer__meta { border-top: 1px solid var(--vi-gray-400); padding-top: var(--vi-space-5); margin-top: var(--vi-space-6); font-size: var(--vi-text-sm); }
.vi-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.vi-skip { position: absolute; top: 1rem; left: 1rem; transform: translateY(-200%); background: var(--vi-white); color: var(--vi-primary); padding: .75rem 1rem; z-index: 10; }
.vi-skip:focus { transform: none; }
@media (max-width: 64rem) {
  .vi-nav__desktop { display: none; }
  .vi-nav__mobile { display: block; }
  .vi-nav__mobile[open] { flex-basis: 100%; }
  .vi-nav__mobile .vi-nav__links { padding-top: var(--vi-space-4); flex-direction: column; align-items: stretch; gap: var(--vi-space-2); }
}
@media (max-width: 40rem) {
  .vi-section { padding-block: var(--vi-space-7); }
  .vi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--vi-space-4); }
  .vi-form__row, .vi-footer__grid { grid-template-columns: 1fr; }
  .vi-nav__logo { display: none; }
  .vi-nav__symbol { display: block; }
  .vi-nav__inner { gap: var(--vi-space-3); }
  .vi-footer__logo { width: 280px; max-width: 100%; }
  .vi-h2 { font-size: 1.75rem; }
}
@media (prefers-reduced-motion: reduce) { .vi-system *, .vi-system *::before, .vi-system *::after { transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important; } }