:root{
  --ground:#EDEBE2; --surface:#FBFAF6; --sunk:#E2DFD3;
  --ink:#171A16; --muted:#5B6158; --line:#D2CFC1;
  --bronze:#8A6A21; --bronze-soft:#F0E4C4;
  --patina:#2C6353; --flame:#A63F1B;
  --on-dark:#FAF9F5; --cast:#22261F;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#111310; --surface:#191C17; --sunk:#20241E;
    --ink:#EBE8DE; --muted:#9FA695; --line:#2E332B;
    --bronze:#D6AC54; --bronze-soft:#3A2F14;
    --patina:#71C1A8; --flame:#E0744E;
    --on-dark:#FAF9F5; --cast:#0C0E0B;
  }
}
:root[data-theme="dark"]{
  --ground:#111310; --surface:#191C17; --sunk:#20241E;
  --ink:#EBE8DE; --muted:#9FA695; --line:#2E332B;
  --bronze:#D6AC54; --bronze-soft:#3A2F14;
  --patina:#71C1A8; --flame:#E0744E;
  --on-dark:#FAF9F5; --cast:#0C0E0B;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.6; -webkit-text-size-adjust:100%;
}
.wrap{max-width:1080px; margin-inline:auto; padding-inline:16px}
section{padding-block:clamp(40px,5.5vw,70px)}
h1,h2,h3,h4{font-family:"Archivo",system-ui,sans-serif; text-wrap:balance; margin:0}
h1{font-weight:800; font-size:clamp(28px,5vw,50px); line-height:1.06; letter-spacing:-.02em}
h2{font-weight:800; font-size:clamp(22px,3vw,32px); line-height:1.12; letter-spacing:-.015em}
h3{font-weight:600; font-size:18px; line-height:1.25}
h4{font-weight:600; font-size:16px}
p{margin:0}
.lede{font-size:clamp(16.5px,1.8vw,19px); color:var(--muted); max-width:64ch}
.eyebrow{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--bronze); margin:0}
.mono{font-family:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace}
a{color:inherit}
img{max-width:100%; height:auto}
.stack{display:flex; flex-direction:column; gap:18px}
.stack-lg{display:flex; flex-direction:column; gap:30px}

/* header */
header.bar{position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--ground) 92%, transparent);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.bar-in{display:flex; align-items:center; gap:18px; min-height:58px}
.brand{display:flex; align-items:baseline; gap:9px; margin-right:auto; min-width:0; text-decoration:none}
.brand b{font-family:"Archivo"; font-weight:800; letter-spacing:-.01em; font-size:17px; white-space:nowrap}
.brand span{font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); white-space:nowrap}
@media (max-width:620px){
  .bar-in{gap:10px; min-height:52px}
  .brand b{font-size:14.5px; letter-spacing:0}
  .brand span{display:none}
  header.bar .btn{padding:8px 12px; font-size:13px; min-height:38px; white-space:nowrap}
}
nav.top{display:flex; gap:18px; font-size:14px}
nav.top a{color:var(--muted); text-decoration:none}
nav.top a:hover,nav.top a[aria-current="page"]{color:var(--ink)}
@media (max-width:900px){nav.top{display:none}}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:"Archivo"; font-weight:600; font-size:14px; letter-spacing:.01em;
  padding:10px 16px; min-height:42px; border-radius:2px; text-decoration:none; cursor:pointer;
  background:var(--cast); color:var(--on-dark); border:1px solid var(--cast)}
.btn:hover{background:var(--bronze); border-color:var(--bronze); color:#17140B}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn.ghost:hover{border-color:var(--bronze); color:var(--bronze); background:transparent}
:focus-visible{outline:2px solid var(--bronze); outline-offset:2px}
.skip{position:absolute; left:-9999px}
.skip:focus{left:16px; top:10px; z-index:40; background:var(--surface); padding:8px 12px; border:1px solid var(--bronze)}

/* mobile nav */
.mnav{display:none; border-bottom:1px solid var(--line); background:var(--surface)}
@media (max-width:900px){.mnav{display:block}}
.mnav .wrap{display:flex; gap:16px; overflow-x:auto; padding-block:10px; font-size:13.5px; -webkit-overflow-scrolling:touch}
.mnav a{color:var(--muted); text-decoration:none; white-space:nowrap}
.mnav a[aria-current="page"]{color:var(--bronze)}

/* hero */
.hero{padding-block:clamp(36px,5vw,66px) clamp(24px,3.5vw,40px)}
.hero-grid{display:grid; grid-template-columns:1.25fr .85fr; gap:clamp(22px,4vw,50px); align-items:start}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr}}
.hero h1 em{font-style:normal; color:var(--bronze)}
.hero-cta{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px}
.kv{border:1px solid var(--line); background:var(--surface)}
.kv div{display:flex; justify-content:space-between; gap:14px; padding:11px 14px; border-bottom:1px solid var(--line)}
.kv div:last-child{border-bottom:0}
.kv dt{font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.kv dd{margin:0; font-family:"IBM Plex Mono",monospace; font-size:13.5px; text-align:right; font-variant-numeric:tabular-nums}
dl{margin:0}

/* page head */
.phead{padding-block:clamp(30px,4vw,52px) clamp(18px,2.5vw,26px); border-bottom:1px solid var(--line)}
.crumb{font-size:12.5px; color:var(--muted); display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px}
.crumb a{text-decoration:none; color:var(--muted)}
.crumb a:hover{color:var(--bronze)}

/* strip */
.strip{background:var(--cast); color:var(--on-dark)}
.strip .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; padding-block:0}
@media (max-width:760px){.strip .wrap{grid-template-columns:repeat(2,1fr)}}
.stat{padding:22px 4px 24px}
.stat b{display:block; font-family:"Archivo"; font-weight:800; font-size:clamp(21px,3vw,29px); letter-spacing:-.01em; color:var(--on-dark)}
.stat span{font-size:13px; color:#B9BDAF; line-height:1.4; display:block; margin-top:4px}

/* blocks */
.head{display:flex; flex-direction:column; gap:12px; margin-bottom:28px; max-width:72ch}
.cols{display:grid; gap:18px}
.c3{grid-template-columns:repeat(3,1fr)}
.c2{grid-template-columns:repeat(2,1fr)}
@media (max-width:860px){.c3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.c3,.c2{grid-template-columns:1fr}}

.prod{border:1px solid var(--line); background:var(--surface); padding:20px 20px 22px;
  display:flex; flex-direction:column; gap:10px; text-decoration:none}
a.prod:hover{border-color:var(--bronze)}
.prod .tag{font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--patina); font-weight:600}
.prod p{font-size:14.5px; color:var(--muted)}
.prod ul{margin:2px 0 0; padding-left:0; list-style:none; display:flex; flex-direction:column; gap:5px}
.prod li{font-size:13.5px; display:flex; gap:9px}
.prod li::before{content:""; flex:0 0 6px; height:6px; margin-top:8px; background:var(--bronze)}
.prod .more{font-size:13.5px; color:var(--bronze); font-weight:600; margin-top:auto; padding-top:6px}

/* prose */
.prose{max-width:72ch; display:flex; flex-direction:column; gap:16px}
.prose h2{margin-top:14px}
.prose h3{margin-top:10px}
.prose p,.prose li{font-size:16.5px}
.prose ul,.prose ol{margin:0; padding-left:22px; display:flex; flex-direction:column; gap:8px}
.prose strong{font-weight:600}

/* steps */
ol.steps{list-style:none; margin:0; padding:0; counter-reset:s;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line)}
@media (max-width:860px){ol.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){ol.steps{grid-template-columns:1fr}}
ol.steps li{counter-increment:s; background:var(--surface); padding:20px; display:flex; flex-direction:column; gap:7px}
ol.steps li::before{content:counter(s,decimal-leading-zero);
  font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--bronze); letter-spacing:.08em}
ol.steps h3{font-size:16.5px}
ol.steps p{font-size:14px; color:var(--muted)}

/* tables */
.tbl{overflow-x:auto; border:1px solid var(--line); background:var(--surface)}
table{border-collapse:collapse; width:100%; min-width:520px; font-size:14.5px; font-variant-numeric:tabular-nums}
caption{text-align:left; padding:11px 14px; font-size:12px; color:var(--muted); letter-spacing:.06em;
  text-transform:uppercase; font-family:"IBM Plex Mono",monospace}
th,td{text-align:left; vertical-align:top; padding:11px 14px; border-bottom:1px solid var(--line)}
th{font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted);
  font-weight:600; border-bottom:1.5px solid var(--bronze); white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
td:first-child{font-weight:600}
td .mono{font-size:13.5px}

/* terms grid */
.terms{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
@media (max-width:700px){.terms{grid-template-columns:1fr}}
.term{background:var(--surface); padding:18px 20px}
.term dt{font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin-bottom:5px}
.term dd{margin:0; font-size:15px}
.term dd small{display:block; color:var(--muted); font-size:13px; margin-top:3px}

/* callout */
.callout{border-left:3px solid var(--bronze); background:var(--surface); padding:16px 18px; display:flex; flex-direction:column; gap:8px}
.callout p{font-size:15px}
.callout .eyebrow{color:var(--patina)}

/* rfq */
.rfq{background:var(--cast); color:var(--on-dark)}
.rfq h1,.rfq h2{color:var(--on-dark)}
.rfq .lede{color:#B9BDAF}
.rfq .eyebrow{color:var(--bronze)}
.rfq-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(22px,4vw,44px); align-items:start}
@media (max-width:820px){.rfq-grid{grid-template-columns:1fr}}
.form{display:flex; flex-direction:column; gap:12px}
.field{display:flex; flex-direction:column; gap:5px}
.field label{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#B9BDAF}
.field input,.field textarea,.field select{
  font:inherit; font-size:16px; color:var(--on-dark); background:#2C312A;
  border:1px solid #3B4138; border-radius:2px; padding:10px 12px; min-height:44px; width:100%}
.field textarea{min-height:92px; resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#7E8678}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:480px){.row2{grid-template-columns:1fr}}
.rfq .btn{background:var(--bronze); border-color:var(--bronze); color:#17140B}
.rfq .btn.ghost{background:transparent; color:var(--on-dark); border-color:#3B4138}
.rfq .btn:hover{filter:brightness(1.08)}
.out{font-family:"IBM Plex Mono",monospace; font-size:12.5px; white-space:pre-wrap; color:#C9CEC0;
  background:#191D18; border:1px solid #3B4138; padding:14px; margin:0; max-height:280px; overflow:auto}
.contact-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.contact-list li{display:flex; flex-direction:column; gap:2px; font-size:15px}
.contact-list span{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#B9BDAF}
.contact-list a{color:var(--on-dark)}

/* faq */
details{border-bottom:1px solid var(--line); padding:14px 0}
details summary{cursor:pointer; font-weight:600; font-size:16px; list-style:none; display:flex; gap:12px; align-items:flex-start}
details summary::-webkit-details-marker{display:none}
details summary::before{content:"+"; color:var(--bronze); font-family:"IBM Plex Mono",monospace; flex:0 0 auto}
details[open] summary::before{content:"–"}
details p{margin-top:9px; padding-left:24px; color:var(--muted); font-size:15px; max-width:74ch}

/* guide cards */
.guide{border:1px solid var(--line); background:var(--surface); padding:18px 20px;
  display:flex; flex-direction:column; gap:8px; text-decoration:none}
.guide:hover{border-color:var(--bronze)}
.guide h3{font-size:17px}
.guide p{font-size:14.5px; color:var(--muted)}
.guide .meta{font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--bronze)}

/* cta band */
.band{background:var(--sunk); border-block:1px solid var(--line)}
.band .wrap{display:flex; flex-wrap:wrap; gap:18px 30px; align-items:center; justify-content:space-between; padding-block:30px}
.band h2{font-size:clamp(20px,2.4vw,26px)}
.band p{color:var(--muted); font-size:15px; max-width:58ch; margin-top:6px}

footer.site{border-top:1px solid var(--line); background:var(--sunk)}
footer.site .wrap{padding-block:30px 40px; display:grid; grid-template-columns:repeat(4,1fr);
  gap:22px 32px; font-size:13.5px; color:var(--muted)}
@media (max-width:760px){footer.site .wrap{grid-template-columns:repeat(2,1fr)}}
footer.site b{color:var(--ink); display:block; margin-bottom:8px; font-family:"Archivo"; font-size:13px;
  letter-spacing:.08em; text-transform:uppercase}
footer.site ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
footer.site a{text-decoration:none}
footer.site a:hover{color:var(--bronze)}
.legal{border-top:1px solid var(--line); font-size:12.5px; color:var(--muted)}
.legal .wrap{padding-block:16px 22px; display:flex; flex-wrap:wrap; gap:8px 24px}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important; scroll-behavior:auto}}
