/* CIRCULATE RESOURCES LIMITED — rock-salt washing drum yard theme */

:root {
  --brine-slate: #242B2A;
  --salt-cream: #F1EFE2;
  --drum-copper: #9C6A44;
  --flume-deep: #171D1C;
  --drum-plate: #2E3634;
  --rail-pewter: #4A5451;
  --brine-foam: #7FA89A;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-family: Georgia, "Times New Roman", serif;
  background-color: #242B2A;
  color: #F1EFE2;
  line-height: 1.7;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Trebuchet MS", "Segoe UI", Helvetica, Arial, sans-serif;
  color: #F1EFE2;
  line-height: 1.25;
  letter-spacing: 0.01em;
}

p {
  margin: 0 0 1em 0;
}

a {
  color: #9C6A44;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------------- navigation: lean rail signs ---------------- */

.leanrail {
  background-color: #171D1C;
  border-bottom: 6px solid #2E3634;
  padding: 30px 0 22px 0;
  position: sticky;
  top: 0;
  z-index: 60;
}

.leanrail-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
}

.leanrail-rail {
  position: absolute;
  left: 24px;
  right: 24px;
  top: 96px;
  height: 8px;
  background-color: #4A5451;
  border-radius: 4px;
  transform: rotate(2deg);
  transform-origin: left center;
}

.leanrail-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background-color: #2E3634;
  border: 2px solid #4A5451;
  border-radius: 6px;
  padding: 12px 22px;
  transform: rotate(-1deg);
  margin-bottom: 54px;
  position: relative;
  z-index: 2;
  box-shadow: 0 4px 0 #171D1C;
}

.leanrail-glyph {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 4px solid #9C6A44;
  background-color: #2E3634;
  display: inline-block;
  position: relative;
}

.leanrail-glyph::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 2px;
  width: 2px;
  height: 12px;
  background-color: #9C6A44;
}

.leanrail-brand-name {
  font-family: "Trebuchet MS", "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 17px;
  font-weight: bold;
  color: #F1EFE2;
  letter-spacing: 0.06em;
}

.leanrail-signs {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  position: relative;
  z-index: 3;
  padding-left: 20px;
}

.leanrail-sign {
  display: block;
  background-color: #2E3634;
  border: 2px solid #4A5451;
  color: #F1EFE2;
  text-decoration: none;
  padding: 12px 18px 10px 18px;
  min-width: 104px;
  text-align: center;
  position: relative;
  box-shadow: 0 4px 0 #171D1C;
}

.leanrail-sign:hover {
  text-decoration: none;
  border-color: #9C6A44;
}

.leanrail-sign.tilt-a {
  transform: rotate(1deg);
}

.leanrail-sign.tilt-b {
  transform: rotate(-1deg);
}

.leanrail-sign .yardnum {
  display: block;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: #9C6A44;
  margin-bottom: 2px;
}

.leanrail-sign .yardlabel {
  display: block;
  font-size: 15px;
  font-family: "Trebuchet MS", "Segoe UI", Helvetica, Arial, sans-serif;
}

.leanrail-sign.hang::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -10px;
  width: 12px;
  height: 10px;
  margin-left: -6px;
  border: 2px solid #4A5451;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
}

.leanrail-toggle {
  display: none;
  background-color: #2E3634;
  color: #F1EFE2;
  border: 2px solid #9C6A44;
  font-family: "Trebuchet MS", "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 15px;
  padding: 10px 16px;
  cursor: pointer;
  margin-top: 4px;
}

/* ---------------- hero: drum line scene ---------------- */

.sortdrum {
  background-color: #242B2A;
}

.sortdrum-stage {
  background-color: #2E3634;
  border-bottom: 6px solid #4A5451;
  padding: 54px 0 64px 0;
  position: relative;
  overflow: hidden;
}

.sortdrum-rail {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 210px;
  height: 10px;
  background-color: #4A5451;
  border-radius: 5px;
  transform: rotate(2deg);
  transform-origin: left center;
  box-shadow: 0 3px 0 #171D1C;
}

.sortdrum-rig {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 3;
  min-height: 300px;
}

.drum {
  position: relative;
  border-radius: 50%;
  background-color: #242B2A;
  border: 6px solid #4A5451;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

.drum::before {
  content: "";
  position: absolute;
  left: -6px;
  right: -6px;
  top: 26%;
  height: 12px;
  background-color: #9C6A44;
}

.drum::after {
  content: "";
  position: absolute;
  left: -6px;
  right: -6px;
  top: 62%;
  height: 12px;
  background-color: #9C6A44;
}

.drum-spoke {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 38%;
  background-color: #4A5451;
  transform-origin: center top;
  transform: translate(-50%, -100%) rotate(34deg);
}

.drum-word {
  position: relative;
  z-index: 4;
  font-family: "Trebuchet MS", "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 19px;
  font-weight: bold;
  letter-spacing: 0.14em;
  color: #F1EFE2;
  text-shadow: 0 2px 0 #171D1C;
}

.drum-word.copper {
  color: #9C6A44;
}

.drum-large {
  width: 240px;
  height: 240px;
}

.drum-medium {
  width: 182px;
  height: 182px;
}

.drum-small {
  width: 132px;
  height: 132px;
}

.drum-medium .drum-word {
  font-size: 16px;
}

.drum-small .drum-word {
  font-size: 13px;
}

.sortdrum-flume {
  max-width: 1180px;
  margin: 30px auto 0 auto;
  padding: 0 24px;
  position: relative;
}

.flowchan {
  height: 54px;
  background-color: #4A5451;
  border-top: 6px solid #2E3634;
  border-bottom: 6px solid #171D1C;
  border-radius: 0 0 26px 26px;
  position: relative;
  overflow: hidden;
}

.flowchan-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 14px;
  height: 8px;
  background-color: #7FA89A;
  border-radius: 6px;
}

.splashdot {
  position: absolute;
  background-color: #7FA89A;
  border-radius: 50%;
}

.splash-1 { width: 12px; height: 12px; left: 12%; top: 4px; }
.splash-2 { width: 8px; height: 8px; left: 26%; top: 26px; }
.splash-3 { width: 14px; height: 14px; left: 44%; top: 8px; }
.splash-4 { width: 9px; height: 9px; left: 63%; top: 30px; }
.splash-5 { width: 11px; height: 11px; left: 79%; top: 6px; }

.draingrate {
  position: absolute;
  right: 6%;
  top: 6px;
  width: 46px;
  height: 42px;
  background-color: #171D1C;
  border: 3px solid #2E3634;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.draingrate span {
  display: block;
  width: 4px;
  height: 24px;
  background-color: #4A5451;
}

.sortdrum-plinth {
  background-color: #171D1C;
  padding: 48px 0 56px 0;
  border-top: 6px solid #4A5451;
}

.sortdrum-tablets {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  gap: 26px;
  align-items: center;
}

.stonetablet {
  background-color: #2E3634;
  border: 3px solid #4A5451;
  border-radius: 8px;
  padding: 26px 20px;
  text-align: center;
  box-shadow: 0 6px 0 #242B2A;
}

.stonetablet-title {
  font-family: "Trebuchet MS", "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 18px;
  color: #F1EFE2;
  display: block;
  margin-bottom: 10px;
}

.stonetablet-cta {
  display: inline-block;
  color: #9C6A44;
  font-family: "Trebuchet MS", "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 16px;
  border-bottom: 2px solid #9C6A44;
  padding-bottom: 2px;
}

.stonetablet-cta:hover {
  text-decoration: none;
}

.tablet-arrow {
  display: inline-block;
  color: #9C6A44;
  margin-left: 6px;
  font-weight: bold;
}

.tablet-glyph {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 3px solid #9C6A44;
  vertical-align: middle;
  margin-right: 6px;
}

.herointro {
  text-align: center;
}

.herointro p {
  font-size: 17px;
  color: #F1EFE2;
  margin: 0;
}

/* ---------------- section shells ---------------- */

.field {
  padding: 64px 0;
}

.field-dark {
  background-color: #242B2A;
}

.field-plate {
  background-color: #2E3634;
}

.field-deep {
  background-color: #171D1C;
}

.fieldhead {
  max-width: 1180px;
  margin: 0 auto 36px auto;
  padding: 0 24px;
}

.fieldhead h2 {
  font-size: 30px;
  margin: 0 0 8px 0;
}

.fieldhead .kicker {
  font-family: "Trebuchet MS", "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.24em;
  color: #9C6A44;
  text-transform: uppercase;
  display: block;
  margin-bottom: 10px;
}

.fieldhead p {
  max-width: 780px;
  color: #F1EFE2;
}

.prose {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 24px;
}

.prose h3 {
  font-size: 21px;
  margin: 30px 0 10px 0;
}

/* ---------------- drain chute bays ---------------- */

.chutebayfield {
  background-color: #242B2A;
  padding: 68px 0;
  position: relative;
}

.chutewrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
}

.chutechannel {
  position: absolute;
  left: 12px;
  top: 70px;
  width: 96px;
  bottom: 40px;
  background-color: #4A5451;
  border-left: 6px solid #2E3634;
  border-right: 6px solid #2E3634;
  transform: skewY(6deg);
  transform-origin: top left;
  border-radius: 4px;
}

.chutebaylist {
  display: flex;
  flex-direction: column;
  gap: 30px;
  position: relative;
  z-index: 2;
}

.chutebayitem {
  background-color: #2E3634;
  border: 3px solid #4A5451;
  border-radius: 8px;
  padding: 26px 28px;
  margin-left: 130px;
  position: relative;
  box-shadow: 0 6px 0 #171D1C;
}

.chutebayitem.invert {
  background-color: #9C6A44;
  border-color: #9C6A44;
}

.chutebayitem.invert h3,
.chutebayitem.invert p {
  color: #F1EFE2;
}

.chutebayitem.invert .baytag {
  color: #171D1C;
  border-color: #171D1C;
}

.baytag {
  position: absolute;
  left: -108px;
  top: 26px;
  width: 58px;
  height: 44px;
  background-color: #171D1C;
  border: 2px solid #9C6A44;
  border-radius: 4px;
  color: #F1EFE2;
  font-family: "Trebuchet MS", "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 14px;
  text-align: center;
  line-height: 40px;
  transform: rotate(-2deg);
}

.chutebayitem h3 {
  margin: 0 0 8px 0;
  font-size: 22px;
}

.chutebayitem p {
  margin: 0;
  color: #F1EFE2;
}

.baydevice {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  height: 30px;
}

.dev-drum {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid #9C6A44;
  position: relative;
}

.dev-drum::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 1px;
  width: 2px;
  height: 12px;
  background-color: #9C6A44;
  transform-origin: bottom center;
  transform: rotate(28deg);
}

.dev-dotrow {
  display: flex;
  gap: 7px;
}

.dev-dotrow i {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #7FA89A;
}

.dev-fork {
  width: 30px;
  height: 24px;
  position: relative;
  border-bottom: 4px solid #9C6A44;
}

.dev-fork::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 3px;
  width: 4px;
  height: 20px;
  background-color: #9C6A44;
}

.dev-fork::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 3px;
  width: 4px;
  height: 20px;
  background-color: #9C6A44;
}

.dev-chip {
  width: 30px;
  height: 20px;
  border: 3px solid #9C6A44;
  border-radius: 3px;
  position: relative;
}

.dev-chip::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #171D1C;
}

.dev-seal {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid #9C6A44;
  position: relative;
}

.dev-seal::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 9px;
  width: 6px;
  height: 6px;
  background-color: #9C6A44;
}

.dev-loop {
  width: 32px;
  height: 24px;
  border: 4px solid #9C6A44;
  border-radius: 50%;
  border-right-color: #7FA89A;
  transform: rotate(-20deg);
}

.baymound {
  position: absolute;
  right: 26px;
  top: 26px;
  display: flex;
  gap: 5px;
  align-items: flex-end;
}

.baymound i {
  display: block;
  border-radius: 50%;
  background-color: #7FA89A;
}

.baymound i:nth-child(1) { width: 8px; height: 8px; }
.baymound i:nth-child(2) { width: 10px; height: 10px; }
.baymound i:nth-child(3) { width: 12px; height: 12px; }
.baymound i:nth-child(4) { width: 9px; height: 9px; }
.baymound i:nth-child(5) { width: 7px; height: 7px; }
.baymound i:nth-child(6) { width: 11px; height: 11px; }

/* ---------------- brine level gauge strip ---------------- */

.gaugestrip {
  background-color: #171D1C;
  border-top: 6px solid #4A5451;
  border-bottom: 6px solid #4A5451;
  padding: 24px 0;
}

.gaugestrip-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.gaugeblocks {
  display: flex;
  flex-direction: column-reverse;
  gap: 5px;
  padding: 8px;
  background-color: #2E3634;
  border: 2px solid #4A5451;
  border-radius: 4px;
}

.gaugeblock {
  width: 34px;
  height: 11px;
  border: 2px solid #9C6A44;
  background-color: #2E3634;
}

.gaugeblock.on {
  background-color: #9C6A44;
}

.gaugestrip-text {
  font-family: "Trebuchet MS", "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 16px;
  color: #F1EFE2;
  margin: 0;
}

/* ---------------- generic content grid ---------------- */

.plate-grid {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.info-plate {
  background-color: #2E3634;
  border: 3px solid #4A5451;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 5px 0 #171D1C;
}

.info-plate h3 {
  margin: 0 0 10px 0;
  font-size: 19px;
  color: #F1EFE2;
}

.info-plate p {
  margin: 0;
  color: #F1EFE2;
}

/* ---------------- process line ---------------- */

.processline {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 20px;
}

.processstep {
  background-color: #171D1C;
  border-top: 6px solid #9C6A44;
  border-radius: 6px;
  padding: 22px 20px;
}

.processstep .stepnum {
  font-family: "Trebuchet MS", "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: #9C6A44;
  display: block;
  margin-bottom: 8px;
}

.processstep h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
}

.processstep p {
  margin: 0;
  color: #F1EFE2;
  font-size: 15px;
}

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

.ctaband {
  background-color: #9C6A44;
  padding: 48px 0;
}

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

.ctaband h2 {
  color: #F1EFE2;
  margin: 0;
  font-size: 25px;
  max-width: 640px;
}

.ctaband p {
  color: #F1EFE2;
  margin: 6px 0 0 0;
  max-width: 640px;
}

.ctabtn {
  display: inline-block;
  background-color: #171D1C;
  color: #F1EFE2;
  border: 3px solid #F1EFE2;
  border-radius: 6px;
  padding: 14px 28px;
  font-family: "Trebuchet MS", "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 16px;
  text-decoration: none;
}

.ctabtn:hover {
  text-decoration: none;
  background-color: #242B2A;
}

/* ---------------- text blocks ---------------- */

.textcol {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 24px;
}

.textcol h3 {
  font-size: 21px;
  margin: 32px 0 10px 0;
}

.textcol p {
  color: #F1EFE2;
}

.inline-link {
  color: #9C6A44;
  border-bottom: 1px solid #9C6A44;
}

.datatable {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

.datatable th,
.datatable td {
  border: 2px solid #4A5451;
  padding: 10px 14px;
  text-align: left;
  color: #F1EFE2;
  font-size: 15px;
}

.datatable th {
  background-color: #171D1C;
  font-family: "Trebuchet MS", "Segoe UI", Helvetica, Arial, sans-serif;
}

/* ---------------- contact form ---------------- */

.formplate {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
}

.formfield {
  margin-bottom: 18px;
}

.formfield label {
  display: block;
  font-family: "Trebuchet MS", "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: #9C6A44;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.formfield input,
.formfield textarea {
  width: 100%;
  background-color: #171D1C;
  color: #F1EFE2;
  border: 3px solid #4A5451;
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 16px;
  font-family: Georgia, "Times New Roman", serif;
}

.formfield input:focus,
.formfield textarea:focus {
  outline: none;
  border-color: #9C6A44;
}

.formfield .fieldbounds {
  min-height: 150px;
  resize: vertical;
}

.formsubmit {
  background-color: #9C6A44;
  color: #F1EFE2;
  border: 3px solid #171D1C;
  border-radius: 6px;
  padding: 14px 30px;
  font-family: "Trebuchet MS", "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 16px;
  cursor: pointer;
}

.formsubmit:hover {
  background-color: #2E3634;
}

.formnote {
  font-size: 14px;
  color: #F1EFE2;
  margin-top: 12px;
}

.contactlines {
  max-width: 720px;
  margin: 0 auto 30px auto;
  padding: 0 24px;
}

.contactline {
  background-color: #2E3634;
  border: 3px solid #4A5451;
  border-radius: 8px;
  padding: 18px 22px;
  margin-bottom: 14px;
}

.contactline strong {
  display: block;
  font-family: "Trebuchet MS", "Segoe UI", Helvetica, Arial, sans-serif;
  color: #9C6A44;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.contactline span {
  color: #F1EFE2;
  font-size: 16px;
}

/* ---------------- FAQ accordion ---------------- */

.faqblock {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 24px;
}

.faqitem {
  border: 3px solid #4A5451;
  border-radius: 8px;
  margin-bottom: 14px;
  background-color: #2E3634;
  overflow: hidden;
}

.faqq {
  width: 100%;
  text-align: left;
  background-color: #171D1C;
  color: #F1EFE2;
  border: none;
  padding: 16px 20px;
  font-family: "Trebuchet MS", "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 16px;
  cursor: pointer;
}

.faqa {
  padding: 0 20px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 320ms ease;
}

.faqitem.open .faqa {
  max-height: 400px;
  padding: 16px 20px;
}

.faqa p {
  margin: 0;
  color: #F1EFE2;
}

/* ---------------- counters ---------------- */

.countrow {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.countcell {
  background-color: #171D1C;
  border: 3px solid #4A5451;
  border-radius: 8px;
  padding: 22px;
  text-align: center;
}

.countnum {
  display: block;
  font-family: "Trebuchet MS", "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 40px;
  color: #9C6A44;
  line-height: 1;
}

.countlab {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: #F1EFE2;
  text-transform: uppercase;
}

/* ---------------- footer: pump house ---------------- */

.pumproom {
  background-color: #242B2A;
  border-top: 6px solid #4A5451;
  padding: 54px 0 0 0;
}

.pumphouse {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
}

.pumpwall {
  background-color: #171D1C;
  border: 4px solid #2E3634;
  border-radius: 12px 12px 4px 4px;
  padding: 40px 26px 30px 26px;
  position: relative;
  text-align: center;
}

.pumpgable {
  position: absolute;
  top: -30px;
  left: 50%;
  margin-left: -90px;
  width: 180px;
  height: 30px;
  background-color: #171D1C;
  border-left: 4px solid #2E3634;
  border-right: 4px solid #2E3634;
  border-top: 4px solid #2E3634;
  border-radius: 90px 90px 0 0;
}

.pumphatch {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  border: 6px solid #9C6A44;
  background-color: #2E3634;
  margin: 0 auto 20px auto;
  position: relative;
}

.pumphatch::before {
  content: "";
  position: absolute;
  background-color: #9C6A44;
  left: 50%;
  top: 8px;
  width: 4px;
  height: 50px;
  margin-left: -2px;
}

.pumphatch::after {
  content: "";
  position: absolute;
  background-color: #9C6A44;
  top: 50%;
  left: 8px;
  height: 4px;
  width: 50px;
  margin-top: -2px;
}

.pumppipe {
  position: absolute;
  width: 22px;
  height: 46px;
  background-color: #4A5451;
  border: 3px solid #2E3634;
}

.pumppipe.left {
  left: 40px;
  bottom: -30px;
  transform: rotate(12deg);
}

.pumppipe.right {
  right: 40px;
  bottom: -30px;
  transform: rotate(-12deg);
}

.pumpsign {
  display: inline-block;
  background-color: #2E3634;
  border: 3px solid #4A5451;
  border-radius: 8px;
  padding: 18px 30px;
  margin-bottom: 22px;
}

.pumpsign h3 {
  margin: 0 0 8px 0;
  font-size: 19px;
  color: #F1EFE2;
}

.pumpsign p {
  margin: 0;
  color: #F1EFE2;
  font-size: 15px;
  max-width: 620px;
}

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

.pumpchip {
  background-color: #2E3634;
  border: 2px solid #4A5451;
  border-radius: 5px;
  color: #F1EFE2;
  padding: 8px 16px;
  font-family: "Trebuchet MS", "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 14px;
  text-decoration: none;
  display: inline-block;
}

.pumpchip.lean-l { transform: rotate(-1.5deg); }
.pumpchip.lean-r { transform: rotate(1.5deg); }

.pumpchip:hover {
  text-decoration: none;
  border-color: #9C6A44;
}

.pumpplinth {
  background-color: #4A5451;
  padding: 16px 0;
  margin-top: 30px;
}

.pumpplinth-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  align-items: center;
  font-size: 14px;
  color: #F1EFE2;
  font-family: "Trebuchet MS", "Segoe UI", Helvetica, Arial, sans-serif;
}

.plinthsplash {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #7FA89A;
}

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

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.reveal.shown {
  opacity: 1;
  transform: translateY(0);
}

.no-js .reveal {
  opacity: 1;
  transform: none;
}

/* ---------------- responsive ---------------- */

@media (max-width: 900px) {
  .sortdrum-tablets {
    grid-template-columns: 1fr;
  }
  .chutechannel {
    display: none;
  }
  .chutebayitem {
    margin-left: 0;
  }
  .baytag {
    position: static;
    display: inline-block;
    margin-bottom: 12px;
    transform: none;
  }
  .sortdrum-rig {
    flex-direction: column;
    align-items: center;
    min-height: 0;
  }
  .sortdrum-rail {
    display: none;
  }
}

@media (max-width: 760px) {
  .leanrail-rail {
    display: none;
  }
  .leanrail-brand {
    margin-bottom: 18px;
  }
  .leanrail-toggle {
    display: block;
  }
  .leanrail-signs {
    display: none;
    flex-direction: column;
    padding-left: 0;
    margin-top: 14px;
  }
  .leanrail-signs.open {
    display: flex;
  }
  .leanrail-sign {
    width: 100%;
    transform: none;
  }
  .gaugestrip-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .ctaband-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}