/* ================================================================
   六十影響報告書 — styles.css
   依「09 精稿」設計系統(tokens.css)落地。原生 CSS,無框架。
   結構:1 base  2 layout  3 typography  4 header/footer
        5 hero 變體  6 設計系統元件  7 複合區塊  8 responsive
   ================================================================ */

/* ---------- 1. base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-cjk); font-size:var(--fs-body); font-weight:var(--fw-regular);
  line-height:1.75; letter-spacing:.01em; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
.skip-link{ position:absolute; left:-9999px; top:0; background:var(--primary); color:#fff; padding:8px 16px; z-index:200; }
.skip-link:focus{ left:8px; top:8px; }
.is-hidden{ display:none !important; }
/* icon 預設尺寸:1em,隨字級;具體元件可覆寫(.link .ic 等) */
.ic{ display:inline-flex; align-items:center; justify-content:center; width:1em; height:1em; line-height:0; flex:0 0 auto; }
.ic svg{ width:100%; height:100%; display:block; }

/* ---------- 2. layout ---------- */
.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 32px; }
.container--text{ max-width:var(--maxw-text); }
.section{ padding:80px 0; }
.section--tight{ padding:56px 0; }
.section--soft{ /* 背景已移除 */ }
.section--navy{ background:var(--primary); color:#fff; }
.section--flush-top{ margin-top:-4px; }
.section--cyan{ background:var(--sec-1); }
.section--teal{ background:var(--sec-5); color:#fff; }

/* ---------- 3. typography ---------- */
h1,h2,h3,h4{ margin:0; font-weight:var(--fw-bold); line-height:1.25; color:var(--ink); }
.h1{ font-size:var(--fs-h1); font-weight:var(--fw-bold); }
.h2{ font-size:var(--fs-h2); }
.h3{ font-size:var(--fs-h3); }
.h4{ font-size:var(--fs-h4); }
.eyebrow{ font-size:var(--fs-subtitle); font-weight:var(--fw-medium); color:var(--sec-2); letter-spacing:.14em; }
.lead{ font-size:18px; color:var(--gray-2); }
.muted{ color:var(--ink-sub); }

.section-heading{ text-align:center; max-width:760px; margin:0 auto 48px; }
.section-heading__title{ font-size:var(--fs-h2); font-weight:var(--fw-bold); color:var(--primary); }
.section-heading__sub{ margin-top:14px; font-size:var(--fs-subtitle); color:var(--ink-sub); line-height:1.9; }
.on-dark .section-heading__title{ color:#fff; }
.on-dark .section-heading__sub{ color:rgba(255,255,255,.78); }

/* ---------- 4. header / footer ---------- */
.site-header{
  position:sticky; top:0; z-index:100; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.4) blur(8px); border-bottom:1px solid var(--line);
}
.site-header__inner{ display:flex; align-items:center; justify-content:space-between; height:68px; }
.brand{ display:flex; align-items:baseline; gap:10px; font-weight:var(--fw-bold); color:var(--primary); }
.brand__name{ font-size:var(--fs-title); }
.brand__anni{ font-size:13px; color:var(--ink-sub); font-weight:var(--fw-regular); }
.nav{ display:flex; gap:8px; }
.nav__link{
  position:relative; padding:8px 14px; border-radius:var(--radius-md);
  font-size:var(--fs-subtitle); font-weight:var(--fw-medium); color:var(--gray-2);
  transition:color .15s, background .15s;
}
.nav__link:hover{ color:var(--primary); background:var(--sec-11); }
.nav__link.is-active{ color:var(--primary); font-weight:var(--fw-bold); }
.nav__link.is-active::after{ content:""; position:absolute; left:14px; right:14px; bottom:2px; height:2px; background:var(--primary); border-radius:2px; }
.site-header .nav-toggle{ display:none; }
/* 倡議行動下拉選單（列出全部 8 個倡議行動頁） */
.nav__item{ display:flex; align-items:center; }
.nav__item--dd{ position:relative; }
.nav__link--dd{ display:inline-flex; align-items:center; gap:4px; cursor:default; user-select:none; }
.nav__link--dd .ic{ width:16px; height:16px; transition:transform .2s; }
.nav__item--dd:hover .nav__link--dd .ic,
.nav__item--dd:focus-within .nav__link--dd .ic{ transform:rotate(180deg); }
.nav-dd{ position:absolute; top:100%; right:0; padding-top:10px; min-width:540px;
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s; z-index:120; }
.nav__item--dd:hover .nav-dd,
.nav__item--dd:focus-within .nav-dd{ opacity:1; visibility:visible; transform:translateY(0); }
.nav-dd__panel{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:0 16px 44px rgba(27,45,88,.16); padding:12px; display:grid; grid-template-columns:1fr 1fr; gap:2px; }
.nav-dd__item{ display:flex; flex-direction:column; gap:3px; padding:10px 12px; border-radius:var(--radius-md);
  transition:background .15s; }
.nav-dd__item:hover{ background:var(--sec-11); }
.nav-dd__item.is-current{ background:var(--sec-11); }
.nav-dd__title{ font-weight:var(--fw-bold); color:var(--primary); font-size:15px; line-height:1.4; }
.nav-dd__sub{ font-size:12.5px; color:var(--gray-3); line-height:1.45; }
@media (prefers-reduced-motion: reduce){ .nav-dd{ transition:none; } }

.site-footer{ background:var(--primary); color:#fff; padding:56px 0 32px; margin-top:40px; }
.site-footer__top{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:28px; align-items:flex-start; }
.site-footer__brand{ font-size:var(--fs-h4); font-weight:var(--fw-bold); }
.site-footer__tag{ color:rgba(255,255,255,.7); font-size:14px; margin-top:6px; }
.site-footer__links{ display:flex; flex-wrap:wrap; gap:18px; }
.site-footer__links a{ color:rgba(255,255,255,.85); font-size:var(--fs-subtitle); }
.site-footer__links a:hover{ color:#fff; text-decoration:underline; }
.site-footer__bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
  margin-top:28px; padding-top:20px; border-top:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.6); font-size:13px; }
.footer-pdf{ display:inline-flex; align-items:center; gap:8px; color:#fff; font-weight:var(--fw-medium); }
.footer-pdf:hover{ color:var(--sec-1); }

/* ---------- 5. hero 變體 ---------- */
.hero{ position:relative; }
/* 5a 首頁置中型 */
.hero--home{ text-align:center; padding:96px 0 72px; background:
   radial-gradient(1200px 380px at 50% -10%, var(--sec-11), transparent 70%); }
.hero--home .hero__eyebrow{ display:inline-block; color:var(--sec-2); letter-spacing:.18em; font-weight:var(--fw-medium); }
.hero--home .hero__title{ font-size:clamp(44px,6vw,72px); font-weight:900; color:var(--primary); margin:18px 0 14px; letter-spacing:.04em; }
.hero--home .hero__subtitle{ font-size:20px; color:var(--gray-2); }
.hero__actions{ margin-top:30px; display:flex; gap:18px; align-items:center; justify-content:center; flex-wrap:wrap; }
/* 5b 章節 banner(主色底白標) */
.hero--banner{ background:var(--primary); color:#fff; padding:84px 0; text-align:center; }
.hero--banner .hero__title{ font-size:clamp(40px,5vw,60px); font-weight:var(--fw-bold); }
.hero--banner-dark{ background:linear-gradient(160deg,#16244a,#1B2D58 60%,#24345f); color:#fff; padding:96px 0 84px; text-align:center; }
.hero--banner-dark .hero__title{ font-size:clamp(40px,5vw,60px); font-weight:var(--fw-bold); }
.hero--banner-dark .hero__sub,.hero--banner .hero__sub{ margin:18px 0 0; color:rgba(255,255,255,.82); }
/* 5c 人物型(左:上標題下署名 / 右:照片) — 對照 figma 455:638 */
.hero--portrait{ background:var(--bg-soft); padding:64px 0; }
.hero--portrait .hero__grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:stretch; }
.hero--portrait .hero__text{ display:flex; flex-direction:column; justify-content:space-between; min-height:440px; }
.hero--portrait .hero__eyebrow{ font-size:var(--fs-subtitle); font-weight:var(--fw-medium); color:var(--gray-2); letter-spacing:.06em; margin-bottom:16px; }
.hero--portrait .hero__title{ font-size:clamp(34px,4.4vw,52px); font-weight:var(--fw-bold); color:var(--ink); line-height:1.28; margin:0; }
.hero--portrait .hero__sign{ margin-top:40px; }
.hero--portrait .hero__role{ color:var(--gray-1); font-size:16px; line-height:1.7; margin-bottom:14px; letter-spacing:.02em; }
.hero--portrait .hero__sign-img{ display:block; height:54px; width:auto; mix-blend-mode:multiply; }
.hero--portrait .hero__sign-name{ font-size:20px; color:var(--gray-2); }
.hero--portrait .hero__photo{ aspect-ratio:auto; height:100%; min-height:440px; }
.hero__photo{ aspect-ratio:4/5; border-radius:var(--radius-card); background:linear-gradient(135deg,var(--sec-9),var(--sec-8)); box-shadow:var(--elev-3); width:100%; object-fit:cover; }
/* 5c-2 封面式 banner(圖 + 漸層遮罩 + 置中標題) */
.hero--cover{ position:relative; min-height:clamp(440px,54vh,580px); display:grid; place-items:center; text-align:center; overflow:hidden; background:var(--primary); }
.hero--cover__bg{ position:absolute; top:0; left:0; width:100%; height:122%; object-fit:cover; object-position:center top; will-change:transform; }
.hero--cover::after{ content:''; position:absolute; inset:0; background:linear-gradient(160deg, rgba(27,45,88,.62), rgba(20,150,190,.55)); }
.hero--cover .container{ position:relative; z-index:2; }
.hero--cover .hero__title{ color:#fff; font-size:clamp(40px,5vw,60px); font-weight:var(--fw-bold); }
.hero--cover .hero__sub{ margin:16px 0 0; color:rgba(255,255,255,.88); }
/* 5d 左文右圖 */
.hero--split-image .hero__grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; padding:64px 0; }
.hero--split-image .hero__title{ font-size:clamp(34px,4.2vw,52px); font-weight:var(--fw-bold); color:var(--primary); margin:10px 0 16px; }
.hero--split-image .hero__body{ color:var(--gray-2); }
.hero__img{ aspect-ratio:4/3; border-radius:var(--radius-card); background:linear-gradient(135deg,var(--sec-5),var(--sec-7)); box-shadow:var(--elev-3); width:100%; object-fit:cover; }
/* 5e 倡議型 */
.hero--action{ background:linear-gradient(135deg,var(--sec-5),var(--sec-7)); color:#fff; padding:72px 0; }
.hero--action .hero__eyebrow{ color:rgba(255,255,255,.85); letter-spacing:.12em; }
.hero--action .hero__title{ font-size:clamp(36px,4.6vw,56px); font-weight:var(--fw-bold); margin-top:12px; max-width:880px; }

/* ---------- 6. 設計系統元件(來自 09 精稿) ---------- */
/* button */
.btn{ display:inline-flex; align-items:center; justify-content:center; padding:8px 32px;
  border-radius:var(--radius-md); border:1px solid transparent; font-family:var(--font-cjk);
  font-weight:var(--fw-bold); font-size:var(--fs-subtitle); line-height:1; text-align:center;
  white-space:nowrap; box-shadow:var(--elev-2); cursor:pointer; box-sizing:border-box;
  transition:background-color .15s,color .15s,border-color .15s; }
.btn--filled{ background:var(--primary); color:#fff; }
.btn--filled:hover{ background:var(--primary-l3); color:#fff; }
.btn--outlined{ background:#fff; color:var(--sec-6); border:1px solid var(--gray-7); }
.btn--outlined:hover{ background:var(--sec-12); color:var(--primary); border-color:var(--primary); }
.btn--tonal{ background:var(--sec-11); color:var(--primary); }
.btn--tonal:hover{ background:var(--sec-12); color:var(--primary); }
.btn--icon{ gap:8px; }
.btn--icon .ic{ width:20px; height:20px; flex:0 0 auto; }

/* link(文字 + 右箭頭,動態底線) */
.link{ display:inline-flex; align-items:center; gap:8px; font-weight:var(--fw-bold);
  font-size:var(--fs-title); line-height:1.25; color:var(--primary-l1); cursor:pointer;
  transition:color .15s; }
.link:hover{ color:var(--primary-l2); }
.link__text{ position:relative; }
.link__text::after{ content:""; position:absolute; left:0; bottom:-2px; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .2s; }
.link:hover .link__text::after{ transform:scaleX(1); }
.link .ic{ width:20px; height:20px; flex:0 0 auto; }
.link--sm{ font-size:var(--fs-subtitle); }
.on-dark .link{ color:var(--sec-1); }
.on-dark .link:hover{ color:#fff; }

/* chip / pill */
.chip{ display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:var(--radius-sm);
  background:var(--sec-10); color:var(--primary-l1); font-weight:var(--fw-bold); font-size:var(--fs-subtitle);
  line-height:normal; cursor:pointer; border:none; transition:background-color .15s,color .15s; }
.chip:hover{ background:var(--sec-9); }
.chip.is-active{ background:var(--primary); color:#fff; }

/* card */
.card{ display:flex; flex-direction:column; overflow:hidden; border-radius:var(--radius-card);
  background:#fff; box-shadow:var(--elev-3); color:var(--primary); }
.card__image{ width:100%; aspect-ratio:380/244; background:var(--gray-8); object-fit:cover; }
.card__body{ display:flex; flex-direction:column; gap:14px; padding:18px; }
.card-headline{ font-weight:var(--fw-bold); font-size:var(--fs-h3); color:var(--primary); transition:color .15s; }
.card:hover .card-headline{ color:var(--primary-l1); }

/* elevation utils */
.elev-1{ box-shadow:var(--elev-1); } .elev-2{ box-shadow:var(--elev-2); }
.elev-3{ box-shadow:var(--elev-3); } .elev-4{ box-shadow:var(--elev-4); }

/* icon-button(圓形) */
.icon-btn{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
  border:none; border-radius:var(--radius-pill); background:#fff; color:var(--sec-6); box-shadow:var(--elev-3);
  cursor:pointer; transition:background .15s; }
.icon-btn:hover{ background:var(--sec-11); }
.icon-btn .ic{ width:24px; height:24px; }
.icon-btn:disabled{ opacity:.4; cursor:default; }

/* ---------- 7. 複合區塊 ---------- */

/* 7a impact tabs(首頁三大影響力) */
.impact-tabs__bar{ display:flex; gap:12px; justify-content:center; margin-bottom:36px; flex-wrap:wrap; }
.impact-tab{ display:inline-flex; align-items:center; gap:10px; padding:12px 26px; border-radius:var(--radius-pill);
  background:var(--sec-11); color:var(--primary); font-size:var(--fs-title); font-weight:var(--fw-medium);
  border:none; cursor:pointer; transition:background .15s,color .15s; }
.impact-tab .ic{ width:22px; height:22px; }
.impact-tab:hover{ background:var(--sec-12); }
.impact-tab.is-active{ background:var(--primary); color:#fff; }
/* 淺灰圓角面板(對照 Figma 45:29) */
.impact-panel{ display:none; background:var(--gray-9); border-radius:24px; padding:40px 48px; }
.impact-panel.is-active{ display:block; animation:fade .25s ease; }
@keyframes fade{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }
.impact-panel__head{ margin-bottom:26px; }
.impact-panel__icon{ width:48px; height:48px; color:var(--sec-5); margin-bottom:8px; }
.impact-panel__icon .ic{ width:48px; height:48px; }
.impact-panel__title{ font-size:var(--fs-h3); font-weight:var(--fw-bold); color:var(--ink); }
.impact-panel__desc{ margin-top:10px; color:var(--gray-2); }
/* 4 卡輪播 + 左右圓形箭頭 */
.impact-carousel{ position:relative; }
.impact-carousel__track{ display:flex; gap:20px; overflow-x:auto; scroll-behavior:smooth;
  scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none; }
.impact-carousel__track::-webkit-scrollbar{ display:none; }
.impact-carousel__card{ flex:0 0 calc((100% - 40px)/3); aspect-ratio:4/3; border-radius:14px; overflow:hidden;
  background:linear-gradient(120deg,var(--sec-1),var(--sec-7)); scroll-snap-align:start; box-shadow:var(--elev-1); }
.impact-carousel__card img{ width:100%; height:100%; object-fit:cover; }
.impact-carousel__arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:44px; height:44px; border-radius:50%; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--elev-2); transition:background .15s,color .15s; }
.impact-carousel__arrow .ic{ width:22px; height:22px; }
.impact-carousel__arrow--prev{ left:-22px; background:var(--gray-8); color:var(--gray-2); }
.impact-carousel__arrow--next{ right:-22px; background:#fff; color:var(--primary); }
.impact-carousel__arrow:hover{ background:var(--sec-12); color:var(--primary); }
/* 三步驟 3 欄,對齊卡片下方 */
.impact-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:30px; }
.impact-step__title{ font-weight:var(--fw-bold); color:var(--ink); font-size:var(--fs-subtitle); margin-bottom:10px; }
.impact-step__no{ color:var(--success); margin-right:8px; }
.impact-step__body{ color:var(--gray-2); font-size:15px; line-height:1.85; }
.impact-step__body p{ margin:0 0 6px; }
.impact-step__body sup{ color:var(--sec-2); font-weight:var(--fw-bold); margin-right:2px; }
.impact-panel__link{ margin-top:30px; }

/* 7b step cards(三步驟) */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.step{ }
.step__badge{ display:inline-flex; align-items:center; gap:8px; font-weight:var(--fw-bold);
  color:var(--sec-2); font-size:14px; letter-spacing:.08em; }
.step__no{ width:24px; height:24px; border-radius:var(--radius-pill); background:var(--sec-1); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; font-size:13px; }
.step__title{ font-size:var(--fs-title); font-weight:var(--fw-bold); color:var(--primary); margin:10px 0 8px; }
.step__items{ margin:0; padding:0; list-style:none; color:var(--gray-2); font-size:15px; }
.step__items li{ margin-bottom:8px; padding-left:14px; position:relative; }
.step__items li::before{ content:""; position:absolute; left:0; top:11px; width:6px; height:6px; border-radius:50%; background:var(--sec-5); }

/* 7c bento actions(八大倡議) */
.bento{ display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(6,118px); gap:18px; }
.action-card{ position:relative; border-radius:var(--radius-card); overflow:hidden; color:#fff;
  background:linear-gradient(135deg,var(--sec-5),var(--sec-7)); box-shadow:var(--elev-2);
  display:flex; align-items:flex-end; padding:22px; transition:transform .2s, box-shadow .2s; }
.action-card::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 35%,rgba(13,30,40,.55)); }
.action-card:nth-child(odd){ background:linear-gradient(135deg,var(--primary-l2),var(--primary-l1)); }
.action-card:hover{ transform:translateY(-3px); box-shadow:var(--elev-3); }
.action-card__title{ position:relative; font-size:var(--fs-title); font-weight:var(--fw-bold); line-height:1.5; }
/* 左欄 2 大卡(各跨 3 列)總高 = 右兩欄各 3 小卡(各跨 2 列)總高 = 6 列 */
.action-card:nth-child(n){ grid-row:span 2; }            /* 小卡預設 2 列 */
.action-card--lg{ grid-row:span 3; }                      /* 大卡 3 列 */
.bento .action-card:nth-child(1){ grid-column:1; grid-row:1 / span 3; }
.bento .action-card:nth-child(2){ grid-column:1; grid-row:4 / span 3; }
.bento .action-card:nth-child(3){ grid-column:2; grid-row:1 / span 2; }
.bento .action-card:nth-child(4){ grid-column:3; grid-row:1 / span 2; }
.bento .action-card:nth-child(5){ grid-column:2; grid-row:3 / span 2; }
.bento .action-card:nth-child(6){ grid-column:3; grid-row:3 / span 2; }
.bento .action-card:nth-child(7){ grid-column:2; grid-row:5 / span 2; }
.bento .action-card:nth-child(8){ grid-column:3; grid-row:5 / span 2; }
/* 真實圖片接入:卡底圖 / tab 主圖 / PPF 左圖 / 倡議 hero 底圖 */
.action-card__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.action-card::before{ z-index:1; }
.action-card__title{ z-index:2; }
img.impact-media{ width:100%; object-fit:cover; }
img.ppf__visual{ width:100%; object-fit:cover; }
.hero--action{ position:relative; overflow:hidden; }
.hero--action__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.22; z-index:0; }
.hero--action .container{ position:relative; z-index:1; }

/* 7d link cards band(承繼過去 PPF)— 亮青底 + 白卡(對照 Figma 70:57) */
.ppf{ background:linear-gradient(135deg,#2CC6E2,#15B0D2); border-radius:24px; padding:40px; }
.ppf__grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.ppf__cards{ display:flex; flex-direction:column; gap:18px; }
.linkcard{ display:block; background:#fff; border:none; border-radius:14px; padding:20px 24px;
  box-shadow:var(--elev-2); transition:transform .15s, box-shadow .15s; }
.linkcard:hover{ transform:translateY(-2px); box-shadow:var(--elev-3); }
.linkcard .link{ color:var(--primary-l1); }
.linkcard:hover .link{ color:var(--primary-l2); }
.linkcard:hover .link__text::after{ transform:scaleX(1); }
.linkcard__quote{ margin-top:10px; color:var(--gray-2); font-size:15px; line-height:1.85; }
.ppf__visual{ aspect-ratio:4/3; border-radius:16px; background:rgba(255,255,255,.18); }
.ppf__visual img{ width:100%; height:100%; object-fit:cover; border-radius:16px; }

/* 7d-2 三原則 — 全部展開 */
.principles--open{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.principle-card{ background:#fff; border-top:4px solid var(--pc,#2A7D74); border-radius:var(--radius-card);
  box-shadow:var(--elev-1); padding:26px 26px 28px; }
.principle-card__name{ font-size:var(--fs-h4); font-weight:var(--fw-bold); color:var(--pc,#2A7D74); margin-bottom:12px; }
.principle-card__desc{ color:var(--gray-2); font-size:15px; line-height:1.95; margin:0; }
.principle:not(.is-open) .principle__circle{ opacity:.92; }

/* 7e story timeline */
.story-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px 28px; }
.story-card{ display:flex; gap:16px; align-items:flex-start; padding:8px 0; }
.story-card--link{ cursor:pointer; }
.story-card__thumb{ width:96px; height:96px; flex:0 0 auto; border-radius:10px; object-fit:cover;
  background:linear-gradient(135deg,var(--sec-1),var(--sec-7)); box-shadow:var(--elev-1); }
.story-card__year{ display:inline-block; font-weight:var(--fw-bold); color:var(--sec-2); font-size:14px; }
.story-card__title{ font-weight:var(--fw-bold); color:var(--primary); font-size:var(--fs-subtitle); margin:2px 0 6px; transition:color .15s; }
.story-card--link:hover .story-card__title{ color:var(--primary-l1); }
.story-card__desc{ color:var(--ink-sub); font-size:14px; line-height:1.7;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.story-card__page{ font-size:12px; color:var(--sec-2); margin-top:4px; display:none; }

/* ---- 故事 lightbox:全螢幕水平輪播 + 底部年代/縮圖 dock ---- */
.modal{ position:fixed; inset:0; z-index:300; display:none; --dock-h:152px; }
.modal.is-open{ display:block; }
.modal__backdrop{ position:absolute; inset:0; background:#05070d; animation:modalFade .22s ease both; }
.modal__close{ position:absolute; top:16px; right:18px; z-index:5; width:40px; height:40px; padding:0; border:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.12); color:#fff; font-size:24px; line-height:1;
  cursor:pointer; backdrop-filter:blur(4px); transition:background .15s; }
.modal__close:hover{ background:rgba(255,255,255,.26); }
/* 視窗 + 軌道:每張 slide = 一個 viewport 寬,translateX 切換(下一張由右側滑入,前一張往左推出) */
.modal__viewport{ position:absolute; left:0; right:0; top:0; bottom:var(--dock-h); overflow:hidden; z-index:1; }
.modal__track{ display:flex; height:100%; transition:transform .55s cubic-bezier(.22,.72,.24,1); will-change:transform; }
.modal__slide{ position:relative; flex:0 0 100%; height:100%; overflow:hidden; }
.modal__stage{ position:absolute; inset:0; background:#05070d; }
.modal__stage-bg{ position:absolute; inset:-6%; background-size:contain; background-repeat:no-repeat; background-position:center;
  filter:blur(28px) brightness(.5) saturate(1.12); transform:scale(1.12); }
.modal__img{ position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:contain; padding:4vh 4vw 17vh; box-sizing:border-box; }
.modal__body{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:64px clamp(20px,6vw,96px) 28px; color:#fff;
  background:linear-gradient(to top, rgba(5,7,13,.94) 14%, rgba(5,7,13,.6) 56%, transparent); }
.modal__meta{ display:flex; align-items:baseline; gap:4px; }
.modal__year{ font-weight:var(--fw-bold); color:#fff; font-size:16px; letter-spacing:.04em; }
.modal__era{ color:rgba(255,255,255,.7); font-size:13px; }
.modal__title{ font-size:clamp(22px,3vw,34px); color:#fff; margin:6px 0 10px; line-height:1.3; }
.modal__desc{ color:rgba(255,255,255,.86); font-size:clamp(14px,1.5vw,16px); line-height:1.85; max-width:1000px; white-space:pre-line; }
/* 底部 dock:年代篩選 pills + 縮圖列 */
.modal__dock{ position:absolute; left:0; right:0; bottom:0; height:var(--dock-h); z-index:3; display:flex; flex-direction:column; gap:8px;
  padding:10px 14px 14px; background:rgba(8,11,20,.92); backdrop-filter:blur(8px); border-top:1px solid rgba(255,255,255,.09); }
/* 時間軸:年份依比例分佈 + 十年刻度 + 隨切換滑動的播放頭 */
.modal__timeline{ position:relative; height:50px; margin:4px 12px 0; flex:0 0 auto; }
.modal__tl-axis{ position:absolute; left:0; right:0; top:32px; height:2px; background:rgba(255,255,255,.16); border-radius:2px; }
.modal__tl-fill{ position:absolute; left:0; top:32px; height:2px; width:0; background:var(--sec-2); border-radius:2px; transition:width .5s cubic-bezier(.22,.72,.24,1); }
.modal__tl-tick{ position:absolute; top:38px; transform:translateX(-50%); font-size:10px; color:rgba(255,255,255,.4); white-space:nowrap; pointer-events:none; }
.modal__tl-dot{ position:absolute; top:32px; transform:translate(-50%,-50%); width:9px; height:9px; padding:0; border:none; border-radius:50%;
  background:rgba(255,255,255,.42); cursor:pointer; transition:background .15s, transform .15s, box-shadow .15s; }
.modal__tl-dot:hover{ background:#fff; transform:translate(-50%,-50%) scale(1.4); }
.modal__tl-dot.is-current{ background:var(--sec-2); width:13px; height:13px; box-shadow:0 0 0 4px rgba(38,128,128,.3); }
.modal__tl-head{ position:absolute; top:0; left:0; transform:translateX(-50%); transition:left .5s cubic-bezier(.22,.72,.24,1); pointer-events:none; }
.modal__tl-head-year{ display:block; font-size:14px; font-weight:var(--fw-bold); color:#fff; letter-spacing:.03em; }
.modal__tl-head::after{ content:''; position:absolute; left:50%; top:20px; transform:translateX(-50%); width:1px; height:11px; background:rgba(255,255,255,.45); }
.modal__strip{ flex:1 1 auto; display:flex; align-items:center; gap:10px; min-height:0; }
.modal__nav{ display:flex; align-items:center; justify-content:center; padding:0; border:none; border-radius:50%; cursor:pointer; }
.modal__nav svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.modal__nav:disabled{ opacity:.32; cursor:default; }
.modal__strip-arrow{ flex:0 0 auto; width:34px; height:34px; background:rgba(255,255,255,.13); color:#fff; transition:background .15s; }
.modal__strip-arrow:not(:disabled):hover{ background:rgba(255,255,255,.26); }
.modal__strip-track{ flex:1 1 auto; display:flex; gap:8px; overflow-x:auto; scroll-behavior:smooth; padding:3px 1px; scrollbar-width:thin; align-items:center; }
.modal__strip-track::-webkit-scrollbar{ height:6px; }
.modal__strip-track::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.25); border-radius:3px; }
.modal__thumb{ flex:0 0 auto; width:76px; height:50px; padding:0; border:2px solid transparent; border-radius:7px; overflow:hidden;
  cursor:pointer; background:rgba(255,255,255,.08); opacity:.5; transition:opacity .15s, border-color .15s; }
.modal__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.modal__thumb-ph{ display:block; width:100%; height:100%; background:linear-gradient(135deg,var(--sec-1),var(--sec-7)); }
.modal__thumb:hover{ opacity:.82; }
.modal__thumb.is-current{ opacity:1; border-color:var(--sec-2); }
body.modal-open{ overflow:hidden; }
@keyframes modalFade{ from{opacity:0} to{opacity:1} }
@media (max-width:640px){
  .modal{ --dock-h:122px; }
  .modal__img{ padding:3vh 3vw 15vh; }
  .modal__title{ font-size:20px; }
  .modal__thumb{ width:60px; height:42px; }
  .modal__strip-arrow{ width:30px; height:30px; }
  /* 時間軸:手機只保留軸線、十年刻度與播放頭,隱藏 32 個小圓點避免擁擠 */
  .modal__timeline{ height:36px; margin:2px 8px 0; }
  .modal__tl-axis,.modal__tl-fill,.modal__tl-dot{ top:24px; }
  .modal__tl-dot:not(.is-current){ display:none; }
  .modal__tl-tick{ top:29px; font-size:9px; }
  .modal__tl-head-year{ font-size:13px; }
  .modal__tl-head::after{ top:18px; height:8px; }
}
@media (prefers-reduced-motion: reduce){
  .modal__track{ transition-duration:.01ms; }
}

/* 7f year filter(故事牆) */
.year-filter{ position:sticky; top:68px; z-index:90;
  display:flex; gap:12px; flex-wrap:wrap; justify-content:center;
  margin:0 0 36px; padding:16px 0; background:#fff; }
.year-pill{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 20px;
  border-radius:var(--radius-pill); background:var(--sec-11); color:var(--primary); border:none; cursor:pointer;
  transition:background .15s,color .15s; }
.year-pill:hover{ background:var(--sec-12); }
.year-pill.is-active{ background:var(--primary); color:#fff; }
.year-pill__range{ font-weight:var(--fw-bold); font-size:15px; }
.year-pill__label{ font-size:12px; opacity:.8; }
.story-era{ margin-bottom:46px; }
.story-era__head{ display:flex; align-items:baseline; gap:14px; margin-bottom:20px; padding-bottom:10px; border-bottom:2px solid var(--sec-9); }
.story-era__range{ font-size:var(--fs-h3); font-weight:var(--fw-bold); color:var(--primary); }
.story-era__label{ color:var(--sec-2); font-weight:var(--fw-medium); }

/* 7g stat band（與數據卡統一：灰底 + 綠字，保留 unit/待核對）*/
.stat-band{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.stat{ background:var(--datas-bg); border:none; border-radius:var(--radius-card); padding:24px; }
.stat__value{ font-size:34px; font-weight:900; color:var(--accent-green); line-height:1.1; }
.stat__unit{ font-size:16px; font-weight:var(--fw-medium); color:var(--datas-muted); margin-left:4px; }
.stat__label{ margin-top:8px; color:#000; font-size:15px; font-weight:var(--fw-medium); }
.stat__source{ margin-top:10px; font-size:12px; color:var(--datas-muted); }
.stat__verify{ display:inline-block; margin-top:6px; font-size:11px; color:var(--sec-3);
  background:#fdeee9; padding:2px 8px; border-radius:var(--radius-pill); }

/* 7h quote block（左右大引號夾置中文字）*/
.quote{ position:relative; max-width:var(--maxw-text); margin:0 auto; text-align:center; padding:8px 72px; }
.quote__text{ margin:0; font-size:22px; line-height:1.95; color:var(--primary); font-weight:var(--fw-medium); }
.quote__mark{ position:absolute; font-family:Georgia,"Times New Roman",serif; font-size:80px; line-height:1; color:var(--ink); pointer-events:none; user-select:none; }
.quote__mark--open{ left:0; top:-10px; }
.quote__mark--close{ right:0; bottom:-30px; }
.quote__by{ margin:20px 0 0; color:var(--ink-sub); }
.quote__by b{ color:var(--primary); font-weight:var(--fw-bold); }
.on-dark .quote__text{ color:#fff; }
.on-dark .quote__mark{ color:rgba(255,255,255,.92); }
.on-dark .quote__by{ color:rgba(255,255,255,.72); }
.on-dark .quote__by b{ color:#fff; }
/* 引言（頁N）→ 開啟報告書 PDF 對應頁 */
.cite-page{ color:var(--sec-2); text-decoration:none; white-space:nowrap; border-bottom:1px dotted currentColor; transition:color .15s; }
.cite-page:hover{ color:var(--primary); }
.on-dark .cite-page{ color:var(--sec-1); }
.on-dark .cite-page:hover{ color:#fff; }
@media (max-width:480px){
  .quote{ padding:8px 30px; }
  .quote__mark{ font-size:52px; }
  .quote__mark--close{ bottom:-20px; }
}

/* 7i article(書信兩欄) */
.article{ display:grid; grid-template-columns:340px 1fr; gap:48px; padding:40px 0; border-top:1px solid var(--line); }
.article:first-of-type{ border-top:none; }
.article__title{ font-size:var(--fs-h4); font-weight:var(--fw-bold); color:var(--primary); position:sticky; top:90px; align-self:start; }
.article__body{ color:var(--gray-2); font-size:17px; line-height:2; }
.article__body p{ margin:0 0 18px; }

/* 7j mode/principle/disclosure cards(三欄) */
.cards-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.info-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-card); padding:28px; box-shadow:var(--elev-1); }
.info-card__icon{ width:64px; height:64px; border-radius:14px; background:var(--sec-10); color:var(--primary);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.info-card__icon .ic{ width:32px; height:32px; }
.info-card__title{ font-size:var(--fs-title); font-weight:var(--fw-bold); color:var(--primary); margin-bottom:8px; }
.info-card__body{ color:var(--gray-2); font-size:15px; }
.info-card__tag{ font-size:13px; color:var(--sec-2); font-weight:var(--fw-medium); }

/* accordion */
.accordion__item{ border-bottom:1px solid var(--line); }
.accordion__head{ display:flex; justify-content:space-between; align-items:center; gap:16px; width:100%;
  padding:20px 4px; background:none; border:none; cursor:pointer; text-align:left;
  font-size:var(--fs-title); font-weight:var(--fw-bold); color:var(--primary); }
.accordion__head .ic{ width:24px; height:24px; transition:transform .2s; flex:0 0 auto; color:var(--sec-2); }
.accordion__item.is-open .accordion__head .ic{ transform:rotate(180deg); }
.accordion__panel{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.accordion__panel-inner{ padding:0 4px 22px; color:var(--gray-2); }

/* highlight(圖文交錯) */
.highlight{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; padding:36px 0; }
.highlight--rev .highlight__media{ order:2; }
.highlight__media{ aspect-ratio:16/10; border-radius:var(--radius-card); box-shadow:var(--elev-2);
  background:linear-gradient(135deg,var(--sec-9),var(--sec-5)); }
.highlight__title{ font-size:var(--fs-h3); font-weight:var(--fw-bold); color:var(--primary); margin-bottom:14px; }
.highlight__body{ color:var(--gray-2); line-height:2; }

/* feedback cards(永續環境受益回饋) */
.feedback{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.feedback__card{ background:var(--sec-10); border-radius:var(--radius-card); padding:24px; }
.feedback__quote{ color:var(--primary); font-weight:var(--fw-medium); line-height:1.85; }
.feedback__by{ margin-top:12px; color:var(--ink-sub); font-size:14px; }

/* generic helpers */
.center{ text-align:center; } .mt-32{ margin-top:32px; } .mt-40{ margin-top:40px; }
.divider{ height:1px; background:var(--line); border:0; margin:0; }

/* ---------- 7b. 核心精神 page ---------- */
.media-wide{ margin:0; border-radius:var(--radius-card); overflow:hidden; box-shadow:var(--elev-2); }
.media-wide img{ display:block; width:100%; height:auto; }
.cs-heading{ font-size:var(--fs-h3); font-weight:var(--fw-bold); color:var(--primary); margin:0 0 20px; }
.cs-prose{ color:var(--gray-2); font-size:17px; line-height:2.05; max-width:980px; margin:0 auto 32px; text-align:justify; }
.cs-prose p{ margin:0 0 16px; }
.cs-prose--center{ text-align:center; max-width:760px; }
.cs-prose--center p{ margin:0 0 6px; }
.spirit-cards{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:8px; }
.spirit-card{ position:relative; display:flex; align-items:flex-end; min-height:280px; padding:26px 28px;
  border-radius:var(--radius-card); overflow:hidden; text-decoration:none; color:#fff;
  background:linear-gradient(135deg,#16B5D8,#0FA0CB); box-shadow:var(--elev-2); transition:transform .2s, box-shadow .2s; }
.spirit-card__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; }
.spirit-card::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,90,130,.15) 30%, rgba(11,40,70,.78)); }
.spirit-card__label{ position:relative; z-index:2; font-size:var(--fs-h4); font-weight:var(--fw-bold); }
.spirit-card__arrow{ position:relative; z-index:2; margin-left:auto; display:inline-flex; align-items:center;
  width:40px; height:40px; border-radius:999px; background:rgba(255,255,255,.18); justify-content:center; transition:background .2s; }
.spirit-card__arrow .ic{ width:20px; height:20px; }
.spirit-card:hover{ transform:translateY(-3px); box-shadow:var(--elev-3); }
.spirit-card:hover .spirit-card__arrow{ background:rgba(255,255,255,.34); }

/* ---------- 7c. 倡議行動詳細頁(action-1) ---------- */
.hero--title{ position:relative; overflow:hidden; background:var(--primary); color:#fff; padding:104px 0 88px; }
.hero--title__bg{ position:absolute; top:0; left:0; width:100%; height:122%; object-fit:cover; object-position:center top; will-change:transform; z-index:0; }
.hero--title::after{ content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(115deg, rgba(27,45,88,.94) 30%, rgba(27,45,88,.74)); }
.hero--title .container{ position:relative; z-index:2; }
.hero--title__eyebrow{ font-size:var(--fs-subtitle); color:var(--sec-1); letter-spacing:.12em; margin-bottom:14px; }
.hero--title__h1{ font-size:clamp(28px,3.4vw,44px); font-weight:var(--fw-bold); line-height:1.45; max-width:1080px; margin:0; color:#fff; }
/* 青綠前言 */
.a1-intro{ background:linear-gradient(135deg,#16BCE0,#0FA6CE); color:#0c3a47; padding:56px 0; }
.a1-intro__body{ max-width:1080px; }
.a1-intro__body p{ margin:0 0 16px; line-height:2.05; font-size:16.5px; color:#0d3a48; }
.a1-intro__body p:last-child{ margin-bottom:0; }
.a1-intro__icons{ display:flex; gap:64px; margin-top:34px; flex-wrap:wrap; }
.a1-intro__icons:empty{ display:none; }
.a1-icongroup__label{ display:block; font-size:13px; font-weight:var(--fw-medium); color:#0c3a47; margin-bottom:10px; opacity:.9; }
.a1-icongroup__img{ height:48px; width:auto; display:block; }
/* 數據卡（Figma 214:511：灰底卡 + 綠字 + 灰來源）*/
.a1-datas{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.a1-data{ background:var(--datas-bg); border-radius:var(--radius-card); padding:24px 22px;
  display:flex; flex-direction:column; justify-content:space-between; min-height:200px; }
.a1-data__lead{ font-size:30px; font-weight:var(--fw-bold); color:var(--accent-green); line-height:1.15; margin-bottom:10px; }
.a1-data__label{ font-size:17px; font-weight:var(--fw-bold); color:#000; line-height:1.55; }
.a1-data__num{ color:var(--accent-green); }
.a1-data__detail{ font-size:13px; color:var(--datas-muted); line-height:1.85; margin-top:14px; }
.a1-data__source{ font-size:12.5px; color:var(--datas-muted); margin-top:18px; }
/* 倡議行動 / 目標（可展開：青底收合 ↔ 深藍展開，左→右揭露）*/
.a1-ag{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
.a1-ag__card{ position:relative; border-radius:var(--radius-card); padding:36px 36px 80px; min-height:220px;
  background:var(--accent-cyan); color:#0a0a0a; box-shadow:var(--elev-2);
  transition:background-color .45s ease, color .45s ease; }
.a1-ag__card.is-open{ background:var(--primary); color:#fff; }
.a1-ag__label{ font-size:clamp(26px,2.6vw,34px); font-weight:var(--fw-bold); margin:0 0 18px; color:inherit; }
.a1-ag__summary{ font-size:18px; line-height:1.95; color:inherit; }
.a1-ag__card.is-open .a1-ag__summary{ display:none; }
.a1-ag__full{ max-height:0; overflow:hidden; transition:max-height .45s ease; }
.a1-ag__full-inner{ clip-path:inset(0 100% 0 0); transition:clip-path .55s ease .05s; }
.a1-ag__card.is-open .a1-ag__full-inner{ clip-path:inset(0 0 0 0); }
.a1-ag__text{ font-size:16.5px; line-height:2; color:inherit; }
.a1-ag__text p{ margin:0 0 14px; } .a1-ag__text p:last-child{ margin:0; }
.a1-goal{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:18px; }
.a1-goal__item{ position:relative; padding-left:18px; }
.a1-goal__item::before{ content:''; position:absolute; left:0; top:10px; width:7px; height:7px; border-radius:50%; background:currentColor; }
.a1-goal__title{ display:block; font-weight:var(--fw-bold); color:inherit; margin-bottom:5px; }
.a1-goal__body{ display:block; font-size:14.5px; line-height:1.85; color:inherit; opacity:.85; }
/* 展開/收合鈕：白圓 + 綠 icon；收合顯示＋，展開顯示× */
.a1-ag__toggle{ position:absolute; right:24px; bottom:24px; width:44px; height:44px; padding:0; border:none;
  border-radius:50%; background:#fff; color:var(--accent-green); cursor:pointer; box-shadow:var(--elev-2);
  display:inline-flex; align-items:center; justify-content:center; transition:transform .15s; }
.a1-ag__toggle:hover{ transform:scale(1.06); }
.a1-ag__toggle .ic{ width:24px; height:24px; }
.a1-ag__icon{ display:inline-flex; }
.a1-ag__icon--close{ display:none; }
.a1-ag__card.is-open .a1-ag__icon--plus{ display:none; }
.a1-ag__card.is-open .a1-ag__icon--close{ display:inline-flex; }
@media (prefers-reduced-motion: reduce){
  .a1-ag__card, .a1-ag__full, .a1-ag__full-inner{ transition:none; }
}
/* 影響力亮點 */
.a1-hl__heading{ font-size:var(--fs-h3); font-weight:var(--fw-bold); color:var(--primary); text-align:center; margin:0 0 36px; }
.a1-hl__grid{ display:grid; grid-template-columns:460px 1fr; gap:48px; align-items:start; }
.a1-hl__grid--right{ grid-template-columns:1fr 460px; }
.a1-hl__pics{ display:flex; flex-direction:column; gap:16px; }
.a1-hl__pic{ border-radius:var(--radius-card); overflow:hidden; box-shadow:var(--elev-2); }
.a1-hl__pic img{ display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:16/11; }
.a1-hl__subtitle{ font-size:var(--fs-h4); font-weight:var(--fw-bold); color:var(--primary); line-height:1.55; margin:0 0 18px; }
.a1-hl__body{ color:var(--gray-2); font-size:16px; line-height:2.05; }
.a1-hl__body p{ margin:0 0 16px; }
.a1-hl__lists{ margin-top:6px; display:flex; flex-direction:column; gap:20px; }
.a1-hl__item{ border-top:1px solid var(--line); padding-top:18px; }
.a1-hl__item-title{ font-weight:var(--fw-bold); color:var(--primary-l1); margin-bottom:8px; line-height:1.5; }
.a1-hl__item-body{ color:var(--gray-2); font-size:15px; line-height:1.95; margin:0; }
.a1-hl__quote{ margin:26px 0 0; padding:22px 26px; background:var(--bg-soft); border-radius:12px; color:var(--gray-1); font-size:15px; line-height:1.95; }
.a1-hl__quote .ic{ color:var(--sec-2); width:26px; height:26px; display:block; margin-bottom:8px; }
/* 其他倡議行動輪播 */
.a1-others__wrap{ position:relative; }
.a1-others__track{ display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:6px; }
.a1-others__track::-webkit-scrollbar{ display:none; }
.a1-other-card{ position:relative; flex:0 0 clamp(280px,31%,416px); scroll-snap-align:start; min-height:280px;
  border-radius:var(--radius-card); overflow:hidden; display:flex; align-items:flex-end; padding:24px 26px;
  text-decoration:none; color:#fff; background:linear-gradient(135deg,#16BCE0,#0FA6CE); box-shadow:var(--elev-2); }
.a1-other-card__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.a1-other-card::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,90,130,.18) 38%, rgba(11,40,70,.82)); }
.a1-other-card__label{ position:relative; z-index:2; font-size:18px; font-weight:var(--fw-bold); line-height:1.55; }
.a1-others__btns{ display:flex; justify-content:flex-end; gap:12px; margin-top:20px; }
.a1-others__arrow{ width:40px; height:40px; border-radius:999px; border:1px solid var(--line);
  background:#fff; color:var(--primary); display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .2s, color .2s, border-color .2s; }
.a1-others__arrow:hover{ background:var(--primary); color:#fff; border-color:var(--primary); }
.a1-others__arrow .ic{ width:20px; height:20px; }

/* ---------- 7k. 影響力主軸頁 (impact-axis) ---------- */
.axis-intro__heading{ text-align:center; font-size:var(--fs-h2); font-weight:var(--fw-bold); color:#fff; margin:0 0 24px; }
.axis-intro__text{ max-width:var(--maxw-text); margin:0 auto 48px; color:rgba(255,255,255,.86); line-height:2.05; }
.axis-intro__text p{ margin:0 0 16px; } .axis-intro__text p:last-child{ margin:0; }
.axis-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.axis-card{ border:1px solid var(--datas-muted); border-radius:var(--radius-lg); padding:12px 12px 28px; }
.axis-card__img{ width:100%; aspect-ratio:399/220; object-fit:cover; border-radius:12px; background:var(--accent-cyan); margin-bottom:20px; }
.axis-card__title{ font-size:20px; font-weight:var(--fw-bold); color:#fff; margin:0 0 12px; padding:0 4px; }
.axis-card__body{ font-size:16px; line-height:1.85; color:rgba(255,255,255,.9); margin:0; padding:0 4px; }
.axis-card__lead{ color:#fff; font-weight:var(--fw-bold); }
/* 方法論邏輯模型圖 */
.mth-diagram{ background:var(--datas-bg); border-radius:var(--radius-lg); padding:32px 24px; margin-bottom:18px; }
.mth-diagram--img{ padding:40px 20px 20px; }
.mth-figure{ margin:0; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.mth-figure__img{ display:block; width:100%; max-width:858px; height:auto; margin:0 auto; }
.mth-spirit{ text-align:center; font-weight:var(--fw-bold); color:var(--primary); font-size:var(--fs-title); margin-bottom:20px; letter-spacing:.06em; }
.mth-chain{ display:flex; align-items:stretch; justify-content:center; gap:10px; }
.mth-stage{ flex:1 1 0; min-width:0; background:#fff; border:1px solid var(--gray-8); border-radius:12px; padding:18px 10px; text-align:center; display:flex; flex-direction:column; gap:6px; box-shadow:var(--elev-1); }
.mth-stage__zh{ font-weight:var(--fw-bold); color:var(--primary); font-size:16px; }
.mth-stage__en{ color:var(--accent-green); font-size:12.5px; font-weight:var(--fw-medium); }
.mth-arrow{ display:flex; align-items:center; color:var(--accent-green); flex:0 0 auto; }
.mth-arrow .ic{ width:22px; height:22px; }
.mth-note{ max-width:var(--maxw-text); margin:0 auto 30px; text-align:center; color:var(--gray-3); font-size:14px; line-height:1.9; }
.mth-body{ color:var(--gray-2); font-size:16px; line-height:2.05; }
.mth-body p{ margin:0 0 16px; } .mth-body p:last-child{ margin:0; }
.mth-key{ color:var(--accent-green); font-weight:var(--fw-medium); }
/* 三大主軸詳述：左右交錯（緣起色塊卡 + 主軸手風琴） */
.axis-detail{ display:flex; flex-direction:column; gap:56px; }
.axis-block{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:stretch; }
.axis-block--rev .axis-card2{ order:2; }
.axis-block--rev .axis-text{ order:1; }
/* 緣起色塊卡：收合青色＋；展開深藍＋緣起＋× */
.axis-card2{ position:relative; border-radius:var(--radius-card); min-height:380px; padding:40px 40px 88px;
  background:var(--accent-cyan); color:#fff; box-shadow:var(--elev-2); display:flex;
  transition:background-color .45s ease; }
.axis-card2.is-open{ background:var(--primary); }
.axis-card2__narr{ opacity:0; visibility:hidden; align-self:flex-start; transition:opacity .4s ease .08s; }
.axis-card2.is-open .axis-card2__narr{ opacity:1; visibility:visible; }
.axis-card2__narr-inner{ font-size:15.5px; line-height:1.95; color:#fff; }
.axis-card2__narr-inner p{ margin:0 0 14px; } .axis-card2__narr-inner p:last-child{ margin:0; }
.axis-card2__toggle{ position:absolute; right:28px; bottom:28px; width:44px; height:44px; padding:0; border:none;
  border-radius:50%; background:#fff; cursor:pointer; box-shadow:var(--elev-2);
  display:inline-flex; align-items:center; justify-content:center; transition:transform .15s; }
.axis-card2__toggle:hover{ transform:scale(1.06); }
.axis-card2__toggle .ic{ width:24px; height:24px; }
.axis-card2__icon{ display:inline-flex; }
.axis-card2__icon--plus{ color:var(--accent-green); }
.axis-card2__icon--close{ display:none; color:var(--primary); }
.axis-card2.is-open .axis-card2__icon--plus{ display:none; }
.axis-card2.is-open .axis-card2__icon--close{ display:inline-flex; }
/* 文字欄 */
.axis-text{ display:flex; flex-direction:column; padding:4px 0; }
.axis-text__title{ font-size:clamp(28px,3vw,42px); font-weight:var(--fw-bold); color:#0a0a0a; line-height:1.25; margin:0 0 22px; }
.axis-text__no{ font-size:.6em; vertical-align:super; margin-right:.18em; color:var(--gray-3); font-weight:var(--fw-bold); }
/* 主軸手風琴（每列分隔線 + 20px 標題；Step 綠字 + 改變階段/Outcome 條列） */
.accordion--axis2 .accordion__head{ padding:16px 0; font-size:20px; color:#0a0a0a; }
.accordion--axis2 .accordion__head .ic{ color:var(--gray-3); width:20px; height:20px; }
.axis-row__label{ font-weight:var(--fw-medium); }
.axis-row__text{ margin:0; color:var(--gray-2); font-size:16px; line-height:1.95; }
.axis-step__label{ font-weight:var(--fw-medium); }
.axis-step__no{ color:var(--accent-green); font-weight:var(--fw-bold); margin-right:8px; }
.accordion--axis2 .accordion__panel-inner{ padding:0 2px 18px; }
.axis-step__group{ margin-bottom:12px; } .axis-step__group:last-child{ margin-bottom:2px; }
.axis-step__sub{ display:block; font-weight:var(--fw-medium); color:#0a0a0a; font-size:15px; margin-bottom:5px; }
.axis-step__list{ margin:0; padding-left:20px; color:var(--gray-2); font-size:15px; line-height:1.85; }
.axis-step__list li{ margin-bottom:4px; }
.axis-more{ align-self:flex-start; margin-top:20px; display:inline-flex; align-items:center; gap:4px;
  color:#0a84ff; font-weight:var(--fw-medium); font-size:16px; text-decoration:none; }
.axis-more .ic{ width:20px; height:20px; }
.axis-more:hover{ text-decoration:underline; }
@media (prefers-reduced-motion: reduce){ .axis-card2, .axis-card2__narr{ transition:none; } }
@media (max-width:860px){
  .axis-cards{ grid-template-columns:1fr; }
  .mth-chain{ flex-direction:column; align-items:stretch; }
  .mth-arrow{ justify-content:center; transform:rotate(90deg); }
  .mth-figure__img{ width:auto; max-width:none; height:300px; }
  .axis-block, .axis-block--rev{ grid-template-columns:1fr; gap:28px; }
  .axis-block--rev .axis-card2, .axis-card2{ order:2; }
  .axis-block--rev .axis-text, .axis-text{ order:1; }
  .axis-card2{ min-height:280px; }
}

/* ---------- 8. responsive ---------- */
@media (max-width:1080px){
  .steps,.cards-3,.feedback{ grid-template-columns:repeat(2,1fr); }
  .story-grid{ grid-template-columns:repeat(2,1fr); }
  .stat-band{ grid-template-columns:repeat(2,1fr); }
  .ppf__grid,.hero--portrait .hero__grid,.hero--split-image .hero__grid,.highlight,.article,.spirit-cards{ grid-template-columns:1fr; }
  .article__title{ position:static; }
  .hero--portrait .hero__text{ min-height:0; }
  .hero--portrait .hero__sign{ margin-top:28px; }
  .hero--portrait .hero__photo{ min-height:0; aspect-ratio:16/11; }
  .bento{ grid-template-columns:repeat(2,1fr); grid-template-rows:none; grid-auto-rows:200px; }
  .bento .action-card{ grid-column:auto !important; grid-row:span 1 !important; }
  .action-card--lg{ grid-row:span 2 !important; }
  .a1-datas{ grid-template-columns:repeat(2,1fr); }
  .a1-ag,.a1-hl__grid,.a1-hl__grid--right{ grid-template-columns:1fr; }
  .a1-ag__card{ min-height:0; }
  .a1-hl__grid--right .a1-hl__pics{ order:-1; }
}
@media (max-width:720px){
  .nav{ display:none; } .site-header .nav-toggle{ display:inline-flex; }
  .nav.is-open{ display:flex; position:absolute; top:68px; left:0; right:0; flex-direction:column;
    background:#fff; border-bottom:1px solid var(--line); padding:12px; gap:4px; max-height:calc(100vh - 68px); overflow-y:auto; }
  .nav__item, .nav__item--dd{ display:block; width:100%; }
  .nav__link--dd{ justify-content:space-between; }
  .nav__link--dd .ic{ display:none; }
  .nav-dd{ position:static; opacity:1; visibility:visible; transform:none; padding:0 0 4px 14px; min-width:0; }
  .nav-dd__panel{ grid-template-columns:1fr; border:none; box-shadow:none; padding:0; background:transparent; gap:0; }
  .nav-dd__item{ padding:8px 10px; }
  .nav-dd__sub{ display:none; }
  .steps,.cards-3,.feedback,.story-grid,.stat-band,.bento,.a1-datas,.principles--open{ grid-template-columns:1fr; }
  .section{ padding:56px 0; }
  .container{ padding:0 20px; }
  .hero--home .hero__title{ font-size:42px; }
  .a1-intro__icons{ gap:36px; }
}
@media (max-width:480px){
  .container{ padding:0 16px; }
  .section,.section--tight{ padding:44px 0; }
  .hero--home{ padding:72px 0 52px; }
  .hero--home .hero__title{ font-size:34px; }
  .hero--cover{ min-height:clamp(340px,46vh,440px); }
  .hero--cover .hero__title{ font-size:30px; }
  .a1-other-card{ flex-basis:82vw; }
  .a1-ag__card{ padding:26px 22px 30px; }
}