*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
:root{--bg:#f7f8f5;--ink:#2a2520;--mid:#000000;--light:#b0a898;--line:rgba(42,37,32,0.12);--white:#faf8f4;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--ink);font-family:'Noto Serif TC',serif;font-weight:300;overflow-x:hidden;}
a{text-decoration:none;color:inherit;cursor:pointer;}
.page{display:none;min-height:100vh;}
.page.active{display:block;}
/* HEADER */
#hd{position:fixed;top:0;left:0;right:0;z-index:200;height:88px;background:#f7f8f5;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 28px;}
.hd-logo{display:flex;align-items:center;flex-shrink:0;margin-right:32px;cursor:pointer;}
.hd-logo img{height:80px;width:auto;display:block;mix-blend-mode:multiply;}
.hd-div{width:1px;height:28px;background:var(--line);margin:0 28px;flex-shrink:0;}
.hd-tag{display:flex;flex-direction:column;gap:3px;}
.hd-tag-a{font-family:'Noto Sans TC',sans-serif;font-size:12px;letter-spacing:.35em;color:#1a1a1a;}
.hd-tag-b{font-family:'Noto Sans TC',sans-serif;font-size:11px;font-weight:300;letter-spacing:.15em;color:#1a1a1a;}
.hd-sp{flex:1;}
.hd-btn{display:flex;align-items:center;gap:8px;height:36px;padding:0 18px;border:1px solid var(--ink);font-family:'Noto Sans TC',sans-serif;font-size:11px;letter-spacing:.2em;color:var(--ink);white-space:nowrap;margin-left:8px;transition:background .22s,color .22s;cursor:pointer;}
.hd-btn:hover{background:var(--ink);color:var(--white);}
.hd-menu{display:flex;flex-direction:column;align-items:center;gap:4px;margin-left:20px;background:none;border:none;cursor:pointer;padding:4px 8px;}
.hd-menu-lines{display:flex;flex-direction:column;gap:4px;}
.hd-menu-lines span{display:block;width:24px;height:1px;background:var(--ink);}
.hd-menu-lbl{font-family:'Noto Sans TC',sans-serif;font-size:9px;letter-spacing:.35em;color:var(--mid);}
/* SIDE NAV */
#snav{position:fixed;top:0;left:0;width:300px;height:100%;min-height:100vh;background:#4b114c;z-index:300;transform:translateX(-100%);transition:transform .52s cubic-bezier(.22,1,.36,1);padding:110px 50px 60px;overflow-y:auto;}
#snav.open{transform:none;}
.sn-x{position:absolute;top:22px;right:22px;background:none;border:none;cursor:pointer;font-family:'Noto Sans TC',sans-serif;font-size:10px;letter-spacing:.3em;color:rgba(250,248,244,.45);display:flex;align-items:center;gap:8px;}
.sn-x::before{content:'';display:block;width:18px;height:1px;background:currentColor;}
.sn-ul{list-style:none;}
.sn-ul li{border-bottom:1px solid rgba(255,255,255,1);}
.sn-ul a{display:flex;justify-content:space-between;align-items:baseline;padding:20px 0;font-family:'Noto Serif TC',serif;font-size:14px;font-weight:300;letter-spacing:.18em;color:rgba(250,248,244,.75);transition:color .22s,padding-left .22s;cursor:pointer;}
.sn-ul a:hover{color:white;padding-left:6px;}
.sn-ul a span{font-family:'Noto Sans TC',sans-serif;font-size:9px;letter-spacing:.38em;color:rgba(250,248,244,.25);}
.sn-ov{position:fixed;inset:0;background:rgba(0,0,0,.38);z-index:299;opacity:0;pointer-events:none;transition:opacity .38s;}
.sn-ov.show{opacity:1;pointer-events:all;}
/* COMMON */
.sec{padding:72px 0;}
.si{max-width:1080px;margin:0 auto;padding:0 56px;}
.s-lbl{font-family:'Noto Sans TC',sans-serif;font-size:10px;letter-spacing:.55em;color:var(--light);margin-bottom:10px;}
.s-en{font-family:'Cormorant Garamond',serif;font-size:clamp(28px,3.2vw,44px);font-weight:300;letter-spacing:.05em;line-height:1.2;color:var(--ink);}
.s-jp{font-size:13px;font-weight:200;letter-spacing:.35em;color:var(--mid);margin-top:8px;}
.s-rule{width:36px;height:1px;background:var(--light);margin:28px 0;}
.s-body{font-size:14px;font-weight:300;line-height:2.3;color:var(--mid);max-width:460px;}
.arr{display:inline-flex;align-items:center;gap:14px;font-family:'Noto Sans TC',sans-serif;font-size:10px;letter-spacing:.42em;color:var(--ink);margin-top:36px;transition:gap .28s;cursor:pointer;}
.arr::after{content:'';display:block;width:38px;height:1px;background:var(--ink);transition:width .28s;}
.arr:hover{gap:22px;}
.arr:hover::after{width:52px;}
/* HERO VIDEO */
#hero{margin-top:88px;padding:14px;background:#f7f8f5;border-top:1px solid #1a1714;border-bottom:1px solid #1a1714;}
.h-wrap{position:relative;width:100%;aspect-ratio:16/6.2;background:#111;overflow:hidden;}
.h-vid{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease;}
.h-vid.on{opacity:1;}
.h-dark{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.1),rgba(0,0,0,.3));z-index:2;pointer-events:none;}
.h-dots{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:5;}
.h-dot{width:28px;height:2px;background:rgba(255,255,255,.35);border:none;cursor:pointer;padding:0;transition:background .3s,width .3s;}
.h-dot.on{background:rgba(255,255,255,.9);width:44px;}
.h-scroll{position:absolute;bottom:24px;right:32px;font-family:'Noto Sans TC',sans-serif;font-size:9px;letter-spacing:.5em;color:rgba(250,248,244,.5);display:flex;align-items:center;gap:10px;z-index:5;}
.h-scroll::after{content:'';display:block;width:32px;height:1px;background:rgba(250,248,244,.3);}
/* INFO */
.inf-g{display:grid;grid-template-columns:180px 1fr;gap:0 80px;align-items:start;}
.inf-ul{list-style:none;}
.inf-ul li{border-bottom:1px solid var(--line);}
.inf-ul a{display:flex;gap:20px;align-items:center;padding:20px 0;transition:opacity .22s;cursor:pointer;}
.inf-ul a:hover{opacity:.55;}
.inf-thumb{flex-shrink:0;width:72px;height:72px;overflow:hidden;}
.inf-thumb img,.inf-thumb-img{width:72px;height:72px;object-fit:cover;}
.inf-content{display:flex;flex-direction:column;gap:6px;}
.inf-dt{font-family:'Noto Sans TC',sans-serif;font-size:11px;letter-spacing:.1em;color:var(--light);}
.inf-tt{font-size:14px;font-weight:300;letter-spacing:.08em;color:var(--ink);}
/* OVERVIEW */
.ov-g{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start;}
.sl-wrap{overflow:hidden;}
.sl-track{display:flex;transition:transform .7s cubic-bezier(.22,1,.36,1);}
.slide{min-width:100%;aspect-ratio:4/3;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.s1{background:linear-gradient(135deg,#d2cac0,#b8b0a4);}
.s2{background:linear-gradient(135deg,#c8c0b4,#aea69a);}
.s3{background:linear-gradient(135deg,#cec6ba,#b4aca0);}
.s4{background:linear-gradient(135deg,#c4bcb0,#aaa29a);}
.sl-tag{position:absolute;bottom:14px;left:18px;font-family:'Noto Sans TC',sans-serif;font-size:9px;letter-spacing:.45em;color:rgba(250,248,244,.65);}
.sl-svg{opacity:.2;width:46%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
.dots{display:flex;gap:8px;margin-top:16px;}
.dot{height:1px;width:20px;background:var(--line);cursor:pointer;transition:width .25s,background .25s;}
.dot.on{width:36px;background:var(--ink);}
.tl{margin-top:16px;}
.tl-r{display:grid;grid-template-columns:60px 1fr;gap:0 18px;padding:16px 0;border-bottom:1px solid var(--line);}
.tl-y{font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:300;color:var(--light);line-height:1.4;}
.tl-d{font-size:13px;font-weight:300;line-height:1.85;color:var(--mid);letter-spacing:.05em;}
.tl-r.hi .tl-y{color:var(--ink);}
.tl-r.hi .tl-d{color:var(--ink);}
/* WORKS */
.st-hd{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:end;margin-bottom:48px;}
.st-nav{display:flex;gap:10px;justify-content:flex-end;}
.nc{width:44px;height:44px;border:1px solid var(--line);background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .22s,border-color .22s;}
.nc:hover{background:var(--ink);border-color:var(--ink);}
.nc:hover svg{stroke:var(--white);}
.nc svg{stroke:var(--ink);transition:stroke .22s;}
.cw{overflow:hidden;}
.ct{display:flex;gap:3px;transition:transform .6s cubic-bezier(.22,1,.36,1);}
.sc{min-width:260px;flex-shrink:0;}
.sc-img{aspect-ratio:3/4;position:relative;overflow:hidden;transition:transform .5s ease;} .sc-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.sc:hover .sc-img{transform:scale(1.04);}
.sp1{background:linear-gradient(150deg,#d8d0c6,#c0b8ae);}
.sp2{background:linear-gradient(150deg,#cec6bc,#b8b0a4);}
.sp3{background:linear-gradient(150deg,#c8c0b6,#b0a89c);}
.sp4{background:linear-gradient(150deg,#d2cac0,#bcb4a8);}
.sp5{background:linear-gradient(150deg,#ccc4ba,#b4aca0);}
.sc-info{padding:16px 0 4px;}
.sc-nm{font-size:14px;font-weight:300;letter-spacing:.12em;color:var(--ink);margin-bottom:5px;}
.sc-en{font-family:'Noto Sans TC',sans-serif;font-size:9px;letter-spacing:.45em;color:var(--light);}
.isvg{opacity:.18;width:44%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
/* CSR */
.wk-b{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;margin-bottom:100px;}
.wk-b.rev{direction:rtl;}
.wk-b.rev>*{direction:ltr;}
.wk-main{width:100%;aspect-ratio:4/3;position:relative;overflow:hidden;}
/* PROFILE */
.profile-wrap{position:relative;overflow:hidden;background:var(--white);}
.profile-track{display:flex;transition:transform .7s cubic-bezier(.22,1,.36,1);}
.profile-slide{min-width:100%;display:grid;grid-template-columns:1fr 1fr;min-height:600px;}
.profile-img{width:100%;height:100%;min-height:500px;overflow:hidden;position:relative;background:linear-gradient(150deg,#cec6bc,#b8b0a4);}
.profile-photo{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;}
.profile-text{padding:80px 72px;display:flex;flex-direction:column;justify-content:center;}
.profile-name{font-family:'Cormorant Garamond',serif;font-size:32px;font-weight:300;letter-spacing:.1em;color:var(--ink);margin-bottom:8px;}
.profile-role{font-family:'Noto Sans TC',sans-serif;font-size:11px;letter-spacing:.4em;color:var(--light);}
.profile-nav{position:absolute;bottom:40px;right:56px;display:flex;gap:10px;}
.profile-dots{position:absolute;bottom:48px;left:50%;transform:translateX(-50%);display:flex;gap:8px;}
/* TEAM */
.team-entities{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;}
.te-title{font-family:'Noto Sans TC',sans-serif;font-size:10px;letter-spacing:.45em;color:var(--light);margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--line);}
.te-list{list-style:none;}
.te-list li{font-size:13px;font-weight:300;line-height:2.2;color:var(--mid);}
/* URBAN */
.urban-tl{display:flex;flex-direction:column;}
.urban-step{display:grid;grid-template-columns:52px 1fr;gap:0 20px;padding:24px 0;border-bottom:1px solid var(--line);align-items:start;}
.urban-num{font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:300;color:var(--light);line-height:1.2;}
.urban-title{font-size:15px;font-weight:300;letter-spacing:.1em;color:var(--ink);margin-bottom:8px;margin-top:4px;}
.urban-desc{font-size:13px;font-weight:300;line-height:1.9;color:var(--mid);}
/* CONTACT */
.ct-g{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start;}
.ct-row{padding:18px 0;border-bottom:1px solid var(--line);display:flex;gap:20px;align-items:center;}
.ct-lbl{font-family:'Noto Sans TC',sans-serif;font-size:9px;letter-spacing:.5em;color:var(--light);min-width:52px;}
.ct-val{font-size:14px;color:var(--ink);}
.fi{width:100%;background:transparent;border:none;border-bottom:1px solid var(--line);padding:10px 0;font-family:'Noto Serif TC',serif;font-size:14px;font-weight:200;color:var(--ink);outline:none;}
.fta{resize:none;height:100px;}
.fsb{font-family:'Noto Sans TC',sans-serif;font-size:11px;letter-spacing:.4em;color:white;background:var(--ink);border:none;padding:16px 48px;cursor:pointer;transition:background .22s;}
.fsb:hover{background:#4a4238;}
.fm{margin-bottom:26px;}
.fl{display:block;font-family:'Noto Sans TC',sans-serif;font-size:10px;letter-spacing:.4em;color:var(--mid);margin-bottom:10px;}
.ct-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.ct-form{position:relative;}
.ct-msg{font-family:'Noto Sans TC',sans-serif;font-size:13px;letter-spacing:.06em;line-height:1.8;margin:0 0 18px;min-height:1.8em;}
.ct-msg.is-ok{color:#2f6b4f;}
.ct-msg.is-err{color:#8a2b2b;}
.ct-msg.is-wait{color:var(--mid);}
.fsb:disabled{opacity:.45;cursor:not-allowed;}
.fi:focus{border-bottom-color:var(--ink);}
/* FOOTER */
footer{background:#4b114c;padding:80px 0 44px;}
.ft{max-width:1080px;margin:0 auto;padding:0 56px;}
.ft-top{padding-bottom:52px;border-bottom:1px solid rgba(250,248,244,.08);text-align:center;}
.ft-br{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:300;color:var(--white);letter-spacing:.08em;}
.ft-br small{display:block;font-style:italic;font-size:11px;letter-spacing:.38em;color:var(--light);opacity:.7;margin-top:5px;}
.ft-inf{font-family:'Noto Sans TC',sans-serif;font-size:11px;letter-spacing:.14em;line-height:2.4;color:rgba(250,248,244,.38);margin-top:20px;}
.ft-sns{display:flex;gap:22px;margin-top:24px;}
.ft-sns a{font-family:'Noto Sans TC',sans-serif;font-size:9px;letter-spacing:.42em;color:rgba(250,248,244,.32);border-bottom:1px solid rgba(250,248,244,.14);padding-bottom:2px;cursor:pointer;}
.ft-nav{list-style:none;}
.ft-nav li{border-bottom:1px solid rgba(255,255,255,.85);}
.ft-nav a{display:flex;justify-content:space-between;align-items:center;padding:13px 0;font-family:'Noto Serif TC',serif;font-size:13px;font-weight:200;letter-spacing:.2em;color:rgba(250,248,244,.55);transition:color .22s,padding-left .22s;cursor:pointer;}
.ft-nav a:hover{color:white;padding-left:6px;}
.ft-nav a span{font-family:'Noto Sans TC',sans-serif;font-size:9px;letter-spacing:.38em;color:rgba(250,248,244,.22);}
.ft-bt{display:flex;justify-content:center;align-items:center;gap:40px;padding-top:28px;}
.ft-cp{font-family:'Noto Sans TC',sans-serif;font-size:10px;letter-spacing:.22em;color:rgba(250,248,244,.18);}
/* FLOAT */

.fl-b:nth-child(1){background:#3c3630;}
.fl-b:nth-child(2){background:#2a2520;}
.fl-b:hover{background:#4a4238;}
#totop{display:none;position:fixed;bottom:200px;right:0;writing-mode:vertical-rl;font-family:'Noto Sans TC',sans-serif;font-size:9px;letter-spacing:.48em;color:var(--mid);background:none;border:none;cursor:pointer;padding:12px 18px;}
#totop.show{display:block;}
/* SUB PAGES */
.pg-hero{margin-top:88px;padding:14px;background:#f7f8f5;border-top:1px solid #1a1714;border-bottom:1px solid #1a1714;}
.pg-media{position:relative;width:100%;aspect-ratio:16/5;overflow:hidden;background:#1c1a17;}
.pg-media::before{content:'';position:absolute;inset:0;background:linear-gradient(160deg,#2a2e2a 0%,#1e2420 40%,#141814 100%);}
#page-works-list .pg-media::before{background:transparent;}

/* LIST PAGINATION */
.py-pager{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin-top:48px;}
.py-pager-num,.py-pager-nav{
  font-family:'Noto Sans TC',sans-serif;
  font-size:12px;
  letter-spacing:.2em;
  color:var(--ink);
  border:1px solid rgba(42,37,32,.18);
  min-width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  background:transparent;
  transition:background .2s,color .2s,border-color .2s;
  box-sizing:border-box;
  padding:0 10px;
}
.py-pager-nav{font-size:18px;letter-spacing:0;line-height:1;}
a.py-pager-num:hover,a.py-pager-nav:hover{background:rgba(42,37,32,.06);}
.py-pager-num.is-on{background:var(--ink);color:var(--white);border-color:var(--ink);}
.py-pager-nav.is-disabled{opacity:.28;pointer-events:none;}
#page-profile-list .pg-media::before{background:transparent;}
#page-team .pg-media::before{background:transparent;}
#page-news-list .pg-media::before{background:transparent;}
#page-csr .pg-media::before{background:transparent;}
#page-about .pg-media::before{background:transparent;}
.pg-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.15),rgba(0,0,0,.55));z-index:1;}
.pg-text{position:absolute;bottom:52px;left:72px;z-index:2;color:var(--white);}
.pg-cat{font-family:'Noto Sans TC',sans-serif;font-size:10px;letter-spacing:.55em;color:rgba(250,248,244,.5);margin-bottom:14px;}
.pg-title{font-family:'Noto Sans TC',sans-serif;font-size:clamp(28px,3.5vw,52px);font-weight:700;letter-spacing:.04em;line-height:1.2;color:#ffffff;}
.pg-sub{font-family:'Noto Serif TC',serif;font-size:14px;font-weight:200;letter-spacing:.3em;color:rgba(250,248,244,.65);margin-top:10px;}
.bc{max-width:960px;margin:0 auto;padding:28px 56px 0;display:flex;align-items:center;gap:10px;font-family:'Noto Sans TC',sans-serif;font-size:13px;font-weight:400;letter-spacing:.2em;color:#666;}
.bc a{cursor:pointer;transition:color .22s;color:#666;}
.bc a:hover{color:var(--ink);}
.pg-wrap{max-width:960px;margin:0 auto;padding:52px 56px 120px;}
.sec-lbl{font-family:'Noto Sans TC',sans-serif;font-size:10px;letter-spacing:.55em;color:var(--light);margin-bottom:10px;}
.sec-en{font-family:'Noto Sans TC',sans-serif;font-size:clamp(24px,2.5vw,38px);font-weight:700;line-height:1.3;color:#000000;}
.sec-jp{font-size:13px;font-weight:200;letter-spacing:.35em;color:var(--mid);margin-top:8px;}
.sec-rule{width:36px;height:1px;background:var(--light);margin:28px 0;}
.body-text{font-size:15px;font-weight:300;line-height:2.4;color:var(--mid);}
.body-text p{margin-bottom:28px;}
.body-text h3{font-family:'Noto Serif TC',serif;font-size:20px;font-weight:700;color:var(--ink);margin:48px 0 16px;padding-bottom:14px;border-bottom:1px solid var(--line);}
.lead{font-size:16px;line-height:2.3;color:var(--ink);padding:24px 28px;border-left:2px solid var(--light);margin-bottom:48px;}
.art-meta{display:flex;align-items:center;gap:24px;padding-bottom:28px;border-bottom:1px solid var(--line);margin-bottom:48px;}
.art-date{font-family:'Noto Sans TC',sans-serif;font-size:12px;letter-spacing:.2em;color:var(--light);}
.art-tag{font-family:'Noto Sans TC',sans-serif;font-size:10px;letter-spacing:.35em;color:#4b114c;border:1px solid rgba(75,17,76,.25);padding:4px 14px;}
.art-title{font-family:'Noto Sans TC',sans-serif;font-size:clamp(24px,3vw,38px);font-weight:700;letter-spacing:.03em;line-height:1.3;color:#000000;margin-bottom:10px;}
.art-title-en{font-family:'Cormorant Garamond',serif;font-size:clamp(14px,1.6vw,20px);font-weight:300;font-style:italic;color:var(--mid);margin-bottom:48px;line-height:1.5;}
.art-lead{font-size:16px;font-weight:300;line-height:2.3;color:var(--ink);padding-left:20px;border-left:2px solid var(--light);margin-bottom:40px;}
.art-body{font-size:15px;font-weight:300;line-height:2.4;color:var(--mid);}
.art-body p{margin-bottom:28px;}
.art-body h3{font-family:'Noto Serif TC',serif;font-size:18px;font-weight:700;color:var(--ink);margin:52px 0 16px;padding-bottom:14px;border-bottom:1px solid var(--line);}
.art-body .en{font-style:italic;color:var(--light);font-size:14px;line-height:2.1;margin-bottom:28px;display:block;}
.art-credit{display:flex;align-items:center;gap:16px;padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:48px 0;font-family:'Noto Sans TC',sans-serif;font-size:11px;letter-spacing:.3em;color:var(--mid);}
.art-credit strong{color:var(--ink);font-weight:400;}
.art-copy{font-family:'Noto Sans TC',sans-serif;font-size:10px;letter-spacing:.2em;color:var(--light);line-height:2;padding:24px 0;border-top:1px solid var(--line);}
.back-link{display:inline-flex;align-items:center;gap:14px;font-family:'Noto Sans TC',sans-serif;font-size:10px;letter-spacing:.42em;color:var(--ink);margin-top:48px;transition:gap .28s;cursor:pointer;}
.back-link::before{content:'';display:block;width:38px;height:1px;background:var(--ink);transition:width .28s;}
.back-link:hover{gap:22px;}
.art-nav{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:72px;border-top:1px solid var(--line);padding-top:48px;}
.art-nav-lbl{font-family:'Noto Sans TC',sans-serif;font-size:9px;letter-spacing:.5em;color:var(--light);margin-bottom:10px;}
.art-nav-ttl{font-size:14px;font-weight:300;color:var(--ink);}
.art-nav .next{text-align:right;}

/* TEAM PARALLAX */
.team-parallax-wrap{
  position:relative;
  width:100%;
  aspect-ratio:4/5;
  overflow:hidden;
  border-radius:2px;
}
.team-parallax-img{
  position:absolute;
  width:100%;
  height:130%;
  top:-15%;
  left:0;
  object-fit:cover;
  object-position:center;
  will-change:transform;
  transition:transform 0.1s linear;
}

/* ══════════════════════════════════
   MOBILE RESPONSIVE — max-width 768px
   桌面版 CSS 完全不動，只加斷點
   ══════════════════════════════════ */
@media (max-width: 768px) {

  /* HEADER */
  #hd { padding: 0 16px; height: auto; min-height: 64px; flex-wrap: wrap; gap: 0; }
  .hd-logo img { height: 52px; }
  .hd-div { display: none; }
  .hd-tag { display: none; }
  .hd-btn { display: none; }
  .hd-menu { margin-left: auto; }

  /* SIDE NAV */
  #snav { width: 100vw; }

  /* HERO */
  #hero { padding: 8px; margin-top: 64px; }
  .h-wrap { aspect-ratio: 4/3; }

  /* SECTION PADDING */
  .sec { padding: 52px 0; }
  .si { padding: 0 20px; }

  /* OVERVIEW */
  .ov-g { grid-template-columns: 1fr; gap: 36px; }

  /* WORKS */
  .st-hd { grid-template-columns: 1fr; gap: 20px; margin-bottom: 28px; }
  .sc { min-width: 180px; }

  /* INFORMATION */
  .inf-g { grid-template-columns: 1fr; gap: 28px; }

  /* PROFILE */
  .profile-slide { grid-template-columns: 1fr; min-height: auto; }
  .profile-img { min-height: 320px; }
  .profile-text { padding: 32px 24px; }
  .profile-nav { right: 24px; bottom: 24px; }
  .profile-dots { bottom: 28px; }

  /* TEAM */
  .team-entities { grid-template-columns: 1fr 1fr; gap: 28px; }
  .team-parallax-wrap { aspect-ratio: 3/2; margin-top: 32px; }

  /* CSR */
  .wk-b { grid-template-columns: 1fr; gap: 28px; margin-bottom: 60px; }
  .wk-b.rev { direction: ltr; }

  /* URBAN */
  #urban .si > div { grid-template-columns: 1fr !important; gap: 40px !important; }

  /* CONTACT */
  .ct-g { grid-template-columns: 1fr; gap: 40px; }

  /* FOOTER */
  .ft { padding: 0 20px; }
  .ft-top { grid-template-columns: 1fr; gap: 40px; }

  /* FLOAT BUTTONS */
  #fl { display: none; }

  /* SUB PAGE HERO */
  .pg-hero { padding: 8px; margin-top: 64px; }
  .pg-media { aspect-ratio: 4/3; }
  .pg-text { left: 20px; bottom: 24px; }
  .pg-title { font-size: clamp(22px, 6vw, 36px); }

  /* BREADCRUMB */
  .bc { padding: 20px 20px 0; }

  /* SUB PAGE WRAP */
  .pg-wrap { padding: 36px 20px 80px; }

  /* WORK DETAIL GRID */
  #page-work-detail .pg-wrap > div[style*="grid-template-columns:220px"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* ABOUT CHAIRMAN GRID */
  .pg-wrap div[style*="grid-template-columns:300px"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* TEAM ENTITIES on mobile */
  #page-team .team-entities { grid-template-columns: 1fr 1fr; }

  /* URBAN DETAIL */
  .pg-wrap div[style*="grid-template-columns:1fr 2fr"] {
    grid-template-columns: 1fr !important;
  }

  /* s-body max-width 取消 */
  .s-body { max-width: 100%; }

  /* BACK LINK */
  .back-link { margin-top: 32px; }
}

@media (max-width: 480px) {
  /* 超小螢幕補強 */
  .team-entities { grid-template-columns: 1fr; }
  .sc { min-width: 140px; }
  .profile-img { min-height: 260px; }
  .hd-logo img { height: 44px; }
  .pg-title { font-size: clamp(20px, 7vw, 32px); }
}

@media (max-width: 768px) {

  /* ── 補強：Team section header grid ── */
  #team .si > div:first-child {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* ── 補強：Urban inline grid ── */
  #urban .si > div {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  /* ── 補強：Urban works 3欄 grid ── */
  #page-urban .pg-wrap div[style*="repeat(3,1fr)"],
  #page-urban .pg-wrap div[style*="repeat(3, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 2px !important;
  }

  /* ── 補強：Work detail 220px grid ── */
  #page-work-detail .pg-wrap > div {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* ── 補強：About chairman 300px grid ── */
  #page-about .pg-wrap div[style*="300px"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  #page-about .pg-wrap div[style*="300px"] img {
    max-width: 240px !important;
    margin: 0 auto !important;
    display: block !important;
  }

  /* ── 補強：Urban detail steps 60px grid → ok (60px is fine) ── */

  /* ── 補強：Information 180px 1fr ── */
  .inf-g {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* ── 補強：Works sc min-width ── */
  .sc { min-width: calc(45vw) !important; }

  /* ── 補強：CSR urban buildings 3col ── */
  div[style*="repeat(3,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ── 補強：Team entities ── */
  .team-entities {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
  }

  /* ── 補強：Footer nav ── */
  .ft-top {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  /* ── 補強：Contact grid ── */
  .ct-g {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  /* ── 補強：pg-wrap padding ── */
  .pg-wrap { padding: 36px 20px 80px !important; }
  .bc { padding: 20px 20px 0 !important; }

  /* ── 補強：Hero video aspect ratio ── */
  .h-wrap { aspect-ratio: 4/5 !important; }

  /* ── 補強：Sub hero aspect ── */
  .pg-media { aspect-ratio: 16/9 !important; }
  .pg-text { left: 20px !important; right: 20px !important; bottom: 24px !important; }

  /* ── 補強：Section titles ── */
  .s-en { font-size: clamp(22px, 6vw, 32px) !important; }
  .sec-en { font-size: clamp(22px, 6vw, 32px) !important; }

  /* ── 補強：Timeline steps ── */
  .tl-r { grid-template-columns: 48px 1fr; gap: 0 12px; }
  .urban-step { grid-template-columns: 40px 1fr; gap: 0 12px; }

  /* ── 補強：s-body ── */
  .s-body { max-width: 100% !important; font-size: 14px; }

  /* ── 補強：Profile text padding ── */
  .profile-text { padding: 28px 20px !important; }

  /* ── 補強：Section inner padding ── */
  .si { padding: 0 20px !important; }

  /* ── 補強：Team parallax ── */
  .team-parallax-wrap { aspect-ratio: 16/9 !important; margin-top: 0 !important; }
}

@media (max-width: 480px) {
  /* ── 超小螢幕 ── */
  .team-entities { grid-template-columns: 1fr !important; }
  .sc { min-width: 160px !important; }
  div[style*="repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
  .h-wrap { aspect-ratio: 3/4 !important; }
  .profile-img { min-height: 220px !important; }
  .pg-title { font-size: clamp(20px, 8vw, 30px) !important; }
  .art-title { font-size: clamp(18px, 6vw, 28px) !important; }
  .sec { padding: 40px 0 !important; }
  .hd-logo img { height: 40px !important; }
}

/* ══════════════════════════════════
   TABLET / iPAD — 769px ~ 1024px
   覆蓋 iPad 10th / Air / Pro 11" / Pro 12.9"
   ══════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {

  /* HEADER */
  #hd { padding: 0 28px; }
  .hd-tag-b { font-size: 10px; }
  .hd-btn { padding: 0 12px; font-size: 10px; }

  /* SECTION */
  .sec { padding: 80px 0; }
  .si { padding: 0 36px; }
  .ft { padding: 0 36px; }

  /* OVERVIEW — 圖片佔比調整 */
  .ov-g { gap: 40px; }
  .s-body { max-width: 100%; }

  /* WORKS — 卡片稍微縮小 */
  .sc { min-width: 200px; }

  /* PROFILE */
  .profile-text { padding: 48px 40px; }

  /* TEAM 事業體：4欄 → 2欄 */
  .team-entities { grid-template-columns: repeat(2, 1fr); gap: 32px; }

  /* CSR 圖文間距 */
  .wk-b { gap: 40px; }

  /* URBAN */
  #urban .si > div {
    grid-template-columns: 1fr 1.5fr !important;
    gap: 60px !important;
  }

  /* CONTACT */
  .ct-g { gap: 40px; }

  /* FOOTER */
  .ft-top { gap: 40px; }

  /* SUB PAGE */
  .pg-wrap { padding: 48px 40px 100px; }
  .bc { padding: 24px 40px 0; }
.bc span[style*='opacity:.4']{opacity:1 !important;color:#aaa;}
  .pg-text { left: 40px; }

  /* Work detail grid */
  #page-work-detail .pg-wrap > div {
    grid-template-columns: 180px 1fr !important;
    gap: 40px !important;
  }

  /* About chairman grid */
  #page-about .pg-wrap div[style*="300px"] {
    grid-template-columns: 220px 1fr !important;
    gap: 36px !important;
  }

  /* Urban 3欄 works grid */
  div[style*="repeat(3,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 768px) {
  #esg .si > div { grid-template-columns: 1fr !important; gap: 36px !important; }
  #esg .si > div > div:last-child { order: -1; }
}

@media (max-width: 768px) {
  #works-list-grid { grid-template-columns: 1fr 1fr !important; }
  #page-esg .pg-wrap > div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; gap: 36px !important; }
  #page-esg .pg-wrap > div[style*="repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
  #works-list-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 768px) {
  #page-news-list .pg-wrap > div > div[style*="grid-template-columns:140px"] {
    grid-template-columns: 80px 1fr !important;
    gap: 16px !important;
  }
}
@media (max-width: 480px) {
  #page-news-list .pg-wrap > div > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 768px) {
  #page-profile-list .art-body, #page-profile-article .art-body { font-size: 14px; }
  #profile-list-items > div { grid-template-columns: 80px 1fr !important; gap: 16px !important; }
  #pf-feat-img { min-height: 200px; }
}
@media (max-width: 480px) {
  #profile-list-items > div { grid-template-columns: 1fr !important; }
}

/* CHARITY REVIEW */
.cr-filter-wrap{margin-bottom:28px;}
.cr-filter-lbl{font-family:'Noto Sans TC',sans-serif;font-size:11px;letter-spacing:.45em;color:var(--light);margin-bottom:10px;}
.cr-year-row{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:10px;}
.cr-tag{font-family:'Noto Sans TC',sans-serif;font-size:11px;letter-spacing:.2em;color:var(--ink);border:1px solid rgba(42,37,32,.2);padding:6px 14px;cursor:pointer;transition:all .2s;background:transparent;}
.cr-tag.on{background:var(--ink);color:var(--white);border-color:var(--ink);}
.cr-tag:hover:not(.on){background:rgba(42,37,32,.06);}
.cr-cat-tag{font-family:'Noto Sans TC',sans-serif;font-size:11px;letter-spacing:.2em;color:#4b114c;border:1px solid rgba(75,17,76,.25);padding:6px 14px;cursor:pointer;transition:all .2s;background:transparent;}
.cr-cat-tag.on{background:#4b114c;color:var(--white);border-color:#4b114c;}
.cr-cat-tag:hover:not(.on){background:rgba(75,17,76,.06);}
.cr-count{font-family:'Noto Sans TC',sans-serif;font-size:11px;letter-spacing:.35em;color:var(--light);margin-bottom:16px;}
.cr-count span{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:300;color:var(--ink);margin-right:6px;}
.cr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-bottom:52px;}
.cr-card{background:#fff;cursor:pointer;overflow:hidden;transition:opacity .22s;}
.cr-card:hover{opacity:.82;}
.cr-card-img{width:100%;aspect-ratio:4/3;overflow:hidden;position:relative;}
.cr-card-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;}
.cr-card:hover .cr-card-img img{transform:scale(1.04);}
.cr-card-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
.cr-card-body{padding:12px 12px 16px;}
.cr-card-year{font-family:'Noto Sans TC',sans-serif;font-size:10px;letter-spacing:.35em;color:var(--light);margin-bottom:4px;}
.cr-card-badge{display:inline-block;font-family:'Noto Sans TC',sans-serif;font-size:10px;letter-spacing:.2em;color:#4b114c;border:1px solid rgba(75,17,76,.22);padding:3px 10px;margin-bottom:7px;}
.cr-card-title{font-family:'Noto Sans TC',sans-serif;font-size:12px;font-weight:500;line-height:1.6;color:var(--ink);letter-spacing:.03em;}
.cr-empty{padding:60px 0;text-align:center;font-family:'Noto Sans TC',sans-serif;font-size:11px;letter-spacing:.3em;color:var(--light);}
#page-charity-review .pg-media::before{background:transparent;}

/* CHARITY ARTICLE PAGE */
#page-charity-article .art-title {
  font-family: 'Noto Sans TC', sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(24px,3vw,38px) !important;
  letter-spacing: .03em;
  line-height: 1.3;
  color: #000;
}
.ca-photos { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--line); }
.ca-photos-lbl { font-family:'Noto Sans TC',sans-serif; font-size:9px; letter-spacing:.55em; color:var(--light); margin-bottom: 24px; }
.ca-photo-item { width: 100%; margin-bottom: 4px; overflow: hidden; }
.ca-photo-item img { width: 100%; display: block; object-fit: cover; transition: opacity .3s; }
.ca-photo-item img:hover { opacity: .92; }
#page-charity-article .pg-media::before { background: transparent; }
#page-co-design .pg-media::before { background: transparent; }

/* ── PAGE FADE IN ── */
.page.active {
  animation: pageFadeIn .55s cubic-bezier(.4,0,.2,1) both;
}
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── SCROLL TEXT REVEAL ── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .75s cubic-bezier(.4,0,.2,1), transform .75s cubic-bezier(.4,0,.2,1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-d1 { transition-delay: .1s; }
.reveal-d2 { transition-delay: .2s; }
.reveal-d3 { transition-delay: .35s; }
.reveal-d4 { transition-delay: .5s; }

/* ── CO-DESIGN TEAM ── */
#page-co-design { display:none; }
#page-co-design.active { display:block; }
#page-co-design .pg-media::before { background:transparent; }

/* Marquee */
.cdt-marquee-wrap { overflow:hidden; padding:40px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:56px; }
.cdt-marquee-track { display:inline-block; white-space:nowrap; animation:cdtMarquee 30s linear infinite; }
.cdt-marquee-wrap:hover .cdt-marquee-track { animation-play-state:paused; }
@keyframes cdtMarquee { from{transform:translateX(0);} to{transform:translateX(-50%);} }
.cdt-m-name { display:inline-block; font-family:'Noto Serif TC',serif; font-size:clamp(20px,2.5vw,32px); font-weight:200; color:#2a2520; letter-spacing:.15em; padding:0 36px; cursor:default; }
.cdt-m-sep { display:inline-block; font-family:'Cormorant Garamond',serif; font-size:20px; color:#c8c0b8; padding:0 4px; vertical-align:middle; }

/* List */

.cdt-cf-wrap { position:relative; width:100%; padding:40px 0 60px; margin-bottom:40px; overflow:visible; }
.cdt-cf-stage { position:relative; overflow:hidden; width:100%; }
.cdt-cf-arrows { display:flex; justify-content:space-between; align-items:center; padding:20px 48px 0; }
.cdt-cf-track { display:flex; align-items:center; justify-content:center; gap:0; position:relative; height:560px; }
.cdt-cf-card {
  position:absolute;
  width:280px;
  aspect-ratio:3/4;
  flex-shrink:0;
  transition:all .5s cubic-bezier(.4,0,.2,1);
  cursor:pointer;
  overflow:hidden;
}
.cdt-cf-card img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top;
  display:block;
  transition:filter .5s ease;
}
.cdt-cf-card .cdt-cf-overlay {
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(10,8,6,.8) 0%, transparent 55%);
  opacity:0;
  transition:opacity .5s;
}
.cdt-cf-card.active .cdt-cf-overlay { opacity:1; }
.cdt-cf-card .cdt-cf-label {
  position:absolute;
  bottom:0; left:0; right:0;
  padding:16px 14px 14px;
  opacity:0;
  transition:opacity .4s;
}
.cdt-cf-card.active .cdt-cf-label { opacity:1; }
.cdt-cf-name {
  font-family:'Noto Serif TC',serif;
  font-size:16px;
  font-weight:200;
  color:#faf8f4;
  letter-spacing:.12em;
  display:block;
  margin-bottom:3px;
}
.cdt-cf-sub {
  font-family:'Noto Sans TC',sans-serif;
  font-size:8px;
  letter-spacing:.4em;
  color:rgba(250,248,244,.55);
  display:block;
}

/* Arrows */
.cdt-cf-btn {
  position:static;
  width:36px; height:36px;
  background:transparent;
  border:none;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:#2a2520;
  transition:color .2s;
  font-size:22px;
  font-family:'Cormorant Garamond',serif;
  font-weight:300;
}
.cdt-cf-btn:hover { opacity:.5; }

/* Name below */
.cdt-cf-caption {
  text-align:center;
  margin-top:16px;
}
.cdt-cf-caption-num {
  font-family:'Cormorant Garamond',serif;
  font-size:12px;
  color:#b0a898;
  letter-spacing:.4em;
  display:block;
  margin-bottom:4px;
}
.cdt-cf-caption-name {
  font-family:'Noto Serif TC',serif;
  font-size:22px;
  font-weight:200;
  color:#2a2520;
  letter-spacing:.15em;
}

/* CDT Bio */
.cdt-cf-bio-wrap { max-width:680px; margin:32px auto 0; padding:0 20px; }
.cdt-cf-bio-name { font-family:'Noto Serif TC',serif; font-size:20px; font-weight:200; letter-spacing:.12em; color:#2a2520; margin-bottom:6px; }
.cdt-cf-bio-lbl { font-family:'Noto Sans TC',sans-serif; font-size:9px; letter-spacing:.5em; color:#b0a898; margin-bottom:16px; display:block; }
.cdt-cf-bio-rule { width:28px; height:1px; background:#b0a898; margin-bottom:16px; }
.cdt-cf-bio-text { font-family:'Noto Serif TC',serif; font-size:13px; font-weight:200; line-height:2.2; color:#555; letter-spacing:.04em; }
.cdt-cf-bio-empty { font-family:'Noto Sans TC',sans-serif; font-size:10px; letter-spacing:.3em; color:#c8c0b8; }

/* ════════════════════════════════════════
   RWD — 手機版（768px 以下）
   ════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── BREADCRUMB ── */
  .bc { padding: 16px 20px 0 !important; font-size:11px !important; flex-wrap:wrap; gap:6px; }

  /* ── PAGE WRAP ── */
  .pg-wrap { padding: 32px 20px 48px !important; }
  .pg-hero { height: 52vw; min-height: 220px; }

  /* ── SECTION LABELS ── */
  .sec-en { font-size: clamp(22px,7vw,36px) !important; }
  .s-en   { font-size: clamp(20px,6vw,32px) !important; }

  /* ── CHARITY REVIEW filters ── */
  .cr-year-row, .cr-cat-row { flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px; -webkit-overflow-scrolling:touch; }
  .cr-tag, .cr-cat-tag { flex-shrink:0; font-size:10px !important; padding:5px 10px !important; }
  .cr-grid { grid-template-columns: 1fr 1fr !important; }

  /* ── MARQUEE (CDT + Marquee) ── */
  .cdt-m-name { font-size: clamp(16px,4vw,24px) !important; padding: 0 18px !important; }
  .cdt-marquee-wrap { padding: 24px 0 !important; }

  /* ── COVERFLOW ── */
  .cdt-cf-track { height: 340px !important; }
  .cdt-cf-card  { width: 160px !important; }
  .cdt-cf-bio-wrap { padding: 0 16px !important; }
  .cdt-cf-bio-text { font-size: 12px !important; line-height: 2 !important; }

  /* ── CO-DESIGN sec-jp ── */
  #page-co-design .sec-jp { font-size: 12px !important; letter-spacing: .1em !important; }

  /* ── PROFILE LIST ── */
  #pf-featured { height: 52vw !important; min-height: 200px; }

  /* ── CHARITY ARTICLE ── */
  .ca-photo-item img { max-height: 80vw; object-fit: cover; }

  /* ── FOOTER ── */
  .ft { padding: 40px 20px 24px !important; }
  .ft-top { padding-bottom: 28px !important; }
  .ft-br { font-size: 16px !important; }
  .ft-bt { flex-direction: column !important; gap: 8px !important; text-align:center !important; }
  .ft-cp { text-align:center !important; }
}

/* ════════════════════════════════════════
   RWD — 超小螢幕（480px 以下）
   ════════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── COVERFLOW ── */
  .cdt-cf-track { height: 280px !important; }
  .cdt-cf-card  { width: 130px !important; }

  /* ── CHARITY REVIEW ── */
  .cr-grid { grid-template-columns: 1fr !important; }

  /* ── MARQUEE ── */
  .cdt-m-name { font-size: 14px !important; padding: 0 12px !important; }

  /* ── BREADCRUMB ── */
  .bc { font-size:10px !important; }
}