/* Service pages (/services/ai-automation, /services/ai-agents, /services/ai-consulting, /services/ai-training)
   and the 404. Markup for every component: docs/service-page-kit.md.

   Built on the shared kit in styles.css (.crumbs, .answer, .faq-section, .faq-list, .meta-row, .ledger,
   .ledger--two, .compare, .stamp, .go-deeper, .page-close). This sheet only adds the sp- parts the kit
   does not have and positions the kit parts on these pages; it never copies them.

   Colour: the accent is the branch accent (services: cobalt; in dark mode Night Periwinkle, set below because
   the /services hub keeps its own #729BFF, which DESIGN.md lists as drift). The page's
   level colour (data-level on the view: 1 = Survey Blue, 2 = Kiln Copper) marks only what belongs to the
   level: a 2px tick, a level index, the dotted flow in a drawing. The "Where it fits" bridge uses the
   Services sequence (#557DEE / #BD8459 / #757D8A), as the Services stairway does.
   Dashed = human-gated. Square corners. No reveal-on-scroll: nothing is hidden without JavaScript. */

/* Dark mode: Night Periwinkle, as on the landing page, Company Brain, Insights and the 404. This sheet loads only on
   the service pages and the 404 (home branch), so the rule reaches only the service pages, nav and footer included. */
html[data-theme="dark"][data-branch="services"]{--accent:#8FA3FF;--accent-soft:#A9B8FF;--accent-rgb:143,163,255}
.sp-page{
  --sp-l1:#3358C9;--sp-l2:#A14E28;--sp-l3:#2F7A64;
  --sp-seq-1:#557DEE;--sp-seq-2:#BD8459;--sp-seq-3:#757D8A;
  --sp-level:var(--accent);
  --sp-gap:clamp(40px,7vw,100px);
  position:relative;z-index:2
}
html[data-theme="dark"] .sp-page{--sp-l1:#9BB4FF;--sp-l2:#E7AD82;--sp-l3:#9ED0C1;--sp-seq-1:#729BFF;--sp-seq-2:#E7AD82;--sp-seq-3:#8A919C}
.sp-page[data-level="1"]{--sp-level:var(--sp-l1)}
.sp-page[data-level="2"]{--sp-level:var(--sp-l2)}
.sp-page[data-level="3"]{--sp-level:var(--sp-l3)}
.sp-page section[id]{scroll-margin-top:96px}
.sp-page h1,.sp-page h2,.sp-page h3{font-weight:430}
.sp-page :is(h1,h2) em{font-style:italic;font-weight:400;color:var(--accent)}
.sp-page .eyebrow{font-size:11px;letter-spacing:.14em;line-height:1.8;color:var(--ink-soft)}
.sp-page .btn{box-shadow:none}
.sp-page .btn-dark:hover{box-shadow:none;transform:translateY(-1px)}
.sp-page .btn .arr{display:inline-block}
.sp-page :is(a,summary,button):focus-visible{outline:2px solid var(--accent);outline-offset:5px}

/* ----------------------------------------------------------------- hero */
.sp-hero{position:relative;overflow:hidden;padding:148px 0 0}
.sp-hero::before{content:"";position:absolute;inset:0 0 auto;height:640px;pointer-events:none;z-index:-1;background:radial-gradient(circle at 80% 22%,rgba(var(--accent-rgb),.07),transparent 42%)}
.sp-hero .crumbs{margin-bottom:26px}
.sp-hero-grid{display:grid;grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);gap:clamp(24px,4vw,56px);align-items:center;padding:30px 0 60px}
.sp-hero-copy{min-width:0}
/* Measure in em, not ch: ch is read from whichever face has loaded, so a ch measure reflowed the headline when Fraunces
   arrived. Each value equals the former 14ch (15ch below 961px) in Fraunces at that range's sizes. */
.sp-hero h1{font-family:"Fraunces",Georgia,serif;font-optical-sizing:auto;font-size:clamp(46px,4.9vw,76px);line-height:1;letter-spacing:-.055em;max-width:9.05em;text-wrap:balance}
@media(min-width:1440px){.sp-hero h1{max-width:8.85em}}
.sp-hero .answer{margin-top:38px;max-width:620px}
.sp-hero .answer-text{margin-top:16px}
.sp-actions{display:flex;align-items:center;flex-wrap:wrap;gap:16px 30px;margin-top:34px}
.sp-anchor{display:inline-flex;align-items:center;gap:30px;padding:11px 0 9px;border-bottom:1px solid var(--ink);font:11px/1.4 "JetBrains Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);transition:color .2s,border-color .2s}
.sp-anchor span{font-size:16px;transition:transform .3s var(--ease)}
.sp-anchor:hover{color:var(--accent);border-color:var(--accent)}
.sp-anchor:hover span{transform:translateY(3px)}
/* Reassurance list under the primary CTA. */
.sp-assure{display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none;margin-top:26px;font:10px/1.6 "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.sp-assure li{display:inline-flex;align-items:baseline;gap:8px}
.sp-assure li::before{content:"+";content:"+"/"";color:var(--accent)}
/* Hero foot: a plain sentence left, the meta row (updated date, level) right. */
.sp-hero-foot{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:12px 32px;padding:22px 0;border-top:1px solid var(--line-strong)}
.sp-hero-foot>p:first-child{font-size:12px;line-height:1.6;color:var(--ink-soft)}
.sp-level-mark{display:inline-flex;align-items:center;gap:10px}
.sp-tick{display:inline-block;flex:none;width:24px;height:2px;background:var(--sp-level);transform:translateY(-3px)}

/* ------------------------------------------------- drawn object (figure) */
.sp-figure{margin:0;min-width:0}
@media(min-width:1280px){.sp-hero .sp-figure-art{margin-right:-32px}}
.sp-figure-art{position:relative;color:var(--ink-soft)}
.sp-figure-caption{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px 18px;margin-top:14px;font:10px/1.6 "JetBrains Mono",monospace;letter-spacing:.06em;color:var(--ink-soft)}
.sp-figure-caption>span:first-child>span[aria-hidden]{color:var(--accent)}
/* SVG primitives. Draw in currentColor; every class below only sets stroke, fill or dash. */
.sp-draw{display:block;width:100%;height:auto;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.sp-draw .d-guide{opacity:.16;stroke-dasharray:3 5}
.sp-draw .d-leader{opacity:.45}
.sp-draw .d-top{fill:color-mix(in srgb,currentColor 6%,var(--porcelain))}
.sp-draw .d-left{fill:color-mix(in srgb,currentColor 12%,var(--porcelain))}
.sp-draw .d-right{fill:color-mix(in srgb,currentColor 20%,var(--porcelain))}
.sp-draw .d-sheet{fill:var(--porcelain)}
.sp-draw .d-fill{fill:currentColor;stroke:none}
.sp-draw .d-ink{color:var(--ink)}
.sp-draw .d-accent{color:var(--accent)}
.sp-draw .d-level{color:var(--sp-level)}
.sp-draw .d-dash{stroke-dasharray:4 5}
.sp-draw .d-human{color:var(--accent)}
.sp-draw .d-human :is(.d-top,.d-left,.d-right){stroke-dasharray:4 5}
.sp-draw .d-human .d-top{fill:color-mix(in srgb,currentColor 7%,var(--porcelain))}
.sp-draw .d-human :is(.d-left,.d-right){fill:var(--porcelain)}
.sp-draw .d-flow{color:var(--sp-level);stroke-width:2.6;stroke-dasharray:.1 6.1;animation:sp-flow 2.4s linear infinite}
.sp-draw .d-ring{stroke-dasharray:3 5;animation:sp-crawl 40s linear infinite}
.sp-draw .d-plate{animation:sp-arrive .9s var(--ease) both;animation-delay:calc(var(--i,0) * .12s + .1s)}
@keyframes sp-arrive{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes sp-flow{to{stroke-dashoffset:-12.2}}
@keyframes sp-crawl{to{stroke-dashoffset:-160}}
/* Callout labels on a drawing: position each with style="--x:…%;--y:…%" (the left edge and the vertical centre). */
.sp-figure-label{position:absolute;left:var(--x);top:var(--y);transform:translateY(-50%);display:flex;align-items:center;gap:10px;max-width:calc(100% - var(--x));font:10px/1.35 "JetBrains Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.sp-figure-label>b{display:grid;place-items:center;flex:none;width:24px;height:24px;border:1px solid var(--line-strong);font-weight:400;font-size:9px;letter-spacing:0;color:var(--ink-soft);background:var(--porcelain)}
.sp-figure-label small{display:block;margin-top:3px;font-size:9px;letter-spacing:.06em;color:var(--ink-soft)}
.sp-figure-label--human{color:var(--accent)}
.sp-figure-label--human>b{border:1px dashed var(--accent);color:var(--accent)}
/* Planned, not-yet-built object in a drawing (dashed = planned): dashed ink key, ink-soft text. */
.sp-figure-label--planned{color:var(--ink-soft)}
.sp-figure-label--planned>b{border-style:dashed}

/* -------------------------------------------------------------- sections */
.sp-section{position:relative;padding:clamp(88px,11vh,128px) 0;border-top:1px solid var(--line-strong)}
.sp-hero+.sp-section{border-top:0}
/* Full-bleed bands own their tokens (DESIGN.md "The Band Owns Its Tokens"). */
.sp-section--paper{background:var(--paper)}
.sp-section--graphite{
  --ink:#F2F1EC;--ink-soft:#B9BDC4;--muted:#868C95;--line:rgba(242,241,236,.12);--line-strong:rgba(242,241,236,.24);
  --accent:#9BB4FF;--accent-rgb:155,180,255;--porcelain:#111419;--paper:#171B21;
  --sp-l1:#9BB4FF;--sp-l2:#E7AD82;--sp-l3:#9ED0C1;--sp-seq-1:#729BFF;--sp-seq-2:#E7AD82;--sp-seq-3:#8A919C;
  background:#111419;color:var(--ink);border-top-color:transparent
}
.sp-section--graphite .btn-dark{background:var(--ink);color:#111419}
/* Section heading: eyebrow across, question-style title left, a short note on its baseline right. */
.sp-heading{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:var(--sp-gap);align-items:end;margin-bottom:clamp(44px,5.5vw,68px)}
.sp-heading>.eyebrow{grid-column:1/-1;margin-bottom:26px}
.sp-heading h2{font-family:"Fraunces",Georgia,serif;font-optical-sizing:auto;font-size:clamp(38px,4.2vw,60px);line-height:1.06;letter-spacing:-.045em;color:var(--ink);max-width:17ch;text-wrap:balance}
.sp-heading-note{max-width:46ch;padding-bottom:6px;font-size:16px;line-height:1.75;color:var(--ink-soft)}
.sp-heading-note a,.sp-prose a,.sp-note a:not(.text-link){color:var(--ink);font-weight:600;border-bottom:1px solid rgba(var(--accent-rgb),.42);transition:color .2s,border-color .2s}
.sp-heading-note a:hover,.sp-prose a:hover,.sp-note a:not(.text-link):hover{color:var(--accent);border-color:var(--accent)}
.sp-heading--solo{grid-template-columns:minmax(0,1fr)}
.sp-heading--solo h2{max-width:20ch}
.sp-nowrap{white-space:nowrap}
.sp-heading--solo .sp-heading-note{margin-top:22px}
/* A block that follows another inside a section. */
.sp-block{margin-top:clamp(44px,5.5vw,72px)}
/* Caption row above a table, ledger or process: mono caption left, stamp right. */
.sp-caption-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px 24px;margin-bottom:18px;font:10px/1.5 "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.sp-caption-row+.compare-wrap .compare caption{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* Prose: a lead sentence beside supporting paragraphs. */
.sp-split{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:var(--sp-gap);align-items:start}
.sp-lead{font-family:"Fraunces",Georgia,serif;font-optical-sizing:auto;font-size:clamp(24px,2.3vw,32px);font-weight:400;line-height:1.24;letter-spacing:-.03em;color:var(--ink);text-wrap:pretty}
.sp-lead em{font-style:italic;color:var(--accent)}
.sp-prose{max-width:62ch}
.sp-prose p{font-size:16px;line-height:1.75;color:var(--ink-soft)}
.sp-prose p+p{margin-top:18px}
.sp-prose strong{font-weight:600;color:var(--ink)}
/* A ruled one-line note with an optional text link. */
.sp-note{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:12px 32px;margin-top:clamp(36px,4vw,52px);padding-top:18px;border-top:1px solid var(--line)}
.sp-note>p{max-width:70ch;font-size:14px;line-height:1.7;color:var(--ink-soft)}
.sp-note>.text-link,.sp-note>span{flex:none}
.sp-page .go-deeper{margin-top:clamp(36px,4vw,52px)}
/* Links wrapped in a data-requires <span> keep the kit spacing. */
.sp-page :is(.go-deeper,.sp-note,.sp-fit-links,.sp-actions) .text-link{margin-top:0}

/* ------------------------------------------------- process rows (Read → Approve) */
/* Optional lane bar above the steps: style="--ai:3" = how many steps the AI lane spans. */
.sp-lanes{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);column-gap:28px;margin-bottom:16px;font:10px/1.5 "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.sp-lanes>span:first-child{grid-column:span var(--ai,3)}
.sp-lanes>span{display:flex;align-items:center;gap:12px;white-space:nowrap}
.sp-lanes>span::after{content:"";flex:1;height:0;border-top:1px solid var(--line-strong)}
.sp-lanes>span:last-child{color:var(--accent)}
.sp-lanes>span:last-child::after{border-top:1px dashed var(--accent)}
.sp-process{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);column-gap:28px;list-style:none;counter-reset:none}
.sp-step{position:relative;display:flex;flex-direction:column;min-width:0;padding:22px 0 26px;border-top:1px solid var(--line-strong)}
.sp-step:not(:last-child)::after{content:"";position:absolute;right:-17px;top:-4px;width:7px;height:7px;border-top:1px solid var(--accent);border-right:1px solid var(--accent);transform:rotate(45deg)}
.sp-step-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font:10px/1.5 "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.sp-step-index{color:var(--accent)}
.sp-step-icon{display:block;width:30px;height:30px;margin-top:26px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;color:var(--ink-soft)}
.sp-step-title{margin-top:18px;font:500 17px/1.4 "Hanken Grotesk",sans-serif;letter-spacing:-.015em;color:var(--ink)}
.sp-step>p{margin-top:8px;font-size:14px;line-height:1.65;color:var(--ink-soft)}
/* The human step is drawn dashed in the accent: it waits for a person. */
.sp-step--human{padding:22px 20px 26px;border:1px dashed var(--accent);margin-top:-1px}
.sp-step--human .sp-step-head{color:var(--accent)}
.sp-step--human .sp-step-icon{color:var(--accent)}
.sp-process-note{display:flex;align-items:baseline;gap:12px;margin-top:22px;font-size:14px;line-height:1.7;color:var(--ink-soft)}
.sp-process-note::before{content:"→";content:"→"/"";flex:none;font-family:"JetBrains Mono",monospace;color:var(--accent)}

/* ------------------------------------------------------- grid of cells */
.sp-grid{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));border-top:1px solid var(--line-strong);list-style:none}
.sp-grid--2{--cols:2}.sp-grid--3{--cols:3}.sp-grid--4{--cols:4}
.sp-cell{position:relative;min-width:0;padding:26px clamp(18px,2.4vw,32px) 30px;border-left:1px solid var(--line)}
.sp-grid--2>.sp-cell:nth-child(2n+1),.sp-grid--3>.sp-cell:nth-child(3n+1),.sp-grid--4>.sp-cell:nth-child(4n+1){border-left:0;padding-left:0}
.sp-grid--2>.sp-cell:nth-child(2n),.sp-grid--3>.sp-cell:nth-child(3n),.sp-grid--4>.sp-cell:nth-child(4n){padding-right:0}
.sp-grid--2>.sp-cell:nth-child(n+3),.sp-grid--3>.sp-cell:nth-child(n+4),.sp-grid--4>.sp-cell:nth-child(n+5){border-top:1px solid var(--line)}
.sp-cell-index{display:block;font:10px/1.5 "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.sp-cell-icon{display:block;width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;color:var(--ink-soft)}
.sp-cell-title{margin-top:20px;font:500 17px/1.4 "Hanken Grotesk",sans-serif;letter-spacing:-.015em;color:var(--ink)}
.sp-cell>p{margin-top:8px;font-size:14px;line-height:1.65;color:var(--ink-soft)}
.sp-cell--tick::before{content:"";position:absolute;left:0;top:-1px;width:56px;height:2px;background:var(--sp-level)}

/* ------------------------------------------- definition (boundary statement) */
.sp-define{position:relative;padding:clamp(28px,3.4vw,44px);border:1px solid var(--line-strong)}
.sp-define::before{content:"";position:absolute;left:-1px;top:-1px;width:56px;height:2px;background:var(--accent)}
.sp-define-label{display:block;font:10px/1.5 "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.sp-define-term{display:block;margin-top:18px;font-family:"Fraunces",Georgia,serif;font-optical-sizing:auto;font-style:normal;font-size:clamp(26px,2.4vw,34px);font-weight:430;line-height:1.08;letter-spacing:-.04em;color:var(--ink)}
.sp-define-text{margin-top:16px;max-width:52ch;font-size:clamp(17px,1.45vw,20px);line-height:1.6;color:var(--ink-soft)}
.sp-define-foot{margin-top:24px;padding-top:16px;border-top:1px solid var(--line);font:10px/1.6 "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}

/* --------------------------------------------------- marked lists (+ / –) */
.sp-marks{list-style:none;border-top:1px solid var(--line-strong)}
.sp-marks>li{position:relative;padding:20px 0 22px 34px;border-bottom:1px solid var(--line)}
.sp-marks>li::before{content:"+";content:"+"/"";position:absolute;left:0;top:19px;font:15px/1.5 "JetBrains Mono",monospace;color:var(--accent)}
.sp-marks--minus>li::before{content:"–";content:"–"/""}
.sp-marks-title{font:500 17px/1.4 "Hanken Grotesk",sans-serif;letter-spacing:-.015em;color:var(--ink)}
.sp-marks>li>p{margin-top:6px;max-width:58ch;font-size:14px;line-height:1.65;color:var(--ink-soft)}
.sp-marks--two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,5vw,72px)}

/* ------------------------------------------------ autonomy ladder (R0–R4) */
/* Rung names must match /company-brain exactly. style="--level:N" fills N of the five meter segments;
   sp-rung--dashed marks a rung that is not yet earned (DESIGN.md: dashed = not yet reached). */
.sp-ladder{list-style:none;border-top:1px solid var(--line-strong)}
.sp-rung{display:grid;grid-template-columns:76px minmax(0,1fr) minmax(0,190px) 96px;align-items:center;column-gap:clamp(16px,2.4vw,32px);padding:20px 0 21px;border-bottom:1px solid var(--line)}
.sp-rung-id{font-family:"Fraunces",Georgia,serif;font-optical-sizing:auto;font-size:clamp(30px,2.9vw,42px);font-weight:430;line-height:1;letter-spacing:-.045em;color:var(--accent)}
.sp-rung-title{font:500 17px/1.4 "Hanken Grotesk",sans-serif;letter-spacing:-.015em;color:var(--ink)}
.sp-rung-text>p{margin-top:4px;max-width:52ch;font-size:14px;line-height:1.6;color:var(--ink-soft)}
.sp-rung-chip{justify-self:start;padding:6px 9px;border:1px solid var(--line-strong);font:9.5px/1.3 "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap}
.sp-rung-meter{display:block;height:3px;background:linear-gradient(90deg,var(--accent) calc(var(--level,1) * 20%),var(--line-strong) 0);-webkit-mask:repeating-linear-gradient(90deg,#000 0 calc(20% - 3px),transparent 0 20%);mask:repeating-linear-gradient(90deg,#000 0 calc(20% - 3px),transparent 0 20%)}
.sp-rung--dashed{border-bottom-style:dashed}
.sp-rung--dashed .sp-rung-id{color:transparent;-webkit-text-stroke:1px var(--ink-soft)}
.sp-rung--dashed .sp-rung-chip{border-style:dashed}
.sp-rung--dashed .sp-rung-meter{background:linear-gradient(90deg,var(--ink-soft) calc(var(--level,1) * 20%),var(--line) 0);opacity:.55}

/* ----------------------------------------- aside (legal note, sources, caveat) */
.sp-aside{padding:22px 24px 24px;border:1px solid var(--line-strong)}
.sp-aside-label{display:block;font:10px/1.5 "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.sp-aside>p{margin-top:10px;max-width:70ch;font-size:14px;line-height:1.7;color:var(--ink-soft)}
.sp-aside a{color:var(--ink);font-weight:600;border-bottom:1px solid rgba(var(--accent-rgb),.42);transition:color .2s,border-color .2s}
.sp-aside a:hover{color:var(--accent);border-color:var(--accent)}

/* ------------------------------------------------- how we work (six steps) */
.sp-work{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(28px,4vw,56px);list-style:none}
.sp-work>li{display:grid;grid-template-columns:44px minmax(0,1fr);align-content:start;column-gap:10px;padding:24px 0 30px;border-top:1px solid var(--line-strong)}
.sp-work-index{grid-row:1/span 2;font:400 23px/1 "Hanken Grotesk",sans-serif;letter-spacing:-.04em;color:var(--accent)}
.sp-work h3{font:500 17px/1.4 "Hanken Grotesk",sans-serif;letter-spacing:-.015em;color:var(--ink)}
.sp-work p{margin-top:8px;font-size:14px;line-height:1.65;color:var(--ink-soft)}
.sp-work>li:last-child .sp-work-index{color:var(--ink)}

/* -------------------------------------------- where it fits (01 → 02 → 03) */
.sp-fit{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
.sp-fit-level{--step:var(--sp-seq-1);position:relative;display:flex;flex-direction:column;min-width:0;padding:24px clamp(20px,2.6vw,34px) 28px;border-top:1px solid var(--line-strong)}
.sp-fit-level:first-child{padding-left:0;margin-top:56px}
.sp-fit-level:nth-child(2){margin-top:28px}
.sp-fit-level:last-child{padding-right:0}
.sp-fit-level[data-level="2"]{--step:var(--sp-seq-2)}
.sp-fit-level[data-level="3"]{--step:var(--sp-seq-3)}
.sp-fit-level::before{content:"";position:absolute;left:0;top:-1px;width:56px;height:2px;background:var(--step);transition:width .45s var(--ease)}
/* Risers: each level starts 28px above the one before (a stairway, as on /services). */
.sp-fit-level:nth-child(n+2)::after{content:"";position:absolute;left:0;top:0;height:28px;border-left:1px solid var(--line-strong)}
.sp-fit-level.is-here{background:var(--paper)}
.sp-fit-level.is-here::before{width:100%}
.sp-fit-level:not(.is-here):hover::before,.sp-fit-level:not(.is-here):focus-within::before{width:100%}
.sp-fit-kicker{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font:10px/1.5 "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
/* The level name is text, so it takes Ink Soft (the sequence colours fall below 4.5:1 at 10px); the 2px tick carries the level colour, as on the /services stairway. */
.sp-fit-kicker b{font-weight:500;color:var(--ink-soft)}
.sp-fit-here{display:inline-flex;align-items:center;gap:7px;padding:4px 8px;border:1px solid var(--step);font-size:9px;letter-spacing:.12em;color:var(--ink)}
.sp-fit-here::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--step)}
.sp-fit-title{margin-top:22px;font-family:"Fraunces",Georgia,serif;font-optical-sizing:auto;font-size:clamp(25px,2.4vw,32px);line-height:1.1;letter-spacing:-.04em;color:var(--ink);text-wrap:balance}
.sp-fit-level>p:not(.sp-fit-kicker):not(.sp-fit-links){margin-top:12px;max-width:34ch;font-size:14px;line-height:1.65;color:var(--ink-soft)}
.sp-fit-links{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:22px}
.sp-fit-links .text-link{margin-top:0;font-size:13px}
.sp-fit-links .text-link[aria-current="page"]{color:var(--ink);border-bottom-color:var(--line-strong);pointer-events:none}

/* --------------------------------------------------------------- the 404 */
.sp-nf{min-height:calc(100vh - 80px);padding:clamp(140px,17vh,190px) 0 clamp(80px,10vh,120px);position:relative;overflow:hidden}
.sp-nf::before{content:"";position:absolute;inset:0 0 auto;height:620px;pointer-events:none;background:radial-gradient(circle at 82% 16%,rgba(var(--accent-rgb),.09),transparent 40%)}
.sp-nf-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--sp-gap);align-items:end}
.sp-nf h1{margin-top:28px;font-family:"Fraunces",Georgia,serif;font-optical-sizing:auto;font-size:clamp(50px,6.4vw,100px);line-height:.98;letter-spacing:-.058em;color:var(--ink);max-width:12ch;text-wrap:balance}
.sp-nf-lead{margin-top:30px;max-width:46ch;font-size:clamp(17px,1.45vw,20px);line-height:1.6;color:var(--ink-soft)}
.sp-nf-el{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);max-width:46ch;font-size:15px;line-height:1.7;color:var(--ink-soft)}
.sp-nf-el a,.sp-nf-lead a{color:var(--ink);font-weight:600;border-bottom:1px solid rgba(var(--accent-rgb),.42);transition:color .2s,border-color .2s}
.sp-nf-el a:hover,.sp-nf-lead a:hover{color:var(--accent);border-color:var(--accent)}
.sp-nf .sp-actions{margin-top:36px}
/* The outline numeral is not drawn: at any size that reads as a numeral it crossed the "Where to go next"
   rows. The eyebrow (404 / Page not found) carries the status. The span is aria-hidden and can be removed. */
.sp-nf-code{display:none}
.sp-nf-nav-label{display:block;margin-bottom:16px;font:10px/1.5 "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
/* Indices come from a counter, so links dropped by data-requires leave no gap in the numbering. */
.sp-nf-links{list-style:none;border-top:1px solid var(--line-strong);counter-reset:sp-nf}
.sp-nf-links li{border-bottom:1px solid var(--line);counter-increment:sp-nf}
.sp-nf-links a{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:baseline;gap:12px;padding:15px 0;font:500 17px/1.4 "Hanken Grotesk",sans-serif;letter-spacing:-.015em;color:var(--ink);transition:color .2s}
.sp-nf-links a::before{content:counter(sp-nf,decimal-leading-zero);font:10px/1.5 "JetBrains Mono",monospace;letter-spacing:.06em;color:var(--accent)}
.sp-nf-links a>span:last-child{font:13px/1 "JetBrains Mono",monospace;color:var(--accent);transition:transform .3s var(--ease)}
.sp-nf-links a:hover{color:var(--accent)}
.sp-nf-links a:hover>span:last-child{transform:translateX(5px)}
.sp-nf-links a:focus-visible{outline-offset:2px}
.sp-nf-links small{display:block;margin-top:2px;font-size:13px;font-weight:400;letter-spacing:-.005em;color:var(--ink-soft)}

/* ------------------------------------------------------------ responsive */
@media(max-width:1100px){
  .sp-grid--4{--cols:2}
  .sp-grid--4>.sp-cell:nth-child(n){border-left:1px solid var(--line);padding:26px clamp(18px,2.4vw,32px) 30px}
  .sp-grid--4>.sp-cell:nth-child(2n+1){border-left:0;padding-left:0}
  .sp-grid--4>.sp-cell:nth-child(2n){padding-right:0}
  .sp-grid--4>.sp-cell:nth-child(n+3){border-top:1px solid var(--line)}
}
/* Two-column hero at its narrowest: the drawing is about 460px wide, so a label's second line would
   wrap into the next label. Drop the second line, as below 761px; the index and name still read. */
@media(min-width:961px) and (max-width:1120px){
  .sp-figure-label small{display:none}
}
/* AI agents hero, 761-960px (gate r3): Fraunces wraps "Custom AI agents / with a real job / and clear limits."
   at any measure from 7.5 to 9.5em (Greek: four lines, same range), but at 9.75em Georgia, shown until Fraunces
   arrives, packed it into fewer lines and the hero below jumped when the font swapped in. 9.4em keeps the
   Fraunces wrap pixel-identical and gives Georgia the same line count. Re-check if this H1 changes. */
@media(min-width:761px) and (max-width:960px){
  .sp-page[data-view="ai-agents"] .sp-hero h1{max-width:9.4em}
}
@media(max-width:960px){
  .sp-hero-grid{grid-template-columns:1fr;gap:44px}
  .sp-hero h1{max-width:9.75em}
  .sp-figure{width:min(100%,560px)}
  .sp-heading{grid-template-columns:1fr}
  .sp-heading-note{margin-top:22px}
  .sp-split{grid-template-columns:1fr;gap:28px}
  .sp-process{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(2,minmax(0,1fr));row-gap:12px}
  .sp-step:nth-child(2)::after{display:none}
  .sp-lanes{display:none}
  .sp-work{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sp-marks--two{grid-template-columns:1fr}
  .sp-marks--two>li:nth-child(n+2){border-top:0}
  .sp-nf-grid{grid-template-columns:1fr;align-items:start}
}
@media(max-width:760px){
  .sp-hero{padding-top:118px}
  .sp-hero .crumbs{margin-bottom:20px}
  .sp-hero-grid{padding:24px 0 44px}
  .sp-hero h1{max-width:9.65em;font-size:clamp(40px,11vw,58px);line-height:1.02}
  .sp-hero .answer{margin-top:30px}
  .sp-hero-foot{flex-direction:column;align-items:flex-start}
  .sp-section{padding:76px 0}
  .sp-heading h2{font-size:clamp(34px,9vw,44px)}
  .sp-heading>.eyebrow{margin-bottom:20px}
  .sp-figure-label{gap:7px;font-size:8.5px;letter-spacing:.05em}
  .sp-figure-label>b{width:20px;height:20px;font-size:8px}
  .sp-figure-label small{display:none}
  .sp-process{grid-template-columns:1fr;row-gap:0}
  .sp-step{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px;padding:20px 0 22px}
  .sp-step>*{grid-column:2}
  .sp-step-icon{grid-column:1;grid-row:1/span 3;margin-top:0;width:26px;height:26px}
  .sp-step-title{margin-top:12px}
  .sp-step:not(:last-child)::after{display:none}
  .sp-step--human{padding:20px 16px 22px;margin-top:8px}
  .sp-grid,.sp-grid--2,.sp-grid--3,.sp-grid--4{--cols:1}
  .sp-grid>.sp-cell:nth-child(n){border-left:0;padding:22px 0 24px}
  .sp-grid>.sp-cell:nth-child(n+2){border-top:1px solid var(--line)}
  .sp-cell{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px;align-content:start}
  .sp-cell>*{grid-column:2}
  .sp-cell>:is(.sp-cell-icon,.sp-cell-index){grid-column:1;grid-row:1/span 2}
  .sp-cell-title{margin-top:0}
  .sp-cell-icon{width:26px;height:26px}
  .sp-work{grid-template-columns:1fr}
  .sp-work>li{padding:20px 0 22px}
  .sp-work>li:nth-child(n+2){border-top-color:var(--line)}
  .sp-fit{grid-template-columns:1fr;gap:14px}
  .sp-fit-level,.sp-fit-level:first-child,.sp-fit-level:nth-child(2){margin-top:0;padding:22px 18px 24px 0}
  .sp-fit-level:nth-child(2){margin-left:16px}
  .sp-fit-level:nth-child(3){margin-left:32px}
  .sp-fit-level.is-here{padding-left:16px;margin-left:0;margin-right:-4px}
  .sp-fit-level:nth-child(n+2)::after{display:none}
  .sp-define{padding:24px 20px}
  .sp-rung{grid-template-columns:52px minmax(0,1fr);row-gap:12px;align-items:start}
  .sp-rung>:is(.sp-rung-chip,.sp-rung-meter){grid-column:2;justify-self:start}
  .sp-rung-meter{width:96px}
  .sp-aside{padding:18px 18px 20px}
  .sp-nf{padding-top:124px}
  .sp-nf h1{font-size:clamp(44px,12vw,62px)}
}
@media(prefers-reduced-motion:reduce){
  .sp-page *,.sp-page *::before,.sp-page *::after{animation:none!important;transition:none!important}
}