/* ============================================================
   UNCLE DUKES SEPTIC AND DRAIN LLC
   Desert yard service theme — light caliche paper, pump green.
   Skeleton: riser plate head / service yard scene / offset post
   cards / mileage band / pump house footer.
   ============================================================ */

:root {
  --caliche-paper: #F2EEE2;
  --yard-ink: #2E2B26;
  --pump-green: #4E7A4E;
  --trench-deep: #26251F;
  --lid-cream: #FAF6E9;
  --dust-screen: #D9CDAF;
  --pipe-grey: #8E9294;
  --hatch-amber: #C99A3C;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-size: 16px;
  margin: 0;
  padding: 0;
  background-color: #F2EEE2;
  color: #2E2B26;
  font-family: Georgia, "Times New Roman", Times, serif;
  line-height: 1.68;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: #3C623C;
  text-decoration: underline;
  text-underline-offset: 3px;
}

a:hover {
  color: #26251F;
}

h1, h2, h3, h4 {
  font-family: "Trebuchet MS", "Gill Sans", Verdana, sans-serif;
  letter-spacing: 0.01em;
  line-height: 1.22;
  margin: 0 0 0.6em;
}

p {
  margin: 0 0 1.05em;
}

/* ---------- shared shells ---------- */

.yard-shell {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

.yardskip {
  position: absolute;
  left: -9999px;
  top: 0;
  background-color: #26251F;
  color: #FAF6E9;
  padding: 10px 16px;
  z-index: 50;
}

.yardskip:focus {
  left: 12px;
  top: 12px;
}

.plate-eyebrow {
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #4E7A4E;
  margin: 0 0 0.6em;
  font-weight: 700;
}

.section-head {
  max-width: 760px;
  margin: 0 auto 34px;
  text-align: center;
}

.section-head h2 {
  font-size: 2rem;
  color: #26251F;
}

.section-head p {
  color: #45413A;
}

/* ============================================================
   RISER PLATE HEAD
   ============================================================ */

.riserwall {
  background-color: #26251F;
  border-bottom: 6px solid #4E7A4E;
}

.riserwall-inner {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 16px 24px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 18px;
}

.riserbrand {
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: #FAF6E9;
  border: 3px solid #4E7A4E;
  border-radius: 8px;
  padding: 12px 16px;
  flex: 1 1 320px;
}

.truckglyph {
  width: 46px;
  height: 26px;
  position: relative;
  flex: 0 0 46px;
}

.truckglyph::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 30px;
  height: 15px;
  background-color: #4E7A4E;
  border-radius: 2px 2px 0 0;
}

.truckglyph::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 4px;
  width: 15px;
  height: 11px;
  background-color: #4E7A4E;
  border-radius: 3px 3px 0 0;
  box-shadow: -6px 11px 0 -3px #26251F, 8px 11px 0 -3px #26251F;
}

.riserbrand-text {
  display: flex;
  flex-direction: column;
}

.riserbrand-text .brandname {
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-weight: 700;
  font-size: 0.98rem;
  color: #26251F;
  line-height: 1.2;
}

.riserbrand-text .brandsub {
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #4E7A4E;
  font-weight: 700;
}

.riserplates {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  flex: 2 1 520px;
  justify-content: flex-end;
  list-style: none;
  margin: 0;
  padding: 0;
}

.riserplate {
  position: relative;
  display: block;
  background-color: #FAF6E9;
  border: 2px solid #4E7A4E;
  border-radius: 12px 12px 10px 10px;
  padding: 16px 14px 12px;
  min-width: 96px;
  text-align: center;
  text-decoration: none;
}

.riserplate:nth-child(odd) {
  margin-top: 10px;
}

.riserplate:nth-child(even) {
  margin-top: 0;
}

.riserplate::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 10px;
  border: 3px solid #C99A3C;
  border-bottom: none;
  border-radius: 24px 24px 0 0;
}

.riserplate::after {
  content: "";
  position: absolute;
  bottom: 6px;
  left: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #8E9294;
  box-shadow: 76px 0 0 #8E9294;
}

.riserplate .plate-link {
  display: block;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  color: #2E2B26;
  text-decoration: none;
}

.riserplate .plate-code {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: #4E7A4E;
  font-weight: 700;
  margin-top: 2px;
}

.riserplate:hover {
  background-color: #4E7A4E;
}

.riserplate:hover .plate-link {
  color: #FAF6E9;
}

.riserplate:hover .plate-code {
  color: #FAF6E9;
}

.riserplate.is-current {
  background-color: #4E7A4E;
}

.riserplate.is-current .plate-link {
  color: #FAF6E9;
}

.riserplate.is-current .plate-code {
  color: #FAF6E9;
}

.navtoggle {
  display: none;
  background-color: #4E7A4E;
  color: #FAF6E9;
  border: 2px solid #FAF6E9;
  border-radius: 8px;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.8rem;
  padding: 12px 16px;
  cursor: pointer;
}

/* ============================================================
   HERO — SERVICE YARD SCENE
   ============================================================ */

.pumpline {
  position: relative;
  background-color: #F2EEE2;
  padding: 54px 0 0;
  overflow: hidden;
}

.pumpline-inner {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(0, 2.05fr) minmax(0, 1fr);
  gap: 30px;
  align-items: end;
}

.yardside {
  position: relative;
  min-height: 320px;
  padding-bottom: 130px;
}

/* service truck */
.pumptruck {
  position: relative;
  width: 340px;
  max-width: 74%;
  height: 150px;
  background-color: #4E7A4E;
  border: 3px solid #26251F;
  border-radius: 8px 10px 4px 4px;
  margin-top: 40px;
}

.pumptruck .truckcab {
  position: absolute;
  right: -104px;
  top: 22px;
  width: 104px;
  height: 94px;
  background-color: #FAF6E9;
  border: 3px solid #26251F;
  border-radius: 6px 12px 4px 4px;
}

.pumptruck .truckcab .cabglass {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 56px;
  height: 34px;
  background-color: #8E9294;
  border: 2px solid #26251F;
  border-radius: 3px;
}

.pumptruck .truckhatch {
  position: absolute;
  left: 24px;
  top: 34px;
  width: 66px;
  height: 60px;
  background-color: #26251F;
  border: 3px solid #FAF6E9;
  border-radius: 4px;
}

.pumptruck .truckhatch .hatchbar {
  position: absolute;
  left: -4px;
  top: -9px;
  width: 74px;
  height: 10px;
  background-color: #C99A3C;
  border-radius: 3px;
}

.pumptruck .gauge {
  position: absolute;
  right: 18px;
  top: 30px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: #FAF6E9;
  border: 3px solid #26251F;
}

.pumptruck .gauge::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 3px;
  height: 18px;
  background-color: #4E7A4E;
  transform-origin: bottom center;
  transform: translateX(-50%) rotate(38deg);
}

.pumptruck .truckdeck {
  position: absolute;
  left: -8px;
  bottom: -8px;
  width: 356px;
  height: 12px;
  background-color: #26251F;
  border-radius: 3px;
}

.pumptruck .wheel {
  position: absolute;
  bottom: -22px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: #26251F;
  border: 5px solid #8E9294;
}

.pumptruck .wheel.w-one {
  left: -2px;
}

.pumptruck .wheel.w-two {
  right: 34px;
}

.pumptruck .wheel.w-three {
  right: -56px;
}

/* suction hose */
.suctioncoil {
  position: absolute;
  left: 340px;
  top: 96px;
  width: 210px;
  height: 26px;
  background-color: #8E9294;
  border-radius: 13px;
  border: 3px solid #26251F;
}

.suctioncoil::before {
  content: "";
  position: absolute;
  left: -28px;
  top: -8px;
  width: 40px;
  height: 38px;
  border: 6px solid #8E9294;
  border-radius: 50%;
  border-right-color: #26251F;
}

.suctioncoil::after {
  content: "";
  position: absolute;
  right: -10px;
  bottom: -40px;
  width: 6px;
  height: 44px;
  background-color: #8E9294;
}

/* tank hatch at center */
.tankhatch {
  position: absolute;
  left: 470px;
  top: 176px;
  width: 130px;
  height: 66px;
}

.tankhatch .rimring {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 130px;
  height: 30px;
  background-color: #FAF6E9;
  border: 3px solid #26251F;
  border-radius: 50%;
}

.tankhatch .rimring .stripe {
  position: absolute;
  left: 10px;
  top: 8px;
  width: 110px;
  height: 7px;
  background-color: #C99A3C;
  border-radius: 4px;
}

.tankhatch .darkmouth {
  position: absolute;
  left: 22px;
  top: 6px;
  width: 86px;
  height: 30px;
  background-color: #26251F;
  border-radius: 50%;
}

/* stenciled headline on body */
.stencil {
  position: absolute;
  left: 0;
  top: 0;
  text-align: left;
}

.stencil h1 {
  margin: 0 0 6px;
  font-size: clamp(1.7rem, 4.2vw, 3rem);
  color: #26251F;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.stencil h1 .stencil-fill {
  background-color: #FAF6E9;
  color: #4E7A4E;
  padding: 0 10px;
  border: 2px solid #4E7A4E;
  border-radius: 6px;
  display: inline-block;
}

.stencil .stencil-sub {
  font-family: "Trebuchet MS", Verdana, sans-serif;
  color: #4E7A4E;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.82rem;
  margin: 0;
}

/* service post with clipboard paragraph */
.servicepost {
  position: relative;
  background-color: #FAF6E9;
  border: 3px solid #26251F;
  border-radius: 8px;
  padding: 22px 22px 20px;
  box-shadow: 8px 8px 0 #D9CDAF;
}

.servicepost::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -74px;
  width: 12px;
  height: 74px;
  background-color: #8E9294;
  border-left: 3px solid #26251F;
  border-right: 3px solid #26251F;
  transform: translateX(-50%);
}

.servicepost::after {
  content: "CLIPBOARD";
  position: absolute;
  left: 22px;
  top: -13px;
  background-color: #C99A3C;
  color: #26251F;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  padding: 3px 8px;
  border-radius: 3px;
}

.servicepost p {
  font-size: 0.98rem;
  color: #2E2B26;
  margin: 0 0 16px;
}

.post-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.hatchcap {
  display: inline-block;
  background-color: #4E7A4E;
  color: #FAF6E9;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-weight: 700;
  text-decoration: none;
  border: 3px solid #26251F;
  border-radius: 40px;
  padding: 11px 22px;
  position: relative;
}

.hatchcap::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -9px;
  transform: translateX(-50%);
  width: 30px;
  height: 8px;
  border: 3px solid #C99A3C;
  border-bottom: none;
  border-radius: 18px 18px 0 0;
}

.hatchcap:hover {
  background-color: #26251F;
  color: #FAF6E9;
}

.textlink {
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  color: #3C623C;
}

/* dust screen ground band with tire tracks */
.groundband {
  margin-top: 40px;
  height: 58px;
  background-color: #D9CDAF;
  border-top: 4px solid #26251F;
  position: relative;
  overflow: hidden;
}

.groundband::before,
.groundband::after {
  content: "";
  position: absolute;
  top: 16px;
  height: 8px;
  width: 100%;
  background-color: #B9A87F;
}

.groundband::before {
  left: 0;
}

.groundband::after {
  top: 34px;
  left: 40px;
  width: 60%;
  background-color: #C4B48D;
}

/* ============================================================
   SERVICE POST CARDS — offset post run
   ============================================================ */

.drainline {
  background-color: #F2EEE2;
  padding: 62px 0 40px;
  border-bottom: 4px solid #D9CDAF;
}

.postrail {
  position: relative;
  padding: 10px 0 20px;
}

.postrow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px 40px;
}

.serviceboard {
  position: relative;
  background-color: #FAF6E9;
  border: 3px solid #26251F;
  border-radius: 8px;
  padding: 26px 24px 22px;
  margin-left: 26px;
}

.serviceboard.tilt-left {
  transform: rotate(-1.4deg);
}

.serviceboard.tilt-right {
  transform: rotate(1.2deg);
}

.serviceboard .hatchstripe {
  position: absolute;
  left: -3px;
  top: -3px;
  right: -3px;
  height: 10px;
  background-color: #C99A3C;
  border-radius: 6px 6px 0 0;
}

.serviceboard .postbeam {
  position: absolute;
  left: -26px;
  top: 30px;
  width: 20px;
  bottom: 30px;
  background-color: #8E9294;
  border-left: 3px solid #26251F;
  border-right: 3px solid #26251F;
}

.serviceboard.board-offset .postbeam {
  top: 60px;
  bottom: 10px;
}

.serviceboard h3 {
  font-size: 1.22rem;
  color: #26251F;
  margin: 0 0 10px;
  padding-right: 44px;
}

.serviceboard p {
  font-size: 0.96rem;
  color: #45413A;
  margin: 0 0 0.8em;
}

.serviceboard .valveglyph {
  position: absolute;
  right: 18px;
  top: 26px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 4px solid #4E7A4E;
}

.serviceboard .valveglyph::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -10px;
  transform: translateX(-50%);
  width: 4px;
  height: 10px;
  background-color: #4E7A4E;
}

.serviceboard .valveglyph::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  width: 4px;
  height: 10px;
  background-color: #4E7A4E;
}

.serviceboard .platecode {
  position: absolute;
  right: 18px;
  bottom: 14px;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: #4E7A4E;
}

.serviceboard .clearedstamp {
  position: absolute;
  left: 24px;
  bottom: 14px;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: #4E7A4E;
  border: 2px solid #4E7A4E;
  border-radius: 4px;
  padding: 3px 8px;
  transform: rotate(-3deg);
}

.board-link {
  display: inline-block;
  margin-top: 6px;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  color: #3C623C;
}

/* ============================================================
   LONGFORM COPY BLOCK — woven service prose
   ============================================================ */

.yardcopy {
  background-color: #FAF6E9;
  padding: 62px 0;
  border-bottom: 4px solid #D9CDAF;
}

.copygrid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.copygrid h2 {
  font-size: 1.9rem;
  color: #26251F;
}

.copygrid h3 {
  font-size: 1.16rem;
  color: #4E7A4E;
  margin-top: 1.4em;
}

.copygrid p {
  color: #3B382F;
}

.copyaside {
  background-color: #D9CDAF;
  border: 3px solid #26251F;
  border-radius: 8px;
  padding: 24px;
}

.copyaside h3 {
  color: #26251F;
  margin-top: 0;
}

.copyaside ul {
  margin: 0;
  padding-left: 20px;
}

.copyaside li {
  margin-bottom: 9px;
  color: #2E2B26;
}

.copyaside .asideplate {
  display: block;
  margin-top: 18px;
  background-color: #26251F;
  color: #FAF6E9;
  border-radius: 6px;
  padding: 14px 16px;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 0.88rem;
  text-decoration: none;
}

.copyaside .asideplate:hover {
  background-color: #4E7A4E;
}

/* ============================================================
   MILEAGE BAND
   ============================================================ */

.mileageband {
  background-color: #26251F;
  padding: 20px 0;
}

.mileageband-inner {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}

.odometer {
  display: flex;
  align-items: center;
  gap: 0;
  background-color: #FAF6E9;
  border: 3px solid #4E7A4E;
  border-radius: 8px;
  padding: 10px 14px;
  position: relative;
  flex: 0 0 auto;
}

.odometer .tick {
  width: 3px;
  height: 26px;
  background-color: #C99A3C;
  margin: 0 9px 0 0;
}

.odometer .tick:last-of-type {
  margin-right: 16px;
}

.odometer .needle {
  width: 34px;
  height: 6px;
  background-color: #4E7A4E;
  border-radius: 3px;
  position: relative;
  transform: rotate(-24deg);
}

.odometer .needle::before {
  content: "";
  position: absolute;
  left: -8px;
  top: -5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #4E7A4E;
}

.odometer .odo-label {
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  color: #4E7A4E;
  font-weight: 700;
  margin-left: 12px;
}

.mileageband p {
  color: #FAF6E9;
  margin: 0;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 1rem;
  flex: 1 1 380px;
}

/* ============================================================
   CTA ROW (not a metric band, not a card grid)
   ============================================================ */

.callrow {
  background-color: #F2EEE2;
  padding: 58px 0;
}

.callrow-inner {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 30px;
}

.callpanel {
  background-color: #FAF6E9;
  border: 3px solid #26251F;
  border-radius: 8px;
  padding: 28px 26px;
  position: relative;
}

.callpanel::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 10px;
  background-color: #4E7A4E;
  border-radius: 5px 0 0 5px;
}

.callpanel h3 {
  color: #26251F;
  margin-top: 0;
}

.callpanel p {
  color: #45413A;
}

.callpanel .hatchcap {
  margin-top: 8px;
}

.callnumbers {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.callnumbers li {
  padding: 8px 0 8px 26px;
  position: relative;
  color: #2E2B26;
  border-bottom: 2px dashed #D9CDAF;
}

.callnumbers li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 3px solid #4E7A4E;
}

/* ============================================================
   PUMP HOUSE BASE — footer
   ============================================================ */

.pumpdeck {
  background-color: #26251F;
  color: #FAF6E9;
  padding: 0 0 0;
}

.pumphouse {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 50px 24px 0;
}

.houseface {
  background-color: #26251F;
  border: 4px solid #FAF6E9;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  padding: 30px 28px 26px;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}

.housebrand {
  background-color: #FAF6E9;
  border-radius: 8px;
  padding: 22px 22px;
  color: #2E2B26;
}

.housebrand h2 {
  color: #26251F;
  font-size: 1.2rem;
  margin: 0 0 8px;
}

.housebrand p {
  color: #45413A;
  font-size: 0.94rem;
  margin: 0;
}

.housestack {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.rollerdoor {
  height: 92px;
  background-color: #8E9294;
  border: 3px solid #FAF6E9;
  border-radius: 6px;
  background-image: repeating-linear-gradient(
    180deg,
    #8E9294 0px,
    #8E9294 10px,
    #6F7375 10px,
    #6F7375 13px
  );
}

.ventgrid {
  height: 46px;
  background-color: #26251F;
  border: 3px solid #FAF6E9;
  border-radius: 6px;
  background-image: repeating-linear-gradient(
    90deg,
    #4E7A4E 0px,
    #4E7A4E 6px,
    #26251F 6px,
    #26251F 14px
  );
}

.houseriserlinks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.houseriserlinks a {
  display: block;
  background-color: #FAF6E9;
  color: #2E2B26;
  border: 2px solid #4E7A4E;
  border-radius: 9px 9px 7px 7px;
  padding: 12px 14px 10px;
  text-decoration: none;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  position: relative;
}

.houseriserlinks a::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 7px;
  border: 3px solid #C99A3C;
  border-bottom: none;
  border-radius: 16px 16px 0 0;
}

.houseriserlinks a:hover {
  background-color: #4E7A4E;
  color: #FAF6E9;
}

.plinthstrip {
  background-color: #D9CDAF;
  color: #2E2B26;
  padding: 18px 0;
}

.plinthstrip-inner {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  align-items: center;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 0.85rem;
}

.plinthstrip-inner a {
  color: #2E2B26;
}

.plinthstrip-inner .hatchdot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #C99A3C;
  margin-right: 8px;
}

.plinthstrip-inner .phone {
  font-weight: 700;
}

/* ============================================================
   INNER PAGE EXTRAS
   ============================================================ */

.pagehead {
  background-color: #D9CDAF;
  border-bottom: 4px solid #26251F;
  padding: 46px 0 38px;
}

.pagehead-inner {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

.pagehead h1 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: #26251F;
  margin: 0 0 10px;
}

.pagehead p {
  max-width: 720px;
  color: #3B382F;
  margin: 0;
}

.servicedetail {
  background-color: #F2EEE2;
  padding: 58px 0;
}

.detailblock {
  background-color: #FAF6E9;
  border: 3px solid #26251F;
  border-left: 12px solid #4E7A4E;
  border-radius: 8px;
  padding: 28px 28px 22px;
  margin-bottom: 28px;
}

.detailblock h2 {
  font-size: 1.5rem;
  color: #26251F;
  margin: 0 0 6px;
}

.detailblock .detailcode {
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: #4E7A4E;
  font-weight: 700;
  display: block;
  margin-bottom: 12px;
}

.detailblock p {
  color: #3B382F;
}

.processrail {
  background-color: #FAF6E9;
  padding: 58px 0;
  border-top: 4px solid #D9CDAF;
}

.processsteps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.processsteps li {
  background-color: #F2EEE2;
  border: 2px solid #26251F;
  border-radius: 8px;
  padding: 20px 20px 16px 58px;
  position: relative;
  color: #3B382F;
}

.processsteps li::before {
  content: attr(data-step);
  position: absolute;
  left: 16px;
  top: 18px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #4E7A4E;
  color: #FAF6E9;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.processsteps li strong {
  display: block;
  color: #26251F;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  margin-bottom: 4px;
}

.contactwrap {
  background-color: #F2EEE2;
  padding: 58px 0;
}

.contactgrid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}

.formcard {
  background-color: #FAF6E9;
  border: 3px solid #26251F;
  border-radius: 8px;
  padding: 28px 26px;
  position: relative;
}

.formcard::before {
  content: "";
  position: absolute;
  left: -3px;
  top: -3px;
  right: -3px;
  height: 10px;
  background-color: #C99A3C;
  border-radius: 6px 6px 0 0;
}

.fieldrow {
  margin-bottom: 18px;
}

.fieldrow label {
  display: block;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-weight: 700;
  font-size: 0.86rem;
  color: #26251F;
  margin-bottom: 6px;
}

.fieldrow input,
.fieldrow select,
.fieldrow textarea {
  width: 100%;
  padding: 11px 12px;
  border: 2px solid #8E9294;
  border-radius: 6px;
  background-color: #F2EEE2;
  color: #2E2B26;
  font-family: Georgia, Times, serif;
  font-size: 1rem;
}

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

.fieldrow input:focus,
.fieldrow select:focus,
.fieldrow textarea:focus {
  outline: 3px solid #4E7A4E;
  border-color: #4E7A4E;
}

.formsubmit {
  background-color: #4E7A4E;
  color: #FAF6E9;
  border: 3px solid #26251F;
  border-radius: 40px;
  padding: 13px 30px;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
}

.formsubmit:hover {
  background-color: #26251F;
}

.formnote {
  font-size: 0.82rem;
  color: #45413A;
  margin-top: 14px;
}

.infoside {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.infoboard {
  background-color: #D9CDAF;
  border: 3px solid #26251F;
  border-radius: 8px;
  padding: 22px;
}

.infoboard h3 {
  color: #26251F;
  margin-top: 0;
  font-size: 1.08rem;
}

.infoboard p,
.infoboard li {
  color: #2E2B26;
  font-size: 0.94rem;
}

.infoboard ul {
  margin: 0;
  padding-left: 20px;
}

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

.hourslist li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 2px dashed #B9A87F;
}

.hourslist li span:last-child {
  font-weight: 700;
  font-family: "Trebuchet MS", Verdana, sans-serif;
}

.faqzone {
  background-color: #FAF6E9;
  padding: 58px 0;
  border-top: 4px solid #D9CDAF;
}

.faqitem {
  background-color: #F2EEE2;
  border: 2px solid #26251F;
  border-radius: 8px;
  margin-bottom: 16px;
  overflow: hidden;
}

.faqask {
  width: 100%;
  text-align: left;
  background-color: #F2EEE2;
  border: none;
  padding: 18px 52px 18px 20px;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: #26251F;
  cursor: pointer;
  position: relative;
}

.faqask::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  color: #4E7A4E;
}

.faqitem.is-open .faqask::after {
  content: "–";
}

.faqsay {
  display: none;
  padding: 0 20px 20px;
  color: #3B382F;
}

.faqitem.is-open .faqsay {
  display: block;
}

/* scroll reveal */
.will-reveal {
  opacity: 1;
}

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

.html-js .will-reveal.is-shown {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {
  .pumpline-inner {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .yardside {
    padding-bottom: 60px;
  }

  .tankhatch {
    left: 330px;
    top: 150px;
  }

  .suctioncoil {
    left: 320px;
    width: 150px;
  }

  .servicepost::before {
    display: none;
  }

  .copygrid {
    grid-template-columns: 1fr;
  }

  .postrow {
    grid-template-columns: 1fr;
  }

  .callrow-inner {
    grid-template-columns: 1fr;
  }

  .houseface {
    grid-template-columns: 1fr;
  }

  .contactgrid {
    grid-template-columns: 1fr;
  }

  .processsteps {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .navtoggle {
    display: inline-block;
  }

  .riserplates {
    display: none;
    flex-direction: column;
    width: 100%;
  }

  .riserplates.is-open {
    display: flex;
  }

  .riserplates .riserplate {
    width: 100%;
    text-align: left;
    margin-top: 0;
    padding-left: 30px;
  }

  .riserplate::after {
    box-shadow: 76px 0 0 #8E9294;
  }

  .yardside {
    min-height: 0;
  }

  .pumptruck {
    width: 250px;
    max-width: 84%;
  }

  .pumptruck .truckcab {
    right: -84px;
    width: 84px;
  }

  .suctioncoil {
    display: none;
  }

  .tankhatch {
    position: relative;
    left: auto;
    top: auto;
    margin: 30px 0 0 40px;
  }

  .serviceboard {
    margin-left: 16px;
  }

  .odometer {
    width: 100%;
    justify-content: center;
  }
}