/* r12q: How we work, hand-drawn vignettes in place of the four line icons (Pat 10 Nov)
   "instead of icons using something more unique, quirky and animated", and "just a little slower".
   Markup: one <span class="fig figN"> per card in index.html (inline SVG, mint line art; dark green on the mint Cartesian card).
   how-r12k.js still builds its round .ic badge; it is hidden here, so its pulse along the arrows is untouched.
   Wobbly pen line: a static feTurbulence + feDisplacementMap filter on each drawing (no animated filter values).
   Motion (transform, opacity, stroke-dashoffset only): draw-on card by card (~1.4 s each), then a calm idle loop per vignette (3 to 6 s, offset).
   Classes come from how-fig-r12q.js (.q-js hides the strokes, .q-on plays). No JS or reduced motion: the drawings sit there, finished and still. */

#how .hp .fn>.ic{display:none!important}

/* ---- the vignette: replaces the 56px badge; a little bigger (98 x 68) ---- */
#how .hp .fig{position:relative;flex:none;display:block;width:106px;height:73px;color:#8FCBB0;--s:.3s;--e:1.8s}
#how .hp .fn.mid .fig{color:#114136}
#how .hp .fig svg{display:block;width:100%;height:100%;overflow:visible}
#how .hp .fig .d{fill:none;stroke:currentColor;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
#how .hp .fig .dt{fill:currentColor;stroke:none}
#how .hp .fig .gl{fill:currentColor;fill-opacity:.14;stroke:none}
#how .hp .fig .spd path{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
#how .hp .fig .spd{opacity:0}
#how .hp .fig *{transform-box:fill-box}

/* each card draws a little after the one before it */
#how .hp .fig1{--s:.3s;--e:1.8s}
#how .hp .fig2{--s:.75s;--e:2.2s;--fx:80}  /* --e for the plane: first flight lands with the pulse along the arrow after "You" */
#how .hp .fig3{--s:1.2s;--e:2.7s}
#how .hp .fig4{--s:1.65s;--e:3.15s}
/* the You card sits above its neighbour so the paper plane can cross the arrow */
#how .hp .flow>.fn:nth-child(3){position:relative;z-index:4}

/* ---- tuning for the layout: desktop spacing keeps the card heights as they were ---- */
@media (min-width:861px){
  #how .hp .fn{padding-top:16px}
  #how .hp .fn .fig+b{margin-top:14px}
}

/* ---- phones: the flow stays stacked; the badge column grows from 48 to 78 for the drawing ---- */
@media (max-width:860px){
  #how .hp .fn{grid-template-columns:84px minmax(0,1fr);column-gap:12px}
  #how .hp .fig{grid-row:1/3;grid-column:1;width:84px;height:58px}
  #how .hp .fig .d{stroke-width:2.1}
  #how .hp .fig .spd path{stroke-width:1.9}
  #how .hp .fig2{--fx:38}
}

/* ---- before the show (only when how-fig-r12q.js has switched motion on) ---- */
#how .hp.q-js .fig .d{stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
#how .hp.q-js .fig .dt,#how .hp.q-js .fig .gl{opacity:0}

/* ---- draw-on: unhurried, each stroke ~1 s with its own small delay, a vignette takes ~1.4 s ---- */
@keyframes qdraw{0%{stroke-dashoffset:1;opacity:0}3%{stroke-dashoffset:1;opacity:1}100%{stroke-dashoffset:0;opacity:1}}
@keyframes qfade{from{opacity:0}to{opacity:1}}
#how .hp.q-on .fig .d{animation:qdraw 1s cubic-bezier(.45,.1,.3,1) calc(var(--s) + var(--d,0s)) both}
#how .hp.q-on .fig .dt{animation:qfade .5s ease calc(var(--s) + 1s) both}
#how .hp.q-on .fig .gl{animation:qfade .7s ease calc(var(--s) + .9s) both}

/* ---- idle loops (start when the card has finished drawing; the groups move, the strokes stay) ---- */
#how .hp.q-on .fig .hd,#how .hp.q-on .fig .bub,#how .hp.q-on .fig .t1,#how .hp.q-on .fig .t2,#how .hp.q-on .fig .sp,
#how .hp.q-on .fig .pl,#how .hp.q-on .fig .arm,#how .hp.q-on .fig .spd,#how .hp.q-on .fig .lens,#how .hp.q-on .fig .lw,
#how .hp.q-on .fig .tk,#how .hp.q-on .fig .h2,#how .hp.q-on .fig .load,#how .hp.q-on .fig .cab{animation-iteration-count:infinite;animation-delay:var(--e);animation-timing-function:ease-in-out}

/* 1 Your client: the house-shaped thought floats and bobs, the trail breathes, the head tilts */
@keyframes qbub{0%,100%{transform:translateY(0) rotate(0)}45%{transform:translateY(-4px) rotate(1.6deg)}75%{transform:translateY(-1.5px) rotate(-1deg)}}
@keyframes qtr{0%,100%{transform:scale(1)}50%{transform:scale(.62)}}
@keyframes qsp{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(.55) rotate(45deg)}}
@keyframes qhd{0%,100%{transform:rotate(0)}50%{transform:rotate(-3.5deg)}}
#how .hp.q-on .fig1 .bub{transform-origin:50% 100%;animation-name:qbub;animation-duration:4.8s}
#how .hp.q-on .fig1 .t1{transform-origin:50% 50%;animation-name:qtr;animation-duration:3.2s;animation-delay:calc(var(--e) + .15s)}
#how .hp.q-on .fig1 .t2{transform-origin:50% 50%;animation-name:qtr;animation-duration:3.2s;animation-delay:calc(var(--e) + .55s)}
#how .hp.q-on .fig1 .sp{transform-origin:50% 50%;animation-name:qsp;animation-duration:3.6s;animation-delay:calc(var(--e) + .9s)}
#how .hp.q-on .fig1 .hd{transform-origin:50% 100%;animation-name:qhd;animation-duration:5.4s}

/* 2 You: a folded paper plane leaves the hand, crosses the arrow towards Cartesian and a fresh one folds in (6 s) */
@keyframes qplane{
  0%{transform:translate(0,0) rotate(0) scale(1);opacity:1}
  4%{transform:translate(-3px,2px) rotate(5deg) scale(1);opacity:1}
  13%{transform:translate(calc(var(--fx)*.2px),-6px) rotate(-8deg) scale(1);opacity:1}
  25%{transform:translate(calc(var(--fx)*.6px),-3px) rotate(4deg) scale(1);opacity:1}
  34%{transform:translate(calc(var(--fx)*1px),-8px) rotate(-3deg) scale(.8);opacity:0}
  35%,60%{transform:translate(0,5px) rotate(0) scale(.2);opacity:0}
  68%{transform:translate(0,-1.5px) rotate(0) scale(1.14);opacity:1}
  74%{transform:translate(0,0) rotate(0) scale(1);opacity:1}
  88%{transform:translate(0,-1.5px) rotate(-2deg) scale(1);opacity:1}
  100%{transform:translate(0,0) rotate(0) scale(1);opacity:1}}
@keyframes qspd{0%,3%{opacity:0}9%,24%{opacity:.8}32%,100%{opacity:0}}
@keyframes qarm{0%,100%{transform:rotate(0)}5%{transform:rotate(4deg)}13%{transform:rotate(-5deg)}30%{transform:rotate(0)}}
#how .hp.q-on .fig2 .pl{transform-box:view-box;transform-origin:0 0;animation-name:qplane;animation-duration:6s;animation-timing-function:cubic-bezier(.4,.1,.5,.9)}
#how .hp.q-on .fig2 .spd{animation-name:qspd;animation-duration:6s}
#how .hp.q-on .fig2 .arm{transform-box:view-box;transform-origin:36px 51.5px;animation-name:qarm;animation-duration:6s}
#how .hp.q-on .fig2 .hd{transform-origin:50% 100%;animation-name:qhd;animation-duration:5.8s;animation-delay:calc(var(--e) + 1.1s)}

/* 3 Cartesian: the glass looks at each house in turn and settles on one; a tick pops on it (6 s) */
@keyframes qlens{0%,10%{transform:translateX(0)}24%,30%{transform:translateX(-32px)}44%,50%{transform:translateX(0)}64%,72%{transform:translateX(32px)}86%,100%{transform:translateX(0)}}
@keyframes qlw{0%,100%{transform:rotate(0)}17%{transform:rotate(-6deg)}27%{transform:rotate(5deg)}47%{transform:rotate(-4deg)}68%{transform:rotate(5deg)}93%{transform:rotate(-5deg)}}
@keyframes qtick{0%,9%{transform:scale(1);opacity:1}13%,86%{transform:scale(.3);opacity:0}91%{transform:scale(1.3);opacity:1}95%,100%{transform:scale(1);opacity:1}}
@keyframes qh2{0%,86%{transform:translateY(0)}90%{transform:translateY(-2px)}95%,100%{transform:translateY(0)}}
#how .hp.q-on .fig3 .lens{transform-box:view-box;transform-origin:0 0;animation-name:qlens;animation-duration:6s}
#how .hp.q-on .fig3 .lw{transform-box:view-box;transform-origin:0 0;animation-name:qlw;animation-duration:6s}
#how .hp.q-on .fig3 .tk{transform-origin:50% 50%;animation-name:qtick;animation-duration:6s}
#how .hp.q-on .fig3 .h2{transform-origin:50% 100%;animation-name:qh2;animation-duration:6s}

/* 4 Builders: the crane lifts the roof away, lowers it again and the roof settles with a small bounce (6 s) */
@keyframes qload{
  0%,26%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-14px) rotate(-1.4deg)}
  57%{transform:translateY(-14px) rotate(1.1deg)}
  63%{transform:translateY(-14px) rotate(0);animation-timing-function:cubic-bezier(.5,0,.8,.55)}
  84%{transform:translateY(0) rotate(0);animation-timing-function:ease-out}
  88%{transform:translateY(2.2px)}
  92%{transform:translateY(-1px)}
  96%{transform:translateY(.4px)}
  100%{transform:translateY(0)}}
@keyframes qcab{
  0%,26%{transform:scaleY(1)}
  50%,63%{transform:scaleY(.26);animation-timing-function:cubic-bezier(.5,0,.8,.55)}
  84%{transform:scaleY(1);animation-timing-function:ease-out}
  88%{transform:scaleY(1.12)}
  92%{transform:scaleY(.95)}
  96%{transform:scaleY(1.02)}
  100%{transform:scaleY(1)}}
#how .hp.q-on .fig4 .load{transform-box:view-box;transform-origin:52px 24px;animation-name:qload;animation-duration:6s}
#how .hp.q-on .fig4 .cab{transform-box:view-box;transform-origin:52px 6.2px;animation-name:qcab;animation-duration:6s}

@media (prefers-reduced-motion:reduce){
  #how .hp .fig .d{stroke-dashoffset:0!important;opacity:1!important}
  #how .hp .fig .dt,#how .hp .fig .gl{opacity:1!important}
  #how .hp .fig *{animation:none!important}
}