:root{--yellow:#eefd40;--green:#00462e;--muted:#929292;color-scheme:dark;font-family:Montserrat,Arial,sans-serif;background:#000;color:#fff;font-synthesis:none;scroll-behavior:smooth}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--yellow);outline-offset:7px}section{scroll-margin-top:90px}.skip{position:fixed;top:-80px;left:20px;z-index:100;background:var(--yellow);color:#000;padding:14px}.skip:focus{top:10px}header{height:clamp(70px,9vw,174px);max-height:174px;width:100%;position:absolute;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:0 3.3%;background:#000b}.logo{width:clamp(155px,16vw,306px);display:block}nav{display:flex;gap:25px}nav a{font-size:clamp(13px,1.5vw,28px);font-weight:700;text-decoration:none}nav a:hover,nav a.active{color:var(--yellow);text-decoration:underline;text-underline-offset:8px}.hero{height:56.25vw;min-height:500px;max-height:1080px;position:relative;overflow:hidden;display:grid;place-items:center}.slides{position:absolute;inset:0}.slide{position:absolute;width:100%;height:100%;object-fit:cover;opacity:0;transform:translateX(5%);transition:opacity .8s,transform 1s}.slide.current{opacity:1;transform:translateX(0)}.hero:after{content:"";position:absolute;inset:0;background:#0002;pointer-events:none}.hero h1{position:relative;z-index:1;text-align:center;font-size:clamp(36px,4.3vw,84px);line-height:1.12;font-weight:800;margin:0;padding:65px 24px 0;letter-spacing:-.035em}.slide-arrow{position:absolute;z-index:2;top:50%;border:0;background:#0003;color:#fff;font-size:40px;width:44px;height:60px;opacity:0;transition:opacity .2s}.hero:hover .slide-arrow,.slide-arrow:focus-visible{opacity:1}.previous{left:20px}.next{right:20px}.slide-controls{position:absolute;z-index:2;bottom:25px;display:flex;gap:12px;align-items:center}.dot{width:9px;height:9px;border:1px solid #fff;border-radius:100%;background:transparent;padding:0}.dot.selected{background:var(--yellow);border-color:var(--yellow)}.pause{background:transparent;color:#fff;border:0;font-size:15px;padding:8px}.intro{text-align:center;padding:110px 5% 130px}.intro h2{color:var(--yellow);font-size:clamp(22px,2.9vw,55px);line-height:1.25;margin:0 0 32px;font-weight:700}.intro p,.contact>p{font-size:clamp(14px,1.8vw,34px);font-weight:400;color:var(--muted);margin:0}.section-title{text-align:center;color:var(--yellow);font-size:clamp(28px,3.4vw,64px);margin:0 0 90px;line-height:1.1}.work{padding:0 3.3% 200px}.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:90px 36px}.project{display:block;color:#fff;border:0;text-align:left;background:none;padding:0;width:100%}.project-picture{position:relative;overflow:hidden;aspect-ratio:881/736}.project-picture>img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s}.project:hover .project-picture>img,.project:focus-visible .project-picture>img{transform:scale(1.045)}.project h3{font-size:clamp(17px,2.2vw,40px);line-height:1.15;font-weight:700;margin:22px 0 0}.view-project{position:absolute;bottom:8%;right:7%;color:var(--green);background:var(--yellow);font-size:clamp(11px,1.25vw,24px);font-weight:800;padding:8px 13px;opacity:0;transform:translateY(8px);transition:.25s}.project:hover .view-project,.project:focus-visible .view-project{opacity:1;transform:translateY(0)}.more{display:flex;align-items:center;gap:28px;background:var(--yellow);color:var(--green);border:0;font-weight:800;font-size:clamp(12px,1.4vw,26px);margin:110px auto 0;padding:5px 18px}.more span{font-size:34px;line-height:.75}.more-status{text-align:center;color:var(--muted);max-width:500px;margin:24px auto 0;line-height:1.6}.expertise{background:var(--yellow);color:var(--green);padding:90px 7% 210px}.expertise .section-title{color:var(--green);margin-bottom:130px}.services details{border-bottom:1px solid #00462e80}.services summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:clamp(22px,2.8vw,52px);font-weight:700;line-height:1.15;padding:40px 0;cursor:pointer}.services summary::-webkit-details-marker{display:none}.services summary span{width:28px;height:28px;position:relative;flex-shrink:0}.services summary span:before,.services summary span:after{content:"";position:absolute;background:var(--green);width:28px;height:4px;top:12px;left:0}.services summary span:after{transform:rotate(90deg);transition:transform .2s}.services details[open] summary span:after{transform:rotate(0)}.service-body{max-width:1100px;padding-bottom:34px;color:#497947;font-size:clamp(14px,1.5vw,28px);line-height:1.35}.service-body p{margin:0 0 22px}.service-body ul{list-style:none;padding:0;margin:0}.service-body li{margin:0 0 20px}.service-body li:before{content:"- ";}.service-body a{color:var(--green)}.brands{padding:240px 12% 250px;text-align:center}.brands h2{font-size:clamp(18px,2vw,36px);margin:0 0 180px}.brand-grid{display:grid;grid-template-columns:repeat(4,1fr);align-items:center;gap:90px 60px}.brand-grid img{width:100%;height:130px;object-fit:contain;max-width:280px;margin:auto}.contact{background:var(--green);text-align:center;padding:100px 4% 0}.contact>h2{font-size:clamp(22px,2.8vw,54px);margin:0 0 20px}.contact>p{color:#b4c7be}.contact h3{font-size:clamp(36px,4vw,76px);color:var(--yellow);margin:90px 0 65px}.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);max-width:1100px;margin:0 auto 90px}.contact-grid>button,.contact-grid>a{background:none;border:0;color:var(--green);display:flex;flex-direction:column;align-items:center;text-decoration:none;gap:22px;padding:20px 30px}.contact-grid>*+*{border-left:1px solid #729548!important}.contact-grid img{width:180px;height:180px;object-fit:contain;max-width:100%}.contact-grid span{background:var(--yellow);font-size:14px;font-weight:800;border-radius:2px;padding:4px 12px}.contact-grid a:hover img{opacity:.5}.contact-grid button:hover img{opacity:.7}footer{border-top:1px solid #ffffff50;padding:25px 0 65px;color:#a6bcb2;font-size:clamp(12px,1.5vw,28px)}dialog{border:1px solid #333;background:#101010;color:white;padding:0;max-width:850px;width:90vw;max-height:90dvh;overflow:auto}dialog::backdrop{background:#000c;backdrop-filter:blur(8px)}.close{position:absolute;z-index:2;right:12px;top:12px;width:44px;height:44px;background:#000b;color:white;border:1px solid #fff6;border-radius:50%;font-size:30px}#dialog-image{width:100%;max-height:60vh;object-fit:cover;display:block}.dialog-copy{padding:30px}.dialog-copy h2{margin-top:0}.dialog-copy p{line-height:1.6;color:#aaa}.dialog-copy a{color:var(--yellow)}#qr-dialog{width:360px;text-align:center;background:var(--green);padding:32px}#qr-dialog>img{width:100%;image-rendering:pixelated}#qr-dialog h2{color:var(--yellow)}.reveal{transition:opacity .8s,transform .8s}.js .reveal:not(.visible){opacity:0;transform:translateY(25px)}
@media(min-width:1500px){.intro{padding-top:120px;padding-bottom:230px}.work{padding-bottom:230px}.project-grid{gap:100px 36px}}
@media(max-width:767px){header{height:74px;padding:0 5%}.logo{width:145px}nav{gap:14px}nav a{font-size:12px}.hero{height:74svh;min-height:480px;max-height:720px}.hero .slide:first-child{object-position:47% center}.hero h1{font-size:clamp(30px,6.9vw,50px);padding:50px 16px 0}.slide-arrow{opacity:.65;width:30px;font-size:30px}.previous{left:4px}.next{right:4px}.intro{padding:70px 7% 85px}.intro h2{font-size:23px;line-height:1.3}.desktop{display:none}.intro p{line-height:1.6;font-size:13px}.section-title{margin-bottom:40px}.work{padding:0 5% 85px}.project-grid{gap:35px 18px}.project h3{font-size:14px;margin-top:12px}.view-project{opacity:1;font-size:8px;padding:5px 6px;bottom:6%;right:5%}.more{margin-top:50px}.expertise{padding:60px 7% 80px}.expertise .section-title{margin-bottom:38px}.services summary{padding:25px 0;font-size:22px}.services summary span{transform:scale(.7)}.service-body{font-size:14px;line-height:1.6}.service-body li{margin-bottom:12px}.brands{padding:90px 8%}.brands h2{margin-bottom:60px}.brand-grid{gap:40px 30px;grid-template-columns:repeat(2,1fr)}.brand-grid img{height:70px;max-width:145px}.contact{padding:60px 5% 0}.contact>h2{font-size:20px;line-height:1.35}.contact>p{font-size:12px;line-height:1.6}.contact h3{margin:50px 0 30px}.contact-grid{margin-bottom:50px}.contact-grid>button,.contact-grid>a{padding:12px 8px;gap:12px}.contact-grid img{height:88px;width:88px}.contact-grid span{font-size:10px;padding:4px 6px}footer{padding:20px 0 30px}}
@media(max-width:360px){nav{gap:9px}.logo{width:120px}.project-grid{grid-template-columns:1fr}.project h3{font-size:18px}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}.js .reveal:not(.visible){opacity:1;transform:none}}
@media(max-width:767px){.hero h1{font-size:clamp(22px,6vw,30px);letter-spacing:-.035em}}
/* Supplied vector states, cropped to equal artwork height for a stable transition. */
.more{position:relative;display:block;background:transparent;padding:0;width:226.85px;height:53.29px;transition:width .38s cubic-bezier(.22,.61,.36,1);border:0}
.more img{position:absolute;left:0;top:0;height:53.29px;max-width:none;transition:opacity .28s,transform .38s;pointer-events:none}
.more-normal{width:226.85px;opacity:1}.more-hover{width:308.31px;opacity:0;transform:translateX(-8px)}
.more:hover,.more:focus-visible{width:308.31px}.more:hover .more-normal,.more:focus-visible .more-normal{opacity:0}.more:hover .more-hover,.more:focus-visible .more-hover{opacity:1;transform:translateX(0)}
@media(max-width:767px){.more{width:170.14px;height:39.97px}.more img{height:39.97px}.more-normal{width:170.14px}.more-hover{width:231.23px}.more:hover,.more:focus-visible{width:231.23px}}
header{gap:24px}header nav{margin-left:auto}.language-switch{flex-shrink:0;border:1px solid #ffffff60;background:transparent;color:#fff;padding:7px 10px;font-size:14px;font-weight:600;line-height:1.2}.language-switch:hover{border-color:var(--yellow);color:var(--yellow)}
.more-zh{display:none!important}html[lang="zh-CN"]{font-family:Montserrat,"PingFang SC","Microsoft YaHei",sans-serif}html[lang="zh-CN"] .more img{visibility:hidden}html[lang="zh-CN"] .more{border:1px solid #eefd4060;border-radius:4px;color:var(--yellow);transition:width .38s,background .28s,color .28s}html[lang="zh-CN"] .more-zh{display:flex!important;justify-content:center;align-items:center;height:100%;gap:0;font-size:24px;white-space:nowrap}html[lang="zh-CN"] .more-zh b{width:0;opacity:0;overflow:hidden;transition:width .38s,opacity .28s;margin:0;font-size:40px;font-weight:400}html[lang="zh-CN"] .more:hover,html[lang="zh-CN"] .more:focus-visible{background:var(--yellow);color:var(--green)}html[lang="zh-CN"] .more:hover b,html[lang="zh-CN"] .more:focus-visible b{width:70px;opacity:1}html[lang="zh-CN"] .intro h2{line-height:1.5}html[lang="zh-CN"] .hero h1{line-height:1.3}
@media(max-width:767px){header{flex-wrap:wrap;justify-content:space-between;align-content:center;gap:10px 16px;height:100px}header .logo{width:136px}header nav{order:3;width:100%;justify-content:space-between;margin:0}header nav a{font-size:13px}.language-switch{font-size:12px;padding:5px 10px}html[lang="zh-CN"] .more-zh{font-size:18px}html[lang="zh-CN"] .more-zh b{font-size:30px}html[lang="zh-CN"] .hero h1{font-size:26px}html[lang="zh-CN"] .intro h2{font-size:22px}}

/* Geometric arrows keep the visible stroke centred independently of font metrics. */
.back-projects b,html[lang="zh-CN"] .more-zh b{position:relative;display:block;height:24px;flex-shrink:0;font-size:0;line-height:0;align-self:center}
.back-projects b::before,html[lang="zh-CN"] .more-zh b::before{content:"";position:absolute;left:3px;right:5px;top:50%;height:2px;background:currentColor;transform:translateY(-50%)}
.back-projects b::after,html[lang="zh-CN"] .more-zh b::after{content:"";position:absolute;right:5px;top:50%;width:12px;height:12px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:translateY(-50%) rotate(45deg)}
.slide-arrow{font-size:0;display:grid;place-items:center;padding:0;transform:translateY(-50%)}
.slide-arrow::before{content:"";width:12px;height:12px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}
.slide-arrow.previous::before{transform:rotate(-135deg)}

.diagonal-arrow{display:inline-block;width:.65em;height:.65em;margin-left:.55em;vertical-align:.05em;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;position:relative}.diagonal-arrow::before{content:"";position:absolute;right:0;top:0;width:.85em;height:1.5px;background:currentColor;transform-origin:right center;transform:rotate(-45deg)}

/* Keep every project image anchored to the same row, regardless of title wrapping. */
.project-grid{align-items:start}.project{align-self:start;align-content:start;display:flex;flex-direction:column;justify-content:flex-start}.project-picture{width:100%;flex:none;background:#000}.project-picture>img{width:calc(100% + 2px);height:calc(100% + 2px);max-width:none;margin:-1px;object-fit:cover}.project h3{width:100%}

/* Equal contact cells: image artwork and labels share one centre line. */
.contact-grid>button,.contact-grid>a{min-width:0;justify-content:flex-start;align-items:center}.contact-grid .email img{object-fit:contain;object-position:center;display:block}.contact-grid .email{justify-self:stretch;text-align:center}.contact-grid .email span{align-self:center}

.contact-grid .email img{transform:translate(-3.9%,4%)}

/* Align the visible logo artwork with the mobile navigation edge. */
@media(max-width:767px){header .logo{transform:translateX(-3.5688%)}}