:root{
  --green:#1F3A2E;--oak:#B98A5A;--chalk:#F2EDE4;--graphite:#2B2B29;--linen:#DCD3C3;--soft:#6F6A60;
  --g:clamp(16px,4vw,64px);--ease:cubic-bezier(.16,1,.3,1);
  --head:Archivo,Arial,sans-serif;--body:Inter,Arial,sans-serif;--mono:"IBM Plex Mono",Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.is-preview{scrollbar-width:none}.is-preview::-webkit-scrollbar{display:none}
html{overflow-x:clip}
body{background:var(--chalk);color:var(--graphite);font:400 16px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
svg{display:block}
::selection{background:var(--green);color:var(--chalk)}
h1,h2,h3{font-family:var(--head);font-stretch:125%;font-weight:700;letter-spacing:-.01em;line-height:1}
.mono{font:500 12px/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.img{position:absolute;inset:0;background:var(--ph);background-size:var(--size,cover);background-position:var(--pos,center)}
.frame{position:relative;overflow:hidden}

.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 24px;background:var(--green);color:var(--chalk);font-weight:600;font-size:15px;position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--oak);transform:scaleX(0);transform-origin:right;transition:transform .6s var(--ease)}
.btn:hover::after{transform:scaleX(1);transform-origin:left}
.btn-sm{padding:11px 16px;font-size:14px}
.btn-light{background:var(--chalk);color:var(--green)}
.link{font-weight:500;border-bottom:1px solid currentColor;padding-bottom:2px}

/* Nav */
.nav{position:fixed;inset:0 0 auto;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:18px var(--g);transition:background .4s,transform .6s var(--ease)}
.nav.solid{background:rgba(242,237,228,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--linen)}
.nav.hide{transform:translateY(-100%)}
.nav-logo{width:190px}
.nav nav{display:flex;align-items:center;gap:clamp(14px,2.6vw,36px);font-size:14px;font-weight:500}
.nav nav>a:not(.btn){position:relative}
.nav nav>a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;transform:scaleX(0);transition:transform .5s var(--ease)}
.nav nav>a:not(.btn):hover::after{transform:scaleX(1)}

/* Hero */
/* The photo's empty wall on the left carries the copy; the image keeps its exact
   aspect ratio so the dimension lines stay on the wardrobe edges. */
.hero{position:relative;aspect-ratio:1672/941;overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-media::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(242,237,228,.72),rgba(242,237,228,.35) 26%,transparent 40%)}
.hero-copy{position:absolute;z-index:2;left:var(--g);top:15%;width:min(31%,520px)}
.eyebrow{color:var(--soft);margin-bottom:22px}
.hero h1{font-size:clamp(34px,3.5vw,66px);margin-bottom:22px;color:var(--green)}
.hero h1 .l{display:block;overflow:hidden}
.lead{font-size:clamp(14px,1.05vw,17px);max-width:38ch;color:#4b4a45;margin-bottom:28px}
.actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap}

/* Dimension lines (the brand signature) */
.dim{position:absolute;pointer-events:none;color:#fff}
.dim::before,.dim::after{content:"";position:absolute;background:currentColor}
.dim-h{height:0;border-top:1px solid currentColor;transform-origin:left}
.dim-h::before,.dim-h::after{width:1px;height:22px;top:-11px}
.dim-h::before{left:0}.dim-h::after{right:0}
.dim-v{width:0;border-left:1px solid currentColor;transform-origin:top}
.dim-v::before,.dim-v::after{height:1px;width:22px;left:-11px}
.dim-v::before{top:0}.dim-v::after{bottom:0}
.dim span{position:absolute;white-space:nowrap;background:var(--green);color:var(--chalk);padding:3px 8px;font-size:11px}
.dim-h span{left:50%;top:0;transform:translate(-50%,-50%)}
.dim-v span{top:50%;left:0;transform:translate(-50%,-50%) rotate(-90deg)}
.dim b{font-weight:500}

/* Statement */
.statement{padding:22vh var(--g);max-width:1400px}
.words{font:700 clamp(30px,4.4vw,72px)/1.08 var(--head);font-stretch:125%;letter-spacing:-.015em}
.words em{font-style:normal;color:var(--oak)}
.words .w{opacity:.12}

/* Section heads */
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;padding-bottom:22px;border-bottom:1px solid var(--linen);margin-bottom:56px}
.sec-head .mono{color:var(--soft)}
.sec-head h2{font-size:clamp(32px,4.4vw,68px)}

/* Projects */
.projects{padding:8vh var(--g) 16vh}
.project{margin-bottom:14vh}
.pair{display:grid;grid-template-columns:1fr 2fr;gap:16px;align-items:end}
.project.rev .pair{grid-template-columns:2fr 1fr}
.project.rev .detail{order:2}
.pair .detail{aspect-ratio:4/5}
.pair .room{aspect-ratio:16/10}
.frame .tag{position:absolute;left:14px;bottom:14px;background:rgba(242,237,228,.92);padding:5px 9px;font-size:10px}
.project-meta{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;padding-top:22px;border-top:1px solid var(--linen);margin-top:16px}
.project-meta h3{font-size:clamp(22px,2.2vw,34px)}
.project-meta .mono{color:var(--soft)}

/* Process: pinned ruler */
.process{background:var(--green);color:var(--chalk)}
.process-pin{min-height:100svh;padding:14vh var(--g) 10vh;display:flex;flex-direction:column;justify-content:center}
.process .sec-head{border-color:rgba(242,237,228,.18)}
.process .sec-head .mono{color:#B9C4BC}
.ruler-wrap{position:relative}
.ruler{height:46px;position:relative;margin-bottom:40px;
  background:
    repeating-linear-gradient(90deg,rgba(242,237,228,.55) 0 1px,transparent 1px 100px) bottom/100% 30px no-repeat,
    repeating-linear-gradient(90deg,rgba(242,237,228,.3) 0 1px,transparent 1px 10px) bottom/100% 12px no-repeat;
  border-bottom:1px solid rgba(242,237,228,.55)}
.ruler-fill{position:absolute;left:0;bottom:-1px;height:3px;width:100%;background:var(--oak);transform-origin:left;transform:scaleX(0)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.step{padding-top:20px;border-top:1px solid rgba(242,237,228,.18);opacity:.28;transition:opacity .6s}
.step.on{opacity:1}
.step .mono{color:var(--oak);margin-bottom:14px}
.step h3{font-size:clamp(22px,2vw,30px);margin-bottom:12px}
.step p:last-child{color:#cfd6d0;font-size:15px}

/* Workshop */
.workshop{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);padding:18vh var(--g);align-items:center}
.ws-portrait{aspect-ratio:4/5}
.ws-copy>.mono:first-child{color:var(--soft);margin-bottom:28px}
blockquote{font:700 clamp(26px,2.8vw,44px)/1.12 var(--head);font-stretch:125%;margin-bottom:22px}
.who{color:var(--oak);margin-bottom:28px}
.ws-copy>p:not(.mono){max-width:46ch;color:#4b4a45}
.ws-hands{aspect-ratio:4/3;width:62%;margin:44px 0 0 auto}

/* Offer: before/after */
.offer{background:var(--graphite);color:var(--chalk)}
.offer-pin{min-height:100svh;display:grid;grid-template-columns:.8fr 1.4fr;gap:clamp(24px,4vw,64px);align-items:center;padding:12vh var(--g)}
.badge{display:inline-block;border:1px solid var(--oak);color:var(--oak);padding:6px 10px;margin-bottom:26px}
.offer h2{font-size:clamp(34px,4.2vw,66px);margin-bottom:24px}
.offer-copy>p:not(.badge){color:#cfccc4;max-width:40ch;margin-bottom:34px}
.compare{position:relative;aspect-ratio:1/1;max-height:80svh;overflow:hidden}
.compare .after{clip-path:inset(0 0 0 100%)}
.compare .after{--pos:62% center}
.split{position:absolute;top:0;bottom:0;left:100%;width:2px;background:var(--chalk)}
.compare-dim{left:4%;right:4%;top:46%;color:var(--chalk)}
.compare-dim em{font-style:normal;color:var(--oak)}
.cmp-label{position:absolute;top:16px;background:rgba(43,43,41,.75);padding:5px 9px;font-size:10px}
.cmp-label.l{left:16px}.cmp-label.r{right:16px}

/* Inquiry configurator */
.inquiry{padding:16vh var(--g)}
.config{max-width:900px;border:1px solid var(--linen);background:#fff;padding:clamp(22px,4vw,48px);position:relative;min-height:330px}
.config-bar{height:2px;background:var(--linen);margin-bottom:36px}
.config-bar i{display:block;height:100%;background:var(--green);width:25%;transition:width .6s var(--ease)}
.cstep{display:none;border:0}
.cstep.on{display:block;animation:in .6s var(--ease)}
@keyframes in{from{opacity:0;transform:translateY(14px)}}
legend{font:700 clamp(22px,2.4vw,34px)/1.1 var(--head);font-stretch:125%;margin-bottom:26px;display:flex;gap:16px;align-items:baseline}
legend .mono{color:var(--oak)}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips button{border:1px solid var(--linen);padding:13px 18px;font-size:15px;transition:background .3s,color .3s,border-color .3s}
.chips button:hover{border-color:var(--green)}
.chips button.sel{background:var(--green);color:var(--chalk);border-color:var(--green)}
.done h3{font-size:clamp(20px,2vw,28px);margin:12px 0 14px}
.done p:last-child{color:var(--soft)}
.config-nav{display:flex;justify-content:space-between;align-items:center;margin-top:34px}
.config-nav .back{visibility:hidden}
.config-nav .hint{color:var(--soft)}

/* Footer */
.footer{background:var(--green);color:var(--chalk);padding:12vh var(--g) 30px}
.f-top{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;padding-bottom:40px;border-bottom:1px solid rgba(242,237,228,.18)}
.f-logo{width:min(420px,80vw);display:block}
.f-claim{font:700 clamp(20px,2vw,28px) var(--head);font-stretch:125%}
.f-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:40px 0}
.f-cols .mono{color:var(--oak);margin-bottom:10px}
.f-note{color:#8fa197;font-size:11px}

@media (max-width:900px){
  .nav nav>a:not(.btn){display:none}
  .nav-logo{width:160px}
  .hero{aspect-ratio:auto;max-height:none;min-height:0;display:flex;flex-direction:column-reverse;padding-top:76px}
  .hero-media{position:relative;aspect-ratio:1672/941}
  .hero-copy{position:static;width:auto;padding:34px var(--g) 20px}
  .pair,.project.rev .pair{grid-template-columns:1fr;gap:10px}
  .pair .detail{aspect-ratio:16/9;order:2}
  .project.rev .detail{order:2}
  .project{margin-bottom:9vh}
  .projects{padding-bottom:8vh}
  .steps{grid-template-columns:1fr 1fr;row-gap:30px}
  .workshop,.offer-pin{grid-template-columns:1fr}
  .ws-hands{width:80%}
  .f-cols{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Scroll-driven extras */
.band{padding:6vh 0 2vh;overflow:hidden;border-top:1px solid var(--linen);border-bottom:1px solid var(--linen)}
.band-row{white-space:nowrap;font:700 clamp(48px,8vw,140px)/1.05 var(--head);font-stretch:125%;letter-spacing:-.02em;color:var(--green)}
.band-row i{display:inline-block;width:.42em;height:.42em;margin:0 .3em;background:var(--oak);clip-path:polygon(0 0,50% 22%,100% 0,100% 100%,50% 78%,0 100%);vertical-align:middle}
.band-row.alt{font:500 clamp(14px,1.4vw,20px)/2.4 var(--mono);color:var(--soft);letter-spacing:.2em}
.f-big{font:800 clamp(80px,21vw,360px)/.85 var(--head);font-stretch:125%;letter-spacing:-.03em;color:rgba(242,237,228,.08);white-space:nowrap;margin:20px 0 30px}