/* 都督抓漏｜全站共用樣式
   全站樣式集中於本檔
   🔴 配色體系「墨青 × 朱砂 × 宣紙」——刻意與同集團另一品牌的「藍金」路線區隔：
      · 墨青 #0A2E36（比對方更青、飽和更高）取代深藍
      · 朱砂 #A83A2B 取代「金」作為唯一強調色（東方印記 vs 西式金漆）
      · 宣紙暖白 #F5F1E6 取代冷灰白（溫度：金屬冷 → 紙墨暖）
      · logo 原藍 #1884C1 保留呼應，作為儀器科技感的中性色
      （對方品牌名不寫進公開物，撞色比對由產生器的檢查項自動把關） */
:root{
  --blue:#0E6E9E; --blue-d:#0A2E36; --navy:#072028; --sky:#1884C1;
  --cyan:#2E93B8; --amber:#A83A2B; --green:#06c755;
  --ink:#1E2E2C; --gray:#5C6B66; --line:#E0D8C6; --bg:#F5F1E6;
  --seal:#A83A2B; --seal-l:#C4563F; --paper:#F5F1E6; --paper2:#EDE6D6;
  --shadow:0 3px 14px rgba(10,46,54,.10);
}
*{box-sizing:border-box;margin:0;padding:0}
/* 🔴 overflow-x:clip（不是 hidden）
   動效層的進場動畫會把元素往右位移（dodoSlideR = translate3d(22px,0,0)），
   滿寬的 .sec 在手機版會因此產生 2px 水平溢出（實測 320～1024px 全中，1440px 因 max-width 不中）。
   用 clip 而不是 hidden：clip 不會建立捲動容器，.nav 的 position:sticky 才不會失效。
   （hidden 會讓 sticky 壞掉 —— 這是不可逆的副作用，不可選） */
html{scroll-behavior:smooth;overflow-x:clip}
body{font-family:"Microsoft JhengHei","PingFang TC","Noto Sans TC",sans-serif;color:var(--ink);background:#fff;line-height:1.85;-webkit-text-size-adjust:100%}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer}
.wrap{max-width:1160px;margin:0 auto;padding:0 4vw}

/* ---- top bar / header ---- */
.topbar{background:var(--navy);color:#D8E4E2;font-size:13.5px;padding:8px 4vw;text-align:center}
.topbar b{color:var(--amber)}
.hd{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1160px;margin:0 auto;padding:14px 4vw}
.hd .l{display:flex;align-items:center;gap:12px;min-width:0}
.hd img{height:52px;width:52px;object-fit:contain;flex:none}
.hd .t b{font-size:21px;color:var(--blue-d);letter-spacing:1px;display:block}
/* 🔴 都督專屬：站名旁的朱砂「軍令印記」——東方將領的方形印記感 */
.hd .t .seal{display:inline-block;margin-left:9px;padding:1px 6px;background:var(--seal);color:#fff;
  font-size:12px;font-weight:800;letter-spacing:2px;border-radius:3px;vertical-align:middle;
  box-shadow:0 1px 3px rgba(168,58,43,.35)}
.hd .t small{display:block;color:var(--gray);font-size:11.5px;letter-spacing:.3px}
.hd .r{display:flex;align-items:center;gap:16px;flex:none}
.hd .tel{font-weight:900;color:var(--blue-d);font-size:19px;white-space:nowrap}
.hd .tel small{display:block;font-weight:600;color:var(--gray);font-size:11px;text-align:right}
.nav{background:var(--blue-d);position:sticky;top:0;z-index:50}
.nav .in{max-width:1160px;margin:0 auto;padding:0 4vw;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.nav .in::-webkit-scrollbar{display:none}
.nav a{color:#D8E4E2;padding:13px 18px;font-weight:600;font-size:15px;white-space:nowrap}
.nav a:hover,.nav a.on{background:rgba(255,255,255,.14);color:#fff}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 26px;border-radius:6px;font-weight:800;font-size:16px;border:0;line-height:1.4}
.btn.g{background:var(--green);color:#fff}
.btn.g:hover{background:#05ad4a}
.btn.o{background:#fff;border:1.5px solid var(--blue);color:var(--blue)}
.btn.o:hover{background:var(--bg)}
.btn.a{background:var(--amber);color:#FFF6F2}
.btn.navy{background:var(--navy);color:#fff}
.btn.sm{padding:9px 18px;font-size:14.5px}

/* ---- hero ----
   🔴 2026-11-11：舊版是「左文右圖 grid」，已改為滿版輪播（.hero.carousel），
   樣式改寫在檔案下方「hero：輪播」區塊。這裡只保留基底設定。 */
.hero{background:
  radial-gradient(1100px 560px at 78% -12%,#0C3A45 0%,#072028 58%),
  linear-gradient(160deg,#0A2E36 0%,#072028 100%);
  color:#fff;overflow:hidden;position:relative}

/* ---- trust ---- */
.trust{background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust .in{max-width:1160px;margin:0 auto;padding:20px 4vw;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;text-align:center}
@media(max-width:760px){.trust .in{grid-template-columns:1fr 1fr}}
.trust .tk{width:30px;height:30px;border-radius:50%;background:var(--blue);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;margin-bottom:4px}
.trust b{color:var(--blue-d);font-size:16px;display:block}
.trust small{color:var(--gray);font-size:12.5px;display:block}

/* ---- 數據帶（數字會動）---- */
.stats{background:var(--navy);color:#fff;padding:34px 4vw}
.stats .sin{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;text-align:center}
@media(max-width:760px){.stats .sin{grid-template-columns:repeat(2,1fr);gap:22px 10px}}
.sitem b{display:block;font-size:38px;font-weight:900;color:#fff;line-height:1.15;
  font-variant-numeric:tabular-nums;letter-spacing:-1px}
.sitem span{display:block;font-size:13px;color:#A9C0BD;margin-top:3px}

/* ---- ask banner ---- */
.ask{max-width:1160px;margin:44px auto 0;padding:0 4vw}.ask .box{background:linear-gradient(120deg,var(--navy),var(--blue-d));border-radius:8px;color:#fff;padding:28px 32px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.ask .box h3{font-size:21px;line-height:1.5}
.ask .box p{opacity:.9;font-size:14.5px;margin-top:4px}
.ask .box .btn{background:#fff;color:var(--blue-d)}

/* ---- section ---- */
.sec{max-width:1160px;margin:56px auto 0;padding:0 4vw}
/* 🔴 都督專屬：區塊標題加朱砂「軍令」方印，東方將領感而非一般科技站 */
.sec h2,.sec-h2{font-size:27px;color:var(--blue-d);text-align:center;line-height:1.4;position:relative;display:inline-block;padding-bottom:12px}
.sec h2:after,.sec-h2:after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:0;width:52px;height:4px;background:var(--seal);border-radius:2px}
.sec .sub{text-align:center;color:var(--gray);font-size:14.5px;margin-top:6px}
.sec .more{text-align:center;margin-top:22px}

/* ---- service cards ---- */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:30px}
@media(max-width:980px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cards{grid-template-columns:1fr}}
/* 🔴 都督專屬：卡片頂緣加墨青封線 + 編號改朱砂方印，方正硬朗而非圓潤可愛 */
.card{background:#fff;border:1px solid var(--line);border-top:3px solid var(--blue-d);border-radius:6px;padding:22px 20px;box-shadow:var(--shadow);display:block;transition:.2s;position:relative}
a.card:hover{box-shadow:0 10px 26px rgba(10,46,54,.18);transform:translateY(-3px);border-color:var(--sky);border-top-color:var(--seal)}
/* 編號做成「方印」：朱砂底、白字、方角 —— 像蓋上去的章 */
.card .n{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:900;color:#fff;background:var(--seal);border-radius:4px;
  line-height:1;letter-spacing:.5px;box-shadow:0 2px 5px rgba(168,58,43,.28)}
.card b{display:block;color:var(--blue-d);margin:12px 0 6px;font-size:16.5px}
.card p{color:var(--gray);font-size:13.5px;line-height:1.75}

/* ---- tech band ---- */
.tech{background:var(--bg);border-radius:8px;padding:36px 4vw;max-width:1160px;margin:56px auto 0}
.tech h2{text-align:center;color:var(--blue-d);font-size:26px}
.tech .lead{text-align:center;color:var(--gray);margin-top:6px;font-size:14.5px}
.tflow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px}
@media(max-width:820px){.tflow{grid-template-columns:1fr 1fr}}
.tf{background:#fff;border-radius:8px;padding:18px;text-align:center;border-top:3px solid var(--blue-d);box-shadow:var(--shadow)}
/* 步驟編號同樣用朱砂方印，與服務卡一致 */
.tf .n{width:34px;height:34px;border-radius:4px;background:var(--seal);color:#fff;font-weight:800;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 2px 5px rgba(168,58,43,.28)}
.tf b{display:block;color:var(--blue-d);margin:8px 0 4px;font-size:15.5px}
.tf small{color:var(--gray);font-size:12.5px}

/* ---- diagnosis tool ---- */
.diag{max-width:860px;margin:56px auto 0;padding:0 4vw}
.diag .box{border:2px dashed var(--cyan);border-radius:8px;padding:26px;background:#fff}
.diag h2{font-size:23px;color:var(--blue-d)}
.diag .hint{color:var(--gray);font-size:14px;margin:4px 0 14px}
.dopt{display:block;width:100%;text-align:left;background:var(--bg);border:1.5px solid var(--line);border-radius:5px;padding:12px 16px;margin:8px 0;font-size:15px;font-weight:700;color:var(--ink)}
.dopt:hover,.dopt.on{background:#E4F1F4;border-color:var(--cyan)}
.dopt .dot{display:inline-block;width:9px;height:9px;border-radius:2px;background:var(--seal);margin-right:10px;vertical-align:middle}
.dres{display:none;background:#E4EDE4;border-radius:6px;padding:16px 18px;margin-top:14px;font-size:14.5px}
.dres.show{display:block}
.dres b{color:#1E4A3C}
.dres .adv{color:#2A5E4A;display:block;margin-top:4px}
.dres .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}

/* ---- case grid ---- */
.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
@media(max-width:880px){.cgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.cgrid{grid-template-columns:1fr}}
.art{border:1px solid var(--line);border-top:3px solid var(--blue-d);border-radius:6px;overflow:hidden;background:#fff;box-shadow:var(--shadow);display:block}
.art:hover{border-color:var(--sky)}
.art img{width:100%;height:200px;object-fit:cover}
.art .b{padding:16px 18px}
.art .a{color:var(--sky);font-weight:700;font-size:12.5px}
.art .d{color:var(--gray);font-size:12px;float:right;font-weight:600}
.art b{display:block;color:var(--blue-d);margin-top:4px;font-size:15.5px;clear:both}
.art .a{color:var(--seal)}
.art p{color:var(--gray);font-size:13px;margin-top:6px}

/* ---- area chips ---- */
.areas{max-width:1160px;margin:56px auto 0;padding:0 4vw;text-align:center}
.areas h2{color:var(--blue-d);font-size:26px}
.ar{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:20px;max-width:940px;margin-left:auto;margin-right:auto}
.ar a{background:#fff;border:1px solid var(--line);color:var(--blue-d);border-radius:4px;padding:8px 18px;font-size:14px;font-weight:600}
.ar a.hot{background:var(--blue);border-color:var(--blue);color:#fff}
.ar a:hover{border-color:var(--blue)}

/* ---- faq ---- */
.faq{max-width:860px;margin:28px auto 0;padding:0 4vw}
.fitem{background:#fff;border:1px solid var(--line);border-left:3px solid var(--blue-d);border-radius:6px;padding:16px 20px;margin:10px 0;box-shadow:var(--shadow)}
.fitem b{color:var(--blue-d);display:block}
.fitem p{margin-top:6px;color:#3A4A46;font-size:14.5px}

/* ---- knowledge list ---- */
.klist{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:26px}
@media(max-width:760px){.klist{grid-template-columns:1fr}}
.kitem{border:1px solid var(--line);border-top:3px solid var(--blue-d);border-radius:6px;padding:18px 20px;background:#fff;display:block}
.kitem:hover{border-color:var(--sky)}
.kitem .cat{display:inline-block;background:#F3E2DD;color:var(--seal);font-size:12px;font-weight:700;border-radius:3px;padding:2px 9px}
.kitem b{display:block;color:var(--blue-d);margin-top:8px;font-size:16px}
.kitem p{color:var(--gray);font-size:13.5px;margin-top:5px}

/* ---- CTA band ---- */
.band{margin-top:64px;background:linear-gradient(120deg,var(--navy),var(--blue-d));color:#fff;padding:44px 4vw;text-align:center}
.band h2{font-size:25px}
.band p{color:#C2D2CF;margin-top:8px;font-size:15px}
.band .cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:20px}

/* ---- inner page ---- */
.phead{background:linear-gradient(120deg,var(--blue-d),var(--blue));color:#fff;padding:36px 4vw}
.phead .in{max-width:1160px;margin:0 auto}
.crumb{font-size:13px;opacity:.85;margin-bottom:8px}
.crumb a{color:#D8E4E2}
.phead h1{font-size:clamp(25px,3.2vw,33px);font-weight:900;line-height:1.4}
.phead p{margin-top:8px;color:#C9D9D6;font-size:15px;max-width:820px}
.pbody{max-width:900px;margin:36px auto 0;padding:0 4vw}

/* ---- article ---- */
.article h2{font-size:22px;color:var(--blue-d);margin:32px 0 10px;padding-left:12px;border-left:4px solid var(--seal)}
.article p{font-size:16px;margin:12px 0;color:#2A3A37}
.article .lead{background:var(--bg);border-radius:6px;padding:16px 20px;color:var(--gray);font-size:15px}
.case-photos{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:18px 0}
@media(max-width:560px){.case-photos{grid-template-columns:1fr}}
.case-photos img{width:100%;border-radius:6px;border:1px solid var(--line)}
.infobox{background:var(--bg);border-left:4px solid var(--seal);border-radius:6px;padding:16px 20px;margin:22px 0}
.infobox b{color:var(--blue-d)}
.kv{width:100%;border-collapse:collapse;margin-top:16px;font-size:15px}
.kv th,.kv td{border-bottom:1px solid var(--line);padding:11px 12px;text-align:left;vertical-align:top}
.kv th{width:120px;color:var(--blue-d);background:var(--bg)}
.pts{list-style:none;margin:14px 0}
.pts li{padding:8px 0 8px 26px;position:relative;color:#2A3A37}
.pts li:before{content:"";position:absolute;left:4px;top:17px;width:9px;height:9px;border-radius:50%;background:var(--sky)}

/* ---- copy helper ---- */
.copybox{background:#FBF3EC;border:1px solid #E8CFC4;border-radius:6px;padding:16px 18px;margin:20px 0}
.copybox b{color:#7A3A28;display:block;margin-bottom:6px}
.copybox .msg{background:#fff;border:1px solid #E8CFC4;border-radius:4px;padding:10px 12px;font-size:14.5px;color:#6E3626;margin:8px 0}
.copybox .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.copybtn{background:var(--amber);color:#FFF6F2;border:0;border-radius:5px;padding:9px 18px;font-weight:800;font-size:14.5px}

/* ---- 地址與商家資訊（低調呈現：不搶主視線，避免把服務範圍綁死在單一區域）---- */
.addrbox{margin:30px 0 0;padding:20px 22px;background:var(--bg);border:1px solid var(--line);
  border-left:3px solid var(--blue-d);border-radius:6px}
.addrbox>b{display:block;color:var(--blue-d);font-size:15px;margin-bottom:8px;letter-spacing:.5px}
.addrline{font-size:15.5px;color:#2A3A37;font-weight:700;letter-spacing:.5px}
.addrnote{margin-top:5px;font-size:13.5px;color:var(--gray);line-height:1.7}
.addrlinks{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap}
.addrlink{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;
  border-radius:5px;padding:8px 15px;font-size:14px;color:var(--blue-d);font-weight:700}
.addrlink:hover{border-color:var(--blue)}
/* Google 連結用四色方塊圖示，不依賴圖檔 */
.gicon{width:15px;height:15px;flex:none;border-radius:50%;position:relative;
  background:conic-gradient(#EA4335 0 25%,#4285F4 25% 50%,#FBBC05 50% 75%,#34A853 75% 100%)}
.gicon.map{border-radius:3px;background:linear-gradient(135deg,#4285F4 0 45%,#EA4335 45% 70%,#34A853 70% 100%)}

/* ---- 頁尾隱藏投稿入口（給李師傅用；低調、不搶視覺、已加 noindex）---- */
.staffonly{position:relative}
.staffonly a{color:#8FA6A3;opacity:.55;font-size:12px}
.staffonly a:hover{opacity:1;color:#D8E4E2}

/* ---- related ---- */
.related{max-width:900px;margin:44px auto 0;padding:0 4vw}
.related h2{font-size:20px;color:var(--blue-d);margin-bottom:12px}
.rel{display:flex;flex-wrap:wrap;gap:9px}
.rel a{border:1px solid var(--line);border-radius:4px;padding:7px 15px;font-size:14px;color:var(--blue-d);background:#fff}

/* ---- footer ---- */
.ft{background:var(--blue-d);color:#B6C7C4;margin-top:64px;padding:40px 4vw 46px;font-size:13.5px}
.ft .in{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px}
@media(max-width:760px){.ft .in{grid-template-columns:1fr}}
.ft b{color:#fff;font-size:17px}
.ftmain{font-size:14px;line-height:1.85}
.ft a{color:#D8E4E2}

/* 🔴 2026-11-11 Jason 第二次指示（頁尾重複性太高）：
   原本頁尾三顆大按鈕（撥打／LINE／報修）跟頁面上方的 .band CTA 幾乎一模一樣，
   桌機往下捲會看到兩次同樣的三顆按鈕 → 改成「精簡文字列」，
   大按鈕只留在 .band（頁面內的行動呼籲）與手機底部固定列。 */
.ftl{display:block;margin-top:7px;color:#DCE9E7;font-size:14px;font-weight:700;
  border-left:3px solid rgba(255,255,255,.22);padding-left:10px;transition:.18s}
.ftl:hover{color:#fff;border-left-color:var(--amber)}
.ftl.tel{border-left-color:var(--amber)}
.ftl.line{border-left-color:var(--green)}
.ftl.rep{border-left-color:#5FB8D4}
.ftlink{color:#DCE9E7;font-weight:700;font-size:14px}
.ftlink:hover{color:#fff}
/* 🔴 2026-11-11 Jason 第三次指示：右下角製作方署名（相似色、低調）。
   依 00_技術資產總表 2026-11-08「頁尾雙署名」定案格式：
   製作方品牌 × 開站系統，各帶一個連結關鍵字（實際文字與網址由資料源帶入，
   此處刻意不寫死，避免誤植也避免與禁用詞清單衝突）。
   🔴 反方提醒（不可省略）：每頁同一組精確比對錨文字可能被 Google 視為不自然連結配置
   → 只用「品牌名＋一個自然詞」，不堆字、不隱藏、不塞多個關鍵字。 */
.fine{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.finel{max-width:1160px;margin:26px auto 0;padding-top:16px;border-top:1px solid rgba(255,255,255,.16);
  font-size:12.5px;opacity:.85;flex:1 1 460px}
.byline{margin:26px 0 0;padding-top:16px;border-top:1px solid rgba(255,255,255,.10);
  font-size:12px;color:#7E9996;letter-spacing:.3px;text-align:right;flex:0 0 auto}
.byline a{color:#9FB8B5;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.18);
  padding-bottom:1px;transition:.18s}
.byline a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.5)}
@media(max-width:760px){
  .fine{display:block}
  .finel{margin-top:20px}
  .byline{margin-top:12px;padding-top:12px;text-align:left}
}

/* ---- 頁尾隱藏投稿入口（給李師傅用；低調、不搶視覺、已加 noindex）---- */
.staffonly{position:relative}
.staffonly a{color:#8FA6A3;opacity:.55;font-size:12px}
.staffonly a:hover{opacity:1;color:#D8E4E2}

/* ---- hero：輪播（2026-11-11 改版）----
   🔴 Jason 指示：首頁要「輪播的大器感」＋ 手機一進來先看到圖不是字。
   設計：滿版照片輪播，文字壓在照片上（深色遮罩）。
   手機版比例調高（照片更大、文字更少）→ 進來先看見畫面。
   ⚠️ 只動 transform/opacity（輪播用 translateX），不動 width/height/top/left，
      避免破壞版面與手機版溢出量測。 */
.hero.carousel{background:#072028;color:#fff;overflow:hidden;position:relative;
  padding-bottom:0;min-height:clamp(460px,74vh,760px);display:flex;flex-direction:column;justify-content:flex-end}
.hero .slides{position:absolute;inset:0;overflow:hidden}
.hero .slide{position:absolute;inset:0;opacity:0;transform:translateX(28px);
  transition:opacity .75s ease,transform .9s cubic-bezier(.22,.7,.3,1);pointer-events:none}
.hero .slide.on{opacity:1;transform:translateX(0);pointer-events:auto;z-index:2}
.hero .slide img{width:100%;height:100%;object-fit:cover;object-position:center 46%;
  transform:scale(1.04);transition:transform 6s linear}
.hero .slide.on img{transform:scale(1.1)}
.hero .slide .ovl{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,32,40,.62) 0%,rgba(7,32,40,.38) 34%,rgba(7,32,40,.88) 82%,rgba(7,32,40,.96) 100%)}
.hero .slide .txt{position:absolute;left:0;right:0;bottom:0;z-index:3;max-width:1160px;margin:0 auto;
  padding:0 4vw 128px}
/* 🔴 2026-11-11 碰撞修正（結構性）：
   原本 .slide .txt（絕對定位貼 hero 底部）與 .herocta（在 hero 內）爭同一塊底部空間，
   靠 padding 數字硬猜誰蓋誰（實測重疊 119px，說明被綠色按鈕吃掉）。
   現在 .herocta 已移出輪播區成為獨立區塊 → 文字可以安心貼在輪播底部，
   控點改放在「文字上方」的安全位置。padding 只留基本的呼吸空間。 */
/* 🔴 2026-11-11 Jason 第三次指示：按鈕移進橫幅右側 → 文字改「左欄」。
   左右分欄是結構性解法：兩個欄位水平區隔，**不可能互相重疊**，
   不再靠 padding 數字硬猜誰蓋誰（舊版曾實測重疊 119px，說明被綠鈕吃掉）。
   left 用 max(4vw, 容器外距) 對齊 1160px 內容欄，與頁尾/導覽同一條基準線。 */
.hero .slide .txt{position:absolute;left:max(4vw,calc((100% - 1160px)/2));right:auto;bottom:0;z-index:3;
  max-width:min(54%, 620px);margin:0;
  padding:0 0 120px}
.hero .slide .sk{display:inline-block;background:var(--seal);color:#fff;font-size:12.5px;font-weight:800;
  letter-spacing:2px;padding:5px 13px;border-radius:3px;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.hero .slide h2{font-size:clamp(27px,4.6vw,50px);font-weight:900;line-height:1.24;margin-top:16px;
  max-width:17ch;text-shadow:0 2px 18px rgba(0,0,0,.55)}
.hero .slide p{margin-top:14px;color:#DCE9E7;font-size:clamp(14.5px,1.35vw,17px);line-height:1.8;
  max-width:50ch;text-shadow:0 1px 12px rgba(0,0,0,.5)}
/* 輪播控制（🔴 2026-11-11：移到輪播右上角，不再錨底部。
   底部現在是文字專屬的位置，控點放底部會壓到說明段落。 */
.hero .ctrls{position:absolute;right:4vw;top:22px;z-index:6;display:flex;align-items:center;gap:12px}.hero .cbtn{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.42);
  background:rgba(7,32,40,.5);color:#fff;font-size:26px;line-height:1;display:flex;align-items:center;
  justify-content:center;transition:.18s;flex:none}
.hero .cbtn:hover{background:var(--seal);border-color:var(--seal)}
.hero .dots{display:flex;gap:8px;align-items:center}
.hero .dot{width:11px;height:11px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,.42);transition:.22s}
.hero .dot[aria-selected="true"]{background:var(--seal);width:34px;border-radius:6px}
/* 主行動按鈕列（🔴 2026-11-11 移出輪播區，成為獨立區塊）
   原本 .herocta 在 .hero 內，與絕對定位貼底的 .slide .txt 爭同一塊空間（實測重疊 119px）。
   現在它是 .hero 之後的獨立區塊 → 結構上不可能重疊。
   🔴 底色必須滿版：若沿用 max-width:1160px，兩側會露出頁底白邊（實測截圖確認）。
   解法：區塊本身滿版寬，內容用 padding 內距做「置中」而不是用 max-width。 */
/* 🔴 2026-11-11：.herocta 移進輪播區、絕對定位在「右側欄」。
   為什麼這樣就不會重疊：文字欄 .slide .txt 寬度上限 54% 且靠左，
   按鈕欄靠右、中間留白 ≥ 8vw → 兩欄水平區隔，結構上不可能相交。
   三顆按鈕直向排列 → 視覺上是一個「行動面板」，跟左邊文字形成對稱。 */
.herocta{position:absolute;z-index:7;right:max(4vw,calc((100% - 1160px)/2));bottom:0;
  width:232px;padding:0 0 120px;display:flex;flex-direction:column;gap:11px;align-items:stretch}
.herocta .btn{width:100%;justify-content:center}
.herocta .btn{box-shadow:0 6px 20px rgba(0,0,0,.28)}
.herocta .o2{background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.55);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 22px;border-radius:6px;
  font-weight:800;font-size:16px;line-height:1.4;text-align:center}
.herocta .o2:hover{background:rgba(255,255,255,.24)}
/* 移出後按鈕列有自己的底色，.o2 的底色要調成不透明才看得出邊界 */

@media(max-width:760px){
  /* 🔴 2026-11-11：輪播高度改為 60vh。
     原因：.mfix（底部固定列）在手機版固定佔住視窗最下方 62px。
     原本 hero 用 74vh，輪播結束在 y=713 → 按鈕列落在 713 之後，
     正好被固定列壓住。改成 60vh 後，輪播結束在 y≈604，
     按鈕列整列（→~745 之前）落在固定列（718）之上 → 不會被切半。
     60vh 的實測值：輪播 136→604，按鈕列 604→~760，其中按鈕 616→667／676→727。 */
  .hero.carousel{min-height:clamp(440px,60vh,620px)}
  /* 🔴 2026-11-11 手機版修正（三項，實測數據）：
     ① 手機首圖 y=190px：topbar(54)+hd(82)+nav(54) 全是文字佔掉首屏
        → 手機版隱藏 topbar（服務範圍/電話那一列）→ 首圖提前到 y≈136
        → topbar 的資訊在頁尾與固定列都有，刪掉不損失任何聯絡管道。
     ② 「線上報修」鈕與底部固定列 .mfix 重疊 → 按不到
        → 輪播高度改 60vh（見上），讓按鈕列落在固定列之上。
     ③ 輪播圖改裁下方：46% 會裁到壁癌水漬的無特徵紋理區，
        整張看起來只是一片糊掉的牆；62% 取到水漬與裂縫的交界。 */
  .topbar{display:none}
  .hero .slide .txt{left:0;right:0;max-width:none;padding:0 4vw 150px}
  .hero .slide h2{max-width:none;font-size:clamp(24px,7.4vw,34px)}
  .hero .slide p{font-size:14.5px;max-width:none}
  /* 控點已統一移到輪播右上角（見 .hero .ctrls） */
  .hero .ctrls{top:18px}
  /* 🔴 手機版隱藏橫幅內按鈕列：底部固定列 .mfix 已有撥打／LINE／線上報修三通道，
     再放一次就是 Jason 說的「太多聯絡重複出現」。 */
  .herocta{display:none}
  .hero .slide img{object-position:center 62%}
}
/* ---- 急迫感：三怕對應（2026-11-11 新增）---- */
.urgent{max-width:1000px;margin:0 auto;padding:52px 4vw 8px;text-align:center}
.urgent h2{font-size:clamp(22px,3vw,29px);color:var(--blue-d);line-height:1.4;position:relative;
  display:inline-block;padding-bottom:12px}
.urgent h2:after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:0;width:52px;height:4px;
  background:var(--seal);border-radius:2px}
.urgent .lead{color:var(--gray);font-size:15px;margin-top:10px;max-width:640px;margin-left:auto;margin-right:auto}
.urgent .fears{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px;text-align:left}
@media(max-width:880px){.urgent .fears{grid-template-columns:1fr}}
.urgent .fear{background:#fff;border:1px solid var(--line);border-top:3px solid var(--seal);border-radius:6px;
  padding:22px 20px;box-shadow:var(--shadow)}
.urgent .fear .ic{width:42px;height:42px;border-radius:50%;background:var(--bg);display:flex;
  align-items:center;justify-content:center;margin-bottom:12px;position:relative}
.urgent .fear .ic::after{content:"";width:19px;height:19px;border:2.5px solid var(--seal);border-radius:50%}
.urgent .fear .ic-clock::after{border-radius:50%;border-style:solid;clip-path:polygon(0 0,100% 0,100% 40%,0 40%)}
.urgent .fear .ic-money::after{border-radius:2px}
.urgent .fear .ic-shield::after{border-radius:3px 3px 12px 12px;clip-path:polygon(50% 0,100% 22%,100% 62%,50% 100%,0 62%,0 22%)}
.urgent .fear b{display:block;color:var(--blue-d);font-size:17px;line-height:1.5}
.urgent .fear .why{color:var(--seal);font-size:13.5px;font-weight:700;margin-top:8px;line-height:1.7}
.urgent .fear .ans{color:var(--gray);font-size:14px;margin-top:10px;line-height:1.85}
.urgent .more{text-align:center;margin-top:26px}
/* ---- 立即聯絡三通道（聯絡頁／報修頁）---- */
.contactbar{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:26px}
@media(max-width:700px){.contactbar{grid-template-columns:1fr}}
.contactbar .cb{display:block;border-radius:6px;padding:18px 20px;border-left:4px solid var(--blue);
  background:var(--bg);transition:.18s}
.contactbar .cb:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.contactbar .cb b{display:block;color:var(--blue-d);font-size:18px}
.contactbar .cb small{display:block;color:var(--gray);font-size:13px;margin-top:4px}
.contactbar .cb.tel{border-left-color:var(--amber);background:#FBEEE9}
.contactbar .cb.line{border-left-color:var(--green);background:#E7F6EC}
.contactbar .cb.rep{border-left-color:var(--blue);background:#E4F1F4}
/* ---- 線上報修表單 ---- */
.rep-intro{background:var(--bg);border-radius:6px;padding:16px 20px;color:var(--ink);font-size:15px;
  line-height:1.85;margin-bottom:24px}
.repform{background:#fff;border:1px solid var(--line);border-radius:8px;padding:26px 24px;box-shadow:var(--shadow)}
.repform .frow{margin-bottom:20px}
.repform .frow.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.repform .frow.two{grid-template-columns:1fr}}
.repform label{display:block;font-weight:800;color:var(--blue-d);font-size:15px;margin-bottom:7px}
.repform label .opt{font-weight:400;color:var(--gray);font-size:12.5px}
.repform input[type=text],.repform input[type=tel],.repform select,.repform textarea{
  width:100%;border:1.5px solid var(--line);border-radius:5px;padding:12px 14px;font-size:15.5px;
  font-family:inherit;color:var(--ink);background:#fff;line-height:1.6}
.repform input:focus,.repform select:focus,.repform textarea:focus{
  outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(46,147,184,.13)}
.repform textarea{resize:vertical;min-height:110px}
.repform input[type=file]{font-size:14px;padding:10px 0}
.repform .hint{color:var(--gray);font-size:12.5px;margin-top:7px;line-height:1.7}
.repform .big{width:100%;font-size:17px;padding:15px}
@media(max-width:560px){.repform .big{width:100%}}
.represult{display:none;margin-top:26px;background:#E7F6EC;border:1px solid #9CD3AE;border-radius:8px;padding:24px}
.represult.show{display:block}
.represult .rphead{font-weight:800;color:#1E4A3C;font-size:16px;margin-bottom:10px}
.represult .rpmsg{background:#fff;border:1px solid #BFE0CC;border-radius:5px;padding:16px;
  font-size:14.5px;line-height:1.95;white-space:pre-wrap;word-break:break-word;color:var(--ink)}
.represult .rpbtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.represult .hint{margin-top:12px;color:#2A5E4A;font-size:13px}

/* ---- mobile fixed ---- */
.mfix{position:fixed;bottom:0;left:0;right:0;display:none;z-index:99;box-shadow:0 -3px 12px rgba(0,0,0,.18)}
.mfix a{flex:1;text-align:center;padding:14px 6px;font-weight:800;font-size:16px;line-height:1.3}
.mfix a small{display:block;font-size:10.5px;font-weight:600;opacity:.9}
/* 🔴 2026-11-11 Jason 第二次指示：手機版固定列三通道（撥打／LINE／線上報修）。
   三色區分：琥珀=打電話、綠=LINE、青藍=線上報修 → 一眼分辨去哪裡。 */
.mfix .l{background:var(--green);color:#fff}
.mfix .c{background:var(--amber);color:#FFF6F2}
.mfix .c.rep{background:#1F6E8C;color:#EAF6FA}
.mfix .c.rep:active{background:#175873}
/* 三通道時字要小一點才塞得下（360px 寬 ÷ 3 = 120px） */
.mfix a{padding:12px 4px;font-size:15px}
.mfix a small{font-size:10px}
@media(max-width:760px){.mfix{display:flex}body{padding-bottom:56px}.hd .tel{display:none}.hd .r .btn{font-size:14px;padding:9px 14px}}
/* 🔴 2026-11-11：.mfix 是 position:fixed 固定在視窗底部（高 62px）。
   處理方式改為「讓首頁輪播高度配合」→ 見 @media(max-width:760px) 的 .hero.carousel 62vh。
   不再對輪播加 padding-bottom（那是治標，且會讓圖片變小）。 */

/* ---- 窄螢幕（≤520px）再收一層：頁首不擠、兩顆大按鈕改上下好按 ---- */
@media(max-width:520px){
  .hd .r .btn{display:none}            /* 底部已有固定 LINE 鈕，頁首不重複 */
  .hd .t small{font-size:10.5px;line-height:1.45;white-space:normal}
  .hd img{height:46px;width:46px}
  .topbar{font-size:12px;line-height:1.6}
  .hero .slide .sk{font-size:11.5px;letter-spacing:1.2px;padding:4px 10px}
  .hero .slide .txt{padding:0 4vw 150px}
  .hero .ctrls{top:16px}
  .ask .box{padding:22px 20px}
  .ask .box h3{font-size:19px}
  .ask .box .btn{width:100%}
  .band .cta{flex-direction:column}
  .band .cta .btn{width:100%}
  .diag .box{padding:20px 16px}
  .trust .in{grid-template-columns:1fr 1fr;gap:10px}
  .urgent{padding:40px 4vw 4px}
  .urgent .fear{padding:20px 18px}
  .contactbar .cb{padding:16px 18px}
  .repform{padding:20px 16px}
  .represult{padding:18px 16px}
  .represult .rpbtns{flex-direction:column}
  .represult .rpbtns .btn{width:100%}
}

/* ============================================================
   🔴 2026-11-11 手機版導覽列「這個可以滑」提示
   ------------------------------------------------------------
   問題：.nav .in 是橫向捲動（8 個項目在 390px 手機只露 3～4 個，
        右邊被切斷）。但一般人的心智模型是「三條線下拉選單」，
        看到被切邊的選單不會想到「可以滑」→ 服務項目／案例實績等
        頁面就點不到，等於少了一半入口。

   解法（三層，只在「真的塞不下」時才出現，桌機 1160px 放得下 → 完全不受影響）：
     ① 右緣漸層遮罩 + 白色 chevron 箭頭（上下浮動）
        → 靜態暗示「右邊還有東西沒露出來」
     ② 進場自動 peek（往右滑一下再滑回）
        → 動態暗示「它自己會動」→ 使用者馬上知道可以滑
     ③ 滑到最右時遮罩淡出
        → 最後一項完整露出來，不會被遮罩擋住

   🔴 為什麼用 JS 判斷溢出、而不是 @media 寫死手機寬度？
      因為 761～980px 的平板/小筆電也可能塞不下，用 media 會漏；
      用 JS 量實際寬度才準（.navscroll 這個 class 是 JS 加的）。
   🔴 為什麼用 class 不用 :has()？舊 Safari 不支援 :has()，
      寧可多寫幾行 JS 也不要手機上失效。
   ============================================================ */

/* 右緣漸層：末端色 = .nav 背景色 var(--blue-d) → 遮罩與背景無縫 */
.nav.navscroll::after{content:'';position:absolute;right:0;top:0;bottom:0;width:46px;
  background:linear-gradient(90deg,transparent,var(--blue-d) 76%);
  pointer-events:none;opacity:1;transition:opacity .28s ease;z-index:1}

/* 右緣箭頭（chevron 用兩條 border 畫，免圖片免 emoji） */
.nav.navscroll::before{content:'';position:absolute;right:15px;top:50%;width:9px;height:9px;
  border-right:2px solid rgba(255,255,255,.92);border-top:2px solid rgba(255,255,255,.92);
  transform:translateY(-50%) rotate(45deg);pointer-events:none;z-index:2;
  animation:navHint 1.5s ease-in-out infinite}

/* 滑到最右 → 遮罩與箭頭淡出（最後一項完整露出來） */
.nav.navscroll.navend::after{opacity:0}
/* 🔴 箭頭是 infinite 動畫，動畫的 keyframes 會蓋掉靜態的 opacity:0
   → 淡出時必須同時把 animation 關掉，否則箭頭會一直跳出來。 */
.nav.navscroll.navend::before{opacity:0;animation:none}

/* 進場自動 peek：整條選單往左滑一下（= 內容往右移）再滑回來 */
.nav.navscroll .in{animation:navPeek 2.1s ease-out .55s 1 both}
.nav.navtouch .in{animation:none}

@keyframes navHint{0%,100%{transform:translateY(-50%) rotate(45deg) translateX(0);opacity:.85}
  50%{transform:translateY(-50%) rotate(45deg) translateX(4px);opacity:1}}
@keyframes navPeek{0%{transform:translateX(0)}
  20%{transform:translateX(-56px)}
  55%{transform:translateX(-56px)}
  100%{transform:translateX(0)}}

/* 無障礙：使用者把系統設成「減少動態效果」→ 不播 peek、不浮動箭頭 */
@media(prefers-reduced-motion:reduce){
  .nav.navscroll .in{animation:none}
  .nav.navscroll::before{animation:none}
}