@font-face{font-family:"Instrument Sans";src:url(fonts/InstrumentSans-normal.woff2) format("woff2");font-weight:400 700;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(fonts/InstrumentSerif-italic.woff2) format("woff2");font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(fonts/InstrumentSerif-normal.woff2) format("woff2");font-style:normal;font-weight:400;font-display:swap}

:root{
  --plaster:#E9E6E0; --chalk:#F4F2EE; --ink:#171615; --graphite:#5F5B55; --pencil:#B4AEA5; --ox:#5E1A16;
  --pad:40px; --ease:cubic-bezier(.16,1,.3,1);
  --sans:"Instrument Sans",ui-sans-serif,system-ui,sans-serif; --serif:"Instrument Serif",Georgia,serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--plaster);-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{background:var(--plaster);color:var(--ink);font:400 17px/1.5 var(--sans);font-stretch:100%;-webkit-font-smoothing:antialiased;overflow-x:hidden}
em{font-family:var(--serif);font-style:italic;font-weight:400;font-stretch:100%;letter-spacing:-.01em}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
.skip{position:absolute;left:-999px;top:8px;z-index:50;background:var(--ink);color:var(--chalk);padding:8px 12px}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--ox);outline-offset:3px}

/* nav */
.nav{position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:22px var(--pad);pointer-events:none}
.nav>*{pointer-events:auto}
.nav::before{content:"";position:absolute;inset:0 0 -34px;background:linear-gradient(var(--plaster) 45%,rgba(233,230,224,0));z-index:-1;pointer-events:none}
.mark{font-weight:600;font-stretch:75%;font-size:28px;letter-spacing:-.03em;text-decoration:none;line-height:1}
.nav nav{display:flex;gap:32px;font-size:14px}
.nav nav a{text-decoration:none;color:var(--graphite);transition:color .3s}
.nav nav a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--chalk);text-decoration:none;border:0;font:500 15px/1 var(--sans);padding:16px 24px;border-radius:999px;cursor:pointer;transition:background .35s var(--ease)}
.btn:hover{background:var(--ox)}
.btn-sm{padding:11px 18px;font-size:14px}

/* 3D layers */
#gl{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;opacity:0;transition:opacity 1.2s var(--ease)}
#gl.on{opacity:1}
.overlay{position:fixed;inset:0;z-index:0;pointer-events:none}
.bends{position:absolute;inset:0}
.bend{position:absolute;left:0;top:0;display:flex;align-items:center;gap:7px;font-size:11px;line-height:1;color:var(--graphite);white-space:nowrap;font-variant-numeric:tabular-nums;will-change:transform,opacity}
.bend i{width:9px;height:9px;border:1px solid var(--pencil);border-radius:50%;background:var(--plaster);transition:background .3s,border-color .3s;flex:none}
.bend b{font-weight:500;color:var(--ink)}
.bend span{opacity:0;transform:translateX(-4px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.bend.on i{background:var(--ink);border-color:var(--ink)}
.bend.on span{opacity:1;transform:none}
.bend.flip{flex-direction:row-reverse}
.bend.flip span{transform:translateX(4px)}
.bend.flip.on span{transform:none}
.dims{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.dims line{stroke:var(--graphite);stroke-width:1}
.dims .tk{stroke:var(--graphite)}
.dims text{font:500 12px var(--sans);fill:var(--ink);font-variant-numeric:tabular-nums}
.dims text.u{fill:var(--graphite);font-weight:400}

.hud{position:fixed;right:var(--pad);bottom:30px;z-index:0;width:200px;font-size:12px;color:var(--graphite);font-variant-numeric:tabular-nums;opacity:0;pointer-events:none}
.hud-row{display:flex;gap:8px;align-items:baseline}
.hud-row span:first-child{width:38px}
.hud-row b{font-weight:500;font-size:22px;color:var(--ink);font-stretch:75%;letter-spacing:-.01em}
.hud-bar{height:1px;background:var(--pencil);margin:10px 0;position:relative}
.hud-bar i{position:absolute;inset:0 auto 0 0;width:0;background:var(--ink)}

/* sections */
main{position:relative;z-index:1}
section{position:relative}
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:120px var(--pad) 44px}
.hero-copy{max-width:min(640px,48vw)}
.kicker{font-size:15px;color:var(--graphite);margin-bottom:22px}
.kicker em{font-size:21px;color:var(--ink);margin-right:4px}
h1,h2{font-weight:500;font-stretch:75%;letter-spacing:-.025em;line-height:.9}
h1{font-size:clamp(64px,10.4vw,176px)}
h1 em,h2 em{font-stretch:100%;letter-spacing:-.03em}
.ln{display:block}
.ln>span{display:inline-block;padding-right:.06em}
.lede{font-size:19px;line-height:1.45;max-width:440px;margin:30px 0 30px;color:var(--ink)}
.hero-cta{display:flex;align-items:center;gap:20px}
.price{font-size:15px;color:var(--graphite);font-variant-numeric:tabular-nums}
.cue{position:absolute;right:var(--pad);bottom:44px;font-size:13px;color:var(--graphite);display:flex;align-items:center;gap:12px}
.cue span{width:48px;height:1px;background:var(--pencil);position:relative;overflow:hidden}
.cue span::after{content:"";position:absolute;inset:0;background:var(--ink);transform:translateX(-100%);animation:cue 2.6s var(--ease) infinite}
@keyframes cue{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* heading draw-in: the line is drawn left to right */
.draw-in .ln>span{clip-path:inset(-.2em 100% -.25em 0);transition:clip-path 1.25s var(--ease)}
.draw-in .ln:nth-child(2)>span{transition-delay:.12s}
.draw-in .ln:nth-child(3)>span{transition-delay:.24s}
.draw-in.in .ln>span{clip-path:inset(-.2em -.1em -.25em 0)}

.draw{height:390vh}
.cant{height:150vh}
.leath{height:200vh}
.draw,.cant,.leath{display:flex;flex-direction:column}
.step{flex:1;position:relative;padding:0 var(--pad) 24vh}
.blk{position:sticky;top:31vh;width:min(430px,32vw);will-change:opacity}
.blk-r{margin-left:auto}
.blk h2{font-size:clamp(44px,4.6vw,76px);margin-bottom:22px}
.blk p{font-size:17px;line-height:1.55;max-width:380px;color:#2c2a27}

/* workshop */
.made{background:var(--chalk);padding:160px var(--pad) 180px;z-index:4}
.made-title{font-size:clamp(56px,8.4vw,148px);margin-bottom:96px}
.made-grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;row-gap:96px;align-items:start}
.ph{margin:0}
.ph img{width:100%;background:var(--plaster)}
.ph figcaption{font-size:13px;color:var(--graphite);margin-top:12px;max-width:360px}
.ph-bend{grid-column:1/9}
.ph-bend img{aspect-ratio:16/9;object-fit:cover}
.steps{grid-column:10/13;list-style:none;align-self:end;display:grid;gap:26px}
.steps li{display:grid;grid-template-columns:36px 1fr;gap:8px;padding-top:14px;border-top:1px solid #d9d5ce}
.steps b{font-weight:500;font-size:13px;font-variant-numeric:tabular-nums}
.steps p{font-size:15px;line-height:1.5;color:#2c2a27}
.ph-hide{grid-column:1/5;grid-row:2}
.ph-hide .crop{overflow:hidden;aspect-ratio:3/4}
.ph-hide img{width:100%;height:100%;object-fit:cover;transform:scale(1.22);transform-origin:88% 30%}
.ph-bench{grid-column:6/13;grid-row:2;align-self:end}
.ph-bench img{aspect-ratio:16/9;object-fit:cover}
.ph-tubes{grid-column:6/13;grid-row:3}
.ph-tubes img{aspect-ratio:16/7;object-fit:cover;object-position:50% 62%}
.spec{grid-column:1/5;grid-row:3;align-self:start;display:grid;gap:0}
.spec div{display:grid;grid-template-columns:72px 1fr;gap:8px;padding:11px 0;border-top:1px solid #d9d5ce;font-size:14px}
.spec dt{color:var(--graphite)}
.spec dd{font-variant-numeric:tabular-nums}

/* configurator */
.cfg{min-height:120vh;display:flex;align-items:center;padding:120px var(--pad);touch-action:pan-y}
.cfg-panel{width:min(400px,100%);position:relative;z-index:2}
.cfg .kicker{margin-bottom:14px}
.cfg-name{font-size:clamp(44px,4.4vw,72px);margin-bottom:36px}
.cfg-name em{font-size:1.04em}
.cfg-hide{display:inline-block}
.opts{border:0;margin-bottom:28px}
.opts legend{font-size:13px;color:var(--graphite);margin-bottom:12px}
.sw{display:flex;flex-wrap:wrap;gap:8px}
.sw button{display:flex;align-items:center;gap:10px;border:1px solid #d3cec6;background:transparent;border-radius:999px;padding:7px 15px 7px 7px;font:400 14px var(--sans);color:var(--ink);cursor:pointer;transition:border-color .3s,background .3s}
.sw button i{width:24px;height:24px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.sw button:hover{border-color:var(--graphite)}
.sw button[aria-checked=true]{border-color:var(--ink);background:var(--chalk)}
.cfg-meta{display:grid;grid-template-columns:repeat(3,auto);gap:24px;justify-content:start;margin:8px 0 34px;padding-top:22px;border-top:1px solid #d3cec6}
.cfg-meta dt{font-size:12px;color:var(--graphite);margin-bottom:4px}
.cfg-meta dd{font-size:20px;font-weight:500;font-stretch:75%;font-variant-numeric:tabular-nums}
.drag-hint{position:absolute;right:var(--pad);bottom:56px;font-size:13px;color:var(--graphite)}
.cfg.grab{cursor:grab}
.cfg.grabbing{cursor:grabbing}

/* end */
.end-row{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;padding-right:var(--pad)}
.end-side{position:relative;z-index:1;max-width:340px;margin-bottom:5vw;display:flex;flex-direction:column;gap:12px;align-items:flex-start;font-size:16px;color:#2c2a27}
.end-side em{font-size:24px;color:var(--ink)}
.end-side .btn{margin-top:10px}
.end{z-index:4;background:var(--plaster);overflow:hidden;clip-path:inset(0)}
.room{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden}
.room-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.room-chair{position:absolute;left:43.7%;bottom:5%;width:30.7%;height:auto;filter:saturate(.96)}
.end-in{position:absolute;left:var(--pad);top:15%;z-index:1;max-width:620px}
.end .mail label{color:var(--ink)}
.end h2{font-size:clamp(56px,7.4vw,132px);margin-bottom:40px}
.mail label{display:block;font-size:14px;color:var(--graphite);margin-bottom:12px}
.mail-row{display:flex;gap:8px;max-width:480px}
.mail input{flex:1;min-width:0;font:400 16px var(--sans);padding:15px 20px;border-radius:999px;border:1px solid #c9c3ba;background:rgba(244,242,238,.9);color:var(--ink)}
.mail input:focus{outline:2px solid var(--ox);outline-offset:1px}
.mail-ok{display:none;margin-top:12px;font-size:14px}
.mail.sent .mail-row{display:none}
.mail.sent .mail-ok{display:block}
.giant{position:relative;z-index:1;font-weight:600;font-stretch:75%;font-size:39vw;line-height:.74;letter-spacing:-.05em;margin:6vw 0 -4.5vw -1vw;color:var(--ink);user-select:none}
.foot{position:relative;z-index:4;margin-top:-2px;padding:56px var(--pad) 28px;font-size:14px;background:var(--ink);color:#a9a49c}
.foot-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px;margin-bottom:64px}
.foot-cols div{display:flex;flex-direction:column;gap:6px}
.foot-cols b{color:#f4f2ee;font-weight:500;margin-bottom:6px}
.foot-cols a{text-decoration:none}
.foot-cols a.ask{color:#f4f2ee;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#6b665e}
.foot-cols a.ask:hover{text-decoration-color:#f4f2ee}
.foot-cols a:hover{color:#f4f2ee}
.foot-note{font-size:13px;color:#9d988f;border-top:1px solid #2e2c29;padding-top:20px}
.nav-r{display:flex;align-items:center;gap:10px}
.menu{display:none;font:500 14px var(--sans);background:transparent;border:1px solid #cfc9c0;color:var(--ink);border-radius:999px;padding:10px 16px;cursor:pointer}
.hud-m{display:none}

/* tablet */
@media (max-width:1024px){
  .nav nav{display:none}
  .menu{display:block}
  .nav.open nav{display:flex;position:fixed;inset:64px 12px auto;flex-direction:column;gap:4px;background:var(--chalk);border-radius:16px;padding:12px;box-shadow:0 30px 60px -20px rgba(40,30,20,.35)}
  .nav.open nav a{color:var(--ink);font-size:20px;padding:10px 12px}
  .blk{width:min(360px,40vw)}
  .steps{grid-column:1/13;grid-template-columns:1fr 1fr}
  .ph-bend{grid-column:1/13}
  .ph-hide{grid-column:1/7;grid-row:auto}
  .ph-tubes{grid-column:7/13;grid-row:auto}
  .ph-bench{grid-column:1/13;grid-row:auto;margin-top:0}
  .spec{grid-column:1/13;grid-row:auto}
}
/* phone */
@media (max-width:767px){
  :root{--pad:20px}
  body{font-size:16px}
  .nav{padding:16px var(--pad)}
  .hero{padding-bottom:28px;justify-content:flex-end}
  .hero-copy{max-width:none}
  h1{font-size:clamp(54px,16vw,84px)}
  .lede{font-size:17px;margin:20px 0 22px}
  .hero .kicker{display:none}
  .cue{display:none}
  .step{padding:0 var(--pad) 32svh}
  .blk{top:51svh;width:auto}
  .blk-r{margin-left:0}
  .blk h2{font-size:38px;margin-bottom:12px}
  .blk p{font-size:15.5px}
  .hud{left:var(--pad);right:var(--pad);top:85svh;bottom:auto;width:auto}
  .hud-row,.hud-bar{display:none}
  .hud-m{display:flex;gap:6px;align-items:baseline;font-size:12px}
  .hud-m b{font-weight:500;font-size:15px;color:var(--ink)}
  .hud-m .sep{margin:0 6px}
  .hud-row b{font-size:18px}
  .bend span{display:none}
  .made{padding:110px var(--pad) 120px}
  .made-title{margin-bottom:56px}
  .made-grid{row-gap:44px}
  .steps{grid-template-columns:1fr}
  .ph-hide,.ph-tubes{grid-column:1/13}
  .cfg{min-height:auto;flex-direction:column;justify-content:flex-end;padding:70svh var(--pad) 80px}
  .cfg-panel{padding:24px 0 0}
  .cfg-name{margin-bottom:26px}
  .cfg-meta{grid-template-columns:repeat(3,1fr);gap:12px}
  .drag-hint{top:76px;bottom:auto;right:auto;left:var(--pad)}
  .room{aspect-ratio:auto;height:100svh}
  .room-bg{object-position:62% 50%}
  .room-chair{left:22.8%;width:112.0%;bottom:4%}
  .end-in{top:96px;right:var(--pad)}
  .mail-row{flex-direction:column}
  .foot-cols{grid-template-columns:1fr 1fr;gap:28px;margin-bottom:40px}
  .end-row{flex-direction:column-reverse;align-items:stretch;padding:40px var(--pad) 0}
  .end-side{margin-bottom:0}
}

/* still + reduced */
.still .draw-in .ln>span,.reduced .draw-in .ln>span{clip-path:none;transition:none}
.still #gl,.reduced #gl{transition:none}
.still .cue span::after{animation:none}
@media (prefers-reduced-motion:reduce){
  .cue span::after{animation:none}
  .draw-in .ln>span{clip-path:none!important;transition:none!important}
  .bend span,.bend i,#gl{transition:none}
}

.bare main,.bare .nav,.bare .foot,.bare .hud,.bare .skip{visibility:hidden}
.bare,.bare body{background:var(--plaster)}
.clear,.clear body{background:transparent!important}