/* ==========================================================================
   車美膜 官網 — 設計系統
   所有數值刻意對齊名片 v20（card_v20.svg），不是另外一套配色。
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --bg: #050507;
  --bg-deep: #030304;
  --panel: #0f0f13;
  --panel-2: #15151a;

  --line: #23232b;
  --line-2: #35353f;
  --line-3: #4a4a55;

  --red: #b01722;
  --red-hi: #c02230;
  --red-txt: #d6484f;
  --silver: #c9c9ce;

  --t1: #ffffff;
  --t2: #d2d2da;
  --t3: #9a9aa2;
  /* 第十七輪：#6e6e78 在 #050507 上只有 4.04:1，拿去寫版權、聯絡標籤這種
     資訊性文字會不及格（AA 要 4.5）。提到 #8b8b96 ≈ 6.1:1，其餘維持它「比 t3 暗」的層級。 */
  --t4: #8b8b96;

  --font: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Helvetica Neue", Arial, sans-serif;

  --pad: clamp(20px, 5vw, 72px);
  --maxw: 1240px;
  --sec-y: clamp(72px, 8.5vw, 128px);
  --nav-h: 74px;

  /* 內嵌 Google 地圖的深色處理。改成 none 就回到原廠淺色。 */
  --map-filter: invert(0.9) hue-rotate(180deg) saturate(0.82) brightness(1.02) contrast(0.95);
}

/* ---------- 2. Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--t2);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.85;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  /* clip 不會建立捲動容器；用 hidden 會讓 body 變成 scroller，
     服務卡的 position: sticky 就會失效。 */
  overflow-x: hidden;
  overflow-x: clip;
}

/* 全站底：近黑 + 無縫細顆粒。
   舊版是 1600×900 的碳纖維斜織（標準差 16.2），在 7,000px 長的頁面上
   cover 拉伸後是一大片重複織紋，遠看像電競滑鼠墊 → 第九輪換掉。
   grain.webp 已把底色 #0B0B0F 烘進去（標準差 3.5），所以這層用
   repeat 而不用 cover，貼圖也不會被拉伸變形。 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(125% 95% at 10% -8%, rgba(26, 26, 34, 0.55) 0%, rgba(26, 26, 34, 0) 52%),
    radial-gradient(100% 80% at 50% 104%, rgba(18, 18, 24, 0.5) 0%, rgba(18, 18, 24, 0) 60%),
    url("img/grain.webp") repeat;
  background-size: auto, auto, 256px 256px;
}

/* 暗角 + 左上主光：直接對應名片的 #vig 與 #key */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 95% at 14% -6%, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 42%),
    radial-gradient(115% 95% at 46% 38%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 58%, rgba(0, 0, 0, 0.66) 100%);
}

img,
svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }

::selection { background: var(--red); color: #fff; }

:focus-visible {
  outline: 2px solid var(--red-txt);
  outline-offset: 3px;
}

/* ---------- 3. Layout ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.sec { padding-block: var(--sec-y); position: relative; }
.sec--tight { padding-block: clamp(48px, 5vw, 72px); }

/* ---------- 4. Type ---------- */
.eyebrow {
  /* 第十七輪：11px/0.42em 在手機上等於把「高雄鳳山・在地十年」藏起來。
     放大一級、字距收到 0.3em，仍保留名片那套寬字距的語氣。 */
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3em;
  line-height: 1.4;
  /* 舊 --t4 #6e6e78 ≈4.0:1，貼邊不及格；提到 --t3 */
  color: var(--t3);
  text-transform: uppercase;
}

.eyebrow--red { color: var(--red-txt); letter-spacing: 0.34em; }

.sec-title {
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 700;
  line-height: 1.42;
  letter-spacing: 0.03em;
  color: var(--t1);
  margin-top: 14px;
}

.sec-lead {
  max-width: 46ch;
  margin-top: 14px;
  font-size: 15px;
  line-height: 2;
  color: var(--t3);
}

.sec-head { margin-bottom: clamp(34px, 4vw, 56px); }
.sec-head .rule { margin-top: clamp(22px, 3vw, 30px); }

/* 左右分欄標頭：標題靠左、說明靠右。
   原本每個區塊都是「標題 + 說明」往下疊，說明只佔左邊 40%，
   右半邊整片空白，六個區塊疊起來像同一根柱子複製六次。 */
.sec-head--split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 18px clamp(30px, 5vw, 84px);
  align-items: end;
}

.sec-head--split .sec-lead {
  max-width: none;
  margin: 0;
  padding-bottom: 6px;
}

.sec-head--split .rule { grid-column: 1 / -1; }

/* ---------- 5. 四段式規則線（名片正面的收邊線） ---------- */
.rule {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  max-width: 560px;
}

.rule i { display: block; flex: none; }
.rule__red { width: 18px; height: 3px; background: var(--red); }
.rule__thick { flex: 216; height: 3px; background: #5c5c67; }
.rule__thin { flex: 334; height: 2px; background: #3a3a44; }
.rule__cap { width: 2px; height: 11px; background: #5c5c67; }

.rule--full { max-width: none; }
.rule--muted .rule__thick { background: #4a4a55; }
.rule--muted .rule__thin { background: #34343c; }

/* ---------- 6. Buttons ---------- */
.btn {
  --btn-h: 54px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: var(--btn-h);
  padding-inline: 28px;
  border: 0;
  border-radius: 1px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease, opacity 0.18s ease;
}

.btn:active { opacity: 0.92; }

/* 主鈕：紅色金屬底 + 銀色倒角，對應名片的 #bandMetal / #metal。
   光澤是一整片斜向反光（會隨 hover 掃過），不是右側一塊固定的白貼紙。 */
.btn--red {
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.04) 42%, rgba(0, 0, 0, 0.16) 100%),
    linear-gradient(100deg, #7c1018 0%, #a81722 26%, #c11f2c 50%, #a3151f 74%, #790e16 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 -1px 0 rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(201, 201, 206, 0.14);
}

.btn--red::after {
  content: "";
  position: absolute;
  inset: -40% -12%;
  background: linear-gradient(105deg,
    rgba(255, 255, 255, 0) 38%,
    rgba(255, 255, 255, 0.17) 50%,
    rgba(255, 255, 255, 0) 62%);
  transform: translateX(-75%);
  opacity: 0.7;
  transition: transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s ease;
  pointer-events: none;
}

.btn--red:hover::after { transform: translateX(75%); opacity: 1; }

/* 副鈕：只有一條銀線 */
.btn--ghost {
  color: var(--t2);
  background: rgba(10, 10, 13, 0.4);
  box-shadow: inset 0 0 0 1px #43434e;
}

.btn--ghost:hover { color: #fff; box-shadow: inset 0 0 0 1px #5c5c67; }

.btn__num {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 500;
}

/* ---------- 7. Nav ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  /* Hero 是白天戶外亮圖：透明 nav + 灰字會看不清。
     頂部一律鋪暗漸層，捲動後再改成實底。 */
  background: linear-gradient(180deg, rgba(5, 5, 7, 0.88) 0%, rgba(5, 5, 7, 0.55) 62%, rgba(5, 5, 7, 0) 100%);
  transition: background 0.28s ease, border-color 0.28s ease, backdrop-filter 0.28s ease;
  border-bottom: 1px solid transparent;
}

.nav.is-stuck {
  background: rgba(5, 5, 7, 0.9);
  backdrop-filter: blur(14px) saturate(120%);
  border-bottom-color: rgba(35, 35, 43, 0.9);
}

/* 開始捲動之後把電話鈕轉成紅底：越往下看越想打，而這家店只有電話預約。
   只改顏色不改高度 —— 改高度會讓 hero 的 padding-top 跟著跳。 */
.nav__tel { transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; }

.nav.is-stuck .nav__tel {
  background: rgba(176, 23, 34, 0.16);
  border-color: rgba(176, 23, 34, 0.55);
  color: #fff;
}

/* 捲動進度：紅色細線，對應名片紅斜帶的「一條紅」語言 */
.nav__progress {
  position: absolute;
  inset: 0 auto auto 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--red) 0%, var(--red-hi) 72%, #e0505a 100%);
  transition: width 0.08s linear;
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.brand { display: flex; align-items: center; gap: 12px; flex: none; }

.brand__mark {
  width: 10px;
  height: 26px;
  background: linear-gradient(180deg, #a21a25, #7e1019);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transform: skewX(-14deg);
}

.brand__name {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #fff;
  line-height: 1.2;
}

.brand__sub {
  font-size: 9px;
  letter-spacing: 0.3em;
  color: var(--t3);
  line-height: 1.6;
  margin-top: 1px;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-left: auto;
}

.nav__link {
  position: relative;
  font-size: 13px;
  letter-spacing: 0.16em;
  color: #e4e4ea;
  padding-block: 6px;
  transition: color 0.24s ease, transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}

/* 底線用 scaleX 由左長出，而不是改 width ——
   width 會逐幀重排，transform 只走合成層，滑過去的口感差很多。 */
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 18px;
  height: 2px;
  background: linear-gradient(90deg, var(--red) 0%, var(--red-hi) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.nav__link:hover { color: #fff; transform: translateY(-1px); }
.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); }
.nav__link.is-active { color: #fff; }

.nav__tel {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 38px;
  padding-inline: 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #fff;
  background: rgba(5, 5, 7, 0.35);
  box-shadow: inset 0 0 0 1px rgba(90, 90, 102, 0.9);
  transition: color 0.2s ease, box-shadow 0.2s ease, background-color 0.3s ease;
}

.nav__tel:hover { color: #fff; box-shadow: inset 0 0 0 1px var(--line-3); }
.nav__tel span { color: var(--red-txt); font-size: 11px; letter-spacing: 0.2em; }

.nav__toggle {
  display: none;
  /* 第十七輪：40 → 44，手機最好按的尺寸 */
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  cursor: pointer;
  margin-left: auto;
}

.nav__bars {
  position: relative;
  display: block;
  width: 20px;
  height: 13px;
}

.nav__bars i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: #e4e4ea;
  transition: top 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.2s ease;
}

.nav__bars i:nth-child(1) { top: 0; }
.nav__bars i:nth-child(2) { top: 5.75px; }
.nav__bars i:nth-child(3) { top: 11.5px; }

.nav.is-open .nav__bars i:nth-child(1) { top: 5.75px; transform: rotate(45deg); }
.nav.is-open .nav__bars i:nth-child(2) { opacity: 0; }
.nav.is-open .nav__bars i:nth-child(3) { top: 5.75px; transform: rotate(-45deg); }

/* ---------- 8. Hero ---------- */
.hero {
  position: relative;
  min-height: clamp(600px, 92svh, 900px);
  display: flex;
  align-items: center;
  padding-top: var(--nav-h);
  overflow: hidden;
  isolation: isolate;

  /* hero 的 cover 裁切位置。CSS 的 object-position 與 shader 的 cover 公式
     共用這一個數字 —— 兩邊各寫一份遲早會錯位。 */
  --hero-pos-x: 0.58;
}

/* 圖層順序（由下往上）：
   -4 實照 img → -3 WebGL 渲染器 → -2 遮罩打光 → 2 文字
   canvas 若不顯示，img 就是最終畫面，所以圖層掉任何一層都不會空白。 */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -4;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 車頭在畫面左半、車身延伸到右緣，取中間偏右才不會把車頭切掉 */
  object-position: calc(var(--hero-pos-x) * 100%) center;
}

/* 打光與遮罩。這張 hero 是白天戶外照（左 30% 均值 127、天空區 165），
   對比遠比舊的廠內照亮，所以左側要壓到 0.9，而且要到 62% 才放開。
   數值是用 PIL 對實際裁切做遮罩模擬定出來的（見 doc/project.md 第九輪）。 */
.hero__light {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    /* 底部：讓 hero 下緣融進頁面，不要一條硬線 */
    linear-gradient(0deg, #050507 0%, rgba(5, 5, 7, 0.72) 3%, rgba(5, 5, 7, 0.2) 12%, rgba(5, 5, 7, 0) 24%),
    /* 左側：壓住文字區，右半完全讓車身透出來 */
    linear-gradient(90deg, rgba(5, 5, 7, 0.92) 0%, rgba(5, 5, 7, 0.9) 20%, rgba(5, 5, 7, 0.62) 38%, rgba(5, 5, 7, 0.16) 54%, rgba(5, 5, 7, 0) 62%),
    /* 上緣：天空比車亮，壓一點才不會讓整塊左上角發白 */
    linear-gradient(180deg, rgba(5, 5, 7, 0.42) 0%, rgba(5, 5, 7, 0.06) 26%, rgba(5, 5, 7, 0) 44%);
}

/* WebGL 影像渲染器：直接把照片當貼圖畫（鏡頭推近／色散／顆粒／掃光）。
   疊在 img 之上、遮罩之下。opacity 0 是「還沒確定 WebGL 能用」的狀態 ——
   一旦 has-shader 加上就變 1，此時 canvas 已經畫了第一幀，不會有閃爍。 */
.hero__shader {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.9s ease;
}

html.has-shader .hero__shader { opacity: 1; }

.hero__inner { position: relative; padding-block: clamp(56px, 9vh, 96px); width: 100%; z-index: 2; }

.hero__copy { max-width: min(600px, 100%); }

.hero__name {
  font-size: clamp(58px, 9.4vw, 116px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: 0.1em;
  color: #fff;
  margin-top: 26px;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.55);
}

/* 銀箔漸層字：對應名片的 #foil。
   網站上字級大很多，原封不動照抄會在中段出現一道暗帶（看起來像渲染壞掉），
   所以把中段的暗點拉平，只留下左右兩端的金屬起伏。 */
.hero__sub {
  margin-top: 16px;
  font-size: clamp(19px, 2.5vw, 29px);
  font-weight: 600;
  letter-spacing: 0.32em;
  background: linear-gradient(102deg, #f7f7fa 0%, #dcdce2 26%, #c6c6cf 48%, #dedee4 70%, #ececf1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__hair {
  display: block;
  width: 88px;
  height: 2px;
  background: var(--red);
  margin-top: 30px;
}

.hero__desc {
  margin-top: 30px;
  max-width: 34ch;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 2.05;
  color: var(--t2);
  text-shadow: 0 1px 20px rgba(0, 0, 0, 0.6);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 42px;
}

/* 底部資訊條：直接對應名片正面「聯絡人面板」的做法
   —— 實色底 + 左側紅色立柱 + 一圈細銀邊，讓 hero 的下緣有重量。 */
.hero__meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 48px;
  padding: 15px 22px 15px 19px;
  font-size: 12.5px;
  letter-spacing: 0.1em;
  color: var(--t2);
  background: rgba(8, 8, 11, 0.5);
  border-left: 3px solid var(--red);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(3px);
}

.hero__meta .sep { width: 1px; height: 12px; background: var(--line-2); }

.status { display: inline-flex; align-items: center; gap: 8px; color: var(--red-txt); }
.status i { width: 5px; height: 5px; background: var(--red-txt); display: block; }
.status--off { color: var(--t4); }
.status--off i { background: var(--t4); }

.hero__rule {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  bottom: 32px;
  z-index: 1;
  /* .rule 的 width:100% 和 left/right 同時存在時，絕對定位會忽略 right，
     結果線條從左內縮處一路超出右邊界 72px。這裡交還給 right 決定寬度。 */
  width: auto;
  max-width: none;
  opacity: 0.8;
}

/* 右側索引已移除：它和服務區的三張卡講的是同一件事 */

/* ---------- 9. Services ---------- */
/* 三張卡走 X 方向：桌機 3 欄並排、手機原生橫向 snap 軌道。
   第十五輪的「疊牌 + sticky 舞台」整組移除 —— 使用者要的是不要垂直堆疊浪費高度，
   而 sticky 時間軸與原生捲動兩套進度來源在同一頁會互相打架（前兩版的血淚史）。 */
.services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  align-items: stretch;
}

/* 手機／小平板：三欄會變成三條細縫 → 改成橫向滑動軌道。
   卡寬 min(84vw, 360px)，右邊露出一截下一張，本身就是「可以滑」的提示。 */
@media (max-width: 860px) {
  .services {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(84vw, 360px);
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 2px;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* 卡片有 70px 投影，overflow 會連陰影一起裁掉 → 下方留空間再拉回來 */
    padding: 2px 0 30px;
    margin-bottom: -28px;
  }

  .services::-webkit-scrollbar { display: none; }
  .services > .svc { scroll-snap-align: start; }
}

.svc {
  position: relative;
  padding: clamp(26px, 2.6vw, 38px);
  background: rgba(10, 10, 13, 0.94);
  border: 1px solid var(--line);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  transition: background-color 0.3s ease;
  /* 三張卡的內容長度不同，用 flex 把「施工時間 / 適合」壓到同一條底線 */
  display: flex;
  flex-direction: column;
}

.svc::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--red);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 滑鼠位置驅動的光斑：--mx / --my 由 JS 寫入。
   比一整片斜光更「貴」，因為光是跟著游標走的，而且只照亮指標附近。 */
.svc::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    240px circle at var(--mx, 50%) var(--my, 0%),
    rgba(255, 255, 255, 0.075),
    rgba(255, 255, 255, 0.02) 42%,
    rgba(255, 255, 255, 0) 68%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.svc:hover { background: rgba(18, 18, 23, 0.94); }
.svc:hover::before { transform: scaleY(1); }
.svc:hover::after { opacity: 1; }

/* 現在正在讀的那張（第一張）常駐紅柱，當成 X 方向的起點指示 */
.svc:first-child::before { transform: scaleY(1); }

.svc__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.svc__icon {
  display: inline-flex;
  color: var(--red-txt);
  margin-left: auto;
  margin-right: 8px;
}

.svc__num {
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: #72727e;
  line-height: 1;
}

.svc__en {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.28em;
  color: #7e7e88;
  text-transform: uppercase;
}

.svc__name {
  margin-top: 22px;
  font-size: clamp(19px, 1.8vw, 22px);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--t1);
  line-height: 1.5;
}

.svc__hair {
  height: 2px;
  width: 40px;
  background: #4a4a55;
  margin-top: 18px;
}

.svc__list { margin-top: 20px; }

.svc__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  line-height: 2.25;
  letter-spacing: 0.05em;
  color: var(--t3);
}

.svc__list li iconify-icon {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--red-txt);
}

.prices__title,
.pcard__name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.prices__title iconify-icon,
.pcard__name iconify-icon {
  color: var(--red-txt);
  flex: none;
}

/* ---------- 10. Gallery ---------- */
/* 17 張照片 + 1 格主圖（2×2）＝ 20 格，桌機 4 欄剛好 5 列、手機 2 欄剛好 10 列。
   改照片張數要同時改格子數，否則最後一列會缺角。
   照片上不放任何標籤與圖說 —— 我看不出照片內容，寫上去就是編的。 */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(140px, 13.5vw, 190px);
  gap: 10px;
}

.shot {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  cursor: zoom-in;
  overflow: hidden;
  background:
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.028) 0 1px, rgba(255, 255, 255, 0) 1px 9px),
    linear-gradient(155deg, #16161c 0%, #0c0c10 58%, #08080b 100%);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}

.shot--lead { grid-column: span 2; grid-row: span 2; }
.shot:hover { box-shadow: inset 0 0 0 1px var(--line-3); }
.shot:focus-visible { outline: 2px solid var(--red-txt); outline-offset: 2px; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  letter-spacing: 0.12em;
  color: var(--t2);
  /* 第十七輪：原本只有 31px 高，手指不好按 */
  padding: 5px 0 6px;
  border-bottom: 1px solid var(--line-2);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.link-arrow span { color: var(--red-txt); }
.link-arrow:hover { color: #fff; border-color: var(--line-3); }

/* ---------- 11. Info / hours / map ---------- */
.info {
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  gap: clamp(36px, 5vw, 76px);
  align-items: start;
}

/* 左欄比右欄長很多（關於＋事實＋時間＋電話）。
   讓地圖黏在上緣跟著捲，右邊就不會留一大片空白。 */
.map-card { position: sticky; top: calc(var(--nav-h) + 18px); }

.hours { margin-top: clamp(26px, 3vw, 34px); border-top: 1px solid var(--line); }

.hours__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-block: 15px;
  border-bottom: 1px solid var(--line);
}

.hours__day { font-size: 15px; letter-spacing: 0.06em; color: var(--t3); }
.hours__time { font-size: 15px; font-weight: 600; letter-spacing: 0.06em; color: var(--t1); }
.hours__time--soft { color: var(--t3); font-weight: 400; }

.contact-list { margin-top: clamp(26px, 3vw, 34px); display: grid; gap: 18px; }

.contact-list dt {
  /* 第十七輪：10px 的標籤等於看不到（長輩會直接跳過「統一編號」這種欄位） */
  font-size: 11.5px;
  letter-spacing: 0.16em;
  color: var(--t4);
  text-transform: uppercase;
}

.contact-list dd { margin: 5px 0 0; font-size: 15px; letter-spacing: 0.06em; color: var(--t2); }
.contact-list a:hover { color: #fff; }

.tel-big {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(21px, 2.2vw, 26px) !important;
  font-weight: 700;
  letter-spacing: 0.05em !important;
  color: var(--t1) !important;
}

.tel-big iconify-icon { color: var(--red-txt); }

.tel-sep { color: var(--t4); margin-inline: 4px; }

.map-card { position: relative; }

/* 分頁：兩個選項，紅色底線指示當前項 */
.map-tabs {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 10px;
}

.map-tab {
  position: relative;
  /* 第十七輪：36px 高、12px 字都在及格線下；拉成 44px 的可按高度 */
  padding: 12px 18px 13px;
  min-height: 44px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--t4);
  cursor: pointer;
  transition: color 0.22s ease;
}

.map-tab::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.map-tab:hover { color: var(--t2); }
.map-tab.is-on { color: #fff; }
.map-tab.is-on::after { transform: scaleX(1); }

.map-card__frame {
  position: relative;
  padding: 8px;
  background: rgba(6, 6, 8, 0.72);
  box-shadow: inset 0 0 0 1px var(--line-2);
}

/* 兩個檢視疊在同一個框裡，尺寸一致，切換時不會跳動 */
.map-view {
  position: relative;
  aspect-ratio: 600 / 344;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0.45s;
}

.map-view.is-on { opacity: 1; visibility: visible; }

.map-view[data-map-view="schematic"] {
  position: absolute;
  inset: 8px;
  aspect-ratio: auto;
}

/* Google 地圖：反相 + 轉色相是讓內嵌地圖變深色的標準做法。
   這一行刻意抽成變數 —— 如果你覺得地圖上的按鈕也被反相、看起來怪，
   把 --map-filter 改成 `none` 就是原廠的淺色地圖，其他都不用動。 */
.map-view iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: var(--map-filter);
  background: #0b0b0f;
}

/* 遮罩：預設擋住 iframe 的滾輪事件，否則滑過去就會卡住整個頁面的捲動。
   點一下才把控制權交給地圖 —— 這是內嵌地圖該有的禮貌。 */
.map-veil {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 0;
  background: rgba(5, 5, 7, 0.34);
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.4s ease, visibility 0.4s;
}

.map-veil.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.map-veil__ring {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  position: relative;
}

.map-veil__ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34);
  animation: veil-pulse 2.6s ease-out infinite;
}

@keyframes veil-pulse {
  0%   { transform: scale(1);    opacity: 0.85; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

.map-veil__text {
  font-size: 11.5px;
  letter-spacing: 0.24em;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.8);
}

.map { width: 100%; height: auto; display: block; }

/* 地圖原始座標系是 300×172，這裡放大 2 倍 → 字級與線寬都要折半 */
.map text {
  font-family: var(--font);
  font-size: 8px;
  letter-spacing: 0.8px;
  font-weight: 400;
}

.map [stroke-width] { stroke-width: 1.1px; }
.map .m-arrow { stroke-width: 1.7px; }

.map-card__cap {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--t4);
}

/* ---------- 12. CTA band ---------- */
.cta {
  position: relative;
  padding-block: clamp(56px, 7vw, 92px);
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0.1) 18%, rgba(255, 255, 255, 0.02) 34%, rgba(255, 255, 255, 0.07) 52%, rgba(255, 255, 255, 0.008) 78%, rgba(0, 0, 0, 0.2) 100%),
    linear-gradient(160deg, #7e1019 0%, #a21a25 20%, #c02230 42%, #af1622 64%, #8e121b 84%, #6a0c13 100%);
}

.cta::before {
  content: "";
  position: absolute;
  inset: -20% -10%;
  z-index: -1;
  background: linear-gradient(102deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.16) 46%, rgba(255, 255, 255, 0.05) 52%, rgba(255, 255, 255, 0) 68%);
  transform: rotate(-7deg);
}

/* 由 GSAP 控制橫移的那道光。獨立成元素而不是用 ::before，
   因為 GSAP 要直接對它做 xPercent 補間，假元素抓不到。 */
.cta__sheen {
  position: absolute;
  inset: -30% -40%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(104deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.2) 48%, rgba(255, 255, 255, 0.06) 54%, rgba(255, 255, 255, 0) 66%);
  transform: rotate(-8deg);
}

.cta__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 56px);
  flex-wrap: wrap;
}

.cta__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4em;
  color: rgba(255, 255, 255, 0.62);
}

.cta__title {
  margin-top: 12px;
  font-size: clamp(25px, 3.1vw, 38px);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #fff;
  line-height: 1.45;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.28);
}

.cta__tel {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 30px;
  background: rgba(6, 4, 5, 0.42);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.26);
  transition: background-color 0.24s ease, box-shadow 0.24s ease;
}

.cta__tel span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: 0.34em;
  color: rgba(255, 255, 255, 0.66);
}
.cta__tel strong {
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #fff;
  line-height: 1.2;
}
.cta__tel:hover { background: rgba(6, 4, 5, 0.62); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.44); }

/* ---------- 13. Footer ---------- */
.foot { padding-block: clamp(48px, 5vw, 68px) 34px; }

.foot__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(28px, 4vw, 60px);
  margin-top: clamp(34px, 4vw, 46px);
}

.foot__brand { font-size: 18px; font-weight: 700; letter-spacing: 0.14em; color: #fff; }
.foot__desc { margin-top: 12px; font-size: 14px; line-height: 2; color: var(--t4); max-width: 30ch; }

.foot__h {
  font-size: 11.5px;
  letter-spacing: 0.18em;
  color: var(--t4);
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* 第十七輪：頁尾連結原本只有 20px 高（WCAG 2.2 AA 要 24×24），
   加縱向內距撐到 30px；視覺上只多一點空隙，手指好按很多。 */
.foot__list { display: grid; gap: 4px; font-size: 14px; letter-spacing: 0.05em; color: var(--t3); }
.foot__list a { display: inline-block; padding-block: 5px; }
.foot__list a:hover { color: #fff; }

/* 合作廠商列：夾在資訊欄與版權列之間，自己一條。
   三欄（品牌鎖定組合 / 說明 / 站點連結），細框 + 極淡漸層，
   比版權字高一階但仍是頁尾最底層的資訊 —— 不去搶電話 CTA。 */
.foot__partner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(18px, 2.6vw, 36px);
  margin-top: clamp(30px, 3.6vw, 46px);
  padding: clamp(16px, 1.7vw, 22px) clamp(18px, 2vw, 26px);
  border: 1px solid var(--line);
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0.032) 0%,
    rgba(255, 255, 255, 0.012) 46%,
    rgba(255, 255, 255, 0) 100%
  );
  transition: border-color 0.3s ease;
}

.foot__partner:hover { border-color: var(--line-2); }

/* 品牌鎖定組合：使用者提供的橫式 logo（雙柱 mark ＋ Halphas 字標）。
   直接用原廠 lockup 當圖，不再用 HTML 拼字 —— 字距與字重是品牌的一部分，
   拼得再像也不是它。（1024×341 原圖留白很多，已裁到內容邊界做成 2x 資產。） */
.foot__hp {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.foot__hp-logo {
  display: block;
  width: 118px;
  height: auto;
  opacity: 0.9;
  transition: opacity 0.26s ease;
}

.foot__hp:hover .foot__hp-logo { opacity: 1; }

.foot__partner-txt {
  font-size: 13px;
  line-height: 2;
  letter-spacing: 0.045em;
  color: var(--t2);
}

.foot__partner-h {
  display: block;
  margin-bottom: 5px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.28em;
  color: var(--red-txt);
}

.foot__partner-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--t3);
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.24s ease, border-color 0.24s ease;
}

.foot__partner-link span { transition: transform 0.24s ease; }

.foot__partner-link:hover { color: #fff; border-bottom-color: var(--line-3); }
.foot__partner-link:hover span { transform: translateX(3px); }

.foot__bottom {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: clamp(34px, 4vw, 52px);
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--t4);
}

/* 頁尾署名已改成獨立的 .foot__partner 一列（第十六輪），
   原本 11px 的 powered by 連結與其 SVG 樣式一併移除。 */

/* ---------- 14. 新增內容區塊（流程 / 為什麼 / FAQ / 跑馬燈） ---------- */

/* --- hero 的小字條 --- */
/* --- 服務卡補強 --- */
.svc__lead {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.95;
  letter-spacing: 0.03em;
  color: var(--t3);
}

.svc__meta {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 9px;
}

.svc__meta div { display: flex; gap: 12px; align-items: baseline; }

.svc__meta dt {
  flex: none;
  width: 5.2em;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: #5f5f6a;
}

.svc__meta dd {
  margin: 0;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--t2);
}

/* --- 跑馬燈 --- */
/* --- 價目表上方的計價說明：一段文字就好，不再開一整個區塊 --- */
.plans__legend {
  margin-top: clamp(18px, 2.2vw, 26px);
  margin-bottom: clamp(26px, 3vw, 38px);
  padding: 16px 20px;
  font-size: 14px;
  line-height: 2;
  color: var(--t3);
  background: rgba(10, 10, 13, 0.72);
  border-left: 2px solid var(--red);
}

.plans__legend b { color: var(--t2); font-weight: 600; }

.plans__legend a {
  color: var(--t2);
  border-bottom: 1px solid rgba(176, 23, 34, 0.55);
}

/* --- 作品照片 --- */
/* 照片自己說話，上面不壓任何標籤或圖說。
   transform 交給 GSAP 做捲動視差，這裡只留亮度變化當 hover 回饋。 */
.shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.45s ease;
}

.shot:hover img { filter: brightness(1.08); }

/* --- 關於（併進營業資訊區） --- */
.about-note {
  font-size: 15px;
  line-height: 2.05;
  color: var(--t3);
  max-width: 44ch;
  margin-bottom: clamp(22px, 2.6vw, 32px);
}

.facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-bottom: clamp(26px, 3vw, 36px);
}

.facts div {
  padding: 16px 14px;
  background: rgba(9, 9, 12, 0.9);
  display: grid;
  gap: 5px;
}

.facts b {
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 700;
  line-height: 1;
  color: #fff;
}

.facts span {
  font-size: 10.5px;
  line-height: 1.7;
  letter-spacing: 0.1em;
  color: var(--t3);
}

/* --- FAQ --- */
.faq { border-top: 1px solid var(--line); }

.faq__grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(32px, 4.5vw, 76px);
  align-items: start;
}

.faq__list { border-top: 1px solid var(--line); }

.faq__item { border-bottom: 1px solid var(--line); }

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: clamp(18px, 2vw, 24px);
  cursor: pointer;
  list-style: none;
}

.faq__item summary::-webkit-details-marker { display: none; }

.faq__q {
  font-size: clamp(14.5px, 1.3vw, 16px);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--t1);
  transition: color 0.2s ease;
}

.faq__item summary:hover .faq__q { color: #fff; }

/* 加號 → 減號：兩條線，垂直那條在開啟時縮掉 */
.faq__ic {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
}

.faq__ic::before,
.faq__ic::after {
  content: "";
  position: absolute;
  background: var(--red-txt);
  transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.2s ease;
}

.faq__ic::before { left: 0; right: 0; top: 6.5px; height: 1px; }
.faq__ic::after { top: 0; bottom: 0; left: 6.5px; width: 1px; }

.faq__item[open] .faq__ic::after { transform: scaleY(0); opacity: 0; }

.faq__a {
  padding-right: clamp(0px, 3vw, 40px);
  padding-bottom: clamp(18px, 2vw, 26px);
}

.faq__a p {
  /* 第十七輪：FAQ 是「打消疑慮」的內容，不能在深色底上用 13.5px */
  font-size: 15px;
  line-height: 2.05;
  color: var(--t3);
  max-width: 54ch;
}

/* <details> 的開合過渡。瀏覽器有支援就滑順展開，沒支援就瞬間展開 ——
   用 CSS 做而不是用 JS 量高度，是為了不在 JS 裡維護一堆隱藏狀態。 */
@supports (interpolate-size: allow-keywords) {
  .faq__item { interpolate-size: allow-keywords; }

  .faq__item::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 0.36s cubic-bezier(0.22, 0.61, 0.36, 1),
                content-visibility 0.36s allow-discrete;
  }

  .faq__item[open]::details-content { block-size: auto; }
}

.cta__note {
  margin-top: 14px;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.68);
}

/* --- 價目表 ---
   資料來源：店內現場價目表照片（逐格核對）。兩張表共用同一組樣式。
   首欄用 sticky 黏住左邊，手機橫向捲動時還知道自己在看哪一項。 */
.prices { margin-top: clamp(34px, 4vw, 52px); }

.prices + .prices { margin-top: clamp(26px, 3vw, 38px); }

.prices__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--line-2);
}

.prices__title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 700;
  letter-spacing: 0.24em;
  color: #f2f2f5;
}

.prices__unit { font-size: 13px; letter-spacing: 0.06em; color: #8a8a95; white-space: nowrap; }

.ptable-wrap {
  border: 1px solid var(--line);
  border-top: 0;
  background: rgba(9, 9, 12, 0.72);
  overflow-x: auto;
  /* 只准左右捲。設定 overflow-x 之後，沒有明講的那一軸會被算成 auto，
     於是表格任何 1~3px 的溢出（收合邊框、上標「起」、列動畫的位移）都會
     在框內長出一條垂直滾動條 —— 這就是切換車型時閃一下的原因。 */
  overflow-y: hidden;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

/* 字級與色彩層級是這一版重做的重點。
   舊版整張表都靠「小字＋暗灰」做層級，在深色底上等於把資訊藏起來
   （表頭 10px #4e4e58，對比只有 2.7:1）。現在的順序是：
   價格最亮最大 → 項目名次之 → 表頭再暗也要 13px → 補充字最小但不低於 12px。
   第十七輪再把整體往上提一級：這是全站最需要「秒讀」的區塊。 */
.ptable {
  width: 100%;
  min-width: 700px;
  border-collapse: collapse;
  font-size: 15px;
  /* 固定表格配置：首欄吃 26%，五個價格欄平分剩下的 74%。
     不分欄的話每欄都會被撐到一樣寬，價格散在五個角落、比一排價格要橫著追。 */
  table-layout: fixed;
}

.ptable thead th:first-child { width: 22%; }

.ptable thead th {
  position: relative;
  padding: 14px clamp(10px, 1.4vw, 18px);
  text-align: right;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: #a3a3ad;
  background: #121217;
  border-bottom: 1px solid var(--line-2);
}

/* 表頭第二行的補充字（轎旅車 / 皮卡） */
.ptable thead th span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: #8a8a95;
}

.ptable thead th:first-child { text-align: left; }

.ptable tbody th,
.ptable tbody td {
  padding: 15px clamp(10px, 1.4vw, 18px);
  text-align: right;
  /* 不換行，否則「1,000」後面的「起」會被擠到下一行，看起來像掉字 */
  white-space: nowrap;
  border-bottom: 1px solid rgba(42, 42, 52, 0.85);
}

/* 斑馬紋：橫著比一列價格時，眼睛不會跳到隔壁列 */
.ptable tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.02); }

/* 首欄：項目名稱。sticky + 不透明底，否則橫向捲動時價格會透出來。
   右側改用漸層陰影而不是一條線 —— 手機滑到一半時，
   「這一欄是固定的」比「這裡有分隔線」更看得出來。 */
.ptable tbody th {
  position: sticky;
  left: 0;
  z-index: 2;
  text-align: left;
  font-weight: 400;
  white-space: nowrap;
  background: #0c0c10;
  box-shadow: 14px 0 18px -14px rgba(0, 0, 0, 0.95);
}

.ptable tbody tr:nth-child(even) th { background: #101014; }

.ptable thead th.ptable__svc {
  position: sticky;
  left: 0;
  z-index: 3;
  background: #121217;
  box-shadow: 14px 0 18px -14px rgba(0, 0, 0, 0.95);
}

.ptable tbody th b {
  font-weight: 600;
  font-size: 15.5px;
  letter-spacing: 0.03em;
  color: #f2f2f5;
}

.ptable tbody th span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #8a8a95;
}

.ptable tbody td { color: var(--t2); }

.ptable tbody tr:last-child th,
.ptable tbody tr:last-child td { border-bottom: 0; }

/* 價格數字：等寬數字 + 近白，掃一排就能比 */
.ptable .price {
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #f4f4f7;
  font-variant-numeric: tabular-nums;
}

.ptable .price + em,
.pcard__rows em {
  font-style: normal;
  margin-left: 3px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--red-txt);
}

/* 整列 hover：滑過去看整排價格，比逐格找快 */
.ptable tbody tr:hover th { background: #16161c; }
.ptable tbody tr:hover td { background: rgba(255, 255, 255, 0.035); }
.ptable tbody tr:hover .price { color: #fff; }

/* --- 不依車型計價的項目：卡片 ---
   銀幕上「五個車型欄卻有六列均一價」是浪費：資料全部塞在最右邊一格，
   左邊四欄永遠空白。拆成卡片之後，每一項都用到自己的寬度。 */
.pcards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: clamp(22px, 2.6vw, 32px);
}

.pcards--two { grid-template-columns: 1.6fr 1fr; }
.pcards--two .pcard--wide { grid-column: span 1; }

.pcard {
  padding: 20px 22px 22px;
  background: rgba(11, 11, 15, 0.9);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
  /* 三張卡內容長度不同（列表 / 單一大數字），用 flex 讓底部對齊 */
  display: flex;
  flex-direction: column;
}

.pcard:hover {
  background: rgba(17, 17, 22, 0.95);
  box-shadow: inset 0 0 0 1px var(--line-2);
}

.pcard__name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #f0f0f3;
}

.pcard__note {
  margin-top: 6px;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: #8a8a95;
}

.pcard__rows {
  list-style: none;
  margin-top: 16px;
  display: grid;
  gap: 0;
}

.pcard__rows li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding-block: 9px;
  border-top: 1px solid rgba(42, 42, 52, 0.7);
}

.pcard__rows li:first-child { border-top: 0; padding-top: 0; }

.pcard__rows span {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: #b4b4be;
}

.pcard__rows b {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

/* 加購項目：五項均一價，橫向排成兩欄。
   最後一項（奇數）跨滿整列，否則右邊會留一個洞，看起來像漏了一項。 */
.pcard__rows--grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(18px, 2.4vw, 32px);
}

.pcard__rows--grid li:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.pcard__big {
  margin-top: auto;
  padding-top: 18px;
  font-size: clamp(30px, 3.4vw, 40px);
  font-weight: 700;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.pcard__big::before {
  content: "NT$";
  margin-right: 6px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: #8a8a95;
  vertical-align: 1.4em;
}

.prices__hint { display: none; }

/* 價目大分類：三鈕切換面板（手機／桌機同一套） */
.pcats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 clamp(22px, 3vw, 32px);
}

.pcat {
  appearance: none;
  border: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 72px;
  padding: 14px 10px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--t3);
  background: rgba(15, 15, 19, 0.92);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.pcat iconify-icon {
  color: var(--red-txt);
  transition: transform 0.25s ease;
}

.pcat:hover {
  color: #fff;
  box-shadow: inset 0 0 0 1px var(--line-3);
}

.pcat.is-on {
  color: #fff;
  background: rgba(176, 23, 34, 0.2);
  box-shadow: inset 0 0 0 1px rgba(176, 23, 34, 0.75);
}

.pcat.is-on iconify-icon { transform: scale(1.08); }

.ppanel[hidden] { display: none !important; }

.ppanel.is-on {
  animation: panelIn 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes panelIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ppanel.is-on { animation: none; }
}

/* 手機車型切換：桌機隱藏，小螢幕一次只看一欄；機車分類時整組隱藏 */
.ptype {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 clamp(18px, 2.5vw, 26px);
}

.ptype.is-hidden,
[data-cat-hint].is-hidden { display: none !important; }

.ptype__btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  /* 第十七輪：41 → 44（車型是價目表的主要操作，不能按不準） */
  min-height: 44px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--t3);
  background: rgba(15, 15, 19, 0.9);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

/* 圖示跟著文字一起，但選中時才亮成紅色 —— 五顆同時紅會太吵 */
.ptype__btn iconify-icon {
  color: #7a7a86;
  transition: color 0.22s ease, transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ptype__btn.is-on iconify-icon {
  color: var(--red-txt);
  transform: translateY(-1px);
}

.ptype__btn.is-on {
  color: #fff;
  background: rgba(176, 23, 34, 0.22);
  box-shadow: inset 0 0 0 1px rgba(176, 23, 34, 0.7);
}

.plans__note {
  margin-top: clamp(18px, 2vw, 24px);
  font-size: 13.5px;
  line-height: 1.95;
  color: #8a8a95;
}

.plans__note b { color: var(--t3); font-weight: 600; }

/* ---------- Lightbox ---------- */
.lb {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}

.lb[hidden] { display: none !important; }

.lb__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  cursor: zoom-out;
}

.lb__stage {
  position: relative;
  z-index: 1;
  width: min(960px, 100%);
  max-height: min(88vh, 900px);
  display: grid;
  place-items: center;
}

.lb__img {
  max-width: 100%;
  max-height: min(78vh, 820px);
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.lb__close,
.lb__nav {
  appearance: none;
  border: 0;
  cursor: pointer;
  color: #fff;
  background: rgba(12, 12, 16, 0.72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.lb__close {
  position: absolute;
  top: -4px;
  right: 0;
  width: 44px;
  height: 44px;
  font-size: 28px;
  line-height: 1;
  z-index: 2;
}

.lb__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 56px;
  font-size: 32px;
  line-height: 1;
  z-index: 2;
}

.lb__nav--prev { left: 0; }
.lb__nav--next { right: 0; }

.lb__count {
  margin-top: 12px;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--t3);
  text-align: center;
}

body.lb-open { overflow: hidden; }
body.menu-open { overflow: hidden; }


/* ---------- 15. 動效層 ---------- */
/* 內容先隱藏的前提是「JS 有跑」。html.js 由 <head> 的 inline script 加上，
   而該 script 同時掛了 3 秒保險：時間到還沒動畫就強制顯示。
   這條規則寫錯 = 網站變空白頁，不要隨便改。 */
html.js:not(.no-anim) [data-anim] { opacity: 0; }
html.js.no-anim [data-anim] { opacity: 1 !important; transform: none !important; }

/* 逐字上浮：Taiwan 字型沒有 ascender 問題，但中文方塊字要留一點呼吸空間，
   所以 mask 的高度用 1.28em，而不是 clip 得剛剛好。 */
.char-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  line-height: 1.28;
  height: 1.28em;
}

.char { display: inline-block; will-change: transform; }

/* Lenis：它會接管捲動，原生的 smooth 必須關掉，否則兩者互相拉扯 */
html.lenis,
html.lenis body { height: auto; }
/* class 名稱不能含有 "lenis"：Lenis 會用 /lenis(-\w+)?/g 清洗自己的 class，
   has-lenis 會被削成 has-。用 html.lenis 這條（Lenis 自己維護）當第一道保險。 */
html.lenis { scroll-behavior: auto !important; }
html.has-smooth { scroll-behavior: auto !important; }
html.has-smooth.lenis-smooth { scroll-behavior: auto !important; }

/* ---------- 15. Responsive ---------- */
/* 常駐通話鍵只在手機出現，桌機由 nav 的 TEL 負責 */
.callbar { display: none; }

@media (min-width: 1001px) {
  /* 說明欄不要貼到最右邊，留一點呼吸 */
  .sec-head--split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.85fr); }
}

@media (max-width: 1000px) {
  .info { grid-template-columns: 1fr; }
  .map-card { position: static; }
  .sec-head--split { grid-template-columns: 1fr; align-items: start; }
  .faq__grid { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__desc { max-width: none; }

  /* 三欄在這個寬度開始擠：品牌與連結先同一列，說明掉到下面整行。
     兩欄時必須把位置寫死 —— link 有指定 grid-row，會先被放進第 1 欄，
     品牌反而被擠到第 2 欄並被拉寬。 */
  .foot__partner {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 16px;
  }
  .foot__hp { grid-column: 1; grid-row: 1; justify-self: start; }
  .foot__partner-txt { grid-column: 1 / -1; grid-row: 2; }
  .foot__partner-link { grid-column: 2; grid-row: 1; justify-self: end; }
}

@media (max-width: 860px) {
  /* 手機 hero 上半是白天亮圖，漸層不夠 → 直接實底，漢堡與店名才讀得清 */
  .nav {
    background: rgba(5, 5, 7, 0.9);
    backdrop-filter: blur(12px) saturate(120%);
    border-bottom-color: rgba(35, 35, 43, 0.75);
  }

  .nav__links,
  .nav__tel { display: none; }
  .nav__toggle { display: flex; }

  .nav.is-open .nav__links {
    display: flex;
    position: absolute;
    inset: var(--nav-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--pad) 24px;
    background: rgba(5, 5, 7, 0.97);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
  }

  .nav.is-open .nav__link {
    padding-block: 15px;
    border-bottom: 1px solid rgba(35, 35, 43, 0.7);
    font-size: 15px;
  }

  .nav.is-open .nav__link::after { display: none; }

  /* 手機的服務區：橫向軌道的幾何全在 9. 服務項目那段（用 max-width: 860px 判），
     這裡只調卡片內距。注意不要給 .svc 加 transform / opacity 的 CSS transition ——
     GSAP 每個影格都在寫 transform，transition 會讓它拖尾、看起來像卡頓。 */
  .svc { padding: clamp(24px, 6vw, 30px); }

  /* 手機的 hero：上照片、下文字。
     桌機是「左文字 + 右車」的橫向構圖；手機照搬會變成一條細縫。
     這裡的關鍵是**照片框必須等於圖片比例**：hero-sm.webp 是 800×1000（4:5），
     所以高度 = 寬 × 1.25。以前寫 `height: 62%`（佔 hero 高度），框比圖扁，
     object-fit: cover 就一定會把上下裁掉 —— 看起來就是「看不到全圖」。
     84svh 是給橫放／小平板的上限，那時寧可裁一點也不要整張圖佔滿螢幕。 */
  .hero {
    align-items: flex-end;
    --hero-pos-x: 0.5;
    --hero-photo-h: min(125vw, 84svh);
    min-height: 0;
  }

  .hero__media,
  .hero__shader {
    inset: 0 0 auto 0;
    height: var(--hero-photo-h);
  }

  /* 直幅圖本來就是為了這個框裁的，置中即可，不要再偏移 */
  .hero__media img { object-position: 50% 50%; }

  /* 文字從照片下緣開始，不再壓在照片上：圖完整、字也不用靠重遮罩硬撐。
     hero 本身已有 padding-top: var(--nav-h)（讓照片鑽到固定選單底下），
     這裡要扣掉那一段，否則照片和文字之間會多出一個選單高。 */
  .hero__inner { padding-block: calc(var(--hero-photo-h) - var(--nav-h) + 18px) 44px; }
  .hero__name { margin-top: 16px; }
  .hero__hair { margin-top: 22px; }
  .hero__desc { margin-top: 22px; line-height: 1.95; }
  .hero__cta { margin-top: 28px; }
  .hero__meta { margin-top: 26px; }

  .hero__light {
    /* 照片只佔上方一段：中段完全放行，最底下 64px 才收成純黑，
       把照片下緣融掉、接上文字區。
       不要在更高的位置就開始壓黑 —— 那會把車尾／輪胎吃掉一半，
       又變成使用者口中的「看不到全圖」。 */
    background:
      linear-gradient(180deg,
        rgba(5, 5, 7, 0.55) 0,
        rgba(5, 5, 7, 0.1) min(16vw, 10svh),
        rgba(5, 5, 7, 0) min(28vw, 19svh),
        rgba(5, 5, 7, 0) calc(var(--hero-photo-h) - 64px),
        rgba(5, 5, 7, 0.55) calc(var(--hero-photo-h) - 26px),
        #050507 calc(var(--hero-photo-h) + 1px),
        #050507 100%);
  }

  .gallery { grid-template-columns: repeat(2, 1fr); }
  /* 手機兩欄時，主圖維持 2×2 —— 只給 2×1 會變成扁長條，車頭被裁掉一半 */
  .shot--lead { grid-column: span 2; grid-row: span 2; }

  /* 價目表：手機改「選車型」——一次只顯示服務名 + 一個車型欄，不再左右滑 */
  .prices__head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .ptype { display: flex; }
  .ptable { min-width: 0; width: 100%; }
  /* 第十七輪：只顯示兩欄時，首欄還是 22%（77px），「鏡面小美容」
     會用 nowrap 溢出壓到價格上。手機給到 46%，兩欄都好讀。 */
  .ptable thead th:first-child { width: 46%; }
  .ptable tbody th,
  .ptable tbody td,
  .ptable thead th { padding: 13px 12px; }

  .ptable thead th:nth-child(n + 2),
  .ptable tbody td:nth-child(n + 2) { display: none; }

  .ptable[data-col="1"] thead th:nth-child(2),
  .ptable[data-col="1"] tbody td:nth-child(2),
  .ptable[data-col="2"] thead th:nth-child(3),
  .ptable[data-col="2"] tbody td:nth-child(3),
  .ptable[data-col="3"] thead th:nth-child(4),
  .ptable[data-col="3"] tbody td:nth-child(4),
  .ptable[data-col="4"] thead th:nth-child(5),
  .ptable[data-col="4"] tbody td:nth-child(5),
  .ptable[data-col="5"] thead th:nth-child(6),
  .ptable[data-col="5"] tbody td:nth-child(6) {
    display: table-cell;
  }

  /* 卡片：三欄在手機太擠，改成單欄堆疊 */
  .pcards,
  .pcards--two { grid-template-columns: 1fr; }

  .lb__nav--prev { left: 4px; }
  .lb__nav--next { right: 4px; }
}

@media (max-width: 560px) {
  .hero__cta .btn { width: 100%; }
  .foot__grid { grid-template-columns: 1fr; }

  /* 第十七輪：頁尾在手機原本 1,073px（1.3 屏），其中 600px 是三欄直向堆疊。
     導覽改成 3 欄橫排（6 條 → 2 列），電話與地址維持直向好讀。 */
  .foot__grid { gap: 24px; }
  .foot__grid > div:nth-child(2) .foot__list {
    grid-template-columns: repeat(3, max-content);
    gap: 2px 22px;
  }

  /* 一條到底：mark + HALPHAS 一行，說明一行，連結一行。 */
  .foot__partner {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 16px;
  }
  .foot__hp,
  .foot__partner-txt,
  .foot__partner-link { grid-column: auto; grid-row: auto; justify-self: start; }
  .foot__partner-txt { font-size: 12px; }

  .cta__tel { width: 100%; }
  .hero__rule { display: none; }
  .hero__meta .sep { display: none; }
  .hero__meta { gap: 6px 14px; }

  /* 英文 eyebrow 在大字距下會斷成兩行，縮小字距讓它維持一行
     （第十七輪：原本 10px，連中文字都看不清楚，只收到 11.5px） */
  .eyebrow { font-size: 11.5px; letter-spacing: 0.2em; }
  .hero__sub { letter-spacing: 0.24em; }

  .pcat {
    min-height: 64px;
    padding: 12px 6px;
    font-size: 13px;
    letter-spacing: 0.04em;
    gap: 6px;
  }
}

@media (max-width: 860px) {
  /* 手機常駐通話鍵 —— 這家店只收電話預約，號碼不能跟著 hero 捲走 */
  .callbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
    background: rgba(9, 9, 12, 0.96);
    border-top: 1px solid rgba(176, 23, 34, 0.55);
    color: #fff;
    font-size: 13px;
    letter-spacing: 0.1em;
    text-decoration: none;
  }

  .callbar iconify-icon { color: var(--red-txt); flex: none; }
  .callbar span { color: #9a9aa2; }
  .callbar strong { font-size: 16px; font-weight: 600; letter-spacing: 0.06em; }

  /* 讓頁尾不會被通話鍵壓住 */
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  /* 系統要求減少動態時，所有入場動畫一律跳過，內容直接顯示 */
  [data-anim],
  .char { opacity: 1 !important; transform: none !important; }

  /* WebGL 渲染器本身就是持續動畫，直接不啟用（由 JS 判斷，這裡再保險一次） */
  .hero__shader { display: none !important; }
}