/* NEC Networks control room wall stylesheet */

:root{
  --payaleb:#F0F4E6;
  --screen:#2C3830;
  --integblue:#1B7182;
  --nesic:#1C2620;
  --consolepanel:#D6DCD4;
  --relay:#B47667;
  --wiring:#94B0B0;
  --rule:#C4CDBF;
  --rule-dark:#3A4A42;
  --face-ink:#EDF2E4;
  --panel-line:#B8C1B3;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-size:16px;
  font-family:Georgia, "Times New Roman", serif;
  background:var(--payaleb);
  color:var(--screen);
  line-height:1.65;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:"Helvetica Neue", Arial, sans-serif;
  font-weight:700;
  letter-spacing:-0.01em;
  color:var(--screen);
  margin:0 0 0.5em;
}

p{
  margin:0 0 1em;
}

a{
  color:var(--integblue);
  text-decoration:none;
}

a:hover{
  text-decoration:underline;
}

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

/* ---------- CONSOLE ROW NAV ---------- */
.consolerow{
  background:var(--payaleb);
  padding:26px 24px 0;
}

.consolerow-inner{
  max-width:1160px;
  margin:0 auto;
}

.consolerow-desk{
  display:flex;
  align-items:flex-end;
  gap:14px;
  flex-wrap:wrap;
  background:var(--consolepanel);
  border:2px solid var(--rule);
  border-bottom:8px solid var(--nesic);
  border-radius:6px 6px 0 0;
  padding:18px 18px 12px;
}

.consolerow-screen{
  background:var(--nesic);
  border:3px solid var(--rule-dark);
  border-radius:3px;
  padding:0;
  display:flex;
  box-shadow:inset 0 0 0 1px var(--rule-dark);
}

.consolerow-screen a{
  display:block;
  padding:9px 16px 10px;
  font-family:"Helvetica Neue", Arial, sans-serif;
  font-size:15px;
  letter-spacing:0.02em;
  color:var(--face-ink);
  text-decoration:none;
  border-bottom:2px solid transparent;
}

.consolerow-screen a:hover{
  border-bottom-color:var(--wiring);
}

.consolerow-screen:nth-of-type(1) a{width:88px;text-align:center;}
.consolerow-screen:nth-of-type(2) a{width:118px;}
.consolerow-screen:nth-of-type(3) a{width:106px;text-align:center;}
.consolerow-screen:nth-of-type(4) a{width:96px;}
.consolerow-screen:nth-of-type(5) a{width:100px;text-align:center;}

.consolerow-screen:nth-of-type(1){align-self:flex-end;}
.consolerow-screen:nth-of-type(2){align-self:flex-start;margin-bottom:6px;}
.consolerow-screen:nth-of-type(3){align-self:flex-end;}
.consolerow-screen:nth-of-type(4){align-self:flex-start;margin-bottom:10px;}
.consolerow-screen:nth-of-type(5){align-self:flex-end;}

.consolerow-screen.is-live{
  border-color:var(--integblue);
}

.consolerow-screen.is-live a{
  color:var(--face-ink);
  border-bottom:2px solid var(--integblue);
  background:var(--integblue);
}

.consolerow-nameplate{
  margin-left:auto;
  font-family:"Helvetica Neue", Arial, sans-serif;
  font-size:12.5px;
  line-height:1.25;
  color:var(--nesic);
  background:var(--payaleb);
  border:1px solid var(--panel-line);
  border-radius:2px;
  padding:6px 12px;
  max-width:340px;
  text-align:right;
}

.consolerow-toggle{
  display:none;
  margin-left:auto;
  background:var(--nesic);
  color:var(--face-ink);
  border:2px solid var(--rule-dark);
  border-radius:3px;
  font-family:"Helvetica Neue", Arial, sans-serif;
  font-size:14px;
  padding:8px 14px;
  cursor:pointer;
}

/* ---------- MIMIC BOARD HERO ---------- */
.mimicboard{
  padding:52px 24px 64px;
  background:var(--payaleb);
}

.mimicboard-inner{
  max-width:1160px;
  margin:0 auto;
  display:grid;
  grid-template-columns:56% 44%;
  gap:40px;
  align-items:center;
}

.mimicboard-copy .eyebrow{
  font-family:"Helvetica Neue", Arial, sans-serif;
  font-size:13px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--integblue);
  margin-bottom:18px;
  font-weight:700;
}

.mimicboard-copy h1{
  font-size:44px;
  line-height:1.1;
  margin-bottom:14px;
}

.mimicboard-display{
  display:block;
  font-size:78px;
  line-height:0.92;
  font-family:"Helvetica Neue", Arial, sans-serif;
  font-weight:800;
  letter-spacing:-0.03em;
  color:var(--integblue);
}

.mimicboard-copy .lead{
  font-size:17px;
  color:var(--screen);
  margin-top:20px;
  max-width:52ch;
}

.mimicboard-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--integblue);
  color:var(--face-ink);
  text-decoration:none;
  padding:16px 22px;
  margin-top:8px;
  font-family:"Helvetica Neue", Arial, sans-serif;
  font-weight:700;
  font-size:16px;
  border-radius:2px;
  width:100%;
}

.mimicboard-bar:hover{
  text-decoration:none;
  background:var(--nesic);
}

.mimicboard-bar .arrow{
  font-size:22px;
}

.mimicboard-inline{
  font-weight:700;
  text-decoration:underline;
  color:var(--integblue);
}

/* the CSS mimic board device */
.mimicboard-wall{
  position:relative;
  background:var(--consolepanel);
  border:10px solid var(--nesic);
  border-radius:4px;
  padding:26px 22px 18px;
  min-height:420px;
}

.mimicboard-wall::before{
  content:"";
  position:absolute;
  top:16px;
  left:22px;
  right:22px;
  height:3px;
  background:var(--rule);
}

.mimicboard-clock{
  position:absolute;
  top:-2px;
  left:50%;
  transform:translateX(-50%);
  width:64px;
  height:64px;
  border-radius:50%;
  background:var(--payaleb);
  border:4px solid var(--nesic);
  z-index:2;
}

.mimicboard-clock::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:2px;
  height:22px;
  background:var(--screen);
  transform-origin:bottom center;
  transform:translate(-50%,-100%) rotate(32deg);
}

.mimicboard-clock::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:2px;
  height:15px;
  background:var(--integblue);
  transform-origin:bottom center;
  transform:translate(-50%,-100%) rotate(112deg);
}

.mimicboard-tiles{
  display:flex;
  gap:8px;
  margin-top:34px;
  margin-bottom:22px;
}

.mimicboard-tile{
  flex:1;
  height:26px;
  border-radius:2px;
  background:var(--nesic);
  border:2px solid var(--rule-dark);
}

.mimicboard-tile.t-on{
  background:var(--integblue);
  box-shadow:inset 0 0 0 2px var(--wiring);
}

.mimicboard-tile.t-warn{
  background:var(--relay);
}

.mimicboard-tile.t-idle{
  background:var(--consolepanel);
}

.mimicboard-schematic{
  position:relative;
  height:250px;
  border:2px solid var(--rule);
  background:var(--payaleb);
  border-radius:2px;
  margin-bottom:16px;
}

.mimicboard-node{
  position:absolute;
  width:44px;
  height:26px;
  background:var(--nesic);
  border:2px solid var(--wiring);
  border-radius:2px;
}

.mimicboard-node.n-a{top:24px;left:26px;}
.mimicboard-node.n-b{top:24px;right:26px;}
.mimicboard-node.n-c{bottom:24px;left:78px;}
.mimicboard-node.n-d{bottom:24px;right:78px;}
.mimicboard-node.n-e{top:112px;left:50%;transform:translateX(-50%);background:var(--integblue);}

.mimicboard-line{
  position:absolute;
  background:var(--integblue);
}

.mimicboard-line.l-h1{top:37px;left:70px;right:70px;height:2px;}
.mimicboard-line.l-v1{top:50px;left:48px;width:2px;height:98px;}
.mimicboard-line.l-v2{top:50px;right:48px;width:2px;height:98px;}
.mimicboard-line.l-h2{top:150px;left:100px;right:100px;height:2px;}
.mimicboard-line.l-v3{bottom:50px;left:100px;width:2px;height:76px;}
.mimicboard-line.l-v4{bottom:50px;right:100px;width:2px;height:76px;}

.mimicboard-log{
  background:var(--nesic);
  color:var(--face-ink);
  font-family:"Courier New", monospace;
  font-size:12.5px;
  padding:8px 12px;
  border-radius:2px;
  line-height:1.5;
}

.mimicboard-log span{
  color:var(--wiring);
}

/* ---------- INTEGRATION SHEET ROWS ---------- */
.integrationsheet{
  background:var(--nesic);
  padding:64px 24px 72px;
  color:var(--face-ink);
}

.integrationsheet-head{
  max-width:1160px;
  margin:0 auto 34px;
}

.integrationsheet-head h2{
  color:var(--face-ink);
  font-size:34px;
}

.integrationsheet-head p{
  color:var(--face-ink);
  max-width:70ch;
}

.integrationsheet-rail{
  max-width:1160px;
  margin:0 auto;
  background:var(--consolepanel);
  border-left:10px solid var(--integblue);
  border-radius:3px;
  padding:28px 26px;
}

.integrationsheet-row{
  display:flex;
  gap:18px;
  align-items:stretch;
  margin-bottom:18px;
  flex-wrap:wrap;
}

.integrationsheet-row:last-child{
  margin-bottom:0;
}

.integrationsheet-sheet{
  background:var(--payaleb);
  border:2px solid var(--panel-line);
  border-top:5px solid var(--integblue);
  border-radius:2px;
  padding:16px 18px 18px;
  position:relative;
}

.integrationsheet-sheet.w1{flex:1 1 200px;}
.integrationsheet-sheet.w2{flex:1 1 260px;}
.integrationsheet-sheet.w3{flex:1 1 180px;}
.integrationsheet-sheet.w4{flex:1 1 300px;}
.integrationsheet-sheet.w5{flex:1 1 220px;}
.integrationsheet-sheet.w6{flex:1 1 180px;}

.integrationsheet-sheet h3{
  font-size:18px;
  margin-bottom:8px;
}

.integrationsheet-sheet h3 a{
  color:var(--integblue);
}

.integrationsheet-sheet p{
  font-size:15px;
  margin:0 0 12px;
  color:var(--screen);
}

.integrationsheet-mark{
  font-family:"Courier New", monospace;
  font-size:13px;
  letter-spacing:0.2em;
  color:var(--wiring);
  text-transform:uppercase;
  font-weight:700;
}

/* ---------- ANNUNCIATOR BAND ---------- */
.annunciatorband{
  background:var(--nesic);
  padding:0 24px;
}

.annunciatorband-inner{
  max-width:1160px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:30px;
  padding:26px 0;
}

.annunciatorband-tiles{
  display:flex;
  gap:8px;
  flex-shrink:0;
}

.annunciatorband-tile{
  width:44px;
  height:44px;
  background:var(--consolepanel);
  border:2px solid var(--rule-dark);
  border-radius:2px;
}

.annunciatorband-tile.a-on{
  background:var(--integblue);
}

.annunciatorband-tile.a-warn{
  background:var(--relay);
}

.annunciatorband-tile.a-idle{
  background:var(--consolepanel);
}

.annunciatorband p{
  margin:0;
  color:var(--payaleb);
  font-size:16px;
  max-width:70ch;
}

/* ---------- CONTENT SECTIONS ---------- */
.section{
  padding:64px 24px;
}

.section-alt{
  background:var(--consolepanel);
}

.section-head{
  max-width:1160px;
  margin:0 auto 30px;
}

.section-head h2{
  font-size:32px;
}

.section-head p{
  max-width:72ch;
}

.prose-block{
  max-width:1160px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:38px;
}

.prose-block p{
  font-size:16px;
}

.prose-block h3{
  margin-top:0;
  font-size:20px;
  color:var(--integblue);
}

.pull{
  border-left:5px solid var(--integblue);
  padding:6px 0 6px 20px;
  margin:24px auto;
  max-width:1160px;
  font-size:19px;
  font-style:italic;
  color:var(--screen);
}

.link-list{
  list-style:none;
  padding:0;
  margin:0 0 1em;
  max-width:1160px;
}

.link-list li{
  padding:10px 0;
  border-bottom:1px solid var(--rule);
}

.link-list a{
  font-weight:700;
  font-family:"Helvetica Neue", Arial, sans-serif;
  font-size:15px;
}

.link-list span{
  display:block;
  font-size:15px;
  color:var(--screen);
}

/* ---------- CABLE TRAY FOOTER ---------- */
.cabletray{
  background:var(--nesic);
  color:var(--face-ink);
  padding:0;
}

.cabletray-tray{
  position:relative;
  height:54px;
  background:var(--consolepanel);
  border-bottom:4px solid var(--nesic);
  overflow:hidden;
}

.cabletray-bundle{
  position:absolute;
  top:14px;
  height:6px;
  background:var(--integblue);
  border-radius:3px;
}

.cabletray-bundle.b1{left:0;width:34%;}
.cabletray-bundle.b2{left:36%;width:22%;top:20px;background:var(--wiring);}
.cabletray-bundle.b3{left:60%;width:18%;top:12px;}
.cabletray-bundle.b4{left:80%;width:20%;top:26px;background:var(--relay);transform:rotate(4deg);transform-origin:left center;}

.cabletray-drop{
  position:absolute;
  right:12%;
  top:20px;
  width:4px;
  height:34px;
  background:var(--wiring);
}

.cabletray-rack{
  position:absolute;
  right:9%;
  bottom:0;
  width:34px;
  height:26px;
  background:var(--nesic);
  border:2px solid var(--wiring);
  border-radius:2px;
}

.cabletray-tie{
  position:absolute;
  right:calc(12% - 7px);
  top:38px;
  width:18px;
  height:12px;
  border:2px solid var(--relay);
  border-radius:50%;
  transform:rotate(-18deg);
}

.cabletray-body{
  max-width:1160px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.7fr 1fr;
  gap:48px;
  padding:46px 24px 30px;
}

.cabletray-brand{
  font-family:"Helvetica Neue", Arial, sans-serif;
  font-size:19px;
  font-weight:700;
  color:var(--face-ink);
  margin-bottom:10px;
  line-height:1.35;
}

.cabletray-blurb{
  color:var(--face-ink);
  font-size:15px;
  max-width:56ch;
  margin-bottom:18px;
}

.cabletray-lines{
  font-size:15px;
  line-height:1.9;
  color:var(--face-ink);
}

.cabletray-lines a{
  color:var(--face-ink);
  border-bottom:1px solid var(--wiring);
}

.cabletray-links{
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:flex-start;
  padding-top:4px;
}

.cabletray-links a{
  color:var(--face-ink);
  font-family:"Helvetica Neue", Arial, sans-serif;
  font-size:15px;
}

.cabletray-links a:hover{
  text-decoration:underline;
}

.cabletray-base{
  border-top:1px solid var(--rule-dark);
}

.cabletray-base-inner{
  max-width:1160px;
  margin:0 auto;
  padding:16px 24px;
  font-size:14px;
  color:var(--face-ink);
  font-family:"Helvetica Neue", Arial, sans-serif;
}

.cabletray-glyph{
  display:inline-block;
  width:9px;
  height:9px;
  border:2px solid var(--relay);
  border-radius:50%;
  margin-right:8px;
  vertical-align:middle;
}

/* ---------- SHARED SECONDARY PAGE PARTS ---------- */
.pagehead{
  padding:48px 24px 28px;
  background:var(--payaleb);
}

.pagehead-inner{
  max-width:1160px;
  margin:0 auto;
}

.pagehead h1{
  font-size:38px;
  margin-bottom:10px;
}

.pagehead p{
  max-width:70ch;
  font-size:17px;
}

.pagehead .eyebrow{
  font-family:"Helvetica Neue", Arial, sans-serif;
  font-size:13px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--integblue);
  margin-bottom:14px;
  font-weight:700;
}

.service-entry{
  max-width:1160px;
  margin:0 auto 34px;
  border-top:1px solid var(--rule);
  padding-top:24px;
}

.service-entry h2{
  font-size:24px;
  color:var(--integblue);
}

.service-entry p{
  max-width:80ch;
}

.process-list{
  max-width:1160px;
  margin:0 auto;
  counter-reset:step;
  list-style:none;
  padding:0;
}

.process-list li{
  position:relative;
  padding:0 0 22px 58px;
  max-width:76ch;
}

.process-list li::before{
  counter-increment:step;
  content:counter(step);
  position:absolute;
  left:0;
  top:0;
  width:38px;
  height:38px;
  background:var(--integblue);
  color:var(--face-ink);
  font-family:"Helvetica Neue", Arial, sans-serif;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:2px;
}

.process-list li h3{
  font-size:18px;
  margin-bottom:6px;
}

.cta-strip{
  max-width:1160px;
  margin:0 auto;
  background:var(--integblue);
  color:var(--face-ink);
  padding:30px 32px;
  border-radius:3px;
}

.cta-strip h2{
  color:var(--face-ink);
  font-size:26px;
  margin-bottom:10px;
}

.cta-strip p{
  color:var(--face-ink);
  max-width:66ch;
}

.cta-strip a{
  display:inline-block;
  background:var(--nesic);
  color:var(--face-ink);
  padding:12px 22px;
  font-family:"Helvetica Neue", Arial, sans-serif;
  font-weight:700;
  border-radius:2px;
  margin-top:8px;
}

.cta-strip a:hover{
  text-decoration:none;
  background:var(--payaleb);
  color:var(--nesic);
}

/* ---------- CONTACT ---------- */
.contact-grid{
  max-width:1160px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:44px;
}

.contact-form{
  background:var(--consolepanel);
  border:1px solid var(--panel-line);
  border-radius:3px;
  padding:28px;
}

.contact-form label{
  display:block;
  font-family:"Helvetica Neue", Arial, sans-serif;
  font-size:14px;
  font-weight:700;
  margin-bottom:6px;
  color:var(--screen);
}

.contact-form input,
.contact-form textarea,
.contact-form select{
  width:100%;
  font-family:Georgia, serif;
  font-size:15px;
  color:var(--screen);
  background:var(--payaleb);
  border:2px solid var(--panel-line);
  border-radius:2px;
  padding:10px 12px;
  margin-bottom:18px;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus{
  outline:2px solid var(--integblue);
  border-color:var(--integblue);
}

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

.contact-form button{
  background:var(--integblue);
  color:var(--face-ink);
  border:none;
  padding:13px 26px;
  font-family:"Helvetica Neue", Arial, sans-serif;
  font-weight:700;
  font-size:15px;
  border-radius:2px;
  cursor:pointer;
}

.contact-form button:hover{
  background:var(--nesic);
}

.contact-form .form-note{
  font-size:13px;
  margin-top:14px;
  margin-bottom:0;
}

.contact-aside h3{
  font-size:18px;
  margin-top:0;
  color:var(--integblue);
}

.contact-aside p{
  font-size:15px;
}

.contact-aside .addr{
  font-style:normal;
  line-height:1.9;
}

.faq-block{
  max-width:1160px;
  margin:0 auto;
}

.faq-item{
  border-bottom:1px solid var(--rule);
}

.faq-q{
  width:100%;
  text-align:left;
  background:none;
  border:none;
  padding:18px 0;
  font-family:"Helvetica Neue", Arial, sans-serif;
  font-size:17px;
  font-weight:700;
  color:var(--screen);
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  gap:20px;
}

.faq-q span{
  color:var(--integblue);
  font-size:20px;
  line-height:1;
}

.faq-a{
  display:none;
  padding:0 0 18px;
  max-width:78ch;
}

.faq-item.is-open .faq-a{
  display:block;
}

/* counters */
.stat-row{
  max-width:1160px;
  margin:0 auto;
  display:flex;
  gap:20px;
  flex-wrap:wrap;
}

.stat{
  flex:1 1 180px;
  border-top:4px solid var(--integblue);
  padding-top:12px;
}

.stat b{
  display:block;
  font-family:"Helvetica Neue", Arial, sans-serif;
  font-size:34px;
  color:var(--integblue);
  line-height:1.1;
}

.stat span{
  font-size:14px;
  font-family:"Helvetica Neue", Arial, sans-serif;
}

/* ---------- REVEAL ---------- */
.reveal{
  opacity:1;
}

.js-on .reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity 600ms ease, transform 600ms ease;
}

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

/* ---------- RESPONSIVE ---------- */
@media (max-width:920px){
  .mimicboard-inner{
    grid-template-columns:1fr;
    gap:34px;
  }
  .mimicboard-display{
    font-size:62px;
  }
  .mimicboard-wall{
    min-height:380px;
  }
  .prose-block{
    grid-template-columns:1fr;
  }
  .contact-grid{
    grid-template-columns:1fr;
  }
  .cabletray-body{
    grid-template-columns:1fr;
    gap:26px;
  }
  .annunciatorband-inner{
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
  }
}

@media (max-width:720px){
  .consolerow{
    padding:16px 16px 0;
  }
  .consolerow-toggle{
    display:block;
  }
  .consolerow-nameplate{
    display:none;
  }
  .consolerow-desk{
    gap:10px;
  }
  .consolerow-desk.is-closed .consolerow-screen{
    display:none;
  }
  .consolerow-desk.is-open{
    flex-direction:row;
    flex-wrap:wrap;
  }
  .consolerow-screen a{
    width:auto !important;
    padding:8px 12px;
    font-size:14px;
  }
  .mimicboard-copy h1{
    font-size:32px;
  }
  .mimicboard-display{
    font-size:52px;
  }
  .integrationsheet-row{
    flex-direction:column;
  }
  .integrationsheet-sheet{
    flex:1 1 auto !important;
  }
  .pagehead h1{
    font-size:30px;
  }
  .section{
    padding:44px 18px;
  }
}