html, body { margin: 0; }

site-root {
  display: block;
  container-type: inline-size;
  min-height: 100%;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--line-height);
  -webkit-font-smoothing: antialiased;
}
site-root *, site-root *::before, site-root *::after { box-sizing: border-box; }
site-root :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  line-height: var(--heading-line-height);
  margin: 0 0 var(--space-2);
}
site-root h1 { font-size: var(--h1); } site-root h2 { font-size: var(--h2); } site-root h3 { font-size: var(--h3); }
site-root h4 { font-size: var(--h4); } site-root h5 { font-size: var(--h5); } site-root h6 { font-size: var(--h6); }
site-root p { margin: 0 0 var(--space-2); }
site-root a { color: var(--color-link); }
site-root img, site-root video { max-width: 100%; height: auto; display: block; }
site-root :focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
site-root site-outlet { display: block; }
site-root .skip-link { position: absolute; left: -999px; }
site-root .skip-link:focus { left: var(--space-2); top: var(--space-2); background: var(--color-background); padding: var(--space-1) var(--space-2); z-index: 10; }
@media (prefers-reduced-motion: reduce) { site-root * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }

/* Structure: layout primitives for sections, containers, stacks, grids and columns (PLAN.md 3.10).
   They carry no colors or fonts of their own: everything comes from the global settings. Override
   with the variables shown, in site.css (".services { --grid-min: 14rem }") or on one element
   (style="--columns: 3"). Columns respond to the space they have (container queries), not the window. */
site-root .l-container { width: 100%; max-width: var(--container-width, var(--content-width)); margin-inline: auto; padding-inline: var(--gutter); }
site-root .l-narrow { --container-width: var(--narrow-width); }
site-root .l-section { padding-block: var(--section-padding, var(--section-space)); }
site-root .l-tinted { background: var(--section-background, var(--color-surface)); }
site-root .l-stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--space-3)); }
site-root .l-stack > * { margin-block: 0; }
site-root .l-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--space-2)); }
site-root .l-grid { display: grid; gap: var(--grid-gap, var(--gutter)); grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 16rem), 100%), 1fr)); }
site-root .l-columns, site-root .l-split { display: grid; gap: var(--columns-gap, var(--gutter)); grid-template-columns: minmax(0, 1fr); align-items: var(--align, start); }
@container (min-width: 48rem) {
  site-root .l-columns { grid-template-columns: repeat(var(--columns, 2), minmax(0, 1fr)); }
  site-root .l-split { grid-template-columns: var(--split, 1fr 1fr); }
}
site-root .l-card { background: var(--card-background, var(--color-surface)); border-radius: var(--radius); padding: var(--card-padding, var(--space-4)); }
site-root .l-center { text-align: center; }
site-root .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

site-root {
  --color-primary: #0d244b;
  --color-secondary: #259de9;
  --color-accent: #105cb4;
  --color-background: #ffffff;
  --color-surface: #f2f6fa;
  --color-text: #1c2635;
  --color-muted: #4b5868;
  --color-link: #105cb4;
  --color-on-primary: #ffffff;
  --font-heading: "Montserrat", system-ui, sans-serif;
  --font-body: "Open Sans", system-ui, sans-serif;
  --text-base: 1.0625rem;
  --text-small: calc(1.0625rem / 1.22);
  --h1: calc(1.0625rem * 2.7027);
  --h2: calc(1.0625rem * 2.2153);
  --h3: calc(1.0625rem * 1.8158);
  --h4: calc(1.0625rem * 1.4884);
  --h5: calc(1.0625rem * 1.2200);
  --h6: 1.0625rem;
  --line-height: 1.65;
  --heading-line-height: 1.1;
  --heading-weight: 800;
  --space-unit: 0.5rem;
  --space-1: calc(var(--space-unit) * 1);
  --space-2: calc(var(--space-unit) * 2);
  --space-3: calc(var(--space-unit) * 3);
  --space-4: calc(var(--space-unit) * 4);
  --space-5: calc(var(--space-unit) * 5);
  --space-6: calc(var(--space-unit) * 6);
  --space-7: calc(var(--space-unit) * 7);
  --space-8: calc(var(--space-unit) * 8);
  --section-space: 6rem;
  --gutter: 1.5rem;
  --content-width: 76rem;
  --narrow-width: 46rem;
  --radius: 0.875rem;
}
