:root{--night:#0b1422;--night2:#111e2f;--paper:#f0f0ea;--ink:#101c29;--blue:#91bdf1;--muted:#a5b1bc;--line:rgba(218,231,244,.18);font-family:'DM Sans',sans-serif;background:var(--night);color:#f4f5f3;scroll-behavior:smooth}*{box-sizing:border-box}body{margin:0;overflow-x:clip}h1,h2,h3,p{margin:0}a{color:inherit;text-decoration:none}button{font:inherit}.skip{position:fixed;top:-100px;left:10px;padding:12px;background:#fff;color:#0b1422;z-index:100}.skip:focus{top:10px}.header{height:90px;position:absolute;z-index:20;top:0;left:0;width:100%;padding:0 5%;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.brand{display:inline-flex;gap:12px;align-items:center;flex-shrink:0}.brand img{width:44px;height:44px;filter:hue-rotate(155deg) saturate(.55) brightness(1.22)}.brand-name{font:500 9px/1.3 'Manrope',sans-serif;letter-spacing:.13em}.brand-name b{font-weight:800}.brand-name small{font-size:6px;display:block;color:#9baebc;letter-spacing:.16em;margin-top:4px}.navigation,.header-right,.lang{display:flex;align-items:center}.navigation{gap:31px;font-size:11px;color:#c1cad1}.navigation a,.lang a,.text-link{transition:color .2s}.navigation a:hover,.lang a:hover{color:var(--blue)}.header-right{gap:25px}.lang{font:700 10px 'DM Sans';gap:12px;color:#8799a8}.lang a.active{color:#fff}.header-cta{display:flex;gap:24px;align-items:center;border:1px solid #617182;padding:12px 15px;font-size:11px}.header-cta:hover{background:#dcecff;color:#101c29;border-color:#dcecff}.story{position:relative}.scene-sticky{position:sticky;top:0;height:100vh;height:100svh;margin-bottom:-100vh;margin-bottom:-100svh;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,#263c53 0%,#14263a 36%,#0b1422 77%)}.scene-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(194,219,245,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(194,219,245,.045) 1px,transparent 1px);background-size:96px 96px;mask-image:radial-gradient(ellipse at center,#000 10%,transparent 80%)}.scene-glow{position:absolute;width:65vw;height:65vw;left:50%;top:52%;transform:translate(-50%,-50%);border:1px solid rgba(156,202,247,.12);border-radius:50%;box-shadow:0 0 90px rgba(122,173,222,.06),inset 0 0 90px rgba(122,173,222,.05)}.scene-glow:before,.scene-glow:after{content:'';position:absolute;border-radius:50%;border:1px solid rgba(156,202,247,.09);inset:12%}.scene-glow:after{inset:24%;border-style:dashed}.scene-cross{position:absolute;color:#8db2d1;font:14px monospace;opacity:.7}.scene-cross-a{left:5%;top:21%}.scene-cross-b{right:5%;top:21%}.hero-model{position:absolute;left:50%;top:53%;transform:translate(-50%,-50%);width:min(83vw,1240px);height:84%}.hero-model canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.hero-model.model-fallback:before{content:'';position:absolute;inset:0;background:url('/roof-fallback.svg') center/contain no-repeat}.scene-metadata{position:absolute;bottom:4%;left:5%;right:5%;display:flex;justify-content:space-between;color:#9eafbc;letter-spacing:.14em;font:9px monospace}.story-content{position:relative;z-index:2}.chapter{height:100vh;height:100svh;position:relative;display:flex;align-items:center;padding:110px 5% 95px;scroll-margin-top:0}.intro{display:block}.intro-heading{position:absolute;left:12%;right:12%;top:15%;text-align:center}.eyebrow{display:flex;align-items:center;gap:9px;color:#a8c8e7;text-transform:uppercase;font-size:9px;font-weight:700;letter-spacing:.19em}.intro-heading .eyebrow{justify-content:center}.eyebrow-dot{width:6px;height:6px;background:#9ecbf6;border-radius:50%;box-shadow:0 0 14px #8cbff3}.intro-heading h1,.chapter h2,.services h2,.contact h2{font-family:'Manrope',sans-serif;letter-spacing:-.055em;font-weight:600}.intro-heading h1{font-size:clamp(34px,4.3vw,67px);line-height:1.08;margin:18px 0 11px;text-shadow:0 4px 30px #0b1422}.intro-heading h1 em{font-style:normal;color:#bedafa}.intro-heading p{color:#c6d1da;font-size:13px;line-height:1.6;text-shadow:0 2px 12px #0b1422}.intro-bottom{position:absolute;left:5%;right:5%;bottom:9%;display:flex;align-items:flex-end;justify-content:space-between}.intro-links{display:flex;gap:10px}.intro-links a{display:flex;gap:13px;align-items:center;padding:14px 16px;border:1px solid rgba(198,220,239,.32);background:rgba(11,20,34,.7);font-size:11px}.intro-links a span:first-child{color:#a5cafa;font:9px monospace}.intro-links b{font-size:14px;font-weight:400}.intro-links a:hover,.round-link:hover{background:#dcecff;color:#101c29}.scroll-indicator{display:flex;align-items:center;gap:11px;font:9px monospace;color:#c7d5df;letter-spacing:.12em;text-transform:uppercase}.scroll-line{height:1px;width:34px;background:#a7c7e4}.hero-cta{display:flex;align-items:center;gap:30px;padding:15px 17px;background:#d7e9f9;color:#102034;font-size:11px;font-weight:700}.hero-cta:hover{background:#fff}.chapter-home{justify-content:flex-start}.chapter-industry{justify-content:flex-end}.chapter-process{justify-content:flex-start}.chapter-panel{width:min(32%,405px);padding:30px;border-left:2px solid #9ec3e5;background:linear-gradient(90deg,rgba(8,17,28,.94),rgba(8,17,28,.78) 76%,rgba(8,17,28,.33));box-shadow:0 20px 50px #08111c33}.chapter-industry .chapter-panel{background:linear-gradient(270deg,rgba(8,17,28,.94),rgba(8,17,28,.78) 76%,rgba(8,17,28,.33))}.chapter-index,.section-index{display:flex;align-items:center;gap:12px;font:9px monospace;letter-spacing:.14em;color:#a9c8e5;text-transform:uppercase}.chapter-index span:first-child{font-size:12px;color:#fff}.chapter-index i,.section-index i{width:28px;height:1px;background:#9ac2e8}.chapter h2{font-size:clamp(35px,3.5vw,54px);line-height:1.13;margin:25px 0 18px}.chapter-panel>p{font-size:13px;line-height:1.8;color:#c0cbd3}.chapter-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:24px}.chapter-tags span{border:1px solid #667b8c;padding:8px 10px;color:#c3d3df;font:9px monospace;letter-spacing:.04em}.round-link{display:inline-flex;align-items:center;gap:20px;font-size:11px;margin-top:27px;border-bottom:1px solid #a4c9e9;padding-bottom:8px}.round-link b{font-size:16px;font-weight:400}.chapter-side{position:absolute;right:5%;top:50%;writing-mode:vertical-rl;font:9px monospace;letter-spacing:.16em;color:#b4c5d3}.chapter-industry .chapter-side{left:5%;right:auto}.steps{margin-top:23px}.steps>div{display:grid;grid-template-columns:25px 1fr;gap:15px;border-top:1px solid var(--line);padding:13px 0}.steps>div:last-child{border-bottom:1px solid var(--line)}.steps>div>span{font:10px monospace;color:#aed3f4}.steps h3{font:600 14px 'Manrope',sans-serif}.steps p{font-size:11px;line-height:1.5;color:#b1bec8;margin-top:4px}.services{background:var(--paper);color:var(--ink);padding:120px 5% 135px}.section-index{color:#697b8c}.section-index i{background:#6c91b5}.services-heading{display:grid;grid-template-columns:1.15fr .48fr;gap:14%;align-items:end;padding:75px 0 70px}.services h2{font-size:clamp(42px,5.5vw,80px);line-height:1.06;max-width:750px}.services-heading p{font-size:14px;line-height:1.8;color:#566674}.service-list{border-top:1px solid #aab4ba}.service-list article{display:grid;grid-template-columns:100px 1fr 40px;gap:18px;align-items:start;padding:30px 0;border-bottom:1px solid #aab4ba}.service-num{font:11px monospace;color:#657786}.service-list h3{font:600 clamp(23px,2.4vw,36px) 'Manrope';letter-spacing:-.04em}.service-list p{font-size:13px;line-height:1.7;color:#5b6972;margin-top:8px;max-width:580px}.service-icon{font-size:24px;text-align:right}.contact{padding:110px 5%;background:#c7dceb;color:#102034}.contact .eyebrow{color:#3f6584}.contact .eyebrow-dot{background:#46769d;box-shadow:none}.contact-top{display:flex;justify-content:space-between;font:10px monospace;letter-spacing:.12em;color:#55758c}.contact-main{display:grid;grid-template-columns:1.2fr .5fr;gap:12%;align-items:end;margin-top:90px}.contact h2{font-size:clamp(44px,6vw,88px);line-height:1.08;max-width:900px}.contact-info{border-top:1px solid #94b2c7;padding-top:22px}.contact-info>p{font-size:13px;line-height:1.8;color:#435c6f}.contact-placeholder{display:flex;gap:17px;align-items:center;margin-top:28px;font-size:12px;color:#344e61}.contact-placeholder span{border:1px solid #7797ad;border-radius:50%;padding:12px;font-size:18px}footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:42px 5%;font-size:10px;color:#a7b4bd}footer .brand{color:white}footer .brand img{width:40px;height:40px}footer>a:last-child{font-family:monospace;color:#d3e2ec}.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}.reveal.is-visible{opacity:1;transform:none}
@media(max-width:1000px){.navigation{display:none}.header{height:80px}.hero-model{width:100%;height:75%}.chapter-panel{width:min(40%,390px)}.scroll-indicator{display:none}.intro-heading{top:14%}.intro-heading h1{font-size:clamp(33px,5vw,55px)}}
@media(max-width:650px){.header{height:72px;padding:0 5%}.brand{gap:7px}.brand img{width:37px;height:37px}.brand-name{font-size:8px}.brand-name small{font-size:5px}.header-right{gap:10px}.lang{gap:8px}.header-cta{padding:10px;gap:10px}.scene-glow{width:125vw;height:125vw;top:53%}.hero-model{width:100%;height:58%;top:52%}.scene-cross{top:14%}.scene-metadata{bottom:3%;font-size:8px}.scene-metadata span:nth-child(2){display:none}.chapter{padding:95px 5% 80px}.intro-heading{left:5%;right:5%;top:14%}.intro-heading h1{font-size:clamp(29px,7vw,43px);line-height:1.08;margin:13px 0 8px}.intro-heading p{max-width:310px;margin:auto;font-size:11px;line-height:1.5}.intro-heading .eyebrow{font-size:8px}.intro-bottom{bottom:9%;left:5%;right:5%;display:block}.intro-links{justify-content:center;gap:7px}.intro-links a{padding:12px 10px;font-size:10px;gap:8px}.hero-cta{position:absolute;bottom:-53px;right:0;padding:12px 13px;gap:15px;font-size:10px}.chapter-home,.chapter-industry,.chapter-process{justify-content:center;align-items:flex-end}.chapter-panel,.chapter-industry .chapter-panel{width:100%;max-width:480px;padding:20px;background:linear-gradient(0deg,rgba(8,17,28,.97),rgba(8,17,28,.92) 75%,rgba(8,17,28,.75))}.chapter h2{font-size:clamp(30px,7vw,42px);margin:16px 0 10px}.chapter-panel>p{font-size:12px;line-height:1.6}.chapter-tags{margin-top:13px}.chapter-tags span{font-size:8px;padding:7px}.round-link{margin-top:14px}.chapter-side{display:none}.steps{margin-top:13px}.steps>div{padding:8px 0}.steps p{font-size:10px}.services{padding:80px 5%}.services-heading{grid-template-columns:1fr;gap:24px;padding:50px 0}.services h2{font-size:clamp(39px,10vw,60px)}.services-heading p{font-size:13px}.service-list article{grid-template-columns:40px 1fr 20px;padding:24px 0;gap:12px}.service-list h3{font-size:24px}.service-icon{font-size:18px}.contact{padding:80px 5%}.contact-main{grid-template-columns:1fr;gap:36px;margin-top:55px}.contact h2{font-size:clamp(42px,10vw,60px)}footer{flex-wrap:wrap}footer>span{width:45%}}
@media(max-height:650px) and (max-width:650px){.intro-heading{top:13%}.intro-heading h1{font-size:30px}.intro-heading p{display:none}.hero-model{top:54%;height:55%}.intro-bottom{bottom:9%}.chapter h2{font-size:29px}.chapter-panel{padding:16px}.chapter{padding-top:80px;padding-bottom:60px}.steps>div{padding:5px 0}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}.reveal{opacity:1;transform:none}}
/* Layer explanations accompany the model without becoming another navigation. */
.roof-legend{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:8px}.roof-legend li{display:flex;align-items:center;gap:10px;color:#9eafbe;font-size:11px;line-height:1.4;padding:7px 9px;border:1px solid transparent;transition:color .25s,background .25s,border-color .25s}.roof-legend li.is-active{color:#fff;background:rgba(161,196,224,.1);border-color:rgba(169,208,239,.35)}.layer-swatch{width:22px;height:6px;flex-shrink:0;background:#8ea9c0}.insulation-swatch{height:9px;background:repeating-linear-gradient(35deg,#c6ad73 0 1px,#e1cd99 1px 3px)}.structure-swatch{background:#87969d;height:3px}.scene-caption{position:absolute;top:13%;right:5%;max-width:285px;display:flex;gap:13px;padding:17px;background:rgba(8,17,28,.88);border:1px solid rgba(184,215,240,.24);border-top:2px solid #d3ba83;z-index:5;box-shadow:0 8px 32px #06111b44}.scene-caption[hidden]{display:none}.caption-index{font:11px monospace;color:#d9c38f;padding-top:3px}.scene-caption strong{display:block;font:600 13px 'Manrope',sans-serif;color:#f4f3ed}.scene-caption p{font-size:11px;line-height:1.6;color:#b9c8d5;margin-top:6px}.insulation-guide{background:#101d2c;padding:110px 5%;border-top:1px solid #2e4357}.insulation-guide .section-index{color:#a9c5df}.insulation-intro{display:grid;grid-template-columns:1.15fr .55fr;align-items:end;gap:10%;padding:65px 0 58px}.insulation-guide h2,.roof-faq h2{font:600 clamp(38px,4.6vw,68px)/1.08 'Manrope',sans-serif;letter-spacing:-.055em}.insulation-intro>p{font-size:14px;line-height:1.8;color:#b2c1cd}.insulation-grid{display:grid;grid-template-columns:1fr 1fr;gap:7%;align-items:center}.layer-study{margin:0;padding:25px;border:1px solid #365065;background:radial-gradient(ellipse at 45% 45%,#223d52,#111f2e 70%)}.layer-study-top{display:flex;justify-content:space-between;gap:10px;color:#a9bfd0;font:9px monospace;letter-spacing:.1em}.layer-drawing{display:block;width:100%;height:auto;margin:12px 0}.diagram-key{display:flex;flex-wrap:wrap;gap:12px;border-top:1px solid #385166;padding-top:18px;font-size:10px;color:#c0d0dc}.diagram-key>span{display:flex;gap:7px;align-items:center}.diagram-key i{font:9px monospace;font-style:normal;color:#b5c9da}.diagram-key>span:nth-child(2) i{color:#e2c888}.layer-study figcaption{font-size:10px;line-height:1.6;color:#9eafbc;margin-top:15px}.insulation-points article{display:grid;grid-template-columns:34px 1fr;gap:18px;border-top:1px solid #30465a;padding:27px 0}.insulation-points article:last-child{border-bottom:1px solid #30465a}.point-number{font:10px monospace;color:#a6c4dd;padding-top:5px}.insulation-points h3{font:600 clamp(20px,2.1vw,29px)/1.25 'Manrope',sans-serif;letter-spacing:-.035em}.insulation-points p{font-size:13px;line-height:1.8;color:#b8c5d0;margin-top:13px}.roof-faq{background:#f0f0ea;color:#142337;padding:105px 5%;display:grid;grid-template-columns:.85fr 1.15fr;gap:9%}.faq-heading h2{font-size:clamp(35px,4vw,58px);margin-top:25px}.faq-list{border-top:1px solid #b0bdc4}.faq-list details{border-bottom:1px solid #b0bdc4}.faq-list summary{display:flex;justify-content:space-between;align-items:start;gap:25px;cursor:pointer;list-style:none;font:600 17px/1.5 'Manrope',sans-serif;padding:25px 0}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary i{font-style:normal;font-weight:400;font-size:23px;line-height:1.2;color:#526c82;transition:transform .2s}.faq-list details[open] summary i{transform:rotate(45deg)}.faq-list details>p{font-size:14px;line-height:1.8;color:#506575;padding:0 38px 26px 0}.faq-list summary:focus-visible{outline:2px solid #497eaa;outline-offset:5px}
@media(max-width:1000px){.scene-caption{max-width:240px;right:4%;top:10%}.insulation-intro{gap:6%}.insulation-grid{gap:4%}.roof-faq{gap:6%}}
@media(max-width:650px){.roof-legend{display:flex;flex-wrap:wrap;gap:5px;margin-top:13px}.roof-legend li{font-size:9px;padding:5px 6px;gap:6px}.layer-swatch{width:14px}.scene-caption{left:5%;right:5%;top:8%;max-width:none;padding:12px 14px;gap:10px}.scene-caption strong{font-size:11px}.scene-caption p{font-size:10px;line-height:1.5;margin-top:3px}.scene-caption .caption-index{font-size:10px}.insulation-guide{padding:75px 5%}.insulation-intro{grid-template-columns:1fr;gap:22px;padding:42px 0 35px}.insulation-guide h2{font-size:clamp(36px,9vw,53px)}.insulation-intro>p{font-size:13px}.insulation-grid{grid-template-columns:1fr;gap:28px}.layer-study{padding:18px}.insulation-points article{padding:23px 0;grid-template-columns:24px 1fr;gap:12px}.insulation-points h3{font-size:22px}.insulation-points p{font-size:12px;line-height:1.75;margin-top:10px}.roof-faq{padding:75px 5%;grid-template-columns:1fr;gap:35px}.faq-heading h2{font-size:39px;margin-top:20px}.faq-list summary{font-size:15px;padding:21px 0;gap:18px}.faq-list details>p{font-size:13px;padding-right:0}.diagram-key{gap:9px;font-size:9px}.layer-study figcaption{font-size:9px}}
.guide-link{display:inline-flex;gap:20px;align-items:center;margin-top:30px;font-size:13px;border-bottom:1px solid #6b879d;padding-bottom:8px}.guide-link:hover{color:#315d80}.guide-link:focus-visible{outline:2px solid #497eaa;outline-offset:5px}
/* A projected point from the real 3D layer drives both the leader and card.
   No positional transitions: they must stay attached while the roof moves. */
.scene-connector{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:4;color:var(--callout-color,#9dd6ff)}.scene-connector[hidden]{display:none}.scene-connector path{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.connector-halo{stroke:#07111e;stroke-width:5;opacity:.85}.connector-line{stroke:currentColor;stroke-width:1.5}.connector-ring{fill:#0b1422;fill-opacity:.7;stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke}.connector-point{fill:currentColor}.scene-caption{left:0;top:0;right:auto;bottom:auto;width:min(270px,calc(100% - 40px));max-width:none;padding:15px;gap:10px;border:1px solid color-mix(in srgb,var(--callout-color,#9dd6ff) 40%,transparent);border-left:3px solid var(--callout-color,#9dd6ff);border-top-width:1px;background:rgba(8,17,28,.96);transform:translate3d(0,0,0);transition:none;will-change:transform;pointer-events:none}.scene-caption .caption-index{color:var(--callout-color,#9dd6ff)}.scene-caption strong{font-size:12px;line-height:1.35}.scene-caption p{font-size:11px;line-height:1.55;margin-top:5px}.scene-caption>div{min-width:0}
@media(max-width:650px){.scene-caption{left:0;top:0;right:auto;width:min(208px,calc(100% - 24px));padding:10px 11px;gap:8px}.scene-caption strong{font-size:11px}.scene-caption p{font-size:10px;line-height:1.45;margin-top:4px}.scene-caption .caption-index{font-size:9px;padding-top:2px}.connector-line{stroke-width:1.35}}
@media(prefers-reduced-motion:reduce){.scene-caption,.scene-connector{transition:none!important;animation:none!important}}
.caption-building{display:block;font:700 8px/1.4 'DM Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--callout-color,#9dd6ff);margin-bottom:5px}
@media(max-width:650px){.story.has-layer-callout .chapter-panel{opacity:0;pointer-events:none;transition:none}.story.has-layer-callout .chapter-panel:focus-within{opacity:1;pointer-events:auto}.caption-building{font-size:7px;margin-bottom:4px}}
/* Reading beats occupy real scroll distance; scrolling is never trapped. */
.chapter.intro,.chapter-process{height:100vh;height:100svh}.chapter-home,.chapter-industry{height:400vh;height:400svh;align-items:flex-start;padding-top:20vh;padding-top:20svh;padding-bottom:80px}.chapter-home .chapter-panel,.chapter-industry .chapter-panel{position:sticky;top:20vh;top:20svh;align-self:flex-start}.story.has-layer-callout .chapter-panel{opacity:0;pointer-events:none;transition:none}.story.has-layer-callout .chapter-panel:focus-within{opacity:1;pointer-events:auto}
/* Generous, stable reading cards. Viewport zoom and large text remain scrollable. */
.story-content{pointer-events:none}.chapter-panel,.intro-heading,.intro-bottom{pointer-events:auto}
.scene-sticky{--reading-band:240px;--reading-side:360px}.scene-caption{width:min(340px,calc(100% - 40px));padding:18px;gap:12px;max-height:calc(100svh - 40px);overflow-y:auto;overscroll-behavior:auto;pointer-events:auto;touch-action:pan-y;scrollbar-width:thin;scrollbar-color:#7691a9 #101d2b}.scene-caption strong{font-size:1rem;line-height:1.4}.scene-caption p{font-size:.875rem;line-height:1.65;color:#e1e9ef;margin-top:8px}.scene-caption .caption-index{font-size:.75rem;padding-top:3px}.caption-building{font-size:.625rem;line-height:1.4;letter-spacing:.10em;margin-bottom:7px}.scene-caption:focus-visible{outline:2px solid var(--callout-color,#b5dfff);outline-offset:3px}
.reading-lane-bottom .hero-model{top:4%;left:50%;width:100%;height:max(90px,calc(96% - var(--reading-band)));transform:translateX(-50%)}.reading-lane-bottom .scene-caption{width:min(420px,calc(100% - 24px));max-height:min(42svh,calc(100svh - 180px));padding:15px 16px}.reading-lane-right .hero-model{top:7%;left:calc((100% - var(--reading-side))/2);width:max(100px,calc(100% - var(--reading-side)));height:86%;transform:translateX(-50%)}.reading-lane-right .scene-caption{width:clamp(220px,44vw,320px);max-height:calc(100svh - 24px);padding:14px}.reading-lane-bottom .scene-metadata,.reading-lane-right .scene-metadata{bottom:12px}
@media(max-width:900px){.scene-caption strong{font-size:1rem}.scene-caption p{font-size:.875rem;line-height:1.6}.scene-caption .caption-index{font-size:.75rem}.caption-building{font-size:.625rem}.chapter-home,.chapter-industry{padding-top:18svh;align-items:flex-start}.chapter-home .chapter-panel,.chapter-industry .chapter-panel{top:18svh}.story.has-layer-callout .intro-heading,.story.has-layer-callout .intro-bottom{opacity:0;pointer-events:none}.story.has-layer-callout .intro-heading:focus-within,.story.has-layer-callout .intro-bottom:focus-within{opacity:1;pointer-events:auto}}
@media(orientation:landscape) and (max-height:600px){.reading-lane-right .scene-caption{padding:12px;gap:8px}.reading-lane-right .scene-caption p{line-height:1.5}.reading-lane-right .caption-building{margin-bottom:4px}.reading-lane-right .scene-metadata span:nth-child(2){display:none}.reading-lane-right .scene-metadata{max-width:calc(100% - var(--reading-side) - 20px);left:14px;right:auto;font-size:8px}.story.has-layer-callout .intro-heading,.story.has-layer-callout .intro-bottom{opacity:0;pointer-events:none}}

/* Scroll feedback stays active while the model pauses for reading. */
.caption-scroll{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:14px;color:#aebfd0;font:500 10px/1.4 'DM Sans',sans-serif;letter-spacing:.03em}.caption-scroll-track{height:2px;width:100%;overflow:hidden;background:rgba(174,206,230,.18);margin-bottom:2px}.caption-scroll-track i{display:block;width:100%;height:100%;background:var(--callout-color,#9dd6ff);transform:scaleX(var(--reading-progress,0));transform-origin:left;box-shadow:0 0 9px var(--callout-color,#9dd6ff)}.caption-scroll b{margin-left:auto;font:14px/1 monospace;color:var(--callout-color,#9dd6ff)}
.scene-transition{position:absolute;z-index:5;left:50%;bottom:64px;transform:translateX(-50%);width:min(360px,calc(100% - 40px));padding:16px 18px;border:1px solid rgba(173,211,239,.25);background:rgba(8,17,28,.94);box-shadow:0 12px 36px #06111b44;pointer-events:none}.scene-transition[hidden]{display:none}.transition-route{display:flex;align-items:center;justify-content:space-between;gap:16px;color:#e5edf5;font:500 12px/1.4 'DM Sans',sans-serif}.transition-route>span{display:flex;flex-direction:column;gap:4px;min-width:0}.transition-route>span:last-child{text-align:right}.transition-route small{font:10px/1.2 monospace;letter-spacing:.15em;color:#99c8ef}.transition-route>i{font:20px/1 monospace;color:#99c8ef}.transition-track{height:2px;overflow:hidden;background:rgba(167,201,227,.18);margin-top:14px}.transition-track i{display:block;height:100%;width:100%;transform:scaleX(var(--transition-progress,0));transform-origin:left;background:#c4e4ff;box-shadow:0 0 12px #9dd6ff}.reading-lane-bottom .scene-transition{bottom:56px}.reading-lane-right .scene-transition{left:auto;right:12px;top:50%;bottom:auto;transform:translateY(-50%);width:clamp(220px,44vw,320px)}.story.is-building-transition .chapter-panel{opacity:0;pointer-events:none;transition:none}.story.is-building-transition .chapter-panel:focus-within{opacity:1;pointer-events:auto}
@media(max-width:650px){.scene-transition{width:calc(100% - 32px);padding:14px 16px}.transition-route{font-size:12px;gap:12px}.caption-scroll{font-size:10px}}
@media(prefers-reduced-motion:reduce){.caption-scroll-track i,.transition-track i,.scene-transition{transition:none!important;animation:none!important}}
/* A direct link into the handover also keeps its label clear of the model. */
.story:not(.reading-lane-bottom):not(.reading-lane-right) .hero-model{top:50%;height:78%}.story:not(.reading-lane-bottom):not(.reading-lane-right) .scene-transition{bottom:20px;width:min(400px,calc(100% - 40px));padding:10px 14px;min-height:64px}.story:not(.reading-lane-bottom):not(.reading-lane-right) .transition-route>span{flex-direction:row;align-items:baseline;gap:8px}.story:not(.reading-lane-bottom):not(.reading-lane-right) .transition-route>span>span{overflow-wrap:anywhere}.story:not(.reading-lane-bottom):not(.reading-lane-right) .transition-route small{flex-shrink:0}.story:not(.reading-lane-bottom):not(.reading-lane-right) .transition-track{margin-top:10px}.story.is-building-transition .scene-metadata{visibility:hidden}

.scene-transition{padding:11px 14px;border-color:rgba(157,207,245,.33);background:linear-gradient(110deg,rgba(9,22,37,.96),rgba(12,30,49,.94));box-shadow:0 12px 36px #06111b44,inset 0 1px 0 #bddfff0d}.transition-route>span{flex-direction:row;align-items:baseline;gap:7px}.transition-route small{flex-shrink:0}.transition-route{gap:12px}.transition-route>i{font-size:17px}.transition-phase{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;color:#bbd2e4;font:500 11px/1.3 'DM Sans',sans-serif;min-height:15px}.transition-phase-marks{display:flex;gap:5px;flex-shrink:0}.transition-phase-marks i{height:3px;width:14px;background:#324a60}.transition-phase-marks i.is-complete{background:#6994b5}.transition-phase-marks i.is-active{background:#c4e6ff;box-shadow:0 0 8px #9fd3ff55}.scene-transition .transition-track,.story:not(.reading-lane-bottom):not(.reading-lane-right) .scene-transition .transition-track{margin-top:8px}.reading-lane-right .scene-transition{padding:12px}.reading-lane-right .transition-route{font-size:11px;gap:7px}.reading-lane-right .transition-route small{display:none}.reading-lane-right .transition-phase{font-size:10px;gap:8px}.reading-lane-right .transition-phase-marks{gap:4px}.reading-lane-right .transition-phase-marks i{width:9px}
@media(max-width:650px){.scene-transition{padding:12px 14px}.transition-route small{display:none}.transition-route>span{gap:0}.transition-phase{font-size:11px}.transition-phase-marks i{width:11px}}
@media(prefers-reduced-motion:reduce){.transition-phase-marks i.is-active{box-shadow:none}}
/* The introductory composition clears its headline, then joins the stable
   reading scene. Light and drawing rings share the actual model centre. */
.story:not(.reading-lane-bottom):not(.reading-lane-right) .hero-model{transform:translate(-50%,-50%) translateY(var(--intro-shift,0px)) scale(var(--intro-scale,1))}.reading-lane-bottom .hero-model{transform:translateX(-50%) translateY(var(--intro-shift,0px))}.scene-sticky{background:radial-gradient(ellipse at var(--scene-center-x,50%) var(--scene-center-y,50%),#263c53 0%,#14263a 36%,#0b1422 77%)}.scene-glow{left:var(--scene-center-x,50%);top:var(--scene-center-y,50%)}.scene-grid{mask-image:radial-gradient(ellipse at var(--scene-center-x,50%) var(--scene-center-y,50%),#000 10%,transparent 80%)}
.reading-lane-right .hero-model{transform:translateX(-50%) translateY(var(--intro-shift,0px))}
@media(max-height:600px) and (orientation:landscape){.reading-lane-right .intro-heading{left:auto;right:24px;width:clamp(220px,44vw,320px);top:26%;text-align:left}.reading-lane-right .intro-heading .eyebrow{justify-content:flex-start;font-size:7px;letter-spacing:.12em;gap:6px}.reading-lane-right .intro-heading h1{font-size:30px;line-height:1.08;margin:13px 0 0}.reading-lane-right .intro-heading p{display:none}.reading-lane-right .intro-bottom{left:auto;right:24px;width:clamp(220px,44vw,320px);bottom:9%;display:block}.reading-lane-right .intro-links{gap:8px;justify-content:flex-start;margin-bottom:12px}.reading-lane-right .intro-links a{padding:10px;font-size:10px;gap:8px}.reading-lane-right .hero-cta{position:static;display:flex;justify-content:space-between;gap:12px;width:100%;padding:12px 13px;font-size:11px}.reading-lane-right .scroll-indicator{display:none}}
@media(max-width:650px) and (max-height:650px){.header{height:64px}}
@media(max-width:650px) and (max-height:650px) and (orientation:portrait){.intro-bottom{bottom:max(11%,75px)}}
.reading-lane-right .scene-metadata{gap:16px}
.story.is-intro-composition .scene-metadata{visibility:hidden}
.story.has-layer-callout .chapter-side,.story.is-building-transition .chapter-side{visibility:hidden;pointer-events:none}

/* WHITE ARCHITECTURAL EDITION — one palette across the full presentation. */
:root{--night:#fff;--night2:#f5f5f1;--paper:#f7f7f3;--ink:#202a2d;--blue:#526e79;--muted:#667073;--line:rgba(42,55,58,.16);background:#fff;color:var(--ink);color-scheme:light}
body{background:#fff;color:var(--ink)}
a:focus-visible{outline:2px solid #7a6041;outline-offset:5px}
.header{background:rgba(255,255,253,.93);border-bottom-color:#dce0dd}
.brand img{filter:none}.brand-name{color:#253134}.brand-name small{color:#727b7c}
.navigation{color:#535f63}.navigation a:hover,.lang a:hover{color:#8b693f}.lang{color:#727c7e}.lang a.active{color:#202a2d}
.header-cta{border-color:#a6b0b0;background:transparent;color:#28363a}.header-cta:hover{background:#243438;border-color:#243438;color:#fff}
.scene-sticky{background:radial-gradient(ellipse at var(--scene-center-x,50%) var(--scene-center-y,50%),#eeefea 0%,#f9f9f5 43%,#fff 77%)}
.scene-grid{background-image:linear-gradient(rgba(72,91,96,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(72,91,96,.045) 1px,transparent 1px)}
.scene-glow{border-color:rgba(76,94,97,.11);box-shadow:none}.scene-glow:before,.scene-glow:after{border-color:rgba(76,94,97,.09)}
.scene-cross{color:#849391;opacity:.65}.scene-metadata{color:#748180}.scroll-indicator{color:#657976}.scroll-line{background:#81948e}
.hero-model{width:100%;height:94%;top:50%}
.story:not(.reading-lane-bottom):not(.reading-lane-right) .hero-model{width:100%;height:94%;top:50%;transform:translate(-50%,-50%) translate(var(--intro-x,0px),var(--intro-shift,0px)) scale(var(--intro-scale,1))}
.eyebrow{color:#7b674c}.eyebrow-dot{background:#9a7950;box-shadow:none}
.intro-heading h1{color:#253033;text-shadow:none}.intro-heading h1 em{color:#76847f}.intro-heading p{color:#66716f;text-shadow:none}
.intro-links a{border-color:#c5cdca;background:rgba(255,255,253,.88);color:#35423f}.intro-links a span:first-child{color:#8c724f}.intro-links a:hover,.round-link:hover{background:#ecefe8;color:#273732}
.hero-cta{background:#263b35;color:#fff}.hero-cta:hover{background:#40554b;color:#fff}
.chapter-panel,.chapter-industry .chapter-panel{background:rgba(255,255,253,.97);border-left-color:#8a9e92;box-shadow:0 16px 50px rgba(57,66,54,.08)}
.chapter-index,.section-index{color:#6d7e75}.chapter-index span:first-child{color:#263a32}.chapter-index i,.section-index i{background:#91a298}
.chapter-panel>p,.steps p{color:#66726c}.chapter-tags span{color:#58675f;border-color:#b7c1ba}.round-link{color:#304f42;border-bottom-color:#91aa9b}
.chapter-side{color:#91a099}.steps>div>span{color:#8b7352}.roof-legend li{color:#68776c}.roof-legend li.is-active{color:#253d30;background:#edf1e9;border-color:#bbcbb8}
.layer-swatch{background:#61777a}.structure-swatch{background:#62796a}
.services{background:#fff}.services-heading p,.service-list p{color:#66716d}.service-list,.service-list article{border-color:#d4dcd5}.service-num{color:#8b7353}.service-icon{color:#647b6b}
.guide-link{color:#506956;border-bottom-color:#aab9aa}.guide-link:hover{color:#836541}
.insulation-guide{background:#f5f6f0;border-top-color:#dce1d5}.insulation-guide .section-index{color:#70816b}.insulation-intro>p,.insulation-points p{color:#626f62}
.layer-study{border-color:#d5ddcd;background:radial-gradient(ellipse at 45% 45%,#fff,#f0f2e9 76%)}.layer-study-top{color:#728169}
.diagram-key{color:#4b5d47;border-top-color:#d1dbc7}.diagram-key i{color:#687b59}.diagram-key>span:nth-child(2) i{color:#927037}.layer-study figcaption{color:#6b7961}
.insulation-points article,.insulation-points article:last-child{border-color:#d0dbc5}.point-number{color:#8b784d}
.roof-faq{background:#fff;color:#263528}.faq-list,.faq-list details{border-color:#d1dbca}.faq-list summary i{color:#708462}.faq-list details>p{color:#66765a}
.contact{background:#eeefe5;color:#303b25}.contact .eyebrow{color:#7a784b}.contact .eyebrow-dot{background:#928455}.contact-top{color:#7b8463}.contact-info{border-top-color:#c0c9aa}.contact-info>p{color:#647053}.contact-placeholder{color:#5c6d47}.contact-placeholder span{border-color:#a2b18d}
footer{background:#fff;border-top:1px solid #dde4d5;color:#7c856d}footer .brand{color:#263829}footer>a:last-child{color:#516940}
/* Readable labels sit on solid paper; their colour comes from the active part. */
.scene-caption{width:min(310px,calc(100% - 40px));color:#253332;background:rgba(255,255,253,.98);border-color:color-mix(in srgb,var(--callout-color,#526b70) 35%,#e1e5dd);border-left-color:var(--callout-color,#526b70);box-shadow:0 14px 44px rgba(51,65,48,.09);scrollbar-color:#a0b09a #f3f5ed}
.scene-caption strong{color:#273a30;font-size:1rem}.scene-caption p{color:#52654e;font-size:.875rem}.caption-building,.scene-caption .caption-index{color:var(--callout-color,#60755f)}
.scene-connector{color:var(--callout-color,#536e60)}.connector-halo{stroke:#fffffc;stroke-width:4;opacity:.9}.connector-ring{fill:#fffffc;fill-opacity:.95}
.caption-scroll{color:#73856c}.caption-scroll-track{background:#dce4d4}.caption-scroll-track i{box-shadow:none}
.scene-transition{color:#2e4332;border-color:#c6d4bd;background:rgba(255,255,253,.98);box-shadow:0 14px 44px rgba(51,65,48,.08)}
.transition-route{color:#354c36}.transition-route small,.transition-route>i{color:#738c66}.transition-phase{color:#6d825f}
.transition-track{background:#dbe5d1}.transition-track i{background:#7e986c;box-shadow:none}.transition-phase-marks i{background:#dde6d4}.transition-phase-marks i.is-complete{background:#a7b797}.transition-phase-marks i.is-active{background:#7c9567;box-shadow:none}

@media(min-width:901px) and (min-height:601px){
  .intro-heading{left:5%;right:auto;top:29%;width:28%;max-width:390px;text-align:left}
  .intro-heading .eyebrow{justify-content:flex-start;font-size:8px;letter-spacing:.14em;line-height:1.6}
  .intro-heading h1{font-size:clamp(35px,3.25vw,52px);line-height:1.12;margin:22px 0 18px;letter-spacing:-.055em}
  .intro-heading p{font-size:13px;line-height:1.8;max-width:330px}
  .intro-bottom{left:5%;right:auto;bottom:13%;width:28%;max-width:390px;display:block}
  .intro-links{display:flex;gap:8px}.intro-links a{padding:12px;gap:10px;font-size:10px;flex:1;justify-content:space-between}.intro-links b{font-size:14px}
  .intro-bottom .scroll-indicator{display:none}.intro-bottom .hero-cta{margin-top:12px;justify-content:space-between;width:100%;padding:15px 16px}
  .scene-glow{width:min(78vw,1400px);height:min(78vw,1400px)}
}
@media(max-width:900px){
  .scene-caption{width:min(420px,calc(100% - 24px))}
  .intro-heading{left:6%;right:6%;top:14%;text-align:center}.intro-heading .eyebrow{justify-content:center}
  .intro-heading h1{font-size:clamp(32px,5.5vw,49px);margin:14px 0 10px}.intro-heading p{color:#6a7866}
}
@media(max-width:650px){
  .header{background:rgba(255,255,253,.96)}
  .intro-heading{top:13%;left:5%;right:5%}.intro-heading h1{font-size:clamp(29px,7.6vw,40px);line-height:1.12}.intro-heading .eyebrow{font-size:7px;letter-spacing:.13em}
  .intro-heading p{font-size:11px;line-height:1.6;max-width:315px}
  .intro-links a{background:rgba(255,255,253,.96)}
  .chapter-panel,.chapter-industry .chapter-panel{background:rgba(255,255,253,.98)}
  .reading-lane-bottom .scene-caption{box-shadow:0 8px 28px rgba(51,65,48,.08)}
}
@media(max-width:650px) and (max-height:650px){.intro-heading h1{font-size:28px}.intro-heading p{display:none}}
@media(max-height:600px) and (orientation:landscape){
  .reading-lane-right .intro-heading{left:auto;right:24px;top:25%;width:clamp(220px,44vw,320px);text-align:left}
  .reading-lane-right .intro-heading .eyebrow{justify-content:flex-start}.reading-lane-right .intro-heading h1{font-size:30px;margin:12px 0 0}
  .reading-lane-right .intro-bottom{left:auto;right:24px;bottom:9%;width:clamp(220px,44vw,320px)}
  .reading-lane-right .intro-bottom .hero-cta{margin-top:0}
}

/* Six viewport heights of scroll drive the model. Native section links land
   halfway through the first cover explanation of each building. The intro
   stays a full viewport so its heading and controls retain their positions. */
.chapter-home {
  height: 288.5vh;
  height: 288.5svh;
  scroll-margin-top: 38.5vh;
  scroll-margin-top: 38.5svh;
}
.chapter-industry {
  height: 211.5vh;
  height: 211.5svh;
}
.reading-lane-right .hero-model{top:6%;height:90%;transform:translateX(-50%) translate(var(--intro-x,0px),var(--intro-shift,0px))}
@media(max-width:650px) and (max-height:650px) and (orientation:portrait){
  .scene-caption .caption-scroll{margin-top:10px;gap:0}
  .scene-caption .caption-scroll span,.scene-caption .caption-scroll b{display:none}
  .scene-caption .caption-scroll-track{margin-bottom:0}
}

/* A single, immovable optical centre for the architectural study. Both side
   rails have the same clearance, even when just one explanation is visible. */
.story{--rail-pad:20px;--side-card:clamp(176px,15.2vw,242px);--intro-rail:clamp(176px,17.3vw,274px)}
.story[data-scene] .scene-sticky .hero-model{inset:0;width:100%;height:100%;transform:none}
.scene-sticky .scene-glow{left:50%;top:50%}
.reading-lanes-sides .scene-caption,.reading-lanes-sides .scene-transition{width:var(--side-card);padding:14px;gap:8px}
.reading-lanes-sides .scene-caption{max-height:calc(100svh - 32px)}
.scene-caption strong,.scene-caption p,.scene-caption .caption-building{overflow-wrap:anywhere}
:lang(de) .scene-caption strong,:lang(de) .scene-caption p,:lang(de) .scene-caption .caption-building{hyphens:auto}
.reading-lanes-sides .scene-caption p{line-height:1.55}.reading-lanes-sides .caption-building{margin-bottom:4px}
.reading-lanes-sides .caption-scroll{margin-top:10px}
.reading-lanes-sides .scene-transition{left:auto;right:var(--rail-pad);top:50%;bottom:auto;transform:translateY(-50%)}
.reading-lanes-sides .scene-transition .transition-route{font-size:11px;gap:5px}
.reading-lanes-sides .scene-transition .transition-route small{display:none}
.reading-lanes-sides .transition-phase{gap:5px;font-size:10px}.reading-lanes-sides .transition-phase-marks{gap:3px}.reading-lanes-sides .transition-phase-marks i{width:6px}
.reading-lanes-sides .chapter{padding-inline:var(--rail-pad)}
.reading-lanes-sides .intro-heading{left:var(--rail-pad);right:auto;top:50%;width:var(--intro-rail);max-width:none;text-align:left;transform:translateY(-50%)}
.reading-lanes-sides .intro-heading .eyebrow{justify-content:flex-start;font-size:8px;line-height:1.45;letter-spacing:.105em}
.reading-lanes-sides .intro-heading h1{font-size:clamp(25px,2.65vw,44px);line-height:1.06;margin:16px 0 12px;letter-spacing:-.055em;overflow-wrap:normal;hyphens:none}
.reading-lanes-sides .intro-heading p{font-size:13px;line-height:1.6;text-align:left;margin:0}
.reading-lanes-sides .intro-bottom{left:auto;right:var(--rail-pad);top:50%;bottom:auto;transform:translateY(-50%);width:var(--intro-rail);max-width:none;display:block}
.reading-lanes-sides .intro-links{display:grid;gap:6px;grid-template-columns:1fr}
.reading-lanes-sides .intro-links a{width:100%;justify-content:flex-start;gap:10px;padding:11px 12px;font-size:11px}
.reading-lanes-sides .intro-links b{margin-left:auto}.reading-lanes-sides .intro-bottom .scroll-indicator{display:none}
.reading-lanes-sides .intro-bottom .hero-cta{position:static;display:flex;width:100%;margin-top:8px;justify-content:space-between;gap:8px;padding:12px;font-size:11px}
.reading-lanes-sides .chapter-panel{width:var(--intro-rail);padding:17px}.reading-lanes-sides .chapter-panel h2{font-size:clamp(23px,2vw,35px);line-height:1.12;margin:14px 0}
.reading-lane-bottom .scene-caption{padding:12px 14px;gap:8px}.reading-lane-bottom .scene-caption p{margin-top:4px;line-height:1.5}
.reading-lane-bottom .caption-building{margin-bottom:3px}.reading-lane-bottom .caption-scroll{margin-top:9px;gap:0}
.reading-lane-bottom .caption-scroll span,.reading-lane-bottom .caption-scroll b{display:none}.reading-lane-bottom .caption-scroll-track{margin:0}
.reading-lane-bottom.has-layer-callout .scene-metadata{visibility:hidden}.reading-lane-bottom .scene-transition{bottom:12px;width:min(420px,calc(100% - 24px))}
@media(max-width:900px){.story{--rail-pad:12px;--side-card:clamp(139px,17.8vw,166px);--intro-rail:var(--side-card)}
  .reading-lanes-sides .intro-heading h1{font-size:clamp(20px,2.8vw,27px)}.reading-lanes-sides .intro-heading p{display:none}
  .reading-lanes-sides .intro-heading .eyebrow{font-size:7px}.reading-lanes-sides .scene-caption{padding:10px;gap:5px}
  .reading-lanes-sides .scene-caption .caption-index{font-size:.625rem}.reading-lanes-sides .scene-caption strong{font-size:.875rem}
  .reading-lanes-sides .scene-caption p{font-size:.8125rem;line-height:1.45}.reading-lanes-sides .caption-building{font-size:.55rem}
  .reading-lanes-sides .caption-scroll span,.reading-lanes-sides .caption-scroll b{display:none}.reading-lanes-sides .caption-scroll{margin-top:7px;gap:0}
}
@media(max-height:510px) and (orientation:landscape){.header{height:52px}.header .brand img{width:30px;height:30px}.header-cta{padding:8px 10px}}
@media(max-height:650px) and (orientation:portrait){.reading-lane-bottom .scene-caption{padding:10px 12px}.reading-lane-bottom .caption-building{display:none}}
.story[data-scene].reading-lanes-sides .scene-transition{left:auto;right:var(--rail-pad);top:50%;bottom:auto;width:var(--side-card);min-height:0;transform:translateY(-50%)}
.reading-lanes-sides .scene-metadata{bottom:10px}
/* Move the existing canvas with the visible centre as mobile browser bars
   retract. Its drawing buffer and caption measurements keep their size. */
@media (pointer:coarse) {
  @supports (height:100dvh) and (height:100svh) {
    .scene-sticky {
      top:var(--mobile-study-top,calc((100dvh - 100svh) / 2));
      translate:0 var(--mobile-study-offset,0px);
    }
  }
}

/* The section anchors stay in normal document flow. During the model study
   its applied frame owns the visible notes; moving a later anchor cannot
   bring a spare panel in front of the model. Keyboard focus reveals its
   original chapter contents, and without a rendered model the HTML is shown. */
.story[data-model-presentation] :is(.chapter-home,.chapter-industry) .chapter-panel,
.story[data-model-presentation] .chapter-process .chapter-panel {
  opacity:0;
  pointer-events:none;
  transition:opacity 160ms ease-out;
}
.story[data-model-presentation="outro"] .chapter-process .chapter-panel {
  opacity:1;
  pointer-events:auto;
}
.story[data-model-presentation] :is(.chapter-home,.chapter-industry) .chapter-side {
  visibility:hidden;
}
.story[data-model-presentation] :is(.intro-heading,.intro-bottom) {
  opacity:var(--intro-content-opacity,1);
  transition:opacity 110ms linear;
}
/* Keep the headline and actions in the camera's frame while they fade.
   Native scrolling still moves the chapter anchors underneath this overlay. */
.story[data-model-presentation] .chapter.intro {
  position:sticky;
  top:0;
  pointer-events:none;
}
@media (pointer:coarse) {
  @supports (height:100dvh) and (height:100svh) {
    .story[data-model-presentation] .chapter.intro {
      top:var(--mobile-study-top,calc((100dvh - 100svh) / 2));
      translate:0 var(--mobile-study-offset,0px);
    }
  }
}
.story[data-model-presentation]:not([data-model-presentation="intro"]) :is(.intro-heading,.intro-bottom) {
  opacity:0;
  pointer-events:none;
}
.story[data-model-presentation] .chapter-panel:has(:focus-visible),
.story[data-model-presentation] .intro-bottom:has(:focus-visible) {
  opacity:1;
  pointer-events:auto;
  transition:none;
}
.story[data-model-presentation="transfer"] .scene-transition:not([hidden]) {
  animation:model-note-arrives 140ms ease-out;
}
@keyframes model-note-arrives { from { opacity:.25 } to { opacity:1 } }
@media (prefers-reduced-motion:reduce) {
  .story[data-model-presentation] :is(.intro-heading,.intro-bottom,.chapter-panel,.scene-transition) {
    transition:none!important;
    animation:none!important;
  }
}

.roof-opening-poster {position:absolute;display:block;pointer-events:none;z-index:1}

.mobile-services-link{display:none}
.lang a{display:inline-grid;place-items:center;min-width:24px;min-height:32px}
.service-list article:has(.service-detail){position:relative}
.service-detail::after{content:"";position:absolute;inset:0}
.service-detail:focus-visible::after{outline:2px solid #426252;outline-offset:3px}
.service-list article:has(.service-detail:hover) h3,.service-detail:focus-visible{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.17em}
@media(max-width:1000px){
  .mobile-services-link{display:inline-flex;align-items:center;min-height:36px;font-size:12px;font-weight:700;color:#32463a}
}
@media(max-width:420px){
  .header-right,.header-right .lang{gap:4px}
  .header-right .header-cta{padding:8px;gap:4px}
  .mobile-services-link{margin-right:3px}
}
@media(max-width:360px){
  .header{padding-inline:10px}
  .header .brand-name small,.header-right .header-cta [aria-hidden]{display:none}
  .header-right .header-cta{min-height:32px}
}
/* The sticky model overlaps its chapters, but must end at the story boundary. */
.story{overflow:clip;isolation:isolate}
.services{position:relative}

.work-scope {margin-top:clamp(48px,6vw,88px);scroll-margin-top:24px}
.scope-heading {display:flex;align-items:baseline;justify-content:space-between;gap:8px 32px;flex-wrap:wrap}
.scope-heading h3 {margin:0;font-size:clamp(25px,3vw,42px);line-height:1.14;font-weight:500;letter-spacing:-.04em}
.scope-heading small {color:#56635d;font-size:13px;line-height:1.5}
.work-scope ul {list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3.5vw,55px);margin:24px 0 0;padding:0}
.work-scope li {border-top:1px solid #bdc9bf;padding:18px 0 0}
.work-scope .scope-code {color:#765c38;font:600 12px/1.5 'DM Sans',sans-serif;letter-spacing:.04em}
.work-scope h4 {margin:10px 0 8px;font-size:clamp(20px,1.8vw,27px);font-weight:550;line-height:1.2;letter-spacing:-.025em;hyphens:auto;overflow-wrap:anywhere}
.work-scope p {margin:0;max-width:42ch;color:#4f5e57;font-size:1rem;line-height:1.6}
@media(max-width:700px) {
  .work-scope ul {grid-template-columns:1fr;gap:20px}
  .scope-heading {display:grid;gap:8px}
}
.roof-legend .gutter-swatch {background:#678b91}
.roof-legend .facade-swatch {background:#b58b5c}
.cover-swatch {background:#655e59}
.membrane-swatch {background:#99b6bc;border-bottom:1px solid #5e828b}
.felt-swatch {background-color:#524f4b;background-image:radial-gradient(#b2ada4 .7px,transparent .9px);background-size:3px 3px}

/* The detail itself is rendered in the scene canvas at the device's resolution. */
.roof-closeup-frame {
  position:absolute; top:0; left:0; z-index:1; box-sizing:border-box;
  border:1px solid #aebbb4; pointer-events:none;
}
.roof-closeup-frame[hidden] {display:none}
.roof-closeup-frame span {
  position:absolute; left:-1px; bottom:calc(100% + 5px);
  color:#495951; font:600 11px/1.3 'DM Sans',sans-serif;
}

.diagram-key,.layer-study figcaption {font-size:clamp(.78rem,1vw,.88rem)}
.practice-references {border-top:1px solid #c7d1c4;margin-top:2.5rem;padding-top:.35rem;color:#34473c}
.practice-references summary {cursor:pointer;padding:.8rem 0;font-size:.95rem;font-weight:600;line-height:1.5}
.practice-references ul {list-style:none;margin:.5rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:1.25rem 2rem}
.practice-references a {font-size:.94rem;line-height:1.5;text-decoration:underline;text-underline-offset:.18em}
.practice-references small {display:block;margin-top:.25rem;font-size:.82rem;color:#506155}
.practice-references :is(a,summary):focus-visible {outline:2px solid #876c46;outline-offset:3px}