/* Downproof LLC - Recording control room console theme
   Body: console graphite #23262B / fader cream #EFE9DC
   Accent: VU amber #D8A044
   Panels: panel steel #2E3238 / bus deep #191C20
   Tertiary: patch mint #5FA98D / seams #3A3F46 */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-size: 16px;
  background-color: #23262B;
  color: #EFE9DC;
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.65;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: "Trebuchet MS", Verdana, sans-serif;
  line-height: 1.15;
  letter-spacing: 0.01em;
}

a {
  color: #D8A044;
  text-decoration: none;
}

a:hover {
  color: #EFE9DC;
}

p {
  color: #EFE9DC;
}

/* ---------- Channel strip navigation ---------- */

.stripbank {
  background-color: #191C20;
  border-bottom: 3px solid #3A3F46;
  padding: 0 18px;
}

.stripbank-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 22px;
  padding: 14px 0;
}

.stripbank-plate {
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: #2E3238;
  border: 2px solid #3A3F46;
  border-radius: 4px;
  padding: 10px 16px;
  align-self: center;
  box-shadow: inset 0 1px 0 #3A3F46;
}

.stripbank-vudot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background-color: #D8A044;
  box-shadow: 0 0 8px #D8A044;
  flex: 0 0 auto;
}

.stripbank-brand {
  color: #EFE9DC;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-weight: bold;
  letter-spacing: 0.22em;
  font-size: 17px;
}

.stripbank-serial {
  color: #5FA98D;
  font-size: 12px;
  letter-spacing: 0.3em;
  border-left: 1px solid #3A3F46;
  padding-left: 10px;
}

.stripbank-rack {
  display: flex;
  align-items: stretch;
  gap: 6px;
}

.stripbank-strip {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  width: 74px;
  padding: 8px 4px 10px;
  background-color: #2E3238;
  border: 2px solid #3A3F46;
  border-radius: 3px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.stripbank-strip:hover {
  background-color: #383D44;
  border-color: #D8A044;
}

.stripbank-ch01 { transform: translateY(0); }
.stripbank-ch02 { transform: translateY(5px); }
.stripbank-ch03 { transform: translateY(-3px); }
.stripbank-ch04 { transform: translateY(4px); }
.stripbank-ch05 { transform: translateY(-2px); }

.stripbank-ch {
  color: #5FA98D;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 10px;
  letter-spacing: 0.12em;
}

.stripbank-knob {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #23262B;
  border: 3px solid #D8A044;
  display: block;
}

.stripbank-track {
  position: relative;
  width: 4px;
  height: 34px;
  background-color: #191C20;
  border-left: 1px solid #3A3F46;
  border-right: 1px solid #3A3F46;
  display: block;
}

.stripbank-fader {
  position: absolute;
  left: -4px;
  width: 12px;
  height: 7px;
  border-radius: 2px;
  background-color: #EFE9DC;
  display: block;
}

.stripbank-ch01 .stripbank-fader { top: 12px; }
.stripbank-ch02 .stripbank-fader { top: 20px; }
.stripbank-ch03 .stripbank-fader { top: 8px; }
.stripbank-ch04 .stripbank-fader { top: 24px; }
.stripbank-ch05 .stripbank-fader { top: 16px; }

.stripbank-label {
  color: #EFE9DC;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 15px;
  font-weight: bold;
}

/* ---------- Master bus hero ---------- */

.masterbay {
  max-width: 1180px;
  margin: 0 auto;
  padding: 58px 24px 46px;
  display: flex;
  gap: 44px;
  align-items: center;
}

.masterbay-copy {
  flex: 0 0 55%;
}

.masterbay-kicker {
  color: #5FA98D;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 16px;
}

.masterbay-title {
  color: #EFE9DC;
  font-size: 46px;
  margin: 0 0 20px;
}

.masterbay-bus {
  color: #D8A044;
}

.masterbay-lede {
  font-size: 17px;
  color: #EFE9DC;
  margin: 0 0 26px;
}

.masterbay-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.consolebtn {
  display: inline-block;
  background-color: #D8A044;
  color: #191C20;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-weight: bold;
  font-size: 15px;
  letter-spacing: 0.04em;
  padding: 13px 22px;
  border-radius: 4px;
  border: 2px solid #191C20;
  box-shadow: inset 0 -3px 0 #A87A2A;
}

.consolebtn:hover {
  background-color: #EFE9DC;
  color: #191C20;
}

.masterbay-notes {
  margin: 0;
  padding: 0;
  list-style: none;
}

.masterbay-notes li {
  color: #EFE9DC;
  padding: 6px 0 6px 22px;
  position: relative;
  border-bottom: 1px solid #3A3F46;
}

.masterbay-notes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #5FA98D;
}

.masterbay-section {
  flex: 0 0 45%;
}

.masterplate {
  background-color: #2E3238;
  border: 3px solid #3A3F46;
  border-radius: 6px;
  padding: 18px;
  box-shadow: inset 0 2px 0 #3A3F46, 0 8px 20px #191C20;
}

.masterplate-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #3A3F46;
  padding-bottom: 10px;
  margin-bottom: 16px;
}

.masterplate-title {
  color: #D8A044;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-weight: bold;
  letter-spacing: 0.2em;
  font-size: 13px;
}

.masterplate-chip {
  color: #EFE9DC;
  background-color: #191C20;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  padding: 4px 9px;
  border-radius: 3px;
  border: 1px solid #3A3F46;
}

.masterplate-faders {
  display: flex;
  gap: 34px;
  justify-content: center;
  padding: 8px 0 18px;
}

.faderlane {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.faderlane-label {
  color: #EFE9DC;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 12px;
  letter-spacing: 0.1em;
}

.faderlane-track {
  position: relative;
  width: 8px;
  height: 130px;
  background-color: #191C20;
  border-left: 2px solid #3A3F46;
  border-right: 2px solid #3A3F46;
  border-radius: 4px;
  display: block;
}

.faderlane-cap {
  position: absolute;
  left: -11px;
  width: 30px;
  height: 16px;
  border-radius: 3px;
  background-color: #EFE9DC;
  border: 2px solid #191C20;
  box-shadow: inset 0 -3px 0 #C9C2B2;
  display: block;
}

.faderlane-one .faderlane-cap { top: 34px; }
.faderlane-two .faderlane-cap { top: 62px; }

.masterplate-meters {
  display: flex;
  gap: 20px;
  justify-content: center;
  padding: 4px 0 16px;
}

.vumeter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.vumeter-dial {
  position: relative;
  width: 110px;
  height: 62px;
  background-color: #EFE9DC;
  border: 3px solid #191C20;
  border-radius: 6px 6px 40px 40px;
  display: block;
  overflow: hidden;
}

.vumeter-needle {
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 3px;
  height: 50px;
  background-color: #D8A044;
  transform-origin: bottom center;
  display: block;
}

.vumeter-needle-left { transform: rotate(-26deg); }
.vumeter-needle-right { transform: rotate(-46deg); }

.vumeter-tag {
  color: #EFE9DC;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 11px;
  letter-spacing: 0.16em;
}

.masterplate-transport {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
  padding: 12px 0;
  border-top: 1px solid #3A3F46;
}

.transportbtn {
  width: 30px;
  height: 30px;
  border-radius: 4px;
  display: inline-block;
  border: 2px solid #191C20;
}

.transportbtn-play { background-color: #5FA98D; }
.transportbtn-stop { background-color: #EFE9DC; }
.transportbtn-rec { background-color: #D8A044; }

.masterplate-counter {
  background-color: #191C20;
  color: #D8A044;
  font-family: "Courier New", monospace;
  font-size: 20px;
  letter-spacing: 0.24em;
  padding: 5px 12px;
  border: 2px solid #3A3F46;
  border-radius: 3px;
}

.masterplate-foot {
  border-top: 1px solid #3A3F46;
  padding-top: 12px;
  text-align: right;
}

.talkback {
  color: #EFE9DC;
  background-color: #23262B;
  border: 2px solid #5FA98D;
  border-radius: 3px;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  padding: 6px 14px;
  display: inline-block;
}

/* ---------- Patchbay service rows ---------- */

.patchrows {
  background-color: #191C20;
  padding: 54px 24px 60px;
  border-top: 3px solid #3A3F46;
  border-bottom: 3px solid #3A3F46;
}

.patchrows-intro {
  max-width: 1120px;
  margin: 0 auto 34px;
}

.patchrows-heading {
  color: #EFE9DC;
  font-size: 33px;
  margin: 0 0 12px;
}

.patchrows-sub {
  color: #EFE9DC;
  font-size: 16px;
  max-width: 760px;
  margin: 0;
}

.patchbay {
  max-width: 1120px;
  margin: 0 auto 16px;
  display: flex;
  background-color: #2E3238;
  border: 2px solid #3A3F46;
  border-radius: 5px;
  overflow: visible;
}

.patchbay-deep {
  background-color: #191C20;
}

.patchbay-a { transform: skewY(-1deg); }
.patchbay-b { transform: skewY(1deg); }
.patchbay-c { transform: skewY(-1deg); }
.patchbay-d { transform: skewY(1deg); }
.patchbay-e { transform: skewY(-1deg); }
.patchbay-f { transform: skewY(1deg); }

.patchbay-col {
  flex: 0 0 168px;
  background-color: #191C20;
  border-right: 2px solid #3A3F46;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.patchbay-bay {
  color: #EFE9DC;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-weight: bold;
  letter-spacing: 0.16em;
  font-size: 16px;
}

.patchbay-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #5FA98D;
}

.patchbay-jacks {
  display: flex;
  gap: 8px;
}

.patchbay-jacks i {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #23262B;
  border: 3px solid #3A3F46;
  display: block;
}

.patchbay-chip {
  margin-top: auto;
  color: #D8A044;
  background-color: #23262B;
  border: 1px solid #3A3F46;
  border-radius: 3px;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  padding: 4px 8px;
  align-self: flex-start;
}

.patchbay-panel {
  flex: 1 1 auto;
  padding: 18px 22px;
}

.patchbay-meter {
  position: relative;
  height: 12px;
  background-color: #191C20;
  border: 1px solid #3A3F46;
  border-radius: 3px;
  margin: 0 0 14px;
  overflow: visible;
}

.patchbay-fill {
  display: block;
  height: 100%;
  background-color: #D8A044;
  border-radius: 3px;
}

.patchbay-fill-low { width: 14%; }
.patchbay-fill-mod { width: 30%; }
.patchbay-fill-healthy { width: 50%; }
.patchbay-fill-hot { width: 70%; }
.patchbay-fill-near { width: 86%; }
.patchbay-fill-peak { width: 100%; }

.patchbay-db {
  position: absolute;
  right: 8px;
  top: -22px;
  color: #EFE9DC;
  font-family: "Courier New", monospace;
  font-size: 12px;
}

.patchbay-name {
  margin: 0 0 10px;
  font-size: 23px;
}

.patchbay-name a {
  color: #EFE9DC;
  border-bottom: 2px solid #D8A044;
}

.patchbay-name a:hover {
  color: #D8A044;
}

.patchbay-text {
  margin: 0;
  color: #EFE9DC;
  font-size: 16px;
}

.patchpair {
  position: relative;
  margin-top: 16px;
  height: 20px;
}

.patchpair-top,
.patchpair-bot {
  position: absolute;
  top: -2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: #23262B;
  border: 3px solid #3A3F46;
  display: block;
}

.patchpair-top { left: 0; }
.patchpair-bot { left: 96px; }

.patchpair-line {
  position: absolute;
  left: 20px;
  top: -6px;
  width: 78px;
  height: 28px;
  border-top: 3px solid #5FA98D;
  border-radius: 50% 50% 0 0;
  display: block;
}

/* ---------- Session booking accent strip ---------- */

.stripbooking {
  background-color: #D8A044;
  color: #191C20;
  padding: 22px 30px;
  display: flex;
  align-items: center;
  gap: 18px;
  border-top: 3px solid #191C20;
  border-bottom: 3px solid #191C20;
}

.stripbooking-solo {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: #191C20;
  border: 4px solid #EFE9DC;
  flex: 0 0 auto;
}

.stripbooking-text {
  margin: 0;
  color: #191C20;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 18px;
  font-weight: bold;
  max-width: 1180px;
}

/* ---------- Process deck ---------- */

.processdeck {
  max-width: 1180px;
  margin: 0 auto;
  padding: 56px 24px 30px;
}

.processdeck-heading {
  color: #EFE9DC;
  font-size: 31px;
  margin: 0 0 26px;
}

.processdeck-track {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.processcard {
  flex: 1 1 220px;
  background-color: #2E3238;
  border: 2px solid #3A3F46;
  border-top: 4px solid #D8A044;
  border-radius: 5px;
  padding: 20px 18px;
}

.processcard-step {
  color: #5FA98D;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 12px;
  letter-spacing: 0.18em;
}

.processcard-title {
  color: #EFE9DC;
  font-size: 21px;
  margin: 8px 0 10px;
}

.processcard-text {
  margin: 0;
  color: #EFE9DC;
  font-size: 15px;
}

/* ---------- Why deck ---------- */

.whydeck {
  max-width: 1180px;
  margin: 0 auto;
  padding: 30px 24px 56px;
  display: flex;
  gap: 46px;
  align-items: center;
}

.whydeck-copy {
  flex: 1 1 62%;
}

.whydeck-heading {
  color: #EFE9DC;
  font-size: 30px;
  margin: 0 0 18px;
}

.whydeck-text {
  color: #EFE9DC;
  font-size: 16px;
  margin: 0 0 16px;
}

.whydeck-rack {
  flex: 1 1 38%;
  background-color: #2E3238;
  border: 3px solid #3A3F46;
  border-radius: 6px;
  padding: 20px;
}

.monitorpair {
  display: flex;
  gap: 18px;
  justify-content: center;
}

.monitorspeaker {
  width: 84px;
  height: 150px;
  background-color: #191C20;
  border: 2px solid #3A3F46;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.monitorcone {
  border-radius: 50%;
  background-color: #23262B;
  border: 3px solid #D8A044;
  display: block;
}

.monitorcone-top { width: 26px; height: 26px; }
.monitorcone-low { width: 46px; height: 46px; }

.loom {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 22px 0;
}

.loomline {
  height: 3px;
  background-color: #3A3F46;
  border-radius: 2px;
  display: block;
}

.loomline:nth-child(2) { width: 72%; }
.loomline:nth-child(3) { width: 88%; }

.solorow {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.solobtn {
  color: #EFE9DC;
  background-color: #191C20;
  border: 2px solid #5FA98D;
  border-radius: 3px;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  padding: 7px 16px;
  display: inline-block;
}

/* ---------- FAQ deck ---------- */

.faqdeck {
  background-color: #191C20;
  border-top: 3px solid #3A3F46;
  padding: 54px 24px 60px;
}

.faqdeck-heading {
  color: #EFE9DC;
  font-size: 30px;
  max-width: 1120px;
  margin: 0 auto 24px;
}

.faqdeck-list {
  max-width: 1120px;
  margin: 0 auto;
}

.faqitem {
  background-color: #2E3238;
  border: 2px solid #3A3F46;
  border-left: 5px solid #D8A044;
  border-radius: 4px;
  margin-bottom: 12px;
  padding: 16px 20px;
}

.faqitem-q {
  color: #EFE9DC;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-weight: bold;
  font-size: 17px;
  cursor: pointer;
}

.faqitem-a {
  margin: 12px 0 0;
  color: #EFE9DC;
  font-size: 15px;
}

/* ---------- Transport and monitor footer ---------- */

.transportbase {
  background-color: #191C20;
  border-top: 3px solid #3A3F46;
}

.transportbase-rail {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px 24px;
  border-bottom: 1px solid #3A3F46;
}

.transportbase-railnote {
  color: #5FA98D;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 12px;
  letter-spacing: 0.22em;
  margin-left: auto;
}

.transportbase-body {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 24px;
  display: flex;
  gap: 40px;
}

.transportbase-strips {
  flex: 1 1 auto;
  display: flex;
  gap: 34px;
  flex-wrap: wrap;
}

.transportstrip {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 190px;
}

.transportstrip-head {
  color: #D8A044;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-bottom: 1px solid #3A3F46;
  padding-bottom: 6px;
}

.transportstrip a {
  color: #EFE9DC;
  font-size: 15px;
}

.transportstrip a:hover {
  color: #D8A044;
}

.transportstrip-plain {
  color: #EFE9DC;
  font-size: 15px;
}

.transportbase-plate {
  flex: 0 0 320px;
  background-color: #2E3238;
  border: 2px solid #3A3F46;
  border-radius: 5px;
  padding: 18px;
}

.transportbase-brand {
  color: #EFE9DC;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-weight: bold;
  letter-spacing: 0.22em;
  font-size: 18px;
  display: block;
  margin-bottom: 10px;
}

.transportbase-blurb {
  color: #EFE9DC;
  font-size: 14px;
  margin: 0;
}

.transportbase-edge {
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px 24px 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #3A3F46;
}

.transportbase-copy {
  color: #EFE9DC;
  font-size: 13px;
}

.transportbase-counter {
  color: #D8A044;
  font-family: "Courier New", monospace;
  font-size: 15px;
  letter-spacing: 0.18em;
  background-color: #23262B;
  border: 1px solid #3A3F46;
  border-radius: 3px;
  padding: 4px 12px;
}

/* ---------- Scroll reveal ---------- */

.reveal {
  opacity: 1;
  transform: none;
}

.js-reveal-ready .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.js-reveal-ready .reveal.is-revealed {
  opacity: 1;
  transform: none;
}

/* ---------- Secondary page intro ---------- */

.pageintro {
  background-color: #191C20;
  border-bottom: 3px solid #3A3F46;
  padding: 48px 24px 40px;
}

.pageintro-inner {
  max-width: 1120px;
  margin: 0 auto;
}

.pageintro-kicker {
  color: #5FA98D;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 12px;
}

.pageintro-title {
  color: #EFE9DC;
  font-size: 42px;
  margin: 0 0 14px;
}

.pageintro-lede {
  color: #EFE9DC;
  font-size: 17px;
  max-width: 780px;
  margin: 0;
}

/* ---------- Service detail sections ---------- */

.servicedeck {
  max-width: 1120px;
  margin: 0 auto;
  padding: 50px 24px 34px;
}

.servicedeck-heading {
  color: #EFE9DC;
  font-size: 31px;
  margin: 0 0 12px;
}

.servicedeck-sub {
  color: #EFE9DC;
  font-size: 16px;
  max-width: 760px;
  margin: 0 0 30px;
}

.serviceblock {
  background-color: #2E3238;
  border: 2px solid #3A3F46;
  border-left: 6px solid #D8A044;
  border-radius: 5px;
  padding: 22px 24px;
  margin-bottom: 16px;
}

.serviceblock-deep {
  background-color: #191C20;
}

.serviceblock-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.serviceblock-code {
  color: #5FA98D;
  font-family: "Courier New", monospace;
  font-size: 13px;
  letter-spacing: 0.1em;
}

.serviceblock-name {
  color: #EFE9DC;
  font-size: 24px;
  margin: 0;
}

.serviceblock-text {
  color: #EFE9DC;
  font-size: 16px;
  margin: 0 0 12px;
}

.serviceblock-text:last-child {
  margin-bottom: 0;
}

.serviceblock-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.serviceblock-list li {
  color: #EFE9DC;
  font-size: 15px;
  padding: 5px 0 5px 20px;
  position: relative;
}

.serviceblock-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: #D8A044;
}

.processoverview {
  background-color: #191C20;
  border-top: 3px solid #3A3F46;
  border-bottom: 3px solid #3A3F46;
  padding: 48px 24px 52px;
}

.processoverview-inner {
  max-width: 1120px;
  margin: 0 auto;
}

.processoverview-heading {
  color: #EFE9DC;
  font-size: 30px;
  margin: 0 0 24px;
}

.processlane {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.processstep {
  flex: 1 1 200px;
  background-color: #2E3238;
  border: 2px solid #3A3F46;
  border-radius: 5px;
  padding: 18px;
}

.processstep-num {
  color: #D8A044;
  font-family: "Courier New", monospace;
  font-size: 22px;
  display: block;
  margin-bottom: 8px;
}

.processstep-name {
  color: #EFE9DC;
  font-size: 19px;
  margin: 0 0 8px;
}

.processstep-text {
  color: #EFE9DC;
  font-size: 15px;
  margin: 0;
}

/* ---------- CTA band ---------- */

.ctaband {
  background-color: #D8A044;
  color: #191C20;
  padding: 36px 24px;
}

.ctaband-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.ctaband-copy {
  flex: 1 1 420px;
}

.ctaband-title {
  color: #191C20;
  font-size: 27px;
  margin: 0 0 8px;
}

.ctaband-text {
  color: #191C20;
  font-size: 16px;
  margin: 0;
}

.ctaband-btn {
  display: inline-block;
  background-color: #191C20;
  color: #EFE9DC;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-weight: bold;
  font-size: 15px;
  padding: 14px 24px;
  border-radius: 4px;
  border: 2px solid #191C20;
}

.ctaband-btn:hover {
  background-color: #2E3238;
  color: #EFE9DC;
}

/* ---------- Contact page ---------- */

.contactdeck {
  max-width: 1120px;
  margin: 0 auto;
  padding: 50px 24px 40px;
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.contactform {
  flex: 1 1 58%;
  background-color: #2E3238;
  border: 2px solid #3A3F46;
  border-radius: 5px;
  padding: 24px;
}

.contactform-heading {
  color: #EFE9DC;
  font-size: 24px;
  margin: 0 0 18px;
}

.fieldrow {
  margin-bottom: 16px;
}

.fieldlabel {
  display: block;
  color: #EFE9DC;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}

.fieldinput,
.fieldarea {
  width: 100%;
  background-color: #191C20;
  color: #EFE9DC;
  border: 2px solid #3A3F46;
  border-radius: 4px;
  padding: 11px 13px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
}

.fieldarea {
  min-height: 132px;
  resize: vertical;
}

.fieldinput:focus,
.fieldarea:focus {
  outline: none;
  border-color: #D8A044;
}

.fieldsubmit {
  background-color: #D8A044;
  color: #191C20;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-weight: bold;
  font-size: 15px;
  padding: 13px 26px;
  border: 2px solid #191C20;
  border-radius: 4px;
  cursor: pointer;
}

.fieldsubmit:hover {
  background-color: #EFE9DC;
}

.formstatus {
  margin: 14px 0 0;
  font-size: 14px;
  color: #5FA98D;
}

.contactaside {
  flex: 1 1 42%;
}

.contactcard {
  background-color: #2E3238;
  border: 2px solid #3A3F46;
  border-left: 5px solid #5FA98D;
  border-radius: 5px;
  padding: 20px 22px;
  margin-bottom: 16px;
}

.contactcard-heading {
  color: #EFE9DC;
  font-size: 19px;
  margin: 0 0 12px;
}

.contactline {
  color: #EFE9DC;
  font-size: 15px;
  margin: 0 0 8px;
}

.contactline a {
  color: #D8A044;
}

.hourlist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hourlist li {
  color: #EFE9DC;
  font-size: 15px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #3A3F46;
  padding: 6px 0;
}

.contactfaq {
  background-color: #191C20;
  border-top: 3px solid #3A3F46;
  padding: 48px 24px 56px;
}

.contactfaq-inner {
  max-width: 1120px;
  margin: 0 auto;
}

.contactfaq-heading {
  color: #EFE9DC;
  font-size: 29px;
  margin: 0 0 22px;
}

/* ---------- Responsive ---------- */

@media (max-width: 940px) {
  .masterbay {
    flex-direction: column;
    gap: 30px;
  }
  .masterbay-copy,
  .masterbay-section {
    flex: 1 1 auto;
    width: 100%;
  }
  .whydeck,
  .contactdeck {
    flex-direction: column;
  }
  .whydeck-copy,
  .whydeck-rack,
  .contactform,
  .contactaside {
    flex: 1 1 auto;
    width: 100%;
  }
  .transportbase-body {
    flex-direction: column;
  }
  .transportbase-plate {
    flex: 1 1 auto;
  }
}

@media (max-width: 720px) {
  .stripbank-inner {
    flex-direction: column;
    align-items: stretch;
  }
  .stripbank-rack {
    flex-wrap: wrap;
    justify-content: center;
  }
  .stripbank-strip {
    width: 30%;
  }
  .masterbay-title {
    font-size: 34px;
  }
  .pageintro-title {
    font-size: 32px;
  }
  .patchbay {
    flex-direction: column;
    transform: none;
  }
  .patchbay-col {
    flex: 1 1 auto;
    border-right: none;
    border-bottom: 2px solid #3A3F46;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }
  .patchbay-chip {
    margin-top: 0;
  }
}