:root{--paper:#ffffff;--ink:#090909;--olive:#9d9982;--rule:#9c9b95}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}a:focus-visible{outline:2px solid var(--ink);outline-offset:6px}.page{max-width:1800px;margin:0 auto;padding:0 2.3%}header{display:flex;align-items:center;justify-content:space-between;min-height:118px;padding:10px 8px 13px}.logo{display:block;line-height:0}.logo img{width:260px;height:auto;object-fit:contain;mix-blend-mode:multiply}nav{display:flex;gap:34px;align-items:center;font-size:14px}nav a:not(.nav-arrow){position:relative}nav a:not(.nav-arrow):after{content:'';position:absolute;bottom:-5px;left:0;width:0;height:1px;background:currentColor;transition:width .2s}nav a:hover:after{width:100%}.nav-arrow{font-size:29px;line-height:1;margin-left:4px;transition:transform .2s}.nav-arrow:hover{transform:translateX(4px)}.intro{border-block:1px solid var(--rule);margin:0 8px;min-height:53px;display:flex;align-items:center;justify-content:space-between;gap:20px}.intro h1{font-size:18px;font-weight:400;margin:0}.intro span{font-size:12px}.hero{position:relative;margin-top:31px;background:var(--paper);height:clamp(360px,35.2vw,625px);padding:20px 28px}.hero .studio-statement,.hero h2{font-size:clamp(27px,2.35vw,42px);line-height:1.03;font-weight:800;letter-spacing:-.7px;margin:0}.hero h2{position:absolute;right:28px;bottom:30px;text-align:right}.section-top{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:23px 0 11px 8px}.section-top h2,.section-top p{font-family:inherit;font-weight:400;font-size:14px;margin:0}.work-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 20px}.project{background:var(--olive);aspect-ratio:1.064;position:relative;overflow:hidden}.project span{position:absolute;left:16px;bottom:15px;font-family:'Courier New',monospace;font-size:10px;opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s}.project:hover span{opacity:.8;transform:none}.contact{padding:31px 10px 100px;min-height:470px}.contact h2{font-size:clamp(48px,4.3vw,78px);letter-spacing:-2px;line-height:1.1;margin:0;font-weight:800}.contact-details{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:75px}.contact-details p{font-size:clamp(24px,3vw,44px);line-height:1.1;letter-spacing:-1px;margin:0}.contact-details address{font-style:normal;font-size:16px;line-height:1.5;justify-self:end;min-width:230px}.contact-details address a{display:inline-block;margin-top:20px;border-bottom:1px solid var(--ink);padding-bottom:4px}footer{border-top:1px solid var(--rule);padding:20px 8px 26px;display:flex;justify-content:space-between;gap:20px;font-size:11px}.skip{position:absolute;top:-80px;left:16px;z-index:10;padding:15px;background:#fff}.skip:focus{top:10px}::selection{color:var(--paper);background:var(--ink)}@media(min-width:1500px){header{min-height:142px}.logo img{width:300px;height:auto}.intro{min-height:62px}.section-top{padding-top:28px}}@media(max-width:700px){.page{padding:0 18px}header{min-height:100px;padding:10px 0}.logo img{width:180px;height:auto}nav{gap:18px;font-size:12px}.nav-arrow{display:none}.intro{margin:0;min-height:70px;display:block;padding:13px 0}.intro h1{font-size:16px;margin-bottom:8px}.intro span{font-size:10px}.hero{margin-top:20px;height:390px;padding:20px}.hero .studio-statement,.hero h2{font-size:28px}.hero h2{right:20px;bottom:23px}.work-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.section-top{padding-left:0}.contact{padding:30px 0 70px;min-height:400px}.contact-details{margin-top:45px;grid-template-columns:1fr;gap:35px}.contact-details address{justify-self:start;font-size:14px}footer{padding:18px 0;font-size:10px}footer>span:nth-child(2){display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:after{transition:none!important}}

@media(max-width:420px){.logo img{width:140px}nav{gap:12px}}

.hero{display:flex;flex-direction:column;gap:48px;height:auto;min-height:clamp(360px,35.2vw,625px);padding-bottom:30px}.hero .studio-statement{max-width:28em;line-height:1.12;text-wrap:pretty}.hero h2{position:static;align-self:flex-end;margin-top:auto}
@media(max-width:700px){.hero{min-height:390px;padding-bottom:23px}.hero .studio-statement{font-size:clamp(20px,4.4vw,28px);line-height:1.15;letter-spacing:-.4px}}

.hero-symbol{display:block;align-self:flex-start;margin-top:0;width:clamp(190px,20vw,260px);height:auto;mix-blend-mode:multiply;flex-shrink:0;transform-origin:center;animation:vertigo-rotate 18s linear infinite}
@keyframes vertigo-rotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@media(max-width:700px){.hero-symbol{width:160px}}
@media(prefers-reduced-motion:reduce){.hero-symbol{animation:none}}

.intro .service-list{display:block;flex-shrink:0;line-height:1.4;text-align:right;padding:10px 0;white-space:nowrap}
@media(max-width:700px){.intro .service-list{text-align:left;padding:4px 0 0}}

.intro{flex-wrap:wrap;row-gap:0}.intro .service-list{margin-left:auto}
@media(max-width:700px){.intro .service-list{margin-left:0;font-size:clamp(7.5px,2.3vw,10px)}}

.project-artwork{background:transparent}.project-artwork img{display:block;width:100%;height:100%;object-fit:contain}

/* Contact form */
body:has(#contact-dialog[open]){overflow:hidden}
#contact-dialog{border:1px solid var(--ink);background:var(--paper);color:var(--ink);padding:32px;width:min(620px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow-y:auto}
#contact-dialog::backdrop{background:rgba(9,9,9,.5);backdrop-filter:blur(4px)}
.form-heading{display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:1px}
.form-close{font:32px/1 Arial,sans-serif;border:0;background:none;color:inherit;padding:2px 4px;cursor:pointer}
#form-title{font-size:clamp(36px,7vw,56px);line-height:1.05;letter-spacing:-2px;margin:28px 0 12px;font-weight:800}
#form-intro{font-size:16px;margin:0 0 32px}
#contact-dialog label{display:block;font-size:13px}
.form-fields{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:26px}
#contact-dialog input:not([type=hidden]),#contact-dialog textarea{display:block;width:100%;border:0;border-bottom:1px solid var(--rule);border-radius:0;background:transparent;color:var(--ink);font:16px/1.5 Arial,Helvetica,sans-serif;padding:10px 0;outline-offset:4px}
#contact-dialog textarea{resize:vertical;min-height:110px}
#contact-dialog input:focus-visible,#contact-dialog textarea:focus-visible,#contact-dialog button:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.form-note{font-size:11px;line-height:1.6;color:#555;margin:18px 0 24px}.form-note a,.form-direct a{text-decoration:underline;text-underline-offset:3px}
.form-send{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;padding:18px 20px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);font:15px Arial,Helvetica,sans-serif;cursor:pointer;transition:background .2s,color .2s}.form-send:hover{background:var(--paper);color:var(--ink)}.form-send span{font-size:22px}
.form-direct{font-size:12px;line-height:1.6;margin:18px 0 0}
@media(max-width:480px){#contact-dialog{padding:24px}.form-fields{grid-template-columns:1fr;gap:22px}#form-title{margin-top:20px}}