/* /company/approach/ only: Warp and Signal, one ochre pick carried end to end. Classes and keyframes are prefixed ap-.
   HTML is the composed end state. Pre-states live only under :root[data-m-go]; each block's entrance starts when about
   38 percent of the screen holds it ([data-ap-in], set by the page script), runs once in two or three phases and settles
   within about 900 ms. Animated properties: transform, opacity, clip-path and filter. Loops run only while their host
   carries data-m-on. Scroll-linked hand-overs are longhands, alone on their element, inside @supports. */
body[data-page=approach] main{overflow-x:clip}
body[data-page=approach]{--ap-ink:#12211e;--ap-ink2:#33433d;--ap-on:#eef4f0;--ap-on2:#dfeae3;--ap-lab:#cfe3da;--ap-ochre-l:#f0c47e;--ap-paper2:#ece6da;--ap-sage-l:#8fd1ad}

/* The kit's section-level textile entrance is replaced by each block's authored choreography below; the data-m names
   remain the blocks' entrance labels. */
:root[data-m-go] main .ap-sec[data-m],:root[data-m-go] main .ap-step[data-m]{opacity:1;transform:none;clip-path:none;animation-name:none}

/* ---------- shared pieces ---------- */
.ap-sec{position:relative}
.ap-vh{position:absolute!important;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;opacity:0}
.ap-sent{position:absolute;inset:0;pointer-events:none}
.ap-cap{margin:0;font:600 13px/1.4 var(--gft-font-mono);letter-spacing:.06em;text-transform:uppercase}
.ap-lede{font-size:17px;line-height:1.65;max-width:52ch}
.ap-fold{font-size:15px;line-height:1.55;max-width:46ch}
.ap-sec .gft-eyebrow{font-size:13px;letter-spacing:.06em;margin-bottom:16px}
.ap-h{font-size:clamp(2.2rem,3.6vw,3.6rem);line-height:1.04;letter-spacing:-.05em;max-width:18ch}
.ap-hw{display:inline-block}
.ap-stack{display:grid}
.ap-stack>*{grid-area:1/1;min-width:0}
/* A swap fades the outgoing state first, then the new one arrives: two texts never share the place. */
.ap-read{visibility:hidden;opacity:0;transition:opacity 140ms ease-in,visibility 0s linear 140ms}
.ap-read[data-on]{visibility:visible;opacity:1;transition:opacity 320ms var(--gft-ease-out) 120ms,visibility 0s}
.ap-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 18px;border:1px solid currentColor;background:transparent;color:inherit;font:650 15px/1.2 var(--gft-font-display);cursor:pointer;transition:background-color 200ms,color 200ms,border-color 200ms}
.ap-btn[aria-pressed=true]{background:var(--gft-ochre);border-color:var(--gft-ochre);color:var(--gft-night)}
.ap-btn:focus-visible,.ap-pickbtn:focus-visible,.ap-tab:focus-visible{outline:3px solid var(--gft-ochre);outline-offset:2px}

/* Heading entrances: whole words (the spaces stay), no masks, so nothing clips mid-entrance. */
:root[data-m-go] [data-ap-enter]:not([data-ap-in]) .ap-h .ap-hw{opacity:0}
:root[data-m-go] [data-ap-in] .ap-h .ap-hw{animation-duration:640ms;animation-timing-function:var(--gft-ease-out);animation-delay:calc(min(var(--w) * 38ms, 250ms));animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] [data-ap-in] .ap-h[data-fx=rise] .ap-hw{animation-name:ap-w-rise}
:root[data-m-go] [data-ap-in] .ap-h[data-fx=turn] .ap-hw{animation-name:ap-w-turn;transform-origin:50% 100%}
:root[data-m-go] [data-ap-in] .ap-h[data-fx=skew] .ap-hw{animation-name:ap-w-skew}
:root[data-m-go] [data-ap-in] .ap-h[data-fx=blur] .ap-hw{animation-name:ap-w-blur}
:root[data-m-go] [data-ap-in] .ap-h[data-fx=drop] .ap-hw{animation-name:ap-w-drop}
:root[data-m-go] [data-ap-in] .ap-h[data-fx=swing] .ap-hw{animation-name:ap-w-swing;transform-origin:0 50%}
@keyframes ap-w-rise{from{opacity:0;transform:translateY(.8em)}to{opacity:1;transform:none}}
@keyframes ap-w-turn{from{opacity:0;transform:perspective(600px) rotateX(-80deg)}to{opacity:1;transform:none}}
@keyframes ap-w-skew{from{opacity:0;transform:translateY(.55em) skewY(8deg)}to{opacity:1;transform:none}}
@keyframes ap-w-blur{from{opacity:0;transform:translateY(.3em);filter:blur(10px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes ap-w-drop{from{opacity:0;transform:translateY(-.7em)}to{opacity:1;transform:none}}
@keyframes ap-w-swing{from{opacity:0;transform:perspective(700px) rotateY(62deg)}to{opacity:1;transform:none}}
@keyframes ap-w-zoom{from{opacity:0;transform:scale(.62);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
/* Copy under a heading: a second phase. */
:root[data-m-go] [data-ap-enter]:not([data-ap-in]) :is(.ap-lede,.gft-eyebrow){opacity:0;transform:translateY(14px)}
:root[data-m-go] [data-ap-in] :is(.ap-lede,.gft-eyebrow){animation-name:ap-up;animation-duration:600ms;animation-timing-function:var(--gft-ease-out);animation-delay:140ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes ap-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes ap-fadein{from{opacity:.15}to{opacity:1}}

/* ================= 1 splash: the split loom (night, act I) ================= */
[data-splash=approach]{min-height:calc(80svh - 88px)}
[data-splash=approach] .gft-splash__content{padding-top:20px;padding-bottom:14px}
[data-splash=approach] .gft-eyebrow{font-size:13px;letter-spacing:.06em;margin-bottom:14px;color:var(--ap-lab)}
[data-splash=approach] h1{font-size:clamp(3.2rem,min(7.2vw,11.4svh),6.6rem);margin-top:10px;max-width:none}
[data-splash=approach] .gft-splash__lede{font-size:19px;line-height:1.55;max-width:46ch;margin-top:16px;color:#e2ece6}
[data-splash=approach] .gft-splash__actions{margin-top:20px}
[data-splash=approach] .gft-splash__bottom{padding-block:10px}
[data-splash=approach] :is(.gft-splash__data,.gft-splash__data span,.gft-splash__caption,.gft-splash__position,.gft-splash__cue,.gft-splash__signal){font-size:13px!important;color:var(--ap-lab)}
[data-splash=approach] .gft-splash__content{pointer-events:none}
[data-splash=approach] .gft-splash__content :is(a,button){pointer-events:auto}
[data-splash=approach] .gft-splash__structure::after{background:linear-gradient(90deg,#072d2b 0%,#072d2b00 26%)}
@media(min-width:1001px){[data-splash=approach] .gft-splash__structure{inset:-2% -6% 0 36%}}
/* the h1 words zoom in; the kit's own h1 entrance is replaced */
:root[data-m-go] [data-splash=approach] h1[data-m]{opacity:1;transform:none;animation-name:none}
:root[data-m-go] [data-splash=approach] h1 .ap-hw{animation-name:ap-w-zoom;animation-duration:640ms;animation-timing-function:var(--gft-ease-out);animation-delay:calc(min(var(--w) * 70ms, 250ms));animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
.ap-splash-acts{display:grid;gap:14px;justify-items:start}
.ap-picks{display:grid;gap:10px;padding:14px 18px 16px;background:#0a3b39cc;border:1px solid #6bb68f66;border-left:4px solid var(--gft-ochre);width:min(100%,540px)}
.ap-picks__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ap-picks__label{margin:0;font:600 13px/1.4 var(--gft-font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ap-lab)}
.ap-picks__label b{color:var(--ap-ochre-l);font-weight:700}
.ap-picks__tag{font:600 12px/1 var(--gft-font-mono);letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border:1px solid #c98a2b80;background:#072d2b;color:var(--ap-ochre-l)}
.ap-picks__btns{display:flex;flex-wrap:wrap;gap:8px}
.ap-pickbtn{display:inline-flex;align-items:center;gap:9px;min-height:48px;padding:0 16px;border:1px solid #f6f4ef70;background:#072d2bcc;color:var(--gft-paper);font:650 16px/1 var(--gft-font-display);cursor:pointer;transition:background-color 200ms,color 200ms,border-color 200ms}
.ap-pickbtn b{font:600 13px var(--gft-font-mono);letter-spacing:.06em}
.ap-pickbtn:hover{border-color:var(--gft-ochre)}
.ap-pickbtn[aria-pressed=true]{background:var(--gft-ochre);border-color:var(--gft-ochre);color:var(--gft-night)}
.ap-picks__q .ap-read{display:grid;gap:4px}
.ap-picks__qq{margin:0;font:italic 24px/1.25 var(--gft-font-serif);color:var(--gft-paper)}
.ap-picks__qd{margin:0;font-size:16px;line-height:1.45;color:var(--ap-on2)}
.ap-loom{width:100%;height:100%;min-height:440px;overflow:visible}
.ap-loom g[data-m-live]{transform-box:fill-box;transform-origin:center}
.ap-ln__t{font:500 19px var(--gft-font-mono);letter-spacing:.04em;fill:#e3eee8}
.ap-loom[data-row="0"] .ap-ln__t[data-i="0"],.ap-loom[data-row="1"] .ap-ln__t[data-i="1"],.ap-loom[data-row="2"] .ap-ln__t[data-i="2"],.ap-loom[data-row="3"] .ap-ln__t[data-i="3"]{fill:var(--ap-ochre-l);font-weight:700}
.ap-ln :is(.ap-ln__halo,.ap-ln__ring,.ap-ln__core){transform-box:fill-box;transform-origin:center}
.ap-ln__halo{opacity:0}
.ap-loom[data-row="0"] .ap-ln[data-i="0"] .ap-ln__halo,.ap-loom[data-row="1"] .ap-ln[data-i="1"] .ap-ln__halo,.ap-loom[data-row="2"] .ap-ln[data-i="2"] .ap-ln__halo,.ap-loom[data-row="3"] .ap-ln[data-i="3"] .ap-ln__halo{opacity:1}
.ap-loom__reader{transition:transform 640ms var(--gft-ease-in-out)}
.ap-par{transform-box:view-box}
.ap-close__bg .ap-loom{opacity:.16}
/* entrance: (a) warps draw from the centre outwards, (b) the shuttle shoots the reader pick, (c) the knots tie */
:root[data-m-go] .ap-loom--reader .ap-lw{animation-name:ap-warpdraw;animation-duration:420ms;animation-timing-function:var(--gft-ease-out);animation-delay:calc(var(--k) * 12ms);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes ap-warpdraw{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
:root[data-m-go] .ap-loom--reader .ap-loom__pick{animation-name:ap-shoot;animation-duration:460ms;animation-timing-function:var(--gft-ease-out);animation-delay:300ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes ap-shoot{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
:root[data-m-go] .ap-loom--reader .ap-loom__shot{animation-name:ap-shot;animation-duration:460ms;animation-timing-function:var(--gft-ease-out);animation-delay:300ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes ap-shot{from{opacity:0;transform:translateX(-774px)}10%{opacity:1}to{opacity:1;transform:none}}
:root[data-m-go] .ap-loom--reader .ap-ln__ring{animation-name:ap-tie;animation-duration:240ms;animation-timing-function:var(--gft-ease-out);animation-delay:calc(560ms + var(--k) * 60ms);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .ap-loom--reader .ap-ln__core{animation-name:ap-pop;animation-duration:200ms;animation-timing-function:var(--gft-ease-out);animation-delay:calc(640ms + var(--k) * 60ms);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .ap-loom--reader .ap-ln__t{animation-name:ap-fadein;animation-duration:260ms;animation-timing-function:ease-out;animation-delay:calc(600ms + var(--k) * 60ms);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes ap-tie{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes ap-pop{from{transform:scale(0)}60%{transform:scale(1.5)}to{transform:none}}
/* alive: the shuttle re-crosses the current pick every 6 s; the current knot's halo pulses */
:root[data-m-go] .ap-loom:has(.ap-loom__weft[data-m-on]) .ap-loom__shuttle{animation-name:ap-recross;animation-duration:6s;animation-timing-function:var(--gft-ease-in-out);animation-delay:1.2s;animation-iteration-count:infinite;animation-direction:normal}
@keyframes ap-recross{0%{opacity:0;transform:translateX(-774px)}3%{opacity:1}16%,100%{opacity:1;transform:none}}
:root[data-m-go] .ap-loom:has(.ap-loom__weft[data-m-on]) .ap-ln__halo{animation-name:ap-halo;animation-duration:2.4s;animation-timing-function:ease-out;animation-iteration-count:infinite;animation-direction:normal}
@keyframes ap-halo{from{transform:scale(.7)}to{transform:scale(1.25)}}

/* ================= 2 the weaving bench (night, forest panel) ================= */
.ap-sec--bench{background:var(--gft-night);color:var(--ap-on);padding:0 0 clamp(64px,6vw,96px)}
.ap-bench{position:relative}
.ap-bench__stage{--ap-ochre-l:#f8deb0;position:relative;height:clamp(440px,62svh,580px);background:linear-gradient(180deg,#0e4d4a 0%,#0b3f3c 100%);border-block:1px solid #6bb68f40;overflow:clip}
.ap-bench__svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.ap-bench__head{position:absolute;z-index:3;top:0;left:0;width:min(780px,52%);padding:30px 64px 34px max(48px,calc((100% - 1440px) / 2));background:linear-gradient(90deg,#072d2bf2 0%,#072d2be6 72%,#072d2b00 100%);color:var(--ap-on)}
.ap-bench__head .gft-eyebrow{color:var(--ap-lab)}
.ap-bench__head .ap-h{font-size:clamp(2.2rem,3.4vw,3.3rem);max-width:15ch}
.ap-bench__head .ap-lede{margin-top:16px;color:var(--ap-on2);max-width:44ch}
.ap-bw{transform-box:fill-box;transform-origin:50% 0}
.ap-pick{transform-origin:0 0;transform:scaleX(clamp(0,calc(var(--pick) - var(--i)),1));transition:transform 520ms var(--gft-ease-out),opacity 380ms}
.ap-bench__kin{opacity:clamp(0,calc(var(--pick) - 11),1);transition:opacity 380ms}
.ap-bench[data-layer=production] .ap-pick:not(.ap-pick--kept){opacity:0}
.ap-bench[data-layer=decision] .ap-pick:not(.ap-pick--kept){opacity:.5}
.ap-dot{fill:#dbe8e0;transform-box:fill-box;transform-origin:center;--dot:0;opacity:calc(clamp(0,calc(var(--pick) - var(--r)),1) * var(--dot));transition:opacity 380ms}
.ap-bench[data-layer=measurement] .ap-dot{--dot:.85}
.ap-bench[data-layer=decision] .ap-dot{--dot:.22}
.ap-node{cursor:pointer;outline:none;transition:opacity 380ms;opacity:clamp(.15,calc(var(--pick) - var(--r)),1)}
.ap-bench[data-layer=production] .ap-node{opacity:.15}
.ap-bench[data-layer=measurement] .ap-node{opacity:calc(clamp(0,calc(var(--pick) - var(--r)),1) * .55)}
.ap-node :is(circle,g){transform-box:fill-box;transform-origin:center}
.ap-node__ring{transition:transform 300ms var(--gft-ease-out),fill 300ms}
.ap-node__halo{opacity:0;transition:opacity 300ms}
.ap-node__n{font:600 14px var(--gft-font-mono);letter-spacing:.06em;fill:var(--ap-on)}
.ap-node[aria-pressed=true] .ap-node__ring{transform:scale(1.3);fill:#c98a2b40}
.ap-node[aria-pressed=true] .ap-node__halo{opacity:.7}
.ap-node[aria-pressed=true] .ap-node__n{fill:var(--ap-ochre-l)}
.ap-node:focus-visible .ap-node__hit{stroke:#f6f4ef;stroke-width:2.5}
.ap-bench__sh{transform:translateY(calc((clamp(1,var(--pick),12) - 1) * 40px));transition:transform 520ms var(--gft-ease-out)}
.ap-bench[data-layer=production] .ap-bench__sh{opacity:0}
.ap-bench__console{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.25fr) minmax(0,1fr);border-bottom:1px solid #a3c8b333}
.ap-cell{padding:26px clamp(18px,2.4vw,40px) 22px;min-width:0;display:grid;gap:14px;align-content:start}
.ap-cell:first-child{padding-left:0}
.ap-cell+.ap-cell{border-left:1px solid #a3c8b333}
.ap-seg{display:grid;grid-template-columns:repeat(3,1fr);margin:0;padding:0;border:1px solid #f6f4ef66;min-width:0}
.ap-seg label{position:relative;display:block;cursor:pointer}
.ap-seg input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.ap-seg span{display:flex;min-height:48px;align-items:center;justify-content:center;padding:6px 8px;font-size:15px;font-weight:650;text-align:center;transition:background-color 220ms,color 220ms}
.ap-seg input:checked+span{background:var(--gft-paper);color:var(--gft-night)}
.ap-seg input:focus-visible+span{outline:3px solid var(--gft-ochre);outline-offset:-3px}
.ap-seg label+label span{border-left:1px solid #f6f4ef55}
.ap-key{display:flex;align-items:baseline;gap:12px;margin:0}
.ap-key b{font:800 40px/1 var(--gft-font-display);letter-spacing:-.04em;color:var(--ap-ochre-l);font-variant-numeric:tabular-nums}
.ap-key>span{font:600 13px var(--gft-font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ap-lab)}
.ap-read strong{color:var(--gft-paper)}
.ap-cell--layer .ap-read{margin:0;font-size:17px;line-height:1.55;color:var(--ap-on2)}
.ap-cell .ap-cap{color:var(--ap-lab)}
.ap-cap b{color:var(--ap-ochre-l)}
.ap-nd h3{margin:0 0 8px;font-size:26px;line-height:1.15;color:var(--gft-paper)}
.ap-nd p{margin:0;font-size:17px;line-height:1.5;color:var(--ap-on2)}
.ap-nd__a{margin-top:8px!important}
.ap-nd__a b{display:block;font:600 13px/1.5 var(--gft-font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ap-ochre-l)}
.ap-scrub{display:grid;grid-template-columns:1fr auto;gap:4px 14px;align-items:center}
.ap-scrub label{font:600 13px var(--gft-font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ap-lab)}
.ap-scrub output{font:750 22px/1 var(--gft-font-display);text-align:right;min-width:4.6ch;font-variant-numeric:tabular-nums}
.ap-scrub input{grid-column:1/-1}
input[type=range].ap-r,.ap-scrub input,.ap-st input{-webkit-appearance:none;appearance:none;width:100%;height:48px;margin:0;background:transparent;cursor:pointer}
.ap-scrub input::-webkit-slider-runnable-track{height:4px;background:#f6f4ef55}
.ap-scrub input::-moz-range-track{height:4px;background:#f6f4ef55}
.ap-scrub input::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;margin-top:-13px;border-radius:50%;background:var(--gft-paper);border:4px solid var(--gft-ochre)}
.ap-scrub input::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--gft-paper);border:4px solid var(--gft-ochre)}
.ap-scrub input:focus-visible{outline:3px solid var(--gft-ochre);outline-offset:2px}
.ap-play{justify-self:start;border-color:var(--gft-ochre)}
.ap-cell .ap-fold{margin:0;color:var(--ap-lab)}
/* entrance "reed": (a) warps rise as reed dents, (b) picks beaten in one by one, then the knots stamp */
:root[data-m-go] .ap-sec--bench:not([data-ap-in]) .ap-bw{transform:scaleY(.3)}
:root[data-m-go] .ap-sec--bench:not([data-ap-in]) :is(.ap-bench__dots,.ap-node__n){opacity:0}
:root[data-m-go] .ap-sec--bench[data-ap-in] :is(.ap-bench__dots,.ap-node__n){animation-name:ap-fadein;animation-duration:300ms;animation-timing-function:ease-out;animation-delay:560ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .ap-sec--bench[data-ap-in] .ap-bw{animation-name:ap-reed;animation-duration:400ms;animation-timing-function:var(--gft-ease-out);animation-delay:calc(var(--i) * 15ms);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes ap-reed{from{transform:scaleY(.3)}to{transform:none}}
:root[data-m-go] .ap-sec--bench:not([data-ap-in]) .ap-pick{clip-path:inset(-20px 100% -20px 0)}
:root[data-m-go] .ap-sec--bench[data-ap-in] .ap-pick{animation-name:ap-beat;animation-duration:300ms;animation-timing-function:var(--gft-ease-out);animation-delay:calc(250ms + var(--i) * 40ms);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes ap-beat{from{clip-path:inset(-20px 100% -20px 0)}to{clip-path:inset(-20px 0 -20px 0)}}
:root[data-m-go] .ap-sec--bench:not([data-ap-in]) :is(.ap-node__in,.ap-bench__kin>g){opacity:0}
:root[data-m-go] .ap-sec--bench[data-ap-in] .ap-node__in{animation-name:ap-stamp;animation-duration:220ms;animation-timing-function:var(--gft-ease-out);animation-delay:calc(680ms + var(--r) * 6ms);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .ap-sec--bench[data-ap-in] .ap-bench__kin>g{animation-name:ap-fadein;animation-duration:220ms;animation-timing-function:ease-out;animation-delay:700ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes ap-stamp{from{opacity:0;transform:scale(1.7)}to{opacity:1;transform:none}}
:root[data-m-go] .ap-sec--bench:not([data-ap-in]) .ap-cell{opacity:.2;transform:translateY(18px)}
:root[data-m-go] .ap-sec--bench[data-ap-in] .ap-cell{animation-name:ap-cell;animation-duration:520ms;animation-timing-function:var(--gft-ease-out);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal;animation-delay:300ms}
:root[data-m-go] .ap-sec--bench[data-ap-in] .ap-cell+.ap-cell{animation-delay:380ms}
:root[data-m-go] .ap-sec--bench[data-ap-in] .ap-cell+.ap-cell+.ap-cell{animation-delay:460ms}
@keyframes ap-cell{from{opacity:.2;transform:translateY(18px)}to{opacity:1;transform:none}}
/* alive: beads drift, the shuttle rides the last laid pick, the chosen knot's halo pulses, measurement twinkles */
:root[data-m-go] .ap-bench__stage .ap-sent[data-m-on]~svg .ap-bead{animation-name:ap-bead;animation-duration:5.6s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:normal;animation-delay:calc(var(--k) * -1.15s)}
@keyframes ap-bead{from{transform:translateY(0)}to{transform:translateY(570px)}}
:root[data-m-go] .ap-bench__stage .ap-sent[data-m-on]~svg .ap-bench__shuttle{animation-name:ap-ride;animation-duration:7s;animation-timing-function:var(--gft-ease-in-out);animation-iteration-count:infinite;animation-direction:alternate}
@keyframes ap-ride{from{transform:translateX(0)}to{transform:translateX(1104px)}}
:root[data-m-go] .ap-bench__stage .ap-sent[data-m-on]~svg .ap-node[aria-pressed=true] .ap-node__halo{animation-name:ap-halo;animation-duration:2.2s;animation-timing-function:ease-out;animation-iteration-count:infinite;animation-direction:alternate}
:root[data-m-go] .ap-bench[data-layer=measurement] .ap-sent[data-m-on]~svg .ap-dot{animation-name:ap-twinkle;animation-duration:7s;animation-timing-function:ease-out;animation-iteration-count:infinite;animation-direction:normal;animation-delay:calc((var(--c) + var(--r)) * 55ms)}
@keyframes ap-twinkle{0%,7%,100%{transform:none}3%{transform:scale(2.4)}}

/* ================= 3 the measurement contract (paper to deep forest, act II) ================= */
.ap-sec--contract{background:var(--gft-paper);color:var(--ap-ink);padding:0}
.ap-ct{position:relative;padding-bottom:0}
.ap-ct__line{position:relative;z-index:3;height:112px;margin-top:-46px}
.ap-ct__thread{position:absolute;left:0;right:0;top:44px;height:4px;margin-top:-2px;background:var(--gft-ochre)}
.ap-ct__pulse{position:absolute;left:0;top:44px;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--ap-ochre-l);box-shadow:0 0 0 4px #c98a2b40;opacity:0}
.ap-ct__knot{position:absolute;left:var(--x);top:44px;display:grid;justify-items:center;gap:10px;transform:translate(-50%,-22px);cursor:pointer}
.ap-ct__ring{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--gft-night);border:3px solid var(--gft-ochre);transition:transform 260ms var(--gft-ease-out),background-color 260ms}
.ap-ct__ring i{width:12px;height:12px;border-radius:50%;background:#f6f4ef;transition:background-color 260ms,transform 260ms}
.ap-ct__kl{font:600 15px/1 var(--gft-font-mono);letter-spacing:.06em;color:var(--ap-ink);white-space:nowrap}
.ap-ct:has(#ap-q0:checked) .ap-ct__knot[data-n="0"] .ap-ct__ring,.ap-ct:has(#ap-q1:checked) .ap-ct__knot[data-n="1"] .ap-ct__ring,.ap-ct:has(#ap-q2:checked) .ap-ct__knot[data-n="2"] .ap-ct__ring,.ap-ct:has(#ap-q3:checked) .ap-ct__knot[data-n="3"] .ap-ct__ring{transform:scale(1.18)}
.ap-ct:has(#ap-q0:checked) .ap-ct__knot[data-n="0"] .ap-ct__ring i,.ap-ct:has(#ap-q1:checked) .ap-ct__knot[data-n="1"] .ap-ct__ring i,.ap-ct:has(#ap-q2:checked) .ap-ct__knot[data-n="2"] .ap-ct__ring i,.ap-ct:has(#ap-q3:checked) .ap-ct__knot[data-n="3"] .ap-ct__ring i{background:var(--gft-ochre);transform:scale(1.4)}
.ap-ct__track{display:grid;grid-template-columns:minmax(0,1fr)}
.ap-ct__pin{grid-area:1/1;position:sticky;top:0;z-index:2;align-self:start;padding-top:12px;background:var(--gft-paper)}
.ap-ct__steps{grid-area:1/1;position:relative;z-index:1;display:grid;pointer-events:none}
.ap-ct__step{height:38svh}
.ap-ct__head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px clamp(32px,5vw,88px);align-items:end;margin-bottom:14px}
.ap-ct__head .gft-eyebrow{color:var(--gft-forest)}
.ap-ct__head .ap-lede{color:var(--ap-ink2);max-width:44ch}
.ap-ct__stage{position:relative;min-height:clamp(460px,56svh,520px);padding:18px 0 22px;background:linear-gradient(180deg,var(--gft-paper) 0%,var(--ap-paper2) 100%);border-top:1px solid #0e4d4a26;overflow:clip}
.ap-ct__wires{position:absolute;inset:0;pointer-events:none}
.ap-wires{width:100%;height:100%;display:block}
.ap-wires__tag{font:600 13px var(--gft-font-mono);letter-spacing:.08em;fill:#0e4d4a}
.ap-mini__col :is(path,rect,circle,g){transform-box:fill-box}
.ap-mini__col{--lit:0}
.ap-ct:has(#ap-q0:checked) .ap-mini__col[data-n="0"],.ap-ct:has(#ap-q1:checked) .ap-mini__col[data-n="1"],.ap-ct:has(#ap-q2:checked) .ap-mini__col[data-n="2"],.ap-ct:has(#ap-q3:checked) .ap-mini__col[data-n="3"]{--lit:1}
.ap-mini__lit{opacity:var(--lit);transition:opacity 300ms}
.ap-mini__bead{opacity:calc(var(--lit) * .95);fill:var(--gft-ochre)}
.ap-mini__halo{opacity:calc(.2 + var(--lit) * .8);transform-origin:center;transform:scale(calc(.85 + var(--lit) * .25));transition:transform 300ms var(--gft-ease-out),opacity 300ms}
.ap-mini__node{transform-origin:center;transform:scale(calc(1 + var(--lit) * .32));transition:transform 300ms var(--gft-ease-out),opacity 300ms}
.ap-mini__n{font:600 13px var(--gft-font-mono);letter-spacing:.05em;fill:#f6f4ef}
.ap-mini__mid{transition:opacity 300ms}
.ap-ct:has(#ap-complete:not(:checked)) .ap-mini__mid{opacity:0}
.ap-ct:has(#ap-complete:not(:checked)) .ap-mini__col .ap-mini__node{opacity:calc(1 - var(--lit))}
.ap-ct__tri{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,32fr) minmax(0,36fr) minmax(0,32fr);gap:0 24px;align-items:stretch}
.ap-ct__rows{margin:0;padding:0;border:0;min-width:0;display:grid;gap:14px;align-content:start}
.ap-ct__qlist{display:grid;background:#f6f4eff5;border:1px solid #0e4d4a33}
.ap-q{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:baseline;gap:8px;padding:11px 14px 11px 12px;border-top:1px solid #0e4d4a26;cursor:pointer;transition:background-color 240ms,color 240ms}
.ap-q:first-child{border-top:0}
.ap-q__hit{position:absolute;inset:0;z-index:2;cursor:pointer}
.ap-q__n{font:600 13px var(--gft-font-mono);letter-spacing:.06em;color:var(--gft-forest)}
.ap-q__t{margin:0;font-size:21px;font-weight:800;line-height:1.15;letter-spacing:-.03em}
.ap-q__wire{font:600 12px/1 var(--gft-font-mono);letter-spacing:.05em;text-transform:uppercase;padding:5px 8px;border:1px solid #0e4d4a40;color:var(--gft-forest);white-space:nowrap}
.ap-ct:has(#ap-q0:checked) .ap-q[data-n="0"],.ap-ct:has(#ap-q1:checked) .ap-q[data-n="1"],.ap-ct:has(#ap-q2:checked) .ap-q[data-n="2"],.ap-ct:has(#ap-q3:checked) .ap-q[data-n="3"]{background:var(--gft-forest);color:var(--gft-paper)}
.ap-ct:has(#ap-q0:checked) .ap-q[data-n="0"] .ap-q__n,.ap-ct:has(#ap-q1:checked) .ap-q[data-n="1"] .ap-q__n,.ap-ct:has(#ap-q2:checked) .ap-q[data-n="2"] .ap-q__n,.ap-ct:has(#ap-q3:checked) .ap-q[data-n="3"] .ap-q__n{color:var(--ap-ochre-l)}
.ap-ct:has(#ap-q0:checked) .ap-q[data-n="0"] .ap-q__wire,.ap-ct:has(#ap-q1:checked) .ap-q[data-n="1"] .ap-q__wire,.ap-ct:has(#ap-q2:checked) .ap-q[data-n="2"] .ap-q__wire,.ap-ct:has(#ap-q3:checked) .ap-q[data-n="3"] .ap-q__wire{background:var(--gft-ochre);border-color:var(--gft-ochre);color:var(--gft-night)}
.ap-ct:has(#ap-q0:focus-visible) .ap-q[data-n="0"],.ap-ct:has(#ap-q1:focus-visible) .ap-q[data-n="1"],.ap-ct:has(#ap-q2:focus-visible) .ap-q[data-n="2"],.ap-ct:has(#ap-q3:focus-visible) .ap-q[data-n="3"]{outline:3px solid var(--gft-ochre);outline-offset:-3px}
.ap-ct__qmore{padding:16px 18px;background:#f6f4eff5;border:1px solid #0e4d4a33;border-left:4px solid var(--gft-forest)}
.ap-qd{display:grid;gap:10px}
.ap-q__d,.ap-q__a{margin:0;font-size:16px;line-height:1.5;color:var(--ap-ink)}
.ap-qd b{display:block;font:600 13px/1.4 var(--gft-font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--gft-forest);margin-bottom:2px}
.ap-ct__center{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;min-width:0;padding-bottom:6px;pointer-events:none}
.ap-ct__wirestatus{padding:10px 18px;background:#072d2bf2;border:1px solid var(--gft-ochre);color:var(--gft-paper);text-align:center}
.ap-ws{margin:0;display:grid;gap:2px}
.ap-ws span{font:600 12px/1.3 var(--gft-font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ap-ochre-l)}
.ap-ws strong{font-size:16px;font-weight:700;color:var(--gft-paper)}
.ap-ct__panel{position:relative;display:grid;gap:16px;align-content:start;padding:24px 26px 26px;background:#f6f4eff5;border:1px solid #0e4d4a33;min-width:0}
.ap-cp__label{margin:0 0 10px;font:600 13px/1.45 var(--gft-font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ap-ink)}
.ap-cp p{margin:0}
.ap-cp__ok{font-size:20px;line-height:1.42;letter-spacing:-.01em;color:var(--ap-ink)}
.ap-cp__bad{font-size:17px;line-height:1.5;color:#4a2c06}
.ap-cp__bad b{display:block;font:600 13px var(--gft-font-mono);letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}
.ap-cp{visibility:hidden;opacity:0;transition:opacity 140ms,visibility 0s 140ms}
.ap-ct:has(#ap-q0:checked) .ap-cp[data-for="0"],.ap-ct:has(#ap-q1:checked) .ap-cp[data-for="1"],.ap-ct:has(#ap-q2:checked) .ap-cp[data-for="2"],.ap-ct:has(#ap-q3:checked) .ap-cp[data-for="3"]{visibility:visible;opacity:1;transition:opacity 320ms var(--gft-ease-out) 120ms,visibility 0s}
.ap-cp__bad,.ap-ct:has(#ap-complete:not(:checked)) .ap-cp__ok{visibility:hidden;opacity:0}
.ap-ct:has(#ap-complete:not(:checked)) .ap-cp__bad{visibility:inherit;opacity:1;transition:opacity 320ms 120ms}
.ap-cp__ok{transition:opacity 320ms 120ms}
.ap-switch{display:flex;align-items:center;gap:14px;min-height:48px;cursor:pointer;width:fit-content}
.ap-switch__track{position:relative;width:60px;height:32px;border:2px solid var(--gft-forest);border-radius:16px;transition:background-color 240ms,border-color 240ms}
.ap-switch__track i{position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:var(--gft-forest);transition:transform 300ms var(--gft-ease-out),background-color 240ms}
.ap-switch__t{font-size:17px;font-weight:650}
.ap-ct:has(#ap-complete:checked) .ap-switch__track{background:var(--gft-forest)}
.ap-ct:has(#ap-complete:checked) .ap-switch__track i{transform:translateX(28px);background:var(--gft-paper)}
.ap-ct:has(#ap-complete:not(:checked)) .ap-switch__track{border-color:#8a5a14}
.ap-ct:has(#ap-complete:not(:checked)) .ap-switch__track i{background:#8a5a14}
.ap-ct:has(#ap-complete:focus-visible) .ap-switch__track{outline:3px solid var(--gft-ochre);outline-offset:3px}
.ap-verdict{margin:0;padding:12px 16px;border-left:4px solid;font-size:17px;line-height:1.5}
.ap-verdict--ok{border-color:var(--gft-forest);background:#0e4d4a14}
.ap-verdict--bad{border-color:#8a5a14;background:#c98a2b24;visibility:hidden;opacity:0}
.ap-ct:has(#ap-complete:not(:checked)) .ap-verdict--ok{visibility:hidden;opacity:0}
.ap-ct:has(#ap-complete:not(:checked)) .ap-verdict--bad{visibility:visible;opacity:1}
/* dark hand-over band at the bottom of #boundary: contract wires continue down and bend into #phases */
.ap-ct__handover{position:relative;z-index:3;height:280px;background-color:#072d2b;background-image:linear-gradient(180deg,var(--ap-paper2) 0%,#144845 18%,#072d2b 58%,#0e4d4a 100%);overflow:clip}
.ap-ct__bend{position:absolute;inset:0;width:100%;height:100%;display:block}
.ap-ct:has(#ap-q0:checked) .ap-bend__g[data-src="0"] .ap-bend__lit,.ap-ct:has(#ap-q1:checked) .ap-bend__g[data-src="1"] .ap-bend__lit,.ap-ct:has(#ap-q2:checked) .ap-bend__g[data-src="2"] .ap-bend__lit,.ap-ct:has(#ap-q3:checked) .ap-bend__g[data-src="3"] .ap-bend__lit{stroke:#c98a2b;stroke-opacity:.96;stroke-width:3.8}
.ap-ct__handwrap{position:relative;z-index:2;padding-top:148px}
.ap-ct__handcap{padding:10px 16px;background-color:#072d2b;background:#072d2bf2;border:1px solid #c98a2b55;border-left:3px solid var(--gft-ochre);display:grid;gap:4px;max-width:520px}
.ap-ct__handcap .ap-cap{color:var(--ap-ochre-l);font-size:13px}
.ap-ct__handcap p{margin:0;font-size:16px;line-height:1.5;color:var(--ap-on)}
/* entrance "thread": (a) the line is drawn left to right through its knots, (b) rows deal in, the full-bleed wires drop */
:root[data-m-go] .ap-ct__line:not([data-ap-in]) .ap-ct__thread{clip-path:inset(0 100% 0 0)}
:root[data-m-go] .ap-ct__line[data-ap-in] .ap-ct__thread{animation-name:ap-shoot;animation-duration:450ms;animation-timing-function:var(--gft-ease-in-out);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .ap-ct__line:not([data-ap-in]) .ap-ct__ring{opacity:0;transform:scale(1.6)}
:root[data-m-go] .ap-ct__line[data-ap-in] .ap-ct__ring{animation-name:ap-tighten;animation-duration:260ms;animation-timing-function:var(--gft-ease-out);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .ap-ct__line[data-ap-in] .ap-ct__knot[data-n="0"] .ap-ct__ring{animation-delay:60ms}
:root[data-m-go] .ap-ct__line[data-ap-in] .ap-ct__knot[data-n="1"] .ap-ct__ring{animation-delay:170ms}
:root[data-m-go] .ap-ct__line[data-ap-in] .ap-ct__knot[data-n="2"] .ap-ct__ring{animation-delay:280ms}
:root[data-m-go] .ap-ct__line[data-ap-in] .ap-ct__knot[data-n="3"] .ap-ct__ring{animation-delay:390ms}
@keyframes ap-tighten{from{opacity:0;transform:scale(1.6)}}
:root[data-m-go] .ap-sec--contract:not([data-ap-in]) :is(.ap-q,.ap-ct__qmore,.ap-ct__panel){opacity:.15;transform:translateX(-36px)}
:root[data-m-go] .ap-sec--contract[data-ap-in] :is(.ap-q,.ap-ct__qmore){animation-name:ap-deal;animation-duration:420ms;animation-timing-function:var(--gft-ease-out);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal;animation-delay:300ms}
:root[data-m-go] .ap-sec--contract[data-ap-in] .ap-q[data-n="1"]{animation-delay:360ms}
:root[data-m-go] .ap-sec--contract[data-ap-in] .ap-q[data-n="2"]{animation-delay:420ms}
:root[data-m-go] .ap-sec--contract[data-ap-in] .ap-q[data-n="3"]{animation-delay:480ms}
@keyframes ap-deal{from{opacity:.15;transform:translateX(-36px)}to{opacity:1;transform:none}}
:root[data-m-go] .ap-sec--contract[data-ap-in] .ap-ct__panel{animation-name:ap-panel;animation-duration:460ms;animation-timing-function:var(--gft-ease-out);animation-delay:400ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .ap-sec--contract:not([data-ap-in]) .ap-ct__panel{transform:translateX(36px)}
@keyframes ap-panel{from{opacity:.15;transform:translateX(36px)}to{opacity:1;transform:none}}
:root[data-m-go] .ap-sec--contract:not([data-ap-in]) .ap-mini__t{transform:scaleY(.05)}
:root[data-m-go] .ap-sec--contract[data-ap-in] .ap-mini__t{transform-origin:50% 0;animation-name:ap-drop;animation-duration:450ms;animation-timing-function:var(--gft-ease-out);animation-delay:320ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
.ap-mini__t{transform-origin:50% 0}
@keyframes ap-drop{from{transform:scaleY(.05)}to{transform:none}}
:root[data-m-go] .ap-sec--contract:not([data-ap-in]) .ap-mini__lit{clip-path:inset(0 0 100% 0)}
:root[data-m-go] .ap-sec--contract[data-ap-in] .ap-mini__lit{animation-name:ap-warpdraw;animation-duration:420ms;animation-timing-function:var(--gft-ease-out);animation-delay:420ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
/* alive: a pulse runs along the line; the bead slides down the chosen thread; broken ends sway */
:root[data-m-go] .ap-ct__line .ap-sent[data-m-on]~.ap-ct__pulse{animation-name:ap-pulse-run;animation-duration:5s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:normal}
@keyframes ap-pulse-run{0%{opacity:0;transform:translateX(0)}6%{opacity:1}94%{opacity:1}100%{opacity:0;transform:translateX(100vw)}}
:root[data-m-go] .ap-ct:has(.ap-ct__line .ap-sent[data-m-on]) .ap-mini__bead{animation-name:ap-minibead;animation-duration:3.2s;animation-timing-function:var(--gft-ease-in-out);animation-iteration-count:infinite;animation-direction:normal}
@keyframes ap-minibead{0%{transform:translateY(0)}80%,100%{transform:translateY(390px)}}
:root[data-m-go] .ap-ct:has(#ap-complete:not(:checked)):has(.ap-ct__line .ap-sent[data-m-on]) :is(.ap-mini__up,.ap-mini__dn){animation-name:ap-sway;animation-duration:1.8s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}
@keyframes ap-sway{from{transform:translateX(-2px)}to{transform:translateX(2px)}}

/* ================= 4 the twill, sticky (full-bleed forest stage) ================= */
.ap-sec--twill{background:#0c4543;color:var(--ap-on)}
.ap-tw{--ap-acc:#f8deb0;display:grid;grid-template-columns:minmax(0,1fr)}
.ap-tw[data-phase="0"]{--ap-acc:#f0c47e}
.ap-tw[data-phase="1"]{--ap-acc:#b9c3e0}
.ap-tw[data-phase="2"]{--ap-acc:#8fd1ad}
.ap-tw__pin{grid-area:1/1;position:sticky;top:0;z-index:3;height:100svh;align-self:start;pointer-events:none}
.ap-tw__stage{--ap-ochre-l:#f8deb0;pointer-events:auto;position:absolute;inset:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:14px;padding:26px max(48px,calc((100vw - 1440px) / 2)) 18px;background:linear-gradient(180deg,#0e4d4a 0%,#0c4543 100%);color:var(--ap-on);overflow:clip}
.ap-tw__glow{position:absolute;inset:0;pointer-events:none}
.ap-tw__glow i{position:absolute;inset:0;opacity:0;transition:opacity 700ms var(--gft-ease-out)}
.ap-tw__glow i[data-g="0"]{background:radial-gradient(48% 62% at 30% 58%,#c98a2b33,#c98a2b00 72%)}
.ap-tw__glow i[data-g="1"]{background:radial-gradient(62% 58% at 40% 22%,#2c3e7ab3,#2c3e7a00 72%)}
.ap-tw__glow i[data-g="2"]{background:radial-gradient(40% 52% at 36% 52%,#6bb68f40,#6bb68f00 72%)}
.ap-tw__glow i[data-g="3"]{background:radial-gradient(52% 64% at 62% 34%,#f8deb024,#f8deb000 72%)}
.ap-tw[data-phase="0"] .ap-tw__glow i[data-g="0"],.ap-tw[data-phase="1"] .ap-tw__glow i[data-g="1"],.ap-tw[data-phase="2"] .ap-tw__glow i[data-g="2"],.ap-tw[data-phase="3"] .ap-tw__glow i[data-g="3"]{opacity:1}
.ap-tw__top{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:16px 40px;align-items:end}
.ap-tw__title .gft-eyebrow{color:var(--ap-lab);margin-bottom:8px}
.ap-tw__h{margin:0;font-family:var(--gft-font-display);font-weight:800;font-size:clamp(2rem,2.8vw,2.7rem);max-width:none;color:var(--gft-paper)}
.ap-tw__rail{display:grid;gap:8px}
.ap-tw__rail .ap-cap{color:var(--ap-lab)}
.ap-tw__rail .ap-cap b{color:var(--ap-acc)}
.ap-tw__tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.ap-tab{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border:1px solid #f6f4ef55;background:#0a3b39b3;color:var(--ap-on);font:650 15px var(--gft-font-display);cursor:pointer;transition:background-color 200ms,color 200ms,border-color 200ms}
.ap-tab b{font:600 13px var(--gft-font-mono)}
.ap-tab:hover{border-color:var(--ap-acc)}
.ap-tab[aria-pressed=true]{background:var(--gft-paper);color:var(--gft-night);border-color:var(--gft-paper)}
.ap-tw__bar{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.ap-tw__bar i{display:block;height:4px;background:#f6f4ef33;transition:background-color 300ms}
.ap-tw[data-phase="0"] .ap-tw__bar i:nth-child(-n+1),.ap-tw[data-phase="1"] .ap-tw__bar i:nth-child(-n+2),.ap-tw[data-phase="2"] .ap-tw__bar i:nth-child(-n+3),.ap-tw[data-phase="3"] .ap-tw__bar i:nth-child(-n+4){background:var(--ap-acc)}
.ap-tw__scrub{display:none}
.ap-tw__main{position:relative;display:grid;grid-template-columns:minmax(0,72fr) minmax(0,28fr);gap:clamp(24px,3vw,48px);min-height:0}
.ap-tw__draw{position:relative;min-height:0;min-width:0;display:flex}
.ap-tw__zoom{flex:1 1 0;min-width:0;display:flex;transform-origin:50% 50%}
.ap-tw__svg{width:100%;height:100%;display:block;overflow:visible}
.ap-tw[data-phase="0"] .ap-tw__zoom{transform:translate(-1.5%,1.5%) scale(.97)}
.ap-tw[data-phase="1"] .ap-tw__zoom{transform:translateY(-1.5%) scale(1.04)}
.ap-tw[data-phase="2"] .ap-tw__zoom{transform:scale(1.13)}
.ap-svgtxt text{font:500 14px var(--gft-font-mono);letter-spacing:.06em;fill:#e3eee8}
/* the caption beside the drawing: one state per phase, placed differently per phase, over a large outline numeral */
.ap-tw__cap{position:relative;min-width:0;min-height:0}
.ap-pc{position:relative;display:grid;gap:14px;align-content:center;align-self:center;padding-block:12px}
.ap-pc[data-for="1"]{align-self:start}
.ap-pc[data-for="2"]{align-self:end}
.ap-pc>*{position:relative;z-index:1;margin:0}
.ap-pc .ap-cap{font-size:14px;color:var(--ap-acc)}
.ap-pc__no{display:block;margin:0 0 -4px -4px!important;font:900 clamp(96px,9.4vw,140px)/.8 var(--gft-font-display);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:2px var(--ap-acc);opacity:.6;pointer-events:none;user-select:none}
.ap-pc__t{font:800 clamp(2.5rem,3.3vw,3.25rem)/1.03 var(--gft-font-display);letter-spacing:-.045em;color:var(--gft-paper)}
.ap-pc__x{font-size:18px;line-height:1.55;color:var(--ap-on2)}
.ap-pc__exit{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid #f6f4ef45;background:#072d2bb3;font-size:16px;line-height:1.45;color:var(--ap-on)}
.ap-pc__exit .ap-tick{border-color:var(--ap-acc)}
.ap-pc__lede{font:italic clamp(1.45rem,1.9vw,1.85rem)/1.32 var(--gft-font-serif);color:var(--gft-paper)}
.ap-tw__foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 24px;align-items:center;padding-top:10px;border-top:1px solid #a3c8b333}
.ap-tw__read p{margin:0;font-size:17px;line-height:1.45;color:var(--ap-on)}
.ap-tw__state{grid-column:1/-1;display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.ap-tw__state .ap-stack span{font:600 13px var(--gft-font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ap-acc)}
.ap-tw__note{font:13px var(--gft-font-mono);color:var(--ap-lab);text-align:right}
.ap-tw__cmp{display:flex;align-items:center;gap:8px}
.ap-tw__cmp .ap-cap{color:var(--ap-lab);margin-right:6px}
.ap-tw__cmp .ap-btn{min-height:44px;padding:6px 16px;border-color:#f6f4ef77}
.ap-tw:not([data-phase="3"]) .ap-tw__cmp{visibility:hidden}
/* drawing states: the outgoing phase is wiped away left to right, then the new one is drawn row by row */
.ap-s{opacity:0;visibility:hidden;transition:opacity 200ms ease-in,visibility 0s linear 200ms}
.ap-tw[data-phase="0"] .ap-s[data-s="0"],.ap-tw[data-phase="1"] .ap-s[data-s="1"],.ap-tw[data-phase="2"] .ap-s[data-s="2"],.ap-tw[data-phase="3"] .ap-s[data-s="3"]{opacity:1;visibility:visible;transition:opacity 0s,visibility 0s}
.ap-tw :is(.ap-d--curves,.ap-d--ring,.ap-d--ringt){transition:opacity 480ms var(--gft-ease-out)}
.ap-tw[data-lay] :is(.ap-d--ring,.ap-d--ringt){opacity:0}
.ap-tw[data-lay] .ap-d--curves{opacity:.4}
.ap-ring{transform-box:fill-box;transform-origin:center}
.ap-cb,.ap-cpi,.ap-cm{transition:opacity 300ms}
.ap-tw[data-cmp=baseline] :is(.ap-cpi,.ap-cm){opacity:.1}
.ap-tw[data-cmp=pilot] .ap-cb{opacity:.1}
.ap-mk{cursor:pointer;outline:none}
.ap-mk:is(:hover,:focus-visible) circle{stroke:#f6f4ef;stroke-width:2.5}
.ap-mk:focus-visible rect{stroke:#f6f4ef;stroke-width:2}
:root[data-m-go] .ap-tw__zoom{transition:transform 820ms var(--gft-ease-in-out)}
:root[data-m-go] .ap-tw[data-live] .ap-s{clip-path:inset(-40px -40px -40px 100%);transition:clip-path 240ms var(--gft-ease-in-out),opacity 240ms ease-in,visibility 0s linear 240ms}
:root[data-m-go] .ap-tw[data-live][data-phase="0"] .ap-s[data-s="0"],:root[data-m-go] .ap-tw[data-live][data-phase="1"] .ap-s[data-s="1"],:root[data-m-go] .ap-tw[data-live][data-phase="2"] .ap-s[data-s="2"],:root[data-m-go] .ap-tw[data-live][data-phase="3"] .ap-s[data-s="3"]{clip-path:inset(-40px -40px -40px -40px);transition:none}
:root[data-m-go] .ap-tw[data-live][data-phase="0"] .ap-s[data-s="0"] .ap-d,:root[data-m-go] .ap-tw[data-live][data-phase="1"] .ap-s[data-s="1"] .ap-d,:root[data-m-go] .ap-tw[data-live][data-phase="2"] .ap-s[data-s="2"] .ap-d,:root[data-m-go] .ap-tw[data-live][data-phase="3"] .ap-s[data-s="3"] .ap-d{animation-name:ap-draw;animation-duration:700ms;animation-timing-function:var(--gft-ease-out);animation-delay:calc(var(--d) + 160ms);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .ap-tw[data-live][data-phase="1"] .ap-s[data-s="1"] .ap-row,:root[data-m-go] .ap-tw[data-live][data-phase="2"] .ap-s[data-s="2"] .ap-row{animation-name:ap-weave-l;animation-duration:420ms;animation-timing-function:var(--gft-ease-out);animation-delay:calc(160ms + var(--r) * 50ms);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .ap-tw[data-live][data-phase="1"] .ap-s[data-s="1"] .ap-row[data-dir="1"],:root[data-m-go] .ap-tw[data-live][data-phase="2"] .ap-s[data-s="2"] .ap-row[data-dir="1"]{animation-name:ap-weave-r}
:root[data-m-go] .ap-tw[data-live][data-phase="1"] .ap-s[data-s="1"] .ap-row--over{animation-delay:calc(220ms + var(--r) * 50ms)}
:root[data-m-go] .ap-tw[data-live][data-phase="0"] .ap-s[data-s="0"] .ap-svgtxt,:root[data-m-go] .ap-tw[data-live][data-phase="1"] .ap-s[data-s="1"] .ap-svgtxt,:root[data-m-go] .ap-tw[data-live][data-phase="2"] .ap-s[data-s="2"] .ap-svgtxt,:root[data-m-go] .ap-tw[data-live][data-phase="3"] .ap-s[data-s="3"] .ap-svgtxt{animation-name:ap-labin;animation-duration:360ms;animation-timing-function:ease-out;animation-delay:420ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes ap-draw{from{opacity:0;clip-path:inset(-10px 100% -10px -10px)}to{opacity:1;clip-path:inset(-10px -10px -10px -10px)}}
@keyframes ap-weave-l{from{opacity:0;clip-path:inset(-10px 100% -10px -10px)}to{opacity:1;clip-path:inset(-10px -10px -10px -10px)}}
@keyframes ap-weave-r{from{opacity:0;clip-path:inset(-10px -10px -10px 100%)}to{opacity:1;clip-path:inset(-10px -10px -10px -10px)}}
@keyframes ap-labin{from{opacity:0}to{opacity:1}}
/* the caption arrives after the old one has gone, rising a little */
:root[data-m-go] .ap-tw__cap>.ap-read{transform:translateY(20px);transition:opacity 140ms ease-in,transform 0s linear 140ms,visibility 0s linear 140ms}
:root[data-m-go] .ap-tw__cap>.ap-read[data-on]{transform:none;transition:opacity 380ms var(--gft-ease-out) 200ms,transform 560ms var(--gft-ease-out) 200ms,visibility 0s}
/* the steps: scroll spacers on wide screens (their copy is read by assistive technology), visible copy on phones */
.ap-tw__steps{grid-area:1/1;position:relative;z-index:1;list-style:none;margin:0;padding:0}
.ap-tw__intro{min-height:80svh}
.ap-step{position:relative;min-height:100svh}
/* Keep the complete interlude pinned for a reading screen after the iris opens. */
.ap-tw__exit{height:210svh}
@media (min-width:761px){
 .ap-tw__introin,.ap-step__in,.ap-step__no{position:absolute!important;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
}
.ap-tw__intro .gft-eyebrow{color:var(--ap-lab)}
.ap-tw__intro .ap-lede{margin-top:18px;color:var(--ap-on2)}
.ap-step__no{position:absolute;font:900 160px/1 var(--gft-font-display);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:2px var(--ap-acc);opacity:.22;pointer-events:none;user-select:none}
.ap-step__in{position:relative;max-width:30rem}
.ap-step .ap-cap{color:var(--ap-acc)}
.ap-step h3{margin:12px 0 14px;font-size:28px;line-height:1.08;letter-spacing:-.04em;color:var(--gft-paper)}
.ap-step p{margin:0;font-size:17px;line-height:1.55;color:var(--ap-on2)}
.ap-step .ap-step__exit{display:flex;gap:12px;align-items:flex-start;margin-top:18px;padding:12px 14px;border:1px solid #f6f4ef45;background:#072d2bb3;font-size:17px;color:var(--ap-on)}
.ap-tick{flex:none;width:12px;height:12px;margin-top:.45em;border:2px solid var(--ap-acc);background:var(--gft-ochre)}
/* entrance "twill-shift": the twill warp threads and drawing shift into place without a diagonal wedge mask */
:root[data-m-go] .ap-sec--twill:not([data-ap-in]) .ap-tw__draw{opacity:0;transform:translateY(28px)}
:root[data-m-go] .ap-sec--twill[data-ap-in] .ap-tw__draw{animation-name:ap-twdrawin;animation-duration:560ms;animation-timing-function:var(--gft-ease-out);animation-delay:120ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes ap-twdrawin{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
:root[data-m-go] .ap-sec--twill:not([data-ap-in]) .ap-tab{opacity:0}
:root[data-m-go] .ap-sec--twill[data-ap-in] .ap-tab{animation-name:ap-set;animation-duration:300ms;animation-timing-function:var(--gft-ease-out);animation-delay:420ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .ap-sec--twill[data-ap-in] .ap-tab+.ap-tab{animation-delay:480ms}
:root[data-m-go] .ap-sec--twill[data-ap-in] .ap-tab+.ap-tab+.ap-tab{animation-delay:540ms}
:root[data-m-go] .ap-sec--twill[data-ap-in] .ap-tab+.ap-tab+.ap-tab+.ap-tab{animation-delay:600ms}
@keyframes ap-set{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
:root[data-m-go] .ap-sec--twill:not([data-ap-in]) .ap-tw__base{opacity:0}
:root[data-m-go] .ap-sec--twill[data-ap-in] .ap-tw__base{animation-name:ap-twcells;animation-duration:520ms;animation-timing-function:var(--gft-ease-out);animation-delay:200ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes ap-twcells{from{opacity:0;transform:translate(-24px,16px)}to{opacity:1;transform:none}}
/* the steps' own entrances on phones (weft, wind, comb, selvedge-draw); each outline numeral draws on arrival */
:root[data-m-go] .ap-step[data-ap-enter]:not([data-ap-in]) .ap-step__in{opacity:.2}
:root[data-m-go] .ap-step[data-ap-enter]:not([data-ap-in]) .ap-step__no{clip-path:inset(100% 0 0 0)}
:root[data-m-go] .ap-step[data-ap-in] .ap-step__no{animation-name:ap-numdraw;animation-duration:800ms;animation-timing-function:var(--gft-ease-out);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes ap-numdraw{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
:root[data-m-go] .ap-step[data-ap-in] .ap-step__in{animation-duration:640ms;animation-timing-function:var(--gft-ease-out);animation-delay:120ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .ap-step[data-fx=weft][data-ap-in] .ap-step__in{animation-name:ap-s-weft}
:root[data-m-go] .ap-step[data-fx=wind][data-ap-in] .ap-step__in{animation-name:ap-s-wind}
:root[data-m-go] .ap-step[data-fx=comb][data-ap-in] .ap-step__in{animation-name:ap-s-comb}
:root[data-m-go] .ap-step[data-fx=selvedge-draw][data-ap-in] .ap-step__in{animation-name:ap-s-selv}
@keyframes ap-s-weft{from{opacity:.2;transform:translateX(-44px)}to{opacity:1;transform:none}}
@keyframes ap-s-wind{from{opacity:.2;transform:translateX(40px) rotate(1.6deg)}to{opacity:1;transform:none}}
@keyframes ap-s-comb{from{opacity:.2;transform:translateY(-36px)}to{opacity:1;transform:none}}
@keyframes ap-s-selv{from{opacity:.2;clip-path:inset(0 0 0 34%)}to{opacity:1;clip-path:inset(0 0 0 0)}}
/* alive, per state: the ring pulses, the beads fall, the fallback dash flows, the pilot breathes */
:root[data-m-go] .ap-tw__stage .ap-sent[data-m-on]~.ap-tw__main .ap-pbead{animation-name:ap-pbead;animation-duration:6s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:normal;animation-delay:calc(var(--k) * -2s)}
@keyframes ap-pbead{from{transform:translateY(0)}to{transform:translateY(360px)}}
:root[data-m-go] .ap-tw__stage .ap-sent[data-m-on]~.ap-tw__main .ap-ring{animation-name:ap-ringp;animation-duration:2.2s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}
@keyframes ap-ringp{from{transform:scale(.9)}to{transform:scale(1.15)}}
:root[data-m-go] .ap-tw__stage .ap-sent[data-m-on]~.ap-tw__main .ap-fall{animation-name:ap-fall;animation-duration:2.6s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:normal}
@keyframes ap-fall{0%{opacity:.35}50%{opacity:1}100%{opacity:.35}}
:root[data-m-go] .ap-tw__stage .ap-sent[data-m-on]~.ap-tw__main .ap-pilot{animation-name:ap-pilot;animation-duration:3.4s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}
@keyframes ap-pilot{from{opacity:.65}to{opacity:1}}
:root[data-m-go] .ap-tw__stage .ap-sent[data-m-on]~.ap-tw__main .ap-pc__no{animation-name:ap-breathe;animation-duration:3.2s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}
/* the exit: a deep-night iris opens from the gap bracket and carries the interlude's headline and its four bars */
.ap-tw__iris{position:absolute;inset:0;z-index:5;background:#051f1d;clip-path:circle(0px at var(--ap-ix,50%) var(--ap-iy,40%));overflow:clip;pointer-events:none}
.ap-tw__curves{position:absolute;inset:0;width:100%;height:100%}
.ap-ir{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:clamp(24px,4svh,40px) max(48px,calc((100vw - 1440px) / 2))}
.ap-ir__eb{margin:0 0 12px;font:600 14px/1.4 var(--gft-font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ap-lab)}
.ap-ir__h{margin:0 0 clamp(14px,2.5svh,24px);font:800 clamp(2.2rem,min(4.4vw,6.4svh),4.4rem)/1.08 var(--gft-font-display);letter-spacing:-.05em;color:var(--gft-paper);max-width:20ch}
.ap-ir__h .gft-serif{font-weight:400;font-style:italic;letter-spacing:-.02em;color:var(--ap-ochre-l)}
.ap-ir__rows{display:grid;gap:clamp(6px,1.3svh,14px)}
.ap-ir__row{display:grid;grid-template-columns:clamp(230px,19vw,290px) minmax(0,1fr);align-items:end;gap:clamp(20px,2.4vw,36px)}
.ap-ir__n{font:850 clamp(48px,min(6.4vw,9svh),96px)/1 var(--gft-font-display);letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:var(--gft-paper);text-align:right;white-space:nowrap}
.ap-ir__n small{font-size:.42em;margin-left:4px;letter-spacing:0;color:var(--ap-sage-l)}
.ap-ir__row--sum .ap-ir__n{color:var(--ap-ochre-l)}
.ap-ir__row--sum .ap-ir__n small{color:var(--ap-ochre-l)}
.ap-ir__bar{display:grid;gap:8px;min-width:0;padding-bottom:4px}
.ap-ir__l{font:600 15px/1.3 var(--gft-font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ap-lab)}
.ap-ir__track{position:relative;display:block;height:44px;container-type:inline-size;overflow:clip}
.ap-ir__row--sum .ap-ir__track{height:54px}
.ap-ir__fray{position:absolute;inset:0;background:repeating-linear-gradient(90deg,#9fc9b14d 0 10px,transparent 10px 18px)}
.ap-ir__lit{position:absolute;left:0;top:0;bottom:0;width:calc(var(--v) * 1%);background:linear-gradient(90deg,#3f8f6b,#8fd1ad);transform-origin:0 50%}
.ap-ir__row--sum .ap-ir__lit{background:linear-gradient(90deg,#a8701f,#f0c47e)}
.ap-ir__pulse{position:absolute;left:0;top:0;bottom:0;width:96px;background:linear-gradient(90deg,#ffffff00,#ffffffa6,#ffffff00);opacity:0}
.ap-ir__eq{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 28px;margin:clamp(14px,3svh,28px) 0 0;padding-left:calc(clamp(230px,19vw,290px) + clamp(20px,2.4vw,36px));font:600 22px var(--gft-font-mono);color:var(--ap-on)}
.ap-ir__eq span{font:15px/1.4 var(--gft-font-display);color:var(--ap-lab)}
:root[data-m-go] .ap-tw__pin:has(>.ap-tw__stage>.ap-sent[data-m-on]) .ap-ir__pulse{animation-name:ap-irrun;animation-duration:3.6s;animation-timing-function:var(--gft-ease-in-out);animation-iteration-count:infinite;animation-direction:normal;animation-delay:calc(var(--k) * 260ms)}
@keyframes ap-irrun{0%{opacity:0;transform:translateX(-96px)}8%{opacity:1}70%{opacity:1;transform:translateX(calc(var(--v) * 1cqw - 96px))}80%,100%{opacity:0;transform:translateX(calc(var(--v) * 1cqw - 96px))}}

/* ================= 5 the OEE interlude (deep night, act III opens) ================= */
.ap-sec--model{position:relative;z-index:3;isolation:isolate;margin-top:0;background:#072d2b;border-top:2px solid #c98a2b80;box-shadow:0 -28px 56px #0000008c;color:var(--ap-on);padding:clamp(56px,6vw,88px) 0 clamp(48px,5vw,72px)}
.ap-model__bg{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
:root[data-m-go] .ap-sec--model>.ap-sent[data-m-on]~.ap-model__bg .ap-model__thr{animation-name:ap-thr;animation-duration:16s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}
@keyframes ap-thr{from{transform:translate(-18px,0)}to{transform:translate(18px,-10px)}}
.ap-model__head,.ap-oee{display:grid;grid-template-columns:minmax(0,66fr) minmax(0,34fr);gap:0 clamp(32px,4vw,64px)}
.ap-model__head{align-items:end;margin-bottom:28px}
.ap-model__head .gft-eyebrow{color:var(--ap-lab)}
.ap-model__head .ap-h{font-size:clamp(2.6rem,5vw,4.5rem);max-width:15ch}
.ap-model__head .ap-lede{color:var(--ap-on2)}
.ap-oee__strands{position:relative;display:grid;gap:4px;min-width:0}
.ap-st{--k:0}
.ap-st__track{position:relative;container-type:inline-size;height:118px}
.ap-st__num{position:absolute;left:0;top:0;display:flex;align-items:baseline;font:850 56px/1 var(--gft-font-display);letter-spacing:-.05em;font-variant-numeric:tabular-nums;transform:translateX(max(0px,calc(var(--v) * 1cqw - 100%)));transition:transform 260ms var(--gft-ease-out);white-space:nowrap}
.ap-st__num b{font:inherit}
.ap-st__num>span{font-size:.45em;margin-left:3px;color:var(--ap-sage-l)}
.ap-st__fray{position:absolute;left:0;right:0;top:86px;height:3px;background:repeating-linear-gradient(90deg,#9fc9b1 0 9px,transparent 9px 16px);opacity:.75}
.ap-st__lit{position:absolute;left:0;right:0;top:83px;height:9px;background:var(--ap-sage-l);clip-path:inset(0 calc(100% - var(--v) * 1%) 0 0);transition:clip-path 260ms var(--gft-ease-out),background-color 260ms}
.ap-oee[data-low=a] .ap-st[data-f=a] .ap-st__lit,.ap-oee[data-low=p] .ap-st[data-f=p] .ap-st__lit,.ap-oee[data-low=q] .ap-st[data-f=q] .ap-st__lit{background:var(--ap-ochre-l)}
.ap-st__pulse{position:absolute;left:0;top:81px;width:13px;height:13px;border-radius:50%;background:#fff;opacity:0}
.ap-st input{position:absolute;left:-15px;right:-15px;width:calc(100% + 30px);top:63px;z-index:2}
.ap-st input::-webkit-slider-runnable-track{height:48px;background:transparent}
.ap-st input::-moz-range-track{height:48px;background:transparent}
.ap-st input::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;margin-top:9px;border-radius:50%;background:var(--gft-paper);border:4px solid var(--gft-ochre);box-shadow:0 0 0 6px #051f1d99}
.ap-st input::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--gft-paper);border:4px solid var(--gft-ochre)}
.ap-st input:focus-visible{outline:3px solid var(--gft-ochre);outline-offset:-6px}
.ap-st__name{display:flex;align-items:baseline;gap:12px;margin:0 0 6px}
.ap-st__name span{font:600 13px var(--gft-font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ap-lab)}
.ap-st__name strong{font-size:22px;letter-spacing:-.02em}
.ap-st--sum{margin-top:6px;padding-top:8px;border-top:2px solid #f6f4ef55}
.ap-st--sum .ap-st__num{font-size:64px;color:var(--ap-ochre-l)}
.ap-st--sum .ap-st__lit{background:var(--gft-ochre);height:13px;top:81px}
.ap-oee__read{display:grid;gap:12px;align-content:start;min-width:0;padding:22px 0 0 clamp(20px,2.4vw,36px);border-left:1px solid #a3c8b333}
.ap-wf{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;align-items:end;margin-bottom:6px}
.ap-wf__col{display:grid;gap:6px;justify-items:start;min-width:0}
.ap-wf__v{font:750 22px/1 var(--gft-font-display);font-variant-numeric:tabular-nums}
.ap-wf__track{position:relative;width:100%;height:140px;background:#f6f4ef14}
.ap-wf__loss,.ap-wf__good{position:absolute;inset:0;transition:clip-path 300ms var(--gft-ease-out)}
.ap-wf__loss{background:#f6f4ef33;clip-path:inset(calc(100% - var(--pv) * 1%) 0 0 0)}
.ap-wf__good{background:var(--ap-sage-l);clip-path:inset(calc(100% - var(--gv) * 1%) 0 0 0)}
.ap-wf__col[data-c=t] .ap-wf__good{background:var(--gft-paper)}
.ap-oee[data-low=a] .ap-wf__col[data-c=a] .ap-wf__good,.ap-oee[data-low=p] .ap-wf__col[data-c=p] .ap-wf__good,.ap-oee[data-low=q] .ap-wf__col[data-c=q] .ap-wf__good{background:var(--ap-ochre-l)}
.ap-wf__l{font-size:15px;line-height:1.3;color:var(--ap-on2)}
.ap-oee__limit{margin:0;font-size:24px;font-weight:750;letter-spacing:-.02em}
.ap-oee__limit b{color:var(--ap-ochre-l)}
.ap-oee__read .ap-cap{color:var(--ap-lab)}
.ap-ask{margin:0;font:italic 26px/1.25 var(--gft-font-serif);color:var(--gft-paper)}
.ap-oee__eq{margin:0;font:600 22px var(--gft-font-mono);letter-spacing:-.02em;color:var(--ap-on)}
.ap-oee__read .ap-fold{margin:0;color:var(--ap-lab)}
.ap-oee__acts{display:flex;flex-wrap:wrap;gap:10px}
.ap-reset{border-color:#f6f4ef88}
/* entrance "ply": (a) one thread separates into three lanes, (b) lit lengths grow, the product strand draws last */
:root[data-m-go] .ap-sec--model:not([data-ap-in]) .ap-st:not(.ap-st--sum){opacity:.35}
:root[data-m-go] .ap-sec--model:not([data-ap-in]) .ap-st[data-f=a]{transform:translateY(150px)}
:root[data-m-go] .ap-sec--model:not([data-ap-in]) .ap-st[data-f=q]{transform:translateY(-150px)}
:root[data-m-go] .ap-sec--model[data-ap-in] .ap-st[data-f]{animation-name:ap-unply;animation-duration:420ms;animation-timing-function:var(--gft-ease-out);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .ap-sec--model[data-ap-in] .ap-st[data-f=a]{--ap-ply:150px}
:root[data-m-go] .ap-sec--model[data-ap-in] .ap-st[data-f=p]{--ap-ply:0px}
:root[data-m-go] .ap-sec--model[data-ap-in] .ap-st[data-f=q]{--ap-ply:-150px}
@keyframes ap-unply{from{opacity:.35;transform:translateY(var(--ap-ply))}to{opacity:1;transform:none}}
:root[data-m-go] .ap-sec--model:not([data-ap-in]) .ap-st__lit{clip-path:inset(0 100% 0 0)}
:root[data-m-go] .ap-sec--model[data-ap-in] .ap-st__lit{animation-name:ap-grow;animation-duration:440ms;animation-timing-function:var(--gft-ease-out);animation-delay:calc(300ms + var(--k) * 60ms);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .ap-sec--model[data-ap-in] .ap-st--sum .ap-st__lit{animation-delay:600ms;animation-duration:300ms}
@keyframes ap-grow{from{clip-path:inset(0 100% 0 0)}}
:root[data-m-go] .ap-sec--model:not([data-ap-in]) .ap-oee__read{opacity:.2;transform:translateX(30px)}
:root[data-m-go] .ap-sec--model[data-ap-in] .ap-oee__read{animation-name:ap-panel;animation-duration:520ms;animation-timing-function:var(--gft-ease-out);animation-delay:280ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .ap-sec--model:not([data-ap-in]) .ap-wf__good{clip-path:inset(100% 0 0 0)}
:root[data-m-go] .ap-sec--model[data-ap-in] .ap-wf__good{animation-name:ap-pour;animation-duration:420ms;animation-timing-function:var(--gft-ease-out);animation-delay:440ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes ap-pour{from{clip-path:inset(100% 0 0 0)}}
/* alive: a pulse runs the limiting strand, then the product strand; the frayed ends sway; the limiting column breathes */
:root[data-m-go] .ap-oee__strands>.ap-sent[data-m-on]~.ap-st :is(.ap-st__fray){animation-name:ap-fray;animation-duration:2.2s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}
@keyframes ap-fray{from{transform:translateY(-1px)}to{transform:translateY(1px)}}
:root[data-m-go] .ap-oee[data-low=a] .ap-oee__strands>.ap-sent[data-m-on]~.ap-st[data-f=a] .ap-st__pulse,:root[data-m-go] .ap-oee[data-low=p] .ap-oee__strands>.ap-sent[data-m-on]~.ap-st[data-f=p] .ap-st__pulse,:root[data-m-go] .ap-oee[data-low=q] .ap-oee__strands>.ap-sent[data-m-on]~.ap-st[data-f=q] .ap-st__pulse{animation-name:ap-run;animation-duration:4.4s;animation-timing-function:var(--gft-ease-in-out);animation-iteration-count:infinite;animation-direction:normal}
:root[data-m-go] .ap-oee__strands>.ap-sent[data-m-on]~.ap-st--sum .ap-st__pulse{animation-name:ap-run2;animation-duration:4.4s;animation-timing-function:var(--gft-ease-in-out);animation-iteration-count:infinite;animation-direction:normal}
@keyframes ap-run{0%{opacity:0;transform:translateX(0)}5%{opacity:1}45%{opacity:1;transform:translateX(calc(var(--v) * 1cqw - 13px))}50%,100%{opacity:0;transform:translateX(calc(var(--v) * 1cqw - 13px))}}
@keyframes ap-run2{0%,50%{opacity:0;transform:translateX(0)}55%{opacity:1}95%{opacity:1;transform:translateX(calc(var(--v) * 1cqw - 13px))}100%{opacity:0;transform:translateX(calc(var(--v) * 1cqw - 13px))}}
:root[data-m-go] .ap-oee:has(.ap-sent[data-m-on])[data-low=a] .ap-wf__col[data-c=a] .ap-wf__v,:root[data-m-go] .ap-oee:has(.ap-sent[data-m-on])[data-low=p] .ap-wf__col[data-c=p] .ap-wf__v,:root[data-m-go] .ap-oee:has(.ap-sent[data-m-on])[data-low=q] .ap-wf__col[data-c=q] .ap-wf__v{animation-name:ap-breathe;animation-duration:2.4s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}
@keyframes ap-breathe{from{opacity:.72}to{opacity:1}}

/* ---------- bridges: the product strand runs to the knot; the out-thread drops as the selvedge ---------- */
.ap-bridge{position:absolute;left:0;top:0;z-index:4;overflow:visible;pointer-events:none}
.ap-bridge__base{stroke:#c98a2b;stroke-opacity:.3;stroke-width:2}
.ap-bridge__lit{stroke:#c98a2b;stroke-width:3.2;stroke-linecap:round}

/* ================= 6 the knot, sticky full-bleed (forest) ================= */
.ap-sec--knot{--ap-ochre-l:#f8deb0;position:relative;z-index:2;background:#0e4d4a;color:var(--ap-on);padding:0}
.ap-knot{display:grid;grid-template-columns:minmax(0,1fr)}
.ap-knot__pin{grid-area:1/1;position:sticky;top:0;z-index:2;height:100svh;align-self:start}
.ap-knot__stage{position:relative;width:100%;height:100%;background:linear-gradient(180deg,#0e4d4a 0%,#0b3f3c 100%);overflow:clip}
.ap-knot__steps{grid-area:1/1;position:relative;z-index:1;display:grid;pointer-events:none}
.ap-knot__step{height:62svh}
.ap-knot__svg{display:block;width:100%;height:100%;overflow:visible}
.ap-knot__svg--wide{position:absolute;inset:0}
.ap-knot__svg--tall{display:none}
.ap-knot__base path{stroke:#6bb68f;stroke-opacity:.48;stroke-width:2.2}
.ap-knot__retbase{stroke-dasharray:5 8;stroke-opacity:.32}
.ap-kt,.ap-knot__out{stroke:#c98a2b;stroke-width:4.8;stroke-linecap:round;opacity:0;transition:opacity 360ms}
.ap-knot__out{opacity:1;stroke-width:3.8}
.ap-knot__ret{stroke:#8fd1ad;stroke-width:3;stroke-dasharray:6 7;opacity:0;transition:opacity 360ms}
.ap-knot:has(#ap-k2:checked) .ap-knot__ret{opacity:.88}
.ap-kp{stroke:#fff6e6;stroke-width:5;stroke-linecap:round;opacity:0}
.ap-knot:has(#ap-k0:checked) .ap-kt[data-t="0"],.ap-knot:has(#ap-k1:checked) .ap-kt[data-t="1"],.ap-knot:has(#ap-k2:checked) .ap-kt[data-t="2"]{opacity:1}
.ap-knot__node :is(g,circle){transform-box:fill-box;transform-origin:center}
.ap-ktn{--on:0}
.ap-knot:has(#ap-k0:checked) .ap-ktn[data-t="0"],.ap-knot:has(#ap-k1:checked) .ap-ktn[data-t="1"],.ap-knot:has(#ap-k2:checked) .ap-ktn[data-t="2"]{--on:1}
.ap-ktn__halo{opacity:calc(.2 + var(--on) * .8);transform-box:fill-box;transform-origin:center;transform:scale(calc(.85 + var(--on) * .3));transition:transform 300ms var(--gft-ease-out),opacity 300ms}
.ap-ktn__ring{transform-box:fill-box;transform-origin:center;transform:scale(calc(1 + var(--on) * .25));transition:transform 300ms var(--gft-ease-out)}
.ap-ktn text{font:600 13px var(--gft-font-mono);letter-spacing:.06em;fill:#eef4f0}
.ap-knot:has(#ap-k0:checked) .ap-ktn[data-t="0"] text,.ap-knot:has(#ap-k1:checked) .ap-ktn[data-t="1"] text,.ap-knot:has(#ap-k2:checked) .ap-ktn[data-t="2"] text{fill:var(--ap-ochre-l)}
.ap-knot:has(#ap-k0:checked) .ap-ktn[data-t="0"] rect,.ap-knot:has(#ap-k1:checked) .ap-ktn[data-t="1"] rect,.ap-knot:has(#ap-k2:checked) .ap-ktn[data-t="2"] rect{stroke:#c98a2b;fill:#072d2b}
.ap-knot__shell{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(22px,3.2svh,36px) max(48px,calc((100vw - 1440px) / 2)) clamp(20px,2.8svh,32px)}
.ap-knot__head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:20px clamp(32px,4vw,64px);align-items:start}
.ap-knot__head .gft-eyebrow{color:var(--ap-lab);margin-bottom:10px}
.ap-knot__titlebox .ap-h{font-size:clamp(2rem,2.8vw,2.75rem);max-width:18ch}
.ap-knot__titlebox .ap-lede{margin-top:10px;font-size:17px;line-height:1.55;max-width:42ch;color:var(--ap-on2)}
.ap-knot__handbox{padding:16px 20px 18px;background:#072d2be6;border:1px solid #6bb68f55;border-left:4px solid var(--gft-ochre);display:grid;gap:10px}
.ap-knot__outl{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0;padding-bottom:8px;border-bottom:1px solid #6bb68f33;font:600 13px var(--gft-font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ap-lab)}
.ap-knot__outl b{color:var(--ap-ochre-l);font-weight:700}
.ap-knot__hand{position:relative}
.ap-hd{margin:0;font-size:18px;line-height:1.45;letter-spacing:-.01em;color:var(--gft-paper);max-width:40ch}
.ap-hd .ap-cap{display:block;margin-bottom:6px;color:var(--ap-ochre-l)}
.ap-knot__hand .ap-hd{visibility:hidden;opacity:0;transition:opacity 140ms,visibility 0s 140ms}
.ap-knot:has(#ap-k0:checked) .ap-hd[data-for="0"],.ap-knot:has(#ap-k1:checked) .ap-hd[data-for="1"],.ap-knot:has(#ap-k2:checked) .ap-hd[data-for="2"]{visibility:visible;opacity:1;transition:opacity 320ms var(--gft-ease-out) 120ms,visibility 0s}
.ap-hd__route{display:block;margin-bottom:6px;font:800 26px/1 var(--gft-font-display);letter-spacing:-.03em;color:var(--ap-ochre-l)}
.ap-hd__route i{margin:0 .25em;font:italic 400 .64em var(--gft-font-serif);letter-spacing:0;color:var(--ap-lab)}
.ap-knot__cards{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,32px);margin:0;padding:0;border:0;align-items:stretch}
.ap-kc{position:relative;display:grid;gap:8px;align-content:space-between;padding:18px 20px 18px;background:#072d2be6;border:1px solid #8fd1ad55;cursor:pointer;transition:background-color 260ms,color 260ms,border-color 260ms,transform 260ms var(--gft-ease-out)}
.ap-kc__top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.ap-kc__no{flex:none;white-space:nowrap;font:750 20px/1 var(--gft-font-display);letter-spacing:-.02em;color:var(--ap-ochre-l)}
.ap-kc__e{font:600 13px var(--gft-font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ap-lab)}
.ap-kc strong{font-size:21px;line-height:1.18;letter-spacing:-.02em}
.ap-kc__t{font-size:16px;line-height:1.5;max-width:38ch;color:var(--ap-on2)}
.ap-knot:has(#ap-k0:checked) .ap-kc[data-n="0"],.ap-knot:has(#ap-k1:checked) .ap-kc[data-n="1"],.ap-knot:has(#ap-k2:checked) .ap-kc[data-n="2"]{background:var(--gft-paper);color:var(--ap-ink);border-color:var(--gft-ochre);transform:translateY(-8px)}
.ap-knot:has(#ap-k0:checked) .ap-kc[data-n="0"] :is(.ap-kc__e,.ap-kc__t),.ap-knot:has(#ap-k1:checked) .ap-kc[data-n="1"] :is(.ap-kc__e,.ap-kc__t),.ap-knot:has(#ap-k2:checked) .ap-kc[data-n="2"] :is(.ap-kc__e,.ap-kc__t){color:var(--ap-ink2)}
.ap-knot:has(#ap-k0:checked) .ap-kc[data-n="0"] .ap-kc__no,.ap-knot:has(#ap-k1:checked) .ap-kc[data-n="1"] .ap-kc__no,.ap-knot:has(#ap-k2:checked) .ap-kc[data-n="2"] .ap-kc__no{color:#7a4f10}
.ap-kc:has(input:focus-visible){outline:3px solid var(--gft-ochre);outline-offset:3px}
.ap-kc input{inset:0}
.ap-kc:hover{border-color:var(--gft-ochre)}
.ap-kc__sel{display:flex;align-items:center;gap:10px;margin-top:4px;padding-top:10px;border-top:1px solid #8fd1ad40;font:600 13px/1.3 var(--gft-font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ap-lab)}
.ap-kc__sel i{flex:none;width:16px;height:16px;border-radius:50%;border:2px solid currentColor;transition:background-color 260ms}
.ap-kc__sel em{font-style:normal}
.ap-kc__on{display:none}
.ap-knot:has(#ap-k0:checked) .ap-kc[data-n="0"] .ap-kc__sel,.ap-knot:has(#ap-k1:checked) .ap-kc[data-n="1"] .ap-kc__sel,.ap-knot:has(#ap-k2:checked) .ap-kc[data-n="2"] .ap-kc__sel{color:#6e450b;border-top-color:#0e4d4a33}
.ap-knot:has(#ap-k0:checked) .ap-kc[data-n="0"] .ap-kc__sel i,.ap-knot:has(#ap-k1:checked) .ap-kc[data-n="1"] .ap-kc__sel i,.ap-knot:has(#ap-k2:checked) .ap-kc[data-n="2"] .ap-kc__sel i{background:var(--gft-ochre)}
.ap-knot:has(#ap-k0:checked) .ap-kc[data-n="0"] .ap-kc__off,.ap-knot:has(#ap-k1:checked) .ap-kc[data-n="1"] .ap-kc__off,.ap-knot:has(#ap-k2:checked) .ap-kc[data-n="2"] .ap-kc__off{display:none}
.ap-knot:has(#ap-k0:checked) .ap-kc[data-n="0"] .ap-kc__on,.ap-knot:has(#ap-k1:checked) .ap-kc[data-n="1"] .ap-kc__on,.ap-knot:has(#ap-k2:checked) .ap-kc[data-n="2"] .ap-kc__on{display:inline}
/* a new choice redraws its thread up into the knot */
:root[data-m-go] .ap-sec--knot[data-ap-in] .ap-knot:has(#ap-k0:checked) .ap-kt[data-t="0"],:root[data-m-go] .ap-sec--knot[data-ap-in] .ap-knot:has(#ap-k1:checked) .ap-kt[data-t="1"],:root[data-m-go] .ap-sec--knot[data-ap-in] .ap-knot:has(#ap-k2:checked) .ap-kt[data-t="2"]{animation-name:ap-kt-draw;animation-duration:620ms;animation-timing-function:var(--gft-ease-out);animation-delay:120ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes ap-kt-draw{from{clip-path:inset(100% -10px 0 -10px)}to{clip-path:inset(-10px -10px -10px -10px)}}
/* entrance "knot": (a) the threads draw upward, (b) the knot ties and the cards rise from their thread ends */
:root[data-m-go] .ap-sec--knot:not([data-ap-in]) :is(.ap-knot__base path,.ap-kt){clip-path:inset(100% -10px 0 -10px)}
:root[data-m-go] .ap-sec--knot[data-ap-in] :is(.ap-knot__base path,.ap-kt){animation-name:ap-up-draw;animation-duration:450ms;animation-timing-function:var(--gft-ease-out);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes ap-up-draw{from{clip-path:inset(100% -10px 0 -10px)}to{clip-path:inset(-10px -10px -10px -10px)}}
:root[data-m-go] .ap-sec--knot:not([data-ap-in]) .ap-knot__out{clip-path:inset(-10px 100% -10px -10px)}
:root[data-m-go] .ap-sec--knot[data-ap-in] .ap-knot__out{animation-name:ap-out-draw;animation-duration:380ms;animation-timing-function:var(--gft-ease-out);animation-delay:480ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes ap-out-draw{from{clip-path:inset(-10px 100% -10px -10px)}to{clip-path:inset(-10px -10px -10px -10px)}}
:root[data-m-go] .ap-sec--knot:not([data-ap-in]) .ap-knot__tie{opacity:0;transform:rotate(30deg) scale(.8)}
:root[data-m-go] .ap-sec--knot[data-ap-in] .ap-knot__tie{animation-name:ap-tieknot;animation-duration:420ms;animation-timing-function:var(--gft-ease-out);animation-delay:350ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes ap-tieknot{from{opacity:0;transform:rotate(30deg) scale(.8)}to{opacity:1;transform:none}}
:root[data-m-go] .ap-sec--knot:not([data-ap-in]) .ap-kc{opacity:.15;transform:translateY(60px)}
:root[data-m-go] .ap-sec--knot[data-ap-in] .ap-kc{animation-name:ap-rise;animation-duration:460ms;animation-timing-function:var(--gft-ease-out);animation-delay:calc(380ms + var(--i) * 80ms);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes ap-rise{from{opacity:.15;transform:translateY(60px)}to{opacity:1;transform:none}}
:root[data-m-go] .ap-sec--knot:not([data-ap-in]) .ap-knot__handbox{opacity:0}
:root[data-m-go] .ap-sec--knot[data-ap-in] .ap-knot__handbox{animation-name:ap-fadein;animation-duration:360ms;animation-timing-function:ease-out;animation-delay:540ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
/* alive: a pulse runs the chosen thread into the knot and out; the knot's core pulses */
:root[data-m-go] .ap-knot__stage>.ap-sent[data-m-on]~svg .ap-knot__core{animation-name:ap-core;animation-duration:2.4s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}
@keyframes ap-core{from{transform:scale(.8)}to{transform:scale(1.35)}}
:root[data-m-go] .ap-knot:has(#ap-k0:checked) .ap-knot__stage>.ap-sent[data-m-on]~svg .ap-kp[data-t="0"],:root[data-m-go] .ap-knot:has(#ap-k1:checked) .ap-knot__stage>.ap-sent[data-m-on]~svg .ap-kp[data-t="1"],:root[data-m-go] .ap-knot:has(#ap-k2:checked) .ap-knot__stage>.ap-sent[data-m-on]~svg .ap-kp[data-t="2"]{animation-name:ap-kup;animation-duration:4s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:normal}
:root[data-m-go] .ap-knot__stage>.ap-sent[data-m-on]~svg .ap-kp--out{animation-name:ap-kout;animation-duration:4s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:normal}
@keyframes ap-kup{0%{opacity:0;clip-path:inset(88% -10px 0 -10px)}6%{opacity:1}44%{opacity:1;clip-path:inset(0 -10px 88% -10px)}50%,100%{opacity:0;clip-path:inset(0 -10px 88% -10px)}}
@keyframes ap-kout{0%,48%{opacity:0;clip-path:inset(-10px 90% -10px -10px)}54%{opacity:1}94%{opacity:1;clip-path:inset(-10px -10px -10px 90%)}100%{opacity:0;clip-path:inset(-10px -10px -10px 90%)}}

/* ================= 7 the closing: the cloth beam as a full-width status instrument (night, last full screen) ===== */
.ap-sec--close{background:var(--gft-night);color:var(--ap-on);overflow:clip}
.ap-close__bg{position:absolute;inset:0;z-index:0;pointer-events:none;display:flex;align-items:center;justify-content:flex-end}
.ap-close__bg .ap-loom{width:70%;height:100%;min-height:0}
.ap-close{position:relative;z-index:1;--st:0;padding:clamp(72px,9svh,104px) max(48px,calc((100vw - 1440px) / 2)) clamp(56px,7svh,88px)}
.ap-close__head{display:grid;gap:10px;margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid #6bb68f33}
.ap-close__head .gft-eyebrow{color:var(--ap-lab);margin-bottom:4px}
.ap-close__head .ap-h{margin:0;font-size:clamp(2.1rem,3vw,2.9rem);max-width:16ch}
.ap-close__head .ap-lede{margin:0;font-size:17px;line-height:1.55;max-width:42ch;color:var(--ap-on2)}
.ap-close__inst{display:grid;grid-template-columns:minmax(0,58fr) minmax(0,42fr);gap:clamp(32px,4vw,64px);align-items:start}
.ap-close__loom{position:relative;min-width:0}
.ap-close__frame{position:relative;width:100%;aspect-ratio:800/560}
.ap-close__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ap-close__htag,.ap-close__btag{font:600 13.5px var(--gft-font-mono);letter-spacing:.06em;fill:#cfe3da}
.ap-close__kn{font:600 15px var(--gft-font-mono);fill:var(--ap-on)}
.ap-close__cloth{clip-path:inset(calc((4 - var(--st)) * 20%) -6px -2px -6px);transition:clip-path 700ms var(--gft-ease-out)}
.ap-close__top,.ap-close__ghost{transform:translateY(calc(var(--st) * -92px));transition:transform 700ms var(--gft-ease-out),opacity 300ms}
.ap-close__selvlit{clip-path:inset(calc((4 - var(--st)) * 17.04%) -6px 0 -6px);transition:clip-path 700ms var(--gft-ease-out)}
.ap-close__loop{opacity:0;transition:opacity 400ms}
.ap-close:has(#ap-st1:checked){--st:1}
.ap-close:has(#ap-st2:checked){--st:2}
.ap-close:has(#ap-st3:checked){--st:3}
.ap-close:has(#ap-st4:checked){--st:4}
.ap-close:has(#ap-st4:checked) .ap-close__loop{opacity:1}
.ap-close:has(#ap-st4:checked) .ap-close__ghost{opacity:0}
.ap-close__rungs{position:absolute;inset:0;margin:0;padding:0;border:0;min-width:0}
.ap-rung{position:absolute;left:calc(560 / 800 * 100% - 11px);top:var(--y);width:calc(240 / 800 * 100% + 11px);min-height:48px;display:flex;align-items:center;gap:12px;transform:translateY(-50%);cursor:pointer;padding-right:8px}
.ap-rung__dot{flex:none;width:22px;height:22px;border-radius:50%;background:var(--gft-night);border:3px solid var(--gft-ochre);transition:background-color 260ms,transform 260ms}
.ap-rung__n{font:600 14px var(--gft-font-mono);letter-spacing:.06em;color:var(--ap-lab)}
.ap-rung__t{font-size:20px;font-weight:700;letter-spacing:-.01em}
.ap-close:has(#ap-st0:checked) .ap-rung[data-n="0"],.ap-close:has(#ap-st1:checked) .ap-rung[data-n="1"],.ap-close:has(#ap-st2:checked) .ap-rung[data-n="2"],.ap-close:has(#ap-st3:checked) .ap-rung[data-n="3"],.ap-close:has(#ap-st4:checked) .ap-rung[data-n="4"]{color:var(--ap-ochre-l)}
.ap-close:has(#ap-st0:checked) .ap-rung[data-n="0"] .ap-rung__dot,.ap-close:has(#ap-st1:checked) .ap-rung[data-n="1"] .ap-rung__dot,.ap-close:has(#ap-st2:checked) .ap-rung[data-n="2"] .ap-rung__dot,.ap-close:has(#ap-st3:checked) .ap-rung[data-n="3"] .ap-rung__dot,.ap-close:has(#ap-st4:checked) .ap-rung[data-n="4"] .ap-rung__dot{background:var(--gft-ochre);transform:scale(1.2)}
.ap-rung:has(input:focus-visible){outline:3px solid var(--gft-ochre);outline-offset:2px}
.ap-rung:hover .ap-rung__dot{background:#c98a2b66}
/* the scrubber under the cloth drags the status (the page script keeps it and the rungs in step) */
.ap-close__scrub{display:grid;gap:2px;margin:14px 0 0 calc(30 / 800 * 100%);width:calc(530 / 800 * 100% - 24px)}
.ap-close__scrub .ap-cap{color:var(--ap-lab)}
.ap-close__scrub input{-webkit-appearance:none;appearance:none;width:100%;height:44px;margin:0;background:transparent;cursor:pointer}
.ap-close__scrub input::-webkit-slider-runnable-track{height:4px;background:linear-gradient(90deg,var(--gft-ochre) calc(var(--st) * 25%),#f6f4ef40 0)}
.ap-close__scrub input::-moz-range-track{height:4px;background:linear-gradient(90deg,var(--gft-ochre) calc(var(--st) * 25%),#f6f4ef40 0)}
.ap-close__scrub input::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;margin-top:-13px;border-radius:50%;background:var(--gft-paper);border:4px solid var(--gft-ochre)}
.ap-close__scrub input::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--gft-paper);border:4px solid var(--gft-ochre)}
.ap-close__scrub input:focus-visible{outline:3px solid var(--gft-ochre);outline-offset:2px}
.ap-close:not([data-ap-js]) .ap-close__scrub input{visibility:hidden}
.ap-close__ticks{position:relative;height:22px;margin:0;padding:0;list-style:none}
.ap-close__ticks li{position:absolute;top:0;white-space:nowrap;font:600 14px/1.4 var(--gft-font-mono);color:var(--ap-lab)}
.ap-close__ticks li b{font-weight:700}
.ap-close__ticks li span{display:none}
.ap-close__ticks li[data-n="0"]{left:0}
.ap-close__ticks li[data-n="1"]{left:25%;transform:translateX(-35%)}
.ap-close__ticks li[data-n="2"]{left:50%;transform:translateX(-50%)}
.ap-close__ticks li[data-n="3"]{left:75%;transform:translateX(-65%)}
.ap-close__ticks li[data-n="4"]{right:0}
.ap-close:has(#ap-st0:checked) .ap-close__ticks li[data-n="0"],.ap-close:has(#ap-st1:checked) .ap-close__ticks li[data-n="1"],.ap-close:has(#ap-st2:checked) .ap-close__ticks li[data-n="2"],.ap-close:has(#ap-st3:checked) .ap-close__ticks li[data-n="3"],.ap-close:has(#ap-st4:checked) .ap-close__ticks li[data-n="4"]{color:var(--ap-ochre-l)}
/* the caption beside the cloth changes with the rung */
.ap-close__cap{display:grid;align-content:start;min-width:0;padding-top:0}
.ap-close__line{margin:0;font-size:clamp(2.2rem,3.3vw,3.2rem);font-weight:850;line-height:1.02;letter-spacing:-.05em}
.ap-close__line .gft-serif{color:var(--ap-ochre-l)}
.ap-close__says{margin:10px 0 0;font-size:18px;line-height:1.5;max-width:40ch;color:var(--ap-on2)}
.ap-close__here{margin:16px 0 0;padding-left:12px;border-left:3px solid var(--gft-ochre);font-size:17px;line-height:1.5;max-width:40ch;color:var(--ap-on)}
.ap-close__route{margin-top:16px}
.ap-close__route .ap-read{display:grid;gap:12px;justify-items:start}
.ap-close__next{margin:0;font-size:17px;line-height:1.45;max-width:40ch;color:var(--ap-on)}
.ap-close__sent .ap-read,.ap-close__route .ap-read{visibility:hidden;opacity:0;transition:opacity 140ms,visibility 0s 140ms}
.ap-close:has(#ap-st0:checked) .ap-read[data-for="0"],.ap-close:has(#ap-st1:checked) .ap-read[data-for="1"],.ap-close:has(#ap-st2:checked) .ap-read[data-for="2"],.ap-close:has(#ap-st3:checked) .ap-read[data-for="3"],.ap-close:has(#ap-st4:checked) .ap-read[data-for="4"]{visibility:visible;opacity:1;transition:opacity 320ms var(--gft-ease-out) 120ms,visibility 0s}
/* the page's own sign-off, written on the thread */
.ap-close__sign{margin-top:24px}
.ap-close__thr{display:block;width:100%;height:24px;overflow:visible}
.ap-close__ex{margin:10px 0 0;font:italic clamp(1.35rem,1.75vw,1.7rem)/1.3 var(--gft-font-serif);color:#e9f2ec}
/* entrance "shed": (a) alternate warps part to open the shed, (b) the cloth rises from the beam, the rungs deal in */
:root[data-m-go] .ap-sec--close:not([data-ap-in]) .ap-cw[data-par="0"]{transform:translateX(6px)}
:root[data-m-go] .ap-sec--close:not([data-ap-in]) .ap-cw[data-par="1"]{transform:translateX(-6px)}
:root[data-m-go] .ap-sec--close[data-ap-in] .ap-cw{animation-duration:400ms;animation-timing-function:var(--gft-ease-in-out);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .ap-sec--close[data-ap-in] .ap-cw[data-par="0"]{animation-name:ap-shed-a}
:root[data-m-go] .ap-sec--close[data-ap-in] .ap-cw[data-par="1"]{animation-name:ap-shed-b}
@keyframes ap-shed-a{from{transform:translateX(6px)}50%{transform:translateX(9px)}to{transform:none}}
@keyframes ap-shed-b{from{transform:translateX(-6px)}50%{transform:translateX(-9px)}to{transform:none}}
:root[data-m-go] .ap-sec--close:not([data-ap-in]) .ap-close__cloth{clip-path:inset(100% -6px -2px -6px)}
:root[data-m-go] .ap-sec--close[data-ap-in] .ap-close__cloth{animation-name:ap-cloth;animation-duration:560ms;animation-timing-function:var(--gft-ease-out);animation-delay:280ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes ap-cloth{from{clip-path:inset(100% -6px -2px -6px)}}
:root[data-m-go] .ap-sec--close:not([data-ap-in]) .ap-rung{opacity:0;transform:translate(28px,-50%)}
:root[data-m-go] .ap-sec--close[data-ap-in] .ap-rung{animation-name:ap-rung;animation-duration:380ms;animation-timing-function:var(--gft-ease-out);animation-delay:calc(360ms + var(--k) * 60ms);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes ap-rung{from{opacity:0;transform:translate(28px,-50%)}to{opacity:1;transform:translate(0,-50%)}}
:root[data-m-go] .ap-sec--close:not([data-ap-in]) :is(.ap-close__sent,.ap-close__here,.ap-close__route,.ap-close__scrub){opacity:0;transform:translateY(14px)}
:root[data-m-go] .ap-sec--close[data-ap-in] :is(.ap-close__sent,.ap-close__here,.ap-close__route,.ap-close__scrub){animation-name:ap-up;animation-duration:520ms;animation-timing-function:var(--gft-ease-out);animation-delay:380ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .ap-sec--close:not([data-ap-in]) .ap-close__thr path{clip-path:inset(-10px 100% -10px -10px)}
:root[data-m-go] .ap-sec--close[data-ap-in] .ap-close__thr path{animation-name:ap-draw;animation-duration:700ms;animation-timing-function:var(--gft-ease-in-out);animation-delay:520ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .ap-sec--close:not([data-ap-in]) .ap-close__ex{opacity:0;transform:translateY(12px)}
:root[data-m-go] .ap-sec--close[data-ap-in] .ap-close__ex{animation-name:ap-up;animation-duration:560ms;animation-timing-function:var(--gft-ease-out);animation-delay:640ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
/* alive: a ghost shuttle crosses the next lane, a pulse runs down the selvedge, the top pick breathes, a bead rides the
   sign-off thread */
:root[data-m-go] .ap-close__loom>.ap-sent[data-m-on]~.ap-close__frame .ap-close__shuttle{animation-name:ap-ghost;animation-duration:5s;animation-timing-function:var(--gft-ease-in-out);animation-iteration-count:infinite;animation-direction:normal}
@keyframes ap-ghost{0%{opacity:0;transform:translateX(0)}10%{opacity:.9}60%{opacity:.9;transform:translateX(460px)}70%,100%{opacity:0;transform:translateX(460px)}}
:root[data-m-go] .ap-close__loom>.ap-sent[data-m-on]~.ap-close__frame .ap-close__pulse{animation-name:ap-selvp;animation-duration:3.6s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:normal}
@keyframes ap-selvp{0%{opacity:0;transform:translateY(0)}8%{opacity:1}92%{opacity:1}100%{opacity:0;transform:translateY(560px)}}
:root[data-m-go] .ap-close__loom>.ap-sent[data-m-on]~.ap-close__frame .ap-close__edge{animation-name:ap-breathe;animation-duration:2.6s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}
:root[data-m-go] .ap-close:has(.ap-close__loom>.ap-sent[data-m-on]) .ap-close__bead{animation-name:ap-signbead;animation-duration:4.8s;animation-timing-function:var(--gft-ease-in-out);animation-iteration-count:infinite;animation-direction:alternate}
@keyframes ap-signbead{from{transform:translateX(0)}to{transform:translateX(400px)}}

/* ---------- the selvedge runs into the footer's "Continue the thread", whose line carries a running thread ---------- */
body[data-page=approach] .gft-footer__next{position:relative}
body[data-page=approach] .gft-footer__next::before{content:'';position:absolute;z-index:2;left:var(--ap-selv-x,56%);top:calc(-1 * var(--ap-selv-up,0px));width:4px;margin-left:-2px;height:calc(var(--ap-selv-up,0px) + 50% + 12px);background:var(--gft-ochre);pointer-events:none}
body[data-page=approach] .gft-footer .gft-footer__next .gft-footer__next-t{font-size:clamp(3rem,4vw,3.75rem)}
body[data-page=approach] .gft-footer .gft-footer__next .gft-footer__next-line{background:#c98a2b88;height:4px}
body[data-page=approach] .gft-footer__next-line::after{content:'';position:absolute;top:0;bottom:0;left:0;width:120px;background:linear-gradient(90deg,#f0c47e00,#f0c47e,#f0c47e00);opacity:0}
:root[data-m-go] body[data-page=approach] .gft-footer__next-line:has(>i[data-m-on])::after{animation-name:ap-nextrun;animation-duration:3.4s;animation-timing-function:var(--gft-ease-in-out);animation-iteration-count:infinite;animation-direction:normal}
@keyframes ap-nextrun{0%{opacity:0;transform:translateX(-120px)}10%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateX(calc(100vw - 120px))}}
body[data-page=approach] .gft-footer :is(.gft-footer__next-k,.gft-mono,.gft-footer__bottom a,.gft-footer__bottom button){font-size:13px}

/* ---------- scroll-linked hand-overs (Chromium, Safari); elsewhere the composed end state shows ---------- */
@supports (animation-timeline:view()){
 .ap-sec--bench{view-timeline-name:--ap-bench;view-timeline-axis:block}
 .ap-ct__handover{view-timeline-name:--ap-bend;view-timeline-axis:block}
 .ap-tw__exit{view-timeline-name:--ap-exit;view-timeline-axis:block}
 .ap-bridge[data-ap-bridge=run]{view-timeline-name:--ap-br1;view-timeline-axis:block}
 .ap-bridge[data-ap-bridge=selvedge]{view-timeline-name:--ap-br2;view-timeline-axis:block}
 .ap-tw__steps{view-timeline-name:--ap-steps;view-timeline-axis:block}
 .ap-tw{timeline-scope:--ap-exit,--ap-steps}
 /* the twill's rail fills with the scroll through the four phases */
 :root[data-m-go] .ap-tw__scrub{display:block;position:absolute;left:0;right:0;top:-7px;height:2px;background:#f6f4ef1f;overflow:hidden}
 :root[data-m-go] .ap-tw__scrub em{display:block;height:100%;background:var(--ap-acc);transform-origin:0 50%;animation-name:ap-scrubx;animation-duration:1ms;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--ap-steps;animation-range-start:contain 0%;animation-range-end:contain 100%}
 /* the iris carries the interlude's headline, so the interlude does not repeat it on screen */
 :root[data-m-go] .ap-model__head .ap-h{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 /* the four bars grow to their values as the iris opens */
 :root[data-m-go] .ap-ir__lit{animation-name:ap-irgrow;animation-duration:1ms;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--ap-exit;animation-range-start:entry 40%;animation-range-end:entry 70%}
 /* 1 to 2, "the pick is beaten in": the reader pick travels down and straightens while the loom dims */
 :root[data-m-go] .ap-loom__beat{animation-name:ap-beatin;animation-duration:1ms;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--gft-splash;animation-range-start:exit 45%;animation-range-end:exit 100%}
 :root[data-m-go] .ap-loom--reader .ap-loom__body{animation-name:ap-dim;animation-duration:1ms;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--gft-splash;animation-range-start:exit 40%;animation-range-end:exit 100%}
 /* 2 to 3, "the kept pick lifts out": pick 12 with its knots rises out of the dimming grid */
 :root[data-m-go] .ap-bench__kept{animation-name:ap-lift;animation-duration:1ms;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--ap-bench;animation-range-start:exit 0%;animation-range-end:exit 70%}
 :root[data-m-go] .ap-bench__weft{animation-name:ap-dim;animation-duration:1ms;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--ap-bench;animation-range-start:exit 0%;animation-range-end:exit 60%}
 /* 3 to 4, "contract wires bend into twill warps": driven by scroll progress across the boundary */
 :root[data-m-go] .ap-bend__lit{animation-name:ap-reveal;animation-duration:1ms;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--ap-bend;animation-range-start:entry 5%;animation-range-end:cover 62%}
 /* 4 to 5, "Prove irises into the interlude": the deep-night circle opens from the gap bracket */
 /* Clear the outgoing copy before the mask arrives. Only curves occupy the expanding circle;
    the complete interlude fades in after the mask has covered its full bounds, even on a paused scroll. */
 :root[data-m-go] .ap-tw__stage{animation-name:ap-proveout;animation-duration:1ms;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--ap-exit;animation-range-start:entry 16%;animation-range-end:entry 28%}
 :root[data-m-go] .ap-tw__iris{animation-name:ap-iris;animation-duration:1ms;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--ap-exit;animation-range-start:entry 40%;animation-range-end:entry 74%}
 :root[data-m-go] .ap-ir :is(.ap-ir__eb,.ap-ir__h,.ap-ir__n,.ap-ir__l,.ap-ir__eq){animation-name:ap-irtext;animation-duration:1ms;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--ap-exit;animation-range-start:entry 74%;animation-range-end:entry 80%}
 /* 5 to 6 and 6 to 7: fixed threads revealed as the blocks pass */
 :root[data-m-go] .ap-bridge[data-ap-bridge=run] .ap-bridge__lit{animation-name:ap-reveal;animation-duration:1ms;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--ap-br1;animation-range-start:entry 30%;animation-range-end:cover 62%}
 :root[data-m-go] .ap-bridge[data-ap-bridge=selvedge] .ap-bridge__lit{animation-name:ap-reveal;animation-duration:1ms;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--ap-br2;animation-range-start:cover 40%;animation-range-end:cover 80%}
}
@keyframes ap-beatin{from{transform:none}to{transform:translateY(130px) scaleX(.97)}}
@keyframes ap-dim{from{opacity:1}to{opacity:.4}}
@keyframes ap-lift{from{transform:none}to{transform:translateY(-120px)}}
@keyframes ap-iris{from{clip-path:circle(0px at var(--ap-ix,50%) var(--ap-iy,40%))}to{clip-path:circle(150vmax at var(--ap-ix,50%) var(--ap-iy,40%))}}
@keyframes ap-proveout{from{opacity:1}to{opacity:0}}
@keyframes ap-irtext{from{opacity:0}to{opacity:1}}
@keyframes ap-scrubx{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ap-irgrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ap-reveal{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.ap-loom__beat{transform-box:view-box;transform-origin:755px 400px}
.ap-bench__kept,.ap-bend__lit,.ap-loom__beat,.ap-tw__iris,.ap-tw__scrub,.ap-ir__lit,.ap-ir__pulse{overflow-anchor:none}
@media (prefers-reduced-motion:reduce){
 .ap-loom__beat,.ap-loom__body,.ap-bench__kept,.ap-bench__weft,.ap-bend__lit,.ap-tw__stage,.ap-tw__iris,.ap-ir :is(.ap-ir__eb,.ap-ir__h,.ap-ir__n,.ap-ir__l,.ap-ir__eq),.ap-bridge__lit,.ap-tw__scrub em,.ap-ir__lit{animation-name:none;animation-timeline:auto}
}

/* ================= tablet ================= */
@media (max-width:1100px){
 .ap-bench__head{width:min(640px,60%)}
 .ap-ct__tri{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .ap-ct__center{display:none}
 .ap-tw__top{grid-template-columns:minmax(0,1fr) minmax(0,440px)}
 .ap-tw__main{grid-template-columns:minmax(0,64fr) minmax(0,36fr)}
 .ap-pc__t{font-size:2.25rem}
 .ap-pc__x{font-size:17px}
 .ap-tab span{display:none}
 .ap-tab{justify-content:center}
 .ap-close__inst{grid-template-columns:minmax(0,58fr) minmax(0,42fr)}
}

/* ================= phone ================= */
@media (max-width:760px){
 /* splash: h1 at the top, the loom as a band beneath, the pick reader under it */
 [data-splash=approach]{min-height:0}
 [data-splash=approach] .gft-splash__content{padding-top:24px;padding-bottom:14px}
 [data-splash=approach] h1{font-size:50px;line-height:1.02;margin-top:8px}
 [data-splash=approach] .gft-splash__lede{font-size:16px;margin-top:12px}
 [data-splash=approach] .gft-splash__actions{margin-top:calc(38svh + 18px)}
 [data-splash=approach] .gft-splash__structure{inset:auto 0 calc(290px + var(--splash-strip-h,64px)) 0;height:38svh;display:block}
 [data-splash=approach] .gft-splash__structure::after{background:linear-gradient(180deg,#072d2b 0%,#072d2b00 14%,#072d2b00 86%,#072d2b 100%)}
 [data-splash=approach] .ap-loom{position:absolute;top:0;left:calc(-460 / 800 * 38svh);height:38svh;width:calc(1200 / 800 * 38svh);max-width:none;min-height:0}
 [data-splash=approach] .gft-splash__data{display:none}
 .ap-splash-acts{gap:12px;width:100%;min-height:260px;align-content:start}
 .ap-picks{order:-1;width:100%;padding:12px 14px}
 .ap-picks__btns{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
 .ap-pickbtn{justify-content:center;padding:0 4px;font-size:14px;gap:5px}
 .ap-picks__qq{font-size:20px}
 .ap-picks__qd{font-size:14px}
 .ap-picks__q{min-height:3.6em}
 .ap-splash-cta{width:100%}
 .ap-ln__t{font-size:30px}
 /* bench */
 .ap-sec--bench{padding-bottom:56px}
 .ap-bench__head{position:static;width:auto;padding:36px 20px 22px;background:none}
 .ap-bench__head .ap-h{font-size:38px}
 .ap-bench__stage{height:46svh}
 .ap-bench__svg{inset:0 auto auto calc(-610 / 520 * 46svh);width:calc(1200 / 520 * 46svh);max-width:none;height:46svh}
 .ap-node__n{font-size:19px}
 .ap-bench__console{grid-template-columns:1fr}
 .ap-cell,.ap-cell:first-child{padding:20px 0 16px}
 .ap-cell+.ap-cell{border-left:0;border-top:1px solid #a3c8b333}
 /* contract */
 .ap-ct__line{height:104px}
 .ap-ct__ring{width:36px;height:36px}
 .ap-ct__knot{transform:translate(-50%,-18px)}
 .ap-ct__kl{font-size:13px}
 .ap-ct__pin{position:static}
 .ap-ct__steps{display:none}
 .ap-ct__head{grid-template-columns:1fr}
 .ap-ct__head .ap-h{font-size:38px}
 .ap-ct__stage{min-height:0;padding:20px 0 28px}
 .ap-ct__wires{position:relative;height:32svh;margin-bottom:16px}
 .ap-ct__tri{grid-template-columns:1fr;gap:16px}
 .ap-ct__center{display:flex;order:-1;padding-bottom:0}
 .ap-q{padding:12px 12px 12px 10px;min-height:48px}
 .ap-q__t{font-size:19px}
 .ap-ct__handover{height:220px}
 .ap-ct__handwrap{padding-top:88px}
 /* twill: a pinned band at the top (drawing, rail, compare), the steps' copy scrolls beneath */
 .ap-tw__stage{bottom:auto;height:52svh;padding:12px 14px 10px;gap:6px;grid-template-rows:minmax(0,1fr) auto auto}
 .ap-tw__main{order:-1;grid-template-columns:1fr}
 .ap-tw__title,.ap-tw__cap,.ap-tw__read,.ap-tw__state,.ap-tw__bar{display:none}
 .ap-tw__top{grid-template-columns:1fr;gap:6px}
 .ap-tw__rail{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px}
 .ap-tw[data-phase] .ap-tw__zoom{transform:none}
 .ap-tab{justify-content:center;padding:0 4px;font-size:13px;gap:4px}
 .ap-tab span{display:none}
 .ap-tab b{font-size:15px}
 .ap-tw__foot{grid-template-columns:1fr;padding-top:0;border-top:0}
 .ap-tw__cmp .ap-btn{min-height:44px;padding:4px 10px;font-size:14px}
 .ap-svgtxt text{font-size:23px;letter-spacing:0}
 .ap-tw__steps{padding:52svh 20px 0}
 .ap-tw__intro{min-height:60svh;padding-top:24px}
 .ap-tw__intro .ap-h{font-size:38px}
 .ap-step{min-height:75svh;padding-top:28px}
 .ap-step__no{top:0;right:0}
 .ap-tw__exit{height:210svh}
 /* the iris on a phone: headline, then numeral and bar side by side */
 .ap-ir{padding:28px 20px}
 .ap-ir__eb{font-size:13px}
 .ap-ir__h{font-size:34px;margin-bottom:22px}
 .ap-ir__rows{gap:12px}
 .ap-ir__row{grid-template-columns:150px minmax(0,1fr);gap:14px}
 .ap-ir__n{font-size:56px}
 .ap-ir__l{font-size:13px}
 .ap-ir__track{height:30px}
 .ap-ir__row--sum .ap-ir__track{height:36px}
 .ap-ir__eq{padding-left:0;font-size:17px;gap:6px}
 .ap-ir__eq span{font-size:14px}
 .ap-sec--model{margin-top:0}
 :root[data-m-go] .ap-tw__iris{animation-range-start:entry 30%;animation-range-end:entry 70%}
 /* interlude */
 .ap-model__head,.ap-oee{grid-template-columns:1fr}
 .ap-model__head .ap-h{font-size:38px}
 .ap-model__head .ap-lede{margin-top:14px}
 .ap-st__track{height:100px}
 .ap-st__num{left:auto;right:0;font-size:40px;transform:none}
 .ap-st--sum .ap-st__num{font-size:44px}
 .ap-st__fray,.ap-st__lit{top:66px}
 .ap-st--sum .ap-st__lit{top:64px}
 .ap-st__pulse{top:64px}
 .ap-st input{top:46px}
 .ap-oee__read{border-left:0;padding:22px 0 0;border-top:1px solid #a3c8b333;margin-top:16px}
 .ap-wf__track{height:26svh;max-height:200px}
 .ap-wf__l{font-size:13px}
 .ap-ask{font-size:22px}
 .ap-oee__eq{font-size:18px}
 .ap-oee__acts{display:grid}
 /* knot */
 .ap-knot__pin{position:static;height:auto}
 .ap-knot__stage{height:auto;padding:44px 0 48px}
 .ap-knot__steps{display:none}
 .ap-knot__shell{height:auto;padding:0 20px;gap:18px}
 .ap-knot__head{grid-template-columns:1fr;gap:14px}
 .ap-knot__titlebox .ap-h{font-size:36px}
 .ap-knot__svg--wide{display:none}
 .ap-knot__svg--tall{display:block;height:34svh;width:100%;aspect-ratio:auto;margin-block:8px}
 .ap-hd{font-size:17px}
 .ap-knot__cards{display:grid;grid-template-columns:1fr;gap:12px;margin:0;padding:0}
 .ap-knot:has(#ap-k0:checked) .ap-kc[data-n="0"],.ap-knot:has(#ap-k1:checked) .ap-kc[data-n="1"],.ap-knot:has(#ap-k2:checked) .ap-kc[data-n="2"]{transform:none}
 /* closing */
 .ap-close{padding:56px 20px 48px}
 .ap-close__head{margin-bottom:18px}
 .ap-close__head .ap-h{font-size:34px}
 .ap-close__inst{display:flex;flex-direction:column;align-items:stretch;gap:0}
 .ap-close__cap{display:contents}
 .ap-close__head{order:0}
 .ap-close__sent{order:1}
 .ap-close__line{font-size:36px}
 .ap-close__here{order:2}
 .ap-close__loom{order:3;margin-top:22px}
 .ap-close__route{order:4;margin-top:26px}
 .ap-close__route .gft-button{width:100%}
 .ap-close__sign{order:5}
 .ap-close__scrub{margin-left:0;width:calc(560 / 800 * 100% - 16px)}
 .ap-rung{min-height:40px;gap:8px}
 .ap-rung__n{display:none}
 .ap-rung__t{font-size:16px}
 .ap-rung__dot{width:18px;height:18px}
 .ap-close__kn{font-size:24px}
 .ap-close__htag,.ap-close__btag{font-size:15px}
 body[data-page=approach] .gft-footer .gft-footer__next .gft-footer__next-t{font-size:3rem}
 .ap-close__bg .ap-loom{width:160%}
}