/* =========================================================
   MINIM PRODUCTION — one-pager
   ========================================================= */

:root{
  --bg:        #060907;
  --bg-soft:   #0a0f0c;
  --bg-card:   #0d1410;
  --ink:       #f3f0e8;
  --ink-dim:   #b3b2a8;
  --muted:     #7c8078;
  --line:      rgba(243,240,232,.13);
  --line-soft: rgba(243,240,232,.07);
  --accent:    #d8a878;
  --accent-dim:rgba(216,168,120,.14);
  --green:     #244824;
  --serif: 'Instrument Serif','Noto Serif TC',Georgia,serif;
  --sans:  'Inter','Noto Sans TC',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ease:  cubic-bezier(.16,1,.3,1);
  --pad:   clamp(20px, 5vw, 72px);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:16px;
  line-height:1.75;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  font-synthesis:none;
  overflow-x:hidden;
}

body.locked{ overflow:hidden; }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p{ margin:0; }
::selection{ background:var(--accent); color:#0a0a0b; }

/* film grain */
.grain{
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.055; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- shared bits ---------- */
.eyebrow{
  display:inline-block;
  font-family:var(--sans);
  font-size:11px;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--muted);
}

.section{
  padding:clamp(46px,6vw,88px) var(--pad);
  position:relative;
}

.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:32px; flex-wrap:wrap;
  margin-bottom:clamp(36px,5vw,64px);
}
.section-head-left h2{
  font-family:var(--serif);
  font-size:clamp(2.1rem,4.6vw,3.6rem);
  font-weight:400;
  line-height:1.1;
  letter-spacing:-.01em;
  margin-top:10px;
}
.section-note{
  font-size:13px; color:var(--muted); line-height:1.9; text-align:right;
}

/* 中文沒有真正的斜體，交給瀏覽器硬斜會變形 → 一律不斜，強調改用顏色＋字重 */
em{ font-style:normal; }

.link-arrow{
  display:inline-flex; align-items:center; gap:14px; padding-top:8px;
  font-size:13px; letter-spacing:.06em;
  border-bottom:1px solid var(--line);
  padding-bottom:8px;
  transition:border-color .4s var(--ease), color .4s var(--ease);
}
.link-arrow:hover{ color:var(--accent); border-color:var(--accent); }
.link-arrow-ic{ transition:transform .4s var(--ease); }
.link-arrow:hover .link-arrow-ic{ transform:translate(3px,-3px); }
.link-arrow.small{ font-size:12px; }

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1002;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  padding:22px var(--pad);
  transition:background .5s var(--ease), padding .5s var(--ease), border-color .5s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(6,9,7,.82);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  padding:14px var(--pad);
  border-bottom-color:var(--line-soft);
}

.brand{ display:flex; align-items:center; gap:12px; }
.brand-logo{
  width:36px; height:36px; object-fit:cover; flex:none;
  border-radius:3px;
  box-shadow:0 0 0 1px rgba(216,168,120,.28);
  transition:box-shadow .4s var(--ease);
}
.brand:hover .brand-logo{ box-shadow:0 0 0 1px rgba(216,168,120,.65); }
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-text b{
  font-family:var(--sans); font-size:14px; font-weight:600; letter-spacing:.22em;
}
.brand-text i{
  font-style:normal; font-size:10px; letter-spacing:.3em; color:var(--muted); margin-top:2px;
}

.nav-links{ display:flex; gap:34px; }
.nav-links a{
  font-size:13px; letter-spacing:.08em; color:var(--ink-dim);
  position:relative; padding:9px 0 4px;
  transition:color .35s;
}
.nav-links a span{
  font-size:9px; color:var(--muted); margin-right:6px; letter-spacing:.1em;
  vertical-align:super;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--accent); transition:width .45s var(--ease);
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a:hover::after{ width:100%; }

.nav-actions{ display:flex; align-items:center; gap:20px; }
.nav-social{
  font-size:11px; letter-spacing:.18em; color:var(--ink-dim);
  padding:8px 0; transition:color .3s;
}
.nav-social span{ font-size:9px; }
.nav-social:hover{ color:var(--accent); }

.btn-cta{
  font-size:12px; letter-spacing:.12em;
  padding:11px 22px; border:1px solid var(--line);
  border-radius:999px;
  transition:background .4s var(--ease), color .4s, border-color .4s;
}
.btn-cta:hover{ background:var(--accent); color:#0a0a0b; border-color:var(--accent); }

.burger{
  display:none; width:44px; height:44px; position:relative; z-index:1002;
}
.burger span{
  position:absolute; left:10px; width:24px; height:1px; background:var(--ink);
  transition:transform .45s var(--ease), opacity .3s;
}
.burger span:nth-child(1){ top:18px; }
.burger span:nth-child(2){ top:25px; }
.burger.open span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.burger.open span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }

.mobile-menu{
  position:fixed; top:0; left:0; right:0; bottom:0; z-index:1001;
  background:#070a08;
  padding:110px calc(var(--pad) + 12px) 48px var(--pad);
  display:flex; flex-direction:column; justify-content:space-between;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  transform:translateY(-102%);
  visibility:hidden;
  pointer-events:none;
  transition:transform .7s var(--ease), visibility 0s linear .7s;
}
.mobile-menu.open{
  transform:translateY(0);
  visibility:visible;
  pointer-events:auto;
  transition:transform .7s var(--ease), visibility 0s;
}
/* 選單打開時，右上角的 CTA 讓位給關閉鈕 */
body.locked .nav-actions .btn-cta{ opacity:0; pointer-events:none; transition:opacity .3s; }
.mobile-menu nav{ display:flex; flex-direction:column; }
/* 左邊放編號小字、右邊放大標：兩邊都有東西，重量仍然偏右 */
.mobile-menu nav a{
  font-family:var(--serif); font-size:clamp(1.5rem,6.4vw,2rem);
  padding:14px 0; border-bottom:1px solid var(--line-soft);
  display:flex; align-items:baseline; justify-content:space-between;
  gap:14px; text-align:right;
}
.mobile-menu nav em{
  font-family:var(--sans); font-style:normal; font-size:9.5px;
  letter-spacing:.2em; color:var(--muted); text-transform:uppercase;
  flex:0 0 auto; max-width:46%;
  line-height:1.9; text-align:left;
}
.mobile-menu-foot{
  display:flex; align-items:flex-end; justify-content:space-between; gap:18px;
}
.menu-foot-meta{
  display:flex; flex-direction:column; gap:5px;
  font-size:9px; letter-spacing:.18em; color:var(--muted);
  text-transform:uppercase; line-height:1.7;
}
.menu-foot-meta .menu-foot-note{ color:rgba(243,240,232,.28); letter-spacing:.12em; }
.menu-foot-links{
  display:flex; flex-direction:column; align-items:flex-end;
  gap:2px; font-size:13px; color:var(--ink-dim); text-align:right;
}
.menu-foot-links a{ padding:8px 0; white-space:nowrap; }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 var(--pad) 40px;
  overflow:hidden;
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-slide{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.35) contrast(1.06) brightness(.72);
  opacity:0;
  transform:scale(1.14);
  transition:opacity 1.8s var(--ease);
}
.hero-slide.is-active{
  opacity:1;
  animation:heroZoom 26s var(--ease) forwards;
}
@keyframes heroZoom{ to{ transform:scale(1); } }

.hero-shade{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to bottom, rgba(6,9,7,.62) 0%, rgba(6,9,7,.12) 18%, transparent 30%),
    radial-gradient(120% 90% at 50% 8%, rgba(6,9,7,.2) 0%, rgba(6,9,7,.62) 52%, rgba(6,9,7,.95) 100%),
    linear-gradient(to top, #060907 6%, rgba(6,9,7,.84) 30%, rgba(6,9,7,.46) 56%, rgba(6,9,7,.12) 86%);
}

.hero-inner{ position:relative; z-index:2; width:100%; padding-top:120px; }

.hero-top{
  display:flex; justify-content:space-between; align-items:center;
  gap:20px; padding-bottom:clamp(40px,8vh,90px);
  border-bottom:1px solid rgba(243,240,232,.1);
  margin-bottom:clamp(24px,4vh,42px);
}
.hero-top .eyebrow{ color:rgba(243,240,232,.6); }

.hero-title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.9rem, 8.6vw, 8.2rem);
  line-height:1.02;
  letter-spacing:-.025em;
  margin-bottom:clamp(20px,3vh,34px);
}
.hero-title .line{ display:block; overflow:hidden; }
.hero-title .line > span{
  display:block;
  transform:translateY(112%);
  animation:lineUp 1.25s var(--ease) forwards;
}
.hero-title .line:nth-child(1) > span{ animation-delay:.15s; }
.hero-title .line:nth-child(2) > span{ animation-delay:.3s; }
.hero-title em{ color:var(--accent); font-weight:600; letter-spacing:-.01em; }
@keyframes lineUp{ to{ transform:translateY(0); } }

.hero-sub{
  font-size:clamp(12px,1.4vw,14px);
  letter-spacing:.2em;
  color:rgba(243,240,232,.62);
  margin-bottom:clamp(28px,4vh,44px);
  opacity:0; animation:fadeUp 1s var(--ease) .8s forwards;
}

.hero-actions{
  display:flex; align-items:center; gap:clamp(20px,4vw,44px); flex-wrap:wrap;
  opacity:0; animation:fadeUp 1s var(--ease) .95s forwards;
}
@keyframes fadeUp{ from{ opacity:0; transform:translateY(16px);} to{ opacity:1; transform:none;} }

.play-btn{ display:flex; align-items:center; gap:16px; }
.play-ring{
  width:58px; height:58px; border-radius:50%;
  border:1px solid rgba(243,240,232,.32);
  display:grid; place-items:center;
  position:relative;
  transition:background .45s var(--ease), border-color .45s, color .45s;
}
.play-ring::after{
  content:''; position:absolute; inset:-6px; border-radius:50%;
  border:1px solid rgba(216,168,120,.35);
  animation:pulse 3.2s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ transform:scale(1); opacity:.5;} 50%{ transform:scale(1.12); opacity:0;} }
.play-btn:hover .play-ring{ background:var(--accent); border-color:var(--accent); color:#0a0a0b; }
.play-label{
  display:flex; flex-direction:column; text-align:left;
  font-size:12px; letter-spacing:.18em;
}
.play-label em{
  font-style:normal; font-size:10px; color:var(--muted); letter-spacing:.26em; margin-top:3px;
}

.ghost-link{
  padding:10px 0;
  font-size:12px; letter-spacing:.14em; color:rgba(243,240,232,.7);
  display:inline-flex; gap:10px; align-items:center;
  transition:color .35s;
}
.ghost-link span{ transition:transform .4s var(--ease); }
.ghost-link:hover{ color:var(--ink); }
.ghost-link:hover span{ transform:translateY(4px); }

.hero-foot{
  position:relative; z-index:2;
  display:flex; align-items:center; gap:16px;
  margin-top:clamp(40px,7vh,72px);
  font-size:10px; letter-spacing:.2em; color:var(--muted);
}
.hero-foot-line{ flex:1; height:1px; background:var(--line-soft); }

/* =========================================================
   MARQUEE
   ========================================================= */
.marquee{
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  overflow:hidden; padding:18px 0;
  background:var(--bg-soft);
}
.marquee-track{
  display:flex; align-items:center; gap:28px;
  width:max-content;
  animation:scrollX 34s linear infinite;
}
.marquee-track span{
  font-family:var(--serif); font-size:clamp(15px,2vw,21px);
  color:rgba(243,240,232,.82); white-space:nowrap; letter-spacing:.02em;
}
.marquee-track i{ color:var(--accent); font-style:normal; font-size:11px; }
@keyframes scrollX{ to{ transform:translateX(-50%); } }

/* =========================================================
   INDEX / TREE
   ========================================================= */
.index{ border-top:1px solid var(--line-soft); }
.tree{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(24px, 5vw, 80px);
}
.tree-root{
  display:flex; align-items:center; gap:12px;
  padding-bottom:14px; border-bottom:1px solid var(--line);
  font-size:13px; letter-spacing:.06em;
}
.tree-root b{ font-weight:500; }
.tree-root em{
  margin-left:auto; font-style:normal;
  font-size:10.5px; letter-spacing:.12em; color:var(--muted);
}
.tree-icon{
  width:22px; height:22px; flex:none; display:grid; place-items:center;
  font-size:8px; color:var(--accent);
  border:1px solid var(--line); border-radius:50%;
}
.tree-list{
  list-style:none; margin:0; padding:8px 0 0 14px;
  border-left:1px solid rgba(243,240,232,.2);
}
.tree-list li{ position:relative; }
.tree-list li::before{
  content:''; position:absolute; left:-14px; top:50%;
  width:14px; height:1px; background:rgba(243,240,232,.2);
}
.tree-list li:last-child::after{
  content:''; position:absolute; left:-15px; bottom:0; top:50%;
  width:3px; background:var(--bg);
}
.tree-list button{
  display:flex; align-items:baseline; gap:10px; width:100%;
  padding:11px 0; border:0; background:none; cursor:pointer;
  font-size:13.5px; color:var(--ink-dim); text-align:left;
  transition:color .3s, padding-left .3s var(--ease);
}
.tree-list button:hover{ color:var(--accent); padding-left:5px; }
.tree-list button span:last-child{
  margin-left:auto; font-size:10.5px; letter-spacing:.1em; color:var(--muted);
}

@media (max-width:768px){
  /* 影片 / 照片兩條線左右並排，不要上下堆 */
  .tree{ grid-template-columns:1fr 1fr; gap:14px; }
  .tree-root{ font-size:12px; gap:8px; padding-bottom:11px; }
  .tree-root em{ font-size:9.5px; }
  .tree-icon{ width:18px; height:18px; }
  .tree-list{ padding-left:12px; }
  .tree-list li::before{ left:-12px; width:12px; }
  .tree-list li:last-child::after{ left:-13px; }
  .tree-list button{ font-size:12px; padding:9px 0; gap:6px; }
  .tree-list button span:last-child{ font-size:9.5px; }
}

/* =========================================================
   WORKS
   ========================================================= */
.filters{ display:flex; gap:8px; flex-wrap:wrap; }
.filter{
  font-size:12px; letter-spacing:.06em; color:var(--ink-dim);
  padding:8px 16px; border:1px solid var(--line); border-radius:999px;
  transition:color .3s, background .3s, border-color .3s;
}
.filter:hover{ color:var(--ink); border-color:rgba(243,240,232,.3); }
.filter.active{ background:var(--ink); color:#0a0a0b; border-color:var(--ink); }

.works-grid{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(16px,2.4vw,36px);
}
.works-loading{
  grid-column:1 / -1;
  padding:clamp(50px,8vw,90px) 0;
  text-align:center;
  font-size:11px; letter-spacing:.22em; color:var(--muted);
}

.work{
  cursor:pointer; position:relative;
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.js .work{ opacity:0; transform:translateY(30px); }
.js .work.in{ opacity:1; transform:none; }
.work.hide{ display:none; }

.work-media{
  position:relative; overflow:hidden;
  background:linear-gradient(115deg,#0b110d 0%,#121a14 48%,#0b110d 100%);
  aspect-ratio:16/9;
  border:1px solid var(--line-soft);
}
.work.featured{ grid-column:1 / -1; }
.work.featured .work-media{ aspect-ratio:16/9; }
/* 桌機：精選大卡縮一點、置中，不要頂到螢幕兩邊 */
@media (min-width:769px){
  .work.featured{
    justify-self:center;
    width:min(88%, 1120px);
  }
}
.work-media img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.25) brightness(.86);
  transition:transform 1.4s var(--ease), filter .8s var(--ease), opacity .5s;
}
/* 直式影片：模糊背景 + 完整畫面，避免左右黑邊 */
.work-media img.bg{
  position:absolute; inset:0;
  filter:blur(38px) brightness(.5) saturate(1.5);
  transform:scale(2.3);
}
.work-media img.fg{
  position:absolute; top:0; bottom:0; left:50%;
  transform:translateX(-50%);
  height:100%; width:auto; max-width:none;
  aspect-ratio:var(--vr, .5625);
  object-fit:cover;
  filter:brightness(.98);
  box-shadow:0 0 40px rgba(0,0,0,.55);
}
.work:hover .work-media img:not(.fg){
  transform:scale(1.055);
  filter:grayscale(0) brightness(.62);
}
.work:hover .work-media img.fg{ transform:translateX(-50%) scale(1.02); filter:brightness(1); }

.work-index{
  position:absolute; top:18px; left:20px;
  font-size:11px; letter-spacing:.16em; color:rgba(243,240,232,.72);
  mix-blend-mode:difference;
}
.work-tag{
  position:absolute; top:16px; right:16px;
  font-size:10px; letter-spacing:.14em;
  padding:5px 11px; border-radius:999px;
  background:rgba(6,9,7,.5); border:1px solid rgba(243,240,232,.18);
  backdrop-filter:blur(8px);
  color:rgba(243,240,232,.85);
}

.work-play{
  position:absolute; inset:0; margin:auto;
  width:78px; height:78px; border-radius:50%;
  border:1px solid rgba(243,240,232,.55);
  display:grid; place-items:center;
  color:#fff;
  opacity:0; transform:scale(.82);
  transition:opacity .5s var(--ease), transform .5s var(--ease), background .4s;
  backdrop-filter:blur(2px);
}
.work-play svg{ width:16px; height:16px; margin-left:3px; }
.work:hover .work-play{ opacity:1; transform:scale(1); }
.work-play:hover{ background:rgba(216,168,120,.9); border-color:transparent; color:#0a0a0b; }

.work-meta{
  display:grid; grid-template-columns:1fr auto; align-items:baseline;
  gap:6px 18px; padding:16px 2px 0;
}
.work-meta h3{
  font-family:var(--serif); font-size:clamp(1.15rem,2vw,1.6rem);
  font-weight:400; line-height:1.25; letter-spacing:.01em;
  transition:color .35s;
}
.work:hover .work-meta h3{ color:var(--accent); }
.work-meta p{
  grid-column:1; font-size:12px; color:var(--muted); letter-spacing:.04em;
}
.work-year{
  grid-row:1; grid-column:2; font-size:11px; color:var(--muted); letter-spacing:.1em;
}

.works-foot{ margin-top:clamp(24px,3.2vw,40px); display:flex; justify-content:flex-end; }

/* =========================================================
   ABOUT
   ========================================================= */
.about{ border-top:1px solid var(--line-soft); }
.about-grid{
  display:grid; grid-template-columns:1.12fr 1fr;
  gap:clamp(32px,6vw,96px);
  align-items:start;
}
/* 讓格線內的子項可以縮到比內容更窄，否則橫向滾軸會把整欄撐爆 */
.about-grid > *{ min-width:0; }
.about-left{ position:sticky; top:120px; }
.about-left h2{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.9rem,4vw,3.3rem); line-height:1.22;
  letter-spacing:-.01em; margin-top:14px;
}
.about-left em{ color:var(--accent); }

.about-side{
  display:flex; gap:18px; align-items:flex-start;
  margin-top:clamp(24px,4vw,44px); max-width:340px;
}
.about-side-line{ width:1px; height:54px; background:var(--line); flex:none; }
.about-side p{ font-size:12px; color:var(--muted); line-height:2.1; letter-spacing:.02em; }

.about-right p{ color:var(--ink-dim); margin-bottom:18px; max-width:56ch; }
.about-right .lead{
  font-family:var(--serif); font-size:clamp(1.15rem,1.9vw,1.5rem);
  line-height:1.6; color:var(--ink); margin-bottom:22px;
}
.about-right strong{ color:var(--ink); font-weight:500; }

.stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:16px; margin:clamp(32px,4vw,48px) 0;
  padding:26px 0;
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
}
.stat b{
  display:block; font-family:var(--serif); font-size:clamp(1.7rem,3vw,2.4rem);
  font-weight:400; line-height:1; color:var(--ink);
}
.stat b sup{ font-size:.45em; color:var(--accent); top:-.9em; }
.stat span{ display:block; font-size:11px; letter-spacing:.12em; color:var(--muted); margin-top:10px; }

.about-figure{ margin:8px 0 0; position:relative; overflow:hidden; }
.about-figure img{
  width:100%; aspect-ratio:16/9; object-fit:cover;
  filter:grayscale(.3) brightness(.9);
  transition:transform 1.4s var(--ease), filter .8s;
}
.about-figure:hover img{ transform:scale(1.04); filter:grayscale(0) brightness(.95); }
.about-figure figcaption{
  font-size:10px; letter-spacing:.16em; color:var(--muted);
  padding-top:10px; text-transform:uppercase;
}
/* 關於區下方的三格作品縮圖，點了直接播 */
.strip-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin-top:clamp(26px,4vw,40px);
  padding-top:18px;
  border-top:1px solid var(--line-soft);
}
.strip-hint{ font-size:10px; letter-spacing:.16em; color:var(--muted); }
.about-strip{
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:6px; margin-top:12px;
}
.about-strip button{
  position:relative; display:block; overflow:hidden;
  padding:0; border:0; background:#0b110d; cursor:pointer;
  aspect-ratio:16/10;
}
.about-strip img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.2) brightness(.96);
  transition:transform .9s var(--ease), filter .5s;
}
.about-strip button:hover img{ transform:scale(1.06); filter:grayscale(0) brightness(.7); }
.strip-play{
  position:absolute; inset:0; margin:auto;
  width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(243,240,232,.6);
  display:grid; place-items:center;
  font-size:9px; color:#f3f0e8;
  opacity:0; transform:scale(.85);
  transition:opacity .35s var(--ease), transform .35s var(--ease), background .3s, color .3s;
}
.about-strip button:hover .strip-play{ opacity:1; transform:scale(1); }
.about-strip button:hover .strip-play{ background:var(--accent); color:#0a0d0a; border-color:transparent; }
/* 觸控裝置沒有 hover，播放鍵要一直看得見 */
@media (hover:none){
  .strip-play{ opacity:.85; transform:scale(.9); background:rgba(6,9,7,.45); }
  .about-strip button img{ filter:grayscale(.15) brightness(.8); }
}

/* =========================================================
   SERVICES
   ========================================================= */
.services{ border-top:1px solid var(--line-soft); }
.service-list{ border-top:1px solid var(--line); }
.service{
  display:grid;
  grid-template-columns:52px 0.95fr 1.6fr auto;
  gap:22px; align-items:baseline;
  padding:clamp(18px,2.4vw,28px) 8px;
  border-bottom:1px solid var(--line-soft);
  position:relative;
  transition:padding .5s var(--ease), background .5s;
}
.service::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--accent); transform:scaleY(0); transform-origin:top;
  transition:transform .5s var(--ease);
}
.service:hover{ background:linear-gradient(90deg, rgba(216,168,120,.06), transparent 55%); padding-left:20px; }
.service:hover::before{ transform:scaleY(1); }
.service-no{ font-size:11px; letter-spacing:.16em; color:var(--muted); }
.service h3{
  font-family:var(--serif); font-weight:400; font-size:clamp(1.35rem,2.6vw,2rem);
  letter-spacing:.01em;
}
.service p{ font-size:13px; color:var(--ink-dim); max-width:46ch; }
.service-tags{
  font-size:11px; letter-spacing:.12em; color:var(--muted);
  text-align:right; white-space:nowrap;
}

/* =========================================================
   QUOTE BAND
   ========================================================= */
.quote-band{
  padding:clamp(64px,9vw,120px) var(--pad);
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  text-align:center;
  position:relative;
  background:
    radial-gradient(60% 120% at 50% 0%, rgba(36,72,36,.35), transparent 70%);
}
.quote-band blockquote{ margin:0; }
.quote-band p{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.35rem,3.4vw,2.6rem);
  line-height:1.55; letter-spacing:.01em;
}
.quote-band em{ color:var(--accent); }
.quote-band cite{
  display:block; margin-top:24px;
  font-style:normal; font-size:10px; letter-spacing:.24em; color:var(--muted);
}

/* =========================================================
   IG BAND
   ========================================================= */
.ig-band{ border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
.ig-band a{
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; gap:24px;
  padding:clamp(26px,4vw,40px) var(--pad);
  position:relative; overflow:hidden;
  transition:background .5s var(--ease);
}
.ig-band a::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(216,168,120,.10), rgba(216,168,120,.02) 60%, transparent);
  opacity:0; transition:opacity .5s var(--ease);
}
.ig-band a:hover::before{ opacity:1; }
.ig-band-label{ font-size:10px; letter-spacing:.24em; color:var(--muted); }
.ig-band-handle{
  font-family:var(--serif); font-size:clamp(1.3rem,3vw,2.1rem);
  display:inline-flex; align-items:center; gap:12px;
  transition:color .4s;
}
.ig-band-handle i{ font-style:normal; font-size:.5em; color:var(--accent); transition:transform .4s var(--ease); }
.ig-band a:hover .ig-band-handle{ color:var(--accent); }
.ig-band a:hover .ig-band-handle i{ transform:translate(4px,-4px); }
.ig-band-note{ font-size:11px; letter-spacing:.14em; color:var(--muted); text-align:right; }

@media (max-width:768px){
  .ig-band a{ grid-template-columns:1fr auto; gap:8px 16px; }
  .ig-band-handle{ grid-row:1; grid-column:2; font-size:1.1rem; }
  .ig-band-note{ grid-column:1 / -1; text-align:left; }
}

/* =========================================================
   CLIENTS
   ========================================================= */
.clients{
  border-top:1px solid var(--line-soft);
  padding-top:clamp(56px,8vw,100px);
  padding-bottom:clamp(48px,7vw,84px);
}
.client-grid{
  display:grid;
  grid-template-columns:repeat(7, 1fr);   /* 7 個一排 → 14 個剛好兩排，上下左右都對齊 */
  justify-items:center;
  gap:clamp(10px, 1.6vw, 20px);
  max-width:calc(7 * 68px + 6 * 22px);
  margin:clamp(28px,4vw,44px) auto 0;
}
.client-grid li{
  width:68px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  padding:0; border:0;
}
.client-grid img{
  width:68px;
  height:68px;
  border-radius:50%;
  object-fit:contain;
  padding:11px;
  background:#f3f0e8;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), filter .4s var(--ease);
}
.client-grid li:hover img{
  transform:translateY(-4px) scale(1.08);
  box-shadow:0 14px 30px rgba(0,0,0,.55), 0 0 0 2px rgba(216,168,120,.65), 0 0 22px rgba(216,168,120,.25);
  filter:saturate(1.25) brightness(1.05);
}

/* =========================================================
   CAMERA BOTICS
   ========================================================= */
.botics{
  border-top:1px solid var(--line-soft);
  position:relative; overflow:hidden;
  /* 內容往中間收，不要貼著螢幕邊 */
  padding-left:clamp(24px, 7.5vw, 124px);
  padding-right:clamp(24px, 7.5vw, 124px);
}
.botics::before{
  content:''; position:absolute; right:-10%; top:50%;
  width:min(760px,80vw); aspect-ratio:1; transform:translateY(-50%);
  background:radial-gradient(circle, rgba(36,72,36,.55), transparent 65%);
  filter:blur(30px); pointer-events:none;
}
.botics-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr 1.12fr;
  gap:clamp(28px,4.5vw,64px); align-items:stretch;
  max-width:1320px; margin:0 auto;
}
.botics-copy{ display:flex; flex-direction:column; justify-content:center; }
.botics h2{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.1rem,5.2vw,4.2rem);
  line-height:1.02; letter-spacing:-.02em;
  margin:14px 0 clamp(20px,3vw,30px);
}
.botics h2 em{ color:var(--accent); }
.botics-copy > p{ color:var(--ink-dim); font-size:13.5px; line-height:1.95; max-width:48ch; margin-bottom:14px; }
.botics-en{
  font-size:12px; color:var(--muted); line-height:1.95;
  padding-left:14px; border-left:1px solid var(--line);
}
.botics-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:clamp(20px,3vw,28px); }
.botics-tags span{
  font-size:10px; letter-spacing:.14em; color:var(--ink-dim);
  padding:7px 14px; border:1px solid var(--line); border-radius:999px;
}
.botics-figure{ margin:0; }
.botics-frame{
  position:relative;
  width:100%; aspect-ratio:4/3;
  box-sizing:border-box;
  border:1px solid var(--line);
  background:#060907;
  overflow:hidden;
}
.botics-frame-label{
  position:absolute; top:14px; left:16px; z-index:2;
  font-size:9px; letter-spacing:.22em; color:rgba(243,240,232,.72);
  padding:5px 10px; background:rgba(6,9,7,.55); border:1px solid rgba(243,240,232,.12);
  border-radius:999px; backdrop-filter:blur(6px);
}
.botics-frame img{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  transform:scale(1.28);        /* 推近，機械臂在框裡更有存在感 */
  filter:brightness(1.14) contrast(1.03);  /* 原本太暗，臂身幾乎看不見 */
}
.botics-figure figcaption{
  font-size:9.5px; letter-spacing:.18em; color:var(--muted);
  text-align:right; padding-top:8px;
}

/* =========================================================
   STILLS
   ========================================================= */
.stills{ border-top:1px solid var(--line-soft); }
.stills-cats{
  display:flex; flex-direction:column;
  gap:clamp(30px, 4.5vw, 54px);
}
.still-cat-head{
  display:flex; align-items:baseline; gap:14px;
  padding-bottom:11px; border-bottom:1px solid var(--line);
  transition:border-color .5s var(--ease);
}
/* 從索引跳過來時，短暫高亮該分類 */
.still-cat.is-target .still-cat-head{ border-bottom-color:var(--accent); }
.still-cat.is-target .still-cat-head h3{ color:var(--accent); }
.still-cat-head h3{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.15rem, 2.2vw, 1.6rem); letter-spacing:.01em;
}
.still-cat-head .en{
  font-size:9.5px; letter-spacing:.22em; color:var(--muted);
}
.still-cat-head .note{
  margin-left:auto; font-size:10.5px; letter-spacing:.1em; color:var(--muted);
}
/* 一行四本相簿（資料夾）；排版跟原本四張照片一樣 */
.album-grid{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:6px; margin-top:10px;
}
.album{
  display:block; padding:0; border:0; background:none;
  text-align:left; color:inherit; cursor:pointer;
}
.album-cover{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:4/3; background:#0b110d;
}
.album-cover img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.3) brightness(.88);
  transition:transform 1.2s var(--ease), filter .6s var(--ease);
}
.album:hover .album-cover img{ transform:scale(1.05); filter:grayscale(0) brightness(1); }
.album-count{
  position:absolute; right:8px; top:8px;
  font-size:9px; letter-spacing:.12em; color:rgba(243,240,232,.92);
  padding:3px 7px; border-radius:999px;
  background:rgba(6,9,7,.55); border:1px solid rgba(243,240,232,.16);
  backdrop-filter:blur(4px);
}
.album-title{
  display:block; margin-top:8px;
  font-size:12px; letter-spacing:.04em; color:var(--ink-dim);
  transition:color .3s;
}
.album:hover .album-title{ color:var(--ink); }

/* ---------- 相簿 ---------- */
.gallery{
  position:fixed; inset:0; z-index:1400;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition:opacity .4s var(--ease), visibility .4s;
}
.gallery.open{ opacity:1; visibility:visible; }
.gallery-bg{ position:absolute; inset:0; background:rgba(4,5,4,.96); backdrop-filter:blur(6px); }
.gallery-stage{
  position:relative; z-index:2; margin:0;
  max-width:min(1200px, 92vw); max-height:86vh;
  display:flex; flex-direction:column; align-items:center;
  transform:scale(.98); transition:transform .5s var(--ease);
}
.gallery.open .gallery-stage{ transform:none; }
.gallery-stage img{
  max-width:100%; max-height:78vh; object-fit:contain;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.gallery-stage figcaption{
  display:flex; gap:16px; align-items:baseline;
  padding-top:14px; font-size:10.5px; letter-spacing:.18em;
  color:rgba(243,240,232,.6);
}
.gallery-x{
  position:absolute; top:18px; right:18px; z-index:3;
  width:44px; height:44px; display:grid; place-items:center;
  border:1px solid var(--line); color:var(--ink); background:rgba(6,9,7,.6);
}
.gallery-x:hover{ background:var(--accent); color:#0a0d0a; border-color:transparent; }
.gallery-nav{
  position:relative; z-index:3; flex:none;
  width:52px; height:52px; border-radius:50%;
  border:1px solid var(--line); color:var(--ink-dim);
  display:grid; place-items:center; font-size:14px;
  transition:background .3s, color .3s, border-color .3s;
}
.gallery-nav:hover{ background:var(--accent); color:#0a0d0a; border-color:transparent; }
.gallery-nav.prev{ margin-right:clamp(10px,3vw,36px); }
.gallery-nav.next{ margin-left:clamp(10px,3vw,36px); }

@media (max-width:768px){
  .gallery-nav{ position:absolute; bottom:24px; width:44px; height:44px; }
  .gallery-nav.prev{ left:20px; margin:0; }
  .gallery-nav.next{ right:20px; margin:0; }
  .gallery-stage img{ max-height:66vh; }
}

/* =========================================================
   CONTACT
   ========================================================= */
.contact{ text-align:center; padding-bottom:clamp(60px,9vw,120px); overflow:hidden; }
.contact .eyebrow{ margin-bottom:0; }
.contact-title{ margin:14px 0 18px; }
.contact-sub{ line-height:1.85; }
.contact::before{
  content:''; position:absolute; left:50%; top:6%;
  width:min(880px,92vw); aspect-ratio:1; transform:translateX(-50%);
  background:radial-gradient(circle, rgba(216,168,120,.13), rgba(216,168,120,.03) 45%, transparent 66%);
  filter:blur(24px); pointer-events:none; z-index:0;
}
.contact > *{ position:relative; z-index:1; }
.contact-title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.2rem,6.4vw,5.4rem);
  line-height:1.08; letter-spacing:-.02em;
  margin:18px 0 26px;
}
.contact-title em{ color:var(--accent); }
.contact-sub{ font-size:13px; color:var(--muted); line-height:2; }

.mail-link{
  display:inline-block;
  font-family:var(--serif);
  font-size:clamp(1.3rem,3.6vw,2.6rem);
  margin:clamp(18px,2.6vw,26px) 0 clamp(26px,4vw,40px);
  padding-bottom:6px;
  border-bottom:1px solid var(--line);
  transition:color .4s, border-color .4s;
  word-break:break-all;
}
.mail-link:hover{ color:var(--accent); border-color:var(--accent); }

.social-grid{
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:10px; text-align:left;
  max-width:1180px; margin:0 auto;
}
.social-card{
  border:1px solid var(--line-soft);
  padding:16px 16px 18px;
  display:flex; flex-direction:column; gap:6px;
  background:rgba(255,255,255,.012);
  transition:border-color .45s, background .45s, transform .45s var(--ease);
  text-align:left; font-family:inherit; width:100%;
}
button.social-card{ cursor:pointer; }
button.social-card.copied{ border-color:var(--accent); background:rgba(216,168,120,.08); }
.social-card:hover{
  border-color:rgba(216,168,120,.45);
  background:rgba(216,168,120,.05);
  transform:translateY(-3px);
}
.social-k{ font-size:10px; letter-spacing:.2em; color:var(--muted); text-transform:uppercase; }
.social-v{ font-size:14px; display:flex; align-items:center; gap:8px; white-space:nowrap; }
.social-v i{ font-style:normal; font-size:11px; color:var(--accent); flex:0 0 auto; }
.social-d{ font-size:11px; color:var(--muted); }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  border-top:1px solid var(--line-soft);
  padding:40px var(--pad) 28px;
}
.footer-top{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
  padding-bottom:26px; border-bottom:1px solid var(--line-soft);
}
.footer-brand{ display:flex; align-items:baseline; gap:12px; }
.footer-brand b{ font-size:13px; letter-spacing:.22em; font-weight:600; }
.footer-brand span{ font-size:11px; letter-spacing:.1em; color:var(--muted); }
.footer-meta{ display:flex; gap:26px; flex-wrap:wrap; font-size:10px; letter-spacing:.14em; color:var(--muted); }
.to-top{ padding:10px 0; font-size:11px; letter-spacing:.14em; color:var(--ink-dim); transition:color .3s; }
.to-top span{ color:var(--accent); margin-left:4px; }
.to-top:hover{ color:var(--accent); }
.footer-bottom{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-top:20px; font-size:10px; letter-spacing:.1em; color:var(--muted);
}

/* =========================================================
   MODAL
   ========================================================= */
.modal{
  position:fixed; inset:0; z-index:1200;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(12px,4vw,48px);
  opacity:0; visibility:hidden;
  transition:opacity .45s var(--ease), visibility .45s;
}
.modal.open{ opacity:1; visibility:visible; }
.modal-backdrop{
  position:absolute; inset:0;
  background:rgba(4,4,5,.9);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.modal-box{
  position:relative; z-index:1;
  width:min(1120px,100%);
  background:#0a0f0c;
  border:1px solid var(--line);
  transform:translateY(22px) scale(.985);
  transition:transform .55s var(--ease);
}
.modal.open .modal-box{ transform:none; }
.modal-player{
  position:relative; width:100%; aspect-ratio:16/9; background:#000;
}
/* 直式影片：播放器改成 9:16，不再左右大黑邊 */
.modal-box.vertical{ width:auto; max-width:min(520px,92vw); }
.modal-box.vertical .modal-player{
  width:auto; aspect-ratio:9/16;
  height:min(76vh,720px);
  margin:0 auto;
}
.modal-player iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
/* 播放器載入中的轉圈 */
.player-loading{
  position:absolute; inset:0; z-index:2;
  display:grid; place-items:center;
  background:#000;
}
.player-loading i{
  width:26px; height:26px; border-radius:50%;
  border:2px solid rgba(243,240,232,.18);
  border-top-color:var(--accent);
  animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* poster-first player */
.modal-poster{ position:absolute; inset:0; cursor:pointer; overflow:hidden; }
.modal-poster img{
  width:100%; height:100%; object-fit:cover;
  filter:brightness(.62) grayscale(.2);
  transition:transform 1.2s var(--ease), filter .6s;
}
.modal-poster:hover img{ transform:scale(1.03); filter:brightness(.48); }
.poster-play{
  position:absolute; inset:0; margin:auto;
  width:88px; height:88px; border-radius:50%;
  border:1px solid rgba(243,240,232,.6);
  display:grid; place-items:center; color:#fff;
  background:rgba(6,9,7,.18); backdrop-filter:blur(3px);
  transition:background .4s var(--ease), color .4s, border-color .4s, transform .4s var(--ease);
}
.poster-play svg{ width:18px; height:18px; margin-left:4px; }
.modal-poster:hover .poster-play{ background:var(--accent); color:#0a0a0b; border-color:transparent; transform:scale(1.06); }
.poster-note{
  position:absolute; left:0; right:0; bottom:22px; text-align:center;
  font-size:10px; letter-spacing:.22em; color:rgba(243,240,232,.62);
}
.modal-player .player-fallback{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center;
  padding:24px; color:var(--muted); font-size:12px; line-height:2; letter-spacing:.06em;
}
/* 播放器被環境阻擋時的提示條 */
.player-tip{
  position:absolute; left:0; right:0; bottom:0;
  padding:12px 16px;
  background:rgba(8,10,8,.92);
  border-top:1px solid var(--line);
  font-size:11.5px; letter-spacing:.04em; color:var(--ink-dim);
  text-align:center;
}
.player-tip a{ color:var(--accent); border-bottom:1px solid var(--accent); }
.modal-close{
  position:absolute; top:-48px; right:0;
  width:40px; height:40px; border:1px solid var(--line);
  display:grid; place-items:center; font-size:12px; color:var(--ink-dim);
  transition:background .3s, color .3s, border-color .3s;
}
.modal-close:hover{ background:var(--accent); color:#0a0a0b; border-color:var(--accent); }
.modal-info{
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
  padding:20px 24px 24px; flex-wrap:wrap;
}
.modal-info h3{ font-family:var(--serif); font-weight:400; font-size:clamp(1.2rem,2.2vw,1.7rem); }
.modal-info p{ font-size:11px; letter-spacing:.1em; color:var(--muted); margin-top:6px; }

/* =========================================================
   REVEAL
   ========================================================= */
.reveal{ transition:opacity 1s var(--ease), transform 1s var(--ease); }
.js .reveal{ opacity:0; transform:translateY(26px); }
.js .reveal.in{ opacity:1; transform:none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1200px){
  .nav-links{ display:none; }
  .nav-actions{ margin-left:auto; }
  .nav-actions .nav-social{ display:none; }
  .burger{ display:block; margin-left:16px; }
}

@media (max-width:1024px){
  .nav-links{ display:none; }
  .nav-actions .nav-social{ display:none; }
  .burger{ display:block; }
  .about-grid{ grid-template-columns:1fr; }
  .about-left{ position:static; }
  .service{ grid-template-columns:44px 1fr; gap:8px 16px; }
  .service p{ grid-column:2; }
  .service-tags{ grid-column:2; text-align:left; }
  .social-grid{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width:900px){
  /* 窄螢幕：機械臂改成半透明背景，疊在文字底下 */
  .botics{ position:relative; overflow:hidden; }
  .botics-grid{ display:block; position:relative; z-index:1; }
  .botics-copy{ display:block; position:relative; z-index:2; }

  /* 手機改成「文字 → 展示框」的順序，不再用浮水印 */
  .botics-figure{
    position:static; width:auto; height:auto;
    margin:clamp(22px,4vw,32px) 0 0; opacity:1; pointer-events:auto;
  }
  .botics-frame{ aspect-ratio:4/3; }
  .botics-frame img{ max-height:100%; }
  .botics-figure figcaption{ text-align:left; }

  .botics h2{ margin:10px 0 0; }
  .botics-copy > p{ margin-top:18px; }
  .botics-copy > p.botics-en{ margin-top:14px; }
  .botics-tags{ margin-top:20px; }
}

@media (max-width:768px){
  /* 近期片段：手機也改成橫向滾軸 */
  .about-strip{
    display:flex; flex-wrap:nowrap; gap:6px;
    overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none; -ms-overflow-style:none;
    width:calc(100% + var(--pad));
    margin-right:calc(var(--pad) * -1);
    padding-right:var(--pad);
  }
  .about-strip::-webkit-scrollbar{ display:none; }
  .about-strip button{ flex:0 0 auto; width:min(42vw, 200px); scroll-snap-align:start; }

  /* 平面攝影：手機改成橫向滾軸，一本一本往左滑 */
  .album-grid{
    display:flex; flex-wrap:nowrap;
    gap:8px;
    overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none; -ms-overflow-style:none;
    width:calc(100% + var(--pad));
    margin-right:calc(var(--pad) * -1);
    padding-right:var(--pad);
    padding-bottom:2px;
  }
  .album-grid::-webkit-scrollbar{ display:none; }
  .album-grid .album{
    flex:0 0 auto;
    width:min(68vw, 300px);
    scroll-snap-align:start;
  }
  .still-cat-head{ flex-wrap:wrap; gap:8px 12px; }
  .still-cat-head .note{ margin-left:0; width:100%; }

  /* 首屏不再吃掉整個螢幕，下面要露出下一段內容 */
  .hero{ min-height:74svh; padding-bottom:24px; }
  .hero-shade{
    background:
      linear-gradient(to bottom, rgba(6,9,7,.66) 0%, rgba(6,9,7,.14) 18%, transparent 30%),
      radial-gradient(140% 80% at 50% 0%, rgba(6,9,7,.24) 0%, rgba(6,9,7,.6) 55%, rgba(6,9,7,.93) 100%),
      linear-gradient(to top, #060907 8%, rgba(6,9,7,.86) 32%, rgba(6,9,7,.52) 58%, rgba(6,9,7,.26) 100%);
  }
  .hero-inner{ padding-top:100px; }
  .hero-top{ padding-bottom:26px; }
  .hero-top .eyebrow:last-child{ display:none; }
  .hero-title{ font-size:clamp(2.5rem,10.5vw,4rem); }
  .hero-sub{ letter-spacing:.12em; font-size:11px; }
  .hero-foot{ margin-top:34px; font-size:9px; letter-spacing:.14em; }
  .hero-foot span:nth-child(3){ display:none; }

  .works-grid{ grid-template-columns:1fr; }
  /* 手機只顯示 6 支（篩選時不受限），其餘到 Vimeo 看 */
  .works-grid:not(.filtered) .work:nth-child(n+7){ display:none; }
  .section-head{ flex-direction:column; align-items:flex-start; }
  .section-note{ text-align:left; }

  /* 分類籤：手機改成單列橫向滑動，不要出現「最後一顆孤零零掉到第二排」 */
  .filters{
    width:100%;
    flex-wrap:nowrap;
    overflow-x:auto; overflow-y:hidden;
    scrollbar-width:none; -ms-overflow-style:none;
    margin-right:calc(var(--pad) * -1);
    padding-right:var(--pad);
    -webkit-overflow-scrolling:touch;
  }
  .filters::-webkit-scrollbar{ display:none; }
  .filters .filter{ flex:0 0 auto; }

  /* 客戶牆：維持 7 欄，兩排上下對齊；手機寬度下自動縮小 */
  .client-grid{
    grid-template-columns:repeat(7, 1fr);
    gap:8px 4px; max-width:none;
  }
  .client-grid li{ width:100%; max-width:52px; }
  .client-grid img{ width:100%; height:auto; aspect-ratio:1; padding:7px; }

  /* 五張聯絡卡：最後一張（WeChat）橫跨兩欄，不要留一個洞 */
  .social-grid{ grid-template-columns:repeat(2,1fr); }
  .social-grid > :last-child{ grid-column:1 / -1; }

  /* 服務列表：手機收合成一行，點開才看說明 */
  .service.collapsible{ cursor:pointer; }
  .service.collapsible p,
  .service.collapsible .service-tags{ display:none; }
  .service.collapsible.open p{ display:block; margin-top:6px; }
  .service.collapsible.open .service-tags{ display:inline-block; margin-top:8px; }
  .service.collapsible::after{
    content:'+'; position:absolute; right:6px; top:17px;
    font-size:16px; line-height:1; color:var(--muted);
    transition:color .3s, transform .3s;
  }
  .service.collapsible.open::after{ content:'−'; color:var(--accent); }

  /* 機械臂標籤：2×2 排整齊 */
  .botics-tags{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .botics-tags span{ text-align:center; }

  .stats{ grid-template-columns:repeat(2,1fr); gap:22px 12px; }

  .footer-top{ flex-direction:column; align-items:flex-start; }
  .footer-meta{ gap:14px; }

  .modal{ padding:56px 12px 20px; align-items:center; }
  .modal-box{ border:0; }
  .modal-close{ top:-40px; right:0; background:rgba(10,10,11,.7); }
  .modal-info{ padding:14px 16px 18px; }
}

@media (max-width:480px){
  .nav-actions .btn-cta{ display:none; }
  .play-ring{ width:50px; height:50px; }
  .work-play{ width:60px; height:60px; }
  .social-v{ font-size:13px; gap:6px; }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  .hero-title .line > span{ transform:none; }
  .hero-sub,.hero-actions{ opacity:1; }
  .reveal,.work{ opacity:1; transform:none; }
  .js .reveal,.js .work{ opacity:1 !important; transform:none !important; }
}