/* ============ Tokens ============ */
:root{
  --ground:#07131B; --surface:#0B1C27; --surface-2:#10273A;
  --ink:#E9F1F4; --ink-2:#B9CAD4; --muted:#88A0AF; --faint:#7A92A1;
  --line:rgba(190,220,240,.10); --line-strong:rgba(190,220,240,.22);
  --accent:#3DB2EE; --accent-2:#8FD4F7; --accent-ink:#04121B; --accent-soft:rgba(61,178,238,.12);
  --past:#5A7382;
  --serif:"Noto Serif TC","Songti TC","PMingLiU",serif;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;
  --maxw:1240px; --gut:clamp(20px,4vw,48px);
  --ease:cubic-bezier(.2,.7,.1,1);
  color-scheme:dark;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --ground:#EEF4F7; --surface:#F8FBFC; --surface-2:#E1EBF1;
    --ink:#08161F; --ink-2:#2B3F4C; --muted:#4E6474; --faint:#587080;
    --line:rgba(8,22,31,.11); --line-strong:rgba(8,22,31,.22);
    --accent:#0B6FA8; --accent-2:#0B6FA8; --accent-ink:#FFFFFF; --accent-soft:rgba(11,111,168,.09);
    --past:#778D9C;
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --ground:#EEF4F7; --surface:#F8FBFC; --surface-2:#E1EBF1;
  --ink:#08161F; --ink-2:#2B3F4C; --muted:#4E6474; --faint:#587080;
  --line:rgba(8,22,31,.11); --line-strong:rgba(8,22,31,.22);
  --accent:#0B6FA8; --accent-2:#0B6FA8; --accent-ink:#FFFFFF; --accent-soft:rgba(11,111,168,.09);
  --past:#778D9C;
  color-scheme:light;
}

/* ============ Base ============ */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:84px; -webkit-text-size-adjust:100%;}
body{margin:0; background:var(--ground); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.75; -webkit-font-smoothing:antialiased; overflow-x:clip; transition:background-color .4s, color .4s;}
a{color:inherit; text-decoration:none;}
h1,h2,h3,p,ul,ol,dl,dd,blockquote{margin:0; padding:0;}
ul,ol{list-style:none;}
img{display:block; max-width:100%;}
button{font:inherit; color:inherit;}
::selection{background:var(--accent); color:var(--accent-ink);}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px;}
.w{display:inline-block;}
.po{margin-left:-.5em;} .pc{margin-right:-.5em;}
.w:first-child > .po:first-child{margin-left:-.42em;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gut);}
.skip{position:absolute; left:12px; top:-60px; z-index:100; background:var(--accent); color:var(--accent-ink); padding:10px 16px; border-radius:8px; font-weight:700;}
.skip:focus{top:12px;}

.sec-h,.hero-h,.contact-h,.chapter h3,.pull,.svc-lead h3,.svc-item h3,.pr-h,.ix-t,.method-foot{font-feature-settings:"palt" 1;}
.sec-h{font-family:var(--serif); font-weight:900; font-size:clamp(30px,4.2vw,52px); line-height:1.22; letter-spacing:.01em; text-wrap:balance;}
.sec-head{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:24px 64px; align-items:end; margin-bottom:clamp(40px,6vw,72px);}
.sec-head > .sec-h:only-child{grid-column:1 / -1;}
.sec-lede{color:var(--muted); max-width:34em; font-size:16.5px;}
@media(max-width:860px){ .sec-head{grid-template-columns:1fr;} }

section{padding:clamp(88px,12vw,160px) 0; border-top:1px solid var(--line);}

/* ============ Buttons ============ */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; height:50px; padding:0 24px; border-radius:999px; font-size:15.5px; font-weight:650; letter-spacing:.02em; border:1px solid transparent; cursor:pointer; white-space:nowrap; transition:background-color .25s var(--ease), color .25s, border-color .25s, transform .25s var(--ease);}
.btn:active{transform:scale(.98);}
.btn-primary{background:var(--accent); color:var(--accent-ink);}
.btn-primary:hover{background:var(--accent-2);}
:root[data-theme="light"] .btn-primary:hover{background:#085A89;}
@media (prefers-color-scheme:light){ :root:not([data-theme="dark"]) .btn-primary:hover{background:#085A89;} }
.btn-quiet{background:transparent; border-color:var(--line-strong); color:var(--ink);}
.btn-quiet:hover{border-color:var(--ink);}
.btn-sm{height:40px; padding:0 18px; font-size:14px;}

/* ============ Nav ============ */
.nav{position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--ground) 86%,transparent); backdrop-filter:saturate(1.2) blur(14px); -webkit-backdrop-filter:saturate(1.2) blur(14px); border-bottom:1px solid transparent; transition:border-color .3s;}
.nav.is-stuck{border-bottom-color:var(--line);}
.nav .wrap{display:flex; align-items:center; gap:32px; height:72px;}
.brand{display:inline-flex; align-items:center; gap:12px; font-family:var(--serif); font-weight:600; font-size:17px; letter-spacing:.14em;}
.brand-mark{width:32px; height:32px; display:block;}
.nav-links{display:flex; gap:30px; margin-left:auto;}
.nav-links a{font-size:14.5px; color:var(--muted); position:relative; padding:4px 0; transition:color .2s;}
.nav-links a:hover,.nav-links a.is-here{color:var(--ink);}
.nav-links a::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease);}
.nav-links a.is-here::after{transform:scaleX(1);}
.nav-actions{display:flex; align-items:center; gap:10px;}
.icon-btn{width:40px; height:40px; border-radius:999px; border:1px solid var(--line-strong); background:transparent; display:inline-grid; place-items:center; cursor:pointer; color:var(--muted); transition:color .2s, border-color .2s;}
.icon-btn:hover{color:var(--ink); border-color:var(--ink);}
.icon-btn svg{width:18px; height:18px;}
.menu-btn{display:none;}
@media(max-width:900px){
  .nav .wrap{gap:12px;}
  .nav-actions{margin-left:auto;}
  .menu-btn{display:inline-grid;}
  .nav-links{position:absolute; top:72px; left:0; right:0; flex-direction:column; gap:0; margin:0; padding:8px var(--gut) 20px; background:var(--ground); border-bottom:1px solid var(--line); display:none;}
  .nav-links.is-open{display:flex;}
  .nav-links a{font-size:18px; padding:14px 0; border-bottom:1px solid var(--line); color:var(--ink);}
  .nav-links a::after{display:none;}
}
@media(max-width:420px){ .brand span{display:none;} }

/* ============ Hero ============ */
.hero{position:relative; padding-top:clamp(56px,8vw,112px);}
.hero-kicker{font-size:15px; color:var(--muted); letter-spacing:.06em; margin-bottom:clamp(28px,4vw,44px); display:flex; align-items:center; gap:14px;}
.hero-kicker::before{content:""; width:28px; height:1px; background:var(--accent);}
.hero-h{font-family:var(--serif); font-weight:900; font-size:clamp(42px,7.4vw,104px); line-height:1.14; letter-spacing:-.005em;}
.hero-h .line{display:block; overflow:hidden; padding-bottom:.06em;}
.hero-h .line > span{display:inline-block;}
.hero-h .past{color:var(--past);}
.hero-h .now{color:var(--ink);}
.hero-foot{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:32px 64px; align-items:end; margin-top:clamp(36px,4vw,56px); padding-bottom:clamp(56px,6vw,88px);}
.hero-lede{max-width:36em; color:var(--ink-2); font-size:clamp(16.5px,1.4vw,18.5px);}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap;}
@media(max-width:860px){ .hero-foot{grid-template-columns:1fr;} }

.ledger{border-top:1px solid var(--line);}
.ledger-row{display:grid; grid-template-columns:repeat(4,minmax(0,1fr));}
.ledger .cell{display:flex; flex-direction:column-reverse; justify-content:flex-end; gap:10px; padding:30px 28px 34px; border-left:1px solid var(--line);}
.ledger .cell:first-child{border-left:none; padding-left:0;}
.ledger dt{font-size:13.5px; color:var(--muted); line-height:1.55; max-width:15em;}
.ledger dd{display:flex; align-items:baseline; gap:4px; line-height:1;}
.ledger .num{font-family:var(--serif); font-weight:900; font-size:clamp(40px,4.4vw,60px); font-variant-numeric:lining-nums tabular-nums; letter-spacing:-.02em;}
.ledger .unit{font-size:15px; color:var(--accent); font-weight:600;}
@media(max-width:860px){
  .ledger-row{grid-template-columns:1fr 1fr;}
  .ledger .cell{padding:24px 0 26px 20px;}
  .ledger .cell:nth-child(odd){border-left:none; padding-left:0;}
  .ledger .cell:nth-child(n+3){border-top:1px solid var(--line);}
}

/* hero load sequence (the only non-scroll entrance on the page) */
.load{opacity:0; transform:translateY(24px); animation:rise 1s var(--ease) forwards; animation-delay:calc(var(--d) * 110ms + 120ms);}
.hero-h .load{transform:translateY(105%); animation-duration:1.15s;}
@keyframes rise{to{opacity:1; transform:none;}}

/* ============ Method (scroll story) ============ */
.story{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,6vw,96px);}
.stage{position:relative;}
.stage-inner{position:sticky; top:calc(50vh - min(21vw,260px)); aspect-ratio:1; max-height:520px;}
#viz{width:100%; height:100%; display:block;}
.stage-cap{position:absolute; left:0; bottom:-28px; font-size:13px; color:var(--faint); letter-spacing:.04em;}
.chapters{counter-reset:none;}
.chapter{min-height:72vh; display:flex; flex-direction:column; justify-content:center; padding:24px 0; opacity:.28; transition:opacity .6s var(--ease);}
.chapter.is-on{opacity:1;}
.chapter:first-child{min-height:60vh;}
.ch-n{font-size:14px; color:var(--accent); letter-spacing:.08em;}
.chapter h3{font-family:var(--serif); font-weight:900; font-size:clamp(56px,7vw,96px); line-height:1.1; margin-top:10px;}
.ch-en{font-family:var(--serif); font-style:italic; font-weight:600; font-size:18px; color:var(--faint); margin-top:4px;}
.chapter p:last-child{color:var(--ink-2); max-width:26em; margin-top:22px; font-size:17.5px;}
.method-foot{margin-top:clamp(56px,8vw,104px); padding-top:40px; border-top:1px solid var(--line); font-family:var(--serif); font-weight:600; font-size:clamp(20px,2.2vw,28px); line-height:1.6; max-width:30em; color:var(--ink-2); text-wrap:pretty;}
@media(max-width:860px){
  .story{grid-template-columns:1fr; gap:0;}
  .stage{position:sticky; top:72px; z-index:2; background:var(--ground); margin:0 calc(var(--gut) * -1); padding:8px var(--gut) 0; border-bottom:1px solid var(--line);}
  .stage-inner{position:relative; top:0; height:30vh; max-height:260px; aspect-ratio:auto; margin:0 auto;}
  .stage-cap{display:none;}
  .chapter{min-height:46vh; opacity:.3;}
  .chapter:first-child{min-height:40vh;}
}

/* ============ Services ============ */
.svc{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(32px,6vw,96px); align-items:start;}
.svc-lead{position:sticky; top:120px; padding:40px; border-radius:24px; background:var(--surface); border:1px solid var(--line); overflow:hidden;}
.svc-lead::before{content:""; position:absolute; inset:auto -30% -60% auto; width:120%; aspect-ratio:1; background:radial-gradient(closest-side,var(--accent-soft),transparent); pointer-events:none;}
.svc-lead > *{position:relative;}
.svc-lead h3{font-family:var(--serif); font-weight:900; font-size:clamp(30px,3.2vw,42px); line-height:1.2; margin:14px 0 20px;}
.svc-lead p{color:var(--ink-2);}
.svc-meta{font-size:14px; color:var(--accent); letter-spacing:.04em;}
.svc-lead .svc-meta{color:var(--accent);}
.text-link{display:inline-flex; margin-top:28px; font-weight:650; color:var(--ink); border-bottom:1px solid var(--accent); padding-bottom:3px; transition:color .2s;}
.text-link:hover{color:var(--accent);}
.svc-item{padding:36px 0; border-top:1px solid var(--line); display:grid; grid-template-columns:minmax(0,1fr); gap:10px;}
.svc-item:first-child{border-top:none; padding-top:8px;}
.svc-item h3{font-family:var(--serif); font-weight:900; font-size:clamp(24px,2.3vw,30px); line-height:1.3;}
.svc-item p{color:var(--muted);}
.svc-item .svc-meta{margin-top:6px;}
@media(max-width:860px){
  .svc{grid-template-columns:1fr;}
  .svc-lead{position:relative; top:0; padding:30px 26px;}
}

/* ============ Products ============ */
.prod-list{border-top:1px solid var(--line-strong);}
.prod{border-bottom:1px solid var(--line);}
.prod-link{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,3fr); grid-template-areas:"name desc go" "role desc go"; gap:6px clamp(24px,4vw,64px); padding:40px 0; position:relative; transition:padding .45s var(--ease);}
.prod-link::before{content:""; position:absolute; left:0; top:-1px; height:1px; width:100%; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease);}
a.prod-link:hover::before,a.prod-link:focus-visible::before{transform:scaleX(1);}
a.prod-link:hover{padding-left:16px;}
.prod-name{grid-area:name; font-family:var(--serif); font-weight:900; font-size:clamp(36px,4.6vw,64px); line-height:1.05; letter-spacing:-.01em;}
.prod-role{grid-area:role; color:var(--faint); font-size:14.5px; letter-spacing:.04em;}
.prod-desc{grid-area:desc; color:var(--muted); align-self:center;}
.prod-go{grid-area:go; justify-self:end; align-self:center; display:inline-flex; align-items:center; gap:8px; font-size:14.5px; color:var(--ink-2); transition:color .2s;}
.prod-go svg{width:16px; height:16px; transition:transform .4s var(--ease);}
a.prod-link:hover .prod-go{color:var(--accent);}
a.prod-link:hover .prod-go svg{transform:translate(3px,-3px);}
.prod-go.is-muted{color:var(--faint);}
@media(max-width:860px){
  .prod-link{grid-template-columns:1fr; grid-template-areas:"name" "role" "desc" "go"; padding:32px 0;}
  .prod-desc{margin-top:12px;}
  .prod-go{justify-self:start; margin-top:8px;}
  a.prod-link:hover{padding-left:0;}
}

/* ============ About ============ */
.about-grid{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(40px,7vw,112px); align-items:start;}
.pull{font-family:var(--serif); font-weight:600; font-size:clamp(24px,2.6vw,34px); line-height:1.55; margin:clamp(32px,4vw,48px) 0; padding-left:28px; border-left:2px solid var(--accent); max-width:20em; text-wrap:balance;}
.about-body p{color:var(--ink-2); max-width:34em; margin-top:18px;}
.cv{border-top:1px solid var(--line-strong); margin-top:8px;}
.cv li{display:grid; grid-template-columns:104px minmax(0,1fr); gap:16px; padding:20px 0; border-bottom:1px solid var(--line);}
.cv-when{font-size:13.5px; color:var(--accent); padding-top:3px;}
.cv b{display:block; font-weight:650; font-size:16.5px; line-height:1.55;}
.cv span:not(.cv-when){display:block; color:var(--muted); font-size:14.5px; margin-top:2px; line-height:1.6;}
@media(max-width:860px){ .about-grid{grid-template-columns:1fr;} }

/* ============ About page ============ */
.about-h{font-size:clamp(38px,6.4vw,92px);}
.story-sec .pull{margin-bottom:0;}
.prose p{color:var(--ink-2); margin-top:0; margin-bottom:20px; max-width:34em;}
.case-list{border-top:1px solid var(--line-strong);}
.case{display:grid; grid-template-columns:minmax(0,2fr) minmax(0,6fr) minmax(0,4fr); gap:24px clamp(24px,4vw,64px); padding:44px 0; border-bottom:1px solid var(--line); align-items:start;}
.case-when{font-size:14px; color:var(--accent); letter-spacing:.04em; padding-top:6px; font-variant-numeric:tabular-nums;}
.case-role{font-size:14.5px; color:var(--faint);}
.case h3{font-family:var(--serif); font-weight:900; font-size:clamp(24px,2.6vw,34px); line-height:1.3; margin-top:6px; font-feature-settings:"palt" 1;}
.case-body > p:last-child{color:var(--muted); margin-top:12px; max-width:30em;}
.case-out{justify-self:end; text-align:right; display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:baseline; column-gap:6px;}
.case-out .note{flex-basis:100%;}
.case-out .big{font-family:var(--serif); font-weight:900; font-size:clamp(48px,5.6vw,80px); line-height:1; letter-spacing:-.02em; font-variant-numeric:lining-nums;}
.case-out .small{font-size:15px; color:var(--accent); font-weight:600;}
.case-out .note{font-size:14px; color:var(--faint); margin-top:8px;}
.case-out .arrow{font-family:var(--sans); font-weight:300; color:var(--accent); font-size:.5em; margin:0 .18em; vertical-align:.32em;}
@media (hover:hover){ .case-list:hover .case{opacity:.5;} .case-list .case:hover{opacity:1;} .case{transition:opacity .3s;} }
@media(max-width:860px){
  .case{grid-template-columns:1fr; gap:10px; padding:34px 0;}
  .case-out{justify-self:start; justify-content:flex-start; text-align:left; margin-top:10px;}
}
.more-link{margin-top:48px;}
.more-link .text-link{margin-top:0;}
.cv-more{margin-top:28px;}
.cv-out{color:var(--accent)!important;}

/* ============ Media ============ */
.media-block + .media-block{margin-top:clamp(64px,8vw,104px);}
.block-h{font-size:15px; font-weight:650; color:var(--muted); letter-spacing:.06em; padding-bottom:16px; border-bottom:1px solid var(--line-strong);}
.index li{display:grid; grid-template-columns:minmax(0,3fr) minmax(0,6fr) minmax(0,3fr); gap:24px; padding:22px 0; border-bottom:1px solid var(--line); align-items:baseline; transition:color .25s;}
.ix-src{font-weight:650;}
.ix-t{font-family:var(--serif); font-weight:600; font-size:clamp(17px,1.5vw,20px); line-height:1.55;}
.ix-m{color:var(--faint); font-size:14px; text-align:right;}
[data-preview] li[data-img]{cursor:default;}
@media (hover:hover){
  .index:hover li{color:var(--faint);}
  .index li:hover{color:var(--ink);}
  .index li:hover .ix-m{color:var(--accent);}
}
@media(max-width:760px){
  .index li{grid-template-columns:1fr; gap:4px;}
  .ix-m{text-align:left;}
}

.press{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(32px,5vw,72px);}
.press li{padding:28px 0; border-bottom:1px solid var(--line); transition:opacity .25s;}
.pr-pub{font-size:14px; color:var(--accent); letter-spacing:.04em;}
.pr-h{font-family:var(--serif); font-weight:600; font-size:clamp(18px,1.7vw,22px); line-height:1.6; margin-top:8px; text-wrap:pretty;}
@media (hover:hover){ .press:hover li{opacity:.45;} .press li:hover{opacity:1;} }
@media(max-width:760px){ .press{grid-template-columns:1fr;} }

.pods{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px; padding-top:32px;}
.pods img{width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:12px; background:var(--surface-2); filter:saturate(.85); transition:filter .3s;}
.pods li:hover img{filter:none;}
.pd-src{display:block; font-size:13.5px; color:var(--accent); margin-top:16px;}
.pd-t{display:block; font-size:15.5px; line-height:1.6; margin-top:4px; color:var(--ink-2);}
@media(max-width:860px){ .pods{grid-template-columns:1fr 1fr; gap:24px 18px;} }

/* linked rows: the title link covers the whole row */
.index li,.press li,.pods li{position:relative;}
.stretch::after{content:""; position:absolute; inset:0;}
.stretch{background-image:linear-gradient(currentColor,currentColor); background-size:0 1px; background-repeat:no-repeat; background-position:0 100%; transition:background-size .5s var(--ease);}
li:hover > * > .stretch,.stretch:focus-visible{background-size:100% 1px;}
.stretch:focus-visible{outline:none;}
li:has(.stretch:focus-visible){outline:2px solid var(--accent); outline-offset:4px; border-radius:6px;}
li:has(.stretch){cursor:pointer;}

/* hover preview (fine pointers only) */
.peek{position:fixed; left:0; top:0; z-index:40; width:300px; aspect-ratio:16/10; border-radius:12px; overflow:hidden; pointer-events:none; opacity:0; transform:translate3d(-9999px,0,0) scale(.92); transition:opacity .25s, scale .35s var(--ease); box-shadow:0 30px 60px -20px rgba(0,0,0,.55); background:var(--surface-2);}
.peek.is-on{opacity:1; scale:1;}
.peek img{width:100%; height:100%; object-fit:cover;}

/* ============ Contact ============ */
.contact{padding-bottom:clamp(96px,12vw,168px); background:radial-gradient(90% 70% at 100% 100%, var(--accent-soft), transparent 60%);}
.contact-h{font-family:var(--serif); font-weight:900; font-size:clamp(44px,7.4vw,108px); line-height:1.12;}
.contact-grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:32px clamp(40px,7vw,112px); margin-top:clamp(40px,5vw,64px); align-items:start;}
.contact-lede{color:var(--ink-2); max-width:26em;}
.mail{display:inline-block; font-family:var(--serif); font-weight:600; font-size:clamp(22px,3.1vw,42px); line-height:1.3; border-bottom:2px solid var(--line-strong); padding-bottom:6px; transition:border-color .3s, color .3s; word-break:break-all;}
.mail:hover{border-color:var(--accent); color:var(--accent);}
.contact-btns{display:flex; gap:12px; flex-wrap:wrap; margin-top:32px;}
.copy-note{min-height:1.5em; margin-top:12px; font-size:14px; color:var(--accent);}
@media(max-width:860px){ .contact-grid{grid-template-columns:1fr;} }

/* ============ Footer ============ */
.footer{border-top:1px solid var(--line); padding:32px 0 40px; font-size:14px; color:var(--faint);}
.footer .wrap{display:flex; gap:16px 32px; flex-wrap:wrap; align-items:center;}
.footer-links{display:flex; gap:24px; margin-left:auto;}
.footer-links a{color:var(--muted); transition:color .2s;}
.footer-links a:hover{color:var(--ink);}
@media(max-width:640px){ .footer-links{margin-left:0;} }

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .load,.hero-h .load{animation:none; opacity:1; transform:none;}
  *,*::before,*::after{transition-duration:.01ms!important;}
  .chapter{opacity:1;}
}