:root{
    /* 維向視覺式：純黑白，不用彩色點綴，層次靠字重／字距／透明度區分 */
    --bg:#000;
    --bg-2:#0c0c0c;
    --bg-3:#161616;
    --fg:#fff;
    --fg-dim:rgba(255,255,255,.7);
    --fg-dimmer:rgba(255,255,255,.42);
    --line:rgba(255,255,255,.14);
    --gold:var(--fg);        /* 不再是金色點綴，統一用白色 */
    --sans:'Noto Sans TC',sans-serif;
    --display:var(--sans);   /* 拿掉裝飾襯線體，全站統一無襯線 */
    --mono:'JetBrains Mono',monospace;
    --ease:cubic-bezier(.22,1,.36,1);
    --header-h:78px;
    --nav-h:0px;      /* 桌機寬度才會有 logo 下方那排選單，行動裝置收進漢堡選單 */
  }
  @media (min-width:1100px){ :root{ --header-h:96px; --nav-h:46px; } }

  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + var(--nav-h) - 1px);-webkit-text-size-adjust:100%;background:var(--bg);}
  html.intro-on,html.intro-on body{overflow:hidden;}
  body{background:var(--bg);color:var(--fg);font-family:var(--sans);font-weight:300;line-height:1.85;overflow-x:hidden;-webkit-font-smoothing:antialiased;}
  body.locked{overflow:hidden;}
  ::selection{background:var(--gold);color:var(--bg);}
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}
  button{font:inherit;color:inherit;}
  .wrap{max-width:1240px;margin:0 auto;padding:0 max(32px, env(safe-area-inset-left));}
  :focus-visible{outline:2px solid var(--gold);outline-offset:4px;}

  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important;}
  }

  /* ---------- 共用 ---------- */
  .tag{display:inline-flex;align-items:center;gap:14px;font-family:var(--display);font-size:.95rem;font-weight:500;letter-spacing:.34em;color:var(--gold);text-transform:uppercase;}
  .tag::before{content:'';width:34px;height:1px;background:currentColor;transform-origin:left;transition:transform 1.1s var(--ease) .25s;}
  .js .tag::before{transform:scaleX(0);}
  .js .in .tag::before,.js .tag.in::before,.ready .tag.a::before{transform:scaleX(1);}
  h2.title{font-weight:300;letter-spacing:.14em;line-height:1.35;font-size:clamp(1.9rem,3.8vw,3rem);margin-top:18px;}
  .lede{color:var(--fg-dim);max-width:36ch;font-size:.98rem;text-wrap:balance;}
  .section-head .lede{max-width:none;}   /* 首頁這兩句話不要因為固定寬度被硬拆成兩行 */

  .pill{display:inline-flex;align-items:center;gap:14px;padding:15px 32px;border-radius:999px;font-weight:400;font-size:.92rem;letter-spacing:.14em;border:1px solid transparent;cursor:pointer;background:none;transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);}
  .pill svg{width:13px;height:13px;transition:transform .4s var(--ease);}
  .pill:hover svg{transform:translate(3px,-3px);}
  .pill-line{border-color:rgba(255,255,255,.55);color:var(--fg);}
  .pill-line:hover{background:var(--fg);color:var(--bg);border-color:var(--fg);}
  .pill-solid{background:var(--fg);color:var(--bg);}
  .pill-solid:hover{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1px var(--fg);}

  /* 底線由左滑出的文字連結（春麗式） */
  .ulink{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;padding-bottom:3px;transition:background-size .45s var(--ease),color .3s;}
  .ulink:hover{background-size:100% 1px;}
  .ulink.on{background-size:100% 1px;}
  .ulink.on:hover{background-position:100% 100%;background-size:0 1px;}
  .arrow-link{display:inline-flex;align-items:center;gap:12px;font-size:.92rem;letter-spacing:.12em;}
  .arrow-link i{font-style:normal;transition:transform .4s var(--ease);}
  .arrow-link:hover i{transform:translateX(6px);}

  /* 捲動顯現：淡入上浮 / 圖片由下往上揭開 */
  .js .reveal{opacity:0;transform:translateY(34px);transition:opacity 1.1s var(--ease) var(--d,0s),transform 1.1s var(--ease) var(--d,0s);}
  .js .reveal.in{opacity:1;transform:none;}
  /* 註：clip-path 套在內層圖片，外層容器才會被 IntersectionObserver 正常偵測到 */
  .js .clip>img{clip-path:inset(100% 0 0 0);transform:scale(1.2);transition:clip-path 1.5s var(--ease) var(--d,0s),transform 2s var(--ease) var(--d,0s);}
  .js .clip.in>img{clip-path:inset(0 0 0 0);transform:none;}

  section{position:relative;}
  .block{padding:clamp(88px,12vw,170px) 0;}

  /* ---------- 開場動畫 ---------- */
  .intro{display:none;position:fixed;inset:0;z-index:500;background:var(--bg);color:var(--fg);flex-direction:column;align-items:center;justify-content:center;overflow:hidden;animation:introFail 0s linear 7s forwards;}
  .intro-on .intro{display:flex;}
  @keyframes introFail{to{visibility:hidden;pointer-events:none;}}
  .intro.leave{transform:translateY(-100%);transition:transform 1.1s cubic-bezier(.76,0,.24,1);}
  .intro::before{content:'';position:absolute;left:50%;top:50%;width:min(120vw,900px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.10),transparent 62%);opacity:0;animation:fadeIn 1.6s ease .2s forwards;}
  @keyframes fadeIn{to{opacity:1;}}
  .intro-mark{position:relative;width:clamp(120px,22vw,170px);aspect-ratio:1;display:flex;align-items:center;justify-content:center;}
  .intro-mark svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);}
  .intro-mark circle{fill:none;stroke:var(--gold);stroke-width:.8;stroke-dasharray:565;stroke-dashoffset:565;animation:draw 1.6s cubic-bezier(.65,0,.35,1) .15s forwards;}
  @keyframes draw{to{stroke-dashoffset:0;}}
  .intro-mark img{width:46%;filter:brightness(0) invert(1);opacity:0;transform:scale(.8);animation:pop 1.1s var(--ease) .7s forwards;}
  @keyframes pop{to{opacity:1;transform:none;}}
  .intro-word{margin-top:34px;font-family:var(--display);font-weight:500;font-size:clamp(1.5rem,4.4vw,2.2rem);text-transform:uppercase;white-space:nowrap;opacity:0;letter-spacing:.7em;padding-left:.7em;animation:wordIn 1.5s var(--ease) 1.05s forwards;}
  @keyframes wordIn{to{opacity:1;letter-spacing:.2em;padding-left:.2em;}}
  .intro-co{margin-top:12px;font-size:.78rem;letter-spacing:.5em;padding-left:.5em;color:var(--gold);opacity:0;animation:rise .9s var(--ease) 1.6s forwards;}
  .intro-line{position:absolute;left:0;right:0;bottom:calc(16vh + env(safe-area-inset-bottom));text-align:center;font-weight:200;font-size:clamp(.95rem,2.4vw,1.2rem);letter-spacing:.34em;color:var(--fg-dim);opacity:0;animation:rise 1s var(--ease) 2s forwards;padding:0 20px;}
  .intro-skip{position:absolute;right:max(24px,env(safe-area-inset-right));bottom:calc(28px + env(safe-area-inset-bottom));background:none;border:none;cursor:pointer;font-size:.82rem;letter-spacing:.24em;color:var(--fg-dim);padding:10px 4px;transition:color .3s;}
  .intro-skip:hover{color:var(--gold);}

  /* ---------- HEADER：置中字標 + 選單（維向式） ---------- */
  .site-header{position:fixed;top:0;left:0;right:0;z-index:100;padding-top:env(safe-area-inset-top);color:var(--fg);transition:background .5s var(--ease),transform .5s var(--ease),opacity 1s ease .4s;}
  .js .site-header{opacity:0;}
  .ready .site-header{opacity:1;}
  .site-header.scrolled{background:rgba(0,0,0,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);}
  .site-header.away{transform:translateY(-100%);}
  .nav-top{position:relative;display:flex;align-items:center;justify-content:center;height:var(--header-h);}
  .brand{display:flex;align-items:center;gap:13px;}
  .brand img{height:42px;width:42px;object-fit:contain;filter:brightness(0) invert(1);}
  .brand-type{display:flex;flex-direction:column;line-height:1.1;white-space:nowrap;}
  .brand-type b{font-family:var(--display);font-size:1.6rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;}
  .brand-type span{font-size:.7rem;letter-spacing:.5em;color:var(--gold);margin-top:4px;text-align:center;padding-left:.5em;}   /* padding-left 抵銷字距在最後一個字後面多出來的空白，視覺上才會真的置中 */
  .menu-btn{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:14px;background:none;border:none;cursor:pointer;font-family:var(--display);font-size:.95rem;letter-spacing:.3em;text-transform:uppercase;padding:10px 0 10px 10px;}
  .menu-btn .bars{width:28px;height:10px;position:relative;}
  .menu-btn .bars::before,.menu-btn .bars::after{content:'';position:absolute;height:1px;background:currentColor;transition:width .4s var(--ease);}
  .menu-btn .bars::before{top:0;left:0;width:28px;}
  .menu-btn .bars::after{bottom:0;right:0;width:18px;}
  .menu-btn:hover .bars::after{width:28px;}
  /* 桌機：logo 下方那排橫向選單（維向式），取代漢堡選單 */
  .nav-strip{border-top:1px solid var(--line);display:none;}
  .nav-strip-inner{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 36px;height:var(--nav-h);align-items:center;}
  .nav-strip a{font-size:.86rem;letter-spacing:.06em;color:var(--fg-dim);white-space:nowrap;padding:4px 2px;position:relative;transition:color .3s;}
  .nav-strip a:hover{color:var(--fg);}
  .nav-strip a[aria-current="page"]{color:var(--fg);}
  .nav-strip a[aria-current="page"]::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--fg);}
  @media (min-width:1100px){
    .nav-strip{display:block;}
    .menu-btn{display:none;}
  }
  @media (max-width:760px){
    .menu-btn .label{display:none;}
    .brand{gap:10px;}
    .brand-type b{font-size:1.1rem;letter-spacing:.1em;}
    .brand-type span{font-size:.6rem;letter-spacing:.4em;padding-left:.4em;}
    .brand img{height:30px;width:30px;}
  }

  /* ---------- 全螢幕選單 ---------- */
  .menu{position:fixed;inset:0;z-index:200;background:var(--bg);color:var(--fg);display:flex;flex-direction:column;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);visibility:hidden;opacity:0;transform:translateY(-14px);transition:opacity .5s var(--ease),transform .6s var(--ease),visibility 0s linear .6s;overflow-y:auto;}
  .menu > .wrap{width:100%;}
  .menu.open{visibility:visible;opacity:1;transform:none;transition-delay:0s;}
  .menu-top{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);flex-shrink:0;}
  .menu-close{background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:14px;font-family:var(--display);font-size:.95rem;letter-spacing:.3em;text-transform:uppercase;padding:10px 0 10px 10px;}
  .menu-close .x{width:26px;height:26px;position:relative;}
  .menu-close .x::before,.menu-close .x::after{content:'';position:absolute;left:0;top:12px;width:26px;height:1px;background:currentColor;transform:rotate(45deg);}
  .menu-close .x::after{transform:rotate(-45deg);}
  .menu-body{flex:1;display:grid;grid-template-columns:1.3fr 1fr;gap:64px;align-items:center;padding-top:20px;padding-bottom:40px;}
  .menu-links{list-style:none;}
  .menu-links a{display:flex;align-items:baseline;gap:22px;padding:10px 0;font-weight:200;font-size:clamp(1.4rem,2.9vw,2.2rem);letter-spacing:.14em;line-height:1.25;border-bottom:1px solid var(--line);transition:color .35s var(--ease),padding-left .45s var(--ease);}
  .menu-links a i{font-family:var(--display);font-style:normal;font-size:.95rem;letter-spacing:.2em;color:var(--gold);}
  .menu-links a:hover{color:var(--gold);padding-left:14px;}
  .menu-links li{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
  .menu.open .menu-links li{opacity:1;transform:none;transition-delay:calc(var(--i,0) * .05s + .1s);}
  .menu-links li.menu-group{font-family:var(--display);font-size:.85rem;letter-spacing:.34em;color:var(--fg-dimmer);text-transform:uppercase;padding:22px 0 4px;}
  .menu-side{color:var(--fg-dim);font-size:.92rem;display:flex;flex-direction:column;gap:30px;}
  .menu-side b{display:block;font-family:var(--display);font-weight:500;font-size:.9rem;letter-spacing:.3em;color:var(--gold);text-transform:uppercase;margin-bottom:6px;}
  .menu-side a{color:var(--fg);}
  @media (max-width:820px){
    .menu-body{grid-template-columns:1fr;gap:36px;align-items:start;}
    .menu-side{flex-direction:row;flex-wrap:wrap;gap:22px 40px;}
    .menu-close .label{display:none;}
  }

  /* ---------- HERO ---------- */
  .hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;background:var(--bg);overflow:hidden;isolation:isolate;text-align:center;}
  .hero-bg{position:absolute;inset:0;z-index:-3;will-change:transform;}
  .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:60% 40%;transform:scale(1.1);transition:opacity 1.4s var(--ease);}
  .js .hero-bg img{opacity:0;}
  .js .hero-bg img.loaded{opacity:1;}
  .ready .hero-bg img{animation:settle 3s var(--ease) forwards;}
  @keyframes settle{to{transform:scale(1);}}
  .hero::before{content:'';position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse 55% 42% at 50% 64%,rgba(0,0,0,.5),rgba(0,0,0,0) 100%),linear-gradient(to top,rgba(0,0,0,.94) 0%,rgba(0,0,0,.66) 36%,rgba(0,0,0,.14) 68%),linear-gradient(to bottom,rgba(0,0,0,.78) 0%,rgba(0,0,0,0) 26%);}
  .ripple-field{display:none;position:absolute;left:50%;top:44%;width:min(120vw,980px);transform:translate(-50%,-50%);z-index:-1;opacity:.55;pointer-events:none;}
  .ripple-field svg{width:100%;height:auto;overflow:visible;}
  .ripple-ring{fill:none;stroke:var(--gold);stroke-width:.7;transform-origin:300px 300px;animation:ripple 9s cubic-bezier(.2,.6,.3,1) infinite;opacity:0;}
  .ripple-ring.r2{animation-delay:2.25s;stroke:var(--fg);}
  .ripple-ring.r3{animation-delay:4.5s;}
  .ripple-ring.r4{animation-delay:6.75s;stroke:var(--fg);}
  @keyframes ripple{0%{transform:scale(.2);opacity:0;}14%{opacity:.6;}100%{transform:scale(1.05);opacity:0;}}
  .orbit{transform-origin:300px 300px;animation:spin 26s linear infinite;}
  .orbit-track{fill:none;stroke:var(--fg);stroke-width:.6;opacity:.35;}
  .orbit-dot{fill:var(--gold);}
  @keyframes spin{to{transform:rotate(360deg);}}

  .hero-inner{padding-top:calc(var(--header-h) + var(--nav-h) + 40px);padding-bottom:clamp(28px,5vh,56px);display:flex;flex-direction:column;align-items:center;}
  .hero > .wrap{width:100%;}
  .js .a{opacity:0;}
  .ready .a{animation:rise 1.2s var(--ease) var(--ad,0s) forwards;}
  @keyframes rise{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:none;}}
  .hero .tag::after{content:'';width:34px;height:1px;background:currentColor;}
  .hero .tag{text-shadow:0 1px 14px rgba(0,0,0,.9);}
  .hero-title{font-weight:200;letter-spacing:.14em;line-height:1.35;font-size:clamp(1.7rem,3.4vw,2.9rem);margin-top:22px;text-shadow:0 2px 40px rgba(0,0,0,.5);max-width:100%;min-width:0;}
  .hero-title em{font-style:normal;font-weight:300;color:var(--gold);white-space:nowrap;}
  .hero-tagline{margin-top:22px;color:rgba(255,255,255,.86);font-size:1rem;letter-spacing:.12em;white-space:nowrap;}
  .m-br{display:none;}
  .hero-tagline small{display:block;margin-top:6px;font-family:var(--display);font-size:.98rem;letter-spacing:.14em;color:var(--fg-dim);}
  .hero-actions{margin-top:34px;display:flex;gap:26px;flex-wrap:wrap;justify-content:center;align-items:center;}
  .hero-foot{border-top:1px solid rgba(255,255,255,.2);display:flex;justify-content:flex-end;align-items:center;gap:24px;flex-wrap:wrap;padding-top:22px;padding-bottom:calc(26px + env(safe-area-inset-bottom));font-size:.84rem;letter-spacing:.14em;color:rgba(255,255,255,.7);}
  .scroll-cue{display:flex;align-items:center;gap:12px;font-family:var(--display);letter-spacing:.34em;font-size:.82rem;text-transform:uppercase;}
  .scroll-cue .bar{width:1px;height:34px;background:rgba(255,255,255,.25);position:relative;overflow:hidden;}
  .scroll-cue .bar::after{content:'';position:absolute;top:-100%;left:0;width:100%;height:100%;background:var(--gold);animation:pour 2.4s ease-in-out infinite;}
  @keyframes pour{0%{top:-100%;}60%{top:100%;}100%{top:100%;}}
  @media (max-width:760px), (max-aspect-ratio:1/1){.hero-bg img{object-position:34% 35%;}}
  @media (max-width:760px){
    .hero-foot{display:none;}
    .hero .tag{display:block;text-align:center;font-size:.68rem;letter-spacing:.14em;white-space:normal;max-width:27ch;margin:0 auto;line-height:1.6;}
    .hero .tag::before,.hero .tag::after{display:none;}
    .hero .tag::before,.hero .tag::after{width:20px;}
    .tag-sub{display:none;}
    .hero-inner{padding-top:calc(var(--header-h) + var(--nav-h) + 30px);}
    .hero-title{letter-spacing:.08em;font-size:clamp(1.5rem,6.6vw,2rem);margin-top:18px;}
    .hero-tagline{margin-top:16px;font-size:clamp(.72rem,3.85vw,.95rem);letter-spacing:.04em;line-height:1.95;}
    .m-br{display:inline;}
    .m-br::after{content:'\A';white-space:pre;}
    .hero-tagline small,.hero-actions .arrow-link{display:none;}
    .hero-actions{margin-top:26px;}
    .hero-actions .pill{padding:13px 26px;font-size:.86rem;letter-spacing:.1em;}
  }

  /* ---------- ABOUT ---------- */
  .about-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(48px,8vw,120px);align-items:center;}
  .about-media{position:relative;padding-bottom:12%;}
  .about-media.single{padding-bottom:0;}
  .about-media.single .m1{width:100%;}
  .about-media .m1{position:relative;width:82%;aspect-ratio:2/3;overflow:hidden;background:var(--bg-3);}
  .about-media .m2{position:absolute;right:0;bottom:0;width:46%;aspect-ratio:2/3;overflow:hidden;background:var(--bg-3);outline:8px solid var(--bg);}
  .about-media img{width:100%;height:100%;object-fit:cover;}
  .about-copy .lede{margin-top:22px;max-width:none;}
  @media (max-width:520px){.about-copy .lede{max-width:22ch;}}
  .about-copy .body{margin-top:38px;padding-top:34px;border-top:1px solid var(--line);}
  .company{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin-bottom:26px;}
  .company b{font-weight:400;font-size:1.25rem;letter-spacing:.16em;color:var(--fg);}
  .company span{font-family:var(--display);font-size:1.05rem;letter-spacing:.14em;color:var(--gold);text-transform:uppercase;}
  .about-copy p{color:var(--fg-dim);margin-bottom:20px;font-size:1rem;max-width:50ch;}
  .about-copy p.lead{color:var(--fg);font-size:1.12rem;line-height:2;}
  .about-stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:44px;border-top:1px solid var(--line);}
  .about-stats div{padding:22px 10px 0 0;}
  .about-stats b{font-family:var(--display);font-size:2.4rem;font-weight:500;color:var(--gold);display:block;line-height:1.1;}
  .about-stats span{font-size:.78rem;color:var(--fg-dim);letter-spacing:.08em;}
  @media (max-width:900px){.about-grid{grid-template-columns:1fr;}.about-media{max-width:440px;}}
  @media (max-width:520px){.about-stats{grid-template-columns:1fr 1fr;row-gap:22px;}}

  /* ---------- SERVICES ---------- */
  .alt{background:var(--bg-2);}
  .section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap;margin-bottom:clamp(44px,6vw,80px);}
  .svc-list{list-style:none;border-top:1px solid var(--line);}
  .svc{display:grid;grid-template-columns:90px 1.05fr 1.3fr .9fr;gap:32px;align-items:center;padding:34px 0;border-bottom:1px solid var(--line);position:relative;}
  .svc::before{content:'';position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--gold);transition:width .8s var(--ease);}
  .svc:hover::before{width:100%;}
  .svc-no{font-family:var(--display);font-size:1.5rem;color:var(--gold);letter-spacing:.08em;}
  .svc-name small{display:block;font-family:var(--display);font-size:.82rem;letter-spacing:.3em;color:var(--fg-dimmer);text-transform:uppercase;margin-bottom:4px;}
  .svc-name h3{font-weight:300;font-size:clamp(1.4rem,2.4vw,1.85rem);letter-spacing:.14em;transition:transform .6s var(--ease),color .4s;}
  .svc:hover .svc-name h3{transform:translateX(10px);color:var(--gold);}
  .svc p{font-size:.94rem;color:var(--fg-dim);max-width:44ch;}
  .svc-end{display:flex;flex-direction:column;align-items:flex-end;gap:12px;}
  .svc-spec{font-family:var(--mono);font-size:.7rem;color:var(--fg-dimmer);letter-spacing:.05em;text-align:right;}
  .svc-link{font-size:.86rem;letter-spacing:.14em;color:var(--fg-dim);}
  .svc-link:hover{color:var(--gold);}
  @media (max-width:900px){.svc{grid-template-columns:56px 1fr;gap:10px 16px;padding:28px 0;}.svc p,.svc-end{grid-column:2;}.svc-end{align-items:flex-start;}.svc-spec{text-align:left;}}

  /* ---------- WORK ---------- */
  .wrap.wide{max-width:1480px;}
  .filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:clamp(30px,4vw,52px);}
  .filter-btn{font-size:.86rem;letter-spacing:.12em;padding:10px 22px;border:1px solid var(--line);background:transparent;color:var(--fg-dim);cursor:pointer;border-radius:999px;transition:all .4s var(--ease);}
  .filter-btn:hover{color:var(--fg);border-color:var(--gold);}
  .filter-btn.active{background:var(--fg);border-color:var(--fg);color:var(--bg);font-weight:400;}
  @media (max-width:640px){
    .filters{flex-wrap:nowrap;overflow-x:auto;margin-right:-32px;padding-right:32px;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
    .filters::-webkit-scrollbar{display:none;}
    .filter-btn{flex:none;}
  }
  /* 拼貼式（masonry）：全站所有照片作品——首頁作品、分類頁相簿封面、相簿內頁完整
     照片牆——統一用同一套排版，靠 CSS column-count 分欄，每張各自依原始比例自然
     排高，不用 JS 算版面，橫式直式都不裁切。 */
  .gallery,.album-grid{--gap:14px;column-count:3;column-gap:var(--gap);}
  @media (max-width:900px){.gallery,.album-grid{column-count:2;}}
  @media (max-width:640px){.gallery,.album-grid{column-count:1;--gap:8px;}}
  /* 首頁作品牆：每 5 張為一組，一張大圖在左、四張小圖在右（2×2），跟維向首頁一致 */
  .wall-block{position:relative;width:100%;margin-bottom:8px;}
  .wall-block>.g-item{position:absolute;margin:0;cursor:zoom-in;}
  .wall-block>.g-item img{width:100%;height:100%;object-fit:cover;}
  @media (max-width:640px){
    .wall-block{height:auto !important;margin-bottom:6px;}
    .wall-block>.g-item{position:static;width:100% !important;height:auto !important;margin-bottom:6px;}
    .wall-block>.g-item img{height:auto;}
  }
  /* 活動紀錄分類頁：平面攝影／動態錄影兩個子分類的標題 */
  .cat-sub-head{display:flex;align-items:baseline;gap:18px;margin:clamp(56px,7vw,96px) 0 28px;}
  .cat-sub-head:first-child{margin-top:0;}
  .cat-sub-head h3{font-weight:300;letter-spacing:.06em;font-size:clamp(1.3rem,2.4vw,1.8rem);}
  .coming-mini{color:var(--fg-dimmer);font-size:.92rem;letter-spacing:.04em;padding-bottom:12px;}
  .album-cover{position:relative;display:block;margin:0 0 var(--gap) 0;break-inside:avoid;background:var(--bg-3);}
  .cover-frame{position:relative;display:block;overflow:hidden;}
  .cover-frame img{width:100%;height:auto;display:block;opacity:0;transform:scale(1.08);transition:opacity 1s var(--ease),transform 1.8s var(--ease);}
  .cover-frame img.loaded{opacity:1;transform:none;}
  .album-cover:hover .cover-frame img.loaded{transform:scale(1.04);transition-duration:1.1s;}
  .cover-cap{display:block;padding:16px 18px;background:var(--bg-2);font-weight:300;font-size:1rem;letter-spacing:.12em;transition:background .4s var(--ease),color .4s var(--ease);}
  .album-cover:hover .cover-cap{background:var(--fg);color:var(--bg);}
  @media (max-width:640px){.cover-cap{padding:12px 14px;font-size:.88rem;}}

  /* 相簿內頁標題：回分類連結 + 相簿名稱 */
  .back-link{display:inline-flex;align-items:center;gap:8px;color:var(--fg-dim);font-size:.86rem;letter-spacing:.1em;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;padding-bottom:3px;transition:background-size .4s var(--ease),color .3s;}
  .back-link:hover{background-size:100% 1px;color:var(--fg);}
  .ph-title{margin-top:18px;font-weight:300;letter-spacing:.1em;line-height:1.25;font-size:clamp(2rem,5vw,3.4rem);}
  .album-page-head{padding-bottom:clamp(36px,5vw,56px);}
  /* YouTube 影片縮圖：疊一個播放鍵，點了直接開新分頁播放，不進燈箱 */
  .g-item.video .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;}
  .g-item.video .play svg{width:52px;height:52px;fill:rgba(255,255,255,.92);filter:drop-shadow(0 2px 10px rgba(0,0,0,.5));transition:transform .35s var(--ease);}
  .g-item.video:hover .play svg{transform:scale(1.1);}
  .g-item.video.featured .play svg{width:72px;height:72px;}
  .g-item{position:relative;display:block;width:100%;margin:0 0 var(--gap) 0;break-inside:avoid;overflow:hidden;cursor:zoom-in;background:var(--bg-3);}
  .g-item img{width:100%;height:auto;display:block;opacity:0;transform:scale(1.15);transition:opacity 1s var(--ease),transform 1.8s var(--ease),clip-path 1.4s var(--ease) var(--d,0s);}
  .js .g-item img{clip-path:inset(100% 0 0 0);}
  .js .g-item.in img{clip-path:inset(0 0 0 0);}
  .g-item img.loaded{opacity:1;transform:none;}
  .g-item:hover img.loaded{transform:scale(1.05);transition-duration:1s,1.2s,1.4s;}
  .g-item.hide{display:none;}
  .g-item::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,0) 46%);opacity:0;transition:opacity .5s var(--ease);}
  .g-item:hover::after,.g-item:focus-visible::after{opacity:1;}
  @media (hover:none){.g-item::after{display:none;}}

  /* 後台勾選「精選顯示」的作品：獨占整個寬度、放大顯示，但完全依照片原始比例，不裁切、不變形 */
  .g-item.featured{column-span:all;display:flex;justify-content:center;background:none;overflow:visible;margin-bottom:var(--gap);}
  .g-item.featured::after{display:none;}
  .g-item.featured img{width:auto;height:auto;max-width:100%;max-height:min(66vh,640px);object-fit:contain;}
  @media (max-width:640px){.g-item.featured img{max-height:70vh;}}
  .gallery-empty{display:none;padding:70px 0 40px;border-top:1px solid var(--line);text-align:center;color:var(--fg-dim);}
  .gallery-empty.show{display:block;}
  .gallery-empty h3{font-weight:300;font-size:1.5rem;color:var(--fg);margin-bottom:10px;letter-spacing:.14em;}
  .upload-note{margin-top:40px;font-size:.86rem;color:var(--fg-dimmer);text-align:center;letter-spacing:.08em;}

  /* ---------- LIGHTBOX ---------- */
  .lb{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.97);display:flex;align-items:center;justify-content:center;visibility:hidden;opacity:0;transition:opacity .4s var(--ease),visibility 0s linear .4s;-webkit-user-select:none;user-select:none;touch-action:pan-y pinch-zoom;}
  .lb.open{visibility:visible;opacity:1;transition-delay:0s;}
  .lb-stage{position:absolute;inset:0;padding:calc(64px + env(safe-area-inset-top)) 72px calc(64px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:center;}
  .lb-stage img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transition:opacity .35s var(--ease);}
  .lb-stage img.swap{opacity:0;}
  .lb button{position:absolute;background:none;border:none;color:var(--fg);cursor:pointer;display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;transition:background .3s;}
  .lb button:hover{background:rgba(255,255,255,.1);}
  .lb button svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.2;}
  .lb-close{top:calc(10px + env(safe-area-inset-top));right:14px;}
  .lb-prev{left:12px;top:50%;margin-top:-26px;}
  .lb-next{right:12px;top:50%;margin-top:-26px;}
  .lb-count{position:absolute;left:0;right:0;bottom:calc(20px + env(safe-area-inset-bottom));text-align:center;font-family:var(--display);letter-spacing:.3em;font-size:.95rem;color:var(--fg-dim);}
  @media (max-width:700px){.lb-stage{padding:calc(60px + env(safe-area-inset-top)) 8px calc(56px + env(safe-area-inset-bottom));}.lb-prev,.lb-next{display:none;}}

  /* ---------- 影片彈窗：點縮圖站內直接播放 ---------- */
  .vlb{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.97);display:flex;align-items:center;justify-content:center;visibility:hidden;opacity:0;transition:opacity .4s var(--ease),visibility 0s linear .4s;}
  .vlb.open{visibility:visible;opacity:1;transition-delay:0s;}
  .vlb-stage{position:absolute;inset:0;padding:calc(72px + env(safe-area-inset-top)) 24px calc(32px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:center;}
  .vlb-frame{width:min(100%,1100px);aspect-ratio:16/9;background:#000;}
  .vlb-frame iframe{width:100%;height:100%;border:0;display:block;}
  .vlb button{position:absolute;background:none;border:none;color:var(--fg);cursor:pointer;display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;transition:background .3s;}
  .vlb button:hover{background:rgba(255,255,255,.1);}
  .vlb button svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.2;}
  @media (max-width:700px){.vlb-stage{padding:calc(60px + env(safe-area-inset-top)) 10px calc(24px + env(safe-area-inset-bottom));}}

  /* ---------- QUOTE BAND（視差） ---------- */
  .band{position:relative;isolation:isolate;text-align:center;padding:clamp(110px,16vw,220px) 0;overflow:hidden;}
  .band-bg{position:absolute;left:0;right:0;top:-14%;bottom:-14%;z-index:-2;will-change:transform;}
  .band-bg img{width:100%;height:100%;object-fit:cover;object-position:center 45%;}
  .band::before{content:'';position:absolute;inset:0;z-index:-1;background:rgba(0,0,0,.82);}
  .band blockquote{font-weight:200;font-size:clamp(1.5rem,3.6vw,2.7rem);line-height:1.85;letter-spacing:.16em;max-width:20em;margin:0 auto;}
  .band blockquote em{font-style:normal;font-weight:300;color:var(--gold);}
  .band .pill{margin-top:44px;}
  @media (max-width:560px){.band blockquote{font-size:1.3rem;letter-spacing:.1em;}.band blockquote br{display:none;}}
  .band .mark{font-family:var(--display);font-size:5rem;line-height:.5;color:var(--gold);display:block;margin-bottom:12px;}

  /* ---------- CONTACT ---------- */
  .contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(48px,8vw,110px);}
  .contact-cards{display:flex;flex-direction:column;border-top:1px solid var(--line);}
  .contact-card{padding:28px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);transition:padding .5s var(--ease),color .3s;}
  .contact-card:hover{padding-left:14px;color:var(--gold);}
  .contact-card b{font-family:var(--display);font-weight:500;font-size:.88rem;letter-spacing:.3em;color:var(--gold);display:block;margin-bottom:4px;text-transform:uppercase;}
  .contact-card span{font-size:1.05rem;}
  .contact-card .arrow{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;transition:all .5s var(--ease);}
  .contact-card .arrow svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.4;}
  .contact-card:hover .arrow{background:var(--gold);border-color:var(--gold);color:var(--bg);transform:rotate(-45deg) scale(1.08);}
  form{display:flex;flex-direction:column;gap:30px;}
  .field{display:flex;flex-direction:column;gap:6px;}
  .field label{font-family:var(--display);font-weight:500;font-size:.86rem;letter-spacing:.26em;color:var(--fg-dim);text-transform:uppercase;}
  .field input,.field select,.field textarea{background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,.25);color:var(--fg);border-radius:0;padding:12px 0;font-family:var(--sans);font-size:1rem;font-weight:300;-webkit-appearance:none;appearance:none;transition:border-color .35s;}
  .field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23ffffff' stroke-width='1.4'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 4px center;padding-right:28px;}
  .field select option{color:#111;background:#fff;}
  .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--gold);}
  .field input:-webkit-autofill{-webkit-text-fill-color:var(--fg);box-shadow:0 0 0 100px var(--bg-2) inset;}
  .field textarea{resize:vertical;min-height:120px;line-height:1.7;}
  .field ::placeholder{color:var(--fg-dimmer);}
  .field-row{display:grid;grid-template-columns:1fr 1fr;gap:30px;}
  @media (max-width:640px){.field-row{grid-template-columns:1fr;}}
  .form-note{font-size:.8rem;color:var(--fg-dimmer);}
  .form-status{font-size:.86rem;min-height:1.4em;}
  .form-status.is-ok{color:var(--fg);}
  .form-status.is-error{color:var(--fg);font-style:italic;}
  .form-status a{text-decoration:underline;text-underline-offset:2px;}
  @media (max-width:900px){.contact-grid{grid-template-columns:1fr;}}

  /* ---------- FOOTER ---------- */
  footer{background:var(--bg);padding:clamp(60px,8vw,100px) 0 calc(32px + env(safe-area-inset-bottom));}
  .footer-top{display:grid;grid-template-columns:1.3fr .55fr .6fr .7fr;gap:40px;padding-bottom:56px;border-bottom:1px solid var(--line);}
  .footer-word{font-family:var(--display);font-weight:500;text-transform:uppercase;letter-spacing:.08em;font-size:clamp(1.6rem,3.6vw,2.6rem);line-height:1.2;white-space:nowrap;}
  .footer-word span{display:block;font-family:var(--sans);font-weight:300;font-size:.42em;letter-spacing:.5em;color:var(--gold);margin-top:12px;white-space:normal;}
  .footer-col h4{font-family:var(--display);font-weight:500;font-size:.9rem;letter-spacing:.3em;color:var(--gold);text-transform:uppercase;margin-bottom:16px;}
  .footer-col ul{list-style:none;display:flex;flex-direction:column;gap:9px;font-size:.92rem;color:var(--fg-dim);}
  .footer-col a:hover{color:var(--fg);}
  .footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:28px;font-size:.9rem;letter-spacing:.12em;color:var(--fg-dim);}
  .footer-bottom b{font-weight:400;color:var(--fg);letter-spacing:.16em;white-space:nowrap;}
  @media (max-width:560px){.footer-bottom b{display:block;margin-top:4px;}}
  .back-top{font-family:var(--display);letter-spacing:.26em;font-size:.86rem;text-transform:uppercase;color:var(--fg-dim);border:1px solid var(--line);padding:9px 18px;border-radius:999px;transition:all .4s var(--ease);}
  .back-top:hover{border-color:var(--gold);color:var(--gold);}
  @media (max-width:900px){.footer-top{grid-template-columns:1fr 1fr;}.footer-top>:first-child{grid-column:1/-1;}}

  /* ---------- 浮動 LINE 按鈕（春麗式） ---------- */
  .fab{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:calc(18px + env(safe-area-inset-bottom));z-index:90;display:flex;align-items:center;height:56px;padding:0 17px;border-radius:999px;background:rgba(17,20,27,.82);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.28);color:var(--fg);opacity:0;transform:translateY(20px) scale(.9);pointer-events:none;transition:opacity .5s var(--ease),transform .5s var(--ease),background .4s,border-color .4s;}
  .fab.show{opacity:1;transform:none;pointer-events:auto;}
  .fab svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;}
  .fab span{max-width:0;overflow:hidden;white-space:nowrap;font-size:.86rem;letter-spacing:.14em;transition:max-width .6s var(--ease),margin .6s var(--ease);}
  .fab:hover{background:var(--fg);color:var(--bg);border-color:var(--fg);}
  .fab:hover span{max-width:120px;margin-left:12px;}

  /* ---------- 換頁轉場（春麗式） ---------- */
  .curtain{position:fixed;inset:0;z-index:400;background:var(--bg);pointer-events:none;opacity:0;transition:opacity .45s ease;}
  .js .curtain{opacity:1;}
  .ready .curtain{opacity:0;transition-duration:.9s;}
  html.leaving .curtain{opacity:1;pointer-events:auto;transition-duration:.4s;}

  /* ---------- 選單：目前頁面 ---------- */
  .menu-links a[aria-current="page"]{color:var(--gold);}

  /* ---------- 內頁標題區（維向式：大字英文標題 + 中文副標） ---------- */
  .page-head{position:relative;isolation:isolate;overflow:hidden;padding:calc(var(--header-h) + var(--nav-h) + clamp(36px,5.5vw,64px)) 0 clamp(36px,5vw,56px);border-bottom:1px solid var(--line);}
  .ph-en{font-family:var(--display);font-weight:500;text-transform:uppercase;letter-spacing:.02em;line-height:.95;font-size:clamp(2.6rem,7.6vw,5.6rem);margin-top:18px;}
  .ph-zh{margin-top:18px;font-weight:200;font-size:clamp(1.3rem,2.6vw,2rem);letter-spacing:.3em;color:var(--fg-dim);}
  .ph-lede{margin-top:22px;color:var(--fg-dim);text-wrap:balance;max-width:none;}
  @media (max-width:700px){.ph-lede{max-width:30ch;}}

  /* ---------- 首頁：分類列表 / 區塊標題連結 ---------- */
  .section-head .arrow-link{color:var(--fg);}
  .cat-list{list-style:none;border-top:1px solid var(--line);}
  .cat-list a{display:grid;grid-template-columns:90px 1fr auto;gap:24px;align-items:center;padding:30px 0;border-bottom:1px solid var(--line);position:relative;}
  .cat-list a::before{content:'';position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--gold);transition:width .8s var(--ease);}
  .cat-list a:hover::before{width:100%;}
  .cat-no{font-family:var(--display);font-size:1.5rem;color:var(--gold);letter-spacing:.08em;}
  .cat-name small{display:block;font-family:var(--display);font-size:.82rem;letter-spacing:.3em;color:var(--fg-dimmer);text-transform:uppercase;margin-bottom:4px;}
  .cat-name h3{font-weight:300;font-size:clamp(1.5rem,3vw,2.3rem);letter-spacing:.16em;transition:transform .6s var(--ease),color .4s;}
  .cat-list a:hover h3{transform:translateX(12px);color:var(--gold);}
  .cat-go{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .5s var(--ease);}
  .cat-go svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.4;}
  .cat-list a:hover .cat-go{background:var(--gold);border-color:var(--gold);color:var(--bg);transform:rotate(-45deg) scale(1.08);}
  @media (max-width:640px){.cat-list a{grid-template-columns:52px 1fr auto;gap:14px;padding:24px 0;}}

  /* ---------- 關於頁：延伸 ---------- */
  .about-copy .body:first-child{margin-top:0;padding-top:0;border-top:none;}

  /* ---------- 聯絡頁：公司資訊 ---------- */
  .co-card{margin-top:40px;padding-top:28px;border-top:1px solid var(--line);color:var(--fg-dim);font-size:.92rem;line-height:2;}
  .co-card b{display:block;color:var(--fg);font-weight:400;letter-spacing:.16em;font-size:1.1rem;}
  .co-card span{font-family:var(--display);letter-spacing:.14em;color:var(--gold);text-transform:uppercase;font-size:1rem;}

  /* ---------- 分類頁 ---------- */
  .spec-line{font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;color:var(--fg-dimmer);margin-bottom:clamp(28px,4vw,48px);}
  .coming{text-align:center;padding:clamp(40px,8vw,110px) 0;}
  .coming-en{display:block;font-weight:400;font-size:.8rem;letter-spacing:.5em;padding-left:.5em;color:var(--fg-dimmer);text-transform:uppercase;}
  .coming h3{margin-top:20px;font-weight:300;font-size:clamp(1.3rem,2.4vw,1.7rem);letter-spacing:.3em;padding-left:.3em;}
  .coming p{margin-top:16px;color:var(--fg-dim);}
  .coming-links{margin-top:38px;display:flex;gap:26px;flex-wrap:wrap;justify-content:center;align-items:center;}
  .next-cat{display:block;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(40px,6vw,72px) 0;position:relative;overflow:hidden;transition:background .6s var(--ease);}
  .next-cat::before{content:'';position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--gold);transition:width .9s var(--ease);}
  .next-cat:hover::before{width:100%;}
  .next-cat:hover{background:var(--bg-2);}
  .next-cat .wrap{display:grid;grid-template-columns:1fr auto;gap:6px 24px;align-items:center;}
  .next-label{grid-column:1/-1;font-family:var(--display);font-size:.9rem;letter-spacing:.32em;color:var(--gold);text-transform:uppercase;}
  .next-name{font-weight:200;font-size:clamp(2rem,6vw,4.4rem);letter-spacing:.14em;line-height:1.2;transition:transform .7s var(--ease);}
  .next-name small{display:block;font-family:var(--display);font-weight:400;font-size:.9rem;letter-spacing:.3em;color:var(--fg-dimmer);text-transform:uppercase;margin-bottom:6px;}
  .next-cat:hover .next-name{transform:translateX(14px);}
  .next-cat .cat-go{width:56px;height:56px;}
  .next-cat:hover .cat-go{background:var(--gold);border-color:var(--gold);color:var(--bg);transform:rotate(-45deg) scale(1.08);}

  .ph-spec{margin-top:16px;font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;color:var(--fg-dimmer);}
  .block.tight{padding-top:clamp(40px,5vw,64px);}