/* Motion enhances the existing content; it never gates access to it. */
.architecture-sequence{position:relative;background:#081712;color:#fff;margin-top:12px}.architecture-stage{position:relative;overflow:hidden;padding:28px 0 0}.architecture-top{display:flex;justify-content:space-between;align-items:center;gap:24px}.architecture-top .eyebrow{color:var(--lime);font-size:11px}.scene-skip{font-size:12px;min-height:44px;display:inline-flex;align-items:center;gap:16px;color:#d0e0d7}.architecture-layout{position:relative;display:grid;grid-template-columns:.8fr 1.2fr;align-items:center;min-height:530px}.architecture-copy{position:relative;z-index:2;max-width:410px}.architecture-copy h2{font-size:clamp(40px,4.4vw,66px);line-height:1.07;letter-spacing:-.05em;margin-bottom:24px}.architecture-copy h2 span{color:var(--lime)}.architecture-copy p{font-size:16px;line-height:1.8;color:#b9cfc1;max-width:350px}.scene-hint{display:flex;align-items:center;gap:30px;margin-top:36px;font-size:10px;letter-spacing:.12em;color:#c4d6cc}.scene-hint span{font-size:23px}.architecture-art{position:relative;height:530px;min-width:0}.architecture-canvas,.architecture-fallback{position:absolute;inset:0}.architecture-canvas canvas{width:100%;height:100%;display:block}.architecture-fallback{display:flex;align-items:center;justify-content:center}.architecture-fallback svg{width:100%;max-height:90%}.scene-drawing-label{position:absolute;bottom:15px;right:0;font-size:9px;color:#98b7a6;letter-spacing:.1em}.architecture-screen{max-width:1050px;background:#1c3229;padding:14px;border:1px solid #50776470;border-radius:12px;margin-bottom:32px;box-shadow:0 25px 80px #0004}.scene-screen-title{display:flex;justify-content:space-between;gap:16px;padding:4px 4px 16px;color:#cbdfd1;font-size:10px;letter-spacing:.06em}.scene-screen-crop{aspect-ratio:2.12;overflow:hidden;border-radius:5px}.scene-screen-crop img{display:block;width:100%;height:auto}.scene-controls{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;position:relative;z-index:4;padding:16px 0 30px}.scene-controls button{display:grid;grid-template-columns:30px 1fr;text-align:left;align-content:start;gap:6px 12px;background:none;color:#99b1a2;border:0;border-top:1px solid #516e5e;padding:18px 0 0;min-height:85px}.scene-controls button>span{font-size:11px;padding-top:3px}.scene-controls strong{font-size:15px;font-weight:600}.scene-controls small{grid-column:2;font-size:12px;line-height:1.7}.scene-controls button[aria-pressed=true]{color:var(--lime);border-color:var(--lime)}.scene-progress{height:2px;background:#263e31}.scene-progress>span{display:block;height:100%;background:var(--lime);transform:scaleX(0);transform-origin:left}.scene-live{height:260svh}.scene-live .architecture-stage{height:100svh;min-height:620px;max-height:1050px;position:sticky;top:0;display:flex;flex-direction:column}.scene-live .architecture-layout{flex:1;width:min(1440px,calc(100% - var(--gutter)*2));min-height:0}.scene-live .architecture-art{height:100%;min-height:0}.scene-live .architecture-screen{position:absolute;left:50%;top:50%;width:min(1000px,calc(100% - var(--gutter)*2));margin:0;transform:translate(-50%,-50%);opacity:0;pointer-events:none;z-index:3}.scene-live .architecture-fallback{display:none}.scene-live .scene-controls{flex-shrink:0}.scene-static .scene-hint,.scene-static .scene-controls,.scene-static .scene-progress{display:none}.scene-static .architecture-screen{opacity:1!important}.scene-static .architecture-copy,.scene-static .architecture-art{opacity:1!important;transform:none!important}.scene-static .architecture-canvas{display:none}
.signal-story-layout{display:grid;grid-template-columns:.55fr 1.45fr;gap:48px;align-items:center}.signal-steps{display:flex;flex-direction:column;gap:4px}.signal-steps button{display:flex;align-items:flex-start;gap:18px;padding:22px 20px;background:none;border:0;border-left:2px solid var(--line);text-align:left;color:var(--muted);min-height:96px;transition:background .2s,border-color .2s}.signal-steps button>span{font-size:11px;margin-top:4px}.signal-steps strong{font-size:19px;color:var(--ink);font-weight:600}.signal-steps p{font-size:13px;line-height:1.7;margin-top:7px}.signal-steps button[aria-pressed=true]{border-left-color:var(--green);background:var(--surface)}.signal-image{min-width:0;padding:14px;background:var(--surface);border:1px solid var(--line);border-radius:10px}.signal-image .ui-capture{aspect-ratio:1.75;display:flex;align-items:center;background:white}.signal-image img{max-height:100%;object-fit:contain}.signal-image figcaption{padding:12px 5px 0}.signal-image.changed{animation:signal-change .25s ease-out}.delivery-animation-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:center}.cad-plan{border:1px solid #ffffff20;border-radius:8px;background:#10251a}.cad-plan svg{display:block;width:100%;height:auto}.delivery-stages{list-style:none;margin:0;padding:0}.delivery-stages li{display:flex;gap:24px;padding:22px 0;border-bottom:1px solid #ffffff20}.delivery-stages li>span{color:var(--lime);font-size:12px;padding-top:5px}.delivery-stages h3{font-size:23px;margin-bottom:8px}.delivery-stages p{font-size:14px;line-height:1.8;color:var(--on-dark-muted)}.delivery-stages li.in-view{animation:gentle-reveal .45s both}.cad-plan.in-view .cad-signal{animation:signal-flow 2s linear 3}.cad-plan.in-view .cad-outline{stroke-dasharray:1600;animation:draw-plan 1.2s ease-out both}
.sensor-detail-image{transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .28s ease-out}.sensor-detail-image.in-view>img{animation:sensor-float 7s ease-in-out infinite}.motion-reveal.in-view{animation:gentle-reveal .5s both}.service-card,.related-page,.sensor-entry{transition:transform .22s ease-out,border-color .22s ease-out,background .22s ease-out}.button{transition:background .2s,box-shadow .2s,transform .2s}.button:active{transform:translateY(1px)}.nav-panel a{transition:color .18s,background .18s}.nav-group[open]>.nav-panel{animation:menu-open .18s ease-out}.nav-panel a:focus-visible{outline-offset:1px}.page-paused .sensor-detail-image>img{animation-play-state:paused!important}
@media(hover:hover) and (pointer:fine){.service-card:hover,.related-page:hover{transform:translateY(-4px)}.sensor-entry:hover{transform:translateY(-3px)}.button:hover{box-shadow:0 6px 16px #14241f17}.nav-service-links a:hover,.nav-group-links a:hover{background:var(--surface)}}
@keyframes sensor-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes gentle-reveal{from{opacity:.75;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes menu-open{from{opacity:.8;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes signal-flow{to{stroke-dashoffset:-52}}
@keyframes draw-plan{from{stroke-dashoffset:1600}to{stroke-dashoffset:0}}
@keyframes signal-change{from{opacity:.7}to{opacity:1}}
@media(max-width:900px){.architecture-layout{grid-template-columns:.8fr 1.2fr}.architecture-copy h2{font-size:42px}.scene-controls{gap:18px}.scene-controls small{font-size:11px}.signal-story-layout{grid-template-columns:1fr;gap:24px}.signal-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.signal-steps button{padding:16px 10px;gap:8px;min-height:0}.signal-steps strong{font-size:15px}.signal-steps p{font-size:12px}.delivery-animation-layout{gap:32px}}
@media(max-width:700px){.architecture-top{align-items:flex-start;gap:12px}.architecture-top .eyebrow{font-size:9px;max-width:190px}.scene-skip{font-size:11px;white-space:nowrap}.architecture-layout{grid-template-columns:1fr;min-height:0}.architecture-copy{padding-top:24px;max-width:none}.architecture-copy h2{font-size:36px;margin-bottom:12px}.architecture-copy p{font-size:14px;line-height:1.7;max-width:350px}.architecture-art{height:340px}.scene-live .architecture-layout{display:flex;flex-direction:column;align-items:stretch}.scene-live .architecture-art{flex:1;min-height:230px}.scene-hint{display:none}.scene-live{height:230svh}.scene-live .architecture-stage{min-height:650px}.scene-drawing-label{font-size:8px;bottom:8px}.scene-controls{gap:14px;padding-bottom:20px}.scene-controls button{display:flex;flex-direction:column;gap:6px;padding-top:12px;min-height:65px}.scene-controls strong{font-size:12px}.scene-controls small{display:none}.scene-live .architecture-screen{width:calc(100% - 24px);padding:7px}.scene-screen-title{font-size:8px;padding-bottom:10px}.signal-steps{grid-template-columns:1fr 1fr}.signal-steps button{min-height:95px}.signal-image{padding:8px}.delivery-animation-layout{grid-template-columns:1fr}.delivery-stages li{padding:18px 0}.architecture-screen{padding:10px}.scene-static .architecture-layout{display:block}.scene-static .architecture-art{height:320px}}
@media(max-height:480px){.scene-live{height:auto}.scene-live .architecture-stage{height:auto;position:relative;max-height:none}.scene-live .architecture-layout{min-height:400px}.scene-live .architecture-screen{position:relative;left:auto;top:auto;transform:none!important;opacity:1!important;margin:20px auto}.scene-live .architecture-art,.scene-live .architecture-copy{opacity:1!important;transform:none!important}.scene-controls,.scene-hint{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.sensor-detail-image{transform:none!important}.scene-hint{display:none}}

.scene-static .architecture-screen{transform:none!important}.scene-pending .architecture-fallback{display:flex}.scene-pending .architecture-screen{opacity:0!important}.architecture-copy h2 span{display:block}
/* Product-specific art direction: domestic monitoring versus a heat network. */
.architecture-sequence[data-scene="heat"]{background:#0a181e}
.scene-callout{position:absolute;bottom:40px;left:18px;z-index:2;padding:16px 20px;background:#10251deb;border:1px solid #88b49b42;border-radius:12px;box-shadow:0 14px 40px #0002;backdrop-filter:blur(12px);max-width:310px;pointer-events:none}
.scene-callout-kicker{display:block;font-size:9px;letter-spacing:.1em;color:#b9f58a;margin-bottom:9px}.scene-callout strong{display:block;font-size:16px;font-weight:500;color:#eff7f0}.scene-callout>div{display:flex;gap:12px;margin-top:14px;font-size:10px;color:#d0dfd4}.scene-callout small{display:block;font-size:9px;color:#94b3a1;margin-top:12px}.scene-callout .flow-key::before,.scene-callout .return-key::before{content:'';display:inline-block;width:15px;height:3px;background:#b9f58a;vertical-align:middle;margin-right:6px}.scene-callout .return-key::before{background:#438aef}[data-scene="heat"] .scene-callout{background:#132830eb;border-color:#7097b040}.scene-static .scene-callout{display:none}
@media(max-width:700px){.scene-callout{bottom:25px;left:0;padding:12px 14px;max-width:280px}.scene-callout strong{font-size:13px}.scene-callout-kicker{font-size:8px;margin-bottom:6px}.scene-callout>div{margin-top:9px;font-size:9px}.scene-callout small{display:none}.scene-drawing-label{font-size:7px}.architecture-copy h2{font-size:34px}}
.signal-scroll-note{display:none}.signal-pinned{height:400svh;padding:0!important;position:relative}.signal-pinned .signal-stage{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:28px;padding-bottom:28px;box-sizing:border-box}.signal-pinned .signal-scroll-note{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px;font-size:10px;letter-spacing:.07em;color:var(--muted)}.signal-scroll-note a{min-height:44px;display:inline-flex;align-items:center;letter-spacing:0}.signal-pinned .product-heading{margin-bottom:28px}.signal-pinned .product-heading h2{font-size:clamp(32px,3.7vw,50px)}.signal-pinned .signal-story-layout{min-height:0}.signal-pinned .signal-image{width:100%;max-width:850px;justify-self:end}.signal-pinned .signal-image .ui-capture{aspect-ratio:1.75}.signal-pinned .signal-image img{width:100%;height:100%;object-fit:contain}.signal-pinned .signal-steps button{padding:16px;min-height:80px}.insight-assistant{max-width:355px;padding:10px;border:1px solid #ffffff20;border-radius:18px;background:#15251f}.insight-assistant figcaption{color:var(--on-dark-muted);font-size:11px;padding:12px 4px 4px}
@media(max-width:900px){.signal-pinned .signal-story-layout{gap:16px}.signal-pinned .signal-steps button{padding:12px 8px;min-height:70px}.signal-pinned .signal-steps p{display:none}.signal-pinned .signal-image{max-width:690px;justify-self:center}.signal-pinned .product-heading{gap:12px;margin-bottom:18px}.signal-pinned .product-heading>p{font-size:13px}.signal-pinned .signal-scroll-note{margin-bottom:12px}}
@media(max-width:700px){.signal-pinned .signal-stage{padding-top:12px;padding-bottom:12px}.signal-pinned .signal-scroll-note{font-size:8px;gap:8px}.signal-pinned .product-heading h2{font-size:32px}.signal-pinned .signal-steps{gap:6px}.signal-pinned .signal-steps button{min-height:60px}.signal-pinned .signal-story-layout{gap:14px}.signal-pinned .signal-image figcaption{padding-top:8px}.insight-assistant{max-width:330px}}
/* Allocate the remaining viewport height to the image, including its caption.
   A fixed screenshot aspect ratio must not force content past the sticky stage. */
.signal-pinned .signal-stage{display:grid;grid-template-rows:auto auto minmax(0,1fr);align-content:stretch;justify-content:normal;row-gap:0}
.signal-pinned .signal-story-layout{height:100%;min-height:0;grid-template-rows:minmax(0,1fr);align-items:center}
.signal-pinned .signal-image{display:flex;flex-direction:column;min-height:0;max-height:100%;height:100%;box-sizing:border-box}
.signal-pinned .signal-image .ui-capture{flex:1;min-height:0;aspect-ratio:auto;display:block}
.signal-pinned .signal-image img{display:block;width:100%;height:100%;max-height:100%;object-fit:contain}
.signal-pinned .signal-image figcaption{flex-shrink:0}
.signal-pinned .signal-scroll-note,.signal-pinned .product-heading{min-height:0}
.signal-pinned .signal-steps{align-self:center}
@media(max-width:900px){.signal-pinned .signal-story-layout{grid-template-rows:auto minmax(0,1fr);align-items:stretch}.signal-pinned .signal-image{max-width:none}.signal-pinned .signal-steps{align-self:stretch}}
/* Clip the screenshot's own bounds, rather than its letterboxed container. */
.signal-pinned .signal-image .ui-capture{display:flex;align-items:center;justify-content:center;background:transparent}
.signal-pinned .signal-image img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;clip-path:inset(.4% round 2.3% / 3.8%)}
/* Short portrait viewports (phones with browser bars): keep the scenes live but fit the pinned stage inside the viewport. */
@media(max-height:700px){.scene-live .architecture-stage{min-height:0;padding-top:16px}.scene-live .architecture-copy{padding-top:8px}.scene-live .architecture-copy h2{font-size:clamp(26px,7vw,34px);margin-bottom:8px}.scene-live .architecture-copy p{display:none}.scene-live .architecture-art{min-height:170px}.scene-live .scene-controls{padding:10px 0 12px;gap:10px}.scene-live .scene-controls button{min-height:54px;padding-top:8px}.scene-live .scene-controls small{display:none}.scene-live .architecture-screen{padding:7px}.signal-pinned .product-heading h2{font-size:clamp(24px,6.5vw,32px)}.signal-pinned .product-heading p{display:none}.signal-pinned .signal-steps button{min-height:58px;padding:8px}.signal-pinned .signal-steps p{display:none}.signal-pinned .signal-story-layout{gap:10px}}