/* ==========================================================================
   HSST · 版面密度 + 視覺衝擊力增強層
   v20261008a  |  與 hsst-type-scale 配套
   目標：消除相鄰區塊的疊加留白，並強化首屏張力、層級對比、交互反饋
   原則：只做「視覺表現」與「間距折疊」，不改結構、不改文案、不動響應式斷點邏輯
   ========================================================================== */

/* ─────────────────────────────────────────────────────────────
   0. 基礎質感
   ───────────────────────────────────────────────────────────── */
html:root:root {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
@media (prefers-reduced-motion: no-preference) {
  html:root:root { scroll-behavior: smooth; }
}
html:root:root ::selection { background: #D4AF37; color: #12121c; }
html:root:root :focus-visible { outline: 2px solid #D4AF37; outline-offset: 2px; }

/* ─────────────────────────────────────────────────────────────
   1. 密度：折疊「相鄰區塊」的疊加內邊距
      原來是 上塊 padding-bottom 40 + 下塊 padding-top 40 = 80px 空白；
      折疊後為 24 + 24 = 48px，區塊內部節奏不變，僅消除疊加。
   ───────────────────────────────────────────────────────────── */
html:root:root body .section-padding:has(+ .section-padding),
html:root:root body .section-padding:has(+ section.section-padding) {
  padding-bottom: 16px !important;
}
html:root:root body .section-padding + .section-padding {
  padding-top: 16px !important;
}
/* 同色背景相鄰時進一步合並（避免同底色區塊間出現無意義分隔） */
html:root:root body .bg-off-white + .bg-off-white,
html:root:root body .bg-light-gray + .bg-light-gray {
  padding-top: 12px !important;
}
/* 區塊頭與內容之間不再雙重留白 */
html:root:root body .section-header-center + *:not(.section-header-center) {
  margin-top: 0 !important;
}

/* ─────────────────────────────────────────────────────────────
   2. 層級：標題與眉標
   ───────────────────────────────────────────────────────────── */
html:root:root body h1,
html:root:root body h2,
html:root:root body .section-title,
html:root:root body .art-h2 {
  letter-spacing: -0.015em;
}
/* 金色眉標：細橫線 + 字距 */
html:root:root body .section-subtitle,
html:root:root body .section-header-center .label,
html:root:root body .art-kicker,
html:root:root body .cs2-kicker,
html:root:root body [class*="kicker"] {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #B8860B !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: none;
  /* 圖層字體斜體矯正：CJK 無真斜體，premium 強制 italic 會合成偽斜，
     導致中文眉標「歪斜／發虛」。Playfair Display 僅載入 wght 軸（無 ital 軸），
     所有 italic 皆為合成，故統一還原正體。 */
  font-style: normal !important;
}
/* 產品系列卡 `.hsst-sc-cap i` 品類小標（白雲石／麻石等）被 premium 強制
   italic 合成偽斜 → 中文歪斜。同因還原正體。 */
html:root:root body .hsst-sc-cap i {
  font-style: normal !important;
}
html:root:root body .section-subtitle::before,
html:root:root body .section-header-center .label::before,
html:root:root body .art-kicker::before,
html:root:root body .cs2-kicker::before,
html:root:root body [class*="kicker"]::before {
  content: "";
  width: 26px;
  height: 2px;
  background: linear-gradient(90deg, #D4AF37, rgba(212, 175, 55, 0.15));
  border-radius: 2px;
  flex: none;
}
/* 區塊主標題下壓一條極細金色漸隱線，制造"重磅"感 */
html:root:root body .section-header-center h2,
html:root:root body .section-header-center .section-title {
  position: relative;
  padding-bottom: 14px;
}
html:root:root body .section-header-center h2::after,
html:root:root body .section-header-center .section-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 54px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(135deg, #E8C84A 0%, #B8860B 100%);
}
/* 左對齊標題：金色豎條 */
html:root:root body .art-h2 { border-left-color: #D4AF37 !important; }
/* 正文描述收窄到舒適行長 */
html:root:root body .section-desc,
html:root:root body .section-header-center p.sub,
html:root:root body .section-header-center .sub {
  max-width: 68ch;
  margin-left: auto;
  margin-right: auto;
}

/* ─────────────────────────────────────────────────────────────
   3. 首屏：影視級遮罩 + 標題金線
   ───────────────────────────────────────────────────────────── */
html:root:root body .art-hero,
html:root:root body .project-hero,
html:root:root body .news-hero,
html:root:root body .solution-hero,
html:root:root body .honors-hero,
html:root:root body .page-hero,
html:root:root body .v2-hero,
html:root:root body .hsst-cmp-page-hero {
  position: relative;
  isolation: isolate;
}
/* 頂部控光 + 底部壓深，讓白色標題在任何照片上都跳出來 */
html:root:root body .art-hero::after,
html:root:root body .project-hero::after,
html:root:root body .news-hero::after,
html:root:root body .solution-hero::after,
html:root:root body .honors-hero::after,
html:root:root body .page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(6, 6, 14, 0.20) 0%, rgba(6, 6, 14, 0) 60%),
    linear-gradient(180deg, rgba(6, 6, 14, 0.06) 0%, rgba(6, 6, 14, 0) 42%, rgba(6, 6, 14, 0.52) 100%);
}
html:root:root body .art-hero-content,
html:root:root body .project-hero-overlay,
html:root:root body .news-hero-content,
html:root:root body .solution-hero .container,
html:root:root body .honors-hero .container {
  position: relative;
  z-index: 2;
}
/* 首屏大標題：金色裝飾線 + 更強字重和投影 */
html:root:root body .art-hero h1,
html:root:root body .project-hero-title,
html:root:root body .news-hero-title,
html:root:root body .solution-hero h1,
html:root:root body .honors-hero h1,
html:root:root body .page-hero h1 {
  font-weight: 800 !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}
html:root:root body .art-hero h1::after,
html:root:root body .solution-hero h1::after,
html:root:root body .honors-hero h1::after,
html:root:root body .page-hero h1::after {
  content: "";
  display: block;
  width: 72px;
  height: 3px;
  margin-top: 14px;
  border-radius: 3px;
  background: linear-gradient(135deg, #E8C84A 0%, #B8860B 100%);
}
/* 背景圖極緩慢推拉（Ken Burns）—— 已移除。
   原因：hero 的 background 多為「單層 url()」或「多層 url()+漸層」混合，
   在不確知圖層數量的前提下改寫 background-size/background-position 會
   造成圖層錯配（拉伸變形或整層消失）。視覺衝擊改由上方靜態影視級遮罩承擔。 */

/* 產品 / 分類頁首屏：本站刻意保留「背景圖完整顯示、無深色遮罩」（設計決策），
   文字可讀性由 premium 層 12.1b 定義：
     標題 = 鮮黃 #ffd400 + 2px 深色描邊（paint-order: stroke fill）
     副標題／描述 = 深藍 #0a2a6b + 白色光暈（深色石紋靠白光暈突圍）
   淺色大理石（米黃、白色系）上金色標題會「糊掉」，
   故此處只「單向加強」標題的深色描邊與投影，不改底色、不加遮罩。 */
html:root:root body .product-hero-title {
  -webkit-text-stroke: 2.5px rgba(6, 6, 14, .74) !important;
  text-shadow: 0 2px 6px rgba(6, 6, 14, .55), 0 8px 30px rgba(6, 6, 14, .45) !important;
}
/* 副標題／描述「不再覆寫」：premium 12.1b 的
     color:#0a2a6b + text-shadow: 白 1px/3px + 0 0 10px .85
   已是為「深淺石紋皆可讀」調校過的實測值。
   曾在此多疊一層 `0 2px 10px rgba(255,255,255,.7)`，
   實測在淺色大理石上會把深藍字的筆畫「洗淡」，故移除，回歸設計系統原值。 */
/* 只給「文字區塊」加一層聚光暗暈（而非全寬遮罩）—— 已回退。
   實測：淺色石紋上確實能救回標題對比，但深色石紋上會同時壓暗
   原本靠「白色光暈」突圍的深藍副標與描述，兩頭不討好。
   本站首屏遮罩「刻意 100% 透明」是既定的設計決策，此處不推翻，
   僅保留上方對標題描邊／陰影的強化（單向加強，任何底色皆不吃虧）。 */

/* ─────────────────────────────────────────────────────────────
   4. 卡片：統一懸浮語言
   ───────────────────────────────────────────────────────────── */
html:root:root body .news-card,
html:root:root body .stone-card,
html:root:root body .service-card,
html:root:root body .pain-point-card,
html:root:root body .overview-card,
html:root:root body .why-card,
html:root:root body .sol-quick-card,
html:root:root body .solutions-card,
html:root:root body .project-card,
html:root:root body .trust-item,
html:root:root body .client-logo-item,
html:root:root body .cs2-mat-card,
html:root:root body .role-card,
html:root:root body .flow-step,
html:root:root body .cs2-card {
  transition: transform .38s cubic-bezier(.2, .7, .3, 1),
              box-shadow .38s cubic-bezier(.2, .7, .3, 1),
              border-color .38s ease !important;
}
html:root:root body .news-card:hover,
html:root:root body .stone-card:hover,
html:root:root body .service-card:hover,
html:root:root body .pain-point-card:hover,
html:root:root body .overview-card:hover,
html:root:root body .why-card:hover,
html:root:root body .sol-quick-card:hover,
html:root:root body .solutions-card:hover,
html:root:root body .project-card:hover,
html:root:root body .trust-item:hover,
html:root:root body .client-logo-item:hover,
html:root:root body .cs2-mat-card:hover,
html:root:root body .role-card:hover,
html:root:root body .flow-step:hover,
html:root:root body .cs2-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 46px rgba(14, 14, 28, .16), 0 0 0 1px rgba(212, 175, 55, .35) !important;
}
/* 卡片內圖片統一裁切比例，避免出現"圖片沒鋪滿"的留白 */
html:root:root body .news-card-image,
html:root:root body .stone-card-img,
html:root:root body .gallery-item,
html:root:root body .project-card-img,
html:root:root body .cs2-mat-card .ph,
html:root:root body .news-spotlight-img {
  overflow: hidden;
}
html:root:root body .news-card-image .bg,
html:root:root body .gallery-item img,
html:root:root body .stone-card-img img,
html:root:root body .project-card-img img,
html:root:root body .cs2-mat-card img {
  transition: transform .7s cubic-bezier(.2, .7, .3, 1) !important;
}
html:root:root body .news-card:hover .bg,
html:root:root body .gallery-item:hover img,
html:root:root body .stone-card:hover .stone-card-img img,
html:root:root body .project-card:hover .project-card-img img,
html:root:root body .cs2-mat-card:hover img {
  transform: scale(1.07);
}

/* ─────────────────────────────────────────────────────────────
   5. 按鈕：金色質感 + 掃光
   ───────────────────────────────────────────────────────────── */
html:root:root body .btn-gold,
html:root:root body .btn-primary,
html:root:root body .primary-btn,
html:root:root body .cta-btn,
html:root:root body .art-btn,
html:root:root body .jd-btn {
  background-image: linear-gradient(135deg, #E8C84A 0%, #D4AF37 45%, #B8860B 100%) !important;
  color: #14141f !important;
  font-weight: 700 !important;
  letter-spacing: .02em;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(184, 134, 11, .55) !important;
  transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s ease, filter .3s ease !important;
}
html:root:root body .btn-gold:hover,
html:root:root body .btn-primary:hover,
html:root:root body .primary-btn:hover,
html:root:root body .cta-btn:hover,
html:root:root body .art-btn:hover,
html:root:root body .jd-btn:hover {
  transform: translateY(-2px);
  filter: saturate(1.12) brightness(1.05);
  box-shadow: 0 14px 30px rgba(184, 134, 11, .38) !important;
}
html:root:root body .btn-gold::after,
html:root:root body .btn-primary::after,
html:root:root body .primary-btn::after,
html:root:root body .cta-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -140%;
  width: 60%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-18deg);
  transition: left .65s cubic-bezier(.2, .7, .3, 1);
  pointer-events: none;
}
html:root:root body .btn-gold:hover::after,
html:root:root body .btn-primary:hover::after,
html:root:root body .primary-btn:hover::after,
html:root:root body .cta-btn:hover::after {
  left: 150%;
}
html:root:root body .btn-outline-white:hover,
html:root:root body .btn-outline:hover {
  background: rgba(212, 175, 55, .14) !important;
  border-color: #D4AF37 !important;
  color: #fff !important;
}

/* ─────────────────────────────────────────────────────────────
   6. CTA 區塊：維持「淺底深字」（修正深底深字不可讀）
   本節早前把 .cta-dark 與 .cta-section.cta-home 一併套上深色漸層
   （radial 金暈 + linear #14142a→#101024），但這兩個類早已被
   premium-20260902.css 改造為「淺底深字」：
     · Module 29：首頁「開始合作」CTA 取消全屏深底，改與上下同色淺米
       （body.premium .cta-section.cta-home { background:#F5F1EA }）；
     · 12 節註記：.cta-dark / .products-cta / .v2-quote / .trust-bar /
       .v2-btn 均已改為淺底深字。
   兩者相撞的結果是：首頁「開始合作」與私隱／條款／合規頁的頁頭
   變成「深底（漸層）+ 深字（#14130F / #333）」——文字完全無法辨識。
   現改為強制清除背景圖，讓各頁回到 premium 原生的淺底：
     · .cta-home → premium 的 #F5F1EA（淺米）
     · .cta-dark → 淺米白 #F5F1EA + 深字 #14130F（不依賴 body 底色）
   文字對比由 1.0~1.3:1 提升至 ≥ 12:1，符合 WCAG AA。
   ───────────────────────────────────────────────────────────── */
html:root:root body .cta-section.cta-home {
  background-image: none !important;
}
html:root:root body .cta-dark {
  background-image: none !important;
  background-color: #F5F1EA !important;
  color: #14130F !important;
}
/* .cta-dark 頁頭的金色小標為行內 style（#C9A84C），在淺底上對比僅 2.0:1；
   統一改深金 #8A6D1F（≈4.4:1），與全站淺底金色小標一致。 */
html:root:root body .cta-dark .container > span:first-child {
  color: #8A6D1F !important;
}
/* 6d. 聯絡頁「合作願景」卡：標題與斜體引文本為淺金 --color-accent-light
   (#E8C84A)，落在淺米漸層底（#F5F0EB→#E8E4DF）上對比僅 1.6:1，
   文字近乎消失。統一改深金 #8A6D1F，與全站淺底金色小標一致。
   （中英同步：CSS 選擇器同時命中 contact.html 與 en/contact.html） */
html:root:root body .contact-eco-vision h4,
html:root:root body .contact-eco-vision-quote {
  color: #8A6D1F !important;
  /* 該引言為中文，style 表 font-style:italic 合成偽斜 → 歪斜；還原正體 */
  font-style: normal !important;
}
/* 首頁「開始合作」眉標：premium 以 --pv-gold(#C2A25E) 鎖定，在淺米底
   (#F5F1EA) 上對比僅 2.2:1（12px 小字不達 AA）。統一改深金 #8A6D1F。 */
html:root:root body .cta-section.cta-home .section-subtitle {
  color: #8A6D1F !important;
}
/* 6e. 深色卡內的說明文字被通用規則誤壓成深色 → 不可讀。逐項還原淺色：
   · .faqv2-cta p —— 被 `.inner-page .section-padding p{color:#333}` 壓成
     #333，落在深藍漸層卡（#1A1A2E→#26264A）上（對比 1.14:1）；
   · .ph-note（工程案例頁工法卡內的深色圖示區）—— 被 `.cs2-proc p
     {color:#5c5966}` 壓成 #5C5966，落在深棕漸層（#211F17→#2E2B21）上
     （對比 2.07:1）。
   兩者皆以高特異性 + !important 還原為淺色，保留原設計意圖。
   （中英同步：選擇器同時命中 faq.html/en/faq.html 與 projects/*、en/projects/*） */
html:root:root body .faqv2-cta p {
  color: rgba(255, 255, 255, .78) !important;
}
html:root:root body .cs2-proc .ph > .ph-note,
html:root:root body .cs2-inst .ph > .ph-note {
  color: rgba(255, 255, 255, .74) !important;
}
/* 6f. 404「返回首頁 / Back to Homepage」按鈕：
   原中文頁為行內 style="background:#1a1a1a"，文字沿用全域 a 色 #1A1A2E →
   深藍字落在 #1A1A1A 深底上（對比 1.02:1），完全看不見；英文頁則是無底
   裸連結，中英不一致。整併為統一的品牌金底深字按鈕（中英同步）。 */
html:root:root body .hsst-404-back {
  display: inline-block;
  margin-top: 26px;
  padding: 12px 32px;
  background: linear-gradient(135deg, #C8A96E 0%, #A88B5A 100%) !important;
  color: #14130F !important;
  border-radius: 2px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .08em;
  text-decoration: none !important;
  transition: filter .25s ease, transform .25s ease;
}
html:root:root body .hsst-404-back:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
/* ─────────────────────────────────────────────────────────────
   6b. 表單區（.hsst-form-zone）恢復淺色背景＋黑色文字
   此前被誤套深色漸層（與本檔 6. 同組選擇器），導致全站 350+ 頁
   「立即開始／工程諮詢」區暗底暗字不可讀——與 premium-20260902.css
   內 .hsst-form-zone 專屬規則（隱私副文 #5C574F、成功塊白底、提交鈕
   #1A1A2E）的「淺底」設計意圖直接衝突。改回淺底，統一全站背景。
   ───────────────────────────────────────────────────────────── */
html:root:root body .hsst-form-zone:not(.bg-off-white):not(.cta-home) {
  background: transparent !important;
}
/* 表單區內描邊按鈕：淺底改用深金描邊＋黑字（沿用模組48 白底黑字金框規範），
   保證對比度；hover 填金底黑字，與 .btn-filled 一致。 */
html:root:root body .hsst-form-zone .btn-outline {
  color: #1A1A2E !important;
  border-color: #D4AF37 !important;
}
html:root:root body .hsst-form-zone .btn-outline:hover {
  background: #D4AF37 !important;
  color: #111 !important;
}
/* 表單區內金色小標（kicker）與內文連結：原 #D4AF37 在淺底對比不足，
   改為深金 #8A6D1F 保證可讀；連結加底線以區分。
   ⚠ 必須排除所有按鈕類（class 含 "btn"）：按鈕自帶金／深底，
   先前僅排除 .btn-filled / .btn-outline，令 .btn-primary 等被改成
   深金 #8A6D1F 而落在金底上（對比 1.6:1），文字幾近消失。 */
html:root:root body .hsst-form-zone .project-section-subtitle {
  color: #8A6D1F !important;
}
html:root:root body .hsst-form-zone a:not([class*="btn"]) {
  color: #8A6D1F !important;
  text-decoration: underline;
}
/* ─────────────────────────────────────────────────────────────
   6c. 表單區（.hsst-form-zone）排版重整：消除「大量留白」
   - 區塊背景由整條全寬色帶改為「居中卡片」：內層 .container /
     .project-container / .sample-form-container 承載淺底＋邊框＋圓角，
     去除兩側空白感，統一全站視覺；
   - 含 .cta-grid 的頁面（工程案例等）由「auto-fill 幻影第三欄＋垂直置中」
     改為單欄：推銷文案（標題＋說明＋按鈕）作為整寬標頭，表單居中收窄，
     徹底消除左欄高低落差造成的留白；
   - 手機端單欄堆疊、卡片內距收斂。
   - 排除 .cta-home（首頁深色 CTA 保持原樣）。
   ───────────────────────────────────────────────────────────── */
html:root:root body .hsst-form-zone:not(.bg-off-white):not(.cta-home) .container,
html:root:root body .hsst-form-zone:not(.bg-off-white):not(.cta-home) .project-container,
html:root:root body .hsst-form-zone:not(.bg-off-white):not(.cta-home) .sample-form-container {
  background: #FAF8F5 !important;
  border: 1px solid #ECE4D7 !important;
  border-radius: 20px !important;
  padding: 30px !important;
  max-width: 1104px !important;
}
html:root:root body .hsst-form-zone:not(.bg-off-white):not(.cta-home) .container.text-center,
html:root:root body .hsst-form-zone:not(.bg-off-white):not(.cta-home) .project-container.text-center {
  text-align: center !important;
}
/* 單欄：推銷文案標頭 + 居中收窄表單 */
html:root:root body .hsst-form-zone .cta-grid {
  grid-template-columns: 1fr !important;
  gap: 18px !important;
  align-items: stretch !important;
  margin-top: 6px !important;
}
html:root:root body .hsst-form-zone .cta-info { text-align: center; }
html:root:root body .hsst-form-zone .cta-buttons { justify-content: center; }
html:root:root body .hsst-form-zone .project-section-title,
html:root:root body .hsst-form-zone .project-section-subtitle { text-align: center; }
/* 表單鋪滿卡片寬＝頁面內容區同寬（此前 640px 居中收窄，兩側大量留白，
   產品頁欄位網格更因寬度不足塌成單列） */
html:root:root body .hsst-form-zone:not(.cta-home) .hsst-form {
  max-width: 100% !important;
  margin: 0 auto !important;
}
/* 產品頁表單欄位網格（.specs-dimensions-grid 同類名也用於規格卡，
   此處僅限表單區作用域）：鋪滿後固定兩欄成對（姓名|公司、郵箱|電話），
   手機回退單欄 */
html:root:root body .hsst-form-zone:not(.cta-home) .specs-dimensions-grid {
  grid-template-columns: repeat(2, 1fr) !important;
}
@media (max-width: 768px) {
  html:root:root body .hsst-form-zone:not(.cta-home) .specs-dimensions-grid {
    grid-template-columns: 1fr !important;
  }
}
/* 產品 / 資料頁表單區標頭也居中，與工程案例統一 */
html:root:root body .hsst-form-zone:not(.cta-home) .container > h2,
html:root:root body .hsst-form-zone:not(.cta-home) .container > p,
html:root:root body .hsst-form-zone:not(.cta-home) .sample-form-container > h2,
html:root:root body .hsst-form-zone:not(.cta-home) .sample-form-container > p {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* 手機 */
@media (max-width: 900px) {
  html:root:root body .hsst-form-zone:not(.bg-off-white):not(.cta-home) .container,
  html:root:root body .hsst-form-zone:not(.bg-off-white):not(.cta-home) .project-container,
  html:root:root body .hsst-form-zone:not(.bg-off-white):not(.cta-home) .sample-form-container {
    padding: 22px 16px !important;
    border-radius: 16px !important;
  }
}
/* 數字 / 統計：金色漸變字 */
html:root:root body .stat-item strong,
html:root:root body .trust-item strong,
html:root:root body .stat-number,
html:root:root body .news-hero span strong {
  background-image: linear-gradient(135deg, #F0D77A 0%, #D4AF37 55%, #B8860B 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800 !important;
}

/* ─────────────────────────────────────────────────────────────
   7. 圖文 / 清單：收緊行距與分隔線
   ───────────────────────────────────────────────────────────── */
html:root:root body table { border-collapse: collapse; }
html:root:root body table th,
html:root:root body table td { padding-top: 10px; padding-bottom: 10px; }
/* 規格表格（.tech-specs-table 為外層 wrapper div，class 原本屬於 table 本身）：
   內層 <table> 此前僅在 ≤768px 媒體查詢內才有 width:100%，
   桌面端收縮為內容寬（600–1000px），與頁面內容區（1104px）兩側出現大空洞。
   全斷點統一鋪滿父容器寬度，與頁寬一致。 */
html:root:root body .tech-specs-table > table { width: 100% !important; }
html:root:root body ul.hsst-dense li,
html:root:root body .flow-step p,
html:root:root body .pain-point-card p,
html:root:root body .service-card p { line-height: 1.7; }
html:root:root body img,
html:root:root body svg,
html:root:root body video { max-width: 100%; }

/* ─────────────────────────────────────────────────────────────
   8. 入場動畫：漸進增強（無 JS / 爬蟲一律可見）
   ───────────────────────────────────────────────────────────── */
html:root:root .fade-in {
  opacity: 1 !important;
  transform: none !important;
  transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .3, 1);
}
html:root:root.js .fade-in {
  opacity: 0 !important;
  transform: translateY(18px) !important;
}
html:root:root.js .fade-in.visible {
  opacity: 1 !important;
  transform: none !important;
}
html:root:root .aos-init,
html:root:root .aos-animate {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ─────────────────────────────────────────────────────────────
   8b. 全站字級統一（2026-10-08 · 用戶指定）
   ─────────────────────────────────────────────────────────────
   標準：正文 13px ／ 輔助 12px ／ 內容標題 14px
         首屏主標題保留層級 → 18px（用戶確認「內容標題 14px，首屏主標題保留層級」）
         英文頁一律無襯線 Inter（缺字回退 Open Sans / 系統 sans，含標題）
   策略：A→C→B→D→E→F 依序覆寫；全部加 html:root:root body 前綴提升特異性。
         本節置於第 9 節（頁腳）之前——頁腳規則特異性 ≥3 且多為 4（.ft-v2 …），
         故頁腳既有的 Apple 式小字號體系不受本節影響。
   注意：只改 font-size 與 font-family，不改行距。全站行距皆為無單位倍數
         （line-height: 1.x），會隨字級自然等比縮放，無需逐一調整。
   ───────────────────────────────────────────────────────────── */

/* ── A. 正文基線：所有文字預設 13px ─────────────────────────── */
html:root:root body {
  font-size: 13px !important;
}
html:root:root body p,
html:root:root body li,
html:root:root body td,
html:root:root body th,
html:root:root body dt,
html:root:root body dd,
html:root:root body a,
html:root:root body span,
html:root:root body div,
html:root:root body strong,
html:root:root body b,
html:root:root body em,
html:root:root body i,
html:root:root body u,
html:root:root body s,
html:root:root body small,
html:root:root body label,
html:root:root body blockquote,
html:root:root body figcaption,
html:root:root body summary,
html:root:root body details,
html:root:root body cite,
html:root:root body address,
html:root:root body time,
html:root:root body mark,
html:root:root body caption,
html:root:root body legend,
html:root:root body button,
html:root:root body input,
html:root:root body select,
html:root:root body textarea,
html:root:root body option,
html:root:root body optgroup,
html:root:root body output,
html:root:root body pre,
html:root:root body code,
html:root:root body samp,
html:root:root body kbd {
  font-size: 13px !important;
}

/* ── C. 內容標題 → 14px（h2–h6 與各類標題類） ───────────────── */
html:root:root body h2,
html:root:root body h3,
html:root:root body h4,
html:root:root body h5,
html:root:root body h6,
html:root:root body summary,
html:root:root body [class*="title" i],
html:root:root body [class*="heading" i],
html:root:root body [class*="-subhead" i],
html:root:root body [class*="block-h" i],
html:root:root body .art-h2,
html:root:root body .gd-block-h,
html:root:root body .eng-var-name,
html:root:root body .eng-vars-list .eng-var .eng-var-name,
html:root:root body .eng-vars-list.is-ready > .eng-var.is-open .eng-var-name {
  font-size: 14px !important;
}
/* 首屏主標題 h1：保留層級（24px → 18px，用戶確認）。
   必須置於上面 14px 群組「之後」——全站 h1 皆為頁面首屏主標題（原 24px），
   其中 h1.product-hero-title / h1.news-hero-title / h1.project-hero-title /
   h1.section-title 都會命中 [class*="title"]，若 h1 規則在前會被壓成 14px。 */
html:root:root body h1 {
  font-size: 18px !important;
}

/* ── B. 輔助文字 → 12px（眉標／標籤／備註／圖說／計數／索引） ── */
/* B1：詞綴式（結尾命中，避免「advantage」誤中 tag 之類） */
html:root:root body [class$="-kicker" i],
html:root:root body [class$="-label" i],
html:root:root body [class$="-meta" i],
html:root:root body [class$="-note" i],
html:root:root body [class$="-cap" i],
html:root:root body [class$="-badge" i],
html:root:root body [class$="-chip" i],
html:root:root body [class$="-tag" i],
html:root:root body [class$="-hint" i],
html:root:root body [class$="-muted" i],
html:root:root body [class$="-crumb" i],
html:root:root body [class$="-divider" i],
html:root:root body [class$="-required" i],
html:root:root body [class$="-count" i],
html:root:root body [class$="-unit" i],
html:root:root body [class$="-idx" i],
html:root:root body [class$="-num" i],
html:root:root body [class$="-no" i],
html:root:root body [class$="-en" i],
html:root:root body [class$="-sub" i],
html:root:root body [class$="-subtitle" i],
html:root:root body [class$="-year" i],
html:root:root body [class$="-step" i],
html:root:root body [class$="-index" i],
/* B2：短類名（由全站 1045 頁逐元素審計得出，覆蓋率 100%） */
html:root:root body .cap,
html:root:root body .no,
html:root:root body .k,
html:root:root body .v,
html:root:root body .lab,
html:root:root body .og,
html:root:root body .tg,
html:root:root body .l,
html:root:root body .sub,
html:root:root body .badge,
html:root:root body .label,
html:root:root body .required,
html:root:root body .lang-divider,
html:root:root body .hsst-wm,
html:root:root body .spec-item-name,
html:root:root body .spec-dimension-label,
html:root:root body .spec-note,
html:root:root body .art-hero-meta,
html:root:root body .art-hook-tag,
html:root:root body .art-chip,
html:root:root body .art-figcap,
html:root:root body .client-highlight,
html:root:root body .client-tag,
html:root:root body .cd-label,
html:root:root body .gc-s,
html:root:root body .gc-d,
html:root:root body .sc-d,
html:root:root body .vsc-d,
html:root:root body .ev-en,
html:root:root body .ev-rn,
html:root:root body .ev-rnote,
html:root:root body .vtl-year,
html:root:root body .section-subtitle,
html:root:root body .project-section-subtitle,
html:root:root body .product-hero-badge,
html:root:root body .product-hero-subtitle,
html:root:root body .news-hero-subtitle,
html:root:root body .form-trust-badge,
html:root:root body .net-stones,
html:root:root body .jd-badge,
html:root:root body .crumb-current,
html:root:root body .crumb-trail,
html:root:root body .gd-kicker,
html:root:root body .cs2-kicker,
html:root:root body .gd-stat-label,
html:root:root body .gd-tag,
html:root:root body .stage,
html:root:root body .eng-process-num,
html:root:root body .eng-var-idx,
html:root:root body .faqv2-chip-num,
html:root:root body .faqv2-cat-num,
html:root:root body .faqv2-cat-count,
html:root:root body .flow-step-num,
html:root:root body .surface-treatment-tag {
  font-size: 12px !important;
}

/* ── B3. 例外：命中輔助詞綴但實為內容/按鈕者，回歸對應層級 ──── */
html:root:root body .granite-variety-cap,
html:root:root body figcaption.granite-variety-cap {
  font-size: 14px !important;
}
html:root:root body .hsst-cmp-btn-label {
  font-size: 13px !important;
}
/* 命中輔助詞綴但內容為「整句描述」者（非標籤/眉標）→ 回到正文 13px。
   由全站掃描「12px 且文字 >45 字」得出，共 5 處。 */
html:root:root body p.hero-subtitle,
html:root:root body p.watch-sub,
html:root:root body p.faqv2-hero-sub,
html:root:root body p.project-hero-sub,
html:root:root body span.vsc-d {
  font-size: 13px !important;
}

/* ── D. 展示數字 → 14px（統計數字／年份／編號牌） ────────────── */
html:root:root body .gd-stat-num,
html:root:root body .trust-number,
html:root:root body .stat-number,
html:root:root body .timeline-year,
html:root:root body .ht-year,
html:root:root body .nm,
html:root:root body .num,
html:root:root body .n,
html:root:root body .team-card-num {
  font-size: 14px !important;
}

/* 特異性補漏：來源檔以 !important 鎖死的 3 處（實測全站僅此 3 處）
   ．body.premium .navbar .nav-logo-text strong → 15/16px!important（c=3）
   ．body.premium .navbar .nav-logo-text small  → 13px!important（c=3）
   ．body.premium .product-action-bar .product-action-btn → 15px!important（c=3）
   公司名與頁腳 .ft-brand-name 同級（14px），標語與產品頁按鈕歸 12/13px。 */
html:root:root body .navbar .nav-logo-text strong {
  font-size: 14px !important;
}
html:root:root body .navbar .nav-logo-text small {
  font-size: 12px !important;
}
html:root:root body .product-action-bar .product-action-btn,
html:root:root body .product-action-bar .product-action-btn.sample,
html:root:root body .product-action-bar .product-action-btn.inquire {
  font-size: 13px !important;
}

/* ── E. 裝飾圖示（emoji／圖標字形）→ 18px ────────────────────
   圖示非「文字」，但原為 20–24px（相對 15px 正文的視覺錨點）；
   字級統一後若原樣保留會壓過 14px 標題，故等比收至 18px。 */
html:root:root body [class*="icon" i],
html:root:root body [class$="-ico" i],
html:root:root body [class*="flag" i],
html:root:root body .ic,
html:root:root body .hp-icon,
html:root:root body .why-icon,
html:root:root body .faq-icon,
html:root:root body .btt.back-to-top {
  font-size: 18px !important;
}

/* ── F. 英文頁：一律無襯線 Inter / Open Sans（含標題） ───────
   用戶指定：英文頁全站無襯線，去除 Playfair Display 襯線（含標題）。
   以 html[lang="en-HK"] 作用域隔離，中文頁字體完全不動。
   特異性：4×:root + [lang] → c=5，可壓過來源檔全部 !important 字體規則
   （實測來源最高為 c=5 如 .eng-vars-list.is-ready > .eng-var.is-open .eng-var-name）。
   代碼塊保留等寬字。 */
html:root:root:root:root[lang="en-HK"] body,
html:root:root:root:root[lang="en-HK"] body *:not(pre):not(code):not(kbd):not(samp) {
  font-family: 'Inter', 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'PingFang HK', 'Microsoft JhengHei', sans-serif !important;
}
html[lang="en-HK"] body pre,
html[lang="en-HK"] body code,
html[lang="en-HK"] body kbd,
html[lang="en-HK"] body samp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
}

/* ── G. 標題層級最終鎖定（特異性補強）────────────────────────
   問題：B 層詞綴式輔助規則（`[class$="-sub"]`、`[class$="-title"]` 同族）
         與 C 層 `[class*="title" i]` 皆為「屬性選擇器」，特異性 c=3/d=1；
         而元素級 `h1`–`h6` 僅 c=2/d=1~2 → 屬性選擇器勝出，導致
         h1.product-hero-title、h1.gd-title、h1.news-hero-title、
         h1.watch-title、h1.project-hero-title 被壓成 14px，
         h3.hsst-cmp-guide-sub 被壓成 12px（全站實測共 7 類、703 處）。
   修法：以 `h_[class]`（c=3/d=2）補一層，d 高一級即可壓過所有屬性選擇器。 */
html:root:root body h1[class] {
  font-size: 18px !important;
}
html:root:root body h2[class],
html:root:root body h3[class],
html:root:root body h4[class],
html:root:root body h5[class],
html:root:root body h6[class] {
  font-size: 14px !important;
}

/* ─────────────────────────────────────────────────────────────
   9. 頁腳統一美化（全站 · 明確配色 · WCAG AA 對比達標 · 2026-10-08）
   ─────────────────────────────────────────────────────────────
   配色方案（實色標註；對比度以頁腳底色 #1E1C16 計算）：
     頁腳底色   #1E1C16   深暖炭黑（品牌深色，全站統一）
     頂部漸層   #26241C → #1E1C16（極淺縱向漸層增加層次）
     主文字     #F4F1EA   對比 15.1:1（AAA）— 品牌名/主標題
     內文連結   #CFC9BD   對比 10.3:1（AAA）— 導航連結/矩陣卡
     次要文字   #A7A091   對比  6.5:1（AA） — 品牌描述/法務連結/備註
     輔助文字   #B3AC9E   對比  7.6:1（AA） — 品牌簡介
     聯絡文字   #DFDACE   對比 11.9:1（AAA）— 地址/電話/郵箱
     底欄文字   #948E80   對比  5.2:1（AA） — 版權行
     金色強調   #C9A84C   對比  7.5:1（AA） — 欄目標題/邊框/裝飾線
     金色高亮   #E5CC8A   對比 10.8:1（AAA）— 全部 hover 態
     髮絲線     rgba(244,241,234,.14)
     卡片底     rgba(244,241,234,.04)
   舊版散落的 5 種金色（#D4B47A/#C9A84C/#E5CC8A/#C2A25E/#E8C84A）
   統一收斂為：#C9A84C（常態）+ #E5CC8A（hover）。
   ───────────────────────────────────────────────────────────── */

/* 9.1 頁腳基底：明確底色 + 頂部細漸層層次 */
html:root:root body .footer {
  background: linear-gradient(180deg, #26241C 0%, #1E1C16 132px, #1E1C16 100%) !important;
  color: #F4F1EA;
  padding-top: 56px;
}
/* 防外層 text-align:center 滲入（如 404 頁 body 居中樣式） */
html:root:root body .ft-v2 { text-align: left; }
html:root:root body .ft-v2 .ft-badges { justify-content: flex-start; }
/* 頂部金色裝飾線（明確色值，取代 var 依賴） */
html:root:root body .footer::before {
  background: linear-gradient(90deg, transparent 0%, #C9A84C 15%, #C9A84C 85%, transparent 100%);
  opacity: .6;
}
html:root:root body footer .ft-grid5,
html:root:root body footer .footer-grid { align-content: start; }
html:root:root body footer a { transition: color .25s ease, transform .25s ease; }
/* 9.3 導航連結：#CFC9BD（10.3:1）→ hover #E5CC8A（10.8:1） */
html:root:root body .ft-v2 .ft-links a { color: #CFC9BD; }
html:root:root body .ft-v2 .ft-links a:hover { color: #E5CC8A !important; }

/* 9.4 品牌列 */
html:root:root body .ft-v2 .ft-brand-name { color: #F4F1EA !important; }
html:root:root body .ft-v2 .ft-brand-desc { color: #B3AC9E !important; }
html:root:root body .ft-v2 .ft-badges span {
  color: #CFC9BD !important;
  border-color: rgba(201,168,76,.38) !important;
  background: rgba(201,168,76,.08) !important;
}

/* 9.5 聯絡列：主行 #DFDACE（11.9:1）、備註 #A7A091（修復舊 .42 白 ≈4.1:1 不達 AA） */
html:root:root body .ft-v2 .ft-contact .ft-c-line { color: #DFDACE !important; }
html:root:root body .ft-v2 .ft-contact .ft-c-line a:hover { color: #E5CC8A !important; }
html:root:root body .ft-v2 .ft-contact .ft-c-note { color: #A7A091 !important; }
/* 9.7 底欄：版權 #948E80（5.2:1）、法務連結 #A7A091（6.5:1） */
html:root:root body .ft-v2 .ft-bottom,
html:root:root body .ft-v2 .ft-copy { color: #948E80 !important; }
html:root:root body .ft-v2 .ft-legal a { color: #A7A091 !important; }
html:root:root body .ft-v2 .ft-legal a:hover { color: #E5CC8A !important; }

/* 9.8 分隔線統一 */
html:root:root body .ft-v2 .ft-cols { border-bottom-color: rgba(244,241,234,.14) !important; }
html:root:root body .ft-v2 .ft-bottom { border-top-color: rgba(244,241,234,.14) !important; }

/* 9.9 鍵盤焦點可視（無障礙） */
html:root:root body footer a:focus-visible {
  outline: 2px solid #C9A84C;
  outline-offset: 3px;
  border-radius: 4px;
}

/* 9.10 移動端間距微調（≤560：縱向更緊湊、底欄置左換行） */
@media (max-width: 560px) {
  html:root:root body .footer { padding-top: 18px; }
  html:root:root body .ft-v2 .ft-cols { gap: 18px 14px !important; }
  html:root:root body .ft-v2 .ft-bottom { gap: 6px; }
}

/* 9.11 頁腳「蘋果式」小字號 + 極緊湊留白（2026-10-08 二改）
   依據：用戶要求參照 Apple 官網頁腳——文字一律小號、精緻緊湊、不堆留白，
   並在縮小字號後把總高再降 100px+。
   字號基線（桌面）：標題 12px／鏈接 13px／品牌名 14px／描述 12px／
   聯絡 12px／矩陣卡 12px／底欄 12px（Apple footer 正文約 12px）。
   行距：鏈接項節距 31px → 23px（line-height 1.3 + gap 6）。 */
@media (min-width: 769px) {
  /* 頁腳外框留白：28/24 → 22/18 */
  html:root:root body .footer {
    padding-top: 22px !important;
    padding-bottom: 18px !important;
  }  /* 列區：底部 24 → 18 */
  html:root:root body .ft-v2 .ft-cols { padding-bottom: 18px !important; }
  /* 底欄：14/13 → 10/10 */
  html:root:root body .ft-v2 .ft-bottom {
    margin-top: 10px !important;
    padding-top: 10px !important;
  }
  /* ── 字號：全面小號化（Apple 式）── */
  html:root:root body .ft-v2 .ft-col .ft-h {
    font-size: 12px !important;
    letter-spacing: .15em !important;
  }  html:root:root body .ft-v2 .ft-col .ft-h { margin-bottom: 8px !important; }
  /* 導航/服務鏈接：節距收至 ~23px（li 行盒亦須同步，否則繼承 16px 行高撐高） */
  html:root:root body .ft-v2 .ft-links { gap: 6px !important; }
  html:root:root body .ft-v2 .ft-links li {
    font-size: 13px !important;
    line-height: 1.3 !important;
  }
  html:root:root body .ft-v2 .ft-links a {
    font-size: 13px !important;
    line-height: 1.3 !important;
  }
  /* 品牌列 */
  html:root:root body .ft-v2 .ft-brand-name {
    font-size: 14px !important;
    letter-spacing: .02em !important;
  }
  html:root:root body .ft-v2 .ft-brand-desc {
    font-size: 11.5px !important;
    line-height: 1.45 !important;
    margin-bottom: 9px !important;
  }
  html:root:root body .ft-v2 .ft-badges span {
    font-size: 11px !important;
    padding: 3px 10px !important;
  }
  /* 聯絡列 */
  html:root:root body .ft-v2 .ft-contact .ft-c-line {
    font-size: 12px !important;
    line-height: 1.45 !important;
  }
  html:root:root body .ft-v2 .ft-contact .ft-c-note { font-size: 11px !important; }  /* 底欄：12px */
  html:root:root body .ft-v2 .ft-bottom { font-size: 12px !important; }
  html:root:root body .ft-v2 .ft-copy { font-size: 12px !important; }
  html:root:root body .ft-v2 .ft-legal a { font-size: 12px !important; }
}
/* 移動端（≤768）：同為小字號 + 行距同步收緊 */
@media (max-width: 768px) {
  html:root:root body .footer {
    padding-top: 22px !important;
    padding-bottom: 18px !important;
  }
  html:root:root body .ft-v2 .ft-col .ft-h { font-size: 12px !important; }  html:root:root body .ft-v2 .ft-links { gap: 4px !important; }
  html:root:root body .ft-v2 .ft-links li { font-size: 13px !important; line-height: 1.3 !important; }
  html:root:root body .ft-v2 .ft-links a { font-size: 13px !important; line-height: 1.3 !important; }
  html:root:root body .ft-v2 .ft-brand-name { font-size: 14px !important; }
  html:root:root body .ft-v2 .ft-brand-desc { font-size: 11.5px !important; line-height: 1.45 !important; }
  html:root:root body .ft-v2 .ft-badges span { font-size: 11px !important; padding: 3px 10px !important; }
  html:root:root body .ft-v2 .ft-contact .ft-c-line { font-size: 12px !important; line-height: 1.45 !important; }
  html:root:root body .ft-v2 .ft-contact .ft-c-note { font-size: 11px !important; }  html:root:root body .ft-v2 .ft-copy,
  html:root:root body .ft-v2 .ft-legal a { font-size: 12px !important; }
  /* 移動端觸控行高再收（40/42 → 30px，仍高於 WCAG 24px 最小目標） */
  html:root:root body .ft-v2 .ft-col:nth-of-type(2) .ft-links a,
  html:root:root body .ft-v2 .ft-col:nth-of-type(3) .ft-links a { min-height: 30px !important; }
  html:root:root body .ft-v2 .ft-contact li { min-height: 28px !important; }
  html:root:root body .ft-v2 .ft-badges { gap: 5px !important; }
}

/* 9.12 修復 Module 93「三欄等高拉伸」造成的行距不均與列內留白（2026-10-08）
   根因：Module 93 把 全站導航/客戶服務/聯絡渠道 三欄強制 align-self:stretch
   + .ft-links flex:1 1 auto，網格 align-content 預設 stretch → 把整欄多餘
   高度攤進每一行：客戶服務（5 項）行距被撐到 ~43px、全站導航（8 項）僅
   ~30px，觀感「字有大有小、間距不均、列底大片留白」。
   修法：欄高改自然高度（頂對齊），連結網格取消行拉伸，行距全列統一。 */
html:root:root body .ft-v2 .ft-cols > .ft-col {
  align-self: start !important;
  height: auto !important;
}
html:root:root body .ft-v2 .ft-cols > .ft-col .ft-links {
  flex: 0 0 auto !important;
  align-content: start !important;
}
/* Module 93 客戶服務列的殘留特例一律歸全局統一值
   （原特例：font-size 15px / line-height 1.7 / gap 14px / color rgba(255,255,255,.88)）
   color 未歸一會令該列五項呈「亮白」，與其餘列米金 #CFC9BD 併看即「字體不一致」。 */
html:root:root body .ft-v2 .ft-col:nth-of-type(3) .ft-links { gap: 6px !important; }
html:root:root body .ft-v2 .ft-col:nth-of-type(3) .ft-links a {
  font-size: 13px !important;
  line-height: 1.3 !important;
  color: #CFC9BD !important;
  font-weight: 400 !important;
}
/* 保險：任何欄的連結一律鎖全局字色/字重，杜絕單欄殘留特例 */
html:root:root body .ft-v2 .ft-col:not(.ft-col-brand) .ft-links a {
  color: #CFC9BD !important;
  font-weight: 400 !important;
}
html:root:root body .ft-v2 .ft-col:nth-of-type(3) .ft-links a:hover,
html:root:root body .ft-v2 .ft-col:not(.ft-col-brand) .ft-links a:hover {
  color: #E5CC8A !important;
}

/* 9.13 頁腳欄位「視覺均分」+ 基線對齊（2026-10-08）
   問題：品牌列 325px 寬且描述文字填滿整欄，鏈接列窄（文字僅佔欄寬一小半），
        等寬 fr 分配後實測「視覺間隙」＝品牌簡介→全站導航僅 32px，
        而導航→客服→聯絡約 155-190px，觀感嚴重不均（導航貼死公司簡介）。
   修法：欄寬改「內容自適應 + 兩端對齊」——品牌列封頂 320px、聯絡列封頂
        270px，中間兩列貼合內容，剩餘空間於三處平均分配；
        實測視覺間隙 ≈ 118/124/118px（近完全均勻），導航列右移約 80px。
   附：品牌列首行與各欄第一項鏈接基線對齊（原品牌描述起始高 14px）。
   僅作用於四欄同排的桌面斷點 ≥1181px（≤1180 品牌列獨佔整行，不干擾）。 */
@media (min-width: 1181px) {
  html:root:root body .ft-v2 .ft-cols {
    grid-template-columns: minmax(0, 320px) auto auto minmax(0, 270px) !important;
    justify-content: space-between !important;
    column-gap: 56px !important;
  }
  /* 品牌名與各欄標題「同款頭部」：金下線 + 同節距，
     令品牌簡介自然與各欄第一項鏈接基線對齊（原相差 14px），
     英文頁（多一行名副標）落差亦由 66px 收至最小。 */
  html:root:root body .ft-v2 .ft-brand-name {
    padding-bottom: 8px !important;
    border-bottom: 1px solid rgba(201,168,76,.26) !important;
    margin-bottom: 9px !important;
  }
  html:root:root body .ft-v2 .ft-brand-en { margin-bottom: 4px !important; }
}

/* ─────────────────────────────────────────────────────────────
   10. 移動端：進一步收緊但不破壞可點區域
   ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  html:root:root body .section-padding:has(+ .section-padding) { padding-bottom: 10px !important; }
  html:root:root body .section-padding + .section-padding { padding-top: 10px !important; }
  html:root:root body .section-header-center { margin-bottom: 12px !important; }
  html:root:root body .section-header-center h2::after,
  html:root:root body .section-header-center .section-title::after { width: 44px; height: 2px; }
  html:root:root body .art-hero h1::after { width: 54px; margin-top: 10px; }
}

/* ─────────────────────────────────────────────────────────────
   11. 全站留白治理（2026-10-08 · 用戶指定「收緊間距、減少大量留白」）
   ─────────────────────────────────────────────────────────────
   第 1 步（已完成）：對設計系統的間距值做全站統一收斂——
     垂直 padding −38%、垂直 margin −38%、gap −40%（雙軸），
     並同步收斂 clamp()/calc()/var() 內的流體間距，以及
     --section-padding / --hsst-card-gap / --gy / --gx 等間距變數。
   本節（第 2 步）處理「手調層」殘留的、與新比例尺不一致的大值，
   把區塊縱向節奏統一鎖定，避免逐頁樣式各自為政。

   ⚠ 作用域：本節 11.1–11.5 一律限定「桌面 ≥769px」。
     premium-20260902.css 自帶一套 ≤768px 的手調密度層，且 hero 的
     padding-top / margin-top 是「成對」為 fixed 導航讓位而調（如
     padding-top:44px + margin-top:-35px），單獨覆寫 padding 會讓導航
     壓住標題，故此處完全不碰移動端，移動端只在 11.6 統一下調節距。

   新縱向節奏基準（桌面）：
     普通區塊        上下 20px（原 27–40px）
     相鄰區塊折疊     16px（上下相加 32px，原 54–80px）
     英雄區 hero      48 / 40px（原 62 / 57px）
     深色帶／CTA      36 / 24px
   ───────────────────────────────────────────────────────────── */
@media (min-width: 769px) {

  /* 11.1 普通區塊：統一 20px 縱向節奏
     （#main-content > section:first-child 的「導航讓位」規則帶 id，
       特異性更高，不受本條影響，首屏仍正確留出 header 高度） */
  html:root:root body .section-padding {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
  /* 刻意歸零的變體與「視頻前置區」須保留作者原意（原值帶 !important，
     特異性低於本節，若不在此重申會被上面的 20px 蓋掉） */
  html:root:root body .section-padding.pt-0 { padding-top: 0 !important; }
  html:root:root body .section-padding.pb-0 { padding-bottom: 0 !important; }
  html:root:root body .before-video { padding-bottom: 0 !important; }

  /* 11.2 頁面級 hero：縮短上下留白（原 96/88/62/57px）
     ⚠ .news-hero / .solution-hero / .project-hero / .honors-hero 屬
       「流血式 hero」——style-202605042143.css 對它們下了
         margin-top: calc(-1 * var(--nav-height))
       把它們上移到固定導航底下，因此其 padding-top 是「為導航讓位」
       的值，只能改 padding-bottom，動 padding-top 會令導航壓住標題
       （實測 news.html 由 h1 頂 48px 變 32px，導航底 48px 即壓字）。 */
  html:root:root body .product-hero {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  html:root:root body .faqv2-hero {
    padding-top: 40px !important;
    padding-bottom: 32px !important;
  }
  html:root:root body .sample-hero {
    padding-top: 32px !important;
    padding-bottom: 20px !important;
  }
  html:root:root body .page-hero,
  html:root:root body .hsst-cmp-page-hero {
    padding-top: 30px !important;
    padding-bottom: 24px !important;
  }
  /* 流血式 hero：只收下內距，上內距還原為縮放前的「導航讓位」值
     （.news-hero 原 padding: 48px 0 24px，導航實高 48px → 讓位值恰為 48px；
       被縮放成 32px 後導航會壓住 H1，故在此固定回 48px） */
  html:root:root body .news-hero {
    padding-top: 48px !important;
    padding-bottom: 20px !important;
  }
  html:root:root body .solution-hero,
  html:root:root body .honors-hero {
    padding-bottom: 20px !important;
  }
  html:root:root body .section-padding.before-video,
  html:root:root body .tight-section.before-video {
    padding-top: 24px !important;
  }

  /* 11.3 工程案例 v2 版式（fluid clamp 值同步下調一檔） */
  html:root:root body .v2-gallery {
    padding-top: 40px !important;
    padding-bottom: 20px !important;
  }
  html:root:root body .v2-record { padding-top: 36px !important; padding-bottom: 36px !important; }
  html:root:root body .v2-quote { padding-top: 38px !important; padding-bottom: 38px !important; }
  html:root:root body .v2-spot-in { padding-top: 34px !important; padding-bottom: 34px !important; }
  html:root:root body .v2-hero-content { padding-top: 52px !important; padding-bottom: 38px !important; }
  html:root:root body .v2-hero-full { min-height: 480px !important; }

  /* 11.4 其他帶狀區塊與卡片容器 */
  html:root:root body .tight-section { padding-top: 12px !important; padding-bottom: 12px !important; }
  html:root:root body .client-logo-section,
  html:root:root body .timeline-section,
  html:root:root body .surface-treatment-section { padding-top: 20px !important; padding-bottom: 20px !important; }
  html:root:root body .faqv2-cta { padding-top: 24px !important; padding-bottom: 24px !important; }
  html:root:root body .news-spotlight-info { padding-top: 24px !important; padding-bottom: 24px !important; }
  html:root:root body .guide-grid { padding-top: 22px !important; padding-bottom: 8px !important; }
  html:root:root body .timeline,
  html:root:root body .about-text-block { padding-top: 20px !important; padding-bottom: 18px !important; }
  html:root:root body .container.text-center,
  html:root:root body .sample-form-container { padding-top: 30px !important; padding-bottom: 30px !important; }

  /* 11.5 標題與清單的縱向節奏一併收緊（原 16–20px 下邊距） */
  html:root:root body .section-header-center { margin-bottom: 14px !important; }
  html:root:root body .section-header-center h2,
  html:root:root body .section-title,
  html:root:root body .art-h2 { margin-bottom: 10px !important; }
  html:root:root body .section-header-center p.sub,
  html:root:root body .section-header-center .sub { margin-top: 0 !important; }
}

/* 11.6 移動端：只統一下調「區塊節距」與標題節奏，
   不碰 hero 的 padding/margin 讓位配對（見本節說明） */
@media (max-width: 768px) {
  html:root:root body .section-padding {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }
  html:root:root body .section-padding.pt-0 { padding-top: 0 !important; }
  html:root:root body .section-padding.pb-0 { padding-bottom: 0 !important; }
  html:root:root body .before-video { padding-bottom: 0 !important; }
  html:root:root body .container.text-center,
  html:root:root body .sample-form-container { padding-top: 20px !important; padding-bottom: 20px !important; }
  html:root:root body .section-header-center { margin-bottom: 10px !important; }
}

/* ==========================================================================
   Module 100 — 首頁場景卡／關於頁影片帶／工程項目首屏：文字「可見性」終局修復
   （2026-10-09，用戶回報「為什麼手機端不可見？所有頁面內容缺少」）
   ──────────────────────────────────────────────────────────────────────────
   以逐元素裁剪審計（量測「文字可見高度 ÷ 自然高度」，並以 1440px 完整可見
   為對照基準）＋ 分段滾動像素取樣（避開 fullPage 截圖把視口拉長造成的座標
   錯位）定位，共確認 5 類真實缺陷：

   A【手機端文字被裁＝內容消失】index.html / en/index.html
     premium-20260902.css 的 @media(max-width:768px) 把
     .scenarios-grid-hs .scenario-card 鎖成 aspect-ratio:4/3（橫向）；
     390px 兩欄時卡片僅 177×133px，而 overlay 內容需 ~237px。
     實測可見度：h3 標題 -5.97、金色副標 -1.61（100% 被 overflow:hidden
     裁掉）、描述 0.40–0.71（缺 29–60%）。同元素 1440px 全部 1.00。
     → 手機端改「圖片帶 + 說明面板」自適應高度，內容永不被裁。

   B【卡片文字無可靠襯底，同批卡 CR 1.17–7.8 亂跳】同頁
     卡片底為照片而文字色固定：暗照片區 h3 #14130F 疊底 L=0.058 → CR 1.91；
     p.scenario-desc 疊底 0.027 → CR 1.17；金色副標疊淺底 0.877 → CR 1.45。
     桌機同樣中招。→ overlay 改穩定淺米襯底，文字改可讀色階。

   C【關於頁影片帶深底深字】about.html / en/about.html 各 5 處
     .about-hero-video-section（147px 視頻帶疊
     .about-video-overlay rgba(26,26,46,.25→.65)），內容仍為
     h1/h2 #14130F、p #444、.section-subtitle #B8860B
     → 實測 CR 1.10–1.41。→ 文字改暖白／暖金，遮罩加深並補陰影。

   D【工程項目首屏主標題被全站 h1 規則壓成黑字】projects.html / en/projects.html
     projects-v2.css 原給 .v2-hero-full h1 #F4F1EA（暖白），被
     premium-20260902.css 的 `body.premium h1{color:var(--pv-ink)!important}`
     壓成 #14130F，疊在 .v2-hero-shade 深色漸層（實測底 L≈0.021）→ CR 1.26，
     手機與桌面皆不可見。→ 於本層以更高特異性還原暖白。

   E【全站金色小標籤文字對比不足】.product-section-title .label /
     .section-header-center .label / .info-card-label / .advantage-card-label /
     .contact-core-card-label / .contact-section-num / .faqv2-cat-count /
     .news-category / .tech-value / .ht-year / .rs-hot / .section-subtitle
     字色 #D4AF37／#C9A84C 壓在 #F5F0EB 淺底 → CR 僅 1.60–1.95（WCAG AA 內文
     需 4.5）。→ 僅把「當作文字」的金色降到 --hsst-gold-ink:#8A6A1F
     （對 #F5F0EB 實測 CR 4.51）；品牌主金 --color-accent、描邊、圖標、
     漸層一律不動，維持既有視覺調性。
   ========================================================================== */

:root { --hsst-gold-ink: #8A6A1F; }

/* ---------- A + B：首頁「應用場景」卡片：先保可見，再保可讀 ---------- */

/* B-1 襯底：依用戶鐵律「零遮罩／零暗化」——徹底移除淺米面板（它本質是罩住圖底的遮罩，
   削弱背後圖片可見性），改為「圖上直接疊字、零背景、零陰影」；字色由 data-hsst-tone 決定
   （暗底→暖白／淺金；亮底→深墨／深青銅），圖片 100% 完整可見。 */
html:root:root body .scenarios-grid-hs .scenario-card .scenario-card-overlay {
  background: transparent !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
/* 預設 + 亮底：深墨標題／深青銅副文／深金 CTA（圖底偏亮，深字對比足） */
html:root:root body .scenarios-grid-hs .scenario-card .scenario-card-overlay h3 { color:#14130F !important; }
html:root:root body .scenarios-grid-hs .scenario-card .scenario-card-overlay p,
html:root:root body .scenarios-grid-hs .scenario-card .scenario-card-overlay p.scenario-desc,
html:root:root body .scenarios-grid-hs .scenario-card .scenario-card-overlay p.scenario-desc-en { color:#4A4741 !important; }
html:root:root body .scenarios-grid-hs .scenario-card .scenario-card-overlay .scenario-cta { color:var(--hsst-gold-ink) !important; }
/* 暗底：暖白標題／淺金副文與 CTA（圖底偏暗，亮字才跳得出） */
html:root:root body .scenarios-grid-hs .scenario-card[data-hsst-tone="dark"] .scenario-card-overlay h3 { color:#FFFDF6 !important; }
html:root:root body .scenarios-grid-hs .scenario-card[data-hsst-tone="dark"] .scenario-card-overlay p,
html:root:root body .scenarios-grid-hs .scenario-card[data-hsst-tone="dark"] .scenario-card-overlay p.scenario-desc,
html:root:root body .scenarios-grid-hs .scenario-card[data-hsst-tone="dark"] .scenario-card-overlay p.scenario-desc-en { color:#F0CE86 !important; }
html:root:root body .scenarios-grid-hs .scenario-card[data-hsst-tone="dark"] .scenario-card-overlay .scenario-cta { color:#F0CE86 !important; }
/* 觸控裝置無 hover：把 hover 才顯形的 CTA／標題位移改為常駐，免手機端內容缺失 */
@media (hover: none) {
  html:root:root body .scenarios-grid-hs .scenario-card .scenario-card-overlay .scenario-cta {
    opacity: 1 !important;
    transform: none !important;
  }
  html:root:root body .scenarios-grid-hs .scenario-card .scenario-card-overlay h3 {
    transform: none !important;
  }
}

/* A 手機端：圖片帶 + 說明面板，卡片高度隨內容自適應（永不裁切） */
@media (max-width: 768px) {
  html:root:root body .scenarios-grid-hs > .scenario-card {
    aspect-ratio: auto !important;
    min-height: 0 !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    background: #FAF8F5 !important;
  }
  html:root:root body .scenarios-grid-hs > .scenario-card > .scenario-card-bg {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 auto !important;
    height: 104px !important;
  }
  html:root:root body .scenarios-grid-hs > .scenario-card > .scenario-card-overlay {
    position: relative !important;
    inset: auto !important;
    flex: 1 1 auto !important;
    justify-content: flex-start !important;
    background: transparent !important;   /* 手機端圖在上、文字面板在下，圖已完整顯示，無需遮罩 */
    padding: 9px 11px 12px !important;
  }
  /* 手機端文字位於淺色面板（非圖上），一律深墨／深青銅，不受 tone 影響 */
  html:root:root body .scenarios-grid-hs > .scenario-card > .scenario-card-overlay h3 {
    color: #14130F !important;
    transform: none !important;
    margin-bottom: 2px !important;
  }
  html:root:root body .scenarios-grid-hs > .scenario-card > .scenario-card-overlay p,
  html:root:root body .scenarios-grid-hs > .scenario-card > .scenario-card-overlay p.scenario-desc,
  html:root:root body .scenarios-grid-hs > .scenario-card > .scenario-card-overlay p.scenario-desc-en {
    color: #4A4741 !important;
  }
  html:root:root body .scenarios-grid-hs > .scenario-card > .scenario-card-overlay .scenario-cta {
    color: var(--hsst-gold-ink) !important;
  }
}

/* ---------- C：關於頁影片帶（每頁 5 處）：依用戶鐵律移除暗遮罩，改 tone 字色 ---------- */
html:root:root body .about-hero-video-section .about-video-overlay {
  background: transparent !important;
}
/* 暗底影片 → 暖白標題 + 淺金副文 */
html:root:root body .about-hero-video-section[data-hsst-tone="dark"] .about-video-content,
html:root:root body .about-hero-video-section[data-hsst-tone="dark"] .about-video-content h1,
html:root:root body .about-hero-video-section[data-hsst-tone="dark"] .about-video-content h2,
html:root:root body .about-hero-video-section[data-hsst-tone="dark"] .about-video-content h3 {
  color: #FFFDF6 !important; text-shadow: none !important;
}
html:root:root body .about-hero-video-section[data-hsst-tone="dark"] .about-video-content p,
html:root:root body .about-hero-video-section[data-hsst-tone="dark"] .about-video-content .section-subtitle {
  color: #F0CE86 !important; text-shadow: none !important;
}
/* 亮底影片 → 深墨標題 + 深金副文 */
html:root:root body .about-hero-video-section[data-hsst-tone="light"] .about-video-content,
html:root:root body .about-hero-video-section[data-hsst-tone="light"] .about-video-content h1,
html:root:root body .about-hero-video-section[data-hsst-tone="light"] .about-video-content h2,
html:root:root body .about-hero-video-section[data-hsst-tone="light"] .about-video-content h3 {
  color: #14130F !important; text-shadow: none !important;
}
html:root:root body .about-hero-video-section[data-hsst-tone="light"] .about-video-content p,
html:root:root body .about-hero-video-section[data-hsst-tone="light"] .about-video-content .section-subtitle {
  color: var(--hsst-gold-ink) !important; text-shadow: none !important;
}

/* ---------- D：工程項目首屏主標題還原暖白 ---------- */
html:root:root body .v2-hero-full h1 { color: #F4F1EA !important; }
html:root:root body .v2-hero-full h1 em { color: #C2A25E !important; }
html:root:root body .v2-hero-full .v2-kicker { color: #E0C07A !important; }

/* ---------- E：全站「金色小標籤」文字改用可讀色階（對 #F5F0EB CR 4.51） ---------- */
html:root:root body .product-section-title .label,
html:root:root body .section-header-center .label,
html:root:root body .info-card-label,
html:root:root body .advantage-card-label,
html:root:root body .contact-core-card-label,
html:root:root body .contact-section-num,
html:root:root body .faqv2-cat-count,
html:root:root body .news-category,
html:root:root body .tech-value,
html:root:root body .ht-year,
html:root:root body .rs-hot,
html:root:root body .sample-form-section-title,
html:root:root body .section-subtitle {
  color: var(--hsst-gold-ink) !important;
}
/* E 的例外：深色承托面內的 .section-subtitle 必須保持暖金（否則被壓暗成不可讀） */
html:root:root body .dark-section .section-subtitle,
html:root:root body .section-dark .section-subtitle,
html:root:root body .v2-hero-full .section-subtitle,
html:root:root body .about-hero-video-section .section-subtitle,
html:root:root body .product-hero .section-subtitle,
html:root:root body .cs2-hero .section-subtitle,
html:root:root body .page-hero .section-subtitle {
  color: #F0CE86 !important;
}

/* ==========================================================================
   Module 101 — 分類頁系列卡 .eng-var 手機端「內容被裁」修復（2026-10-09）
   ──────────────────────────────────────────────────────────────────────────
   影響：22 頁（中英各 11 頁）／共 210 卡（實測：中文 105 卡、英文 105 卡）——
     products/ 與 en/products/ 下的 white-marble(14)、beige-marble(14)、
     grey-marble(14)、black-marble(5)、granite-collection(14)、
     travertine-sandstone(6)、luxury-stone(6)、engineered-stone(13)、
     custom-craft(6)、marble-furniture(7)、new-arrivals(6)。

   根因（Module 75 引入浮層，Module 78 的手機護欄未覆蓋此分支）：
   ① 縱向裁切 —— Module 75 把 .eng-var-meta 改為「圖片底部絕對定位浮層」
      （position:absolute; left:0; right:0; bottom:0），浮層自底向上長出。
      ≤560px 圖片轉 1:1，390px 兩欄時卡片僅 177px，而浮層內容需 204px
      → 浮層頂端超出卡片 28px，被 .is-ready > .eng-var{overflow:hidden} 裁掉。
      實測（en/products/custom-craft.html 首卡，量「可見 ÷ 自然」）：
        360px  卡片 164×164  浮層 204  頂裁 41px  品名可見率 0.10
        390px  卡片 177×177  浮層 204  頂裁 28px  品名可見率 0.46
        430px  卡片 197×197  浮層 204  頂裁  8px  品名可見率 1.00
        480px 起才不再裁切。
      對照 1440px：卡片 417×313 / 浮層 152px，可見率 1.00 → 純手機缺陷。
   ② 橫向裁切 —— .hsst-spec-chips 為 flex column + align-items:flex-start，
      使子項 .vsc-param-row 依 max-content 撐開（不受容器寬約束），
      flex-wrap:wrap 永不觸發 → 規格膠囊右緣溢出卡片後被 overflow:hidden 切斷
      （「Machining Precision ±0.2 m…」「Minimum in…」等被切半句）。
      溢出量隨視寬：360px 122px、390px 109px、430px 89px、480px 64px、
      520px 50px、560px 30px、620px 3px、700px 才歸零。

   修法：
   A. 讓規格列撐滿容器寬（align-items:stretch + width:100%），使 flex-wrap
      真正生效、膠囊自然折行 —— 全寬適用，於寬螢幕無視覺差異（本就未溢出）。
   B. ≤620px 將浮層脫離圖片、回復「圖上文下」的白底說明區文檔流，並同步
      關閉深色漸層襯底、字色轉深墨 —— 沿用本檔 Module 100 對首頁場景卡與
      premium-20260902.css Module 78 ≤430px 護欄的同一口徑，補上該護欄
      漏掉的 .eng-var-meta 分支。斷點取 620px（＝橫向溢出歸零前的最寬值），
      確保「膠囊折行後浮層長高」在任何手機／小平板寬度下都不再頂出卡片。
   ========================================================================== */

/* ---- A. 規格膠囊不得溢出卡片（全寬適用）---- */
/* 關鍵：浮層本身是 column flex + align-items:flex-start（Module 75），
   會讓子項 .hsst-spec-chips 依 max-content 撐開（實測 390px 時 275px vs
   卡片 177px）→ 必須先把浮層與膠囊列都改成「撐滿容器寬」，折行才會生效。 */
html:root:root body .eng-vars-list.is-ready .eng-var-meta {
  align-items: stretch !important;
}
html:root:root body .eng-vars-list.is-ready .hsst-spec-chips {
  width: 100% !important;
  align-items: stretch !important;
}
html:root:root body .eng-vars-list.is-ready .vsc-param-row {
  width: 100% !important;
  min-width: 0 !important;
}
html:root:root body .eng-vars-list.is-ready .hsst-spec-chip {
  max-width: 100% !important;
  /* 膠囊本體是 inline-flex（預設 nowrap），b + span 不會折行 → 文字穿出
     膠囊邊框後被卡片 overflow:hidden 切斷。開啟折行才能真正收進卡片。*/
  flex-wrap: wrap !important;
}
/* 值位（span）原本鎖 white-space:nowrap（premium-20260902.css:6824，
   為讓「±0.2 mm」不斷行）；但英文頁把整段描述放在值位
   （如「Machining thickness 10–30 mm」），nowrap + flex 項預設
   min-width:auto 使其無法收縮 → 實測 197px 撐破 149px 膠囊、被卡片裁掉。
   改為「需要時才斷行」，短數值不受影響。*/
html:root:root body .eng-vars-list.is-ready .hsst-spec-chip span {
  white-space: normal !important;
  min-width: 0 !important;
  overflow-wrap: break-word !important;
}

/* ---- B. ≤620px：浮層降級為「圖上文下」文檔流，內容永不被裁 ---- */
@media (max-width: 620px) {
  /* 浮層回到文檔流、改白底說明區（卡片底色 #faf8f4，接縫一致） */
  html:root:root body .eng-vars-list.is-ready .eng-var-meta {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    background: #FAF8F4 !important;
    padding: 11px 13px 13px !important;
    gap: 5px !important;
    z-index: auto !important;
  }
  /* 深色漸層襯底只在浮層情境需要 → 關閉 */
  html:root:root body .eng-vars-list.is-ready .eng-var-meta::before {
    display: none !important;
  }
  /* 字色：白底上轉深墨／深金（品名 #14130F、序號與英文副名 #8A6A1F）*/
  html:root:root body .eng-vars-list.is-ready .eng-var-name {
    color: #14130F !important;
  }
  html:root:root body .eng-vars-list.is-ready .eng-var-idx {
    color: #8A6A1F !important;
  }
  html:root:root body .eng-vars-list.is-ready .eng-var-name-en {
    color: #8A6A1F !important;
  }
  /* 參數膠囊同步轉「白底深字」（沿用 Module 66／78 既有白底 chip 規範） */
  html:root:root body .eng-vars-list.is-ready .hsst-spec-chip {
    background: #F6F3EC !important;
    border-color: #E0DBD0 !important;
    color: #14130F !important;
  }
  html:root:root body .eng-vars-list.is-ready .hsst-spec-chip b {
    color: #6B6558 !important;
  }
  html:root:root body .eng-vars-list.is-ready .hsst-spec-chip span {
    color: #14130F !important;
  }
}

/* ==========================================================================
   Module 102 — 工程石材 ev-card 族（4 頁 / 84 卡）手機端「內容被裁」修復（2026-10-09）
   ──────────────────────────────────────────────────────────────────────────
   影響：products/ 與 en/products/ 下的 project-stone.html（24 卡＝6 類工程石
   + 18 類工程製品）與 engineering-stone-varieties.html（18 卡），共 84 卡。
   即用戶追問的「工程石材下的 6+18 系列」所在頁面。

   根因（與 Module 101 同源，但屬另一套卡片）：
   ① 橫向 —— .vsc-cap 內 .hsst-spec-chips 依 max-content 撐開，且值位 span 鎖
      white-space:nowrap ＋ flex 項 min-width:auto 無法收縮 → 規格膠囊文字穿出
      卡片右緣被 a.v2-series-card.ev-card{overflow:hidden} 切斷。
      實測溢出量：360px 113–131px、390px 101–119px、430px 81–99px、
      480px 56–74px、560px 22–40px、620px 0–10px、700px 起歸零。
   ② 縱向 —— .vsc-cap 基礎樣式即 position:absolute（premium-20260902.css:1068），
      ≤700px 更以 top:0 ＋ flex 底部對齊「鋪滿整卡」；當浮層內容高於卡片時，
      內容只能向上溢出而被卡片裁掉。既有解法（Module 74 C5）只做到 ≤430px
      「卡片放棄固定比例、隨浮層長高」，431–700px 這段落無保護。

   修法：
   A. 規格列／膠囊改撐滿容器寬 ＋ 值位允許必要時斷行 → 折行收進卡片（全寬適用）。
   B. 卡片改「網格疊放」：圖片與浮層同佔同一格（grid-area:1/1/2/2），行高取兩者
      較大值 —— 浮層高於圖片時卡片自動長高、圖片被拉滿整卡，內容永不再被裁。
      此做法於 900 / 1180 / 1440px（中英四頁）實測 0 裁切，故全寬度統一採用，
      取代僅覆蓋 ≤700px 的舊 flex 方案（規則單一化，避免兩套佈局互相打架）。
   ========================================================================== */

/* ---- A. 規格膠囊不得溢出卡片（全寬適用）---- */
html:root:root body a.v2-series-card.ev-card .vsc-cap,
html:root:root body a.v2-series-card.ev-card .vsc-cap .hsst-spec-chips,
html:root:root body a.v2-series-card.ev-card .vsc-cap .vsc-param-row {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
html:root:root body a.v2-series-card.ev-card .vsc-cap {
  align-items: stretch !important;
}
html:root:root body a.v2-series-card.ev-card .vsc-cap .hsst-spec-chips {
  align-items: stretch !important;
}
html:root:root body a.v2-series-card.ev-card .vsc-cap .hsst-spec-chip {
  max-width: 100% !important;
  flex-wrap: wrap !important;
}
html:root:root body a.v2-series-card.ev-card .vsc-cap .hsst-spec-chip span {
  white-space: normal !important;
  min-width: 0 !important;
  overflow-wrap: break-word !important;
}

/* ---- B. 網格疊放：浮層高於圖片時卡片自動長高（全寬適用）----
   圖片與浮層同佔 grid-area:1/1/2/2；行高 = max(圖片高, 浮層高)。
   浮層 align-self:end → 貼齊卡片底部（沿用原本「文字浮於圖上底部」的視覺），
   一旦浮層比圖片高，卡片即隨之長高，浮層頂端不再被 overflow:hidden 裁掉。 */
html:root:root body a.v2-series-card.ev-card {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr !important;
  aspect-ratio: auto !important;
  min-height: 240px !important;
  align-items: stretch !important;
  overflow: hidden !important;
}
html:root:root body a.v2-series-card.ev-card > .vsc-img {
  grid-area: 1 / 1 / 2 / 2 !important;
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
}
html:root:root body a.v2-series-card.ev-card > .vsc-img img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  aspect-ratio: 3 / 2.2 !important;
}
html:root:root body a.v2-series-card.ev-card > .vsc-cap {
  grid-area: 1 / 1 / 2 / 2 !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  align-self: end !important;
  justify-self: stretch !important;
  z-index: 3 !important;
}

/* ==========================================================================
   Module 103 — 工程案例「項目概覽」資料欄 .cs2-facts 手機端改橫向緊湊（2026-10-09）
   ──────────────────────────────────────────────────────────────────────────
   影響：projects/ 與 en/projects/ 共 36 頁（中英各 18），每頁 8 格資料。
   根因：≤1024px 起由桌面 4 欄改成 2 欄 × 4 行縱向堆疊，每格 padding 21px/18px
   ＋ 24px 圖示 ＋ 24px 大字 → 手機端整塊高約 400px，豎向佔用大量空間。
   修法：≤1024px 保持 4 欄 × 2 行（與桌面同構、整塊橫向），格距與字級整體壓縮
   （圖示 18px＝裝飾圖示鐵律、數值 14/13px、標籤 12px＝全站字級體系）；
   ≤430px 再收格距。分隔線改按 4 欄重算（4n 無右線、第 5 格起加上緣線）。
   ========================================================================== */
@media (max-width: 1024px){
  html:root:root body .cs2-facts{ grid-template-columns: repeat(4,1fr) !important; }
  html:root:root body .cs2-fact{
    padding: 15px 10px 14px !important;
    border-right: 1px solid rgba(255,255,255,.07) !important;
    border-bottom: none !important;
  }
  html:root:root body .cs2-fact:nth-child(2){ border-right: 1px solid rgba(255,255,255,.07) !important; }
  html:root:root body .cs2-fact:nth-child(1),
  html:root:root body .cs2-fact:nth-child(2){ border-bottom: none !important; }
  html:root:root body .cs2-fact:nth-child(4n){ border-right: none !important; }
  html:root:root body .cs2-fact:nth-child(n+5){ border-top: 1px solid rgba(255,255,255,.07) !important; }
  html:root:root body .cs2-fact .ic{ font-size: 18px !important; }
  html:root:root body .cs2-fact .num{
    font-size: 14px !important; margin: 2px 0 1px !important;
    line-height: 1.3 !important; overflow-wrap: break-word !important;
  }
  html:root:root body .cs2-fact .lab{
    font-size: 12px !important; letter-spacing: .2px !important;
    line-height: 1.35 !important; overflow-wrap: break-word !important;
  }
}
@media (max-width: 640px){
  html:root:root body .cs2-fact{ padding: 13px 8px 12px !important; }
  html:root:root body .cs2-fact .num{ font-size: 13px !important; }
}
@media (max-width: 430px){
  html:root:root body .cs2-fact{ padding: 11px 5px 10px !important; }
}

/* ==========================================================================
   Module 104 — 全站「圖片疊字」統一終局規則（2026-10-09）
   用戶鐵律：疊在圖片表面的文字必須透亮、清晰可讀；嚴禁任何在文字下方／周圍
   產生陰影、遮罩或暗化效果的樣式（避免遮蓋或削弱背後圖片可見性）；
   所有圖片及其上的文字在任何頁面位置都完整、清晰地呈現。
   ──────────────────────────────────────────────────────────────────────────
   落實：① 徹底移除 Module 78 的暗化 ::before 襯底（eng-var / granite /
        vsc-cap）與 premium 的 cs2-gal .cap 暗漸層（首頁場景卡與關於頁影片帶
        已由 Module 100 處理為 transparent）；② 全部疊字 text-shadow /
        box-shadow:none；③ 以高特異性「依 data-hsst-tone 自適應字色」壓過
        Module 78 強制淺字，圖片 100% 完整保留。移動端白底說明區
        （Module 101 ≤620px、Module 78 ≤430px）仍由各自護欄以深墨字呈現，
        本模組不干預。
   ========================================================================== */

/* ---- 1. 移除所有暗化襯底（::before 暗漸層 + cs2 暗漸層背景）---- */
html:root:root body.premium .eng-vars-list.is-ready .eng-var-meta::before,
html:root:root body.premium .granite-variety-cap::before,
html:root:root body.premium .v2-series-card .vsc-cap::before,
html:root:root body.premium a.v2-series-card.ev-card .vsc-cap::before {
  display: none !important;
}
html:root:root body .cs2-gal .cap {
  background: transparent !important;
}

/* ---- 2. 全疊字零陰影（含參數膠囊）---- */
html:root:root body .eng-vars-list.is-ready .eng-var-name,
html:root:root body .eng-vars-list.is-ready .eng-var-idx,
html:root:root body .eng-vars-list.is-ready .eng-var-name-en,
html:root:root body .eng-vars-list.is-ready .hsst-spec-chip,
html:root:root body .eng-vars-list.is-ready .hsst-spec-chip b,
html:root:root body .eng-vars-list.is-ready .hsst-spec-chip span,
html:root:root body .granite-variety-cap,
html:root:root body a.v2-series-card.ev-card .vsc-cap,
html:root:root body a.v2-series-card.ev-card .vsc-cap b,
html:root:root body a.v2-series-card.ev-card .vsc-cap i,
html:root:root body a.v2-series-card.ev-card .vsc-cap .vsc-d,
html:root:root body a.v2-series-card.ev-card .hsst-spec-chip,
html:root:root body a.v2-series-card.ev-card .hsst-spec-chip b,
html:root:root body a.v2-series-card.ev-card .hsst-spec-chip span,
html:root:root body .cs2-gal .cap,
html:root:root body .cs2-gal .cap .no,
html:root:root body .cs2-gal .cap span {
  text-shadow: none !important;
  box-shadow: none !important;
}

/* ---- 3. 石材品種卡 granite-variety-cap（圖上疊字，全寬適用）---- */
html:root:root body .granite-variety-card[data-hsst-tone="light"] .granite-variety-cap { color:#0F0E0C !important; }
html:root:root body .granite-variety-card[data-hsst-tone="dark"]  .granite-variety-cap { color:#FFFFFF !important; }

/* ---- 4. 工程案例圖集 cs2-gal .cap（圖上疊字，全寬適用）---- */
html:root:root body .cs2-gal[data-hsst-tone="light"] .cap       { color:#0F0E0C !important; }
html:root:root body .cs2-gal[data-hsst-tone="light"] .cap .no   { color:#8A6A1F !important; }
html:root:root body .cs2-gal[data-hsst-tone="light"] .cap span { color:#3F3625 !important; }
html:root:root body .cs2-gal[data-hsst-tone="dark"]  .cap       { color:#FFFFFF !important; }
html:root:root body .cs2-gal[data-hsst-tone="dark"]  .cap .no   { color:#F0CE86 !important; }
html:root:root body .cs2-gal[data-hsst-tone="dark"]  .cap span { color:rgba(255,255,255,.88) !important; }

/* ---- 5. 分類頁系列卡 eng-var（圖上疊字，>620px；≤620px 白底區由 Module 101 處理）---- */
@media (min-width: 621px) {
  html:root:root body .eng-vars-list.is-ready .eng-var[data-hsst-tone="light"] .eng-var-name     { color:#0F0E0C !important; }
  html:root:root body .eng-vars-list.is-ready .eng-var[data-hsst-tone="light"] .eng-var-idx      { color:#3F3625 !important; }
  html:root:root body .eng-vars-list.is-ready .eng-var[data-hsst-tone="light"] .eng-var-name-en  { color:#3F3625 !important; }
  html:root:root body .eng-vars-list.is-ready .eng-var[data-hsst-tone="light"] .hsst-spec-chip   { color:#14130F !important; }
  html:root:root body .eng-vars-list.is-ready .eng-var[data-hsst-tone="light"] .hsst-spec-chip b { color:#6B6558 !important; }
  html:root:root body .eng-vars-list.is-ready .eng-var[data-hsst-tone="light"] .hsst-spec-chip span { color:#3F3625 !important; }
  html:root:root body .eng-vars-list.is-ready .eng-var[data-hsst-tone="dark"]  .eng-var-name     { color:#FFFFFF !important; }
  html:root:root body .eng-vars-list.is-ready .eng-var[data-hsst-tone="dark"]  .eng-var-idx      { color:#F5D896 !important; }
  html:root:root body .eng-vars-list.is-ready .eng-var[data-hsst-tone="dark"]  .eng-var-name-en  { color:rgba(255,255,255,.88) !important; }
  html:root:root body .eng-vars-list.is-ready .eng-var[data-hsst-tone="dark"]  .hsst-spec-chip   { color:#FFFFFF !important; }
  html:root:root body .eng-vars-list.is-ready .eng-var[data-hsst-tone="dark"]  .hsst-spec-chip b { color:rgba(255,255,255,.82) !important; }
  html:root:root body .eng-vars-list.is-ready .eng-var[data-hsst-tone="dark"]  .hsst-spec-chip span { color:rgba(255,255,255,.88) !important; }
}

/* ---- 6. 工程石材 ev-card vsc-cap（圖上疊字，>430px；≤430px 白底區由 Module 78 處理）---- */
@media (min-width: 431px) {
  html:root:root body a.v2-series-card.ev-card[data-hsst-tone="light"] .vsc-cap b       { color:#0F0E0C !important; }
  html:root:root body a.v2-series-card.ev-card[data-hsst-tone="light"] .vsc-cap i       { color:#3F3625 !important; }
  html:root:root body a.v2-series-card.ev-card[data-hsst-tone="light"] .vsc-cap .vsc-d   { color:#33302A !important; }
  html:root:root body a.v2-series-card.ev-card[data-hsst-tone="light"] .hsst-spec-chip      { background:rgba(250,248,245,.82) !important; border-color:rgba(20,18,15,.16) !important; color:#14130F !important; }
  html:root:root body a.v2-series-card.ev-card[data-hsst-tone="light"] .hsst-spec-chip b    { color:#6B6558 !important; }
  html:root:root body a.v2-series-card.ev-card[data-hsst-tone="light"] .hsst-spec-chip span { color:#3F3625 !important; }
  html:root:root body a.v2-series-card.ev-card[data-hsst-tone="dark"]  .vsc-cap b       { color:#FFFFFF !important; }
  html:root:root body a.v2-series-card.ev-card[data-hsst-tone="dark"]  .vsc-cap i       { color:#F5D896 !important; }
  html:root:root body a.v2-series-card.ev-card[data-hsst-tone="dark"]  .vsc-cap .vsc-d   { color:rgba(255,255,255,.92) !important; }
  html:root:root body a.v2-series-card.ev-card[data-hsst-tone="dark"]  .hsst-spec-chip      { background:rgba(20,18,15,.55) !important; border-color:rgba(255,255,255,.30) !important; color:#FFFFFF !important; }
  html:root:root body a.v2-series-card.ev-card[data-hsst-tone="dark"]  .hsst-spec-chip b    { color:rgba(255,255,255,.82) !important; }
  html:root:root body a.v2-series-card.ev-card[data-hsst-tone="dark"]  .hsst-spec-chip span { color:rgba(255,255,255,.88) !important; }
}

/* ═══ Module 105：公司歷程時間軸緊湊化（2026-10-10）══════════════
   範圍：#timeline 僅命中 about.html / en/about.html（honors/careers/
   technology 共用 .timeline-* 類但無此 id，零影響）。
   留白根因（實測）：項與項之間 = premium padding-bottom:18px +
   style margin-bottom:22px = 40px 垂直空隙（三端同）；desc 行高 1.75
   偏鬆；區塊上下 20px（桌面）/17+15px（手機）；末項後另有 42px。
   修法：項間距 40→10px、desc 行高 1.62、title/year 下距收緊、
   區塊內邊距 14/10，卡片高度整體收窄、對齊與左軸線/節點不變。 */
html:root:root body #timeline.timeline-section {
  padding: 14px 0 10px !important;
}
html:root:root body #timeline .timeline-item {
  padding: 0 0 10px 14px !important;
  margin: 0 !important;
}
html:root:root body #timeline .timeline-year {
  margin: 0 0 2px !important;
  line-height: 1.25 !important;
}
html:root:root body #timeline .timeline-title {
  margin: 0 0 2px !important;
  line-height: 1.35 !important;
}
html:root:root body #timeline .timeline-desc {
  line-height: 1.62 !important;
}
@media (max-width: 768px) {
  html:root:root body #timeline .timeline-item { padding-left: 40px !important; }
  html:root:root body #timeline .timeline-year { margin-bottom: 3px !important; }
}

/* ═══ Module 106：發展里程碑圖卡（.vtl-*）緊湊化（2026-10-10）═════
   範圍：#visual-timeline 僅命中 about.html / en/about.html。
   留白根因（實測）：flex/網格逐行拉伸至最高卡等高 → 短摘要卡按鈕下方
   死白 105–230px（桌面）、最多 355px（手機）；末卡摘要長達 9–28 行。
   修法：摘要 line-clamp 統一行數（完整信息在「詳細資料」展開層四段全文），
   圖 16/10→16/9、body 內邊距 12/18/15→10/14/12、軌道 gap 14→10、
   年份/標題下距收緊、按鈕瘦身。左軸線與節點定位不動。 */
html:root:root body #visual-timeline .visual-timeline { padding: 10px 0 !important; }
html:root:root body #visual-timeline .vtl-track { gap: 10px !important; padding: 6px 12px 22px !important; }
html:root:root body #visual-timeline .vtl-img { aspect-ratio: 16/9 !important; }
html:root:root body #visual-timeline .vtl-body { padding: 10px 14px 12px !important; }
html:root:root body #visual-timeline .vtl-year { margin-bottom: 4px !important; padding: 2px 12px !important; }
html:root:root body #visual-timeline .vtl-title { margin-bottom: 3px !important; }
html:root:root body #visual-timeline .vtl-desc {
  display: -webkit-box !important;
  -webkit-line-clamp: 4 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  line-height: 1.6 !important;
}
html:root:root body #visual-timeline .vtl-more { padding: 5px 14px !important; margin-top: 6px !important; margin-right: 14px !important; }
@media (max-width: 768px) {
  /* 手機不給軌道加水平內邊距，避免豎排卡片與左軸線/節點錯位 */
  html:root:root body #visual-timeline .vtl-track { padding: 6px 0 16px !important; }
  html:root:root body #visual-timeline .vtl-desc { -webkit-line-clamp: 5 !important; }
}