/* ==========================================================================
   PLRiverton, LLC — panoramiceng.autos
   Palette: exchange-maroon / cord-bone / brass-cord / switch-panel
   Motif: 1940s manual telephone exchange, rendered purely in CSS.
   ========================================================================== */

:root {
  --exchange-maroon: #231015;
  --cord-bone: #F2E7D4;
  --brass-cord: #CDA24C;
  --switch-panel: #331A20;
  --frame-deep: #150A0D;
  --answer-green: #74A383;
  --cord-seam: #4A2E30;
  --brass-dim: #8C6C34;
  --brass-glow: #E0C078;
  --well-shadow: #100608;
  --lamp-off: #1C0E12;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-size: 16px;
  margin: 0;
  padding: 0;
  background-color: #231015;
  color: #F2E7D4;
  font-family: Georgia, "Times New Roman", "Noto Serif", serif;
  line-height: 1.72;
  overflow-x: hidden;
}

img {
  max-width: 100%;
}

a {
  color: #CDA24C;
}

p {
  margin: 0 0 1.1em 0;
}

h1,
h2,
h3,
h4 {
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  letter-spacing: 0.015em;
  line-height: 1.22;
  margin: 0 0 0.6em 0;
}

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   1. JACK FIELD HEADER  (.jackfield)
   ========================================================================== */

.exchangehead {
  background-color: #150A0D;
  border-bottom: 4px solid #4A2E30;
  position: relative;
}

.nameplaterow {
  padding: 18px 0 8px 0;
}

.brandplate {
  display: inline-block;
  background-color: #331A20;
  border: 2px solid #CDA24C;
  border-radius: 3px;
  padding: 8px 22px 9px 22px;
  box-shadow: inset 0 0 0 1px #8C6C34, 0 3px 0 #100608;
  text-decoration: none;
}

.brandplate:hover {
  border-color: #E0C078;
}

.brandplate-mark {
  display: block;
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: 0.20em;
  color: #CDA24C;
  margin: 0;
}

.brandplate-sub {
  display: block;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.26em;
  color: #F2E7D4;
  margin: 3px 0 0 0;
}

.jackfield {
  background-color: #331A20;
  border-top: 2px solid #4A2E30;
  border-bottom: 2px solid #4A2E30;
  padding: 0;
  position: relative;
}

.jackfield-inner {
  padding: 14px 0 16px 0;
  position: relative;
}

.socketrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 5px 0;
}

.socketrow-a {
  padding-left: 8px;
}

.socketrow-b {
  padding-left: 54px;
  margin-top: 4px;
}

.jacksocket {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 50%;
  background-color: #150A0D;
  border: 3px solid #CDA24C;
  box-shadow: inset 0 0 0 3px #8C6C34, inset 0 0 0 6px #100608;
  position: relative;
}

.jacksocket::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background-color: #100608;
}

.jacksocket-empty {
  opacity: 1;
  border-color: #8C6C34;
}

.jacksocket-live::after {
  background-color: #74A383;
}

.jacklink {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  background-color: #231015;
  border: 1px solid #4A2E30;
  border-radius: 3px;
  padding: 5px 14px 5px 7px;
  margin: 0;
}

.jacklink:hover {
  border-color: #CDA24C;
  background-color: #2C1419;
}

.jacklink-socket {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 50%;
  background-color: #150A0D;
  border: 2px solid #CDA24C;
  box-shadow: inset 0 0 0 2px #100608;
  position: relative;
}

.jacklink-socket::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background-color: #74A383;
}

.jacklink-text {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #F2E7D4;
}

.jacklink:hover .jacklink-text {
  color: #E0C078;
}

.cordcurve {
  width: 150px;
  height: 46px;
  flex: 0 0 150px;
  position: relative;
  pointer-events: none;
}

.cordcurve::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 150px;
  height: 38px;
  border-bottom: 4px solid #CDA24C;
  border-left: 4px solid #CDA24C;
  border-right: 4px solid #CDA24C;
  border-radius: 0 0 60px 60px;
  box-shadow: 0 2px 0 #8C6C34;
}

.cordtip {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background-color: #CDA24C;
  position: absolute;
  box-shadow: 0 2px 0 #100608;
}

.cordtip-l {
  left: -8px;
  top: 0;
}

.cordtip-r {
  right: -8px;
  top: 0;
}

.jackfield-note {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  color: #F2E7D4;
  border-top: 1px solid #4A2E30;
  padding: 8px 0 0 0;
  margin: 8px 0 0 0;
  text-transform: uppercase;
}

.navtoggle {
  display: none;
  background-color: #331A20;
  color: #CDA24C;
  border: 2px solid #CDA24C;
  border-radius: 4px;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 9px 16px;
  cursor: pointer;
}

.navtoggle:hover {
  border-color: #E0C078;
  color: #E0C078;
}

/* ==========================================================================
   2. OPERATOR CONSOLE HERO  (.operatorconsole)
   ========================================================================== */

.operatorconsole {
  background-color: #231015;
  border-bottom: 4px solid #4A2E30;
  padding: 62px 0 66px 0;
  position: relative;
}

.operatorconsole-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 46px;
  align-items: center;
}

.console-copy {
  flex: 1 1 52%;
  max-width: 55%;
}

.console-standfirst {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.74rem;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: #74A383;
  margin: 0 0 16px 0;
  padding: 0 0 0 14px;
  border-left: 4px solid #74A383;
}

.console-headline {
  font-size: 2.72rem;
  color: #F2E7D4;
  margin: 0 0 20px 0;
}

.console-headline .headline-brass {
  color: #CDA24C;
}

.console-lede {
  font-size: 1.06rem;
  color: #F2E7D4;
  max-width: 44em;
  margin: 0 0 26px 0;
}

.console-lede a {
  color: #CDA24C;
  text-decoration: none;
  border-bottom: 2px solid #8C6C34;
}

.console-lede a:hover {
  border-bottom-color: #E0C078;
  color: #E0C078;
}

.consolestack {
  margin: 0 0 28px 0;
  border-top: 1px solid #4A2E30;
  border-bottom: 1px solid #4A2E30;
}

.consolestack-row {
  display: flex;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid #4A2E30;
  align-items: baseline;
}

.consolestack-row:last-child {
  border-bottom: 0;
}

.consolestack-key {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #74A383;
  flex: 0 0 150px;
}

.consolestack-val {
  font-size: 0.98rem;
  color: #F2E7D4;
}

.cordtipbuttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.cordtipbtn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  background-color: #CDA24C;
  color: #231015;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 13px 24px;
  border-radius: 30px;
  border: 3px solid #8C6C34;
  box-shadow: 0 4px 0 #100608;
}

.cordtipbtn:hover {
  background-color: #E0C078;
  border-color: #CDA24C;
}

.cordtipbtn-ghost {
  background-color: #331A20;
  color: #F2E7D4;
  border: 3px solid #CDA24C;
  box-shadow: 0 4px 0 #100608;
}

.cordtipbtn-ghost:hover {
  background-color: #4A2E30;
  color: #E0C078;
}

.cordtipbtn-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #231015;
  flex: 0 0 12px;
}

.cordtipbtn-ghost .cordtipbtn-dot {
  background-color: #74A383;
}

/* --- the console desk itself --- */

.console-desk {
  flex: 1 1 41%;
  max-width: 45%;
  background-color: #331A20;
  border: 3px solid #4A2E30;
  border-top: 5px solid #CDA24C;
  border-radius: 5px;
  padding: 20px 20px 24px 20px;
  box-shadow: 0 10px 0 #100608;
  position: relative;
}

.desk-label {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #F2E7D4;
  margin: 0 0 14px 0;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #4A2E30;
  padding-bottom: 8px;
}

.desk-label span {
  color: #74A383;
}

.desk-socketrow {
  display: flex;
  gap: 11px;
  flex-wrap: wrap;
  padding: 12px 12px;
  background-color: #231015;
  border: 2px solid #4A2E30;
  border-radius: 4px;
  margin: 0 0 6px 0;
}

.desk-socketrow .jacksocket {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-width: 2px;
}

.desk-cords {
  width: 100%;
  height: 62px;
  position: relative;
  margin: 4px 0 6px 0;
}

.desk-cord-a {
  position: absolute;
  left: 6%;
  top: 0;
  width: 210px;
  height: 52px;
  border-bottom: 5px solid #CDA24C;
  border-left: 5px solid #CDA24C;
  border-right: 5px solid #CDA24C;
  border-radius: 0 0 90px 90px;
  box-shadow: 0 3px 0 #8C6C34;
}

.desk-cord-b {
  position: absolute;
  left: 42%;
  top: 8px;
  width: 150px;
  height: 44px;
  border-bottom: 5px solid #CDA24C;
  border-left: 5px solid #CDA24C;
  border-right: 5px solid #CDA24C;
  border-radius: 0 0 70px 70px;
  box-shadow: 0 3px 0 #8C6C34;
}

.desk-cordtip {
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #CDA24C;
  box-shadow: 0 3px 0 #100608;
}

.desk-cordtip-a1 { left: 5%; top: -4px; }
.desk-cordtip-a2 { left: 5%; top: 47px; }
.desk-cordtip-b1 { left: 41%; top: 4px; }
.desk-cordtip-b2 { left: 41%; top: 45px; }

.desk-lamprow {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  background-color: #231015;
  border: 2px solid #4A2E30;
  border-radius: 4px;
  margin: 6px 0 18px 0;
}

.desk-lamp {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  flex: 0 0 15px;
  border: 2px solid #100608;
}

.lamp-lit {
  background-color: #74A383;
  box-shadow: 0 0 0 3px #2C4A38;
}

.lamp-dark {
  background-color: #1C0E12;
  box-shadow: inset 0 0 0 2px #100608;
}

.desk-lamp-caption {
  margin-left: auto;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #F2E7D4;
}

.desk-dialrow {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 12px 6px 12px;
  border-top: 1px solid #4A2E30;
}

.desk-dial {
  width: 128px;
  height: 128px;
  flex: 0 0 128px;
  border-radius: 50%;
  background-color: #150A0D;
  border: 7px solid #CDA24C;
  box-shadow: inset 0 0 0 5px #8C6C34, inset 0 0 0 9px #100608;
  position: relative;
}

.dial-hole {
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #231015;
  border: 2px solid #8C6C34;
}

.hole-1 { top: 14px; left: 56px; }
.hole-2 { top: 28px; left: 86px; }
.hole-3 { top: 56px; left: 101px; }
.hole-4 { top: 86px; left: 86px; }
.hole-5 { top: 99px; left: 56px; }
.hole-6 { top: 86px; left: 27px; }
.hole-7 { top: 56px; left: 12px; }
.hole-8 { top: 28px; left: 27px; }

.dial-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  background-color: #331A20;
  border: 3px solid #CDA24C;
}

.dial-stop {
  position: absolute;
  top: 4px;
  right: 30px;
  width: 8px;
  height: 26px;
  background-color: #CDA24C;
  border-radius: 3px;
  transform: rotate(24deg);
}

.desk-dialnote {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #F2E7D4;
}

.desk-dialnote strong {
  display: block;
  color: #CDA24C;
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  margin-bottom: 6px;
}

.desk-hook {
  position: relative;
  height: 26px;
  margin-top: 14px;
  border-top: 3px solid #4A2E30;
}

.desk-hook::before {
  content: "";
  position: absolute;
  right: 34px;
  top: -22px;
  width: 40px;
  height: 30px;
  border: 5px solid #CDA24C;
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
}

.desk-hook::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 0;
  width: 80px;
  height: 5px;
  background-color: #CDA24C;
  border-radius: 3px;
}

/* ==========================================================================
   3. SHARED BAND / SECTION FURNITURE
   ========================================================================== */

.band {
  padding: 58px 0;
}

.band-switchpanel {
  background-color: #331A20;
  border-top: 4px solid #4A2E30;
  border-bottom: 4px solid #4A2E30;
}

.band-deep {
  background-color: #150A0D;
  border-top: 4px solid #4A2E30;
  border-bottom: 4px solid #4A2E30;
}

.band-maroon {
  background-color: #231015;
}

.bandhead {
  margin: 0 0 34px 0;
  border-bottom: 2px solid #4A2E30;
  padding-bottom: 14px;
}

.bandhead-kicker {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #74A383;
  margin: 0 0 8px 0;
}

.bandhead-title {
  font-size: 2rem;
  color: #CDA24C;
  margin: 0 0 8px 0;
}

.bandhead-lede {
  font-size: 1rem;
  color: #F2E7D4;
  margin: 0;
  max-width: 62em;
}

/* ==========================================================================
   4. TRUNK LINE BOARD  (.trunkboard)
   ========================================================================== */

.trunkboard {
  background-color: #231015;
  padding: 58px 0 64px 0;
  border-bottom: 4px solid #4A2E30;
}

.trunkboard-courses {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.trunk-course {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  align-items: flex-start;
}

.trunksection {
  background-color: #331A20;
  border: 2px solid #4A2E30;
  border-left: 7px solid #CDA24C;
  border-radius: 3px;
  padding: 20px 22px 22px 22px;
  box-shadow: 0 6px 0 #100608;
  position: relative;
}

.trunksection-wide { flex: 1 1 40%; }
.trunksection-mid { flex: 1 1 30%; }
.trunksection-narrow { flex: 1 1 26%; }

.skew-left  { transform: rotate(-1deg); }
.skew-right { transform: rotate(1deg); }

.trunk-octave {
  margin-top: 26px;
}

.trunksection-sockets {
  display: flex;
  gap: 9px;
  margin: 0 0 15px 0;
  padding: 7px 10px;
  background-color: #231015;
  border: 1px solid #4A2E30;
  border-radius: 3px;
  width: fit-content;
}

.trunksection-sockets .jacksocket {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  border-width: 2px;
}

.trunksection-sockets .jacksocket::after {
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
}

.trunkplate {
  display: block;
  background-color: #150A0D;
  border: 1px solid #CDA24C;
  border-radius: 2px;
  padding: 6px 12px;
  margin: 0 0 13px 0;
}

.trunkplate-name {
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  font-size: 1.14rem;
  color: #CDA24C;
  letter-spacing: 0.03em;
  margin: 0;
}

.trunksection p {
  color: #F2E7D4;
  font-size: 0.96rem;
  margin: 0 0 0.9em 0;
}

.trunksection p:last-of-type {
  margin-bottom: 0;
}

.trunksection a {
  color: #CDA24C;
  text-decoration: none;
  border-bottom: 1px solid #8C6C34;
}

.trunksection a:hover {
  color: #E0C078;
  border-bottom-color: #E0C078;
}

.trunknumber {
  display: inline-block;
  margin-top: 14px;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #F2E7D4;
  border: 1px dashed #4A2E30;
  border-radius: 2px;
  padding: 4px 10px;
}

.busytab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  margin-left: 10px;
  background-color: #231015;
  border: 1px solid #74A383;
  border-radius: 2px;
  padding: 4px 10px;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #74A383;
}

.busytab-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: #74A383;
  flex: 0 0 9px;
}

/* ==========================================================================
   5. SWITCHBOARD HOURS STRIP  (.hoursstrip)
   ========================================================================== */

.hoursstrip {
  background-color: #CDA24C;
  border-top: 4px solid #8C6C34;
  border-bottom: 4px solid #8C6C34;
  padding: 22px 0;
}

.hoursstrip-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}

.hoursstrip-bell {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50% 50% 6px 6px;
  background-color: #231015;
  border: 3px solid #150A0D;
  position: relative;
}

.hoursstrip-bell::after {
  content: "";
  position: absolute;
  bottom: -9px;
  left: 50%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background-color: #231015;
  border: 2px solid #150A0D;
}

.hoursstrip-text {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.86rem;
  letter-spacing: 0.05em;
  color: #231015;
  margin: 0;
  font-weight: 700;
}

.hoursstrip-text strong {
  letter-spacing: 0.14em;
}

/* ==========================================================================
   6. FRAME ROOM FOOTER  (.frameroom)
   ========================================================================== */

.frameroom {
  background-color: #150A0D;
  border-top: 5px solid #4A2E30;
  padding: 0 0 0 0;
}

.framerails {
  max-width: 1180px;
  margin: 0 auto;
  padding: 42px 24px 26px 24px;
  display: flex;
  gap: 30px;
  align-items: stretch;
}

.framerail {
  flex: 0 0 44px;
  background-color: #331A20;
  border: 2px solid #4A2E30;
  border-radius: 3px;
  position: relative;
  min-height: 260px;
}

.framerail::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 50%;
  width: 4px;
  margin-left: -2px;
  background-color: #CDA24C;
  border-radius: 2px;
}

.framerail::after {
  content: "";
  position: absolute;
  top: 34px;
  left: 6px;
  right: 6px;
  height: 190px;
  background-image: repeating-linear-gradient(
    180deg,
    #4A2E30 0px,
    #4A2E30 4px,
    #150A0D 4px,
    #150A0D 13px
  );
  border-radius: 2px;
}

.framecore {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.cablelaces {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.cablelace {
  flex: 1 1 180px;
  border: 2px solid #4A2E30;
  border-radius: 3px;
  background-color: #231015;
  padding: 12px 14px;
  position: relative;
}

.cablelace::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 18px;
  right: 18px;
  height: 6px;
  background-color: #CDA24C;
  border-radius: 3px;
}

.cablelace::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 27px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #CDA24C;
}

.cablelace-title {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #74A383;
  margin: 8px 0 7px 0;
}

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

.cablelace-list li {
  margin: 0 0 4px 0;
}

.cablelace-list a {
  color: #F2E7D4;
  text-decoration: none;
  font-size: 0.92rem;
  border-bottom: 1px solid #4A2E30;
  display: inline-block;
  padding: 2px 0;
}

.cablelace-list a:hover {
  color: #CDA24C;
  border-bottom-color: #CDA24C;
}

.terminalblock {
  background-color: #331A20;
  border: 2px solid #4A2E30;
  border-left: 6px solid #CDA24C;
  border-radius: 3px;
  padding: 20px 22px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.terminalblock-bell {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 50% 50% 7px 7px;
  background-color: #CDA24C;
  border: 3px solid #8C6C34;
  position: relative;
}

.terminalblock-bell::after {
  content: "";
  position: absolute;
  bottom: -11px;
  left: 50%;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background-color: #CDA24C;
  border: 3px solid #8C6C34;
}

.terminalblock-copy {
  flex: 1 1 320px;
  min-width: 0;
}

.terminalblock-brand {
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  font-size: 1.3rem;
  letter-spacing: 0.14em;
  color: #CDA24C;
  margin: 0 0 8px 0;
}

.terminalblock-copy p {
  color: #F2E7D4;
  font-size: 0.94rem;
  margin: 0 0 0.7em 0;
}

.terminalblock-copy p:last-child {
  margin-bottom: 0;
}

.framebase {
  background-color: #100608;
  border-top: 3px solid #4A2E30;
  padding: 20px 0 22px 0;
}

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

.framebase-item {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  color: #F2E7D4;
}

.framebase-item a {
  color: #CDA24C;
  text-decoration: none;
  border-bottom: 1px solid #8C6C34;
}

.framebase-item a:hover {
  color: #E0C078;
  border-bottom-color: #E0C078;
}

.framebase-item strong {
  color: #74A383;
  letter-spacing: 0.18em;
}

.framebase-copy {
  margin-left: auto;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.72rem;
  color: #F2E7D4;
}

/* ==========================================================================
   7. CONTENT BLOCKS (services / contact / homepage prose)
   ========================================================================== */

.proseblock {
  max-width: 62em;
  color: #F2E7D4;
}

.proseblock p {
  font-size: 1rem;
}

.proseblock a {
  color: #CDA24C;
  text-decoration: none;
  border-bottom: 1px solid #8C6C34;
}

.proseblock a:hover {
  color: #E0C078;
}

.twocolnotes {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin-top: 12px;
}

.noteplate {
  flex: 1 1 320px;
  background-color: #331A20;
  border: 2px solid #4A2E30;
  border-top: 5px solid #CDA24C;
  border-radius: 3px;
  padding: 20px 22px;
}

.noteplate h3 {
  color: #CDA24C;
  font-size: 1.16rem;
  margin: 0 0 10px 0;
}

.noteplate p {
  color: #F2E7D4;
  font-size: 0.94rem;
  margin: 0 0 0.8em 0;
}

.noteplate p:last-child {
  margin-bottom: 0;
}

.servicerow {
  background-color: #331A20;
  border: 2px solid #4A2E30;
  border-left: 7px solid #CDA24C;
  border-radius: 3px;
  padding: 24px 26px;
  margin: 0 0 26px 0;
  box-shadow: 0 6px 0 #100608;
}

.servicerow-head {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: baseline;
  border-bottom: 1px solid #4A2E30;
  padding-bottom: 10px;
  margin-bottom: 14px;
}

.servicerow-num {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.76rem;
  letter-spacing: 0.24em;
  color: #74A383;
  text-transform: uppercase;
}

.servicerow-title {
  font-size: 1.4rem;
  color: #CDA24C;
  margin: 0;
  flex: 1 1 auto;
}

.servicerow p {
  color: #F2E7D4;
  font-size: 0.98rem;
}

.servicerow p:last-child {
  margin-bottom: 0;
}

.processrail {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 10px;
}

.processstep {
  flex: 1 1 180px;
  background-color: #150A0D;
  border: 2px solid #4A2E30;
  border-radius: 3px;
  padding: 18px 18px;
  position: relative;
}

.processstep::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background-color: #CDA24C;
  border-radius: 3px 3px 0 0;
}

.processstep-num {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  color: #74A383;
  text-transform: uppercase;
  display: block;
  margin: 8px 0 8px 0;
}

.processstep h3 {
  color: #CDA24C;
  font-size: 1.06rem;
  margin: 0 0 8px 0;
}

.processstep p {
  color: #F2E7D4;
  font-size: 0.9rem;
  margin: 0;
}

.ctaband {
  background-color: #331A20;
  border: 3px solid #CDA24C;
  border-radius: 4px;
  padding: 34px 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  box-shadow: 0 8px 0 #100608;
}

.ctaband-copy {
  flex: 1 1 340px;
}

.ctaband-copy h2 {
  color: #CDA24C;
  font-size: 1.7rem;
  margin: 0 0 10px 0;
}

.ctaband-copy p {
  color: #F2E7D4;
  margin: 0;
}

.ctaband-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

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

.contactgrid {
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  align-items: flex-start;
}

.contactpanel {
  flex: 1 1 380px;
  background-color: #331A20;
  border: 2px solid #4A2E30;
  border-top: 5px solid #CDA24C;
  border-radius: 4px;
  padding: 26px 26px;
}

.contactpanel h2 {
  color: #CDA24C;
  font-size: 1.5rem;
  margin: 0 0 8px 0;
}

.contactpanel p {
  color: #F2E7D4;
  font-size: 0.94rem;
}

.fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.field {
  display: flex;
  flex-direction: column;
  margin: 0 0 16px 0;
}

.field label {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #74A383;
  margin: 0 0 6px 0;
}

.field input,
.field select,
.field textarea {
  background-color: #150A0D;
  border: 2px solid #4A2E30;
  border-radius: 3px;
  color: #F2E7D4;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  padding: 11px 13px;
  width: 100%;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: #CDA24C;
  background-color: #1E0C10;
}

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

.formactions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.formnote {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.72rem;
  color: #F2E7D4;
  margin: 14px 0 0 0;
}

.formstatus {
  margin: 14px 0 0 0;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.8rem;
  color: #74A383;
  min-height: 1.2em;
}

.contactcards {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.contactcard {
  background-color: #150A0D;
  border: 2px solid #4A2E30;
  border-left: 6px solid #CDA24C;
  border-radius: 3px;
  padding: 20px 22px;
}

.contactcard h3 {
  color: #CDA24C;
  font-size: 1.1rem;
  margin: 0 0 10px 0;
}

.contactcard dl {
  margin: 0;
}

.contactcard dt {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #74A383;
  margin: 12px 0 3px 0;
}

.contactcard dt:first-of-type {
  margin-top: 0;
}

.contactcard dd {
  margin: 0;
  color: #F2E7D4;
  font-size: 0.96rem;
}

.contactcard dd a {
  color: #CDA24C;
  text-decoration: none;
  border-bottom: 1px solid #8C6C34;
}

.contactcard dd a:hover {
  color: #E0C078;
}

.hourstable {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

.hourstable th,
.hourstable td {
  text-align: left;
  font-size: 0.92rem;
  padding: 7px 0;
  border-bottom: 1px solid #4A2E30;
  color: #F2E7D4;
}

.hourstable th {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #74A383;
}

.hourstable tr:last-child td,
.hourstable tr:last-child th {
  border-bottom: 0;
}

.faqlist {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faqitem {
  background-color: #331A20;
  border: 2px solid #4A2E30;
  border-radius: 3px;
  overflow: hidden;
}

.faqq {
  width: 100%;
  text-align: left;
  background-color: #331A20;
  color: #F2E7D4;
  border: 0;
  cursor: pointer;
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  font-size: 1.08rem;
  padding: 18px 20px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
}

.faqq:hover {
  color: #CDA24C;
}

.faqq-marker {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #CDA24C;
  color: #CDA24C;
  font-family: "Courier New", Courier, monospace;
  font-size: 1rem;
  line-height: 22px;
  text-align: center;
}

.faqa {
  display: none;
  padding: 0 20px 20px 20px;
  border-top: 1px solid #4A2E30;
  margin: 0;
}

.faqa p {
  color: #F2E7D4;
  font-size: 0.96rem;
  margin: 14px 0 0 0;
}

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

.faqitem.is-open .faqq-marker {
  background-color: #CDA24C;
  color: #231015;
}

/* ==========================================================================
   8. SCROLL REVEAL (JS enhances; safe without JS)
   ========================================================================== */

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

.js-reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 620ms ease, transform 620ms ease;
}

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

/* ==========================================================================
   9. RESPONSIVE
   ========================================================================== */

@media (max-width: 980px) {
  .console-copy,
  .console-desk {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .console-headline {
    font-size: 2.2rem;
  }

  .trunksection-wide,
  .trunksection-mid,
  .trunksection-narrow {
    flex: 1 1 46%;
  }

  .skew-left,
  .skew-right {
    transform: none;
  }
}

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

  .jackfield-inner {
    display: none;
  }

  .jackfield-inner.is-open {
    display: block;
  }

  .socketrow-b {
    padding-left: 18px;
  }

  .cordcurve {
    display: none;
  }

  .console-headline {
    font-size: 1.9rem;
  }

  .trunksection-wide,
  .trunksection-mid,
  .trunksection-narrow {
    flex: 1 1 100%;
  }

  .framerails {
    flex-direction: column;
  }

  .framerail {
    display: none;
  }

  .framebase-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .framebase-copy {
    margin-left: 0;
  }

  .operatorconsole {
    padding: 44px 0 48px 0;
  }

  .band {
    padding: 44px 0;
  }
}