/* YL E&M Engineering Co., Limited — plant room theme
   Palette:
   DUCT-SILVER body  #ECEEE9
   PLANT-INK text    #22313A
   PHASE-BLUE accent #33628F
   phase-red         #B8432F
   phase-yellow      #D9A62E
   GUARD-GREY        #79858A
   PLANT-DEEP        #1B262B
   INSUL-LINEN       #E2E4DA
*/

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-size: 16px;
  background-color: #ECEEE9;
  color: #22313A;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.62;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.2;
  color: #1B262B;
  margin-top: 0;
}

a {
  color: #33628F;
}

img {
  max-width: 100%;
}

.page-shell {
  width: 100%;
}

/* ---------- DAMPER BANK TABS NAV ---------- */
.dampernav {
  background-color: #1B262B;
  border-bottom: 6px solid #33628F;
  padding: 18px 22px 0 22px;
}

.dampernav-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px 22px;
  padding-bottom: 16px;
}

.dampernav-plate {
  border: 3px solid #D9A62E;
  background-color: #1B262B;
  padding: 10px 16px;
  color: #E2E4DA;
  letter-spacing: 0.16em;
  font-size: 13px;
  font-weight: bold;
  text-transform: uppercase;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.dampernav-plate strong {
  color: #ECEEE9;
  display: block;
  font-size: 15px;
}

.dampernav-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-left: auto;
}

.damper-tab {
  position: relative;
  display: block;
  min-width: 118px;
  padding: 12px 14px 10px 14px;
  background-color: #E2E4DA;
  color: #22313A;
  text-decoration: none;
  border: 2px solid #79858A;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.04em;
}

.damper-tab .tab-code {
  display: block;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: #33628F;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin-top: 4px;
}

.damper-tab:hover,
.damper-tab:focus {
  background-color: #D9A62E;
  color: #1B262B;
}

.damper-tab.tab-a { transform: rotate(-1.5deg); }
.damper-tab.tab-b { transform: rotate(1.2deg); }
.damper-tab.tab-c { transform: rotate(-0.8deg); }
.damper-tab.tab-d { transform: rotate(1.6deg); }
.damper-tab.tab-e { transform: rotate(-1.1deg); }

.damper-tab.tab-current {
  background-color: #33628F;
  color: #ECEEE9;
  border-color: #D9A62E;
}

.damper-tab.tab-current .tab-code {
  color: #D9A62E;
}

/* ---------- HERO: PLANT ROOM SECTION ---------- */
.plantroom {
  max-width: 1200px;
  margin: 0 auto;
  padding: 54px 22px 40px 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  align-items: center;
}

.plantroom-copy {
  flex: 1 1 520px;
  max-width: 55%;
}

.plantroom-kicker {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #33628F;
  border-left: 6px solid #B8432F;
  padding-left: 10px;
  margin-bottom: 14px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: bold;
}

.plantroom-copy h1 {
  font-size: 44px;
  margin-bottom: 18px;
}

.plantroom-copy h1 .plant-word {
  color: #33628F;
}

.plantroom-lede {
  font-size: 17px;
  max-width: 54ch;
  color: #22313A;
}

.plantroom-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 26px;
}

.isolator {
  display: inline-block;
  background-color: #33628F;
  color: #ECEEE9;
  text-decoration: none;
  padding: 14px 22px;
  border: 3px solid #1B262B;
  box-shadow: 4px 4px 0 #79858A;
  font-weight: bold;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 13px;
}

.isolator span.isol-tag {
  display: block;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: #D9A62E;
  margin-bottom: 3px;
}

.isolator.isolator-alt {
  background-color: #1B262B;
  border-color: #33628F;
}

.isolator:hover,
.isolator:focus {
  background-color: #B8432F;
  color: #ECEEE9;
}

/* CSS plant room illustration */
.plantroom-scene {
  flex: 1 1 420px;
  max-width: 45%;
  background-color: #E2E4DA;
  border: 3px solid #79858A;
  padding: 20px;
  position: relative;
}

.scene-floor {
  border-top: 5px solid #79858A;
  margin-top: 14px;
  position: relative;
  height: 26px;
}

.scene-drain {
  position: absolute;
  top: -8px;
  left: 8%;
  width: 84%;
  height: 10px;
  background-color: #1B262B;
  border-left: 4px solid #33628F;
  border-right: 4px solid #33628F;
}

.scene-drain::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 4px;
  right: 4px;
  height: 3px;
  background-color: #79858A;
}

.scene-rail {
  position: absolute;
  top: -34px;
  right: 0;
  width: 46%;
  height: 34px;
  border-top: 4px solid #D9A62E;
  border-right: 4px solid #D9A62E;
}

.scene-rail::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 4px;
  height: 34px;
  background-color: #D9A62E;
}

.scene-ahu {
  background-color: #ECEEE9;
  border: 3px solid #22313A;
  padding: 12px;
  margin-bottom: 16px;
}

.scene-ahu-head {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: #33628F;
  text-transform: uppercase;
  margin-bottom: 8px;
  font-weight: bold;
}

.scene-ahu-doors {
  display: flex;
  gap: 10px;
}

.scene-door {
  flex: 1 1 0;
  height: 62px;
  background-color: #E2E4DA;
  border: 2px solid #79858A;
  position: relative;
}

.scene-door::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 6px;
  height: 6px;
  background-color: #33628F;
}

.scene-gauges {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.scene-gauge {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid #22313A;
  background-color: #ECEEE9;
  position: relative;
}

.scene-gauge::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 3px;
  width: 2px;
  height: 10px;
  background-color: #B8432F;
}

.scene-duct {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.scene-duct-run {
  flex: 1 1 auto;
  height: 26px;
  background-color: #79858A;
  border-top: 3px solid #22313A;
  border-bottom: 3px solid #22313A;
}

.scene-duct-elbow {
  width: 26px;
  height: 26px;
  background-color: #79858A;
  border: 3px solid #22313A;
}

.scene-damper {
  width: 22px;
  height: 34px;
  background-color: #D9A62E;
  border: 3px solid #22313A;
  transform: rotate(18deg);
}

.scene-db {
  background-color: #1B262B;
  border: 3px solid #33628F;
  padding: 12px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.scene-db-label {
  color: #ECEEE9;
  font-size: 10px;
  letter-spacing: 0.18em;
  margin-right: auto;
  font-weight: bold;
}

.scene-phase {
  width: 16px;
  height: 16px;
  border: 2px solid #ECEEE9;
}

.scene-phase.phase-r { background-color: #B8432F; }
.scene-phase.phase-y { background-color: #D9A62E; }
.scene-phase.phase-b { background-color: #33628F; }

.scene-pumps {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 6px;
}

.scene-pump {
  flex: 1 1 0;
  height: 42px;
  background-color: #ECEEE9;
  border: 3px solid #22313A;
  position: relative;
}

.scene-pump::after {
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  width: 10px;
  height: 11px;
  border-radius: 50%;
  background-color: #E2E4DA;
  border: 3px solid #22313A;
  transform: translateX(-50%);
}

.scene-pipe {
  height: 8px;
  background-color: #33628F;
  border-top: 2px solid #1B262B;
  border-bottom: 2px solid #1B262B;
  margin-bottom: 12px;
}

/* ---------- SYSTEM LOOP ROWS ---------- */
.looprows {
  padding: 24px 0 40px 0;
}

.looprows-heading {
  max-width: 1200px;
  margin: 0 auto 22px auto;
  padding: 0 22px;
}

.looprows-heading h2 {
  font-size: 32px;
  margin-bottom: 8px;
}

.looprows-heading p {
  max-width: 70ch;
  color: #22313A;
}

.loop-module {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  max-width: 1200px;
  margin: 0 auto 14px auto;
  border: 2px solid #79858A;
}

.loop-module.loop-tint-a { background-color: #E2E4DA; }
.loop-module.loop-tint-b { background-color: #D8DACF; }
.loop-module.loop-invert { background-color: #1B262B; }
.loop-module.loop-invert .loop-panel h3 { color: #ECEEE9; }
.loop-module.loop-invert .loop-panel p { color: #DDE2DE; }
.loop-module.loop-invert .loop-panel a { color: #D9A62E; }

.loop-module.skew-a { transform: rotate(-1deg); }
.loop-module.skew-b { transform: rotate(1deg); }

.loop-column {
  flex: 0 0 190px;
  background-color: #1B262B;
  color: #ECEEE9;
  padding: 20px 16px;
  border-right: 4px solid #33628F;
}

.loop-column .loop-name {
  font-size: 22px;
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: 0.06em;
}

.loop-column .loop-phase {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-top: 12px;
  border: 2px solid #ECEEE9;
}

.loop-column .loop-phase.p-r { background-color: #B8432F; }
.loop-column .loop-phase.p-y { background-color: #D9A62E; }
.loop-column .loop-phase.p-b { background-color: #33628F; }

.loop-column .loop-sub {
  display: block;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: #79858A;
  margin-top: 12px;
}

.loop-panel {
  flex: 1 1 520px;
  padding: 20px 24px;
}

.loop-panel h3 {
  font-size: 22px;
  margin-bottom: 8px;
}

.loop-panel p {
  margin: 0 0 10px 0;
  max-width: 78ch;
}

.loop-panel a {
  font-weight: bold;
  text-decoration: underline;
}

.loop-flow {
  position: relative;
  height: 12px;
  background-color: #79858A;
  border: 2px solid #22313A;
  margin-top: 14px;
}

.loop-flow .flow-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: #33628F;
}

.loop-flow .flow-label {
  position: absolute;
  right: 0;
  top: -22px;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: #22313A;
  font-weight: bold;
}

.loop-invert .loop-flow .flow-label { color: #ECEEE9; }

.flow-2 { width: 12%; }
.flow-5 { width: 26%; }
.flow-8 { width: 40%; }
.flow-12 { width: 56%; }
.flow-16 { width: 76%; }
.flow-20 { width: 96%; }

/* ---------- MAINTENANCE WINDOW STRIP ---------- */
.maintenance-window {
  background-color: #33628F;
  color: #ECEEE9;
  border-top: 4px solid #79858A;
  border-bottom: 4px solid #79858A;
  padding: 30px 22px;
  margin: 34px 0;
}

.maintenance-window-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}

.mw-glyph {
  width: 34px;
  height: 34px;
  border: 3px solid #D9A62E;
  background-color: #1B262B;
  position: relative;
  flex: 0 0 auto;
}

.mw-glyph::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 12px;
  width: 16px;
  height: 3px;
  background-color: #D9A62E;
}

.mw-text {
  flex: 1 1 420px;
  font-size: 17px;
}

.mw-text strong {
  color: #ECEEE9;
}

/* ---------- CONTENT BLOCKS (homepage rich copy) ---------- */
.deepband {
  background-color: #1B262B;
  color: #ECEEE9;
  padding: 46px 22px;
  margin-top: 34px;
}

.deepband h2 {
  color: #ECEEE9;
}

.deepband p {
  color: #DDE2DE;
  max-width: 82ch;
}

.deepband a {
  color: #D9A62E;
  font-weight: bold;
}

.deepband-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.linenband {
  background-color: #E2E4DA;
  padding: 46px 22px;
}

.linenband-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.linenband h2 {
  font-size: 30px;
}

.prose-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.prose-cols .prose-half {
  flex: 1 1 380px;
}

.deepband .prose-cols .prose-half p {
  max-width: 62ch;
}

.chip-list {
  list-style: none;
  margin: 18px 0 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.chip-list li {
  background-color: #ECEEE9;
  border-left: 8px solid #33628F;
  padding: 12px 16px;
  color: #22313A;
  font-size: 15px;
  flex: 1 1 260px;
}

.deepband .chip-list li {
  background-color: #22313A;
  color: #ECEEE9;
  border-left-color: #D9A62E;
}

.rule-row {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  max-width: 1100px;
  margin: 24px auto 0 auto;
  padding: 0 22px;
}

.rule-cell {
  flex: 1 1 250px;
  background-color: #ECEEE9;
  border-top: 6px solid #33628F;
  padding: 18px;
}

.rule-cell h3 {
  font-size: 19px;
  margin-bottom: 6px;
}

.rule-cell p {
  margin: 0;
  font-size: 15px;
}

/* ---------- FOOTER: MAIN BOARD BASE ---------- */
.mainboard {
  background-color: #1B262B;
  color: #ECEEE9;
  margin-top: 40px;
  padding-top: 0;
}

.mainboard-rail {
  background-color: #79858A;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.mainboard-rail .rail-phase {
  width: 14px;
  height: 14px;
  border: 2px solid #1B262B;
}

.mainboard-rail .rail-phase.rp-r { background-color: #B8432F; }
.mainboard-rail .rail-phase.rp-y { background-color: #D9A62E; }
.mainboard-rail .rail-phase.rp-b { background-color: #33628F; }

.mainboard-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 22px 26px 22px;
}

.mainboard-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 26px;
}

.board-tab {
  display: block;
  background-color: #E2E4DA;
  color: #22313A;
  text-decoration: none;
  padding: 10px 14px;
  border-left: 6px solid #D9A62E;
  font-size: 14px;
  font-weight: bold;
}

.board-tab:hover,
.board-tab:focus {
  background-color: #33628F;
  color: #ECEEE9;
}

.mainboard-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.mainboard-plate {
  flex: 1 1 380px;
  border: 3px solid #D9A62E;
  padding: 18px;
}

.mainboard-plate .plate-brand {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
  display: block;
}

.mainboard-plate p {
  color: #DDE2DE;
  margin: 0;
  max-width: 56ch;
}

.mainboard-contact {
  flex: 1 1 320px;
}

.mainboard-contact h3 {
  color: #D9A62E;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.mainboard-contact p {
  margin: 0 0 6px 0;
  color: #DDE2DE;
  font-size: 15px;
}

.mainboard-contact a {
  color: #ECEEE9;
}

.mainboard-base {
  border-top: 2px solid #79858A;
  margin-top: 26px;
  padding-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: center;
  font-size: 13px;
  color: #C9D0CC;
}

.mainboard-base a {
  color: #D9A62E;
}

.circuit-tag {
  margin-left: auto;
  border: 2px solid #79858A;
  padding: 4px 10px;
  letter-spacing: 0.16em;
  color: #ECEEE9;
}

/* ---------- INNER PAGE HELPERS ---------- */
.pagebanner {
  background-color: #33628F;
  color: #ECEEE9;
  padding: 40px 22px;
}

.pagebanner-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.pagebanner h1 {
  color: #ECEEE9;
  font-size: 36px;
  margin-bottom: 8px;
}

.pagebanner p {
  max-width: 74ch;
  margin: 0;
  color: #ECEEE9;
}

.detail-rows {
  max-width: 1100px;
  margin: 30px auto;
  padding: 0 22px;
}

.detail-block {
  background-color: #E2E4DA;
  border-left: 10px solid #33628F;
  padding: 22px 24px;
  margin-bottom: 18px;
}

.detail-block:nth-child(even) {
  background-color: #D8DACF;
  border-left-color: #D9A62E;
}

.detail-block h2 {
  font-size: 24px;
  margin-bottom: 8px;
}

.detail-block p {
  max-width: 84ch;
  margin: 0 0 10px 0;
}

.detail-block ul {
  margin: 10px 0 0 0;
  padding-left: 20px;
  max-width: 80ch;
}

.detail-block li {
  margin-bottom: 6px;
}

.process-band {
  background-color: #1B262B;
  color: #ECEEE9;
  padding: 40px 22px;
}

.process-band-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.process-band h2 {
  color: #ECEEE9;
  font-size: 28px;
}

.process-line {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 20px;
}

.process-step {
  flex: 1 1 200px;
  border-top: 5px solid #33628F;
  background-color: #22313A;
  padding: 16px;
}

.process-step .step-num {
  display: block;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: #D9A62E;
  margin-bottom: 6px;
}

.process-step h3 {
  color: #ECEEE9;
  font-size: 17px;
  margin-bottom: 6px;
}

.process-step p {
  margin: 0;
  color: #DDE2DE;
  font-size: 14px;
}

.cta-band {
  background-color: #33628F;
  color: #ECEEE9;
  padding: 40px 22px;
  text-align: center;
}

.cta-band h2 {
  color: #ECEEE9;
  font-size: 28px;
}

.cta-band p {
  max-width: 66ch;
  margin: 0 auto 20px auto;
}

.cta-band .isolator {
  border-color: #1B262B;
  box-shadow: 4px 4px 0 #1B262B;
}

/* contact form */
.contact-grid {
  max-width: 1100px;
  margin: 30px auto;
  padding: 0 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.contact-panel {
  flex: 1 1 420px;
  background-color: #E2E4DA;
  border: 2px solid #79858A;
  padding: 24px;
}

.contact-panel h2 {
  font-size: 24px;
}

.contact-aside {
  flex: 1 1 300px;
  background-color: #1B262B;
  color: #ECEEE9;
  padding: 24px;
  border-top: 6px solid #D9A62E;
}

.contact-aside h2 {
  color: #ECEEE9;
  font-size: 22px;
}

.contact-aside p {
  color: #DDE2DE;
  margin: 0 0 10px 0;
}

.contact-aside a {
  color: #D9A62E;
}

.field-label {
  display: block;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #33628F;
  font-weight: bold;
  margin: 14px 0 5px 0;
}

.field-input,
.field-textarea {
  width: 100%;
  padding: 11px 12px;
  border: 2px solid #79858A;
  background-color: #ECEEE9;
  color: #22313A;
  font-size: 15px;
  font-family: inherit;
}

.field-input:focus,
.field-textarea:focus {
  outline: 3px solid #33628F;
}

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

.form-note {
  font-size: 13px;
  color: #22313A;
  margin-top: 12px;
}

.form-status {
  margin-top: 12px;
  font-weight: bold;
  color: #33628F;
}

.faq-item {
  background-color: #E2E4DA;
  border-left: 8px solid #B8432F;
  padding: 16px 18px;
  margin-bottom: 12px;
}

.faq-item h3 {
  font-size: 18px;
  margin-bottom: 6px;
}

.faq-item p {
  margin: 0;
}

/* ---------- NAV TOGGLE + ACCORDION + COUNTERS ---------- */
.dampernav-toggle {
  display: none;
  background-color: #E2E4DA;
  color: #22313A;
  border: 2px solid #D9A62E;
  padding: 10px 16px;
  font-weight: bold;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  margin-left: auto;
}

.acc-toggle {
  display: block;
  width: 100%;
  text-align: left;
  background-color: #33628F;
  color: #ECEEE9;
  border: 2px solid #1B262B;
  padding: 12px 16px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  margin-top: 10px;
}

.acc-toggle:hover,
.acc-toggle:focus {
  background-color: #B8432F;
}

.acc-panel {
  display: none;
  background-color: #ECEEE9;
  border-left: 6px solid #D9A62E;
  padding: 14px 16px;
}

.acc-panel.acc-open {
  display: block;
}

.count-up {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 34px;
  color: #33628F;
  font-weight: bold;
}

/* ---------- REVEAL ANIMATION ---------- */
html.js .reveal-pre {
  opacity: 0;
  transform: translateY(14px);
}

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

/* ---------- MOBILE ---------- */
@media (max-width: 900px) {
  .plantroom-copy,
  .plantroom-scene {
    max-width: 100%;
    flex: 1 1 100%;
  }
}

@media (max-width: 640px) {
  .dampernav-toggle {
    display: inline-block;
  }
  .dampernav-tabs {
    margin-left: 0;
    width: 100%;
    display: none;
  }
  .dampernav-tabs.is-open {
    display: flex;
  }
  .damper-tab {
    flex: 1 1 42%;
    min-width: 0;
  }
  .plantroom-copy h1 {
    font-size: 32px;
  }
  .loop-column {
    flex: 1 1 100%;
    border-right: none;
    border-bottom: 4px solid #33628F;
  }
  .loop-module {
    margin-left: 10px;
    margin-right: 10px;
  }
  .mainboard-base {
    flex-direction: column;
    align-items: flex-start;
  }
  .circuit-tag {
    margin-left: 0;
  }
}