/* ============================================================
   WILLSON GROUP LIMITED — Weather Observation Station
   LIGHT theme. All colors pre-blended solid hex. No opacity,
   no rgba, no gradients on text.
   Palette:
     cloud-field      #EDF2F5  body
     horizon-slate    #22323C  text
     gale-blue        #3D7EA6  accent
     shelter-deep     #1F3D4D  deepest panels
     instrument-cream #FBF9F1  raised louvre panels
     sunbreak-amber   #D98E2B  tertiary
     guy-wire         #A9BCC6  thin separators
   ============================================================ */

:root {
  --cloud-field: #EDF2F5;
  --horizon-slate: #22323C;
  --gale-blue: #3D7EA6;
  --gale-blue-dark: #2E6386;
  --shelter-deep: #1F3D4D;
  --instrument-cream: #FBF9F1;
  --sunbreak-amber: #D98E2B;
  --guy-wire: #A9BCC6;
  --cream-edge: #E4DCC8;
}

* {
  box-sizing: border-box;
}

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

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

h1, h2, h3, h4 {
  font-family: "Trebuchet MS", "Helvetica Neue", Arial, sans-serif;
  color: #22323C;
  line-height: 1.22;
  margin: 0 0 0.55em;
  letter-spacing: 0.2px;
}

p {
  margin: 0 0 1.05em;
}

a {
  color: #2E6386;
  text-decoration: none;
}

a:hover {
  color: #1F3D4D;
  text-decoration: underline;
}

/* ------------------------------------------------------------
   PENNANT LINE HEADER  .pennantline
   Taut wire between two tower posts, five pennant flags,
   cup-anemometer glyph at wire left, brand on a station plate.
   ------------------------------------------------------------ */
.pennantline {
  position: relative;
  background-color: #FBF9F1;
  background-image:
    repeating-linear-gradient(
      180deg,
      #FBF9F1 0px,
      #FBF9F1 26px,
      #F2EDDD 26px,
      #F2EDDD 28px
    );
  border-bottom: 3px solid #3D7EA6;
  padding: 14px 0 0;
  z-index: 60;
}

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

.plate-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 58px;
}

.stationplate {
  display: inline-block;
  background-color: #1F3D4D;
  color: #FBF9F1;
  border: 2px solid #A9BCC6;
  border-radius: 2px;
  padding: 8px 18px 7px;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-weight: bold;
  font-size: 1.32rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  box-shadow: inset 0 -3px 0 #142934;
}

.stationplate-sub {
  display: block;
  font-size: 0.58rem;
  letter-spacing: 3.5px;
  color: #D98E2B;
  font-weight: normal;
  margin-top: 2px;
}

.plate-meta {
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #3D7EA6;
  text-align: right;
  line-height: 1.5;
}

/* the taut wire itself + posts */
.pennantwire {
  position: relative;
  margin-top: 8px;
  height: 46px;
}

.wire-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 6px;
  height: 2px;
  background-color: #A9BCC6;
}

.wire-post {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 7px;
  background-color: #1F3D4D;
  border-left: 2px solid #A9BCC6;
  border-right: 2px solid #A9BCC6;
}

.wire-post-left { left: 0; }
.wire-post-right { right: 0; }

.wire-post::after {
  content: "";
  position: absolute;
  left: -6px;
  right: -6px;
  top: 24px;
  height: 7px;
  background-color: #3D7EA6;
}

/* cup-anemometer glyph at wire left end */
.wire-anemo {
  position: absolute;
  left: 12px;
  top: -2px;
  width: 34px;
  height: 30px;
  z-index: 3;
}

.anemo-mast {
  position: absolute;
  left: 16px;
  top: 8px;
  width: 2px;
  height: 20px;
  background-color: #1F3D4D;
}

.anemo-hub {
  position: absolute;
  left: 13px;
  top: 4px;
  width: 8px;
  height: 8px;
  background-color: #D98E2B;
  border-radius: 50%;
}

.anemo-cup {
  position: absolute;
  width: 8px;
  height: 8px;
  border: 2px solid #3D7EA6;
  border-radius: 50%;
}

.anemo-cup-a { left: 0; top: 6px; }
.anemo-cup-b { left: 26px; top: 6px; }
.anemo-cup-c { left: 13px; top: -2px; }

.anemo-flag {
  position: absolute;
  left: 12px;
  top: 26px;
  width: 12px;
  height: 5px;
  background-color: #D98E2B;
  clip-path: polygon(0 0, 100% 0, 76% 100%, 0 100%);
}

/* pennant flags */
.pennant-nav {
  position: absolute;
  left: 62px;
  right: 62px;
  top: 0;
  display: flex;
  gap: 8px;
}

.pennantlink {
  position: relative;
  flex: 1 1 0;
  display: block;
  padding: 6px 8px 10px;
  text-align: center;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-weight: bold;
  font-size: 0.82rem;
  letter-spacing: 1.4px;
  color: #22323C;
  background-color: #FBF9F1;
  border: 2px solid #3D7EA6;
  border-top: none;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  min-height: 40px;
  text-decoration: none;
}

.pennantlink:hover {
  background-color: #3D7EA6;
  color: #FBF9F1;
  text-decoration: none;
}

.pl-w1 { flex-grow: 1.0; margin-top: 0; }
.pl-w2 { flex-grow: 1.5; margin-top: 5px; }
.pl-w3 { flex-grow: 1.15; margin-top: 2px; }
.pl-w4 { flex-grow: 1.35; margin-top: 7px; }
.pl-w5 { flex-grow: 1.2; margin-top: 3px; }

.pennantlink.is-current {
  background-color: #1F3D4D;
  color: #FBF9F1;
  border-color: #1F3D4D;
}

.navtoggle {
  display: none;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-weight: bold;
  letter-spacing: 2px;
  font-size: 0.78rem;
  text-transform: uppercase;
  background-color: #1F3D4D;
  color: #FBF9F1;
  border: 2px solid #A9BCC6;
  padding: 8px 14px;
  cursor: pointer;
}

/* ------------------------------------------------------------
   Reveal utility (safe without js: default visible via noscript)
   ------------------------------------------------------------ */
.reveal {
  transition: transform 560ms ease, opacity 560ms ease;
}

.js-reveal-armed .reveal {
  transform: translateY(16px);
  opacity: 0;
}

.reveal.is-shown {
  transform: none;
  opacity: 1;
}

/* ------------------------------------------------------------
   HERO  OBSERVATION TOWER  .obstower
   ------------------------------------------------------------ */
.obstower {
  position: relative;
  background-color: #EDF2F5;
  border-bottom: 2px solid #A9BCC6;
  overflow-x: hidden;
}

.obstower-sky {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 240px;
  background-color: #E2EBF0;
  border-bottom: 1px solid #C4D2DA;
}

.obstower-cloudbank {
  position: absolute;
  bottom: 0;
  height: 46px;
  background-color: #D7E2E8;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

.cloud-a { left: -2%; width: 34%; height: 52px; }
.cloud-b { left: 26%; width: 30%; height: 38px; background-color: #E0E9EE; }
.cloud-c { left: 55%; width: 40%; height: 58px; }
.cloud-d { left: 84%; width: 22%; height: 34px; background-color: #E0E9EE; }

.obstower-inner {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
  padding: 54px 24px 64px;
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: 44px;
  align-items: center;
}

.obstower-copy h1 {
  font-size: 2.9rem;
  margin-bottom: 0.5em;
}

.obstower-copy h1 .hl {
  color: #3D7EA6;
}

.obstower-kicker {
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #3D7EA6;
  border-left: 4px solid #D98E2B;
  padding-left: 12px;
  margin-bottom: 16px;
}

.obstower-copy p {
  font-size: 1.06rem;
  max-width: 560px;
}

.obstower-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 22px;
}

.switchbtn {
  display: inline-block;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-weight: bold;
  font-size: 0.86rem;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding: 13px 22px;
  border: 2px solid #1F3D4D;
  background-color: #1F3D4D;
  color: #FBF9F1;
  border-radius: 3px;
  box-shadow: inset 0 -4px 0 #142934, 0 3px 0 #A9BCC6;
  text-decoration: none;
}

.switchbtn:hover {
  background-color: #3D7EA6;
  border-color: #3D7EA6;
  color: #FBF9F1;
  text-decoration: none;
}

.switchbtn.alt {
  background-color: #FBF9F1;
  color: #1F3D4D;
  border-color: #3D7EA6;
  box-shadow: inset 0 -4px 0 #E4DCC8, 0 3px 0 #A9BCC6;
}

.switchbtn.alt:hover {
  background-color: #3D7EA6;
  color: #FBF9F1;
}

/* -- the tower illustration -- */
.tower-scene {
  position: relative;
  height: 430px;
}

.groundline {
  position: absolute;
  left: -30px;
  right: -30px;
  bottom: 68px;
  height: 3px;
  background-color: #A9BCC6;
}

.ground-block {
  position: absolute;
  bottom: 52px;
  width: 34px;
  height: 18px;
  background-color: #1F3D4D;
  border: 2px solid #A9BCC6;
}

.gb-left { left: 30px; }
.gb-right { right: 30px; }

/* tower body */
.tower-mast {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 68px;
  width: 8px;
  height: 320px;
  background-color: #1F3D4D;
}

.tower-brace {
  position: absolute;
  height: 3px;
  background-color: #3D7EA6;
  transform-origin: left center;
}

.brace-1 { left: 50%; margin-left: -4px; bottom: 130px; width: 96px; transform: rotate(-30deg); }
.brace-2 { left: 50%; margin-left: -92px; bottom: 130px; width: 96px; transform: rotate(30deg); }
.brace-3 { left: 50%; margin-left: -4px; bottom: 220px; width: 70px; transform: rotate(-30deg); }
.brace-4 { left: 50%; margin-left: -66px; bottom: 220px; width: 70px; transform: rotate(30deg); }
.brace-5 { left: 50%; margin-left: -4px; bottom: 300px; width: 46px; transform: rotate(-32deg); }
.brace-6 { left: 50%; margin-left: -42px; bottom: 300px; width: 46px; transform: rotate(32deg); }

.tower-rung {
  position: absolute;
  height: 3px;
  background-color: #1F3D4D;
}

.rung-1 { left: 50%; margin-left: -44px; bottom: 150px; width: 88px; }
.rung-2 { left: 50%; margin-left: -30px; bottom: 240px; width: 60px; }
.rung-3 { left: 50%; margin-left: -18px; bottom: 320px; width: 36px; }

/* guy wires — two crossed */
.guywire {
  position: absolute;
  height: 2px;
  background-color: #A9BCC6;
  transform-origin: left center;
}

.guy-a {
  left: 30px;
  bottom: 70px;
  width: 148px;
  transform: rotate(-63deg);
}

.guy-b {
  right: 30px;
  bottom: 70px;
  width: 148px;
  transform: rotate(63deg);
  transform-origin: right center;
}

.guy-c {
  left: 30px;
  bottom: 70px;
  width: 250px;
  transform: rotate(-73deg);
}

/* masthead anemometer */
.tower-anemo {
  position: absolute;
  left: 50%;
  margin-left: -26px;
  bottom: 386px;
  width: 52px;
  height: 34px;
}

.ta-hub {
  position: absolute;
  left: 23px;
  top: 12px;
  width: 6px;
  height: 6px;
  background-color: #D98E2B;
  border-radius: 50%;
}

.ta-arm {
  position: absolute;
  left: 24px;
  top: 14px;
  width: 26px;
  height: 2px;
  background-color: #1F3D4D;
  transform-origin: left center;
}

.ta-arm.a2 { transform: rotate(120deg); }
.ta-arm.a3 { transform: rotate(240deg); }

.ta-cup {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 2px solid #3D7EA6;
  border-radius: 50%;
}

.tc1 { left: 40px; top: 4px; }
.tc2 { left: 6px; top: 22px; }
.tc3 { left: 6px; top: 2px; }

@keyframes cup-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spin-pack {
  position: absolute;
  left: 24px;
  top: 15px;
  width: 2px;
  height: 2px;
  animation: cup-spin 6s linear infinite;
}

.spin-pack .ta-cup {
  position: absolute;
}

.sp-1 { left: 14px; top: -6px; }
.sp-2 { left: -18px; top: 8px; }
.sp-3 { left: -14px; top: -14px; }

/* wind vane */
.windvane {
  position: absolute;
  left: 50%;
  margin-left: -22px;
  bottom: 352px;
  width: 44px;
  height: 26px;
}

.wv-post {
  position: absolute;
  left: 21px;
  top: 8px;
  width: 2px;
  height: 18px;
  background-color: #1F3D4D;
}

.wv-arrow {
  position: absolute;
  left: 0;
  top: 4px;
  width: 42px;
  height: 10px;
  background-color: #D98E2B;
  clip-path: polygon(0 50%, 16% 0, 16% 32%, 100% 32%, 100% 68%, 16% 68%, 16% 100%);
}

.wv-tail {
  position: absolute;
  left: 30px;
  top: 0;
  width: 12px;
  height: 18px;
  background-color: #3D7EA6;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* louvered instrument shelter on four legs */
.shelterbox {
  position: absolute;
  left: 4px;
  bottom: 52px;
  width: 132px;
}

.sb-body {
  position: relative;
  height: 86px;
  background-color: #FBF9F1;
  border: 2px solid #1F3D4D;
  border-radius: 3px 3px 2px 2px;
  overflow: hidden;
}

.sb-roof {
  position: absolute;
  left: -8px;
  right: -8px;
  top: -10px;
  height: 12px;
  background-color: #1F3D4D;
  clip-path: polygon(4% 100%, 96% 100%, 100% 0, 0 0);
}

.sb-slat {
  position: absolute;
  left: 6px;
  right: 6px;
  height: 3px;
  background-color: #A9BCC6;
}

.sb-s1 { top: 12px; }
.sb-s2 { top: 20px; }
.sb-s3 { top: 28px; }
.sb-s4 { top: 36px; }
.sb-s5 { top: 44px; }
.sb-s6 { top: 52px; }

.sb-door {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 6px;
  height: 22px;
  border: 2px solid #3D7EA6;
  background-color: #F2EDDD;
}

.sb-leg {
  position: absolute;
  bottom: -26px;
  width: 5px;
  height: 26px;
  background-color: #1F3D4D;
}

.sb-leg-1 { left: 14px; }
.sb-leg-2 { left: 34px; }
.sb-leg-3 { right: 34px; }
.sb-leg-4 { right: 14px; }

.sb-legfoot {
  position: absolute;
  bottom: -30px;
  left: 8px;
  right: 8px;
  height: 4px;
  background-color: #A9BCC6;
}

/* tipping-bucket rain gauge */
.raingauge {
  position: absolute;
  right: 6px;
  bottom: 52px;
  width: 46px;
}

.rg-funnel {
  position: relative;
  height: 20px;
  background-color: #3D7EA6;
  clip-path: polygon(0 0, 100% 0, 62% 100%, 38% 100%);
}

.rg-stem {
  width: 10px;
  height: 16px;
  margin: 0 auto;
  background-color: #1F3D4D;
}

.rg-base {
  width: 46px;
  height: 26px;
  background-color: #FBF9F1;
  border: 2px solid #1F3D4D;
  border-radius: 2px;
}

.rg-scale {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 6px;
  height: 3px;
  background-color: #D98E2B;
}

/* small station flag pennants on the mast */
.mast-pennant {
  position: absolute;
  width: 26px;
  height: 11px;
  clip-path: polygon(0 0, 100% 0, 70% 100%, 0 100%);
}

.mp-1 { left: 50%; margin-left: 4px; bottom: 330px; background-color: #D98E2B; }
.mp-2 { left: 50%; margin-left: 4px; bottom: 300px; background-color: #3D7EA6; }
.mp-3 { left: 50%; margin-left: 4px; bottom: 270px; background-color: #1F3D4D; }

/* ------------------------------------------------------------
   STATION LOG accent strip (sun-break amber)
   ------------------------------------------------------------ */
.stationlog {
  background-color: #D98E2B;
  border-top: 3px solid #B36F1A;
  border-bottom: 3px solid #B36F1A;
}

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

.stationlog-mark {
  flex: 0 0 auto;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-weight: bold;
  font-size: 0.72rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #1F3D4D;
  border: 2px solid #1F3D4D;
  padding: 6px 12px;
  border-radius: 2px;
}

.stationlog-text {
  color: #1F3D4D;
  font-size: 1.02rem;
  margin: 0;
  flex: 1 1 320px;
  font-weight: bold;
}

/* ------------------------------------------------------------
   Section headers (class-based)
   ------------------------------------------------------------ */
.fieldhead {
  max-width: 1180px;
  margin: 0 auto;
  padding: 56px 24px 8px;
}

.fieldhead-kicker {
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 0.74rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #3D7EA6;
  margin-bottom: 8px;
}

.fieldhead h2 {
  font-size: 2.05rem;
  margin-bottom: 0.35em;
}

.fieldhead-rule {
  width: 120px;
  height: 5px;
  background-color: #3D7EA6;
  margin: 0 0 16px;
  position: relative;
}

.fieldhead-rule::after {
  content: "";
  position: absolute;
  right: -14px;
  top: 0;
  width: 8px;
  height: 5px;
  background-color: #D98E2B;
}

.fieldhead-lede {
  max-width: 760px;
  font-size: 1.04rem;
}

/* ------------------------------------------------------------
   INSTRUMENT SHELTER ROW  .shelterrow
   Two staggered courses of louvered shelters. NOT a grid.
   ------------------------------------------------------------ */
.shelterrow {
  background-color: #EDF2F5;
  padding: 20px 0 66px;
  border-bottom: 2px solid #A9BCC6;
}

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

.shelter-course {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  align-items: flex-start;
}

.course-one {
  margin-bottom: 46px;
}

.course-two {
  padding-left: 28px;
  padding-right: 12px;
}

.contactform {
  margin-top: 18px;
}

.shelter {
  position: relative;
  background-color: #FBF9F1;
  border: 2px solid #1F3D4D;
  border-radius: 3px;
  padding: 0 0 20px;
  flex: 1 1 300px;
  box-shadow: 0 4px 0 #D4DDE2;
}

.shelter-slatband {
  height: 58px;
  background-color: #F2EDDD;
  border-bottom: 2px solid #1F3D4D;
  position: relative;
  overflow: hidden;
}

.slatline {
  position: absolute;
  left: 10px;
  right: 10px;
  height: 3px;
  background-color: #A9BCC6;
}

.sl-1 { top: 10px; }
.sl-2 { top: 19px; }
.sl-3 { top: 28px; }
.sl-4 { top: 37px; }
.sl-5 { top: 46px; }

.sh1 { transform: rotate(-1deg); margin-top: 0; flex-grow: 1.12; }
.sh2 { transform: rotate(0.4deg); margin-top: 30px; flex-grow: 0.95; }
.sh3 { transform: rotate(-0.6deg); margin-top: 12px; flex-grow: 1.2; }
.sh4 { transform: rotate(1deg); margin-top: 24px; flex-grow: 1.05; }
.sh5 { transform: rotate(-0.3deg); margin-top: 0; flex-grow: 0.9; }
.sh6 { transform: rotate(0.7deg); margin-top: 34px; flex-grow: 1.15; }

.shelter-plate {
  margin: -16px 14px 14px;
  background-color: #1F3D4D;
  color: #FBF9F1;
  border: 2px solid #A9BCC6;
  padding: 8px 12px;
  border-radius: 2px;
  position: relative;
  z-index: 2;
}

.shelter-plate h3 {
  color: #8FC4E0;
  font-size: 1.06rem;
  margin: 0;
  letter-spacing: 0.4px;
}

.shelter-body {
  padding: 0 18px;
}

.shelter-body p {
  font-size: 0.96rem;
  margin-bottom: 0.7em;
}

.stationcode {
  display: inline-block;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-weight: bold;
  font-size: 0.72rem;
  letter-spacing: 2px;
  color: #3D7EA6;
  border: 2px dashed #A9BCC6;
  padding: 3px 9px;
  border-radius: 2px;
}

.pointertab {
  position: absolute;
  top: -12px;
  right: 18px;
  background-color: #D98E2B;
  color: #1F3D4D;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-weight: bold;
  font-size: 0.66rem;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding: 4px 10px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%);
  padding-bottom: 9px;
}

.shelter-legs {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -18px;
  height: 18px;
}

.legbar {
  position: absolute;
  width: 5px;
  height: 18px;
  background-color: #1F3D4D;
}

.legbar.a { left: 18px; }
.legbar.b { right: 18px; }

/* ------------------------------------------------------------
   Reading / content bands on homepage
   ------------------------------------------------------------ */
.readingband {
  background-color: #FBF9F1;
  border-bottom: 2px solid #A9BCC6;
  padding: 60px 0;
}

.readingband-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 48px;
  align-items: start;
}

.readingband h2 {
  font-size: 1.9rem;
}

.gaugecard {
  background-color: #F2EDDD;
  border: 2px solid #1F3D4D;
  border-radius: 3px;
  padding: 22px 22px 18px;
  box-shadow: 0 4px 0 #D4DDE2;
}

.gaugecard h3 {
  font-size: 1.05rem;
  color: #1F3D4D;
  margin-bottom: 14px;
}

.gaugewrap {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid #A9BCC6;
}

.gaugewrap:first-of-type {
  border-top: none;
}

.gaugeglyph {
  flex: 0 0 62px;
  height: 8px;
  background-color: #A9BCC6;
  border-radius: 4px;
  position: relative;
}

.gaugeglyph span {
  position: absolute;
  left: 0;
  top: 0;
  height: 8px;
  border-radius: 4px;
  background-color: #3D7EA6;
}

.gg-1 span { width: 92%; }
.gg-2 span { width: 84%; }
.gg-3 span { width: 78%; }
.gg-4 span { width: 88%; }

.gaugeword {
  font-size: 0.9rem;
}

.gaugeword strong {
  display: block;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.5px;
  color: #1F3D4D;
}

/* counters row */
.counters {
  background-color: #E2EBF0;
  border-bottom: 2px solid #A9BCC6;
  padding: 46px 0;
}

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

.countpill {
  flex: 1 1 200px;
  background-color: #FBF9F1;
  border-left: 6px solid #3D7EA6;
  padding: 18px 20px;
  border-radius: 0 3px 3px 0;
  box-shadow: 0 3px 0 #CBD7DE;
}

.countpill .num {
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-weight: bold;
  font-size: 2rem;
  color: #3D7EA6;
  line-height: 1;
}

.countpill .lbl {
  font-size: 0.86rem;
  color: #22323C;
  margin-top: 6px;
  display: block;
}

/* process list — stadium of steps, not a dashed loop */
.procband {
  background-color: #EDF2F5;
  border-bottom: 2px solid #A9BCC6;
  padding: 60px 0;
}

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

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

.proclist li {
  position: relative;
  background-color: #FBF9F1;
  border: 2px solid #A9BCC6;
  border-left: 8px solid #1F3D4D;
  padding: 18px 22px 16px 70px;
  margin-bottom: 16px;
  border-radius: 3px;
}

.proclist li .stepno {
  position: absolute;
  left: 18px;
  top: 16px;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-weight: bold;
  font-size: 1.3rem;
  color: #3D7EA6;
}

.proclist li h3 {
  font-size: 1.06rem;
  margin-bottom: 0.35em;
}

.proclist li p {
  margin: 0;
  font-size: 0.96rem;
}

/* accordion */
.faqband {
  background-color: #FBF9F1;
  border-bottom: 2px solid #A9BCC6;
  padding: 60px 0;
}

.faqband-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
}

.acc {
  border: 2px solid #A9BCC6;
  border-radius: 3px;
  margin-bottom: 12px;
  background-color: #F2EDDD;
}

.acc-head {
  display: block;
  width: 100%;
  text-align: left;
  background-color: #F2EDDD;
  border: none;
  border-left: 6px solid #3D7EA6;
  padding: 15px 18px;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-weight: bold;
  font-size: 0.98rem;
  color: #1F3D4D;
  cursor: pointer;
}

.acc-head:hover {
  background-color: #E4DCC8;
}

.acc-body {
  display: none;
  padding: 4px 20px 18px;
  background-color: #FBF9F1;
  border-top: 1px solid #A9BCC6;
}

.acc.is-open .acc-body {
  display: block;
}

.acc-body p {
  font-size: 0.96rem;
  margin-bottom: 0.7em;
}

/* ------------------------------------------------------------
   FIELD BASE footer  .fieldbase
   ------------------------------------------------------------ */
.fieldbase {
  background-color: #1F3D4D;
  color: #FBF9F1;
  position: relative;
  padding: 0 0 0;
  border-top: 6px solid #3D7EA6;
}

.fieldbase-horizon {
  height: 42px;
  background-color: #16303D;
  border-bottom: 2px solid #A9BCC6;
  position: relative;
  overflow: hidden;
}

.fh-cloud {
  position: absolute;
  bottom: 0;
  background-color: #244B5D;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

.fh-1 { left: 4%; width: 22%; height: 24px; }
.fh-2 { left: 30%; width: 16%; height: 16px; }
.fh-3 { left: 62%; width: 26%; height: 28px; }
.fh-4 { left: 88%; width: 12%; height: 14px; }

.fieldbase-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 44px 24px 10px;
}

.guywire-links {
  position: relative;
  display: flex;
  gap: 30px;
  padding: 0 0 30px;
  flex-wrap: wrap;
}

.gw-post {
  width: 6px;
  align-self: stretch;
  background-color: #A9BCC6;
  border-radius: 2px;
}

.gw-group {
  flex: 1 1 180px;
  border-top: 2px solid #A9BCC6;
  padding-top: 12px;
}

.gw-group h4 {
  color: #8FC4E0;
  font-size: 0.78rem;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.gw-tag {
  display: inline-block;
  background-color: #2A4E60;
  border: 1px solid #A9BCC6;
  border-left: 4px solid #3D7EA6;
  color: #FBF9F1;
  font-size: 0.9rem;
  padding: 5px 12px;
  margin: 0 8px 8px 0;
  border-radius: 0 2px 2px 0;
  text-decoration: none;
}

.gw-tag:hover {
  background-color: #3D7EA6;
  color: #FBF9F1;
  text-decoration: none;
  border-left-color: #D98E2B;
}

.fieldbase-lower {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 34px;
  align-items: start;
  padding: 8px 0 26px;
  border-top: 1px solid #3A5E70;
}

.datacard {
  background-color: #16303D;
  border: 2px solid #A9BCC6;
  border-radius: 3px;
  padding: 20px 22px;
  position: relative;
}

.datacard h3 {
  color: #FBF9F1;
  font-size: 1.18rem;
  letter-spacing: 2px;
  margin-bottom: 10px;
}

.datacard p {
  color: #D6E2E8;
  font-size: 0.94rem;
}

.fb-anemo {
  position: absolute;
  right: 16px;
  top: 14px;
  width: 34px;
  height: 30px;
}

.fba-hub {
  position: absolute;
  left: 14px;
  top: 12px;
  width: 6px;
  height: 6px;
  background-color: #D98E2B;
  border-radius: 50%;
}

.fba-mast {
  position: absolute;
  left: 16px;
  top: 16px;
  width: 2px;
  height: 13px;
  background-color: #A9BCC6;
}

.fba-cup {
  position: absolute;
  width: 7px;
  height: 7px;
  border: 2px solid #8FC4E0;
  border-radius: 50%;
}

.fba-1 { left: 2px; top: 8px; }
.fba-2 { left: 24px; top: 8px; }
.fba-3 { left: 13px; top: 0; }

.fb-contact {
  font-size: 0.92rem;
  color: #D6E2E8;
}

.fb-contact strong {
  color: #FBF9F1;
  display: block;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 0.76rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 4px;
  color: #8FC4E0;
}

.fb-contact a {
  color: #D6E2E8;
}

.fb-contact a:hover {
  color: #FBF9F1;
}

.fb-block {
  margin-bottom: 16px;
}

.fieldbase-edge {
  background-color: #16303D;
  border-top: 2px solid #A9BCC6;
}

.fieldbase-edge-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px 24px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  position: relative;
}

.edge-cloud {
  display: inline-block;
  width: 46px;
  height: 12px;
  background-color: #2A4E60;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  margin-right: 10px;
}

.edge-line {
  font-size: 0.84rem;
  color: #C3D2DA;
  margin: 0;
}

.edge-links a {
  color: #C3D2DA;
  font-size: 0.84rem;
  margin-left: 14px;
}

.edge-links a:hover {
  color: #FBF9F1;
}

/* ------------------------------------------------------------
   Page hero for secondary pages (services / contact)
   ------------------------------------------------------------ */
.pagehero {
  position: relative;
  background-color: #E2EBF0;
  border-bottom: 2px solid #A9BCC6;
  padding: 50px 0 46px;
  overflow-x: hidden;
}

.pagehero-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 2;
}

.pagehero h1 {
  font-size: 2.5rem;
  margin-bottom: 0.4em;
}

.pagehero-lede {
  max-width: 780px;
  font-size: 1.05rem;
}

.pagehero-pennants {
  position: absolute;
  right: 24px;
  top: 16px;
  display: flex;
  gap: 6px;
  z-index: 1;
}

.php {
  width: 16px;
  height: 26px;
  background-color: #3D7EA6;
  clip-path: polygon(0 0, 100% 0, 62% 50%, 100% 100%, 0 100%);
}

.php:nth-child(2) { background-color: #D98E2B; height: 34px; }
.php:nth-child(3) { background-color: #1F3D4D; height: 22px; }
.php:nth-child(4) { background-color: #A9BCC6; height: 30px; }
.php:nth-child(5) { background-color: #3D7EA6; height: 20px; }

/* service detail blocks */
.svcband {
  background-color: #EDF2F5;
  border-bottom: 2px solid #A9BCC6;
  padding: 54px 0;
}

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

.svcblock {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 26px;
  background-color: #FBF9F1;
  border: 2px solid #A9BCC6;
  border-left: 8px solid #3D7EA6;
  border-radius: 3px;
  padding: 26px 28px;
  margin-bottom: 24px;
  box-shadow: 0 4px 0 #D4DDE2;
}

.svcblock:nth-child(even) {
  border-left-color: #1F3D4D;
}

.svcblock-code {
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-weight: bold;
  font-size: 1.6rem;
  color: #3D7EA6;
  border-right: 2px solid #A9BCC6;
  padding-right: 18px;
  line-height: 1.1;
  text-align: center;
}

.svcblock-code small {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 2px;
  color: #1F3D4D;
  margin-top: 6px;
}

.svcblock h2 {
  font-size: 1.42rem;
  margin-bottom: 0.4em;
}

.svcblock p {
  font-size: 0.98rem;
  margin-bottom: 0.7em;
}

.svc-tags {
  margin-top: 6px;
}

.svc-tag {
  display: inline-block;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #1F3D4D;
  background-color: #F2EDDD;
  border: 1px solid #A9BCC6;
  padding: 3px 10px;
  margin: 0 6px 6px 0;
  border-radius: 2px;
}

/* CTA band */
.ctaband {
  background-color: #1F3D4D;
  color: #FBF9F1;
  padding: 52px 0;
  border-top: 6px solid #3D7EA6;
  border-bottom: 6px solid #3D7EA6;
}

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

.ctaband h2 {
  color: #FBF9F1;
  font-size: 1.8rem;
  margin-bottom: 0.3em;
}

.ctaband p {
  color: #D6E2E8;
  margin: 0;
  max-width: 620px;
}

/* ------------------------------------------------------------
   Contact page
   ------------------------------------------------------------ */
.contactband {
  background-color: #EDF2F5;
  border-bottom: 2px solid #A9BCC6;
  padding: 54px 0;
}

.contactband-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 42px;
  align-items: start;
}

.formcard {
  background-color: #FBF9F1;
  border: 2px solid #A9BCC6;
  border-left: 8px solid #3D7EA6;
  border-radius: 3px;
  padding: 26px 28px;
  box-shadow: 0 4px 0 #D4DDE2;
}

.formcard h2 {
  font-size: 1.5rem;
}

.formrow {
  margin-bottom: 16px;
}

.formrow label {
  display: block;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #1F3D4D;
  margin-bottom: 6px;
}

.formrow input,
.formrow select,
.formrow textarea {
  width: 100%;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  color: #22323C;
  background-color: #F2EDDD;
  border: 2px solid #A9BCC6;
  border-radius: 3px;
  padding: 11px 12px;
}

.formrow input:focus,
.formrow select:focus,
.formrow textarea:focus {
  outline: none;
  border-color: #3D7EA6;
  background-color: #FBF9F1;
}

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

.formnote {
  font-size: 0.86rem;
  color: #1F3D4D;
  background-color: #F2EDDD;
  border-left: 4px solid #D98E2B;
  padding: 10px 14px;
  margin-top: 12px;
}

.formstatus {
  display: none;
  margin-top: 14px;
  font-size: 0.92rem;
  border: 2px solid #3D7EA6;
  background-color: #E2EBF0;
  color: #1F3D4D;
  padding: 11px 14px;
  border-radius: 3px;
}

.formstatus.is-shown {
  display: block;
}

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

.infocard {
  background-color: #F2EDDD;
  border: 2px solid #A9BCC6;
  border-radius: 3px;
  padding: 20px 22px;
}

.infocard h3 {
  font-size: 1.05rem;
  color: #1F3D4D;
  border-bottom: 2px solid #A9BCC6;
  padding-bottom: 8px;
  margin-bottom: 12px;
}

.infocard p {
  font-size: 0.94rem;
  margin-bottom: 0.6em;
}

.infocard a {
  font-weight: bold;
}

.hourrow {
  display: flex;
  justify-content: space-between;
  font-size: 0.92rem;
  padding: 7px 0;
  border-bottom: 1px solid #A9BCC6;
}

.hourrow:last-child {
  border-bottom: none;
}

.hourrow span:last-child {
  color: #1F3D4D;
  font-weight: bold;
}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width: 980px) {
  .obstower-inner {
    grid-template-columns: 1fr;
    padding-top: 40px;
  }

  .tower-scene {
    height: 400px;
  }

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

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

  .fieldbase-lower {
    grid-template-columns: 1fr;
  }
}

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

  .pennantwire {
    height: auto;
    padding-top: 46px;
  }

  .wire-line {
    top: 40px;
  }

  .pennant-nav {
    position: static;
    flex-wrap: wrap;
    left: auto;
    right: auto;
    gap: 8px;
    padding-bottom: 12px;
    display: none;
  }

  .pennant-nav.nav-open {
    display: flex;
  }

  .pennantlink {
    flex: 1 1 40%;
    clip-path: none;
    border-top: 2px solid #3D7EA6;
    border-radius: 2px;
    min-height: 34px;
    padding: 8px;
    margin-top: 0;
  }

  .wire-anemo {
    display: none;
  }

  .obstower-copy h1 {
    font-size: 2.1rem;
  }

  .pagehero h1 {
    font-size: 1.9rem;
  }

  .obstower-copy p,
  .pagehero-lede {
    font-size: 1rem;
  }

  .svcblock {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .svcblock-code {
    border-right: none;
    border-bottom: 2px solid #A9BCC6;
    padding-right: 0;
    padding-bottom: 10px;
    text-align: left;
  }
}

@media (max-width: 520px) {
  .plate-meta {
    text-align: left;
  }

  .tower-scene {
    height: 360px;
  }

  .countpill .num {
    font-size: 1.7rem;
  }
}