:root{
  --canvas:#F5F0EF; --card:#FFFFFF; --ink:#463321; --ink-70:rgba(70,51,33,.72); --ink-55:rgba(70,51,33,.55);
  --line:rgba(70,51,33,.14); --dark:#2B1F15; --espresso:#463321; --gold:#E8C893; --teal:#89B0B9; --blush:#E4B4A8; --latte:#E1D1C2;
  --serif:'Chocolate Classical Sans','Noto Sans TC','PingFang TC','Microsoft JhengHei',sans-serif; --sans:'Noto Sans TC','PingFang TC','Microsoft JhengHei',sans-serif;
  --band:80px; --pad:24px; --gap:24px; --r-card:8px; --r-nav:32px; --wrap-px:32px;
  color-scheme:light;
}
@media (max-width:1024px){:root{--band:64px; --gap:20px; --wrap-px:24px}}
@media (max-width:760px){:root{--band:48px; --pad:20px; --gap:16px; --wrap-px:4px}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--sans);font-weight:400;font-size:16px;line-height:1.62;padding-inline:16px;padding-block:0;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-decoration:none}
a:focus-visible,label:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
h1,h2{margin:0;font-family:var(--serif);font-weight:400;letter-spacing:.01em;color:var(--ink);text-wrap:balance}
p{margin:0}
.wrap{max-width:1200px;margin:0 auto;padding-inline:var(--wrap-px)}
.narrow{max-width:760px}
.full{margin-inline:-16px;padding-inline:16px}
/* pills */
.pill-btn{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 8px 0 24px;border-radius:9999px;font-size:15px;white-space:nowrap;transition:background .2s,color .2s,transform .2s}
.pill-btn:not(:has(.pill-arrow)){padding:0 24px}
.pill-btn.dark{background:var(--espresso);color:#FFFFFF} .pill-btn.dark:hover{background:var(--dark)}
.pill-btn.gold{background:var(--gold);color:var(--ink)} .pill-btn.gold:hover{background:#DDB978}
.pill-btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)} .pill-btn.ghost:hover{background:var(--card)}
.pill-btn.forest{background:var(--gold);color:var(--ink);min-height:30px;padding:0 14px;font-size:13px}
.pill-arrow{width:32px;height:32px;border-radius:9999px;display:grid;place-items:center;background:rgba(255,255,255,.16);transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.pill-btn.gold .pill-arrow{background:rgba(70,51,33,.12)}
.pill-arrow svg{width:16px;height:16px}
.pill-btn:hover .pill-arrow{transform:translateX(4px)}
.btn-row{display:flex;gap:12px;flex-wrap:wrap} .btn-row.center{justify-content:center}
/* announcement + nav */
.announce{background:var(--dark);color:#FFFFFF;font-size:14px}
.full-announce{margin-inline:-16px}
.announce{margin-inline:-16px;padding-inline:16px}
.announce-row{display:flex;align-items:center;justify-content:center;text-align:center;gap:14px;min-height:40px;flex-wrap:wrap;padding-block:6px}
.announce-link{color:#FFFFFF;text-decoration:underline;text-decoration-color:rgba(255,255,255,.45);text-underline-offset:4px;transition:text-decoration-color .2s}
.announce-link:hover{text-decoration-color:#FFFFFF}
.nav{position:sticky;top:0;z-index:30;background:var(--card);border-bottom:1px solid var(--line);margin-inline:-16px;padding-inline:16px}
.nav-row{display:flex;align-items:center;gap:24px;min-height:68px;position:relative}
.brand{display:flex;align-items:center;gap:12px}
.brand-text{display:flex;flex-direction:column;line-height:1.2}
.brand-zh{font-family:var(--serif);font-size:20px;letter-spacing:.08em}
.brand-en{font-size:11px;color:var(--ink-55);letter-spacing:.06em}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:6px}
.nav-links>a:not(.pill-btn){padding:8px 14px;border-radius:9999px;font-size:15px;transition:background .2s}
.nav-links>a:not(.pill-btn):hover{background:var(--canvas)}
.nav-links>a[aria-current="page"]{background:var(--latte)}
.nav-links .pill-btn{margin-left:10px}
.nav-toggle{position:absolute;opacity:0;pointer-events:none}
.burger{display:none;margin-left:auto;width:44px;height:44px;border-radius:9999px;box-shadow:inset 0 0 0 1px var(--ink);flex-direction:column;justify-content:center;align-items:center;gap:6px;cursor:pointer}
.burger span{width:18px;height:1.5px;background:var(--ink);transition:transform .25s}
.nav-toggle:checked~.burger span:first-child{transform:translateY(3.75px) rotate(45deg)} .nav-toggle:checked~.burger span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
/* hero */
.hero{position:relative;overflow:hidden;margin-inline:-16px;padding-inline:16px;padding-block:96px 104px;isolation:isolate}
.hero-bg{position:absolute;inset:-60px;background-size:cover;background-position:center;filter:blur(38px) saturate(1.15);transform:translateY(var(--sy,0)) scale(1.1);z-index:-2;animation:drift 22s ease-in-out infinite alternate}
.hero-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(245,240,239,.55),rgba(245,240,239,.35) 55%,rgba(245,240,239,.8));z-index:-1}
@keyframes drift{from{background-position:30% 40%}to{background-position:70% 60%}}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:48px;align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:24px}
.hero h1{font-size:clamp(40px,5.6vw,72px);line-height:1.08}
.hero-sub{font-size:18px;color:var(--ink-70);max-width:40ch}
.hero-card{background:var(--card);border-radius:var(--r-card);padding:var(--pad);display:flex;flex-direction:column;gap:14px;border:1px solid rgba(255,255,255,.6)}
.widget-top{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--ink-55)}
.widget-brand{font-family:var(--serif);font-size:15px;color:var(--ink)}
.dots{display:flex;gap:6px} .dots i{width:8px;height:8px;border-radius:50%;background:var(--latte)} .dots i:nth-child(1){background:var(--gold)} .dots i:nth-child(2){background:var(--teal)} .dots i:nth-child(3){background:var(--blush)}
.widget-img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:6px}
.widget-label{font-family:var(--serif);font-size:30px;line-height:1.2}
.widget-lines{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--ink-70)}
.k{display:inline-block;min-width:44px;color:var(--ink-55);margin-right:10px;font-size:13px}
.facts{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.facts>div{display:grid;grid-template-columns:72px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.facts a{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.hero-card .pill-btn{align-self:flex-start}
.hero-mark{display:grid;place-items:center}
.hero-mark img{width:min(280px,70%);height:auto}
/* client strip */
.strip{overflow:hidden;background:var(--canvas);margin-inline:-16px;border-bottom:1px solid var(--line);padding-block:26px}
.strip-track{display:flex;gap:64px;width:max-content;animation:marquee 36s linear infinite}
.strip:hover .strip-track{animation-play-state:paused}
.client{font-family:var(--serif);font-size:22px;color:var(--ink);opacity:.55;white-space:nowrap}
@keyframes marquee{to{transform:translateX(-50%)}}
/* bands + intros */
.band{padding-block:var(--band)}
.band-white{background:var(--card);margin-inline:-16px;padding-inline:16px}
.band-top{padding-top:calc(var(--band) - 16px)}
.intro{text-align:center;max-width:720px;margin:0 auto 48px;display:flex;flex-direction:column;gap:18px;align-items:center}
.intro h2{font-size:clamp(30px,3.8vw,48px);line-height:1.15}
.intro p{font-size:18px;color:var(--ink-70);max-width:640px}
.intro-left{text-align:left;align-items:flex-start;margin:0 0 20px}
.lede{font-size:18px;line-height:1.7;color:var(--ink-70)}
/* accent-bar cards */
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.acard{position:relative;background:var(--card);border-radius:var(--r-card);padding:var(--pad) var(--pad) var(--pad) calc(var(--pad) + 8px);display:flex;flex-direction:column;gap:12px;border:1px solid var(--line);overflow:hidden}
.band-white .acard{background:var(--canvas)}
.acard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--bar);transform:scaleY(0);transform-origin:top;transition:transform .8s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.acard.in::before{transform:none}
.acard-title{font-family:var(--serif);font-size:clamp(22px,2.2vw,30px);line-height:1.25}
.acard-body{font-size:15px;color:var(--ink-70)}
.acard-more{margin-top:auto;padding-top:8px;display:inline-flex;align-items:center;gap:6px;font-size:14px}
.acard-more svg{width:14px;height:14px;transition:transform .25s}
a.acard:hover .acard-more svg{transform:translateX(4px)}
a.acard{transition:border-color .2s} a.acard:hover{border-color:var(--ink)}
/* full-bleed photo cards */
.fcard{position:relative;display:block;border-radius:var(--r-card);overflow:hidden;aspect-ratio:4/5;background:var(--latte);color:#FFFFFF;isolation:isolate}
.fcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1);z-index:-2}
.fcard:hover img{transform:scale(1.05)}
.fcard-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(43,31,21,0) 45%,rgba(43,31,21,.62));z-index:-1}
.fcard-tags{position:absolute;left:16px;top:16px;display:flex;gap:6px}
.chip-lite{font-size:12px;padding:4px 10px;border-radius:9999px;background:rgba(255,255,255,.88);color:var(--ink)}
.fcard-text{position:absolute;left:20px;right:84px;bottom:20px;display:flex;flex-direction:column;gap:6px}
.fcard-title{font-family:var(--serif);font-size:clamp(22px,2.2vw,30px);line-height:1.2}
.fcard-body{font-size:14px;opacity:.85}
.round-btn{position:absolute;right:16px;bottom:16px;width:48px;height:48px;border-radius:9999px;background:var(--dark);color:#FFFFFF;display:grid;place-items:center;transition:transform .3s cubic-bezier(.2,.7,.2,1),background .2s}
.round-btn svg{width:18px;height:18px}
.fcard:hover .round-btn{transform:translateX(3px) rotate(-45deg);background:var(--gold);color:var(--ink)}
.fcard-next{background:var(--card);color:var(--ink);border:1px dashed var(--ink-55)}
.fcard-next .fcard-body{opacity:.72}
.fcard-wide{aspect-ratio:4/3}
.brand-card{background:var(--latte)}
.brand-card img{object-fit:contain;padding:13%;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.brand-card:hover img{transform:scale(1.03)}
.brand-card .fcard-shade{background:linear-gradient(180deg,rgba(43,31,21,0) 42%,rgba(43,31,21,.55))}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px;align-items:center}
.split .lede{margin-bottom:24px}
/* filters */
#pf{position:relative} #pf>input{position:absolute;opacity:0;pointer-events:none}
.filters{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-bottom:40px}
.seg{display:flex;gap:2px;background:var(--card);border-radius:9999px;padding:4px;border:1px solid var(--line)}
.seg label{padding:8px 16px;border-radius:9999px;font-size:14px;cursor:pointer;transition:background .2s,color .2s}
#s-all:checked~.filters label[for="s-all"],#s-done:checked~.filters label[for="s-done"],#s-wip:checked~.filters label[for="s-wip"],
#c-all:checked~.filters label[for="c-all"],#c-b2b:checked~.filters label[for="c-b2b"],#c-b2c:checked~.filters label[for="c-b2c"]{background:var(--espresso);color:#FFFFFF}
#s-done:checked~.grid-3 .fcard[data-status]:not([data-status="done"]),#s-wip:checked~.grid-3 .fcard[data-status]:not([data-status="wip"]),
#c-b2b:checked~.grid-3 .fcard[data-client]:not([data-client="b2b"]),#c-b2c:checked~.grid-3 .fcard[data-client]:not([data-client="b2c"]){display:none}
/* services page */
.svc-stack{display:flex;flex-direction:column;gap:var(--gap)}
.svc{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;background:var(--card);border-radius:var(--r-card);border:1px solid var(--line);padding:32px 32px 32px 44px;scroll-margin-top:120px;overflow:hidden}
.svc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--bar);transform:scaleY(0);transform-origin:top;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.svc.in::before{transform:none}
.svc-l{display:flex;flex-direction:column;gap:14px}
.svc-en{font-size:13px;color:var(--ink-55);letter-spacing:.04em}
.svc h2{font-size:clamp(28px,3vw,40px);line-height:1.2}
.svc-l p{color:var(--ink-70)}
.svc-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.svc-list li{padding:12px 0;border-bottom:1px solid var(--line);font-size:15px}
/* gallery + pager */
.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.gal{margin:0;display:flex;flex-direction:column;gap:10px}
.gal img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-card)}
.gal figcaption{font-size:14px;color:var(--ink-55)}
.pager{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.pager-link{display:inline-flex;align-items:center;gap:14px;font-family:var(--serif);font-size:22px}
.pager-link .round-btn{position:static}
.round-btn.flip svg{transform:rotate(180deg)}
.pager-link:hover .round-btn{background:var(--gold);color:var(--ink)}
/* footer */
.foot{background:var(--dark);color:#FFFFFF;margin-inline:-16px;padding-inline:16px}
.foot a{color:#FFFFFF}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:40px;padding-block:72px 48px}
.foot-brand{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.foot-line{font-family:var(--serif);font-size:26px;line-height:1.3}
.foot-col{display:flex;flex-direction:column;gap:10px;font-size:15px}
.foot-col p{color:rgba(255,255,255,.72);font-size:14px}
.foot-col a:hover{text-decoration:underline;text-underline-offset:3px}
.foot-h{font-size:13px;color:rgba(255,255,255,.5);margin-bottom:4px}
.foot-bar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:20px 28px;border-top:1px solid rgba(255,255,255,.14);font-size:13px;color:rgba(255,255,255,.6)}
/* motion */
.reveal{opacity:.35;transform:translateY(18px);transition:opacity .8s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform .8s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.reveal.in{opacity:1;transform:none}
.hero .reveal:nth-child(2){--d:.08s} .hero .reveal:nth-child(3){--d:.16s} .hero-card.reveal{--d:.24s}
/* breakpoints */
@media (max-width:1024px){
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid{grid-template-columns:repeat(3,minmax(0,1fr))} .foot-brand{grid-column:1 / -1}
  .svc{grid-template-columns:1fr;gap:24px}
}
@media (max-width:900px){
  .burger{display:flex}
  .nav-links{display:none;position:absolute;top:100%;left:-16px;right:-16px;flex-direction:column;align-items:stretch;gap:0;background:var(--card);border-bottom:1px solid var(--line);padding:8px 16px 16px}
  .nav-links>a:not(.pill-btn){padding:14px 8px;border-radius:0;border-bottom:1px solid var(--line)} .nav-links>a[aria-current="page"]{background:transparent;font-weight:400;text-decoration:underline;text-underline-offset:6px}
  .nav-links .pill-btn{margin:14px 0 0;align-self:flex-start}
  .nav-toggle:checked~.nav-links{display:flex}
  .hero-grid,.split{grid-template-columns:1fr}
  .hero{padding-block:64px}
  .hero-mark img{width:min(180px,50%)}
}
@media (max-width:760px){
  .announce-row{font-size:13px}
  .grid-4,.grid-3,.grid-2,.gallery,.foot-grid{grid-template-columns:1fr}
  .fcard{aspect-ratio:4/3}
  .svc{padding:24px 20px 24px 28px}
  .brand-en{display:none}
  .hero h1{font-size:40px}
  .client{font-size:18px}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none} .acard::before,.svc::before{transform:none}
}