/* /work/: the system map in the hero (also on the homepage), four case studies, and the flow (the shared timeline).
   Layout only; every color, size and radius comes from ka.css tokens. */
/* hero: copy on the left, the system map on the right and large (it leads the hero); below the copy
   on phones */
.work-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,34rem);gap:36px clamp(40px,4vw,64px);align-items:center}
.work-hero h1{max-width:12ch}
.work-hero.hero.page .sub{margin-bottom:0}
@media (min-width:961px){.work-hero .sm-flow{--tile:52px}.work-hero .sm-ico svg{width:24px;height:24px}.work-hero .sysmap{padding:22px 18px 12px}}
@media (max-width:960px){.work-grid{grid-template-columns:1fr}.work-hero h1{max-width:22ch}.sysmap{max-width:30rem}}

/* the system map: the four products as a small star chart. Tessera, Emblema and Sentinel sit in a
   row on one wire (the pipeline); three feeds run from them down to Opus, which reads all three. The
   wires are one SVG (viewBox 600x210) whose box starts at the top row's tile centers and ends at
   Opus's (the negative margins below), so the lines meet every tile at any width with no script.
   Static and complete without JS. work.js adds .sm-live and draws it once: the stars come up, an
   insight runs the pipeline and lights each tile, then three signals run the feeds into Opus, which
   lights and sends its brief out. GSAP scales tiles and ripples, moves the comets and the stars, and
   sets the wires' dash offsets; CSS here transitions only colors, shadows, the ::before overlay and
   the wires' opacity on hover, so the two never touch the same property. */
.sysmap{position:relative;overflow:hidden;padding:16px 14px 8px;border-radius:var(--r-lg)}
.sm-sky{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.sm-sky circle{fill:var(--blue2);opacity:.26}
.sm-sky circle.b{fill:var(--sky);opacity:.62}
.sm-sky circle.c{fill:var(--sky);opacity:.42}
.sm-con path{fill:none;stroke:var(--line-2);stroke-width:1;stroke-linejoin:round;stroke-linecap:round}
.sm-sky circle.sm-off{opacity:0}
/* on a phone the sky is cropped at the sides: the two constellations move in, clear of the card edges */
@media (max-width:600px){.sm-con path:first-child{translate:34px 0}.sm-con path:last-child{translate:-34px 0}}
.sm-flow{--tile:44px;--pb:8px;position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;padding:0;margin:0}
.sm-node{position:relative;display:flex;min-width:0}
.sm-node a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:10px;min-width:0;padding:6px 6px var(--pb);border-radius:14px;color:inherit;text-align:center;text-decoration:none;background:none;transition:background-color var(--dur-hover) var(--ease-ui);-webkit-tap-highlight-color:transparent}
.sm-node a:hover{color:inherit;background-color:var(--tint)}
.sm-node a:active{background-color:var(--tint-2)}
.sm-node a:focus-visible{outline-offset:-2px}
.sm-opus{grid-column:1/-1;justify-self:center;align-self:start}
.sm-opus a{justify-content:flex-start;gap:13px;padding:var(--pb) 18px 10px}
.sm-ico{position:relative;z-index:2;isolation:isolate;flex:none;display:grid;place-items:center;width:var(--tile);height:var(--tile);border-radius:13px;background:var(--grad-btn);color:#fff;box-shadow:0 0 0 5px var(--surface),0 6px 16px rgb(29 78 216/.22)}
.sm-ico svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* Opus is the hub: the ink tile with a sky halo */
.sm-opus .sm-ico{background:var(--ink);box-shadow:0 0 0 5px var(--surface),0 0 0 6.5px rgb(56 189 248/.45),0 8px 22px rgb(10 21 40/.28)}
.sm-t{display:block;min-width:0}
.sm-t b{display:block;font:600 var(--fs-lg)/1.2 var(--disp);letter-spacing:-.01em;color:var(--ink);transition:color var(--dur-hover) var(--ease-ui)}
.sm-t>span{display:block;margin-top:3px;font-size:var(--fs-sm);line-height:1.35;color:var(--mut);text-wrap:balance}
/* the wires: from the top row's tile centers (y 0) to Opus's (y 210) */
.sm-wires{grid-column:1/-1;position:relative;z-index:1;aspect-ratio:600/210;margin:calc(var(--tile) / -2 - var(--pb)) 0;pointer-events:none}
.sm-wires svg{display:block;width:100%;height:100%;overflow:visible}
.sm-s1{stop-color:var(--blue2)}
.sm-s2{stop-color:var(--sky)}
.sm-w{fill:none;stroke-linecap:round;transition:opacity var(--dur-ui) var(--ease-ui)}
.sm-pipe{stroke:url(#sm-gp);stroke-width:3.4}
.sm-feed{stroke:url(#sm-gf);stroke-width:2.6}
/* pointing at a product lights its own wires and dims the rest */
@media (hover:hover) and (pointer:fine){
  .sm-node a:hover .sm-t b{color:var(--blue)}
  .sm-flow:has(.sm-node a:hover) .sm-w{opacity:.22}
  .sm-flow:has([data-sm=tessera] a:hover) :is([data-w=te],[data-w=to]),
  .sm-flow:has([data-sm=emblema] a:hover) :is([data-w=te],[data-w=es],[data-w=eo]),
  .sm-flow:has([data-sm=sentinel] a:hover) :is([data-w=es],[data-w=so]),
  .sm-flow:has([data-sm=opus] a:hover) :is([data-w=to],[data-w=eo],[data-w=so]){opacity:1}
}
.sysmap>a.more{position:relative;z-index:1;display:flex;justify-content:center;margin:2px auto 0}
/* the comets (work.js puts them in the wires' row, so they pass under the tiles): a bright head with
   a tail that trails along the wire */
.sm-pk{position:absolute;left:0;top:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#fff;box-shadow:0 0 0 2.5px rgb(56 189 248/.85),0 0 18px 5px rgb(56 189 248/.7);pointer-events:none;opacity:0}
.sm-pk::before{content:"";position:absolute;right:50%;top:50%;width:54px;height:3px;margin-top:-1.5px;border-radius:3px;background:linear-gradient(90deg,rgb(56 189 248/0),rgb(56 189 248/.95))}
.sm-rip{position:absolute;inset:0;z-index:-2;border-radius:inherit;box-shadow:0 0 0 1.5px var(--sky);opacity:0;pointer-events:none}
/* live: tiles start unlit and light as the insight reaches them */
.sm-live .sm-ico{background:var(--surface);color:var(--blue);box-shadow:0 0 0 5px var(--surface),inset 0 0 0 1.5px var(--line-2);transition:color var(--dur-ui) var(--ease-ui),box-shadow var(--dur-ui) var(--ease-ui)}
.sm-live .sm-ico::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--grad-btn);opacity:0;transition:opacity var(--dur-ui) var(--ease-ui)}
.sm-live .sm-opus .sm-ico::before{background:var(--ink)}
.sm-live .sm-node.on .sm-ico{color:#fff;box-shadow:0 0 0 5px var(--surface),0 6px 16px rgb(29 78 216/.22)}
.sm-live .sm-opus.on .sm-ico{box-shadow:0 0 0 5px var(--surface),0 0 0 6.5px rgb(56 189 248/.45),0 8px 22px rgb(10 21 40/.28)}
.sm-live .sm-node.on .sm-ico::before{opacity:1}
@media (max-width:600px){
  .sysmap{padding:14px 8px 6px}
  .sm-flow{--tile:40px}
  .sm-ico{border-radius:12px}
  .sm-node a{gap:8px;padding-left:4px;padding-right:4px}
  .sm-t b{font-size:17px}
  .sm-t>span{font-size:var(--fs-xs)}
}
@media print{.sm-pk{display:none}}

/* each case study carries a small copy of the system map with its own product lit, beside the text
   from 1100px (the column the text leaves empty); it stays in view while the case is read */
.case-map{display:none}
@media (min-width:1100px){
  .case{display:grid;grid-template-columns:minmax(0,1fr) 240px;column-gap:clamp(40px,5vw,72px)}
  .case>*{grid-column:1}
  .case>.case-map{display:block;grid-column:2;grid-row:1/span 40;align-self:start;position:sticky;top:calc(var(--hdr-h) + 40px)}
}
.case-map svg{display:block;width:100%;height:auto;overflow:visible}
.cm-sky circle{fill:var(--blue2);opacity:.28}
.cm-w{fill:none;stroke:var(--line-2);stroke-width:2;stroke-linecap:round}
.cm-w.on{stroke:var(--blue2);stroke-width:2.6}
.cm-n rect{fill:var(--surface);stroke:var(--line-2);stroke-width:1.5}
.cm-n .cm-i{fill:none;stroke:var(--mut);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cm-n text{font:600 12.5px var(--sans);fill:var(--mut)}
.cm-n.on rect{fill:var(--blue);stroke:none}
.cm-n.on .cm-i{stroke:#fff}
.cm-n.on text{fill:var(--ink);font-weight:700}
.cm-n[data-n=o].on rect{fill:var(--ink)}
.cm-ring{fill:none;stroke:var(--sky);stroke-width:1.5;opacity:0}

.case h2{max-width:30ch}
.case .case-h{font:700 var(--fs-xs)/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin:24px 0 8px}
.case p{max-width:68ch}
.case p.kicker{font-size:var(--fs-xs)} /* a card's paragraph size outranked the kicker's (16.5px) */
.case .case-stats .proof p{font-size:var(--fs-sm)}

/* the flow is the shared timeline (timeline.css): Tessera, Emblema and Sentinel as a chain of three,
   then a fan that gathers all three into Opus (the hero map's shape). Wide: a bracket drops from the
   three steps to Opus, which sits under the middle one. Narrow: the track runs on from step 3 to
   step 4, and the three names join it from the side. work.js draws the fan once on arrival. */
.together .timeline{margin-top:28px}
.fan,.flow-opus{--node:44px;--tl-node:44px;--tl-gap:22px}
.fan{position:relative}
.flow-opus{margin-top:0}
.flow-opus::before{display:none}
.flow-opus .tl-n{background:var(--ink);box-shadow:0 0 0 6px var(--bg),0 0 0 7.5px rgb(56 189 248/.45),0 8px 22px rgb(10 21 40/.28)}
.flow-opus .tl-body>p:not(.tl-when){font-size:var(--fs-ui)}
@media (min-width:961px){
  .fan{height:64px;margin:26px 0 0 calc(var(--node) / 2 - 1px);width:calc((100% + 28px) * 2 / 3 + 2px);border:2px solid var(--blue2);border-top:0;border-radius:0 0 18px 18px}
  .fan::before,.fan::after{content:"";position:absolute;left:calc(50% - 1px);width:2px;background:var(--blue2)}
  .fan::after{top:0;bottom:0;opacity:.45}
  .fan::before{top:100%;height:24px}
  .fan span{display:none}
  .flow-opus{grid-template-columns:var(--node) minmax(0,1fr);max-width:calc((100% + 28px) * 2 / 3);margin-left:calc((100% + 28px) / 3);padding-top:24px}
}
@media (max-width:960px){
  .flow .tl-step:last-child::before{content:"";position:absolute;left:calc(var(--tl-node) / 2 - 1px);top:calc(var(--tl-node) / 2);bottom:0;width:2px;background:var(--blue2);opacity:.45;pointer-events:none}
  .fan{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:16px 0 18px calc(var(--node) + 22px)}
  .fan::before{content:"";position:absolute;left:calc(var(--node) / 2 - 1px);top:0;bottom:0;width:2px;background:var(--blue2);opacity:.45}
  .fan span{position:relative;padding:4px 10px;border-radius:999px;background:var(--tint);box-shadow:inset 0 0 0 1px var(--tint-line);font:600 var(--fs-xs)/1.3 var(--sans);color:var(--blue)}
  .fan span::before{content:"";position:absolute;right:100%;top:50%;width:calc(var(--node) / 2 + 22px - 1px);height:2px;background:var(--blue2);opacity:.45}
}
@media (max-width:600px){.fan,.flow-opus{--node:36px;--tl-node:36px;--tl-gap:16px}.fan{padding-left:calc(var(--node) + 16px)}.fan span::before{width:calc(var(--node) / 2 + 16px - 1px)}}
.together .gate{margin:36px 0 22px;border-radius:var(--r);padding:18px 24px;background:var(--tint);border:1px solid var(--tint-line);display:flex;gap:6px 18px;align-items:baseline;flex-wrap:wrap}
.together .gate b{font:600 var(--fs-xl)/1.2 var(--disp);color:var(--ink);white-space:nowrap}
.together .gate span{color:var(--body);font-size:var(--fs-ui)}

/* the homepage's four work cards (.wg-4): two by two from 600px, one row from 1040px */
@media (min-width:600px){.workgrid.wg-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){.workgrid.wg-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* each card's result tile (the /work/ case study's own .proof), compact inside the card; the sentence above
   it takes the spare height, so the four tiles line up */
.wg-4>a.work{display:flex;flex-direction:column}
.work .proof{margin-top:16px;padding:12px 14px}
.work .proof .pnum{font-size:24px}
.work .proof p{flex:none;font-size:13px}

/* services behind the work */
.work-svc{margin-top:clamp(48px,7vw,80px);max-width:720px}
.work-svc h2{font-size:var(--fs-2xl);margin-bottom:10px}
.work-svc p{font-size:var(--fs-base);margin-bottom:18px}
/* How we plan client builds: the card after "How they fit together" (each tool leaves records the next one
   starts from). The stacks are the records a build starts with: one, two, three layers, --d1 to --d3. */
.compound{margin-top:clamp(36px,5vw,56px);padding:clamp(24px,4vw,44px);display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:28px clamp(28px,4vw,52px);align-items:center;box-shadow:inset 4px 0 0 var(--blue2),var(--sh)}
.compound-text h2{margin-bottom:14px}
.compound-text p{font-size:var(--fs-base);max-width:62ch}
.compound-text p+p{margin-top:12px}
.compound-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.compound-steps li{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-areas:"s n" "s t";gap:2px 14px;align-items:center;padding:14px 16px;border-radius:var(--r-sm);background:var(--tint);border:1px solid var(--tint-line)}
.cs-stack{grid-area:s;align-self:center;display:flex;flex-direction:column-reverse;gap:3px;width:34px}
.cs-stack i{display:block;height:9px;border-radius:3px;background:var(--d1)}
.cs-stack i:nth-child(2){background:var(--d2)}
.cs-stack i:nth-child(3){background:var(--d3)}
.cs-n{grid-area:n;font:600 var(--fs-ui)/1.3 var(--sans);color:var(--ink)}
.cs-t{grid-area:t;font-size:var(--fs-sm);line-height:1.45;color:var(--body)}
@media (max-width:860px){.compound{grid-template-columns:minmax(0,1fr)}}