:root{color-scheme:dark;--bg:#080808;--fg:#f4f4f4;--muted:#929292}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:95px}body{margin:0;background:var(--bg);color:var(--fg);font-family:'Neue Haas Grotesk Text Pro','Neue Haas Grotesk Text','Neue Haas Grotesk Display Pro','Neue Haas Grotesk Display','Neue Haas Grotesk',Arial,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}a:focus-visible,button:focus-visible{outline:2px solid white;outline-offset:6px}header{position:fixed;inset:0 0 auto;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:13px 2.5vw;background:#080808b3;backdrop-filter:blur(14px)}.brand{font-size:24px;font-weight:600;letter-spacing:-1.1px}nav{display:flex;gap:25px}nav a{font-size:16px}sup{font-size:10px}.contact-button{display:inline-flex;border:1px solid #999;padding:12px 16px;gap:18px;align-items:center;font-size:16px;transition:background .2s,color .2s}.contact-button:hover{background:var(--fg);color:var(--bg)}.hero{min-height:100svh;padding:110px 2.5vw 55px;position:relative}.hero-top{position:relative}h1{font-size:clamp(95px,17vw,310px);font-weight:700;line-height:.88;letter-spacing:-.07em;margin:0}h1>span{display:block}.second-line{text-align:right;margin-top:12px}.hero-meta{position:absolute;right:0;top:24px;font-size:16px}.hero-meta ul{padding-left:19px;line-height:2.2;margin:0 0 22px}.hero-meta p{white-space:nowrap;color:#aaa;font-size:14px}.hero-meta b{color:white}.hero-meta time{background:white;color:#080808;padding:2px 12px;margin-left:6px}.hero-meta p>span{margin-left:7px;color:white}.hero-copy{font-size:20px;line-height:1.2;letter-spacing:-.5px;margin:60px 0 30px;color:#b8b8b8}.scroll-cue{position:absolute;bottom:38px;right:2.5vw;font-size:11px;letter-spacing:1px;display:flex;gap:45px;align-items:center}.scroll-cue span{font-size:24px}.section{padding:90px 2.5vw 30px}.section-title{font-size:clamp(45px,10.2vw,180px);letter-spacing:-.065em;line-height:1;margin:0 0 35px;font-weight:600}.project-nav{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-bottom:60px;color:#aaa}.project-nav a{font-size:14px}.project-nav a:hover{color:white}.project-row{display:grid;grid-template-columns:1fr 1fr;gap:5vw;padding:45px 0 80px;scroll-margin-top:95px}.project-copy{max-width:480px;display:flex;flex-direction:column;align-items:flex-start}.project-copy p{font-size:clamp(19px,2vw,30px);line-height:1.3;letter-spacing:-.6px;margin:0 0 24px}.tags{display:flex;gap:20px;font-size:12px;text-transform:uppercase;color:#aaa}.project-card{display:block;width:100%;padding:0;text-align:left}.project-image{overflow:hidden;border-radius:18px;aspect-ratio:16/9;background:#151515;position:relative}.project-image img{width:100%;height:100%;display:block;object-fit:contain;transition:transform .8s}.project-card:hover img{transform:none}.project-image span{position:absolute;bottom:20px;right:20px;padding:10px 15px;background:#f4f4f4;color:#080808;font-size:12px;opacity:0;transform:translateY(8px);transition:.25s}.project-card:hover .project-image span,.project-card:focus-visible .project-image span{opacity:1;transform:none}.project-caption{display:flex;justify-content:space-between;font-size:18px;margin-top:18px;letter-spacing:-.5px}.project-caption small{font-size:12px;color:#999;letter-spacing:0}.section-layout{display:grid;grid-template-columns:1fr 2fr;gap:5vw;padding:30px 0 90px}.label{font-size:16px;color:#999;margin-top:0}.services article{display:grid;grid-template-columns:45px 1fr;gap:15px;padding:28px 0;border-top:1px solid #333}.services article>span{font-size:14px;color:#999;padding-top:8px}h3{font-size:clamp(24px,3vw,46px);font-weight:500;letter-spacing:-1.3px;margin:0 0 20px}.services p{font-size:18px;line-height:1.5;color:#aaa;max-width:610px;margin:0 0 8px}.about-statement{font-size:clamp(32px,5vw,75px);line-height:1.05;letter-spacing:-.04em}.about-statement span{color:#666}.about-detail{max-width:560px;margin:60px 0 0 auto}.about-detail p{font-size:20px;line-height:1.5;color:#aaa;margin-bottom:30px}footer{padding:60px 2.5vw 24px;border-top:1px solid #333}.footer-links{display:flex;gap:30px;font-size:13px}.footer-links a:last-child{margin-left:auto}.footer-contact{display:flex;align-items:end;justify-content:space-between;margin:70px 0 60px;gap:25px}.footer-contact p{font-size:24px;line-height:1.3;color:#999;margin:0}.footer-contact>a{font-size:clamp(20px,3vw,45px);letter-spacing:-1.3px;border-bottom:1px solid #888;padding-bottom:8px}.footer-wordmark{font-size:15vw;font-weight:600;line-height:1.1;letter-spacing:-.07em;white-space:nowrap}.footer-bottom{display:flex;justify-content:space-between;font-size:11px;color:#888;border-top:1px solid #333;padding-top:25px;margin-top:30px}.skip{position:fixed;top:-100px;z-index:100;background:white;color:black;padding:12px}.skip:focus{top:10px}dialog{width:100%;height:100%;max-width:none;max-height:none;background:#080808;color:white;border:0;padding:0}dialog::backdrop{background:#000e}.dialog-bar{display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;background:#080808ed;border-bottom:1px solid #333;padding:20px 3vw;z-index:1;font-size:12px}.dialog-bar button{font-size:16px}#projectBody{padding:40px 5vw 70px}#projectBody h2{font-size:clamp(35px,7vw,100px);font-weight:500;letter-spacing:-.06em;margin:15px 0 35px}.film{aspect-ratio:16/9;background:#171717}.film iframe{width:100%;height:100%;border:0}.details{display:grid;grid-template-columns:1.5fr 1fr;gap:8vw;margin-top:40px;font-size:18px;line-height:1.6;color:#aaa}.details p{margin-top:0}.credits{font-size:14px}.original-link{display:inline-block;border-bottom:1px solid #777;padding-bottom:5px;color:white}body.modal-open{overflow:hidden}#magicCursor{position:fixed;left:0;top:0;width:40px;height:44px;pointer-events:none;z-index:1000;opacity:0;will-change:transform;filter:drop-shadow(0 2px 3px #0004)}#magicCursor svg{width:100%;height:100%}.cursor-enabled,.cursor-enabled *{cursor:none!important}
@media(min-width:1500px){.hero{padding-top:140px}.hero-meta{top:40px}.hero-copy{margin-top:70px}}@media(max-width:900px){.hero-meta{font-size:13px;top:10px}.hero-meta p{font-size:11px}.hero-meta time{padding:2px 5px}.hero-copy{font-size:18px}.brand{font-size:20px}nav{gap:15px}nav a{font-size:13px}.contact-button{font-size:13px}.project-row{gap:30px}.project-copy p{font-size:21px}.tags{gap:12px;font-size:10px}.section-layout{grid-template-columns:1fr 2.5fr}}@media(max-width:600px){header{padding:16px 5vw}.brand{font-size:18px}header nav{gap:13px}header nav a{font-size:12px}header nav a:last-child{display:none}header>.contact-button{border:0;padding:0;font-size:12px;gap:5px}.hero{padding:130px 5vw 65px;min-height:90svh}h1{font-size:22vw}.hero-meta{position:static;margin-top:38px;display:flex;justify-content:space-between;align-items:start;gap:10px}.hero-meta ul{font-size:11px;line-height:2;margin:0;padding-left:14px}.hero-meta p{white-space:normal;max-width:145px;line-height:2;margin:0}.hero-meta time{display:inline-block}.hero-copy{margin-top:45px;font-size:17px;line-height:1.4}.scroll-cue{right:5vw;bottom:25px;font-size:9px;gap:20px}.section{padding:65px 5vw 10px}.section-title{font-size:11vw;margin-bottom:25px}.project-nav{gap:16px;padding-bottom:20px}.project-nav a{font-size:11px}.project-row{grid-template-columns:1fr;gap:25px;padding:35px 0 40px}.project-copy p{font-size:22px}.project-caption{font-size:16px}.project-image span{opacity:1;transform:none;padding:7px 10px;font-size:10px;bottom:12px;right:12px}.section-layout{grid-template-columns:1fr;gap:25px;padding-bottom:50px}.services p{font-size:16px}.services article{grid-template-columns:28px 1fr}.about-statement{font-size:10vw}.about-detail{margin-top:35px}.about-detail p{font-size:18px}footer{padding:40px 5vw 20px}.footer-links{font-size:10px;gap:15px}.footer-contact{display:block;margin:45px 0}.footer-contact p{font-size:20px;margin-bottom:30px}.footer-contact>a{font-size:27px}.footer-wordmark{font-size:14vw}.footer-bottom{font-size:9px;gap:15px}.details{grid-template-columns:1fr;gap:30px;font-size:16px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}#magicCursor{display:none}}

/* Project hover: a white circular cursor with a diagonal arrow. */
#magicCursor::after{content:'↗';position:absolute;left:50%;top:50%;width:72px;height:72px;display:grid;place-items:center;border-radius:50%;background:#f4f4f4;color:#080808;font-size:34px;font-weight:400;line-height:1;transform:translate(-50%,-50%) scale(.5);opacity:0;transition:transform .22s ease,opacity .18s ease}
#magicCursor svg{transition:opacity .15s ease}
#magicCursor.project-hover::after{opacity:1;transform:translate(-50%,-50%) scale(1)}
#magicCursor.project-hover svg{opacity:0}
@media(hover:hover) and (pointer:fine){.project-card:hover .project-image span{opacity:0}}
@media(prefers-reduced-motion:reduce){.project-card:hover .project-image span{opacity:1}}
/* Primary display hierarchy: Neue Haas Roman (regular). */
h1,.section-title,.footer-wordmark{font-weight:400}
/* Roman is the strongest weight throughout the typography hierarchy. */
body{font-synthesis:none}
h1,h2,h3,.brand,.section-title,.footer-wordmark,.hero-meta b{font-weight:400}
/* Full-height cover panels: content stays readable before the next panel rises. */
main{position:relative;isolation:isolate}
.hero{height:100svh;min-height:640px;padding:100px 2.5vw;display:flex;flex-direction:column;justify-content:center;position:sticky;top:0;z-index:0;background:var(--bg)}
.hero-top{width:100%;margin-top:0}
.hero-meta{top:20px;right:0;max-width:37%;font-size:clamp(11px,1.05vw,18px)}
.hero-meta ul{line-height:2.25;margin:0}
.hero-meta li{white-space:nowrap}
.hero-location{position:absolute;bottom:38px;left:2.5vw;margin:0;color:#aaa;font-size:14px;line-height:1.5}
.hero-location b{color:var(--fg);font-weight:400}
.hero-location time{background:var(--fg);color:var(--bg);padding:2px 10px;margin:0 6px}
.hero-location>span{color:var(--fg)}
.hero::after,.section::after{content:'';position:absolute;inset:0;background:#000;opacity:var(--panel-shade,0);pointer-events:none;z-index:5}
.section{position:sticky;top:var(--panel-top,0px);min-height:100svh;background:var(--bg);padding-top:110px;padding-bottom:70px;border-top:1px solid #292929;box-shadow:0 -30px 80px #0005;isolation:isolate}
#works{z-index:1}#about{z-index:2}#services{z-index:3}
.joined-w{letter-spacing:-.14em;margin-right:.075em}
#contact{position:relative;z-index:4;background:var(--bg)}
.footer-contact{justify-content:flex-end}
.footer-links a:last-child{margin-left:0}
.back-to-top{position:fixed;left:25px;bottom:25px;width:44px;height:44px;display:grid;place-items:center;border:1px solid #ffffff55;background:#080808b3;backdrop-filter:blur(12px);border-radius:50%;z-index:30}
.back-to-top svg{width:22px;height:22px}
.back-to-top:hover{background:white;color:black}
#magicCursor.project-hover{mix-blend-mode:difference;filter:none}
#magicCursor.project-hover::after{background:#fff;color:#000}
@media(max-width:900px){.hero-meta{font-size:11px;max-width:39%}.hero-location{font-size:12px}}
@media(max-width:600px){.hero{padding:110px 5vw;min-height:640px}.hero-meta{position:static;max-width:none;display:block;margin-top:35px;font-size:11px}.hero-meta ul{font-size:11px;line-height:2.25}.hero-location{left:5vw;bottom:75px;font-size:11px}.hero-location time{padding:2px 6px}.section{padding-top:90px;padding-bottom:55px}.back-to-top{left:18px;bottom:18px;width:36px;height:36px}.footer-bottom{padding-bottom:50px}}
@media(prefers-reduced-motion:reduce){.hero,.section{position:relative;top:auto}.hero::after,.section::after{display:none}}
@media(min-width:601px){.hero-location{left:85px}}
/* One-line floating hero and quiet project atmosphere. */
.hero h1{font-size:clamp(30px,13.4vw,360px);white-space:nowrap;text-align:center;letter-spacing:-.065em;line-height:1;font-weight:400;will-change:transform}
#works .section-title{letter-spacing:-.05em}
.clients-line{font-size:clamp(9px,1.05vw,18px);line-height:1.6;color:#aaa;white-space:nowrap;margin:0 0 60px;letter-spacing:.01em}
.work-atmosphere{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.atmosphere-viewport{position:sticky;top:0;height:100svh;width:100%;}
.atmosphere-image{position:absolute;inset:-70px;background-size:cover;background-position:center;filter:blur(55px) brightness(.65);opacity:0;transition:opacity 850ms ease;will-change:transform,opacity}
.atmosphere-image.active{opacity:.2}
.atmosphere-viewport::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#08080855,transparent 70%)}
@media(max-width:600px){.hero h1{font-size:12.7vw}.clients-line{font-size:8px;white-space:normal;text-wrap:balance;margin-bottom:30px}.atmosphere-image{filter:blur(40px) brightness(.6)}}
@media(prefers-reduced-motion:reduce){.hero h1{transform:none!important}.work-atmosphere{display:none}}
/* Tight WW join without overlapping the strokes. */
#works .ww-pair{letter-spacing:-.08em;margin-right:.03em}
.services article{display:block}
.about-statement{font-size:clamp(26px,3.8vw,66px);line-height:1.15;letter-spacing:-.04em}
@media(max-width:600px){.about-statement{font-size:6.6vw}}

/* Keep the navigation at the right with one consistent type hierarchy. */
header nav{margin-left:auto;gap:28px}
header nav a{font-size:16px;font-weight:400}
.atmosphere-image{filter:blur(55px) brightness(1.625)}


@media(max-width:600px){header nav{gap:12px}header nav a{font-size:11px}header nav a:last-child{display:block}header nav a:nth-child(3){display:block}.brand{font-size:15px}.atmosphere-image{filter:blur(40px) brightness(1.5)}}

.hero-location time{background:none;color:var(--fg);padding:0;margin:0 10px}
/* Anchor atmosphere to the viewport throughout the long Works section. */
.work-atmosphere{overflow:clip}
.atmosphere-viewport{position:fixed;inset:0;width:100%;height:100vh}
#about .about-statement{text-align:right}
#about .section-layout{padding-bottom:0}
#about>.about-detail{margin:clamp(80px,12vh,160px) 0 45px;max-width:600px;text-align:left}
@media(max-width:600px){#about>.about-detail{margin-top:70px;max-width:100%}}



/* Dissolve the custom cursor when entering the embedded player. */
#magicCursor{transition:opacity 280ms cubic-bezier(.22,1,.36,1)}
@media(prefers-reduced-motion:reduce){#magicCursor{transition:none}}
.project-close{position:fixed;right:26px;top:24px;width:48px;height:48px;display:grid;place-items:center;border:1px solid #ffffff66;border-radius:50%;background:#080808bb;backdrop-filter:blur(12px);z-index:50;transition:background .25s,color .25s,transform .35s}
.project-close svg{width:22px;height:22px;transition:transform .35s}
.project-close:hover{background:white;color:#080808;transform:scale(1.08)}
.project-close:hover svg{transform:rotate(90deg)}
#projectBody{padding-top:85px}
.project-process{border-top:1px solid #333;padding-top:60px;margin-top:65px}
.process-title{font-size:12px;letter-spacing:.08em;color:#999;margin-bottom:55px}
.process-block{margin-bottom:35px}
.process-heading{font-size:clamp(24px,3vw,46px);font-weight:400;margin:70px 0 28px}
.process-copy{font-size:18px;line-height:1.65;color:#bbb;max-width:880px;white-space:pre-line;margin:0 0 35px}
.process-images{display:grid;gap:20px}
.process-images.is-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.process-images img{display:block;width:100%;height:auto;background:#101010}
.process-film{margin:25px 0 45px}
@media(max-width:600px){.project-close{right:18px;top:18px;width:40px;height:40px}.process-images.is-grid{grid-template-columns:1fr}.process-copy{font-size:16px}.project-process{margin-top:45px;padding-top:35px}}
/* Keep portrait players compact while retaining their complete original frame. */
.film.is-portrait{width:min(100%,560px);margin-left:auto;margin-right:auto}
.project-close{right:5vw;top:clamp(122px,11.5vw,178px)}
@media(max-width:600px){.project-close{right:5vw;top:119px;width:40px;height:40px}#projectBody h2{padding-right:55px}}
#about{z-index:1}#works{z-index:2}
.clients-tape{overflow:hidden;background:#f4f4f4;color:#080808;margin:0 -2.5vw 50px;padding:8.4px 0;width:calc(100% + 5vw)}
.tape-track{display:flex;width:max-content;animation:client-tape 45s linear infinite;will-change:transform}
.tape-group{display:flex;flex-shrink:0;align-items:center;gap:38px;padding-right:38px;white-space:nowrap;font-family:inherit;font-weight:700}
.tape-name{font-size:clamp(19.6px,2.52vw,44.8px);line-height:1.1;letter-spacing:-.035em}
.tape-label{font-size:11px;letter-spacing:.02em}
@keyframes client-tape{to{transform:translateX(-50%)}}
@media(max-width:600px){.clients-tape{padding:8.4px 0;margin-bottom:25px}.tape-group{gap:24px;padding-right:24px}.tape-label{font-size:9px}}
@media(prefers-reduced-motion:reduce){.tape-track{animation:none}}

#about{padding-bottom:160px}
.about-next{position:absolute;left:50%;bottom:65px;transform:translateX(-50%);width:64px;height:64px;display:grid;place-items:center;color:var(--fg);border:1px solid transparent;border-radius:50%;transition:border-color .3s,background .3s}
.about-next svg{width:32px;height:32px;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.about-next:hover{border-color:#ffffff55;background:#ffffff08}
.about-next:hover svg{transform:translateY(5px)}
@media(max-width:600px){#about{padding-bottom:135px}.about-next{bottom:45px}}
@media(prefers-reduced-motion:reduce){.about-next,.about-next svg{transition:none}}
/* Final contact panel rises over Services and stops at the viewport's bottom. */
#contact{position:sticky;top:var(--footer-top,58svh);height:max(42svh,calc(18vw + 150px));display:flex;flex-direction:column;justify-content:space-between;padding-top:clamp(35px,6vh,90px);box-shadow:0 -30px 80px #0005;isolation:isolate}
#contact .footer-contact{margin:0;flex-shrink:0}
#contact .footer-bottom{margin-top:0;flex-shrink:0}
#contact .footer-contact>a{display:inline-flex;align-items:center;gap:.35em}
#contact .footer-contact>a span{display:inline-block;transition:transform .3s}
#contact .footer-contact>a:hover span{transform:translate(3px,-3px)}
@media(max-width:600px){#contact{height:max(42svh,250px);padding-top:35px}}
@media(prefers-reduced-motion:reduce){#contact .footer-contact>a span{transition:none}}
/* All cards share one sticky containing block so Services remains pinned behind Contact. */
.hero::after,.section::after{opacity:1;background:rgb(0 0 0 / var(--panel-shade,0));backdrop-filter:blur(var(--panel-blur,0px));-webkit-backdrop-filter:blur(var(--panel-blur,0px))}
.footer-bottom>span:last-child{margin-left:auto;text-align:right}
/* Reveal once on entry, without hiding content when scrolling back. */
.reveal-item{opacity:0;transform:translateY(35px);transition:opacity 950ms cubic-bezier(.22,1,.36,1),transform 1100ms cubic-bezier(.22,1,.36,1);transition-delay:var(--reveal-delay,0ms)}
.reveal-item.is-revealed{opacity:1;transform:translateY(0)}
.about-statement .reveal-line{display:block;overflow:hidden;color:inherit;padding-bottom:.09em;margin-bottom:-.09em}
.about-statement .reveal-line>span{display:block;color:inherit;opacity:0;transform:translateY(110%);transition:transform 1100ms cubic-bezier(.22,1,.36,1),opacity 850ms ease;transition-delay:var(--reveal-delay,0ms)}
.about-statement .reveal-line.is-muted{color:#666}
.about-statement.is-revealed .reveal-line>span{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.reveal-item,.about-statement .reveal-line>span{opacity:1;transform:none;transition:none}}

.hero-top,.hero-location{z-index:1}
#contactDialog{width:min(920px,94vw);height:auto;max-height:90svh;border:1px solid #ffffff26;border-radius:5px;padding:0;background:#0b0b0b;overscroll-behavior:contain}
#contactDialog::backdrop{background:#0009;backdrop-filter:blur(14px)}
.contact-content{padding:55px 60px}
.contact-content h2{font-size:clamp(48px,6vw,80px);font-weight:400;letter-spacing:-.06em;margin:0}
.contact-intro{color:#999;margin:12px 0 38px}
#contactDialog .contact-close{position:absolute;top:25px;right:25px;width:42px;height:42px}
.contact-fields{display:grid;grid-template-columns:1fr 1fr;gap:25px}
#contactForm label{display:block;font-size:13px;color:#aaa;margin-bottom:25px}
#contactForm input,#contactForm textarea{display:block;width:100%;margin-top:10px;padding:12px 0;background:transparent;border:0;border-bottom:1px solid #555;color:#f4f4f4;font:inherit;font-size:17px;border-radius:0;outline-offset:4px}
#contactForm textarea{resize:vertical;min-height:100px}
#contactForm input:focus,#contactForm textarea:focus{border-bottom-color:white;outline:0}
.contact-submit{display:flex;justify-content:space-between;width:100%;padding:17px 20px;background:#f4f4f4;color:#080808;font-size:17px;transition:background .2s}
.contact-submit:hover{background:#ccc}.contact-submit:disabled{opacity:.5}
#contactStatus{font-size:14px;line-height:1.5;color:#bbb;min-height:21px;margin-bottom:0}
#contactForm .contact-trap{display:none}
.cursor-enabled input,.cursor-enabled textarea{cursor:text!important}
@media(max-width:600px){.contact-content{padding:65px 25px 30px}.contact-fields{grid-template-columns:1fr;gap:0}}
#contactDialog{height:fit-content}
@media(hover:hover) and (pointer:fine){
  .project-image img{transition:transform 650ms cubic-bezier(.22,1,.36,1)}
  .project-card:hover img{transform:translate3d(var(--thumb-x,0px),var(--thumb-y,0px),0) scale(1.035)}
}
@media(prefers-reduced-motion:reduce){.project-card:hover img{transform:none}}
#contactDialog{overflow-x:hidden;overflow-y:auto;scrollbar-width:none}
#contactDialog::-webkit-scrollbar{display:none;width:0;height:0}

/* Reserve the scrollbar lane so modal scroll locking cannot reflow sticky panels. */
html{scrollbar-gutter:stable}
#contactDialog{border-radius:28px;opacity:0;transition:opacity 420ms cubic-bezier(.22,1,.36,1)}
#contactDialog.is-visible{opacity:1}
#contactDialog .contact-content{opacity:0;transform:translateY(28px);transition:opacity 420ms ease,transform 550ms cubic-bezier(.22,1,.36,1)}
#contactDialog.is-visible .contact-content{opacity:1;transform:translateY(0)}
#contactDialog::backdrop{background:#0000;backdrop-filter:blur(0);transition:background 420ms ease,backdrop-filter 420ms ease}
#contactDialog.is-visible::backdrop{background:#0009;backdrop-filter:blur(14px)}
.rolling-button{display:inline-flex;align-items:center;justify-content:center;gap:14px;border-radius:999px;border:0;background:#f4f4f4;color:#080808;padding:15px 25px;transition:background .3s,transform .4s cubic-bezier(.22,1,.36,1)}
.rolling-button:hover{background:#fff;color:#080808;transform:translateY(-2px)}
.rolling-button:active{transform:translateY(0) scale(.97)}
.rolling-label{display:block;position:relative;height:1.3em;line-height:1.3;overflow:hidden}
.rolling-copy{display:block;transition:transform 550ms cubic-bezier(.22,1,.36,1),filter 550ms ease;white-space:nowrap}
.rolling-copy:nth-child(2){position:absolute;top:100%;left:0;filter:blur(3px)}
.rolling-button:hover .rolling-copy,.rolling-button:focus-visible .rolling-copy{transform:translateY(-100%)}
.rolling-button:hover .rolling-copy:first-child,.rolling-button:focus-visible .rolling-copy:first-child{filter:blur(3px)}
.rolling-button:hover .rolling-copy:nth-child(2),.rolling-button:focus-visible .rolling-copy:nth-child(2){filter:blur(0)}
.rolling-arrow{transition:transform .4s cubic-bezier(.22,1,.36,1)}
.rolling-button:hover .rolling-arrow{transform:translate(2px,-2px)}
.contact-submit.rolling-button{width:100%;font-size:17px;padding:17px 25px}
@media(max-width:600px){#contactDialog{border-radius:22px}}
@media(prefers-reduced-motion:reduce){#contactDialog,#contactDialog::backdrop,#contactDialog .contact-content,.rolling-button,.rolling-copy,.rolling-arrow{transition:none}#contactDialog .contact-content{transform:none}}

#magicCursor{width:24px;height:24px;border-radius:50%;background:#fff;mix-blend-mode:difference;filter:none}#magicCursor svg,#magicCursor::after{display:none}

#magicCursor.button-attached{transition:opacity 240ms cubic-bezier(.22,1,.36,1)}

#magicCursor.project-hover{background:transparent}#magicCursor.project-hover::after{display:grid;opacity:1;transform:translate(-50%,-50%) scale(1)}

.hero h1 .hero-letter-mask{display:inline-block;overflow:visible;clip-path:none;vertical-align:top;line-height:1.1;padding-bottom:.04em;border:0;outline:0;box-shadow:none}.hero-letter{display:inline-block;transform:translateY(.32em);opacity:0;filter:blur(14px);transition:transform 900ms cubic-bezier(.65,0,.35,1),opacity 900ms ease-in-out,filter 900ms ease-in-out;transition-delay:var(--letter-delay)}.hero h1.letters-visible .hero-letter{transform:translateY(0);opacity:1;filter:blur(0)}.hero-top{transform-origin:center center}@media(prefers-reduced-motion:reduce){.hero-letter{transform:none;opacity:1;filter:none;transition:none}}

.hero-intro-active .hero-ui{opacity:0;translate:var(--ui-enter-x,0px) var(--ui-enter-y,-80px);pointer-events:none;transition:opacity 800ms ease-in-out,translate 800ms cubic-bezier(.65,0,.35,1);transition-delay:var(--ui-delay)}.hero-intro-active.hero-ui-visible .hero-ui{opacity:1;translate:0 0;pointer-events:auto}@media(prefers-reduced-motion:reduce){.hero-intro-active .hero-ui{opacity:1;translate:none;pointer-events:auto;transition:none}}

.hero-location.hero-ui{--ui-enter-y:90px}.back-to-top.hero-ui{--ui-enter-x:-90px;--ui-enter-y:0px}

.brand{display:flex;align-items:center}.brand-logo{display:block;width:60px;height:35px;object-fit:contain}.hero-background-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;z-index:0;filter:brightness(.45);opacity:1;transition:opacity 1400ms ease}.hero-intro-active .hero-background-video{opacity:0}.hero-intro-active.hero-ui-visible .hero-background-video{opacity:1}@media(max-width:600px){.brand-logo{width:48px;height:28px}}@media(prefers-reduced-motion:reduce){.hero-background-video{transition:none}}

.hero .hero-background-video,.hero-intro-active .hero-background-video{opacity:1}.hero-video-shade{position:absolute;inset:0;z-index:0;background:#000;opacity:1;pointer-events:none;transition:opacity 1400ms cubic-bezier(.65,0,.35,1)}.hero-background-reveal .hero-video-shade{opacity:0}@media(prefers-reduced-motion:reduce){.hero-video-shade{opacity:0;transition:none}}

.hero{overflow:clip}.hero-top{transform:none!important;background:transparent}.hero-background-video,.hero-video-shade{transform:none!important;translate:none!important;rotate:none!important;scale:none!important}.hero h1{transform-origin:center center}

header{background:transparent;backdrop-filter:none;isolation:isolate}header::before{content:"";position:absolute;inset:0 0 auto;height:140px;z-index:-1;pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,.85) 0%,rgba(0,0,0,.5) 35%,rgba(0,0,0,.15) 70%,transparent 100%)}@media(max-width:600px){header::before{height:110px}}

html{scrollbar-gutter:auto;scrollbar-width:none}html::-webkit-scrollbar{display:none;width:0}header{padding:30px 3.5vw}.hero-top{margin-top:48px}.hero-location{bottom:24px}.hero-background-video,.hero-video-shade{inset:-2px;width:calc(100% + 4px);height:calc(100% + 4px)}.hero-intro-active:not(.hero-ui-visible) header a,.hero-intro-active:not(.hero-ui-visible) .hero-location,.hero-intro-active:not(.hero-ui-visible) .back-to-top{opacity:0;visibility:hidden;pointer-events:none}.hero-intro-active.hero-ui-visible .hero-ui{visibility:visible}@media(max-width:600px){header{padding:26px 5vw}.hero-top{margin-top:32px}.hero-location{bottom:28px}}@media(prefers-reduced-motion:reduce){.hero-intro-active:not(.hero-ui-visible) header a,.hero-intro-active:not(.hero-ui-visible) .hero-location,.hero-intro-active:not(.hero-ui-visible) .back-to-top{opacity:1;visibility:visible;pointer-events:auto}}

.hero-background{position:fixed;inset:0;z-index:0;overflow:hidden;background:#000;pointer-events:none;transform:none!important;translate:none!important;rotate:none!important;scale:none!important}main{z-index:1}#hero{background:transparent;transform:none!important;translate:none!important;rotate:none!important;scale:none!important}.hero-background .hero-background-video,.hero-background .hero-video-shade{position:absolute;inset:0;width:100%;height:100%;transform:none!important;translate:none!important;rotate:none!important;scale:none!important}

html,body{overflow-x:clip}
.hero-background{position:fixed;inset:0;width:100%;height:100%;overflow:hidden;background:#000;pointer-events:none}.hero-background .hero-background-video,.hero-background .hero-video-shade{position:absolute;inset:0;width:100%;height:100%;margin:0;transform:none}.hero-background .hero-background-video{object-fit:cover;object-position:center}
/* Hide the entire hover layer, including its gradient, outside active projects. */
.atmosphere-viewport{opacity:0;visibility:hidden;transition:opacity 850ms ease,visibility 0s 850ms}.work-atmosphere.is-active .atmosphere-viewport{opacity:1;visibility:visible;transition:opacity 850ms ease,visibility 0s}.atmosphere-viewport::after{inset:-80px}

.footer-address{line-height:1.6;max-width:70%;text-align:right;text-wrap:balance}
#contact .footer-wordmark{font-size:9.8vw;letter-spacing:-.06em}
@media(max-width:600px){#contact .footer-wordmark{font-size:9.2vw}}

/* Morph one persistent circle instead of swapping cursor shapes. */
#magicCursor,#magicCursor.project-hover{background:transparent}#magicCursor::before{content:"";position:absolute;inset:0;border-radius:50%;background:#fff;transform:scale(1);transition:transform 480ms cubic-bezier(.22,1,.36,1)}#magicCursor.project-hover::before{transform:scale(3)}#magicCursor::after{display:grid;width:72px;height:72px;background:transparent;color:#000;opacity:0;transform:translate(-50%,-50%) translate(-9px,9px) scale(.8);transition:transform 450ms cubic-bezier(.22,1,.36,1),opacity 200ms ease;transition-delay:0ms}#magicCursor.project-hover::after{display:grid;background:transparent;color:#000;opacity:1;transform:translate(-50%,-50%) translate(0,0) scale(1);transition-delay:60ms}@media(prefers-reduced-motion:reduce){#magicCursor::before,#magicCursor::after{transition:none}}

#projectDialog{opacity:0;transition:opacity 480ms ease;overscroll-behavior:contain}
#projectDialog.is-visible{opacity:1}
#projectDialog::backdrop{background:rgba(0,0,0,0);transition:background 480ms ease}
#projectDialog.is-visible::backdrop{background:rgba(0,0,0,.75)}
#projectDialog #projectBody{transform:translateY(28px);transition:transform 480ms cubic-bezier(.22,1,.36,1)}
#projectDialog.is-visible #projectBody{transform:translateY(0)}
.project-card{position:relative;isolation:auto}
#contact .footer-contact{display:flex;justify-content:center}
#contact .footer-contact>a.rolling-button{border:0;padding:15px 28px;font-size:clamp(20px,2.3vw,34px);letter-spacing:-.04em;gap:14px}
#contact .footer-contact>a.rolling-button span{transition:unset}
#contact .footer-contact>a.rolling-button:hover span{transform:none}
#contact .footer-contact .rolling-copy{transition:transform 550ms cubic-bezier(.22,1,.36,1),filter 550ms ease!important}
#contact .footer-contact>a.rolling-button:hover .rolling-copy,#contact .footer-contact>a.rolling-button:focus-visible .rolling-copy{transform:translateY(-100%)}
#contact .footer-contact .rolling-arrow{transition:transform .4s cubic-bezier(.22,1,.36,1)!important}
#contact .footer-contact>a.rolling-button:hover .rolling-arrow{transform:translate(2px,-2px)}
@media(prefers-reduced-motion:reduce){#projectDialog,#projectDialog::backdrop,#projectDialog #projectBody,.project-card::before{transition:none}#projectDialog #projectBody{transform:none}}

/* Broad white overlay illumination, independent of the blurred backdrop. */

/* Keep all thumbnail illumination underneath every work card. */
#projects{position:relative;isolation:isolate}

/* Avoid accidental selection and native drag previews while browsing. */
body,body *{-webkit-user-select:none;user-select:none}
img,video,a{-webkit-user-drag:none}
input,textarea,[contenteditable="true"],[contenteditable="true"] *{-webkit-user-select:text;user-select:text}

/* Blend illumination with the image atmosphere, below all work content. */
.ambient-light{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle 720px at var(--light-x,50%) var(--light-y,50%),#fff 0%,#fff9 24%,#fff3 48%,transparent 75%);mix-blend-mode:overlay;filter:blur(66px);opacity:0;transition:opacity 650ms ease}
.ambient-light.is-lit{opacity:.325}

#projects{isolation:auto}
.atmosphere-viewport{isolation:isolate;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 20%,#000 80%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 20%,#000 80%,transparent 100%)}
.atmosphere-viewport::after{background:linear-gradient(90deg,#080808bb 0%,#08080888 25%,#08080833 48%,transparent 75%)}
.hero-image-trail{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.hero-image-trail img{position:absolute;width:clamp(110px,10vw,185px);height:clamp(146px,13.3vw,246px);object-fit:cover;border-radius:6px;opacity:0;will-change:transform,opacity;box-shadow:0 12px 35px #0005}
.hero-top,.hero-location{z-index:2}
@media(prefers-reduced-motion:reduce),(hover:none){.hero-image-trail{display:none}}

.instagram-personal-work{padding:35px 0 55px;border-top:1px solid #ffffff20}
#instagramWorkHeading{font-size:13px;line-height:1.5;letter-spacing:.08em;font-weight:400;margin:0 0 28px;color:#aaa}
.instagram-work-window{overflow:hidden;margin:0 -2.5vw;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.instagram-work-track{display:flex;width:max-content;will-change:transform}
.instagram-work-group{display:flex;gap:20px;padding-right:20px;flex-shrink:0}
.instagram-work-card{display:block;position:relative;width:clamp(160px,17vw,270px);aspect-ratio:3/4;border-radius:16px;overflow:hidden;background:#151515}
.instagram-work-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 650ms cubic-bezier(.22,1,.36,1),filter 650ms ease}
.instagram-work-card>span{position:absolute;right:15px;bottom:15px;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#080808aa;color:#fff;transition:background .3s,color .3s}
.instagram-work-card:hover img,.instagram-work-card:focus-visible img{transform:scale(1.04);filter:brightness(1.1)}
.instagram-work-card:hover>span{background:#fff;color:#080808}
.instagram-work-window:focus-within .instagram-work-track{animation-play-state:paused}
@keyframes instagram-work-loop{to{transform:translateX(-50%)}}
@media(max-width:600px){.instagram-work-window{margin:0 -5vw}.instagram-work-group{gap:14px;padding-right:14px}#instagramWorkHeading{font-size:11px;letter-spacing:.045em}.instagram-personal-work{padding-bottom:35px}}
@media(prefers-reduced-motion:reduce){.instagram-work-track{animation:none}.instagram-work-window{overflow-x:auto}.instagram-work-group[aria-hidden="true"]{display:none}}

/* Match Instagram's portrait profile grid crop. */
.instagram-work-card{flex:none;width:clamp(180px,17.25vw,262.5px);height:clamp(240px,23vw,350px);aspect-ratio:3/4}
.instagram-work-card img{object-fit:cover;object-position:center}
.instagram-work-card:hover img,.instagram-work-card:focus-visible img{transform:none}
.hero-image-trail img{width:clamp(110px,10vw,185px);height:clamp(146.667px,13.333vw,246.667px);object-fit:cover;object-position:center}

.clients-tape{background:rgb(255 255 255 / .05);color:#fff}
#about>.clients-tape{margin-top:65px;margin-bottom:0}
.instagram-work-header{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:28px}
.instagram-work-header #instagramWorkHeading{margin:0}
.instagram-work-header .contact-button{flex-shrink:0}
.instagram-personal-work{padding-bottom:clamp(95px,13svh,180px)}
#works{padding-bottom:clamp(50px,6svh,90px)}
#works>#services{position:relative;top:auto;margin-inline:-2.5vw;box-shadow:none;isolation:auto;z-index:auto}
#works>#services::after{display:none}
@media(max-width:600px){#works>#services{margin-inline:-5vw}}
.instagram-work-window{padding-block:12px;margin-block:-12px}
.instagram-work-window{touch-action:pan-y;cursor:grab}
.instagram-drag-hint{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:28px;color:#929292;font-size:10px;letter-spacing:.12em;pointer-events:none}
.instagram-drag-hint svg{width:24px;height:24px}
.instagram-work-window.is-dragging{cursor:grabbing}
.instagram-work-window.is-dragging .instagram-work-card{pointer-events:none}
.instagram-work-card{transition:transform 450ms cubic-bezier(.22,1,.36,1);transform-origin:center}
@media(hover:hover){
 .instagram-work-track .instagram-work-card:hover{transform:scale(1.045);z-index:1}
}
.instagram-work-track .instagram-work-card:focus-visible{transform:scale(1.045);z-index:1}
.instagram-work-card::before{content:'';position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse 95% 45% at center,rgba(0,0,0,.78) 0%,rgba(0,0,0,.55) 35%,rgba(0,0,0,.2) 65%,transparent 100%);pointer-events:none;opacity:0;transition:opacity 300ms ease}
.instagram-work-card:hover::before,.instagram-work-card:focus-visible::before{opacity:1}
.instagram-work-card::after{content:'View on Instagram';position:absolute;inset:0;z-index:2;display:grid;place-items:center;padding:16px;color:#fff;font-size:clamp(15px,1.25vw,21px);letter-spacing:-.03em;text-align:center;text-shadow:0 2px 12px #000;pointer-events:none;opacity:0;transform:translateY(8px);transition:opacity 300ms ease,transform 450ms cubic-bezier(.22,1,.36,1)}
.instagram-work-card:hover::after,.instagram-work-card:focus-visible::after{opacity:1;transform:translateY(0)}
.instagram-work-card:hover img,.instagram-work-card:focus-visible img{filter:none}
@media(max-width:600px){.instagram-work-header{gap:14px}.instagram-work-header .contact-button{padding:10px 15px;font-size:12px}.instagram-work-header #instagramWorkHeading{max-width:60%}}

@media(min-width:901px){.project-copy{max-width:560px}.project-copy p{font-size:clamp(27px,2.5vw,38px);line-height:1.25;letter-spacing:-.8px}}

/* SVG arrows keep iOS from substituting colored emoji. */
#contact{height:auto;min-height:max(42svh,calc(18vw + 220px));gap:32px;padding-bottom:calc(90px + env(safe-area-inset-bottom,0px))}
.mobile-menu-toggle,.mobile-menu-backdrop{display:none}
@media(max-width:600px){
 header .brand{min-width:48px;min-height:48px}
 .mobile-menu-toggle{display:grid;place-items:center;width:48px;height:48px;padding:10px;border:1px solid #ffffff40;border-radius:50%;background:#080808b3;color:#fff;position:relative;z-index:2}
 .mobile-menu-toggle svg{width:26px;height:26px}
 header nav{display:none}
 .mobile-menu-open{overflow:hidden}
 .mobile-menu-open header nav{display:flex;position:absolute;top:calc(100% + 8px);left:5vw;right:5vw;flex-direction:column;gap:0;padding:12px 20px;background:#101010;border:1px solid #ffffff30;border-radius:20px;box-shadow:0 20px 70px #0009;z-index:2}
 .mobile-menu-open header nav a,.mobile-menu-open header nav a:last-child{display:flex;align-items:center;min-height:64px;padding:12px 4px;font-size:26px;line-height:1.3;letter-spacing:-.04em}
 .mobile-menu-open header nav a+a{border-top:1px solid #ffffff18}
 .mobile-menu-open .mobile-menu-backdrop:not([hidden]){display:block;position:fixed;inset:0;z-index:0;background:#0009;backdrop-filter:blur(6px);border-radius:0}
 .mobile-menu-open header .brand{position:relative;z-index:2}
}
.outgoing-arrow{display:inline-block;width:1em;height:1em;vertical-align:middle;flex:none}
.project-image>span{display:inline-flex;align-items:center;gap:8px}
.project-caption small{display:flex;align-items:center}
.rolling-arrow{display:inline-flex;align-items:center;justify-content:center}
@media(max-width:600px){
 .hero h1 .hero-letter{letter-spacing:0;padding-inline:.08em;margin-inline:-.08em}
 .hero h1 .hero-ww{letter-spacing:-.04em;padding-right:.16em;margin-right:-.16em}
 header{padding:18px 5vw}
 .hero{min-height:100svh}
 .hero-location{bottom:calc(76px + env(safe-area-inset-bottom,0px));left:5vw;right:5vw}
 .instagram-work-window{-webkit-mask-image:none;mask-image:none}
 .project-image>span{display:none}
 .project-caption small{font-size:13px}
}