:root{--paper:#e8e4e0;--ink:#1a1818;--muted:#786f6c;--line:#1a181825;--panel:#f0ece8;--hero-top:#eeeae6;--hero-mid:#e8e4e0;--hero-bottom:#d8cdca;--floor:#deded4;--frame-light:#fff6;--room:#fbfaf8;--shadow:#322b2626;--gut:clamp(1.5rem,6.1vw,5.5rem);--ease:cubic-bezier(.22,1,.36,1);--soft:cubic-bezier(.16,1,.3,1);color-scheme:light}
html[data-theme="dark"]{--paper:#1a1818;--ink:#e8e4e0;--muted:#aaa19d;--line:#e8e4e026;--panel:#242525;--hero-top:#2a2525;--hero-mid:#1f1c1c;--hero-bottom:#141212;--floor:#1c2320;--frame-light:#ffffff10;--room:#050505;--shadow:#0007;color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:4.625rem;scrollbar-width:none;overflow-x:clip;background:var(--paper)}
html::-webkit-scrollbar{display:none}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,p,ul,ol,figure{margin:0}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{color:inherit;cursor:pointer}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{border:0;background:none}
button:disabled{cursor:default;opacity:.35}
a:focus-visible,button:focus-visible{outline:0.125rem solid #a4552c;outline-offset:0.375rem}
button:active:not(:disabled){translate:0 1px}
svg{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;display:block;flex-shrink:0}
img{display:block;max-width:100%}
.symbols{position:absolute;width:0;height:0;overflow:hidden}
.ui-icon{display:inline-block;width:1em;height:1em;vertical-align:-.13em}
.dialog-close>.ui-icon,.to-top>.ui-icon{width:1.25rem;height:1.25rem}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
.skip{position:fixed;z-index:300;left:0.9375rem;top:0.75rem;padding:0.75rem 1.125rem;background:var(--ink);color:var(--paper);transform:translateY(-160%)}
.skip:focus{transform:none}
::selection{background:#a4552c;color:#fff}
.eyebrow{font-size:0.875rem;line-height:1.5;font-weight:500;display:flex;align-items:center;gap:0.5625rem;color:var(--muted)}
.eyebrow:before{content:"";width:0.375rem;height:0.375rem;border-radius:50%;background:currentColor}
.loader{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;background:#e8e4e0;color:#1a1818;overflow:hidden}
.js .loader{display:flex}
.loader-stack{position:relative;width:11.875rem;height:16.875rem;perspective:43.75rem}
.loader-stack i{position:absolute;inset:0;border-radius:5.9375rem 5.9375rem 0.1875rem 0.1875rem;box-shadow:0.3125rem 0.4375rem 0 #0001;transform:translateX(calc(var(--i)*1.25rem - 1.875rem)) rotate(calc(var(--i)*-5deg + 8deg));transform-origin:50% 100%}
.loader-stack i:nth-child(1){--i:0;background:#354b6c}
.loader-stack i:nth-child(2){--i:1;background:#78606f}
.loader-stack i:nth-child(3){--i:2;background:#9baa83}
.loader-stack i:nth-child(4){--i:3;background:#c27643}
.loader-stack>span{position:absolute;inset:0;display:grid;place-items:center;color:#f2eadf;font-size:5rem;font-weight:650;letter-spacing:-.06em}
.loader-number{position:absolute;right:var(--gut);bottom:4.0625rem;font-size:3.375rem;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.loader-caption{position:absolute;left:var(--gut);bottom:4.6875rem;font:0.625rem Consolas,monospace;letter-spacing:.08em}
.js .enter{opacity:0;transform:translateY(1.5625rem)}
.js .is-ready .enter{animation:appear .9s var(--soft) both;animation-delay:var(--delay,0ms)}
@keyframes appear{to{opacity:1;transform:none}}
.door-cursor{position:fixed;left:0;top:0;z-index:75;padding:0.5rem 0.75rem;border-radius:1.875rem;background:var(--paper);color:var(--ink);font-size:0.625rem;box-shadow:0 0.1875rem 0.9375rem #0002;pointer-events:none;opacity:0;transition:opacity .15s}
.door-cursor.is-visible{opacity:1}
.door-transition{position:fixed;inset:0;z-index:180;background:var(--floor);overflow:hidden;pointer-events:all}
.walking-clone{position:absolute;left:0;width:100%;margin:0;transform:none;will-change:transform}
.walk-darkness{position:absolute;inset:0;background:var(--room);opacity:0;pointer-events:none}
.contact{position:relative;padding:6.875rem 0 0;border-radius:2rem 2rem 0 0;margin-top:-2px;background:var(--paper);z-index:2;isolation:isolate}
.contact:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 0 0,#ffffff17,transparent 60%)}
.contact h2{font-size:clamp(3.625rem,7.6vw,7rem);font-weight:650;line-height:1.02;letter-spacing:-.045em;margin:1.5625rem 0}
.contact h2>span{color:color-mix(in srgb,var(--ink) 45%,transparent)}
.contact-copy{max-width:28.75rem;font-size:1rem;line-height:1.7;color:var(--muted)}
.contact-actions{display:flex;gap:0.875rem;margin-top:1.875rem}
.footer{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;border-top:1px solid var(--line);margin-top:5.625rem;min-height:6.875rem;font-size:0.75rem}
.footer>span{font-weight:600}
.footer>p{font-size:0.6875rem;color:var(--muted)}
.footer>a{display:flex;align-items:center;min-height:2.75rem;font-size:0.6875rem}
dialog{border:1px solid var(--line);border-radius:1.5rem;background:var(--paper);color:var(--ink);width:min(37.5rem,calc(100% - 2.25rem));max-height:calc(100svh - 2.5rem);padding:2.75rem;box-shadow:0 1.875rem 7.5rem #0005;overflow-y:auto}
dialog::backdrop{background:#10101099;backdrop-filter:blur(0.5rem)}
dialog>.eyebrow{margin-bottom:1.5rem}
dialog>h2{font-size:2.5rem;font-weight:600;line-height:1.05;letter-spacing:-.04em;margin-bottom:1.375rem}
dialog>p:not(.eyebrow){font-size:0.9375rem;line-height:1.7;color:var(--muted)}
.dialog-close{position:absolute;top:0.8125rem;right:1rem;width:2.75rem;height:2.75rem;display:grid;place-items:center;font-size:1.6875rem;font-weight:300;border-radius:50%}
.dialog-close:hover{background:var(--line)}
.room-main{padding-top:10rem}
.room-intro{margin-bottom:4.0625rem}
.room-intro>.eyebrow{margin-bottom:1.375rem}
.room-intro h1{font-size:clamp(3.625rem,6.7vw,6rem);line-height:1;font-weight:650;letter-spacing:-.045em;margin-bottom:1.5rem}
.room-intro>p:not(.eyebrow){font-size:1.0625rem;color:var(--muted);line-height:1.65;max-width:39.375rem}
.room-page .room-intro h1{font-size:clamp(2.35rem,8vw,6rem);text-wrap:balance}
.room-projects{display:grid;gap:2.125rem}
.project{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:1.5625rem;padding:3.5rem;display:grid;grid-template-columns:1fr 1.14fr;gap:3.125rem;align-items:center;min-height:28.125rem;overflow:hidden;isolation:isolate}
.project-kicker{font:0.5625rem Consolas,monospace;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:0.8125rem}
.project h2{font-size:2.25rem;line-height:1.08;letter-spacing:-.035em;font-weight:650;margin-bottom:0.9375rem}
.project-type{font-size:0.75rem;color:var(--muted);margin-bottom:1.4375rem}
.project-copy{font-size:0.875rem;line-height:1.7;color:var(--muted);max-width:26.25rem}
.tags{display:flex;gap:0.4375rem;flex-wrap:wrap;margin:1.25rem 0 1.375rem;list-style:none;padding:0}
.tags li{font-size:0.625rem;padding:0.4375rem 0.625rem;border-radius:1.875rem;background:var(--line)}
.project-status{font-size:0.6875rem;line-height:1.6;display:flex;align-items:center;gap:0.5rem}
.project-status:before{content:"";display:block;width:0.3125rem;height:0.3125rem;border-radius:50%;background:#7f9569}
.monitor{margin:0;position:relative;padding-bottom:2.75rem;perspective:62.5rem}
.monitor-screen{position:relative;aspect-ratio:1.48;background:#131716;border:0.5rem solid #222725;border-bottom-width:1.25rem;border-radius:0.75rem;overflow:hidden;box-shadow:0.25rem 0.875rem 1.5rem #0002;transform:rotateY(-5deg) rotateX(2deg);transition:transform .5s var(--ease)}
.project:hover .monitor-screen{transform:rotateY(0deg) rotateX(0deg) translateY(-3px)}
.monitor-screen img{width:100%;height:100%;object-fit:cover;object-position:left top}
.monitor:before{content:"";position:absolute;bottom:0.8125rem;left:45%;width:12%;height:2.625rem;background:linear-gradient(90deg,#747a77,#d5dad7 45%,#777d7a);clip-path:polygon(15% 0,85% 0,100% 100%,0 100%)}
.monitor:after{content:"";position:absolute;left:31%;right:29%;height:0.5625rem;bottom:0.5rem;border-radius:50% 50% 0.1875rem 0.1875rem;background:linear-gradient(#d3d7d4,#727875);box-shadow:0 0.4375rem 0.5rem #0002}
.monitor>figcaption{position:absolute;bottom:-15px;left:0;right:0;text-align:center;font-size:0.5625rem;color:var(--muted)}
.workflow-screen{height:100%;background:#212829;color:#f3f0e5;display:flex;flex-direction:column;justify-content:center;padding:1.75rem;position:relative}
.workflow-screen>b{position:absolute;right:1.375rem;top:0.8125rem;font-size:2.8125rem;letter-spacing:-.08em;color:#d0b17f}
.workflow-screen>p{font-size:1.625rem;line-height:1.1;letter-spacing:-.04em;margin-bottom:1.4375rem}
.workflow-screen>div{display:flex;align-items:center;gap:0.5rem}
.workflow-screen>div>span{border:1px solid #ffffff45;border-radius:0.3125rem;padding:0.5rem;font-size:0.5625rem}
.workflow-screen>small{font-size:0.4375rem;letter-spacing:.1em;color:#b1bbb9;border-top:1px solid #ffffff30;padding-top:0.875rem;margin-top:1.4375rem}
.site-screen{height:100%;background:#eeeae6;color:#1a1818;position:relative;overflow:hidden;padding:1.5rem}
.site-screen small{font-size:0.375rem;word-spacing:0.3125rem}
.site-screen strong{position:absolute;left:1.5rem;top:35%;font-size:1.625rem;line-height:1.05;letter-spacing:-.03em;z-index:2}
.site-screen strong>span{display:inline-block;padding:0.5rem;background:#faf7eb;border-radius:0.1875rem;box-shadow:0.125rem 0.1875rem #333;font-size:1.375rem;margin-top:0.4375rem}
.site-screen img{position:absolute;right:0;bottom:0;width:47%;height:88%;object-fit:contain;object-position:bottom}
.concept-screen{height:100%;padding:1.625rem;background:linear-gradient(150deg,#b5bda9,#677d68);color:#f6f3e9;position:relative;isolation:isolate;overflow:hidden}
.concept-screen:before{content:"";position:absolute;right:-20%;top:-10%;width:90%;height:120%;border:2rem solid #f0e6b24d;border-radius:50%;transform:rotate(-30deg);z-index:-1}
.concept-screen>small{font-size:0.4375rem;letter-spacing:.09em}
.concept-screen>strong{position:absolute;top:35%;font-size:2.25rem;line-height:1;letter-spacing:-.05em}
.concept-screen>span{position:absolute;bottom:1.25rem;font-size:0.4375rem;letter-spacing:.07em}
.room-footer{padding-bottom:1.25rem;margin-top:3.75rem}
.back-doors{position:fixed;z-index:60;left:1.5rem;bottom:1.375rem;display:flex;align-items:center;gap:0.5rem;padding:0.625rem 1rem;min-height:2.6875rem;border:1px solid var(--line);border-radius:1.875rem;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(0.75rem);box-shadow:0 0.3125rem 1.5rem #0001;font-size:0.6875rem}
.back-doors>svg{width:0.8125rem;height:0.8125rem;transform:rotate(180deg)}
.content-metrics{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.25rem;margin-top:2.1875rem}
.content-metric{border:1px solid var(--line);border-radius:1.125rem;padding:2rem;background:var(--panel);min-width:0}
.content-metric strong{font-size:clamp(2.1875rem,4.5vw,4.0625rem);font-weight:600;letter-spacing:-.06em;display:block;line-height:1.1}
.content-metric h2{font-size:0.9375rem;line-height:1.4;margin-top:1.375rem;font-weight:550}
.content-metric p{font-size:0.75rem;color:var(--muted);line-height:1.7;margin-top:0.625rem}
.snapshot-note{font-size:0.75rem;color:var(--muted);line-height:1.8;max-width:53.125rem;margin:1.5625rem 0 2.8125rem}
.content-room-copy{border-top:1px solid var(--line);padding-top:2.5rem;margin-top:1.875rem;max-width:53.125rem}
.content-room-copy h2{font-size:2.25rem;letter-spacing:-.035em;margin-bottom:1.25rem}
.content-room-copy p{font-size:1rem;line-height:1.8;color:var(--muted)}
.content-room-copy .pill{margin-top:1.5rem}
#content-snapshot{scroll-margin-top:7rem}
@media(min-width:1600px){
}
@media(max-width:1200px){
.project{padding:2.1875rem;gap:1.875rem}
.project h2{font-size:1.875rem}
}
@media(max-width:1023px){
.project{padding:1.875rem;gap:1.5625rem}
.project h2{font-size:1.6875rem}
.project-copy{font-size:0.8125rem}
.workflow-screen{padding:1.25rem}
.workflow-screen>p{font-size:1.3125rem}
.workflow-screen>div{gap:0.3125rem}
.workflow-screen>div>span{font-size:0.4375rem;padding:0.4375rem}
.monitor-screen{border-width:0.375rem;border-bottom-width:0.9375rem}
.site-screen strong{font-size:1.375rem}
.site-screen strong>span{font-size:1.0625rem}
.concept-screen>strong{font-size:1.8125rem}
}
@media(max-width:767px){
.contact{padding-top:5.3125rem}
.contact h2{font-size:4.0625rem}
.contact-copy{font-size:0.875rem}
.footer{margin-top:4.0625rem;min-height:6.25rem}
.footer>p{display:none}
.project{grid-template-columns:1fr;padding:2rem;gap:1.5625rem}
.project-visual{grid-row:1}
.project h2{font-size:2rem}
.project-copy{font-size:0.875rem}
.monitor-screen{aspect-ratio:1.5}
.workflow-screen{padding:1.875rem}
.workflow-screen>p{font-size:1.75rem}
.workflow-screen>div>span{font-size:0.625rem;padding:0.625rem}
.site-screen strong{font-size:1.8125rem}
.site-screen strong>span{font-size:1.5rem}
.concept-screen>strong{font-size:2.5rem}
.room-main{padding-top:8.4375rem}
.room-intro{margin-bottom:2.8125rem}
.room-intro h1{font-size:4rem}
.room-intro>p:not(.eyebrow){font-size:0.9375rem}
.content-metrics{grid-template-columns:1fr}
.content-metric strong{font-size:3.875rem}
.content-metric h2{margin-top:0.9375rem}
}
@media(max-width:639px){
:root{--gut:1.5rem}
.loader-stack{width:8.75rem;height:13.125rem}
.loader-stack>span{font-size:3.75rem}
.loader-number{font-size:2.5rem;bottom:2.6875rem}
.loader-caption{font-size:0.4375rem;bottom:3.125rem}
.door-cursor{display:none}
.contact{padding-top:4.375rem;border-radius:1.5rem 1.5rem 0 0}
.contact h2{font-size:clamp(2.75rem,12.8vw,4.25rem);margin-top:1.25rem}
.contact-copy{font-size:0.8125rem;line-height:1.8}
.contact-actions{gap:0.625rem;margin-top:1.5625rem}
.footer{min-height:6.5625rem;margin-top:4.0625rem;font-size:0.625rem}
.footer>a{font-size:0.5625rem}
.room-main{padding-top:7.8125rem}
.room-intro>.eyebrow{font-size:0.625rem;margin-bottom:1.25rem}
.room-intro h1{font-size:3.25rem}
.room-intro>p:not(.eyebrow){font-size:0.875rem;line-height:1.8}
.project{padding:1.5625rem;border-radius:1.125rem;gap:1.25rem;min-height:0}
.project h2{font-size:1.8125rem}
.project-copy{font-size:0.8125rem}
.project-kicker{font-size:0.5rem}
.project-type{font-size:0.6875rem;margin-bottom:1.0625rem}
.tags{margin-block:1.0625rem;gap:0.3125rem}
.tags li{font-size:0.5rem;padding:0.375rem 0.5rem}
.project-status{font-size:0.625rem}
.monitor{padding-bottom:2.0625rem}
.monitor-screen{border-width:0.3125rem;border-bottom-width:0.8125rem;border-radius:0.5rem;aspect-ratio:1.25}
.monitor:before{bottom:0.625rem;height:1.8125rem}
.monitor:after{bottom:0.4375rem;height:0.4375rem}
.monitor>figcaption{font-size:0.5rem;bottom:-12px}
.workflow-screen{padding:1.125rem}
.workflow-screen>p{font-size:1.4375rem;margin-bottom:1.125rem}
.workflow-screen>b{font-size:2.125rem;right:0.875rem;top:0.625rem}
.workflow-screen>div{gap:0.3125rem}
.workflow-screen>div>span{font-size:0.5rem;padding:0.4375rem}
.workflow-screen>small{font-size:0.375rem;margin-top:1rem;padding-top:0.625rem}
.site-screen{padding:1rem}
.site-screen small{font-size:0.3125rem}
.site-screen strong{left:1rem;font-size:1.4375rem}
.site-screen strong>span{font-size:1.125rem}
.concept-screen{padding:1.125rem}
.concept-screen>strong{font-size:2rem}
.concept-screen>small,.concept-screen>span{font-size:0.375rem}
.back-doors{left:0.9375rem;bottom:0.9375rem;font-size:0.625rem;min-height:2.6875rem;padding:0.625rem 0.875rem}
.room-footer{padding-bottom:3.125rem}
.content-metric{padding:1.625rem}
.content-metric strong{font-size:3.875rem}
.snapshot-note{font-size:0.6875rem}
.content-room-copy h2{font-size:1.875rem}
.content-room-copy p{font-size:0.875rem}
dialog{padding:2.1875rem 1.625rem;border-radius:1.25rem}
dialog>h2{font-size:2.0625rem}
dialog>.eyebrow{font-size:0.6875rem}
dialog>p:not(.eyebrow){font-size:0.8125rem}
}
@media(max-width:359px){
.room-intro h1{font-size:2.875rem}
.project{padding:1.25rem}
.project h2{font-size:1.625rem}
.workflow-screen>p{font-size:1.25rem}
.workflow-screen>div>span{font-size:0.4375rem;padding:0.3125rem}
.site-screen strong{font-size:1.25rem}
.site-screen strong>span{font-size:1rem}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.js .enter{opacity:1;transform:none}
.loader{display:none!important}
.door-transition{display:none!important}
.project:hover .monitor-screen{transform:none}
}
@media(forced-colors:active){.contact{background:Canvas}
.contact h2>span{color:CanvasText}
}