/* ===========================================================
   澳門樓宇滲漏水簡易自查
   視覺依據：宇見顧問有限公司《品牌手冊》v1.0（2026.08.03）
   =========================================================== */

:root{
  /* 02 / VISUAL IDENTITY — 指定色票 */
  --uv-blue:#385890;      /* U VISION BLUE　主色 */
  --deep-navy:#183C70;    /* DEEP NAVY　標題、深底 */
  --vision-mid:#6F8FB8;   /* VISION MID　輔助、圖表 */
  --clear-sky:#DCE8F4;    /* CLEAR SKY　底色、分隔 */
  --ink:#243447;          /* INK　正文、資訊 */
  --mist:#F2F6FA;         /* MIST　大面積淺底 */
  --warm-white:#F5F3EF;   /* WARM WHITE　柔和對比 */
  --hair:#D6E0EC;         /* 由 CLEAR SKY 派生的細線 */
  --ink-soft:#5A6B7D;     /* 由 INK 派生的次級文字 */

  --zh:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  --en:"Montserrat","Aptos",Arial,sans-serif;

  --measure:720px;   /* 正文欄寬，維持寬邊界與單一主軸 */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:#fff;
  color:var(--ink);
  font-family:var(--zh);
  font-size:17px;
  line-height:1.62;          /* 手冊：長文行距 1.45–1.65 */
  -webkit-text-size-adjust:100%;
}
img{max-width:100%;display:block}
a{color:var(--uv-blue)}
a:hover{color:var(--deep-navy)}
h1,h2,h3{font-weight:700;line-height:1.35;margin:0 0 .5em;text-wrap:balance}
p{margin:0 0 1.05em}
:focus-visible{outline:2px solid var(--uv-blue);outline-offset:3px}

.wrap{max-width:var(--measure);margin:0 auto;padding:0 28px}
[id]{scroll-margin-top:84px}

/* ---------- 頁首 ---------- */
.topbar{
  position:sticky;top:0;z-index:40;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--hair);
}
.topbar .wrap{display:flex;align-items:center;gap:14px;min-height:62px}
.mark{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--deep-navy)}
.mark img{width:30px;height:auto}
.mark span{font-weight:600;font-size:.96rem;letter-spacing:.2px}
.topbar .action{margin-left:auto}

/* ---------- 按鈕與連結 ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font:inherit;font-weight:600;text-decoration:none;border:none;cursor:pointer;
  padding:13px 26px;border-radius:4px;transition:background .16s,color .16s;
}
.btn-primary{background:var(--uv-blue);color:#fff}
.btn-primary:hover{background:var(--deep-navy);color:#fff}
.btn-outline{background:transparent;color:var(--uv-blue);box-shadow:inset 0 0 0 1px var(--vision-mid)}
.btn-outline:hover{background:var(--clear-sky);color:var(--deep-navy)}
.btn-sm{padding:9px 18px;font-size:.9rem}
.btn img{width:18px;height:18px}

.arrow{
  display:inline-flex;align-items:center;gap:7px;
  font-weight:600;text-decoration:none;
}
.arrow::after{content:"→";font-family:var(--en);transition:transform .16s}
.arrow:hover::after{transform:translateX(3px)}

/* ---------- 首屏 ---------- */
.hero{padding:52px 0 46px;background:var(--mist);border-bottom:1px solid var(--hair)}
.hero h1{font-size:2.15rem;color:var(--deep-navy);margin-bottom:.4em}
.hero .lead{font-size:1.12rem;color:var(--ink-soft);max-width:30em;margin-bottom:26px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- 區段 ---------- */
section{padding:56px 0}
.sec-label{
  font-family:var(--en);font-size:.74rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--vision-mid);margin-bottom:10px;
}
h2{font-size:1.62rem;color:var(--deep-navy)}
.sec-lead{color:var(--ink-soft);max-width:36em;margin-bottom:8px}

/* ---------- 3 分鐘初步自診 ---------- */
.cases{margin-top:34px}
.case{padding-top:30px;border-top:1px solid var(--hair)}
.case:first-child{border-top:none;padding-top:0}
.case-no{
  font-family:var(--en);font-size:.95rem;font-weight:600;letter-spacing:.14em;
  color:var(--vision-mid);display:block;margin-bottom:4px;
}
.case h3{font-size:1.2rem;color:var(--deep-navy)}
.field{margin:0 0 14px}
.field .k{
  display:block;font-size:.78rem;font-weight:600;letter-spacing:.1em;
  color:var(--vision-mid);margin-bottom:2px;
}
/* 水路示意圖 */
.dia{margin:0 0 18px;border-radius:4px;overflow:hidden}
.dia img{width:100%;height:auto}

.method{
  background:var(--clear-sky);border-radius:4px;
  padding:18px 20px;margin:0 0 30px;
}
.method .k{color:var(--uv-blue)}
.method p{margin:0}
.method .caveat{
  display:block;margin-top:10px;font-size:.88rem;color:var(--ink-soft);
}

/* ---------- 需要進一步協助 ---------- */
.help{background:var(--mist);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.routes{margin:26px 0 0;padding:0;list-style:none}
.routes > li{padding:22px 0;border-top:1px solid var(--hair)}
.routes h4{margin:0 0 .35em;font-size:1.06rem;color:var(--deep-navy);font-weight:700}
.routes p{margin:0 0 .6em;color:var(--ink-soft)}
.routes .hot{font-family:var(--en);font-weight:600;color:var(--ink);letter-spacing:.03em}

/* 官方渠道與專業協助之間的過場句 */
.handoff{
  background:var(--clear-sky);border-radius:4px;
  margin:34px 0 0;padding:24px 26px;
  text-align:center;font-size:1.14rem;font-weight:600;
  color:var(--deep-navy);line-height:1.6;
}

/* 三條路共用的「適合：」句 */
.fit{font-size:.95rem;color:var(--ink-soft);margin:0 0 .7em}
.fit b{color:var(--uv-blue);font-weight:700}

/* 官方小冊子 */
.booklets{margin-top:18px;padding-left:16px;border-left:2px solid var(--clear-sky)}
.bk-title{display:inline-block;font-weight:600;font-size:.94rem;margin-bottom:6px}
.booklets ul{margin:0;padding-left:1.1em;list-style:disc;color:var(--vision-mid)}
.booklets li{margin:0 0 .25em;padding:0;border:none}
.booklets li a{font-size:.94rem;font-weight:500;display:inline-flex;align-items:baseline;gap:7px}
.pdf{
  font-family:var(--en);font-size:.66rem;font-weight:600;letter-spacing:.08em;
  color:var(--vision-mid);border:1px solid var(--vision-mid);
  border-radius:2px;padding:0 4px;line-height:1.5;
}

/* ---------- 宇見顧問 ---------- */
.uv{background:#fff;border:1px solid var(--hair);border-top:3px solid var(--uv-blue);
    border-radius:4px;padding:32px 30px;margin-top:18px}
.uv .logo{width:320px;max-width:92%;height:auto;margin:0 0 22px}
.uv h3{font-size:1.28rem;color:var(--deep-navy);margin-bottom:.15em}
/* 標誌已載明三語名稱，標題只供螢幕閱讀器與搜尋引擎使用 */
.sr-title{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.uv .fit{margin-bottom:.9em}
.uv ul{margin:0 0 26px;padding-left:1.15em;color:var(--ink-soft)}
.uv ul li{margin-bottom:.3em}
.uv .cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:0}
/* 公益頁只留一個主要出口；完整聯絡方式集中在落地頁 */
.uv-alt{margin:16px 0 0;font-size:.94rem;color:var(--ink-soft)}
.uv-alt a{display:inline-flex;align-items:center;gap:7px;font-weight:600;text-decoration:none}
.uv-alt a:hover{text-decoration:underline}
.uv-alt a img{width:17px;height:17px;flex:0 0 17px}

.contact{margin:0;border-top:1px solid var(--hair);padding-top:22px}
.contact div{display:flex;gap:16px;padding:9px 0;align-items:flex-start;flex-wrap:wrap}
.contact dt{
  flex:0 0 156px;display:flex;align-items:center;gap:8px;
  font-size:.84rem;color:var(--ink-soft);line-height:1.5;padding-top:2px;
}
.contact dt img{width:17px;height:17px;flex:0 0 17px}
.contact dd{margin:0;flex:1 1 220px;min-width:0;overflow-wrap:anywhere;font-weight:500}
.contact dd small{display:block;font-size:.82rem;color:var(--ink-soft);font-weight:400}

/* ---------- 微信：複製號碼掣 ＋ 加好友二維碼 ---------- */
.wx-num{display:inline-block;margin-right:10px}
.copy{display:none}
.js .copy{
  display:inline-block;
  font:inherit;font-size:.82rem;font-weight:600;line-height:1;
  color:var(--uv-blue);background:transparent;cursor:pointer;
  border:none;box-shadow:inset 0 0 0 1px var(--vision-mid);
  border-radius:4px;padding:6px 12px;
  transition:background .16s,color .16s;
  vertical-align:2px;
}
.copy:hover{background:var(--clear-sky);color:var(--deep-navy)}
.copy.is-done{background:var(--uv-blue);color:#fff;box-shadow:none}

.wx-qr{margin:12px 0 2px}
.wx-qr img{width:152px;height:auto;border:1px solid var(--hair);border-radius:4px;background:#fff}
.wx-qr figcaption{
  margin-top:8px;max-width:28em;
  font-size:.8rem;font-weight:400;line-height:1.55;color:var(--ink-soft);
}

/* ---------- 品牌標語 ---------- */
.tagline{background:var(--warm-white);text-align:center;padding:64px 0 56px}
.tagline p{
  font-size:1.72rem;line-height:1.5;font-weight:700;color:var(--deep-navy);
  margin:0;letter-spacing:.04em;
}
.tagline .en{
  font-family:var(--en);font-size:.9rem;font-weight:400;color:var(--vision-mid);
  letter-spacing:.06em;margin-top:14px;
}

/* 水波曲線：只用於分隔與頁底，三條、線寬一致 */
.waves{display:block;width:100%;height:46px;background:var(--warm-white);
  color:var(--vision-mid);opacity:.85}

/* ---------- 頁尾 ---------- */
footer{background:var(--deep-navy);color:rgba(255,255,255,.76);padding:44px 0 38px;font-size:.88rem}
footer .disclaimer{max-width:40em;margin-bottom:26px;line-height:1.7}
footer .names{color:#fff;font-weight:600;margin-bottom:2px}
footer .names .pt,footer .names .en{
  display:block;font-family:var(--en);font-size:.8rem;font-weight:500;
  color:rgba(255,255,255,.7);letter-spacing:.05em;
}
footer .line{margin-top:14px;font-size:.84rem}
footer a{color:#BFD4EA}

/* ---------- 浮動 WhatsApp ---------- */
.fab{
  position:fixed;right:18px;bottom:18px;z-index:50;
  display:flex;align-items:center;gap:9px;
  background:var(--uv-blue);color:#fff;text-decoration:none;
  padding:12px 18px;border-radius:4px;font-weight:600;font-size:.92rem;
  box-shadow:0 6px 20px rgba(24,60,112,.28);
}
.fab:hover{background:var(--deep-navy);color:#fff}
.fab img{width:19px;height:19px}

@media print{
  .topbar,.fab,.hero-actions,.uv .cta{display:none!important}
  body{font-size:11pt}
}

@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  .hero{padding:38px 0 34px}
  .hero h1{font-size:1.72rem}
  .hero .lead{font-size:1.02rem}
  section{padding:42px 0}
  h2{font-size:1.4rem}
  .uv{padding:26px 22px}
  .uv .logo{width:100%;max-width:290px;margin-bottom:18px}
  .contact dt{flex:0 0 100%}
  .contact div{gap:6px;padding:11px 0;border-bottom:1px solid var(--hair)}
  .contact div:last-child{border-bottom:none}
  .handoff{font-size:1.04rem;padding:20px 18px;margin-top:28px}
  .tagline{padding:48px 0 42px}
  .tagline p{font-size:1.24rem}
  .fab{padding:11px 15px;font-size:.88rem}
}

/* ===========================================================
   落地頁（consult.html）
   同一套品牌色票與字體；語氣較主動，層次對比較強。
   =========================================================== */

.lp .topbar .mark span{font-size:.94rem}

/* 首屏：深藍 × 白（手冊指定用於高層級標題與重要聲明） */
.lp-hero{
  background:var(--deep-navy);color:#fff;
  padding:62px 0 56px;
}
.lp-hero h1{
  color:#fff;font-size:2.4rem;line-height:1.32;
  letter-spacing:.5px;margin-bottom:.5em;
}
.lp-hero .lead{
  font-size:1.1rem;color:rgba(255,255,255,.84);
  max-width:32em;margin-bottom:30px;
}
.btn-lg{padding:17px 32px;font-size:1.06rem}
.btn-wa{background:#25a55f;color:#fff}
.btn-wa:hover{background:#1e8a4e;color:#fff}
.lp-trust{
  list-style:none;display:flex;gap:10px 22px;flex-wrap:wrap;
  margin:26px 0 0;padding:0;font-size:.9rem;color:rgba(255,255,255,.72);
}
.lp-trust li{display:flex;align-items:center;gap:8px}
.lp-trust li::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--vision-mid);flex:0 0 6px;
}

/* 痛點 */
.lp-pain{background:var(--mist);border-bottom:1px solid var(--hair)}
.lp-list{list-style:none;padding:0;margin:30px 0 0;display:grid;gap:2px}
.lp-list li{padding:20px 0;border-top:1px solid var(--hair)}
.lp-list li:first-child{border-top:none;padding-top:6px}
.lp-list h3{font-size:1.08rem;color:var(--deep-navy);margin-bottom:.3em}
.lp-list p{margin:0;color:var(--ink-soft)}

/* 我們點幫：四步 */
.lp-steps{counter-reset:st;list-style:none;padding:0;margin:32px 0 0;display:grid;gap:20px}
.lp-steps li{position:relative;padding-left:60px;counter-increment:st}
.lp-steps li::before{
  content:counter(st);position:absolute;left:0;top:-2px;
  width:40px;height:40px;border-radius:4px;
  background:var(--clear-sky);color:var(--uv-blue);
  display:grid;place-items:center;
  font-family:var(--en);font-size:1.05rem;font-weight:600;
}
.lp-steps h3{font-size:1.1rem;color:var(--deep-navy);margin-bottom:.25em}
.lp-steps p{margin:0;color:var(--ink-soft)}

/* 差異化 */
.lp-why{background:var(--mist);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.lp-why-grid{display:grid;gap:24px;margin-top:30px}
.lp-why-grid > div{
  background:#fff;border:1px solid var(--hair);border-left:3px solid var(--uv-blue);
  border-radius:4px;padding:22px 24px;
}
.lp-why-grid h3{font-size:1.08rem;color:var(--deep-navy);margin-bottom:.3em}
.lp-why-grid p{margin:0;color:var(--ink-soft)}

/* 常見問題 */
.lp-faq{background:var(--warm-white);border-top:1px solid var(--hair)}
.lp-qa{margin:30px 0 0}
.lp-qa dt{
  font-weight:700;color:var(--deep-navy);font-size:1.05rem;
  padding-top:22px;margin-top:22px;border-top:1px solid var(--hair);
}
.lp-qa dt:first-of-type{border-top:none;margin-top:0;padding-top:0}
.lp-qa dd{margin:.5em 0 0;color:var(--ink-soft)}
.lp-qa dd b{color:var(--ink)}

/* 結尾 CTA */
.lp-cta{background:#fff;border-top:1px solid var(--hair)}
.lp .waves{background:#fff}
.lp-cta .logo{width:300px;max-width:88%;height:auto;margin:0 0 16px}
.lp-cta .slogan{
  margin:0 0 30px;font-size:1.08rem;font-weight:600;
  color:var(--deep-navy);letter-spacing:.04em;
}
.lp-cta .slogan span{
  display:block;margin-top:6px;
  font-family:var(--en);font-size:.78rem;font-weight:400;
  color:var(--vision-mid);letter-spacing:.07em;
}
.lp-cta h2{font-size:1.55rem}
.lp-cta > .wrap > p{color:var(--ink-soft);max-width:34em}
.lp-cta-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin:26px 0 32px}
.lp-cta .contact{border-top:1px solid var(--hair)}

@media (max-width:640px){
  .lp-hero{padding:44px 0 40px}
  .lp-hero h1{font-size:1.82rem}
  .lp-hero .lead{font-size:1.02rem}
  .btn-lg{padding:15px 24px;font-size:1rem;width:100%;justify-content:center}
  .lp-steps li{padding-left:52px}
  .lp-steps li::before{width:36px;height:36px}
  .lp-cta .logo{width:100%;max-width:280px;margin-bottom:14px}
  .lp-cta .slogan{font-size:1rem;margin-bottom:26px}
  .tagline p{font-size:1.4rem}
  .lp-cta-actions .btn-outline{width:100%;justify-content:center}
}