:root {
  --cream: #efeade;
  --cream-2: #e5dfd2;
  --ink: #11130f;
  --ink-2: #191c17;
  --muted: #6d6b62;
  --olive: #74795d;
  --orange: #f0641d;
  --gold: #b99349;
  --red: #ef351f;
  --acid: #c2f33b;
  --rust: #a83227;
  --purple: #9b46f5;
  --blue: #537cff;
  --paper: var(--cream);
  --surface: #f5f1e7;
  --surface-dark: #171915;
  --text: var(--ink);
  --subtle: rgba(17, 19, 15, 0.62);
  --line: rgba(17, 19, 15, 0.42);
  --line-strong: var(--ink);
  --accent: var(--orange);
  --accent-contrast: var(--ink);
  --display: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --sans: Inter, "Helvetica Neue", Arial, sans-serif;
  --mono: "SFMono-Regular", "Roboto Mono", Consolas, "Liberation Mono", monospace;
  --container: 1760px;
  --progression-control: 72px;
  --radius: 0;
  --space-1: clamp(0.5rem, 0.7vw, 0.75rem);
  --space-2: clamp(0.75rem, 1vw, 1rem);
  --space-3: clamp(1rem, 1.4vw, 1.5rem);
  --space-4: clamp(1.5rem, 2vw, 2.25rem);
  --space-5: clamp(2rem, 3vw, 3.5rem);
  --section-pad: clamp(1rem, 2.2vw, 2.5rem);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 0;
  color-scheme: light;
  background: var(--ink);
}

html.is-positioning {
  scroll-behavior: auto;
  scroll-snap-type: none;
}

html.is-positioning body { visibility: hidden; }

body {
  margin: 0;
  color: var(--text);
  background: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.45;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

main { display: block; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p { margin-top: 0; }

h1, h2 {
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: -0.055em;
  text-transform: uppercase;
}

h3, h4 {
  font-weight: 850;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

h1 { font-size: clamp(4.2rem, 10vw, 11rem); line-height: 0.76; }
h2 { font-size: clamp(2.4rem, 4.9vw, 5.4rem); line-height: 0.88; }
h3 { font-size: clamp(0.88rem, 1vw, 1.05rem); line-height: 1.2; }

::selection { background: var(--accent); color: var(--accent-contrast); }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.7rem 1rem;
  transform: translateY(-160%);
  background: var(--cream);
  color: var(--ink);
  font-family: var(--mono);
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
}

.skip-link:focus { transform: none; }

.container {
  width: min(var(--container), calc(100% - clamp(2rem, 5vw, 6rem)));
  margin-inline: auto;
}

.section {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: var(--section-pad) 0;
  isolation: isolate;
  overflow: visible;
}

.eyebrow,
.scene-meta,
.build-label,
.build-progress-path,
.build-skills-title,
.build-skill-group-title,
.level-one-case-label,
.level-one-support,
.level-one-result-title,
.level-one-result-support {
  font-family: var(--mono);
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.eyebrow {
  margin-bottom: 0.8rem;
  color: var(--subtle);
  font-size: clamp(0.75rem, 0.85vw, 0.95rem);
}

.mono { font-family: var(--mono); }
.muted { color: var(--subtle); }

.reveal-ready {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 420ms ease, transform 420ms ease;
}
.reveal-ready.is-visible { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .container { width: min(100% - 1.5rem, var(--container)); }
  .section { min-height: 100svh; padding: 1rem 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}