:root{
  --bg:#f6f1e7; --surface:#fff; --text:#1f2328; --muted:#5b6168;
  --wood:#b8895b; --wood-dark:#8a5f38; --line:rgba(0,0,0,.08);
  --shadow:0 10px 30px rgba(0,0,0,.10); --r:18px; --r2:14px; --container:1120px;
  --focus: 0 0 0 3px rgba(184,137,91,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:ui-sans-serif, system-ui, -apple-system, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", Arial;
  color:var(--text); background:var(--bg); line-height:1.6;}
a{color:inherit}
.container{width:min(100% - 32px, var(--container)); margin-inline:auto}
.section{padding:56px 0}
.section.tight{padding:36px 0}
.kicker{letter-spacing:.12em;text-transform:uppercase;font-size:12px;color:var(--muted)}
h1{font-size:clamp(28px,3.4vw,44px); line-height:1.1; margin:0 0 10px}
h2{font-size:clamp(20px,2.2vw,28px); margin:0 0 10px}
h3{font-size:18px; margin:0 0 8px}
p{margin:0 0 12px}
.small{font-size:13px;color:var(--muted)}
.hr{height:1px;background:var(--line); margin:18px 0}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
@media(max-width:980px){.grid-2,.grid-3{grid-template-columns:1fr}}

.card{background:rgba(255,255,255,.92); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:18px}
.card ul{margin:0; padding-left:18px}
.card-links{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.card-link{display:inline-block; padding:6px 12px; border-radius:999px; font-size:12px; font-weight:600; text-decoration:none; background:rgba(184,137,91,.12); border:1px solid rgba(184,137,91,.28); color:var(--wood-dark); transition:background .2s, border-color .2s}
.card-link:hover{background:rgba(184,137,91,.22); border-color:var(--wood)}
.intro-links{display:flex; flex-direction:column; gap:12px; align-items:flex-start}
.intro-links .card-link{display:block; width:100%; max-width:420px}
.badge{display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:999px;
  background:rgba(184,137,91,.16); border:1px solid rgba(184,137,91,.25); color:var(--wood-dark); font-weight:700; font-size:12px}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 16px; border-radius:999px; text-decoration:none; font-weight:700; border:1px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease; will-change:transform}
.btn:focus{outline:none; box-shadow:var(--focus)}
.btn.primary{background:var(--wood); color:#1b1208; box-shadow:0 10px 26px rgba(184,137,91,.30)}
.btn.primary:hover{background:#c79969; transform:translateY(-1px)}
.btn.ghost{background:transparent; border-color:rgba(0,0,0,.14)}
.btn.ghost:hover{background:rgba(0,0,0,.04); transform:translateY(-1px)}
.actions{display:flex; gap:12px; flex-wrap:wrap; align-items:center}

.site-header{position:sticky; top:0; z-index:50; background:rgba(246,241,231,.9); backdrop-filter:blur(10px)}
.site-footer{background:rgba(246,241,231,.9); backdrop-filter:blur(10px)}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:900}
.menu{display:flex; gap:16px; align-items:center}
.menu a{color:var(--text); text-decoration:none; font-weight:700; font-size:14px}
.menu a:hover{color:var(--wood-dark)}
.nav-cta{margin-left:8px}
.mobile-toggle{display:none; border:1px solid var(--line); background:rgba(255,255,255,.7); border-radius:12px; padding:10px}
.mobile-toggle:focus{outline:none; box-shadow:var(--focus)}
@media(max-width:980px){
  .mobile-toggle{display:inline-flex}
  .menu{display:none; position:absolute; left:16px; right:16px; top:64px; flex-direction:column; align-items:stretch;
    background:rgba(255,255,255,.96); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:12px}
  .menu.open{display:flex; flex-direction:column; gap:8px}
}

.footer-grid{display:grid; grid-template-columns:2fr 1fr; gap:24px; padding:26px 0}
.footer-grid a{text-decoration:none; color:var(--muted)}
.footer-grid a:hover{color:var(--wood-dark)}
@media(max-width:980px){.footer-grid{grid-template-columns:1fr}}

.cta-global{pointer-events:none; position:fixed; inset:0; z-index:40}
.cta-global > *{pointer-events:auto}
.cta-fab{position:absolute; right:20px; bottom:24px; padding:14px 20px; font-size:15px; box-shadow:0 6px 24px rgba(184,137,91,.35)}
.cta-fab:focus{outline:none; box-shadow:var(--focus)}
@media(max-width:768px){.cta-fab{display:none}}
.cta-mobile-bar{display:none; position:fixed; left:0; right:0; bottom:0; z-index:45;
  flex-direction:row; align-items:stretch; gap:0;
  background:rgba(255,255,255,.96); backdrop-filter:blur(12px); border-top:1px solid var(--line);
  padding:12px 16px; padding-bottom:max(12px, env(safe-area-inset-bottom));
  box-shadow:0 -4px 20px rgba(0,0,0,.08)}
@media(max-width:768px){.cta-mobile-bar{display:flex}}
.cta-mobile-btn{flex:1; display:flex; align-items:center; justify-content:center;
  padding:14px 16px; border-radius:999px; font-weight:700; font-size:15px; text-decoration:none;
  transition:background .2s, transform .15s}
.cta-mobile-btn:focus{outline:none; box-shadow:var(--focus)}
.cta-mobile-line{background:var(--wood); color:#1b1208; border:1px solid transparent}
.cta-mobile-line:hover{background:#c79969; color:#1b1208}
.cta-mobile-tel{background:transparent; border:1px solid var(--line); color:var(--text)}
.cta-mobile-tel:hover{background:rgba(0,0,0,.04)}
@media(max-width:768px){body{padding-bottom:80px}}

.btn-cta-hero{padding:16px 24px; font-size:17px; box-shadow:0 10px 32px rgba(184,137,91,.4)}
.btn-cta-hero:hover{transform:translateY(-2px); box-shadow:0 12px 36px rgba(184,137,91,.45)}

.service-slider-section{background:#efeee2; padding:48px 0 64px}
.service-slider{width:min(100%, 760px); margin:0 auto; overflow:hidden}
.service-track{display:flex; transition:transform .45s ease; will-change:transform}
.service-slide{min-width:100%; box-sizing:border-box}
.service-card{background:#e7d5b8; overflow:hidden; border-radius:var(--r)}
.service-copy{padding:42px 32px 28px}
.service-copy h2{margin:0 0 18px; font-family:"Times New Roman","Noto Serif TC",serif; font-size:clamp(2.2rem, 5vw, 4rem); line-height:1.05; font-weight:500; color:#111}
.service-copy p{margin:0; font-size:clamp(1.05rem, 2vw, 1.35rem); line-height:1.7; color:#111; letter-spacing:.01em}
.service-image-wrap{width:100%; aspect-ratio:4/3; background:#ddd}
.service-image-wrap img{width:100%; height:100%; display:block; object-fit:cover}
.service-slider-controls{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:24px 12px 0}
.slider-btn{width:92px; height:56px; border:2px solid #111; border-radius:999px; background:transparent; color:#111; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:all .2s ease}
.slider-btn span{font-size:2rem; line-height:1}
.slider-btn:hover{background:#111; color:#fff}
.slider-counter{font-size:1.8rem; color:#111; display:flex; align-items:center; gap:14px; letter-spacing:.04em}
.slider-counter .divider{opacity:.8}
@media(max-width:768px){
  .service-slider-section{padding:28px 0 44px}
  .service-copy{padding:28px 20px 22px}
  .service-copy h2{font-size:2.7rem; margin-bottom:14px}
  .service-copy p{font-size:1.05rem; line-height:1.65}
  .service-slider-controls{padding:18px 10px 0}
  .slider-btn{width:76px; height:48px}
  .slider-btn span{font-size:1.7rem}
  .slider-counter{font-size:1.45rem; gap:10px}
}

.hero{position:relative; min-height:70vh; display:grid; align-items:center; overflow:hidden; background:#1f2328; z-index:0}
.hero .hero-media{position:absolute; inset:0; z-index:-1}
.hero .hero-carousel{overflow:hidden}
.hero .hero-carousel img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1s ease}
.hero .hero-carousel img.active{opacity:1; z-index:1}
.hero .overlay{position:absolute; inset:0; z-index:1;
  background:radial-gradient(80% 60% at 50% 35%, rgba(0,0,0,.15) 0%, rgba(0,0,0,.5) 70%, rgba(0,0,0,.75) 100%),
            linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.65) 100%); pointer-events:none}
.hero .inner{position:relative; z-index:2; color:#fff; padding:72px 0 68px}
.hero .title{max-width:24ch}
.hero .subtitle{max-width:72ch; opacity:.92}

.comparison-table{width:100%; border-collapse:collapse; font-size:14px; margin:16px 0}
.comparison-table th,.comparison-table td{border:1px solid var(--line); padding:12px 14px; text-align:left}
.comparison-table th{background:rgba(184,137,91,.12); font-weight:700; color:var(--wood-dark)}
.comparison-table tr:nth-child(even){background:rgba(255,255,255,.6)}
.comparison-table tr:hover{background:rgba(184,137,91,.06)}
@media(max-width:640px){.comparison-table th,.comparison-table td{padding:10px}; .comparison-table{font-size:13px}}

.anchor{scroll-margin-top:80px}

.subpage .section.tight:first-of-type{padding-top:32px}
.subpage h1{font-size:clamp(24px,2.8vw,32px); margin-bottom:8px}
.subpage h2{margin-top:28px; margin-bottom:10px}
.subpage h3{margin-top:18px; margin-bottom:8px}