:root{color-scheme:dark;--ink:#141311;--paper:#eee7da;--brass:#e4ba92;--line:#876c55;--wood:#28211b}
*{box-sizing:border-box}
body{margin:0;background:var(--ink);color:var(--paper);font:16px/1.6 system-ui,sans-serif}
a{color:inherit;text-underline-offset:.24em}a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid #ffda9e;outline-offset:4px}
img{display:block;max-width:100%;object-fit:cover}
header{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.45rem clamp(1rem,4vw,4rem);background:#141311;border-bottom:1px solid #5f4a3b}
header nav{display:flex;flex-wrap:wrap;gap:.3rem 1rem}
header a{min-height:44px;display:inline-flex;align-items:center;text-decoration:none}
.brand{font-weight:750;gap:.35em}
.brand span{font-weight:400}
.language,.eyebrow{color:var(--brass);font-size:.75rem;font-weight:700;letter-spacing:.13em}
.skip{position:fixed;z-index:9;left:1rem;top:-7rem;background:var(--paper);color:var(--ink);padding:1rem}.skip:focus{top:1rem}
h1,h2,h3,p{margin:0 0 1rem}
h1,h2{font-family:Georgia,serif;font-weight:400;line-height:1.02;letter-spacing:-.04em;text-wrap:balance}
h1{font-size:clamp(2.45rem,7.5vw,8rem)}
h2{font-size:clamp(1.9rem,4vw,4.5rem)}
h3{font-size:1.08rem}
p{max-width:66ch}
.button,button{display:inline-flex;align-items:center;min-height:44px;padding:.6rem 1rem;border:1px solid var(--brass);background:var(--brass);color:#17120f;font:inherit;font-weight:650;text-decoration:none;cursor:pointer}
button[hidden]{display:none}
.text-link{display:inline-flex;align-items:center;min-height:44px;color:var(--brass)}
.stage{position:relative;isolation:isolate;min-height:calc(100svh - 4rem);display:grid;align-items:center;overflow:hidden}
.open-room,.door{position:absolute;inset:0;background-size:cover;background-position:center;z-index:-2}
.open-room{background-image:url(studio-at.jpg)}
.door{display:none;background-image:url(door-panel.jpg);z-index:-1}
.threshold{padding:clamp(2rem,7vw,8rem);background:linear-gradient(90deg,#15110fee,transparent)}
.room{padding:clamp(2rem,7vw,8rem);display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(1rem,4vw,4rem);min-height:70svh;background:#24201b linear-gradient(100deg,#141311f5 4%,#141311c9 52%,#14131118 100%)}
.work,.service{background-image:linear-gradient(100deg,#141311ed,#1413118c 66%,#14131138),url(studio-at.jpg);background-size:cover;background-position:center}
.contact{background-image:linear-gradient(90deg,#141311ed,#1413119c 55%,#14131130),url(kontakt-at.jpg);background-position:center;background-size:cover}
.contact figure,.portrait{justify-self:end;margin:0}
figcaption{font-size:.75rem;margin-top:.5rem}
.examples,.workpiece{min-width:0}
details{border:1px solid #80674f;background:#211c18}
details+details{margin-top:.4rem}
summary{display:list-item;padding:.7rem 1rem;cursor:pointer;min-height:44px;font-weight:650}
details>p{padding:0 1rem}
details .workpiece{margin:.5rem}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;padding:.65rem}
.pair section{background:#181512;padding:.8rem;min-width:0}
.showcase,.intro{padding:clamp(2.5rem,7vw,8rem);scroll-margin-top:6rem}
.showcase{background:linear-gradient(180deg,#171310,#2a211a 63%,#181411 64%);border-top:1px solid var(--line)}
.bench{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,3vw,3rem);margin-block:2rem}
.bench article{border-top:1px solid var(--line);padding-top:1rem}
.devices{display:flex;gap:.55rem;align-items:end;padding:.7rem 0;border-bottom:4px solid #947253}
.device{background:#121110;border:2px solid #8e8375;border-radius:.5rem;padding:.36rem;flex:2;min-width:0}
.device.phone{flex:1;min-width:6rem}
.screen{padding:clamp(.35rem,1.4vw,1rem);background:#e2dac8;color:#221a15;min-height:7rem;display:grid;gap:.3rem}
.screen span,.screen small{font-size:.7rem}
.s2{grid-template-columns:1fr 1.35fr}
.s2 .room-copy h1{margin-bottom:1.75rem}
.s3{background-position:left center}
.s3 .examples{max-width:38rem}
.s4{grid-template-columns:1fr 1.2fr;background-position:right}
.sample-form{border-left:2px solid var(--line);padding:1rem;margin-block:2rem;max-width:36rem}
.sample-form label{display:grid;gap:.25rem;margin-top:.6rem}
.sample-form input{min-height:44px;background:#241d17;border:1px solid var(--line);color:inherit;padding:.5rem}
.crop{height:clamp(9rem,20vw,18rem);background:url(studio-at.jpg) 20% 70%/160%;margin-bottom:1rem}
.c1{background-position:48% 77%}.c2{background-position:83% 72%}
.process h2{font-size:clamp(1.5rem,2.5vw,3rem)}
.legal{min-height:60vh}.legal dd{margin:0 0 1rem}.legal dt{color:var(--brass)}
footer{border-top:1px solid var(--line);padding:clamp(2rem,5vw,5rem);display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem;background:linear-gradient(160deg,#282019,#151311 72%)}
footer nav{display:grid;align-content:start}footer a{display:inline-flex;align-items:center;min-height:44px;overflow-wrap:anywhere}
@media(min-width:768px) and (prefers-reduced-motion:no-preference){
 .arrival.motion{height:220vh}.motion .stage{position:sticky;top:0;height:100vh}
 .motion .door{display:block;transform:translateX(var(--door,0%))}
 .motion .open-room{transform:scale(var(--zoom,1))}
}
@media(max-width:767px){
 header{flex-wrap:wrap;gap:0}header nav{gap:.15rem .75rem;font-size:.85rem}
 .stage{min-height:0;display:flex;flex-direction:column-reverse;align-items:stretch}
 .threshold{padding:2rem 1.2rem;background:#181512}
 .open-room{position:relative;height:52vw;min-height:12rem;z-index:0}
 .room,.s2,.s4,.bench,footer,.pair{grid-template-columns:minmax(0,1fr)}
 .room{min-height:0;padding:2.5rem 1.2rem;background-position:64%}
 .room.contact,.room.work,.room.service{background-image:linear-gradient(90deg,#171310f2,#171310c9),url(studio-at.jpg)}
 .room.contact{background-image:linear-gradient(90deg,#171310ed,#17131099),url(kontakt-at.jpg)}
 .devices{display:grid}.device.phone{order:-1;max-width:12rem}
 .contact figure,.portrait{justify-self:start}
}

/* Shade the entire scene so the title never sits on a visible overlay edge. */
.stage::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,#14110dde 0%,#14110d70 46%,transparent 78%)}
.threshold{position:relative;z-index:1;background:none}
@media(max-width:767px){
 .stage::before{display:none}
 .threshold{background:#181512}
}

.service{background:#211b16;min-height:0}
.service-image{min-width:0}
.work-photo{display:block;width:100%;height:auto;border:1px solid #6e5745}
.bench .work-photo{margin:1rem 0 .5rem}
.example-section{background:linear-gradient(145deg,#2b221b,#181512 70%);border-block:1px solid #66513e}
.example-section .workpiece{max-width:58rem}
.service-scope{padding-top:clamp(2rem,5vw,5rem)}
@media(max-width:767px){.room.service{background:#211b16}}

header .services-menu{position:relative;border:0;background:transparent;margin:0}
.services-menu>summary{padding:.45rem 0;font-weight:400}
.services-menu>div{position:absolute;top:100%;left:0;display:grid;min-width:min(14rem,80vw);padding:.45rem .85rem;background:#211b16;border:1px solid #876c55;box-shadow:0 .7rem 2rem #0008}
.services-menu>div a{border-bottom:1px solid #5f4a3b}
.services-menu>div a:last-child{border-bottom:0}
.bench article p{margin-top:.9rem}
.service-image{margin:0}

@media(min-width:768px) and (prefers-reduced-motion:no-preference){
 .motion:not(.room-ready) .open-room{background-image:none}
}

@media(min-width:768px) and (prefers-reduced-motion:no-preference){
 .open-room{background-image:none}
 .room-ready .open-room{background-image:url(studio-at.jpg)}
}
body:has(.arrival) .work:not(.room-ready),
body:has(.arrival) .contact:not(.room-ready){background-image:none}

header .language{
  min-width:44px;
  justify-content:center;
}
main a[href^="mailto:"],
main a[href^="tel:"]{
  display:inline-flex;
  align-items:center;
  min-width:44px;
  min-height:44px;
}

.doorway{display:none}
.motion .doorway{display:block;position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.motion .door{inset:2.1% 3% 0;background-size:cover;background-position:center}
.door-frame{position:absolute;inset:0;border-top:clamp(12px,2.1vh,24px) solid #241a14;border-inline:clamp(12px,3vw,55px) solid #241a14;box-shadow:inset 0 2px 4px #000b}
.door-frame::after{content:"";position:absolute;inset:0;box-shadow:inset 4px 0 9px #0009,inset -4px 0 9px #0009}
.showcase{scroll-margin-top:var(--header-height,60px)}
.contact figure{position:relative;grid-column:1;justify-self:start;width:clamp(8.25rem,15vw,10rem);overflow:hidden}
.contact figure img{width:100%;height:auto}
.contact figure figcaption{margin-top:.5rem;color:#fff;font-size:.83rem;font-weight:650;text-align:left}
.contact .phone-link{margin:.5rem 0 0}
.contact .copy-link{background:transparent;color:var(--brass);border:0;text-decoration:underline;text-underline-offset:.24em;padding:.25rem 0}
footer{background:linear-gradient(160deg,#282019,#151311 72%);gap:clamp(1.4rem,4vw,4rem)}
footer strong{font:400 clamp(1.4rem,2.6vw,2.4rem)/1.2 Georgia,serif}
footer nav{border-top:1px solid var(--line);padding-top:.65rem}
footer nav a{text-decoration:none}
footer nav a:hover,footer nav a:focus-visible{text-decoration:underline}
.footer-label{color:var(--brass);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
@media(min-width:768px){
 .contact{grid-template-columns:minmax(0,1.05fr) 1fr;align-content:center;row-gap:1.3rem}
 .contact .room-copy{grid-column:1}
 .showcase{padding-top:clamp(1.4rem,3vw,3rem)}
}
@media(max-width:767px){.showcase{padding-top:1.65rem}}

:root{--studio-type:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body,h1,h2,footer strong{font-family:var(--studio-type)}
h1,h2{font-weight:640;letter-spacing:-.055em}
.brand,.brand span,footer strong{font-weight:700;letter-spacing:-.035em}
header{padding-block:.55rem;background:#151310;border-color:#503e30}
header nav{gap:.25rem clamp(.65rem,2.5vw,2rem)}
header nav a,header summary{font-size:.82rem;letter-spacing:.045em}
header nav a:hover,header summary:hover{color:var(--brass)}
.services-menu>summary{list-style:none;display:flex;align-items:center;gap:.6em}
.services-menu>summary::-webkit-details-marker{display:none}
.services-menu>summary::after{content:"";width:.34rem;height:.34rem;border-right:1px solid var(--brass);border-bottom:1px solid var(--brass);transform:rotate(45deg);margin-top:-.2rem}
.services-menu[open]>summary::after{transform:rotate(225deg);margin-top:.18rem}
.services-menu>div{padding:.6rem 1rem;border-color:#71573e}
footer strong{font-size:clamp(1.2rem,2.3vw,2rem)}
footer nav a{font-size:.94rem}
footer nav a:hover{color:var(--brass)}
.service{padding:clamp(1.8rem,4vw,4rem);gap:clamp(1.25rem,5vw,5rem)}
.service h1{font-size:clamp(2.2rem,5vw,5.1rem);max-width:16ch;margin-bottom:0}
.work-story{min-width:0}
.work-story .eyebrow{margin-top:1rem}
.web-review{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(1.2rem,4vw,4rem);align-items:center}
.web-review h3{font-size:clamp(1.3rem,2.5vw,2rem);line-height:1.15}
.project-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;padding:.75rem 1rem;border-bottom:1px solid var(--line);margin-bottom:.75rem}
.project-bar span{color:var(--brass)}
.workflow{padding:0;list-style:none;counter-reset:step;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,3vw,3rem);margin:2rem 0}
.workflow li{border-top:1px solid var(--line);padding-top:1rem}
.workflow li::before{counter-increment:step;content:"0" counter(step);display:block;color:var(--brass);font-size:.75rem;margin-bottom:.5rem}
.workflow p{margin-top:.5rem}
@media(min-width:768px) and (prefers-reduced-motion:no-preference){
 .motion .stage{top:var(--header-height,60px);height:calc(100vh - var(--header-height,60px));min-height:0}
 .arrival.motion{height:calc(175vh - var(--header-height,60px))}
}
@media(max-width:767px){
 .web-review,.workflow{grid-template-columns:minmax(0,1fr)}
 header nav{gap:.15rem .75rem}
}

.brand img{width:1.45em;height:1.45em;object-fit:contain;flex:none}


.studio-intro{min-height:calc(100svh - var(--header-height,60px));padding-block:clamp(1.5rem,5svh,4rem);background-position:center 58%}
.studio-intro h1{font-size:clamp(2.45rem,min(7.5vw,12svh),8rem)}
.studio-process{padding-bottom:clamp(1rem,2vw,2rem)}
.studio-process .process{margin-bottom:0}
.studio-process + .contact{min-height:0;padding-top:clamp(2rem,4vw,4rem)}
.legal{font-weight:650}
.studio-photo{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;margin-bottom:1rem}
footer{grid-template-columns:minmax(0,1fr) auto;align-items:start}
.footer-links{display:flex;flex-wrap:wrap;gap:0 1.5rem}
.footer-links a{font-weight:700}
@media(max-width:767px){
 .studio-intro{background-position:center 60%}
 footer{grid-template-columns:minmax(0,1fr)}
}
.studio-intro .room-copy{grid-column:1/-1;max-width:38rem}