/* ============================================================
   Jomel NZ — 共用設計系統 site.css
   色彩沿用台灣版 tw.css：湖水青 teal（信任／在地）
        + 暖橘 amber（親子／溫度）＋ 珊瑚、草綠作為家庭感點綴
   字體：思源宋體（標題）+ 思源黑體（內文）+ IBM Plex Mono（標籤）
   ============================================================ */

:root{
  /* 主色 — 湖水青 */
  --navy:#12586B;
  --navy-2:#1A7285;
  --navy-3:#0B3D4C;
  --navy-soft:#E3F1F4;

  /* 重點色 — 暖橘 */
  --brass:#E08A3C;
  --brass-2:#F3A75E;
  --brass-soft:#FCEEDC;

  /* 親子點綴 */
  --coral:#E4695C;
  --leaf:#5FA97F;
  --sky:#E8F4F7;
  --sun:#FBF0DC;

  /* 紙感底色 */
  --paper:#FFFCF7;
  --paper-2:#FDF3E7;
  --paper-3:#FFFFFF;

  /* 文字 */
  --ink:#22333D;
  --ink-60:rgba(34,51,61,.68);
  --ink-30:rgba(34,51,61,.28);
  --line:rgba(34,51,61,.13);

  /* 深色底（頁尾）上的文字 */
  --slate:#BBD6DD;
  --slate-soft:#94B4BE;
  --hair:rgba(187,214,221,.22);

  --serif:"Noto Serif TC","Songti TC","Source Han Serif TC","PingFang TC",serif;
  --sans:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --wrap:1180px;
  --r:16px;
  --r-s:10px;
  --r-sm:10px;
  --shadow:0 2px 4px rgba(18,88,107,.04),0 12px 28px rgba(18,88,107,.07);
  --shadow-lift:0 6px 12px rgba(18,88,107,.07),0 20px 44px rgba(18,88,107,.12);

  /* 舊 token 別名（投資移民頁的頁內樣式仍在用） */
  --jade:var(--navy);
  --jade-2:var(--navy-2);
  --gold:var(--brass);
  --gold-ink:#9A5716;
  --mist:var(--slate);
  --accent:var(--navy);
  --accent-ink:var(--navy);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.85;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.sect{padding:92px 0}
.sect--tight{padding:64px 0}
section[id]{scroll-margin-top:96px}

/* ---------- 文字 ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.4;color:var(--navy-3)}
h2{font-size:clamp(26px,3.3vw,38px);margin-bottom:18px}
h3{font-size:19px;margin-bottom:10px}
h4{font-size:16.5px;margin-bottom:8px}
p{margin:0}
.eyebrow{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--brass);margin-bottom:18px}
.eyebrow--dark{color:var(--navy)}
.lede{font-size:17px;color:var(--ink-60);max-width:62ch}
.note{font-size:12.5px;color:var(--ink-60);line-height:1.8}
.chk{border-bottom:1px dotted var(--brass);cursor:help}
.num{font-family:var(--mono);font-weight:500;color:var(--navy-3)}
.sub{color:var(--ink-60)}
.srcline{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-60);
  border-top:1px solid var(--line);padding-top:12px;margin-top:14px}

/* ---------- 頁首 ---------- */
.hdr{position:sticky;top:0;z-index:60;background:rgba(255,252,247,.94);
  backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;gap:24px;min-height:72px}
.logo{display:inline-flex;align-items:center;text-decoration:none;flex:0 0 auto}
.logo img{height:34px;width:auto;display:block}
.nav{display:flex;gap:6px;margin-left:auto;font-size:14.5px}
.nav a{color:var(--ink-60);text-decoration:none;padding:7px 13px;border-radius:999px;
  white-space:nowrap;transition:color .2s,background .2s}
.nav a:hover{color:var(--navy);background:var(--navy-soft)}
.nav a[aria-current="page"]{color:var(--navy);background:var(--navy-soft);font-weight:500}
.navtoggle{display:none;margin-left:auto;background:transparent;border:1.5px solid var(--line);
  color:var(--navy);font-family:var(--mono);font-size:12px;letter-spacing:.16em;
  padding:9px 14px;border-radius:999px;cursor:pointer;transition:.2s}
.navtoggle:hover{background:var(--navy-soft);border-color:var(--navy)}
.navtoggle:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.nav .navcta{display:none}
@media(max-width:980px){
  .hdr .wrap{gap:14px}
  .navtoggle{display:block}
  .hdr > .wrap > .btn{display:none}
  .nav{display:none;position:absolute;top:72px;left:0;right:0;margin:0;
    background:var(--paper);flex-direction:column;gap:0;padding:8px 0 18px;
    border-bottom:1px solid var(--line);box-shadow:var(--shadow-lift)}
  .nav.open{display:flex}
  .nav a{padding:14px 28px;font-size:15.5px;border-radius:0}
  .nav .navcta{display:block;margin:16px 28px 0;background:var(--brass);color:#fff;
    text-align:center;padding:13px;border-radius:999px;font-weight:500}
}

/* ---------- 按鈕 ---------- */
.btn{display:inline-block;font-family:var(--sans);font-size:14.5px;font-weight:500;
  padding:12px 24px;text-decoration:none;border:0;cursor:pointer;line-height:1.6;
  border-radius:999px;transition:transform .18s ease,background .2s ease,color .2s ease,box-shadow .2s ease}
.btn--gold{background:var(--brass);color:#fff;box-shadow:0 6px 16px rgba(224,138,60,.28)}
.btn--gold:hover{background:var(--brass-2);transform:translateY(-2px);box-shadow:0 10px 22px rgba(224,138,60,.34)}
.btn--jade{background:var(--navy);color:#fff;box-shadow:0 6px 16px rgba(18,88,107,.22)}
.btn--jade:hover{background:var(--navy-2);transform:translateY(-2px);box-shadow:0 10px 22px rgba(18,88,107,.28)}
.btn--ghost{border:1.5px solid var(--navy);color:var(--navy);background:transparent}
.btn--ghost:hover{background:var(--navy);color:#fff;transform:translateY(-2px)}
.btn--line{border:1.5px solid var(--line);background:var(--paper-3);color:var(--navy)}
.btn--line:hover{border-color:var(--navy);transform:translateY(-2px)}
/* 真的通往 LINE 的按鈕，用 LINE 的綠 */
.btn--lineapp{background:#06C755;color:#fff;box-shadow:0 6px 16px rgba(6,199,85,.26)}
.btn--lineapp:hover{background:#05B34C;transform:translateY(-2px)}
.btn:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.go{font-size:14.5px;font-weight:500;color:var(--navy);text-decoration:none;
  border-bottom:1.5px solid var(--brass);padding-bottom:2px}
.go:hover{color:var(--brass)}

/* ---------- 首屏 ---------- */
.hero,.phero{background:linear-gradient(168deg,var(--sky) 0%,var(--navy-soft) 34%,var(--paper-2) 100%);
  color:var(--ink);position:relative;overflow:hidden}
.hero{padding:76px 0 84px}
.phero{padding:62px 0 70px}
.hero::before,.phero::before{content:"";position:absolute;right:-140px;top:-150px;
  width:480px;height:480px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 34% 34%,rgba(243,167,94,.34),rgba(243,167,94,0) 66%)}
.hero::after,.phero::after{content:"";position:absolute;left:-120px;bottom:-190px;
  width:420px;height:420px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 60% 40%,rgba(95,169,127,.24),rgba(95,169,127,0) 68%)}
.hero .wrap,.phero .wrap{position:relative;z-index:1}
.hero h1,.phero h1{font-size:clamp(31px,4.7vw,52px);line-height:1.32;max-width:19ch;
  font-weight:700;margin:0 0 22px;color:var(--navy-3)}
.hero h1 em{font-style:normal;display:inline-block;color:var(--brass);
  background:linear-gradient(transparent 66%,rgba(243,167,94,.34) 0);padding:0 .06em}
.hero p,.phero p{color:var(--ink-60);max-width:52ch;font-size:17px}
.hero p.sub{color:var(--ink-60)}
.crumb{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--ink-60);margin-bottom:20px}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--navy)}

/* 首屏底部的重點小卡 */
.phero-meta,.trust{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.phero-meta div,.trust div{background:rgba(255,255,255,.74);border:1px solid rgba(255,255,255,.9);
  border-radius:var(--r-s);padding:13px 18px;box-shadow:0 2px 8px rgba(18,88,107,.06)}
.phero-meta b,.trust b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  color:var(--brass);margin-bottom:3px}
.phero-meta small,.trust small{font-size:13px;color:var(--ink-60);display:block;line-height:1.65}

/* ---------- 區塊底色 ---------- */
.band{background:linear-gradient(180deg,var(--sky) 0%,var(--navy-soft) 100%)}
.band h2,.band h3{color:var(--navy-3)}
.band p{color:var(--ink-60)}
.band .eyebrow{color:var(--brass)}
.band-inner{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
@media(max-width:860px){.band-inner{grid-template-columns:1fr;gap:34px}}

/* ---------- 卡片格線 ---------- */
.grid-2,.grid-3,.grid-4{display:grid;gap:22px;margin-top:44px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.cell{background:var(--paper-3);border:1px solid var(--line);border-radius:var(--r);
  padding:30px 26px 28px;box-shadow:var(--shadow);
  transition:transform .25s ease,box-shadow .25s ease}
.cell:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.cell .n{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  color:var(--navy);background:var(--navy-soft);border-radius:999px;padding:4px 11px;margin-bottom:14px}
.cell p{font-size:14.5px;color:var(--ink-60);line-height:1.85;margin-bottom:14px}
.cell a.go{font-size:14px}
.cell:nth-child(4n+2) .n{color:#8C4E12;background:var(--brass-soft)}
.cell:nth-child(4n+3) .n{color:#2E6B49;background:#E4F1E9}
.cell:nth-child(4n+4) .n{color:#9B392E;background:#FBE5E2}
@media(max-width:980px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.grid-3,.grid-2{grid-template-columns:1fr}}
@media(max-width:560px){.grid-4{grid-template-columns:1fr}}

/* ---------- 比較表 ---------- */
.cmp-scroll{container-type:inline-size;overflow-x:hidden;margin-top:44px;
  border-radius:var(--r);border:1px solid var(--line);background:var(--paper-3);box-shadow:var(--shadow)}
.cmp{width:100%;border-collapse:collapse;font-size:14.5px}
.cmp{table-layout:auto}
.cmp th,.cmp td{text-align:left;padding:18px 20px;vertical-align:top;border-bottom:1px solid var(--line)}
.cmp thead th{background:var(--navy);color:#fff;font-family:var(--serif);
  font-size:16px;font-weight:600;border-bottom:0}
.cmp tbody th{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-60);font-weight:400;width:150px}
.cmp td{color:var(--ink-60);line-height:1.8}
.cmp td strong{color:var(--ink);font-weight:600}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp tbody tr:hover td{background:var(--sky)}

/* ---------- 流程 ---------- */
.steps{list-style:none;counter-reset:s;margin-top:44px}
.steps li{counter-increment:s;position:relative;margin-left:16px;max-width:72ch;
  padding:0 0 32px 62px;border-left:2px solid rgba(18,88,107,.14)}
.steps li:last-child{padding-bottom:0;border-left-color:transparent}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:-17px;top:-2px;
  width:34px;height:34px;border-radius:50%;background:var(--brass);border:3px solid var(--paper);
  font-family:var(--mono);font-size:11px;color:#fff;font-weight:500;
  display:flex;align-items:center;justify-content:center}
.steps strong{display:block;font-family:var(--serif);font-size:18px;font-weight:600;
  margin-bottom:6px;color:var(--navy-3)}
.steps span{display:block;font-size:14.5px;color:var(--ink-60);line-height:1.85}
.steps em{font-family:var(--mono);font-size:11px;font-style:normal;color:var(--brass);
  letter-spacing:.1em;display:block;margin-top:6px}
.band .steps li::before{border-color:var(--sky)}
.steps--dark li::before{background:var(--navy)}

/* ---------- 階段清單（安家） ---------- */
.phase{border-top:4px solid var(--navy);padding-top:22px;margin-bottom:8px}
.phase-k{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--brass);
  display:block;margin-bottom:6px}
.phase h3{margin-bottom:6px}
.phase .sub{font-size:13.5px;color:var(--ink-60);margin-bottom:20px}
.chklist{list-style:none;display:grid;gap:10px}
.chklist li{background:var(--paper-3);border:1px solid var(--line);border-radius:var(--r-s);
  padding:14px 17px;font-size:14.5px;display:flex;gap:12px;align-items:flex-start;box-shadow:var(--shadow)}
.chklist li::before{content:"✓";font-family:var(--mono);color:var(--leaf);font-size:15px;line-height:1.6}
.chklist li b{font-weight:600;color:var(--navy-3)}
.chklist li i{font-style:normal;color:var(--ink-60);font-size:13.5px}

/* ---------- 常見問題 ---------- */
.faq{margin-top:40px;max-width:88ch;display:grid;gap:14px}
.faq details{background:var(--paper-3);border:1px solid var(--line);border-radius:var(--r-s);
  box-shadow:var(--shadow);overflow:hidden;transition:box-shadow .25s ease}
.faq details[open]{box-shadow:var(--shadow-lift)}
.faq summary{list-style:none;cursor:pointer;padding:20px 52px 20px 24px;position:relative;
  font-family:var(--serif);font-size:17px;font-weight:600;line-height:1.6;color:var(--navy-3)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:24px;top:29px;width:10px;height:10px;
  border-right:2px solid var(--brass);border-bottom:2px solid var(--brass);
  transform:rotate(45deg);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(-135deg);top:33px}
.faq summary:hover{color:var(--navy)}
.faq summary:focus-visible{outline:2px solid var(--brass);outline-offset:-2px}
.faq p{padding:0 24px 24px;font-size:15px;color:var(--ink-60);line-height:1.9}

/* ---------- 部落格 ---------- */
.filters{display:flex;gap:2px;flex-wrap:wrap;margin-top:34px;border-bottom:1px solid var(--line)}
.filters button{position:relative;background:none;border:0;cursor:pointer;padding:14px 20px 15px;
  font-family:var(--sans);font-size:15px;font-weight:500;color:var(--ink-60);transition:color .2s}
.filters button::after{content:"";position:absolute;left:20px;right:20px;bottom:-1px;height:2.5px;
  border-radius:2px;background:transparent;transition:background .2s}
.filters button:hover{color:var(--navy)}
.filters button[aria-pressed="true"]{color:var(--navy-3);font-weight:600}
.filters button[aria-pressed="true"]::after{background:var(--brass)}
.filters button:focus-visible{outline:2px solid var(--brass);outline-offset:-4px;border-radius:6px}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:32px}
.post{background:var(--paper-3);border:1px solid var(--line);border-radius:var(--r);
  padding:24px 24px 26px;box-shadow:var(--shadow);
  transition:transform .25s ease,box-shadow .25s ease}
.post[hidden]{display:none}
.post:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift)}
.post a{text-decoration:none}
.post .tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);
  font-size:12.5px;font-weight:500;line-height:1.5;border-radius:999px;padding:5px 13px 5px 11px;
  background:var(--navy-soft);color:#0E4A5C;margin-bottom:10px}
.post .tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.5}
.post time{font-family:var(--mono);font-size:11.5px;color:var(--ink-30);display:block;margin-bottom:10px}
.post h3{font-size:18.5px;line-height:1.5;margin-bottom:10px}
.post:hover h3{color:var(--navy-2)}
.post p{font-size:14px;color:var(--ink-60);line-height:1.85}
@media(max-width:860px){.posts{grid-template-columns:1fr}}
.feature-post{display:grid;grid-template-columns:1fr 1fr;margin-top:44px;
  background:var(--paper-3);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--shadow-lift)}
.feature-post .fp-body{padding:44px 42px}
.feature-post .fp-tag{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  color:#8C4E12;background:var(--brass-soft);border-radius:999px;padding:4px 12px;margin-bottom:18px}
.feature-post h2{font-size:clamp(23px,2.6vw,30px);margin-bottom:16px}
.feature-post p{color:var(--ink-60);font-size:15px;line-height:1.85;margin-bottom:24px}
.fp-side{background:linear-gradient(150deg,var(--sky),var(--navy-soft));padding:44px 42px;
  display:flex;flex-direction:column;justify-content:center}
.fp-side blockquote{font-family:var(--serif);font-size:21px;line-height:1.65;font-weight:600;color:var(--navy-3)}
.fp-side cite{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.13em;
  color:var(--ink-60);margin-top:16px;display:block}
@media(max-width:820px){.feature-post{grid-template-columns:1fr}}

/* ---------- 文章 ---------- */
.article-wrap{display:grid;grid-template-columns:220px 1fr;gap:64px;align-items:start;
  max-width:1000px;margin:0 auto}
.toc{position:sticky;top:104px;background:var(--paper-3);border:1px solid var(--line);
  border-radius:var(--r);padding:22px 22px 18px;box-shadow:var(--shadow)}
.toc b{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:var(--ink-60);
  display:block;margin-bottom:14px}
.toc a{display:block;font-size:13.5px;color:var(--ink-60);text-decoration:none;padding:5px 0;line-height:1.6}
.toc a:hover{color:var(--navy)}
.prose{max-width:68ch}
.prose h2{font-size:26px;margin:52px 0 16px;scroll-margin-top:104px}
.prose h3{font-size:19px;margin:34px 0 10px}
.prose p{margin-bottom:20px;font-size:16.5px;line-height:1.95}
.prose ul,.prose ol{margin:0 0 22px 22px}
.prose li{margin-bottom:9px;line-height:1.9;font-size:16px}
.prose blockquote{border-left:3px solid var(--brass);padding:4px 0 4px 22px;margin:28px 0;
  font-family:var(--serif);font-size:19px;line-height:1.7;font-weight:600;color:var(--navy-3)}
.prose .callout{background:var(--sun);border-radius:var(--r);padding:24px 26px;margin:30px 0;
  font-size:15px;line-height:1.85}
.prose .callout b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  color:#8C4E12;margin-bottom:8px;text-transform:uppercase}
.author{border-top:1px solid var(--line);margin-top:56px;padding-top:28px;display:flex;gap:22px;align-items:flex-start}
.author .av{width:64px;height:64px;background:var(--navy);color:#fff;flex:0 0 64px;
  display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:22px;border-radius:50%}
.author p{font-size:14px;color:var(--ink-60);line-height:1.8;margin:6px 0 0}
.author b{font-family:var(--serif);font-size:17px;color:var(--navy-3)}
.author .lic{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--brass);display:block;margin-top:4px}
@media(max-width:860px){.article-wrap{grid-template-columns:1fr;gap:34px}.toc{position:static}}

/* ---------- 諮詢表單 ---------- */
.form{display:grid;gap:16px;background:var(--paper-3);border:1px solid var(--line);
  border-radius:var(--r);padding:32px 30px;box-shadow:var(--shadow-lift)}
.form label{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--ink-60);
  text-transform:uppercase;display:block;margin-bottom:6px}
.form input,.form select,.form textarea{width:100%;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-s);color:var(--ink);padding:13px 15px;
  font-family:var(--sans);font-size:15px}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--brass)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:600px){.form-row{grid-template-columns:1fr}}

/* ---------- CTA 說明 ---------- */
.cta-hint{font-size:13px;color:var(--ink-60);margin-top:12px;line-height:1.8}

/* ---------- 右下角浮動按鈕（桌機／手機都在） ---------- */
.fabs{position:fixed;right:18px;bottom:18px;z-index:90;
  display:flex;flex-direction:column;gap:10px;align-items:flex-end;
  padding-bottom:env(safe-area-inset-bottom)}
.fab{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:52px;height:52px;border-radius:50%;text-decoration:none;color:#fff;
  font-size:14.5px;font-weight:600;line-height:1;
  transition:transform .2s ease,box-shadow .2s ease}
.fab svg{width:23px;height:23px;fill:#fff;flex:0 0 23px}
.fab span{display:none}
.fab:hover{transform:translateY(-3px)}
.fab--line{background:#06C755;box-shadow:0 6px 18px rgba(6,199,85,.34)}
.fab--line:hover{box-shadow:0 12px 26px rgba(6,199,85,.42)}
.fab--form{background:var(--brass);box-shadow:0 6px 18px rgba(224,138,60,.32)}
.fab--form:hover{box-shadow:0 12px 26px rgba(224,138,60,.4)}
/* 桌機空間夠，LINE 那顆展開成帶字的藥丸 */
@media(min-width:821px){
  .fabs{right:24px;bottom:24px}
  .fab--line{width:auto;height:52px;border-radius:999px;padding:0 22px 0 18px}
  .fab--line span{display:inline}
}
@media(max-width:820px){
  .fabs{right:14px;bottom:14px;gap:9px}
  .fab{width:48px;height:48px}
  .fab svg{width:21px;height:21px;flex:0 0 21px}
}

/* ---------- 照片版位 ---------- */
/* 尚未放照片時顯示品牌漸層＋淡蕨葉，放上 <img> 後自動蓋掉 */
.ph{position:relative;overflow:hidden;border-radius:var(--r);box-shadow:var(--shadow);
  background:linear-gradient(150deg,var(--sky) 0%,var(--navy-soft) 52%,var(--brass-soft) 100%)}
.ph::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:url("/fern-only.png") no-repeat center/26% auto;opacity:.10}
.ph:has(img)::after{display:none}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph--hero{aspect-ratio:3/2}
.ph--4x3{aspect-ratio:4/3;margin-bottom:18px}
.ph--3x2{aspect-ratio:3/2}
.ph--wide{aspect-ratio:21/9;margin-top:30px}
@media(max-width:760px){.ph--wide{aspect-ratio:16/9}}

/* ---------- 頁尾 ---------- */
.ftr{background:var(--navy-3);color:var(--slate-soft);font-size:13.5px;line-height:2;padding:56px 0 34px}
.ftr a{color:var(--slate);text-decoration:none;display:block;margin-bottom:8px;
  border-bottom:1px solid transparent;width:fit-content}
.ftr a:hover{color:#fff;border-bottom-color:var(--brass)}
.ftr b{display:block;color:#fff;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  margin-bottom:14px;text-transform:uppercase}
.ftr .logo{margin-bottom:6px}
.ftr .logo img{height:46px}
.ftr .note{color:var(--slate-soft)}
.ftr-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr 1fr;gap:36px}
.ftr-btm{margin-top:40px;padding-top:22px;border-top:1px solid var(--hair);font-size:12.5px;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
@media(max-width:1000px){.ftr-grid{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:760px){.ftr-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.ftr-grid{grid-template-columns:1fr}}

/* ---------- 進場動畫 ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---------- LINE 元件 ---------- */
.btn--lineapp{display:inline-flex;align-items:center;gap:8px}
.btn--lineapp .li{width:20px;height:20px;fill:currentColor;flex:0 0 20px}
.line-fab .li{width:24px;height:24px;fill:#fff;flex:0 0 24px}
.ctabar .c-line{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.ctabar .c-line .li{width:19px;height:19px;fill:#fff}

/* ---------- 首頁首屏兩欄 ---------- */
.hero-grid{display:grid;grid-template-columns:0.92fr 1.08fr;gap:48px;align-items:center}
/* 首屏照片放大：向右延伸出容器，讓它成為視覺主體 */
@media(min-width:1240px){
  .hero-grid{grid-template-columns:0.86fr 1.14fr;gap:52px}
  .hero-grid .ph--hero{margin-right:calc((100vw - var(--wrap)) / -2 + 28px);border-radius:var(--r) 0 0 var(--r)}
}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .hero-grid .ph--hero{aspect-ratio:16/10}
}
/* 首屏的信任小卡：手機改成兩欄，字級縮小才不會擠 */
.trust{margin-top:30px}
@media(max-width:520px){
  .phero-meta,.trust{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .phero-meta div,.trust div{padding:11px 13px}
  .phero-meta b,.trust b{font-size:9.5px;letter-spacing:.1em}
  .phero-meta small,.trust small{font-size:12px}
}
.ph--portrait{aspect-ratio:1/1;max-width:120px;border-radius:50%;margin-bottom:16px}
.ph--portrait::after{background-size:52% auto}

/* ---------- 手機版對齊修正 ---------- */
@media(max-width:600px){
  .wrap{padding:0 20px}
  .sect{padding:64px 0}
  /* 等寬字的字距在小螢幕會把中文撐散 */
  .eyebrow{font-size:10px;letter-spacing:.12em;line-height:1.9}
  h2{font-size:clamp(23px,6vw,28px)}
  .hero h1,.phero h1{font-size:clamp(27px,7.4vw,34px);line-height:1.42}
  .lede,.hero p,.phero p{font-size:15.5px}
  /* 按鈕滿版對齊，避免一長一短參差 */
  .acts{gap:10px}
  .acts .btn{flex:1 1 100%;text-align:center}
  .btn--lineapp{justify-content:center}
  /* 表格橫捲時左右留白一致 */
  .cmp th,.cmp td{padding:14px 20px}
  /* 卡片內距縮一點，字才不會擠成兩三個字一行 */
  .cell{padding:24px 20px 22px}
  .faq summary{padding:18px 46px 18px 18px;font-size:16px}
  .faq summary::after{right:18px}
  .faq p{padding:0 18px 20px;font-size:14.5px}
  .steps li{padding-left:52px;margin-left:14px}
  .ftr-btm{flex-direction:column;gap:10px}
}

/* ---------- 品牌標語 ---------- */
.slogan{font-family:var(--serif);font-size:16px;font-weight:600;color:#fff;
  letter-spacing:.03em;line-height:1.7;margin-bottom:2px}

/* 首頁品牌陳述區 */
.creed{background:linear-gradient(180deg,var(--sun) 0%,var(--paper-2) 100%);
  padding:74px 0 78px;text-align:center}
.creed-mark{width:56px;height:auto;margin:0 auto 22px;opacity:.5}
.creed-line{font-family:var(--serif);font-size:clamp(24px,3.4vw,34px);font-weight:600;
  color:var(--navy-3);line-height:1.6;letter-spacing:.02em}
.creed-sub{margin-top:18px;font-size:15.5px;color:var(--ink-60);line-height:1.95}
.creed .go{display:inline-block;margin-top:26px}
@media(max-width:600px){
  .creed{padding:56px 0 58px}
  .creed-sub br{display:none}
  .creed-sub{font-size:14.5px}
}

/* ---------- 表格永不左右滑 ----------
   用 container query 而不是螢幕寬度：文章頁的內文欄只有約 600px，
   就算在桌機上，那一欄裡的表格也要轉成卡片才不會被撐開。          */
@container (max-width: 1000px){
  .cmp--cards{display:block;width:100%}
  .cmp--cards thead{display:none}
  .cmp--cards tbody,.cmp--cards tr{display:block}
  .cmp--cards tbody tr{background:var(--paper-3);border:1px solid var(--line);
    border-top:4px solid var(--navy);border-radius:var(--r);overflow:hidden;
    margin-bottom:14px;box-shadow:var(--shadow)}
  .cmp--cards tbody tr:last-child{margin-bottom:0}
  .cmp--cards tbody th{display:block;width:auto;padding:15px 18px 4px;border-bottom:0;
    font-size:11px;letter-spacing:.14em;color:var(--navy-3)}
  .cmp--cards td{display:block;padding:12px 18px;border-bottom:1px solid var(--line)}
  .cmp--cards tbody tr td:last-child{border-bottom:0}
  .cmp--cards td::before{content:attr(data-l);display:block;font-family:var(--sans);
    font-size:12px;font-weight:600;color:var(--brass);margin-bottom:5px;letter-spacing:.02em}
  .cmp--cards td:empty{display:none}
}
@container (max-width: 700px){
  .cmp--stack{display:block;width:100%}
  .cmp--stack tbody,.cmp--stack tr,.cmp--stack th,.cmp--stack td{display:block;width:auto}
  .cmp--stack tbody tr{background:var(--paper-3);border:1px solid var(--line);
    border-radius:var(--r-s);margin-bottom:10px;box-shadow:var(--shadow);overflow:hidden}
  .cmp--stack tbody tr:last-child{margin-bottom:0}
  .cmp--stack th{padding:13px 16px 2px;border-bottom:0;font-size:10.5px}
  .cmp--stack td{padding:0 16px 14px;border-bottom:0;color:var(--ink)}
}
/* 卡片模式時，外框交給每張卡自己畫 */
.cmp-scroll:has(.cmp--cards),.cmp-scroll:has(.cmp--stack){border:0;background:transparent;box-shadow:none}
@container (min-width: 1001px){
  .cmp-scroll:has(.cmp--cards){border:1px solid var(--line);background:var(--paper-3);
    box-shadow:var(--shadow);border-radius:var(--r)}
}
@container (min-width: 701px){
  .cmp-scroll:has(.cmp--stack){border:1px solid var(--line);background:var(--paper-3);
    box-shadow:var(--shadow);border-radius:var(--r)}
}


/* 卡片內的連結一律貼齊卡片底部，讓一整排卡看起來對齊 */
.cell{display:flex;flex-direction:column;position:relative}
.cell > p:last-of-type{margin-bottom:16px}
/* 連結成組放在卡片底部，一整排卡的連結才會對齊 */
.cell-links{margin-top:auto;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline}
/* 次要連結墊高一層，才不會被覆蓋層蓋掉 */
.cell .cell-links a.go{position:relative;z-index:1}
/* 主連結維持 static，它的覆蓋層才會以整張卡為基準 */
.cell .cell-links a.go--card{position:static}
.cell a.go--card::after{content:"";position:absolute;inset:0;z-index:0;border-radius:var(--r)}
.cell:has(a.go--card){cursor:pointer}
.cell:has(a.go--card:hover){transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:var(--brass)}
.cell:focus-within{outline:2px solid var(--brass);outline-offset:3px}


/* ---------- Google 評論輪播 ---------- */
.rv-gbar{display:flex;align-items:center;justify-content:center;gap:11px;
  margin:0 auto 34px;padding:15px 26px;background:var(--paper-3);
  border:1px solid var(--line);border-radius:var(--r);max-width:440px;box-shadow:var(--shadow)}
.rv-glogo{flex-shrink:0}
.rv-gscore{font-family:var(--mono);font-size:27px;font-weight:500;color:var(--navy-3);line-height:1}
.rv-gstars{color:#F5A623;font-size:17px;letter-spacing:1px}
.rv-gcount{font-size:13px;color:var(--ink-60)}

.rv-carousel{overflow:hidden}
.rv-track{display:flex;transition:transform .5s ease}
.rv-card{flex:0 0 33.3333%;padding:0 11px;box-sizing:border-box}
.rv-inner{background:var(--paper-3);border:1px solid var(--line);border-radius:var(--r);
  padding:24px 24px 22px;box-shadow:var(--shadow);height:100%;
  display:flex;flex-direction:column}
.rv-header{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.rv-avatar{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:16px;font-weight:500;color:#fff;flex-shrink:0}
.rv-info{min-width:0}
.rv-name{font-size:14.5px;font-weight:600;color:var(--navy-3);line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv-sub{font-size:12px;color:var(--ink-30);line-height:1.35}
.rv-rating{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.rv-stars{color:#F5A623;font-size:14px;letter-spacing:1px}
.rv-ago{font-size:12px;color:var(--ink-30)}
.rv-text{font-size:14px;line-height:1.9;color:var(--ink-60);margin:0;
  display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;overflow:hidden}
.rv-card--long .rv-text{-webkit-line-clamp:8}

.rv-controls{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:28px}
.rv-btn{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;
  background:var(--paper-3);color:var(--ink-60);font-size:20px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.2s;line-height:1}
.rv-btn:hover{border-color:var(--brass);color:var(--brass)}
.rv-btn:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.rv-dots{display:flex;gap:7px}
.rv-dots .rvdot{width:7px;height:7px;border-radius:50%;background:var(--line);
  cursor:pointer;transition:.3s;border:0;padding:0}
.rv-dots .rvdot.active{background:var(--brass);transform:scale(1.3)}
.rv-google{text-align:center;margin-top:20px}
.rv-google a{font-size:13.5px;color:var(--navy);text-decoration:none;letter-spacing:.04em;
  display:inline-flex;align-items:center;gap:6px;transition:color .2s}
.rv-google a:hover{color:var(--brass)}

@media(max-width:1024px){.rv-card{flex:0 0 50%}}
@media(max-width:768px){
  .rv-card{flex:0 0 100%;padding:0 4px}
  .rv-text{-webkit-line-clamp:14}
  .rv-gbar{flex-wrap:wrap;gap:8px 11px;padding:14px 18px}
}

/* ---------- 首屏照片輪播 ---------- */
.hero-shot{position:relative}
.hero-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .9s ease}
.hero-shot img.on{opacity:1}
.hero-shot::after{display:none}
.hero-dots{position:absolute;left:0;right:0;bottom:14px;display:flex;justify-content:center;gap:8px;z-index:2}
.hero-dots .hdot{width:7px;height:7px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,.55);transition:.3s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.hero-dots .hdot.on{background:#fff;transform:scale(1.35)}

/* ---------- 證照展示 ---------- */
.cred{background:var(--paper-3);border:1px solid var(--line);border-radius:var(--r);
  padding:22px;box-shadow:var(--shadow);margin:0}
.cred img{width:100%;height:auto;border:1px solid var(--line);border-radius:var(--r-s);
  background:#fff;display:block}
.cred figcaption{font-size:13.5px;color:var(--ink-60);line-height:1.85;margin-top:16px}
.cred figcaption b{display:block;font-size:15px;font-weight:600;color:var(--navy-3);margin-bottom:4px}
.cred--text{display:flex;flex-direction:column;justify-content:center}
.cred--text .n{display:inline-block;align-self:flex-start;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;color:var(--navy);background:var(--navy-soft);border-radius:999px;
  padding:4px 11px;margin-bottom:14px}
.cred--text h3{margin-bottom:12px}
.cred--text p{font-size:15px;line-height:2;color:var(--ink-60)}
.cred--text p b{color:var(--navy-3);font-weight:600}
.cred--text .note{margin-top:14px}

/* ---------- 預約卡（改用外部 Google 表單） ---------- */
.bookcard{background:var(--paper-3);border:1px solid var(--line);border-radius:var(--r);
  padding:32px 30px 28px;box-shadow:var(--shadow-lift);display:flex;flex-direction:column;align-items:flex-start}
.bookcard h3{font-size:21px;margin-bottom:10px}
.bookcard > p{font-size:14.5px;color:var(--ink-60);line-height:1.9;margin-bottom:22px}
.bookcard .btn{width:100%;text-align:center;justify-content:center}
.bookcard-or{display:flex;align-items:center;gap:14px;width:100%;margin:20px 0 16px;
  font-size:13px;color:var(--ink-30)}
.bookcard-or::before,.bookcard-or::after{content:"";flex:1;height:1px;background:var(--line)}
.bookcard .note{margin-top:16px}