/* Home: the thread, in act order (sheet control/choreo/root.md). Every selector is prefixed hth- and scoped to this
   route. HTML is the composed end state; pre-states live only under :root[data-m-go], and each section's entrance
   runs once when the page script marks it [data-hth-in] (about 38 % of the viewport into view). Transform, opacity,
   clip-path and filter only. Pins are native sticky; scroll-driven rules are longhands inside @supports. */
.hth-open,.hth-gap,.hth-fac,.hth-prog,.hth-int,.hth-oee,.hth-reg,.hth-close{--hth-night:#072d2b;--hth-forest:#0e4d4a;--hth-paper:#f6f4ef;--hth-linen:#ecf0ea;--hth-sage:#6bb68f;--hth-mint:#cfe6d8;--hth-ochre:#c98a2b;--hth-indigo:#2c3e7a;--hth-inight:#141d3f;--hth-ink:#072d2b;--hth-ink2:#2f4a41;--hth-ease:cubic-bezier(.16,1,.3,1);position:relative}
main:has(> .hth-open){overflow-x:clip}
:is(.hth-open,.hth-gap,.hth-fac,.hth-prog,.hth-int,.hth-oee,.hth-reg,.hth-close) .gft-eyebrow{font-size:13px;letter-spacing:.08em}
:is(.hth-gap,.hth-fac,.hth-int) .gft-cite{font-size:13px}

/* ---------- shared pieces ---------- */
.hth-head{font-weight:850;letter-spacing:-.055em;line-height:1.02}
.hth-head .gft-serif{font-weight:400}
.hth-w{display:inline-block;vertical-align:top}
.hth-c{display:inline-block}
.hth-caption{font:500 13.5px/1.5 var(--gft-font-mono);letter-spacing:.05em;color:#d8ece1}
.hth-tag{position:absolute;margin:0;font:600 13px/1.3 var(--gft-font-mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.hth-card__k{font:600 13px/1.4 var(--gft-font-mono);letter-spacing:.08em;text-transform:uppercase}
.hth-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;min-height:48px;padding:12px 20px;font-size:16px;font-weight:650;text-decoration:none;border:1px solid var(--hth-paper)}
.hth-cta span{font-size:20px;font-weight:400;transition:transform .35s var(--hth-ease)}
.hth-cta:hover span,.hth-cta:focus-visible span{transform:translate(3px,-3px)}
.hth-cta--solid{background:var(--hth-paper);color:var(--hth-night)}
.hth-cta--line{color:var(--hth-paper);background:transparent}
.hth-seg{display:flex;margin:0;padding:0;border:0;min-width:0}
.hth-seg button{min-height:44px;padding:8px 18px;border:1px solid #cfe6d8;background:transparent;color:#f6f4ef;font-size:15px;font-weight:600}
.hth-seg button+button{border-left:0}
.hth-seg button[aria-pressed=true]{background:#f6f4ef;color:#072d2b;border-color:#f6f4ef}
.hth-chip{display:inline-flex;align-items:center;min-height:26px;padding:2px 10px;font:600 13px/1 var(--gft-font-mono);letter-spacing:.04em;border:1px solid currentColor}

/* sticky scenes: a fixed-height stage, a track of steps, and cards that rise and stack at the bottom of the stage */
.hth-pin{position:relative}
.hth-stage{position:sticky;top:0;height:100svh;overflow:clip;display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.hth-band{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:40px;padding:clamp(18px,3.2svh,40px) 48px 0}
.hth-band__head .gft-eyebrow{margin-bottom:10px}
.hth-band__head h2{font-size:clamp(2.2rem,min(3.9vw,6.6svh),4.1rem)}
.hth-track{position:relative;z-index:3;margin-top:-100svh;pointer-events:none}
.hth-step{height:90vh}
.hth-step--last{height:120vh}
.hth-pin--gap .hth-step{height:76vh}
.hth-pin--gap .hth-step--last{height:72vh}
.hth-card{pointer-events:auto;position:sticky;top:clamp(108px,calc(100svh - var(--hth-card-h) - 36px),540px);box-sizing:border-box;height:var(--hth-card-h);width:min(40vw,560px);margin-left:48px;padding:24px 28px;display:flex;flex-direction:column;gap:10px;overflow:hidden;transition:opacity .45s var(--hth-ease)}
.hth-card h3{font-size:clamp(1.35rem,1.9vw,1.75rem);letter-spacing:-.035em;line-height:1.12}
.hth-card p:not(.hth-card__k){font-size:17px;line-height:1.55}
.hth-card .gft-cite{align-self:flex-start;min-height:44px}
.hth-card .gft-text-link{font-size:15px;min-height:44px}
.hth-pin[data-step] .hth-card{opacity:0}
.hth-pin[data-step]:not([data-live]) .hth-card[data-k]{opacity:0!important}
.hth-pin[data-step="0"] .hth-card[data-k="0"],.hth-pin[data-step="1"] .hth-card[data-k="1"],.hth-pin[data-step="2"] .hth-card[data-k="2"]{opacity:1}

/* ======================= ACT I · night ======================= */
/* ---------- 1 · splash ---------- */
.hth-open{isolation:isolate;min-height:calc(100svh - 88px);background:var(--hth-night);color:var(--hth-paper);display:grid;grid-template-rows:minmax(0,1fr) auto;overflow:clip}
.hth-open__ground{position:absolute;inset:0;z-index:-3;background:radial-gradient(ellipse 70% 80% at 74% 28%,#0e4d4a 0%,#0a3a37 40%,#072d2b 72%)}
.hth-open__grid{position:absolute;inset:-24px;overflow-anchor:none;background-image:linear-gradient(#b4d4c51c 1px,transparent 1px),linear-gradient(90deg,#b4d4c51c 1px,transparent 1px);background-size:44px 44px}
.hth-fibre{position:absolute;z-index:-2;right:-8vw;top:-15%;width:min(68vw,1180px);aspect-ratio:1100/740;pointer-events:none}
.hth-fibre__par{position:absolute;inset:0;overflow-anchor:none}
.hth-fibre__svg{width:100%;height:100%;overflow:visible}
.hth-fibre__turn{transform-box:view-box;transform-origin:640px 355px}
.hth-fibre__yarn{transform-box:view-box;transform-origin:640px 355px;transition:transform .7s var(--hth-ease),opacity .6s var(--hth-ease)}
.hth-fibre__single,.hth-fibre__gold,.hth-fibre__gold-glow{transition:opacity .6s var(--hth-ease)}
.hth-fibre__node{opacity:.78;transition:opacity .45s var(--hth-ease)}
[data-stage="0"] .hth-fibre__node[data-node="0"],[data-stage="1"] .hth-fibre__node[data-node="1"],[data-stage="2"] .hth-fibre__node[data-node="2"],[data-stage="3"] .hth-fibre__node[data-node="3"],[data-stage="4"] .hth-fibre__node[data-node="4"]{opacity:1}
[data-stage="0"] .hth-fibre__node[data-node="0"] .hth-fibre__ring,[data-stage="1"] .hth-fibre__node[data-node="1"] .hth-fibre__ring,[data-stage="2"] .hth-fibre__node[data-node="2"] .hth-fibre__ring,[data-stage="3"] .hth-fibre__node[data-node="3"] .hth-fibre__ring,[data-stage="4"] .hth-fibre__node[data-node="4"] .hth-fibre__ring{stroke:#f2c27a;stroke-width:3}
.hth-fibre__pip{offset-rotate:0deg;offset-distance:100%}
.hth-fibre__state{opacity:0;transition:opacity .5s var(--hth-ease),clip-path .7s var(--hth-ease);clip-path:inset(0 100% 0 0)}
[data-stage="0"] .hth-fibre__yarn{transform:rotate(-14deg) scale(1.06);opacity:.55}
[data-stage="2"] .hth-fibre__yarn,[data-stage="3"] .hth-fibre__yarn,[data-stage="4"] .hth-fibre__yarn{opacity:.34}
[data-stage="2"] .hth-fibre__single,[data-stage="3"] .hth-fibre__single,[data-stage="4"] .hth-fibre__single{opacity:.5}
[data-stage="2"] .hth-fibre__state--warp,[data-stage="3"] .hth-fibre__state--planes,[data-stage="4"] .hth-fibre__state--cloth{opacity:1;clip-path:inset(0 0 0 0)}
.hth-fibre__label{position:absolute;margin:0;padding:3px 10px;background:#072d2bd9;border:1px solid #a9d3bb44;font:600 13px/1.4 var(--gft-font-mono);letter-spacing:.08em;text-transform:uppercase;color:#e7efe9}
.hth-fibre__label--top{right:48px;top:clamp(18px,3.2svh,40px);display:flex;gap:12px;align-items:center}
.hth-fibre__label--top span{width:28px;height:1px;background:var(--hth-ochre)}
.hth-fibre__label--bottom{right:12vw;bottom:9%}
.hth-open__tail{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;overflow:visible}
.hth-open__head{align-self:start;padding-top:clamp(16px,3svh,40px);padding-bottom:10px;display:flex;flex-direction:column;align-items:flex-start}
.hth-open__head .gft-eyebrow{font-size:13px;letter-spacing:.1em;color:#d8ece1}
.hth-open__title{font-size:clamp(3.2rem,min(6.8vw,10.2svh),7.4rem);line-height:.98;letter-spacing:-.06em;font-weight:850;margin-top:clamp(12px,2svh,24px);max-width:48vw}
.hth-line{display:block}
.hth-line__in{display:inline-block}
.hth-open__title .gft-serif{color:var(--hth-sage);letter-spacing:-.045em}
.hth-open__lede{font-size:clamp(16px,1.32vw,19px);line-height:1.55;max-width:40ch;color:#d9e6de;margin-top:clamp(12px,2.2svh,24px)}
.hth-open__cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:clamp(14px,2.4svh,26px)}

/* ---------- 2 · the loom rail ---------- */
.hth-open__loom{position:relative;z-index:1}
.hth-loom{--hth-stop:30;display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid #a3c8b355;padding:clamp(10px,1.5svh,18px) 0 clamp(12px,1.8svh,20px);background:linear-gradient(180deg,#072d2be6,#072d2b 40%)}
.hth-loom[data-stage="0"]{--hth-stop:10}.hth-loom[data-stage="2"]{--hth-stop:50}.hth-loom[data-stage="3"]{--hth-stop:70}.hth-loom[data-stage="4"]{--hth-stop:90}
.hth-loom__head{display:flex;justify-content:space-between;align-items:baseline;gap:24px}
.hth-loom__strap{font-family:var(--gft-font-serif);font-style:italic;font-size:clamp(22px,min(2.6vw,4.2svh),42px);line-height:1.1;letter-spacing:-.02em;color:#f6f4ef}
.hth-loom__strap .gft-serif{color:var(--hth-sage)}
.hth-loom__hint{display:flex;gap:10px;align-items:center;font:500 13.5px/1.4 var(--gft-font-mono);letter-spacing:.05em;color:#d8ece1;max-width:none}
.hth-loom__hint span{width:8px;height:8px;border-radius:50%;background:var(--hth-ochre)}
.hth-loom__rail,.hth-loom__scrub{grid-row:2;grid-column:1}
.hth-loom__rail{position:relative;height:44px;container-type:inline-size;pointer-events:none}
.hth-loom__wave{position:absolute;inset:4px 0;width:100%;height:36px;clip-path:inset(0 0 0 calc(var(--hth-stop) * 1%));transition:clip-path .65s var(--hth-ease)}
.hth-loom__wave path{stroke:#6bb68f;stroke-width:1.6;stroke-opacity:.8}
.hth-loom__taut{position:absolute;left:0;right:0;top:21px;height:2px;background:#e7efe9;clip-path:inset(0 calc(100% - var(--hth-stop) * 1%) 0 0);transition:clip-path .65s var(--hth-ease);overflow:visible}
.hth-loom__ripple{position:absolute;left:0;top:-3px;width:90px;height:8px;border-radius:8px;background:radial-gradient(closest-side,#c98a2b,#c98a2b00);overflow-anchor:none}
.hth-loom__node{position:absolute;left:0;top:22px;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--hth-ochre);box-shadow:0 0 0 4px #072d2b;transform:translateX(calc(var(--hth-stop) * 1cqw));transition:transform .65s var(--hth-ease)}
.hth-loom__node::after{content:'';position:absolute;inset:-8px;border-radius:50%;border:2px solid var(--hth-ochre);opacity:0}
.hth-loom__scrub{position:relative;z-index:1}
.hth-loom__scrub input{display:block;width:calc(80% + 28px);margin:0 0 0 calc(10% - 14px);height:44px;background:transparent;-webkit-appearance:none;appearance:none;cursor:grab}
.hth-loom__scrub input::-webkit-slider-runnable-track{height:44px;background:transparent}
.hth-loom__scrub input::-moz-range-track{height:44px;background:transparent}
.hth-loom__scrub input::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:8px;border-radius:50%;background:transparent;border:2px solid #f6f4ef}
.hth-loom__scrub input::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:transparent;border:2px solid #f6f4ef}
.hth-loom__stops{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:2px}
.hth-loom__stops button{justify-self:center;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:6px 18px;border:1px solid #a9d3bb66;background:#072d2b;color:#e7efe9;font-size:15px}
.hth-loom__stops button span{font:600 13px var(--gft-font-mono);color:var(--hth-mint)}
.hth-loom__stops button strong{font-weight:650}
.hth-loom__stops button[aria-pressed=true]{background:#f6f4ef;color:#072d2b;border-color:#f6f4ef}
.hth-loom__stops button[aria-pressed=true] span{color:#2f4a41}
.hth-loom__readout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.5fr) minmax(0,1.05fr);gap:28px;align-items:start;margin-top:clamp(8px,1.6svh,16px)}
.hth-loom__ask{font-size:clamp(20px,1.7vw,24px);font-weight:750;letter-spacing:-.025em;line-height:1.2;min-height:2.4em}
.hth-loom__text{font-size:17px;line-height:1.45;color:#dbe8e0;min-height:4.35em}
.hth-loom__go{display:flex;align-items:center;gap:14px;min-height:64px;text-decoration:none;color:#f6f4ef}
.hth-loom__go>span:nth-child(2){display:grid;gap:2px}
.hth-loom__go b{font-size:15px;font-weight:650;text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:1px}
.hth-loom__go small{font:500 13px var(--gft-font-mono);color:#d8ece1}
.hth-loom__go>i{font-style:normal;font-size:22px;color:var(--hth-sage)}
.hth-loom__thumbs{position:relative;width:64px;height:64px;flex:none;border:1px solid #a9d3bb55;background:#0e4d4a}
.hth-thumb{position:absolute;inset:0;width:64px;height:64px;opacity:0;transition:opacity .35s var(--hth-ease)}
.hth-loom[data-stage="0"] .hth-thumb[data-i="0"],.hth-loom[data-stage="1"] .hth-thumb[data-i="1"],.hth-loom[data-stage="2"] .hth-thumb[data-i="2"],.hth-loom[data-stage="3"] .hth-thumb[data-i="3"],.hth-loom[data-stage="4"] .hth-thumb[data-i="4"]{opacity:1}

/* splash entrance (spin) and rail (thread): load, three phases, settled by about 1 s */
:root[data-m-go] .hth-open:not([data-hth-in]) :is(.hth-open__ground,.hth-fibre__draw,.hth-fibre__turn,.hth-line__in,.hth-open__eyebrow,.hth-open__lede,.hth-open__cta,.hth-loom__rail,.hth-loom__stops button,.hth-loom__readout,.hth-loom__strap,.hth-fibre__label){opacity:0}
:root[data-m-go] .hth-open[data-hth-in] .hth-open__ground{animation-name:hth-fade;animation-duration:300ms;animation-timing-function:linear;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .hth-open[data-hth-in] .hth-fibre__draw{animation-name:hth-tip;animation-duration:630ms;animation-delay:120ms;animation-timing-function:cubic-bezier(.45,0,.2,1);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .hth-open[data-hth-in] .hth-fibre__turn{animation-name:hth-turn-in;animation-duration:630ms;animation-delay:120ms;animation-timing-function:var(--hth-ease);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .hth-open[data-hth-in] .hth-line__in{animation-name:hth-line-up;animation-duration:520ms;animation-delay:calc(350ms + var(--hth-l) * 80ms);animation-timing-function:var(--hth-ease);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .hth-open:not([data-hth-done]) .hth-line{clip-path:inset(-.12em -.2em -.22em -.12em)}
:root[data-m-go] .hth-open[data-hth-in] :is(.hth-open__eyebrow,.hth-open__lede,.hth-open__cta,.hth-fibre__label){animation-name:hth-rise;animation-duration:520ms;animation-delay:420ms;animation-timing-function:var(--hth-ease);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .hth-open[data-hth-in] .hth-open__eyebrow{animation-delay:200ms}
:root[data-m-go] .hth-open[data-hth-in] .hth-loom__rail{animation-name:hth-thread;animation-duration:520ms;animation-delay:480ms;animation-timing-function:cubic-bezier(.45,0,.2,1);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .hth-open[data-hth-in] .hth-loom__stops button{animation-name:hth-rise;animation-duration:400ms;animation-delay:calc(560ms + var(--hth-i) * 60ms);animation-timing-function:var(--hth-ease);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .hth-open[data-hth-in] .hth-loom__readout{animation-name:hth-wipe-up;animation-duration:460ms;animation-delay:640ms;animation-timing-function:var(--hth-ease);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .hth-open[data-hth-in] .hth-loom__strap{animation-name:hth-blur-in;animation-duration:620ms;animation-delay:420ms;animation-timing-function:var(--hth-ease);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes hth-fade{from{opacity:0}}
@keyframes hth-tip{from{opacity:.2;clip-path:inset(0 0 100% 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes hth-turn-in{from{opacity:.15;transform:rotate(-14deg) scale(1.08)}}
@keyframes hth-line-up{from{transform:translateY(108%)}}
@keyframes hth-rise{from{opacity:0;transform:translateY(14px)}}
@keyframes hth-thread{from{opacity:.4;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes hth-wipe-up{from{opacity:.2;clip-path:inset(100% 0 0 0);transform:translateY(10px)}to{opacity:1;clip-path:inset(0 0 0 0);transform:none}}
@keyframes hth-blur-in{from{opacity:0;filter:blur(10px);transform:translateY(.25em)}}
/* lives: the yarn breathes, the pip rides the curve every 9 s, the ripple travels the taut thread, the node pings */
:root[data-m-go] .hth-fibre__guides[data-m-on]{animation-name:hth-breathe;animation-duration:6s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}
:root[data-m-go] .hth-fibre__pip[data-m-on]{animation-name:hth-pip;animation-duration:9s;animation-timing-function:linear;animation-iteration-count:infinite}
:root[data-m-go] .hth-loom__ripple[data-m-on]{animation-name:hth-ripple;animation-duration:3.4s;animation-timing-function:cubic-bezier(.4,0,.6,1);animation-iteration-count:infinite}
:root[data-m-go] .hth-loom__node[data-m-on]::after{animation-name:hth-ping;animation-duration:2.4s;animation-timing-function:ease-out;animation-iteration-count:infinite}
@keyframes hth-breathe{from{opacity:.55}to{opacity:1}}
@keyframes hth-pip{from{offset-distance:0%}to{offset-distance:100%}}
@keyframes hth-ripple{from{transform:translateX(-90px)}to{transform:translateX(100cqw)}}
@keyframes hth-ping{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(1.7)}}

/* ---------- 3 · the value that leaves (forest) ---------- */
.hth-gap{background:var(--hth-forest);color:var(--hth-paper)}
.hth-fray{position:relative;height:26vh;min-height:190px;background:linear-gradient(180deg,#072d2b 0%,#0e4d4a 70%)}
.hth-fray svg{position:absolute;inset:0;width:100%;height:100%;overflow-anchor:none}
.hth-fray__caption{position:absolute;right:48px;bottom:18px;margin:0;text-align:right;color:#e7efe9}
.hth-pin--gap{--hth-card-h:340px}
.hth-gap__stage{background:radial-gradient(ellipse 60% 50% at 12% 42%,#14605b 0%,#0e4d4a 70%)}
.hth-gap .hth-band{background:linear-gradient(180deg,#0e4d4a 70%,#0e4d4a00)}
.hth-gap__nums{display:flex;gap:36px;align-items:flex-end;padding-bottom:4px}
.hth-gap__num{position:relative;display:grid;gap:4px}
.hth-gap__num strong{display:block;font-size:clamp(64px,min(8.2vw,13svh),120px);line-height:.92;font-weight:850;letter-spacing:-.065em;white-space:nowrap;transform-origin:0 100%;transition:transform .45s var(--hth-ease)}
.hth-gap__num--raw strong{width:3.25em;color:#e7efe9}
.hth-gap__num--local strong{width:2.6em;color:#f2c27a}
.hth-gap__num span{font:600 13px/1.4 var(--gft-font-mono);letter-spacing:.06em;text-transform:uppercase;color:#d8ece1;width:0;min-width:100%;min-height:2.8em}
.hth-gap__unknown-pulse{position:absolute;left:0;top:-26px;padding:3px 10px;border:1px solid #f2c27a;background:#072d2bf2;color:#f2c27a;font:600 12.5px/1.2 var(--gft-font-mono);letter-spacing:.06em;text-transform:uppercase;font-style:normal;width:max-content;opacity:0;pointer-events:none;transition:opacity .35s var(--hth-ease)}
.hth-gap__stage[data-mode=basis] .hth-gap__unknown-pulse{opacity:1}
.hth-gap__stage[data-mode=basis] .hth-gap__num strong{transform:scale(.6)}
.hth-gap__field{position:relative;min-height:0;outline-offset:-6px}
.hth-gap__clip{position:absolute;inset:0}
.hth-gap__svg{width:100%;height:100%;overflow:visible}
.hth-gap__grid path{stroke:#cfe6d8;stroke-opacity:.07}
.hth-gap__set path{stroke-width:1.1;transition:opacity .4s var(--hth-ease)}
.hth-gap__set--stay,.hth-gap__set--out{transform-box:view-box;transform-origin:150px 250px}
.hth-gap__set--stay path,.hth-gap__set--out path{stroke:#a9d3bb;stroke-opacity:.55}
.hth-gap__set--in path{stroke:#f2c27a;stroke-opacity:.7;stroke-dasharray:5 6}
.hth-gap__set--ochre path{stroke:#e0a24a;stroke-width:2.2}
.hth-gap__set{transition:opacity .38s var(--hth-ease),clip-path .55s var(--hth-ease),transform .55s var(--hth-ease)}
.hth-gap__set--in{opacity:0;clip-path:inset(0 0 100% 0)}
.hth-gap__stage[data-mode=target] .hth-gap__set--out{opacity:0;transition-delay:0s}
.hth-gap__stage[data-mode=target] .hth-gap__set--in{opacity:1;clip-path:inset(0 0 0 0);transition-delay:.3s}
.hth-gap__stage[data-mode=basis] :is(.hth-gap__set--stay,.hth-gap__set--out){opacity:.36;transform:scaleY(.24)}
.hth-gap__gin{opacity:0;transition:opacity .45s var(--hth-ease)}
.hth-gap__stage[data-mode=basis] .hth-gap__gin{opacity:1}
.hth-gap__hot{stroke:#fff;stroke-width:3;fill:none}
.hth-gap__gates path{stroke:#f6f4ef;stroke-width:3}
.hth-gap__origin{position:absolute;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--hth-ochre);box-shadow:0 0 0 6px #c98a2b33}
.hth-gap__shuttle{position:absolute;top:6%;bottom:6%;left:0;width:2px;overflow-anchor:none}
.hth-gap__shuttle i{position:absolute;inset:0;background:linear-gradient(180deg,#cfe6d800,#cfe6d8aa 30%,#cfe6d8aa 70%,#cfe6d800)}
.hth-gap__tag--export{top:3%;transform:translateX(-50%);color:#e7efe9}
.hth-gap__tag--local{bottom:1%;transform:translateX(-30%);color:#f2c27a;display:flex;gap:10px;align-items:center}
.hth-gap__notch{display:inline-block;padding:2px 8px;border:1px solid #f2c27a;opacity:0;transition:opacity .4s var(--hth-ease)}
.hth-gap__tag--policy{bottom:18%;padding:2px 8px;background:#072d2bd9;color:#f2c27a;opacity:0;transition:opacity .4s var(--hth-ease)}
.hth-gap__tag--remainder{right:2%;top:12%;padding:4px 10px;border:1px solid #cfe6d8;color:#e7efe9;opacity:0;transition:opacity .4s var(--hth-ease)}
.hth-gap__tag--origin{transform:translate(-20%,22px);color:#d8ece1}
.hth-gap__stage[data-mode=target] :is(.hth-gap__notch,.hth-gap__tag--policy,.hth-gap__tag--remainder){opacity:1;transition-delay:.35s}
.hth-gap__eq{position:absolute;left:4%;right:30%;top:6%;display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;opacity:0;transform:translateY(12px);transition:opacity .45s var(--hth-ease),transform .45s var(--hth-ease);pointer-events:none}
.hth-gap__stage[data-mode=basis] .hth-gap__eq{opacity:1;transform:none;transition-delay:.3s}
.hth-gap__stage[data-mode=basis] .hth-gap__tag--origin{opacity:0}
.hth-gap__chip{display:grid;gap:4px;padding:14px 18px;background:#072d2bf0;border:1px solid #cfe6d8;font:500 14px/1.3 var(--gft-font-mono);color:#d8ece1}
.hth-gap__chip b{font:800 clamp(24px,2.4vw,36px)/1.05 var(--gft-font-display);letter-spacing:-.04em;color:#f6f4ef}
.hth-gap__chip--open{border-style:dashed;border-color:#f2c27a}
.hth-gap__chip--open b{color:#f2c27a}
.hth-gap__op{font-size:clamp(28px,2.6vw,40px);color:#f2c27a;font-weight:300}
.hth-gap__ctl{display:flex;justify-content:flex-end;align-items:center;gap:18px;flex-wrap:wrap;padding:10px 48px 22px calc(min(40vw,560px) + 72px)}
.hth-gap__scrub{display:flex;align-items:center;gap:10px;padding:6px 12px;background:#072d2bd9;border:1px solid #a9d3bb66}
.hth-gap__scrub label{font:600 12.5px/1 var(--gft-font-mono);letter-spacing:.05em;text-transform:uppercase;color:#d8ece1;white-space:nowrap}
.hth-gap__scrub input{width:110px;min-height:32px;accent-color:#f2c27a;cursor:pointer}
.hth-gap__scrub output{font:600 13px/1 var(--gft-font-mono);color:#f2c27a;white-space:nowrap}
.hth-gap__hover{font:500 13.5px/1.4 var(--gft-font-mono);color:#e7efe9;min-height:2.8em;max-width:44ch;text-align:right;margin:0}
.hth-gap .hth-card{background:#072d2bf2;border:1px solid #cfe6d855;box-shadow:0 18px 50px #021a1866}
.hth-gap .hth-card__k{color:#f2c27a}
.hth-card__src{font:500 13px/1.45 var(--gft-font-mono)!important;color:#d8ece1}
.hth-warpin{position:relative;height:25vh;min-height:196px;overflow:clip}
.hth-warpin__paper{position:absolute;inset:0;background:var(--hth-paper);clip-path:polygon(0 28%,6% 22%,12% 28%,18% 22%,24% 28%,30% 22%,36% 28%,42% 22%,48% 28%,54% 22%,60% 28%,66% 22%,72% 28%,78% 22%,84% 28%,90% 22%,96% 28%,100% 24%,100% 100%,0 100%)}
.hth-warpin__svg{position:absolute;inset:0;width:100%;height:100%}
.hth-warpin__badge{position:absolute;right:48px;bottom:18px;display:grid;gap:4px;padding:10px 16px;background:#f6f4eff2;border:1px solid #0e4d4a44;border-left:3px solid #c98a2b;box-shadow:0 10px 28px #072d2b14}
.hth-warpin__kicker{font:600 12.5px/1.2 var(--gft-font-mono);letter-spacing:.06em;text-transform:uppercase;color:#9a5a10}
.hth-warpin__caption{margin:0;color:#22382f}
/* entrance: unspool. The strand field pays out left to right; the strands arrive 6 ms apart */
:root[data-m-go] .hth-gap:not([data-hth-in]) :is(.hth-gap__clip,.hth-gap__num,.hth-gap__ctl,.hth-gap__tag--export,.hth-gap__tag--local,.hth-gap__tag--origin){opacity:0}
:root[data-m-go] .hth-gap[data-hth-in] .hth-gap__clip{animation-name:hth-pay;animation-duration:820ms;animation-timing-function:cubic-bezier(.45,0,.2,1);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .hth-gap[data-hth-in] .hth-gap__set path{animation-name:hth-fade;animation-duration:260ms;animation-delay:calc(var(--hth-i,0) * 6ms);animation-timing-function:linear;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .hth-gap[data-hth-in] :is(.hth-gap__num,.hth-gap__ctl,.hth-gap__tag--export,.hth-gap__tag--local,.hth-gap__tag--origin){animation-name:hth-rise;animation-duration:480ms;animation-delay:380ms;animation-timing-function:var(--hth-ease);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .hth-gap[data-hth-in] .hth-gap__tag--export{animation-name:hth-fade}
@keyframes hth-pay{from{opacity:.3;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
:root[data-m-go] .hth-gap__shuttle[data-m-on]{animation-name:hth-shuttle;animation-duration:14s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}
@keyframes hth-shuttle{from{transform:translateX(12vw)}to{transform:translateX(86vw)}}
:root[data-m-go] :is(.hth-gap__origin,.hth-gap__stage[data-mode=basis] .hth-gap__unknown-pulse,.hth-close__knot-ring)[data-m-on]{animation-name:hth-pulse;animation-duration:2.6s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}
@keyframes hth-pulse{from{transform:scale(.85);opacity:.75}to{transform:scale(1.15);opacity:1}}

/* ======================= ACT II · paper ======================= */
/* ---------- 4 · the factory as warp ---------- */
.hth-fac{background:var(--hth-paper);color:var(--hth-ink);padding-bottom:88px}
.hth-pin--fac{--hth-card-h:336px}
.hth-fac__stage{background:radial-gradient(ellipse 50% 60% at 30% 58%,#e7eee9 0%,#f6f4ef 72%);grid-template-columns:minmax(0,60fr) minmax(0,40fr);grid-template-rows:auto minmax(0,1fr)}
.hth-fac .hth-band{grid-column:1/-1;background:linear-gradient(180deg,#f6f4ef 75%,#f6f4ef00)}
.hth-fac .gft-eyebrow{color:#2a6e50}
.hth-fac .hth-band__head h2 .gft-serif{color:#2a6e50}
.hth-fac__readout{width:min(36vw,520px);padding:14px 20px;border-left:3px solid var(--hth-ochre);background:#ffffffb8}
.hth-fac__fam{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font:600 13px var(--gft-font-mono);letter-spacing:.06em;text-transform:uppercase;color:#2f4a41}
.hth-fac__fam i{width:10px;height:10px;border-radius:50%;background:var(--hth-ochre)}
.hth-fac__fam small{font-size:13px;color:#2f4a41;text-transform:none;letter-spacing:.02em}
.hth-fac__fam span{color:#072d2b;font-size:15px}
.hth-fac__readout strong{display:block;font-size:clamp(20px,1.7vw,24px);line-height:1.2;letter-spacing:-.02em;margin-top:6px}
.hth-fac__readout p:last-child{font-size:17px;line-height:1.45;margin-top:4px;color:#2f4a41;min-height:2.9em}
.hth-fac__draw{position:relative;grid-column:1;grid-row:2;min-height:0;display:flex;flex-direction:column;padding:0 0 84px 48px;overflow:hidden}
.hth-fac__svg{flex:1;min-height:0;width:100%;overflow:visible}
.hth-fac__cam{transform-box:view-box;transform-origin:0 0;transition:transform .6s var(--hth-ease)}
.hth-fac__stage[data-step="0"] .hth-fac__cam{transform:translate(380px,250px) scale(1.4) translate(-190px,-236px)}
.hth-fac__stage[data-step="1"] .hth-fac__cam{transform:translate(380px,250px) scale(1.4) translate(-380px,-232px)}
.hth-fac__pick{stroke:#2c3e7a;stroke-opacity:.35;transform-box:fill-box;transform-origin:0 0;transform:scaleX(.18) scaleY(.18);transition:transform .55s var(--hth-ease),stroke-opacity .4s}
.hth-fac__node{fill:#2c3e7a;fill-opacity:.4}
.hth-fac__halo{opacity:0;transform-box:fill-box;transform-origin:center;transition:opacity .4s}
.hth-fac__tag{font:600 15px var(--gft-font-mono);fill:#072d2b;letter-spacing:.02em;opacity:0;transition:opacity .35s}
.hth-fac__lead{opacity:0;transition:opacity .35s}
.hth-fac__stage[data-step="0"] :is([data-hth-station="0"],[data-hth-station="1"]) :is(.hth-fac__tag,.hth-fac__lead),.hth-fac__stage[data-step="1"] :is([data-hth-station="2"],[data-hth-station="3"]) :is(.hth-fac__tag,.hth-fac__lead),.hth-fac__stage[data-step="2"] :is(.hth-fac__tag,.hth-fac__lead){opacity:1}
.hth-fac__meter{opacity:0;transition:opacity .4s}
.hth-fac__packet{opacity:0}
.hth-fac__stage[data-step="0"] :is([data-hth-station="0"],[data-hth-station="1"]) .hth-fac__pick,.hth-fac__stage[data-step="1"] :is([data-hth-station="2"],[data-hth-station="3"]) .hth-fac__pick,.hth-fac__stage[data-step="2"] .hth-fac__pick{transform:none;stroke-opacity:1}
.hth-fac__stage[data-step="0"] :is([data-hth-station="0"],[data-hth-station="1"]) .hth-fac__halo,.hth-fac__stage[data-step="1"] :is([data-hth-station="2"],[data-hth-station="3"]) .hth-fac__halo,.hth-fac__stage[data-step="2"] .hth-fac__halo{opacity:1}
.hth-fac__stage[data-step="0"] :is([data-hth-station="0"],[data-hth-station="1"]) .hth-fac__node,.hth-fac__stage[data-step="1"] :is([data-hth-station="2"],[data-hth-station="3"]) .hth-fac__node,.hth-fac__stage[data-step="2"] .hth-fac__node{fill:#c98a2b;fill-opacity:1}
.hth-fac__stage[data-step="2"] .hth-fac__meter{opacity:1}
.hth-fac__st{cursor:pointer}
.hth-fac__stage[data-family="0"] [data-hth-station="0"] .hth-fac__tag,.hth-fac__stage[data-family="1"] [data-hth-station="1"] .hth-fac__tag,.hth-fac__stage[data-family="2"] [data-hth-station="2"] .hth-fac__tag,.hth-fac__stage[data-family="3"] [data-hth-station="3"] .hth-fac__tag,.hth-fac__stage[data-family="4"] [data-hth-station="4"] .hth-fac__tag,.hth-fac__stage[data-family="5"] [data-hth-station="5"] .hth-fac__tag{fill:#9a5a10;text-decoration:underline}
.hth-fac__chips{display:none}
.hth-fac__key{display:flex;gap:24px;flex-wrap:wrap;font:500 13.5px var(--gft-font-mono);color:#22382f;margin:0;position:absolute;left:48px;bottom:72px}
.hth-fac__key span{display:inline-flex;align-items:center;gap:8px}
.hth-fac__key i{width:22px;height:3px;background:var(--hth-ochre)}
.hth-fac__key span+span i{background:#2c3e7a}
.hth-fac__ctl{grid-column:2;grid-row:2;align-self:start;padding:6px 48px 0 28px}
.hth-fac__picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0;padding:0;border:0}
.hth-fac__picker legend{font:600 13px var(--gft-font-mono);letter-spacing:.06em;text-transform:uppercase;color:#22382f;margin-bottom:8px;padding:0}
.hth-fac__picker button{min-height:52px;padding:6px 10px;border:1px solid #0e4d4a66;background:#ffffffaa;color:#072d2b;font-size:15px;font-weight:600}
.hth-fac__picker button[aria-pressed=true]{background:#0e4d4a;color:#f6f4ef;border-color:#0e4d4a}
.hth-fac__src{font:500 13.5px/1.45 var(--gft-font-mono);color:#2f4a41;margin-top:10px}
.hth-fac .hth-card{margin-left:auto;margin-right:48px;width:calc(40vw - 76px);background:#fffffff2;border:1px solid #0e4d4a33;box-shadow:0 18px 44px #072d2b1f}
.hth-fac .hth-card__k{color:#2a6e50}
.hth-fac .hth-card p:not(.hth-card__k){color:#22382f}
.hth-fac__beat{position:absolute;left:48px;right:48px;bottom:0;height:62px;pointer-events:none;opacity:0;transition:opacity .5s var(--hth-ease)}
.hth-fac__stage[data-step="2"] .hth-fac__beat{opacity:1}
.hth-fac__picks{position:absolute;inset:0;transform-origin:50% 100%}
.hth-fac__picks i{position:absolute;left:0;right:0;height:3px;bottom:calc(var(--hth-s) * 11px);background:repeating-linear-gradient(90deg,#2c3e7a 0 14px,#2c3e7a00 14px 22px)}
.hth-fac__picks i:nth-child(2n){background:repeating-linear-gradient(90deg,#c98a2b 0 10px,#c98a2b00 10px 22px)}
/* entrance: twill-shift. The stage lays in on a diagonal, then the stations rise one after another */
:root[data-m-go] .hth-fac:not([data-hth-in]) :is(.hth-fac__svg,.hth-fac__st,.hth-fac__readout,.hth-fac__ctl){opacity:0}
:root[data-m-go] .hth-fac[data-hth-in] .hth-fac__svg{animation-name:hth-diag;animation-duration:560ms;animation-timing-function:var(--hth-ease);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .hth-fac[data-hth-in] .hth-fac__st{animation-name:hth-st;animation-duration:420ms;animation-delay:calc(220ms + var(--hth-s) * 70ms);animation-timing-function:var(--hth-ease);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .hth-fac[data-hth-in] .hth-fac__readout{animation-name:hth-wipe-up;animation-duration:460ms;animation-delay:300ms;animation-timing-function:var(--hth-ease);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .hth-fac[data-hth-in] .hth-fac__ctl{animation-name:hth-rise;animation-duration:460ms;animation-delay:420ms;animation-timing-function:var(--hth-ease);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes hth-diag{from{opacity:.15;transform:translate(-48px,36px)}}
@keyframes hth-st{from{opacity:0;transform:translateY(16px)}}
:root[data-m-go] .hth-fac__halo[data-m-on]{animation-name:hth-pulse;animation-duration:1.8s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}
.hth-fac__stage[data-step] .hth-fac__packet{opacity:1}
:root[data-m-go] .hth-fac__packet[data-m-on]{animation-name:hth-packet;animation-duration:2.8s;animation-timing-function:cubic-bezier(.45,0,.55,1);animation-iteration-count:infinite;animation-direction:alternate}
.hth-fac__stage[data-step="0"]{--hth-ax:132px;--hth-ay:250px;--hth-bx:214px;--hth-by:241px}
.hth-fac__stage[data-step="1"]{--hth-ax:318px;--hth-ay:238px;--hth-bx:440px;--hth-by:231px}
.hth-fac__stage[data-step="2"]{--hth-ax:132px;--hth-ay:250px;--hth-bx:652px;--hth-by:220px}
.hth-fac__packet{transform:translate(var(--hth-ax),var(--hth-ay))}
@keyframes hth-packet{from{transform:translate(var(--hth-ax),var(--hth-ay))}to{transform:translate(var(--hth-bx),var(--hth-by))}}

/* ---------- 5 · the programme swatch (linen breath) ---------- */
.hth-prog{background:linear-gradient(180deg,#f6f4ef 0,#ecf0ea 22%,#ecf0ea 100%);color:var(--hth-ink);padding-top:0}
.hth-prog__bridge{position:relative;height:84px;margin-bottom:28px;border-bottom:1px dashed #0e4d4a33}
.hth-prog__bridge svg{position:absolute;inset:0;width:100%;height:100%}
.hth-prog__bridge-cap{position:absolute;right:48px;bottom:10px;margin:0;padding:4px 12px;background:#f6f4ef;border:1px solid #c98a2b88;color:#072d2b;z-index:2}
.hth-prog__head{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px 48px;align-items:end;padding-bottom:16px}
.hth-prog__head .gft-eyebrow{grid-column:1/-1;color:#2a6e50}
.hth-prog__head h2{font-size:clamp(2.1rem,3.7vw,3.9rem)}
.hth-prog__head h2 .gft-serif{color:#2a6e50}
.hth-prog__date{font:500 15px/1.5 var(--gft-font-mono);color:#22382f;padding-bottom:6px}
.hth-prog__body{position:relative;margin-top:clamp(28px,4svh,44px);padding-bottom:20vh}
.hth-swatch{position:relative;z-index:1;height:44vh;min-height:296px;display:grid;grid-template-rows:repeat(3,minmax(0,1fr));background:#0e4d4a;padding:12px 0;border-block:6px solid #c98a2b}
.hth-swatch__slot{position:relative;min-height:0;transition:transform .7s var(--hth-ease)}
.hth-swatch[data-apart] .hth-swatch__slot{transform:translateY(calc((var(--hth-b) - 1) * 3.2vh))}
.hth-swatch__band{position:absolute;inset:4px 0;overflow:hidden;cursor:pointer;transition:translate .45s var(--hth-ease),box-shadow .45s var(--hth-ease)}
.hth-swatch__band:hover{box-shadow:inset 0 0 0 2px #f2c27a}
.hth-swatch__weave{opacity:.4;transition:opacity .45s var(--hth-ease)}
.hth-swatch[data-on=feasibility] [data-hth-band=feasibility] .hth-swatch__weave,.hth-swatch[data-on=performance] [data-hth-band=performance] .hth-swatch__weave,.hth-swatch[data-on=digital] [data-hth-band=digital] .hth-swatch__weave{opacity:1}
.hth-swatch[data-on=feasibility] [data-hth-band=feasibility],.hth-swatch[data-on=performance] [data-hth-band=performance],.hth-swatch[data-on=digital] [data-hth-band=digital]{translate:0 -10px;box-shadow:0 14px 28px #021a1880,inset 0 0 0 3px #f2c27a}
.hth-swatch__weave{position:absolute;inset:0}
.hth-swatch__band--feasibility .hth-swatch__weave{background:repeating-linear-gradient(90deg,#1d6a64 0 10px,#2a7f77 10px 20px),#1d6a64;background-blend-mode:normal;-webkit-mask:repeating-linear-gradient(0deg,#000 0 10px,#0008 10px 20px)}
.hth-swatch__band--performance .hth-swatch__weave{background:repeating-linear-gradient(45deg,#16615b 0 9px,#2b857c 9px 18px)}
.hth-swatch__band--digital .hth-swatch__weave{background:repeating-linear-gradient(90deg,#283b74 0 28px,#3a4f92 28px 34px),#283b74}
.hth-swatch__tab{position:absolute;left:0;top:0;bottom:0;z-index:2;width:clamp(170px,17vw,250px);display:flex;align-items:center;gap:12px;padding:0 18px 0 48px;border:0;border-right:2px solid #c98a2b;background:#072d2bf0;color:#f6f4ef;font-size:17px;font-weight:700;text-align:left;cursor:pointer}
.hth-swatch__tab span{font:600 13px var(--gft-font-mono);color:#d8ece1}
.hth-swatch__tab[aria-pressed=true]{background:#f6f4ef;color:#072d2b}
.hth-swatch__tab[aria-pressed=true] span{color:#2f4a41}
.hth-swatch__knots{position:absolute;z-index:1;left:0;right:0;top:50%;margin:0;padding:0;list-style:none}
.hth-swatch__knots li{position:absolute;left:var(--hth-x);top:0;display:flex;align-items:center;gap:10px;transform:translate(-11px,-50%);font:600 14px/1.2 var(--gft-font-display);color:#f6f4ef;white-space:nowrap}
.hth-swatch__knots i{width:22px;height:22px;flex:none;border-radius:50%;background:#072d2b;border:3px solid #e7efe9}
.hth-swatch__knots span{padding:4px 8px;background:#072d2bd9}
.hth-swatch__result{position:absolute;right:48px;top:50%;transform:translateY(-50%);display:grid;padding:7px 14px;background:#072d2be6;border:1px solid #a9d3bb66;color:#e7efe9;font:700 15px/1.25 var(--gft-font-display);margin:0;max-width:17ch;transition:background .35s,color .35s,border-color .35s}
.hth-swatch__result span{font:600 12.5px var(--gft-font-mono);color:#a9d3bb;text-transform:uppercase;letter-spacing:.06em}
.hth-swatch__band:hover .hth-swatch__result,.hth-swatch[data-on=feasibility] [data-hth-band=feasibility] .hth-swatch__result,.hth-swatch[data-on=performance] [data-hth-band=performance] .hth-swatch__result,.hth-swatch[data-on=digital] [data-hth-band=digital] .hth-swatch__result{background:#f2c27a;color:#072d2b;border-color:#f2c27a;box-shadow:0 0 0 2px #072d2b}
.hth-swatch__band:hover .hth-swatch__result span,.hth-swatch[data-on=feasibility] [data-hth-band=feasibility] .hth-swatch__result span,.hth-swatch[data-on=performance] [data-hth-band=performance] .hth-swatch__result span,.hth-swatch[data-on=digital] [data-hth-band=digital] .hth-swatch__result span{color:#072d2b}
.hth-swatch__shuttle{position:absolute;top:50%;left:0;width:46px;height:8px;margin-top:-4px;border-radius:8px;background:#c98a2b;opacity:0;overflow-anchor:none}
.hth-swatch[data-on=feasibility] [data-hth-band=feasibility] .hth-swatch__shuttle,.hth-swatch[data-on=performance] [data-hth-band=performance] .hth-swatch__shuttle,.hth-swatch[data-on=digital] [data-hth-band=digital] .hth-swatch__shuttle{opacity:.9}
.hth-swatch[data-on=feasibility] [data-hth-band=feasibility] .hth-swatch__knots i,.hth-swatch[data-on=performance] [data-hth-band=performance] .hth-swatch__knots i,.hth-swatch[data-on=digital] [data-hth-band=digital] .hth-swatch__knots i{border-color:#c98a2b;background:#c98a2b}
.hth-prog__bracket{position:relative;z-index:2;height:44px;margin-top:6px;display:flex;align-items:flex-end;justify-content:center}
.hth-prog__bracket svg{position:absolute;inset:0;width:100%;height:100%}
.hth-prog__bracket-tag{position:relative;padding:2px 12px;background:#ecf0ea;border:1px solid #c98a2b;font:600 12.5px/1.3 var(--gft-font-mono);letter-spacing:.06em;text-transform:uppercase;color:#22382f}
.hth-prog__copy{position:relative;z-index:3;display:grid;margin-top:10px;padding:24px 28px 20px;background:#e4ebe3;border:1px solid #0e4d4a33;border-top:3px solid #c98a2b;box-shadow:0 16px 40px #072d2b12}
.hth-prog__panel{grid-area:1/1;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1.15fr);gap:36px;align-items:start;opacity:0;transform:translateY(8px);transition:opacity .3s var(--hth-ease),transform .3s var(--hth-ease);pointer-events:none}
.hth-prog__panel.is-on{opacity:1;transform:none;transition-delay:.18s;pointer-events:auto}
.hth-prog__panel h3{font-size:clamp(1.6rem,2.4vw,2.35rem);margin-top:6px;line-height:1.08}
.hth-prog__panel .hth-card__k{color:#2a6e50}
.hth-prog__chain{margin-top:16px;padding:14px 16px;background:#f6f4ef;border:1px solid #0e4d4a33;border-left:4px solid #c98a2b;display:grid;gap:12px}
.hth-prog__chain-nodes{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.hth-prog__node{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;background:#0e4d4a;color:#f6f4ef;font:600 13px/1.2 var(--gft-font-display)}
.hth-prog__node b{font:600 12px var(--gft-font-mono);color:#f2c27a}
.hth-prog__chain-out{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:10px;border-top:1px dashed #0e4d4a44}
.hth-prog__chain-out span{font:600 12.5px var(--gft-font-mono);letter-spacing:.06em;text-transform:uppercase;color:#2a6e50}
.hth-prog__chain-out strong{font:700 15px var(--gft-font-display);color:#072d2b;padding:3px 10px;background:#f2c27a}
.hth-prog__card{padding:20px 24px;background:#072d2b;color:#f6f4ef;border:1px solid #a9d3bb44;border-left:4px solid #c98a2b;display:grid;gap:12px}
.hth-prog__card-k{margin:0;font:600 12.5px/1.3 var(--gft-font-mono);letter-spacing:.06em;text-transform:uppercase;color:#f2c27a}
.hth-prog__card p:not(.hth-prog__card-k){margin:0;font-size:17px;line-height:1.58;color:#e7efe9}
.hth-prog__card-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:8px;border-top:1px solid #a9d3bb33}
.hth-prog__link{color:#f2c27a!important;font-weight:650}
.hth-prog__badge{font:600 12.5px var(--gft-font-mono);color:#d8ece1;padding:2px 8px;border:1px solid #a9d3bb55}
.hth-pending{display:inline-flex;min-height:44px;align-items:center;font:600 13px var(--gft-font-mono);color:#d8ece1}
.hth-prog__note{grid-area:2/1;margin-top:16px;padding-top:12px;border-top:1px solid #0e4d4a22;font:500 13.5px/1.55 var(--gft-font-mono);color:#22382f;max-width:96ch}
.hth-iris{position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,#2c3e7a 0%,#141d3f 60%);clip-path:circle(0% at 70% calc(16px + (46vh - 32px) * .8333));overflow:hidden}
.hth-iris::before{content:'';position:absolute;inset:0;background-image:linear-gradient(#c7d0f20f 1px,transparent 1px),linear-gradient(90deg,#c7d0f20f 1px,transparent 1px);background-size:36px 36px}
.hth-iris__plate{position:absolute;left:calc(70% - 160px);bottom:9vh;width:320px;height:120px;background:#2c3e7acc;border:2px solid #b9c7f2;transform:rotate(-30deg) skewX(30deg) scaleY(.86)}
.hth-iris__caption{position:absolute;left:48px;bottom:4vh;margin:0;color:#dce3fa}
/* entrance: heddle. Matrix rows slide in from the right, staggered, after the heading has settled */
:root[data-m-go] .hth-prog:not([data-hth-in]) :is(.hth-swatch__band,.hth-prog__copy,.hth-prog__date){opacity:0}
:root[data-m-go] .hth-prog[data-hth-in] .hth-swatch__band{animation-name:hth-shed-up;animation-duration:560ms;animation-delay:calc(360ms + var(--hth-b) * 130ms);animation-timing-function:var(--hth-ease);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .hth-prog[data-hth-in] .hth-swatch__slot:nth-child(2) .hth-swatch__band{animation-name:hth-shed-down}
:root[data-m-go] .hth-prog[data-hth-in] :is(.hth-prog__copy,.hth-prog__date){animation-name:hth-rise;animation-duration:480ms;animation-delay:420ms;animation-timing-function:var(--hth-ease);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes hth-shed-up{from{opacity:0;transform:translateX(64px)}}
@keyframes hth-shed-down{from{opacity:0;transform:translateX(64px)}}
:root[data-m-go] .hth-swatch__shuttle[data-m-on]{animation-name:hth-cross;animation-duration:5.5s;animation-timing-function:cubic-bezier(.5,0,.5,1);animation-iteration-count:infinite;animation-direction:alternate}
@keyframes hth-cross{from{transform:translateX(clamp(180px,18vw,260px))}to{transform:translateX(calc(100vw - 80px))}}

/* ======================= ACT III · night ======================= */
/* ---------- 6 · the dark interlude (indigo night) ---------- */
.hth-int{background:linear-gradient(180deg,#141d3f 0%,#1c2a5c 100%);color:#f0f2fa}
.hth-pin--int{--hth-card-h:380px}
.hth-int__stage{background:radial-gradient(ellipse 50% 60% at 50% 62%,#2c3e7a 0%,#1a2553 55%,#141d3f 100%)}
.hth-int__grid{position:absolute;inset:0;background-image:linear-gradient(#c7d0f214 1px,transparent 1px),linear-gradient(90deg,#c7d0f214 1px,transparent 1px);background-size:40px 40px;pointer-events:none}
.hth-int .hth-band{align-items:flex-start}
.hth-int .gft-eyebrow{color:#d4dbf5}
.hth-int__title{font-size:clamp(3rem,min(8vw,12.5svh),8.6rem);line-height:.95;letter-spacing:-.06em}
.hth-int__title .gft-serif{color:#b9c7f2}
.hth-int__readout{width:min(34vw,470px);padding:16px 20px;background:#141d3fe6;border:1px solid #b9c7f266;flex:none}
.hth-int__tier{font:600 13px var(--gft-font-mono);letter-spacing:.08em;text-transform:uppercase;color:#f2c27a}
.hth-int__readout strong{display:block;font-size:clamp(20px,1.7vw,24px);line-height:1.25;letter-spacing:-.02em;margin-top:6px;min-height:2.5em}
.hth-int__need{font-size:17px;line-height:1.45;color:#dfe4f8;margin-top:6px;min-height:2.9em}
.hth-int__picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:12px 0 0;padding:0;border:0}
.hth-int__picker button{min-height:48px;display:grid;padding:4px 8px;border:1px solid #b9c7f2aa;background:transparent;color:#f0f2fa;font-size:15px;font-weight:650;text-align:left;line-height:1.15}
.hth-int__picker button span{font:600 13px var(--gft-font-mono);color:#d4dbf5}
.hth-int__picker button[aria-pressed=true]{background:#f0f2fa;color:#141d3f}
.hth-int__picker button[aria-pressed=true] span{color:#2c3e7a}
.hth-int__stack{position:relative;justify-self:center;align-self:end;height:min(62vh,calc(100svh - 330px));aspect-ratio:600/560;margin-bottom:46px}
.hth-int__svg{width:100%;height:100%;overflow:visible}
.hth-int__plane{transform-box:view-box;transform-origin:300px 280px;transition:translate .55s var(--hth-ease)}
.hth-int__plate{fill:#2c3e7a;fill-opacity:.55;stroke:#b9c7f2;stroke-opacity:.5;stroke-width:1.5;transition:fill-opacity .4s,stroke-opacity .4s}
.hth-int__rail{stroke:#d4dbf5;stroke-opacity:.25;stroke-width:1.5}
.hth-int__pkt{fill:#f2c27a;opacity:0}
.hth-int__stack[data-lit] .hth-int__plane:is([data-plane="0"],[data-plane="1"]),.hth-int__stage[data-tier="1"] .hth-int__plane:is([data-plane="0"],[data-plane="1"],[data-plane="2"]),.hth-int__stage[data-tier="2"] .hth-int__plane{translate:0 -24px}
.hth-int__stage[data-tier="0"] .hth-int__plane:is([data-plane="0"],[data-plane="1"]) .hth-int__plate,.hth-int__stage[data-tier="1"] .hth-int__plane:not([data-plane="3"]) .hth-int__plate,.hth-int__stage[data-tier="2"] .hth-int__plate{fill-opacity:.9;stroke-opacity:1}
.hth-int__stage[data-tier="0"] .hth-int__plane:is([data-plane="0"],[data-plane="1"]){translate:0 -24px}
.hth-int__stage[data-tier="2"] .hth-int__plane[data-plane="3"] .hth-int__plate{stroke-dasharray:8 6;fill-opacity:.35;stroke:#f2c27a}
.hth-int__wire path{stroke:#e0a24a;stroke-width:3.5;fill:none;transition:opacity .45s var(--hth-ease)}
.hth-int__wire-3,.hth-int__wire-4,.hth-int__wire-gap,.hth-int__wire-out{opacity:0}
.hth-int__stage[data-tier="1"] .hth-int__wire-3,.hth-int__stage[data-tier="2"] :is(.hth-int__wire-3,.hth-int__wire-4,.hth-int__wire-gap,.hth-int__wire-out){opacity:1}
.hth-int__wire-gap{stroke-dasharray:4 7}
.hth-int__wire-out{stroke-dasharray:2 0;transition-delay:.3s}
.hth-int__stage[data-tier="1"] .hth-int__pkt{opacity:1}
.hth-int__cam rect{fill:#141d3f;stroke:#f2c27a;stroke-width:2}
.hth-int__cam circle{stroke:#f2c27a;stroke-width:2}
.hth-int__scan{stroke:#f2c27a;stroke-width:2;stroke-opacity:.8}
.hth-int__label{position:absolute;left:76%;top:calc(var(--hth-y) * 1%);margin:0;padding:2px 8px;background:#141d3fd9;display:flex;gap:10px;align-items:baseline;font:600 15px/1.2 var(--gft-font-display);color:#f0f2fa;white-space:nowrap;transform:translateY(-50%);transition:translate .55s var(--hth-ease),opacity .4s}
.hth-int__label b{font:600 13px var(--gft-font-mono);color:#f2c27a}
.hth-int__label:nth-of-type(1){--hth-y:80.7}.hth-int__label:nth-of-type(2){--hth-y:59.6}.hth-int__label:nth-of-type(3){--hth-y:38.6}.hth-int__label:nth-of-type(4){--hth-y:17.5}
.hth-int__stage[data-tier="0"] .hth-int__label:is(:nth-of-type(1),:nth-of-type(2)),.hth-int__stage[data-tier="1"] .hth-int__label:not(:nth-of-type(4)),.hth-int__stage[data-tier="2"] .hth-int__label{translate:0 -4.3%}
.hth-int__stage[data-tier="0"] .hth-int__label:is(:nth-of-type(3),:nth-of-type(4)),.hth-int__stage[data-tier="1"] .hth-int__label:nth-of-type(4){opacity:.85}
.hth-int__stamp{position:absolute;left:12%;top:4%;margin:0;padding:4px 10px;border:2px solid #f2c27a;color:#f2c27a;font:700 13px var(--gft-font-mono);letter-spacing:.12em;text-transform:uppercase;transform:rotate(-8deg);opacity:0;transition:opacity .4s}
.hth-int__stage[data-tier="2"] .hth-int__stamp{opacity:1}
.hth-int .hth-card{top:calc(100svh - var(--hth-card-h) - 48px)}
.hth-int__src{position:relative;margin:0;padding:14px 48px;background:#1c2a5c;font:500 13px/1.4 var(--gft-font-mono);color:#d4dbf5;text-align:center}
.hth-int .hth-card{width:min(21vw,300px);background:#141d3ff2;border:1px solid #b9c7f266;box-shadow:0 18px 50px #05081a80}
.hth-int .hth-card--right{margin-left:auto;margin-right:48px}
.hth-int .hth-card__k{color:#f2c27a}
.hth-int .hth-card p:not(.hth-card__k){color:#e6e9f7}
.hth-wind{position:relative;height:24vh;min-height:180px;background:linear-gradient(180deg,#1c2a5c 0%,#163d58 55%,#0e4d4a 100%)}
.hth-wind::before{content:'';position:absolute;left:50%;top:0;width:3.5px;height:56%;margin-left:-1.75px;background:#e0a24a}
.hth-wind::after{content:'';position:absolute;left:calc((100% - min(1440px,100% - 96px)) / 2 + (min(1440px,100% - 96px) - 56px) / 4 - 1.75px);right:50%;top:56%;height:44%;border-top:3.5px solid #e0a24a;border-left:3.5px solid #e0a24a;border-top-left-radius:60px}
.hth-wind__caption{position:absolute;left:calc(50% + 24px);top:30%;margin:0;color:#e7efe9}
/* entrance: shed. The planes open apart from the swatch, labels follow */
:root[data-m-go] .hth-int:not([data-hth-in]) :is(.hth-int__plane,.hth-int__label,.hth-int__readout,.hth-int__wire){opacity:0}
:root[data-m-go] .hth-int[data-hth-in] .hth-int__plane{animation-name:hth-open-shed;animation-duration:700ms;animation-timing-function:cubic-bezier(.2,.8,.2,1);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .hth-int[data-hth-in] .hth-int__label{animation-name:hth-slide-l;animation-duration:420ms;animation-delay:calc(360ms + var(--hth-p) * 70ms);animation-timing-function:var(--hth-ease);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .hth-int[data-hth-in] .hth-int__wire{animation-name:hth-wire-in;animation-duration:520ms;animation-delay:300ms;animation-timing-function:var(--hth-ease);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .hth-int[data-hth-in] .hth-int__readout{animation-name:hth-wipe-up;animation-duration:460ms;animation-delay:240ms;animation-timing-function:var(--hth-ease);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes hth-open-shed{from{opacity:.2;transform:translateY(calc((1.5 - var(--hth-p)) * -118px)) scaleY(.6)}}
@keyframes hth-slide-l{from{opacity:0;transform:translate(-16px,-50%)}to{opacity:1;transform:translate(0,-50%)}}
@keyframes hth-wire-in{from{opacity:0;clip-path:inset(100% 0 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
:root[data-m-go] .hth-int__scan[data-m-on]{animation-name:hth-scan;animation-duration:3.2s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}
@keyframes hth-scan{from{transform:translateY(-36px);opacity:.3}to{transform:translateY(30px);opacity:1}}
:root[data-m-go] .hth-int__svg[data-m-on] .hth-int__pkt{animation-name:hth-rail;animation-duration:2.2s;animation-timing-function:linear;animation-iteration-count:infinite}
@keyframes hth-rail{from{transform:translate(0,0)}to{transform:translate(170px,58px)}}

/* ---------- 7 · the OEE bobbin (forest) ---------- */
.hth-oee{background:radial-gradient(ellipse 40% 50% at 25% 40%,#14605b 0%,#0e4d4a 70%);color:#f6f4ef;padding:0}
.hth-oee::before{content:'';position:absolute;top:0;height:calc(min(74vh,680px) * .06 + 2px);left:calc((100% - min(1440px,100% - 96px)) / 2 + (min(1440px,100% - 96px) - 56px) / 4 - 1.75px);width:3.5px;background:#e0a24a}
.hth-oee__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start;padding-top:0}
.hth-oee__dial{position:relative;height:min(74vh,680px);display:grid;justify-items:center}
.hth-oee__svg{height:100%;width:auto;max-width:100%;overflow:hidden}
.hth-oee__halo{fill:#c98a2b;fill-opacity:.06;stroke:#c98a2b;stroke-opacity:.18}
.hth-oee__flange{transform-box:view-box;transform-origin:180px 180px}
.hth-oee__flange circle{stroke:#cfe6d8;stroke-opacity:.45;stroke-width:2}
.hth-oee__unwind{transform-box:view-box;transform-origin:180px 180px}
.hth-oee__ring{transform-box:view-box;transform-origin:180px 180px}
.hth-oee__track{stroke:#cfe6d8;stroke-opacity:.14;stroke-width:16}
.hth-oee__arc{stroke-width:16;stroke-linecap:butt;transition:stroke-dasharray .45s var(--hth-ease)}
.hth-oee__ring--a .hth-oee__arc{stroke:#e0a24a}.hth-oee__ring--p .hth-oee__arc{stroke:#a9d3bb}.hth-oee__ring--q .hth-oee__arc{stroke:#b9c7f2}
.hth-oee__tail{transition:transform .45s var(--hth-ease)}
.hth-oee__tail circle{fill:#072d2b;stroke-width:2.5}
.hth-oee__cut{stroke-width:2.5;transform-box:view-box;transform-origin:0 0;transition:transform .45s var(--hth-ease)}
.hth-oee__tail--a circle,.hth-oee__tail--a .hth-oee__cut{stroke:#e0a24a}.hth-oee__tail--p circle,.hth-oee__tail--p .hth-oee__cut{stroke:#a9d3bb}.hth-oee__tail--q circle,.hth-oee__tail--q .hth-oee__cut{stroke:#b9c7f2}
.hth-oee__core{position:absolute;left:50%;top:calc(min(74vh,680px) * .36);transform:translate(-50%,-50%);display:grid;justify-items:center;text-align:center}
.hth-oee__core small{font:600 13px var(--gft-font-mono);letter-spacing:.12em;color:var(--hth-mint)}
.hth-oee__core strong{font-size:clamp(56px,min(6.6vw,10.5svh),96px);line-height:1;font-weight:850;letter-spacing:-.06em}
.hth-oee__core span{font:600 13px var(--gft-font-mono);letter-spacing:.08em;text-transform:uppercase;color:#f2c27a}
.hth-oee__legend{position:absolute;left:0;right:0;bottom:4px;display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin:0;font:500 13px var(--gft-font-mono);color:var(--hth-mint)}
.hth-oee__legend span::before{content:'';display:inline-block;width:14px;height:3px;margin-right:6px;vertical-align:middle;background:currentColor}
.hth-oee__lg--a{color:#f2c27a}.hth-oee__lg--p{color:#cfe6d8}.hth-oee__lg--q{color:#d4dbf5}
.hth-oee__panel{padding-top:clamp(28px,7vh,80px);padding-bottom:24px}
.hth-oee__panel .gft-eyebrow{color:var(--hth-mint)}
.hth-oee__panel h2{font-size:clamp(2.2rem,3.6vw,3.9rem);margin-top:12px}
.hth-oee__panel h2 .gft-serif{color:#a9d3bb}
.hth-oee__lede{font-size:17px;line-height:1.5;color:#dbe8e0;margin:14px 0 18px;max-width:46ch}
.hth-oee__row{display:grid;grid-template-columns:120px minmax(0,1fr) 54px;gap:14px;align-items:center;min-height:48px;border-top:1px solid #cfe6d833}
.hth-oee__row label{font-size:16px;font-weight:600}
.hth-oee__row input{width:100%;min-height:44px}
.hth-oee__row--a input{accent-color:#e0a24a}.hth-oee__row--p input{accent-color:#a9d3bb}.hth-oee__row--q input{accent-color:#b9c7f2}
.hth-oee__row output{font:600 17px var(--gft-font-mono);text-align:right}
.hth-oee__loss{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:16px}
.hth-oee__loss>div{position:relative;display:grid;gap:4px;padding:10px 12px;border:1px solid #cfe6d84d;background:#072d2b80;overflow:hidden}
.hth-oee__loss span{font:600 13px/1.25 var(--gft-font-mono);color:var(--hth-mint)}
.hth-oee__loss b{font-size:clamp(22px,1.9vw,28px);font-weight:800;letter-spacing:-.03em}
.hth-oee__lr--a{border-top:3px solid #e0a24a!important}.hth-oee__lr--p{border-top:3px solid #a9d3bb!important}.hth-oee__lr--q{border-top:3px solid #b9c7f2!important}
.hth-oee__good{background:#f6f4ef!important;color:#072d2b}
.hth-oee__good span{color:#2f4a41}
.hth-oee__good i{position:absolute;left:0;right:0;bottom:0;height:4px;background:#2a6e50;transform-origin:0 50%}
.hth-oee__cta{margin-top:18px}
.hth-oee__src{font:500 13px/1.5 var(--gft-font-mono);color:var(--hth-mint);margin-top:14px;max-width:70ch}
.hth-unw{position:relative;height:16vh;min-height:130px;background:linear-gradient(180deg,#0e4d4a 0%,#072d2b 100%)}
.hth-unw::before{content:'';position:absolute;left:calc((100% - min(1440px,100% - 96px)) / 2 + (min(1440px,100% - 96px) - 56px) / 4 - 1.5px);top:0;width:3px;height:60%;background:linear-gradient(180deg,#e0a24a,#a9d3bb)}
.hth-unw::after{content:'';position:absolute;left:calc((100% - min(1440px,100% - 96px)) / 2 + (min(1440px,100% - 96px) - 56px) / 4 - 1.5px);right:calc(50% - 1px);top:60%;height:40%;border-top:3px solid #a9d3bb;border-right:3px solid #a9d3bb;border-top-right-radius:56px}
.hth-unw__caption{position:absolute;left:calc(25% + 24px);top:22%;margin:0}
/* entrance: wind. The rings wind on clockwise, A then P then Q */
:root[data-m-go] .hth-oee:not([data-hth-in]) :is(.hth-oee__ring,.hth-oee__tail,.hth-oee__core,.hth-oee__panel>:not(h2)){opacity:0}
:root[data-m-go] .hth-oee[data-hth-in] .hth-oee__ring{animation-name:hth-wind-on;animation-duration:620ms;animation-delay:calc(var(--hth-r) * 140ms);animation-timing-function:cubic-bezier(.2,.8,.2,1);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .hth-oee[data-hth-in] :is(.hth-oee__tail,.hth-oee__core){animation-name:hth-fade;animation-duration:360ms;animation-delay:520ms;animation-timing-function:linear;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .hth-oee[data-hth-in] .hth-oee__panel>:not(h2){animation-name:hth-rise;animation-duration:460ms;animation-delay:300ms;animation-timing-function:var(--hth-ease);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes hth-wind-on{from{opacity:0;transform:rotate(-160deg) scale(.92)}}
:root[data-m-go] .hth-oee__flange[data-m-on]{animation-name:hth-bobbin;animation-duration:40s;animation-timing-function:linear;animation-iteration-count:infinite}
@keyframes hth-bobbin{to{transform:rotate(360deg)}}

/* ---------- 8 · the register (night) ---------- */
.hth-reg{background:var(--hth-night);color:#f6f4ef;padding:clamp(24px,5svh,56px) 0 0}
.hth-reg__head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:48px;align-items:end}
.hth-reg__head .gft-eyebrow{color:var(--hth-mint);margin-bottom:10px}
.hth-reg__head h2{font-size:clamp(2.2rem,3.8vw,4rem)}
.hth-reg__head h2 .gft-serif{color:#a9d3bb}
.hth-reg__head>p{font-size:17px;line-height:1.5;color:#dbe8e0}
.hth-con{position:relative;height:32vh;min-height:240px;margin-top:clamp(12px,2svh,24px);container-type:size}
.hth-con__svg{position:absolute;inset:0;width:100%;height:100%}
.hth-con__ray{stroke:#a9d3bb;stroke-opacity:.5;stroke-width:1.5;transform-box:view-box;transform-origin:500px 130px;transition:stroke-opacity .4s}
.hth-con[data-door=capabilities] .hth-con__ray--capabilities,.hth-con[data-door=programme] .hth-con__ray--programme,.hth-con[data-door=papers] .hth-con__ray--papers,.hth-con[data-door=tools] .hth-con__ray--tools{stroke:#e0a24a;stroke-opacity:1;stroke-width:3}
.hth-con__in{stroke:#a9d3bb;stroke-width:2.5}
.hth-con__hub{position:absolute;left:50%;top:50%;width:min(30vw,300px);transform:translate(-50%,-50%);display:grid;place-items:center;text-align:center}
.hth-con__hub svg{position:absolute;width:150px;height:150px}
.hth-con__hub svg path{stroke:#a9d3bb;stroke-width:2;fill:#072d2b}
.hth-con__hub p{position:relative;display:grid;gap:2px;margin:0;max-width:none}
.hth-con__hub b{font-size:32px;font-weight:800;letter-spacing:-.04em;line-height:1.05}
.hth-con__hub span{font:600 13px var(--gft-font-mono);color:var(--hth-mint)}
.hth-con__doors{position:absolute;inset:0}
.hth-door{position:absolute;left:var(--hth-x);top:var(--hth-y);transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:6px 16px 6px 10px;border:1px solid #a9d3bb88;background:#072d2b;color:#f6f4ef;font-size:16px;font-weight:650;white-space:nowrap}
.hth-door svg{width:26px;height:26px;stroke:#a9d3bb;stroke-width:1.6}
.hth-door[aria-pressed=true]{background:#f6f4ef;color:#072d2b;border-color:#e0a24a;box-shadow:0 0 0 3px #e0a24a55}
.hth-door[aria-pressed=true] svg{stroke:#9a5a10}
.hth-con__pulse{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#e0a24a;overflow-anchor:none;opacity:0}
.hth-reg__body{display:grid;grid-template-columns:minmax(0,34fr) minmax(0,64fr);gap:2%;align-items:start;margin-top:clamp(12px,2svh,24px);padding-bottom:12vh}
.hth-reg__card{position:sticky;top:96px;height:clamp(420px,58vh,500px);box-sizing:border-box;display:flex;flex-direction:column;gap:10px;padding:22px 24px;border:1px solid #a9d3bb55;background:#0b3633;overflow:hidden}
.hth-reg__door{font:600 13px var(--gft-font-mono);letter-spacing:.08em;text-transform:uppercase;color:#f2c27a}
.hth-reg__doortext{font-size:17px;line-height:1.5;color:#dbe8e0;min-height:7.5em}
.hth-reg__doorlink{font-size:15px}
.hth-reg__item{border-top:1px solid #a9d3bb44;padding-top:12px;display:flex;flex-direction:column;gap:8px}
.hth-reg__id{display:flex;gap:12px;align-items:center;font:600 13px var(--gft-font-mono);color:var(--hth-mint)}
.hth-reg__id .hth-chip[data-ok="1"]{color:#a9d3bb}
.hth-reg__id .hth-chip[data-ok="0"]{color:#f2c27a}
.hth-reg__item h3{font-size:22px;line-height:1.2;letter-spacing:-.02em}
.hth-reg__item p:not(.hth-reg__id){font-size:17px;line-height:1.45;color:#dbe8e0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hth-reg__bar{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.hth-reg__count{font-size:22px;font-weight:700;letter-spacing:-.02em;margin:0}
.hth-reg__count b{font-variant-numeric:tabular-nums}
.hth-reg__field{position:relative;margin-top:14px;height:calc(6 * 68px + 5 * 10px)}
.hth-reg__thread{position:absolute;inset:0;width:100%;height:100%;transform-origin:50% 100%}
.hth-reg__thread path{stroke:#a9d3bb;stroke-opacity:.6;stroke-width:2}
.hth-reg__grid{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:68px;gap:10px 12px}
.hth-reg__grid[hidden]{display:none}
.hth-tile{position:relative;width:100%;height:100%;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:8px;align-content:center;padding:6px 10px 6px 26px;border:1px solid #a9d3bb55;background:#072d2b;color:#f6f4ef;text-align:left;overflow:hidden}
.hth-tile::before{content:'';position:absolute;left:8px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:#072d2b;border:2px solid #a9d3bb;transition:background .25s,border-color .25s}
.hth-tile:hover::before,.hth-tile:focus-visible::before,.hth-tile[aria-pressed=true]::before{background:#e0a24a;border-color:#e0a24a}
.hth-tile[aria-pressed=true]{border-color:#e0a24a;background:#0e4d4a}
.hth-tile__id{grid-row:1/3;align-self:center;font:600 13px var(--gft-font-mono);color:var(--hth-mint)}
.hth-tile__title{font-size:13px;font-weight:650;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hth-tile__state{font:500 13px var(--gft-font-mono);color:#a9d3bb}
.hth-tile__state[data-ok="0"]{color:#f2c27a}
.hth-reg__empty{position:absolute;inset:0 0 auto;padding:18px;border:1px dashed #a9d3bb88;background:#072d2b;font-size:17px;color:#dbe8e0}
.hth-reg__empty[hidden]{display:none}
.hth-reg__note{font:500 13px/1.6 var(--gft-font-mono);color:var(--hth-mint);margin-top:14px;max-width:80ch}
.hth-reg__noscript{font-size:15px;padding-bottom:24px}
/* entrance: knot. Rays tie from the hub to each door, then the beads drop onto the thread */
:root[data-m-go] .hth-reg:not([data-hth-in]) :is(.hth-con__ray,.hth-door,.hth-con__hub,.hth-tile,.hth-reg__card){opacity:0}
:root[data-m-go] .hth-reg[data-hth-in] .hth-con__ray{animation-name:hth-tie;animation-duration:420ms;animation-timing-function:var(--hth-ease);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .hth-reg[data-hth-in] .hth-con__ray:nth-child(2){animation-delay:60ms}:root[data-m-go] .hth-reg[data-hth-in] .hth-con__ray:nth-child(3){animation-delay:120ms}:root[data-m-go] .hth-reg[data-hth-in] .hth-con__ray:nth-child(4){animation-delay:180ms}
:root[data-m-go] .hth-reg[data-hth-in] .hth-door{animation-name:hth-knot-in;animation-duration:400ms;animation-delay:calc(160ms + var(--hth-k) * 60ms);animation-timing-function:var(--hth-ease);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .hth-reg[data-hth-in] .hth-con__hub{animation-name:hth-hub-in;animation-duration:420ms;animation-timing-function:var(--hth-ease);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .hth-reg[data-hth-in] .hth-tile{animation-name:hth-bead;animation-duration:360ms;animation-delay:calc(320ms + min(var(--hth-k), 10) * 25ms);animation-timing-function:var(--hth-ease);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .hth-reg[data-hth-in] .hth-reg__card{animation-name:hth-wipe-up;animation-duration:460ms;animation-delay:240ms;animation-timing-function:var(--hth-ease);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes hth-tie{from{opacity:0;transform:scale(0)}}
@keyframes hth-knot-in{from{opacity:0;transform:translate(-50%,-50%) scale(.6)}to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes hth-hub-in{from{opacity:0;transform:translate(-50%,-50%) scale(.7) rotate(-30deg)}to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes hth-bead{from{opacity:0;transform:translateY(-16px)}}
:root[data-m-go] .hth-con__pulse[data-m-on]{animation-name:hth-ray;animation-duration:3.6s;animation-delay:calc(var(--hth-k) * -.9s);animation-timing-function:cubic-bezier(.4,0,.6,1);animation-iteration-count:infinite}
@keyframes hth-ray{0%{opacity:.2;transform:translate(0,0)}15%{opacity:1}85%{opacity:1}100%{opacity:.2;transform:translate(calc((var(--hth-xn) - 50) * 1cqw),calc((var(--hth-yn) - 50) * 1cqh))}}

/* ---------- 9 · closing: the cloth (night, 100 svh) ---------- */
.hth-close{height:calc(100svh - 0px);min-height:680px;padding-bottom:84px;box-sizing:border-box;background:radial-gradient(ellipse 60% 70% at 68% 46%,#0e4d4a 0%,#072d2b 72%);color:#f6f4ef;overflow:hidden;z-index:2}
.hth-cloth{position:absolute;left:calc((100% - min(1440px,100% - 96px)) / 2 + min(35vw,490px) + 28px);right:calc((100% - min(1440px,100% - 96px)) / 2);top:32px;bottom:94px;display:flex;flex-direction:column;z-index:2}
.hth-cloth__frame{position:relative;flex:1;min-height:0;background:#062624b8;border-inline:1px solid #a9d3bb55;overflow:hidden}
.hth-cloth__svg{position:absolute;inset:0;width:100%;height:100%}
.hth-cloth__warp path{stroke:#a9d3bb;stroke-opacity:.55;stroke-width:1.2}
.hth-cloth__lit{fill:#c98a2b;fill-opacity:0;transition:fill-opacity .45s var(--hth-ease)}
.hth-cloth__weft{stroke:#cfe6d8;stroke-opacity:.52;transition:stroke-opacity .45s var(--hth-ease),stroke .45s}
.hth-cloth__band{transform-box:fill-box;transform-origin:50% 0}
.hth-cloth__selvedge{stroke:#e0a24a;stroke-width:3}
.hth-cloth[data-pick=feasibility] .hth-cloth__band:is([data-band="0"],[data-band="1"]) .hth-cloth__weft,.hth-cloth[data-pick=line] .hth-cloth__band[data-band="2"] .hth-cloth__weft,.hth-cloth[data-pick=data] .hth-cloth__band[data-band="3"] .hth-cloth__weft{stroke:#f6f4ef;stroke-opacity:1}
.hth-cloth[data-pick=feasibility] .hth-cloth__band:is([data-band="0"],[data-band="1"]) .hth-cloth__lit,.hth-cloth[data-pick=line] .hth-cloth__band[data-band="2"] .hth-cloth__lit,.hth-cloth[data-pick=data] .hth-cloth__band[data-band="3"] .hth-cloth__lit{fill-opacity:.22}
.hth-cloth__labels{position:relative;height:48px;flex:none;background:#041f1de8;border:1px solid #a9d3bb55;border-bottom:1px solid #c98a2b66}
.hth-cloth__labels p{position:absolute;left:calc((44 + var(--hth-b) * 184) / 1000 * 100%);top:6px;width:16.8%;margin:0;display:flex;gap:6px;align-items:baseline;flex-wrap:nowrap;font:650 14.5px var(--gft-font-display);color:#f6f4ef;white-space:nowrap}
.hth-cloth__labels span{font:600 13px var(--gft-font-mono);color:#f2c27a}
.hth-cloth__mark{display:none;position:absolute;left:0;top:21px;font:600 12px/1.25 var(--gft-font-mono);font-style:normal;color:#072d2b;background:#f2c27a;padding:1px 6px}
.hth-cloth[data-loom="0"] .hth-cloth__labels p:nth-child(1) .hth-cloth__mark,.hth-cloth[data-loom="1"] .hth-cloth__labels p:nth-child(2) .hth-cloth__mark,.hth-cloth[data-loom="2"] .hth-cloth__labels p:nth-child(3) .hth-cloth__mark,.hth-cloth[data-loom="3"] .hth-cloth__labels p:nth-child(4) .hth-cloth__mark,.hth-cloth[data-loom="4"] .hth-cloth__labels p:nth-child(5) .hth-cloth__mark{display:inline-block}
.hth-cloth{--hth-reed:4}
.hth-cloth[data-reed="0"]{--hth-reed:0}.hth-cloth[data-reed="1"]{--hth-reed:1}.hth-cloth[data-reed="2"]{--hth-reed:2}.hth-cloth[data-reed="3"]{--hth-reed:3}
.hth-cloth__reed{position:absolute;top:4%;bottom:4%;left:0;width:16.8%;pointer-events:none;transform:translateX(calc((44 + var(--hth-reed) * 184) / 1000 * 100% / .168));transition:transform .55s var(--hth-ease)}
.hth-cloth__reed i{position:absolute;inset:0;border-inline:3px solid #f2c27a;background:linear-gradient(90deg,#f2c27a24,#f2c27a08 50%,#f2c27a24)}
.hth-cloth__drag{position:relative;height:46px;flex:none;display:flex;align-items:center;gap:14px;padding-inline:16px;background:#041f1de8;border:1px solid #a9d3bb55;border-top:1px solid #c98a2b66}
.hth-cloth__drag-lbl{font:600 13px var(--gft-font-mono);letter-spacing:.06em;text-transform:uppercase;color:#f2c27a;white-space:nowrap;flex:none}
.hth-cloth__drag input{display:block;flex:1;width:100%;margin:0;height:44px;background:transparent;-webkit-appearance:none;appearance:none;cursor:grab}
.hth-cloth__drag input::-webkit-slider-runnable-track{height:4px;background:#a9d3bb66}
.hth-cloth__drag input::-moz-range-track{height:4px;background:#a9d3bb66}
.hth-cloth__drag input::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-11px;border-radius:4px;background:#f2c27a;border:2px solid #072d2b}
.hth-cloth__drag input::-moz-range-thumb{width:24px;height:24px;border-radius:4px;background:#f2c27a;border:2px solid #072d2b}
.hth-cloth__out{display:none}
.hth-close__panel{position:relative;height:100%;display:flex;align-items:center;pointer-events:none;z-index:3}
.hth-close__box{box-sizing:border-box;pointer-events:auto;width:min(35vw,490px);padding:clamp(16px,2.4svh,24px) 24px;background:#041f1df7;border:1px solid #a9d3bb77;border-left:3px solid #e0a24a;box-shadow:0 24px 70px #01110fcc}
.hth-close__box .gft-eyebrow{color:var(--hth-mint)}
.hth-close__box h2{font-size:clamp(1.9rem,2.9vw,3.1rem);margin-top:8px}
.hth-close__box h2 .gft-serif{color:#a9d3bb}
.hth-close__pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:12px 0 0;padding:0;border:0}
.hth-close__pick legend{font:600 13px var(--gft-font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--hth-mint);margin-bottom:6px;padding:0}
.hth-close__pick button{min-height:46px;padding:6px 8px;border:1px solid #a9d3bb88;background:#072d2b;color:#f6f4ef;font-size:14.5px;font-weight:650;line-height:1.15}
.hth-close__pick button[aria-pressed=true]{background:#f6f4ef;color:#072d2b;border-color:#f2c27a}
.hth-close__verdict{margin-top:12px}
.hth-close__state{display:grid;gap:2px;font-size:clamp(18px,1.5vw,22px);font-weight:750;letter-spacing:-.02em;line-height:1.25}
.hth-close__state span+span{color:#f2c27a}
.hth-close__text{font-size:16.5px;line-height:1.48;color:#e7efe9;margin-top:6px;min-height:5.4em}
.hth-close__cta{display:inline-flex;align-items:center;gap:14px;min-height:46px;margin-top:4px;font-size:16.5px;font-weight:700;color:#f6f4ef;text-decoration:none;background-image:linear-gradient(#e0a24a,#e0a24a);background-size:100% 3px;background-position:0 100%;background-repeat:no-repeat}
.hth-close__cta i{font-style:normal;font-size:20px;color:#f2c27a}
.hth-close__reed{margin-top:10px;padding-top:10px;border-top:1px solid #a9d3bb44}
.hth-close__reed p:first-child{display:flex;gap:10px;align-items:baseline;font:600 13px var(--gft-font-mono);color:var(--hth-mint);text-transform:uppercase;letter-spacing:.06em}
.hth-close__reed b{font:700 15px var(--gft-font-display);color:#f6f4ef;text-transform:none;letter-spacing:0}
.hth-close__ask{font-size:16px;font-weight:650;margin-top:3px}
.hth-close__stext{font-size:14.5px;line-height:1.42;color:#dbe8e0;margin-top:2px;min-height:4em}
.hth-close__join{position:absolute;left:0;right:0;bottom:0;height:82px;background:linear-gradient(180deg,#072d2b00 0%,#041f1de6 45%,#031716 100%);pointer-events:none;z-index:2}
.hth-close__join-svg{position:absolute;inset:0;width:100%;height:100%}
.hth-close__knot{position:absolute;left:calc((100% - min(1440px,100% - 96px)) / 2 + 12px);bottom:12px;display:inline-flex;align-items:center;gap:12px;padding:6px 14px;background:#041f1df2;border:1px solid #e0a24a99;box-shadow:0 10px 28px #01110f99}
.hth-close__knot-ring{position:relative;width:18px;height:18px;border-radius:50%;border:2px solid #f2c27a;display:grid;place-items:center;flex:none}
.hth-close__knot-ring i{width:8px;height:8px;border-radius:50%;background:#e0a24a}
.hth-close__knot-txt{display:grid;gap:1px;font:500 13px/1.25 var(--gft-font-mono);color:#e7efe9}
.hth-close__knot-txt b{font-weight:700;color:#f2c27a;letter-spacing:.04em;text-transform:uppercase}
main:has(#home-close) + .gft-footer{background:#031716;border-top:2px solid #e0a24a88}
main:has(#home-close) + .gft-footer .gft-footer__next{margin-top:20px;padding:28px 28px;background:#062624;border:1px solid #a9d3bb44;border-left:4px solid #e0a24a}
main:has(#home-close) + .gft-footer .gft-footer__next-k{font-size:13.5px;color:#f2c27a}
main:has(#home-close) + .gft-footer .gft-footer__bottom{font-size:14px;color:#cfe6d8}
main:has(#home-close) + .gft-footer .gft-footer__bottom nav{gap:14px}
main:has(#home-close) + .gft-footer .gft-footer__bottom a,main:has(#home-close) + .gft-footer .gft-footer__bottom button{font-size:15px;font-weight:600;color:#f6f4ef;padding:6px 14px;border:1px solid #a9d3bb4d;background:#072d2b}
/* entrance: selvedge-draw. The selvedge draws, the bands weave in left to right, the reed settles */
:root[data-m-go] .hth-close:not([data-hth-in]) :is(.hth-cloth__selvedge,.hth-cloth__band,.hth-cloth__reed,.hth-close__box>:not(h2),.hth-cloth__labels){opacity:0}
:root[data-m-go] .hth-close[data-hth-in] .hth-cloth__selvedge{animation-name:hth-selv;animation-duration:420ms;animation-timing-function:cubic-bezier(.45,0,.2,1);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal;transform-box:fill-box;transform-origin:50% 0}
:root[data-m-go] .hth-close[data-hth-in] .hth-cloth__band{animation-name:hth-weave-in;animation-duration:440ms;animation-delay:calc(150ms + var(--hth-b) * 70ms);animation-timing-function:var(--hth-ease);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .hth-close[data-hth-in] .hth-cloth__reed{animation-name:hth-reed-in;animation-duration:380ms;animation-delay:540ms;animation-timing-function:cubic-bezier(.3,1.4,.5,1);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .hth-close[data-hth-in] :is(.hth-close__box>:not(h2),.hth-cloth__labels){animation-name:hth-rise;animation-duration:440ms;animation-delay:300ms;animation-timing-function:var(--hth-ease);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes hth-selv{from{opacity:.2;transform:scaleY(0)}}
@keyframes hth-weave-in{from{opacity:0;transform:scaleY(.08)}}
@keyframes hth-reed-in{from{opacity:0;transform:translateX(calc((44 + var(--hth-reed) * 184) / 1000 * 100% / .168 + 40%))}}
:root[data-m-go] .hth-cloth__reed i[data-m-on]{animation-name:hth-breathe;animation-duration:2.6s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}
:root[data-m-go] .hth-close__knot-ring[data-m-on]{animation-name:hth-breathe;animation-duration:2.4s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}

/* ---------- headings: fx on the section's arrival ---------- */
:root[data-m-go] [data-hth-act]:not([data-hth-done]) .hth-head:is([data-hth-fx=rise],[data-hth-fx=skew],[data-hth-fx=drop]) .hth-w{clip-path:inset(-.1em -.12em -.2em -.1em)}
:root[data-m-go] [data-hth-act]:not([data-hth-in]) .hth-head .hth-c{opacity:0}
:root[data-m-go] [data-hth-in] .hth-head .hth-c{animation-duration:620ms;animation-delay:var(--hth-d);animation-timing-function:var(--hth-ease);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] [data-hth-in] .hth-head[data-hth-fx=rise] .hth-c{animation-name:hth-fx-rise}
:root[data-m-go] [data-hth-in] .hth-head[data-hth-fx=skew] .hth-c{animation-name:hth-fx-skew}
:root[data-m-go] [data-hth-in] .hth-head[data-hth-fx=drop] .hth-c{animation-name:hth-fx-drop}
:root[data-m-go] [data-hth-in] .hth-head[data-hth-fx=turn] .hth-c{animation-name:hth-fx-turn;transform-origin:50% 100%}
:root[data-m-go] [data-hth-in] .hth-head[data-hth-fx=blur] .hth-c{animation-name:hth-fx-blur}
:root[data-m-go] [data-hth-in] .hth-head[data-hth-fx=wdth] .hth-c{animation-name:hth-fx-wdth;transform-origin:0 100%}
:root[data-m-go] [data-hth-in] .hth-head[data-hth-fx=zoom] .hth-c{animation-name:hth-fx-zoom}
:root[data-m-go] [data-hth-in] .hth-head[data-hth-fx=swing] .hth-c{animation-name:hth-fx-swing;transform-origin:0 50%}
:root[data-m-go] [data-hth-in] .hth-head[data-hth-fx=track] .hth-c{animation-name:hth-fx-track;transform-origin:0 100%}
@keyframes hth-fx-rise{from{transform:translateY(112%)}}
@keyframes hth-fx-skew{from{transform:translateY(112%) skewY(9deg)}}
@keyframes hth-fx-drop{from{transform:translateY(-112%)}}
@keyframes hth-fx-turn{from{opacity:0;transform:perspective(600px) rotateX(-92deg)}}
@keyframes hth-fx-blur{from{opacity:0;filter:blur(10px);transform:translateY(.35em)}}
@keyframes hth-fx-wdth{from{opacity:0;transform:scaleX(.55)}}
@keyframes hth-fx-zoom{from{opacity:0;transform:scale(1.16);filter:blur(8px)}}
@keyframes hth-fx-swing{from{opacity:0;transform:perspective(700px) rotateY(68deg)}}
@keyframes hth-fx-track{from{opacity:0;transform:scaleX(1.12)}}

/* ---------- scroll-linked hand-overs (Chromium, Safari); elsewhere the drawn end state shows ---------- */
@supports (animation-timeline:view()){
 .hth-fray{view-timeline-name:--hth-fray;view-timeline-axis:block}
 .hth-warpin{view-timeline-name:--hth-warpin;view-timeline-axis:block}
 .hth-prog__body{view-timeline-name:--hth-progb;view-timeline-axis:block}
 .hth-step--last{view-timeline-name:--hth-last;view-timeline-axis:block}
 .hth-oee{view-timeline-name:--hth-oeev;view-timeline-axis:block}
 .hth-reg__body{view-timeline-name:--hth-regb;view-timeline-axis:block}
 .hth-pin--fac{timeline-scope:--hth-last}
 :root[data-m-go] .hth-fray svg{animation-name:hth-sweep-down;animation-duration:1ms;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--hth-fray;animation-range-start:entry 0%;animation-range-end:cover 55%}
 :root[data-m-go] .hth-warpin__paper{animation-name:hth-selvedge-rise;animation-duration:1ms;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--hth-warpin;animation-range-start:entry 10%;animation-range-end:cover 55%}
 :root[data-m-go] .hth-warpin__svg{animation-name:hth-sweep-down;animation-duration:1ms;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--hth-warpin;animation-range-start:entry 0%;animation-range-end:cover 50%}
 :root[data-m-go] .hth-fac__picks{animation-name:hth-beat;animation-duration:1ms;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--hth-last;animation-range-start:exit -40%;animation-range-end:exit 0%}
 :root[data-m-go] .hth-iris{animation-name:hth-iris;animation-duration:1ms;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--hth-progb;animation-range-start:exit -10%;animation-range-end:exit 70%}
 /* the caption waits until the iris edge has passed it, so the circle never cuts its words */
 :root[data-m-go] .hth-iris__caption{animation-name:hth-iris-cap;animation-duration:1ms;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--hth-progb;animation-range-start:exit -10%;animation-range-end:exit 70%}
 :root[data-m-go] .hth-oee__unwind{animation-name:hth-unwind;animation-duration:1ms;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--hth-oeev;animation-range-start:exit 0%;animation-range-end:exit 80%}
 :root[data-m-go] .hth-reg__thread{animation-name:hth-compress;animation-duration:1ms;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--hth-regb;animation-range-start:exit 20%;animation-range-end:exit 80%}
}
@keyframes hth-sweep-down{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes hth-selvedge-rise{from{clip-path:polygon(0 100%,6% 100%,12% 100%,18% 100%,24% 100%,30% 100%,36% 100%,42% 100%,48% 100%,54% 100%,60% 100%,66% 100%,72% 100%,78% 100%,84% 100%,90% 100%,96% 100%,100% 100%,100% 100%,0 100%)}to{clip-path:polygon(0 28%,6% 22%,12% 28%,18% 22%,24% 28%,30% 22%,36% 28%,42% 22%,48% 28%,54% 22%,60% 28%,66% 22%,72% 28%,78% 22%,84% 28%,90% 22%,96% 28%,100% 24%,100% 100%,0 100%)}}
@keyframes hth-beat{from{transform:scaleY(1)}to{transform:scaleY(.12)}}
@keyframes hth-iris-cap{0%,64%{opacity:0}72%,100%{opacity:1}}
@keyframes hth-iris{from{clip-path:circle(0% at 70% calc(16px + (46vh - 32px) * .8333))}to{clip-path:circle(150% at 70% calc(16px + (46vh - 32px) * .8333))}}
@keyframes hth-unwind{from{transform:rotate(0)}to{transform:rotate(200deg) scale(.9);opacity:.35}}
@keyframes hth-compress{from{transform:scaleY(1)}to{transform:scaleY(.18)}}
@media (prefers-reduced-motion:reduce){
 .hth-fray svg,.hth-warpin__paper,.hth-warpin__svg,.hth-fac__picks,.hth-iris,.hth-iris__caption,.hth-oee__unwind,.hth-reg__thread{animation-name:none;animation-timeline:auto}
 .hth-iris{clip-path:circle(0% at 70% 50%)}
}

/* ---------- tablet ---------- */
@media (max-width:1100px){
 .hth-open__title{max-width:60vw}
 .hth-loom__readout{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);}
 .hth-loom__go{grid-column:1/-1;min-height:56px}
 .hth-int .hth-card{width:min(32vw,380px)}
}

/* ---------- phone ---------- */
@media (max-width:760px){
 .hth-band,.hth-fray__caption{padding-inline:20px}
 .hth-fray__caption{left:0}
 .hth-warpin__badge{left:20px;right:20px;bottom:10px;max-width:none;padding:8px 12px}
 .hth-open{min-height:calc(100svh - 76px);grid-template-rows:auto auto}
 .hth-fibre{right:-36vw;top:6svh;width:132vw;opacity:.38}
 .hth-fibre__label,.hth-fibre__nodes{display:none}
 .hth-open__head{padding-top:16px;padding-bottom:10px}
 .hth-open__title{font-size:44px;max-width:none;margin-top:10px}
 .hth-open__lede{font-size:16px;margin-top:10px}
 .hth-open__cta{flex-direction:column;align-items:stretch;gap:8px;width:100%;margin-top:12px}
 .hth-open__cta .hth-cta{width:100%;min-height:48px;padding:10px 16px}
 .hth-loom{padding-top:10px}
 .hth-loom__head{display:none}
 .hth-loom__stops{gap:4px}
 .hth-loom__stops button{min-height:44px;min-width:44px;padding:4px 6px;flex-direction:column;gap:0;justify-content:center;width:100%}
 .hth-loom__stops button strong{font-size:13px;display:none}
 .hth-loom__stops button[aria-pressed=true] strong{display:block}
 .hth-loom__stops button span{font-size:13px}
 .hth-loom__readout{grid-template-columns:1fr;gap:4px}
 .hth-loom__ask{font-size:20px;min-height:2.4em}
 .hth-loom__text{font-size:16px;min-height:4.5em}
 .hth-loom__go{min-height:48px;gap:10px}
 .hth-loom__thumbs,.hth-thumb{width:44px;height:44px}
 .hth-band{padding-top:14px}
 .hth-band__head h2{font-size:30px}
 .hth-stage{height:auto;z-index:4;grid-template-rows:auto auto auto}
 .hth-track{margin-top:0;z-index:1}
 .hth-step{height:80svh}
 .hth-step--last{height:120svh}
 .hth-card{position:relative;top:auto;height:auto;width:auto;margin:16px 20px 0!important;padding:16px 18px}
 .hth-card h3{font-size:21px}
 .hth-card p:not(.hth-card__k){font-size:16px;line-height:1.5}
 .hth-gap .hth-band{flex-direction:column;align-items:stretch;gap:8px}
 .hth-pin--gap{--hth-card-h:330px}
 .hth-gap__field{height:34svh;grid-row:3}
 .hth-gap__nums{order:3;gap:20px}
 .hth-gap__num strong{font-size:56px}
 .hth-gap__unknown-pulse{display:none}
 .hth-gap__ctl{grid-row:2;padding:4px 20px 6px;justify-content:stretch;flex-direction:column-reverse;align-items:stretch;gap:4px}
 .hth-gap__scrub{display:none}
 .hth-seg button{flex:1;padding:6px 6px;font-size:14px}
 .hth-gap__hover{text-align:left;font-size:13px;min-height:2.9em}
 .hth-gap__tag--origin,.hth-gap__tag--remainder,.hth-gap__tag--policy{display:none}
 .hth-gap__eq{left:3%;right:3%;top:4%;gap:6px}
 .hth-gap__chip{padding:6px 8px;font-size:13px}
 .hth-gap__chip b{font-size:18px}
 .hth-gap__op{font-size:20px}
 .hth-fac{padding-bottom:24px}
 .hth-fac__stage{grid-template-columns:1fr;grid-template-rows:auto auto auto minmax(0,1fr)}
 .hth-fac .hth-band{flex-direction:column;align-items:stretch;gap:8px}
 .hth-fac__readout{width:auto;padding:8px 12px}
 .hth-fac__readout strong{font-size:18px}
 .hth-fac__readout p:last-child{display:none}
 .hth-fac__draw{grid-row:3;height:30svh;padding:0 12px 8px}
 .hth-fac__beat{display:none}
 .hth-fac__chips{display:flex;gap:8px;padding:0 8px;font:600 13px var(--gft-font-mono);color:#072d2b}
 .hth-fac__chips span{min-width:136px;text-align:center;padding:2px 8px;border:1px solid #c98a2b}
 .hth-fac__tag,.hth-fac__lead,.hth-fac__key{display:none}
 .hth-fac__ctl{grid-column:1;grid-row:2;padding:4px 20px}
 .hth-fac__picker{grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
 .hth-fac__picker legend,.hth-fac__src{display:none}
 .hth-fac__picker button{min-height:44px;font-size:13px;padding:2px;overflow:hidden;text-overflow:ellipsis}
 .hth-pin--fac{--hth-card-h:320px}
 .hth-fac .hth-card{width:auto}
 .hth-fac__beat{left:20px;right:20px;height:40px}
 .hth-prog__bridge-cap{left:20px;right:20px;transform:none;max-width:none;white-space:normal}
 .hth-prog__head{grid-template-columns:1fr}
 .hth-swatch{height:30vh;min-height:300px}
 .hth-swatch__tab{width:auto;padding:0 10px;font-size:15px;background:#072d2bd9;right:auto;bottom:auto;min-height:44px;border-right:0;border-bottom:2px solid #c98a2b}
 .hth-swatch__knots{top:64%}
 .hth-swatch__knots li{gap:4px;font-size:13px}
 .hth-swatch__knots span{display:none}
 .hth-swatch__band.is-on .hth-swatch__knots span{display:inline}
 .hth-swatch__result{right:8px;top:4px;transform:none;font-size:13px;line-height:1.2;padding:4px 8px}
 .hth-prog__bracket-tag{font-size:12px;white-space:normal;text-align:center}
 .hth-prog__panel{grid-template-columns:1fr;gap:12px}
 .hth-prog__card{padding:16px 18px}
 .hth-int__title{font-size:13vw}
 .hth-int .hth-band{flex-direction:column;align-items:stretch;gap:10px}
 .hth-int__readout{width:auto;padding:10px 12px}
 .hth-int__readout strong{display:none}
 .hth-int__picker{margin-top:6px}
 .hth-int__need{display:none}
 .hth-int__picker button{min-height:44px;font-size:13px}
 .hth-int__stack{height:34svh;margin:6px 0 0;align-self:start;justify-self:start;margin-left:20px}
 .hth-int__label{font-size:13px;left:72%}
 .hth-int__src{padding:12px 20px}
 .hth-pin--int{--hth-card-h:300px}
 .hth-int .hth-card{width:auto}
 .hth-oee__in{grid-template-columns:1fr;gap:8px}
 .hth-oee__dial{height:auto;width:min(100%,330px);justify-self:center}
 .hth-oee__svg{width:100%;height:auto}
 .hth-oee__core{top:36%}
 .hth-oee__core strong{font-size:52px}
 .hth-oee__panel{padding-top:0}
 .hth-oee__row{grid-template-columns:96px minmax(0,1fr) 48px}
 .hth-oee__row input{min-height:44px}
 .hth-oee__loss{grid-template-columns:repeat(2,minmax(0,1fr))}
 .hth-oee__loss b{font-size:20px}
 .hth-oee__cta .hth-cta{width:100%}
 .hth-unw__caption,.hth-wind__caption{left:20px;right:20px;top:auto;bottom:10px}
 .hth-reg__head{grid-template-columns:1fr;gap:12px}
 .hth-con{height:28svh;min-height:220px}
 .hth-con__hub{width:60vw}
 .hth-con__hub svg{width:110px;height:110px}
 .hth-con__hub b{font-size:24px}
 .hth-door{min-height:44px;padding:4px 10px 4px 6px;font-size:13px}
 .hth-door svg{width:20px;height:20px}
 .hth-reg__body{grid-template-columns:1fr;gap:12px}
 .hth-reg__card{position:relative;top:auto;height:30svh;min-height:250px;padding:14px 16px}
 .hth-reg__doortext{min-height:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:16px}
 .hth-reg__item h3{font-size:19px}
 .hth-reg__field{height:auto}
 .hth-reg__grid{grid-template-columns:1fr;grid-auto-rows:52px;gap:6px}
 .hth-reg__thread{display:none}
 .hth-seg--reg{width:100%}
 .hth-close{height:auto;min-height:100svh;padding-bottom:92px;display:flex;flex-direction:column}
 .hth-cloth{position:relative;left:auto;right:auto;top:auto;bottom:auto;height:42svh;margin:20px 20px 24px}
 .hth-cloth__labels{height:34px}
 .hth-cloth__labels p{font-size:12.5px;gap:4px}
 .hth-cloth__mark{display:none!important}
 .hth-close__panel{height:auto;padding-bottom:24px}
 .hth-close__box{width:100%;padding:16px}
 .hth-close__pick{grid-template-columns:1fr}
 .hth-close__state{font-size:20px}
 .hth-close__knot{left:20px;right:20px;bottom:10px}
 .hth-stage .hth-band .gft-eyebrow{display:none}
 .hth-band__head h2{font-size:26px}
 .hth-gap__stage{height:clamp(440px,57svh,500px);grid-template-rows:auto auto minmax(0,1fr)}
 .hth-gap__field{height:auto}
 .hth-gap__num strong{font-size:46px}
 .hth-gap__num span{min-height:2.8em}
 .hth-gap__hover{min-height:1.45em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
 .hth-fac__stage{height:clamp(440px,57svh,500px);grid-template-rows:auto auto minmax(0,1fr)}
 .hth-fac__draw{height:auto!important}
 .hth-fac__readout strong{min-height:2.4em}
 .hth-int__stage{height:clamp(440px,57svh,500px);grid-template-rows:auto minmax(0,1fr)}
 .hth-int__stack{height:100%!important;max-height:100%;margin:4px auto 6px!important;justify-self:center!important}
 .hth-gap__stage,.hth-int__stage{height:430px}
 .hth-fac__stage{height:470px}
 .hth-pin--gap,.hth-pin--int{--hth-rest:442px}
 .hth-pin--fac{--hth-rest:482px}
 .hth-card{position:sticky;top:var(--hth-rest)}
 .hth-card p:not(.hth-card__k){font-size:16px;line-height:1.45}
 .hth-card .gft-cite{min-height:44px}
 .hth-gap__ctl{min-width:0;overflow:hidden}
 .hth-gap__hover{width:100%}
 .hth-fac__picker{grid-template-columns:repeat(3,minmax(0,1fr))}
 .hth-fac__picker button{min-height:44px;font-size:14px}
 .hth-fac__fam small{display:none}
 .hth-fac__readout strong{font-size:17px;min-height:2.4em}
 .hth-int__stack{height:100%!important;justify-self:end!important;margin:4px 4px 6px 0!important}
 .hth-int__label{left:auto;right:79%;flex-direction:row-reverse;text-align:right}
 .hth-int__stamp{left:30%}
 .hth-unw__caption,.hth-wind__caption{left:auto;right:20px;max-width:58%;text-align:right}
 .hth-wind::before{height:100%}
 .hth-wind::after,.hth-unw::after{display:none}
 .hth-unw::before{left:calc(50% - 1.5px);height:100%}
 .hth-oee::before{left:calc(50% - 1.75px);height:28px}
 .hth-swatch__knots li{left:calc(var(--hth-x) * .78)}
 .hth-swatch__result{max-width:37vw;opacity:0}
 .hth-swatch[data-on=feasibility] [data-hth-band=feasibility] .hth-swatch__result,.hth-swatch[data-on=performance] [data-hth-band=performance] .hth-swatch__result,.hth-swatch[data-on=digital] [data-hth-band=digital] .hth-swatch__result{opacity:1}
 .hth-caption{padding:4px 8px;background:#072d2bd9;color:#e7efe9}
 .hth-warpin__caption{background:transparent;color:#072d2b;padding:0}
 .hth-int .hth-card{top:var(--hth-rest)}
 .hth-cloth__out{display:none}
 .hth-gap__num span{height:2.8em;overflow:hidden}
}