:root{--petrol:#142425;--sage:#7a836b;--cream:#f2efec;--deep:#213535;--mist:#e2e4da;--ink:#1f2c29;--line:rgba(20,36,37,.18);--serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;--sans:'DM Sans',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);overflow-x:hidden}button,a{font:inherit}a{color:inherit;text-decoration:none}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--sage);outline-offset:4px}img,video{display:block;max-width:100%}strong{font-weight:600}.wrap{width:min(92%,1280px);margin-inline:auto}.caps{font:600 11px/1.45 var(--sans);letter-spacing:.23em;text-transform:uppercase}.serif{font-family:var(--serif);letter-spacing:-.035em;font-weight:500}
.top{position:absolute;z-index:30;top:0;left:0;right:0;color:var(--cream);height:88px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,5vw,76px);gap:20px}.top .name{font-weight:700;font-size:14px;letter-spacing:.15em}.top small{display:block;font-size:9px;letter-spacing:.34em;font-weight:500;margin-top:2px}.toplinks{display:flex;gap:30px;align-items:center;font-size:12px}.toplinks a{padding:10px 0;border-bottom:1px solid transparent;transition:border-color .2s}.toplinks a:hover{border-color:var(--sage)}.toplinks .topcta{padding:11px 18px;border:1px solid rgba(242,239,236,.54);border-radius:25px}
.scrollstory{height:510vh;min-height:2900px;position:relative;background:var(--petrol)}.pinned{position:sticky;top:0;height:100svh;min-height:550px;overflow:hidden;isolation:isolate}.film-backdrop{position:absolute;inset:-25px;background:url('assets/window-story/poster.jpg') center/cover;filter:blur(24px) saturate(.75);transform:scale(1.1);opacity:.55;z-index:-4}.film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3;background:var(--petrol)}.shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(13,30,29,.58) 0%,rgba(13,30,29,.17) 70%),linear-gradient(0deg,rgba(20,36,37,.78),transparent 35%,rgba(20,36,37,.26) 95%)}.pinned::after{content:"";position:absolute;bottom:0;left:0;right:0;height:18%;background:linear-gradient(0deg,var(--petrol),transparent);pointer-events:none;z-index:2}
.stage{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(95px,12vw,140px) max(6vw,calc((100vw - 1250px)/2)) 100px;color:var(--cream);opacity:0;transform:translateY(44px);filter:blur(6px);pointer-events:none;transition:opacity .5s ease,transform .8s cubic-bezier(.16,1,.3,1),filter .7s ease;z-index:3}.stage.active{opacity:1;transform:translateY(0);filter:blur(0)}.stage .stepno{display:flex;gap:14px;align-items:center;letter-spacing:.25em;margin-bottom:20px;color:#e3e5d6}.stepno:before{content:"";height:1px;width:45px;background:#dbe2d4}.stage h1,.stage h2{font-family:var(--serif);font-weight:500;letter-spacing:-.05em;line-height:.87;margin:0;max-width:min(800px,84vw);font-size:clamp(65px,9vw,155px);text-wrap:balance;text-shadow:0 2px 25px #14242529}.stage h1 em,.stage h2 em{font-weight:400;color:#dbe3ce;font-style:italic}.stage .desc{font-size:clamp(13px,1.32vw,17px);line-height:1.6;max-width:470px;margin:32px 0 0;color:rgba(242,239,236,.92)}.stage.final h2{max-width:1100px}.stage.final .desc{max-width:600px}
.scrollmeta{z-index:6;position:absolute;bottom:38px;left:clamp(20px,5vw,76px);right:clamp(20px,5vw,76px);display:flex;align-items:center;justify-content:space-between;color:var(--cream);gap:15px}.scrollmeta .hint{display:flex;align-items:center;gap:16px;font-size:11px;letter-spacing:.18em;text-transform:uppercase}.scrollmeta .arrow{font-size:20px;display:inline-block;animation:float 2.8s ease-in-out infinite}@keyframes float{50%{transform:translateY(7px)}}.seekbar{height:1px;background:rgba(242,239,236,.3);width:min(250px,25vw);position:relative}.seekbar span{height:2px;position:absolute;top:0;left:0;width:0;background:#d9e3d4}.progresscopy{min-width:65px;text-align:right;font-size:11px;letter-spacing:.15em}
.transition-band{background:var(--petrol);color:var(--cream);margin-top:-1px;padding:12vh 0 14vh;position:relative}.transition-band:before{content:"";position:absolute;inset:0;background:radial-gradient(70% 80% at 80% 100%,rgba(122,131,107,.22),transparent);pointer-events:none}.transition-band .wrap{position:relative}.transition-band .subline{max-width:670px;margin:0 0 25px;font-size:13px;letter-spacing:.12em;color:#cdd6cd}.transition-band h2{font-size:clamp(58px,8.1vw,125px);line-height:.95;max-width:1050px;margin:0;font-weight:500}.transition-band h2 em{color:#bac9b4}.transition-band .micro{margin-top:42px;color:#c7d1c9;max-width:560px;font-size:15px;line-height:1.7}
.showcase{background:linear-gradient(180deg,var(--petrol) 0%,#bac4b9 12%,var(--cream) 23%,var(--cream) 100%);color:var(--petrol);padding:160px 0 125px}.sectionheader{max-width:800px;margin-bottom:40px}.sectionheader .caps{color:#5d715e}.sectionheader h2{font-size:clamp(55px,7vw,104px);line-height:.93;margin:15px 0 20px}.sectionheader p{max-width:650px;line-height:1.65;color:#43544d;font-size:15px}.tabs{display:flex;gap:5px;margin:34px 0 22px;border-bottom:1px solid var(--line);flex-wrap:wrap}.tab{border:0;border-bottom:2px solid transparent;background:none;padding:14px 25px 18px 0;margin-right:26px;font-size:12px;letter-spacing:.16em;font-weight:700;color:#5e716b}.tab[aria-selected=true]{color:var(--petrol);border-bottom-color:var(--sage)}.modelbox{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);min-height:600px;gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.photoarea{position:relative;min-height:560px;background:#c7cbc6;overflow:hidden}.photoarea img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .5s,transform 1.1s}.photoarea:hover img{transform:scale(1.025)}.photolabel{position:absolute;left:28px;bottom:24px;background:rgba(242,239,236,.89);backdrop-filter:blur(10px);padding:13px 17px;font-size:10px;letter-spacing:.2em;color:var(--petrol)}.description{padding:clamp(28px,4.4vw,67px);display:flex;flex-direction:column;justify-content:center}.description .overline{color:var(--sage);margin:0 0 15px}.description h3{font:500 clamp(52px,5.1vw,82px)/.95 var(--serif);letter-spacing:-.05em;margin:0 0 20px}.description p{font-size:15px;line-height:1.7;color:#4b5d55;max-width:450px}.namehint{margin:30px 0 11px;font-size:10px;letter-spacing:.2em;color:#69786f}.modellist{display:grid;gap:5px}.model{background:transparent;border:0;border-bottom:1px solid var(--line);padding:13px 0;display:flex;align-items:center;justify-content:space-between;color:var(--petrol);text-align:left}.model[aria-pressed=true]{font-weight:700}.model[aria-pressed=true] .dot{background:var(--sage)}.dot{width:8px;height:8px;border:1px solid var(--sage);border-radius:50%}.views{display:flex;gap:6px;margin-top:25px}.views button{background:transparent;border:1px solid #9cab9f;border-radius:28px;padding:10px 16px;color:#445c50;font-size:12px}.views button[aria-pressed=true]{background:var(--petrol);border-color:var(--petrol);color:var(--cream)}.disclaimer{font-size:12px!important;color:#72827a!important;line-height:1.6!important;margin-top:22px}
.compare{background:var(--cream);padding:30px 0 125px}.comparison{position:relative;width:100%;height:min(60vw,640px);min-height:300px;background:#b2b8b2;overflow:hidden}.comparison img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover}.comparison .after{clip-path:inset(0 50% 0 0)}.comparison .handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:white;box-shadow:0 0 0 1px #1424252c;pointer-events:none}.comparison .knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;background:var(--cream);width:60px;height:60px;display:grid;place-items:center;font:600 21px var(--sans);pointer-events:none;color:var(--petrol);box-shadow:0 3px 25px #12282746}.comparison input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize}.comparison .lab{position:absolute;top:20px;background:var(--cream);padding:9px 14px;font-size:11px;letter-spacing:.12em;pointer-events:none}.comparison .lab.left{left:20px}.comparison .lab.right{right:20px}.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;margin-top:55px}.benefits article{border-top:1px solid var(--line);padding-top:24px}.benefits .num{color:var(--sage)}.benefits h3{font:500 35px var(--serif);letter-spacing:-.03em;margin:14px 0 10px}.benefits p{font-size:14px;color:#64756b;line-height:1.6;margin:0}
.outro{background:var(--deep);color:var(--cream);padding:14vh 0}.outro h2{font:500 clamp(60px,8vw,120px)/.92 var(--serif);letter-spacing:-.05em;max-width:900px;margin:14px 0 40px}.outro a{display:inline-block;border-bottom:1px solid #b7c7b9;padding-bottom:9px;font-size:13px;letter-spacing:.16em}.foot{background:var(--petrol);color:#b5c4bc;padding:25px 0;font-size:12px}.foot .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
@media(max-width:900px){.modelbox{grid-template-columns:1fr}.photoarea{min-height:460px}.description{padding:42px 25px 50px}.scrollstory{height:450vh}.stage{padding:70px 6vw 120px}.stage h1,.stage h2{font-size:clamp(68px,13vw,104px)}.showcase{padding-top:125px}}
@media(max-width:620px){.top{height:70px;padding:0 18px}.toplinks a:not(.topcta){display:none}.toplinks .topcta{padding:9px 12px;font-size:11px}.scrollstory{height:460svh;min-height:2350px}.film{object-fit:contain}.shade{background:linear-gradient(0deg,rgba(14,35,34,.91) 0%,rgba(14,35,34,.70) 20%,rgba(14,35,34,.2) 60%,rgba(14,35,34,.48) 100%)}.stage{justify-content:flex-end;padding:120px 20px 110px}.stage h1,.stage h2{font-size:clamp(64px,12vw,87px);max-width:100%;line-height:.91}.stage .desc{font-size:13px;margin-top:20px;max-width:390px}.stage .stepno{margin-bottom:15px}.scrollmeta{bottom:25px;left:20px;right:20px}.scrollmeta .hint{font-size:10px;letter-spacing:.11em}.seekbar{width:55px}.transition-band{padding:80px 0 85px}.transition-band h2{font-size:clamp(57px,13vw,82px)}.showcase{padding:110px 0 70px;background:linear-gradient(180deg,var(--petrol),#c8d0c6 6%,var(--cream) 16%)}.sectionheader h2{font-size:clamp(56px,12vw,78px)}.photoarea{min-height:350px}.description h3{font-size:57px}.comparison{min-height:280px}.benefits{grid-template-columns:1fr;gap:15px}.compare{padding-bottom:80px}.outro{padding:90px 0}.outro h2{font-size:clamp(55px,12vw,82px)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.stage{transition:none}.scrollmeta .arrow{animation:none}.photoarea img{transition:none}}

/* Integration: keep the facade visible and the story continuous on small screens. */
.top .name img{width:148px;height:60px;object-fit:contain}.film-backdrop{background-image:url('assets/window-story/poster.jpg')}.film[hidden]{display:none}.phase-nav{display:flex;gap:16px}.phase-nav button{border:0;border-bottom:1px solid transparent;background:none;color:inherit;padding:8px 0;font:500 11px var(--sans);opacity:.65}.phase-nav button[aria-current]{opacity:1;border-color:#dbe3ce}.profile-link{font-size:12px;text-decoration:underline;text-underline-offset:5px;margin-top:22px}.roof-light{background:#e2e4da;padding:100px 0}.roof-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:7vw}.roof-grid>img{width:100%;height:540px;object-fit:cover}.roof-grid h2{font-size:clamp(55px,6vw,90px);line-height:.95;margin:25px 0}.roof-grid p:not(.caps){line-height:1.7;max-width:470px;color:#43544d}.roof-grid a{display:inline-block;margin-top:15px;border-bottom:1px solid;padding-bottom:6px;font-size:13px}.comparison input:focus-visible{opacity:.14;outline:3px solid var(--petrol);outline-offset:-3px}.showcase{background:linear-gradient(180deg,var(--petrol),var(--cream) 140px);padding-top:210px}.stage{transition:none;will-change:opacity,transform;filter:none}.stage:not(.active){visibility:hidden}.stage.active{visibility:visible}.stage h1,.stage h2{font-size:clamp(64px,8vw,124px);max-width:800px}.stage .desc{max-width:430px}.scrollstory{height:500svh}.pinned{min-height:500px}.film{pointer-events:none}.foot a:hover{text-decoration:underline}.disclaimer a{text-decoration:underline}
@media(max-width:900px){.phase-nav{gap:12px}.seekbar{display:none}.roof-grid{gap:35px}.roof-grid>img{height:440px}}
@media(max-width:620px){.top .name img{width:112px;height:45px}.pinned{height:100svh;min-height:620px}.film{inset:12svh 0 auto;width:100%;height:44svh;object-fit:contain;background:transparent}.film-backdrop{opacity:.45}.stage{padding:0 22px 128px;justify-content:flex-end}.stage h1,.stage h2{font-size:clamp(52px,12vw,72px);line-height:.93;max-width:100%}.stage .desc{font-size:13px;margin-top:16px;max-width:350px}.stage .stepno{font-size:9px;margin-bottom:15px}.shade{background:linear-gradient(0deg,#142425 0%,#142425e8 32%,#14242515 65%,#14242577 100%)}.scrollmeta{flex-wrap:wrap;gap:8px;bottom:23px;align-items:center}.scrollmeta .hint{flex-basis:100%;font-size:9px}.phase-nav{gap:20px}.phase-nav button{font-size:10px;padding:7px 0}.progresscopy{font-size:10px}.roof-light{padding:65px 0}.roof-grid{grid-template-columns:1fr}.roof-grid>img{height:360px}.roof-grid h2{font-size:60px}.roof-grid p:not(.caps){font-size:14px}.showcase{padding-top:150px;background:linear-gradient(180deg,var(--petrol),var(--cream) 100px)}.scrollstory{height:480svh;min-height:2700px}}
@media(max-height:650px) and (min-width:621px){.stage h1,.stage h2{font-size:72px}.stage{padding-top:85px;padding-bottom:100px}.stage .desc{margin-top:20px}.pinned{min-height:450px}}
@media(prefers-reduced-motion:reduce){.stage{will-change:auto}}

.profile-link[hidden]{display:none}