/* One continuous story; the same house stays in view while the text scrolls. */
:root{--header-height:84px;--scene-height:calc(100svh - var(--header-height))}
html{scroll-padding-top:calc(var(--header-height) + 20px)}
body{background:var(--paper)}
.header{position:sticky;top:0;height:var(--header-height);padding-inline:5%;background:#f6f7f5}
.header nav{gap:28px}.brand img,.footer-top img{object-fit:contain}
.mobile-menu{position:fixed;top:var(--header-height);z-index:30}
.page-progress{position:fixed;inset:0 0 auto;height:2px;background:var(--teal);transform:scaleX(var(--page-progress,0));transform-origin:left;z-index:100;pointer-events:none}
.build-track{display:grid;grid-template-columns:47% 53%;position:relative;max-width:1800px;margin:auto}
.build-stories{min-width:0}
.story-step{min-height:var(--scene-height);padding:62px 9.5% 62px 10.6%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;border-bottom:1px solid #d8e0db}
.story-step .eyebrow{font-size:10px;color:#527367;letter-spacing:.09em;margin-bottom:28px}
.story-step h1{font-size:clamp(44px,5.25vw,84px);margin:0 0 28px;line-height:1.035;letter-spacing:-.06em}
.story-step h2{font-size:clamp(30px,3.4vw,54px);line-height:1.12;margin-bottom:25px}
.story-step>p:not(.eyebrow){font-size:15px;line-height:1.7;color:#637169;max-width:450px}
.story-step>p.story-lead{font-size:18px;line-height:1.65;color:#3f584e}
.story-step>p+p{margin-top:18px}
.scroll-cue{display:flex;align-items:center;gap:22px;font-size:12px;color:#486e61;margin-top:36px;padding-block:10px}
.scroll-cue span{font-size:21px}
.story-tags{list-style:none;display:flex;gap:8px;flex-wrap:wrap;padding:0;margin:28px 0 0}
.story-tags li{border:1px solid #cddad1;padding:9px 12px;font-size:10px;color:#4f7061;display:flex;align-items:center;gap:6px}
.story-tags i,.drawing-systems i{display:block;width:6px;height:6px;border-radius:50%}
.story-step .text-link{margin-top:20px}
.story-process{list-style:none;padding:0;margin:10px 0 0;width:100%}
.story-process li{display:flex;gap:18px;border-top:1px solid #d3ddd6;padding:20px 0}
.story-process li>span{color:#6b9180;font-size:10px;padding-top:5px}
.story-process h3{font-size:19px;font-weight:400;margin-bottom:9px;letter-spacing:-.02em}
.story-process p{font-size:13px;line-height:1.6;color:#637169}
.story-contact .contact-email{width:100%;font-size:clamp(27px,3.3vw,48px);margin-top:10px}
.story-contact .copy-status{margin:0!important;font-size:11px!important}
.story-contact .button{margin-top:22px;font-size:12px;min-height:50px}
.story-footer{padding:35px 9.5% 28px 10.6%;border-top:0}
.story-footer .footer-top{flex-wrap:wrap;gap:24px;padding-bottom:27px}
.story-footer .footer-top img{width:130px}
.story-footer .footer-top p{order:3;width:100%;margin:0;font-size:11px}
.story-footer .footer-top a{font-size:11px;margin-left:auto}
.story-footer .footer-bottom{display:flex;flex-wrap:wrap;gap:16px}
.story-footer .footer-bottom>span:nth-child(2){margin-left:auto}
.story-footer details{width:100%;text-align:left;padding-top:5px}
.story-footer .company-details{min-width:0}
.build-visual{position:sticky;top:var(--header-height);height:var(--scene-height);align-self:start;isolation:isolate;background:#e7ece8;overflow:hidden;border-left:1px solid #cbd8ce;display:flex;align-items:center;justify-content:center}
.build-svg{height:calc(100% - 70px);width:100%;max-height:850px;flex-shrink:0;margin-top:-28px;overflow:visible}
.drawing-top,.drawing-bottom{position:absolute;left:32px;right:32px;display:flex;justify-content:space-between;align-items:center;gap:15px;color:#567466;z-index:2}
.drawing-top{top:28px;font-size:9px;letter-spacing:.07em}.drawing-counter{font-variant-numeric:tabular-nums;white-space:nowrap}
.drawing-bottom{bottom:30px;font-size:10px;line-height:1.5}.drawing-hint{font-size:9px;white-space:nowrap;color:#769084}
.drawing-systems{position:absolute;bottom:63px;left:32px;right:32px;z-index:2;display:flex;gap:16px;flex-wrap:wrap;font-size:9px;color:#566f61;opacity:0;transition:opacity .2s}
.drawing-systems>span{display:inline-flex;align-items:center;gap:5px}
.build-visual.has-networks .drawing-systems{opacity:1}
.drawing-progress{position:absolute;bottom:17px;left:32px;right:32px;height:1px;background:#c0cfc5}
.drawing-progress span{display:block;height:100%;background:#4c817d;transform:scaleX(var(--build-progress,1));transform-origin:left}
.system-electric{background:#4c817d}.system-cold{background:#7d9eaf}.system-hot{background:#b3a17d}.system-heat{background:#a08779}
.site-grid{stroke:#89a699;stroke-width:.7;opacity:.25}.site-guide{stroke:#6f9283;stroke-width:.8;opacity:.5}.site-guide text{stroke:none;fill:#58796b;font:8px Arial,sans-serif;letter-spacing:2px}.build-shadow{fill:#517462;opacity:.12}
.foundation{stroke:#628a77;stroke-width:1;stroke-linejoin:round}.cable{stroke-linejoin:round;stroke-linecap:round}.cable-signal{opacity:0}.drawing-cross{stroke:#79998a;stroke-width:1}
.motion-ready .build-part{transform-box:fill-box;transform-origin:center}
.motion-ready .construction-svg [data-draw]{stroke-dasharray:1;stroke-dashoffset:var(--draw-offset,0)}
.motion-ready .construction-svg [data-assemble]{opacity:var(--part-opacity,1);transform:translateY(var(--part-lift,0px))}
.motion-ready .construction-svg [data-fill]{opacity:var(--fill-opacity,1)}
/* A static complete illustration remains available without JavaScript. */
body:not(.motion-ready) .drawing-systems{opacity:1}
@media(min-width:1700px){.header{padding-inline:max(5%,calc((100vw - 1620px)/2))}}
@media(max-width:1000px) and (min-width:681px){.header nav{font-size:12px;gap:19px}.brand{width:160px}.build-track{grid-template-columns:46% 54%}.story-step{padding-inline:9%}.story-step>p.story-lead{font-size:16px}.story-step>p:not(.eyebrow){font-size:14px}.drawing-top,.drawing-bottom,.drawing-systems,.drawing-progress{left:20px;right:20px}.drawing-hint{display:none}.story-tags{gap:6px}.story-tags li{padding:8px;font-size:9px}}
@media(max-width:680px){
 :root{--header-height:62px;--scene-height:34svh}
 html{scroll-padding-top:calc(var(--header-height) + var(--scene-height) + 18px)}
 .header{padding-inline:6%}.brand{width:138px}.mobile-menu{top:var(--header-height)}
 .build-track{display:flex;flex-direction:column}
 .build-visual{order:-1;z-index:5;width:100%;border-left:0;border-bottom:1px solid #bfd0c3;min-height:0}
 .build-svg{height:calc(100% - 14px);width:100%;margin-top:-4px}
 .drawing-top{top:10px;font-size:7px}.drawing-top,.drawing-bottom,.drawing-systems,.drawing-progress{left:6%;right:6%}
 .drawing-bottom{bottom:14px;font-size:8px}.drawing-hint{font-size:7px}.drawing-progress{bottom:7px}
 .drawing-systems{bottom:34px;font-size:7px;gap:10px}.drawing-systems i{width:4px;height:4px}
 .story-step{min-height:calc(100svh - var(--header-height) - var(--scene-height));padding:30px 6%;scroll-margin-top:0}
 .story-step .eyebrow{font-size:8px;letter-spacing:.06em;margin-bottom:18px}
 .story-step h1{font-size:clamp(34px,9.5vw,50px);margin-bottom:18px;line-height:1.04}
 .story-step h2{font-size:clamp(28px,7.9vw,39px);margin-bottom:18px}
 .story-step>p.story-lead{font-size:15px;line-height:1.55}
 .story-step>p:not(.eyebrow){font-size:13px;line-height:1.6}
 .story-step>p+p{margin-top:13px}.scroll-cue{margin-top:18px;font-size:10px;padding:5px 0}.scroll-cue span{font-size:17px}
 .story-tags{margin-top:20px;gap:6px}.story-tags li{font-size:9px;padding:8px 10px}
 .story-process{margin:0}.story-process li{padding:16px 0;gap:14px}.story-process h3{font-size:17px;margin-bottom:7px}.story-process p{font-size:12px}
 .story-contact .contact-email{font-size:33px}.story-contact .button{margin-top:15px}
 .story-footer{padding:28px 6%}.story-footer .footer-top{gap:20px}
}
@media(max-height:520px) and (min-width:681px){:root{--header-height:60px}.story-step{padding-block:32px}.story-step h1{font-size:44px}.story-step h2{font-size:32px}.story-step .eyebrow{margin-bottom:17px}.drawing-top{top:15px}.drawing-systems{bottom:46px}.drawing-bottom{bottom:21px}.drawing-progress{bottom:10px}}
@media(max-height:520px) and (max-width:680px){:root{--header-height:48px;--scene-height:31svh}.drawing-systems,.drawing-hint{display:none}.drawing-top{top:6px;font-size:6px}.drawing-bottom{font-size:7px;bottom:10px}.drawing-progress{bottom:4px}.build-svg{height:100%;margin-top:0}.story-step{padding-block:24px}}
@media(prefers-reduced-motion:reduce){.page-progress{display:none}.construction-svg [data-draw]{stroke-dashoffset:0!important}.construction-svg [data-assemble]{opacity:1!important;transform:none!important}.construction-svg [data-fill]{opacity:1!important}.construction-svg .build-shadow{opacity:.12!important}.drawing-systems{opacity:1!important}.drawing-progress span{transform:scaleX(1)}}
/* Text and the house share the same softly filtered scroll position. */
.motion-ready .story-step>*{transform:translate3d(0,var(--copy-shift,0px),0)}
.motion-ready .story-step h1,.motion-ready .story-step h2{opacity:var(--heading-opacity,1)}
.motion-ready .story-step:focus-within>*{transform:none}
.motion-ready .story-step:focus-within h1,.motion-ready .story-step:focus-within h2{opacity:1}
@media(prefers-reduced-motion:reduce){.motion-ready .story-step>*{transform:none!important;opacity:1!important}}
/* Interior finishing is a primary service, visible from the opening screen. */
.intro-finishing{font-size:11px;line-height:1.7;color:#4a7160;border-bottom:1px solid #c9d8cd;padding-bottom:8px;margin-top:18px;max-width:100%}.intro-finishing span{margin-left:5px}
.story-intro .scroll-cue{margin-top:25px}
.finish-services{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;list-style:none;padding:0;margin:24px 0 0;width:100%}
.finish-services li{padding:12px 12px 12px 14px;border-left:2px solid #c6d3c9;background:#edf1eb;transition:background .22s,border-color .22s}
.finish-services li.is-current{background:#dce6d7;border-left-color:#507e67}
.finish-services li>span{display:block;font-size:16px;color:#315b49;margin-bottom:8px}
.finish-services li>p{font-size:12px;line-height:1.55;color:#586c60}
.story-finishing .text-link{margin-top:16px}
@media(max-width:1000px) and (min-width:681px){.header nav{gap:18px}.header nav span{margin-left:12px}.finish-services{gap:10px}.finish-services li{padding-inline:10px}.finish-services li>span{font-size:14px}}
@media(max-width:680px){.intro-finishing{font-size:10px;margin-top:14px;padding-bottom:6px}.story-intro .scroll-cue{margin-top:18px}.finish-services{margin-top:20px;gap:10px}.finish-services li{padding:11px 10px}.finish-services li>span{font-size:15px;margin-bottom:6px}.finish-services li>p{font-size:11px}.story-finishing .text-link{font-size:12px}}
/* A quiet sign of connection, synchronized with the first illuminated window. */
.drawing-light-note{position:absolute;top:63px;left:32px;z-index:2;display:flex;align-items:flex-start;gap:9px;color:#756543;font-size:13px;line-height:1.5;pointer-events:none}
.drawing-light-note i{width:5px;height:5px;margin-top:7px;flex-shrink:0;border-radius:50%;background:#d2ab5e;box-shadow:0 0 9px #d2ab5e66}
.motion-ready .drawing-light-note{opacity:var(--light-amount,0)}
@media(max-width:1000px) and (min-width:681px){.drawing-light-note{left:20px;font-size:11px}}
@media(max-width:680px){.drawing-light-note{left:6%;top:29px;gap:5px;font-size:8px;line-height:1.45}.drawing-light-note i{width:3px;height:3px;margin-top:4px;box-shadow:0 0 5px #d2ab5e66}}
@media(max-height:520px) and (max-width:680px){.drawing-light-note{top:20px;font-size:7px}}
@media(prefers-reduced-motion:reduce){.drawing-light-note{opacity:1!important}}

/* Keep contract context readable without competing with the service offer. */
.story-footer .footer-note{margin-top:24px;font-size:11px;line-height:1.65;color:#637169;max-width:450px}
.story-contact>p.mail-note{margin-top:12px;font-size:11px;line-height:1.5}