/* 喬雍官網樣式（P0 骨架版）。
 * CIS 四色與 cy-* 元件語彙沿用舊站設計（SoT：brand-wiki 喬雍品牌規範），
 * 但舊站為了壓過套版全域樣式而全綁 !important 的補丁層一律不搬——
 * 自管站沒有要對抗的東西，樣式直接寫乾淨的。
 * P1 補完整元件庫（卡片三型／quote／alert／process-row／checklist／timeline／CTA 兩型）。
 */

:root {
  --cy-dark: #304854;
  --cy-yellow: #ffbe19;
  --cy-teal: #1d6a8c;
  --cy-green: #80c862;
  --cy-slate: #738995;
  --cy-brown: #73502b;
  --cy-orange: #eb6b32;
  --cy-salmon: #f0829b;
  --cy-cream: #fdfcf8;
  --cy-text: var(--cy-dark);
  --cy-bg: #ffffff;
  --cy-container: 1040px;
  --cy-measure: 750px;
}

html {
  font-size: 10px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  font-size: 1.3rem;
  line-height: 2.3rem;
  color: var(--cy-text);
  background: var(--cy-bg);
}

/* 舊站以 wrapper 限制閱讀欄，不對每個段落一刀套 max-width。 */
.cy-max-w-650, .cy-max-w-700, .cy-max-w-750 {
  width: 100%;
  margin-inline: auto;
  display: block;
}
.cy-max-w-650 { max-width: 650px; }
.cy-max-w-700 { max-width: 700px; }
.cy-max-w-750 { max-width: var(--cy-measure); }

h1, h2, h3 { color: var(--cy-dark); line-height: 1.1; font-weight: 700; }
h1 { font-size: 3.6rem; }
h2 { font-size: 3rem; }
h3 { font-size: 2.4rem; }

/* cy-* 內文另有自己的 px 階層；H2/H3 由 components.css 保持舊站值。 */
.cy-blk h1 { font-size: 3.8rem; line-height: 1.4; }

a { color: var(--cy-teal); }

/* --- nav --- */
.cy-nav {
  font-size: 15px;
  font-weight: 700;
  border-bottom: 0;
  background: #fff;
}
.cy-nav .cy-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  max-width: 1170px;
  padding: 10px 30px 10px 15px;
}
.cy-nav-brand {
  display: block;
  flex: 0 1 250px;
  max-width: 250px;
  color: var(--cy-dark);
  text-decoration: none;
}
.cy-nav-brand img { display: block; width: 100%; height: auto; }
.cy-nav ul {
  display: flex;
  gap: 33px;
  list-style: none;
  margin: 0 15px 0 0;
  padding: 0;
  flex-wrap: wrap;
}
.cy-nav a { text-decoration: none; color: var(--cy-dark); }
.cy-nav a:hover { color: var(--cy-yellow); }
.cy-nav a.is-active,
.cy-nav a.is-active:hover { color: var(--cy-green); }
.cy-nav-dropdown { position: relative; }
.cy-nav-submenu {
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 50%;
  display: none !important;
  min-width: 190px;
  margin: 0;
  padding: 8px 0 !important;
  transform: translateX(-50%);
  border: 1px solid #e8e8e8;
  background: #fff;
  box-shadow: 0 8px 20px rgb(0 0 0 / 10%);
}
.cy-nav-dropdown:hover > .cy-nav-submenu,
.cy-nav-dropdown:focus-within > .cy-nav-submenu,
.cy-nav-dropdown.is-expanded > .cy-nav-submenu { display: block !important; }
/* Esc 收起：焦點回到 trigger 時 :focus-within 仍成立，需要更高權重把它壓下去 */
.cy-nav-dropdown.is-collapsed > .cy-nav-submenu { display: none !important; }
.cy-nav-submenu a { display: block; padding: 10px 18px; white-space: nowrap; }
.cy-nav-toggle {
  display: none;
  padding: .7rem;
  border: 0;
  background: transparent;
  color: var(--cy-dark);
  font: inherit;
  cursor: pointer;
}
.cy-nav-toggle-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.cy-nav-toggle-icon { display: grid; gap: 5px; width: 26px; }
.cy-nav-toggle-icon i {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}
.cy-nav-toggle[aria-expanded="true"] .cy-nav-toggle-icon i:first-child {
  transform: translateY(7px) rotate(45deg);
}
.cy-nav-toggle[aria-expanded="true"] .cy-nav-toggle-icon i:nth-child(2) { opacity: 0; }
.cy-nav-toggle[aria-expanded="true"] .cy-nav-toggle-icon i:last-child {
  transform: translateY(-7px) rotate(-45deg);
}

/* --- main / footer --- */
.cy-main { padding: 2.5rem 0; }
.cy-blk + .cy-blk { margin-top: 2.5rem; }

.cy-breadcrumb {
  margin: 0 auto 1.5rem;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.7;
}
.cy-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cy-breadcrumb li + li::before {
  content: "/";
  margin-right: .65rem;
  color: var(--cy-slate);
}
.cy-breadcrumb a, .cy-breadcrumb span { color: var(--cy-dark); text-decoration: none; }
.cy-breadcrumb a:hover { color: var(--cy-teal); }

.cy-footer {
  position: relative;
  min-height: 264px;
  background: var(--cy-dark);
  color: #fff;
  padding: 36px 0 0;
  font-size: 17px;
}
.cy-footer .cy-container { max-width: 1140px; padding: 0 0 0 30px; }
.cy-footer-brand { font-weight: 700; color: #fff; margin: 0 0 .8rem; }
.cy-footer p {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 5px 0;
  line-height: 27px;
}
.cy-footer svg { width: 1.25em; height: 1.25em; flex: none; fill: currentColor; }
.cy-footer a { color: #fff; }
/* ⚠ 這裡曾有一條 `.cy-footer .cy-footer-copyright { display: none }`（hocom 時期為了
   蓋掉平台版權列而寫），靠九套逐頁規則各自再顯示回來。2026-07-31 把逐頁規則統一成
   單一 .cy-footer-copyright 後，這條殘留的隱藏規則（權重 0,2,0）反而壓過統一規則
   （0,1,0），造成版權列全站消失。刪除它才是根因修法——不要再加回來。 */
.cy-footer .cy-footer-copyright {
  position: absolute;
  right: 15px;
  bottom: 17px;
  left: 15px;
  display: flex;
  justify-content: center;
  margin: 0;
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  text-align: center;
}

.cy-fab-phone {
  position: fixed;
  z-index: 20;
  right: 30px;
  bottom: calc(24px + var(--cy-footer-overlap, 0px));
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  opacity: .72;
  filter: drop-shadow(0 4px 10px rgba(48, 72, 84, .28));
  transition: transform .2s ease;
}
.cy-fab-phone:hover { opacity: .9; transform: translateY(-2px); }
.cy-fab-phone img { display: block; width: 100%; height: 100%; }

/* --- 品牌級元件（提升為全域） ---
 * 舊站把這幾個元件的完整樣式寫在 html.cy-services / html.cy-knowledge 前綴下，
 * 是因為套版只能靠 JS 給頁面分型。但按鈕與卡片是全站一致的品牌元件，不該只有
 * 某些頁型才長對——這裡取 cy-services 版本當基礎樣式提升為全域，
 * components.css 內的前綴規則照舊生效（頁型微調），視覺結果不變。
 */
.cy-process-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 15px;
}
.cy-process-row > * { flex: 1 1 260px; }

@media (max-width: 640px) {
  .cy-btn, .cy-btn-project-premium {
    width: 100%;
    text-align: center;
    padding: 15px 20px;
    font-size: 18px;
    white-space: normal;
    line-height: 1.5;
  }
  .cy-process-row { flex-direction: column; }
}

/* --- CONTACT 表單（新站新增；舊站表單是套版模組，樣式綁 bootstrap 不搬） --- */
/* 表單比正文閱讀欄再窄一級，避免輸入框過寬。 */
.cy-form, .cy-contact-fallback { max-width: 640px; margin-inline: auto; }
.cy-form { margin-top: 2rem; }
.cy-field { margin-bottom: 1.25rem; }
.cy-field label { display: block; font-weight: 700; color: var(--cy-dark); margin-bottom: .4rem; }
.cy-field input[type="text"],
.cy-field input[type="tel"],
.cy-field input[type="email"],
.cy-field textarea {
  width: 100%;
  padding: .75rem .9rem;
  border: 1px solid #d8d8d8;
  border-radius: 8px;
  font: inherit;
  color: inherit;
  background: #fff;
}
.cy-field input:focus, .cy-field textarea:focus {
  outline: 2px solid var(--cy-teal);
  outline-offset: 1px;
  border-color: var(--cy-teal);
}
.cy-required { color: var(--cy-brown); margin-left: .25rem; }

.cy-agree-line { display: flex; align-items: flex-start; gap: .5rem; font-weight: 700; }
.cy-agree-line input { margin-top: .35rem; flex: none; }
.cy-form .cy-privacy {
  margin: .6rem 0 0;
  padding: .9rem 1rem;
  background: #f5f5f5;
  border-radius: 8px;
  font-size: 1.4rem;
  line-height: 1.75;
  color: var(--cy-dark);
}
.cy-turnstile-wrap { min-height: 70px; }
.cy-form-actions { margin: 1.5rem 0 0; }

/* 表單狀態色：CIS 色走左邊框，文字一律用高對比色。
   原本直接把 CIS 色當文字色，對白底的對比度過不了 WCAG AA（正文需 4.5:1）——
   豆青 #80c862 僅 2.03:1、陽橙 #eb6b32 僅 3.14:1，訊息會看不清楚
   （2026-07-30 Sonnet 5 交叉審核實算）。改成「帶色邊框＋暗色文字」後，
   品牌色仍在視覺上出現，可讀性也回到 7:1 以上。 */
.cy-form-status {
  margin: 1rem 0 0;
  min-height: 1.6em;
  font-weight: 700;
}
.cy-form-status.is-ok,
.cy-form-status.is-error,
.cy-form-status.is-pending {
  padding: .8rem 1rem;
  border-left: 4px solid;
  border-radius: 4px;
  background: #f5f5f5;
}
.cy-form-status.is-ok      { border-left-color: var(--cy-green);  color: var(--cy-dark); }
.cy-form-status.is-error   { border-left-color: var(--cy-orange); color: var(--cy-brown); }
.cy-form-status.is-pending { border-left-color: var(--cy-teal);   color: var(--cy-dark); }

/* 必填星號：陽橙當 14px 文字對比不足 → 用深褐（對白底 7.21:1）；
   星號本身的「警示感」靠位置與符號，不靠顏色濃度。 */

.cy-contact-fallback { margin-top: 2.5rem; }
.cy-contact-fallback p { margin: .25rem 0; }

/* CONTACT 桌機版：還原舊站 Bootstrap 版心、表單與頁尾節奏。 */
@media (min-width: 992px) {
  html.cy-contact {
    --cy-container: 1170px;
  }
  html.cy-contact .cy-main {
    padding: 0;
  }
  html.cy-contact .cy-main > .cy-breadcrumb {
    max-width: 1170px;
    margin: 0 auto;
    padding: 9px 15px 0;
    font-size: 12px;
  }
  html.cy-contact .cy-main > .cy-breadcrumb .cy-container {
    max-width: none;
    padding: 0;
  }
  html.cy-contact .cy-main > .cy-blk:first-of-type {
    margin-top: 20px;
  }
  html.cy-contact .cy-main > .cy-blk:first-of-type .cy-container {
    max-width: 855px;
    padding: 0;
  }
  html.cy-contact .cy-main > .cy-blk:first-of-type .cy-max-w-700 {
    max-width: none;
    margin: 0;
    text-align: left;
  }
  html.cy-contact .cy-main > .cy-blk:first-of-type h1 {
    margin: 0;
    line-height: 1.35;
  }
  html.cy-contact .cy-main > .cy-blk:first-of-type .cy-en-title {
    margin: 2px 0 19px;
    color: var(--cy-yellow);
    font-size: 15px;
    line-height: 1.5;
    text-align: left;
  }
  html.cy-contact .cy-main > .cy-blk:first-of-type p:not(.cy-en-title) {
    margin-bottom: 14px;
    font-size: 18px;
    line-height: 1.85;
    text-align: left;
  }
  html.cy-contact .cy-blk + .cy-blk {
    margin-top: 4px;
  }
  html.cy-contact .cy-main > .cy-blk:nth-of-type(2) > .cy-container {
    max-width: 855px;
    padding: 0;
  }
  html.cy-contact .cy-form {
    max-width: none;
    margin-top: 0;
    padding: 0 15px;
  }
  html.cy-contact .cy-field {
    margin-bottom: 11px;
  }
  html.cy-contact .cy-field label {
    margin-bottom: 2px;
    color: #666;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
  }
  html.cy-contact .cy-field input[type="text"],
  html.cy-contact .cy-field input[type="tel"],
  html.cy-contact .cy-field input[type="email"],
  html.cy-contact .cy-field textarea {
    height: 45px;
    padding: 5px 9px;
    border-color: #d4d4d4;
    border-radius: 0;
    font-size: 14px;
    line-height: 20px;
  }
  html.cy-contact .cy-field textarea {
    height: 75px;
  }
  html.cy-contact label[for="cf-situation"]::after {
    content: "*";
    margin-left: 3px;
    color: var(--cy-orange);
  }
  html.cy-contact .cy-agree {
    margin: 7px 0 15px;
  }
  html.cy-contact .cy-agree-line {
    gap: 4px;
  }
  html.cy-contact .cy-agree-line input {
    margin-top: 4px;
  }
  html.cy-contact .cy-turnstile-wrap {
    min-height: 76px;
    margin-bottom: 14px;
  }
  html.cy-contact .cy-form-actions {
    margin: 0;
    text-align: center;
  }
  html.cy-contact .cy-form-actions .cy-btn {
    margin: 0;
    padding: 9px 22px;
    border: 0;
    border-radius: 2px;
    background: var(--cy-dark);
    font-size: 12px;
    line-height: 20px;
  }
  html.cy-contact .cy-form .cy-privacy {
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #777;
    font-size: 12px;
    line-height: 1.7;
  }
  html.cy-contact .cy-form .cy-privacy::before {
    content: "🔒";
    margin-right: 4px;
  }
  html.cy-contact .cy-form-status {
    min-height: 0;
    margin: 0;
  }
  html.cy-contact .cy-contact-fallback {
    display: none;
  }
}

/* KNOWLEDGE 文章桌機版：還原舊站 Bootstrap 的左側分類欄與偏右閱讀欄。 */
.cy-kn-article-sidebar {
  display: none;
}

@media (min-width: 992px) {
  html.cy-knowledge:has(.cy-kn-article-layout) {
    --cy-container: 1170px;
  }
  html.cy-knowledge:has(.cy-kn-article-layout) .cy-main {
    padding: 0;
  }
  html.cy-knowledge:has(.cy-kn-article-layout) .cy-main > .cy-breadcrumb {
    max-width: 1170px;
    margin: 0 auto;
    padding: 9px 15px 0;
    font-size: 12px;
  }
  html.cy-knowledge:has(.cy-kn-article-layout) .cy-main > .cy-breadcrumb .cy-container {
    max-width: none;
    padding: 0;
  }
  html.cy-knowledge .cy-kn-article-layout {
    display: grid;
    grid-template-columns: 25% 75%;
    max-width: 1170px;
    padding: 0 15px;
  }
  html.cy-knowledge .cy-kn-article-main {
    min-width: 0;
  }
  html.cy-knowledge .cy-kn-article-main > .cy-blk > .cy-container {
    max-width: 750px;
    padding: 0 24px;
  }
  html.cy-knowledge .cy-kn-article-sidebar {
    display: block;
    padding-top: 27px;
  }
  html.cy-knowledge .cy-kn-article-sidebar ul {
    width: 263px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  html.cy-knowledge .cy-kn-article-sidebar li {
    border-bottom: 1px solid #e7e7e7;
  }
  html.cy-knowledge .cy-kn-article-sidebar a {
    display: block;
    padding: 25px 24px 24px;
    color: var(--cy-dark);
    font-size: 18px;
    line-height: 37px;
    text-decoration: none;
  }
}

/* --- KNOWLEDGE 列表（新站新增；舊站是套版列表模組，無樣式可搬） --- */
.cy-kn-list {
  display: block;
  margin-top: 2rem;
}
.cy-kn-row {
  padding: 28px 0;
  border-bottom: 1px solid #e8e8e8;
}
.cy-kn-row:first-child { border-top: 1px solid #e8e8e8; }
.cy-kn-row-link { display: block; color: inherit; text-decoration: none; }
.cy-kn-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.cy-kn-date { color: #888; font-size: 1.3rem; line-height: 1.5; }
.cy-kn-category {
  display: inline-block;
  padding: 2px 10px;
  border: 1px solid #cfd7da;
  border-radius: 999px;
  background: #fff;
  color: var(--cy-slate);
  font-size: 1.2rem;
  line-height: 1.5;
}
.cy-kn-row h2 {
  margin: 0;
  color: var(--cy-dark);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.5;
  transition: color .2s ease;
}
.cy-kn-row-link:hover h2 { color: var(--cy-teal); }
.cy-cat-label {
  display: inline-block;
  margin: 0 0 .5rem;
  padding: .15rem .6rem;
  border-radius: 4px;
  background: rgba(29, 106, 140, .08);
  color: var(--cy-teal);
  font-size: 1.4rem;
  font-weight: 700;
}

/* KNOWLEDGE 列表桌機版：還原舊站側欄＋文章摘要列。 */
@media (min-width: 992px) {
  html.cy-knowledge:has(.cy-kn-legacy-layout) {
    --cy-container: 1170px;
  }
  html.cy-knowledge:has(.cy-kn-legacy-layout) .cy-main {
    min-height: 422px;
    padding: 0;
  }
  html.cy-knowledge:has(.cy-kn-legacy-layout) .cy-main > .cy-breadcrumb {
    max-width: 1170px;
    margin: 0 auto;
    padding: 9px 15px 0;
    font-size: 12px;
  }
  html.cy-knowledge:has(.cy-kn-legacy-layout) .cy-main > .cy-breadcrumb .cy-container {
    max-width: none;
    padding: 0;
  }
  /* 2026-08-08 KN 改版：標題區塊照參考站放出來（大字靠左），引言維持不顯示（沿現狀）。
     對齊基準＝與麵包屑/清單同的 1170 版心左緣（Opus 複驗抓到原版懸空在 289px）。 */
  html.cy-knowledge:has(.cy-kn-legacy-layout) .cy-main > .cy-blk .cy-container {
    max-width: 1170px;
    padding: 0 15px;
  }
  html.cy-knowledge:has(.cy-kn-legacy-layout) .cy-main > .cy-blk .cy-max-w-700 {
    max-width: none;
    width: 100%;
    margin: 0;
    text-align: left;
  }
  html.cy-knowledge:has(.cy-kn-legacy-layout) .cy-main > .cy-blk h1 {
    margin: 6px 0 10px;
    font-size: 46px;
  }
  html.cy-knowledge:has(.cy-kn-legacy-layout) .cy-main > .cy-blk .cy-max-w-700 > p:not(.cy-en-title) {
    display: none;
  }
  html.cy-knowledge:has(.cy-kn-legacy-layout) .cy-kn-legacy-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 32px;
    max-width: 1170px;
    padding: 0 15px;
  }
  html.cy-knowledge:has(.cy-kn-legacy-layout) .cy-kn-search {
    display: flex;
    height: 34px;
  }
  html.cy-knowledge:has(.cy-kn-legacy-layout) .cy-kn-search input {
    width: 154px;
    min-width: 0;
    padding: 5px 7px;
    border: 1px solid #999;
    border-radius: 0;
    color: #555;
    font: 12px Arial, sans-serif;
  }
  html.cy-knowledge:has(.cy-kn-legacy-layout) .cy-kn-search button {
    width: 58px;
    margin-left: 0;
    border: 0;
    border-radius: 2px;
    background: var(--cy-dark);
    color: #fff;
    font: 700 12px "Microsoft JhengHei", sans-serif;
  }
  html.cy-knowledge:has(.cy-kn-legacy-layout) .cy-kn-categories a[aria-current="page"] {
    color: var(--cy-teal);
    font-weight: 700;
  }
  html.cy-knowledge:has(.cy-kn-legacy-layout) .cy-kn-categories ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  html.cy-knowledge:has(.cy-kn-legacy-layout) .cy-kn-categories a {
    display: block;
    padding: 25px 24px 24px;
    border-bottom: 1px solid #e7e7e7;
    color: var(--cy-slate);
    font-size: 18px;
    line-height: 37px;
    text-decoration: none;
  }
  html.cy-knowledge:has(.cy-kn-legacy-layout) .cy-kn-list {
    display: block;
    margin: 13px 0 0;
  }
  html.cy-knowledge:has(.cy-kn-legacy-layout) .cy-kn-pagination {
    margin-top: 40px;
  }
  html.cy-knowledge:has(.cy-kn-legacy-layout) .cy-kn-pagination button {
    display: inline-grid;
    width: 33px;
    height: 33px;
    place-items: center;
    border-radius: 3px;
    background: var(--cy-dark);
    color: #fff;
    font-size: 12px;
  }
}

/* --- 首頁專用 --- */
.cy-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

html.cy-home .cy-main { padding-top: 0; }
.cy-home-hero { width: 100%; overflow: hidden; }
.cy-hero-carousel { position: relative; background: var(--cy-dark); }
.cy-hero-track { position: relative; aspect-ratio: 1920 / 750; }
.cy-hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .55s ease;
}
.cy-hero-slide.is-active { opacity: 1; visibility: visible; }
.cy-hero-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.cy-hero-control {
  position: absolute;
  z-index: 2;
  top: 50%;
  width: 44px;
  height: 64px;
  padding: 0;
  border: 0;
  background: rgba(48, 72, 84, .45);
  color: #fff;
  cursor: pointer;
  transform: translateY(-50%);
}
.cy-hero-control::before {
  content: "";
  display: block;
  width: 13px;
  height: 13px;
  margin: auto;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}
.cy-hero-prev { left: 0; }
.cy-hero-prev::before { transform: rotate(-135deg); }
.cy-hero-next { right: 0; }
.cy-hero-next::before { transform: rotate(45deg); }
/* 2026-08-08：箭頭全寬度一律隱藏（Ming 只要圓點）。原本只寫在 ≥992 與 ≤640
   兩個斷點，641–991px 平板區間箭頭會漏出來（Opus 複驗實測）——改成不分斷點。 */
html.cy-home .cy-hero-control { display: none; }
.cy-hero-dots {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 13px;
  display: flex;
  gap: 8px;
  transform: translateX(-50%);
}
.cy-hero-dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 1px solid #fff;
  border-radius: 50%;
  background: rgba(48, 72, 84, .45);
  cursor: pointer;
}
.cy-hero-dots button.is-active { background: var(--cy-yellow); }

.cy-home-method {
  margin-top: 0;
  padding: 26px 0;
  background: #f5f5f5;
}
.cy-method-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 50px;
}
.cy-method-cards a {
  display: block;
  transition: transform .2s ease, box-shadow .2s ease;
}
.cy-method-cards a:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(48, 72, 84, .2);
}
.cy-method-cards a:focus-visible {
  outline: 3px solid var(--cy-yellow);
  outline-offset: 3px;
}
.cy-method-cards img {
  display: block;
  width: 100%;
  height: auto;
}

.cy-home-lower { margin-top: 0; padding: 30px 0 14px; }
html.cy-home .cy-blk h2 { font-size: 2.4rem; line-height: 1.2; }
.cy-col-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3.8rem;
  align-items: start;
}
.cy-col > h2:first-child, .cy-col > .cy-en-title:first-child { margin-top: 0; }

/* 六場域是一張定版圖（Ming 用 Claude design 做的），圖本身就是完整卡面，
   外層不再加框與格線底，否則會出現雙重卡框。 */
.cy-experience-img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #e5e5e5;
  box-shadow: 0 5px 18px rgba(48, 72, 84, .08);
}
.cy-field-start { padding-top: 4px; }
html.cy-home .cy-field-questions { margin: 1rem 0 1.5rem; }
.cy-field-questions {
  list-style: none;
  padding: 0;
}
.cy-field-questions li {
  margin-bottom: 10px;
  border: 1px solid #dedede;
  border-left: 5px solid var(--cy-teal);
  background: #fff;
  box-shadow: 0 2px 4px rgba(48, 72, 84, .1);
}
/* 舊站這六條是手風琴外觀但點擊直接連 KNOWLEDGE；新站保留外觀、做成連結
   （2026-07-30 Ming：連結照目前網站的連）。 */
.cy-field-questions a {
  position: relative;
  display: block;
  padding: 13px 42px 13px 18px;
  color: var(--cy-dark);
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.45;
  text-decoration: none;
}
.cy-field-questions a:hover { color: var(--cy-teal); background: #f8f8f8; }
.cy-field-questions a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 18px;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--cy-dark);
  border-bottom: 2px solid var(--cy-dark);
  transform: translateY(-70%) rotate(-45deg);
}

/* 首頁桌機版沿用舊站 1170px Bootstrap 版心與緊湊節奏。 */
@media (min-width: 992px) {
  html.cy-home {
    --cy-container: 1170px;
  }
  /* ⚠ 不要在這裡補 max-width：版心由上面的 --cy-container 變數搭配
     components.css 的 .cy-container 生效即可。在這裡補會讓權重蓋過
     `.cy-footer .cy-container` 的 1140px，把頁尾一起撐寬。 */
  html.cy-home .cy-container {
    padding-left: 15px;
    padding-right: 15px;
  }
  html.cy-home .cy-home-hero {
    width: calc(100% - 60px);
    max-width: 1220px;
    margin-inline: auto;
  }
  html.cy-home .cy-home-method {
    padding: 19px 0;
    background: #f5f5f5;
  }
  html.cy-home .cy-method-cards {
    gap: 30px;
  }
  html.cy-home .cy-home-lower {
    margin-top: 0;
    padding: 26px 0 11px;
    background: var(--cy-cream);
  }
  html.cy-home .cy-col-split {
    grid-template-columns: 535px 555px;
    gap: 40px;
    padding-left: 25px;
    padding-right: 25px;
  }
  html.cy-home .cy-field-start {
    padding-top: 0;
  }
  html.cy-home .cy-field-questions {
    margin: .7rem 0 0;
  }
  html.cy-home .cy-field-questions li {
    margin-bottom: 5px;
    border-left-width: 3px;
    box-shadow: none;
  }
  html.cy-home .cy-field-questions a {
    padding: 9px 16px;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.3;
  }
  html.cy-home .cy-field-questions a::after {
    right: auto;
    left: 7px;
    width: 5px;
    height: 5px;
    border-width: 0 1px 1px 0;
    transform: translateY(-75%) rotate(45deg);
  }
  html.cy-home .cy-experience-img {
    box-shadow: none;
  }
}


html.cy-about .cy-card-principle { border-top: 0; }
html.cy-about .cy-card-dual-header h2 { font-size: 2.4rem; }

/* ABOUT 桌機版沿用舊站的導覽／頁尾骨架與較緊湊的段落節奏。 */
@media (min-width: 992px) {
  html.cy-about .cy-main > .cy-breadcrumb .cy-container {
    max-width: 1170px;
    padding-left: 15px;
    padding-right: 15px;
  }

  html.cy-about .cy-main { padding-top: 0; padding-bottom: 0; }
  html.cy-about .cy-breadcrumb { margin-bottom: 0; }
  html.cy-about .cy-main > .cy-breadcrumb .cy-container { padding-top: 10px; }
  html.cy-about .cy-section { padding-top: 32px; padding-bottom: 32px; }
  html.cy-about .cy-blk > .cy-container > .cy-section:nth-child(2) {
    padding-bottom: 25px;
  }
  html.cy-about .cy-blk > .cy-container > .cy-section:nth-child(2) p:first-child {
    margin-bottom: 0;
  }
  html.cy-about .cy-blk > .cy-container > .cy-section:nth-child(3) {
    padding-top: 47px;
  }
  html.cy-about .cy-blk > .cy-container > .cy-section:nth-child(n + 4) {
    padding-top: 48px;
  }

  html.cy-about .cy-btn {
    padding: 14px 35px;
    font-size: 18px;
  }
  html.cy-about .cy-btn-outline {
    border-color: var(--cy-yellow);
    background: transparent;
    color: var(--cy-yellow);
  }
  html.cy-about .cy-about-final-cta,
  html.cy-about .cy-about-final-cta .cy-btn { width: auto; }

}

@media (max-width: 991px) {
  .cy-blk { font-size: 1.8rem; }
}

@media (min-width: 768px) and (max-width: 991px) {
  /* 舊站同寬截圖另受平台外層 gutters 約束；720px 可還原其 672px 有效欄寬。 */
  .cy-container { max-width: 720px; }
}

@media (max-width: 767px) {
  html:not(.cy-home) .cy-blk h1 { font-size: 3.4rem; }
}

@media (max-width: 640px) {
  .cy-nav .cy-container {
    position: relative;
    gap: 1rem;
    padding-block: 12px;
  }
  .cy-nav-brand { flex-basis: 210px; max-width: calc(100% - 54px); }
  .js .cy-nav-toggle { display: block; margin-left: auto; }
  .cy-nav nav { width: 100%; }
  .js .cy-nav nav { display: none; }
  .js .cy-nav nav.is-open { display: block; }
  .cy-nav ul {
    display: grid;
    gap: 0;
    padding-top: .5rem;
    border-top: 1px solid #e8e8e8;
  }
  .cy-nav li a {
    display: block;
    padding: .7rem 0;
  }
  .cy-nav-submenu {
    position: static;
    display: block !important;
    min-width: 0;
    padding: 0 0 0 1.25rem !important;
    transform: none;
    border: 0;
    box-shadow: none;
  }
  .cy-fab-phone {
    right: 16px;
    bottom: 16px;
    width: 56px;
    height: 56px;
  }
  .cy-main { padding: 1.75rem 0; }
  html.cy-home .cy-main { padding-top: 0; }
  .cy-hero-track { aspect-ratio: 1920 / 750; }
  .cy-hero-control { width: 34px; height: 48px; }
  .cy-hero-dots { bottom: 7px; }
  .cy-home-method { padding: 16px 0; }
  .cy-method-cards { grid-template-columns: 1fr; gap: 12px; }
  .cy-col-split { grid-template-columns: 1fr; gap: 1.75rem; }
  .cy-experience-card { padding: 22px 18px 18px; }
}

/* 首頁手機版：對齊舊站 500px 截圖的 Bootstrap gutters 與緊湊節奏。 */
@media (max-width: 640px) {
  html.cy-home .cy-container {
    padding-left: 15px;
    padding-right: 15px;
  }
  html.cy-home .cy-home-method {
    padding: 22px 0 18px;
  }
  html.cy-home .cy-home-method .cy-container {
    padding-left: 27px;
    padding-right: 27px;
  }
  html.cy-home .cy-method-cards {
    gap: 20px;
  }
  html.cy-home .cy-home-lower {
    margin-top: 0;
    padding: 25px 0 27px;
    background: var(--cy-cream);
  }
  html.cy-home .cy-col-split {
    gap: 21px;
  }
  html.cy-home .cy-experience-card {
    padding: 0;
  }
  html.cy-home .cy-experience-img {
    box-shadow: none;
  }
  html.cy-home .cy-field-start {
    padding-top: 0;
  }
  html.cy-home .cy-blk h2 {
    margin-bottom: 17px;
    font-size: 24px;
  }
  html.cy-home .cy-field-questions {
    margin: 0;
  }
  html.cy-home .cy-field-questions li {
    margin-bottom: 6px;
    border-left-width: 3px;
    box-shadow: none;
  }
  html.cy-home .cy-field-questions a {
    padding: 9px 16px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
  }
  html.cy-home .cy-field-questions a::after {
    right: auto;
    left: 7px;
    width: 5px;
    height: 5px;
    border-width: 0 1px 1px 0;
    transform: translateY(-75%) rotate(45deg);
  }
}

/* 第二輪細修：模板骨架已併回前段元件定義，以下只留頁型規則。 */
.cy-back-to-top {
  position: fixed; z-index: 20; right: 34px;
  bottom: calc(88px + var(--cy-footer-overlap, 0px));
  display: none; width: 40px; height: 40px; padding: 0;
  border: 1px solid rgba(255, 255, 255, .8); border-radius: 10px;
  background: rgba(48, 72, 84, .9); color: #fff;
  font: 700 25px/1 Arial, sans-serif; cursor: pointer;
  box-shadow: 0 4px 10px rgba(48, 72, 84, .24);
  opacity: 0; transition: opacity .2s ease, transform .2s ease, bottom .12s linear;
}
html.cy-services .cy-back-to-top,
html.cy-knowledge .cy-back-to-top { display: grid; place-items: center; }
.cy-back-to-top.is-visible { opacity: 1; }
.cy-back-to-top:hover {
  background: var(--cy-dark); color: #fff; opacity: 1; transform: translateY(-2px);
}
html.cy-about .cy-btn-outline:hover {
  background: var(--cy-yellow); border-color: var(--cy-yellow); color: var(--cy-dark);
}

@media (min-width: 992px) {
  html.cy-home .cy-home-hero { width: calc(100% - 30px); max-width: 1140px; }
  html.cy-home .cy-blk h2 { font-size: 26px; }
  html.cy-home .cy-field-questions a { font-size: 18px; }
  html.cy-services .cy-blk h1,
  html.cy-knowledge .cy-blk h1,
  html.cy-contact .cy-blk h1 { font-size: 40px; }
  html.cy-about .cy-about-final-cta { margin-bottom: 10px; }
  html.cy-services .cy-blk > .cy-container > .cy-section:last-child { padding-bottom: 34px; }
  html.cy-knowledge .cy-kn-foot { margin-bottom: 30px; }
  html.cy-services-project .cy-project-aligned { width: 800px; margin-left: 293px; }
  html.cy-services-project .cy-project-aligned .cy-section { width: 100%; margin-left: 0; }
  html.cy-services .cy-blk h2,
  html.cy-services .cy-blk h3,
  html.cy-services .cy-bold,
  html.cy-services .cy-card-principle h3,
  html.cy-services .cy-card-soft h3,
  html.cy-services .cy-card-dual-header h3,
  html.cy-knowledge .cy-blk h2,
  html.cy-knowledge .cy-blk h3,
  html.cy-knowledge .cy-bold,
  html.cy-knowledge .cy-card-principle h3,
  html.cy-knowledge .cy-card-soft h3,
  html.cy-knowledge .cy-card-dual-header h3 { font-weight: 600; }
}

@media (max-width: 991px) {
  .cy-nav .cy-container { padding: 12px 20px; }
  .cy-nav-brand {
    flex-basis: 210px; max-width: calc(100% - 54px);
  }
  .cy-nav ul { gap: 0; margin-right: 0; }
  .cy-footer { min-height: 315px; padding: 32px 0 48px; }
  .cy-footer .cy-container { padding: 0 24px 0 54px; }
  .cy-footer p { font-size: 17px; line-height: 27px; }
  .cy-footer .cy-footer-copyright {
    right: 15px; left: 15px; font-size: 12px; line-height: 18px;
  }
  html.cy-home .cy-blk h2 { font-size: 26px; }
  html.cy-home .cy-field-questions a { font-size: 18px; }
  html.cy-services .cy-blk h1,
  html.cy-knowledge .cy-blk h1,
  html.cy-contact .cy-blk h1 { font-size: 40px; }
  html.cy-about .cy-about-final-cta { margin-bottom: 10px; }
  /* ⚠ 必須排除好室鈕：它同時掛 .cy-btn，而 ABOUT 的好室卡走好室7966 自己的
     CIS 配色（海綠 #00928A），不能被喬雍蔚藍蓋掉。這個坑 2026-07-30／07-31
     已經踩過三次，每次都是「某條 .cy-btn 規則忘了把好室鈕排除在外」。 */
  html.cy-about .cy-btn:not(.cy-btn-haoshi),
  html.cy-about .cy-btn-outline:not(.cy-btn-haoshi) {
    background: var(--cy-teal);
    border-color: var(--cy-teal);
    color: #fff;
  }
  html.cy-services .cy-blk > .cy-container > .cy-section:last-child { padding-bottom: 34px; }
  html.cy-knowledge .cy-kn-foot { margin-bottom: 30px; }
  html.cy-services .cy-blk h2,
  html.cy-services .cy-blk h3,
  html.cy-services .cy-bold,
  html.cy-services .cy-card-principle h3,
  html.cy-services .cy-card-soft h3,
  html.cy-services .cy-card-dual-header h3,
  html.cy-knowledge .cy-blk h2,
  html.cy-knowledge .cy-blk h3,
  html.cy-knowledge .cy-bold,
  html.cy-knowledge .cy-card-principle h3,
  html.cy-knowledge .cy-card-soft h3,
  html.cy-knowledge .cy-card-dual-header h3 { font-weight: 600; }
  /* ⚠ 只給「清潔工程專案」與「技術標準訓練」兩頁——駐點環境管理的小標在窄版
     本來就是暗青（舊站逐頁樣式如此，2026-07-31 對照 clean-up 前的基準確認）。
     寫成 html.cy-services 會連駐點頁一起上色，那是改設計不是清冗餘。 */
  html.cy-services-project .cy-blk h3.cy-c-yellow,
  html.cy-services-training .cy-blk h3.cy-c-yellow {
    color: var(--cy-yellow);
    border-color: var(--cy-yellow);
  }
  html.cy-services-project .cy-blk h3.cy-c-teal,
  html.cy-services-training .cy-blk h3.cy-c-teal {
    color: var(--cy-teal);
    border-color: var(--cy-teal);
  }
  html.cy-services-project .cy-blk h3.cy-c-green,
  html.cy-services-training .cy-blk h3.cy-c-green {
    color: var(--cy-green);
    border-color: var(--cy-green);
  }
}

@media (max-width: 767px) {
  html.cy-services .cy-blk h1,
  html.cy-knowledge .cy-blk h1,
  html.cy-contact .cy-blk h1 { font-size: 36px; }
}

@media (max-width: 640px) {
  .cy-fab-phone {
    right: 16px;
    bottom: calc(16px + var(--cy-footer-overlap, 0px));
    width: 56px;
    height: 56px;
  }
}

/* --- 首頁客戶名單跑馬燈（2026-08-08，首頁改版第一塊） --- */
.cy-client-marquee {
  padding: 26px 0;
  background: #fff;
}
.cy-marquee {
  display: flex;
  overflow: hidden;
  user-select: none;
}
.cy-marquee-track {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 64px;
  min-width: 100%;
  padding-right: 64px;
  animation: cy-marquee-scroll 150s linear infinite;
}
.cy-marquee-track img {
  /* 顯示尺寸交給各 img 的 width/height 屬性（面積正規化），CSS 不再統一鎖高 */
  object-fit: contain;
  flex: none;
}
.cy-marquee:hover .cy-marquee-track { animation-play-state: paused; }
/* JS 接手後（cy-marquee--manual）：改為可捲動容器，動畫停用、由 JS 推進。
 * 手機＝原生滑動（含慣性）；桌機＝按住拖曳；JS 關閉時維持上面的純 CSS 跑馬燈。 */
.cy-marquee--manual {
  overflow-x: auto;
  cursor: grab;
  touch-action: pan-x;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cy-marquee--manual::-webkit-scrollbar { display: none; }
.cy-marquee--manual .cy-marquee-track { animation: none; }
.cy-marquee--manual.is-dragging { cursor: grabbing; }
@keyframes cy-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .cy-marquee { overflow-x: auto; }
  .cy-marquee-track { animation: none; }
  .cy-marquee:not(.cy-marquee--manual) .cy-marquee-track[aria-hidden="true"] { display: none; }
}
@media (max-width: 640px) {
  .cy-client-marquee { padding: 18px 0; }
  .cy-marquee-track { gap: 40px; padding-right: 40px; animation-duration: 110s; zoom: 0.72; }
}

/* 2026-08-08 KN 改版：平板/手機（<992px）的標題與側欄樣式——
 * 桌機側欄樣式都包在 ≥992 媒體查詢內，窄版原本是裸清單；改版一併補齊。
 * :has 守衛確保只作用於列表頁，不波及文章內頁。 */
@media (max-width: 991px) {
  html.cy-knowledge:has(.cy-kn-legacy-layout) .cy-main > .cy-blk .cy-max-w-700 {
    max-width: none;
    text-align: left;
  }
  html.cy-knowledge:has(.cy-kn-legacy-layout) .cy-main > .cy-blk h1 {
    margin: 4px 0 8px;
    font-size: 34px;
  }
  html.cy-knowledge:has(.cy-kn-legacy-layout) .cy-main > .cy-blk .cy-max-w-700 > p:not(.cy-en-title) {
    display: none;
  }
  html.cy-knowledge:has(.cy-kn-legacy-layout) .cy-kn-search {
    display: flex;
    gap: 8px;
    margin: 0 0 14px;
  }
  html.cy-knowledge:has(.cy-kn-legacy-layout) .cy-kn-search input {
    flex: 1;
    min-width: 0;
    padding: 8px 12px;
    border: 1px solid #d8d8d8;
    border-radius: 8px;
    font: inherit;
  }
  html.cy-knowledge:has(.cy-kn-legacy-layout) .cy-kn-search button {
    padding: 8px 18px;
    border: 0;
    border-radius: 8px;
    background: var(--cy-dark);
    color: #fff;
    font: inherit;
  }
  html.cy-knowledge:has(.cy-kn-legacy-layout) .cy-kn-categories a[aria-current="page"] {
    color: var(--cy-teal);
    font-weight: 700;
  }
  html.cy-knowledge:has(.cy-kn-legacy-layout) .cy-kn-categories ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 4px;
    padding: 0;
    list-style: none;
  }
  html.cy-knowledge:has(.cy-kn-legacy-layout) .cy-kn-categories a {
    display: inline-block;
    padding: 5px 14px;
    border: 1px solid #d8d8d8;
    border-radius: 999px;
    color: var(--cy-dark);
    font-size: 14px;
    text-decoration: none;
  }
  html.cy-knowledge:has(.cy-kn-legacy-layout) .cy-kn-categories a[aria-current="page"] {
    border-color: var(--cy-dark);
    background: var(--cy-dark);
    color: #fff;
  }
}