/* 壤製所官網 v1（20261104）｜色票與版面數字照 rang-brand-visual 與 20260910 規劃骨架 */
:root{
  --ink:#1A1410; --soil:#3D2817; --soil-mid:#6B4423; --clay-line:#A8927A;
  --seal:#B23A2C; --paper:#F5EFE3; --paper-2:#FBF8F2; --line:#E3D9C6;
  --serif:"Noto Serif TC","Songti TC","PMingLiU",serif;
  --sans:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.8;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.narrow{max-width:760px}
.seg{display:inline-block}

/* 頁首 */
header.site{border-bottom:1px solid var(--line);background:var(--paper)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px;gap:12px}
.brand{display:flex;align-items:baseline;gap:10px;text-decoration:none;white-space:nowrap}
.brand b{font-family:var(--serif);font-weight:700;font-size:22px;color:var(--soil);letter-spacing:.08em}
.brand span{font-size:11px;letter-spacing:.28em;color:var(--soil-mid)}
.nav-links{list-style:none;display:flex;gap:20px;font-size:14px;padding:0 0 12px}
.nav-links a{text-decoration:none;color:var(--soil)}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--seal)}
.nav-desk{display:none}

/* 按鈕與連結 */
.btn{display:inline-block;border-radius:999px;text-decoration:none;font-size:15px;font-weight:500;padding:12px 24px;line-height:1.2;transition:opacity .2s ease-out;border:0;cursor:pointer;font-family:var(--sans)}
.btn:hover{opacity:.85}
.btn-main{background:var(--soil);color:var(--paper)}
.btn-sub{border:1px solid var(--soil);color:var(--soil);padding:11px 23px;background:transparent}
.nav .btn{padding:9px 16px;font-size:14px}
.link{color:var(--soil);text-decoration:none;border-bottom:1px solid var(--clay-line);padding-bottom:2px;font-weight:500}
.link:hover{border-color:var(--seal)}

/* 首屏 */
.hero{padding:48px 0 64px}
.hero-grid{display:grid;grid-template-columns:1fr;gap:28px;align-items:start}
.hero h1{font-family:var(--serif);font-weight:600;color:var(--soil);font-size:clamp(22px,6.2vw,28px);line-height:1.55;letter-spacing:-.01em}
.hero h1 .line{display:block}
.hero .lede{margin-top:20px;font-size:16px;color:var(--soil-mid);max-width:32em}
.actions{margin-top:32px;display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.vert{order:-1;justify-self:end;writing-mode:vertical-rl;font-family:var(--serif);font-weight:700;color:var(--soil);font-size:30px;letter-spacing:.18em;line-height:1.5;position:relative;padding-bottom:44px}
.vert .seal{position:absolute;bottom:0;left:50%;transform:translateX(-50%);writing-mode:horizontal-tb;width:30px;height:30px;border:1.5px solid var(--seal);color:var(--seal);font-size:16px;line-height:27px;text-align:center;letter-spacing:0;border-radius:3px}

/* 頁面標題（內頁） */
.page-head{padding:48px 0 40px;border-bottom:1px solid var(--line)}
.page-head h1{font-family:var(--serif);font-weight:600;color:var(--soil);font-size:30px;line-height:1.45;letter-spacing:-.01em}
.page-head .lede{margin-top:14px;color:var(--soil-mid);max-width:34em}
.crumb{font-size:13px;color:var(--soil-mid);margin-bottom:14px}
.crumb a{text-decoration:none;border-bottom:1px solid var(--line)}

/* 區塊 */
section{padding:64px 0}
.alt{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
h2{font-family:var(--serif);font-weight:600;color:var(--soil);font-size:24px;line-height:1.5;letter-spacing:-.01em}
.sec-lede{margin-top:10px;color:var(--soil-mid);max-width:34em}
.fine{font-size:12px;color:var(--soil-mid);margin-top:12px;line-height:1.7}

/* 首頁證據 */
.proof{display:grid;gap:28px}
.proof figure img{border-radius:12px;width:100%;aspect-ratio:16/10;object-fit:cover}
.proof figcaption{font-size:12px;color:var(--soil-mid);margin-top:8px}
.proof .who{font-size:14px;color:var(--soil-mid);letter-spacing:.06em}
.proof h2{margin-top:6px}
.nums{display:grid;grid-template-columns:1fr 1fr 1fr;margin-top:24px;border-top:1px solid var(--line)}
.nums div{padding:16px 10px 0 0}
.nums div+div{padding-left:10px;border-left:1px solid var(--line)}
.nums strong{display:block;font-family:var(--serif);font-weight:600;color:var(--soil);font-size:24px;line-height:1.3}
.nums small{display:block;font-size:13px;color:var(--soil-mid);line-height:1.6;margin-top:4px}
.more{margin-top:20px}

/* 案例卡 */
.cases{display:grid;gap:20px;margin-top:32px}
.card{background:var(--paper-2);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;text-decoration:none}
.card .ph{aspect-ratio:16/10;object-fit:cover;width:100%;border-bottom:1px solid var(--line)}
.card .body{padding:24px;display:flex;flex-direction:column;gap:12px;flex:1}
.card h3{font-family:var(--serif);font-weight:600;color:var(--soil);font-size:20px;line-height:1.4}
.card .sub{font-size:13px;color:var(--soil-mid);line-height:1.5;margin-top:-6px}
.card .stuck{font-size:15px}
.card .result{font-size:15px;color:var(--soil);font-weight:500;border-left:2px solid var(--soil);padding-left:12px}
.card .go{margin-top:auto;padding-top:4px;font-size:14px;align-self:flex-start}
.all{margin-top:28px}

/* 案例列表（大卡） */
.case-row{display:grid;gap:0;background:var(--paper-2);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:28px}
.case-row img{width:100%;aspect-ratio:16/10;object-fit:cover}
.case-row .body{padding:24px}
.case-row h2{font-size:22px}
.case-row .sub{font-size:13px;color:var(--soil-mid);margin-top:2px}
.case-row dl{margin-top:18px;display:grid;gap:14px}
.case-row dt{font-size:13px;color:var(--soil-mid)}
.case-row dd{font-size:15px}
.case-row ul{list-style:none;display:grid;gap:6px}
.case-row ul li{font-weight:500;color:var(--soil);border-left:2px solid var(--soil);padding-left:12px;font-size:15px}
.case-row .go{display:inline-block;margin-top:20px}

/* 更多作品 */
.works{display:grid;gap:20px;margin-top:28px;grid-template-columns:1fr}
.work{background:var(--paper-2);border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;display:flex;flex-direction:column}
.work .thumb{position:relative}
.work .thumb img{width:100%;aspect-ratio:16/9;object-fit:cover}
.work .play{position:absolute;right:12px;bottom:12px;background:rgba(26,20,16,.72);color:var(--paper);font-size:12px;border-radius:999px;padding:4px 12px}
.work .body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.work h3{font-family:var(--serif);font-weight:600;color:var(--soil);font-size:17px;line-height:1.45}
.work .meta{font-size:12px;color:var(--soil-mid)}
.work p{font-size:14px}

/* 怎麼合作 */
.steps{list-style:none;display:grid;gap:0;margin-top:32px;border-top:1px solid var(--line)}
.steps li{display:grid;grid-template-columns:48px 1fr;gap:12px;padding:18px 0;border-bottom:1px solid var(--line)}
.steps .n{font-family:var(--serif);color:var(--soil-mid);font-size:15px}
.steps b{font-family:var(--serif);color:var(--soil);font-weight:600;font-size:18px;display:block;line-height:1.4}
.steps p{font-size:15px;color:var(--ink);margin-top:2px}
.box{margin-top:32px;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:24px}
.alt .box{background:var(--paper)}
.box h3{font-family:var(--serif);color:var(--soil);font-size:18px;font-weight:600}
.box ul{margin-top:12px;padding-left:1.2em;display:grid;gap:6px}
.box p{margin-top:10px}

/* 服務 */
.chain{display:grid;gap:20px;margin-top:32px}
.stage{background:var(--paper-2);border:1px solid var(--line);border-radius:16px;padding:24px}
.stage .tag{font-family:var(--serif);color:var(--seal);font-size:15px}
.stage h3{font-family:var(--serif);color:var(--soil);font-size:22px;font-weight:600;margin-top:2px}
.stage p.what{margin-top:8px;color:var(--soil-mid)}
.stage dl{margin-top:16px;display:grid;gap:12px}
.stage dt{font-size:13px;color:var(--soil-mid)}
.stage dd{font-size:15px}
.who-list{display:grid;gap:0;margin-top:28px;border-top:1px solid var(--line)}
.who-list div{padding:16px 0;border-bottom:1px solid var(--line)}
.who-list b{font-family:var(--serif);color:var(--soil);font-size:17px;font-weight:600}
.who-list p{font-size:15px;margin-top:2px}

/* 關於 */
.method{display:grid;gap:20px;margin-top:28px}
.method .m{border-top:1px solid var(--soil);padding-top:16px}
.method .m .k{font-family:var(--serif);font-weight:700;color:var(--soil);font-size:40px;line-height:1}
.method .m h3{font-family:var(--serif);color:var(--soil);font-size:20px;font-weight:600;margin-top:12px}
.method .m .eq{font-size:14px;color:var(--soil-mid)}
.method .m p{margin-top:8px}
.beliefs{display:grid;gap:0;margin-top:28px;border-top:1px solid var(--line)}
.beliefs div{display:grid;grid-template-columns:48px 1fr;gap:12px;padding:18px 0;border-bottom:1px solid var(--line)}
.beliefs .k{font-family:var(--serif);font-weight:700;color:var(--seal);font-size:22px;line-height:1.3}
.beliefs b{font-family:var(--serif);color:var(--soil);font-size:17px;font-weight:600;display:block}
.prose p+p{margin-top:14px}

/* 案例內頁文章 */
.article{padding:48px 0 32px}
.article .credits{font-size:14px;color:var(--soil-mid);margin-top:10px;line-height:1.7}
.article figure{margin:28px 0}
.article figure img{border-radius:12px;width:100%}
.article figcaption{font-size:12px;color:var(--soil-mid);margin-top:8px}
.md h3{font-family:var(--serif);font-weight:600;color:var(--soil);font-size:22px;line-height:1.5;margin:48px 0 14px;padding-top:24px;border-top:1px solid var(--line)}
.md p{margin:12px 0}
.md ul{margin:12px 0;padding-left:1.3em;display:grid;gap:4px}
.md strong{color:var(--soil);font-weight:700}
.md blockquote{margin:20px 0;padding:16px 20px;background:var(--paper-2);border-left:2px solid var(--seal);border-radius:0 12px 12px 0}
.md blockquote p{margin:0}
.tbl{overflow-x:auto;margin:16px 0;-webkit-overflow-scrolling:touch}
.md table{border-collapse:collapse;width:100%;font-size:14px;background:var(--paper-2)}
.md td:first-child,.md th:first-child{white-space:nowrap}
.md th,.md td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top;line-height:1.65}
.md th{background:var(--paper);color:var(--soil);font-weight:600;white-space:nowrap}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0}
.gallery img{border-radius:12px;width:100%;height:100%;object-fit:cover;aspect-ratio:3/2}
.gallery.tall img{aspect-ratio:3/4}
.video{position:relative;aspect-ratio:16/9;margin:16px 0;border-radius:12px;overflow:hidden;background:var(--soil)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.videos{display:grid;gap:16px;margin:20px 0}
.videos p{font-size:13px;color:var(--soil-mid);margin-top:-8px}
.case-cta{margin:56px 0 24px;padding:28px 24px;background:var(--paper-2);border:1px solid var(--line);border-radius:16px}
.case-cta p{font-family:var(--serif);color:var(--soil);font-size:20px;font-weight:600;line-height:1.5}
.case-cta .btn{margin-top:18px}
.next{display:flex;flex-wrap:wrap;gap:12px 24px;margin:8px 0 48px;font-size:14px}

/* 聯絡表單 */
.contact-grid{display:grid;gap:32px}
form .field{margin-bottom:18px}
form label{display:block;font-size:14px;color:var(--soil);font-weight:500;margin-bottom:6px}
form input[type=text],form input[type=email],form select,form textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:11px 14px}
form input:focus,form select:focus,form textarea:focus{outline:2px solid var(--soil-mid);outline-offset:1px}
form .agree{display:flex;gap:10px;align-items:flex-start;font-size:14px;margin:6px 0 20px}
form .agree input{margin-top:6px;width:18px;height:18px;flex:none}
.req{color:var(--seal)}
.form-msg{margin-top:14px;font-size:14px}
.privacy{font-size:14px}
.privacy dl{display:grid;gap:10px;margin-top:12px}
.privacy dt{color:var(--soil);font-weight:600}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* 結尾動作 */
.cta{padding:72px 0}
.cta h2{font-size:26px}
.cta .mail{font-size:15px;color:var(--soil-mid)}

footer.site{border-top:1px solid var(--line);padding:28px 0 40px;font-size:13px;color:var(--soil-mid)}
footer.site .row{display:flex;flex-wrap:wrap;gap:6px 20px}
footer.site .name{font-family:var(--serif);color:var(--soil);font-weight:600}
footer.site a{text-decoration:none;border-bottom:1px solid var(--line)}

@media (min-width:640px){
  .works{grid-template-columns:repeat(2,1fr)}
  .gallery{gap:14px}
}
@media (min-width:860px){
  body{font-size:17px}
  .nav{height:76px}
  .nav-desk{display:flex;padding:0}
  .nav-mob{display:none}
  .hero{padding:96px 0 104px}
  .hero-grid{grid-template-columns:minmax(0,1fr) auto;gap:48px}
  .hero h1{font-size:40px}
  .hero .lede{font-size:17px}
  .vert{order:0;font-size:56px;margin-right:24px}
  .vert .seal{width:40px;height:40px;font-size:21px;line-height:37px}
  .page-head{padding:80px 0 56px}
  .page-head h1{font-size:40px}
  section{padding:96px 0}
  h2{font-size:32px}
  .proof{grid-template-columns:7fr 5fr;gap:48px;align-items:center}
  .nums strong{font-size:30px}
  .cases{grid-template-columns:repeat(3,1fr)}
  .case-row{grid-template-columns:1fr 1fr}
  .case-row img{height:100%;aspect-ratio:auto;min-height:100%}
  .case-row .body{padding:36px}
  .case-row.flip img{order:2}
  .case-row h2{font-size:26px}
  .works{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(5,1fr);border-top:0;gap:20px}
  .steps li{display:block;border-bottom:0;border-top:1px solid var(--soil);padding:16px 0 0}
  .steps .n{display:block;margin-bottom:6px}
  .chain{grid-template-columns:1fr 1fr}
  .who-list{grid-template-columns:1fr 1fr;column-gap:40px}
  .method{grid-template-columns:1fr 1fr;gap:40px}
  .article{padding:72px 0 40px}
  .md h3{font-size:26px}
  .contact-grid{grid-template-columns:5fr 7fr;gap:56px}
  .cta{padding:112px 0}
  .cta h2{font-size:36px}
  .videos{grid-template-columns:1fr 1fr}
}

/* ===== v2 設計語言（20261104・照 20260910 色調 A 與四個質感手法）=====
   一・線要細、不要框　二・印章當落款、紅 ≤5%　三・數字用明體　四・中文為主、英文退小 */
.brand{align-items:center}
.brand .mark{display:inline-block;flex:none;width:30px;height:30px;border:1.5px solid var(--seal);color:var(--seal);font-family:var(--serif);font-weight:700;font-size:17px;line-height:27px;text-align:center;border-radius:3px}
.brand .mark img{width:100%;height:100%;object-fit:contain}
.brand .en{font-size:10px;letter-spacing:.32em;color:var(--soil-mid)}
/* 卡片：拿掉框與底色，改成上緣一條細線 */
.card,.work{background:transparent;border:0;border-radius:0;border-top:1px solid var(--clay-line)}
.card .ph,.work .thumb img{border-radius:12px;border-bottom:0;margin-top:18px}
.card .body,.work .body{padding:18px 0 0}
.case-row{background:transparent;border:0;border-radius:0;border-top:1px solid var(--clay-line);padding-top:28px;gap:24px;overflow:visible}
.case-row img{border-radius:12px}
.case-row .body{padding:0}
.box,.stage{background:transparent!important;border:0;border-top:1px solid var(--clay-line);border-radius:0;padding:20px 0 0}
.case-cta{background:transparent;border:0;border-top:1px solid var(--soil);border-bottom:1px solid var(--clay-line);border-radius:0;padding:32px 0}
/* 每一區結尾的落款小方印 */
.endseal{display:flex;justify-content:flex-end;margin-top:44px}
.endseal span{display:block;width:22px;height:22px;border:1px solid var(--seal);color:var(--seal);font-family:var(--serif);font-weight:700;font-size:12px;line-height:20px;text-align:center;border-radius:2px}
/* 數字：明體大字、收字距 */
.nums strong,.bignum{letter-spacing:-.02em;font-weight:500}
/* 步驟編號：壹貳參肆伍 用明體 */
.steps .n{font-family:var(--serif);font-weight:600;color:var(--seal);font-size:16px}
/* 三小圖 */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.trio img{border-radius:8px;aspect-ratio:4/3;object-fit:cover;width:100%}
/* 頁尾 */
footer.site .brandline{font-family:var(--serif);color:var(--soil);font-size:15px;margin-bottom:12px}
footer.site .en{font-size:10px;letter-spacing:.32em;color:var(--soil-mid);margin-left:8px}
@media (min-width:860px){
  .case-row{grid-template-columns:7fr 5fr;gap:40px;padding-top:36px}
  .case-row.flip{grid-template-columns:5fr 7fr}
  .case-row img{height:auto;aspect-ratio:16/10;min-height:0}
  .brand .mark{width:34px;height:34px;font-size:19px;line-height:31px}
  .trio{gap:12px}
}
@media (max-width:400px){ .nav .brand .en{display:none} }
/* Logo 定案（20261104）：頁首標誌、頁尾橫式組合 */
.brand .logo{display:block;flex:none;height:30px;width:auto}
footer.site .brandline{margin:0 0 18px}
footer.site .brandline img{display:block;height:56px;width:auto}
/* 20261104 三方審稿 17–22：首頁一行服務、服務頁副標、關於頁原話 */
.hero .svc-line{margin-top:14px;font-family:var(--serif);font-weight:600;color:var(--soil);font-size:15px;letter-spacing:.06em}
.hero .svc-line i{font-style:normal;color:var(--clay-line);margin:0 .35em}
.lede-s{margin-top:10px;color:var(--soil-mid);font-size:15px}
.belief{margin-top:28px;padding:4px 0 4px 18px;border-left:2px solid var(--seal);max-width:34em}
.belief p{font-family:var(--serif);font-weight:600;color:var(--soil);font-size:20px;line-height:1.6}
.belief cite{display:block;margin-top:6px;font-style:normal;font-size:13px;color:var(--soil-mid);letter-spacing:.04em}
@media (min-width:768px){ .belief p{font-size:24px} }
/* 20261104 全部服務項目（10 類，點開看細項） */
.svc-all{margin-top:24px;border-top:1px solid var(--clay-line)}
.svc-cat{border-bottom:1px solid var(--line)}
.svc-cat summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:14px;padding:16px 28px 16px 0;position:relative}
.svc-cat summary::-webkit-details-marker{display:none}
.svc-cat summary::after{content:"＋";position:absolute;right:0;top:15px;color:var(--seal);font-size:15px}
.svc-cat[open] summary::after{content:"－"}
.svc-cat summary b{font-family:var(--serif);font-weight:600;color:var(--soil);font-size:18px;white-space:nowrap}
.svc-cat summary span{font-size:14px;color:var(--soil-mid)}
.svc-cat ul{list-style:none;padding:0 0 18px;margin:0;display:grid;gap:10px}
.svc-cat li b{font-weight:600;color:var(--soil);font-size:15px}
.svc-cat li span{display:block;font-size:14px;color:var(--soil-mid);margin-top:1px}
@media (min-width:768px){ .svc-cat ul{grid-template-columns:1fr 1fr;column-gap:40px} }
@media (max-width:480px){ .svc-cat summary{flex-direction:column;gap:2px} }
/* ===== v3 整站升級（20261104）：故事線區塊＋動畫 ===== */
.kicker{font-family:var(--serif);color:var(--seal);font-size:14px;letter-spacing:.12em}
h2.big{font-size:clamp(26px,6vw,40px);line-height:1.4;margin-top:6px}
.why,.now,.promise,.svc-teaser{padding:72px 0}
.why .sec-lede,.now .sec-lede,.svc-teaser .sec-lede{max-width:36em}
.belief-c{margin:32px 0 8px}
.trio3{display:grid;gap:0;margin-top:28px;border-top:1px solid var(--clay-line)}
.trio3>div{padding:20px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:44px 1fr;column-gap:14px}
.trio3 .k{grid-row:span 2;width:36px;height:36px;border:1px solid var(--seal);color:var(--seal);font-family:var(--serif);font-weight:700;font-size:18px;line-height:34px;text-align:center;border-radius:3px}
.trio3 b{font-family:var(--serif);color:var(--soil);font-size:18px;font-weight:600}
.trio3 p{font-size:15px;margin-top:4px}
.src{margin-top:14px}
.promises{margin-top:28px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.chips a{display:inline-block;padding:9px 16px;border:1px solid var(--clay-line);border-radius:999px;text-decoration:none;color:var(--soil);font-size:15px;background:var(--paper);transition:transform .25s}
.chips a:hover{background:var(--soil);color:var(--paper);border-color:var(--soil);transform:translateY(-2px)}
.hero-note{margin-top:14px;font-size:13px;color:var(--soil-mid);letter-spacing:.04em}
.faq-h{font-family:var(--serif);color:var(--soil);font-size:20px;font-weight:600;margin-top:48px}
.svc-cat.faq summary b{white-space:normal;font-size:17px}
.svc-cat.faq p{padding:0 28px 18px 0;font-size:15px}
.next-steps{list-style:none;padding:0;margin:40px 0 0;display:grid;gap:0;border-top:1px solid var(--clay-line);text-align:left}
.next-steps li{display:grid;grid-template-columns:40px 1fr;column-gap:12px;padding:16px 0;border-bottom:1px solid var(--line)}
.next-steps span{grid-row:span 2;font-family:var(--serif);color:var(--seal);font-size:22px;line-height:1.2}
.next-steps b{font-family:var(--serif);color:var(--soil);font-size:17px;font-weight:600}
.next-steps p{font-size:14px;color:var(--soil-mid);margin-top:2px}
@media (min-width:768px){
  .trio3{grid-template-columns:repeat(3,1fr);column-gap:36px}
  .trio3>div{border-bottom:0;padding:24px 0 0}
  .next-steps{grid-template-columns:repeat(3,1fr);column-gap:32px}
  .next-steps li{border-bottom:0}
  .why,.now,.promise,.svc-teaser{padding:104px 0}
}
/* 頁首：捲動後加細線 */
/* 卡片與按鈕的手感 */
.card,.work,.case-row{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.card:hover,.work:hover{transform:translateY(-4px)}
.btn{transition:opacity .2s ease-out, transform .2s ease-out}
.btn:hover{transform:translateY(-1px)}
/* 首屏進場：一句一句浮上來，方印最後蓋下去 */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes stamp{0%{opacity:0;transform:scale(1.8) rotate(-8deg)}60%{opacity:1;transform:scale(.92) rotate(0)}100%{opacity:1;transform:scale(1)}}
@keyframes ink{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.js .hero h1 .line{display:block;opacity:0;animation:rise .8s cubic-bezier(.2,.7,.2,1) forwards}
.js .hero h1 .line:nth-child(2){animation-delay:.18s}
.js .hero .lede{opacity:0;animation:rise .8s .36s cubic-bezier(.2,.7,.2,1) forwards}
.js .hero .svc-line{opacity:0;animation:rise .8s .5s cubic-bezier(.2,.7,.2,1) forwards}
.js .hero .actions,.js .hero .hero-note{opacity:0;animation:rise .8s .64s cubic-bezier(.2,.7,.2,1) forwards}
.js .hero .vert{opacity:0;animation:ink 1.2s .2s ease forwards}
.js .hero .seal{opacity:0;display:inline-block;animation:stamp .5s 1.15s cubic-bezier(.3,1.4,.5,1) forwards}
/* 捲動淡入 */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease var(--d,0ms),transform .7s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.js .rv.in{opacity:1;transform:none}
.js .endseal.rv span{transform:scale(1.6) rotate(-8deg);opacity:0;transition:transform .45s cubic-bezier(.3,1.4,.5,1) .15s,opacity .3s .15s}
.js .endseal.rv.in span{transform:none;opacity:1}
/* 減少動態：全部直接顯示 */
@media (prefers-reduced-motion: reduce){
  .js .hero h1 .line,.js .hero .lede,.js .hero .svc-line,.js .hero .actions,.js .hero .hero-note,.js .hero .vert,.js .hero .seal{animation:none;opacity:1}
  .js .rv{opacity:1;transform:none;transition:none}
  .card,.work,.chips a,.btn{transition:none}
}
.no-motion .rv{opacity:1!important;transform:none!important}
/* 修：三件事的內層不要再套格線（關於頁同樣受惠） */
.beliefs>div>div{display:block;padding:0;border:0;grid-template-columns:none}
.beliefs>div>div p{margin-top:4px}
@media (min-width:768px){ .promises{grid-template-columns:repeat(3,1fr);column-gap:36px;border-top:1px solid var(--clay-line)} .promises>div{grid-template-columns:48px 1fr;border-bottom:0;padding-top:24px} }
/* ===== v3 第四輪（20261104）：審稿修正 ===== */
/* 首屏到「為什麼行銷重要」別空太多 */
.hero+.why{padding-top:40px}
@media (min-width:768px){ .hero{padding-bottom:72px} .hero+.why{padding-top:56px} }
/* 「先對焦」實際例子 */
.example{margin-top:36px;padding:22px 0 0;border-top:1px solid var(--clay-line);max-width:44em}
.example .ex-k{font-family:var(--serif);font-weight:600;color:var(--seal);font-size:14px;letter-spacing:.08em}
.example p{margin-top:8px;color:var(--soil-mid)}
.example b{color:var(--soil);font-weight:600}
.example .more{margin-top:12px}
/* 案例頁開頭三行摘要 */
.case-sum{margin:22px 0 8px;border-top:1px solid var(--soil);border-bottom:1px solid var(--clay-line)}
.case-sum>div{display:grid;grid-template-columns:7em 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.case-sum>div:last-child{border-bottom:0}
.case-sum dt{font-family:var(--serif);font-weight:600;color:var(--soil);font-size:15px}
.case-sum dd{margin:0;color:var(--soil-mid);font-size:15px}
.case-sum>div:last-child dd{color:var(--soil);font-weight:600}
@media (max-width:420px){ .case-sum>div{grid-template-columns:1fr;gap:2px} }
/* 服務頁頁首入口 */
.page-head .jump{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px 24px;font-size:15px}
/* 從首頁點進某一類服務：那一類打開並淡淡標出來 */
.svc-cat{scroll-margin-top:88px}
.svc-cat.hit>summary{background:rgba(178,58,44,.06)}
/* 用鍵盤移到還沒淡入的區塊時，直接顯示，不讓焦點落在看不見的東西上 */
.js .rv:focus-within{opacity:1;transform:none}
/* 減少動態：連滑過去的浮起也關掉 */
@media (prefers-reduced-motion: reduce){
  .card:hover,.work:hover,.btn:hover,.chips a:hover{transform:none}
}
/* 動效紀律（品牌線長期約束第 10 條）：只動 transform／opacity、支援減少動態、手機降級 */
@media (max-width:767px){
  .js .rv{transform:translateY(10px);transition-duration:.45s}
  .js .hero h1 .line,.js .hero .lede,.js .hero .svc-line,.js .hero .actions,.js .hero .hero-note{animation-duration:.5s}
}
/* ===== 官方 LINE 入口（20261104，連結到位才會出現） ===== */
.btn-line{background:transparent;color:var(--soil);border:1px solid var(--soil);padding:11px 22px}
.btn-line:hover{opacity:1;background:var(--paper-2)}
.line-box{margin-top:36px;padding-top:28px;border-top:1px solid var(--line)}
.line-box .qr{display:none;margin-top:16px;width:160px;height:160px;border:1px solid var(--line);border-radius:8px}
@media (min-width:768px){ .line-box .qr{display:block} }