/* =========================================================
   construction.css（營造工程頁面專用｜乾淨版）
   Scope：body.page-construction
   ========================================================= */

body.page-construction{
  background: #f2f4f8;
  color: #222;
}

/* 主內容底部留白（避免貼太近 footer） */
body.page-construction .construction-main{
  padding: 0 0 10px;
}

/* =========================================================
   HERO（白底一致風格）
   ========================================================= */
body.page-construction .hero-construction{
  background: #fff;
  color: #222;
  padding: 56px 0 72px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

body.page-construction .hero-construction-inner{
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 32px;
  align-items: center;
}

/* HERO 標題 / 副標 */
body.page-construction .hero-construction .page-title{
  margin: 0 0 12px;
  font-size: 2rem;
  line-height: 1.35;
  letter-spacing: .02em;
  color: #111;
}

body.page-construction .hero-construction .page-subtitle{
  margin: 0 0 14px;
  max-width: 46rem;
  white-space: normal;
  font-size: 1.05rem;
  line-height: 1.85;
  color: #555;
}

body.page-construction .hero-fulltext p{
  margin: 0;
  font-size: .98rem;
  line-height: 1.9;
  color: #4b5563;
}

/* hero-highlight（膠囊標籤） */
body.page-construction .hero-highlight{
  display: inline-block;
  margin: 0 0 14px;
  padding: 7px 14px;
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .04em;
  border-radius: 999px;
  background: #eef2f7;
  color: var(--primary, #0d3b66);
}

/* 右側媒體區（✅ 修正：讓 badge 的 absolute 以此為基準） */
body.page-construction .hero-construction-media{
  position: relative;     /* ✅ 這行是修紅框跑位的關鍵 */
  padding-bottom: 28px;   /* 預留 badge 壓在照片下緣的空間 */
}

/* 照片卡片 */
body.page-construction .hero-photo-frame{
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 14px 34px rgba(0,0,0,.14);
}

body.page-construction .hero-photo-frame img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* ✅ Badge：固定在照片右下角（不再飛走） */
body.page-construction .hero-badge{
  position: absolute;
  right: 12px;
  bottom: 8px;            /* 不用負值最穩 */
  z-index: 3;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(242,244,248,.98);
  box-shadow: 0 12px 26px rgba(0,0,0,.18);
  white-space: nowrap;
}

body.page-construction .hero-badge .badge-label{
  font-weight: 800;
  color: var(--primary, #0d3b66);
  margin-right: 8px;
  letter-spacing: .06em;
  font-size: .9rem;
}

body.page-construction .hero-badge .badge-main{
  font-weight: 900;
  color: #111;
  font-size: .95rem;
}

/* =========================================================
   信任三要素 Trust Row（只保留一份）
   ========================================================= */
body.page-construction .trust-row--hero{
  margin: 14px 0 18px;
}

body.page-construction .trust-row{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

body.page-construction .trust-item{
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 14px 14px;
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

body.page-construction .trust-item--highlight{
  border-color: rgba(201,151,0,.45);
  background: linear-gradient(135deg, #fff, #fff7e6);
}

body.page-construction .trust-ico{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13,59,102,.08);
  border: 1px solid rgba(13,59,102,.12);
  flex: 0 0 auto;
}

/* SVG sprite icon */
body.page-construction .trust-icon{
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--primary, #0d3b66);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.page-construction .trust-icon--gold{
  stroke: var(--secondary, #c99700);
}

body.page-construction .trust-title{
  font-weight: 900;
  letter-spacing: .04em;
  color: var(--primary, #0d3b66);
  margin-bottom: 4px;
}

body.page-construction .trust-desc{
  font-size: 13px;
  color: #4b5563;
  line-height: 1.6;
}

/* =========================================================
   內文區段（白底卡片 + 交錯底色）
   ========================================================= */
body.page-construction .section-construction{
  padding: 20px 0;
}

body.page-construction .section-construction:nth-of-type(even){
  background: #f9f9fb;
}

/* section-inner 做卡片（你 HTML 已有 container 包住，這裡不要亂改寬） */
body.page-construction .section-inner{
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

body.page-construction .section-header-center{
  text-align: center;
  margin-bottom: 16px;
}

body.page-construction .section-title{
  
  font-size: 32px ;
  font-weight: 900;
  letter-spacing: .02em;
  color: var(--primary, #0d3b66);
}

body.page-construction .section-lead{
  margin: 0 auto;
  max-width: 1000px;
  color: #555;
  line-height: 1.9;
  font-size: 15px ;
}

body.page-construction .section-text p{
  margin: 0 0 12px;
  font-size: .98rem;
  line-height: 1.95;
  color: #374151;
}

/* 證照 / 對照圖 */
body.page-construction .license-image-wrap,
body.page-construction .level-compare-image-wrap{
  max-width: 980px;
  margin: 18px auto 0;
  text-align: center;
}

body.page-construction .license-image,
body.page-construction .level-compare-image{
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
}

body.page-construction .license-note,
body.page-construction .level-note{
  text-align: center;
  font-size: .9rem;
  margin-top: 10px;
  color: #6b7280;
}

/* =========================================================
   建設直營：左 tag / 右文字
   ========================================================= */
body.page-construction .section-direct-inner{
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 32px;
  align-items: flex-start;
}

body.page-construction .direct-tag-list{
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.page-construction .direct-tag-list li{
  font-size: .85rem;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #e5e7eb;
  white-space: nowrap;
}

/* =========================================================
   日本制震：左文 / 右 2x2 圖
   ========================================================= */
body.page-construction .section-tech-inner{
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}

body.page-construction .tech-image-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

body.page-construction .tech-image-item{
  margin: 0;
}

body.page-construction .tech-image-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 22px rgba(15,23,42,.14);
  background: #fff;
  display: block;
}

/* =========================================================
   RWD
   ========================================================= */
@media (max-width: 992px){
  body.page-construction .hero-construction-inner{
    grid-template-columns: 1fr;
    gap: 22px;
  }
  body.page-construction .hero-construction-media{
    order: -1;
  }

  body.page-construction .trust-row{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.page-construction .section-direct-inner,
  body.page-construction .section-tech-inner{
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

@media (max-width: 768px){
  body.page-construction .hero-construction{
    padding: 44px 0 56px;
  }

  body.page-construction .hero-construction .page-title{
    font-size: 1.45rem;
    line-height: 1.4;
  }

  body.page-construction .hero-construction .page-subtitle{
    font-size: .98rem;
  }

  /* 手機：badge 回到正常排版（最穩） */
  body.page-construction .hero-construction-media{
    padding-bottom: 0;
  }
  body.page-construction .hero-badge{
    position: static;
    margin-top: 12px;
    white-space: normal;
    text-align: center;
    border-radius: 16px;
  }

  body.page-construction .trust-row{
    grid-template-columns: 1fr;
  }

  body.page-construction .section-construction{
    padding: 56px 0;
  }

  body.page-construction .section-title{
    font-size: 1.1rem;
  }

  body.page-construction .tech-image-grid{
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Construction：手機左右留白保險（只影響營造工程頁）
   ========================================================= */
@media (max-width: 1024px){
  .page-construction .construction-main .container{
    padding-left: var(--wt-gutter, 16px);
    padding-right: var(--wt-gutter, 16px);
  }
}


/* =========================================================
   B 升級：敘事頁專用加強（不刪舊 CSS，直接追加）
   ========================================================= */

/* Story Intro：大留白＋雙欄，像「品牌主張」 */
body.page-construction .section-story-intro{
  padding: 24px 0 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f7f8fb 100%);
}

body.page-construction .story-intro-inner{
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 32px;
  align-items: center;
}

body.page-construction .story-intro-copy .section-title{
  font-size: 1.65rem;
}

body.page-construction .story-intro-copy .section-lead{
  margin : 0 ;
}

/* Hero Copy：讓原本的 hero 文字像「補充說明」而不是又一個 hero */
body.page-construction .section-hero-copy{
  padding: 10px 0  ;
  background: #f9f9fb;
}
body.page-construction .section-hero-copy .section-inner{
  border-radius: 20px;
}
body.page-construction .section-hero-copy .page-subtitle{
  margin: 0 0 10px;
  font-size: 1.02rem;
  line-height: 1.9;
  color: #374151;
}

/* Split Proof / Compare：建商常用的「左文右證據」版型 */
body.page-construction .section-split-proof,
body.page-construction .section-split-compare{
  padding: 20px 0;
}

body.page-construction .split-proof-inner,
body.page-construction .split-compare-inner{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
}

body.page-construction .split-proof-copy .license-note,
body.page-construction .split-compare-copy .level-note{
  margin-top: 10px;
  text-align: left;
}

/* 讓「比較圖」更像展示板 */
body.page-construction .section-split-compare .level-compare-image{
  border-radius: 18px;
}

/* 日本制震：加一點「科技段」的質感 */
body.page-construction .section-tech-premium{
  background: radial-gradient(1200px 500px at 20% 0%, rgba(13,59,102,.06), transparent 60%),
              #ffffff;
}

body.page-construction .section-tech-premium .section-inner{
  border-radius: 22px;
}

/* 建設直營：最後一段把文字變得更耐讀 */
body.page-construction .section-direct-premium{
  background: #f9f9fb;
}
body.page-construction .section-direct-premium .section-inner{
  border-radius: 22px;
}
body.page-construction .section-direct-premium .section-text p{
  font-size: 1rem;
  line-height: 1.5;
}

/* 結尾 Closing：一句話收斂 + CTA */
body.page-construction .section-closing{
  padding: 66px 0 86px;
  background: linear-gradient(180deg, #ffffff 0%, #f7f8fb 100%);
}
body.page-construction .closing-inner{
  text-align: center;
  border-radius: 24px;
  padding: 34px 22px;
}

body.page-construction .closing-title{
  margin: 0 0 10px;
  font-size: 1.7rem;
  letter-spacing: .02em;
  color: #111;
  font-weight: 900;
}
body.page-construction .closing-lead{
  margin: 0 auto 18px;
  max-width: 860px;
  color: #4b5563;
  line-height: 1.9;
  font-size: 1rem;
}

/* 這裡沿用你站內 btn 風格；若 base.css 沒有 btn，就補一個安全版本 */
body.page-construction .closing-actions{
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

body.page-construction .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .02em;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
}
body.page-construction .btn-primary{
  background: var(--primary, #0d3b66);
  color: #fff;
  border-color: transparent;
}
body.page-construction .btn-ghost{
  background: #fff;
  color: var(--primary, #0d3b66);
}

/* RWD：敘事段落在平板/手機變單欄 */
@media (max-width: 992px){
  body.page-construction .story-intro-inner,
  body.page-construction .split-proof-inner,
  body.page-construction .split-compare-inner{
    grid-template-columns: 1fr;
  }
  body.page-construction .story-intro-media{
    order: -1;
  }
  body.page-construction .split-compare-media{
    order: -1;
  }
}


/* =========================================================
   ✅ B-PLUS：Construction 品牌升級包（追加在 construction.css 最後）
   ========================================================= */
.page-construction{
  /* 材質白 + 香檳金（比亮金更像建商） */
  --wt-ink:#0b1220;
  --wt-ink2:#111827;
  --wt-muted:#6b7280;
  --wt-stone:#f6f2ea;   /* 暖石材白 */
  --wt-paper:#fbfaf7;   /* 紙感白 */
  --wt-mist:#f3f4f6;
  --wt-line: rgba(15,23,42,.10);
  --wt-gold:#c9a35b;    /* 香檳金 */
  --wt-gold2:#b88f3d;
  --wt-deep:#0b1a2a;    /* 深藍灰 */
  --wt-deep2:#0e2438;
}

/* 全頁底色：從 UI 白 → 材質白（立刻高級） */
body.page-construction{
  background: linear-gradient(180deg, var(--wt-paper) 0%, #f5f6fa 55%, var(--wt-paper) 100%);
  color: #111;
}

/* 標題字距與重量更像建商品牌 */
.page-construction .section-title,
.page-construction .hero-construction .page-title{
  letter-spacing: .02em;
}
.page-construction .section-lead{
  color:#4b5563;
}

/* =========================================================
   ① 權威深色情緒段（承諾牆）
   ========================================================= */
/* ✅ 覆蓋：wt-authority 改為「暖色權威段」，不再深色突兀 */
.page-construction .wt-authority{
  padding: 44px 0 48px;
  color: var(--wt-ink, #0b1220);
  background:
    radial-gradient(900px 260px at 15% 0%, rgba(201,163,91,.18), transparent 60%),
    radial-gradient(700px 240px at 85% 10%, rgba(13,59,102,.06), transparent 55%),
    linear-gradient(180deg, var(--wt-paper, #fbfaf7) 0%, #ffffff 100%);
  border-top: 1px solid rgba(15,23,42,.08);
  border-bottom: 1px solid rgba(15,23,42,.08);
}

.page-construction .wt-authority-kicker{
  color: rgba(11,18,32,.65);
}

.page-construction .wt-authority-title{
  color: var(--wt-ink, #0b1220);
  font-size: 1.65rem;
}

.page-construction .wt-authority-desc{
  color: rgba(11,18,32,.72);
}

.page-construction .wt-chip{
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15,23,42,.12);
  color: rgba(11,18,32,.78);
  backdrop-filter: blur(6px);
}

.page-construction .wt-chip--gold{
  background: linear-gradient(180deg, rgba(201,163,91,.22), rgba(201,163,91,.12));
  border-color: rgba(201,163,91,.42);
  color: var(--wt-ink, #0b1220);
}


/* =========================================================
   ② 甲級營造：從「卡片」升級為「認證章」主角
   ========================================================= */
.page-construction .wt-cert{
  border-radius: 22px;
  border: 1px solid rgba(15,23,42,.10);
  background:
    radial-gradient(700px 240px at 12% 0%, rgba(201,163,91,.14), transparent 55%),
    #fff;
}

.page-construction .wt-cert-head{
  display:flex;
  gap: 14px;
  align-items:flex-start;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(15,23,42,.08);
  margin-bottom: 14px;
}

.page-construction .wt-cert-titles .section-title{
  margin-top: 0;
}

/* 認證章（A 等級） */
.page-construction .wt-seal{
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  border-radius: 999px;
  position: relative;
  margin-top: 2px;
}
.page-construction .wt-seal-ring{
  position:absolute;
  inset:0;
  border-radius:999px;
  background:
    conic-gradient(from 220deg,
      rgba(201,163,91,.95),
      rgba(255,255,255,.35),
      rgba(201,163,91,.88),
      rgba(255,255,255,.25),
      rgba(201,163,91,.92)
    );
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.12));
}
.page-construction .wt-seal-core{
  position:absolute;
  inset: 7px;
  border-radius:999px;
  background: linear-gradient(180deg, #fff 0%, #fff7ea 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 950;
  color: #3b2a12;
  letter-spacing: .06em;
  border: 1px solid rgba(201,163,91,.35);
}

/* 證照圖更像展示板（加內框） */
.page-construction .license-image,
.page-construction .level-compare-image{
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.12);
  box-shadow: 0 18px 38px rgba(0,0,0,.14);
}

/* =========================================================
   ③ 日本制震：技術銘牌牆（像展示，不像文章）
   ========================================================= */
.page-construction .wt-plaque{
  display:flex;
  flex-direction:column;
  gap: 6px;
  margin-bottom: 10px;
}
.page-construction .wt-plaque-kicker{
  display:inline-flex;
  align-self:flex-start;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .14em;
  font-size: .72rem;
  color: rgba(11,18,32,.78);
  background: rgba(201,163,91,.14);
  border: 1px solid rgba(201,163,91,.30);
}

.page-construction .section-tech{
  background:
    radial-gradient(900px 320px at 85% 0%, rgba(13,59,102,.06), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
.page-construction .section-tech .section-inner{
  border-radius: 24px;
}

/* 圖牆更像「展板」：統一框感、角更大 */
.page-construction .tech-image-item img{
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 16px 30px rgba(15,23,42,.18);
}

/* =========================================================
   ④ Trust Row：把「甲級」做成真正的主視覺（有金色氣場）
   ========================================================= */
.page-construction .trust-item--highlight{
  border-color: rgba(201,163,91,.55);
  background:
    radial-gradient(260px 120px at 20% 0%, rgba(201,163,91,.18), transparent 60%),
    linear-gradient(135deg, #fff 0%, #fff7e6 100%);
  box-shadow: 0 16px 30px rgba(201,163,91,.18), 0 12px 24px rgba(15,23,42,.08);
}

/* =========================================================
   ⑤ 段落節奏：留白、分隔、卡片更像品牌版式
   ========================================================= */
.page-construction .section-construction{
  padding: 66px 0;
}
.page-construction .section-construction:nth-of-type(even){
  background: transparent; /* 改為由整頁材質底承擔，避免像模板 */
}

.page-construction .section-inner{
  border-radius: 22px;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 14px 34px rgba(0,0,0,.08);
}

/* =========================================================
   RWD
   ========================================================= */
@media (max-width: 992px){
  .page-construction .wt-authority-title{ font-size: 1.55rem; }
  .page-construction .wt-authority{ padding: 46px 0 52px; }
  .page-construction .wt-cert-head{ flex-direction: row; }
}
@media (max-width: 768px){
  .page-construction .wt-authority-title{ font-size: 1.35rem; }
  .page-construction .wt-chip{ font-size: .88rem; }
  .page-construction .wt-cert-head{ flex-direction: column; }
  .page-construction .wt-seal{ width: 52px; height: 52px; }
}


/* =========================================================
   ✅ B-PLUS v2：整頁層級/材質/配件升級（直接貼最後）
   ========================================================= */

/* 1) 全頁文字層級：標題更像建商、內文更耐讀 */
.page-construction .section-title{
  font-size: 1.62rem;
  line-height: 1.25;
  font-weight: 950;
  color: var(--primary, #0d3b66);
}

.page-construction .section-lead,
.page-construction .section-text p{
  color: rgba(17,24,39,.78);
  font-size: 1.02rem;
  line-height: 2.0;
}

/* 2) 卡片材質：從「白框卡」→「紙感卡＋細金線」(很關鍵) */
.page-construction .section-inner{
  background:
    radial-gradient(800px 260px at 10% 0%, rgba(201,163,91,.10), transparent 55%),
    #fff;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 22px;
  box-shadow:
    0 18px 46px rgba(15,23,42,.10);
}

/* 交錯段落不要再一律灰底，改成「段落間距＋細分隔」更精品 */
.page-construction .section-construction{
  padding: 62px 0;
}
.page-construction .section-construction:nth-of-type(even){
  background: transparent;
}

/* 3) Trust 卡：做出「一主兩輔」的層級，其他卡略降調 */
.page-construction .trust-item{
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 14px 30px rgba(15,23,42,.08);
}

.page-construction .trust-item:not(.trust-item--highlight){
  background: rgba(255,255,255,.78);
}

.page-construction .trust-item--highlight{
  border-color: rgba(201,163,91,.58);
  background:
    radial-gradient(260px 140px at 18% 0%, rgba(201,163,91,.22), transparent 60%),
    linear-gradient(135deg, #fff 0%, #fff7e6 100%);
  box-shadow:
    0 16px 34px rgba(201,163,91,.18),
    0 14px 30px rgba(15,23,42,.08);
}

/* 4) 證照章：再更像「認證物件」，而不是裝飾 */
.page-construction .wt-cert-head{
  align-items: center;
}
.page-construction .wt-seal{
  transform: translateY(2px);
}
.page-construction .wt-seal-core{
  font-size: 1.05rem;
}

/* 5) 圖片展示：給「展示框」內框，照片更像展板 */
.page-construction .license-image,
.page-construction .level-compare-image,
.page-construction .tech-image-item img{
  background: #fff;
  border: 1px solid rgba(15,23,42,.12);
  box-shadow: 0 20px 48px rgba(15,23,42,.16);
}

/* 6) 日本制震：圖牆更像展示牆（加外框與內距） */
.page-construction .section-tech .section-inner{
  padding: 26px;
}
.page-construction .tech-image-grid{
  gap: 14px;
}
.page-construction .tech-image-item{
  border-radius: 18px;
  overflow: hidden;
}

/* 7) 小配件（標籤）統一語氣：香檳金，不用亮金 */
.page-construction .hero-highlight{
  background: rgba(201,163,91,.14);
  color: rgba(11,18,32,.88);
  border: 1px solid rgba(201,163,91,.30);
}

/* 8) 收尾 CTA：更像建商，不要太像按鈕套件 */
.page-construction .closing-inner{
  background:
    radial-gradient(900px 260px at 20% 0%, rgba(201,163,91,.14), transparent 55%),
    #fff;
  border: 1px solid rgba(15,23,42,.10);
}

.page-construction .btn-primary{
  background: linear-gradient(180deg, var(--primary, #0d3b66), #0b2f52);
  box-shadow: 0 14px 30px rgba(13,59,102,.22);
}
.page-construction .btn-ghost{
  border-color: rgba(15,23,42,.16);
  background: rgba(255,255,255,.86);
}


/* ✅ 內嵌宣言：不再滿版色塊，用「編輯引言」 */
.page-construction .wt-manifesto{
  margin: 16px 0 18px;
  padding: 14px 16px;
  border-left: 4px solid rgba(201,163,91,.65);
  background: linear-gradient(180deg, rgba(201,163,91,.10), rgba(255,255,255,.75));
  border-radius: 14px;
}

.page-construction .wt-manifesto-quote{
  margin: 0 0 8px;
  font-weight: 950;
  letter-spacing: .02em;
  color: rgba(11,18,32,.92);
  font-size: 1.05rem;
}

.page-construction .wt-manifesto-meta{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  color: rgba(17,24,39,.68);
  font-weight: 800;
  font-size: .86rem;
}
.page-construction .wt-manifesto-meta .dot{
  opacity: .5;
}

/* ✅ Editorial：建設直營做成雜誌側欄版式 */
.page-construction .section-direct-inner{
  align-items: stretch;
  gap: 34px;
}

.page-construction .section-direct-aside{
  position: sticky;
  top: 96px;              /* 不會蓋到 header */
  align-self: start;
  padding-right: 18px;
  border-right: 1px solid rgba(15,23,42,.10);
}

.page-construction .wt-aside-kicker{
  margin: 0 0 10px;
  font-weight: 900;
  letter-spacing: .22em;
  font-size: .72rem;
  color: rgba(17,24,39,.55);
}

.page-construction .wt-rule{
  border: 0;
  height: 1px;
  background: rgba(15,23,42,.10);
  margin: 18px 0;
}

/* 手機不要 sticky */
@media (max-width: 992px){
  .page-construction .section-direct-aside{
    position: static;
    border-right: 0;
    padding-right: 0;
    border-bottom: 1px solid rgba(15,23,42,.10);
    padding-bottom: 14px;
  }
}


/* ✅ Editorial：日本制震做成「技術展示牆」 */
.page-construction .section-tech-inner{
  align-items: start;
}

.page-construction .section-tech-text{
  padding-top: 6px;
}

.page-construction .section-tech-text p{
  margin-bottom: 14px;
  max-width: 44rem;
}

.page-construction .tech-image-grid{
  gap: 14px;
  grid-template-columns: 1fr 1fr;
}

.page-construction .tech-image-item:nth-child(1){ transform: translateY(0); }
.page-construction .tech-image-item:nth-child(2){ transform: translateY(10px); }
.page-construction .tech-image-item:nth-child(3){ transform: translateY(6px); }
.page-construction .tech-image-item:nth-child(4){ transform: translateY(16px); }

.page-construction .tech-image-item img{
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(15,23,42,.18);
}

@media (max-width: 768px){
  .page-construction .tech-image-grid{
    grid-template-columns: 1fr;
  }
  .page-construction .tech-image-item{ transform: none !important; }
}

/* ✅ 破除卡片感：full-bleed 段落（滿寬展示，像提案頁） */
.page-construction .wt-full-bleed{
  padding: 56px 0;
  background: transparent;
}



.page-construction .wt-full-bleed .level-compare-image-wrap{
  max-width: 1120px;
}

.page-construction .wt-full-bleed .level-compare-image{
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(15,23,42,.22);
}

/* =========================================================
   ✅ Construction｜雜誌感最終包（貼在 construction.css 最底部）
   方向：溫潤高級、留白節奏、側欄導讀、引言、少卡片堆疊
   ========================================================= */

.page-construction{
  --wt-ink:#0b1220;
  --wt-muted: rgba(17,24,39,.72);
  --wt-soft: rgba(15,23,42,.10);
  --wt-paper:#fbfaf7;   /* 紙感白 */
  --wt-stone:#f6f2ea;   /* 暖石材白 */
  --wt-gold:#c9a35b;    /* 香檳金 */
  --wt-gold-soft: rgba(201,163,91,.30);
}

/* 全頁底：材質感（不要模板白） */
body.page-construction{
  background:
    radial-gradient(1200px 420px at 15% 0%, rgba(201,163,91,.09), transparent 60%),
    linear-gradient(180deg, var(--wt-paper) 0%, #f6f7fb 55%, var(--wt-paper) 100%);
  color: var(--wt-ink);
}

/* 主內容段落：用留白節奏，而不是每段都卡片 */
.page-construction .section-construction{
  padding: 58px 0;
}
.page-construction .section-construction:nth-of-type(even){
  background: transparent;
}

/* 標題層級更像建商（更重、更收斂） */
.page-construction .section-title{
  font-weight: 950;
  letter-spacing: .02em;
  line-height: 1.2;
  font-size: 1.58rem;
  color: var(--primary, #0d3b66);
}
.page-construction .section-lead{
  color: var(--wt-muted);
  line-height: 1.95;
  font-size: 1.02rem;
}
.page-construction .section-text p{
  color: var(--wt-muted);
  line-height: 2.05;
  font-size: 1.02rem;
}

/* 只保留「該留卡片的段」：預設 section-inner 不再一律白卡 */
.page-construction .section-inner{
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

/* 需要卡片質感的段（證照、直營、日本制震）才套用 */
.page-construction .section-license .section-inner,
.page-construction .section-direct .section-inner,
.page-construction .section-tech .section-inner,
.page-construction .section-hero-copy .section-inner,
.page-construction .section-closing .section-inner{
  background:
    radial-gradient(900px 260px at 12% 0%, rgba(201,163,91,.10), transparent 55%),
    #fff;
  border: 1px solid var(--wt-soft);
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 18px 46px rgba(15,23,42,.10);
}

/* ---------------------------------------------------------
   ✅ 內嵌宣言（雜誌引言）
   --------------------------------------------------------- */
.page-construction .wt-manifesto{
  margin: 14px 0 18px;
  padding: 14px 16px;
  border-left: 4px solid rgba(201,163,91,.65);
  background: linear-gradient(180deg, rgba(201,163,91,.10), rgba(255,255,255,.85));
  border-radius: 14px;
}
.page-construction .wt-manifesto-quote{
  margin: 0 0 8px;
  font-weight: 950;
  letter-spacing: .02em;
  color: rgba(11,18,32,.92);
  font-size: 1.05rem;
}
.page-construction .wt-manifesto-meta{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  color: rgba(17,24,39,.68);
  font-weight: 850;
  font-size: .86rem;
}
.page-construction .wt-manifesto-meta .dot{ opacity:.5; }

/* ---------------------------------------------------------
   ✅ Trust Row：更像“導覽卡”，一主兩輔
   --------------------------------------------------------- */
.page-construction .trust-item{
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 14px 30px rgba(15,23,42,.08);
}
.page-construction .trust-item:not(.trust-item--highlight){
  background: rgba(255,255,255,.78);
}
.page-construction .trust-item--highlight{
  border-color: rgba(201,163,91,.55);
  background:
    radial-gradient(260px 140px at 18% 0%, rgba(201,163,91,.22), transparent 60%),
    linear-gradient(135deg, #fff 0%, #fff7e6 100%);
  box-shadow:
    0 16px 34px rgba(201,163,91,.18),
    0 14px 30px rgba(15,23,42,.08);
}

/* hero-highlight 改成香檳金紙感標籤 */
.page-construction .hero-highlight{
  background: rgba(201,163,91,.14);
  color: rgba(11,18,32,.88);
  border: 1px solid rgba(201,163,91,.30);
}

/* ---------------------------------------------------------
   ✅ 證照段：變成“認證展示”，圖像像展板
   --------------------------------------------------------- */
.page-construction .license-image,
.page-construction .level-compare-image{
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.12);
  box-shadow: 0 22px 54px rgba(15,23,42,.16);
  background: #fff;
}

/* ---------------------------------------------------------
   ✅ 建設直營：雜誌側欄導讀（不是卡片堆）
   --------------------------------------------------------- */
.page-construction .section-direct-inner{
  align-items: stretch;
  gap: 34px;
}
.page-construction .section-direct-aside{
  position: sticky;
  top: 96px;
  align-self: start;
  padding-right: 18px;
  border-right: 1px solid rgba(15,23,42,.10);
}
.page-construction .wt-aside-kicker{
  margin: 0 0 10px;
  font-weight: 900;
  letter-spacing: .22em;
  font-size: .72rem;
  color: rgba(17,24,39,.55);
}
.page-construction .wt-rule{
  border: 0;
  height: 1px;
  background: rgba(15,23,42,.10);
  margin: 18px 0;
}

/* ---------------------------------------------------------
   ✅ 日本制震：圖牆“展示感”＋錯落（雜誌排版）
   --------------------------------------------------------- */
.page-construction .section-tech .section-inner{
  padding: 26px;
}
.page-construction .tech-image-grid{
  gap: 14px;
}
.page-construction .tech-image-item:nth-child(2){ transform: translateY(10px); }
.page-construction .tech-image-item:nth-child(3){ transform: translateY(6px); }
.page-construction .tech-image-item:nth-child(4){ transform: translateY(16px); }
.page-construction .tech-image-item img{
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.12);
  box-shadow: 0 20px 48px rgba(15,23,42,.18);
  background: #fff;
}

/* ---------------------------------------------------------
   ✅ 破除“全卡片感”：full-bleed 展示段（滿寬像提案頁）
   --------------------------------------------------------- */
.page-construction .wt-full-bleed{
  padding: 54px 0;
}

.page-construction .wt-full-bleed .level-compare-image-wrap{
  max-width: 1120px;
}
.page-construction .wt-full-bleed .level-compare-image{
  border-radius: 22px;
  box-shadow: 0 26px 64px rgba(15,23,42,.22);
}

/* ---------------------------------------------------------
   ✅ 收尾 CTA：更像建商，不像套件
   --------------------------------------------------------- */
.page-construction .closing-inner{
  background:
    radial-gradient(900px 260px at 20% 0%, rgba(201,163,91,.14), transparent 55%),
    #fff;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 24px;
}
.page-construction .btn-primary{
  background: linear-gradient(180deg, var(--primary, #0d3b66), #0b2f52);
  box-shadow: 0 14px 30px rgba(13,59,102,.22);
  border: 0;
}
.page-construction .btn-ghost{
  background: rgba(255,255,255,.90);
  border: 1px solid rgba(15,23,42,.16);
}

/* ---------------------------------------------------------
   RWD：手機不要 sticky、圖牆不要錯落
   --------------------------------------------------------- */
@media (max-width: 992px){
  .page-construction .section-direct-aside{
    position: static;
    border-right: 0;
    padding-right: 0;
    border-bottom: 1px solid rgba(15,23,42,.10);
    padding-bottom: 14px;
  }
}
@media (max-width: 768px){
  .page-construction .tech-image-item{ transform: none !important; }
}

/* =========================================================
   ✅ Hero 雜誌封面感（貼在 construction.css 最底部）
   目標：封面內框、角落註記、照片質感、badge 變雜誌標籤
   ========================================================= */

/* 讓右側媒體區像「封面卡」 */
.page-construction .hero-construction-media{
  position: relative;
  padding-bottom: 0; /* 取消你原本為 badge 預留的空間 */
}

/* 封面框：外框（紙感） + 內框（香檳金細線） */
.page-construction .hero-photo-frame{
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 26px 64px rgba(15,23,42,.18);
}

/* 內框細金線（很關鍵：瞬間像精品印刷品） */
 

/* 左上角小註記（雜誌 caption） */
.page-construction .hero-photo-frame::before{
  content:"WU-TAI · CONSTRUCTION";
  position:absolute;
  left: 14px;
  top: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: .72rem;
  letter-spacing: .18em;
  color: rgba(255,255,255,.92);
  background: rgba(11,18,32,.55);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.18);
  pointer-events:none;
}

/* 圖像質感：微暖、微對比（不用重修圖也會更像封面） */
.page-construction .hero-photo-frame img{
  width: 100%;
  height: auto;
  display:block;
  object-fit: cover;
  transform: scale(1.01); /* 非常輕微，避免邊緣鋸齒 */
  filter: contrast(1.06) saturate(1.03) brightness(1.02);
}

/* badge 改成「雜誌標籤」，貼在照片下緣 */
.page-construction .hero-badge{
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 3;

  padding: 10px 14px;
  border-radius: 16px;

  background: rgba(255,255,255,.82);
  border: 1px solid rgba(15,23,42,.14);
  box-shadow: 0 18px 42px rgba(15,23,42,.16);

  white-space: nowrap;
  backdrop-filter: blur(8px);
}

/* badge 兩段字：更像雜誌排版 */
.page-construction .hero-badge .badge-label{
  display:inline-block;
  font-weight: 950;
  letter-spacing: .10em;
  font-size: .78rem;
  color: rgba(11,18,32,.78);
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(201,163,91,.16);
  border: 1px solid rgba(201,163,91,.30);
  margin-right: 8px;
}

.page-construction .hero-badge .badge-main{
  font-weight: 950;
  font-size: .95rem;
  letter-spacing: .02em;
  color: rgba(11,18,32,.92);
}

/* 右側封面區的留白更像雜誌版式 */
@media (min-width: 993px){
  .page-construction .hero-construction-inner{
    align-items: start;
  }
  .page-construction .hero-construction-media{
    transform: translateY(2px);
  }
}

/* 手機：badge 不要壓圖太多，回到下方（閱讀友善） */
@media (max-width: 768px){
  .page-construction .hero-photo-frame::before{
    left: 12px;
    top: 10px;
    font-size: .68rem;
  }
  .page-construction .hero-photo-frame::after{
    inset: 10px;
  }
  .page-construction .hero-badge{
    position: static;
    margin-top: 12px;
    text-align: center;
    border-radius: 16px;
    white-space: normal;
  }
}

/* 1) 讓 hero-copy 這段不要白卡 */
.page-construction .section-hero-copy .section-inner{
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

/* 讓它像雜誌導語：左側一條細線＋大行距 */
.page-construction .section-hero-copy .section-text{
  border-left: 3px solid rgba(201,163,91,.55);
  padding-left: 16px;
}

/* 2) Trust row 改成雜誌資訊欄：不要卡片 */
.page-construction .trust-row--hero{
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr; /* 讓甲級略重 */
  gap: 0;
  border-top: 1px solid rgba(15,23,42,.10);
  border-bottom: 1px solid rgba(15,23,42,.10);
}

.page-construction .trust-row--hero .trust-item{
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 14px 14px;
}

.page-construction .trust-row--hero .trust-item + .trust-item{
  border-left: 1px solid rgba(15,23,42,.10);
}

/* 高級感靠字：標題更重、描述更淡 */
.page-construction .trust-title{ font-weight: 950; }
.page-construction .trust-desc{ color: rgba(17,24,39,.65); }


/* 3) CTA 不要套件 pill：主行動像雜誌連結 */
.page-construction .closing-actions{
  gap: 14px;
}

.page-construction .closing-actions .btn-primary{
  border-radius: 14px;
  padding: 12px 16px;
  background: transparent;
  color: var(--primary, #0d3b66);
  border: 1px solid rgba(13,59,102,.22);
  box-shadow: none;
}

.page-construction .closing-actions .btn-primary::after{
  content:" →";
  font-weight: 900;
}

.page-construction .closing-actions .btn-ghost{
  border-radius: 14px;
  padding: 12px 16px;
  background: rgba(255,255,255,.75);
}

/* 只限 Hero Copy */



/* 明確取消 License 段任何左線 */
.page-construction .section-license .section-text,
.page-construction .section-license{
  border-left: 0 !important;
}


/* ================================
   甲級證照段：整組置中（章 + 標題）
   ================================ */
.page-construction .section-license .wt-cert-head{
  display: flex;
  justify-content: center;   /* ← 關鍵：整組置中 */
  align-items: center;
  text-align: center;        /* ← 文字置中 */
  gap: 16px;
}

/* 標題區不要再限制左對齊寬度 */
.page-construction .section-license .wt-cert-titles{
  max-width: 720px;          /* 控制閱讀寬度 */
}

/* 說明文字置中後，行距稍微放鬆會更高級 */
.page-construction .section-license .section-lead{
  margin: 8px auto 0;
    max-width: 520px;
}

@media (max-width: 768px){
  .page-construction .section-license .wt-cert-head{
    flex-direction: column;
    gap: 10px;
  }
}

/* 雜誌導語置中版（保留左線） */
.page-construction .section-hero-copy.is-promise .section-text{
  max-width: 1100px;
  margin: 0 auto;              /* 區塊置中 */
  text-align: left;            /* 保持閱讀性 */
}

/* 左線位置微調，避免太貼邊 */
.page-construction .section-hero-copy.is-promise .section-text{
  border-left: 3px solid rgba(201,163,91,.55);
  padding-left: 20px;
}

/* =========================================================
   中央宣言 + 細金分隔線（建商高級版）
   ========================================================= */

.page-construction .promise-center{
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  
}

/* 細金分隔線 */
.page-construction .promise-divider{
  width: 72px;
  height: 1px;
  margin: 22px auto;
  background: linear-gradient(
    90deg,
    rgba(201,163,91,0),
    rgba(201,163,91,.85),
    rgba(201,163,91,0)
  );
}

/* 宣言文字 */
.page-construction .promise-text p{
  margin: 0 0 14px;
  font-size: 1.05rem;
  line-height: 2.1;
  color: rgba(17,24,39,.78);
  letter-spacing: .02em;
}

/* 第一段稍微重一點（主張） */
.page-construction .promise-text p:first-child{
  font-weight: 700;
  color: rgba(11,18,32,.88);
}

/* 手機微調 */
@media (max-width: 768px){
  .page-construction .promise-center{
    padding: 0 6px;
  }

  .page-construction .promise-divider{
    width: 56px;
    margin: 8px auto;
  }

  .page-construction .promise-text p{
    font-size: 1rem;
    line-height: 2.0;
  }
}

 



/* === 驗證：章節標題一定要變 === */
/* 承諾段主標（精品權威版） */
.page-construction .section-title--promise{
  margin: 0 auto 0px;
  max-width: 980px;
  text-align: center;

  font-weight: 900;
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  letter-spacing: .10em;
  line-height: 1.14;
  color: #0b2f55;

  position: relative;
   

  /* 浮雕感 */
  text-shadow:
    0 1px 0 rgba(255,255,255,.9),
    0 22px 40px rgba(11,47,85,.18);
}
 
/* 標題前香檳金定位點 */
/* ===============================
   承諾段標題：A 徽章語言（實體元素版，保證顯示）
   =============================== */

/* 讓徽章跟標題變成同一個群組 */
.section-title--promise,
.page-construction .section-title--promise{
  display: inline-flex;
  align-items: center;
  gap: 14px;

  margin: 0 auto 40px;
  text-align: center;

  font-weight: 900;
  font-size: clamp(2.2rem, 3.6vw, 3.0rem);
  letter-spacing: .08em;
  line-height: 1.15;
  color: #0b2f55;
}

/* 徽章本體：雙層圈 + 中央金點（無文字） */
/* 取代你原本的 .promise-crest */
/* =====================================
   承諾宣言章：完全沿用 A 證照章外圈
   ===================================== */
.section-title--promise{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  justify-content: center;

  margin: 0 auto 40px;
  text-align: center;

  font-weight: 900;
  font-size: clamp(2.2rem, 3.6vw, 3.0rem);
  letter-spacing: .08em;
  line-height: 1.15;
  color: #0b2f55;
}

/* === 同 A 的圓章本體 === */
.section-title--promise .promise-crest{
  width: 52px;
  height: 52px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;

  /* A 的金白漸層外圈 */
  background:
    radial-gradient(circle at 30% 30%,
      #ffffff 0%,
      #f6efe3 45%,
      #e7d3a8 70%,
      #c9a35b 100%
    );

  box-shadow:
    inset 0 0 0 6px #ffffff,            /* 內白圈 */
    inset 0 0 0 10px rgba(201,163,91,.55), /* 金色內環 */
    0 14px 28px rgba(0,0,0,.18);        /* 外陰影 */
}

/* === 中央核心：把 A 換成「金色實心點」 === */
.section-title--promise .promise-crest::after{
  content:"";
  position:absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);

  width: 8px;
  height: 8px;
  border-radius: 50%;

  background: #c9a35b;
  box-shadow:
    0 0 0 4px rgba(201,163,91,.18); /* 柔光暈 */
}


/*-------------------------------------------------------------------複製-----------------------------------------*/
/* 認證章（A 等級） */
.page-construction .wt-seal2{
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  border-radius: 999px;
  position: relative;
  margin-top: 2px;
}
.page-construction .wt-seal2-ring{
  position:absolute;
  inset:0;
  border-radius:999px;
  background:
    conic-gradient(from 220deg,
      rgba(201,163,91,.95),
      rgba(255,255,255,.35),
      rgba(201,163,91,.88),
      rgba(255,255,255,.25),
      rgba(201,163,91,.92)
    );
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.12));
}
.page-construction .wt-seal2-core{
  position:absolute;
  inset: 7px;
  border-radius:999px;
  background: linear-gradient(180deg, #fff 0%, #fff7ea 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 950;
  color: #3b2a12;
  letter-spacing: .06em;
  border: 1px solid rgba(201,163,91,.35);
}

/* 證照圖更像展示板（加內框） */
.page-construction .license-image,
.page-construction .level-compare-image{
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.12);
  box-shadow: 0 18px 38px rgba(0,0,0,.14);
}

/* =========================================================
   RWD
   ========================================================= */
@media (max-width: 992px){
  .page-construction .wt-authority-title{ font-size: 1.55rem; }
  .page-construction .wt-authority{ padding: 46px 0 52px; }
  .page-construction .wt-cert2-head{ flex-direction: row; }
}
@media (max-width: 768px){
  .page-construction .wt-authority-title{ font-size: 1.35rem; }
  .page-construction .wt-chip{ font-size: .88rem; }
  .page-construction .wt-cert2-head{ flex-direction: column; }
  .page-construction .wt-seal2{ width: 52px; height: 52px; }
}

/* 4) 證照章：再更像「認證物件」，而不是裝飾 */
.page-construction .wt-cert2-head{
  align-items: center;
  margin: 8px ;
}
.page-construction .wt-seal2{
  transform: translateY(2px);
}
.page-construction .wt-seal2-core{
  font-size: 1.5rem;
  font-weight: 800;
}


/*----------------------------------------------------*/
/* B章 + 標題：整組水平置中 */
.wt-cert2-head{
  display: flex;
  align-items: center;
  justify-content: center;   /* 關鍵 */
  gap: 18px;
  text-align: center;
}

.wt-cert2-titles{
  text-align: center;
}


/* 承諾段落：整塊置中 */
.is-promise .promise{
  max-width: 1100px;      /* 控制閱讀寬度 */
  margin: 0 auto 0;  /* auto = 水平置中 */
  text-align: center;   /* 若你想要全置中 */
}

/* ===============================
   承諾段｜手機版：章在上、字在下
   =============================== */
@media (max-width: 640px){

  /* 上方：章 + 標題改成直向堆疊 */
  .wt-cert2-head{
    flex-direction: column;
    gap: 12px;
  }

  /* 章置中（保險） */
  .wt-seal2{
    margin: 0 auto;
  }

  /* 標題：手機版更好讀 */
  .wt-cert2-titles .section-title{
    text-align: center;
    font-size: clamp(1.7rem, 6vw, 2.1rem);
    line-height: 1.25;
    letter-spacing: .06em;
    margin: 0;
  }

  /* 下方宣言：手機留白與行距 */
  .is-promise .promise{
    max-width: 100%;
    margin: 0 auto 0;
    padding: 0 16px;     /* 手機左右留白 */
    text-align: left;    /* 手機段落建議左對齊更易讀 */
  }

  .is-promise .promise p{
    margin: 0 auto 0 ;
    line-height: 1.5;
  }
}


/* 修正 B章 + 標題的垂直視覺置中 */
.wt-cert2-head{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.wt-cert2-titles{
  display: flex;
  align-items: center;
}

.wt-cert2-titles .section-title{
  margin: 0;
  line-height: 1.15;
  position: relative;
  top: 1px;   /* 視覺微調，可自行 +1 / 0 */
}


/*------------------------*/
/* 宣言文字 */
/* ===============================
   承諾宣言文字｜型錄級排版
   =============================== */
/* ===============================
   承諾宣言｜引言（Quotation）風格
   =============================== */

.is-promise .promise p{
   margin: 16px 0 ;
  font-size: 20px ;
  line-height: 1.5;
  color: rgba(17,24,39,.78);
  letter-spacing: .02em;
}

.is-promise .promise p:first-child{
  font-weight: 700;
  color: rgba(11,18,32,.88);
}






@media (max-width: 640px){
  .is-promise .promise{
    padding: 0 16px;
    margin-top: 24px;
    text-align: center;
  }

  .is-promise .promise p{
    font-size: 0.8rem;
    line-height: 1.5;
    text-align: center;
  }
}

/*--------------------------------------------*/
/* =========================================================
   建設直營｜宣言牆（非卡片式）
   ========================================================= */

.section-direct-premium{
  background: linear-gradient(
    180deg,
    #f7f5f0 0%,
    #fbfaf7 100%
  );
  padding: clamp(64px, 8vw, 110px) 0;
}

/* 內容橫向拉開，不像卡片 */
.section-direct-inner{
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: flex-start;
}

/* 左側不是卡，是「章節標誌」 */
.section-direct-aside{
  position: relative;
  padding-left: 18px;
}

/* 左側細直線，取代卡片邊框 */
.section-direct-aside::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:2px;
  background: linear-gradient(
    to bottom,
    rgba(201,151,0,.55),
    rgba(201,151,0,.15)
  );
}

.section-direct-aside .section-title{
  font-size: 1.7rem;
  letter-spacing: .08em;
  margin-bottom: 6px;
}

.wt-aside-kicker{
  font-size: .72rem;
  letter-spacing: .24em;
  color: rgba(0,0,0,.45);
  margin-bottom: 28px;
}

/* tag 改成「註腳式」而不是 badge */
.direct-tag-list{
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: .88rem;
  line-height: 1.9;
  color: rgba(0,0,0,.65);
}

.direct-tag-list li::before{
  content:"— ";
  color: rgba(201,151,0,.9);
}

/* 右側：長文宣言，不要卡 */
.section-direct-text{
  font-size: 1.05rem;
  line-height: 2.1;
  color: rgba(17,24,39,.82);
}

.section-direct-text p{
  margin: 0;
}

/* 中間分隔線＝呼吸，不是切卡 */
.section-direct-text .wt-rule{
  border: none;
  height: 1px;
  margin: 36px 0;
  background: linear-gradient(
    to right,
    transparent,
    rgba(0,0,0,.25),
    transparent
  );
}

@media (max-width: 768px){
  .section-direct-inner{
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .section-direct-aside{
    padding-left: 0;
  }

  .section-direct-aside::before{
    display:none;
  }

  .section-direct-aside .section-title{
    font-size: 1.5rem;
  }

  .direct-tag-list{
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    font-size: .8rem;
  }

  .direct-tag-list li::before{
    display:none;
  }
}

/*--------------------------------------------------------*/
/* =========================================================
   建設直營｜工法宣言段（非卡片、非欄位）
   ========================================================= */
/* =========================================================
   建設直營｜去卡片，只留背景
   ========================================================= */
body.page-construction .section-direct-premium{
  background: #f9f9fb;   /* 你現在 DevTools 看到的色 */
  padding: 96px 0;       /* 用 section 自己撐高度 */
}


.page-construction .section-construction:nth-of-type(even){
  background: transparent;
}
body.page-construction .section-direct-premium{
  background-color: #f9f9fb !important;
}

/*---------------------------------------------------*/
/* =========================================================
   建設直營｜單欄宣言版（標題置中、標籤橫排）
   ========================================================= */

/* 整段：只有背景，不是卡片 */
body.page-construction .section-direct-premium{
  background: #f9f9fb;
  padding: clamp(64px, 8vw, 110px) 0;
}

/* 移除任何卡片容器感 */
body.page-construction .section-direct-premium .section-inner.section-direct-inner{
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  border: 0;
  padding: 0;
}

/* ❌ 取消左右欄（原本 grid / flex）→ 單欄 */
body.page-construction .section-direct-premium .section-direct-inner{
  display: block;
  max-width: 900px;     /* 文字閱讀寬度 */
  margin: 0 auto;
}

/* ===============================
   標題區：置中
   =============================== */
body.page-construction .section-direct-premium .section-direct-aside{
  text-align: center;
  margin-bottom: 28px;
  padding: 0;
}

/*----------------------------------------------------------------------------*/
/* =========================================================
   建設直營｜章節標題式 Section Header
   ========================================================= */

/* 整段章節背景 */
body.page-construction .section-direct-premium{
  background: linear-gradient(
    180deg,
    #f7f8f6 0%,
    #ffffff 100%
  );
  padding: clamp(70px, 9vw, 120px) 0;
}

/* 清掉卡片 */
body.page-construction .section-direct-premium .section-inner{
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

/* 內容寬度 */
body.page-construction .section-direct-premium .section-direct-inner{
  max-width: 1100px;
  margin: 0 auto;
}

/* ===============================
   Section Header（關鍵）
   =============================== */
body.page-construction .section-direct-premium .section-direct-aside{
  text-align: center;
  margin-bottom: clamp(36px, 6vw, 64px);
}

/* 英文小標 */
body.page-construction .section-direct-premium .wt-aside-kicker{
  font-size: .7rem;
  letter-spacing: .32em;
  color: rgba(0,0,0,.45);
  margin-bottom: 10px;
}

/* 中文主標 */
body.page-construction .section-direct-premium .section-title{
  font-size: clamp(1.9rem, 3vw, 2.4rem);
  letter-spacing: .16em;
  margin-bottom: 22px;
}

/* 下方金色細線（像 Featured Projects） */
body.page-construction .section-direct-premium .section-direct-aside::after{
  content:"";
  display:block;
  width: 56px;
  height: 2px;
  margin: 0 auto 26px;
  background: linear-gradient(
    to right,
    rgba(201,151,0,.35),
    rgba(201,151,0,.9),
    rgba(201,151,0,.35)
  );
}

/* ===============================
   四個關鍵標示：橫向排
   =============================== */
body.page-construction .section-direct-premium .direct-tag-list{
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 20px;
  padding: 0;
  margin: 0;
}

body.page-construction .section-direct-premium .direct-tag-list li{
  font-size: .9rem;
  letter-spacing: .08em;
  color: rgba(0,0,0,.7);
}

/* ===============================
   內文區塊
   =============================== */
body.page-construction .section-direct-premium .section-direct-text{
  max-width: 860px;
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 2.15;
  color: rgba(17,24,39,.82);
}

body.page-construction .section-direct-premium .section-direct-text .wt-rule{
  border: none;
  height: 1px;
  margin: 42px auto;
  background: linear-gradient(
    to right,
    transparent,
    rgba(0,0,0,.25),
    transparent
  );
}

/*--------------------------------------------------------*/
.wt-cert3-titles{
  text-align: center;
}

/* ===============================
   承諾段｜手機版：章在上、字在下
   =============================== */
@media (max-width: 640px){

  /* 上方：章 + 標題改成直向堆疊 */
  .wt-cert3-head{
    flex-direction: column;
    gap: 12px;
  }



  /* 標題：手機版更好讀 */
  .wt-cert3-titles .section-title{
    text-align: center;
    font-size: clamp(1.7rem, 6vw, 2.1rem);
    line-height: 1.25;
    letter-spacing: .06em;
    margin: 0;
  }

  /* 下方宣言：手機留白與行距 */
  .is-promise .promise{
    max-width: 100%;
    margin: 0 auto 0;
    padding: 0 16px;     /* 手機左右留白 */
    text-align: left;    /* 手機段落建議左對齊更易讀 */
  }

  .is-promise .promise p{
    margin: 0 auto 0 ;
    line-height: 1.5;
  }
}


.wt-cert3-titles{
  display: flex;
  align-items: center;
}

.wt-cert3-titles .section-title{
  margin: 0;
  line-height: 1.15;
  position: relative;
  top: 1px;   /* 視覺微調，可自行 +1 / 0 */
}

/*--------------------------------------------------------------------------------------------------------------*/
/* sections padding（你要變薄） */
 
@media (max-width: 768px){
  .section{ padding: 10px 0 10px; }
}

/* header spacing（你要變薄） */
.section-header{ margin: 0 0 0; text-align:center; }
.section-kicker{ margin: 4px 0 0; }
.section-title{ margin: 6px 0 6px; }
.section-subtitle{ margin: 0 0 10px; max-width: 760px; margin-left:auto; margin-right:auto; color: rgba(0,0,0,.62); line-height: 1.7; }

.section-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size: 12px;
  letter-spacing: .18em;
  color: rgba(13,59,102,.65);
  text-transform: uppercase;
}
.section-kicker::before{
  content:"";
  width: 34px;
  height: 2px;
  background: var(--secondary);
  border-radius: 99px;
}

/*---------------------------------------------------------------------------------------------*/
/* =========================================================
   Direct Management｜建設直營（#direct）
   ========================================================= */
.section.direct{
  position: relative;
  padding: clamp(44px, 5vw, 74px) 0;
  /* 溫和底色：米白→淡金 */
  background: radial-gradient(900px 420px at 15% 10%, rgba(201,151,0,.10), rgba(201,151,0,0) 60%),
              linear-gradient(180deg, #fbfaf6 0%, #f6f1e6 100%);
  overflow: hidden;
}

.section.direct .container{
  position: relative;
  z-index: 1;
}

/* Header：kicker + title */
.section.direct .section-header{
  text-align: center;
  margin: 0 auto 18px;
}

.section.direct .section-kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(17,24,39,.65);
}

.section.direct .section-kicker::before,
.section.direct .section-kicker::after{
  content:"";
  width: 22px;
  height: 1px;
  background: linear-gradient(90deg, rgba(201,151,0,0), rgba(201,151,0,.7), rgba(201,151,0,0));
}

.section.direct .section-title{
  margin: 10px 0 0;
  font-size: clamp(26px, 3.2vw, 40px);
  letter-spacing: .06em;
  line-height: 1.15;
  color: rgba(11,18,32,.92);
}

/* Tag list：柔和膠囊標籤 */
.section.direct .direct-tag-list{
  list-style: none;
  padding: 0;
  margin: 18px auto 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  justify-content: center;
  max-width: 980px;
}

.section.direct .direct-tag-list li{
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(201,151,0,.22);
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
  color: rgba(11,18,32,.82);
  font-size: 14px;
  letter-spacing: .04em;
  white-space: nowrap;
  backdrop-filter: blur(6px);
}

/* 內文框：引言感 + 兩欄排版（桌機） */
.section.direct .inform{
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(18px, 3vw, 26px);
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 18px 45px rgba(15,23,42,.08);
  backdrop-filter: blur(8px);
  position: relative;
}

/* 左側「引言」金線 */
.section.direct .inform::before{
  content:"";
  position: absolute;
  left: 14px;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(201,151,0,.85), rgba(201,151,0,.18));
  opacity: .85;
}

/* 兩段文字：桌機 2 欄，手機 1 欄 */
.section.direct .inform{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 22px;
}

.section.direct .inform p{
  margin: 0;
  padding-left: 18px; /* 給左側金線留空間 */
  font-size: 1.05rem;
  line-height: 2.05;
  color: rgba(17,24,39,.78);
  letter-spacing: .02em;
}

/* 第一段稍微重一點（主張） */
.section.direct .inform p:first-child{
  font-weight: 700;
  color: rgba(11,18,32,.88);
}

/* RWD：手機改單欄 + 標籤更緊湊 */
@media (max-width: 820px){
  .section.direct{
    padding: 38px 0 52px;
  }

  .section.direct .direct-tag-list{
    margin: 14px auto 18px;
    gap: 8px 10px;
    padding: 0 14px;
  }

  .section.direct .direct-tag-list li{
    font-size: 13px;
    padding: 9px 12px;
  }

  .section.direct .inform{
    grid-template-columns: 1fr;
    border-radius: 16px;
    margin: 0 14px;
  }

  .section.direct .inform::before{
    left: 12px;
  }

  .section.direct .inform p{
    padding-left: 16px;
    font-size: 1rem;
    line-height: 2;
  }
}

/* =========================================================
   Direct｜Tag List 雜誌章節感強化（補丁）
   ========================================================= */

/* 標籤列上下淡金分隔線 */
.section.direct .direct-tag-list{
  position: relative;
  padding: 18px 0 22px;
}

.section.direct .direct-tag-list::before,
.section.direct .direct-tag-list::after{
  content:"";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(720px, 86%);
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(201,151,0,0),
    rgba(201,151,0,.45),
    rgba(201,151,0,0)
  );
}

.section.direct .direct-tag-list::before{
  top: 0;
}

.section.direct .direct-tag-list::after{
  bottom: 0;
}

/* 標籤 hover：淡金光暈（高級、不浮） */
.section.direct .direct-tag-list li{
  transition: 
    box-shadow .35s ease,
    transform .35s ease,
    border-color .35s ease,
    background-color .35s ease;
}

.section.direct .direct-tag-list li:hover{
  transform: translateY(-1px);
  border-color: rgba(201,151,0,.45);
  background: rgba(255,255,255,.9);
  box-shadow:
    0 12px 26px rgba(15,23,42,.10),
    0 0 0 1px rgba(201,151,0,.18),
    0 0 18px rgba(201,151,0,.25);
}

/* 讓標籤列與標題更像同一組（間距微調） */
.section.direct .section-header{
  margin-bottom: 6px;
}

.section.direct .section-title{
  margin-bottom: 6px;
}

/* 手機版：分隔線更短、光暈更收斂 */
@media (max-width: 820px){
  .section.direct .direct-tag-list{
    padding: 14px 0 18px;
  }

  .section.direct .direct-tag-list::before,
  .section.direct .direct-tag-list::after{
    width: 78%;
  }

  .section.direct .direct-tag-list li:hover{
    transform: none;
    box-shadow:
      0 8px 18px rgba(15,23,42,.10),
      0 0 0 1px rgba(201,151,0,.15);
  }
}


/* =========================================================
   Construction Closing｜無卡片宣言牆（section-closing）
   ========================================================= */
.section-construction.section-closing{
  position: relative;
  padding: clamp(64px, 7vw, 110px) 0;
  overflow: hidden;

  /* 柔和底：米白→淡金，不用卡片也有質感 */
  background:
    radial-gradient(900px 420px at 18% 18%, rgba(201,151,0,.12), rgba(201,151,0,0) 60%),
    radial-gradient(760px 360px at 85% 70%, rgba(13,59,102,.08), rgba(13,59,102,0) 55%),
    linear-gradient(180deg, #fbfaf6 0%, #f3efe6 100%);
}

/* 內容容器：取消任何卡片感（保險） */
.section-construction.section-closing .closing-inner{
  max-width: 980px;
  margin: 0 auto;
  padding: 0;              /* 不做卡片 padding */
  background: transparent; /* 不要白底 */
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-align: center;
}

/* 標題：宣言感 */
.section-construction.section-closing .closing-title{
  margin: 0 0 16px;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: .12em;
  color: rgba(11,18,32,.92);
}

/* 內文：溫和、好讀 */
.section-construction.section-closing .closing-lead{
  margin: 0 auto 30px;
  max-width: 820px;
  font-size: 1.05rem;
  line-height: 2.05;
  color: rgba(17,24,39,.72);
  letter-spacing: .02em;
}

/* 按鈕列 */
.section-construction.section-closing .closing-actions{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* 按鈕：保留你原本 btn 系統，但讓它更像品牌 */
.section-construction.section-closing .btn{
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 700;
  letter-spacing: .06em;
}

/* primary：偏武泰金＋深藍穩重 */
.section-construction.section-closing .btn-primary{
  background: linear-gradient(180deg, rgba(201,151,0,.98), rgba(186,136,0,.98));
  border: 1px solid rgba(201,151,0,.55);
  color: rgba(11,18,32,.92);
  box-shadow: 0 14px 34px rgba(15,23,42,.12);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

.section-construction.section-closing .btn-primary:hover{
  transform: translateY(-1px);
  filter: saturate(1.05);
  box-shadow: 0 18px 44px rgba(15,23,42,.14), 0 0 18px rgba(201,151,0,.20);
}

/* ghost：透明，不像卡片 */
.section-construction.section-closing .btn-ghost{
  background: transparent;
  border: 1px solid rgba(15,23,42,.18);
  color: rgba(11,18,32,.86);
  transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}

.section-construction.section-closing .btn-ghost:hover{
  background: rgba(255,255,255,.55);
  border-color: rgba(201,151,0,.35);
  transform: translateY(-1px);
}

/* 手機：間距更緊、字級微調 */
@media (max-width: 820px){
  .section-construction.section-closing{
    padding: 52px 0 74px;
  }
  .section-construction.section-closing .closing-title{
    letter-spacing: .08em;
  }
  .section-construction.section-closing .closing-lead{
    font-size: 1rem;
    line-height: 2;
    padding: 0 14px;
  }
}

/*----------------------------------------------------------------------------------------------------------*/
/* =========================================================
   RWD
   ========================================================= */
@media (max-width: 992px){
  .page-construction .wt-authority-title{ font-size: 1.55rem; }
  .page-construction .wt-authority{ padding: 46px 0 52px; }
  .page-construction .wt-cert3-head{ flex-direction: row; }
}
@media (max-width: 768px){
  .page-construction .wt-authority-title{ font-size: 1.35rem; }
  .page-construction .wt-chip{ font-size: .88rem; }
  .page-construction .wt-cert3-head{ flex-direction: column; }
  .page-construction .wt-seal3{ width: 52px; height: 52px; }
}

/* 4) 證照章：再更像「認證物件」，而不是裝飾 */
.page-construction .wt-cert3-head{
  align-items: center;
  margin: 8px ;
}
.page-construction .wt-seal3{
  transform: translateY(2px);
}
.page-construction .wt-seal3-core{
  font-size: 1.5rem;
  font-weight: 800;
}


/*----------------------------------------------------*/
/* B章 + 標題：整組水平置中 */
.wt-cert3-head{
  display: flex;
  align-items: center;
  justify-content: center;   /* 關鍵 */
  gap: 18px;
  text-align: center;
}

.wt-cert3-titles{
  text-align: center;
}




/* ===============================
   承諾段｜手機版：章在上、字在下
   =============================== */
@media (max-width: 640px){

  /* 上方：章 + 標題改成直向堆疊 */
  .wt-cert3-head{
    flex-direction: column;
    gap: 12px;
  }

  /* 章置中（保險） */
  .wt-seal3{
    margin: 0 auto;
  }

  /* 標題：手機版更好讀 */
  .wt-cert3-titles .section-title{
    text-align: center;
    font-size: clamp(1.7rem, 6vw, 2.1rem);
    line-height: 1.25;
    letter-spacing: .06em;
    margin: 0;
  }

  
}


/* 修正 B章 + 標題的垂直視覺置中 */
.wt-cert3-head{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.wt-cert3-titles{
  display: flex;
  align-items: center;
}

.wt-cert3-titles .section-title{
  margin: 0;
  line-height: 1.15;
  position: relative;
  top: 1px;   /* 視覺微調，可自行 +1 / 0 */
}

/*---------------------------------------------------------------------*/
/* ===== Closing 區：去卡片化 ===== */
.section-closing .wt-cert3,
.section-closing .closing{
  background: transparent;
  box-shadow: none;
  border: none;
  border-radius: 0;
  padding: 0;
}

.section-closing{
  padding: 96px 0 110px;
  background: linear-gradient(
    180deg,
    #f7f5f1 0%,
    #f2efe9 100%
  );
}

.section-closing .section-inner{
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}

.section-closing .section-title{
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.4;
  margin: 0;
}

.section-closing .closing p{
  margin: 28px auto 42px;
  max-width: 680px;
  font-size: 1.05rem;
  line-height: 2;
  color: rgba(17,24,39,.78);
  letter-spacing: .04em;
}

.section-closing .closing-actions{
  display: flex;
  justify-content: center;
  gap: 18px;
}



  /* 下方宣言：手機留白與行距 */
  .is-promise .promise1 p{
   margin: 6px 0 ;
  font-size: 20px ;
  line-height: 1.5;
  color: rgba(17,24,39,.78);
  letter-spacing: .02em;
}

.is-promise .promise1 p:first-child{
  font-weight: 700;
  color: rgba(11,18,32,.88);
}


  .is-promise .promise1{
    max-width: 100%;
    margin: 0 auto 0;
    padding: 0 16px;     /* 手機左右留白 */
    text-align: left;    /* 手機段落建議左對齊更易讀 */
  }

  .is-promise .promise1 p{
    margin: 0 auto 0 ;
    line-height: 1.5;
  }

  @media (max-width: 640px){
  .is-promise .promise1{
    padding: 0 16px;
    margin-top: 10px;
  }

  .is-promise .promise1 p{
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
  }
}


/* =========================================================
   營造工程頁｜最終定案寬度（只限本頁）
   ========================================================= */




/* 營造工程頁：專屬版心 */
body.page-construction{
  --page-max: 1000px;
  --page-gutter: 20px;
}


/* =========================================================
   營造工程頁｜Section 底色節奏（只影響本頁）
   ========================================================= */

body.page-construction{

  /* A. 敘事開場：品牌宣言（最乾淨） */
  --bg-story: #ffffff;

  /* B. 資訊對照 / 技術說明：冷靜專業 */
  --bg-soft-gray: #f4f6f8;

  /* C. 證照 / 信任：暖米色 */
  --bg-warm: #fbf7f1;
}

/* === 套用到各 section === */

.page-construction .section-story-intro{
  background: var(--bg-story);
}

.page-construction .section-level-compare{
  background: var(--bg-soft-gray);
}

.page-construction .section-license{
  background: var(--bg-warm);
}

/* 承諾段：用非常淡的暖色漸層，像雜誌引言 */
.page-construction .section-hero-copy.is-promise{
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #fbf7f1 100%
  );
}

/* 日本制震：回到冷靜科技感 */
.page-construction .section-tech-premium{
  background: #f6f7f9;
}

/* 每段之間增加一致的呼吸距離 */
.page-construction .section-construction{
  padding-top: 72px;
  padding-bottom: 72px;
}

@media (max-width: 768px){
  .page-construction .section-construction{
    padding-top: 48px;
    padding-bottom: 48px;
  }
}

/*-------------------------------------------------------------------------------------------*/
body.page-construction .section-story-intro {
    padding: 20px 0 ;
     
}

 body.page-construction .section-split-proof, body.page-construction .section-split-compare {
    padding: 20px 0;
}

body.page-construction .section-construction {
    padding: 20px 0;
}

body.page-construction .section-hero-copy {
    padding: 10px 0;
    
}

body.page-construction .section-construction {
    padding: 20px 0;
}

body.page-construction .section-hero-copy {
    padding: 10px 0;
     
}


/* =========================================================
   營造工程頁｜結構穩定版（不可能再跑版）
   ========================================================= */

/* ---------------------------------
   0. 單頁參數（只影響本頁）
---------------------------------- */
body.page-construction{
  --page-max: 1200px;
  --page-gutter: 20px;

  --bg-white: #ffffff;
  --bg-soft-gray: #f4f6f8;
  --bg-warm: #fbf7f1;
  --bg-tech: #f6f7f9;
}

/* ---------------------------------
   1. 所有 section 的基本節奏
---------------------------------- */
.page-construction .section-construction{
  width: 100%;
  padding: 72px 0;
}

@media (max-width: 768px){
  .page-construction .section-construction{
    padding: 48px 0;
  }
}

/* ---------------------------------
   2. 本頁唯一合法的「版心」
---------------------------------- */
.page-construction .section-construction > .container{
  max-width: var(--page-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
}

/* ❌ 禁止 section-inner 再管寬度 */
.page-construction .section-inner{
  max-width: none;
  padding: 0;
}

/* ---------------------------------
   3. 各區塊底色配置（區隔感）
---------------------------------- */
.page-construction .section-story-intro{
  background: var(--bg-white);
}

.page-construction .section-level-compare{
  background: var(--bg-soft-gray);
}

.page-construction .section-license{
  background: var(--bg-warm);
}

.page-construction .section-hero-copy.is-promise{
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    var(--bg-warm) 100%
  );
}

.page-construction .section-tech-premium{
  background: var(--bg-tech);
}

/* ---------------------------------
   4. full-bleed 正確用法
   （背景滿版，內容仍回版心）
---------------------------------- */
.page-construction .wt-full-bleed{
  width: 100%;
}

.page-construction .wt-full-bleed > .container{
  max-width: var(--page-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
}

/* ---------------------------------
   5. 甲乙丙分級：固定 grid，不漂移
---------------------------------- */
.page-construction .split-compare-inner{
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 36px;
  align-items: center;
}

@media (max-width: 980px){
  .page-construction .split-compare-inner{
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* 圖片永遠不撐爆 */
.page-construction img{
  max-width: 100%;
  height: auto;
  display: block;
}

body.page-construction .section-title{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* 桌機 */
@media (min-width: 1024px) {
  
  body.page-construction .section-lead {
   padding: 0 20px;}

body.page-construction .split-proof-copy .license-note, body.page-construction .split-compare-copy .level-note {
    padding: 0 20px;}

   .is-promise .promise {
      max-width: 520px; }

      .is-promise .promise1 p {
          text-align: center;
        max-width: 520px; }
}

.page-construction .closing-actions {
    padding:   4px 14px   4px ;
}

/* =========================================================
   營造工程頁 CTA 按鈕：統一首頁金色樣式
   ========================================================= */
body.page-construction .btn.btn-primary{
  background: linear-gradient(
    180deg,
    #e0b865 0%,
    #c99700 100%
  );
  color: #1b2530;
  border: 1px solid #c99700;
  box-shadow: 0 6px 18px rgba(201, 151, 0, .25);
}

/* hover 狀態（和首頁一致） */
body.page-construction .btn.btn-primary:hover{
  background: linear-gradient(
    180deg,
    #e8c980 0%,
    #d2a600 100%
  );
  box-shadow: 0 8px 22px rgba(201, 151, 0, .35);
  transform: translateY(-1px);
}

/* =========================================
   FIX：日本制震 kicker 置中（最終鎖定版）
   - 外層一定滿寬且置中
   - 內層只包文字，不會撐成一整條
   ========================================= */

body.page-construction .section-tech-text .wt-plaque{
  width: 100% !important;
  display: block !important;        /* ✅ 关键：不要 flex，讓 text-align 生效 */
  text-align: center !important;
}

body.page-construction .section-tech-text .wt-plaque-kicker{
  display: inline-flex !important;  /* ✅ 关键：只包文字 */
  width: auto !important;
  max-width: 100% !important;

  margin: 0 auto !important;
  align-self: unset !important;

  white-space: nowrap;
}

.page-construction .section-tech-text {
    padding:  0 10px;
}

.container{
  max-width: var(--page-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--page-gutter);
    padding-right: var(--page-gutter);
}
    


/* =========================================================
   WT SVG Icons（icons.svg sprite）
   線條型 icon 必備（否則會「存在但看不到」）
   ========================================================= */

svg.trust-icon{
  width: 28px;
  height: 28px;
  display: block;

  fill: none;                 /* 線條 icon 一定要 */
  stroke: currentColor;       /* 用文字顏色畫線 */
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* icon 外層決定顏色 */
.trust-ico{
  color: rgba(17,24,39,.85);  /* 深灰藍，跟你整體品牌一致 */
}

/* 金色 icon（甲級營造） */
.trust-icon--gold{
  color: var(--secondary);    /* #c99700 */
}

svg use{
  stroke: inherit;
  fill: inherit;
}


/* =========================================================
   日本制震｜右側改成 YouTube 影片（RWD 自適應）
   ========================================================= */

body.page-construction .tech-video-wrap{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;       /* 現代瀏覽器：最穩 */
  border-radius: 18px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 16px 30px rgba(15,23,42,.14);
}

/* 舊瀏覽器保險（若不支援 aspect-ratio 仍能正常） */
@supports not (aspect-ratio: 16 / 9){
  body.page-construction .tech-video-wrap{
    height: 0;
    padding-top: 56.25%; /* 16:9 */
  }
}

body.page-construction .tech-video-iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* =========================================================
   日本制震｜影片封面連結（YouTube 外連方案 A）
   ========================================================= */

body.page-construction .tech-video-link{
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 16px 30px rgba(15,23,42,.14);
}

/* 舊瀏覽器保險 */
@supports not (aspect-ratio: 16 / 9){
  body.page-construction .tech-video-link{
    height: 0;
    padding-top: 56.25%;
  }
}

body.page-construction .tech-video-thumb{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease, filter .35s ease;
  filter: saturate(1.02) contrast(1.03);
}

/* 播放按鈕底 */
body.page-construction .tech-video-play{
  position: absolute;
  inset: 0;
  margin: auto;
  width: 74px;
  height: 74px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  transition: transform .25s ease, background .25s ease;
}

/* 播放三角形 */
body.page-construction .tech-video-play::before{
  content:"";
  position:absolute;
  inset: 0;
  margin:auto;
  width: 0;
  height: 0;
  border-left: 18px solid rgba(255,255,255,.92);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  transform: translateX(3px);
}

/* Hover 微互動（官網質感） */
body.page-construction .tech-video-link:hover .tech-video-thumb{
  transform: scale(1.03);
  filter: saturate(1.08) contrast(1.06);
}

body.page-construction .tech-video-link:hover .tech-video-play{
  background: rgba(0,0,0,.65);
  transform: scale(1.08);
}

/* =========================================================
   播放鍵｜武泰金色版本（覆蓋）
   ========================================================= */

body.page-construction .tech-video-play{
  background: radial-gradient(
    circle at 30% 30%,
    #f5d98a 0%,
    #e6b95c 45%,
    #cfa23a 75%,
    #b48a2c 100%
  );
  box-shadow:
    0 10px 26px rgba(180,138,44,.45),
    inset 0 1px 1px rgba(255,255,255,.55);
}

/* 播放三角形改深藍，符合武泰主視覺 */
body.page-construction .tech-video-play::before{
  border-left-color: #0b2b44; /* 武泰深藍 */
}

/* Hover：金色微亮＋一點點儀式感 */
body.page-construction .tech-video-link:hover .tech-video-play{
  transform: scale(1.12);
  box-shadow:
    0 14px 36px rgba(180,138,44,.6),
    inset 0 1px 1px rgba(255,255,255,.65);
}


/* =========================
   Hero Gallery（方案一：主圖 + 縮圖列）
   ========================= */
body.page-construction .hero-gallery{
  overflow: hidden; /* 維持你的圓角卡片乾淨 */
}

body.page-construction .hero-gallery-main{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* 縮圖列：可水平滑動 */
body.page-construction .hero-gallery-thumbs{
  display: flex;
  gap: 10px;
  padding: 12px 12px 14px;
  background: rgba(255,255,255,.92);
  border-top: 1px solid rgba(0,0,0,.06);

  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}

body.page-construction .hero-gallery-thumbs::-webkit-scrollbar{
  height: 10px;
}
body.page-construction .hero-gallery-thumbs::-webkit-scrollbar-thumb{
  background: rgba(17,24,39,.12);
  border-radius: 999px;
}

/* 單顆縮圖 */
body.page-construction .hero-thumb{
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;

  flex: 0 0 auto;
  width: 86px;
  height: 58px;
  border-radius: 12px;
  overflow: hidden;

  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 8px 18px rgba(0,0,0,.10);
  opacity: .92;

  scroll-snap-align: start;
  transform: translateZ(0);
}

body.page-construction .hero-thumb img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Active / Hover：精品感淡金框 */
body.page-construction .hero-thumb:hover{
  opacity: 1;
}

body.page-construction .hero-thumb.is-active{
  opacity: 1;
  border-color: rgba(201,151,0,.55);
  box-shadow: 0 10px 24px rgba(201,151,0,.18);
}

/* 手機縮小一點 */
@media (max-width: 640px){
  body.page-construction .hero-thumb{
    width: 74px;
    height: 52px;
  }
}

/* =========================
   Hero Gallery：Active 狀態改為中性色（方案 A）
   ========================= */
body.page-construction .hero-thumb.is-active{
  border-color: rgba(0,0,0,.18);
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
}

/* =========================
   Mobile Fix：防橫向爆版 + 縮圖列更穩
   ========================= */
body.page-construction{
  overflow-x: hidden; /* ✅ 最關鍵：先止血避免整頁被撐寬 */
}

@media (max-width: 768px){
  /* 右側媒體卡片：手機不要有任何內框/裝飾干擾 */
  .page-construction .hero-photo-frame::before,
  .page-construction .hero-photo-frame::after{
    display: none;
  }

  /* 縮圖列：縮小、減陰影，避免撐爆 */
  body.page-construction .hero-gallery-thumbs{
    max-width: 100%;
    padding: 10px 10px 12px;
    gap: 8px;
    overflow-x: auto;
  }

  body.page-construction .hero-thumb{
    width: 66px;
    height: 46px;
    border-radius: 10px;
    box-shadow: 0 6px 14px rgba(0,0,0,.10);
  }
}


/* =====================================================
   Mobile Emergency Fix｜營造工程頁 手機版止血
   ===================================================== */

/* ① 全頁防止被任何元素撐爆（關鍵） */
body.page-construction{
  overflow-x: hidden;
}

/* ② Hero 敘事段：手機改成直向堆疊 */
@media (max-width: 900px){

  .page-construction .story-intro-inner{
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  /* 左文右圖 → 手機統一置中 */
  .page-construction .story-intro-copy,
  .page-construction .story-intro-media{
    width: 100%;
  }

  /* ③ Hero 圖框：手機不要任何「雜誌裝飾」 */
  .page-construction .hero-photo-frame,
  .page-construction .hero-gallery{
    border: none;
    box-shadow: none;
    border-radius: 16px;
  }

  .page-construction .hero-photo-frame::before,
  .page-construction .hero-photo-frame::after{
    display: none !important;
  }

  /* ④ 主圖：確保不超出 */
  .page-construction .hero-gallery-main{
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
  }

  /* ⑤ 縮圖列：手機專用尺寸（避免橫向爆） */
  .page-construction .hero-gallery-thumbs{
    padding: 8px 8px 10px;
    gap: 6px;
    max-width: 100%;
    overflow-x: auto;
  }

  .page-construction .hero-thumb{
    width: 64px;
    height: 44px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,.12);
    flex: 0 0 auto;
  }
}

/* =========================================================
   ✅ Mobile Fix Pack：修正手機版雙欄爆版（放在 construction.css 最底）
   ========================================================= */

/* 先做全頁防爆：避免任何元素撐出水平捲動 */
body.page-construction{
  overflow-x: hidden;
}

/* 平板以下：所有「雙欄 grid」都要變單欄 */
@media (max-width: 992px){

  /* 你新增的 Story Intro（目前沒在 RWD 內處理到） */
  body.page-construction .story-intro-inner{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  /* 你新增的 Compare / Proof（目前也沒在 RWD 內處理到） */
  body.page-construction .split-proof-inner,
  body.page-construction .split-compare-inner{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  /* 避免卡片內部內容撐爆（長字、長網址、圖片） */
  body.page-construction .section-inner,
  body.page-construction .story-intro-copy,
  body.page-construction .split-compare-copy,
  body.page-construction .split-proof-copy{
    min-width: 0;
  }
}

/* 手機再收一點細節（字級/內距/圖片） */
@media (max-width: 768px){

  body.page-construction .section-inner{
    padding: 16px;
    border-radius: 16px;
  }

  body.page-construction .section-title{
    font-size: 1.2rem; /* 你原本 32px 在手機太容易撐 */
    line-height: 1.35;
  }

  body.page-construction .section-lead{
    font-size: 0.98rem;
    line-height: 1.85;
  }

  /* 右側圖片區（hero gallery / compare 圖）確保不會被固定高度/寬度擠爆 */
  body.page-construction .hero-photo-frame img,
  body.page-construction .level-compare-image,
  body.page-construction .license-image{
    max-width: 100%;
    height: auto;
  }

  /* 縮圖列：水平可滑，不要硬擠到換行爆掉 */
  body.page-construction .hero-gallery-thumbs{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
}

/* =========================================================
   FINAL MOBILE FIX — construction.css（最終止血版）
   ========================================================= */

/* 全頁防橫向爆版（關鍵） */
body.page-construction{
  overflow-x: hidden;
}

/* ================= 平板以下：全部單欄 ================= */
@media (max-width: 992px){

  /* 所有雙欄 section 統一單欄 */
  .page-construction .story-intro-inner,
  .page-construction .split-compare-inner,
  .page-construction .section-tech-inner,
  .page-construction .wt-cert,
  .page-construction .wt-cert2{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* 防止 grid 內容撐爆 */
  .page-construction .section-inner,
  .page-construction .story-intro-copy,
  .page-construction .story-intro-media,
  .page-construction .split-compare-copy,
  .page-construction .split-compare-media{
    min-width: 0;
  }

  /* Hero 右圖：手機不要任何裝飾 */
  .page-construction .hero-photo-frame,
  .page-construction .hero-gallery{
    border: none;
    box-shadow: none;
    border-radius: 16px;
    max-width: 100%;
  }

  .page-construction .hero-photo-frame::before,
  .page-construction .hero-photo-frame::after{
    display: none !important;
  }

  /* Hero 主圖保險 */
  .page-construction .hero-gallery-main{
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
  }

  /* 縮圖列：只橫向滑，不撐版 */
  .page-construction .hero-gallery-thumbs{
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px;
    gap: 6px;
  }

  .page-construction .hero-thumb{
    flex: 0 0 auto;
    width: 64px;
    height: 44px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,.12);
  }
}

/* ================= 手機再收斂字級 ================= */
@media (max-width: 768px){
  .page-construction .section-title{
    font-size: 1.2rem;
    line-height: 1.35;
  }
  .page-construction .section-lead{
    font-size: 0.98rem;
    line-height: 1.8;
  }
}


/* =========================================================
   Mobile Typography Fine-tune｜手機文字跳行優化
   ========================================================= */

@media (max-width: 768px){

  /* ① 標題：避免一行一個字、避免孤兒字 */
  .page-construction .section-title,
  .page-construction .page-title{
    word-break: keep-all;        /* 中文不要硬斷字 */
    line-break: strict;
    letter-spacing: .02em;       /* 稍微拉開，減少擠壓 */
  }

  /* ② 內文：讓行距「撐開一點」，減少卡行感 */
  .page-construction p{
    line-height: 1.85;
    letter-spacing: .01em;
  }

  /* ③ 關鍵宣言 / 句子（像 manifesto、highlight） */
  .page-construction .hero-highlight,
  .page-construction .wt-manifesto-quote{
    line-height: 1.6;
    letter-spacing: .03em;
    text-wrap: balance; /* 支援的瀏覽器會自動平衡換行 */
  }

  /* ④ 太長的專有名詞（避免被擠到剩 1 個字） */
  .page-construction b,
  .page-construction strong{
    white-space: nowrap;
  }
}


@media (max-width: 430px){
  .is-promise .promise1 br{ display: none; } /* 超小手機改回自然換行 */
}

/* ===============================
   Alfa Safe 技術說明｜手機換行更平均
   =============================== */
@media (max-width: 768px){

  /* 只動這一塊，不影響其他 section */
  .section-tech-premium .section-tech-text{
    max-width: 30em;       /* 28~32em 都可以微調 */
    margin: 0 auto;
  }

  .section-tech-premium .section-tech-text p{
    line-height: 1.9;
    word-break: keep-all;
    line-break: strict;
    text-wrap: balance;
  }

  /* 你的 <b> 引用句避免被拆行 */
  .section-tech-premium .section-tech-text b{
    white-space: nowrap;
  }
}

/* ===============================
   Alfa Safe 技術正文：回到自然換行（修正怪分行）
   =============================== */
@media (max-width: 768px){

  /* 保留行寬，讓閱讀舒服，但不要硬平均 */
  .section-tech-premium .section-tech-text{
    max-width: 32em;  /* 稍微放寬，減少硬切 */
    margin: 0 auto;
  }

  .section-tech-premium .section-tech-text p{
    line-height: 1.9;
    word-break: normal;      /* ✅ 回到自然換行 */
    line-break: auto;        /* ✅ 讓瀏覽器自然處理 */
    text-wrap: normal;       /* ✅ 不要 balance */
           /* ✅ 技術正文左對齊最穩 */
  }

  /* 只保護加粗引言，不要拆成兩行 */
  .section-tech-premium .section-tech-text b{
    white-space: nowrap;
  }
}


/* ===============================
   Alfa Safe 技術正文｜置中但自然（最終版）
   =============================== */
@media (max-width: 768px){

  .section-tech-premium .section-tech-text{
    max-width: 30em;     /* 閱讀寬度甜蜜點 */
    margin: 0 auto;
    text-align: center;  /* 你選的 B：置中 */
  }

  .section-tech-premium .section-tech-text p{
    line-height: 1.95;        /* 置中一定要比較鬆 */
    word-break: normal;       /* 回到自然中文換行 */
    line-break: auto;
    text-wrap: normal;        /* ❌ 不要 balance */
    letter-spacing: .01em;    /* 輕微呼吸感 */
  }

  /* 關鍵詞保護（避免被拆） */
  .section-tech-premium .section-tech-text b{
    white-space: nowrap;
  }
}

/* 超小手機再微調，避免最後一行太短 */
@media (max-width: 420px){
  .section-tech-premium .section-tech-text{
    max-width: 28em;
  }
}