/* ============================================================
   洽洽貓事務所 — style.css
   配色沿用舊站：黑 / 白 / 黃 / 灰
   ============================================================ */
:root {
  --paper:      #FFFFFF;   /* 白：頁面底、卡片、深色底上的文字 */
  --band:       #F7F7F7;   /* 淺灰：間隔區塊底（舊站 SERVICES / WORKS 的色帶） */
  --ink:        #1A1A1A;   /* 近黑：內文主色、深色區塊、頁尾 */
  --yellow:     #E9FF7A;   /* 萊姆綠：強調與轉換。對白底僅 1.10:1，
                              只能當「圖形色塊」或深色底上的文字，不可當淺底文字。
                              明度高，色塊在淺底上需靠細框界定邊界 */
  --ink-muted:  #555555;   /* 灰：說明文、次層內文 */
  --ink-soft:   #888888;   /* 淺灰字：metadata、微標籤 */
  --line:       #E8E8E8;   /* 分隔線 */
  --ink-faint:  #CFCFCF;   /* 更淡的灰：未選取的流程大數字 */
  --line-dark:  rgba(255, 255, 255, 0.22);
  --award:      #C0392B;   /* 獎項紅（沿用舊站獎項徽章色） */

  /* 標題與長文用宋體，介面文字（導覽、按鈕、標籤、表單、數字）用黑體。
     Space Mono 無中文字符，中文自動回退黑體 — 舊站的作法 */
  --font-serif: "Noto Serif TC", "Songti TC", serif;
  --font-ui: "Space Mono", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  /* 純思源黑體：需要數字端正時用它。--font-ui 以等寬字開頭，
     數字造型偏俏皮，不適合公司登記資訊這種要顯得可靠的地方。 */
  --font-han: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;

  /* 行高系統：顯示級收緊、內文放鬆，中間兩級銜接。
     原本 19 個值散落在 .8–2.55 之間，其中 1.9/1.95/2/2.05/2.1 五個值
     擠在同一區間，那不是層次是隨手寫。 */
  --lh-display: 1.2;   /* 區塊大標、首屏標語（28px 以上） */
  --lh-title:   1.5;   /* 中層標題（17–24px） */
  --lh-body:    1.9;   /* 閱讀段落（13–16px） */
  --lh-label:   1.6;   /* 微標籤（9–12px） */
  --lh-flat:    1;     /* 單行元件：圖示、按鈕、大數字 */

  --nav-height: 64px;
  /* 1200 是唯一能被 2/3/4/5/6/8/12 全部整除的常用容器寬度，且 1200÷12=100
     剛好是整數欄位單位。先前的 1216 = 2⁶×19，除以 3 得 405.33、除以 5 得
     243.2 —— 作品牆的三欄因此變成 401.33px 的小數欄，邊緣出現髮絲線。 */
  --container: 1200px;
  --gutter: 24px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  /* 轉場系統：原本 7 種時間（.25/.3/.35/.38/.4/.6/.7），.35 與 .38 的差別
     沒有人看得出來。依「改變什麼」分三級，而不是依「改哪個元件」。 */
  --dur-fast: .2s;   /* 顏色、背景、邊框 —— 游標一過就要有回應 */
  --dur:      .35s;  /* 位移、縮放、展開收合 */
  --dur-slow: .6s;   /* 進場、視差 —— 由捲動驅動，慢才有份量 */
  /* 註：@keyframes 的動畫時長不屬於本系統。轉場是「對操作的回應速度」，
     動畫是「編排好的運動長度」—— 跑馬燈 40s/60s、貓頭探出 6s、載入脈動 1.4s、
     首屏逐行升起 .95s、火花 .7s，各有自己的節奏，不該被收斂成同一組值。 */
}

@media (min-width: 768px) { :root { --gutter: 48px; } }

/* ============================================================
   Reset 與基礎
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-height) + 24px);
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1rem;
  background: var(--paper);
  color: var(--ink);
  line-height: var(--lh-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.no-scroll { overflow: hidden; }

img { max-width: 100%; display: block; }
[hidden] { display: none !important; }

h1, h2, h3, p, dl, dd, ol, ul, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
a { color: var(--ink); text-underline-offset: 3px; }

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: 72px 64px; }
@media (min-width: 768px) { .section { padding-block: 100px 88px; } }

.section--band { background: var(--band); }
.section--dark { background: var(--ink); color: var(--paper); }

/* 介面文字：微標籤 */
.mono {
  font-family: var(--font-ui);
  font-size: .625rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: var(--lh-label);
}

.prose p, p.prose {
  color: var(--ink-muted);
  font-size: .9375rem;
  line-height: var(--lh-body);
  margin-bottom: 1.5em;
  max-width: 38em;
}
.prose p:last-child, p.prose:last-child { margin-bottom: 0; }
.prose strong { color: var(--ink); font-weight: 700; }

.lead {
  font-size: 1.375rem;      /* 與主持人姓名同級，成為 ABOUT 的第二層標題 */
  font-weight: 900;
  letter-spacing: -.015em;
  color: var(--ink);
  line-height: var(--lh-title);
  margin-bottom: 1.5em;
  max-width: 38em;
}
.lead--spaced { margin-top: 2.5em; }

/* 標點分段：段落內部不可斷行，換行只發生在逗號、句號之後 */
.phrase { display: inline-block; }

/* 只給螢幕報讀器的文字 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 進場：淡入微上移 */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ============================================================
   區塊標題
   ============================================================ */
.section-head {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  padding-bottom: 20px;
  margin-bottom: 48px;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 768px) { .section-head { margin-bottom: 64px; } }

/* 黑底黃字徽章：淺底上唯一能讓黃色可讀的方式，同層級標籤全站沿用 */
/* 純文字＋萊姆綠底線：文字用近黑，淺底深底都讀得到，
   萊姆綠退為標記手勢而非色塊 */
.section-head__label {
  display: inline-block;
  background: var(--yellow);
  border: none;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: .5625rem;
  line-height: 1;
  letter-spacing: .25em;
  text-transform: uppercase;
  padding: 8px 12px 8px 12px;   /* 右內距少 2px：補償字距在末字後留下的空隙 */
  margin-bottom: 16px;
}

.section-head__title {
  font-size: clamp(1.75rem, 4vw, 2.7rem);
  font-weight: 900;
  letter-spacing: -.025em;
  line-height: var(--lh-display);
  color: var(--ink);
  flex: 1;
}

.section-head--invert { border-bottom-color: var(--line-dark); }
.section-head--invert .section-head__title { color: var(--paper); }
.section-head--invert .section-head__label { background: var(--yellow); color: var(--ink); }

/* 同層級標籤：主持人區塊等沿用 */
/* 第二層小標：色塊留給區塊級標籤（03 — EDUCATION），
   這一層用純文字，才不會兩種標籤互相搶 */
.block-label {
  display: block;
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .8125rem;
  line-height: var(--lh-label);
  letter-spacing: .16em;
  margin-bottom: 16px;
}

.section-head--row { flex-wrap: wrap; align-items: flex-end; }
.section-head--row > div { flex: 1; min-width: 220px; }

/* ============================================================
   按鈕（舊站：Space Mono 11px／字距 1.1px／內距 14×28／直角）
   ============================================================ */
.btn {
  display: inline-block;
  padding: 16px 28px;
  border-radius: 0;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .6875rem;
  letter-spacing: .1em;
  line-height: var(--lh-flat);
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

/* 黃底黑字：13.73:1，淺底深底皆成立 */
.btn--convert { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.btn--convert:hover { background: var(--ink); color: var(--yellow); border-color: var(--ink); }

/* 深色底上的次要按鈕 */
.btn--ghost { background: transparent; color: var(--paper); border-color: rgba(255,255,255,.5); font-weight: 400; }
.btn--ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* 淺色底上的次要按鈕 */
.btn--hairline { background: transparent; color: var(--ink); border-color: var(--ink); font-weight: 400; }
.btn--hairline:hover { background: var(--ink); color: var(--paper); }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nav-height);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  z-index: 100;
  transition: transform var(--dur) var(--ease),
              background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

/* 位於深色區塊（首屏、跑馬燈、包套、頁尾）時整條透明，
   讓首屏成為不被白條切斷的完整海報 */
.nav.on-dark {
  background: transparent;
  border-bottom-color: transparent;
}
/* 往下滑收起、往上滑冒出 */
.nav.is-hidden { transform: translateY(-100%); }

.nav__inner {
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
  height: 100%;
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav__brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .18em;
  margin-right: auto;
}
.nav__cat {
  width: 30px;
  height: auto;
  transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.nav__brand:hover .nav__cat { transform: rotate(-10deg); }

/* 透明狀態：品牌與連結轉白（貓頭是黑色圖形，反轉即為白色） */
.nav.on-dark .nav__brand { color: var(--paper); }
.nav.on-dark .nav__cat { filter: invert(1); }
.nav.on-dark .nav__links a { color: rgba(255, 255, 255, .82); }
.nav.on-dark .nav__links a:hover,
.nav.on-dark .nav__links a.is-active { color: var(--paper); }

/* LINE：導覽列裡的小圖示，接在「聯絡我們」之後，隨導覽列一起出現與隱藏。
   圖檔是黑底白字，白色導覽列上直接用原圖；透明狀態（首屏等深色區）則
   invert 成白底黑字 —— 與旁邊的貓頭 .nav__cat 同一套反轉規則。
   不加外框：導覽列上每多一道線都會讓那一條變吵。 */
.nav__line {
  /* 手機版不顯示 —— 那裡只剩漢堡一個元素，LINE 圖示會變成旁邊孤立的
     第二個圓形，沒有視覺歸屬。手機改收進選單裡（.nav__menu-line）。 */
  display: none;
  flex: none;
  width: 26px;
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav__line img { width: 100%; height: auto; }
.nav.on-dark .nav__line img { filter: invert(1); }
.nav__line:hover { transform: scale(1.12); }
.nav__line:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.nav.on-dark .nav__line:focus-visible { outline-color: var(--paper); }


.nav__links { display: none; }
.nav__links a {
  font-family: var(--font-ui);
  color: var(--ink-muted);
  text-decoration: none;
  font-size: .75rem;
  letter-spacing: .06em;
  padding: 8px 2px;
  border-bottom: 2px solid transparent;
  transition: color .4s var(--ease), border-color var(--dur-fast) var(--ease);
}
.nav__links a:hover, .nav__links a.is-active {
  color: var(--ink);
  border-bottom-color: var(--yellow);
}

.nav__cta {
  display: none;
  padding: 12px 20px;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
/* 首屏本身已有兩顆 CTA，導覽列的按鈕在此重複且會出現兩塊黃色，
   捲離首屏後才淡入接手 */
/* 首屏時降級為與其他選項同層級的文字，不搶黃色 */
.nav.at-hero .nav__cta {
  background: transparent;
  border-color: transparent;
  color: var(--ink-muted);
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: .75rem;
  letter-spacing: .06em;
  padding: 8px 2px;
}
.nav.at-hero.on-dark .nav__cta { color: rgba(255, 255, 255, .82); }
.nav.at-hero .nav__cta:hover { color: var(--ink); }
.nav.at-hero.on-dark .nav__cta:hover { color: var(--paper); }

.nav__burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  padding: 8px;
  background: none;
  border: none;
}
.nav__burger span {
  display: block;
  height: 1.5px;
  background: var(--ink);
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 1023px) {
  /* 手機版不留橫條，只留一顆浮動漢堡鍵 */
  .nav {
    height: auto;
    background: transparent;
    border-bottom: none;
    pointer-events: none;
  }
  .nav.is-hidden { transform: none; }   /* 漢堡鍵永遠在，不隨捲動收起 */
  .nav__inner { justify-content: flex-end; padding-block: 12px; }
  .nav__brand, .nav__cta { display: none; }

  /* 只有三條線，無底色無陰影；線色依背後區塊明暗自動切換 */
  .nav__burger {
    pointer-events: auto;
    width: 44px;
    height: 44px;
    padding: 12px 8px;
    background: none;
    border: none;
    box-shadow: none;
  }
  .nav__burger span {
    background: var(--ink);
    transition: background-color var(--dur-fast) var(--ease), transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
  }
  .nav.on-dark .nav__burger span { background: var(--paper); }
  /* 選單展開時面板是白底，線條固定為近黑 */
  .nav__burger[aria-expanded="true"] span { background: var(--ink) !important; }

  .nav__links {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 70px;
    /* 從漢堡往下掉的窄面板，靠右對齊 —— 與觸發它的按鈕有明確因果關係。
       原本滿版佔螢幕 88% 的寬度，但內容只有五個兩字詞，過度佔用版面。
       寬度由「加入官方 LINE」那行決定；窄螢幕時退回留邊的滿版。 */
    right: var(--gutter);
    left: auto;
    width: min(240px, calc(100vw - var(--gutter) * 2));
    background: var(--paper);
    border: 1px solid var(--line);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
    padding: 4px 20px 12px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
  }
  .nav__links.is-open { transform: none; opacity: 1; pointer-events: auto; }
  .nav__links a { padding: 16px 0; font-size: .875rem; border-bottom: 1px solid var(--line); }
  .nav__links a:last-child { border-bottom: none; }
  /* 選單文字一律置中。萊姆綠色塊是滿版的，若上面五條靠左就會一邊切齊、
     一邊置中，兩套對齊系統打架。 */
  .nav__links a { text-align: center; }

  /* LINE：行動而非導覽，用色塊與上面五條區隔。
     萊姆綠對白底只有 1.10，只能當底色不能當字色 —— 這裡是綠底黑字。 */
  .nav__menu-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 12px -20px -12px;
    padding: 16px 20px;
    background: var(--yellow);
    color: var(--ink);
    font-weight: 700;
    border-bottom: none;
  }
  .nav__menu-line::before {
    content: "";
    flex: none;
    width: 20px;
    height: 20px;
    background: url("../images/logo/line-02.png") center / contain no-repeat;
  }
  .nav.on-dark .nav__links.is-open .nav__menu-line { color: var(--ink); }
  /* 展開後面板是白底，但 .nav.on-dark 的連結是白字（第 301 行的基礎規則），
     在首圖上方展開時整排字會消失。與上面的漢堡線條同一個成因，
     連結當初漏掉了。用更高的權重覆蓋，不需要 !important。 */
  .nav.on-dark .nav__links.is-open a,
  .nav.on-dark .nav__links.is-open a:hover,
  .nav.on-dark .nav__links.is-open a.is-active { color: var(--ink); }
}

@media (min-width: 1024px) {
  .nav__links { display: flex; gap: 32px; }
  .nav__cta { display: inline-block; }
  .nav__burger { display: none; }
}

/* ============================================================
   HERO（舊站：100vh、標題 64.8px／行高 1.25／字重 900、第二行黃）
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--nav-height) + 84px);
  padding-bottom: 188px;
  overflow: hidden;
  background: var(--ink);
}

/* 桌機視窗較矮時（筆電扣掉瀏覽器介面常只剩 700 上下），
   首屏仍保有足夠內容區——舊站是直接固定 900px */
@media (min-width: 768px) {
  .hero { min-height: max(100svh, 820px); }
}

.hero__media { position: absolute; inset: -2% -3%; }
/* <picture> 是 inline 元素，不撐開的話裡面的 img 高度 100% 會失去參照 */
.hero__media picture { display: block; width: 100%; height: 100%; }
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;      /* 固定合成圖層，避免次像素接縫 */
  backface-visibility: hidden;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  /* 舊站數值：向右 .88 → .75(30%) → .35(50%) → .05(70%) → 0，右側照片幾乎不遮 */
  background:
    linear-gradient(to bottom,
      rgba(0,0,0,.45) 0%,
      rgba(0,0,0,0) 13%,
      rgba(0,0,0,0) 84%,
      rgba(0,0,0,.58) 100%),
    linear-gradient(to right,
      rgba(0,0,0,.72) 0%,
      rgba(0,0,0,.58) 30%,
      rgba(0,0,0,.26) 50%,
      rgba(0,0,0,.03) 70%,
      rgba(0,0,0,0) 100%);
}
@media (max-width: 1023px) {
  .hero__scrim {
    background: linear-gradient(to top,
      rgba(0,0,0,.78) 0%,
      rgba(0,0,0,.68) 45%,
      rgba(0,0,0,.34) 78%,
      rgba(0,0,0,.16) 100%);
  }
}

.hero__inner { position: relative; z-index: 2; }

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-ui);
  font-size: .625rem;
  letter-spacing: .24em;   /* 全大寫，但字距收窄一截以縮短整行 */
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  margin-bottom: 28px;
}
.hero__eyebrow .rule { width: 40px; height: 1px; background: var(--yellow); flex: none; }

.hero__title {
  font-size: clamp(2.25rem, 4.5vw, 4.05rem);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: var(--lh-display);
  color: var(--paper);
  margin-bottom: 28px;
}
/* 遮罩式逐行升起：外層裁切、內層由下往上 */
.hero__title .line {
  display: block;
  overflow: hidden;
  padding-bottom: .14em;
  margin-bottom: -.14em;
}
.hero__title .line__inner {
  display: block;
  transform: translateY(108%);
  animation: line-rise .95s var(--ease) forwards;
}
.hero__title .line:nth-child(2) { color: var(--yellow); }

@keyframes line-rise { to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .hero__title .line__inner { transform: none; animation: none; }
}

.hero__subtitle {
  font-family: var(--font-ui);
  color: rgba(255, 255, 255, .8);
  max-width: 34em;
  font-size: .8125rem;
  line-height: var(--lh-body);
  letter-spacing: .02em;
  margin-bottom: 36px;
}

.hero__buttons { display: flex; flex-wrap: wrap; gap: 12px; }

/* 四角定位標籤：純排版，不新增顏色或材質 */
.hero__frame {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.hero__mark {
  position: absolute;
  font-family: var(--font-ui);
  font-size: .5rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  white-space: nowrap;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .85);
}
/* 底部置中資訊 */
.hero__caption {
  position: absolute;
  left: 50%;
  bottom: 92px;
  transform: translateX(-50%);
  text-align: center;
  font-family: var(--font-ui);
  white-space: nowrap;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .85);
}
.hero__caption b {
  display: block;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .26em;
  color: rgba(255, 255, 255, .78);
}

/* 桌機：LINE 回到導覽列，接在「聯絡我們」之後。
   斷點必須跟漢堡一致（1024）—— 設在 900 的話，900~1023 之間會同時出現
   漢堡與導覽列上的 LINE 圖示，又回到「孤立的第二個圓形」那個狀態。 */
@media (min-width: 1024px) {
  .nav__line { display: inline-flex; }
  .nav__menu-line { display: none; }
}

/* eyebrow 比大標右緣多出 31px（實測 302 vs 271）。大標在 900px 以下一律是
   36px，所以這個落差從手機一路延續到平板直式，收窄的範圍要跟著到 900。 */
@media (max-width: 899px) {
  .hero__eyebrow { gap: 12px; letter-spacing: .14em; }
  .hero__eyebrow .rule { width: 28px; }
}

/* 窄螢幕收掉四角，只留底部一行，避免與內容打架 */
@media (max-width: 767px) {
  .hero { padding-bottom: 152px; }
  /* 內容改為靠下對齊。首圖立牌上的貓頭 logo 落在 hero 座標 237→340（實測），
     置中時正好被 eyebrow（249 起）與大標蓋住。靠下之後文字從 350 起算，
     logo 就露在上方的空白處。用 flex-end 而不是寫死位移量 ——
     手機高度從 667 到 932 都成立。 */
  .hero { align-items: flex-end; }
  /* 這行字在手機上會折成三行、又比大標長一截，依指示移除。桌機維持顯示。 */
  .hero__caption { display: none; }

  /* 副標收到與大標同寬。大標是 7 個中文字 × 36px ＝ 252px，副標 13px，
     19em ≒ 247px —— 不收的話副標會比大標往右多出 85px（實測），
     右邊界對不齊就會覺得「很右」。 */
  .hero__subtitle { max-width: 19em; }
}

/* ============================================================
   MARQUEE（深色反白，沿用舊站作法）
   ============================================================ */
/* 疊在首圖最下緣：背景直接是首屏那張照片本身，
   只加一層半透明黑，因此不會有兩張圖對不齊的接縫 */
.marquee {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  background: rgba(0, 0, 0, .65);
  overflow: hidden;
  padding-block: 16px;
}

.marquee__track {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  width: max-content;
  animation: marquee-scroll 40s linear infinite;   /* 時長由 JS 依寬度覆寫 */
}
.marquee:hover .marquee__track { animation-play-state: paused; }

/* 安靜版：字重放輕、字距拉開，讓黃色小閃電成為唯一的亮點 */
.marquee__item {
  display: flex;
  align-items: center;
  gap: 12px;           /* 閃電緊貼文字 */
  padding-right: 56px; /* 組與組之間的間距 */
  color: rgba(255, 255, 255, .82);
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: .625rem;
  letter-spacing: .22em;
  white-space: nowrap;
}
.marquee__sep { width: 8px; height: auto; flex: none; }

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ============================================================
   01 ABOUT
   ============================================================ */
/* 三個區塊共用同一套骨架：左欄主張／人像／標籤，右欄申論 */
.about__block { display: grid; gap: 24px; }
@media (min-width: 900px) {
  .about__block {
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 56px;
    align-items: start;
  }
}
.about__block + .about__block { margin-top: 56px; }

/* 需要分隔的區塊（主持人、方法）在上方加一條通欄細線 */
.about__block--rule {
  margin-top: 72px;
  padding-top: 72px;
  border-top: 1px solid var(--line);
}

.about__aside .lead { margin-bottom: 0; max-width: 12em; }
.about__main .prose p { max-width: 40em; }

.principal__name { line-height: var(--lh-title); }

/* 人像高度＝第一列高度（姓名頂端 → 軸線策略框底部），由 grid stretch 撐開 */
.principal__portrait { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 899px) {
  .principal__portrait { height: auto; aspect-ratio: 3 / 4; }
}
@media (min-width: 900px) {
  #principal { align-items: stretch; }
  #principal > .about__aside {
    grid-row: 1;
    position: relative;
    /* 保險：人像比例不瘦於 0.58（340 ÷ 586）。
       文案增長時停止拉長，底部改為不對齊，避免出現過度細長的圖 */
    max-height: 586px;
  }
  #principal > .about__main { grid-row: 1; }
  #principal > .fold__panel { grid-column: 2; grid-row: 2; }
  /* 圖片脫離流內，列高才會純粹由右欄內容決定；
     否則 height:100% 無法解析，會退回原生比例反過來撐高整列 */
  #principal .principal__portrait { position: absolute; inset: 0; }
}

.principal__name {
  font-size: 1.375rem;
  font-weight: 900;
  letter-spacing: -.015em;
  margin-bottom: 8px;
}
.principal__title {
  font-family: var(--font-ui);
  font-size: .6875rem;
  letter-spacing: .16em;
  color: var(--ink-muted);
  padding-bottom: 20px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.principal__bio {
  color: var(--ink-muted);
  font-size: .9375rem;
  line-height: var(--lh-body);
  max-width: 40em;
  margin-bottom: 32px;
}

/* 逆算式事業設計：四角括號框，作為主持人介紹下的輔助說明 */
.method-note {
  position: relative;
  padding: 32px 36px;
  margin: 8px 0 0;   /* 下邊距歸零，否則會把 grid 列撐高、人像跟著超出框底 */
  max-width: 44em;
}
.method-note::before,
.method-note::after,
.method-note__frame::before,
.method-note__frame::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  border-color: var(--ink);
  border-style: solid;
  border-width: 0;
}
.method-note::before  { top: 0; left: 0;  border-top-width: 1px; border-left-width: 1px; }
.method-note::after   { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
.method-note__frame { position: absolute; inset: 0; pointer-events: none; }
.method-note__frame::before { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.method-note__frame::after  { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }

.method-note__label {
  font-family: var(--font-ui);
  font-size: .5625rem;
  letter-spacing: .24em;
  color: var(--ink-soft);
  margin-bottom: 12px;
}
.method-note__heading {
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: var(--lh-title);
  color: var(--ink);
  margin-bottom: 16px;
}
.method-note__body p {
  font-family: var(--font-ui);
  color: var(--ink-muted);
  font-size: .8125rem;
  line-height: var(--lh-body);
  margin-bottom: .9em;
}
.method-note__body p:last-child { margin-bottom: 0; }
.method__bold {
  background: linear-gradient(transparent 58%, var(--yellow) 58%);
  padding: 0 2px;
  color: var(--ink);
  font-weight: 700;
}

/* ── 專業資歷摺疊區：通欄，四個分頁共用同一套列骨架 ── */
.fold__toggle { margin-top: 36px; }

.fold__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}

/* 精簡按鈕：不再滿版，尺寸貼合文字 */
.fold__toggle {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  background: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: 0;
  color: var(--paper);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .6875rem;
  letter-spacing: .14em;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.fold__toggle:hover,
.fold__toggle:focus-visible { color: var(--yellow); outline: none; }
.fold__icon { font-size: .875rem; line-height: 1; }

/* 內容預覽：告訴使用者裡面有什麼，作為點擊誘因 */
.fold__hint {
  font-family: var(--font-ui);
  font-size: .625rem;
  letter-spacing: .1em;
  color: var(--ink-soft);
  transition: opacity var(--dur-fast) var(--ease);
}
/* 展開後分頁列已列出同樣的四項，提示便隱藏避免重複 */
.fold__hint.is-hidden { opacity: 0; visibility: hidden; }

.fold__panel {
  margin-top: 40px;
  overflow: hidden;
  transition: max-height .5s var(--ease), opacity var(--dur) var(--ease);
  max-height: 6000px;
  opacity: 1;
}
.fold__panel.is-collapsed { max-height: 0; opacity: 0; }

.fold__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 28px;
  margin-top: 28px;
  border-bottom: 1px solid var(--line);
}
.fold__tab {
  background: none;
  border: none;
  padding: 12px 2px;
  color: var(--ink-soft);
  font-family: var(--font-ui);
  font-size: .6875rem;
  letter-spacing: .08em;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.fold__tab:hover { color: var(--ink); }
.fold__tab.is-active { color: var(--ink); font-weight: 700; border-bottom-color: var(--yellow); }

.fold__content { padding: 8px 0; }

.tab-pane { animation: tab-fade var(--dur) var(--ease); }
@keyframes tab-fade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* ── 四個分頁共用：左欄 metadata、右欄內容，一列一條線 ── */
.cred-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px 28px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 768px) {
  /* align-items: baseline 讓左欄年份與右欄首行的基線精確對齊 —— 先前是用
     line-height: 2.55 湊出等高的行框，右欄行高一改就會錯位 2.7px。 */
  .cred-row { grid-template-columns: 124px minmax(0, 1fr); gap: 16px; align-items: baseline; }
  /* 無索引欄的列（獲獎、新聞）：整列滿寬 */
  .cred-row--full { grid-template-columns: minmax(0, 1fr); }
}
.cred-row:last-child { border-bottom: none; }

.cred-meta {
  font-family: var(--font-ui);
  font-size: .6875rem;
  letter-spacing: .06em;
  color: var(--ink);
  line-height: var(--lh-label);
}
.cred-body { color: var(--ink-muted); font-size: .8125rem; line-height: var(--lh-body); }
.cred-body > li + li { margin-top: 2px; }
.cred-title { color: var(--ink); font-weight: 700; }

/* 群組標題（講座分類）：通欄細線標，不用色塊 */
/* 分類標籤：對齊左側索引欄 */
.cred-group {
  padding-top: 36px;
  margin-bottom: 12px;
}
.cred-group:first-child { padding-top: 8px; }
.cred-group__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--yellow);
  padding: 8px 12px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .625rem;
  letter-spacing: .12em;
  color: var(--ink);
}
.cred-group__icon { width: 14px; height: 14px; flex: none; }
.cred-group:first-child { padding-top: 8px; }

/* 獎項：紅色徽章是資訊而非裝飾，保留 */
.cred-awards { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.cred-awards li {
  background: var(--award);
  color: var(--paper);
  font-family: var(--font-ui);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .03em;
  padding: 4px 12px;
}

/* 新聞照片 */
.cred-photos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 24px; }
.cred-photos img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
@media (max-width: 639px) { .cred-photos { grid-template-columns: 1fr; } }

/* 新聞：刊物名與短網址並排，刊物名以萊姆綠底線做輕裝飾 */
.press-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; margin-top: 8px; }
.press-meta__source {
  font-family: var(--font-ui);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--ink);
  border-bottom: 3px solid var(--yellow);
  padding-bottom: 2px;
}
.cred-link {
  font-family: var(--font-ui);
  font-size: .5625rem;
  letter-spacing: .06em;
  color: var(--ink-soft);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
}
.cred-link:hover { color: var(--ink); text-decoration-color: var(--yellow); text-decoration-thickness: 2px; }

.cred-note {
  margin-top: 20px;
  font-family: var(--font-ui);
  font-size: .625rem;
  letter-spacing: .1em;
  color: var(--ink-soft);
}

/* ============================================================
   探頭彩蛋
   ============================================================ */
.peek { position: relative; height: 0; z-index: 5; }
.peek img {
  position: absolute;
  width: 64px;
  top: -32px;
  transition: transform var(--dur-slow) var(--ease);
}
.peek--right img { right: 0; transform: translateX(104%) rotate(-16deg); }
.peek--left img { left: 0; transform: translateX(-104%) rotate(16deg) scaleX(-1); }
.peek.is-peeking.peek--right img { transform: translateX(42%) rotate(-10deg); }
.peek.is-peeking.peek--left img { transform: translateX(-42%) rotate(10deg) scaleX(-1); }

/* ============================================================
   02 SERVICES — 卡片式，僅保留數字序號
   ============================================================ */
/* 橫向間距 24：(1200 - 24×2) ÷ 3 = 384，與 1216 時期的卡片同寬 */
.services__grid { display: grid; grid-template-columns: 1fr; gap: 40px 24px; }
@media (min-width: 640px) { .services__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services__grid { grid-template-columns: repeat(3, 1fr); } }

/* 三張卡片各自是一個白色平面，壓在 #F7F7F7 色帶上才「像卡片」 */
.service-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
}

.service-card__figure { position: relative; overflow: hidden; background: var(--band); }
.service-card__figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
.service-card:hover .service-card__figure img { transform: scale(1.04); }

/* grow 讓觸發列沉到卡片底部、三卡底線對齊；
   shrink 設 0 是保險：摺疊展開時優先吃掉這裡的伸展空間，
   空間不夠才把卡片撐高，內文永遠不會被壓到裁切 */
.service-card__content { flex: 1 0 auto; padding: 24px 24px 0; }

/* 舊站：序號在標題上方，淺灰 mono */
/* 原本 #CCC 壓在 #F7F7F7 上只有 1.5 對比，等同隱形 */
.service-card__num {
  font-family: var(--font-ui);
  font-size: .6875rem;   /* 11 */
  letter-spacing: .2em;
  color: var(--ink-muted);
  margin-bottom: 12px;
}
.service-card__title {
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: -.015em;
  margin-bottom: 12px;
}
.service-card__slogan {
  color: var(--ink);
  font-size: .9375rem;   /* 15 */
  font-weight: 600;      /* 級距只差 2px，落差改由字重扛 */
  line-height: var(--lh-body);
  margin-bottom: 12px;
}
/* 補充說明：黑體、不加粗，像註腳般支撐上方內容 */
.service-card__body {
  font-family: var(--font-ui);
  color: var(--ink-muted);
  font-size: .8125rem;   /* 13 */
  font-weight: 400;
  line-height: var(--lh-body);
  padding-top: 16px;
  border-top: 1px solid var(--line);
  margin-bottom: 0;
}
/* 強調只加深顏色、不動字重：13px 短段落一加粗就變花 */
.service-card__body strong,
.service-card__body mark {
  background: none;
  color: var(--ink);
  font-weight: 400;
}

/* ── 揭露區：觸發列＋其下方的摺疊，貼齊卡片底部讓三卡底線對齊 ── */
.service-card__disclose { margin-top: auto; }

.service-card__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 16px 24px;
  margin-top: 24px;
  background: transparent;
  border: none;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .6875rem;
  letter-spacing: .14em;
  text-align: left;
  transition: background-color var(--dur-fast) var(--ease);
}
.service-card__toggle-icon {
  font-size: .875rem;
  line-height: 1;
  transition: transform var(--dur) var(--ease);
}

/* 0fr → 1fr：不必用 JS 量高度就能做出高度動畫 */
.service-card__fold {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease);
}
.service-card__fold > div { overflow: hidden; }
.service-card__fold-inner { padding: 0 24px; }
.service-card__fold .tag-list { padding-block: 16px 20px; }

/* 卡片是白的，標籤再用白底就等於不存在 —— 改用色帶灰 */
.service-card__fold .tag { background: var(--band); }

/* 展開：觸發列轉萊姆綠底黑字，＋ 轉 45 度成為 × */
.service-card.is-open .service-card__fold { grid-template-rows: 1fr; }
.service-card.is-open .service-card__toggle { background: var(--yellow); color: var(--ink); }
.service-card.is-open .service-card__toggle-icon { transform: rotate(45deg); }
.service-card__toggle:focus-visible { background: var(--yellow); outline: none; }

/* 滑鼠裝置：感應範圍必須含觸發列＋摺疊區，
   否則滑鼠往下移去讀標籤時會離開觸發列，摺疊當場關掉 */
@media (hover: hover) and (pointer: fine) {
  .service-card__disclose:hover .service-card__fold { grid-template-rows: 1fr; }
  .service-card__disclose:hover .service-card__toggle { background: var(--yellow); color: var(--ink); }
  .service-card__disclose:hover .service-card__toggle-icon { transform: rotate(45deg); }
}

/* 舊站方塊標籤：底 #F7F7F7、框 #E8E8E8、字 #888 8px */
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
/* 填色必須與所在區塊底色不同，否則標籤等於不存在 */
.tag {
  display: inline-block;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink-muted);
  font-family: var(--font-ui);
  font-size: .6875rem;   /* 11 */
  font-weight: 400;      /* 升到 11px 後不再需要補字重，回到 400 比較秀氣 */
  letter-spacing: .06em;
  padding: 8px 12px;
}
/* 深色底：透明填色＋淺框，原本是淺灰底配白字，看不見 */
.package-band .tag {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .52);
  color: rgba(255, 255, 255, .95);
}

/* ============================================================
   萊姆綠色帶 — 全站唯一整區用主色的地方
   ============================================================ */
/* 就地改寫色彩變數，區塊內所有用到這些變數的規則自動換底，
   不必逐條複寫 */
.section--lime {
  background: var(--yellow);
  --line: rgba(0, 0, 0, .18);
  --band: rgba(0, 0, 0, .06);
  --ink-muted: #3A3A3A;   /* #555 壓在高明度萊姆綠上會顯髒，加深到 10.5:1 */
  --ink-soft: #4F4F4F;
  position: relative;
  overflow: hidden;       /* 大貓頭超出的部分由這裡裁掉 */
}
/* 內容一律浮在貓頭之上 */
.section--lime > .container { position: relative; z-index: 1; }

/* 流動帶給實心底色：貓頭從後方被乾淨切斷，
   單位名稱與照片永遠不會壓在黑色圖形上 */
.section--lime .edu-strip { background: var(--yellow); }

/* 底色本身就是萊姆綠，原本的萊姆綠標記全部要換角色：改由近黑擔任重音 */
.section--lime .section-head__label { background: var(--ink); color: var(--yellow); }

.section--lime .edu-course__field::before,
.section--lime .edu-org__dot { background: var(--ink); }

.section--lime .edu-invite__link { box-shadow: inset 0 -8px 0 var(--paper); }
.section--lime .edu-invite__link:hover,
.section--lime .edu-invite__link:focus-visible { box-shadow: inset 0 -1.4em 0 var(--paper); }

.section--lime .edu-toggle { border-color: var(--ink); }
.section--lime .edu-toggle:hover,
.section--lime .edu-toggle:focus-visible,
.section--lime .edu-disclose.is-open .edu-toggle {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--yellow);
}

/* ── 大貓頭：捲動視差，從右側探入再退出 ── */
.edu-peek {
  position: absolute;
  right: 0;
  top: 22%;
  width: clamp(260px, 27vw, 400px);
  height: auto;
  z-index: 0;
  pointer-events: none;
  opacity: .92;
  transform: translateX(100%);   /* 起始位置在畫面外，由 JS 依捲動推進 */
  will-change: transform;
}
/* 手機版塞不下，而且會蓋住內容 */
@media (max-width: 899px) { .edu-peek { display: none; } }
@media (prefers-reduced-motion: reduce) { .edu-peek { display: none; } }

/* ============================================================
   03 EDUCATION — 可收合，展開為 16:9 大圖輪播
   ============================================================ */
/* ── 數字帶：四個數值位數差很多（2019 對 3），
   標籤置頂才有齊平的上緣；數字靠直線分隔成一條資料帶 ── */
.edu-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 48px;        /* 欄距要夠寬，分隔線才有地方置中 */
  margin-bottom: 44px;
}
/* 四欄要到 1024 才排得下：768–1023 之間「2019 年起」會剛好塞滿欄寬，
   一點字型差異就溢出，這段維持兩欄 */
@media (min-width: 1024px) { .edu-stats { grid-template-columns: repeat(4, 1fr); } }

/* 分隔線落在欄距正中央，上下緣對齊數字的「字形」而非行框。
   行高 .9 讓行框比字形高出一截，直接用 top:0/bottom:0 會高出 7.9px。
   數值量自字體度量（墨跡上緣 .124em、墨跡高 .784em），
   用 em 表示才能跟著 clamp 的字級一起縮放 */
.edu-stat { position: relative; }
.edu-stat__value { position: relative; }
.edu-stat__value::before {
  content: "";
  position: absolute;
  left: -24px;           /* 欄距 48 的一半 */
  top: .124em;
  height: .784em;
  width: 1px;
  background: var(--line);
}
.edu-stat:first-child .edu-stat__value::before { content: none; }
/* 兩欄排列時，第三格是第二列的開頭，同樣不該有分隔線 */
@media (max-width: 1023px) {
  .edu-stat:nth-child(odd) .edu-stat__value::before { content: none; }
}

.edu-stat__label {
  font-family: var(--font-ui);
  font-size: .6875rem;
  letter-spacing: .18em;
  color: var(--ink-muted);
  margin-bottom: 16px;
}

.edu-stat__num {
  display: flex;
  align-items: baseline;
  gap: 1px;
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: var(--lh-flat);
  color: var(--ink);
}
.edu-stat__value {
  font-size: clamp(2.5rem, 5vw, 4rem);
  /* 等寬數字：跑動時位數不會左右抖 */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.edu-stat__suffix { font-size: clamp(1.5rem, 3vw, 2.25rem); }
/* 單位不跟著放大，落在基線上當數字的註腳，「3」「5」才不會顯得孤單 */
.edu-stat__unit {
  font-family: var(--font-ui);
  font-size: .9375rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-muted);
  margin-left: 8px;
}

.education__intro { margin-bottom: 28px; }
.education__intro .prose p { font-size: .9375rem; max-width: 42em; }

/* ── 開課項目：預設收合 ── */
.edu-disclose { margin-bottom: 32px; }

.edu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .6875rem;
  letter-spacing: .14em;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.edu-toggle:hover,
.edu-toggle:focus-visible {
  background: var(--yellow);
  border-color: var(--yellow);
  outline: none;
}
.edu-disclose.is-open .edu-toggle { background: var(--yellow); border-color: var(--yellow); }
.edu-toggle__icon { font-size: .875rem; line-height: 1; transition: transform var(--dur) var(--ease); }
.edu-disclose.is-open .edu-toggle__icon { transform: rotate(45deg); }

/* 0fr → 1fr：不必用 JS 量高度就能做出高度動畫 */
.edu-fold {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease);
}
.edu-fold > div { overflow: hidden; }
.edu-disclose.is-open .edu-fold { grid-template-rows: 1fr; }
.edu-fold__inner { padding-top: 24px; }

/* 六列單欄會拉掉近 400px 高度，而課名只用到欄寬的三分之一；
   桌機分兩欄，右側留白收回來，區塊也短一截 */
@media (min-width: 900px) {
  .edu-courses { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 48px; }
}

.edu-course {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 768px) {
  .edu-course { grid-template-columns: 104px minmax(0, 1fr); gap: 16px; align-items: baseline; }
}
.edu-course__field {
  font-family: var(--font-ui);
  font-size: .6875rem;
  letter-spacing: .06em;
  color: var(--ink);
  position: relative;
  padding-left: 16px;
}
/* 萊姆綠在淺底只能當圖形色塊，不能當文字 */
.edu-course__field::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: 6px;
  height: 6px;
  background: var(--yellow);
}
.edu-course__title { font-size: .9375rem; color: var(--ink-muted); line-height: var(--lh-body); }

/* ── 邀約：讀完就能接到「開始合作」 ── */
.edu-invite {
  font-size: .9375rem;
  color: var(--ink-muted);
  margin-bottom: 48px;
}
.edu-invite__link {
  color: var(--ink);
  text-decoration: none;
  /* 底線用萊姆綠色塊，維持「淺底不以黃色作文字」的規則 */
  box-shadow: inset 0 -8px 0 var(--yellow);
  padding: 0 3px;
  transition: box-shadow var(--dur-fast) var(--ease);
}
.edu-invite__link:hover,
.edu-invite__link:focus-visible { box-shadow: inset 0 -1.4em 0 var(--yellow); outline: none; }

/* ── 授課單位：兩排反向跑動 ── */
/* 色帶不再是一整塊：兩排各自成帶，中間留空隙 */
.edu-orgs { display: grid; gap: 12px; }
.edu-orgs__row { overflow: hidden; padding-block: 4px; }

/* 兩版擇一，改 index.html 的 data-marquee 即可 */
.edu-orgs[data-marquee="dark"]  .edu-orgs__row { background: var(--ink);   color: var(--paper); }
.edu-orgs[data-marquee="light"] .edu-orgs__row { background: var(--paper); color: var(--ink); }
.edu-orgs[data-marquee="dark"]  .edu-org { color: var(--paper); }
.edu-orgs[data-marquee="light"] .edu-org { color: var(--ink); }
/* 圓點在黑帶上用萊姆綠當亮點，在白帶上維持近黑 */
.section--lime .edu-orgs[data-marquee="dark"]  .edu-org__dot { background: var(--yellow); }
.section--lime .edu-orgs[data-marquee="light"] .edu-org__dot { background: var(--ink); }
.edu-orgs__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marquee-scroll 40s linear infinite;   /* 時長由 JS 依寬度覆寫 */
}
.edu-orgs__row--reverse .edu-orgs__track { animation-direction: reverse; }
.edu-orgs:hover .edu-orgs__track { animation-play-state: paused; }

.edu-org {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: none;
  padding-right: 32px;
  font-family: var(--font-ui);
  font-size: .9375rem;
  color: var(--ink-muted);
  white-space: nowrap;
}
.edu-org__dot { width: 6px; height: 6px; background: var(--yellow); flex: none; }

/* ── 照片帶：橫向流動，取代原本的靜態輪播 ── */
.edu-strip { overflow: hidden; margin-top: 32px; }
.edu-strip__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 60s linear infinite;
}
.edu-strip:hover .edu-strip__track { animation-play-state: paused; }
/* 間距用 margin 不用 gap：gap 只加在項目「之間」，
   循環單位就不是整數個間距，接回時會少一格 */
.edu-strip__item { flex: none; width: clamp(240px, 30vw, 420px); margin-right: 16px; background: var(--band); }
.edu-strip__item img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* 減少動態偏好：全部停住，內容仍完整可讀 */
@media (prefers-reduced-motion: reduce) {
  .edu-orgs__track,
  .edu-strip__track { animation: none; }
  .edu-fold, .edu-toggle__icon { transition: none; }
}

/* ============================================================
   04 PACKAGES
   ============================================================ */
/* 三條帶必須完全相接。原本留 2px 間距，區塊底色 #1A1A1A 會從縫裡透出來，
   在照片較亮的右半邊看起來就像沒對齊 */
/* 左右收進容器，與「新事業體開發三方向」下方的水平線切齊，
   與全站其他區塊同一套邊界邏輯 */
.packages__list {
  display: grid;
  gap: 0;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* 帶高是小數（465.23px），DPR 2 下邊界會落在半個實體像素上，
   仍可能渲染出髮絲線；重疊 1px 是最省事且看不出來的保險 */
.package-band + .package-band { margin-top: -1px; }

.package-band {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 380px;
  padding-block: 56px;
  overflow: hidden;
  /* 跑線發生在 hover 進出、圖片做 scale 過場的當下，靜止時沒有 ——
     成因是 overflow: hidden 的裁切由主執行緒計算，而過場中的 transform
     跑在合成器上，兩者在次像素邊界對不齊，就漏出一條沒被遮罩蓋到的照片。
     clip-path 是由合成器直接執行的裁切，與 transform 同一條路徑，
     不會有這個時間差。overflow 與 contain 一併保留作為後備。 */
  clip-path: inset(0);
  contain: paint;
  isolation: isolate;
}
.package-band__media { position: absolute; inset: 0; }
.package-band__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 預設就多撐 0.4%，並用 will-change 讓它從一開始就待在自己的合成層 ——
     過場才不會有「臨時提層」那一瞬間的重新光柵化 */
  transform: scale(1.004);
  will-change: transform;
  transition: transform var(--dur-slow) var(--ease);
}
.package-band:hover .package-band__media img { transform: scale(1.03); }
.package-band__scrim {
  position: absolute;
  inset: 0;
  /* 右端不再歸零：原本 70% 之後就沒有遮罩，照片直接見底，
     hover 縮放時那一側的位移特別明顯。留 .30 的底讓照片沉下去 */
  background:
    linear-gradient(to top, rgba(0,0,0,.30) 0%, rgba(0,0,0,0) 42%),
    linear-gradient(to right,
      rgba(0,0,0,.90) 0%,
      rgba(0,0,0,.78) 30%,
      rgba(0,0,0,.50) 50%,
      rgba(0,0,0,.36) 70%,
      rgba(0,0,0,.30) 100%);
}
@media (max-width: 1023px) {
  .package-band__scrim {
    background: linear-gradient(to top,
      rgba(0,0,0,.9) 0%,
      rgba(0,0,0,.8) 55%,
      rgba(0,0,0,.45) 100%);
  }
}

/* 帶本身已經是容器寬，這裡只負責帶內留白 */
.package-band__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-inline: 28px;
  display: grid;
  gap: 32px;
}
@media (min-width: 768px) { .package-band__inner { padding-inline: 44px; } }
/* 案例按鈕固定在右側較空的一側 */
@media (min-width: 1024px) {
  .package-band__inner {
    grid-template-columns: minmax(0, 1fr) 292px;
    align-items: end;
    gap: 56px;
  }
}
.package-band__body { max-width: 40em; }

.package-band__head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.package-band__rule { width: 32px; height: 1px; background: var(--yellow); flex: none; }
.package-band__letter {
  font-family: var(--font-ui);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  color: var(--yellow);
}
.package-band__keyword {
  font-family: var(--font-ui);
  font-size: .625rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--yellow);
}

.package-band__subtitle {
  font-size: clamp(1.375rem, 3.2vw, 2rem);
  font-weight: 900;
  letter-spacing: -.025em;
  color: var(--paper);
  margin-bottom: 20px;
}
.package-band__desc {
  color: rgba(255, 255, 255, .82);
  font-size: .9375rem;
  line-height: var(--lh-body);
  margin-bottom: 16px;
}
.package-band__quote { color: var(--yellow); font-size: 1rem; font-weight: 700; margin-bottom: 20px; }
.package-band .tag-list { margin-bottom: 20px; }
.package-band__fit {
  font-family: var(--font-ui);
  font-size: .8125rem;      /* 這是在點名客戶，10px 太小 */
  letter-spacing: .06em;
  line-height: var(--lh-body);
  color: rgba(255, 255, 255, .88);
}
.package-band__fit b { color: var(--yellow); font-weight: 400; }

/* 按鈕落在帶寬 74%~92%，那裡遮罩只剩 4%~1%，白字對比僅 1.86 —— 
   線框撐不住，改用毛玻璃自帶一層底，不再依賴遮罩 */
.package-band__case {
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  text-align: left;
  /* 萊姆綠半透明玻璃。.55 是安全下限：即使底下是純黑，
     疊出來的綠仍能讓黑字保有 4.73 對比，再低就會破。
     實際用 .72，飽和度更足且仍透得出照片 */
  background: rgba(233, 255, 122, .72);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  /* 1.5px 是「外框即結構」那類按鈕的粗細（.btn／.fold__toggle／.modal__next）。
     這顆已經有實色填底，外框只負責在照片上收邊，用全站的 1px 分隔線粗細 */
  border: 1px solid var(--yellow);
  /* 上緣打光：玻璃會在頂邊接到光，少了這道就只是一塊有框的色片。
     下緣壓一道暗線，讓它像有厚度的面而不是貼紙 */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -1px 0 rgba(26, 26, 26, .12);
  padding: 20px 20px;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: .6875rem;
  letter-spacing: .08em;
  line-height: var(--lh-label);
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .package-band__case { background: rgba(233, 255, 122, .78); }
}
/* 掠光：hover 時一道斜向高光掃過玻璃面 */
.package-band__case::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
    transparent 32%, rgba(255,255,255,.55) 48%, transparent 64%);
  transform: translateX(-130%);
  transition: transform var(--dur-slow) var(--ease);
  pointer-events: none;
}
/* hover 直接點亮成實心，玻璃感轉為實體 */
.package-band__case:hover,
.package-band__case:focus-visible {
  background: var(--yellow);
  outline: none;
}
.package-band__case:hover::after,
.package-band__case:focus-visible::after { transform: translateX(130%); }
/* 「看案例 →」本來就帶箭頭，行動指示交給它，不另外再加一個 */
.package-band__case .case-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--ink);
  margin-bottom: 8px;
}
.package-band__case .case-arrow {
  font-size: .875rem;
  line-height: 1;
  letter-spacing: 0;
  transition: transform var(--dur) var(--ease);
}
.package-band__case:hover .case-arrow,
.package-band__case:focus-visible .case-arrow { transform: translateX(6px); }
@media (prefers-reduced-motion: reduce) {
  .package-band__case .case-arrow { transition: none; }
}
.package-band__case .case-name {
  display: block;
  font-weight: 700;
  font-size: .875rem;
  letter-spacing: 0;      /* 中文專名不需要字距，撐開會顯得沒排過 */
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .package-band__case::after { display: none; }
}

/* ============================================================
   05 PROCESS — 桌機五道直欄；1024 以下改成舊站的單欄卡片節奏
   ============================================================ */
.process__flow {
  --num-size: clamp(5rem, 12vw, 11rem);
  --col-pad: 20px;   /* (1200 + 20×2) ÷ 5 = 248，五欄整除 */
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  /* 各欄內距左右對稱（圖示才置得了中），再把整組往外拉一個內距，
     首末欄的文字邊緣仍與容器切齊 */
  margin-inline: calc(var(--col-pad) * -1);
  /* 破格的數字要往上長 94px，這裡先讓出空間，才不會壓到區塊大標的線。
     用 padding 不用 margin —— margin 會和 section-head 的下邊界合併，加了等於沒加 */
  padding-top: 48px;
  /* 建立堆疊環境：數字用 z-index:-1 沉到背景，才不會掉到整個頁面底下 */
  position: relative;
  z-index: 0;
}

.process-step {
  position: relative;
  display: flex;
  flex-direction: column;
  /* 上方留白是圖示與破格大數字的舞台。不要用 justify-content: flex-end ——
     靠底對齊會讓說明底緣切齊，但說明長度不同會反推得標題錯開 24px，
     而標題才是這一列最強的水平節奏。標題對齊改由 __title 的固定槽負責。 */
  padding: 104px var(--col-pad) 8px;
  border-left: 1px solid var(--line);
}
.process-step:first-child { border-left: none; }

/* STEP 標籤只給單欄版用 —— 桌機的順序由右側大數字負責 */
.process-step__step { display: none; }

/* ── 標題區 ──
   數字已退成背景層，這裡只剩標題；靠底對齊讓一行與兩行的標題
   離下方那條線的距離一致 */
.process-step__head {
  display: flex;
  align-items: flex-end;
  margin-bottom: 20px;
}
.process-step__title {
  display: flex;
  align-items: flex-end;
  /* 4em = 68px，正好是最高的第三欄（兩行 ＋ inline-block 的降部空間）。
     用 min-height 而非 height：沒有任何一欄超過它，五欄因此都停在 68px，
     底線落在同一條線上；日後標題變長也不會被裁掉。 */
  min-height: 4em;
  /* 底線貼合文字寬度：width: fit-content 讓框縮到最長那一行，
     border 因此與標題等寬（實測各欄 100–151px，原本固定漸層一律約 112px）。
     先前用背景漸層是為了避免 position 搶走圖示的定位基準 —— 現在圖示改為
     絕對定位於欄位左上，基準在 .process-step 上，這個顧慮不再存在。 */
  /* max-content 而非 fit-content：fit-content 會把第三欄算窄 2px 而逼出第三行，
     底線因此掉了 12px。max-content 只在明確的 <br> 斷行，五欄高度才一致。 */
  width: max-content;
  max-width: 100%;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  font-size: 1.0625rem;
  font-weight: 900;
  letter-spacing: -.015em;
  line-height: var(--lh-title);
  color: var(--ink);
}
/* 大數字退成裝飾層：絕對定位、壓在文字後方，
   並往上破出欄位頂端（上方原本就是留白，不會撞到區塊大標） */
.process-step__num {
  position: absolute;
  top: -30px;
  /* 對齊內容右緣，而不是欄框 —— 欄組往外拉了一個內距，
     貼欄框會讓末欄的數字超出容器右界 22px */
  right: var(--col-pad);
  /* -1：連欄位的分隔線、標題下的橫線都會蓋在數字之上 */
  z-index: -1;
  font-family: var(--font-serif);
  font-size: var(--num-size);
  font-weight: 900;
  line-height: .8;
  letter-spacing: -.05em;
  color: var(--yellow);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  pointer-events: none;
}
/* 不再需要替內容加 position/z-index —— 數字已在負層。
   先前給標題區加 position: relative，反而讓它變成圖示的定位基準，
   圖示因此被拉到標題裡面 */

/* 五欄時在斷行點硬斷，不顯示逗號；單欄再反過來 */
.process-step__comma { display: none; }

.process-step__desc {
  color: var(--ink-muted);
  font-size: .8125rem;   /* 全站 9/11/13/15 級距 */
  line-height: var(--lh-body);
}

/* 桌機：圖示脫離文字流，沉到欄位底部置中，五欄因此切齊同一條線 */
/* 圖示左上、大數字右上，兩者構成每欄的表頭列 */
.process-step__icon {
  position: absolute;
  left: var(--col-pad);
  top: 8px;
  width: 40px;
  height: auto;
  filter: brightness(0);
  opacity: .62;
}

/* ── 1024 以下：單欄。沿用舊站節奏 ──
   STEP 標籤＋萊姆綠短線當作每張卡片的開頭，
   下方的圖示、標題、內文因此被歸成同一組；順序沿左緣往下讀 */
@media (max-width: 1023px) {
  .process__flow {
    margin-inline: 0;
    grid-template-columns: 1fr;
  }
  .process-step {
    display: block;
    /* 底部分隔線與全站一致用 1px；hover 時只換顏色不換粗細，
       版面才不會跳動。回饋主要由整片底色承擔 */
    padding: 24px 20px 32px;
    margin-inline: -20px;   /* 底色往外撐，文字仍與容器切齊 */
    margin-bottom: 40px;
    border-left: none;
    border-bottom: 1px solid var(--line);
    transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  }
  .process-step:first-child { padding-top: 4px; }
  .process-step:last-child { margin-bottom: 0; }

  /* 單欄時標題接成一句，逗號補回、不斷行 */
  .process-step__comma { display: inline; }
  .process-step__break { display: none; }

  .process-step__step {
    display: block;
    font-family: var(--font-ui);
    font-size: .8125rem;
    letter-spacing: .3em;
    color: var(--ink-muted);
    margin-bottom: 16px;
  }
  .process-step__step::after {
    content: "";
    display: block;
    width: 68px;
    height: 5px;
    background: var(--yellow);
    margin-top: 16px;
  }

  /* 單欄沒有跨欄對齊的需求，線也不需要 */
  .process-step__head {
    display: block;
    padding-bottom: 0;
    margin-bottom: 16px;
    background-image: none;
  }
  .process-step__title {
    display: block;
    min-height: 0;
    font-size: 1.375rem;
    line-height: var(--lh-title);
  }
  .process-step__num { display: none; }   /* 順序改由 STEP 標籤表達 */

  /* 圖示回到文字流，排在標題前面 */
  .process-step__icon {
    position: static;
    transform: none;
    display: inline-block;
    vertical-align: -.22em;
    width: 26px;
    margin-right: 12px;
    opacity: .75;
  }

  .process-step__desc { font-size: .9375rem; line-height: var(--lh-body); }
}

/* 滑鼠裝置：hover 時底部色塊亮起，卡片同時浮出很淡的底色 */
@media (hover: hover) and (pointer: fine) {
  .process-step:hover {
    background: rgba(233, 255, 122, .24);
    border-bottom-color: var(--yellow);
  }
}

@media (max-width: 639px) {
  .process-step { padding: 20px 16px 28px; margin-inline: -16px; margin-bottom: 32px; }
  .process-step__title { font-size: 1.25rem; }
  .process-step__step { font-size: .75rem; letter-spacing: .26em; }
}

@media (prefers-reduced-motion: reduce) {
  .process-step { transition: none; }
}

/* ============================================================
   06 WORKS — 封面 16:9
   ============================================================ */
/* 按鈕在容器內靠右 —— 容器本身已貼齊右緣，但按鈕原本是靠左排 */
/* 桌機：大標在左、篩選在右，同一列的刻意構圖 */
.works__filters { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
/* 手機：兩者變成上下堆疊，篩選若還留在靠右就會自己浮在右邊，左緣跟畫面上
   任何元素都對不齊（實測大標左緣 24、第一顆鈕左緣 77）。改為靠左，
   與大標、作品卡標題共用同一條垂直線。 */
@media (max-width: 767px) {
  .works__filters { justify-content: flex-start; }
}
.filter-btn {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-muted);
  padding: 8px 20px;
  border-radius: 0;
  font-family: var(--font-ui);
  font-size: .6875rem;
  letter-spacing: .1em;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.filter-btn:hover { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.filter-btn.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }


.works__status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-block: 56px;
  color: var(--ink-muted);
}
.works__loading-cat { width: 44px; animation: cat-pulse 1.4s var(--ease) infinite; }
@keyframes cat-pulse {
  0%, 100% { opacity: .35; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-5px); }
}

/* 間距須同時為 4 與 3 的倍數：(1200 - 12×2) ÷ 3 = 392，三欄整除 */
.works__grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .works__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .works__grid { grid-template-columns: repeat(3, 1fr); } }

.work-card {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
}
.work-card.is-hidden { display: none; }
.work-card.is-fading { opacity: 0; }

/* 16:9 與裁切由 media 負責，卡片高度自由 —— 文字因此能接在圖片下方。
   底色與欄距同為色帶灰：欄寬可能是小數，圖片邊緣的次像素縫隙會露出底色，
   同色就看不出來。 */
.work-card__media {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--band);
}
.work-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 預設彩色 —— 灰階綁在 :hover 上時，沒有 hover 的手機永遠看不到作品的顏色。
     作品本身就是論證，不該藏起來。 */
  /* 預設就多撐 0.3%：確保圖片一定蓋滿小數寬度的容器，不留次像素縫 */
  transform: scale(1.003);
  transition: transform var(--dur-slow) var(--ease);
}
.work-card:hover img { transform: scale(1.045); }

/* 文字在左、箭頭在右並與整個文字區垂直置中 */
.work-card__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* 右內距 4px：箭頭平常退在內側，hover 位移 2px 後仍不碰到卡片邊界 */
  padding: 14px 4px 0 2px;
}
.work-card__texts { min-width: 0; }
.work-card__title {
  color: var(--ink);
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: -.005em;
  line-height: var(--lh-title);
}
.work-card__arrow {
  flex: none;
  font-family: var(--font-ui);
  color: var(--ink-soft);
  transition: transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.work-card:hover .work-card__arrow { transform: translateX(2px); color: var(--ink); }
.work-card__subtitle {
  color: var(--ink-muted);
  font-size: .8125rem;
  font-weight: 400;
  line-height: var(--lh-title);
  margin-top: 2px;
}

/* ============================================================
   作品彈窗
   ============================================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: color-mix(in srgb, var(--ink) 72%, transparent);
  backdrop-filter: blur(10px) saturate(.9);
  -webkit-backdrop-filter: blur(10px) saturate(.9);
  display: flex;
  align-items: center;
  justify-content: center;
  /* 高度用 dvh 而非 vh。iOS Safari 的 vh 是「網址列收起時」的最大高度，
     但實際可見區要再扣掉上下工具列（約 140px）—— 844 的機身上，94vh 的
     彈窗有 793px，可見卻只有 704px，超出的 89px 就是 ✕ 與 NEXT 按不到的
     原因。dvh 會跟著工具列即時變化，永遠等於真正看得到的高度。 */
  height: 100vh;          /* 舊瀏覽器 fallback */
  height: 100dvh;
  padding: 16px;
  /* 瀏海與 home indicator 的安全區。沒有時 env() 回傳 0，max() 保底 16px。 */
  padding-top: max(16px, env(safe-area-inset-top));
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}
.modal__box {
  background: var(--paper);
  max-width: 900px;
  width: 100%;
  /* 相對於 .modal 扣掉內距後的高度，不再用 vh —— 這樣不管工具列收起或展開，
     盒子都不可能超出可見範圍。桌機留 90% 當呼吸空間。 */
  max-height: 90%;
  /* 盒子本身不捲動 —— 捲動交給內層 .modal__scroll。這樣 ✕ 與圖片留在不捲的
     外層，使用者捲到哪都關得掉、也看得到圖。 */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  animation: modal-in var(--dur) var(--ease);
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

/* 關閉鈕與輪播控制項共用同一套外觀：深色玻璃、36px 方形 */
.modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  /* 不用 backdrop-filter：Chromium 會在元素邊緣採樣到框外像素，產生一圈亮邊，
     這就是 ✕ 偶爾出現白線的原因。改用更實的底色補回可讀性。 */
  background: color-mix(in srgb, var(--ink) 78%, transparent);
  color: var(--paper);
  font-size: .875rem;
  z-index: 6;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.modal__close:hover { background: var(--yellow); color: var(--ink); }

/* 捲動區：圖片與文字一起捲 —— 只讓文字在窄縫裡捲並不直覺。
   不捲的只有兩樣：右上角的 ✕ 與底部的作品導覽，兩者都掛在 .modal__box 上。
   overscroll-behavior 避免捲到底時把整頁一起帶動。 */
/* 固定頁腳：作品前後導覽。與 ✕ 一樣掛在不捲的 .modal__box 上，捲到哪都按得到。
   上緣細線把它與捲動內容分開，避免內容從底下透出來時看起來黏在一起。 */
.modal__footer {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 16px 44px;
  border-top: 1px solid var(--line);
  background: var(--paper);
}
.modal__worknav { display: flex; align-items: stretch; gap: 8px; }
.modal__scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}
.modal__carousel { position: relative; }
/* 底色用近黑而非淺灰：盒寬為小數時右緣會有次像素接縫，深色接縫在照片上看不
   出來，淺灰接縫則會讀成一條白線。模糊底圖本來就蓋滿這層，底色只在接縫露出。 */
.modal__stage {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  overflow: hidden;
}
/* 圖片完整顯示，不裁切 */
.modal__stage #modal-image {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* 由 works.js 依實際比例掛上：差距 <2% 時填滿，消掉那條幾像素的黑邊 */
.modal__stage #modal-image.is-fill { object-fit: cover; }
/* 比例不是 16:9 時，用同一張放大模糊填掉留白，畫框才不會空掉 */
.modal__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.15);
  filter: blur(26px) saturate(1.15) brightness(.82);
}

/* 左右翻頁：平常只有白色符號，hover 才浮出淺灰底 */
.modal__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 72px;
  border: none;
  background: transparent;
  color: var(--paper);
  font-size: 1.75rem;
  line-height: 1;
  z-index: 4;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .45);   /* 淺色圖上也看得見 */
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.modal__nav:hover,
.modal__nav:focus-visible {
  background: rgba(255, 255, 255, .22);
  outline: none;
}
.modal__nav--prev { left: 0; }
.modal__nav--next { right: 0; }
.modal__nav[disabled] { display: none; }

/* 圓點：放在圖片下方自己的淺灰條裡，不壓在圖上、不做陰影 */
/* margin-top: -1px 是必要的：舞台高 = 900 ÷ (16/9) = 506.25，底緣落在小數位置，
   瀏覽器必須在該列做混色，於是圖片與圓點條之間留下一道半透明的邊。
   把圓點條往上壓 1px 蓋掉那一列 —— 圖片少 1px 完全無感，線就消失了。
   position + z-index 確保它蓋在舞台之上而不是被蓋住。 */
.modal__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 32px;
  margin-top: -1px;
  position: relative;
  z-index: 2;
  background: var(--band);
}
.modal__dots[hidden] { display: none; }
.modal__dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(26, 26, 26, .22);
  transition: background-color var(--dur-fast) var(--ease);
}
.modal__dot.is-current { background: var(--yellow); }

/* 標題列：右側 Next → 導向下一件作品 */
/* NEXT 與大標同一列並垂直置中 —— 副標已移出這一列。
   上距放在這一列而非大標身上，列高才等於大標高，NEXT 才拉得到一樣高 */
.modal__titlebar { margin-top: 16px; }
/* 年份：副標之後自成一行的 metadata */
.modal__year { color: var(--ink-soft); letter-spacing: .2em; margin-top: 12px; }

.modal__next {
  flex: none;
  /* 無邊線的萊姆綠標籤 */
  background: var(--yellow);
  border: none;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .12em;
  height: 40px;   /* 移到固定頁腳後不再與大標同列，改為明確高度 */
  display: inline-flex;
  align-items: center;
  padding: 0 20px;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.modal__next:hover { background: var(--ink); color: var(--yellow); }
.modal__next:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* 左右分欄從最上緣開始：標籤欄因此多出約 150px 跑道，標籤最多的那件（9 個）
   才不會比左欄長；右上角也不再空著。手機版回到單欄。 */
.modal__info { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 32px 44px 48px; }
@media (min-width: 720px) {
  /* 289 = 標籤 244 ＋ 內距 44 ＋ 分隔線 1。column-gap 收為 0，兩欄之間的
     88px 通道由左右各 44px 的內距構成，分隔線正好落在通道中央。 */
  .modal__info { grid-template-columns: minmax(0, 1fr) 289px; column-gap: 0; }
  .modal__main { padding-right: 44px; }
  /* 用漸層而非 border：線向下淡出，尾端自然消失，不必去對齊長度會變動的內文底緣。
     線佔 x 0–1px，中心在 0.5px —— 下面的萊姆段與 CREATION 都以此為準對齊。 */
  .modal__tags {
    position: relative;
    /* 線的長度＝這一欄的高度。標籤只有兩個時會短到失去導引作用，
       min-height 讓它至少延伸到內文第三行附近（實測內文第三行底約在 290px，
       扣掉資訊區上內距 32px 得 258，取級距上的 260）。 */
    min-height: 260px;
    padding-left: 44px;
    background-image: linear-gradient(to bottom, var(--line) 0 62%, transparent 96%);
    background-size: 1px 100%;
    background-position: left top;
    background-repeat: no-repeat;
  }
  /* 垂直標籤壓在分隔線上，白底把線切斷 —— 線因此看起來是從標籤兩端長出去的。
     vertical-rl ＋ rotate(180deg) 讓字由下往上讀。
     用近黑而非萊姆綠：綠對白底 1.10:1，做文字一律不成立。 */
  .modal__tags::before {
    content: "CREATION";
    position: absolute;
    left: .5px;   /* 線的中心 */
    top: 16px;
    writing-mode: vertical-rl;
    transform: translateX(-50%) rotate(180deg);
    font-family: var(--font-ui);
    font-size: .5625rem;
    font-weight: 700;
    letter-spacing: .28em;
    color: var(--ink);
    background: var(--paper);
    padding: 12px 0;
  }
  /* 分隔線頂端一小段萊姆綠，作為這一區的色彩落點 */
  /* 3px 寬要對齊 1px 的線，左緣得退 1px：spans -1→2，中心 0.5 與線一致 */
  .modal__tags::after {
    content: "";
    position: absolute;
    left: -1px;
    top: 0;
    width: 3px;
    height: 16px;
    background: var(--yellow);
  }
}
.modal__main { display: flex; flex-direction: column; min-width: 0; }



/* 分類：與縮圖一致用英文原始值、萊姆綠 */
/* 深色而非萊姆綠：萊姆綠對白底只有 1.10:1，在淺底上做文字一律不成立 */
/* 分類是導覽性質，沿用專業資歷刊物名那套「萊姆綠底線輕裝飾」（.press-meta__source）。
   align-self: flex-start 讓底線只跟文字等寬 —— 這是 flex 直欄裡的關鍵，
   否則子項預設 stretch，底線會拉滿整個資訊區。
   底線用萊姆綠而非文字用萊姆綠：綠對白底只有 1.10:1，只能當色塊。 */
.modal__cat {
  align-self: flex-start;
  color: var(--ink);
  letter-spacing: .18em;
  border-bottom: 3px solid var(--yellow);
  padding-bottom: 4px;
}

/* 上一件／下一件 */
/* align-self: stretch 讓這層先撐到大標的高度，裡面的 NEXT 才跟著等高 */
/* 方形圖示鈕，與 NEXT 等高並排。外框沿用 .btn 的 1.5px 語彙。 */
.modal__prev-work {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1.5px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: .875rem;
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.modal__prev-work:hover { background: var(--yellow); border-color: var(--yellow); }
.modal__prev-work:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.modal__title { font-size: 1.5rem; font-weight: 900; letter-spacing: -.02em; }
.modal__subtitle { color: var(--ink-muted); font-size: 1.0625rem; margin-top: 4px; }
.modal__body { margin-top: 24px; }
@media (min-width: 720px) {
}

/* ── 手機版：照舊站的順序重排 ──
   分類 → 大標 → 副標 → 年份 → 內文 → 標籤 → 上一件／下一件。
   標題列用 display:contents 攤平，裡面的大標與按鈕才能各自排序 */
@media (max-width: 719px) {
  /* 手機空間本來就不夠，用滿可見高度（100% ＝ .modal 扣掉安全區後的高度） */
  .modal__box { max-height: 100%; }
  .modal__info { padding: 28px 24px 36px; }
  .modal__titlebar { display: contents; }
  .modal__cat { order: 1; }
  .modal__title { order: 2; font-size: 1.375rem; }
  .modal__subtitle { order: 3; }
  .modal__year { order: 4; }
  /* 單欄時左欄在上、標籤在下。.modal__main 內部的 order 另外算，不受此影響 */
  .modal__main { order: 1; }
  .modal__tags { order: 2; }
  /* order 5：接在年份之後。改名自 .modal__cols 時漏掉這行，內文因此排到最前、
     把分類與大標擠到最底 */
  .modal__body { order: 5; margin-top: 20px; }
  .modal__footer { padding: 12px 24px; }
  /* 手機沒有 hover，按鈕必須常駐可見；細框樣式已在基底規則裡 */
  .modal__prev-work { display: flex; height: 44px; opacity: 1; }
  .modal__next { height: 44px; flex: 1; justify-content: center; }
  .modal__prev-work { width: 44px; height: 44px; }
  .modal__worknav { flex: 1; }
  .modal__nav { width: 40px; height: 56px; font-size: 1.375rem; }
  .modal__close { width: 32px; height: 32px; top: 10px; right: 10px; }
}
/* 一個標籤一行、靠左 —— 欄位右緣本來就與 NEXT 的右緣同為資訊區內容右界 */
/* align-self: start 讓標籤欄貼齊頂端，不被 grid 拉成滿高 */
.modal__tags { display: flex; flex-direction: column; align-items: flex-start; align-self: start; gap: 8px; }
/* 手機改回換行排列：直排會讓 5 個標籤佔掉 226px，換行只要約 96px。
   桌機維持一個一行（右欄夠寬，直排好讀）。
   註：這條必須放在基底規則「之後」—— 媒體查詢不會提高優先權，同權重下
   永遠是後面的規則勝出，先前放在前面完全沒有生效。 */
@media (max-width: 719px) {
  .modal__tags { flex-direction: row; flex-wrap: wrap; align-content: flex-start; }
}
/* 全域有 img { display: block }，閃電因此會自成一行。改用 inline-flex 讓它與
   文字同列，align-items: center 做垂直精確置中（vertical-align 只能對到基線
   附近，字級一變就會歪）。間距交給 gap，不用 margin。 */
.modal__tags .tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
}
/* 與跑馬燈 .marquee__sep 同一枚閃電、同一個尺寸 */
.tag__bolt { flex: none; width: 8px; height: auto; }
.modal__description p { max-width: 34em; }
.modal__link {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--font-ui);
  font-size: .6875rem;
  letter-spacing: .1em;
  font-weight: 700;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--yellow);
  text-decoration-thickness: 3px;
}

/* ============================================================
   CONSULT（舊站：黃底 + 深色價格卡）
   ============================================================ */
.consult {
  position: relative;
  background: var(--yellow);
  /* 區塊高度由方塊決定：240 卡片 ＋ 24 框距 ＋ 上下各 40 ＝ 344。
     設計稿反推是 408，再依指示整區收 15%（實測 344／408 ＝ −15.7%）。 */
  padding-block: 40px;
  overflow: hidden;
}
.consult__inner { display: grid; gap: 40px; position: relative; z-index: 2; }
@media (min-width: 1024px) {
  /* 1.15fr/.85fr 這種比例在任何容器寬度下都會產生小數，改為固定右欄 */
  .consult__inner { grid-template-columns: minmax(0, 1fr) 480px; gap: 72px; align-items: center; }
}

/* 黑底黃字徽章。閃電用背景圖而非 emoji —— emoji 各平台造型不一，也無法與
   品牌的閃電一致。inline-flex + align-items 做垂直精確置中。 */
.consult__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--ink);
  color: var(--yellow);
  padding: 4px 12px;
  letter-spacing: .24em;
  margin-bottom: 24px;
}
.consult__eyebrow::before {
  content: "";
  flex: none;
  width: 8px;
  height: 10px;
  background: url("../images/logo/bolt-single-yellow.png") center / contain no-repeat;
}
/* 第一行「好想法？」的字級要落在首屏大標與第二行之間。
   倍率不能超過 1.125 —— 本區基準是 4vw、首屏是 4.5vw，1.15 倍會變成 4.6vw，
   在中間寬度（實測 992px）反而超過首屏大標。取 1.1em ＝ 4.4vw，
   確保在任何視窗寬度都夾在兩者中間。 */
.consult__title .line:first-child {
  display: block;
  font-size: 1.1em;
  line-height: 1.05;
  margin-bottom: .06em;
}
.consult__title {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: var(--lh-display);
  color: var(--ink);
  margin-bottom: 20px;
}
.consult__title .line { display: block; }
.consult__body {
  color: var(--ink);
  font-size: .9375rem;
  line-height: var(--lh-body);
  /* 21em ≒ 每行 21 個中文字。標題已經破格放大，內文再拉長就沒有主次。 */
  max-width: 21em;
  /* balance 讓各行長度自動拉平。這裡不能用 text-align: justify ——
     兩端對齊不會拉伸最後一行，而本段只有兩行、短的正好是最後一行，
     justify 完全無效。實測參差 85px（27%）。 */
  text-wrap: balance;
}
/* 補充說明：黑體小字，與上方內文拉開層級 —— 它是條件說明不是主張 */
.consult__note {
  font-family: var(--font-han);
  font-size: .75rem;
  line-height: var(--lh-title);
  color: rgba(26, 26, 26, .62);
  margin-top: 12px;
  max-width: 32em;
}

/* 黑卡：固定正方形，寬度不隨版面伸縮 —— 拉寬之後就不像一則宣傳訊息，
   而像一條色帶。四角框移到黑塊「外面」，像把內容夾住，引導視線進去。
   外層只負責定位與留出框線的距離，本身透明。 */
.consult__card {
  position: relative;
  width: fit-content;
  margin-inline: auto;
  padding: 12px;
}
/* 四角框在外層邊界，因此落在黑塊外側 18px 處。
   底色是萊姆綠，所以框線用近黑（在黑塊上時才會用萊姆綠）。 */
.consult__card::before,
.consult__card::after,
.consult__card-frame::before,
.consult__card-frame::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-color: var(--ink);
  border-style: solid;
  border-width: 0;
  pointer-events: none;
}
.consult__card::before { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.consult__card::after { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
.consult__card-frame { position: absolute; inset: 0; pointer-events: none; }
.consult__card-frame::before { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.consult__card-frame::after { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }

/* 黑塊本身：正方形，內容垂直置中 */
.consult__card-inner {
  /* 寬度必須是明確值。外層是 fit-content，這裡若寫 100% 會變成循環參照 ——
     寬度會塌成內容寬（實測 193px），aspect-ratio 再被內容撐破成 193×251。 */
  width: 240px;
  aspect-ratio: 1;
  background: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 20px;
  text-align: center;
}

/* 標籤：原本 .55 的灰在深底上只有 5.9，且字太小。提到 .78 並放大一級 */
.consult__price-label {
  font-family: var(--font-ui);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .22em;
  color: rgba(255, 255, 255, .78);
  margin-bottom: 20px;
}
.consult__price {
  color: var(--yellow);
  /* 固定 3rem，不用 vw。卡片本身已經是固定 240 的物件，價格若跟著視窗
     縮放就會和卡片脫鉤 —— 實測 768px 時 5vw 只有 40px，價格只佔卡片 33%，
     看起來像在陪襯標籤而不是主角。
     卡片收到 240 之後，56px 的價格加上其餘元素共 203px，會撐破 240 的方塊；
     48px 時內容合計 174px，佔卡片 53%，與原本的比例一致。 */
  font-size: 3rem;
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: var(--lh-flat);
}
/* 單位放大並提亮：原本 10px／.55 在深底上讀不到 */
.consult__price .unit {
  display: block;
  font-family: var(--font-han);
  font-size: .8125rem;
  font-weight: 400;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .72);
  margin-top: 10px;
}
/* 按鈕貼合文字並置中：滿版時萊姆綠的面積比價格還大，會把主角從 5,000 搶走 */
.consult__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: auto;
  align-self: center;
  margin-top: 24px;
  padding: 14px 32px;
  font-size: .8125rem;
  letter-spacing: .08em;
}
.consult__card .btn--convert:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* 窄螢幕：360 的方塊會超出左右留白，改成隨視窗收，但仍維持正方形 */
@media (max-width: 460px) {
  .consult__card-inner { width: min(240px, calc(100vw - 80px)); }
  .consult__card { padding: 10px; }
}

@media (max-width: 1023px) {
  .consult { padding-block: 64px; }
}

/* ============================================================
   07 CONTACT
   ============================================================ */
.contact__layout { display: grid; gap: 48px; }
@media (min-width: 1024px) {
  .contact__layout { grid-template-columns: 520px minmax(0, 1fr); gap: 72px; align-items: start; }
}

/* 與 CONSULT 同樣收在 21 字，兩區的內文節奏一致。
   選擇器要帶上 p —— .prose p, p.prose 的 38em 權重是 0,1,1，
   單靠 .contact__body（0,1,0）蓋不過去。 */
p.contact__body { margin-bottom: 32px; max-width: 21em; text-wrap: balance; }

/* 左欄：內文 ＋ 關於我們。刻意不填滿到與表單等高 —— 表單是行動、左欄是脈絡，
   硬塞內容把高度湊齊只會讓區塊變胖，留白反而讓表單更明確。 */
.contact__list { display: none; }



/* 公司登記資訊：沿用 .edu-toggle 的外框式按鈕與 .edu-disclose 的摺疊模式 */
/* 接在內文尾端，所以用比較收斂的尺寸 */
.contact__company { margin-top: 16px; }
/* 純文字而非外框按鈕：這一區最明顯的行動應該是「送出訊息」，
   關於我們只是補充資料，做成按鈕會分掉主 CTA 的注意力。 */
.contact__company-toggle {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 0;
  border: none;
  background: none;
  color: var(--ink-muted);
  font-family: var(--font-han);
  font-size: .8125rem;
  line-height: var(--lh-title);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
}
/* hover 轉萊姆底：純文字本身沒有邊界，上色塊才看得出它是可以按的範圍。
   內距平常也在，只是透明，所以上色時不會有位移。 */
.contact__company-toggle { padding: 6px 10px; margin-left: -10px; }
.contact__company-toggle:hover,
.contact__company.is-open .contact__company-toggle {
  background: var(--yellow);
  color: var(--ink);
}
.contact__company-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* ＋ 放在文字前面：符號先出現，一眼就看得出這是可以展開的東西。
   顏色跟著文字走（不另外上萊姆綠）—— 讓整組讀起來是一個東西，
   而不是「一個綠符號」加「一段灰字」。 */
.contact__company-icon { order: -1; font-size: .75rem; line-height: 1; transition: transform var(--dur) var(--ease); }
.contact__company.is-open .contact__company-icon { transform: rotate(45deg); }
.contact__company-fold {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease);
}
.contact__company-fold > div { overflow: hidden; }
.contact__company.is-open .contact__company-fold { grid-template-rows: 1fr; }
.contact__company-lines { padding-top: 16px; }
/* 逐行輸出，行距 1.7 —— 連續的查驗資料，不需要閱讀段落的呼吸感 */
.contact__company-line {
  font-family: var(--font-han);
  font-size: .8125rem;
  line-height: 1.7;
  color: var(--ink-soft);
}

/* 表單 */
.form-grid { display: grid; grid-template-columns: 1fr; gap: 0 20px; }
@media (min-width: 640px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .form-field--full { grid-column: 1 / -1; }
}

.form-field { margin-bottom: 24px; }
.form-field label {
  display: block;
  font-family: var(--font-ui);
  font-size: .5625rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 8px;
}
.form-field .req { color: var(--ink); margin-left: 4px; }

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 12px 16px;
  background: var(--band);
  border: 1px solid var(--line);
  border-radius: 0;
  font-family: var(--font-ui);
  font-size: .8125rem;
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.form-field textarea { min-height: 132px; resize: vertical; line-height: var(--lh-body); }

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--ink);
  background: var(--paper);
}

.form-field input::placeholder,
.form-field textarea::placeholder { color: #A8A8A8; }
/* 未選取時的灰字。:invalid 只對 required 的選單有效（空值＋required 才算無效），
   選填的「預算範圍」因此會是黑字，跟其他欄位不一致 —— 由 JS 補上 .is-placeholder。 */
.form-field select:invalid,
.form-field select.is-placeholder { color: #A8A8A8; }
/* 選項清單本身要維持黑字，否則展開後每一列都是灰的 */
.form-field select option { color: var(--ink); }

.form-field .field-error {
  font-family: var(--font-ui);
  font-size: .625rem;
  letter-spacing: .06em;
  color: var(--ink);
  background: var(--yellow);
  display: inline-block;
  padding: 3px 8px;
  margin-top: 8px;
}

/* ---------- 擲筊 ---------- */
/* 288 見方的框。上下兩行文字都掛在框線下緣：上面那行在框內頂端、下面那行
   在框外底端 —— 同一條規則，因此下面那行不在框內。
   兩行都用絕對定位，擲筊時版面完全不動。 */
.divine {
  position: relative;
  width: min(176px, 100%);
  height: 176px;
  margin-top: 48px;
  margin-bottom: 40px;   /* 讓出掛在框外的結果文字 */
}
.divine::before,
.divine::after,
.divine__frame::before,
.divine__frame::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: var(--ink);
  border-style: solid;
  border-width: 0;
  pointer-events: none;
}
.divine::before { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.divine::after { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
.divine__frame { position: absolute; inset: 0; pointer-events: none; }
.divine__frame::before { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.divine__frame::after { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }

/* 黑體，不是宋體 —— 這是一句招呼、一個介面提示，不是區塊標題。
   行高 1：預設 1.5 會在字的上方留 4.5px 半行距，貼不到框線。 */
.divine__prompt {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-han);
  font-size: .8125rem;
  font-weight: 900;
  line-height: var(--lh-flat);
  color: var(--ink);
}

/* 擲筊台鋪滿整個框，筊在其中置中 */
.divine__stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.divine__stage:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

/* 靜止姿態：兩枚同向 349.6 度（＝ -10.4），上下錯開 16px。
   --rest 抽出來，翻面動畫才能在同一個位置上疊 scaleX 而不改變姿態。 */
.divine__block {
  display: block;
  width: 44px;
  transform: var(--rest);
  transition: transform var(--dur) var(--ease);
}
.divine__block:first-child { --rest: rotate(349.6deg) translateY(-5px); }
.divine__block:last-child { --rest: rotate(349.6deg) translateY(5px); }
.divine__block img { width: 100%; height: auto; }
/* 左筊水平鏡射，弧面朝內。鏡射放 img、旋轉放外層 span，
   合成順序才會是「先鏡射再旋轉」，與設計稿一致。 */
.divine__block:first-child img { transform: scaleX(-1); }

/* 翻面：原地壓扁再展開，不拋起、不位移。擲完筊還在同一個位置。 */
@keyframes divine-flip {
  0%   { transform: var(--rest) scaleX(1); }
  18%  { transform: var(--rest) scaleX(.06); }
  36%  { transform: var(--rest) scaleX(1); }
  54%  { transform: var(--rest) scaleX(.06); }
  72%  { transform: var(--rest) scaleX(1); }
  88%  { transform: var(--rest) scaleX(.06); }
  100% { transform: var(--rest) scaleX(1); }
}
.divine.is-throwing .divine__block { animation: divine-flip .72s var(--ease) both; }
.divine.is-throwing .divine__block:last-child { animation-delay: .06s; }
.divine.is-throwing .divine__stage { pointer-events: none; }

/* 結果壓在下框線上（垂直置中於該線），強制單行 —— 折行會讓「聖筊・」
   與說明分家。文案收短後最長 10 字（約 110px），放得進 176 的框寬內。
   絕對定位不參與版面，因此擲完不會推動任何東西。 */
.divine__result {
  position: absolute;
  top: 100%;
  left: 50%;
  /* Y 軸也位移半個身高，讓這行字壓在下框線上，而不是掛在線下方。
     再減 1px 是視覺補償 —— 行框的下降部留白比上方多，幾何置中看起來會偏低。
     文字寬 110、兩側四角各 14，中間留 19px 淨空，不會與角標相碰。 */
  transform: translate(-50%, calc(-50% - 1px));
  white-space: nowrap;
  text-align: center;
  font-family: var(--font-han);
  font-size: .6875rem;
  line-height: var(--lh-label);
  color: var(--ink-muted);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.divine.has-result .divine__result { opacity: 1; }
.divine__name { font-weight: 900; color: var(--ink); }
.divine__name::after { content: "・"; font-weight: 400; color: var(--ink-soft); }

/* 手機：置中於內容區，不再貼左 */
.divine { margin-inline: auto; }

/* 平板：出現在文字說明區塊右側，並在該欄置中。
   .contact__layout 要到 1024 才分欄，這一段之前整塊是直向堆疊的。 */
@media (min-width: 768px) and (max-width: 1023px) {
  .contact__info {
    display: grid;
    /* 兩欄等分，擲筊才有空間在右半邊置中。欄寬若是 auto 會貼齊內容寬，
       justify-self: center 就沒有可置中的餘裕，實測會貼在最右緣。 */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 48px;
    align-items: start;
  }
  .contact__lead,
  .contact__body,
  .contact__company { grid-column: 1; }
  .divine {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
    justify-self: center;
    margin-top: 0;
    /* 寬度要寫明確值。欄寬是 auto，此處若沿用 min(176px, 100%)
       就成了循環參照，實測寬度會塌成 0。 */
    width: 176px;
  }
}

/* 桌機：回到左欄，切齊內文左緣 */
@media (min-width: 1024px) {
  .divine { margin-inline: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .divine__block,
  .divine.is-throwing .divine__block { animation: none; transition: none; }
}

/* PROCESS 引言：逆算式事業設計的一句話定義。只剩單句後不再分欄，
   維持與 ABOUT 主張同一種 lead 樣式即可。 */
.process__intro { margin-bottom: 56px; }
@media (min-width: 900px) { .process__intro { margin-bottom: 64px; } }

.contact__submit { width: 100%; padding-block: 16px; background: var(--ink); color: var(--paper); border-color: var(--ink); }
.contact__submit:hover { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.contact__submit[disabled] { opacity: .55; pointer-events: none; }

.contact__form-error {
  font-family: var(--font-ui);
  font-size: .6875rem;
  color: var(--ink);
  background: var(--yellow);
  padding: 12px 16px;
  margin-top: 16px;
}

.contact__form-success {
  background: var(--yellow);
  padding: 24px 24px;
  margin-top: 20px;
  animation: modal-in var(--dur) var(--ease);
}
/* 前面的閃電改用品牌素材，不用 ⚡ emoji —— emoji 各平台造型不一，而且系統
   會強制上色（macOS 上是橘黃色），在萊姆綠底上又髒又不是品牌色。
   底是萊姆綠，所以用近黑那版。用 ::before 背景圖而非 <img>：
   全站有 img { display: block }，行內插圖會自己佔一整行。 */
.contact__form-success-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
  font-size: 1.0625rem;
  margin-bottom: 4px;
}
.contact__form-success-title::before {
  content: "";
  flex: none;
  width: 11px;
  height: 14px;
  background: url("../images/logo/bolt-single.png") center / contain no-repeat;
}
.contact__form-success-body { color: var(--ink); font-size: .875rem; }

/* ============================================================
   FOOTER — 深色底，LOGO 放在白色方塊裡（深色貓頭才辨識得出來）
   ============================================================ */
/* 頁尾：純品牌落款。公司登記資訊已移到「開始合作」—— 要簽約開票的人
   本來就在那一區找聯絡方式，走到頁尾才交代反而囉唆。

   高度收到約原本的 2/3（303 → 約 205px）。拆解後內距佔 34%、間距 26%、
   內容只佔 39%，所以砍的是前兩者：內距 104 → 64、間距 80 → 44，
   內容僅微調（wordmark 190 → 152、標語 17 → 13px），可讀性不犧牲。
   四行文字的行高一律收到 --lh-label —— 落款是單行資訊，不需要閱讀節奏。 */
.footer { background: var(--ink); padding-block: 40px 24px; }
.footer__inner { text-align: center; display: grid; gap: 0; justify-items: center; }
/* 只剩三個元素後，wordmark 可以放大 —— 152 是四元素時期的尺寸。
   節奏：40 → wordmark → 24 → 標語 → 28 → 版權 → 24，總高仍為 205px。 */
.footer__logo { margin-bottom: 24px; }
.footer__logo img { width: 180px; opacity: .95; }

/* 中文標語：思源黑體、萊姆綠、前面帶閃電。
   萊姆綠在深底上對比 15.79，這是它能當文字的場合。
   閃電用 ::before 背景圖而非 <img> —— 全站有 img { display: block }。 */
.footer__tagline {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-han);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: var(--lh-label);
  color: var(--yellow);
  margin-bottom: 28px;
}
.footer__tagline::before {
  content: "";
  flex: none;
  width: 8px;
  height: 10px;
  background: url("../images/logo/bolt-single-yellow.png") center / contain no-repeat;
}
/* 淺灰：法定聲明不該搶戲，但也不該讀不到。.5 疊在近黑上約 #8C8C8C，對比 5.0 */
/* --font-ui 開頭是 Space Mono（無中日韓字），中文會自動落到思源黑 ——
   一條宣告就達成「英文等寬、中文黑體」，與 04 — PACKAGES 那類標籤同一支字。
   字距取 .1em：標籤用的 .25em 放在整句版權上會鬆散到難讀。 */
.footer__copyright {
  font-family: var(--font-ui);
  font-size: .625rem;
  letter-spacing: .1em;
  line-height: var(--lh-label);
  color: rgba(255, 255, 255, .5);
}
.footer a { color: var(--yellow); }

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .marquee__track { animation: none; }
}

/* ============================================================
   點擊小星星
   ============================================================ */
.spark {
  position: fixed;
  width: 14px;
  height: 14px;
  pointer-events: none;
  z-index: 400;
  will-change: transform, opacity;
  animation: spark-fly .7s var(--ease) forwards;
}
.spark svg { width: 100%; height: 100%; display: block; }
@keyframes spark-fly {
  0%   { transform: translate(-50%, -50%) scale(.3) rotate(0deg); opacity: 1; }
  70%  { opacity: 1; }
  100% {
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(var(--sc)) rotate(var(--rot));
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) { .spark { display: none; } }


/* ============================================================
   區塊視差進場（桌機限定）
   ============================================================ */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  [data-shift] { will-change: transform; }
}

/* 使用者要求減少動態時，摺疊直接切換，不做展開動畫 */
@media (prefers-reduced-motion: reduce) {
  .service-card__fold,
  .service-card__toggle-icon { transition: none; }
}