/* ============================================================
   HOMEPAGE ONLY - loaded by index.html alone, after site.css.
   Split out of site.css on 2026-10-20 (PageSpeed: site.css was 235KB and
   render-blocking on every page): every rule here only styles markup that
   exists on the homepage. Order is the order the rules had in site.css, with
   their @media wrappers, and none of them is overridden by a later site.css
   rule of the same specificity, so moving them changed nothing on screen.
   Homepage-only CSS goes here; anything shared stays in site.css.
   ============================================================ */
/* ---- browser window mock ---- */
.fp-win { background: var(--k-sf); border: 1px solid var(--k-line); border-radius: var(--k-r); overflow: hidden; box-shadow: var(--k-sh); }
.fp-win-bar { display: flex; align-items: center; gap: 7px; padding: 9px 12px; background: var(--k-sf2); border-bottom: 1px solid var(--k-line); }
.fp-win-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--k-line); flex: none; }
.fp-win-bar span { margin-left: 8px; font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--k-mu); background: var(--k-sf); border: 1px solid var(--k-line); border-radius: 4px; padding: 3px 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* mock site inside a window */
.fp-site { display: grid; gap: 10px; padding: 14px; }
.fp-site-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--k-line); }
.fp-site-nav .lg { height: 8px; width: 62px; border-radius: 3px; background: var(--k-ink); opacity: .85; }
.fp-site-nav .lk { display: flex; gap: 8px; }
.fp-site-nav .lk i { height: 5px; width: 26px; border-radius: 3px; background: var(--k-line); }
.fp-site-nav .bt { height: 16px; width: 52px; border-radius: 4px; background: var(--k-acc); }
.fp-site-hero { display: grid; gap: 7px; padding: 6px 0 4px; }
.fp-site-hero .t1 { height: 13px; width: 82%; border-radius: 4px; background: var(--k-ink); opacity: .9; }
.fp-site-hero .t2 { height: 13px; width: 58%; border-radius: 4px; background: var(--k-acc); }
.fp-site-hero .p { height: 6px; width: 70%; border-radius: 3px; background: var(--k-line); }
.fp-site-hero .p.s { width: 46%; }
.fp-site-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 4px; }
.fp-site-cards .c { border-radius: 7px; overflow: hidden; border: 1px solid var(--k-line); }
.fp-site-cards .c .ph { height: 46px; }
.fp-site-cards .c .m { padding: 6px; display: grid; gap: 4px; }
.fp-site-cards .c .m i { height: 4px; border-radius: 2px; background: var(--k-line); display: block; }
.fp-site-cards .c .m i:first-child { width: 80%; background: var(--k-mu); opacity: .5; }
.fp-site-cards .c .m i:last-child { width: 50%; }
.fp-ph.pw-a { --p1:#A8E0CE; --p2:#7FB4D6; --p3:#1F423B; --p4:#3C6B60; --p5:#101C1A; }
.fp-ph.pw-b { --p1:#F0D9A8; --p2:#C7A87F; --p3:#3A2E22; --p4:#6B5842; --p5:#1B1611; }
.fp-ph.pw-d { --p1:#D9C2E0; --p2:#9FB8D8; --p3:#2E2438; --p4:#584A66; --p5:#171320; }
/* ---- avatar ---- */
.fp-av { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex: none; position: relative; }
.fp-av.lg { width: 64px; height: 64px; }
.fp-dash { background: var(--k-sf); border: 1px solid var(--k-line); border-radius: var(--k-r); padding: 18px 18px 14px; box-shadow: var(--k-sh); }
.fp-dash-sub { margin: 0 0 14px; font-size: 12.5px; color: var(--k-mu); }
/* ---- assistant chat ---- */
.fp-chat { background: var(--k-sf); border: 1px solid var(--k-line); border-radius: var(--k-r); overflow: hidden; box-shadow: var(--k-sh); }
.fp-chat-h { display: flex; align-items: center; gap: 9px; padding: 11px 14px; border-bottom: 1px solid var(--k-line); background: var(--k-sf2); }
.fp-chat-h .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--k-acc); }
.fp-chat-h p { margin: 0; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--k-mu); }
.fp-bub { font-size: 13px; line-height: 1.5; padding: 9px 12px; border-radius: 12px; max-width: 88%; }
.fp-bub.u { background: var(--k-ink); color: var(--k-sf); justify-self: end; border-bottom-right-radius: 3px; }
.fp-bub.a { background: var(--k-sf2); color: var(--k-ink); border: 1px solid var(--k-line); border-bottom-left-radius: 3px; }
#site .hmain { flex: 1; display: flex; align-items: center; padding: clamp(34px, 4vw, 60px) 0 clamp(30px, 3.6vw, 54px); }
#site .hmain > .wrap { width: 100%; }
#site .heroband .hsub { color: #D6E0F0; }
html.js-anim:not(.fp-wait) #site .hv.on .hkid { animation: sitein .75s cubic-bezier(.16,.6,.18,1) both; }
html.js-anim:not(.fp-wait) #site .hv.on .hkid:nth-child(2) { animation-delay: .09s }
html.js-anim:not(.fp-wait) #site .hv.on .hkid:nth-child(3) { animation-delay: .18s }
html.js-anim:not(.fp-wait) #site .hv.on .hkid:nth-child(4) { animation-delay: .27s }
html.js-anim:not(.fp-wait) #site .hv.on .hkid:nth-child(5) { animation-delay: .36s }
@media (prefers-reduced-motion: reduce) { html.js-anim:not(.fp-wait) #site .hv.on .hkid { animation: none; } }
#site .hsub { font-size: clamp(1.02rem, 1.5vw, 1.16rem); line-height: 1.65; color: #42536E; max-width: 50ch; margin: 22px 0 30px; }
html.js-anim #site .block.rv:nth-child(even).in .bmedia > * { animation-delay: .33s; }
#site .block .btxt { padding: 38px 38px 0; }
@media (max-width: 560px) { #site .block .btxt { padding: 26px 22px 0; } }
#site .block .btxt > p:not(.beyeb):not(.bres) { margin: 10px 0 0; font-size: 14.5px; line-height: 1.6; color: #45556E; max-width: 58ch; }
/* media panels sit flush with the card's bottom edge, cropped by its
   radius - the screenshot-bleeding-off-the-card look */
#site .bmedia { margin: 26px 28px 0; margin-top: auto; padding-top: 26px; }
@media (max-width: 560px) { #site .bmedia { margin: 22px 16px 0; } }
#site .bmedia .fp-chat, #site .bmedia .fp-dash, #site .bmedia .fp-tbl,
#site .bmedia .gpanel, #site .bmedia .fp-win { background: var(--k-sf2);
  border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
/* indigo  - seo / geo */

/* homepage variant: three grouped blocks instead of the six practices. Equal
   columns rather than the 7/5 bento, because three cards of the same weight
   is the point - they are categories, not a ranked list. Only the homepage
   grid carries .trio, so services.html keeps its six-card layout and its
   six accents untouched. */
#site .blocks.trio .block { grid-column: span 4; }
@media (max-width: 900px) { #site .blocks.trio .block { grid-column: 1 / -1; } }
#site .blocks.trio .block:nth-child(1) { --k-acc: #2C5FD8; }
/* cobalt - find */
#site .blocks.trio .block:nth-child(2) { --k-acc: #17879B; }
/* teal   - automate */
#site .blocks.trio .block:nth-child(3) { --k-acc: #C08A2D; }
/* amber  - build, matches the window mock */
/* the eyebrow names the kind of return - money in, hours back, headroom -
   so the sentence under the heading only has to explain the mechanism.
   It takes the card's own accent, which is what separates the three */
#site .blocks.trio .beyeb { margin: 0 0 12px; font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
  color: var(--k-acc); }
/* examples, not a definition. A single sentence per block kept reading as
   the whole of what that block is, when the point is that the shape changes
   per client - a few concrete cases say that where one sentence cannot.
   The node is the same one the pipeline graphic and the process track use */
#site .blocks.trio .bpts { list-style: none; margin: 15px 0 0; padding: 0; display: grid; gap: 10px; }
#site .blocks.trio .bpts li { position: relative; padding-left: 19px;
  font-size: 14px; line-height: 1.5; color: #45556E; }
/* 14px at 1.5 is a 21px line, so its centre is 10.5 down; the node is 7px
   outer with the ring inside it, putting its own centre 3.5px in */
#site .blocks.trio .bpts li::before { content: ""; position: absolute; left: 0; top: 7px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--k-sf); border: 2px solid var(--k-acc); }
/* The heading names the service, the bullets show what it looks like in
   practice, and this line closes the block with what the buyer actually
   gets. It sits behind a rule so the three parts read as three parts. */
#site .blocks.trio .bres { margin: 15px 0 0; padding-top: 13px; border-top: 1px solid var(--k-line);
  font-size: 13.5px; line-height: 1.5; color: #46587A; }
#site .blocks.trio .bres b { color: var(--k-acc); font-weight: 600; }
/* a third of the row is narrower than a 7-column card, so the padding comes
   in and the graphics' own type scales back up to compensate for the svg
   being drawn smaller */
@media (min-width: 901px) {
  #site .blocks.trio .block .btxt { padding: 32px 28px 0; }
  #site .blocks.trio .bmedia { margin-left: 22px; margin-right: 22px; }
  #site .blocks.trio .block h3 { font-size: 1.32rem; }
  /* three cards side by side make any misalignment obvious, so the text and
     the graphic each get their own row of the parent grid: every heading,
     every chip row and every panel top then lines up across the three */
  #site .blocks.trio { grid-template-rows: auto auto; }
  @supports (grid-template-rows: subgrid) {
    #site .blocks.trio .block { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
  }
}
/* the band fades from navy to off-white as it scrolls, so this link takes the
   same interpolated colour the heading does rather than a fixed one */
/* ---- closing call to the services page ----
   This used to be a bare text link inheriting --dkh2, the scroll-interpolated
   heading colour. Two problems: it read as a footnote under three big cards,
   and its fallback (#F4F8FF) is near-white, so any failure of the scrub left
   it invisible on the white band. It is now a panel with its own fixed ink,
   sharing the card language of the trio above it, and it names what is on the
   other side of the click rather than just pointing at it. */
#site .blkcta { margin: clamp(26px, 3vw, 38px) 0 0; display: flex; align-items: center;
  justify-content: space-between; gap: clamp(18px, 3vw, 40px);
  padding: clamp(20px, 2.2vw, 26px) clamp(20px, 2.4vw, 30px);
  background: var(--k-sf2); border: 1px solid var(--k-line); border-radius: var(--k-r); }
#site .blkcta p { margin: 0; max-width: 62ch; font-size: 15px; line-height: 1.55; color: #46587A; }
#site .blkcta .btn { flex: none; }
#site .blkcta .arr svg [stroke] { stroke: currentColor; }
@media (max-width: 720px) {
  #site .blkcta { display: grid; justify-items: start; gap: 18px; }
}
/* ---- shared frame for the service graphics ---- */
#site .gpanel { background: var(--k-sf); border: 1px solid var(--k-line); border-radius: var(--k-r); overflow: hidden; box-shadow: var(--k-sh); }
#site .gph { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0;
  padding: 11px 14px; border-bottom: 1px solid var(--k-line); background: var(--k-sf2);
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--k-mu); }
#site .gph b { font-weight: 400; color: var(--k-acc); }
/* 2. pipeline - a job moving through its stages */
#site .gpipe ol { list-style: none; margin: 0; padding: 16px 18px 18px; display: block; }
/* Node and connector are both derived from one set of numbers, so they
   cannot drift apart again. The catch that bit twice: box-sizing is
   border-box across the whole site, so --node is the node's OUTER diameter
   with its 2px ring already inside it - the centre is --node/2, not
   (--node + ring)/2. Everything below follows from that. */
#site .gpipe {
  --node: 9px;          /* outer diameter, ring included */
  --nodeleft: 3px;
  --titleline: 20px;    /* the line box of li > b, which the node centres on */
  --nodetop: calc((var(--titleline) - var(--node)) / 2);
  --link: 2px;          /* connector thickness */
  --linkgap: 3px;       /* clearance between a node and the connector */
}
#site .gpipe li { position: relative; padding: 0 0 16px 26px; }
#site .gpipe li:last-child { padding-bottom: 0; }
#site .gpipe li::before { content: ""; position: absolute;
  left: var(--nodeleft); top: var(--nodetop); width: var(--node); height: var(--node); border-radius: 50%;
  background: var(--k-sf); border: 2px solid var(--k-acc); z-index: 1; }
/* the connector runs from just below this node to just above the next one -
   and the next node sits --nodetop INTO the following item, which is why
   the bottom inset comes out negative. Equal clearance at both ends */
#site .gpipe li::after { content: ""; position: absolute; width: var(--link);
  left: calc(var(--nodeleft) + (var(--node) - var(--link)) / 2);
  top: calc(var(--nodetop) + var(--node) + var(--linkgap));
  bottom: calc(var(--linkgap) - var(--nodetop));
  background: var(--k-acc); opacity: .28; }
#site .gpipe li:last-child::after { display: none; }
#site .gpipe li.on::before { background: var(--k-acc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--k-acc) 16%, transparent); }
#site .gpipe li b { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: -.01em; color: var(--k-ink); }
#site .gpipe li span { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--k-mu); }
html.js-anim #site .in .gpipe li.on::before { animation: fppulse 2.2s ease-in-out infinite; }
@media (min-width: 901px) {
  #site .blocks:not(.trio) .bmedia > * { height: 360px; display: flex; flex-direction: column; }
}
#site .blocks:not(.trio) .gph { font-size: 12.5px; letter-spacing: .02em; }
#site .blocks:not(.trio) .gpipe ol { flex: 1; display: flex; flex-direction: column; padding: 20px 20px 18px; }
#site .blocks:not(.trio) .gpipe { --titleline: 22px; }
#site .blocks:not(.trio) .gpipe li { flex: 1 1 auto; padding-bottom: 12px; }
#site .blocks:not(.trio) .gpipe li:last-child { flex: none; padding-bottom: 0; }
#site .blocks:not(.trio) .gpipe li b { font-size: 14.5px; line-height: 22px; }
#site .blocks:not(.trio) .gpipe li span { font-size: 12.5px; }
#site .blocks:not(.trio) .fp-win-bar span { font-size: 12.5px; }
#site .blocks:not(.trio) .fp-win .fp-site { flex: 1; }
/* ============ SPOTLIGHT GRID (lighthouse hover) ============ */
#site .whyband { padding: clamp(64px, 7vw, 96px) 0; }
/* the block band fades out into the same off-white the next section sits on,
   so there is no edge between them and the two full paddings read as one
   uninterrupted void. Where they meet, each gives up about half of it */
#site .blkband:has(+ .whyband) { padding-bottom: clamp(38px, 4.2vw, 58px); }
#site .blkband + .whyband { padding-top: clamp(30px, 3.2vw, 44px); }
#site .whyband .bhead { max-width: 760px; margin-bottom: clamp(28px, 3.4vw, 44px); }
#site .whyband h2 { font-size: clamp(2.1rem, 4.4vw, 3.3rem); line-height: 1.02; }
#site .whyband .bhead p { margin: 18px 0 0; color: var(--k-mu); }
#site .why .wic { width: 34px; height: 34px; margin-bottom: 18px; }
#site .why .wic svg { width: 100%; height: 100%; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
#site .why .wic .g { stroke: var(--k-acc2); }
#site .why .wic .b { stroke: var(--cb); }
#site .why .wfix { display: inline-flex; align-items: center; gap: var(--arr-gap); margin-top: 16px;
  font-size: 14.5px; font-weight: 600; letter-spacing: -.005em; color: var(--cb); text-decoration: none; }
/* the avatar row is 44px against the icon's 34px, so its margin carries the
   10px difference - that way every h3 in the grid starts on the same line */
#site .why .avs { display: flex; margin-bottom: 8px; }
#site .why .avs .fp-av { border: 2px solid #E7EEFB; margin-right: -9px; }
/* ===== FORK 2: results over time ===== */
#site .f2-chart { position: relative; height: clamp(300px, 34vw, 420px); margin: 0 0 0 30px; border-left: 1px solid rgba(126,164,246,.28); border-bottom: 1px solid rgba(126,164,246,.28);
  background: repeating-linear-gradient(180deg, transparent 0 calc(25% - 1px), rgba(126,164,246,.08) calc(25% - 1px) 25%); }
#site .f2-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#site .f2-svg path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
#site .f2-svg .base, #site .f2-svg .pj { stroke: #7EA4F6; stroke-width: 2.5; }
#site .f2-svg .kp { stroke: #9FE870; stroke-width: 3; }
#site .f2-svg .area { fill: url(#f2fill); stroke: none; }
#site .f2-same { position: absolute; left: 0; top: 0; bottom: 0; width: 30%; padding: 10px 12px; background: rgba(126,164,246,.05); border-right: 1px dashed rgba(126,164,246,.28);
  font-size: 12.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #7EA4F6; }
#site .f2-dot { position: absolute; left: var(--x); top: var(--y); z-index: 2; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--nvy); border: 2px solid #7EA4F6; }
#site .f2-dot.kp { border-color: #9FE870; }
#site .f2-dot b { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; }
#site .f2-dot.m b { top: auto; bottom: 18px; color: #CDF5B0; }
#site .f2-dot.pj b { color: #BCD0FB; }
#site .f2-end { position: absolute; left: var(--x); top: var(--y); z-index: 2; transform: translate(-100%, calc(-100% - 14px)); text-align: right; white-space: nowrap; }
#site .f2-end b { display: block; font-size: 15.5px; font-weight: 700; color: #BCD0FB; }
#site .f2-end.kp b { color: #9FE870; }
#site .f2-end small { display: block; font-size: 13px; color: #A7B7D4; }
#site .f2-end::after { content: ""; position: absolute; right: -7px; bottom: -21px; width: 14px; height: 14px; border-radius: 50%; background: #7EA4F6; box-shadow: 0 0 0 5px rgba(126,164,246,.2); }
#site .f2-end.kp::after { background: #9FE870; box-shadow: 0 0 0 5px rgba(159,232,112,.2); }
/* a quiet note under the project line: why its lead narrows */
#site .f2-cu { position: absolute; left: var(--x); top: var(--y); z-index: 2; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 12.5px; font-weight: 600; color: #8FA3C4; }
#site .f2-cu::before { content: ""; width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); }
html.js-anim #site .pv-a2 .f2-cu { opacity: 0; }
html.js-anim #site .pv-a2.go .f2-cu { opacity: 1; transition: opacity .6s 3.4s; }
@media (max-width: 760px) { #site .f2-cu { display: none; } }
#site .f2-ax span { position: absolute; font-size: 12.5px; font-weight: 600; color: #8FA3C4; }
#site .f2-ax span:first-child { right: calc(100% + 10px); top: 50%; writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg); white-space: nowrap; line-height: 1; }
#site .f2-ax span:last-child { right: 44px; bottom: -26px; }
#site .f2-leg { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 46px; }
#site .f2-c { padding: 18px 22px; border-radius: 16px; border: 1px solid rgba(126,164,246,.24); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); }
#site .f2-c.kp { border-color: rgba(159,232,112,.42); background: linear-gradient(150deg, rgba(159,232,112,.1), rgba(44,95,216,.1) 60%, rgba(255,255,255,.02)); }
#site .f2-c b { display: block; color: #fff; font-size: 1.15rem; font-weight: 600; }
#site .f2-c p:not(.tg) { margin: 6px 0 0; color: #A7B7D4; font-size: 15.5px; line-height: 1.55; }
#site .f2-note { margin: 14px 0 0; font-size: 14.5px; color: #8FA3C4; }
html.js-anim #site .pv-a2 .f2-svg { clip-path: inset(0 100% 0 0); }
/* each dot shows the moment the line wipe reaches it: --d is that moment on the
   2.6s eased wipe (worked out from its x), so the order always follows the line */
html.js-anim #site .pv-a2 .f2-dot, html.js-anim #site .pv-a2 .f2-end { opacity: 0; }
html.js-anim #site .pv-a2.go .f2-svg { clip-path: inset(0 0 0 0); transition: clip-path 2.6s cubic-bezier(.45,0,.35,1) .2s; }
html.js-anim #site .pv-a2.go .f2-dot, html.js-anim #site .pv-a2.go .f2-end { opacity: 1; transition: opacity .35s; transition-delay: var(--d, 2.4s); }
html.js-anim #site .pv-a2.go .f2-end.kp::after { animation: endpulse 2.4s ease-out 3s infinite; }
/* homepage: three layouts of the same band (design lab "tw"). The heading now
   sits inside the design so each layout can place it. None is taller than the
   band used to be, so the whole thing fits a laptop screen. */
#site .twb .pv { margin-top: 0; }
#site .twb .bhead { margin: 0; max-width: none; }
#site .twb .f2-x { display: none; }
#site .f2.row { display: grid; gap: clamp(26px, 3.4vw, 44px) clamp(36px, 5vw, 80px); align-items: center; }
#site .f2.row .f2-note { margin-top: 36px; }
/* the two descriptions, lighter than cards: a coloured rule and plain text */
#site .twb .f2-c { padding: 14px 0 0; border: 0; border-top: 2px solid rgba(126,164,246,.55); border-radius: 0; background: none; box-shadow: none; }
#site .twb .f2-c.kp { border-top-color: #9FE870; background: none; }
#site .twb .f2-c b { font-size: 1.2rem; }
/* the quiet way through to the Keep pace page */
#site .twb .f2-lk { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; padding: 8px 15px 8px 16px; border-radius: 100px;
  font-size: 14.5px; font-weight: 600; line-height: 1.2; color: #CDF5B0; text-decoration: none; white-space: nowrap;
  background: rgba(159,232,112,.08); border: 1px solid rgba(159,232,112,.4); box-shadow: 0 10px 24px -16px rgba(159,232,112,.6);
  transition: background .25s, border-color .25s, color .25s, box-shadow .25s, transform .25s; }
#site .twb .f2-lk:hover, #site .twb .f2-lk:focus-visible { color: #10240B; background: #9FE870; border-color: #9FE870; box-shadow: 0 14px 30px -14px rgba(159,232,112,.75); transform: translateY(-1px); }
#site .twb .f2-lk .arr svg [stroke] { stroke: currentColor; }
/* the end labels: the dot pops as its line arrives, then the words slide in
   after it. The timings live on .go only, so the hidden state applies at once
   when the script starts rather than fading out first. */
html.js-anim #site .twb .pv-a2 .f2-end { opacity: 1; transition: none; }
html.js-anim #site .twb .pv-a2 .f2-end::after { scale: 0; }
html.js-anim #site .twb .pv-a2 .f2-end > * { opacity: 0; transform: translateX(-14px); filter: blur(4px); }
html.js-anim #site .twb .pv-a2.go .f2-end::after { scale: 1; transition: scale .55s cubic-bezier(.3,1.6,.5,1) 2.5s; }
html.js-anim #site .twb .pv-a2.go .f2-end.kp::after { transition-delay: 2.8s; }
html.js-anim #site .twb .pv-a2.go .f2-end > * { opacity: 1; transform: none; filter: none;
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1), filter .7s; transition-delay: 2.7s; }
html.js-anim #site .twb .pv-a2.go .f2-end > :nth-child(2) { transition-delay: 2.82s; }
html.js-anim #site .twb .pv-a2.go .f2-end > :nth-child(3) { transition-delay: 2.94s; }
html.js-anim #site .twb .pv-a2.go .f2-end.kp > * { transition-delay: 3s; }
html.js-anim #site .twb .pv-a2.go .f2-end.kp > :nth-child(2) { transition-delay: 3.12s; }
html.js-anim #site .twb .pv-a2.go .f2-end.kp > :nth-child(3) { transition-delay: 3.24s; }
/* the layout (Wide, chosen 2026-10-11 over Side and Strip): heading and intro
   side by side, then the chart across the full width with each description
   sitting at the end of its own line. The tripled .twb keeps these rules above
   the shared Fork 2 ones. */
#site .twb.twb.twb .bhead { display: grid; grid-template-columns: .9fr 1.1fr; gap: 20px 60px; align-items: end; }
#site .twb.twb.twb .bhead p { margin: 0; }
@media (min-width: 1180px) {
  #site .twb.twb.twb .f2-leg { display: none; }
  #site .twb.twb.twb .f2-chart { height: clamp(250px, 23vw, 300px); margin-right: clamp(270px, 25.5vw, 320px); }
  #site .twb.twb.twb .f2-end { width: clamp(240px, 22.5vw, 290px); transform: translate(36px, -50%); text-align: left; white-space: normal; }
  #site .twb.twb.twb .f2-end::after { left: -43px; right: auto; top: 50%; bottom: auto; margin-top: -7px; }
  /* the project label sits a little low on its dot, clear of the Keep pace button above */
  #site .twb.twb.twb .f2-end.pj { transform: translate(36px, -30%); }
  #site .twb.twb.twb .f2-end.pj::after { top: 30%; }
  #site .twb.twb.twb .f2-end small { display: none; }
  #site .twb.twb.twb .f2-end b { font-size: 13.5px; letter-spacing: .03em; text-transform: uppercase; }
  #site .twb.twb.twb .f2-x { display: block; margin-top: 4px; font-size: 15px; line-height: 1.5; color: #A7B7D4; }
  #site .twb.twb.twb .f2-x em { display: block; margin-bottom: 3px; font-style: normal; font-size: 17.5px; font-weight: 600; color: #fff; }
  #site .twb.twb.twb .f2-note { margin-top: 30px; }
  /* the Keep pace button always gets its own line under the description */
  #site .twb.twb.twb .f2-end .f2-lk { display: flex; width: max-content; }
}
/* the band's grey-blue text a step lighter so it reads easier on the navy */
#site .twb .bhead p, #site .twb .f2-c p:not(.tg), #site .twb .f2-end small,
#site .twb.twb.twb .f2-x { color: #C4D1E6; }
#site .twb .f2-note { color: #AEBDD6; }
@media (max-width: 960px) {
  #site .twb .f2.row { grid-template-columns: 1fr; }
  #site .twb.twb.twb .bhead { grid-template-columns: 1fr; }
  #site .twb .f2-leg { grid-template-columns: 1fr; gap: 22px; margin-top: 0; }
  #site .f2.row .f2-note { margin-top: 32px; }
}
@media (max-width: 760px) {
  #site .f2-chart { height: 300px; margin-left: 22px; }
  #site .f2-dot.m b, #site .f2-dot.pj b, #site .f2-dot.kp b { display: none; }
  #site .f2-same { width: 30%; font-size: 0; }
  #site .f2-end b { font-size: 14px; }
  #site .f2-end small { display: none; }
  #site .f2-leg { grid-template-columns: 1fr; margin-top: 40px; }
}
#site .qwho { display: flex; align-items: center; justify-content: center; gap: 14px; text-align: left; }
#site .qwho b { display: block; font-size: 14.5px; letter-spacing: -.01em; }
#site .qwho span { display: block; font-size: 12.5px; color: var(--k-mu); }
/* No photo for this one, so the attribution carries its own weight instead
   of leaning on an avatar: a short accent rule stands in for where the
   portrait was, and name and role stack centred - a considered caption
   rather than a placeholder gap. */
#site .qwho.noav { flex-direction: column; text-align: center; gap: 8px; }
#site .qwho.noav::before { content: ""; width: 30px; height: 2px; border-radius: 1px; background: var(--cb); }
#site .qwho.noav b { font-size: 19px; }
#site .qwho.noav span { font-size: 15.5px; color: var(--k-mu); }
/* ============================================================
   HERO - centre stage over a panoramic dashboard
   ============================================================ */
#site .cstage { text-align: center; }
/* 23ch holds the headline to three lines; the balance keeps them even.
   The gradient text needs bottom padding or descenders on the last line
   fall outside its background box and lose their tails */
#site .cstage h1 { font-size: clamp(2.8rem, 5.8vw, 5rem); line-height: 1.02; max-width: 19ch; margin: 20px auto 0;
  text-wrap: balance; padding-bottom: .16em; margin-bottom: -.1em; }
/* 19ch at 1.85rem came out narrower than the phone column itself, so the
   headline was capped short of the width it already had. On a phone the
   column is the constraint and the cap is not needed; 9vw meets the rule
   above at exactly 560px (9vw = 50.4px, capped to 2.8rem = the 2.8rem floor
   there), so the two sizes hand over without a step */
@media (max-width: 560px) {
  #site .cstage h1 { font-size: clamp(2rem, 10.6vw, 2.8rem); max-width: none; }
}
#site .cstage .hsub { margin: 22px auto 28px; }
#site .cstage .hbtns { justify-content: center; }
#site .cpan { position: relative; max-width: 920px; margin: clamp(44px, 5vw, 64px) auto 0; text-align: left; }
/* window title bar: full-bleed strip that makes the panel read as software */
#site .fp-desk .dwbar { display: flex; align-items: center; gap: 6px; margin: -18px -18px 16px; padding: 10px 14px;
  background: var(--k-sf2); border-bottom: 1px solid var(--k-line); border-radius: calc(var(--k-r) - 1px) calc(var(--k-r) - 1px) 0 0; }
#site .fp-desk .dwbar > i { width: 8px; height: 8px; border-radius: 50%; background: var(--k-line); flex: none; }
#site .fp-desk .dwbar .wt { margin-left: 8px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .03em; color: var(--k-mu);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#site .fp-desk .dwbar .rg { margin-left: auto; display: flex; gap: 6px; }
#site .fp-desk .dwbar .rg i { font-style: normal; font-family: 'IBM Plex Mono', monospace; font-size: 9px; border-radius: 3px; padding: 2px 7px; }
#site .fp-desk .dwbar .rg i.on { background: var(--k-acc); color: #fff; }
#site .fp-desk .fp-dash-sub { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--k-line); }
@media (max-width: 560px) {
  #site .fp-dash-sub .dsx { display: none; }
}
/* ============================================================
   HERO - the workflow mesh
   Triggers, agents and systems on one canvas (.vzc). site.js draws
   the wires and the chat bubbles that ride them from the real
   position of each node, so the same markup reflows from a desktop
   panel to a phone and the lines stay attached. Type never drops
   below 12.5px. The other variants we tried are parked in
   reference-designs/hero-round-2/.
   ============================================================ */
#site .vzsp { position: absolute; width: 0; height: 0; overflow: hidden; }
/* window shell: full-bleed canvas between the bar and the caption */
#site .fp-desk.fp-viz { padding: 0; overflow: hidden; }
#site .fp-desk.fp-viz .dwbar { margin: 0; border-radius: 0; }
#site .fp-desk.fp-viz .dwbar .wt { font-size: 12.5px; }
#site .fp-desk.fp-viz .dwbar .rg i { font-size: 12.5px; padding: 3px 9px; white-space: nowrap; }
#site .fp-viz.fp-desk .fp-dash-sub { margin: 0; padding: 13px 18px 15px; font-size: 14px; }
/* nodes */
#site .vn { position: relative; z-index: 1; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; min-width: 0;
  background: #fff; border: 1px solid var(--k-line); border-radius: 12px; padding: 11px 14px 11px 11px;
  box-shadow: 0 6px 16px -10px rgba(11,27,51,.28); transition: border-color .2s, box-shadow .2s; }
#site .vn:hover { border-color: rgba(44,95,216,.5); box-shadow: 0 10px 22px -12px rgba(44,95,216,.5); }
#site .vn .ic { grid-row: 1 / span 2; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px;
  background: rgba(44,95,216,.1); color: var(--cb); }
#site .vn .ic.ai { background: linear-gradient(135deg, #2C5FD8, #6E96EC); color: #fff; }
#site .vn b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; color: var(--k-ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#site .vn em { font-style: normal; font-size: 13px; line-height: 1.3; color: var(--k-mu); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ports: where a wire plugs in */
#site .vn.pi::before, #site .vn.po::after { content: ""; position: absolute; top: 50%; width: 10px; height: 10px; margin-top: -5px;
  border-radius: 50%; background: #fff; border: 2px solid var(--cb); }
/* a plain-code node (no AI): dark terminal tile, and a mono line that types out what it runs */
#site .vn .ic.cd { background: #0B1B33; color: #9FE870; }
#site .vn em.tty { position: relative; display: block; height: 1.3em; font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: #2F7A2E; }
/* the typing: each line keeps its full width and a white cover, whose left
   edge is the caret, steps right off the text - transform and opacity only,
   so it runs on the compositor (2026-10-20; it used to animate width) */
#site .vn em.tty span { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; width: calc(var(--n) * 1ch + 3px); opacity: 0; }
#site .vn em.tty span::after { content: ""; position: absolute; inset: 0; background: #fff; border-left: 2px solid currentColor;
  transform: translateX(calc(var(--n) * 1ch + 1px)); }
#site .vn em.tty span:first-child { opacity: 1; }
html.js-anim #site .vn em.tty span:nth-child(2), html.js-anim #site .vn em.tty span:nth-child(2)::after { animation-delay: 3s; }
html.js-anim #site .vn em.tty span:nth-child(3), html.js-anim #site .vn em.tty span:nth-child(3)::after { animation-delay: 6s; }
#site .vn.pi::before { left: -5px; }
#site .vn.po::after { right: -5px; }
/* the mesh: triggers, agents, systems */
#site .wm { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: clamp(54px, 9vw, 108px);
  padding: 22px clamp(18px, 3vw, 32px) 30px; }
#site .wmh { position: relative; z-index: 1; margin: 0 0 18px; font-size: 12.5px; font-weight: 700; line-height: 1; letter-spacing: .04em; text-transform: uppercase; color: var(--k-mu); }
#site .wmc { position: relative; z-index: 1; display: grid; align-content: center; gap: 14px; }
#site .wmc.a { gap: 46px; }
@media (max-width: 760px) {
  /* three rows instead of three columns; wires then leave and enter top and bottom */
  #site .wm { --stack: 1; grid-template-columns: 1fr; grid-template-rows: none; row-gap: 44px; padding: 16px 10px 20px; }
  #site .wmh, #site .wm .msg { display: none; }
  #site .wmc, #site .wmc.a { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; align-content: start; }
  #site .vn { grid-template-columns: 1fr; justify-items: center; text-align: center; row-gap: 6px; padding: 9px 3px 8px; border-radius: 10px; }
  #site .vn .ic { grid-row: auto; width: 30px; height: 30px; border-radius: 8px; }
  #site .vn .ico { width: 17px; height: 17px; }
  #site .vn b { white-space: normal; overflow: visible; font-size: 12.5px; line-height: 1.2; }
  #site .vn em { display: none; }
  #site .vn.pi::before { left: 50%; top: -5px; margin: 0 0 0 -5px; }
  #site .vn.po::after { right: auto; left: 50%; top: auto; bottom: -5px; margin: 0 0 0 -5px; }
}
html.js-anim #site .vn em.tty span:nth-child(2), html.js-anim #site .vn em.tty span:nth-child(2)::after { animation-delay: 5.33s; }
html.js-anim #site .vn em.tty span:nth-child(3), html.js-anim #site .vn em.tty span:nth-child(3)::after { animation-delay: 10.67s; }
@media (max-width: 760px) {
  #site .vn em.tty { display: none; }
  #site .vn { align-content: start; }
}
@keyframes sitein { from { opacity: .01; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes fppulse { 0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--k-acc) 20%, transparent); }
                     50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--k-acc) 6%, transparent); } }
@keyframes endpulse { 0% { box-shadow: 0 0 0 0 rgba(159,232,112,.6); } 100% { box-shadow: 0 0 0 16px rgba(159,232,112,0); } }

/* the homepage FAQ heading is centred over its two columns (James 2026-10-20) */
#site .faq .bhead { margin-left: auto; margin-right: auto; text-align: center; }