/* ============================================================
   喬泰營造 — 全站設計 Token 與基礎樣式（單一來源 Single Source of Truth）
   方向：Style_E 深色電影版　｜　字體：Noto Sans TC + Inter（無 serif）
   用法：每一頁 <head> 一律先載入本檔，頁面專屬樣式再往下加，不得自訂字級/色/間距。
   數值對齊 Style_E.html；改這裡 = 全站生效。
   ============================================================ */

:root{
  /* ── 品牌橘（唯一基準 #EA6420；橘色只做重點，佔比 <10%）── */
  --orange:#EA6420; --orange-hi:#F47C39; --orange-press:#C44E12; --orange-pale:#FFF3EC;

  /* ── 深色底（全站主場）── */
  --ink:#0C0D0E;        /* 最深底：body / hero / CTA */
  --bg-2:#101317;       /* 區塊交替底 */
  --panel:#171B20;      /* 卡片 / 面板 */
  --panel-hi:#1B2026;   /* 卡片 hover 亮面 */
  --charcoal:#1C2024;   /* 次深面 */
  --line-d:rgba(255,255,255,.13);   /* 深色區分隔線 */
  --text-l:rgba(255,255,255,.86);   /* 深底主文字 */
  --muted-l:rgba(255,255,255,.56);  /* 深底次文字 */
  --faint-l:rgba(255,255,255,.40);  /* 深底最淡 */

  /* ── 淺色底（圖紙章白色區）── */
  --white:#fff; --charcoal-2:#24282C;
  /* 陰影與 --p（動畫進度）：Style_E 原始 :root 就有，先前移植時遺漏——
     --white 缺失導致 .cmain 等 38 處在淺色主題變透明、露出深色底 */
  --shadow:0 1px 0 rgba(255,255,255,.4) inset,0 18px 40px -22px rgba(28,32,36,.5),0 3px 10px rgba(28,32,36,.06);
  --shadow-hi:0 22px 50px -24px rgba(234,100,32,.4),0 6px 16px rgba(28,32,36,.1);
  --dshadow:drop-shadow(0 10px 18px rgba(28,32,36,.35));
  --dshadow-hi:drop-shadow(0 18px 30px rgba(234,100,32,.36)) drop-shadow(0 6px 12px rgba(28,32,36,.14));
  --p:0;
  --paper:#F5F5F3; --ash:#F3F3F1; --line:#D9DDE1;
  --text:#3A3F45; --muted:#80858C;  /* 淺底文字 */

  /* ── 字體家族 ── */
  --sans:'Noto Sans TC',sans-serif;  /* 中文 + 主體 + 所有標題 */
  --inter:'Inter',sans-serif;        /* 純拉丁 / 數字 / kicker / ghost 編號 */

  /* ── 字級 scale（固定；clamp 上下限固定＝響應式但不失控）── */
  --fs-display: clamp(34px, 6vw, 86px);    /* hero 主標 */
  --fs-h1:      clamp(30px, 4.4vw, 56px);  /* 區塊大標 / 內頁頁名 */
  --fs-h2:      clamp(22px, 2.6vw, 32px);  /* 次級標題 */
  --fs-h3:      20px;                        /* 卡片標題 */
  --fs-h4:      18px;                        /* 小標題 */
  --fs-lead:    15px;                        /* 導言 lead */
  --fs-body:    14px;                        /* 內文 */
  --fs-sm:      13px;                        /* 小字 */
  --fs-xs:      12px;                        /* 標籤 / kicker */
  --fs-2xs:     11px;                        /* chip / 最小標籤 */
  --fs-num-lg:  clamp(28px, 3.4vw, 46px);  /* 大數字（統計）*/
  --fs-num:     20px;                        /* 規格數值 */

  /* ── 行高 ── */
  --lh-tight:1.15;   /* 大標 */
  --lh-snug:1.3;     /* 標題 */
  --lh-normal:1.6;
  --lh-body:1.85;    /* 內文 */
  --lh-loose:2;      /* 導言 */

  /* ── 字距 ── */
  --ls-tight:-.01em; --ls-wide:.06em; --ls-kicker:.16em; --ls-caps:.22em;

  /* ── 間距 scale（4/8 基準；勿再手打任意 px）── */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-14:56px; --sp-16:64px;
  --sp-section: clamp(72px, 9vw, 112px);  /* 區塊上下 padding */
  --gap-card:22px;                         /* 卡片格間距 */

  /* ── 幾何 / 容器 / 動態 ── */
  --cut: polygon(0 0,84% 0,100% 16%,100% 100%,16% 100%,0 84%);  /* 角切 */
  --container: min(1280px, 100% - 72px);
  --dur:.3s; --dur-slow:.6s; --ease:cubic-bezier(.2,.7,.2,1);
  --shadow-warm:0 18px 34px rgba(234,100,32,.16);  /* 暖色浮起（配 drop-shadow）*/
}

/* ============ RESET ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);color:var(--text-l);background:var(--ink);line-height:var(--lh-body);overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4{line-height:var(--lh-snug)}
:where(a,button,input,select,textarea):focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:3px}

/* ============ 全站微噪點（打破純平面）============ */
body::after{content:'';position:fixed;inset:0;z-index:250;pointer-events:none;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px}

/* ============ 版面骨架 ============ */
.container{width:var(--container);margin:0 auto}
.section{padding:var(--sp-section) 0;background:var(--ink)}
.section-2{background:var(--bg-2)}
/* 藍圖格線紋理 */
.tex-grid{background-image:
  radial-gradient(circle at 78% 12%,rgba(255,255,255,.05),transparent 40%),
  linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px),
  linear-gradient(0deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:auto,64px 64px,64px 64px}

/* ============ 文字層級（class = 全站統一，勿在頁面另設字級）============ */
.h-display{font-family:var(--sans);font-weight:900;font-size:var(--fs-display);line-height:var(--lh-tight);letter-spacing:var(--ls-tight);color:#fff;text-wrap:balance}
.h1,.h2{font-family:var(--sans);font-weight:900;line-height:var(--lh-snug);letter-spacing:.01em;color:#fff}
.h1{font-size:var(--fs-h1)}
.h2{font-size:var(--fs-h2)}
.h-display em,.h1 em,.h2 em{font-style:normal;color:var(--orange)}   /* 標題橘色強調字 */
.lead{font-size:var(--fs-lead);color:var(--muted-l);line-height:var(--lh-loose);font-weight:300;max-width:46ch}
.body-text{font-size:var(--fs-body);color:var(--muted-l);line-height:var(--lh-body);font-weight:300;max-width:62ch}
/* kicker 小標（Inter 大寫 + 橘色斜切短線）*/
.kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--inter);font-size:var(--fs-xs);font-weight:800;letter-spacing:var(--ls-kicker);color:var(--orange);text-transform:uppercase;margin-bottom:var(--sp-4)}
.kicker::before{content:'';width:24px;height:2px;background:var(--orange);transform:skewX(-24deg)}
/* 數字（一律 Inter + 等寬）*/
.num{font-family:var(--inter);font-weight:800;font-variant-numeric:tabular-nums;color:var(--orange);line-height:1}
.num-lg{font-size:var(--fs-num-lg)}

/* 淺色（圖紙章）區內的文字反轉 */
.section-paper{background:var(--paper);background-image:
  linear-gradient(90deg,rgba(28,32,36,.055) 1px,transparent 1px),
  linear-gradient(0deg,rgba(28,32,36,.045) 1px,transparent 1px);background-size:64px 64px}
.section-paper .h1,.section-paper .h2,.section-paper .h-display{color:var(--charcoal)}
.section-paper .lead,.section-paper .body-text{color:var(--muted)}

/* ============ 區塊標頭 + 描邊 ghost 編號 ============ */
.sec-head{position:relative;z-index:0;display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-10);margin-bottom:var(--sp-16)}
.sec-head::before{content:attr(data-no);position:absolute;right:0;bottom:-14px;z-index:-1;
  font-family:var(--inter);font-weight:900;font-size:clamp(96px,13vw,168px);line-height:1;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.10);pointer-events:none}
.section-paper .sec-head::before{-webkit-text-stroke-color:rgba(28,32,36,.11)}
@media(max-width:760px){.sec-head{flex-direction:column;align-items:flex-start;gap:var(--sp-4)}.sec-head::before{font-size:clamp(72px,20vw,110px);bottom:auto;top:-24px}}

/* ============ 按鈕（切角 + 掃光 + 橘光暈）============ */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:var(--sp-2);
  font-size:var(--fs-body);font-weight:700;letter-spacing:var(--ls-wide);padding:14px 26px;cursor:pointer;border:none;
  clip-path:var(--cut);transition:background var(--dur),transform .12s,filter var(--dur)}
.btn svg{width:15px;height:15px;flex-shrink:0;transition:transform var(--dur)}
.btn::before{content:'';position:absolute;top:0;left:-130%;width:65%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-18deg);transition:left var(--dur-slow) ease}
.btn:hover::before{left:135%}
.btn:hover svg{transform:translateX(3px)}
.btn:active{transform:scale(.97)}
.btn-fill{background:var(--orange);color:#151515}
.btn-fill:hover{background:var(--orange-hi);filter:drop-shadow(0 6px 16px rgba(234,100,32,.5))}
.btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.45)}
.btn-ghost:hover{border-color:var(--orange);color:var(--orange)}

/* ============ 跳過連結（無障礙）============ */
.skip-link{position:absolute;left:16px;top:-60px;z-index:200;background:var(--orange);color:#fff;padding:10px 18px;font-weight:700;font-size:14px;transition:top .25s}
.skip-link:focus{top:14px}

/* ============ HEADER（全站共用；內頁常駐顯示）============ */
.hdr{position:fixed;inset:0 0 auto;z-index:100;height:80px;display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(20px,4vw,58px);color:#fff;background:rgba(12,13,14,.8);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.08);transition:height .3s,background .3s,box-shadow .3s}
.hdr.scrolled{height:66px;background:rgba(12,13,14,.92);box-shadow:0 8px 30px rgba(0,0,0,.35)}
.brand{display:inline-flex;align-items:center}
.brand img{width:clamp(176px,21vw,240px);height:auto}
.hdr-right{display:flex;align-items:center;gap:clamp(32px,4vw,58px)}
.nav{display:flex;align-items:center;gap:clamp(20px,2.8vw,42px)}
.nav a{color:rgba(255,255,255,.8);font-size:14px;font-weight:400;letter-spacing:.02em;position:relative;padding:6px 2px;transition:color .2s}
.nav a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--orange);transition:right .25s}
.nav a:hover{color:#fff}.nav a:hover::after{right:0}
.nav a.active{color:#fff}.nav a.active::after{right:0}   /* 當前頁 */
/* 工程諮詢 CTA（= §btn 的切角掃光按鈕語彙，header 專用尺寸）*/
.hdr-cta{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;
  background:var(--orange);color:#151515;font-weight:800;font-size:14px;letter-spacing:.06em;
  padding:12px 22px;border:none;cursor:pointer;clip-path:var(--cut);transition:background .25s,transform .12s,filter .3s}
.hdr-cta svg{width:15px;height:15px;flex-shrink:0;transition:transform .3s}
.hdr-cta::before{content:'';position:absolute;top:0;left:-130%;width:65%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-18deg);transition:left .6s ease}
.hdr-cta:hover{background:var(--orange-hi);filter:drop-shadow(0 6px 16px rgba(234,100,32,.5))}
.hdr-cta:hover::before{left:135%}.hdr-cta:hover svg{transform:translateX(3px)}.hdr-cta:active{transform:scale(.97)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
.burger span{width:26px;height:2px;background:#fff;transition:.3s}
/* 手機選單 = 藍圖施工清單：由上而下「繪製」揭開 + 逐列展開 + 工程角規記號 */
.m-menu{position:fixed;inset:0;z-index:99;counter-reset:mnav;
  display:flex;flex-direction:column;justify-content:center;gap:0;
  padding:calc(80px + var(--sp-6)) clamp(26px,8vw,60px) var(--sp-10);overflow-y:auto;
  background-color:#0A0B0C;
  background-image:
    radial-gradient(125% 80% at 100% -5%,rgba(234,100,32,.12),transparent 52%),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(0deg,rgba(255,255,255,.038) 1px,transparent 1px);
  background-size:auto,52px 52px,52px 52px;
  opacity:0;visibility:hidden;clip-path:inset(0 0 100% 0);
  transition:clip-path .55s var(--ease),opacity .3s ease,visibility .55s}
.m-menu.open{opacity:1;visibility:visible;clip-path:inset(0 0 0 0)}
/* 對角工程角規記號 */
.m-menu::before,.m-menu::after{content:'';position:absolute;width:20px;height:20px;pointer-events:none;opacity:.55}
.m-menu::before{top:88px;left:20px;border-top:2px solid var(--orange);border-left:2px solid var(--orange)}
.m-menu::after{right:20px;bottom:22px;border-right:2px solid var(--orange);border-bottom:2px solid var(--orange)}
/* 選單項目 = 施工清單列（描邊編號 + 中文 + English 副標）*/
.m-menu a:not(.hdr-cta){counter-increment:mnav;position:relative;
  display:flex;align-items:center;gap:16px;padding:clamp(14px,2.4vh,20px) 6px;
  color:#fff;font-size:clamp(21px,6vw,29px);font-weight:700;letter-spacing:.01em;line-height:1;
  border-bottom:1px solid rgba(255,255,255,.09);
  opacity:0;transform:translateX(-24px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),color .25s,border-color .25s}
.m-menu a:not(.hdr-cta)::before{content:counter(mnav,decimal-leading-zero);flex:none;width:28px;
  font-family:var(--inter);font-weight:900;font-size:14px;letter-spacing:.04em;
  color:transparent;-webkit-text-stroke:1px var(--orange);transition:color .25s,-webkit-text-stroke-color .25s}
.m-menu a:not(.hdr-cta)::after{content:attr(data-en);margin-left:auto;
  font-family:var(--inter);font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint-l);transition:color .25s,transform .25s}
.m-menu a:not(.hdr-cta):hover,.m-menu a:not(.hdr-cta):active{color:var(--orange);border-bottom-color:rgba(234,100,32,.5)}
.m-menu a:not(.hdr-cta):hover::before,.m-menu a:not(.hdr-cta):active::before{color:var(--orange);-webkit-text-stroke-color:var(--orange)}
.m-menu a:not(.hdr-cta):hover::after,.m-menu a:not(.hdr-cta):active::after{color:var(--orange-hi);transform:translateX(-3px)}
.m-menu .hdr-cta{align-self:flex-start;margin-top:var(--sp-8);
  opacity:0;transform:translateX(-24px);transition:opacity .5s var(--ease),transform .5s var(--ease),background .25s,filter .3s}
/* 開啟時逐列展開（繪製節奏）*/
.m-menu.open a{opacity:1;transform:none}
.m-menu.open a:nth-child(1){transition-delay:.12s}
.m-menu.open a:nth-child(2){transition-delay:.18s}
.m-menu.open a:nth-child(3){transition-delay:.24s}
.m-menu.open a:nth-child(4){transition-delay:.30s}
.m-menu.open a:nth-child(5){transition-delay:.36s}
.m-menu.open a:nth-child(6){transition-delay:.42s}
.m-menu.open a:nth-child(7){transition-delay:.48s}
@media(max-width:980px){.hdr-right{display:none}.burger{display:flex}.brand img{width:clamp(118px,32vw,146px)}}

/* ============ 麵包屑 ============ */
.crumb{display:flex;align-items:center;gap:8px;font-family:var(--inter);font-size:var(--fs-xs);letter-spacing:.06em;color:var(--muted-l)}
.crumb a{transition:color .2s}.crumb a:hover{color:var(--orange)}
.crumb .sep{color:var(--faint-l)}
.crumb .now{color:var(--orange)}

/* ============ 內頁 Hero（小；比首頁 hero 收斂）============ */
.page-hero{position:relative;min-height:clamp(300px,50svh,460px);display:flex;align-items:center;
  padding:calc(80px + var(--sp-12)) 0 var(--sp-12);background:var(--ink);overflow:hidden}
.page-hero .crumb{margin-bottom:var(--sp-5)}
.page-hero .lead{margin-top:var(--sp-4)}
/* 背景大描邊 ghost 字 */
.page-hero .ghost-word{position:absolute;right:-10px;bottom:-20px;z-index:0;pointer-events:none;
  font-family:var(--inter);font-weight:900;font-size:clamp(90px,16vw,240px);line-height:1;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.05)}
.page-hero .container{position:relative;z-index:1}

/* ============ FOOTER（全站共用）============ */
.footer{background:radial-gradient(circle at 75% 8%,rgba(255,255,255,.06),transparent 36%),#111213;color:#fff}
.footer-main{display:grid;grid-template-columns:1.4fr .7fr .8fr 1fr;gap:48px;padding:64px 0 52px}
.footer-brand img{width:184px;margin-bottom:24px}
.footer-brand p{font-size:13px;color:rgba(255,255,255,.5);line-height:1.85;max-width:38ch;font-weight:300}
.footer-col h4{font-size:12px;font-weight:700;letter-spacing:.14em;color:rgba(255,255,255,.45);margin-bottom:20px;font-family:var(--inter)}
.footer-col a,.footer-col span{display:block;font-size:14px;color:rgba(255,255,255,.62);margin-bottom:12px;line-height:1.6;transition:color .2s}
.footer-col a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1)}
.footer-bottom .container{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;color:rgba(255,255,255,.46);font-size:13px;padding:18px 0}
.footer-links{display:flex;gap:26px;align-items:center}
.footer-links a:hover{color:#fff}
@media(max-width:980px){.footer-main{grid-template-columns:1fr 1fr}}
@media(max-width:560px){
  /* 手機版底部資訊置中（視覺更平衡）*/
  .footer-main{grid-template-columns:1fr;gap:36px;justify-items:center;text-align:center}
  .footer-brand{text-align:center}
  .footer-brand img{margin-left:auto;margin-right:auto}
  .footer-brand p{max-width:36ch;margin-left:auto;margin-right:auto}
  .footer-col{text-align:center}
  .footer-bottom .container{flex-direction:column;align-items:center;text-align:center;gap:14px}
  .footer-links{justify-content:center;flex-wrap:wrap}
}

/* ============ 共用 CTA 銜接帶（信任漏斗下一步）============ */
.cta{position:relative;overflow:hidden;background:var(--ink)}
.cta::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(130% 150% at 100% 0%,rgba(234,100,32,.2),transparent 56%)}
.cta::after{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--orange)}
.cta .container{position:relative;z-index:1;display:grid;grid-template-columns:1fr auto;align-items:center;gap:40px;padding:60px 0}
.cta h2{color:#fff;margin-bottom:12px}
.cta p{color:var(--muted-l);font-weight:300;max-width:48ch}
.cta-actions{display:flex;gap:14px;flex-wrap:wrap}
@media(max-width:760px){.cta .container{grid-template-columns:1fr}}

/* ============ 回到頂端浮鈕（全站共用）============ */
.ct-totop{position:fixed;right:22px;bottom:22px;z-index:60;width:50px;height:50px;display:grid;place-items:center;background:var(--orange);color:#161616;box-shadow:0 12px 28px -12px rgba(0,0,0,.45);clip-path:var(--cut);transition:transform .2s ease,filter .2s ease}
.ct-totop:hover{transform:translateY(-3px);filter:brightness(1.08)}
.ct-totop svg{width:24px;height:24px}
@media(max-width:600px){.ct-totop{width:44px;height:44px;right:14px;bottom:14px}}

/* ============================================================
   內頁「工程圖紙」模式（body.inner-lite）
   首頁＝深色形象；內頁＝淺色圖紙。深色只留 header / footer / CTA 書擋。
   ============================================================ */
body.inner-lite{background:var(--paper);color:var(--text)}
body.inner-lite::after{opacity:.05;mix-blend-mode:multiply}
.inner-lite .section{background:transparent;}
.inner-lite .section .h1,.inner-lite .section .h2{color:var(--charcoal)}
.inner-lite .section .lead,.inner-lite .section .body-text{color:var(--muted)}
.inner-lite .sec-head::before{content:'▽ GL 'attr(data-no);
  -webkit-text-stroke:0;color:rgba(122,98,74,.35);
  font-size:clamp(15px,1.6vw,19px);font-weight:800;letter-spacing:.1em;
  right:0;bottom:100%;margin-bottom:6px;
  border-bottom:1.5px solid rgba(122,98,74,.4);padding-bottom:4px}
/* 地層剖面底（只有水平層理線＝土壤剖面；格線是別人的語言）*/
.inner-lite main{background-image:
  repeating-linear-gradient(180deg,rgba(122,98,74,.05) 0 2px,transparent 2px 240px),
  repeating-linear-gradient(180deg,rgba(28,32,36,.035) 0 1px,transparent 1px 132px)}
.inner-lite .crumb{color:var(--muted)}
.inner-lite .crumb .sep{color:var(--line)}

/* ── 內頁 Hero（深色電影感，承接首頁 DNA；每頁以 style="--phero-img:url(照片)" 設定主題照）── */
.phero-lite{position:relative;overflow:hidden;min-height:clamp(430px,58vh,580px);
  display:flex;align-items:flex-end;background:#0b0d0f center/cover no-repeat}
/* scrim（左深右透壓暗可讀）+ 藍圖格線（呼應工程製圖語彙）*/
.phero-lite::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(90deg,rgba(6,8,10,.92) 0%,rgba(6,8,10,.62) 42%,rgba(6,8,10,.22) 78%,rgba(6,8,10,.55) 100%),
  linear-gradient(0deg,rgba(6,8,10,.74) 0%,rgba(6,8,10,.05) 48%),
  linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px),
  linear-gradient(0deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:auto,auto,56px 56px,56px 56px}
/* 左緣橘剖切線（承接首頁 hero seam）*/
.phero-lite::after{content:'';position:absolute;left:0;top:0;bottom:0;z-index:2;width:4px;background:var(--orange);box-shadow:0 0 18px 1px rgba(234,100,32,.55)}
.phero-lite .container{position:relative;z-index:3;display:grid;grid-template-columns:1fr auto;gap:clamp(24px,4vw,56px);align-items:end;
  padding-top:calc(80px + clamp(30px,4vw,48px));padding-bottom:clamp(30px,4vw,48px)}
.phero-lite .crumb{margin-bottom:var(--sp-5);color:rgba(255,255,255,.62)}
.phero-lite .crumb a{color:rgba(255,255,255,.62)}
.phero-lite .crumb a:hover,.phero-lite .crumb .now{color:var(--orange)}
.phero-lite .crumb .sep{color:rgba(255,255,255,.28)}
.phero-lite .kicker{color:var(--orange)}
.phero-lite .h-display{color:#fff;font-size:clamp(30px,4.6vw,58px)}
.phero-lite .h-display em{color:var(--orange);font-style:normal}
.phero-lite .lead{margin-top:var(--sp-4);color:rgba(255,255,255,.82);max-width:52ch}
/* 圖框資訊欄（DWG NO / DATE / SHEET）→ 深色玻璃浮層 */
.tblock{position:relative;flex:none;min-width:224px;border:1.5px solid rgba(255,255,255,.2);
  background:rgba(14,17,20,.66);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding-left:12px}
.tblock::before{content:'';position:absolute;left:0;top:0;bottom:0;width:12px;border-right:1.5px solid rgba(255,255,255,.2);
  background:linear-gradient(180deg,
    #D9CDBB 0 22%, #CBBBA2 22% 44%, #BFAA8C 44% 66%, #A98F6F 66% 86%, var(--orange) 86% 100%)}
.tblock .tb-row{display:flex;justify-content:space-between;gap:18px;padding:8px 14px;border-bottom:1px solid rgba(255,255,255,.12)}
.tblock .tb-row:last-child{border-bottom:none}
.tblock .tb-k{font-family:var(--inter);font-size:9.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.56);align-self:center}
.tblock .tb-v{font-family:var(--inter);font-size:12.5px;font-weight:500;color:#fff;letter-spacing:.04em}
.tblock .tb-title{padding:10px 14px;background:rgba(0,0,0,.4);color:#fff;font-family:var(--inter);font-weight:700;font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.tblock .tb-title b{color:var(--orange-hi)}
@media(max-width:760px){.phero-lite{min-height:clamp(360px,52vh,460px)}.phero-lite .container{grid-template-columns:1fr}.tblock{width:100%;min-width:0}}

/* ── 中間調區塊（淺色頁的深淺節奏；紙 → 暖灰 → 紙 → 深帶）── */
.inner-lite .section-mid{background:#EAE8E2;box-shadow:inset 0 1px 0 rgba(28,32,36,.08),inset 0 -1px 0 rgba(28,32,36,.08)}

/* ── 淺色卡（圖紙上的元件）── */
.lcard{background:var(--white);border:1px solid var(--line);clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,26px 100%,0 calc(100% - 26px));
  box-shadow:0 1px 0 rgba(28,32,36,.03),0 10px 24px -18px rgba(28,32,36,.25);
  transition:transform var(--dur),border-color var(--dur),box-shadow var(--dur)}
.lcard:hover{transform:translateY(-5px);border-color:rgba(234,100,32,.55);box-shadow:0 18px 34px -18px rgba(234,100,32,.28)}
/* 淺底 chips / 表格 / qbridge */
/* 品質背書小帶 qbridge（h3 + 說明 + ISO 角切徽章）*/
.qbridge{background:var(--white);border-top:2px solid var(--charcoal);border-bottom:1px solid var(--line);
  padding:clamp(28px,4vw,46px) 0}
.qbridge .container{display:flex;align-items:center;justify-content:space-between;gap:clamp(22px,4vw,52px);flex-wrap:wrap}
.qb-txt h3{font-size:clamp(21px,2.4vw,28px);font-weight:900;color:var(--charcoal);margin-bottom:10px;letter-spacing:.01em}
.qb-txt p{font-size:14.5px;color:var(--muted);line-height:1.85;max-width:54ch}
.qb-txt p a{color:var(--orange);font-weight:700;white-space:nowrap;transition:color .2s}
.qb-txt p a:hover{color:var(--orange-press)}
.qb-iso{display:flex;gap:12px;flex-wrap:wrap;flex-shrink:0}
.qb-iso span{display:inline-flex;align-items:center;gap:9px;font-family:var(--inter);font-weight:800;font-size:13px;
  letter-spacing:.05em;color:var(--charcoal);background:var(--white);border:1.5px solid var(--charcoal);
  padding:11px 17px;clip-path:var(--cut);transition:background .25s,color .25s,border-color .25s}
.qb-iso span::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--orange);flex:none;transition:background .25s}/* --charcoal 深色主題翻成近白，寫死的 #fff 會白字白底；統一改 --white（淺=白／深=#15181c）*/

.qb-iso span:hover{background:var(--charcoal);color:var(--white,#fff);border-color:var(--charcoal)}
.qb-iso span:hover::before{background:var(--orange-hi)}
@media(max-width:760px){.qbridge .container{flex-direction:column;align-items:flex-start}.qb-iso{width:100%}}

/* ============ 深度尺（內頁右側；捲動＝往地底鑽 GL±0 → -60M）============ */
.depth-ruler{position:fixed;right:16px;top:50%;transform:translateY(-50%);z-index:55;
  height:min(44vh,400px);width:70px;pointer-events:none;font-family:var(--inter)}
.depth-ruler .dr-line{position:absolute;right:22px;top:0;bottom:0;width:2px;background:rgba(28,32,36,.16)}
.depth-ruler .dr-tick{position:absolute;right:22px;width:9px;height:1.5px;background:rgba(28,32,36,.28)}
.depth-ruler .dr-lab{position:absolute;right:36px;font-size:9px;font-weight:800;letter-spacing:.06em;color:rgba(28,32,36,.42);transform:translateY(-50%);white-space:nowrap}
.depth-ruler .dr-marker{position:absolute;right:18px;top:0;display:flex;align-items:center;gap:7px;will-change:transform}
.depth-ruler .dr-val{order:-1;font-size:10.5px;font-weight:900;color:var(--orange-press);background:var(--white);
  border:1px solid rgba(234,100,32,.55);padding:3px 8px;white-space:nowrap;box-shadow:0 4px 10px -6px rgba(28,32,36,.3)}
.depth-ruler .dr-dia{width:11px;height:11px;background:var(--orange);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);flex:none}
/* 內頁右側深度尺先全站隱藏（使用者要求；要恢復把下行刪掉即可） */
.depth-ruler{display:none!important}
@media(max-width:1099px){.depth-ruler{display:none}}

/* ============ 進場動態 ============ */
/* 進場動效：只隱藏「JS 掛載當下仍在視窗下方」的區塊（由 JS 加 fx-hide）。
   ── 為什麼不用「預設全部隱藏、等 JS 顯示」──
   那個模型只要 JS 時機沒對上（站內導航時新頁 DOM 晚於 effect 插入、
   舊分頁抓不到 chunk、腳本出錯）就整頁空白，使用者已連續四次回報。
   現在的模型：視窗內的內容永遠可見，JS 完全不執行也只是沒有淡入動畫。 */
.reveal,.stagger>*{transition:opacity .7s ease,transform .7s ease}
.reveal.fx-hide{opacity:0;transform:translateY(26px)}
.stagger.fx-hide>*{opacity:0;transform:translateY(22px)}
.stagger.in>*{opacity:1;transform:none}
.stagger.in>*{opacity:1;transform:none}
.stagger.in>*:nth-child(2){transition-delay:.08s}
.stagger.in>*:nth-child(3){transition-delay:.16s}
.stagger.in>*:nth-child(4){transition-delay:.24s}
.stagger.in>*:nth-child(5){transition-delay:.32s}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal,.stagger>*{opacity:1;transform:none}
}

/* ============================================================
   🌗 全站主題切換鈕 + 內頁「深色（黑夜）」主題
   內頁預設淺色（白天）；html.theme-dark ＝把淺色面/文字用 CSS 變數重映射翻深。
   已是深色的 hero / footer / cta / ink 區維持不變。
   ============================================================ */
/* 主題切換：移到右側「回到頂端」正上方，與其同寬(50px)、同切角，形成一條垂直控制軌。
   圖示改為與全站同語彙的線性 SVG（原本用 emoji ☀🌙🖥，各作業系統長相不一、與工程感不搭）。
   註：本檔無 --dshadow 變數，drop-shadow 直接寫值。 */
.theme-switch{position:fixed;right:22px;bottom:84px;z-index:120;width:50px;
  display:flex;flex-direction:column;
  background:rgba(12,13,14,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.14);clip-path:var(--cut);
  /* clip-path 會把 box-shadow 一併裁掉（切角處露缺口）→ 改用 drop-shadow 跟隨實際輪廓 */
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}
/* 2026-08-03 三顆直排改單顆循環鈕（右下四顆同形狀元素太吵——使用者回饋）；
   點擊循環 淺色→深色→跟隨系統，圖示顯示目前模式，行為在 theme-toggle.js */
.theme-switch button{width:100%;height:50px;border:none;background:transparent;cursor:pointer;display:grid;place-items:center;color:#fff;opacity:.78;transition:opacity .2s,background .2s,color .2s}
.theme-switch button svg{width:20px;height:20px}
.theme-switch button:hover{opacity:1;background:rgba(234,100,32,.18)}
html.theme-light .theme-switch{background:rgba(255,255,255,.94);border-color:#e2dbcd;filter:drop-shadow(0 10px 18px rgba(28,32,36,.22))}
html.theme-light .theme-switch button{color:#1a1a1a}
@media(max-width:600px){.theme-switch{right:14px;bottom:70px;width:44px}.theme-switch button{height:44px}.theme-switch button svg{width:18px;height:18px}}

/* 內頁深色主題：變數重映射（--charcoal 主要當深色文字→翻亮；當背景的少數處下方個別救回）*/
html.theme-dark{
  --paper:#0d0f12; --white:#15181c; --ash:#0a0c0f;
  --charcoal:#e8eaed; --text:#dfe1e4; --muted:#9aa0a6;
  --line:rgba(255,255,255,.12); --line-2:rgba(255,255,255,.08); --faint:#6a6f75;
  /* 淺米色 hover 底在深色下會把重映成淺色的文字吃掉（使用者兩次截圖回報：工程實績標題、消息日期）。
     改成暖色深底，所有用 --orange-pale 的 hover／提示底同時修正。 */
  --orange-pale:#221a15;
}
html.theme-dark body{background:#0b0d0f}
html.theme-dark body,html.theme-dark .section,html.theme-dark .qbridge,html.theme-dark .feat-case{transition:background .35s ease,color .35s ease}
/* --charcoal 當「背景/深色塊」的地方，dark mode 保持深色（避免被重映射變亮）*/
html.theme-dark .cside{background:#111317}
html.theme-dark .filter button.on{background:#1b1e22;color:#fff}
html.theme-dark .filter button.on .cnt{color:var(--orange-hi)}
/* charcoal 當「深色標題列/面板」（含白字）→ dark mode 保持深色，勿被重映射變亮 */
html.theme-dark .eq-table th,
html.theme-dark .spec-head,
html.theme-dark .qsheet-head,
html.theme-dark .cform-head{background:#1b1e22}
/* section-mid 的中間調底色是 hardcoded 淺色 → dark mode 改深色中間調 */
html.theme-dark .inner-lite .section-mid{background:#101418;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 -1px 0 rgba(255,255,255,.05)}

/* ============ 導覽下拉子選單（desktop）＋ 手機子清單 ============ */
.nav-item{position:relative;display:inline-flex;align-items:center}
.nav-item>a{display:inline-flex;align-items:center;gap:5px}
.nav-caret{width:9px;height:9px;flex:none;opacity:.65;transition:transform .25s,opacity .25s}
.nav-item:hover .nav-caret,.nav-item:focus-within .nav-caret{transform:rotate(180deg);opacity:1}
.nav-sub{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(4px);min-width:220px;
  background:rgba(18,20,22,.97);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.1);
  box-shadow:0 22px 46px -18px rgba(0,0,0,.72);padding:8px;display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s,transform .22s;z-index:120}
.nav-item:hover .nav-sub,.nav-item:focus-within .nav-sub{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(10px)}
.nav-sub::before{content:'';position:absolute;left:0;right:0;top:-12px;height:12px}/* hover 橋接 */
.nav-sub a{color:rgba(255,255,255,.82)!important;font-size:13.5px!important;font-weight:400!important;
  padding:9px 14px!important;white-space:nowrap;border-radius:2px;transition:background .18s,color .18s}
.nav-sub a::after{display:none!important}
.nav-sub a:hover{background:var(--orange);color:#fff!important}
/* 手機：子清單（縮排、去掉編號與 data-en）*/
/* 手機選單：子選單預設不展開（下拉子選單為桌機專屬）*/
.m-sub{display:none}
.m-menu .m-sub a{counter-increment:none!important;font-size:clamp(14px,4vw,16px)!important;font-weight:400;
  padding:12px 8px 12px 46px!important;color:rgba(255,255,255,.6);border-bottom:1px solid rgba(255,255,255,.07)}
.m-menu .m-sub a::before{content:'—'!important;width:auto!important;height:auto!important;border:none!important;
  -webkit-text-stroke:0!important;color:rgba(234,100,32,.7)!important;font-size:13px!important;margin-right:10px;position:static!important}
.m-menu .m-sub a::after{content:''!important;display:none!important}
.m-menu .m-sub a:hover,.m-menu .m-sub a:active{color:var(--orange);border-bottom-color:rgba(234,100,32,.4)}
/* 子清單插入後，補上第 8、9 順位的進場延遲 */
.m-menu.open a:nth-child(8){transition-delay:.54s}
.m-menu.open a:nth-child(9){transition-delay:.60s}

/* ============================================================
   淺色模式補丁（2026-08-05）
   以下三處在淺色主題下不可讀／不合理，原始靜態檔亦有同樣問題
   （已比對 WEB/assets/chautai-base.css 確認非移植遺漏），一併修正。
   ============================================================ */

/* 1) CTA 電話標籤：--muted-l 是半透明白（給深色底用），淺色底下等於隱形。
      .cta-tel 與 .cta-tel-num 都有淺色覆寫，唯獨 label 漏掉。 */
html.theme-light .cta-tel-label{color:var(--muted)}

/* 2) 內頁主區的橫線紋理：rgba(122,98,74,.05) 是給深底用的暖色描線，
      翻成淺底後變成一條條灰線（使用者回報「白底背景都是橫線」）。
      淺色模式關閉此紋理，保留乾淨紙面。 */
html.theme-light .inner-lite main{background-image:none}

/* 3) 施工實錄深色帶：區塊底色固定深色，但內文用了會隨主題翻轉的
      --text／transparent，淺色模式下變成深字印深底。改用固定淺色。 */
html.theme-light .mx-panel .mp-steps .d{color:rgba(255,255,255,.62)}
html.theme-light .mx-panel .mp-steps .t{color:#fff}
html.theme-light .mx-panel .mp-steps li{color:rgba(255,255,255,.86)}

/* ============================================================
   Next 版 inner-lite 修正（2026-08-05）
   原始靜態站是 <body id="top" class="inner-lite">，所以樣式寫成
   body.inner-lite。但 Next 的 <body> 由 root layout 控制，官網頁只能把
   inner-lite 掛在裡層 <div>——選擇器永遠不匹配，body 落回預設的
   background:var(--ink) 黑底，導致淺色模式下表單周圍整片黑
   （使用者比對 murakami.com.tw demo 後回報）。
   用 :has() 讓「內含 .inner-lite 的 body」也套用，行為與原始站一致；
   後台頁面沒有 .inner-lite，不受影響。
   ============================================================ */
body:has(.inner-lite){background:var(--paper);color:var(--text)}
body:has(.inner-lite)::after{opacity:.05;mix-blend-mode:multiply}
html.theme-dark body:has(.inner-lite){background:#0b0d0f}

/* ============================================================
   導覽列中寬度擠壓修正（2026-08-11）
   實測 981–1280px 之間 7 個導覽項全部斷成兩行（「關於喬 / 泰」），
   1280px 以上正常、980px 以下已是漢堡選單——這段區間正是常見的
   筆電視窗與瀏覽器縮放後的寬度。
   作法：導覽項一律不換行（換行對導覽而言永遠是錯的），並在該區間
   收緊字距與間距讓它排得下。
   ============================================================ */
.nav a{white-space:nowrap}
.hdr-cta{white-space:nowrap}
@media(max-width:1280px){
  .nav{gap:clamp(14px,1.9vw,24px)}
  .nav a{font-size:13.5px;letter-spacing:0}
  .hdr-right{gap:clamp(20px,2.4vw,32px)}
  .hdr{padding:0 clamp(16px,2.4vw,32px)}
}
@media(max-width:1120px){
  .nav{gap:12px}
  .nav a{font-size:13px}
  .hdr-cta{font-size:12.5px;padding:9px 14px}
}