:root{color-scheme:dark;--bg:#101112;--fg:#f1f2f2;--muted:#aaaeb2;--line:#414346;--accent:#9bb7ff}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.site-header,main{width:calc(100% - clamp(2rem,5vw,4.5rem));max-width:112rem;margin-inline:auto}
h1,h2,h3,p{margin:0}
img{max-width:100%}
.site-header{min-height:7.25rem;display:flex;align-items:center;justify-content:space-between;gap:2rem;border-bottom:1px solid var(--line)}
.brand{display:block;flex-shrink:0}
.wordmark{font-size:clamp(3.5rem,5.5vw,5.5rem);font-weight:900;letter-spacing:-.095em;line-height:.85}
.period{color:var(--accent);letter-spacing:-.02em}
.socials{display:flex;align-items:center;gap:.35rem}
.social-icon{width:2.75rem;height:2.75rem;display:grid;place-items:center;color:var(--muted)}
.social-icon:hover,.social-icon:focus-visible,.email:hover{color:var(--accent)}
.platform{display:block;width:1.3rem;height:1.3rem;background:currentColor;mask-position:center;mask-size:contain;mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat}
.platform-linkedin{mask-image:url("social-linkedin.svg");-webkit-mask-image:url("social-linkedin.svg")}
.platform-vimeo{mask-image:url("social-vimeo.svg");-webkit-mask-image:url("social-vimeo.svg")}
.platform-instagram{mask-image:url("social-instagram.svg");-webkit-mask-image:url("social-instagram.svg")}
.platform-soundcloud{width:1.65rem;mask-image:url("social-soundcloud.svg");-webkit-mask-image:url("social-soundcloud.svg")}
.intro{display:flex;justify-content:space-between;align-items:flex-start;gap:3rem;padding:2rem 0 2.25rem}
.intro h1{max-width:58rem;font-size:clamp(1.375rem,2vw,2rem);line-height:1.3;font-weight:400;letter-spacing:-.025em}
.intro h1 strong{font-weight:700}
.intro p{flex:0 0 auto;text-align:right;color:var(--muted);font-size:1rem;line-height:1.55}
.references{border-top:1px solid var(--line);padding:2.25rem 0 2.5rem;text-align:center}
.references h2{font-size:clamp(1.5rem,2.2vw,2rem);line-height:1.2;font-weight:600;letter-spacing:-.035em;margin-bottom:1.5rem}
.references h2::after{content:".";color:var(--accent)}
.references p{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem clamp(1.4rem,3vw,3.25rem);font-size:clamp(1rem,1.35vw,1.25rem);line-height:1.4}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(1.25rem,2vw,2rem);row-gap:clamp(2.75rem,4vw,4rem)}
.project{display:block;min-width:0}
.picture{position:relative;aspect-ratio:16/9;overflow:hidden;background:#202224}
.picture img{display:block;width:100%;height:100%;object-fit:cover;transition:opacity .35s,transform .7s cubic-bezier(.2,.7,.2,1)}
.play{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%) scale(.92);display:grid;place-items:center;width:3.25rem;height:3.25rem;border:1px solid var(--accent);border-radius:50%;background:#101112b8;color:var(--accent);font-size:1rem;padding-left:.15rem;opacity:0;transition:opacity .25s,transform .35s cubic-bezier(.2,.7,.2,1)}
.project:hover .play,.project:focus-visible .play{opacity:1}
.project:hover .play,.project:focus-visible .play{transform:translate(-50%,-50%) scale(1)}
.project:hover img,.project:focus-visible img{opacity:.78;transform:scale(1.015)}
.caption{position:relative;display:block;min-height:4.75rem;padding:1.15rem .1rem .25rem}
.caption::before{content:"";position:absolute;top:0;left:.1rem;width:2rem;height:1px;background:var(--line);transition:width .35s cubic-bezier(.2,.7,.2,1),background-color .25s}
.project:hover .caption::before,.project:focus-visible .caption::before,.project:active .caption::before{width:4.5rem;background:var(--accent)}
.caption h3{font-size:.9375rem;line-height:1.45;font-weight:400;letter-spacing:.075em;transition:color .25s}
.project:hover .caption h3,.project:focus-visible .caption h3,.project:active .caption h3{color:var(--accent)}
.caption p{font-size:.875rem;line-height:1.5;color:var(--muted);text-align:left;margin-top:.4rem}
.recognition{border-top:1px solid var(--line);margin-top:clamp(3.5rem,6vw,6rem);padding:2.5rem 0 .5rem}
.recognition h2{text-align:center;font-size:clamp(1.5rem,2.2vw,2rem);line-height:1.2;font-weight:600;letter-spacing:-.035em;margin-bottom:2rem}
.recognition h2::after{content:".";color:var(--accent)}
.recognition ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(1.25rem,2vw,2rem)}
.recognition li{border-top:1px solid var(--line);padding:1rem .1rem 1.15rem}
.recognition strong{display:block;font-size:.9375rem;line-height:1.45;font-weight:400;letter-spacing:.06em}
.recognition span{display:block;color:var(--muted);font-size:.875rem;line-height:1.5;margin-top:.35rem}
.contact{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:2rem;border-top:1px solid var(--line);margin-top:2.25rem;padding:1.5rem 0}
.studio-mark{display:flex;align-items:center;gap:.75rem;color:var(--muted);font-size:.875rem}
.symbol-wrap{display:block;width:1.8rem;height:2.55rem;overflow:hidden;mix-blend-mode:screen;flex:0 0 auto}
.symbol{display:block;width:5.28rem;height:auto;max-width:none;transform:translate(-1.6rem,-1.525rem)}
.email{font-size:1rem;text-decoration-line:underline;text-decoration-color:var(--accent);text-decoration-thickness:1px;text-underline-offset:.3rem}
.contact .socials{justify-self:end}
.skip{position:absolute;left:1rem;top:-6rem;padding:.75rem;background:var(--fg);color:var(--bg);z-index:5}.skip:focus{top:1rem}
dialog{padding:1.25rem;border:1px solid var(--line);background:var(--bg);color:var(--fg);width:min(68.75rem,94vw);max-height:94svh;overflow:auto}
dialog::backdrop{background:#08090aeb}
.dialog-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem}
.dialog-head h2{font-size:1rem;font-weight:400;min-width:0;overflow-wrap:anywhere}
.close{background:transparent;color:var(--fg);border:1px solid var(--line);font:inherit;font-size:1rem;min-height:2.75rem;padding:.5rem .75rem;cursor:pointer;flex-shrink:0}
.close:hover{border-color:var(--fg)}
.player{aspect-ratio:16/9}.player iframe{height:100%;width:100%;border:0;display:block}
.fallback{font-size:.9375rem;color:var(--muted);margin-top:1rem;line-height:1.6}.fallback a{text-decoration:underline}
body.modal-open{overflow:hidden}
@media(hover:none){.play{opacity:1}}
@media(max-width:55rem){.intro{display:block}.intro p{text-align:left;margin-top:1rem}.contact{grid-template-columns:1fr auto}.email{grid-column:1/-1;grid-row:1}.studio-mark{grid-column:1;grid-row:2}.contact .socials{grid-column:2;grid-row:2}}
@media(max-width:42rem){.site-header,main{width:calc(100% - 2rem)}.site-header{min-height:6rem;gap:1rem}.wordmark{font-size:3rem}.site-header .socials{gap:0}.site-header .social-icon{width:2.25rem}.intro{padding:1.5rem 0}.intro h1{font-size:1.375rem}.intro p{font-size:.9375rem}.references{padding:1.75rem 0 2rem}.references h2{font-size:1.5rem;margin-bottom:1.25rem}.references p{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem 1rem;font-size:1rem}.grid{grid-template-columns:1fr;row-gap:2.5rem}.caption{min-height:0;padding-top:1.1rem}.caption h3{font-size:.9375rem}.caption p{font-size:.875rem}.recognition{margin-top:3.5rem;padding-top:2rem}.recognition h2{font-size:1.5rem;margin-bottom:1.5rem}.recognition ul{grid-template-columns:1fr}.contact{gap:1.25rem;margin-top:2rem;padding-bottom:2rem}.email{font-size:1rem}.contact .social-icon{width:2.5rem}.contact .socials{gap:0}.symbol-wrap{width:1.55rem;height:2.2rem}.symbol{width:4.55rem;transform:translate(-1.38rem,-1.315rem)}}
@media(max-width:24rem){.site-header{align-items:flex-start;flex-direction:column;justify-content:center;padding:1rem 0}.site-header .socials{margin-left:-.5rem}.wordmark{font-size:3.25rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.picture img,.play{transition:none}}