/* Downshyft LLC - slope watch post shell */

:root {
  --centerview: #ECEFE3;
  --slope: #2A322E;
  --rockfall: #A45510;
  --westjordan: #1C221C;
  --boulder: #EEE4CE;
  --rebar: #8F9A8B;
  --scree: #5E6A78;
  --line: #C7CDBD;
  --line-soft: #D8DDCE;
  --panel-deep: #E2E7D7;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-size: 16px;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  background-color: #ECEFE3;
  color: #2A322E;
  line-height: 1.65;
  overflow-x: hidden;
}

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

p {
  margin: 0 0 1.1em;
}

a {
  color: #A45510;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: #1C221C;
}

img {
  max-width: 100%;
}

.shell {
  display: flex;
  min-height: 100vh;
  align-items: stretch;
}

/* ---------- ZONE SIDEBAR NAV ---------- */

.zonesidebarnav {
  flex: 0 0 230px;
  width: 230px;
  background-color: #1C221C;
  color: #ECEFE3;
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  padding: 30px 0 26px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #2A322E;
  z-index: 30;
}

.zonesidebarnav .brandline {
  padding: 0 22px 26px;
  border-bottom: 1px solid #333B33;
  margin-bottom: 18px;
}

.zonesidebarnav .brandglyph {
  display: block;
  width: 34px;
  height: 4px;
  background-color: #A45510;
  margin-bottom: 12px;
}

.zonesidebarnav .brandline a {
  color: #F2F4EA;
  text-decoration: none;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.01em;
  display: block;
}

.zonesidebarnav .brandline span {
  display: block;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #A9B2A2;
  margin-top: 7px;
  font-family: "Segoe UI", Arial, sans-serif;
}

.zonelinks {
  list-style: none;
  margin: 0;
  padding: 0 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.zonelinks li {
  margin: 0;
}

.zonelinks a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #DFE4D6;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid #3A433A;
  border-left: 3px solid #57614F;
  padding: 13px 13px;
  background-color: #232A22;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.zonelinks li:nth-child(1) a { padding-top: 18px; padding-bottom: 18px; }
.zonelinks li:nth-child(2) a { padding-top: 11px; padding-bottom: 11px; }
.zonelinks li:nth-child(3) a { padding-top: 15px; padding-bottom: 15px; }
.zonelinks li:nth-child(4) a { padding-top: 10px; padding-bottom: 10px; }
.zonelinks li:nth-child(5) a { padding-top: 17px; padding-bottom: 17px; }

.zonelinks a .zonetag {
  font-family: "Courier New", monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: #9AA48F;
}

.zonelinks a:hover,
.zonelinks a.active {
  background-color: #2C342B;
  border-left-color: #A45510;
  color: #FFFFFF;
}

.zonelinks a:hover .zonetag,
.zonelinks a.active .zonetag {
  color: #C98A4E;
}

.sidefoot {
  margin-top: auto;
  padding: 20px 22px 0;
  border-top: 1px solid #333B33;
  font-size: 11.5px;
  line-height: 1.7;
  color: #A9B2A2;
}

.sidefoot strong {
  display: block;
  color: #E6EADF;
  font-size: 12px;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.sidefoot a {
  color: #C98A4E;
  text-decoration: none;
}

.sidefoot a:hover {
  text-decoration: underline;
}

.navtoggle {
  display: none;
  position: absolute;
  top: 16px;
  right: 16px;
  background-color: #A45510;
  color: #FFF6EA;
  border: 0;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 10px 14px;
  cursor: pointer;
  font-family: "Segoe UI", Arial, sans-serif;
  z-index: 40;
}

/* ---------- MAIN COLUMN ---------- */

.column {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.wrapline {
  width: 100%;
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ---------- WATCH POST HERO ---------- */

.watchpost {
  padding: 62px 0 0;
  border-bottom: 1px solid #C7CDBD;
}

.watchpost .eyebrowline {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: "Courier New", monospace;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #5E6A78;
  margin-bottom: 26px;
}

.watchpost .eyebrowline::before {
  content: "";
  display: block;
  width: 46px;
  height: 2px;
  background-color: #A45510;
}

.watchpost h1 {
  font-size: clamp(38px, 6vw, 74px);
  line-height: 0.98;
  margin-bottom: 22px;
  max-width: 15ch;
}

.watchpost h1 .bigword {
  display: block;
  color: #A45510;
  font-size: clamp(64px, 12vw, 132px);
  letter-spacing: -0.035em;
  line-height: 0.86;
  margin-top: 8px;
}

.watchpost .ledepar {
  max-width: 62ch;
  font-size: 17.5px;
  line-height: 1.72;
  color: #2A322E;
  border-left: 3px solid #C7CDBD;
  padding-left: 20px;
  margin-bottom: 8px;
}

.watchpost .ledepar strong {
  font-weight: 700;
}

.inlinecta {
  display: inline-block;
  margin-top: 4px;
  font-weight: 700;
  color: #A45510;
  text-decoration: none;
  border-bottom: 2px solid #E0C3A2;
}

.inlinecta:hover {
  color: #1C221C;
  border-bottom-color: #A45510;
}

.inlinecta::after {
  content: "\2192";
  margin-left: 6px;
}

/* fall net diagram band */

.netband {
  margin: 36px 0 0;
  position: relative;
  height: 190px;
  background-color: #1C221C;
  border-top: 5px solid #A45510;
  overflow: hidden;
}

.netframe {
  position: absolute;
  inset: 12px 14px;
  border: 1px solid #5B6659;
}

.netlattice {
  position: absolute;
  inset: 12px 14px;
  background-image:
    repeating-linear-gradient(60deg, #3F4A3E 0 1px, #1C221C 1px 34px),
    repeating-linear-gradient(-60deg, #3F4A3E 0 1px, #1C221C 1px 34px);
}

.netrail {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 50%;
  height: 3px;
  background-color: #7C8577;
}

.netpost {
  position: absolute;
  top: 12px;
  bottom: 12px;
  width: 6px;
  background-color: #A45510;
}

.netpost.one { left: 14px; }
.netpost.two { left: calc(50% - 3px); background-color: #7C8577; }
.netpost.three { right: 14px; }

.debris {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 9px 6px 0 6px;
  border-color: #C98A4E transparent transparent transparent;
}

.debris.d-one { left: 22%; top: 34%; }
.debris.d-two { left: 48%; top: 52%; border-color: #A45510 transparent transparent transparent; }
.debris.d-three { left: 71%; top: 40%; border-color: #C98A4E transparent transparent transparent; }

.netplate {
  position: absolute;
  right: 26px;
  bottom: 14px;
  width: 42px;
  height: 42px;
  border: 2px solid #C98A4E;
  background-color: #2A322E;
}

.netplate::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background-color: #C98A4E;
  transform: translateX(-50%);
}

/* full-width primary cta bar */

.callbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background-color: #A45510;
  color: #FFF7EC;
  text-decoration: none;
  padding: 22px 40px;
  border-top: 1px solid #8C4610;
}

.callbar .calltext {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(19px, 2.4vw, 26px);
  font-weight: 700;
  letter-spacing: 0.005em;
}

.callbar .callarrow {
  font-size: 26px;
  line-height: 1;
  flex: 0 0 auto;
}

.callbar:hover {
  background-color: #1C221C;
  color: #FFF7EC;
}

/* ---------- GENERIC SECTIONS ---------- */

.block {
  padding: 66px 0;
}

.block.tone {
  background-color: #E6EADA;
}

.block.tone-b {
  background-color: #EEE4CE;
}

.block.crisp {
  background-color: #ECEFE3;
}

.blockhead {
  margin-bottom: 36px;
  max-width: 72ch;
}

.blockhead .kicker {
  font-family: "Courier New", monospace;
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #5E6A78;
  display: block;
  margin-bottom: 12px;
}

.blockhead h2 {
  font-size: clamp(28px, 3.6vw, 42px);
  margin-bottom: 14px;
}

.blockhead p {
  font-size: 16.5px;
  color: #2A322E;
}

/* essay columns */

.essay {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: start;
}

.essay .mainprose p {
  font-size: 16.5px;
  line-height: 1.78;
}

.essay .mainprose h3 {
  font-size: 23px;
  margin-top: 30px;
}

.sidecard {
  background-color: #EEE4CE;
  border-left: 5px solid #A45510;
  padding: 26px 26px 18px;
}

.sidecard h3 {
  font-size: 18px;
  letter-spacing: 0.02em;
  margin-bottom: 14px;
}

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

.sidecard li {
  padding: 11px 0;
  border-bottom: 1px solid #DCCFB4;
  font-size: 14.5px;
  line-height: 1.6;
}

.sidecard li:last-child {
  border-bottom: 0;
}

.sidecard li strong {
  display: block;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5E6A78;
  font-weight: 700;
  margin-bottom: 3px;
}

/* ---------- SENSOR LADDER ---------- */

.laddersection {
  position: relative;
}

.cornerflag {
  position: absolute;
  top: 0;
  right: 40px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 46px 46px;
  border-color: transparent transparent #A45510 transparent;
  pointer-events: none;
}

.cornerflag::before {
  content: "";
  position: absolute;
  left: -46px;
  top: 0;
  width: 46px;
  height: 3px;
  background-color: #A45510;
}

.sensorladder {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #C7CDBD;
}

.sensorladder > li {
  border-bottom: 1px solid #C7CDBD;
  position: relative;
  padding: 26px 0 26px 5px;
}

.sensorladder > li:nth-child(1) { padding-left: 0; }
.sensorladder > li:nth-child(2) { padding-left: 40px; }
.sensorladder > li:nth-child(3) { padding-left: 80px; }
.sensorladder > li:nth-child(4) { padding-left: 120px; }
.sensorladder > li:nth-child(5) { padding-left: 160px; }
.sensorladder > li:nth-child(6) { padding-left: 200px; }

.sensorladder .mark {
  font-family: "Courier New", monospace;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: #5E6A78;
  font-weight: 700;
  display: inline-block;
  margin-bottom: 6px;
  border-bottom: 1px solid #C7CDBD;
  padding-bottom: 3px;
  min-width: 26px;
}

.sensorladder h3 {
  font-size: clamp(20px, 2.6vw, 27px);
  margin-bottom: 8px;
}

.sensorladder h3 a {
  color: #2A322E;
  text-decoration: none;
}

.sensorladder h3 a:hover {
  color: #A45510;
}

.sensorladder p {
  max-width: 66ch;
  font-size: 15.5px;
  line-height: 1.72;
  margin: 0;
}

.prism {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}

.prism.p-a {
  border-width: 0 12px 21px 12px;
  border-color: transparent transparent #8F9A8B transparent;
  right: 0;
  top: 30px;
}

.prism.p-b {
  border-width: 0 7px 12px 7px;
  border-color: transparent transparent #5E6A78 transparent;
  right: 34px;
  top: 74px;
}

/* ---------- PROCESS STEPS ---------- */

.processrow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid #C7CDBD;
  background-color: #EEE4CE;
}

.processrow .ps {
  padding: 30px 26px;
  border-right: 1px solid #D5C9AE;
}

.processrow .ps:last-child {
  border-right: 0;
}

.processrow .pnum {
  font-family: "Courier New", monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: #A45510;
  font-weight: 700;
  display: block;
  margin-bottom: 12px;
}

.processrow h3 {
  font-size: 20px;
  margin-bottom: 8px;
}

.processrow p {
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
}

/* ---------- LEDGER TABLE ---------- */

.ledger {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  background-color: #ECEFE3;
  border: 1px solid #C7CDBD;
}

.ledger caption {
  text-align: left;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5E6A78;
  padding-bottom: 10px;
}

.ledger th,
.ledger td {
  text-align: left;
  padding: 13px 16px;
  border-bottom: 1px solid #C7CDBD;
  vertical-align: top;
}

.ledger thead th {
  background-color: #1C221C;
  color: #ECEFE3;
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 600;
}

.ledger tbody tr:nth-child(even) {
  background-color: #E6EADA;
}

.ledger td.zoned {
  font-family: "Courier New", monospace;
  color: #A45510;
  font-weight: 700;
  white-space: nowrap;
}

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

.faqlist {
  border-top: 1px solid #C7CDBD;
}

.faqitem {
  border-bottom: 1px solid #C7CDBD;
}

.faqq {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 20px 40px 20px 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
  color: #2A322E;
  cursor: pointer;
  position: relative;
  display: block;
}

.faqq::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 16px;
  font-size: 24px;
  color: #A45510;
  font-family: "Segoe UI", Arial, sans-serif;
}

.faqitem.open .faqq::after {
  content: "\2212";
}

.faqa {
  display: none;
  padding: 0 40px 20px 0;
  font-size: 15.5px;
  line-height: 1.75;
  max-width: 78ch;
}

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

/* ---------- CONTACT FORM ---------- */

.contactgrid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 50px;
  align-items: start;
}

.formfield {
  margin-bottom: 18px;
}

.formfield label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5E6A78;
  font-weight: 700;
  margin-bottom: 6px;
}

.formfield input,
.formfield textarea {
  width: 100%;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 15.5px;
  color: #2A322E;
  background-color: #F4F6EC;
  border: 1px solid #B9C1B0;
  padding: 12px 14px;
  border-radius: 0;
}

.formfield input:focus,
.formfield textarea:focus {
  outline: 2px solid #A45510;
  outline-offset: 0;
  border-color: #A45510;
}

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

.formsubmit {
  background-color: #A45510;
  color: #FFF7EC;
  border: 0;
  padding: 15px 34px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  cursor: pointer;
  letter-spacing: 0.01em;
}

.formsubmit:hover {
  background-color: #1C221C;
}

.formnote {
  font-size: 13px;
  color: #5E6A78;
  margin-top: 12px;
  line-height: 1.6;
}

.detailblock {
  background-color: #EEE4CE;
  border-top: 5px solid #A45510;
  padding: 26px;
}

.detailblock h3 {
  font-size: 19px;
  margin-bottom: 16px;
}

.detailblock dl {
  margin: 0;
}

.detailblock dt {
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #5E6A78;
  font-weight: 700;
  margin-top: 16px;
}

.detailblock dt:first-child {
  margin-top: 0;
}

.detailblock dd {
  margin: 3px 0 0;
  font-size: 15.5px;
  line-height: 1.6;
}

.detailblock dd a {
  color: #A45510;
}

/* ---------- STRAIGHT LINE FOOTER ---------- */

.straightfooter {
  margin-top: auto;
  background-color: #1C221C;
  color: #DCE1D3;
  padding: 26px 0 30px;
  border-top: 4px solid #A45510;
}

.straightfooter .frow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 14px;
  font-size: 14px;
  padding: 6px 0;
}

.straightfooter .frow:first-child {
  border-bottom: 1px solid #39413A;
  padding-bottom: 16px;
  margin-bottom: 8px;
}

.straightfooter .fbrand {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 16px;
  color: #F2F4EA;
  margin-right: 8px;
}

.straightfooter .fdot {
  color: #6E7869;
}

.straightfooter a {
  color: #E3D6C2;
  text-decoration: none;
}

.straightfooter a:hover {
  text-decoration: underline;
  color: #FFFFFF;
}

.straightfooter .fmeta {
  font-size: 12.5px;
  color: #B6BFAC;
  line-height: 1.7;
}

/* ---------- REVEAL ---------- */

.revealable {
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.revealable.prehide {
  opacity: 0;
  transform: translateY(16px);
}

.revealable.seen {
  opacity: 1;
  transform: none;
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 960px) {
  .shell {
    display: block;
  }

  .zonesidebarnav {
    position: relative;
    width: 100%;
    flex: none;
    height: auto;
    padding: 22px 0 18px;
    border-right: 0;
  }

  .navtoggle {
    display: block;
  }

  .zonesidebarnav .brandline {
    padding-right: 100px;
    padding-bottom: 16px;
    margin-bottom: 0;
    border-bottom: 0;
  }

  .zonelinks {
    display: none;
    padding-top: 14px;
  }

  .zonesidebarnav.navopen .zonelinks {
    display: flex;
  }

  .zonesidebarnav.navopen .brandline {
    border-bottom: 1px solid #333B33;
    margin-bottom: 12px;
  }

  .sidefoot {
    display: none;
  }

  .zonesidebarnav.navopen .sidefoot {
    display: block;
  }

  .wrapline {
    padding: 0 22px;
  }

  .watchpost {
    padding-top: 38px;
  }

  .essay,
  .contactgrid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

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

  .processrow .ps {
    border-right: 0;
    border-bottom: 1px solid #D5C9AE;
  }

  .processrow .ps:last-child {
    border-bottom: 0;
  }

  .sensorladder > li:nth-child(n) {
    padding-left: 0;
  }

  .sensorladder > li {
    padding-left: 48px;
  }

  .cornerflag {
    right: 22px;
  }

  .callbar {
    padding: 20px 22px;
  }

  .netband {
    height: 150px;
  }

  .prism {
    display: none;
  }
}

@media (max-width: 560px) {
  .watchpost h1 {
    font-size: 34px;
  }

  .watchpost h1 .bigword {
    font-size: 62px;
  }

  .straightfooter .frow {
    display: block;
  }

  .straightfooter .fdot {
    display: none;
  }

  .straightfooter a,
  .straightfooter .fbrand,
  .straightfooter .fmeta span {
    display: block;
    padding: 3px 0;
  }
}

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