*,*::before,*::after{box-sizing:border-box}
:root{
  /* 品牌色 —— 換行業時只改這一區 */
  --navy:#0d2137; --navy2:#16324f; --blue:#1565a8; --cyan:#22a5d4;
  --tint:#1565a8;            /* 圖片統一色調（品牌色薄膜） */
  --tint-a:.22;              /* 薄膜濃度 */
  --img-sat:.78; --img-con:1.06; --img-bri:1.02;
  /* 中性色 */
  --ink:#1c2733; --muted:#5b6b7c; --line:#dde5ec; --bg:#f5f8fa;
  /* 尺度 */
  --r:11px; --r-s:7px; --gap:22px; --sec-y:56px;
}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;color:var(--ink);background:#fff;line-height:1.75;font-size:16px}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue)}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
/* header */
header{background:var(--navy);position:sticky;top:0;z-index:50;box-shadow:0 2px 12px rgba(0,0,0,.18)}
.bar{display:flex;align-items:center;gap:14px;padding:10px 0;flex-wrap:wrap}
header{position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;margin-right:auto}
.brand img{height:58px;width:auto;background:#fff;border-radius:6px;padding:3px}
.brand b{font-size:21px;letter-spacing:2px;display:block;line-height:1.2}
.brand span{font-size:11.5px;color:#9fc4de;letter-spacing:.5px}
nav{display:flex;gap:2px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
nav::-webkit-scrollbar{display:none}
nav a{color:#d6e6f2;text-decoration:none;font-size:15px;padding:8px 13px;border-radius:6px;white-space:nowrap;flex:0 0 auto}
nav a:hover{background:rgba(255,255,255,.1);color:#fff}
nav a.on,nav a[aria-current="page"]{background:var(--cyan);color:#04202f;font-weight:700}
.callbtn{background:#18b45f;color:#fff!important;padding:8px 15px;border-radius:6px;font-weight:700;text-decoration:none;font-size:15px}
/* hero */
main section.hero{background:var(--navy2);color:#fff}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding:56px 0}
.hero-txt{min-width:0}
.hero-img{min-width:0}
.hero-img img{width:100%;height:auto;display:block;border-radius:10px;
  box-shadow:0 10px 34px rgba(0,0,0,.35)}
.hero h1{font-size:clamp(30px,4.6vw,45px);margin:0 0 6px;letter-spacing:.12em;text-shadow:0 2px 14px rgba(0,0,0,.6)}
.hero .sub{font-size:clamp(15px,2.2vw,20px);color:#b9e0f4;letter-spacing:2px;margin-bottom:20px}
.hero .lead{font-size:clamp(17px,2.4vw,23px);font-weight:700;color:#fff;margin:0 0 10px;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.hero p{color:#dbeaf5}
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.btn{display:inline-block;padding:13px 26px;border-radius:7px;text-decoration:none;font-weight:700;font-size:16px}
.btn-p{background:var(--cyan);color:#04202f}
.btn-o{border:2px solid #fff;color:#fff}
/* sections */
main section{padding:56px 0}
main section:nth-of-type(even){background:var(--bg)}
h2{font-size:clamp(21px,3vw,29px);margin:0 0 6px;letter-spacing:1.5px;color:var(--navy)}
.h2sub{color:var(--muted);margin:0 0 28px;font-size:15px}
h3{font-size:19px;margin:0 0 8px;color:var(--navy);letter-spacing:.5px}
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(275px,1fr))}
.card{background:#fff;border:1px solid var(--line);border-radius:11px;padding:24px;box-shadow:0 1px 3px rgba(13,33,55,.05)}
.card.ph{padding:0;overflow:hidden}
.card.ph .txt{padding:20px 22px 24px}
.card ul{margin:10px 0 0;padding-left:19px}
.card li{margin:3px 0;color:#37485a}
.tag{display:inline-block;background:#e7f2fa;color:var(--blue);font-size:12.5px;font-weight:700;padding:3px 11px;border-radius:20px;margin-bottom:9px;letter-spacing:.5px}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:6px}
.chips span{background:#fff;border:1px solid var(--line);border-radius:7px;padding:7px 13px;font-size:14.5px;color:#2d3f52}
main section.band{background:var(--navy);color:#fff;padding:52px 0}
.band h2{color:#fff}
.band .h2sub{color:#9fc4de}
.band .card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.band .card h3{color:#8fd6f2}
.band .card li,.band .card p{color:#d5e6f2}
/* contact */
.info{width:100%;border-collapse:collapse}
.info th{text-align:left;white-space:nowrap;padding:11px 16px 11px 0;color:var(--muted);font-weight:600;vertical-align:top;width:104px;border-bottom:1px solid var(--line);font-size:15px}
.info td{padding:11px 0;border-bottom:1px solid var(--line)}
.info a{font-weight:700;text-decoration:none}
.qr{text-align:center}
.qr img{margin:0 auto;max-width:210px;border:1px solid var(--line);border-radius:10px}
/* footer */
footer{background:#08182a;color:#9db4c7;padding:34px 0 26px;font-size:14.5px}
footer a{color:#7fc4e8}
.fgrid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-bottom:22px}
.fgrid b{color:#fff;display:block;margin-bottom:7px;letter-spacing:1px}
.sig{border-top:1px solid rgba(255,255,255,.1);margin:20px 0 0;padding-top:12px;text-align:right;font-size:11px;letter-spacing:.1em}
.sig a{color:#7d94a8;text-decoration:none}
@media(max-width:640px){
 .bar{gap:8px}.brand b{font-size:17px} main section{padding:40px 0}.callbtn{order:3}
}

/* 手機底部固定聯絡列（比照上響 .callbar；桌機隱藏） */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:none;gap:8px;
  padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));
  background:rgba(255,255,255,.96);border-top:1px solid var(--line);backdrop-filter:blur(8px)}
.callbar a{flex:1 1 0;min-width:0;white-space:nowrap;text-align:center;padding:12px 8px;
  border-radius:7px;font-weight:700;font-size:clamp(14px,3.8vw,16px);text-decoration:none}
.callbar .c-tel{background:#18b45f;color:#fff}
.callbar .c-line{background:#06C755;color:#fff}
@media(max-width:640px){
  .hero-grid{grid-template-columns:1fr;gap:22px;padding:34px 0}
  .hero-img{order:2}
  .callbtn{display:none}
  .callbar{display:flex}
  body{padding-bottom:calc(66px + env(safe-area-inset-bottom,0px))}
    .brand span{display:none}
}

/* ── 圖片色調統一層 ──────────────────────────────
   目的：不同來源的圖（客戶原圖／圖庫／未來客戶自己換的照片）
   讀起來像同一套。換行業時只改 :root 的 --tint 即可整站換色調。 */
.ph-media{position:relative;line-height:0}
.ph-media img{filter:saturate(var(--img-sat)) contrast(var(--img-con)) brightness(var(--img-bri))}
.ph-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--tint);mix-blend-mode:color;opacity:var(--tint-a)}
.hero-img{position:relative}
.hero-img img{filter:saturate(var(--img-sat)) contrast(var(--img-con)) brightness(var(--img-bri))}
.hero-img::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:10px;
  background:var(--tint);mix-blend-mode:color;opacity:var(--tint-a)}

/* 服務項目卡（比照上響 .svc：編號＋短說明＋看詳細，不放圖） */
.eyebrow{font-size:12.5px;letter-spacing:.18em;font-weight:700;color:var(--cyan);margin:0 0 6px}
section .eyebrow{color:var(--blue)}
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--gap)}
.svc{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;
  display:flex;flex-direction:column;box-shadow:0 1px 3px rgba(13,33,55,.05)}
.svc .num{font-size:12px;letter-spacing:.14em;color:#0f6f93;font-weight:700;display:block;margin-bottom:8px}
.svc h3{font-size:18px;margin:0 0 8px;color:var(--navy)}
.svc p{margin:0 0 14px;font-size:15px;color:#37485a;line-height:1.7}
.svc .go{margin-top:auto;font-size:14.5px;font-weight:700;color:var(--blue);text-decoration:none}
.svc .go::after{content:" →"}
.lineid{font-size:17px;font-weight:700;margin:10px 0 0;letter-spacing:.04em}
.lineid a{text-decoration:none}
@media(max-width:640px){.brand img{height:46px}}

.hero .en{font-size:clamp(12.5px,1.6vw,15px);letter-spacing:.06em;color:#8fb6d4;
  margin:4px 0 14px;font-weight:600}

/* 首頁 hero 輪播（原 Weebly 首頁 8 張；原生 scroll-snap，手機可滑） */
.car{border-radius:10px;overflow:hidden;background:var(--navy);box-shadow:0 10px 34px rgba(0,0,0,.35)}
.car-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.car-track::-webkit-scrollbar{display:none}
.car-slide{flex:0 0 100%;aspect-ratio:16/9;scroll-snap-align:start;scroll-snap-stop:always}
.hero-img .car-slide img{width:100%;height:100%;object-fit:contain;border-radius:0;box-shadow:none}
.car-btn{position:absolute;top:50%;z-index:2;width:40px;height:40px;margin-top:-20px;border:0;border-radius:50%;
  background:rgba(8,24,42,.6);color:#fff;font-size:24px;line-height:40px;padding:0;cursor:pointer}
.car-btn:hover,.car-btn:focus-visible{background:rgba(8,24,42,.85)}
.car-prev{left:10px}.car-next{right:10px}
.car-dots{position:absolute;left:0;right:0;bottom:8px;z-index:2;display:flex;justify-content:center;gap:4px}
.car-dots button{width:22px;height:22px;border:0;padding:0;background:none;cursor:pointer;display:grid;place-items:center}
.car-dots button::before{content:"";width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.5);box-shadow:0 0 0 1px rgba(8,24,42,.45)}
.car-dots button[aria-current="true"]::before{background:#fff}
@media(max-width:640px){.car-btn{width:34px;height:34px;margin-top:-17px;font-size:20px;line-height:34px}}