:root{--charcoal:#4b494a;--ink:#292929;--lemon:#f8f078;--mint:#cceeed;--paper:#fff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans TC","PingFang TC","Microsoft JhengHei",Arial,sans-serif;color:var(--ink);background:#fff}img{display:block;max-width:100%}.eyebrow{margin:0;font-size:clamp(11px,.95vw,15px);font-weight:850;letter-spacing:.28em;line-height:1.55}.hero{min-height:100svh;background:var(--charcoal);color:#fff;display:grid;grid-template-columns:.72fr 1.28fr;align-items:center;gap:6vw;padding:clamp(28px,4vw,70px);position:relative;overflow:hidden}.hero:after{content:"";position:absolute;width:42vw;height:42vw;border:1px solid rgba(248,240,120,.45);border-radius:50%;right:-22vw;top:-25vw}.hero-brand{height:min(78vh,760px);border-right:1px solid rgba(255,255,255,.25);display:flex;flex-direction:column;align-items:center;justify-content:center;padding-right:6vw}.hero-brand img{width:min(34vw,520px);height:auto;aspect-ratio:1/1;object-fit:contain}.hero-brand p{margin:28px 0 0;color:var(--lemon);font-size:clamp(10px,1vw,15px);font-weight:850;letter-spacing:.16em;white-space:nowrap}.hero-brand p span{padding:0 .8em}.hero-copy{position:relative;z-index:2}.hero-copy .eyebrow{margin-bottom:32px}.hero h1{font-size:clamp(54px,7.2vw,116px);line-height:.98;letter-spacing:-.055em;margin:0;font-weight:900}.hero h1 span{color:var(--lemon)}.scroll{position:absolute;z-index:3;right:5vw;bottom:30px;color:#fff;text-decoration:none;font-size:10px;font-weight:800;letter-spacing:.2em;display:flex;align-items:center;gap:12px}.scroll i{width:1px;height:38px;background:var(--lemon)}.team{min-height:62vw;background:var(--mint);position:relative;overflow:hidden}.team-copy{position:absolute;z-index:2;left:5vw;top:15%;width:22vw}.team-copy i,.clients-head i,.partner-copy i{display:block;width:44px;height:3px;background:var(--lemon);margin:22px 0 28px}.team-copy>p:last-child{font-size:clamp(15px,1.35vw,21px);line-height:1.7;margin:0}.team-art{margin:0;width:100%;height:100%;display:flex;align-items:flex-end}.team-art img{width:100%;height:auto;margin-top:auto}.clients{padding:clamp(55px,6vw,90px) 5vw clamp(70px,7vw,110px)}.clients-head{margin-bottom:35px}.client-grid{display:grid;grid-template-columns:repeat(9,1fr);gap:24px 28px;align-items:center}.client{height:92px;display:flex;align-items:center;justify-content:center}.client img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}.partners{background:var(--charcoal);color:#fff;padding:clamp(65px,7vw,110px) 5vw;display:grid;grid-template-columns:.68fr 1.32fr;gap:7vw;align-items:center}.partner-copy h2{margin:0;color:var(--lemon);font-size:clamp(48px,5.6vw,88px);line-height:1.05;letter-spacing:-.05em}.partner-copy>p:last-child{font-size:clamp(15px,1.4vw,22px);color:#e4e4e4;margin:26px 0 0}.partner-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.partner-grid figure{margin:0;background:#fff;padding:10px}.partner-grid img{width:100%;aspect-ratio:2.65;object-fit:contain}.contact{min-height:72vw;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:100px 24px}.beam{position:absolute;z-index:0;top:12%;left:50%;transform:translateX(-50%);width:min(74vw,980px);height:76%;background:var(--lemon);clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);border-radius:0 0 50% 50%}.lemon-mark{position:absolute;z-index:3;top:5.5%;left:50%;transform:translateX(-50%);width:clamp(62px,7vw,105px);height:clamp(62px,7vw,105px);overflow:hidden;border-radius:50%;background:var(--charcoal)}.lemon-mark img{width:100%;height:100%;object-fit:cover;object-position:50% 5%}.contact-copy{position:relative;z-index:2;text-align:center;margin-top:10%}.contact-copy .eyebrow{margin-bottom:28px}.contact h2{font-size:clamp(44px,5.6vw,84px);line-height:1.08;letter-spacing:-.045em;margin:0;font-weight:900}.person{font-size:clamp(16px,1.4vw,21px);margin:32px 0 12px}.mail{color:var(--ink);font-size:clamp(18px,2.2vw,32px);font-weight:800;text-decoration:none;border-bottom:2px solid var(--ink);padding-bottom:5px}.contact footer{position:absolute;z-index:4;left:5vw;right:5vw;bottom:5vw;display:flex;justify-content:space-between;align-items:end;font-size:10px;font-weight:800;letter-spacing:.22em}.contact footer strong{display:block;margin-bottom:18px}.contact footer span{display:block;color:#aaa;line-height:1.8}.ideas{line-height:2}.reveal{opacity:0;transform:translateY(22px);transition:.7s ease}.reveal.on{opacity:1;transform:none}@media(max-width:900px){.hero{grid-template-columns:1fr;gap:24px;align-content:center;padding:36px 24px 80px}.hero-brand{height:auto;border-right:0;border-bottom:1px solid rgba(255,255,255,.22);padding:0 0 28px;align-items:flex-start}.hero-brand img{width:170px}.hero-brand p{font-size:9px;margin-top:18px}.hero h1{font-size:clamp(50px,14vw,76px)}.hero-copy .eyebrow{margin-bottom:20px}.team{min-height:0;padding-top:52px}.team-copy{position:relative;left:auto;top:auto;width:auto;padding:0 24px}.team-art img{width:140%;max-width:none;margin-left:-20%;margin-top:40px}.clients{padding-left:24px;padding-right:24px}.client-grid{grid-template-columns:repeat(3,1fr);gap:20px 18px}.client{height:72px}.partners{grid-template-columns:1fr;padding:70px 24px;gap:50px}.partner-grid{grid-template-columns:1fr 1fr;gap:10px}.contact{min-height:820px}.beam{width:125vw;height:68%;top:16%}.lemon-mark{top:10%}.contact-copy{margin-top:6%}.contact footer{left:24px;right:24px;bottom:28px}.contact footer>div:first-child span{display:none}}@media(max-width:520px){.client-grid{grid-template-columns:repeat(2,1fr)}.partner-grid{grid-template-columns:1fr}.contact footer{justify-content:center;text-align:center}.ideas{display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}}

/* v9 CLEAN — single interaction layer, no legacy overrides */
.scroll-progress{position:fixed;z-index:1000;left:0;top:0;width:0;height:3px;background:var(--lemon);pointer-events:none}

/* Philosophy section */
.about{background:var(--lemon);padding:clamp(70px,8vw,130px) 7vw;overflow:hidden}
.about-inner{max-width:1600px;margin:0 auto}
.about .eyebrow{margin-bottom:clamp(42px,5vw,80px)}
.about-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:8vw;align-items:center}
.about h2{margin:0;font-size:clamp(64px,8vw,132px);line-height:.94;letter-spacing:-.065em;font-weight:900}
.about-grid>p{margin:0;font-size:clamp(18px,2vw,31px);line-height:1.8;font-weight:500}

/* Default is ALWAYS visible — JS only enhances */
.reveal,.about h2.reveal,.about-grid>p.reveal{opacity:1;transform:none}
.motion-ready .reveal:not(.is-visible),
.motion-ready .about h2.reveal:not(.is-visible),
.motion-ready .about-grid>p.reveal:not(.is-visible){opacity:0;transform:translateY(58px)}
.motion-ready .reveal,
.motion-ready .about h2.reveal,
.motion-ready .about-grid>p.reveal{transition:opacity .72s cubic-bezier(.2,.75,.2,1),transform .82s cubic-bezier(.2,.75,.2,1)}
.motion-ready .reveal.is-visible,
.motion-ready .about h2.reveal.is-visible,
.motion-ready .about-grid>p.reveal.is-visible{opacity:1;transform:translateY(0)}
.reveal-delay{transition-delay:.1s!important}

/* Hero entry + mouse parallax — no reveal class involved */
.hero-brand,.hero-copy{--px:0px;--py:0px;transform:translate3d(var(--px),var(--py),0);will-change:transform}
.motion-ready .hero-brand{animation:heroBrandEnter .85s cubic-bezier(.2,.8,.2,1) both}
.motion-ready .hero-copy{animation:heroCopyEnter .9s .08s cubic-bezier(.2,.8,.2,1) both}
@keyframes heroBrandEnter{0%{opacity:0;translate:-64px 0}100%{opacity:1;translate:0 0}}
@keyframes heroCopyEnter{0%{opacity:0;translate:64px 0}100%{opacity:1;translate:0 0}}
.scroll i{transform-origin:top;animation:scrollPulse 1.4s ease-in-out infinite}
@keyframes scrollPulse{0%,100%{transform:scaleY(.3);opacity:.4}50%{transform:scaleY(1);opacity:1}}

/* Team parallax */
.team-art{overflow:hidden}
.team-art img{will-change:transform;transform:translate3d(0,var(--team-y,0px),0);transition:transform .08s linear}

/* Clients — large editorial 3-column grid, NO yellow fill, NO logo zoom */
.client-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid #dedede;border-left:1px solid #dedede;align-items:stretch}
.client{height:clamp(220px,20vw,350px);padding:clamp(32px,4vw,68px);display:flex;align-items:center;justify-content:center;border-right:1px solid #dedede;border-bottom:1px solid #dedede;background:#fff;overflow:hidden;transition:opacity .24s ease}
.client img{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transform:none!important;transition:none!important}
.client::before,.client::after{display:none!important;content:none!important}
.client:hover{background:#fff!important;transform:none!important}
.client-grid:hover .client{opacity:.38}
.client-grid:hover .client:hover{opacity:1}
.motion-ready .reveal-stagger .client{opacity:0;transform:translateY(34px)!important;transition:opacity .52s ease,transform .62s cubic-bezier(.2,.75,.2,1)!important}
.motion-ready .reveal-stagger.is-visible .client{opacity:1;transform:translateY(0)!important}
.motion-ready .reveal-stagger.is-visible .client:nth-child(3n+2){transition-delay:.07s!important}
.motion-ready .reveal-stagger.is-visible .client:nth-child(3n){transition-delay:.14s!important}
.motion-ready .reveal-stagger.is-visible:hover .client{opacity:.38}
.motion-ready .reveal-stagger.is-visible:hover .client:hover{opacity:1}

/* LINE hover is restrained */
.partner-grid figure{transition:translate .28s ease,opacity .28s ease}
.partner-grid:hover figure{opacity:.55}
.partner-grid figure:hover{opacity:1;translate:0 -6px}

/* Contact spotlight — fixed, centered, never follows mouse */
.contact .beam,.contact:hover .beam{position:absolute;z-index:0;top:12%;left:50%;transform:translateX(-50%)!important;width:min(74vw,980px);height:76%;background:var(--lemon);clip-path:polygon(46% 0,54% 0,100% 100%,0 100%)!important;border-radius:0 0 50% 50%;transition:none!important}
.contact .lemon-mark,.contact:hover .lemon-mark{left:50%;transform:translateX(-50%)!important;transition:none!important}

.mail{position:relative;display:inline-block}
.mail:hover{color:var(--ink)}

@media(max-width:900px){
 .about{padding:72px 24px 82px}.about .eyebrow{margin-bottom:42px}.about-grid{grid-template-columns:1fr;gap:42px}.about h2{font-size:clamp(58px,16vw,92px)}.about-grid>p{font-size:18px;line-height:1.75}.about-grid>p br{display:none}
 .client-grid{grid-template-columns:repeat(2,1fr)}.client{height:clamp(170px,38vw,260px);padding:28px}
 .client-grid:hover .client,.motion-ready .reveal-stagger.is-visible:hover .client{opacity:1}
 .motion-ready .hero-brand,.motion-ready .hero-copy{animation:heroMobileEnter .7s ease both}
 @keyframes heroMobileEnter{0%{opacity:0;translate:0 28px}100%{opacity:1;translate:0 0}}
 .contact .beam,.contact:hover .beam{top:16%;width:125vw;height:68%}
}
@media(max-width:520px){.client-grid{grid-template-columns:1fr}.client{height:210px;padding:34px}}
@media(prefers-reduced-motion:reduce){
 .motion-ready .reveal,.motion-ready .about h2.reveal,.motion-ready .about-grid>p.reveal,.motion-ready .reveal-stagger .client{opacity:1!important;transform:none!important;transition:none!important}
 .motion-ready .hero-brand,.motion-ready .hero-copy,.scroll i{animation:none!important;translate:none!important}
 .team-art img{transform:none!important}
}