@font-face{font-family:"Albert Sans";src:url(/demos/interiors/fonts/AlbertSans.woff2) format("woff2");font-weight:300 600;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/demos/interiors/fonts/IBMPlexMono.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  --plaster:#ece7df;
  --paper:#f5f2ec;
  --ink:#1f1d1a;
  --graphite:#4a463f;
  --muted:#5f5a52;
  --line:#cfc7ba;
  --oak:#b48c5c;
  --clay:#a6553a;
  --sans:"Albert Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --gut:clamp(16px,4.4vw,72px);
  --sec:clamp(80px,10vw,160px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--plaster);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-weight:300;margin:0;letter-spacing:-.02em}
p{margin:0 0 1em}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;z-index:50;background:var(--ink);color:var(--plaster);padding:10px 14px}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--clay);outline-offset:3px}

/* header */
.top{position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:24px;height:68px;padding:0 var(--gut);background:rgba(236,231,223,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid rgba(31,29,26,.08)}
.mark{display:flex;align-items:baseline;gap:14px;text-decoration:none;font-weight:500;font-size:22px;letter-spacing:-.01em}
.mark span{font-size:13px;font-weight:400;color:var(--muted);letter-spacing:0}
.nav{display:flex;align-items:center;gap:28px;font-size:15px}
.nav a{text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.nav a:hover{color:var(--clay)}
.nav-cta{border:1px solid var(--ink);padding:0 18px;border-radius:999px}
.nav-cta:hover{background:var(--ink);color:var(--plaster)!important}

/* hero */
.hero{min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);align-items:end;gap:clamp(32px,5vw,96px);padding:108px var(--gut) var(--gut)}
.hero h1{font-size:clamp(38px,4.7vw,76px);line-height:1.04;max-width:14ch}
.hero-lede{font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:var(--graphite);max-width:34ch;margin:32px 0 0}
.hero-note{font:400 13px/1.5 var(--mono);color:var(--muted);margin:40px 0 0}
.hero-figure{position:relative;margin:0;align-self:stretch;max-height:calc(100svh - 108px - var(--gut));min-height:420px}
.hero-figure img{width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.dim{position:absolute;pointer-events:none}
.dim::before{content:"";position:absolute;background:var(--clay)}
.dim-h{left:0;right:0;top:-22px;height:11px;border-left:1px solid var(--clay);border-right:1px solid var(--clay)}
.dim-h::before{left:0;right:0;top:5px;height:1px;transform-origin:0 50%}
.dim-v{top:0;bottom:0;left:-22px;width:11px;border-top:1px solid var(--clay);border-bottom:1px solid var(--clay)}
.dim-v::before{top:0;bottom:0;left:5px;width:1px;transform-origin:50% 0}
.dim-label{position:absolute;font:400 12px/1 var(--mono);color:var(--clay);background:var(--plaster);padding:3px 7px;white-space:nowrap}
.dim-h .dim-label{left:50%;top:50%;transform:translate(-50%,-50%)}
.dim-v .dim-label{left:50%;top:50%;transform:translate(-50%,-50%) rotate(-90deg)}
.js .dim-h::before{transform:scaleX(0);animation:drawx 1.5s cubic-bezier(.6,0,.2,1) .35s forwards}
.js .dim-v::before{transform:scaleY(0);animation:drawy 1.5s cubic-bezier(.6,0,.2,1) .75s forwards}
.js .dim{border-color:transparent;animation:ticks .4s ease .3s forwards}
.js .dim-label{opacity:0;animation:show .6s ease 1.7s forwards}
@keyframes drawx{to{transform:scaleX(1)}}
@keyframes drawy{to{transform:scaleY(1)}}
@keyframes ticks{to{border-color:var(--clay)}}
@keyframes show{to{opacity:1}}

/* signature scene */
.scene{position:relative;height:320vh;background:var(--paper);border-top:1px solid rgba(31,29,26,.08)}
.scene-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;grid-template-columns:minmax(0,.56fr) minmax(0,1fr)}
.scene-copy{position:relative;z-index:3;padding:120px 0 64px var(--gut);display:flex;align-items:center}
.scene-lines{list-style:none;margin:0;padding:0;position:relative;width:100%;min-height:9em}
.scene-lines li{position:absolute;inset:0 0 auto 0;font-size:clamp(26px,2.4vw,38px);line-height:1.2;font-weight:300;letter-spacing:-.015em;max-width:17ch;opacity:0}
.scene-lines li:first-child{opacity:1}
.scene-view{position:relative;overflow:hidden}
.cam{position:absolute;inset:0;perspective:1700px;perspective-origin:50% 34%}
.world{position:absolute;left:50%;top:52%;width:600px;height:440px;margin:-220px 0 0 -300px;transform-style:preserve-3d;transform-origin:50% 50%}
.floor{position:absolute;inset:0;background:var(--paper);transform-style:preserve-3d}
.oak{position:absolute;inset:0;opacity:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 2px,transparent 2px 40px),linear-gradient(135deg,#dcc8a8,#cfb690 60%,#c4a983)}
.plan{position:absolute;left:-50px;top:-50px;width:700px;height:540px;overflow:visible}
.plan path{fill:none;stroke:var(--ink);stroke-dasharray:1;stroke-dashoffset:0}
.plan-walls path{stroke-width:7;stroke-linecap:square}
.plan-thin path{stroke-width:1.4}
.plan-furniture path{stroke-width:1.2;stroke:var(--graphite)}
.plan-dims path{stroke:var(--clay);stroke-width:1.2}
.plan text{font:400 15px var(--mono);fill:var(--clay)}
.wall{position:absolute;background:#efebe5;transform-style:preserve-3d;backface-visibility:visible}
.wall-back{left:0;top:-300px;width:600px;height:300px;transform-origin:50% 100%;background:linear-gradient(180deg,#f2eee8,#e8e3db)}
.wall-left{left:-300px;top:0;width:300px;height:440px;transform-origin:100% 50%;background:linear-gradient(90deg,#d9d3ca,#e3ddd4)}
.window{position:absolute;left:10%;right:10%;top:7%;bottom:0;background:linear-gradient(180deg,#fbfcfc,#eef1f2);box-shadow:inset 0 0 0 3px #d7d2ca}
.window::before,.window::after{content:"";position:absolute;top:0;bottom:0;width:22%;background:repeating-linear-gradient(90deg,rgba(255,255,255,.75) 0 6px,rgba(225,222,216,.6) 6px 12px)}
.window::before{left:0}.window::after{right:0}
.window i{position:absolute;top:0;bottom:0;width:3px;background:#d7d2ca}
.window i:nth-child(1){left:33%}.window i:nth-child(2){left:50%}.window i:nth-child(3){left:67%}
.frame{position:absolute;left:30%;right:30%;top:22%;bottom:40%;background:#cdb79a;box-shadow:inset 0 0 0 6px #2b2925}
.rug{position:absolute;left:150px;top:170px;width:300px;height:195px;background:#ddd5c8;box-shadow:inset 0 0 0 8px #d2c9ba;transform:translateZ(1px);opacity:0}
.box{position:absolute;left:calc(var(--x)*1px);top:calc(var(--y)*1px);width:calc(var(--w)*1px);height:calc(var(--d)*1px);transform-style:preserve-3d;--h:0;opacity:0}
.box i{position:absolute;display:block}
.box .t{inset:0;transform:translateZ(calc(var(--h)*1px));background:var(--top)}
.box .f{left:0;top:100%;width:100%;height:calc(var(--h)*1px);transform-origin:50% 0;transform:rotateX(90deg);background:var(--front)}
.box .r{left:100%;top:0;width:calc(var(--h)*1px);height:100%;transform-origin:0 50%;transform:rotateY(-90deg);background:var(--side)}
.sofa,.sofa-back,.chair{--top:#f4f2ee;--front:#e1ddd6;--side:#d1ccc4}
.table{--top:#c4a073;--front:#a9855a;--side:#977550}
.pot{--top:#5f6b4f;--front:#d8d1c6;--side:#c8c0b4}
.scene-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;opacity:0;z-index:2}

/* no motion: show the finished room */
.scene.is-static{height:auto}
.scene.is-static .scene-sticky{position:relative;height:auto;min-height:0}
.scene.is-static .cam{display:none}
.scene.is-static .scene-view{min-height:70vh}
.scene.is-static .scene-photo{opacity:1}
.scene.is-static .scene-lines{min-height:0}
.scene.is-static .scene-lines li{position:static;opacity:1;font-size:clamp(22px,2vw,30px);margin-bottom:.8em}

/* work */
.work{padding:var(--sec) var(--gut);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(56px,8vw,140px) clamp(16px,2.4vw,40px)}
.work>h2{grid-column:1/-1;font-size:clamp(34px,3.8vw,58px);margin-bottom:-24px}
.project{display:grid;grid-template-columns:subgrid;grid-column:1/-1;align-items:end}
.project h3{font-size:clamp(24px,2vw,32px);font-weight:400;margin-bottom:6px}
.meta{font:400 12px/1.4 var(--mono);color:var(--muted);margin-bottom:16px}
.project-text p:not(.meta){color:var(--graphite);max-width:36ch}
.p-a img{grid-column:1/8;aspect-ratio:4/5;object-fit:cover;width:100%}
.p-a .project-text{grid-column:9/13}
.p-b img{grid-column:6/13;grid-row:1;aspect-ratio:3/4;object-fit:cover;width:100%}
.p-b .project-text{grid-column:1/5;grid-row:1;align-self:start;padding-top:12%}
.p-c img:first-child{grid-column:1/-1;aspect-ratio:16/8;object-fit:cover;width:100%}
.p-c .project-text{grid-column:1/7;align-self:start;margin-top:32px}
.p-c-small{grid-column:9/13;width:100%;aspect-ratio:3/4;object-fit:cover;margin-top:-18%;position:relative;border:10px solid var(--plaster)}
.p-d img{grid-column:2/7;aspect-ratio:3/4;object-fit:cover;width:100%}
.p-d .project-text{grid-column:8/12}

/* services */
.services{padding:var(--sec) var(--gut);background:var(--paper);border-top:1px solid rgba(31,29,26,.08)}
.services h2,.howto h2{font-size:clamp(34px,3.8vw,58px);margin-bottom:clamp(36px,4vw,64px)}
.services-cols,.howto-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,56px);border-top:1px solid var(--line);padding-top:32px}
.services h3{font-size:clamp(22px,1.8vw,28px);font-weight:400;margin-bottom:12px}
.services-cols p,.howto-cols p{color:var(--graphite)}
.services-all{margin:48px 0 0;font-size:clamp(18px,1.4vw,21px);max-width:52ch}
.howto{padding:var(--sec) var(--gut)}
.howto b{display:block;font-weight:500;color:var(--ink);font-size:20px;margin-bottom:8px}

/* studio */
.studio{padding:var(--sec) var(--gut);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(40px,6vw,120px);align-items:center;background:var(--paper);border-top:1px solid rgba(31,29,26,.08)}
.studio-pics{position:relative;padding-bottom:16%}
.studio-tall{width:62%;aspect-ratio:2/3;object-fit:cover}
.studio-wide{position:absolute;right:0;bottom:0;width:58%;aspect-ratio:3/2;object-fit:cover;border:10px solid var(--paper)}
.studio h2{font-size:clamp(34px,3.8vw,58px);margin-bottom:28px}
.studio-text p{color:var(--graphite);max-width:40ch}

/* enquire */
.enquire{padding:var(--sec) var(--gut);background:var(--ink);color:var(--plaster);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:clamp(40px,6vw,120px)}
.enquire h2{font-size:clamp(34px,3.8vw,58px);margin-bottom:24px}
.enquire-text p{color:#bdb6ac;max-width:34ch}
.form{display:grid;grid-template-columns:1fr 1fr;gap:26px 28px;align-content:start}
.form label{display:flex;flex-direction:column;gap:8px;font-size:14px;color:#bdb6ac}
.form label span{color:#8d867c}
.form input,.form select,.form textarea{font:400 17px/1.4 var(--sans);color:var(--plaster);background:transparent;border:0;border-bottom:1px solid #4a463f;border-radius:0;padding:10px 0;min-height:46px;-webkit-appearance:none;appearance:none}
.form select{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23bdb6ac' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 4px center}
.form select option{color:#111}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-bottom-color:var(--plaster)}
.form .wide{grid-column:1/-1}
.form button{justify-self:start;font:500 15px/1 var(--sans);color:var(--ink);background:var(--plaster);border:0;border-radius:999px;padding:0 28px;min-height:50px;cursor:pointer}
.form button:hover{background:#fff}
.form-note{grid-column:1/-1;margin:0;color:var(--plaster)}

/* footer */
.foot{padding:56px var(--gut) 40px;background:var(--ink);color:#bdb6ac;border-top:1px solid #34312c;font-size:14px}
.foot-row{display:flex;flex-wrap:wrap;gap:24px 72px;align-items:flex-start;margin-bottom:40px}
.foot-mark{font-size:28px;font-weight:500;color:var(--plaster);margin:0;letter-spacing:-.01em}
.foot-row p{margin:0}
.foot a{text-decoration:none;border-bottom:1px solid #4a463f}
.foot-row a{display:inline-block;padding:10px 0;border:0;text-decoration:underline;text-decoration-color:#4a463f;text-underline-offset:4px}
.foot a:hover{color:var(--plaster)}
.foot-links a{margin-right:20px}
.foot-note{margin:0 0 6px}
.foot-credits{margin:0;color:#8d867c;font-size:13px}

/* tablets and phones */
@media (max-width:900px){
  .mark span{display:none}
  .nav{gap:18px}
  .nav a:not(.nav-cta){display:none}
  .hero{grid-template-columns:1fr;min-height:0;padding:96px var(--gut) 48px;gap:36px}
  .hero-figure{order:-1;max-height:none;min-height:0;aspect-ratio:5/4;margin:22px 0 0 22px}
  .hero h1{font-size:clamp(32px,8.6vw,46px)}
  .hero-lede{margin-top:20px}
  .hero-note{margin-top:24px}
  .scene{height:280vh}
  .scene-sticky{grid-template-columns:1fr}
  .scene-copy{grid-column:1;grid-row:1;align-items:flex-end;padding:0 var(--gut) 40px;background:linear-gradient(180deg,rgba(245,242,236,0) 55%,rgba(245,242,236,.94) 74%)}
  .scene-lines{min-height:0}
  .scene-lines li{inset:auto 0 0 0;font-size:clamp(22px,6.2vw,30px);max-width:18ch}
  .scene-view{grid-column:1;grid-row:1}
  .cam{perspective-origin:50% 30%}
  .world{top:40%}
  .scene.is-static .scene-sticky{display:block}
  .scene.is-static .scene-copy{background:none;padding:48px var(--gut) 16px}
  .work{grid-template-columns:1fr;gap:72px}
  .work>h2{margin-bottom:-28px}
  .project{grid-template-columns:1fr;gap:20px}
  .project img,.project .project-text,.p-b img,.p-b .project-text,.p-c img:first-child,.p-c .project-text,.p-d img,.p-d .project-text{grid-column:1;grid-row:auto}
  .p-b .project-text{padding-top:0}
  .p-c .project-text{margin-top:0}
  .p-c img:first-child{aspect-ratio:4/3}
  .p-c-small{width:62%;justify-self:end;margin-top:-40px}
  .services-cols,.howto-cols{grid-template-columns:1fr;gap:28px}
  .studio,.enquire{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  .js .dim,.js .dim::before,.js .dim-label{animation:none;transform:none;opacity:1;border-color:var(--clay)}
  .js .dim-h .dim-label{transform:translate(-50%,-50%)}
  .js .dim-v .dim-label{transform:translate(-50%,-50%) rotate(-90deg)}
}

/* Turn & Fold: page-turn between the studio site and this concept */
@view-transition{navigation:auto}
::view-transition-old(root){animation:tf-turn .85s cubic-bezier(.7,0,.3,1) both;transform-origin:0 50%;z-index:2}
::view-transition-new(root){animation:none;z-index:1}
@keyframes tf-turn{to{transform:perspective(2400px) rotateY(-92deg);opacity:.6}}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}