:root{--ink:#1c201d;--dark:#171b18;--paper:#f3f1e9;--gold:#d7b77f;--muted:#a8aea7;--line:#d4d5cb}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;font-family:"Microsoft JhengHei","PingFang TC",sans-serif;color:var(--ink);background:var(--paper);line-height:1.8}a{color:inherit;text-decoration:none}button{font:inherit}a,button,summary{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #a47738;outline-offset:6px}::selection{background:var(--gold);color:var(--ink)}.wrap{max-width:1320px;width:calc(100% - 112px);margin:auto}.preview-bar{background:var(--gold);color:var(--ink);text-align:center;font-size:10px;letter-spacing:2px;padding:5px 15px}.preview-bar span{margin-left:16px;letter-spacing:1px}.site-header{position:sticky;top:0;z-index:20;background:var(--dark);color:var(--paper);border-bottom:1px solid #ffffff1c}.nav-inner{display:flex;justify-content:space-between;align-items:center;height:86px}.brand{display:flex;align-items:center;gap:18px}.wordmark{font-size:28px;letter-spacing:5px;font-weight:300;line-height:1.2;position:relative}.brand-dot{font-size:9px;position:absolute;right:-8px;top:-5px}.brand-zh{font-size:11px;letter-spacing:2px;border-left:1px solid #ffffff40;padding-left:18px}nav{display:flex;align-items:center;gap:27px;font-size:12px}nav a{transition:color .2s}nav a:hover{color:var(--gold)}.nav-contact{border:1px solid #bfa57385;padding:9px 15px}.nav-contact span{margin-left:20px}.menu-button{display:none}.hero{background:var(--dark);color:var(--paper);overflow:hidden}.hero-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:25px;align-items:center;min-height:650px;padding-top:38px;padding-bottom:34px}.eyebrow{font-size:10px;font-weight:600;letter-spacing:2px;color:var(--gold);margin:0 0 28px}.tiny-square{display:inline-block;width:7px;height:7px;background:var(--gold);margin-right:10px}.hero h1{font-size:clamp(34px,3.6vw,56px);line-height:1.6;font-weight:500;letter-spacing:-1.8px;margin:0 0 22px}.gold{color:var(--gold)}.hero-description{font-size:16px;color:#c1c5bc;line-height:2;margin-bottom:30px}.actions{display:flex;align-items:center;gap:26px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:35px;padding:14px 23px;font-size:13px;transition:background .2s,transform .2s}.gold-button{background:var(--gold);color:var(--dark)}.gold-button:hover{background:#e5c99c;transform:translateY(-2px)}.text-link{font-size:12px;border-bottom:1px solid #737b70;padding:10px 0}.text-link span{margin-left:16px}.hero-footnote{color:#8d968b;font-size:10px;letter-spacing:1px;margin-top:55px}.hero-footnote span{margin:0 12px;color:#4f5c4c}.hero-bottom{display:flex;justify-content:space-between;border-top:1px solid #ffffff20;padding:20px 0 24px;font-size:10px;letter-spacing:1px;color:#9ca498}.hero-bottom a span{margin-left:38px}.decode-art{height:480px;position:relative;isolation:isolate;background:radial-gradient(ellipse at 65% 55%,#88916e12,transparent 70%)}.art-axis{position:absolute;background:#d8cdb517;z-index:-1}.axis-x{height:1px;left:0;right:0;top:53%}.axis-y{width:1px;top:0;bottom:0;left:50%}.art-label{position:absolute;font-size:9px;letter-spacing:2px;color:#9caa92;top:12px;left:12px}.block{position:absolute;width:150px;height:150px;border:1px solid #bfa67870;transition:transform .6s}.block-one{top:80px;left:35px;transform:rotate(-14deg);background:repeating-linear-gradient(90deg,transparent 0 12px,#d4be951e 12px 13px)}.block-two{top:97px;left:232px;transform:rotate(9deg);background:linear-gradient(135deg,#d8b477,#8c7852);box-shadow:10px 16px 25px #0003}.block-three{top:277px;left:58px;transform:rotate(-6deg);background:linear-gradient(140deg,#344132,#202c24);border-color:#7e8c6f90}.block-four{top:262px;left:224px;background:linear-gradient(130deg,#cab181,#ad925f);display:grid;place-items:center;color:#2b3027;box-shadow:8px 12px 30px #0003}.block-four span{font-family:"PMingLiU",serif;font-size:66px;font-weight:300}.decode-art:hover .block-one{transform:rotate(-8deg) translate(4px,4px)}.decode-art:hover .block-two{transform:rotate(3deg)}.art-caption{position:absolute;bottom:0;left:12px;right:0;display:flex;justify-content:space-between;font-size:9px;color:#969e8e;letter-spacing:1px}.section{padding:110px 0}.section-heading{display:grid;grid-template-columns:1fr 2fr;gap:80px}.dark-eyebrow{color:#6c745e}.section-heading .eyebrow{padding-top:10px}h2{font-size:clamp(30px,3.1vw,44px);font-weight:500;line-height:1.5;letter-spacing:-1px;margin:0 0 24px}.section-intro{font-size:15px;color:#63685d;max-width:640px;margin-bottom:0}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:65px}.steps article{border-top:1px solid #929c82;padding-top:25px}.step-number{font-family:Georgia,serif;font-size:43px;color:#788168;line-height:1}.small-label{font-size:10px;letter-spacing:1.5px}.steps .small-label{margin:19px 0 8px;color:#7b806f}.steps h3{font-size:20px;font-weight:500;margin:0 0 12px}.steps p:not(.small-label){font-size:13px;color:#6a6f63;line-height:1.9}.step-output{display:block;font-size:10px;color:#6d755e;border-top:1px solid var(--line);margin-top:22px;padding-top:15px}.services{background:#e9e9df}.service-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:55px;margin-bottom:44px}.service-heading h2{margin-bottom:0}.service-heading>p{font-size:13px;color:#6b7065;max-width:380px;margin-bottom:7px}.service-list article{display:grid;grid-template-columns:50px 1fr 1.45fr .85fr;gap:24px;align-items:center;border-top:1px solid #c6cabb;padding:26px 0}.service-list article:last-child{border-bottom:1px solid #c6cabb}.service-number{font-size:11px;color:#7a826b}.service-list h3{font-size:20px;font-weight:500;margin:0}.service-list p{font-size:13px;color:#62695c;margin:0}.service-en{font-size:9px;letter-spacing:1px;text-align:right;color:#78816c}.service-bridge{margin-top:30px;display:flex;align-items:center;justify-content:space-between;font-size:12px;gap:20px}.new-tag{display:inline-block;font-size:10px;border:1px solid #98a084;padding:3px 9px;margin-right:12px;color:#58614d}.ai{background:#252e27;color:var(--paper)}.ai-heading{display:flex;justify-content:space-between;align-items:flex-start}.outline-tag{font-size:10px;letter-spacing:2px;border:1px solid #77846d;padding:4px 14px;color:#bdc9b0}.ai-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px}.ai h2{font-size:40px}.ai-lead{font-size:18px;color:var(--gold)}.muted{font-size:13px;color:#b0bcac;max-width:470px}.ai-capabilities{display:grid;grid-template-columns:1fr 1fr;gap:25px;margin-top:30px}.ai-capabilities>div{border-top:1px solid #ffffff30;padding-top:15px}.ai-capabilities span{color:var(--gold);font-size:8px;letter-spacing:.9px}.ai-capabilities h3{font-size:15px;font-weight:500}.ai-capabilities p{color:#b0bcac;font-size:12px}.format-diagram{background:#1d251f;border:1px solid #87957440;padding:28px 28px 20px;align-self:center}.diagram-top{display:flex;justify-content:space-between;font-size:8px;letter-spacing:1px;color:#a0ad91}.format-master{width:82%;margin:30px auto 0;position:relative;background:#c5be9c;color:#313b2e;padding:24px;min-height:170px;overflow:hidden}.format-master:after{content:"";position:absolute;width:100px;height:100px;border:1px solid #68725580;transform:rotate(28deg);right:-20px;bottom:-40px}.format-master>span:first-child{display:block;font-size:8px;letter-spacing:2px;margin-bottom:10px}.format-master strong{font-weight:500;font-size:23px;line-height:1.6}.mini-mark{display:block;font-size:8px;margin-top:15px}.diagram-connector{height:38px;border-left:1px solid #7b8869;width:1px;margin:auto}.formats{border-top:1px solid #7b8869;padding-top:19px;display:flex;align-items:center;justify-content:space-between;gap:12px}.format{background:#4b5944;border:1px solid #87957480;padding:8px;display:flex;flex-direction:column;justify-content:space-between;color:#d2d8c8;flex-shrink:0}.format span{font-size:8px}.format b{font-size:17px;font-weight:400}.square{width:27%;aspect-ratio:1}.portrait{width:23%;aspect-ratio:9/16;background:#70775a}.landscape{width:38%;aspect-ratio:16/9;background:#363f34}.diagram-note{font-size:9px;color:#9eac92;margin-top:25px}.ai-review{border-top:1px solid #ffffff26;margin-top:50px;padding-top:26px;display:flex;justify-content:space-between;gap:35px}.ai-review span{font-size:15px;white-space:nowrap;color:var(--gold)}.ai-review p{font-size:12px;color:#b0bcac;margin:0}.quote-section{padding:95px 0;text-align:center;background:#ded8c7}.quote-section .eyebrow{font-size:9px}blockquote{font-family:"PMingLiU","Songti TC",serif;font-size:clamp(24px,2.7vw,37px);line-height:1.9;margin:0;letter-spacing:1px}blockquote span{color:#687052}.quote-signature{font-size:10px;letter-spacing:2px;display:block;margin-top:28px;color:#747862}.experience .experience-note{font-size:12px}.case-list{border-top:1px solid #aeb5a2}details{border-bottom:1px solid var(--line)}summary{display:flex;align-items:center;gap:32px;padding:27px 0;cursor:pointer;list-style:none}summary::-webkit-details-marker{display:none}.case-num{font-family:Georgia,serif;font-size:25px;color:#8b947c}.case-category{font-size:10px;color:#777f69;letter-spacing:.5px}summary h3{font-size:21px;font-weight:500;margin:5px 0 0}.case-toggle{margin-left:auto;font-size:27px;color:#899477;font-weight:300}details[open] .case-toggle{transform:rotate(45deg)}.case-body{padding:0 60px 30px;display:grid;grid-template-columns:1fr 1fr;gap:60px}.case-body h4{font-weight:500;font-size:11px;color:#758066;margin:0 0 8px}.case-body p{font-size:13px;color:#686e60;margin:0}.contact{background:var(--dark);color:var(--paper)}.contact-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:80px;align-items:center}.contact h2{font-size:43px}.contact p{font-size:13px;color:#b2b9ac}.contact .button{margin-top:23px}.contact-details{padding-left:45px;border-left:1px solid #ffffff25}.contact-details .small-label{color:var(--gold);font-size:9px}.contact-details p{margin:24px 0}.email{display:flex;justify-content:space-between;font-size:clamp(14px,1.5vw,21px);border-bottom:1px solid #ffffff30;padding-bottom:17px;gap:12px}.instagram{display:flex;justify-content:space-between;font-size:12px;padding:18px 0;color:#bdc7b7}.cooperation{font-size:10px;color:#889581;margin-top:30px}.cooperation span{margin:0 9px}footer{background:var(--dark);color:#9ca493;border-top:1px solid #ffffff20;padding:28px 0}.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}.footer-inner .wordmark{font-size:22px}.footer-inner .brand-zh{font-size:9px}.footer-inner>span,.footer-inner>a:last-child{font-size:9px;letter-spacing:.5px}.skip{position:fixed;top:-70px;left:20px;padding:10px 20px;background:var(--gold);z-index:50}.skip:focus{top:10px}
@media(min-width:1500px){.hero-grid{min-height:710px}.decode-art{transform:scale(1.08)}}
@media(max-width:1150px){.wrap{width:calc(100% - 64px)}.brand-zh{display:none}nav{gap:22px}.hero-grid{grid-template-columns:1.25fr 1fr;min-height:580px}.hero h1{font-size:40px}.decode-art{transform:scale(.83);transform-origin:center right;margin-left:-50px}.ai-grid{gap:40px}.service-list article{grid-template-columns:30px 1fr 1.5fr}.service-en{display:none}.section-heading{gap:35px}.contact-grid{gap:35px}}
@media(max-width:800px){html{scroll-padding-top:85px}.wrap{width:calc(100% - 40px)}.nav-inner{height:72px}.wordmark{font-size:25px}.menu-button{display:flex;align-items:center;gap:18px;color:var(--paper);background:none;border:1px solid #77806a;padding:6px 12px;font-size:12px}.menu-button span{font-size:18px}nav{display:none;position:absolute;left:0;right:0;top:72px;padding:18px 24px 24px;background:var(--dark);border-bottom:1px solid #6b765c;flex-direction:column;align-items:stretch;gap:0}nav.open{display:flex}nav a{padding:12px;font-size:14px}.nav-contact{margin-top:10px;display:flex;justify-content:space-between}.hero-grid{grid-template-columns:1fr;gap:0;padding-top:54px;padding-bottom:0;min-height:auto}.hero h1{font-size:clamp(30px,5.8vw,44px);letter-spacing:-1.2px}.hero-description{font-size:15px}.hero-footnote{margin-top:32px}.decode-art{margin:15px auto 25px;width:410px;max-width:100%;height:465px;transform:scale(.9);transform-origin:center}.hero-bottom{font-size:9px;gap:15px}.hero-bottom a{white-space:nowrap}.hero-bottom a span{margin-left:12px}.section{padding:70px 0}.section-heading{grid-template-columns:1fr;gap:0}.section-heading .eyebrow{padding:0}h2{font-size:32px}.steps{grid-template-columns:1fr 1fr;gap:32px 24px;margin-top:38px}.service-heading{display:block;margin-bottom:32px}.service-heading>p{margin-top:22px}.service-list article{grid-template-columns:28px 1fr;gap:10px 16px;padding:23px 0}.service-list p{grid-column:2}.service-list h3{font-size:19px}.service-bridge{align-items:flex-start}.service-bridge>span:first-child{max-width:75%}.new-tag{display:block;width:max-content;margin-bottom:10px}.service-bridge>span:last-child{white-space:nowrap;font-size:10px}.ai-heading{gap:15px}.ai-heading .eyebrow{max-width:65%;line-height:1.7}.outline-tag{white-space:nowrap;font-size:9px;padding:4px 9px}.ai-grid{grid-template-columns:1fr;gap:30px}.ai h2{font-size:32px}.format-diagram{max-width:480px;width:100%;margin:auto}.ai-review{display:block;margin-top:35px}.ai-review p{margin-top:14px}.quote-section{padding:65px 0}blockquote{font-size:25px}.desktop-break{display:none}.quote-section .wrap{max-width:590px}.case-body{padding:0 0 25px 43px;gap:20px;grid-template-columns:1fr}summary{gap:18px;padding:24px 0}summary h3{font-size:18px}.case-category{font-size:9px}.case-toggle{font-size:22px}.contact-grid{grid-template-columns:1fr;gap:45px}.contact h2{font-size:34px}.contact-details{border-left:0;padding-left:0;border-top:1px solid #ffffff25;padding-top:30px}.email{font-size:20px}.footer-inner{flex-wrap:wrap;gap:20px}.footer-inner>span{order:3;width:100%}.footer-inner .brand-zh{display:block}.eyebrow{font-size:9px;letter-spacing:1.5px}}
@media(max-width:400px){.wrap{width:calc(100% - 36px)}.hero h1{font-size:29px;letter-spacing:-1.3px}.actions{gap:17px}.button{font-size:12px;padding:13px 15px;gap:20px}.text-link{font-size:11px}.decode-art{height:415px;transform:scale(.78);margin-top:-5px;margin-bottom:-25px;transform-origin:left center;width:410px;max-width:none}.steps h3{font-size:18px}.steps p:not(.small-label){font-size:12px}.step-output{font-size:9px}.format-diagram{padding:20px 18px 15px}.format-master strong{font-size:20px}.format span{font-size:7px}.ai-capabilities{gap:17px}.ai-capabilities h3{font-size:14px}.preview-bar{font-size:8px}.preview-bar span{font-size:9px;margin-left:10px}}
/* Supplied brand artwork and temporary AI imagery */
.brand-logo{display:block;width:166px;height:auto;max-height:42px;object-fit:contain}.footer-inner .brand-logo{width:136px}.ai-gallery{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-content:center}.ai-gallery figure{margin:0;min-width:0;background:#1b241e;border:1px solid #ffffff24;overflow:hidden}.ai-gallery img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}.ai-gallery figcaption{display:flex;justify-content:space-between;gap:8px;padding:11px 10px;color:#d8ddcf;font-size:10px}.ai-gallery figcaption span:first-child{color:var(--gold);font-size:9px;letter-spacing:.8px}.gallery-note{grid-column:1/-1;font-size:10px;color:#b4c0ad;margin:2px 0 0}
@media(max-width:800px){.brand-logo{width:155px}.footer-inner .brand-logo{width:130px}.ai-gallery{max-width:600px;width:100%;margin:auto}}
@media(max-width:400px){.brand-logo{width:146px}.ai-gallery{gap:9px}.ai-gallery figcaption{display:block;font-size:9px;padding:8px}.ai-gallery figcaption span{display:block}.ai-gallery figcaption span:first-child{font-size:8px}.gallery-note{font-size:9px}}
.extension-diagram{max-width:620px;margin:55px auto 0}.extension-diagram .format-master{width:78%}.extension-diagram .formats{max-width:470px;margin:auto}.extension-diagram .square{width:26%}.extension-diagram .portrait{width:22%}.extension-diagram .landscape{width:36%}
@media(max-width:800px){.extension-diagram{max-width:480px;margin-top:40px}}
@media(max-width:400px){.extension-diagram{padding:20px}.extension-diagram .format-master{width:88%}}
.hero-position{color:var(--gold);font-size:clamp(14px,1.5vw,19px);letter-spacing:.035em;margin:0 0 10px;line-height:1.7}.hero .hero-description{margin:0 0 34px;color:#c1c5bc}.steps article{min-height:220px}.ai-review{margin-top:48px}
@media(max-width:800px){.hero-position{font-size:14px}.hero .hero-description{font-size:14px;line-height:1.8}.steps article{min-height:0}}
@media(max-width:400px){.hero-position{font-size:13px}}
blockquote{font-family:inherit;font-weight:500;letter-spacing:-1px;line-height:1.7}.contact-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}.contact-actions .button{margin-top:0}.outline-button{border:1px solid var(--gold);color:var(--gold)}.outline-button:hover{background:#d7b77f12;transform:translateY(-2px)}.contact-details{border-left-color:#d7b77f40}.contact-group+.contact-group{margin-top:30px}.contact-group h3{font-size:18px;font-weight:600;color:var(--gold);margin:0 0 12px}.contact-group ul{list-style:none;padding:0;margin:0;font-size:17px;line-height:1.9;color:#d4d8d0}.contact-info-link{display:flex;align-items:center;gap:12px;font-size:18px;line-height:1.6;width:fit-content;padding:6px 0}.contact-info-link svg{width:20px;height:20px;flex:0 0 20px;color:var(--gold)}.contact-info-link:hover{color:var(--gold)}
@media(max-width:800px){.contact-group h3{font-size:17px}.contact-group ul{font-size:16px}.contact-info-link{font-size:16px}.contact-details{border-left:0}}
@media(max-width:400px){.contact-info-link{font-size:15px;gap:9px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}
/* Hero lettering and mobile animation */
.button{justify-content:center;gap:0;text-align:center}.block{display:grid;place-items:center}.block .block-letter{position:relative;z-index:2;color:#f3f1e9;font-family:Arial,sans-serif;font-size:70px;font-weight:300;line-height:1}.art-monogram{position:absolute;top:176px;left:145px;z-index:4;display:flex;color:#ad817a;font-family:Arial,sans-serif;font-size:92px;font-weight:300;letter-spacing:-18px;line-height:1;pointer-events:none}.art-brand{position:absolute;right:7px;bottom:4px;z-index:5;color:#f3f1e9;font-family:"DFKai-SB","KaiTi","BiauKai",serif;font-size:21px;letter-spacing:4px;white-space:nowrap;pointer-events:none}.decode-art.is-active .block-one{transform:rotate(-8deg) translate(4px,4px)}.decode-art.is-active .block-two{transform:rotate(3deg)}@media(max-width:800px){.nav-contact{justify-content:center}}
/* Match hero brand label typography and DE color */
.art-brand{color:#ad817a;font-family:"Microsoft JhengHei","PingFang TC",sans-serif}
/* Match section eyebrow size to Let’s Talk */
#top .eyebrow,#approach .eyebrow,#services .eyebrow,#ai .eyebrow{font-size:13px}


/* DECODE hero: subtle continuous motion, maintaining the original composition */
@keyframes decode-float-c {
  0%,100% {transform:translate3d(0,0,0) rotate(-14deg)}
  50% {transform:translate3d(5px,-9px,0) rotate(-8deg)}
}
@keyframes decode-float-o {
  0%,100% {transform:translate3d(0,0,0) rotate(9deg)}
  50% {transform:translate3d(-5px,7px,0) rotate(4deg)}
}
@keyframes decode-float-d {
  0%,100% {transform:translate3d(0,0,0) rotate(-6deg)}
  50% {transform:translate3d(5px,8px,0) rotate(-10deg)}
}
@keyframes decode-float-e {
  0%,100% {transform:translate3d(0,0,0) rotate(0deg)}
  50% {transform:translate3d(-5px,-7px,0) rotate(3deg)}
}
@media (prefers-reduced-motion: no-preference) {
  .decode-art.is-active .block {
    transition:none;
    animation-timing-function:ease-in-out;
    animation-iteration-count:infinite;
    animation-fill-mode:both;
    will-change:transform;
  }
  .decode-art.is-active .block-one {animation-name:decode-float-c;animation-duration:11s}
  .decode-art.is-active .block-two {animation-name:decode-float-o;animation-duration:12s}
  .decode-art.is-active .block-three {animation-name:decode-float-d;animation-duration:10s}
  .decode-art.is-active .block-four {animation-name:decode-float-e;animation-duration:11.5s}
  .decode-art:hover .block {animation-play-state:paused}
}
@media (prefers-reduced-motion: reduce) {
  .decode-art .block, .decode-art.is-active .block {animation:none!important;transition:none!important}
  .decode-art.is-active .block-one, .decode-art:hover .block-one {transform:rotate(-14deg)}
  .decode-art.is-active .block-two, .decode-art:hover .block-two {transform:rotate(9deg)}
}