/* ==========================================================================
   UTILITEQ CONTRACTORS LLC
   Municipal trench cross-section theme
   Palette:
     survey-bluff  #EDE7D8  body background (dry valley sod dust)
     cut-loam      #2E2A22  primary text
     warning-ward  #C75B23  accent (traffic-cone orange of an open trench)
     subgrade-deep #403A2E  deep soil panels
     barricade     #FBF8F0  brightest faces
     shore-hard    #6E6A58  tertiary haunch marks / labels
     compaction    #D6CDB4  thin soil seams
   APWA buried-utility codes:
     electric  #C4392F  gas #E0B23C  comms #D97E2F  water #3E6E9E  sewer #4E7A4E
   ========================================================================== */

/* ---------- reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

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

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

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

a:hover,
a:focus {
  text-decoration: underline;
}

h1,
h2,
h3,
h4 {
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  line-height: 1.18;
  margin: 0 0 0.5em 0;
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 1em 0;
}

ul {
  margin: 0 0 1em 0;
  padding-left: 1.2em;
}

/* ---------- layout helpers ---------- */
.wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #C75B23;
  color: #FBF8F0;
  padding: 10px 16px;
  z-index: 999;
}

.skip-link:focus {
  left: 8px;
  top: 8px;
}

/* ==========================================================================
   NAVIGATION : CURB-LINE SIGN BAND
   ========================================================================== */
.curbband {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 60;
  background-color: #EDE7D8;
}

.curbstrip {
  background-color: #2E2A22;
  border-bottom: 6px solid #C75B23;
  padding: 8px 0 6px 0;
}

.curbstrip-inner {
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.brandplate {
  position: relative;
  background-color: #FBF8F0;
  color: #2E2A22;
  border: 3px solid #2E2A22;
  border-radius: 4px;
  padding: 12px 20px 12px 26px;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 5px 5px 0 #403A2E;
  flex: 0 0 auto;
}

.brandplate::before,
.brandplate::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #403A2E;
  top: 9px;
}

.brandplate::before {
  left: 8px;
}

.brandplate::after {
  left: 8px;
  top: auto;
  bottom: 9px;
}

.brandplate-sub {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  color: #6E6A58;
  margin-top: 3px;
}

.signpanelrow {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  flex: 1 1 auto;
  justify-content: flex-end;
}

.signpost {
  display: block;
  position: relative;
  padding-bottom: 12px;
}

.signpost::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 12px;
  background-color: #6E6A58;
}

.signpanel {
  display: block;
  position: relative;
  background-color: #FBF8F0;
  color: #2E2A22;
  border: 2px solid #2E2A22;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 9px 16px;
  white-space: nowrap;
  overflow: hidden;
}

.signpanel::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 14px;
  height: 14px;
  background-color: #C75B23;
  clip-path: polygon(100% 0, 100% 100%, 0 0);
}

.signpanel:hover,
.signpanel:focus {
  background-color: #C75B23;
  color: #2E2A22;
  text-decoration: none;
}

.signpanel-stake {
  position: absolute;
  top: 6px;
  right: 18px;
  font-size: 0.6rem;
  color: #6E6A58;
  letter-spacing: 0.06em;
}

.signpost-a .signpanel {
  width: 92px;
}

.signpost-b .signpanel {
  width: 112px;
}

.signpost-c .signpanel {
  width: 104px;
}

.signpost-d .signpanel {
  width: 98px;
}

.signpost-e .signpanel {
  width: 84px;
}

.signpanelrow > .signpost:nth-child(odd) {
  margin-top: 7px;
}

.signpanelrow > .signpost:nth-child(even) {
  margin-top: 0;
}

.curbband-subnote {
  background-color: #D6CDB4;
  color: #2E2A22;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-align: center;
  padding: 6px 16px;
  border-bottom: 1px solid #6E6A58;
  text-transform: uppercase;
}

.curbband-subnote strong {
  color: #C75B23;
}

.navtoggle {
  display: none;
  background-color: #FBF8F0;
  color: #2E2A22;
  border: 3px solid #2E2A22;
  border-radius: 3px;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 12px 16px;
  cursor: pointer;
  box-shadow: 4px 4px 0 #403A2E;
}

/* ==========================================================================
   HERO : OPEN TRENCH PROOF BAY
   ========================================================================== */
.trenchbay {
  background-color: #EDE7D8;
  background-image:
    repeating-linear-gradient(90deg, #D6CDB4 0, #D6CDB4 2px, #EDE7D8 2px, #EDE7D8 34px);
  border-bottom: 8px solid #403A2E;
  padding: 54px 0 60px 0;
}

.trenchbay-inner {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: 44px;
  align-items: start;
}

.trenchbay-copy {
  padding-top: 6px;
}

.trenchbay-kicker {
  display: inline-block;
  background-color: #403A2E;
  color: #FBF8F0;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 7px 14px;
  margin-bottom: 18px;
  border-left: 6px solid #C75B23;
}

.trenchbay h1 {
  font-size: 3rem;
  color: #2E2A22;
  margin-bottom: 18px;
}

.trenchbay h1 .groundword {
  color: #C75B23;
}

.trenchbay-lede {
  font-size: 1.08rem;
  color: #2E2A22;
  max-width: 56ch;
  border-left: 4px solid #6E6A58;
  padding-left: 16px;
}

.trenchbay-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 26px;
  align-items: flex-end;
}

.locateflag {
  display: block;
  position: relative;
  padding-top: 30px;
}

.locateflag-head {
  display: block;
  background-color: #C75B23;
  color: #2E2A22;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  padding: 12px 22px;
  border: 2px solid #2E2A22;
  clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%);
}

.locateflag-head:hover,
.locateflag-head:focus {
  background-color: #403A2E;
  color: #FBF8F0;
  text-decoration: none;
}

.locateflag-head-alt {
  background-color: #403A2E;
  color: #FBF8F0;
}

.locateflag-head-alt:hover,
.locateflag-head-alt:focus {
  background-color: #C75B23;
  color: #2E2A22;
}

.locateflag-post {
  display: block;
  position: absolute;
  top: 0;
  left: 26px;
  width: 4px;
  height: 30px;
  background-color: #6E6A58;
}

.locateflag-code {
  display: block;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  color: #6E6A58;
  margin-top: 7px;
  padding-left: 4px;
}

/* ---------- CSS trench cross-section ---------- */
.trenchcut {
  position: relative;
  background-color: #403A2E;
  border: 4px solid #2E2A22;
  border-radius: 2px;
  padding: 0;
  box-shadow: 8px 8px 0 #C75B23;
  overflow: hidden;
}

.trenchcut-surface {
  position: relative;
  height: 46px;
  background-color: #D6CDB4;
  border-bottom: 3px solid #2E2A22;
  background-image:
    repeating-linear-gradient(45deg, #2E2A22 0, #2E2A22 3px, #C75B23 3px, #C75B23 6px, #D6CDB4 6px, #D6CDB4 16px);
}

.trenchcut-surface-label {
  position: absolute;
  left: 10px;
  top: 12px;
  background-color: #2E2A22;
  color: #FBF8F0;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 8px;
}

.trenchcut-stake {
  position: absolute;
  right: 22px;
  top: -20px;
  width: 4px;
  height: 66px;
  background-color: #6E6A58;
}

.trenchcut-stake::before {
  content: "";
  position: absolute;
  top: 0;
  left: -13px;
  width: 22px;
  height: 16px;
  background-color: #E0B23C;
  border: 2px solid #2E2A22;
  clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%);
}

.trenchcut-body {
  position: relative;
  padding: 24px 22px 26px 22px;
  display: grid;
  grid-template-columns: 40px 1fr 54px;
  gap: 14px;
  min-height: 360px;
}

.trenchcut-ladder {
  position: relative;
  width: 26px;
  margin-left: 2px;
  background-image: repeating-linear-gradient(
    to bottom,
    #6E6A58 0,
    #6E6A58 4px,
    #403A2E 4px,
    #403A2E 20px
  );
  border: 3px solid #6E6A58;
  border-top: none;
  border-bottom: none;
  transform: rotate(9deg);
  transform-origin: bottom center;
  margin-top: -14px;
  height: 372px;
}

.trenchcut-pipes {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 4px 0;
}

.piperow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 6px;
}

.pipe {
  display: block;
  width: 62px;
  height: 16px;
  border-radius: 8px;
  border: 2px solid #2E2A22;
  flex: 0 0 auto;
}

.pipe-embed {
  flex: 1 1 auto;
  height: 3px;
  background-color: #6E6A58;
  border: none;
}

.pipe-tag {
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  color: #FBF8F0;
  background-color: #403A2E;
  border: 1px solid #6E6A58;
  padding: 2px 6px;
  white-space: nowrap;
}

.pipe-electric {
  background-color: #C4392F;
}

.pipe-gas {
  background-color: #E0B23C;
}

.pipe-comms {
  background-color: #D97E2F;
}

.pipe-water {
  background-color: #3E6E9E;
}

.pipe-sewer {
  background-color: #4E7A4E;
}

.trenchcut-plate {
  position: absolute;
  right: 84px;
  top: 130px;
  width: 120px;
  height: 44px;
  background-color: #6E6A58;
  border: 3px solid #2E2A22;
  border-radius: 3px;
  box-shadow: 4px 4px 0 #2E2A22;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  color: #FBF8F0;
  text-transform: uppercase;
  z-index: 3;
}

.trenchcut-scale {
  position: relative;
  border-left: 3px solid #FBF8F0;
  padding-left: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 0.58rem;
  color: #FBF8F0;
  letter-spacing: 0.04em;
}

.trenchcut-scale span {
  position: relative;
}

.trenchcut-scale span::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 7px;
  width: 8px;
  height: 2px;
  background-color: #C75B23;
}

.trenchcut-caption {
  background-color: #2E2A22;
  color: #FBF8F0;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  padding: 10px 14px;
  border-top: 3px solid #C75B23;
}

/* ==========================================================================
   SECTION : STRATUM UTILITY LEDGER
   ========================================================================== */
.strataway {
  padding: 0;
}

.strataband {
  position: relative;
  padding: 46px 0 48px 0;
  border-top: 3px solid #2E2A22;
}

.strataband-light {
  background-color: #FBF8F0;
  color: #2E2A22;
}

.strataband-deep {
  background-color: #403A2E;
  color: #FBF8F0;
}

.strataband-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 34px;
  align-items: start;
}

.strataband-odd {
  transform: skewY(-1deg);
}

.strataband-even {
  transform: skewY(1deg);
}

.strataband-odd > .strataband-inner,
.strataband-even > .strataband-inner {
  transform: skewY(0deg);
}

.layerblock {
  background-color: #D6CDB4;
  color: #2E2A22;
  border: 3px solid #2E2A22;
  padding: 16px 16px 18px 16px;
  box-shadow: 5px 5px 0 #C75B23;
}

.layerblock-tag {
  display: block;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #2E2A22;
}

.layerblock-depth {
  display: block;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: #6E6A58;
  margin-top: 6px;
  border-top: 2px dashed #6E6A58;
  padding-top: 6px;
}

.layerblock-code {
  display: block;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #403A2E;
  margin-top: 10px;
}

.workpanel h3 {
  font-size: 1.6rem;
  margin-bottom: 12px;
}

.strataband-light .workpanel h3 {
  color: #2E2A22;
}

.strataband-deep .workpanel h3 {
  color: #FBF8F0;
}

.strataband-deep .workpanel h3 .svc-arrow {
  color: #C75B23;
}

.workpanel p {
  max-width: 74ch;
  font-size: 1rem;
}

.strataband-light .workpanel p {
  color: #2E2A22;
}

.strataband-deep .workpanel p {
  color: #FBF8F0;
}

.svclink {
  display: inline-block;
  margin-top: 6px;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom: 3px solid #C75B23;
  padding-bottom: 2px;
}

.strataband-light .svclink {
  color: #C75B23;
}

.strataband-deep .svclink {
  color: #FBF8F0;
  border-bottom-color: #C75B23;
}

.svclink:hover,
.svclink:focus {
  color: #C75B23;
}

/* APWA grid chip row */
.apwagrid {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 2px solid #6E6A58;
}

.apwadot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid #2E2A22;
  display: inline-block;
}

.apwadot-e {
  background-color: #C4392F;
}

.apwadot-g {
  background-color: #E0B23C;
}

.apwadot-c {
  background-color: #D97E2F;
}

.apwadot-w {
  background-color: #3E6E9E;
}

.apwadot-s {
  background-color: #4E7A4E;
}

.apwagrid-label {
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.strataband-light .apwagrid-label {
  color: #6E6A58;
}

.strataband-deep .apwagrid-label {
  color: #D6CDB4;
}

/* seam shapes across band tops */
.seam-straight::before,
.seam-stepped::before,
.seam-hatched::before,
.seam-wavy::before,
.seam-double::before,
.seam-trenched::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  right: 0;
  height: 10px;
}

.seam-straight::before {
  background-color: #6E6A58;
}

.seam-stepped::before {
  background-color: #6E6A58;
  clip-path: polygon(0 0, 18% 0, 18% 100%, 40% 100%, 40% 0, 62% 0, 62% 100%, 84% 100%, 84% 0, 100% 0, 100% 100%, 0 100%);
}

.seam-hatched::before {
  background-color: #6E6A58;
  background-image: repeating-linear-gradient(90deg, #2E2A22 0, #2E2A22 2px, #6E6A58 2px, #6E6A58 9px);
}

.seam-wavy::before {
  background-color: #6E6A58;
  clip-path: polygon(0 0, 100% 0, 100% 40%, 90% 90%, 80% 40%, 70% 90%, 60% 40%, 50% 90%, 40% 40%, 30% 90%, 20% 40%, 10% 90%, 0 40%);
}

.seam-double::before {
  background-color: #6E6A58;
  box-shadow: 0 5px 0 #C75B23;
}

.seam-trenched::before {
  background-color: #6E6A58;
  clip-path: polygon(0 0, 100% 0, 100% 30%, 55% 30%, 45% 100%, 35% 100%, 25% 30%, 0 30%);
}

/* ---------- survey blurb band (rich homepage copy) ---------- */
.surveyblurb {
  background-color: #D6CDB4;
  color: #2E2A22;
  padding: 52px 0 56px 0;
  border-top: 4px solid #2E2A22;
  border-bottom: 4px solid #2E2A22;
}

.surveyblurb-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 24px;
}

.surveyblurb h2 {
  font-size: 2rem;
  color: #2E2A22;
  margin-bottom: 8px;
}

.surveyblurb-rule {
  width: 96px;
  height: 6px;
  background-color: #C75B23;
  margin-bottom: 22px;
}

.surveyblurb p {
  color: #2E2A22;
  font-size: 1.03rem;
}

.pullquote {
  border-left: 8px solid #C75B23;
  background-color: #FBF8F0;
  color: #2E2A22;
  padding: 18px 22px;
  margin: 26px 0;
  font-size: 1.1rem;
}

.listenlist {
  list-style: none;
  padding-left: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 30px;
  margin-top: 20px;
}

.listenlist li {
  padding-left: 30px;
  position: relative;
  color: #2E2A22;
}

.listenlist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 14px;
  height: 8px;
  background-color: #C75B23;
  border-bottom: 3px solid #2E2A22;
  transform: rotate(-6deg);
}

/* ---------- caution strip ---------- */
.surfacenotice {
  background-color: #C75B23;
  color: #FBF8F0;
  border-top: 6px solid #2E2A22;
  border-bottom: 6px solid #2E2A22;
  padding: 0;
}

.surfacenotice-hatch {
  height: 14px;
  background-image: repeating-linear-gradient(45deg, #2E2A22 0, #2E2A22 8px, #C75B23 8px, #C75B23 16px);
}

.surfacenotice-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 26px 24px;
  text-align: center;
}

.surfacenotice p {
  margin: 0;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #FBF8F0;
}

.surfacenotice a {
  color: #FBF8F0;
  text-decoration: underline;
}

/* ---------- process rail (services page) ---------- */
.processrail {
  background-color: #EDE7D8;
  padding: 54px 0 58px 0;
}

.processrail h2 {
  font-size: 2rem;
  color: #2E2A22;
}

.processrail-rule {
  width: 96px;
  height: 6px;
  background-color: #403A2E;
  margin-bottom: 26px;
}

.processsteps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.processstep {
  background-color: #FBF8F0;
  color: #2E2A22;
  border: 3px solid #2E2A22;
  border-top: 8px solid #C75B23;
  padding: 20px 18px 22px 18px;
  position: relative;
}

.processstep-num {
  display: block;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: #6E6A58;
  margin-bottom: 8px;
}

.processstep h3 {
  font-size: 1.15rem;
  color: #2E2A22;
  margin-bottom: 8px;
}

.processstep p {
  font-size: 0.96rem;
  color: #2E2A22;
  margin: 0;
}

/* ---------- CTA band ---------- */
.ctaband {
  background-color: #403A2E;
  color: #FBF8F0;
  padding: 48px 0 52px 0;
  border-top: 6px solid #C75B23;
}

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

.ctaband h2 {
  font-size: 1.9rem;
  color: #FBF8F0;
}

.ctaband p {
  color: #D6CDB4;
  max-width: 70ch;
  margin: 0 auto 20px auto;
}

.ctaband-flags {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ==========================================================================
   FOOTER : TRENCH PLATE FOUNDATION
   ========================================================================== */
.platelock {
  background-color: #2E2A22;
  color: #FBF8F0;
  border-top: 8px solid #403A2E;
}

.platepave {
  height: 34px;
  background-color: #FBF8F0;
  border-bottom: 4px solid #2E2A22;
  position: relative;
  background-image:
    repeating-linear-gradient(90deg, #D6CDB4 0, #D6CDB4 3px, #FBF8F0 3px, #FBF8F0 46px);
}

.platepave-seam {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 5px;
  background-color: #6E6A58;
}

.platelock-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 44px 24px 30px 24px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 30px;
  align-items: start;
}

.platebrandplate {
  position: relative;
  background-color: #FBF8F0;
  color: #2E2A22;
  border: 3px solid #C75B23;
  border-radius: 4px;
  padding: 16px 18px;
  box-shadow: 5px 5px 0 #403A2E;
}

.platebrandplate h2 {
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #2E2A22;
  margin-bottom: 10px;
}

.platebrandplate p {
  color: #2E2A22;
  font-size: 0.92rem;
  margin: 0;
}

.platesign {
  position: relative;
  padding-top: 20px;
}

.platesign::before {
  content: "";
  position: absolute;
  top: 0;
  left: 22px;
  width: 5px;
  height: 20px;
  background-color: #6E6A58;
}

.platesign-group {
  background-color: #FBF8F0;
  color: #2E2A22;
  border: 2px solid #C75B23;
  padding: 14px 16px 16px 16px;
}

.platesign-group h3 {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #C75B23;
  margin-bottom: 10px;
}

.platesign-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.platesign-group li {
  margin-bottom: 7px;
}

.platesign-group a {
  color: #2E2A22;
  font-size: 0.92rem;
  border-bottom: 2px solid #D6CDB4;
}

.platesign-group a:hover,
.platesign-group a:focus {
  color: #C75B23;
  border-bottom-color: #C75B23;
  text-decoration: none;
}

.platefoundation {
  border-top: 2px solid #6E6A58;
  background-color: #2E2A22;
}

.platefoundation-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 18px 24px 22px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  align-items: center;
  justify-content: space-between;
}

.foundation-line {
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 0.84rem;
  color: #FBF8F0;
}

.foundation-line a {
  color: #FBF8F0;
  border-bottom: 2px solid #C75B23;
}

.foundation-line a:hover,
.foundation-line a:focus {
  color: #C75B23;
  text-decoration: none;
}

.foundation-flag {
  display: inline-block;
  position: relative;
  width: 0;
  height: 0;
  margin-right: 22px;
}

.foundation-flag::before {
  content: "";
  position: absolute;
  left: 0;
  top: -9px;
  width: 3px;
  height: 18px;
  background-color: #6E6A58;
}

.foundation-flag::after {
  content: "";
  position: absolute;
  left: 3px;
  top: -9px;
  width: 14px;
  height: 9px;
  background-color: #C75B23;
  clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%);
}

/* ==========================================================================
   INNER PAGE BANNER
   ========================================================================== */
.pagebanner {
  background-color: #403A2E;
  color: #FBF8F0;
  padding: 44px 0 46px 0;
  border-bottom: 8px solid #C75B23;
}

.pagebanner-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

.pagebanner h1 {
  font-size: 2.5rem;
  color: #FBF8F0;
  margin-bottom: 10px;
}

.pagebanner p {
  color: #D6CDB4;
  max-width: 72ch;
  margin: 0;
  font-size: 1.02rem;
}

.pagebanner-tag {
  display: inline-block;
  background-color: #C75B23;
  color: #2E2A22;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 12px;
  margin-bottom: 16px;
}

/* ==========================================================================
   SERVICE DETAIL LEDGER (services page)
   ========================================================================== */
.serviceledger {
  background-color: #EDE7D8;
  padding: 50px 0 54px 0;
}

.serviceentry {
  background-color: #FBF8F0;
  color: #2E2A22;
  border: 3px solid #2E2A22;
  border-left: 12px solid #C75B23;
  padding: 26px 28px 28px 28px;
  margin-bottom: 26px;
}

.serviceentry h2 {
  font-size: 1.55rem;
  color: #2E2A22;
  margin-bottom: 6px;
}

.serviceentry-meta {
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6E6A58;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px dashed #6E6A58;
}

.serviceentry p {
  color: #2E2A22;
  max-width: 82ch;
}

.serviceentry-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 16px;
}

.servicefacet {
  background-color: #EDE7D8;
  border: 2px solid #D6CDB4;
  border-top: 5px solid #403A2E;
  padding: 14px 16px;
}

.servicefacet h4 {
  font-size: 0.95rem;
  color: #403A2E;
  margin-bottom: 6px;
}

.servicefacet p {
  font-size: 0.92rem;
  margin: 0;
  color: #2E2A22;
}

/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */
.contactzone {
  background-color: #EDE7D8;
  padding: 50px 0 54px 0;
}

.contactzone-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 36px;
  align-items: start;
}

.contactform-box {
  background-color: #FBF8F0;
  border: 3px solid #2E2A22;
  border-top: 10px solid #C75B23;
  padding: 26px 26px 28px 26px;
}

.contactform-box h2 {
  font-size: 1.6rem;
  color: #2E2A22;
  margin-bottom: 16px;
}

.fieldlabel {
  display: block;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #403A2E;
  margin-bottom: 6px;
}

.fieldgroup {
  margin-bottom: 16px;
}

.fieldinput,
.fieldtextarea {
  width: 100%;
  background-color: #EDE7D8;
  color: #2E2A22;
  border: 2px solid #403A2E;
  border-radius: 2px;
  padding: 11px 13px;
  font-size: 1rem;
  font-family: Georgia, "Times New Roman", serif;
}

.fieldinput:focus,
.fieldtextarea:focus {
  border-color: #C75B23;
  outline: 3px solid #C75B23;
}

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

.fieldsubmit {
  background-color: #C75B23;
  color: #2E2A22;
  border: 3px solid #2E2A22;
  border-radius: 2px;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 14px 28px;
  cursor: pointer;
  box-shadow: 5px 5px 0 #403A2E;
}

.fieldsubmit:hover,
.fieldsubmit:focus {
  background-color: #403A2E;
  color: #FBF8F0;
}

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

.formstatus {
  margin-top: 14px;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 0.88rem;
  color: #403A2E;
}

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

.contactside-card {
  background-color: #403A2E;
  color: #FBF8F0;
  border: 3px solid #2E2A22;
  padding: 20px 20px 22px 20px;
}

.contactside-card h3 {
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #C75B23;
  margin-bottom: 12px;
}

.contactside-card p,
.contactside-card li {
  color: #FBF8F0;
  font-size: 0.95rem;
}

.contactside-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.contactside-card li {
  padding: 6px 0;
  border-bottom: 1px solid #6E6A58;
}

.contactside-card a {
  color: #FBF8F0;
  border-bottom: 2px solid #C75B23;
}

.contactside-card a:hover,
.contactside-card a:focus {
  color: #C75B23;
  text-decoration: none;
}

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

.hourslist li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  border-bottom: 1px solid #6E6A58;
}

/* FAQ */
.faqzone {
  background-color: #D6CDB4;
  padding: 50px 0 54px 0;
  border-top: 4px solid #2E2A22;
  border-bottom: 4px solid #2E2A22;
}

.faqzone h2 {
  font-size: 1.9rem;
  color: #2E2A22;
  margin-bottom: 8px;
}

.faqzone-rule {
  width: 96px;
  height: 6px;
  background-color: #C75B23;
  margin-bottom: 24px;
}

.faqitem {
  background-color: #FBF8F0;
  border: 3px solid #2E2A22;
  margin-bottom: 14px;
}

.faqq {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background-color: #FBF8F0;
  color: #2E2A22;
  border: none;
  text-align: left;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.02rem;
  padding: 16px 18px;
  cursor: pointer;
}

.faqq:hover,
.faqq:focus {
  background-color: #D6CDB4;
}

.faqq-mark {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  background-color: #C75B23;
  border: 2px solid #2E2A22;
  position: relative;
}

.faqq-mark::before,
.faqq-mark::after {
  content: "";
  position: absolute;
  background-color: #2E2A22;
}

.faqq-mark::before {
  left: 4px;
  top: 8px;
  width: 10px;
  height: 3px;
}

.faqq-mark::after {
  left: 8px;
  top: 4px;
  width: 3px;
  height: 11px;
}

.faqitem.is-open .faqq-mark::after {
  display: none;
}

.faqa {
  display: none;
  padding: 0 18px 18px 18px;
  color: #2E2A22;
  border-top: 2px dashed #6E6A58;
  padding-top: 14px;
}

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

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
.revealable {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.revealable.is-shown {
  opacity: 1;
  transform: translateY(0);
}

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

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1000px) {
  .trenchbay-inner {
    grid-template-columns: 1fr;
  }

  .platlock-inner {
    grid-template-columns: repeat(2, 1fr);
  }

  .processsteps {
    grid-template-columns: repeat(2, 1fr);
  }

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

@media (max-width: 720px) {
  .curbstrip-inner {
    flex-wrap: wrap;
  }

  .signpanelrow {
    justify-content: flex-start;
    width: 100%;
  }

  .navtoggle {
    display: block;
  }

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

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

  .signpanelrow .signpost {
    width: 100%;
    margin-top: 0;
  }

  .signpanelrow .signpanel {
    width: 100%;
  }

  .trenchbay h1 {
    font-size: 2.15rem;
  }

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

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

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

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

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

@media (prefers-reduced-motion: reduce) {
  .revealable {
    opacity: 1;
    transform: none;
    transition: none;
  }
}