/* STSoft service sites. One stylesheet, per-site hue set via --h on <html>. */
:root {
  --h: 262;

  /* neutral ramp, tinted toward the site hue */
  --bg: oklch(98.5% 0.004 var(--h));
  --surface: oklch(96.2% 0.007 var(--h));
  --line: oklch(87% 0.01 var(--h));
  --ink: oklch(21% 0.018 var(--h));
  --ink-2: oklch(43% 0.016 var(--h));

  /* accent */
  --accent: oklch(48% 0.16 var(--h));
  --accent-hover: oklch(42% 0.15 var(--h));
  --accent-ink: oklch(42% 0.15 var(--h));
  --accent-soft: oklch(94% 0.03 var(--h));
  --on-accent: oklch(98.5% 0.006 var(--h));

  /* trace panel (dark instrument surface) */
  --panel: oklch(19% 0.02 var(--h));
  --panel-line: oklch(30% 0.02 var(--h));
  --panel-text: oklch(91% 0.01 var(--h));
  --panel-muted: oklch(68% 0.015 var(--h));
  --tag-ai: oklch(78% 0.12 var(--h));
  --tag-flag: oklch(82% 0.14 75);
  --tag-done: oklch(80% 0.13 150);

  /* type */
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --fs-sm: 0.875rem;
  --fs-base: 1.0625rem;
  --fs-md: 1.25rem;
  --fs-lg: 1.5625rem;
  --fs-xl: clamp(1.75rem, 1.6vw + 1.1rem, 2.5rem);
  --fs-display: clamp(2.25rem, 3.4vw + 1.25rem, 4.75rem);

  /* space (4pt) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px;
  --s8: 32px; --s12: 48px; --s16: 64px; --s24: 96px; --s32: 128px;

  --nav-h: 64px;
  --ease: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + var(--s6)); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; line-height: 1.1; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }

.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--s4); }
@media (min-width: 720px) { .wrap { padding-inline: var(--s8); } }

h2 {
  font-size: var(--fs-xl);
  font-stretch: 112%;
  font-weight: 700;
  letter-spacing: -0.02em;
}
h3 { font-size: var(--fs-md); font-weight: 650; letter-spacing: -0.01em; }

/* ---------- controls ---------- */
.skip {
  position: absolute; left: var(--s4); top: -100px;
  background: var(--ink); color: var(--bg); padding: var(--s2) var(--s4); z-index: 40;
}
.skip:focus { top: var(--s2); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: var(--s3) var(--s6);
  background: var(--accent); color: var(--on-accent);
  font-weight: 600; text-decoration: none;
  transition: transform 200ms var(--ease), background-color 200ms var(--ease);
}
.btn:hover { background: var(--accent-hover); transform: translateY(-2px); }
.btn:active { transform: translateY(1px); transition-duration: 100ms; }
.btn--inverse { background: var(--on-accent); color: var(--accent-ink); }
.btn--inverse:hover { background: var(--bg); }

.link {
  color: var(--accent-ink); font-weight: 600; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
  padding-block: var(--s1);
  transition: background-size 250ms var(--ease);
}
.link:hover { background-size: 100% 2px; }

:is(a, button):focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.cta :is(a, button):focus-visible { outline-color: var(--on-accent); }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); }
.brand { display: flex; align-items: baseline; gap: var(--s2); text-decoration: none; min-height: 44px; align-items: center; }
.brand strong { font-stretch: 118%; font-weight: 750; font-size: var(--fs-md); letter-spacing: -0.02em; }
.brand span { color: var(--ink-2); font-size: var(--fs-sm); }
.nav__links { display: flex; gap: var(--s6); }
.nav__links a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--ink-2); font-size: var(--fs-sm); font-weight: 500; text-decoration: none;
  transition: color 200ms var(--ease);
}
.nav__links a:hover { color: var(--ink); }
@media (max-width: 760px) {
  .nav__links li:not(:last-child) { display: none; }
  .nav__links a { color: var(--accent-ink); font-weight: 600; }
}

/* ---------- hero ---------- */
.hero {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--s8);
  row-gap: var(--s12);
  align-content: center;
  min-height: calc(100dvh - var(--nav-h));
  padding-block: var(--s16) var(--s24);
}
.hero__title {
  grid-column: 1 / -1;
  font-size: var(--fs-display);
  font-stretch: 118%;
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.04;
  max-width: 20ch;
}
.hero__body { grid-column: 1 / 6; display: flex; flex-direction: column; gap: var(--s8); align-self: start; }
.hero__sub { font-size: var(--fs-md); color: var(--ink-2); max-width: 36ch; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s6); }
.trace { grid-column: 6 / -1; margin: 0; }

@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-block: var(--s12) var(--s16); row-gap: var(--s8); }
  .hero__title { font-stretch: 100%; line-height: 1.08; }
  .hero__body, .trace { grid-column: 1 / -1; }
}

/* ---------- trace panel ---------- */
.trace { background: var(--panel); color: var(--panel-text); font-family: var(--mono); font-size: var(--fs-sm); }
.trace__head {
  display: flex; justify-content: space-between; gap: var(--s4);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--panel-line);
  color: var(--panel-muted);
}
.trace__live { color: var(--tag-ai); }
.trace__live.is-done { color: var(--tag-done); }
.trace__log { padding: var(--s3) 0; counter-reset: line; }
.trace__line {
  display: grid; grid-template-columns: 64px 1fr; gap: var(--s3);
  padding: var(--s1) var(--s4);
  line-height: 1.55;
}
.trace__tag { color: var(--panel-muted); }
.trace__line--ai .trace__tag { color: var(--tag-ai); }
.trace__line--human .trace__tag { color: var(--panel-text); font-weight: 500; }
.trace__line--warn .trace__tag, .trace__line--warn .trace__text { color: var(--tag-flag); }
.trace__line--ok .trace__tag, .trace__line--ok .trace__text { color: var(--tag-done); }
.trace__note { padding: var(--s3) var(--s4); border-top: 1px solid var(--panel-line); color: var(--panel-muted); font-size: 0.75rem; }

/* sequential reveal, armed only by JS so content is visible without it */
.trace.is-armed .trace__line { opacity: 0; transform: translateY(4px); }
.trace.is-armed .trace__line.is-on {
  opacity: 1; transform: none;
  transition: opacity 300ms var(--ease), transform 300ms var(--ease-expo);
}
.trace.is-armed .trace__line.is-current .trace__text::after {
  content: ""; display: inline-block; width: 0.55em; height: 1.1em;
  margin-left: var(--s1); vertical-align: -0.2em;
  background: currentColor; animation: caret 1s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

/* ---------- services ---------- */
.services { background: var(--surface); border-block: 1px solid var(--line); padding-block: var(--s24); }
.services__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s12); }
.services__lead { display: flex; flex-direction: column; gap: var(--s4); align-self: start; position: sticky; top: calc(var(--nav-h) + var(--s8)); }
.services__lead p { color: var(--ink-2); max-width: 34ch; }
.services__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s8); }
.svc { display: flex; flex-direction: column; gap: var(--s2); padding-block: var(--s6) var(--s8); border-top: 1px solid var(--line); }
.svc p { color: var(--ink-2); }
@media (max-width: 900px) {
  .services { padding-block: var(--s16); }
  .services__grid { grid-template-columns: 1fr; gap: var(--s8); }
  .services__lead { position: static; }
}
@media (max-width: 600px) { .services__list { grid-template-columns: 1fr; } }

/* ---------- process ---------- */
.process { padding-block: var(--s24); display: flex; flex-direction: column; gap: var(--s12); }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s8); counter-reset: step; }
.step { display: flex; flex-direction: column; gap: var(--s3); padding-top: var(--s4); border-top: 2px solid var(--ink); }
.step__n { font-family: var(--mono); font-size: var(--fs-sm); color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.step h3 { font-size: var(--fs-lg); font-stretch: 112%; }
.step p { color: var(--ink-2); }
@media (max-width: 900px) {
  .process { padding-block: var(--s16); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s12); }
}
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* ---------- AI / people split ---------- */
.split { padding-block: 0 var(--s24); display: flex; flex-direction: column; gap: var(--s8); }
.split__scroll { overflow-x: auto; }
.split__table { width: 100%; border-collapse: collapse; }
.split__table th {
  text-align: left; padding: var(--s3) var(--s4) var(--s3) 0;
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2);
  border-bottom: 2px solid var(--ink);
}
.split__table th:last-child { color: var(--accent-ink); }
.split__table td {
  width: 50%; vertical-align: top;
  padding: var(--s4) var(--s6) var(--s4) 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
}
.split__table td:last-child { color: var(--ink); font-weight: 550; }
@media (max-width: 900px) { .split { padding-bottom: var(--s16); } }

/* ---------- engagement ---------- */
.engage { padding-block: 0 var(--s24); display: flex; flex-direction: column; gap: var(--s8); }
.plans { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); }
.plan { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s6) 0; border-top: 1px solid var(--line); }
.plan p:not(.plan__term) { color: var(--ink-2); }
.plan__term { font-family: var(--mono); font-size: var(--fs-sm); color: var(--ink-2); }
.plan--lead { background: var(--accent-soft); padding: var(--s8); border-top: 2px solid var(--accent); }
.plan--lead h3 { font-size: var(--fs-lg); font-stretch: 112%; }
.plan--lead .plan__term { color: var(--accent-ink); }
.plan--lead .link { align-self: flex-start; margin-top: auto; padding-top: var(--s4); }
@media (max-width: 900px) {
  .engage { padding-bottom: var(--s16); }
  .plans { grid-template-columns: 1fr; }
  .plan--lead { padding: var(--s6); }
}

/* ---------- closing CTA (the one drenched band) ---------- */
.cta { background: var(--accent); color: var(--on-accent); padding-block: var(--s24); }
.cta__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s12); align-items: end; }
.cta__title { font-size: clamp(2.25rem, 2.6vw + 1.25rem, 4rem); font-stretch: 118%; font-weight: 750; letter-spacing: -0.03em; }
.cta__side { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s6); }
.cta__side .btn { overflow-wrap: anywhere; text-align: center; }
@media (max-width: 900px) {
  .cta { padding-block: var(--s16); }
  .cta__inner { grid-template-columns: 1fr; gap: var(--s8); }
  .cta__title { font-stretch: 100%; }
}

/* ---------- footer ---------- */
.foot { padding-block: var(--s12); }
.foot__inner { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s12); align-items: center; justify-content: space-between; font-size: var(--fs-sm); color: var(--ink-2); }
.foot__brand strong { color: var(--ink); font-stretch: 118%; }
.foot__family { display: flex; flex-wrap: wrap; gap: var(--s6); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0ms !important; animation: none !important; }
}
.foot__family [aria-current] { color: var(--ink); font-weight: 600; }

/* ---------- hub: service lines ---------- */
.lines { display: flex; flex-direction: column; gap: var(--s12); }
.lines__lead { display: flex; flex-direction: column; gap: var(--s4); max-width: 56ch; }
.lines__lead p { color: var(--ink-2); }
.line {
  /* --h is set per row; re-derive accent tokens so they pick it up */
  --accent: oklch(48% 0.16 var(--h));
  --accent-ink: oklch(42% 0.15 var(--h));
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 2fr);
  gap: var(--s8); align-items: start;
  padding-block: var(--s8);
  border-top: 2px solid var(--accent);
}
.line__name { font-size: var(--fs-xl); font-stretch: 118%; font-weight: 750; letter-spacing: -0.02em; color: var(--accent-ink); }
.line__go { justify-self: end; }
.line__body { display: flex; flex-direction: column; gap: var(--s2); }
.line__head { font-size: var(--fs-md); font-weight: 600; }
.line__body p:not(.line__head) { color: var(--ink-2); max-width: 60ch; }
.foot__home { text-decoration: none; }
.foot__home:hover strong { color: var(--accent-ink); }
@media (max-width: 900px) {
  .line { grid-template-columns: 1fr; gap: var(--s4); padding-block: var(--s6); }
  .line__go { justify-self: start; }
}