/* Downrange Bike Works LLC — Wheel Trueing Bench Theme */
/* Palette: STAND-BLACK #1D242B, BENCH-WHITE #EFF1EC, RANGE-BLUE #4E7FBF,
   DECAL-GOLD #C9A227, JAW-DEEP #141B21, WORK-STEEL #3E4750, SPOKE-SILVER #B9C2C9 */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: #1D242B;
  color: #EFF1EC;
  line-height: 1.65;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: 0.01em;
  line-height: 1.15;
  margin: 0 0 0.5em 0;
  color: #EFF1EC;
}

p { margin: 0 0 1em 0; }

a { color: #4E7FBF; text-decoration: none; }
a:hover { color: #C9A227; }

img { max-width: 100%; }

/* ---------- Scroll reveal (class based only) ---------- */
html.js .reveal-pre { opacity: 0; transform: translateY(14px); }
html.js .reveal-pre.is-shown { opacity: 1; transform: none; }

/* ---------- Header : SPOKE CHECK TABS ---------- */
.spoketabs {
  background-color: #141B21;
  border-bottom: 3px solid #3E4750;
  padding: 14px 24px 10px 24px;
}

.spoketabs-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}

.brandplate {
  background-color: #22303c;
  border: 2px solid #4E7FBF;
  border-radius: 4px;
  padding: 9px 16px 9px 20px;
  position: relative;
  display: inline-flex;
  flex-direction: column;
}

.brandplate-bolt {
  position: absolute;
  top: 5px;
  right: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: #4E7FBF;
}

.brandplate-name {
  font-family: Georgia, serif;
  font-size: 19px;
  font-weight: bold;
  color: #EFF1EC;
  letter-spacing: 0.11em;
}

.brandplate-sub {
  font-size: 10.5px;
  letter-spacing: 0.24em;
  color: #B9C2C9;
  text-transform: uppercase;
}

.spoketab-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  flex: 1;
}

.spoketab {
  background-color: #3E4750;
  border: 1px solid #B9C2C9;
  border-radius: 3px;
  padding: 7px 12px 5px 12px;
  min-width: 96px;
  display: inline-flex;
  flex-direction: column;
  text-align: left;
}

.spoketab-label {
  color: #EFF1EC;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.06em;
}

.spoketab-label:hover { color: #C9A227; }

.spoketab-spk {
  color: #B9C2C9;
  font-size: 9.5px;
  letter-spacing: 0.18em;
}

.spoketab:nth-child(1) { transform: translateY(0); }
.spoketab:nth-child(2) { transform: translateY(6px); }
.spoketab:nth-child(3) { transform: translateY(2px); }
.spoketab:nth-child(4) { transform: translateY(9px); }
.spoketab:nth-child(5) { transform: translateY(4px); }

.spoketab.is-current {
  background-color: #4E7FBF;
  border-color: #C9A227;
}

.spoketab.is-current .spoketab-label { color: #EFF1EC; }
.spoketab.is-current .spoketab-spk { color: #EFF1EC; }

/* mobile nav button */
.spoketabs-toggle {
  display: none;
  background-color: #3E4750;
  color: #EFF1EC;
  border: 1px solid #B9C2C9;
  border-radius: 3px;
  font-size: 14px;
  padding: 8px 14px;
  letter-spacing: 0.1em;
  cursor: pointer;
}

/* ---------- Hero : TRUEING BAY ---------- */
.truebench {
  background-color: #1D242B;
  border-bottom: 1px solid #3E4750;
  padding: 56px 24px 48px 24px;
}

.truebench-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  align-items: center;
}

.truebench-copy {
  flex: 1 1 55%;
  min-width: 320px;
}

.truebench-kicker {
  color: #C9A227;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.truebench-title {
  font-size: 46px;
  margin: 0 0 18px 0;
}

.truebench-title .word-true { color: #4E7FBF; }

.truebench-lede {
  font-size: 17px;
  color: #EFF1EC;
  max-width: 620px;
}

.torquepin-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 22px;
}

.torquepin {
  background-color: #4E7FBF;
  color: #EFF1EC;
  border: 1px solid #C9A227;
  border-radius: 4px;
  padding: 12px 22px;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: inline-flex;
  flex-direction: column;
}

.torquepin:hover { background-color: #C9A227; color: #141B21; }

.torquepin-code {
  font-size: 9.5px;
  letter-spacing: 0.24em;
  color: #EFF1EC;
}

.torquepin:hover .torquepin-code { color: #141B21; }

.truebench-stage {
  flex: 1 1 42%;
  min-width: 300px;
}

/* ---------- CSS TRUEING STAND (pure CSS motif) ---------- */
.truestand {
  position: relative;
  width: 100%;
  max-width: 420px;
  height: 430px;
  margin: 0 auto;
  background-color: #141B21;
  border: 2px solid #3E4750;
  border-radius: 6px;
}

.truestand-bench {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 74px;
  background-color: #3E4750;
  border-top: 3px solid #B9C2C9;
  border-radius: 0 0 5px 5px;
}

.truestand-benchedge {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 70px;
  height: 2px;
  background-color: #B9C2C9;
}

.truestand-jaw {
  position: absolute;
  bottom: 74px;
  width: 20px;
  height: 44px;
  background-color: #4E7FBF;
  border: 1px solid #B9C2C9;
}

.truestand-jaw.jaw-left { left: 78px; }
.truestand-jaw.jaw-right { right: 78px; }

.truestand-post {
  position: absolute;
  bottom: 74px;
  width: 10px;
  height: 42px;
  background-color: #B9C2C9;
}

.truestand-post.post-left { left: 96px; }
.truestand-post.post-right { right: 96px; }

.truestand-wheel {
  position: absolute;
  left: 50%;
  top: 52px;
  width: 196px;
  height: 196px;
  margin-left: -98px;
  border: 9px solid #3E4750;
  border-radius: 50%;
  background-color: #1D242B;
}

.truestand-rim {
  position: absolute;
  left: 50%;
  top: 64px;
  width: 172px;
  height: 172px;
  margin-left: -86px;
  border: 2px solid #B9C2C9;
  border-radius: 50%;
}

.truestand-hub {
  position: absolute;
  left: 50%;
  top: 138px;
  width: 22px;
  height: 22px;
  margin-left: -11px;
  background-color: #4E7FBF;
  border: 2px solid #B9C2C9;
  border-radius: 50%;
}

.truestand-spoke {
  position: absolute;
  left: 50%;
  top: 150px;
  height: 1px;
  width: 84px;
  background-color: #B9C2C9;
  transform-origin: 0 0;
}

.truestand-spoke.s1 { transform: rotate(18deg); }
.truestand-spoke.s2 { transform: rotate(56deg); }
.truestand-spoke.s3 { transform: rotate(96deg); }
.truestand-spoke.s4 { transform: rotate(136deg); }
.truestand-spoke.s5 { transform: rotate(176deg); }
.truestand-spoke.s6 { transform: rotate(216deg); }
.truestand-spoke.s7 { transform: rotate(256deg); }
.truestand-spoke.s8 { transform: rotate(296deg); }
.truestand-spoke.s9 { transform: rotate(336deg); }

.truestand-nipple {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #C9A227;
}

.truestand-nipple.n1 { left: 50%; top: 60px; margin-left: -2px; }
.truestand-nipple.n2 { left: 226px; top: 146px; }
.truestand-nipple.n3 { left: 50%; top: 232px; margin-left: -2px; }
.truestand-nipple.n4 { left: 96px; top: 146px; }

.truestand-gauge {
  position: absolute;
  right: 12px;
  top: 120px;
  width: 62px;
  height: 8px;
  background-color: #B9C2C9;
}

.truestand-feeler {
  position: absolute;
  width: 3px;
  height: 16px;
  background-color: #4E7FBF;
}

.truestand-feeler.f1 { right: 70px; top: 112px; }
.truestand-feeler.f2 { right: 70px; top: 128px; }

.truestand-dial {
  position: absolute;
  right: 14px;
  top: 20px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background-color: #141B21;
  border: 2px solid #B9C2C9;
}

.truestand-dial-needle {
  position: absolute;
  left: 25px;
  top: 25px;
  width: 20px;
  height: 2px;
  background-color: #C9A227;
  transform: rotate(-40deg);
  transform-origin: 0 0;
}

.truestand-dial-pin {
  position: absolute;
  left: 23px;
  top: 23px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #4E7FBF;
}

.truestand-tray {
  position: absolute;
  left: 16px;
  bottom: 12px;
  width: 118px;
  height: 26px;
  background-color: #141B21;
  border: 1px solid #B9C2C9;
  border-radius: 3px;
}

.truestand-tray-tool {
  position: absolute;
  left: 8px;
  top: 8px;
  width: 96px;
  height: 3px;
  background-color: #B9C2C9;
}

.truestand-tray-tool.t2 { top: 15px; width: 70px; background-color: #4E7FBF; }

.truestand-dish {
  position: absolute;
  right: 20px;
  bottom: 10px;
  width: 40px;
  height: 28px;
  background-color: #3E4750;
  border: 1px solid #B9C2C9;
  border-radius: 4px 4px 14px 14px;
}

.truestand-dish-cap {
  position: absolute;
  left: 13px;
  top: 4px;
  width: 14px;
  height: 9px;
  background-color: #C9A227;
  border-radius: 2px;
}

/* ---------- Section shells ---------- */
.benchsection {
  padding: 54px 24px;
}

.benchsection-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.benchsection-alt { background-color: #141B21; }

.sectionlabel {
  color: #C9A227;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.sectiontitle {
  font-size: 32px;
  margin-bottom: 14px;
}

.sectionlede {
  font-size: 16.5px;
  max-width: 760px;
  margin-bottom: 26px;
}

.prose-block {
  max-width: 860px;
}

.prose-block p { color: #EFF1EC; }

/* ---------- BENCH ORDER ROWS (.repairstrip) ---------- */
.ordersection {
  padding: 54px 0 40px 0;
  background-color: #1D242B;
}

.ordersection-head {
  max-width: 1200px;
  margin: 0 auto 26px auto;
  padding: 0 24px;
}

.repairstrip {
  width: 100%;
}

.repairorder {
  display: flex;
  flex-wrap: wrap;
  background-color: #3E4750;
  border-top: 1px solid #B9C2C9;
  border-bottom: 1px solid #B9C2C9;
  padding: 0;
}

.repairorder.order-b { background-color: #33414c; }
.repairorder.order-c { background-color: #3E4750; }
.repairorder.order-d { background-color: #2A353f; }
.repairorder.order-e { background-color: #3E4750; }
.repairorder.order-f { background-color: #33414c; }

.repairorder.order-invert { background-color: #4E7FBF; }

.repairorder.order-skew-a { transform: rotate(-1deg); }
.repairorder.order-skew-b { transform: rotate(1deg); }

.order-col {
  flex: 0 0 168px;
  background-color: #141B21;
  padding: 26px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.order-invert .order-col { background-color: #141B21; }

.order-num {
  font-family: Georgia, serif;
  font-size: 26px;
  color: #EFF1EC;
  letter-spacing: 0.08em;
}

.order-mark {
  width: 26px;
  height: 3px;
  background-color: #4E7FBF;
  margin-top: 8px;
}

.order-panel {
  flex: 1 1 340px;
  padding: 24px 26px;
}

.order-title {
  font-size: 22px;
  color: #EFF1EC;
  margin-bottom: 8px;
}

.order-panel p {
  color: #EFF1EC;
  margin-bottom: 14px;
}

.order-link {
  font-size: 13.5px;
  letter-spacing: 0.08em;
  color: #EFF1EC;
  border-bottom: 1px solid #C9A227;
}

.order-invert .order-link { color: #141B21; border-bottom-color: #141B21; }

/* tension line */
.tensionline {
  flex: 0 0 100%;
  height: 4px;
  background-color: #B9C2C9;
  position: relative;
}

.tensionfill {
  height: 4px;
  background-color: #4E7FBF;
}

.tensionfill.fill-booked { width: 16%; }
.tensionfill.fill-stand { width: 34%; }
.tensionfill.fill-half { width: 52%; }
.tensionfill.fill-near { width: 68%; }
.tensionfill.fill-dished { width: 84%; }
.tensionfill.fill-true { width: 100%; }

.tensionlabel {
  display: block;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: #B9C2C9;
  padding: 6px 0 0 0;
}

.repairorder.order-invert .tensionline { background-color: #EFF1EC; }

/* ---------- SHOP NOTICE accent strip ---------- */
.shopnotice {
  background-color: #4E7FBF;
  padding: 30px 24px;
}

.shopnotice-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  justify-content: center;
  text-align: center;
}

.shopnotice-wheel {
  width: 34px;
  height: 34px;
  border: 3px solid #EFF1EC;
  border-radius: 50%;
  position: relative;
  flex: 0 0 34px;
}

.shopnotice-wheel::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 3px;
  width: 2px;
  height: 22px;
  background-color: #EFF1EC;
}

.shopnotice-text {
  font-family: Georgia, serif;
  font-size: 18px;
  color: #EFF1EC;
  margin: 0;
  max-width: 760px;
}

.shopnotice-line {
  flex: 1 1 90px;
  height: 2px;
  background-color: #EFF1EC;
}

/* ---------- Footer : STAND BASE FOOTER ---------- */
.standbase {
  background-color: #141B21;
  border-top: 3px solid #B9C2C9;
  padding: 0;
}

.standbase-edge {
  background-color: #3E4750;
  padding: 8px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: center;
}

.jawbolt {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #141B21;
  border: 2px solid #B9C2C9;
}

.standbase-tabs {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 24px 10px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  justify-content: space-between;
}

.spoketab-small {
  flex: 1 1 180px;
}

.spoketab-small h4 {
  color: #C9A227;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.spoketab-small a {
  display: block;
  color: #EFF1EC;
  font-size: 14.5px;
  padding: 3px 0;
}

.spoketab-small a:hover { color: #4E7FBF; }

.standbase-plate {
  max-width: 1200px;
  margin: 18px auto 0 auto;
  padding: 0 24px;
}

.standbase-plate-inner {
  background-color: #22303c;
  border: 2px solid #4E7FBF;
  border-radius: 4px;
  padding: 18px 22px;
}

.standbase-plate-inner h3 {
  font-size: 20px;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}

.standbase-plate-inner p { color: #EFF1EC; margin-bottom: 0; }

.standbase-baseedge {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 24px 24px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
}

.standbase-contact {
  font-size: 13.5px;
  color: #EFF1EC;
}

.standbase-contact span { color: #B9C2C9; }

.standbase-gauge {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: #141B21;
  border: 2px solid #B9C2C9;
  position: relative;
  flex: 0 0 46px;
}

.standbase-gauge-year {
  position: absolute;
  left: 0;
  right: 0;
  top: 15px;
  text-align: center;
  font-size: 11px;
  color: #C9A227;
  letter-spacing: 0.05em;
}

/* ---------- Two-column feature lists ---------- */
.featurelists {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: 10px;
}

.featurelists-col {
  flex: 1 1 320px;
  background-color: #3E4750;
  border-left: 4px solid #4E7FBF;
  padding: 22px 24px;
}

.featurelists-col h3 { font-size: 20px; margin-bottom: 10px; }

.featurelists-col ul {
  margin: 0;
  padding-left: 18px;
}

.featurelists-col li {
  margin-bottom: 8px;
  color: #EFF1EC;
}

/* ---------- Process overview ---------- */
.processrow {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 22px;
  border-top: 1px solid #B9C2C9;
}

.processstep {
  flex: 1 1 220px;
  background-color: #3E4750;
  border-right: 1px solid #B9C2C9;
  border-bottom: 1px solid #B9C2C9;
  padding: 20px 20px;
}

.processstep:nth-child(even) { background-color: #33414c; }

.processstep-num {
  font-family: Georgia, serif;
  color: #4E7FBF;
  font-size: 20px;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}

.processstep h3 { font-size: 17px; margin-bottom: 8px; }
.processstep p { font-size: 14.5px; margin: 0; }

/* ---------- CTA band ---------- */
.ctaband {
  background-color: #4E7FBF;
  padding: 44px 24px;
}

.ctaband-inner {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.ctaband h2 { color: #EFF1EC; font-size: 30px; }
.ctaband p { color: #EFF1EC; max-width: 700px; margin: 0 auto 20px auto; }

.ctaband-pin {
  background-color: #141B21;
  color: #EFF1EC;
  border: 1px solid #C9A227;
  border-radius: 4px;
  padding: 13px 26px;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: inline-block;
}

.ctaband-pin:hover { background-color: #C9A227; color: #141B21; }

/* ---------- Contact page ---------- */
.contactgrid {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  margin-top: 10px;
}

.contactform-col { flex: 1 1 460px; }
.contactinfo-col { flex: 1 1 300px; }

.contactform-panel {
  background-color: #3E4750;
  border: 1px solid #B9C2C9;
  border-radius: 5px;
  padding: 26px;
}

.fieldrow { margin-bottom: 16px; }

.fieldrow label {
  display: block;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #B9C2C9;
  margin-bottom: 6px;
}

.fieldrow input,
.fieldrow textarea {
  width: 100%;
  font-size: 15px;
  font-family: inherit;
  padding: 10px 12px;
  background-color: #1D242B;
  color: #EFF1EC;
  border: 1px solid #B9C2C9;
  border-radius: 3px;
}

.fieldrow textarea { min-height: 130px; resize: vertical; }

.formsubmit {
  background-color: #4E7FBF;
  color: #EFF1EC;
  border: 1px solid #C9A227;
  border-radius: 4px;
  padding: 12px 26px;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.formsubmit:hover { background-color: #C9A227; color: #141B21; }

.formnote {
  font-size: 13px;
  color: #B9C2C9;
  margin-top: 12px;
}

.formstatus {
  margin-top: 14px;
  font-size: 14px;
  color: #EFF1EC;
  display: none;
}

.formstatus.is-visible { display: block; }

.infoblock {
  background-color: #3E4750;
  border-left: 4px solid #4E7FBF;
  padding: 20px 22px;
  margin-bottom: 20px;
}

.infoblock h3 { font-size: 17px; margin-bottom: 10px; }
.infoblock p { margin-bottom: 6px; color: #EFF1EC; }

.infoblock a { color: #EFF1EC; border-bottom: 1px solid #4E7FBF; }
.infoblock a:hover { color: #C9A227; }

.hoursrow {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 5px 0;
  border-bottom: 1px solid #5a6673;
}

.hoursrow span:last-child { color: #B9C2C9; }

/* ---------- FAQ accordion ---------- */
.faqwrap { margin-top: 10px; max-width: 900px; }

.faqitem {
  background-color: #3E4750;
  border-left: 4px solid #4E7FBF;
  margin-bottom: 12px;
}

.faq-q {
  width: 100%;
  text-align: left;
  background-color: #3E4750;
  color: #EFF1EC;
  border: none;
  border-bottom: 1px solid #5a6673;
  padding: 16px 20px;
  font-size: 16px;
  font-family: Georgia, serif;
  cursor: pointer;
}

.faq-q:hover { color: #C9A227; }

.faq-a {
  padding: 0 20px;
  max-height: 0;
  overflow: hidden;
}

.faqitem.is-open .faq-a {
  padding: 16px 20px;
  max-height: 600px;
}

.faq-a p { margin: 0; color: #EFF1EC; }

/* ---------- Counter strip ---------- */
.countersrow {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 20px;
}

.countercell {
  flex: 1 1 180px;
  background-color: #3E4750;
  border-top: 3px solid #4E7FBF;
  padding: 18px 20px;
}

.countercell-num {
  font-family: Georgia, serif;
  font-size: 32px;
  color: #C9A227;
  display: block;
}

.countercell-label {
  font-size: 13px;
  color: #EFF1EC;
  letter-spacing: 0.06em;
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .truebench-title { font-size: 34px; }
  .spoketabs-toggle { display: inline-block; }
  .spoketab-row { display: none; width: 100%; flex-direction: column; }
  .spoketab-row.is-open { display: flex; flex-wrap: wrap; flex-direction: row; }
  .spoketab { transform: none !important; }
  .repairorder.order-skew-a,
  .repairorder.order-skew-b { transform: none; }
  .order-col { flex: 0 0 100%; }
}

@media (max-width: 520px) {
  .truebench-title { font-size: 28px; }
  .sectiontitle { font-size: 25px; }
  .standbase-plate-inner h3 { font-size: 17px; }
  .shopnotice-text { font-size: 16px; }
}