/* 047 v5, Our Process: version 2's page (the rail across the top, six steps with their drawings) on the approved theme.
   Built ON theme.css, chrome.css and dyn.css. Two fixes only (SITE_PLAN rev 2, page 3): the rail never covers a headline and never
   clips under the header; the words are the deck's shorter ones.

   THE RAIL. Across the top of the steps, sticky directly under the header's bar (the header travels down the page since
   2026-10-12: chrome.css; the rail sticks at --bar-h, never under it). Opaque behind the rail, then a 64 px dissolve at its foot:
   a drawing leaving upward dims through it and is dark before it reaches the rail (nothing is ever chopped); every part of a
   step's words fades out the instant its top edge would pass under the band's foot (process.js: .is-under) and comes back
   below it. Each step's drawing plays when 55% of it is inside the zone under the band (motion.js
   data-arm-under: the zone starts at the band's foot, so a drawing never starts under it; ROUND_FINAL2), and the rail's light
   climbs one station per step (the steps section takes .on-1 ... .on-6; the rail's segment k-1 draws, station k lights); when
   the reader scrolls back above a step its class comes off (motion.js), the drawing stands armed again and the rail's light ebbs
   back one station (a transition, so the ebb is seen, never a snap); both play again on the way down. On phones the rail sits
   whole above the steps and climbs end to end when it arrives (.rail-all). The steps do not snap (six stops a screen apart
   fight a reader who rolls the wheel slowly; measured, so the snap stays on the close only). Without .motion the band does not
   stick and every drawing stands finished.
   THE RHYTHM (ROUND_FINAL2): the head holds 60svh so the rail waits at the fold; each step is 47 px from the next at 1440 (it was
   112), so a step's content sits directly under the band and no screen is mostly black. */

/* ------------------------------------------------------------------ the head: a shorter screen, the rail waiting at the fold */
.phead--process .hero__stage { --hh: round(down, max(460px, 60svh - var(--nav-h)), 1px); }

/* ------------------------------------------------------------------ the steps section and the rail band */
.steps { position: relative; padding: 8px 0 40px;
  --rail-h: min(230px, 24svh, calc(min(100vw - 2 * var(--gutter), 1328px) * 230 / 1200)); }
.steps__intro { max-width: 34em; margin-bottom: 14px; }
.railband { position: sticky; top: 0; z-index: 5; margin-inline: calc(-1 * var(--gutter)); padding: 10px var(--gutter) 64px;
  background: linear-gradient(180deg, var(--bw-ground) 0%, var(--bw-ground) calc(100% - 64px), rgba(10, 11, 12, .92) calc(100% - 44px), rgba(10, 11, 12, .5) calc(100% - 18px), rgba(10, 11, 12, 0) 100%); }   /* the dissolve at its foot */
.rail { margin: 0; }
.rail svg { display: block; width: 100%; height: var(--rail-h); }
.nav-stick .railband { top: var(--bar-h); }              /* directly under the header's bar (process.js reads this top) */
html:not(.motion) .railband { position: static; }
.railband { transition: opacity .22s ease; }
.railband.is-leaving { opacity: 0; pointer-events: none; }   /* when the steps end the band slides up under the header: it fades out instead of a sliver showing under the bar (the Captain, 2026-10-13) */        /* no motion: the rail sits whole above the steps and nothing is ever under it */
@media (max-width: 899.98px) {
  .railband { position: static; margin-inline: 0; padding: 4px 0 8px; background: none; }
  .rail svg.gfx__wide { display: none; }
  .rail svg.gfx__tall { display: block; }
  .rail svg { height: auto; }
}

/* ------------------------------------------------------------------ the steps: words one side, the drawing the other, alternating; the numeral watermarks the words */
.psteps { list-style: none; margin: 0; padding: 0; }
.pstep { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: var(--gap); align-items: center; padding-block: clamp(32px, 1.5rem + 1.6vw, 56px); }
.pstep__text { position: relative; display: grid; gap: 16px; align-content: start; justify-items: start; }
.pstep__num { position: absolute; right: 0; top: -.12em; font: 400 clamp(4rem, 2.4rem + 5.2vw, 7.25rem)/.85 var(--mono); letter-spacing: -.02em;
  color: var(--bw-ground); -webkit-text-stroke: 2px var(--bw-gun-500); paint-order: stroke fill;   /* the fill (the ground) covers the
     stroke's inner half and every contour inside the glyph: one clean 1 px outline, no crossing lines where the 1's flag or the slashed
     zero's bar overlaps its own outline */
  font-variant-numeric: tabular-nums slashed-zero; pointer-events: none; }
.pstep__label { margin-top: 4px; }
.pstep__h { max-width: 11ch; }
.pstep__tag { font: 500 clamp(1.0625rem, 1rem + .35vw, 1.3125rem)/1.45 var(--sans); color: var(--bw-white); max-width: 28em; text-wrap: pretty; }
.pstep__body { max-width: 34em; text-wrap: pretty; }       /* no lonely last word */
.pstep__gfx { margin: 0; }
.pstep:nth-child(even) .pstep__gfx { order: -1; }
.pstep__num, .pstep__label, .pstep__h, .pstep__tag, .pstep__body { transition: opacity .22s var(--ease-light); }   /* the body too: no words ever under the band (the drawing dissolves through the band's foot instead) */
.is-under { opacity: 0 !important; }
@media (max-width: 999.98px) {
  .pstep { grid-template-columns: minmax(0, 1fr); row-gap: 24px; padding-block: clamp(28px, 1.25rem + 2vw, 48px); }
  .pstep:nth-child(even) .pstep__gfx { order: 0; }
  .pstep__num { position: static; font-size: 3.5rem; margin-bottom: -6px; }
}

/* ------------------------------------------------------------------ the drawings' ink (version 2's, on the v5 tokens) */
.gx-lane-base { fill: none; stroke: var(--bw-gun-700); stroke-width: 1; }
.gx-lane { fill: none; stroke: var(--bw-gun-300); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 0; }
.gx-lane--key { stroke-dasharray: none; }
.gx-lane-t { fill: var(--bw-gun-300); font-size: 11px; }
.gx-climb { stroke-width: 2.5; stroke: var(--bw-white); }
.gx-stn-drop { stroke: var(--bw-gun-500); stroke-width: 1; stroke-dasharray: 2 3; }
.gx-stn-n { fill: var(--bw-white); font-size: 11px; }
.gx-stn-t { font-size: 12px; }
.gfx__tall .gx-stn-n, .gfx__tall .gx-lane-t { font-size: 12px; }
/* walk the ground */
.gx-wall { fill: none; stroke: var(--bw-gun-500); stroke-width: 2; }
.gx-route2 { stroke-dasharray: 1; stroke: var(--bw-white); }
.gx-docline { stroke: var(--bw-gun-300); stroke-width: 1.5; }
.gx-sign { fill: none; stroke: var(--bw-white); stroke-width: 1.6; }
.gx-stall path { stroke: var(--bw-eye); stroke-width: 2.5; }
/* pour the foundation: a cast concrete slab under the lamp (_rig_dyn/dyn.foundation draws the faces with their own gradients) */
.gx-pool { stroke: none; }
.gx-form { fill: none; stroke: var(--bw-gun-500); stroke-width: 1; stroke-dasharray: 4 3; }
.gx-agg { stroke: none; }
.gx-agg--top { opacity: .6; }
.gx-arris { fill: none; stroke: rgba(254, 254, 253, .16); stroke-width: 1; }
.gx-foot { fill: none; stroke: #050506; stroke-width: 1.5; }
.gx-rake { fill: none; }
.gx-sheen { fill: url(#fd-sheen); stroke: none; }
.gx-lip { fill: none; stroke: url(#fd-lit); stroke-width: 1.5; }
.gfx--foundation .gx-corner { stroke: url(#fd-corner); stroke-width: 1.2; }
.gx-frag { fill: var(--bw-union-raised); stroke: var(--bw-silver); stroke-width: 1; }
.gx-frag.d2 { fill: #1c1d1e; }
.gx-frag.d3 { fill: #2a2f3d; }
.gx-frag-row { fill: var(--bw-silver); }
.gx-frag-sh { fill: rgba(0, 0, 0, .42); }
/* phones: the slab's frame loses the empty sky above it (the pieces fall in from the top edge) */
@media (max-width: 699.98px) {
  .gfx--foundation { aspect-ratio: 600 / 176; overflow: hidden; }
  .gfx--foundation svg { margin-top: -14.67%; }                  /* 88 of 600 units */
  .gfx--braid .gx-lab-t { font-size: 17px; letter-spacing: .1em; }   /* the two names stay readable on a phone (10 px), inside the frame */
}
/* brick by brick: three stones (people, process, technology) */
.gx-stone { stroke: rgba(254, 254, 253, .22); stroke-width: 1; }
.gx-stone.t1 { fill: #3a3b3c; }
.gx-stone.t2 { fill: #13204a; }
.gx-stone.t3 { fill: #6b6d6c; }
.gx-tick2 { fill: none; stroke: var(--bw-white); stroke-width: 1.6; }
.gx-stone--bad { stroke: var(--bw-eye); stroke-width: 1.5; }
.gx-bad-x { stroke: var(--bw-eye); stroke-width: 2; }
/* go live */
.gfx--golive .gx-contour { stroke: url(#gl-terrain); }      /* the terrain fades out inside the frame (_rig_process/build.py mend) */
.gx-live-t { fill: var(--bw-silver); font-size: 11px; }
.gx-dark-node { fill: #08090b; stroke: var(--bw-gun-600); stroke-width: 1; stroke-dasharray: 3 3; }
/* run it with you */
.gx-strand.s2 { stroke: var(--bw-gun-300); }
.gx-handoff { fill: var(--bw-white); }
/* sharpen the edge */
.gx-fail { fill: #2c0205; stroke: var(--bw-eye); stroke-width: 1.5; }
.gx-ring2 { stroke: var(--bw-gun-400); stroke-width: 1; }
.gx-ring2.k2 { stroke: var(--bw-silver); stroke-width: 1.5; }
.gx-ring2.k3 { stroke: var(--bw-white); stroke-width: 3; }
.gx-ring-catch { stroke-width: 3; }

/* ------------------------------------------------------------------ START STATES (motion): every drawing waits in its first frame; the rail waits unlit */
.motion .rail .gx-seg, .motion .rail .gx-lseg { stroke-dashoffset: 1; }
.motion .rail .gx-stn, .motion .rail .gx-stn-t { opacity: .3; }
@media (prefers-reduced-motion: no-preference) {
  /* the rail is on the screen when a step unwinds (it is stuck at the top): its light ebbs back a station over .5 s instead of snapping */
  .motion .rail .gfx__wide .gx-seg, .motion .rail .gfx__wide .gx-lseg { transition: stroke-dashoffset .5s var(--ease-light); }
  .motion .rail .gfx__wide .gx-stn, .motion .rail .gfx__wide .gx-stn-t, .motion .rail .gfx__wide .gx-edge { transition: opacity .4s var(--ease-light); }
}
.motion .rail .gx-edge { opacity: 0; }
.motion .gfx--walk .gx-route2 { stroke-dashoffset: 1; }
.motion .gfx--walk .gx-stall { opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center; }
.motion .gfx--walk .gx-pin--end, .motion .gfx--walk .gx-edge { opacity: .25; }
.motion .gfx--foundation .gx-slab2 { transform: scaleX(0); transform-origin: 46px 172px; }   /* the slab's left end */
.motion .gfx--foundation .gx-frag, .motion .gfx--foundation .gx-frag-row, .motion .gfx--foundation .gx-frag-sh { transform: translateY(-120px); opacity: 0; }
.motion .gfx--foundation .gx-rake, .motion .gfx--foundation .gx-edge { opacity: 0; }
.motion .gfx--bricks .gx-brick { transform: translateY(-22px); opacity: 0; }
.motion .gfx--bricks .gx-pulled { opacity: 0; }
.motion .gfx--golive .gx-node2 { opacity: .12; transform: scale(.6); transform-box: fill-box; transform-origin: center; }
.motion .gfx--golive .gx-edge { opacity: 0; }
.motion .gfx--braid .gx-strand { stroke-dashoffset: 1; }
.motion .gfx--braid .gx-handoff { opacity: 0; transform: scale(.3); transform-box: fill-box; transform-origin: center; }
.motion .gfx--ring .gx-fail { opacity: 0; }
.motion .gfx--ring .gx-ring2 { stroke-dashoffset: 1; }
.motion .gfx--ring .gx-ring-catch { opacity: 0; }

/* ------------------------------------------------------------------ THE PLAYS (time-based, once, then held) */
@media (prefers-reduced-motion: no-preference) {
  /* the rail across the top (the wide composition, shown from 900 px up): the light climbs one station per step
     (segment k-1 draws in .7 s, station k lights at .5 s; the last run to the lamp after station 6). Keyed on the composition,
     not on a width query, so a viewport change can never restart it. */
  .steps.on-1 .rail .gfx__wide .sg0, .steps.on-2 .rail .gfx__wide .sg1, .steps.on-3 .rail .gfx__wide .sg2,
  .steps.on-4 .rail .gfx__wide .sg3, .steps.on-5 .rail .gfx__wide .sg4, .steps.on-6 .rail .gfx__wide .sg5 {
    animation: gx-draw .7s cubic-bezier(.3, 0, .3, 1) both; }
  .steps.on-1 .rail .gfx__wide .s1, .steps.on-2 .rail .gfx__wide .s2, .steps.on-3 .rail .gfx__wide .s3,
  .steps.on-4 .rail .gfx__wide .s4, .steps.on-5 .rail .gfx__wide .s5, .steps.on-6 .rail .gfx__wide .s6 {
    animation: stn-on .45s var(--ease-light) .5s both; }
  .steps.on-6 .rail .gfx__wide .sg6 { animation: gx-draw .7s cubic-bezier(.3, 0, .3, 1) .9s both; }
  .steps.on-6 .rail .gfx__wide .gx-edge { animation: gx-on .5s var(--ease-light) 1.4s both; }
  /* the rail above the steps (the tall composition, phones): the whole climb when the rail arrives, station by station, about three seconds */
  .steps.rail-all .rail .gfx__tall .gx-seg, .steps.rail-all .rail .gfx__tall .gx-lseg { animation: gx-draw .45s cubic-bezier(.3, 0, .3, 1) both; }
  .steps.rail-all .rail .gfx__tall .sg1 { animation-delay: .4s; } .steps.rail-all .rail .gfx__tall .sg2 { animation-delay: .8s; } .steps.rail-all .rail .gfx__tall .sg3 { animation-delay: 1.2s; }
  .steps.rail-all .rail .gfx__tall .sg4 { animation-delay: 1.6s; } .steps.rail-all .rail .gfx__tall .sg5 { animation-delay: 2s; } .steps.rail-all .rail .gfx__tall .sg6 { animation-delay: 2.45s; }
  .steps.rail-all .rail .gfx__tall .gx-stn { animation: stn-on .4s var(--ease-light) both; }
  .steps.rail-all .rail .gfx__tall .s1 { animation-delay: .3s; } .steps.rail-all .rail .gfx__tall .s2 { animation-delay: .7s; } .steps.rail-all .rail .gfx__tall .s3 { animation-delay: 1.1s; }
  .steps.rail-all .rail .gfx__tall .s4 { animation-delay: 1.5s; } .steps.rail-all .rail .gfx__tall .s5 { animation-delay: 1.9s; } .steps.rail-all .rail .gfx__tall .s6 { animation-delay: 2.3s; }
  .steps.rail-all .rail .gfx__tall .gx-edge { animation: gx-on .5s var(--ease-light) 2.8s both; }
  @keyframes stn-on { from { opacity: .3; } to { opacity: 1; } }

  /* 01 walk the ground: the route of one job draws itself through the plan (1.5 s); a red mark sets wherever the work stalls as the line passes; the signed form lights at the end */
  .steps.on-1 .gfx--walk .gx-route2 { animation: gx-draw 1.5s linear .1s both; }
  .steps.on-1 .gfx--walk .gx-stall.t1 { animation: gx-pop .4s var(--ease-light) .32s both; }
  .steps.on-1 .gfx--walk .gx-stall.t2 { animation: gx-pop .4s var(--ease-light) .85s both; }
  .steps.on-1 .gfx--walk .gx-stall.t3 { animation: gx-pop .4s var(--ease-light) 1.3s both; }
  .steps.on-1 .gfx--walk .gx-pin--end, .steps.on-1 .gfx--walk .gx-edge { animation: gx-on-25 .45s var(--ease-light) 1.55s both; }

  /* 02 pour the foundation: the slab pours from the left (.8 s), the pieces drop onto it in three waves and land hard, the rake of light catches the level top */
  .steps.on-2 .gfx--foundation .gx-slab2 { animation: pour .8s cubic-bezier(.2, .6, .2, 1) both; }
  .steps.on-2 .gfx--foundation .d1 { animation: frag-drop .5s cubic-bezier(.45, 0, 1, 1) .75s both; }
  .steps.on-2 .gfx--foundation .d2 { animation: frag-drop .5s cubic-bezier(.45, 0, 1, 1) .95s both; }
  .steps.on-2 .gfx--foundation .d3 { animation: frag-drop .5s cubic-bezier(.45, 0, 1, 1) 1.15s both; }
  .steps.on-2 .gfx--foundation .gx-rake, .steps.on-2 .gfx--foundation .gx-edge { animation: gx-on .45s var(--ease-light) 1.7s both; }
  @keyframes pour { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes frag-drop { from { transform: translateY(-120px); opacity: 0; } 25% { opacity: 1; } to { transform: none; opacity: 1; } }

  /* 03 brick by brick: six courses set one on the next (.16 s apart); the brick that failed its check is pulled out as the wall goes up */
  .steps.on-3 .gfx--bricks .gx-brick { animation: course-set .38s cubic-bezier(.2, .7, .2, 1) both; }
  .steps.on-3 .gfx--bricks .c2 { animation-delay: .16s; } .steps.on-3 .gfx--bricks .c3 { animation-delay: .32s; } .steps.on-3 .gfx--bricks .c4 { animation-delay: .48s; }
  .steps.on-3 .gfx--bricks .c5 { animation-delay: .64s; } .steps.on-3 .gfx--bricks .c6 { animation-delay: .8s; }
  .steps.on-3 .gfx--bricks .gx-pulled { animation: gx-on .4s var(--ease-light) 1.05s both; }
  @keyframes course-set { from { transform: translateY(-22px); opacity: 0; } to { transform: none; opacity: 1; } }

  /* 04 go live in the field: the points switch on one by one (.2 s apart), each stamped Live; the one that is not live stays dark; the last catches the light */
  .steps.on-4 .gfx--golive .gx-node2 { animation: node-on .4s cubic-bezier(.2, .7, .2, 1) both; }
  .steps.on-4 .gfx--golive .o2 { animation-delay: .2s; } .steps.on-4 .gfx--golive .o3 { animation-delay: .4s; } .steps.on-4 .gfx--golive .o4 { animation-delay: .6s; }
  .steps.on-4 .gfx--golive .o5 { animation-delay: .8s; } .steps.on-4 .gfx--golive .o6 { animation-delay: 1s; }
  .steps.on-4 .gfx--golive .gx-edge { animation: gx-on .45s var(--ease-light) 1.3s both; }
  @keyframes node-on { from { opacity: .12; transform: scale(.6); } to { opacity: 1; transform: none; } }

  /* 05 run it with you: the two lines braid themselves across (1.6 s), and a hand-off marks every crossing as they pass */
  .steps.on-5 .gfx--braid .gx-strand.s1 { animation: gx-draw 1.6s cubic-bezier(.3, 0, .3, 1) both; }
  .steps.on-5 .gfx--braid .gx-strand.s2 { animation: gx-draw 1.6s cubic-bezier(.3, 0, .3, 1) .12s both; }
  .steps.on-5 .gfx--braid .gx-handoff { animation: gx-pop .35s var(--ease-light) both; }
  .steps.on-5 .gfx--braid .h1 { animation-delay: .42s; } .steps.on-5 .gfx--braid .h2 { animation-delay: .66s; } .steps.on-5 .gfx--braid .h3 { animation-delay: .9s; }
  .steps.on-5 .gfx--braid .h4 { animation-delay: 1.14s; } .steps.on-5 .gfx--braid .h5 { animation-delay: 1.38s; }

  /* 06 sharpen the edge: one point flashes red, then a ring locks around the system where it failed, and the next, and the heaviest; the newest catches the light */
  .steps.on-6 .gfx--ring .gx-fail { animation: gx-flash .6s var(--ease-light) both; }
  .steps.on-6 .gfx--ring .gx-ring2.k1 { animation: gx-draw .6s cubic-bezier(.3, 0, .3, 1) .4s both; }
  .steps.on-6 .gfx--ring .gx-ring2.k2 { animation: gx-draw .6s cubic-bezier(.3, 0, .3, 1) .8s both; }
  .steps.on-6 .gfx--ring .gx-ring2.k3 { animation: gx-draw .75s cubic-bezier(.3, 0, .3, 1) 1.2s both; }
  .steps.on-6 .gfx--ring .gx-ring-catch { animation: gx-on .45s var(--ease-light) 1.85s both; }
}