/* Copper State Supply — shared stylesheet
   v2.0 "distributor". The site sells information technology first, and this
   revision makes it look like it. The previous system was an old-line industrial
   supply house: warm bone ground, slab-serif headings, and a navigation bar made
   of photographed copper. All three read as a hardware counter, which is the wrong
   counter. This one reads as technical distribution — cool ground, graphite chrome,
   one sans face, monospace where a part number belongs, and roughly a third more
   content per screen.

   Copper stays. It is the company's name and it is now the only saturated colour
   on the page, so it carries more weight than it did while competing with a copper
   header. */

:root{
  /* ground + ink — cool neutrals, not warm */
  --bg:#F6F7F9;
  --surface:#FFFFFF;
  --tint:#EDEFF2;
  --tint-2:#F2F4F6;
  --ink:#12161B;
  --muted:#525C67;
  --faint:#858E99;
  --line:#DCE0E5;
  --line-soft:#E7EAEE;

  /* the one accent */
  --copper:#B0561F;
  --copper-dark:#8E4315;
  --copper-tint:#FBEDE3;
  --copper-line:#EED9C8;

  /* chrome: header and footer share one ground */
  --deep:#12171D;
  --deep-2:#1C232B;
  --deep-3:#242D36;
  --deep-line:rgba(255,255,255,.10);
  --on-deep:#E9EDF2;
  --on-deep-dim:#98A3AF;
  --copper-on-deep:#E48F55;

  --sans:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:ui-monospace,SFMono-Regular,'Cascadia Mono',Consolas,'Liberation Mono',monospace;

  --r:7px;
  --r-sm:4px;
  --wrap:1160px;
  --wrap-narrow:1060px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility}
p{text-wrap:pretty}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 26px}
a{color:var(--copper)}
a:focus-visible,button:focus-visible{outline:2.5px solid var(--copper);outline-offset:3px;
  border-radius:3px}
img{max-width:100%}
/* One face. The slab serif went with the industrial read; headings are now the
   same family as body copy, set tight and heavy so hierarchy comes from weight
   and tracking rather than from a second typeface. */
h1,h2,h3,h4{font-family:var(--sans);font-weight:700;letter-spacing:-.021em;
  line-height:1.18;text-wrap:balance}
.skip{position:absolute;left:-9999px;background:var(--deep);color:#fff;
  padding:10px 16px;border-radius:var(--r-sm);z-index:200}
.skip:focus{left:12px;top:12px}

/* part numbers, SKUs, quantities — anything a buyer would copy and paste */
.pnum{font-family:var(--mono);font-size:.92em;letter-spacing:-.01em}

/* ---------------- buttons ---------------- */
.btn{display:inline-block;font-family:var(--sans);font-weight:600;font-size:15px;
  text-decoration:none;padding:10px 18px;border-radius:var(--r-sm);white-space:nowrap;
  border:1px solid transparent;cursor:pointer;letter-spacing:-.005em;
  transition:background .14s ease,border-color .14s ease,color .14s ease}
.btn-primary{background:var(--copper);color:#fff}
.btn-primary:hover{background:var(--copper-dark)}
.btn-quiet{border-color:var(--line);color:var(--ink);background:var(--surface)}
.btn-quiet:hover{border-color:#BFC6CE;background:var(--tint-2)}
.btn-lg{padding:13px 22px;font-size:15.5px}

/* ---------------- utility strip ---------------- */
/* The distributor pattern: the quote channel sits above the navigation, not
   inside it, so a buyer never has to hunt for the phone number. Scrolls away —
   only the nav bar below it is sticky. */
.utilbar{background:var(--deep-2);color:var(--on-deep-dim);font-size:13.5px;
  border-bottom:1px solid var(--deep-line)}
.utilbar .wrap{display:flex;align-items:center;gap:8px 24px;flex-wrap:wrap;
  padding-top:7px;padding-bottom:7px}
.utilbar a{color:var(--on-deep);text-decoration:none;font-weight:600}
.utilbar a:hover{color:#fff;text-decoration:underline}
.utilbar .sep{color:rgba(255,255,255,.22)}
.utilbar .push{margin-left:auto}
.utilbar strong{color:var(--copper-on-deep);font-weight:700;letter-spacing:.02em;
  text-transform:uppercase;font-size:11.5px}
@media (max-width:760px){
  .utilbar .push{margin-left:0}
  .utilbar .hide-sm{display:none}
}

/* ---------------- header + dropdown nav ---------------- */
/* Flat graphite. The photographed copper sheet was removed in v2.0: it was 533KB
   on every first paint and it was the single strongest "hardware counter" signal
   on the page. Copper survives as the plate and the accent. */
header{position:sticky;top:0;z-index:100;background:var(--deep);
  border-bottom:1px solid rgba(0,0,0,.4);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 1px 12px rgba(10,14,18,.16)}
.bar{position:relative;z-index:2;display:flex;align-items:center;gap:20px;
  padding:11px 26px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;
  color:var(--on-deep);margin-right:auto}
.plate{width:32px;height:32px;border-radius:var(--r-sm);background:var(--copper);
  color:#fff;font-family:var(--sans);font-weight:700;font-size:14px;
  letter-spacing:-.02em;display:flex;align-items:center;justify-content:center;
  flex:0 0 auto}
.brand-name{font-family:var(--sans);font-weight:700;font-size:17.5px;
  letter-spacing:-.024em;line-height:1.15;white-space:nowrap;color:#fff}

.mainnav{display:flex;align-items:center;gap:2px;list-style:none}
.mainnav>li{position:relative}
.navlink,.navtop{display:inline-flex;align-items:center;gap:5px;font-family:var(--sans);
  font-size:14.5px;font-weight:500;color:var(--on-deep-dim);text-decoration:none;
  padding:8px 11px;border-radius:var(--r-sm);background:none;border:none;
  cursor:pointer;line-height:1.4;transition:background .14s ease,color .14s ease}
.navlink:hover,.navtop:hover{color:#fff;background:rgba(255,255,255,.07)}
.navlink[aria-current="page"],.navtop[aria-current="page"]{color:#fff;font-weight:600;
  background:rgba(255,255,255,.09)}
.caret{width:9px;height:9px;flex:0 0 auto;transition:transform .16s ease}
.navtop[aria-expanded="true"]{color:#fff;background:rgba(255,255,255,.12)}
.navtop[aria-expanded="true"] .caret{transform:rotate(180deg)}

.dropdown{position:absolute;top:calc(100% + 8px);left:0;min-width:280px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 2px 4px rgba(12,18,24,.05),0 14px 34px rgba(12,18,24,.13);
  padding:6px;list-style:none;display:none;z-index:120}
.dropdown.open{display:block}
.dropdown a{display:block;padding:8px 11px;border-radius:var(--r-sm);
  text-decoration:none;color:var(--ink);font-size:14.5px;font-weight:600}
.dropdown a:hover{background:var(--tint-2)}
.dropdown a span{display:block;font-size:13px;color:var(--muted);font-weight:400;
  margin-top:1px;line-height:1.4}
/* The demoted item: still reachable, visibly not the main line. */
.dropdown li.minor{border-top:1px solid var(--line-soft);margin-top:6px;padding-top:6px}
.dropdown li.minor a{font-weight:500;color:var(--muted)}
.dropdown li.minor a:hover{color:var(--ink)}

.mainnav .btn{display:none}
.bar .btn-primary{background:var(--copper);color:#fff}
.bar .btn-primary:hover{background:#C46023}
.navtoggle{display:none;background:none;border:1px solid rgba(255,255,255,.28);
  border-radius:var(--r-sm);padding:7px 12px;font-family:var(--sans);font-size:14.5px;
  font-weight:600;color:var(--on-deep);cursor:pointer}
header a:focus-visible,header button:focus-visible,
.utilbar a:focus-visible{outline:2.5px solid var(--copper-on-deep);outline-offset:2px}

@media (max-width:940px){
  .navtoggle{display:block}
  .bar .btn-primary{display:none}
  .mainnav{position:absolute;top:100%;left:0;right:0;background:var(--surface);
    border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;
    gap:0;padding:10px 18px 18px;display:none;
    box-shadow:0 14px 26px rgba(12,18,24,.10)}
  .mainnav.open{display:flex}
  .navlink,.navtop{width:100%;justify-content:space-between;padding:12px 10px;
    font-size:16px;color:var(--muted)}
  .navlink:hover,.navtop:hover{color:var(--ink);background:var(--tint-2)}
  .navlink[aria-current="page"],.navtop[aria-current="page"],
  .navtop[aria-expanded="true"]{color:var(--ink);background:var(--tint-2)}
  .dropdown{position:static;display:none;min-width:0;border:none;box-shadow:none;
    padding:0 0 6px 12px;background:none}
  .dropdown.open{display:block}
  .dropdown a{padding:9px 10px}
  .mainnav .btn{display:block;margin-top:10px;text-align:center}
}

/* ---------------- hero ---------------- */
.hero{padding:44px 0 40px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:46px;align-items:center}
.hero-wide .wrap{display:block;max-width:980px}
.hero-wide h1{max-width:34ch}
.hero-wide .hero-sub{max-width:62ch}
.hero h1{font-size:clamp(31px,3.7vw,44px);max-width:15ch;letter-spacing:-.032em;
  line-height:1.08}
.hero-sub{font-size:18px;color:var(--muted);max-width:48ch;margin-top:18px;
  line-height:1.55}
.hero-sub b{color:var(--ink);font-weight:600}
.hero-cta{display:flex;gap:11px;margin-top:26px;flex-wrap:wrap;align-items:center}
.hero-note{margin-top:20px;font-size:14.5px;color:var(--muted)}
.hero-note span{white-space:nowrap}
.dot{color:var(--line);margin:0 9px}

/* ---------------- quote bar ---------------- */
/* Kept from v1.x on the panel finding that 47 of 100 buyers wanted a phone number
   and an address in copyable text. Restyled as a bordered instrument rather than
   a soft tinted block, because that is what it is. */
.callbar{display:flex;flex-wrap:wrap;gap:10px 30px;align-items:baseline;margin-top:26px;
  padding:18px 22px;background:var(--surface);border:1px solid var(--line);
  border-left:3px solid var(--copper);border-radius:var(--r)}
.callbar .tel{font-family:var(--sans);font-weight:700;font-size:26px;color:var(--ink);
  text-decoration:none;letter-spacing:-.028em}
.callbar .tel:hover{color:var(--copper)}
.callbar .em{font-size:16px;color:var(--copper);text-decoration:none;font-weight:600}
.callbar .em:hover{text-decoration:underline}
.callbar .hrs{font-size:14px;color:var(--faint)}

/* ---------------- specimen quote ---------------- */
.spec{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 22px;box-shadow:0 10px 26px rgba(12,18,24,.06)}
.spec .sp-head{display:flex;justify-content:space-between;align-items:baseline;
  border-bottom:1px solid var(--line);padding-bottom:11px;margin-bottom:12px}
.spec .sp-title{font-weight:700;font-size:16px;letter-spacing:-.02em}
.spec .sp-meta{font-family:var(--mono);font-size:12px;color:var(--faint)}
.spec table{width:100%;border-collapse:collapse;font-size:13px}
.spec th{text-align:left;font-weight:700;color:var(--faint);font-size:11px;
  text-transform:uppercase;letter-spacing:.07em;padding-bottom:7px}
.spec td{padding:9px 0;border-top:1px solid var(--line-soft);color:var(--muted);
  vertical-align:top}
.spec td.pn{color:var(--ink);font-weight:600}
.spec td.pn span{display:block;font-weight:400;color:var(--faint);
  font-family:var(--mono);font-size:11.5px;margin-top:2px}
.spec .sp-foot{margin-top:12px;padding-top:11px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--faint);display:flex;justify-content:space-between;gap:14px}
.spec .redact{background:var(--line);border-radius:2px;display:inline-block;
  width:52px;height:11px}

/* ---------------- page header (interior) ---------------- */
.pagehead{padding:44px 0 34px;border-bottom:1px solid var(--line-soft)}
.crumb{font-size:13.5px;color:var(--faint);margin-bottom:11px}
.crumb a{color:var(--faint);text-decoration:none}
.crumb a:hover{color:var(--copper)}
.pagehead h1{font-size:clamp(29px,3.7vw,43px);max-width:20ch;letter-spacing:-.03em}
.pagehead p{font-size:17.5px;color:var(--muted);max-width:62ch;margin-top:14px}

/* ---------------- sections ---------------- */
section{padding:44px 0;border-top:1px solid var(--line-soft)}
section:first-of-type{border-top:none}
.sec-h{font-size:clamp(21px,2.5vw,28px);margin-bottom:11px;letter-spacing:-.026em}
.sec-lede{font-size:16.5px;color:var(--muted);max-width:64ch;margin-bottom:26px}
.prose p{color:var(--muted);margin-bottom:14px;max-width:66ch}
.prose p:last-child{margin-bottom:0}
.prose b{color:var(--ink);font-weight:600}

/* ---------------- eyebrow ---------------- */
.eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--copper);margin-bottom:9px;display:block}
.eyebrow-quiet{color:var(--faint)}

/* ---------------- chips (brand tags) ---------------- */
.chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:11px}
.chip{font-size:12.5px;line-height:1.3;border:1px solid var(--line);
  background:var(--surface);color:var(--muted);padding:4px 9px;
  border-radius:var(--r-sm);white-space:nowrap}
.chip-key{background:var(--copper-tint);border-color:var(--copper-line);
  color:var(--copper-dark);font-weight:600}

/* ---------------- grids ---------------- */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.split{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:36px;
  align-items:start}
.split-wide{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}

/* ---------------- cards ---------------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:19px 21px;transition:border-color .14s ease}
.card h3{font-size:17px;margin-bottom:5px;transition:color .14s ease}
.card p{font-size:14.5px;color:var(--muted);line-height:1.5}
.card-tight{padding:16px 18px}
.card-tight h3{font-size:16px;margin-bottom:3px}
.card-tight p{font-size:14px;line-height:1.48}
.card-link{display:block;text-decoration:none;color:inherit}
.card-link:hover{border-color:#BFC6CE}
.card-link:hover h3{color:var(--copper)}

/* ---------------- product category block ---------------- */
/* The distributor's own layout: a heading, then the sub-items spelled out inline.
   A buyer scanning for "docking station" finds the word, not a category they have
   to guess the contents of. */
.pcat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 20px}
.pcat h3{font-size:16px;margin-bottom:7px}
.pcat ul{list-style:none;display:flex;flex-wrap:wrap;gap:3px 0;font-size:13.5px;
  color:var(--muted);line-height:1.5}
.pcat li:not(:last-child)::after{content:"·";color:var(--line);margin:0 7px}
.pcat li{white-space:nowrap}
.pcat .pc-brands{margin-top:10px;padding-top:9px;border-top:1px solid var(--line-soft);
  font-family:var(--mono);font-size:11.5px;color:var(--faint);letter-spacing:-.01em;
  line-height:1.5}

/* ---------------- ruled category list (line card) ---------------- */
.catlist{border-top:1px solid var(--line)}
.cat{display:grid;grid-template-columns:minmax(0,224px) minmax(0,1fr);gap:14px 30px;
  padding:17px 0;border-bottom:1px solid var(--line-soft);align-items:start}
.cat:last-child{border-bottom:1px solid var(--line)}
.cat h3{font-size:16px;margin:0}
.cat .cat-note{font-size:13.5px;color:var(--faint);margin-top:3px;line-height:1.45}
.cat .chips{margin-top:0}
@media (max-width:700px){
  .cat{grid-template-columns:1fr;gap:9px;padding:15px 0}
}

/* ---------------- brand wall ---------------- */
/* Names, not logos — we have no licence to display a manufacturer's mark and the
   line card is explicit that these are lines we quote, not dealerships we hold. */
.brandwall{display:grid;grid-template-columns:repeat(6,1fr);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--surface)}
.brandwall span{padding:15px 10px;text-align:center;font-size:13.5px;font-weight:600;
  color:var(--muted);border-left:1px solid var(--line-soft);
  border-top:1px solid var(--line-soft);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.brandwall span:nth-child(-n+6){border-top:none}
.brandwall span:nth-child(6n+1){border-left:none}
@media (max-width:900px){
  .brandwall{grid-template-columns:repeat(4,1fr)}
  .brandwall span:nth-child(-n+6){border-top:1px solid var(--line-soft)}
  .brandwall span:nth-child(6n+1){border-left:1px solid var(--line-soft)}
  .brandwall span:nth-child(-n+4){border-top:none}
  .brandwall span:nth-child(4n+1){border-left:none}
}
@media (max-width:560px){
  .brandwall{grid-template-columns:repeat(2,1fr)}
  .brandwall span:nth-child(-n+4){border-top:1px solid var(--line-soft)}
  .brandwall span:nth-child(4n+1){border-left:1px solid var(--line-soft)}
  .brandwall span:nth-child(-n+2){border-top:none}
  .brandwall span:nth-child(odd){border-left:none}
}

/* ---------------- back-burner strip ---------------- */
/* Everything we sell that is not technology. It stays on the site because a mixed
   purchase order is the strongest argument the company has — but it is one quiet
   ruled strip, not a second set of cards competing with the primary line. */
.otherstrip{border:1px solid var(--line);border-radius:var(--r);background:var(--tint-2);
  padding:16px 20px;display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr) auto;
  gap:8px 24px;align-items:center}
.otherstrip h3{font-size:14.5px;margin:0;color:var(--ink)}
.otherstrip h3 span{display:block;font-weight:400;font-size:13px;color:var(--faint);
  letter-spacing:0;margin-top:1px}
.otherstrip p{font-size:13.5px;color:var(--muted);line-height:1.5;margin:0}
.otherstrip a.more{font-size:13.5px;font-weight:600;text-decoration:none;white-space:nowrap}
.otherstrip a.more:hover{text-decoration:underline}
@media (max-width:820px){
  .otherstrip{grid-template-columns:1fr;gap:8px}
}

/* ---------------- data table ---------------- */
.dtable{width:100%;border-collapse:collapse;font-size:14px;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--surface)}
.dwrap{overflow-x:auto}
.dtable th{text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--faint);background:var(--tint-2);
  padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.dtable td{padding:11px 14px;border-bottom:1px solid var(--line-soft);
  color:var(--muted);vertical-align:top}
.dtable tr:last-child td{border-bottom:none}
.dtable td b{color:var(--ink);font-weight:600}

/* ---------------- steps ---------------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.step-n{width:26px;height:26px;border-radius:var(--r-sm);background:var(--copper-tint);
  color:var(--copper-dark);font-size:12.5px;font-weight:700;display:flex;
  align-items:center;justify-content:center;margin-bottom:11px}
.step h3{font-size:17px;margin-bottom:5px}
.step p{font-size:15px;color:var(--muted)}

/* ---------------- definition rows ---------------- */
.rows{display:flex;flex-direction:column;gap:11px}
.row{display:grid;grid-template-columns:128px 1fr;gap:14px;align-items:baseline;
  font-size:14.5px}
.row dt{color:var(--muted);font-weight:500}
.row dd{color:var(--ink)}

/* ---------------- itemized list ---------------- */
.clist{display:flex;flex-direction:column;gap:14px}
.citem h4{font-size:15.5px;font-weight:700;margin-bottom:2px}
.citem p{font-size:14.5px;color:var(--muted);line-height:1.5}

.ticks{list-style:none;display:flex;flex-direction:column;gap:10px}
.ticks li{position:relative;padding-left:22px;font-size:14.5px;color:var(--muted)}
.ticks li::before{content:"";position:absolute;left:1px;top:8px;width:7px;height:7px;
  border-radius:1px;background:var(--copper)}
.ticks li b{color:var(--ink);font-weight:600}

/* ---------------- numbered rule list ---------------- */
.nlist{counter-reset:n;border-top:1px solid var(--line-soft)}
.nlist>li{list-style:none;counter-increment:n;display:grid;
  grid-template-columns:32px 1fr;gap:14px;padding:15px 0;
  border-bottom:1px solid var(--line-soft)}
.nlist>li::before{content:counter(n,decimal-leading-zero);font-family:var(--mono);
  font-size:12.5px;font-weight:700;color:var(--copper);padding-top:3px}
.nlist h3{font-size:16px;margin-bottom:3px}
.nlist p{font-size:14.5px;color:var(--muted);line-height:1.5}

/* ---------------- status ---------------- */
.status{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 22px}
.status h3{font-size:16px;margin-bottom:4px}
.status>p{font-size:14px;color:var(--muted);margin-bottom:14px}
.st-row{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:14.5px}
.st-row:last-of-type{border-bottom:none}
.pill{font-size:12px;font-weight:600;padding:3px 9px;border-radius:var(--r-sm);
  white-space:nowrap}
.pill-on{background:var(--copper-tint);color:var(--copper-dark)}
.pill-off{background:var(--tint);color:var(--muted)}
.status .fine{font-size:13px;color:var(--muted);margin-top:14px;line-height:1.5}

/* ---------------- callout / note ---------------- */
.callout{background:var(--tint-2);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 22px;max-width:74ch}
.callout h3{font-size:16.5px;margin-bottom:7px}
.callout p{font-size:14.5px;color:var(--muted)}
.note{border-left:2px solid var(--copper);padding:2px 0 2px 15px;
  font-size:14.5px;color:var(--muted);line-height:1.6;max-width:68ch}
.note b{color:var(--ink);font-weight:600}

/* ---------------- stat line ---------------- */
.statline{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  overflow:hidden}
.statline div{padding:17px 20px;border-left:1px solid var(--line-soft)}
.statline div:first-child{border-left:none}
.statline b{display:block;font-size:22px;font-weight:700;letter-spacing:-.028em;
  line-height:1.1;margin-bottom:3px;color:var(--ink)}
.statline span{font-size:13.5px;color:var(--muted);line-height:1.45;display:block}
@media (max-width:860px){
  .statline{grid-template-columns:1fr 1fr}
  .statline div:nth-child(3){border-left:none}
  .statline div:nth-child(n+3){border-top:1px solid var(--line-soft)}
}
@media (max-width:460px){
  .statline{grid-template-columns:1fr}
  .statline div{border-left:none;border-top:1px solid var(--line-soft)}
  .statline div:first-child{border-top:none}
}

/* ---------------- deep band ---------------- */
/* One per page, maximum. Same ground as the chrome, so it introduces no colour. */
.band{background:var(--deep);color:var(--on-deep-dim);border-top:none;padding:48px 0}
.band h2,.band h3,.band h4{color:#fff}
.band .sec-lede{color:var(--on-deep-dim)}
.band p{color:#B7C0CA}
.band .eyebrow{color:var(--copper-on-deep)}
.band a{color:var(--copper-on-deep)}
.band .bandcard{background:var(--deep-2);border:1px solid var(--deep-line);
  border-radius:var(--r);padding:19px 21px}
.band .bandcard h3{font-size:16.5px;margin-bottom:5px}
.band .bandcard p{font-size:14.5px;line-height:1.5}
.band .chip{background:var(--deep-2);border-color:var(--deep-line);color:#BEC7D1}
.band .btn-quiet{background:transparent;border-color:rgba(255,255,255,.26);color:#fff}
.band .btn-quiet:hover{border-color:#fff;background:rgba(255,255,255,.07)}
.band .statline{background:var(--deep-2);border-color:var(--deep-line)}
.band .statline div{border-left-color:var(--deep-line)}
.band .statline b{color:#fff}
.band .statline span{color:var(--on-deep-dim)}
.band a:focus-visible,.band button:focus-visible{outline-color:var(--copper-on-deep)}

/* ---------------- quote block ---------------- */
.quoteblock{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:34px 36px;box-shadow:0 1px 2px rgba(12,18,24,.04),0 12px 30px rgba(12,18,24,.05)}
.quote-grid{display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:start}
.quoteblock h2{font-size:clamp(23px,2.8vw,31px);margin-bottom:11px;letter-spacing:-.028em}
.quoteblock>.quote-grid>div>p{color:var(--muted);font-size:16px;max-width:44ch}
.mailrow{margin-top:20px}
.mailalt{margin-top:14px;font-size:14.5px;color:var(--muted);max-width:46ch}
.mailalt a{font-weight:600;text-decoration:none;border-bottom:1px solid var(--copper-line)}
.mailalt a:hover{border-bottom-color:var(--copper)}
.incl{background:var(--tint-2);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 22px}
.incl h3{font-size:15px;margin-bottom:10px}
.incl ul{list-style:none}
.incl li{font-size:14.5px;padding:8px 0 8px 21px;position:relative;
  border-bottom:1px solid var(--line-soft)}
.incl li:last-child{border-bottom:none}
.incl li::before{content:"";position:absolute;left:2px;top:15px;width:7px;height:7px;
  border-radius:1px;background:var(--copper)}
.incl li b{font-weight:600}
.incl li span{color:var(--muted);display:block;font-size:13.5px;line-height:1.45}

/* ---------------- next-page links ---------------- */
.next{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.nextcard{display:block;text-decoration:none;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);padding:17px 19px;
  transition:border-color .14s ease}
.nextcard:hover{border-color:#BFC6CE}
.nextcard strong{display:block;font-family:var(--sans);font-size:16.5px;font-weight:700;
  letter-spacing:-.02em;color:var(--ink);margin-bottom:2px}
.nextcard span{font-size:14px;color:var(--muted)}

/* ---------------- quote form ---------------- */
.formwrap{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:40px;
  align-items:start}
.field{margin-bottom:16px}
.field label{display:block;font-size:14.5px;font-weight:600;margin-bottom:5px}
.field .hint{display:block;font-weight:400;font-size:13.5px;color:var(--muted);margin-top:2px}
.field .req{color:var(--copper);font-weight:600}
.field input,.field textarea,.field select{
  width:100%;font-family:var(--sans);font-size:15.5px;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:10px 12px;line-height:1.5;transition:border-color .14s ease,box-shadow .14s ease}
.field textarea{min-height:150px;resize:vertical;font-family:var(--mono);font-size:14px}
.field input:hover,.field textarea:hover{border-color:#BFC6CE}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--copper);
  box-shadow:0 0 0 3px var(--copper-tint)}
.field input:focus-visible,.field textarea:focus-visible{outline:none}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* Bots fill every field they find. People never see this one. */
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formactions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:22px}
.formnote{font-size:13.5px;color:var(--muted);margin-top:12px;max-width:56ch}
.formstatus{margin-top:16px;padding:14px 16px;border-radius:var(--r);font-size:15px;
  display:none}
.formstatus.show{display:block}
.formstatus.err{background:#FBEDE8;border:1px solid #E3BFB2;color:#7A2E12}
.formstatus.good{background:var(--copper-tint);border:1px solid var(--copper-line);
  color:var(--copper-dark)}
.formstatus b{font-weight:600}
.aside-contact{background:var(--tint-2);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 22px}
.aside-contact h3{font-size:16px;margin-bottom:5px}
.aside-contact p{font-size:14.5px;color:var(--muted);margin-bottom:14px}
.addr{margin-bottom:14px}
.addr .k{font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:2px}
.addr a{font-size:15.5px;font-weight:600;text-decoration:none;word-break:break-all}
.addr a:hover{text-decoration:underline}
.addr:last-of-type{margin-bottom:0}
.fielderr{font-size:13.5px;color:#8A3312;margin-top:5px;font-weight:500}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{
  border-color:#C8724F;box-shadow:0 0 0 3px #FBEDE8}

/* ---------------- footer ---------------- */
footer{background:var(--deep);color:var(--on-deep-dim);padding:40px 0 26px;margin-top:8px}
.foot{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.25fr;gap:30px}
.foot h4{font-size:11.5px;font-weight:700;color:#fff;margin-bottom:10px;
  text-transform:uppercase;letter-spacing:.1em}
.foot a{color:#CBD3DB;text-decoration:none;display:block;font-size:14.5px;padding:3px 0}
.foot a:hover{color:#fff}
.foot p{font-size:14.5px;line-height:1.6}
.foot-brand{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.foot-brand .brand-name{color:#fff}
.foot-legal{border-top:1px solid var(--deep-line);margin-top:30px;padding-top:16px;
  font-size:13px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  color:#7E8994}

/* ---------------- responsive ---------------- */
@media (max-width:1000px){
  .grid4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:940px){
  .hero .wrap,.grid3,.grid2,.steps,.quote-grid,.next,
  .split,.split-wide,.formwrap{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr 1fr}
  .hero .wrap{gap:30px}
  .split,.split-wide{gap:28px}
  .steps{gap:22px}
  .quoteblock{padding:26px 22px}
  .band{padding:40px 0}
}
@media (max-width:560px){
  .row{grid-template-columns:1fr;gap:1px}
  .foot{grid-template-columns:1fr}
  .hero{padding:40px 0 36px}
  .grid4{grid-template-columns:1fr}
}

/* ================================================================
   v2.1 — validation, not merchandising
   The site's reader already has the company's name. They are not
   browsing; they are finishing a check before sending a requirement
   or setting up a vendor record. These components serve that: an
   identity block a buyer can copy into a file, a process timeline
   with real clock times, and a plain statement of what we do not do.
   ================================================================ */

/* ---------------- identity block ---------------- */
/* The head of a capability statement, on the page. Everything a buyer
   needs to confirm the company exists, in one copyable place. */
.ident{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  display:grid;grid-template-columns:1fr 1fr}
.ident dl{display:block}
.ident .irow{display:grid;grid-template-columns:minmax(0,140px) minmax(0,1fr);
  gap:14px;padding:11px 20px;border-bottom:1px solid var(--line-soft);font-size:14.5px;
  align-items:baseline}
.ident>div:first-child{border-right:1px solid var(--line-soft)}
.ident .irow:last-child{border-bottom:none}
.ident dt{color:var(--faint);font-weight:500;font-size:13px}
.ident dd{color:var(--ink);font-weight:500}
.ident dd a{font-weight:600;text-decoration:none}
.ident dd a:hover{text-decoration:underline}
.ident dd .sub{display:block;color:var(--faint);font-weight:400;font-size:13px;
  margin-top:1px}
@media (max-width:820px){
  .ident{grid-template-columns:1fr}
  .ident>div:first-child{border-right:none}
  .ident>div:first-child .irow:last-child{border-bottom:1px solid var(--line-soft)}
}

/* ---------------- process timeline ---------------- */
/* Times on the left, in mono, because a commitment with a clock on it is
   the thing a buyer is actually trying to establish. */
.proc{border-top:1px solid var(--line)}
.proc>li{list-style:none;display:grid;grid-template-columns:minmax(0,168px) minmax(0,1fr);
  gap:16px 28px;padding:18px 0;border-bottom:1px solid var(--line-soft);align-items:start}
.proc .when{font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--copper);
  letter-spacing:-.01em;line-height:1.5;text-transform:uppercase}
.proc .when span{display:block;font-family:var(--sans);font-weight:500;
  text-transform:none;letter-spacing:0;color:var(--faint);font-size:13px;margin-top:2px}
.proc h3{font-size:16.5px;margin-bottom:4px}
.proc p{font-size:14.5px;color:var(--muted);line-height:1.55;max-width:70ch}
.proc p+p{margin-top:8px}
@media (max-width:760px){
  .proc>li{grid-template-columns:1fr;gap:6px;padding:16px 0}
  .proc .when span{display:inline;margin-left:8px}
}

/* ---------------- what we do not do ---------------- */
/* Stated as plainly as the capabilities, and deliberately given the same
   visual weight. Being explicit about the edges is the cheapest credibility
   on the page — a buyer who finds the limit here does not find it at award. */
.dont{border:1px solid var(--line);border-left:3px solid var(--faint);
  border-radius:var(--r);background:var(--tint-2);padding:20px 22px}
.dont h3{font-size:16.5px;margin-bottom:8px}
.dont p{font-size:14.5px;color:var(--muted);line-height:1.55}
.dont p+p{margin-top:9px}
.dont b{color:var(--ink);font-weight:600}

/* ---------------- value list ---------------- */
/* What the margin buys, itemised. Each row names the work and, where it
   matters, the thing that would otherwise land on the buyer's desk. */
.value{border-top:1px solid var(--line)}
.value>div{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);
  gap:12px 28px;padding:16px 0;border-bottom:1px solid var(--line-soft);align-items:start}
.value h3{font-size:16px;margin:0}
.value p{font-size:14.5px;color:var(--muted);line-height:1.55}
.value p b{color:var(--ink);font-weight:600}
.value .otherwise{display:block;margin-top:6px;font-size:13.5px;color:var(--faint)}
@media (max-width:760px){
  .value>div{grid-template-columns:1fr;gap:6px}
}