@font-face{font-family:'Jyunsai Kaai';src:url('fonts/JyunsaiKaai-sub.woff2') format('woff2');font-weight:400 700;font-display:swap;}
/* AE Platform 子頁共用設計系統 */
:root{
  --ae-blue:#2D5DA1;--ae-purple:#8B3A96;--coral:#D4654A;--rose:#B04872;
  --ink:#2D2D2D;--mid-grey:#969696;--bg-grey:#F5F5F5;--blue-deep:#16304F;
  --text:var(--ink);--text-2:rgba(45,45,45,.78);--text-3:rgba(45,45,45,.55);
  --heading:var(--ink);--line:rgba(45,45,45,.12);--line-blue:rgba(45,93,161,.16);
  --container:1160px;--gutter:clamp(20px,4vw,48px);--text-w:640px;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;
  --r-s:8px;--r-m:16px;--r-pill:999px;
  --shadow-nav:0 8px 30px -18px rgba(45,45,45,.16);
  --shadow-panel:0 16px 50px -30px rgba(45,45,45,.18);
  --shadow-hover:0 18px 44px -26px rgba(45,45,45,.2);
  /* 全站統一 motion tokens：hover 200ms／press 80ms／reveal 550ms／page 220ms／stagger 90ms */
  --t-fast:.2s;--t-press:.08s;--t-ui:.32s;--t-reveal:.55s;--t-page:.22s;--t-stagger:90ms;
  --ease:cubic-bezier(0.32,0.72,0,1);
  --serif-en:'Playfair Display',serif;--font-body:'Chiron Hei HK','Noto Serif TC',serif;--font-disp:'Jyunsai Kaai','LXGW WenKai TC','Klee One','Noto Serif TC',serif;--serif-tc:var(--font-body);
}
*{margin:0;padding:0;box-sizing:border-box}
/* 每頁主題 accent 色 */
body{--accent:var(--ae-blue);--accent-soft:rgba(45,93,161,.09)}
body.t-coral{--accent:var(--coral);--accent-soft:rgba(212,101,74,.1)}
body.t-purple{--accent:var(--ae-purple);--accent-soft:rgba(139,58,150,.1)}
body.t-rose{--accent:var(--rose);--accent-soft:rgba(176,72,114,.1)}
/* R38：全域改 auto，滾輪即時、跨頁帶錨點即時到位；
   只有點擊同頁錨點時才由 site.js 做平滑捲動。 */
html{scroll-behavior:auto}
body{
  font-family:var(--serif-tc);font-weight:400;color:var(--text);line-height:1.85;
  font-size:16px;background:#FFFFFF;-webkit-font-smoothing:antialiased;overflow-x:clip;
}
h1,h2,h3{font-family:var(--serif-tc);font-weight:600;line-height:1.3;text-wrap:balance;color:var(--heading)}
a,button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--ae-blue);outline-offset:3px;border-radius:2px}
[id]{scroll-margin-top:96px}
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}

/* Nav */
nav{
  position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:10;
  width:min(var(--container),calc(100% - 32px));
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--s2) var(--s2) var(--s2) var(--s5);border-radius:var(--r-pill);
  background:rgba(255,255,255,.92);border:1px solid var(--line-blue);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:var(--shadow-nav);
}
.nav-logo{display:flex;align-items:center;gap:var(--s3);text-decoration:none}
.nav-logo img{height:32px;width:auto;display:block}
.nav-logo .wordmark{font-family:var(--serif-en);font-weight:700;font-size:18px;color:var(--ae-blue)}
.nav-links{display:flex;align-items:center;gap:var(--s5);list-style:none}
.nav-links a:not(.nav-cta){
  color:var(--text);text-decoration:none;font-size:14px;font-weight:500;
  position:relative;padding:var(--s1) 0;transition:color var(--t-fast) var(--ease);
}
.nav-links a:not(.nav-cta)::after{
  content:'';position:absolute;left:50%;bottom:-4px;height:1.5px;width:100%;border-radius:1px;
  background:var(--ink);transform:translateX(-50%) scaleX(0);transform-origin:center;
  transition:transform .22s cubic-bezier(.16,1,.3,1);
}
.nav-links a:not(.nav-cta):hover{color:var(--ink)}
.nav-links a:not(.nav-cta):hover::after{transform:translateX(-50%) scaleX(1)}
.nav-links a.active{color:var(--ink)}
.nav-links a.active::after{transform:translateX(-50%) scaleX(.6);background:var(--coral)}
.nav-cta{
  display:inline-flex;align-items:center;gap:8px;background:var(--coral);color:#fff;
  min-height:44px;padding:0 6px 0 var(--s5);border-radius:var(--r-pill);
  font-size:14px;font-weight:600;text-decoration:none;
  box-shadow:0 1.5px 0 rgba(212,101,74,.35),0 8px 18px -14px rgba(212,101,74,.4);
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.nav-cta::after{
  content:'';width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.22);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E");
  background-size:13px;background-position:center;background-repeat:no-repeat;
  transition:transform var(--t-fast) var(--ease);
}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 2px 0 rgba(212,101,74,.4),0 10px 20px -14px rgba(212,101,74,.45)}
.nav-cta:hover::after{transform:translate(1px,-1px)}
.nav-cta:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(212,101,74,.35);transition-duration:var(--t-press)}

/* Page hero */
.page-hero{
  padding:calc(96px + var(--s8)) 0 var(--s7);
  background:
    radial-gradient(900px 420px at 88% 0%,var(--accent-soft),transparent 60%),
    radial-gradient(700px 380px at -4% 100%,rgba(45,93,161,.06),transparent 60%),#FFFFFF;
}
.page-hero .inner{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--s7);align-items:center}
.eyebrow{
  font-family:var(--serif-en);font-weight:500;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);
  display:inline-flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4);
}
.eyebrow::before{content:'';width:28px;height:1px;background:currentColor;opacity:.4}
.page-hero h1{font-size:clamp(32px,4vw,50px);letter-spacing:.01em;margin-bottom:var(--s4)}
.page-hero .lead{font-size:17px;color:var(--text-2);max-width:var(--text-w)}
.page-hero .cta-row{margin-top:var(--s6)}
.page-hero .figure img{width:100%;max-width:380px;height:auto;display:block;margin-inline:auto}

/* Buttons（全站統一：Primary 珊瑚實體按鈕、Ghost 白底藍幼邊；
   hover 200ms 輕微升起、press 80ms 向下陷入——唔同時用縮放） */
.cta-row{display:flex;flex-wrap:wrap;gap:var(--s4)}
.btn-coral,.btn-blue{
  display:inline-flex;align-items:center;gap:var(--s3);color:#fff;text-decoration:none;
  min-height:46px;padding:var(--s2) var(--s2) var(--s2) var(--s6);border-radius:var(--r-pill);
  font-size:15px;font-weight:600;letter-spacing:.04em;border:none;cursor:pointer;font-family:var(--serif-tc);
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.btn-coral{background:var(--coral);box-shadow:0 4px 0 #A8482F,0 14px 24px -12px rgba(212,101,74,.45)}
.btn-blue{background:var(--ae-blue);box-shadow:0 4px 0 #1F4270,0 14px 24px -12px rgba(45,93,161,.45)}
.btn-coral::after,.btn-blue::after{
  content:'↗';display:inline-flex;align-items:center;justify-content:center;
  width:var(--btn-arrow,32px);height:var(--btn-arrow,32px);border-radius:50%;background:rgba(255,255,255,.2);
  font-size:13px;font-weight:400;font-family:var(--serif-en);
  transition:transform var(--t-fast) var(--ease);
}
.btn-coral:hover{transform:translateY(-1px);box-shadow:0 5px 0 #A8482F,0 16px 26px -12px rgba(212,101,74,.5)}
.btn-blue:hover{transform:translateY(-1px);box-shadow:0 5px 0 #1F4270,0 16px 26px -12px rgba(45,93,161,.5)}
.btn-coral:hover::after,.btn-blue:hover::after{transform:translate(2px,-2px)}
.btn-coral:active{transform:translateY(4px);box-shadow:0 1px 0 #A8482F,0 4px 8px -6px rgba(212,101,74,.35);transition-duration:var(--t-press)}
.btn-blue:active{transform:translateY(4px);box-shadow:0 1px 0 #1F4270,0 4px 8px -6px rgba(45,93,161,.35);transition-duration:var(--t-press)}
.btn-ghost{
  display:inline-flex;align-items:center;background:#fff;color:var(--ae-blue);
  min-height:46px;padding:var(--s2) var(--s5);border-radius:var(--r-pill);
  font-size:15px;font-weight:600;text-decoration:none;border:1px solid rgba(45,93,161,.45);
  cursor:pointer;font-family:var(--serif-tc);
  box-shadow:0 3px 0 rgba(45,93,161,.28);
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.btn-ghost:hover{transform:translateY(-1px);box-shadow:0 4px 0 rgba(45,93,161,.34)}
.btn-ghost:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(45,93,161,.28);transition-duration:var(--t-press)}

/* Sections */
section{padding:var(--s8) 0}
.sec-title{font-size:clamp(26px,3vw,38px);letter-spacing:.01em;margin-bottom:var(--s3)}
.sec-lead{font-size:16.5px;color:var(--text-2);max-width:var(--text-w);margin-bottom:var(--s6)}
.sec-grey{background:linear-gradient(180deg,#F4F7FB,#F4F7FB)}  /* R40：淺灰帶一點藍 */

/* Cards & lists */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-m);
  padding:var(--s6);transition:transform var(--t-ui) var(--ease),border-color var(--t-ui) var(--ease),box-shadow var(--t-ui) var(--ease);
}
.card:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:var(--shadow-panel)}
.card .n{
  font-family:var(--serif-en);font-weight:700;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;display:block;
  color:var(--accent);margin-bottom:var(--s3);
}
.card h3{font-size:18px;margin-bottom:var(--s2);color:var(--heading)}
.card p{font-size:15px;color:var(--text-2)}
.points{list-style:none;display:flex;flex-direction:column}
.points li{
  position:relative;padding:var(--s3) 0 var(--s3) var(--s5);font-size:16px;
  border-bottom:1px solid var(--line);
}
.points li:first-child{border-top:1px solid var(--line)}
.points li::before{
  content:'';position:absolute;left:var(--s1);top:1.5em;width:5px;height:5px;border-radius:50%;
  background:var(--accent);
}
/* Nav 下拉 */
.nav-links li{position:relative}
.drop{
  position:absolute;top:calc(100% + 12px);left:50%;
  transform:translateX(-50%) translateY(6px);
  background:#fff;border:1px solid var(--line-blue);border-radius:var(--r-m);
  box-shadow:var(--shadow-panel);padding:var(--s2);min-width:210px;
  opacity:0;pointer-events:none;
  transition:opacity .25s var(--ease),transform .25s var(--ease);
}
.nav-links li:hover>.drop,.nav-links li:focus-within>.drop{
  opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0);
}
.drop a{display:block;padding:9px 14px;border-radius:8px;font-size:14px;color:var(--text);text-decoration:none}
.drop a::after{display:none !important}
.drop a:hover{background:rgba(45,93,161,.08);color:var(--ae-blue)}
.points li strong{color:var(--heading)}

/* CTA band */
.cta-band{
  background:var(--blue-deep);color:#fff;text-align:center;
  padding:var(--s8) var(--gutter);
}
.cta-band h2{color:#fff;font-size:clamp(24px,3vw,36px);margin-bottom:var(--s3)}
.cta-band p{color:rgba(255,255,255,.75);margin-bottom:var(--s6);font-size:16px}
.cta-band .cta-row{justify-content:center}
.cta-band .btn-ghost{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.5)}
.cta-band .btn-ghost:hover{background:#fff;color:var(--ae-blue)}

/* Footer */
footer{background:var(--blue-deep);color:rgba(255,255,255,.78);padding:var(--s8) 0 var(--s6)}
.footer-inner{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.footer-top{display:flex;flex-wrap:wrap;gap:var(--s6);justify-content:space-between;align-items:flex-start}
.footer-brand img{height:56px;width:auto;display:block;margin-bottom:var(--s3)}
.footer-brand .wordmark{font-family:var(--serif-en);font-weight:700;font-size:22px;color:#fff}
.footer-brand .tagline{font-family:var(--serif-en);font-style:italic;font-size:13px;letter-spacing:.1em;color:rgba(255,255,255,.55);margin-top:var(--s2)}
.footer-col .label{
  font-family:var(--serif-en);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin-bottom:var(--s3);
}
.footer-col a{display:block;width:max-content;position:relative;color:rgba(255,255,255,.82);text-decoration:none;font-size:14px;padding:var(--s1) 0;transition:color var(--t-fast) var(--ease)}
.footer-col a::after{
  content:'';position:absolute;left:0;bottom:2px;height:1px;width:100%;
  background:#fff;transform:scaleX(0);transform-origin:right;
  transition:transform .4s cubic-bezier(.65,0,.35,1);
}
.footer-col a:hover{color:#fff}
.footer-col a:hover::after{transform:scaleX(1);transform-origin:left}
.footer-line{height:1px;margin:var(--s6) 0 var(--s5);background:linear-gradient(90deg,var(--ae-blue),var(--ae-purple),var(--coral));opacity:.35}
.footer-copy{font-size:13px;color:rgba(255,255,255,.5);display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:space-between}
.footer-copy a{color:rgba(255,255,255,.6)}

/* Reveal（reveal 550ms／stagger 90ms，與主頁一致） */
.reveal{opacity:0;transform:scale(.98);transition:opacity var(--t-reveal) var(--ease),transform var(--t-reveal) var(--ease)}
/* R38：起訖必須同一種 transform，否則會由 scale 硬跳去 translate */
.reveal.visible{opacity:1;transform:none}
.reveal.d1{transition-delay:var(--t-stagger)}
.reveal.d2{transition-delay:calc(var(--t-stagger)*2)}
.reveal.d3{transition-delay:calc(var(--t-stagger)*3)}

/* Responsive */
@media(max-width:900px){
  .nav-links{gap:var(--s4)}
  .nav-links a:not(.nav-cta){font-size:13px}
  .page-hero .inner{grid-template-columns:1fr}
  .page-hero .figure{order:-1}
  .page-hero .figure img{max-width:220px}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .cta-row .btn-coral,.cta-row .btn-blue,.cta-row .btn-ghost{width:100%;justify-content:center}
  .footer-top{flex-direction:column}
}
@media(max-width:700px){
  .nav-links li.hide-m{display:none}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
  .reveal{opacity:1 !important;transform:none !important}
  html{scroll-behavior:auto}
}

/* #11 Hover Lift（AE 深藍柔影，淨係桌面；升起不超過 3–4px） */
@media(hover:hover){
  .card{transition:transform .5s cubic-bezier(.34,1.56,.64,1),box-shadow .5s cubic-bezier(.34,1.56,.64,1),border-color var(--t-ui) ease}
  .card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover)}
}
@media(hover:none){.card:hover{transform:none;box-shadow:none}}
@media(prefers-reduced-motion:reduce){
  .card,.card:hover{transition:none;transform:none}
  .reveal{opacity:1!important;transform:none!important}
}

/* 品牌字體：雅楷 display + 昭源黑體 body */
h1,h2,.sec-title{font-family:var(--font-disp);letter-spacing:0;font-weight:600;line-height:1.22}
.btn-coral,.btn-blue,.btn-ghost,.nav-cta{font-weight:600}

/* ===== Motion 基建（--m-* 係舊名，全部指向統一 --t-* tokens） ===== */
:root{
  --m-enter:var(--t-reveal);  /* 一般入場 550ms */
  --m-hover:var(--t-fast);    /* hover 200ms */
  --m-page:var(--t-page);     /* 頁面淡入 220ms */
  --m-ease:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(0.34,1.56,0.64,1);  /* 按壓／指示器回彈 */
  --glide:cubic-bezier(0.65,0,0.35,1);      /* R44 已批准：藥丸滑動、底線畫出 */
}
/* 導覽滑動 pill */
nav .nav-links{position:relative}




/* ===== 第二輪：輕頁面淡入（180–250ms，無色塊） ===== */
@media (prefers-reduced-motion: no-preference){
  body{animation:pageIn var(--t-page) ease-out}
  @keyframes pageIn{from{opacity:0}to{opacity:1}}
}
/* ===== 手機真漢堡選單 ===== */
.burger{display:none;appearance:none;border:none;background:none;cursor:pointer;
  width:44px;height:44px;padding:10px;flex-direction:column;justify-content:center;gap:5px}
.burger span{display:block;height:2px;border-radius:2px;background:var(--ink);transition:transform .25s ease,opacity .2s ease}
.burger.x span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.x span:nth-child(2){opacity:0}
.burger.x span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.m-menu{position:fixed;inset:0;z-index:50;background:rgba(255,255,255,.98);
  display:flex;flex-direction:column;justify-content:center;padding:0 32px;gap:4px;
  opacity:0;pointer-events:none;visibility:hidden;transition:opacity .22s ease,visibility 0s .22s}
.m-menu.open{opacity:1;pointer-events:auto;visibility:visible;transition-delay:0s}
.m-menu a{font-size:22px;font-weight:600;color:var(--ink);text-decoration:none;padding:12px 0;border-bottom:1px solid var(--line)}
.m-menu .m-sub{display:flex;flex-direction:column;padding-left:14px}
.m-menu .m-sub a{font-size:15px;font-weight:500;color:var(--text-2);padding:9px 0;border-bottom:none}
.m-menu .m-cta{color:var(--coral);border-bottom:none;margin-top:8px}
@media(max-width:820px){
  .nav-links{display:none}
  .burger{display:flex}
}
@media (prefers-reduced-motion:reduce){.m-menu{transition:none}body{animation:none}}

/* =====================================================================
   R37（2026-08-01）內頁重整共用層
   新 IA：服務對象／我們可以做甚麼／案例／專欄／關於我們
   所有內頁共用；不要在個別頁面另建一套。
   ===================================================================== */

/* ---------- 1. 導覽（6 個項目，字較長，需要收窄間距） ---------- */
.nav-links{gap:var(--s5)}
.nav-links a:not(.nav-cta){white-space:nowrap}
@media(max-width:1180px){
  .nav-links{gap:18px}
  .nav-links a:not(.nav-cta){font-size:13.5px}
  .nav-cta{padding-left:18px;font-size:13.5px}
}
@media(max-width:1000px){
  .nav-links{gap:14px}
  .nav-links a:not(.nav-cta){font-size:13px}
}
/* 下拉：加大點擊區、對齊左邊避免超出視窗 */
.drop{min-width:230px}
.nav-links li:first-child .drop{left:0;transform:translateX(0) translateY(6px)}
.nav-links li:first-child:hover>.drop,
.nav-links li:first-child:focus-within>.drop{transform:translateX(0) translateY(0)}
/* 下拉出現前的「安全橋」，避免游標由選單移落下拉時中斷 */
.nav-links li:has(.drop)>a::before{content:'';position:absolute;left:-14px;right:-14px;top:100%;height:16px}

/* ---------- 2. 手機選單：分組展開式（由 site.js 生成） ---------- */
.m-menu{justify-content:flex-start;padding:88px 28px 40px;overflow-y:auto;gap:0}
.m-menu .m-head{font-family:var(--serif-en);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-3);padding:18px 0 6px}
.m-menu > a{font-size:20px}
.m-menu details{border-bottom:1px solid var(--line)}
.m-menu details > summary{list-style:none;cursor:pointer;font-size:20px;font-weight:600;color:var(--ink);
  padding:12px 0;display:flex;align-items:center;justify-content:space-between}
.m-menu details > summary::-webkit-details-marker{display:none}
.m-menu details > summary::after{content:'';width:9px;height:9px;margin-right:4px;
  border-right:2px solid var(--ae-blue);border-bottom:2px solid var(--ae-blue);
  transform:rotate(45deg) translateY(-2px);transition:transform .22s var(--ease)}
.m-menu details[open] > summary::after{transform:rotate(-135deg) translateY(-2px)}
.m-menu details .m-sub{padding:0 0 10px 14px;border-left:2px solid var(--line-blue);margin-left:2px}
.m-menu .m-cta{display:inline-flex;align-items:center;justify-content:center;
  margin-top:22px;background:var(--coral);color:#fff;border-radius:var(--r-pill);
  padding:13px 26px;font-size:16px;font-weight:600;width:max-content}
.m-menu .m-close{position:absolute;top:20px;right:22px;width:44px;height:44px;border:none;
  background:none;cursor:pointer;color:var(--ink);font-size:0}
.m-menu .m-close::before,.m-menu .m-close::after{content:'';position:absolute;left:12px;top:21px;
  width:20px;height:2px;border-radius:2px;background:currentColor}
.m-menu .m-close::before{transform:rotate(45deg)}
.m-menu .m-close::after{transform:rotate(-135deg)}
.m-menu[hidden]{display:none}
.m-menu .m-head{display:flex;align-items:center;justify-content:space-between}
.m-menu a[aria-current="page"]{color:var(--ae-blue)}
.m-menu :focus-visible{outline:2px solid var(--ae-blue);outline-offset:3px;border-radius:4px}

/* ---------- 3. 長文排版（桌面正文欄 620–760px） ---------- */
.prose{max-width:720px}
.prose > * + *{margin-top:var(--s4)}
.prose p{font-size:16.5px;color:var(--text-2);line-height:1.9}
.prose h3{font-size:20px;color:var(--heading);margin-top:var(--s6)}
.prose h4{font-family:var(--font-disp);font-weight:600;font-size:17px;color:var(--heading);margin-top:var(--s5)}
.prose strong{color:var(--heading);font-weight:600}
.lead-in{font-size:18px;line-height:1.85;color:var(--text);max-width:760px}
.sub-label{font-family:var(--serif-en);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);display:block;margin-bottom:var(--s2)}

/* ---------- 4. 章節：文字＋大幅插畫交錯 ---------- */
.chap{padding:var(--s9) 0;border-top:1px solid var(--line)}
.chap:first-of-type{border-top:none}
.chap .chap-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);
  gap:clamp(28px,5vw,72px);align-items:start}
.chap.rev .chap-in{grid-template-columns:minmax(0,.72fr) minmax(0,1fr)}
.chap.rev .chap-text{order:2}
.chap.rev .chap-fig{order:1}
.chap-fig{position:relative}
.chap-fig svg,.chap-fig img{width:100%;height:auto;display:block;border-radius:var(--r-m)}
.chap-fig figcaption{margin-top:var(--s3);font-size:12.5px;color:var(--text-3);line-height:1.6}
.chap-fig.sticky{position:sticky;top:calc(96px + var(--s4))}
@media(max-width:900px){
  .chap{padding:var(--s8) 0}
  .chap .chap-in,.chap.rev .chap-in{grid-template-columns:1fr;gap:var(--s6)}
  .chap.rev .chap-text{order:1}
  .chap.rev .chap-fig{order:2}
  .chap-fig.sticky{position:static}
}

/* ---------- 5. 對象大型入口卡 ---------- */
.aud-entries{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s5)}
.aud-entry{--c:var(--ae-blue);position:relative;display:grid;grid-template-columns:120px 1fr;
  gap:var(--s5);align-items:center;text-decoration:none;
  background:#fff;border:1px solid var(--line);border-left:3px solid var(--c);
  border-radius:var(--r-m);padding:var(--s5) var(--s6) var(--s5) var(--s5);
  transition:transform .5s cubic-bezier(.34,1.56,.64,1),box-shadow .5s cubic-bezier(.34,1.56,.64,1),border-color var(--t-ui) ease}
.aud-entry .ill{width:120px;height:96px;border-radius:12px;overflow:hidden;background:var(--paper,#FBF7F0);
  display:flex;align-items:center;justify-content:center}
.aud-entry .ill svg,.aud-entry .ill img{width:100%;height:100%;object-fit:cover;display:block}
.aud-entry b{display:block;font-family:var(--font-disp);font-weight:600;font-size:22px;color:var(--heading);line-height:1.3}
.aud-entry p{margin-top:6px;font-size:14.5px;color:var(--text-2);line-height:1.7}
.aud-entry .go{display:inline-block;margin-top:10px;font-size:13.5px;font-weight:600;color:var(--ae-blue)}
/* 對象標記：顏色只作輔助，意義由文字承擔 */
.tag{display:inline-flex;align-items:center;gap:7px;background:var(--c-soft,rgba(45,93,161,.1));
  color:var(--ink);border-radius:var(--r-pill);padding:4px 12px 4px 10px;
  font-size:12.5px;font-weight:600;letter-spacing:.02em;margin-bottom:8px}
.tag::before{content:'';width:9px;height:9px;border-radius:50%;background:var(--c,var(--ae-blue));flex:none}
.aud-entry .go .ar{display:inline-block;transition:transform var(--t-fast) var(--ease)}
@media(hover:hover){
  .aud-entry:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);border-color:var(--c)}
  .aud-entry:hover .go .ar{transform:translateX(4px)}
}
@media(max-width:900px){
  .aud-entries{grid-template-columns:1fr}
  .aud-entry{grid-template-columns:88px 1fr;padding:var(--s5)}
  .aud-entry .ill{width:88px;height:74px}
  .aud-entry b{font-size:19px}
}

/* ---------- 6. 內文區塊（我們處理的問題／可能包括／適合對象） ---------- */
.blk{margin-top:var(--s6)}
.blk > .bl{display:block;font-family:var(--serif-en);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:var(--s3)}
.tick-list{list-style:none;display:flex;flex-direction:column;gap:var(--s3);max-width:720px}
.tick-list li{position:relative;padding-left:26px;font-size:16px;line-height:1.8;color:var(--text-2)}
.tick-list li::before{content:'';position:absolute;left:0;top:.72em;width:11px;height:6px;
  border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);border-radius:1px}
.tick-list li strong{color:var(--heading)}
.chip-row{display:flex;flex-wrap:wrap;gap:9px}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--accent-soft);color:var(--accent);
  border-radius:var(--r-pill);padding:6px 14px;font-size:13.5px;font-weight:600;text-decoration:none;
  border:1px solid transparent;transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
a.chip:hover{border-color:currentColor}
.note{border-left:3px solid var(--accent);background:var(--accent-soft);
  border-radius:0 var(--r-s) var(--r-s) 0;padding:var(--s4) var(--s5);margin-top:var(--s5);max-width:760px}
.note b{display:block;font-size:14px;color:var(--heading);margin-bottom:4px}
.note p{font-size:14.5px;color:var(--text-2);line-height:1.8}

/* ---------- 7. 狀態標籤（資訊不只靠顏色：附文字＋圖形） ---------- */
.status{display:inline-flex;align-items:center;gap:7px;border-radius:var(--r-pill);
  padding:5px 13px 5px 10px;font-size:12.5px;font-weight:600;letter-spacing:.02em;
  border:1px solid currentColor;background:#fff}
.status::before{content:'';width:8px;height:8px;border-radius:50%;background:currentColor;flex:0 0 8px}
.status.done{color:#1F6B4A}
.status.wip{color:var(--coral-text)}
.status.wip::before{border-radius:2px;transform:rotate(45deg)}
.status.hold{color:var(--text-3)}
.status.hold::before{background:none;border:2px solid currentColor;width:9px;height:9px;flex:0 0 9px}

/* ---------- 8. 案例：editorial case study ---------- */
.case-nav{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:var(--s6)}
.filter-group{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.filter-group .fg-label{font-family:var(--serif-en);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3);margin-right:2px}
.filter-group button{appearance:none;cursor:pointer;font-family:var(--serif-tc);
  background:#fff;border:1px solid var(--line);color:var(--text-2);
  border-radius:var(--r-pill);padding:7px 15px;font-size:13.5px;font-weight:500;
  transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.filter-group button:hover{border-color:var(--ae-blue);color:var(--ae-blue)}
.filter-group button[aria-pressed="true"]{background:var(--ae-blue);border-color:var(--ae-blue);color:#fff}
.cs{--c:var(--ae-blue);border-top:1px solid var(--line);padding:var(--s8) 0}
.cs-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:var(--s4)}
.cs-kicker{font-family:var(--serif-en);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--c)}
.cs h2{font-size:clamp(24px,2.6vw,33px);margin-bottom:var(--s3);max-width:820px}
.cs-sum{font-size:17px;color:var(--text-2);max-width:760px;line-height:1.85}
.cs-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5);margin-top:var(--s7)}
.cs-step{border:1px solid var(--line);border-radius:var(--r-m);padding:var(--s5) var(--s6);background:#fff}
.cs-step .no{display:block;font-family:var(--serif-en);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--c);margin-bottom:var(--s2)}
.cs-step h3{font-size:17px;margin-bottom:var(--s2)}
.cs-step p,.cs-step li{font-size:15px;color:var(--text-2);line-height:1.8}
.cs-step ul{list-style:none;display:flex;flex-direction:column;gap:7px}
.cs-step ul li{position:relative;padding-left:16px}
.cs-step ul li::before{content:'';position:absolute;left:0;top:.78em;width:5px;height:5px;
  border-radius:50%;background:var(--c)}
.cs-foot{display:flex;flex-wrap:wrap;gap:var(--s5);margin-top:var(--s6);align-items:center}
.cs-foot a{font-size:14.5px;font-weight:600;color:var(--ae-blue);text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color var(--t-fast) var(--ease)}
.cs-foot a:hover{border-bottom-color:currentColor}
.evidence{margin-top:var(--s6);border:1px dashed rgba(45,93,161,.34);border-radius:var(--r-m);
  background:repeating-linear-gradient(135deg,rgba(45,93,161,.035) 0 10px,transparent 10px 20px);
  padding:var(--s5) var(--s6);max-width:760px}
.evidence b{display:block;font-size:14px;color:var(--ae-blue);margin-bottom:5px}
.evidence p{font-size:14px;color:var(--text-2);line-height:1.8}
@media(max-width:820px){.cs-steps{grid-template-columns:1fr}}

/* ---------- 9. 空資料狀態 ---------- */
.empty{border:1px solid var(--line);border-radius:var(--r-m);background:var(--bg-grey);
  padding:var(--s7) var(--s6);text-align:center;max-width:760px;margin-inline:auto}
.empty p{font-size:16px;color:var(--text-2);margin-bottom:var(--s5)}
.empty .btn-ghost{margin-inline:auto}

/* ---------- 10. 專欄／新聞／文章／資源卡 ---------- */
.hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.hub{--c:var(--ae-blue);display:flex;flex-direction:column;text-decoration:none;background:#fff;
  border:1px solid var(--line);border-top:3px solid var(--c);border-radius:var(--r-m);
  padding:var(--s6);transition:transform .5s cubic-bezier(.34,1.56,.64,1),box-shadow .5s cubic-bezier(.34,1.56,.64,1)}
.hub .k{font-family:var(--serif-en);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--c)}
.hub h3{font-size:21px;margin:var(--s3) 0 var(--s2)}
.hub p{font-size:15px;color:var(--text-2);line-height:1.8;flex:1}
.hub .go{margin-top:var(--s4);font-size:14px;font-weight:600;color:var(--c)}
@media(hover:hover){.hub:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover)}}
@media(max-width:900px){.hub-grid{grid-template-columns:1fr}}

.news-list{display:flex;flex-direction:column;max-width:820px}
.news-item{border-bottom:1px solid var(--line);padding:var(--s6) 0}
.news-item:first-child{border-top:1px solid var(--line)}
.news-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:var(--s3);
  font-size:12.5px;color:var(--text-3)}
.news-meta time{font-family:var(--serif-en);letter-spacing:.06em;color:var(--text-2);font-weight:500}
.news-meta .src{color:var(--ae-blue);font-weight:600}
.news-item h3{font-size:20px;margin-bottom:var(--s3);line-height:1.45}
.news-fact{font-size:16px;color:var(--text);line-height:1.85;max-width:720px}
.news-take{margin-top:var(--s4);border-left:2px solid var(--line-blue);padding-left:var(--s5)}
.news-take .bl{display:block;font-family:var(--serif-en);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:5px}
.news-take p{font-size:15px;color:var(--text-2);line-height:1.85}
.news-aud{display:flex;flex-wrap:wrap;gap:7px;margin-top:var(--s4)}
.news-aud span{font-size:12.5px;color:var(--text-2);background:var(--bg-grey);
  border-radius:var(--r-pill);padding:4px 12px}

.art-feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:var(--s7);
  align-items:center;border:1px solid var(--line);border-radius:var(--r-m);
  padding:var(--s7);background:#fff}
.art-feature .cover{border-radius:var(--r-s);overflow:hidden;background:#FBF7F0}
.art-feature .cover svg,.art-feature .cover img{width:100%;height:auto;display:block}
.art-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s5)}
.art-card{--c:var(--ae-blue);background:#fff;border:1px solid var(--line);border-radius:var(--r-m);
  padding:var(--s6);display:flex;flex-direction:column;gap:var(--s3)}
.art-card .cat{font-family:var(--serif-en);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--c)}
.art-card h3{font-size:18px;line-height:1.45}
.art-card p{font-size:14.5px;color:var(--text-2);line-height:1.8;flex:1}
.art-card .meta{font-size:12.5px;color:var(--text-3)}
@media(max-width:900px){
  .art-feature{grid-template-columns:1fr;padding:var(--s6)}
  .art-cards{grid-template-columns:1fr}
}

.res-list{display:flex;flex-direction:column;gap:var(--s5)}
.res-card{--c:var(--ae-blue);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:var(--s6);background:#fff;border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden}
.res-preview{background:#FBF7F0;border-right:1px solid var(--line);
  min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:var(--s5);text-align:center}
.res-preview.placeholder{border:0;background:repeating-linear-gradient(135deg,rgba(45,93,161,.05) 0 11px,transparent 11px 22px)}
.res-preview .pl-b{font-size:13.5px;font-weight:600;color:var(--ae-blue)}
.res-preview .pl-s{font-size:12.5px;color:var(--text-3);line-height:1.7;max-width:260px}
.res-body{padding:var(--s6) var(--s6) var(--s6) 0}
.res-body h3{font-size:20px;margin-bottom:var(--s2)}
.res-body .val{font-size:15.5px;color:var(--text-2);line-height:1.8;margin-bottom:var(--s4)}
.res-spec{list-style:none;display:grid;grid-template-columns:1fr;gap:0;margin:var(--s4) 0}
.res-spec li{display:grid;grid-template-columns:104px 1fr;gap:var(--s4);
  padding:9px 0;border-top:1px solid var(--line);font-size:14px;line-height:1.7}
.res-spec li:last-child{border-bottom:1px solid var(--line)}
.res-spec .rk{color:var(--text-3);font-size:12.5px;letter-spacing:.03em}
.res-spec .rv{color:var(--text-2)}
@media(max-width:900px){
  .res-card{grid-template-columns:1fr}
  .res-preview{border-right:none;border-bottom:1px solid var(--line);min-height:170px}
  .res-body{padding:var(--s6)}
  .res-spec li{grid-template-columns:92px 1fr;gap:var(--s3)}
}

/* ---------- 11. 頁內錨點導覽 ---------- */
.jump{display:flex;flex-wrap:wrap;gap:8px;padding:var(--s5) 0;border-bottom:1px solid var(--line)}
.jump a{font-size:13.5px;font-weight:500;color:var(--text-2);text-decoration:none;
  border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 15px;
  transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.jump a:hover{border-color:var(--ae-blue);color:var(--ae-blue)}

/* ---------- 12. Hero 補充：不用固定高度，保留文流 ---------- */
.page-hero{min-height:auto}
.page-hero .inner{align-items:center}
.page-hero.solo .inner{grid-template-columns:1fr}
.page-hero .lead{max-width:760px}
.page-hero .figure svg{width:100%;height:auto;display:block}
@media(max-width:900px){
  .page-hero{padding:calc(84px + var(--s6)) 0 var(--s6)}
  .page-hero .figure svg{max-width:320px;margin-inline:auto}
}

/* ---------- 13. 品牌插畫（紙張＋深藍墨線） ---------- */
.ill-paper{background:#FBF7F0;border:1px solid rgba(45,93,161,.14);border-radius:var(--r-m);
  overflow:hidden;position:relative}
.ill-paper::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(45,93,161,.045) 0 1px,transparent 1px 26px)}
.ill-paper svg{display:block;width:100%;height:auto;position:relative;z-index:1}
/* 白底插畫變體：Lawrence 自製白底場景圖，不加暖紙底與橫紋 */
.ill-paper.flat{background:#FFFFFF}
.ill-paper.flat::after{display:none}
.ill-paper.flat img{display:block;width:100%;height:auto;position:relative;z-index:1}

/* ---------- 14. 大螢幕：正文欄不要無限拉闊 ---------- */
@media(min-width:1600px){
  :root{--container:1240px}
}
/* 200% 文字縮放：避免 nav 內容擠爆 */
@media(max-width:1400px) and (min-resolution:.001dpcm){}


/* footer：非連結資訊（例如所在地） */
.footer-col .txt{display:block;color:rgba(255,255,255,.6);font-size:14px;padding:var(--s1) 0}

/* ── 服務章節：16:7 場景圖 + 長文欄 ─────────────────── */
.hub-grid.g4{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.hub-grid.g4{grid-template-columns:1fr}}
.svc{padding:var(--s9) 0;border-top:1px solid var(--line)}
.svc:first-of-type{border-top:none}
.svc-fig{margin:0 0 var(--s7);max-width:980px}
.svc-fig img{width:100%;height:auto;display:block;border-radius:var(--r-m)}
.svc-head{max-width:780px;margin-bottom:var(--s5)}
@media(max-width:900px){.svc{padding:var(--s8) 0}.svc-fig{margin-bottom:var(--s6)}}

/* ── R45：章節情境插畫（放在導語與內容之間的寬幅白卡）────── */
.sec-fig{margin:var(--s6) auto var(--s7);max-width:1000px}
.sec-fig img{width:100%;height:auto;display:block;border-radius:var(--r-m);
  background:#fff;border:1px solid rgba(45,45,45,.08)}
@media(max-width:900px){.sec-fig{margin:var(--s5) auto var(--s6)}}

/* ── 專欄內頁：solo hero 的正文欄不要拉到全闊 ───────── */
.page-hero.solo .inner > div{max-width:880px}

/* ── 關於我們：信念、工作方式、團隊 ─────────────────── */
.creed{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5) var(--s6);list-style:none}
.creed li{border-top:2px solid var(--line-blue);padding-top:var(--s4)}
.creed .no{display:block;font-family:var(--serif-en);font-size:11px;letter-spacing:.14em;color:var(--accent)}
.creed p{font-family:var(--font-disp);font-weight:600;font-size:17.5px;color:var(--heading);
  line-height:1.65;margin-top:7px}
@media(max-width:900px){.creed{grid-template-columns:1fr}}
.cs-steps.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.cs-steps.g3{grid-template-columns:1fr}}
.team-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6)}
.tm{display:grid;grid-template-columns:92px minmax(0,1fr);gap:var(--s5);align-items:start;
  border:1px solid var(--line);border-radius:var(--r-m);padding:var(--s6);background:#fff}
.tm .ph{width:92px;height:92px;border-radius:50%;background:var(--bg-grey);
  border:1px dashed rgba(45,93,161,.42);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px}
.tm .ph .ini{font-family:var(--serif-en);font-size:25px;color:var(--ae-blue);line-height:1}
.tm .ph .pl{font-size:10.5px;color:var(--text-3);letter-spacing:.02em}
.tm h3{font-size:19px;margin-bottom:3px}
.tm .role{display:block;font-size:13px;color:var(--accent);font-weight:600;margin-bottom:var(--s3)}
.tm p{font-size:14.5px;color:var(--text-2);line-height:1.8}
@media(max-width:900px){.team-grid{grid-template-columns:1fr}.tm{grid-template-columns:72px minmax(0,1fr)}
  .tm .ph{width:72px;height:72px}.tm .ph .ini{font-size:20px}.tm .ph .pl{display:none}}
.tbc{color:var(--text-3);font-style:normal;border-bottom:1px dotted var(--text-3)}

/* =====================================================================
   視覺層次升級（2026-08-01，白灰系；暖色方案已取消）
   ===================================================================== */

/* ---------- 15. 表面層次：白 ↔ 極淺灰交替 ---------- */
.band-alt{background:#FAFAFA}
.chap.rev{background:#FAFAFA}
.svc.alt{background:#FAFAFA}
/* 灰底上的白卡浮現；卡片 rest 一律帶最輕的貼地陰影 */
.card,.hub,.aud-entry,.cs-step,.art-card,.res-card,.tm,.art-feature{
  box-shadow:0 1px 2px rgba(45,45,45,.04)}

/* ---------- 16. 對象類別帶（logo 預留位） ---------- */
.cat-band{margin-top:var(--s7);border-top:1px solid var(--line);padding-top:var(--s5)}
.cat-band .cb-label{display:block;font-family:var(--serif-en);font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);margin-bottom:var(--s3)}
.cat-band .cb-row{display:flex;flex-wrap:wrap;gap:9px}
.cat-band .cb{display:inline-flex;align-items:center;gap:8px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-pill);padding:7px 16px;
  font-size:13.5px;font-weight:500;color:var(--text-2)}
.cat-band .cb::before{content:'';width:7px;height:7px;border-radius:50%;
  background:var(--c,var(--ae-blue));flex:none}
/* 將來換上授權標誌時：<span class="cb"><img …></span>，圖高 20px */
.cat-band .cb img{height:20px;width:auto;display:block}
.cat-band .cb-note{display:block;margin-top:var(--s3);font-size:12.5px;color:var(--text-3)}

/* ---------- 17. 頁面切換過場（cross-document view transitions） ---------- */
@media (prefers-reduced-motion: no-preference){
  @view-transition{navigation:auto}
}
::view-transition{pointer-events:none}
nav{view-transition-name:site-nav}
::view-transition-old(root){animation-duration:.24s}
::view-transition-new(root){animation-duration:.24s}
/* 對象卡放大 morph（由 site.js 動態指派 zoom 名稱） */
::view-transition-group(zoom){animation-duration:.5s;animation-timing-function:cubic-bezier(.16,1,.3,1)}

/* ---------- 18. 導覽下拉修正：hover 意圖延遲，掃過不閃現 ---------- */
.drop{transition:opacity .18s var(--ease),transform .18s var(--ease)}
.nav-links li:hover>.drop,
.nav-links li:focus-within>.drop{transition-delay:.14s}
/* 安全橋只覆蓋連結本身闊度，不延伸到隔籬項目 */
.nav-links li:has(.drop)>a::before{left:0;right:0}

/* ---------- 19. IP 角色（A／E）出場位 ---------- */
.cta-band{position:relative;overflow:hidden}
.cta-band .mascot{position:absolute;right:clamp(12px,5vw,76px);bottom:0;
  width:clamp(96px,10vw,150px);height:auto;pointer-events:none;-webkit-user-select:none;user-select:none}
@media(max-width:1100px){.cta-band .mascot{display:none}}
.empty .mascot{display:block;width:172px;height:auto;margin:0 auto var(--s5)}
.story-mascot{display:block;width:min(400px,78%);height:auto;margin:var(--s7) 0 0}

/* ---------- 20. 長文易讀性（R39：內文 18px、行寬 36 漢字、內文用全深字色） ---------- */
:root{--text-2:rgba(45,45,45,.85);--text-3:rgba(45,45,45,.6);--coral-text:#A8462F}
.prose{max-width:648px}  /* 36 漢字 × 18px */
.prose p{font-size:18px;line-height:1.8;color:var(--text)}
.prose > * + *{margin-top:var(--s5)}
.prose h3{font-size:22px}
.prose h4{font-size:18.5px}
.prose p.lead-in,.lead-in{font-size:19px;line-height:1.85;max-width:722px}  /* 38 漢字 × 19px；加 .prose p.lead-in 提高優先權，否則被 .prose p 蓋過 */
.tick-list{gap:var(--s4)}
.tick-list li{font-size:17px;line-height:1.85}
.blk{margin-top:var(--s7)}
.sec-lead{font-size:17px;line-height:1.9}
.page-hero .lead{font-size:17.5px;line-height:1.9}
.note p{font-size:15px;line-height:1.85}
.news-fact{font-size:16.5px;line-height:1.9}
.cs-sum{font-size:17.5px}
.card p,.hub p{font-size:15.5px;line-height:1.85}
.aud-entry p{font-size:15px;line-height:1.75}
.res-body .val{font-size:16px}
.res-spec li{font-size:14.5px}
.empty p{font-size:16.5px}

/* =====================================================================
   R38（2026-08-01）「導覽列係咁跳」修正
   病因：site.js 會喺 ul.nav-links 內加一個 <span class="navg-pill">，
        但全站從來冇為佢寫過任何 CSS。span 於是變成 flex item（static
        定位），而 JS 每次 mouseenter 都會改佢 style.width（連結闊度+24）。
        「專欄」= 52px、「我們可以做甚麼」= 122px，相差 70px；
        nav 用 justify-content:space-between、左邊 logo 釘死，
        所以 70px 全部由右半邊吸收 → 滑鼠一掃過導覽列，
        連「預約諮詢」在內成條右半邊左右彈。
   修正：把 pill 拉出文檔流（position:absolute），令佢完全唔影響量度，
        同時順手令佢真正發揮原本設計意圖（柔色滑動指示）。
   ===================================================================== */
.nav-links{position:relative}
.nav-links > li{z-index:1}
.navg-pill{
  position:absolute;left:0;top:50%;width:0;height:32px;z-index:0;
  transform:translateY(-50%);border-radius:var(--r-pill);
  background:var(--accent-soft);opacity:0;pointer-events:none;
  transition:left .34s var(--m-ease),width .34s var(--m-ease),opacity .22s var(--ease);
}
/* pill 接手 hover 指示，底線只留返俾「目前頁面」 */
.nav-links a:not(.nav-cta):hover::after{transform:translateX(-50%) scaleX(0)}
.nav-links a.active::after{transform:translateX(-50%) scaleX(.6)}
@media(max-width:820px){.navg-pill{display:none}}
@media(prefers-reduced-motion:reduce){.navg-pill{transition:none}}

/* =====================================================================
   R40（2026-08-01）UI 對照頁獲批項目：第 3、4、6 項
   ===================================================================== */
/* ---- 第 3 項：區塊底色節奏 ----
   services：白 → 淺珊瑚（systems）→ 白 → 淺藍（digital）→ 深色 cta-band
   audiences：白 → 淺紫（business）→ 白 → 淺桃紅（adult）→ 深色 cta-band
   相鄰段落已有色差，交界線全部移除，滾動時靠底色呼吸分段。 */
#systems.svc{background:#FBF5F2}
#digital.svc{background:#F4F7FB}
#business.chap{background:#F7F4FA}
#adult.chap{background:#FAF4F7}
#training.svc,#systems.svc,#brand.svc,#digital.svc,
#school.chap,#business.chap,#ngo.chap,#adult.chap{border-top:none}

/* ---- 第 6 項：讀者字級調整器（18 預設／20／22，只影響長文內文） ---- */
html[data-fs="20"] .prose p{font-size:20px}
html[data-fs="20"] .prose p.lead-in,html[data-fs="20"] .lead-in{font-size:21px}
html[data-fs="20"] .tick-list li{font-size:18.5px}
html[data-fs="22"] .prose p{font-size:22px}
html[data-fs="22"] .prose p.lead-in,html[data-fs="22"] .lead-in{font-size:23px}
html[data-fs="22"] .tick-list li{font-size:20px}
.fs-ctl{position:fixed;left:18px;bottom:18px;z-index:60;display:flex;align-items:center;gap:4px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);
  padding:6px 10px;box-shadow:var(--shadow-nav)}
.fs-ctl .fs-lab{font-size:11px;letter-spacing:.08em;color:var(--text-3);margin-right:2px}
.fs-ctl button{font-family:inherit;border:none;background:none;cursor:pointer;
  width:30px;height:30px;border-radius:50%;color:var(--text-2);line-height:1;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.fs-ctl button:nth-of-type(1){font-size:13px}
.fs-ctl button:nth-of-type(2){font-size:15px}
.fs-ctl button:nth-of-type(3){font-size:17px}
.fs-ctl button[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent);font-weight:600}
.fs-ctl button:hover{color:var(--accent)}
@media(max-width:820px){.fs-ctl{display:none}}  /* 手機版已定稿，不加 */

/* =====================================================================
   R42（2026-08-01）服務對象：四色切換鈕 ＋ 點擊向下展開
   ---------------------------------------------------------------------
   借鑑的公開資源（全部標明來源，見交付報告）：
   · Kinetics「Accordion Spring」    grid-template-rows 0fr→1fr、.45s
   · Kinetics「Command Palette Bloom」面板內容 translateY(14px) 分層上浮
   · Kinetics「Bento Expand / Contextual Dock」:has() 令未選中的鈕淡出
   · Kinetics「Snap Rail」            指示三角 translateX(calc(var(--i)*…))
   · Kinetics「Squish Button」        按壓 scale(.975)，0.08s
   · animationpatterns.art「Grid Row Accordion Expand」min-height:0 修正
   易曲線一律沿用站內既有的 --m-ease / --ease，未新增任何曲線。
   ===================================================================== */
.aud-switch{position:relative}

/* ---- 四個彩色按鈕 ---- */
.aud-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);align-items:stretch}
.aud-tab{--c:var(--ae-blue);--c-soft:rgba(45,93,161,.11);
  display:flex;flex-direction:column;text-align:left;
  font-family:inherit;cursor:pointer;padding:0;overflow:hidden;
  background:#fff;color:var(--text);
  border:1px solid var(--line);border-radius:var(--r-m);
  transition:transform var(--t-ui) var(--m-ease),box-shadow var(--t-ui) var(--m-ease),
             border-color var(--t-ui) var(--ease),background var(--t-ui) var(--ease),
             opacity var(--t-ui) var(--ease)}
.aud-tab .th{display:block;width:100%;aspect-ratio:16/9;overflow:hidden;
  background:#FBF7F0;border-bottom:1px solid var(--line)}
.aud-tab .th img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .55s var(--m-ease)}
.aud-tab .bd{padding:var(--s4) var(--s5) var(--s5);display:flex;flex-direction:column;height:100%}
.aud-tab .tag{margin-bottom:9px;align-self:flex-start}
.aud-tab b{display:block;font-family:var(--font-disp);font-weight:600;
  font-size:17px;line-height:1.45;color:var(--heading)}
.aud-tab .hint{display:flex;align-items:center;gap:6px;margin-top:auto;padding-top:12px;
  font-size:13px;font-weight:600;color:var(--c)}
/* 不許在中間斷開的詞（例如 SEO／GEO、AI Agent），避免斷行後意思散開 */
.nw{white-space:nowrap}
.aud-tab .cv{flex:none;width:11px;height:7px;
  transition:transform var(--t-ui) var(--m-ease)}
.aud-tab .cv path{fill:currentColor}

@media(hover:hover){
  .aud-tab:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);border-color:var(--c)}
  .aud-tab:hover .th img{transform:scale(1.05)}
}
.aud-tab:focus-visible{outline:2px solid var(--c);outline-offset:3px}
.aud-tab:active{transform:scale(.975);transition-duration:var(--t-press)}

/* 選中：填上對象色、微升、指示箭嘴反轉 */
.aud-tab[aria-expanded="true"]{background:var(--c);border-color:var(--c);
  transform:translateY(-4px);box-shadow:0 16px 34px -18px var(--c)}
.aud-tab[aria-expanded="true"] b{color:#fff}
.aud-tab[aria-expanded="true"] .hint{color:rgba(255,255,255,.92)}
.aud-tab[aria-expanded="true"] .tag{background:rgba(255,255,255,.22);color:#fff}
.aud-tab[aria-expanded="true"] .th{border-bottom-color:transparent}
.aud-tab[aria-expanded="true"] .cv{transform:rotate(180deg)}
.aud-tab[aria-expanded="true"]:active{transform:translateY(-4px) scale(.975)}

/* 未選中的三個淡出，把注意力交給展開中的一個 */
@supports selector(:has(*)){
  .aud-tabs:has(.aud-tab[aria-expanded="true"]) .aud-tab[aria-expanded="false"]{opacity:.5}
  .aud-tabs:has(.aud-tab[aria-expanded="true"]) .aud-tab[aria-expanded="false"]:hover{opacity:1}
}

/* ---- 指示三角（Snap Rail）：橫向滑到選中那一格 ---- */
.aud-rail{position:relative;height:0}
.aud-caret{position:absolute;top:2px;left:0;height:12px;
  width:calc((100% - var(--s4) * 3) / 4);
  display:flex;justify-content:center;opacity:0;pointer-events:none;
  transform:translateX(calc(var(--i,0) * (100% + var(--s4))));
  transition:transform .45s var(--m-ease),opacity .22s var(--ease)}
.aud-caret::before{content:'';width:24px;height:12px;background:var(--cc,#2D5DA1);
  clip-path:polygon(50% 100%,0 0,100% 0)}
.aud-switch[data-open] .aud-caret{opacity:1}

/* ---- 向下展開的面板 ---- */
.aud-panel{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .48s var(--m-ease)}
.aud-panel > .pin{overflow:hidden;min-height:0;contain:layout}
.aud-panel[data-open]{grid-template-rows:1fr}

.pbody{margin-top:var(--s6);padding:var(--s7);border-radius:var(--r-m);
  background:var(--c-bg,#FAFAFA);border:1px solid var(--c-line,var(--line))}
.pgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr);
  gap:var(--s7);align-items:start}
.pfig{margin:0}
.pfig img{width:100%;height:auto;display:block;border-radius:var(--r-m);
  background:#fff;border:1px solid rgba(45,45,45,.08)}

/* R45：品牌角色情境圖（去背 PNG／WebP）。
   放在右欄最上，讓每個對象一開面板就先見到 A 或 E 出場。
   用對象色做底部柔光，不加外框，避免與下面的實景插畫撞版。 */
.pip{margin:0;display:flex;justify-content:center;align-items:flex-end;
  padding:var(--s4) var(--s4) 0;border-radius:var(--r-m);
  background:radial-gradient(118% 104% at 50% 100%,
    var(--c-soft,rgba(45,45,45,.06)) 0%,rgba(255,255,255,0) 72%)}
.pip img{width:100%;max-width:290px;height:auto;display:block;
  filter:drop-shadow(0 14px 22px rgba(45,45,45,.13))}

/* 右欄：插畫 ＋ 邊界說明 ＋ 行動鍵，四個面板結構一致 */
.pside{display:flex;flex-direction:column;gap:var(--s5);height:100%}
.pside .note{margin-top:0;max-width:none}
/* 右欄本身是 flex column ＋ gap，區塊不要再自帶上邊距 */
.pside .blk{margin-top:0}
.pside .cta-row{margin-top:auto;padding-top:2px}
.pside .cta-row .btn-coral{width:100%;justify-content:center;text-align:center}
.pbody .prose p,.pbody .tick-list li{color:var(--text)}
.pbody .note{background:rgba(255,255,255,.72);border-left-color:var(--c)}
.pbody .chip{background:rgba(255,255,255,.75);color:var(--c);border-color:rgba(255,255,255,.9)}

/* 面板內容分層上浮（Command Palette Bloom） */
.aud-panel .ptext > *,.aud-panel .pfig,.aud-panel .pip{opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--m-ease),transform .5s var(--m-ease)}
.aud-panel[data-open] .ptext > *,.aud-panel[data-open] .pfig,
.aud-panel[data-open] .pip{opacity:1;transform:none}
.aud-panel[data-open] .ptext > *:nth-child(1){transition-delay:.14s}
.aud-panel[data-open] .ptext > *:nth-child(2){transition-delay:.20s}
.aud-panel[data-open] .ptext > *:nth-child(3){transition-delay:.26s}
.aud-panel[data-open] .pip{transition-delay:.16s}
.aud-panel[data-open] .pfig{transition-delay:.24s}

/* 深層連結首次載入不做動畫，避免捲動位置抖動 */
.aud-switch.no-anim,.aud-switch.no-anim *{transition:none !important}

/* 服務總覽用的超寬插畫：橫跨整個面板，放在兩欄內容之上 */
.pfig.wide{margin:0 0 var(--s6)}
.aud-panel[data-open] .pfig.wide{transition-delay:.12s}

/* =====================================================================
   R46（2026-08-02）闊螢幕版式：左邊點、右邊顯示
   ---------------------------------------------------------------------
   同一套 DOM，兩種版式，服務對象與服務總覽兩頁共用：
   · ≤1159px：完全維持 R42 原狀（鍵在上、內容向下拉開），手機版零改動
   · ≥1160px：整組變成兩欄，左欄是黏附的直排鍵列，右欄即時顯示內容
   斷點揀 1160px（＝ --container 的闊度）而不是 901px，是因為兩欄之後
   正文欄不可以窄過大約 24 個漢字一行；在 1160px 以下切成兩欄，正文只
   剩十八九個漢字一行，讀長文會很吃力，所以中等闊度的視窗直接沿用已經
   驗收的向下展開版式。
   不需要改動展開機制，是因為未展開的面板本身是 grid-template-rows:0fr
   ＋ .pin{overflow:hidden}，高度為 0、不佔位，所以四個面板落在右欄同一
   個位置的效果會自然出現。
   借鑑的公開資源：Kinetics「Contextual Dock」（側欄選項配合主區切換）、
   「Snap Rail」（指示三角跟隨當前項，這裡改為由選中鍵的右邊伸出）。
   易曲線沿用站內既有的 --m-ease，未新增曲線。
   ===================================================================== */
@media(min-width:1160px){
  .aud-switch{display:grid;
    grid-template-columns:clamp(264px,23%,308px) minmax(0,1fr);
    gap:0 var(--s6);align-items:start}

  /* 左欄：直排鍵列，捲動時黏附在視窗上方
     grid-row 必須寫 span，不可以寫 1 / -1：這個 grid 沒有 explicit rows，
     -1 會解析成第 1 條線，變成 1 / 1 完全無效。 */
  .aud-tabs{grid-column:1;grid-row:1 / span 4;align-self:start;
    display:flex;flex-direction:column;gap:var(--s3);
    position:sticky;top:100px}

  /* 直排之後不再需要底部的橫向指示三角 */
  .aud-rail{display:none}

  /* 右欄：四個面板落在同一位置，只有展開的一個有高度 */
  .aud-panel{grid-column:2;min-width:0}
  .pbody{margin-top:0;padding:var(--s6)}
  .pgrid{grid-template-columns:minmax(0,1fr) minmax(0,.6fr);gap:var(--s6)}

  /* 鍵改成橫向緊湊版：左邊縮圖、右邊標題 */
  .aud-tab{flex-direction:row;align-items:stretch;overflow:visible;position:relative}
  /* 縮圖用絕對定位填滿，不靠 height:100%：橫排 flex 裡面
     img{height:100%} 在部分瀏覽器解析不到父層高度。 */
  .aud-tab .th{width:76px;flex:none;aspect-ratio:auto;align-self:stretch;
    position:relative;border-bottom:none;border-right:1px solid var(--line);
    border-radius:calc(var(--r-m) - 1px) 0 0 calc(var(--r-m) - 1px)}
  .aud-tab .th img{position:absolute;inset:0;width:100%;height:100%}
  .aud-tab .bd{padding:var(--s3);justify-content:center;height:auto}
  .aud-tab .tag{margin-bottom:7px}
  .aud-tab b{font-size:15px;line-height:1.42}
  .aud-tab .hint{display:none}

  @media(hover:hover){
    .aud-tab:hover{transform:translateX(3px)}
  }
  .aud-tab[aria-expanded="true"]{transform:translateX(4px)}
  .aud-tab[aria-expanded="true"]:active{transform:translateX(4px) scale(.985)}
  .aud-tab[aria-expanded="true"] .th{border-right-color:transparent}

  /* 選中的鍵由右邊伸出三角，指向右欄內容 */
  .aud-tab::after{content:'';position:absolute;right:-1px;top:50%;
    width:11px;height:20px;background:var(--c);
    clip-path:polygon(0 0,100% 50%,0 100%);
    transform:translate(0,-50%) scaleX(0);transform-origin:left center;
    transition:transform .34s var(--m-ease)}
  .aud-tab[aria-expanded="true"]::after{transform:translate(100%,-50%) scaleX(1)}

  /* 桌面永遠有一項展開，未選中的不要壓得太暗 */
  @supports selector(:has(*)){
    .aud-tabs:has(.aud-tab[aria-expanded="true"]) .aud-tab[aria-expanded="false"]{opacity:.74}
  }
}

/* 闊螢幕：整組略為突出容器兩邊，換回舒服的正文闊度。
   刻意不用 100vw：Windows 版 Chrome 的實心捲動條會令 100vw 大過版面
   闊度，整頁會出現橫向捲動。 */
@media(min-width:1360px){
  .aud-switch{width:calc(100% + 160px);margin-inline:-80px}
}
@media(min-width:1560px){
  .aud-switch{width:calc(100% + 260px);margin-inline:-130px}
}

@media(max-width:900px){
  .pfig.wide{margin:0 0 var(--s5)}
  .aud-tabs{grid-template-columns:repeat(2,1fr);gap:var(--s3)}
  .aud-caret{display:none}
  .aud-tab .bd{padding:var(--s4)}
  .aud-tab b{font-size:15.5px}
  .aud-tab .hint{font-size:12px;padding-top:10px}
  .pbody{padding:var(--s5);margin-top:var(--s5)}
  .pgrid{grid-template-columns:1fr;gap:var(--s5)}
  .pside{gap:var(--s4);height:auto}
  .pside .cta-row{margin-top:0}
  .pip{padding:var(--s3) var(--s3) 0}
  .pip img{max-width:236px}
}
@media(prefers-reduced-motion:reduce){
  .aud-tab,.aud-tab::after,.aud-tab .th img,.aud-tab .cv,.aud-caret,.aud-panel,
  .aud-panel .ptext > *,.aud-panel .pfig,.aud-panel .pip{transition:none}
  .aud-panel .ptext > *,.aud-panel .pfig,.aud-panel .pip{opacity:1;transform:none}
}

/* ============================================================
   第 24 節（R44）：服務總覽「導航」手法
   左側 sticky 目錄軌 + scrollspy + 已讀進度。
   參考手法：Kinetics「Snap Rail」（指示器彈性滑動）、
             「Underline Draw」（hover 底線由左畫出）。
   內容不摺疊，四節全開，只用軌道解決「我在哪、還有多少」。
   ============================================================ */
.svc-nav{padding:var(--s9) 0}
.s-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:var(--s8);align-items:start}

.s-rail{position:sticky;top:92px;align-self:start}
.s-rail .cap{font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--text-3);
  margin-bottom:var(--s4)}
.s-list{position:relative;padding-left:16px}
.s-track{position:absolute;left:0;top:0;bottom:0;width:2px;border-radius:2px;background:var(--line)}
.s-fill{position:absolute;left:0;top:0;width:2px;border-radius:2px;background:var(--sc,#2D5DA1);
  height:var(--fh,0px);transition:height .5s var(--m-ease),background .4s var(--ease)}
.s-thumb{position:absolute;left:-3px;top:0;width:8px;height:var(--th,44px);border-radius:4px;
  background:var(--sc,#2D5DA1);transform:translateY(var(--ty,0px));
  transition:transform .45s var(--spring),height .45s var(--m-ease),background .4s var(--ease);
  box-shadow:0 4px 12px -4px var(--sc,#2D5DA1)}
.s-item{display:block;width:100%;text-align:left;font:inherit;background:none;border:0;
  cursor:pointer;padding:11px 0 11px 14px;color:var(--text-3);
  transition:color var(--t-fast) var(--ease),transform var(--t-fast) var(--m-ease)}
.s-item .n{font-size:11.5px;font-weight:700;letter-spacing:.1em;display:block;opacity:.7}
.s-item .t{font-size:15px;font-weight:600;display:block;position:relative;width:fit-content;
  line-height:1.55}
.s-item .t::after{content:'';position:absolute;left:0;bottom:-2px;height:1.5px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--glide)}
.s-item:hover{color:var(--text)}
.s-item:hover .t::after{transform:scaleX(1)}
.s-item[aria-current="true"]{color:var(--ic,#2D5DA1);transform:translateX(3px)}
.s-item:active{transform:scale(.97)}
.s-rail .pc{margin-top:var(--s5);font-size:12.5px;color:var(--text-3);
  display:flex;align-items:center;gap:8px}
.s-rail .pc .bar{flex:1;height:3px;border-radius:2px;background:var(--line);overflow:hidden}
.s-rail .pc .bar i{display:block;height:100%;border-radius:2px;background:var(--sc,#2D5DA1);
  width:var(--pw,0%);transition:width .9s var(--m-ease)}

.s-body{min-width:0}
.s-sec{padding-bottom:var(--s9)}
.s-sec + .s-sec{border-top:1px solid var(--line);padding-top:var(--s9)}
.s-sec:last-child{padding-bottom:0}

@media(max-width:900px){
  .svc-nav{padding:var(--s8) 0}
  .s-layout{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
  .s-rail{position:sticky;top:74px;z-index:6;padding:14px 0 10px;min-width:0;
    margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);
    background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
  .s-rail .cap,.s-rail .pc{display:none}
  .s-list{display:flex;gap:var(--s2);overflow-x:auto;padding-left:0;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .s-list::-webkit-scrollbar{display:none}
  .s-track,.s-fill,.s-thumb{display:none}
  .s-item{width:auto;flex:0 0 auto;padding:7px 14px;border:1px solid var(--line);
    border-radius:var(--r-pill);white-space:nowrap;background:#fff}
  .s-item .n{display:none}
  .s-item .t{font-size:14px}
  .s-item .t::after{display:none}
  .s-item[aria-current="true"]{color:var(--ic);border-color:var(--ic);
    box-shadow:inset 0 0 0 1px var(--ic);transform:none}
  .s-sec{scroll-margin-top:152px;padding-bottom:var(--s8)}
  .s-sec + .s-sec{padding-top:var(--s8)}
}
@media(prefers-reduced-motion:reduce){
  .s-fill,.s-thumb,.s-item,.s-item .t::after,.s-rail .pc .bar i{transition:none}
}

/* ============================================================
   第 25 節（R44）：案例「敘事」手法
   階段時間軸——脊線由上而下畫出，節點逐個彈出。
   實心節點＋實線卡＝已經交付的階段；
   虛線節點＋虛線卡＝雙方正在推進的下一步，不是成果、不是承諾。
   未完成核實及授權的案例只放骨架佔位，永遠不會填成內容。
   參考手法：Kinetics「Stagger Entrance」「Elastic Progress」，
             以及「Skeleton to Content」（此處刻意停在 Skeleton）。
   ============================================================ */
.cs-steps{display:block;position:relative;margin-top:var(--s7);padding-left:36px;max-width:900px}
.cs-spine{position:absolute;left:8px;top:16px;bottom:16px;width:2px;border-radius:2px;
  background:var(--line);overflow:hidden}
.cs-spine i{display:block;width:100%;height:100%;border-radius:2px;background:var(--c);
  transform:scaleY(0);transform-origin:top;transition:transform 1.15s var(--m-ease) .1s}
.cs.visible .cs-spine i{transform:scaleY(1)}

.cs-step{--d:0s;position:relative;border:1px solid var(--line);border-radius:var(--r-m);
  padding:var(--s5) var(--s6);background:#fff;opacity:0;transform:translateY(14px);
  transition:opacity .55s var(--m-ease) var(--d),transform .55s var(--m-ease) var(--d)}
.cs-steps .cs-step:nth-child(2){--d:.06s}
.cs-steps .cs-step:nth-child(3){--d:.18s}
.cs-steps .cs-step:nth-child(4){--d:.30s}
.cs-steps .cs-step:nth-child(5){--d:.42s}
.cs-step + .cs-step{margin-top:var(--s4)}
.cs.visible .cs-step{opacity:1;transform:none}

.cs-step::before{content:'';position:absolute;left:-36px;top:calc(var(--s5) + 4px);
  width:18px;height:18px;border-radius:50%;box-sizing:border-box;background:#fff;
  border:2px solid var(--c);transform:scale(.35);
  transition:transform .5s var(--spring) calc(var(--d) + .08s)}
.cs.visible .cs-step::before{transform:scale(1)}
.cs-step.done::before{background:var(--c)}
.cs-step.next::before{border-style:dashed}
.cs-step.next{border-style:dashed;border-color:rgba(45,45,45,.24);background:#FCFCFD}

/* 圖例：實心＝已交付、虛線＝下一步 */
.cs-legend{display:flex;flex-wrap:wrap;align-items:center;gap:5px;
  font-size:14.5px;color:var(--text-2);line-height:2}
.cs-legend .lg{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--text)}
.cs-legend i{width:14px;height:14px;border-radius:50%;box-sizing:border-box;
  border:2px solid var(--ae-blue);display:inline-block;flex:0 0 14px}
.cs-legend i.d{background:var(--ae-blue)}
.cs-legend i.n{border-style:dashed;background:#fff}

/* 待核實案例：骨架佔位（永遠不會變成內容） */
.cs-skel{margin-top:var(--s7);border:1px dashed var(--line-blue);border-radius:var(--r-m);
  padding:var(--s5) var(--s6);background:#fff;max-width:760px;
  display:flex;flex-direction:column;gap:12px;overflow:hidden}
.cs-skel .k-line{display:block;height:12px;border-radius:6px;
  background:linear-gradient(90deg,#EEF2F7 0%,#F8FAFD 50%,#EEF2F7 100%);
  background-size:220% 100%;animation:csShim 2.8s linear infinite}
.cs-skel .k-line.w1{width:36%}
.cs-skel .k-line.w2{width:88%}
.cs-skel .k-line.w3{width:64%}
@keyframes csShim{from{background-position:120% 0}to{background-position:-120% 0}}
.cs-skel-note{margin-top:var(--s3);font-size:13.5px;color:var(--text-3);
  max-width:760px;line-height:1.8}

@media(max-width:820px){
  .cs-steps{padding-left:26px}
  .cs-spine{left:6px}
  .cs-step{padding:var(--s5)}
  .cs-step::before{left:-26px;width:14px;height:14px;top:calc(var(--s5) + 4px)}
}
@media(prefers-reduced-motion:reduce){
  .cs-spine i{transform:scaleY(1);transition:none}
  .cs-step{opacity:1;transform:none;transition:none}
  .cs-step::before{transform:scale(1);transition:none}
  .cs-skel .k-line{animation:none}
}

/* ============================================================
   第 27 節（R48）：已授權學生作品「證據」手法
   案例頁只有兩個進行中的案例，沒有可以公開的學校案例。
   這一組是唯一已取得公開展示同意的真實素材，所以用實物照片本身
   作為主角：圖片以由上而下的遮罩揭示，同時輕微收回放大，
   讀起來像是作品從紙面浮上來，而不是又一張裝飾插圖。
   第一件（繪本）橫跨兩欄作為完成品，下面兩件實體周邊並排，
   構成「完整作品 → 帶出課室」的次序。
   ============================================================ */
.wk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s6);margin-top:var(--s7);align-items:start}
.wk{margin:0}
.wk.wide{grid-column:1 / -1}
.wk-im{position:relative;overflow:hidden;border-radius:var(--r-m);
  background:var(--bg-grey);border:1px solid var(--line)}
.wk-im img{--d:0s;display:block;width:100%;height:auto;
  clip-path:inset(0 0 100% 0);transform:scale(1.05);
  transition:clip-path .95s var(--m-ease) var(--d),
             transform 1.15s var(--m-ease) var(--d)}
.wk.visible .wk-im img{clip-path:inset(0 0 0 0);transform:scale(1)}
.wk:nth-child(2) .wk-im img{--d:.10s}
.wk:nth-child(3) .wk-im img{--d:.20s}
.wk figcaption{margin-top:var(--s4);max-width:var(--text-w)}
.wk figcaption b{display:block;font-family:var(--font-disp);font-weight:600;
  font-size:17px;color:var(--text);margin-bottom:6px}
.wk figcaption span{display:block;font-size:15px;color:var(--text-2);line-height:1.9}

/* 繪本是橫幅比例，若直接鋪滿兩欄會高得像首頁大圖，反而蓋過下面兩件實物。
   所以在桌面把這一件本身再拆成「圖左、說明右」，圖片約佔六成闊度，
   高度收回一半左右，讀起來仍然是這一組的主件，但不會壓住整頁。 */
@media(min-width:901px){
  .wk.wide{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
    gap:var(--s6);align-items:center}
  .wk.wide figcaption{margin-top:0}
}

@media(max-width:900px){
  .wk-grid{grid-template-columns:minmax(0,1fr);gap:var(--s6);margin-top:var(--s6)}
  .wk figcaption{margin-top:var(--s3)}
  .wk figcaption b{font-size:16px}
  .wk figcaption span{font-size:14.5px}
}
@media(prefers-reduced-motion:reduce){
  .wk-im img{clip-path:none;transform:none;transition:none}
}

/* ============================================================
   第 28 節（R49）：真實現場相片
   作品那一組（第 27 節）用由上而下的遮罩，這一組刻意改成由左至右，
   讀起來像鏡頭橫掃過現場，兩組手法就不會覺得重複。
   相片本身就是內容，所以圖說只補充畫面看不到的一句，不作評語。
   ============================================================ */
.sc{margin:var(--s6) 0 0}
.sc-im{position:relative;overflow:hidden;border-radius:var(--r-m);
  background:var(--bg-grey);border:1px solid var(--line)}
.sc-im img{display:block;width:100%;height:auto;
  clip-path:inset(0 100% 0 0);transform:scale(1.04);
  transition:clip-path .9s var(--m-ease),transform 1.1s var(--m-ease)}
.sc.visible .sc-im img{clip-path:inset(0 0 0 0);transform:scale(1)}
.sc figcaption{margin-top:var(--s3);font-size:14.5px;color:var(--text-3);
  line-height:1.85;max-width:var(--text-w)}

@media(max-width:900px){
  .sc{margin-top:var(--s5)}
  .sc figcaption{margin-top:var(--s2);font-size:13.5px}
}
@media(prefers-reduced-motion:reduce){
  .sc-im img{clip-path:none;transform:none;transition:none}
}

/* ============================================================
   第 26 節（R44）：專欄總入口「檢索」手法
   主題篩選帶（藥丸指示器滑動）＋ 卡片庫 FLIP 重排。
   未刊出的欄目只放骨架卡，並註明不會被索引。
   參考手法：Kinetics「Tab Pill Glide」「Snap Rail」「Stagger
             Entrance」「Skeleton to Content」（此處刻意停在 Skeleton）。
   ============================================================ */
.f-wrap{margin-top:var(--s6)}
/* 主題篩選帶：滑動指示塊（segmented control）
   一律單行，闊度不足時橫向捲動，不再換行。換行的話指示塊要斜向跨行移動，
   軌跡讀起來像是跳位而不是滑動，反而失去這個手法本身的作用。 */
.f-bar{position:relative;display:flex;flex-wrap:nowrap;gap:6px;padding:5px;
  border:1px solid var(--line);border-radius:var(--r-pill);background:#fff;width:fit-content;
  max-width:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.f-bar::-webkit-scrollbar{display:none}
.f-pill{position:absolute;top:0;left:0;height:var(--ph,36px);width:var(--pw,0px);
  border-radius:var(--r-pill);background:var(--fc,#2D5DA1);
  transform:translate(var(--px,0px),var(--py,0px));opacity:var(--po,0);
  transition:transform .4s var(--glide),width .4s var(--glide),
             background .4s var(--glide),opacity .25s var(--ease);
  pointer-events:none}
/* 首次定位、改變視窗大小、字體換好之後重新量度：這三種情況都不可以有動畫，
   否則指示塊會由左上角零闊度掃出來，或者在拉動視窗時一直在追。 */
.f-bar.no-anim .f-pill{transition:none}
.f-btn{position:relative;z-index:1;flex:0 0 auto;appearance:none;border:0;background:none;
  cursor:pointer;
  font-family:var(--serif-tc);font-size:14px;font-weight:600;color:var(--text-2);
  padding:8px 16px;border-radius:var(--r-pill);white-space:nowrap;
  /* 延遲 .12s 才轉色：等指示塊行近了才交叉淡入，而不是一按就跳色 */
  transition:color .26s var(--glide) .12s,transform var(--t-fast) var(--m-ease)}
.f-btn .c{display:inline-block;margin-left:7px;font-size:12px;font-weight:700;opacity:.62}
/* 游標經過是即時回應，不跟隨上面的延遲 */
.f-btn:hover{color:var(--text);transition-delay:0s}
.f-btn[aria-pressed="true"]{color:#fff}
.f-btn:active{transform:scale(.95)}

.f-meta{margin-top:var(--s4);font-size:13.5px;color:var(--text-3)}

.f-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));
  gap:var(--s5);margin-top:var(--s5)}
.f-card{--c:var(--ae-blue);display:flex;flex-direction:column;text-decoration:none;
  background:#fff;border:1px solid var(--line);border-top:3px solid var(--c);
  border-radius:var(--r-m);padding:var(--s5) var(--s6) var(--s5);
  opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--m-ease),transform .5s var(--m-ease),
             border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.f-card.on{opacity:1;transform:none}
.f-card:hover{box-shadow:0 14px 30px -20px rgba(45,45,45,.34)}
.f-k{font-family:var(--serif-en);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--c);margin-bottom:var(--s2)}
.f-card h3{font-size:18px;line-height:1.55;margin-bottom:var(--s2);color:var(--heading)}
.f-card p{font-size:14.5px;color:var(--text-2);line-height:1.8;margin-bottom:var(--s4)}
.f-foot{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  justify-content:space-between}
.f-go{font-size:13.5px;font-weight:600;color:var(--c)}
.f-go .ar{display:inline-block;transition:transform var(--t-fast) var(--ease)}
@media(hover:hover){.f-card:hover .f-go .ar{transform:translateX(4px)}}

/* 未刊出欄目：骨架佔位（不會變成內容，亦不會被索引） */
.f-draft{margin-top:var(--s7);border-top:1px solid var(--line);padding-top:var(--s6)}
.f-draft .cap{font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--text-3);
  margin-bottom:var(--s4)}
.f-skels{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:var(--s5)}
.f-skel{border:1px dashed var(--line-blue);border-radius:var(--r-m);background:#fff;
  padding:var(--s5) var(--s6);display:flex;flex-direction:column;gap:11px;overflow:hidden}
.f-skel .lb{font-family:var(--serif-en);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-3)}
.f-skel .k-line{display:block;height:12px;border-radius:6px;
  background:linear-gradient(90deg,#EEF2F7 0%,#F8FAFD 50%,#EEF2F7 100%);
  background-size:220% 100%;animation:csShim 2.8s linear infinite}
.f-skel .k-line.w1{width:52%}
.f-skel .k-line.w2{width:92%}
.f-skel .k-line.w3{width:70%}
.f-draft-note{margin-top:var(--s5);font-size:13.5px;color:var(--text-3);
  max-width:var(--text-w);line-height:1.85}

@media(max-width:820px){
  .f-bar{width:auto;border-radius:var(--r-m)}
  .f-btn{font-size:13.5px;padding:8px 14px}
  .f-grid,.f-skels{grid-template-columns:minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){
  .f-pill,.f-btn,.f-card,.f-go .ar{transition:none}
  .f-skel .k-line{animation:none}
}

/* ============================================================
   第 29 節（R50）：五個內頁各自的開場版式
   ------------------------------------------------------------
   之前五頁共用同一個 .page-hero——左邊文字、右邊插圖、同一組按鈕，
   所以逐頁打開時分不出自己身在哪一頁。這一節為五頁各做一種版式，
   分別在結構本身，不是換色或換圖那種表面差異：

     services  .hero-rule       全闊大標 → 一條橫線 → 線下再分左右
     audiences .hero-offset     插圖靠左出血、文字在右，眉標直排
     cases     .hero-overlay    插圖靠右出血，白色文字卡壓在上面
     insights  .hero-center     完全置中對稱，點陣底紋，插圖作報頭
     about     .hero-statement  沒有插圖，超大宣言逐行揭開，左邊一條直線

   進場節奏也各自不同：橫線由左畫出、插圖由左或由右揭開、卡片浮起、
   由中心放大、標題逐行升起。易曲線全部沿用站內既有的
   --ease／--m-ease／--glide，沒有新增。

   【手機版不動】所有版式一律包在 @media(min-width:901px) 之內。
   插圖外框保留原本的 .figure 類名，所以 900px 以下的堆疊次序、
   圖片闊度與按鈕全闊等既定行為完全不變。
   減少動態偏好由第 240 行左右的全域規則（*{animation:none!important}）
   統一關掉，這裡不需要重複寫。
   ============================================================ */

@keyframes ae-h-rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes ae-h-line{from{opacity:0;transform:translateY(115%)}to{opacity:1;transform:none}}
@keyframes ae-h-fade{from{opacity:0}to{opacity:1}}
@keyframes ae-h-drawx{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ae-h-drawy{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes ae-h-wipe-l{from{clip-path:inset(0 100% 0 0);transform:scale(1.06)}to{clip-path:inset(0 0 0 0);transform:none}}
@keyframes ae-h-wipe-r{from{clip-path:inset(0 0 0 100%);transform:scale(1.06)}to{clip-path:inset(0 0 0 0);transform:none}}
@keyframes ae-h-pop{from{opacity:0;transform:scale(.965)}to{opacity:1;transform:none}}
@keyframes ae-h-card{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

/* 宣言式標題的行容器：手機保持自然斷行，桌面才逐行揭開 */
.st-ln{display:inline}
.st-ln > i{font-style:normal}

@media(min-width:901px){

  /* ---- ① 服務總覽：全闊大標 ＋ 一條橫線 ---------------------------
     四個方向本身是並列關係，所以開場不做左右對照，而是把標題拉到
     全闊，用一條橫線把「說甚麼」與「怎樣開始」分成上下兩段。   ---- */
  .hero-rule .inner{display:block}
  .hr-top{display:grid;grid-template-columns:minmax(0,1fr) 232px;
    gap:var(--s7);align-items:end}
  .hr-txt{grid-column:1;grid-row:1;min-width:0}
  .hero-rule .figure.hr-fig{grid-column:2;grid-row:1;margin:0}
  .hero-rule .figure.hr-fig img{max-width:232px;margin-left:auto;margin-right:0;
    animation:ae-h-pop .85s var(--m-ease) .16s both}
  .hero-rule h1{font-size:clamp(34px,4.7vw,58px);line-height:1.32;
    margin-bottom:0;max-width:none;animation:ae-h-rise .7s var(--m-ease) .08s both}
  .hero-rule .eyebrow{animation:ae-h-fade .55s var(--ease) both}
  .hr-line{height:1px;background:var(--line);margin:var(--s6) 0 var(--s5);
    transform-origin:left center;animation:ae-h-drawx .85s var(--glide) .3s both}
  .hr-bottom{display:grid;grid-template-columns:minmax(0,1fr) auto;
    gap:var(--s5) var(--s7);align-items:start}
  .hero-rule .lead{max-width:680px;margin:0;
    animation:ae-h-rise .7s var(--m-ease) .44s both}
  .hero-rule .cta-row{margin-top:0;justify-content:flex-end;
    animation:ae-h-rise .7s var(--m-ease) .54s both}

  /* ---- ② 服務對象：插圖靠左出血 ＋ 眉標直排 -----------------------
     這一頁講的是「你由哪一邊進來」，所以刻意把圖放到左邊、文字放右邊，
     與其餘四頁相反；眉標轉成直排，像書脊上的分類標示。          ---- */
  .hero-offset .inner{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
    gap:var(--s8);align-items:center}
  .hero-offset .figure.ho-fig{position:relative;margin:0 0 0 calc(-1 * var(--gutter));
    width:calc(100% + var(--gutter));overflow:hidden;
    border-radius:0 var(--r-m) var(--r-m) 0;
    background:linear-gradient(118deg,rgba(45,93,161,.075),rgba(139,58,150,.05));
    padding:var(--s6) var(--s6) var(--s6) var(--gutter)}
  .hero-offset .figure.ho-fig img{max-width:400px;
    animation:ae-h-wipe-l 1s var(--m-ease) .12s both}
  .ho-body{display:flex;align-items:flex-start;gap:var(--s5);min-width:0}
  .ho-body > div{min-width:0}
  .eyebrow-v{writing-mode:vertical-rl;transform:rotate(180deg);
    margin:0;flex:none;animation:ae-h-fade .6s var(--ease) .1s both}
  .eyebrow-v::before{width:1px;height:32px}
  .hero-offset h1{animation:ae-h-rise .75s var(--m-ease) .16s both}
  .hero-offset .lead{animation:ae-h-rise .75s var(--m-ease) .28s both}
  .hero-offset .cta-row{animation:ae-h-rise .75s var(--m-ease) .4s both}

  /* ---- ③ 案例：插圖靠右出血 ＋ 白卡壓層 ---------------------------
     案例頁是敘事，開場用一張壓在圖上的白卡，讀起來像檔案夾的封面，
     與其餘四頁「文字與圖並排」的關係不同。                      ---- */
  .hero-overlay .inner{grid-template-columns:repeat(12,minmax(0,1fr));
    gap:0;align-items:center}
  .hero-overlay .figure.ov-fig{grid-column:6 / -1;grid-row:1;margin:0;
    margin-right:calc(-1 * var(--gutter));overflow:hidden;
    border-radius:var(--r-m) 0 0 var(--r-m);
    background:linear-gradient(200deg,rgba(45,93,161,.085),rgba(212,101,74,.055));
    padding:var(--s7) var(--gutter) var(--s7) var(--s7);
    display:flex;align-items:center;justify-content:center;min-height:330px}
  .hero-overlay .figure.ov-fig img{max-width:360px;
    animation:ae-h-wipe-r 1s var(--m-ease) .2s both}
  .ov-card{grid-column:1 / 7;grid-row:1;position:relative;z-index:2;
    background:#fff;border:1px solid var(--line);border-radius:var(--r-m);
    padding:var(--s7);box-shadow:0 26px 64px rgba(22,48,79,.11);
    animation:ae-h-card .8s var(--m-ease) .06s both}
  .hero-overlay h1{font-size:clamp(30px,3.5vw,44px)}
  .hero-overlay .lead{max-width:none}

  /* ---- ④ 專欄：左重右輕的不對稱雙欄（R56 重排） -------------------
     原本的置中版式把插圖縮成一枚很小的報頭，圖太細、四邊又都是留白，
     看起來像還沒排好。改成左邊放到最大的標題、右邊一整幅插圖：
     插圖加黑框、右下打一道深藍實影，左上角再壓一塊被圖蓋掉大半的
     實色方塊，靠「被裁走」造出版面深度，而不是靠置中對稱。
     點陣底紋保留，但改為只鋪左半邊，讓右邊的圖乾淨地站出來。 */
  .hero-center{
    background:
      linear-gradient(90deg,rgba(255,255,255,0) 0%,#FFFFFF 58%),
      radial-gradient(rgba(45,93,161,.15) 1px,transparent 1px) 0 0/22px 22px,
      radial-gradient(760px 420px at 4% 0%,var(--accent-soft),transparent 64%),
      #FFFFFF;
  }
  .hero-center .inner{
    display:grid;
    grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
    gap:clamp(32px,4.6vw,76px);
    align-items:center;text-align:left;
  }
  .hc-in{order:1;max-width:none;margin:0}
  .hero-center .figure.hc-mark{
    order:2;margin:0;position:relative;
    animation:ae-h-pop .9s var(--m-ease) .18s both;
  }
  /* 左上角被插圖蓋掉大半的實色方塊 */
  .hero-center .figure.hc-mark::before{
    content:'';position:absolute;z-index:0;
    left:-24px;top:-24px;width:56%;height:54%;
    background:var(--ae-blue);
  }
  /* 右上角一枚小方塊，補一點顏色的呼吸位 */
  .hero-center .figure.hc-mark::after{
    content:'';position:absolute;z-index:2;
    right:-16px;top:26px;width:34px;height:34px;
    background:#F2C230;border:var(--hard-w) solid var(--hard);
  }
  .hero-center .figure.hc-mark img{
    position:relative;z-index:1;
    max-width:none;width:100%;height:auto;display:block;
    background:#fff;
    border:var(--hard-w) solid var(--hard);
    box-shadow:12px 12px 0 #16304F;
  }
  .hero-center .eyebrow{animation:ae-h-fade .6s var(--ease) .1s both}
  .hero-center h1{font-size:clamp(38px,4.6vw,60px);
    animation:ae-h-rise .8s var(--m-ease) .18s both}
  .hero-center .lead{max-width:none;margin-inline:0;
    animation:ae-h-rise .7s var(--m-ease) .3s both}
  .hero-center .cta-row{justify-content:flex-start;
    animation:ae-h-rise .7s var(--m-ease) .4s both}

  /* ---- ⑤ 關於我們：宣言 -------------------------------------------
     這一頁沒有插圖，與其補一張，不如把版面交給文字：標題放到最大，
     逐行由下揭開，左邊一條由深到淡的直線把整段話框住；引言與按鈕
     退到下方一條細線之後，讀起來像一份聲明而不是一個介紹頁。   ---- */
  .hero-statement{
    background:
      linear-gradient(158deg,rgba(45,93,161,.06),rgba(255,255,255,0) 48%),
      radial-gradient(720px 400px at 96% 6%,rgba(139,58,150,.05),transparent 62%),
      #FFFFFF;
  }
  .hero-statement .inner{display:block;position:relative;
    padding-left:calc(var(--gutter) + var(--s6))}
  .hero-statement .inner::before{content:'';position:absolute;
    left:var(--gutter);top:6px;bottom:6px;width:2px;border-radius:2px;
    background:linear-gradient(180deg,var(--ae-blue),rgba(45,93,161,0));
    transform-origin:top center;animation:ae-h-drawy 1.15s var(--glide) .08s both}
  .page-hero.hero-statement .inner > div{max-width:none}
  .hero-statement .eyebrow{animation:ae-h-fade .55s var(--ease) both}
  .hero-statement h1{font-size:clamp(34px,5.1vw,64px);line-height:1.3;
    max-width:17em;margin-bottom:0}
  .hero-statement .st-ln{display:block;overflow:hidden;padding-bottom:.06em}
  .hero-statement .st-ln > i{display:block;
    animation:ae-h-line .85s var(--m-ease) both}
  .hero-statement .st-ln:nth-of-type(1) > i{animation-delay:.10s}
  .hero-statement .st-ln:nth-of-type(2) > i{animation-delay:.20s}
  .hero-statement .st-ln:nth-of-type(3) > i{animation-delay:.30s}
  .st-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;
    gap:var(--s5) var(--s7);align-items:end;
    margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--line);
    animation:ae-h-rise .8s var(--m-ease) .52s both}
  .hero-statement .lead{margin:0;max-width:640px}
  .hero-statement .cta-row{margin-top:0}
}

/* 1160px 以下：橫線版與壓層版的兩欄會太窄，先退回上下排 */
@media(min-width:901px) and (max-width:1159px){
  .hr-top{grid-template-columns:minmax(0,1fr) 180px;gap:var(--s6)}
  .hero-rule .figure.hr-fig img{max-width:180px}
  .hr-bottom{grid-template-columns:1fr;gap:var(--s5)}
  .hero-rule .cta-row{justify-content:flex-start}
  .hero-offset .inner{gap:var(--s6)}
  .hero-offset .figure.ho-fig img{max-width:300px}
  .hero-overlay .figure.ov-fig{grid-column:7 / -1;min-height:290px}
  .hero-overlay .figure.ov-fig img{max-width:260px}
  .ov-card{grid-column:1 / 8;padding:var(--s6)}
}

/* ============================================================
   第 30 節（R50）：兩項配套修正
   ------------------------------------------------------------
   一、橫線版（服務總覽）在 900px 以下的還原
       .hero-rule 為了桌面版多包了 .hr-top／.hr-line／.hr-bottom 三層。
       手機版必須看起來與改版前完全一樣，所以在這裡把 .inner 還原成
       普通區塊、把間距交還給 .hr-top，並把只在桌面出現的橫線收起。

   二、字級調整器改為收合式
       原本的控制列固定約 150px 闊，停在畫面左下角，在 1280px 左右的
       視窗會壓到正文標題（客戶截圖已見）。改成平時只露出「字級」兩字的
       小膠囊，滑鼠移上或鍵盤聚焦時才展開；1400px 以上空間足夠，維持
       常駐展開。820px 以下仍然完全隱藏，手機版不受影響。
   ============================================================ */

@media(max-width:900px){
  .hero-rule .inner{display:block}
  .hero-rule .hr-top{display:grid;gap:var(--s7)}
  .hero-rule .hr-line{display:none}
}

.fs-ctl{
  left:10px;bottom:14px;overflow:hidden;justify-content:flex-start;
  max-width:34px;padding:5px;opacity:.6;
  transition:max-width .32s var(--ease),padding .32s var(--ease),opacity .2s var(--ease);
}
.fs-ctl .fs-lab{flex:none;white-space:nowrap}
.fs-ctl button{flex:none}
.fs-ctl:hover,.fs-ctl:focus-within{max-width:210px;padding:6px 10px;opacity:1}
@media(min-width:1440px){
  .fs-ctl{left:16px;bottom:16px;max-width:210px;padding:6px 10px;opacity:1}
}

/* 插圖本身是白底線稿，放在有底色的版面上會出現一個白色方塊。
   用 multiply 混合，白色會與底色相同、線條保持不變，看起來像直接畫在版面上。 */
@media(min-width:901px){
  .hero-offset .figure.ho-fig img,
  .hero-overlay .figure.ov-fig img{mix-blend-mode:multiply}
}

/* ============================================================
   第 31 節（R51）：頁尾社交連結
   ------------------------------------------------------------
   除 WhatsApp 之外，再加入 Facebook 與 Instagram 兩個入口，
   放在頁尾標誌一欄的標語之下。三個圓形按鈕共用同一組樣式，
   平時只有一圈細邊，游標移上時反白，圖示轉為頁尾深藍色，
   所以沒有引入任何品牌色以外的顏色。
   桌面與手機共用同一組規則：頁尾在 900px 以下本來就會直向堆疊，
   這一排按鈕會跟着標語之下自然出現，不需要額外斷點。
   ============================================================ */

.footer-social{display:flex;gap:var(--s3);margin-top:var(--s5)}
.footer-social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;flex:none;
  border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.82);
  text-decoration:none;
  transition:background var(--t-ui) var(--ease),color var(--t-ui) var(--ease),
             border-color var(--t-ui) var(--ease),transform var(--t-ui) var(--ease);
}
.footer-social a svg{width:18px;height:18px;display:block;fill:currentColor}
.footer-social a:hover{background:#fff;color:var(--blue-deep);border-color:#fff;transform:translateY(-2px)}
.footer-social a:active{transform:translateY(0) scale(.96);transition-duration:var(--t-press)}
.footer-social a:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ============================================================
   第 32 節（R52）：章節主色制與重點字標示
   ------------------------------------------------------------
   處理兩個問題。一是內頁文字量大，而通篇同一個灰度、同一個字重，
   眼睛沒有落腳點，讀起來容易疲倦。二是內頁除了頁首之外幾乎沒有
   顏色，與首頁本來的色彩節奏脫節，看上去偏沉悶。

   做法是把首頁本來就有的「關鍵詞加粗上色」推廣到內頁，並且讓顏色
   跟隨章節走：每個章節掛一個 tone class，該節的標題短線、重點字
   與淡色渲染全部採用同一隻品牌色，捲動時顏色會一節一節轉換。底色
   維持白或極淺，只在章節左上角加一層 6% 上下的同色渲染，不改變
   整體的白系印象。

   標示分兩級。依據可用性研究：加粗最容易被掃到，底線會被誤認為
   連結所以不使用，標示總量亦應控制在全文一成以內。
     .kw  關鍵詞——加粗並採用該節的文字安全色
     .mk  重點句——加粗並加一道半高淡色底，捲到才掃出來

   【變數命名注意】本節不使用 --c-soft、--c-bg、--c-line，因為這
   三個名稱已經由 .tag 與 .aud-panel 佔用，重用會令服務總覽頁的
   分頁底色被覆蓋。重點句底色改用 --mk-bg，章節渲染改用 --sec-wash。
   兩者都以 color-mix 由 --c 自動推導，所以任何已經設定了 --c 的
   區塊（例如服務總覽的四個方向面板）都會自動跟色，不必逐個補寫。
   ============================================================ */

/* --- 32.1 五組章節色 ---------------------------------------
   --c   裝飾用：線條、頂邊、圖示，可以用較鮮的一版
   --ct  文字用：必須通過對比度要求。珊瑚改用加深版本；金色在白底
         做小字對比不足，所以文字退回墨色，只靠加粗突出。
   ---------------------------------------------------------- */
.tone-blue  {--c:#2D5DA1;--ct:#2D5DA1}
.tone-purple{--c:#8B3A96;--ct:#8B3A96}
.tone-coral {--c:#D4654A;--ct:#A8462F}
.tone-rose  {--c:#B04872;--ct:#B04872}
.tone-gold  {--c:#B8891F;--ct:var(--ink)}

/* --- 32.2 章節渲染 ----------------------------------------
   只加一層極淡的同色光暈在章節左上角。原本有底色的章節要把底色
   補回，因為 .sec-grey 與 .band-alt 用的是 background 簡寫，
   會把這裡設定的 background-image 連同底色一併重設。
   ---------------------------------------------------------- */
section[class*="tone-"]{
  --sec-wash:rgba(45,93,161,.055);
  --sec-wash:color-mix(in srgb,var(--c,#2D5DA1) 6.5%,transparent);
  background-image:radial-gradient(880px 340px at 14% 0%,var(--sec-wash),transparent 70%);
}
section.sec-grey[class*="tone-"]{background-color:#F4F7FB}
section.band-alt[class*="tone-"]{background-color:#FAFAFA}

/* --- 32.3 章節標題的彩色短線 ------------------------------- */
.sec-title::before{
  content:'';display:block;width:38px;height:3px;border-radius:2px;
  background:var(--c,var(--ae-blue));margin-bottom:var(--s4);
  transform-origin:left center;
}
.sec-title.reveal::before{transform:scaleX(0);transition:transform .7s var(--glide) .12s}
.sec-title.reveal.visible::before{transform:scaleX(1)}
.hero-center .sec-title::before{margin-inline:auto}
/* 服務總覽的四個方向面板，標題上方本來已經有一個同色的方向標籤，
   再加一條短線會變成兩重裝飾，所以在面板內不畫線。 */
.ptext .sec-title::before{display:none}

/* --- 32.4 關鍵詞：加粗並採用該節文字色 ---------------------
   先讀 --ct，沒有就退到 --c，再沒有就用品牌藍。所以放在已經設定
   了 --c 的面板內時會自動跟色。
   ---------------------------------------------------------- */
.kw{font-weight:700;color:var(--ct,var(--c,var(--ae-blue)));font-style:normal}

/* --- 32.5 重點句：加粗並加一道半高淡色底 -------------------
   底色只佔字高下半部，所以不會蓋住字身。捲到才由左掃出來；
   box-decoration-break 令換行之後每一行都有底色。
   第一行 background-image 是給不支援 color-mix 的瀏覽器的後備。
   ---------------------------------------------------------- */
.mk{
  --mk-bg:color-mix(in srgb,var(--c,#2D5DA1) 22%,transparent);
  font-weight:600;color:var(--heading);font-style:normal;
  background-image:linear-gradient(rgba(45,93,161,.2),rgba(45,93,161,.2));
  background-image:linear-gradient(var(--mk-bg),var(--mk-bg));
  background-repeat:no-repeat;background-position:0 86%;background-size:100% .44em;
  padding:0 .12em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.reveal .mk{background-size:0 .44em;transition:background-size .85s var(--glide) .3s}
.reveal.visible .mk{background-size:100% .44em}

/* 減少動態時，短線與底色一律直接呈現最終狀態 */
@media(prefers-reduced-motion:reduce){
  .sec-title::before{transform:none !important}
  .mk,.reveal .mk{background-size:100% .44em !important}
}


/* ============================================================
   第 33 節（R52）：頁首下方的真實相帶
   ------------------------------------------------------------
   讓人一打開頁面向下少許就看到真實的現場與作品，而不是只有插圖。
   相片以固定比例裁切，說明壓在相片下緣的漸變上，所以不會遮到畫面
   中央。桌面並排，手機改為左右滑動，避免把頁面拉長。
   ============================================================ */

.hero-strip{padding:0 0 var(--s8)}
.hs-grid{display:grid;gap:var(--s4);grid-template-columns:repeat(3,minmax(0,1fr))}
/* 兩格時用等闊，兩張相高度一致，底邊對齊 */
.hs-grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
/* 版位比例用 16:9。四張相片之中，現場相與繪本相本來就是 16:9，用同一個
   比例可以完整保留構圖；直度的作品相則取中間一段，主體仍然在畫面之內。 */
.hs-item{
  position:relative;margin:0;border-radius:var(--r-m);overflow:hidden;
  background:var(--bg-grey);aspect-ratio:16/9;
  box-shadow:0 1px 2px rgba(45,45,45,.05);
}
.hs-item img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 50%;display:block}
.hs-item figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:var(--s8) var(--s4) var(--s4);
  font-size:13px;line-height:1.62;color:#fff;
  text-shadow:0 1px 3px rgba(11,26,44,.45);
  background:linear-gradient(180deg,rgba(22,48,79,0),rgba(22,48,79,.5) 34%,rgba(22,48,79,.9));
}
.hs-note{margin-top:var(--s4);font-size:13.5px;line-height:1.75;color:var(--text-3)}

@media(max-width:900px){
  .hs-grid,.hs-grid.g2{
    grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:76%;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scrollbar-width:none;
    padding-inline:var(--gutter);margin-inline:calc(-1 * var(--gutter));
  }
  .hs-grid::-webkit-scrollbar{display:none}
  .hs-item{scroll-snap-align:start}
  .hero-strip{padding-bottom:var(--s7)}
}


/* ============================================================
   第 34 節（R52）：案例頁頁首改用真實相片
   ------------------------------------------------------------
   原本那個版位是為白底線稿而設：圖只有 360px 闊、以 multiply 混合、
   四周留白。換成相片之後這幾項都不適用，相片要填滿整個版位、不可以
   混合、亦不需要留白。所以另加一個 .ov-photo 只覆寫這幾項，版式本身
   （靠右出血、白卡壓層）維持不變。
   ============================================================ */

.page-hero .figure.ov-photo{
  position:relative;overflow:hidden;padding:0;aspect-ratio:16/10;
  border-radius:var(--r-m);background:var(--bg-grey);
}
.page-hero .figure.ov-photo img{
  position:absolute;inset:0;width:100%;height:100%;max-width:none;
  margin:0;object-fit:cover;object-position:50% 42%;mix-blend-mode:normal;
}
@media(min-width:901px){
  .hero-overlay .figure.ov-fig.ov-photo{
    padding:0;aspect-ratio:auto;align-self:stretch;min-height:392px;
    border-radius:var(--r-m) 0 0 var(--r-m);background:var(--bg-grey);
  }
  .hero-overlay .figure.ov-fig.ov-photo img{
    max-width:none;mix-blend-mode:normal;
    animation:ae-h-wipe-r 1s var(--m-ease) .2s both;
  }
}

/* ============================================================
   第 35 節（R54）：幾何層
   由 Bauhaus 設計系統移植，只取三樣：形狀語言、邊界、位移手感。
   不取三原色、整段色塊背景、Outfit 中文與全大寫中文——
   這四樣與白底、章節主色制、中文正文三項既定前提衝突。
   ------------------------------------------------------------ */

:root{
  --font-num:'Outfit',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --rule:2.5px;                 /* 幾何層統一線寬 */
  --gk-line:rgba(45,45,45,.88); /* 邊框色：深灰，不是純黑 */
}

/* ---- 35.1 幾何編號：圓形／方形／45°菱形／水滴 ---- */
.gk{
  flex:none;display:grid;place-items:center;
  width:var(--gk-size,44px);height:var(--gk-size,44px);
  font-family:var(--font-num);font-weight:700;font-size:var(--gk-fs,17px);
  line-height:1;color:var(--c,var(--ae-blue));background:#fff;
  border:var(--rule) solid var(--gk-line);
}
.gk-c{border-radius:50%}
.gk-b{border-radius:0}
.gk-d{border-radius:0;transform:rotate(45deg)}
.gk-d > *{display:block;transform:rotate(-45deg)}
.gk-h{border-radius:50% 50% 50% 0}
.gk-sm{--gk-size:26px;--gk-fs:12px;border-width:2px}

/* ---- 35.2 硬邊位移陰影：卡片由柔和擴散改為有方向的實邊 ---- */
.hub,.aud-tab,.art-card,.f-card{
  border-radius:var(--r-s);
  box-shadow:4px 4px 0 rgba(45,93,161,.16);
}
@supports (color:color-mix(in srgb,red,blue)){
  .hub,.aud-tab,.art-card,.f-card{box-shadow:4px 4px 0 color-mix(in srgb,var(--c,var(--ae-blue)) 20%,transparent)}
}
@media(hover:hover){
  .hub:hover,.aud-tab:hover,.f-card:hover{
    transform:translate(-2px,-2px);
    box-shadow:7px 7px 0 rgba(45,93,161,.22);
  }
  @supports (color:color-mix(in srgb,red,blue)){
    .hub:hover,.aud-tab:hover,.f-card:hover{box-shadow:7px 7px 0 color-mix(in srgb,var(--c,var(--ae-blue)) 26%,transparent)}
  }
}
.hub:active,.aud-tab:active,.f-card:active{
  transform:translate(2px,2px);box-shadow:0 0 0 rgba(45,93,161,0);
  transition-duration:var(--t-press);
}
/* 展開中的分頁鈕已填滿主色，陰影改用同色實邊，維持選中狀態的份量 */
.aud-tab[aria-expanded="true"]{border-radius:var(--r-s)}
.aud-tab[aria-expanded="true"]:active{transform:translateY(-4px) translate(2px,2px)}

/* ---- 35.3 卡片角落的分類角標 ---- */
.hub,.aud-tab{position:relative}
.hub[data-mark]::after,.aud-tab[data-mark]::after{
  content:'';position:absolute;right:14px;top:14px;z-index:2;
  width:13px;height:13px;background:var(--c,var(--ae-blue));opacity:.9;
  transition:transform var(--t-fast) var(--ease);
}
.hub[data-mark="circle"]::after,.aud-tab[data-mark="circle"]::after{border-radius:50%}
.hub[data-mark="square"]::after,.aud-tab[data-mark="square"]::after{border-radius:0}
.hub[data-mark="diamond"]::after,.aud-tab[data-mark="diamond"]::after{transform:rotate(45deg)}
.hub[data-mark="drop"]::after,.aud-tab[data-mark="drop"]::after{border-radius:50% 50% 50% 0}
/* 對象卡的角標壓在插圖上，需要一圈白邊才看得清楚 */
.aud-tab[data-mark]::after{background:var(--c);box-shadow:0 0 0 2.5px rgba(255,255,255,.95)}
.aud-tab[aria-expanded="true"][data-mark]::after{background:#fff;box-shadow:none}
@media(hover:hover){
  .hub[data-mark]:hover::after{transform:scale(1.25)}
  .hub[data-mark="diamond"]:hover::after{transform:rotate(45deg) scale(1.25)}
}

/* ---- 35.4 粗線串連的步驟流程 ---- */
.flowline{
  list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--s5);margin-top:var(--s7);
}
.fl-step{position:relative}
.fl-step:not(:last-child)::before{
  content:'';position:absolute;left:44px;right:calc(-1 * var(--s5));top:calc(22px - var(--rule) / 2);
  height:var(--rule);background:var(--gk-line);
}
.fl-node{position:relative;z-index:1;margin-bottom:var(--s4)}
.fl-step h3{font-size:17px;margin-bottom:var(--s2);line-height:1.5}
.fl-step p{font-size:14.5px;color:var(--text-2);line-height:1.8}
.fl-step .fl-out{
  display:block;margin-top:var(--s3);padding-top:var(--s3);
  border-top:1px solid var(--line);font-size:13px;color:var(--text-3);
}
.fl-step .fl-out b{color:var(--c);font-weight:600}
@media(max-width:900px){
  .flowline{grid-template-columns:1fr;gap:var(--s6)}
  /* 左邊留 10px，讓 45° 菱形節點旋轉後的左角不會超出版面 */
  .fl-step{padding-left:74px}
  .fl-node{position:absolute;left:10px;top:0;margin-bottom:0}
  .fl-step:not(:last-child)::before{
    left:calc(32px - var(--rule) / 2);right:auto;top:44px;
    bottom:calc(-1 * var(--s6));width:var(--rule);height:auto;
  }
}

/* ---- 35.5 粗線分隔的數字條 ---- */
.statbar{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:var(--rule) solid var(--gk-line);
  border-bottom:var(--rule) solid var(--gk-line);
  margin-top:var(--s7);
}
.stat{padding:var(--s5) var(--s5) var(--s5) 0;border-right:var(--rule) solid var(--gk-line)}
.stat:last-child{border-right:none;padding-right:0}
.stat:not(:first-child){padding-left:var(--s5)}
.stat .gk{margin-bottom:var(--s3)}
.stat .n{
  display:block;font-family:var(--font-num);font-weight:700;
  font-size:clamp(30px,3.4vw,42px);line-height:1.05;letter-spacing:-.02em;
  color:var(--heading);font-variant-numeric:tabular-nums;
}
.stat .n[data-pending]{color:rgba(45,45,45,.26);letter-spacing:0}
.stat .l{display:block;margin-top:6px;font-size:13.5px;line-height:1.65;color:var(--text-3)}
.statbar-note{margin-top:var(--s4);font-size:13px;line-height:1.75;color:var(--text-3)}
@media(max-width:820px){
  .statbar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat{padding:var(--s5) var(--s4)!important;border-bottom:var(--rule) solid var(--gk-line)}
  .stat:nth-child(even){border-right:none}
  .stat:nth-child(n+3){border-bottom:none}
  .stat:nth-child(odd){padding-left:0!important}
}

/* ---- 35.6 圖片的二元圓角：內容圖直角、人像全圓 ---- */
.hs-item,.page-hero .figure.ov-photo,.cs-shot,.work-shot{border-radius:0}
@media(min-width:901px){
  .hero-overlay .figure.ov-fig.ov-photo{border-radius:0}
}
.avatar-round{
  border-radius:50%;border:var(--rule) solid var(--gk-line);
  object-fit:cover;background:var(--bg-grey);
}

/* ---- 35.7 開場英文小標：加粗、拉開字距、橫線加厚 ---- */
.page-hero .eyebrow{font-weight:600;letter-spacing:.22em;font-size:11.5px}
.page-hero .eyebrow::before{height:var(--rule);width:22px;opacity:1;border-radius:0}

/* ---- 35.8 案例階段軸：節點換上同一套幾何形狀 ---- */
.cs-step{border-radius:var(--r-s)}
.cs-step .gk{margin-bottom:var(--s3)}

/* ---- 35.9 減少動態偏好：位移全部取消，只保留邊界與顏色 ---- */
@media(prefers-reduced-motion:reduce){
  .hub:hover,.aud-tab:hover,.f-card:hover,
  .hub:active,.aud-tab:active,.f-card:active{transform:none!important}
  .hub[data-mark]:hover::after{transform:none!important}
  .hub[data-mark="diamond"]:hover::after{transform:rotate(45deg)!important}
}

/* ---- 35.10 案例階段軸的編號：用 ::before 畫形狀，文字不隨旋轉 ---- */
.cs-step .no{
  position:relative;isolation:isolate;display:grid;place-items:center;
  width:34px;height:34px;margin-bottom:var(--s3);
  font-family:var(--font-num);font-weight:700;font-size:13px;letter-spacing:0;
  color:var(--c);background:none;border:none;
}
.cs-step .no::before{
  content:'';position:absolute;inset:0;z-index:-1;
  border:2px solid var(--gk-line);background:#fff;
}
.cs-steps > .cs-step:nth-child(2) .no::before{border-radius:50%}
.cs-steps > .cs-step:nth-child(3) .no::before{border-radius:0}
.cs-steps > .cs-step:nth-child(4) .no::before{border-radius:0;transform:rotate(45deg)}
.cs-steps > .cs-step:nth-child(5) .no::before{border-radius:50% 50% 50% 0}
/* 「下一步」仍未交付：邊框改虛線，與實心節點區分 */
.cs-step.next .no::before{border-style:dashed;border-color:rgba(45,45,45,.45)}


/* ==========================================================
   36. 硬邊層（R55）
   參考來源的真正質感，不在於用了圓形或方形，而在於：
   （一）每一段換一次底色，實色整段鋪滿；
   （二）粗黑框加上零模糊的實心位移陰影；
   （三）標題超大超粗，字級對比拉到極端；
   （四）裝飾幾何被邊界裁走一半，形成溢出感；
   （五）重點用實色方塊打底，而不是淡色半高底線；
   （六）圖片二元處理，直角或有機曲線，一律加黑框；
   （七）細節顏色編碼，日期與職銜用主色。
   本節刻意排在最後，用來覆寫前面較柔和的陰影與膠囊按鈕。
   ========================================================== */
:root{
  --hard:#2D2D2D;
  --hard-w:2.5px;
  --hard-off:6px;
  --hard-off-h:9px;
  /* 陰影不再用純黑：靜止時走品牌深藍，按下去統一收成同一支藍，
     邊框保持黑色，硬邊質感不變，但整版不會再一片死黑。 */
  --sh:#16304F;
  --sh-press:#2D5DA1;
}

/* ---- 36.1 卡片：粗黑框 + 零模糊實心位移陰影（陰影走主色深階） ---- */
.hub,.art-card,.f-card,.aud-tab,.card,.cs-step{
  --sh:color-mix(in srgb,var(--c,#2D5DA1) 70%,#0F1D30);
  border:var(--hard-w) solid var(--hard);
  border-radius:0;
  box-shadow:var(--hard-off) var(--hard-off) 0 var(--sh);
}
.hub:hover,.art-card:hover,.f-card:hover,.aud-tab:hover,.card:hover{
  transform:translate(-3px,-3px);
  border-color:var(--hard);
  box-shadow:var(--hard-off-h) var(--hard-off-h) 0 var(--sh);
}
.hub:active,.f-card:active,.aud-tab:active,.card:active{
  transform:translate(2px,2px);
  box-shadow:3px 3px 0 var(--sh-press);
  transition-duration:var(--t-press);
}
/* 未交付的階段仍然用虛線，與已完成的實線區分 */
.cs-step.next{border-style:dashed;border-color:rgba(45,45,45,.5);box-shadow:none}

/* ---- 36.2 章節主色由頂邊粗色帶帶出 ---- */
.hub,.f-card{border-top:7px solid var(--c)}
.aud-tab{border-top:7px solid var(--c)}
.art-card{border-left:7px solid var(--c)}

/* ---- 36.3 標題加大加粗，字級對比拉開 ---- */
.sec-title{
  font-size:clamp(30px,3.7vw,46px);font-weight:700;
  letter-spacing:-.015em;line-height:1.22;
}
.page-hero h1{
  font-size:clamp(36px,5vw,62px);font-weight:700;
  letter-spacing:-.022em;line-height:1.14;
}
.cta-band h2{font-size:clamp(28px,3.7vw,44px);font-weight:700;letter-spacing:-.015em}
/* 導語左邊一條主色粗豎線，把視線由標題引落正文 */
.page-hero .lead{
  border-left:5px solid var(--accent);
  padding-left:var(--s5);
}
.sec-lead{font-size:17px}

/* ---- 36.4 按鈕：直角、黑框、實心位移陰影（陰影走該按鈕自己的深階色） ---- */
.btn-coral,.btn-blue,.btn-ghost{
  border-radius:3px;
  border:var(--hard-w) solid var(--hard);
  box-shadow:5px 5px 0 var(--sh);
  font-weight:700;
}
.btn-coral{--sh:#7E2E1B}
.btn-blue{--sh:#16304F}
.btn-ghost{--sh:#16304F;color:var(--ink)}
.btn-coral:hover,.btn-blue:hover,.btn-ghost:hover{
  transform:translate(-2px,-2px);
  box-shadow:7px 7px 0 var(--sh);
}
/* 按下去一律收成品牌藍，讓「壓落去」這一下有明確的顏色回饋 */
.btn-coral:active,.btn-blue:active,.btn-ghost:active{
  transform:translate(3px,3px);
  box-shadow:2px 2px 0 var(--sh-press);
  transition-duration:var(--t-press);
}
.btn-coral::after,.btn-blue::after{border-radius:0;background:rgba(255,255,255,.24)}
.nav-cta{
  --sh:#16304F;
  border-radius:3px;
  border:2px solid var(--hard);
  box-shadow:4px 4px 0 var(--sh);
}
.nav-cta:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--sh)}
.nav-cta:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--sh-press)}
/* 深色帶上的按鈕：黑影看不見，改用白框加深色影 */
.cta-band .btn-ghost{border-color:#fff;color:#fff;box-shadow:5px 5px 0 rgba(0,0,0,.45)}
.cta-band .btn-ghost:hover{box-shadow:7px 7px 0 rgba(0,0,0,.45)}

/* ---- 36.5 重點字：由半高淡底改成全高實色方塊 ---- */
.mk{
  --mk-bg:color-mix(in srgb,var(--c,#2D5DA1) 30%,transparent);
  background-position:0 92%;
  background-size:100% 1.05em;
  padding:.04em .24em;
}
.reveal .mk{background-size:0 1.05em}
.reveal.visible .mk{background-size:100% 1.05em}
@media(prefers-reduced-motion:reduce){
  .mk,.reveal .mk{background-size:100% 1.05em !important}
}

/* ---- 36.6 實色整段鋪滿：段與段之間換底色，這才是節奏的來源 ---- */
.band-solid{background:var(--band,var(--blue-deep));color:rgba(255,255,255,.82)}
.band-solid .sec-title,.band-solid h2,.band-solid h3,.band-solid h4{color:#fff}
.band-solid .sec-lead,.band-solid .lead,.band-solid .prose p,
.band-solid figcaption,.band-solid li{color:rgba(255,255,255,.84)}
.band-solid .prose p b.kw,.band-solid .kw{color:#fff}
.band-solid .mk{--mk-bg:rgba(255,255,255,.26);color:#fff}
.band-solid .sec-fig img,.band-solid figure img{
  border:var(--hard-w) solid var(--hard);border-radius:0;
}
.band-solid .sc-im,.band-solid .wk-im{
  border:var(--hard-w) solid var(--hard);border-radius:0;box-shadow:none;
}
.band-solid .sc-im img,.band-solid .wk-im img{border:none;border-radius:0}
.band-solid .cs-spine{background:rgba(255,255,255,.4)}
.band-solid .cs-step,.band-solid .cs-step p{color:var(--text-2)}
.band-solid .cs-step h3,.band-solid .cs-step .no{color:var(--heading)}
.band-solid .eyebrow{color:#fff}
.band-solid .card,.band-solid .art-card,.band-solid .hub,.band-solid .f-card{
  background:#fff;
}
.band-solid .card h3,.band-solid .art-card h3,.band-solid .hub h3{color:var(--heading)}
.band-solid .card p,.band-solid .art-card p,.band-solid .hub p{color:var(--text-2)}
.band-ink{--band:var(--blue-deep)}
.band-blue{--band:#2D5DA1}
.band-coral{--band:#C4573C}
.band-purple{--band:#7A3184}
.band-rose{--band:#9E3F63}

/* ---- 36.7 段落之間的硬邊界線 ---- */
.page-hero{border-bottom:var(--hard-w) solid var(--hard)}
.sec-grey{border-top:var(--hard-w) solid var(--hard);border-bottom:var(--hard-w) solid var(--hard)}
.band-solid{border-top:var(--hard-w) solid var(--hard);border-bottom:var(--hard-w) solid var(--hard)}

/* ---- 36.8 首屏裝飾幾何：被邊界裁走一半，每頁位置與形狀都不同 ---- */
.page-hero{position:relative;overflow:hidden}
.page-hero > .inner,.page-hero > *{position:relative;z-index:1}
.page-hero::before,.page-hero::after{
  content:'';position:absolute;pointer-events:none;z-index:0;
}
/* 服務總覽：左上角被裁走四分三的圓 */
.hero-rule::before{
  width:190px;height:190px;left:-95px;top:56px;
  border-radius:50%;background:rgba(212,101,74,.22);
}
.hero-rule::after{
  width:34px;height:34px;right:8%;bottom:26px;
  background:var(--coral);
}
/* 服務對象：右上角被裁一半的菱形 */
.hero-offset::before{
  width:230px;height:230px;right:-90px;top:-40px;
  transform:rotate(45deg);background:rgba(139,58,150,.18);
}
.hero-offset::after{
  width:30px;height:30px;left:6%;bottom:22px;
  border-radius:50%;background:var(--ae-purple);
}
/* 案例：右邊一個被裁一半的半圓 */
.hero-overlay::before{
  width:260px;height:260px;right:-130px;top:38%;
  border-radius:50%;background:rgba(45,93,161,.18);
}
.hero-overlay::after{
  width:120px;height:var(--hard-w);left:0;bottom:34px;
  background:var(--ae-blue);
}
/* 專欄：左邊界一條被裁走的粗直帶，配一顆貼底的實色方塊 */
.hero-center::before{
  width:150px;height:150px;left:-78px;bottom:-52px;
  transform:rotate(45deg);background:rgba(176,72,114,.2);
}
.hero-center::after{
  width:26px;height:26px;left:calc(50% - 13px);bottom:-13px;
  transform:rotate(45deg);background:var(--rose);
}
/* 關於我們：右上角一個被裁走一半的大圓 */
.hero-statement::before{
  width:300px;height:300px;right:-120px;top:-90px;
  border-radius:50%;background:rgba(45,93,161,.14);
}
.hero-statement::after{
  width:66px;height:66px;left:-24px;bottom:-24px;
  background:var(--coral);
}
/* 消息與文章：右下角一個被裁走的大圓，加一顆懸空菱形 */
.page-hero.solo:not(.hero-statement)::before{
  width:210px;height:210px;right:-85px;bottom:-75px;
  border-radius:50%;background:rgba(45,93,161,.13);
}
.page-hero.solo:not(.hero-statement)::after{
  width:28px;height:28px;right:11%;top:54%;
  transform:rotate(45deg);background:rgba(212,101,74,.5);
}
@media(max-width:820px){
  .page-hero::before,.page-hero::after{opacity:.75}
  .hero-rule::after,.hero-offset::after,.hero-statement::after{display:none}
}

/* ---- 36.9 圖片：黑框，內容圖直角、人像有機曲線 ---- */
.aud-tab .th img,.art-card img{border-radius:0}
.wk-im,.sc-im{border:var(--hard-w) solid var(--hard);border-radius:0;box-shadow:none}
.wk-im img,.sc-im img{border-radius:0}
.wk figcaption b{font-weight:700}

/* ---- 36.10 顏色編碼細節：日期、職銜、標籤走主色 ---- */
.art-card .meta,.art-card time{color:var(--c)}

/* ---- 36.11 數字條：粗線改成黑實線，數字再放大 ---- */
.statbar{border-top-color:var(--hard);border-bottom-color:var(--hard);border-top-width:3px;border-bottom-width:3px}
.stat{border-right-color:var(--hard)}
.stat .n{font-size:clamp(34px,4vw,52px);letter-spacing:-.03em}
.stat .l{color:var(--text-2);font-weight:600;letter-spacing:.02em}

/* ---- 36.12 減少動態偏好：位移全部取消 ---- */
@media(prefers-reduced-motion:reduce){
  .hub:hover,.art-card:hover,.f-card:hover,.aud-tab:hover,.card:hover,
  .btn-coral:hover,.btn-blue:hover,.btn-ghost:hover,.nav-cta:hover{transform:none!important}
}

/* ---- 36.13 草稿數字的標示：黃色實色方塊，確認後整段刪走 ---- */
.stat .n[data-draft]{color:var(--heading)}
.dr{
  display:inline-block;font-style:normal;font-size:10.5px;font-weight:700;
  letter-spacing:.08em;line-height:1;padding:3px 5px;margin-left:4px;
  background:#F2C230;color:var(--ink);border:1.5px solid var(--hard);
  vertical-align:middle;
}
.statbar-note b{color:var(--ink);font-weight:700}

/* ==========================================================
   37. 圖片自動輪換（R56）
   一格之內放兩張以上的圖，隔幾秒淡入淡出換一張。
   左下角的方塊可以直接按，滑鼠停在上面會暫停，
   捲出畫面之外會停下來，開了減少動態偏好就完全不換。
   ========================================================== */
.xfade{
  --sh:#16304F;
  position:relative;display:grid;
  aspect-ratio:4/3;
  background:#fff;overflow:hidden;
  border:var(--hard-w) solid var(--hard);
  box-shadow:var(--hard-off) var(--hard-off) 0 var(--sh);
}
.xfade>figure{
  grid-area:1/1;margin:0;padding:0;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .7s var(--ease);
}
.xfade>figure.on{opacity:1}
.xfade img{
  width:100%;height:100%;display:block;
  object-fit:contain;background:#fff;
  max-width:none;border:0;border-radius:0;box-shadow:none;
}
/* 換圖的圓點改成方塊，跟整體硬邊語言一致 */
.xfade-dots{position:absolute;left:12px;bottom:12px;display:flex;gap:7px;z-index:2}
.xfade-dots b{
  width:12px;height:12px;display:block;padding:0;
  background:#fff;border:2px solid var(--hard);cursor:pointer;
  transition:background var(--t-fast) var(--ease);
}
.xfade-dots b.on{background:var(--c,var(--ae-blue))}
.xfade-dots b:focus-visible{outline:2px solid var(--ae-blue);outline-offset:2px}
/* 進場動畫交回外層容器負責，避免與淡入淡出打架 */
.aud-panel .xfade{opacity:0;transform:translateY(14px);
  transition:opacity var(--t-reveal) var(--ease),transform var(--t-reveal) var(--ease);
  transition-delay:.16s}
.aud-panel[data-open] .xfade{opacity:1;transform:none}
.aud-panel .xfade>figure,.aud-panel[data-open] .xfade>figure{
  transform:none;transition-delay:0s;opacity:0}
.aud-panel .xfade>figure.on,.aud-panel[data-open] .xfade>figure.on{opacity:1}
@media(max-width:820px){
  .xfade{aspect-ratio:3/2}
}
@media(prefers-reduced-motion:reduce){
  .xfade>figure{transition:none}
  .aud-panel .xfade{opacity:1;transform:none;transition:none}
}

/* ==========================================================
   38. 使用感受引述（R56）
   實色整段鋪滿之上放白色引述卡：粗黑框、零模糊位移陰影、
   卡頂一個實色大引號。三張卡等高，署名在底部靠齊。
   ========================================================== */
.vo-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--s5);margin-top:var(--s7);
}
.vo{
  --sh:#0C1B2E;
  margin:0;display:flex;flex-direction:column;gap:var(--s4);
  background:#fff;color:var(--ink);
  padding:var(--s6) var(--s5) var(--s5);
  border:var(--hard-w) solid var(--hard);
  border-top:7px solid var(--c,var(--ae-blue));
  box-shadow:var(--hard-off) var(--hard-off) 0 var(--sh);
  position:relative;
}
.vo::before{
  content:'“';position:absolute;top:-6px;left:var(--s5);
  font-family:var(--serif-en);font-size:76px;line-height:1;font-weight:700;
  color:var(--c,var(--ae-blue));
}
.vo blockquote{
  margin:var(--s5) 0 0;font-size:16.5px;line-height:1.85;
  color:var(--ink);
}
.vo figcaption{
  margin-top:auto;padding-top:var(--s4);
  border-top:2px solid var(--hard);
  display:flex;flex-direction:column;gap:2px;
}
.band-solid .vo figcaption{color:var(--ink)}
.vo figcaption b{font-weight:700;font-size:14px;color:var(--ink)}
.vo figcaption span{font-size:13px;color:var(--text-3)}
.vo:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--sh)}
.vo{transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
#voices .evidence{margin-top:var(--s7)}
.band-solid .evidence{
  background:rgba(255,255,255,.08);
  border:2px solid rgba(255,255,255,.34);
  border-radius:0;
  color:rgba(255,255,255,.88);
}
.band-solid .evidence b{color:#fff}
.band-solid .evidence p{color:rgba(255,255,255,.84)}
@media(max-width:900px){
  .vo-grid{grid-template-columns:1fr;gap:var(--s6)}
}
@media(prefers-reduced-motion:reduce){
  .vo,.vo:hover{transition:none;transform:none}
}

/* ==========================================================
   39. 適合／不適合對照（R56，服務頁）
   實色藍底之上放兩張白卡：粗黑框、零模糊位移陰影。
   左卡頂帶黃色、右卡頂帶珊瑚色，項目符號用實色方塊，
   跟整站的硬邊語言一致，也讓「可以／不可以」一眼分得開。
   ========================================================== */
.fit-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s6);margin-top:var(--s7);
}
.fit-col{
  --sh:#0C1B2E;
  background:#fff;color:var(--ink);
  padding:var(--s6) var(--s5) var(--s5);
  border:var(--hard-w) solid var(--hard);
  box-shadow:var(--hard-off) var(--hard-off) 0 var(--sh);
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.fit-col.yes{border-top:7px solid #F2C230}
.fit-col.no{border-top:7px solid var(--coral)}
.fit-col:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--sh)}
.fit-col h3,.band-solid .fit-col h3{
  display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  margin:0 0 var(--s5);font-size:20px;color:var(--ink);
}
.fit-badge{
  display:inline-block;padding:3px 11px;
  font-weight:700;font-size:13.5px;letter-spacing:.06em;
  border:2px solid var(--hard);color:var(--ink);
}
.fit-col.yes .fit-badge{background:#F2C230}
.fit-col.no .fit-badge{background:var(--coral);color:#fff}
.fit-col ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:var(--s4);
}
.fit-col li,.band-solid .fit-col li{
  position:relative;padding-left:38px;
  font-size:15.5px;line-height:1.85;color:var(--text-2);
}
.fit-col li::before{
  content:'';position:absolute;left:0;top:6px;
  width:22px;height:22px;border:2px solid var(--hard);
}
.fit-col li::after{
  position:absolute;left:0;top:6px;width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;line-height:1;
}
.fit-col.yes li::before{background:#F2C230}
.fit-col.yes li::after{content:'✓';color:var(--ink)}
.fit-col.no li::before{background:var(--coral)}
.fit-col.no li::after{content:'✕';color:#fff}
.fit-foot{
  margin-top:var(--s6);max-width:var(--text-w);
  font-size:15px;line-height:1.9;color:rgba(255,255,255,.86);
}
.fit-foot b{color:#fff}
@media(max-width:900px){
  .fit-grid{grid-template-columns:1fr;gap:var(--s7)}
}
@media(prefers-reduced-motion:reduce){
  .fit-col,.fit-col:hover{transition:none;transform:none}
}


/* ==========================================================
   R62. 案例頁動效層（Lawrence 2026-08-03：「太過單調」，
   參考 amicro.vercel.app 嘅彈簧式微互動）
   全部 selector 鎖死喺 .cs／#works／#voices，其他頁零影響。
   ========================================================== */
/* ── 學生作品三張相：入場時似一疊卡散開（card spread），彈簧 easing 帶少少過衝 ── */
#works .wk.reveal{transition:opacity .6s var(--m-ease),transform .85s cubic-bezier(.3,1.45,.45,1)}
#works .wk.wide.reveal:not(.visible){transform:translateY(44px) rotate(-1.5deg)}
#works .wk.reveal:nth-child(2):not(.visible){transform:translate(-56px,56px) rotate(3.5deg)}
#works .wk.reveal:nth-child(3):not(.visible){transform:translate(56px,56px) rotate(-3.5deg)}
/* hover：成張相微微托起，硬影加深（郁 container 唔郁 img，避開入場 clip-path 嘅慢 transition） */
#works .wk .wk-im{transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
@media(hover:hover){
  #works .wk:hover .wk-im{transform:translate(-4px,-4px) rotate(-.5deg);box-shadow:8px 8px 0 var(--sh)}
}
/* ── 使用感受卡：帶旋轉嘅彈簧入場＋引號 pop ── */
#voices .vo.reveal{transition:opacity .55s var(--m-ease),
  transform .75s cubic-bezier(.3,1.45,.45,1),
  box-shadow var(--t-fast) var(--ease)}
#voices .vo.reveal:not(.visible){transform:translateY(36px) rotate(2deg) scale(.97)}
#voices .vo::before{transition:transform .5s cubic-bezier(.3,1.6,.5,1) .25s}
#voices .vo.reveal:not(.visible)::before{transform:scale(0)}
/* ── 階段卡：hover 托起＋編號字距拉開（micro morph）
      入場 stagger 行 transform／opacity（.55s + --d 延遲，原有機制），
      hover 行獨立嘅 translate 屬性（快速 .2s），兩者互不干涉。 ── */
.cs .cs-step{transition:opacity .55s var(--m-ease) var(--d),transform .55s var(--m-ease) var(--d),
  translate var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.cs .cs-step .no{transition:letter-spacing var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
@media(hover:hover){
  .cs .cs-step:hover{translate:-3px -3px;box-shadow:6px 6px 0 var(--sh)}
  .cs .cs-step:hover .no{letter-spacing:.24em}
}
/* ── 「進行中」狀態粒：脈搏提示仲有嘢喺度郁 ── */
@media(prefers-reduced-motion:no-preference){
  .cs .status.wip::before{animation:wippulse 1.7s ease-in-out infinite}
  @keyframes wippulse{0%,100%{opacity:.35;transform:rotate(45deg) scale(.8)}50%{opacity:1;transform:rotate(45deg) scale(1.05)}}
}
/* ── 案例頁尾連結：hover 向右滑（arrow morph 嘅簡化版） ── */
.cs .cs-foot a,#works .cs-foot a{display:inline-block;
  transition:transform var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
@media(hover:hover){.cs .cs-foot a:hover,#works .cs-foot a:hover{transform:translateX(4px)}}

/* ==========================================================
   R63. 全站一致性補完（Lawrence 2026-08-05：「檢查埋其他頁面／
   手機版仲有啲乜要執」）。R36 硬邊層只覆蓋 .hub/.art-card/.f-card/
   .aud-tab/.card/.cs-step，其餘卡片、面板與圖片仍留住舊版 16px 圓角
   與 1px 淡框，令首頁（硬邊）同內頁（圓角）一入去就兩種語言。
   本節把漏網的元件一併收入硬邊語言，並處理手機觸控與字級下限。
   ========================================================== */

/* ---- 63.1 卡片與面板：圓角歸零、粗黑框、零模糊實心位移陰影 ---- */
.res-card,.tm,.empty,.f-skel,.pbody,.art-feature,.aud-entry{
  border-radius:0;
  border:var(--hard-w) solid var(--hard);
  box-shadow:var(--hard-off) var(--hard-off) 0 var(--sh);
}
/* 面板與虛位卡本來就係「未定案」語氣，維持虛線但收直角 */
.f-skel{border-style:dashed;border-color:rgba(45,93,161,.5);box-shadow:none}
.empty{border-style:dashed;border-color:rgba(45,45,45,.34);box-shadow:none;background:var(--bg-grey)}
.evidence{border-radius:0;border-width:2px;border-color:rgba(45,93,161,.45)}
.res-card{--sh:color-mix(in srgb,var(--c,#2D5DA1) 70%,#0F1D30)}
.aud-entry{--sh:color-mix(in srgb,var(--c,#2D5DA1) 70%,#0F1D30)}
/* 卡內分隔線同步加深，1px 淡線在粗框旁邊會散 */
.res-preview{border-right-width:2px;border-right-color:var(--hard)}
@media(max-width:900px){
  .res-preview{border-bottom-width:2px;border-bottom-color:var(--hard)}
}
@media(hover:hover){
  .res-card:hover,.aud-entry:hover{
    transform:translate(-3px,-3px);
    box-shadow:var(--hard-off-h) var(--hard-off-h) 0 var(--sh);
  }
}

/* ---- 63.2 圖片一律直角加黑框（R36 第六條：圖片二元處理，一律加黑框） ---- */
.sec-fig img,.svc-fig img,.chap-fig img,.chap-fig svg,.pfig img,.pip img,
.art-feature .cover,.ill-paper,.aud-entry .ill,.tm .ph{
  border-radius:0;
}
.sec-fig img,.svc-fig img,.chap-fig img,.pfig img{
  border:var(--hard-w) solid var(--hard);
}
.art-feature .cover,.aud-entry .ill{border:2px solid var(--hard)}
.ill-paper{border:2px solid rgba(45,93,161,.5)}
/* 頭像維持圓形——圓形係人像慣例，唔屬於「圓角卡片」問題 */
.tm .ph{border-radius:50%;border:2px solid var(--hard)}
.pip img{border:var(--hard-w) solid var(--hard);border-radius:0}
.pip,.f-bar,.f-bar .f-pill,.res-preview.placeholder{border-radius:0}

/* ---- 63.3 手機觸控目標：Apple HIG 最少 44px ---- */
@media(max-width:900px){
  .footer-col a{min-height:44px;display:flex;align-items:center;padding:0}
  .footer-col a::after{bottom:11px}
  .footer-social a{min-width:44px;min-height:44px;display:inline-grid;place-items:center}
  .jump a,.chip,.f-btn,.f-pill{min-height:44px;display:inline-flex;align-items:center}
  .nav-logo{min-height:44px;display:inline-flex;align-items:center}
  .cs-more,.cb-link,.cta-tpl,.cs-foot a,.go{min-height:44px;display:inline-flex;align-items:center}
  /* 輪播圓點：視覺仍然細粒，但用透明 padding 把可按範圍撐到 44px */
  .xfade-dots b{position:relative}
  .xfade-dots b::after{content:'';position:absolute;inset:-16px}
}

/* ---- 63.4 手機字級下限：正文性質嘅細字一律唔細過 12.5px ---- */
@media(max-width:900px){
  .res-spec .rk,.res-spec li{font-size:13px}
  .res-preview .pl-s{font-size:13px}
  .tm .ph .pl{font-size:12.5px}
  .cs-kicker,.cb-note,.hint,.pl-s,.dr,.f-k{font-size:12.5px}
  /* 全大寫英文小標：11px 喺手機太細，統一拉到 12px（特異性要跟返原本嘅寫法） */
  .blk > .bl,.hub .k,.news-take .bl,.cat-band .cb-label,.f-skel .lb,
  .page-hero .eyebrow,.eyebrow{font-size:12px}
  .chap-fig figcaption,.sec-fig figcaption,figure figcaption{font-size:13px}
  .status{font-size:13px}
  .footer-col .label{font-size:12px}
  .footer-copy{font-size:13px}
}

/* ---- 63.5 手機：資源卡規格表可收埋（六張卡每張都高過一屏） ---- */
@media(max-width:900px){
  .res-card.fold .res-spec li:nth-child(n+3){display:none}
  .res-spec-more{
    display:block;width:100%;margin-top:var(--s3);
    background:#fff;color:var(--ae-blue);font:inherit;font-size:13.5px;font-weight:700;
    border:2px solid var(--hard);box-shadow:3px 3px 0 var(--sh);
    min-height:44px;cursor:pointer;
  }
  .res-spec-more:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--sh-press)}
}
.res-spec-more{display:none}


/* ==========================================================
   R64. 案例頁「持續互動」層
   Lawrence 2026-08-05：「案例嗰一頁希望可以呈現到 amicro.vercel.app
   嗰啲動畫效果」。今次實地開站逐個組件拆解後，抽出四種真正用得着的手法：

     A. Card Spreads / ARC — 一疊卡靜止時收埋，指標一入就整組讓開展示
        → 用在 #works 三件學生作品（整組回應）
     B. Slide Arrow Interaction（Download for Mac）— 箭頭由左滑出、文字讓位
        → 用在 .cs-foot 六條連結（全頁最單調的位置）
     C. Time Machine Stack + scrubber — 標示「你正在看第幾步」
        → 用在 .cs-step 階段軸（節點放大、連接線畫出、其餘淡出）
     D. Morph Interaction — 元素在指標下輕微變形
        → 用在 #voices 引號與卡片

   不採用的：3D CoverFlow 輪播（需要大量相片支撐，而且透視加圓角
   與本站硬邊語言相衝，輪播亦會把案例文字收起）、Loaders（靜態頁沒有
   載入狀態）、照抄扇形排版（三張作品比例不一，強行統一會裁走繪本封面）。

   核心修正：R62 層的動效全部只在「捲到就淡入」那一刻發生一次，之後
   頁面就完全靜止——這才是「單調」的真正原因。R64 把重心由入場改為
   持續回應：指標放在哪裡，版面就有反應。
   全部 selector 鎖死在 .cs／#works／#voices，其他頁零影響；
   互動一律包在 @media(hover:hover)，觸控裝置不受影響。
   ========================================================== */

/* ---- 64.A #works 三件作品：ARC 式整組回應 ----
   指標放在其中一張時，該張升起並加深硬陰影，另外兩張向外讓開、
   縮小並淡出——等於把「一疊卡攤開」的動作交由指標即時控制。
   位移全部落在 .wk-im 容器，不碰 img 本身，避免與入場的 clip-path 相撞。 */
#works .wk .wk-im{
  /* 靜止時放一層零位移的同色陰影：看不見，但令 hover 時的硬陰影由 0 長出來，
     不會由 box-shadow:none 一格跳出（none 與有值之間無法補間）。 */
  box-shadow:0 0 0 var(--sh);
  transition:transform .26s var(--ease),box-shadow .26s var(--ease),opacity .26s var(--ease);
}
/* 同理：「下一步」階段卡原本 box-shadow:none */
.cs .cs-step.next{box-shadow:0 0 0 var(--sh)}
#works .wk figcaption{transition:opacity .26s var(--ease)}
@media(hover:hover){
  #works .wk:hover .wk-im{transform:translate(-5px,-5px) rotate(-.6deg);box-shadow:10px 10px 0 var(--sh)}
  #works .wk-grid:hover .wk:not(:hover) .wk-im{opacity:.46}
  #works .wk-grid:hover .wk:not(:hover) figcaption{opacity:.5}
  #works .wk-grid:hover .wk.wide:not(:hover) .wk-im{transform:translateY(-7px) scale(.985)}
  #works .wk-grid:hover .wk:nth-child(2):not(:hover) .wk-im{transform:translateX(-12px) rotate(-1.3deg) scale(.965)}
  #works .wk-grid:hover .wk:nth-child(3):not(:hover) .wk-im{transform:translateX(12px) rotate(1.3deg) scale(.965)}
}

/* ---- 64.B .cs-foot 連結：Slide Arrow Interaction ----
   靜止時只有文字；指標一入，箭頭由左邊推出來把文字往右頂，
   同時底線由左掃到右。原本的 border-bottom 只是瞬間變色，改為掃出。 */
.cs .cs-foot a,#works .cs-foot a{
  position:relative;display:inline-flex;align-items:center;
  transition:transform var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.cs .cs-foot a::before,#works .cs-foot a::before{
  content:'\2192';flex:none;width:0;margin-right:0;
  opacity:0;overflow:hidden;transform:translateX(-8px);
  transition:width .24s var(--ease),margin-right .24s var(--ease),
             opacity .24s var(--ease),transform .24s var(--ease);
}
.cs .cs-foot a::after,#works .cs-foot a::after{
  content:'';position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:currentColor;transform:scaleX(0);transform-origin:left center;
  transition:transform .3s var(--glide);
}
@media(hover:hover){
  .cs .cs-foot a:hover,#works .cs-foot a:hover{transform:translateX(3px);border-bottom-color:transparent}
  .cs .cs-foot a:hover::before,#works .cs-foot a:hover::before{
    width:1em;margin-right:7px;opacity:1;transform:translateX(0);
  }
  .cs .cs-foot a:hover::after,#works .cs-foot a:hover::after{transform:scaleX(1)}
}
/* 觸控裝置沒有 hover，箭頭改為常駐，連結仍然一眼看得出可按 */
@media(hover:none){
  .cs .cs-foot a::before,#works .cs-foot a::before{width:1em;margin-right:7px;opacity:.75;transform:none}
}

/* ---- 64.C .cs-step 階段軸：Time Machine 式「你正在看這一步」 ----
   指標停在某一步：該步向右推出、節點放大並加一圈實色光環、
   由節點畫一條短連接線到卡片，其餘各步淡出 50%。
   入場 stagger 用 transform／opacity（原有機制，帶 --d 延遲）；
   hover 用獨立的 translate 屬性（快速 .2s），兩條時間線互不干涉。 */
.cs .cs-step{
  transition:opacity .55s var(--m-ease) var(--d),transform .55s var(--m-ease) var(--d),
             translate var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease);
}
.cs .cs-step .no{transition:letter-spacing var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
/* 節點與卡片之間的連接線：靜止時收埋為零闊度 */
.cs .cs-step::after{
  content:'';position:absolute;left:-18px;top:calc(var(--s5) + 12px);
  width:18px;height:2px;background:var(--c);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .26s var(--glide);
}
@media(hover:hover){
  /* 入場完成之後，整組改用快速 transition，令淡出／復原即時跟到指標 */
  .cs .cs-steps:not(.csd-on):hover .cs-step{
    transition:opacity .22s var(--ease),translate var(--t-fast) var(--ease),
               box-shadow var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
  }
  .cs .cs-steps:not(.csd-on):hover .cs-step:not(:hover){opacity:.5}
  .cs .cs-steps:not(.csd-on):hover .cs-step:hover{opacity:1}
  .cs .cs-step:hover{translate:4px -3px;box-shadow:7px 7px 0 var(--sh)}
  .cs .cs-step:hover .no{letter-spacing:.24em}
  .cs .cs-step:hover::after{transform:scaleX(1)}
  /* 節點：放大並加一圈零模糊實色光環（維持硬邊語言，不用柔影） */
  .cs .cs-steps:not(.csd-on):hover .cs-step::before{
    transition:transform .24s cubic-bezier(.34,1.56,.64,1),box-shadow .24s var(--ease);
  }
  .cs .cs-step:hover::before{transform:scale(1.32);box-shadow:0 0 0 4px rgba(45,45,45,.12)}
}
@media(max-width:900px){
  .cs .cs-step::after{left:-13px;width:13px;top:calc(var(--s5) + 10px)}
}

/* ---- 64.D #voices 引述卡：Morph Interaction ----
   指標一入，大引號放大並輕微轉角、卡片托起。
   R62 把 .vo 的 transform 綁死在 .75s 彈簧入場，令 hover 托起變得拖沓；
   這裡把 hover 改用獨立的 translate 屬性，回復 .2s 的即時感。 */
#voices .vo{
  transition:opacity .55s var(--m-ease),transform .75s cubic-bezier(.3,1.45,.45,1),
             translate var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
#voices .vo::before{transform-origin:left bottom}
@media(hover:hover){
  #voices .vo:hover{transform:none;translate:-4px -4px;box-shadow:11px 11px 0 var(--sh)}
  #voices .vo:hover::before{
    transition:transform .3s cubic-bezier(.34,1.56,.64,1);
    transform:scale(1.18) rotate(-6deg);
  }
}

/* ---- 64.E 減少動態偏好：以上全部停用，只保留顏色與陰影變化 ---- */
@media(prefers-reduced-motion:reduce){
  #works .wk .wk-im,#works .wk figcaption,
  .cs .cs-foot a,.cs .cs-foot a::before,.cs .cs-foot a::after,
  #works .cs-foot a,#works .cs-foot a::before,#works .cs-foot a::after,
  .cs .cs-step,.cs .cs-step::after,.cs .cs-step::before,
  #voices .vo,#voices .vo::before{transition:none!important}
  #works .wk-grid:hover .wk:not(:hover) .wk-im,
  #works .wk-grid:hover .wk:not(:hover) figcaption,
  .cs .cs-steps:hover .cs-step:not(:hover){opacity:1}
  #works .wk:hover .wk-im,.cs .cs-step:hover,#voices .vo:hover{transform:none;translate:0 0}
  .cs .cs-step:hover::before{transform:scale(1)}
  .cs .cs-foot a::before,#works .cs-foot a::before{width:1em;margin-right:7px;opacity:.75;transform:none}
  .cs .cs-foot a:hover::after,#works .cs-foot a:hover::after{transform:scaleX(1)}
}

/* ==========================================================
   R66v2. 案例階段 → Time Machine 縱深卡疊
   Lawrence 2026-08-05 貼咗 amicro 個 CardTimeMachine 組件原始碼，
   指明要呢個效果：左邊卡疊向後縮入深處（每級 z -60 / y -12 /
   輕微 rotateX，透明度遞減），行過嗰步就向觀眾方向飛走
   （z +200 / 向下 / 放大 / 淡出）；右邊一條直立刻度時間軸，
   主刻度之間夾兩條副刻度，hover／當前步出標籤；撳卡本身
   或者撳刻度就轉步。呢度用純 CSS/JS 重寫（本站無 React／
   framer-motion），並換成本站硬邊語言：直角、粗框、實色陰影、
   標籤係白底黑框小chip；彈簧感用 var(--spring) 過衝曲線。
   無 JS 時 .csd-on 唔會加上，退回原本直排時間軸。
   ========================================================== */

.cs-steps.csd-on{position:relative;padding-left:0;margin-top:var(--s5);
  display:flex;align-items:stretch;gap:var(--s3)}
.csd-on .cs-spine{display:none}

/* ── 左邊：縱深舞台 ── */
.csd-stage{position:relative;flex:1;min-width:0;perspective:900px;
  overflow:hidden;touch-action:pan-y;cursor:pointer;
  transition:height .55s var(--m-ease)}
.csd-on .cs-step{position:absolute;left:0;right:14px;top:48px;margin:0;overflow:hidden;
  transition:transform .65s var(--spring),opacity .4s var(--ease)}
.csd-on .cs-step::before{display:none}  /* 直排時間軸嘅節點圓點 */
.csd-on .cs-step::after{display:none}   /* R64 hover 連接線 */
.csd-on .cs-step[data-off="0"]{transform:none;opacity:1;z-index:4}
.csd-on .cs-step[data-off="1"]{transform:translate3d(0,-12px,-60px) rotateX(2deg);opacity:.8;z-index:3;box-shadow:none}
.csd-on .cs-step[data-off="2"]{transform:translate3d(0,-24px,-120px) rotateX(4deg);opacity:.6;z-index:2;box-shadow:none}
.csd-on .cs-step[data-off="3"]{transform:translate3d(0,-36px,-180px) rotateX(6deg);opacity:.4;z-index:1;box-shadow:none}
/* 行過嗰步：向觀眾方向飛走（放大＋壓低＋向下離場） */
.csd-on .cs-step[data-off="-1"]{transform:translate3d(0,240px,200px) rotateX(-18deg) scale(1.15);
  opacity:0;z-index:5}
.csd-on .cs-step:not([data-off="0"]){pointer-events:none}
.cs:not(.visible) .cs-steps.csd-on .cs-step{opacity:0;transform:translateY(22px)}

/* ── 右邊：直立刻度時間軸 ── */
.csd-side{flex:none;width:104px;display:flex;flex-direction:column;
  align-items:flex-end;justify-content:center;
  transition:opacity .5s var(--ease) .1s}
.cs:not(.visible) .csd-side{opacity:0}
.csd-tick{position:relative;display:flex;align-items:center;justify-content:flex-end;
  width:100%;height:14px;background:none;border:0;padding:0;cursor:pointer}
.csd-tick i{display:block;width:26px;height:3px;background:rgba(45,45,45,.32);
  transform-origin:right center;
  transition:transform .3s var(--spring),background var(--t-fast) var(--ease)}
.csd-tick.sub{height:9px}
.csd-tick.sub i{width:15px;height:2px;background:rgba(45,45,45,.14)}
.csd-tick.sub:hover i{background:rgba(45,45,45,.3)}
.csd-tick.main:hover i{transform:scaleX(1.35);background:rgba(45,45,45,.62)}
.csd-tick.main.on i{transform:scaleX(1.6);background:var(--c)}
/* 「下一步」刻度：斷線圖案，對應虛線節點嘅語義 */
.csd-tick.is-next i{background:repeating-linear-gradient(90deg,rgba(45,45,45,.32) 0 4px,transparent 4px 7px)}
.csd-tick.is-next:hover i{background:repeating-linear-gradient(90deg,rgba(45,45,45,.62) 0 4px,transparent 4px 7px)}
.csd-tick.is-next.on i{background:repeating-linear-gradient(90deg,var(--c) 0 4px,transparent 4px 7px)}
/* 標籤：白底黑框 chip，hover 出現，當前步常駐（touch 裝置都見到而家喺邊） */
.csd-lab{position:absolute;right:48px;top:50%;translate:4px -50%;
  font-family:var(--font-disp);font-size:12px;font-weight:600;line-height:1;
  color:var(--text);background:#fff;border:2px solid var(--hard);
  box-shadow:3px 3px 0 var(--sh);padding:4px 8px;
  white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity var(--t-fast) var(--ease),translate var(--t-fast) var(--ease)}
.csd-tick.main:hover .csd-lab{opacity:1;translate:0 -50%}
.csd-tick.main.on .csd-lab{opacity:1;translate:0 -50%;color:var(--c)}

@media(max-width:900px){
  /* R64 作品卡入場嘅 ±56px 橫移喺 390px 屏會頂出 viewport，
     令未捲到 #works 之前 scrollWidth 多咗 52px。手機入場改純垂直。 */
  #works .wk.wide.reveal:not(.visible){transform:translateY(44px)}
  #works .wk.reveal:nth-child(2):not(.visible){transform:translateY(56px)}
  #works .wk.reveal:nth-child(3):not(.visible){transform:translateY(56px)}
  .csd-side{width:64px}
  /* 手機唔會 hover，而常駐標籤會疊住卡片右上角、又同卡內標題重複——收起 */
  .csd-tick.main.on .csd-lab{opacity:0}
  .csd-lab{right:36px;font-size:11px;padding:3px 6px}
  .csd-on .cs-step{right:10px;top:40px}
  .csd-on .cs-step[data-off="1"]{transform:translate3d(0,-10px,-50px) rotateX(2deg)}
  .csd-on .cs-step[data-off="2"]{transform:translate3d(0,-20px,-100px) rotateX(4deg)}
  .csd-on .cs-step[data-off="3"]{transform:translate3d(0,-30px,-150px) rotateX(6deg)}
}

@media(prefers-reduced-motion:reduce){
  .csd-stage,.csd-side,.csd-tick i,.csd-lab,.csd-on .cs-step{transition:none!important}
  .csd-on .cs-step[data-off="-1"]{transform:none}
}

/* ==========================================================
   R67. 案例選單 × 卡疊二欄式
   Lawrence 2026-08-05：「左邊有幾個案例，右邊就係點擊咗嗰個
   案例嘅卡片，每點擊一次轉下一個階段」。
   左欄＝案例選單（JS 由每個 article.cs 嘅 kicker／標題自動生成，
   之後加新案例 article 會自動多一個掣）；右欄＝揀中嗰個案例嘅
   完整內容，入面嘅階段卡疊沿用 R66v2：撳卡轉下一階段。
   無 JS 時兩個案例照舊全部直排顯示。
   ========================================================== */
.csx{display:grid;grid-template-columns:272px minmax(0,1fr);
  gap:var(--s7);align-items:start}
/* 文章自己嘅 .container 已經喺 .csx 入面，唔使再收窄置中 */
.csx .cs > .container{padding:0;max-width:none}

/* ── 左欄：案例選單 ── */
.csx-menu{position:sticky;top:110px;display:flex;flex-direction:column;gap:var(--s4)}
.csx-item{text-align:left;background:#fff;font:inherit;cursor:pointer;
  border:var(--hard-w) solid var(--hard);border-left:4px solid var(--hard);
  padding:var(--s4) var(--s5);box-shadow:0 0 0 var(--sh);
  transition:translate var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease)}
.csx-item .csx-eyebrow{display:block;font-size:12px;font-weight:700;
  letter-spacing:.14em;color:var(--c,var(--ae-blue));margin-bottom:5px}
.csx-item .csx-title{display:block;font-family:var(--font-disp);font-weight:600;
  font-size:15px;line-height:1.65;color:var(--text)}
.csx-item .csx-status{display:inline-block;margin-top:7px;font-size:11.5px;
  font-weight:700;color:var(--text-2);border:1.5px dashed rgba(45,45,45,.4);
  padding:2px 8px}
.csx-item.on{border-left:10px solid var(--c,var(--ae-blue));
  translate:-2px -2px;box-shadow:var(--hard-off) var(--hard-off) 0 var(--sh)}
@media(hover:hover){
  .csx-item:not(.on):hover{translate:-2px -2px;box-shadow:4px 4px 0 var(--sh)}
}
.csx-item:active{translate:1px 1px;box-shadow:1px 1px 0 var(--sh-press)}

/* ── 右欄：一次只顯示揀中嗰個案例 ── */
.csx-body .cs{display:none}
.csx-body .cs.csx-on{display:block;animation:csxin .45s var(--m-ease)}
@keyframes csxin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

@media(max-width:900px){
  .csx{display:block}
  .csx-menu{position:static;flex-direction:row;gap:var(--s3);margin-bottom:var(--s6)}
  .csx-item{flex:1;min-width:0;padding:var(--s3) var(--s4)}
  .csx-item .csx-title{display:none}  /* 手機選單淨係顯示界別，慳位 */
  .csx-item .csx-eyebrow{margin-bottom:0;letter-spacing:.08em}
  .csx-item .csx-status{display:none}
}
@media(prefers-reduced-motion:reduce){
  .csx-body .cs.csx-on{animation:none}
  .csx-item{transition:none}
}


/* ================================================================
   R68 — 案例頁：對號入座選單 / 階段時序標籤 / 操作提示
   目的：cases.html 只講「實際發生過甚麼」，
        流程與方法論交回 services.html#how，消除三頁重複感
   ================================================================ */

/* 68.A —— 開場「哪一段最像你現在的情況」三條入口 */
.cs-pick{display:flex;flex-direction:column;gap:var(--s3);
  margin-top:var(--s5);max-width:860px}
.cs-pick a{display:flex;align-items:flex-start;gap:11px;
  text-decoration:none;background:#fff;color:var(--text);
  border:var(--hard-w) solid var(--hard);box-shadow:0 0 0 var(--sh);
  padding:var(--s4) var(--s5);font-size:16px;line-height:1.85;
  transition:translate var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
/* flex 令換行後的第二行同第一行左邊對齊，唔會鑽到標籤底下 */
.cs-pick a b{flex:0 0 auto;min-width:58px;text-align:center;margin-top:5px;
  font-family:var(--font-disp);font-weight:700;font-size:12.5px;letter-spacing:.08em;
  color:#fff;background:var(--hard);padding:3px 10px}
@media(hover:hover){
  .cs-pick a:hover{translate:-2px -2px;box-shadow:var(--hard-off) var(--hard-off) 0 var(--sh)}
  .cs-pick a:hover b{background:var(--ct,var(--ae-blue))}
}
.cs-pick a:active{translate:0 0;box-shadow:0 0 0 var(--sh);transition-duration:var(--t-press)}
@media(max-width:640px){
  .cs-pick a{flex-direction:column;gap:6px;padding:var(--s3) var(--s4);font-size:15px}
  .cs-pick a b{margin-top:0}
}

/* 68.B —— 階段卡的時序標籤（「開始之前」「首兩至三星期」…） */
.cs-when{display:inline-block;vertical-align:middle;
  font-family:var(--font-disp);font-size:11.5px;font-weight:700;letter-spacing:.03em;
  line-height:1;color:var(--text-2);
  border-left:2.5px solid var(--c);padding-left:8px;margin-left:11px}
/* 有時序標籤時，編號與它並排成一行；不支援 :has() 的瀏覽器會各佔一行，同樣可讀 */
.cs-step .no:has(+ .cs-when){display:inline-block;margin-bottom:0;vertical-align:middle}
.cs-step .cs-when + h3{margin-top:var(--s3)}

/* 68.C —— 卡疊操作提示 */
.cs-hint{display:inline-flex;align-items:center;gap:9px;
  margin-top:var(--s5);font-size:13px;font-weight:600;color:var(--text-3)}
.cs-hint::before{content:'';flex:0 0 auto;width:17px;height:11px;
  background:var(--c);
  clip-path:polygon(0 0,100% 0,100% 32%,0 32%,0 68%,100% 68%,100% 100%,0 100%);
  opacity:.55}
/* 未啟用卡疊（無 JS）時，提示沒有意義 —— 只在 JS 接管後顯示 */
.cs-hint{display:none}
.csd-ready .cs-hint{display:inline-flex}

/* 68.D —— 核實插圖說明 */
.sec-fig figcaption{margin-top:var(--s3);font-size:13.5px;color:var(--text-3);text-align:center}

@media(prefers-reduced-motion:reduce){
  .cs-pick a,.cs-pick a b{transition:none}
}

/* 68.E —— 常駐刻度標籤會壓住卡片右邊，桌面版同樣改為只在 hover 顯示；
   當前階段的時序資訊已經印在卡片頂部（01｜開始之前），不需要重複 */
.csd-tick.main.on .csd-lab{opacity:0;translate:4px -50%}
.csd-tick.main.on:hover .csd-lab{opacity:1;translate:0 -50%;color:var(--c)}

/* ============================================================
   69. Skip link（可及性）
   鍵盤使用者按第一次 Tab 就見到，可以直接跳過整條導覽入內容。
   平時用 left:-9999px 移出畫面而唔用 display:none，
   因為 display:none 嘅元素收唔到 focus。
   ============================================================ */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:1000;
  padding:12px 20px;background:var(--ink);color:#fff;
  font-family:var(--font-body);font-weight:700;font-size:15px;
  text-decoration:none;border:2px solid #fff;
}
.skip-link:focus{
  left:8px;top:8px;
  outline:3px solid var(--coral);outline-offset:2px;
}
/* 跳落去之後，錨點唔好被固定導覽列遮住 */
#main{scroll-margin-top:80px}