/* ==========================================================================
   ABC Heavy Industry — mill wear parts
   Single shared stylesheet for the whole site.

   Colour tokens follow ABC VI MANUAL 01.5 / 01.6 strictly:
     Standard  : Primary #072B5F · Secondary #323D45 · Ground #FFFFFF
     Auxiliary : Accent #1B4B8A · Highlight #B8894A · Neutral #F5F6F7
   Gold is a highlight only — rules, labels, buttons. Max 5% of the layout.
   No colour outside this palette may be introduced.
   ========================================================================== */

:root{
--navy:#072B5F;--navy-deep:#04203F;--navy-soft:#1B4B8A;
--grey:#323D45;--grey-warm:#5B6369;--grey-light:#B8BFC6;
--paper:#F5F6F7;--line:#DCE0E4;--ink:#14181C;--muted:#6B7480;
--gold:#B8894A;
/* text on navy */
--on1:#C6D3E4;--on2:#8FA9C9;--online:rgba(157,180,210,.38);
--display:'Archivo','Arial Narrow','Segoe UI',sans-serif;
--body:'Source Sans 3','Segoe UI',Arial,sans-serif;
--mono:'Source Sans 3','Segoe UI',Arial,sans-serif;
--shadow:0 12px 32px rgba(7,43,95,.09);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:#fff;font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
strong{font-weight:600}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.95);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.site-head .wrap{position:relative;display:flex;align-items:center;justify-content:space-between;height:74px;gap:20px}
.logo{display:flex;align-items:center;flex:none}
.logo img{height:40px;width:auto}
.nav{display:flex;align-items:center;gap:30px}
.nav>li{position:relative}
.nav>li>a{font-size:14.5px;font-weight:500;color:var(--grey);padding:26px 0;display:inline-flex;align-items:center}
.nav>li>a:hover,.nav>li>a.on{color:var(--navy)}
.has-sub>a::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-left:8px;margin-top:-3px}
/* dropdown panel — class name is deliberately specific: a bare `.sub` here
   would collide with the `.sub` paragraph used inside the enquiry block. */
.nav-sub{position:absolute;top:100%;left:-20px;min-width:298px;background:#fff;border:1px solid var(--line);
  border-radius:6px;box-shadow:var(--shadow);padding:12px;opacity:0;visibility:hidden;
  transform:translateY(8px);transition:.18s ease}
.has-sub:hover .nav-sub,.has-sub:focus-within .nav-sub{opacity:1;visibility:visible;transform:translateY(0)}
.nav-sub .grp{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--muted);padding:9px 12px 6px}
.nav-sub .grp:not(:first-child){border-top:1px solid var(--line);margin-top:8px;padding-top:14px}
.nav-sub a{display:block;padding:8px 12px;border-radius:4px;font-size:14px;color:var(--grey)}
.nav-sub a:hover{background:var(--paper);color:var(--navy)}
.head-cta{display:flex;align-items:center;gap:16px}
.head-tel{font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.mini-btn{font-size:13.5px;font-weight:600;color:#fff;background:var(--navy);padding:11px 19px;
  border-radius:4px;white-space:nowrap}
.mini-btn:hover{background:var(--navy-deep)}
.burger{display:none;width:40px;height:40px;border:1px solid var(--line);border-radius:4px;
  background:#fff;align-items:center;justify-content:center;cursor:pointer}
.burger i{display:block;width:17px;height:1.5px;background:var(--navy);position:relative}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:17px;height:1.5px;background:var(--navy)}
.burger i::before{top:-5px}.burger i::after{top:5px}
.navtoggle{display:none}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);background:var(--paper);margin-top:64px;padding:44px 0 34px}
.f-top{display:flex;justify-content:space-between;gap:34px;flex-wrap:wrap;align-items:flex-start;
  padding-bottom:26px;border-bottom:1px solid var(--line)}
.f-brand{max-width:320px}
.f-brand img{height:38px;width:auto;margin-bottom:16px}
.f-brand p{font-size:13px;color:var(--grey-warm);line-height:1.7}
.f-cols{display:flex;gap:56px;flex-wrap:wrap}
.f-col h4{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--muted);
  text-transform:uppercase;margin-bottom:14px}
.f-col a{display:block;font-size:13.5px;color:var(--grey-warm);padding:5px 0}
.f-col a:hover{color:var(--navy)}
.f-bot{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-top:20px}
.f-bot p{font-family:var(--mono);font-size:11px;color:var(--muted)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;
  border-radius:4px;font-weight:600;font-size:14.5px;border:1px solid transparent;cursor:pointer;
  font-family:var(--body);transition:.16s;text-align:center}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-deep)}
.btn-ghost{background:#fff;color:var(--navy);border-color:var(--grey-light)}
.btn-ghost:hover{border-color:var(--navy)}
.btn-gold{background:var(--gold);color:var(--navy)}
.btn-gold:hover{opacity:.88}
.btn-line{background:transparent;color:#fff;border-color:var(--online)}
.btn-line:hover{border-color:#fff}
.btn-wide{width:100%;padding:15px;font-size:15px}

/* ---------- shared blocks ---------- */
.sec{padding:64px 0;border-top:1px solid var(--line)}
.sec-alt{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-head{max-width:680px;margin-bottom:34px}
.sec-head h2{font-family:var(--display);font-weight:700;font-size:clamp(22px,3vw,29px);
  letter-spacing:-.015em;color:var(--navy);line-height:1.25;padding-left:12px;border-left:3px solid var(--gold)}
.sec-head p{color:var(--grey-warm);font-size:15.5px;margin-top:12px;padding-left:15px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head.center h2{border-left:none;padding-left:0}
.sec-head.center p{padding-left:0}

.eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--muted);
  text-transform:uppercase;display:flex;align-items:center;gap:9px}
.eyebrow::before{content:"";width:20px;height:2px;background:var(--gold);flex:none}
.eyebrow.on-navy{color:var(--on2)}

.chip{font-family:var(--mono);font-size:11px;letter-spacing:.02em;padding:7px 12px;border-radius:3px;
  background:var(--paper);border:1px solid var(--line);color:var(--grey)}
.chip b{color:var(--navy);font-weight:500}
.chip.on{background:#fff;border-color:var(--gold);color:var(--navy)}
.chips{display:flex;flex-wrap:wrap;gap:8px}

.badge{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.06em;color:var(--navy);background:var(--paper);border-left:2px solid var(--gold);
  padding:6px 11px;border-radius:0 3px 3px 0}
.note{display:flex;gap:11px;padding:15px 17px;border-radius:3px;background:var(--paper);
  border-left:3px solid var(--navy)}
.note .ic{width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none;margin-top:8px}
.note p{font-size:13px;color:var(--grey-warm);line-height:1.6}
.note b{color:var(--navy);font-weight:600}

.crumb{padding:22px 0;font-size:12.5px;color:var(--muted);font-family:var(--mono);letter-spacing:.02em}
.crumb a:hover{color:var(--navy)}
.crumb em{font-style:normal;color:var(--grey-light);margin:0 9px}

/* ---------- home ---------- */
.hero{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-150px;top:-160px;width:540px;height:540px;
  border-radius:50%;border:1px solid rgba(184,137,74,.24)}
.hero .wrap{position:relative;z-index:2;padding-top:74px;padding-bottom:0}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:center}
.hero h1{font-family:var(--display);font-weight:800;font-size:clamp(30px,4.4vw,50px);line-height:1.07;
  letter-spacing:-.025em;margin:20px 0 22px}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero .lede{font-size:16.5px;color:var(--on1);max-width:560px;line-height:1.72}
.hero .lede b{color:#fff;font-weight:500}
.hero-cta{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.hero-art{position:relative;min-height:300px}
.trust{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--online);border-top:1px solid var(--online);margin-top:64px}
.trust div{padding:22px 20px;background:var(--navy)}
.trust b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--gold);
  margin-bottom:8px}
.trust span{display:block;font-size:13.5px;color:var(--on1);line-height:1.5}

.pillars{display:grid;grid-template-columns:repeat(2,1fr);border:1px solid var(--line);border-radius:4px;
  overflow:hidden;background:#fff}
.pillar{padding:38px 34px;border-bottom:1px solid var(--line)}
.pillar:nth-child(odd){border-right:1px solid var(--line)}
.pillar:nth-last-child(-n+2){border-bottom:none}
.pillar .n{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--muted);
  padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:20px}
.pillar h3{font-family:var(--display);font-size:19px;font-weight:700;color:var(--navy);
  line-height:1.28;margin-bottom:12px}
.pillar p{font-size:14px;color:var(--grey-warm);line-height:1.68}
.pillar .benefit{margin-top:18px;padding-left:13px;border-left:2px solid var(--gold);
  font-size:14px;font-weight:600;color:var(--navy);line-height:1.5}

.fams{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.fam{border:1px solid var(--line);border-radius:4px;overflow:hidden;background:#fff;
  display:flex;flex-direction:column;transition:.18s}
.fam:hover{border-color:var(--grey-light);box-shadow:var(--shadow);transform:translateY(-3px)}
.fam .pic{aspect-ratio:16/10;background:var(--paper);display:grid;place-items:center;
  border-bottom:1px solid var(--line);font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  color:var(--grey-light)}
.fam .bd{padding:24px 24px 26px;flex:1;display:flex;flex-direction:column}
.fam h3{font-family:var(--display);font-size:16.5px;font-weight:700;color:var(--navy);line-height:1.3}
.fam .models{font-family:var(--mono);font-size:10.5px;color:var(--muted);margin:9px 0 14px;line-height:1.6}
.fam ul{flex:1}
.fam li{font-size:13.5px;color:var(--grey-warm);padding:5px 0;display:flex;gap:9px}
.fam li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold);flex:none;margin-top:8px}
.fam .go{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:600;
  color:var(--navy);margin-top:18px}
.fam .go i{width:16px;height:2px;background:var(--gold);position:relative;flex:none}
.fam .go i::after{content:"";position:absolute;right:0;top:-2.5px;width:6px;height:6px;
  border-right:2px solid var(--gold);border-top:2px solid var(--gold);transform:rotate(45deg)}

.steps{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);
  border-radius:4px;overflow:hidden;background:#fff}
.step{padding:28px 24px}
.step+.step{border-left:1px solid var(--line)}
.step .n{font-family:var(--mono);font-size:12px;color:var(--gold);letter-spacing:.1em}
.step h4{font-family:var(--display);font-size:15px;font-weight:700;color:var(--navy);margin:13px 0 9px}
.step p{font-size:13px;color:var(--grey-warm);line-height:1.6}

.cta-band{background:var(--navy);border-radius:4px;padding:50px;text-align:center;color:#fff}
.cta-band h2{font-family:var(--display);font-weight:800;font-size:clamp(24px,3.4vw,34px);
  letter-spacing:-.02em;line-height:1.15}
.cta-band h2 em{font-style:normal;color:var(--gold)}
.cta-band p{color:var(--on1);font-size:15.5px;margin:16px auto 26px;max-width:560px}

/* ---------- parts listing ---------- */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pcard{border:1px solid var(--line);border-radius:4px;overflow:hidden;background:#fff;
  display:block;transition:.16s}
.pcard:hover{border-color:var(--grey-light);box-shadow:var(--shadow);transform:translateY(-2px)}
.pcard .pic{aspect-ratio:4/3;background:var(--paper);border-bottom:1px solid var(--line);
  display:grid;place-items:center;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  color:var(--grey-light)}
.pcard .bd{padding:15px 17px 18px}
.pcard h4{font-size:14px;font-weight:600;color:var(--navy);line-height:1.35}
.pcard .ref{font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:6px}
.pcard .tag{display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;
  color:var(--muted);background:var(--paper);padding:3px 7px;border-radius:2px;margin-top:10px}

.grp-head{display:flex;align-items:baseline;gap:14px;margin:34px 0 18px;
  padding-bottom:12px;border-bottom:1px solid var(--line)}
.grp-head h3{font-family:var(--display);font-size:17px;font-weight:700;color:var(--navy)}
.grp-head span{font-family:var(--mono);font-size:11px;color:var(--muted)}

.fam-hero{background:var(--navy);color:#fff;padding:56px 0}
.fam-hero h1{font-family:var(--display);font-weight:800;font-size:clamp(28px,4vw,42px);
  letter-spacing:-.025em;line-height:1.1;margin:18px 0 18px}
.fam-hero p{color:var(--on1);font-size:16px;max-width:640px;line-height:1.72}
.fam-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--online);
  border:1px solid var(--online);margin-top:38px;border-radius:3px;overflow:hidden}
.fam-meta div{background:var(--navy);padding:18px 20px}
.fam-meta b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--gold);
  margin-bottom:7px}
.fam-meta span{font-size:13.5px;color:var(--on1);line-height:1.5}

/* ---------- product detail ---------- */
.top{display:grid;grid-template-columns:1.02fr 1fr;gap:56px;align-items:start}
.gal-main{background:var(--paper);border:1px solid var(--line);border-radius:4px;aspect-ratio:1/1;
  display:grid;place-items:center;position:relative}
.gal-main .tag{position:absolute;top:14px;left:14px;font-family:var(--mono);font-size:10px;
  letter-spacing:.12em;color:var(--grey-warm);background:rgba(255,255,255,.92);
  border:1px solid var(--line);padding:5px 9px;border-radius:2px}
.ph{text-align:center;color:var(--grey-light)}
.ph .ring{width:74px;height:74px;border:1.5px dashed var(--grey-light);border-radius:50%;
  margin:0 auto 14px;display:grid;place-items:center}
.ph .ring i{display:block;width:30px;height:30px;border:1.5px solid var(--grey-light);border-radius:50%}
.ph b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--grey-light)}
.gal-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin-top:10px}
.gal-thumbs span{aspect-ratio:1/1;background:var(--paper);border:1px solid var(--line);
  border-radius:3px;display:grid;place-items:center;font-family:var(--mono);font-size:9.5px;
  color:var(--grey-light)}
.gal-thumbs span.on{border-color:var(--navy);background:#fff;color:var(--navy)}

.pdp h1{font-family:var(--display);font-weight:800;font-size:clamp(27px,3.5vw,38px);line-height:1.1;
  letter-spacing:-.02em;color:var(--navy);margin:15px 0 14px}
.pdp .lede{font-size:16px;color:var(--grey-warm);max-width:520px}
.pdp .chips{margin:24px 0 26px}
.pdp .cta-row{display:flex;gap:11px;flex-wrap:wrap}
.pdp .note{margin-top:22px}

.spec{border:1px solid var(--line);border-radius:4px;overflow:hidden;background:#fff}
.spec-row{display:grid;grid-template-columns:250px 1fr}
.spec-row+.spec-row{border-top:1px solid var(--line)}
.spec-row .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--muted);
  padding:15px 20px;background:var(--paper);border-right:1px solid var(--line)}
.spec-row .v{padding:15px 20px;font-size:14.5px}
.spec-row .v b{color:var(--navy);font-weight:600}
.made{color:var(--navy);font-weight:600}
.made span{display:block;font-weight:400;font-size:12.5px;color:var(--muted);margin-top:3px}

.mats{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.mat{border:1px solid var(--line);border-radius:4px;padding:24px 20px;background:#fff}
.mat .bar{width:32px;height:3px;background:var(--gold);margin-bottom:16px}
.mat h3{font-family:var(--display);font-size:14px;font-weight:700;color:var(--navy);line-height:1.3}
.mat .grade{font-family:var(--mono);font-size:10.5px;color:var(--muted);letter-spacing:.03em;margin:7px 0 10px}
.mat p{font-size:12.5px;color:var(--grey-warm);line-height:1.6}

.why{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);
  border-radius:4px;overflow:hidden;background:#fff}
.why>div{padding:28px 26px}
.why>div+div{border-left:1px solid var(--line)}
.why b{display:block;font-family:var(--display);font-size:14.5px;font-weight:700;
  color:var(--navy);margin-bottom:9px}
.why p{font-size:13.5px;color:var(--grey-warm);line-height:1.6}

/* inquiry */
.inq{background:var(--navy);border-radius:4px;padding:46px;display:grid;
  grid-template-columns:.92fr 1.08fr;gap:52px;color:#fff}
.inq h2{font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:-.015em;line-height:1.2}
.inq .sub{font-size:14.5px;color:var(--on1);margin-top:14px;line-height:1.65}
.ctx{margin-top:26px;padding:15px 17px;border-radius:3px;background:rgba(255,255,255,.06);
  border-left:2px solid var(--gold)}
.ctx span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--on2)}
.ctx b{display:block;font-size:14.5px;font-weight:600;margin-top:6px}
.ctx small{display:block;font-family:var(--mono);font-size:11px;color:var(--on2);margin-top:3px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.field{margin-bottom:13px}
.field label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  color:var(--muted);margin-bottom:7px}
.field input,.field textarea,.field select{width:100%;padding:12px 14px;border-radius:3px;
  border:1px solid var(--line);background:#fff;color:var(--ink);font-family:var(--body);font-size:14px}
.field input::placeholder,.field textarea::placeholder{color:var(--grey-light)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--navy);
  box-shadow:0 0 0 3px rgba(7,43,95,.07)}
.field textarea{resize:vertical;min-height:92px}
.inq .field label{color:var(--on2)}
.inq .field input,.inq .field textarea{border-color:var(--online);background:rgba(255,255,255,.06);color:#fff}
.inq .field input::placeholder,.inq .field textarea::placeholder{color:#7A8B9E}
.inq .field input:focus,.inq .field textarea:focus{border-color:var(--gold);background:rgba(255,255,255,.1)}
.attach{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:3px;background:rgba(255,255,255,.03)}
.attach,.drop{border:1px dashed var(--online)}
.attach i{width:28px;height:28px;border-radius:3px;background:rgba(184,137,74,.22);
  display:grid;place-items:center;flex:none}
.attach i::after{content:"";width:9px;height:9px;border:1.5px solid var(--gold);border-radius:1px}
.attach p{font-size:12.5px;color:var(--on2);line-height:1.5}
.attach p b{display:block;color:#fff;font-weight:500;font-size:13px}
.fineprint{font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:14px;line-height:1.65}
.inq .fineprint{color:#7A8B9E}
.inq .btn-gold{margin-top:6px}

/* ---------- contact ---------- */
.paths{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.path{border:1px solid var(--line);border-radius:4px;padding:30px 26px 26px;background:#fff;
  display:flex;flex-direction:column;transition:.18s}
.path:hover{border-color:var(--gold);box-shadow:var(--shadow);transform:translateY(-3px)}
.path .num{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--muted);
  padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:20px}
.path h3{font-family:var(--display);font-size:17px;font-weight:700;color:var(--navy);
  line-height:1.3;margin-bottom:11px}
.path p{font-size:13.5px;color:var(--grey-warm);line-height:1.65;flex:1}
.path .go{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:600;
  color:var(--navy);margin-top:20px}
.path .go i{width:16px;height:2px;background:var(--gold);position:relative;flex:none}
.path .go i::after{content:"";position:absolute;right:0;top:-2.5px;width:6px;height:6px;
  border-right:2px solid var(--gold);border-top:2px solid var(--gold);transform:rotate(45deg)}

.gb{display:grid;grid-template-columns:.85fr 1.15fr;gap:54px;align-items:start}
.gb ol{counter-reset:n}
.gb li{counter-increment:n;display:grid;grid-template-columns:52px 1fr;gap:18px;padding:22px 0;
  border-top:1px solid var(--line)}
.gb li:last-child{border-bottom:1px solid var(--line)}
.gb li::before{content:counter(n,decimal-leading-zero);font-family:var(--mono);font-size:12px;
  color:var(--muted);letter-spacing:.08em;padding-top:3px}
.gb li b{display:block;font-family:var(--display);font-size:15.5px;font-weight:700;
  color:var(--navy);margin-bottom:6px}
.gb li p{font-size:14px;color:var(--grey-warm);line-height:1.6}

.formbox{display:grid;grid-template-columns:.8fr 1.2fr;border:1px solid var(--line);
  border-radius:4px;overflow:hidden;background:#fff}
.formbox .side{background:var(--navy);color:#fff;padding:38px 34px}
.formbox .side h3{font-family:var(--display);font-size:20px;font-weight:700;line-height:1.3}
.formbox .side p{font-size:13.5px;color:var(--on1);margin-top:12px;line-height:1.7}
.tick{margin-top:26px;border-top:1px solid rgba(255,255,255,.14);padding-top:20px}
.tick div{display:flex;gap:10px;font-size:13px;color:var(--on1);padding:7px 0}
.tick div::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold);
  flex:none;margin-top:8px}
.formbox form{padding:38px 34px}
.drop{display:flex;align-items:center;gap:13px;padding:16px 17px;border-radius:3px;
  background:var(--paper);margin-bottom:18px}
.drop i{width:34px;height:34px;border-radius:3px;background:#fff;border:1px solid var(--line);
  display:grid;place-items:center;flex:none;position:relative}
.drop i::before{content:"";width:11px;height:11px;border:1.5px solid var(--gold);border-radius:1px}
.drop i::after{content:"";position:absolute;width:1.5px;height:6px;background:var(--gold);
  bottom:8px;right:12px}
.drop p{font-size:12.5px;color:var(--grey-warm);line-height:1.5}
.drop p b{display:block;color:var(--navy);font-weight:600;font-size:13.5px;margin-bottom:2px}

.reach{display:grid;grid-template-columns:1.05fr .95fr;gap:20px}
.card{border:1px solid var(--line);border-radius:4px;padding:30px 28px;background:#fff}
.card h3{font-family:var(--display);font-size:16px;font-weight:700;color:var(--navy);margin-bottom:16px}
.direct div{display:flex;justify-content:space-between;gap:16px;padding:13px 0;
  border-bottom:1px solid var(--line);font-size:14px}
.direct div:last-child{border-bottom:none}
.direct span{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--muted)}
.direct b{font-weight:500;color:var(--navy);text-align:right;word-break:break-word}
.human{background:var(--paper);border-left:3px solid var(--gold);display:flex;
  flex-direction:column;justify-content:center}
.human p{font-size:15px;color:var(--grey);line-height:1.75;font-weight:500}
.human small{display:block;font-size:13px;color:var(--grey-warm);margin-top:14px;line-height:1.65}

/* ---------- news ---------- */
.nlist{display:grid;grid-template-columns:1.35fr 1fr;gap:22px}
.nfeature{display:block;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:#fff;
  transition:.16s}
.nfeature:hover{border-color:var(--grey-light);box-shadow:var(--shadow)}
.nfeature .pic{aspect-ratio:16/9;background:var(--paper);border-bottom:1px solid var(--line);
  display:grid;place-items:center;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  color:var(--grey-light)}
.nfeature .bd{padding:28px 30px 32px}
.nfeature h2{font-family:var(--display);font-size:23px;font-weight:700;color:var(--navy);
  line-height:1.3;letter-spacing:-.015em;margin:12px 0 12px}
.nfeature p{font-size:14.5px;color:var(--grey-warm);line-height:1.7}
.nmeta{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--muted)}
.nside{display:flex;flex-direction:column;gap:14px}
.nside .card{padding:26px 24px}
.nside h3{font-size:15px;margin-bottom:14px}
.nside a{display:block;font-size:13.5px;color:var(--grey-warm);padding:9px 0;
  border-bottom:1px solid var(--line);line-height:1.5}
.nside a:last-child{border-bottom:none}
.nside a:hover{color:var(--navy)}

.article{max-width:760px;margin:0 auto}
.article h1{font-family:var(--display);font-weight:800;font-size:clamp(27px,3.8vw,40px);
  line-height:1.16;letter-spacing:-.025em;color:var(--navy);margin:18px 0 20px}
.article .meta{display:flex;gap:16px;flex-wrap:wrap;align-items:center;padding-bottom:22px;
  border-bottom:1px solid var(--line);margin-bottom:32px}
.article h2{font-family:var(--display);font-size:21px;font-weight:700;color:var(--navy);
  line-height:1.35;margin:38px 0 14px;padding-left:12px;border-left:3px solid var(--gold)}
.article p{font-size:16px;color:var(--grey);line-height:1.85;margin-bottom:16px}
.article p strong{color:var(--navy)}
.article ul{margin:0 0 18px}
.article li{font-size:15.5px;color:var(--grey);line-height:1.75;padding:5px 0 5px 20px;position:relative}
.article li::before{content:"";position:absolute;left:0;top:15px;width:6px;height:6px;
  border-radius:50%;background:var(--gold)}
.article .lead{font-size:17px;color:var(--grey-warm);line-height:1.8}
.article .kicker{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--navy);
  background:var(--paper);border-left:2px solid var(--gold);padding:5px 10px;display:inline-block;
  margin-bottom:20px}
.article-cta{margin-top:44px;padding:34px;background:var(--navy);border-radius:4px;color:#fff}
.article-cta h3{font-family:var(--display);font-size:20px;font-weight:700;margin-bottom:12px}
.article-cta p{color:var(--on1);font-size:14.5px;margin-bottom:22px}
.article-cta .row{display:flex;gap:11px;flex-wrap:wrap}

/* ---------- responsive ---------- */
@media(max-width:1020px){
.nav,.head-tel{display:none}
.burger{display:flex}
.nav{position:absolute;top:100%;left:-24px;right:-24px;background:#fff;border-bottom:1px solid var(--line);
  flex-direction:column;align-items:stretch;gap:0;padding:6px 24px 20px;box-shadow:var(--shadow);display:none}
.navtoggle:checked ~ .nav{display:flex}
.nav>li>a{padding:14px 0;border-bottom:1px solid var(--line);display:flex}
.nav-sub{position:static;opacity:1;visibility:visible;transform:none;border:none;box-shadow:none;
  padding:0;min-width:0}
.nav-sub .grp{padding:12px 0 4px}
.nav-sub .grp:not(:first-child){margin-top:4px;padding-top:12px}
.nav-sub a{padding:9px 0 9px 13px;font-size:13.5px}
.hero-grid{grid-template-columns:1fr;gap:0}
.hero-art{display:none}
.trust{grid-template-columns:repeat(2,1fr);margin-top:44px}
.pillars{grid-template-columns:1fr}
.pillar:nth-child(odd){border-right:none}
.pillar:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
.pillar:last-child{border-bottom:none}
.fams{grid-template-columns:1fr}
.steps{grid-template-columns:repeat(2,1fr)}
.step+.step{border-left:none}
.step:nth-child(even){border-left:1px solid var(--line)}
.step:nth-child(n+3){border-top:1px solid var(--line)}
.pgrid{grid-template-columns:repeat(2,1fr)}
.fam-meta{grid-template-columns:1fr}
.top{grid-template-columns:1fr;gap:34px}
.mats{grid-template-columns:repeat(2,1fr)}
.why{grid-template-columns:1fr}
.why>div+div{border-left:none;border-top:1px solid var(--line)}
.inq{grid-template-columns:1fr;gap:32px;padding:34px}
.paths{grid-template-columns:1fr}
.gb{grid-template-columns:1fr;gap:26px}
.formbox{grid-template-columns:1fr}
.reach{grid-template-columns:1fr}
.nlist{grid-template-columns:1fr}
.f-top{gap:28px}
.f-cols{gap:34px}
}
@media(min-width:1021px){
.gb .side{position:sticky;top:104px}
}
@media(max-width:560px){
.wrap{padding:0 17px}
.site-head .wrap{height:64px}
.logo img{height:32px}
.nav{left:-17px;right:-17px;padding:6px 17px 20px}
.hero .wrap{padding-top:50px}
.hero h1{font-size:29px}
.trust{grid-template-columns:1fr}
.sec{padding:46px 0}
.pillars .pillar{padding:28px 22px}
.pillar h3{font-size:17.5px}
.steps{grid-template-columns:1fr}
.step+.step{border-left:none;border-top:1px solid var(--line)}
.step:nth-child(n+3){border-top:1px solid var(--line)}
.pgrid{grid-template-columns:1fr}
.mats{grid-template-columns:1fr}
.gal-main{aspect-ratio:4/3}
.spec-row{grid-template-columns:1fr}
.spec-row .k{border-right:none;padding-bottom:6px}
.spec-row .v{padding-top:9px}
.grid2{grid-template-columns:1fr}
.inq{padding:24px 20px}
.inq h2{font-size:21px}
.formbox .side,.formbox form{padding:28px 22px}
.gb li{grid-template-columns:38px 1fr;gap:12px}
.cta-band{padding:34px 22px}
.f-cols{gap:0;width:100%}
.f-col{width:50%;padding-bottom:18px}
  .article h2{font-size:19px}
  .article-cta{padding:26px 22px}
}

/* -------------------------------------------------------------------------
   Codex phase 2: buyer-first navigation, calmer hero, searchable directory
   ------------------------------------------------------------------------- */
.sec-navy .pillars{grid-template-columns:repeat(3,1fr)}
.finder{padding-top:58px;padding-bottom:58px;background:#fff}
.finder-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.finder-grid a{display:flex;min-height:220px;flex-direction:column;padding:28px;border:1px solid var(--line);border-radius:4px;background:var(--paper);transition:transform .2s,border-color .2s,box-shadow .2s}
.finder-grid a:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 16px 40px rgba(4,32,63,.09)}
.finder-grid span{font-family:var(--mono);font-size:11px;letter-spacing:.15em;color:var(--gold-dark)}
.finder-grid h3{margin:28px 0 10px;font-size:23px;color:var(--navy)}
.finder-grid p{margin:0 0 26px;color:var(--grey-warm);line-height:1.65}
.finder-grid b{margin-top:auto;font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--navy)}
.part-tools{display:grid;grid-template-columns:minmax(260px,1fr) 250px auto;gap:14px;align-items:end;margin:0 0 28px;padding:18px;background:var(--off);border:1px solid var(--line);border-radius:4px}
.part-tools label{font-family:var(--mono);font-size:10px;letter-spacing:.13em;color:var(--navy)}
.part-tools input,.part-tools select{display:block;width:100%;height:46px;margin-top:8px;padding:0 13px;border:1px solid var(--line);border-radius:3px;background:#fff;color:var(--navy);font:14px var(--body)}
.part-tools input:focus,.part-tools select:focus{outline:2px solid rgba(217,167,43,.3);border-color:var(--gold-dark)}
.part-tools output{min-width:78px;padding:14px 0;font-family:var(--mono);font-size:11px;text-align:right;color:var(--grey-warm)}
.directory-grid{max-height:980px;overflow:auto;padding-right:8px;scrollbar-color:var(--gold) var(--off)}
.directory-grid .pcard[hidden]{display:none!important}
.directory-empty{margin-top:18px;padding:16px 18px;border-left:3px solid var(--gold);background:var(--off);color:var(--grey-warm)}
.directory-empty a{font-weight:600;color:var(--navy);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
.hs-slide{animation-name:hs-fade-3;animation-duration:18s}
.hs-dots i{animation-name:hs-dot-3;animation-duration:18s;animation-timing-function:steps(1,end)}
.hs-slide,.hs-dots i{animation-delay:calc(var(--i) * 6s - .45s)}
.hero-shot.is-paused .hs-slide,.hero-shot.is-paused .hs-dots i{animation-play-state:paused}
.hs-toggle{position:absolute;right:11px;bottom:45px;z-index:5;padding:7px 9px;border:1px solid rgba(255,255,255,.5);border-radius:3px;background:rgba(4,32,63,.75);color:#fff;font:9px var(--mono);letter-spacing:.11em;text-transform:uppercase;cursor:pointer}
.hs-toggle:hover,.hs-toggle:focus{border-color:var(--gold);outline:none}
@keyframes hs-fade-3{0%{opacity:0}2.5%{opacity:1}30.5%{opacity:1}33.333%{opacity:0}100%{opacity:0}}
@keyframes hs-dot-3{0%,32%{background-color:var(--gold)}33.5%,100%{background-color:rgba(255,255,255,.4)}}

/* Typography revision: quiet, editorial small type instead of mono AI labels. */
body{font-size:17px;line-height:1.58}
.nav-sub .grp,.f-col h4,.f-bot p,.eyebrow,.chip,.badge,.crumb,.trust b,
.pillar .n,.fam .models,.step .n,.pcard .ref,.pcard .tag,.grp-head span,
.fam-meta b,.gal-main .tag,.ph b,.spec-row .k,.mat .grade,.ctx span,.ctx small,
.field label,.fineprint,.path .num,.direct span,.nmeta,.article .kicker,
.finder-grid span,.finder-grid b,.part-tools label,.part-tools output,.hs-toggle,
.head-wa,.logo-sub,.parentline{font-family:var(--body)}
.eyebrow,.trust b,.pillar .n,.fam-meta b,.ctx span,.field label,.article .kicker,
.finder-grid span,.finder-grid b,.part-tools label,.logo-sub,.parentline{
  letter-spacing:.055em;text-transform:uppercase}
.nav-sub .grp,.f-col h4{letter-spacing:.07em}
.f-bot p,.crumb,.chip,.badge,.fam .models,.pcard .ref,.pcard .tag,.spec-row .k,
.mat .grade,.ctx small,.fineprint,.direct span,.nmeta,.head-wa{letter-spacing:0}
.eyebrow{font-size:12px;font-weight:600}
.trust b{font-size:13px;font-weight:700}
.trust span{font-size:15px}
.fam .models{font-size:12.5px}
.pcard .ref{font-size:12px}
.pcard .tag{font-size:11px}
.f-bot p{font-size:12.5px}
.hero h1{font-weight:700;letter-spacing:-.035em}
.sec-head h2{font-weight:700;letter-spacing:-.025em}

/* Real machine photography for the three main catalogue routes. */
.fam .pic.machine-photo{aspect-ratio:16/9;display:block;background:var(--navy-deep);overflow:hidden}
.fam .pic.machine-photo img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease,filter .3s ease}
.fam:hover .pic.machine-photo img{transform:scale(1.025)}
.fam .pic.machine-vrm{aspect-ratio:2/1}
.fam .pic.machine-vrm img{object-position:center top}
.fam .pic.machine-pen img{object-position:center 44%}
.fam .pic.machine-rrm img{object-position:center 48%}
@media(max-width:560px){body{font-size:16px}.trust b{font-size:12px}.fam .pic.machine-photo{aspect-ratio:16/9}}
@media(max-width:820px){.finder-grid,.sec-navy .pillars{grid-template-columns:1fr}.finder-grid a{min-height:0}.part-tools{grid-template-columns:1fr 1fr}.part-tools output{text-align:left;padding:0}}
@media(max-width:560px){.part-tools{grid-template-columns:1fr}.directory-grid{max-height:760px}.hs-toggle{bottom:41px}.finder{padding-top:42px;padding-bottom:42px}}

/* ==========================================================================
   v1.1 — additions required by the built pages
   Kept at the end of the file so the source of truth above stays readable.
   ========================================================================== */

/* multi-paragraph pillar copy */
.pillar p+p{margin-top:11px}

/* section headers with a kicker */
.sec-head .eyebrow{margin-bottom:15px}
.sec-head.center .eyebrow{justify-content:center}

/* section-level actions */
.sec-action{margin-top:32px;display:flex;gap:12px;flex-wrap:wrap}
.sec-action.center{justify-content:center}
.linkmore{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;color:var(--navy)}
.linkmore i{width:16px;height:2px;background:var(--gold);position:relative;flex:none}
.linkmore i::after{content:"";position:absolute;right:0;top:-2.5px;width:6px;height:6px;
  border-right:2px solid var(--gold);border-top:2px solid var(--gold);transform:rotate(45deg)}

/* part imagery: real shop photos fill the frame (contain, so nothing is cropped);
   line-art placeholders are sized to read at a glance rather than float in the box */
.pcard .pic img,.fam .pic img,.gal-main img{width:100%;height:100%;object-fit:contain}
.pic svg,.gal-thumbs svg{display:block;margin:0 auto}
.pcard .pic svg{width:120px;height:auto}
.fam .pic svg{width:136px;height:auto}
.gal-main svg{width:76%;height:auto}
.hero-art svg{width:100%;height:auto;display:block}

/* on narrow screens the product name should be read before the drawing */
@media(max-width:1020px){.top .pdp{order:-1}}

/* article typography */
.article h3{font-family:var(--display);font-size:16.5px;font-weight:700;
  color:var(--navy);margin:26px 0 10px}
.article a{color:var(--navy);border-bottom:1px solid var(--gold)}
.article .note{margin:22px 0}
.article .lead+.note{margin-top:26px}

/* news sidebar — items announced but not yet published */
.nside .soon{font-size:13.5px;color:var(--grey-warm);padding:10px 0;
  border-bottom:1px solid var(--line);line-height:1.5}
.nside .soon:last-child{border-bottom:none}
.nside .soon b{display:block;color:var(--navy);font-weight:500;margin-bottom:2px}
.nside .soon span{font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:.08em}

/* attachment prompt — the base rules are written for the navy enquiry block,
   so the light contact form needs its own colour context or the bold line
   renders white-on-white. */
.formbox .attach{background:var(--paper);border-color:var(--line)}
.formbox .attach i{background:#fff;border-color:var(--line)}
.formbox .attach p{color:var(--grey-warm)}
.formbox .attach p b{color:var(--navy)}

/* shop photography — the six-tile strip that used to close the contact page was
   removed on the owner's instruction on 2026-09-24 ("out of place there"), and
   its rules came out with it rather than being left behind unused. */

/* ==========================================================================
   v2 — bigger type, more navy, fewer things on screen
   Feedback: "内容太多，精简。字体和配色不够吸睛。"
   The VI palette ratios are ~60% navy / 22% graphite / 13% light grey / 5% gold.
   The first build was almost entirely white, which is why it read as flat —
   so the fix is MORE navy, not new colours. Nothing outside the palette.
   ========================================================================== */

/* --- 1. type scale: everything readable at arm's length ------------------- */
body{font-size:16.5px}
.eyebrow{font-size:11.5px;letter-spacing:.18em;color:var(--grey-warm)}
.eyebrow::before{width:26px;height:2.5px}
.eyebrow.on-navy{color:var(--on2)}

.sec-head{max-width:740px;margin-bottom:40px}
.sec-head h2{font-size:clamp(27px,3.4vw,40px);font-weight:800;letter-spacing:-.022em;
  line-height:1.14;padding-left:15px;border-left:4px solid var(--gold)}
.sec-head p{font-size:17px;color:var(--grey);margin-top:14px;padding-left:19px;line-height:1.62}

.hero h1{font-size:clamp(34px,4.9vw,58px);line-height:1.04;letter-spacing:-.03em}
.hero .lede{font-size:18px;line-height:1.7}
.hero-cta{margin-top:34px}
.btn{padding:15px 26px;font-size:15.5px}
.mini-btn{font-size:14.5px;padding:12px 21px}
.fam-hero{padding:66px 0}
.fam-hero h1{font-size:clamp(32px,4.6vw,52px);line-height:1.06}
.fam-hero p{font-size:17px;line-height:1.68}
.cta-band{padding:64px 52px}
.cta-band h2{font-size:clamp(28px,3.9vw,44px)}
.cta-band p{font-size:17px}

.pillar{padding:44px 38px}
.pillar .n{font-size:12.5px;letter-spacing:.18em;padding-bottom:16px;margin-bottom:24px}
.pillar h3{font-size:24px;line-height:1.2;margin-bottom:14px}
.pillar p{font-size:15.5px;line-height:1.7}
.pillar .benefit{font-size:16.5px;margin-top:24px;padding-left:15px;border-left-width:3px}

.fam .bd{padding:28px 26px 30px}
.fam h3{font-size:20px}
.fam .models{font-size:11.5px;margin:11px 0 16px}
.fam li{font-size:14.5px}
.fam .go{font-size:15px;margin-top:20px}

.step{padding:34px 27px}
.step .n{font-size:14px;font-weight:500}
.step h4{font-size:18px;margin:16px 0 10px}
.step p{font-size:14.5px;line-height:1.62}

.pcard .bd{padding:17px 19px 20px}
.pcard h4{font-size:16px;line-height:1.3}
.pcard .ref{font-size:11.5px}
.pcard .tag{font-size:10.5px;margin-top:11px}
.grp-head{margin:38px 0 20px;padding-bottom:14px}
.grp-head h3{font-size:20px}
.grp-head span{font-size:12px}

.mat{padding:28px 24px}
.mat h3{font-size:16.5px}
.mat .grade{font-size:11.5px;margin:9px 0 12px}
.mat p{font-size:14px;line-height:1.62}
.mat .bar{width:40px;height:3px;margin-bottom:18px}

.why>div{padding:32px 28px}
.why b{font-size:17px}
.why p{font-size:15px;line-height:1.62}

.path{padding:34px 28px 30px}
.path .num{font-size:12px;margin-bottom:22px;padding-bottom:18px}
.path h3{font-size:19px}
.path p{font-size:15px;line-height:1.65}
.path .go{font-size:15px;margin-top:22px}

.gb li{padding:26px 0}
.gb li b{font-size:17px}
.gb li p{font-size:15px;line-height:1.62}

.card{padding:32px 30px}
.card h3{font-size:18px;margin-bottom:18px}
.direct div{font-size:15px;padding:15px 0}
.direct span{font-size:11px}
.human p{font-size:16.5px;line-height:1.72}
.human small{font-size:14px}

.field label{font-size:10.5px}
.field input,.field textarea,.field select{font-size:15px;padding:13px 15px}
.attach p{font-size:13.5px}
.attach p b{font-size:14px}
.fineprint{font-size:11.5px}

.pdp h1{font-size:clamp(30px,3.9vw,44px)}
.pdp .lede{font-size:17px}
.pdp .chips{margin:26px 0 28px}
.chip{font-size:12px;padding:8px 13px}
.spec-row .k{font-size:12.5px;padding:16px 20px}
.spec-row .v{font-size:15.5px;padding:16px 20px}
.spec-row .v span{font-size:13px}
.badge{font-size:11.5px;padding:7px 12px}
.note p{font-size:14px;line-height:1.65}

.nfeature h2{font-size:26px}
.nfeature .bd{padding:30px 32px 34px}
.nfeature p{font-size:15.5px}
.article h1{font-size:clamp(30px,4vw,44px)}
.article h2{font-size:24px;border-left-width:4px;margin:42px 0 16px}
.article p{font-size:16.5px;line-height:1.8}
.article li{font-size:16px}
.article .lead{font-size:18.5px}
.article-cta h3{font-size:22px}
.article-cta p{font-size:15.5px}
.nside h3{font-size:16px}
.nside a,.nside .soon{font-size:14px}

.trust div{padding:24px 22px}
.trust b{font-size:12px}
.trust span{font-size:14.5px}
.fam-meta div{padding:22px 22px}
.fam-meta b{font-size:11px}
.fam-meta span{font-size:14.5px}
.listing .search-box{font-size:15px}

/* --- 2. navy feature sections: this is where the colour comes from -------- */
.sec-navy{background:var(--navy);border-top:none;border-bottom:none;color:#fff}
.sec-navy .sec-head h2{color:#fff;border-left-color:var(--gold)}
.sec-navy .sec-head p{color:var(--on1)}
.sec-navy .eyebrow{color:var(--on2)}
.sec-navy .pillars{border-color:var(--online);background:transparent}
.sec-navy .pillar{border-color:var(--online)}
.sec-navy .pillar .n{color:var(--gold);border-bottom-color:var(--online)}
.sec-navy .pillar h3{color:#fff}
.sec-navy .pillar p{color:var(--on1)}
.sec-navy .pillar .benefit{color:var(--gold)}
.sec-navy .note{background:rgba(255,255,255,.07);border-left-color:var(--gold)}
.sec-navy .note p{color:var(--on1)}
.sec-navy .note b{color:#fff}
.sec-navy .chip{background:rgba(255,255,255,.07);border-color:var(--online);color:var(--on1)}
.sec-navy .chip b{color:#fff}
.sec-navy .linkmore{color:#fff}

/* --- 3. surfaces: stronger edges, gold where it carries meaning ----------- */
.pcard,.fam,.mat,.path,.card,.nfeature{border-color:var(--grey-light)}
.pcard,.fam{position:relative}
.pcard::before,.fam::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--gold);z-index:2}
.pcard:hover,.fam:hover{border-color:var(--gold)}
.nfeature::before{content:"";display:block;height:3px;background:var(--gold)}
.steps{border-color:var(--grey-light)}
.why,.pillars{border-color:var(--grey-light)}
.spec,.formbox{border-color:var(--grey-light)}
.spec-row+.spec-row{border-top-color:var(--line)}

/* --- 4. fewer, larger cards on screen ------------------------------------ */
.pgrid{grid-template-columns:repeat(3,1fr);gap:20px}
.mats{grid-template-columns:repeat(2,1fr);gap:18px}
@media(max-width:1020px){
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .mats{grid-template-columns:1fr}
}

/* --- 5. hero carousel ---------------------------------------------------- */
/* Six frames from the owner's own selection. CSS only, no script: a first
   screen that needs JavaScript to show a photograph has no photograph when the
   script does not run.
   The frame is 3:2 because all six sources are 3:2, so object-fit:cover crops
   under a pixel off each edge — the same "resize and nothing else" rule the
   part photographs follow. */
.hero-art{position:relative;min-height:0}
.hero-shot{margin:0;position:relative;aspect-ratio:3/2;border-radius:4px;
  overflow:hidden;border:1px solid var(--online);background:var(--paper)}
.hs-track{position:absolute;inset:0}
.hs-slide{position:absolute;inset:0;opacity:0;
  animation:hs-fade 30s linear infinite}
.hs-slide img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block}
.hs-cap{position:absolute;left:0;right:0;bottom:0;margin:0;padding:12px 15px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:#fff;
  background:rgba(4,32,63,.88)}
.hs-cap b{color:var(--gold);font-weight:500}

/* The six bars are not decoration for its own sake: a still frame that changes
   on its own reads as a broken image unless something says there is more than
   one. Navy plate behind them, because the frame underneath may be a white
   sweep or a dark shop floor and no single colour reads on both. */
.hs-dots{position:absolute;top:11px;right:11px;display:flex;gap:4px;
  padding:6px 7px;border-radius:3px;background:rgba(4,32,63,.62)}
.hs-dots i{display:block;width:15px;height:2px;background:rgba(255,255,255,.4);
  animation:hs-dot 30s linear infinite}

/* One cycle is 30 s: six frames at 5 s each. The -0.45 s offset starts a
   frame's fade-in 0.45 s before the previous frame begins to fade out, so the
   two cross over instead of leaving the frame blank in between.
   Changing the number of frames means changing three things together: the
   delays below, and the percentages in hs-fade and hs-dot. */
.hs-slide,.hs-dots i{animation-delay:calc(var(--i) * 5s - .45s)}
.hs-slide:nth-child(1),.hs-dots i:nth-child(1){--i:0}
.hs-slide:nth-child(2),.hs-dots i:nth-child(2){--i:1}
.hs-slide:nth-child(3),.hs-dots i:nth-child(3){--i:2}
.hs-slide:nth-child(4),.hs-dots i:nth-child(4){--i:3}
.hs-slide:nth-child(5),.hs-dots i:nth-child(5){--i:4}
.hs-slide:nth-child(6),.hs-dots i:nth-child(6){--i:5}

@keyframes hs-fade{
  0%{opacity:0}
  1.5%{opacity:1}
  15%{opacity:1}
  16.667%{opacity:0}
  100%{opacity:0}
}
@keyframes hs-dot{
  0%,16%{background-color:var(--gold)}
  16.8%,100%{background-color:rgba(255,255,255,.4)}
}

/* Reading a caption should not be a race against the next frame. */
.hero-shot:hover .hs-slide,.hero-shot:hover .hs-dots i,
.hero-shot:focus-within .hs-slide,.hero-shot:focus-within .hs-dots i{
  animation-play-state:paused}

/* Without motion, frame one stands still rather than the carousel collapsing
   to an empty grey box. */
@media(prefers-reduced-motion:reduce){
  .hs-slide,.hs-dots i{animation:none}
  .hs-slide:first-child{opacity:1}
  .hs-dots i:first-child{background-color:var(--gold)}
}

@media(max-width:1020px){
  /* the photographs are real work — show them on phones too, just not above
     the headline */
  .hero-art{display:block;margin-top:34px}
  .hs-cap{font-size:10px;padding:10px 13px}
  .hs-dots{top:9px;right:9px;padding:5px 6px}
  .hs-dots i{width:13px}
}

/* ==========================================================================
   v2.1 — the seam lines, the badges and the photograph frames that the
   revised generator needs. Same palette, no new colours.
   ========================================================================== */

/* the hero and the pillar block are one continuous navy field; this is the
   only thing separating them, so it reads as a deliberate band, not an error */
.hero + .sec-navy{border-top:1px solid var(--online)}

/* "CONFIRM AGAINST DRAWING" has to look like a data state, not decoration.
   Navy on white with a gold bar = 12:1; gold on white would have been 2.9:1. */
.badge{background:#fff;border:1px solid var(--gold);border-left-width:3px;
  font-weight:500;color:var(--navy)}
.sec-navy .badge{background:rgba(255,255,255,.08);color:#fff}

/* one photograph, filling the frame. All main image sources are 4:3 and the
   frame is 4:3, so nothing is cropped at all — the long shaft in the hero
   photo would lose both ends in the square frame the drawing used. */
.gal-main.gal-photo{aspect-ratio:4/3;place-items:stretch;background:var(--paper)}
.gal-main.gal-photo img{object-fit:cover}

/* extra photographs, when a part genuinely has more than one. Never padded
   out with empty slots — a part with one photo has one frame. */
.gal-extra{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:10px}
.gal-extra figure{margin:0;border:1px solid var(--line);border-radius:3px;
  overflow:hidden;background:var(--paper)}
.gal-extra img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain}
.gal-extra figcaption{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  color:var(--muted);background:#fff;border-top:1px solid var(--line);
  padding:8px 10px;line-height:1.5}

/* on navy, a ghost button needs its own border colour or it disappears */
.sec-navy .btn-ghost{border-color:var(--online);color:#fff}
.sec-navy .btn-ghost:hover{border-color:var(--gold);background:rgba(255,255,255,.06)}

/* ==========================================================================
   v2.2 — WhatsApp entry points
   ==========================================================================
   There are four of them, and they are deliberately not all the same shape:
     header   a real number, because a reachable number is a trust signal in
              export trade; the mailbox sits beside it on wide screens and
              drops out first as the header tightens
     footer   text only, no glyph — at 13.5px an icon next to body copy reads
              as noise, and the footer column is the narrow one
     contact  a button in the hero and a row in the direct-contact card
     floating one 54px disc, bottom right, on every page
   ========================================================================== */

.head-wa{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);
  font-size:12.5px;color:var(--grey-warm);white-space:nowrap}
.head-wa:hover{color:var(--navy)}
.wa-ic{width:15px;height:15px;flex:none;display:block}
.f-col a .wa-ic{display:inline-block;vertical-align:-2px;margin-right:6px;width:13px;height:13px}
/* the compact number is the narrow-screen form, declared before the media query
   that turns it on — a later rule of equal specificity would win otherwise */
.wa-tight{display:none}

/* Floating entry point. z-index 80 keeps it below the sticky header (90) so it
   scrolls away under the bar rather than sitting on top of the navigation. */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:80;width:54px;height:54px;
  border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;
  justify-content:center;box-shadow:0 10px 26px rgba(7,43,95,.28);
  transition:background .18s ease,transform .18s ease,color .18s ease}
.wa-float .wa-ic{width:26px;height:26px}
.wa-float:hover{background:var(--gold);color:var(--navy);transform:translateY(-2px)}

/* on a navy panel an inline link must carry its own colour — inheriting the
   muted hint colour would drop it under 3:1 against the navy */
.attach p a{color:#fff;border-bottom:1px solid var(--gold)}
.attach p a:hover{color:var(--gold)}

/* Measured with headprobe.js, not estimated: with the mailbox, the number and
   the quote button all shown the header row needs 938px, so at the narrowest
   desktop width (1021px, the last width that still carries the full nav) only
   35px would be left over. Whichever comes out must therefore come out before
   that point — and it is the mailbox, because it is repeated in the footer and
   on every enquiry surface while the number is not. 1080px keeps the email on
   every common laptop (1280 and up) and still leaves ~95px of slack at 1081. */
@media(max-width:1080px){.head-tel{display:none}}

/* Below 700px the floating disc is the WhatsApp route, and the header gets its
   width back for the quote button. */
@media(max-width:700px){.head-wa{display:none}}

@media(max-width:560px){
  .wa-float{right:14px;bottom:14px;width:48px;height:48px}
  .wa-float .wa-ic{width:23px;height:23px}
  /* at full scroll the disc sits over the end of the page; give the content a
     gap so it never lands on the submit button of an enquiry form */
  main{padding-bottom:64px}
  /* the footer column is 178px here and a group-separated number wraps with the
     last group stranded on its own line, which reads like a typo */
  .wa-full{display:none}
  .wa-tight{display:inline}
}

/* ==========================================================================
   v2.3 — one frame size for every part card
   ==========================================================================
   .pcard .pic declares aspect-ratio:4/3 and centres its content with a grid,
   but that grid row is content-sized, so a photograph proportionally narrower
   than 4:3 pushed the frame open: the 499x434 roller rendered its frame 316px
   tall while the 1000x750 lining plate sat at 272px, and eleven cards in a row
   came out eleven different heights. cardprobe.js measures it. Taking the
   photograph out of flow is what makes the frame, rather than the source file,
   decide the height.

   object-fit stays `contain`. A cropping frame would be a worse fault than a
   letterbox — the same reasoning that governs the contact-strip photographs. */
.pcard .pic{position:relative}
.pcard .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}

/* The line drawings were sized to a fixed 120px, which inside a 362px frame
   reads as an unfinished sketch next to fifty real photographs — and each
   glyph only uses part of its own viewBox, so the drawing came out around 70px
   wide. Sizing by height instead lets the drawing fill the frame. They are
   enlarged rather than redrawn: each glyph's stroke hierarchy is tuned to its
   own viewBox and scales with it. */
.pcard .pic svg{height:64%;width:auto}

/* ==========================================================================
   v2.4 — the catalogue page on a phone
   ==========================================================================
   The Raymond page carries eight group chips and sixty-one cards. At 390px the
   chips laid out one per line — 308px of navigation before the first part. A
   single scrollable strip costs 44px and is the pattern every catalogue uses.

   Scoped to .chips-group and not .chips. The product pages use .chips for their
   spec chips, and making those nowrap turned the row's intrinsic width into the
   sum of every chip: 379px inside a 356px column, which dragged the gallery
   beside it out to 379px and overflowed the page by 6px. */
@media(max-width:700px){
  .chips-group{flex-wrap:nowrap;overflow-x:auto;gap:7px;padding-bottom:7px;
    scrollbar-width:none}
  .chips-group::-webkit-scrollbar{display:none}
  .chips-group .chip{flex:none}
}

/* "8 parts" was breaking across two lines in the group heading. Letting the
   heading row wrap instead means the count moves down whole. */
@media(max-width:560px){
  .grp-head{flex-wrap:wrap;gap:2px 10px}
  .grp-head span{flex:none}
}

/* ==========================================================================
   v2.5 — the parent company
   ==========================================================================
   ABC is the mill wear parts brand; the body behind it is Liangsheng
   Intelligent Equipment. Three placements, in descending order of how often
   they are seen: the header lockup (every page), the line above the home
   headline, and the footer's legal block.

   Set in the ABC palette throughout. Liangsheng's own mark is dark green
   (#14532D) over gold — a second palette, and neither of those two greens is
   in the ABC VI, so validate.py would reject them. More to the point, a
   trademark rendered in a foreign company's colours is a brand violation on
   the parent's side as much as on ours. So this is a *text endorsement* in ABC
   type, not a logo lockup. If the owner wants the real Liangsheng mark beside
   the ABC mark, that is a deliberate two-palette decision and needs to be
   taken as one — it is not something to slip in by accident.

   The lockup stacks rather than sitting inline: "A brand of Liangsheng" is
   wider than the 111px wordmark it would sit next to, and a header row that
   grows sideways is the one thing headprobe.js measures. Stacked, it adds
   9px of height inside a 74px bar instead of ~40px of width. */
.logo{flex-direction:column;align-items:flex-start;gap:4px}
.logo-sub{display:flex;align-items:baseline;gap:5px;font-family:var(--mono);
  font-size:9px;line-height:1;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted)}
.logo-sub i{font-style:normal}
.logo-sub b{font-weight:500;color:var(--navy)}

/* The home hero line. A gold diamond rather than the eyebrow's gold dash —
   the eyebrow sits directly below it, and two identical markers stacked read
   as a mistake.

   Laid out as inline text inside a padded block, not as a flex row. As a flex
   row the marker is the first flex item, so at 390px the wrapped second line
   began at the container edge while the first line began after the marker —
   the marker ended up aligned to half the sentence. Inline text in a
   padding-left block gives the wrap a hanging indent, so line two starts under
   "ABC" where it belongs. */
.parentline{position:relative;padding-left:17px;margin-bottom:15px;
  font-family:var(--mono);font-size:11.5px;line-height:1.6;
  letter-spacing:.12em;text-transform:uppercase}
.parentline::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;
  background:var(--gold);transform:rotate(45deg)}
.parentline .pl-k{color:#fff;font-weight:500;margin-right:9px}
.parentline .pl-t{color:var(--on2);letter-spacing:.1em;margin-right:9px}
.parentline .pl-v{color:var(--gold);font-weight:500}

/* .f-brand p would otherwise win on specificity — one class plus one element
   beats a lone class — so this is scoped to .f-brand .f-parent. */
.f-brand .f-parent{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--muted);line-height:1.65}
.f-brand .f-parent b{color:var(--navy);font-weight:600}

@media(max-width:560px){
  /* Two lines, not one. Side by side the sub-line measured 108px against an
     89px wordmark, which pushed the header row's requirement to 347px of the
     356px available — 9px of slack, and the mono fallback on a phone that has
     not loaded Roboto Mono is wider than the webfont. Stacked it is 56px wide,
     so the lockup is no wider than the wordmark it sits under and the row goes
     back to the width it had before this feature. headprobe.js confirms 0px
     overhang at 390. */
  .logo-sub{flex-direction:column;align-items:flex-start;gap:2px;
    font-size:8px;letter-spacing:.1em}
  .parentline{font-size:10px;padding-left:14px;margin-bottom:13px}
  .parentline .pl-k,.parentline .pl-t{margin-right:7px}
  .f-brand .f-parent{font-size:12px}
}

/* Final carousel overrides must follow the legacy six-frame declarations. */
.hs-slide{animation-name:hs-fade-3;animation-duration:18s}
.hs-dots i{animation-name:hs-dot-3;animation-duration:18s;animation-timing-function:steps(1,end)}
.hs-slide,.hs-dots i{animation-delay:calc(var(--i) * 6s - .45s)}
.hero-shot.is-paused .hs-slide,.hero-shot.is-paused .hs-dots i{animation-play-state:paused}
@keyframes hs-fade-3{0%{opacity:0}2.5%{opacity:1}30.5%{opacity:1}33.333%{opacity:0}100%{opacity:0}}
@keyframes hs-dot-3{0%,32%{background-color:var(--gold)}33.5%,100%{background-color:rgba(255,255,255,.4)}}