:root{
  --ground:#0A0A0A;
  --surface:#141414;
  --line:#2A2A2A;
  --line-soft:#1E1E1E;
  --silver-hi:#F2F2F2;
  --silver:#BEBEBE;
  --silver-dim:#A6A6A6;
  --silver-mute:#7E7E7E;
  --display:"Archivo",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --pad:clamp(20px,5vw,72px);
  --max:1120px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ground);
  color:var(--silver-dim);
  font-family:var(--body);
  font-size:clamp(16px,1.05vw,17px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img,svg{display:block;max-width:100%}

:focus-visible{
  outline:2px solid var(--silver-hi);
  outline-offset:3px;
}

/* ---------- header ---------- */
.site-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px var(--pad);
  border-bottom:1px solid var(--line-soft);
  position:sticky;top:0;z-index:10;
  background:rgba(10,10,10,.86);
  backdrop-filter:blur(8px);
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand-mark{width:34px;height:34px;flex:none}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-name{
  font-family:var(--display);font-weight:700;font-size:15px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--silver-hi);
}
.brand-sub{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--silver-mute);margin-top:3px;
}
.head-link{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--silver);text-decoration:none;padding:8px 0;border-bottom:1px solid var(--line);
  white-space:nowrap;transition:color .2s,border-color .2s;
}
.head-link:hover{color:var(--silver-hi);border-color:var(--silver-mute)}

/* ---------- shared ---------- */
main>section{
  max-width:var(--max);margin:0 auto;
  padding:clamp(56px,8vw,104px) var(--pad);
  border-bottom:1px solid var(--line-soft);
}
.section-head{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--silver-mute);
  margin:0 0 clamp(24px,3vw,36px);
}
.big{font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:var(--silver)}
p{margin:0 0 18px}
p:last-child{margin-bottom:0}

/* ---------- hero ---------- */
.hero{padding-top:clamp(56px,10vw,120px)}
.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--silver-mute);margin:0 0 clamp(24px,3vw,34px);
}
h1{
  font-family:var(--display);font-weight:700;
  font-size:clamp(30px,5.4vw,62px);
  line-height:1.06;letter-spacing:-.015em;
  margin:0 0 clamp(20px,2.5vw,28px);
  max-width:16ch;
  background:linear-gradient(168deg,#FFFFFF 0%,#CFCFCF 42%,#8F8F8F 70%,#EDEDED 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
@supports not (background-clip:text){h1{color:var(--silver-hi);-webkit-text-fill-color:currentColor}}
.lede{font-size:clamp(16px,1.6vw,20px);line-height:1.6;max-width:56ch;color:var(--silver)}

.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(28px,3.5vw,40px)}
.btn{
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;padding:14px 26px;border:1px solid var(--line);
  transition:border-color .2s,color .2s,background .2s;
}
.btn-primary{
  color:#0A0A0A;
  background:linear-gradient(150deg,#FFFFFF 0%,#D2D2D2 55%,#A8A8A8 100%);
  border-color:transparent;font-weight:500;
}
.btn-primary:hover{background:linear-gradient(150deg,#FFFFFF 0%,#E6E6E6 55%,#C6C6C6 100%)}
.btn-ghost{color:var(--silver)}
.btn-ghost:hover{color:var(--silver-hi);border-color:var(--silver-mute)}

.scale{
  display:flex;justify-content:space-between;
  margin-top:clamp(48px,7vw,84px);padding-top:14px;
  border-top:1px solid var(--line);
  background-image:repeating-linear-gradient(to right,var(--line) 0 1px,transparent 1px 40px);
  background-size:100% 7px;background-repeat:no-repeat;background-position:top left;
}
.scale-label{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  color:var(--silver-mute);padding-top:8px;
}
.scale-note{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--silver-mute);margin-top:14px;
}

/* ---------- capabilities ---------- */
.cap-grid{display:grid;gap:clamp(28px,3vw,44px);grid-template-columns:repeat(3,1fr)}
.cap-grid article{border-top:1px solid var(--line);padding-top:20px}
.cap-label{
  font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:.01em;
  color:var(--silver-hi);margin:0 0 12px;
}
@media (max-width:820px){.cap-grid{grid-template-columns:1fr}}

/* ---------- principal ---------- */
.principal{position:relative;overflow:hidden;background:var(--surface)}
.watermark{
  position:absolute;right:-4%;top:50%;transform:translateY(-50%);
  width:min(46%,420px);opacity:.09;pointer-events:none;
}
.principal-body{position:relative;max-width:62ch}
.principal-name{
  font-family:var(--display);font-weight:700;
  font-size:clamp(26px,3.4vw,40px);letter-spacing:.005em;line-height:1.1;
  color:var(--silver-hi);margin:0 0 22px;
}
.pull{
  margin-top:28px;padding-left:20px;border-left:1px solid var(--line);
  color:var(--silver-hi);font-size:clamp(16px,1.4vw,18px);
}
@media (max-width:900px){.watermark{width:70%;right:-18%;opacity:.06}}

/* ---------- categories ---------- */
.cat-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-soft)}
.cat-list li{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:18px 0;border-bottom:1px solid var(--line-soft);
  font-family:var(--display);font-weight:600;
  font-size:clamp(16px,1.9vw,22px);color:var(--silver-hi);line-height:1.25;
}
.cat-list span{
  font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.2em;
  color:var(--silver-mute);flex:none;
}

/* ---------- manufacturers ---------- */
.manufacturers .big{max-width:60ch}
.inline-link{
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--silver-hi);text-decoration:none;border-bottom:1px solid var(--line);
  padding-bottom:4px;transition:border-color .2s;
}
.inline-link:hover{border-color:var(--silver-mute)}

/* ---------- contact ---------- */
.contact-list{margin:0;display:grid;gap:0;grid-template-columns:repeat(2,1fr)}
.contact-list>div{
  padding:20px 0;border-top:1px solid var(--line-soft);
}
.contact-list dt{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--silver-mute);margin-bottom:8px;
}
.contact-list dd{
  margin:0;font-size:clamp(15px,1.5vw,18px);color:var(--silver-hi);
  word-break:break-word;
}
.contact-list dd a{text-decoration:none;border-bottom:1px solid var(--line);transition:border-color .2s}
.contact-list dd a:hover{border-color:var(--silver-mute)}
@media (max-width:640px){.contact-list{grid-template-columns:1fr}}

/* ---------- footer ---------- */
.site-foot{
  max-width:var(--max);margin:0 auto;
  padding:28px var(--pad) 40px;
  display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--silver-mute);
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}