.hvac-components-page{color:#18334f}.hvac-components-page .gas-title{max-width:1100px}.hvac-hero .gas-hero__split{grid-template-columns:minmax(420px,.9fr) minmax(620px,1.1fr)}.hvac-hero .gas-hero__media,.hvac-hero .gas-hero__media img,.hvac-hero .gas-hero__body{min-height:650px}.hvac-hero .gas-hero__body{padding-top:38px;padding-bottom:38px}.hvac-hero .gas-hero__copy p{font-size:15px;line-height:1.62;margin-bottom:12px}.hvac-hero .gas-btn{min-height:50px}.hvac-lead,.hvac-caption{max-width:1000px;color:#52667a;font-size:17px;line-height:1.75}.hvac-catalog-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:54px}.hvac-catalog-card{display:flex;flex-direction:column;min-height:430px;padding:0 26px 28px;background:#f4f7fb;transition:.3s}.hvac-catalog-card:hover{transform:translateY(-8px);background:#fff;box-shadow:0 20px 45px #173d6420}.hvac-product-art{height:190px;margin:0 -26px 26px;display:grid;place-items:center;background:linear-gradient(145deg,#eaf4ff,#fff)}.device{display:grid;place-items:center;width:150px;height:105px;border-radius:12px;background:#153a5d;color:#fff;font-size:12px;letter-spacing:2px;box-shadow:0 22px 30px #173d6438}.device.relay{background:#303941}.device.plenum{width:180px;height:82px;border-radius:8px;background:#9bb2c4}.device.damper{width:165px;height:70px;border-radius:40px;background:#6f8799}.hvac-kicker{color:#4788f8;font-size:11px;font-weight:800}.hvac-catalog-card h3{font-size:24px;font-weight:500;margin:10px 0}.hvac-catalog-card p{font-size:14px;line-height:1.65;color:#52667a}.hvac-card-link{margin-top:auto;color:#1e88ff;font-weight:700}.hvac-thermostat-note{margin-top:38px;padding:24px 28px;border-left:4px solid #4788f8;background:#eef6ff;line-height:1.7}.hvac-thermostat-note a{display:inline;color:#1476dc;font-weight:700}.hvac-problem{background:#4788F8;color:#fff}.hvac-problem h2{font-size:clamp(30px,3vw,48px);max-width:900px;margin:0 0 40px}.hvac-problem-copy{display:grid;grid-template-columns:1fr 1fr;gap:70px}.hvac-problem-copy span{font-size:12px;font-weight:800;letter-spacing:1.4px}.hvac-problem-copy p{font-size:17px;line-height:1.72}.hvac-flow{display:grid;grid-template-columns:1fr 1fr auto 1.25fr;gap:24px;align-items:center;margin-top:42px;padding:34px;border:1px solid #ffffff55;background:#276bd6}.flow-stack,.flow-solution{display:grid;gap:10px}.flow-stack b,.flow-solution>*{padding:12px 16px;background:#ffffff18}.flow-alert{padding:20px;color:#6f1f16;background:#ffd7cc;font-weight:700;line-height:1.8}.flow-arrow{font-size:38px}.flow-solution strong{background:#fff;color:#286cd8}.hvac-capability-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:48px;border:1px solid #d8e3ee;background:#f7faff}.hvac-capability-grid article{min-height:230px;padding:34px;border-right:1px solid #d8e3ee;border-bottom:1px solid #d8e3ee}.hvac-capability-grid article:nth-child(3n){border-right:0}.hvac-capability-grid i{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#e1efff;color:#2877df;font-style:normal;font-weight:800}.hvac-capability-grid h3{font-size:21px}.hvac-capability-grid p{color:#52667a;line-height:1.65}.hvac-model-note{padding:20px 24px;margin:24px 0 0;background:#eaf4ff;color:#38536e}.hvac-soft{background:#f3f8fd}.hvac-centered{text-align:center;max-width:980px;margin:auto}.hvac-centered .gas-title{margin:auto}.hvac-centered>p:last-child{font-size:17px;line-height:1.75;color:#52667a}.architecture-map{max-width:1080px;margin:46px auto 0;text-align:center}.arch-node{display:inline-block;padding:14px 28px;border:1px solid #78abdf;background:#fff;font-weight:700}.down{display:block;font-size:26px;color:#4788f8}.arch-controller{display:grid;gap:8px;max-width:600px;margin:auto;padding:28px;border:2px solid #4788f8;background:#0c2945;color:#fff}.arch-controller b{font-size:22px}.arch-controller small{color:#8ec5ff}.arch-controller span{font-size:13px}.arch-branches{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:34px}.arch-branches>div{display:grid;gap:10px;padding:22px;background:#fff;border-top:4px solid #4788f8}.arch-branches span{padding:9px;background:#eef5fb}.arch-legend{display:flex;justify-content:center;gap:30px;margin-top:24px;color:#587087}.hvac-caption{text-align:center;margin:28px auto 0}.hvac-split{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(45px,7vw,110px);align-items:center}.compat-map{display:grid;grid-template-columns:1fr auto 1.1fr auto 1.2fr;align-items:center;gap:18px;padding:34px;background:#0b2947;color:#fff}.brand-list,.compat-output{display:grid;gap:10px}.brand-list span,.compat-output>*{padding:11px;background:#ffffff14}.compat-core{padding:30px 15px;background:#4788f8;text-align:center;font-weight:800}.protocols{grid-column:1/-1;display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.protocols>*{padding:8px 12px;background:#ffffff14}.custom-steps{display:grid;gap:0}.custom-steps article{display:grid;grid-template-columns:70px 1fr;gap:20px;padding:24px 0;border-bottom:1px solid #cfdeec}.custom-steps b,.numbered-features b{color:#4788f8;font-size:30px}.custom-steps h3{margin:0}.custom-steps p{color:#52667a}.airflow-layout{grid-template-columns:1.2fr 1fr}.airflow-map{display:grid;justify-items:center;gap:14px;padding:46px;background:#eaf5ff}.air-unit,.plenum-main{padding:16px 30px;background:#153a5d;color:#fff;font-weight:700}.plenum-main{background:#4788f8}.ducts{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:14px}.ducts span{padding:18px;background:#fff;border-top:3px solid #65b6ed;text-align:center}.numbered-features article{display:grid;grid-template-columns:55px 1fr;column-gap:14px;border-top:1px solid #d9e4ef;padding:20px 0}.numbered-features h3,.numbered-features p{margin:0}.numbered-features p{grid-column:2;color:#52667a}.hvac-iaq{background:#071D36;color:#fff}.hvac-iaq .gas-label{color:#71b7ff}.hvac-iaq h2{font-size:clamp(30px,3vw,46px)}.hvac-iaq p{color:#c1d0df;line-height:1.75}.iaq-features{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}.iaq-features span{padding:16px;border:1px solid #34516d}.iaq-visual{position:relative;min-height:500px;display:grid;place-items:center}.iaq-device{z-index:2;display:grid;gap:13px;width:270px;padding:38px 30px;border:2px solid #5ca6ff;border-radius:28px;background:#102f4c;box-shadow:0 0 80px #4788f855}.iaq-device b{font-size:44px}.iaq-device small{color:#67b7ff}.iaq-orbit{position:absolute;inset:20px;display:flex;flex-wrap:wrap;align-content:space-between;justify-content:space-between}.iaq-orbit span{padding:11px 15px;border-radius:30px;background:#173d5f}.hvac-case-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:42px}.hvac-case-card{padding:0 22px 25px;background:#f5f7fa}.case-image{height:190px;margin:0 -22px 20px;display:grid;place-items:center;background:linear-gradient(135deg,#dceeff,#9dbde0);color:#1b5185;font-weight:800}.hvac-case-card h3{font-size:20px}.hvac-case-card p{color:#66788a;line-height:1.6}.trust-three{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:42px}.trust-three article{padding:30px;background:#fff}.trust-three b{font-size:34px;color:#4788f8}.trust-three p{color:#52667a;line-height:1.65}.cnas-list{columns:2;color:#52667a;line-height:1.9}.cnas-photo{position:relative}.cnas-photo>img:first-child{width:100%;display:block}.cnas-mark{position:absolute;right:18px;bottom:18px;width:110px;background:#fff;padding:10px}.home-certifications-section .home-certifications-rail{grid-template-columns:repeat(3,1fr)}
[data-hvac-reveal]{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}[data-hvac-reveal].is-visible{opacity:1;transform:none}[data-hvac-reveal]>*{transition:transform .45s ease,opacity .45s ease}.hvac-flow.is-visible .flow-arrow{animation:hvacPulse .8s ease 2}.architecture-map.is-visible .arch-controller{animation:hvacGlow 1.2s ease 1}@keyframes hvacPulse{50%{transform:translateX(8px)}}@keyframes hvacGlow{50%{box-shadow:0 0 35px #4788f888}}
@media(max-width:1100px){.hvac-catalog-grid,.hvac-case-grid{grid-template-columns:repeat(2,1fr)}.hvac-hero .gas-hero__split{grid-template-columns:1fr 1fr}.hvac-hero .gas-hero__body{padding:30px}.hvac-hero .gas-hero__copy p{font-size:14px}}
@media(max-width:900px){.hvac-hero .gas-hero__split,.hvac-split{grid-template-columns:1fr}.hvac-hero .gas-hero__media,.hvac-hero .gas-hero__media img{min-height:360px}.hvac-hero .gas-hero__body{min-height:auto}.hvac-problem-copy{grid-template-columns:1fr;gap:22px}.hvac-flow{grid-template-columns:1fr;text-align:center}.flow-arrow{transform:rotate(90deg)}.hvac-capability-grid{grid-template-columns:repeat(2,1fr)}.hvac-capability-grid article:nth-child(3n){border-right:1px solid #d8e3ee}.hvac-capability-grid article:nth-child(2n){border-right:0}.arch-branches{grid-template-columns:1fr}.compat-map{grid-template-columns:1fr;text-align:center}.compat-map>b{transform:rotate(90deg)}.protocols{grid-column:1}.airflow-map{order:2}.hvac-iaq .hvac-split>div:first-child{order:1}.iaq-visual{order:2}}
@media(max-width:560px){.hvac-catalog-grid,.hvac-case-grid,.hvac-capability-grid,.trust-three{grid-template-columns:1fr}.hvac-capability-grid article{border-right:0}.hvac-problem h2{font-size:29px}.hvac-flow{padding:20px}.ducts,.iaq-features{grid-template-columns:1fr}.iaq-visual{min-height:430px}.iaq-orbit{position:static;display:flex;justify-content:center;gap:8px;margin-top:22px}.iaq-visual{display:flex;flex-direction:column}.home-certifications-section .home-certifications-rail{grid-template-columns:1fr}.cnas-list{columns:1}.arch-legend{flex-direction:column;gap:8px}.hvac-components-page .gas-section{padding:58px 0}}
@media(prefers-reduced-motion:reduce){[data-hvac-reveal]{opacity:1!important;transform:none!important;transition:none!important}[data-hvac-reveal] *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.hvac-catalog-grid {
  gap: 110px 28px;
  margin-top: 170px;
}

.hvac-catalog-card {
  position: relative;
  box-sizing: border-box;
  min-height: 440px;
  padding: 125px 26px 28px;
  overflow: visible;
}

.hvac-product-art {
  position: absolute;
  top: -170px;
  left: -26px;
  width: calc(100% + 52px);
  overflow: visible;
  height: 190px;
  margin: 0;
  background: transparent;
}

.hvac-product-image {
  display: block;
  width: 70%;
  height: 70%;
  object-fit: contain;
  filter: drop-shadow(0 18px 16px rgb(23 61 100 / 26%));
  transition: transform .3s ease, filter .3s ease;
}

.hvac-product-image--plenum {
  width: 70%;
  height: 70%;
}

.hvac-catalog-card:hover .hvac-product-image {
  transform: translateY(-6px) scale(1.035);
  filter: drop-shadow(0 22px 20px rgb(23 61 100 / 32%));
}

@media(max-width:560px) {
  .hvac-catalog-grid {
    gap: 96px;
    margin-top: 150px;
  }

  .hvac-product-art {
    top: -150px;
  }
}

.hvac-problem-copy span {
  font-size: 16px;
}

/* Multi-brand integration comparison flow */
.hvac-problem {
  background: #f3f7fc;
  color: #173653;
}

.hvac-problem h2 {
  color: #173653;
}

.hvac-problem-copy {
  gap: clamp(42px, 6vw, 90px);
}

.hvac-problem-copy > div + div {
  padding-left: clamp(32px, 4vw, 64px);
  border-left: 1px solid #b9cce0;
}

.hvac-problem-copy span {
  color: #3979f6;
}

.hvac-problem-copy p {
  color: #405a73;
}

.hvac-logic-scroller {
  width: 100%;
  margin-top: 48px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-color: #9db9d8 #e8f0f8;
}

.hvac-logic-flow {
  display: grid;
  grid-template-columns: 260px 76px 230px 120px minmax(520px, 1fr);
  grid-template-rows: repeat(2, 190px);
  gap: 20px 12px;
  align-items: stretch;
  min-width: 1320px;
  padding: 34px;
  border: 1px solid #d5e2ef;
  background: #fff;
  box-shadow: 0 18px 45px rgb(28 66 105 / 9%);
}

.hvac-logic-node {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  padding: 24px;
  border: 1px solid #d6e3f0;
  background: #f8fbff;
  text-align: center;
}

.hvac-logic-brands,
.hvac-logic-junction,
.hvac-logic-arrow,
.hvac-logic-fork {
  grid-row: 1 / 3;
}

.hvac-logic-brands { grid-column: 1; }
.hvac-logic-arrow { grid-column: 2; }
.hvac-logic-junction { grid-column: 3; }
.hvac-logic-fork { grid-column: 4; }
.hvac-branch-lane--pain { grid-column: 5; grid-row: 1; }
.hvac-branch-lane--maxmac { grid-column: 5; grid-row: 2; }

.hvac-logic-icon {
  display: grid;
  width: 104px;
  height: 104px;
  place-items: center;
  margin-bottom: 18px;
}

.hvac-logic-icon svg,
.hvac-branch-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #315f96;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3.5;
}

.hvac-brand-list {
  display: grid;
  gap: 9px;
  width: 100%;
}

.hvac-brand-list span {
  padding: 10px 12px;
  background: #eaf2fd;
  color: #24496f;
  font-size: 14px;
  font-weight: 750;
}

.hvac-logic-junction strong {
  color: #173653;
  font-size: 20px;
  line-height: 1.3;
}

.hvac-logic-junction small {
  margin-top: 8px;
  color: #6a7f94;
  font-size: 13px;
  line-height: 1.45;
}

.hvac-logic-arrow {
  position: relative;
}

.hvac-logic-arrow::before {
  position: absolute;
  top: 50%;
  right: 10px;
  left: 3px;
  border-top: 3px dashed #8db3ef;
  content: "";
  animation: hvacFlowArrow 1.6s ease-in-out infinite;
}

.hvac-logic-arrow::after {
  position: absolute;
  top: calc(50% - 6px);
  right: 2px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 10px solid #3979f6;
  content: "";
  animation: hvacFlowArrow 1.6s ease-in-out infinite;
}

.hvac-logic-fork svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hvac-fork-path {
  fill: none;
  stroke-width: 3;
  stroke-dasharray: 9 8;
  animation: hvacFlowDash 1.4s linear infinite;
}

.hvac-fork-path--pain { stroke: #dc746d; }
.hvac-fork-path--maxmac { stroke: #4b8ff7; animation-delay: -.7s; }

.hvac-branch-lane {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 62px;
  gap: 22px;
  align-items: center;
  padding: 25px 28px;
  border: 1px solid #d9e4ee;
  background: #f9fbfd;
}

.hvac-branch-lane--pain { border-left: 4px solid #dc746d; }
.hvac-branch-lane--maxmac { border-left: 4px solid #3979f6; }

.hvac-branch-icon {
  display: grid;
  width: 68px;
  height: 68px;
  place-items: center;
  border-radius: 50%;
  background: #eaf2fd;
  color: #bf554d;
  font-size: 34px;
  font-weight: 800;
}

.hvac-branch-lane--pain .hvac-branch-icon { background: #fff0ed; }
.hvac-branch-label {
  display: block;
  margin-bottom: 6px;
  color: #5c7da1;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.1px;
}

.hvac-branch-lane strong {
  display: block;
  color: #173653;
  font-size: 18px;
  line-height: 1.35;
}

.hvac-branch-lane ul {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.hvac-branch-lane li,
.hvac-branch-lane small {
  color: #63788e;
  font-size: 13px;
}

.hvac-branch-lane li {
  padding: 5px 8px;
  background: #fff0ed;
}

.hvac-branch-lane small {
  display: block;
  margin-top: 9px;
}

.hvac-branch-outcome {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
}

.hvac-branch-outcome--fail { color: #d65f57; }
.hvac-branch-outcome--success { color: #2f9a69; }

.hvac-logic-flow.is-visible .hvac-logic-brands { animation: hvacFlowNode 6s ease-in-out infinite; }
.hvac-logic-flow.is-visible .hvac-logic-junction { animation: hvacFlowNode 6s 1.2s ease-in-out infinite; }
.hvac-logic-flow.is-visible .hvac-branch-lane--pain { animation: hvacFlowPain 6s 2.4s ease-in-out infinite; }
.hvac-logic-flow.is-visible .hvac-branch-lane--maxmac { animation: hvacFlowSuccess 6s 3.6s ease-in-out infinite; }

@keyframes hvacFlowDash {
  to { stroke-dashoffset: -34; }
}

@keyframes hvacFlowArrow {
  0%, 100% { opacity: .4; transform: translateX(-4px); }
  50% { opacity: 1; transform: translateX(4px); }
}

@keyframes hvacFlowNode {
  0%, 18%, 100% { box-shadow: none; transform: translateY(0); }
  7%, 12% { box-shadow: 0 14px 28px rgb(57 121 246 / 18%); transform: translateY(-5px); }
}

@keyframes hvacFlowPain {
  0%, 18%, 100% { box-shadow: none; }
  7%, 12% { box-shadow: 0 12px 26px rgb(214 95 87 / 18%); }
}

@keyframes hvacFlowSuccess {
  0%, 18%, 100% { box-shadow: none; }
  7%, 12% { box-shadow: 0 12px 28px rgb(47 154 105 / 20%); }
}

@media(max-width:900px) {
  .hvac-problem-copy > div + div {
    padding-top: 24px;
    padding-left: 0;
    border-top: 1px solid #b9cce0;
    border-left: 0;
  }
}

@media(max-width:560px) {
  .hvac-logic-flow {
    min-width: 1280px;
    padding: 24px;
  }
}

@media(prefers-reduced-motion:reduce) {
  .hvac-logic-flow,
  .hvac-logic-flow *,
  .hvac-logic-arrow::before,
  .hvac-logic-arrow::after {
    animation: none !important;
  }
}

/* Split-scene system capabilities section */
.hvac-capability-section {
  overflow: hidden;
  background: #f4f3f6;
}

.hvac-capability-layout {
  display: grid;
  grid-template-columns: 46% 54%;
  min-height: 760px;
}

.hvac-capability-photo {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
}

.hvac-capability-photo::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 70%, #f4f3f6 100%);
  content: "";
  pointer-events: none;
}

.hvac-capability-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 54% center;
}

.hvac-capability-content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: clamp(54px, 5vw, 88px) clamp(44px, 5vw, 96px);
}

.hvac-capability-content > header {
  margin-bottom: 34px;
}

.hvac-capability-content .gas-title {
  max-width: 760px;
  font-size: clamp(32px, 2.6vw, 46px);
  line-height: 1.15;
}

.hvac-capability-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: 0 38px;
  margin-top: 0;
}

.hvac-capability-grid .hvac-capability-card {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  min-height: 150px;
  padding: 24px 0;
  overflow: visible;
  border: 0;
  border-bottom: 1px solid #d8d8df;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.hvac-capability-grid .hvac-capability-card:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.hvac-capability-grid .hvac-capability-card:nth-child(2n),
.hvac-capability-grid .hvac-capability-card:nth-child(3n) {
  border-right: 0;
}

.hvac-capability-grid .hvac-capability-icon {
  width: 62px;
  height: 62px;
  margin: 0;
  border: 1px solid #bdd4ed;
  border-radius: 50%;
  background: rgb(255 255 255 / 58%);
}

.hvac-capability-grid .hvac-capability-icon svg {
  width: 41px;
  height: 41px;
  stroke: #3478bc;
  stroke-width: 3;
}

.hvac-capability-grid .hvac-capability-card h3 {
  margin: 2px 0 8px;
  color: #203a55;
  font-size: 18px;
  line-height: 1.3;
}

.hvac-capability-grid .hvac-capability-card p {
  color: #607286;
  font-size: 13px;
  line-height: 1.55;
}

.hvac-capability-grid .hvac-capability-card:hover,
.hvac-capability-grid .hvac-capability-card:focus-within {
  border-color: #aac9ea !important;
  background: transparent;
  box-shadow: none;
  transform: translateY(-3px);
}

.hvac-capability-grid .hvac-capability-card:hover .hvac-capability-icon,
.hvac-capability-grid .hvac-capability-card:focus-within .hvac-capability-icon {
  border-color: #6ea5df;
  background: #e5f1ff;
}

.hvac-capability-content .hvac-model-note {
  margin-top: 22px;
  padding: 14px 16px;
  border: 0;
  border-left: 3px solid #3979f6;
  border-radius: 0;
  background: rgb(255 255 255 / 62%);
  font-size: 13px;
}

@media(max-width:1100px) {
  .hvac-capability-layout {
    grid-template-columns: 42% 58%;
  }

  .hvac-capability-content {
    padding: 52px 36px;
  }

  .hvac-capability-grid {
    gap: 0 24px;
  }
}

@media(max-width:900px) {
  .hvac-capability-layout {
    grid-template-columns: 1fr;
  }

  .hvac-capability-photo {
    min-height: 440px;
  }

  .hvac-capability-photo::after {
    background: linear-gradient(180deg, transparent 72%, #f4f3f6 100%);
  }

  .hvac-capability-content {
    padding: 52px clamp(24px, 6vw, 58px) 60px;
  }
}

@media(max-width:560px) {
  .hvac-capability-photo {
    min-height: 300px;
  }

  .hvac-capability-grid {
    grid-template-columns: 1fr;
  }

  .hvac-capability-grid .hvac-capability-card,
  .hvac-capability-grid .hvac-capability-card:nth-last-child(-n + 2) {
    min-height: 0;
    border-bottom: 1px solid #d8d8df;
  }

  .hvac-capability-grid .hvac-capability-card:last-child {
    border-bottom: 0;
  }
}

/* Preserve the original blue section and present the flow without cards. */
.hvac-problem {
  background: #4788F8;
  color: #fff;
}

.hvac-problem h2,
.hvac-problem-copy p,
.hvac-logic-junction strong,
.hvac-branch-lane strong {
  color: #fff;
}

.hvac-problem-copy span,
.hvac-branch-label,
.hvac-logic-junction small,
.hvac-branch-lane li,
.hvac-branch-lane small {
  color: rgb(255 255 255 / 82%);
}

.hvac-problem-copy > div + div {
  border-color: rgb(255 255 255 / 38%);
}

.hvac-logic-flow {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.hvac-logic-node {
  border: 2px solid rgb(255 255 255 / 88%);
  border-radius: 16px;
  background: transparent;
}

.hvac-logic-icon svg,
.hvac-branch-icon svg {
  stroke: #fff;
}

.hvac-brand-list span {
  background: transparent;
  color: #fff;
}

.hvac-branch-lane {
  border: 2px solid rgb(255 255 255 / 88%);
  border-radius: 16px;
  background: transparent;
}

.hvac-branch-lane--pain,
.hvac-branch-lane--maxmac {
  box-shadow: none;
  animation: none;
}

.hvac-branch-icon,
.hvac-branch-lane--pain .hvac-branch-icon {
  background: transparent;
  color: #fff;
}

.hvac-branch-lane li {
  background: transparent;
}

.hvac-branch-outcome--fail {
  color: #ffd5d1;
}

.hvac-branch-outcome--success {
  color: #d3ffe8;
}

.hvac-logic-flow.is-visible .hvac-branch-outcome {
  animation: hvacOutcomePulse 2.2s ease-in-out infinite;
}

.hvac-logic-flow.is-visible .hvac-branch-outcome--success {
  animation-delay: 1.1s;
}

@keyframes hvacOutcomePulse {
  0%, 100% { opacity: .7; transform: scale(.94); }
  50% { opacity: 1; transform: scale(1.06); }
}

.hvac-fork-path--maxmac {
  stroke: #49d79a;
}

.hvac-logic-arrow::before {
  border-top: 3px dashed rgb(255 255 255 / 92%);
}

.hvac-logic-arrow::after {
  border-left: 10px solid #fff;
}

.hvac-branch-lane--pain .hvac-branch-icon {
  width: 56px;
  height: 56px;
  border: 2px solid rgb(255 255 255 / 88%);
  border-radius: 50%;
  font-size: 30px;
}

/* Asymmetric system capability cards */
.hvac-capability-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(190px, auto);
  gap: 22px;
  margin-top: 48px;
  border: 0;
  background: transparent;
}

.hvac-capability-grid .hvac-capability-card {
  position: relative;
  display: flex;
  min-height: 0;
  align-items: flex-start;
  flex-direction: column;
  padding: 30px;
  overflow: hidden;
  border: 1px solid #dce7f2;
  border-radius: 18px;
  background: #f6f9fd;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease;
}

.hvac-capability-grid .hvac-capability-card:nth-child(3n),
.hvac-capability-grid .hvac-capability-card:nth-child(2n) {
  border-right: 1px solid #dce7f2;
}

.hvac-capability-card--feature {
  grid-column: span 2;
  grid-row: span 2;
  justify-content: space-between;
  padding: clamp(34px, 4vw, 56px) !important;
  background: linear-gradient(145deg, #eef5ff 0%, #f8fbff 100%) !important;
}

.hvac-capability-card--accent {
  display: grid !important;
  grid-template-columns: auto 92px minmax(0, 1fr);
  grid-column: 1 / -1;
  gap: 26px;
  align-items: center !important;
  min-height: 150px !important;
  background: linear-gradient(100deg, #0f3458 0%, #1c5990 100%) !important;
}

.hvac-capability-index {
  position: absolute;
  top: 22px;
  right: 24px;
  color: #99b8dc;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
}

.hvac-capability-icon {
  display: grid;
  width: 76px;
  height: 76px;
  flex: 0 0 auto;
  place-items: center;
  margin-bottom: 22px;
  border-radius: 18px;
  background: #e5f0ff;
  transition: transform .3s ease, background .3s ease;
}

.hvac-capability-icon svg {
  width: 54px;
  height: 54px;
  fill: none;
  stroke: #316cae;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3.2;
}

.hvac-capability-card--feature .hvac-capability-icon {
  width: 130px;
  height: 130px;
  margin-top: 28px;
  border-radius: 28px;
}

.hvac-capability-card--feature .hvac-capability-icon svg {
  width: 92px;
  height: 92px;
}

.hvac-capability-grid .hvac-capability-card h3 {
  margin: 0 0 12px;
  color: #173653;
  font-size: 20px;
  line-height: 1.3;
}

.hvac-capability-grid .hvac-capability-card p {
  margin: 0;
  color: #5b7187;
  font-size: 14px;
  line-height: 1.65;
}

.hvac-capability-card--feature h3 {
  font-size: clamp(25px, 2vw, 32px) !important;
}

.hvac-capability-card--feature p {
  max-width: 560px;
  font-size: 16px !important;
}

.hvac-capability-card--accent .hvac-capability-index {
  position: static;
  align-self: start;
  color: #76b7f5;
}

.hvac-capability-card--accent .hvac-capability-icon {
  margin: 0;
  background: rgb(255 255 255 / 12%);
}

.hvac-capability-card--accent .hvac-capability-icon svg {
  stroke: #fff;
}

.hvac-capability-card--accent h3,
.hvac-capability-card--accent p {
  color: #fff !important;
}

.hvac-capability-card:hover,
.hvac-capability-card:focus-within {
  z-index: 1;
  border-color: #9ac1ef !important;
  background: #fff;
  box-shadow: 0 18px 38px rgb(26 69 111 / 14%);
  transform: translateY(-6px);
}

.hvac-capability-card:hover .hvac-capability-icon,
.hvac-capability-card:focus-within .hvac-capability-icon {
  background: #dbeaff;
  transform: translateY(-4px) scale(1.04);
}

.hvac-capability-card:hover .hvac-capability-signal,
.hvac-capability-card:focus-within .hvac-capability-signal {
  animation: hvacCapabilitySignal 1.2s ease-in-out infinite;
}

.hvac-model-note {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 24px;
  padding: 17px 20px;
  border: 1px solid #cfe0f2;
  border-radius: 12px;
  background: #eef6ff;
}

.hvac-model-note__icon {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: #3979f6;
  color: #fff;
  font-family: Georgia, serif;
  font-weight: 700;
}

@keyframes hvacCapabilitySignal {
  0%, 100% { opacity: .35; }
  50% { opacity: 1; }
}

@media(max-width:1100px) {
  .hvac-capability-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hvac-capability-card--feature {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 360px !important;
  }
}

@media(max-width:560px) {
  .hvac-capability-grid {
    grid-template-columns: 1fr;
  }

  .hvac-capability-card--feature,
  .hvac-capability-card--accent {
    grid-column: auto;
    grid-row: auto;
  }

  .hvac-capability-card--accent {
    display: flex !important;
    min-height: 0 !important;
    align-items: flex-start !important;
  }

  .hvac-capability-card--feature {
    min-height: 0 !important;
  }

  .hvac-capability-card--feature .hvac-capability-icon {
    width: 96px;
    height: 96px;
  }
}

@media(prefers-reduced-motion:reduce) {
  .hvac-capability-card,
  .hvac-capability-icon,
  .hvac-capability-signal {
    animation: none !important;
    transition: none !important;
  }
}

/* Final split-scene overrides must follow the former card composition. */
.hvac-capability-section .hvac-capability-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: 0 38px;
  margin-top: 0;
}

.hvac-capability-section .hvac-capability-content > header {
  position: relative;
  z-index: 2;
  display: block;
  flex: 0 0 auto;
  margin: 0 0 34px;
  opacity: 1;
  visibility: visible;
}

.hvac-capability-section .hvac-capability-content > header .gas-label {
  display: block;
  color: #3979f6;
}

.hvac-capability-section .hvac-capability-content > header .gas-title {
  display: block;
  margin-top: 10px;
  color: #203a55;
}

.hvac-capability-section .hvac-capability-card {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  min-height: 124px;
  padding: 16px 0;
  overflow: visible;
  border: 0;
  border-bottom: 1px solid #d8d8df;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.hvac-capability-section .hvac-capability-card:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.hvac-capability-section .hvac-capability-icon {
  width: 62px;
  height: 62px;
  margin: 0;
  border: 1px solid #bdd4ed;
  border-radius: 50%;
  background: rgb(255 255 255 / 58%);
}

.hvac-capability-section .hvac-capability-icon svg {
  width: 41px;
  height: 41px;
  stroke: #3478bc;
}

.hvac-capability-section .hvac-capability-card:hover,
.hvac-capability-section .hvac-capability-card:focus-within {
  border-color: #aac9ea !important;
  background: transparent;
  box-shadow: none;
  transform: translateY(-3px);
}

@media(max-width:560px) {
  .hvac-capability-section .hvac-capability-grid {
    grid-template-columns: 1fr;
  }

  .hvac-capability-section .hvac-capability-card,
  .hvac-capability-section .hvac-capability-card:nth-last-child(-n + 2) {
    min-height: 0;
    border-bottom: 1px solid #d8d8df;
  }

.hvac-capability-section .hvac-capability-card:last-child {
    border-bottom: 0;
  }
}

.hvac-capability-content {
  background: #fff;
}

.hvac-capability-section {
  padding: 42px 20px;
  background: #fff;
}

.hvac-capability-layout {
  width: 100%;
  max-width: 1840px;
  min-height: 600px;
  margin: 0 auto;
  overflow: hidden;
}

.hvac-capability-layout {
  grid-template-columns: 43% 57%;
}

.hvac-capability-content {
  padding: 38px clamp(42px, 4vw, 76px);
}

.hvac-capability-section .hvac-capability-content > header {
  margin-bottom: 22px;
}

.hvac-capability-section .hvac-capability-grid {
  gap: 0 44px;
}

.hvac-capability-section .hvac-capability-icon {
  width: 56px;
  height: 56px;
}

.hvac-capability-section .hvac-capability-icon svg {
  width: 37px;
  height: 37px;
}

.hvac-capability-section .hvac-capability-card {
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 14px;
}

.hvac-capability-section .hvac-model-note {
  margin-top: 14px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.hvac-capability-photo::after {
  background: linear-gradient(90deg, transparent 70%, #fff 100%);
}

.hvac-capability-section .hvac-capability-card {
  border-right: 0 !important;
  border-left: 0 !important;
}

.hvac-capability-section .hvac-capability-card h3 {
  font-weight: 500;
}

@media(max-width:900px) {
  .hvac-capability-section {
    padding: 48px 20px;
  }

  .hvac-capability-photo::after {
    background: linear-gradient(180deg, transparent 72%, #fff 100%);
  }
}

@media(max-width:560px) {
  .hvac-capability-section {
    padding: 36px 14px;
  }
}

/* Multi-brand A23 interface carousel */
.hvac-compat-carousel {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 54px;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding-bottom: 30px;
}

.hvac-compat-stage {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 360px;
  place-items: center;
}

.hvac-compat-slide {
  display: block;
  width: 100%;
  max-height: 440px;
  object-fit: contain;
  filter: drop-shadow(0 18px 28px rgb(18 54 91 / 18%));
}

.hvac-compat-slide[hidden] {
  display: none;
}

.hvac-compat-caption {
  margin: 16px 0 0;
  color: #193b5d;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}

.hvac-compat-caption[hidden] {
  display: none;
}

/* Indoor-air A23 interface carousel */
.hvac-iaq-carousel {
  position: relative;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 50px;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding-bottom: 30px;
}

.hvac-iaq-stage {
  display: grid;
  min-height: 360px;
  place-items: center;
}

.hvac-iaq-slide {
  display: block;
  width: 100%;
  max-height: 500px;
  object-fit: contain;
  filter: drop-shadow(0 18px 30px rgb(0 0 0 / 25%));
}

.hvac-iaq-slide[hidden] {
  display: none;
}

.hvac-iaq-slide.is-entering-from-left {
  animation: hvacIaqEnterFromLeft 320ms cubic-bezier(.22, .75, .24, 1) both;
}

.hvac-iaq-slide.is-entering-from-right {
  animation: hvacIaqEnterFromRight 320ms cubic-bezier(.22, .75, .24, 1) both;
}

@keyframes hvacIaqEnterFromLeft {
  from { opacity: 0; transform: translateX(-30px) scale(.975); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes hvacIaqEnterFromRight {
  from { opacity: 0; transform: translateX(30px) scale(.975); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

.hvac-iaq-arrow {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  padding: 0 0 5px;
  border: 1px solid #4c759c;
  border-radius: 50%;
  background: #102f4c;
  color: #71b7ff;
  font: 400 40px/1 Arial, sans-serif;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

.hvac-iaq-arrow:hover,
.hvac-iaq-arrow:focus-visible {
  background: #4788f8;
  color: #fff;
  outline: 0;
  transform: scale(1.06);
}

.hvac-iaq-count {
  position: static;
  grid-column: 2;
  grid-row: 2;
  justify-self: center;
  margin: 10px 0 0;
  color: #8eb4d9 !important;
  font-size: 13px;
  font-weight: 700;
}

@media(max-width:560px) {
  .hvac-iaq-carousel { grid-template-columns: 40px minmax(0, 1fr) 40px; gap: 8px; }
  .hvac-iaq-stage { min-height: 240px; }
  .hvac-iaq-arrow { width: 38px; height: 38px; font-size: 32px; }
}

@media(prefers-reduced-motion: reduce) {
  .hvac-iaq-slide {
    animation: none !important;
    transform: none !important;
  }
}

/* Keep emphasis inside the selected section descriptions at body-copy weight. */
#hvac-product-catalog > .gas-container > .hvac-lead strong,
#multi-brand-project-problem .hvac-problem-copy p strong,
#multi-brand-compatibility .hvac-compat-copy > .hvac-lead strong,
#zoned-airflow .hvac-zoned-copy > .hvac-lead strong,
#indoor-air-management .hvac-split > div:first-child > p strong {
  font-weight: inherit;
}

/* Real HVAC project case cards */
#maxmac-projects .gas-container--wide {
  width: calc(100% - 48px);
  max-width: 1900px;
}

#maxmac-projects > .gas-container > .gas-label,
#maxmac-projects > .gas-container > .gas-title {
  max-width: none;
  text-align: center;
}

.hvac-project-carousel {
  position: relative;
  margin-top: 42px;
  padding: 0 68px;
}

.hvac-project-viewport {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  scroll-behavior: smooth;
}

.hvac-project-viewport::-webkit-scrollbar {
  display: none;
}

.hvac-case-grid {
  display: flex;
  gap: 24px;
  margin-top: 0;
  overflow: visible;
  scroll-snap-type: x mandatory;
}

.hvac-case-card {
  display: flex;
  flex: 0 0 calc((100% - 48px) / 3);
  min-height: 100%;
  flex-direction: column;
  overflow: hidden;
  padding: 0 24px 30px;
  border: 1px solid #dce7f1;
  border-radius: 18px 18px 0 0;
  background: #fff;
  scroll-snap-align: start;
  transition: transform .25s ease, box-shadow .25s ease;
}

.hvac-case-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgb(23 61 100 / 14%);
}

.hvac-case-card .case-image {
  height: auto;
  aspect-ratio: 1522 / 1237;
  margin: 0 -24px 22px;
  overflow: hidden;
  border-radius: 18px 18px 0 0;
  background: #dceeff;
}

.hvac-case-card .case-image img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 18px 18px 0 0;
  object-fit: cover;
}

.hvac-case-card h3 {
  margin: 0 0 14px;
  color: #18334f;
  font-size: 21px;
  line-height: 1.35;
}

.hvac-case-card p {
  margin: 0;
  color: #66788a;
  font-size: 15px;
  line-height: 1.7;
}

.hvac-project-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  padding: 0 0 5px;
  border: 1px solid #b9d5ee;
  border-radius: 50%;
  background: #fff;
  color: #2877df;
  font: 400 42px/1 Arial, sans-serif;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background .2s ease, color .2s ease, opacity .2s ease;
}

.hvac-project-arrow--prev { left: 0; }
.hvac-project-arrow--next { right: 0; }

.hvac-project-arrow:hover:not(:disabled),
.hvac-project-arrow:focus-visible:not(:disabled) {
  background: #2877df;
  color: #fff;
  outline: 0;
}

.hvac-project-arrow:disabled {
  opacity: .3;
  cursor: default;
}

@media(max-width:1100px) {
  .hvac-case-card { flex-basis: calc((100% - 24px) / 2); }
}

@media(max-width:650px) {
  .hvac-project-carousel { padding: 0 46px; }
  .hvac-case-grid { gap: 18px; }
  .hvac-case-card { flex-basis: 100%; }
  .hvac-case-card .case-image { height: 240px; }
  .hvac-project-arrow { width: 38px; height: 38px; font-size: 32px; }
}

/* Preserve the boiler thermostat certification section's original visual system. */
#hvac-certifications {
  background: #fff;
}

#hvac-certifications .home-certifications-rail {
  grid-template-columns: repeat(6, minmax(180px, 220px));
  justify-content: center;
  gap: clamp(22px, 2.5vw, 44px);
}

@media(max-width:560px) {
  #hvac-certifications .home-certifications-rail {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(230px, 76vw);
    justify-content: start;
    overflow-x: auto;
  }
}

.hvac-compat-arrow {
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  padding: 0 0 5px;
  border: 1px solid #b9d5ee;
  border-radius: 50%;
  background: #fff;
  color: #2877df;
  font: 400 42px/1 Arial, sans-serif;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

.hvac-compat-arrow:hover,
.hvac-compat-arrow:focus-visible {
  background: #2877df;
  color: #fff;
  outline: 0;
  transform: scale(1.06);
}

.hvac-compat-count {
  position: static;
  grid-column: 2;
  grid-row: 2;
  justify-self: center;
  margin: 10px 0 0;
  color: #6b8196;
  font-size: 13px;
  font-weight: 700;
}

/* Ventilation controller animation embedded in the zoned-airflow split */
.hvac-zoned-layout {
  display: flex;
  flex-direction: column;
}

.hvac-zoned-copy {
  order: 1;
}

.hvac-zoned-copy .gas-title,
.hvac-zoned-copy .hvac-lead {
  max-width: 1120px;
}

.hvac-zoned-layout .numbered-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 38px;
}

.hvac-zoned-layout .numbered-features article {
  grid-template-columns: 48px minmax(0, 1fr);
  align-content: start;
  padding: 24px 22px;
  border: 1px solid #d9e4ef;
  background: #f7faff;
}

.hvac-zoned-animation {
  order: 2;
  min-width: 0;
  overflow: visible;
  margin-top: 52px;
}

.hvac-zoned-animation .zoned-airflow__diagram {
  width: 100%;
  min-height: 880px;
  margin: 0 0 -220px;
  zoom: 1;
}

@media(max-width:900px) {
  .hvac-zoned-layout .numbered-features { grid-template-columns: 1fr; }
  .hvac-zoned-animation { overflow-x: auto; }
  .hvac-zoned-animation .zoned-airflow__diagram {
    width: 1100px;
    min-width: 1100px;
    min-height: 880px;
    margin-bottom: -220px;
    zoom: 1;
  }
}

@media(max-width:900px) {
  .hvac-compat-stage { min-height: 260px; }
}

@media(max-width:560px) {
  .hvac-compat-carousel {
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    gap: 8px;
  }
  .hvac-compat-arrow { width: 40px; height: 40px; font-size: 34px; }
}

/* Real-product HVAC system topology */
#system-architecture .gas-container--wide {
  width: calc(100% - 32px);
  max-width: none;
}

.hvac-topology-scroller {
  width: 100%;
  margin-top: 46px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-color: #8db4df #e3edf7;
}

.hvac-topology-canvas {
  position: relative;
  width: 1500px;
  min-width: 1500px;
  min-height: 900px;
  margin: 0 auto;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.hvac-topology-lines {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hvac-topology-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
  vector-effect: non-scaling-stroke;
  animation: hvacTopologyDash 1.8s linear infinite;
}

.hvac-topology-line--data { stroke: #1686d4; }
.hvac-topology-line--wireless { stroke: #3979f6; stroke-dasharray: 10 9; }
.hvac-topology-line--gateway { stroke: #7b72e9; }
.hvac-topology-line--switch { stroke: #42a86d; stroke-dasharray: 12 8; }
.hvac-topology-line--airflow { stroke: #70baf0; stroke-dasharray: 7 10; }

.hvac-topology-cloud,
.hvac-topology-controller,
.hvac-topology-lane {
  position: relative;
  z-index: 2;
}

.hvac-topology-cloud {
  position: absolute;
  top: 38px;
  left: 40px;
  display: grid;
  width: 280px;
  min-height: 112px;
  place-content: center;
  padding: 18px 24px;
  text-align: center;
}

.hvac-topology-cloud strong { color: #173653; font-size: 18px; line-height: 1.35; }
.hvac-topology-cloud small { margin-top: 8px; color: #3979f6; font-weight: 700; }

.hvac-topology-controller {
  position: absolute;
  top: 250px;
  left: 40px;
  display: grid;
  grid-template-rows: 190px auto;
  width: 310px;
  min-height: 350px;
  gap: 12px;
  justify-items: center;
  align-content: start;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #173653;
  box-shadow: none;
  text-align: center;
}

.hvac-topology-controller img {
  width: 235px;
  height: 190px;
  object-fit: contain;
  filter: drop-shadow(0 14px 18px rgb(24 62 98 / 20%));
}

.hvac-topology-controller strong,
.hvac-topology-controller small,
.hvac-topology-controller span { display: block; }
.hvac-topology-controller strong { font-size: 19px; line-height: 1.3; }
.hvac-topology-controller small { margin-top: 8px; color: #3979f6; font-size: 12px; }
.hvac-topology-controller span { margin-top: 8px; color: #637b92; font-size: 11px; line-height: 1.5; }

.hvac-topology-lane {
  position: absolute;
  left: 430px;
  right: 24px;
  display: grid;
  grid-template-columns: 240px 170px minmax(0, 1fr);
  min-height: 170px;
  align-items: center;
  column-gap: 22px;
}

.hvac-topology-lane--fresh-air { top: 70px; }
.hvac-topology-lane--air-conditioning { top: 270px; }
.hvac-topology-lane--heating { top: 470px; }
.hvac-topology-lane--fragrance { top: 670px; }

.hvac-topology-lane > header {
  align-self: center;
  padding-left: 20px;
}

.hvac-topology-lane > header span {
  color: #79aee5;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.4px;
}

.hvac-topology-lane > header h3 {
  margin: 5px 0 7px;
  color: #126fb7;
  font-size: 20px;
  line-height: 1.25;
}

.hvac-topology-lane > header small {
  display: inline-block;
  color: #58728b;
  font-size: 12px;
  font-weight: 700;
}

.hvac-topology-module {
  display: flex;
  grid-column: 3;
  height: 170px;
  align-items: stretch;
  justify-content: space-around;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid #d9e6f2;
  border-radius: 18px;
  background: rgb(255 255 255 / 78%);
  box-shadow: 0 12px 30px rgb(31 76 119 / 8%);
}

.hvac-topology-lane--fresh-air .hvac-topology-module,
.hvac-topology-lane--fragrance .hvac-topology-module { grid-column: 2 / 4; }

.hvac-topology-module figure,
.hvac-topology-node {
  display: flex;
  min-width: 0;
  flex: 1 1 0;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  text-align: center;
}

.hvac-topology-module img {
  width: 100%;
  height: 118px;
  object-fit: contain;
  filter: drop-shadow(0 9px 12px rgb(29 66 104 / 16%));
}

.hvac-topology-module figcaption,
.hvac-topology-node figcaption {
  margin-top: 4px;
  color: #173653;
  font-size: 12px;
  font-weight: 700;
}

.hvac-topology-node,
.hvac-topology-node-group {
  grid-column: 2;
  height: 150px;
  transform: translateX(-48px);
}

.hvac-topology-node img {
  width: 135px;
  height: 105px;
  object-fit: contain;
  filter: drop-shadow(0 9px 12px rgb(29 66 104 / 18%));
}

.hvac-topology-node-group {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 4px;
}

.hvac-topology-node-group .hvac-topology-node { grid-column: auto; height: 140px; }
.hvac-topology-node-group .hvac-topology-node img { width: 76px; height: 82px; }
.hvac-topology-node-group b { color: #7890a7; font-size: 10px; }

.hvac-topology-canvas.is-visible .hvac-topology-controller {
  animation: none;
}

@keyframes hvacTopologyDash {
  to { stroke-dashoffset: -38; }
}

@media(max-width:900px) {
  .hvac-topology-scroller {
    margin-right: -20px;
    padding-right: 20px;
  }
}

@media(prefers-reduced-motion:reduce) {
  .hvac-topology-line,
  .hvac-topology-controller {
    animation: none !important;
  }
}
#hvac-trusted-customers {
  background: #f4f8fc;
}

#hvac-trusted-customers .gas-supplier-logos span {
  min-height: 88px;
}

#hvac-trusted-customers .gas-supplier-logos img {
  width: min(100%, 210px);
  height: 64px;
  max-width: none;
  max-height: none;
  object-fit: contain;
}
#hvac-components-faq {
  background: #fff;
}
#maxmac-projects {
  background: #F3F8FD;
}
#zoned-airflow {
  background: #F3F8FD;
}
.hvac-compat-copy {
  display: flex;
  flex-direction: column;
  align-self: stretch;
}

.hvac-compat-copy .hvac-section-cta {
  margin-top: 28px;
  align-self: flex-start;
}

.hvac-iaq-media {
  display: flex;
  flex-direction: column;
  align-self: stretch;
}

.hvac-iaq-media .hvac-iaq-carousel {
  flex: 1;
}

.hvac-iaq-media .hvac-section-cta {
  align-self: center;
  margin-top: auto;
}

.hvac-section-cta {
  min-height: 50px;
}

@media (max-width: 900px) {
  .hvac-compat-copy .hvac-section-cta,
  .hvac-iaq-media .hvac-section-cta {
    margin-top: 28px;
  }
}
.hvac-components-page section h2 {
  font-size: clamp(28px, 2.1vw, 36px) !important;
  line-height: 1.13 !important;
  font-weight: 600 !important;
}

/* Premium wide HVAC control matrix */
#system-architecture {
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 30%, rgb(72 136 248 / 8%), transparent 28%),
    linear-gradient(180deg, #f8fbfe 0%, #eef5fb 100%);
}

#system-architecture .gas-container--wide {
  width: min(100% - 40px, 1920px);
  max-width: none;
}

#system-architecture .hvac-centered {
  max-width: 920px;
}

.hvac-topology-scroller {
  width: 100%;
  margin-top: 44px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: #b7cbe0 transparent;
}

.hvac-topology-canvas {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(980px, 3.28fr);
  grid-template-rows: 74px repeat(4, minmax(138px, auto));
  width: 100%;
  min-width: 1320px;
  min-height: 0;
  gap: 12px 18px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: blur(16px);
}

.hvac-topology-lines {
  display: none;
}

.hvac-topology-cloud {
  position: relative;
  inset: auto;
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  width: auto;
  min-height: 0;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  border-radius: 15px;
  background: linear-gradient(105deg, #102f4d 0%, #174b75 62%, #226da6 100%);
  box-shadow: 0 14px 30px rgb(15 55 88 / 16%);
  text-align: left;
}

.hvac-topology-cloud strong {
  color: #fff;
  font-size: 17px;
  letter-spacing: 0.01em;
}

.hvac-topology-cloud small {
  margin: 0;
  padding: 8px 13px;
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 999px;
  background: rgb(255 255 255 / 9%);
  color: #a9d7ff;
  font-size: 11px;
  letter-spacing: 0.08em;
}

.hvac-topology-controller {
  position: relative;
  inset: auto;
  grid-column: 1;
  grid-row: 2 / span 4;
  display: flex;
  width: auto;
  min-height: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 18px;
  padding: 34px 25px;
  border: 1px solid #d8e6f2;
  border-radius: 18px;
  background: linear-gradient(160deg, #fff 0%, #f3f8fc 100%);
  box-shadow: 0 18px 42px rgb(31 76 119 / 9%);
  color: #173653;
  text-align: center;
}

.hvac-topology-controller::after {
  content: "中央控制";
  order: -1;
  color: #438cf0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.hvac-topology-controller img {
  width: min(84%, 220px);
  height: 190px;
  object-fit: contain;
  filter: drop-shadow(0 18px 24px rgb(24 62 98 / 20%));
}

.hvac-topology-controller strong {
  font-size: 19px;
  line-height: 1.32;
}

.hvac-topology-controller small {
  margin-top: 9px;
  color: #3979f6;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.hvac-topology-controller span {
  max-width: 220px;
  margin: 10px auto 0;
  color: #667d92;
  font-size: 10px;
  line-height: 1.65;
}

.hvac-topology-lane {
  position: relative;
  inset: auto;
  grid-column: 2;
  display: grid;
  grid-template-columns: minmax(190px, 0.75fr) minmax(140px, 0.55fr) minmax(0, 2.7fr);
  width: auto;
  min-height: 138px;
  align-items: center;
  column-gap: 18px;
  padding: 12px 18px 12px 24px;
  border: 1px solid #dce8f3;
  border-radius: 17px;
  background: rgb(255 255 255 / 87%);
  box-shadow: 0 10px 28px rgb(35 79 119 / 6%);
}

.hvac-topology-lane::before {
  content: "";
  position: absolute;
  top: 22px;
  bottom: 22px;
  left: -19px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, #2388e8, #67b7ff);
  box-shadow: 0 0 0 5px #eef5fb;
}

.hvac-topology-lane::before {
  display: none;
}

.hvac-topology-lane--fresh-air { grid-row: 2; }
.hvac-topology-lane--air-conditioning { grid-row: 3; }
.hvac-topology-lane--heating { grid-row: 4; }
.hvac-topology-lane--fragrance { grid-row: 5; }

.hvac-topology-lane > header {
  position: relative;
  align-self: center;
  padding: 0 6px;
}

.hvac-topology-lane > header::after {
  content: "";
  position: absolute;
  top: 4px;
  right: -10px;
  width: 3px;
  height: calc(100% - 8px);
  min-height: 72px;
  border-radius: 3px;
  background: linear-gradient(180deg, #2388e8, #67b7ff);
}

.hvac-topology-lane > header span {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e9f3ff;
  color: #438cf0;
  font-size: 10px;
}

.hvac-topology-lane > header h3 {
  margin: 8px 0 5px;
  color: #173653;
  font-size: 18px;
  line-height: 1.22;
}

.hvac-topology-lane > header small {
  color: #6c8195;
  font-size: 10px;
  letter-spacing: 0.03em;
}

.hvac-topology-module {
  display: flex;
  grid-column: 3;
  height: 112px;
  align-items: stretch;
  justify-content: stretch;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.hvac-topology-lane--fresh-air .hvac-topology-module,
.hvac-topology-lane--fragrance .hvac-topology-module {
  grid-column: 2 / 4;
}

.hvac-topology-module figure {
  position: relative;
  display: flex;
  min-width: 0;
  flex: 1 1 0;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  padding: 0 12px;
  border-left: 1px solid #e3edf6;
  text-align: center;
}

.hvac-topology-module figure:first-child {
  border-left: 0;
}

.hvac-topology-module img {
  width: 100%;
  height: 76px;
  object-fit: contain;
  filter: drop-shadow(0 8px 10px rgb(29 66 104 / 13%));
  transition: transform 0.28s ease;
}

.hvac-topology-module figure:hover img,
.hvac-topology-node:hover img {
  transform: translateY(-4px);
}

.hvac-topology-module figcaption,
.hvac-topology-node figcaption {
  margin-top: 3px;
  color: #294b68;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
}

.hvac-topology-node,
.hvac-topology-node-group {
  grid-column: 2;
  height: 108px;
  transform: none;
}

.hvac-topology-node {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  padding: 0 8px;
  text-align: center;
}

.hvac-topology-node img {
  width: 112px;
  height: 74px;
  object-fit: contain;
  filter: drop-shadow(0 8px 10px rgb(29 66 104 / 14%));
  transition: transform 0.28s ease;
}

.hvac-topology-node-group {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 5px;
}

.hvac-topology-node-group .hvac-topology-node {
  grid-column: auto;
  height: 104px;
}

.hvac-topology-node-group .hvac-topology-node img {
  width: 68px;
  height: 66px;
}

.hvac-topology-node-group b {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 50%;
  background: #eef4f9;
  color: #8aa0b4;
  font-size: 8px;
}

#system-architecture .arch-legend {
  display: none;
}

#system-architecture .hvac-caption {
  max-width: 980px;
  margin-top: 30px;
  font-size: 14px;
  line-height: 1.7;
}

@media (max-width: 900px) {
  #system-architecture .gas-container--wide {
    width: calc(100% - 20px);
  }

  .hvac-topology-scroller {
    margin-right: -10px;
    padding: 0 10px 12px 0;
  }

  .hvac-topology-canvas {
    width: 1260px;
    min-width: 1260px;
    grid-template-columns: 250px 956px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hvac-topology-module img,
  .hvac-topology-node img {
    transition: none;
  }
}

/* Left-side control hub: connectivity card + A63 product card */
.hvac-topology-canvas {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(980px, 3.28fr);
  grid-template-rows: repeat(4, minmax(172px, auto));
}

.hvac-topology-cloud {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  min-height: 0;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  padding: 26px 24px;
  border-radius: 18px;
  background: linear-gradient(145deg, #102f4d 0%, #1d6498 100%);
}

.hvac-topology-cloud::before {
  content: "互联生态";
  color: #78beff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.17em;
}

.hvac-topology-cloud strong {
  max-width: 230px;
  color: #fff;
  font-size: 15px;
  line-height: 1.45;
}

.hvac-topology-cloud small {
  padding: 7px 11px;
  font-size: 9px;
}

.hvac-topology-controller {
  grid-column: 1;
  grid-row: 2 / span 3;
  justify-content: flex-start;
  gap: 14px;
  padding: 30px 24px 26px;
  background:
    radial-gradient(circle at 50% 28%, rgb(72 136 248 / 13%), transparent 34%),
    linear-gradient(155deg, #fff 0%, #f3f8fc 100%);
}

.hvac-topology-controller::before {
  content: "A63 智能控制中枢";
  order: -2;
  align-self: flex-start;
  padding: 7px 10px;
  border-radius: 999px;
  background: #e9f3ff;
  color: #3979f6;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.hvac-topology-controller::after {
  content: "集成空气质量监测 · 多系统控制";
  order: 3;
  margin-top: 2px;
  color: #7890a6;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.hvac-topology-controller img {
  width: min(92%, 250px);
  height: 245px;
  margin-top: 8px;
}

.hvac-topology-module {
  height: 138px;
}

.hvac-topology-module img {
  height: 102px;
}

.hvac-topology-node,
.hvac-topology-node-group {
  height: 132px;
}

.hvac-topology-node img {
  width: 138px;
  height: 98px;
}

.hvac-topology-node-group .hvac-topology-node {
  height: 126px;
}

.hvac-topology-node-group .hvac-topology-node img {
  width: 84px;
  height: 82px;
}

/* Directional system-flow arrows */
.hvac-topology-module figure {
  overflow: visible;
  border-left: 0;
}

.hvac-topology-module figure:not(:last-child)::after,
.hvac-topology-node::after,
.hvac-topology-node-group::after,
.hvac-topology-lane--fragrance .hvac-topology-module::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 50%;
  right: -18px;
  width: 34px;
  height: 12px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, #91cdfc, #328fe8);
  clip-path: polygon(0 42%, 72% 42%, 72% 0, 100% 50%, 72% 100%, 72% 58%, 0 58%);
  opacity: 0.82;
  animation: hvacTopologyArrowFlow 1.6s ease-in-out infinite;
}

.hvac-topology-node,
.hvac-topology-node-group,
.hvac-topology-lane--fragrance .hvac-topology-module {
  position: relative;
  overflow: visible;
}

.hvac-topology-node::after,
.hvac-topology-node-group::after {
  right: -24px;
}

.hvac-topology-node-group .hvac-topology-node::after {
  display: none;
}

.hvac-topology-lane--fragrance .hvac-topology-module::before {
  right: auto;
  left: -24px;
}

.hvac-topology-module figure:not(:last-child)::after {
  width: 52px;
  right: -27px;
  animation: hvacTopologyArrowFlow 1.6s ease-in-out infinite;
}

.hvac-topology-node::after,
.hvac-topology-node-group::after {
  width: 88px;
  animation: hvacTopologyArrowFlow 1.6s ease-in-out infinite;
}

.hvac-topology-lane--fragrance .hvac-topology-module::before {
  width: 92px;
  animation: hvacTopologyArrowFlow 1.6s ease-in-out infinite;
}

/* Fine-tuned flow positions requested for the heating and fragrance lanes */
.hvac-topology-lane--air-conditioning .hvac-topology-node::after {
  right: -110px;
}

.hvac-topology-lane--heating .hvac-topology-node-group::after {
  right: -118px;
}

.hvac-topology-lane--fragrance .hvac-topology-module::before {
  left: 76px;
}

.hvac-topology-lane--fragrance .hvac-topology-module figure::after {
  display: none;
}

@keyframes hvacTopologyArrowFlow {
  0%, 100% {
    transform: translate(-4px, -50%);
    opacity: 0.38;
  }
  50% {
    transform: translate(5px, -50%);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hvac-topology-module figure:not(:last-child)::after,
  .hvac-topology-node::after,
  .hvac-topology-node-group::after,
  .hvac-topology-lane--fragrance .hvac-topology-module::before {
    animation-name: hvacTopologyArrowFlow;
    animation-play-state: paused;
    transform: translateY(-50%);
    opacity: 0.8;
  }
}

.hvac-topology-controller strong {
  font-size: 20px;
}

.hvac-topology-controller small {
  padding-bottom: 13px;
  border-bottom: 1px solid #dce8f2;
}

.hvac-topology-controller span {
  margin-top: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f3f7fb;
  line-height: 1.7;
}

.hvac-topology-controller::before {
  content: none;
}

.hvac-topology-controller::after {
  content: none;
}

.hvac-topology-cloud strong {
  font-size: 20px;
  line-height: 1.4;
}

.hvac-topology-controller-images {
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  width: 100%;
  flex: 1;
  align-items: center;
  justify-items: center;
  gap: 8px;
  min-height: 0;
}

.hvac-topology-controller-images img {
  width: min(100%, 270px);
  height: min(100%, 205px);
  margin: 0;
  object-fit: contain;
}

/* Enlarged product imagery across all system lanes */
.hvac-topology-module img {
  width: min(94%, 180px);
  height: 120px;
}

.hvac-topology-node img {
  width: 160px;
  height: 116px;
}

.hvac-topology-node-group .hvac-topology-node img {
  width: 100px;
  height: 96px;
}

.hvac-topology-lane--air-conditioning .hvac-topology-module img,
.hvac-topology-lane--heating .hvac-topology-module img,
.hvac-topology-lane--fragrance .hvac-topology-module img {
  width: min(100%, 230px);
  height: 152px;
}

.hvac-topology-lane--air-conditioning .hvac-topology-node img {
  width: 190px;
  height: 142px;
}

.hvac-topology-lane--heating .hvac-topology-node-group .hvac-topology-node img {
  width: 128px;
  height: 118px;
}

.hvac-topology-lane--heating .hvac-topology-node-group {
  width: 290px;
  grid-template-columns: 120px 26px 120px;
  gap: 12px;
  justify-self: start;
  margin-left: 24px;
}

.hvac-topology-lane--heating .hvac-topology-node-group .hvac-topology-node {
  width: 120px;
  padding: 0;
}

.hvac-topology-lane > header {
  position: relative;
  z-index: 4;
}

.hvac-topology-lane > header::after {
  right: -10px;
  z-index: 5;
}

.hvac-topology-lane--heating .hvac-topology-module figure:first-child {
  transform: translateX(130px);
}

.hvac-topology-lane--heating .hvac-topology-module figure:first-child::after {
  right: 103px;
}

.hvac-topology-module figcaption,
.hvac-topology-node figcaption {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}

.hvac-topology-lane--fresh-air { grid-row: 1; }
.hvac-topology-lane--air-conditioning { grid-row: 2; }
.hvac-topology-lane--heating { grid-row: 3; }
.hvac-topology-lane--fragrance { grid-row: 4; }

@media (max-width: 900px) {
  .hvac-topology-canvas {
    width: 1280px;
    min-width: 1280px;
    grid-template-columns: 270px 956px;
  }
}