/* Base: brand tokens and resets shared by every component.
   Colors and fonts come straight from the Modern Operations Brand Kit (v1, Sept 2026). */

:root {
  color-scheme: dark;

  /* Colour: a ground and four greys (no accent yet, by design) */
  --ground: #0a0a0a;
  --ink: #f2f2f2;
  --link: #c8c8c8;
  --muted: #9a9a9a;
  --dim: #6e6e6e;
  --rule: #2a2a2a;
  --link-rule: #4a4a4a;

  /* Type */
  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Layout: Palantir's spacing, which steps up at two screen widths (see media queries below) */
  --max-width: 1440px;
  --h-spacing: 20px;   /* side margin */
  --v-gutter: 20px;
  --gutter: 10px;      /* gap between the 12 grid columns */
  /* Side margin that also centres everything inside 1440px on very wide screens */
  --contain: max(calc((100% - 1440px) / 2), var(--h-spacing));

  /* Motion */
  --ease: cubic-bezier(0.65, 0, 0.35, 1);
}

@media (min-width: 560px) { :root { --gutter: 15px; --v-gutter: 30px; } }
@media (min-width: 960px) { :root { --gutter: 30px; --h-spacing: 30px; } }

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 100px; }  /* keeps section tops clear of the nav bar */

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; }

/* Keyboard focus outline (shown when someone moves with Tab, never on mouse clicks). It takes the
   text colour of whatever is focused, so it's dark on the white pages and light on dark sections.
   (Until 30 Sept it was always near-white, which made it invisible on white.) */
:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }

/* Shared by the list-style sections (Solutions, Process): Palantir's section container
   and its "Our Software" heading style */
.section-inner {
  box-sizing: content-box;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 20px var(--h-spacing) 40px;
}
@media (min-width: 760px) { .section-inner { padding-top: 72px; padding-bottom: 58px; } }

.section-heading {
  margin: 0 0 22px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
}
@media (min-width: 560px)  { .section-heading { letter-spacing: -0.02em; } }
@media (min-width: 1500px) { .section-heading { font-size: 46px; margin-bottom: 70px; } }

/* Type-on reveal, copied from Palantir's "Our Software" list (see js/reveal.js).
   When an element marked data-typeon scrolls into view, it fades up over 0.5s
   while its letters switch on one at a time: the first at 0.25s, then one every ~27ms. */
.js [data-typeon] { opacity: 0; transition: opacity 0.5s cubic-bezier(0.5, 1, 0.89, 1); }
.js [data-typeon].is-in { opacity: 1; }
.js [data-typeon] .tw-char { opacity: 0; transition: opacity 0s linear calc(0.25s + var(--i) * 27ms); }
.js [data-typeon].is-in .tw-char { opacity: 1; }

/* Text that screen readers read but nobody sees */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Hidden until a keyboard user tabs to it; slides down from the top edge (Palantir-style) */
.skip-link {
  position: fixed;
  top: 0;
  left: 20px;
  z-index: 690;
  padding: 10px 16px;
  background: #1e2124;
  color: #fff;
  font-size: 16px;
  text-decoration: none;
  opacity: 0;
  transform: translateY(-100%);
  transition: transform 0.25s ease-in-out, opacity 0.25s linear;
}
.skip-link:focus { opacity: 1; outline: none; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-typeon], .js [data-typeon] .tw-char { opacity: 1; transition: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}