/* TerraBack 多頁版（10-18）：色系照日式 B 版，按鈕學榮昊的膠囊鈕，背景用竹林照片；先只做電腦版 */
:root {
  --cream: #f5f2e8;
  --paper: #fbf9f3;
  --bamboo: #8fae5a;
  --bamboo-l: #b7cc8f;
  --bamboo-d: #5d7d34;
  --deep: #3d5229;
  --ink: #2f3a27;
  --muted: #6d7562;
  --line: #d3d9c2;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: "Noto Sans TC", system-ui, sans-serif; color: var(--ink); background: var(--cream); font-size: 16px; line-height: 1.9; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 48px; }
.serif { font-family: "Noto Serif TC", serif; }

/* 榮昊式膠囊按鈕：圓角、粗體、大字距，滑過變色放大 */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 12px; border-radius: 999px; background: var(--bamboo-d); color: #fff; font-weight: 700; font-size: 13px; letter-spacing: .32em; padding: 20px 52px; box-shadow: 0 14px 30px rgba(61, 82, 41, .25); transition: background-color .25s, transform .25s, color .25s; white-space: nowrap; }
.pill:hover { background: var(--ink); transform: scale(1.04); }
.pill:active { transform: scale(.97); }
.pill svg { width: 18px; height: 18px; }
.pill.sm { padding: 11px 24px; font-size: 12px; letter-spacing: .2em; box-shadow: 0 8px 18px rgba(61, 82, 41, .2); }
.pill.ghost { background: rgba(255, 255, 255, .55); color: var(--ink); border: 1px solid rgba(47, 58, 39, .35); box-shadow: none; backdrop-filter: blur(6px); }
.pill.ghost:hover { background: var(--ink); color: #fff; }
.pill.light { background: var(--cream); color: var(--deep); }
.pill.light:hover { background: #fff; }
.link-u { display: inline-flex; gap: 10px; align-items: center; font-family: "Noto Serif TC", serif; font-weight: 700; font-size: 18px; color: var(--bamboo-d); text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 2px; text-decoration-color: rgba(93, 125, 52, .3); transition: text-decoration-color .2s; }
.link-u:hover { text-decoration-color: var(--bamboo-d); }

/* 頁首：浮在上面的膠囊 */
.hd { position: fixed; top: 18px; left: 0; right: 0; z-index: 50; }
.hd .bar { max-width: 1240px; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; }
.logo-pill { display: flex; align-items: center; gap: 10px; padding: 8px 20px 8px 10px; border-radius: 999px; background: rgba(251, 249, 243, .88); backdrop-filter: blur(10px); box-shadow: 0 6px 20px rgba(47, 58, 39, .1); transition: transform .25s; }
.logo-pill:hover { transform: scale(1.04); }
.logo-pill img.ic { width: 38px; height: 38px; object-fit: contain; }
.logo-pill .t img { height: 19px; width: auto; }
.logo-pill .t small { display: block; font-size: 10px; letter-spacing: .3em; color: var(--muted); line-height: 1.3; margin-top: 2px; }
.navl { display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 999px; background: rgba(251, 249, 243, .88); backdrop-filter: blur(10px); box-shadow: 0 6px 20px rgba(47, 58, 39, .1); }
.navl a.n { padding: 9px 18px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--muted); transition: background-color .2s, color .2s; }
.navl a.n:hover { color: var(--ink); background: rgba(143, 174, 90, .18); }
.navl a.n.on { background: var(--ink); color: var(--cream); }

/* 首頁首屏：竹林照片背景，左邊米白漸層壓字 */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; background: url(assets/bg-hero.jpg) center 50% / cover no-repeat; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(24, 34, 19, .72) 0%, rgba(24, 34, 19, .62) 50%, rgba(24, 34, 19, .42) 100%); }
.hero .wrap { position: relative; width: 100%; display: grid; grid-template-columns: 150px 580px; justify-content: start; gap: 40px; align-items: center; padding-top: 110px; padding-bottom: 90px; }
.vt { writing-mode: vertical-rl; font-family: "Noto Serif TC", serif; font-weight: 900; font-size: 104px; line-height: 1.12; letter-spacing: .14em; margin: 0; }
.vt em { font-style: normal; color: var(--bamboo-d); }
.hero small.k { font-family: "Noto Serif TC", serif; color: var(--bamboo-d); letter-spacing: .32em; font-size: 15px; }
.hero p.lead { font-size: 18px; color: var(--muted); margin: 18px 0 36px; }
.hero .cta { display: flex; gap: 16px; }
.stats { display: flex; margin-top: 54px; }
.stats div { padding: 0 30px; border-left: 3px solid var(--bamboo); }
.stats div:first-child { padding-left: 18px; }
.stats b { display: block; white-space: nowrap; font-family: "Noto Serif TC", serif; font-size: 32px; line-height: 1.1; color: var(--deep); }
.stats span { display: block; white-space: nowrap; font-size: 13px; letter-spacing: .2em; color: var(--muted); margin-top: 6px; }

/* 內頁頁首：竹林照片橫幅 */
.banner { position: relative; padding: 170px 0 90px; background: url(assets/bg-banner.jpg) center 50% / cover no-repeat; }
.banner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(245, 242, 232, .96) 0%, rgba(245, 242, 232, .82) 50%, rgba(245, 242, 232, .3) 100%); }
.banner .wrap { position: relative; }
.crumb { font-size: 13px; letter-spacing: .3em; color: var(--muted); }
.crumb a:hover { color: var(--bamboo-d); }
.banner h1 { font-family: "Noto Serif TC", serif; font-weight: 900; font-size: 58px; letter-spacing: .06em; margin: 14px 0 12px; line-height: 1.3; }
.banner p { margin: 0; max-width: 640px; color: var(--muted); font-size: 17px; }
.bar-acc { width: 90px; height: 6px; border-radius: 99px; background: var(--bamboo); margin-top: 26px; }

/* 區塊 */
section.s { padding: 120px 0; }
section.s.paper { background: var(--paper); }
section.s.deep { background: var(--deep); color: var(--paper); }
.sh { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 36px; align-items: end; margin-bottom: 56px; }
.vlabel { writing-mode: vertical-rl; font-family: "Noto Serif TC", serif; font-size: 15px; letter-spacing: .4em; color: var(--bamboo-d); border-left: 1px solid var(--bamboo); padding-left: 10px; align-self: start; }
.vlabel b { color: var(--ink); }
.deep .vlabel { color: var(--bamboo-l); border-color: var(--bamboo-l); }
.deep .vlabel b { color: var(--paper); }
.sh h2 { font-family: "Noto Serif TC", serif; font-weight: 900; font-size: 44px; letter-spacing: .04em; margin: 0 0 10px; line-height: 1.3; }
.sh p { margin: 0; color: var(--muted); max-width: 620px; }
.deep .sh p { color: rgba(251, 249, 243, .78); }

.print { background: #fff; padding: 10px; box-shadow: 0 16px 36px rgba(47, 58, 39, .14); }
.print img { width: 100%; height: 100%; object-fit: cover; }

/* 產品卡（大圓角，學榮昊） */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.card { background: #fff; border-radius: 36px; overflow: hidden; box-shadow: 0 20px 50px rgba(47, 58, 39, .1); display: flex; flex-direction: column; transition: transform .3s; }
.card:hover { transform: translateY(-6px); }
.card .ph { aspect-ratio: 4 / 3.2; overflow: hidden; background: var(--cream); }
.card .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.card:hover .ph img { transform: scale(1.05); }
.card .bd { padding: 28px 30px 32px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card i { font-style: normal; font-family: "Noto Serif TC", serif; color: var(--bamboo); font-size: 26px; line-height: 1; }
.card h3 { margin: 0; font-family: "Noto Serif TC", serif; font-size: 24px; }
.card p { margin: 0; color: var(--muted); font-size: 15.5px; }
.card .more { margin-top: auto; padding-top: 12px; font-size: 13px; letter-spacing: .25em; font-weight: 700; color: var(--bamboo-d); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags span { font-size: 13px; padding: 3px 12px; border-radius: 999px; background: var(--cream); color: var(--deep); }

/* 兩欄 */
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center; }
.list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--ink); }
.list li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; padding: 20px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.list i { font-style: normal; font-family: "Noto Serif TC", serif; color: var(--bamboo); font-size: 20px; }
.list b { font-family: "Noto Serif TC", serif; font-size: 20px; display: block; }
.list span { color: var(--muted); font-size: 15.5px; }
.deep .list { border-color: rgba(251, 249, 243, .4); }
.deep .list li { border-color: rgba(251, 249, 243, .2); }
.deep .list i { color: var(--bamboo-l); }
.deep .list span { color: rgba(251, 249, 243, .78); }

/* 竹林照片 CTA 帶 */
.cta-band { position: relative; padding: 110px 0; background: url(assets/bg-path.jpg) center 60% / cover no-repeat; color: var(--paper); text-align: center; }
.cta-band::before { content: ""; position: absolute; inset: 0; background: rgba(47, 58, 39, .72); }
.cta-band .wrap { position: relative; }
.cta-band h2 { font-family: "Noto Serif TC", serif; font-weight: 900; font-size: 46px; letter-spacing: .06em; margin: 0 0 14px; }
.cta-band p { margin: 0 auto 38px; max-width: 620px; color: rgba(251, 249, 243, .85); }
.cta-band .row { display: flex; gap: 16px; justify-content: center; }

/* 頁尾 */
.ft { background: var(--ink); color: rgba(251, 249, 243, .7); padding: 64px 0 40px; font-size: 14px; }
.ft .top { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 48px; padding-bottom: 40px; border-bottom: 1px solid rgba(251, 249, 243, .15); }
.ft img { height: 76px; width: auto; margin-bottom: 14px; }
.ft h4 { margin: 0 0 14px; color: var(--paper); font-family: "Noto Serif TC", serif; font-size: 17px; letter-spacing: .1em; }
.ft a:hover { color: #fff; }
.ft ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ft .bot { padding-top: 24px; display: flex; justify-content: space-between; }

/* 右側浮動鈕 */
.float { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 45; display: flex; flex-direction: column; gap: 10px; }
.float a { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; border: 2px solid #fff; box-shadow: 0 6px 16px rgba(47, 58, 39, .25); transition: transform .2s; }
.float a:hover { transform: scale(1.08); }
.float a svg { width: 24px; height: 24px; }
.float .f-line { background: #06c755; }
.float .f-fb { background: #fff; color: #1877f2; overflow: hidden; }
.float .f-fb svg { width: 48px; height: 48px; }
.float .f-ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.float .f-tel { background: var(--bamboo-d); }
.float .f-tel svg { width: 20px; height: 20px; }

/* 首頁產品列（學榮昊產品列表：一列一項，圖文左右交錯） */
.prow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; padding: 56px 0; border-top: 1px solid var(--line); }
.prow:nth-child(even) .print { order: 2; }
.prow .print { aspect-ratio: 4 / 3; }
.prow small { font-size: 12px; letter-spacing: .35em; font-weight: 700; color: var(--bamboo-d); }
.prow h3 { font-family: "Noto Serif TC", serif; font-size: 34px; margin: 10px 0 16px; }
.prow ul { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 8px; color: var(--muted); }
.prow ul li::before { content: "•"; color: var(--bamboo); margin-right: 10px; }

/* 原料小知識卡 */
.know { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.know a { display: block; background: #fff; border-radius: 28px; padding: 34px 32px; box-shadow: 0 14px 36px rgba(47, 58, 39, .08); transition: transform .3s; }
.know a:hover { transform: translateY(-5px); }
.know small { font-size: 12px; letter-spacing: .3em; font-weight: 700; color: var(--bamboo-d); }
.know h3 { font-family: "Noto Serif TC", serif; font-size: 24px; margin: 10px 0 10px; }
.know p { margin: 0; color: var(--muted); font-size: 15.5px; }

/* 證書卡 */
.certs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.cert { background: #fff; border-radius: 28px; overflow: hidden; box-shadow: 0 14px 36px rgba(47, 58, 39, .08); }
.cert .ph { aspect-ratio: 4 / 3; overflow: hidden; background: #eee; border-bottom: 1px solid var(--line); }
.cert .ph img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.cert .bd { padding: 24px 28px 28px; }
.cert small { font-size: 12px; letter-spacing: .25em; font-weight: 700; color: var(--bamboo-d); }
.cert h3 { font-family: "Noto Serif TC", serif; font-size: 21px; margin: 8px 0 6px; }
.cert p { margin: 0; color: var(--muted); font-size: 15px; }
.deep .cert { color: var(--ink); }

/* 服務承諾 */
.promise { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.promise div { padding: 40px 30px; }
.promise div + div { border-left: 1px solid var(--line); }
.promise i { font-style: normal; font-family: "Noto Serif TC", serif; font-size: 40px; color: var(--bamboo); line-height: 1; }
.promise b { display: block; font-family: "Noto Serif TC", serif; font-size: 21px; margin: 16px 0 6px; }
.promise span { color: var(--muted); font-size: 15px; }

/* 關於：公司卡（學榮昊首頁那張深色圓角卡） */
.about-card { background: var(--deep); color: var(--paper); border-radius: 56px; padding: 52px 56px; position: relative; overflow: hidden; }
.about-card h3 { font-family: "Noto Serif TC", serif; font-size: 30px; margin: 0 0 6px; color: var(--bamboo-l); }
.about-card .sub { font-size: 13px; letter-spacing: .3em; color: rgba(251, 249, 243, .6); }
.about-card .rows { margin-top: 26px; border-top: 1px solid rgba(251, 249, 243, .2); }
.about-card .rows div { display: grid; grid-template-columns: 96px minmax(0, 1fr); padding: 14px 0; border-bottom: 1px solid rgba(251, 249, 243, .12); }
.about-card .rows small { color: var(--bamboo-l); }
.about-card .rows a:hover { text-decoration: underline; }
.about-card .btns { display: flex; gap: 14px; margin-top: 30px; }
.story { font-size: 18px; line-height: 2.1; color: var(--ink); margin: 0 0 30px; }
.todo { display: inline-block; background: #fff3cd; color: #7a5b00; border: 1px dashed #d9b84a; border-radius: 10px; padding: 6px 14px; font-size: 14px; }

/* 首屏 B 版（10-18 他選的）：整片淡綠壓暗、白字 */
.hero .vt { color: #fbf9f3; }
.hero .vt em { color: #cfe3a6; }
.hero small.k { color: #cfe3a6; }
.hero p.lead { color: rgba(251, 249, 243, .9); }
.hero .stats div { border-color: #cfe3a6; }
.hero .stats b { color: #fbf9f3; }
.hero .stats span { color: rgba(251, 249, 243, .75); }
.hero .pill.ghost { background: rgba(251, 249, 243, .12); color: #fbf9f3; border-color: rgba(251, 249, 243, .5); }
.hero .pill.ghost:hover { background: #fbf9f3; color: var(--ink); }

/* 首屏小字在竹節上比較花：加一點陰影、小字字距收一點 */
.hero p.lead, .hero small.k, .hero .stats span { text-shadow: 0 1px 10px rgba(0, 0, 0, .55); }
.hero .stats span { letter-spacing: .12em; font-size: 14px; }
.hero .vt, .hero .stats b { text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }

/* 頁首：頂端透明，滑動後出現米白底（10-19） */
.logo-pill, .navl, .hd-cta { transition: background-color .3s, box-shadow .3s, border-color .3s, color .3s, backdrop-filter .3s; }
.hd:not(.scrolled) .navl { background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.hd:not(.scrolled) .hd-cta { background: transparent; box-shadow: none; border: 1.5px solid var(--ink); color: var(--ink); }
.logo-pill .w { display: none; }

.hd.on-dark:not(.scrolled) .navl a.n { color: rgba(251, 249, 243, .88); text-shadow: 0 1px 8px rgba(0, 0, 0, .4); }
.hd.on-dark:not(.scrolled) .navl a.n:hover { background: rgba(251, 249, 243, .14); color: #fff; }
.hd.on-dark:not(.scrolled) .navl a.n.on { background: rgba(251, 249, 243, .92); color: var(--ink); text-shadow: none; }
.hd.on-dark:not(.scrolled) .hd-cta { border-color: rgba(251, 249, 243, .7); color: #fbf9f3; }
.hd:not(.scrolled) .hd-cta:hover { background: var(--bamboo-d); border-color: var(--bamboo-d); color: #fff; }

/* 首屏中間的字放大（10-19 他說太小不好讀） */
.hero .wrap { grid-template-columns: 170px 680px; }
.hero small.k { font-size: 18px; }
.hero p.lead { font-size: 21px; line-height: 1.9; }
.hero .stats b { font-size: 38px; }
.hero .stats span { font-size: 16px; }
.hero .pill { font-size: 15px; padding: 22px 56px; }

/* 頁尾 Logo 用彩色版，點一下回到頂端（10-19） */
.ft .to-top { display: inline-block; cursor: pointer; transition: transform .2s; }
.ft .to-top:hover { transform: translateY(-3px); }
.ft .to-top img { height: 84px; width: auto; margin-bottom: 14px; }
.ft .legal { display: flex; gap: 18px; align-items: center; }
.ft .legal i { color: rgba(251, 249, 243, .25); font-style: normal; }
/* 隱私權政策、免責聲明 */
.doc { max-width: 860px; }
.doc .upd { font-size: 13px; letter-spacing: .2em; color: var(--muted); margin: 0 0 30px; }
.doc .intro { font-size: 17px; margin: 0 0 36px; }
.doc .item { background: #fff; border-radius: 24px; padding: 30px 34px; margin-bottom: 18px; box-shadow: 0 10px 28px rgba(47, 58, 39, .06); }
.doc .item h2 { font-family: "Noto Serif TC", serif; font-size: 21px; margin: 0 0 12px; color: var(--deep); }
.doc .item p, .doc .item li { color: var(--muted); font-size: 16px; margin: 0; }
.doc .item ul { margin: 0 0 8px; padding-left: 20px; }
.doc .item .note { margin-top: 10px; font-size: 15px; }

/* 彩色 Logo 在深色底不明顯 → 墊米白小底（10-19）：頁首 Logo 一直保留米白膠囊；頁尾 Logo 墊米白圓角塊 */
.hd:not(.scrolled) .logo-pill { background: rgba(251, 249, 243, .92); box-shadow: 0 6px 20px rgba(0, 0, 0, .15); }
.ft .to-top { background: var(--paper); border-radius: 22px; padding: 14px 22px 4px; margin-bottom: 16px; }
.ft .to-top img { height: 72px; margin-bottom: 10px; }

/* 首頁首屏往下提示（10-19，不跟榮昊的箭頭一樣）：直書「往下」＋一條細線，上面有個亮點一直往下滑 */
.scroll-cue { position: absolute; left: 50%; bottom: 36px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 12px; color: rgba(251, 249, 243, .85); z-index: 2; }
.scroll-cue span { font-family: "Noto Serif TC", serif; font-size: 17px; font-weight: 600; }
.scroll-cue i { position: relative; width: 1px; height: 64px; background: rgba(251, 249, 243, .35); overflow: hidden; }
.scroll-cue i::after { content: ""; position: absolute; left: -1px; top: -18px; width: 3px; height: 18px; border-radius: 3px; background: #cfe3a6; animation: cue 2.2s cubic-bezier(.6, 0, .4, 1) infinite; }
@keyframes cue { 0% { top: -18px; } 70%, 100% { top: 64px; } }
.scroll-cue:hover { color: #fff; }
@media (prefers-reduced-motion: reduce) { .scroll-cue i::after { animation: none; top: 23px; } }

[data-count] { font-variant-numeric: tabular-nums; }
[data-count] { display: inline-grid !important; }
[data-count] > span { grid-area: 1 / 1; }
.cnt-ghost { visibility: hidden; }
.hero .stats [data-count] > span { font: inherit; letter-spacing: inherit; color: inherit; display: block; margin: 0; }

/* 首頁視差（10-19，學榮昊）：背景照片固定不動，內容往上捲過去 */
body[data-page="home"] .hero, body[data-page="home"] .cta-band { background-attachment: fixed; }

/* 往下滑漸漸浮現（10-19） */
.rv-in { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
.rv-in.rv-on { opacity: 1; transform: none; }

/* 頁尾改淺米色，Logo 不用墊底（10-19 他選 A） */
.ft { background: #e9e3d2; color: var(--muted); }
.ft h4 { color: var(--ink); }
.ft a:hover { color: var(--bamboo-d); }
.ft .top, .ft .bot { border-color: rgba(47, 58, 39, .15) !important; }
.ft .to-top { background: none; padding: 0; }
.ft .legal i { color: rgba(47, 58, 39, .3); }

/* 右側浮動鈕改和紙長條（10-19 他選 A）：米白長條、深綠單色圖示、細線隔開 */
.float{gap:0;background:rgba(245,242,232,.94);border:1px solid rgba(47,58,39,.25);border-radius:999px;padding:8px 6px;box-shadow:0 10px 26px rgba(0,0,0,.18)}

.float a{width:44px;height:44px;background:none!important;border:0;box-shadow:none;color:var(--deep)!important;border-radius:50%}

.float a+a{border-top:1px solid rgba(47,58,39,.18);border-radius:0}

.float a svg{width:22px;height:22px}
.float .f-fb svg{width:22px;height:22px}
.float .f-tel svg{width:19px;height:19px}

.float a:hover{color:var(--bamboo-d)!important;transform:none;background:rgba(143,174,90,.15)!important}


/* 頁首（10-19 改）：不要整條橫跨的底。滑動後膠囊用亮米白＋細框＋陰影，跟米白內容分得開 */
/* 滑動後（10-19 他選 2）：整條橫跨的米白毛玻璃底，Logo 跟選單後面的膠囊拿掉 */
.hd { top: 0; padding: 18px 0; transition: background-color .3s, box-shadow .3s, padding .3s; }
.hd.scrolled { padding: 8px 0; background: rgba(245, 242, 232, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(47, 58, 39, .12), 0 8px 24px rgba(47, 58, 39, .06); }
.hd.scrolled .logo-pill, .hd.scrolled .navl { background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.hd.scrolled .hd-cta { box-shadow: none; }
/* 頂端：Logo 膠囊用毛玻璃（半透明＋模糊）；目前頁面那格用外框，跟「聯絡我們」一樣，滑動後才填色 */
.hd:not(.scrolled) .logo-pill { background: rgba(245, 242, 232, .94); border: 1px solid rgba(47, 58, 39, .25); box-shadow: 0 10px 26px rgba(0, 0, 0, .18); backdrop-filter: none; -webkit-backdrop-filter: none; }
.hd:not(.scrolled) .navl a.n.on { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); }
.hd.on-dark:not(.scrolled) .navl a.n.on { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(251, 249, 243, .75); color: #fbf9f3; }
.hd.on-dark:not(.scrolled) .logo-pill small { color: var(--ink); }

/* 去背產品照放在淺竹色漸層台上，取代白底白框（10-19） */
.stage { aspect-ratio: 4 / 3; border-radius: 32px; background: radial-gradient(ellipse at 50% 38%, #f4efe2 0%, #e4e8d2 62%, #d3dcbc 100%); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.stage::after { content: ""; position: absolute; left: 50%; bottom: 9%; width: 46%; height: 7%; transform: translateX(-50%); border-radius: 50%; background: rgba(47, 58, 39, .22); filter: blur(14px); }
.stage img { position: relative; z-index: 1; height: 82%; width: auto; filter: drop-shadow(0 18px 24px rgba(47, 58, 39, .22)); transition: transform .5s; }
.card .ph.stage-ph { background: radial-gradient(ellipse at 50% 38%, #f4efe2 0%, #e4e8d2 62%, #d3dcbc 100%); display: flex; align-items: center; justify-content: center; }
.card .ph.stage-ph img { width: auto; height: 84%; object-fit: contain; filter: drop-shadow(0 14px 18px rgba(47, 58, 39, .2)); }

/* 首頁產品列的照片都改成跟夾鏈袋同樣的大圓角，不要白框（10-19） */
.prow .print { padding: 0; background: none; border-radius: 32px; overflow: hidden; box-shadow: 0 16px 36px rgba(47, 58, 39, .14); }
/* 袋子不要陰影（10-19） */
.stage::after { display: none; }
.stage img, .card .ph.stage-ph img { filter: none; }

/* 首頁產品列「了解更多」改底線文字（10-19 他選 A） */
.more-u { display: inline-flex; align-items: center; gap: 12px; padding-bottom: 6px; border-bottom: 1.5px solid var(--deep); font-weight: 700; color: var(--deep); font-size: 15px; letter-spacing: .15em; }
.more-u span { transition: transform .25s; }
.more-u:hover span { transform: translateX(6px); }

/* 首頁服務承諾：竹林照片當背景（原本最下面聯絡帶那張），固定背景視差，字改白（10-19） */
section.s.promise-bg { position: relative; background: url(assets/bg-path.jpg) center 60% / cover no-repeat fixed; color: var(--paper); }
section.s.promise-bg::before { content: ""; position: absolute; inset: 0; background: rgba(28, 40, 22, .68); }
section.s.promise-bg > .wrap { position: relative; z-index: 1; }
.promise-bg .vlabel { color: #cfe3a6; border-color: #cfe3a6; }
.promise-bg .vlabel b, .promise-bg .sh h2 { color: #fbf9f3; }
.promise-bg .sh p, .promise-bg .promise span { color: rgba(251, 249, 243, .8); }
.promise-bg .promise { border-color: rgba(251, 249, 243, .25); }
.promise-bg .promise div + div { border-color: rgba(251, 249, 243, .25); }
.promise-bg .promise i { color: #cfe3a6; }
.promise-bg .promise b { color: #fbf9f3; }

/* 首頁產品圖、標題、證書卡可點（10-19） */
.prow-pic { display: block; transition: opacity .25s; }
.prow-pic:hover { opacity: .9; }
.prow h3 a:hover { color: var(--bamboo-d); }
a.cert { display: block; transition: transform .3s, box-shadow .3s; }
a.cert:hover { transform: translateY(-5px); box-shadow: 0 20px 44px rgba(47, 58, 39, .14); }

/* 分頁標題橫幅改深綠壓暗＋白字＋視差，跟首頁首屏一致（10-19 他選 A） */
.banner { padding: 190px 0 110px; background-attachment: fixed; }
.banner::before { background: linear-gradient(90deg, rgba(24, 34, 19, .78) 0%, rgba(24, 34, 19, .6) 55%, rgba(24, 34, 19, .4) 100%); }
.banner .crumb, .banner .crumb a { color: rgba(251, 249, 243, .75); }
.banner .crumb a:hover { color: #fff; }
.banner h1 { color: #fbf9f3; text-shadow: 0 2px 18px rgba(0, 0, 0, .3); }
.banner p { color: rgba(251, 249, 243, .85); }
.banner .bar-acc { background: #cfe3a6; }
section.s.promise-bg { background-attachment: scroll; background-position: center 8%; }
.prow:nth-child(even) .prow-pic { order: 2; }

/* 材料介紹頁（10-19 重排成兩段） */
.mat-p { font-size: 17px; color: var(--muted); margin: 0 0 18px; line-height: 2; }
.mat-tags { margin: 26px 0 0; }
.mat-tags span { background: var(--sand); font-size: 14px; padding: 6px 16px; }
.mat-note { margin: 22px 0 0; font-size: 14.5px; color: var(--muted); padding-top: 18px; border-top: 1px solid var(--line); }
.mat-stats { display: grid; gap: 16px; padding-top: 8px; }
.mat-stats > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 20px; background: #fff; border-radius: 24px; padding: 26px 30px; box-shadow: 0 10px 28px rgba(47, 58, 39, .07); }
.mat-stats b { font-family: "Noto Serif TC", serif; font-size: 40px; font-weight: 900; color: var(--bamboo-d); line-height: 1; white-space: nowrap; }
.mat-stats b small { font-size: 18px; margin-left: 4px; }
.mat-stats span { color: var(--muted); font-size: 15px; line-height: 1.7; }
.mat-stats strong { display: block; color: var(--ink); font-size: 17px; margin-bottom: 2px; }
.rc3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--ink); }
.rc3 > div { padding: 30px 30px 30px 0; }
.rc3 > div + div { padding-left: 30px; border-left: 1px solid var(--line); }
.rc3 small { font-family: "Noto Serif TC", serif; font-size: 22px; font-weight: 700; color: var(--bamboo); }
.rc3 h3 { font-family: "Noto Serif TC", serif; font-size: 21px; margin: 6px 0 10px; }
.rc3 p { margin: 0 0 16px; color: var(--muted); font-size: 15.5px; line-height: 1.9; }
.mat-tags span { background: #fff; border: 1px solid var(--line); color: var(--deep); }
section.s.promise-bg::before { background: rgba(20, 30, 16, .8); }

/* 分頁標題縮矮（10-19 他說分頁閱讀不便）：一進來就看得到下面內容 */
.banner { padding: 132px 0 52px; }
.banner h1 { font-size: 44px; margin: 8px 0 8px; }
.banner p { font-size: 16px; }
.banner .bar-acc { margin-top: 18px; width: 70px; height: 5px; }
.banner + section.s { padding-top: 72px; }

/* 竹纖維產品四張卡改小卡一排四張（10-19） */
.cards.cards-sm { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.cards-sm .card { border-radius: 26px; }
.cards-sm .card .ph { aspect-ratio: 1 / 1; }
.cards-sm .card .bd { padding: 20px 22px 24px; gap: 8px; }
.cards-sm .card i { font-size: 20px; }
.cards-sm .card h3 { font-size: 19px; }
.cards-sm .card p { font-size: 14.5px; line-height: 1.75; }
.cards-sm .tags span { font-size: 12.5px; padding: 2px 10px; }
/* 分頁標題的竹林固定在區塊上、不做視差（10-19） */
.banner { background-attachment: scroll; }
/* 返回上一頁（10-19 改日式）：放右邊，細線箭頭＋襯線字，滑過線往左延伸 */
.back-link { position: absolute; right: 48px; bottom: 6px; display: inline-flex; align-items: center; gap: 14px; color: #fbf9f3; font-family: "Noto Serif TC", serif; font-size: 15px; font-weight: 600; letter-spacing: .3em; padding: 8px 0; }
.back-link i { position: relative; width: 44px; height: 1px; background: rgba(251, 249, 243, .8); transition: width .3s; }
.back-link i::before { content: ""; position: absolute; left: 0; top: -4px; width: 9px; height: 9px; border-left: 1px solid rgba(251, 249, 243, .8); border-bottom: 1px solid rgba(251, 249, 243, .8); transform: rotate(45deg); }
.back-link span { padding-bottom: 4px; border-bottom: 1px solid rgba(251, 249, 243, .35); }
.back-link:hover i { width: 64px; }
.back-link:hover span { border-color: #cfe3a6; color: #fff; }

/* 關於我們：合作流程右邊改地圖（10-19） */
.map-card { border-radius: 40px; overflow: hidden; box-shadow: 0 16px 36px rgba(47, 58, 39, .14); aspect-ratio: 1 / 1; }
.map-card iframe { width: 100%; height: 100%; border: 0; display: block; }
/* 合作流程改 2x2 正方形格（10-19） */
.step-sq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.step-sq > div { aspect-ratio: 1 / 1; background: #fff; border-radius: 28px; padding: 26px; display: flex; flex-direction: column; justify-content: flex-end; box-shadow: 0 10px 28px rgba(47, 58, 39, .07); }
.step-sq i { font-style: normal; font-family: "Noto Serif TC", serif; font-size: 34px; color: var(--bamboo); line-height: 1; margin-bottom: auto; }
.step-sq b { font-family: "Noto Serif TC", serif; font-size: 22px; }
.step-sq span { color: var(--muted); font-size: 15px; }

/* ===== 響應式（10-19）：平板 1023 以下、手機 767 以下、小手機 479 以下 ===== */
.burger, .mnav { display: none; }
img { height: auto; }
html { overflow-x: hidden; }
/* body 不能用 overflow-x: hidden：會讓 body 變成捲動框，配上 overscroll-behavior 會讓 Chrome 滑不動（10-21 傅哥回報）→ 用 clip，不支援的舊瀏覽器退回 hidden */
body { overflow-x: hidden; overflow-x: clip; }
@media (hover: none) { .hero, .banner, section.s.promise-bg { background-attachment: scroll !important; } }

@media (max-width: 1023px) {
  .wrap { padding: 0 32px; }
  .hd .bar { padding: 0 24px; }
  .navl, .hd-cta { display: none; }
  .burger { display: flex; flex-direction: column; justify-content: center; gap: 6px; width: 48px; height: 48px; padding: 0 12px; border: 0; border-radius: 999px; background: rgba(245, 242, 232, .94); box-shadow: 0 6px 20px rgba(0, 0, 0, .15); cursor: pointer; }
  .burger span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .25s, opacity .25s; }
  .hd.open .burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .hd.open .burger span:nth-child(2) { opacity: 0; }
  .hd.open .burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .mnav { display: flex; flex-direction: column; position: fixed; top: 0; left: 0; right: 0; padding: 96px 28px 28px; background: rgba(245, 242, 232, .98); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 20px 40px rgba(0, 0, 0, .12); transform: translateY(-100%); transition: transform .35s ease; z-index: -1; }
  .hd.open .mnav { transform: none; }
  .mnav a { padding: 15px 4px; border-bottom: 1px solid var(--line); font-family: "Noto Serif TC", serif; font-size: 18px; color: var(--ink); }
  .mnav a.on { color: var(--bamboo-d); font-weight: 700; }
  .mnav .pill { margin-top: 20px; border: 0; color: #fff; justify-content: center; font-family: "Noto Sans TC", sans-serif; }
  .hd.open { background: transparent !important; box-shadow: none !important; }
  .hd.open .logo-pill { background: transparent !important; box-shadow: none !important; border-color: transparent !important; }

  section.s { padding: 80px 0; }
  .two { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .sh { grid-template-columns: auto minmax(0, 1fr); gap: 22px; }
  .sh > :nth-child(3) { grid-column: 2; justify-self: start; }
  .sh h2 { font-size: 36px; }
  .hero .wrap { grid-template-columns: 110px minmax(0, 1fr); gap: 28px; }
  .vt { font-size: 76px; }
  .hero p.lead { font-size: 18px; }
  .hero .stats b { font-size: 30px; }
  .stats div { padding: 0 20px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards.cards-sm { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .know { grid-template-columns: minmax(0, 1fr); }
  .certs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .promise { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .promise div:nth-child(3) { border-left: 0; }
  .promise div:nth-child(n+3) { border-top: 1px solid rgba(251, 249, 243, .25); }
  .prow { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 44px 0; }
  .prow:nth-child(even) .prow-pic, .prow:nth-child(even) .print { order: 0; }
  .rc3 { grid-template-columns: minmax(0, 1fr); }
  .rc3 > div, .rc3 > div + div { padding: 26px 0; border-left: 0; }
  .rc3 > div + div { border-top: 1px solid var(--line); }
  .ft .top { grid-template-columns: 1fr 1fr; }
  .ft .top > div:first-child { grid-column: 1 / -1; }
  .banner { padding: 120px 0 48px; }
  .back-link { position: static; margin-top: 22px; }
  .map-card { max-width: 560px; }
  .step-sq { max-width: 560px; }
  .float { top: auto; bottom: calc(16px + env(safe-area-inset-bottom)); transform: none; right: 14px; }
}

@media (max-width: 767px) {
  .wrap { padding: 0 20px; }
  .hd { top: 10px; }
  .hd.scrolled { padding: 6px 0; }
  .hd .bar { padding: 0 14px; }
  .logo-pill { padding: 6px 14px 6px 8px; }
  .logo-pill img.ic { width: 32px; height: 32px; }
  .logo-pill .t img { height: 16px; }
  .logo-pill .t small { font-size: 9px; letter-spacing: .2em; }
  section.s { padding: 64px 0; }
  .sh { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 32px; }
  .sh > :nth-child(3) { grid-column: 1; }
  .vlabel { writing-mode: horizontal-tb; border-left: 0; border-bottom: 1px solid var(--bamboo); padding: 0 0 6px; letter-spacing: .3em; justify-self: start; }
  .sh h2 { font-size: 30px; }
  .hero { min-height: 100svh; }
  .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-top: 110px; padding-bottom: 110px; }
  .vt { writing-mode: horizontal-tb; font-size: 48px; letter-spacing: .1em; }
  .hero small.k { font-size: 14px; letter-spacing: .2em; }
  .hero p.lead { font-size: 16.5px; margin: 12px 0 26px; }
  .hero .pill { padding: 16px 34px; font-size: 14px; }
  .stats { flex-wrap: wrap; row-gap: 18px; margin-top: 36px; }
  .stats div { padding: 0 16px 0 14px; flex: 1 1 40%; }
  .stats div:first-child { padding-left: 14px; }
  .hero .stats b { font-size: 24px; }
  .hero .stats span { font-size: 12.5px; white-space: normal; }
  .scroll-cue { bottom: 22px; }
  .scroll-cue i { height: 44px; }
  .cards, .cards.cards-sm, .certs { grid-template-columns: minmax(0, 1fr); }
  .cards.cards-sm { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .cards-sm .card .bd { padding: 14px 14px 18px; }
  .cards-sm .card h3 { font-size: 16px; }
  .cards-sm .card p { font-size: 13px; }
  .cards-sm .tags { display: none; }
  .promise { grid-template-columns: minmax(0, 1fr); }
  .promise div, .promise div + div { border-left: 0; padding: 26px 0; }
  .promise div + div { border-top: 1px solid rgba(251, 249, 243, .25); }
  .prow h3 { font-size: 26px; }
  .stage { border-radius: 24px; }
  .prow .print { border-radius: 24px; }
  .story { font-size: 16.5px; }
  .about-card { border-radius: 36px; padding: 34px 26px; }
  .about-card .rows div { grid-template-columns: 80px minmax(0, 1fr); }
  .mat-stats > div { grid-template-columns: 96px minmax(0, 1fr); padding: 20px; gap: 14px; }
  .mat-stats b { font-size: 30px; }
  .list[style] { display: block !important; }
  .banner { padding: 104px 0 40px; }
  .banner h1 { font-size: 34px; }
  .banner p { font-size: 15px; }
  .ft .top { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ft .bot { flex-direction: column; gap: 10px; }
  .float a { width: 40px; height: 40px; }
  .float a svg { width: 19px; height: 19px; }
  .doc .item { padding: 22px 20px; }
  .step-sq > div { padding: 18px; border-radius: 22px; }
  .step-sq i { font-size: 26px; }
  .step-sq b { font-size: 18px; }
  .step-sq span { font-size: 13px; }
  .map-card { border-radius: 28px; }
  .mulch-photo, [style*="position:relative;padding-bottom:90px"] { padding-bottom: 70px !important; }
}
@media (max-width: 479px) {
  .vt { font-size: 42px; }
  .hero .pill { padding: 15px 26px; }
  .cta { flex-wrap: wrap; }
}
/* 合作流程小卡：不要正方形，改矮卡，數字跟標題同一行（10-19） */
.step-sq > div { aspect-ratio: auto; justify-content: flex-start; padding: 22px 24px; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 10px; align-items: baseline; }
.step-sq i { margin: 0; font-size: 26px; grid-row: span 2; }
.step-sq b { font-size: 20px; }
@media (max-width: 1023px) {
  .mnav { visibility: hidden; transition: transform .35s ease, visibility 0s .35s; }
  .hd.open .mnav { visibility: visible; transition: transform .35s ease, visibility 0s; }
}
@media (max-width: 767px) {
  .float a { width: 36px; height: 36px; }
  .float a svg { width: 17px !important; height: 17px !important; }
  .float { padding: 5px 3px; right: 10px; }
  .step-sq > div { grid-template-columns: minmax(0, 1fr); row-gap: 4px; padding: 18px; }
  .step-sq i { grid-row: auto; margin-bottom: 6px; font-size: 24px; }
  .step-sq span { font-size: 13.5px; line-height: 1.6; }
}
/* 手機頁首（10-19 iPhone 抓到）：頁首貼齊最上緣、底色蓋到瀏海／狀態列，往下滑時上面不會露出內容 */
@media (max-width: 1023px) {
  .hd { top: 0 !important; padding: calc(10px + env(safe-area-inset-top)) 0 10px !important; }
  .hd.scrolled { padding: calc(6px + env(safe-area-inset-top)) 0 6px !important; background: rgba(245, 242, 232, .97); }
  .mnav { padding-top: calc(96px + env(safe-area-inset-top)); }
}

/* 首頁入場動畫（10-19）：竹林從暗處亮起 → 「以竹代塑」由上往下像落筆寫出 → 右邊文字依序浮上 → 選單最後出現
   只有首頁、有 JS 時才加 html.intro；減少動態的設定不播 */
@keyframes in-dim { from { opacity: 1; } to { opacity: 0; } }
@keyframes in-zoom { from { transform: scale(1.06); } to { transform: none; } }
@keyframes in-write { from { clip-path: inset(0 0 100% 0); opacity: .2; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
@keyframes in-write-h { from { clip-path: inset(0 100% 0 0); opacity: .2; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
@keyframes in-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes in-fade { from { opacity: 0; } to { opacity: 1; } }
html.intro .hero::after { content: ""; position: absolute; inset: 0; background: #10170c; pointer-events: none; z-index: 3; animation: in-dim 1.6s cubic-bezier(.4, 0, .2, 1) .1s both; }
html.intro .hero .wrap { animation: in-zoom 2.6s cubic-bezier(.2, .7, .2, 1) both; }
html.intro .hero .vt { animation: in-write 1.3s cubic-bezier(.6, 0, .3, 1) .45s both; }
html.intro .hero .wrap > div > * { animation: in-up .9s cubic-bezier(.2, .7, .2, 1) both; }
html.intro .hero small.k { animation-delay: 1.2s; }
html.intro .hero p.lead { animation-delay: 1.35s; }
html.intro .hero div.cta { animation-delay: 1.5s; }
html.intro .hero div.stats { animation-delay: 1.65s; }
html.intro .hd, html.intro .float { animation: in-fade .9s ease 1.8s both; }
html.intro .scroll-cue { animation: in-fade 1s ease 2.2s both; }
@media (max-width: 767px) { html.intro .hero .vt { animation-name: in-write-h; } }

/* PPWR 法規頁（10-19） */
.hero .cta { flex-wrap: wrap; }
.law-tl { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.law-tl li { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 30px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.law-tl time { font-family: "Noto Serif TC", serif; font-size: 26px; font-weight: 900; color: var(--bamboo-d); letter-spacing: .04em; line-height: 1.3; }
.law-tl h3 { margin: 0 0 6px; font-size: 20px; }
.law-tl p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.85; }
.law-tb-wrap { overflow-x: auto; }
.law-tb { width: 100%; border-collapse: collapse; background: #fff; border-radius: 24px; overflow: hidden; box-shadow: 0 10px 28px rgba(47, 58, 39, .07); }
.law-tb th { background: var(--deep); color: #fbf9f3; font-weight: 700; text-align: left; padding: 18px 28px; font-size: 15px; letter-spacing: .1em; }
.law-tb th + th, .law-tb td + td { text-align: center; width: 160px; }
.law-tb td { padding: 22px 28px; border-top: 1px solid var(--line); font-size: 17px; }
.law-tb td small { display: block; color: var(--muted); font-size: 14px; margin-top: 2px; }
.law-tb td + td { font-family: "Noto Serif TC", serif; font-size: 30px; font-weight: 900; color: var(--bamboo-d); }
.law-note { color: var(--muted); font-size: 14px; line-height: 1.8; margin: 20px 0 0; }
.law-note a { text-decoration: underline; text-underline-offset: 3px; }
.law-ban { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.law-ban > div { background: #fff; border-radius: 24px; padding: 28px 30px; box-shadow: 0 10px 28px rgba(47, 58, 39, .07); }
.law-ban b { font-family: "Noto Serif TC", serif; font-size: 22px; color: var(--bamboo); }
.law-ban h3 { margin: 8px 0 6px; font-size: 19px; }
.law-ban p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.8; }
@media (max-width: 1023px) { .law-ban { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .law-tl li { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 22px 0; }
  .law-tl time { font-size: 22px; }
  .law-ban { grid-template-columns: minmax(0, 1fr); }
  .law-tb th, .law-tb td { padding: 14px 14px; }
  .law-tb th + th, .law-tb td + td { width: 76px; }
  .law-tb td + td { font-size: 22px; }
  .law-tb td { font-size: 15px; }
}

/* 手機也有視差（10-19）：iPhone 不支援 background-attachment: fixed，改用「固定在螢幕上的圖層＋區塊裁切」做出一樣效果 */
@media (hover: none) {
  body[data-page="home"] .hero { background: none !important; clip-path: inset(0); }
  body[data-page="home"] .hero::before { position: fixed; top: 0; left: 0; right: 0; bottom: auto; height: 100lvh;
    background: linear-gradient(90deg, rgba(24, 34, 19, .72) 0%, rgba(24, 34, 19, .62) 50%, rgba(24, 34, 19, .42) 100%), url(assets/bg-hero.jpg) center 50% / cover no-repeat; }
}

/* 首頁品牌影片播放器（10-20，比照榮昊官網的播放器，配色換成綠森）：點了才播；播放中控制列自動隱藏 */
section.s.film { padding: 110px 0 100px; }
.film-box { position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 16 / 9; background: #1e2a17; box-shadow: 0 24px 60px rgba(47, 58, 39, .14); }
.film-box video { display: block; width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.film-box::after { content: ""; position: absolute; inset: 0; background: rgba(20, 28, 15, .28); pointer-events: none; transition: opacity .5s; }
.film-box.playing::after { opacity: 0; }
.fp-big { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; z-index: 2; border-radius: 50%; border: 1.5px solid rgba(251, 249, 243, .8); background: rgba(24, 34, 19, .35); color: #fbf9f3; display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform .3s, background .3s, opacity .4s; }
.fp-big svg { width: 34px; height: 34px; }
.fp-big:hover { transform: scale(1.06); background: rgba(143, 174, 90, .55); }
.film-box.playing .fp-big { opacity: 0; pointer-events: none; }
.fp-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 30px 30px 20px; background: linear-gradient(0deg, rgba(16, 22, 12, .65), transparent); transition: opacity .5s; }
.film-box.idle .fp-bar { opacity: 0; pointer-events: none; }
.film-box.idle { cursor: none; }
.fp-track { height: 4px; border-radius: 99px; background: rgba(251, 249, 243, .25); cursor: pointer; margin-bottom: 12px; }
.fp-track i { display: block; height: 100%; width: 0; border-radius: 99px; background: #b5d17f; }
.fp-row { display: flex; align-items: center; gap: 14px; color: #fbf9f3; }
.fp-row button { background: none; border: 0; padding: 4px; color: rgba(251, 249, 243, .85); cursor: pointer; display: flex; }
.fp-row button:hover { color: #fff; }
.fp-row svg { width: 18px; height: 18px; }
.fp-play .ic-pause, .film-box.playing .fp-play .ic-play { display: none; }
.film-box.playing .fp-play .ic-pause { display: block; }
.fp-time { font-size: 12px; color: rgba(251, 249, 243, .6); font-variant-numeric: tabular-nums; }
.fp-label { margin-left: auto; font: 500 11px/1 "Noto Serif TC", serif; letter-spacing: .3em; color: rgba(251, 249, 243, .65); }
.fp-fs { background: rgba(251, 249, 243, .14) !important; border-radius: 10px; padding: 7px !important; }
.fp-fs:hover { background: rgba(251, 249, 243, .26) !important; }
.film-cap { margin: 22px 0 0; text-align: center; font-family: "Noto Serif TC", serif; font-size: 14px; letter-spacing: .35em; color: var(--muted); }
@media (max-width: 767px) {
  section.s.film { padding: 56px 0 48px; }
  .film-box { border-radius: 18px; }
  .fp-big { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
  .fp-big svg { width: 24px; height: 24px; }
  .fp-bar { padding: 20px 14px 10px; }
  .fp-label { display: none; }
  .fp-row { gap: 8px; }
  .fp-time { margin-right: auto; }
  .film-cap { font-size: 12px; letter-spacing: .2em; margin-top: 14px; }
}

/* 滑到最頂再往上拉（彈性捲動）會露出後面的白底（10-20）：
   1. 能關掉彈跳的瀏覽器直接關掉
   2. 關不掉的（舊版 iPhone 等），後面墊色：上半段深綠接主視覺、下半段米白接頁尾 */
html { overscroll-behavior-y: none; }
html { background: linear-gradient(#1c2716 50%, #f5f2e8 50%); }

/* 影片區改左右分欄（10-20）：左邊講為什麼用竹子、右邊影片 */
.film-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
.film-txt .mat-p { margin-bottom: 26px; }
.why { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.why li { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.why b { font-family: "Noto Serif TC", serif; font-size: 18px; color: var(--bamboo-d); }
.why span { color: var(--muted); font-size: 15.5px; line-height: 1.8; }
@media (max-width: 1023px) {
  .film-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 767px) {
  .why li { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 14px 0; }
  .why b { font-size: 16.5px; }
}
/* 封面改 Logo 那一格、拿掉中間播放鈕（10-20）：不再蓋一層暗色，Logo 保持乾淨；點影片任何地方或左下播放鍵就播 */
.film-box::after { display: none; }

/* 10-21 修改：回收料比例標籤、首頁產品列內連結、關於我們工廠照片下的聯絡資訊 */
.list em.ratio { display: block; width: max-content; margin-top: 8px; font-style: normal; font-size: 13.5px; letter-spacing: .06em; color: var(--deep); background: rgba(143, 174, 90, .18); border-radius: 999px; padding: 3px 12px; }
.prow ul a { color: var(--bamboo-d); text-decoration: underline; text-underline-offset: 3px; }
.ab-contact { margin: 24px 0 0; padding: 0; border-top: 1px solid var(--line); }
.ab-contact > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; }
.ab-contact dt { color: var(--bamboo-d); font-family: "Noto Serif TC", serif; }
.ab-contact dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.ab-contact a:hover { color: var(--bamboo-d); }

/* 證書頁分頁（10-21） */
.ctabs-bar { background: var(--paper); padding: 56px 0 0; }
.ctabs { display: flex; gap: 12px; flex-wrap: wrap; }
.ctabs button { font: 700 15px/1 "Noto Sans TC", sans-serif; letter-spacing: .12em; padding: 15px 30px; border-radius: 999px; border: 1px solid rgba(47, 58, 39, .25); background: transparent; color: var(--ink); cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.ctabs button:hover { border-color: var(--deep); }
.ctabs button.on { background: var(--deep); border-color: var(--deep); color: #fbf9f3; }
section.ctab { padding-top: 56px; }
section.ctab[hidden] { display: none; }
@media (max-width: 767px) {
  .ctabs-bar { padding-top: 36px; }
  .ctabs { gap: 8px; }
  .ctabs button { flex: 1 1 0; padding: 13px 10px; font-size: 14px; letter-spacing: .06em; }
  section.ctab { padding-top: 36px; }
}

/* 10-21 PPWR 頁數字卡在手機疊字（「2026.8.12」比左欄寬）→ 手機改成數字在上、說明在下 */
@media (max-width: 767px) {
  .mat-stats > div { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 20px 22px; }
}

/* 10-21 頁尾縮短：LINE／IG／FB 同一行；手機上 Logo 跟公司名並排、網站導覽排成三欄兩列 */
.ft .ft-social { display: flex; flex-wrap: wrap; column-gap: 22px; row-gap: 4px; }
@media (max-width: 767px) {
  .ft { padding: 44px 0 32px; }
  .ft .top { gap: 26px; padding-bottom: 28px; }
  .ft .ft-brand { display: flex; align-items: center; gap: 18px; }
  .ft .ft-brand .to-top { margin: 0; flex: none; }
  .ft .ft-brand .to-top img { height: 58px; margin: 0; }
  .ft h4 { margin-bottom: 10px; }
  .ft .ft-nav ul { grid-template-columns: repeat(3, max-content); column-gap: 26px; row-gap: 6px; }
  .ft .bot { padding-top: 18px; }
}
/* 手機滑到最底，右下浮動條會蓋住版權那行 → 右邊讓出浮動條的寬度 */
@media (max-width: 767px) { .ft .bot, .ft .ft-social { padding-right: 64px; } }

/* 地膜頁直式影片（10-21）：兩支並排、手機上下排；同一時間只播一支 */
.vids { display: grid; grid-template-columns: repeat(2, minmax(0, 340px)); justify-content: center; gap: 48px; }
.vid { margin: 0; }
.film-box.tall { aspect-ratio: 9 / 16; border-radius: 26px; }
.film-box.tall .fp-bar { padding: 26px 18px 14px; }
.film-box.tall .fp-time { margin-right: auto; }
.vid figcaption { margin-top: 16px; text-align: center; font-family: "Noto Serif TC", serif; font-size: 17px; letter-spacing: .25em; color: var(--ink); }
.vids-cta { display: flex; justify-content: center; margin-top: 44px; }
@media (max-width: 767px) {
  .vids { grid-template-columns: minmax(0, 320px); gap: 36px; }
  .film-box.tall { border-radius: 20px; }
  .vids-cta { margin-top: 32px; }
}

/* 產品頁排版（10-21）：圖文兩欄不要一高一低
   地膜：照片拉到跟右邊文字一樣高（裁切照片左右）；回收料：照片比例太寬，裁了會切到字，改成上下置中
   產品卡片：標籤一律貼齊卡片底部，三張卡的標籤排在同一條線上 */
.two.eq { align-items: stretch; }
.two.eq > .print.fill { height: 100%; min-height: 360px; }
.card .bd .tags { margin-top: auto; }
@media (max-width: 1023px) {
  .two.eq > .print.fill { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
}
.card .bd .tags + .more { margin-top: 0; }
/* 回收料照片很寬（16:9），欄位一窄、文字一高，拉成等高會把袋子上的字裁掉 → 1199 以下改回原比例、上下置中 */
@media (max-width: 1199px) {
  .two.eq.wide-pic { align-items: center; }
  .two.eq.wide-pic > .print.fill { height: auto; min-height: 0; aspect-ratio: 16 / 9; }
}
/* 10-21 回收料比例標籤改放在品名旁邊 */
.list b .ratio { display: inline-block; width: auto; margin: 0 0 0 12px; vertical-align: 3px; font-family: "Noto Sans TC", sans-serif; font-weight: 500; }
/* 品名旁的回收料比例：手機換行時對齊左邊，不要內縮 */
.list b:has(.ratio) { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 6px; }
.list b .ratio { margin: 0; vertical-align: baseline; }
.deep .link-u { color: #cfe3a6; text-decoration-color: rgba(207, 227, 166, .45); }
.deep .link-u:hover { text-decoration-color: #cfe3a6; }

/* 影片音量（10-21）：喇叭鍵＋拉桿 */
.fp-vol { display: flex; align-items: center; gap: 4px; }
.fp-mute .ic-off, .film-box.muted .fp-mute .ic-on { display: none; }
.film-box.muted .fp-mute .ic-off { display: block; }
.fp-range { -webkit-appearance: none; appearance: none; width: 78px; height: 4px; margin: 0 4px 0 2px; border-radius: 99px; cursor: pointer; background: linear-gradient(to right, #b5d17f var(--v, 100%), rgba(251, 249, 243, .3) var(--v, 100%)); }
.fp-range::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #fbf9f3; border: 0; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
.fp-range::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fbf9f3; border: 0; }
.fp-range:focus-visible { outline: 2px solid #b5d17f; outline-offset: 4px; }
@media (max-width: 767px) { .fp-range { width: 60px; } }

/* 地膜頁「全生物降解循環流程」（10-21）：跟榮昊那個深色圓環不一樣——米白底、四個拱形窗照片一字排開，
   中間細線箭頭串起來，底下一條回頭的弧線寫「循環」，表示第四步會回到第一步 */
.cycle { --cg: 56px; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--cg); }
.cycle li { position: relative; text-align: center; }
.cy-pic { position: relative; aspect-ratio: 3 / 4; border-radius: 999px 999px 22px 22px; overflow: hidden; background: var(--cream); box-shadow: 0 16px 36px rgba(47, 58, 39, .12); }
.cy-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cy-fig { position: relative; }
.cycle li:not(:last-child) .cy-fig::after { content: ""; position: absolute; top: 50%; right: calc(var(--cg) / -2 - 17px); width: 34px; height: 12px; transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 12'%3E%3Cpath d='M1 6h31M26 1.5l6 4.5-6 4.5' fill='none' stroke='%238fae5a' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.cycle i { display: block; margin: 24px 0 6px; font-style: normal; font-family: "Noto Serif TC", serif; font-size: 22px; color: var(--bamboo); }
.cycle b { display: block; font-family: "Noto Serif TC", serif; font-size: 18px; color: var(--ink); line-height: 1.6; }
.cycle span { display: block; margin-top: 2px; font-size: 15px; color: var(--muted); }
.cy-back { position: relative; height: 40px; margin: 30px 0 0 calc((100% - 3 * 56px) / 8); width: calc(100% - (100% - 3 * 56px) / 4); border: 1px solid rgba(143, 174, 90, .75); border-top: 0; border-radius: 0 0 28px 28px; }
.cy-back::before { content: ""; position: absolute; left: -6px; top: -9px; width: 11px; height: 11px; border-left: 1.3px solid #8fae5a; border-top: 1.3px solid #8fae5a; transform: rotate(45deg); }
.cy-back em { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%); padding: 0 18px; background: var(--paper); font-style: normal; font-family: "Noto Serif TC", serif; font-size: 15px; letter-spacing: .5em; text-indent: .5em; color: var(--bamboo-d); }
@media (max-width: 1023px) {
  .cycle { grid-template-columns: repeat(2, minmax(0, 1fr)); --cg: 28px; row-gap: 40px; max-width: 560px; margin: 0 auto; }
  .cycle li .cy-fig::after, .cy-back { display: none; }
}
@media (max-width: 767px) {
  .cycle { --cg: 18px; row-gap: 30px; }
  .cycle i { margin-top: 16px; font-size: 19px; }
  .cycle b { font-size: 16px; }
  .cycle span { font-size: 14px; }
}

/* 材料頁竹纖維區（10-21）：版面維持原樣，只把「竹纖維降解產品 →」移到右上角（數字卡上方） */
.mat-side { display: flex; flex-direction: column; align-items: flex-end; }
.mat-side .mat-stats { width: 100%; margin-top: 14px; }
@media (max-width: 1023px) { .mat-side { align-items: flex-start; } }

/* 地膜頁簡報下載（10-21） */
.deck { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: center; }
.deck-cover { display: block; border-radius: 22px; overflow: hidden; box-shadow: 0 20px 48px rgba(47, 58, 39, .16); transition: transform .3s; }
.deck-cover:hover { transform: translateY(-4px); }
.deck-cover img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.deck-txt h3 { margin: 0 0 8px; font-family: "Noto Serif TC", serif; font-size: 26px; color: var(--ink); }
.deck-meta { margin: 0 0 28px; color: var(--muted); font-size: 15px; letter-spacing: .08em; }
.deck-btns { display: flex; flex-wrap: wrap; gap: 14px; }
@media (max-width: 1023px) { .deck { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
@media (max-width: 767px) { .deck-txt h3 { font-size: 21px; } .deck-meta { margin-bottom: 20px; } }

/* 證書頁竹纖維原料四張一排（10-21 加華測原料重金屬） */
.certs.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.certs.c4 .cert .bd { padding-left: 24px; padding-right: 24px; }
@media (max-width: 1023px) { .certs.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .certs.c4 { grid-template-columns: minmax(0, 1fr); } }

/* 10-21 響應式總檢查
   1. 標題、短標籤斷行時平均分配，不會最後一行只剩一兩個字（Chrome、iOS 17.5 以上有效，舊版照常顯示）
   2. PPWR 表格手機版的「2030 年起」不要斷成兩行
   3. 證書四張一排只在 1200 以上，iPad 橫放改兩張一排，標題不會被擠斷 */
h1, h2, h3, h4, .cycle b, .mat-stats strong, .law-tb small, figcaption { text-wrap: balance; }
@media (max-width: 767px) {
  .law-tb th { white-space: nowrap; font-size: 13px; letter-spacing: .02em; padding: 12px 10px; }
  .law-tb th + th, .law-tb td + td { width: 84px; }
}
@media (max-width: 1199px) { .certs.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .certs.c4 { grid-template-columns: minmax(0, 1fr); } }

/* 10-21 響應式總檢查（續）
   4. .kw：中文只在 <wbr>、空白、標點換行，不會把「限制」「生物基」這種詞切開 */
.kw { word-break: keep-all; }

/* 5. 三張一組（產品總覽、首頁證書）在平板直放也三張一排，不會變成 2＋1 */
@media (min-width: 768px) and (max-width: 1023px) {
  .cards.c3, .certs.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .cards.c3 .card .bd, .certs.c3 .cert .bd { padding: 20px 20px 24px; }
  /* 關於我們：合作流程、地圖在平板直放改滿版，不要只佔左邊 560 */
  .step-sq, .map-card { max-width: none; }
  .map-card { aspect-ratio: 16 / 10; }
}
/* 6. iPad 橫放（1024～1199）合作流程卡片太窄，數字欄縮小讓字不要斷成「生／產」 */
@media (min-width: 1024px) and (max-width: 1199px) {
  .step-sq > div { grid-template-columns: 30px minmax(0, 1fr); column-gap: 8px; padding: 20px 18px; }
  .step-sq i { font-size: 22px; }
}
/* 7. 手機首屏「覽」跟數字太近；手機橫放首屏比螢幕高，「覽」會壓到數字 → 橫放直接不顯示 */
@media (max-width: 767px) { .hero .wrap { padding-bottom: 128px; } }
@media (max-height: 500px) { .scroll-cue { display: none; } .hero .wrap { padding-bottom: 60px; } }
/* 8. 手機橫放打開選單比螢幕高，下面幾項看不到 → 可以捲、間距縮小 */
@media (max-width: 1023px) {
  .mnav { max-height: 100vh; max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain; }
}
@media (max-width: 1023px) and (max-height: 500px) {
  .mnav { padding-top: calc(72px + env(safe-area-inset-top)); padding-bottom: 16px; }
  .mnav a { padding: 10px 4px; font-size: 16px; }
  .mnav .pill { margin-top: 12px; }
}
/* 9. 手機、平板：首屏文字還在浮動按鈕底下時先藏起來，捲過去才出現（common.js 加 .fl-wait） */
@media (max-width: 1023px) {
  .float { transition: opacity .3s ease, transform .3s ease; }
  .float.fl-wait { opacity: 0 !important; transform: translateY(14px); pointer-events: none; }
}
/* 10. PPWR 再生料表格在 320～374 寬的小手機會比螢幕寬、右邊 2040 那欄被切 → 縮內距跟數字 */
@media (max-width: 374px) {
  .law-tb th, .law-tb td { padding: 12px 8px; }
  .law-tb th + th, .law-tb td + td { width: 70px; }
  .law-tb td + td { font-size: 20px; }
}

/* 關於我們：品牌故事標題旁放 Logo（10-21 傅哥要的，故事裡講的就是標誌的意思） */
.story-sh { align-items: center; }
.story-logo { display: block; height: 118px; width: auto; }
@media (max-width: 1023px) { .story-sh .story-logo { grid-column: auto; justify-self: end; height: 84px; } }
@media (max-width: 767px) { .story-sh { grid-template-columns: auto minmax(0, 1fr) auto !important; } .story-sh .story-logo { height: 64px; } }