/* ============================================================================
   Ni-Chrome Alloy Castings - design system v2 (benchmarked)
   Clash Display (display) · Satoshi (body & labels), via Fontshare.
   Oxblood is the workhorse; molten is a spark (~1-3% of pixels), never body/glow.
   Warm-oat and near-black grounds. Big type, negative tracking, generous space.
   ============================================================================ */

:root{
  --oxblood:#680C10; --oxblood-deep:#4d090c;
  --molten:#F7941D;
  --ink:#211c1b;         /* deepened near-black for richer grounds */
  --ink-2:#171312;       /* hero / darkest */
  --ink-soft:#4c4441;
  --oat:#F4EFE9;         /* warm off-white, never pure #fff */
  --oat-2:#e9e1d7;
  --card:#fbf8f4;
  --line:#e5ddd2; --line-strong:#d3c8ba;
  --muted:#625a52;        /* AA on the warm-oat ground (>=4.5:1) */
  --muted-d:#9a9089;      /* muted for DARK surfaces (AA on near-black) */
  --max:1180px;
  --pad:clamp(22px,5vw,52px);
  /* Two fonts only: Clash Display (display) + Satoshi (everything else, incl. labels). */
  --disp:"Clash Display","Satoshi",system-ui,sans-serif;
  --sans:"Satoshi",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --mono:"Satoshi",system-ui,sans-serif;    /* labels render in the workhorse, not a 3rd font */
  --label:"Satoshi",system-ui,sans-serif;
  --sect:clamp(40px,5vw,72px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--oat);color:var(--ink);overflow-x:clip;
  font:400 18px/1.62 var(--sans);-webkit-font-smoothing:antialiased;letter-spacing:-.005em}
img{max-width:100%;display:block}
a{color:var(--oxblood);text-underline-offset:3px}
h1,h2,h3{font-family:var(--disp);line-height:1.06;letter-spacing:-.02em;font-weight:600;margin:0}
.container{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}

/* mono eyebrow - small, single weight, a LABEL not content */
.eyebrow{font:500 12.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--oxblood);display:flex;align-items:center;gap:11px;margin:0 0 22px}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--molten)}

/* ---------------- header ---------------- */
.site-head{position:sticky;top:0;z-index:20;background:var(--oat);border-bottom:1px solid var(--line)}
.site-head .container{display:flex;align-items:center;gap:26px;height:72px}
.brand{display:flex;align-items:center;margin-right:auto;text-decoration:none}
.brand .logo-img{height:40px;width:auto;display:block}
.nav{display:flex;gap:28px;align-items:center}
.nav a{text-decoration:none;color:var(--ink-soft);font-size:15.5px;font-weight:500;letter-spacing:-.01em}
.nav a:hover{color:var(--oxblood)}
.nav a.btn{color:#fff}
.nav a.btn:hover{color:#fff}
.btn{display:inline-block;background:var(--oxblood);color:#fff;text-decoration:none;
  font-weight:600;font-size:15.5px;padding:11px 20px;border-radius:2px;border:0;cursor:pointer;
  white-space:nowrap;letter-spacing:-.01em;transition:background .15s}
.btn:hover{background:var(--oxblood-deep)}
.btn.ghost{background:transparent;color:var(--oxblood);box-shadow:inset 0 0 0 1px var(--line-strong)}
.btn.ghost:hover{background:var(--oxblood);color:#fff;box-shadow:inset 0 0 0 1px var(--oxblood)}
.nav-toggle{display:none;background:none;border:0;color:var(--ink);cursor:pointer;padding:6px}
.nav-toggle svg{display:block}
.skip{position:absolute;left:-9999px;top:0;background:var(--oxblood);color:#fff;padding:10px 16px;z-index:100;border-radius:2px}
.skip:focus{left:10px;top:10px}
:focus-visible{outline:2px solid var(--molten);outline-offset:2px}

/* ---------------- hero - type-led, near-black, molten as a single spark ---------------- */
.hero{position:relative;background:var(--ink-2);color:var(--oat);overflow:hidden}
.hero::before{content:"";position:absolute;right:-8%;bottom:-34%;width:66%;height:120%;background:radial-gradient(ellipse at center,rgba(247,148,29,.15),rgba(208,64,15,.05) 46%,transparent 70%);pointer-events:none;z-index:0}
.hero .container{position:relative;z-index:1}
.hero::after{content:"";position:absolute;left:var(--pad);top:0;width:clamp(120px,22vw,300px);height:3px;
  background:linear-gradient(90deg,var(--oxblood),var(--molten))} /* the ONE heat gradient */
.hero .container{position:relative;padding-block:clamp(40px,5.5vw,76px)}

/* casting-type diagrams (on dark) */
.castings{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.1);border-top:1px solid rgba(255,255,255,.1)}
@media(max-width:820px){.castings{grid-template-columns:1fr 1fr}}
@media(max-width:440px){.castings{grid-template-columns:1fr}}
.ct{background:var(--ink);padding:24px 22px 26px}
.ct img{width:100%;max-width:160px;height:auto;margin-bottom:14px}
.ct h3{font-family:var(--disp);font-size:18px;color:#fff;margin-bottom:7px;letter-spacing:-.02em;font-weight:600}
.ct p{font-family:var(--sans);color:#a89f97;font-size:14px;margin:0;line-height:1.5}
.proc-chain{margin-top:22px;font-family:var(--sans);color:var(--muted-d);font-size:15px;letter-spacing:-.01em}

/* ---- process flow tree ---- */
.flowtree{display:flex;flex-direction:column;align-items:center;margin-top:6px}
.ft-node{background:#181413;border:1px solid rgba(255,255,255,.09);border-radius:8px;padding:9px 9px 8px;text-align:center;width:144px;max-width:100%}
.ft-node img{width:100%;max-width:100px;height:auto;display:block;margin:0 auto 4px}
.ft-node b{font-family:var(--disp);font-weight:600;font-size:12.5px;color:#fff;display:block;line-height:1.1;letter-spacing:-.01em}
.ft-node small{color:#9a9089;font-size:12px;display:block;margin-top:3px;line-height:1.3}
.ft-root{width:158px}.ft-root img{max-width:118px}.ft-root b{font-size:14px}
.ft-final{width:188px}.ft-final img{max-width:156px}
/* elegant directional connectors: dim channel + a travelling pulse + a clear arrowhead.
   molten (orange) up to casting; steel-grey once the part has solidified. */
.ft-v,.ft-vs{width:4px;height:30px;margin:0 auto;border-radius:2px;position:relative;flex:none}
.ft-v{background:#6f2a0e}.ft-vs{background:#463f39}
.ft-v::before,.ft-vs::before{content:"";position:absolute;left:-1px;right:-1px;height:13px;border-radius:3px;top:-13px}
.ft-v::before{background:linear-gradient(180deg,transparent,#FFD98A);animation:ftvY 1.2s ease-in infinite}
.ft-vs::before{background:linear-gradient(180deg,transparent,#e6ddd2);animation:ftvY 1.6s ease-in infinite}
.ft-v::after,.ft-vs::after{content:"";position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent}
.ft-v::after{border-top:8px solid #F7941D}.ft-vs::after{border-top:8px solid #8a8079}
.ft-h,.ft-hs{width:30px;height:4px;border-radius:2px;position:relative;flex:none;align-self:center}
.ft-h{background:#6f2a0e}.ft-hs{background:#463f39}
.ft-h::before,.ft-hs::before{content:"";position:absolute;top:-1px;bottom:-1px;width:15px;border-radius:3px;left:-15px}
.ft-h::before{background:linear-gradient(90deg,transparent,#FFD98A);animation:fthX 1.35s ease-in infinite}
.ft-hs::before{background:linear-gradient(90deg,transparent,#e6ddd2);animation:fthX 1.7s ease-in infinite}
.ft-h::after,.ft-hs::after{content:"";position:absolute;top:50%;right:-8px;transform:translateY(-50%);width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent}
.ft-h::after{border-left:8px solid #F7941D}.ft-hs::after{border-left:8px solid #8a8079}
@keyframes ftvY{0%{top:-13px;opacity:0}25%{opacity:1}88%{opacity:.9}100%{top:30px;opacity:0}}
@keyframes fthX{0%{left:-15px;opacity:0}25%{opacity:1}88%{opacity:.9}100%{left:36px;opacity:0}}
/* manifold bars: clean channel with a single sweeping highlight */
.ft-bus,.ft-rail{height:5px;border-radius:3px;position:relative;overflow:hidden}
.ft-bus{width:min(600px,94%);background:linear-gradient(90deg,#C0300A,#F7941D,#C0300A)}
.ft-rail{width:min(600px,94%);background:linear-gradient(90deg,#3f3a35,#6f665f,#3f3a35)}
.ft-bus::before,.ft-rail::before{content:"";position:absolute;top:0;bottom:0;width:44px;left:-44px}
.ft-bus::before{background:linear-gradient(90deg,transparent,#FFF3DA,transparent);animation:ftsweep 1.7s linear infinite}
.ft-rail::before{background:linear-gradient(90deg,transparent,#e6ddd2,transparent);animation:ftsweep 2.2s linear infinite}
@keyframes ftsweep{0%{left:-44px}100%{left:100%}}
.ft-cast{display:flex;justify-content:space-between;gap:12px;width:min(600px,94%)}
.ft-col{display:flex;flex-direction:column;align-items:center;flex:1;min-width:0}
.ft-col .ft-node{width:100%}
.ft-chain{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0;max-width:100%}
.ft-line{width:min(924px,96%);position:relative;display:flex;flex-direction:column;align-items:stretch}
.ft-line .ft-rail{width:100%}
.ft-line .ft-chain{justify-content:flex-start;padding-top:24px;flex-wrap:nowrap}
.ft-entry{position:absolute;left:72px;top:5px}
@media (prefers-reduced-motion:reduce){.ft-v::before,.ft-h::before,.ft-vs::before,.ft-hs::before,.ft-bus::before,.ft-rail::before{animation:none;opacity:.55}}
@media(max-width:900px){
  .ft-cast{flex-wrap:wrap;justify-content:center;gap:14px;width:auto}
  .ft-col{flex:0 0 130px}
  .ft-col .ft-v,.ft-col .ft-vs{display:none}
  .ft-bus,.ft-rail{display:none}
  .ft-line{width:auto}.ft-entry{display:none}
  .ft-line .ft-chain{padding-top:0;flex-wrap:wrap}
  .ft-chain{flex-direction:column}
  .ft-h,.ft-hs{width:4px;height:28px}
  .ft-h::before,.ft-hs::before{display:none}
  .ft-h::after,.ft-hs::after{top:auto;bottom:-7px;left:50%;right:auto;transform:translateX(-50%);border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid transparent}
  .ft-h::after{border-top-color:#F7941D}.ft-hs::after{border-top-color:#8a8079}
}
.plantband{position:relative;overflow:hidden;height:clamp(300px,44vw,480px);background:var(--ink)}
.plantband>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.92) contrast(1.03)}
.plantband::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,17,16,.14) 0%,rgba(20,17,16,.42) 50%,rgba(20,17,16,.86) 100%),linear-gradient(90deg,rgba(20,17,16,.55) 0%,rgba(20,17,16,.12) 46%,transparent 62%)}
.plantband .container{position:relative;z-index:1;height:100%;display:flex;align-items:flex-end;padding-bottom:clamp(26px,4vw,46px)}
.pb-cap{max-width:60ch}
.pb-cap .eyebrow{color:var(--molten)}
.plantband.band-short{height:clamp(240px,32vw,360px)}
.pb-cap h2{color:#fff}
.pb-cap p{color:#e6ddd2;font-family:var(--sans);margin-top:10px;font-size:clamp(15px,1.4vw,18px);letter-spacing:-.01em;max-width:52ch}
.tbar{display:block;height:5px;border-radius:3px;background:rgba(104,12,16,.1);overflow:hidden;max-width:120px;margin-bottom:5px}
.tbar i{display:block;height:100%;background:linear-gradient(90deg,#F7941D,#D0400F);border-radius:3px}
.tval{font-size:13px;color:var(--muted);letter-spacing:0}
.certstrip{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.cert{flex:1 1 180px;min-width:168px;border:1px solid var(--line-strong);border-radius:4px;padding:14px 16px}
.cert b{font-family:var(--disp);font-weight:600;font-size:16px;color:var(--oxblood);display:block;letter-spacing:-.01em}
.cert span{font-family:var(--sans);font-size:13px;color:var(--muted);display:block;margin-top:6px;line-height:1.4}
.contact-nap{display:flex;flex-wrap:wrap;gap:28px;margin-top:26px;font-family:var(--sans);font-size:15px;color:var(--ink);line-height:1.5}
.contact-nap .k{display:block;font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--oxblood);margin-bottom:6px}

/* COMPANY - history timeline (reads like a process log) */
.timeline{list-style:none;margin:8px 0 0;padding:0;max-width:660px}
.tl-item{display:grid;grid-template-columns:66px 1fr;gap:22px}
.tl-year{font-family:var(--mono);font-size:15px;font-weight:500;color:var(--oxblood);letter-spacing:-.01em;padding-top:2px;text-align:right}
.tl-body{position:relative;padding:0 0 30px 26px;border-left:2px solid var(--line-strong)}
.tl-item:last-child .tl-body{border-left-color:transparent;padding-bottom:0}
.tl-body::before{content:"";position:absolute;left:-7px;top:5px;width:12px;height:12px;border-radius:50%;background:var(--molten);box-shadow:0 0 0 4px var(--oat)}
.tl-body h3{font-family:var(--disp);font-size:17px;font-weight:600;letter-spacing:-.02em;margin:0 0 5px}
.tl-body p{font-family:var(--sans);color:var(--muted);font-size:14.5px;line-height:1.5;margin:0}
/* the present-day node reads as the live one */
.tl-item.now .tl-body::before{background:var(--oxblood);box-shadow:0 0 0 4px var(--oat),0 0 0 6px rgba(247,148,29,.35)}

/* COMPANY - mission / vision statement panels */
.mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);margin-top:8px;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.mv{background:var(--oat);padding:clamp(26px,3vw,38px) clamp(24px,2.6vw,34px)}
.mv .k{display:block;font:500 11.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--oxblood);margin-bottom:16px}
.mv p{font-family:var(--disp);font-weight:600;font-size:clamp(18px,2vw,23px);line-height:1.32;letter-spacing:-.02em;margin:0;color:var(--ink)}
@media(max-width:640px){.mv-grid{grid-template-columns:1fr}}

/* CASTINGS CATALOGUE - categories with grade line and item chips */
.cat{padding-block:clamp(26px,3.4vw,40px);border-top:1px solid var(--line)}
.cat:first-of-type{border-top:0;padding-top:4px}
.cat h2{font-family:var(--disp);font-size:clamp(22px,2.6vw,30px);letter-spacing:-.02em;font-weight:600;margin:0 0 12px}
.cat .lede{font-family:var(--sans);font-size:17px;line-height:1.55;color:var(--ink-soft);max-width:66ch;margin:0}
.cat-meta{font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:var(--oxblood);margin:14px 0 0;text-transform:uppercase}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;padding:0;list-style:none}
.chips li{font-family:var(--sans);font-size:14px;line-height:1.2;padding:7px 13px;border:1px solid var(--line-strong);border-radius:100px;color:var(--ink-soft);background:var(--card)}
.hero .eyebrow{color:var(--molten)}
.hero .eyebrow::before{background:var(--molten)}
.hero h1{font-size:clamp(34px,5vw,62px);max-width:16ch;letter-spacing:-.025em;font-weight:600;color:#f6f1ea}
.hero p:not(.eyebrow){font-family:var(--sans);font-size:clamp(16px,1.5vw,19px);color:#c8beb4;max-width:54ch;margin:22px 0 30px;letter-spacing:-.01em}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap}
.hero .btn.ghost{color:#f6f1ea;box-shadow:inset 0 0 0 1px rgba(246,241,234,.28)}
.hero .btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--molten)}

/* ---------------- buyer spec strip (callouts upfront) ---------------- */
.specstrip{background:var(--ink);color:var(--oat)}
.specstrip .container{display:grid;grid-template-columns:repeat(4,1fr)}
.specstrip .cell{padding:26px 0;border-right:1px solid rgba(255,255,255,.09)}
.specstrip .cell{padding-inline:clamp(16px,2.5vw,30px)}
.specstrip .cell:first-child{padding-left:0}
.specstrip .cell:last-child{border-right:0;padding-right:0}
.specstrip .k{font:500 11.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--molten)}
.specstrip .v{margin-top:10px;font-size:15.5px;line-height:1.4;color:#e7ded4;letter-spacing:-.01em}
@media(max-width:820px){.specstrip .container{grid-template-columns:1fr 1fr}
  .specstrip .cell:nth-child(2){border-right:0}
  .specstrip .cell:nth-child(odd){padding-left:0}.specstrip .cell:nth-child(even){padding-right:0}}

/* ---------------- sections ---------------- */
section{padding-block:var(--sect)}
.section-head{max-width:58ch;margin-bottom:32px}
.section-head h1,.section-head h2{font-size:clamp(28px,4.4vw,44px);letter-spacing:-.03em}
.section-head p{font-family:var(--sans);color:var(--ink-soft);font-size:19px;margin:16px 0 0;letter-spacing:-.01em}
.lead{font-family:var(--sans);font-size:19px;color:var(--ink-soft)}

/* card grid */
.grid{display:grid;gap:1px;background:var(--line)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.grid.cols-3,.grid.cols-4{grid-template-columns:repeat(2,1fr)}.grid.cols-3>:last-child:nth-child(odd){grid-column:1/-1}}
@media(max-width:560px){.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}.grid.cols-3>:last-child{grid-column:auto}}
.card{background:var(--oat);padding:20px 20px;text-decoration:none;color:inherit;display:block;
  transition:background .15s}
.card:hover{background:var(--card)}
.card img{display:block;width:calc(100% + 40px);margin:-20px -20px 16px;aspect-ratio:16/10;object-fit:cover;background:var(--ink);filter:saturate(.82) brightness(.93);transition:filter .35s ease}
.card:hover img{filter:saturate(1.06) brightness(1.02)}
@media (prefers-reduced-motion:reduce){.card img{transition:none}}
.card h3{font-family:var(--disp);font-size:18px;font-weight:600;margin-bottom:8px;letter-spacing:-.02em}
.card .tag+h3{margin-top:0}
.card p{font-family:var(--sans);margin:0;color:var(--muted);font-size:15px;line-height:1.5}
.card .tag{font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--oxblood);
  display:block;margin-bottom:12px}

/* capability numbers */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.1)}
.stats .stat{padding:8px 0}
@media(max-width:760px){.stats{grid-template-columns:1fr 1fr}}
.stat .n{font:600 clamp(34px,4.6vw,52px)/1 var(--disp);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat .n small{font-size:.42em;color:var(--muted);font-weight:500;letter-spacing:-.01em}
.stat .l{margin-top:10px;font:500 12px/1.4 var(--mono);letter-spacing:.08em;color:var(--muted-d);text-transform:uppercase}

/* alloy table (mono numerics) */
.wrap-x{overflow-x:auto;border:1px solid var(--line-strong)}
.spec{width:100%;border-collapse:collapse;font-size:15.5px;font-family:var(--sans);background:var(--card);font-variant-numeric:tabular-nums}
.spec th,.spec td{text-align:left;padding:15px 18px;border-bottom:1px solid var(--line)}
.spec tr:last-child td{border-bottom:0}
.spec th{font:500 11.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.spec td.g{font-family:var(--mono);font-weight:500;color:var(--oxblood)}
.spec td.mono{font-family:var(--mono);letter-spacing:-.02em}

/* band CTA */
.band{background:var(--oxblood);color:#fff}
.band .container{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;padding-block:clamp(48px,7vw,72px)}
.band h2{font-size:clamp(26px,3.6vw,38px);max-width:20ch;color:#fff}
.band p{font-family:var(--sans);margin:10px 0 0;color:#f0cfc4;max-width:44ch}
.band .btn{background:var(--oat);color:var(--oxblood)}.band .btn:hover{background:#fff}

/* footer */
.site-foot{background:var(--ink);color:#b9b0a8;padding-block:64px 36px;font-family:var(--sans);font-size:15px}
.site-foot .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:32px;margin-bottom:44px}
@media(max-width:760px){.site-foot .cols{grid-template-columns:1fr 1fr}}
.site-foot .fh{font:500 11.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--molten);margin:0 0 16px}
.site-foot a{color:#b9b0a8;text-decoration:none;display:block;margin-bottom:9px}
.site-foot a:hover{color:#fff}
.foot-brand{margin-bottom:16px}
.foot-brand b{font-family:var(--disp);font-size:23px;font-weight:600;color:var(--oat);letter-spacing:-.02em;display:block;line-height:1}
.foot-brand span{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-d);display:block;margin-top:7px}
.site-foot .rule{border-top:1px solid rgba(255,255,255,.12);padding-top:22px;display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--muted-d);font-family:var(--mono);font-size:12.5px}

/* forms */
.field{margin-bottom:18px}
.field label{display:block;font-family:var(--sans);font-weight:600;font-size:14.5px;margin-bottom:7px}
.field .req{color:var(--oxblood)}
.field input,.field textarea{width:100%;padding:12px 14px;border:1px solid var(--line-strong);
  border-radius:2px;font:inherit;font-family:var(--sans);background:var(--card);color:var(--ink)}
.field input:focus,.field textarea:focus{outline:2px solid var(--molten);outline-offset:0;border-color:var(--molten)}
.field textarea{min-height:140px;resize:vertical}
.field .hint{color:var(--muted);font-size:12.5px;margin-top:7px}
.status{margin-top:12px;font-size:14.5px;min-height:20px;font-family:var(--sans)}
.status.ok{color:#1a7f37}.status.err{color:var(--oxblood)}

@media(max-width:760px){
  .nav{display:none;position:absolute;top:72px;left:0;right:0;flex-direction:column;
    background:var(--oat);border-bottom:1px solid var(--line);padding:16px var(--pad);gap:16px}
  .nav.open{display:flex}
  .nav-toggle{display:block}
}