@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Manrope:wght@400;500;600&family=Playfair+Display:ital,wght@0,400;1,400&display=swap');
:root{--night:#071322;--champagne:#d1bc97;--text:#ece9e2;--muted:#a8b4c3;--line:#d1bc9733}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:35px}body{margin:0;background:var(--night);color:var(--text);font:16px/1.7 'DM Sans',sans-serif}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}h1,h2,h3,p{margin:0}a:focus-visible,button:focus-visible{outline:2px solid var(--champagne);outline-offset:6px}button,a{touch-action:manipulation}header{position:absolute;z-index:6;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:24px 5%;gap:25px}.brand img{width:132px;display:block}.mainnav{display:flex;gap:35px;font-size:14px}.mainnav a{padding:8px 0;border-bottom:1px solid transparent}.mainnav a:hover{border-color:var(--champagne)}.menutoggle{display:none}#journey{height:310svh;position:relative}.city-sticky{height:100svh;min-height:620px;position:sticky;top:0;overflow:hidden}#city,.fallback,.vignette{position:absolute;width:100%;height:100%;inset:0}#city{display:block;touch-action:pan-y;z-index:1}.fallback{object-fit:cover;z-index:2;pointer-events:none;will-change:opacity;opacity:1}.vignette{z-index:3;pointer-events:none;background:linear-gradient(180deg,#07132255,transparent 45%,#071322 99%)}.hero-logo{position:absolute;z-index:4;left:50%;top:23%;width:min(620px,60vw);margin-left:calc(min(620px,60vw)/-2);text-align:center;will-change:transform,opacity}.hero-logo img{display:block;width:100%;box-shadow:0 25px 100px #0004}.hero-logo p{font-size:12px;letter-spacing:.23em;color:var(--champagne);margin-top:25px}.chapter{position:absolute;z-index:4;left:6%;bottom:20%;opacity:0;pointer-events:none;text-shadow:0 4px 35px #000}.chapter h2{font-family:'Playfair Display',serif;font-weight:400;font-size:clamp(38px,4.7vw,74px);line-height:1.12}.scene-controls{position:absolute;z-index:5;left:5%;right:5%;bottom:27px;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:12px;color:var(--champagne)}.scene-controls a,.scene-controls button{font-size:12px;color:inherit;border:0;background:transparent;border-bottom:1px solid var(--line);padding:8px 0}.section{position:relative;z-index:2;padding:120px 8%;background:var(--night)}.eyebrow{font-size:12px;letter-spacing:.2em;color:var(--champagne);margin-bottom:28px}h2{font:400 clamp(42px,5.2vw,82px)/1.12 'Playfair Display',serif;letter-spacing:-.025em}h2 em{font-weight:400;color:var(--champagne)}.intro{padding-top:90px}.intro-columns{display:grid;grid-template-columns:1.1fr 1fr;gap:12%;margin-top:55px}.intro-columns>p{font-size:24px;line-height:1.6}.intro-columns>div>p{color:var(--muted)}.textlink{display:inline-block;font-size:14px;padding-bottom:8px;border-bottom:1px solid var(--champagne);color:var(--champagne);margin-top:25px}.projects{background:#0d1f32}.sectionhead{display:flex;align-items:end;justify-content:space-between;gap:45px}.sectionhead>p{max-width:320px;color:var(--muted)}.filters{display:flex;flex-wrap:wrap;gap:10px;margin:40px 0 45px}.filters button{padding:10px 22px;background:transparent;border:1px solid var(--line);color:var(--text);font-size:14px}.filters .selected{background:var(--champagne);color:var(--night)}.projectgrid{display:grid;grid-template-columns:1fr 1fr;gap:70px 50px}.project{padding:0;background:none;border:0;text-align:left;color:inherit}.project>img{width:100%;height:420px;object-fit:cover;filter:saturate(.7)}.project:nth-child(2){margin-top:120px}.projectmeta{padding-top:25px}.projectmeta>span:first-child{font-size:11px;letter-spacing:.1em;color:var(--muted)}.projectmeta h3{font:400 34px/1.2 'Playfair Display',serif;margin-top:13px}.projectmeta p{color:var(--muted);margin-top:17px}.projecttext{border-top:1px solid var(--line);padding-top:20px}.projecttext .projectmeta{padding-top:0}.approach{padding-bottom:70px}.discipline{display:grid;grid-template-columns:60px 1fr 1.2fr;gap:30px;align-items:center;border-top:1px solid var(--line);padding:45px 0}.discipline>span{font-size:13px;color:var(--champagne)}.discipline h2{font-size:45px}.discipline p{color:var(--muted)}.contact{background:#050d18;border-top:1px solid var(--line)}.contactgrid{display:flex;flex-wrap:wrap;gap:35px;align-items:center;margin-top:45px}.button{background:var(--champagne);color:var(--night);padding:18px 26px;display:inline-block}.phone{font-size:20px}address{font-style:normal;color:var(--muted);margin-left:auto}footer{padding:45px 8%;background:#050d18;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:35px;font-size:13px}footer img{width:140px}footer small{display:block;margin-top:10px;font-size:11px;color:var(--muted)}dialog{background:#0d1f32;color:var(--text);border:1px solid var(--line);width:min(95vw,1000px);padding:22px}dialog::backdrop{background:#010811eb}dialog img{width:100%;max-height:75vh;object-fit:contain}dialog p{margin-top:15px}.close{display:block;margin:0 0 15px auto;padding:8px 20px;background:transparent;border:1px solid var(--line);color:inherit}[hidden]{display:none!important}.no-webgl #journey{height:100svh}.no-webgl #city,.no-webgl #motion{display:none}.no-webgl .chapter{display:none}
@media(max-width:800px){header{padding:18px 6%;flex-wrap:wrap}.brand img{width:110px}.menutoggle{display:flex;align-items:center;gap:15px;color:var(--text);background:#071322bb;border:1px solid var(--line);padding:10px 15px}.menulines{width:18px;height:10px;border-top:1px solid;border-bottom:1px solid}.is-open .menulines{height:0;border-bottom:0}.mainnav{display:none;width:100%;padding:25px;background:#071322f5;border:1px solid var(--line)}.mainnav.open{display:flex;flex-direction:column;gap:14px}#journey{height:240svh}.hero-logo{top:28%;width:82vw;margin-left:-41vw}.hero-logo p{font-size:10px;letter-spacing:.1em;margin-top:18px}.city-sticky{min-height:600px}.scene-controls{flex-wrap:wrap;gap:6px 20px}.scene-controls>span{width:100%}.chapter{bottom:24%}.chapter h2{font-size:38px}.section{padding:75px 6%}.intro-columns{grid-template-columns:1fr;gap:25px;margin-top:35px}.intro-columns>p{font-size:21px}.sectionhead{flex-direction:column;align-items:start;gap:25px}.projectgrid{grid-template-columns:1fr;gap:50px}.project:nth-child(2){margin:0}.project>img{height:330px}.discipline{grid-template-columns:35px 1fr;gap:15px;padding:35px 0}.discipline p{grid-column:2}.discipline h2{font-size:38px}.contactgrid{align-items:flex-start;flex-direction:column;gap:25px}.button{font-size:14px;padding:16px}address{margin:0}footer{flex-direction:column;align-items:flex-start;padding:35px 6%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}#journey{height:100svh}.city-sticky{position:relative}.chapter{display:none}}

.hero-logo h1{background:transparent}.hero-logo img{filter:grayscale(1) invert(1);mix-blend-mode:screen;box-shadow:none}.hero-logo{mix-blend-mode:screen}.brand img,footer img{filter:grayscale(1) invert(1);mix-blend-mode:screen}

/* Preserve source logo geometry; remove white through alpha in the browser. */
.hero-logo{mix-blend-mode:normal}.hero-logo img,.brand img,footer img{filter:url(#transparent-logo);mix-blend-mode:normal;background:transparent;box-shadow:none}
/* Clip the raster's outer edge so the transparent footer mark has no frame. */
footer img{display:block;border:0;outline:0;background:transparent;box-shadow:none}
.hero-logo img[src$=".svg"],footer img[src$=".svg"]{filter:none;mix-blend-mode:normal}

/* Keep the original skyline visible if WebGL is unavailable. */
.no-webgl .fallback{opacity:1!important}.brand{background:transparent}

/* One logo travels from the hero into the fixed navigation. */
header{position:fixed;min-height:109px;transition:background .2s}
header.docked{background:#071322f5;border-bottom:1px solid var(--line)}
.brand-slot{display:block;width:132px;height:61px;flex-shrink:0}
.hero-logo{position:fixed;z-index:7;transform-origin:top left;will-change:transform;pointer-events:none}
.hero-logo h1 a{display:block;pointer-events:auto}
.hero-logo p{will-change:opacity;font-size:clamp(19px,2.2vw,28px);font-weight:600;line-height:1.5;letter-spacing:.07em;color:#eee9df;text-shadow:0 2px 12px #071322,0 0 30px #071322;margin-top:24px}
@media(max-width:800px){header{min-height:87px}.brand-slot{width:110px;height:51px}}
@media(prefers-reduced-motion:reduce){header{transition:none}}
#skyline-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;pointer-events:none}

/* Explicit motion choice overrides the initial reduced-motion layout. */
@media(prefers-reduced-motion:reduce){.motion-enabled #journey{height:310svh}.motion-enabled .city-sticky{position:sticky}.motion-enabled .chapter{display:block}}
@media(prefers-reduced-motion:reduce) and (max-width:700px){.motion-enabled #journey{height:240svh}}

/* A quiet opening, then navigation and the introduction emerge with the zoom. */
header{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s,background .25s}
header.revealed{opacity:1;visibility:visible;pointer-events:auto}
#skyline-video,.fallback{transform-origin:58% 48%;will-change:transform,opacity}
.vignette{background:linear-gradient(180deg,#07132222 0%,#07132266 30%,#071322e8 72%,#071322 100%)}
.intro-anchor{position:absolute;top:65%;left:0;scroll-margin-top:0}
.chapter{left:8%;right:8%;bottom:9%;max-width:1160px;pointer-events:auto;visibility:hidden;will-change:opacity,transform}
.chapter h2{font-size:clamp(32px,4.5vw,70px)}
.chapter .eyebrow{margin-bottom:18px}
.chapter .intro-columns{margin-top:28px;gap:7%}
.chapter .intro-columns>p{font-size:clamp(17px,1.8vw,24px);line-height:1.55}
.chapter .intro-columns>div>p{font-size:clamp(15px,1.2vw,18px);color:var(--text);line-height:1.6}
.chapter .textlink{margin-top:18px}
.scene-controls{pointer-events:none}
@media(max-width:800px){.chapter{left:6%;right:6%;bottom:6%}.chapter .intro-columns{grid-template-columns:1fr;gap:16px;margin-top:20px}.chapter .eyebrow{font-size:10px;margin-bottom:12px}.chapter h2{font-size:clamp(30px,7vw,44px)}.chapter .intro-columns>p{font-size:17px}.chapter .intro-columns>div>p{font-size:15px}.chapter .textlink{font-size:13px;margin-top:12px}}
@media(prefers-reduced-motion:reduce){#journey{height:auto;min-height:100svh}.city-sticky{height:auto;min-height:100svh;padding:100svh 6% 50px}.chapter{display:block;position:relative;left:auto;right:auto;bottom:auto;opacity:1;visibility:visible;transform:none!important}.intro-anchor{top:100svh}#skyline-video,.fallback{transform:none!important}.fallback{max-height:100svh}.scene-controls{top:85svh;bottom:auto}}