/* 輔彬實業 設計系統（方案 A 穩重專業・地層剖面版）
   token 集中於 :root；動畫一律只在 prefers-reduced-motion: no-preference 內宣告。 */
:root{
  color-scheme:light;
  --green-950:#0a2c1e;--green-900:#0f3d2a;--green-800:#16503a;--green-700:#1d6b49;
  --orange:#e07b1a;--orange-hi:#f2a65a;--orange-ink:#b45309;
  --sage:#f1f5f0;--sage-2:#e2ebe1;--sage-3:#c9d8cb;
  --ink:#1d2a24;--ink-2:#33443b;--ink-on-orange:#0b2a1d;--muted:#56665e;--line:#d9e2da;--bg:#fff;--slate:#37474f;
  --on-dark:#e6efe9;--on-dark-2:#c3d3c9;
  /* 字體：Latin 在前（英數用 Segoe UI／San Francisco），中文用蘋方／正黑；不以 system-ui 開頭 */
  --font:"Segoe UI",-apple-system,BlinkMacSystemFont,"Noto Sans TC","PingFang TC","Microsoft JhengHei","Heiti TC",sans-serif;
  --font-num:"Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  /* 字級（320→1440 流體） */
  --fs-xs:clamp(.8125rem,.79rem + .1vw,.875rem);
  --fs-sm:clamp(.875rem,.85rem + .12vw,.9375rem);
  --fs-base:clamp(1rem,.97rem + .15vw,1.0625rem);
  --fs-lead:clamp(1.125rem,1.06rem + .3vw,1.25rem);
  --fs-h3:clamp(1.1875rem,1.1rem + .4vw,1.375rem);
  --fs-h2:clamp(1.5rem,1.26rem + 1.1vw,2.25rem);
  --fs-h1:clamp(1.875rem,1.43rem + 2.2vw,3.25rem);
  --fs-display:clamp(2.125rem,1.32rem + 4vw,4.5rem);
  --fs-num:clamp(2.5rem,1.36rem + 5.7vw,5.5rem);
  /* 間距（4px 基數） */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:64px;--sp-9:96px;--sp-10:128px;
  --section-y:clamp(64px,3.6rem + 6vw,128px);
  --stack-head:clamp(24px,1rem + 1.5vw,40px);
  /* 形狀與陰影 */
  --radius:12px;--radius-sm:6px;--radius-xs:3px;
  --shadow-1:0 1px 2px rgba(15,61,42,.08),0 2px 8px rgba(15,61,42,.06);
  --shadow:0 2px 4px rgba(15,61,42,.06),0 8px 24px rgba(15,61,42,.1);
  --shadow-lift:0 4px 8px rgba(15,61,42,.08),0 18px 40px rgba(15,61,42,.16);
  /* 動效 */
  --dur-1:120ms;--dur-2:200ms;--dur-3:320ms;--dur-4:560ms;--dur-page:260ms;
  --ease-out:cubic-bezier(.22,.8,.24,1);--ease-inout:cubic-bezier(.65,0,.35,1);
  /* 格線：4 / 8 / 12 欄，最大內容寬 1240px */
  --wrap:1240px;--gutter:16px;--col-gap:16px;--measure:36em;--header-h:64px;--cta-h:56px;
  /* 地層剖面母題（同一張圖塊，縮放即成分隔線、區段帶） */
  --strata:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40' viewBox='0 0 120 40'%3E%3Crect y='9' width='120' height='5' fill='%23c9d8cb'/%3E%3Cpath d='M4 9l1-6M7 9l-1-4M19 9l2-7M23 9l-1-3M38 9l1-5M52 9l-1-6M55 9l2-4M71 9l1-7M74 9l-1-3M88 9l-2-5M91 9l1-6M104 9l2-4M113 9l-1-6' stroke='%231d6b49' stroke-width='1.2'/%3E%3Crect y='14' width='120' height='4' fill='%23e07b1a'/%3E%3Crect y='18' width='120' height='9' fill='%23d5dfd3'/%3E%3Cg fill='%238fa497'%3E%3Ccircle cx='5' cy='21' r='1.4'/%3E%3Ccircle cx='15' cy='24.5' r='1.8'/%3E%3Ccircle cx='27' cy='20.6' r='1.1'/%3E%3Ccircle cx='36' cy='24' r='1.5'/%3E%3Ccircle cx='49' cy='21.5' r='1.7'/%3E%3Ccircle cx='61' cy='24.6' r='1.2'/%3E%3Ccircle cx='70' cy='20.8' r='1.4'/%3E%3Ccircle cx='82' cy='23.8' r='1.9'/%3E%3Ccircle cx='95' cy='21' r='1.2'/%3E%3Ccircle cx='104' cy='24.4' r='1.5'/%3E%3Ccircle cx='114' cy='21.2' r='1.3'/%3E%3C/g%3E%3Crect y='27' width='120' height='13' fill='%230f3d2a'/%3E%3Cg fill='%230a2c1e'%3E%3Ccircle cx='9' cy='32' r='1.3'/%3E%3Ccircle cx='27' cy='36' r='1.7'/%3E%3Ccircle cx='44' cy='31' r='1.1'/%3E%3Ccircle cx='63' cy='35' r='1.5'/%3E%3Ccircle cx='86' cy='32' r='1.2'/%3E%3Ccircle cx='101' cy='36.5' r='1.6'/%3E%3C/g%3E%3C/svg%3E");
  --contour:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' preserveAspectRatio='none'%3E%3Cpath d='M0 0H400V272C360 280 330 262 290 268S220 288 180 276S100 262 60 274S10 282 0 278Z'/%3E%3C/svg%3E");
  --weave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M0 8L8 0M-2 2L2-2M6 10l4-4M0 0l8 8M-2 6l4 4M6-2l4 4' stroke='%23fff' stroke-opacity='.035'/%3E%3C/svg%3E");
}
@media (min-width:600px){:root{--gutter:24px;--col-gap:20px}}
@media (min-width:1024px){:root{--gutter:32px;--col-gap:24px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + var(--sp-4));scroll-padding-bottom:calc(var(--cta-h) + var(--sp-4))}
body{margin:0;font-family:var(--font);font-size:var(--fs-base);line-height:1.8;letter-spacing:.02em;color:var(--ink);background:var(--bg);padding-bottom:var(--cta-h);overflow-wrap:break-word;text-autospace:normal;text-spacing-trim:normal;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;height:auto;display:block}
main{overflow-x:clip}
h1,h2,h3{color:var(--green-900);text-wrap:balance}
h1{font-size:var(--fs-h1);font-weight:700;line-height:1.2;letter-spacing:.02em;margin:0 0 var(--sp-3)}
h2{font-size:var(--fs-h2);font-weight:700;line-height:1.3;letter-spacing:.02em;margin:2lh 0 .5lh}
h3{font-size:var(--fs-h3);font-weight:700;line-height:1.4;letter-spacing:.01em;margin:1.5lh 0 .4lh}
p{margin:0 0 1lh;text-wrap:pretty}
b,strong{font-weight:700}
a{color:var(--green-700);text-decoration-thickness:1px;text-underline-offset:.22em;transition:color var(--dur-1),text-decoration-thickness var(--dur-1)}
a:hover{color:var(--green-900);text-decoration-thickness:2px}
::selection{background:var(--orange-hi);color:var(--ink-on-orange)}
/* 雙層焦點環：內白 2px、外 3px 橘墨，深淺底皆清楚 */
:focus-visible{outline:3px solid var(--orange-ink);outline-offset:2px;box-shadow:0 0 0 2px #fff;border-radius:var(--radius-xs)}
.on-dark :focus-visible,.site-header :focus-visible,.site-footer :focus-visible,.hero :focus-visible,.band :focus-visible,.cta :focus-visible,.stats :focus-visible,.cta-box :focus-visible{outline-color:var(--orange-hi);box-shadow:0 0 0 2px var(--green-950)}
.skip{position:absolute;left:-999px;top:var(--sp-2);z-index:40;background:#fff;color:var(--green-900);padding:var(--sp-2) var(--sp-4);border-radius:var(--radius-sm);font-weight:700}
.skip:focus{left:var(--sp-2)}
.container{width:100%;max-width:calc(var(--wrap) + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.container--article{max-width:calc(46rem + 2 * var(--gutter))}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.num{font-family:var(--font-num);font-variant-numeric:tabular-nums lining-nums}

/* 地層剖面帶 */
.strata{display:block;height:var(--strata-h,48px);background:var(--strata) 0 100%/auto 100% repeat-x}
.strata--thin{--strata-h:16px}

/* 按鈕：hover 色階上移、:active 下壓、主要 CTA 箭頭位移 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:44px;white-space:nowrap;padding:.6em 1.25em;border:2px solid var(--orange);border-radius:var(--radius-sm);background:var(--orange);color:var(--ink-on-orange);font-weight:700;line-height:1.3;letter-spacing:.04em;text-decoration:none;box-shadow:0 1px 0 rgba(11,42,29,.18);transition:background-color var(--dur-2),border-color var(--dur-2),color var(--dur-2),box-shadow var(--dur-2)}
.btn:hover{background:var(--orange-hi);border-color:var(--orange-hi);color:var(--ink-on-orange);text-decoration:none}
.btn:active{box-shadow:none}
.btn-outline{background:transparent;border-color:var(--green-900);color:var(--green-900);box-shadow:none}
.btn-outline:hover{background:var(--green-900);border-color:var(--green-900);color:#fff}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.85);color:#fff;box-shadow:none}
.btn-ghost:hover{background:#fff;border-color:#fff;color:var(--green-900)}
.btn-lg{min-height:52px;padding:.75em 1.5em;font-size:var(--fs-lead)}
.btn-sm{min-height:44px;padding:.35em 1em;font-size:var(--fs-sm)}
@media (max-width:359px){.btn{white-space:normal}}
.btn-light{background:#fff;border-color:#fff;color:var(--green-900);box-shadow:none}
.btn-light:hover{background:var(--sage);border-color:var(--sage);color:var(--green-900)}
/* 桌機頁首的「聯絡報價」改外框，讓首屏的實心橘只留給主要 CTA */
.nav-desktop .btn{background:transparent;border-color:var(--orange-hi);color:#fff}
.nav-desktop .btn:hover{background:var(--orange-hi);color:var(--ink-on-orange)}
.btn[data-track="line_click"]::after,.arrow::after{content:"→";display:inline-block;font-family:var(--font-num);font-weight:700}
.actions{display:flex;flex-wrap:wrap;gap:var(--sp-3)}

/* 頁首 */
.site-header{position:sticky;top:0;z-index:20;background:var(--green-900) var(--weave);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.06),0 2px 12px rgba(0,0,0,.16)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);min-height:var(--header-h)}
.brand{display:inline-flex;align-items:center;gap:var(--sp-3);min-height:44px;color:#fff;font-size:1.25rem;font-weight:700;letter-spacing:.14em;text-decoration:none;white-space:nowrap}
.brand-mark{width:22px;height:22px;border-radius:var(--radius-xs);background:var(--strata) 50% 100%/auto 100%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.brand:hover{color:#fff;text-decoration:none}
.site-header nav a:not(.btn){position:relative;display:inline-flex;align-items:center;min-height:44px;color:#fff;text-decoration:none;padding:var(--sp-2) 0}
.site-header nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--orange-hi);transform:scaleX(0);transform-origin:left}
.site-header nav a:not(.btn):hover::after,.site-header nav a[aria-current=page]:not(.btn)::after{transform:scaleX(1)}
.nav-desktop{display:none;align-items:center;gap:var(--sp-5);font-size:var(--fs-sm)}
.nav-mobile{position:static}
.nav-mobile summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:var(--sp-2);min-height:44px;padding:0 var(--sp-3);border:1px solid rgba(255,255,255,.35);border-radius:var(--radius-sm);font-weight:700}
.nav-mobile summary::-webkit-details-marker{display:none}
.nav-mobile summary:active{background:rgba(255,255,255,.08)}
.burger,.burger::before,.burger::after{display:block;width:18px;height:2px;background:#fff;border-radius:2px}
.burger{position:relative}
.burger::before,.burger::after{content:"";position:absolute;left:0}
.burger::before{top:-6px}.burger::after{top:6px}
.nav-mobile[open] .burger{background:transparent}
.nav-mobile[open] .burger::before{transform:translateY(6px) rotate(45deg)}
.nav-mobile[open] .burger::after{transform:translateY(-6px) rotate(-45deg)}
.nav-mobile nav{position:absolute;left:0;right:0;top:100%;max-height:calc(100dvh - var(--header-h));overflow:auto;background:var(--green-900);border-top:1px solid rgba(255,255,255,.12);padding:var(--sp-2) var(--gutter) var(--sp-5);display:flex;flex-direction:column;box-shadow:0 12px 24px rgba(0,0,0,.25)}
.nav-mobile nav a:not(.btn){padding:var(--sp-3) 0;border-bottom:1px solid rgba(255,255,255,.1)}
.nav-mobile nav a:not(.btn)::after{display:none}
.nav-mobile nav a[aria-current=page]:not(.btn){color:var(--orange-hi)}
.nav-mobile nav .btn{margin-top:var(--sp-4)}
.nav-mobile[open]::before{content:"";position:fixed;inset:var(--header-h) 0 0;background:rgba(10,44,30,.5)}
.site-header nav a.nav-hi{color:var(--orange-hi)}
.nav-mobile nav a.nav-hi{font-weight:700}
@media (min-width:960px){.nav-desktop{display:flex}.nav-mobile{display:none}}

/* 頁面標題區與麵包屑 */
.page-head{position:relative;background:var(--sage);padding:var(--sp-5) 0 var(--sp-7)}
.page-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:14px;background:var(--strata) 0 100%/auto 100% repeat-x}
.page-head--slim{padding:var(--sp-4) 0 var(--sp-5)}
.page-head h1{margin-top:var(--sp-3);max-width:20em}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;font-size:var(--fs-xs);color:var(--muted)}
.crumbs li{display:inline-flex;align-items:center}
.crumbs ol{align-items:center}
.crumbs li+li::before{content:"/";margin:0 .55em;color:#9aa8a0}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted)}
.crumbs [aria-current]{color:var(--ink)}
.page-body{padding-top:var(--sp-7);padding-bottom:var(--sp-9)}
.page-body>h2:first-child,.prose>h2:first-child{margin-top:var(--sp-5)}
.page-body p,.prose p,.page-body li{max-width:var(--measure)}
.lead{font-size:var(--fs-lead);line-height:1.75;color:var(--ink-2)}
.eyebrow{margin:0 0 var(--sp-2);color:var(--orange-ink);font-size:var(--fs-xs);font-weight:700;line-height:1.4;letter-spacing:.12em}
.meta,.note,.updated{font-size:var(--fs-sm);color:var(--muted)}
.note{background:var(--sage);border-left:3px solid var(--orange);border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:var(--sp-3) var(--sp-4)}
.prose{max-width:46rem}
.page-body ul:not([class]){padding-left:1.25em}
.page-body ul:not([class]) li{margin:var(--sp-1) 0}
.page-body ul:not([class]) li::marker{color:var(--green-700)}
.page-body ul:not([class]) li>a:only-child{display:inline-block;padding:11px 0}

/* 表格、標籤 */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
table{border-collapse:collapse;width:100%;font-size:var(--fs-sm);font-variant-numeric:tabular-nums lining-nums}
caption{padding:var(--sp-3) var(--sp-4);text-align:left;font-weight:700;color:var(--green-900);background:var(--sage)}
th,td{padding:var(--sp-3) var(--sp-4);text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
tr:last-child th,tr:last-child td{border-bottom:0}
th{width:32%;background:var(--sage);color:var(--green-900);font-weight:700}
thead th{background:var(--green-900);color:#fff}
tbody tr{transition:background-color var(--dur-1)}
tbody tr:hover td{background:#f7faf6}
.pills{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.pills li{background:var(--sage);border:1px solid var(--sage-2);color:var(--green-900);border-radius:999px;padding:var(--sp-1) var(--sp-4);font-size:var(--fs-sm)}

/* FAQ（details 展開；不支援的瀏覽器直接展開） */
.faq{display:grid;gap:var(--sp-3);max-width:46rem}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:var(--radius);transition:border-color var(--dur-2),box-shadow var(--dur-2)}
.faq-item:hover{border-color:var(--sage-3)}
.faq-item[open]{border-color:var(--green-700);box-shadow:var(--shadow-1)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:var(--sp-4);min-height:44px;padding:var(--sp-4) var(--sp-5);border-radius:var(--radius)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"";flex:none;width:20px;height:20px;margin-top:.25em;margin-left:auto;background:linear-gradient(var(--green-700),var(--green-700)) 50%/12px 2px no-repeat,linear-gradient(var(--green-700),var(--green-700)) 50%/2px 12px no-repeat;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--sage-3)}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item summary:focus-visible{outline-offset:-3px}
.faq-item h2,.faq-item h3{margin:0;font-size:var(--fs-base);font-weight:700;line-height:1.6;color:var(--green-900)}
.faq-item p{margin:0;padding:0 var(--sp-5) var(--sp-5);color:var(--ink-2)}

/* 聯絡框 */
.cta-box{margin-top:var(--sp-8);background:var(--green-900) var(--weave);color:#fff;border-radius:var(--radius);padding:var(--sp-6) var(--sp-5);overflow:hidden;position:relative}
.cta-box::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background:var(--strata) 0 100%/auto 40px repeat-x}
.cta-box p{margin:0 0 var(--sp-4);font-weight:700;font-size:var(--fs-lead);line-height:1.6;max-width:none}
.cta-box .btn-outline{border-color:#fff;color:#fff}
.cta-box .btn-outline:hover{background:#fff;color:var(--green-900)}

/* 卡片與格線 */
.grid{list-style:none;margin:0;padding:0;display:grid;gap:var(--col-gap)}
.grid--cards{grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr))}
.grid--wide{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.grid--four{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
@media (min-width:600px){.grid--cards{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}}
.card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-1);transition:box-shadow var(--dur-3) var(--ease-out),border-color var(--dur-3)}
.card:hover{box-shadow:var(--shadow-lift);border-color:var(--sage-3)}
.card:focus-within{outline:3px solid var(--orange-ink);outline-offset:2px}
/* 產品展示台：全站同一種處理（鼠尾草底＋multiply、contain、不放大超過原生像素） */
.card-media,.cat-media,.product-media{display:grid;place-items:center;aspect-ratio:4/3;padding:7%;overflow:hidden;background:var(--sage);box-shadow:inset 0 0 0 1px rgba(15,61,42,.07)}
.card-media img,.cat-media img,.product-media img{width:100%;height:100%;min-height:0;max-width:var(--native,none);object-fit:contain;mix-blend-mode:multiply}
.card-body{display:flex;flex-direction:column;flex:1;padding:var(--sp-4) var(--sp-4) var(--sp-5)}
.card-link{color:var(--green-900);font-weight:700;font-size:var(--fs-base);line-height:1.45;text-decoration:none}
.card-link::after{content:"";position:absolute;inset:0;z-index:1}
.card-link:hover{text-decoration:none}
.card-link:focus-visible{outline:0;box-shadow:none}
.card:hover .card-link{color:var(--green-700)}
.card-body p{margin:var(--sp-1) 0 0;font-size:var(--fs-sm);line-height:1.6;color:var(--muted)}
.card-body::after{content:"→";margin-top:auto;padding-top:var(--sp-3);color:var(--green-700);font-family:var(--font-num);font-weight:700;line-height:1}
.card--text{border-top:3px solid var(--green-700)}
.card--text .card-body{padding:var(--sp-5)}
.card--text .card-link{font-size:var(--fs-h3)}
.card--text .card-body p{font-size:var(--fs-sm);line-height:1.75}
.page-body .grid p,.page-body .grid li{max-width:none}
/* 型錄列卡片：產品列表、相關產品、推薦材料共用（展示台縮圖｜品名＋一句用途｜→） */
.grid--rows{grid-template-columns:1fr;gap:0;border-top:1px solid var(--line)}
.grid--rows .card{flex-direction:row;align-items:center;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;background:transparent}
.grid--rows .card:hover{background:#fafcf9;box-shadow:none;transform:none}
.grid--rows .card-media{flex:none;width:96px;padding:6px;border-radius:var(--radius-sm);margin:var(--sp-3) 0}
.grid--rows .card-body{flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--sp-1) var(--sp-5);padding:var(--sp-3) var(--sp-4)}
.grid--rows .card-link{flex:0 1 auto;min-width:8em}
.grid--rows .card-body p{flex:1 1 14em;margin:0}
.grid--rows .card-body::after{margin:0 0 0 auto;padding:0}
@media (min-width:768px){.grid--rows .card-media{width:128px}.grid--rows .card-link{flex-basis:14em}}
.by-app{margin:0 0 var(--sp-6)}
.by-app-title{margin:0 0 var(--sp-3);font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;color:var(--orange-ink)}
.by-app ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-3);grid-template-columns:repeat(2,minmax(0,1fr))}
.by-app li{max-width:none}
.by-app a{display:block;height:100%;padding:var(--sp-2) var(--sp-2) var(--sp-3);border:1px solid var(--line);border-radius:var(--radius-sm);background:#fbfcfa;font-size:var(--fs-sm);font-weight:700;color:var(--green-900);text-decoration:none}
.by-app a:hover{border-color:var(--green-700)}
.by-app span{display:block;margin-top:var(--sp-2);padding:0 var(--sp-2)}
@media (min-width:768px){.by-app ul{grid-template-columns:repeat(4,minmax(0,1fr))}}
.nb{white-space:nowrap}


/* 區塊節奏 */
.section{padding:var(--section-y) 0}
.section--tight{padding:var(--sp-8) 0}
.section--sage{background:var(--sage)}
.section-head{max-width:40em;margin-bottom:var(--stack-head)}
.section-head h2{margin:0}
.section-head h2::before,.mark::before{content:"";display:block;width:64px;height:14px;margin-bottom:var(--sp-4);background:linear-gradient(var(--sage-3) 0 4px,var(--orange) 4px 7px,#d5dfd3 7px 10px,var(--green-900) 10px)}
.sub{margin:var(--sp-3) 0 0;color:var(--muted)}
.more{margin:var(--sp-7) 0 0;text-align:center}

/* 首頁 hero：7/5 非對稱，帶框現場照坐在剖面帶上 */
.hero{position:relative;background:var(--green-900) var(--weave);color:#fff;overflow:hidden}
.hero-grid{display:grid;gap:var(--sp-7);align-items:center;padding-top:clamp(40px,2rem + 4vw,104px)}
.hero .eyebrow{color:var(--orange-hi)}
.hero h1{color:#fff;font-size:var(--fs-display);line-height:1.18;margin:0 0 var(--sp-5);max-width:12.5em}
.hero-text{max-width:30em;font-size:var(--fs-lead);line-height:1.75;color:var(--on-dark);margin-bottom:var(--sp-6)}
.hero-media{position:relative;z-index:2;width:100%;max-width:560px;justify-self:center;margin-bottom:-24px}
.hero-media::after{content:"";position:absolute;left:0;right:0;bottom:-18px;height:30px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 30' preserveAspectRatio='none'%3E%3Cpath d='M0 8C40 16 70 0 110 6S190 20 230 10S320 0 360 8S395 12 400 9M0 20C40 28 70 12 110 18S190 30 230 22S320 12 360 20S395 24 400 21' fill='none' stroke='%23f2a65a' stroke-opacity='.55' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;pointer-events:none}
.hero-media img{position:relative;width:100%;aspect-ratio:16/9;object-fit:cover;-webkit-mask:var(--contour) 0 0/100% 100% no-repeat;mask:var(--contour) 0 0/100% 100% no-repeat;border-radius:var(--radius-sm);box-shadow:0 24px 48px rgba(0,0,0,.35);background:var(--green-800)}
.hero-strata{position:relative;z-index:1;--strata-h:56px}
@media (min-width:1024px){
  .hero-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:calc(var(--col-gap) * 2);align-items:end}
  .hero-copy{padding-bottom:var(--sp-9)}
  .hero-media{margin-bottom:-32px}
  .hero-media img{aspect-ratio:4/3}
}

/* 大數字帶：只放可驗證的數字；文字徽章不偽裝成數字 */
.stats{background:var(--green-950);color:var(--on-dark-2)}
.stats-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6) var(--col-gap);padding-top:var(--sp-8);padding-bottom:var(--sp-8);margin:0 auto}
.stat{container-type:inline-size;display:grid;grid-template-rows:auto minmax(var(--fs-num),auto) auto;gap:var(--sp-2);align-content:start;min-width:0;padding-left:var(--sp-4);border-left:1px solid rgba(255,255,255,.16)}
.stat-label{overflow-wrap:anywhere;font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;color:var(--on-dark-2)}
.stat-num small{margin-left:.15em;font-size:.4em;font-weight:700;letter-spacing:.06em}
.stat-num{align-self:end;white-space:nowrap;font-size:var(--fs-num);font-weight:700;line-height:1;letter-spacing:-.01em;color:var(--orange-hi)}
.stat-text{align-self:end;justify-self:start;padding-left:var(--sp-3);border-left:3px solid var(--orange-hi);font-size:var(--fs-h3);font-weight:700;line-height:1.35;color:#fff}
.stat-ctx{font-size:var(--fs-sm);line-height:1.55;text-wrap:pretty}
@supports (width:1cqi){.stat-num{font-size:min(var(--fs-num),calc(100cqi / (var(--n,4) * .62)))}}
@supports not (width:1cqi){.stat-num{font-size:clamp(1.75rem,1rem + 3vw,3.5rem)}}
@media (min-width:1024px){.stats-list{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* 雙入口：設計顧問／營造採購 */
.entries-sec{padding-top:var(--sp-8);padding-bottom:0}
.entries{display:grid;gap:var(--col-gap)}
@media (min-width:768px){.entries{grid-template-columns:1fr 1fr}.entries>:only-child{grid-column:1/-1}}
.entry{position:relative;display:flex;flex-direction:column;padding:var(--sp-6) var(--sp-5) var(--sp-7);border-radius:var(--radius);background:var(--sage);overflow:hidden}
.entry::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background:var(--strata) 0 100%/auto 40px repeat-x}
.entry h2{margin:0 0 var(--sp-3);font-size:clamp(1.25rem,1.1rem + .8vw,1.75rem);line-height:1.4}
.entry p{color:var(--ink-2)}
.entry .actions{margin-top:auto;padding-top:var(--sp-2)}
.consult-band{background:var(--green-900) var(--weave);color:var(--on-dark)}
.consult-band h2{color:#fff}
.consult-band p{color:var(--on-dark)}
.consult-band .eyebrow{color:var(--orange-hi)}
@media (min-width:1024px){.entry{padding:var(--sp-7) var(--sp-7) var(--sp-8)}}

/* 首頁簡介 */
.intro-grid{display:grid;gap:var(--sp-6) var(--col-gap)}
.intro-item h2{margin:0 0 var(--sp-4)}
.intro-item:first-child p{font-size:var(--fs-lead);color:var(--ink-2)}
.intro-item+.intro-item{padding:var(--sp-5);border-left:3px solid var(--green-700);background:var(--sage);border-radius:0 var(--radius) var(--radius) 0}
.intro-item+.intro-item h2{font-size:var(--fs-h3)}
.intro-item p:last-child{margin-bottom:0}
@media (min-width:1024px){.intro-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center}}

/* 8 大類索引：型錄列（編號｜代表圖｜類名｜全部品名｜看這一類），列高依內容 */
.cat-rows{list-style:none;margin:0;padding:0;border-top:2px solid var(--green-900);background:#fff;border-radius:0 0 var(--radius) var(--radius)}
.cat{display:grid;grid-template-columns:auto 72px minmax(0,1fr);grid-template-areas:"idx media head" "links links links" "more more more";gap:var(--sp-2) var(--sp-4);align-items:center;padding:var(--sp-4);border-bottom:1px solid var(--line);transition:background-color var(--dur-1)}
.cat:hover{background:#fafcf9}
.cat-idx{grid-area:idx;font-size:var(--fs-sm);font-weight:700;color:var(--muted);letter-spacing:.06em}
.cat-media{grid-area:media;padding:6%;border-radius:var(--radius-sm)}
.cat-head{grid-area:head;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--sp-3)}
.cat h3{margin:0;font-size:var(--fs-h3)}
.cat-count{font-size:var(--fs-sm);color:var(--muted);white-space:nowrap}
.cat-links{grid-area:links;list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 var(--sp-4)}
.cat-links a{display:inline-flex;align-items:center;min-height:44px;font-size:var(--fs-sm);font-weight:700;color:var(--green-800);text-decoration:underline;text-decoration-color:var(--sage-3);text-underline-offset:.3em}
.cat-links a:hover{color:var(--green-900);text-decoration-color:currentColor}
.cat-more{grid-area:more;justify-self:start;display:inline-flex;align-items:center;min-height:44px;font-size:var(--fs-sm);font-weight:700;color:var(--green-700);text-decoration:none;white-space:nowrap}
.cat-more::after{content:"→";margin-left:var(--sp-2);font-family:var(--font-num)}
.cat-more:hover{text-decoration:underline}
@media (max-width:767px){.cat-more{display:none}}
@media (min-width:768px){
  .cat{grid-template-columns:3ch 96px minmax(0,2.4fr) minmax(0,5fr) auto;grid-template-areas:"idx media head links more";gap:var(--sp-5);padding:var(--sp-4) var(--sp-5)}
  .cat-head{flex-direction:column;gap:var(--sp-1)}
}

/* 為什麼選輔彬：01／02／03 編號條列 */
.why-grid{display:grid;gap:var(--sp-5) var(--col-gap)}
.why-list{list-style:none;margin:0;padding:0}
.why-list li{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-5);padding:var(--sp-5) 0;border-top:1px solid var(--line)}
.why-list li:last-child{border-bottom:1px solid var(--line)}
.why-num{min-width:2ch;font-size:clamp(2.25rem,1.8rem + 2vw,3.75rem);font-weight:700;line-height:1;color:var(--green-700)}
.why-list h3{margin:0 0 var(--sp-2)}
.why-list p{margin:0;color:var(--ink-2)}
.evidence-wrap{grid-column:1/-1;margin-top:var(--sp-7)}
.evidence-title{margin:0 0 var(--sp-4)}
.evidence{list-style:none;margin:0;padding:0;display:grid;gap:var(--col-gap)}
@media (min-width:768px){.evidence{grid-template-columns:1fr 1fr}}
.evidence figure{margin:0}
.ev-thumb{position:relative;display:block;border-radius:var(--radius-sm);overflow:hidden;background:#fff}
.ev-thumb img{width:100%;aspect-ratio:4/3;object-fit:contain}
.ev-thumb::after{content:"＋ 放大";position:absolute;right:var(--sp-2);bottom:var(--sp-2);padding:2px var(--sp-2);border-radius:var(--radius-xs);background:rgba(15,61,42,.85);color:#fff;font-size:var(--fs-xs);font-weight:700}
.evidence figcaption{margin-top:var(--sp-2);font-size:var(--fs-sm);color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* :target 燈箱（無 JS）：點縮圖開大圖，「關閉」回到證據區 */
.lb{display:none}
.lb:target{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:var(--sp-8) var(--gutter) var(--sp-5);background:rgba(10,44,30,.92)}
.lb img{max-width:min(100%,1200px);max-height:calc(100dvh - 120px);width:auto;height:auto;background:#fff}
.lb-close{position:absolute;top:var(--sp-4);right:var(--gutter);display:inline-flex;align-items:center;min-height:44px;padding:0 var(--sp-4);border:1px solid rgba(255,255,255,.6);border-radius:var(--radius-sm);color:#fff;font-weight:700;text-decoration:none}
@media (min-width:1024px){.why-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}.why-grid .section-head{position:sticky;top:calc(var(--header-h) + var(--sp-6))}}

/* 聯絡帶 */
.band{background:var(--green-900) var(--weave);color:var(--on-dark);padding:var(--section-y) 0}
.band-inner{display:grid;gap:var(--sp-6);align-items:end}
.band h2{margin:0 0 var(--sp-3);font-size:var(--fs-h1);color:#fff}
.band p{max-width:30em;margin:0}
.band-phone{display:inline-flex;flex-wrap:wrap;align-items:baseline;min-height:44px;gap:0 var(--sp-3);margin-bottom:var(--sp-5);color:#fff;line-height:1.15;text-decoration:none}
.band-phone .num{font-size:clamp(2rem,1.3rem + 3.2vw,4rem);font-weight:700;letter-spacing:.01em;color:var(--orange-hi)}
.band-person{font-size:var(--fs-lead);color:var(--on-dark-2)}
.band-phone:hover{color:#fff;text-decoration:none}
.band-phone:hover .num{text-decoration:underline;text-decoration-thickness:2px}
.band-phone:active .num{color:#fff}
@media (min-width:1024px){.band-inner{grid-template-columns:minmax(0,6fr) minmax(0,6fr)}.band-act{justify-self:end}}

/* 工程應用剖面詳圖：SVG（圖紙語彙：圖號、示意・不按比例）＋編號圖例 */
.sec{margin:0;display:grid;gap:var(--sp-5);align-items:start}
.sec-sheet{position:relative;padding:var(--sp-3);border:1px solid var(--line);border-radius:var(--radius);background:#fbfcfa;box-shadow:inset 0 0 0 6px #fff}
.sx{width:100%;height:auto}
.sx-ground{fill:var(--green-900)}
.sx-earth{fill:#c7b993}
.sx-gcl{fill:#8fa497}
.sx-gravel-bg{fill:#dfe6dc}
.sx-gravel circle,.sx-rock circle{fill:#8fa497;stroke:#56665e;stroke-width:.6}
.sx-water{fill:#cfe2e6}
.sx-geo{fill:none;stroke:var(--orange);stroke-width:4;stroke-linejoin:round}
.sx-net{fill:none;stroke:var(--orange);stroke-width:3}
.sx-nw{fill:none;stroke:#56665e;stroke-width:2;stroke-dasharray:6 3}
.sx-wl{fill:none;stroke:#3d7d93;stroke-width:1.5}
.sx-grass,.sx-cell path{fill:none;stroke:var(--green-700);stroke-width:1.6;stroke-linecap:round}
.sx-cell path{stroke:#6b5b33}
.sx-pin path{fill:none;stroke:#1d2a24;stroke-width:2.2;stroke-linecap:round}
.sx-bag rect{fill:#c7b993;stroke:#6b5b33;stroke-width:1.2}
.sx-pipe circle{fill:#fff;stroke:#1d2a24;stroke-width:2}
.sx-pipe .sx-hole{fill:#1d2a24;stroke:none}
.sx-ref{font:700 13px var(--font-num);fill:#1d2a24}
.sx-pipe-h{fill:none;stroke:#1d2a24;stroke-width:5}
.sx-sleeve{fill:#fff;stroke:#1d2a24;stroke-width:1.5}
.sx-lead{stroke:#1d2a24;stroke-width:1}
.sx-dot{fill:#1d2a24}
.sx-mk{fill:#fff;stroke:#1d2a24;stroke-width:1.5}
.sx-n{font:700 17px var(--font-num);text-anchor:middle;fill:#1d2a24}
.sx-sheet rect{fill:#fff;stroke:#1d2a24;stroke-width:1}
.sx-spot{fill:none;stroke:#1d2a24;stroke-width:1.2;stroke-dasharray:3 2}
.sx-bubble{fill:none;stroke:#1d2a24;stroke-width:1.5}
.sx-dt{font:700 12px var(--font);text-anchor:middle;fill:#fff;letter-spacing:.1em}
.sx-nw--big{stroke-width:5;stroke-dasharray:10 5}
.sx-geo--big{stroke-width:9}
@media (max-width:768px){.sx-mk{r:18px}.sx-n{font-size:20px}.sx-lead{stroke-width:1.5}.sx-dt{font-size:17px}.sx-ref{font-size:19px}}
.sec-code{display:none;margin:var(--sp-2) 0 0;font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;color:var(--ink)}
@media (max-width:600px){.sec .sx-sheet{display:none}.sec-code{display:block}}
.sx-sheet text{font:600 11px var(--font);fill:#1d2a24;letter-spacing:.06em}
.sec-key{list-style:none;margin:0;padding:0;counter-reset:none}
.sec-key li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:var(--sp-3);padding:var(--sp-3) 0;border-top:1px solid var(--line);max-width:none}
.sec-key li:last-child{border-bottom:1px solid var(--line)}
.sec-n{display:inline-grid;place-items:center;width:28px;height:28px;border:1.5px solid var(--ink);border-radius:50%;font-size:var(--fs-sm);font-weight:700;line-height:1;color:var(--ink);background:#fff}
.sec-key strong{display:block;color:var(--green-900);line-height:1.5}
.sec-note{display:block;font-size:var(--fs-sm);line-height:1.6;color:var(--muted)}
.sec-links{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-2)}
.sec-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--sp-4);border:1px solid var(--sage-3);border-radius:999px;background:#fff;font-size:var(--fs-sm);font-weight:700;color:var(--green-800);text-decoration:none}
.sec-links a:hover{background:var(--green-900);border-color:var(--green-900);color:#fff}
.sec figcaption{grid-column:1/-1;font-size:var(--fs-xs);color:var(--muted)}
.sec-key li:is(:hover,:focus-within) .sec-n{background:var(--orange);border-color:var(--orange-ink);color:var(--ink-on-orange)}
.sec:has(.sec-key li:nth-child(1):is(:hover,:focus-within)) .k1 .sx-mk,.sec:has(.sec-key li:nth-child(2):is(:hover,:focus-within)) .k2 .sx-mk,.sec:has(.sec-key li:nth-child(3):is(:hover,:focus-within)) .k3 .sx-mk,.sec:has(.sec-key li:nth-child(4):is(:hover,:focus-within)) .k4 .sx-mk,.sec:has(.sec-key li:nth-child(5):is(:hover,:focus-within)) .k5 .sx-mk,.sec:has(.sec-key li:nth-child(6):is(:hover,:focus-within)) .k6 .sx-mk,.sec:has(.sec-key li:nth-child(7):is(:hover,:focus-within)) .k7 .sx-mk,.sec:has(.sec-key li:nth-child(8):is(:hover,:focus-within)) .k8 .sx-mk{fill:var(--orange);stroke:var(--orange-ink);stroke-width:3}
@media (min-width:1024px){.sec{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:calc(var(--col-gap) * 2)}.sec-sheet{position:sticky;top:calc(var(--header-h) + var(--sp-5))}}
.sx--thumb .k,.sx--thumb .sx-sheet{display:none}
.card-media--sx{display:block;aspect-ratio:auto;padding:var(--sp-3) var(--sp-3) 0;background:#fbfcfa;box-shadow:none;border-bottom:1px solid var(--line)}
.card--sol .card-body::after{content:none}
.card-cta{margin-top:auto;padding-top:var(--sp-3);font-size:var(--fs-sm);font-weight:700;color:var(--green-700)}
.card-cta::after{content:" →";font-family:var(--font-num)}

/* 產品列表：分類跳轉列＋sticky 分組標題 */
html:has(.group-title){scroll-padding-top:calc(var(--header-h) + 72px)}
.chips{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:0 0 var(--sp-6)}
.chips a{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:44px;padding:var(--sp-1) var(--sp-4);border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--green-900);font-size:var(--fs-sm);font-weight:700;text-decoration:none;transition:background-color var(--dur-1),border-color var(--dur-1)}
.chips a:hover{background:var(--sage);border-color:var(--sage-3)}
.chip-n{min-width:1.6em;padding:0 .4em;border-radius:999px;background:var(--sage-2);font-family:var(--font-num);font-size:var(--fs-xs);text-align:center}
.page-body{counter-reset:grp}
.group{counter-increment:grp}
.group+.group{margin-top:var(--sp-7)}
.group-title{position:sticky;top:var(--header-h);z-index:5;display:flex;align-items:baseline;gap:var(--sp-3);margin:0 0 var(--sp-5);padding:var(--sp-3) 0;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);font-size:var(--fs-h3)}
.group-title::before{content:counter(grp,decimal-leading-zero);font-family:var(--font-num);font-size:var(--fs-sm);font-weight:700;color:var(--muted)}

/* 產品頁：6/6 hero（鼠尾草展示台）→ 8/4 內文＋sticky 側欄 */
.product-hero{display:grid;gap:var(--sp-5);align-items:center;margin-bottom:var(--sp-7)}
.product-media{border-radius:var(--radius);background:var(--sage);overflow:hidden;border:1px solid var(--sage-2)}
.product-info h1{font-size:var(--fs-h1)}
.product-info .lead{margin:var(--sp-4) 0 var(--sp-2)}
.product-info .updated{margin-bottom:var(--sp-5)}
@media (min-width:600px){.product-hero{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--sp-6)}.product-hero--noimg{grid-template-columns:minmax(0,1fr)}}
@media (min-width:1024px){.product-hero{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:calc(var(--col-gap) * 2)}}
.product-layout{display:grid;gap:var(--sp-6)}
.product-aside{padding:var(--sp-5);border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow-1)}
.product-aside h2{margin:0 0 var(--sp-3);font-size:var(--fs-h3)}
.product-aside .table-wrap{border:0;border-radius:0}
.product-aside th,.product-aside td{padding:var(--sp-2) var(--sp-3)}
.product-aside th{width:38%}
.aside-title{margin:0 0 var(--sp-3);font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;color:var(--orange-ink)}
.aside-note{font-size:var(--fs-sm);color:var(--muted);margin:var(--sp-4) 0 var(--sp-3)}
.actions--stack{flex-direction:column}
.actions--stack .btn{width:100%}
.product-main>h2:first-child{margin-top:0}
.product-main p,.product-more .prose p{max-width:44em}
.product-more>h2{margin-top:var(--sp-8)}
.prose--end{margin-top:var(--sp-8)}
.used-in{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-2)}
.used-in li{max-width:none}
.used-in a{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-1) var(--sp-4);min-height:56px;padding:var(--sp-3) var(--sp-4);border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;text-decoration:none;color:var(--green-900)}
.used-in a:hover{border-color:var(--green-700);background:var(--sage)}
.used-sol{font-weight:700}
.used-n{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);color:var(--ink-2)}
@media (min-width:1024px){
  .product-layout{grid-template-columns:minmax(0,8fr) minmax(0,4fr);column-gap:calc(var(--col-gap) * 2)}
  .product-main{grid-column:1;grid-row:1}
  .product-more{grid-column:1;grid-row:2}
  .product-aside{grid-column:2;grid-row:1 / span 2;align-self:start;position:sticky;top:calc(var(--header-h) + var(--sp-5));max-height:calc(100vh - var(--header-h) - 2 * var(--sp-5));overflow:auto}
}
/* 現場照：2+1 拼貼，統一 4:3、建置期分級 */
.gallery{display:grid;gap:var(--sp-3);grid-template-columns:repeat(2,minmax(0,1fr))}
.gallery img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-sm);background:var(--sage-2)}
.gallery img:first-child{grid-column:1/-1}
@media (min-width:768px){.gallery{grid-template-columns:repeat(3,minmax(0,1fr))}.gallery img:first-child{grid-column:span 2;grid-row:span 2}.gallery img:only-child{grid-column:1/-1}}

/* 工程應用頁：摘要窄欄 → 全寬剖面 → 01–04 編號段落 */
.sol-head{max-width:46rem}
.sol-xsec{margin:var(--sp-7) 0 var(--sp-8)}
.sol-xsec>h2{margin:0 0 var(--sp-5)}
.prose--numbered{counter-reset:sec}
.prose--numbered>h2{counter-increment:sec}
.prose--numbered>h2::before{content:counter(sec,decimal-leading-zero);display:inline-block;margin-right:var(--sp-4);font-family:var(--font-num);font-size:.62em;font-weight:700;color:var(--green-700)}

/* 文章頁：34em 行長、h2 前剖面小分隔；≥1024 右側 4 欄 sticky（目錄＋相關材料＋報價） */
.article{position:relative;max-width:46rem}
.article p,.article li{max-width:34em}
.article>p:not(.lead):not(.meta):not(.updated){line-height:1.85}
.article>h2::before{content:"";display:block;width:40px;height:10px;margin-bottom:var(--sp-4);background:linear-gradient(var(--sage-3) 0 3px,var(--orange) 3px 5px,#d5dfd3 5px 7px,var(--green-900) 7px)}
.article .updated{margin-bottom:0}
.read-time{margin-top:0}
.art-rail{margin:var(--sp-5) 0 var(--sp-6)}
.art-rail .rail-extra{display:none}
.toc{padding:var(--sp-4) var(--sp-5);background:var(--sage);border-radius:var(--radius)}
.toc-title{margin:0 0 var(--sp-2);font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;color:var(--orange-ink)}
.toc ol{margin:0;padding-left:1.5em;font-size:var(--fs-sm);line-height:1.5}
.toc li::marker{font-family:var(--font-num);color:var(--muted)}
.toc a{display:flex;align-items:center;min-height:44px;color:var(--green-800);text-decoration:none}
.toc a:hover{text-decoration:underline}
/* 共用右欄：工程應用頁與文章頁 */
.rail{display:none}
.rail-list{list-style:none;margin:0 0 var(--sp-4);padding:0;border-top:1px solid var(--line)}
.rail-list li{max-width:none;border-bottom:1px solid var(--line)}
.rail-list a{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);min-height:44px;padding:var(--sp-2) 0;font-size:var(--fs-sm);font-weight:700;color:var(--green-800);text-decoration:none}
.rail-list a::after{content:"→";font-family:var(--font-num);color:var(--sage-3)}
.rail-list a:hover{color:var(--green-900);text-decoration:underline}
.rail-in .actions--stack .btn{font-size:var(--fs-sm)}
@media (min-width:1024px){
  .rail-layout{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);column-gap:calc(var(--col-gap) * 2);align-items:start}
  .rail{display:block;position:sticky;top:calc(var(--header-h) + var(--sp-5))}
  .rail-in{padding:var(--sp-5);border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow-1)}
  .article--rail{max-width:none;padding-right:calc(33.333% + var(--col-gap))}
  .art-rail{position:absolute;top:0;right:0;bottom:0;width:calc(33.333% - var(--col-gap));margin:0}
  .art-rail .rail-in{position:sticky;top:calc(var(--header-h) + var(--sp-5));max-height:calc(100vh - var(--header-h) - 2 * var(--sp-5));overflow:auto}
  .art-rail .rail-extra{display:block;margin-top:var(--sp-5)}
  .art-rail .toc{padding:0;background:none}
}
.link-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
.link-list li{max-width:none;margin:0}
.link-list a{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);min-height:56px;height:100%;padding:var(--sp-3) var(--sp-4);border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;color:var(--green-900);font-weight:700;line-height:1.5;text-decoration:none;transition:background-color var(--dur-1),border-color var(--dur-1)}
.link-list a::after{content:"→";color:var(--green-700);font-family:var(--font-num)}
.link-list a:hover{border-color:var(--green-700);background:var(--sage)}
.read-progress{display:none}

/* 設計顧問專區：滿版深綠 hero（clip-path 外擴，不造成水平捲動） */
.consult-intro{position:relative;margin:calc(-1 * var(--sp-7)) 0 var(--sp-8);padding:var(--sp-5) 0 calc(var(--sp-8) + 24px);background:var(--green-900);box-shadow:0 0 0 100vmax var(--green-900);clip-path:inset(0 -100vmax);color:var(--on-dark)}
.consult-intro::after{content:"";position:absolute;left:-100vmax;right:-100vmax;bottom:0;height:24px;background:var(--strata) 0 100%/auto 100% repeat-x}
.consult-intro .eyebrow{color:var(--orange-hi)}
.page-head--dark{background:var(--green-900);padding-bottom:0}
.page-head--dark::after{content:none}
.page-head--dark .crumbs ol,.page-head--dark .crumbs a{color:var(--on-dark-2)}
.page-head--dark .crumbs [aria-current]{color:#fff}
.consult-grid{display:grid;gap:var(--sp-7);align-items:end}
.pack{padding:var(--sp-5);border:1px solid rgba(255,255,255,.22);border-radius:var(--radius);background:rgba(255,255,255,.04)}
.pack-title{margin:0 0 var(--sp-3);font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;color:var(--orange-hi)}
.pack ol{margin:0;padding-left:1.6em;font-size:var(--fs-sm);line-height:1.6;color:var(--on-dark)}
.pack a{display:flex;align-items:center;min-height:44px;color:var(--on-dark);text-decoration:none}
.pack a:hover{color:#fff;text-decoration:underline}
.pack li{padding:0;border-bottom:1px solid rgba(255,255,255,.12);max-width:none}
.pack li::marker{font-family:var(--font-num);color:var(--orange-hi)}
@media (min-width:1024px){.consult-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:calc(var(--col-gap) * 2)}}
.consult-intro h1{color:#fff;font-size:var(--fs-display);max-width:13em;margin-bottom:var(--sp-5)}
.consult-intro p{max-width:36em}
.consult-intro .lead{color:#fff}
.badge-line{display:inline-flex;align-items:center;gap:var(--sp-2);margin:var(--sp-1) 0 var(--sp-6);font-size:var(--fs-sm);font-weight:700;color:var(--orange-hi)}
.badge-line::before{content:"";width:12px;height:7px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg) translateY(-2px)}
.svc-grid{grid-template-columns:1fr;counter-reset:none}
.svc{position:relative;padding:var(--sp-5) var(--sp-5) var(--sp-6);border-top:2px solid var(--green-900);background:#fff}
.svc-icon{width:32px;height:32px;color:var(--green-700);margin-bottom:var(--sp-4)}
.svc-no{position:absolute;top:var(--sp-5);right:var(--sp-5);font-size:var(--fs-sm);font-weight:700;color:var(--muted)}
.svc h3{margin:0 0 var(--sp-2);font-size:var(--fs-h3)}
.svc p{margin:0;font-size:var(--fs-sm);line-height:1.75;color:var(--ink-2)}
@media (min-width:768px){.svc-grid{grid-template-columns:repeat(2,1fr);gap:0 var(--col-gap)}.svc{border-top-width:1px;border-top-color:var(--line)}.svc:nth-child(-n+2){border-top:2px solid var(--green-900)}}
/* 合作流程：行動版直式、桌機橫式時間軸，節點為剖面小色塊 */
.steps{list-style:none;margin:0;padding:0;display:grid;counter-reset:step}
.steps li{counter-increment:step;position:relative;max-width:none;padding:0 0 var(--sp-6) var(--sp-8)}
.steps li::before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:0;width:44px;height:44px;display:grid;place-items:center;border-radius:var(--radius-sm);background:var(--green-900);color:#fff;font-family:var(--font-num);font-weight:700;box-shadow:inset 0 -6px 0 var(--orange)}
.steps li::after{content:"";position:absolute;left:21px;top:52px;bottom:8px;width:2px;background:var(--sage-2)}
.steps li:last-child::after{display:none}
.steps h3{margin:var(--sp-2) 0 var(--sp-2)}
.steps p{margin:0;color:var(--ink-2)}
@media (min-width:1024px){
  .steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--col-gap)}
  .steps li{padding:var(--sp-8) 0 0}
  .steps li::after{left:52px;right:-8px;top:21px;bottom:auto;width:auto;height:2px}
  .steps li:last-child::after{display:none}
}
.checklist{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-3)}
.checklist li{position:relative;max-width:none;padding:var(--sp-3) var(--sp-4) var(--sp-3) calc(var(--sp-4) + 28px);border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff}
.checklist li::before{content:"";position:absolute;left:var(--sp-4);top:1.05em;width:14px;height:8px;border-left:2px solid var(--green-700);border-bottom:2px solid var(--green-700);transform:rotate(-45deg)}
@media (min-width:768px){.checklist{grid-template-columns:1fr 1fr}}
.band--box{position:relative;margin-top:var(--sp-9);padding:var(--sp-8) var(--sp-5) calc(var(--sp-8) + 10px);border-radius:var(--radius);text-align:center;overflow:hidden}
.band--box::after{content:"";position:absolute;left:0;right:0;bottom:0;height:12px;background:var(--strata) 0 100%/auto 40px repeat-x}
.band--box p{margin-left:auto;margin-right:auto}
.band--box .band-phone{justify-content:center;margin:var(--sp-4) 0}
.band--box .actions{justify-content:center}

/* 聯絡頁 */
.contact-actions{display:grid;gap:var(--sp-3);margin:var(--sp-5) 0 var(--sp-7);grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
.contact-actions>:first-child{grid-column:1/-1}
@media (min-width:480px){.contact-actions{grid-template-columns:1fr 1fr}}
.info-card{position:relative;margin-bottom:var(--sp-5);padding:var(--sp-6) var(--sp-5) var(--sp-5);border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow-1);overflow:hidden}
.info-card::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:var(--strata) 0 100%/auto 100% repeat-x}
.info-card h2{margin:0 0 var(--sp-3);font-size:var(--fs-h3)}
.info-list{list-style:none;margin:0;padding:0}
.info-list li{display:grid;grid-template-columns:5.5em minmax(0,1fr);gap:var(--sp-3);padding:var(--sp-3) 0;border-bottom:1px solid var(--line);max-width:none}
.info-list li:last-child{border-bottom:0}
.info-list span{color:var(--muted);font-size:var(--fs-sm)}
.info-list a{display:inline-flex;align-items:center;min-height:44px;font-variant-numeric:tabular-nums}
.info-list li{align-items:center}

/* 404：挖到原土層 */
.dig{margin:var(--sp-8) 0 0;max-width:46rem}
.dig-strata{position:relative;height:160px;border-radius:var(--radius);background:var(--strata) 0 100%/auto 100% repeat-x;overflow:hidden}
.dig-bore{position:absolute;left:58%;top:0;bottom:0;width:22px;background:#fff;border-radius:0 0 11px 11px;box-shadow:inset 0 0 0 2px var(--green-900)}
.dig-bore::after{content:"?";position:absolute;left:50%;bottom:6px;transform:translateX(-50%);font-family:var(--font-num);font-weight:700;color:var(--green-900)}
.dig figcaption{margin-top:var(--sp-3);font-size:var(--fs-sm);color:var(--muted)}
/* 頁尾：剖面帶坐在頁尾頂端 */
.site-footer{background:var(--green-900) var(--weave);color:var(--on-dark-2);padding:0 0 var(--sp-5);font-size:var(--fs-sm)}
.site-footer .strata{margin-bottom:var(--sp-7)}
.site-footer a{display:inline-flex;align-items:center;min-height:44px;color:#fff;text-decoration:none}
.site-footer a:hover{color:var(--orange-hi);text-decoration:underline}
.footer-grid{display:grid;gap:var(--sp-6)}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin:0}
.site-footer p{margin:0 0 var(--sp-1)}
.footer-brand{color:#fff;font-size:1.3rem;font-weight:700;letter-spacing:.14em}
.site-footer .footer-title{color:var(--orange-hi);font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;margin-bottom:var(--sp-2)}
.site-footer nav ul{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--sp-4)}
.site-footer .footer-copy{margin:var(--sp-7) 0 0;padding-top:var(--sp-4);border-top:1px solid rgba(255,255,255,.12);font-size:var(--fs-xs);color:#a9bdb1}
@media (min-width:768px){.footer-grid{grid-template-columns:1.2fr 1.4fr 1fr}}

/* 快速聯絡列（行動版固定在底部；桌機為右下膠囊） */
.cta{position:fixed;left:0;right:0;bottom:0;z-index:15;display:flex;box-shadow:0 -4px 16px rgba(0,0,0,.18)}
.cta a{flex:1;display:flex;align-items:center;justify-content:center;min-height:var(--cta-h);padding:0 var(--sp-1);color:#fff;font-weight:700;letter-spacing:.04em;text-decoration:none;transition:background-color var(--dur-1)}
.cta-line{background:var(--green-900)}
.cta-line:hover{background:var(--green-800)}
.cta-phone{background:var(--orange);color:var(--ink-on-orange)!important}
.cta-phone:hover{background:var(--orange-hi)}
.cta-mail{background:var(--slate)}
.cta-mail:hover{background:#455a64}
.cta a:active{box-shadow:inset 0 3px 8px rgba(0,0,0,.25)}
.cta :focus-visible{outline-offset:-5px;box-shadow:inset 0 0 0 2px var(--green-950)}
@media (min-width:960px){
  :root{--cta-h:0px}
  html{scroll-padding-bottom:96px}
  body{padding-bottom:0}
  .site-footer{padding-bottom:96px}
  .cta{left:auto;right:var(--sp-5);bottom:var(--sp-5);border-radius:999px;overflow:hidden;box-shadow:0 0 0 2px rgba(255,255,255,.7),0 8px 24px rgba(0,0,0,.25)}
  .cta a{flex:none;min-height:46px;padding:0 var(--sp-5);font-size:var(--fs-sm)}
  .cta-phone{background:var(--green-700);color:#fff!important}
  .cta-phone:hover{background:var(--green-800)}
}

/* 動效：只在使用者未要求減少動態時宣告位移與轉場 */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .site-header nav a:not(.btn)::after{transition:transform var(--dur-2) var(--ease-out)}
  .burger,.burger::before,.burger::after,.faq-item summary::after{transition:transform var(--dur-2) var(--ease-out)}
  .btn{transition:background-color var(--dur-2),border-color var(--dur-2),color var(--dur-2),box-shadow var(--dur-2),transform var(--dur-2) var(--ease-out)}
  .btn:active{transform:translateY(1px)}
  .btn::after{transition:transform var(--dur-2) var(--ease-out)}
  .btn:hover::after,.arrow:hover::after{transform:translateX(3px)}
  .card{transition:box-shadow var(--dur-3) var(--ease-out),border-color var(--dur-3),transform var(--dur-3) var(--ease-out)}
  .card:hover{transform:translateY(-3px)}
  .card-media img{transition:transform var(--dur-4) var(--ease-out)}
  .card:hover .card-media img{transform:scale(1.04)}
  .card-body::after{transition:transform var(--dur-2) var(--ease-out)}
  .card:hover .card-body::after,.card:focus-within .card-body::after{transform:translateX(4px)}
  .cat-links a::after,.link-list a::after{transition:transform var(--dur-2) var(--ease-out)}
  .cat-links a:hover::after,.link-list a:hover::after{transform:translateX(3px)}
  .cta a:active,.band-phone:active,.sec-links a:active,.chips a:active{transform:translateY(1px)}
  /* 跨頁轉場：頁首不動，主內容 ≤260ms 淡入淡出 */
  @view-transition{navigation:auto}
  .site-header{view-transition-name:site-header}
  ::view-transition-group(*){animation-duration:var(--dur-page);animation-timing-function:var(--ease-out)}
  /* 行動選單滑入 */
  .nav-mobile nav{transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out)}
  @starting-style{.nav-mobile[open] nav{opacity:0;transform:translateY(-8px)}}
  /* FAQ 高度展開（支援 ::details-content 時） */
  @supports selector(::details-content){
    :root{interpolate-size:allow-keywords}
    .faq-item::details-content{block-size:0;overflow:clip;transition:block-size var(--dur-3) var(--ease-out),content-visibility var(--dur-3) allow-discrete}
    .faq-item[open]::details-content{block-size:auto}
  }
  /* 捲動驅動：區塊進場一次、剖面由左畫出、文章閱讀進度；不支援時內容直接可見 */
  @supports (animation-timeline:view()){
    .section-head,.cat,.why-list li,.entry,.svc,.steps li,.sol-grid>li,.grid--cards>li{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 25%}
    body:has(.hero) .cta{animation:cta-in linear both;animation-timeline:scroll(root);animation-range:0 100vh}
    .strata:not(.hero-strata),.dig-strata{animation:draw linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
    .read-progress{display:block;position:fixed;left:0;right:0;top:var(--header-h);z-index:19;height:6px;background:var(--strata) 0 100%/auto 100% repeat-x;transform-origin:0 50%;animation:grow linear both;animation-timeline:scroll(root)}
  }
  @supports (animation-timeline:view()){
    /* 剖面逐層出現：由下而上（地基先、編號最後），只用 opacity 與小位移 */
    .sec-sheet{view-timeline-name:--sec}
    .sec .sx>*{transform-box:fill-box;animation:sx-in linear both;animation-timeline:--sec;animation-range:entry calc(10% + var(--d,0) * 5%) entry calc(35% + var(--d,0) * 5%)}
    .sec .sx>:nth-child(3){--d:1}.sec .sx>:nth-child(4){--d:2}.sec .sx>:nth-child(5){--d:3}.sec .sx>:nth-child(6){--d:4}.sec .sx>:nth-child(7){--d:5}.sec .sx>:nth-child(8){--d:6}.sec .sx>:nth-child(n+9){--d:7}
    .sec .sx>.sx-detail{--d:8}.sec .sx>.k,.sec .sx>.sx-sheet{--d:9}
  }
  @keyframes sx-in{from{opacity:0;transform:translateY(8px)}}
  @keyframes rise{from{opacity:.35;transform:translateY(12px)}}
  @keyframes cta-in{0%,70%{opacity:0;visibility:hidden;transform:translateY(16px)}100%{opacity:1;visibility:visible;transform:none}}
  @keyframes draw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
  @keyframes grow{from{transform:scaleX(0)}}
}
@media print{.site-header,.cta,.nav-mobile,.strata{display:none}body{padding:0}}