.comfort-connection{background:#142d24;color:#f7f8f4;position:relative;isolation:isolate;scroll-margin-top:24px}
.comfort-connection [hidden]{display:none!important}
.connection-heading{padding:76px 5% 38px;max-width:1440px}
.connection-eyebrow{margin:0 0 22px;font-size:14px;font-weight:700;letter-spacing:.13em;color:#b4ccb9}
.comfort-home .comfort-connection h2{font-size:clamp(34px,3.1vw,60px);line-height:1.15;letter-spacing:-.035em;font-weight:600;margin:0;color:#f7f8f4}
.connection-intro{font-size:17px;line-height:1.7;max-width:760px;margin:24px 0 0;color:#c8d5ca}
.connection-toolbar{padding:8px 5% 20px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.connection-toolbar p{margin:0;font-size:13px;letter-spacing:.02em;color:#c8d5ca}
.comfort-connection button{cursor:pointer}
.connection-zoom{min-height:44px;border:1px solid #92ab99;border-radius:6px;padding:10px 17px;color:#f7f8f4;background:transparent;font-size:13px;white-space:nowrap}
.connection-zoom:hover{background:#254737}
.connection-viewport{width:100%;overflow:auto;overscroll-behavior-x:contain;scrollbar-color:#6b8875 #142d24}
.connection-scene{position:relative;aspect-ratio:1536/824;width:100%}
.connection-render{display:block;width:100%;height:auto}
.connection-viewport.is-zoomed .connection-scene{width:160%;min-width:1050px}
.connection-overlay{position:absolute;inset:0}
.connection-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.connection-leader{stroke:#f0f4e9;stroke-width:1.3;fill:none;opacity:.85}
.connection-anchor{fill:#f5f6ed;stroke:#243f31;stroke-width:2}
.connection-hotspot{position:absolute;left:var(--lx);top:var(--ly);max-width:var(--w);padding:7px 10px 7px 0;display:flex;gap:9px;align-items:center;text-align:left;border:0;background:transparent;color:#fff;font-size:clamp(12px,1.05vw,18px);font-weight:600;line-height:1.45;text-shadow:0 1px 5px #000c;border-radius:5px;min-height:44px}
.connection-hotspot>span:first-child,.connection-mobile-list button>span{display:grid;place-items:center;width:24px;height:24px;flex-shrink:0;border:1px solid #d1ddcc;border-radius:50%;font-size:14px;background:#173328df;box-shadow:0 2px 12px #0002}
.connection-hotspot[aria-expanded=true]>span:first-child{background:#e6f4dd;color:#163023;text-shadow:none}
.connection-hotspot--aux{left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:44px;max-width:44px;height:44px;padding:0;justify-content:center;text-shadow:none}
.connection-hotspot--aux>span:first-child{width:19px;height:19px;font-size:14px;background:#173328ef}
.connection-highlight{opacity:0;fill:#daedaf16;stroke:#e2f2c4;stroke-width:2;transition:opacity .2s}
.connection-highlight.is-active{opacity:1}
.connection-flow{fill:none;stroke-width:3;stroke-linecap:round;stroke-dasharray:5 49;stroke:#f4ba80;opacity:.9;animation:connection-flow 2.2s linear infinite;animation-play-state:paused}
.connection-flow--cold{stroke:#94d7e7}
.comfort-connection.is-flowing .connection-flow{animation-play-state:running}
@keyframes connection-flow{to{stroke-dashoffset:-54}}
.connection-wire{fill:none;stroke-width:1.8;stroke:#eee5b0;stroke-dasharray:3 6;opacity:.7}
.connection-wire--control{stroke:#e9eeee;stroke-dasharray:8 5}
.connection-bottom{padding:24px 5% 44px;position:relative}
.connection-legend{display:flex;align-items:center;flex-wrap:wrap;gap:14px 24px;font-size:14px;color:#c8d5ca}
.connection-legend>span{display:flex;align-items:center;gap:8px}
.connection-swatch{display:block;width:20px;height:2px;background:#f4ba80}
.connection-swatch--cold{background:#94d7e7}
.connection-swatch--power{background:repeating-linear-gradient(90deg,#eee5b0 0 3px,transparent 3px 6px)}
.connection-swatch--control{background:repeating-linear-gradient(90deg,#e9eeee 0 7px,transparent 7px 10px)}
.connection-legend button{min-height:44px;margin-left:auto;background:transparent;border:0;padding:8px 0;color:#e1eadd;text-decoration:underline;text-underline-offset:4px;font-size:14px}
.connection-details{position:relative;margin-top:20px;padding:24px 56px 24px 24px;background:#f3f4ed;color:#26392e;border-radius:8px;box-shadow:0 8px 40px #081b1926;max-width:770px;border-left:3px solid #a5c68b}
.connection-details h3{margin:0 0 10px;font-size:20px;font-weight:600;letter-spacing:-.02em}
.connection-details p{margin:8px 0;font-size:14px;line-height:1.65;color:#43594a}
.connection-details .connection-detail-note{font-size:14px;color:#546a5a}
.connection-details a{display:inline-flex;min-height:44px;align-items:center;color:#087447;font-size:14px;font-weight:700;text-underline-offset:4px;margin-top:4px}
.connection-detail-close{position:absolute;right:7px;top:7px;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:#33513d;font-size:25px}
.connection-aux{display:flex;gap:8px 20px;flex-wrap:wrap;margin-top:18px}
.connection-aux button{font-size:14px;min-height:44px;border:0;border-bottom:1px solid #69816f;background:none;color:#d1dfd0;padding:8px 0}
.connection-aux button[aria-expanded=true]{color:#fff;border-color:#e0f8b3}
.connection-footnote{max-width:1000px;margin:24px 0 0;font-size:13px;line-height:1.7;color:#bacabc}
.connection-project-note{max-width:960px;margin:10px 0 0;font-size:14px;line-height:1.7;color:#a9bdad}
.connection-mobile-list{display:none}
.comfort-connection :is(button,a,[tabindex]):focus-visible{outline:3px solid #cfeaa4;outline-offset:4px}
.connection-details :is(button,a):focus-visible{outline-color:#087447}
@container kelet (min-width:901px){
 .connection-overlay .connection-details{position:absolute;left:var(--card-x);top:var(--card-y);width:340px;max-width:33%;margin:0;z-index:4;padding:20px 44px 20px 22px;box-shadow:0 10px 45px #0005;text-shadow:none}
 .connection-overlay .connection-details h3{font-size:17px}
 .connection-overlay .connection-details p{font-size:13px}
 .connection-overlay .connection-details .connection-detail-note{font-size:14px}
}
@container kelet (max-width:900px){
 .connection-heading{padding:52px 5% 26px}
 .connection-intro{font-size:16px}
 .connection-toolbar{padding-bottom:18px;align-items:flex-start}
 .connection-toolbar p{max-width:180px;line-height:1.6}
 .connection-leaders{display:none}
 .connection-hotspot{left:var(--x);top:var(--y);transform:translate(-50%,-50%);max-width:none;width:44px;height:44px;padding:0;justify-content:center}
 .connection-hotspot>span:nth-child(2){display:none}
 .connection-hotspot>span:first-child{width:25px;height:25px}
 .connection-hotspot--aux{display:none}
 .connection-mobile-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
 .connection-mobile-list button{display:flex;gap:9px;align-items:center;min-height:52px;text-align:left;font-size:14px;line-height:1.4;color:#e7eee5;border:1px solid #526e5b;border-radius:6px;padding:8px;background:transparent}
 .connection-mobile-list button[aria-expanded=true]{background:#315541;border-color:#cfe3b4}
 .connection-legend{gap:8px 18px;font-size:14px}
 .connection-legend button{margin-left:0}
 .connection-details{max-width:none;padding:20px 46px 20px 20px}
 .connection-details h3{font-size:19px}
 .connection-bottom{padding-top:18px}
 .connection-flow{stroke-width:4}
 .connection-wire{stroke-width:2.5}
}
@media(prefers-reduced-motion:reduce){.connection-flow{animation:none!important}.connection-highlight{transition:none}.connection-legend button[data-connection-motion]{display:none}}

.connection-wire--mains{stroke:#b6c6e4;stroke-dasharray:2 7;stroke-width:1.4}
.connection-swatch--mains{background:repeating-linear-gradient(90deg,#b6c6e4 0 2px,transparent 2px 7px)}