@font-face{font-family:'Manrope';src:url(assets/manrope.woff2) format('woff2');font-weight:400 800;font-display:swap}
@font-face{font-family:'Inter';src:url(assets/inter.woff2) format('woff2');font-weight:400 600;font-display:swap}
:root{--ink:#14181a;--paper:#f5f2ec;--paper2:#ebe6dc;--acc:#1f6a6e;--acc2:#2f8f94;--oak:#b98450;--line:rgba(20,24,26,.14);--lineL:rgba(245,242,236,.18);--fd:'Manrope',system-ui,sans-serif;--fb:'Inter',system-ui,sans-serif}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font:400 16px/1.65 var(--fb);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
::selection{background:var(--acc);color:#fff}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}
.mono{font:600 11px/1.4 var(--fb);letter-spacing:.16em;text-transform:uppercase}
.eyebrow{font:700 12px/1 var(--fd);letter-spacing:.2em;text-transform:uppercase;color:var(--acc);margin-bottom:22px}
.pill{position:fixed;left:50%;transform:translateX(-50%);bottom:14px;z-index:70;background:rgba(20,24,26,.9);color:#fff;padding:8px 16px;border-radius:99px;backdrop-filter:blur(8px);white-space:nowrap;max-width:94vw;overflow:hidden;text-overflow:ellipsis}
.pill b{color:var(--acc2);margin-right:6px}
.nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;justify-content:space-between;align-items:center;padding:20px 28px;color:#fff;transition:background .4s,padding .4s}
.nav.solid{background:rgba(20,24,26,.92);backdrop-filter:blur(10px);padding:13px 28px}
.logo{font:800 22px/1 var(--fd);letter-spacing:.1em;display:flex;align-items:center;gap:10px}
.logo i{display:grid;grid-template-columns:repeat(3,5px);gap:2px}.logo i b{display:block;width:5px;height:20px;background:currentColor;opacity:.9}.logo i b:nth-child(2){transform:translateY(3px);opacity:.6}.logo i b:nth-child(3){transform:translateY(-3px);opacity:.35}
.nav-links{display:flex;gap:30px;align-items:center;font-size:14px;font-weight:500}
.nav-links a:not(.cta){opacity:.85}.nav-links a:hover{opacity:1}
.cta{background:var(--acc2);color:#fff;padding:10px 20px;border-radius:99px;font-weight:600;transition:transform .2s,background .2s}.cta:hover{background:var(--acc);transform:translateY(-1px)}
/* hero */
.hero-track{height:420vh;position:relative;background:var(--ink)}
.hero{position:sticky;top:0;height:100vh;overflow:hidden;color:#fff;background:var(--ink)}
.room{position:absolute;inset:0}
.strip{position:absolute;top:0;bottom:0;overflow:hidden;will-change:transform}
.strip img{position:absolute;top:0;height:100%;object-fit:cover;max-width:none}
.shade{position:absolute;inset:0;z-index:5;background:linear-gradient(90deg,rgba(20,24,26,.72),rgba(20,24,26,.08) 65%),linear-gradient(0deg,rgba(20,24,26,.7),transparent 42%);pointer-events:none}
.h-top{position:absolute;top:92px;left:28px;right:28px;z-index:6;display:flex;justify-content:space-between;opacity:.9}
.h-copy{position:absolute;z-index:6;left:28px;right:28px;bottom:14vh;max-width:1240px;margin:0 auto}
.h-copy h1{font:800 clamp(46px,8.6vw,136px)/.95 var(--fd);letter-spacing:-.035em}
.h-copy h1 span{display:block}
.wmask{display:inline-block;overflow:hidden;vertical-align:bottom}.word{display:inline-block;color:#7ee0e3;min-height:1em}.word.swap{animation:wswap .55s cubic-bezier(.2,.7,.2,1)}@keyframes wswap{0%{transform:translateY(108%);opacity:0}100%{transform:none;opacity:1}}
.h-sub{max-width:520px;margin-top:24px;font-size:18px;opacity:.9}
.rail{position:absolute;right:28px;top:50%;transform:translateY(-50%);z-index:7;display:flex;flex-direction:column;gap:14px;align-items:flex-end}
.rail button{display:flex;align-items:center;gap:12px;opacity:.55;transition:opacity .3s}
.rail button i{display:block;width:26px;height:2px;background:#fff;transition:width .4s}
.rail button.on{opacity:1}.rail button.on i{width:64px;background:#7ee0e3}
.h-bot{position:absolute;bottom:56px;left:28px;right:28px;z-index:6;display:flex;justify-content:space-between;align-items:flex-end}
.bar{position:absolute;left:0;bottom:0;height:3px;background:var(--acc2);width:0;z-index:7}
.hint{display:flex;align-items:center;gap:10px}.hint i{display:block;width:1px;height:34px;background:#fff;animation:hn 1.8s infinite}
@keyframes hn{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.sec{padding:140px 0}.dark{background:var(--ink);color:#fff}
.reveal,.reveal-l,.reveal-r{opacity:0;transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}.reveal{transform:translateY(34px)}.reveal-l{transform:translateX(-40px)}.reveal-r{transform:translateX(40px)}.reveal.in,.reveal-l.in,.reveal-r.in{opacity:1;transform:none}
h2{font:800 clamp(34px,5.2vw,74px)/1.03 var(--fd);letter-spacing:-.03em}h2 em{font-style:normal;color:var(--acc2)}
.lead{max-width:560px;margin-top:20px;opacity:.72}
/* finder */
.finder{display:grid;grid-template-columns:1.25fr 1fr;gap:56px;margin-top:64px;align-items:start}
.tex{position:relative;aspect-ratio:4/3;border-radius:6px;overflow:hidden;cursor:none;background:#222}
.tex img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .5s,filter .9s,transform 1.3s cubic-bezier(.2,.7,.2,1)}.tex img.dim{filter:brightness(.3) saturate(.5);transform:scale(1.07)}
.lens{position:absolute;width:190px;height:190px;border-radius:50%;border:2px solid #fff;box-shadow:0 12px 40px #0008,inset 0 0 0 1px #0003;pointer-events:none;background-repeat:no-repeat;opacity:0;transform:translate(-50%,-50%);transition:opacity .2s;z-index:3}
.tex:hover .lens{opacity:1}
.tex .cap{position:absolute;left:16px;bottom:14px;z-index:2;color:#fff;text-shadow:0 1px 8px #0009}
.ftabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.ftab{padding:10px 18px;border:1px solid var(--lineL);border-radius:99px;font-weight:600;font-size:14px;transition:all .25s}
.ftab.on,.ftab:hover{background:var(--acc2);border-color:var(--acc2);color:#fff}
.fpanel h3{font:800 clamp(30px,3.4vw,46px)/1.05 var(--fd);letter-spacing:-.02em;margin-bottom:12px}
.fpanel p{opacity:.75}
.meters{margin-top:26px;display:grid;gap:14px}
.meter{display:grid;grid-template-columns:140px 1fr;gap:14px;align-items:center;font-size:14px}
.meter span{opacity:.7}.meter div{height:6px;background:var(--lineL);border-radius:4px;overflow:hidden}.meter div i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--acc),#7ee0e3);border-radius:4px;transition:width .9s cubic-bezier(.2,.7,.2,1)}
.fnote{font-size:12px;opacity:.5;margin-top:18px}
/* room check */
.rc{margin-top:56px;overflow-x:auto}
.rtabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.rtab{padding:10px 20px;border:1px solid var(--line);border-radius:99px;font-weight:600;font-size:14px;transition:all .25s}
.rtab.on,.rtab:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.rrows{display:grid;gap:10px}
.rrow{display:grid;grid-template-columns:200px 1fr 130px;gap:18px;align-items:center;padding:18px 22px;background:#fff;border-radius:6px;border:1px solid var(--line);transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .45s,border-color .3s}
.rrow b{font:800 20px var(--fd);letter-spacing:-.01em}.rrow span{font-size:14px;color:#14181ab3}
.rrow em{font:700 12px var(--fd);letter-spacing:.1em;text-transform:uppercase;font-style:normal;text-align:right}
.rrow.g{border-color:var(--acc2)}.rrow.g em{color:var(--acc)}
.rrow.m em{color:#a87720}.rrow.n{opacity:.45}.rrow.n em{color:#a33}
/* process */
.proc{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.pimg{position:sticky;top:90px;aspect-ratio:4/5;border-radius:6px;overflow:hidden;background:#222}
.pimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);transition:opacity .7s,transform 1.4s cubic-bezier(.2,.7,.2,1)}.pimg img.on{opacity:1;transform:scale(1)}
.pstep{padding:34px 0;border-top:1px solid var(--line);opacity:.4;transition:opacity .4s}.pstep.on{opacity:1}
.pstep .n{font:800 15px var(--fd);color:var(--acc);letter-spacing:.1em}.pstep h4{font:800 30px/1.1 var(--fd);letter-spacing:-.02em;margin:8px 0}
.pstep p{max-width:500px;color:#14181ab3}
.pstep:last-child{min-height:60vh}
/* fullimg */
.fullimg{height:88vh;position:relative;overflow:hidden;background:var(--ink)}
.fullimg img{position:absolute;left:0;top:-12%;width:100%;height:124%;object-fit:cover}
.fullimg figcaption{position:absolute;left:28px;bottom:36px;color:#fff;font:800 clamp(30px,5vw,72px)/1 var(--fd);letter-spacing:-.03em;text-shadow:0 2px 30px #0008}
.marquee{background:var(--acc);color:#fff;overflow:hidden;padding:20px 0;transform:rotate(-1.2deg);margin:40px -2%}
.track{display:flex;width:max-content;animation:mq 34s linear infinite;font:800 44px var(--fd);letter-spacing:-.02em}
.track span{padding:0 26px;white-space:nowrap}.track i{display:inline-block;width:10px;height:10px;background:#fff;border-radius:50%;margin-left:52px;vertical-align:middle}
@keyframes mq{to{transform:translateX(-50%)}}
.contact{padding:140px 0}.contact h2{max-width:900px}.contact .lead{margin:24px 0 50px}
.wiz{background:#1d2326;border:1px solid var(--lineL);border-radius:8px;padding:40px;max-width:820px;position:relative}
.wprog{height:2px;background:var(--lineL);margin-bottom:30px}.wprog i{display:block;height:100%;background:var(--acc2);width:33%;transition:width .5s}
.wstep{display:none}.wstep.on{display:block;animation:fi .5s}@keyframes fi{from{opacity:0;transform:translateY(14px)}}
.wstep h3{font:800 32px var(--fd);letter-spacing:-.02em;margin:8px 0 22px}
.wopts{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.wopt{padding:18px 20px;border:1px solid var(--lineL);border-radius:6px;text-align:left;font:700 19px var(--fd);transition:all .25s}
.wopt small{display:block;font:400 13px var(--fb);opacity:.6;margin-top:4px}
.wopt.on,.wopt:hover{border-color:var(--acc2);background:#2f8f9422}
.fld{display:grid;gap:12px}
.fld input,.fld textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--lineL);padding:14px 2px;color:#fff;font:inherit;outline:0}
.fld input:focus,.fld textarea:focus{border-color:var(--acc2)}
.wnav{display:flex;justify-content:space-between;margin-top:30px}
.wbtn{padding:12px 24px;border-radius:99px;border:1px solid var(--lineL)}.wbtn.primary{background:var(--acc2);border-color:var(--acc2)}.wbtn:disabled{opacity:.35;cursor:not-allowed}
.wdone{display:none;text-align:center;padding:30px 0}.wdone h3{font:800 38px var(--fd)}.wdone p{opacity:.7;margin-top:10px}
.wiz.done .wdone{display:block}.wiz.done .wsteps,.wiz.done .wnav,.wiz.done .wprog{display:none}
.footer{background:#0c0f10;color:#fff;padding:60px 0 100px;font-size:14px}
.footer .wrap{display:grid;gap:22px}.footer nav{display:flex;gap:26px;opacity:.8}.footer small{opacity:.55;max-width:760px;line-height:1.6}
@media(max-width:860px){
 .nav-links a:not(.cta){display:none}.finder,.proc{grid-template-columns:1fr}.finder{gap:32px}.tex{cursor:default}
 .sec{padding:90px 0}.wopts{grid-template-columns:1fr}.wiz{padding:24px}.rail{display:none}.h-top span:last-child{display:none}
 .rrow{grid-template-columns:1fr;gap:4px}.rrow em{text-align:left}.pimg{position:static;aspect-ratio:4/3}.proc{gap:30px}.pstep:last-child{min-height:0}.pstep{opacity:1}
 .meter{grid-template-columns:110px 1fr}.pill{font-size:9px}.track{font-size:30px}.h-copy{bottom:16vh}
}
@media(prefers-reduced-motion:reduce){.track,.hint i{animation:none}.reveal,.reveal-l,.reveal-r{opacity:1;transform:none}.word.swap{animation:none}.pimg img{transform:none}.tex img{transition:opacity .3s;filter:none;transform:none}}

/* QA refinements */
html{overflow-x:clip;scroll-padding-top:90px}.nav.solid{background:#14181a}.wmask{padding-bottom:.14em;margin-bottom:-.14em}.h-copy h1 .word{line-height:1.12}.pill{bottom:20px}.fullimg figure{height:100%}.fnote{opacity:.75}.dark h2 em{color:#70cace}
@media(max-width:600px){.nav{padding:18px 16px}.nav.solid{padding:13px 16px}.logo{font-size:19px}.cta{font-size:12px;padding:11px 14px}.pill{font-size:8px;padding:7px 10px}.h-copy{left:20px;right:20px}.h-sub{font-size:16px}.h-top{left:20px;right:20px}.h-top .mono{font-size:10px}.footer nav{flex-wrap:wrap}}

.material{background:#eae4d8}.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin:48px 0 28px}.calc-grid label{display:block;font-weight:600;margin:18px 0 8px}.calc-grid input[type=number],.calc-grid select{width:100%;padding:16px;border:1px solid #999;background:#fff;font:inherit;border-radius:4px}.calc-grid .check{display:flex;gap:12px;align-items:center}.calc-grid input[type=checkbox]{width:20px;height:20px;accent-color:#1f6a6e}.calc-result{background:#14181a;color:#fff;padding:30px;border-radius:6px;overflow:hidden}.calc-result output{display:block;font:800 clamp(34px,5vw,65px)/1.2 var(--fd);margin:12px 0}.calc-result .eyebrow{color:#70cace}.calc-note{font-size:13px;max-width:950px;margin-top:14px}.calc-note a{text-decoration:underline}.plank-stage{display:grid;grid-template-columns:repeat(6,1fr);gap:3px;height:150px;margin-bottom:28px;perspective:600px}.plank-stage i{background:url(assets/v3-landhaus.webp) center/300px;border-radius:2px;transition:transform .7s,filter .7s}.plank-stage i:nth-child(3n){filter:brightness(.75)}.plank-stage.diagonal i{transform:rotate(-22deg) scale(.8)}.plank-stage.herring i{transform:rotate(45deg) scale(.75)}.plank-stage.herring i:nth-child(even){transform:rotate(-45deg) scale(.75)}.contact{padding:85px 0}.footer{padding-bottom:80px}.pstep:last-child{min-height:0}.fullimg{height:70vh}.reveal,.reveal-l,.reveal-r{opacity:1;transform:none}
@media(max-width:700px){.calc-grid{grid-template-columns:1fr;gap:24px}.calc-result{padding:24px}.plank-stage{height:110px}.fullimg{height:52vh}.contact{padding:70px 0}}@media(prefers-reduced-motion:reduce){.plank-stage i{transition:none}}
.calc-grid>*{min-width:0}.calc-result output{overflow-wrap:anywhere}.calc-grid input,.calc-grid select{min-width:0;max-width:100%}@media(max-width:700px){.calc-result output{font-size:34px}.nav .logo{flex-shrink:0}.nav-links{min-width:0;gap:8px}}
body{overflow-x:clip}
@media(max-width:860px){.pimg{position:relative;top:auto}.pimg img{max-width:100%}}