/* Metro Project Services — design tokens + base (compiled from the design system's tokens/) */
:root {
  /* Brand blue scale */
  --blue-50:  #EBF2FE; --blue-100: #D6E4FD; --blue-200: #AFC9FB; --blue-300: #7FA8F6;
  --blue-400: #4983EF; --blue-500: #1A63E0; --blue-600: #0B5CD6; --blue-700: #0A4BAE;
  --blue-800: #0B3D8A; --blue-900: #0E3470; --blue-950: #0A2147;
  /* Neutral / slate scale */
  --neutral-0: #FFFFFF; --neutral-50: #F6F7F9; --neutral-100: #ECEEF2; --neutral-200: #DDE1E7;
  --neutral-300: #C2C8D2; --neutral-400: #97A0AE; --neutral-500: #6B7585; --neutral-600: #4D5667;
  --neutral-700: #3A4250; --neutral-800: #262C37; --neutral-900: #161B23; --neutral-950: #0B0E13;
  --ink: #000000;
  /* Status */
  --green-50: #E7F6EE; --green-500: #1E9E5A; --green-600: #178049;
  --amber-50: #FCF2E3; --amber-500: #D98A0B; --amber-600: #B06E06;
  --red-50: #FBEBEB; --red-500: #D23B3B; --red-600: #B22B2B;
  /* Semantic aliases */
  --text-strong: var(--neutral-950); --text-body: var(--neutral-800); --text-muted: var(--neutral-500);
  --text-subtle: var(--neutral-400); --text-inverse: var(--neutral-0); --text-link: var(--blue-600);
  --text-brand: var(--blue-600);
  --surface-page: var(--neutral-0); --surface-subtle: var(--neutral-50); --surface-muted: var(--neutral-100);
  --surface-card: var(--neutral-0); --surface-inverse: var(--neutral-950); --surface-brand: var(--blue-600);
  --surface-brand-hover: var(--blue-700);
  --border-subtle: var(--neutral-200); --border-default: var(--neutral-300); --border-strong: var(--neutral-900);
  --border-brand: var(--blue-600);
  --focus-ring: var(--blue-600);
  --status-success: var(--green-500); --status-success-surface: var(--green-50);
  --status-warning: var(--amber-500); --status-warning-surface: var(--amber-50);
  --status-danger: var(--red-500); --status-danger-surface: var(--red-50);
  --status-info: var(--blue-600); --status-info-surface: var(--blue-50);
  /* Typography */
  --font-display: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;
  --weight-extrabold: 800; --weight-black: 900;
  --text-2xs: 0.6875rem; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem;
  --text-md: 1.125rem; --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: 1.875rem;
  --text-3xl: 2.25rem; --text-4xl: 3rem; --text-5xl: 3.75rem; --text-6xl: 4.5rem; --text-7xl: 6rem;
  --leading-none: 1; --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.65;
  --tracking-tighter: -0.03em; --tracking-tight: -0.015em; --tracking-normal: 0;
  --tracking-wide: 0.04em; --tracking-wider: 0.08em; --tracking-widest: 0.18em;
  /* Spacing & layout */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem;
  --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem;
  --space-20: 5rem; --space-24: 6rem; --space-32: 8rem;
  --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px;
  --container-2xl: 1440px; --gutter: clamp(1.25rem, 4vw, 4rem); --section-y: clamp(4rem, 9vw, 8rem);
  /* Effects */
  --radius-none: 0; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 6px; --radius-xl: 10px;
  --radius-2xl: 16px; --radius-pill: 999px;
  --border-thin: 1px; --border-base: 1.5px; --border-thick: 2px;
  --shadow-xs: 0 1px 2px rgba(11, 14, 19, 0.06);
  --shadow-sm: 0 1px 3px rgba(11, 14, 19, 0.08), 0 1px 2px rgba(11, 14, 19, 0.06);
  --shadow-md: 0 4px 10px rgba(11, 14, 19, 0.08), 0 2px 4px rgba(11, 14, 19, 0.06);
  --shadow-lg: 0 12px 28px rgba(11, 14, 19, 0.10), 0 4px 8px rgba(11, 14, 19, 0.06);
  --shadow-xl: 0 24px 56px rgba(11, 14, 19, 0.14);
  --shadow-focus: 0 0 0 3px rgba(11, 92, 214, 0.30);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 320ms;
  --z-base: 1; --z-sticky: 100; --z-overlay: 1000; --z-modal: 1100; --z-toast: 1200;
}

/* Base element styles */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 0.5em;
  text-wrap: balance;
}
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }
code, pre, kbd, samp { font-family: var(--font-mono); font-size: 0.95em; }
::selection { background: var(--blue-600); color: #fff; }
:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }

/* Brand helpers */
.mps-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  font-size: var(--text-xs);
  color: var(--text-brand);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.mps-eyebrow--rule::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--blue-600);
  display: inline-block;
}
.mps-container { width: 100%; max-width: var(--container-xl); margin-inline: auto; padding-inline: var(--gutter); }
.mps-accent-bar { width: 56px; height: 4px; background: var(--blue-600); display: block; }

/* Keep header/footer/nav links from underlining on hover (they carry their own styling) */
header a:hover, footer a:hover, .cta-band a:hover { text-decoration: none; }