: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}@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}}

/* Layout and interaction styles */
.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}

.reveal{opacity:1;transform:none}
/* 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}







/* 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{opacity:1}
 
 
 .contact .beam,.contact:hover .beam{top:16%;width:125vw;height:68%}
}
@media(max-width:520px){.client-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.client{height:clamp(130px,38vw,195px);padding:18px}}
@media(prefers-reduced-motion:reduce){
 
 
 .team-art img{transform:none!important}
}

/* Motion is applied only while an element is actively animating. */
.hero-brand,.hero-copy{translate:var(--px,0px) var(--py,0px)}
.team-art{transform:translate3d(0,var(--team-y,0px),0);will-change:transform}
.client-starlux{padding:clamp(12px,1.3vw,24px)}
@media(max-width:900px){.client-starlux{padding:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-brand,.hero-copy{translate:none}.team-art{transform:none}}

html.motion-enabled .hero-brand,html.motion-enabled .hero-copy{translate:var(--px,0px) var(--py,0px)}
html.motion-enabled .team-art{transform:translate3d(0,var(--team-y,0px),0)}

/* Mobile hero: center the brand while keeping the headline left aligned. */
@media(max-width:900px){.hero-brand{align-items:center;text-align:center}.hero-copy{text-align:left}}

/* Normalize visible logo bounds, preserving original artwork and aspect ratios. */
.client{position:relative;container-type:size;padding:0}
.client img{position:absolute;left:50%;top:50%;max-width:none;max-height:none;height:auto;object-fit:contain}
.client img[src$="/01-ikea.png"]{width:min(61.5075cqw,117.8218cqh);translate:-49.9500% -50.2000%}
.client img[src$="/02-nike.png"]{width:min(61.3227cqw,134.0845cqh);translate:-49.9000% -50.1000%}
.client img[src$="/03-estee-lauder.png"]{width:min(75.9305cqw,98.5507cqh);translate:-49.9000% -50.1000%}
.client img[src$="/04-unilever.png"]{width:min(136.6072cqw,95.9677cqh);translate:-50.0000% -50.0000%}
.client img[src$="/05-red-bull.png"]{width:min(111.6789cqw,143.3735cqh);translate:-50.0000% -47.6000%}
.client img[src$="/06-line.png"]{width:min(78.6633cqw,175.0000cqh);translate:-50.0000% -50.0000%}
.client img[src$="/07-uniqlo.png"]{width:min(141.6667cqw,110.4408cqh);translate:-50.0000% -49.9000%}
.client img[src$="/08-gap.png"]{width:min(159.3750cqw,123.9583cqh);translate:-50.0000% -50.0000%}
.client img[src$="/09-tesla.png"]{width:min(169.0608cqw,101.2766cqh);translate:-48.5000% -50.0000%}
.client img[src$="/10-starlux.png"]{width:min(153.0000cqw,528.8889cqh);translate:-50.0000% -50.0000%}
.client img[src$="/11-sony.png"]{width:min(63.4855cqw,280.0000cqh);translate:-50.0000% -50.0000%}
.client img[src$="/12-dyson.png"]{width:min(62.8982cqw,130.0547cqh);translate:-50.0500% -49.8000%}
.client img[src$="/13-starbucks.png"]{width:min(187.1560cqw,145.1219cqh);translate:-49.9500% -49.8000%}
.client img[src$="/14-gogoro.png"]{width:min(140.3670cqw,393.3884cqh);translate:-49.9000% -50.1000%}
.client img[src$="/15-thsr.png"]{width:min(75.9305cqw,97.3415cqh);translate:-50.0000% -50.1000%}
.client img[src$="/16-hktb.png"]{width:min(103.5533cqw,245.3608cqh);translate:-49.9500% -50.0000%}
.client img[src$="/17-tpac.png"]{width:min(77.1753cqw,265.9218cqh);translate:-49.6500% -51.3000%}
.client img[src$="/18-ntch.png"]{width:min(104.9742cqw,99.7903cqh);translate:-49.9500% -50.1000%}
.client img[src$="/19-richart.png"]{width:min(171.9101cqw,147.8261cqh);translate:-50.0000% -50.0000%}
.client img[src$="/20-pizza-hut.png"]{width:min(122.4000cqw,101.0616cqh);translate:-50.0000% -49.9000%}
.client img[src$="/21-mamypoko.png"]{width:min(113.3333cqw,231.0680cqh);translate:-50.0000% -50.0000%}
.client img[src$="/22-sofy.png"]{width:min(93.1506cqw,159.1974cqh);translate:-51.3500% -49.5000%}
.client img[src$="/23-acuvue.png"]{width:min(136.9127cqw,106.4877cqh);translate:-49.9500% -49.9000%}
.client img[src$="/24-quaker.png"]{width:min(174.3590cqw,101.0616cqh);translate:-49.9500% -49.5000%}
.client img[src$="/25-move-free.png"]{width:min(139.4077cqw,144.2424cqh);translate:-49.5500% -49.0000%}
.client img[src$="/26-77.png"]{width:min(166.7575cqw,155.5555cqh);translate:-50.0500% -49.8000%}
.client img[src$="/27-boscogen.png"]{width:min(133.3333cqw,103.9301cqh);translate:-50.0500% -50.0000%}
.client img[src$="/28-HOTELS.png"]{width:min(64.4211cqw,299.3711cqh);translate:-49.8000% -49.9000%}

/* Desktop: four brands per row, with proportionate cell heights. */
@media(min-width:901px){.client-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.client{height:clamp(170px,16vw,270px)}}

/* Lift the light gray canvas of these two assets to pure white. */
.client img[src$="/14-gogoro.png"],.client img[src$="/26-77.png"]{filter:none}

/* LINE certificates: keep all six cards white, including on hover. */
.partner-grid figure,.partner-grid:hover figure,.partner-grid figure:hover{background:#fff;opacity:1}
.partner-grid img{filter:none}

/* LINE certificates: white card backing for readable black text. */
.partner-grid figure,.partner-grid:hover figure,.partner-grid figure:hover{background:#fff;opacity:1}

.client img[src$="/14-gogoro.png"]{width:min(140.2698cqw,390.9370cqh);translate:-49.9436% -50.1691%;filter:none}

.client img[src$="/26-77.png"]{width:min(141.9200cqw,142.1589cqh);translate:-50.1409% -51.8602%;filter:none}