/* Manufacturing page: the 4 process-section versions (2026-10-06). Same colours, fonts and lines as the site.
   Motion is opacity/transform only, so it stays smooth on slow computers. */

/* ---------- 2. horizontal track ---------- */
.track-sec{position:relative;background:var(--page-alt)}
.tr-head{display:flex;align-items:center;gap:1.5rem;padding-block:1.5rem 1rem}
.tr-head .eyebrow{margin:0;white-space:nowrap}
.tr-bar{flex:1;height:3px;background:var(--line);border-radius:2px;overflow:hidden}
.tr-bar i{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left}
.tr-row{display:flex;gap:1.5rem;margin:0;padding:0 var(--gutter) 2rem;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory}
.tr-panel{flex:0 0 85vw;scroll-snap-align:start;scroll-margin-top:4.5rem}
.tr-pic{margin:0 0 1.1rem;aspect-ratio:3/2;border:1px solid var(--line);border-radius:var(--btn-radius);overflow:hidden;background:#fff}
.tr-pic img{width:100%;height:100%;object-fit:cover}
.tr-num{margin:0 0 .4rem;font:800 clamp(2.4rem,4vw,3.6rem)/1 var(--display);font-stretch:112%;color:transparent;-webkit-text-stroke:1.5px var(--accent)}
.tr-panel .eyebrow{margin-bottom:.4rem}
.tr-panel .h2{font-size:clamp(1.7rem,2.6vw,2.6rem);margin:0}
@media (min-width:56rem){
  .tr-sticky{position:sticky;top:4.5rem;height:calc(100svh - 4.5rem);display:flex;flex-direction:column;justify-content:center;overflow:hidden}
  .tr-row{overflow:visible;scroll-snap-type:none;padding-inline:max(var(--gutter),calc((100vw - var(--max))/2 + var(--gutter)));will-change:transform}
  .tr-panel{flex:0 0 min(44vw,40rem)}
  .tr-pic{max-height:52svh;width:100%}
}

/* ---------- 3. timeline ---------- */
.tl{position:relative;margin:0;padding:0 0 0 3.5rem;list-style:none}
.tl-rail{position:absolute;left:1.2rem;top:.5rem;bottom:.5rem;width:2px;background:var(--line)}
.tl-rail i{position:absolute;inset:0;background:var(--accent);transform:scaleY(0);transform-origin:top}
.tl-step{position:relative;display:grid;gap:1.25rem;padding-block:2.5rem;scroll-margin-top:4.5rem}
.tl-dot{position:absolute;left:-3.5rem;top:2.6rem;width:2.4rem;height:2.4rem;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--page);border:2px solid var(--line-strong);font:700 .8rem var(--display);color:var(--muted);transition:background .3s,border-color .3s,color .3s,box-shadow .3s}
.tl-step.is-on .tl-dot{background:var(--teal);border-color:var(--teal);color:#fff;box-shadow:0 0 0 6px rgba(15,118,110,.12)}
.tl-text .h2{margin:0;font-size:clamp(1.8rem,3.4vw,3rem)}
.tl-text{opacity:.35;transition:opacity .4s}
.tl-step.is-on .tl-text{opacity:1}
.tl-pic{margin:0;aspect-ratio:3/2;border:1px solid var(--line);border-radius:var(--btn-radius);overflow:hidden;background:#fff}
.tl-pic img{width:100%;height:100%;object-fit:cover}
@media (min-width:56rem){
  .tl{padding-left:5rem}
  .tl-rail{left:1.7rem}
  .tl-dot{left:-5rem;top:50%;margin-top:-1.4rem;width:3.4rem;height:3.4rem;font-size:1rem}
  .tl-step{grid-template-columns:5fr 7fr;align-items:center;gap:clamp(2rem,4vw,4rem);min-height:0;padding-block:3rem}
}

/* ---------- 4. chapters ---------- */
.ch-grid{display:grid;gap:2rem}
.ch-index{display:none}
.ch{position:relative;padding-block:2.5rem;border-top:1px solid var(--line);scroll-margin-top:4.5rem}
.ch-num{margin:0 0 .5rem;font:800 clamp(4rem,10vw,9rem)/.85 var(--display);font-stretch:112%;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px var(--outline)}
.ch.in .ch-num{-webkit-text-stroke-color:var(--accent);transition:-webkit-text-stroke-color .6s}
.ch-text .h2{margin:0 0 1.5rem;font-size:clamp(1.9rem,3.6vw,3.2rem)}
.ch-pic{margin:0;aspect-ratio:16/9;border-radius:var(--btn-radius);overflow:hidden;background:var(--page-alt);clip-path:inset(0 100% 0 0);transition:clip-path 1s var(--ease)}
.ch.in .ch-pic{clip-path:inset(0 0 0 0)}
.ch-pic img{width:100%;height:100%;object-fit:cover}
.ch-pic .proc-icon svg{width:22%}
@media (min-width:56rem){
  .ch-grid{grid-template-columns:13rem 1fr;gap:clamp(2rem,5vw,4rem)}
  .ch-index{display:block}
  .ch-index ol{position:sticky;top:7rem;margin:0;padding:0;list-style:none;border-left:2px solid var(--line)}
  .ch-index a{display:block;padding:.6rem 0 .6rem 1rem;margin-left:-2px;border-left:2px solid transparent;color:var(--muted);text-decoration:none;font:600 1rem var(--display);transition:color .2s,border-color .2s}
  .ch-index a b{color:inherit;margin-right:.4rem}
  .ch-index a.on,.ch-index a:hover{color:var(--ink);border-left-color:var(--accent)}
  .ch{display:grid;grid-template-columns:auto 1fr;column-gap:2rem;padding-block:4rem}
  .ch-num{grid-row:1/3}
  .ch-pic{grid-column:2}
}
@media (prefers-reduced-motion:reduce){.ch-pic{clip-path:none;transition:none}.tl-text,.tl-dot{transition:none}}