:root{--bg:#171816;--paper:#f0eee8;--muted:#abaea4;--line:#ffffff26;--accent:#c8c8af}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:92px}body{margin:0;background:var(--bg);color:var(--paper);font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.65}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:6px}header{height:90px;padding:0 4%;display:flex;align-items:center;justify-content:space-between;background:#171816f5;position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line)}.logo{width:178px;height:auto;filter:invert(1);mix-blend-mode:screen;display:block}nav{display:flex;gap:34px;font-size:14px}nav a:hover,.text-link:hover{color:var(--accent)}.languages{display:flex;gap:10px;align-items:center;font-size:13px}.languages button{border:0;background:transparent;padding:9px 2px;color:#92938c}.languages button[aria-pressed=true]{color:white;border-bottom:1px solid}.hero{min-height:690px;height:calc(100svh - 90px);max-height:1000px;position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;padding:35px 4% 28px}.hero-image,.hero-shade{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}.hero-image{object-position:50% 55%}.hero-shade{background:linear-gradient(180deg,#0005,#0001 25%,#0008 68%,#000b);z-index:-1}.hero-top,.hero-bottom{display:flex;justify-content:space-between;gap:20px;font-size:12px;letter-spacing:2px}.hero-content{margin-top:auto;padding:100px 0 52px;max-width:1000px}.eyebrow{font-size:12px;font-weight:400;letter-spacing:2.3px;text-transform:uppercase;margin:0 0 25px;color:var(--muted)}.hero .eyebrow{color:#f0eee8}h1,h2,p{margin-top:0}h1{font-size:clamp(42px,5.4vw,82px);font-weight:400;line-height:1.13;letter-spacing:-2.5px;margin-bottom:30px}h1 i,h2 em{font-family:Georgia,'Times New Roman',serif;font-weight:400}h2{font-size:clamp(35px,4.3vw,62px);font-weight:400;line-height:1.16;letter-spacing:-1.8px;margin-bottom:26px}.round-link{display:inline-flex;align-items:center;gap:28px;font-size:14px}.circle{display:grid;place-items:center;border:1px solid #fff9;border-radius:50%;width:44px;height:44px;font-size:23px;transition:.2s}.round-link:hover .circle{background:var(--paper);color:var(--bg)}.section{padding:110px 7%;scroll-margin-top:0}.intro{display:grid;grid-template-columns:1fr 2fr;gap:40px;border-bottom:1px solid var(--line)}.intro>div{max-width:800px}.intro p:not(.eyebrow){max-width:650px;color:var(--muted);font-size:18px}.intro h2{font-size:clamp(36px,4.4vw,66px)}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:48px;gap:25px}.section-heading h2{margin:0}.muted{color:var(--muted);font-size:14px}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:65px 30px}.project:nth-child(even){margin-top:90px}.project button{display:block;background:none;padding:0;border:0;text-align:left;width:100%}.project-image{overflow:hidden;background:#242521;position:relative}.project-image img{width:100%;height:440px;object-fit:cover;display:block;transition:transform .7s}.project button:hover img{transform:scale(1.035)}.project-image .view{position:absolute;bottom:20px;right:20px;width:42px;height:42px;display:grid;place-items:center;background:var(--paper);color:var(--bg);border-radius:50%;font-size:23px}.project-meta{display:flex;justify-content:space-between;margin-top:20px;gap:15px}.project h3{font-size:23px;font-weight:400;letter-spacing:-.4px;margin:0 0 5px}.project small{font-size:13px;color:var(--muted)}.project-number{font-size:13px;color:var(--muted);padding-top:5px}.project.board img{object-fit:contain;height:335px;background:#080808}.about{display:grid;grid-template-columns:1fr 1.15fr;gap:10%;background:#eae9e2;color:#22241f;align-items:center}.portrait img{width:100%;max-height:650px;object-fit:cover;display:block;filter:saturate(.65)}.portrait span{display:block;border-top:1px solid #2224;padding-top:16px;margin-top:18px;font-size:12px;letter-spacing:2px}.about .eyebrow{color:#65695c}.about p{color:#55594e}.about .role{color:#262920;font-size:15px;margin-bottom:28px}.about-copy p:not(.eyebrow):not(.role){font-size:16px}.text-link{display:inline-block;border-bottom:1px solid;padding-bottom:7px;margin-top:15px;font-size:14px}.services{display:grid;grid-template-columns:1fr 1.3fr;gap:10%}.services>div>p:not(.eyebrow){color:var(--muted);max-width:380px}.service{border-top:1px solid var(--line);padding:25px 0;display:grid;grid-template-columns:35px 1fr;gap:20px}.service>span{font-size:12px;color:var(--muted);padding-top:6px}.service h3{font-size:25px;font-weight:400;margin:0 0 10px}.service p{font-size:15px;color:var(--muted);margin-bottom:0}.contact{border-top:1px solid var(--line);background:#20221d}.contact h2{font-size:clamp(42px,6.5vw,94px)}.email{display:inline-flex;align-items:center;gap:40px;border-bottom:1px solid #8d9380;padding-bottom:12px;font-size:clamp(16px,2.3vw,32px);max-width:100%;overflow-wrap:anywhere}.contact-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px;margin-top:70px;font-size:15px}.contact-grid .eyebrow{margin-bottom:15px}.contact-grid a{display:block}.contact-grid p{margin-bottom:0}footer{padding:35px 4%;display:flex;align-items:center;justify-content:space-between;gap:25px;font-size:12px;color:var(--muted)}footer .logo{width:140px}dialog{max-width:1150px;width:94vw;max-height:92svh;border:1px solid #53574a;padding:35px;background:#171816;color:var(--paper)}dialog::backdrop{background:#000d;backdrop-filter:blur(8px)}.gallery-bar{display:flex;justify-content:space-between;align-items:start;gap:20px}.gallery-bar h2{font-size:32px}.gallery-bar .eyebrow{margin-bottom:10px}.gallery-bar button{background:none;border:1px solid var(--line);font-size:30px;width:44px;height:44px;line-height:1}.gallery-bar button:hover{background:#ffffff20}#gallery-images{display:grid;gap:20px}#gallery-images img{width:100%;height:auto;display:block}.skip{position:fixed;top:-100px;z-index:100;background:white;color:black;padding:12px}.skip:focus{top:0}@media(min-width:1600px){.section{padding-left:max(7%,calc((100vw - 1400px)/2));padding-right:max(7%,calc((100vw - 1400px)/2))}}@media(max-width:800px){header{height:auto;min-height:80px;padding:18px 5%;flex-wrap:wrap;gap:15px}.logo{width:145px}nav{order:3;width:100%;justify-content:space-between;gap:12px;font-size:13px}.hero{min-height:610px;height:calc(90svh - 100px);padding:26px 6%}.hero-top,.hero-bottom{font-size:10px;letter-spacing:1px}.hero-content{padding-bottom:40px}.hero h1{letter-spacing:-1.5px}.section{padding:70px 6%}.intro,.about,.services{grid-template-columns:1fr;gap:35px}.section-heading{align-items:start;flex-direction:column;margin-bottom:30px}.project-grid{gap:35px 18px}.project-image img{height:270px}.project.board img{height:220px}.project:nth-child(even){margin-top:45px}.project h3{font-size:19px}.project-meta{gap:8px}.project small{font-size:12px}.portrait{max-width:420px}.portrait img{max-height:480px}.contact-grid{grid-template-columns:1fr 1fr;gap:30px;margin-top:45px}footer{flex-wrap:wrap;padding:30px 6%}.email{gap:15px}dialog{padding:20px}}@media(max-width:480px){.project-grid{grid-template-columns:1fr}.project:nth-child(even){margin-top:0}.project-image img{height:340px}.project.board img{height:240px}.hero-top span:last-child{max-width:125px;text-align:right}.contact-grid{grid-template-columns:1fr}.hero-bottom{font-size:9px}.hero h1{font-size:42px}.hero{min-height:590px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}
/* Phase 1: allow translated text to wrap without widening grid tracks. */
.intro>*,.project-grid>*,.about>*,.services>*,.contact-grid>*,.project-meta>*,.gallery-bar>*{min-width:0}
.project h3,.service h3,.gallery-bar h2{overflow-wrap:anywhere}
.about a:focus-visible{outline-color:#22241f}
.gallery-bar button,.circle{flex-shrink:0}
/* Immersive project presentation — controls sit outside architectural imagery. */
.menu-toggle{display:none}
#gallery{width:min(1280px,96vw);max-width:1280px;max-height:94svh;padding:0;overscroll-behavior:contain}
.gallery-toolbar{position:sticky;top:0;z-index:2;background:#171816f7;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:12px 28px}
.gallery-brand{font-size:14px;letter-spacing:3px}
.gallery-toolbar button,.image-controls button{background:none;border:1px solid var(--line);min-width:46px;min-height:46px;font-size:24px;line-height:1}
.gallery-toolbar button:hover,.image-controls button:hover{background:#ffffff15}
.image-controls button:disabled{opacity:.3;cursor:default}
.case-study{padding:0 28px 40px}
#image-stage{margin:0 -28px;background:#0f100e;touch-action:pan-y pinch-zoom}
#active-image{display:block;width:100%;height:auto;max-height:76svh;object-fit:contain}
.image-controls{display:flex;align-items:center;gap:18px;padding:18px 0;border-bottom:1px solid var(--line);font-size:14px;flex-wrap:wrap}
#image-counter{min-width:110px;text-align:center;font-variant-numeric:tabular-nums}
#inspect-image{margin-left:auto;border-bottom:1px solid #8d9380;padding:10px 0}
.case-heading{padding:65px 3% 35px}
.case-heading h2{font-size:clamp(36px,5vw,72px)}
#project-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:24px}#project-facts[hidden]{display:none}
#project-facts dt{color:var(--muted);font-size:13px}#project-facts dd{margin:8px 0 0}
#project-concept{max-width:760px;color:var(--muted)}
#gallery-images{gap:40px}
#gallery-images figure{margin:0}
#gallery-images img{width:100%;height:auto;object-fit:contain}
#gallery-images figcaption{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:12px;font-size:13px;color:var(--muted)}
#gallery-images figcaption a{padding:10px 0;border-bottom:1px solid var(--line)}
.next-project{display:block;width:100%;padding:35px 0;margin-top:50px;text-align:left;border:0;border-top:1px solid var(--line);background:none;font-size:clamp(23px,3vw,40px);font-family:Georgia,serif;overflow-wrap:anywhere}
@media(prefers-reduced-motion:no-preference){#gallery[open]{animation:case-open .22s ease-out}.section-reveal{opacity:.45;transform:translateY(10px);transition:opacity .65s ease,transform .65s ease}.section-reveal.revealed{opacity:1;transform:none}}
@keyframes case-open{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.section-reveal{opacity:1;transform:none}#gallery[open]{animation:none}}
@media(max-width:600px){header{gap:12px;min-height:82px;position:sticky}.logo{width:132px}.menu-toggle{display:block;margin-left:auto;font-size:14px;background:none;border:1px solid var(--line);padding:9px 12px;min-height:44px}.languages{gap:8px}.languages button{min-height:44px;min-width:44px}#main-nav{display:none;width:100%;order:4;flex-direction:column;gap:0;padding:12px 0 0;border-top:1px solid var(--line)}#main-nav.menu-open{display:flex}#main-nav a{padding:12px 4px;font-size:16px}#gallery{width:100%;max-width:100%;max-height:100svh;height:100svh;border:0;margin:0}.gallery-toolbar{padding:10px 18px}.case-study{padding:0 18px 25px}#image-stage{margin:0 -18px}#active-image{max-height:none}.image-controls{gap:12px}#inspect-image{width:100%;margin:0;text-align:right;font-size:13px}.case-heading{padding:36px 0 24px}.case-heading h2{font-size:38px}.case-heading .eyebrow{font-size:11px}#gallery-images{gap:28px}#gallery-images figcaption{font-size:12px}.next-project{margin-top:30px}}

.languages button{min-height:44px;min-width:44px}

/* Opening veil — short, skippable, no library */
#intro-veil{position:fixed;inset:0;z-index:80;background:#171816;display:grid;place-items:center;color:var(--paper)}
#intro-veil.is-leaving{animation:veil-out .7s ease forwards}
#intro-veil.is-gone{display:none}
#intro-skip{position:absolute;top:22px;right:4%;background:none;border:0;color:#abaea4;letter-spacing:2px;font-size:12px;text-transform:uppercase;min-height:44px}
.intro-mark{text-align:center}
.intro-mark img{width:min(280px,62vw);filter:invert(1);mix-blend-mode:screen;opacity:0;animation:mark-in 1s ease .15s forwards}
.intro-mark p{margin:18px 0 0;letter-spacing:3px;font-size:11px;color:#abaea4;opacity:0;animation:mark-in .8s ease .45s forwards}
@keyframes mark-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes veil-out{to{opacity:0;visibility:hidden}}
@media(prefers-reduced-motion:reduce){
  .intro-mark img,.intro-mark p{animation:none;opacity:1}
  #intro-veil.is-leaving{animation:none;opacity:0}
}