:root{--paper:#f5f2ec;--greige:#e9e4da;--stone:#d8d3c8;--sage:#6e746b;--ink:#292a27;--line:rgba(83,79,67,.15)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:2px solid var(--sage);outline-offset:7px}.skip{position:fixed;top:-100px;left:20px;padding:15px;background:var(--paper);z-index:30}.skip:focus{top:15px}.experience{height:400vh;height:400svh}.stage{height:100vh;height:100svh;min-height:640px;position:sticky;top:0;overflow:hidden;background:var(--paper)}.visual{position:absolute;inset:0;overflow:hidden}.visual canvas{width:100%;height:100%;display:block}.scene-wash{position:absolute;inset:0;background:linear-gradient(90deg,rgba(245,242,236,.56),transparent 65%);opacity:.1;pointer-events:none}.reflection{position:absolute;inset:0;opacity:.1;background:radial-gradient(ellipse at var(--mx,65%) var(--my,50%),rgba(255,255,247,.65),transparent 35%);mix-blend-mode:soft-light;pointer-events:none}.grid{position:absolute;inset:110px 4.3% 113px;pointer-events:none;display:flex;justify-content:space-between;opacity:.36}.grid i{width:1px;background:linear-gradient(var(--line),transparent 30%,transparent 73%,var(--line))}.grid i:nth-child(2){margin-left:23%}.header{position:relative;margin:0 4.3%;height:110px;display:flex;align-items:center;border-bottom:1px solid var(--line);z-index:5;gap:40px}.brand{display:flex;flex-direction:column;line-height:.88;min-width:240px}.brand>span{font-size:37px;letter-spacing:-2px;font-weight:600}.brand-dot{color:var(--sage)}.brand small{font-size:10px;letter-spacing:4.2px;margin:12px 0 0 2px}.header nav{display:flex;gap:35px;align-items:center;margin:auto;font-size:13px}.header nav button{padding:8px 0}.header nav a,.header nav button{position:relative}.header nav a:after,.header nav button:after{content:"";position:absolute;bottom:-5px;left:0;width:0;height:1px;background:var(--sage);transition:width .25s}.header nav a:hover:after,.header nav button:hover:after{width:100%}.contact{margin-left:auto;display:flex;align-items:center;gap:28px;font-size:13px}.contact-mark{font-size:24px;font-weight:300;color:var(--sage)}.copy{position:absolute;left:7.8%;top:22%;z-index:3;pointer-events:none;max-width:82%}.eyebrow{font-size:10px;letter-spacing:2px;display:flex;align-items:center;gap:14px;margin:0 0 27px;font-weight:500}.tiny-line{width:26px;height:1px;background:var(--sage)}h1{font-weight:400;font-size:clamp(58px,6.3vw,104px);line-height:1.025;letter-spacing:-.067em;margin:0 0 24px;max-width:1100px}h1>span{color:var(--sage)}.intro{font-size:14px;line-height:1.8;color:#66675f;margin:0 0 27px;max-width:400px;letter-spacing:.05px}.cta{display:flex;align-items:center;justify-content:space-between;gap:40px;width:max-content;min-width:173px;padding:15px 0;border-bottom:1px solid var(--sage);font-size:13px;pointer-events:auto;transition:color .2s,gap .25s}.cta span{font-size:19px;color:var(--sage)}.cta:hover{gap:57px;color:var(--sage)}.material-note{position:absolute;z-index:3;right:8%;bottom:22%;display:flex;align-items:center;gap:11px;opacity:1;font-size:10px;letter-spacing:1.8px}.material-note small{display:block;font-size:11px;letter-spacing:.1px;color:#797b71;margin-top:7px}.note-marker{width:8px;height:8px;border:1px solid #929688;border-radius:50%;position:relative}.note-marker:before{content:"";position:absolute;width:40px;height:1px;background:#9c9e94;right:14px;top:3px}.side-label{position:absolute;right:4.2%;top:36%;writing-mode:vertical-rl;font-size:9px;letter-spacing:2.3px;color:#828277}.stage-caption{position:absolute;bottom:143px;left:7.8%;display:flex;align-items:center;gap:21px;font-size:12px;color:#67695f;z-index:3}.caption-index{font-size:10px;letter-spacing:1px;color:#898a81}.hero-footer{position:absolute;bottom:0;left:4.3%;right:4.3%;height:113px;display:flex;align-items:center;gap:6%;border-top:1px solid var(--line);z-index:4}.scroll-invitation{display:flex;gap:13px;align-items:center;font-size:9px;letter-spacing:1.3px;white-space:nowrap;padding:12px 0}.scroll-glyph{height:32px;width:19px;border:1px solid #9a9c91;border-radius:12px 12px 5px 5px;transform:skewY(-12deg);position:relative}.scroll-glyph i{height:8px;width:1px;background:var(--sage);position:absolute;top:5px;left:8px;animation:scrollPulse 2s infinite}.timeline{display:flex;gap:25px;flex:1}.timeline button{flex:1;display:flex;position:relative;gap:12px;align-items:center;padding:15px 0 19px;font-size:10px;letter-spacing:1.8px;text-align:left;color:#95978c;white-space:nowrap}.timeline button:after,.timeline button i{content:"";position:absolute;bottom:0;height:1px;left:0;width:100%;background:#cfcec4}.timeline button i{background:var(--sage);z-index:1;transform:scaleX(var(--fill,0));transform-origin:left}.timeline button.active{color:var(--ink)}.step-number{font-size:9px;letter-spacing:0;color:#929589}.progress-readout{font-size:12px;letter-spacing:1px;font-variant-numeric:tabular-nums;min-width:75px}.progress-unit{font-size:9px;color:#909287;margin-left:7px}.end-note{padding:55px 7.8%;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);gap:24px}.end-note p{font-size:23px;line-height:1.5;letter-spacing:-.5px;margin:0}.end-note p span{color:var(--sage)}.end-note button{font-size:12px;border-bottom:1px solid #a8aa9c;padding:12px 0;white-space:nowrap}.end-note button span{margin-left:20px}.loading{position:absolute;inset:110px 0 114px;background:var(--paper);z-index:8;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;font-size:12px;letter-spacing:2px;transition:opacity .5s}.loading span{height:1px;width:130px;background:linear-gradient(90deg,transparent,var(--sage),transparent);animation:loading 1.5s infinite}.loading.done{opacity:0;pointer-events:none}.stage.is-final .copy{top:19%}.stage.is-final h1{font-size:clamp(50px,4.3vw,75px);max-width:750px}.stage.is-final .eyebrow{margin-bottom:20px}.stage.is-final .intro{max-width:270px}.stage.is-final .scene-wash{opacity:1}.stage.is-final .material-note{right:7.8%;bottom:23%;padding:12px 15px;background:rgba(245,242,236,.8);backdrop-filter:blur(10px)}@keyframes scrollPulse{0%,100%{transform:translateY(0);opacity:.3}50%{transform:translateY(8px);opacity:1}}@keyframes loading{50%{opacity:.2}}@media(min-width:1600px){.copy{top:23%}.intro{font-size:16px}.header nav,.contact,.cta{font-size:14px}.eyebrow{font-size:12px}.timeline button{font-size:12px}.scroll-invitation{font-size:11px}.material-note{font-size:12px}.stage-caption{font-size:14px}}@media(max-width:1000px){.header{gap:20px}.brand{min-width:160px}.header nav{gap:20px;font-size:12px}.contact{font-size:12px;gap:15px}.copy{left:6%;top:24%}h1{font-size:7.3vw}.hero-footer{gap:4%}.timeline{gap:16px}.timeline button{gap:6px;font-size:9px;letter-spacing:1px}.stage-caption{left:6%}.scroll-invitation{font-size:8px}.material-note{bottom:25%;right:7%}}@media(max-width:700px){.stage{min-height:600px}.header{height:87px;margin:0 6%}.brand{min-width:0}.brand>span{font-size:30px}.brand small{font-size:8px;letter-spacing:3.4px;margin-top:9px}.header nav{display:none}.contact{font-size:11px;gap:14px}.contact-mark{font-size:20px}.copy{top:18%;left:7%;max-width:88%}.eyebrow{font-size:8px;letter-spacing:1.05px;gap:8px;margin-bottom:23px}.tiny-line{width:14px}h1{font-size:11.1vw;letter-spacing:-.06em;line-height:1.07;margin-bottom:20px}.intro{font-size:12px;line-height:1.8;max-width:285px;margin-bottom:12px}.desktop-break{display:none}.cta{font-size:12px;padding:11px 0;min-width:156px}.side-label{display:none}.grid{inset:87px 6% 137px}.material-note{bottom:24%;right:8%;font-size:8px;letter-spacing:1px}.material-note small{font-size:9px}.note-marker:before{width:20px}.hero-footer{height:130px;left:7%;right:7%;display:grid;grid-template-columns:1fr 70px;gap:8px;align-content:center}.scroll-invitation{grid-column:1;grid-row:2;font-size:8px;padding-top:10px}.scroll-glyph{height:21px;width:13px}.scroll-glyph i{left:5px;height:5px}.timeline{grid-column:1/-1;grid-row:1;gap:16px}.timeline button{font-size:8px;padding:10px 0 13px;gap:7px;letter-spacing:.7px}.step-number{font-size:8px}.progress-readout{grid-row:2;grid-column:2;font-size:10px;text-align:right;padding-top:7px}.progress-unit{font-size:8px}.stage-caption{left:7%;bottom:150px;font-size:10px;gap:12px}.caption-index{font-size:9px}.stage.is-final .copy{top:18%}.stage.is-final h1{font-size:10.7vw;max-width:95%}.stage.is-final .intro{max-width:230px}.stage.is-final .material-note{bottom:24%}.end-note{padding:35px 7%;align-items:flex-start}.end-note p{font-size:16px}.end-note button{font-size:10px;white-space:normal;max-width:90px}.end-note button span{margin-left:5px}.loading{inset:87px 0 131px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}@media(max-height:640px) and (min-width:701px){.stage{min-height:500px}.header{height:80px}.copy{top:21%}h1{font-size:8vh}.eyebrow{margin-bottom:12px}.intro{margin-bottom:10px}.hero-footer{height:85px}.stage-caption{bottom:104px}.grid{inset:80px 4.3% 85px}.stage.is-final h1{font-size:7vh}}
/* Dynamic captions must not become browser scroll anchors. */
html,body,.experience,.stage{overflow-anchor:none}
.stage[data-phase="2"] h1,.stage[data-phase="3"] h1{font-size:clamp(48px,5.4vw,86px)}
@media(max-width:700px){.stage[data-phase="2"] h1,.stage[data-phase="3"] h1{font-size:9.2vw}}
.intro{font-size:16px}.header nav,.contact,.cta{font-size:14px}.timeline button{font-size:12px;letter-spacing:1px}.scroll-invitation{font-size:11px}.material-note{font-size:12px;letter-spacing:1px}.stage-caption{font-size:13px}
@media(max-width:1000px){.header nav{font-size:12px}.contact{font-size:12px}.timeline button{font-size:10px}}
@media(max-width:700px){h1{font-size:10vw}.intro{font-size:16px;line-height:1.6}.cta{font-size:14px}.timeline button{font-size:11px;letter-spacing:.2px}.timeline .step-number{display:none}.scroll-invitation{font-size:10px}.material-note{font-size:10px}.stage-caption{font-size:11px}.stage.is-final h1{font-size:10vw}}
.room-backplate{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;pointer-events:none}.room-backplate:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(245,242,236,.94),rgba(245,242,236,.25) 48%,transparent 72%),linear-gradient(0deg,rgba(245,242,236,.94),transparent 24%,transparent 82%,rgba(245,242,236,.92))}.visual canvas{position:relative}.scene-wash{display:none}.reflection{display:none}
@media(max-width:700px){.room-backplate:after{background:linear-gradient(180deg,#f5f2ec 6%,rgba(245,242,236,.91) 34%,transparent 65%,rgba(245,242,236,.9) 100%)}}

/* Opening close-up; the removed footer no longer reserves a bottom strip. */
.grid{bottom:46px}.stage-caption{bottom:70px}.material-note{bottom:16%}
.stage.is-final .material-note{bottom:17%}.loading{bottom:46px}
@media(max-width:700px){.grid{bottom:30px}.stage-caption{bottom:42px}.material-note,.stage.is-final .material-note{bottom:15%}.loading{bottom:30px}}

.workshop-backplate{position:absolute;inset:0;background-size:cover;background-position:center;pointer-events:none}
.workshop-backplate:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(245,242,236,.94),rgba(245,242,236,.70) 59%,rgba(245,242,236,.10) 79%),linear-gradient(0deg,rgba(245,242,236,.80),transparent 28%,transparent 80%,rgba(245,242,236,.8))}
.material-leader{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;overflow:visible}
.material-leader polyline{fill:none;stroke:#878c80;stroke-width:1;opacity:.75;vector-effect:non-scaling-stroke}
.material-leader circle{fill:#f5f2ec;stroke:#6e746b;stroke-width:1;vector-effect:non-scaling-stroke}
.material-note,.stage.is-final .material-note{right:auto;bottom:auto;display:block;padding:10px 12px;background:rgba(245,242,236,.82);backdrop-filter:blur(8px);z-index:4}
.material-note .note-marker{display:none}
@media(max-width:700px){.workshop-backplate:after{background:linear-gradient(180deg,#f5f2ec 4%,rgba(245,242,236,.88) 38%,rgba(245,242,236,.15) 67%,rgba(245,242,236,.86) 100%)}.material-note,.stage.is-final .material-note{padding:8px 10px}}

/* Keep the foreground floor clear until the slab rises into the production view. */
.workshop-backplate:after{mask-image:linear-gradient(180deg,#000 52%,rgba(0,0,0,var(--lower-wash,.22)) 70%,rgba(0,0,0,var(--lower-wash,.22)) 100%)}

/* An architectural compass and fine drawing line frame the project invitation. */
.contact{position:relative;padding:10px 0 10px 15px;gap:18px;transition:color .25s}
.contact:after{content:"";position:absolute;left:15px;right:0;bottom:3px;height:1px;background:linear-gradient(90deg,rgba(110,116,107,.45),rgba(110,116,107,.12));transform-origin:left;transition:background .3s}
.contact .contact-mark{width:32px;height:32px;flex:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;color:var(--sage);transition:transform .3s}
.contact .draft-arc{opacity:.45;stroke-dasharray:26;stroke-dashoffset:10;transition:stroke-dashoffset .45s,opacity .3s}
.contact:hover{color:#51574e}
.contact:hover:after{background:rgba(110,116,107,.7)}
.contact:hover .contact-mark{transform:rotate(-5deg)}
.contact:hover .draft-arc{stroke-dashoffset:0;opacity:1}
@media(max-width:700px){.contact{padding:8px 0 8px 8px;gap:10px}.contact:after{left:8px}.contact .contact-mark{width:27px;height:27px}}

.copy{will-change:opacity,transform}.stage-caption{will-change:opacity}