/* Alina Paramonova — Interiors & home staging. One continuous page on one grid: a cover photograph with the words on its wall,
   then calm bands of paper and deep green with full-width photographs between them.
   Palette: paper, beige, warm black, deep green, bordeaux, oak and brass. Type chosen by Alina on 07.10.2026: Julius Sans One for headings, Jost for text and captions,
   and one word per heading in Monsieur La Doulaise, the script of the logo. */
@property --h{syntax:'<length>';inherits:true;initial-value:0px}
:root{--paper:#F4EFE6;--sheet:#FBF8F2;--beige:#E6DCCB;--ink:#171512;--ink2:#4A453C;--ink3:#7A7365;
 --deep:#1A2C20;--wine:#5C1A2B;--wine2:#74243B;--oak:#B8946A;--brass:#B08D4A;--brassl:#D8BE82;--brassd:#8C6D34;
 --metal:linear-gradient(100deg,#8C6D34 0%,#B08D4A 20%,#E2CB93 46%,#B08D4A 64%,#94743A 100%);
 --rule:rgba(23,21,18,.16);--p82:rgba(244,239,230,.86);--p60:rgba(244,239,230,.64);--prule:rgba(244,239,230,.18);
 --dim:#8C6D34;--elec:#5C1A2B;
 --pp:clamp(20px,5vw,80px);--max:1360px;--sec:clamp(64px,8.4vw,132px);--e:cubic-bezier(.23,1,.32,1);
 --disp:'Belleza','Jost',system-ui,sans-serif;--sans:'Jost',system-ui,-apple-system,sans-serif;--mono:'Jost',system-ui,sans-serif;--script:'Monsieur La Doulaise',cursive;
 --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .16 0 0 0 0 .1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
 --sh:0 1px 2px rgba(23,21,18,.07),0 14px 26px -14px rgba(23,21,18,.3),0 44px 70px -36px rgba(23,21,18,.42);
 --shl:0 2px 4px rgba(0,0,0,.18),0 30px 44px -20px rgba(0,0,0,.5),0 80px 110px -44px rgba(0,0,0,.55)}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--brassl);color:var(--deep)}
a{color:inherit}:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
h1,h2,h3,p,ol,ul,dl,dd,figure{margin:0}ol,ul{padding:0;list-style:none}img{max-width:100%}
h1,h2{font-family:var(--disp);font-weight:400;text-wrap:balance}h1,h2,h3,.about .big,.opts button{text-transform:uppercase;letter-spacing:-.045em}h3,.pr,.about .big{text-wrap:balance}.sn{display:block}p,li,dd{text-wrap:pretty}
h1{font-size:calc(min(33vw,480px)/11.75);line-height:1.1}
h1 .ln{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em;white-space:nowrap}h1 .ln>span{display:block}h1 .m{color:var(--brassl)}
h2{font-size:clamp(24px,2.96vw,45.2px);line-height:1.1}
h3{font-family:var(--disp);font-weight:400;font-size:clamp(19px,1.83vw,26.1px);line-height:1.14}
/* one word per heading in the script of the logo; the full stop after it is dropped */
.aw{font-family:var(--script);font-weight:400;font-size:2em;line-height:.5;letter-spacing:0;text-transform:none;padding-left:.02em;margin-left:.07em;margin-right:-.04em;color:var(--brassd)}.deep .aw,.end .aw{color:var(--brassl)}.pd{display:none}
.w{max-width:var(--max);margin:0 auto;padding:0 var(--pp)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 26px;border-radius:2px;font-family:var(--sans);font-size:16px;font-weight:500;line-height:1;text-decoration:none;border:0;cursor:pointer;transition:background .18s var(--e),transform .14s var(--e),background-position .6s var(--e)}
.btn:active{transform:scale(.97)}
.wn{background:var(--wine);color:var(--paper);box-shadow:0 10px 18px -10px rgba(92,26,43,.7)}.wn:hover{background:var(--wine2)}
.br{background:var(--metal);background-size:180% 100%;background-position:30% 0;color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(0,0,0,.18),0 10px 18px -10px rgba(0,0,0,.6)}.br:hover{background-position:70% 0}
.ln2{background:transparent;color:inherit;box-shadow:inset 0 0 0 1px currentColor}
.arr{width:22px;height:12px;flex:none;transition:transform .25s var(--e)}a:hover>.arr{transform:translateX(5px)}
.go{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:500;font-size:16px;padding-bottom:4px;background:var(--metal) left bottom/100% 1.5px no-repeat}
.kick{display:flex;align-items:center;gap:14px;font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);margin-bottom:clamp(20px,2.4vw,34px)}
.kick b{font-weight:500;color:var(--brassd)}.kick::after{content:"";flex:1;height:1px;background:var(--metal);opacity:.75}
.cap,figcaption{font:500 11.5px/1.45 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.band{position:relative;padding:var(--sec) 0;background:var(--paper) var(--grain)}
.band.tone{background:var(--beige) var(--grain)}
.band.deep{background:var(--deep) var(--grain);color:var(--paper)}.band.deep .kick{color:var(--p60)}.band.deep .kick b{color:var(--brassl)}
.hd{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px clamp(24px,4vw,72px);align-items:end;margin-bottom:clamp(30px,4.2vw,64px)}
.hd p{color:var(--ink2);font-size:clamp(17px,1.4vw,19px);max-width:31em}
.fine{font-size:14.5px;color:var(--ink3)}
.next{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;margin-top:clamp(26px,3vw,44px)}

/* ---------- cover: the room at sunset, the words on its wall ---------- */
.hero{position:relative;min-height:max(100svh,680px);display:flex;flex-direction:column;color:var(--paper);background:linear-gradient(180deg,#25261D,#39392E);isolation:isolate;overflow:hidden}
.ph{position:absolute;inset:0;z-index:-1}
.ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:left center}
.ph::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(14,15,10,.58),rgba(14,15,10,0) 20%),linear-gradient(90deg,rgba(14,15,10,.5),rgba(14,15,10,.38) 30%,rgba(14,15,10,0) 44%)}
.top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px var(--pp)}
.top .lfull{display:block;width:clamp(240px,21vw,310px);height:auto;margin:-6px 0 -18px -8px}.top .lmono{display:none;width:50px;height:auto}.onlym{display:none!important}
.top nav{display:flex;align-items:center;gap:clamp(16px,2.1vw,34px);font-size:clamp(16px,1.22vw,18px);letter-spacing:.01em}.top nav a:not(.btn){text-decoration:none;color:var(--p82);text-shadow:0 1px 12px rgba(0,0,0,.5)}.top nav a:not(.btn):hover{color:#fff}
.top .btn{min-height:44px;padding:0 20px;font-size:clamp(15.5px,1.15vw,17px)}
.hcol{width:min(33vw,480px);margin:auto 0 auto var(--pp);padding:8px 0 40px}
.hcol .kick{color:var(--p60);margin-bottom:18px}.hcol .kick::after{opacity:.6}
.lede{font-size:clamp(16.5px,1.25vw,18.5px);line-height:1.45;color:var(--p82);margin-top:16px}
.cfg{margin-top:26px;padding-top:22px;border-top:1px solid rgba(216,190,130,.42)}
.cfg .lbl{font:500 11.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--brassl);margin-bottom:8px}
.opts{display:flex;flex-direction:column;align-items:flex-start;margin-bottom:18px}
.opts button{position:relative;min-height:40px;background:none;border:0;padding:4px 0;color:var(--p60);font:400 clamp(18.3px,1.5vw,22.6px)/1.15 var(--disp);text-align:left;cursor:pointer;transition:color .25s var(--e),padding .4s var(--e)}
.opts button::before{content:"";position:absolute;left:0;top:50%;width:0;height:1.5px;margin-top:1px;background:var(--metal);transition:width .4s var(--e)}
.opts button:hover{color:var(--paper)}
.opts button[aria-checked=true]{color:var(--paper);padding-left:32px}.opts button[aria-checked=true]::before{width:22px}
.kinds{display:flex;flex-wrap:wrap;gap:0 20px;margin-bottom:24px}.kinds.k1{margin-bottom:14px}.opts button[hidden]{display:none}
.kinds button{min-height:38px;border:0;padding:4px 0;color:var(--p60);font:400 16.5px/1.3 var(--sans);cursor:pointer;background:var(--metal) left calc(100% - 5px)/0 1.5px no-repeat;transition:color .25s var(--e),background-size .4s var(--e)}
.kinds button:hover{color:var(--paper)}
.kinds button[aria-checked=true]{color:var(--paper);background-size:100% 1.5px}
.cfg .btn{min-height:52px;padding:0 28px}
.cfg small{display:block;margin-top:14px;font-size:13.5px;line-height:1.4;color:var(--p60)}
.cvc{position:absolute;right:var(--pp);bottom:14px;color:var(--p82);text-shadow:0 1px 10px rgba(0,0,0,.6);margin:0}

/* ---------- 01 what I do: three moments, three pictures ---------- */
.svc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.6vw,40px)}
.svc>li{display:flex;flex-direction:column}
.sv{position:relative;aspect-ratio:4/5;overflow:hidden;background:#cfc8bb;margin-bottom:24px}
.sv>img,.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sv>img{transition:transform 1.4s var(--e)}.svc>li:hover .sv>img{transform:scale(1.035)}
.sv figcaption{position:absolute;left:14px;top:14px;z-index:2;background:rgba(23,21,18,.74);color:var(--paper);padding:8px 11px;letter-spacing:.1em;pointer-events:none}
.svc h3{font-size:clamp(21px,2.18vw,31.8px)}
.svc .pr{font:400 clamp(19px,1.65vw,24px)/1.28 var(--disp);color:var(--ink);margin-top:10px}
.svc p{color:var(--ink2);margin-top:12px;max-width:28em}
.get{margin:18px 0 22px;border-top:1px solid var(--rule)}
.get li{position:relative;padding:10px 0 10px 24px;border-bottom:1px solid var(--rule);font-size:15.5px}
.get li::before{content:"";position:absolute;left:0;top:21px;width:13px;height:1.5px;background:var(--metal)}
.svc .go{margin-top:auto;align-self:flex-start}
.ba{position:absolute;inset:0;--x:55%;touch-action:pan-y}
.ba .b{clip-path:inset(0 0 0 var(--x))}
.ba .hl{position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;background:var(--brassl);color:var(--ink);pointer-events:none}
.ba .hl svg{position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;background:var(--metal);border-radius:50%;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 20px -8px rgba(0,0,0,.6)}
.ba input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.ba .tg{position:absolute;bottom:12px;font:500 11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;background:rgba(23,21,18,.74);color:var(--paper);padding:7px 10px;pointer-events:none}
.ba .tg.l{left:12px}.ba .tg.r{right:12px}

/* ---------- full-width photographs ---------- */
.plate{position:relative;height:min(88vh,880px);min-height:340px;overflow:hidden;background:var(--ink)}
.plate img{position:absolute;left:0;top:-7%;width:100%;height:114%;object-fit:cover;will-change:transform}
.plate::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(0deg,rgba(14,15,10,.5),rgba(14,15,10,0));pointer-events:none}
.plate figcaption{position:absolute;left:var(--pp);right:var(--pp);bottom:16px;z-index:1;color:var(--p82);display:flex;justify-content:space-between;gap:16px}

/* ---------- 02 materials: six samples on deep green; they lift, tilt and catch the light ---------- */
.mat{display:grid;grid-template-columns:minmax(0,4.5fr) minmax(0,7.5fr);gap:clamp(28px,4.4vw,80px);align-items:center}
.mat .tx p{color:var(--p82);margin-top:18px;max-width:26em}
.mat .hint{display:flex;align-items:center;gap:12px;margin-top:26px;font:500 12px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--brassl)}
.mat .hint::before{content:"";width:34px;height:1px;background:var(--metal)}
.mat .go{margin-top:28px}.mat .fine{color:var(--p60);margin-top:22px}
.board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,38px) clamp(14px,2vw,32px);perspective:1400px}
.sw{position:relative}.sw:nth-child(2),.sw:nth-child(5){margin-top:clamp(14px,2.2vw,34px)}
.sw figcaption{margin-top:16px;color:var(--p60)}.sw figcaption b{display:block;font:500 15.5px/1.3 var(--sans);letter-spacing:0;text-transform:none;color:var(--paper);margin-bottom:3px}
.smp{--mx:.3;--my:.22;--rx:0deg;--ry:0deg;--lift:0px;position:relative;display:block;aspect-ratio:1;border-radius:3px;background:#888 center/cover no-repeat;cursor:grab;
 transform:rotateX(var(--rx)) rotateY(var(--ry)) translateZ(var(--lift));transform-style:preserve-3d;
 box-shadow:0 var(--tk,5px) 0 var(--edge,#000),0 calc(var(--tk,5px) + 1px) 0 rgba(0,0,0,.35),0 26px 30px -14px rgba(0,0,0,.6),0 60px 70px -34px rgba(0,0,0,.6);
 transition:transform .7s var(--e),box-shadow .7s var(--e);touch-action:pan-y;-webkit-user-select:none;user-select:none}
.smp.up{--lift:26px;transition:transform .16s linear,box-shadow .4s var(--e);box-shadow:0 var(--tk,5px) 0 var(--edge,#000),0 calc(var(--tk,5px) + 1px) 0 rgba(0,0,0,.35),0 44px 40px -18px rgba(0,0,0,.55),0 90px 90px -40px rgba(0,0,0,.6)}
.smp::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at calc(var(--mx)*100%) calc(var(--my)*100%),rgba(255,250,236,var(--gl,.34)),rgba(255,250,236,0) var(--gs,58%));mix-blend-mode:soft-light}
.smp canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;pointer-events:none}
.s-oak{--edge:#9A7646;--tk:7px;--gl:.4}
.s-velvet,.s-boucle{--tk:0px;--edge:transparent;border-radius:9px;--gl:.3;--gs:46%;box-shadow:inset 0 0 22px rgba(0,0,0,.26),0 26px 30px -14px rgba(0,0,0,.6),0 60px 70px -34px rgba(0,0,0,.6)}
.s-boucle{border-radius:14px;--gl:.2;box-shadow:inset 0 0 18px rgba(60,40,10,.14),0 26px 30px -14px rgba(0,0,0,.6),0 60px 70px -34px rgba(0,0,0,.6)}
.s-velvet.up,.s-boucle.up{box-shadow:inset 0 0 22px rgba(0,0,0,.2),0 44px 40px -18px rgba(0,0,0,.55),0 90px 90px -40px rgba(0,0,0,.6)}
.s-marble{--edge:#CFCAC2;--tk:8px}
.s-marble::after{background:linear-gradient(calc(110deg + var(--mx)*30deg),rgba(255,255,255,0) calc(var(--mx)*70% - 6%),rgba(255,255,255,.75) calc(var(--mx)*70% + 12%),rgba(255,255,255,0) calc(var(--mx)*70% + 30%));mix-blend-mode:soft-light}
.s-plaster{--edge:#22332A;--tk:7px;--gl:.3;box-shadow:0 7px 0 #22332A,0 8px 0 rgba(0,0,0,.4),0 0 0 1px rgba(216,190,130,.12),0 26px 30px -14px rgba(0,0,0,.6),0 60px 70px -34px rgba(0,0,0,.6)}
.s-brass{--edge:#7B5E28;--tk:3px}
.s-brass::after{background:linear-gradient(96deg,rgba(255,244,214,0) calc(var(--mx)*100% - 30%),rgba(255,244,214,.85) calc(var(--mx)*100%),rgba(255,244,214,0) calc(var(--mx)*100% + 30%));mix-blend-mode:overlay}

/* ---------- 03 from plan to room: one frame that changes as you read ---------- */
.plan{display:block;overflow:visible}
.L-poche path,.L-poche rect{fill:var(--ink)}
.L-cut rect,.op{fill:var(--sheet)}
.fl{opacity:0;transition:opacity .9s var(--e)}
.outline .pl{fill:none;stroke:var(--ink);stroke-width:1.4}
.gl{fill:none;stroke:var(--ink);stroke-width:1.3}.gl.thin{stroke-width:.6}
.dr{fill:none;stroke:var(--ink);stroke-width:1}.wn{fill:none;stroke:var(--ink);stroke-width:.8}.dash{stroke:var(--ink);stroke-width:1;stroke-dasharray:6 5}
.dm{stroke:var(--dim);stroke-width:.9}.dt{font:500 11px var(--mono);fill:var(--dim)}
.lb{font:600 13px var(--sans);fill:var(--ink)}
.fu{fill:none;stroke:var(--ink);stroke-width:1}.fu.soft{stroke-dasharray:3 4;stroke-width:.7}.fu.plant{stroke:#4E6B45}.fu.slat{fill:var(--oak);stroke:none}
.el{fill:none;stroke:var(--elec);stroke-width:1.1}.el.fill{fill:var(--elec)}.wi{fill:none;stroke:var(--elec);stroke-width:.8;stroke-dasharray:4 4}
.L-dims,.L-furn,.L-elec,.L-labels{opacity:0;transition:opacity .7s var(--e)}
.mt{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,88px);align-items:start}
.ch{min-height:70vh;display:flex;flex-direction:column;justify-content:center;opacity:.3;transition:opacity .45s var(--e)}
.ch.on{opacity:1}
.ch .no{font:500 14px/1 var(--mono);color:var(--brassd);letter-spacing:.08em;margin-bottom:14px}
.ch h3{font-size:clamp(21px,2.26vw,34.8px);line-height:1.1}
.ch p{color:var(--ink2);margin-top:14px;max-width:25em}
.stage{position:sticky;top:8vh;height:84vh;min-height:560px;display:flex;flex-direction:column;justify-content:center}
.sheet{position:relative;background:var(--sheet);box-shadow:var(--sh);padding:clamp(14px,1.8vw,26px) clamp(14px,1.8vw,26px) 0;display:flex;flex-direction:column;height:100%;max-height:820px}
.draw{position:relative;flex:1;min-height:0;perspective:1800px}
.iso{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 1.3s var(--e),--h 1.3s var(--e),opacity .7s var(--e);--h:0px}
.iso .plan{position:absolute;inset:0;width:100%;height:100%}
.wl{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .5s var(--e);transform:translateZ(calc(var(--i)*var(--h)))}
.wl path.w{fill:#D8CFBD;fill-rule:evenodd}.wl.top path.w{fill:var(--ink)}.wl path.g{fill:rgba(140,170,140,.07);stroke:rgba(23,21,18,.35);stroke-width:1}
.viz{position:absolute;left:0;right:0;top:50%;aspect-ratio:5/4;transform:translateY(-50%) scale(.96);opacity:0;transition:opacity .8s var(--e),transform 1s var(--e);overflow:hidden;box-shadow:var(--sh);background:#ddd;pointer-events:none}
.viz img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.viz .vr{clip-path:inset(0 0 0 100%);transition:clip-path 1.5s var(--e)}
.viz::after{content:"";position:absolute;top:0;bottom:0;left:100%;width:2px;margin-left:-1px;background:var(--brassl);transition:left 1.5s var(--e),opacity .4s 1.3s}
.psite{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:clamp(18px,2.6vw,40px);opacity:0;transform:translateY(26px);transition:opacity .8s var(--e),transform 1s var(--e);pointer-events:none}
.phone{flex:none;height:min(100%,590px);aspect-ratio:9/18.4;background:var(--paper);border:7px solid var(--ink);border-radius:30px;box-shadow:var(--sh);overflow:hidden;font-size:11px;line-height:1.3;color:var(--ink)}
.pbar{display:flex;justify-content:space-between;align-items:baseline;padding:17px 14px 9px}.pbar b{font:400 18px/1 var(--disp)}.pbar span{font:500 8px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--brassd)}
.ptabs{display:flex;gap:13px;padding:0 14px 9px;border-bottom:1px solid var(--rule);font-size:10.5px;color:var(--ink3)}.ptabs b{color:var(--ink);font-weight:600;box-shadow:0 10px 0 -8.5px var(--brass)}
.proom{margin:11px 14px 0}.proom img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}.proom p{margin-top:7px}.proom b{display:block;font-size:12px;font-weight:600}.proom span{font-size:9.5px;color:var(--ink3)}
.pdocs{margin:9px 14px 0}.pdocs li{display:flex;gap:8px;align-items:center;padding:6px 0;border-top:1px solid var(--rule);font-size:10.5px}
.pdocs i{flex:none;font:500 7px/1 var(--mono);font-style:normal;letter-spacing:.06em;border:1px solid var(--brassd);color:var(--brassd);padding:3px}
.pshop{margin:4px 14px 0}.pshop li{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:8px;align-items:center;padding:6px 0;border-top:1px solid var(--rule)}
.pshop u{display:block;width:30px;height:30px;background:#ddd center/cover;text-decoration:none}.pshop b{display:block;font-size:10.5px;font-weight:600}.pshop span{font-size:9px;color:var(--ink3)}
.pshop em{font:500 7px/1 var(--mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase;padding:4px 5px;background:var(--beige);color:var(--ink2)}.pshop em.ok{background:var(--deep);color:var(--paper)}
.pnote{width:min(38%,230px)}.pnote li{position:relative;padding:12px 0 12px 24px;border-top:1px solid var(--rule);font-size:15.5px}.pnote li:last-child{border-bottom:1px solid var(--rule);font-weight:500}
.pnote li::before{content:"";position:absolute;left:0;top:23px;width:13px;height:1.5px;background:var(--metal)}
.tb{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;border-top:1px solid var(--ink);margin-top:10px;padding:10px 0 12px;font:500 12px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
.tb b{color:var(--ink);font-weight:500}.tb .t{text-align:center}
.chips{display:flex;gap:8px;position:absolute;right:0;bottom:0;opacity:0;transform:translateY(8px);transition:opacity .6s var(--e),transform .6s var(--e)}
.chips li{font:500 11px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ink2)}
.chips i{display:block;width:54px;height:34px;margin-bottom:6px;box-shadow:inset 0 0 0 1px rgba(23,21,18,.14)}
[data-step="1"] .L-dims{opacity:1}
[data-step="2"] .L-furn{opacity:1}[data-step="2"] .L-dims{opacity:.22}
[data-step="3"] .L-furn{opacity:.28}[data-step="3"] .L-elec{opacity:1}
[data-step="4"] .L-furn,[data-step="4"] .L-labels{opacity:1}[data-step="4"] .fl{opacity:1}[data-step="4"] .chips{opacity:1;transform:none}
[data-step="5"] .L-furn,[data-step="6"] .L-furn,[data-step="7"] .L-furn,[data-step="8"] .L-furn{opacity:1}[data-step="5"] .fl,[data-step="6"] .fl,[data-step="7"] .fl{opacity:1}
[data-step="5"] .iso,[data-step="6"] .iso,[data-step="7"] .iso{transform:rotateX(56deg) rotateZ(-34deg) scale(.84) translateY(-2%);--h:4.4px}
[data-step="5"] .wl,[data-step="6"] .wl,[data-step="7"] .wl{opacity:1}
[data-step="6"] .iso,[data-step="7"] .iso,[data-step="8"] .iso{opacity:0}
[data-step="8"] .psite{opacity:1;transform:none}
[data-step="6"] .viz,[data-step="7"] .viz{opacity:1;transform:translateY(-50%)}
[data-step="7"] .viz .vr{clip-path:inset(0)}[data-step="7"] .viz::after{left:0;opacity:0}
/* ---------- 04 working together ---------- */
.lv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(22px,3.4vw,56px)}
.lv li{border-top:1px solid var(--ink);padding-top:20px}.lv .no{font:500 13px/1 var(--mono);color:var(--brassd);letter-spacing:.08em;display:block;margin-bottom:14px}
.lv p{color:var(--ink2);margin-top:12px;max-width:26em}
.sub{margin-top:var(--sec)}
.steps4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ink)}
.steps4 li{position:relative;padding:22px clamp(14px,1.8vw,26px) 0 0}
.steps4 li::before{content:"";position:absolute;left:0;top:-5px;width:9px;height:9px;border-radius:50%;background:var(--ink)}.steps4 li:last-child::before{background:var(--brass)}
.steps4 b{display:block;font-family:var(--disp);font-size:clamp(17.5px,1.65vw,22.6px);font-weight:400;letter-spacing:-.03em}.steps4 p{color:var(--ink2);font-size:16px;margin-top:8px;max-width:17em}
.about{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,72px);align-items:end;margin-top:clamp(48px,6vw,96px)}
.about .big{font:400 clamp(17.5px,1.83vw,27px)/1.3 var(--disp)}.about p+p{color:var(--ink2)}

/* ---------- contact ---------- */
.end{position:relative;background:var(--ink) var(--grain);color:var(--paper);padding:var(--sec) 0 0}
.end::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--metal)}
.end .g{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,72px);align-items:end}
.end p{color:var(--p82);font-size:clamp(17px,1.4vw,19px);max-width:28em}
.end .cfg{margin-top:0;padding-top:0;border-top:0}.end .g{align-items:start}
.end .num{display:block;margin-top:16px;font:500 17px var(--mono);color:var(--paper);text-decoration:none}
.foot{border-top:1px solid var(--prule);margin-top:clamp(56px,7vw,96px);padding:22px 0 26px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:14.5px;color:var(--p60)}
.foot img{display:block;width:clamp(220px,22vw,280px);height:auto;margin-left:-8px}
.dock{position:fixed;left:0;right:0;bottom:0;display:none;gap:10px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--ink);color:var(--paper);transform:translateY(110%);transition:transform .35s var(--e);z-index:9;box-shadow:0 -1px 0 rgba(216,190,130,.5)}
.dock .btn{flex:1;min-height:50px;padding:0 12px}.dock.on{transform:none}

/* ---------- entrances ---------- */
.js .rv{opacity:0;transform:translateY(18px)}.js .rv.in{opacity:1;transform:none;transition:opacity .7s var(--e),transform .8s var(--e)}
.js .sw.rv{transform:translateY(30px) scale(.96)}.js .sw.rv.in{transform:none;transition-delay:calc(var(--n,0)*70ms)}
.js h1 .ln>span{transform:translateY(108%);animation:up 1.2s var(--e) .25s forwards}.js h1 .ln:nth-child(2)>span{animation-delay:.4s}
.js .hcol .kick,.js .lede,.js .cfg{opacity:0;animation:fade .9s var(--e) .7s forwards}.js .cfg{animation-delay:.95s}.js .hcol .kick{animation-delay:.15s}
.js .ph img{animation:settle 3s var(--e) both}
@keyframes up{to{transform:none}}@keyframes fade{to{opacity:1}}@keyframes settle{from{scale:1.05}to{scale:1}}

@media(max-height:800px) and (min-width:921px){.hcol{padding-bottom:26px}.lede{margin-top:12px}.cfg{margin-top:18px;padding-top:16px}.opts{margin-bottom:12px}.kinds{margin-bottom:16px}}
/* ---------- phone ---------- */
@media(max-width:920px){
 .hero{min-height:0;display:block;background:linear-gradient(180deg,#2E2F25,#25261D)}
 .ph{position:relative;height:50svh;min-height:300px}.ph img{object-position:38% center}
 .ph::after{background:linear-gradient(180deg,rgba(14,15,10,.6),rgba(14,15,10,0) 30%),linear-gradient(0deg,#2E2F25,rgba(46,47,37,0) 22%)}
 .top{position:absolute;left:0;right:0;top:0;z-index:2;padding:14px 18px}.top .lfull{display:none}.top .lmono{display:block}.onlym{display:flex!important}.top nav a:not(.btn){display:none}
 .hcol{width:auto;margin:0;padding:6px var(--pp) 34px}.cvc{position:static;padding:0 var(--pp) 22px;margin-top:-14px;font-size:10px;text-shadow:none;color:var(--p60)}
 .hd,.mat,.mt,.end .g,.about{grid-template-columns:1fr}.hd{gap:14px}
 .svc{grid-template-columns:1fr;gap:44px}.lv{grid-template-columns:1fr;gap:30px}.sv{aspect-ratio:5/4}
 .pnote{display:none}.phone{height:100%;border-width:5px;border-radius:22px}
 .plate{height:68vw;min-height:260px}.plate figcaption span+span{display:none}
 .mat{gap:34px}.board{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 18px}.sw:nth-child(2),.sw:nth-child(5){margin-top:0}.sw:nth-child(even){margin-top:22px}
 .mt{gap:0}
 .viz{aspect-ratio:16/10}
 .stage{order:-1;top:0;height:54vh;min-height:0;z-index:2;background:var(--beige);padding:8px var(--pp) 10px;margin:0 calc(-1*var(--pp))}
 .sheet{max-height:none;padding:10px 10px 0}.tb{gap:10px;font-size:10.5px;padding:7px 0 8px;margin-top:6px}.tb .t{display:none}
 .chips i{width:36px;height:22px}.chips li{font-size:9px}
 .ch{min-height:62vh;opacity:1;justify-content:flex-start;padding-top:8vh}
 .steps4{grid-template-columns:1fr 1fr;row-gap:30px;border-top:0}.steps4 li{border-top:1px solid var(--ink)}
 .dock{display:flex}body{padding-bottom:72px}
}
@media(hover:none){.smp{cursor:default}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01s!important;animation-delay:0s!important;transition:none!important}.js .rv,.js .sw.rv{opacity:1;transform:none}}
@media(max-width:920px){h1{font-size:min(calc((100vw - 2*var(--pp))/11.75),44px)}}
@media(max-width:560px){.opts button{font-size:clamp(15.5px,4.7vw,18.3px);min-height:38px}}
@media(max-width:920px){.end .g{row-gap:34px}}
.foot a{color:inherit;text-underline-offset:4px}.foot a:hover{color:var(--paper)}