/* ==========================================================================
   MULE — Diesel Generator Sales Site
   Palette and figure backgrounds are sampled from the approved renders so the
   JPEGs sit flush against the page with no visible edge.
   ========================================================================== */

:root {
  /* Colour */
  --ink:        #12161b;
  --ink-2:      #1b222a;
  --ink-3:      #2a333d;
  --steel:      #6a737c;   /* exact background of the generator renders */
  --steel-deep: #4b5560;
  --steel-line: #8e979f;
  --paper:      #ececeb;   /* exact background of the mule photograph */
  --paper-2:    #e0e1df;
  --paper-3:    #d3d5d2;
  --rule:       rgba(18, 22, 27, .14);
  --rule-light: rgba(255, 255, 255, .18);
  --diesel:     #f2b705;   /* the single accent. CTAs only. */
  --diesel-dk:  #d9a304;

  /* Type */
  --display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --body:    "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --data:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Rhythm */
  --gutter: clamp(20px, 5vw, 64px);
  --wrap: 1240px;
  --header-h: 68px;
}

/* --------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 700; line-height: 1.02; letter-spacing: -.005em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid var(--diesel); outline-offset: 3px; }

/* Small uppercase mono label — used everywhere a value needs a name.
   The data plate motif: this site talks in nameplate language. */
.eyebrow {
  font-family: var(--data);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 4px;
}
.eyebrow--light { color: rgba(255,255,255,.72); }

/* --------------------------------------------------------------- header -- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--ink);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.site-header__bar {
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { width: 96px; }
.brand--footer img { width: 82px; opacity: .55; }

.navtoggle {
  appearance: none; border: 1px solid rgba(255,255,255,.22); background: transparent;
  color: #fff; height: 42px; padding: 0 14px 0 12px; border-radius: 2px;
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  font-family: var(--data); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  transition: background .18s ease, border-color .18s ease;
}
.navtoggle:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.4); }
.navtoggle__icon { display: block; width: 18px; height: 12px; position: relative; }
.navtoggle__icon i {
  position: absolute; left: 0; right: 0; height: 2px; background: #fff;
  transition: transform .22s ease, opacity .18s ease;
}
.navtoggle__icon i:nth-child(1) { top: 0; }
.navtoggle__icon i:nth-child(2) { top: 5px; }
.navtoggle__icon i:nth-child(3) { top: 10px; }
[aria-expanded="true"] .navtoggle__icon i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
[aria-expanded="true"] .navtoggle__icon i:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .navtoggle__icon i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.nav {
  display: none;
  background: var(--ink);
  border-top: 1px solid rgba(255,255,255,.08);
}
.nav.is-open { display: block; }
.nav ol { list-style: none; margin: 0; padding: 2px 0 8px; counter-reset: nav; }
.nav li { counter-increment: nav; border-bottom: 1px solid rgba(255,255,255,.07); }
.nav li:last-child { border-bottom: 0; }
.nav a {
  display: flex; align-items: baseline; gap: 16px;
  padding: 9px 0; text-decoration: none; color: #fff;
  font-family: var(--display); font-size: 27px; font-weight: 600; letter-spacing: .01em;
  transition: color .15s ease;
}
.nav a::before {
  content: "0" counter(nav);
  font-family: var(--data); font-size: 11px; font-weight: 400;
  letter-spacing: .14em; color: var(--diesel); min-width: 26px;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--diesel); }

/* --------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 26px; border: 0; border-radius: 2px; cursor: pointer;
  font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: .03em;
  text-transform: uppercase; text-decoration: none;
  transition: transform .14s ease, background .18s ease, color .18s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--diesel); color: var(--ink); }
.btn--primary:hover { background: var(--diesel-dk); }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: var(--ink-3); }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #fff; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ------------------------------------------------------------ home hero -- */
/* The mule is the thesis: it stares the buyer down before a single spec is
   read. Height is capped against viewport width so the wordmark lockup is
   never cropped, right down to a 320px phone. */
.hero {
  position: relative;
  background: var(--paper);
  height: min(78vh, calc(100vw / 1.95));
  min-height: 176px;
  overflow: hidden;
}
.hero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.hero__legal {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 44px var(--gutter) 11px;
  background: linear-gradient(to top, rgba(18,22,27,.62), rgba(18,22,27,0));
  font-family: var(--data); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.82);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}

/* Stat strip directly under the hero — the two numbers that matter. */
.pitch { background: var(--ink); color: #fff; }
.pitch__inner { padding-block: 10px 12px; display: grid; gap: 8px; }
.pitch p { max-width: none; color: rgba(255,255,255,.8); font-size: 17.5px; }
.pitch strong { color: #fff; font-weight: 600; }
.provocation { border-left: 4px solid var(--diesel); padding: 4px 0 4px 22px; }
/* Same face as .eyebrow -- IBM Plex Mono, uppercase -- but at headline scale.
   Tracking tightens as size grows; .18em is right at 11px and far too loose at 40. */
.provocation__q {
  font-family: var(--data);
  font-size: clamp(23px, 3.3vw, 40px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
}
.provocation__a {
  font-family: var(--data);
  font-size: clamp(16px, 2vw, 24px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255,255,255,.58);
  margin: 4px 0 0;
}
.pitch .provocation__q, .pitch .provocation__a { max-width: none; }

.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: rgba(255,255,255,.14); }
.figure { background: var(--ink); padding: 8px 12px 9px; }
.figure__n { font-family: var(--display); font-size: clamp(34px, 5vw, 46px); font-weight: 700; line-height: 1; color: var(--diesel); }
.figure__l { font-family: var(--data); font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.72); margin-top: 8px; }

/* --------------------------------------------------------- equipment cards */
.section { padding: clamp(12px, 1.75vw, 22px) 0; }
.section--steel { background: var(--steel); color: #fff; }
.section--paper2 { background: var(--paper-2); }
.section__head { max-width: none; margin-bottom: 10px; }
.section__head h2 { font-size: clamp(32px, 4.6vw, 50px); text-transform: uppercase; }
.section__head p { margin-top: 4px; color: rgba(18,22,27,.72); }

.cards { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .cards { grid-template-columns: 1fr 1fr; } }

.card {
  background: #fff; border: 1px solid var(--rule); border-radius: 2px;
  display: flex; flex-direction: column; overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(18,22,27,.16); }
/* Both renders sit in the same box so the two cards line up. Contain keeps the
   whole machine in view; the steel background matches the render backdrop. */
.card__media { background: var(--steel); aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; }
.card__media picture { display: contents; }
.card__media img { width: 100%; height: 100%; object-fit: contain; }
.card__body { padding: 10px clamp(12px, 1.5vw, 14px) 12px; display: flex; flex-direction: column; flex: 1; }
.card__body h3 { font-size: clamp(28px, 3.4vw, 36px); text-transform: uppercase; }
.card__body > p { margin-top: 4px; color: rgba(18,22,27,.74); }
.card__specs { list-style: none; margin: 8px 0 10px; padding: 0; border-top: 1px solid var(--rule); }
.card__specs li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 5px 0; border-bottom: 1px solid var(--rule);
  font-family: var(--data); font-size: 12.5px;
}
.card__specs dt, .card__specs span:first-child { color: rgba(18,22,27,.56); letter-spacing: .08em; text-transform: uppercase; font-size: 11px; }
.card__specs span:last-child { font-weight: 500; text-align: right; }
.card .btn { margin-top: auto; align-self: flex-start; }

/* --------------------------------------------------------------- unit hero */
.unit-head { background: var(--ink); color: #fff; padding: clamp(8px, 1.25vw, 13px) 0 clamp(8px, 1vw, 10px); }
.unit-head h1 { font-size: clamp(40px, 7.4vw, 82px); text-transform: uppercase; }
.unit-head__price {
  margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.16);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 28px;
}
.unit-head__price b { font-family: var(--display); font-weight: 700; font-size: clamp(28px, 4vw, 40px); color: var(--diesel); }
.unit-head__price span { font-family: var(--data); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.66); }

/* --- the signature: a scaling callout figure ------------------------------
   Everything lives in one 1200 x 620 coordinate space. The <img>, the leader
   lines (SVG, same viewBox) and the labels (percentage positions) therefore
   stay locked together at any width. Below 1024px the lines are dropped and
   the labels reflow into an ordinary data plate. */
.callout { background: var(--steel); }
/* The two renders carry slightly different background gradients. Matching the
   section to each one keeps the image edge invisible. */
.callout--us { background: #6a737c; }
.callout--eu { background: linear-gradient(to bottom, #68727d 16%, #6a7378 85%); }
.callout__stage { position: relative; aspect-ratio: 1200 / 620; display: none; }
.callout__stage img { position: absolute; }
.callout__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.callout__lines polyline, .callout__lines line { fill: none; stroke: rgba(255,255,255,.6); stroke-width: 1.4; }
.callout__lines circle { fill: rgba(255,255,255,.85); }
.callout__lbl {
  position: absolute; transform: translateY(-50%); text-align: right;
  width: 36%; left: 1%; color: #fff;
}
.callout__lbl b { display: block; font-family: var(--display); font-weight: 600; font-size: clamp(20px, 2vw, 29px); line-height: 1.06; }
.callout__lbl small { display: block; margin-top: 5px; font-family: var(--data); font-size: 11.5px; letter-spacing: .06em; color: rgba(255,255,255,.72); }
@media (min-width: 1024px) { .callout__stage { display: block; } }

/* stacked fallback under 1024px */
.callout__stack { padding: 7px 0 9px; }
.callout__stack img { width: 100%; }
@media (min-width: 1024px) { .callout__stack { display: none; } }

/* --------------------------------------------------------------- data plate */
.plate { border-top: 2px solid var(--ink); }
.plate__row {
  display: grid; grid-template-columns: 1fr; gap: 2px 24px;
  padding: 6px 0; border-bottom: 1px solid var(--rule);
}
@media (min-width: 560px) { .plate__row { grid-template-columns: 168px 1fr; align-items: baseline; } }
.plate__row dt { font-family: var(--data); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(18,22,27,.55); }
.plate__row dd { margin: 0; font-family: var(--data); font-size: 15px; font-weight: 500; }
.plate__row dd em { font-style: normal; color: rgba(18,22,27,.6); font-size: 13.5px; }
.plate--light { border-top-color: rgba(255,255,255,.7); }
.plate--light .plate__row { border-bottom-color: var(--rule-light); }
.plate--light dt { color: rgba(255,255,255,.62); }
.plate--light dd { color: #fff; }

.flag {
  margin-top: 8px; padding: 8px 10px; border-left: 3px solid var(--diesel);
  background: rgba(242,183,5,.1); font-size: 15.5px;
}
.flag b { font-family: var(--data); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; display: block; margin-bottom: 5px; }

/* fleet-of-eleven device, EU page */
.fleet { display: flex; align-items: flex-end; gap: 5px; margin: 4px 0 0; }
.fleet i { display: block; width: 15px; height: 26px; background: currentColor; opacity: .75; border-radius: 1px; }

/* --------------------------------------------------------------- two-col -- */
.split { display: grid; gap: clamp(10px, 1.5vw, 16px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 1.05fr .95fr; } }

/* --------------------------------------------------------------- forms ---- */
.formcard { background: #fff; border: 1px solid var(--rule); border-radius: 2px; padding: clamp(12px, 2vw, 18px); }
.formcard h2 { font-size: clamp(28px, 3.6vw, 40px); text-transform: uppercase; }
.formcard > p { margin-top: 4px; color: rgba(18,22,27,.72); }
.fields { display: grid; gap: 10px; margin-top: 10px; }
@media (min-width: 620px) { .fields--2 { grid-template-columns: 1fr 1fr; } .fields--2 .field--wide { grid-column: 1 / -1; } }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-family: var(--data); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(18,22,27,.6); }
.field label .req { color: #b3400f; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 16px; color: var(--ink);
  padding: 12px 13px; border: 1px solid rgba(18,22,27,.28); border-radius: 2px;
  background: #fff; width: 100%;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.field textarea { min-height: 122px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(242,183,5,.35);
}
.formcard .btn { margin-top: 10px; }
.formnote { margin-top: 6px; font-family: var(--data); font-size: 11px; line-height: 1.7; letter-spacing: .04em; color: rgba(18,22,27,.55); }
.hp { position: absolute; left: -9999px; }

/* --------------------------------------------------------------- contact -- */
.team { background: #f3f3f1; }
.team img { width: 100%; }

/* --------------------------------------------------------------- thanks --- */
.thanks { padding: clamp(13px, 2.25vw, 28px) 0; }
.thanks h1 { font-size: clamp(38px, 6vw, 66px); text-transform: uppercase; }
.dl { display: grid; gap: 8px; margin-top: 10px; max-width: 560px; }
.dl a {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 10px 14px; text-decoration: none; background: #fff;
  border: 1px solid var(--rule); border-left: 3px solid var(--ink);
  transition: border-left-color .18s ease, transform .16s ease;
}
.dl a:hover { border-left-color: var(--diesel); transform: translateX(3px); }
.dl b { font-family: var(--display); font-size: 24px; font-weight: 600; text-transform: uppercase; }
.dl span { font-family: var(--data); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(18,22,27,.55); }
.dl a.is-focus { border-left-color: var(--diesel); background: #fffdf3; }

/* --------------------------------------------------------------- admin ---- */
/* Deliberately unbranded. This should read as an internal ops tool. */
body.admin { background: #f4f5f6; font-size: 15px; }
.admin-bar { background: #222; color: #fff; padding: 11px 20px; font-family: var(--data); font-size: 12px; letter-spacing: .08em; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.admin-wrap { max-width: 1180px; margin: 0 auto; padding: 26px 20px 70px; }
.admin-wrap h1 { font-family: var(--body); font-size: 22px; font-weight: 600; letter-spacing: 0; }
.admin-wrap code { background: #e6e9ec; padding: 1px 5px; font-size: 12.5px; }
.admin-wrap h2 { font-family: var(--body); font-size: 16px; font-weight: 600; letter-spacing: 0; margin: 32px 0 10px; }
.admin-login { max-width: 380px; margin: 60px auto; background: #fff; border: 1px solid #d5d8dc; padding: 24px; }
.admin-login label { display: block; font-size: 12px; color: #555; margin-bottom: 6px; }
.admin-login input { width: 100%; padding: 10px; font: inherit; font-size: 16px; border: 1px solid #aeb4bb; }
.admin-login button { margin-top: 14px; width: 100%; padding: 11px; font: inherit; font-weight: 600; background: #222; color: #fff; border: 0; cursor: pointer; }
.admin-err { margin-top: 12px; color: #a11; font-size: 13px; min-height: 18px; }
table.data { width: 100%; border-collapse: collapse; background: #fff; font-size: 13.5px; }
table.data th, table.data td { border: 1px solid #d5d8dc; padding: 8px 10px; text-align: left; vertical-align: top; }
table.data th { background: #eceef0; font-weight: 600; white-space: nowrap; }
table.data td.n { font-family: var(--data); font-size: 12.5px; white-space: nowrap; }
.tablescroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tag { display: inline-block; padding: 1px 7px; border-radius: 2px; font-size: 11px; background: #e3e7ea; }
.muted { color: #667; font-size: 13px; }

/* --------------------------------------------------------------- footer --- */
.site-footer { background: var(--ink); color: rgba(255,255,255,.6); }
.site-footer__top { padding-block: 12px 8px; display: grid; gap: 8px; }
@media (min-width: 780px) { .site-footer__top { grid-template-columns: 1fr auto; align-items: start; } }
.site-footer a { color: rgba(255,255,255,.78); text-decoration: none; }
.site-footer a:hover { color: var(--diesel); }
.footnav { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 26px; font-family: var(--display); font-size: 20px; font-weight: 500; text-transform: uppercase; }
.site-footer__legal { border-top: 1px solid rgba(255,255,255,.1); padding-block: 6px 10px; font-family: var(--data); font-size: 11px; line-height: 1.8; letter-spacing: .04em; }
.site-footer__legal p { max-width: none; }

/* leader lines get a dark halo so they stay legible over both the pale
   machine castings and the steel background */
.callout__lines .halo { stroke: rgba(18,22,27,.4); stroke-width: 3.2; }
.callout__lines .dot-ring { fill: rgba(18,22,27,.45); }

/* On a phone the hero is only as tall as it can be while still showing both
   eyes and the full wordmark, so the caption has nowhere to sit without
   colliding with the lockup. It is decorative; drop it. */
@media (max-width: 760px) {
  .hero__legal { display: none; }
}

/* admin: fact lists and the pricing warning */
/* --- admin: contents, memo, sequencing and LinkedIn posts ----------------- */
.admin-toc { display: flex; flex-wrap: wrap; gap: 0; margin: 22px 0 4px; border-top: 1px solid #d5d8dc; }
.admin-toc a {
  font-family: var(--data); font-size: 12px; letter-spacing: .06em;
  padding: 9px 14px 9px 0; margin-right: 14px; color: #3a4148;
  text-decoration: none; border-bottom: 2px solid transparent;
}
.admin-toc a:hover { border-bottom-color: var(--ink); }

.memo { background: #fff; border: 1px solid #d5d8dc; border-left: 4px solid var(--ink); padding: 26px 28px; margin: 22px 0 6px; max-width: 82ch; }
.memo__hd { font-family: var(--data); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #5c6469; border-bottom: 2px solid var(--ink); padding-bottom: 12px; margin-bottom: 18px; }
.memo__hd span { display: block; margin-bottom: 3px; }
.memo h3 { font-family: var(--body); font-size: 15px; font-weight: 600; margin: 22px 0 7px; }
.memo h3:first-of-type { margin-top: 0; }
.memo p { font-size: 14.5px; line-height: 1.62; margin: 0 0 11px; }

.play-box { background: #fff; border: 1px solid #d5d8dc; border-top: 3px solid var(--diesel); padding: 22px 24px; margin-bottom: 18px; }
.play-box h3 { font-family: var(--body); font-size: 15px; font-weight: 600; margin: 0 0 5px; }
.play-box__lede { font-size: 14px; margin: 0 0 16px; max-width: 84ch; }
.step { display: flex; gap: 14px; padding: 12px 0; border-top: 1px solid #e2e5e8; }
.step__n { font-family: var(--data); font-size: 12px; font-weight: 500; color: #7b838a; flex: 0 0 26px; padding-top: 2px; }
.step strong { display: block; font-size: 14px; margin-bottom: 3px; }
.step span { font-size: 13.5px; color: #4a5158; line-height: 1.55; }

.post {
  position: relative; overflow: hidden; margin-bottom: 14px; padding: 24px 26px;
  border-left: 4px solid var(--diesel); color: #fff;
  background:
    linear-gradient(100deg, rgba(18,22,27,.965) 0%, rgba(18,22,27,.94) 44%, rgba(18,22,27,.80) 74%, rgba(18,22,27,.60) 100%),
    url('/assets/img/stare-band.jpg');
  background-size: auto, cover;
  background-position: center, center 36%;
  background-repeat: no-repeat;
}
.post--gated { border-left-color: #e0522c; }
.post__hd { font-family: var(--data); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--diesel); margin-bottom: 13px; }
.post--gated .post__hd { color: #ff8a63; }
.post__body { white-space: pre-line; font-size: 15px; line-height: 1.7; max-width: 60ch; }
.post__note { margin: 15px 0 0; padding-top: 11px; border-top: 1px solid rgba(255,255,255,.2); font-size: 12.5px; color: rgba(255,255,255,.72); max-width: 68ch; }

.factlist { margin: 0 0 4px; padding-left: 20px; max-width: 96ch; }
.factlist li { margin-bottom: 8px; line-height: 1.55; }
.warnbox {
  max-width: 96ch; margin: 12px 0 0; padding: 12px 14px;
  background: #fff8e1; border-left: 3px solid #d9a304; font-size: 13.5px; line-height: 1.6;
}
td.open { background: #fff5f3; }
td.open strong { color: #a11; }

/* admin: grouped documentation checklist */
.grouphead { font-family: var(--body); font-size: 14px; font-weight: 600; margin: 24px 0 8px; letter-spacing: 0; }
.state { display: inline-block; padding: 2px 8px; border-radius: 2px; font-size: 11px; white-space: nowrap; font-weight: 600; }
.state--have { background: #dff0e0; color: #1d5c26; }
.state--part { background: #fdf0d5; color: #6b4a04; }
.state--open { background: #fbdcd8; color: #8c2116; }
.state--na   { background: #e4e6e9; color: #555c63; }
tr.st-open td { background: #fffafa; }

/* ==========================================================================
   Configurator, catalog and BOM (added Oct 2026)
   ========================================================================== */
.site-header__actions { display: flex; align-items: center; gap: 10px; }
.bomlink {
  display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px;
  background: var(--diesel); color: var(--ink); text-decoration: none; border-radius: 2px;
  font-family: var(--data); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
}
.bomlink b { font-weight: 500; background: var(--ink); color: var(--diesel); padding: 2px 6px; border-radius: 2px; letter-spacing: .04em; }
.bomlink[hidden] { display: none; }

/* page head used by configure / catalog / bom */
.pagehead { background: var(--ink); color: #fff; overflow: hidden; }
.pagehead__inner { display: grid; gap: 8px; padding-block: clamp(8px, 1.25vw, 14px) clamp(8px, 1vw, 11px); align-items: center; }
@media (min-width: 900px) { .pagehead__inner--art { grid-template-columns: 1fr 1fr; } }
.pagehead h1 { font-size: clamp(38px, 6.4vw, 72px); text-transform: uppercase; }
.pagehead p.lede { margin-top: 4px; max-width: none; color: rgba(255,255,255,.78); font-size: 18px; }
.pagehead__art img { width: 100%; border-radius: 2px; }

/* home: entry band */
.entry { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .entry { grid-template-columns: 1.15fr .85fr; } }
.entry__art { background: var(--ink); border-radius: 2px; overflow: hidden; }
.entry__art img { width: 100%; height: 100%; object-fit: cover; }
.entry__art picture { display: contents; }
.entry__links { display: grid; gap: 14px; align-content: start; }
.entry__link {
  display: block; background: #fff; border: 1px solid var(--rule); border-left: 4px solid var(--ink);
  padding: 10px 14px; text-decoration: none; transition: border-left-color .18s ease, transform .16s ease;
}
.entry__link:hover { border-left-color: var(--diesel); transform: translateX(3px); }
.entry__link b { display: block; font-family: var(--display); font-size: 27px; font-weight: 700; text-transform: uppercase; line-height: 1.05; }
.entry__link span { display: block; margin-top: 6px; color: rgba(18,22,27,.72); font-size: 15.5px; }
.entry__link small { display: block; margin-top: 10px; font-family: var(--data); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(18,22,27,.55); }

/* configurator form */
.cfg { display: grid; gap: 10px; }
.qblock { border-top: 2px solid var(--ink); padding-top: 6px; }
.qblock > legend, .qblock > .qlabel { font-family: var(--display); font-size: 25px; font-weight: 700; text-transform: uppercase; padding: 0; margin-bottom: 4px; }
.qblock .qhint { font-size: 15px; color: rgba(18,22,27,.66); margin: 0 0 6px; }
fieldset.qblock { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.qblock > legend { float: left; width: 100%; border-top: 2px solid var(--ink); padding-top: 6px; }
fieldset.qblock > legend + * { clear: both; }
.tiles { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .tiles--2 { grid-template-columns: 1fr 1fr; } .tiles--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 980px) { .tiles--4 { grid-template-columns: repeat(4, 1fr); } }
.tile { position: relative; display: block; cursor: pointer; }
.tile input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.tile__box {
  display: block; height: 100%; background: #fff; border: 1.5px solid rgba(18,22,27,.2); border-radius: 2px;
  padding: 8px 10px; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.tile__box b { display: block; font-family: var(--display); font-size: 21px; font-weight: 700; text-transform: uppercase; line-height: 1.05; }
.tile__box span { display: block; margin-top: 4px; font-size: 14.5px; color: rgba(18,22,27,.68); line-height: 1.45; }
.tile input:checked + .tile__box { border-color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); background: #fffdf3; }
.tile input:checked + .tile__box b::after { content: " ✓"; color: var(--diesel-dk); }
.tile input:focus-visible + .tile__box { outline: 3px solid var(--diesel); outline-offset: 2px; }
.tile--cat .tile__box { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.tile--cat .tile__img { aspect-ratio: 16 / 9; background: var(--ink); display: grid; place-items: center; overflow: hidden; }
.tile--cat .tile__img img { width: 100%; height: 100%; object-fit: cover; }
.tile--cat .tile__img i { font-style: normal; font-family: var(--display); font-size: 40px; font-weight: 700; color: rgba(255,255,255,.22); }
.tile--cat .tile__txt { padding: 10px 12px 12px; }
.tile--cat .tile__txt b { font-size: 18px; }
.tile--cat .tile__txt span { font-family: var(--data); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.inline-fields { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .inline-fields { grid-template-columns: 1fr 1fr; } }
.cfg__go { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* results */
.assume { background: var(--ink); color: #fff; padding: 8px 12px; border-left: 4px solid var(--diesel); display: grid; gap: 14px; }
@media (min-width: 760px) { .assume { grid-template-columns: 1fr auto; align-items: center; } }
.assume p { margin: 0; font-family: var(--data); font-size: 13.5px; line-height: 1.7; color: rgba(255,255,255,.86); }
.assume p b { color: var(--diesel); font-weight: 500; }
.assume label { font-family: var(--data); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7); display: flex; align-items: center; gap: 10px; }
.assume input { width: 90px; font: inherit; font-size: 16px; padding: 8px 10px; border: 0; border-radius: 2px; }
.rgroup { margin-top: 8px; background: #fff; border: 1px solid var(--rule); border-radius: 2px; }
.rgroup__hd { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--rule); }
.rgroup__hd .thumb { aspect-ratio: 16 / 10; background: var(--ink); border-radius: 2px; overflow: hidden; display: grid; place-items: center; }
.rgroup__hd .thumb img { width: 100%; height: 100%; object-fit: cover; }
.rgroup__hd .thumb i { font-style: normal; font-family: var(--display); font-size: 26px; font-weight: 700; color: rgba(255,255,255,.25); }
.rgroup__hd h3 { font-size: clamp(22px, 2.6vw, 28px); text-transform: uppercase; }
.rgroup__hd p { margin: 3px 0 0; font-family: var(--data); font-size: 11.5px; letter-spacing: .04em; color: rgba(18,22,27,.6); }
.rgroup__ft { padding: 6px 10px; font-family: var(--data); font-size: 12px; letter-spacing: .06em; }
.rgroup__ft a { color: var(--ink); }

/* one line item -- shared by configurator results, catalog and BOM */
.line { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; padding: 8px 10px; border-bottom: 1px solid var(--rule); align-items: start; }
.line:last-child { border-bottom: 0; }
.line.is-on { background: #fffdf3; }
.line__check { padding-top: 2px; }
.line__check input { width: 22px; height: 22px; accent-color: var(--ink); cursor: pointer; }
.line__pn { font-family: var(--data); font-size: 13.5px; font-weight: 500; word-break: break-all; }
.line__desc { overflow-wrap: anywhere; font-size: 15px; line-height: 1.45; color: rgba(18,22,27,.82); margin-top: 2px; }
.line__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.ltag { font-family: var(--data); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border-radius: 2px; background: var(--paper-2); color: rgba(18,22,27,.75); }
.ltag--eol { background: #fbdcd8; color: #8c2116; }
.ltag--nr { background: #fdf0d5; color: #6b4a04; }
.ltag--new { background: #dff0e0; color: #1d5c26; }
.ltag--quote { background: var(--ink); color: var(--diesel); }
.line__buy { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 6px; }
.line--nocheck { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) {
  .line { grid-template-columns: auto minmax(0, 1fr) 430px; }
  .line--nocheck { grid-template-columns: minmax(0, 1fr) 450px; }
  .line__buy { grid-column: auto; margin-top: 0; justify-content: flex-end; flex-wrap: nowrap; }
}
.line__nums { font-family: var(--data); font-size: 12px; line-height: 1.6; text-align: right; color: rgba(18,22,27,.62); }
.line__nums b { display: block; font-size: 15px; font-weight: 500; color: var(--ink); }
.qty { display: inline-flex; align-items: stretch; border: 1px solid rgba(18,22,27,.3); border-radius: 2px; background: #fff; }
.qty button { width: 38px; border: 0; background: var(--paper-2); font: inherit; font-size: 18px; cursor: pointer; color: var(--ink); }
.qty button:hover { background: var(--paper-3); }
.qty input { width: 72px; border: 0; text-align: center; font-family: var(--data); font-size: 16px; padding: 8px 4px; -moz-appearance: textfield; }
.qty input::-webkit-inner-spin-button, .qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: 16px; }
.linkbtn { background: none; border: 0; padding: 4px 0; font-family: var(--data); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: #8c2116; cursor: pointer; text-decoration: underline; }

/* sticky BOM bar */
.bombar { position: sticky; bottom: 0; z-index: 50; background: var(--ink); color: #fff; border-top: 3px solid var(--diesel); }
.bombar[hidden] { display: none; }
.bombar__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; padding-block: 6px; }
.bombar__sum { font-family: var(--data); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; }
.bombar__sum b { font-family: var(--display); font-size: 24px; font-weight: 700; color: var(--diesel); letter-spacing: 0; margin-left: 6px; }

/* catalog controls */
.searchbar { display: grid; gap: 12px; }
@media (min-width: 900px) { .searchbar { grid-template-columns: 2.2fr 1.2fr 1fr 1fr; align-items: end; } }
.searchbar input[type="search"] { font-size: 17px; }
.searchmeta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; align-items: center; margin: 6px 0 4px; font-family: var(--data); font-size: 12px; letter-spacing: .06em; color: rgba(18,22,27,.66); }
.searchmeta label { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip { font-family: var(--data); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; padding: 7px 11px; border: 1px solid rgba(18,22,27,.25); border-radius: 2px; background: #fff; color: var(--ink); cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.results { background: #fff; border: 1px solid var(--rule); border-radius: 2px; }
.results__more { text-align: center; padding: 8px; }
.empty { padding: 12px 10px; text-align: center; color: rgba(18,22,27,.7); }

/* BOM page */
.bomtotal { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px; padding: 8px 10px; border-top: 2px solid var(--ink); background: var(--paper-2); }
.bomtotal span { font-family: var(--data); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.bomtotal b { font-family: var(--display); font-size: clamp(30px, 4vw, 40px); font-weight: 700; }
.cfgsum { font-family: var(--data); font-size: 12.5px; line-height: 1.8; color: rgba(18,22,27,.75); margin-top: 4px; }
.done { background: #fff; border: 1px solid var(--rule); border-left: 4px solid var(--diesel); padding: clamp(10px, 1.5vw, 14px); }
.done h2 { font-size: clamp(30px, 4vw, 44px); text-transform: uppercase; }
.done .bomid { font-family: var(--data); font-size: 14px; letter-spacing: .08em; margin-top: 4px; }
.formerr { margin-top: 14px; color: #8c2116; font-size: 15px; min-height: 1em; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--ink); }

@media print {
  .site-header, .site-footer, .bombar, .noprint, .formcard { display: none !important; }
  body { background: #fff; }
  .pagehead { background: #fff; color: #000; }
  .pagehead p.lede { color: #333; }
}
#scope-tiles { grid-template-columns: 1fr 1fr; }
@media (min-width: 620px) { #scope-tiles { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 980px) { #scope-tiles { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 619px) {
  .tile--cat .tile__txt { padding: 8px 9px 10px; }
  .tile--cat .tile__txt b { font-size: 15.5px; }
  .tile--cat .tile__txt span { font-size: 10px; letter-spacing: .04em; }
}
@media (max-width: 859px) { .line__nums { text-align: left; } }
@media (max-width: 899px) { .chips { display: none; } }

/* The mule keeps watching: its stare runs under the header on every inner page. */
.stare { background: var(--paper); border-bottom: 1px solid var(--rule); }
.stare img { width: 100%; max-width: 1464px; margin-inline: auto; height: clamp(44px, 9vw, 132px); object-fit: cover; object-position: 50% 45%; }
@media (max-width: 620px) { .stare img { object-fit: contain; height: auto; } }
.qblock > legend { line-height: 1.05; }
@media (max-width: 899px) {
  .pagehead__art { display: none; }
  .pagehead p.lede { font-size: 16px; line-height: 1.5; }
  .pagehead h1 { font-size: clamp(34px, 9vw, 52px); }
}