:root{color-scheme:dark;--bg:#101010;--ink:#fafafa;--muted:#9a9a9a;--line:#ffffff26;font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif;font-synthesis:none}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:105px}body{margin:0;background:var(--bg);color:var(--ink)}body.locked{overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,video:focus-visible{outline:2px solid #fff;outline-offset:6px}button{touch-action:manipulation}img{max-width:100%}.skip-link{position:fixed;top:-100px;left:20px;z-index:100;background:#fff;color:#000;padding:12px}.skip-link:focus{top:10px}
.site-header{position:absolute;inset:0 0 auto;z-index:10;padding:12px 4.3vw;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;width:154px;height:154px;align-items:center}.brand img{display:block;filter:brightness(0) invert(1);width:154px;height:154px;object-fit:contain}.site-header nav{display:flex;gap:42px;align-items:center;font-size:15px;font-weight:500}.site-header nav a{padding:14px 0}.site-header nav a:hover{opacity:.65}.site-header nav span{margin-left:8px}
.hero{height:100svh;height:100dvh;min-height:0;position:relative;isolation:isolate;overflow:hidden;background:#27251f}.hero-video,.hero-shade{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.hero-shade{background:linear-gradient(180deg,rgba(0,0,0,.32),rgba(0,0,0,.12) 30%,rgba(0,0,0,.2) 70%,rgba(0,0,0,.5));pointer-events:none}.hero-copy{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:115px 24px 100px}.hero h1{font-size:clamp(44px,6.3vw,100px);font-weight:500;line-height:1.26;letter-spacing:.035em;margin:0;text-shadow:0 1px 28px #0002}.hero h1 span{display:block}.hero-bottom{position:absolute;bottom:45px;left:4.3vw;right:4.3vw;display:flex;justify-content:space-between;align-items:center;font-size:14px}.scroll-link{display:flex;align-items:center;gap:22px}.scroll-link>span{font-size:23px}.hero-toggle{border:1px solid #ffffff70;background:#0001;min-height:44px;padding:10px 16px;display:flex;gap:12px;align-items:center;border-radius:30px}.hero-toggle:hover{background:#ffffff22}
.works-root{background:var(--bg)}.site-footer{margin:0 4.3vw;padding:35px 0 42px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:24px;font-size:14px;color:#aaa}.site-footer>a{color:#eee}.site-footer span{font-size:12px;letter-spacing:.09em}
@media(min-width:1800px){.hero h1{font-size:120px}}
@media(max-width:700px){html{scroll-padding-top:70px}.site-header{padding:4px 22px}.brand,.brand img{width:112px;height:122px}.site-header nav{gap:24px;font-size:14px}.hero{min-height:0;max-height:none}.hero h1{font-size:clamp(35px,8.7vw,57px);line-height:1.4;letter-spacing:.015em}.hero-copy{padding-left:20px;padding-right:20px}.hero-bottom{bottom:30px;left:24px;right:24px}.hero-toggle{padding:10px 13px}.site-footer{margin:0 24px;font-size:13px}.site-footer span{font-size:11px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
.film-dialog{background:#080808;color:white;width:min(1400px,96vw);max-width:96vw;padding:0;border:1px solid #ffffff20;overflow:visible;max-height:95svh}.film-dialog::backdrop{background:rgba(0,0,0,.88);backdrop-filter:blur(10px)}.dialog-bar{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;gap:20px}.dialog-bar h2{font-size:16px;font-weight:400;margin:0;line-height:1.4}.dialog-bar button{border:0;background:none;display:flex;align-items:center;gap:15px;min-height:44px;white-space:nowrap;font-size:14px}.dialog-bar button span{font-size:28px;font-weight:300}.film-dialog video{width:100%;max-height:76svh;min-height:240px;display:block;background:#000}.player-message{text-align:center;padding:18px 24px;font-size:14px;color:#ddd}.player-message[hidden]{display:none}.player-message button{margin-left:20px;border:1px solid #888;background:none;padding:9px 12px}.about-page .site-header{position:relative}.about-main{padding:65px 8vw 100px}.about-intro{display:grid;grid-template-columns:1fr 1.4fr;gap:8vw;padding-bottom:80px}.about-intro h1{font-size:clamp(44px,6vw,88px);font-weight:500;margin:0;line-height:1.2}.about-copy .company-name{font-size:16px;color:#aaa;margin-top:0;margin-bottom:35px}.about-copy h2{font-size:clamp(26px,2.8vw,40px);font-weight:500;line-height:1.5;letter-spacing:.02em;margin:0 0 28px}.about-copy p{font-size:17px;line-height:2;color:#b5b5b5;margin:0 0 20px}.about-image{height:clamp(240px,38vw,580px);background:#202020;overflow:hidden;margin:0}.about-image img{width:100%;height:100%;object-fit:cover}.contact-block{padding:75px 0 0;display:flex;justify-content:space-between;align-items:flex-end;gap:30px}.contact-block h2{font-size:16px;font-weight:400;color:#aaa;margin:0 0 20px}.contact-number{font-size:clamp(34px,5.2vw,78px);line-height:1.15;letter-spacing:.005em;font-weight:400;white-space:nowrap}.contact-meta{margin-top:18px;display:flex;align-items:center;gap:24px;font-size:14px;color:#aaa}.copy-phone{border:0;border-bottom:1px solid #666;background:none;padding:4px 0}.contact-location{font-size:15px;color:#aaa}.copy-result{min-height:24px;margin-top:8px;color:#eee;font-size:14px}
@media(max-width:700px){.film-dialog{max-width:100vw;width:100vw;border:0}.dialog-bar{padding:10px 18px}.dialog-bar h2{font-size:14px}.film-dialog video{min-height:200px}.about-main{padding:36px 24px 60px}.about-intro{display:block;padding-bottom:30px}.about-intro h1{font-size:46px;margin-bottom:48px}.about-copy .company-name{font-size:14px;margin-bottom:24px}.about-copy h2{font-size:27px}.about-copy p{font-size:16px;line-height:1.9}.about-image{margin-left:-24px;margin-right:-24px}.contact-block{padding-top:45px;display:block}.contact-location{margin-top:28px}.contact-number{font-size:clamp(30px,8vw,46px)}.contact-meta{gap:20px}}

/* Brand opening title: a compact vertical qualifier and a broad, two-level wordmark. */
.hero-copy{padding:100px 22px 110px}
.hero h1{width:max-content;max-width:100%;font-weight:600;text-shadow:0 2px 30px #0003;animation:title-in 1s cubic-bezier(.2,.65,.25,1) both}
.hero h1 .hero-focus{display:flex;align-items:center;justify-content:center;gap:clamp(16px,2vw,30px)}
.hero h1 .hero-prefix{writing-mode:vertical-rl;font-size:clamp(16px,1.5vw,23px);font-weight:400;letter-spacing:.36em;line-height:1.2;padding-top:.36em;opacity:.95}
.hero h1 .hero-audience{font-size:clamp(82px,10.4vw,160px);font-weight:650;line-height:1.05;letter-spacing:.07em;margin-right:-.07em}
.hero h1 .hero-solution{font-size:clamp(31px,4.25vw,65px);font-weight:400;line-height:1.4;letter-spacing:.23em;margin-right:-.23em;margin-top:25px;padding-top:22px;border-top:1px solid #ffffff65}
@keyframes title-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
/* Reference geometry: central image, quiet side gutters, neighbouring images peeking in. */
.works-root{background:#000;padding:115px 0 30px;overflow:hidden}
.film-section{width:80%;max-width:1600px;margin:0 auto 112px}
.section-heading{margin:0 0 22px 22.7891%}
.section-heading h2{margin:0;font-size:17px;line-height:1.5;font-weight:500;letter-spacing:.06em}
.film-gallery{position:relative;overflow:hidden;touch-action:pan-y}
.film-track{--index:0;display:flex;gap:17.0068%;width:100%;transform:translateX(calc(22.7891% - var(--index)*71.4286%));transition:transform .72s cubic-bezier(.22,.61,.36,1);will-change:transform}
.film-slide{flex:0 0 54.4218%;min-width:0;margin:0}
.film-open{display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;background:#101010;position:relative;overflow:hidden}
.film-preview{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.film-open-hint{position:absolute;bottom:20px;right:22px;font-size:14px;letter-spacing:.06em;display:flex;align-items:center;gap:30px;opacity:0;transform:translateY(7px);transition:opacity .25s,transform .25s;text-shadow:0 1px 10px #000;background:#0006;padding:10px 13px}
.film-open:hover .film-open-hint,.film-open:focus-visible .film-open-hint{opacity:1;transform:none}
.film-open-hint>span{font-size:22px}
.film-slide h3{margin:17px 0 0;text-align:right;font-size:14px;font-weight:400;line-height:1.6;color:#ddd}
.gallery-controls{position:absolute;top:0;left:0;width:100%;height:0;padding-bottom:30.6122%;pointer-events:none}
.film-counter,.film-switches{position:absolute;top:0;height:100%;width:17.0068%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:25px}
.film-counter{left:5.7823%;font-size:18px;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.film-counter .current{font-weight:600}.film-counter .total{color:#888}
.count-line,.film-switches>span{height:1px;background:#ffffff6b;width:32%;max-width:64px}
.film-switches{right:5.7823%;pointer-events:auto;gap:10px}
.film-switches button{height:56px;width:70%;border:0;background:none;display:grid;place-items:center;transition:opacity .2s}
.film-switches button svg{width:14px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5}
.film-switches button:hover:not(:disabled){opacity:.55}.film-switches button:disabled{opacity:.22;cursor:default}
.gallery-bottom{margin:3px 22.7891% 0;display:flex;justify-content:flex-start;height:27px}
.preview-toggle{font-size:13px;min-width:44px;min-height:32px;padding:0;border:0;background:none;color:#777;text-align:left}
.preview-toggle:hover{color:#fff}
.site-footer{background:#101010}
@media(min-width:1600px){.works-root{padding-top:150px}.film-section{margin-bottom:150px}}
@media(max-width:900px){.film-section{width:94%}.film-counter,.film-switches{gap:15px}.film-switches button{height:46px}.section-heading h2{font-size:16px}}
@media(max-width:700px){
 .hero-copy{padding-bottom:95px}.hero h1 .hero-focus{gap:17px}.hero h1 .hero-audience{font-size:clamp(72px,20vw,105px);letter-spacing:.025em}.hero h1 .hero-prefix{font-size:16px;letter-spacing:.3em}.hero h1 .hero-solution{font-size:clamp(25px,6.8vw,36px);letter-spacing:.16em;margin-top:23px;padding-top:18px}
 .works-root{padding:65px 0 10px}.film-section{width:100%;margin-bottom:70px}.section-heading{margin:0 24px 20px}.section-heading h2{font-size:16px}
 .film-gallery{padding-bottom:65px}.film-track{gap:5%;transform:translateX(calc(8% - var(--index)*89%))}.film-slide{flex-basis:84%}.film-slide h3{margin-top:13px;font-size:14px}
 .gallery-controls{height:52px;padding:0;top:auto;bottom:0;left:8%;width:84%;display:flex;justify-content:space-between;align-items:center}
 .film-counter,.film-switches{position:static;width:auto;height:44px;flex-direction:row;gap:15px;font-size:14px}.count-line{width:34px}.film-switches>span{width:1px;height:18px}.film-switches button{height:44px;width:44px}.film-switches button svg{width:10px;height:16px}.film-switches .prev-film{order:-1}.film-switches>span{order:0}.film-switches .next-film{order:1}
 .gallery-bottom{height:0;margin:0 8%;position:relative;top:-47px;justify-content:center;pointer-events:none}.preview-toggle{pointer-events:auto;text-align:center;color:#aaa}
 .film-open-hint{display:none}
}

/* The hero source is cropped to its 1920 × 840 picture area, without letterbox bars. */
.hero-video{object-position:50% 35%}
.hero-shade{background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,.12) 26%,rgba(0,0,0,.2) 70%,rgba(0,0,0,.48))}
@media(max-height:650px){
 .site-header{padding-top:8px;padding-bottom:8px}
 .brand,.brand img{width:112px;height:112px}
 .hero-copy{padding-top:105px;padding-bottom:85px}
 .hero h1 .hero-audience{font-size:clamp(48px,15dvh,96px)}
 .hero h1 .hero-prefix{font-size:14px}
 .hero h1 .hero-solution{font-size:clamp(22px,6dvh,38px);margin-top:15px;padding-top:12px}
 .hero-bottom{bottom:20px}
}
@media(max-height:420px){
 .brand,.brand img{width:88px;height:88px}
 .hero-copy{padding-top:72px;padding-bottom:68px}
 .hero h1 .hero-solution{margin-top:10px;padding-top:8px}
 .hero-bottom{bottom:12px}
}

/* Registered company website footer */
.footer-meta{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:12px 24px}.site-footer .icp-link{font-size:12px;letter-spacing:0;color:#aaa}.site-footer .icp-link:hover{color:#fff}@media(max-width:700px){.site-footer{flex-wrap:wrap;gap:16px}.footer-meta{justify-content:flex-start;gap:10px 20px}.site-footer .icp-link{font-size:11px}}