/* MF Fastener — home page styles */
body{
  font-family:var(--fb); color:var(--txt); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(1100px 600px at 75% -10%, rgba(255,255,255,.05), transparent 60%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.014) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(25deg, rgba(0,0,0,.18) 0 1px, transparent 1px 9px),
    var(--coal);
}
/* ---------- utility bar ---------- */
.util{background:#0e1011;color:#9aa1a5;font-family:var(--fm);font-size:12px;border-bottom:1px solid var(--hairline)}
/* ---------- header ---------- */
header{position:sticky;top:0;z-index:60;
  background:linear-gradient(180deg, rgba(20,22,24,.98), rgba(20,22,24,.92));
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--hairline)}
.btn.blood{background:linear-gradient(180deg,var(--crimson-bright),var(--crimson-deep));color:#fff;border-color:#4f0a12}
.btn.blood:hover{filter:brightness(1.12)}
/* ---------- drawing-sheet ticks (gold) ---------- */
.sheet{position:relative;border:1px solid var(--hairline)}
.sheet::before,.sheet::after,.sheet .tick::before,.sheet .tick::after{content:"";position:absolute;width:14px;height:14px;border-color:var(--gold);border-style:solid}
.sheet::before{top:-1px;left:-1px;border-width:2px 0 0 2px}
.sheet::after{top:-1px;right:-1px;border-width:2px 2px 0 0}
.sheet .tick::before{bottom:-1px;left:-1px;border-width:0 0 2px 2px}
.sheet .tick::after{bottom:-1px;right:-1px;border-width:0 2px 2px 0}
/* ---------- hero ---------- */
.hero{padding:76px 0 0;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:auto -10% -40% -10%;height:70%;
  background:radial-gradient(60% 100% at 50% 100%, rgba(160,20,35,.28), transparent 70%);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:0;position:relative}
.hero-copy{padding:26px 56px 64px 0}
.hero h1{font-size:clamp(48px,6.2vw,94px);margin:22px 0 10px;color:#fff}
.hero h1 .q{color:var(--gold);text-shadow:0 0 34px rgba(217,169,63,.35)}
.tagline{font-family:var(--fd);font-weight:700;text-transform:uppercase;font-size:clamp(20px,2.3vw,30px);letter-spacing:.08em;color:#d9dde0;margin:0 0 18px}
.tagline .q{color:var(--gold);text-shadow:0 0 22px rgba(217,169,63,.35)}
.hero p.lede{font-size:18px;color:#c3c8cb;max-width:52ch;margin-bottom:36px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.hero-photo{position:relative;min-height:460px;background:#0e1011}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:contrast(1.08) saturate(.92);z-index:1}
.hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg, var(--coal) 0%, transparent 22%),linear-gradient(0deg, rgba(20,22,24,.55), transparent 45%)}
.hero-photo .cap{position:absolute;left:0;bottom:0;background:var(--crimson);color:#fff;font-family:var(--fm);font-size:11px;letter-spacing:.1em;padding:9px 14px;z-index:3}
.plate-note{position:absolute;inset:0;display:none;align-items:center;justify-content:center;color:#6c7479;font-family:var(--fm);font-size:12px;letter-spacing:.12em;text-align:center;padding:20px;z-index:1}
.img-missing img{display:none}
.img-missing .plate-note{display:flex}
/* brushed silver certification band */
.certband{
  background:
   repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 2px, rgba(255,255,255,0) 2px 6px),
   linear-gradient(180deg,#eef1f2,#c3c9cd);
  color:#191c1f;border-top:1px solid #8f979c;border-bottom:1px solid #8f979c}
.certband .wrap{display:grid;grid-template-columns:repeat(3,1fr)}
.certband .tb{padding:20px 26px;border-right:1px solid rgba(20,25,28,.18)}
.certband .tb:last-child{border-right:0}
.certband .k{font-family:var(--fm);font-size:10.5px;letter-spacing:.16em;color:#5b636a;text-transform:uppercase;margin-bottom:4px}
.certband .v{font-weight:800;font-size:16px;letter-spacing:.01em}
.certband .v em{font-style:normal;color:var(--crimson)}
/* ---------- sections ---------- */
section{padding:92px 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:46px;flex-wrap:wrap}
.sec-head h2{font-size:clamp(40px,4.6vw,62px);color:#fff;margin-top:14px}
.sec-head h2 span{color:var(--gold)}
.sec-head .more{font-family:var(--fm);font-size:13px;letter-spacing:.08em;color:var(--gold-bright);border-bottom:1px solid var(--gold);padding-bottom:3px;white-space:nowrap}
.sec-head .more:hover{color:#fff}
/* range tiles — crimson */
.range-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:900px){.range-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.range-grid{grid-template-columns:1fr}}
.range-tile{position:relative;background:linear-gradient(165deg,#a81726,#7c101c);border:1px solid rgba(233,197,101,.22);padding:24px 22px 20px;min-height:150px;display:flex;flex-direction:column;justify-content:space-between;transition:transform .18s ease, box-shadow .18s ease}
.range-tile:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(160,20,35,.35)}
.range-tile::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--gold);transition:width .22s ease}
.range-tile:hover::after{width:100%}
.range-tile .idx{font-family:var(--fm);font-size:11px;color:var(--gold-bright);letter-spacing:.12em}
.range-tile h3{font-family:var(--fd);font-weight:700;text-transform:uppercase;font-size:26px;line-height:1;margin:10px 0 8px;color:#fff}
.range-tile .std{font-family:var(--fm);font-size:11px;color:#f0c9cd;letter-spacing:.04em}
.range-tile.gold{background:linear-gradient(165deg,#3a3018,#241d0c);border-color:var(--gold)}
.range-tile.gold h3{color:var(--gold-bright)}
.range-tile.gold .std{color:#cbb26a}
/* puzzle-piece entrance for range tiles */
@media (prefers-reduced-motion: no-preference){
.range-grid .range-tile{opacity:0;transform:translate(var(--dx,0),var(--dy,40px)) rotate(var(--rt,0deg)) scale(.9);transition:transform .65s cubic-bezier(.2,.85,.25,1),opacity .45s ease,box-shadow .18s ease}
.range-grid.in .range-tile{opacity:1;transform:none}
.range-grid .range-tile:nth-child(1){--dx:-60px;--dy:20px;--rt:-4deg;transition-delay:.05s}
.range-grid .range-tile:nth-child(2){--dx:0;--dy:-50px;--rt:3deg;transition-delay:.12s}
.range-grid .range-tile:nth-child(3){--dx:40px;--dy:-30px;--rt:-2deg;transition-delay:.19s}
.range-grid .range-tile:nth-child(4){--dx:60px;--dy:20px;--rt:4deg;transition-delay:.26s}
.range-grid .range-tile:nth-child(5){--dx:-50px;--dy:40px;--rt:3deg;transition-delay:.33s}
.range-grid .range-tile:nth-child(6){--dx:-20px;--dy:60px;--rt:-3deg;transition-delay:.40s}
.range-grid .range-tile:nth-child(7){--dx:20px;--dy:60px;--rt:2deg;transition-delay:.47s}
.range-grid .range-tile:nth-child(8){--dx:50px;--dy:40px;--rt:-4deg;transition-delay:.54s}
.range-grid .range-tile:nth-child(9){--dx:-60px;--dy:30px;--rt:2deg;transition-delay:.61s}
.range-grid .range-tile:nth-child(10){--dx:-20px;--dy:70px;--rt:-2deg;transition-delay:.68s}
.range-grid .range-tile:nth-child(11){--dx:20px;--dy:70px;--rt:3deg;transition-delay:.75s}
.range-grid .range-tile:nth-child(12){--dx:60px;--dy:30px;--rt:-3deg;transition-delay:.82s}
}
/* ---------- interactive building assembly ---------- */
.build-wrap{margin-top:78px;display:grid;grid-template-columns:.92fr 1.08fr;gap:44px;align-items:center}
.build-copy h3{font-family:var(--fd);font-weight:800;text-transform:uppercase;font-size:clamp(30px,3.6vw,48px);color:#fff;line-height:.94;margin:12px 0 12px}
.build-copy h3 span{color:var(--gold)}
.build-copy p{color:#c3c8cb;font-size:15px;max-width:48ch;margin-bottom:20px}
.stage-chips{display:flex;flex-direction:column;gap:8px;margin-bottom:22px}
.stage-chip{display:flex;gap:14px;align-items:center;text-align:left;background:rgba(255,255,255,.03);border:1px solid var(--hairline);padding:12px 14px;cursor:pointer;font-family:var(--fm);font-size:11.5px;letter-spacing:.08em;color:#cfd4d7;transition:all .15s ease}
.stage-chip b{color:var(--gold-bright);font-weight:600}
.stage-chip:hover{border-color:var(--gold);color:#fff}
.stage-chip.on{border-color:var(--gold);background:rgba(217,169,63,.08);color:#fff}
.build-stage{background:linear-gradient(180deg,#1d2125,#16191c);padding:16px;position:relative}
.build-stage svg{width:100%;height:auto;display:block}
.build-label{position:absolute;left:20px;top:16px;font-family:var(--fm);font-size:11px;letter-spacing:.14em;color:var(--gold-bright);z-index:2}
#buildSvg .p{opacity:0;transform-box:fill-box;transform-origin:center;transition:opacity .4s ease, transform .6s cubic-bezier(.2,.85,.25,1)}
#buildSvg .p.on{opacity:1;transform:none}
#buildSvg .drop{transform:translateY(-80px)}
#buildSvg .rise{transform:translateY(60px)}
#buildSvg .slideL{transform:translateX(-90px)}
#buildSvg .slideR{transform:translateX(90px)}
#buildSvg .bolt.on{animation:boltPulse .7s ease}
@keyframes boltPulse{0%{transform:scale(.2)}55%{transform:scale(1.8)}100%{transform:scale(1)}}
#buildSvg .sc{opacity:0;transform-box:view-box;transform-origin:var(--ax) var(--ay);transform:scale(.85);transition:opacity .35s ease,transform .7s cubic-bezier(.3,.7,.25,1)}
#buildSvg .sc.on{opacity:1;transform:scale(1)}
#buildSvg .sc.on.fly{transform:translate(var(--dx),var(--dy)) scale(var(--k));transition:transform .85s cubic-bezier(.55,.06,.35,1)}
#buildSvg .sc.landed{opacity:0;transition:opacity .12s ease}
#buildSvg .sc-cap{opacity:0;transition:opacity .3s ease;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:2px;fill:#e9c565}
#buildSvg .sc-cap.on{opacity:1}
@media (prefers-reduced-motion: reduce){#buildSvg .sc,#buildSvg .sc-cap{display:none}}
@media (max-width:1020px){.build-wrap{grid-template-columns:1fr}}
@media (prefers-reduced-motion: reduce){#buildSvg .p{opacity:1;transform:none;transition:none;animation:none}}
/* featured products — red cards, silver photo plates */
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:900px){.feat-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.feat-grid{grid-template-columns:1fr}}
.pcard{background:linear-gradient(180deg,#9d1322,#700e19);border:1px solid rgba(233,197,101,.22);display:flex;flex-direction:column;transition:transform .18s ease, box-shadow .18s ease}
.pcard:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(0,0,0,.5)}
.pcard .ph{position:relative;aspect-ratio:1/1;margin:10px;background:linear-gradient(180deg,#f2f4f5,#d5dadd);overflow:hidden}
.pcard .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
.pcard .body{padding:8px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.pcard .code{font-family:var(--fm);font-size:11px;color:var(--gold-bright);letter-spacing:.1em}
.pcard h3{font-size:17px;font-weight:700;line-height:1.25;color:#fff}
.pcard .meta{font-size:13px;color:#f0c9cd;margin-bottom:10px}
.pcard .add{margin-top:auto;font-weight:800;font-size:12.5px;letter-spacing:.06em;border:1px solid var(--gold);padding:11px 14px;background:transparent;color:var(--gold-bright);cursor:pointer;text-align:center;transition:all .15s ease;text-transform:uppercase;font-family:var(--fb)}
.pcard .add:hover{background:var(--gold);color:#221803}
/* manufacturing — deep crimson band */
.mfg{background:
  repeating-linear-gradient(115deg, rgba(255,255,255,.02) 0 2px, transparent 2px 7px),
  linear-gradient(180deg,#8e1220,#5f0c15)}
.mfg .eyebrow{color:#e8b9bf}
.mfg .eyebrow::before{background:var(--gold)}
.mfg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14)}
.mfg-cell{background:rgba(60,7,13,.55);padding:30px 28px;backdrop-filter:blur(2px)}
.mfg-cell .num{font-family:var(--fm);font-size:12px;color:var(--gold-bright);letter-spacing:.12em}
.mfg-cell h3{font-family:var(--fd);text-transform:uppercase;font-weight:700;font-size:28px;margin:12px 0 8px;color:#fff}
.mfg-cell p{font-size:14px;color:#efd3d6;line-height:1.55}
/* technical — coal panel with gold links */
.tech{background:var(--coal2);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);padding:70px 0}
.tech-grid{display:grid;grid-template-columns:1.1fr repeat(3,1fr);gap:28px;align-items:start}
.tech h2{color:#fff;font-size:clamp(32px,3.6vw,46px)}
.tech p.sub{color:var(--mut);font-size:14.5px;margin-top:12px;max-width:34ch}
.tech-link{border-top:2px solid var(--gold);padding-top:16px;display:block}
.tech-link:hover h3{color:var(--gold-bright)}
.tech-link .k{font-family:var(--fm);font-size:10.5px;letter-spacing:.16em;color:var(--mut);text-transform:uppercase}
.tech-link h3{font-size:18px;font-weight:700;margin:6px 0 6px;color:#eef2f3;transition:color .15s ease}
.tech-link p{font-size:13.5px;color:var(--mut)}
/* quality */
.quality-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.quality h2{color:#fff}
.quality ul{list-style:none;margin-top:26px;border-top:1px solid var(--hairline)}
.quality li{display:flex;gap:16px;padding:15px 4px;border-bottom:1px solid var(--hairline);font-size:15px;color:#ccd1d3}
.quality li .m{font-family:var(--fm);color:var(--gold);font-size:12px;letter-spacing:.08em;min-width:64px;padding-top:2px}
.q-photo{position:relative;min-height:440px}
.q-photo .inner{position:absolute;inset:0;background:#0e1011;overflow:hidden}
.q-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:contrast(1.06)}
.q-photo .inner::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg, rgba(20,22,24,.5), transparent 50%)}
.q-photo .cap{position:absolute;right:-1px;bottom:-1px;background:var(--crimson);color:#fff;font-family:var(--fm);font-size:11px;letter-spacing:.1em;padding:9px 14px;z-index:3}
/* notice */
.notice{padding:0 0 92px}
.notice-strip{border:1px solid var(--gold);background:linear-gradient(180deg,rgba(217,169,63,.08),rgba(217,169,63,.03));padding:22px 28px;display:flex;gap:20px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.notice-strip .t{display:flex;gap:16px;align-items:baseline;flex-wrap:wrap}
.notice-strip .k{font-family:var(--fm);font-size:11px;letter-spacing:.14em;color:var(--gold-bright);text-transform:uppercase;white-space:nowrap}
.notice-strip p{font-size:15px;font-weight:500;color:#e8e6df}
.notice-strip a.tel{font-family:var(--fm);font-weight:600;color:var(--gold-bright);border-bottom:1px solid var(--gold)}
/* CTA band */
.cta{background:
  radial-gradient(700px 300px at 20% 0%, rgba(217,169,63,.12), transparent 60%),
  linear-gradient(180deg,#23262a,#17191c);
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.cta .wrap{display:grid;grid-template-columns:1.4fr .6fr;gap:40px;align-items:center;padding-top:92px;padding-bottom:92px}
.cta h2{font-size:clamp(42px,5.2vw,68px);color:#fff}
.cta .right{display:flex;flex-direction:column;gap:12px;align-items:stretch}
.cta .alt{font-family:var(--fm);font-size:12.5px;color:var(--mut);text-align:center}
/* footer — red gradient */

/* toast + reveal */
.toast{position:fixed;bottom:24px;right:24px;background:#0e1011;color:#fff;padding:14px 20px;font-size:14px;border-left:3px solid var(--gold);opacity:0;transform:translateY(8px);transition:all .25s ease;z-index:99;pointer-events:none}
.rv{opacity:0;transform:translateY(18px);transition:opacity .5s ease, transform .5s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}
@media (max-width:1020px){
  .hero-grid{grid-template-columns:1fr}
  .hero-copy{padding:26px 0 48px}
  .hero-photo{min-height:340px}
  .range-grid{grid-template-columns:repeat(2,1fr)}
  .feat-grid{grid-template-columns:repeat(2,1fr)}
  .mfg-grid{grid-template-columns:repeat(2,1fr)}
  .tech-grid{grid-template-columns:1fr 1fr}
  .quality-grid{grid-template-columns:1fr}
  .cta .wrap{grid-template-columns:1fr}
  .f-top{grid-template-columns:1fr 1fr}
  .certband .wrap{grid-template-columns:1fr}
  .certband .tb{border-right:0;border-bottom:1px solid rgba(20,25,28,.18)}
  .certband .tb:last-child{border-bottom:0}
}
@media (max-width:1024px){
  .burger{display:inline-flex;flex-direction:column;gap:5px;background:none;border:0;padding:10px;cursor:pointer}
  .burger span{width:24px;height:2px;background:#e8e6df}
  nav.main{display:none;position:absolute;top:100%;left:0;right:0;background:#141618;border-bottom:1px solid var(--hairline);flex-direction:column;align-items:stretch;padding:10px 20px 20px}
  .nav-toggle:checked ~ nav.main{display:flex}
  .header-cta{display:none}
  .feat-grid{grid-template-columns:1fr}
  .mfg-grid{grid-template-columns:1fr}
  .tech-grid{grid-template-columns:1fr}
  section{padding:64px 0}
}
#journey{scroll-margin-top:96px}
#journey.flash .jn-stage{box-shadow:0 0 0 2px var(--gold),0 30px 80px rgba(0,0,0,.55);transition:box-shadow .4s ease}
#toSteps svg{transform:translateY(0);animation:nudge 1.9s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
@media (prefers-reduced-motion: reduce){#toSteps svg{animation:none}}
.jn{padding:0 0 96px}
.jn .jn-grid{display:grid;grid-template-columns:1.25fr .9fr;gap:44px;align-items:center}
@media(max-width:960px){.jn .jn-grid{grid-template-columns:1fr}}
.jn h3{font-size:clamp(30px,3.4vw,44px);line-height:1.04;margin:14px 0 14px;color:#fff;letter-spacing:-.01em}
.jn h3 span{color:var(--gold)}
.jn p.lead{color:#cfd3d6;font-size:15.5px;line-height:1.6;max-width:52ch}
.jn .jn-stage{position:relative;background:#0d0f11;border:1px solid rgba(233,197,101,.28);box-shadow:0 30px 80px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.03)}
.jn .jn-stage::before{content:"";position:absolute;inset:0;background:
  repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 2px,transparent 2px 7px),
  radial-gradient(120% 90% at 50% 110%,rgba(160,20,35,.18),transparent 60%);pointer-events:none}
.jn svg{display:block;width:100%;height:auto}
.jn .jn-hud{position:absolute;left:14px;top:12px;font-family:var(--fm);font-size:10.5px;letter-spacing:.16em;color:var(--gold-bright);text-transform:uppercase}
.jn .jn-hud b{display:inline-block;width:8px;height:8px;background:var(--crimson-bright);border-radius:50%;margin-right:8px;animation:jnBlink 1.2s infinite}
@keyframes jnBlink{50%{opacity:.25}}
.jn .jn-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.06)}
.jn .jn-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--crimson-bright),var(--gold));transition:width .2s linear}
.jn .steps{display:flex;flex-direction:column;gap:6px;margin:22px 0 22px}
.jn .step{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:12px;text-align:left;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);color:#aeb5ba;padding:11px 14px;cursor:pointer;font-family:var(--fm);font-size:11px;letter-spacing:.1em;text-transform:uppercase;transition:.25s}
.jn .step b{color:var(--gold);font-weight:600}
.jn .step em{font-style:normal;color:#6f777d;font-size:10px}
.jn .step:hover{border-color:rgba(233,197,101,.4);color:#fff}
.jn .step.on{background:linear-gradient(90deg,rgba(160,20,35,.35),rgba(160,20,35,.08));border-color:var(--crimson-bright);color:#fff}
.jn .step.on em{color:var(--gold-bright)}
.jn-snd{display:inline-flex;align-items:center;gap:9px;background:transparent;border:1px solid var(--hairline);color:#8f979d;font-family:var(--fm);font-size:10.5px;letter-spacing:.14em;padding:8px 13px;cursor:pointer;transition:.2s}
.jn-snd:hover{border-color:var(--gold);color:var(--gold-bright)}
.jn-snd .ico{display:inline-flex}
.jn-snd .waves{opacity:0}
.jn-snd.on{border-color:var(--gold);color:var(--gold-bright)}
.jn-snd.on .waves{opacity:1}
.jn-snd.on .cross{opacity:0}
.jn .jn-snd{display:inline-flex;align-items:center;gap:9px;margin-top:20px;background:transparent;border:1px solid var(--hairline);color:#8f979d;font-family:var(--fm);font-size:10.5px;letter-spacing:.14em;padding:8px 13px;cursor:pointer;transition:.2s}
.jn .jn-snd:hover{border-color:var(--gold);color:var(--gold-bright)}
.jn .jn-snd .ico{display:inline-flex}
.jn .jn-snd .waves{opacity:0}
.jn .jn-snd.on{border-color:var(--gold);color:var(--gold-bright)}
.jn .jn-snd.on .waves{opacity:1}
.jn .jn-snd.on .cross{opacity:0}
.jn .jn-foot{font-family:var(--fm);font-size:10.5px;letter-spacing:.12em;color:#7d868c;text-transform:uppercase;margin-top:12px}
/* stage groups */
.jn .st{opacity:0;transition:opacity .45s ease;pointer-events:none}
.jn .st.on{opacity:1}
/* shared metal */
.jn .metal{fill:url(#jSteel)}
.jn .dark{fill:url(#jDark)}
/* --- 1 CUT --- */
.jn .on .bar-in{animation:jBarIn 1s cubic-bezier(.2,.7,.2,1) both}
@keyframes jBarIn{from{transform:translateX(-520px)}to{transform:translateX(0)}}
.jn .on .saw{animation:jSaw 3.2s ease-in-out both;transform-origin:470px 120px}
@keyframes jSaw{0%,30%{transform:translateY(-170px)}55%,75%{transform:translateY(0)}100%{transform:translateY(-170px)}}
.jn .on .saw-disc{animation:jSpin .5s linear infinite;transform-origin:470px 120px}
@keyframes jSpin{to{transform:rotate(360deg)}}
.jn .on .spark{animation:jSpark 3.2s linear both}
@keyframes jSpark{0%,40%{opacity:0}45%,70%{opacity:1}75%,100%{opacity:0}}
.jn .on .offcut{animation:jOff 3.2s ease-in both}
@keyframes jOff{0%,72%{transform:translate(0,0) rotate(0)}100%{transform:translate(60px,140px) rotate(25deg)}}
.jn .on .kerf{animation:jKerf 3.2s linear both}
@keyframes jKerf{0%,45%{opacity:0}72%,100%{opacity:1}}
/* --- 2 BEND --- */
.jn .on .hook{animation:jBend 3.2s cubic-bezier(.4,0,.2,1) both;transform-origin:230px 200px}
@keyframes jBend{0%,25%{transform:rotate(0)}70%,100%{transform:rotate(-90deg)}}
.jn .on .ram{animation:jRam 3.2s cubic-bezier(.4,0,.2,1) both;transform-origin:230px 200px}
@keyframes jRam{0%,25%{transform:rotate(0)}70%,100%{transform:rotate(-90deg)}}
.jn .on .bend-heat{animation:jBHeat 3.2s ease both}
@keyframes jBHeat{0%{opacity:0}20%,60%{opacity:.85}100%{opacity:0}}
/* --- 3 THREAD --- */
.jn .on .die-top{animation:jDieT 3.2s ease-in-out both}
.jn .on .die-bot{animation:jDieB 3.2s ease-in-out both}
@keyframes jDieT{0%,15%{transform:translateY(-70px)}35%,75%{transform:translateY(0)}95%,100%{transform:translateY(-70px)}}
@keyframes jDieB{0%,15%{transform:translateY(70px)}35%,75%{transform:translateY(0)}95%,100%{transform:translateY(70px)}}
.jn .on .thr{stroke-dasharray:22;stroke-dashoffset:22;animation:jThr .9s linear forwards}
@keyframes jThr{to{stroke-dashoffset:0}}
.jn .on .thr-wrap{animation:jThrShow 3.2s linear both}
@keyframes jThrShow{0%,38%{opacity:0}42%,100%{opacity:1}}
.jn .on .die-top,.jn .on .die-bot{}
.jn .on .roll{animation:jRoll 3.2s linear both}
@keyframes jRoll{0%,38%{transform:translateX(0)}75%{transform:translateX(-14px)}100%{transform:translateX(0)}}
/* --- 4 HEAT TREAT --- */
.jn .on .glow{animation:jGlow 3.4s ease both}
@keyframes jGlow{0%{opacity:0}18%,42%{opacity:1}62%,100%{opacity:0}}
.jn .on .dip{animation:jDip 3.4s cubic-bezier(.4,0,.2,1) both}
@keyframes jDip{0%,40%{transform:translateY(0)}58%,100%{transform:translateY(118px)}}
.jn .on .steam{animation:jSteam 3.4s ease-out both}
@keyframes jSteam{0%,55%{opacity:0;transform:translateY(0)}65%{opacity:.9}100%{opacity:0;transform:translateY(-60px)}}
.jn .on .wave{animation:jWave 1.6s ease-in-out infinite alternate}
@keyframes jWave{to{transform:translateX(-18px)}}
.jn .on .furn-flame{animation:jFlame .35s ease-in-out infinite alternate;transform-origin:50% 100%}
@keyframes jFlame{to{transform:scaleY(1.25) scaleX(.92)}}
/* --- 5 TEST --- */
.jn .on .needle{animation:jNeedle 3.2s cubic-bezier(.3,.8,.3,1) both;transform-origin:150px 260px}
@keyframes jNeedle{0%,15%{transform:rotate(-120deg)}80%,100%{transform:rotate(38deg)}}
.jn .on .grip-t{animation:jGripT 3.2s ease both}
.jn .on .grip-b{animation:jGripB 3.2s ease both}
@keyframes jGripT{0%,15%{transform:translateY(0)}80%,100%{transform:translateY(-26px)}}
@keyframes jGripB{0%,15%{transform:translateY(0)}80%,100%{transform:translateY(26px)}}
.jn .on .strain{animation:jStrain 3.2s ease both;transform-origin:570px 200px}
@keyframes jStrain{0%,15%{transform:scaleY(1)}80%,100%{transform:scaleY(1.09)}}
.jn .on .rd{animation:jRd 3.2s steps(1) both}
@keyframes jRd{0%,30%{opacity:0}31%,100%{opacity:1}}
.jn .on .rd2{animation:jRd2 3.2s steps(1) both}
@keyframes jRd2{0%,55%{opacity:0}56%,100%{opacity:1}}
.jn .on .rd3{animation:jRd3 3.2s steps(1) both}
@keyframes jRd3{0%,78%{opacity:0}79%,100%{opacity:1}}
/* --- 6 CERTIFY --- */
.jn .on .doc{animation:jDoc .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes jDoc{from{transform:translateY(60px);opacity:0}to{transform:translateY(0);opacity:1}}
.jn .on .ln{stroke-dasharray:300;stroke-dashoffset:300;animation:jLn 1.1s ease-out forwards}
@keyframes jLn{to{stroke-dashoffset:0}}
.jn .on .stamp{animation:jStamp 3.2s cubic-bezier(.2,1.4,.3,1) both;transform-origin:538px 318px}
@keyframes jStamp{0%,55%{transform:scale(2.6) rotate(-18deg);opacity:0}70%,100%{transform:scale(1) rotate(-12deg);opacity:1}}
.jn .on .bolt-fin{animation:jFin 1.2s ease both}
@keyframes jFin{from{transform:translateX(-40px);opacity:0}to{transform:none;opacity:1}}
/* --- 7 PACK --- */
.jn .on .pk-arm{animation:jPkArm 3.4s ease-in-out both;transform-origin:410px 203px}
@keyframes jPkArm{0%,8%{transform:rotate(-38deg)}22%,30%{transform:rotate(4deg)}45%{transform:rotate(-38deg)}58%,66%{transform:rotate(4deg)}80%,100%{transform:rotate(-30deg)}}
.jn .on .pk-b1{animation:jPkDrop 3.4s ease-in both}
.jn .on .pk-b2{animation:jPkDrop2 3.4s ease-in both}
.jn .on .pk-b3{animation:jPkDrop3 3.4s ease-in both}
@keyframes jPkDrop{0%,6%{opacity:0;transform:translate(120px,-52px)}24%,100%{opacity:1;transform:none}}
@keyframes jPkDrop2{0%,40%{opacity:0;transform:translate(120px,-52px)}60%,100%{opacity:1;transform:none}}
@keyframes jPkDrop3{0%,14%{opacity:0;transform:translate(120px,-52px)}36%,100%{opacity:1;transform:none}}
.jn .on .pk-strap{animation:jPkStrap 3.4s cubic-bezier(.2,.8,.3,1) both}
@keyframes jPkStrap{0%,68%{opacity:0;transform:scaleY(0);transform-origin:50% 0}80%,100%{opacity:1;transform:scaleY(1)}}
.jn .on .pk-tag{animation:jPkTag 3.4s cubic-bezier(.2,1.5,.4,1) both;transform-origin:331px 213px}
@keyframes jPkTag{0%,84%{opacity:0;transform:scale(.4) rotate(-14deg)}94%,100%{opacity:1;transform:none}}
/* --- 8 LOAD --- */
.jn .on .ld-truck{animation:jLdMove 3.6s cubic-bezier(.35,0,.3,1) both}
@keyframes jLdMove{0%{transform:translateX(-170px)}26%,54%{transform:translateX(46px)}74%,88%{transform:translateX(150px)}100%{transform:translateX(-60px)}}
.jn .on .ld-mast{animation:jLdLift 3.6s cubic-bezier(.4,0,.3,1) both}
@keyframes jLdLift{0%,26%{transform:translateY(0)}46%,86%{transform:translateY(-38px)}100%{transform:translateY(0)}}
.jn .on .ld-load{animation:jLdIn 3.6s ease-in-out both}
@keyframes jLdIn{0%,74%{opacity:1;transform:translateX(0)}84%,100%{opacity:0;transform:translateX(150px)}}
.jn .on .ld-door{animation:jLdDoor 3.6s ease both;transform-origin:373px 225px}
@keyframes jLdDoor{0%,82%{transform:none}94%,100%{transform:translateX(-16px) rotate(-12deg)}}
.jn .on .ld-beep{animation:jBeep .5s steps(1) infinite}
@keyframes jBeep{0%,49%{opacity:1}50%,100%{opacity:.15}}
/* --- 9 DISPATCH --- */
.jn .on .dp-van{animation:jDpVan 3.8s cubic-bezier(.45,0,.35,1) both}
@keyframes jDpVan{0%{transform:translateX(-420px)}30%,52%{transform:translateX(120px)}100%{transform:translateX(760px)}}
.jn .on .dp-w1,.jn .on .dp-w2{animation:jSpin .42s linear infinite}
.jn .on .dp-w1{transform-origin:104px 298px}
.jn .on .dp-w2{transform-origin:300px 298px}
.jn .on .dp-road{animation:jDpRoad .55s linear infinite}
@keyframes jDpRoad{to{transform:translateX(-90px)}}
.jn .on .dp-sky{animation:jDpSky 9s linear infinite}
@keyframes jDpSky{to{transform:translateX(-62px)}}
.jn .on .dp-dust{animation:jDpDust 3.8s ease-out both}
@keyframes jDpDust{0%,52%{opacity:0;transform:translateX(0) scale(.6)}64%{opacity:.5}100%{opacity:0;transform:translateX(-90px) scale(1.7)}}
@media (prefers-reduced-motion: reduce){.jn *{animation:none!important}}