/* Surplus Valuation Co. — shared stylesheet
   Colours sampled from the logo artwork. Change once, updates every page. */

:root{
  --navy:#1F3F70;
  --navy-deep:#14294A;
  --navy-line:#2E5490;
  --ink:#23262B;
  --steel:#6E747C;
  --rule:#D8DCE2;
  --field:#F1F3F6;
  --paper:#FFFFFF;
  --max:1120px;
  --pad:clamp(20px,5vw,48px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy)}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}

/* ---------- type ---------- */
.display{
  font-family:'Archivo',sans-serif;
  font-stretch:88%;
  font-weight:800;
  line-height:1.02;
  letter-spacing:-0.015em;
  text-transform:uppercase;
  margin:0;
}
h1.display{font-size:clamp(2.1rem,6.4vw,4rem)}
h2.display{font-size:clamp(1.5rem,3.6vw,2.3rem)}
h3{font-size:1.05rem;margin:0 0 6px;font-weight:700}
p{margin:0 0 1em}
.lede{font-size:clamp(1.05rem,2.2vw,1.25rem);color:var(--steel);max-width:56ch}

.eyebrow{
  font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--steel);
  margin:0 0 14px;
}
.mono{font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace}

/* ---------- header ---------- */
.site-header{
  border-bottom:1px solid var(--rule);
  background:var(--paper);
  position:sticky;top:0;z-index:50;
}
.header-inner{
  max-width:var(--max);margin:0 auto;padding:0 var(--pad);
  display:flex;align-items:center;justify-content:space-between;
  min-height:76px;gap:16px;
}
.brand{display:flex;align-items:center;text-decoration:none}
.brand img{width:clamp(190px,34vw,260px)}
.nav{display:flex;align-items:center;gap:28px}
.nav a{
  color:var(--ink);text-decoration:none;font-size:.9rem;font-weight:600;
  letter-spacing:.02em;padding:6px 0;border-bottom:2px solid transparent;
}
.nav a:hover,.nav a:focus-visible{border-bottom-color:var(--navy)}
.nav a[aria-current="page"]{border-bottom-color:var(--navy);color:var(--navy)}
.nav .nav-cta{
  background:var(--navy);color:#fff;border:0;border-radius:2px;
  padding:11px 18px;border-bottom:2px solid var(--navy);
}
.nav .nav-cta:hover{background:var(--navy-deep);border-bottom-color:var(--navy-deep)}

.burger{
  display:none;background:none;border:1px solid var(--rule);border-radius:2px;
  width:46px;height:42px;padding:0;cursor:pointer;align-items:center;justify-content:center;
}
.burger span{display:block;width:20px;height:2px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:20px;height:2px;background:var(--ink);
}
.burger span::before{top:-6px}
.burger span::after{top:6px}

/* ---------- hero ---------- */
.hero{
  background:var(--navy-deep);
  color:#fff;
  padding:clamp(56px,10vw,104px) 0 clamp(48px,8vw,84px);
  border-bottom:4px solid var(--navy-line);
}
.hero .eyebrow{color:#9FB4D6}
.hero h1{color:#fff;max-width:16ch}
.hero .hero-sub{
  color:#C6D2E6;font-size:clamp(1.05rem,2.2vw,1.3rem);
  max-width:52ch;margin:22px 0 32px;line-height:1.5;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px}

.btn{
  display:inline-block;text-decoration:none;font-weight:700;
  font-size:.95rem;letter-spacing:.03em;text-transform:uppercase;
  padding:15px 26px;border-radius:2px;border:2px solid transparent;
}
.btn-primary{background:#fff;color:var(--navy-deep);border-color:#fff}
.btn-primary:hover{background:#E4EAF4;border-color:#E4EAF4}
.btn-ghost{color:#fff;border-color:#5A79AC}
.btn-ghost:hover{border-color:#fff}
.btn-solid{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-solid:hover{background:var(--navy-deep);border-color:var(--navy-deep)}

/* ---------- spec strip ---------- */
.spec{background:var(--field);border-bottom:1px solid var(--rule)}
.spec-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  max-width:var(--max);margin:0 auto;padding:0 var(--pad);
}
.spec-item{padding:26px 0;border-left:1px solid var(--rule);padding-left:22px}
.spec-item:first-child{border-left:0;padding-left:0}
.spec-item .k{
  font-family:'IBM Plex Mono',monospace;font-size:clamp(1.1rem,2.6vw,1.5rem);
  font-weight:600;color:var(--navy);display:block;line-height:1.2;
}
.spec-item .v{font-size:.85rem;color:var(--steel);display:block;margin-top:4px}

/* ---------- sections ---------- */
.section{padding:clamp(52px,8vw,84px) 0}
.section-alt{background:var(--field);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.section-head{max-width:60ch;margin-bottom:36px}
.section-head p{margin-top:14px;color:var(--steel)}

/* ---------- category grid ---------- */
.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.cat{background:var(--paper);padding:26px 24px}
.cat h3{color:var(--navy-deep)}
.cat p{font-size:.93rem;color:var(--steel);margin:0 0 12px}
.cat .parts{font-size:.76rem;color:var(--steel);line-height:1.9;border-top:1px dashed var(--rule);padding-top:10px}

/* ---------- nameplate ledger (signature) ---------- */
.plate{
  border:2px solid var(--navy-deep);
  background:var(--paper);
}
.plate-head{
  background:var(--navy-deep);color:#fff;
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:12px 18px;font-family:'IBM Plex Mono',monospace;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
}
.plate-head span:last-child{color:#9FB4D6}
.plate-row{
  display:grid;grid-template-columns:1.1fr 1.4fr 1fr;gap:16px;
  padding:11px 18px;border-top:1px solid var(--rule);
  font-family:'IBM Plex Mono',monospace;font-size:.8rem;align-items:baseline;
}
.plate-row:nth-child(odd){background:#FAFBFC}
.plate-row .mfr{font-weight:600;color:var(--ink)}
.plate-row .pn{color:var(--navy)}
.plate-row .desc{color:var(--steel);font-family:'Archivo',sans-serif;font-size:.82rem}
.plate-note{padding:14px 18px;border-top:2px solid var(--navy-deep);font-size:.83rem;color:var(--steel)}

/* ---------- exclusions ---------- */
.exclude{border-left:4px solid var(--steel);padding:4px 0 4px 22px;max-width:62ch}
.exclude ul{margin:14px 0 0;padding-left:20px}
.exclude li{margin-bottom:7px;color:var(--steel)}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px}
.step .num{
  font-family:'IBM Plex Mono',monospace;font-size:.78rem;letter-spacing:.14em;
  color:var(--navy);display:block;margin-bottom:10px;
  border-bottom:2px solid var(--navy);padding-bottom:8px;
}
.step p{font-size:.93rem;color:var(--steel);margin:0}

/* ---------- cta band ---------- */
.band{background:var(--navy);color:#fff;padding:clamp(44px,7vw,68px) 0}
.band h2{color:#fff;margin-bottom:14px}
.band p{color:#C6D2E6;max-width:52ch}
.band .btn-primary{margin-top:12px}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,6vw,64px);align-items:start}
.card{border:1px solid var(--rule);background:var(--field);padding:26px 24px;border-radius:2px}
.card h3{margin-bottom:10px}
.card p{font-size:.92rem;color:var(--steel)}
.card ul{margin:0;padding-left:20px;font-size:.92rem;color:var(--steel)}
.card li{margin-bottom:6px}
.email-line{font-size:clamp(1.05rem,3vw,1.5rem);font-weight:600;word-break:break-all}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:#A8AEB6;padding:44px 0 32px;font-size:.88rem}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
.site-footer a{color:#DCE2EA;text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.site-footer h4{
  font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:#7E858E;margin:0 0 12px;font-weight:500;
}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:8px}
.footer-bottom{
  border-top:1px solid #383C43;margin-top:32px;padding-top:18px;
  font-size:.78rem;color:#7E858E;
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .burger{display:flex}
  .nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-bottom:1px solid var(--rule);
    padding:8px var(--pad) 18px;
    box-shadow:0 10px 24px rgba(20,41,74,.08);
  }
  .nav.open{display:flex}
  .nav a{padding:14px 0;border-bottom:1px solid var(--rule)}
  .nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--rule)}
  .nav .nav-cta{
    margin-top:14px;text-align:center;border-bottom:0;border-radius:2px;
  }
  .spec-grid{grid-template-columns:1fr}
  .spec-item{border-left:0;border-top:1px solid var(--rule);padding-left:0;padding:18px 0}
  .spec-item:first-child{border-top:0}
  .plate-row{grid-template-columns:1fr;gap:3px;padding:14px 16px}
  .plate-row .desc{font-size:.85rem}
  .contact-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:26px}
}

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

a:focus-visible,button:focus-visible{outline:3px solid var(--navy-line);outline-offset:2px}

/* ---------- line pages ---------- */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,56px)}
.two-col p{color:var(--steel)}
.shelf-note{
  margin-top:36px;border-left:3px solid var(--navy);
  background:var(--paper);padding:20px 22px;max-width:70ch;
}
.shelf-note p:last-child{color:var(--steel);font-size:.95rem}

.related{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);
}
.related li{background:var(--paper)}
.related a{
  display:block;padding:16px 18px;text-decoration:none;color:var(--ink);
  font-weight:600;font-size:.92rem;
}
.related a:hover{background:var(--field);color:var(--navy)}

/* line index on the hub page */
.line-index{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);
}
.line-index li{background:var(--paper)}
.line-index a{display:block;padding:22px 24px;text-decoration:none;color:var(--ink)}
.line-index a:hover{background:var(--field)}
.line-index .ln{display:block;font-weight:700;color:var(--navy-deep);margin-bottom:5px}
.line-index a:hover .ln{color:var(--navy)}
.line-index .lp{
  display:block;font-family:'IBM Plex Mono',monospace;font-size:.74rem;
  color:var(--steel);line-height:1.7;
}

.footer-grid-wide{grid-template-columns:1.3fr .8fr 1.1fr}
.footer-lines{columns:2;column-gap:20px}
.footer-lines li{font-size:.82rem;break-inside:avoid}

@media (max-width:900px){
  .two-col{grid-template-columns:1fr}
  .footer-grid-wide{grid-template-columns:1fr}
  .footer-lines{columns:2}
}

/* four-column footer + situation prose */
.footer-grid-wide{grid-template-columns:1.15fr .7fr .95fr .95fr}
.prose{max-width:68ch}
.prose p{color:var(--steel)}
.line-index .lp{font-family:'Archivo',sans-serif;font-size:.85rem}
.line-index .lp-mono{font-family:'IBM Plex Mono',monospace;font-size:.74rem}
@media (max-width:900px){.footer-grid-wide{grid-template-columns:1fr}}


/* ---- part-number table (owned by build_site.py) ---- */
.plate-row2{
  display:grid;
  grid-template-columns:minmax(180px,1fr) 1.2fr;
  gap:16px;
  padding:11px 18px;
  border-top:1px solid var(--rule);
  font-family:'IBM Plex Mono',monospace;
  font-size:.82rem;
  align-items:baseline;
}
.plate-row2:nth-child(odd){background:#FAFBFC}
.plate-row2 .pn{color:var(--navy);font-weight:600;word-break:break-all}
.plate-row2 .desc{
  color:var(--steel);
  font-family:'Archivo',sans-serif;
  font-size:.84rem;
}
@media (max-width:900px){
  .plate-row2{grid-template-columns:1fr;gap:2px;padding:12px 16px}
  .plate-row2 .desc:empty{display:none}
}