:root {
  --paper: #F3F5F2;
  --ink: #16262B;
  --muted: #56676B;
  --rule: #CDD5D2;
  --fail: #C8323A;
  --pass: #1E7F55;
  --pass-bright: #5FD39C;

  --font: "Schibsted Grotesk", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  --measure: 38rem;
  --page: 72rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }

a { color: inherit; }

code {
  font-family: var(--mono);
  font-size: 0.88em;
}

:focus-visible {
  outline: 3px solid var(--pass);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  padding: 0.5rem 0.75rem;
  background: var(--ink);
  color: var(--paper);
  z-index: 10;
}
.skip-link:focus { top: 1rem; }

/* Header */

.site-header {
  max-width: var(--page);
  margin: 0 auto;
  padding: 1.5rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.wordmark svg {
  width: 2rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
}

.site-header nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-size: 0.95rem;
}
.site-header nav a:not(.button) {
  text-decoration: none;
  color: var(--muted);
}
.site-header nav a:not(.button):hover { color: var(--ink); }

@media (max-width: 40rem) {
  .site-header nav a:not(.button) { display: none; }
}

/* Buttons and links */

.button {
  display: inline-block;
  padding: 0.8rem 1.35rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
}
.button:hover { background: #24393F; }

.button-small {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
}

.button-light {
  background: var(--paper);
  color: var(--ink);
}
.button-light:hover { background: #FFFFFF; }

.text-link {
  font-weight: 500;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
}

/* Hero */

.hero {
  max-width: var(--page);
  margin: 0 auto;
  padding: clamp(3rem, 9vw, 7rem) var(--gutter) clamp(3rem, 6vw, 5rem);
}

.hero h1 {
  max-width: 14ch;
  font-size: clamp(2.75rem, 7.5vw, 5.75rem);
  line-height: 0.98;
  font-weight: 800;
  letter-spacing: -0.035em;
}

.lede {
  max-width: var(--measure);
  margin-top: 1.75rem;
  font-size: clamp(1.125rem, 1.6vw, 1.3rem);
  color: var(--muted);
}

.hero-actions {
  margin-top: 2.25rem;
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex-wrap: wrap;
}

/* The run timeline: each event draws the segment that leads to the next one,
   coloured by the state the run is in after that event. */

.run {
  margin: clamp(4rem, 9vw, 6.5rem) 0 0;
}

.run figcaption {
  font-size: 0.95rem;
  color: var(--muted);
  margin-bottom: 2rem;
}

.run-events {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.event {
  --state: var(--muted);
  position: relative;
  padding: 2.25rem 1.5rem 0 0;
}
.event-fail { --state: var(--fail); }
.event-pass { --state: var(--pass); }

.event::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: var(--paper);
  border: 3px solid var(--state);
}
.event-pass::after { background: var(--state); }

.event:not(:last-child)::before {
  content: "";
  position: absolute;
  top: calc(0.45rem - 1.5px);
  left: 0.45rem;
  width: 100%;
  height: 3px;
  background: var(--state);
  transform-origin: left center;
}

.event time {
  display: block;
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--muted);
}

.event-title {
  margin-top: 0.35rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--state);
}
.event-neutral .event-title { color: var(--ink); }

.event-detail {
  margin-top: 0.35rem;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--muted);
}

@media (max-width: 52rem) {
  .run-events { grid-template-columns: 1fr; }

  .event { padding: 0 0 2rem 2.25rem; }
  .event:last-child { padding-bottom: 0; }

  .event::after { top: 0.2rem; }

  .event:not(:last-child)::before {
    top: 0.65rem;
    left: calc(0.45rem - 1.5px);
    width: 3px;
    height: 100%;
    transform-origin: center top;
  }

  .event time { display: inline; margin-right: 0.5rem; }
  .event-title { display: inline; }
}

/* One orchestrated moment: the run plays out once on load. */

@media (prefers-reduced-motion: no-preference) {
  .event > *,
  .event::after {
    opacity: 0;
    animation: appear 0.4s ease-out forwards;
    animation-delay: calc(var(--i) * 0.45s + 0.3s);
  }
  .event:not(:last-child)::before {
    transform: scaleX(0);
    animation: draw-across 0.45s ease-in-out forwards;
    animation-delay: calc(var(--i) * 0.45s + 0.45s);
  }
  .event:nth-child(1) { --i: 0; }
  .event:nth-child(2) { --i: 1; }
  .event:nth-child(3) { --i: 2; }
  .event:nth-child(4) { --i: 3; }
  .event:nth-child(5) { --i: 4; }

  @media (max-width: 52rem) {
    .event:not(:last-child)::before {
      transform: scaleY(0);
      animation-name: draw-down;
    }
  }
}

@keyframes appear { to { opacity: 1; } }
@keyframes draw-across { to { transform: scaleX(1); } }
@keyframes draw-down { to { transform: scaleY(1); } }

/* Sections */

.section {
  max-width: var(--page);
  margin: 0 auto;
  padding: clamp(3.5rem, 8vw, 6rem) var(--gutter);
  border-top: 1px solid var(--rule);
}

.section h2 {
  max-width: 20ch;
  font-size: clamp(1.9rem, 3.8vw, 2.9rem);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.section h3 {
  font-size: 1.2rem;
  line-height: 1.3;
  font-weight: 700;
}

.section p,
.section li {
  color: var(--muted);
}

.jobs {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}
.job p { margin-top: 0.6rem; max-width: var(--measure); }

.steps {
  list-style: none;
  counter-reset: step;
  margin: 3rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem 4rem;
}
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  align-content: start;
}
.steps li::before {
  content: counter(step);
  grid-row: span 2;
  font-weight: 800;
  font-size: 1.2rem;
  line-height: 1.3;
  color: var(--pass);
}
.steps h3 { color: var(--ink); }
.steps p { margin-top: 0.5rem; }

.promises {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  max-width: 44rem;
  font-size: 1.125rem;
}
.promises strong {
  color: var(--ink);
  font-weight: 700;
}

@media (max-width: 52rem) {
  .jobs, .steps { grid-template-columns: 1fr; }
}

/* Contact */

.contact {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(4rem, 9vw, 7rem) var(--gutter);
}
.contact-inner {
  max-width: calc(var(--page) - 2 * var(--gutter));
  margin: 0 auto;
}
.contact h2 {
  font-size: clamp(2.1rem, 4.5vw, 3.4rem);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.contact p {
  max-width: var(--measure);
  margin-top: 1.25rem;
  margin-bottom: 2.25rem;
  font-size: 1.15rem;
  color: #B9C6C4;
}
.contact :focus-visible { outline-color: var(--pass-bright); }

/* Footer */

.site-footer {
  max-width: var(--page);
  margin: 0 auto;
  padding: 2rem var(--gutter);
  font-size: 0.9rem;
  color: var(--muted);
}

/* The thread: one line running down the page margin, red at the top and green
   at the end, like the run timeline. Each section draws its own stretch, in
   viewport units, so the pieces meet at the same x across section edges. */

main > section {
  position: relative;
  isolation: isolate;
}

body { overflow-x: clip; }

.thread {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
  overflow: visible;
}
.thread path {
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

@media (min-width: 75rem) {
  .thread { display: block; }
}

/* Start the thread at the top edge of the page, behind the header. */
.hero .thread {
  top: -5.5rem;
  height: calc(100% + 5.5rem);
}