/* Barlow and Barlow Semi Condensed, SIL Open Font License, self-hosted (26 October 2026). */
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/barlow-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/barlow-500.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-600.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/barlow-700.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow Semi Condensed';font-style:italic;font-weight:600;font-display:swap;src:url(fonts/barlow-semi-condensed-600-italic.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow Semi Condensed';font-style:italic;font-weight:700;font-display:swap;src:url(fonts/barlow-semi-condensed-700-italic.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-semi-condensed-600.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/barlow-semi-condensed-700.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --ink:#16191c; --ink-soft:#5a646d; --faint:#8b959e;
  --line:#dde3e8; --panel:#f6f8fa; --bg:#fff;
  --steel:#1f3a50; --steel-deep:#0f1d29;
  --hi:#f2a900; --go:#1f7a4d; --stop:#a8321c;
  --wrap:74rem;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.55 "Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif}
h1,h2,h3{line-height:1.2;margin:0 0 .6rem}
h1{font-size:1.9rem;letter-spacing:-.01em}
h2{font-size:1.25rem;margin-top:2.2rem}
h3{font-size:1rem}
p{margin:0 0 .9rem;max-width:44rem}
a{color:var(--steel)}
code{background:var(--panel);padding:.1rem .3rem;border-radius:3px;font-size:.9em}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 1.1rem}
.wrap.narrow{max-width:52rem}
.muted{color:var(--ink-soft)}
.small{font-size:.86rem}
.lead{font-size:1.1rem;color:var(--ink-soft);max-width:42rem}
.eyebrow{text-transform:uppercase;letter-spacing:.11em;font-size:.72rem;font-weight:800;color:var(--faint);margin-bottom:.5rem}
.right{text-align:right}
.bad{color:var(--stop);font-weight:700}
.inline{display:inline;margin:0}

header.site{background:var(--steel-deep);color:#fff;margin-bottom:2rem}
body.admin header.site{background:#16191c}
header.site .bar{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;padding-top:.8rem;padding-bottom:.8rem}
header.site a{color:#e8edf1;text-decoration:none}
header.site nav{margin-left:auto;display:flex;gap:1.1rem;align-items:center;flex-wrap:wrap;font-size:.93rem}
header.site nav a:hover{color:#fff;text-decoration:underline}
.brand{font-weight:800;letter-spacing:-.01em}
.brand span{font-weight:400;color:#9fb0bd}
.brand{display:inline-flex;align-items:center}
.brand-logo{display:block;height:40px;width:auto}
main{min-height:60vh;padding-bottom:3rem}

footer.site{border-top:1px solid var(--line);background:var(--panel);padding:1.6rem 0;margin-top:3rem}
footer.site p{margin:0 0 .3rem}

.btn{display:inline-block;background:var(--hi);color:#191919;padding:.6rem 1.1rem;border:0;border-radius:3px;
  font:inherit;font-weight:700;cursor:pointer;text-decoration:none;line-height:1.3}
.btn:hover{background:#ffb51f}
.btn.big{padding:.85rem 1.5rem;font-size:1.02rem}
.btn.small{padding:.35rem .7rem;font-size:.85rem}
.btn.ghost{background:transparent;border:2px solid var(--steel);color:var(--steel)}
.btn.ghost:hover{background:var(--steel);color:#fff}
.btn-row{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;margin:1.2rem 0}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.remove{display:inline-block;margin-top:.4rem;padding:0;background:none;border:0;font:inherit;font-size:.82rem;color:var(--ink-soft);text-decoration:underline;cursor:pointer}
.remove:hover,.remove:focus-visible{color:#b3261e}
.linkish{background:none;border:0;color:var(--steel);text-decoration:underline;cursor:pointer;font:inherit;padding:0}

table.rows{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.94rem}
table.rows th,table.rows td{text-align:left;padding:.55rem .6rem;border-bottom:1px solid var(--line);vertical-align:top}
table.rows thead th{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);border-bottom-width:2px}
table.rows th.right,table.rows td.right{text-align:right}
table.rows tfoot td,table.rows tfoot th{border-bottom:0}
table.rows tr.total td,table.rows tr.total th{border-top:2px solid var(--ink);font-size:1.05rem}
tr.blocked{background:#fdf2ef}

.field{display:block;margin-bottom:.9rem}
.field span{display:block;font-size:.8rem;font-weight:700;color:var(--ink-soft);margin-bottom:.25rem}
input,select,textarea{width:100%;padding:.55rem .6rem;border:1px solid var(--line);border-radius:3px;font:inherit;background:#fff}
textarea{min-height:5rem}
input.qty{width:5rem;display:inline-block}
input.qty.wide{width:7rem}
.check{display:block;margin:.5rem 0}
.check input{width:auto;margin-right:.4rem}
.cols{display:grid;gap:0 1.1rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));align-items:end}
.filters{display:flex;gap:.6rem;flex-wrap:wrap;margin:1rem 0;align-items:center}
.filters input,.filters select{width:auto;min-width:14rem}

.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));margin:1rem 0 2rem}
.card{display:block;background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:1rem;text-decoration:none;color:inherit}
.card:hover{border-color:var(--steel)}
.card h3{margin-bottom:.2rem}

.tiles{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));margin:1.4rem 0}
.tile{display:block;background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:.9rem 1rem;text-decoration:none;color:inherit}
.tile:hover{border-color:var(--steel)}
.tile.hot{background:#fff6e0;border-color:var(--hi)}
.tile .n{display:block;font-size:1.7rem;font-weight:800;color:var(--steel-deep);line-height:1.1}
.tile .l{display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--faint)}

.price{font-size:1.5rem;font-weight:800;color:var(--steel-deep);margin:.4rem 0}
.price.tbd{font-size:1.05rem;color:var(--ink-soft)}
.breaks{margin:.2rem 0 1rem;padding-left:1.1rem;color:var(--ink-soft);font-size:.93rem}

.tag{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  padding:.16rem .42rem;border-radius:2px;background:var(--line);color:var(--ink-soft)}
.tag.warn{background:#fde8e3;color:var(--stop)}
.pill{background:var(--hi);color:#191919;border-radius:2px;padding:0 .3rem;font-size:.8rem;font-weight:800}

.note{background:#fff6e0;border-left:4px solid var(--hi);padding:.9rem 1rem;margin:1.2rem 0}
.note p:last-child{margin-bottom:0}
.errors{background:#fde8e3;border-left:4px solid var(--stop);padding:.9rem 1rem;margin:1.2rem 0}
.flash{background:#e8f3ec;border-left:4px solid var(--go);padding:.9rem 1rem;margin:0 0 1.4rem}
.detail{background:var(--panel);border:1px solid var(--line);padding:.8rem;overflow:auto;font-size:.82rem;max-height:28rem;white-space:pre-wrap;word-break:break-word}

body.centred{display:grid;place-items:center;min-height:100vh;background:var(--panel)}
.signin{background:#fff;border:1px solid var(--line);border-radius:5px;padding:1.8rem;width:min(24rem,92vw)}
.signin h1{font-size:1.3rem;margin-bottom:.1rem}

.doc{padding-top:1rem}
@media print{
  header.site,footer.site,.noprint{display:none}
  body{font-size:12pt}
  .wrap{max-width:none}
}
@media (max-width:640px){
  header.site nav{width:100%;margin-left:0}
  .cols{grid-template-columns:1fr}
  table.rows{font-size:.87rem}
}

/* Advisory hint under a form field, as used by the shipping estimate on a
   quotation. Quiet enough to ignore, close enough to act on. */
.field .hint {
  display: block;
  margin-top: .3rem;
  font-size: .8rem;
  line-height: 1.4;
  color: var(--muted, #667);
}
.field .hint .linkish { font-size: inherit; }

/* The quotation breakdown. Sub-rows explain a figure above them, so they are
   indented and quiet: the reader should be able to skip them entirely. */
table.totals { margin-top: .5rem; }
table.totals th { text-align: left; font-weight: 600; }
table.totals tr.sub td:first-child { padding-left: 1.25rem; }
table.totals tr.sub td { border-bottom: 0; padding-top: .15rem; padding-bottom: .15rem; }
table.totals tr.total th,
table.totals tr.total td { border-top: 2px solid currentColor; font-size: 1.05rem; }

@media print {
  header, nav, .btn-row, form .btn, .qty { display: none !important; }
  a[href]::after { content: ""; }
}

/*
 * Action bars above long tables: Add to quotation on the catalog, Save and
 * Approve in the admin. Pinned under the top of the window (and under the
 * admin bar, whose height admin-bar.ejs puts in --stick-top) while the table
 * scrolls, and let go when the form ends.
 */
.actions-top {
  position: sticky; top: var(--stick-top, 0px); z-index: 20;
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
  margin: .6rem 0; padding: .55rem .8rem;
  background: var(--panel, #f2f5f7);
  border-bottom: 2px solid currentColor;
}
.actions-top .btn { margin: 0; }
.addbar-quote { margin-left: auto; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
@media (max-width: 640px) { .actions-top .hint { display: none; } .addbar-quote { margin-left: 0; } }
@media print { .actions-top { display: none; } }

/* Ryan's photographs. Small square crops, so roughly nine sit above the fold
   on a laptop and a mixed bag of phone shots still reads as a grid. Full size
   opens in the viewer below. */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .5rem; margin-top: 1.1rem;
  /* Capped so the tiles stay a usable size on a wide screen and roughly nine
     sit in view, rather than the whole roll shrinking to thumbnails. */
  max-width: 860px;
}
.gallery .shot { display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 2px; background: var(--panel, #eef1f3); cursor: zoom-in; }
.gallery .shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.gallery .shot:hover img, .gallery .shot:focus-visible img { transform: scale(1.05); }
@media (max-width: 560px) { .gallery { grid-template-columns: repeat(3, 1fr); } }

/* Click to expand. Plain overlay, no library. */
.lightbox {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(12, 15, 18, .92);
  padding: 3.2rem 1rem 3rem;
}
.lightbox[hidden] { display: none; }
.lightbox .lb-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 2px; }
.lightbox button {
  position: absolute; background: none; border: 0; color: #fff; cursor: pointer;
  line-height: 1; padding: .5rem .8rem; opacity: .75;
}
.lightbox button:hover, .lightbox button:focus-visible { opacity: 1; }
.lightbox .lb-close { top: .4rem; right: .6rem; font-size: 2.2rem; }
.lightbox .lb-nav { top: 50%; transform: translateY(-50%); font-size: 3rem; }
.lightbox .lb-prev { left: .2rem; }
.lightbox .lb-next { right: .2rem; }
.lightbox .lb-count {
  position: absolute; bottom: .7rem; left: 0; right: 0; margin: 0;
  text-align: center; color: #fff; opacity: .7; font-size: .85rem;
}
@media print { .gallery, .lightbox { display: none; } }

/* Home hero: photography, scrim, and text as three separate layers.

   The scrim is the reason the words can be real HTML. Contrast becomes a
   stylesheet decision that adapts to the crop and the screen, instead of being
   painted into a JPEG at one fixed size. */
.hero-banner {
  position: relative; isolation: isolate;
  display: grid; align-items: end;
  min-height: 360px; margin-bottom: 2rem;
  border-radius: 3px; overflow: hidden;
  /* Ground for the no-image case, and what shows while the photo loads. */
  background: var(--accent, #1d5b4c);
}
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(8,12,10,.86) 0%, rgba(8,12,10,.55) 45%, rgba(8,12,10,.22) 100%);
}
.hero-banner:not(.has-image) .hero-scrim {
  background: linear-gradient(to top, rgba(8,12,10,.42), rgba(8,12,10,0));
}
.hero-text {
  position: relative; z-index: 2;
  padding: 2rem 1.6rem 1.7rem;
  display: flex; flex-direction: column; gap: .55rem;
  /* Deliberately fixed light-on-dark: this sits on a dark scrim in both
     themes, so it must not follow the page tokens. */
  color: #fff;
}
.hero-text h1 {
  margin: 0; color: #fff;
  font-size: clamp(1.7rem, 4.6vw, 3rem); line-height: 1.05;
  letter-spacing: -.015em; text-wrap: balance;
}
.hero-text .tagline {
  margin: 0; max-width: 46ch; color: #fff;
  font-size: clamp(1rem, 1.7vw, 1.18rem); line-height: 1.45;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.hero-text .btn-row { margin-top: .5rem; }
.btn.ghost.on-dark { color: #fff; border-color: rgba(255,255,255,.65); }
.btn.ghost.on-dark:hover { border-color: #fff; }

h2.claim { margin-top: 0; }

/* Placeholder tiles, still used on product pages with no photograph. */
.ph-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .35rem; text-align: center; padding: 1.2rem; border-radius: 3px;
  border: 2px dashed var(--rule, #c6d0d6);
  background-color: var(--panel, #f2f5f7);
  background-image: repeating-linear-gradient(45deg,
    rgba(127,143,155,.10) 0 10px, transparent 10px 20px);
  color: var(--graphite, #5a6268);
  min-height: 200px;
}
.ph-label { font-weight: 600; font-size: 1rem; }
.ph-note { font-size: .8rem; opacity: .8; max-width: 22ch; }

@media (max-width: 700px) {
  .hero-banner { min-height: 300px; }
  .hero-text { padding: 1.5rem 1.15rem 1.3rem; }
}
@media print { .hero-banner { min-height: 0; } .hero-bg, .hero-scrim { display: none; } .hero-text { color: #000; padding-left: 0; } .hero-text h1, .hero-text .tagline { color: #000; text-shadow: none; } }

/* ------------------------------------------------------------ product page */

.crumbs { display: flex; gap: .5rem; align-items: center; font-size: .85rem; color: var(--graphite, #5a6268); margin-bottom: 1rem; }
.crumbs span { opacity: .5; }

/* The photo column is held to a modest square (feedback, 8 October 2026): a
   wide part in a big square was mostly white space. The gallery and popup are
   there for a closer look. */
.prod { display: grid; grid-template-columns: minmax(0, 380px) 1fr; gap: 2.2rem; align-items: start; }
.prod-buy { display: flex; flex-direction: column; gap: .7rem; }
.prod-buy h1 { margin: 0; }
.prod-buy > :first-child { margin-top: 0; }

/* Photos are standardised to white squares, so they sit on white, not on a second background. */
.prod-hero { margin: 0; border-radius: 3px; overflow: hidden; background: #fff; border: 1px solid var(--rule, #dde1dd); }
.prod-hero.ph-tile { background: var(--panel, #f2f5f7); border: 0; }
.prod-hero img { width: 100%; height: auto; aspect-ratio: 1 / 1; display: block; background: #fff; }
.hero-open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; line-height: 0; }
.prod-hero figcaption { font-size: .82rem; color: var(--graphite, #5a6268); padding: .5rem .1rem 0; min-height: 1.4em; }

.prod-thumbs { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .5rem; }
.thumb { padding: 0; border: 2px solid transparent; border-radius: 2px; background: none; cursor: pointer; line-height: 0; }
.thumb img { width: 68px; height: 68px; object-fit: contain; background: #fff; border: 1px solid var(--rule, #dde1dd); border-radius: 1px; display: block; }
.thumb.on { border-color: currentColor; }
.thumb:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.stock { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; margin: 0; }
.breaks-table { margin: .2rem 0; max-width: 20rem; }
.ship { margin: 0; }

.docs { border-top: 1px solid var(--rule, #dde1dd); padding-top: .8rem; margin-top: .3rem; }
.docs ul { list-style: none; padding: 0; margin: .4rem 0 0; display: flex; flex-direction: column; gap: .35rem; }

.prod-detail { display: flex; flex-direction: column; gap: 2rem; margin-top: 2.4rem; }
.prod-detail section { display: flex; flex-direction: column; gap: .8rem; }

ul.ticks { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
ul.ticks li { padding-left: 1.4rem; position: relative; }
ul.ticks li::before { content: "\2713"; position: absolute; left: 0; opacity: .55; }

ol.howto { padding-left: 1.3rem; display: flex; flex-direction: column; gap: .6rem; }
ol.howto li { padding-left: .2rem; }

.tag.ok { background: var(--accent-soft, #e3ede9); }

@media (max-width: 780px) {
  .prod { grid-template-columns: 1fr; gap: 1.3rem; }
  .prod-media { max-width: 340px; width: 100%; margin: 0 auto; }
  .breaks-table { max-width: none; }
}
@media print { .prod-thumbs, .btn-row { display: none; } }

/* ------------------------------------------------- fleet power diagram */

.diagram-scroll { overflow-x: auto; margin: 1.4rem 0 .6rem; }
.diagram { display: block; width: 100%; min-width: 720px; height: auto; }

.diagram .truck path,
.diagram .truck rect { fill: var(--panel, #f0f2ef); stroke: var(--rule, #dde1dd); stroke-width: 2; }
.diagram .truck .panel { fill: var(--accent-soft, #e3ede9); }
.diagram .truck .boom  { fill: var(--panel, #f0f2ef); }
.diagram .truck .bucket{ fill: var(--panel, #f0f2ef); }
.diagram .truck line   { stroke: var(--rule, #dde1dd); stroke-width: 2; }
.diagram .wheels circle{ fill: none; stroke: var(--rule, #dde1dd); stroke-width: 3; }

.diagram .wires path {
  fill: none; stroke: var(--accent, #1d5b4c); stroke-width: 2;
  stroke-linecap: round; opacity: .55;
}

.diagram .node rect {
  fill: var(--paper, #fafaf8);
  stroke: var(--graphite, #5a6268); stroke-width: 1.5;
}
.diagram .n-label {
  font-size: 14px; font-weight: 600; text-anchor: middle;
  fill: var(--ink, #1a1d1f);
}
.diagram .n-sub {
  font-size: 10.5px; text-anchor: middle; fill: var(--graphite, #5a6268);
}

/* Only the sellable parts read as buttons. */
.diagram .node.link { cursor: pointer; }
.diagram .node.link rect {
  stroke: var(--accent, #1d5b4c); stroke-width: 2;
  fill: var(--accent-soft, #e3ede9);
  transition: fill .15s ease, stroke-width .15s ease;
}
.diagram .node.link:hover rect,
.diagram .node.link:focus-visible rect { stroke-width: 3.5; }
.diagram .node.link:focus-visible { outline: none; }
.diagram .node.link .n-label { fill: var(--accent, #1d5b4c); }

.diagram-hint { margin: 0 0 1.4rem; }

@media (prefers-reduced-motion: reduce) { .diagram .node.link rect { transition: none; } }
@media print { .diagram-scroll { overflow: visible; } .diagram { min-width: 0; } }

/* A real hero image replaces the placeholder box entirely. */
.hero-art.has-image { padding: 0; border: 0; background-image: none; overflow: hidden; }
.hero-art.has-image img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 3px; }

/* --------------------------------------------------------- header search */

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.site-search { display: flex; gap: .3rem; align-items: center; flex: 1 1 16rem; max-width: 22rem; }
.site-search input {
  flex: 1 1 auto; min-width: 0;
  padding: .38rem .6rem; font: inherit; font-size: .9rem;
  border: 1px solid var(--rule, #dde1dd); border-radius: 2px;
  background: var(--paper, #fafaf8); color: var(--ink, #1a1d1f);
}
.site-search input::placeholder { color: var(--faint, #88908f); }
.site-search button {
  padding: .38rem .7rem; font: inherit; font-size: .85rem; font-weight: 600;
  border: 1px solid var(--accent, #1d5b4c); border-radius: 2px;
  background: var(--accent, #1d5b4c); color: #fff; cursor: pointer;
}
.site-search button:hover { filter: brightness(1.08); }

/* Categories that match the search, shown even when they hold no products. */
.cat-hits { margin: 1rem 0 .4rem; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.chip {
  display: inline-flex; align-items: baseline; gap: .45rem;
  padding: .35rem .7rem; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--accent, #1d5b4c); color: var(--accent, #1d5b4c);
  background: var(--accent-soft, #e3ede9); font-size: .88rem;
}
.chip:hover { filter: brightness(.97); }
.chip .muted { font-size: .78rem; }

@media (max-width: 860px) {
  .site-search { order: 3; flex-basis: 100%; max-width: none; }
}

/* Hotspots over the truck illustration. Percentage geometry so they hold at
   any width, and they sit over the artwork's own labels rather than repeating
   them: the picture already says "INVERTER", this just makes it clickable. */
.rig { position: relative; margin: 1.4rem 0 .6rem; line-height: 0; }
.rig img { width: 100%; height: auto; display: block; border-radius: 3px; }
.rig .hot {
  position: absolute; display: block; border-radius: 4px;
  border: 2px solid transparent; background: transparent;
  transition: border-color .15s ease, background-color .15s ease;
}
.rig .hot span {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.rig .hot:hover, .rig .hot:focus-visible {
  border-color: var(--accent, #1d5b4c);
  background: color-mix(in srgb, var(--accent, #1d5b4c) 18%, transparent);
  outline: none;
}
/* Always show they are there, faintly, so nobody has to hunt for them. */
.rig .hot { box-shadow: inset 0 0 0 1px rgba(127,180,205,.38); }
@media (prefers-reduced-motion: reduce) { .rig .hot { transition: none; } }
@media print { .rig .hot { display: none; } }

/* Policy pages: a list that reads as points, not bullets. */
ul.checks { list-style: none; padding: 0; }
ul.checks li { position: relative; padding-left: 1.5rem; margin-bottom: .5rem; }
ul.checks li::before { content: "\25B8"; position: absolute; left: 0; color: var(--accent, #1d5b4c); font-weight: 900; }

/* The anti-spam trap field: off screen and out of reach for people, there for
   form bots to fill in. See src/antispam.js. Not display:none, which some bots
   skip. */
.hp { position: absolute !important; left: -10000px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Catalog table: headers that sort, and an arrow on the one in use. */
button.sort { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: inherit; cursor: pointer; text-align: inherit; }
button.sort:hover { text-decoration: underline; }
th[aria-sort="ascending"] button.sort::after { content: " \25B2"; font-size: .7em; }
th[aria-sort="descending"] button.sort::after { content: " \25BC"; font-size: .7em; }
.nowrap { white-space: nowrap; }

/* Wizard: what is saved in a step, above its form. */
table.saved { margin-bottom: .6rem; }
table.saved th { width: 14rem; font-weight: 600; }

/* Page links under a long admin list. */
.pager { display: flex; gap: 1rem; align-items: center; margin: .8rem 0; }

/* Buttons that delete. */
.btn.danger, button.danger { color: #a3261b; border-color: #a3261b; }

/* Wizard: Calculate, and the steps it shows while it works. */
.calc { margin: .8rem 0 1.2rem; }
.calc-progress { margin-top: .6rem; padding: .6rem .8rem; border-left: 3px solid #2f6f4f; background: rgba(47,111,79,.06); max-height: 22rem; overflow: auto; }
.calc-progress ol { margin: .2rem 0 0 1.1rem; }
.calc-progress .calc-thinking .muted { white-space: pre-wrap; font-style: italic; }

/* Gallery grid on the product page: product photos, then images from the manuals. */
.gal-head { font-size: .95rem; margin: 1rem 0 .5rem; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .7rem; }
.gal-tile { display: flex; flex-direction: column; gap: .3rem; padding: 0; border: 0; background: none; cursor: zoom-in; text-align: left; font: inherit; color: inherit; }
.gal-tile img { width: 100%; height: auto; aspect-ratio: 1 / 1; background: #fff; border: 1px solid var(--rule, #dde1dd); border-radius: 3px; display: block; }
.gal-tile:hover img, .gal-tile:focus-visible img { border-color: currentColor; }
.gal-cap { font-size: .78rem; color: var(--graphite, #5a6268); line-height: 1.3; }

/* Documents, grouped. */
.doc-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem 2rem; }
.doc-group h3 { font-size: .95rem; margin: 0 0 .4rem; }
.doc-group ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .35rem; }

/* Popup for a closer look. */
.pg-box:not([open]) { display: none; }
.pg-box { width: min(96vw, 1100px); max-height: 96vh; padding: .6rem; border: 0; border-radius: 6px; background: #fff; color: #1d2a24; }
.pg-box::backdrop { background: rgba(10, 16, 13, .82); }
.pg-top { display: flex; align-items: center; gap: 1rem; padding: 0 .2rem .5rem; }
.pg-count { font-size: .85rem; color: #5a6268; }
.pg-full { margin-left: auto; font-size: .9rem; }
.pg-close { border: 0; background: none; font-size: 1.8rem; line-height: 1; cursor: pointer; padding: 0 .3rem; color: inherit; }
.pg-stage { position: relative; display: flex; align-items: center; justify-content: center; }
.pg-stage img { max-width: 100%; max-height: calc(96vh - 7rem); object-fit: contain; display: block; }
.pg-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid #c9d3cd; background: rgba(255,255,255,.92); font-size: 1.7rem; line-height: 1; cursor: pointer; color: inherit; }
.pg-nav.prev { left: .3rem; }
.pg-nav.next { right: .3rem; }
.pg-cap { margin: .5rem .2rem 0; font-size: .88rem; color: #5a6268; min-height: 1.2em; }
@media print { .pg-box, .gallery { display: none; } }

/* Home page categories: one list, most relevant first, each with its best seller's photo. */
.cat-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.cat-photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; border-bottom: 1px solid var(--line, #dde1dd); padding: .6rem; box-sizing: border-box; }
.cat-photo.ph { background: var(--panel, #f2f5f7); }
.cat-body { display: flex; flex-direction: column; gap: .3rem; padding: .8rem 1rem 1rem; }
.cat-body h3 { margin: 0; }
.cat-blurb { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Home page strips: full width, alternating white, pale, dark and yellow. */
main:has(> section.strip) { padding-bottom: 0; }
main:has(> section.strip) + footer.site { margin-top: 0; }
section.strip { padding: 2.8rem 0; }
section.strip.tight { padding: 1.8rem 0; }
section.strip h2 { margin-top: 0; }
section.strip.band { background: var(--panel); border-block: 1px solid var(--line); }
section.strip.steel { background: var(--steel-deep); color: #cdd7df; }
section.strip.steel h2, section.strip.steel h3 { color: #fff; }
section.strip.steel .eyebrow { color: var(--hi); }
section.strip.steel a { color: #ffd27a; }
section.strip.steel p { max-width: none; }
section.strip.hi { background: var(--hi); color: var(--ink); }
.strip-two { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 2rem; margin: 1.2rem 0; }
.strip-three { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.4rem; margin-top: 1.2rem; }
.strip-card { border-top: 3px solid var(--hi); padding-top: .9rem; }
.strip-card p { max-width: none; }
.strip-contact { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; }
.strip-contact h2 { margin: 0 0 .3rem; }
.strip-contact p { margin: 0; }
.btn.dark { background: var(--steel-deep); color: #fff; border-color: var(--steel-deep); }
.btn.dark:hover { background: #000; }
.btn.ghost.on-hi:hover { background: var(--ink); color: #fff; }
.btn.ghost.on-hi { background: transparent; color: var(--ink); border-color: var(--ink); }

/* Brands: one still row of uniform logos (scripts/make-brand-logos.py). */
.brand-row { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.6rem 2.4rem; }
.brand-row li { display: flex; align-items: center; }
.brand-row img { display: block; height: auto; max-width: 100%; opacity: .8; }
.brand-row a:hover img, .brand-row a:focus-visible img { opacity: 1; }
/* Victron's logo rules allow solid black, not a faded grey. */
.brand-row img.brand-victron { opacity: 1; }
@media (max-width: 640px) { .brand-row { justify-content: center; gap: 1.2rem 1.8rem; } .brand-row img { max-width: 130px; } }

/* Parallax band: one of Ryan's install photos, fixed behind the page. */
section.strip.parallax {
  position: relative; color: #fff; padding: 5.5rem 0;
  background: #1d2d38 url("gallery/pec-09.jpg") center / cover no-repeat fixed;
}
section.strip.parallax::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13,22,28,.82), rgba(13,22,28,.35)); }
section.strip.parallax .wrap { position: relative; }
.parallax-line { font-size: 1.7rem; font-weight: 800; line-height: 1.25; max-width: 34rem; margin: 0 0 1rem; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
@media (prefers-reduced-motion: reduce) { section.strip.parallax { background-attachment: scroll; } }
@media (max-width: 780px) { section.strip.parallax { background-attachment: scroll; padding: 3.5rem 0; } .parallax-line { font-size: 1.35rem; } }
@media print { section.strip.parallax { display: none; } }

/* The PEC yard hero (8 October 2026): full width, the photo shown whole on a
   wide screen so the words line up beside the logo painted into it. The logo
   spans about 3% to 12% across and 29% to 45% down. */
/* Capped at 520px tall (13 October 2026: too big on a desktop). Past that the photo is cropped top and
   bottom, and the logo and words below are placed from the middle in container units (cqw, the hero's
   own width), so they stay where they were on the photo at any width. The photo is 2400 x 883. */
.hero-banner.pec { display: block; min-height: 0; height: min(36.79vw, 520px); container-type: inline-size; margin: -2rem 0 0; border-radius: 0; background: #14191d; }
.hero-banner.pec .hero-bg { object-position: left center; }
.hero-banner.pec .hero-scrim { background: linear-gradient(90deg, rgba(8,12,10,.45) 0%, rgba(8,12,10,.25) 55%, rgba(8,12,10,0) 100%); }
.hero-banner.pec .hero-text { position: absolute; inset: 0; padding: 0; display: block; }
.hero-banner.pec .hero-name { position: absolute; left: 14%; top: calc(50% - 8.094cqw); right: 3%; }
.hero-banner.pec h1 { font-style: italic; font-weight: 800; font-size: clamp(1.6rem, 4.2vw, 4.4rem); text-shadow: 0 2px 6px rgba(0,0,0,.55); }
.hero-since { margin: .35rem 0 0; font-style: italic; font-size: clamp(.95rem, 1.9vw, 2rem); color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.5); max-width: none; }
.hero-banner.pec .hero-lower { position: absolute; left: 2.8%; top: calc(50% + 1.472cqw); right: 3%; }
.hero-banner.pec .tagline { font-size: clamp(1rem, 1.7vw, 1.6rem); max-width: 40ch; }
/* The logo painted into the photo spans 2.77% to 12% across and 29.4% to 45%
   down; this copy, in the top bar's colours, sits exactly over it (13 October
   2026). The photo is never cropped on a wide screen, so the two stay aligned. */
.hero-logo-wide { position: absolute; left: 2.77%; top: calc(50% - 7.586cqw); width: 9.22%; height: auto; z-index: 2; pointer-events: none; }
@media (max-width: 900px) { .hero-logo-wide { display: none; } }

@media (max-width: 900px) {
  /* Cropped to the trucks; the painted logo is off the edge, and the words stack. */
  .hero-banner.pec { aspect-ratio: auto; height: auto; max-height: none; min-height: 440px; display: flex; align-items: flex-end; }
  .hero-banner.pec .hero-bg { object-position: 80% center; }
  .hero-banner.pec .hero-scrim { background: linear-gradient(to top, rgba(8,12,10,.88) 0%, rgba(8,12,10,.55) 55%, rgba(8,12,10,.25) 100%); }
  .hero-banner.pec .hero-text { position: relative; inset: auto; padding: 2rem 1.15rem 1.4rem; }
  .hero-banner.pec .hero-name, .hero-banner.pec .hero-lower { position: static; }
  .hero-banner.pec .hero-lower { margin-top: .8rem; }
  .hero-banner.pec .hero-logo { display: block; width: 104px; height: auto; margin-bottom: .6rem; }
}
.hero-logo { display: none; }

/* Catalog grid: fixed layout so the column widths hold; Description is the
   wide one and wraps, with its 40 px photo beside the two lines of text. */
table.catalog-grid { table-layout: fixed; min-width: 860px; }
table.catalog-grid td { overflow-wrap: break-word; hyphens: auto; }
table.catalog-grid .c-cat { width: 12%; }
table.catalog-grid .c-brand { width: 9%; }
table.catalog-grid .c-series { width: 12%; }
table.catalog-grid .c-model { width: 11%; }
table.catalog-grid .c-price { width: 8%; }
table.catalog-grid .c-qty { width: 8.5%; }
table.catalog-grid th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.catalog-grid th.grid-hidecell { width: 1.6rem; }
table.catalog-grid td.c-desc { overflow-wrap: break-word; }
table.catalog-grid td.c-desc .row-thumb { float: left; width: 40px; height: 40px; margin: 0 .6rem .2rem 0; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 2px; }
/* The page counts what its search shows; the grid's own row count would disagree. */
.catalog-grid-wrap .grid-count, form .grid-bar .grid-count { display: none; }

/* Social: the early years first, bigger, then work on the trucks. */
#gallery-work { margin-top: 2rem; }
#gallery .gallery.since-row { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
#gallery .since-row .shot { aspect-ratio: 4 / 3; }

#gallery { margin-bottom: 1.8rem; }

/* Pages for customers who are not fleets (src/uses.js). */
.hero-banner.use-hero { display: flex; align-items: flex-end; min-height: 300px; margin: -2rem 0 0; border-radius: 0; background: #14191d; }
.hero-banner.use-hero .hero-text { position: relative; padding-top: 2rem; padding-bottom: 1.4rem; }
.hero-banner.use-hero h1 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
.hero-banner.use-hero .tagline { max-width: 52ch; }
.eyebrow.on-dark { color: var(--hi); }
a.strip-card.need { display: block; color: inherit; text-decoration: none; }
a.strip-card.need span { color: var(--steel); text-decoration: underline; }
a.strip-card.need:hover h3 { text-decoration: underline; }
.use-links { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; }
.use-links a { font-weight: 600; }
.use-links.big a { font-size: 1.05rem; padding: .5rem .9rem; border: 1px solid var(--line); border-radius: 4px; background: #fff; text-decoration: none; }
.use-links.big a:hover { border-color: var(--steel); }
.uses-grid .use-photo { aspect-ratio: 16 / 9; object-fit: cover; padding: 0; }
.hero-banner.use-hero .tagline { font-size: clamp(.95rem, 1.4vw, 1.08rem); }
.hero-banner.use-hero .btn-row { margin-top: .3rem; }

/* Catalog grid on a phone: each row a compact card (description and photo,
   then brand, series and model, then price and quantity), and the column
   headers become a row of filter chips. Same table, same grid script. */
@media (max-width: 760px) {
  table.catalog-grid { min-width: 0; width: 100%; table-layout: auto; }
  table.catalog-grid thead tr { display: flex; flex-wrap: wrap; gap: .4rem; padding: .3rem 0 .6rem; }
  table.catalog-grid thead th { display: block; width: auto !important; border: 1px solid var(--line) !important; border-radius: 4px; padding: .35rem 1.8rem .35rem .55rem !important; white-space: nowrap; overflow: visible; }
  table.catalog-grid thead th.grid-hidecell, table.catalog-grid td.grid-hidecell, table.catalog-grid .grid-resize { display: none !important; }
  table.catalog-grid tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .4rem; padding: .75rem 0; border-bottom: 1px solid var(--line); }
  table.catalog-grid tbody td { display: block; border: 0 !important; padding: 0 !important; width: auto !important; }
  table.catalog-grid tbody td:nth-child(5) { order: -1; flex: 1 1 100%; margin-bottom: .25rem; }
  table.catalog-grid tbody td:nth-child(2) { order: 1; font-weight: 600; }
  table.catalog-grid tbody td:nth-child(3) { order: 2; }
  table.catalog-grid tbody td:nth-child(4) { order: 3; }
  table.catalog-grid tbody td:nth-child(3):not(:empty)::before, table.catalog-grid tbody td:nth-child(4)::before { content: "\00b7\00a0"; color: var(--faint); }
  table.catalog-grid tbody td:nth-child(1) { order: 4; flex: 1 1 100%; font-size: .78rem; }
  table.catalog-grid tbody td:nth-child(6) { order: 5; flex: 1; text-align: left; margin-top: .3rem; }
  table.catalog-grid tbody td:nth-child(7) { order: 6; margin-top: .3rem; }
  table.catalog-grid tbody td:nth-child(7) .qty { width: 5rem; }
  table.catalog-grid + * { clear: both; }
}

/* Tables on a phone: tighter cells, a narrower quantity box, the Remove link
   under it, so a four-column table like the quotation fits 375 px. */
@media (max-width: 560px) {
  table.rows:not(.catalog-grid) th, table.rows:not(.catalog-grid) td { padding: .45rem .3rem; }
  table.rows:not(.catalog-grid) input.qty { width: 3.4rem; }
  table.rows:not(.catalog-grid) td .remove { display: block; margin-top: .25rem; }
  table.rows:not(.catalog-grid) td { overflow-wrap: anywhere; }
}

/* Catalog pages (13 October 2026): 25 at a time, after search and filters. */
#rows tr.page-off { display: none; }
.pager { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: center; justify-content: space-between; margin: 1rem 0; }
.pager-pages { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.pager-btn { min-width: 2.4rem; padding: .4rem .7rem; border: 1px solid var(--line, #ccd3d8); border-radius: 6px; background: #fff; color: inherit; font: inherit; cursor: pointer; }
.pager-btn.on { background: var(--ink, #1d2d38); border-color: var(--ink, #1d2d38); color: #fff; }
.pager-btn:disabled { opacity: .4; cursor: default; }
.pager-gap { padding: 0 .2rem; color: var(--ink-soft); }
.pager-size select { margin: 0 .3rem; }
@media (max-width: 640px) { .pager { justify-content: center; } .pager-info { width: 100%; text-align: center; } }
.pager-size select { width: auto; display: inline-block; min-width: 0; }
/* A price never breaks across lines (13 October 2026). */
table.catalog-grid td.right strong { white-space: nowrap; }

/* Print a quotation from the cart (13 October 2026). */
.print-quote .grid.two { display: grid; grid-template-columns: 1fr 1fr; gap: .2rem 1rem; }
@media (max-width: 640px) { .print-quote .grid.two { grid-template-columns: 1fr; } }

/* Admin: the other categories a product is listed in (13 October 2026). */
.also-cats { margin: .8rem 0; }
.also-cats summary { cursor: pointer; font-weight: 600; }
.also-cats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .1rem 1rem; margin: .6rem 0; }
.crumbs-also { margin-left: .8rem; }

/* Catalog menu in the top bar (13 October 2026): the categories, on hover or
   keyboard focus. A phone has no hover, so there it is a plain link and the
   catalog page lists the categories itself. */
.nav-cat { position: relative; }
.nav-menu {
  display: none; position: absolute; top: 100%; left: -1rem; z-index: 50; margin-top: .5rem;
  grid-template-columns: repeat(2, minmax(14rem, 1fr)); gap: .1rem 1rem; padding: .7rem .9rem;
  background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.nav-cat::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: .6rem; }
.nav-cat:hover .nav-menu, .nav-cat:focus-within .nav-menu { display: grid; }
header.site .nav-menu a { color: var(--ink); padding: .35rem .4rem; border-radius: 4px; font-size: .9rem; line-height: 1.3; }
header.site .nav-menu a:hover, header.site .nav-menu a:focus { background: var(--panel); text-decoration: none; color: var(--ink); }
header.site .nav-menu .nav-menu-all { grid-column: 1 / -1; border-top: 1px solid var(--line); margin-top: .3rem; padding-top: .55rem; font-weight: 600; }
@media (hover: none), (max-width: 760px) { .nav-cat:hover .nav-menu, .nav-cat:focus-within .nav-menu { display: none; } }

/* The catalog before anything is chosen: the categories (13 October 2026). */
.cat-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .8rem; margin: 1rem 0 1.4rem; }
.cat-pick-card { display: flex; flex-direction: column; gap: .3rem; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); text-decoration: none; }
.cat-pick-card:hover, .cat-pick-card:focus { border-color: var(--ink); text-decoration: none; }
.cat-pick-card strong { font-size: 1rem; }
.cat-pick-n { margin-top: auto; }
.filters .btn.ghost { white-space: nowrap; }

/* Inverter specification filters (18 October 2026). */
.spec-filters{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:.6rem 1rem;width:100%;align-items:end}
.spec-filter{display:flex;flex-direction:column;gap:.2rem}
.filters .spec-filter select{min-width:0;width:100%}

/* Shop by brand and Our favorites (21 October 2026). */
.shop-brands{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:.25rem 0 .75rem}
.shop-brands .label{margin-right:.25rem}
.shop-brands.sub .chip.on{background:var(--ink,#1d2d38);color:#fff;border-color:transparent}
.shop-wide{flex-basis:100%;margin-top:.25rem}

/* A signed-in customer's price beside retail (21 October 2026). */
.your-price .retail{font-size:.95rem;font-weight:400;color:var(--ink-soft);margin-right:.5rem}
.nav-menu .nav-menu-popular{font-weight:600}

/* Accessories offered with a product (22 October 2026). */
.offered{flex-basis:100%;margin:.5rem 0}
.offer{border:1px solid var(--line,#ddd);border-radius:6px;padding:.5rem .75rem;margin:.4rem 0}
.offer legend{display:flex;gap:.5rem;align-items:center;padding:0 .25rem}
.offer legend img{width:44px;height:44px;object-fit:contain;background:#fff}
.offer .check{display:inline-flex;margin-right:1rem}

/* Storefronts for vans, boats, homes and food trucks (src/sites.js): a wordmark
   in place of the PEC logo, and questions that open in place. */
.brand.wordmark{font-size:1.35rem;gap:.55rem;color:#fff}
.brand.wordmark .mark{display:inline-block;width:1.3rem;height:1.3rem;border-radius:50%;
  background:var(--hi);box-shadow:inset -.4rem 0 0 rgba(0,0,0,.28)}
details.faq{border-bottom:1px solid var(--line);padding:.8rem 0}
details.faq summary{cursor:pointer;font-weight:700}
details.faq p{margin:.6rem 0 0}

/* Wiring diagrams (src/diagram.js, public/diagram-editor.js). */
.wrap.wide{max-width:none}
.print-only{display:none}
.dg-toolbar{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin:.4rem 0 .9rem;padding:.6rem .7rem;background:#fff;border:1px solid #dbe2e8;border-radius:10px;box-shadow:0 1px 2px rgba(29,42,54,.05)}
.dg-toolbar .btn{margin:0}
.dg-toolbar label.small{display:flex;align-items:center;gap:.35rem;color:var(--ink-soft)}
.dg-toolbar select,.dg-toolbar input[type=number]{padding:.3rem .4rem;border:1px solid #dbe2e8;border-radius:6px}
.dg-title{font-size:1.15rem;font-weight:700;min-width:18rem;flex:1 1 18rem;padding:.4rem .6rem;border:1px solid transparent;border-radius:6px;background:transparent}
.dg-title:hover,.dg-title:focus{border-color:#dbe2e8;background:#fff}
.dg-len{width:4rem}
.dg{display:grid;grid-template-columns:15rem minmax(0,1fr) 17rem;gap:.9rem;align-items:start}
.dg.dg-readonly{grid-template-columns:minmax(0,1fr) 16rem}
.dg-palette,.dg-inspector{border:1px solid #dbe2e8;border-radius:10px;padding:.8rem;background:#fff;max-height:78vh;overflow:auto;box-shadow:0 1px 2px rgba(29,42,54,.05)}
.dg-palette input{width:100%;padding:.5rem .6rem;border:1px solid #dbe2e8;border-radius:8px;margin-bottom:.6rem;background:#f8fafc}
.dg-palette .eyebrow{margin:.4rem 0 .4rem}
.dg-results{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.8rem}
.dg-part{display:flex;gap:.55rem;align-items:center;text-align:left;background:#fff;border:1px solid #e3e8ed;border-radius:8px;padding:.4rem .5rem;cursor:pointer;font:inherit;font-size:.82rem;line-height:1.25;transition:border-color .12s,box-shadow .12s,transform .12s}
.dg-part:hover{border-color:#b9c4ce;box-shadow:0 2px 6px rgba(29,42,54,.08);transform:translateY(-1px)}
.dg-part img{width:32px;height:32px;object-fit:contain;flex:none;background:#f3f5f7;border-radius:6px;padding:2px}
.dg-swatch{width:10px;height:10px;border-radius:50%;flex:none;display:inline-block;margin:0 .1rem}
.dg-stage{min-width:0}
.dg-svg{width:100%;height:72vh;border:1px solid #dbe2e8;border-radius:10px;background:#f8fafc;touch-action:none;display:block;cursor:grab;box-shadow:inset 0 1px 3px rgba(29,42,54,.04)}
.dg-svg:active{cursor:grabbing}
.dg-svg .dg-node,.dg-svg .dg-note{cursor:move}
.dg-svg .dg-port{cursor:crosshair;transition:r .1s}
.dg-svg .dg-port:hover{r:7.5px}
.dg-svg .dg-wire{cursor:pointer}
.dg-readonly .dg-svg .dg-node{cursor:pointer}
.dg-legend{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .9rem;margin:.6rem 0 0;color:var(--ink-soft)}
.dg-legend span.dg-li{display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap}
.dg-legend .dg-note-text{flex-basis:100%;font-size:.8rem}
.dg-key{display:inline-block;width:22px;height:4px;border-radius:2px;vertical-align:middle}
.dg-key-dash{height:0;border-top:3px dashed;border-radius:0}
.dg-key-pos{background:#d2352b}.dg-key-neg{background:#2b3036}.dg-key-ac{border-color:#e08a12}.dg-key-data{border-color:#3b82c4}
.dg-key-box{width:16px;height:12px;border:1.5px dashed #9aa4ad;border-radius:3px;background:#f4f6f8}
.dg-inspector h3{margin:0 0 .5rem;font-size:1.05rem}
.dg-inspector textarea,.dg-inspector input,.dg-inspector select{width:100%;border:1px solid #dbe2e8;border-radius:6px;padding:.35rem .45rem}
.dg-stats{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin:.6rem 0}
.dg-stat{background:#f6f8fa;border:1px solid #e3e8ed;border-radius:8px;padding:.45rem .55rem;min-width:0}
.dg-stat span{display:block;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft)}
.dg-stat strong{display:block;font-size:1rem;line-height:1.25;overflow-wrap:anywhere}
.dg-facts{display:grid;grid-template-columns:auto 1fr;gap:.15rem .6rem;margin:.4rem 0}
.dg-facts dt{color:var(--ink-soft)}
.dg-facts dd{margin:0;font-weight:600}
.dg-list .dg-warn td{background:#fdf1e6}
.dg-actions{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;margin:1rem 0}
@media (max-width:900px){.dg,.dg.dg-readonly{grid-template-columns:1fr}.dg-svg{height:60vh}}
@media print{
  .print-only{display:block}
  .dg{display:block}
  .dg-svg{height:auto;min-height:6.5in;border:0;background:#fff;box-shadow:none}
  .dg-svg .dg-grid{display:none}
  .dg-list{font-size:.75rem}
}
.dg-badge{display:inline-block;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:.15rem .5rem;border-radius:3px}
.dg-badge-draft{background:#fdf1e6;color:#a8641b;border:1px solid #f0c9a0}
.dg-badge-saved{background:#e3f1e8;color:#1f7a4d;border:1px solid #a9d3b9}
/* ------------------------------------------------------------------
   The refresh of 26 October 2026 (design/mockups in the workspace).
   Barlow for the public pages; the admin keeps its own type. Colours come
   from the tokens at the top, so a storefront's own colours still apply.
   ------------------------------------------------------------------ */
:root{
  --navy-950:#0b1620; --amber-600:#d99400; --amber-50:#fff6dd;
  --ink-2:#3c4a56; --line-2:#d3dbe2; --panel-2:#eef2f5;
  --r-sm:6px; --r:10px; --r-lg:16px;
  --shadow-sm:0 1px 2px rgba(15,29,41,.06),0 1px 3px rgba(15,29,41,.06);
  --shadow:0 2px 4px rgba(15,29,41,.05),0 8px 24px rgba(15,29,41,.08);
  --shadow-lg:0 10px 30px rgba(15,29,41,.18);
  --display:"Barlow Semi Condensed","Barlow","Segoe UI",system-ui,sans-serif;
  --body:"Barlow","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
}
body:not(.admin){font-family:var(--body);font-size:17px;-webkit-font-smoothing:antialiased}
body:not(.admin) h1,body:not(.admin) h2,body:not(.admin) h3{font-family:var(--display);font-weight:700;letter-spacing:-.005em}
body:not(.admin) h1{font-size:clamp(2rem,3.4vw,2.8rem);line-height:1.05}
body:not(.admin) .btn{border-radius:var(--r-sm);font-family:var(--body)}
body:not(.admin) .eyebrow{display:inline-flex;align-items:center;gap:.5rem;color:var(--amber-600);letter-spacing:.14em;font-size:.76rem;margin-bottom:.8rem}
body:not(.admin) .eyebrow::before{content:"";width:22px;height:3px;border-radius:2px;background:var(--hi)}
.wrap{max-width:78rem}
.arrow{display:inline-block;transition:transform .15s}
.with-arrow::after{content:"\2192";display:inline-block;margin-left:.5rem;transition:transform .15s}
.with-arrow:hover::after{transform:translateX(3px)}
a:hover .arrow{transform:translateX(3px)}
.btn-amber{background:var(--hi);color:#1b1404;box-shadow:0 2px 0 var(--amber-600)}
.btn-amber:hover{background:#ffb81a}
.btn-line{background:transparent;border:2px solid rgba(255,255,255,.55);color:#fff}
.btn-line:hover{background:rgba(255,255,255,.1);border-color:#fff}
.btn-dark{background:var(--steel-deep);color:#fff;box-shadow:0 2px 0 #000}
.btn-dark:hover{background:var(--steel)}
.btn-outline-dark{background:transparent;border:2px solid rgba(27,20,4,.45);color:#1b1404}
.btn-outline-dark:hover{background:rgba(255,255,255,.2)}
.icon-tile{width:42px;height:42px;border-radius:10px;display:inline-grid;place-items:center;background:var(--amber-50);color:var(--amber-600);flex:none}
.icon-tile svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chip .n{color:var(--faint);font-weight:500}
.phone-only{display:none!important}

/* Top bar and header (the main site; a storefront keeps its own) */
.topbar{background:var(--navy-950);color:#a9b8c4;font-size:.85rem}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:38px}
.topbar-links{display:flex;gap:1.4rem;align-items:center}
.topbar a{color:#d7e0e7;text-decoration:none;display:inline-flex;align-items:center;gap:.35rem}
.topbar a:hover{color:#fff}
.topbar svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;opacity:.8}
header.site.main{position:sticky;top:0;z-index:30;background:var(--steel-deep);box-shadow:0 1px 0 rgba(255,255,255,.06)}
header.site.main .bar{gap:1.8rem;flex-wrap:nowrap;min-height:76px;padding-top:.6rem;padding-bottom:.6rem}
header.site.main .brand{gap:.75rem;flex:none}
header.site.main .brand-logo{height:44px}
.brand-name{font:700 italic 1.15rem/1 var(--display);color:#fff;letter-spacing:.01em}
.brand-name small{display:block;font:500 .7rem/1.3 var(--body);letter-spacing:.1em;text-transform:uppercase;color:#8fa3b3;font-style:normal;margin-top:.15rem}
header.site.main .site-search{flex:1;max-width:34rem;gap:0;background:#fff;border-radius:var(--r-sm);overflow:hidden}
header.site.main .site-search:focus-within{box-shadow:0 0 0 3px rgba(242,169,0,.55)}
header.site.main .site-search input{border:0;border-radius:0;height:46px;padding:0 1rem;font-size:1rem;color:var(--ink);background:#fff;outline:none}
header.site.main .site-search button{border:0;border-radius:0;height:46px;padding:0 1.15rem;background:var(--hi);color:#1b1404;font:700 .95rem var(--body);display:inline-flex;align-items:center;gap:.4rem;cursor:pointer}
header.site.main .site-search button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.5}
header.site.main nav{gap:1.5rem;flex-wrap:nowrap;font-size:.98rem}
header.site.main nav a{font-weight:600;color:#dfe7ee;position:relative}
header.site.main nav a:hover{color:#fff;text-decoration:none}
/* The dropdown is white: its links keep dark text, not the bar's light links. */
header.site.main nav .nav-menu a,header.site.main nav .nav-menu a:hover,header.site.main nav .nav-menu a:focus{color:var(--ink)}
header.site.main nav .nav-menu a{font-weight:400}header.site.main nav .nav-menu a.nav-menu-popular,header.site.main nav .nav-menu a.nav-menu-all{font-weight:600}
header.site.main nav .nav-menu a.on::after{display:none}
header.site.main nav a.on::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:3px;border-radius:2px;background:var(--hi)}
.cart-btn{display:inline-flex;align-items:center;gap:.45rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);padding:.5rem .8rem;border-radius:var(--r-sm);color:#fff!important;font-weight:700}
.cart-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.cart-btn .pill{border-radius:999px;min-width:22px;height:22px;display:inline-grid;place-items:center;padding:0 .35rem}
.menu-btn{background:transparent;border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:var(--r-sm);width:44px;height:44px;display:grid;place-items:center;cursor:pointer}
.menu-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2}

/* Footer (the main site) */
footer.site.main{background:var(--navy-950);color:#94a6b5;border-top:0;padding:0;margin-top:0;font-size:.95rem}
footer.site.main .foot-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.5rem;padding-top:3.5rem;padding-bottom:2.5rem}
footer.site.main h4{color:#fff;font:700 .78rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;margin:0 0 1rem}
footer.site.main a{color:#cdd8e1;text-decoration:none;display:block;padding:.18rem 0}
footer.site.main a:hover{color:#fff}
footer.site.main .brand{display:inline-flex;gap:.75rem;align-items:center;margin-bottom:1rem}
footer.site.main .brand-logo{height:44px}
footer.site.main p{margin:0 0 .4rem;max-width:20rem}
.foot-fax{display:block;padding:.18rem 0}
.foot-legal{border-top:1px solid rgba(255,255,255,.08);padding-top:1.1rem;padding-bottom:1.3rem;font-size:.85rem}
main:has(> section.sec) + footer.site, main:has(> .cta-band) + footer.site{margin-top:0}
main:has(> section.sec){padding-bottom:0}

/* Home: hero */
.hero2{position:relative;color:#fff;background:var(--steel-deep);overflow:hidden;margin-top:-2rem}
.hero2-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 40%}
.hero2::before{content:"";position:absolute;inset:0;z-index:1;background:
  linear-gradient(90deg,rgba(11,22,32,.97) 0%,rgba(11,22,32,.88) 34%,rgba(11,22,32,.35) 68%,rgba(11,22,32,.15) 100%),
  linear-gradient(0deg,rgba(11,22,32,.85) 0%,rgba(11,22,32,0) 40%)}
.hero2-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:3rem;align-items:center;padding-top:5rem;padding-bottom:5rem}
.hero2 .eyebrow{color:var(--hi)!important}
.hero2 h1{font:700 italic clamp(2.6rem,5.4vw,4.4rem)/.98 var(--display)!important;color:#fff;margin:0 0 .4rem}
.hero2-since{font:600 italic 1.35rem/1.2 var(--display);color:#c9d6e0;margin:0 0 1.4rem}
.hero2-tagline{font-size:1.15rem;color:#dbe4eb;max-width:31rem;margin-bottom:2rem}
.hero2-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin:0}
.hero2-actions .btn{padding:.95rem 1.4rem;font-size:1rem;display:inline-flex;align-items:center;gap:.5rem}
.finder{background:rgba(255,255,255,.97);color:var(--ink);border-radius:var(--r-lg);padding:1.6rem;box-shadow:var(--shadow-lg)}
.finder h2{font-size:1.4rem!important;margin:0 0 .2rem;color:var(--ink)}
.finder p{color:var(--muted);font-size:.95rem;margin:0 0 1rem}
.finder-search{display:flex;border:2px solid var(--line-2);border-radius:var(--r-sm);overflow:hidden}
.finder-search:focus-within{border-color:var(--hi)}
.finder-search input{flex:1;min-width:0;border:0;padding:0 1rem;height:46px;font:500 1rem var(--body);outline:none}
.finder-search button{border:0;background:var(--hi);color:#1b1404;font:700 .95rem var(--body);padding:0 1.2rem;cursor:pointer}
.finder-quick .chip,.shop .chip{border-color:var(--line);background:var(--panel);color:var(--ink-2);font-weight:600}
.finder-quick .chip:hover,.shop .chip:hover{border-color:var(--steel);background:#fff;filter:none}
.finder-quick{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1rem}
.finder-call{display:flex;align-items:center;gap:.8rem;margin-top:1.3rem;padding-top:1.2rem;border-top:1px solid var(--line);font-size:.95rem;color:var(--muted)}
.finder-call a{display:block;color:var(--ink);font:700 1.25rem/1.15 var(--display);text-decoration:none}

/* Home: proof strip */
.proof{background:var(--steel);color:#cfdae3}
.proof-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.proof-item{display:flex;gap:.9rem;align-items:center;padding:1.4rem 1.2rem;border-left:1px solid rgba(255,255,255,.08)}
.proof-item:first-child{border-left:0;padding-left:0}
.proof-item svg{width:26px;height:26px;color:var(--hi);flex:none;fill:none;stroke:currentColor;stroke-width:2}
.proof-item b{display:block;color:#fff;font:700 1.05rem/1.2 var(--display)}
.proof-item span{font-size:.88rem;line-height:1.35}

/* Home: sections */
section.sec{padding:5rem 0}
section.sec.pale{background:var(--panel)}
section.sec.dark{background:var(--steel-deep);color:#cfdae3}
section.sec.dark h2,section.sec.dark h3{color:#fff}
section.sec h2{font-size:clamp(1.8rem,3vw,2.5rem);margin-top:0}
section.sec p{max-width:46rem}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:2.2rem}
.sec-head h2{max-width:46rem}
.sec-head p{margin:0}
.link-more{font-weight:700;text-decoration:none;display:inline-flex;gap:.4rem;align-items:center;white-space:nowrap}
.serve{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.serve h2.claim{font-size:clamp(1.9rem,3.2vw,2.7rem)}
.audiences{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.audiences li{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.1rem;display:flex;flex-direction:column;gap:.7rem;box-shadow:var(--shadow-sm)}
.audiences svg{width:28px;height:28px;color:var(--steel);fill:none;stroke:currentColor;stroke-width:1.8}
.audiences b{font:700 1rem/1.2 var(--display)}

/* Category cards (home, and the catalog before anything is loaded) */
.cat-grid2{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem}
.cat2{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--ink);transition:transform .18s,box-shadow .18s,border-color .18s;position:relative}
.cat2:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-2)}
.cat2-ph{aspect-ratio:1/1;background:#fff;display:grid;place-items:center;padding:14%;border-bottom:1px solid var(--line)}
.cat2-ph img.cat-photo{width:100%;height:100%;aspect-ratio:auto;object-fit:contain;mix-blend-mode:multiply;padding:0;border:0;transition:transform .25s}
.cat2:hover .cat2-ph img{transform:scale(1.05)}
.cat2-body{padding:.85rem .9rem 1rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
.cat2 h3{font-size:1.02rem!important;line-height:1.15;margin:0}
.cat2-count{margin-top:auto;font-size:.82rem;color:var(--muted);font-weight:600;display:flex;justify-content:space-between;align-items:center}
.cat2-count .arrow{color:var(--amber-600);font-size:1.05rem}
.cat2.feature{grid-column:span 2;grid-row:span 2}
.cat2.feature .cat2-ph{aspect-ratio:auto;flex:1;padding:8% 12%}
.cat2.feature .cat2-body{background:var(--steel-deep);color:#fff}
.cat2.feature h3{color:#fff;font-size:1.5rem!important}
.cat2-blurb{color:#b9c8d4;font-size:.92rem;line-height:1.4}
.cat2.feature .cat2-count{color:#9fb2c2}
.cat2-tag{position:absolute;top:14px;left:14px;z-index:1;background:var(--hi);color:#1b1404;font:700 .72rem/1 var(--body);letter-spacing:.1em;text-transform:uppercase;padding:.4rem .6rem;border-radius:4px}
.cat2.more{grid-column:span var(--span,6);background:var(--steel-deep);border-color:var(--steel-deep);color:#fff;flex-direction:row;align-items:center;justify-content:space-between;padding:1.6rem 1.8rem;gap:1.5rem}
.cat2.more h3{color:#fff;font-size:1.5rem!important;margin:0 0 .3rem}
.cat2.more .btn{flex:none}

/* Home: fleet power */
.rig-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:3.5rem;align-items:center}
.rig-parts{list-style:none;padding:0;margin:1.6rem 0 0;display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.rig-parts a{display:flex;align-items:center;gap:.7rem;padding:.75rem .9rem;border-radius:var(--r-sm);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#e6edf2;text-decoration:none;font-weight:600}
.rig-parts a:hover{background:rgba(255,255,255,.1);border-color:var(--hi)}
.rig-parts .dot{width:9px;height:9px;border-radius:50%;background:var(--hi);flex:none}
.rig-parts .arrow{margin-left:auto;color:var(--hi)}
.rig-art{background:var(--steel);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-lg);padding:.8rem;box-shadow:var(--shadow-lg)}
.rig-art figure.rig{margin:0}
.rig-art figure.rig img{border-radius:10px}
.rig-art > p{color:#93a6b6;margin:.8rem .3rem .2rem;max-width:none}

/* Home: brands */
.brand-tiles{display:grid;grid-template-columns:repeat(7,1fr);gap:1rem}
.brand-tiles li > a,.brand-tiles li > span{height:84px;width:100%;border:1px solid var(--line);border-radius:var(--r);display:grid;place-items:center;padding:1rem 1.2rem;background:#fff;transition:border-color .15s,box-shadow .15s}
.brand-tiles li > a:hover{border-color:var(--line-2);box-shadow:var(--shadow-sm)}
.brand-tiles img{max-height:34px;width:auto!important;height:auto;filter:grayscale(1);opacity:.7!important;transition:filter .2s,opacity .2s}
.brand-tiles li > a:hover img{filter:none;opacity:1!important}

/* Home: about and why */
.stories{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.story{border-radius:var(--r-lg);overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.story-pic{height:220px;background-size:cover;background-position:center;position:relative}
.story-pic.contain{background-size:contain;background-repeat:no-repeat;background-color:#fff;background-origin:content-box;padding:1.4rem;border-bottom:1px solid var(--line)}
.story-pic .badge{position:absolute;left:16px;bottom:16px;background:var(--steel-deep);color:#fff;font:700 .74rem/1 var(--body);letter-spacing:.1em;text-transform:uppercase;padding:.5rem .7rem;border-radius:4px}
.story-txt{padding:1.6rem 1.7rem 1.8rem}
.story h3{font-size:1.5rem}
.story p{color:var(--ink-2);margin:0}
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.why-card{padding:1.8rem;border-radius:var(--r-lg);border:1px solid var(--line);background:#fff}
.why-card h3{font-size:1.35rem;margin-top:1.1rem}
.why-card p{color:var(--ink-2);margin:0;font-size:1rem}

/* Home: call band */
.cta-band{background:var(--hi);color:#1b1404;position:relative;overflow:hidden}
.cta-band::after{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;border:60px solid rgba(255,255,255,.18)}
.cta-grid{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding-top:3rem;padding-bottom:3rem;position:relative;z-index:1}
.cta-band h2{color:#1b1404;font-size:clamp(1.8rem,3vw,2.4rem);margin:0 0 .3rem}
.cta-band p{margin:0}
.cta-actions{display:flex;gap:.8rem;flex-wrap:wrap}

/* Catalog */
.pagehead{background:var(--panel);border-bottom:1px solid var(--line);margin-top:-2rem}
.pagehead .wrap{padding-top:1.5rem;padding-bottom:1.7rem}
.crumbs{font-size:.88rem;color:var(--muted);margin-bottom:.6rem}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.crumbs span{margin:0 .45rem;color:var(--faint)}
.pagehead-row{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem}
.pagehead h1{margin:0 0 .35rem}
.pagehead p{margin:0;color:var(--muted)}
.help-box{display:flex;align-items:center;gap:.8rem;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:.8rem 1rem;font-size:.9rem;color:var(--muted);flex:none}
.help-box a{display:block;color:var(--ink);font:700 1.1rem/1.15 var(--display);text-decoration:none}
.shop{display:grid;grid-template-columns:16rem minmax(0,1fr);gap:2.2rem;padding-top:1.6rem;align-items:start}
.shop.shop-start{grid-template-columns:minmax(0,1fr)}
.shop-main{min-width:0}
.shop-side{position:sticky;top:96px;display:flex;flex-direction:column;gap:1.2rem;max-height:calc(100vh - 110px);overflow:auto}
.facet{border:1px solid var(--line);border-radius:var(--r);background:#fff}
.facet h2{font:700 .75rem/1 var(--body)!important;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0;padding:1rem 1rem .6rem}
.facet ul{list-style:none;margin:0;padding:0 .5rem .4rem}
.facet li a{display:flex;justify-content:space-between;gap:.6rem;padding:.4rem .55rem;border-radius:6px;color:var(--ink-2);text-decoration:none;font-size:.93rem;line-height:1.25}
.facet li a:hover{background:var(--panel)}
.facet li a.on{background:var(--steel-deep);color:#fff;font-weight:600}
.facet li a .n{color:var(--faint);font-size:.82rem;font-variant-numeric:tabular-nums}
.facet li a.on .n{color:#9fb2c2}
.facet .star{color:var(--amber-600)}
.facet-more{display:block;padding:.3rem 1.05rem .9rem;font-size:.88rem;font-weight:700;text-decoration:none}
.side-note{background:var(--steel-deep);color:#c4d1dc;border-radius:var(--r);padding:1.1rem;font-size:.9rem}
.side-note b{display:block;color:#fff;font:700 1.1rem/1.2 var(--display);margin-bottom:.3rem}
.side-note a{color:var(--hi);font-weight:700;text-decoration:none}
.shop .filters{margin-top:0}
.shop .filters input[type=search],.shop .filters select{height:46px;border:2px solid var(--line-2);border-radius:var(--r-sm);padding:0 .8rem;font:500 1rem var(--body);background-color:#fff}
.shop .filters input[type=search]{flex:1 1 20rem}
.shop .filters input[type=search]:focus,.shop .filters select:focus{border-color:var(--hi);outline:none}
.shop .chip.on{background:var(--steel-deep);border-color:var(--steel-deep);color:#fff}
.badge-pop{display:inline-flex;align-items:center;gap:.25rem;font:700 .72rem/1 var(--body);color:#8a5a00;background:var(--amber-50);border:1px solid #f4d68a;border-radius:999px;padding:.25rem .5rem;vertical-align:2px;white-space:nowrap}
.row-by{display:block;font:700 .72rem/1.2 var(--body);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:.2rem}
table.catalog-grid{border:1px solid var(--line);border-radius:var(--r);border-collapse:separate;border-spacing:0;overflow:hidden;background:#fff}
table.catalog-grid thead th{background:var(--panel);border-bottom:1px solid var(--line)}
table.catalog-grid td{padding:.85rem .7rem;vertical-align:middle}
table.catalog-grid tbody tr:hover{background:#fbfcfd}
table.catalog-grid tbody tr.picked{background:var(--amber-50)}
table.catalog-grid td.c-desc .row-thumb{width:64px;height:64px;padding:4px;border-radius:8px;margin-right:.8rem}
table.catalog-grid td.c-desc a strong{font-size:1.02rem;font-weight:600}
table.catalog-grid td.right strong{font:700 1.2rem/1.1 var(--display);font-variant-numeric:tabular-nums}
table.catalog-grid input.qty{width:4.6rem;height:42px;border:2px solid var(--line-2);border-radius:var(--r-sm);text-align:center;font:700 1rem var(--body)}
table.catalog-grid tr.picked input.qty{border-color:var(--hi)}
.stepper{display:inline-flex;align-items:center;gap:4px}
.stepper .step{width:36px;height:42px;border:2px solid var(--line-2);border-radius:var(--r-sm);background:#fff;font:700 1.2rem/1 var(--body);color:var(--ink,#1d2a35);cursor:pointer;padding:0}
.stepper .step:hover{border-color:var(--hi)}
table.catalog-grid tbody td .stepper input.qty{width:3.4rem;-moz-appearance:textfield}
table.catalog-grid .stepper input.qty::-webkit-inner-spin-button,table.catalog-grid .stepper input.qty::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.addbar.actions-top{position:sticky;bottom:12px;top:auto;z-index:5;background:var(--steel-deep);color:#d4dee6;border-radius:var(--r);padding:.7rem .8rem .7rem 1.2rem;box-shadow:var(--shadow-lg);margin:1rem 0;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;order:2}
.addbar.actions-top .hint{color:#9fb2c2}
.addbar.actions-top .addbar-picked{font:700 1.1rem var(--display);color:#fff}
.addbar.actions-top .addbar-picked:empty{display:none}
.addbar.actions-top .btn-amber{margin-left:auto}
.addbar.actions-top .addbar-quote{margin-left:0;color:#d4dee6}
.addbar.actions-top .addbar-quote .muted{color:#9fb2c2}
.addbar.actions-top .btn.ghost{border-color:rgba(255,255,255,.4);color:#fff}
.shop form[action$="/quote/add-many"]{display:flex;flex-direction:column}
.shop form[action$="/quote/add-many"] > .scroll{order:1}
.shop form[action$="/quote/add-many"] > .pager{order:3}
.shop .cat-grid2{margin:1rem 0 1.5rem}

@media (min-width:861px){
  .shop .filters select[name=category]{display:none}
}
@media (max-width:1100px){
  .cat-grid2{grid-template-columns:repeat(4,1fr)}
  .cat2.more{grid-column:1 / -1}
  .brand-tiles{grid-template-columns:repeat(4,1fr)}
  .hero2-grid{grid-template-columns:1fr}
  .finder{max-width:34rem}
  header.site.main nav{gap:1rem}
  .brand-name{display:none}
}
@media (max-width:860px){
  .phone-only{display:inline-flex!important}
  .topbar-line{display:none}
  .topbar .wrap{justify-content:flex-end}
  header.site.main .bar{flex-wrap:wrap;gap:.6rem 1rem;min-height:0}
  header.site.main .brand{margin-right:auto}
  header.site.main .site-search{order:3;flex-basis:100%;max-width:none}
  header.site.main nav{display:none;order:4;flex-basis:100%;flex-direction:column;align-items:stretch;gap:0;padding:.4rem 0 .6rem}
  header.site.main.open nav{display:flex}
  header.site.main nav > a,header.site.main nav .nav-cat > a{display:block;padding:.75rem .2rem;border-top:1px solid rgba(255,255,255,.08)}
  header.site.main nav .nav-menu{display:none!important}
  header.site.main nav .cart-btn{display:none}
  header.site.main nav a.on::after{display:none}
  .proof-grid{grid-template-columns:1fr 1fr}
  .proof-item:nth-child(3){border-left:0;padding-left:0}
  .serve,.rig-grid,.stories,.why{grid-template-columns:1fr;gap:2rem}
  .cat-grid2{grid-template-columns:repeat(2,1fr)}
  .cat2.feature{grid-column:span 2;grid-row:auto}
  .sec-head,.cta-grid,.pagehead-row{flex-direction:column;align-items:flex-start}
  footer.site.main .foot-cols{grid-template-columns:1fr 1fr}
  .shop{grid-template-columns:1fr}
  .shop-side{display:none}
  section.sec{padding:3.5rem 0}
}
@media (max-width:600px){
  .audiences{grid-template-columns:1fr 1fr}
  .proof-grid{grid-template-columns:1fr}
  .proof-item{border-left:0;padding:1rem 0;border-top:1px solid rgba(255,255,255,.08)}
  .proof-item:first-child{border-top:0}
  .cat2.more{flex-direction:column;align-items:flex-start}
  .brand-tiles{grid-template-columns:repeat(2,1fr)}
  .rig-parts{grid-template-columns:1fr}
  footer.site.main .foot-cols{grid-template-columns:1fr}
  .hero2-grid{padding-top:3rem;padding-bottom:3rem}
  .addbar.actions-top .hint{display:none}
}
@media print{
  .topbar,.hero2-bg,.finder,.proof,.cta-band{display:none}
  .hero2,.hero2 h1{background:none;color:#000!important}
}
table.catalog-grid .c-cat{width:10%}
table.catalog-grid .c-brand{width:8%}
table.catalog-grid .c-series{width:9%}
table.catalog-grid .c-model{width:10%}
table.catalog-grid .c-price{width:10.5%}
table.catalog-grid .c-qty{width:9%}
table.catalog-grid td.c-desc a{color:var(--ink);text-decoration:none}
table.catalog-grid td.c-desc a:hover{color:var(--steel);text-decoration:underline}
table.catalog-grid td.right{white-space:nowrap}
table.catalog-grid td.right .muted.small{white-space:normal}
.topbar a{white-space:nowrap}
@media (max-width:600px){.topbar a[href^="mailto:"]{display:none}.topbar-links{gap:1rem}}
.cat2.feature .cat2-yard{background-size:cover;background-position:62% 40%;padding:0;min-height:12rem}
table.catalog-grid .c-cat{width:8%}
table.catalog-grid .c-series{width:10.5%}
table.catalog-grid td{hyphens:manual}
/* More room for the description (Ryan, 26 October 2026). */
table.catalog-grid.one-cat .c-cat{display:none}
table.catalog-grid.one-cat .c-brand{width:9%}
table.catalog-grid.one-cat .c-series{width:11%}
table.catalog-grid.one-cat .c-model{width:11%}
table.catalog-grid .c-cat{width:10%}
table.catalog-grid td.c-cat{overflow-wrap:normal;word-break:normal}
table.catalog-grid td.c-desc strong{line-height:1.3}
/* No grey text in fields (26 October 2026): the catalog search shows a magnifier instead. */
.shop .filters input[type=search]{padding-left:2.4rem;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%235f6e7b' stroke-width='2.5' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat .8rem center}
.filters .field{margin:0}

/* Added to your cart (28 October 2026; Figma "Prairie: add to cart"): a panel
   from the right on a desktop, a sheet from the bottom on a phone. */
.in-cart{display:flex;align-items:center;gap:.6rem;background:#eef7f2;border:1px solid #b9dcc8;color:#174f34;border-radius:var(--r-sm);padding:.6rem .9rem;margin:.8rem 0 0}
.in-cart a{margin-left:auto;font-weight:600}
.in-cart[hidden]{display:none}
.tick{width:22px;height:22px;border-radius:50%;background:var(--go);color:#fff;display:inline-grid;place-items:center;font-size:.8rem;font-weight:700;flex:none}
.btn.added{background:var(--go);color:#fff;box-shadow:none}
@keyframes pill-bump{0%{box-shadow:0 0 0 0 rgba(242,169,0,.7)}100%{box-shadow:0 0 0 8px rgba(242,169,0,0)}}
.pill.bump{animation:pill-bump .7s ease-out 2}
.added-panel{position:fixed;inset:0 0 0 auto;margin:0;height:100%;max-height:none;width:420px;max-width:100%;border:0;padding:0;background:#fff;color:var(--ink);box-shadow:var(--shadow-lg);flex-direction:column;z-index:60}
.added-panel[open]{display:flex}
.added-panel::backdrop{background:rgba(15,29,41,.35)}
.ap-head{display:flex;align-items:center;gap:.6rem;padding:1.2rem 1.4rem;border-bottom:1px solid var(--line)}
.ap-head h2{font-size:1.25rem;margin:0}
.ap-head form{margin-left:auto}
.ap-close{background:none;border:0;font-size:1.6rem;line-height:1;color:var(--ink-soft);cursor:pointer;padding:.2rem .4rem}
.ap-line{display:flex;gap:.9rem;padding:1.2rem 1.4rem;border-bottom:1px solid var(--line);align-items:flex-start}
.ap-line img,.ap-thumb{width:72px;height:72px;object-fit:contain;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);flex:none}
.ap-sum{display:flex;justify-content:space-between;padding:1rem 1.4rem;color:var(--ink-soft)}
.ap-sum strong{color:var(--ink)}
.ap-others{list-style:none;margin:0;padding:0 1.4rem;font-size:.9rem;color:var(--ink-soft)}
.ap-others li{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px dashed var(--line);padding:.4rem 0}
.ap-foot{margin-top:auto;padding:1.2rem 1.4rem;border-top:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column;gap:.6rem}
.ap-foot .btn,.ap-foot form .btn{width:100%;justify-content:center;margin:0}
.ap-foot form{margin:0}
.ap-foot p{text-align:center;margin:0}
@media (max-width:640px){
  .added-panel{inset:auto 0 0 0;width:100%;height:auto;max-height:85vh;border-radius:var(--r-lg) var(--r-lg) 0 0}
  .added-panel::before{content:"";width:40px;height:4px;border-radius:2px;background:var(--line);margin:.6rem auto 0}
  .ap-foot{margin-top:.8rem}
}
/* The catalog: rows already in the cart. */
tr.in-cart-row{background:#f3faf6}
.tag.in-cart-tag{background:#eef7f2;color:#174f34;border:1px solid #b9dcc8;font-weight:600}
/* The catalog's add bar, slimmer (28 October 2026). */
.addbar.actions-top{padding:.4rem .5rem .4rem 1rem;gap:.6rem;font-size:.95rem}
.addbar.actions-top .btn-amber{margin-left:auto}
.addbar.actions-top .addbar-quote strong{color:#fff}

/* A notice to buyers on a product page, set in the admin (30 October 2026). */
.notice{display:flex;gap:.75rem;align-items:flex-start;background:var(--amber-50,#fff6dd);border:1px solid #f0d89a;border-left:4px solid var(--hi);border-radius:6px;padding:.75rem .9rem;margin:1rem 0;max-width:44rem}
.notice-ic{flex:none;width:22px;height:22px;border-radius:50%;background:var(--hi);color:var(--steel-deep);font:800 .875rem/22px Arial,sans-serif;text-align:center}
.notice p{margin:0;font-weight:600;line-height:1.45}
.notice a{color:var(--steel);font-weight:700;white-space:nowrap}