/* ==========================================================================
   Hong Kong Flexiv Robotics Technology Limited
   Workcell theme: cell-floor light, servo-orange accent, rail-graphite panels
   ========================================================================== */

:root {
  --cell-floor: #F1F2F0;
  --graphite-text: #23262A;
  --servo-orange: #D96C2F;
  --steel-brace: #E7E9E7;
  --rail-graphite: #313539;
  --joint-brass: #B08D46;
  --cable-grey: #9BA0A4;
  --plate-white: #FBFBFA;
  --deep-shadow: #1B1D20;
  --warn-yellow: #E9C43A;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

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

img {
  max-width: 100%;
}

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

a:hover {
  text-decoration: underline;
}

h1, h2, h3, h4 {
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  letter-spacing: 0.01em;
  color: #23262A;
}

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

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms ease, transform 700ms ease;
}

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

/* ==========================================================================
   NAVIGATION — TEACH PENDANT BAR
   ========================================================================== */

.pendantbar {
  background-color: #313539;
  border-bottom: 3px solid #D96C2F;
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 60;
  box-shadow: 0 4px 0 #1B1D20;
}

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

.pendant-grip {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 16px;
  background-color: #23262A;
  border: 1px solid #4A4F54;
  border-radius: 10px 10px 4px 4px;
  background-image: repeating-linear-gradient(
    90deg,
    #2B2F33 0px,
    #2B2F33 3px,
    #23262A 3px,
    #23262A 6px
  );
}

.pendant-brand {
  color: #F1F2F0;
  font-weight: 700;
  font-size: 1.06rem;
  letter-spacing: 0.14em;
  white-space: nowrap;
}

.pendant-brand span {
  color: #D96C2F;
}

.statusstack {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.statusstack i {
  display: block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid #1B1D20;
}

.statusstack .lamp-green {
  background-color: #3FA35B;
}

.statusstack .lamp-amber {
  background-color: #E0A32E;
}

.statusstack .lamp-red {
  background-color: #C93B2E;
}

.pendant-keys {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1 1 auto;
}

.pendant-key {
  display: block;
  background-color: #3C4146;
  border: 2px solid #555B61;
  border-top-color: #6A7178;
  border-radius: 5px;
  padding: 7px 15px 9px;
  color: #E7E9E7;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
  box-shadow: inset 0 1px 0 #6A7178, 0 2px 0 #1B1D20;
}

.pendant-key:hover {
  background-color: #474D53;
  text-decoration: none;
  color: #FBFBFA;
}

.pendant-key.is-active {
  border-color: #B08D46;
  box-shadow: inset 0 1px 0 #B08D46, 0 0 0 2px #D96C2F, 0 2px 0 #1B1D20;
  color: #FFFFFF;
}

.pendant-key::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 2px;
  height: 2px;
  background-color: #2A2E32;
}

.pendant-key.is-active::after {
  background-color: #D96C2F;
}

.estop {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background-color: #E9C43A;
  border: 3px solid #1B1D20;
  flex: 0 0 auto;
}

.estop-disc {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: #C93B2E;
  border: 3px solid #8F2A20;
  box-shadow: inset -3px -3px 0 #A52F23;
}

.pendant-tape {
  height: 5px;
  background-color: #D96C2F;
  background-image: repeating-linear-gradient(
    90deg,
    #D96C2F 0px,
    #D96C2F 26px,
    #313539 26px,
    #313539 34px
  );
}

.navtoggle {
  display: none;
  background-color: #3C4146;
  border: 2px solid #555B61;
  color: #F1F2F0;
  border-radius: 5px;
  padding: 9px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  cursor: pointer;
}

/* ==========================================================================
   HERO — ARM AND RAIL STAGE
   ========================================================================== */

.armrail {
  background-color: #F1F2F0;
  border-bottom: 1px solid #9BA0A4;
  padding: 62px 0 70px;
  position: relative;
  overflow: hidden;
}

.armrail-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: 40px;
  align-items: center;
}

.armrail-copy {
  max-width: 640px;
}

.armrail-eyebrow {
  display: inline-block;
  background-color: #313539;
  color: #E7E9E7;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-left: 5px solid #D96C2F;
  margin-bottom: 22px;
}

.armrail-title {
  font-size: 3.05rem;
  line-height: 1.08;
  margin: 0 0 20px;
  font-weight: 800;
  color: #23262A;
}

.armrail-title .accent {
  color: #D96C2F;
}

.armrail-lede {
  font-size: 1.1rem;
  color: #313539;
  margin: 0 0 30px;
  max-width: 590px;
}

.modekeys {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.modekey {
  display: inline-block;
  padding: 15px 26px 16px;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 6px;
  text-decoration: none;
  border: 2px solid #23262A;
  box-shadow: 0 4px 0 #1B1D20;
  position: relative;
}

.modekey-primary {
  background-color: #D96C2F;
  color: #FFFFFF;
  border-color: #A34E1D;
  box-shadow: 0 4px 0 #8F3F14;
}

.modekey-primary:hover {
  background-color: #C25C22;
  text-decoration: none;
  color: #FFFFFF;
}

.modekey-second {
  background-color: #E7E9E7;
  color: #23262A;
}

.modekey-second:hover {
  background-color: #D6D9D6;
  text-decoration: none;
}

/* ---------- CSS Robot arm scene ---------- */

.armrail-scene {
  position: relative;
  min-height: 470px;
  display: block;
}

.railbed {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 48px;
  height: 18px;
  background-color: #313539;
  border-radius: 4px;
  border-bottom: 4px solid #1B1D20;
}

.railtrack {
  position: absolute;
  left: 6px;
  right: 6px;
  top: 6px;
  height: 4px;
  background-color: #9BA0A4;
}

.carriage {
  position: absolute;
  top: -9px;
  width: 44px;
  height: 34px;
  background-color: #B08D46;
  border: 2px solid #8A6C33;
  border-radius: 4px;
}

.carriage::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 8px;
  height: 4px;
  background-color: #6E5426;
}

.carriage-a {
  left: 8%;
}

.carriage-b {
  right: 10%;
}

.arm-pad {
  position: absolute;
  left: 14%;
  bottom: 62px;
  width: 190px;
  height: 34px;
  background-color: #F1F2F0;
  border: 3px dashed #D96C2F;
  border-radius: 3px;
}

.arm-base {
  position: absolute;
  left: 22%;
  bottom: 90px;
  width: 74px;
  height: 60px;
  background-color: #313539;
  border: 3px solid #1B1D20;
  border-radius: 8px 8px 3px 3px;
}

.arm-base::before {
  content: "";
  position: absolute;
  left: -12px;
  bottom: -4px;
  right: -12px;
  height: 12px;
  background-color: #23262A;
  border-radius: 3px;
}

.arm-link1 {
  position: absolute;
  left: 27.4%;
  bottom: 142px;
  width: 26px;
  height: 150px;
  background-color: #D96C2F;
  border: 3px solid #A34E1D;
  border-radius: 12px;
  transform: rotate(11deg);
  transform-origin: bottom center;
}

.arm-link2 {
  position: absolute;
  left: 35.6%;
  bottom: 268px;
  width: 23px;
  height: 132px;
  background-color: #D96C2F;
  border: 3px solid #A34E1D;
  border-radius: 11px;
  transform: rotate(-38deg);
  transform-origin: bottom center;
}

.jointdisc {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #E7E9E7;
  border: 5px solid #B08D46;
}

.joint-disc-a {
  left: 26.4%;
  bottom: 132px;
}

.joint-disc-b {
  left: 34.4%;
  bottom: 262px;
}

.wrist {
  position: absolute;
  left: 47%;
  bottom: 338px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #E7E9E7;
  border: 5px solid #B08D46;
}

.gripper {
  position: absolute;
  left: 44%;
  bottom: 366px;
  width: 62px;
  height: 44px;
  background-color: #313539;
  border: 3px solid #1B1D20;
  border-radius: 6px;
}

.gripper-finger {
  position: absolute;
  top: -22px;
  width: 9px;
  height: 26px;
  background-color: #9BA0A4;
  border: 2px solid #6E7377;
  border-radius: 2px;
}

.gripper-finger.left {
  left: 8px;
}

.gripper-finger.right {
  right: 8px;
}

.gripper-pad {
  position: absolute;
  top: -6px;
  width: 9px;
  height: 7px;
  background-color: #B08D46;
}

.gripper-pad.left {
  left: 8px;
}

.gripper-pad.right {
  right: 8px;
}

.steelcube {
  position: absolute;
  left: 54%;
  bottom: 394px;
  width: 26px;
  height: 26px;
  background-color: #9BA0A4;
  border: 3px solid #6E7377;
  border-radius: 2px;
}

.pendant-glyph {
  position: absolute;
  right: 6%;
  bottom: 88px;
  width: 62px;
  height: 84px;
  background-color: #313539;
  border: 3px solid #1B1D20;
  border-radius: 8px;
  padding: 6px;
}

.pendant-screen {
  height: 26px;
  background-color: #4A5A4E;
  border: 2px solid #23262A;
  border-radius: 2px;
  margin-bottom: 7px;
}

.pendant-mushroom {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #C93B2E;
  border: 3px solid #E9C43A;
  margin: 0 auto;
}

/* ==========================================================================
   SECTION SHELLS
   ========================================================================== */

.band-head {
  padding: 55px 0 8px;
}

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

.band-kicker {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #D96C2F;
  border-bottom: 3px solid #D96C2F;
  padding-bottom: 5px;
  margin-bottom: 16px;
}

.band-title {
  font-size: 2.15rem;
  margin: 0 0 14px;
  font-weight: 800;
}

.band-intro {
  max-width: 780px;
  font-size: 1.04rem;
  color: #313539;
  margin: 0 0 8px;
}

/* ---------- STATION ROW ---------- */

.stationband {
  background-color: #E7E9E7;
  border-top: 1px solid #9BA0A4;
  border-bottom: 1px solid #9BA0A4;
  padding: 50px 0 64px;
}

.stationrow {
  max-width: 1180px;
  margin: 0 auto;
  padding: 30px 24px 0;
  display: flex;
  flex-direction: column;
  gap: 46px;
}

.stationcourse {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}

.stationcourse-second {
  margin-left: 6.5%;
  margin-right: -3%;
}

.station {
  background-color: #FBFBFA;
  border: 3px solid #313539;
  border-radius: 5px;
  padding: 0 0 22px;
  position: relative;
  overflow: hidden;
}

.station-mesh {
  height: 38px;
  background-color: #313539;
  background-image: repeating-linear-gradient(
      45deg,
      #4A4F54 0px,
      #4A4F54 2px,
      #313539 2px,
      #313539 8px
    ),
    repeating-linear-gradient(
      -45deg,
      #4A4F54 0px,
      #4A4F54 2px,
      #313539 2px,
      #313539 8px
    );
  border-bottom: 3px solid #D96C2F;
}

.station-interlock {
  position: absolute;
  top: 46px;
  right: 14px;
  width: 20px;
  height: 27px;
  background-color: #E9C43A;
  border: 2px solid #23262A;
  border-radius: 3px;
}

.station-interlock::after {
  content: "";
  position: absolute;
  left: 7px;
  top: -12px;
  width: 4px;
  height: 12px;
  background-color: #9BA0A4;
}

.station-nameplate {
  display: inline-block;
  margin: 20px 0 0 20px;
  background-color: #23262A;
  color: #F1F2F0;
  padding: 10px 16px;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  border-left: 5px solid #D96C2F;
  max-width: calc(100% - 40px);
}

.station-axis {
  display: inline-block;
  margin: 12px 0 0 20px;
  background-color: #D96C2F;
  color: #FFFFFF;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  padding: 5px 12px;
  border-radius: 3px;
}

.station-text {
  margin: 12px 20px 0;
  color: #313539;
  font-size: 0.95rem;
}

.station-gripper {
  position: absolute;
  top: 52px;
  left: 16px;
  width: 24px;
  height: 16px;
  border-radius: 2px;
  background-color: #9BA0A4;
}

.station-gripper::before,
.station-gripper::after {
  content: "";
  position: absolute;
  top: -8px;
  width: 4px;
  height: 10px;
  background-color: #B08D46;
}

.station-gripper::before {
  left: 3px;
}

.station-gripper::after {
  right: 3px;
}

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

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

.station-link {
  display: inline-block;
  margin: 14px 20px 0;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #D96C2F;
  border-bottom: 2px solid #D96C2F;
}

.station-link:hover {
  color: #A34E1D;
  border-color: #A34E1D;
  text-decoration: none;
}

/* ---------- INTEGRATION CYCLE STRIP ---------- */

.cyclestrip {
  background-color: #313539;
  color: #F1F2F0;
  padding: 34px 0;
  border-top: 6px solid #D96C2F;
  border-bottom: 6px solid #D96C2F;
}

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

.cyclestrip-badge {
  flex: 0 0 auto;
  background-color: #D96C2F;
  color: #FFFFFF;
  font-weight: 800;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 10px 16px;
  border-radius: 4px;
}

.cyclestrip-text {
  margin: 0;
  font-size: 1.1rem;
  flex: 1 1 420px;
  color: #F1F2F0;
}

/* ---------- CONTENT BANDS ---------- */

.proseband {
  padding: 56px 0 60px;
  background-color: #F1F2F0;
}

.proseband-alt {
  background-color: #E7E9E7;
  border-top: 1px solid #9BA0A4;
  border-bottom: 1px solid #9BA0A4;
}

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

.splitband {
  display: grid;
  grid-template-columns: minmax(min-content, 1.25fr) minmax(min-content, 1fr);
  gap: 42px;
  align-items: start;
}

.splitband h2 {
  font-size: 1.9rem;
  margin: 0 0 14px;
}

.splitband p {
  color: #313539;
  margin: 0 0 16px;
}

.platefact {
  background-color: #313539;
  color: #F1F2F0;
  border-left: 7px solid #B08D46;
  padding: 24px 26px;
  border-radius: 4px;
}

.platefact h3 {
  color: #F1F2F0;
  margin: 0 0 14px;
  font-size: 1.15rem;
  letter-spacing: 0.05em;
}

.platefact ul {
  margin: 0;
  padding: 0 0 0 18px;
}

.platefact li {
  margin-bottom: 10px;
  color: #E7E9E7;
  font-size: 0.94rem;
}

.railrule {
  height: 10px;
  background-color: #313539;
  border-top: 3px solid #D96C2F;
  border-bottom: 3px solid #D96C2F;
}

/* ---------- PROCESS LADDER ---------- */

.processrow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  margin-top: 26px;
}

.procstep {
  background-color: #FBFBFA;
  border: 2px solid #313539;
  border-radius: 5px;
  padding: 22px 24px 22px 74px;
  position: relative;
}

.procstep-num {
  position: absolute;
  left: 20px;
  top: 22px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: #D96C2F;
  color: #FFFFFF;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  border: 3px solid #A34E1D;
}

.procstep h3 {
  margin: 0 0 8px;
  font-size: 1.08rem;
}

.procstep p {
  margin: 0;
  font-size: 0.93rem;
  color: #313539;
}

/* ---------- SERVICE DETAIL PAGE ---------- */

.servicedetail {
  background-color: #FBFBFA;
  border: 3px solid #313539;
  border-radius: 5px;
  padding: 0 0 26px;
  margin-bottom: 34px;
  overflow: hidden;
}

.servicedetail-mesh {
  height: 30px;
  background-color: #313539;
  background-image: repeating-linear-gradient(
    90deg,
    #4A4F54 0px,
    #4A4F54 2px,
    #313539 2px,
    #313539 9px
  );
  border-bottom: 3px solid #D96C2F;
}

.servicedetail-head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
  padding: 22px 26px 0;
}

.servicedetail-head h2 {
  margin: 0;
  font-size: 1.6rem;
}

.servicedetail-axis {
  background-color: #D96C2F;
  color: #FFFFFF;
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  padding: 6px 13px;
  border-radius: 3px;
}

.servicedetail-body {
  padding: 0 26px;
  color: #313539;
}

.servicedetail-body p {
  margin: 0 0 15px;
}

/* ---------- CTA BAND ---------- */

.ctaband {
  background-color: #D96C2F;
  color: #FFFFFF;
  padding: 52px 0;
  border-top: 6px solid #313539;
  border-bottom: 6px solid #313539;
}

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

.ctaband h2 {
  color: #FFFFFF;
  margin: 0 0 8px;
  font-size: 1.8rem;
}

.ctaband p {
  margin: 0;
  max-width: 640px;
  color: #FFFFFF;
  font-size: 1.02rem;
}

.ctaband .modekey {
  background-color: #23262A;
  color: #F1F2F0;
  border-color: #1B1D20;
  box-shadow: 0 4px 0 #14161A;
  white-space: nowrap;
}

.ctaband .modekey:hover {
  background-color: #313539;
  text-decoration: none;
  color: #FFFFFF;
}

/* ---------- CONTACT PAGE ---------- */

.contactgrid {
  display: grid;
  grid-template-columns: minmax(min-content, 1.15fr) minmax(min-content, 1fr);
  gap: 40px;
  align-items: start;
}

.formpanel {
  background-color: #FBFBFA;
  border: 3px solid #313539;
  border-radius: 5px;
  padding: 28px;
}

.formpanel h2 {
  margin: 0 0 18px;
  font-size: 1.5rem;
}

.field {
  margin-bottom: 18px;
}

.field label {
  display: block;
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 7px;
  color: #23262A;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid #9BA0A4;
  border-radius: 4px;
  background-color: #FFFFFF;
  color: #23262A;
  font-size: 0.96rem;
  font-family: inherit;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: #D96C2F;
  box-shadow: 0 0 0 3px #E7E9E7;
}

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

.formsubmit {
  display: inline-block;
  background-color: #D96C2F;
  color: #FFFFFF;
  border: 2px solid #A34E1D;
  border-bottom-width: 5px;
  border-radius: 5px;
  padding: 14px 30px;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.formsubmit:hover {
  background-color: #C25C22;
}

.formnote {
  margin: 14px 0 0;
  font-size: 0.85rem;
  color: #313539;
}

.formstatus {
  margin: 16px 0 0;
  padding: 12px 14px;
  border: 2px solid #B08D46;
  background-color: #E7E9E7;
  color: #23262A;
  border-radius: 4px;
  font-size: 0.92rem;
}

.contactcard {
  background-color: #313539;
  color: #F1F2F0;
  border-radius: 5px;
  border-top: 7px solid #D96C2F;
  padding: 26px;
  margin-bottom: 26px;
}

.contactcard h3 {
  color: #F1F2F0;
  margin: 0 0 14px;
  font-size: 1.18rem;
}

.contactcard p {
  margin: 0 0 12px;
  color: #E7E9E7;
}

.contactcard a {
  color: #E9C43A;
}

.contactcard .hourseal {
  display: inline-block;
  background-color: #B08D46;
  color: #23262A;
  font-weight: 800;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 3px;
  margin-bottom: 12px;
}

.faqitem {
  border: 2px solid #9BA0A4;
  border-radius: 4px;
  background-color: #FBFBFA;
  margin-bottom: 14px;
  overflow: hidden;
}

.faqq {
  width: 100%;
  text-align: left;
  background-color: #E7E9E7;
  border: 0;
  padding: 16px 18px;
  font-size: 1rem;
  font-weight: 700;
  color: #23262A;
  cursor: pointer;
  font-family: inherit;
}

.faqq::before {
  content: "+  ";
  color: #D96C2F;
  font-weight: 800;
}

.faqitem.is-open .faqq::before {
  content: "-  ";
}

.faqa {
  display: none;
  padding: 16px 18px 18px;
  color: #313539;
  font-size: 0.94rem;
}

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

/* ---------- TEAM / FACT ROWS ---------- */

.factrow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 26px;
}

.factplate {
  background-color: #FBFBFA;
  border: 2px solid #313539;
  border-top: 6px solid #B08D46;
  border-radius: 4px;
  padding: 22px;
}

.factplate h3 {
  margin: 0 0 10px;
  font-size: 1.05rem;
}

.factplate p {
  margin: 0;
  font-size: 0.93rem;
  color: #313539;
}

/* ==========================================================================
   FOOTER — CONTROLLER CABINET BASE
   ========================================================================== */

.cabinetbase {
  background-color: #23262A;
  color: #E7E9E7;
  border-top: 8px solid #313539;
  padding-top: 0;
}

.cableduct {
  background-color: #1B1D20;
  padding: 16px 0;
  border-bottom: 2px solid #313539;
}

.cableduct-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cableline {
  height: 5px;
  border-radius: 3px;
}

.cable-one {
  background-color: #D96C2F;
  width: 74%;
}

.cable-two {
  background-color: #B08D46;
  width: 52%;
  margin-left: 14%;
}

.cable-three {
  background-color: #9BA0A4;
  width: 63%;
  margin-left: 7%;
}

.cabinetmain {
  max-width: 1180px;
  margin: 0 auto;
  padding: 38px 24px 30px;
  display: grid;
  grid-template-columns: minmax(min-content, 1.3fr) minmax(min-content, 1fr) minmax(min-content, 1fr) minmax(min-content, 1fr);
  gap: 32px;
}

.cabinetplate {
  background-color: #313539;
  border-left: 6px solid #D96C2F;
  padding: 20px 22px;
  border-radius: 4px;
}

.cabinetplate h3 {
  color: #F1F2F0;
  margin: 0 0 12px;
  font-size: 1.1rem;
  letter-spacing: 0.06em;
}

.cabinetplate p {
  margin: 0 0 14px;
  font-size: 0.92rem;
  color: #E7E9E7;
}

.modekeyswitch {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.modekeyswitch .keyslot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #23262A;
  border: 4px solid #9BA0A4;
  position: relative;
}

.modekeyswitch .keyslot::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 2px;
  width: 4px;
  height: 12px;
  background-color: #B08D46;
}

.modekeyswitch span {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9BA0A4;
}

.cablinkgroup h4 {
  color: #B08D46;
  margin: 0 0 12px;
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-bottom: 2px solid #3C4146;
  padding-bottom: 8px;
}

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

.cablinkgroup li {
  margin-bottom: 9px;
  padding-left: 18px;
  position: relative;
}

.cablinkgroup li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 10px;
  height: 3px;
  background-color: #D96C2F;
}

.cablinkgroup a {
  color: #E7E9E7;
  font-size: 0.94rem;
}

.cablinkgroup a:hover {
  color: #D96C2F;
  text-decoration: none;
}

.cabinetplinth {
  background-color: #1B1D20;
  border-top: 3px solid #313539;
  padding: 22px 0;
}

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

.plinth-meta {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 0.88rem;
  color: #9BA0A4;
}

.plinth-meta a {
  color: #E7E9E7;
}

.plinth-meta a:hover {
  color: #D96C2F;
}

.plinth-copy {
  font-size: 0.86rem;
  color: #9BA0A4;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.plinth-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.plinth-stack i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: block;
}

.plinth-stack .lamp-green {
  background-color: #3FA35B;
}

.plinth-stack .lamp-amber {
  background-color: #E0A32E;
}

.plinth-stack .lamp-red {
  background-color: #C93B2E;
}

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

@media (max-width: 980px) {
  .armrail-inner {
    grid-template-columns: 1fr;
  }
  .armrail-scene {
    min-height: 420px;
  }
  .armrail-title {
    font-size: 2.3rem;
  }
  .stationcourse {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stationcourse-second {
    margin-left: 0;
    margin-right: 0;
  }
  .splitband,
  .contactgrid {
    grid-template-columns: 1fr;
  }
  .cabinetmain {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .factrow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .pendantbar-inner {
    gap: 10px;
  }
  .navtoggle {
    display: block;
  }
  .pendant-keys {
    display: none;
    width: 100%;
    grid-template-columns: 1fr 1fr;
  }
  .pendant-keys.is-open {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .pendant-key {
    text-align: center;
    padding: 11px 8px 13px;
  }
  .armrail-title {
    font-size: 1.85rem;
  }
  .stationcourse {
    grid-template-columns: 1fr;
  }
  .stationcourse-second {
    margin-left: 0;
    margin-right: 0;
  }
  .processrow,
  .factrow {
    grid-template-columns: 1fr;
  }
  .cabinetmain {
    grid-template-columns: 1fr;
  }
  .estop {
    width: 48px;
    height: 48px;
  }
  .estop-disc {
    width: 28px;
    height: 28px;
  }
  .cyclestrip-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  html {
    scroll-behavior: auto;
  }
}