[data-sig="hvac-thermal"]{height:210dvh;position:relative}[data-sig="hvac-thermal"] .stage{height:100dvh;min-height:680px;position:sticky;top:0;overflow:hidden;background:var(--paper);display:flex;flex-direction:column}[data-sig="hvac-thermal"] .hero-copy{width:100%;display:flex;justify-content:space-between;align-items:start;padding-top:48px;z-index:3}[data-sig="hvac-thermal"] .hero-copy h1{font-size:clamp(56px,6.2vw,88px)}[data-sig="hvac-thermal"] .hero-copy p{max-width:440px;margin:20px 0 24px}[data-sig="hvac-thermal"] .reading{text-align:right;padding-top:8px}[data-sig="hvac-thermal"] .reading>span{display:block;font-size:14px}[data-sig="hvac-thermal"] .reading output{display:block;font-size:104px;line-height:1.1;letter-spacing:-.06em;font-variant-numeric:tabular-nums}[data-sig="hvac-thermal"] .reading output span{font-size:.5em;vertical-align:top}[data-sig="hvac-thermal"] .house{position:absolute;left:35%;right:0;top:28%;bottom:58px;overflow:hidden}[data-sig="hvac-thermal"] .house picture,[data-sig="hvac-thermal"] .house img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}[data-sig="hvac-thermal"] .thermal-image{opacity:var(--thermal,1)}[data-sig="hvac-thermal"] .cool-room{position:absolute;top:25%;height:21%;width:12%;background:#1368ab;mix-blend-mode:color;opacity:var(--room,0);border-radius:15%;pointer-events:none}[data-sig="hvac-thermal"] .room-0{left:21%}[data-sig="hvac-thermal"] .room-1{left:33%}[data-sig="hvac-thermal"] .room-2{left:46%}[data-sig="hvac-thermal"] .room-3{left:58%}[data-sig="hvac-thermal"] .room-4{left:71%}[data-sig="hvac-thermal"] .image-note{position:absolute;bottom:12px;left:16px;font-size:11px;background:var(--paper);padding:5px 10px;color:var(--ink);z-index:2}[data-sig="hvac-thermal"] .hero-bottom{display:flex;justify-content:space-between;position:absolute;bottom:0;height:58px;align-items:center;width:100%;font-size:12px}[data-sig="hvac-thermal"] .hero-copy>div:first-child{max-width:480px}[data-sig="hvac-thermal"] .house{box-shadow:inset 0 0 0 1px var(--line)}@media(max-width:650px){[data-sig="hvac-thermal"]{height:175dvh}[data-sig="hvac-thermal"] .stage{min-height:700px}[data-sig="hvac-thermal"] .hero-copy{padding-top:28px;gap:12px}[data-sig="hvac-thermal"] .hero-copy h1{font-size:52px}[data-sig="hvac-thermal"] .hero-copy p{font-size:14px;max-width:270px;margin:16px 0 20px}[data-sig="hvac-thermal"] .hero-copy>div:first-child{max-width:270px}[data-sig="hvac-thermal"] .reading{position:absolute;right:24px;top:310px;background:var(--paper);padding:10px 14px;z-index:5}[data-sig="hvac-thermal"] .reading output{font-size:60px}[data-sig="hvac-thermal"] .reading>span{font-size:10px}[data-sig="hvac-thermal"] .house{left:0;top:42%;bottom:72px}[data-sig="hvac-thermal"] .house img{object-position:center}[data-sig="hvac-thermal"] .hero-bottom{height:72px;display:block;padding-top:12px}[data-sig="hvac-thermal"] .hero-bottom span{display:block;font-size:11px}[data-sig="hvac-thermal"] .image-note{font-size:9px;left:12px}}@media(prefers-reduced-motion:reduce){[data-sig="hvac-thermal"]{height:auto}[data-sig="hvac-thermal"] .stage{position:relative}[data-sig="hvac-thermal"] .thermal-image,[data-sig="hvac-thermal"] .cool-room{display:none}}
[data-sig="hvac-thermal"] .cool-room{inset:0;width:100%;height:100%;border-radius:0;mix-blend-mode:normal;background:url('../../img/house-cool.webp') center/cover no-repeat;clip-path:inset(0 var(--right) 0 var(--left));opacity:0}
[data-sig="hvac-thermal"] .room-0{--left:0%;--right:80%}
[data-sig="hvac-thermal"] .room-1{--left:20%;--right:60%}
[data-sig="hvac-thermal"] .room-2{--left:40%;--right:40%}
[data-sig="hvac-thermal"] .room-3{--left:60%;--right:20%}
[data-sig="hvac-thermal"] .room-4{--left:80%;--right:0%}
@media(max-width:650px){[data-sig="hvac-thermal"] .cool-room{background-image:url('../../img/house-cool-phone.webp')}}
@supports(animation-timeline:view()){
[data-sig="hvac-thermal"]{view-timeline-name:--house;view-timeline-axis:block}
[data-sig="hvac-thermal"] .thermal-image{animation:thermal-out linear both;animation-timeline:--house;animation-range:contain 72% contain 88%}
[data-sig="hvac-thermal"] .cool-room{animation:room-in linear both,thermal-out linear both;animation-timeline:--house,--house;animation-range:contain var(--start) contain var(--end),contain 72% contain 88%;animation-composition:replace,add}
[data-sig="hvac-thermal"] .room-0{--start:0%;--end:11%}
[data-sig="hvac-thermal"] .room-1{--start:12%;--end:23%}
[data-sig="hvac-thermal"] .room-2{--start:24%;--end:35%}
[data-sig="hvac-thermal"] .room-3{--start:36%;--end:47%}
[data-sig="hvac-thermal"] .room-4{--start:48%;--end:59%}
}
@keyframes thermal-out{from{opacity:1}to{opacity:0}}
@keyframes room-in{from{opacity:-1}to{opacity:0}}
[data-sig="hvac-thermal"] .tree-layer{opacity:0;pointer-events:none;transform:translateY(0)}
@supports(animation-timeline:view()){
[data-sig="hvac-thermal"] .tree-layer{animation:tree-enter linear both;animation-timeline:--house;animation-range:contain 88% contain 100%}
}
@keyframes tree-enter{from{opacity:0;transform:translateY(0)}to{opacity:1;transform:translateY(-4px)}}
@media(prefers-reduced-motion:reduce){[data-sig="hvac-thermal"] .tree-layer{display:none}}
@media(max-width:650px){[data-sig="hvac-thermal"] .tree-layer{display:none}}
[data-sig="hvac-thermal"] .hero-copy p{max-width:400px}
[data-sig="hvac-thermal"] .reading output>span{display:inline}