/* Cronwork. One stylesheet for the homepage and the blog.
   The accent is kept for things that are live or clickable (the schedule's
   running state, the main button) so it keeps meaning something. */

:root {
  --paper: #F2F3EE;
  --paper-2: #E7E9E1;
  --card: #FAFBF7;
  --ink: #16191A;
  --ink-2: #4B524D;
  --ink-3: #7A817B;
  --line: #D4D7CD;
  --accent: #1E7A4C;
  --accent-ink: #FFFFFF;
  --accent-soft: #D5E8DB;
  --band: #16191A;
  --band-ink: #F2F3EE;

  --f-display: "Archivo", system-ui, sans-serif;
  --f-body: "Instrument Sans", system-ui, sans-serif;
  --f-mono: "Martian Mono", ui-monospace, monospace;

  --max: 1200px;
  --gut: clamp(16px, 4vw, 40px);
  --sec: clamp(72px, 11vw, 140px);
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #111412;
    --paper-2: #181C19;
    --card: #1A1E1B;
    --ink: #E9ECE5;
    --ink-2: #AAB1AA;
    --ink-3: #7F877F;
    --line: #2C332E;
    --accent: #5BCB8C;
    --accent-ink: #0D130F;
    --accent-soft: #1D3527;
    --band: #E9ECE5;
    --band-ink: #111412;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #111412;
  --paper-2: #181C19;
  --card: #1A1E1B;
  --ink: #E9ECE5;
  --ink-2: #AAB1AA;
  --ink-3: #7F877F;
  --line: #2C332E;
  --accent: #5BCB8C;
  --accent-ink: #0D130F;
  --accent-soft: #1D3527;
  --band: #E9ECE5;
  --band-ink: #111412;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
code { font-family: var(--f-mono); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--accent-soft); }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: var(--r-sm);
}
.skip:focus { top: 12px; }

/* ---------- type ---------- */

.h2 {
  font: 700 clamp(2rem, 4.2vw, 3.1rem)/1.04 var(--f-display);
  font-stretch: 112%;
  letter-spacing: -0.025em;
}
.h3 {
  font: 650 1.3rem/1.2 var(--f-display);
  font-stretch: 106%;
  letter-spacing: -0.01em;
}
.lede { color: var(--ink-2); font-size: 1.1rem; max-width: 34ch; margin-top: 16px; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; min-height: 42px; padding: 0 18px;
  border-radius: 999px; border: 1px solid transparent;
  font: 600 0.95rem/1 var(--f-body); text-decoration: none; white-space: nowrap;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn--lg { min-height: 52px; padding: 0 26px; font-size: 1rem; }
.btn--solid { background: var(--accent); color: var(--accent-ink); }
.btn--solid:hover { background: var(--ink); color: var(--paper); }
.btn--ghost { border-color: var(--line); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--light { background: var(--band-ink); color: var(--band); }
.btn--light:hover { background: var(--accent); color: var(--accent-ink); }

/* ---------- nav ---------- */

.nav {
  position: sticky; top: 0; z-index: 20;
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.nav[data-scrolled="true"] { border-bottom-color: var(--line); }
.nav__in { display: flex; align-items: center; gap: 28px; height: 68px; }
.nav__links { display: flex; gap: 26px; margin-left: auto; }
.nav__links a { color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: 0.95rem; }
.nav__links a:hover { color: var(--ink); }
.nav__toggle { display: none; }

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand__logo { display: block; height: 26px; width: auto; }
.brand--sm .brand__logo { height: 22px; }

@media (max-width: 860px) {
  .nav__in { gap: 12px; }
  .nav__cta { margin-left: auto; min-height: 38px; padding: 0 14px; }
  .nav__toggle {
    display: inline-grid; place-items: center;
    width: 42px; height: 42px; border-radius: 999px;
    border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer;
  }
  .nav__bars, .nav__bars::before, .nav__bars::after {
    display: block; width: 16px; height: 1.6px; background: currentColor; border-radius: 2px;
    transition: transform .2s, opacity .2s;
  }
  .nav__bars { position: relative; }
  .nav__bars::before, .nav__bars::after { content: ""; position: absolute; left: 0; }
  .nav__bars::before { top: -5px; }
  .nav__bars::after { top: 5px; }
  .nav[data-open="true"] .nav__bars { background: transparent; }
  .nav[data-open="true"] .nav__bars::before { transform: translateY(5px) rotate(45deg); }
  .nav[data-open="true"] .nav__bars::after { transform: translateY(-5px) rotate(-45deg); }

  .nav__links {
    display: none;
    position: absolute; left: 0; right: 0; top: 68px;
    flex-direction: column; gap: 0; margin: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: 8px var(--gut) 16px;
    box-shadow: 0 24px 40px -28px rgba(22, 25, 26, .35);
  }
  .nav[data-open="true"] .nav__links { display: flex; }
  .nav__links a { padding: 12px 0; font-size: 1.05rem; border-bottom: 1px solid var(--line); }
  .nav__links a:last-child { border-bottom: 0; }
}

/* ---------- hero ---------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding-top: clamp(48px, 8vw, 110px);
  padding-bottom: clamp(56px, 8vw, 110px);
}
.hero__title {
  font: 800 clamp(2.9rem, 7.4vw, 6.1rem)/0.94 var(--f-display);
  font-stretch: 122%;
  letter-spacing: -0.045em;
  max-width: 9ch;
}
.hero__lede { margin-top: 28px; font-size: clamp(1.08rem, 1.5vw, 1.22rem); color: var(--ink-2); max-width: 44ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero__note { margin-top: 16px; font-size: 0.9rem; color: var(--ink-3); }

/* The schedule panel. A crontab, set like a terminal but on paper. */
.sched {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 1px 0 var(--line), 0 30px 60px -40px rgba(22, 25, 26, .35);
  overflow: hidden;
}
.sched__bar {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
  font: 500 0.78rem/1 var(--f-mono); color: var(--ink-3);
}
.sched__dots { display: inline-flex; gap: 6px; }
.sched__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.sched__clock { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.sched__rows { padding: 6px 0; }
.job {
  display: grid;
  grid-template-columns: 7.4em minmax(0, 1fr) auto;
  gap: 14px; align-items: center;
  padding: 13px 18px;
  border-left: 3px solid transparent;
  transition: background-color .3s, border-color .3s;
}
.job + .job { border-top: 1px dashed var(--line); }
.job__cron { font-size: 0.74rem; color: var(--ink-3); white-space: nowrap; font-stretch: 88%; }
.job__name { font-weight: 500; font-size: 0.98rem; }
.job__state {
  font: 500 0.72rem/1 var(--f-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  padding: 6px 9px; border-radius: 999px;
  white-space: nowrap;
}
.job__state::before { content: "waiting"; }
.job[data-state="running"] { background: var(--accent-soft); border-left-color: var(--accent); }
.job[data-state="running"] .job__state { color: var(--accent); }
.job[data-state="running"] .job__state::before { content: "running"; }
.job[data-state="running"] .job__state::after {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 7px;
  border-radius: 50%; background: currentColor; vertical-align: 1px;
  animation: pulse 1s ease-in-out infinite;
}
.job[data-state="done"] .job__state { color: var(--ink); background: var(--paper-2); }
.job[data-state="done"] .job__state::before { content: "done " attr(data-at); }
.sched__foot {
  padding: 14px 18px; border-top: 1px solid var(--line);
  font-size: 0.82rem; color: var(--ink-3);
}
.sched__foot [data-count] { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

@keyframes pulse { 50% { opacity: .25; } }

/* ---------- hero grid, circuit, load sequence ---------- */

/* One dot grid, reused wherever the page wants to feel like a canvas:
   hero, workflow diagram, CTA band. 24px pitch. */
.dotgrid, .cta__grid, .flow {
  --dot: color-mix(in srgb, var(--ink) 16%, transparent);
  background-image: radial-gradient(circle at 1px 1px, var(--dot) 1px, transparent 1.4px);
  background-size: 24px 24px;
}

.hero-shell { position: relative; overflow: hidden; }
/* The page grid: one fixed layer behind the whole site, so the cursor
   spotlight has something to light up everywhere. Faint dots every 32px with
   a small cross every fourth one, drawn as a mask over --ink so dark mode
   follows. It fades toward the middle of the screen, where the text sits,
   and stays clearer at the edges; the spotlight shows the full grid anywhere. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--ink);
  opacity: 0.2;
  --tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cg fill='black' fill-opacity='.5'%3E%3Ccircle cx='1' cy='1' r='1'/%3E%3Ccircle cx='33' cy='1' r='1'/%3E%3Ccircle cx='65' cy='1' r='1'/%3E%3Ccircle cx='97' cy='1' r='1'/%3E%3Ccircle cx='1' cy='33' r='1'/%3E%3Ccircle cx='33' cy='33' r='1'/%3E%3Ccircle cx='65' cy='33' r='1'/%3E%3Ccircle cx='97' cy='33' r='1'/%3E%3Ccircle cx='1' cy='65' r='1'/%3E%3Ccircle cx='33' cy='65' r='1'/%3E%3Ccircle cx='97' cy='65' r='1'/%3E%3Ccircle cx='1' cy='97' r='1'/%3E%3Ccircle cx='33' cy='97' r='1'/%3E%3Ccircle cx='65' cy='97' r='1'/%3E%3Ccircle cx='97' cy='97' r='1'/%3E%3C/g%3E%3Cpath d='M60.5 65h9M65 60.5v9' stroke='black' stroke-width='1.2'/%3E%3C/svg%3E");
  --fade: radial-gradient(ellipse 55% 65% at 50% 50%, rgba(0,0,0,.35), #000);
  -webkit-mask-image: var(--tile), var(--fade);
  -webkit-mask-size: 128px 128px, 100% 100%;
  -webkit-mask-composite: source-in;
  mask-image: var(--tile), var(--fade);
  mask-size: 128px 128px, 100% 100%;
  mask-composite: intersect;
}
.hero { position: relative; }

.hero__art { position: relative; }
.net {
  position: absolute; inset: -72px -56px;
  width: calc(100% + 112px); height: calc(100% + 144px);
  z-index: 0; pointer-events: none;
}
.net__lines path { fill: none; stroke: var(--line); stroke-width: 1.5; stroke-linejoin: round; }
.net__nodes circle { fill: var(--paper); stroke: var(--ink-3); stroke-width: 1.5; }
.net__packets circle { fill: var(--accent); }
.sched { position: relative; z-index: 1; }

/* Load sequence: the headline rises word by word, then the rest settles in.
   It runs once; nothing else on the page moves without a reason. */
.hero__title .w {
  display: inline-block; overflow: hidden; vertical-align: top;
  padding-bottom: 0.12em; margin-bottom: -0.12em;
}
.hero__title .w > span {
  display: inline-block;
  transform: translateY(108%);
  animation: rise .95s cubic-bezier(.2, .75, .15, 1) forwards;
  animation-delay: calc(var(--i) * 90ms + 80ms);
}
.hero__lede, .hero__actions, .hero__note {
  opacity: 0; animation: settle .9s cubic-bezier(.2, .75, .15, 1) forwards;
}
.hero__lede { animation-delay: .5s; }
.hero__actions { animation-delay: .6s; }
.hero__note { animation-delay: .7s; }
.hero__art { opacity: 0; animation: settle 1.1s cubic-bezier(.2, .75, .15, 1) .45s forwards; }

@keyframes rise { to { transform: none; } }
@keyframes settle {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* Scroll reveals. Hidden only when JS is running, so no-JS still shows all. */
.js [data-reveal] {
  opacity: 0; transform: translateY(22px);
  transition: opacity .9s cubic-bezier(.2, .75, .15, 1), transform .9s cubic-bezier(.2, .75, .15, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Workflow canvas under the services intro. */
.flow {
  margin-top: 36px; max-width: 360px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background-color: var(--card);
  padding: 18px;
}
.flow svg { display: block; width: 100%; height: auto; overflow: visible; }
.flow__edge { fill: none; stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 4 4; stroke-linejoin: round; }
.flow__node rect { fill: var(--card); stroke: var(--ink); stroke-width: 1.3; }
.flow__node text { font: 500 13.5px var(--f-body); fill: var(--ink); }
.flow__dot { fill: var(--paper-2); stroke: var(--ink-3); stroke-width: 1.3; }
.flow__node--ai rect { stroke: var(--accent); stroke-width: 2; }
.flow__node--ai .flow__dot { fill: var(--accent); stroke: var(--accent); }
.flow__packets circle { fill: var(--accent); }

/* ---------- tools strip ---------- */

.tools { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper-2); }
.tools__in { display: flex; align-items: center; gap: 32px; padding-top: 22px; padding-bottom: 22px; }
.tools__label { flex: none; font-size: 0.9rem; color: var(--ink-3); max-width: 14ch; line-height: 1.35; }
/* Tool logos in their own brand colours. Black marks use the ink colour so
   they flip with dark mode. Logo paths: Simple Icons (CC0), assets/logos/. */
.tools__marquee { flex: 1; min-width: 0; padding: 4px 0; }
.tools__marquee .marquee__track { gap: 40px; animation-duration: 45s; }
.tool {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  font: 600 1.02rem/1 var(--f-display); font-stretch: 106%; letter-spacing: -0.01em;
  color: var(--ink-2);
  transition: color .3s;
}
.tool svg { width: 22px; height: 22px; fill: var(--brand, var(--ink)); transition: transform .4s cubic-bezier(.2, .75, .15, 1); }
/* Multi-colour marks (Vapi, GoHighLevel) carry fills on their own paths,
   which beat the inherited brand fill above. */
.tool img { width: 22px; height: 22px; border-radius: 5px; transition: transform .4s cubic-bezier(.2, .75, .15, 1); }
.tool:hover img { transform: scale(1.15); }
.tool:hover { color: var(--ink); }
.tool:hover svg { transform: scale(1.15); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tool[style*="#4A154B"] svg { fill: #E9ECE5; }
}

/* ---------- sections ---------- */

.section { padding-top: var(--sec); padding-bottom: 0; }
.head { max-width: 640px; margin-bottom: clamp(40px, 5vw, 64px); }
.head .lede { max-width: 46ch; }

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.split__side { position: sticky; top: 108px; }

/* services: a ruled list, not a grid of identical cards */
/* services: cards with a node-style icon */
.svc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.svc__item {
  position: relative; overflow: hidden;
  padding: 28px 26px 26px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: transform .45s cubic-bezier(.2, .75, .15, 1), border-color .3s, box-shadow .45s;
}
.svc__item::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .6s cubic-bezier(.2, .75, .15, 1);
}
.svc__item:hover { transform: translateY(-4px); border-color: var(--ink-3); box-shadow: 0 24px 40px -30px rgba(22, 25, 26, .45); }
.svc__item:hover::after { transform: scaleX(1); }
.svc__item p { color: var(--ink-2); font-size: 0.97rem; margin-top: 10px; }
.svc__item .chips { margin-top: 18px; }
.svc__icon {
  display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 22px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--paper);
}
.svc__icon svg { width: 30px; height: 30px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.svc__icon .i-acc { fill: var(--accent); stroke: none; transition: transform .5s cubic-bezier(.2, .75, .15, 1); transform-box: fill-box; transform-origin: center; }
.svc__item:hover .i-acc { transform: scale(1.6); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li {
  font-size: 0.82rem; font-weight: 500; color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px;
}

/* ---------- use cases: two rows of cards sliding sideways ---------- */

.usecases .head { margin-bottom: 40px; }
.marquee {
  overflow: hidden;
  padding: 10px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee + .marquee { margin-top: 6px; }
.marquee__track {
  display: flex; gap: 16px; width: max-content;
  animation: slide 80s linear infinite;
}
.marquee--rev .marquee__track { animation-duration: 90s; animation-direction: reverse; }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(calc(-50% - 8px)); } }

.uc {
  flex: none; width: 300px;
  padding: 22px 22px 24px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: border-color .3s, transform .45s cubic-bezier(.2, .75, .15, 1);
}
.uc:hover { border-color: var(--ink-3); transform: translateY(-3px); }
.uc__dept { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--ink-3); font-weight: 500; }
.uc__dept::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.uc__title {
  margin-top: 8px;
  font: 650 1.15rem/1.2 var(--f-display); font-stretch: 106%; letter-spacing: -0.01em;
}
/* The job as a node chain: trigger, the step that thinks, where it lands. */
.uc__chain { position: relative; display: grid; gap: 8px; margin-top: 18px; }
.uc__chain::before {
  content: ""; position: absolute; left: 14px; top: 16px; bottom: 16px;
  border-left: 1.5px dashed var(--ink-3);
}
.uc__chain::after {
  content: ""; position: absolute; left: 11px; top: 12px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  opacity: 0;
}
.uc:hover .uc__chain::after { animation: descend 1.8s cubic-bezier(.45, 0, .55, 1) infinite; }
.uc__chain li {
  position: relative;
  padding: 7px 12px 7px 34px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  font-size: 0.88rem; font-weight: 500;
}
.uc__chain li::before {
  content: ""; position: absolute; left: 10px; top: 50%;
  width: 10px; height: 10px; margin-top: -5px; border-radius: 50%;
  background: var(--card); border: 1.8px solid var(--ink);
}
.uc__chain li.is-ai { border-color: var(--accent); }
.uc__chain li.is-ai::before { background: var(--accent); border-color: var(--accent); }
@keyframes descend {
  0% { top: 12px; opacity: 0; }
  12% { opacity: 1; }
  85% { opacity: 1; }
  100% { top: calc(100% - 20px); opacity: 0; }
}

/* ---------- process ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  position: relative;
  padding-top: 52px;
}
/* The rail: a trace with one node per step, filled in when it scrolls in. */
.steps::before, .steps::after {
  content: ""; position: absolute; left: 7px; right: 0; top: 7px; height: 2px;
  background: var(--line);
}
.steps::after {
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.6s cubic-bezier(.45, 0, .2, 1) .2s;
}
.steps.is-rail::after { transform: scaleX(1); }
.step::before {
  content: ""; position: absolute; top: -52px; left: 0; z-index: 1;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--ink-3);
  transition: background-color .4s, border-color .4s, box-shadow .4s;
  transition-delay: calc(var(--i, 0) * 420ms + 250ms);
}
.step + .step::before { left: clamp(16px, 2vw, 28px); }
.steps.is-rail .step::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 5px var(--accent-soft); }
.step {
  position: relative;
  padding: 0 clamp(16px, 2vw, 28px) 0 0;
}
.step + .step { padding-left: clamp(16px, 2vw, 28px); border-left: 1px solid var(--line); }
.step p { color: var(--ink-2); margin-top: 10px; font-size: 0.97rem; }
.step__n {
  display: block;
  font: 800 clamp(3rem, 5vw, 4.4rem)/1 var(--f-display);
  font-stretch: 125%;
  letter-spacing: -0.05em;
  color: var(--ink);
  margin-bottom: 20px;
}
.step:last-child .step__n { color: var(--accent); }

/* ---------- about ---------- */

.about__in {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}
.about__photo {
  max-width: 200px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper-2);
  aspect-ratio: 1;
}
.about__photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter .4s; }
.about__photo:hover img { filter: none; }
.about__copy p { color: var(--ink-2); margin-top: 16px; max-width: 56ch; }
.about__copy .about__lead { color: var(--ink); font-size: 1.22rem; line-height: 1.5; margin-top: 22px; }
.about__copy a { text-decoration-color: var(--accent); text-underline-offset: 3px; }
.facts { display: flex; flex-wrap: wrap; gap: 16px 48px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.facts dt { font-size: 0.85rem; color: var(--ink-3); }
.facts dd { font-weight: 500; margin-top: 2px; }

/* ---------- faq ---------- */

.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 0; cursor: pointer; list-style: none;
  font: 600 1.12rem/1.3 var(--f-display); font-stretch: 104%;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 12px; height: 12px;
  background:
    linear-gradient(currentColor, currentColor) center / 12px 1.6px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.6px 12px no-repeat;
  transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--ink-2); padding-bottom: 24px; max-width: 60ch; }

/* ---------- cta band ---------- */

.cta { position: relative; overflow: hidden; margin-top: var(--sec); background: var(--band); color: var(--band-ink); }
.cta__grid {
  --dot: color-mix(in srgb, var(--band-ink) 38%, transparent);
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 55% 90% at 85% 50%, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse 55% 90% at 85% 50%, #000 10%, transparent 70%);
  animation: drift 24s linear infinite;
}
@keyframes drift { to { background-position: 24px 48px; } }
.cta__in { position: relative; padding-top: clamp(72px, 10vw, 128px); padding-bottom: clamp(72px, 10vw, 128px); }
.cta__title {
  font: 800 clamp(2.4rem, 6vw, 5rem)/0.98 var(--f-display);
  font-stretch: 120%;
  letter-spacing: -0.04em;
  max-width: 14ch;
}
.cta__lede { margin: 24px 0 36px; max-width: 48ch; font-size: 1.12rem; opacity: .78; }

/* ---------- footer ---------- */

.foot { border-top: 1px solid var(--line); background: var(--paper); }
.foot__in { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; padding-top: 32px; padding-bottom: 40px; }
.foot__links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.foot__links a { color: var(--ink-2); text-decoration: none; font-size: 0.95rem; }
.foot__links a:hover { color: var(--ink); }
.foot__small { margin-left: auto; color: var(--ink-3); font-size: 0.88rem; }

/* ---------- responsive ---------- */

@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; }
  .hero__title { max-width: 11ch; }
  .sched { max-width: 560px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
  .step:nth-child(3) { padding-left: 0; border-left: 0; }
  .steps { padding-top: 0; }
  .svc { grid-template-columns: 1fr; }
  .steps::before, .steps::after, .step::before { display: none; }
}

@media (max-width: 820px) {
  /* Phones: the hero and section headings sit on the centre line. Body copy
     inside cards stays left-aligned for reading. */
  .hero__copy { text-align: center; }
  .hero__title, .hero__lede { margin-left: auto; margin-right: auto; }
  .hero__actions { justify-content: center; }
  .sched { margin: 0 auto; }
  .head, .split__side, .about__copy, .cta__in { text-align: center; }
  .head .lede, .split__side .lede, .cta__lede, .cta__title { margin-left: auto; margin-right: auto; }
  .head { margin-left: auto; margin-right: auto; }
  .flow { margin-left: auto; margin-right: auto; }
  .about__photo { margin: 0 auto; }
  .about__copy p { margin-left: auto; margin-right: auto; }
  .facts { justify-content: center; }
  .tools__label { text-align: center; }
  .split, .about__in { grid-template-columns: 1fr; }
  .split__side { position: static; }
  .svc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about__photo { max-width: 140px; }
  .net { display: none; }
  .tools__in { flex-direction: column; align-items: stretch; gap: 14px; }
  .tools__label { max-width: none; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .about__copy .about__lead { font-size: 1.08rem; }
  .facts { gap: 12px 32px; }
  .svc { grid-template-columns: 1fr; }
  .uc { width: 264px; }
  .brand__logo { height: 22px; }
  .steps { grid-template-columns: 1fr; row-gap: 36px; }
  .step, .step + .step { padding: 0; border-left: 0; }
  .step { display: grid; grid-template-columns: 64px 1fr; column-gap: 8px; }
  .step__n { grid-row: span 2; margin: 0; font-size: 2.6rem; }
  .step p { grid-column: 2; }
  .job { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; padding: 12px 14px; }
  .job__cron { grid-column: 1; grid-row: 2; }
  .job__state { grid-column: 2; grid-row: 1 / span 2; }
  .hero__actions .btn { flex: 1 1 100%; }
  .foot__small { margin-left: 0; }
  .foot__in { flex-direction: column; text-align: center; }
  .foot__links { justify-content: center; }
}

/* ---------- cursor ---------- */

.has-cursor, .has-cursor a, .has-cursor button, .has-cursor summary { cursor: none; }
.cursor-dot, .cursor-ring {
  position: fixed; left: 0; top: 0; z-index: 100;
  pointer-events: none; border-radius: 50%;
  opacity: 0; transition: opacity .3s;
}
.cursor-on .cursor-dot, .cursor-on .cursor-ring { opacity: 1; }
.cursor-dot {
  width: 8px; height: 8px; margin: -4px 0 0 -4px;
  background: var(--accent);
  transition: opacity .3s, scale .3s;
}
.cursor-dot[data-hover="link"] { scale: 0; }
/* The ring is sized by an inner scale so hover growth animates smoothly
   while the outer transform keeps following the pointer. */
.cursor-ring { width: 38px; height: 38px; margin: -19px 0 0 -19px; }
.cursor-ring::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--ink) 55%, transparent);
  transition: transform .45s cubic-bezier(.2, .75, .15, 1), background-color .3s, border-color .3s;
}
.cursor-ring[data-hover="link"]::before {
  transform: scale(1.6);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-color: var(--accent);
}
.cursor-ring[data-hover="card"]::before { transform: scale(1.25); border-color: var(--accent); }
.cursor-ring.is-down::before { transform: scale(0.8); }
.cursor-ring[data-hover="link"].is-down::before { transform: scale(1.3); }

/* Spotlight: the page grid lights up green around the pointer. Fixed to the
   viewport like the grid, so the lit dots sit exactly on the grid dots. */
.page-spot {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, var(--accent) 1.4px, transparent 1.9px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(circle 220px at var(--gx, -300px) var(--gy, -300px), #000, transparent 72%);
  mask-image: radial-gradient(circle 220px at var(--gx, -300px) var(--gy, -300px), #000, transparent 72%);
  opacity: 0; transition: opacity .6s;
}
.cursor-on .page-spot { opacity: 1; }

@media (max-width: 380px) {
  .hero__title { font-size: 2.5rem; }
  .h2 { font-size: 1.8rem; }
  .nav__cta { padding: 0 12px; font-size: 0.88rem; }
  .job__name { font-size: 0.9rem; }
  .job__state { padding: 5px 7px; font-size: 0.66rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
  .hero__title .w > span, .hero__lede, .hero__actions, .hero__note, .hero__art,
  .js [data-reveal] { opacity: 1; transform: none; }
  .net__packets, .flow__packets { display: none; }
  .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .marquee__track [aria-hidden] { display: none; }
}