:root{--bg:#0d1013;--fg:#f3f4f3;--muted:#a6afb8;--accent:#8abeff;--hair:#ffffff23;font-family:"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif;color:var(--fg);background:var(--bg);font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:80px}body{margin:0}a{color:inherit;text-decoration:none}button{font:inherit}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:6px}::selection{background:var(--accent);color:var(--bg)}.skip{position:absolute;top:-80px;left:20px;z-index:10;padding:12px;background:var(--accent);color:var(--bg)}.skip:focus{top:20px}.header{position:absolute;z-index:3;width:100%;padding:30px 5%;display:flex;justify-content:space-between;align-items:center}.wordmark{display:flex;gap:14px;align-items:center}.wordmark img{width:31px;height:44px;object-fit:contain}.wordmark>span{font-size:23px;font-weight:500;letter-spacing:5px}.wordmark small{display:block;font-size:10px;letter-spacing:5px;margin-top:5px;color:#d2dce5}.header nav{display:flex;gap:38px}.header nav a{font-size:13px;letter-spacing:2px}.header nav span{display:block;margin-top:6px;font-size:9px;letter-spacing:1px;color:#c2cbd4}.header nav a:hover{color:var(--accent)}.hero{min-height:720px;min-height:min(930px,100svh);position:relative;display:flex;align-items:center;isolation:isolate}.hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% center;z-index:-3}.hero-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(5,10,15,.72),rgba(5,10,15,.26) 53%,rgba(5,10,15,.08)),linear-gradient(0deg,#0d1013,transparent 40%,#080e1433 80%)}.hero-copy{padding:150px 7% 130px}.eyebrow{font-size:10px;font-weight:500;letter-spacing:2.5px;color:var(--accent);margin:0 0 30px;line-height:1.7}.hero .eyebrow{display:flex;align-items:center;gap:15px}.line{height:1px;width:34px;background:var(--accent)}h1{font-size:clamp(58px,7.4vw,112px);font-weight:400;letter-spacing:-3px;line-height:1.16;margin:0 0 28px}h1 span{color:var(--accent)}.hero-description{font-size:15px;letter-spacing:3px;color:#ecf0f4}.dot{margin:0 16px;color:var(--accent)}.watch{display:flex;align-items:center;gap:16px;width:fit-content;margin-top:42px;font-size:13px;letter-spacing:1px}.watch small{display:block;font-size:9px;letter-spacing:2px;color:#bdc8d4;margin-top:8px}.play{border:1px solid #c6dcf5aa;border-radius:50%;width:52px;height:52px;display:grid;place-items:center;color:var(--accent);font-size:12px;padding-left:3px;transition:background .2s,transform .2s}.watch:hover .play{background:var(--accent);color:var(--bg);transform:scale(1.07)}.hero-foot{position:absolute;bottom:34px;left:5%;right:5%;display:flex;justify-content:space-between;font-size:10px;letter-spacing:2px;color:#d4dce4}.hero-foot a span{margin-left:16px;color:var(--accent)}.section{max-width:1600px;margin:auto;padding:110px 7%}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:54px}.section-heading .eyebrow{margin-bottom:18px}h2{font-weight:400;letter-spacing:-1px;font-size:clamp(32px,3.5vw,52px);line-height:1.3;margin:0}.section-intro{color:var(--muted);font-size:13px;line-height:1.9;letter-spacing:1px;margin:0}.work-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:5%}.project-offset{margin-top:95px}.project-image{position:relative;overflow:hidden;aspect-ratio:16/10;background:#1b222a}.project-image img{width:100%;height:100%;object-fit:cover;transition:transform .7s,filter .7s;filter:brightness(.9)}.project:hover img{transform:scale(1.035);filter:brightness(1)}.project-open{position:absolute;right:20px;top:18px;font-size:24px;text-shadow:0 1px 12px #000}.image-label{position:absolute;bottom:20px;left:24px;font-size:10px;letter-spacing:2px;text-shadow:0 1px 8px #000}.project-caption{display:flex;justify-content:space-between;padding-top:23px;gap:12px}.project h3{margin:0;font-size:21px;font-weight:400;letter-spacing:1px}.project-caption p{font-size:12px;color:var(--muted);margin:12px 0 0}.project-num{color:var(--accent);font-size:11px;letter-spacing:2px}.all-work{margin-top:60px;padding:22px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);display:flex;justify-content:space-between;align-items:center;font-size:13px;letter-spacing:1px}.all-work>span:last-child{font-size:24px;color:var(--accent)}.about-section{display:grid;grid-template-columns:.9fr 1.1fr;gap:10%;padding-top:55px;align-items:center}.about-photo{position:relative}.about-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 42%;display:block}.photo-caption{position:absolute;bottom:22px;left:24px;font-size:9px;letter-spacing:2px;text-shadow:0 2px 8px #000}.about-copy h2{font-size:clamp(40px,4.3vw,66px);margin:0 0 25px}.about-copy h2 span{color:var(--accent)}.about-role{font-size:12px;letter-spacing:2px;margin-bottom:30px}.bio{max-width:550px;font-size:13px;line-height:2.1;color:var(--muted)}.bio p{margin:0 0 19px}.about-studio{display:flex;align-items:center;gap:14px;border-top:1px solid var(--hair);padding-top:24px;margin-top:30px;font-size:12px;letter-spacing:1px}.about-studio img{width:30px;height:40px;object-fit:contain}.about-studio small{display:block;font-size:9px;color:var(--muted);letter-spacing:2px;margin-top:7px}.contact-section{padding-top:90px;padding-bottom:100px}.contact-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:55px}.contact-heading h2{font-size:clamp(44px,5.7vw,86px);line-height:1.25}.contact-heading h2 span{color:var(--accent)}.contact-heading p{font-size:12px;line-height:1.8;color:var(--muted)}.contact-grid{display:grid;grid-template-columns:1.1fr 1fr 1.1fr;gap:35px}.contact-item{border:0;border-top:1px solid #ffffff42;background:none;padding:22px 0;text-align:left;position:relative;display:block;color:var(--fg);cursor:pointer}.contact-item>span{font-size:9px;letter-spacing:1.7px;color:var(--muted);display:block;margin-bottom:20px}.contact-item strong{font-size:clamp(14px,1.6vw,23px);font-weight:400;white-space:nowrap}.contact-item i{font-style:normal;color:var(--accent);position:absolute;right:0;top:17px;font-size:22px}.contact-item:hover strong{color:var(--accent)}.footer{padding:30px 5%;border-top:1px solid var(--hair);display:flex;justify-content:space-between;align-items:center;gap:25px;font-size:10px;color:var(--muted)}.footer-brand{color:var(--fg);font-size:16px;letter-spacing:3px}.footer-brand span{display:block;margin-top:9px;font-size:9px;color:var(--muted);letter-spacing:1px}dialog{background:#f8f8f8;color:#191d22;border:0;padding:24px;max-width:min(440px,calc(100vw - 40px));box-shadow:0 20px 100px #0008}dialog::backdrop{background:#02060bd9;backdrop-filter:blur(6px)}.dialog-top{display:flex;align-items:center;justify-content:space-between;gap:20px}.dialog-top h2{font-size:16px;letter-spacing:0}.dialog-top button{font-size:28px;background:none;border:0;padding:0 8px;cursor:pointer}dialog>img{display:block;width:100%;max-height:65svh;object-fit:contain}dialog>p{font-size:12px;color:#53606d;line-height:1.7}dialog>a{font-size:13px;text-decoration:underline}body:has(dialog[open]){overflow:hidden}@media(min-width:1600px){.hero-copy{padding-left:calc((100vw - 1376px)/2)}}@media(max-width:760px){.header{padding:24px 6%}.wordmark>span{font-size:18px;letter-spacing:3px}.wordmark img{width:25px;height:36px}.header nav{gap:22px}.header nav a{font-size:12px}.header nav span{font-size:8px}.hero{min-height:740px;min-height:92svh}.hero-copy{padding:160px 7% 120px}.hero-image{object-position:65% center}.hero-shade{background:linear-gradient(90deg,#050a0fbb,#050a0f35),linear-gradient(0deg,#0d1013,transparent 60%)}h1{font-size:70px;letter-spacing:-2px}.hero .eyebrow{font-size:8px;letter-spacing:1.5px}.hero-foot>span:last-child{display:none}.section{padding:75px 7%}.section-heading{align-items:flex-start;flex-direction:column;gap:20px;margin-bottom:34px}.section-intro br{display:none}.work-grid{grid-template-columns:1fr;gap:40px}.project-offset{margin-top:0}.project-image{aspect-ratio:16/10}.project h3{font-size:20px}.all-work{margin-top:36px}.about-section{grid-template-columns:1fr;gap:40px;padding-top:20px}.about-photo{max-width:460px}.about-photo img{aspect-ratio:5/6}.about-copy h2{font-size:52px}.contact-heading{display:block;margin-bottom:35px}.contact-heading h2{font-size:54px}.contact-heading p{margin-top:22px}.contact-grid{grid-template-columns:1fr;gap:0}.contact-item{padding:20px 0 25px}.contact-item strong{font-size:22px}.contact-item>span{margin-bottom:12px}.footer{flex-wrap:wrap;padding:28px 7%}.footer-brand{width:100%}}@media(max-width:360px){h1{font-size:60px}.header nav{gap:14px}.wordmark{gap:8px}.hero .eyebrow{letter-spacing:.6px}.hero-description{font-size:13px;letter-spacing:1px}.contact-heading h2{font-size:46px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}
/* Video playback and real project players */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-3;opacity:0;transition:opacity .5s}.hero-video.has-frame{opacity:1}.hero-image{z-index:-4}.watch{background:none;border:0;padding:0;text-align:left;color:inherit;cursor:pointer;font-family:inherit}.background-controls{display:flex;align-items:center;gap:15px;margin-top:23px;flex-wrap:wrap}.background-controls button{background:none;border:0;border-bottom:1px solid #8abeff66;color:var(--accent);padding:5px 0;font-size:11px;cursor:pointer}.background-controls span{color:#bcc7d0;font-size:10px;letter-spacing:1px}.reel-fallback{display:block;color:var(--accent);font-size:12px;line-height:1.8;margin-top:12px}.reel-fallback[hidden]{display:none}.work-grid{row-gap:56px}.project{padding:0;text-align:left;font-family:inherit;color:inherit;background:none;border:0;cursor:pointer;min-width:0}.project-image{display:block}.project-caption{display:flex}.project.project-offset:nth-child(4){margin-top:95px}.film-dialog{background:#0d1013;color:#f3f4f3;width:min(1200px,calc(100vw - 32px));max-width:1200px;padding:18px 22px}.film-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:15px}.film-heading h2{font-size:16px;letter-spacing:0}.film-heading button{font-size:28px;color:inherit;border:0;background:none;cursor:pointer}.film-dialog video{display:block;width:100%;max-height:75svh;aspect-ratio:16/9;object-fit:contain;background:#000}.film-error{color:#b9c5d2;font-size:13px;line-height:1.8}.film-error[hidden]{display:none}@media(max-width:760px){.project.project-offset:nth-child(4){margin-top:0}.work-grid{row-gap:40px}.film-dialog{padding:14px}.film-heading h2{font-size:13px}.background-controls{max-width:300px}.hero-copy{padding-bottom:120px}}@media(prefers-reduced-motion:reduce){.hero-video{transition:none}}
/* Preserve the authored video colors; contrast belongs to typography. */
.hero-shade{background:none!important;pointer-events:none}.hero-copy,.hero-foot,.header{ text-shadow:0 2px 14px rgba(0,0,0,.7),0 1px 3px rgba(0,0,0,.7)}.project-image img,.project:hover img{filter:none}.hero-video{filter:none;mix-blend-mode:normal;opacity:0}.hero-video.has-frame{opacity:1}.work-grid>.project:nth-child(odd){margin-top:0}.work-grid>.project:nth-child(even){margin-top:95px}@media(max-width:760px){.work-grid>.project:nth-child(even){margin-top:0}}

/* Match the logo mark to the wordmark and navigation on bright frames. */
.wordmark img{filter:drop-shadow(0 2px 8px rgba(0,0,0,.65)) drop-shadow(0 1px 2px rgba(0,0,0,.8))}.wordmark>span{text-shadow:0 2px 14px rgba(0,0,0,.7),0 1px 3px rgba(0,0,0,.7)}

/* Self-hosted films, separated by frame orientation. */
.work-group+.work-group{margin-top:100px;padding-top:38px;border-top:1px solid var(--hair)}
.work-group-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:32px;gap:20px}
.work-group-heading h3{font-size:16px;font-weight:400;letter-spacing:2px;margin:0}
.work-group-heading h3 span{font-size:9px;color:var(--muted);letter-spacing:2px;margin-left:18px}
.work-count{color:var(--accent);font-size:10px;letter-spacing:2px;white-space:nowrap}
.work-grid{align-items:start;column-gap:5%;row-gap:54px}
.work-grid>.project:nth-child(even){margin-top:54px}
.project-image{aspect-ratio:16/9;background:#080b0e}
.project-image img{object-fit:contain;display:block;filter:none}
.project-play{position:absolute;inset:0;margin:auto;width:48px;height:48px;border:1px solid #fff8;border-radius:50%;display:grid;place-items:center;padding-left:3px;font-size:12px;color:#fff;background:#070c1240;opacity:0;transition:opacity .2s}
.project:hover .project-play,.project:focus-visible .project-play{opacity:1}
.project-duration{position:absolute;right:16px;bottom:15px;font-size:10px;letter-spacing:1px;background:#0008;color:white;padding:5px 7px}
.project-caption{padding-top:20px}
.project-title{display:block;font-size:21px;font-weight:400;letter-spacing:1px;line-height:1.5}
.project-category{display:block;font-size:12px;color:var(--muted);margin-top:9px;line-height:1.7}
.project-role{display:block;font-size:11px;color:var(--accent);margin-top:7px;letter-spacing:1px}
.portrait-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.portrait-grid>.project:nth-child(even){margin-top:0}
.portrait-grid .project-image{aspect-ratio:9/16}
.portrait-grid .project-title{font-size:17px}
.portrait-grid .project-num{display:none}
.film-dialog video{height:auto;aspect-ratio:auto;object-fit:contain;max-height:75svh}
.film-dialog.is-portrait{width:min(510px,calc(100vw - 32px))}
.film-dialog.is-portrait video{height:75svh;width:100%}
@media(max-width:760px){
.work-grid{row-gap:36px}.work-grid>.project:nth-child(even){margin-top:0}
.work-group+.work-group{margin-top:60px;padding-top:28px}
.work-group-heading{margin-bottom:24px}.work-group-heading h3{font-size:15px}
.work-group-heading h3 span{font-size:8px;margin-left:10px}
.portrait-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 18px}
.project-title{font-size:20px}.portrait-grid .project-title{font-size:15px}
.portrait-grid .project-category{font-size:11px}.project-caption{padding-top:15px}
.project-play{opacity:1;width:38px;height:38px;font-size:10px}
.project-duration{right:10px;bottom:10px;font-size:9px}
.film-dialog.is-portrait video{height:70svh}
}

.work-jump{display:flex;gap:28px;margin:-15px 0 44px;font-size:12px;letter-spacing:1px}.work-jump a{padding:10px 0;border-bottom:1px solid var(--hair)}.work-jump a:hover{color:var(--accent);border-color:var(--accent)}.work-jump span{font-size:9px;color:var(--accent);margin-left:9px}#landscape-title,#portrait-title{scroll-margin-top:40px}

/* Introduce the filmmaker immediately after the opening reel. */
.about-section{padding-top:110px}@media(max-width:760px){.about-section{padding-top:75px}}

.about-studio .studio-english{font-size:13px;letter-spacing:3px;color:var(--fg)}

/* Landscape on-set photographs retain the complete working composition. */
.about-onset{display:grid;gap:25px;align-self:start}
.about-onset figure{margin:0;min-width:0}
.about-onset img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain;display:block}
.about-onset figcaption{font-size:9px;letter-spacing:2px;color:var(--muted);padding-top:12px;line-height:1.6}
@media(max-width:760px){.about-onset{max-width:none;gap:24px}.about-onset img{aspect-ratio:auto;height:auto}}

/* Portrait and on-set image carousel: preserve the horizontal source in slide 2. */
.about-carousel{align-self:center;max-width:none;min-width:0}
.about-photo-stage{aspect-ratio:4/5;overflow:hidden;background:#080b0e}
.about-photo-track{height:100%;display:flex;transition:transform .75s cubic-bezier(.22,.61,.36,1)}
.about-slide{flex:0 0 100%;height:100%;min-width:0;display:flex;align-items:center}
.about-carousel .about-slide img{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:50% 42%}
.about-carousel .about-slide-wide img{object-fit:contain;object-position:center}
.about-photo-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:16px}
.about-photo-label{color:var(--muted);font-size:9px;line-height:1.7;letter-spacing:1.5px}
.about-photo-controls{display:flex;align-items:center;gap:3px;flex-shrink:0}
.about-photo-dot{border:0;background:none;padding:12px 8px;cursor:pointer;display:grid;place-items:center}
.about-photo-dot:after{content:"";display:block;width:6px;height:6px;border-radius:50%;background:#ffffff50;transition:background .25s}
.about-photo-dot.is-active:after{background:var(--accent)}
.about-photo-pause{background:none;color:var(--muted);border:0;cursor:pointer;width:32px;height:32px;font-size:12px}
@media(max-width:760px){.about-carousel{width:100%;max-width:460px}.about-photo-footer{padding-top:11px}}
@media(prefers-reduced-motion:reduce){.about-photo-track{transition:none}}

/* Crop the teaching screenshot to the same 4:5 frame, excluding player chrome. */
.about-slide-teaching{overflow:hidden}
.about-carousel .about-slide-teaching img{width:108%;height:108%;max-width:none;flex-shrink:0;margin-left:-4%;object-fit:cover;object-position:50% 51%}

/* 2026-10-22: full-frame reel and a quiet, separate masthead. */
:root{--masthead-height:96px}
.header{position:relative;min-height:var(--masthead-height);padding:24px 5%;background:var(--bg);text-shadow:none;border-bottom:1px solid #ffffff10;gap:24px}
.wordmark{gap:13px;filter:none;text-shadow:none;flex-shrink:0}
.wordmark img{width:30px;height:42px;filter:none}
.wordmark>span{font-size:20px;font-weight:500;letter-spacing:4px;text-shadow:none}
.header nav{display:flex;gap:36px;align-items:center}
.header nav a{position:relative;padding:12px 0;font-size:13px;line-height:1.3;letter-spacing:1.5px;color:#e2e7eb;text-shadow:none;white-space:nowrap}
.header nav a::after{content:'';position:absolute;left:0;right:1.5px;bottom:3px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.header nav a:hover,.header nav a:focus-visible{color:var(--accent)}
.header nav a:hover::after,.header nav a:focus-visible::after{transform:scaleX(1)}
.hero{height:min(930px,calc(100svh - var(--masthead-height)));min-height:0;background:#050607;overflow:hidden}
.hero-video,.hero-image{object-fit:contain;object-position:center;background:#050607}
.hero-copy{padding-top:90px;padding-bottom:100px}
@media(max-width:760px){
 :root{--masthead-height:80px}
 .header{padding:18px 6%;gap:14px}
 .wordmark{gap:9px}
 .wordmark img{width:23px;height:33px}
 .wordmark>span{font-size:16px;letter-spacing:2.5px}
 .header nav{gap:20px}
 .header nav a{font-size:12px;letter-spacing:.5px}
 .hero{height:calc(92svh - var(--masthead-height));min-height:0}
 .hero-copy{padding:90px 7% 100px}
}
@media(max-width:390px){.header nav{gap:12px}.wordmark>span{font-size:14px;letter-spacing:2px}.wordmark img{width:21px;height:30px}.wordmark{gap:7px}}

/* Film-first editorial presentation, inspired by the reference portfolio. */
:root{--bg:#111518;--hair:#ffffff1a;--masthead-height:88px}
.header{padding:21px 6%;border-bottom:0}
.header nav{gap:40px}
.hero{height:auto;min-height:0;display:block;padding:0 6%;background:var(--bg);overflow:visible}
.hero-video,.hero-image{position:absolute;inset:0 6% auto;width:88%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#000}
.hero-image{z-index:-4}.hero-video{z-index:-3}
.hero::before{content:'';display:block;aspect-ratio:16/9;width:100%}
.hero-copy{padding:28px 0 30px;display:flex;align-items:center;justify-content:space-between;gap:24px;text-shadow:none;border-bottom:1px solid var(--hair)}
.hero .eyebrow{display:none}
.hero h1{font-size:clamp(24px,2.4vw,38px);line-height:1.4;letter-spacing:0;margin:0;font-weight:400}
.hero-description{margin:0;color:var(--muted);font-size:12px;letter-spacing:2px;white-space:nowrap}
.hero-foot{display:none}
.section{max-width:1560px;padding:100px 6%}
.about-section{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:9%;padding-top:110px;align-items:center}
.about-carousel{max-width:410px}
.about-copy h2{font-size:clamp(36px,3.3vw,52px);line-height:1.3}
.about-copy{min-width:0;overflow-wrap:anywhere}
.bio{font-size:14px;line-height:2;max-width:610px}
.about-studio{border:0;padding-top:12px;margin-top:20px}
.section-heading{margin-bottom:35px}
.section-heading h2{font-size:clamp(32px,3vw,46px)}
.work-section{border-top:1px solid var(--hair)}
.work-jump{padding-bottom:25px;margin-bottom:34px}
.landscape-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:46px 26px}
.work-grid>.project:nth-child(even),.project.project-offset:nth-child(4){margin-top:0}
.project-image{aspect-ratio:16/9}
.project-image img{transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.project:hover img{transform:scale(1.025)}
.project-open,.project-num{display:none}
.project-play{width:44px;height:44px;background:#101518a0;border:1px solid #ffffffb3}
.project-caption{padding-top:16px}
.project-caption>span:first-child{width:100%}
.project-title{font-size:18px;letter-spacing:.3px}
.project-category{font-size:11px;margin-top:5px}
.project-role{font-size:10px;margin-top:5px;color:var(--accent)}
.project-duration{font-size:9px;padding:4px 6px;right:10px;bottom:10px}
.project:focus-visible .project-title,.project:hover .project-title{color:var(--accent)}
.work-group-heading{margin-bottom:24px}
.work-group+.work-group{margin-top:70px;padding-top:35px}
.portrait-grid{gap:26px}
.contact-section{border-top:1px solid var(--hair)}
@media(min-width:1800px){.hero{padding-left:max(6%,calc((100vw - 1680px)/2));padding-right:max(6%,calc((100vw - 1680px)/2))}.hero-video,.hero-image{width:min(88%,1680px);left:50%;right:auto;transform:translateX(-50%)}}
@media(max-width:1000px){.landscape-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.about-section{gap:6%}.bio{font-size:13px}.hero-description{font-size:11px;letter-spacing:1px}}
@media(max-width:760px){
 :root{--masthead-height:76px}
 .header{padding:18px 6%}.header nav{gap:20px}
 .hero{height:auto;min-height:0;padding:0}
 .hero-video,.hero-image{left:0;width:100%;aspect-ratio:16/9}
 .hero-copy{padding:22px 6% 25px;display:block}
 .hero h1{font-size:28px}.hero-description{margin-top:11px;font-size:11px}
 .section{padding:65px 6%}
 .about-section{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(12px,3vw,22px);align-items:start}
 .about-carousel{max-width:100%;width:100%;margin:0;align-self:start}
 .about-copy .eyebrow{font-size:7.5px;letter-spacing:1px;line-height:1.8;margin-bottom:12px}
 .about-copy h2{font-size:clamp(22px,4.8vw,36px);letter-spacing:0;margin-bottom:12px}
 .about-role{font-size:clamp(10px,2.4vw,12px);letter-spacing:.3px;line-height:1.8;margin:0 0 18px}
 .about-copy .bio{font-size:clamp(11px,2.7vw,13px);line-height:1.95}
 .about-copy .bio p{margin-bottom:14px}
 .about-photo-footer{flex-wrap:wrap;gap:3px;padding-top:10px}
 .about-photo-label{flex-basis:100%;font-size:7.5px;letter-spacing:.5px;overflow-wrap:anywhere}
 .about-photo-controls{gap:0;flex-wrap:wrap;max-width:100%;flex-shrink:1}
 .about-photo-dot{padding:10px 9px}
 .about-photo-pause{width:28px;height:28px}
 .about-studio{gap:8px;margin-top:14px;padding-top:4px}
 .about-studio img{width:22px;height:30px;flex-shrink:0}
 .about-studio .studio-english{font-size:9px;letter-spacing:1px;line-height:1.7;min-width:0}
 .landscape-grid{grid-template-columns:1fr;gap:34px}
 .portrait-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}
 .project-title{font-size:19px}.portrait-grid .project-title{font-size:15px}
 .project-play{opacity:1}.work-group+.work-group{margin-top:50px}
}

/* Width-driven opening film; branding and navigation follow the video frame. */
.header{position:absolute;top:0;left:0;background:transparent;z-index:5;min-height:0;padding:clamp(16px,2vw,28px) 6%;border:0}
.wordmark img,.wordmark>span,.header nav a{filter:drop-shadow(0 1px 5px #0009);text-shadow:none}
.header nav a{color:#fff}
.hero{width:100%;height:auto;aspect-ratio:16/9;min-height:0;padding:0;display:block;background:#000;overflow:hidden}
.hero::before{display:none}
.hero-video,.hero-image{inset:0;left:0;width:100%;height:100%;aspect-ratio:auto;transform:none;object-fit:contain;object-position:center}
.hero-copy{position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);display:block;width:min(760px,68%);padding:0;border:0;text-align:center;pointer-events:none;color:#fff;text-shadow:none}
.hero-signature{display:flex;flex-direction:column;align-items:center}
.hero-emblem{display:block;width:clamp(28px,4.6vw,70px);height:clamp(40px,6.2vw,96px);object-fit:contain;margin-bottom:clamp(6px,1.3vw,18px);filter:drop-shadow(0 2px 8px #0008);animation:emblem-arrive 1.2s ease both}
.hero h1.signature-title{width:100%;margin:0;line-height:1;color:#fff;font-size:inherit}
.hero-brand-name{font-size:clamp(7px,.7vw,11px);letter-spacing:clamp(3px,.45vw,7px);color:#fff;margin-top:clamp(6px,1vw,15px);padding-left:7px;filter:drop-shadow(0 1px 4px #000);animation:emblem-arrive 1.5s 2.5s both}
.hero-description{margin-top:clamp(10px,1.8vw,26px);font-size:clamp(8px,.85vw,12px);letter-spacing:clamp(1px,.2vw,3px);color:#fff;text-shadow:0 1px 6px #000;animation:emblem-arrive 1.5s 2.8s both}
.hero-foot{display:flex;bottom:28px;font-size:9px;color:#fff;text-shadow:0 1px 5px #000}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@keyframes emblem-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.menu-toggle{display:none}
@media(max-width:1000px){
 .header{padding:18px 6%}
 .menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;width:40px;height:36px;padding:7px;background:none;border:0;color:#fff;cursor:pointer;filter:drop-shadow(0 1px 5px #0009)}
 .menu-toggle span{width:26px;height:1px;background:currentColor;display:block}
 .header nav{display:none;position:absolute;right:6%;top:calc(100% - 6px);width:min(230px,88vw);padding:8px 18px;gap:0;flex-direction:column;align-items:stretch;background:#111518f2;border:1px solid #ffffff26}
 .header.is-menu-open nav{display:flex}
 .header nav a{font-size:13px;letter-spacing:1px;padding:10px 0}
 .header nav a::after{display:none}
 .hero-copy{width:76%}
 .hero-foot{font-size:8px;bottom:18px}
 .hero-foot>span:first-child{display:none}
}
@media(max-width:760px){
 .hero{height:auto;min-height:0;aspect-ratio:16/9}
 .hero-copy{width:82%;padding:0;top:56%}
 .hero-emblem{width:clamp(24px,5vw,36px);height:clamp(34px,7vw,50px);margin-bottom:5px}
 .hero-brand-name{font-size:8px;letter-spacing:4px;margin-top:6px}
 .hero-description{font-size:9px;letter-spacing:1px;margin-top:12px;line-height:1.5}
 .hero-foot{display:none}
}
@media(max-width:600px){
 .header{padding:10px 6%}
 .wordmark{gap:8px}.wordmark img{width:19px;height:27px}.wordmark>span{font-size:14px;letter-spacing:2px}
 .menu-toggle{width:32px;height:28px;padding:4px;gap:4px}.menu-toggle span{width:23px}
 .hero-copy{top:57%;width:82%}
 .hero-emblem{width:24px;height:34px;margin-bottom:4px}
 .hero-brand-name{font-size:7px;letter-spacing:3px;line-height:1.3;margin-top:4px}
 .hero-description{font-size:8px;margin-top:8px;letter-spacing:1px}
 .about-section{padding-top:44px}
}

@media(prefers-reduced-motion:reduce){.hero-emblem,.hero-brand-name,.hero-description{opacity:1;transform:none}}

/* One central emblem, restrained typography, and a character-by-character entrance. */
.hero-copy{top:53%;width:min(760px,88%)}
.hero-emblem{width:clamp(32px,6vw,92px);height:clamp(46px,8.5vw,132px);margin-bottom:clamp(12px,2vw,30px);animation:emblem-arrive 1.1s .1s both}
.hero h1.signature-title{font-family:"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif;font-size:clamp(20px,3.4vw,48px);font-weight:400;line-height:1.5;letter-spacing:.12em;margin:0;width:auto;color:#fff;text-shadow:0 2px 14px #0009,0 1px 3px #0008}
.slogan-letters{display:block;white-space:nowrap}
.hero h1 .slogan-letter{display:inline-block;color:#fff;opacity:0;animation:slogan-letter-in .8s calc(.45s + var(--letter-index)*.11s) cubic-bezier(.2,.7,.2,1) both}
.hero h1 .slogan-accent{color:#b8d7ff}
.hero-description{margin:clamp(12px,1.6vw,24px) 0 0;font-size:clamp(9px,.85vw,12px);line-height:1.5;letter-spacing:2px;color:#f0f3f6;animation:emblem-arrive 1s 1.6s both}
.hero-description .dot{margin:0 10px}
.hero-foot{justify-content:center}
@keyframes slogan-letter-in{from{opacity:0;transform:translateY(.25em)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){
 .hero-copy{top:54%;width:88%}
 .hero-emblem{width:clamp(30px,6vw,44px);height:clamp(44px,8.5vw,64px);margin-bottom:12px}
 .hero h1.signature-title{font-size:clamp(20px,3.4vw,28px);letter-spacing:.1em}
 .hero-description{font-size:9px;letter-spacing:1px;margin-top:12px}
}
@media(max-width:600px){
 .hero-copy{top:58%}
 .hero-emblem{width:30px;height:44px;margin-bottom:10px}
 .hero h1.signature-title{font-size:clamp(19px,4.5vw,26px)}
 .hero-description{font-size:8px;letter-spacing:1px;margin-top:8px}
}
@media(prefers-reduced-motion:reduce){.hero h1 .slogan-letter{opacity:1;transform:none}}

/* Final opening: stationary letter paths, sequential leading strokes. */
.hero-emblem.motion-logo{position:relative;animation:none;flex-shrink:0}
.motion-logo .logo-parts,.motion-logo .logo-final{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.motion-logo .logo-parts{overflow:visible;opacity:0}
.motion-logo .logo-final{opacity:1}
.motion-logo .motion-piece{transform:none}
.motion-logo .blade{transform-box:view-box;transform-origin:0 0;will-change:transform,opacity,filter}
.hero h1 .slogan-letter,.hero-description{animation:none;opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.motion-logo .logo-parts{display:none}.motion-logo .logo-final{opacity:1}}

/* Approved left-aligned opening, 2026-10-23. */
.hero-copy{left:6%;top:24%;transform:none;width:auto;max-width:88%;text-align:left}
.hero-signature{align-items:flex-start}
.hero-emblem.motion-logo{width:clamp(17px,3.45vw,50px);height:clamp(25px,5vw,72px);margin:0 0 clamp(8px,1.5vw,22px)}
.hero h1.signature-title{font-size:clamp(32px,6.45vw,93px);font-weight:400;letter-spacing:.045em;line-height:1.22}
.hero h1 .slogan-accent{color:#c9e1ff}
.hero-description{margin:31px 0 0;font-size:13px;letter-spacing:2.2px;line-height:1.8}
@media(max-width:760px){
 .hero-copy{left:6%;top:23%;width:auto;max-width:88%;transform:none;text-align:left}
 .hero h1.signature-title{font-size:6.45vw;letter-spacing:.045em;line-height:1.22}
 .hero-emblem.motion-logo{width:clamp(17px,3.45vw,50px);height:clamp(25px,5vw,72px);margin-bottom:clamp(8px,1.5vw,22px)}
 .hero-description{font-size:8px;letter-spacing:1px;margin-top:10px;line-height:1.8}
}

/* Approved connected signature: fine masthead, quiet write/hold/fade/rest cycle. */
.hero-handwritten .wordmark>span{font-size:20px;font-weight:400;letter-spacing:4px}
.hero-handwritten .hero-copy.handwriting-copy{left:50%;top:51%;transform:translate(-50%,-50%);width:49%;max-width:none;padding:0;text-align:center;filter:drop-shadow(0 2px 7px #0000002a)}
.hero-handwritten h1.handwriting-title{position:relative;width:100%;margin:0;line-height:1;letter-spacing:normal;font-size:inherit;text-shadow:none}
.hero-handwritten .signature-static{display:block;width:100%;height:auto}
.hero-handwritten .signature-motion{display:none;width:100%;height:auto;overflow:visible}
.hero-handwritten.handwriting-ready .signature-static{display:none}
.hero-handwritten.handwriting-ready .signature-motion{display:block}
.hero-handwritten .hero-foot{bottom:2%;left:50%;right:auto;width:auto;transform:translateX(-50%);padding:0;justify-content:center}
.hero-handwritten .hero-foot a{display:flex;align-items:center;gap:10px;padding:8px;font-size:8px;line-height:1.4;font-weight:400;letter-spacing:1.8px;color:#fff}
.hero-handwritten .hero-foot a span{margin:0;font-size:11px;color:#dcecff}
@media(max-width:760px){
 .hero-handwritten .wordmark>span{font-size:14px;letter-spacing:2px}
 .hero-handwritten .hero-copy.handwriting-copy{left:50%;top:51%;transform:translate(-50%,-50%);width:55%;max-width:none;padding:0;text-align:center}
 .hero-handwritten .hero-foot{bottom:1.8%}
 .hero-handwritten .hero-foot a{font-size:6.5px;letter-spacing:1px;padding:5px;gap:6px}
 .hero-handwritten .hero-foot a span{font-size:9px}
}

/* Alternate the approved signature with the original two-line story composition. */
.hero-handwritten .hero-copy.story-copy{left:6%;top:24%;transform:none;width:auto;max-width:88%;padding:0;text-align:left;opacity:0;pointer-events:none;text-shadow:0 2px 14px #0006}
.hero-handwritten .story-title{margin:0;color:#fff;font-size:clamp(32px,6.45vw,93px);font-weight:400;letter-spacing:.045em;line-height:1.22}
.hero-handwritten .story-title>span{color:#c9e1ff}
.hero-handwritten .story-copy .hero-description{margin:31px 0 0;font-size:13px;letter-spacing:2.2px;line-height:1.8;color:#fff}
@media(max-width:760px){
 .hero-handwritten .hero-copy.story-copy{top:23%}
 .hero-handwritten .story-title{font-size:6.45vw}
 .hero-handwritten .story-copy .hero-description{margin-top:10px;font-size:8px;letter-spacing:1px}
}

/* Theme-colored contact action, aligned with the quiet masthead. */
.hero-handwritten .header nav{align-items:center}
.hero-handwritten .header nav a.contact-cta{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 24px;border:1px solid var(--accent);border-radius:5px;background:var(--accent);color:#0d1824;font-weight:500;letter-spacing:1.5px;text-shadow:none;transition:background .2s,border-color .2s}
.hero-handwritten .header nav a.contact-cta:hover{background:#b2d4ff;border-color:#b2d4ff;color:#0d1824}
@media(max-width:760px){.hero-handwritten .header nav a.contact-cta{min-height:44px;padding:0 22px}}