/* =====================================================================
   WERKR — the scenes
   Loaded after css/story.css, which owns the chassis: the blueprint
   palette, the pinned runway, the rail, the copy column, the stacked
   canvas, the card and list primitives, the intro and the closing claim.

   What is here is only what is particular to this argument — a company
   being founded and equipped piece by piece, the operating system that
   runs it, the shared layer above it, one live project, the loop that
   project feeds, and the network it all becomes.

   The performance contract is the site's: every property the scroll
   runtime writes is consumed by `transform` or `opacity`. The two
   exceptions are SVG stroke dashes, where a draw-on cannot be expressed
   as either.
   ===================================================================== */

.st-page{
  /* The three trades have to be told apart without the drawing becoming
     colourful. Two are the palette's own blues; the third is a muted
     indigo that reads as a third channel and nothing more. */
  --wk-t1: #4a90ff;   /* plumbing */
  --wk-t2: #7fc7ff;   /* electrical */
  --wk-t3: #8f9fe8;   /* drywall */
}

/* Three of the four layers here lay their scene out in flow rather than
   absolutely, so the implicit row of the canvas would size to whichever
   of them is tallest — and on a phone that pushed the bottom of stage 02
   and stage 06 out under the fold, where the pin clips it. Capping the
   row at the canvas hands every layer the same height to work inside. */
.st-canvas{grid-template-rows:minmax(0,1fr)}

/* =====================================================================
   01 · 02 · 03 — THE COMPANY, AND WHAT IS BUILT AROUND IT
   One layer, three phases. Stage 01 founds it, 02 puts it on one system,
   03 lifts its overhead into the shared layer. The drawing never leaves
   and is never replaced — which is the whole point the stages make.
   ===================================================================== */
.wk-l-biz{opacity:var(--on,0)}
.wk-draw{
  position:absolute;inset:0;
  transform:translate3d(var(--bx,0%),var(--by,0%),0) scale(var(--bs,1));
  transform-origin:50% 60%;
}
.wk-draw svg{width:100%;height:100%;display:block;overflow:visible}

/* --- the founding: nothing is built yet --- */
/* the Meister is there before the company is, and stays through all of
   it — the one figure the whole story is built around */
.wk-meister{
  opacity:var(--who,0);
  transform:translate3d(calc(var(--dock,0) * 12px),0,0);
}
/* The plot is dashed because nothing is built yet, so its own stroke
   pattern is already spoken for and the reveal cannot be a dash-offset.
   The ground line under it is solid, and sweeps out instead — which is
   what makes the first frame read as a site being set out. */
.wk-ground-l{
  transform:scaleX(var(--who,1));
  transform-origin:280px 372px;transform-box:view-box;
}
.wk-plot{opacity:calc(var(--who,0) * (1 - var(--solid,0)))}
/* the silhouette of what is not built yet — it gives way as the real
   outline arrives, so "dashed becomes solid" is one continuous move */
.wk-ghost{opacity:calc(var(--who,0) * (1 - var(--solid,0)))}

/* Each of the five deliveries completes one part of the building. --k is
   the delivery it belongs to, so the structure grows in step with the
   business-in-a-box docking beside it. */
.wk-part{
  --pk:clamp(0,calc(var(--dock,0) * 9 - var(--k) * 1.2 - 1),1);
  opacity:var(--pk);
  transform:translate3d(0,calc((1 - var(--pk)) * 9px),0);
}

/* --- 02: the tangle, and the same routes reorganised ---
   Both are gated on --proc, the window in which stage 02 is on screen:
   without it the tangle hangs over the company from the first frame,
   where the argument has not been made yet. */
.wk-mess{opacity:calc(var(--proc,0) * (1 - var(--tidy,0)))}
.wk-tidy{opacity:calc(var(--proc,0) * var(--tidy,0))}
/* the frame the Werkr Office draws around the whole operation */
.wk-osframe{opacity:var(--osf,0)}

/* --- 03: the administration that leaves the company --- */
.wk-admin{
  opacity:calc(var(--adminIn,0) * (1 - var(--lift,0)));
  transform:translate3d(0,calc(var(--lift,0) * -84px),0);
}

/* ---------- 01 · the evaluation ---------- */
.wk-eval{
  position:absolute;right:0;top:50%;width:37%;min-width:178px;max-width:224px;
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:5px;
  transform:translateY(-50%);
  opacity:var(--vis,0);
}
.wk-eval li{
  --ck:clamp(0,calc(var(--p,0) * 4.8 - var(--k) * .6),1);
  --vk:clamp(0,calc(var(--val,0) * 4.8 - var(--k) * .6),1);
  position:relative;display:flex;align-items:center;gap:8px;
  padding:6px 10px;border-radius:6px;
  background:var(--st-glass);
  border:1px solid rgba(127,199,255,calc(.14 + var(--vk) * .04));
  opacity:var(--ck);
  transform:translate3d(calc((1 - var(--ck)) * 20px),0,0);
}
.wk-eval li::before{
  content:"";position:absolute;left:-22px;top:50%;width:18px;height:1px;
  background:rgba(127,199,255,.3);
  transform:scaleX(var(--ck));transform-origin:right;
}
.wk-eval b{font-size:10.5px;font-weight:700;color:#fff;letter-spacing:-.05px}
/* the tick is two marks in one box: an open circle waiting, and the
   check that replaces it once the criterion passes */
.wk-tick{
  position:relative;width:14px;height:14px;flex:none;margin-left:auto;border-radius:50%;
  border:1px solid rgba(127,199,255,calc(.4 * (1 - var(--vk))));
  background:rgba(158,219,99,calc(var(--vk) * .18));
}
.wk-tick::after{
  content:"";position:absolute;left:4px;top:1.5px;width:4px;height:7px;
  border:solid var(--st-green);border-width:0 1.6px 1.6px 0;
  transform:rotate(42deg) scale(var(--vk));transform-origin:50% 50%;
  opacity:var(--vk);
}

/* ---------- 01 · the founding moment ----------
   The capital marker and the confirmation that follows it are the same
   statement at two moments, so they take the same slot above the plot
   and hand over to each other rather than appearing side by side. */
.wk-cap,.wk-badge{position:absolute;left:12%;top:28%}
.wk-cap{
  margin:0;
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 10px;align-items:center;
  padding:9px 15px 9px 12px;border-radius:9px;
  background:var(--st-glass-2);border:1px solid rgba(74,144,255,.36);
  box-shadow:0 0 0 4px rgba(74,144,255,.07);
  opacity:var(--vis,0);
  transform:translate3d(calc((1 - var(--vis,0)) * -12px),0,0);
}
.wk-cap svg{
  grid-row:1 / 3;width:21px;height:21px;fill:none;stroke:var(--st-blue);
  stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
}
.wk-cap b{font-size:11px;font-weight:700;color:#fff;letter-spacing:-.1px}
.wk-cap span{font-size:8.5px;letter-spacing:1.3px;text-transform:uppercase;color:var(--st-print)}

/* ---------- 01 · business in a box ----------
   Five deliveries that fly in from the edges of the frame and dock in a
   row along the foundation. --fx/--fy is where each one comes from; the
   leader line above it and the dot on its corner appear a beat later,
   when the part of the building it pays for has been built. */
.wk-kit{
  position:absolute;left:0;right:0;bottom:18%;list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;
  opacity:var(--vis,1);
}
.wk-kit li{
  --dk:clamp(0,calc(var(--dock,0) * 9 - var(--k) * 1.2),1);
  --dg:clamp(0,calc(var(--dock,0) * 9 - var(--k) * 1.2 - 1.2),1);
  position:relative;display:flex;align-items:center;justify-content:center;gap:7px;
  padding:7px 10px;border-radius:8px;
  background:var(--st-glass-2);border:1px solid rgba(127,199,255,.22);
  opacity:calc(var(--dk) * var(--vis,1));
  transform:translate3d(
    calc((1 - var(--dk)) * var(--fx,0px)),
    calc((1 - var(--dk)) * var(--fy,0px)),0);
}
.wk-kit svg{
  width:15px;height:15px;flex:none;fill:none;stroke:var(--st-print);
  stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
}
.wk-kit b{font-size:10px;font-weight:700;color:#fff;letter-spacing:.2px;white-space:nowrap}
/* the line up into the plot: the delivery is docked, not just parked */
.wk-kit li::before{
  content:"";position:absolute;left:50%;bottom:100%;width:1px;height:16px;
  background:rgba(127,199,255,.3);
  transform:scaleY(var(--dg));transform-origin:bottom;
}
.wk-kit li::after{
  content:"";position:absolute;right:-3px;top:-3px;width:8px;height:8px;border-radius:50%;
  background:var(--st-green);box-shadow:0 0 0 3px rgba(158,219,99,.16);
  opacity:var(--dg);transform:scale(calc(.4 + var(--dg) * .6));
}

/* ---------- 01 · the confirmation ---------- */
/* The founded company, stated once. It carries the page's own blue like
   everything else on this layer — a second hue here only read as a
   status light from some other product. */
.wk-badge{
  margin:0;display:flex;align-items:center;gap:8px;
  padding:9px 15px;border-radius:99px;
  background:rgba(74,144,255,.12);border:1px solid rgba(74,144,255,.42);
  font-size:10px;font-weight:700;letter-spacing:1.7px;text-transform:uppercase;
  color:var(--st-blue);white-space:nowrap;
  opacity:var(--vis,0);
  transform:translate3d(0,calc((1 - var(--vis,0)) * 10px),0);
}

/* ---------- 02 · the Werkr Office ----------
   Not SaaS cards: one column of operating layers, each on a leader line
   into the company, each with the German module name it actually has and
   the English gloss underneath. */
.wk-os{
  position:absolute;right:0;top:50%;width:44%;min-width:198px;max-width:262px;
  transform:translateY(-50%);opacity:var(--vis,0);
}
.wk-os-t{
  margin:0 0 9px;font-size:10px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--st-blue);
}
.wk-mods{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.wk-mods li{
  --mk:clamp(0,calc(var(--lock,0) * 4.8 - var(--k) * .6),1);
  position:relative;display:flex;flex-direction:column;gap:1px;
  padding:6px 11px;border-radius:6px;
  background:var(--st-glass);border:1px solid rgba(127,199,255,.16);
  opacity:var(--mk);
  /* they slide the last bit of the way in, which is what "locking into
     place" has to look like if it is not going to look like a fade */
  transform:translate3d(calc((1 - var(--mk)) * 22px),0,0);
}
.wk-mods li::before{
  content:"";position:absolute;left:-22px;top:50%;width:18px;height:1px;
  background:rgba(74,144,255,.42);
  transform:scaleX(var(--mk));transform-origin:right;
}
.wk-mods b{font-size:10.5px;font-weight:700;color:#fff;letter-spacing:-.05px}
.wk-mods span{font-size:8px;letter-spacing:1px;text-transform:uppercase;color:var(--st-ink-2)}

/* ---------- 03 · the shared layer ---------- */
.wk-hub{
  position:absolute;left:0;right:0;top:0;opacity:var(--vis,0);
  display:flex;flex-direction:column;align-items:center;gap:4px;
}
.wk-hub-draw{width:100%;height:min(40vh,272px)}
.wk-hub-draw svg{width:100%;height:100%;display:block;overflow:visible}
/* the five central functions, arriving from below because below is
   where they came from */
.wk-fn{
  --fk:clamp(0,calc(var(--pull,0) * 4.8 - var(--k) * .6),1);
  opacity:var(--fk);
  transform:translate3d(0,calc((1 - var(--fk)) * 44px),0);
}
.wk-spoke{
  --fk:clamp(0,calc(var(--pull,0) * 4.8 - var(--k) * .6),1);
  opacity:calc(var(--fk) * .8);
}
.wk-hub-draw text{fill:rgba(230,241,255,.86);stroke:none;font-size:7.5px;font-weight:700;letter-spacing:.9px}
.wk-hub-draw .wk-core{fill:#fff;font-size:9px;letter-spacing:1.7px}
/* the line back down into the company: it has to be drawn, not faded,
   or the connection reads as decoration */
.wk-trunk{stroke-dasharray:var(--len,54);stroke-dashoffset:calc(var(--len,54) * (1 - var(--trunk,0)))}
.wk-trunk-a{opacity:var(--trunk,0)}
.wk-hub-note{
  margin:0;font-size:11px;letter-spacing:.3px;color:var(--st-ink-2);
  opacity:var(--note,0);
}
.wk-hub-note b{color:var(--st-blue);font-weight:700}

/* =====================================================================
   04 — ONE LIVE PROJECT
   ===================================================================== */
.wk-l-exec{
  display:flex;flex-direction:column;justify-content:center;gap:14px;
  opacity:var(--on,0);
}
.wk-app{
  align-self:flex-start;margin:0;display:flex;align-items:center;gap:8px;
  padding:6px 14px;border-radius:99px;
  background:rgba(74,144,255,.14);border:1px solid rgba(74,144,255,.42);
  font-size:9.5px;font-weight:700;letter-spacing:1.9px;text-transform:uppercase;color:#fff;
  opacity:var(--vis,0);
}
.wk-app i{
  width:6px;height:6px;border-radius:50%;background:var(--st-blue);
  box-shadow:0 0 0 3px rgba(74,144,255,.2);
}
.wk-time{
  list-style:none;margin:0;padding:0;position:relative;
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;
}
.wk-time::before{
  content:"";position:absolute;left:8%;right:8%;top:5px;height:1px;
  background:rgba(127,199,255,.16);
}
.wk-time li{
  --sk:clamp(0,calc(var(--run,0) * 6.6 - var(--k)),1);
  position:relative;padding-top:16px;text-align:center;
  font-size:8.5px;letter-spacing:1.1px;text-transform:uppercase;
  color:rgba(127,139,152,calc(.6 + var(--sk) * .4));
}
.wk-time li::before{
  content:"";position:absolute;left:50%;top:1px;width:9px;height:9px;margin-left:-4.5px;
  border-radius:50%;background:var(--st-bg);
  border:1px solid rgba(127,199,255,calc(.24 + var(--sk) * .5));
}
.wk-time li::after{
  content:"";position:absolute;left:50%;top:4px;width:3px;height:3px;margin-left:-1.5px;
  border-radius:50%;background:var(--st-green);
  transform:scale(var(--sk));
}

/* Content height rather than flex:1 — filling the frame pushed the
   timeline to the very top of the canvas and left the project stranded
   in the middle of a column it did not need. */
.wk-exec-row{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:16px;height:min(48vh,384px);
}
.wk-proj{position:relative;inset:auto;transform:none;min-height:0}
.wk-exec-side{display:flex;flex-direction:column;justify-content:center;gap:12px;min-width:0}

.wk-trades{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.wk-trades li{
  display:flex;align-items:baseline;gap:9px;padding:6px 10px;border-radius:6px;
  background:var(--st-glass);border:1px solid rgba(127,199,255,.14);
  border-left:2px solid var(--tc);
}
.wk-trades li[data-t="1"]{--tc:var(--wk-t1)}
.wk-trades li[data-t="2"]{--tc:var(--wk-t2)}
.wk-trades li[data-t="3"]{--tc:var(--wk-t3)}
.wk-trades b{font-size:11.5px;font-weight:700;color:#fff;letter-spacing:.2px}
.wk-trades span{margin-left:auto;font-size:8.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--st-ink-2)}

.wk-status{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.wk-status li{
  --ok:clamp(0,calc(var(--done,0) * 4.6 - var(--k) * .7),1);
  position:relative;padding:4px 0 4px 20px;
  font-size:10px;letter-spacing:.3px;
  color:rgba(230,241,255,calc(.4 + var(--ok) * .5));
}
.wk-status li::before{
  content:"";position:absolute;left:0;top:50%;width:12px;height:12px;margin-top:-6px;
  border-radius:50%;border:1px solid rgba(127,199,255,calc(.36 * (1 - var(--ok))));
  background:rgba(158,219,99,calc(var(--ok) * .18));
}
.wk-status li::after{
  content:"";position:absolute;left:3.5px;top:50%;width:3.5px;height:6px;margin-top:-4px;
  border:solid var(--st-green);border-width:0 1.5px 1.5px 0;
  transform:rotate(42deg) scale(var(--ok));opacity:var(--ok);
}

/* work packages crossing the building, one trade at a time */
.wk-pkg{
  --wk:clamp(0,calc(var(--work,0) * 14 - var(--k)),1);
  transform:scaleX(var(--wk));transform-origin:0 50%;transform-box:fill-box;
}
.wk-pkg-o{opacity:calc(.2 + var(--work,0) * .35)}
.wk-scaff{opacity:calc(1 - var(--work,0) * .72)}

/* =====================================================================
   05 — THE IMPROVEMENT LOOP
   The project's data goes back into the Werkr Office from stage 02 rather
   than into a new system, so the ring's core carries that name.
   ===================================================================== */
.wk-l-loop{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1fr);
  grid-template-rows:auto auto auto;
  gap:14px 22px;align-items:center;align-content:center;
  opacity:var(--on,0);
}
.wk-ring{grid-column:1;grid-row:1;position:relative;height:min(42vh,336px)}
.wk-ring svg{width:100%;height:100%;display:block;max-height:42vh}
.wk-arc{
  stroke-dasharray:var(--len,760);
  stroke-dashoffset:calc(var(--len,760) * (1 - var(--turn,0)));
}
/* the data itself, crawling back around the loop as the page scrolls */
.wk-stream{
  stroke-dasharray:2.5 20;
  stroke-dashoffset:calc(var(--flow,0) * -180px);
  opacity:calc(var(--flow,0) * .9);
}
.wk-node{
  --nk:clamp(0,calc(var(--turn,0) * 7 - var(--k) * 1.05),1);
  opacity:var(--nk);
}
.wk-ring text{fill:rgba(230,241,255,.8);stroke:none;font-size:9px;font-weight:700;letter-spacing:.8px}
.wk-ring .wk-core{fill:rgba(127,199,255,.72);stroke:none;font-size:8.5px;letter-spacing:1.5px}

.wk-kpis{grid-column:2;grid-row:1;list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.wk-kpis li{
  --qk:clamp(0,calc(var(--gain,0) * 4.8 - var(--k) * .6),1);
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:7px 10px;align-items:center;padding:7px 0 9px;
  border-top:1px solid rgba(127,199,255,.09);
  opacity:var(--qk);
}
.wk-kpis li:first-child{border-top:none}
.wk-kpis b{font-size:11px;font-weight:600;letter-spacing:.2px;color:var(--st-ink)}
/* direction of travel, not a number: the brief's own framing, and the
   only honest way to show an outcome that has not happened yet */
.wk-tr{
  width:9px;height:9px;justify-self:end;
  border-right:1.6px solid var(--st-green);border-top:1.6px solid var(--st-green);
  transform:rotate(-45deg) scale(var(--qk));
}
.wk-kpis li[data-dir="down"] .wk-tr{
  border-color:var(--st-print);transform:rotate(135deg) scale(var(--qk));
}
.wk-bar{
  grid-column:1 / -1;display:block;height:2px;border-radius:2px;
  background:rgba(127,199,255,.12);position:relative;
}
.wk-bar::after{
  content:"";position:absolute;inset:0;border-radius:2px;background:var(--st-green);
  transform:scaleX(calc(var(--v) * var(--qk)));transform-origin:left;
}
.wk-kpis li[data-dir="down"] .wk-bar::after{background:rgba(127,199,255,.55)}

/* what actually flows back */
.wk-feed{
  grid-column:1 / -1;grid-row:2;list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:5px;justify-content:center;
}
.wk-feed li{
  --dk:clamp(0,calc(var(--feed,0) * 4.8 - var(--k) * .6),1);
  padding:5px 10px;border-radius:5px;
  background:var(--st-glass);border:1px solid rgba(127,199,255,.16);
  font-size:9px;letter-spacing:.5px;color:var(--st-ink-2);
  opacity:var(--dk);
  transform:translate3d(0,calc((1 - var(--dk)) * 26px),0);
}
.wk-loop-note{
  grid-column:1 / -1;grid-row:3;margin:0;text-align:center;
  font-size:9px;letter-spacing:.4px;color:rgba(127,139,152,.7);opacity:var(--gain,0);
}

/* =====================================================================
   06 — THE NETWORK
   The camera does not cut here: stage 06 opens zoomed all the way into
   the same company and pulls back until it is one node among many.
   ===================================================================== */
.wk-l-net{
  display:flex;flex-direction:column;justify-content:center;gap:14px;
  opacity:var(--on,0);
}
.wk-levels{
  list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:8px;
}
.wk-levels li{
  --lk:clamp(0,calc(var(--zoom,0) * 3.6 - var(--k) * .8),1);
  position:relative;padding:5px 11px;border-radius:5px;
  background:var(--st-glass);border:1px solid rgba(127,199,255,.15);
  font-size:8.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--st-ink);opacity:var(--lk);
}
.wk-levels li+li::before{
  content:"";position:absolute;left:-7px;top:50%;width:6px;height:6px;margin-top:-3px;
  border-right:1.3px solid rgba(127,199,255,.4);border-top:1.3px solid rgba(127,199,255,.4);
  transform:translateX(-2px) rotate(45deg) scale(var(--lk));
}
.wk-levels li:last-child{border-color:rgba(74,144,255,.4);color:#fff}

.wk-map{position:relative;flex:none;height:min(52vh,430px);overflow:hidden}
.wk-map svg{width:100%;height:100%;display:block}
/* the whole map on one transform: scaling about the home company keeps
   it still on screen while everything else pulls away from it */
.wk-cam{transform:scale(var(--cam,1));transform-origin:190px 176px;transform-box:view-box}
/* the labels would grow with the camera, so they are counter-scaled and
   stay legible at every point of the pull-back */
.wk-map text{fill:rgba(127,139,152,.9);stroke:none;font-size:calc(7.5px / var(--cam,1));letter-spacing:.9px}
.wk-link{
  --lk:clamp(0,calc(var(--mesh,0) * 4 - var(--k) * .3),1);
  opacity:calc(var(--lk) * .6);
}
.wk-site{
  --sk:clamp(0,calc(var(--sites,0) * 4.4 - var(--k) * .34),1);
  opacity:var(--sk);
  transform:scale(calc(.7 + var(--sk) * .3));
  transform-box:fill-box;transform-origin:50% 100%;
}
/* the company the story has been following is already there */
.wk-home{opacity:1;transform:none}
.wk-site-1 .bp-out{stroke:rgba(74,144,255,.8)}
.wk-site-2 .bp-out{stroke:rgba(127,199,255,.8)}
.wk-site-3 .bp-out{stroke:rgba(143,159,232,.8)}
/* The company the story followed is already in place, but it is drawn in
   its own trade's colour like every other one — a green house in a blue
   map read as a different kind of thing rather than the same thing seen
   earlier. */
.wk-hubn{opacity:var(--mesh,0)}
.wk-hubn text{fill:#e6f1ff;font-size:calc(8.5px / var(--cam,1));letter-spacing:1.4px;font-weight:700}
/* the lockup is knocked out to white by the #wkMarkWhite filter the map
   defines in js/werkr.js, not from here */

.wk-stack{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:5px;align-items:center;
}
.wk-stack li{
  --vk:clamp(0,calc(var(--value,0) * 5 - var(--k) * .58),1);
  padding:5px 10px;border-radius:5px;
  background:var(--st-glass);border:1px solid rgba(127,199,255,.14);
  font-size:9px;letter-spacing:.6px;color:var(--st-ink-2);
  opacity:var(--vk);transform:translate3d(0,calc((1 - var(--vk)) * 8px),0);
}
.wk-stack li+li:not([data-sum])::before{content:"+ ";color:rgba(127,199,255,.5)}
.wk-stack li[data-sum]{
  background:rgba(158,219,99,.1);border-color:rgba(158,219,99,.38);
  color:var(--st-green);font-weight:700;letter-spacing:.9px;
}
.wk-stack li[data-sum]::before{content:"= ";color:rgba(158,219,99,.7)}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */

/* A browser window that is not maximised. The canvas is still beside the
   copy, but it is only about 430px wide — at the full-desktop sizes the
   Werkr Office column landed on top of the office annex. Everything on this
   side of the frame gets one size smaller, and js/werkr.js pushes the
   company further left with its own set of poses. */
@media (min-width:961px) and (max-width:1180px){
  .wk-eval{width:46%;min-width:0;max-width:196px}
  .wk-eval b{font-size:9.5px}
  .wk-os{width:48%;min-width:0;max-width:212px}
  .wk-mods li{padding:5px 9px}
  .wk-mods b{font-size:9.5px}
  .wk-mods span{font-size:7.5px;letter-spacing:.8px}
  .wk-kit{gap:4px}
  .wk-kit li{padding:6px 5px;gap:5px}
  .wk-kit svg{width:13px;height:13px}
  .wk-kit b{font-size:9px}
  .wk-cap{padding:8px 12px 8px 10px}
  .wk-cap b{font-size:10px}
  .wk-hub-draw{height:min(34vh,232px)}
  .wk-exec-row{grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:12px}
  .wk-l-loop{grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:12px 16px}
  .wk-kpis b{font-size:10px}
}
@media (max-width:960px){
  /* 01–03 — the drawing takes the top of the frame, the overlays read
     underneath it. The viewBox is cropped to the plot in js/werkr.js at
     this width, so the company itself draws about half as large again. */
  .wk-draw{inset:0 0 auto 0;height:52%}

  .wk-eval{
    position:absolute;right:0;left:0;top:auto;bottom:0;width:100%;max-width:none;
    transform:none;display:grid;grid-template-columns:1fr 1fr;gap:4px;
  }
  .wk-eval li{padding:5px 8px}
  .wk-eval li::before{display:none}
  .wk-eval b{font-size:9.5px}

  /* the two state chips move directly under the plot they belong to */
  .wk-cap,.wk-badge{left:50%;top:52%}
  .wk-kit{bottom:0}
  .wk-cap{padding:7px 12px 7px 10px;transform:translate3d(-50%,0,0)}
  .wk-cap svg{width:18px;height:18px}
  .wk-cap b{font-size:10px}
  .wk-badge{
    font-size:9px;padding:7px 12px;letter-spacing:1.4px;
    transform:translate3d(-50%,calc((1 - var(--vis,0)) * 8px),0);
  }

  /* five deliveries do not fit across a phone; they wrap to three and
     two, and the fly-in shortens to something a 390px frame can show */
  .wk-kit{bottom:0;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
  .wk-kit li{
    padding:6px 6px;gap:5px;
    transform:translate3d(
      calc((1 - var(--dk)) * var(--fx,0px) * .28),
      calc((1 - var(--dk)) * var(--fy,0px) * .28),0);
  }
  .wk-kit svg{width:13px;height:13px}
  .wk-kit b{font-size:9px}
  .wk-kit li::before{display:none}
  .wk-kit li::after{right:-2px;top:-2px;width:6px;height:6px}

  .wk-os{
    position:absolute;right:0;left:0;top:auto;bottom:0;width:100%;max-width:none;
    transform:none;
  }
  .wk-os-t{margin-bottom:6px;font-size:9px}
  .wk-mods{display:grid;grid-template-columns:1fr 1fr;gap:4px}
  .wk-mods li{padding:5px 8px}
  .wk-mods li::before{display:none}
  .wk-mods b{font-size:9.5px}
  .wk-mods span{font-size:7.5px;letter-spacing:.7px}

  .wk-hub-draw{height:min(30vh,208px)}
  .wk-hub-note{font-size:10px}

  /* 04 — the project keeps the frame, the trades and the checks share a
     row beneath it rather than a column beside it */
  .wk-app{font-size:8.5px;letter-spacing:1.5px;padding:5px 11px}
  /* The drawing took 34vh whatever was left, so on any phone showing the
     browser's own chrome the trades and the checks under it were pushed
     out of the bottom of the frame. It is a column that gives now: the
     side keeps the height its content needs and the drawing takes the
     rest, however much that is. */
  .wk-exec-row{
    display:flex;flex-direction:column;gap:10px;height:auto;flex:1;min-height:0;
  }
  .wk-proj{flex:1;min-height:0}
  .wk-exec-side{flex:none;flex-direction:row;align-items:flex-start;gap:10px}
  .wk-trades,.wk-status{flex:1;min-width:0}
  .wk-trades li{padding:5px 8px;flex-wrap:wrap;gap:2px 8px}
  .wk-trades b{font-size:10.5px}
  .wk-trades span{font-size:7.5px}
  .wk-status li{font-size:9px;padding-left:17px}
  .wk-time li{font-size:7.5px;letter-spacing:.7px}

  /* 05 — the loop above, the movement below */
  .wk-l-loop{grid-template-columns:minmax(0,1fr);gap:10px}
  .wk-ring,.wk-kpis,.wk-feed,.wk-loop-note{grid-column:1}
  .wk-ring{grid-row:1;height:26vh}
  .wk-ring svg{max-height:26vh}
  .wk-kpis{grid-row:2}
  .wk-kpis li{padding:5px 0 7px;gap:5px 8px}
  .wk-kpis li:nth-child(n+5){display:none}
  .wk-kpis b{font-size:10px}
  .wk-feed{grid-row:3;justify-content:flex-start}
  .wk-feed li{font-size:8px;padding:4px 8px}
  .wk-feed li:nth-child(n+5){display:none}
  .wk-loop-note{display:none}

  /* 06 — the levels wrap, the stack stays one reading */
  .wk-levels{flex-wrap:wrap;gap:6px}
  .wk-levels li{font-size:8px;padding:4px 9px}
  .wk-levels li+li::before{display:none}
  /* the levels above it and the stack below it come first; the map takes
     what is left rather than a fixed 34vh that pushed them off a short
     screen */
  .wk-map{flex:1 1 auto;min-height:0;height:auto;max-height:min(34vh,290px)}
  .wk-stack li{font-size:8.5px;padding:4px 8px}
}

@media (max-width:640px){
  .wk-kit{grid-template-columns:1fr 1fr}
  .wk-mods li:nth-child(n+7){display:none}
  .wk-exec-side{flex-direction:column}
  .wk-trades{flex-direction:row}
  .wk-trades span{display:none}
}

/* =====================================================================
   REDUCED MOTION — the end state of every stage, in reading order
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  /* every layer stands in flow and sizes to its own content: the runway
     is gone, so a fixed layer height would only crop the drawings */
  .wk-l-biz,.wk-l-exec,.wk-l-loop,.wk-l-net{height:auto}

  /* --on is what the scroll runtime fades each layer in with, and it
     never runs here — without it every drawing on the page is invisible */
  .wk-l-biz {order:2;display:flex;flex-direction:column;gap:14px;--on:1;
             --who:1;--dock:1;--solid:1;--proc:1;--tidy:1;--osf:1;--adminIn:0;--lift:0}
  .wk-l-exec{order:4;--on:1;--run:1;--work:1;--done:1}
  .wk-l-loop{order:7;--on:1;--turn:1;--flow:1;--gain:1;--feed:1}
  .wk-l-net {order:9;--on:1;--zoom:1;--sites:1;--mesh:1;--value:1}
  /* one drawing has to stand for stages 01 to 03, so it is placed after
     the third statement and the copy reads straight on */
  .st-say:nth-child(3){order:5}
  .st-say:nth-child(4){order:3}

  .wk-ground-l{transform:none}
  .wk-l-biz .wk-draw{position:relative;inset:auto;height:min(46vh,330px);transform:none}
  /* the overlays would all land on top of each other without a timeline
     to separate them; the finished company, the confirmation and the
     shared layer are the three that carry the argument on their own */
  .wk-eval,.wk-os,.wk-cap,.wk-kit{display:none}
  .wk-badge{--vis:1;position:relative;left:auto;bottom:auto;top:auto;transform:none;align-self:flex-start}
  .wk-hub{--vis:1;--pull:1;--trunk:1;--note:1;position:relative;gap:8px}
  .wk-app{--vis:1}
  .wk-exec-row{height:auto}
  .wk-proj{min-height:min(38vh,290px)}
  .wk-l-loop{grid-template-rows:auto auto auto}
  .wk-ring{min-height:min(38vh,280px)}
  .wk-map{height:min(44vh,320px);flex:none}
  .wk-fn,.wk-mods li,.wk-stack li,.wk-levels li,.wk-feed li{transform:none}
  .wk-pkg{transform:none}
  .wk-arc,.wk-trunk{stroke-dashoffset:0}
  .wk-stream{display:none}
  .wk-site{transform:none}
  .wk-cam{transform:none}
}