*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:#141414;font-family:Arial,Helvetica,sans-serif;font-size:16px}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:2px solid #333;outline-offset:4px}.skip{position:fixed;top:-100px;background:white;padding:15px;z-index:100}.skip:focus{top:0}header{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px;padding:10px;position:sticky;top:0;z-index:10;background:#fffffff0;backdrop-filter:blur(12px)}.pill{border:0;background:#f5f5f5;border-radius:30px;min-height:36px;padding:8px 20px;font-size:14px;display:flex;align-items:center;justify-content:space-between}.identity strong{letter-spacing:.14em;font-weight:400;font-size:15px}.brand-title{letter-spacing:.14em;font-weight:400;font-size:15px;color:#000!important;opacity:1}.identity span{font-size:13px}.nav span{color:#969696}.nav:hover,.nav[aria-expanded=true]{background:#e8e8e8}.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:38px 10px 10px}.tile{display:block;position:relative;overflow:hidden;aspect-ratio: .54;border:0;border-radius:clamp(32px,5.5vw,90px);background:#eee;padding:0;text-align:left;isolation:isolate}.tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .5s}.tile:hover img,.tile:focus-visible img{transform:scale(1.045);filter:brightness(.75)}.caption{position:absolute;bottom:0;left:0;right:0;padding:60px 28px 36px;background:linear-gradient(transparent,#0009);color:white;opacity:0;transform:translateY(8px);transition:.3s}.tile:hover .caption,.tile:focus-visible .caption{opacity:1;transform:none}.caption strong{display:block;font-size:24px;line-height:1.1;font-weight:400;margin-bottom:10px}.caption small{font-size:13px}.panel{margin:0 10px;background:#f5f5f5;border-radius:24px;padding:30px}.panel[hidden]{display:none}#about:not([hidden]){display:grid;grid-template-columns:1fr 2fr 1fr 1fr;gap:45px}h2{font-weight:400}#about h2{font-size:14px;color:#777;margin-top:0}#about p{line-height:1.6}#about .bio{font-size:16px;line-height:1.6;margin-top:25px}#about a:hover,footer a:hover{text-decoration:underline}.index-heading,.index-row{display:flex;justify-content:space-between;gap:20px}.index-heading{font-size:12px;color:#777;padding-bottom:20px}.index-row{background:none;border:0;border-top:1px solid #ddd;width:100%;padding:13px 0;text-align:left;font-size:23px}.index-row:hover{padding-left:12px}.index-row small{font-size:13px;color:#777}.index-row b{font-size:12px;font-weight:400;margin-right:22px}footer{display:flex;justify-content:space-between;gap:20px;padding:60px 20px 24px;font-size:14px}dialog{border:0;width:calc(100% - 20px);max-width:none;height:calc(100% - 20px);max-height:none;border-radius:24px;padding:24px;background:#fff}dialog::backdrop{background:#0008;backdrop-filter:blur(12px)}.dialog-head{display:flex;justify-content:space-between;align-items:center;font-size:14px;position:sticky;top:-24px;background:#fff;z-index:2;padding:12px 0}.dialog-head button,#next{border:0;background:#f1f1f1;border-radius:30px;padding:12px 22px}.project-intro{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:40px 0 55px}.project-intro h2{font-size:clamp(32px,4vw,65px);letter-spacing:-.04em;line-height:1.05;margin:0}.project-intro p{font-size:18px;line-height:1.5;margin:0}.project-intro a{display:inline-block;text-decoration:underline;margin:18px 20px 0 0}#media-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}figure{margin:0}figure img,figure video{width:100%;max-height:85vh;object-fit:contain;background:#f3f3f3;border-radius:20px;display:block}figcaption{padding:10px 2px;font-size:14px;color:#666}#next{display:block;margin:45px auto 10px}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@media(hover:none){.caption{opacity:1;transform:none}}@media(min-width:1600px){.tile{aspect-ratio:.65}}@media(max-width:900px){ .identity > span:not(.brand-title){display:none}.gallery{grid-template-columns:repeat(3,minmax(0,1fr))}.tile{aspect-ratio:.65}.caption{padding:50px 20px 30px}.caption strong{font-size:20px}#about:not([hidden]){grid-template-columns:1fr 1fr}#about>div:first-child{grid-column:1/-1}}@media(max-width:600px){header{gap:6px;grid-template-columns:1.6fr 1fr 1fr;padding:8px}.pill{padding:10px 13px}.identity strong{font-size:12px}.gallery{padding:24px 8px 8px;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.tile{border-radius:36px;aspect-ratio:.62}.caption{padding:50px 17px 24px;opacity:1;transform:none}.caption strong{font-size:19px}.caption small{font-size:12px}footer{flex-wrap:wrap;padding:35px 15px 20px;font-size:13px}.project-intro{grid-template-columns:1fr;gap:20px;padding:20px 0 30px}.project-intro p{font-size:16px}dialog{padding:16px}.dialog-head{top:-16px}#media-grid{grid-template-columns:1fr}.index-row{font-size:18px}.panel{padding:22px}#about:not([hidden]){gap:18px}#about .bio{font-size:16px}#about p{overflow-wrap:anywhere}.index-row b{margin-right:10px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}
#music-widget{position:fixed;top:0;right:0;z-index:200;display:flex;flex-direction:column;align-items:center;pointer-events:none}#music-widget img{width:331px;height:331px;object-fit:contain;mix-blend-mode:multiply}.music-controls{display:flex;width:139px;margin-top:-40px;position:relative;left:-8px;pointer-events:auto}.music-btn{width:50%;padding:10px 0;border:1px solid #000;border-radius:0;font-family:Helvetica,Arial,sans-serif;font-size:16px;letter-spacing:.1em;background:rgba(180,180,180,.65);color:#000;cursor:pointer}.music-btn:not(.active){opacity:.4}.music-btn.active{opacity:1}.music-btn:active{transform:scale(.94)}#mobile-music{display:none}@media(min-width:641px){header{padding-right:331px}.identity > span:not(.brand-title){display:none}}@media(max-width:640px){#music-widget{display:none}#mobile-music{display:flex;flex-direction:column;position:fixed;top:calc(20vh - 75px);right:0;z-index:200;width:100px}#mobile-music .music-btn{width:100%;font-size:19px;padding:11px 0}}

.image-open{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;border-radius:20px}#image-viewer{width:100vw;height:100dvh;max-width:100vw;max-height:100dvh;margin:0;border:0;border-radius:0;padding:70px 30px 30px;background:rgba(12,12,12,.96);overflow:hidden}#image-viewer[open]{display:flex;align-items:center;justify-content:center}#image-viewer img{max-width:100%;max-height:100%;object-fit:contain}.image-close{position:absolute;top:18px;right:22px;border:1px solid #666;border-radius:30px;background:#222;color:white;padding:12px 22px}#image-viewer::backdrop{background:#0009}@media(max-width:600px){#image-viewer{padding:70px 10px 15px}}

#media-grid.reference-wall{gap:0;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;background:#fff}#media-grid.reference-wall figure{padding:0;margin:0;min-width:0;display:flex}#media-grid.reference-wall .image-open{border:0;border-radius:0;display:block;height:100%}#media-grid.reference-wall img{border:0;border-radius:0;width:100%;height:100%;max-height:none;object-fit:fill;display:block}#media-grid.reference-wall figcaption{display:none}@media(max-width:600px){#media-grid.reference-wall{grid-template-columns:1fr}}

.about-photo-wrap{grid-column:1;grid-row:1 / span 3;align-self:start}.about-photo{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:clamp(28px,4vw,64px);display:block}@media(max-width:900px){.about-photo-wrap{grid-column:1/-1;grid-row:auto;max-width:520px}.about-photo{aspect-ratio:1/1}}

/* Project captions: compact white bands with staggered typography. */
.tile .caption{left:0;right:0;bottom:0;padding:16px clamp(20px,2.4vw,34px) clamp(18px,2vw,28px);background:#fff;color:#000;font-family:Helvetica,"Helvetica Neue",Arial,sans-serif;text-align:left;opacity:0;transform:translateY(16px);transition:opacity .22s ease,transform .32s ease;pointer-events:none}
.tile .caption strong{display:block;margin:0 0 5px;font-family:inherit;font-size:clamp(22px,2.2vw,32px);font-weight:800;line-height:1.12;color:#000;opacity:0;transform:translateY(9px);transition:opacity .25s ease .04s,transform .3s ease .04s}
.tile .caption small{display:block;font-family:inherit;font-size:16px;font-weight:400;line-height:1.3;color:#000;opacity:0;transform:translateY(9px);transition:opacity .25s ease .09s,transform .3s ease .09s}
.tile:hover .caption,.tile:focus-visible .caption,.tile:hover .caption strong,.tile:focus-visible .caption strong,.tile:hover .caption small,.tile:focus-visible .caption small{opacity:1;transform:translateY(0)}
@media(hover:none){.tile .caption,.tile .caption strong,.tile .caption small{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.tile .caption,.tile .caption strong,.tile .caption small{transition:none;transform:none}}

#about .about-business-card{grid-column:3 / 5;grid-row:2;align-self:end;justify-self:end;max-width:600px;border-radius:24px;overflow:hidden}#about .about-business-card img{display:block;width:100%;height:auto}@media(max-width:900px){#about .about-business-card{grid-column:1 / -1;grid-row:auto;justify-self:end;max-width:600px}}

#about > div:not(.about-photo-wrap){padding-top:18px}

#footer-film{display:block;width:calc(100% - 20px);height:clamp(280px,36vw,560px);margin:0 10px;padding:0;border:0;border-radius:24px;overflow:hidden;cursor:zoom-in;background:#111}#footer-film{position:relative}#footer-film img{display:block;width:100%;height:auto;position:absolute;left:0;top:50%;transform:translateY(-50%);object-fit:contain;object-position:center}#film-viewer{background:#111;width:calc(100% - 30px);height:auto;max-height:95dvh;padding:65px 15px 15px}#film-viewer video{display:block;width:100%;max-height:calc(95dvh - 85px);object-fit:contain}

#media-grid.hello-layout{align-items:center}#media-grid.hello-layout figure{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%}#media-grid.hello-layout figure img{max-width:92%;margin-inline:auto}
/* centered pill labels */
.caption{left:50%;right:auto;bottom:50%;width:max-content;max-width:calc(100% - 28px);padding:8px 14px;background:#e9e9e9;color:#222;border-radius:999px;text-align:center;opacity:0;transform:translate(-50%,50%) scale(.88);transition:opacity .25s ease,transform .32s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.caption strong{margin:0;font-size:14px;font-weight:700;line-height:1.15;color:#222;opacity:1;transform:none;white-space:nowrap}
.caption small{display:none}
.tile:hover .caption,.tile:focus-visible .caption{opacity:1;transform:translate(-50%,50%) scale(1)}
@media(hover:none){.caption{opacity:1;transform:translate(-50%,50%) scale(1)}}
/* centered label reveal */
.caption{top:50%!important;left:50%!important;right:auto!important;bottom:auto!important;width:max-content!important;max-width:calc(100% - 28px)!important;padding:8px 14px!important;background:#e9e9e9!important;color:#222!important;border-radius:999px!important;text-align:center!important;opacity:0!important;transform:translate(-50%,-50%)!important;clip-path:inset(100% 0 0 0 round 999px)!important;transition:opacity .12s ease,clip-path .28s ease!important;pointer-events:none!important}
.caption strong{display:block!important;margin:0!important;font-size:14px!important;font-weight:700!important;line-height:1.15!important;color:#222!important;opacity:1!important;transform:none!important;white-space:nowrap!important}
.caption small{display:none!important}
.tile:hover .caption,.tile:focus-visible .caption{opacity:1!important;transform:translate(-50%,-50%)!important;clip-path:inset(0 0 0 0 round 999px)!important}
@media(hover:none){.caption{opacity:1!important;clip-path:inset(0 0 0 0 round 999px)!important}}
/* delayed title lift inside the pill */
.caption strong{opacity:0!important;transform:translateY(7px)!important;transition:opacity .18s ease .08s,transform .24s cubic-bezier(.2,.8,.2,1) .08s!important}
.tile:hover .caption strong,.tile:focus-visible .caption strong{opacity:1!important;transform:translateY(0)!important}
@media(hover:none){.caption strong{opacity:1!important;transform:translateY(0)!important}}
@media(max-width:600px){
  .caption{top:auto!important;bottom:18px!important;transform:translate(-50%,0)!important}
  .tile:hover .caption,.tile:focus-visible .caption{transform:translate(-50%,0)!important}
}
/* reference-style right dropdowns and split identity */
.identity{gap:12px}
.brand-name{font-family:Helvetica,"Helvetica Neue",Arial,sans-serif;font-size:15px!important;letter-spacing:.14em;font-weight:700!important;color:#000!important;white-space:nowrap}
.brand-title{margin-left:auto;font-family:Helvetica,"Helvetica Neue",Arial,sans-serif;font-size:13px!important;letter-spacing:.1em;font-weight:400!important;color:#000!important;white-space:nowrap}
#index.panel,#about.panel{position:absolute;top:54px;right:10px;width:calc(50% - 15px);margin:0;z-index:9;background:rgba(245,245,245,.8);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 12px 35px rgba(0,0,0,.08)}
#index.panel{max-height:calc(100vh - 64px);overflow:auto;border-radius:0 0 24px 24px}
#about.panel{max-height:calc(100vh - 64px);overflow:auto;border-radius:0 0 24px 24px}
@media(max-width:900px){.brand-name{font-size:12px!important}.brand-title{font-size:11px!important;letter-spacing:.05em}#index.panel,#about.panel{top:50px;width:calc(100% - 16px);right:8px}}
@media(max-width:600px){.brand-name{font-size:11px!important;letter-spacing:.08em}.brand-title{font-size:10px!important;letter-spacing:0}.identity{padding-inline:12px}}
/* compact reference-sized Work dropdown */
#index.panel{padding:18px 22px 20px}
#index .index-heading{font-size:11px;padding-bottom:10px}
#index .index-row{padding:8px 0;font-size:13px;line-height:1.25}
#index .index-row small{font-size:11px}
#index .index-row b{font-size:10px;margin-right:24px}
@media(max-width:900px){#index.panel{padding:16px 18px 18px}}
/* restore original full-width tab panels while keeping the split header */
#index.panel,#about.panel{position:static!important;top:auto!important;right:auto!important;width:auto!important;max-height:none!important;overflow:visible!important;margin:0 10px!important;border-radius:24px!important;background:#f5f5f5!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important}
.brand-name{display:block!important}
/* keep the split identity visible at every viewport */
.identity > .brand-name{display:block!important;visibility:visible!important;color:#000!important}
.identity > .brand-title{display:block!important;visibility:visible!important;color:#000!important}
/* reference proportions for the main gallery */
.gallery{padding-top:clamp(170px,25vh,260px)}
.tile{aspect-ratio:.78}
@media(min-width:1600px){.tile{aspect-ratio:.78}}
@media(max-width:900px){.gallery{padding-top:clamp(90px,15vh,170px)}.tile{aspect-ratio:.68}}
@media(max-width:600px){.gallery{padding-top:clamp(70px,12vh,120px)}.tile{aspect-ratio:.68}}
/* restore the earlier right-side dropdown state with word hover motion */
#index.panel,#about.panel{position:absolute!important;top:54px!important;right:10px!important;width:calc(50% - 15px)!important;max-height:calc(100vh - 64px)!important;overflow:auto!important;margin:0!important;background:rgba(245,245,245,.8)!important;backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important;box-shadow:0 12px 35px rgba(0,0,0,.08)!important;border-radius:0 0 24px 24px!important}
#index .index-row span{transition:transform .24s cubic-bezier(.2,.8,.2,1)}
#index .index-row:hover span{transform:translateX(6px)}
@media(max-width:900px){#index.panel,#about.panel{top:50px!important;right:8px!important;width:calc(100% - 16px)!important}}
/* pre-1:35 Work and About panel state */
#index.panel,#about.panel{position:static!important;top:auto!important;right:auto!important;width:auto!important;max-height:none!important;overflow:visible!important;margin:0 10px!important;border-radius:24px!important;background:#f5f5f5!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important}
#index.panel{padding:30px!important}
#index .index-heading{font-size:12px;padding-bottom:20px}
#index .index-row{padding:13px 0;font-size:23px;line-height:1.2}
#index .index-row small{font-size:13px}
#index .index-row b{font-size:12px;margin-right:22px}
#index .index-row span{transition:transform .24s cubic-bezier(.2,.8,.2,1)}
#index .index-row:hover span{transform:translateX(4px)}
@media(max-width:900px){#index.panel,#about.panel{padding:22px!important}.index-row{font-size:18px!important}}

/* About list layout */
.about-clients{display:flex;flex-direction:column;gap:28px;min-width:0}
.about-clients>div{min-width:0}
.about-cities p,.about-tools p{column-count:2;column-gap:26px}
@media(max-width:600px){.about-cities,.about-tools{grid-column:1/-1}}

/* Condensed About layout */
@media(min-width:901px){
 #about:not([hidden]){grid-template-columns:minmax(220px,.9fr) minmax(180px,.75fr) minmax(260px,1.15fr) minmax(200px,.75fr);gap:22px 28px;align-items:start}
 #about>.about-photo-wrap{grid-column:1;grid-row:1/6}
 #about>div:nth-child(2){grid-column:2/5;grid-row:1}
 #about>div:nth-child(3){grid-column:2;grid-row:2}
 #about>.about-awards{grid-column:3;grid-row:2}
 #about>.about-contact{grid-column:4;grid-row:2}
 #about>.about-cities{grid-column:2;grid-row:3}
 #about>.about-clients{grid-column:4;grid-row:3/5}
 #about>.about-tools{grid-column:2/4;grid-row:4}
}

/* Two-row About layout: portrait at left, information above evenly spaced details. */
@media(min-width:901px){
 #about:not([hidden]){grid-template-columns:minmax(280px,1.05fr) repeat(7,minmax(0,1fr));grid-template-rows:auto auto;column-gap:clamp(20px,1.8vw,36px);row-gap:clamp(28px,3vw,52px);align-items:start}
 #about>.about-photo-wrap{grid-column:1;grid-row:1/3}
 #about>div:nth-child(2){grid-column:2/9;grid-row:1}
 #about>div:nth-child(3){grid-column:2;grid-row:2}
 #about>.about-awards{grid-column:3/5;grid-row:2}
 #about>.about-contact{grid-column:5;grid-row:2}
 #about>.about-cities{grid-column:6;grid-row:2}
 #about>.about-clients{grid-column:7;grid-row:2}
 #about>.about-tools{grid-column:8;grid-row:2}
 #about>div:not(.about-photo-wrap){padding-top:0}
 #about h2{margin-bottom:14px}
 #about p{margin:0}
 #about .bio{margin-top:0}
 .about-cities p,.about-tools p{column-count:1}
 .about-clients{gap:24px}
}