/* XIANYU ALLOY — technical content system
   Light, precise, print-like. Numbers in mono. */

:root{
  --paper:#fdfdfc;
  --paper-2:#f6f6f3;
  --ink:#101418;
  --ink-2:#39424a;
  --mute:#6e7671;
  --rule:#e3e5e0;
  --rule-2:#eff0ec;
  --copper:#a3572a;
  --copper-l:#faf3ec;
  --steel:#1f3d4d;
  --steel-l:#eef3f5;
  --ok:#1d6b45;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 16px/1.68 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:var(--copper);text-decoration:none;border-bottom:1px solid rgba(163,87,42,.25)}
a:hover{border-bottom-color:var(--copper)}
img{max-width:100%}

/* ---------- shell ---------- */
.shell{max-width:1120px;margin:0 auto;padding:0 32px}
.narrow{max-width:760px}

/* ---------- header ---------- */
.site-head{border-bottom:1px solid var(--rule);background:rgba(253,253,252,.92);
  position:sticky;top:0;z-index:30;backdrop-filter:saturate(180%) blur(6px)}
.site-head .inner{max-width:1120px;margin:0 auto;padding:14px 32px;
  display:flex;align-items:center;gap:32px}
.lockup{display:flex;align-items:baseline;gap:10px;border:none;color:var(--ink)}
.lockup .mark{font:650 15px/1 var(--mono);letter-spacing:.16em}
.lockup .sub{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.site-nav{margin-left:auto;display:flex;gap:26px;font-size:13px;letter-spacing:.02em}
.site-nav a{color:var(--ink-2);border-bottom:1px solid transparent;padding-bottom:2px}
.site-nav a:hover{color:var(--copper);border-bottom-color:var(--copper)}
.site-nav a.on{color:var(--copper);border-bottom-color:var(--copper)}

/* ---------- hero ---------- */
.hero{padding:72px 0 56px;border-bottom:1px solid var(--rule);
  background:
    linear-gradient(90deg,rgba(31,61,77,.045) 1px,transparent 1px) 0 0/64px 64px,
    linear-gradient(180deg,rgba(31,61,77,.045) 1px,transparent 1px) 0 0/64px 64px,
    var(--paper);
}
.eyebrow{font:600 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--copper);margin-bottom:20px}
h1{font-size:42px;line-height:1.18;letter-spacing:-.022em;margin:0 0 20px;font-weight:650;max-width:20ch}
h1 em{font-style:normal;color:var(--copper)}
.lede{font-size:17.5px;line-height:1.7;color:var(--ink-2);max-width:62ch;margin:0}
.spec-strip{display:flex;flex-wrap:wrap;gap:0;margin-top:40px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.spec-strip div{flex:1 1 150px;padding:16px 22px 16px 0;border-right:1px solid var(--rule-2)}
.spec-strip div:last-child{border-right:none}
.spec-strip b{display:block;font:600 21px/1.2 var(--mono);letter-spacing:-.02em;color:var(--ink)}
.spec-strip span{display:block;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-top:6px}

/* ---------- sections ---------- */
section{padding:56px 0}
section + section{border-top:1px solid var(--rule)}
.sec-label{font:600 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:14px}
h2{font-size:27px;line-height:1.28;letter-spacing:-.018em;margin:0 0 18px;font-weight:650;max-width:30ch}
h3{font-size:17px;margin:34px 0 10px;font-weight:650;color:var(--steel)}
h4{font-size:14px;margin:22px 0 6px;font-weight:650;letter-spacing:.01em}
p{margin:13px 0;color:var(--ink-2)}
p.note{font-size:13px;color:var(--mute);line-height:1.65}
ul,ol{color:var(--ink-2);padding-left:20px}
li{margin:6px 0}
strong{color:var(--ink);font-weight:650}
code{font:500 13px/1 var(--mono);background:var(--paper-2);padding:2px 6px;border-radius:3px;color:var(--steel)}

/* ---------- tables ---------- */
.tbl-wrap{overflow-x:auto;margin:18px 0 22px}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font:600 11px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;
   color:var(--mute);padding:0 16px 8px 0;border-bottom:1px solid var(--ink);white-space:nowrap}
td{padding:10px 16px 10px 0;border-bottom:1px solid var(--rule-2);color:var(--ink-2);vertical-align:top}
td.num,td code{font-family:var(--mono);font-size:13px}
td:first-child{color:var(--ink);font-weight:500}
tr.hl td{background:var(--copper-l)}

/* ---------- cards ---------- */
.grid{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);margin:26px 0}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.cell{background:var(--paper);padding:24px 26px}
.cell .k{font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--copper);margin-bottom:10px}
.cell h4{margin:0 0 8px;font-size:15.5px;color:var(--ink)}
.cell p{margin:0;font-size:13.8px;line-height:1.62;color:var(--mute)}
.cell b{font:600 15px/1.3 var(--mono);color:var(--ink)}

/* ---------- callout ---------- */
.callout{border-left:2px solid var(--copper);background:var(--copper-l);padding:18px 22px;margin:24px 0}
.callout .k{font:600 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--copper);margin-bottom:8px}
.callout p{margin:0;color:#5d4028;font-size:14.5px}
.callout.cool{border-color:var(--steel);background:var(--steel-l)}
.callout.cool .k{color:var(--steel)}
.callout.cool p{color:var(--ink-2)}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--rule);margin-top:26px}
.faq details{border-bottom:1px solid var(--rule-2);padding:14px 0}
.faq summary{cursor:pointer;font-weight:600;color:var(--ink);list-style:none;display:flex;gap:12px;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";font:400 16px/1 var(--mono);color:var(--copper);flex:0 0 12px}
.faq details[open] summary::before{content:"–"}
.faq .a{padding:10px 0 4px 24px;color:var(--ink-2);font-size:14.5px;line-height:1.66}

/* ---------- cta ---------- */
.cta{background:var(--ink);color:#f2f2ef;padding:44px 40px;margin:56px 0 0;border-radius:2px}
.cta h3{color:#fff;margin:0 0 10px;font-size:21px}
.cta p{color:#b9bdb8;margin:0 0 22px;max-width:56ch;font-size:14.5px}
.btn{display:inline-block;background:var(--copper);color:#fff;border:none;padding:11px 20px;
  font:600 13px/1 var(--mono);letter-spacing:.06em;border-radius:2px}
.btn:hover{background:#8e4a22;border:none}
.btn.ghost{background:transparent;border:1px solid #59605c;color:#e6e8e4;margin-left:10px}
.btn.ghost:hover{background:#1b2126}

/* ---------- spec list (label/value rows) ---------- */
.specs{display:grid;grid-template-columns:200px 1fr;border-top:1px solid var(--rule);margin:20px 0}
.specs dt{padding:11px 16px 11px 0;border-bottom:1px solid var(--rule-2);font-size:13px;color:var(--mute);letter-spacing:.02em}
.specs dd{padding:11px 0;border-bottom:1px solid var(--rule-2);margin:0;font-size:14px;color:var(--ink);
  font-family:var(--mono);font-size:13.2px}

/* ---------- breadcrumb ---------- */
.crumb{font-size:12px;color:var(--mute);padding:18px 0 0;letter-spacing:.02em}
.crumb a{color:var(--mute);border:none}
.crumb a:hover{color:var(--copper)}
.crumb span{margin:0 7px;color:#c3c7c2}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--rule);margin-top:0;padding:40px 0 60px;background:var(--paper-2)}
.site-foot .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
.site-foot h5{font:600 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:0 0 12px}
.site-foot a{display:block;color:var(--ink-2);font-size:13.5px;margin:7px 0;border:none}
.site-foot a:hover{color:var(--copper)}
.site-foot p{font-size:12.5px;color:var(--mute);line-height:1.7;margin:6px 0;max-width:34ch}
.legal{margin-top:34px;padding-top:18px;border-top:1px solid var(--rule);font-size:11.5px;color:var(--mute);line-height:1.7}

@media(max-width:860px){
  .shell{padding:0 20px}
  .site-head .inner{padding:12px 20px;gap:16px}
  .site-nav{display:none}
  h1{font-size:31px}
  h2{font-size:22px}
  .g2,.g3{grid-template-columns:1fr}
  .specs{grid-template-columns:1fr}
  .specs dt{border-bottom:none;padding-bottom:0}
  .site-foot .cols{grid-template-columns:1fr 1fr}
  .cta{padding:32px 24px}
}

@media print{
  .site-head,.site-nav,.cta,.site-foot{display:none}
  body{font-size:11pt}
  a{color:var(--ink);border:none}
}

/* ---------- enquiry form (Netlify Forms) ---------- */
.enq{margin:8px 0 0}
.enq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px}
.enq-full{grid-column:1/-1}
@media (max-width:680px){.enq-grid{grid-template-columns:1fr}}
.enq label{display:block;font:600 10.5px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);margin:0 0 7px}
.enq input,.enq select,.enq textarea{
  width:100%;font:400 15px/1.5 inherit;color:var(--ink);background:var(--paper);
  border:1px solid var(--rule);border-radius:2px;padding:10px 12px;transition:border-color .12s,box-shadow .12s}
.enq input:focus,.enq select:focus,.enq textarea:focus{
  outline:none;border-color:var(--copper);box-shadow:0 0 0 3px var(--copper-l)}
.enq textarea{min-height:96px;resize:vertical}
.enq .hint{font-size:12.5px;color:var(--mute);margin:6px 0 0}
.enq-submit{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:22px;
  padding-top:20px;border-top:1px solid var(--rule)}
.enq-submit .btn{cursor:pointer;font-size:15px}
.enq-note{font-size:12.5px;color:var(--mute);margin:0;max-width:42ch}
.enq-alt{font-size:13.5px;color:var(--ink-2);margin:18px 0 0}
.enq-alt a{color:var(--copper)}
.hp{position:absolute;left:-9999px}

/* ghost button on light page background (the base .ghost assumes a dark section) */
.enq-submit .btn.ghost{background:transparent;border:1px solid #c9cdc7;color:var(--ink);margin-left:0}
.enq-submit .btn.ghost:hover{background:var(--paper-2);border-color:#a9afa8;color:var(--ink)}

/* ---------- direct contact block (no form, no backend) ---------- */
.contact-strip{display:grid;grid-template-columns:1fr 1fr;gap:26px;
  margin-top:34px;padding-top:26px;border-top:1px solid var(--rule)}
@media (max-width:680px){.contact-strip{grid-template-columns:1fr;gap:20px}}
.contact-strip .k{font:600 10.5px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);margin:0 0 9px}
.contact-strip .big{display:inline-block;font:500 18.5px/1.3 inherit;color:var(--ink);
  text-decoration:none;border-bottom:1px solid var(--copper);padding-bottom:2px;
  word-break:break-all}
.contact-strip .big:hover{color:var(--copper)}
.contact-strip .copy{display:inline-block;vertical-align:baseline;margin-left:12px;
  font:500 11.5px/1 var(--mono);color:var(--mute);text-decoration:none;
  border:1px solid var(--rule);border-radius:2px;padding:5px 8px;transition:.12s}
.contact-strip .copy:hover{color:var(--ink);border-color:#a9afa8;background:var(--paper-2)}
.contact-strip .hint{margin:8px 0 0}
.enq label .opt{font-weight:400;letter-spacing:.04em;text-transform:none;
  color:var(--mute);opacity:.8;margin-left:4px}
.enq input,.enq select,.enq textarea{background:#fff}
