/* WHITE PREVIEW override — 2026-10-20 — preview only */
:root{--bg:#fff;--panel:#f5f5f3;--fg:#111;--grey:#6e6e69;--dim:#9a9a95;--body:#3a3a37;--line:#e5e5e2}
html,body{background:#fff;color:#111}
@media (hover:hover){.nav ul a:not(.cta):hover{color:#000}}
@media (hover:hover){.cta:hover{background:#111;color:#fff}}
.tile,.mas .tm,.rel .tm,.side .mini.nxc .nim,.mini.mnext .nim{background:#f0f0ee}
.tile .cap{background:rgba(255,255,255,.9);color:#111}
.mas .tm::after,.rel .tm::after{background:rgba(255,255,255,.72)}
footer .o,.cta-o{background:#fff;color:#111;border-color:rgba(0,0,0,.85)}
.cta-o:focus-visible{background:#111;color:#fff}@media (hover:hover){footer .o:hover,.cta-o:hover{background:#111;color:#fff}}
.pgn a,.mfil a{border-color:rgba(0,0,0,.18)}
.mfil a{color:#333}.mfil a.on{background:#111;color:#fff}
.safe{background:linear-gradient(#fff 78%,rgba(255,255,255,0))}
@media (hover:hover){.all:hover{background:#111;color:#fff}}
/* text over the dark hero video stays white */
.hero-title,.hero-title h1,.hero-title p,.hero-cap{color:#fff}
/* nav links: auto-contrast (white over video, black over white) */
.nav ul li a:not(.cta){color:#fff;mix-blend-mode:difference}
@media (max-width:820px),(max-width:1023px) and (max-height:560px){
 .mbar{background:rgba(255,255,255,.92)}
 /* mobile logo: difference blend (white over video, black over white) */
 .logo{mix-blend-mode:difference;filter:none}
 .logo img{filter:invert(1)}
}
/* hard-coded light greys from inline page styles */
.sec .v p,.c-desc,.how ul{color:#3a3a37!important}
.k .no,.relh,.side .mini.nxc .mono,.side .mini.nxc .ar,.mini.mnext .mono,.mini.mnext .ar{color:#6e6e69!important}
.mas .tile .cap .cc,.rel .tile .cap .cc{color:#6e6e69!important}
.lead,.sec{border-top-color:#e5e5e2!important}
.c-media{background:#f0f0ee!important}
.all{background:#f3f3f1!important;color:#111}
.hero-cap{color:#e8e8e4!important}

/* logo v12: solid colours, never blended.
   Default = logo asset as-is (#0A0A0A). Over the home hero video (html.logo-hero, set by script) = pure white + the dark-site mobile light shadow. */
.logo,.logo img{mix-blend-mode:normal!important}
.logo{filter:none!important;opacity:1}
.logo img{filter:none!important}
html.logo-hero .logo{filter:drop-shadow(0 0 1px rgba(0,0,0,.18)) drop-shadow(0 1px 3px rgba(0,0,0,.22))!important}
html.logo-hero .logo img{filter:brightness(0) invert(1)!important}

/* logo crispness v14: snap to whole device pixels (left was 31.67px from 2.2vw, width 117.83px → strokes smeared across 2 px) */
.logo{left:round(down,var(--pad),1px)}
.logo img{width:118px;height:42px}
@media (max-width:820px),(max-width:1023px) and (max-height:560px){.logo img{width:95px;height:34px}}

/* logo enlarged v15 (Dagang): desktop 152x54, mobile 123x44; vertically centred on the nav/CTA line (centre y=39) */
.logo{top:12px}
.logo img{width:152px;height:54px}
@media (max-width:820px),(max-width:1023px) and (max-height:560px){.logo{top:17px}.logo img{width:123px;height:44px}}

/* nav text v16: solid colours, no blend. #111 on white; white over the home hero video (html.nav-hero, set by script) */
.nav ul li a:not(.cta){mix-blend-mode:normal!important;color:#111!important}
@media (hover:hover){.nav ul li a:not(.cta):hover{color:#111!important}}
html.nav-hero .nav ul li a:not(.cta){color:#fff!important}@media (hover:hover){html.nav-hero .nav ul li a:not(.cta):hover{color:#fff!important}}

/* CTA v17: hover/focus = #111 bg + #fff text (base .cta has color:#0a0a0a!important, so !important needed) */
.nav .cta{transition:background-color .2s ease,color .2s ease}
.nav .cta:focus-visible{background:#111!important;color:#fff!important}@media (hover:hover){.nav .cta:hover{background:#111!important;color:#fff!important}}
.nav .cta:focus-visible{outline:2px solid #111;outline-offset:2px}
html.nav-hero .nav .cta:focus-visible{outline-color:#fff}

/* v18 home case-intro '查看案例' (.w-body .more) ONLY: old-site .pagel span dot, rules 1:1 as v8 exact */
.w-body .pg-l{position:relative;display:inline-block;width:52.5px;height:52.5px;line-height:52.5px;margin-top:auto;text-align:center;border-radius:50%;isolation:isolate;vertical-align:middle;flex:none}
.w-body .pg-l::after{content:"";width:0;height:0;display:block;background:#dfff00;border-radius:50%;position:absolute;bottom:0;top:0;right:0;left:0;margin:auto;transition:all .3s;z-index:-999}
@media (hover:hover){.w-body .pg-l:hover::after{content:"";width:75px;height:75px;display:block;background:#dfff00;border-radius:50%;position:absolute;bottom:-11.625px;top:-11.625px;right:-11.625px;left:-11.625px;margin:auto;z-index:-999}}
.w-body .pg-l img{width:18.75px;height:16.5px;margin-top:18px;mix-blend-mode:multiply;vertical-align:top}
/* placement: keep the link's line height (no layout shift); underline on the text only */
.w-body .more{border-bottom:0;display:inline-flex;align-items:center}
.w-body .more .more-tx{border-bottom:1px solid currentColor}
.w-body .more .pg-l{margin:-14.75px 0 -14.75px 2px}
@media (hover:hover){.w-body .more:hover{color:#111;opacity:1}}
@media (hover:none),(pointer:coarse){.w-body .pg-l::after{display:none}}
@media (prefers-reduced-motion:reduce){.w-body .pg-l::after{transition:none}}
/* v19 '查看案例' fixes: arrow exactly centered in 52.5px circle; text stacked above yellow dot */
.w-body .more{isolation:isolate}
.w-body .more .more-tx{position:relative;z-index:2}
.w-body .more .pg-l{z-index:1}
.w-body .pg-l img{position:absolute;top:50%;left:50%;margin:0;transform:translate(-50%,-50%);display:block}
/* v20: all side-panel text above the '查看案例' dot */
.w-body .c-meta,.w-body h3,.w-body .c-desc{position:relative;z-index:3}
/* CTA v21: hover/focus text = brand yellow on #111 */
.nav .cta:focus-visible{background:#111!important;color:#dfff00!important}@media (hover:hover){.nav .cta:hover{background:#111!important;color:#dfff00!important}}
/* v23 '查看全部案例' (.all): hover/focus = #111 bg + #dfff00 text/arrow; visible dark focus outline */
@media (hover:hover){.all:hover{background:#111!important;color:#dfff00}}
.all:focus-visible{background:#111!important;color:#dfff00;outline:2px solid #111;outline-offset:3px}
/* v24 工作方法论 article links: hover/focus = #111 + black underline */
.how li a:focus-visible{color:#111;text-decoration:underline;text-decoration-color:#111;text-underline-offset:4px}@media (hover:hover){.how li a:hover{color:#111;text-decoration:underline;text-decoration-color:#111;text-underline-offset:4px}}
/* v26 工作方法论 group titles: old-site .b bar (v10 approach): #dfff00, height .5em behind lower half of text, 0->100% L->R, .4s in / .7s out */
.how h3 a{position:relative;isolation:isolate;color:#111}
.how h3 a::before{content:"";position:absolute;left:0;top:50%;height:.5em;width:0%;background:#dfff00;z-index:-1;transition:all .7s;pointer-events:none}
.how h3 a:focus-visible::before{width:100%;transition:all .4s}@media (hover:hover){.how h3 a:hover::before{width:100%;transition:all .4s}}
@media (prefers-reduced-motion:reduce){.how h3 a::before{transition:none}}
/* v27 footer menu (footer nav a): old-site bar like .how h3 a; no color/underline change */
footer nav a{position:relative;isolation:isolate}
footer nav a:focus-visible{color:inherit;text-decoration:none}@media (hover:hover){footer nav a:hover{color:inherit;text-decoration:none}}
footer nav a::before{content:"";position:absolute;left:0;top:50%;height:.5em;width:0%;background:#dfff00;z-index:-1;transition:all .7s;pointer-events:none}
footer nav a:focus-visible::before{width:100%;transition:all .4s}@media (hover:hover){footer nav a:hover::before{width:100%;transition:all .4s}}
@media (prefers-reduced-motion:reduce){footer nav a::before{transition:none}}
footer nav{align-items:flex-start} /* v28: stop flex stretch so the bar centres on the text */
footer nav{gap:42px} /* v29: footer menu spacing 28px -> 42px (1.5x) */
/* v30 touch only: tap targets >= 44px with no net layout shift (negative margins offset the extra padding) */
@media (hover:none),(pointer:coarse){
footer a{padding:10.5px 0;margin:-6.5px 0}
footer nav a{padding:10.5px 9px;margin:-6.5px -9px}
footer nav a::before{left:9px}
footer nav a:focus-visible::before{width:calc(100% - 18px)}
.how h3 a,.how li a{min-height:44px;margin:-2px 0}
.nav .cta{position:relative}
.nav .cta::after{content:"";position:absolute;left:0;right:0;top:-4px;bottom:-4px}
}

/* v32 SEO: carousel titles are div (not headings); hero h1 visually-hidden suffix */
.w-name .w-nt{font-size:clamp(24px,2.6vw,38px);font-weight:300;line-height:1.25;color:var(--grey)}
.w-body .w-bt{font-size:18px;font-weight:500;margin:10px 0 8px;line-height:1.4;position:relative;z-index:3}
.hero h1 .vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}