/* FERRUMNEST WORKS — sample 03 (metal machining)
   Palette and type are the identity of this artwork: black ground, one orange
   accent, condensed display face, monospaced body. Do not add a second accent.

   Type, two scripts on purpose:
   Latin keeps Oswald (display) and IBM Plex Mono (body) — that pairing is the
   voice of the page. Japanese has no glyphs in either face, so before the
   Japanese families below were declared every kana and kanji fell through to
   the Windows generic and was painted in MS Gothic — a 1990s bitmap-derived
   monospace. Noto Sans JP is loaded for it, with the platform gothics behind. */

:root{
  --bg:#0b0c0d;
  --ink:#f2f2ee;
  --acc:#f15a24;
  --paper:#e8e7e2;
  --stone:#dedcd6;
  --dark:#181a1d;
  --night:#101112;
  --body:"IBM Plex Mono",ui-monospace,Consolas,"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,monospace;
  --display:Oswald,"Arial Narrow","Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,sans-serif;
  --headoff:86px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
@media(max-width:820px){:root{--headoff:82px}}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);overflow-x:clip}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
figure{margin:0}
section{scroll-margin-top:150px}

.demo{
  position:fixed;z-index:99;left:12px;bottom:12px;display:flex;gap:12px;align-items:center;
  padding:9px 13px;border:1px solid currentColor;
  background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);
  font:600 12px/1 var(--body);letter-spacing:.08em;border-radius:999px;
}
/* The pill's own label is Latin, its two links are Japanese. Tracking that
   flatters small caps opens visible holes between kana, so it stops here. */
.demo a{text-decoration:underline;letter-spacing:.01em;transition:opacity .25s ease}
.skip{position:fixed;left:8px;top:-80px;z-index:120;background:#fff;color:#000;padding:10px}
.skip:focus{top:8px}
:focus-visible{outline:3px solid #4f8cff;outline-offset:4px}

.eyebrow{display:block;margin:0;font:600 13px/1.5 var(--body);letter-spacing:.16em;text-transform:uppercase}
.arrow::after{content:"↗"}

/* ── scroll reveal ───────────────────────────────────────────────────────────
   Covering uses clip-path, lifting uses transform. opacity is never used here:
   it blinds every observer that decides whether a block is on screen.
   The hidden state is scoped to `.js` so a script failure can never hide copy. */
.js .reveal{
  transform:translateY(22px);
  clip-path:inset(0 0 12% 0);
  transition:transform .85s var(--ease),clip-path .85s var(--ease);
}
.js .reveal.seen{transform:none;clip-path:inset(0 0 0 0)}

/* ── fixed head ──────────────────────────────────────────────────────────── */
.forge-head{
  height:74px;position:fixed;z-index:20;top:0;left:0;right:0;
  background:#0b0c0df2;backdrop-filter:blur(10px);border-bottom:1px solid #ffffff25;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:0 28px;font-size:13px;
}
.forge-head b{font:700 22px var(--display);letter-spacing:.05em}
.forge-head .desktop{display:flex;align-items:center;gap:10px;letter-spacing:.14em;color:#cfcec8}
.forge-head .desktop em{font-style:normal;letter-spacing:.01em}
.forge-head .desktop i{
  display:block;width:9px;height:9px;border-radius:50%;background:var(--acc);
  animation:beacon 2.4s ease-in-out infinite;
}
/* progress of the page, drawn as a machine feed bar. A pseudo element on
   purpose: a real child here would sit beside the wordmark and close the gap. */
.forge-head::after{
  content:"";position:absolute;left:0;bottom:-1px;height:2px;
  width:var(--progress,0%);background:var(--acc);
}

/* ── 1. hero ─────────────────────────────────────────────────────────────── */
.metal-hero{
  position:relative;overflow:clip;display:flex;
  margin-top:var(--headoff);min-height:calc(100svh - var(--headoff) - 44px);
  padding:6vh 4vw 5vh;
}
.metal-hero>img{position:absolute;inset:0;filter:grayscale(1) contrast(1.3)}
.metal-hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(96deg,#000d,#000a 34%,#0000 76%);
}
.metal-hero .scan{
  display:block;position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,#0000 calc(50% - 1px),#f15a24 calc(50% - 1px) calc(50% + 1px),#0000 calc(50% + 1px));
  animation:scan 6.5s cubic-bezier(.55,0,.45,1) infinite;
}
.hud{
  position:absolute;z-index:3;top:22%;right:4vw;
  width:clamp(96px,13vw,190px);height:auto;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
}
.hud .hud-ring circle{stroke:#f2f2ee3d;stroke-width:1.2}
.hud .hud-tick path{stroke:#f2f2ee66;stroke-width:1.6}
.hud .hud-cross path{stroke:#f15a24;stroke-width:1.4;stroke-dasharray:5 6}
.hud .hud-mark path{stroke:#f15a24;stroke-width:2.4}
.hero-copy{position:relative;z-index:2;display:flex;flex-direction:column;flex:1;width:100%}
.metal-hero .eyebrow{margin:0 0 auto;color:#e2e1db}
.metal-hero h1{
  font:700 clamp(64px,9.4vw,132px)/1.15 var(--display);
  letter-spacing:-.04em;margin:22px 0 0;
}
/* max-content keeps each line's box on the glyphs, so the cut mark starts where
   the word actually ends instead of at the far edge of the heading block. */
.metal-hero h1 i{
  display:block;position:relative;font-style:normal;width:max-content;max-width:100%;
  animation:lineIn .85s var(--ease) backwards;
}
.metal-hero h1 i:nth-child(2){animation-delay:.11s}
.metal-hero h1 i:nth-child(3){animation-delay:.22s}
.metal-hero h1 i::after{
  content:"";position:absolute;left:calc(100% + 18px);top:52%;
  width:clamp(28px,7vw,140px);height:3px;
  background:var(--acc);transform:scaleX(1);transform-origin:left center;
  animation:cut .7s var(--ease) .5s backwards;
}
/* Three bare numbers read as noise to the person this page is written for, so
   each figure carries the Japanese word for what it measures above it. */
.hero-spec{
  list-style:none;margin:26px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:14px 26px;max-width:min(100%,620px);
}
.hero-spec li{
  display:grid;grid-template-columns:auto auto;column-gap:8px;row-gap:2px;
  align-items:baseline;border-left:2px solid var(--acc);padding-left:12px;
}
.hero-spec em{
  grid-column:1/-1;font:600 13px/1.4 var(--body);font-style:normal;
  letter-spacing:.01em;color:#eceae4;
}
.hero-spec b{font:600 clamp(22px,2.6vw,34px)/1 var(--display);letter-spacing:.01em}
.hero-spec span{font:600 13px var(--body);letter-spacing:.06em;color:#d8d7d1}
.cue{display:inline-flex;align-items:center;gap:10px;margin-top:24px;font:600 13px var(--body);letter-spacing:.14em;color:#d8d7d1}
.cue i{display:block;width:1px;height:30px;background:currentColor;animation:cue 2.3s ease-in-out infinite}

/* ── shared stage shell ──────────────────────────────────────────────────── */
.stage{max-width:1320px;margin:22px auto;border-radius:34px;overflow:hidden}
.stage h2{font:600 clamp(40px,7vw,92px)/1.25 var(--display);letter-spacing:-.03em;margin:0}
.stage-copy{display:flex;flex-direction:column;justify-content:center}
.stage-copy>*{margin:0}
.stage-copy h2{margin-top:10px}
.stage-copy p{margin-top:22px;max-width:540px;line-height:1.95}
.stage dl{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid;margin:34px 0 0}
.stage dl div{padding:20px 0}
.stage dt{font:600 13px var(--body);letter-spacing:.12em}
.stage dd{font:600 25px var(--display);letter-spacing:.01em;margin:8px 0 0}

/* horizontal fill bars, used by the tolerance scale and the uptime meters */
.bar{display:block;position:relative;height:12px;overflow:hidden}
.bar i{
  display:block;position:absolute;inset:0;
  transform:scaleX(0);transform-origin:left center;
  transition:transform 1.2s var(--ease);
}
.js .reveal.seen .bar i{transform:scaleX(var(--k,1))}

/* ── 2. toolpath ─────────────────────────────────────────────────────────── */
.stage-path{
  background:var(--dark);color:var(--ink);
  display:grid;grid-template-columns:1.02fr .98fr;gap:4vw;padding:5vw;align-items:center;
}
.path-art{position:relative}
.path-art svg{display:block;width:100%;height:auto;fill:none;stroke-linecap:round;stroke-linejoin:round}
.art-grid path{stroke:#ffffff12;stroke-width:1}
.art-blank path{stroke:#f2f2ee4d;stroke-width:1.4}
.art-pass path{stroke:#f2f2ee8a;stroke-width:1.5}
.art-lead path{stroke:#f2f2ee55;stroke-width:1.4;stroke-dasharray:7 7}
.art-entry circle{stroke:var(--acc);stroke-width:2}
.art-corner path{stroke:var(--acc);stroke-width:2.6}
.art-tool{stroke:var(--acc);stroke-width:5;stroke-dasharray:34 966;animation:travel 7.5s linear infinite}
.js .path-art .art-blank path,
.js .path-art .art-pass path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.7s ease}
.js .path-art.seen .art-blank path,
.js .path-art.seen .art-pass path{stroke-dashoffset:0}
.js .path-art .art-pass path:nth-child(2){transition-delay:.22s}
.js .path-art .art-pass path:nth-child(3){transition-delay:.44s}
.path-art figcaption{
  margin-top:18px;border-top:1px solid #ffffff26;padding-top:12px;
  font:600 13px var(--body);letter-spacing:.12em;color:#b9b8b2;
}

/* ── 3. cutting ──────────────────────────────────────────────────────────── */
.stage-cut{
  background:var(--paper);color:var(--night);
  display:grid;grid-template-columns:1fr 1fr;gap:4vw;padding:4vw;align-items:center;
}
.scale{margin-top:34px;border-top:1px solid #1011122e;padding-top:24px}
.scale-lead{margin:0 0 20px;font:400 14px/1.85 var(--body)}
.scale-row{display:grid;grid-template-columns:64px 1fr 76px;gap:10px;align-items:center;margin-top:12px}
.scale-row b{font:600 13px var(--body);letter-spacing:normal}
.scale-row em{font:600 14px var(--body);font-style:normal;text-align:right;letter-spacing:.02em}
.scale-row .bar{background:#10111212;border:1px solid #10111233}
.scale-row .bar i{background:var(--night)}
.scale-row+.scale-row .bar i{background:var(--acc)}
.wipe{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:1;align-self:center;width:100%}
.wipe img{filter:grayscale(1) contrast(1.08);transition:filter .5s ease,transform .8s ease}
.wipe span{
  display:block;position:absolute;right:16px;bottom:16px;
  background:var(--acc);color:var(--night);padding:9px 13px;
  font:600 13px var(--body);letter-spacing:.06em;
}

/* ── 4. measuring (orange face — only near-black type is legible here) ─────
   Two independent column stacks, not a two-by-two grid. In a grid the tall
   square photograph set the height of its whole row and left a hole of dead
   orange under the copy on wide screens; a column can only ever end early. */
.stage-inspect{
  background:var(--acc);color:var(--night);
  display:grid;grid-template-columns:1fr 1fr;gap:4vw;padding:6vw;
}
.inspect-col{display:flex;flex-direction:column;gap:clamp(28px,3.2vw,44px);min-width:0}
.spec-grid{display:flex;flex-direction:column;gap:14px}
.spec-grid b{font:700 clamp(92px,10.5vw,180px)/.85 var(--display);letter-spacing:-.02em}
.spec-copy{display:flex;flex-direction:column}
.spec-copy>*{margin:0}
.spec-copy h2{margin-top:10px}
.spec-copy p{margin-top:20px;line-height:1.95;max-width:520px}
/* the ratio is only a starting height: the photograph grows to whatever the
   taller column needs, so neither stack can end in a slab of bare orange. */
.inspect-shot{position:relative;aspect-ratio:4/3;flex:1 1 auto;overflow:hidden;border-radius:24px;width:100%}
.inspect-shot figcaption{
  position:absolute;left:0;right:0;bottom:0;background:#101112eb;color:var(--ink);
  padding:12px 16px;font:600 13px var(--body);letter-spacing:.08em;
}
/* label — value — instrument. The value now sits next to the thing it
   qualifies instead of being flung to the far edge of a 1fr column. */
.gauge-list{list-style:none;margin:0;padding:0;max-width:520px}
.gauge-list li{
  display:grid;grid-template-columns:minmax(72px,auto) minmax(118px,auto) minmax(0,1fr);
  gap:14px;align-items:baseline;border-top:1px solid #10111247;padding:16px 0;
}
.gauge-list li:last-child{border-bottom:1px solid #10111247}
.gauge-list b{font:600 18px var(--display);letter-spacing:normal}
.gauge-list em{font:600 19px var(--body);font-style:normal;letter-spacing:.01em}
.gauge-list span{font:400 13px var(--body)}
.probe{display:flex;align-items:center;gap:26px}
/* A roundness chart, not a radar sweep. The three lobes are the signature a
   chucked part actually leaves; the needle is the probe, driven by scroll. */
.round-chart{width:min(190px,46%);flex:none}
.round-chart svg{display:block;width:100%;height:auto;fill:none;stroke-linecap:round;stroke-linejoin:round}
.rc-band circle{stroke:#10111266;stroke-width:1.3;stroke-dasharray:5 6}
.rc-spoke path{stroke:#10111233;stroke-width:1}
.rc-mean{stroke:#1011124d;stroke-width:1.2}
.rc-trace{stroke:var(--night);stroke-width:2.8}
.rc-probe{stroke:#10111299;stroke-width:2.4;transform-box:view-box;transform-origin:100px 100px;rotate:var(--sweep,0deg)}
.rc-hub{fill:var(--night);stroke:none}
.js .probe .rc-trace{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.9s ease}
.js .probe.seen .rc-trace{stroke-dashoffset:0}
.round-chart figcaption{margin-top:12px;font:600 13px var(--body);letter-spacing:.08em}
.probe-stat{display:flex;flex-direction:column;gap:6px;margin:0}
.probe-stat strong{font:700 clamp(52px,6vw,80px)/1 var(--display);white-space:nowrap;letter-spacing:-.01em}
.probe-stat span{font:600 13px var(--body);letter-spacing:.01em}

/* ── 5. traceability ─────────────────────────────────────────────────────── */
.stage-trace{background:var(--stone);color:var(--night);padding:5vw}
.stage-trace header{display:flex;flex-direction:column;max-width:780px}
.stage-trace header>*{margin:0}
.stage-trace h2{margin-top:10px}
.stage-trace header p{margin-top:22px;line-height:1.95}
.trace-line{
  list-style:none;margin:56px 0 0;padding:0;position:relative;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px;
}
/* The rail is drawn per step, so it starts and stops on the nodes themselves
   instead of running off the edge of the panel. */
.trace-line li{display:flex;flex-direction:column;gap:9px;position:relative;min-width:0}
.trace-line li:not(:last-child)::after{
  content:"";position:absolute;left:54px;right:-22px;top:26px;height:2px;background:var(--night);
  transform:scaleX(0);transform-origin:left center;transition:transform .6s var(--ease);
}
.js .trace-line.seen li:not(:last-child)::after{transform:scaleX(1)}
.js .trace-line.seen li:nth-child(2)::after{transition-delay:.18s}
.js .trace-line.seen li:nth-child(3)::after{transition-delay:.36s}
.js .trace-line.seen li:nth-child(4)::after{transition-delay:.54s}
.node{
  display:grid;place-items:center;width:54px;height:54px;border-radius:50%;
  background:var(--stone);border:2px solid var(--night);position:relative;z-index:1;
  transition:background .3s ease;
}
.node svg{
  display:block;width:34px;height:34px;fill:none;stroke:var(--night);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s ease;
}
.js .trace-line .node svg path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s ease,stroke .3s ease}
.js .trace-line.seen .node svg path{stroke-dashoffset:0}
.js .trace-line.seen li:nth-child(2) svg path{transition-delay:.14s}
.js .trace-line.seen li:nth-child(3) svg path{transition-delay:.28s}
.js .trace-line.seen li:nth-child(4) svg path{transition-delay:.42s}
.js .trace-line.seen li:nth-child(5) svg path{transition-delay:.56s}
.trace-line b{font:600 13px var(--body);letter-spacing:.12em;color:#4a4a46}
.trace-line li>span{font:500 clamp(19px,2vw,25px) var(--display);letter-spacing:.01em}
.trace-line small{font:400 13px/1.7 var(--body);color:#3c3c38}

/* ── 6. supply line ──────────────────────────────────────────────────────── */
.stage-line{background:var(--dark);padding:5vw}
.stage-line header{display:flex;flex-direction:column;max-width:800px;padding-top:10px}
.stage-line header>*{margin:0}
.stage-line h2{margin-top:10px}
.stage-line header p{margin-top:22px;line-height:1.95;color:#d5d4ce}
.stage-line ol{list-style:none;padding:0;margin:44px 0 0}
.stage-line li{
  display:grid;grid-template-columns:66px 58px minmax(0,1fr) auto;gap:20px;align-items:center;
  border-top:1px solid #ffffff33;padding:24px 0;
}
.stage-line li:last-child{border-bottom:1px solid #ffffff33}
.stage-line li b{font:500 clamp(30px,3.4vw,52px)/1 var(--display);color:var(--acc);transition:color .3s ease}
.line-mark{display:block;width:58px;height:58px}
.line-mark svg{display:block;width:100%;height:100%;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* The note used to be its own right-aligned column, which on a wide screen left
   640px of nothing between a sector and the words describing it. It is now
   locked under its own name and cannot drift away from it again. */
.line-name{display:block;min-width:0;font:500 clamp(26px,4vw,55px)/1.12 var(--display)}
.line-name small{display:block;margin-top:9px;font:400 13px/1.6 var(--body);letter-spacing:normal;color:#b9b8b2}
.line-code{font:600 13px var(--body);font-style:normal;letter-spacing:.14em;color:#9a998f;text-align:right}
.meters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin-top:52px}
.meter{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:baseline}
.meter b{font:600 13px var(--body);letter-spacing:.01em;color:#e6e5df}
.meter em{font:700 22px var(--display);font-style:normal;color:var(--acc)}
.meter .bar{grid-column:1/-1;background:#ffffff12;border:1px solid #ffffff2b}
.meter .bar i{background:var(--acc)}

/* ── 7. request ──────────────────────────────────────────────────────────── */
.rfq{
  background:var(--paper);color:var(--night);padding:12vh 5vw;
  display:grid;grid-template-columns:1.15fr .85fr;gap:5vw;align-items:center;
}
.rfq-copy{display:flex;flex-direction:column;align-items:flex-start}
.rfq-copy>*{margin:0}
.rfq h2{font:700 clamp(46px,7.6vw,104px)/1.2 var(--display);letter-spacing:-.025em;margin:10px 0 0}
.rfq-take{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:14px;width:100%;max-width:520px}
.rfq-take li{font:600 17px var(--body);border-top:1px solid #1011122e;padding-top:12px}
.rfq-take small{display:block;font:400 13px var(--body);color:#4a4a46;margin-top:6px;letter-spacing:.01em}
/* The only call to action on the page. It used to be set smaller than the list
   directly above it. Its height is built from padding rather than min-height,
   because the shared stylesheet resets min-height to a 44px tap floor below
   821px and would otherwise shrink the button back down. */
.rfq .cta{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  width:100%;max-width:520px;margin-top:38px;
  background:var(--acc);color:var(--night);border:2px solid var(--night);
  padding:27px 26px;font:600 clamp(19px,1.7vw,26px)/1.25 var(--body);letter-spacing:.01em;
  box-shadow:9px 9px 0 var(--night);
  transition:background .3s ease,color .3s ease,box-shadow .25s ease,translate .25s ease;
}
.rfq .cta::after{font-size:1.15em;line-height:1}
.rfq-art{position:relative}
.rfq-art svg{display:block;width:100%;height:auto;fill:none;stroke:var(--night);stroke-linecap:round;stroke-linejoin:round}
.tb-frame path{stroke-width:1.6}
.tb-tick path{stroke-width:1.4;opacity:.55}
.tb-part path{stroke-width:1.6}
.tb-center path{stroke-width:1;stroke-dasharray:9 5 2 5;opacity:.6}
.tb-block path{stroke-width:1.4}
.tb-dim path{stroke-width:1;opacity:.85}
.tb-arrow path{fill:var(--night);stroke:none}
.tb-proj path,.tb-proj circle{stroke-width:1.2}
.tb-text text{fill:var(--night);stroke:none;font:600 9.4px var(--body);letter-spacing:.02em;text-anchor:middle}
.tb-text .tb-left{text-anchor:start}
.js .rfq-art .tb-frame path,
.js .rfq-art .tb-part path,
.js .rfq-art .tb-block path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s ease}
.js .rfq-art.seen .tb-frame path,
.js .rfq-art.seen .tb-part path,
.js .rfq-art.seen .tb-block path{stroke-dashoffset:0}
.rfq-art figcaption{
  margin-top:16px;border-top:1px solid #1011122e;padding-top:12px;
  font:600 13px var(--body);letter-spacing:.12em;color:#3f3f3b;
}

footer{
  padding:34px 28px;display:grid;grid-template-columns:1fr 1fr auto;gap:14px;
  font-size:13px;border-top:1px solid #ffffff1f;
}
footer b{font:600 15px var(--display);letter-spacing:.05em}
footer span{color:#b9b8b2;letter-spacing:.06em}

/* ── motion ──────────────────────────────────────────────────────────────── */
@keyframes beacon{0%,100%{scale:1;opacity:1}50%{scale:.55;opacity:.34}}
@keyframes scan{0%{translate:0 -52%}100%{translate:0 52%}}
@keyframes cue{0%,100%{translate:0 0}55%{translate:0 9px}}
@keyframes lineIn{from{clip-path:inset(0 0 100% 0);translate:0 16px}to{clip-path:inset(0 0 0 0);translate:0 0}}
/* backwards fill only holds the `from` frame; the resting style must already be
   the finished state or the mark draws itself and then vanishes. */
@keyframes cut{from{transform:scaleX(0)}}
@keyframes travel{to{stroke-dashoffset:-1000}}

/* Touch screens have no hover. Everything that reacts to a pointer lives here,
   otherwise the state sticks after a tap and never lets go. */
@media (hover:hover) and (pointer:fine){
  .demo a:hover{opacity:.72}
  .wipe:hover img{filter:none;transform:scale(1.04)}
  .stage-line li:hover b{color:var(--ink)}
  .trace-line li:hover .node{background:var(--night)}
  .trace-line li:hover .node svg{stroke:var(--stone)}
  .rfq .cta:hover{background:var(--night);color:var(--paper);box-shadow:2px 2px 0 var(--night);translate:7px 7px}
}

/* ── narrower than a laptop: every split panel becomes one column ────────── */
@media(max-width:1023px){
  .stage-path,.stage-cut,.stage-inspect,.rfq{grid-template-columns:minmax(0,1fr)}
  .path-art{max-width:540px;width:100%}
  .wipe,.inspect-shot,.probe,.rfq-art{max-width:620px;width:100%}
  /* the two stacks dissolve so picture and copy keep alternating down the page */
  .inspect-col{display:contents}
  .stage-inspect .spec-grid{order:1}
  .stage-inspect .inspect-shot{order:2}
  .stage-inspect .gauge-list{order:3}
  .stage-inspect .probe{order:4}
  .stage-inspect{gap:44px}
  .rfq{gap:44px}
  .rfq-art{margin-top:8px}
}

@media(max-width:720px){
  .demo{left:8px;bottom:8px;max-width:calc(100vw - 16px);font-size:12px}
  .desktop{display:none!important}
  .forge-head b{font-size:17px;letter-spacing:.02em}

  .stage{margin:10px;border-radius:20px}
  .stage-path,.stage-trace,.stage-line{padding:34px 22px}
  .stage-cut{padding:28px 22px;gap:30px}
  .stage-inspect{padding:38px 22px;gap:36px}
  .rfq{padding:70px 22px;gap:34px}

  /* min-height, never height: on a short screen the copy is taller than one
     viewport, and `height` plus `overflow:clip` put the scroll cue permanently
     out of reach — it was cut off 18px below the floor at 320x568. */
  .metal-hero{padding:32px 22px 30px;min-height:calc(100svh - var(--headoff) - 44px);height:auto}
  /* The headline sits over the middle of the photograph on a phone, so a second
     veil is laid from the bottom. The pixel ruler paints the same two layers. */
  .metal-hero::after{
    background:linear-gradient(96deg,#000d,#000a 34%,#0000 76%),
               linear-gradient(180deg,#0000 26%,#0009 72%,#000c);
  }
  .metal-hero .eyebrow{max-width:min(72%,300px)}
  .hero-spec{max-width:min(78%,340px);gap:12px 18px}
  .hud{top:auto;bottom:26px;right:22px;width:96px}

  .trace-line{grid-template-columns:minmax(0,1fr);gap:0;margin-top:34px}
  .trace-line li{
    display:grid;grid-template-columns:54px minmax(0,1fr);
    column-gap:18px;row-gap:4px;padding:14px 0;
  }
  .trace-line li:not(:last-child)::after{
    left:26px;right:auto;top:54px;bottom:-16px;width:2px;height:auto;
    transform:scaleY(0);transform-origin:center top;
  }
  .js .trace-line.seen li:not(:last-child)::after{transform:scaleY(1)}
  .trace-line .node{grid-row:span 3}

  .stage-line li{grid-template-columns:44px 48px minmax(0,1fr);gap:6px 14px;padding:20px 0}
  .stage-line li b{grid-column:1;grid-row:1}
  .stage-line .line-mark{grid-column:2;grid-row:1;width:48px;height:48px}
  .stage-line .line-name{grid-column:3;grid-row:1}
  .stage-line .line-code{grid-column:3;grid-row:2;text-align:left}
  .meters{grid-template-columns:minmax(0,1fr);gap:20px;margin-top:36px}

  .probe{gap:20px}
  .round-chart{width:min(160px,44%)}
}

@media(max-width:560px){
  /* The drawing is the whole argument of this panel. Below this width it runs
     to both edges of the screen so its annotations clear the 12px floor. */
  .rfq-art svg{width:calc(100% + 44px);max-width:none;margin-inline:-22px}
  .tb-text text{font-size:10.6px}
}

@media(max-width:480px){
  .hero-spec{max-width:min(84%,280px);gap:10px 16px}
  .hud{width:84px;bottom:22px}
  .scale-row{grid-template-columns:56px minmax(0,1fr) 70px;gap:8px}
  .gauge-list li{grid-template-columns:minmax(52px,auto) minmax(86px,auto) minmax(0,1fr);gap:9px}
  .gauge-list b{font-size:16px}
  .gauge-list em{font-size:16px}
  /* the shared stylesheet pins every closing headline to 32px here, which made
     the last line of the page the smallest h2 on it. */
  section.rfq h2{font-size:clamp(44px,9.6vw,46px)!important;line-height:1.14!important}
  footer{grid-template-columns:1fr;gap:10px}
}

/* Short screens: headline, three figures and the cue have to share about 440px.
   Everything steps down together instead of one thing spilling out. */
@media(max-height:720px) and (max-width:720px){
  .metal-hero{padding:20px 22px 22px}
  .metal-hero h1{font-size:clamp(46px,13vw,64px);margin-top:14px}
  .hero-spec{margin-top:18px;gap:8px 16px}
  .cue{margin-top:16px}
  .cue i{height:20px}
  .hud{width:80px;bottom:18px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{transform:none!important;clip-path:none!important}
  .js .reveal .bar i{transform:scaleX(var(--k,1))!important}
  .js .trace-line li:not(:last-child)::after{transform:none!important}
  .js .path-art .art-blank path,.js .path-art .art-pass path,
  .js .trace-line .node svg path,
  .js .probe .rc-trace,
  .js .rfq-art .tb-frame path,.js .rfq-art .tb-part path,.js .rfq-art .tb-block path{
    stroke-dasharray:none!important;stroke-dashoffset:0!important;
  }
  .metal-hero h1 i::after{transform:scaleX(1)!important}
}