/* Codex editorial finish — layout, surface and motion */
:root{--paper:#f7f7f3;--carbon:#0b0c0b;--rule:rgba(255,255,255,.16);--motion:cubic-bezier(.22,1,.36,1)}
body{background:var(--carbon);text-rendering:optimizeLegibility}html{scroll-padding-top:94px}.section{padding:clamp(96px,11vw,170px) clamp(24px,4.7vw,76px)}.container{max-width:1376px}.section-title{display:flex;align-items:center;gap:24px;font-size:15px;letter-spacing:.22em;margin-bottom:72px;position:relative;padding-bottom:23px;border-bottom:1px solid var(--rule)}.section-title::after{position:absolute;bottom:-1px;left:0;margin:0}.sec-num{font-family:Arial,sans-serif;font-size:11px;letter-spacing:.12em;color:#b91c1c}
nav{transition:background .5s var(--motion),border-color .5s;border-bottom:1px solid transparent}nav.scrolled{background:rgba(10,11,10,.92);border-bottom-color:rgba(255,255,255,.1);backdrop-filter:blur(20px)}nav .container{max-width:none;padding:22px clamp(24px,4.7vw,76px)}.nav-logo{font-size:11px;letter-spacing:.25em}.nav-links a{font-family:Arial,'Noto Serif TC',serif;font-size:12px;letter-spacing:.14em}.nav-links a.active{color:#fff}.nav-links a::after{transform-origin:left}.scroll-progress{height:2px;background:#ba322b}
a:focus-visible,button:focus-visible,[role=button]:focus-visible{outline:2px solid #cb4c40;outline-offset:7px}.cursor-dot,.cursor-ring{display:none!important}
#hero{min-height:100svh;background:#a9221b}#hero::before{background:radial-gradient(ellipse at 50% 42%,transparent 5%,rgba(49,5,0,.24) 100%)}#hero::after{animation-duration:38s!important;opacity:.55}.hero-content{width:100%;padding:100px 28px}.hero-brand img{max-width:clamp(310px,52vw,710px)}.hero-brand-en{font-size:clamp(12px,1.15vw,17px);letter-spacing:.34em;margin-top:36px}.hero-divider{margin-top:35px}.hero-scroll{position:absolute;bottom:37px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:12px;align-items:center;color:rgba(255,255,255,.6);font:10px Arial,sans-serif;letter-spacing:.24em;z-index:2}.hero-scroll span{width:1px;height:38px;background:rgba(255,255,255,.2);position:relative;overflow:hidden}.hero-scroll span::after{content:'';position:absolute;inset:-100% 0 100%;background:#fff;animation:scrollTrace 2.6s var(--motion) infinite}@keyframes scrollTrace{to{transform:translateY(200%)}}
.awards-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:26px}.award-stat{text-align:left;position:relative;padding-left:18px;border-left:1px solid var(--rule)}.award-stat .num{font-size:clamp(65px,9vw,136px);line-height:1.03}.award-stat .txt{font-family:Arial,'Noto Serif TC',serif;font-size:13px;letter-spacing:.14em;margin-top:20px}.awards-photo{overflow:hidden}.awards-photo img{transition:transform 1.2s var(--motion),filter 1.2s var(--motion)}.awards-photo:hover img{transform:scale(1.018)}.awards-competitions{margin-top:76px;gap:0 42px}.comp{padding:36px 0}.comp-name{font-size:17px;letter-spacing:.08em;line-height:1.6}.comp-top b{font-size:58px}.comp-medals span{font-size:13px}.comp-medals span b{font-size:25px}.comp-top{margin-bottom:23px}.comp:hover .comp-name{color:#eee}
.ms-hero{padding-bottom:76px;gap:70px}.ms-hero-img{overflow:hidden}.ms-hero-img img{transition:transform 1.2s var(--motion)}.ms-hero:hover .ms-hero-img img{transform:scale(1.02)}.ms-grid{gap:0 60px}.ms{padding:46px 0}.ms-title{font-size:clamp(21px,2.1vw,30px);letter-spacing:.035em;line-height:1.5}.ms-sub{line-height:1.9;font-size:14px}.ms-list li{font-size:16px;line-height:1.75}.ms-year{font-family:Georgia,serif;letter-spacing:-.06em}
#people{background:#a9221b}.people-grid{gap:100px}.person-card{column-gap:80px}.person-card .person-photo{border-radius:0;position:relative}.person-photo img{transition:transform 1.3s var(--motion),filter 1.3s var(--motion)}.person-photo:hover img{transform:scale(1.025);filter:saturate(1)}.person-name-zh{font-size:clamp(40px,4.5vw,66px);letter-spacing:.03em}.person-name-en{font-family:Arial,sans-serif;letter-spacing:.22em}.person-section{margin-bottom:38px}.person-section h4{font-size:15px!important;padding-bottom:13px;border-bottom:1px solid #ffffff30}.jury-list li{line-height:1.65}.person-craft{padding-top:30px;margin-top:40px}
#clients.brand-experience{padding:84px clamp(24px,4.7vw,76px) 80px;border-top:0}.brand-heading{margin-bottom:34px;padding-bottom:28px;position:relative}.brand-heading::after{content:'';position:absolute;bottom:-1px;left:0;width:56px;height:2px;background:#b91c1c}.brand-heading h2{font-size:clamp(27px,3vw,42px);font-weight:400}.brand-wall{column-gap:54px}.brand-mark{height:184px}.brand-mark.hero-logo{height:210px}.brand-mark img{transition:transform .7s var(--motion),opacity .7s;transform-origin:center}.brand-mark:hover img{transform:scale(1.035)}.brand-mark::after{content:'';position:absolute;left:calc(50% - 2px);bottom:7px;width:4px;height:4px;border-radius:50%;background:#aa2820;opacity:0;transform:translateY(5px);transition:opacity .4s,transform .4s}.brand-mark:hover::after{opacity:.65;transform:none}.brand-mark.logo-enter{opacity:0;transform:translateY(16px);transition:opacity .9s var(--motion),transform .9s var(--motion);transition-delay:var(--logo-delay,0ms)}.brand-mark.logo-enter.is-seen{opacity:1;transform:none}
#works{padding-top:108px}.client-filter-wrap{position:sticky;top:73px;z-index:20;background:rgba(11,12,11,.95);backdrop-filter:blur(14px);padding:18px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-bottom:74px}.client-filter{gap:10px}.client-filter-btn{font:12px Arial,'Noto Serif TC',serif;letter-spacing:.035em;padding:11px 15px;border-radius:0;border:1px solid transparent;transition:color .3s,background .3s,border-color .3s}.client-filter-btn:hover{border-color:#ffffff40}.client-filter-btn.active{background:var(--paper);color:#151515;border-color:var(--paper)}.client-filter-btn.active .count{color:#666}.industry-header{padding-top:55px;margin-top:42px;border-top:1px solid var(--rule)}.industry-header h3{font-size:clamp(30px,3.8vw,48px);letter-spacing:.015em}.client-header{margin:48px 0 24px}.client-header h4{font-size:23px;letter-spacing:.04em}.client-header h4 .count{font:11px Arial,sans-serif;color:#96968f;border:1px solid #ffffff26;vertical-align:middle;padding:4px 8px;margin-left:16px}.year-label{font:12px Arial,sans-serif;letter-spacing:.16em;color:#b5b5ad;margin-bottom:18px}.year-works{gap:38px;margin-bottom:50px}.work-card{background:transparent;overflow:visible}.work-video{border:1px solid #ffffff0b}.work-video img{transition:transform 1.1s var(--motion),filter .8s var(--motion);filter:saturate(.87)}.work-card:hover .work-video img{transform:translate(-50%,-50%) scale(1.035);filter:saturate(1)}.work-video::after{background:rgba(0,0,0,.04)}.work-card:hover .work-video::after{background:rgba(0,0,0,.08)}.work-video .play-btn{transition:transform .65s var(--motion),background .45s;border:1px solid #ffffff50;backdrop-filter:blur(5px)}.work-card:hover .play-btn{transform:translate(-50%,-50%) scale(1.08)}.work-info{padding:20px 0 22px;border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;align-items:flex-start;gap:25px}.work-title{font-size:15px;letter-spacing:.015em;line-height:1.85;flex:1}.yt-link{font:10px Arial,sans-serif;white-space:nowrap;margin-top:6px;opacity:.55;transition:opacity .3s,transform .3s}.yt-link:hover{opacity:1;transform:translate(2px,-2px)}.works-count{font-family:Arial,'Noto Serif TC',serif;font-size:12px;letter-spacing:.12em;color:#888}
footer{padding:45px clamp(24px,4.7vw,76px);border-top:1px solid var(--rule);text-align:left}footer p{font:10px Arial,sans-serif;letter-spacing:.2em;color:#aaa}.to-top{right:clamp(24px,4.7vw,76px)}
@media(min-width:1100px){.person-card .person-photo{position:sticky;top:115px}}
@media(max-width:1000px){.awards-stats{gap:14px}.award-stat{padding-left:12px}.award-stat .num{font-size:clamp(54px,9vw,90px)}.awards-competitions{gap:0 28px}.person-card{column-gap:35px}.brand-wall{column-gap:32px}.client-filter-wrap{top:70px}.year-works{gap:24px}}
@media(max-width:768px){.section{padding:80px 24px}.section-title{margin-bottom:46px;font-size:13px}nav .container{padding:15px 20px;gap:12px;flex-wrap:wrap}.nav-logo{font-size:9px}nav.scrolled .nav-links{display:flex;gap:18px;overflow-x:auto;width:100%;scrollbar-width:none}.nav-links a{font-size:11px;white-space:nowrap}.nav-links a i{font-size:9px}.nav-toggle{display:none!important}.hero-brand img{max-width:83vw}.hero-brand-en{font-size:11px;letter-spacing:.14em;line-height:2}.hero-scroll{bottom:30px}.awards-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 18px}.award-stat .num{font-size:64px}.award-stat .txt{font-size:11px;letter-spacing:.04em}.awards-competitions{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 26px}.comp-name{font-size:14px}.comp-top{font-size:12px;gap:5px}.comp-top b{font-size:42px}.comp-medals{gap:10px 15px}.comp-medals span{font-size:11px}.comp-medals span b{font-size:22px}.ms-grid{gap:0 30px}.ms-title{font-size:23px}.ms-list li{font-size:15px}.person-card .person-photo{position:relative;top:auto}.person-section h4{font-size:14px!important}.people-lead{margin:0 0 48px}.people-grid{gap:64px}.person-name-zh{font-size:42px}#clients.brand-experience{padding:56px 24px}.brand-heading h2{font-size:25px}.brand-wall{column-gap:25px}.brand-mark,.brand-mark.hero-logo{height:140px}#works{padding-top:78px}.client-filter-wrap{top:93px;margin-bottom:42px;padding:12px 0}.client-filter-btn{padding:10px 12px;font-size:11px}.industry-header{padding-top:36px}.client-header h4{font-size:21px}.year-works{grid-template-columns:1fr;gap:29px}.work-info{padding-top:15px}.work-title{font-size:14px}.work-video .play-btn{opacity:1}footer{padding:32px 24px}.to-top{position:static;transform:none;justify-content:flex-start;margin-top:25px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.brand-mark.logo-enter{opacity:1!important;transform:none!important}:root:not(.intro-preview) .hero-brand img,:root:not(.intro-preview) .hero-brand-en{opacity:1!important;transform:none!important}}

.work-info{position:relative;inset:auto;background:none;z-index:auto}.work-info .work-title{font-size:15px;line-height:1.85}.work-info .yt-link{font-size:10px}.work-video{isolation:isolate}
@media(max-width:768px){.work-info .work-title{font-size:14px}}

/* User decision: fixed five logos per row on every viewport. */
#clients .brand-wall{grid-template-columns:repeat(5,minmax(0,1fr));column-gap:clamp(10px,3vw,44px)}
#clients .brand-mark,#clients .brand-mark.hero-logo,#clients .brand-mark.tall{grid-column:span 1;height:clamp(82px,15vw,190px);padding:clamp(8px,1.7vw,24px) 0}
#clients .brand-mark img,#clients .brand-mark.hero-logo img{max-width:100%;max-height:clamp(46px,10vw,126px)}
#clients .brand-mark.compact img{max-width:88%;max-height:clamp(48px,10vw,126px)}
#clients .brand-mark.tall img{max-width:85%;max-height:clamp(55px,11vw,140px)}

#clients .brand-mark.apple-mark img{max-height:clamp(40px,8vw,105px);max-width:76%}

#clients .brand-mark.reisui-wordmark img{width:110%;max-width:110%;max-height:none}