/* foundation.css */
:root {
  --brand: #f39a17;
  --brand-primary: var(--brand);
  --brand-dark: #d88308;
  --brand-light: rgba(243, 154, 23, 0.10);
  --text: #1c2531;
  --muted: #5e6774;
  --bg: #f6f8fb;
  --surface: #ffffff;
  --line: #dde3ec;
  --line-strong: #c7d0dd;
  --footer-bg: #1a2029;
  --footer-text: #d6dde8;
  --radius: 16px;
  --shadow: 0 12px 30px rgba(22, 30, 42, 0.08);
  --shadow-lg: 0 20px 48px rgba(22, 30, 42, 0.12);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: "Segoe UI", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.66;
}

body.menu-open {
  overflow: hidden;
}

.skip-link {
  position: fixed;
  z-index: 10000;
  top: .75rem;
  left: .75rem;
  padding: .7rem 1rem;
  border: 2px solid var(--brand-dark);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font-weight: 800;
  box-shadow: var(--shadow);
  transform: translateY(calc(-100% - 1rem));
  transition: transform .15s ease;
}

.skip-link:focus {
  color: var(--text);
  transform: translateY(0);
}

#main-content:focus {
  outline: none;
}

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

a { color: inherit; text-decoration: none; }
a:hover { color: var(--brand-dark); }

.container {
  width: min(1140px, 92%);
  margin: 0 auto;
}

@media (min-width: 980px) and (max-width: 1300px) {
  body.site-hk-en .site-head .container,
  body.site-hk-zh .site-head .container {
    width: min(1200px, 96%);
  }
}

@media (min-width: 980px) and (max-width: 1100px) {
  body.site-hk-en .site-head .site-head-row,
  body.site-hk-zh .site-head .site-head-row {
    gap: 8px;
  }

  body.site-hk-en .site-head .site-header-bar,
  body.site-hk-zh .site-head .site-header-bar {
    gap: 8px;
  }

  body.site-hk-en .site-head .brand,
  body.site-hk-zh .site-head .brand {
    margin-right: 0;
  }

  body.site-hk-en .site-head .brand img,
  body.site-hk-zh .site-head .brand img {
    width: 108px;
  }

  body.site-hk-en .site-head .site-header-end,
  body.site-hk-zh .site-head .site-header-end,
  body.site-hk-en .site-head .lang-switch,
  body.site-hk-zh .site-head .lang-switch {
    gap: 4px;
  }

  body.site-hk-en .site-head .lang-switch__icon,
  body.site-hk-zh .site-head .lang-switch__icon {
    display: none;
  }

  body.site-hk-en .site-head .lang-switch__link,
  body.site-hk-zh .site-head .lang-switch__link {
    min-width: 2.1rem;
    min-height: 34px;
    padding: 6px 8px;
  }

  body.site-hk-en .site-head .site-nav,
  body.site-hk-zh .site-head .site-nav,
  body.site-hk-en .site-head .nav-list,
  body.site-hk-zh .site-head .nav-list {
    gap: 3px;
  }

  body.site-hk-en .site-head .nav-trigger,
  body.site-hk-zh .site-head .nav-trigger,
  body.site-hk-en .site-head .nav-link,
  body.site-hk-zh .site-head .nav-link {
    padding-right: 7px;
    padding-left: 7px;
    font-size: .78rem;
  }

  body.site-hk-en .site-head .nav-cta,
  body.site-hk-zh .site-head .nav-cta {
    margin-left: 2px;
    padding: .52rem .7rem;
    font-size: .78rem;
  }
}


/* site-hk-zh.css */

.eyebrow {
  display: inline-block;
  margin: 0 0 10px;
  color: var(--brand-dark);
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  text-transform: uppercase;
  font-weight: 700;
}

h1, h2, h3 {
  margin: 0 0 12px;
  line-height: 1.28;
}

h1 { font-size: clamp(2rem, 4vw, 3.05rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
h3 { font-size: 1.08rem; }

p { margin: 0 0 16px; }
.muted { color: var(--muted); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 999px;
  padding: 0.78rem 1.18rem;
  font-size: 0.92rem;
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.btn-primary {
  background: var(--brand);
  color: #fff;
}

.btn-primary:hover {
  background: var(--brand-dark);
  color: #fff;
  box-shadow: 0 4px 16px rgba(243, 154, 23, 0.3);
}

.btn-ghost {
  background: #fff;
  border-color: var(--line);
  color: var(--text);
}

.btn-ghost:hover {
  border-color: var(--brand);
  color: var(--brand-dark);
}

/* =========================================
   HEADER
   ========================================= */

/* Sticky shell — no backdrop-filter here (would trap fixed #site-nav in a small CB). */
.site-head {
  --header-height: 72px;
  position: sticky;
  top: 0;
  z-index: 120;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--line);
}

/* Logo + hamburger row only; blur stays off #site-nav (sibling), so mobile fixed overlay uses the viewport. */
.site-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--header-height);
  min-width: 0;
  flex: 1 1 100%;
  backdrop-filter: blur(10px);
}

@media (max-width: 979px) {
  .site-header-bar {
    gap: 10px 14px;
  }

  .site-header-end {
    gap: 6px 8px;
  }
}

@media (min-width: 980px) {
  .site-header-bar {
    gap: 28px;
  }

  .brand {
    margin-right: 6px;
  }
}

.site-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: relative;
}

@media (min-width: 980px) {
  .site-head-row {
    flex-wrap: nowrap;
    align-items: center;
    min-height: var(--header-height);
    gap: 22px;
  }

  .site-header-bar {
    flex: 0 0 auto;
    min-height: 0;
    align-self: stretch;
    backdrop-filter: none;
  }
}

.brand {
  min-width: 0;
  flex: 0 1 auto;
}

.brand img {
  width: 135px;
  height: auto;
  display: block;
}

.site-header-end {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

@media (min-width: 980px) {
  .site-header-end {
    gap: 14px;
  }
}

.header-mobile-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.52rem 0.88rem;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2;
  max-width: min(44vw, 196px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
}

@media (max-width: 420px) {
  .brand img {
    width: min(118px, 36vw);
  }

  .header-mobile-cta {
    font-size: 0.76rem;
    padding: 0.46rem 0.68rem;
    max-width: min(40vw, 168px);
  }

  .site-header-bar {
    gap: 8px 10px;
  }

  .site-header-end {
    gap: 5px 6px;
  }
}

@media (min-width: 980px) {
  .header-mobile-cta {
    display: none !important;
  }
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.lang-switch__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #7a8494;
  line-height: 0;
}

.lang-switch__icon-svg {
  display: block;
}

.lang-switch__track {
  display: inline-flex;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 2px;
  max-width: 100%;
  min-width: 0;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(246, 248, 251, 0.95);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.lang-switch__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-dark);
  text-decoration: none;
  padding: 9px 16px;
  min-width: 3rem;
  min-height: 38px;
  border-radius: 999px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.lang-switch__link:hover {
  background: rgba(243, 154, 23, 0.12);
  color: var(--brand-dark);
  box-shadow: inset 0 0 0 1px rgba(243, 154, 23, 0.18);
}

.lang-switch__link:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.lang-switch__current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  padding: 9px 16px;
  min-width: 3rem;
  min-height: 38px;
  border-radius: 999px;
  white-space: nowrap;
  background: linear-gradient(180deg, #fff 0%, #f0f2f6 100%);
  box-shadow:
    0 1px 2px rgba(22, 30, 42, 0.08),
    inset 0 0 0 1px rgba(243, 154, 23, 0.38);
}

@media (min-width: 980px) {
  .lang-switch--topbar {
    flex-shrink: 0;
  }

  .lang-switch {
    font-size: 0.82rem;
  }

  .lang-switch__link,
  .lang-switch__current {
    padding: 10px 17px;
    min-height: 40px;
  }

  .lang-switch--topbar .lang-switch__link,
  .lang-switch--topbar .lang-switch__current {
    padding: 11px 18px;
    min-height: 42px;
    min-width: 3.1rem;
  }

  /* Clear selected state; still lighter than primary CTA */
  .lang-switch--topbar .lang-switch__current {
    color: var(--text);
    font-weight: 700;
    background: rgba(243, 154, 23, 0.11);
    box-shadow:
      inset 0 0 0 1px rgba(243, 154, 23, 0.38),
      0 1px 2px rgba(22, 30, 42, 0.06);
  }

  .lang-switch--topbar .lang-switch__link:hover {
    box-shadow: inset 0 0 0 1px rgba(243, 154, 23, 0.22);
  }

  .lang-switch--drawer {
    display: none !important;
  }
}

.site-nav-lang-drawer {
  display: none;
}

@media (max-width: 979px) {
  .lang-switch--topbar {
    display: none !important;
  }

  .site-nav-lang-drawer {
    display: block;
    width: 100%;
    margin: 0 0 6px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(221, 227, 236, 0.85);
  }

  .site-nav-lang-heading {
    margin: 0 0 10px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .lang-switch--drawer {
    width: 100%;
    max-width: 100%;
    gap: 8px;
  }

  .lang-switch--drawer .lang-switch__track {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
  }

  .lang-switch--drawer .lang-switch__link,
  .lang-switch--drawer .lang-switch__current {
    min-height: 48px;
    min-width: 3.25rem;
    padding: 12px 14px;
    flex: 1 1 auto;
    justify-content: center;
  }

  .lang-switch--drawer .lang-switch__current {
    color: var(--text);
    background: linear-gradient(180deg, #fff 0%, #eef1f5 100%);
    box-shadow:
      0 1px 2px rgba(22, 30, 42, 0.07),
      inset 0 0 0 1px rgba(243, 154, 23, 0.4);
  }
}

/* ---- Mobile menu toggle ---- */

.menu-toggle {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  z-index: 140;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.menu-toggle:hover {
  background: #f4f7fb;
  border-color: var(--line-strong);
}

.menu-toggle:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.menu-toggle span:not(.sr-only) {
  width: 18px;
  height: 2px;
  background: var(--text);
  display: block;
  transition: transform 0.2s ease;
}

/* ---- Primary nav list (single DOM tree: ul > li > trigger|link + submenu) ---- */

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

/* ---- Mobile nav (≤979px): fixed overlay ONLY when .is-open (avoids WebKit fixed+closed subtree) ---- */

@media (max-width: 979px) {
  /* JS: [hidden] when sheet closed — native hiding alongside .is-open */
  #site-nav[hidden] {
    display: none !important;
  }

  /*
   * Closed: not position:fixed — no fixed compositing layer while display:none/hidden.
   * Open: sole mobile state that uses fixed full-viewport overlay.
   */
  .site-nav:not(.is-open) {
    display: none !important;
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: auto !important;
    max-width: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    z-index: auto !important;
    box-shadow: none !important;
  }

  .site-nav.is-open {
    display: block !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: var(--header-height) !important;
    bottom: 0 !important;
    /* dvh: mobile browser chrome; fills viewport below header (not a nested CB). */
    min-height: calc(100dvh - var(--header-height)) !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    background: var(--surface) !important;
    padding: 18px 5% 32px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    z-index: 130 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    max-height: none !important;
    border-top: 1px solid rgba(221, 227, 236, 0.85) !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .nav-list {
    display: block;
  }
}

/* ---- Nav items (mobile) ---- */

.nav-item {
  border-bottom: 1px solid rgba(221, 227, 236, 0.7);
}

.nav-item-has-children {
  position: relative;
}

/* ---- Unified trigger button — label + caret in one control ---- */

.nav-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 50px;
  padding: 6px 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.nav-trigger.is-active {
  color: var(--brand-dark);
}

.nav-caret {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  transition: transform 0.25s ease;
  color: var(--muted);
}

.nav-item.is-open > .nav-trigger .nav-caret {
  transform: rotate(180deg);
}

/* ---- Plain nav links (no children) ---- */

.nav-link {
  display: flex;
  align-items: center;
  min-height: 50px;
  padding: 6px 0;
  font-size: 0.96rem;
  font-weight: 700;
}

.nav-link.is-active {
  color: var(--brand-dark);
}

.nav-link.nav-link--current {
  color: var(--brand-dark);
  border-left: 2px solid rgba(243, 154, 23, 0.75);
  padding-left: 12px;
  margin-left: -2px;
  background: rgba(243, 154, 23, 0.06);
  border-radius: 0 10px 10px 0;
}

/* ---- Subnav panel (mobile: accordion) ---- */

.subnav-panel {
  display: none;
  padding: 0 0 12px;
}

.nav-item-has-children.is-open > .subnav-panel {
  display: block;
}

.subnav-grid {
  display: grid;
  gap: 4px;
}

.subnav-link {
  color: var(--muted);
  font-size: 0.9rem;
  padding: 16px;
  border-radius: 12px;
  background: #f8fafd;
  border: 1px solid transparent;
  display: block;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.subnav-link:hover,
.subnav-link:focus-visible {
  background: #fff;
  border-color: rgba(243, 154, 23, 0.2);
  color: var(--brand-dark);
}

.subnav-link.is-active {
  color: var(--brand-dark);
  font-weight: 700;
  border-color: rgba(243, 154, 23, 0.24);
  background: rgba(243, 154, 23, 0.09);
}

.nav-cta {
  margin-top: 18px;
  width: 100%;
  text-align: center;
}

@media (max-width: 979px) {
  .nav-cta {
    display: none !important;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* =========================================
   HERO
   ========================================= */

.hero, .page-hero {
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #eff4fb 0%, #f8fafc 100%);
  overflow: hidden;
}

.hero { padding: 72px 0 52px; }
.page-hero { padding: 54px 0 40px; }

.hero-layout,
.page-hero-layout {
  display: grid;
  gap: 18px;
}

/* Trust strip 與 copy／視覺欄同一個 .container，避免多一層 .container；需跨滿兩欄 */
.page-hero-layout > .page-hero-trust-strip {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
}

.hero-content,
.hero-note,
.hero-visual,
.page-hero-visual,
.card,
.contact-card,
.proof-summary-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.hero-content,
.hero-note,
.page-hero-visual,
.hero-visual,
.proof-summary-card {
  padding: clamp(22px, 4vw, 38px);
}

.hero-content,
.page-hero-copy {
  position: relative;
}

.hero-content::after,
.page-hero-copy::after {
  content: "";
  position: absolute;
  right: -80px;
  top: -60px;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(243, 154, 23, 0.18) 0%, rgba(243, 154, 23, 0) 70%);
  pointer-events: none;
}

.hero-lead,
.page-intro,
.section-intro {
  color: var(--muted);
  max-width: 74ch;
}

.hero-lead-stack {
  display: grid;
  gap: 14px;
  max-width: 74ch;
}

.hero-lead-stack .hero-lead {
  margin: 0;
}

.page-hero-trust-meta {
  margin: 14px 0 0;
  max-width: 74ch;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #4a5568;
  padding: 16px;
  border-radius: 10px;
  background: rgba(37, 79, 133, 0.06);
  border: 1px solid rgba(37, 79, 133, 0.1);
}

.page-hero-trust-hint {
  margin: 8px 0 0;
  max-width: 74ch;
  font-size: 0.8rem;
  font-weight: 600;
  color: #7a8494;
  line-height: 1.45;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.hero-note h2 { font-size: 1.18rem; margin-bottom: 10px; }

.hero-note ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
}

.hero-visual,
.page-hero-visual {
  position: relative;
  min-height: 320px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(24, 45, 72, 0.96), rgba(243, 154, 23, 0.8)),
    linear-gradient(180deg, #eef3fb, #ffffff);
  color: #fff;
}

.hero-visual::before,
.page-hero-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 28%),
    radial-gradient(circle at 84% 76%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 24%);
  z-index: 1;
  pointer-events: none;
}

.hero-visual img,
.page-hero-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

.hero-visual-overlay,
.page-hero-visual-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(17, 26, 40, 0.62) 0%,
    rgba(17, 26, 40, 0.38) 40%,
    rgba(17, 26, 40, 0.18) 100%
  );
  z-index: 2;
}

.hero-visual-content,
.page-hero-visual-content {
  position: relative;
  z-index: 3;
  display: grid;
  align-content: space-between;
  gap: 18px;
  min-height: 100%;
}

.hero-visual-label,
.page-hero-visual-label {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.82rem;
  font-weight: 700;
}

.hero-highlight-grid,
.page-hero-highlight-grid,
.mini-stat-grid,
.proof-summary-grid {
  display: grid;
  gap: 12px;
}

.mini-stat-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mini-stat,
.hero-highlight-card,
.page-hero-highlight-card {
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(8px);
}

.mini-stat strong,
.hero-highlight-card strong,
.page-hero-highlight-card strong {
  display: block;
  margin-bottom: 4px;
}

.mini-stat strong { font-size: 1.18rem; }

.mini-stat span,
.hero-highlight-card span,
.page-hero-highlight-card span {
  display: block;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.88rem;
}

.hero-visual-bullets,
.page-hero-visual-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
}

.hero-visual-bullets li,
.page-hero-visual-bullets li {
  margin: 0;
  padding-left: 1.1em;
  position: relative;
}

.hero-visual-bullets li::before,
.page-hero-visual-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
}

/* =========================================
   BREADCRUMBS
   ========================================= */

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
  color: #6c7482;
  font-size: 0.88rem;
}

.breadcrumbs a:hover {
  color: var(--brand-dark);
}

/* =========================================
   SECTIONS
   ========================================= */

.section {
  padding: 68px 0;
}

.section-alt {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.grid {
  display: grid;
  gap: 18px;
}

.grid-3,
.grid-4 {
  grid-template-columns: 1fr;
}

/* ---- Cards ---- */

.card {
  padding: 22px;
  position: relative;
  overflow: hidden;
}

.section-card {
  min-height: 160px;
}

.section-card-grid,
.insight-grid,
.case-grid,
.faq-list {
  margin-top: 18px;
}

.section-card,
.contact-card,
.case-card,
.insight-card,
.timeline-item,
.faq-item {
  isolation: isolate;
}

.section-card::before,
.contact-card::before,
.case-card::before,
.insight-card::before,
.timeline-item::before,
.faq-item::before {
  content: "";
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: inline-flex;
  margin-bottom: 16px;
  background: linear-gradient(135deg, rgba(243, 154, 23, 0.16), rgba(243, 154, 23, 0.04));
  box-shadow: inset 0 0 0 1px rgba(243, 154, 23, 0.16);
}

.section-card::after,
.contact-card::after,
.case-card::after,
.insight-card::after {
  content: "";
  position: absolute;
  right: -24px;
  bottom: -28px;
  width: 120px;
  height: 120px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(37, 79, 133, 0.08) 0%, rgba(37, 79, 133, 0) 70%);
  z-index: -1;
}

.card h3 { margin-bottom: 10px; }
.card p:last-child { margin-bottom: 0; }

.sector-link {
  color: var(--brand-dark);
  font-weight: 700;
  font-size: 0.92rem;
}

.sector-link:hover {
  text-decoration: underline;
}

/* ---- Chips ---- */

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  border-radius: 999px;
  border: 1px solid #d3dbe7;
  background: #f9fbff;
  color: #3b4658;
  font-size: 0.86rem;
  font-weight: 700;
  padding: 0 12px;
  transition: border-color 0.2s ease;
}

.chip-link:hover {
  border-color: var(--brand);
}

/* ---- Tables ---- */

.table-wrap {
  margin-top: 18px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}

.comparison-table th,
.comparison-table td {
  border-bottom: 1px solid rgba(221, 227, 236, 0.95);
  padding: 18px 20px;
  text-align: left;
  vertical-align: top;
}

.comparison-table th {
  background: #e8edf5;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
  border-bottom: 1px solid #d0d8e6;
}

.comparison-table tbody tr:last-child td {
  border-bottom: 0;
}

/* ---- Steps ---- */

.step-card {
  position: relative;
  padding-top: 58px;
}

.step-index {
  position: absolute;
  top: 18px;
  left: 22px;
  width: 30px;
  height: 30px;
  margin: 0;
  border-radius: 999px;
  background: rgba(243, 154, 23, 0.12);
  color: var(--brand-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

/* ---- Case & insight cards ---- */

.case-card,
.insight-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.news-meta {
  color: #6a7280;
  font-size: 0.84rem;
  font-weight: 700;
}

.case-meta-line {
  display: grid;
  gap: 4px;
  padding-top: 8px;
  border-top: 1px solid #edf1f6;
}

.case-meta-line span {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted);
}

.case-meta-line strong,
.insight-related strong {
  font-size: 0.8rem;
  color: #6a7280;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.insight-card[data-category="AI"] .card-media-banner {
  background: linear-gradient(140deg, rgba(28, 48, 78, 0.94), rgba(82, 143, 211, 0.7));
}

.insight-card[data-category="數碼營運"] .card-media-banner {
  background: linear-gradient(140deg, rgba(28, 58, 66, 0.94), rgba(71, 163, 140, 0.68));
}

.insight-card[data-category="網站及系統"] .card-media-banner {
  background: linear-gradient(140deg, rgba(61, 43, 20, 0.94), rgba(243, 154, 23, 0.74));
}

.insight-related {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* ---- Timeline ---- */

.timeline {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.timeline-year {
  margin-bottom: 8px;
}

/* ---- FAQ ---- */

.faq-item h3 {
  font-size: 1rem;
}

/* FAQ accordion (premium icons: plus / minus / chevron — see /assets/icons/faq-premium-sprite.svg) */
.faq-item--accordion {
  padding: 0;
  overflow: hidden;
}

.faq-item--accordion::before {
  display: none !important;
}

.faq-item-heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.faq-trigger {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  margin: 0;
  padding: 18px 20px;
  text-align: left;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
  border-radius: inherit;
  transition: background 0.15s ease;
}

.faq-trigger:hover {
  background: rgba(37, 79, 133, 0.045);
}

.faq-trigger:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

.faq-trigger-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.45;
  color: #1a2332;
}

.faq-trigger-icons {
  position: relative;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 2px;
}

.faq-trigger-icons .faq-icon-svg {
  position: absolute;
  inset: 0;
  display: block;
}

.faq-trigger-icons .faq-icon-svg use {
  pointer-events: none;
}

.faq-trigger[aria-expanded="false"] .faq-icon-svg--minus,
.faq-trigger[aria-expanded="false"] .faq-icon-svg--chevron-up {
  opacity: 0;
}

.faq-trigger[aria-expanded="true"] .faq-icon-svg--plus,
.faq-trigger[aria-expanded="true"] .faq-icon-svg--chevron-down {
  opacity: 0;
}

.faq-list--accordion:not(.faq-list--icons-chevron) .faq-trigger-icons--chevron {
  display: none;
}

.faq-list--accordion.faq-list--icons-chevron .faq-trigger-icons--plusminus {
  display: none;
}

.faq-panel-inner {
  padding: 0 20px 18px;
}

.faq-panel-inner p {
  margin: 0;
  font-size: 0.93rem;
  line-height: 1.65;
  color: #3d4a5c;
}

.faq-panel-inner p + p {
  margin-top: 12px;
}

.faq-item .faq-answer-body p {
  margin: 0 0 12px;
  font-size: 0.93rem;
  line-height: 1.65;
  color: #3d4a5c;
}

.faq-item .faq-answer-body p:last-child {
  margin-bottom: 0;
}

.faq-item--accordion.faq-item--is-open {
  border-color: rgba(37, 79, 133, 0.14);
}

/* ---- Rich text ---- */

.rich-text-block h2 {
  font-size: 1.16rem;
  margin-top: 22px;
}

.rich-text-block h2:first-child {
  margin-top: 0;
}

/* ---- Service CTA: base rules are in visual polish section ---- */

/* =========================================
   CONTACT
   ========================================= */

.contact-methods {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 18px;
}

.contact-methods-enhanced {
  gap: 16px;
  /* Keep WhatsApp + split row stacked; do not pair with tablet 2-col .contact-methods */
  grid-template-columns: minmax(0, 1fr);
}

.contact-methods-enhanced > .contact-methods-split {
  grid-column: 1 / -1;
  min-width: 0;
}

.contact-methods-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.contact-methods-right {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Mobile / tablet: single column, natural card height (no column split) */
@media (max-width: 1023px) {
  .contact-methods-split {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .contact-methods-left,
  .contact-methods-right {
    display: contents;
  }

  .contact-methods-right .contact-card-address {
    height: auto;
  }

  .contact-methods-right .contact-card-address,
  .contact-methods-right .contact-map-figure,
  .contact-methods-right .contact-map-figure img {
    flex: none;
    min-height: 0;
    max-height: none;
  }
}

/* Desktop: left = company / phone / email; right = address + map only */
@media (min-width: 1024px) {
  .contact-methods-split:not(.contact-methods-split--no-address) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    align-items: stretch;
  }

  .contact-methods-split--no-address {
    display: block;
  }

  .contact-methods-split:not(.contact-methods-split--no-address) .contact-methods-left {
    align-self: start;
  }

  .contact-methods-split:not(.contact-methods-split--no-address) .contact-methods-right {
    align-self: stretch;
  }

  .contact-methods-right .contact-card-address {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .contact-methods-right .contact-map-figure {
    flex: 1 1 auto;
    min-height: 220px;
    display: flex;
    flex-direction: column;
  }

  .contact-methods-right .contact-map-figure img {
    flex: 1 1 auto;
    width: 100%;
    min-height: 200px;
    max-height: none;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }
}

.contact-card {
  padding: 22px;
}

.contact-card p,
.contact-card a {
  color: var(--text);
  font-weight: 600;
  word-break: break-word;
}

.contact-card-has-icon::before,
.contact-card-has-icon::after {
  display: none !important;
}

.contact-card-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.contact-card-head h3 {
  margin: 0;
  font-size: 1.05rem;
}

.contact-card-icon-wrap {
  display: inline-flex;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--brand-dark);
}

.contact-icon-svg {
  display: block;
}

.contact-card-priority {
  grid-column: 1 / -1;
  background: rgba(243, 154, 23, 0.07);
  border: 1px solid rgba(243, 154, 23, 0.35);
  box-shadow: 0 8px 28px rgba(22, 30, 42, 0.06);
}

.contact-card-priority-label {
  margin: 0 0 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--brand-dark);
  text-transform: none;
}

.contact-card-hours {
  margin-top: 8px;
  font-weight: 500;
  color: var(--muted);
}

.contact-hours-block {
  margin-top: 8px;
  margin-bottom: 12px;
}

.contact-hours-block .contact-card-hours {
  margin: 0;
}

.contact-card-hours-note {
  margin: 4px 0 0;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.45;
}

.contact-wa-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 20px;
}

.contact-wa-main {
  flex: 1 1 220px;
  min-width: 0;
}

.contact-wa-note {
  margin: 6px 0 8px;
  font-size: 0.86rem;
  font-weight: 600;
}

.contact-wa-number {
  margin: 0;
  font-size: 1.05rem;
}

.contact-wa-cta-side {
  flex: 0 0 auto;
}

.btn-wa-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.55rem 1.1rem;
  font-size: 0.9rem;
  white-space: nowrap;
}

.btn-wa-arrow {
  font-weight: 700;
  opacity: 0.95;
}

@media (max-width: 639px) {
  .contact-wa-cta-side {
    flex: 1 1 100%;
  }

  .btn-wa-inline {
    width: 100%;
    justify-content: center;
  }
}

.contact-card-email .contact-email-line {
  margin: 0;
}

.contact-methods-enhanced .contact-card-company,
.contact-methods-enhanced .contact-card-phone,
.contact-methods-enhanced .contact-card-email {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.contact-methods-enhanced .contact-card-company .contact-company-lines {
  flex: 0 1 auto;
}

.contact-methods-left .contact-card-email .contact-email-cta-wrap {
  margin-top: 10px;
}

.contact-map-figure {
  position: relative;
  display: block;
  margin-top: 12px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(208, 216, 230, 0.95);
  background: #eef2f8;
  line-height: 0;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.contact-map-figure:hover {
  border-color: rgba(243, 154, 23, 0.45);
  box-shadow: 0 10px 28px rgba(22, 30, 42, 0.1);
}

.contact-map-figure:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

.contact-map-figure img {
  width: 100%;
  height: auto;
  max-height: 220px;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.contact-map-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
  color: #3d4a5c;
  padding: 5px 9px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(208, 216, 230, 0.95);
  box-shadow: 0 2px 8px rgba(22, 30, 42, 0.08);
}

.contact-map-action {
  margin-top: 12px;
  margin-bottom: 0 !important;
}

.btn-map-open {
  width: 100%;
  justify-content: center;
}

.page-hero-actions {
  margin-top: 18px;
}

.page-hero-actions .hero-actions {
  margin-top: 0;
}

.page-id-contact .page-hero-actions .btn-primary {
  box-shadow: 0 10px 28px rgba(243, 154, 23, 0.35);
  min-width: 168px;
  justify-content: center;
}

.page-id-contact .page-hero-actions .btn-ghost {
  border-color: rgba(37, 79, 133, 0.22);
}

.page-id-contact .page-hero-visual-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page-id-contact .page-hero-visual-overlay {
  background: linear-gradient(
    155deg,
    rgba(17, 26, 40, 0.38) 0%,
    rgba(17, 26, 40, 0.2) 45%,
    rgba(17, 26, 40, 0.08) 100%
  );
}

.page-id-contact .page-hero-visual-content {
  position: relative;
  z-index: 3;
  align-content: flex-end;
  justify-items: start;
  min-height: 280px;
}

.page-id-contact .page-hero-visual-label {
  margin-top: auto;
}

@media (max-width: 779px) {
  .page-id-contact .page-hero-layout {
    gap: 16px;
  }

  .page-id-contact .page-hero-visual {
    min-height: 200px;
    max-height: min(42vh, 280px);
  }
}

@media (max-width: 639px) {
  .section-contact-wa-cta .contact-cta-card .btn-primary {
    width: 100%;
  }
}

a.contact-enquiry-card {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

a.contact-enquiry-card.section-card::before,
a.contact-enquiry-card.section-card::after {
  display: none !important;
}

a.contact-enquiry-card:hover {
  transform: translateY(-4px);
  border-color: rgba(243, 154, 23, 0.35);
  box-shadow: 0 22px 48px rgba(22, 30, 42, 0.14);
}

a.contact-enquiry-card h3 {
  color: var(--text);
}

a.contact-enquiry-card:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

.contact-methods-enhanced .contact-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.contact-methods-enhanced .contact-card:not(.contact-card-wa-block):hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(22, 30, 42, 0.1);
}

a.contact-card-wa-block {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  display: block;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

a.contact-card-wa-block:hover {
  transform: translateY(-3px);
  border-color: rgba(243, 154, 23, 0.48);
  box-shadow: 0 20px 44px rgba(22, 30, 42, 0.14);
}

a.contact-card-wa-block:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

.contact-wa-micro {
  margin: 4px 0 0;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.contact-company-lines {
  display: grid;
  gap: 2px;
  margin: 0;
}

.contact-company-zh {
  margin: 0;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.35;
}

.contact-company-en {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.3;
}

.contact-card-support {
  margin: 8px 0 0;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.45;
}

.contact-phone-main {
  margin: 0;
}

.contact-email-cta-wrap {
  margin: 10px 0 0;
}

.contact-email-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--brand-dark);
  text-decoration: none;
}

.contact-email-cta:hover {
  text-decoration: underline;
}

.contact-email-cta:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

.contact-address-trust {
  margin: 10px 0 0;
  font-size: 0.82rem;
  font-weight: 600;
}

.contact-prep-section .section-card > p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.contact-prep-section .section-card-prep {
  position: relative;
  padding-top: 52px;
  min-height: 168px;
  display: flex;
  flex-direction: column;
}

.contact-prep-section .section-card-prep::before,
.contact-prep-section .section-card-prep::after {
  display: none !important;
}

.contact-prep-section .section-card-prep h3 {
  font-weight: 700;
}

.contact-prep-index {
  position: absolute;
  top: 18px;
  left: 22px;
  width: 30px;
  height: 30px;
  margin: 0;
  border-radius: 999px;
  background: rgba(37, 79, 133, 0.1);
  color: var(--brand-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.92rem;
}

.contact-enquiry-section .section-card-grid {
  align-items: stretch;
}

.contact-enquiry-section a.contact-enquiry-card {
  height: 100%;
  min-height: 168px;
  display: flex;
  flex-direction: column;
}

.contact-enquiry-section a.contact-enquiry-card .section-card-desc {
  flex: 1 1 auto;
  line-height: 1.55;
  font-size: 0.92rem;
  color: #5a6372;
}

.contact-enquiry-section a.contact-enquiry-card h3 {
  font-weight: 700;
  padding-right: 1.25em;
  position: relative;
}

.contact-enquiry-section a.contact-enquiry-card h3::after {
  content: "→";
  position: absolute;
  right: 0;
  top: 0.1em;
  font-weight: 700;
  color: rgba(37, 79, 133, 0.45);
  transition: transform 0.22s ease, color 0.22s ease;
}

.contact-enquiry-section a.contact-enquiry-card:hover h3::after {
  transform: translateX(3px);
  color: var(--brand-dark);
}

.section-contact-wa-cta {
  border-top: 1px solid var(--line);
}

.section-contact-wa-cta .contact-cta-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-color: rgba(243, 154, 23, 0.22);
  background:
    radial-gradient(ellipse at 92% 8%, rgba(243, 154, 23, 0.12), transparent 52%),
    linear-gradient(145deg, #ffffff 0%, #f5f7fb 100%);
  box-shadow: 0 14px 44px rgba(22, 30, 42, 0.08);
}

.section-contact-wa-cta .contact-cta-card .hero-actions {
  flex-direction: column;
  align-items: stretch;
}

.section-contact-wa-cta .contact-cta-card .btn-primary {
  min-height: 50px;
  font-size: 1.02rem;
  font-weight: 700;
  justify-content: center;
  box-shadow: 0 12px 32px rgba(243, 154, 23, 0.32);
}

.cta-actions-note {
  margin: 14px 0 0;
  font-size: 0.86rem;
  color: var(--muted);
  font-weight: 600;
  text-align: center;
}

@media (min-width: 640px) {
  .section-contact-wa-cta .contact-cta-card .hero-actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .section-contact-wa-cta .contact-cta-card .btn-primary {
    min-width: 240px;
  }

  .cta-actions-note {
    text-align: left;
  }
}

@media (min-width: 780px) {
  .section-contact-wa-cta .contact-cta-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    column-gap: 32px;
    row-gap: 10px;
    align-items: start;
  }

  .section-contact-wa-cta .contact-cta-card h2 {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
  }

  .section-contact-wa-cta .contact-cta-card > p:not(.cta-actions-note) {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
  }

  .section-contact-wa-cta .contact-cta-card .hero-actions {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: end;
    flex-direction: column;
    align-items: stretch;
    min-width: 220px;
  }

  .section-contact-wa-cta .contact-cta-card .cta-actions-note {
    grid-column: 1 / -1;
    grid-row: 3;
    margin: 6px 0 0;
    text-align: center;
  }
}

/* =========================================
   LOGO STRIP / CLIENT PROOF
   ========================================= */

.logo-strip-intro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.logo-strip-intro p {
  margin: 0;
}

.logo-grid,
.logo-group-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.logo-card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 110px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #ffffff, #f9fbfd);
  box-shadow: 0 6px 18px rgba(22, 30, 42, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.logo-card:hover {
  border-color: rgba(243, 154, 23, 0.3);
  box-shadow: 0 8px 24px rgba(22, 30, 42, 0.08);
}

.logo-card .logo-card-media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.logo-card .logo-card-media .case-card-image-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 0;
}

.logo-card img,
.logo-card .logo-card-media img {
  max-width: 100%;
  max-height: 84px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1) contrast(1.03);
  opacity: 0.92;
  transition: filter 0.3s ease, opacity 0.3s ease;
}

.logo-card:hover img,
.logo-card:hover .logo-card-media img {
  filter: grayscale(0);
  opacity: 1;
}

.logo-card .logo-card-media .case-card-image-trigger:hover img {
  transform: scale(1.04);
  transition: transform 0.2s ease, filter 0.3s ease, opacity 0.3s ease;
}

.logo-group + .logo-group {
  margin-top: 30px;
}

.logo-group-title {
  margin-bottom: 14px;
}

/* =========================================
   RELATED PAGES
   ========================================= */

.related-pages .grid {
  margin-top: 18px;
  align-items: stretch;
}

.related-page-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
}

.related-page-card-desc {
  flex: 1 1 auto;
  line-height: 1.55;
  font-size: 0.92rem;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.related-page-card-foot {
  margin: 12px 0 0;
}

.related-page-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--brand-dark);
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
}

.related-page-link::after {
  content: "→";
  font-weight: 700;
  transition: transform 0.2s ease;
  color: rgba(37, 79, 133, 0.45);
}

.related-page-link:hover {
  text-decoration: underline;
  color: var(--brand-dark);
}

.related-page-link:hover::after {
  transform: translateX(3px);
  color: var(--brand-dark);
}

.related-page-link:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

.related-page-card--action {
  border-color: rgba(243, 154, 23, 0.22);
  box-shadow: inset 0 0 0 1px rgba(243, 154, 23, 0.06);
}

.related-page-card--info {
  border-color: rgba(37, 79, 133, 0.08);
}

.related-page-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0 0 12px;
  border-radius: 14px;
  flex-shrink: 0;
  background: linear-gradient(145deg, rgba(37, 79, 133, 0.06), rgba(243, 154, 23, 0.06));
  border: 1px solid rgba(37, 79, 133, 0.1);
}

.related-page-card-icon-svg {
  display: block;
  width: 22px;
  height: 22px;
}

.related-page-card-icon-svg use {
  pointer-events: none;
}

.page-id-contact .related-pages {
  padding-top: 72px;
  padding-bottom: 76px;
}

/* ---- Footer: region / language (grouped) ---- */

.footer-region-section {
  margin-top: 10px;
  padding: 6px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-region-body {
  padding-top: 4px;
}

.footer-region-groups {
  display: grid;
  gap: 18px;
}

.footer-region-group-label {
  margin: 0 0 8px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6f7b8c;
  opacity: 0.92;
}

.footer-region-list--stacked {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.footer-region-list--stacked li {
  margin: 0;
}

.footer-region-link {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.35;
  color: #d6dee9;
  text-decoration: none;
  padding: 8px 10px;
  margin: 0 -10px;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

a.footer-region-link:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: #fff;
}

a.footer-region-link:focus-visible {
  outline: 2px solid #ffbe63;
  outline-offset: 2px;
}

.footer-region-link--current {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 190, 99, 0.35);
  cursor: default;
}

@media (min-width: 640px) {
  .footer-region-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 28px;
  }
}

@media (min-width: 980px) {
  .footer-region-groups {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px 24px;
    align-items: start;
  }

  .footer-region-link {
    padding: 6px 8px;
    margin: 0 -8px;
    font-size: 0.86rem;
  }
}

@media (max-width: 979px) {
  a.footer-region-link,
  span.footer-region-link--current {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* =========================================
   FOOTER
   ========================================= */

.site-footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  margin-top: 72px;
  padding-top: 46px;
}

.footer-main-panels {
  display: grid;
  gap: 26px;
}

.footer-panel {
  border: 0;
  margin: 0;
  padding: 0;
}

.footer-panel-summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  padding: 10px 0 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-sizing: border-box;
}

.footer-panel-summary::-webkit-details-marker {
  display: none;
}

.footer-panel-summary h3 {
  margin: 0;
  font-size: 1.04rem;
  color: #fff;
  font-weight: 700;
}

.footer-panel-body {
  padding: 12px 0 18px;
}

.footer-panel--region .footer-panel-summary {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

@media (max-width: 979px) {
  .footer-panel-summary {
    min-height: 52px;
    padding: 14px 0;
  }

  .footer-panel-body {
    padding: 6px 0 22px;
  }

  .footer-panel-body .footer-links {
    gap: 12px;
  }

  .footer-panel-summary::after {
    content: "";
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    margin-left: 8px;
    border-right: 2px solid rgba(255, 255, 255, 0.45);
    border-bottom: 2px solid rgba(255, 255, 255, 0.45);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
  }

  .footer-panel[open] > .footer-panel-summary::after {
    transform: rotate(225deg);
    margin-top: 4px;
  }

  .footer-main-panels .footer-panel:not(:last-child) {
    margin-bottom: 2px;
  }
}

@media (min-width: 980px) {
  .footer-panel-summary {
    cursor: default;
    pointer-events: none;
    padding: 0 0 12px;
    border-bottom: none;
  }

  .footer-panel-summary::after {
    display: none !important;
  }

  .footer-panel-body {
    padding: 0;
  }

  .footer-panel--region .footer-panel-summary {
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .footer-panel--region .footer-panel-body {
    padding-top: 4px;
  }
}

.footer-grid {
  display: grid;
  gap: 26px;
}

.site-footer h3 {
  color: #fff;
  font-size: 1.04rem;
}

.site-footer a {
  color: #ffbe63;
}

.site-footer a:hover {
  color: #ffd193;
}

.footer-links,
.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.footer-panel-body .contact-list {
  gap: 12px;
  font-size: 0.94rem;
}

.contact-list li {
  line-height: 1.58;
}

.contact-list-tight {
  line-height: 1.62;
  max-width: 40ch;
}

.footer-contact-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.footer-panel-body .footer-contact-row a {
  padding: 2px 0;
  border-radius: 4px;
}

.footer-contact-icon {
  flex-shrink: 0;
  margin-top: 2px;
  color: #ffbe63;
  opacity: 0.95;
}

.footer-contact-icon .contact-icon-svg {
  display: block;
  width: 18px;
  height: 18px;
}

.footer-inline-note {
  color: #aeb8c7;
}

.footer-bottom {
  margin-top: 28px;
  padding: 18px 0 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: #a8b5c8;
  font-size: 0.9rem;
  line-height: 1.55;
}

.footer-bottom p {
  margin-bottom: 12px;
}

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

.footer-bottom-links a {
  padding: 4px 2px;
  border-radius: 4px;
}

/* =========================================
   TABLET (≥780px)
   ========================================= */

@media (min-width: 780px) {
  .contact-methods {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact-methods.contact-methods-enhanced {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-highlight-grid,
  .page-hero-highlight-grid,
  .proof-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .logo-grid,
  .logo-group-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =========================================
   DESKTOP (≥980px)
   ========================================= */

@media (min-width: 980px) {
  body.menu-open {
    overflow: auto;
  }

  .menu-toggle {
    display: none;
  }

  /* ---- Desktop nav layout ---- */

  .site-nav {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    align-items: center;
    gap: 10px;
    position: static;
    inset: auto !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto;
    max-width: none;
    border: 0;
    background: transparent;
    padding: 0;
    box-shadow: none;
    overflow: visible;
    border-top: 0;
  }

  .nav-list {
    display: flex;
    align-items: center;
    gap: 8px;
    width: auto;
    min-width: 0;
  }

  .nav-item {
    border-bottom: 0;
    position: relative;
  }

  /* ---- Desktop trigger pill: [ 服務範圍 ▾ ] ---- */

  .nav-trigger {
    width: auto;
    min-height: 36px;
    padding: 0 12px;
    gap: 5px;
    border-radius: 999px;
    font-size: 0.88rem;
    white-space: nowrap;
    background: #f4f7fb;
    border: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  }

  .nav-trigger:hover {
    background: rgba(243, 154, 23, 0.10);
    border-color: rgba(243, 154, 23, 0.18);
    color: var(--brand-dark);
  }

  .nav-trigger:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
  }

  .nav-trigger.is-active,
  .nav-item.is-open > .nav-trigger {
    background: rgba(243, 154, 23, 0.12);
    border-color: rgba(243, 154, 23, 0.22);
    color: var(--brand-dark);
  }

  .nav-caret {
    width: 9px;
    height: 9px;
  }

  /* ---- Desktop plain link ---- */

  .nav-link {
    display: inline-flex;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 0.88rem;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
  }

  .nav-link:hover {
    background: var(--brand-light);
    color: var(--brand-dark);
  }

  .nav-link.is-active {
    background: rgba(243, 154, 23, 0.12);
  }

  .nav-link.nav-link--current {
    border-left: 0;
    padding-left: 12px;
    margin-left: 0;
    font-weight: 700;
    color: var(--brand-dark);
    background: rgba(243, 154, 23, 0.08);
    box-shadow: inset 0 0 0 1px rgba(243, 154, 23, 0.22);
  }

  /* ---- Desktop subnav panel ---- */

  .subnav-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    display: none;
    min-width: 380px;
    max-width: 520px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    padding: 14px;
    z-index: 160;
  }

  .nav-item-has-children.is-open > .subnav-panel {
    display: block;
  }

  .subnav-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .subnav-link {
    font-size: 0.86rem;
    padding: 9px 12px;
    border-radius: 10px;
  }

  .nav-cta {
    margin-top: 0;
    margin-left: 8px;
    width: auto;
    padding: 0.62rem 1.05rem;
    font-size: 0.86rem;
    box-shadow: 0 2px 10px rgba(216, 131, 8, 0.28);
  }

  /* ---- Desktop hero layout ---- */

  .hero-layout {
    grid-template-columns: 1.4fr 0.85fr;
    align-items: stretch;
  }

  .page-hero-layout {
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.8fr);
    align-items: stretch;
  }

  .page-hero-copy {
    padding-right: 18px;
  }

  .hero-highlight-grid,
  .page-hero-highlight-grid,
  .proof-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .logo-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .logo-group-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .footer-grid-4 {
    grid-template-columns: 1.2fr 1fr 1fr 1.15fr;
  }
}

/* ---- Wide desktop: keep subnav within viewport ---- */
@media (min-width: 1280px) {
  .container {
    width: min(1200px, 90%);
  }

  .subnav-panel {
    min-width: 440px;
  }

  .subnav-grid {
    gap: 8px;
  }
}

/* =========================================
   VISUAL POLISH — section rhythm & cards
   ========================================= */

.section + .section:not(.section-alt) {
  border-top: 1px solid var(--line);
}

/* ---- Card hover: lift + shadow ---- */

.section-card,
.case-card,
.insight-card,
.proof-summary-card,
.contact-card,
.step-card,
.timeline-item,
.faq-item {
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.section-card:hover,
.case-card:hover,
.insight-card:hover {
  transform: translateY(-3px);
  border-color: rgba(243, 154, 23, 0.22);
  box-shadow: 0 18px 40px rgba(22, 30, 42, 0.12);
}

.proof-summary-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.contact-card:hover:not(.contact-card-wa-block) {
  transform: translateY(-2px);
  border-color: rgba(243, 154, 23, 0.22);
  box-shadow: 0 14px 34px rgba(22, 30, 42, 0.1);
}

.step-card:hover,
.timeline-item:hover {
  transform: translateY(-2px);
  border-color: rgba(243, 154, 23, 0.2);
  box-shadow: 0 12px 28px rgba(22, 30, 42, 0.08);
}

.faq-item:hover {
  border-color: rgba(243, 154, 23, 0.18);
}

/* ---- CTA section: stronger visual presence ---- */

.service-cta {
  border-color: rgba(243, 154, 23, 0.18);
  background:
    radial-gradient(ellipse at 95% 5%, rgba(243, 154, 23, 0.14), transparent 50%),
    radial-gradient(ellipse at 5% 95%, rgba(37, 79, 133, 0.06), transparent 50%),
    linear-gradient(135deg, #ffffff, #f6f8fc);
  padding: 36px;
  box-shadow: 0 12px 40px rgba(22, 30, 42, 0.07);
}

.service-cta h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
}

.service-cta p {
  max-width: 70ch;
}

/* ---- Insight card: better visual tag area ---- */

.card-media {
  position: relative;
  min-height: 152px;
  border-radius: 14px;
  margin: -6px -6px 8px;
  overflow: hidden;
  background: linear-gradient(135deg, #eaf1fb, #f8fafd);
}

.card-media-banner {
  position: absolute;
  inset: 0;
  background: linear-gradient(140deg, rgba(32, 56, 89, 0.88), rgba(243, 154, 23, 0.68));
}

.card-media-badge {
  position: absolute;
  left: 16px;
  bottom: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  backdrop-filter: blur(4px);
}

/* ---- Chip links ---- */

.chip-link {
  transition: border-color 0.15s ease, background 0.15s ease;
}

.chip-link:hover {
  border-color: var(--brand);
  background: rgba(243, 154, 23, 0.06);
}

/* ---- Section spacing refinement ---- */

.section-more {
  margin-top: 24px;
}

/* ---- Stronger section-alt contrast ---- */

.section-alt {
  background: #f3f6fa;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* ---- Services hub (/services/) refinements ---- */

.page-id-services main > .section {
  padding-top: 96px;
  padding-bottom: 96px;
}

.page-id-services main > .section.section-alt {
  background: linear-gradient(180deg, #fafcfe 0%, #f3f6fa 45%, #eef2f8 100%);
}

.page-id-services main > .section:not(.section-alt):not(.section-emphasis-cta) {
  background: linear-gradient(180deg, #ffffff 0%, #fafbfd 100%);
}

#service-hub-targets .section-intro {
  margin-top: 6px;
  margin-bottom: 22px;
  font-size: 0.92rem;
  max-width: 62ch;
}

#service-hub-targets .container > h2 {
  margin-bottom: 0;
}

.page-id-services .page-hero-visual {
  box-shadow: 0 18px 52px rgba(22, 30, 42, 0.14);
  border-color: rgba(37, 79, 133, 0.12);
}

.page-id-services .page-hero-visual-overlay {
  background: linear-gradient(
    155deg,
    rgba(12, 18, 28, 0.72) 0%,
    rgba(17, 26, 40, 0.48) 38%,
    rgba(17, 26, 40, 0.22) 100%
  );
}

.page-id-services .page-hero-visual-label {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.28);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.page-id-services .page-hero-highlight-card {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.22);
}

.page-id-services .section-card-value-line {
  margin: 0 0 8px;
  font-size: 0.88rem;
  line-height: 1.4;
}

.page-id-services .section-card-value-line strong {
  color: var(--brand-dark);
  font-weight: 700;
}

.page-id-services .section-card:hover {
  transform: translateY(-4px);
  border-color: rgba(243, 154, 23, 0.28);
  box-shadow: 0 22px 48px rgba(22, 30, 42, 0.14);
}

.page-id-services .section-card--has-audience .section-card-desc {
  -webkit-line-clamp: 5;
}

.comparison-helper {
  margin: 8px 0 16px;
  font-size: 0.88rem;
  max-width: 72ch;
  line-height: 1.55;
}

.comparison-table--hover tbody tr {
  transition: background 0.15s ease;
}

.comparison-table--hover tbody tr:hover td {
  background: rgba(37, 79, 133, 0.045);
}

.cta-actions-note--before-actions {
  margin: 14px 0 20px;
  font-size: 0.88rem;
  color: var(--muted);
  font-weight: 600;
  line-height: 1.5;
  max-width: 62ch;
}

.page-id-services .section-emphasis-cta .service-cta {
  background:
    radial-gradient(ellipse at 90% 8%, rgba(243, 154, 23, 0.12), transparent 52%),
    linear-gradient(135deg, #ffffff, #f4f7fc);
  border: 1px solid rgba(37, 79, 133, 0.1);
}

.page-id-services .section-emphasis-cta .service-cta .btn-primary {
  min-width: 7.5rem;
  box-shadow: 0 4px 16px rgba(216, 131, 8, 0.28);
}

.cross-link-bar-copy {
  flex: 1 1 220px;
  max-width: 52ch;
}

.cross-link-bar-headline {
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
}

.cross-link-bar-support {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

.page-intro-extra {
  margin-top: 14px;
}

.page-id-services .section-card-desc,
.page-id-services .related-page-card-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.page-id-services .section-card--has-audience .section-card-desc {
  -webkit-line-clamp: 4;
}

.section-card-audience {
  margin: 0 0 10px;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.45;
}

.section-card-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 14px;
  border-radius: 14px;
  flex-shrink: 0;
  color: var(--brand-dark);
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: none;
}

/* Services hub scenario icons: explicit paint + override any hostile SVG resets */
.page-id-services .section-card-icon-wrap--hub svg,
.page-id-services .section-card-icon-wrap--hub svg * {
  opacity: 1;
  visibility: visible;
}

.page-id-services .section-card-icon-wrap--hub .section-card-icon-svg {
  display: block;
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  flex: 0 0 28px;
  overflow: visible;
  color: #1f2937;
}

.page-id-services .section-card-icon-wrap--hub .section-card-icon-svg :is(path, rect, line, circle, polyline, polygon) {
  fill: none !important;
  stroke: #1f2937 !important;
  stroke-width: 2px;
}

/* Avoid clipping SVG strokes at the top of service hub cards (.card defaults to overflow:hidden). */
.page-id-services .section-card-grid > .section-card {
  overflow: visible;
}

.page-id-services .section-card {
  border-radius: 18px;
}

.section-card-has-placeholder::before {
  display: none !important;
}

.card-icon-placeholder {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: block;
  margin-bottom: 16px;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(243, 154, 23, 0.16), rgba(243, 154, 23, 0.04));
  box-shadow: inset 0 0 0 1px rgba(243, 154, 23, 0.16);
}

.section-emphasis-cta {
  background: linear-gradient(180deg, rgba(243, 154, 23, 0.09), #f3f6fa 42%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section-emphasis-cta .service-cta {
  box-shadow: 0 14px 44px rgba(22, 30, 42, 0.1);
}

.section-emphasis-cta .service-cta .hero-actions {
  gap: 12px;
}

.section-emphasis-cta .service-cta .btn-primary {
  min-width: 9.5rem;
}

.cross-link-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 20px;
  margin: 0;
}

.page-id-services .cross-link-bar {
  padding: 18px 22px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(37, 79, 133, 0.07), rgba(243, 154, 23, 0.08));
  border: 1px solid rgba(37, 79, 133, 0.1);
  box-shadow: 0 8px 28px rgba(22, 30, 42, 0.07);
}

.page-id-services .cross-link-bar .btn-primary {
  min-width: 7.5rem;
}

.cross-link-bar-text {
  margin: 0;
  flex: 1 1 200px;
  max-width: 48ch;
  line-height: 1.55;
}

@media (max-width: 639px) {
  .cross-link-bar .btn-primary {
    width: 100%;
    text-align: center;
  }
}

/* =========================================
   Service page: 網站及平台方案 (web-platform)
   ========================================= */

:is(.page-id-service-web-platform, .page-id-service-system-development) .page-hero {
  padding-bottom: 48px;
}

:is(.page-id-service-web-platform, .page-id-service-system-development) .page-hero-value-bullets {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
  max-width: 62ch;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.5;
  color: #3d4a5c;
}

:is(.page-id-service-web-platform, .page-id-service-system-development) .page-hero-value-bullets li {
  position: relative;
  padding-left: 1.15em;
  margin: 0;
}

:is(.page-id-service-web-platform, .page-id-service-system-development) .page-hero-value-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(37, 79, 133, 0.45);
}

:is(.page-id-service-web-platform, .page-id-service-system-development) .page-hero-actions {
  margin-top: 22px;
}

:is(.page-id-service-web-platform, .page-id-service-system-development) .page-hero-actions .hero-actions {
  gap: 12px;
}

:is(.page-id-service-web-platform, .page-id-service-system-development) .page-hero-actions .btn-primary {
  min-width: 9.5rem;
  box-shadow: 0 4px 16px rgba(216, 131, 8, 0.28);
}

:is(.page-id-service-web-platform, .page-id-service-system-development) .page-hero-visual-delivery-scope {
  width: 100%;
  margin-top: 2px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(6, 10, 18, 0.48);
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
}

:is(.page-id-service-web-platform, .page-id-service-system-development) .page-hero-visual-delivery-scope-label {
  display: block;
  margin: 0;
  padding: 11px 14px 10px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.18);
}

:is(.page-id-service-web-platform, .page-id-service-system-development) .page-hero-visual-delivery-scope-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
}

:is(.page-id-service-web-platform, .page-id-service-system-development) .page-hero-visual-delivery-scope-list li {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 8px 14px 9px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin: 0;
}

:is(.page-id-service-web-platform, .page-id-service-system-development) .page-hero-visual-delivery-scope-list li:last-child {
  border-bottom: 0;
}

:is(.page-id-service-web-platform, .page-id-service-system-development) .page-hero-visual-delivery-scope-title {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.78);
  text-shadow: none;
}

:is(.page-id-service-web-platform, .page-id-service-system-development) .page-hero-visual-overlay {
  background: linear-gradient(
    155deg,
    rgba(10, 16, 26, 0.78) 0%,
    rgba(17, 26, 40, 0.52) 45%,
    rgba(17, 26, 40, 0.28) 100%
  );
}

:is(.page-id-service-web-platform, .page-id-service-system-development) main > .section:is(.section-web-platform, .section-system-dev) {
  padding-top: 88px;
  padding-bottom: 88px;
}

:is(.page-id-service-web-platform, .page-id-service-system-development) main > .section:is(.section-web-platform, .section-system-dev) .container > .eyebrow {
  margin-bottom: 8px;
}

:is(.page-id-service-web-platform, .page-id-service-system-development) main > .section:is(.section-web-platform, .section-system-dev) .container > h2 {
  margin-top: 0;
  margin-bottom: 8px;
}

:is(.page-id-service-web-platform, .page-id-service-system-development) main > .section:is(.section-web-platform, .section-system-dev) .container > h2 + .section-intro-kicker {
  margin-top: 0;
}

:is(.page-id-service-web-platform, .page-id-service-system-development) .section-intro-kicker {
  margin: 0 0 10px;
  max-width: 56ch;
  font-size: 0.9rem;
  line-height: 1.58;
  font-weight: 600;
  color: #5c6575;
  letter-spacing: 0.01em;
}

:is(.page-id-service-web-platform, .page-id-service-system-development) main > .section:is(.section-web-platform, .section-system-dev) .section-intro {
  margin-top: 0;
  margin-bottom: 22px;
  font-size: 0.95rem;
  line-height: 1.65;
  max-width: 68ch;
  color: #4b5568;
}

:is(.page-id-service-web-platform, .page-id-service-system-development) .section-card-grid {
  margin-top: 8px;
}

:is(.page-id-service-web-platform, .page-id-service-system-development) .section-card:has(.section-card-icon-wrap--hub)::before {
  display: none;
}

:is(.page-id-service-web-platform, .page-id-service-system-development) .section-card {
  padding: 26px 24px;
  border-radius: 18px;
}

:is(.page-id-service-web-platform, .page-id-service-system-development) .section-card h3 {
  font-size: 1.08rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #1a2332;
}

:is(.page-id-service-web-platform, .page-id-service-system-development) .section-card-desc {
  font-size: 0.93rem;
  line-height: 1.65;
  max-width: 52ch;
  color: #3d4a5c;
}

:is(.page-id-service-web-platform, .page-id-service-system-development) .section-card-micro-label {
  margin: 0 0 6px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b7280;
}

:is(.page-id-service-web-platform, .page-id-service-system-development) .section-card:hover {
  transform: translateY(-3px);
  border-color: rgba(243, 154, 23, 0.28);
  box-shadow: 0 18px 44px rgba(22, 30, 42, 0.12);
}

:is(.page-id-service-web-platform, .page-id-service-system-development) .section-card-icon-wrap--hub svg,
:is(.page-id-service-web-platform, .page-id-service-system-development) .section-card-icon-wrap--hub svg * {
  opacity: 1;
  visibility: visible;
}

:is(.page-id-service-web-platform, .page-id-service-system-development) .section-card-icon-wrap--hub .section-card-icon-svg :is(path, rect, line, circle, polyline, polygon) {
  fill: none !important;
  stroke: #1f2937 !important;
  stroke-width: 2px;
}

:is(.page-id-service-web-platform, .page-id-service-system-development) .case-card--direction::before,
:is(.page-id-service-web-platform, .page-id-service-system-development) .case-card--direction::after {
  display: none;
}

:is(.page-id-service-web-platform, .page-id-service-system-development) .case-direction-category {
  margin: 0 0 4px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5c6570;
}

:is(.page-id-service-web-platform, .page-id-service-system-development) .case-card--direction .card-media {
  min-height: 120px;
  margin: 0 0 4px;
}

:is(.page-id-service-web-platform, .page-id-service-system-development) .case-card--direction .card-media img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

:is(.page-id-service-web-platform, .page-id-service-system-development) .case-card--direction .card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent 35%, rgba(12, 18, 28, 0.42) 100%);
  pointer-events: none;
  border-radius: inherit;
}

:is(.page-id-service-web-platform, .page-id-service-system-development) .case-card--direction .card-media-badge {
  z-index: 2;
}

:is(.page-id-service-web-platform, .page-id-service-system-development) .case-card--direction.case-card--tone-listed .card-media-banner {
  background: linear-gradient(135deg, rgba(22, 36, 58, 0.95), rgba(59, 91, 132, 0.82));
}

:is(.page-id-service-web-platform, .page-id-service-system-development) .case-card--direction.case-card--tone-education .card-media-banner {
  background: linear-gradient(135deg, rgba(28, 58, 66, 0.95), rgba(71, 163, 140, 0.78));
}

:is(.page-id-service-web-platform, .page-id-service-system-development) .case-card--direction.case-card--tone-ngo .card-media-banner {
  background: linear-gradient(135deg, rgba(61, 43, 28, 0.92), rgba(200, 120, 72, 0.72));
}

:is(.page-id-service-web-platform, .page-id-service-system-development) .case-direction-summary {
  margin: 0;
  font-size: 0.93rem;
  line-height: 1.6;
  color: #3d4a5c;
}

:is(.page-id-service-web-platform, .page-id-service-system-development) .case-direction-details {
  margin: 4px 0 0;
  display: grid;
  gap: 10px;
}

:is(.page-id-service-web-platform, .page-id-service-system-development) .case-direction-detail {
  padding-top: 10px;
  border-top: 1px solid #e8edf4;
}

:is(.page-id-service-web-platform, .page-id-service-system-development) .case-direction-detail:first-of-type {
  border-top: 0;
  padding-top: 0;
}

:is(.page-id-service-web-platform, .page-id-service-system-development) .case-direction-detail dt {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #6b7280;
  margin-bottom: 4px;
}

:is(.page-id-service-web-platform, .page-id-service-system-development) .case-direction-detail dd {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: #374151;
}

:is(.page-id-service-web-platform, .page-id-service-system-development) .case-grid--direction {
  gap: 20px 22px;
}

.page-id-service-web-platform .faq-list--web-platform,
.page-id-service-system-development .faq-list--system-dev {
  margin-top: 12px;
  gap: 12px;
  display: grid;
}

.page-id-service-web-platform .faq-list--web-platform .faq-item:not(.faq-item--accordion),
.page-id-service-system-development .faq-list--system-dev .faq-item:not(.faq-item--accordion) {
  padding: 18px 20px;
}

.page-id-service-web-platform .faq-list--web-platform.faq-list--accordion .faq-item--accordion .faq-trigger-label,
.page-id-service-system-development .faq-list--system-dev.faq-list--accordion .faq-item--accordion .faq-trigger-label {
  font-size: 1.05rem;
  line-height: 1.45;
}

.page-id-service-web-platform .faq-list--web-platform .faq-item:not(.faq-item--accordion) h3,
.page-id-service-system-development .faq-list--system-dev .faq-item:not(.faq-item--accordion) h3 {
  font-size: 1.05rem;
  line-height: 1.45;
  font-weight: 800;
  color: #1a2332;
  margin-bottom: 8px;
}

.page-id-service-web-platform .faq-list--web-platform .faq-item:not(.faq-item--accordion) p,
.page-id-service-system-development .faq-list--system-dev .faq-item:not(.faq-item--accordion) p {
  margin: 0;
  font-size: 0.93rem;
  line-height: 1.65;
  color: #3d4a5c;
}

.page-id-service-web-platform .faq-list--web-platform .faq-item--lead,
.page-id-service-web-platform .faq-list--web-platform .faq-item--accordion.faq-item--lead,
.page-id-service-system-development .faq-list--system-dev .faq-item--lead,
.page-id-service-system-development .faq-list--system-dev .faq-item--accordion.faq-item--lead {
  border-color: rgba(37, 79, 133, 0.16);
  box-shadow: 0 10px 32px rgba(22, 30, 42, 0.08);
}

.page-id-service-web-platform .faq-list--web-platform .faq-item--accordion.faq-item--is-open,
.page-id-service-system-development .faq-list--system-dev .faq-item--accordion.faq-item--is-open {
  border-color: rgba(37, 79, 133, 0.2);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(248, 250, 252, 0.97) 100%);
  box-shadow: 0 6px 24px rgba(22, 30, 42, 0.07);
}

.page-id-service-web-platform .service-cta--web-platform,
.page-id-service-system-development .service-cta--system-dev {
  padding: 22px 24px 26px;
  background:
    radial-gradient(ellipse at 90% 0%, rgba(243, 154, 23, 0.14), transparent 55%),
    linear-gradient(145deg, #ffffff, #f4f7fc);
  border: 1px solid rgba(37, 79, 133, 0.12);
  box-shadow: 0 16px 48px rgba(22, 30, 42, 0.1);
}

.page-id-service-web-platform .service-cta--web-platform p,
.page-id-service-system-development .service-cta--system-dev p {
  margin-bottom: 14px;
  color: #3d4a5c;
  font-size: 0.98rem;
  line-height: 1.65;
}

.page-id-service-web-platform .service-cta--web-platform .hero-actions,
.page-id-service-system-development .service-cta--system-dev .hero-actions {
  margin-top: 4px;
  gap: 12px;
}

.page-id-service-web-platform .service-cta--web-platform .btn-primary,
.page-id-service-system-development .service-cta--system-dev .btn-primary {
  min-width: 10rem;
  box-shadow: 0 4px 18px rgba(216, 131, 8, 0.3);
}

/* 系統頁：底部 CTA — 區段與上一區分開、略增內距、主按鈕更清楚（仍保持克制） */
.page-id-service-system-development main > .section.section-system-dev--closing-cta {
  padding-top: 96px;
  padding-bottom: 100px;
  background: linear-gradient(180deg, #f5f8fc 0%, #eaf0f7 100%);
  border-top: 1px solid rgba(37, 79, 133, 0.1);
}

.page-id-service-system-development .section-system-dev--closing-cta .service-cta--system-dev {
  padding: 26px 28px 30px;
  background:
    radial-gradient(ellipse at 92% 0%, rgba(243, 154, 23, 0.15), transparent 56%),
    linear-gradient(160deg, #ffffff 0%, #f7fafc 100%);
  border-color: rgba(37, 79, 133, 0.15);
  box-shadow: 0 18px 50px rgba(22, 30, 42, 0.12);
}

.page-id-service-system-development .section-system-dev--closing-cta .service-cta--system-dev p {
  margin-bottom: 16px;
}

.page-id-service-system-development .section-system-dev--closing-cta .service-cta--system-dev .hero-actions {
  margin-top: 6px;
}

.page-id-service-system-development .section-system-dev--closing-cta .service-cta--system-dev .btn-primary {
  box-shadow: 0 6px 24px rgba(216, 131, 8, 0.38);
}

.page-id-service-web-platform .related-pages .related-page-card-desc,
.page-id-service-system-development .related-pages .related-page-card-desc {
  color: #4b5568;
  line-height: 1.55;
}

.page-id-service-web-platform .related-pages .related-page-card--with-icon h3,
.page-id-service-system-development .related-pages .related-page-card--with-icon h3 {
  margin-top: 0;
}

.page-id-service-web-platform .related-page-card-eyebrow,
.page-id-service-system-development .related-page-card-eyebrow {
  margin: 0 0 4px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #8b919c;
  line-height: 1.2;
}

@media (max-width: 639px) {
  :is(.page-id-service-web-platform, .page-id-service-system-development) .case-card--direction .card-media {
    min-height: 100px;
  }

  :is(.page-id-service-web-platform, .page-id-service-system-development) .page-hero-actions .hero-actions .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* Section notes, related intro, case card CTA (shared) */
.section-cards-note {
  margin: 18px 0 0;
  max-width: 62ch;
  font-size: 0.9rem;
  line-height: 1.65;
  color: #5c6570;
  font-weight: 600;
}

.related-pages-intro {
  margin: 0 0 18px;
  max-width: 60ch;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #4b5568;
}

.case-direction-foot {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid #e8edf4;
}

.case-direction-foot .case-direction-link {
  font-weight: 700;
}

/* Direction case tone variants (admin / clinical) */
:is(.page-id-service-web-platform, .page-id-service-system-development)
  .case-card--direction.case-card--tone-admin
  .card-media-banner {
  background: linear-gradient(135deg, rgba(28, 45, 72, 0.96), rgba(59, 91, 132, 0.85));
}

:is(.page-id-service-web-platform, .page-id-service-system-development)
  .case-card--direction.case-card--tone-clinical
  .card-media-banner {
  background: linear-gradient(135deg, rgba(32, 58, 68, 0.95), rgba(71, 130, 140, 0.78));
}

@media (min-width: 1024px) {
  /* 系統頁僅兩張方向卡：大螢幕維持雙欄；網站平台頁有三張卡，沿用全站 grid-3 三欄 */
  .page-id-service-system-development .case-grid--direction.grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Hero delivery panel: supporting line (system + web platform) */
:is(.page-id-service-web-platform, .page-id-service-system-development) .page-hero-visual-delivery-scope-note {
  margin: 0;
  padding: 10px 14px 12px;
  font-size: 0.72rem;
  line-height: 1.5;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.86);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.22);
}

.page-id-service-system-development .page-hero-visual-delivery-scope-note {
  font-size: 0.74rem;
  line-height: 1.55;
  letter-spacing: 0.01em;
}

.page-id-service-system-development .page-hero-visual-delivery-scope-title {
  font-size: 0.82rem;
  line-height: 1.45;
  letter-spacing: 0.02em;
}

.page-id-service-system-development .page-hero-visual-delivery-scope-list li {
  padding: 9px 14px 10px;
}

/* System dev: workflow diagram section — 左文案與右圖同欄頂對齊 */
.page-id-service-system-development main > .section.section-system-dev--flow-visual {
  padding-top: 72px;
}

.page-id-service-system-development .section-system-dev--flow-visual .container > .flow-visual-split {
  margin-top: 0;
}

.flow-visual-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  column-gap: clamp(32px, 5vw, 56px);
  row-gap: 28px;
}

.flow-visual-figure,
.flow-visual-figure-inner {
  min-width: 0;
  max-width: 100%;
}

.flow-visual-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

@media (min-width: 880px) {
  .flow-visual-split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}

.flow-visual-copy {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: start;
  min-width: 0;
}

.page-id-service-system-development .flow-visual-copy .eyebrow {
  margin: 0 0 8px;
}

.page-id-service-system-development .flow-visual-copy h2 {
  margin: 0 0 10px;
}

.page-id-service-system-development .flow-visual-copy .section-intro-kicker {
  margin: 0 0 8px;
}

.page-id-service-system-development .flow-visual-copy .section-intro {
  margin: 0 0 14px;
  max-width: none;
}

.flow-visual-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.flow-visual-bullets li {
  position: relative;
  padding-left: 22px;
  font-size: 0.93rem;
  line-height: 1.52;
  color: #3d4a5c;
  font-weight: 600;
}

.flow-visual-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.48em;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(243, 154, 23, 0.95), rgba(37, 79, 133, 0.75));
}

/* 流程圖與整合圖：同一套卡片式圖片容器（視覺重量一致） */
.page-id-service-system-development :is(.flow-visual-figure, .media-highlight-figure) {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(37, 79, 133, 0.11);
  box-shadow: 0 14px 42px rgba(22, 30, 42, 0.085);
  background: #ffffff;
}

.page-id-service-system-development .flow-visual-figure {
  align-self: start;
  width: 100%;
  min-width: 0;
}

.page-id-service-system-development :is(.flow-visual-figure-inner, .media-highlight-figure-inner) {
  padding: 16px 16px 18px;
  background: linear-gradient(180deg, #fbfcfe 0%, #ffffff 42%);
}

.page-id-service-system-development :is(.flow-visual-figure img, .media-highlight-figure img) {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  vertical-align: middle;
  border-radius: 12px;
}

/* System dev: integration strip */
.page-id-service-system-development .section-system-dev--integration .media-highlight {
  margin-top: 6px;
}

.page-id-service-system-development .media-highlight-caption {
  margin: 12px 4px 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #6b7280;
  font-weight: 600;
}

/* System dev: case screenshots — controlled height, clearer hierarchy */
.page-id-service-system-development .case-card--direction .card-media {
  min-height: 0;
  aspect-ratio: 16 / 10;
  max-height: 200px;
}

.page-id-service-system-development .case-card--direction .card-media img {
  object-fit: cover;
  object-position: top center;
}

/* Slightly lift plain text cards vs page background */
.page-id-service-system-development .section-system-dev--offers .section-card {
  border-color: rgba(37, 79, 133, 0.11);
  box-shadow: 0 6px 26px rgba(22, 30, 42, 0.07);
}

.page-id-service-system-development .section-system-dev--pain .section-card {
  border-color: rgba(37, 79, 133, 0.09);
  box-shadow: 0 4px 20px rgba(22, 30, 42, 0.05);
}

.page-id-service-system-development .case-card--direction {
  border-color: rgba(37, 79, 133, 0.11);
  box-shadow: 0 10px 32px rgba(22, 30, 42, 0.09);
}

.page-id-service-system-development .case-card--direction .card-media::after {
  background: linear-gradient(180deg, transparent 28%, rgba(12, 18, 28, 0.5) 100%);
}

.case-direction-title-lead {
  margin: -4px 0 10px;
  font-size: 0.82rem;
  line-height: 1.45;
  font-weight: 700;
  color: #5c6570;
  letter-spacing: 0.01em;
}

/* 系統頁：方向案例卡 — 縮短視覺行寬、段落與條列間距 */
.page-id-service-system-development .case-card--direction .case-direction-summary {
  max-width: 48ch;
}

.page-id-service-system-development .case-card--direction .case-direction-summary + .case-direction-summary {
  margin-top: 10px;
}

.page-id-service-system-development .case-card--direction .case-direction-details {
  margin-top: 12px;
  gap: 12px;
}

.page-id-service-system-development .case-card--direction .case-direction-detail dt {
  margin-bottom: 5px;
}

.page-id-service-system-development .case-card--direction .case-direction-detail dd {
  max-width: 48ch;
  line-height: 1.58;
}

.section-cards-note.section-cards-note--advisory {
  margin-top: 20px;
  padding: 14px 16px;
  max-width: 62ch;
  border-radius: 14px;
  background: rgba(37, 79, 133, 0.04);
  border: 1px solid rgba(37, 79, 133, 0.08);
  font-weight: 600;
  color: #4b5568;
  line-height: 1.6;
}

@media (max-width: 639px) {
  .page-id-service-system-development .case-card--direction .card-media {
    max-height: 180px;
    aspect-ratio: 16 / 11;
  }
}

@media (max-width: 767px) {
  .page-id-service-system-development .page-hero-visual img {
    object-position: center 28%;
  }
}

/* 系統開發案例目錄：無偽元素佔位、卡片內容為主 */
.page-id-clients-system-development .section-clients-catalog-group .section-card--catalog-case::before,
.page-id-clients-system-development .section-clients-catalog-group .section-card--catalog-case::after,
.section-case-related-cases .section-card--catalog-case::before,
.section-case-related-cases .section-card--catalog-case::after {
  content: none;
  display: none;
}

.page-id-clients-system-development .clients-system-catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 272px), 1fr));
  gap: 20px 18px;
  align-items: stretch;
  margin-top: 16px;
}

.page-id-clients-system-development .section-clients-catalog-head .container > h2 {
  margin-bottom: 8px;
}

.page-id-clients-system-development .section-clients-catalog-group .container > h2 {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  color: #1a2332;
}

.page-id-clients-system-development .section-clients-catalog-group .container > .section-intro {
  margin-top: 0;
  margin-bottom: 0;
  max-width: 62ch;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #4b5568;
}

.section-card--catalog-case {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 22px 20px 18px;
  border-radius: 16px;
  border: 1px solid rgba(37, 79, 133, 0.12);
  background: #fff;
  box-shadow: 0 8px 24px rgba(22, 30, 42, 0.06);
}

.section-card--catalog-case:hover {
  border-color: rgba(37, 79, 133, 0.2);
  box-shadow: 0 12px 32px rgba(22, 30, 42, 0.09);
}

.section-card--catalog-case .section-card-micro-label {
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7280;
}

.section-card--catalog-case h3 {
  margin: 0 0 10px;
  font-size: 1.08rem;
  font-weight: 750;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: #111827;
}

.section-card--catalog-case .section-card-desc--catalog {
  flex: 1 1 auto;
  margin: 0 0 12px;
  font-size: 0.92rem;
  line-height: 1.62;
  color: #3d4a5c;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.section-card--catalog-case .section-card-catalog-meta {
  margin: 0 0 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(17, 24, 39, 0.07);
}

.section-card--catalog-case .section-card-catalog-meta-row {
  margin: 0 0 6px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #4b5563;
}

.section-card--catalog-case .section-card-catalog-meta-row:last-child {
  margin-bottom: 0;
}

.section-card--catalog-case .section-card-catalog-meta-label {
  display: inline-block;
  min-width: 3.2em;
  margin-right: 6px;
  font-weight: 750;
  color: #6b7280;
}

.section-card--catalog-case .section-card-catalog-meta-value {
  font-weight: 550;
  color: #374151;
}

.section-card--catalog-case .section-card-footer {
  margin-top: auto;
  padding-top: 4px;
}

.section-card--catalog-case .section-card-footer-cta {
  margin: 0;
}

.section-card--catalog-case .section-card-footer .sector-link {
  font-weight: 750;
  font-size: 0.9rem;
}

/* 行業流程案例詳情：副標、條列、概要四格 */
.page-hero-subtitle {
  margin: 0 0 12px;
  max-width: 58ch;
  font-size: 1.05rem;
  font-weight: 650;
  line-height: 1.45;
  color: #2a3442;
  letter-spacing: -0.01em;
}

.case-study-bullet-list {
  margin: 0 0 0 1.1em;
  padding: 0;
  max-width: 68ch;
  list-style: disc;
  color: #3d4a5c;
}

.case-study-bullet-list li {
  margin: 0 0 10px;
  line-height: 1.65;
  padding-left: 0.15em;
}

.case-study-bullet-list li::marker {
  color: rgba(37, 79, 133, 0.55);
}

.section-case-detail-meta .case-detail-meta-grid .section-card {
  padding: 18px 18px 20px;
  min-height: 0;
}

.section-case-detail-meta .case-detail-meta-grid .section-card h3 {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7280;
  margin: 0 0 8px;
}

.section-case-detail-meta .case-detail-meta-grid .section-card .section-card-desc {
  font-size: 0.92rem;
  line-height: 1.55;
  color: #374151;
  margin: 0;
}

.section-case-detail-cta .service-cta--system-dev {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 1023px) {
  .section-case-detail-meta .case-detail-meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 559px) {
  .section-case-detail-meta .case-detail-meta-grid {
    grid-template-columns: 1fr;
  }
}

.page-id-clients-system-development .section-clients-system-catalog-head .section-intro {
  max-width: 68ch;
}

.page-id-clients-system-development .section-clients-catalog-group {
  padding-top: 48px;
  padding-bottom: 48px;
}

.page-id-clients-system-development .section-clients-catalog-group:first-of-type {
  padding-top: 28px;
}

/* 案例詳情：Hero 後信任文案 */
.section-case-post-hero-trust {
  padding-top: 0;
  padding-bottom: 28px;
}

.section-case-post-hero-trust .case-post-hero-trust-text {
  margin: 0 0 10px;
  max-width: 62ch;
  font-size: 0.95rem;
  line-height: 1.65;
  color: #4b5568;
}

.section-case-post-hero-trust .case-post-hero-trust-text:last-child {
  margin-bottom: 0;
}

/* 中段服務 CTA */
.section-case-mid-service-cta {
  padding-top: 40px;
  padding-bottom: 40px;
}

.section-case-mid-service-cta .service-cta--case-mid {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.section-case-mid-service-cta .service-cta--case-mid p {
  margin-bottom: 18px;
  font-size: 1.02rem;
  line-height: 1.6;
  color: #374151;
}

/* 案例詳情中段 CTA：較輕，作為情境銜接 */
.service-cta--case-mid-subtle {
  max-width: 600px;
  padding: 22px 24px 24px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(37, 79, 133, 0.12);
  box-shadow: 0 6px 20px rgba(22, 30, 42, 0.05);
}

.service-cta--case-mid-subtle p {
  margin-bottom: 14px !important;
  font-size: 0.96rem !important;
  line-height: 1.58 !important;
  color: #4b5563 !important;
  font-weight: 550;
}

.service-cta--case-mid-subtle .hero-actions {
  gap: 10px;
}

.service-cta--case-mid-subtle .btn-primary {
  font-weight: 650;
}

.service-cta--case-mid-subtle .btn-ghost {
  border-color: rgba(37, 79, 133, 0.22);
}

/* 相關案例網格 */
.section-case-related-cases {
  padding-top: 40px;
  padding-bottom: 40px;
}

.section-case-related-cases .section-intro {
  max-width: 62ch;
}

/* 詳情頁「相關流程案例」：沿用 catalog 變體，略輕 */
.section-case-related-cases .section-card--catalog-case {
  padding: 20px 18px 16px;
  min-height: 0;
  border-radius: 14px;
  border: 1px solid rgba(37, 79, 133, 0.1);
  box-shadow: 0 6px 18px rgba(22, 30, 42, 0.05);
}

.section-case-related-cases .section-card--catalog-case .section-card-desc--catalog {
  -webkit-line-clamp: 2;
}

.section-case-related-cases .clients-system-catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 18px 16px;
  margin-top: 12px;
}

/* 目錄頁底部「相關頁面」：較輕量，不搶主案例網格 */
.page-id-clients-system-development .related-pages {
  padding-top: 48px;
  padding-bottom: 56px;
}

.page-id-clients-system-development .related-pages .related-pages-intro {
  max-width: 56ch;
  font-size: 0.92rem;
  color: #5c6570;
  margin-bottom: 16px;
}

.page-id-clients-system-development .related-pages .related-page-card {
  padding: 18px 18px 20px;
}

.page-id-clients-system-development .related-pages .related-page-card-desc {
  font-size: 0.88rem;
  line-height: 1.5;
  color: #5c6570;
}

.page-id-clients-system-development .related-pages .related-page-link {
  font-size: 0.88rem;
}

/* 詳情頁：條列與純文字區塊呼吸空間 */
[class*="page-id-clients-case-"] .section-case-detail-problems .case-study-bullet-list,
[class*="page-id-clients-case-"] .section-case-detail-features .case-study-bullet-list {
  margin-top: 8px;
}

[class*="page-id-clients-case-"] .section-case-detail-bg .section-intro,
[class*="page-id-clients-case-"] .section-case-detail-direction .section-intro {
  max-width: 68ch;
  line-height: 1.68;
}

[class*="page-id-clients-case-"] .section-case-detail-fit .case-study-bullet-list {
  margin-top: 8px;
}

[class*="page-id-clients-case-"] .related-pages .grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: 16px 14px;
}

[class*="page-id-clients-case-"] .related-pages .related-page-card-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

@media (max-width: 639px) {
  .page-id-clients-system-development .clients-system-catalog-grid {
    gap: 14px;
  }

  .page-id-clients-system-development .section-clients-catalog-group {
    padding-top: 36px;
    padding-bottom: 36px;
  }

  .section-card--catalog-case {
    padding: 18px 16px 16px;
  }
}

/* --- AI 及智能方案 hub（service-ai-hub）— layout & polish only ------------------ */
.page-id-service-ai-hub {
  --ai-hub-radius: 16px;
  --ai-hub-radius-sm: 12px;
  --ai-hub-line: #d8e0ed;
  --ai-hub-line-strong: #c5cfdb;
  --ai-hub-shadow-card: 0 10px 28px rgba(23, 45, 79, 0.08);
  --ai-hub-shadow-card-hover: 0 16px 40px rgba(23, 45, 79, 0.11);
}

/* Section rhythm */
.page-id-service-ai-hub main > .section:not(.related-pages) {
  padding-top: 76px;
  padding-bottom: 76px;
}

.page-id-service-ai-hub main > .section:not(.related-pages) .container > .eyebrow {
  margin-bottom: 12px;
}

.page-id-service-ai-hub main > .section:not(.related-pages) .container > h2 {
  margin-bottom: 14px;
  letter-spacing: -0.02em;
}

.page-id-service-ai-hub main > .section:not(.related-pages) .container > .section-intro {
  margin-top: 0;
  margin-bottom: 26px;
  line-height: 1.65;
  max-width: 68ch;
}

.page-id-service-ai-hub main > .section:not(.related-pages) .section-card-grid,
.page-id-service-ai-hub main > .section:not(.related-pages) .step-grid,
.page-id-service-ai-hub main > .section:not(.related-pages) .case-grid {
  margin-top: 8px;
}

/* Hero: balance columns, breathing room */
.page-id-service-ai-hub .page-hero {
  padding: 58px 0 48px;
}

.page-id-service-ai-hub .page-hero-layout {
  align-items: center;
  gap: 28px;
}

.page-id-service-ai-hub .page-hero-copy .page-intro {
  line-height: 1.68;
  margin-bottom: 0;
}

.page-id-service-ai-hub .page-hero-copy .page-hero-subtitle {
  font-size: 1.1rem;
  font-weight: 700;
  color: #253044;
  line-height: 1.5;
  margin-top: 10px;
  margin-bottom: 0;
}

.page-id-service-ai-hub .page-hero-copy .page-intro + .page-intro {
  margin-top: 14px;
}

.page-id-service-ai-hub .page-hero-value-bullets {
  margin-top: 22px;
  padding: 16px 18px;
  border-radius: var(--ai-hub-radius-sm);
  background: #f4f7fc;
  border: 1px solid #e1e8f4;
}

.page-id-service-ai-hub .page-hero-value-bullets li {
  line-height: 1.55;
}

.page-id-service-ai-hub .page-hero-trust-hint {
  margin-top: 14px;
  line-height: 1.5;
}

.page-id-service-ai-hub .page-hero-visual {
  min-height: 0;
  max-height: 340px;
  align-self: center;
  border-radius: var(--ai-hub-radius);
  box-shadow: 0 14px 40px rgba(22, 30, 42, 0.1);
  border-color: rgba(37, 79, 133, 0.12);
}

.page-id-service-ai-hub .page-hero-visual-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page-id-service-ai-hub .page-hero-visual-chip-layer {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 16px;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  pointer-events: none;
}

.page-id-service-ai-hub .page-hero-visual-chip {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.96);
  color: #1a2330;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 2px 0 rgba(255, 255, 255, 0.55) inset, 0 6px 18px rgba(17, 26, 40, 0.14);
  line-height: 1.2;
}

@media (min-width: 1024px) {
  .page-id-service-ai-hub .page-hero-layout {
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.68fr);
  }

  .page-id-service-ai-hub .page-hero-visual {
    min-height: 260px;
    height: 100%;
    max-height: min(340px, 52vh);
  }
}

/* Remove decorative placeholders on this page */
.page-id-service-ai-hub main .section:not(.related-pages) .section-card::before,
.page-id-service-ai-hub main .section:not(.related-pages) .section-card::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
}

/* Pain / problem cards */
.page-id-service-ai-hub .section-ai-hub-problems .section-card-grid {
  align-items: stretch;
}

.page-id-service-ai-hub .section-ai-hub-problems .section-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 22px 20px 20px;
  border-radius: var(--ai-hub-radius);
  border: 1px solid var(--ai-hub-line-strong);
  background: #ffffff;
  box-shadow: var(--ai-hub-shadow-card);
  min-height: 100%;
  overflow: visible;
}

.page-id-service-ai-hub .section-ai-hub-problems .section-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ai-hub-shadow-card-hover);
  border-color: rgba(37, 79, 133, 0.18);
}

.page-id-service-ai-hub .section-ai-hub-problems .section-card-icon-wrap--hub {
  width: 44px;
  height: 44px;
  margin-bottom: 12px;
  border-radius: 12px;
}

.page-id-service-ai-hub .section-ai-hub-problems .section-card-micro-label {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #5a6474;
  background: #eef2f8;
  border: 1px solid #dfe6f2;
}

.page-id-service-ai-hub .section-ai-hub-problems .section-card h3 {
  margin-bottom: 10px;
  font-size: 1.05rem;
  line-height: 1.35;
}

.page-id-service-ai-hub .section-ai-hub-problems .section-card-desc {
  flex: 1 1 auto;
  margin-bottom: 0;
  line-height: 1.6;
  color: #4b5568;
}

.page-id-service-ai-hub .section-card-outcome {
  margin-top: auto;
  margin-bottom: 0;
  padding-top: 14px;
  border-top: 1px dashed #d0d8e6;
  font-size: 0.88rem;
  line-height: 1.58;
  color: #3d4a5c;
  font-weight: 600;
}

/* Solution grid: 12-col — row1 ×3, row2 ×2 centered */
.page-id-service-ai-hub .ai-hub-solution-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px 20px;
}

.page-id-service-ai-hub .ai-hub-solution-grid > .section-card {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 26px 24px 24px;
  border-radius: var(--ai-hub-radius);
  border: 1px solid rgba(37, 79, 133, 0.14);
  background: linear-gradient(180deg, #ffffff 0%, #fafcfe 100%);
  box-shadow: 0 12px 32px rgba(23, 45, 79, 0.09);
}

.page-id-service-ai-hub .ai-hub-solution-grid > .section-card:nth-child(4) {
  grid-column: 2 / span 5;
}

.page-id-service-ai-hub .ai-hub-solution-grid > .section-card:nth-child(5) {
  grid-column: 7 / span 5;
}

.page-id-service-ai-hub .ai-hub-solution-grid > .section-card h3 {
  margin-bottom: 10px;
  font-size: 1.12rem;
  line-height: 1.32;
  letter-spacing: -0.01em;
}

.page-id-service-ai-hub .ai-hub-solution-grid .section-card-desc {
  flex: 0 0 auto;
  margin-bottom: 0;
  line-height: 1.6;
  color: #4b5568;
}

.page-id-service-ai-hub .section-card-bullet-list {
  flex: 1 1 auto;
  margin: 14px 0 0;
  padding-left: 1.15em;
  font-size: 0.88rem;
  line-height: 1.58;
  color: #4b5568;
}

.page-id-service-ai-hub .section-card-bullet-list li + li {
  margin-top: 8px;
}

.page-id-service-ai-hub .section-card-cta-line {
  margin-top: auto;
  padding-top: 18px;
}

.page-id-service-ai-hub .sector-link--emphasis {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.94rem;
  font-weight: 800;
  color: var(--brand-dark);
  text-decoration: none;
  border-bottom: none;
  padding: 8px 0;
  box-shadow: 0 2px 0 rgba(243, 154, 23, 0.55);
  transition: color 0.15s ease, box-shadow 0.15s ease;
}

.page-id-service-ai-hub .sector-link--emphasis::after {
  content: "→";
  font-weight: 800;
  color: rgba(37, 79, 133, 0.45);
  transition: transform 0.2s ease, color 0.2s ease;
}

.page-id-service-ai-hub .sector-link--emphasis:hover,
.page-id-service-ai-hub .sector-link--emphasis:focus-visible {
  color: #1a2a3d;
  box-shadow: 0 2px 0 rgba(243, 154, 23, 0.95);
}

.page-id-service-ai-hub .sector-link--emphasis:hover::after,
.page-id-service-ai-hub .sector-link--emphasis:focus-visible::after {
  transform: translateX(3px);
  color: var(--brand-dark);
}

/* Hub icons on problem cards (same stroke treatment as services hub) */
.page-id-service-ai-hub .section-card-icon-wrap--hub svg,
.page-id-service-ai-hub .section-card-icon-wrap--hub svg * {
  opacity: 1;
  visibility: visible;
}

.page-id-service-ai-hub .section-card-icon-wrap--hub .section-card-icon-svg {
  display: block;
  width: 26px;
  height: 26px;
}

.page-id-service-ai-hub .section-card-icon-wrap--hub .section-card-icon-svg :is(path, rect, line, circle, polyline, polygon) {
  fill: none !important;
  stroke: #1f2937 !important;
  stroke-width: 2px;
}

/* Rollout / steps */
.page-id-service-ai-hub .section-ai-hub-rollout .section-intro {
  max-width: 70ch;
}

.page-id-service-ai-hub .ai-hub-step-grid {
  gap: 18px;
  align-items: stretch;
}

.page-id-service-ai-hub .ai-hub-step-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 22px 20px 22px 24px;
  border-radius: var(--ai-hub-radius);
  border: 1px solid #c9d4e6;
  background: #f8faff;
  box-shadow: 0 6px 20px rgba(23, 45, 79, 0.06);
  overflow: visible;
}

.page-id-service-ai-hub .ai-hub-step-card::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 4px !important;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--brand) 0%, rgba(37, 79, 133, 0.85) 100%);
  height: auto !important;
  margin: 0 !important;
}

.page-id-service-ai-hub .ai-hub-step-card .step-index {
  position: static;
  top: auto;
  left: auto;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 12px;
  border-radius: 12px;
  font-size: 0.95rem;
  background: #253044;
  color: #fff;
  font-weight: 800;
  box-shadow: 0 6px 14px rgba(23, 45, 79, 0.2);
}

.page-id-service-ai-hub .ai-hub-step-card h3 {
  margin-bottom: 10px;
  font-size: 1.02rem;
  line-height: 1.35;
}

.page-id-service-ai-hub .ai-hub-step-card p {
  flex: 1 1 auto;
  margin: 0;
  line-height: 1.62;
  color: #4b5568;
}

/* Principles — calmer, more editorial */
.page-id-service-ai-hub .section-ai-hub-principles .section-card-grid {
  align-items: stretch;
}

.page-id-service-ai-hub .section-ai-hub-principles .section-card {
  height: 100%;
  padding: 24px 22px 24px;
  border-radius: var(--ai-hub-radius);
  border: 1px solid #d0d7e2;
  background: #f3f5f8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.page-id-service-ai-hub .section-ai-hub-principles .section-card h3 {
  margin-bottom: 12px;
  font-size: 1.06rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #222a35;
}

.page-id-service-ai-hub .section-ai-hub-principles .section-card-desc {
  line-height: 1.65;
  color: #4d5666;
  font-size: 0.94rem;
}

/* Featured case: flex + stack body (see render case_stack_body) */
.page-id-service-ai-hub .case-grid--ai-hub-featured {
  grid-template-columns: minmax(0, 1fr);
  max-width: 1040px;
  margin-inline: auto;
}

.page-id-service-ai-hub .case-grid--ai-hub-featured .case-card--direction {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
  border-radius: var(--ai-hub-radius);
  border: 1px solid var(--ai-hub-line-strong);
  box-shadow: 0 16px 44px rgba(23, 45, 79, 0.1);
}

.page-id-service-ai-hub .case-grid--ai-hub-featured .case-card--direction > .card-media {
  flex: 1 1 42%;
  max-width: 46%;
  min-width: min(380px, 42vw);
  min-height: 320px;
  margin: 0 !important;
  border-radius: 0;
  align-self: stretch;
}

.page-id-service-ai-hub .case-grid--ai-hub-featured .case-card--direction > .card-media img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  object-position: center 40%;
}

.page-id-service-ai-hub .case-grid--ai-hub-featured .case-direction-stack {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 26px 28px 26px 26px;
  justify-content: flex-start;
}

.page-id-service-ai-hub .case-grid--ai-hub-featured .case-direction-category {
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7a8494;
}

.page-id-service-ai-hub .case-grid--ai-hub-featured .case-card--direction h3 {
  margin-bottom: 8px;
  font-size: 1.28rem;
  line-height: 1.3;
}

.page-id-service-ai-hub .case-grid--ai-hub-featured .case-direction-title-lead {
  margin: 0 0 14px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #5c6570;
  line-height: 1.5;
}

.page-id-service-ai-hub .case-grid--ai-hub-featured .case-direction-summary {
  margin: 0 0 12px;
  line-height: 1.62;
  color: #4b5568;
}

.page-id-service-ai-hub .case-grid--ai-hub-featured .case-direction-details {
  margin: 4px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid #e4eaf4;
  display: grid;
  gap: 14px;
}

.page-id-service-ai-hub .case-grid--ai-hub-featured .case-direction-detail dt {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9aa3b0;
  margin-bottom: 4px;
}

.page-id-service-ai-hub .case-grid--ai-hub-featured .case-direction-detail dd {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: #3d4552;
}

.page-id-service-ai-hub .case-direction-outcome-bullets {
  margin: 16px 0 0;
  padding: 14px 0 0 1.1em;
  border-top: 1px solid #e8edf4;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #374151;
  font-weight: 600;
}

.page-id-service-ai-hub .case-direction-outcome-bullets li + li {
  margin-top: 8px;
}

.page-id-service-ai-hub .case-grid--ai-hub-featured .case-direction-foot {
  margin-top: auto;
  margin-bottom: 0;
  padding-top: 22px;
  border-top: 1px solid #e4eaf4;
}

.page-id-service-ai-hub .case-grid--ai-hub-featured .case-direction-foot .case-direction-link {
  font-weight: 800;
}

/* Closing CTA */
.page-id-service-ai-hub .section-emphasis-cta.section-ai-hub-cta {
  padding-top: 64px;
  padding-bottom: 72px;
}

.page-id-service-ai-hub .service-cta--ai-hub {
  padding: 36px 36px 34px;
  border-radius: var(--ai-hub-radius);
  border: 1px solid rgba(37, 79, 133, 0.16);
  background: linear-gradient(155deg, #ffffff 0%, #f3f6fb 42%, #fff8f0 100%);
  box-shadow: 0 22px 56px rgba(23, 45, 79, 0.12);
}

.page-id-service-ai-hub .service-cta--ai-hub .eyebrow {
  margin-bottom: 10px;
}

.page-id-service-ai-hub .service-cta--ai-hub h2 {
  margin-bottom: 14px;
  font-size: clamp(1.45rem, 3vw, 1.75rem);
  line-height: 1.28;
}

.page-id-service-ai-hub .service-cta--ai-hub p {
  margin: 0 0 22px;
  line-height: 1.65;
  max-width: 56ch;
  color: #4b5568;
}

.page-id-service-ai-hub .service-cta--ai-hub .hero-actions {
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 0;
}

.page-id-service-ai-hub .service-cta--ai-hub .cta-actions-note {
  margin: 16px 0 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: #8b939e;
  font-weight: 600;
  max-width: 60ch;
}

.page-id-service-ai-hub .service-cta--ai-hub .btn-primary {
  min-width: 210px;
  justify-content: center;
  font-weight: 800;
}

.page-id-service-ai-hub .service-cta--ai-hub .btn-ghost {
  border-color: #c3d0e3;
  background: rgba(255, 255, 255, 0.95);
  font-weight: 700;
}

/* Related pages — compact nav cards */
.page-id-service-ai-hub .related-pages {
  padding-top: 64px;
  padding-bottom: 72px;
}

.page-id-service-ai-hub .related-pages .container > h2 {
  margin-bottom: 10px;
}

.page-id-service-ai-hub .related-pages-intro {
  margin-bottom: 18px;
  font-size: 0.92rem;
  max-width: 58ch;
}

.page-id-service-ai-hub .related-pages .grid {
  gap: 14px;
  margin-top: 8px;
}

.page-id-service-ai-hub .related-pages .related-page-card {
  padding: 18px 18px 16px;
  border-radius: 14px;
  border: 1px solid #e0e7f0;
  background: #fafbfd;
  box-shadow: none;
}

.page-id-service-ai-hub .related-pages .related-page-card h3 {
  font-size: 1rem;
  margin-bottom: 8px;
  line-height: 1.35;
}

.page-id-service-ai-hub .related-pages .related-page-card-desc {
  font-size: 0.86rem;
  line-height: 1.5;
  -webkit-line-clamp: 2;
}

.page-id-service-ai-hub .related-pages .related-page-card-foot {
  margin-top: 10px;
}

.page-id-service-ai-hub .related-pages .related-page-link {
  font-size: 0.86rem;
  font-weight: 800;
}

.page-id-service-ai-hub .related-pages .related-page-card-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
}

/* Tablet */
@media (max-width: 1023px) {
  .page-id-service-ai-hub .ai-hub-solution-grid > .section-card:nth-child(4),
  .page-id-service-ai-hub .ai-hub-solution-grid > .section-card:nth-child(5) {
    grid-column: span 6;
  }
}

@media (max-width: 900px) {
  .page-id-service-ai-hub main > .section:not(.related-pages) {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .page-id-service-ai-hub .page-hero-visual {
    max-height: none;
    min-height: 240px;
  }

  .page-id-service-ai-hub .case-grid--ai-hub-featured .case-card--direction {
    flex-direction: column;
  }

  .page-id-service-ai-hub .case-grid--ai-hub-featured .case-card--direction > .card-media {
    flex: none;
    max-width: none;
    min-width: 0;
    width: 100%;
    min-height: 220px;
    max-height: 280px;
  }

  .page-id-service-ai-hub .case-grid--ai-hub-featured .case-card--direction > .card-media img {
    min-height: 220px;
  }

  .page-id-service-ai-hub .case-grid--ai-hub-featured .case-direction-stack {
    padding: 22px 22px 24px;
  }
}

/* Mobile */
@media (max-width: 639px) {
  .page-id-service-ai-hub .page-hero {
    padding: 44px 0 40px;
  }

  .page-id-service-ai-hub .page-hero-visual-chip {
    font-size: 0.65rem;
    padding: 7px 10px;
  }

  .page-id-service-ai-hub .service-cta--ai-hub .btn-primary,
  .page-id-service-ai-hub .service-cta--ai-hub .btn-ghost {
    width: 100%;
    justify-content: center;
  }

  .page-id-service-ai-hub .related-pages .related-page-card-desc {
    -webkit-line-clamp: 3;
  }
}

/* --- AI 知識助手（service-ai-knowledge-assistant） -------------------------------- */
.page-id-service-ai-knowledge-assistant {
  --ai-ka-radius: 16px;
  --ai-ka-shadow: 0 10px 28px rgba(23, 45, 79, 0.08);
}

/* ---- Hero：左欄 typography ---- */
.page-id-service-ai-knowledge-assistant .page-hero {
  padding: 52px 0 44px;
}

.page-id-service-ai-knowledge-assistant .page-hero-layout {
  align-items: center;
  gap: 28px;
}

.page-id-service-ai-knowledge-assistant .page-hero-copy .breadcrumbs {
  margin-bottom: 12px;
  font-size: 0.84rem;
}

.page-id-service-ai-knowledge-assistant .page-hero-copy .eyebrow {
  margin: 0 0 8px;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  font-weight: 700;
}

.page-id-service-ai-knowledge-assistant .page-hero-copy h1 {
  line-height: 1.12;
  margin: 0 0 14px;
  letter-spacing: -0.02em;
}

.page-id-service-ai-knowledge-assistant .page-hero-copy .page-hero-subtitle {
  font-size: 1.08rem;
  font-weight: 700;
  color: #253044;
  line-height: 1.42;
  margin: 0 0 12px;
}

.page-id-service-ai-knowledge-assistant .page-hero-copy .page-intro:not(.page-hero-subtitle) {
  margin: 0 0 18px;
  max-width: 52ch;
  line-height: 1.7;
  font-size: 0.98rem;
  color: #4b5568;
}

.page-id-service-ai-knowledge-assistant .page-hero-value-bullets {
  list-style: none;
  margin: 0 0 4px;
  padding: 18px 20px;
  border-radius: 12px;
  background: #f4f7fc;
  border: 1px solid #e1e8f4;
  display: grid;
  gap: 12px;
  max-width: 58ch;
}

.page-id-service-ai-knowledge-assistant .page-hero-value-bullets li {
  position: relative;
  margin: 0;
  line-height: 1.55;
  font-size: 0.93rem;
  font-weight: 600;
  color: #374151;
  padding-left: 1.15em;
}

.page-id-service-ai-knowledge-assistant .page-hero-value-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(37, 79, 133, 0.42);
}

.page-id-service-ai-knowledge-assistant .page-hero-actions {
  margin-top: 22px;
}

.page-id-service-ai-knowledge-assistant .page-hero-actions .hero-actions {
  gap: 14px;
  align-items: center;
}

/* Hero 次 CTA：outline、俐落 */
.page-id-service-ai-knowledge-assistant .page-hero-actions .btn-hero-secondary-ai-ka {
  background: transparent;
  color: #253044;
  border: 2px solid rgba(37, 79, 133, 0.32);
  box-shadow: none;
  font-weight: 600;
  padding: 0.72rem 1.1rem;
  font-size: 0.9rem;
}

.page-id-service-ai-knowledge-assistant .page-hero-actions .btn-hero-secondary-ai-ka:hover {
  background: rgba(37, 79, 133, 0.06);
  border-color: rgba(37, 79, 133, 0.45);
}

.page-id-service-ai-knowledge-assistant .page-hero-actions .btn-primary {
  padding: 0.78rem 1.2rem;
  font-weight: 800;
}

/* ---- Hero：右欄 visual（資訊卡層級） ---- */
.page-id-service-ai-knowledge-assistant .page-hero-visual {
  position: relative;
  overflow: hidden;
  min-height: 0;
  max-height: 400px;
  padding: clamp(20px, 3.5vw, 28px);
  border-radius: var(--ai-ka-radius);
  box-shadow: 0 14px 40px rgba(22, 30, 42, 0.11);
  border-color: rgba(37, 79, 133, 0.12);
}

.page-id-service-ai-knowledge-assistant .page-hero-visual-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse 90% 70% at 50% 45%, rgba(12, 18, 28, 0) 0%, rgba(12, 18, 28, 0.25) 100%);
}

.page-id-service-ai-knowledge-assistant .page-hero-visual-overlay {
  background: linear-gradient(
    165deg,
    rgba(10, 14, 22, 0.82) 0%,
    rgba(17, 26, 40, 0.72) 38%,
    rgba(22, 32, 48, 0.55) 72%,
    rgba(17, 26, 40, 0.42) 100%
  );
}

.page-id-service-ai-knowledge-assistant .page-hero-visual-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  min-height: 100%;
  max-width: 100%;
}

.page-id-service-ai-knowledge-assistant .page-hero-visual-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Label：最小層級 */
.page-id-service-ai-knowledge-assistant .page-hero-visual-label {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 0 0 14px;
  padding: 5px 11px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
}

/* 主說明：visual 內最重 */
.page-id-service-ai-knowledge-assistant .page-hero-visual-supporting {
  display: block;
  margin: 0 0 14px;
  max-width: 22ch;
  font-size: clamp(1.05rem, 2.1vw, 1.22rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* Chips：主說明下方，輔助層 */
.page-id-service-ai-knowledge-assistant .page-hero-visual-chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.page-id-service-ai-knowledge-assistant .page-hero-visual-chip-row .page-hero-visual-chip {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 5px 10px;
  border-radius: 999px;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: none;
}

/* Bullets：supporting list */
.page-id-service-ai-knowledge-assistant .page-hero-visual-bullets {
  margin-top: 0;
  gap: 9px;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}

.page-id-service-ai-knowledge-assistant .page-hero-visual-bullets li {
  line-height: 1.6;
  padding-left: 1em;
}

.page-id-service-ai-knowledge-assistant .page-hero-visual-bullets li::before {
  top: 0.65em;
  width: 4px;
  height: 4px;
  background: rgba(255, 255, 255, 0.65);
}

@media (min-width: 1024px) {
  .page-id-service-ai-knowledge-assistant .page-hero {
    padding: 56px 0 50px;
  }

  .page-id-service-ai-knowledge-assistant .page-hero-layout {
    grid-template-columns: minmax(0, 1.02fr) minmax(360px, 0.88fr);
    gap: 32px;
    align-items: center;
  }

  .page-id-service-ai-knowledge-assistant .page-hero-visual {
    min-height: 296px;
    max-height: min(400px, 52vh);
    padding: 24px 28px;
  }

  .page-id-service-ai-knowledge-assistant .page-hero-visual-supporting {
    font-size: 1.15rem;
    max-width: 24ch;
  }
}

.page-id-service-ai-knowledge-assistant main > .section:not(.related-pages) {
  padding-top: 72px;
  padding-bottom: 72px;
}

.page-id-service-ai-knowledge-assistant main > .section:not(.related-pages) .container > h2 {
  margin-bottom: 12px;
}

.page-id-service-ai-knowledge-assistant main > .section:not(.related-pages) .container > .section-intro {
  margin-bottom: 24px;
  max-width: 68ch;
  line-height: 1.65;
}

.page-id-service-ai-knowledge-assistant main > .section:not(.related-pages) .section-card-grid,
.page-id-service-ai-knowledge-assistant main > .section:not(.related-pages) .step-grid {
  margin-top: 6px;
}

.page-id-service-ai-knowledge-assistant main .section:not(.related-pages) .section-card::before,
.page-id-service-ai-knowledge-assistant main .section:not(.related-pages) .section-card::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
}

.page-id-service-ai-knowledge-assistant .ai-ka-card-grid {
  align-items: stretch;
  gap: 18px;
}

.page-id-service-ai-knowledge-assistant .ai-ka-card-grid > .section-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 22px 20px 20px;
  border-radius: var(--ai-ka-radius);
  border: 1px solid #d0d8e6;
  background: #ffffff;
  box-shadow: var(--ai-ka-shadow);
  overflow: visible;
  min-height: 100%;
}

.page-id-service-ai-knowledge-assistant .ai-ka-card-grid > .section-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(23, 45, 79, 0.1);
  border-color: rgba(37, 79, 133, 0.2);
}

/* 場景區：首兩張（最常見）略提高權重 */
.page-id-service-ai-knowledge-assistant .ai-ka-card-grid > .section-card--emphasis-featured {
  border-color: rgba(37, 79, 133, 0.26);
  background: linear-gradient(165deg, #ffffff 0%, #f6f9fc 55%, #ffffff 100%);
  box-shadow: 0 12px 36px rgba(23, 45, 79, 0.11);
}

.page-id-service-ai-knowledge-assistant .ai-ka-card-grid > .section-card--emphasis-featured h3 {
  font-weight: 800;
  letter-spacing: -0.01em;
}

.page-id-service-ai-knowledge-assistant .ai-ka-card-grid .section-card-icon-wrap--hub {
  width: 44px;
  height: 44px;
  margin-bottom: 12px;
  border-radius: 12px;
}

.page-id-service-ai-knowledge-assistant .ai-ka-card-grid .section-card-micro-label {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #5a6474;
  background: #eef2f8;
  border: 1px solid #dfe6f2;
}

.page-id-service-ai-knowledge-assistant .ai-ka-card-grid .section-card h3 {
  font-size: 1.05rem;
  line-height: 1.35;
  margin-bottom: 10px;
}

.page-id-service-ai-knowledge-assistant .ai-ka-card-grid .section-card-desc {
  flex: 1 1 auto;
  margin: 0;
  line-height: 1.6;
  color: #4b5568;
  font-size: 0.93rem;
}

.page-id-service-ai-knowledge-assistant .ai-ka-card-grid .section-card-outcome {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed #d8dfea;
  font-size: 0.88rem;
  line-height: 1.58;
  color: #3d4a5c;
  font-weight: 600;
}

.page-id-service-ai-knowledge-assistant .section-card-icon-wrap--hub svg,
.page-id-service-ai-knowledge-assistant .section-card-icon-wrap--hub svg * {
  opacity: 1;
  visibility: visible;
}

.page-id-service-ai-knowledge-assistant .section-card-icon-wrap--hub .section-card-icon-svg {
  width: 26px;
  height: 26px;
}

.page-id-service-ai-knowledge-assistant .section-card-icon-wrap--hub .section-card-icon-svg :is(path, rect, line, circle, polyline, polygon) {
  fill: none !important;
  stroke: #1f2937 !important;
  stroke-width: 2px;
}

/* Steps */
.page-id-service-ai-knowledge-assistant .ai-ka-step-grid {
  gap: 18px;
  align-items: stretch;
}

.page-id-service-ai-knowledge-assistant .ai-ka-step-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 22px 20px 22px 24px;
  border-radius: var(--ai-ka-radius);
  border: 1px solid #c5d0e0;
  background: #fafcfe;
  box-shadow: 0 6px 18px rgba(23, 45, 79, 0.06);
  overflow: visible;
}

.page-id-service-ai-knowledge-assistant .ai-ka-step-card::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 4px !important;
  border-radius: 999px;
  background: linear-gradient(180deg, #253044 0%, rgba(37, 79, 133, 0.85) 100%);
  height: auto !important;
  margin: 0 !important;
}

.page-id-service-ai-knowledge-assistant .ai-ka-step-card .step-index {
  position: static;
  width: 2.2rem;
  height: 2.2rem;
  margin: 0 0 12px;
  border-radius: 11px;
  font-size: 0.92rem;
  font-weight: 800;
  background: #253044;
  color: #fff;
  box-shadow: 0 6px 14px rgba(23, 45, 79, 0.18);
}

.page-id-service-ai-knowledge-assistant .ai-ka-step-card h3 {
  font-size: 1.02rem;
  margin-bottom: 10px;
  line-height: 1.35;
}

.page-id-service-ai-knowledge-assistant .ai-ka-step-card p {
  margin: 0;
  line-height: 1.62;
  color: #4b5568;
  font-size: 0.92rem;
}

/* 接入渠道：桌面 2×2，卡片等高 */
@media (min-width: 900px) {
  .page-id-service-ai-knowledge-assistant .ai-ka-channel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
  }

  .page-id-service-ai-knowledge-assistant .ai-ka-channel-grid > .section-card {
    min-height: 100%;
  }
}

/* 治理：權重與邊界略強化 */
.page-id-service-ai-knowledge-assistant .section-ai-ka-governance {
  background: linear-gradient(180deg, #f6f8fb 0%, #ffffff 42%);
  border-top: 1px solid #e8edf0;
  border-bottom: 1px solid #e8edf0;
}

.page-id-service-ai-knowledge-assistant .ai-ka-governance-grid {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .page-id-service-ai-knowledge-assistant .ai-ka-governance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}

.page-id-service-ai-knowledge-assistant .ai-ka-governance-grid > .section-card {
  border-color: #c5d0e0;
  background: #fcfdff;
}

/* FAQ */
.page-id-service-ai-knowledge-assistant .section-ai-ka-faq .faq-list {
  margin-top: 8px;
}

.page-id-service-ai-knowledge-assistant .section-ai-ka-faq .faq-item--accordion {
  border: 1px solid #dfe6f0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(23, 45, 79, 0.05);
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

.page-id-service-ai-knowledge-assistant .section-ai-ka-faq .faq-item--accordion + .faq-item--accordion {
  margin-top: 14px;
}

.page-id-service-ai-knowledge-assistant .section-ai-ka-faq .faq-trigger {
  padding: 22px 24px;
}

.page-id-service-ai-knowledge-assistant .section-ai-ka-faq .faq-trigger-label {
  font-weight: 800;
  letter-spacing: -0.01em;
}

.page-id-service-ai-knowledge-assistant .section-ai-ka-faq .faq-trigger-icons {
  align-self: center;
  margin-top: 0;
}

.page-id-service-ai-knowledge-assistant .section-ai-ka-faq .faq-panel-inner {
  padding: 0 24px 22px;
}

.page-id-service-ai-knowledge-assistant .section-ai-ka-faq .faq-panel-inner p {
  line-height: 1.72;
  color: #4b5568;
  font-size: 0.93rem;
}

.page-id-service-ai-knowledge-assistant .section-ai-ka-faq .faq-item--accordion.faq-item--is-open {
  border-color: rgba(37, 79, 133, 0.2);
  box-shadow: 0 10px 32px rgba(23, 45, 79, 0.1);
}

/* CTA */
.page-id-service-ai-knowledge-assistant .section-ai-ka-cta {
  padding-top: 60px;
  padding-bottom: 72px;
}

.page-id-service-ai-knowledge-assistant .service-cta--ai-ka {
  padding: 34px 34px 32px;
  border-radius: var(--ai-ka-radius);
  border: 1px solid rgba(37, 79, 133, 0.14);
  background: linear-gradient(155deg, #ffffff 0%, #f4f7fb 45%, #fff9f2 100%);
  box-shadow: 0 20px 52px rgba(23, 45, 79, 0.11);
}

.page-id-service-ai-knowledge-assistant .service-cta--ai-ka h2 {
  font-size: clamp(1.45rem, 2.8vw, 1.72rem);
  line-height: 1.3;
  margin-bottom: 14px;
}

.page-id-service-ai-knowledge-assistant .service-cta--ai-ka p {
  margin-bottom: 24px;
  line-height: 1.65;
  max-width: 58ch;
  color: #4b5568;
}

.page-id-service-ai-knowledge-assistant .service-cta--ai-ka .hero-actions {
  gap: 16px;
  flex-wrap: wrap;
}

.page-id-service-ai-knowledge-assistant .service-cta--ai-ka .btn-hero-secondary-ai-ka {
  background: transparent;
  color: #253044;
  border: 2px solid rgba(37, 79, 133, 0.32);
  box-shadow: none;
  font-weight: 700;
}

.page-id-service-ai-knowledge-assistant .service-cta--ai-ka .btn-hero-secondary-ai-ka:hover {
  background: rgba(37, 79, 133, 0.06);
  border-color: rgba(37, 79, 133, 0.45);
}

.page-id-service-ai-knowledge-assistant .service-cta--ai-ka .cta-actions-note {
  margin: 18px 0 0;
  font-size: 0.82rem;
  color: #8b939e;
  font-weight: 600;
  max-width: 56ch;
}

.page-id-service-ai-knowledge-assistant .service-cta--ai-ka .btn-primary {
  min-width: 200px;
  font-weight: 800;
}

.page-id-service-ai-knowledge-assistant .service-cta--ai-ka .btn-ghost {
  font-weight: 700;
  border-color: #c5d2e5;
  background: #fff;
}

/* Related */
.page-id-service-ai-knowledge-assistant .related-pages-intro {
  margin-bottom: 16px;
  max-width: 62ch;
  font-size: 0.93rem;
}

.page-id-service-ai-knowledge-assistant .related-pages .grid {
  gap: 14px;
}

.page-id-service-ai-knowledge-assistant .related-pages .related-page-card {
  padding: 18px 18px 16px;
  border-radius: 14px;
  background: #fafbfd;
  border: 1px solid #e4eaf0;
}

.page-id-service-ai-knowledge-assistant .related-pages .related-page-card-desc {
  font-size: 0.88rem;
  line-height: 1.5;
  -webkit-line-clamp: 3;
}

@media (max-width: 900px) {
  .page-id-service-ai-knowledge-assistant main > .section:not(.related-pages) {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .page-id-service-ai-knowledge-assistant .page-hero-visual {
    max-height: none;
    min-height: 240px;
  }
}

@media (max-width: 639px) {
  .page-id-service-ai-knowledge-assistant .service-cta--ai-ka .btn-primary,
  .page-id-service-ai-knowledge-assistant .service-cta--ai-ka .btn-ghost {
    width: 100%;
    justify-content: center;
  }
}

/* --- 私有化 / On-prem AI Agent（service-private-ai-agent） -------------------- */
.page-id-service-private-ai-agent {
  --private-ai-radius: 16px;
  --private-ai-line: #d0d8e6;
  --private-ai-accent: rgba(37, 79, 133, 0.22);
}

.page-id-service-private-ai-agent .page-hero {
  padding: 52px 0 44px;
}

.page-id-service-private-ai-agent .page-hero-layout {
  gap: 28px;
  align-items: stretch;
}

.page-id-service-private-ai-agent .page-hero-copy h1 {
  margin-bottom: 14px;
}

.page-id-service-private-ai-agent .page-hero-copy .page-hero-subtitle {
  font-size: 1.06rem;
  font-weight: 700;
  color: #253044;
  line-height: 1.45;
  margin: 0 0 16px;
  max-width: 54ch;
}

.page-id-service-private-ai-agent .page-hero-copy .page-intro:not(.page-hero-subtitle) {
  margin: 0 0 18px;
  max-width: 52ch;
  line-height: 1.66;
  font-size: 0.97rem;
  color: #4b5568;
}

.page-id-service-private-ai-agent .page-hero-value-bullets {
  list-style: none;
  margin: 0 0 8px;
  padding: 16px 18px;
  border-radius: 14px;
  background: #f4f7fc;
  border: 1px solid #e1e8f4;
  display: grid;
  gap: 10px;
  max-width: 58ch;
}

.page-id-service-private-ai-agent .page-hero-value-bullets li {
  position: relative;
  margin: 0;
  padding-left: 1.15em;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.48;
  color: #374151;
}

.page-id-service-private-ai-agent .page-hero-value-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(37, 79, 133, 0.42);
}

.page-id-service-private-ai-agent .page-hero-actions {
  margin-top: 22px;
}

.page-id-service-private-ai-agent .page-hero-actions .hero-actions {
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}

.page-id-service-private-ai-agent .page-hero-actions .btn-hero-secondary-private-ai {
  background: transparent;
  color: #253044;
  border: 2px solid rgba(37, 79, 133, 0.32);
  box-shadow: none;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.72rem 1.1rem;
}

.page-id-service-private-ai-agent .page-hero-actions .btn-hero-secondary-private-ai:hover {
  background: rgba(37, 79, 133, 0.06);
  border-color: rgba(37, 79, 133, 0.45);
}

.page-id-service-private-ai-agent .page-hero-visual {
  position: relative;
  overflow: hidden;
  min-height: 260px;
  max-height: min(380px, 52vh);
  border-radius: var(--private-ai-radius);
  border-color: rgba(37, 79, 133, 0.14);
  box-shadow: 0 14px 44px rgba(22, 30, 42, 0.12);
  padding: clamp(18px, 3vw, 26px);
}

.page-id-service-private-ai-agent .page-hero-visual-overlay {
  background: linear-gradient(
    145deg,
    rgba(15, 22, 34, 0.88) 0%,
    rgba(22, 34, 52, 0.78) 45%,
    rgba(28, 42, 62, 0.65) 100%
  );
}

.page-id-service-private-ai-agent .page-hero-visual-content {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: stretch;
  min-height: 100%;
}

.page-id-service-private-ai-agent .page-hero-visual-delivery-scope {
  width: 100%;
  padding: 4px 2px 2px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
}

.page-id-service-private-ai-agent .page-hero-visual-delivery-scope-label {
  margin: 0 0 12px;
  padding: 0 4px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

.page-id-service-private-ai-agent .page-hero-visual-delivery-scope-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.page-id-service-private-ai-agent .page-hero-visual-delivery-scope-list li {
  display: grid;
  grid-template-columns: minmax(0, 92px) minmax(0, 1fr);
  gap: 6px 14px;
  padding: 14px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  align-items: start;
}

.page-id-service-private-ai-agent .page-hero-visual-delivery-scope-list li:first-child {
  border-top: 0;
  padding-top: 2px;
}

.page-id-service-private-ai-agent .page-hero-visual-delivery-scope-title {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 200, 140, 0.95);
  line-height: 1.3;
  margin-top: 2px;
}

.page-id-service-private-ai-agent .page-hero-visual-delivery-scope-desc {
  font-size: 0.84rem;
  line-height: 1.48;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  max-width: 36ch;
}

.page-id-service-private-ai-agent main > .section:not(.related-pages) {
  padding-top: 64px;
  padding-bottom: 64px;
}

.page-id-service-private-ai-agent main > .section:not(.related-pages) .container > h2 {
  margin-bottom: 14px;
  letter-spacing: -0.02em;
}

.page-id-service-private-ai-agent main > .section:not(.related-pages) .container > .section-intro {
  margin-bottom: 24px;
  max-width: 68ch;
  line-height: 1.66;
  color: #4b5568;
}

.page-id-service-private-ai-agent main .section-card-desc,
.page-id-service-private-ai-agent main .section-card-outcome {
  line-height: 1.65;
}

/* 情況判斷卡 */
.page-id-service-private-ai-agent .section-private-ai-when .section-card-grid > .section-card {
  border-radius: var(--private-ai-radius);
  border: 1px solid var(--private-ai-line);
  background: #fff;
  box-shadow: 0 8px 24px rgba(23, 45, 79, 0.06);
  padding: 22px 20px 20px;
}

.page-id-service-private-ai-agent .section-private-ai-when .section-card-grid > .section-card::before,
.page-id-service-private-ai-agent .section-private-ai-when .section-card-grid > .section-card::after {
  display: none !important;
  content: none !important;
}

.page-id-service-private-ai-agent .section-private-ai-when .section-card h3 {
  font-size: 1.05rem;
  margin-bottom: 12px;
}

.page-id-service-private-ai-agent .section-private-ai-when .section-card-desc {
  line-height: 1.62;
  font-size: 0.93rem;
}

.page-id-service-private-ai-agent .section-private-ai-when .section-card-bullet-list {
  margin: 14px 0 0;
  padding: 0 0 0 1.1em;
  font-size: 0.87rem;
  line-height: 1.58;
  color: #4b5568;
}

.page-id-service-private-ai-agent .section-card .section-card-bullet-list li {
  margin-bottom: 6px;
}

.page-id-service-private-ai-agent .section-card .section-card-bullet-list li:last-child {
  margin-bottom: 0;
}

.page-id-service-private-ai-agent .section-private-ai-fit-grid {
  gap: 20px;
}

@media (min-width: 768px) {
  .page-id-service-private-ai-agent .section-private-ai-fit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 部署比較卡 */
.page-id-service-private-ai-agent .section-private-ai-deploy .section-card-grid > .section-card {
  border-radius: var(--private-ai-radius);
  border: 1px solid #c5d0e0;
  background: linear-gradient(180deg, #fbfcfe 0%, #fff 38%);
  box-shadow: 0 10px 28px rgba(23, 45, 79, 0.07);
  border-top: 3px solid var(--private-ai-accent);
  padding: 20px 18px 18px;
}

.page-id-service-private-ai-agent .section-private-ai-deploy .section-card-grid > .section-card::before,
.page-id-service-private-ai-agent .section-private-ai-deploy .section-card-grid > .section-card::after {
  display: none !important;
  content: none !important;
}

.page-id-service-private-ai-agent .section-private-ai-deploy .section-card-micro-label {
  font-size: 0.65rem;
  color: #5a6474;
  background: #eef2f8;
  border-color: #dfe6f0;
}

.page-id-service-private-ai-agent .section-private-ai-deploy .section-card-outcome {
  font-size: 0.88rem;
  line-height: 1.58;
  color: #3d4a5c;
}

.page-id-service-private-ai-agent .section-private-ai-deploy .section-card-bullet-list {
  margin-top: 12px;
  line-height: 1.58;
}

.page-id-service-private-ai-agent .section-private-ai-deploy .section-card-bullet-list li {
  margin-bottom: 6px;
}

.page-id-service-private-ai-agent .section-private-ai-deploy-grid {
  gap: 20px;
}

@media (min-width: 900px) {
  .page-id-service-private-ai-agent .section-private-ai-deploy-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-id-service-private-ai-agent .page-hero-layout {
    grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.78fr);
    align-items: center;
  }
}

/* 場景卡 */
.page-id-service-private-ai-agent .section-private-ai-scenarios .section-card-grid > .section-card {
  border-radius: var(--private-ai-radius);
  border: 1px solid var(--private-ai-line);
  background: #fafbfd;
  min-height: 100%;
  padding: 20px 18px 18px;
}

.page-id-service-private-ai-agent .section-private-ai-scenarios .section-card-grid > .section-card::before,
.page-id-service-private-ai-agent .section-private-ai-scenarios .section-card-grid > .section-card::after {
  display: none !important;
  content: none !important;
}

.page-id-service-private-ai-agent .section-private-ai-scenario-grid {
  gap: 20px;
}

@media (min-width: 768px) {
  .page-id-service-private-ai-agent .section-private-ai-scenario-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.page-id-service-private-ai-agent .section-private-ai-scenarios .section-card h3 {
  margin-bottom: 10px;
}

.page-id-service-private-ai-agent .section-private-ai-scenarios .section-card-outcome {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #d5dde8;
  font-size: 0.88rem;
  font-weight: 600;
  color: #374151;
}

/* Step 流程 */
.page-id-service-private-ai-agent .section-private-ai-step-grid {
  gap: 16px;
  align-items: stretch;
}

.page-id-service-private-ai-agent .section-private-ai-step-grid .private-ai-step-card {
  position: relative;
  z-index: 0;
  border-radius: var(--private-ai-radius);
  border: 1px solid #b8c4d6;
  border-left: 3px solid rgba(255, 140, 0, 0.42);
  background: #fff;
  /* 保留足夠 top padding，避免 absolute .step-index 與標題重疊（勿用單一 padding 簡寫覆寫掉全域 step-card 的 padding-top） */
  padding-top: 58px;
  padding-right: 20px;
  padding-bottom: 22px;
  padding-left: 26px;
  box-shadow: 0 6px 20px rgba(23, 45, 79, 0.05);
}

.page-id-service-private-ai-agent .section-private-ai-step-grid .private-ai-step-card::before {
  display: none;
}

.page-id-service-private-ai-agent .section-private-ai-step-grid .private-ai-step-card .step-index {
  top: 16px;
  left: 22px;
  z-index: 2;
  width: 28px;
  height: 28px;
  font-size: 0.82rem;
  background: #253044;
  color: #fff;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(15, 22, 34, 0.12);
}

.page-id-service-private-ai-agent .section-private-ai-step-grid .private-ai-step-card h3 {
  position: relative;
  z-index: 1;
  font-size: 1.02rem;
  margin-top: 0;
  margin-bottom: 12px;
}

.page-id-service-private-ai-agent .section-private-ai-step-grid .private-ai-step-card p:not(.step-index) {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.65;
  color: #4b5568;
  max-width: 52ch;
}

@media (max-width: 899px) {
  .page-id-service-private-ai-agent .section-private-ai-step-grid {
    gap: 20px;
  }
}

@media (min-width: 900px) {
  .page-id-service-private-ai-agent .section-private-ai-step-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .page-id-service-private-ai-agent .section-private-ai-step-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* 決策與 pre-CTA bullet 區 */
.page-id-service-private-ai-agent .section-private-ai-decision .case-study-bullet-list,
.page-id-service-private-ai-agent .section-private-ai-pre-cta .case-study-bullet-list {
  max-width: 68ch;
  padding: 22px 24px;
  border-radius: 14px;
  background: #f6f8fb;
  border: 1px solid #e1e8f0;
}

.page-id-service-private-ai-agent .section-private-ai-pre-cta .case-study-bullet-list {
  background: #fffaf5;
  border-color: rgba(243, 154, 23, 0.22);
  list-style: none;
  margin-left: 0;
  /* 勿覆寫 padding-left: 0，以免列表貼邊；在共用 22px 24px 基礎上略增左內距 */
  padding: 22px 24px 22px 28px;
}

.page-id-service-private-ai-agent .section-private-ai-pre-cta .case-study-bullet-list li {
  position: relative;
  padding-left: 1.35em;
}

.page-id-service-private-ai-agent .section-private-ai-pre-cta .case-study-bullet-list li::before {
  content: "•";
  position: absolute;
  left: 8px;
  top: 0.12em;
  color: #ff8c00;
  font-weight: 800;
}

.page-id-service-private-ai-agent .section-private-ai-decision .case-study-bullet-list li {
  margin-bottom: 10px;
  line-height: 1.65;
  font-size: 0.93rem;
  color: #3d4a5c;
}

.page-id-service-private-ai-agent .section-private-ai-pre-cta .case-study-bullet-list li {
  margin-bottom: 12px;
  line-height: 1.65;
  font-size: 0.93rem;
  color: #3d4a5c;
}

.page-id-service-private-ai-agent .section-private-ai-decision .case-study-bullet-list li:last-child,
.page-id-service-private-ai-agent .section-private-ai-pre-cta .case-study-bullet-list li:last-child {
  margin-bottom: 0;
}

/* FAQ */
.page-id-service-private-ai-agent .section-private-ai-faq .faq-list {
  margin-top: 8px;
}

.page-id-service-private-ai-agent .section-private-ai-faq .faq-item--accordion + .faq-item--accordion {
  margin-top: 12px;
}

.page-id-service-private-ai-agent .section-private-ai-faq .faq-trigger {
  padding: 22px 22px;
  min-height: 52px;
}

.page-id-service-private-ai-agent .section-private-ai-faq .faq-trigger-label {
  font-weight: 800;
  line-height: 1.45;
}

.page-id-service-private-ai-agent .section-private-ai-faq .faq-panel-inner p + p {
  margin-top: 10px;
}

/* CTA */
.page-id-service-private-ai-agent .section-private-ai-cta {
  padding-top: 56px;
  padding-bottom: 72px;
}

.page-id-service-private-ai-agent .service-cta--private-ai {
  padding: 32px 32px 30px;
  border-radius: var(--private-ai-radius);
  border: 1px solid rgba(37, 79, 133, 0.14);
  background: linear-gradient(150deg, #ffffff 0%, #f8fafc 40%, #fff8f0 100%);
  box-shadow: 0 18px 48px rgba(23, 45, 79, 0.1);
}

.page-id-service-private-ai-agent .service-cta--private-ai h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.65rem);
  line-height: 1.28;
  margin-bottom: 16px;
}

.page-id-service-private-ai-agent .service-cta--private-ai > p {
  max-width: 58ch;
  line-height: 1.68;
  color: #4b5568;
  margin-bottom: 24px;
}

.page-id-service-private-ai-agent .service-cta--private-ai .hero-actions {
  gap: 16px;
  flex-wrap: wrap;
}

.page-id-service-private-ai-agent .service-cta--private-ai .btn-cta-secondary-private-ai {
  background: #fff;
  color: #253044;
  border: 2px solid rgba(37, 79, 133, 0.28);
  font-weight: 600;
}

.page-id-service-private-ai-agent .service-cta--private-ai .btn-cta-secondary-private-ai:hover {
  background: rgba(37, 79, 133, 0.1);
  border-color: rgba(37, 79, 133, 0.38);
}

.page-id-service-private-ai-agent .related-pages-intro {
  margin-bottom: 18px;
  max-width: 64ch;
  line-height: 1.65;
  font-size: 0.94rem;
  color: #4b5568;
}

.page-id-service-private-ai-agent .related-pages .grid {
  gap: 18px;
  align-items: stretch;
}

.page-id-service-private-ai-agent .related-pages .related-page-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  height: 100%;
}

.page-id-service-private-ai-agent .related-pages .related-page-card-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1 1 auto;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .page-id-service-private-ai-agent main > .section:not(.related-pages) {
    padding-top: 52px;
    padding-bottom: 52px;
  }

  .page-id-service-private-ai-agent .page-hero-visual {
    min-height: 240px;
  }
}

@media (max-width: 639px) {
  .page-id-service-private-ai-agent .service-cta--private-ai .btn-primary,
  .page-id-service-private-ai-agent .service-cta--private-ai .btn-ghost {
    width: 100%;
    justify-content: center;
  }
}

/* ---- AI 文件處理 service page ---- */
.page-id-service-ai-document-processing .page-hero {
  padding: 40px 0 36px;
}

.page-id-service-ai-document-processing .page-hero-layout {
  gap: 26px;
  align-items: stretch;
}

.page-id-service-ai-document-processing .page-hero-copy h1 {
  margin-bottom: 12px;
}

.page-id-service-ai-document-processing .page-hero-copy .page-hero-subtitle {
  font-size: 1.05rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.48;
  margin: 0 0 14px;
  max-width: 56ch;
  letter-spacing: -0.01em;
}

.page-id-service-ai-document-processing .page-hero-copy .page-intro:not(.page-hero-subtitle) {
  margin: 0 0 16px;
  max-width: 54ch;
  line-height: 1.68;
  font-size: 0.97rem;
  color: #475569;
}

.page-id-service-ai-document-processing .page-hero-value-bullets {
  list-style: none;
  margin: 0 0 4px;
  padding: 16px 18px 18px;
  border-radius: 14px;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  display: grid;
  gap: 12px;
  max-width: 58ch;
}

.page-id-service-ai-document-processing .page-hero-value-bullets li {
  position: relative;
  margin: 0;
  padding-left: 1.2em;
  font-size: 0.91rem;
  font-weight: 600;
  line-height: 1.52;
  color: #334155;
}

.page-id-service-ai-document-processing .page-hero-value-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(37, 79, 133, 0.55), rgba(243, 154, 23, 0.75));
}

.page-id-service-ai-document-processing .page-hero-actions {
  margin-top: 16px;
}

.page-id-service-ai-document-processing .page-hero-actions .hero-actions {
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.page-id-service-ai-document-processing .page-hero-actions .btn-primary {
  min-width: 10rem;
  box-shadow: 0 4px 18px rgba(216, 131, 8, 0.3);
}

.page-id-service-ai-document-processing .page-hero-actions .btn-hero-dp-wf {
  font-weight: 600;
  border-width: 2px;
}

.page-id-service-ai-document-processing .page-hero-visual {
  position: relative;
  overflow: hidden;
  min-height: 280px;
  max-height: min(420px, 56vh);
  border-radius: 16px;
  border-color: rgba(37, 79, 133, 0.14);
  box-shadow: 0 16px 48px rgba(22, 30, 42, 0.12);
  padding: clamp(16px, 3vw, 24px);
}

.page-id-service-ai-document-processing .page-hero-visual-content {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: stretch;
  min-height: 100%;
}

.page-id-service-ai-document-processing .page-hero-visual-delivery-scope {
  width: 100%;
  padding: 12px 12px 4px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px);
}

.page-id-service-ai-document-processing .page-hero-visual-flow-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0 2px;
}

.page-id-service-ai-document-processing .page-hero-visual-flow-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.96);
  background: rgba(0, 0, 0, 0.26);
  border: 1px solid rgba(255, 255, 255, 0.24);
}

.page-id-service-ai-document-processing .page-hero-visual-delivery-scope-label {
  margin: 0 0 10px;
  padding: 0 6px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.9);
}

.page-id-service-ai-document-processing .page-hero-visual-delivery-scope-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.page-id-service-ai-document-processing .page-hero-visual-delivery-scope-list li {
  display: grid;
  grid-template-columns: minmax(0, 108px) minmax(0, 1fr);
  gap: 6px 12px;
  padding: 12px 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  align-items: start;
}

.page-id-service-ai-document-processing .page-hero-visual-delivery-scope-list li:first-child {
  border-top: 0;
  padding-top: 2px;
}

.page-id-service-ai-document-processing .page-hero-visual-delivery-scope-title {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 214, 170, 0.98);
  line-height: 1.35;
  margin-top: 2px;
}

.page-id-service-ai-document-processing .page-hero-visual-delivery-scope-desc {
  font-size: 0.84rem;
  line-height: 1.5;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.94);
  max-width: 40ch;
}

.page-id-service-ai-document-processing .page-hero-visual-delivery-scope-note {
  margin: 12px 8px 4px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.8rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 500;
}

.page-id-service-ai-document-processing main > .section:not(.related-pages) {
  padding-top: 60px;
  padding-bottom: 60px;
}

.page-id-service-ai-document-processing .section-document-use-cases {
  background: linear-gradient(180deg, #fbfcfe 0%, #f8fafc 100%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.page-id-service-ai-document-processing .section-document-use-cases .container > .section-intro {
  max-width: 62ch;
  margin-bottom: 22px;
  color: #526077;
  line-height: 1.65;
}

.page-id-service-ai-document-processing .section-document-use-cases .section-card {
  border-color: #d8e0ea;
  background: #fff;
  box-shadow: 0 6px 22px rgba(23, 45, 79, 0.06);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.page-id-service-ai-document-processing .section-document-use-cases .section-card:hover {
  border-color: rgba(37, 79, 133, 0.28);
  box-shadow: 0 12px 36px rgba(23, 45, 79, 0.1);
  transform: translateY(-2px);
}

.page-id-service-ai-document-processing .section-document-use-cases .section-card-icon-wrap {
  background: linear-gradient(145deg, rgba(37, 79, 133, 0.09), rgba(243, 154, 23, 0.1));
  border-radius: 12px;
  border: 1px solid rgba(37, 79, 133, 0.12);
}

.page-id-service-ai-document-processing .section-document-use-cases .section-card h3 {
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}

.page-id-service-ai-document-processing .section-document-use-cases .section-card-desc {
  line-height: 1.62;
  margin-bottom: 12px;
  color: #475569;
  flex: 1 1 auto;
}

.page-id-service-ai-document-processing .section-document-type-grid {
  align-items: stretch;
}

.page-id-service-ai-document-processing .section-document-type-grid > .section-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 22px 22px 24px;
}

.page-id-service-ai-document-processing .section-document-use-cases .section-card-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.page-id-service-ai-document-processing .section-document-use-cases .section-card-pill {
  display: inline-block;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
  color: #334155;
  background: #eef2f7;
  border: 1px solid #d6dee8;
}

.page-id-service-ai-document-processing .section-document-before-after .comparison-chips {
  margin: 6px 0 18px;
  flex-wrap: wrap;
}

.page-id-service-ai-document-processing .section-document-before-after .container > .section-intro {
  max-width: 64ch;
  margin-bottom: 14px;
  line-height: 1.65;
  color: #526077;
}

.page-id-service-ai-document-processing .section-document-before-after .table-wrap {
  margin-top: 8px;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  background: #fff;
  box-shadow: 0 8px 28px rgba(23, 45, 79, 0.06);
}

.page-id-service-ai-document-processing .section-document-before-after .comparison-table {
  margin: 0;
}

.page-id-service-ai-document-processing .section-document-before-after .comparison-table th,
.page-id-service-ai-document-processing .section-document-before-after .comparison-table td {
  padding: 14px 16px;
  vertical-align: top;
  line-height: 1.55;
  font-size: 0.92rem;
}

.page-id-service-ai-document-processing .section-document-before-after .comparison-table th {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #475569;
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
}

.page-id-service-ai-document-processing .section-document-before-after .comparison-trust-strip {
  margin-top: 16px;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(37, 79, 133, 0.07), rgba(243, 154, 23, 0.09));
  border: 1px solid rgba(37, 79, 133, 0.12);
}

.page-id-service-ai-document-processing .section-document-before-after .comparison-trust-strip .chip--trust {
  font-weight: 700;
  font-size: 0.84rem;
}

.page-id-service-ai-document-processing .section-document-review-flow {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.page-id-service-ai-document-processing .section-document-review-flow .container > .section-intro {
  max-width: 62ch;
  margin-bottom: 22px;
  line-height: 1.65;
  color: #526077;
}

.page-id-service-ai-document-processing .section-document-value-grid {
  align-items: stretch;
}

.page-id-service-ai-document-processing .section-document-value-grid > .section-card {
  padding: 26px 24px 24px;
  min-height: 100%;
}

.page-id-service-ai-document-processing .section-document-review-flow .section-card {
  border-left: 3px solid rgba(243, 154, 23, 0.45);
  border-color: #d8e0ea;
  background: #fcfdff;
  box-shadow: 0 8px 26px rgba(23, 45, 79, 0.07);
  min-height: 100%;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

.page-id-service-ai-document-processing .section-document-review-flow .section-card:hover {
  box-shadow: 0 14px 40px rgba(23, 45, 79, 0.1);
  border-color: rgba(37, 79, 133, 0.22);
}

.page-id-service-ai-document-processing .section-document-review-flow .section-card-icon-wrap {
  background: rgba(37, 79, 133, 0.07);
  border-radius: 12px;
  border: 1px solid rgba(37, 79, 133, 0.1);
}

.page-id-service-ai-document-processing .section-document-review-flow .section-card h3 {
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  color: #1e293b;
}

.page-id-service-ai-document-processing .section-document-review-flow .section-card-desc {
  line-height: 1.62;
  color: #475569;
  margin-bottom: 10px;
}

.page-id-service-ai-document-processing .section-document-review-flow .section-card-outcome {
  font-size: 0.9rem;
  line-height: 1.58;
  color: #64748b;
  margin: 0;
  padding-top: 10px;
  border-top: 1px dashed #e2e8f0;
}

.page-id-service-ai-document-processing .section-document-faq .faq-list {
  margin-top: 10px;
}

.page-id-service-ai-document-processing .section-document-faq .faq-item--accordion {
  border: 1px solid #dfe6f0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(23, 45, 79, 0.05);
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

.page-id-service-ai-document-processing .section-document-faq .faq-item--accordion + .faq-item--accordion {
  margin-top: 14px;
}

.page-id-service-ai-document-processing .section-document-faq .faq-trigger {
  padding: 20px 22px;
}

.page-id-service-ai-document-processing .section-document-faq .faq-trigger-label {
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: 0.98rem;
}

.page-id-service-ai-document-processing .section-document-faq .faq-panel-inner {
  padding: 0 22px 20px;
}

.page-id-service-ai-document-processing .section-document-faq .faq-panel-inner p {
  line-height: 1.72;
  color: #4b5568;
  font-size: 0.93rem;
  max-width: 68ch;
}

.page-id-service-ai-document-processing .section-document-faq .faq-panel-inner p + p {
  margin-top: 0.75em;
}

.page-id-service-ai-document-processing .section-document-faq .faq-item--accordion.faq-item--is-open {
  border-color: rgba(37, 79, 133, 0.22);
  box-shadow: 0 10px 32px rgba(23, 45, 79, 0.1);
}

.page-id-service-ai-document-processing .section-document-final-cta {
  padding-top: 56px;
  padding-bottom: 68px;
  background: linear-gradient(180deg, rgba(37, 79, 133, 0.06), #f3f6fa 38%);
  border-top: 1px solid var(--line);
}

.page-id-service-ai-document-processing .service-cta--document-processing {
  padding: 32px 32px 30px;
  border-radius: 18px;
  border: 1px solid rgba(37, 79, 133, 0.14);
  background: linear-gradient(155deg, #ffffff 0%, #f4f7fb 42%, #fff9f2 100%);
  box-shadow: 0 20px 52px rgba(23, 45, 79, 0.12);
}

.page-id-service-ai-document-processing .service-cta--document-processing h2 {
  font-size: clamp(1.42rem, 2.6vw, 1.68rem);
  line-height: 1.28;
  margin-bottom: 12px;
}

.page-id-service-ai-document-processing .service-cta--document-processing p {
  margin-bottom: 22px;
  line-height: 1.65;
  max-width: 60ch;
  color: #475569;
}

.page-id-service-ai-document-processing .service-cta--document-processing .hero-actions {
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.page-id-service-ai-document-processing .service-cta--document-processing .btn-primary {
  min-width: 11rem;
  box-shadow: 0 6px 20px rgba(216, 131, 8, 0.32);
}

.page-id-service-ai-document-processing .service-cta--document-processing .btn-cta-dp-secondary {
  border-width: 2px;
  font-weight: 600;
}

.page-id-service-ai-document-processing .related-pages-intro {
  max-width: 62ch;
}

@media (min-width: 900px) {
  .page-id-service-ai-document-processing .page-hero-layout {
    grid-template-columns: minmax(0, 1.12fr) minmax(340px, 0.95fr);
    gap: 32px;
  }
}

@media (max-width: 899px) {
  .page-id-service-ai-document-processing .page-hero-visual {
    min-height: 240px;
    max-height: none;
  }

  .page-id-service-ai-document-processing .page-hero-visual-delivery-scope-list li {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .page-id-service-ai-document-processing .page-hero-visual-delivery-scope-title {
    margin-bottom: 2px;
  }
}

@media (max-width: 639px) {
  .page-id-service-ai-document-processing .section-document-before-after .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .page-id-service-ai-document-processing .section-document-before-after .comparison-table {
    min-width: 560px;
  }

  .page-id-service-ai-document-processing .page-hero-actions .btn-primary,
  .page-id-service-ai-document-processing .page-hero-actions .btn-ghost {
    width: 100%;
    justify-content: center;
  }

  .page-id-service-ai-document-processing .service-cta--document-processing .btn-primary,
  .page-id-service-ai-document-processing .service-cta--document-processing .btn-ghost {
    width: 100%;
    justify-content: center;
  }
}

/* ---- Workflow Automation 服務頁 ---- */
.page-id-service-workflow-automation .page-hero {
  padding: 38px 0 34px;
}

.page-id-service-workflow-automation .page-hero-layout {
  gap: 28px;
  align-items: stretch;
}

.page-id-service-workflow-automation .page-hero-copy h1 {
  margin-bottom: 16px;
  line-height: 1.28;
}

.page-id-service-workflow-automation .page-hero-copy .page-hero-subtitle {
  font-size: 1.04rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.5;
  margin: 0 0 16px;
  max-width: 56ch;
  letter-spacing: -0.01em;
}

.page-id-service-workflow-automation .page-hero-copy .page-intro:not(.page-hero-subtitle) {
  margin: 0 0 18px;
  max-width: 54ch;
  line-height: 1.7;
  font-size: 0.96rem;
  color: #475569;
}

.page-id-service-workflow-automation .page-hero-value-bullets {
  list-style: none;
  margin: 0 0 6px;
  padding: 17px 19px 19px;
  border-radius: 14px;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
  display: grid;
  gap: 13px;
  max-width: 58ch;
}

.page-id-service-workflow-automation .page-hero-value-bullets li {
  position: relative;
  margin: 0;
  padding-left: 1.3em;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.56;
  color: #334155;
}

.page-id-service-workflow-automation .page-hero-value-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(37, 79, 133, 0.55), rgba(243, 154, 23, 0.75));
}

.page-id-service-workflow-automation .page-hero-actions {
  margin-top: 18px;
}

.page-id-service-workflow-automation .page-hero-actions .hero-actions {
  gap: 12px;
  flex-wrap: wrap;
}

.page-id-service-workflow-automation .page-hero-actions .btn-primary {
  min-height: 44px;
  min-width: 10rem;
  padding: 0.62rem 1.2rem;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(216, 131, 8, 0.28);
}

.page-id-service-workflow-automation .page-hero-actions .btn-hero-workflow-secondary {
  min-height: 44px;
  font-weight: 600;
  border-width: 2px;
  color: #1e3a5f;
  border-color: rgba(37, 79, 133, 0.35);
  background: rgba(255, 255, 255, 0.75);
}

.page-id-service-workflow-automation .page-hero-visual {
  position: relative;
  overflow: hidden;
  min-height: 280px;
  max-height: min(420px, 56vh);
  border-radius: 14px;
  border: 1px solid rgba(37, 79, 133, 0.15);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 10px 36px rgba(22, 30, 42, 0.09);
  padding: clamp(18px, 3vw, 26px);
}

.page-id-service-workflow-automation .page-hero-visual-delivery-scope {
  width: 100%;
  padding: 14px 14px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
}

.page-id-service-workflow-automation .page-hero-visual-flow-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 14px;
}

.page-id-service-workflow-automation .page-hero-visual-flow-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.96);
  background: rgba(0, 0, 0, 0.26);
  border: 1px solid rgba(255, 255, 255, 0.24);
}

.page-id-service-workflow-automation .page-hero-visual-delivery-scope-label {
  margin: 0 0 12px;
  padding: 0 4px;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.92);
}

.page-id-service-workflow-automation .page-hero-visual-delivery-scope-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-id-service-workflow-automation .page-hero-visual-delivery-scope-list li {
  display: grid;
  grid-template-columns: minmax(0, 118px) minmax(0, 1fr);
  gap: 8px 14px;
  padding: 13px 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  align-items: start;
}

.page-id-service-workflow-automation .page-hero-visual-delivery-scope-list li:first-child {
  border-top: 0;
  padding-top: 4px;
}

.page-id-service-workflow-automation .page-hero-visual-delivery-scope-title {
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 214, 170, 0.98);
  line-height: 1.4;
}

.page-id-service-workflow-automation .page-hero-visual-delivery-scope-desc {
  font-size: 0.875rem;
  line-height: 1.55;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
}

.page-id-service-workflow-automation .page-hero-visual-delivery-scope-note {
  margin: 14px 4px 2px;
  padding: 12px 6px 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.8rem;
  line-height: 1.58;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 500;
}

.page-id-service-workflow-automation main > .section:not(.related-pages) {
  padding-top: 52px;
  padding-bottom: 52px;
}

.page-id-service-workflow-automation main > .section .container > .eyebrow {
  margin-bottom: 8px;
}

.page-id-service-workflow-automation main > .section .container > h2 {
  margin-top: 0;
  margin-bottom: 10px;
  line-height: 1.3;
}

.page-id-service-workflow-automation .section-workflow-starter .container > .section-intro,
.page-id-service-workflow-automation .section-workflow-examples .container > .section-intro,
.page-id-service-workflow-automation .section-workflow-ai .container > .section-intro {
  max-width: 62ch;
  margin-bottom: 22px;
  line-height: 1.66;
  color: #526077;
}

.page-id-service-workflow-automation .section-workflow-starter {
  background: linear-gradient(180deg, #fbfcfe 0%, #f8fafc 100%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.page-id-service-workflow-automation .section-workflow-card-grid > .section-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 22px 22px 20px;
  border-radius: 14px;
  border-color: #d0dae6;
  background: #fff;
  box-shadow: 0 4px 18px rgba(23, 45, 79, 0.055);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.page-id-service-workflow-automation .section-workflow-card-grid > .section-card:hover {
  border-color: rgba(37, 79, 133, 0.24);
  box-shadow: 0 10px 28px rgba(23, 45, 79, 0.09);
  transform: translateY(-1px);
}

.page-id-service-workflow-automation .section-workflow-card-grid .section-card-icon-wrap {
  width: 48px;
  height: 48px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(37, 79, 133, 0.1), rgba(243, 154, 23, 0.1));
  border: 1px solid rgba(37, 79, 133, 0.14);
}

.page-id-service-workflow-automation .section-workflow-card-grid .section-card h3 {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  color: #0f172a;
  line-height: 1.35;
}

.page-id-service-workflow-automation .section-workflow-card-grid .section-card-desc {
  line-height: 1.66;
  color: #475569;
  margin-bottom: 12px;
  flex: 1 1 auto;
  font-size: 0.94rem;
}

.page-id-service-workflow-automation .section-workflow-card-grid .section-card-outcome {
  font-size: 0.86rem;
  line-height: 1.55;
  color: #64748b;
  margin: 0;
  padding-top: 10px;
  margin-top: auto;
  border-top: 1px dashed #d1dae5;
}

.page-id-service-workflow-automation .section-workflow-examples .section-workflow-card-grid > .section-card {
  background: #fcfdff;
}

.page-id-service-workflow-automation .section-workflow-ai {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  border-bottom: 1px solid var(--line);
}

.page-id-service-workflow-automation .section-workflow-ai-grid > .section-card {
  border-left: 3px solid rgba(243, 154, 23, 0.42);
  padding: 26px 24px 24px;
}

.page-id-service-workflow-automation .section-workflow-ai-grid .section-card-outcome {
  border-top-style: solid;
  border-color: #e2e8f0;
}

.page-id-service-workflow-automation .section-workflow-faq .faq-list {
  margin-top: 12px;
}

.page-id-service-workflow-automation .section-workflow-faq .faq-item--accordion {
  border: 1px solid #d8e2ec;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 3px 14px rgba(23, 45, 79, 0.045);
}

.page-id-service-workflow-automation .section-workflow-faq .faq-item--accordion + .faq-item--accordion {
  margin-top: 16px;
}

.page-id-service-workflow-automation .section-workflow-faq .faq-trigger {
  min-height: 52px;
  padding: 18px 24px;
}

.page-id-service-workflow-automation .section-workflow-faq .faq-trigger-label {
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.45;
  color: #1e293b;
}

.page-id-service-workflow-automation .section-workflow-faq .faq-panel-inner {
  padding: 0 24px 22px;
}

.page-id-service-workflow-automation .section-workflow-faq .faq-panel-inner p {
  line-height: 1.72;
  font-size: 0.94rem;
  color: #4b5568;
}

.page-id-service-workflow-automation .section-workflow-faq .faq-panel-inner p + p {
  margin-top: 0.85em;
}

.page-id-service-workflow-automation .section-workflow-faq .faq-item--accordion.faq-item--is-open {
  border-color: rgba(37, 79, 133, 0.2);
  box-shadow: 0 8px 28px rgba(23, 45, 79, 0.09);
}

.page-id-service-workflow-automation .section-workflow-final-cta {
  padding-top: 52px;
  padding-bottom: 64px;
  background: linear-gradient(180deg, rgba(37, 79, 133, 0.055), #f3f6fa 40%);
  border-top: 1px solid var(--line);
}

.page-id-service-workflow-automation .service-cta--workflow-auto {
  padding: 34px 34px 32px;
  border-radius: 16px;
  border: 1px solid rgba(37, 79, 133, 0.13);
  background: linear-gradient(155deg, #ffffff 0%, #f4f7fb 44%, #fff9f2 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.65) inset,
    0 14px 44px rgba(23, 45, 79, 0.11);
}

.page-id-service-workflow-automation .service-cta--workflow-auto h2 {
  font-size: clamp(1.38rem, 2.5vw, 1.62rem);
  line-height: 1.28;
  margin-bottom: 14px;
}

.page-id-service-workflow-automation .service-cta--workflow-auto p {
  margin-bottom: 24px;
  line-height: 1.68;
  max-width: 52ch;
  color: #475569;
}

.page-id-service-workflow-automation .service-cta--workflow-auto .btn-primary {
  min-height: 46px;
  min-width: 11rem;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(216, 131, 8, 0.28);
}

.page-id-service-workflow-automation .service-cta--workflow-auto .btn-cta-workflow-secondary {
  min-height: 46px;
  font-weight: 600;
  border-width: 2px;
  color: #1e3a5f;
  border-color: rgba(37, 79, 133, 0.38);
  background: rgba(255, 255, 255, 0.88);
}

.page-id-service-workflow-automation .related-pages-intro {
  max-width: 60ch;
  margin-bottom: 22px;
  line-height: 1.65;
}

.page-id-service-workflow-automation .related-pages .grid {
  align-items: stretch;
}

.page-id-service-workflow-automation .related-pages .related-page-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  height: 100%;
  padding: 22px 22px 20px;
  border-radius: 14px;
}

.page-id-service-workflow-automation .related-pages .related-page-card-icon {
  margin-bottom: 12px;
}

.page-id-service-workflow-automation .related-pages .related-page-card h3 {
  margin-bottom: 10px;
  line-height: 1.35;
  min-height: 2.65rem;
}

.page-id-service-workflow-automation .related-pages .related-page-card-desc {
  flex: 1 1 auto;
  line-height: 1.58;
  margin-bottom: 14px;
}

.page-id-service-workflow-automation .related-pages .related-page-card-foot {
  margin-top: auto;
  padding-top: 4px;
}

@media (min-width: 900px) {
  .page-id-service-workflow-automation .page-hero-layout {
    grid-template-columns: minmax(0, 1.06fr) minmax(348px, 1fr);
    gap: 34px;
  }
}

@media (max-width: 899px) {
  .page-id-service-workflow-automation main > .section:not(.related-pages) {
    padding-top: 44px;
    padding-bottom: 44px;
  }

  .page-id-service-workflow-automation .page-hero-visual {
    max-height: none;
  }

  .page-id-service-workflow-automation .page-hero-visual-delivery-scope-list li {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .page-id-service-workflow-automation .related-pages .related-page-card h3 {
    min-height: 0;
  }
}

@media (max-width: 639px) {
  .page-id-service-workflow-automation .page-hero-actions .btn-primary,
  .page-id-service-workflow-automation .page-hero-actions .btn-ghost {
    width: 100%;
    justify-content: center;
  }

  .page-id-service-workflow-automation .service-cta--workflow-auto .btn-primary,
  .page-id-service-workflow-automation .service-cta--workflow-auto .btn-ghost {
    width: 100%;
    justify-content: center;
  }
}

/* ---- Voicebot / Speech Analytics 服務頁 ---- */
/* 關閉全站 .section-card::before/::after 裝飾（與 AI Hub／知識助手頁相同），避免與真實 icon wrapper 疊成雙層 */
.page-id-service-voicebot-speech-analytics main .section:not(.related-pages) .section-card::before,
.page-id-service-voicebot-speech-analytics main .section:not(.related-pages) .section-card::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
}

.page-id-service-voicebot-speech-analytics main .section:not(.related-pages) .section-card-icon-wrap--hub svg,
.page-id-service-voicebot-speech-analytics main .section:not(.related-pages) .section-card-icon-wrap--hub svg * {
  opacity: 1;
  visibility: visible;
}

.page-id-service-voicebot-speech-analytics main .section:not(.related-pages) .section-card-icon-wrap--hub .section-card-icon-svg {
  display: block;
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  flex: 0 0 26px;
}

.page-id-service-voicebot-speech-analytics main .section:not(.related-pages) .section-card-icon-wrap--hub .section-card-icon-svg :is(path, rect, line, circle, polyline, polygon) {
  fill: none !important;
  stroke: #334155 !important;
  stroke-width: 2px;
}

.page-id-service-voicebot-speech-analytics main .section:not(.related-pages) .section-card-grid > .section-card {
  overflow: visible;
}

.page-id-service-voicebot-speech-analytics main .section:not(.related-pages) .section-card-icon-wrap--hub {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  border-radius: 12px;
  flex-shrink: 0;
  background: linear-gradient(180deg, #fffdf9 0%, #fff8f0 100%);
  border: 1px solid rgba(243, 154, 23, 0.2);
  box-shadow: none;
}

.page-id-service-voicebot-speech-analytics .section-voicebot-signal-grid .section-card-icon-wrap--hub {
  width: 40px;
  height: 40px;
  margin-bottom: 11px;
  border-radius: 11px;
}

.page-id-service-voicebot-speech-analytics .section-voicebot-signal-grid .section-card-icon-wrap--hub .section-card-icon-svg {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  flex-basis: 24px;
}

.page-id-service-voicebot-speech-analytics .related-pages .related-page-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
  border-radius: 11px;
  background: linear-gradient(180deg, #fffdf9 0%, #fff8f0 100%);
  border: 1px solid rgba(243, 154, 23, 0.2);
}

.page-id-service-voicebot-speech-analytics .related-pages .related-page-card-icon-svg {
  width: 22px;
  height: 22px;
  color: #334155;
}

.page-id-service-voicebot-speech-analytics .page-hero {
  padding: 36px 0 28px;
}

.page-id-service-voicebot-speech-analytics .page-hero-layout {
  gap: 28px;
  align-items: stretch;
}

.page-id-service-voicebot-speech-analytics .page-hero-copy h1 {
  margin-bottom: 12px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.page-id-service-voicebot-speech-analytics .page-hero-copy .page-intro {
  margin: 0 0 16px;
  max-width: 58ch;
  line-height: 1.72;
  font-size: 0.97rem;
  color: #475569;
}

.page-id-service-voicebot-speech-analytics .page-hero-value-bullets {
  list-style: none;
  margin: 0 0 8px;
  padding: 16px 18px 18px;
  border-radius: 14px;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
  display: grid;
  gap: 12px;
  max-width: 58ch;
}

.page-id-service-voicebot-speech-analytics .page-hero-value-bullets li {
  position: relative;
  margin: 0;
  padding-left: 1.25em;
  font-size: 0.91rem;
  font-weight: 600;
  line-height: 1.55;
  color: #334155;
}

.page-id-service-voicebot-speech-analytics .page-hero-value-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(37, 79, 133, 0.55), rgba(243, 154, 23, 0.75));
}

.page-id-service-voicebot-speech-analytics .page-hero-actions {
  margin-top: 18px;
}

.page-id-service-voicebot-speech-analytics .page-hero-actions .hero-actions {
  gap: 12px;
  flex-wrap: wrap;
}

.page-id-service-voicebot-speech-analytics .page-hero-actions .btn-primary {
  min-height: 44px;
  min-width: 10rem;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(216, 131, 8, 0.26);
}

.page-id-service-voicebot-speech-analytics .page-hero-actions .btn-hero-voice-secondary {
  min-height: 44px;
  font-weight: 600;
  border-width: 2px;
  color: #1e3a5f;
  border-color: rgba(37, 79, 133, 0.34);
  background: rgba(255, 255, 255, 0.82);
}

.page-id-service-voicebot-speech-analytics .page-hero-visual {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  max-height: min(440px, 58vh);
  border-radius: 14px;
  border: 1px solid rgba(37, 79, 133, 0.14);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 12px 40px rgba(22, 30, 42, 0.1);
  background:
    radial-gradient(120% 80% at 90% 10%, rgba(243, 154, 23, 0.14), transparent 52%),
    radial-gradient(90% 70% at 10% 90%, rgba(37, 79, 133, 0.2), transparent 55%),
    linear-gradient(165deg, #1a2f4d 0%, #254f85 42%, #1a2a3d 100%);
  padding: clamp(18px, 3vw, 26px);
}

.page-id-service-voicebot-speech-analytics .page-hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 32' preserveAspectRatio='none'%3E%3Cpath d='M0 16 Q15 6 30 16 T60 16 T90 16 T120 16' fill='none' stroke='rgba(255,255,255,0.07)' stroke-width='1'/%3E%3Cpath d='M0 20 Q20 10 40 20 T80 20 T120 20' fill='none' stroke='rgba(255,255,255,0.05)' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 120px 32px;
  background-position: bottom;
  opacity: 0.85;
  pointer-events: none;
}

.page-id-service-voicebot-speech-analytics .page-hero-visual-content {
  position: relative;
  z-index: 1;
}

.page-id-service-voicebot-speech-analytics .page-hero-visual-delivery-scope {
  width: 100%;
  padding: 14px 14px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px);
}

.page-id-service-voicebot-speech-analytics .page-hero-visual-flow-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 12px;
}

.page-id-service-voicebot-speech-analytics .page-hero-visual-flow-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.94);
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.page-id-service-voicebot-speech-analytics .page-hero-visual-delivery-scope-label {
  margin: 0 0 10px;
  padding: 0 4px;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.92);
}

.page-id-service-voicebot-speech-analytics .page-hero-visual-delivery-scope-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-id-service-voicebot-speech-analytics .page-hero-visual-delivery-scope-list li {
  display: grid;
  grid-template-columns: minmax(0, 128px) minmax(0, 1fr);
  gap: 8px 12px;
  padding: 11px 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.11);
  align-items: start;
}

.page-id-service-voicebot-speech-analytics .page-hero-visual-delivery-scope-list li:first-child {
  border-top: 0;
  padding-top: 2px;
}

.page-id-service-voicebot-speech-analytics .page-hero-visual-delivery-scope-title {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: rgba(255, 214, 170, 0.98);
  line-height: 1.35;
}

.page-id-service-voicebot-speech-analytics .page-hero-visual-delivery-scope-desc {
  font-size: 0.84rem;
  line-height: 1.52;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.94);
}

.page-id-service-voicebot-speech-analytics .page-hero-visual-delivery-scope-note {
  margin: 12px 4px 2px;
  padding: 11px 6px 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.78rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

.page-id-service-voicebot-speech-analytics main > .section:not(.related-pages) {
  padding-top: 48px;
  padding-bottom: 48px;
}

.page-id-service-voicebot-speech-analytics .section-voicebot-capabilities .container > .section-intro {
  max-width: 62ch;
  margin-bottom: 22px;
  line-height: 1.66;
  color: #526077;
}

.page-id-service-voicebot-speech-analytics .section-voicebot-card-grid > .section-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 22px 22px 20px;
  border-radius: 14px;
  border-color: #d0dae6;
  background: #fff;
  box-shadow: 0 4px 18px rgba(23, 45, 79, 0.05);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.page-id-service-voicebot-speech-analytics .section-voicebot-card-grid > .section-card:hover {
  border-color: rgba(37, 79, 133, 0.22);
  box-shadow: 0 10px 28px rgba(23, 45, 79, 0.085);
  transform: translateY(-1px);
}

.page-id-service-voicebot-speech-analytics .section-voicebot-card-grid .section-card h3 {
  font-size: 1.04rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  margin-bottom: 10px;
  color: #0f172a;
  line-height: 1.32;
}

.page-id-service-voicebot-speech-analytics .section-voicebot-card-grid .section-card-desc {
  line-height: 1.65;
  color: #475569;
  margin-bottom: 12px;
  flex: 1 1 auto;
  font-size: 0.93rem;
}

.page-id-service-voicebot-speech-analytics .section-voicebot-card-grid .section-card-outcome {
  font-size: 0.84rem;
  line-height: 1.52;
  color: #64748b;
  margin: 0;
  padding-top: 10px;
  margin-top: auto;
  border-top: 1px dashed #d1dae5;
}

.page-id-service-voicebot-speech-analytics .section-voicebot-prereq {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #f6f8fc 0%, #fafbfe 100%);
}

.page-id-service-voicebot-speech-analytics .section-voicebot-prereq .container > .section-intro {
  max-width: 64ch;
  margin-bottom: 24px;
  line-height: 1.68;
  color: #4b5b73;
  font-size: 0.98rem;
}

.page-id-service-voicebot-speech-analytics .section-voicebot-prereq-grid > .section-card {
  border-left: 3px solid rgba(37, 79, 133, 0.35);
  padding: 24px 22px 22px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 3px 16px rgba(23, 45, 79, 0.045);
}

.page-id-service-voicebot-speech-analytics .section-voicebot-prereq-grid .section-card-outcome {
  border-top-style: solid;
  border-color: #e5eaf0;
}

.page-id-service-voicebot-speech-analytics .section-voicebot-signals {
  padding-top: 40px;
  padding-bottom: 36px;
  background: #fbfcfe;
}

.page-id-service-voicebot-speech-analytics .section-voicebot-signals .container > .section-intro {
  max-width: 58ch;
  margin-bottom: 18px;
  color: #5a6b82;
  line-height: 1.62;
}

.page-id-service-voicebot-speech-analytics .section-voicebot-signal-grid > .section-card {
  padding: 18px 18px 17px;
  min-height: auto;
  border-radius: 12px;
  border: 1px solid #dce4ee;
  background: #fff;
  box-shadow: 0 2px 12px rgba(23, 45, 79, 0.04);
}

.page-id-service-voicebot-speech-analytics .section-voicebot-signal-grid .section-card h3 {
  font-size: 0.95rem;
  font-weight: 800;
  margin-bottom: 8px;
  line-height: 1.38;
}

.page-id-service-voicebot-speech-analytics .section-voicebot-signal-grid .section-card-desc {
  font-size: 0.88rem;
  line-height: 1.58;
  margin: 0;
  color: #5b6575;
}

.page-id-service-voicebot-speech-analytics .section-voicebot-final-cta {
  padding-top: 44px;
  padding-bottom: 56px;
  background: linear-gradient(180deg, rgba(243, 154, 23, 0.06), #f3f6fa 38%);
  border-top: 1px solid var(--line);
}

.page-id-service-voicebot-speech-analytics .service-cta--voicebot {
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(37, 79, 133, 0.12);
  background: linear-gradient(152deg, #ffffff 0%, #f6f8fc 45%, #fff9f1 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.65) inset,
    0 14px 42px rgba(23, 45, 79, 0.1);
}

.page-id-service-voicebot-speech-analytics .service-cta--layout-split {
  padding: 0;
}

.page-id-service-voicebot-speech-analytics .service-cta-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px 36px;
  align-items: center;
  padding: 30px 32px 32px;
}

.page-id-service-voicebot-speech-analytics .service-cta-split-copy h2 {
  font-size: clamp(1.28rem, 2.4vw, 1.55rem);
  line-height: 1.28;
  margin: 10px 0 14px;
  color: #0f172a;
}

.page-id-service-voicebot-speech-analytics .service-cta-split-copy p:not(.eyebrow) {
  margin: 0;
  line-height: 1.68;
  max-width: 52ch;
  color: #475569;
  font-size: 0.97rem;
}

.page-id-service-voicebot-speech-analytics .service-cta-split-actions .hero-actions {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.page-id-service-voicebot-speech-analytics .service-cta-split-actions .btn-primary {
  min-width: 11.5rem;
  min-height: 46px;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(216, 131, 8, 0.28);
}

.page-id-service-voicebot-speech-analytics .service-cta-split-actions .btn-cta-voice-secondary {
  min-height: 46px;
  font-weight: 600;
  border-width: 2px;
  color: #1e3a5f;
  border-color: rgba(37, 79, 133, 0.36);
  background: rgba(255, 255, 255, 0.9);
}

.page-id-service-voicebot-speech-analytics .related-pages-intro {
  max-width: 58ch;
  margin-bottom: 20px;
  line-height: 1.62;
  color: #526077;
}

.page-id-service-voicebot-speech-analytics .related-pages .related-page-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  height: 100%;
}

.page-id-service-voicebot-speech-analytics .related-pages .related-page-card-desc {
  flex: 1 1 auto;
  line-height: 1.55;
}

.page-id-service-voicebot-speech-analytics .related-pages .related-page-card-foot {
  margin-top: auto;
}

@media (min-width: 900px) {
  .page-id-service-voicebot-speech-analytics .page-hero-layout {
    grid-template-columns: minmax(0, 1.05fr) minmax(340px, 1fr);
    gap: 32px;
  }
}

@media (max-width: 899px) {
  .page-id-service-voicebot-speech-analytics .page-hero-visual {
    max-height: none;
  }

  .page-id-service-voicebot-speech-analytics .page-hero-visual-delivery-scope-list li {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .page-id-service-voicebot-speech-analytics .service-cta-split {
    grid-template-columns: 1fr;
    padding: 26px 22px 28px;
  }

  .page-id-service-voicebot-speech-analytics .service-cta-split-actions .hero-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

@media (max-width: 639px) {
  .page-id-service-voicebot-speech-analytics .page-hero-actions .btn-primary,
  .page-id-service-voicebot-speech-analytics .page-hero-actions .btn-ghost {
    width: 100%;
    justify-content: center;
  }

  .page-id-service-voicebot-speech-analytics .service-cta-split-actions .btn-primary,
  .page-id-service-voicebot-speech-analytics .service-cta-split-actions .btn-ghost {
    width: 100%;
    justify-content: center;
  }

  .page-id-service-voicebot-speech-analytics .section-voicebot-signal-grid.grid-4 {
    grid-template-columns: 1fr;
  }
}

/* ---- 數碼營運與推廣支援 ---- */
.page-id-service-digital-operations main .section:not(.related-pages) .section-card::before,
.page-id-service-digital-operations main .section:not(.related-pages) .section-card::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
}

.page-id-service-digital-operations main .section:not(.related-pages) .section-card-icon-wrap--hub svg,
.page-id-service-digital-operations main .section:not(.related-pages) .section-card-icon-wrap--hub svg * {
  opacity: 1;
  visibility: visible;
}

.page-id-service-digital-operations main .section:not(.related-pages) .section-card-icon-wrap--hub .section-card-icon-svg {
  display: block;
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  flex: 0 0 26px;
}

.page-id-service-digital-operations main .section:not(.related-pages) .section-card-icon-wrap--hub .section-card-icon-svg :is(path, rect, line, circle, polyline, polygon) {
  fill: none !important;
  stroke: #334155 !important;
  stroke-width: 2px;
}

.page-id-service-digital-operations main .section:not(.related-pages) .section-card-grid > .section-card {
  overflow: visible;
}

.page-id-service-digital-operations main .section:not(.related-pages) .section-card-icon-wrap--hub {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  border-radius: 12px;
  flex-shrink: 0;
  background: linear-gradient(180deg, #fffdf9 0%, #fff8f0 100%);
  border: 1px solid rgba(243, 154, 23, 0.2);
  box-shadow: none;
}

.page-id-service-digital-operations .page-hero {
  padding: 38px 0 30px;
}

.page-id-service-digital-operations .page-hero-layout {
  gap: 30px;
  align-items: stretch;
}

.page-id-service-digital-operations .page-hero-copy h1 {
  margin-bottom: 10px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.page-id-service-digital-operations .page-hero-copy .page-hero-subtitle {
  font-size: 1.02rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.55;
  margin: 0 0 14px;
  max-width: 56ch;
}

.page-id-service-digital-operations .page-hero-copy .page-intro:not(.page-hero-subtitle) {
  margin: 0 0 16px;
  max-width: 58ch;
  line-height: 1.72;
  font-size: 0.96rem;
  color: #475569;
}

.page-id-service-digital-operations .page-hero-value-bullets {
  list-style: none;
  margin: 0 0 8px;
  padding: 16px 18px 18px;
  border-radius: 14px;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
  display: grid;
  gap: 11px;
  max-width: 58ch;
}

.page-id-service-digital-operations .page-hero-value-bullets li {
  position: relative;
  margin: 0;
  padding-left: 1.2em;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.52;
  color: #334155;
}

.page-id-service-digital-operations .page-hero-value-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.48em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(37, 79, 133, 0.55), rgba(243, 154, 23, 0.75));
}

.page-id-service-digital-operations .page-hero-actions {
  margin-top: 18px;
}

.page-id-service-digital-operations .page-hero-actions .hero-actions {
  gap: 12px;
  flex-wrap: wrap;
}

.page-id-service-digital-operations .page-hero-actions .btn-primary {
  min-height: 44px;
  min-width: 10rem;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(216, 131, 8, 0.26);
}

.page-id-service-digital-operations .page-hero-actions .btn-hero-digital-ops-secondary {
  min-height: 44px;
  font-weight: 600;
  border-width: 2px;
  color: #1e3a5f;
  border-color: rgba(37, 79, 133, 0.34);
  background: rgba(255, 255, 255, 0.88);
}

.page-id-service-digital-operations .page-hero-visual {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  max-height: min(420px, 56vh);
  border-radius: 14px;
  border: 1px solid rgba(37, 79, 133, 0.14);
  box-shadow: 0 12px 40px rgba(22, 30, 42, 0.09);
  background:
    radial-gradient(100% 80% at 85% 0%, rgba(243, 154, 23, 0.12), transparent 50%),
    radial-gradient(80% 60% at 15% 100%, rgba(37, 79, 133, 0.18), transparent 55%),
    linear-gradient(160deg, #1e3a52 0%, #2d5a87 48%, #1a2838 100%);
  padding: clamp(18px, 3vw, 26px);
}

.page-id-service-digital-operations .page-hero-visual-content {
  position: relative;
  z-index: 1;
}

.page-id-service-digital-operations .page-hero-visual-delivery-scope {
  width: 100%;
  padding: 14px 14px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px);
}

.page-id-service-digital-operations .page-hero-visual-flow-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 12px;
}

.page-id-service-digital-operations .page-hero-visual-flow-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.95);
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.page-id-service-digital-operations .page-hero-visual-delivery-scope-label {
  margin: 0 0 10px;
  padding: 0 4px;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.94);
}

.page-id-service-digital-operations .page-hero-visual-delivery-scope-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-id-service-digital-operations .page-hero-visual-delivery-scope-list li {
  display: grid;
  grid-template-columns: minmax(0, 100px) minmax(0, 1fr);
  gap: 8px 12px;
  padding: 11px 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.11);
  align-items: start;
}

.page-id-service-digital-operations .page-hero-visual-delivery-scope-list li:first-child {
  border-top: 0;
  padding-top: 2px;
}

.page-id-service-digital-operations .page-hero-visual-delivery-scope-title {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: rgba(255, 214, 170, 0.98);
  line-height: 1.35;
}

.page-id-service-digital-operations .page-hero-visual-delivery-scope-desc {
  font-size: 0.84rem;
  line-height: 1.52;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.94);
}

.page-id-service-digital-operations .page-hero-visual-delivery-scope-note {
  margin: 12px 4px 2px;
  padding: 11px 6px 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.78rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 500;
}

.page-id-service-digital-operations main > .section:not(.related-pages) {
  padding-top: 48px;
  padding-bottom: 48px;
}

.page-id-service-digital-operations .section-digital-ops-scope .container > .section-intro {
  max-width: 62ch;
  margin-bottom: 22px;
  line-height: 1.66;
  color: #526077;
}

.page-id-service-digital-operations .section-digital-ops-scope-grid > .section-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 22px 20px 20px;
  border-radius: 14px;
  border: 1px solid #d0dae6;
  background: #fff;
  box-shadow: 0 4px 18px rgba(23, 45, 79, 0.05);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.page-id-service-digital-operations .section-digital-ops-scope-grid > .section-card:hover {
  border-color: rgba(37, 79, 133, 0.2);
  box-shadow: 0 10px 26px rgba(23, 45, 79, 0.08);
  transform: translateY(-1px);
}

.page-id-service-digital-operations .section-digital-ops-scope-grid .section-card h3 {
  font-size: 1.03rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  margin-bottom: 8px;
  color: #0f172a;
  line-height: 1.32;
}

.page-id-service-digital-operations .section-digital-ops-scope-grid .section-card-desc {
  line-height: 1.62;
  color: #475569;
  margin-bottom: 10px;
  flex: 1 1 auto;
  font-size: 0.92rem;
}

.page-id-service-digital-operations .section-digital-ops-scope-grid .section-card-bullet-list {
  margin: 0;
  padding: 0 0 0 1.15em;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #5b6575;
}

.page-id-service-digital-operations .section-digital-ops-scope-grid .section-card-bullet-list li + li {
  margin-top: 5px;
}

.page-id-service-digital-operations .section-digital-ops-value {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #f5f7fb 0%, #fafcfe 100%);
}

.page-id-service-digital-operations .section-digital-ops-value .container > .section-intro {
  max-width: 64ch;
  margin-bottom: 22px;
  line-height: 1.68;
  color: #4b5b73;
  font-size: 0.97rem;
}

.page-id-service-digital-operations .section-digital-ops-value-grid > .section-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 22px 20px 20px;
  border-radius: 14px;
  border: 1px solid #c9d4e2;
  background: linear-gradient(180deg, #ffffff 0%, #f9fbfe 100%);
  box-shadow: 0 2px 14px rgba(23, 45, 79, 0.04);
  border-left: 3px solid rgba(37, 79, 133, 0.28);
}

.page-id-service-digital-operations .section-digital-ops-value-grid > .section-card:hover {
  border-color: rgba(37, 79, 133, 0.22);
  box-shadow: 0 8px 24px rgba(23, 45, 79, 0.07);
}

.page-id-service-digital-operations .section-digital-ops-value-grid .section-card-icon-wrap--hub {
  background: linear-gradient(180deg, #fff 0%, #f3f6fa 100%);
  border-color: rgba(37, 79, 133, 0.16);
}

.page-id-service-digital-operations .section-digital-ops-value-grid .section-card h3 {
  font-size: 1.02rem;
  font-weight: 800;
  margin-bottom: 8px;
  color: #0f172a;
}

.page-id-service-digital-operations .section-digital-ops-value-grid .section-card-desc {
  font-size: 0.91rem;
  line-height: 1.62;
  color: #475569;
  margin-bottom: 10px;
  flex: 1 1 auto;
}

.page-id-service-digital-operations .section-digital-ops-value-grid .section-card-bullet-list {
  margin: 0;
  padding: 0 0 0 1.15em;
  font-size: 0.81rem;
  line-height: 1.48;
  color: #5c6675;
}

.page-id-service-digital-operations .section-digital-ops-value-grid .section-card-bullet-list li + li {
  margin-top: 4px;
}

.page-id-service-digital-operations .section-digital-ops-faq {
  background: #fbfcfe;
}

.page-id-service-digital-operations .section-digital-ops-faq .container > h2 {
  margin-bottom: 8px;
}

.page-id-service-digital-operations .section-digital-ops-faq .faq-list {
  margin-top: 14px;
}

.page-id-service-digital-operations .section-digital-ops-faq .faq-item--accordion {
  border: 1px solid #d5dfea;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(23, 45, 79, 0.04);
}

.page-id-service-digital-operations .section-digital-ops-faq .faq-item--accordion + .faq-item--accordion {
  margin-top: 14px;
}

.page-id-service-digital-operations .section-digital-ops-faq .faq-trigger {
  min-height: 52px;
  padding: 16px 20px;
}

.page-id-service-digital-operations .section-digital-ops-faq .faq-trigger-label {
  font-weight: 800;
  font-size: 0.98rem;
  line-height: 1.45;
  color: #1e293b;
}

.page-id-service-digital-operations .section-digital-ops-faq .faq-panel-inner {
  padding: 0 20px 18px;
}

.page-id-service-digital-operations .section-digital-ops-faq .faq-panel-inner p {
  line-height: 1.7;
  font-size: 0.93rem;
  color: #4b5568;
}

.page-id-service-digital-operations .section-digital-ops-faq .faq-panel-inner p + p {
  margin-top: 0.75em;
}

.page-id-service-digital-operations .section-digital-ops-faq .faq-item--accordion.faq-item--is-open {
  border-color: rgba(37, 79, 133, 0.2);
  box-shadow: 0 8px 26px rgba(23, 45, 79, 0.08);
}

.page-id-service-digital-operations .section-digital-ops-final-cta {
  padding-top: 44px;
  padding-bottom: 56px;
  background: linear-gradient(180deg, rgba(243, 154, 23, 0.07), #f3f6fa 40%);
  border-top: 1px solid var(--line);
}

.page-id-service-digital-operations .service-cta--digital-ops {
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(37, 79, 133, 0.12);
  background: linear-gradient(152deg, #ffffff 0%, #f6f8fc 46%, #fff9f1 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.65) inset,
    0 14px 40px rgba(23, 45, 79, 0.09);
}

.page-id-service-digital-operations .service-cta--layout-split {
  padding: 0;
}

.page-id-service-digital-operations .service-cta-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px 36px;
  align-items: center;
  padding: 28px 30px 30px;
}

.page-id-service-digital-operations .service-cta-split-copy h2 {
  font-size: clamp(1.28rem, 2.3vw, 1.52rem);
  line-height: 1.28;
  margin: 10px 0 12px;
  color: #0f172a;
}

.page-id-service-digital-operations .service-cta-split-copy p:not(.eyebrow) {
  margin: 0;
  line-height: 1.68;
  max-width: 52ch;
  color: #475569;
  font-size: 0.96rem;
}

.page-id-service-digital-operations .service-cta-split-actions .hero-actions {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.page-id-service-digital-operations .service-cta-split-actions .btn-primary {
  min-width: 11rem;
  min-height: 46px;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(216, 131, 8, 0.27);
}

.page-id-service-digital-operations .service-cta-split-actions .btn-cta-digital-ops-secondary {
  min-height: 46px;
  font-weight: 600;
  border-width: 2px;
  color: #1e3a5f;
  border-color: rgba(37, 79, 133, 0.36);
  background: rgba(255, 255, 255, 0.92);
}

.page-id-service-digital-operations .related-pages-intro {
  max-width: 60ch;
  margin-bottom: 20px;
  line-height: 1.62;
  color: #526077;
}

.page-id-service-digital-operations .related-pages .related-page-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  height: 100%;
  padding: 22px 20px 20px;
  border-radius: 14px;
  border: 1px solid #d8e2ec;
  box-shadow: 0 3px 14px rgba(23, 45, 79, 0.045);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.page-id-service-digital-operations .related-pages .related-page-card:hover {
  border-color: rgba(37, 79, 133, 0.2);
  box-shadow: 0 10px 28px rgba(23, 45, 79, 0.08);
}

.page-id-service-digital-operations .related-pages .related-page-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
  border-radius: 11px;
  background: linear-gradient(180deg, #fffdf9 0%, #fff8f0 100%);
  border: 1px solid rgba(243, 154, 23, 0.2);
}

.page-id-service-digital-operations .related-pages .related-page-card-eyebrow {
  font-weight: 800;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 6px;
}

.page-id-service-digital-operations .related-pages .related-page-card h3 {
  font-size: 1.05rem;
  font-weight: 800;
  margin-bottom: 10px;
  line-height: 1.32;
  color: #0f172a;
}

.page-id-service-digital-operations .related-pages .related-page-card-desc {
  flex: 1 1 auto;
  line-height: 1.55;
  font-size: 0.9rem;
  color: #4b5568;
  margin-bottom: 14px;
}

.page-id-service-digital-operations .related-pages .related-page-card-foot {
  margin-top: auto;
}

.page-id-service-digital-operations .related-pages .related-page-link {
  font-weight: 700;
}

@media (min-width: 900px) {
  .page-id-service-digital-operations .page-hero-layout {
    grid-template-columns: minmax(0, 1.06fr) minmax(340px, 1fr);
    gap: 34px;
  }
}

@media (max-width: 899px) {
  .page-id-service-digital-operations .page-hero-visual {
    max-height: none;
  }

  .page-id-service-digital-operations .page-hero-visual-delivery-scope-list li {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .page-id-service-digital-operations .service-cta-split {
    grid-template-columns: 1fr;
    padding: 24px 20px 26px;
  }

  .page-id-service-digital-operations .service-cta-split-actions .hero-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

@media (max-width: 639px) {
  .page-id-service-digital-operations .page-hero-actions .btn-primary,
  .page-id-service-digital-operations .page-hero-actions .btn-ghost {
    width: 100%;
    justify-content: center;
  }

  .page-id-service-digital-operations .service-cta-split-actions .btn-primary,
  .page-id-service-digital-operations .service-cta-split-actions .btn-ghost {
    width: 100%;
    justify-content: center;
  }
}

/* ---- 行業方案總覽 /industries/ ---- */
.page-id-industries main {
  padding-bottom: 8px;
}

.page-id-industries .page-hero {
  position: relative;
  padding: 36px 0 32px;
  background:
    radial-gradient(90% 55% at 12% 8%, rgba(243, 154, 23, 0.09), transparent 52%),
    radial-gradient(70% 50% at 88% 0%, rgba(37, 79, 133, 0.07), transparent 48%),
    linear-gradient(180deg, #fbfcfe 0%, #f6f8fc 100%);
  border-bottom: 1px solid var(--line);
}

.page-id-industries .page-hero-layout {
  gap: 28px;
  align-items: stretch;
}

.page-id-industries .breadcrumbs {
  margin-bottom: 10px;
  font-size: 0.86rem;
}

.page-id-industries .page-hero-copy .eyebrow {
  margin-bottom: 8px;
}

.page-id-industries .page-hero-copy h1 {
  margin-bottom: 10px;
  line-height: 1.22;
  letter-spacing: -0.02em;
}

.page-id-industries .page-hero-copy .page-hero-subtitle {
  font-size: 1.02rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.55;
  margin: 0 0 14px;
  max-width: 56ch;
}

.page-id-industries .page-hero-copy .page-intro:not(.page-hero-subtitle) {
  margin: 0 0 18px;
  max-width: 58ch;
  line-height: 1.72;
  font-size: 0.96rem;
  color: #475569;
}

.page-id-industries .page-hero-actions {
  margin-top: 6px;
}

.page-id-industries .page-hero-actions .hero-actions {
  gap: 12px;
  flex-wrap: wrap;
}

.page-id-industries .page-hero-actions .btn-primary {
  min-height: 44px;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(216, 131, 8, 0.24);
}

.page-id-industries .page-hero-actions .btn-hero-industries-secondary {
  min-height: 44px;
  font-weight: 600;
  border-width: 2px;
  color: #1e3a5f;
  border-color: rgba(37, 79, 133, 0.34);
  background: rgba(255, 255, 255, 0.9);
}

.page-id-industries .page-hero-visual {
  border-radius: 14px;
  border: 1px solid rgba(37, 79, 133, 0.14);
  box-shadow: 0 12px 38px rgba(22, 30, 42, 0.09);
  min-height: 280px;
  max-height: min(400px, 54vh);
  overflow: hidden;
  background:
    radial-gradient(100% 70% at 90% 10%, rgba(243, 154, 23, 0.11), transparent 50%),
    linear-gradient(155deg, #1a2f4a 0%, #2a5282 45%, #1a2533 100%);
  padding: clamp(16px, 2.8vw, 24px);
}

.page-id-industries .page-hero-visual-delivery-scope {
  padding: 14px 14px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px);
}

.page-id-industries .page-hero-visual-flow-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 12px;
}

.page-id-industries .page-hero-visual-flow-chip {
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.95);
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.page-id-industries .page-hero-visual-delivery-scope-label {
  margin: 0 0 10px;
  font-size: 0.8125rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.94);
}

.page-id-industries .page-hero-visual-delivery-scope-list li {
  display: grid;
  grid-template-columns: minmax(0, 132px) minmax(0, 1fr);
  gap: 8px 12px;
  padding: 10px 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  align-items: start;
}

.page-id-industries .page-hero-visual-delivery-scope-list li:first-child {
  border-top: 0;
  padding-top: 2px;
}

.page-id-industries .page-hero-visual-delivery-scope-title {
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: rgba(255, 214, 170, 0.98);
  line-height: 1.35;
}

.page-id-industries .page-hero-visual-delivery-scope-desc {
  font-size: 0.84rem;
  line-height: 1.52;
  color: rgba(255, 255, 255, 0.94);
}

.page-id-industries .page-hero-visual-delivery-scope-note {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.78rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
}

.page-id-industries .section-industries-directory {
  padding-top: 44px;
  padding-bottom: 40px;
}

.page-id-industries .section-industries-directory .container > .section-intro {
  max-width: 62ch;
  margin-bottom: 20px;
  line-height: 1.65;
  color: #526077;
}

.page-id-industries main .section-industries-directory .section-card::before,
.page-id-industries main .section-industries-directory .section-card::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
}

.page-id-industries .section-industries-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  align-items: stretch;
  margin-top: 6px;
}

.page-id-industries .section-industries-grid > .section-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
  padding: 22px 20px 20px;
  border-radius: 14px;
  border: 1px solid #d0dae6;
  background: #fff;
  box-shadow: 0 4px 16px rgba(23, 45, 79, 0.045);
  overflow: visible;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.page-id-industries .section-industries-grid > .section-card:hover {
  border-color: rgba(37, 79, 133, 0.22);
  box-shadow: 0 12px 32px rgba(23, 45, 79, 0.09);
  transform: translateY(-2px);
}

.page-id-industries .section-industries-grid .section-card:focus-within {
  outline: none;
  border-color: rgba(37, 79, 133, 0.35);
  box-shadow: 0 0 0 3px rgba(37, 79, 133, 0.12);
}

.page-id-industries .section-card-icon-wrap--industry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, #fffdf9 0%, #fff8f0 100%);
  border: 1px solid rgba(243, 154, 23, 0.22);
  color: #334155;
}

.page-id-industries .section-card-icon-wrap--industry .industry-icon-svg {
  display: block;
  width: 28px;
  height: 28px;
}

.page-id-industries .section-industries-grid .section-card h3 {
  font-size: 1.06rem;
  font-weight: 800;
  margin-bottom: 10px;
  line-height: 1.3;
  color: #0f172a;
}

.page-id-industries .section-industries-grid .section-card-desc {
  flex: 1 1 auto;
  line-height: 1.62;
  font-size: 0.92rem;
  color: #475569;
  margin-bottom: 14px;
}

.page-id-industries .section-industries-grid .section-card-cta-line {
  margin-top: auto;
  margin-bottom: 0;
}

.page-id-industries .section-industries-grid .section-card-cta-line .sector-link {
  font-weight: 700;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.15s ease, transform 0.15s ease;
}

.page-id-industries .section-industries-grid .section-card-cta-line .sector-link:hover {
  color: var(--brand-dark);
  text-decoration: none;
  transform: translateX(2px);
}

.page-id-industries .section-industries-grid .section-card-cta-line .sector-link:focus-visible {
  outline: 2px solid rgba(37, 79, 133, 0.45);
  outline-offset: 3px;
  border-radius: 4px;
}

.page-id-industries .section-industries-comparison {
  padding-top: 48px;
  padding-bottom: 48px;
}

.page-id-industries .section-industries-comparison .container > .section-intro {
  max-width: 64ch;
  margin-bottom: 18px;
  line-height: 1.66;
  color: #4b5b73;
  font-size: 0.96rem;
}

.page-id-industries .table-wrap--industries {
  margin-top: 8px;
  border-radius: 14px;
  border: 1px solid #d5dee9;
  background: linear-gradient(180deg, #ffffff 0%, #f9fbfd 100%);
  box-shadow: 0 4px 20px rgba(23, 45, 79, 0.05);
  padding: 4px;
  overflow: hidden;
}

.page-id-industries .comparison-table--industries {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: 0.92rem;
}

.page-id-industries .comparison-table--industries thead th {
  text-align: left;
  padding: 14px 16px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5c6778;
  background: rgba(37, 79, 133, 0.06);
  border-bottom: 1px solid #e2e8f0;
}

.page-id-industries .comparison-table--industries tbody td {
  padding: 14px 16px;
  vertical-align: top;
  border-bottom: 1px solid #edf1f7;
  line-height: 1.55;
  color: #3d4a5c;
}

.page-id-industries .comparison-table--industries tbody tr:last-child td {
  border-bottom: none;
}

.page-id-industries .comparison-table--industries tbody td:first-child {
  font-weight: 700;
  color: #1e293b;
}

.page-id-industries .comparison-service-link {
  font-weight: 700;
  color: var(--brand-dark);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.page-id-industries .comparison-service-link:hover {
  text-decoration: underline;
}

.page-id-industries .comparison-service-link:focus-visible {
  outline: 2px solid rgba(37, 79, 133, 0.45);
  outline-offset: 3px;
  border-radius: 4px;
}

.page-id-industries .section-industries-cta {
  padding-top: 44px;
  padding-bottom: 52px;
  background: linear-gradient(180deg, rgba(243, 154, 23, 0.06), #f1f5f9 42%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.page-id-industries .service-cta--industries-hub {
  border-radius: 16px;
  border: 1px solid rgba(37, 79, 133, 0.12);
  background: linear-gradient(152deg, #ffffff 0%, #f6f8fc 48%, #fff9f1 100%);
  box-shadow: 0 12px 40px rgba(23, 45, 79, 0.08);
  overflow: hidden;
}

.page-id-industries .service-cta-split {
  padding: 26px 28px 24px;
  gap: 28px 40px;
}

.page-id-industries .service-cta-split-copy h2 {
  font-size: clamp(1.25rem, 2.2vw, 1.48rem);
  line-height: 1.28;
  margin: 8px 0 12px;
}

.page-id-industries .service-cta-split-copy p:not(.eyebrow) {
  line-height: 1.68;
  color: #475569;
  max-width: 52ch;
}

.page-id-industries .service-cta-split-note {
  margin: 16px 28px 22px;
  padding-top: 14px;
  border-top: 1px solid rgba(37, 79, 133, 0.1);
  font-size: 0.86rem;
  color: #64748b;
  line-height: 1.55;
}

.page-id-industries .service-cta-split-actions .btn-primary {
  min-width: 10.5rem;
  min-height: 46px;
  font-weight: 700;
}

.page-id-industries .service-cta-split-actions .btn-cta-industries-secondary {
  min-height: 46px;
  font-weight: 600;
  border-width: 2px;
}

.page-id-industries .related-pages {
  padding-top: 40px;
  padding-bottom: 48px;
}

.page-id-industries .related-pages .related-pages-intro {
  max-width: 58ch;
  font-size: 0.92rem;
  color: #5c6675;
}

.page-id-industries .industries-related-grid {
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.page-id-industries .related-pages .related-page-card {
  padding: 16px 16px 15px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #fafcfe;
  box-shadow: 0 2px 10px rgba(23, 45, 79, 0.035);
}

.page-id-industries .related-pages .related-page-card h3 {
  font-size: 0.95rem;
  font-weight: 800;
  margin-bottom: 8px;
}

.page-id-industries .related-pages .related-page-card-desc {
  font-size: 0.84rem;
  line-height: 1.5;
  color: #5b6575;
}

.page-id-industries .related-pages .related-page-link {
  font-size: 0.86rem;
  font-weight: 700;
}

@media (min-width: 900px) {
  .page-id-industries .page-hero-layout {
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr);
    gap: 32px;
  }
}

@media (max-width: 899px) {
  .page-id-industries .page-hero-visual {
    max-height: none;
  }

  .page-id-industries .page-hero-visual-delivery-scope-list li {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .page-id-industries .service-cta-split {
    grid-template-columns: 1fr;
    padding: 22px 20px 18px;
  }
}

@media (max-width: 719px) {
  .page-id-industries .table-wrap--industries {
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
  }

  .page-id-industries .comparison-table--industries thead {
    display: none;
  }

  .page-id-industries .comparison-table--industries tbody tr {
    display: block;
    margin-bottom: 14px;
    padding: 14px 14px 12px;
    border-radius: 12px;
    border: 1px solid #d8e2ec;
    background: #fff;
    box-shadow: 0 2px 12px rgba(23, 45, 79, 0.04);
  }

  .page-id-industries .comparison-table--industries tbody td {
    display: block;
    width: 100% !important;
    padding: 8px 0;
    border: none;
  }

  .page-id-industries .comparison-table--industries tbody td + td {
    border-top: 1px dashed #e5eaf0;
  }

  .page-id-industries .comparison-table--industries tbody td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 4px;
  }
}

@media (max-width: 639px) {
  .page-id-industries .page-hero-actions .btn-primary,
  .page-id-industries .page-hero-actions .btn-ghost {
    width: 100%;
    justify-content: center;
  }

  .page-id-industries .service-cta-split-actions .btn-primary,
  .page-id-industries .service-cta-split-actions .btn-ghost {
    width: 100%;
    justify-content: center;
  }
}

/* ---- 教育機構行業頁 industry-education ---- */
.page-id-industry-education main .section:not(.related-pages) .section-card::before,
.page-id-industry-education main .section:not(.related-pages) .section-card::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
}

.page-id-industry-education main .section {
  padding-top: clamp(2.5rem, 5vw, 3.75rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.75rem);
}

.page-id-industry-education main .section .container > h2 {
  max-width: 680px;
}

.page-id-industry-education main .section .section-intro {
  max-width: 680px;
  line-height: 1.6;
}

.page-id-industry-education .page-hero-copy .page-hero-subtitle {
  font-size: 1.02rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.55;
  margin: 0 0 14px;
  max-width: 680px;
}

.page-id-industry-education .page-hero-copy .page-intro:not(.page-hero-subtitle) {
  margin: 0 0 18px;
  max-width: 680px;
  line-height: 1.6;
  font-size: 0.96rem;
  color: #475569;
}

.page-id-industry-education .page-hero-value-bullets {
  margin: 0 0 22px;
  padding-left: 1.15em;
  max-width: 680px;
  line-height: 1.6;
}

.page-id-industry-education .page-hero-value-bullets li {
  margin-bottom: 0.45em;
}

.page-id-industry-education .page-hero-value-bullets li::marker {
  color: var(--brand-primary);
}

.page-id-industry-education .page-hero-actions {
  margin-top: 8px;
}

.page-id-industry-education .page-hero-actions .hero-actions {
  gap: 12px;
  flex-wrap: wrap;
}

.page-id-industry-education .page-hero-actions .btn-primary {
  min-height: 44px;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(216, 131, 8, 0.24);
}

.page-id-industry-education .page-hero-actions .btn-hero-education-secondary {
  min-height: 44px;
  font-weight: 600;
  border-width: 2px;
  color: #1e3a5f;
  border-color: rgba(37, 79, 133, 0.34);
  background: rgba(255, 255, 255, 0.9);
}

.page-id-industry-education .section-education-scenario-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: max(16px, 1.1rem);
}

.page-id-industry-education .section-education-needs .section-card {
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
  border: 1px solid var(--line);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.page-id-industry-education .section-education-needs .section-card:hover {
  border-color: rgba(243, 154, 23, 0.45);
  box-shadow: 0 10px 28px rgba(22, 30, 42, 0.08);
  transform: translateY(-2px);
}

.page-id-industry-education .section-education-needs .section-card-desc,
.page-id-industry-education .section-education-needs .section-card h3 {
  max-width: 680px;
}

.page-id-industry-education .section-education-needs .section-card-desc {
  line-height: 1.6;
}

.page-id-industry-education .section-education-needs .section-card-outcome {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.55;
}

.page-id-industry-education .section-education-challenges-grid {
  gap: max(16px, 1.1rem);
}

.page-id-industry-education .section-alt.section-education-challenges .section-card {
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--line);
}

.page-id-industry-education .section-education-challenges .section-card-desc,
.page-id-industry-education .section-education-challenges .section-card-outcome {
  line-height: 1.6;
  max-width: 680px;
}

.page-id-industry-education .section-education-challenges .section-card-outcome {
  margin-top: 6px;
  font-size: 0.95rem;
  color: var(--muted);
}

.page-id-industry-education .faq-panel-inner p {
  line-height: 1.6;
  max-width: 680px;
}

.page-id-industry-education .faq-panel-inner p + p {
  margin-top: 0.4em;
}

.page-id-industry-education .section-industry-education-prefooter-cta .service-cta--industry-education-prefooter {
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
}

.page-id-industry-education .section-industry-education-prefooter-cta .service-cta-split-copy p:not(.eyebrow) {
  max-width: 680px;
  line-height: 1.6;
}

.page-id-industry-education .section-industry-education-prefooter-cta .service-cta-split-actions .hero-actions {
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
}

.page-id-industry-education .related-pages .related-page-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  transition: color 0.2s ease;
}

.page-id-industry-education .related-pages .related-page-link::after {
  content: "→";
  font-size: 0.95em;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.page-id-industry-education .related-pages .related-page-link:hover::after,
.page-id-industry-education .related-pages .related-page-link:focus-visible::after {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 639px) {
  .page-id-industry-education .section-education-challenges-grid.grid-4 {
    grid-template-columns: 1fr;
  }

  .page-id-industry-education .page-hero-actions .btn-primary,
  .page-id-industry-education .page-hero-actions .btn-ghost {
    width: 100%;
    justify-content: center;
  }

  .page-id-industry-education .section-industry-education-prefooter-cta .service-cta-split-actions .btn-primary,
  .page-id-industry-education .section-industry-education-prefooter-cta .service-cta-split-actions .btn-ghost {
    width: 100%;
    justify-content: center;
  }
}

/* ---- NGO 行業頁 industry-ngo ---- */
.page-id-industry-ngo .page-hero {
  position: relative;
  padding: 36px 0 32px;
  background:
    radial-gradient(90% 55% at 12% 8%, rgba(243, 154, 23, 0.09), transparent 52%),
    radial-gradient(70% 50% at 88% 0%, rgba(37, 79, 133, 0.07), transparent 48%),
    linear-gradient(180deg, #fbfcfe 0%, #f6f8fc 100%);
  border-bottom: 1px solid var(--line);
}

.page-id-industry-ngo .page-hero-layout {
  gap: 28px;
  align-items: stretch;
}

.page-id-industry-ngo .page-hero-copy .eyebrow {
  margin-bottom: 8px;
}

.page-id-industry-ngo .page-hero-copy h1 {
  margin-bottom: 10px;
  line-height: 1.22;
  letter-spacing: -0.02em;
}

.page-id-industry-ngo .page-hero-copy .page-intro {
  margin: 0 0 16px;
  max-width: 680px;
  line-height: 1.65;
  font-size: 0.96rem;
  color: #475569;
}

.page-id-industry-ngo .page-hero-value-bullets {
  margin: 0 0 22px;
  padding-left: 1.15em;
  max-width: 680px;
  line-height: 1.6;
}

.page-id-industry-ngo .page-hero-value-bullets li {
  margin-bottom: 0.45em;
}

.page-id-industry-ngo .page-hero-value-bullets li::marker {
  color: var(--brand-primary);
}

.page-id-industry-ngo .page-hero-actions {
  margin-top: 6px;
}

.page-id-industry-ngo .page-hero-actions .hero-actions {
  gap: 12px;
  flex-wrap: wrap;
}

.page-id-industry-ngo .page-hero-actions .btn-primary {
  min-height: 44px;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(216, 131, 8, 0.24);
}

.page-id-industry-ngo .page-hero-actions .btn-hero-ngo-secondary {
  min-height: 44px;
  font-weight: 600;
  border-width: 2px;
  color: #1e3a5f;
  border-color: rgba(37, 79, 133, 0.34);
  background: rgba(255, 255, 255, 0.9);
}

.page-id-industry-ngo .page-hero-visual {
  border-radius: 14px;
  border: 1px solid rgba(37, 79, 133, 0.14);
  box-shadow: 0 12px 38px rgba(22, 30, 42, 0.09);
  min-height: 280px;
  max-height: min(420px, 56vh);
  overflow: hidden;
  overflow-y: auto;
  background:
    radial-gradient(100% 70% at 90% 10%, rgba(243, 154, 23, 0.11), transparent 50%),
    linear-gradient(155deg, #1a2f4a 0%, #2a5282 45%, #1a2533 100%);
  padding: clamp(16px, 2.8vw, 24px);
}

.page-id-industry-ngo .page-hero-visual-delivery-scope {
  padding: 14px 14px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px);
}

.page-id-industry-ngo .page-hero-visual-flow-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 12px;
}

.page-id-industry-ngo .page-hero-visual-flow-chip {
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.95);
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.page-id-industry-ngo .page-hero-visual-delivery-scope-label {
  margin: 0 0 10px;
  font-size: 0.8125rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.94);
}

.page-id-industry-ngo .page-hero-visual-delivery-scope-list li {
  display: grid;
  grid-template-columns: minmax(0, 132px) minmax(0, 1fr);
  gap: 8px 12px;
  padding: 10px 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  align-items: start;
}

.page-id-industry-ngo .page-hero-visual-delivery-scope-list li:first-child {
  border-top: 0;
  padding-top: 2px;
}

.page-id-industry-ngo .page-hero-visual-delivery-scope-title {
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: rgba(255, 214, 170, 0.98);
  line-height: 1.35;
}

.page-id-industry-ngo .page-hero-visual-delivery-scope-desc {
  font-size: 0.84rem;
  line-height: 1.52;
  color: rgba(255, 255, 255, 0.94);
}

.page-id-industry-ngo .page-hero-visual-delivery-scope-note {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.78rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
}

.page-id-industry-ngo main .section:not(.related-pages) .section-card::before,
.page-id-industry-ngo main .section:not(.related-pages) .section-card::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
}

.page-id-industry-ngo main .section {
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.page-id-industry-ngo .section-ngo-needs .container > h2,
.page-id-industry-ngo .section-ngo-delivery .container > h2,
.page-id-industry-ngo .section-ngo-faq .container > h2 {
  max-width: 680px;
}

.page-id-industry-ngo .section-ngo-needs .section-intro,
.page-id-industry-ngo .section-ngo-delivery .section-intro {
  max-width: 680px;
  line-height: 1.65;
  color: #526077;
}

.page-id-industry-ngo .section-ngo-needs-grid {
  align-items: stretch;
  gap: max(16px, 1.1rem);
}

.page-id-industry-ngo .section-ngo-needs-grid > .section-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
  padding: 22px 20px 20px;
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.page-id-industry-ngo .section-ngo-needs-grid > .section-card:hover {
  border-color: rgba(243, 154, 23, 0.4);
  box-shadow: 0 10px 26px rgba(22, 30, 42, 0.08);
  transform: translateY(-2px);
}

.page-id-industry-ngo .section-ngo-needs-grid .section-card-desc {
  flex: 1 1 auto;
  line-height: 1.6;
  margin: 0;
}

.page-id-industry-ngo .section-ngo-needs-grid .section-card h3 {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #1a2332;
}

.page-id-industry-ngo .section-ngo-delivery-grid {
  align-items: stretch;
  gap: max(16px, 1.1rem);
}

.page-id-industry-ngo .section-ngo-delivery-grid > .section-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 22px 20px 20px;
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
  background: rgba(255, 255, 255, 0.92);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.page-id-industry-ngo .section-alt.section-ngo-delivery .section-ngo-delivery-grid > .section-card:hover {
  border-color: rgba(37, 79, 133, 0.2);
  box-shadow: 0 8px 24px rgba(22, 30, 42, 0.07);
}

.page-id-industry-ngo .section-ngo-delivery-grid .section-card-desc {
  flex: 1 1 auto;
  line-height: 1.6;
}

.page-id-industry-ngo .section-ngo-delivery-grid .section-card h3 {
  font-size: 1.05rem;
  font-weight: 800;
}

.page-id-industry-ngo .section-ngo-mid-cta .service-cta--ngo-mid {
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(37, 79, 133, 0.1);
}

.page-id-industry-ngo .section-ngo-mid-cta .service-cta-split-copy p:not(.eyebrow) {
  max-width: 680px;
  line-height: 1.65;
}

.page-id-industry-ngo .section-ngo-mid-cta .service-cta-split-actions .hero-actions {
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
}

.page-id-industry-ngo .section-ngo-faq {
  padding-top: clamp(3rem, 6vw, 4rem);
}

.page-id-industry-ngo .faq-list--ngo .faq-trigger-label {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.page-id-industry-ngo .faq-list--ngo .faq-panel-inner p {
  line-height: 1.68;
}

.page-id-industry-ngo .faq-list--ngo .faq-panel-inner p + p {
  margin-top: 0.55em;
}

.page-id-industry-ngo .related-pages {
  padding-top: clamp(2.75rem, 5vw, 3.75rem);
}

.page-id-industry-ngo .related-pages .related-page-card {
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.page-id-industry-ngo .related-pages .related-page-card:hover {
  border-color: rgba(243, 154, 23, 0.35);
  box-shadow: 0 10px 28px rgba(22, 30, 42, 0.08);
  transform: translateY(-2px);
}

.page-id-industry-ngo .related-pages .related-page-card h3 {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #1a2332;
}

.page-id-industry-ngo .related-pages .related-page-card-desc {
  -webkit-line-clamp: 3;
  line-height: 1.58;
}

@media (max-width: 979px) {
  .page-id-industry-ngo .section-ngo-needs-grid.grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 639px) {
  .page-id-industry-ngo .section-ngo-needs-grid.grid-4 {
    grid-template-columns: 1fr;
  }

  .page-id-industry-ngo .section-ngo-delivery-grid.grid-3 {
    grid-template-columns: 1fr;
  }

  .page-id-industry-ngo .page-hero-actions .btn-primary,
  .page-id-industry-ngo .page-hero-actions .btn-ghost {
    width: 100%;
    justify-content: center;
  }

  .page-id-industry-ngo .section-ngo-mid-cta .service-cta-split-actions .btn-primary,
  .page-id-industry-ngo .section-ngo-mid-cta .service-cta-split-actions .btn-ghost {
    width: 100%;
    justify-content: center;
  }
}

/* ---- 醫療及專業服務行業頁 industry-medical ---- */
.page-id-industry-medical .page-hero {
  position: relative;
  padding: 28px 0 24px;
  background:
    radial-gradient(90% 55% at 12% 8%, rgba(243, 154, 23, 0.07), transparent 52%),
    radial-gradient(70% 50% at 88% 0%, rgba(37, 79, 133, 0.06), transparent 48%),
    linear-gradient(180deg, #fbfcfe 0%, #f6f8fc 100%);
  border-bottom: 1px solid var(--line);
}

.page-id-industry-medical .page-hero-layout {
  gap: 16px;
  align-items: start;
}

.page-id-industry-medical .page-hero-copy .breadcrumbs {
  margin-bottom: 6px;
  font-size: 0.82rem;
}

.page-id-industry-medical .page-hero-copy .eyebrow {
  margin-bottom: 4px;
}

.page-id-industry-medical .page-hero-copy h1 {
  margin-bottom: 6px;
  line-height: 1.18;
  letter-spacing: -0.02em;
  font-size: clamp(1.38rem, calc(1.08rem + 0.85vw), 1.78rem);
}

.page-id-industry-medical .page-hero-copy .page-intro {
  margin: 0 0 10px;
  max-width: 38rem;
  line-height: 1.55;
  font-size: 0.93rem;
  color: #475569;
}

.page-id-industry-medical .page-hero-value-bullets {
  margin: 0 0 12px;
  padding-left: 1.1em;
  max-width: 38rem;
  line-height: 1.4;
  font-size: 0.89rem;
}

.page-id-industry-medical .page-hero-value-bullets li {
  margin-bottom: 0.28em;
}

.page-id-industry-medical .page-hero-value-bullets li::marker {
  color: var(--brand-primary);
}

.page-id-industry-medical .page-hero-actions {
  margin-top: 0;
}

.page-id-industry-medical .page-hero-actions .hero-actions {
  gap: 10px;
  flex-wrap: wrap;
}

.page-id-industry-medical .page-hero-actions .btn-primary {
  min-height: 40px;
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(216, 131, 8, 0.2);
}

.page-id-industry-medical .page-hero-actions .btn-hero-medical-secondary {
  min-height: 40px;
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
  font-weight: 600;
  border-width: 2px;
  color: #1e3a5f;
  border-color: rgba(37, 79, 133, 0.34);
  background: rgba(255, 255, 255, 0.92);
}

.page-id-industry-medical .page-hero-visual {
  border-radius: 12px;
  border: 1px solid rgba(37, 79, 133, 0.12);
  box-shadow: 0 8px 28px rgba(22, 30, 42, 0.07);
  min-height: 0;
  max-height: min(248px, 38vh);
  overflow-x: hidden;
  overflow-y: auto;
  background:
    radial-gradient(100% 65% at 92% 8%, rgba(37, 79, 133, 0.14), transparent 52%),
    linear-gradient(152deg, #1a2c42 0%, #2a4a6e 42%, #1e2835 100%);
  padding: 11px 12px 10px;
}

.page-id-industry-medical .page-hero-visual-delivery-scope {
  padding: 9px 10px 7px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
}

.page-id-industry-medical .page-hero-visual-flow-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0 0 6px;
}

.page-id-industry-medical .page-hero-visual-flow-chip {
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.95);
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.page-id-industry-medical .page-hero-visual-delivery-scope-label {
  margin: 0 0 5px;
  font-size: 0.75rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.94);
}

.page-id-industry-medical .page-hero-visual-delivery-scope-list li {
  display: grid;
  grid-template-columns: minmax(0, 118px) minmax(0, 1fr);
  gap: 5px 10px;
  padding: 6px 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  align-items: start;
}

.page-id-industry-medical .page-hero-visual-delivery-scope-list li:first-child {
  border-top: 0;
  padding-top: 0;
}

.page-id-industry-medical .page-hero-visual-delivery-scope-title {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: rgba(200, 220, 245, 0.98);
  line-height: 1.3;
}

.page-id-industry-medical .page-hero-visual-delivery-scope-desc {
  font-size: 0.76rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
}

.page-id-industry-medical .page-hero-visual-delivery-scope-note {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.72rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
}

@media (min-width: 980px) {
  .page-id-industry-medical .page-hero {
    padding: 16px 0 12px;
  }

  .page-id-industry-medical .page-hero-layout {
    grid-template-columns: minmax(0, 1.42fr) minmax(240px, 0.58fr);
    gap: 18px;
  }

  .page-id-industry-medical .page-hero-copy {
    padding-right: 8px;
  }

  .page-id-industry-medical .page-hero-visual {
    max-height: min(232px, 34vh);
  }
}

@media (max-width: 979px) {
  .page-id-industry-medical .page-hero-visual {
    max-height: none;
  }
}

.page-id-industry-medical main .section:not(.related-pages) .section-card::before,
.page-id-industry-medical main .section:not(.related-pages) .section-card::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
}

.page-id-industry-medical main .section {
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.page-id-industry-medical main .section.section-medical-directions {
  padding-top: clamp(1.25rem, 2.5vw, 2rem);
  padding-bottom: clamp(2rem, 4vw, 2.75rem);
}

.page-id-industry-medical .section-medical-directions .container > h2,
.page-id-industry-medical .section-medical-principles .container > h2,
.page-id-industry-medical .section-medical-trust-strip .container > h2,
.page-id-industry-medical .section-medical-faq .container > h2 {
  max-width: 680px;
  letter-spacing: -0.02em;
}

.page-id-industry-medical .section-medical-directions .section-intro,
.page-id-industry-medical .section-medical-principles .section-intro,
.page-id-industry-medical .section-medical-trust-strip .section-intro {
  max-width: 680px;
  line-height: 1.65;
  color: #526077;
}

.page-id-industry-medical .section-medical-directions-grid {
  align-items: stretch;
  gap: max(16px, 1.1rem);
}

.page-id-industry-medical .section-medical-directions-grid > .section-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
  padding: 22px 20px 20px;
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.035);
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.page-id-industry-medical .section-medical-directions-grid > .section-card:hover {
  border-color: rgba(37, 79, 133, 0.22);
  box-shadow: 0 10px 26px rgba(22, 30, 42, 0.07);
  transform: translateY(-2px);
}

.page-id-industry-medical .section-medical-directions .section-card-micro-label {
  display: inline-block;
  margin: 0 0 8px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #3d4f66;
  background: rgba(37, 79, 133, 0.06);
  border: 1px solid rgba(37, 79, 133, 0.1);
}

.page-id-industry-medical .section-medical-directions .section-card h3 {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #1a2332;
  margin-bottom: 8px;
}

.page-id-industry-medical .section-medical-directions .section-card-desc {
  flex: 1 1 auto;
  line-height: 1.62;
  margin: 0;
  max-width: 42em;
  color: #475569;
}

.page-id-industry-medical .section-medical-principles-grid {
  align-items: stretch;
  gap: max(16px, 1.1rem);
}

.page-id-industry-medical .section-alt.section-medical-principles .section-medical-principles-grid > .section-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 22px 20px 20px;
  border-radius: 12px;
  border: 1px solid rgba(37, 79, 133, 0.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
  background: rgba(255, 255, 255, 0.94);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.page-id-industry-medical .section-medical-principles .section-card:hover {
  border-color: rgba(37, 79, 133, 0.18);
  box-shadow: 0 8px 24px rgba(22, 30, 42, 0.06);
}

.page-id-industry-medical .section-medical-principles .section-card h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: #1a2332;
}

.page-id-industry-medical .section-medical-principles .section-card-desc {
  flex: 1 1 auto;
  line-height: 1.65;
  color: #475569;
}

.page-id-industry-medical .section-medical-trust-strip {
  padding-top: clamp(2rem, 4vw, 2.75rem);
  padding-bottom: clamp(2rem, 4vw, 2.75rem);
}

.page-id-industry-medical .section-medical-trust-strip .case-study-bullet-list {
  margin-top: 14px;
  max-width: 720px;
  padding: 18px 20px 18px 26px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.03);
}

.page-id-industry-medical .section-medical-trust-strip .case-study-bullet-list li {
  padding-left: 4px;
  line-height: 1.62;
  color: #3d4a5c;
}

.page-id-industry-medical .section-medical-trust-strip .case-study-bullet-list li + li {
  margin-top: 0.5em;
}

.page-id-industry-medical .section-medical-trust-strip .case-study-bullet-list li::marker {
  color: rgba(37, 79, 133, 0.55);
}

.page-id-industry-medical .section-medical-prefooter-cta .service-cta--medical-prefooter {
  border-radius: 12px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.045);
  border: 1px solid rgba(37, 79, 133, 0.1);
}

.page-id-industry-medical .section-medical-prefooter-cta .service-cta-split-copy p:not(.eyebrow) {
  max-width: 640px;
  line-height: 1.65;
  color: #475569;
}

.page-id-industry-medical .section-medical-prefooter-cta .service-cta-split-actions .hero-actions {
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
}

.page-id-industry-medical .section-medical-faq {
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
}

.page-id-industry-medical .faq-list--medical .faq-item {
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

.page-id-industry-medical .faq-list--medical .faq-item + .faq-item {
  margin-top: 10px;
}

.page-id-industry-medical .faq-list--medical .faq-trigger-label {
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #1a2332;
}

.page-id-industry-medical .faq-list--medical .faq-panel-inner {
  padding-top: 0;
  padding-bottom: 16px;
}

.page-id-industry-medical .faq-list--medical .faq-panel-inner p {
  line-height: 1.68;
  color: #3d4a5c;
}

.page-id-industry-medical .faq-list--medical .faq-panel-inner p + p {
  margin-top: 0.55em;
}

.page-id-industry-medical .related-pages {
  padding-top: clamp(2.75rem, 5vw, 3.75rem);
}

.page-id-industry-medical .related-pages .related-page-card {
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.page-id-industry-medical .related-pages .related-page-card:hover {
  border-color: rgba(37, 79, 133, 0.22);
  box-shadow: 0 10px 28px rgba(22, 30, 42, 0.08);
  transform: translateY(-2px);
}

.page-id-industry-medical .related-pages .related-page-card h3 {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #1a2332;
}

.page-id-industry-medical .related-pages .related-page-card-desc {
  -webkit-line-clamp: 3;
  line-height: 1.58;
}

.page-id-industry-medical .related-pages .related-page-card-foot {
  margin-top: 14px;
}

.page-id-industry-medical .related-pages .related-page-link {
  font-size: 0.94rem;
}

@media (max-width: 979px) {
  .page-id-industry-medical .section-medical-directions-grid.grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 639px) {
  .page-id-industry-medical .section-medical-directions-grid.grid-4 {
    grid-template-columns: 1fr;
  }

  .page-id-industry-medical .section-medical-principles-grid.grid-3 {
    grid-template-columns: 1fr;
  }

  .page-id-industry-medical .page-hero-actions .btn-primary,
  .page-id-industry-medical .page-hero-actions .btn-ghost {
    width: 100%;
    justify-content: center;
  }

  .page-id-industry-medical .section-medical-prefooter-cta .service-cta-split-actions .btn-primary,
  .page-id-industry-medical .section-medical-prefooter-cta .service-cta-split-actions .btn-ghost {
    width: 100%;
    justify-content: center;
  }
}

/* ---- 上市公司及企業行業頁 industry-listed-corporate ---- */
.page-id-industry-listed-corporate .page-hero {
  position: relative;
  padding: 28px 0 24px;
  background:
    radial-gradient(90% 50% at 10% 0%, rgba(37, 79, 133, 0.07), transparent 50%),
    radial-gradient(65% 45% at 92% 5%, rgba(243, 154, 23, 0.06), transparent 48%),
    linear-gradient(180deg, #fbfcfe 0%, #f5f7fb 100%);
  border-bottom: 1px solid var(--line);
}

.page-id-industry-listed-corporate .page-hero-layout {
  gap: 20px;
  align-items: start;
}

.page-id-industry-listed-corporate .page-hero-copy .breadcrumbs {
  margin-bottom: 6px;
  font-size: 0.82rem;
}

.page-id-industry-listed-corporate .page-hero-copy .eyebrow {
  margin-bottom: 5px;
}

.page-id-industry-listed-corporate .page-hero-copy h1 {
  margin-bottom: 8px;
  line-height: 1.18;
  letter-spacing: -0.02em;
  font-size: clamp(1.38rem, calc(1.05rem + 0.9vw), 1.78rem);
}

.page-id-industry-listed-corporate .page-hero-copy .page-intro {
  margin: 0 0 12px;
  max-width: 40rem;
  line-height: 1.65;
  font-size: 0.94rem;
  color: #475569;
}

.page-id-industry-listed-corporate .page-hero-value-bullets {
  margin: 0 0 14px;
  padding-left: 1.1em;
  max-width: 40rem;
  line-height: 1.5;
  font-size: 0.9rem;
}

.page-id-industry-listed-corporate .page-hero-value-bullets li {
  margin-bottom: 0.32em;
}

.page-id-industry-listed-corporate .page-hero-value-bullets li::marker {
  color: var(--brand-primary);
}

.page-id-industry-listed-corporate .page-intro-extra {
  margin: 0 0 14px;
  max-width: 40rem;
  font-size: 0.86rem;
  line-height: 1.55;
  color: #64748b;
}

.page-id-industry-listed-corporate .page-hero-actions {
  margin-top: 0;
}

.page-id-industry-listed-corporate .page-hero-actions .hero-actions {
  gap: 10px;
  flex-wrap: wrap;
}

.page-id-industry-listed-corporate .page-hero-actions .btn-primary {
  min-height: 42px;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(216, 131, 8, 0.2);
}

.page-id-industry-listed-corporate .page-hero-actions .btn-hero-listed-secondary {
  min-height: 42px;
  font-weight: 600;
  border-width: 2px;
  color: #1e3a5f;
  border-color: rgba(37, 79, 133, 0.34);
  background: rgba(255, 255, 255, 0.92);
}

/* Hero visual：精簡摘要卡、禁止內部捲動（不靠 max-height + overflow-y 截斷） */
.page-id-industry-listed-corporate .page-hero-visual {
  border-radius: 12px;
  border: 1px solid rgba(37, 79, 133, 0.12);
  box-shadow: 0 10px 28px rgba(22, 30, 42, 0.07);
  min-width: 0;
  min-height: 0;
  align-self: start;
  overflow: visible;
  overflow-x: hidden;
  background:
    radial-gradient(90% 55% at 100% 0%, rgba(37, 79, 133, 0.18), transparent 55%),
    linear-gradient(155deg, #1a2433 0%, #243652 40%, #1a1f28 100%);
  padding: 9px 11px 8px;
}

.page-id-industry-listed-corporate .page-hero-visual-delivery-scope {
  padding: 7px 8px 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
}

.page-id-industry-listed-corporate .page-hero-visual-flow-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 5px;
}

.page-id-industry-listed-corporate .page-hero-visual-flow-chip {
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.54rem;
  font-weight: 800;
  letter-spacing: 0.035em;
  color: rgba(255, 255, 255, 0.94);
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.16);
  line-height: 1.2;
}

.page-id-industry-listed-corporate .page-hero-visual-delivery-scope-label {
  margin: 0 0 4px;
  font-size: 0.72rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.94);
  line-height: 1.25;
}

.page-id-industry-listed-corporate .page-hero-visual-delivery-scope-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-id-industry-listed-corporate .page-hero-visual-delivery-scope-list li {
  display: grid;
  grid-template-columns: minmax(0, 120px) minmax(0, 1fr);
  gap: 4px 9px;
  padding: 5px 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  align-items: start;
}

.page-id-industry-listed-corporate .page-hero-visual-delivery-scope-list li:first-child {
  border-top: 0;
  padding-top: 0;
}

.page-id-industry-listed-corporate .page-hero-visual-delivery-scope-title {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.035em;
  color: rgba(210, 225, 250, 0.98);
  line-height: 1.25;
}

.page-id-industry-listed-corporate .page-hero-visual-delivery-scope-desc {
  font-size: 0.72rem;
  line-height: 1.34;
  color: rgba(255, 255, 255, 0.91);
}

.page-id-industry-listed-corporate .page-hero-visual-delivery-scope-note {
  margin-top: 6px;
  padding: 6px 2px 1px;
  margin-bottom: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.11);
  font-size: 0.67rem;
  line-height: 1.38;
  color: rgba(255, 255, 255, 0.76);
}

@media (min-width: 980px) {
  .page-id-industry-listed-corporate .page-hero {
    padding: 20px 0 18px;
  }

  .page-id-industry-listed-corporate .page-hero-layout {
    grid-template-columns: minmax(0, 1.28fr) minmax(288px, 0.72fr);
    gap: 20px;
  }

  .page-id-industry-listed-corporate .page-hero-copy {
    padding-right: 8px;
    max-width: min(36rem, 100%);
  }
}

@media (max-width: 979px) {
  .page-id-industry-listed-corporate .page-hero-visual {
    overflow: visible;
    overflow-x: hidden;
  }
}

.page-id-industry-listed-corporate main .section:not(.related-pages) .section-card::before,
.page-id-industry-listed-corporate main .section:not(.related-pages) .section-card::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
}

.page-id-industry-listed-corporate main .section {
  padding-top: clamp(2.25rem, 4.5vw, 3rem);
  padding-bottom: clamp(2.25rem, 4.5vw, 3rem);
}

.page-id-industry-listed-corporate main .section.section-listed-directions {
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
}

.page-id-industry-listed-corporate .section-listed-directions .container > h2,
.page-id-industry-listed-corporate .section-listed-delivery .container > h2,
.page-id-industry-listed-corporate .section-listed-trust-strip .container > h2,
.page-id-industry-listed-corporate .section-listed-faq .container > h2 {
  max-width: 680px;
  letter-spacing: -0.02em;
}

.page-id-industry-listed-corporate .section-listed-directions .section-intro,
.page-id-industry-listed-corporate .section-listed-delivery .section-intro,
.page-id-industry-listed-corporate .section-listed-trust-strip .section-intro {
  max-width: 680px;
  line-height: 1.65;
  color: #526077;
}

.page-id-industry-listed-corporate .section-listed-directions-grid {
  align-items: stretch;
  gap: max(16px, 1rem);
}

.page-id-industry-listed-corporate .section-listed-directions-grid > .section-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px 18px 18px;
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.035);
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.page-id-industry-listed-corporate .section-listed-directions-grid > .section-card:hover {
  border-color: rgba(37, 79, 133, 0.2);
  box-shadow: 0 10px 26px rgba(22, 30, 42, 0.07);
  transform: translateY(-2px);
}

.page-id-industry-listed-corporate .section-listed-directions .section-card-micro-label {
  display: inline-block;
  margin: 0 0 7px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #3d4f66;
  background: rgba(37, 79, 133, 0.06);
  border: 1px solid rgba(37, 79, 133, 0.1);
}

.page-id-industry-listed-corporate .section-listed-directions .section-card h3 {
  font-size: 1.04rem;
  font-weight: 800;
  color: #1a2332;
  margin-bottom: 8px;
}

.page-id-industry-listed-corporate .section-listed-directions .section-card-desc {
  line-height: 1.6;
  color: #475569;
  margin-bottom: 10px;
}

.page-id-industry-listed-corporate .section-listed-directions .section-card-bullet-list {
  margin: 0;
  padding-left: 1.15em;
  font-size: 0.88rem;
  line-height: 1.52;
  color: #526077;
}

.page-id-industry-listed-corporate .section-listed-directions .section-card-bullet-list li + li {
  margin-top: 0.35em;
}

.page-id-industry-listed-corporate .section-listed-delivery-grid {
  align-items: stretch;
  gap: max(16px, 1rem);
}

.page-id-industry-listed-corporate .section-alt.section-listed-delivery .section-listed-delivery-grid > .section-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px 18px 18px;
  border-radius: 12px;
  border: 1px solid rgba(37, 79, 133, 0.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
  background: rgba(255, 255, 255, 0.95);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.page-id-industry-listed-corporate .section-listed-delivery .section-card:hover {
  border-color: rgba(37, 79, 133, 0.18);
  box-shadow: 0 8px 24px rgba(22, 30, 42, 0.06);
}

.page-id-industry-listed-corporate .section-listed-delivery .section-card h3 {
  font-size: 1.04rem;
  font-weight: 800;
  color: #1a2332;
}

.page-id-industry-listed-corporate .section-listed-delivery .section-card-desc {
  flex: 1 1 auto;
  line-height: 1.62;
  color: #475569;
}

.page-id-industry-listed-corporate .section-listed-delivery .section-card-outcome {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px dashed var(--line);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.5;
  color: #334155;
}

.page-id-industry-listed-corporate .section-listed-trust-strip .case-study-bullet-list {
  margin-top: 12px;
  max-width: 720px;
  padding: 16px 18px 16px 24px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.03);
}

.page-id-industry-listed-corporate .section-listed-trust-strip .case-study-bullet-list li {
  line-height: 1.58;
  color: #3d4a5c;
}

.page-id-industry-listed-corporate .section-listed-trust-strip .case-study-bullet-list li + li {
  margin-top: 0.45em;
}

.page-id-industry-listed-corporate .section-listed-prefooter-cta .service-cta--listed-prefooter {
  border-radius: 12px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.045);
  border: 1px solid rgba(37, 79, 133, 0.1);
}

.page-id-industry-listed-corporate .section-listed-prefooter-cta .service-cta-split-copy p:not(.eyebrow) {
  max-width: 640px;
  line-height: 1.65;
  color: #475569;
}

.page-id-industry-listed-corporate .section-listed-prefooter-cta .service-cta-split-actions .hero-actions {
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
}

.page-id-industry-listed-corporate .section-listed-faq {
  padding-top: clamp(2rem, 4vw, 2.75rem);
}

.page-id-industry-listed-corporate .faq-list--listed .faq-item {
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
}

.page-id-industry-listed-corporate .faq-list--listed .faq-item + .faq-item {
  margin-top: 10px;
}

.page-id-industry-listed-corporate .faq-list--listed .faq-trigger-label {
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #1a2332;
}

.page-id-industry-listed-corporate .faq-list--listed .faq-panel-inner p {
  line-height: 1.7;
  color: #3d4a5c;
}

.page-id-industry-listed-corporate .faq-list--listed .faq-panel-inner p + p {
  margin-top: 0.55em;
}

.page-id-industry-listed-corporate .related-pages {
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
}

.page-id-industry-listed-corporate .related-pages .related-page-card {
  border-radius: 12px;
  border: 1px solid rgba(37, 79, 133, 0.1) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.page-id-industry-listed-corporate .related-pages .related-page-card--action {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
  border-color: rgba(37, 79, 133, 0.1) !important;
}

.page-id-industry-listed-corporate .related-pages .related-page-card:hover {
  border-color: rgba(37, 79, 133, 0.22) !important;
  box-shadow: 0 10px 28px rgba(22, 30, 42, 0.08);
  transform: translateY(-2px);
}

.page-id-industry-listed-corporate .related-pages .related-page-card h3 {
  font-size: 1.04rem;
  font-weight: 800;
  color: #1a2332;
}

.page-id-industry-listed-corporate .related-pages .related-page-card-desc {
  -webkit-line-clamp: 3;
  line-height: 1.55;
}

.page-id-industry-listed-corporate .related-pages .related-page-card-foot {
  margin-top: 12px;
}

@media (max-width: 979px) {
  .page-id-industry-listed-corporate .section-listed-directions-grid.grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 639px) {
  .page-id-industry-listed-corporate .section-listed-directions-grid.grid-4 {
    grid-template-columns: 1fr;
  }

  .page-id-industry-listed-corporate .section-listed-delivery-grid.grid-3 {
    grid-template-columns: 1fr;
  }

  .page-id-industry-listed-corporate .page-hero-actions .btn-primary,
  .page-id-industry-listed-corporate .page-hero-actions .btn-ghost {
    width: 100%;
    justify-content: center;
  }

  .page-id-industry-listed-corporate .section-listed-prefooter-cta .service-cta-split-actions .btn-primary,
  .page-id-industry-listed-corporate .section-listed-prefooter-cta .service-cta-split-actions .btn-ghost {
    width: 100%;
    justify-content: center;
  }
}

/* ---- 教會及相關機構行業頁 industry-church ---- */
.page-id-industry-church .page-hero {
  position: relative;
  padding: 28px 0 24px;
  background:
    radial-gradient(90% 55% at 10% 10%, rgba(243, 154, 23, 0.06), transparent 52%),
    radial-gradient(65% 48% at 92% 0%, rgba(37, 79, 133, 0.05), transparent 48%),
    linear-gradient(180deg, #fbfcfe 0%, #f5f7fb 100%);
  border-bottom: 1px solid var(--line);
}

.page-id-industry-church .page-hero-layout {
  gap: 18px;
  align-items: start;
}

.page-id-industry-church .page-hero-copy .breadcrumbs {
  margin-bottom: 6px;
  font-size: 0.82rem;
}

.page-id-industry-church .page-hero-copy .eyebrow {
  margin-bottom: 4px;
}

.page-id-industry-church .page-hero-copy h1 {
  margin-bottom: 8px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-size: clamp(1.38rem, calc(1.08rem + 0.85vw), 1.82rem);
}

.page-id-industry-church .page-hero-copy .page-intro {
  margin: 0 0 10px;
  max-width: 40rem;
  line-height: 1.58;
  font-size: 0.94rem;
  color: #475569;
}

.page-id-industry-church .page-hero-value-bullets {
  margin: 0 0 12px;
  padding-left: 1.15em;
  max-width: 40rem;
  line-height: 1.48;
  font-size: 0.9rem;
  color: #3d4a5c;
}

.page-id-industry-church .page-hero-value-bullets li {
  margin-bottom: 0.32em;
}

.page-id-industry-church .page-hero-value-bullets li::marker {
  color: var(--brand-primary);
}

.page-id-industry-church .page-intro-extra {
  margin-top: 4px;
  margin-bottom: 12px;
  max-width: 40rem;
  font-size: 0.9rem;
  color: #526077;
}

.page-id-industry-church .page-hero-actions {
  margin-top: 0;
}

.page-id-industry-church .page-hero-actions .hero-actions {
  gap: 10px;
  flex-wrap: wrap;
}

.page-id-industry-church .page-hero-actions .btn-primary {
  min-height: 42px;
  padding-top: 0.48rem;
  padding-bottom: 0.48rem;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(216, 131, 8, 0.2);
}

.page-id-industry-church .page-hero-actions .btn-hero-church-secondary {
  min-height: 42px;
  padding-top: 0.48rem;
  padding-bottom: 0.48rem;
  font-weight: 600;
  border-width: 2px;
  color: #1e3a5f;
  border-color: rgba(37, 79, 133, 0.34);
  background: rgba(255, 255, 255, 0.95);
}

.page-id-industry-church .page-hero-visual {
  border-radius: 12px;
  border: 1px solid rgba(37, 79, 133, 0.12);
  box-shadow: 0 8px 28px rgba(22, 30, 42, 0.08);
  min-height: 0;
  max-height: none;
  overflow: visible;
  background:
    radial-gradient(100% 65% at 92% 8%, rgba(37, 79, 133, 0.16), transparent 52%),
    linear-gradient(152deg, #1a2c42 0%, #2a4a6e 42%, #1e2835 100%);
  padding: 12px 13px 11px;
}

.page-id-industry-church .page-hero-visual-delivery-scope {
  padding: 10px 11px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
}

.page-id-industry-church .page-hero-visual-flow-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 7px;
}

.page-id-industry-church .page-hero-visual-flow-chip {
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.96);
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.page-id-industry-church .page-hero-visual-delivery-scope-label {
  margin: 0 0 6px;
  font-size: 0.74rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.94);
}

.page-id-industry-church .page-hero-visual-delivery-scope-list li {
  display: grid;
  grid-template-columns: minmax(0, 118px) minmax(0, 1fr);
  gap: 6px 10px;
  padding: 7px 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  align-items: start;
}

.page-id-industry-church .page-hero-visual-delivery-scope-list li:first-child {
  border-top: 0;
  padding-top: 0;
}

.page-id-industry-church .page-hero-visual-delivery-scope-title {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: rgba(200, 220, 245, 0.98);
  line-height: 1.3;
}

.page-id-industry-church .page-hero-visual-delivery-scope-desc {
  font-size: 0.76rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
}

.page-id-industry-church .page-hero-visual-delivery-scope-note {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.72rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
}

@media (min-width: 980px) {
  .page-id-industry-church .page-hero {
    padding: 18px 0 14px;
  }

  .page-id-industry-church .page-hero-layout {
    grid-template-columns: minmax(0, 1.42fr) minmax(260px, 0.58fr);
    gap: 20px;
  }

  .page-id-industry-church .page-hero-copy {
    padding-right: 8px;
  }
}

@media (max-width: 979px) {
  .page-id-industry-church .page-hero-visual {
    width: 100%;
  }
}

.page-id-industry-church main .section:not(.related-pages) .section-card::before,
.page-id-industry-church main .section:not(.related-pages) .section-card::after {
  content: none !important;
  display: none !important;
}

.page-id-industry-church main .section {
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.page-id-industry-church .section-church-directions .container > h2,
.page-id-industry-church .section-church-collaboration .container > h2,
.page-id-industry-church .section-church-starters .container > h2,
.page-id-industry-church .section-church-faq .container > h2 {
  max-width: 720px;
  letter-spacing: -0.02em;
}

.page-id-industry-church .section-church-directions .section-intro,
.page-id-industry-church .section-church-collaboration .section-intro,
.page-id-industry-church .section-church-starters .section-intro {
  max-width: 720px;
  line-height: 1.65;
  color: #526077;
}

.page-id-industry-church .section-church-directions-grid {
  align-items: stretch;
  gap: max(16px, 1.1rem);
}

.page-id-industry-church .section-church-directions-grid > .section-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px 18px 18px;
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.035);
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.page-id-industry-church .section-church-directions-grid > .section-card:hover {
  border-color: rgba(37, 79, 133, 0.22);
  box-shadow: 0 10px 26px rgba(22, 30, 42, 0.07);
  transform: translateY(-2px);
}

.page-id-industry-church .section-church-directions .section-card-icon-wrap--hub {
  width: 40px;
  height: 40px;
  margin-bottom: 12px;
  border-radius: 11px;
  background: rgba(37, 79, 133, 0.06);
  border-color: rgba(37, 79, 133, 0.12);
}

.page-id-industry-church .section-church-directions .section-card-icon-wrap--hub .section-card-icon-svg {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
}

.page-id-industry-church .section-church-directions .section-card-micro-label {
  display: inline-block;
  margin: 0 0 7px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4a5c73;
  background: rgba(37, 79, 133, 0.06);
  border: 1px solid rgba(37, 79, 133, 0.1);
}

.page-id-industry-church .section-church-directions .section-card h3 {
  font-size: 1.04rem;
  font-weight: 800;
  color: #1a2332;
  margin-bottom: 8px;
}

.page-id-industry-church .section-church-directions .section-card-desc {
  line-height: 1.6;
  color: #475569;
  margin-bottom: 10px;
}

.page-id-industry-church .section-church-directions .section-card-bullet-list {
  margin: 0;
  padding-left: 1.15em;
  font-size: 0.88rem;
  line-height: 1.52;
  color: #526077;
}

.page-id-industry-church .section-church-directions .section-card-bullet-list li + li {
  margin-top: 0.35em;
}

.page-id-industry-church .section-church-collaboration-grid {
  align-items: stretch;
  gap: max(16px, 1rem);
}

.page-id-industry-church .section-alt.section-church-collaboration .section-church-collaboration-grid > .section-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px 18px 18px;
  border-radius: 12px;
  border: 1px solid rgba(37, 79, 133, 0.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
  background: rgba(255, 255, 255, 0.96);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.page-id-industry-church .section-church-collaboration .section-card:hover {
  border-color: rgba(37, 79, 133, 0.18);
  box-shadow: 0 8px 24px rgba(22, 30, 42, 0.06);
}

.page-id-industry-church .section-church-collaboration .section-card-icon-wrap--hub {
  width: 40px;
  height: 40px;
  margin-bottom: 12px;
  border-radius: 11px;
  background: rgba(37, 79, 133, 0.06);
  border-color: rgba(37, 79, 133, 0.12);
}

.page-id-industry-church .section-church-collaboration .section-card-icon-wrap--hub .section-card-icon-svg {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
}

.page-id-industry-church .section-church-collaboration .section-card h3 {
  font-size: 1.04rem;
  font-weight: 800;
  color: #1a2332;
}

.page-id-industry-church .section-church-collaboration .section-card-desc {
  flex: 1 1 auto;
  line-height: 1.62;
  color: #475569;
}

.page-id-industry-church .section-church-collaboration .section-card-bullet-list {
  margin: 10px 0 0;
  padding-left: 1.15em;
  font-size: 0.88rem;
  line-height: 1.52;
  color: #526077;
}

.page-id-industry-church .section-church-starters-grid {
  align-items: stretch;
  gap: max(14px, 1rem);
}

.page-id-industry-church .section-church-starters-grid > .section-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 18px 16px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.03);
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.page-id-industry-church .section-church-starters .section-card:hover {
  border-color: rgba(37, 79, 133, 0.16);
  box-shadow: 0 8px 22px rgba(22, 30, 42, 0.05);
}

.page-id-industry-church .section-church-starters .section-card-icon-wrap--hub {
  width: 38px;
  height: 38px;
  margin-bottom: 10px;
  border-radius: 10px;
  background: rgba(37, 79, 133, 0.06);
  border-color: rgba(37, 79, 133, 0.11);
}

.page-id-industry-church .section-church-starters .section-card-icon-wrap--hub .section-card-icon-svg {
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
}

.page-id-industry-church .section-church-starters .section-card h3 {
  font-size: 1rem;
  font-weight: 800;
  color: #1a2332;
  margin-bottom: 6px;
}

.page-id-industry-church .section-church-starters .section-card-desc {
  line-height: 1.58;
  color: #475569;
  font-size: 0.9rem;
}

.page-id-industry-church .section-church-starters .section-card-outcome {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px dashed rgba(37, 79, 133, 0.15);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.5;
  color: #334155;
}

.page-id-industry-church .section-church-faq {
  padding-top: clamp(2rem, 4vw, 2.75rem);
}

.page-id-industry-church .faq-list--church .faq-item {
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
}

.page-id-industry-church .faq-list--church .faq-item + .faq-item {
  margin-top: 10px;
}

.page-id-industry-church .faq-list--church .faq-trigger-label {
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #1a2332;
}

.page-id-industry-church .faq-list--church .faq-panel-inner p {
  line-height: 1.7;
  color: #3d4a5c;
}

.page-id-industry-church .faq-list--church .faq-panel-inner p + p {
  margin-top: 0.55em;
}

.page-id-industry-church .related-pages {
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
}

.page-id-industry-church .related-pages .related-page-card {
  border-radius: 12px;
  border: 1px solid rgba(37, 79, 133, 0.1) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.page-id-industry-church .related-pages .related-page-card:hover {
  border-color: rgba(243, 154, 23, 0.35) !important;
  box-shadow: 0 10px 28px rgba(22, 30, 42, 0.08);
  transform: translateY(-2px);
}

.page-id-industry-church .related-pages .related-page-card h3 {
  font-size: 1.04rem;
  font-weight: 800;
  color: #1a2332;
}

.page-id-industry-church .related-pages .related-page-card-desc {
  -webkit-line-clamp: 4;
  line-height: 1.55;
}

.page-id-industry-church .related-pages .related-page-card-foot {
  margin-top: 12px;
}

@media (max-width: 979px) {
  .page-id-industry-church .section-church-directions-grid.grid-4,
  .page-id-industry-church .section-church-starters-grid.grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 639px) {
  .page-id-industry-church .section-church-directions-grid.grid-4,
  .page-id-industry-church .section-church-starters-grid.grid-4 {
    grid-template-columns: 1fr;
  }

  .page-id-industry-church .section-church-collaboration-grid.grid-3 {
    grid-template-columns: 1fr;
  }

  .page-id-industry-church .page-hero-actions .btn-primary,
  .page-id-industry-church .page-hero-actions .btn-ghost {
    width: 100%;
    justify-content: center;
  }
}

/* ---- 客戶案例總覽 clients hub ---- */
.page-id-clients main .section-clients-service-nav .section-card::before,
.page-id-clients main .section-clients-service-nav .section-card::after,
.page-id-clients .case-card.case-card--direction::before,
.page-id-clients .case-card.case-card--direction::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
}

.page-id-clients .page-hero {
  padding-bottom: 0;
  border-bottom: none;
  background:
    radial-gradient(90% 50% at 12% 0%, rgba(37, 79, 133, 0.06), transparent 55%),
    linear-gradient(180deg, #fbfcfe 0%, #f4f7fb 100%);
}

.page-id-clients .page-hero-layout {
  align-items: stretch;
  gap: clamp(20px, 3vw, 32px);
}

@media (min-width: 980px) {
  .page-id-clients .page-hero-layout {
    grid-template-columns: minmax(0, 1.12fr) minmax(280px, 0.88fr);
  }
}

.page-id-clients .page-hero-copy {
  padding: 8px 8px 0 0;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
}

.page-id-clients .page-hero-copy .eyebrow {
  margin-bottom: 10px;
}

.page-id-clients .page-hero-copy h1 {
  margin-bottom: 14px;
}

.page-id-clients .page-hero-copy .page-intro {
  max-width: 40rem;
  line-height: 1.65;
  color: #475569;
  margin: 0 0 14px;
}

.page-id-clients .page-hero-value-bullets {
  max-width: 40rem;
  margin: 0 0 14px;
  padding-left: 18px;
  line-height: 1.55;
  font-size: 0.92rem;
  color: #3d4a5c;
}

.page-id-clients .page-hero-value-bullets li {
  padding-left: 2px;
  margin-bottom: 6px;
}

.page-id-clients .page-hero-value-bullets li:last-child {
  margin-bottom: 0;
}

.page-id-clients .page-hero-value-bullets li::marker {
  color: var(--brand-primary);
}

.page-id-clients .page-hero-visual {
  min-height: 0;
  border-radius: 16px;
  border: 1px solid rgba(37, 79, 133, 0.12);
  box-shadow: 0 12px 36px rgba(22, 30, 42, 0.1);
  overflow: hidden;
  background: #1a2332;
}

.page-id-clients .page-hero-visual::before {
  opacity: 0;
}

.page-id-clients .page-hero-visual-photo {
  position: relative;
  min-height: 220px;
  flex: 0 0 auto;
}

.page-id-clients .page-hero-visual-photo-micro {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 4;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.95);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.page-id-clients .page-hero-visual-chip-layer {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.page-id-clients .page-hero-visual-chip {
  padding: 5px 9px;
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.96);
}

.page-id-clients .page-hero-visual-content {
  padding: 12px 14px 14px;
  background: linear-gradient(180deg, rgba(26, 35, 50, 0.92), rgba(26, 35, 50, 0.98));
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.page-id-clients .page-hero-visual .mini-stat-grid {
  grid-template-columns: 1fr;
  gap: 0;
}

.page-id-clients .page-hero-visual .mini-stat {
  padding: 12px 14px;
  border-radius: 12px;
}

.page-id-clients .page-hero-visual .mini-stat strong {
  font-size: 1rem;
  margin-bottom: 6px;
}

.page-id-clients .page-hero-visual .mini-stat span {
  font-size: 0.84rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.88);
}

.page-id-clients .page-hero-trust-strip {
  padding: 8px 0 22px;
  border-bottom: 1px solid var(--line);
}

.page-id-clients .page-hero-trust-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}

.page-id-clients .page-hero-trust-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  line-height: 1.35;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #334155;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(37, 79, 133, 0.12);
  box-shadow: 0 2px 8px rgba(22, 30, 42, 0.04);
}

/* 案例總覽：區塊標題節奏（標準 section > .container 頭部） */
.page-id-clients main > .section > .container > .eyebrow {
  margin-bottom: 8px;
}

.page-id-clients main > .section > .container > h2 {
  margin-bottom: 10px;
}

.page-id-clients main > .section > .container > .section-intro {
  margin-bottom: 18px;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
}

.page-id-clients .section-clients-logo-showcase .logo-group-summary {
  margin: -4px 0 12px;
  max-width: 52rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: #64748b;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
}

.page-id-clients .section-clients-logo-showcase .logo-group-title {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #1a2332;
  margin-bottom: 8px;
}

.page-id-clients .section-clients-logo-showcase .logo-group + .logo-group {
  margin-top: 36px;
}

.page-id-clients .section-clients-logo-showcase .logo-group-grid {
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 12px;
}

.page-id-clients .section-clients-logo-showcase .logo-card {
  min-height: 100px;
  padding: 10px 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(37, 79, 133, 0.1);
  background: #fff;
  box-shadow: 0 4px 14px rgba(22, 30, 42, 0.04);
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
}

.page-id-clients .section-clients-logo-showcase .logo-card:hover {
  border-color: rgba(37, 79, 133, 0.2);
  box-shadow: 0 8px 22px rgba(22, 30, 42, 0.07);
}

.page-id-clients .section-clients-logo-showcase .logo-card img {
  max-height: 52px;
  filter: none;
  opacity: 1;
}

.page-id-clients .section-clients-logo-showcase .logo-card.logo-card--named {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 0;
  padding: 10px 10px 12px;
  gap: 8px;
  text-align: center;
}

.page-id-clients .section-clients-logo-showcase .logo-card-media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  margin-bottom: 0;
}

.page-id-clients .section-clients-logo-showcase .logo-card-media .case-card-image-trigger img {
  width: auto;
  max-width: 100%;
  max-height: 52px;
  height: auto;
  margin: 0 auto;
}

.page-id-clients .section-clients-logo-showcase .logo-card-name {
  margin: 0;
  padding-left: 2px;
  padding-right: 2px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.4;
  color: #334155;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.page-id-clients .section-clients-featured .container > h2 {
  letter-spacing: -0.02em;
}

.page-id-clients .section-clients-featured .section-intro {
  max-width: 46rem;
  line-height: 1.65;
  color: #526077;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
}

.page-id-clients .case-grid--clients-featured {
  align-items: stretch;
  gap: 18px;
  margin-top: 16px;
}

.page-id-clients .case-grid--clients-featured .case-card--direction {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 0 16px;
  border-radius: 16px;
  border: 1px solid rgba(37, 79, 133, 0.1);
  box-shadow: 0 8px 26px rgba(22, 30, 42, 0.06);
  overflow: hidden;
  background: #fff;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
}

.page-id-clients .case-grid--clients-featured .case-card--direction > :not(.card-media) {
  padding-left: 18px;
  padding-right: 18px;
}

.page-id-clients .case-grid--clients-featured .case-card--direction > .card-media + * {
  padding-top: 18px;
}

.page-id-clients .case-grid--clients-featured .case-card--direction > .card-media {
  position: relative;
  margin: 0;
  height: 168px;
  overflow: hidden;
  border-radius: 0;
}

.page-id-clients .case-grid--clients-featured .case-card--direction > .card-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

.page-id-clients .case-grid--clients-featured .case-card--direction > .card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(17, 26, 40, 0.05), rgba(17, 26, 40, 0.35));
  z-index: 1;
  pointer-events: none;
}

.page-id-clients .case-grid--clients-featured .card-media-badge {
  z-index: 2;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.page-id-clients .case-grid--clients-featured .case-direction-category {
  display: none;
}

.page-id-clients .case-grid--clients-featured .case-card--direction h3 {
  margin: 0 0 10px;
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.35;
  color: #1a2332;
}

.page-id-clients .case-grid--clients-featured .case-direction-summary {
  margin: 0 0 12px;
}

.page-id-clients .case-grid--clients-featured .case-card-client-name {
  margin-bottom: 10px;
}

.page-id-clients .case-grid--clients-featured .case-direction-details {
  margin: 0 0 12px;
  padding: 14px 0 0;
  border-top: 1px solid rgba(37, 79, 133, 0.1);
  flex: 1 1 auto;
}

.page-id-clients .case-grid--clients-featured .case-direction-outcome-bullets {
  padding-left: 18px;
  margin: 0 0 12px;
}

.page-id-clients .case-grid--clients-featured .case-direction-detail {
  padding: 10px 0;
}

.page-id-clients .case-grid--clients-featured .case-direction-detail + .case-direction-detail {
  border-top: 1px dashed rgba(37, 79, 133, 0.12);
}

.page-id-clients .case-grid--clients-featured .case-direction-detail dt {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 4px;
}

.page-id-clients .case-grid--clients-featured .case-direction-detail dd {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.58;
  color: #3d4a5c;
}

.page-id-clients .case-grid--clients-featured .case-direction-fit-for {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(37, 79, 133, 0.05);
  border: 1px solid rgba(37, 79, 133, 0.09);
  font-size: 0.86rem;
  line-height: 1.52;
  font-weight: 600;
  color: #334e68;
}

.page-id-clients .case-grid--clients-featured .case-direction-closing {
  margin: 14px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid rgba(37, 79, 133, 0.1);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.55;
  color: #334155;
}

.page-id-clients .case-grid--clients-featured .case-direction-foot {
  margin-top: 14px;
  padding-top: 10px;
}

.page-id-clients .section-clients-service-nav .section-intro {
  max-width: 42rem;
  line-height: 1.65;
  color: #526077;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
}

.page-id-clients .section-clients-nav-card-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.page-id-clients .section-clients-nav-card-grid > .section-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
  padding: 18px 18px 16px;
  border-radius: 16px;
  border: 1px solid rgba(37, 79, 133, 0.12);
  background: #fff;
  box-shadow: 0 6px 20px rgba(22, 30, 42, 0.05);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
}

.page-id-clients .section-clients-nav-card-grid > .section-card:hover {
  border-color: rgba(37, 79, 133, 0.22);
  box-shadow: 0 10px 28px rgba(22, 30, 42, 0.08);
}

.page-id-clients .section-clients-service-nav .section-card-micro-label {
  margin-bottom: 8px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}

.page-id-clients .section-clients-service-nav .section-card h3 {
  font-size: 1.06rem;
  font-weight: 800;
  margin-bottom: 8px;
  color: #1a2332;
}

.page-id-clients .section-clients-service-nav .section-card-desc {
  flex: 1 1 auto;
  line-height: 1.65;
  color: #475569;
  margin-bottom: 12px;
}

.page-id-clients .section-clients-nav-card-grid .section-card-result-hint {
  margin: 6px 0 4px;
  font-size: 0.84rem;
  line-height: 1.5;
  color: #64748b;
}

.page-id-clients .section-clients-service-nav .section-card-cta-line {
  margin-top: 10px;
}

.page-id-clients .section-clients-service-nav .sector-link {
  font-weight: 700;
}

.page-id-clients .section-clients-cta {
  padding-top: clamp(2rem, 4vw, 2.75rem);
  padding-bottom: clamp(2rem, 4vw, 2.75rem);
}

.page-id-clients .section-clients-cta .container {
  max-width: 1040px;
}

.page-id-clients .service-cta--clients-hub.service-cta--layout-split {
  border-radius: 16px;
  border: 1px solid rgba(37, 79, 133, 0.1);
  background: linear-gradient(135deg, #faf8f5 0%, #f3f6f9 100%);
  box-shadow: 0 10px 32px rgba(22, 30, 42, 0.06);
  padding: 24px 24px;
}

.page-id-clients .service-cta--clients-hub .service-cta-split {
  gap: max(20px, 2vw);
  align-items: center;
}

.page-id-clients .service-cta--clients-hub .service-cta-split-copy {
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
}

.page-id-clients .service-cta--clients-hub .service-cta-split-copy h2 {
  font-size: clamp(1.15rem, 2.5vw, 1.35rem);
  margin-bottom: 8px;
}

.page-id-clients .service-cta--clients-hub .service-cta-split-copy p:not(.eyebrow) {
  margin: 0;
  line-height: 1.65;
  color: #475569;
  max-width: min(62ch, 36rem);
}

.page-id-clients .service-cta--clients-hub .service-cta-split-actions .hero-actions {
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.page-id-clients .service-cta--clients-hub .service-cta-split-actions .btn-primary {
  min-height: 44px;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  font-weight: 700;
}

.page-id-clients .service-cta--clients-hub .btn-clients-cta-secondary {
  min-height: 44px;
  font-weight: 600;
  border-width: 2px;
  border-color: rgba(37, 79, 133, 0.3);
  color: #1e3a5f;
}

.page-id-clients .related-pages {
  padding-top: clamp(2rem, 4vw, 2.75rem);
  background: transparent;
}

.page-id-clients .related-pages .related-pages-intro {
  max-width: 40rem;
  color: #64748b;
  line-height: 1.6;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
}

.page-id-clients .clients-related-reading-grid {
  margin-top: 16px;
}

.page-id-clients .clients-related-reading-grid .related-page-card {
  border-radius: 14px;
  border: 1px solid rgba(37, 79, 133, 0.08) !important;
  background: #fafbfc;
  box-shadow: none;
  padding: 16px 16px 14px;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
}

.page-id-clients .clients-related-reading-grid .related-page-card:hover {
  border-color: rgba(37, 79, 133, 0.16) !important;
  box-shadow: 0 6px 18px rgba(22, 30, 42, 0.05);
  transform: none;
}

.page-id-clients .clients-related-reading-grid .related-page-card h3 {
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: 8px;
}

.page-id-clients .clients-related-reading-grid .related-page-card-desc {
  -webkit-line-clamp: 4;
  font-size: 0.9rem;
  color: #64748b;
  margin-bottom: 10px;
}

.page-id-clients .clients-related-reading-grid .related-page-card-foot {
  margin-top: 8px;
}

.page-id-clients .clients-related-reading-grid .related-page-link {
  font-size: 0.88rem;
  font-weight: 600;
}

@media (max-width: 767px) {
  .page-id-clients .page-hero-copy {
    padding: 0;
  }

  .page-id-clients .page-hero-copy h1 {
    margin-bottom: 12px;
  }

  .page-id-clients main > .section > .container {
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }

  .page-id-clients .case-grid--clients-featured,
  .page-id-clients .section-clients-nav-card-grid,
  .page-id-clients .section-clients-logo-showcase .logo-group-grid {
    gap: 12px;
  }

  .page-id-clients .section-clients-nav-card-grid > .section-card,
  .page-id-clients .section-clients-logo-showcase .logo-card,
  .page-id-clients .clients-related-reading-grid .related-page-card {
    padding: 14px;
  }

  .page-id-clients .section-clients-logo-showcase .logo-card.logo-card--named {
    padding: 14px;
  }

  .page-id-clients .case-grid--clients-featured .case-card--direction {
    padding: 0 0 14px;
  }

  .page-id-clients .case-grid--clients-featured .case-card--direction > :not(.card-media) {
    padding-left: 14px;
    padding-right: 14px;
  }

  .page-id-clients .case-grid--clients-featured .case-card--direction > .card-media + * {
    padding-top: 14px;
  }

  .page-id-clients .service-cta--clients-hub.service-cta--layout-split {
    padding: 20px 18px;
  }
}

@media (max-width: 979px) {
  .page-id-clients .section-clients-nav-card-grid {
    grid-template-columns: 1fr;
  }

  .page-id-clients .case-grid--clients-featured.grid-3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 639px) {
  .page-id-clients .page-hero-trust-chips {
    flex-direction: column;
    align-items: stretch;
  }

  .page-id-clients .page-hero-trust-chip {
    justify-content: center;
  }

  .page-id-clients .service-cta--clients-hub .service-cta-split-actions .hero-actions {
    justify-content: stretch;
    width: 100%;
  }

  .page-id-clients .service-cta--clients-hub .service-cta-split-actions .btn-primary,
  .page-id-clients .service-cta--clients-hub .service-cta-split-actions .btn-ghost {
    width: 100%;
    justify-content: center;
  }
}

/* ---- 關於我們 about ---- */
.page-id-about main .section-about-capabilities .section-card::before,
.page-id-about main .section-about-capabilities .section-card::after,
.page-id-about main .section-about-values .section-card::before,
.page-id-about main .section-about-values .section-card::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  background: none !important;
}

.page-id-about .page-hero {
  padding-bottom: 0;
  background:
    radial-gradient(85% 55% at 10% 0%, rgba(37, 79, 133, 0.06), transparent 55%),
    linear-gradient(180deg, #fbfcfe 0%, #f4f7fb 100%);
  border-bottom: none;
}

.page-id-about .page-hero-layout {
  gap: clamp(20px, 3vw, 36px);
  align-items: stretch;
}

@media (min-width: 980px) {
  .page-id-about .page-hero-layout {
    grid-template-columns: minmax(0, 1.12fr) minmax(280px, 0.88fr);
  }
}

.page-id-about .page-hero-copy .eyebrow {
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  font-weight: 700;
  margin-bottom: 0.65rem;
  color: #254f85;
}

.page-id-about .page-hero-copy h1 {
  letter-spacing: -0.025em;
  line-height: 1.18;
  font-size: clamp(1.45rem, calc(1.05rem + 1.35vw), 2.05rem);
  font-weight: 800;
  color: #0f172a;
  max-width: 22em;
}

.page-id-about .page-hero-copy .page-intro {
  max-width: min(38rem, 52ch);
  line-height: 1.68;
  color: #334155;
  margin-top: 0.85rem;
}

.page-id-about .page-hero-copy .page-intro + .page-intro {
  margin-top: 0.75rem;
}

.page-id-about .page-hero-value-bullets {
  max-width: 40rem;
  margin: 0 0 14px;
  padding-left: 1.15em;
  font-size: 0.92rem;
  line-height: 1.52;
  color: #3d4a5c;
}

.page-id-about .page-hero-value-bullets li::marker {
  color: var(--brand-primary);
}

.page-id-about .page-hero-actions {
  margin-top: clamp(1.35rem, 2.8vw, 2rem);
}

.page-id-about .page-hero-actions .hero-actions {
  gap: 12px 14px;
  flex-wrap: wrap;
  align-items: center;
}

.page-id-about .page-hero-actions .btn-primary {
  min-height: 44px;
  font-weight: 700;
  padding-left: 1.35rem;
  padding-right: 1.35rem;
}

.page-id-about .page-hero-actions .btn-about-hero-secondary {
  min-height: 42px;
  font-weight: 600;
  border-width: 2px;
  border-color: rgba(37, 79, 133, 0.32);
  color: #1e3a5f;
}

.page-id-about .page-hero-visual {
  border-radius: 16px;
  border: 1px solid rgba(37, 79, 133, 0.12);
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(22, 30, 42, 0.09);
  background: #1a2332;
  color: #f8fafc;
  /* Override generic page-hero-visual card padding / min-height that leave a hollow white panel. */
  padding: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-self: stretch;
}

.page-id-about .page-hero-visual.page-hero-visual--about-brand {
  max-height: none;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(22, 30, 42, 0.1);
}

.page-id-about .page-hero-visual::before {
  opacity: 0;
}

.page-id-about .page-hero-visual-photo {
  position: relative;
  flex: 0 0 auto;
  min-height: 0;
  height: clamp(150px, 22vw, 200px);
  overflow: hidden;
  z-index: 1;
}

.page-id-about .page-hero-visual-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center 35%;
  display: block;
}

.page-id-about .page-hero-visual-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
  z-index: 2;
  padding: 0;
}

.page-id-about .page-hero-visual-delivery-scope {
  flex: 1 1 auto;
  padding: 14px 16px 14px;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.04) 100%);
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.page-id-about .page-hero-visual-flow-chips {
  gap: 6px;
  margin-bottom: 8px;
}

.page-id-about .page-hero-visual-flow-chip {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 4px 9px;
}

.page-id-about .page-hero-visual-delivery-scope-label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(248, 250, 252, 0.88);
  margin-bottom: 8px;
}

.page-id-about .page-hero-visual-delivery-scope-list li {
  padding: 7px 4px;
  gap: 8px 12px;
}

.page-id-about .page-hero-visual-delivery-scope-title {
  font-size: 0.66rem;
  color: rgba(253, 186, 116, 0.95);
}

.page-id-about .page-hero-visual-delivery-scope-desc {
  font-size: 0.75rem;
  line-height: 1.42;
  color: rgba(248, 250, 252, 0.86);
}

.page-id-about .page-hero-visual-delivery-scope-note {
  font-size: 0.72rem;
  line-height: 1.5;
  margin-top: 8px;
  padding-top: 8px;
}

.page-id-about .page-hero-visual--about-brand .page-hero-visual-flow-chips {
  margin-bottom: 10px;
}

.page-id-about .page-hero-visual--about-brand .page-hero-visual-flow-chip {
  font-size: 0.6rem;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.11);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.page-id-about .page-hero-visual--about-brand .page-hero-visual-delivery-scope-list li {
  padding: 6px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.page-id-about .page-hero-visual--about-brand .page-hero-visual-delivery-scope-title {
  font-size: 0.68rem;
  font-weight: 800;
  color: rgba(248, 250, 252, 0.95);
}

.page-id-about .page-hero-visual--about-brand .page-hero-visual-delivery-scope-desc {
  font-size: 0.72rem;
  line-height: 1.45;
  color: rgba(226, 232, 240, 0.88);
}

.page-id-about .page-hero-visual--about-brand .page-hero-visual-delivery-scope-note {
  font-size: 0.68rem;
  line-height: 1.48;
  color: rgba(203, 213, 225, 0.9);
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.page-id-about .page-hero-trust-strip {
  padding: 14px 0 20px;
  border-bottom: 1px solid var(--line);
}

.page-id-about .page-hero-trust-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-id-about .page-hero-trust-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #334155;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(37, 79, 133, 0.12);
}

.page-id-about main .section {
  padding-top: clamp(2.5rem, 5vw, 3.75rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.75rem);
}

/* About: Our Approach — hierarchy + equal-height cards */
.page-id-about .section-about-approach .container > .eyebrow {
  margin-bottom: 0.5rem;
  letter-spacing: 0.08em;
}

.page-id-about .section-about-approach .container > h2 {
  margin: 0 0 0.85rem;
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  letter-spacing: -0.02em;
  color: #0f172a;
}

.page-id-about .section-about-approach .section-intro {
  max-width: min(46rem, 68ch);
  margin: 0;
  line-height: 1.68;
  color: #475569;
}

.page-id-about .section-about-approach .section-intro:not(:last-of-type) {
  margin-bottom: 0.85rem;
}

.page-id-about .section-about-approach .section-intro:last-of-type {
  margin-bottom: 1.75rem;
}

.page-id-about .section-about-approach-grid {
  align-items: stretch;
  gap: 18px 20px;
}

.page-id-about .section-about-approach-grid > .section-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 1.35rem 1.25rem 1.4rem;
  border-radius: 14px;
  border: 1px solid rgba(37, 79, 133, 0.1);
  background: #fff;
  box-shadow: 0 4px 18px rgba(22, 30, 42, 0.04);
  transition:
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.page-id-about .section-about-approach-grid > .section-card:hover {
  border-color: rgba(37, 79, 133, 0.2);
  box-shadow: 0 10px 28px rgba(22, 30, 42, 0.08);
  transform: translateY(-2px);
}

.page-id-about .section-about-approach-grid .section-card h3 {
  font-size: 1.05rem;
  font-weight: 800;
  margin: 0 0 0.5rem;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.page-id-about .section-about-approach-grid .section-card-desc {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.58;
  color: #475569;
  flex: 1 1 auto;
}

/* About: What We Work On — service overview cards */
.page-id-about .section-about-what-we-do .container > .eyebrow {
  margin-bottom: 0.45rem;
}

.page-id-about .section-about-what-we-do .container > h2 {
  margin: 0 0 0.65rem;
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  letter-spacing: -0.02em;
  color: #0f172a;
}

.page-id-about .section-about-what-we-do .section-intro {
  max-width: min(40rem, 58ch);
  margin: 0 0 1.85rem;
  font-size: 1.02rem;
  line-height: 1.65;
  color: #475569;
  font-weight: 500;
}

.page-id-about .section-about-wwd-grid {
  align-items: stretch;
  gap: 18px 20px;
}

.page-id-about .section-about-wwd-grid > .section-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 1.4rem 1.3rem 1.35rem;
  border-radius: 14px;
  border: 1px solid rgba(37, 79, 133, 0.11);
  background: #fff;
  box-shadow: 0 4px 16px rgba(22, 30, 42, 0.045);
  transition:
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.page-id-about .section-about-wwd-grid > .section-card:hover {
  border-color: rgba(37, 79, 133, 0.22);
  box-shadow: 0 12px 32px rgba(22, 30, 42, 0.09);
  transform: translateY(-2px);
}

.page-id-about .section-about-wwd-grid .section-card h3 {
  font-size: 1.08rem;
  font-weight: 800;
  margin: 0 0 0.55rem;
  color: #0f172a;
  letter-spacing: -0.02em;
  line-height: 1.28;
}

.page-id-about .section-about-wwd-grid .section-card-desc {
  margin: 0;
  font-size: 0.93rem;
  line-height: 1.58;
  color: #475569;
  flex: 1 1 auto;
}

.page-id-about .section-about-wwd-grid .section-card-cta-line {
  margin-top: auto;
  padding-top: 1rem;
  margin-bottom: 0;
}

.page-id-about .section-about-wwd-grid .section-card-cta-line .sector-link--emphasis {
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: #1e4a7a;
  border-bottom: 1px solid rgba(37, 79, 133, 0.35);
  padding-bottom: 2px;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.page-id-about .section-about-wwd-grid .section-card-cta-line .sector-link--emphasis:hover {
  color: #254f85;
  border-bottom-color: rgba(37, 79, 133, 0.55);
}

/* About: client / org grid (mirror home trust polish) */
.page-id-about .section-about-trust-logos.section-alt {
  background: linear-gradient(180deg, #f3f6fb 0%, #eef2f8 100%);
  border-top-color: rgba(37, 79, 133, 0.08);
}

.page-id-about .section-about-trust-logos .logo-strip-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px 24px;
  margin: 0 0 18px;
}

.page-id-about .section-about-trust-logos .logo-strip-head-row h2 {
  flex: 1 1 18rem;
  margin: 0;
  min-width: min(100%, 16rem);
  font-size: clamp(1.35rem, 2.5vw, 1.68rem);
  letter-spacing: -0.02em;
  color: #0f172a;
}

.page-id-about .section-about-trust-logos .logo-strip-head-cta {
  flex: 0 0 auto;
  padding-top: 4px;
}

.page-id-about .section-about-trust-logos .logo-strip-lead {
  max-width: 60ch;
  margin: 0 0 26px;
  line-height: 1.68;
  color: #475569;
  font-size: 1rem;
}

.page-id-about .section-about-trust-logos .logo-grid.logo-grid--named {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
  align-items: stretch;
}

@media (min-width: 640px) {
  .page-id-about .section-about-trust-logos .logo-grid.logo-grid--named {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 980px) {
  .page-id-about .section-about-trust-logos .logo-grid.logo-grid--named {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .page-id-about .section-about-trust-logos .logo-grid.logo-grid--named {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.page-id-about .section-about-trust-logos .logo-card.logo-card--named {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  height: 100%;
  min-height: 158px;
  box-sizing: border-box;
  padding: 16px 14px 14px;
  text-align: center;
  border-radius: 14px;
  border: 1px solid rgba(37, 79, 133, 0.1);
  background: #fff;
  box-shadow: 0 4px 14px rgba(22, 30, 42, 0.05);
  transition:
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.page-id-about .section-about-trust-logos .logo-card.logo-card--named:hover {
  border-color: rgba(37, 79, 133, 0.18);
  box-shadow: 0 8px 22px rgba(22, 30, 42, 0.08);
}

.page-id-about .section-about-trust-logos .logo-card-media {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 68px;
  margin: 6px 0 12px;
}

.page-id-about .section-about-trust-logos .logo-card-media .case-card-image-trigger img {
  max-height: 52px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.page-id-about .section-about-trust-logos .logo-card-name {
  margin: auto 0 0;
  padding: 0 4px;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.38;
  color: #334155;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.38em * 2);
}

.page-id-about.about-page--hk-cn .section-about-approach .container > h2,
.page-id-about.about-page--hk-cn .section-about-what-we-do .container > h2 {
  text-wrap: balance;
}

.page-id-about.about-page--hk-cn .section-about-approach-grid .section-card h3 {
  line-height: 1.32;
}

.page-id-about.about-page--hk-cn .section-about-trust-logos .logo-grid.logo-grid--named {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
}

@media (min-width: 640px) {
  .page-id-about.about-page--hk-cn .section-about-trust-logos .logo-grid.logo-grid--named {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .page-id-about.about-page--hk-cn .section-about-trust-logos .logo-grid.logo-grid--named {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .page-id-about.about-page--hk-cn .section-about-trust-logos .logo-grid.logo-grid--named {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.page-id-about.about-page--hk-cn .section-about-trust-logos .logo-card.logo-card--named {
  min-height: 168px;
  padding: 18px 16px 16px;
}

.page-id-about.about-page--hk-cn .section-about-trust-logos .logo-card-media {
  min-height: 72px;
  margin: 8px 0 14px;
}

.page-id-about.about-page--hk-cn .section-about-trust-logos .logo-card-name {
  font-size: 0.76rem;
  line-height: 1.4;
  color: #1e293b;
}

.page-id-about.about-page--hk-cn .page-hero-copy h1 {
  text-wrap: balance;
}

.page-id-about.about-page--hk-cn .page-hero-copy .page-intro {
  color: #334155;
}

.page-id-about .section-about-milestones .container > h2 {
  letter-spacing: -0.02em;
  color: #1a2332;
}

.page-id-about .section-about-milestones .section-intro {
  max-width: 46rem;
  line-height: 1.65;
  color: #526077;
}

.page-id-about .about-milestone-timeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 20px;
}

.page-id-about .about-milestone-timeline .timeline-item {
  padding: 18px 16px 16px;
  border-radius: 14px;
  border: 1px solid rgba(37, 79, 133, 0.1);
  background: #fff;
  box-shadow: 0 6px 18px rgba(22, 30, 42, 0.04);
  min-height: 100%;
}

/* 里程碑已有年份標籤，毋須沿用全站 timeline 的空白漸層方塊 */
.page-id-about .about-milestone-timeline .timeline-item::before {
  display: none;
  content: none;
  margin: 0;
}

.page-id-about .about-milestone-timeline .timeline-year {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #64748b;
  margin-bottom: 8px;
}

.page-id-about .about-milestone-timeline .timeline-item > p:last-child {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.58;
  color: #475569;
}

.page-id-about .section-about-client-trust .logo-grid.logo-grid--named {
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 14px 16px;
}

.page-id-about .section-about-client-trust .logo-card.logo-card--named {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 0;
  padding: 14px 12px 12px;
  text-align: center;
}

.page-id-about .section-about-client-trust .logo-card-media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  margin-bottom: 8px;
}

.page-id-about .section-about-client-trust .logo-card-media .case-card-image-trigger img {
  max-height: 48px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: none;
  opacity: 1;
}

.page-id-about .section-about-client-trust .logo-card-name {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.35;
  color: #334155;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.page-id-about .section-about-capabilities .container > h2,
.page-id-about .section-about-values .container > h2,
.page-id-about .section-about-process .container > h2 {
  letter-spacing: -0.02em;
  color: #1a2332;
}

.page-id-about .section-about-capabilities .section-intro,
.page-id-about .section-about-values .section-intro,
.page-id-about .section-about-process .section-intro {
  max-width: 46rem;
  line-height: 1.65;
  color: #526077;
}

.page-id-about .section-about-capabilities-grid {
  align-items: stretch;
  gap: 16px;
  margin-top: 18px;
}

.page-id-about .section-about-capabilities-grid > .section-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 18px 16px 16px;
  border-radius: 14px;
  border: 1px solid rgba(37, 79, 133, 0.1);
  background: #fff;
  box-shadow: 0 5px 16px rgba(22, 30, 42, 0.04);
}

.page-id-about .section-about-capabilities .section-card-icon-wrap--hub {
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
  border-radius: 11px;
  background: rgba(37, 79, 133, 0.06);
  border-color: rgba(37, 79, 133, 0.12);
}

.page-id-about .section-about-capabilities .section-card-icon-wrap--hub .section-card-icon-svg {
  width: 24px;
  height: 24px;
}

.page-id-about .section-about-capabilities .section-card-micro-label {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 6px;
}

.page-id-about .section-about-capabilities .section-card h3 {
  font-size: 1.02rem;
  font-weight: 800;
  margin-bottom: 8px;
  color: #1a2332;
}

.page-id-about .section-about-capabilities .section-card-desc {
  flex: 1 1 auto;
  font-size: 0.9rem;
  line-height: 1.58;
  color: #475569;
}

.page-id-about .section-about-capabilities .section-card-outcome {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed rgba(37, 79, 133, 0.15);
  font-size: 0.84rem;
  font-weight: 600;
  color: #334155;
}

.page-id-about .section-alt.section-about-values {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.page-id-about .section-about-values-grid {
  align-items: stretch;
  gap: 16px;
  margin-top: 18px;
}

.page-id-about .section-about-values-grid > .section-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px 18px 18px;
  border-radius: 14px;
  border: 1px solid rgba(37, 79, 133, 0.09);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 4px 14px rgba(22, 30, 42, 0.04);
}

.page-id-about .section-about-values .section-card-icon-wrap--hub {
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
  border-radius: 11px;
  background: rgba(37, 79, 133, 0.07);
  border-color: rgba(37, 79, 133, 0.12);
}

.page-id-about .section-about-values .section-card-micro-label {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  color: #64748b;
  margin-bottom: 6px;
}

.page-id-about .section-about-values .section-card h3 {
  font-size: 1.04rem;
  font-weight: 800;
  margin-bottom: 8px;
}

.page-id-about .section-about-values .section-card-desc {
  flex: 1 1 auto;
  font-size: 0.9rem;
  line-height: 1.58;
  color: #475569;
}

.page-id-about .section-about-values .section-card-outcome {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(37, 79, 133, 0.1);
  font-size: 0.84rem;
  font-weight: 600;
  color: #334155;
}

.page-id-about .section-about-process .about-process-grid {
  margin-top: 20px;
  gap: 16px;
  align-items: stretch;
}

.page-id-about .about-process-step {
  position: relative;
  padding: 22px 18px 20px 52px;
  border-radius: 14px;
  border: 1px solid rgba(37, 79, 133, 0.11);
  background: #fff;
  box-shadow: 0 6px 18px rgba(22, 30, 42, 0.05);
  min-height: 100%;
}

.page-id-about .about-process-step .step-index {
  position: absolute;
  left: 16px;
  top: 18px;
  width: 32px;
  height: 32px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #254f85, #1e3a5f);
  box-shadow: 0 4px 12px rgba(37, 79, 133, 0.25);
}

.page-id-about .about-process-step h3 {
  font-size: 1.05rem;
  font-weight: 800;
  margin-bottom: 8px;
  color: #1a2332;
}

.page-id-about .about-process-step p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #475569;
}

.page-id-about .section-about-cta {
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

.page-id-about .section-about-cta .container {
  max-width: 1040px;
}

.page-id-about .service-cta--about-hub.service-cta--layout-split {
  border-radius: 16px;
  border: 1px solid rgba(37, 79, 133, 0.12);
  background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 55%, #f4f6fa 100%);
  box-shadow: 0 14px 40px rgba(22, 30, 42, 0.08);
  padding: clamp(1.65rem, 3.2vw, 2.35rem) clamp(1.35rem, 3vw, 2.5rem);
}

.page-id-about .service-cta--about-hub .service-cta-split {
  gap: max(22px, 2.5vw);
  align-items: center;
}

.page-id-about .service-cta--about-hub .service-cta-split-copy {
  flex: 1 1 16rem;
}

.page-id-about .service-cta--about-hub .service-cta-split-copy h2 {
  font-size: clamp(1.22rem, 2.6vw, 1.48rem);
  margin: 0 0 0.55rem;
  letter-spacing: -0.02em;
  color: #0f172a;
  font-weight: 800;
  line-height: 1.25;
}

.page-id-about .service-cta--about-hub .service-cta-split-copy p:not(.eyebrow) {
  margin: 0;
  line-height: 1.66;
  color: #475569;
  max-width: min(62ch, 36rem);
  font-size: 0.98rem;
}

.page-id-about .service-cta--about-hub .service-cta-split-actions {
  flex: 0 0 auto;
}

.page-id-about .service-cta--about-hub .service-cta-split-actions .hero-actions {
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.page-id-about .service-cta--about-hub .service-cta-split-actions .btn-primary {
  min-height: 48px;
  padding-left: 1.45rem;
  padding-right: 1.45rem;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(37, 79, 133, 0.22);
}

.page-id-about .service-cta--about-hub .btn-about-cta-secondary {
  min-height: 44px;
  font-weight: 600;
  border-width: 2px;
  border-color: rgba(37, 79, 133, 0.28);
  color: #1e3a5f;
}

.page-id-about .related-pages {
  padding-top: clamp(2rem, 4vw, 2.75rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
  background: transparent;
}

.page-id-about .related-pages .container > .eyebrow {
  margin-bottom: 0.45rem;
  letter-spacing: 0.08em;
}

.page-id-about .related-pages .container > h2 {
  margin: 0 0 0.65rem;
  font-size: clamp(1.28rem, 2.3vw, 1.55rem);
  letter-spacing: -0.02em;
  color: #0f172a;
}

.page-id-about .related-pages .related-pages-intro {
  max-width: 46rem;
  margin: 0 0 1.5rem;
  color: #475569;
  line-height: 1.65;
  font-size: 0.98rem;
}

.page-id-about .about-related-grid {
  align-items: stretch;
  gap: 18px 20px;
  margin-top: 4px;
}

.page-id-about .about-related-grid .related-page-card {
  border-radius: 14px;
  border: 1px solid rgba(37, 79, 133, 0.1) !important;
  background: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.2rem 1.15rem;
  box-shadow: 0 4px 16px rgba(22, 30, 42, 0.04);
  transition:
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.page-id-about .about-related-grid .related-page-card:hover {
  border-color: rgba(37, 79, 133, 0.16) !important;
  box-shadow: 0 10px 26px rgba(22, 30, 42, 0.07);
}

.page-id-about .about-related-grid .related-page-card h3 {
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
  margin: 0 0 0.45rem;
  line-height: 1.3;
}

.page-id-about .about-related-grid .related-page-card-desc {
  -webkit-line-clamp: 4;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #64748b;
  flex: 1 1 auto;
  margin-bottom: 0.65rem;
}

.page-id-about .about-related-grid .related-page-card-foot {
  margin-top: auto;
  margin-bottom: 0;
}

.page-id-about .about-related-grid .related-page-card .related-page-link {
  font-weight: 700;
  font-size: 0.86rem;
}

@media (max-width: 979px) {
  .page-id-about .about-milestone-timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-id-about .section-about-capabilities-grid.grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-id-about .service-cta--about-hub .service-cta-split {
    flex-direction: column;
    align-items: stretch;
  }

  .page-id-about .service-cta--about-hub .service-cta-split-actions .hero-actions {
    justify-content: flex-start;
    width: 100%;
  }

  .page-id-about .page-hero-visual.page-hero-visual--about-brand {
    max-height: none;
  }
}

@media (max-width: 639px) {
  .page-id-about .about-milestone-timeline {
    grid-template-columns: 1fr;
  }

  .page-id-about .section-about-capabilities-grid.grid-3 {
    grid-template-columns: 1fr;
  }

  .page-id-about .page-hero-trust-chips {
    flex-direction: column;
    align-items: stretch;
  }

  .page-id-about .service-cta--about-hub .service-cta-split-actions .hero-actions {
    width: 100%;
    justify-content: stretch;
  }

  .page-id-about .service-cta--about-hub .service-cta-split-actions .btn-primary,
  .page-id-about .service-cta--about-hub .service-cta-split-actions .btn-ghost {
    width: 100%;
    justify-content: center;
  }
}

/* =========================================
   Insights hub & insight article grids
   ========================================= */

html:has(body.page-id-insights) {
  scroll-behavior: smooth;
}

/* Insights 首頁：極簡 archive（無 page-hero） */
main.insights-archive-main {
  padding-top: 6px;
}

@media (min-width: 720px) {
  main.insights-archive-main {
    padding-top: 10px;
  }
}

.page-id-insights .insights-archive-heading-wrap {
  padding: 12px 0 4px;
}

.page-id-insights .insights-archive-page-h1 {
  margin: 0 0 8px;
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
}

.page-id-insights .section-insights-archive-filter {
  padding: 10px 0 8px;
  margin-top: 0;
  border-top: 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  background: #f8fafc;
}

.page-id-insights .section-insights-archive-filter.section-insights-quick-nav--hub {
  margin-top: 0;
}

.page-id-insights .section-insights-archive-filter .eyebrow {
  margin: 0 0 2px;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: #64748b;
}

.page-id-insights .section-insights-archive-filter h2 {
  margin: 0 0 6px;
  font-size: clamp(1.05rem, 1.9vw, 1.28rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
}

.page-id-insights .section-insights-archive-filter .insight-topic-nav {
  margin-top: 2px;
}

.page-id-insights .section-insights-archive-filter .insight-blog-filter-row {
  margin-top: 8px;
  gap: 5px 7px;
}

.page-id-insights .section-insights-archive-filter .insight-blog-filter-row .insight-topic-chip {
  min-height: 32px;
  padding: 0 10px 0 11px;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 999px;
}

.page-id-insights .section-insights-latest-articles.section-insights-library--hub {
  padding: 14px 0 40px;
  border-top: 0;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.page-id-insights .section-insights-latest-articles .insight-archive-list-block {
  margin-bottom: 8px;
}

.page-id-insights .section-insights-latest-articles .insight-archive-section-intro {
  margin-top: 8px;
  font-size: 0.88rem;
  color: #64748b;
}

.page-id-insights .section-insights-latest-articles .insight-archive-title-tools {
  gap: 10px 12px;
  margin-top: 4px;
}

.page-id-insights .section-insights-latest-articles .insight-archive-sort {
  gap: 5px 6px;
}

.page-id-insights .section-insights-latest-articles .insight-archive-sort-pill {
  min-height: 28px;
  padding: 0 9px;
  font-size: 0.72rem;
  font-weight: 600;
}

.page-id-insights .insight-card--hub-archive .card-media--insights-strip,
.page-id-insights .insight-card--hub-archive .card-media--insights-strip img {
  max-height: 88px;
}

.page-id-insights .insight-card--hub-archive .insight-card-text {
  padding: 10px 12px 12px;
  gap: 6px;
}

.page-id-insights .insight-card--hub-archive .insight-card-meta-cat {
  font-size: 0.68rem;
  font-weight: 650;
  color: #64748b;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.page-id-insights .insight-card--hub-archive .insight-card-title {
  font-size: 1rem;
  margin-top: 4px;
}

.page-id-insights .insight-card--hub-archive .insight-card-date-line {
  font-size: 0.72rem;
  font-weight: 600;
  color: #94a3b8;
}

.page-id-insights .insight-card--hub-archive .insight-card-excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  line-height: 1.48;
  font-size: 0.84rem;
  color: #526077;
  margin: 0;
}

.page-id-insights .insight-card--hub-archive .insight-card-tag {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 1px 7px;
  color: #64748b;
  background: rgba(15, 23, 42, 0.035);
  border-color: rgba(15, 23, 42, 0.05);
}

.page-id-insights .insight-card--hub-archive:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(22, 30, 42, 0.06);
}

.page-id-insights .page-hero {
  padding: 22px 0 14px;
  background: linear-gradient(180deg, #f1f5f9 0%, #f8fafc 55%, #fbfcfe 100%);
  overflow-x: hidden; /* grid 子欄 minmax(340px) 曾撐破 container（92%） */
}

/* Hero 兩欄：與 about 頁相同 grid split；左 page-hero-main + 右 page-hero-aside */
.page-id-insights .page-hero-copy.page-hero-main,
.page-id-insights .page-hero-main {
  min-width: 0;
}

.page-id-insights .page-hero-aside {
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

.page-id-insights .insight-hero-featured-card,
.page-id-insights .insight-hero-featured-card--hub {
  min-width: 0;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

@media (min-width: 980px) {
  /* 勿加 width:100%：此元素同時是 .container，會覆寫 width:min(1140px,92%) 令 Hero 變全寬 */
  .page-id-insights .page-hero-layout.page-hero-layout--split {
    display: grid;
    /* 與 about 類似：左略寬、右略窄，避免精選卡欄位過寬而「貼住」右邊視覺 */
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    align-items: start;
    column-gap: 28px;
    row-gap: 22px;
    min-width: 0;
    box-sizing: border-box;
  }

  /* 覆寫順序保險：第三列 trust strip 必須跨滿兩欄（與全域 .page-hero-layout > .page-hero-trust-strip 一致） */
  .page-id-insights .page-hero-layout.page-hero-layout--split > .page-hero-trust-strip {
    grid-column: 1 / -1;
  }
}

.page-id-insights .page-hero-copy .eyebrow {
  color: #334155;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.page-id-insights .page-hero-copy h1 {
  font-size: clamp(1.75rem, 2.75vw, 2.2rem);
  letter-spacing: -0.035em;
  line-height: 1.18;
  font-weight: 800;
  color: #0f172a;
}

.page-id-insights .page-hero-subtitle {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 6px;
}

.page-id-insights .page-hero-copy .page-intro {
  font-size: 0.96rem;
  line-height: 1.65;
  color: #475569;
  max-width: 34rem;
}

.page-id-insights .page-hero-value-bullets {
  margin: 12px 0 0;
  padding-left: 1.1rem;
  max-width: 36rem;
  color: #334155;
  font-size: 0.9rem;
  line-height: 1.5;
  list-style-type: disc;
}

.page-id-insights .page-hero-value-bullets li {
  margin: 0 0 8px;
  padding-left: 2px;
}

.page-id-insights .page-hero-value-bullets li:last-child {
  margin-bottom: 0;
}

.page-id-insights .page-hero-actions {
  margin-top: 14px;
}

.page-id-insights .page-hero-visual.page-hero-aside.page-hero-visual--insight-featured,
.page-id-insights .page-hero-visual--insight-featured {
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  overflow: visible;
}

.page-id-insights .page-hero-visual--insight-featured::before {
  display: none;
}

.page-id-insights .insight-hero-featured-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(37, 79, 133, 0.1);
  background: #fff;
  box-shadow: 0 4px 18px rgba(22, 30, 42, 0.05);
  min-height: 0;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.page-id-insights .insight-hero-featured-card--hub {
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 2px 14px rgba(15, 23, 42, 0.045);
}

.page-id-insights .insight-hero-featured-card:hover {
  border-color: rgba(37, 79, 133, 0.16);
  box-shadow: 0 8px 22px rgba(22, 30, 42, 0.07);
}

.page-id-insights .insight-hero-featured-card:focus-within {
  outline: 2px solid rgba(243, 154, 23, 0.45);
  outline-offset: 2px;
}

.page-id-insights .insight-hero-featured-photo {
  position: relative;
  height: 92px;
  overflow: hidden;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

@media (max-width: 639px) {
  .page-id-insights .insight-hero-featured-photo {
    height: 80px;
  }
}

.page-id-insights .insight-hero-featured-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  opacity: 0.94;
  filter: saturate(0.95) contrast(0.98);
}

.page-id-insights .insight-hero-featured-photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(248, 250, 252, 0.2) 0%,
    rgba(255, 255, 255, 0.55) 45%,
    rgba(255, 255, 255, 0.96) 100%
  );
  pointer-events: none;
}

.page-id-insights .insight-hero-featured-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px 16px;
  background: #fff;
}

.page-id-insights .insight-hero-featured-eyebrow {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #475569;
}

.page-id-insights .insight-hero-featured-card[data-category="AI"] .insight-hero-featured-eyebrow {
  color: #1e4a7a;
}

.page-id-insights .insight-hero-featured-title {
  margin: 0;
  font-size: 1.06rem;
  font-weight: 800;
  line-height: 1.32;
  color: #0f172a;
}

.page-id-insights .insight-hero-featured-excerpt {
  margin: 0;
  font-size: 0.87rem;
  line-height: 1.52;
  color: #475569;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.page-id-insights .insight-hero-featured-date {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.03em;
}

.page-id-insights .insight-hero-featured-cta {
  margin: 6px 0 0;
}

.page-id-insights .insight-hero-featured-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.88rem;
  font-weight: 800;
  color: #1e4a7a;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.page-id-insights .insight-hero-featured-cta-link:hover {
  color: #c26a08;
  border-bottom-color: rgba(194, 106, 8, 0.35);
}

.page-id-insights .insight-hero-featured-cta .btn {
  width: 100%;
  justify-content: center;
}

.page-id-insights .insight-hero-featured-kicker {
  margin: 0;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #64748b;
}

.page-id-insights .insight-hero-featured-cat {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 800;
  color: #1e4a7a;
  letter-spacing: 0.02em;
}

.page-id-insights .page-hero-trust-strip {
  padding-top: 8px;
  padding-bottom: 0;
}

.page-id-insights .page-hero-trust-chips {
  gap: 8px;
}

.page-id-insights .page-hero-trust-chip {
  font-size: 0.78rem;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid rgba(37, 79, 133, 0.12);
  background: rgba(255, 255, 255, 0.75);
  color: #475569;
}

.page-id-insights .section-insights-quick-nav {
  padding: 18px 0 16px;
}

.page-id-insights .section-insights-quick-nav--hub {
  margin-top: 0;
  border-top: 1px solid rgba(37, 79, 133, 0.08);
  border-bottom: 1px solid rgba(37, 79, 133, 0.06);
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.page-id-insights .section-insights-quick-nav .eyebrow {
  color: #334155;
  font-weight: 800;
}

.page-id-insights .section-insights-quick-nav h2 {
  color: #0f172a;
  letter-spacing: -0.02em;
}

.page-id-insights .section-insights-quick-nav .section-intro {
  margin-top: 8px;
  max-width: 42rem;
  color: #475569;
  line-height: 1.6;
}

.page-id-insights .insight-topic-nav {
  margin-top: 6px;
}

.page-id-insights .insight-topic-chip-row {
  margin-top: 10px;
  gap: 8px 10px;
  flex-wrap: wrap;
}

.page-id-insights .insight-blog-filter-row.insight-topic-chip-row {
  gap: 6px 8px;
}

.page-id-insights .insight-topic-chip {
  gap: 10px;
  padding: 0 16px 0 18px;
  min-height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(37, 79, 133, 0.16);
  background: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.page-id-insights .insight-blog-filter-row .insight-topic-chip {
  min-height: 36px;
  padding: 0 12px 0 14px;
  font-size: 0.82rem;
  font-weight: 650;
  border-radius: 10px;
  border-color: rgba(15, 23, 42, 0.1);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: none;
}

.page-id-insights .insight-blog-filter-row .insight-topic-chip:hover {
  background: #f8fafc;
  border-color: rgba(37, 79, 133, 0.18);
}

.page-id-insights .insight-blog-filter-row .insight-topic-chip.is-active {
  border-color: rgba(37, 79, 133, 0.22);
  background: #fff;
  box-shadow: 0 0 0 1px rgba(37, 79, 133, 0.12);
}

.page-id-insights .insight-topic-chip:hover {
  border-color: rgba(37, 79, 133, 0.28);
  background: #f8fafc;
}

.page-id-insights .insight-topic-chip.is-active {
  border-color: rgba(37, 79, 133, 0.32);
  background: #fff;
  box-shadow: 0 0 0 1px rgba(243, 154, 23, 0.22), 0 4px 12px rgba(22, 30, 42, 0.06);
}

.page-id-insights .insight-topic-chip:focus-visible {
  outline: 2px solid rgba(243, 154, 23, 0.55);
  outline-offset: 2px;
}

.page-id-insights .insight-topic-chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  padding: 0 6px;
  height: 22px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #64748b;
  background: rgba(37, 79, 133, 0.07);
}

.page-id-insights .insight-topic-chip.is-active .insight-topic-chip-count {
  background: rgba(37, 79, 133, 0.1);
  color: #475569;
}

.page-id-insights .section-insights-topics {
  padding: 36px 0 32px;
}

.page-id-insights .section-insights-topics--hub {
  background: #fff;
}

.page-id-insights .section-insights-topics .eyebrow {
  color: #475569;
}

.page-id-insights .section-insights-topics h2 {
  color: #0f172a;
}

.page-id-insights .section-insights-topics .section-intro {
  margin-top: 8px;
  max-width: 42rem;
  color: #526077;
}

.page-id-insights .section-insights-topic-grid > .section-card::before,
.page-id-insights .section-insights-topic-grid > .section-card::after {
  display: none;
  content: none;
}

.page-id-insights .section-insights-topic-grid > .section-card {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding: 18px 16px 16px;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #fafbfc;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.page-id-insights .section-insights-topic-grid > .section-card:has(.section-card-image-strip) {
  padding: 0 0 16px;
  overflow: hidden;
}

.page-id-insights .section-insights-topic-grid > .section-card:has(.section-card-image-strip) > :not(.section-card-image-strip) {
  padding-left: 16px;
  padding-right: 16px;
}

.page-id-insights .section-insights-topic-grid > .section-card:has(.section-card-image-strip) > .section-card-micro-label {
  margin-top: 12px;
}

.page-id-insights .section-card-image-strip {
  position: relative;
  height: 68px;
  overflow: hidden;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.page-id-insights .section-card-image-strip-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.page-id-insights .section-card-image-strip-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(248, 250, 252, 0.55) 100%);
  pointer-events: none;
}

.page-id-insights .section-insights-topic-grid > .section-card:hover {
  border-color: rgba(37, 79, 133, 0.18);
  box-shadow: 0 6px 18px rgba(22, 30, 42, 0.07);
  transform: translateY(-1px);
}

.page-id-insights .section-insights-topic-grid > .section-card:focus-within {
  outline: 2px solid rgba(243, 154, 23, 0.45);
  outline-offset: 2px;
}

.page-id-insights .section-card-meta-count {
  margin: 4px 0 0;
  font-size: 0.8rem;
  font-weight: 800;
  color: #64748b;
  letter-spacing: 0.02em;
}

.page-id-insights .section-insights-topic-grid .section-card-pills {
  margin-top: auto;
  padding-top: 8px;
}

.page-id-insights .section-insights-topic-grid .section-card-cta-line {
  margin-top: 14px;
  padding-top: 4px;
}

.page-id-insights .section-insights-topic-grid .section-card-cta-line .sector-link {
  font-weight: 800;
  font-size: 0.88rem;
  color: #1e4a7a;
}

.page-id-insights .section-insights-library {
  padding: 36px 0 44px;
}

.page-id-insights .section-insights-library--hub {
  padding: 22px 0 44px;
  background: linear-gradient(180deg, #fbfcfe 0%, #f8fafc 100%);
  border-top: 1px solid rgba(37, 79, 133, 0.07);
}

.page-id-insights .section-insights-library .eyebrow {
  color: #475569;
}

.page-id-insights .section-insights-library h2 {
  color: #0f172a;
}

.page-id-insights .section-insights-library .section-intro {
  margin-top: 8px;
  max-width: 42rem;
  color: #526077;
}

.page-id-insights .section-insights-category-summary.section-insights-topics--hub {
  padding: 22px 0 18px;
  background: #f8fafc;
  border-bottom: 1px solid rgba(37, 79, 133, 0.06);
}

.page-id-insights .section-insights-category-summary .section-intro {
  font-size: 0.9rem;
  margin-top: 6px;
}

.page-id-insights .section-insights-category-summary-grid > .section-card {
  padding: 14px 14px 14px;
  min-height: 0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 8px rgba(15, 23, 42, 0.04);
  transform: none;
}

.page-id-insights .section-insights-category-summary-grid > .section-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(22, 30, 42, 0.06);
}

.page-id-insights .section-insights-category-summary-grid .section-card-desc {
  font-size: 0.86rem;
  line-height: 1.5;
  color: #475569;
}

.page-id-insights .section-insights-category-summary-grid .section-card-cta-line {
  margin-top: 10px;
}

.page-id-insights .section-insights-category-summary-grid .section-card-cta-line .sector-link {
  font-weight: 700;
  font-size: 0.84rem;
  border-bottom: 0;
  color: #1e4a7a;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(30, 74, 122, 0.28);
}

.page-id-insights .insight-archive-list-block {
  margin-bottom: 14px;
}

.page-id-insights .insight-archive-section-head {
  margin-bottom: 4px;
}

.page-id-insights .insight-archive-title-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
  margin-top: 6px;
}

.page-id-insights .insight-archive-main-title {
  margin: 0;
  font-size: clamp(1.35rem, 2.2vw, 1.65rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
  flex: 1 1 220px;
}

.page-id-insights .insight-archive-sort {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  justify-content: flex-end;
  flex: 1 1 260px;
}

.page-id-insights .insight-archive-sort-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 650;
  color: #64748b;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(15, 23, 42, 0.1);
}

.page-id-insights .insight-archive-sort-pill.is-active {
  color: #0f172a;
  border-color: rgba(37, 79, 133, 0.22);
  background: #fff;
  box-shadow: 0 0 0 1px rgba(37, 79, 133, 0.1);
}

.page-id-insights .insight-archive-section-intro {
  margin-top: 10px;
  margin-bottom: 0;
  font-size: 0.9rem;
  color: #526077;
  max-width: 46rem;
}

.page-id-insights .insight-archive-article-grid {
  margin-top: 4px;
}

@media (min-width: 720px) and (max-width: 979px) {
  .page-id-insights .insight-archive-article-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 719px) {
  .page-id-insights .insight-archive-article-grid {
    grid-template-columns: 1fr;
  }
}

.page-id-insights .insight-card--hub-archive .card-media--insights-strip {
  max-height: 120px;
}

.page-id-insights .insight-card--hub-archive .card-media--insights-strip img {
  max-height: 120px;
  width: 100%;
  object-fit: cover;
}

.page-id-insights .insight-card--hub-archive {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.page-id-insights .insight-card--hub-archive:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(22, 30, 42, 0.07);
}

.page-id-insights .insight-card-date-line {
  margin: 0 0 6px;
  font-size: 0.78rem;
  font-weight: 650;
  color: #94a3b8;
  letter-spacing: 0.02em;
}

.page-id-insights .insight-card-tags {
  margin: 8px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
}

.page-id-insights .insight-card-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 650;
  color: #475569;
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.06);
}

.page-id-insights .insight-card--hub-archive .insight-card-read-link {
  font-weight: 700;
  font-size: 0.84rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(30, 74, 122, 0.28);
  border-bottom: 0;
}

.page-id-insights .insight-card--hub-archive .insight-card-read {
  margin-top: 10px;
}

/* Insight article cards: remove decorative blocks; editorial cover */
:is(.page-id-insights, .page-id-insights-ai, .page-id-insights-web-system, .page-id-insights-digital-operations) .insight-card::before,
:is(.page-id-insights, .page-id-insights-ai, .page-id-insights-web-system, .page-id-insights-digital-operations) .insight-card::after {
  display: none;
  content: none;
}

:is(.page-id-insights, .page-id-insights-ai, .page-id-insights-web-system, .page-id-insights-digital-operations) .insight-card {
  padding: 0;
  border-radius: 14px;
  border: 1px solid rgba(37, 79, 133, 0.1);
  background: #fff;
  box-shadow: 0 6px 20px rgba(22, 30, 42, 0.05);
  gap: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

:is(.page-id-insights, .page-id-insights-ai, .page-id-insights-web-system, .page-id-insights-digital-operations) .insight-card:hover {
  border-color: rgba(37, 79, 133, 0.18);
  box-shadow: 0 12px 30px rgba(22, 30, 42, 0.1);
}

:is(.page-id-insights, .page-id-insights-ai, .page-id-insights-web-system, .page-id-insights-digital-operations) .insight-card:focus-within {
  outline: 2px solid rgba(243, 154, 23, 0.45);
  outline-offset: 2px;
}

.page-id-insights .insight-card--featured {
  border-color: rgba(243, 154, 23, 0.22);
  box-shadow: 0 4px 16px rgba(22, 30, 42, 0.06);
}

/* Insights 列表頁專用：精選文章九宮格（editorial） */
.page-id-insights .insight-grid--hub-editorial {
  gap: 18px 20px;
  margin-top: 16px;
}

.page-id-insights .insight-grid--hub-editorial .insight-card {
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
  border-radius: 16px;
}

.page-id-insights .insight-grid--hub-editorial .insight-card:hover {
  transform: translateY(-2px);
  border-color: rgba(37, 79, 133, 0.16);
  box-shadow: 0 8px 20px rgba(22, 30, 42, 0.07);
}

.page-id-insights .insight-grid--hub-editorial .card-media--insights-strip::after {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.08) 0%, rgba(248, 250, 252, 0.55) 100%);
}

.page-id-insights .insight-grid--hub-editorial .card-media--insights-strip img {
  height: 96px;
}

.page-id-insights .insight-grid--hub-editorial .insight-card--featured .card-media--insights-strip img {
  height: 104px;
}

.page-id-insights .insight-grid--hub-editorial .insight-card-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 2.7em;
}

.page-id-insights .insight-grid--hub-editorial .insight-card-excerpt {
  -webkit-line-clamp: 3;
  flex: 0 1 auto;
}

.page-id-insights .insight-grid--hub-editorial .insight-card-text {
  padding: 14px 16px 16px;
  gap: 10px;
}

.page-id-insights .insight-grid--hub-editorial .insight-related--footer {
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.page-id-insights .insight-card-read {
  margin: 2px 0 0;
}

.page-id-insights .insight-card-read-link {
  font-size: 0.87rem;
  font-weight: 800;
  color: #1e4a7a;
  text-decoration: none;
  border-bottom: 1px solid rgba(30, 74, 122, 0.22);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.page-id-insights .insight-card-read-link:hover {
  color: #c26a08;
  border-bottom-color: rgba(194, 106, 8, 0.4);
}

:is(.page-id-insights, .page-id-insights-ai, .page-id-insights-web-system, .page-id-insights-digital-operations) .insight-card .card-media {
  border-radius: 0;
  position: relative;
  overflow: hidden;
}

:is(.page-id-insights, .page-id-insights-ai, .page-id-insights-web-system, .page-id-insights-digital-operations) .insight-card .card-media--insights-strip img {
  width: 100%;
  height: 88px;
  object-fit: cover;
  object-position: center center;
  display: block;
}

:is(.page-id-insights, .page-id-insights-ai, .page-id-insights-web-system, .page-id-insights-digital-operations)
  .insight-card--featured
  .card-media--insights-strip
  img {
  height: 102px;
}

:is(.page-id-insights, .page-id-insights-ai, .page-id-insights-web-system, .page-id-insights-digital-operations) .insight-card .card-media--insights-strip::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.12) 0%, rgba(248, 250, 252, 0.45) 100%);
  pointer-events: none;
}

:is(.page-id-insights, .page-id-insights-ai, .page-id-insights-web-system, .page-id-insights-digital-operations) .insight-card .card-media-banner {
  min-height: 88px;
  position: relative;
  background-size: cover;
}

.insight-card-featured-eyebrow {
  margin: 0 0 2px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #94a3b8;
}

.insight-card-text {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.insight-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}

.insight-card-meta-cat {
  color: #1e4a7a;
}

.insight-card-meta-date {
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #94a3b8;
}

.insight-card-title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.35;
  color: #152232;
}

.page-id-insights .insight-card--featured .insight-card-title {
  font-size: 1.08rem;
}

.insight-card-excerpt {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: #475569;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  flex: 1;
}

.page-id-insights .insight-card--featured .insight-card-excerpt {
  -webkit-line-clamp: 4;
}

.insight-related--footer {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid #edf1f6;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: center;
}

.insight-related-label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #94a3b8;
  text-transform: uppercase;
}

.insight-related-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.insight-related-chip {
  font-size: 0.78rem !important;
  font-weight: 600;
  padding: 4px 10px !important;
  min-height: 0 !important;
}

.insight-related-chip:focus-visible {
  outline: 2px solid rgba(243, 154, 23, 0.55);
  outline-offset: 2px;
}

.page-id-insights .related-pages {
  padding: 40px 0 56px;
}

.page-id-insights .related-pages--insights-next.related-pages--insights-muted {
  padding: 16px 0 24px;
  background: #f4f6f9;
  border-top: 1px solid rgba(15, 23, 42, 0.05);
}

.page-id-insights .related-pages--insights-next.related-pages--insights-muted::before {
  display: none;
}

.page-id-insights .related-pages--insights-next.related-pages--insights-muted .related-pages-intro {
  font-size: 0.82rem;
  color: #94a3b8;
  margin-top: 4px;
}

.page-id-insights .related-pages--insights-next.related-pages--insights-muted h2 {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  font-weight: 800;
}

.page-id-insights .related-pages--insights-next.related-pages--insights-muted .eyebrow {
  font-size: 0.6rem;
  color: #94a3b8;
}

.page-id-insights .insights-related-next-grid--muted .related-page-card {
  padding: 10px 12px;
  box-shadow: none;
  border-color: rgba(15, 23, 42, 0.06);
  background: rgba(255, 255, 255, 0.88);
}

.page-id-insights .insights-related-next-grid--muted .related-page-card:hover {
  transform: none;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
}

.page-id-insights .insights-related-next-grid--muted .related-page-card h3 {
  font-size: 0.98rem;
  margin-bottom: 0;
}

.page-id-insights .insights-related-next-grid--muted .related-page-link {
  font-weight: 700;
  font-size: 0.82rem;
}

.page-id-insights .related-pages--insights-next {
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(37, 79, 133, 0.1);
  background: linear-gradient(180deg, #f1f5f9 0%, #ffffff 42%);
}

.page-id-insights .related-pages--insights-next::before {
  content: "";
  position: absolute;
  right: -4%;
  top: 0;
  width: min(42%, 380px);
  height: 200px;
  background: url("/assets/images/insights/enterprise.png") right center / cover no-repeat;
  opacity: 0.05;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 40%, #000 100%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 40%, #000 100%);
}

.page-id-insights .related-pages .related-pages-intro {
  max-width: 40rem;
  line-height: 1.65;
  color: #526077;
  font-size: 0.95rem;
  position: relative;
  z-index: 1;
}

.page-id-insights .related-pages--insights-next .eyebrow,
.page-id-insights .related-pages--insights-next h2 {
  position: relative;
  z-index: 1;
}

.page-id-insights .related-pages--insights-next .eyebrow {
  color: #475569;
  font-weight: 800;
}

.page-id-insights .related-pages--insights-next h2 {
  color: #0f172a;
  letter-spacing: -0.02em;
}

.page-id-insights .insights-related-next-grid {
  position: relative;
  z-index: 1;
  gap: 16px 18px;
}

.page-id-insights .insights-related-next-grid .related-page-card {
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
  padding: 18px 16px 16px;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.page-id-insights .insights-related-next-grid .related-page-card:hover {
  border-color: rgba(37, 79, 133, 0.16);
  box-shadow: 0 6px 18px rgba(22, 30, 42, 0.06);
  transform: translateY(-1px);
}

.page-id-insights .insights-related-next-grid .related-page-card-eyebrow {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 6px;
  font-weight: 800;
}

.page-id-insights .insights-related-next-grid .related-page-card h3 {
  font-size: 1.05rem;
  color: #0f172a;
  margin-bottom: 8px;
}

.page-id-insights .insights-related-next-grid .related-page-card-desc {
  font-size: 0.88rem;
  color: #475569;
  line-height: 1.55;
  -webkit-line-clamp: 3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.page-id-insights .insights-related-next-grid .related-page-card-foot {
  margin-top: 12px;
}

.page-id-insights .insights-related-next-grid .related-page-link {
  font-weight: 800;
  font-size: 0.88rem;
  color: #1e4a7a;
  text-decoration: none;
  border-bottom: 1px solid rgba(30, 74, 122, 0.22);
}

.page-id-insights .insights-related-next-grid .related-page-link:hover {
  color: #c26a08;
  border-bottom-color: rgba(194, 106, 8, 0.35);
}

@media (max-width: 979px) {
  .page-id-insights .page-hero-layout {
    grid-template-columns: 1fr;
  }

  .page-id-insights .insight-hero-featured-cta .btn {
    width: auto;
  }

  .page-id-insights .insight-topic-chip-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 639px) {
  .page-id-insights .page-hero {
    padding: 32px 0 22px;
  }

  .page-id-insights .section-insights-quick-nav,
  .page-id-insights .section-insights-topics,
  .page-id-insights .section-insights-library {
    padding-top: 36px;
    padding-bottom: 36px;
  }

  .page-id-insights .insight-hero-featured-excerpt {
    -webkit-line-clamp: 4;
  }
}

/* ---- Insights 文章詳情頁 ---- */
.page-insight-article-detail.insight-article-main {
  padding-bottom: 0;
}

.insight-article-header {
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-bottom: 0.5rem;
}

.insight-article-eyebrow {
  color: #64748b;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: none;
  font-size: 0.72rem;
}

.insight-article-h1 {
  font-size: clamp(1.45rem, 3vw, 1.85rem);
  letter-spacing: -0.02em;
  color: #0f172a;
  margin: 0.35rem 0 1rem;
  line-height: 1.28;
}

.insight-article-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 0.88rem;
  color: #64748b;
  margin-bottom: 12px;
}

.insight-article-meta-cat {
  font-weight: 800;
  color: #1e4a7a;
}

.insight-article-topic-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}

.insight-article-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #334155;
  background: rgba(37, 79, 133, 0.06);
  border: 1px solid rgba(37, 79, 133, 0.1);
}

.insight-article-lead {
  margin: 0;
  max-width: 52rem;
  font-size: 1.02rem;
  line-height: 1.7;
  color: #475569;
}

.insight-article-hero-visual {
  padding: 12px 0 8px;
}

.insight-article-hero-figure {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(37, 79, 133, 0.1);
  box-shadow: 0 10px 32px rgba(22, 30, 42, 0.08);
}

.insight-article-hero-img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}

.insight-article-body-wrap {
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
  padding-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.insight-article-prose {
  max-width: 46rem;
}

.insight-article-section {
  margin-bottom: clamp(1.35rem, 2.5vw, 1.85rem);
}

.insight-article-section-title {
  font-size: 1.12rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}

.insight-article-section-body {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.72;
  color: #334155;
}

.insight-article-cta-block {
  padding-top: clamp(1.5rem, 3vw, 2rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

.insight-article-cta-card {
  margin: 0;
}

.insight-article-cta-title {
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  margin: 0 0 10px;
}

.insight-article-related .insight-article-related-h2 {
  margin: 0 0 16px;
  font-size: clamp(1.2rem, 2vw, 1.4rem);
  color: #0f172a;
}

.insight-article-related-grid .related-page-card {
  min-height: 100%;
}

@media (max-width: 639px) {
  .insight-article-meta-row {
    font-size: 0.82rem;
  }
}

/* =========================================
   HOMEPAGE — credibility cleanup (no placeholder visuals)
   ========================================= */

/* Remove template “icon tile” pseudo-elements on homepage cards */
.page-id-home .section-card::before,
.page-id-home .section-card::after,
.page-id-home .proof-summary-card::before,
.page-id-home .proof-summary-card::after,
.page-id-home .case-card::before,
.page-id-home .case-card::after,
.page-id-home .insight-card::before,
.page-id-home .insight-card::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
}

/* Remove decorative orange blob on homepage hero (template / SaaS cue) */
.page-id-home .hero-content::after {
  display: none;
}

.page-id-home .hero {
  padding: clamp(52px, 6.5vw, 78px) 0 clamp(42px, 5vw, 62px);
  /* 極淡整體光感：左右欄共用同一層空氣（不重做底色，只疊一層） */
  background:
    radial-gradient(ellipse 118% 78% at 50% 36%, rgba(247, 244, 238, 0.38) 0%, transparent 56%),
    radial-gradient(ellipse 95% 58% at 58% 52%, rgba(228, 236, 246, 0.32) 0%, transparent 58%),
    linear-gradient(180deg, #e9eef5 0%, #f4f7fb 42%, #f8fafc 100%);
  border-bottom-color: rgba(37, 79, 133, 0.09);
}

/* 首頁 Hero 內層略收窄，視覺更集中（不影響全站 .container） */
.page-id-home .hero > .container.hero-layout {
  max-width: 1120px;
  width: min(1120px, 91%);
}

.page-id-home .hero-content {
  max-width: min(560px, 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.82) inset,
    0 5px 22px rgba(22, 30, 42, 0.04);
  border-color: rgba(37, 79, 133, 0.075);
  border-radius: 18px;
}

/* 對應指示之 .hero-eyebrow：沿用現有 <p class="eyebrow">，僅首頁左欄 */
.page-id-home .hero-content .eyebrow {
  margin-bottom: 10px;
  letter-spacing: 0.05em;
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #475569;
}

.page-id-home .hero-content h1 {
  font-size: clamp(32px, 3.6vw, 44px);
  line-height: 1.16;
  max-width: none;
  letter-spacing: -0.02em;
  margin: 0 0 15px;
  font-weight: 800;
  color: #0f172a;
}

@media (min-width: 980px) {
  .page-id-home .hero-content h1 {
    font-size: 44px;
  }

  /* 左欄右側內距略減，文字視覺上更靠近右欄 */
  .page-id-home .hero-content {
    padding-right: clamp(14px, 2.6vw, 26px);
  }
}

.page-id-home .hero-lead-stack {
  max-width: 42ch;
}

.page-id-home .hero-content .hero-lead {
  margin: 0 0 16px;
  color: #475569;
  font-size: 17px;
  line-height: 1.8;
  max-width: 52ch;
}

.page-id-home .hero-content .hero-lead--support {
  color: #4b5563;
  margin-top: 10px;
}

.page-id-home .hero-bullets {
  margin: 0 0 19px;
  padding-left: 1.35em;
  list-style-position: outside;
  list-style-type: disc;
  color: #334155;
  font-size: 0.95rem;
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.page-id-home .hero-bullets li {
  margin: 0;
  padding-left: 0.15em;
}

.page-id-home .hero-actions {
  margin-top: 0;
  margin-bottom: 0;
  gap: 12px;
}

.page-id-home .hero-actions .btn-primary {
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}

/* 次按鈕仍為 .btn-ghost（專案無 btn-secondary） */
.page-id-home .hero-actions .btn-ghost {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: none;
}

/* 首頁 Hero 右欄：交付摘要面板（單一完整卡片） */
.page-id-home .hero-visual.hero-visual--text-scope.hero-visual--home-delivery-panel {
  background: #fafbfc;
  color: #334155;
  border: 1px solid rgba(15, 23, 42, 0.08);
  /* 較垂直、較收斂的陰影，減少「獨立一塊」感 */
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.92) inset,
    0 10px 26px rgba(15, 23, 42, 0.055),
    0 2px 6px rgba(15, 23, 42, 0.035);
  padding: 0;
  min-height: 0;
  max-height: none;
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.page-id-home .hero-visual.hero-visual--home-delivery-panel::before {
  display: none;
}

.page-id-home .hero-visual.hero-visual--home-delivery-panel.hero-visual--with-photo .hero-visual-photo {
  position: relative;
  flex-shrink: 0;
  height: clamp(150px, 18vw, 180px);
  min-height: 150px;
  max-height: 180px;
  overflow: hidden;
  border-bottom: none;
}

.page-id-home .hero-visual.hero-visual--home-delivery-panel.hero-visual--with-photo .hero-visual-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

.page-id-home .hero-visual.hero-visual--home-delivery-panel .hero-visual-photo-micro {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 14px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #0f172a;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.1);
}

.page-id-home .hero-visual.hero-visual--home-delivery-panel .hero-visual-overlay {
  background: linear-gradient(
    180deg,
    rgba(15, 23, 42, 0) 0%,
    rgba(15, 23, 42, 0) 38%,
    rgba(248, 250, 252, 0.45) 72%,
    rgba(250, 251, 252, 0.97) 100%
  );
}

.page-id-home .hero-visual.hero-visual--home-delivery-panel .hero-visual-content {
  padding: 21px 22px 20px;
  border-top: 1px solid rgba(15, 23, 42, 0.045);
  margin-top: -1px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1 1 auto;
}

.page-id-home .hero-visual.hero-visual--home-delivery-panel .hero-visual-delivery-scope {
  background: transparent;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
}

.page-id-home .hero-visual.hero-visual--home-delivery-panel .hero-visual-delivery-scope-label {
  margin: 0 0 12px;
  font-size: 1rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.01em;
}

.page-id-home .hero-visual.hero-visual--home-delivery-panel .hero-visual-flow-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
}

.page-id-home .hero-visual.hero-visual--home-delivery-panel .hero-visual-flow-chip {
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.06);
  color: #1e293b;
  border: 1px solid rgba(15, 23, 42, 0.07);
}

.page-id-home .hero-visual.hero-visual--home-delivery-panel .hero-visual-delivery-scope-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-id-home .hero-visual.hero-visual--home-delivery-panel .hero-visual-delivery-scope-list li {
  display: grid;
  grid-template-columns: minmax(7.5em, 32%) minmax(0, 1fr);
  gap: 12px 14px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.07);
  align-items: start;
}

.page-id-home .hero-visual.hero-visual--home-delivery-panel .hero-visual-delivery-scope-list li:first-child {
  padding-top: 0;
}

.page-id-home .hero-visual.hero-visual--home-delivery-panel .hero-visual-delivery-scope-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.page-id-home .hero-visual.hero-visual--home-delivery-panel .hero-visual-delivery-scope-title {
  font-weight: 700;
  color: #0f172a;
  font-size: 0.875rem;
  line-height: 1.45;
}

.page-id-home .hero-visual.hero-visual--home-delivery-panel .hero-visual-delivery-scope-desc {
  font-size: 0.875rem;
  line-height: 1.55;
  color: #334155;
}

.page-id-home .hero-visual.hero-visual--home-delivery-panel .hero-visual-delivery-scope-note {
  margin-top: 14px;
  font-size: 12px;
  color: #64748b;
  line-height: 1.55;
  padding-top: 0;
  border-top: none;
}

@media (min-width: 780px) {
  .page-id-home .hero-layout {
    grid-template-columns: 1.08fr 0.92fr;
    gap: clamp(18px, 2.2vw, 24px);
    align-items: stretch;
  }
}

@media (min-width: 980px) {
  .page-id-home .hero-visual.hero-visual--home-delivery-panel {
    min-height: 430px;
    transform: translateX(-8px);
  }
}

.page-id-home main > .section {
  padding-top: clamp(3rem, 6vw, 4.25rem);
  padding-bottom: clamp(3rem, 6vw, 4.25rem);
}

.page-id-home .section-home-capabilities {
  background: linear-gradient(180deg, #ffffff 0%, #fafcfd 100%);
}

.page-id-home .section-home-capabilities .container > .section-intro {
  max-width: 62ch;
  line-height: 1.65;
}

.page-id-home .section-home-trust-logos.section-alt {
  background: linear-gradient(180deg, #f3f6fb 0%, #eef2f8 100%);
  border-top-color: rgba(37, 79, 133, 0.08);
}

.page-id-home .section-home-trust-logos .container > h2 {
  font-size: clamp(1.35rem, 2.5vw, 1.65rem);
  letter-spacing: -0.02em;
  color: #1a2332;
}

/* 首頁：標題列 + 右側 CTA（僅 logo_strip_headline_row 輸出） */
.page-id-home .section-home-trust-logos .logo-strip-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px 20px;
  margin: 0 0 14px;
}

.page-id-home .section-home-trust-logos .logo-strip-head-row h2 {
  flex: 1 1 18rem;
  margin: 0;
  min-width: min(100%, 16rem);
  font-size: clamp(1.35rem, 2.5vw, 1.65rem);
  letter-spacing: -0.02em;
  color: #1a2332;
}

.page-id-home .section-home-trust-logos .logo-strip-head-cta {
  flex: 0 0 auto;
  padding-top: 2px;
}

.page-id-home .section-home-trust-logos .logo-strip-lead {
  max-width: 58ch;
  margin: 0 0 22px;
  line-height: 1.65;
  color: #475569;
}

.page-id-home .section-home-trust-logos .logo-strip-intro {
  margin-bottom: 22px;
}

/* 固定欄數：2 → 3 → 4 → 6（與 auto-fill 脫鉤，避免桌面欄數飄移） */
.page-id-home .section-home-trust-logos .logo-grid.logo-grid--named {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
  align-items: stretch;
}

@media (min-width: 640px) {
  .page-id-home .section-home-trust-logos .logo-grid.logo-grid--named {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 980px) {
  .page-id-home .section-home-trust-logos .logo-grid.logo-grid--named {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .page-id-home .section-home-trust-logos .logo-grid.logo-grid--named {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.page-id-home .section-home-trust-logos .logo-card.logo-card--named {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  height: 100%;
  min-height: 152px;
  box-sizing: border-box;
  padding: 14px 12px 12px;
  text-align: center;
}

.page-id-home .section-home-trust-logos .logo-card-media {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 64px;
  margin: 4px 0 10px;
}

.page-id-home .section-home-trust-logos .logo-card-media .case-card-image-trigger img {
  max-height: 48px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: none;
  opacity: 1;
}

.page-id-home .section-home-trust-logos .logo-card-name {
  margin: auto 0 0;
  padding: 0 2px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.35;
  color: #334155;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.35em * 2);
}

.page-id-home .section-home-trust-logos .logo-card-category {
  margin: 4px 0 0;
  font-size: 0.65rem;
  font-weight: 600;
  color: #94a3b8;
}

.page-id-home .section-home-ai-focus {
  background: #fff;
}

/* AI 重點方向：放寬標題／intro 寬度，減少桌面版過早斷行（標題語意為 h2） */
.page-id-home .section-home-ai-focus .container > h2,
.page-id-home .section-home-ai-focus .container > .section-intro {
  max-width: 920px;
}

.page-id-home .section-home-ai-focus .container > h2 {
  width: auto;
  line-height: 1.25;
  word-break: keep-all;
  overflow-wrap: normal;
}

@media (max-width: 639px) {
  .page-id-home .section-home-ai-focus .container > h2 {
    word-break: normal;
    overflow-wrap: break-word;
  }
}

.page-id-home .section-home-ai-focus .section-card {
  background: #fff;
  border-color: rgba(37, 79, 133, 0.1);
  box-shadow: 0 4px 16px rgba(22, 30, 42, 0.04);
}

.page-id-home .section-home-industries {
  background: linear-gradient(180deg, #fafbfe 0%, #ffffff 100%);
}

.page-id-home .section-home-industries .section-card {
  border-radius: 16px;
  border-color: rgba(37, 79, 133, 0.08);
  box-shadow: 0 4px 18px rgba(22, 30, 42, 0.04);
}

.page-id-home .section-home-proof-summary {
  background: linear-gradient(135deg, rgba(37, 79, 133, 0.05) 0%, rgba(243, 154, 23, 0.06) 100%);
}

.page-id-home .section-home-proof-summary .proof-summary-card {
  border-color: rgba(37, 79, 133, 0.12);
  box-shadow: 0 6px 24px rgba(22, 30, 42, 0.06);
}

.page-id-home .section-home-proof-summary .proof-summary-card h3 {
  font-size: 1.02rem;
  letter-spacing: -0.01em;
}

.page-id-home .section-home-case-studies {
  background: #fff;
}

.page-id-home .section-home-case-studies .container > .section-intro {
  max-width: 54ch;
  line-height: 1.65;
  color: #475569;
  margin-top: 0.35rem;
}

/* 重點案例：分類導覽（anchor pills，可換行；與全站 .chip 疊加時仍須像按鈕） */
.page-id-home .section-home-case-studies .home-case-tag-nav-outer {
  margin: 1.25rem 0 1.5rem;
  display: block;
}

.page-id-home .section-home-case-studies .home-case-tag-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.65rem;
  align-items: center;
  justify-content: flex-start;
  margin-top: 0;
}

.page-id-home .section-home-case-studies a.home-case-tag-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  min-height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(37, 79, 133, 0.28);
  background: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #334155;
  text-decoration: none;
  line-height: 1.35;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.page-id-home .section-home-case-studies a.home-case-tag-pill:hover {
  border-color: rgba(37, 79, 133, 0.55);
  background: rgba(37, 79, 133, 0.07);
  color: #0f172a;
}

.page-id-home .section-home-case-studies a.home-case-tag-pill:focus-visible {
  outline: 2px solid rgba(243, 154, 23, 0.9);
  outline-offset: 2px;
}

.page-id-home .section-home-case-studies a.home-case-tag-pill.is-active {
  border-color: rgba(37, 79, 133, 0.62);
  background: rgba(37, 79, 133, 0.12);
  color: #0f172a;
  box-shadow: 0 0 0 1px rgba(37, 79, 133, 0.18);
}

.page-id-home .section-home-case-studies .home-case-tag-pill-label {
  display: inline-block;
  pointer-events: none;
}

.page-id-home .section-home-why-igears.section-alt {
  background: linear-gradient(180deg, #f5f8fc 0%, #edf2f9 100%);
}

.page-id-home .section-home-why-igears .section-card {
  border-color: rgba(37, 79, 133, 0.1);
  background: #fff;
  box-shadow: 0 6px 22px rgba(22, 30, 42, 0.05);
}

.page-id-home .section-home-insights.section-alt {
  background: #fff;
  border-top: 1px solid var(--line);
}

.page-id-home .case-grid--home-featured .case-card {
  border-radius: 16px;
  border-color: rgba(37, 79, 133, 0.1);
  box-shadow: 0 6px 22px rgba(22, 30, 42, 0.06);
  padding: 22px 24px 24px;
  scroll-margin-top: 96px;
}

.page-id-home .case-grid--home-featured .case-card:target {
  box-shadow:
    0 0 0 2px rgba(243, 154, 23, 0.55),
    0 6px 22px rgba(22, 30, 42, 0.08);
}

.page-id-home .case-grid--home-featured .case-card-head-label {
  display: inline-block;
  margin: 0 0 14px;
  padding: 6px 12px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #334155;
  background: #f1f5f9;
  border: 1px solid rgba(37, 79, 133, 0.12);
  border-radius: 999px;
}

.page-id-home .case-grid--home-featured .case-card h3 {
  font-size: 1.12rem;
  letter-spacing: -0.02em;
  color: #1a2332;
  line-height: 1.35;
  margin: 0 0 1rem;
}

.page-id-home .case-grid--home-featured .case-detail-block {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0 0 1.15rem;
  padding: 0 0 1.05rem;
  border-bottom: 1px solid rgba(37, 79, 133, 0.08);
}

.page-id-home .case-grid--home-featured .case-detail-block:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.page-id-home .case-grid--home-featured .case-detail-label {
  display: block;
  margin: 0;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
  line-height: 1.4;
}

.page-id-home .case-grid--home-featured .case-detail-text {
  display: block;
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
  line-height: 1.7;
  color: #475569;
  max-width: 65ch;
}

.page-id-home .section-more--cta {
  margin-top: 28px;
}

.page-id-home .section-more--cta .btn-primary {
  min-height: 44px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.page-id-home .insight-grid--home-editorial .insight-card {
  border-radius: 16px;
  border-color: rgba(37, 79, 133, 0.12);
  box-shadow: 0 6px 22px rgba(22, 30, 42, 0.06);
  background: #fff;
}

.page-id-home .insight-grid--home-editorial .insight-card--text-only {
  padding: 22px 22px 20px;
}

.page-id-home .insight-grid--home-editorial .insight-card--text-only .insight-card-text {
  padding: 0;
}

.page-id-home .insight-grid--home-editorial .insight-card-title {
  font-size: 1.06rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.4;
  color: #1a2332;
}

.page-id-home .insight-grid--home-editorial .insight-card-excerpt {
  color: #475569;
  line-height: 1.6;
}

.page-id-home .insight-grid--home-editorial .insight-card-meta-cat {
  font-weight: 800;
}

.page-id-home .section-home-final-cta {
  padding-top: clamp(3.25rem, 6.5vw, 4.5rem);
  padding-bottom: clamp(3.25rem, 6.5vw, 4.5rem);
}

.page-id-home .section-home-final-cta .card.service-cta--home-closing {
  background: linear-gradient(135deg, #1a2f4a 0%, #254a7a 48%, #1e3a5f 100%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 56px rgba(22, 30, 42, 0.2);
  padding: clamp(28px, 4vw, 40px) clamp(24px, 4vw, 40px);
}

.page-id-home .section-home-final-cta .service-cta--home-closing .eyebrow {
  color: rgba(255, 214, 170, 0.95);
}

.page-id-home .section-home-final-cta .service-cta--home-closing h2 {
  color: #fff;
  font-size: clamp(1.45rem, 2.6vw, 1.85rem);
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.page-id-home .section-home-final-cta .service-cta--home-closing > p {
  color: rgba(255, 255, 255, 0.88);
  max-width: 52ch;
  line-height: 1.65;
}

.page-id-home .section-home-final-cta .service-cta--home-closing .hero-actions {
  margin-top: 22px;
}

.page-id-home .section-home-final-cta .service-cta--home-closing .btn-primary {
  background: #fff;
  color: #1a2f4a;
  font-weight: 800;
  border: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.page-id-home .section-home-final-cta .service-cta--home-closing .btn-primary:hover {
  background: #f8fafc;
  color: #152a45;
}

.page-id-home .section-home-final-cta .service-cta--home-closing .btn-ghost {
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.page-id-home .section-home-final-cta .service-cta--home-closing .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.5);
}

.page-id-home .section-home-capabilities .section-card {
  border-color: rgba(37, 79, 133, 0.1);
  box-shadow: 0 6px 22px rgba(22, 30, 42, 0.05);
}

@media (max-width: 979px) {
  .page-id-home .hero-layout {
    gap: 20px;
  }

  .page-id-home .hero-content h1 {
    font-size: clamp(26px, 6vw, 34px);
    line-height: 1.22;
    max-width: none;
  }

  .page-id-home .hero-lead-stack {
    max-width: none;
  }

  .page-id-home .hero-visual.hero-visual--home-delivery-panel.hero-visual--with-photo .hero-visual-photo {
    height: clamp(140px, 42vw, 168px);
    min-height: 140px;
    max-height: 180px;
  }

  .page-id-home .hero-visual.hero-visual--home-delivery-panel .hero-visual-delivery-scope-list li {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* ---- AI governance: 前期溝通原則頁（page-id-ai-governance）---- */

.page-id-ai-governance .page-hero-copy::after {
  display: none;
}

.page-id-ai-governance .page-hero-layout {
  gap: 22px;
  align-items: start;
}

@media (min-width: 980px) {
  .page-id-ai-governance .page-hero-layout {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}

.page-id-ai-governance .page-intro {
  font-size: 1.02rem;
  line-height: 1.65;
  color: #475569;
}

.page-id-ai-governance .page-hero-value-bullets {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  max-width: 52rem;
}

.page-id-ai-governance .page-hero-value-bullets li {
  position: relative;
  padding-left: 1.15rem;
  font-size: 0.98rem;
  line-height: 1.55;
  color: #3d4a5c;
}

.page-id-ai-governance .page-hero-value-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(37, 79, 133, 0.45);
}

.page-id-ai-governance .page-hero-visual.page-hero-visual--text-summary {
  min-height: 0;
  background: #f8fafc;
  color: #1e293b;
  border: 1px solid rgba(37, 79, 133, 0.14);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset, 0 10px 32px rgba(22, 30, 42, 0.06);
}

.page-id-ai-governance .page-hero-visual.page-hero-visual--text-summary::before {
  display: none;
}

.page-id-ai-governance .page-hero-visual.page-hero-visual--text-summary .page-hero-visual-content {
  min-height: 0;
  align-content: start;
  gap: 14px;
  padding: clamp(18px, 2.5vw, 26px);
}

.page-id-ai-governance .page-hero-visual--text-summary .page-hero-visual-panel-eyebrow {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}

.page-id-ai-governance .page-hero-visual--text-summary .page-hero-visual-delivery-scope {
  margin: 0;
  padding: 14px 16px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(37, 79, 133, 0.1);
}

.page-id-ai-governance .page-hero-visual--text-summary .page-hero-visual-delivery-scope-label {
  margin: 0 0 10px;
  font-size: 0.95rem;
  font-weight: 800;
  color: #1e293b;
}

.page-id-ai-governance .page-hero-visual--text-summary .page-hero-visual-delivery-scope-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.page-id-ai-governance .page-hero-visual--text-summary .page-hero-visual-delivery-scope-list li {
  margin: 0;
  padding: 8px 0 8px 12px;
  border-left: 2px solid rgba(37, 79, 133, 0.2);
  font-size: 0.92rem;
  line-height: 1.45;
  color: #334155;
}

.page-id-ai-governance .page-hero-visual--text-summary .page-hero-visual-delivery-scope-title {
  display: block;
  font-weight: 700;
}

.page-id-ai-governance .section-ai-gov-scope .section-intro {
  max-width: 58rem;
  font-size: 1.02rem;
  line-height: 1.65;
  margin-bottom: 22px;
}

.page-id-ai-governance .section-ai-gov-scope .container > h2 {
  letter-spacing: -0.02em;
}

.page-id-ai-governance .section-ai-gov-step-grid {
  gap: 16px 18px;
}

.page-id-ai-governance .section-ai-gov-step-grid .ai-gov-scope-card {
  padding-top: 52px;
  align-self: start;
  border-radius: 14px;
  border-color: rgba(37, 79, 133, 0.1);
  box-shadow: 0 4px 18px rgba(22, 30, 42, 0.04);
}

.page-id-ai-governance .section-ai-gov-step-grid .ai-gov-scope-card .step-index {
  top: 16px;
  left: 18px;
  width: 26px;
  height: 26px;
  font-size: 0.78rem;
  font-weight: 700;
  background: rgba(37, 79, 133, 0.08);
  color: #475569;
}

.page-id-ai-governance .section-ai-gov-step-grid .step-micro-label {
  position: absolute;
  top: 18px;
  right: 16px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: #94a3b8;
}

.page-id-ai-governance .section-ai-gov-step-grid .ai-gov-scope-card h3 {
  font-size: 1.05rem;
  line-height: 1.35;
  margin-bottom: 8px;
}

.page-id-ai-governance .section-ai-gov-step-grid .ai-gov-scope-card p {
  font-size: 0.95rem;
  line-height: 1.58;
  color: #4b5568;
  margin: 0;
}

.page-id-ai-governance .section-ai-gov-assumptions {
  padding-top: 36px;
  padding-bottom: 36px;
  background: linear-gradient(180deg, #fbfcfe 0%, #f4f7fb 100%);
}

.page-id-ai-governance .section-ai-gov-assumptions .container > h2 {
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}

.page-id-ai-governance .section-ai-gov-assumptions .case-study-bullet-list {
  margin: 18px 0 0;
  padding: 18px 20px;
  max-width: 52rem;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(37, 79, 133, 0.1);
  list-style: none;
}

.page-id-ai-governance .section-ai-gov-assumptions .case-study-bullet-list li {
  position: relative;
  padding-left: 1.25rem;
  margin: 0 0 12px;
  font-size: 0.98rem;
  line-height: 1.55;
  color: #3d4a5c;
}

.page-id-ai-governance .section-ai-gov-assumptions .case-study-bullet-list li:last-child {
  margin-bottom: 0;
}

.page-id-ai-governance .section-ai-gov-assumptions .case-study-bullet-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: rgba(37, 79, 133, 0.45);
  font-weight: 700;
}

.page-id-ai-governance .section-ai-gov-dialogue .section-intro {
  max-width: 54rem;
  font-size: 1.04rem;
  line-height: 1.7;
  margin-bottom: 22px;
}

/* 移除全站 .section-card 預設偽元素「假 icon 方塊／裝飾光斑」（本頁此區為純文字卡，無真 SVG） */
.page-id-ai-governance .section-ai-gov-dialogue .section-card::before,
.page-id-ai-governance .section-ai-gov-dialogue .section-card::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}

.page-id-ai-governance .section-ai-gov-dialogue-grid {
  align-items: start;
}

.page-id-ai-governance .section-ai-gov-dialogue-grid .section-card {
  min-height: 0;
  border-radius: 14px;
  border-color: rgba(37, 79, 133, 0.1);
  padding: 18px 20px 20px;
  overflow: visible;
}

.page-id-ai-governance .section-ai-gov-dialogue-grid .section-card h3 {
  margin-top: 0;
  font-size: 1.05rem;
  line-height: 1.35;
}

.page-id-ai-governance .section-ai-gov-dialogue-grid .section-card p {
  font-size: 0.96rem;
  line-height: 1.62;
  color: #4b5568;
}

.page-id-ai-governance .section-ai-gov-cta .service-cta--governance.service-cta--layout-split {
  padding: 0;
  border-radius: 16px;
  border-color: rgba(37, 79, 133, 0.12);
  box-shadow: 0 8px 28px rgba(22, 30, 42, 0.06);
}

.page-id-ai-governance .section-ai-gov-cta .service-cta--governance .service-cta-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px 32px;
  align-items: start;
  padding: clamp(22px, 3vw, 34px);
}

.page-id-ai-governance .section-ai-gov-cta .service-cta--governance .service-cta-split-copy h2 {
  font-size: clamp(1.2rem, 2.2vw, 1.45rem);
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.page-id-ai-governance .section-ai-gov-cta .service-cta--governance .service-cta-split-copy > p {
  font-size: 1.02rem;
  line-height: 1.65;
  color: #475569;
  max-width: 46rem;
}

.page-id-ai-governance .section-ai-gov-cta .service-cta--governance .service-cta-split-actions .hero-actions {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin: 0;
}

.page-id-ai-governance .section-ai-gov-cta .service-cta--governance .service-cta-split-actions .btn {
  justify-content: center;
}

.page-id-ai-governance .related-pages--ai-governance .related-pages-intro {
  max-width: 48rem;
  font-size: 1rem;
  line-height: 1.6;
  color: #475569;
  margin-bottom: 18px;
}

.page-id-ai-governance .related-pages--ai-governance .related-page-card-desc {
  font-size: 0.95rem;
  line-height: 1.58;
  color: #4b5568;
}

@media (max-width: 899px) {
  .page-id-ai-governance .section-ai-gov-cta .service-cta--governance .service-cta-split {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* ----- Case cards: client name + image lightbox (shared) ----- */
.case-card-client-name {
  margin: 0 0 10px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #0f172a;
  line-height: 1.35;
}

.section-card--catalog-case .case-card-client-name {
  margin-top: 4px;
}

.case-card-image-trigger {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  text-align: left;
  font: inherit;
  line-height: 0;
}

.case-card-image-trigger:focus-visible {
  outline: 2px solid rgba(243, 154, 23, 0.65);
  outline-offset: 2px;
}

.case-card-image-trigger img {
  display: block;
  width: 100%;
  height: auto;
}

.card-media--case-modal .case-card-image-trigger:hover img,
.section-card-image-strip--case-modal .case-card-image-trigger:hover .section-card-image-strip-img {
  transform: scale(1.015);
  transition: transform 0.2s ease;
}

.section-card-image-strip {
  position: relative;
}

.section-card-image-strip--case-modal .case-card-image-trigger--strip {
  position: relative;
  z-index: 2;
}

.section-card-image-strip--case-modal .section-card-image-strip-overlay {
  pointer-events: none;
  z-index: 1;
}

.site-image-modal {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}

.site-image-modal[hidden] {
  display: none !important;
}

.site-image-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.78);
  cursor: pointer;
}

.site-image-modal-dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: min(96vw, 1200px);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 12px;
}

.site-image-modal-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 0;
  background: rgba(255, 255, 255, 0.95);
  color: #0f172a;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2);
}

.site-image-modal-close:hover {
  background: #fff;
}

.site-image-modal-figure-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  width: 100%;
  max-height: 88vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.site-image-modal-image {
  display: block;
  max-width: 100%;
  max-height: min(78vh, 860px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.site-image-modal-caption {
  color: #f1f5f9;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
  max-width: 42rem;
  line-height: 1.45;
}

.site-image-modal-caption:empty {
  display: none;
}


/* ============================================================
   Footer grid 5-column layout (added after Products nav item)
   ============================================================ */
.footer-grid-5 {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
}
.footer-grid-6 {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 960px) {
  .footer-grid-5,
  .footer-grid-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .footer-grid-5,
  .footer-grid-6 {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Product page — pills, feature grid, icon strip, coming-soon
   ============================================================ */

/* Base pill/tag styles — previously pills rendered without spacing */
.section-card .section-card-pills,
.section-card-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin: 10px 0 14px;
}
.section-card .section-card-pill,
.section-card-pill {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid #e0e0e0;
  border-radius: 999px;
  font-size: 0.82em;
  color: #555;
  background: #f8f9fa;
  line-height: 1.4;
}
.section-card .section-card-tags,
.section-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin: 0 0 10px;
}
.section-card .section-card-tag,
.section-card-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.78em;
  font-weight: 500;
  color: #b34700;
  background: rgba(243, 154, 23, 0.12);
  border: 1px solid rgba(243, 154, 23, 0.24);
  line-height: 1.4;
}

/* 3-column mini feature grid inside a product card */
.product-features-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0 12px;
}
.product-feature-mini {
  text-align: center;
  padding: 14px 10px;
  background: #f8f9fa;
  border: 1px solid #eef0f2;
  border-radius: 10px;
}
.product-feature-mini__icon {
  font-size: 1.6em;
  line-height: 1;
  margin-bottom: 6px;
}
.product-feature-mini__title {
  font-size: 0.92em;
  font-weight: 600;
  margin: 0 0 4px;
  color: #222;
}
.product-feature-mini__text {
  font-size: 0.82em;
  color: #666;
  line-height: 1.4;
  margin: 0;
}
.product-origin-note {
  font-size: 0.88em;
  color: #666;
  margin: 8px 0 10px;
}
@media (max-width: 720px) {
  .product-features-grid {
    grid-template-columns: 1fr;
  }
}

/* Compact icon strip for homepage product cards */
.product-icon-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 10px 0 14px;
  font-size: 0.9em;
  color: #444;
}
.product-icon-strip__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.product-icon-strip__icon {
  font-size: 1.1em;
  line-height: 1;
}

/* Coming Soon card — visually distinct from active product card */
.section-card.section-card--coming-soon {
  border-style: dashed !important;
  border-color: #d0d0d0 !important;
  background: #fafafa !important;
  opacity: 0.92;
}
.section-card.section-card--coming-soon::before {
  background: linear-gradient(135deg, rgba(160, 160, 160, 0.14), rgba(160, 160, 160, 0.04)) !important;
  box-shadow: inset 0 0 0 1px rgba(160, 160, 160, 0.24) !important;
}
.section-card.section-card--coming-soon::after {
  opacity: 0.35;
}
.section-card.section-card--coming-soon .section-card-tag {
  color: #666;
  background: #efefef;
  border-color: #dcdcdc;
}
.section-card.section-card--coming-soon h3 {
  color: #555;
}

/* Products page — reduce hero bottom gap and visual min-height */
.page-id-products-hub .page-hero { padding-bottom: 28px; }
.page-id-products-hub .page-hero-visual { min-height: 240px; }
.page-id-products-hub .page-hero-visual-photo { position: absolute; inset: 0; z-index: 0; }
.page-id-products-hub .section-products-hub-grid { padding-top: 32px; }
.page-id-products-hub .card-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.page-id-products-hub .card-media {
  margin-bottom: 14px;
}

/* Products page compaction — add grid-2 base rule and tighten card spacing */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 860px) {
  .grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
}

/* Compact feature grid (reduce vertical footprint of each product card) */
.page-id-products-hub .product-features-grid {
  gap: 8px;
  margin: 12px 0 8px;
}
.page-id-products-hub .product-feature-mini {
  padding: 10px 8px;
}
.page-id-products-hub .product-feature-mini__title {
  font-size: 0.88em;
}
.page-id-products-hub .product-feature-mini__text {
  font-size: 0.78em;
  line-height: 1.35;
}
.page-id-products-hub .section-card h3 {
  margin-bottom: 6px;
}
.page-id-products-hub .section-card-value-line {
  margin-bottom: 8px;
}
.page-id-products-hub .section-card-pills {
  margin: 8px 0 10px;
}
.page-id-products-hub .section-card .card-media img {
  max-height: 180px;
  object-fit: cover;
}

/* =========================================
   Products hub — coloured initial icons
   ========================================= */
html:has(body.page-id-products-hub) {
  scroll-behavior: smooth;
}

.section-card.section-card--product::before {
  content: "";
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  background: #0891B2;
  box-shadow: none;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1;
}
.section-card.section-card--product-sp::before {
  content: "SP";
  background: #DC3545;
}
.section-card.section-card--product-sms::before {
  content: "SMS";
  background: #2563EB;
  font-size: 11px;
}
.section-card.section-card--product-wc::before {
  content: "";
  background: #fff url("/assets/img/products/icon-askcore.png") center/64% no-repeat;
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.28);
  color: transparent;
  font-size: 0;
  letter-spacing: 0;
}
.section-card.section-card--product-hlu::before {
  content: "HLU";
  background: #7C3AED;
  font-size: 11px;
}
.section-card.section-card--product-webetter::before {
  content: "";
  background: #fff url("/assets/img/products/icon-webetter.png") center/64% no-repeat;
  box-shadow: inset 0 0 0 1px rgba(8, 145, 178, 0.28);
  color: transparent;
  font-size: 0;
  letter-spacing: 0;
}

/* Homepage SaaS section — coloured initial icons (nth-child fallback so
   cards do not need data-level class edits). Scoped to .section-home-products. */
.section-home-products .section-card-grid > .section-card::before {
  content: "";
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  box-shadow: none;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1;
}
.section-home-products .section-card-grid > .section-card:nth-child(1)::before {
  content: "SP";
  background: #DC3545;
}
.section-home-products .section-card-grid > .section-card:nth-child(2)::before {
  content: "SMS";
  background: #2563EB;
  font-size: 11px;
}
.section-home-products .section-card-grid > .section-card:nth-child(3)::before {
  content: "";
  background: #fff url("/assets/img/products/icon-askcore.png") center/64% no-repeat;
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.28);
  color: transparent;
  font-size: 0;
  letter-spacing: 0;
}
.section-home-products .section-card-grid > .section-card:nth-child(4)::before {
  content: "HLU";
  background: #7C3AED;
  font-size: 11px;
}

/* Products hub + homepage SaaS — real logo assets for SendPromotion and Webetter Chat */
.section-card.section-card--product-sp::before,
.section-home-products .section-card-grid > .section-card:nth-child(1)::before {
  content: "";
  background: #fff url("/assets/img/products/icon-sendpromotion.png") center/72% no-repeat;
  box-shadow: inset 0 0 0 1px rgba(220, 53, 69, 0.28);
  color: transparent;
  font-size: 0;
  letter-spacing: 0;
}
.section-card.section-card--product-wc::before,
.section-home-products .section-card-grid > .section-card:nth-child(3)::before {
  content: "";
  background: #fff url("/assets/img/products/icon-askcore.png") center/64% no-repeat;
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.28);
  color: transparent;
  font-size: 0;
  letter-spacing: 0;
}

/* Products hub + homepage SaaS — PhotoCen / MyMovieStar / GenCMS initials */
.section-card.section-card--product-photocen::before {
  content: "";
  background: #fff url("/assets/img/products/icon-photocen.png") center/64% no-repeat;
  box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.28);
  color: transparent;
  font-size: 0;
  letter-spacing: 0;
}
.section-card.section-card--product-mymoviestar::before {
  content: "";
  background: #fff url("/assets/img/products/icon-mymoviestar-new.png") center/64% no-repeat;
  box-shadow: inset 0 0 0 1px rgba(194, 65, 12, 0.28);
  color: transparent;
  font-size: 0;
  letter-spacing: 0;
}
.section-card.section-card--product-gencms::before {
  content: "";
  background: #fff url("/assets/img/products/icon-gencms.png") center/64% no-repeat;
  box-shadow: inset 0 0 0 1px rgba(75, 20, 255, 0.28);
  color: transparent;
  font-size: 0;
  letter-spacing: 0;
}
.section-card.section-card--product-learnsys::before {
  content: "";
  background: #fff url("/assets/img/products/icon-learnsys.png") center/64% no-repeat;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.28);
  color: transparent;
  font-size: 0;
  letter-spacing: 0;
}
.section-card.section-card--product-duckbot::before {
  content: "";
  background: #F5C400 url("/assets/img/products/icon-duckbot.png") center/64% no-repeat;
  box-shadow: inset 0 0 0 1px rgba(17, 17, 17, 0.18);
  color: transparent;
  font-size: 0;
  letter-spacing: 0;
}
.section-card.section-card--product-promopilot::before {
  content: "";
  background: #fff url("/assets/img/products/icon-promopilot.png") center/64% no-repeat;
  box-shadow: inset 0 0 0 1px rgba(237, 28, 36, 0.28);
  color: transparent;
  font-size: 0;
  letter-spacing: 0;
}
.section-card.section-card--product-insightbook::before {
  content: "";
  background: #fff url("/assets/img/products/icon-insightbook.png") center/64% no-repeat;
  box-shadow: inset 0 0 0 1px rgba(26, 72, 118, 0.28);
  color: transparent;
  font-size: 0;
  letter-spacing: 0;
}
.section-card.section-card--product-hrflowtech::before {
  content: "";
  background: #fff url("/assets/img/products/icon-hrflowtech.png") center/64% no-repeat;
  box-shadow: inset 0 0 0 1px rgba(91, 75, 240, 0.28);
  color: transparent;
  font-size: 0;
  letter-spacing: 0;
}
.section-card.section-card--product-appointsys::before {
  content: "";
  background: #fff url("/assets/img/products/icon-appointsys.png") center/64% no-repeat;
  box-shadow: inset 0 0 0 1px rgba(30, 144, 255, 0.28);
  color: transparent;
  font-size: 0;
  letter-spacing: 0;
}
.section-card.section-card--product-itchurch::before {
  content: "";
  background: #fff url("/assets/img/products/icon-itchurch.png") center/64% no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 140, 0, 0.28);
  color: transparent;
  font-size: 0;
  letter-spacing: 0;
}
.section-card.section-card--product-membersys::before {
  content: "";
  background: #fff url("/assets/img/products/icon-membersys.png") center/64% no-repeat;
  box-shadow: inset 0 0 0 1px rgba(30, 30, 140, 0.28);
  color: transparent;
  font-size: 0;
  letter-spacing: 0;
}
.section-card.section-card--product-paperless::before {
  content: "";
  background: #fff url("/assets/img/products/icon-paperless.png") center/64% no-repeat;
  box-shadow: inset 0 0 0 1px rgba(0, 51, 0, 0.28);
  color: transparent;
  font-size: 0;
  letter-spacing: 0;
}
.section-card.section-card--product-e12::before {
  content: "";
  background: #fff url("/assets/img/products/icon-e12.png") center/64% no-repeat;
  box-shadow: inset 0 0 0 1px rgba(30, 41, 59, 0.28);
  color: transparent;
  font-size: 0;
  letter-spacing: 0;
}
.section-card.section-card--product-learnsys-global::before {
  content: "";
  background: #fff url("/assets/img/products/icon-learnsys-global.png") center/64% no-repeat;
  box-shadow: inset 0 0 0 1px rgba(63, 175, 164, 0.28);
  color: transparent;
  font-size: 0;
  letter-spacing: 0;
}

.section-card.section-card--product-fileec::before {
  content: "";
  background: #fff url("/assets/img/products/icon-fileec-light.png") center/64% no-repeat;
  box-shadow: inset 0 0 0 1px rgba(11, 61, 145, 0.28);
  color: transparent;
  font-size: 0;
  letter-spacing: 0;
}

/* Products hub + homepage SaaS — SendSMS.click brand icon */
.section-card.section-card--product-sms::before,
.section-home-products .section-card-grid > .section-card:nth-child(2)::before {
  content: "";
  background: url("/assets/img/products/icon-sendsms.svg") center/cover no-repeat;
  color: transparent;
  font-size: 0;
  letter-spacing: 0;
}

/* Products hub + homepage SaaS — HumanLevelUP brand mark */
.section-card.section-card--product-hlu::before,
.section-home-products .section-card-grid > .section-card:nth-child(4)::before {
  content: "";
  background: #1a1a2e url("/assets/img/products/icon-humanlevelup.png") center/64% no-repeat; box-shadow: inset 0 0 0 1px rgba(79, 195, 247, 0.35);
  color: transparent;
  font-size: 0;
  letter-spacing: 0;
}

/* Product filter bar */
.product-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.product-filter-btn {
  padding: 6px 16px;
  border: 1px solid var(--border-color, #d1d5db);
  border-radius: 999px;
  background: transparent;
  color: var(--text-color, #374151);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.product-filter-btn:hover {
  border-color: var(--accent-color, #2563eb);
  color: var(--accent-color, #2563eb);
}
.product-filter-btn--active {
  background: var(--accent-color, #2563eb);
  color: #fff;
  border-color: var(--accent-color, #2563eb);
}
.section-card--product[data-filter-hidden] {
  display: none;
}

.product-filter-wrap {
  margin-bottom: 28px;
}
.product-filter-search {
  margin-bottom: 12px;
}
.product-filter-search-input {
  width: 100%;
  max-width: 400px;
  padding: 10px 16px;
  border: 1px solid var(--border-color, #d1d5db);
  border-radius: 8px;
  font-size: 0.9rem;
  background: var(--card-bg, #fff);
  color: var(--text-color, #374151);
  outline: none;
  transition: border-color 0.15s;
}
.product-filter-search-input:focus {
  border-color: var(--accent-color, #2563eb);
}

/* =========================================
   UI ENHANCEMENTS — eyebrow accents + section patterns
   (Appended via inject_ui_enhancements.py; safe to re-run.)
   ========================================= */

/* Eyebrow gets a small brand-coloured accent bar to its left */
.eyebrow {
  position: relative;
  padding-left: 14px;
}
.eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 14px;
  background: linear-gradient(180deg, #f39a17, #e76e1c);
  border-radius: 2px;
}

/* Subtle dot-grid pattern on alternating sections */
.section-alt {
  background-image:
    radial-gradient(rgba(31, 41, 55, 0.05) 1px, transparent 1.2px),
    linear-gradient(180deg, #f7f9fc 0%, #f1f4f9 100%);
  background-size: 22px 22px, auto;
  background-position: 0 0, 0 0;
}

/* Subtle top-edge gradient strip on non-alt sections for visual rhythm */
.section:not(.section-alt):not(.hero) {
  position: relative;
}
.section:not(.section-alt):not(.hero)::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(243, 154, 23, 0.18), transparent);
  pointer-events: none;
}

/* Card icon wrapper polish: subtle background tint so the SVG pops on white cards */
.section-card-icon-wrap--hub {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(243, 154, 23, 0.08), rgba(231, 110, 28, 0.04));
  border: 1px solid rgba(243, 154, 23, 0.18);
}
.section-card-icon-wrap--industry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 12px;
  border-radius: 10px;
  background: rgba(31, 41, 55, 0.04);
  border: 1px solid rgba(31, 41, 55, 0.08);
}

/* Card hover micro-interaction */
.section-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.section-card:hover {
  transform: translateY(-2px);
}
/* END UI ENHANCEMENTS */

/* =========================================
   UI ENHANCEMENTS v2 — industry strip + portfolio tighten
   ========================================= */

/* Industry card image strips are 1024×576 source — too tall in narrow columns.
   Constrain to a wider/shorter aspect ratio so cards aren't dominated by image. */
.section-home-industries .section-card-image-strip {
  aspect-ratio: 16 / 7;
  overflow: hidden;
  border-radius: 10px;
  margin-bottom: 12px;
}
.section-home-industries .section-card-image-strip img,
.section-home-industries .section-card-image-strip .section-card-image-strip-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Portfolio logo grid: even tighter density */
.logo-grid,
.logo-group-grid {
  gap: 8px !important;
}
.logo-card {
  min-height: 64px !important;
  padding: 6px 10px !important;
  border-radius: 10px !important;
}
.logo-card.logo-card--named {
  min-height: 78px !important;
  padding: 6px 8px 8px !important;
}
.logo-card.logo-card--named .logo-card-name {
  font-size: 0.7rem;
  line-height: 1.3;
  margin-top: 4px;
  padding: 0 2px;
}
.logo-card img,
.logo-card .logo-card-media img {
  max-height: 44px !important;
}
.logo-card.logo-card--named img {
  max-height: 36px !important;
}
/* END UI ENHANCEMENTS v2 */

/* =========================================
   UI ENHANCEMENTS v3 — portfolio 4-col + tighter cards
   ========================================= */

/* Desktop: 4 cards per row (was 5) */
@media (min-width: 1024px) {
  .logo-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* Even tighter cards */
.logo-grid,
.logo-group-grid {
  gap: 6px !important;
}
.logo-card {
  min-height: 56px !important;
  padding: 4px 8px !important;
  border-radius: 8px !important;
}
.logo-card.logo-card--named {
  min-height: 72px !important;
  padding: 4px 6px 6px !important;
}
.logo-card img,
.logo-card .logo-card-media img {
  max-height: 40px !important;
}
.logo-card.logo-card--named img {
  max-height: 32px !important;
}
.logo-card.logo-card--named .logo-card-name {
  font-size: 0.68rem;
  line-height: 1.25;
  margin-top: 2px;
}
/* END UI ENHANCEMENTS v3 */

/* =========================================
   UI ENHANCEMENTS v4 — named logo cards: image-dominant layout
   These are website screenshots, not logos. Let them fill the card width.
   ========================================= */
.logo-card.logo-card--named {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  min-height: auto !important;
  padding: 6px !important;
  gap: 6px;
}
.logo-card.logo-card--named .logo-card-media {
  width: 100% !important;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 6px;
  background: #fff;
  flex: 0 0 auto;
}
.logo-card.logo-card--named .logo-card-media .case-card-image-trigger {
  width: 100%;
  height: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: zoom-in;
}
.logo-card.logo-card--named img,
.logo-card.logo-card--named .logo-card-media img {
  max-height: none !important;
  max-width: none !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  filter: none !important;
  opacity: 1 !important;
}
.logo-card.logo-card--named:hover img {
  filter: none !important;
}
.logo-card.logo-card--named .logo-card-name {
  text-align: center;
  font-size: 0.72rem;
  line-height: 1.3;
  margin: 0;
  padding: 0 2px 2px;
  color: #334155;
}
/* END UI ENHANCEMENTS v4 */

/* =========================================
   UI ENHANCEMENTS v5 — align hero width with other sections
   ========================================= */

/* Match the standard .container (1140px / 92%) — previously this was overridden
   to 1120px / 91% which made the hero visibly narrower than the next section. */
.page-id-home .hero > .container.hero-layout {
  max-width: 1140px !important;
  width: min(1140px, 92%) !important;
}

/* The hero copy column no longer caps at 560px — let it fill its grid track,
   matching the visual width of headings/cards in subsequent sections. */
.page-id-home .hero-content {
  max-width: none !important;
}
/* END UI ENHANCEMENTS v5 */

/* =========================================
   CLAUDE-INFLUENCED DESIGN TOKENS (Level 1)
   Warm-neutral palette, asterisk eyebrow, paper grain, hairline borders.
   Reversible: remove the block between the two markers to revert.
   ========================================= */
:root {
  /* Warm-neutral ground (was cool blue-greys) */
  --bg: #FAF9F5;             /* page background — paper cream */
  --surface: #FFFDF8;        /* card surface — warm white */
  --surface-alt: #F5F1EB;    /* alternate section ground — soft sand */
  --line: #E8E2D5;           /* hairline border — warm sand */
  --line-strong: #D6CEBC;
  --text: #2A1F1A;           /* warm dark cocoa, was cool near-black */
  --text-muted: #6B5F55;     /* warm grey */

  /* Accents */
  --accent-clay: #CC7A56;    /* primary clay accent — Anthropic-influenced */
  --accent-clay-dark: #B26442;
  --accent-clay-tint: rgba(204, 122, 86, 0.10);

  /* Keep the existing orange but reposition as secondary highlight */
  /* --brand stays orange for backwards compat; we shift accent usage to clay */

  /* Card shadow softened to a single hairline highlight */
  --shadow: 0 1px 0 rgba(42, 31, 26, 0.05);
}

/* Body / overall surface */
body {
  background: var(--bg) !important;
  color: var(--text);
}

/* Hairline cards — drop the heavy drop-shadow */
.card,
.section-card,
.hero-content,
.hero-visual,
.page-hero-visual,
.proof-summary-card,
.case-card,
.contact-card,
.related-page-card,
.insight-card {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 1px 0 rgba(42, 31, 26, 0.04) !important;
}
.card:hover,
.section-card:hover,
.case-card:hover,
.insight-card:hover {
  border-color: var(--accent-clay) !important;
  box-shadow: 0 1px 0 rgba(42, 31, 26, 0.04), 0 0 0 1px rgba(204, 122, 86, 0.15) !important;
}

/* Section-alt: warm cream + very low-opacity paper grain via SVG noise */
.section-alt {
  background-color: var(--surface-alt) !important;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.32  0 0 0 0 0.24  0 0 0 0 0.18  0 0 0 0.045 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
    linear-gradient(180deg, #F5F1EB 0%, #EFE9DC 100%) !important;
  background-size: 180px 180px, auto !important;
}

/* Eyebrow: replace the brand-orange left bar with a small asterisk glyph in clay */
.eyebrow {
  position: relative !important;
  color: var(--accent-clay-dark) !important;
  padding-left: 18px !important;
}
/* Keep the warm radial splash inside the copy card */
.page-hero-copy {
  overflow: hidden;
}
.eyebrow::before {
  content: "✱" !important;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-55%);
  width: auto !important;
  height: auto !important;
  background: none !important;
  border-radius: 0 !important;
  color: var(--accent-clay);
  font-size: 0.9rem;
  line-height: 1;
  font-weight: 400;
}

/* Card icon wrapper: warm-tinted backplate instead of cool blue */
.section-card-icon-wrap--hub {
  background: linear-gradient(135deg, var(--accent-clay-tint), rgba(204, 122, 86, 0.04)) !important;
  border: 1px solid rgba(204, 122, 86, 0.22) !important;
}
.section-card-icon-wrap--industry {
  background: rgba(42, 31, 26, 0.04) !important;
  border: 1px solid rgba(42, 31, 26, 0.08) !important;
}
.section-card-icon-svg,
.industry-icon-svg {
  stroke: var(--accent-clay-dark) !important;
}

/* Primary CTA: keep brand orange (recognisable) but pillify and soften shadow */
.btn-primary {
  border-radius: 9999px !important;
  box-shadow: 0 1px 0 rgba(42, 31, 26, 0.06) !important;
}
.btn-ghost {
  border-radius: 9999px !important;
}

/* Buttons inside hero — gentle hover only, no scale-pop */
.hero-actions .btn,
.section-home-final-cta .btn {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
  transform: none !important;
}

/* Headings: slightly tighter, softer warm-text */
h1, h2, h3 {
  color: var(--text);
  letter-spacing: -0.01em;
}

/* Hero: very subtle warm gradient instead of cool blue */
.hero, .page-hero {
  background: linear-gradient(180deg, #F4EFE3 0%, #FAF9F5 100%) !important;
  border-bottom-color: var(--line) !important;
}
.page-id-home .hero {
  background:
    radial-gradient(ellipse 118% 78% at 50% 36%, rgba(204, 122, 86, 0.05) 0%, transparent 56%),
    linear-gradient(180deg, #F4EFE3 0%, #F8F5ED 42%, #FAF9F5 100%) !important;
}

/* Site nav bar: soften from white to cream */
header.site-header,
.site-header {
  background: rgba(250, 249, 245, 0.92) !important;
  border-bottom: 1px solid var(--line) !important;
}

/* Pill chips warmer */
.section-card-tag,
.section-card-pill,
.chip {
  border-radius: 9999px !important;
  background: var(--accent-clay-tint) !important;
  color: var(--accent-clay-dark) !important;
}

/* Section dividers: replace the cool top gradient with a warm one */
.section:not(.section-alt):not(.hero)::before {
  background: linear-gradient(90deg, transparent, rgba(204, 122, 86, 0.18), transparent) !important;
}

/* Logo card hover accent → clay (was brand orange) */
.logo-card:hover {
  border-color: rgba(204, 122, 86, 0.35) !important;
}

/* Footer warmer surface */
.site-footer {
  background: #1f1611 !important;
  color: #E8E2D5 !important;
}
.site-footer a:hover {
  color: var(--accent-clay) !important;
}
/* END CLAUDE-INFLUENCED DESIGN TOKENS */

/* =========================================
   CLAUDE-INFLUENCED LEVEL 2 — editorial typography
   Serif H1/H2 (system stack, no web font load), tighter type scale,
   bigger line-heights, calmer rhythm. Reversible like Level 1.
   ========================================= */

/* Serif headline stack — uses pre-installed OS fonts only.
   Charter (macOS/iOS) → Bitstream Charter → Cambria (Windows) →
   Source Han Serif TC/SC → Songti TC/SC / Ming → generic serif. */
h1, h2,
.hero h1, .page-hero h1,
.section h2,
.hero-content h1 {
  font-family:
    "Charter", "Bitstream Charter", "Sitka Text", "Cambria",
    "Source Han Serif TC", "Source Han Serif SC",
    "Songti TC", "Songti SC", "STSong", "PMingLiU", "MingLiU",
    Georgia, serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.018em !important;
  line-height: 1.18 !important;
  color: var(--text);
}

/* Slightly smaller, calmer headline scale */
h1 { font-size: clamp(1.95rem, 3.5vw, 2.65rem) !important; }
h2 { font-size: clamp(1.45rem, 2.6vw, 1.95rem) !important; }

/* H3 stays sans for scannability on cards/lists, but slightly tighter */
h3 {
  letter-spacing: -0.008em;
  line-height: 1.32;
}

/* Body text breathes more — editorial line-height */
body {
  line-height: 1.62 !important;
}

/* Long-form prose blocks: generous line-height */
.hero-lead,
.section-intro,
.section-card-desc,
.case-detail-text,
.insight-card-excerpt,
.related-page-card-desc,
p.section-card-value-line,
.proof-summary-card p {
  line-height: 1.68 !important;
}

/* Section vertical rhythm — a touch more breathing room */
.section {
  padding: 72px 0 !important;
}
@media (max-width: 779px) {
  .section { padding: 52px 0 !important; }
}

/* Hero copy: smaller, calmer */
.hero-lead {
  font-size: 1.05rem !important;
  color: var(--text-muted, #6B5F55) !important;
}

/* Eyebrow: smaller + more restrained letter-spacing */
.eyebrow {
  font-size: 0.72rem !important;
  letter-spacing: 0.12em !important;
  font-weight: 600 !important;
}

/* Section intro paragraphs: lighter weight, muted */
.section-intro {
  font-size: 1.02rem !important;
  color: var(--text-muted, #6B5F55) !important;
  max-width: 64ch;
}

/* Card body text: smaller cap, muted */
.section-card-desc {
  font-size: 0.94rem;
  color: var(--text-muted, #6B5F55);
}

/* Bullets — tighter list typography */
.hero-bullets,
.section-card ul,
.case-detail-block ul {
  line-height: 1.55;
}
.hero-bullets li,
.section-card-bullet-list li {
  margin: 0 0 6px;
}

/* Buttons: refine the typography */
.btn,
.btn-primary,
.btn-ghost {
  font-weight: 600 !important;
  letter-spacing: 0.005em !important;
}

/* Quiet quotation / serif accent for hero leads if they begin with quote-like content */
/* (purely stylistic — affects literal " openings) */
.hero-lead::first-letter {
  font-feature-settings: "ss01";
}

/* Insight cards: tighter, magazine-style */
.insight-card-title {
  font-family:
    "Charter", "Bitstream Charter", "Sitka Text", "Cambria",
    "Source Han Serif TC", "Source Han Serif SC",
    "Songti TC", "Songti SC", "STSong", "PMingLiU", Georgia, serif !important;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.3;
}
.insight-card-meta-cat {
  font-family: inherit;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.7rem;
}

/* Subtle hairline divider before insight section list */
#insights-article-list {
  border-top: 1px solid var(--line);
  padding-top: 28px;
}

/* CJK numeric/punctuation rendering hint: enable contextual swashes when font supports it */
:root { font-feature-settings: "ss01", "cv01"; }
/* END CLAUDE-INFLUENCED LEVEL 2 */

/* =========================================
   CLAUDE-INFLUENCED LEVEL 3 — CJK humanist sans + essay layout
   1. CJK headlines render in Source Han Sans / PingFang heavy (humanist sans).
      Latin glyphs keep the Charter serif from Level 2 via per-glyph fallback.
   2. Asterisk constellation dividers between sections.
   3. Prose-width containers for insight + long-form pages.
   4. Two-column "label / paragraph" rhythm for select sections.
   ========================================= */

/* === 1. Mixed-script headline stack ===
   Charter (Latin serif) → falls through to Source Han Sans Heavy (CJK humanist
   sans) → PingFang / Microsoft JhengHei / Noto Sans TC. Browser picks per-glyph.
   Result: English headlines = literary serif; Chinese headlines = clean heavy sans. */
h1, h2,
.hero h1, .page-hero h1,
.section h2,
.hero-content h1,
.insight-card-title {
  font-family:
    "Charter", "Bitstream Charter", "Sitka Text", "Cambria", Georgia,
    "Source Han Sans TC", "Source Han Sans SC", "Noto Sans TC", "Noto Sans SC",
    "PingFang TC", "PingFang SC",
    "Microsoft JhengHei", "Microsoft YaHei",
    "Hiragino Sans GB", "Heiti SC", sans-serif !important;
  font-weight: 800 !important;  /* Heavy for CJK; bold/extra-bold for Latin */
}

/* CJK-specific weight bump using :lang() when DOM lang is set */
:lang(zh) h1, :lang(zh) h2,
[lang^="zh"] h1, [lang^="zh"] h2,
html[lang^="zh"] h1, html[lang^="zh"] h2 {
  font-weight: 900 !important;
  letter-spacing: -0.005em !important;
}

/* === 2. Asterisk constellation divider between adjacent sections === */
.section + .section:not(.section-alt)::before,
.section-alt + .section:not(.section-alt)::before {
  /* override the level-1 1px gradient line with a 3-asterisk constellation */
  content: "✱  ✱  ✱" !important;
  position: absolute;
  inset: 18px 0 auto 0 !important;
  height: auto !important;
  text-align: center;
  color: var(--accent-clay);
  font-size: 0.7rem;
  letter-spacing: 0.55em;
  opacity: 0.55;
  background: transparent !important;
  pointer-events: none;
}

/* === 3. Prose-width container for long-form pages ===
   Activates on insights, single insight articles, about, ai-governance. */
.page-id-about .section .container,
.page-id-ai-governance .section .container,
.page-id-privacy-policy .section .container,
.page-id-terms .section .container,
.insight-article-page .section .container {
  max-width: 760px;
}
.page-id-about .section .section-intro,
.page-id-ai-governance .section .section-intro,
.page-id-privacy-policy .section .section-intro,
.insight-article-page .section p {
  max-width: 65ch;
  font-size: 1.05rem;
  line-height: 1.72;
  color: var(--text);
}

/* === 4. "Editorial label / paragraph" two-column rhythm ===
   Used on proof_summary + why-igears + featured cases for an essay-like read.
   Title sits in a narrow left column; body fills the right column. */
@media (min-width: 900px) {
  .section-home-proof-summary > .container,
  .section-home-why-igears > .container {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(0, 3fr);
    gap: 36px 56px;
    align-items: start;
  }
  .section-home-proof-summary > .container > .eyebrow,
  .section-home-proof-summary > .container > h2,
  .section-home-why-igears > .container > .eyebrow,
  .section-home-why-igears > .container > h2 {
    grid-column: 1;
  }
  .section-home-proof-summary > .container > .proof-summary-grid,
  .section-home-why-igears > .container > .grid {
    grid-column: 2;
  }
  /* H2 in essay column gets larger negative spacing and a top accent */
  .section-home-proof-summary > .container > h2,
  .section-home-why-igears > .container > h2 {
    position: relative;
    padding-top: 6px;
    margin-bottom: 0;
  }
  .section-home-proof-summary > .container > h2::before,
  .section-home-why-igears > .container > h2::before {
    content: "✱";
    display: block;
    color: var(--accent-clay);
    font-size: 1.1rem;
    line-height: 1;
    margin-bottom: 10px;
    opacity: 0.9;
  }
}

/* === Asterisk in eyebrow goes BEFORE label cleanly === */
.eyebrow::before {
  margin-right: 4px;
}

/* === Restrained primary-CTA ink: warm orange feels stronger on cream === */
.btn-primary {
  background: var(--brand) !important;
  color: #1a0e08 !important;
  border: 1px solid rgba(26, 14, 8, 0.08) !important;
}
.btn-primary:hover {
  background: var(--brand-dark) !important;
}

/* === Insight article body prose === */
.insight-article-body,
.page-id-insights .section .container article {
  max-width: 65ch;
  margin-inline: auto;
}
.insight-article-body p,
.insight-article-body li {
  font-size: 1.05rem;
  line-height: 1.72;
}
.insight-article-body p + p {
  margin-top: 1.1em;
}

/* === Quietly stylise the first paragraph after an H1 on long-form pages === */
.page-id-about .section .section-intro:first-of-type,
.insight-article-page main p:first-of-type {
  font-size: 1.18rem;
  line-height: 1.62;
  color: var(--text);
  letter-spacing: -0.005em;
}

/* === Subtle paper texture on the body root, very low opacity === */
body {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.32  0 0 0 0 0.24  0 0 0 0 0.18  0 0 0 0.022 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-attachment: fixed;
}

/* === Card title slightly more present on cream background === */
.section-card h3 {
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.005em;
}

/* === Hero bullets: turn into pill-style soft tags === */
.hero-bullets {
  list-style: none;
  padding: 0;
  margin: 14px 0 8px;
}
.hero-bullets li {
  position: relative;
  padding-left: 20px;
}
.hero-bullets li::before {
  content: "✱";
  color: var(--accent-clay);
  position: absolute;
  left: 0;
  top: 0.05em;
  font-size: 0.85rem;
}

/* === Footer ornaments === */
.site-footer::before {
  content: "✱  ✱  ✱";
  display: block;
  text-align: center;
  color: rgba(204, 122, 86, 0.55);
  font-size: 0.7rem;
  letter-spacing: 0.55em;
  padding: 22px 0 0;
}

/* === Quote-pull style for any blockquote === */
blockquote {
  border-left: 3px solid var(--accent-clay);
  padding: 4px 0 4px 18px;
  font-style: italic;
  color: var(--text);
  font-size: 1.08rem;
  line-height: 1.6;
}

/* === Section padding rhythm increases once more on home === */
.page-id-home .section {
  padding: 84px 0 !important;
}
@media (max-width: 779px) {
  .page-id-home .section { padding: 60px 0 !important; }
}
/* END CLAUDE-INFLUENCED LEVEL 3 */

/* =========================================
   CLAUDE-INFLUENCED LEVEL 4 — polish pass
   1. Asterisk divider: render INSIDE the section (not overlap content)
   2. Top navigation: warm palette + softer underline hover
   3. Drop cap on long-form first paragraphs
   4. Sub-page hero (.page-hero) gets the same warm treatment
   5. Lightbox modal + form fields adopt warm palette
   6. Card-grid micro-rhythm tweaks
   ========================================= */

/* === 1. Fix asterisk divider — use top padding inside section, not absolute === */
.section + .section:not(.section-alt)::before,
.section-alt + .section:not(.section-alt)::before {
  content: "" !important;        /* nullify the absolute version */
  position: static !important;
  display: none !important;
}
/* Replace with a quiet ornament block at the top of each non-hero, non-alt section.
   Using a real first-child pseudo so it pushes content down instead of overlapping. */
.section:not(.section-alt):not(.hero):not(.page-hero) > .container::before {
  content: "✱  ✱  ✱";
  display: block;
  text-align: center;
  color: rgba(204, 122, 86, 0.42);
  font-size: 0.68rem;
  letter-spacing: 0.55em;
  margin: -10px 0 28px;
  line-height: 1;
  pointer-events: none;
}
/* But not on the FIRST section after the hero — that already feels separated. */
.hero + .section > .container::before,
.page-hero + .section > .container::before,
main > .section:first-of-type > .container::before {
  display: none !important;
}

/* === 2. Top navigation — warm cream + softer hover === */
.site-header,
header.site-header {
  background: rgba(250, 249, 245, 0.92) !important;
  backdrop-filter: saturate(120%) blur(6px);
  border-bottom: 1px solid var(--line) !important;
}
.site-nav a,
.primary-nav a,
nav a {
  color: var(--text) !important;
  font-weight: 600;
  letter-spacing: 0.005em;
  transition: color 0.18s ease;
}
.site-nav a:hover,
.primary-nav a:hover,
nav a:hover {
  color: var(--accent-clay-dark) !important;
}
.site-nav .nav-cta,
.btn.nav-cta,
header .btn-primary {
  border-radius: 9999px !important;
  padding: 0.55em 1.15em !important;
  font-weight: 600 !important;
}

/* Locale switcher chips — warm pill style */
.locale-switch a,
.lang-switch a,
.language-switch a {
  border-radius: 9999px !important;
  padding: 0.25em 0.7em !important;
  font-size: 0.78rem !important;
  border: 1px solid var(--line) !important;
  background: var(--surface);
}
.locale-switch a:hover,
.lang-switch a:hover {
  border-color: var(--accent-clay) !important;
  color: var(--accent-clay-dark) !important;
}
.locale-switch a.is-active,
.lang-switch a.is-active {
  background: var(--accent-clay) !important;
  color: #fff !important;
  border-color: var(--accent-clay) !important;
}

/* === 3. Drop cap on long-form first paragraph === */
.page-id-about main .section:first-of-type .section-intro:first-of-type::first-letter,
.page-id-ai-governance main .section:first-of-type p:first-of-type::first-letter,
.insight-article-page main p:first-of-type::first-letter {
  initial-letter: 2.4;
  -webkit-initial-letter: 2.4;
  float: left;
  font-family:
    "Charter", "Bitstream Charter", "Sitka Text", "Cambria", Georgia,
    "Source Han Serif TC", "Songti TC", serif;
  font-weight: 800;
  font-size: 3.2em;
  line-height: 0.95;
  margin: 0.05em 0.1em 0 0;
  color: var(--accent-clay-dark);
  padding-top: 0.05em;
}
/* Latin-only — CJK characters don't drop-cap well; suppress for zh locales */
html[lang^="zh"] .page-id-about main .section:first-of-type .section-intro:first-of-type::first-letter,
html[lang^="zh"] .page-id-ai-governance main .section:first-of-type p:first-of-type::first-letter,
html[lang^="zh"] .insight-article-page main p:first-of-type::first-letter {
  initial-letter: unset;
  -webkit-initial-letter: unset;
  float: none;
  font-size: inherit;
  margin: 0;
  padding: 0;
  color: inherit;
  font-weight: inherit;
}

/* === 4. Sub-page hero (.page-hero) warm treatment === */
.page-hero {
  background: linear-gradient(180deg, #F4EFE3 0%, #FAF9F5 100%) !important;
  border-bottom: 1px solid var(--line) !important;
}
.page-hero .page-hero-copy,
.page-hero .page-hero-visual {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 1px 0 rgba(42, 31, 26, 0.04) !important;
  border-radius: 14px !important;
  padding: 20px;
}
.page-hero h1 {
  letter-spacing: -0.015em;
}
.page-hero .breadcrumbs,
.breadcrumbs {
  color: var(--text-muted, #6B5F55);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}
.breadcrumbs a:hover {
  color: var(--accent-clay-dark) !important;
}

/* === 5. Lightbox + form fields === */
.site-image-modal {
  background: rgba(42, 31, 26, 0.82);
}
.site-image-modal-dialog {
  background: var(--surface);
  border-radius: 16px;
  border: 1px solid var(--line);
  box-shadow: 0 30px 80px rgba(42, 31, 26, 0.25);
}
.site-image-modal-caption {
  color: var(--text-muted, #6B5F55);
  font-size: 0.85rem;
  padding-top: 12px;
}
.site-image-modal-close {
  background: rgba(42, 31, 26, 0.05) !important;
  color: var(--text) !important;
  border-radius: 9999px;
  width: 36px;
  height: 36px;
}
.site-image-modal-close:hover {
  background: var(--accent-clay-tint) !important;
  color: var(--accent-clay-dark) !important;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
textarea,
select {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  padding: 0.65em 0.9em !important;
  font-family: inherit;
  font-size: 0.96rem;
  color: var(--text) !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
  border-color: var(--accent-clay) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(204, 122, 86, 0.18) !important;
}

/* === 6. Card grid micro-rhythm === */
.grid.grid-4,
.grid.grid-3 {
  gap: 22px;
}
@media (max-width: 779px) {
  .grid.grid-4, .grid.grid-3 { gap: 16px; }
}

/* Featured card emphasis: clay top accent */
.section-card--emphasis-featured {
  position: relative;
}
.section-card--emphasis-featured::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 36px;
  height: 3px;
  background: var(--accent-clay);
  border-radius: 0 0 3px 0;
}

/* === 7. Insight article meta row === */
.insight-card-date-line,
.insight-card-meta {
  color: var(--text-muted, #6B5F55) !important;
  font-size: 0.78rem !important;
}
.insight-card-read-link {
  color: var(--accent-clay-dark) !important;
  font-weight: 600;
}
.insight-card-read-link:hover {
  color: var(--accent-clay) !important;
}

/* === 8. Selection colour to match brand === */
::selection {
  background: rgba(204, 122, 86, 0.28);
  color: var(--text);
}

/* === 9. Hero-bullets list cleanup (level 3 added ✱ marker) === */
.hero-bullets {
  margin-top: 20px;
}
.hero-bullets li {
  font-size: 0.96rem;
  color: var(--text);
}

/* === 10. Footer ornaments + warm cocoa polish === */
.site-footer h3,
.site-footer h4,
.site-footer .footer-col-title {
  font-family:
    "Charter", "Bitstream Charter", "Cambria", Georgia,
    "Source Han Sans TC", "Source Han Sans SC",
    "PingFang TC", "Microsoft JhengHei", sans-serif;
  color: #F1ECDF !important;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.site-footer a {
  color: rgba(232, 226, 213, 0.78) !important;
}
.site-footer a:hover {
  color: #F5C9AF !important;
}
.site-footer .footer-bottom,
.site-footer .footer-meta {
  color: rgba(232, 226, 213, 0.55) !important;
  font-size: 0.78rem;
}

/* === 11. Industry strip image radius softened === */
.section-home-industries .section-card-image-strip {
  border-radius: 8px !important;
}

/* === 12. Inline emphasis: brand strong → clay === */
strong, b {
  color: inherit;
}
.section-card-value-line strong {
  color: var(--accent-clay-dark);
}

/* === 13. Subtle ornament before each page H1 on non-home pages === */
.page-hero .page-hero-copy h1::before,
.page-hero h1::before {
  content: "✱";
  display: block;
  color: var(--accent-clay);
  font-size: 1rem;
  margin-bottom: 12px;
  line-height: 1;
  opacity: 0.85;
}
/* Skip the H1 ornament when an eyebrow already carries the ✱ above it */
.page-hero .eyebrow + h1::before,
.page-hero .page-hero-copy .eyebrow + h1::before {
  display: none;
}

/* === 14. Disable transform on card hover (Anthropic is calm) — keep colour shift === */
.section-card,
.case-card,
.related-page-card,
.insight-card {
  transform: none !important;
}
.section-card:hover,
.case-card:hover,
.related-page-card:hover,
.insight-card:hover {
  transform: translateY(-1px) !important;  /* smaller lift than before */
}

/* === 15. Tighter spacing for back-to-back sections === */
.section + .section { margin-top: 0; }

/* === 16. Mobile responsive — collapse essay layout cleanly === */
@media (max-width: 899px) {
  .section-home-proof-summary > .container,
  .section-home-why-igears > .container {
    display: block;
  }
  .section-home-proof-summary > .container > h2::before,
  .section-home-why-igears > .container > h2::before {
    display: inline-block;
    margin-right: 8px;
    margin-bottom: 0;
    vertical-align: middle;
  }
}
/* END CLAUDE-INFLUENCED LEVEL 4 */

/* =========================================
   CLAUDE-INFLUENCED LEVEL 5 — editorial + accessibility + print
   1. Insight-article template (editorial long-form)
   2. Inline link animated underline + anchor-link icons on H2/H3 hover
   3. Clay vignette overlay on hero figures
   4. Smooth scroll + clay focus-visible rings + reduced-motion respect
   5. Warm-toned custom scrollbar (Webkit)
   6. Pull-quote + inline-code + table styling
   7. Print stylesheet for editorial pages
   ========================================= */

/* === Global behaviour === */
html { scroll-behavior: smooth; scroll-padding-top: 88px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
  }
}

/* === 1. Editorial insight article template ===
   Targets single-insight pages (.page-key starts with insight-) and the insights
   list when an article container is detected. Wraps article body in a 65ch column
   with serif H1, drop cap, asterisk between H2 blocks, generous rhythm. */
[class*="page-id-insight-"] main,
.insight-article-page main {
  background: var(--bg);
}
[class*="page-id-insight-"] main .container,
.insight-article-page main .container {
  max-width: 760px !important;
}
[class*="page-id-insight-"] .section h1,
[class*="page-id-insight-"] .section h2,
.insight-article-page h2 {
  margin-top: 1.6em;
}
[class*="page-id-insight-"] .section p,
.insight-article-page p {
  font-size: 1.07rem;
  line-height: 1.74;
  max-width: 65ch;
  margin-inline: auto;
}
[class*="page-id-insight-"] .section p + p {
  margin-top: 1.1em;
}
[class*="page-id-insight-"] .section ul,
[class*="page-id-insight-"] .section ol {
  max-width: 65ch;
  margin-inline: auto;
  padding-left: 1.4em;
}
[class*="page-id-insight-"] .section ul li,
[class*="page-id-insight-"] .section ol li {
  margin: 0.4em 0;
  line-height: 1.7;
}
[class*="page-id-insight-"] .section h2::before {
  content: "✱";
  display: block;
  text-align: center;
  color: var(--accent-clay);
  font-size: 0.9rem;
  letter-spacing: 0.5em;
  opacity: 0.55;
  margin: 0 0 28px;
  line-height: 1;
}
[class*="page-id-insight-"] .section h2:first-of-type::before {
  display: none;
}

/* Insight article date / source rail (rendered if present) */
.insight-article-meta-rail,
.insight-card-meta-rail {
  display: flex;
  gap: 14px;
  align-items: center;
  font-size: 0.78rem;
  color: var(--text-muted, #6B5F55);
  letter-spacing: 0.04em;
  margin: 8px 0 28px;
}
.insight-article-meta-rail::before {
  content: "✱";
  color: var(--accent-clay);
  opacity: 0.7;
}

/* Article footer ornament */
[class*="page-id-insight-"] main::after {
  content: "✱  ✱  ✱";
  display: block;
  text-align: center;
  letter-spacing: 0.55em;
  color: rgba(204, 122, 86, 0.45);
  font-size: 0.8rem;
  margin: 40px auto 64px;
}

/* === 2. Inline link animated underline + heading anchor icons === */
.section p a,
.insight-article-body a,
.related-page-card-desc a,
.section-card-desc a {
  color: var(--accent-clay-dark);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.25s ease, color 0.18s ease;
  text-decoration: none;
}
.section p a:hover,
.insight-article-body a:hover,
.related-page-card-desc a:hover,
.section-card-desc a:hover {
  background-size: 100% 1px;
  color: var(--accent-clay);
}

/* Heading anchor-link icon on hover (shows § next to H2/H3 if they have an id) */
h2[id], h3[id] {
  position: relative;
}
h2[id]::after, h3[id]::after {
  content: "§";
  position: absolute;
  left: -22px;
  top: 0.15em;
  color: var(--accent-clay);
  font-size: 0.7em;
  opacity: 0;
  transition: opacity 0.18s ease;
  text-decoration: none;
  pointer-events: none;
}
h2[id]:hover::after, h3[id]:hover::after,
h2[id]:focus-within::after, h3[id]:focus-within::after {
  opacity: 0.6;
}

/* === 3. Clay vignette overlay on hero figures === */
.hero-visual,
.page-hero-visual,
.section-home-industries .section-card-image-strip {
  position: relative;
  isolation: isolate;
}
.hero-visual::after,
.page-hero-visual::after,
.section-home-industries .section-card-image-strip::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 30% 0%, rgba(255, 250, 240, 0.12), transparent 55%),
    radial-gradient(ellipse at 70% 100%, rgba(204, 122, 86, 0.06), transparent 60%);
  z-index: 1;
}
.hero-visual > *,
.page-hero-visual > * {
  position: relative;
  z-index: 0;
}
/* Default: photo wrapper fills the hero aside so the absolutely-positioned <img>
   has a sized containing block. Page-id-specific overrides (e.g. .page-id-clients,
   .page-id-about) have higher specificity and continue to win. */
.page-hero-visual-photo {
  position: absolute;
  inset: 0;
}

/* === 4. Focus-visible rings in clay (accessibility) === */
*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid var(--accent-clay) !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}
button:focus-visible,
a:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--accent-clay) !important;
  outline-offset: 3px !important;
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none !important; /* handled by box-shadow in level 4 */
}

/* === 5. Custom scrollbar (Webkit + Firefox) === */
html {
  scrollbar-color: rgba(204, 122, 86, 0.35) transparent;
  scrollbar-width: thin;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(204, 122, 86, 0.28);
  border-radius: 6px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(204, 122, 86, 0.55);
}

/* === 6. Pull-quote + inline-code + table === */
blockquote.pull-quote,
.section blockquote {
  position: relative;
  margin: 32px 0;
  padding: 8px 0 8px 24px;
  border-left: 3px solid var(--accent-clay);
  font-family:
    "Charter", "Bitstream Charter", "Cambria", Georgia,
    "Source Han Sans TC", "PingFang TC", serif;
  font-size: 1.18rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--text);
}
blockquote::before {
  content: "“";
  position: absolute;
  left: -2px;
  top: -16px;
  font-size: 3.4rem;
  color: var(--accent-clay);
  opacity: 0.4;
  line-height: 1;
  font-family: Georgia, serif;
}

code, kbd, samp {
  background: var(--accent-clay-tint);
  color: var(--accent-clay-dark);
  padding: 0.1em 0.42em;
  border-radius: 4px;
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 0.92em;
}
pre {
  background: var(--surface-alt);
  color: var(--text);
  padding: 18px;
  border-radius: 10px;
  border: 1px solid var(--line);
  overflow-x: auto;
  font-size: 0.92rem;
  line-height: 1.55;
}
pre code {
  background: none;
  color: inherit;
  padding: 0;
}

table {
  border-collapse: collapse;
  width: 100%;
  margin: 24px 0;
  font-size: 0.94rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
th, td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
th {
  background: var(--surface-alt);
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.02em;
  font-size: 0.86rem;
  text-transform: uppercase;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--accent-clay-tint); }

/* === 7. Print stylesheet — clean editorial print for service / about / insights === */
@media print {
  :root {
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-alt: #ffffff;
    --line: #cccccc;
    --text: #000000;
  }
  body {
    background: #ffffff !important;
    background-image: none !important;
    color: #000 !important;
    font-size: 11pt;
    line-height: 1.55;
  }
  .site-header, .site-footer, .hero-actions, nav, .lightbox, .btn,
  .related-pages, .section-home-final-cta, .home-case-tag-nav-outer {
    display: none !important;
  }
  .section { padding: 18pt 0 !important; }
  .section + .section::before { display: none !important; }
  h1, h2, h3 {
    page-break-after: avoid;
    color: #000 !important;
  }
  h1 { font-size: 24pt; }
  h2 { font-size: 16pt; margin-top: 22pt; }
  h3 { font-size: 12pt; }
  .card, .section-card, .case-card {
    page-break-inside: avoid;
    box-shadow: none !important;
    border: 1pt solid #ccc !important;
  }
  a {
    color: #000 !important;
    text-decoration: underline !important;
    background-image: none !important;
  }
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #555;
  }
  img { max-width: 100% !important; height: auto !important; }
  .section-card-image-strip { max-height: 100mm !important; overflow: hidden; }
}

/* === 8. Insight card hover refinements === */
.insight-card {
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.insight-card:hover .insight-card-title {
  color: var(--accent-clay-dark);
}

/* === 9. Locale-switch chip active glow === */
.locale-switch a.is-active,
.lang-switch a.is-active {
  box-shadow: 0 0 0 3px var(--accent-clay-tint);
}

/* === 10. Section H2 small ornament after the title (decorative end-cap) === */
.page-id-home .section:not(.section-home-final-cta):not(.hero):not(.related-pages) h2 + .section-intro::after {
  content: "";
  display: block;
  width: 36px;
  height: 2px;
  background: var(--accent-clay);
  opacity: 0.5;
  margin: 14px auto 0;
  border-radius: 2px;
}

/* === 11. Reduce LCP-impact: defer the body grain on small screens === */
@media (max-width: 779px) {
  body { background-image: none !important; }
}

/* === 12. Date / time in insight cards as small editorial caps === */
.insight-card-date-line time {
  font-variant-numeric: oldstyle-nums;
  font-feature-settings: "onum";
}

/* === 13. Improved card "tags" pill style — already pill, now smaller padding === */
.section-card-tag,
.section-card-pill,
.chip {
  padding: 2px 9px !important;
  font-size: 0.72rem !important;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* === 14. Hero-actions group: more breathing room between primary and ghost === */
.hero-actions {
  gap: 14px !important;
}
.hero-actions .btn {
  padding: 0.7em 1.3em !important;
}
/* END CLAUDE-INFLUENCED LEVEL 5 */

/* =========================================
   CLAUDE-INFLUENCED LEVEL 6 — gentle ornament drift
   Subtle ✱ asterisks floating in the home hero. Pure CSS, GPU-accelerated
   (transform + opacity only). Respects prefers-reduced-motion via the
   global rule established in Level 5.
   ========================================= */

/* === Setup: hero must be a positioning context with overflow contained === */
.page-id-home .hero {
  position: relative;
  overflow: hidden;
}
/* Make sure hero content sits above the drifting asterisks */
.page-id-home .hero > .container { position: relative; z-index: 1; }

/* === Asterisk 1 — large, top-right === */
.page-id-home .hero::before {
  content: "✱";
  position: absolute;
  top: 14%;
  right: 8%;
  font-size: 28px;
  line-height: 1;
  color: var(--accent-clay);
  opacity: 0.22;
  pointer-events: none;
  z-index: 0;
  will-change: transform, opacity;
  animation: hero-asterisk-1 22s ease-in-out infinite;
  /* Reset Level 5 vignette ::after on .hero-visual (not on .hero itself) */
}

/* === Asterisk 2 — medium, bottom-left === */
.page-id-home .hero::after {
  content: "✱";
  position: absolute;
  bottom: 18%;
  left: 6%;
  font-size: 18px;
  line-height: 1;
  color: var(--accent-clay);
  opacity: 0.26;
  pointer-events: none;
  z-index: 0;
  will-change: transform, opacity;
  animation: hero-asterisk-2 18s ease-in-out infinite 2s;
}

/* === Asterisks 3+4 — placed via the .hero .container pseudos (small, soft) === */
.page-id-home .hero > .container::before {
  content: "✱";
  position: absolute;
  top: -8px;
  left: -28px;
  font-size: 14px;
  line-height: 1;
  color: var(--accent-clay);
  opacity: 0.16;
  pointer-events: none;
  z-index: 0;
  will-change: transform, opacity;
  animation: hero-asterisk-3 26s ease-in-out infinite 4s;
}
.page-id-home .hero > .container::after {
  content: "✱";
  position: absolute;
  bottom: -16px;
  right: -16px;
  font-size: 22px;
  line-height: 1;
  color: var(--accent-clay);
  opacity: 0.14;
  pointer-events: none;
  z-index: 0;
  will-change: transform, opacity;
  animation: hero-asterisk-4 30s ease-in-out infinite 6s;
}

/* === Drift keyframes — gentle translate + slow rotation + opacity breath === */
@keyframes hero-asterisk-1 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.20; }
  25%      { transform: translate(-6px, 10px) rotate(15deg); opacity: 0.28; }
  50%      { transform: translate(-12px, -8px) rotate(45deg); opacity: 0.16; }
  75%      { transform: translate(4px, -14px) rotate(30deg); opacity: 0.24; }
}

@keyframes hero-asterisk-2 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.26; }
  33%      { transform: translate(10px, -12px) rotate(-25deg); opacity: 0.18; }
  66%      { transform: translate(-8px, 8px) rotate(40deg); opacity: 0.30; }
}

@keyframes hero-asterisk-3 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.16; }
  50%      { transform: translate(14px, 12px) rotate(-60deg); opacity: 0.06; }
}

@keyframes hero-asterisk-4 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.14; }
  40%      { transform: translate(-10px, -10px) rotate(20deg); opacity: 0.22; }
  80%      { transform: translate(6px, 14px) rotate(-15deg); opacity: 0.10; }
}

/* === Sub-page hero gets a single quieter drifting asterisk === */
.page-hero {
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: "✱";
  position: absolute;
  top: 22%;
  right: 7%;
  font-size: 22px;
  color: var(--accent-clay);
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
  will-change: transform, opacity;
  animation: hero-asterisk-2 20s ease-in-out infinite;
}
.page-hero > .container { position: relative; z-index: 1; }

/* === Defensive: respect reduced motion explicitly even though Level 5 already does === */
@media (prefers-reduced-motion: reduce) {
  .page-id-home .hero::before,
  .page-id-home .hero::after,
  .page-id-home .hero > .container::before,
  .page-id-home .hero > .container::after,
  .page-hero::before {
    animation: none !important;
    /* Keep them visible but static so layout is consistent */
  }
}

/* === Defensive: disable on very small screens to keep LCP fast and avoid clutter === */
@media (max-width: 639px) {
  .page-id-home .hero > .container::before,
  .page-id-home .hero > .container::after {
    display: none;
  }
  .page-id-home .hero::before { font-size: 22px; top: 8%; right: 5%; }
  .page-id-home .hero::after  { font-size: 14px; bottom: 12%; left: 4%; }
}
/* END CLAUDE-INFLUENCED LEVEL 6 */

/* =========================================
   CLAUDE-INFLUENCED LEVEL 7 — bullet fix
   Kill the default disc on .hero-bullets AND give the ✱ marker its own
   gutter so it doesn't overlap the first letter of each line.
   ========================================= */

.hero-bullets {
  list-style: none !important;
  list-style-type: none !important;
  padding-left: 0 !important;
  margin: 20px 0 8px !important;
}
.hero-bullets > li {
  position: relative !important;
  list-style: none !important;
  list-style-type: none !important;
  display: block !important;
  padding-left: 28px !important;     /* room for the ✱ */
  margin-bottom: 8px !important;
  font-size: 0.96rem;
  color: var(--text);
  line-height: 1.55;
}
.hero-bullets > li::marker {
  content: "" !important;
  display: none !important;
}
.hero-bullets > li::before {
  content: "✱" !important;
  position: absolute !important;
  left: 6px !important;
  top: 0.18em !important;
  width: 14px !important;
  height: auto !important;
  text-align: center !important;
  color: var(--accent-clay) !important;
  font-size: 0.85rem !important;
  line-height: 1 !important;
  background: none !important;
  border-radius: 0 !important;
  transform: none !important;
  font-weight: 400 !important;
}

/* Same fix for any inline list using the same "✱ as bullet" pattern
   (page-hero bullets, intro_bullets if rendered as ul) */
.hero-bullets li::before,
.page-hero-bullets li::before {
  background: none !important;
}
/* END CLAUDE-INFLUENCED LEVEL 7 */

/* -------------------------------------------------------------------------
   About hero — reclaim dark delivery panel from clay card skin (must stay last).
   Clay block sets .page-hero-visual { background: var(--surface) !important }
   and .page-hero-visual-photo { position: absolute; inset: 0 }, which hollows
   the about aside into a cream card with invisible white text.
   ------------------------------------------------------------------------- */
.page-id-about .page-hero-layout {
  align-items: stretch;
}
@media (min-width: 980px) {
  .page-id-about .page-hero-layout {
    grid-template-columns: minmax(0, 1.12fr) minmax(280px, 0.88fr);
  }
}
.page-id-about .page-hero-visual,
.page-id-about .page-hero-visual.page-hero-visual--about-brand {
  background: #1a2332 !important;
  border: 1px solid rgba(15, 23, 42, 0.35) !important;
  box-shadow: 0 12px 36px rgba(22, 30, 42, 0.14) !important;
  color: #f8fafc !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: 100%;
  display: flex !important;
  flex-direction: column !important;
  align-self: stretch;
  overflow: hidden;
  isolation: isolate;
}
.page-id-about .page-hero-visual::before,
.page-id-about .page-hero-visual::after {
  content: none !important;
  display: none !important;
}
.page-id-about .page-hero-visual > * {
  position: relative !important;
  z-index: auto !important;
}
.page-id-about .page-hero-visual-photo {
  position: relative !important;
  inset: auto !important;
  flex: 0 0 auto !important;
  width: 100%;
  height: clamp(150px, 22vw, 200px) !important;
  min-height: clamp(150px, 22vw, 200px) !important;
  max-height: 200px !important;
  overflow: hidden !important;
  z-index: 1 !important;
}
.page-id-about .page-hero-visual-photo img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center 35% !important;
  display: block !important;
}
.page-id-about .page-hero-visual-overlay {
  display: none !important;
}
.page-id-about .page-hero-visual-content {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  position: relative !important;
  z-index: 2 !important;
  padding: 0 !important;
  color: #f8fafc !important;
}
.page-id-about .page-hero-visual-delivery-scope {
  flex: 1 1 auto !important;
  padding: 14px 16px 16px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.04) 100%) !important;
  border: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #f8fafc !important;
}
.page-id-about .page-hero-visual-delivery-scope-label {
  color: rgba(248, 250, 252, 0.9) !important;
  font-weight: 800 !important;
}
.page-id-about .page-hero-visual-delivery-scope-title {
  color: #fdba74 !important;
  font-weight: 800 !important;
}
.page-id-about .page-hero-visual-delivery-scope-desc,
.page-id-about .page-hero-visual-delivery-scope-note {
  color: rgba(226, 232, 240, 0.9) !important;
}
.page-id-about .page-hero-visual-flow-chip {
  background: rgba(255, 255, 255, 0.11) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #f8fafc !important;
}


/* ============================================================
   Remove clay-theme decorative asterisks (✱ / ✱ ✱ ✱)
   ============================================================ */

/* Eyebrow: restore brand accent bar (no ✱ glyph) */
.eyebrow::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 4px !important;
  height: 14px !important;
  background: linear-gradient(180deg, #f39a17, #e76e1c) !important;
  border-radius: 2px !important;
  color: transparent !important;
  font-size: 0 !important;
  margin-right: 0 !important;
  line-height: 0 !important;
}

/* Triple-asterisk section / footer / article ornaments */
.section + .section:not(.section-alt)::before,
.section-alt + .section:not(.section-alt)::before,
.site-footer::before,
.section:not(.section-alt):not(.hero):not(.page-hero) > .container::before,
[class*="page-id-insight-"] main::after {
  content: none !important;
  display: none !important;
}

/* Single ✱ ornaments on headings, bullets, floating hero decorations */
.section-home-proof-summary > .container > h2::before,
.section-home-why-igears > .container > h2::before,
.hero-bullets li::before,
.hero-bullets > li::before,
.page-hero .page-hero-copy h1::before,
.page-hero h1::before,
[class*="page-id-insight-"] .section h2::before,
.insight-article-meta-rail::before,
.page-id-home .hero::before,
.page-id-home .hero::after,
.page-id-home .hero > .container::before,
.page-id-home .hero > .container::after,
.page-hero::before {
  content: none !important;
  display: none !important;
}


/* Why / proof essay headings: no decorative ✱; eyebrow removed in content for why-igears */
.section-home-why-igears > .container > h2::before,
.section-home-proof-summary > .container > h2::before {
  content: none !important;
  display: none !important;
  margin: 0 !important;
}
@media (max-width: 899px) {
  .section-home-why-igears > .container > h2::before,
  .section-home-proof-summary > .container > h2::before {
    content: none !important;
    display: none !important;
  }
}



/* brand-orange.css */
/* Canonical iGears brand layer. Loaded after locale CSS. */
:root {
  --brand: #f39a17;
  --brand-primary: #f39a17;
  --brand-dark: #d88308;
  --brand-light: rgba(243, 154, 23, .10);
  --accent-color: #f39a17;
  --accent-clay: #f39a17;
  --accent-clay-dark: #d88308;
  --accent-clay-tint: rgba(243, 154, 23, .10);
}

::selection {
  background: rgba(243, 154, 23, .28);
  color: #1c2531;
}

.geo-answer-summary {
  padding-block: clamp(2rem, 4vw, 3.5rem);
}

.geo-answer-card,
.insight-key-takeaways {
  border: 1px solid rgb(243 154 23 / 32%);
  border-left: 5px solid var(--brand);
  border-radius: 18px;
  background: linear-gradient(135deg, rgb(243 154 23 / 10%), rgb(255 255 255 / 96%));
  box-shadow: 0 16px 40px rgb(72 43 7 / 8%);
}

.geo-answer-card {
  padding: clamp(1.4rem, 3vw, 2.2rem);
}

.geo-answer-card h2,
.insight-key-takeaways h2 {
  margin-top: 0;
}

.geo-answer-definition {
  max-width: 78ch;
  font-size: clamp(1rem, 1.4vw, 1.12rem);
}

.geo-answer-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.4rem 0 0;
}

.geo-answer-facts > div {
  padding: 1rem;
  border-radius: 12px;
  background: rgb(255 255 255 / 72%);
}

.geo-answer-facts dt {
  margin-bottom: 0.35rem;
  color: var(--brand-deep, #b96800);
  font-weight: 750;
}

.geo-answer-facts dd {
  margin: 0;
}

.insight-key-takeaways {
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
}

.insight-key-takeaways ul {
  margin-bottom: 0;
}

@media (max-width: 720px) {
  .geo-answer-facts {
    grid-template-columns: 1fr;
  }
}

:focus-visible {
  outline-color: var(--brand-dark);
}

/* Persistent WhatsApp enquiry entry point. */
.site-whatsapp-fab {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 150;
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  min-height: 58px;
  padding: .35rem .35rem .35rem 1rem;
  border: 2px solid rgb(255 255 255 / 92%);
  border-radius: 999px;
  color: #fff;
  background: #167c43;
  box-shadow: 0 12px 32px rgb(9 50 29 / 28%), 0 0 0 3px rgb(243 154 23 / 28%);
  font-weight: 760;
  line-height: 1;
  text-decoration: none;
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.site-whatsapp-fab:hover {
  color: #fff;
  background: #116b39;
  box-shadow: 0 15px 38px rgb(9 50 29 / 34%), 0 0 0 4px rgb(243 154 23 / 38%);
  transform: translateY(-2px);
}

.site-whatsapp-fab:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.site-whatsapp-fab-icon {
  display: grid;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 50%;
  background: #25d366;
}

.site-whatsapp-fab-icon svg {
  display: block;
  width: 27px;
  height: 27px;
  fill: currentColor;
}

body.menu-open .site-whatsapp-fab {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 640px) {
  .site-whatsapp-fab {
    right: max(.85rem, env(safe-area-inset-right));
    bottom: max(.85rem, env(safe-area-inset-bottom));
    width: 58px;
    min-height: 58px;
    padding: 4px;
  }

  .site-whatsapp-fab-label {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-whatsapp-fab {
    transition: none;
  }
}


/* visual-editorial.css */
/* Hong Kong editorial service sections, September 2026. */
.editorial-section {
  --editorial-ink: #29271f;
  --editorial-muted: #635e52;
  --editorial-rule: #ded9cf;
  --editorial-accent: #976015;
  background: #fcfbf7;
  color: var(--editorial-ink);
  padding-block: clamp(56px, 6.6vw, 92px);
  scroll-margin-top: 72px;
}
.editorial-section .container { max-width: 1200px; }
.editorial-section .editorial-heading { max-width: 870px; margin: 0 0 38px; }
.editorial-section .editorial-heading h2 {
  /* The legacy theme forces all headings with !important; isolate this component. */
  font-family: "Segoe UI", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif !important;
  color: var(--editorial-ink);
  font-size: clamp(26px, 2.8vw, 38px) !important;
  line-height: 1.35 !important;
  letter-spacing: -.025em;
  margin: 0 0 16px;
}
.editorial-section .editorial-intro { color: var(--editorial-muted); line-height: 1.85; margin: 0; max-width: 760px; }
.editorial-section .eyebrow { color: var(--editorial-accent); }
.editorial-layout { display: grid; grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); gap: clamp(28px, 5vw, 68px); align-items: start; }
.editorial-figure { margin: 0; position: sticky; top: 104px; min-width: 0; }
.editorial-figure img { display: block; width: 100%; height: auto; aspect-ratio: 6 / 5; object-fit: cover; border-radius: 6px; background: #e9e0d3; }
.editorial-figure figcaption { display: flex; justify-content: space-between; gap: 20px; align-items: start; border-bottom: 1px solid var(--editorial-rule); padding: 18px 0; color: var(--editorial-ink); font-size: 14px; line-height: 1.65; font-weight: 600; }
.editorial-figure figcaption small { flex-shrink: 0; color: var(--editorial-muted); font-weight: 400; font-size: 10px; letter-spacing: .07em; padding-top: 3px; }
.editorial-entries { min-width: 0; }
.editorial-entry { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 18px; border-top: 1px solid var(--editorial-rule); padding: 23px 0 26px; margin: 0; background: transparent; }
.editorial-number { color: var(--editorial-accent); font-size: 12px; line-height: 2.5; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.editorial-section .editorial-entry h3 { color: var(--editorial-ink); font-size: 20px; line-height: 1.45; letter-spacing: -.015em; margin: 0 0 9px; }
.editorial-entry h3 a { color: inherit; text-decoration: none; display: flex; gap: 16px; align-items: baseline; justify-content: space-between; min-height: 32px; }
.editorial-entry h3 a:hover { color: var(--editorial-accent); }
.editorial-entry h3 a:focus-visible { outline: 2px solid var(--editorial-accent); outline-offset: 6px; border-radius: 2px; }
.editorial-arrow { color: var(--editorial-accent); font-weight: 400; flex: 0 0 auto; transition: transform .2s ease; }
.editorial-entry a:hover .editorial-arrow { transform: translate(2px, -2px); }
.editorial-entry p, .editorial-entry li { color: var(--editorial-muted); font-size: 15px; line-height: 1.8; margin: 0; }
.editorial-entry ul { padding-left: 19px; margin: 12px 0 0; }
.editorial-entry .editorial-value { color: var(--editorial-accent); margin-bottom: 6px; font-size: 12px; font-weight: 600; }
.editorial-entry .editorial-audience { font-size: 12px; margin-top: 10px; }
.editorial-entry .editorial-kicker { color: var(--editorial-accent); font-size: 11px; margin-bottom: 7px; }
.editorial-action { margin: 10px 0 0 46px; }
.editorial-action .btn { gap: 16px; }
.editorial-note { margin: 30px 0 0; padding-top: 20px; border-top: 1px solid var(--editorial-rule); font-size: 12px; line-height: 1.8; color: var(--editorial-muted); max-width: 100%; }
.editorial-section--dark { --editorial-ink: #f8f4ec; --editorial-muted: #c5bfb3; --editorial-rule: #4a453c; --editorial-accent: #f4ae49; background: #24231f; }
.editorial-section--dark .editorial-figure img { aspect-ratio: 1; background: #38332b; }
.editorial-section--dark .editorial-action .btn { color: #231a0e; background: #f3a32f; border-color: #f3a32f; }
.editorial-section--list { background: #f4f1ea; }
.editorial-section--list .editorial-layout { display: block; }
.editorial-section--list .editorial-entries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; }
.editorial-section--list .editorial-entry { padding-block: 25px; }
@media (max-width: 1000px) {
  .editorial-layout { gap: 30px; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); }
  .editorial-entry { gap: 12px; }
  .editorial-section .editorial-entry h3 { font-size: 19px; }
  .editorial-figure figcaption { flex-direction: column; gap: 6px; }
}
@media (max-width: 760px) {
  .editorial-section .container { width: calc(100% - 40px); padding-inline: 0; }
  .editorial-section .editorial-heading { margin-bottom: 26px; }
  .editorial-layout { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .editorial-figure { position: static; }
  .editorial-figure img, .editorial-section--dark .editorial-figure img { aspect-ratio: 3 / 2; }
  .editorial-figure figcaption { flex-direction: row; gap: 18px; padding-block: 14px; }
  .editorial-section--list .editorial-entries { grid-template-columns: minmax(0, 1fr); }
  .editorial-entry { padding: 21px 0; }
  .editorial-entry h3 a { min-height: 44px; align-items: center; }
  .editorial-action { margin-left: 40px; }
}
@media (prefers-reduced-motion: reduce) { .editorial-arrow { transition: none; } }


/* recovery-conversion.css */
/* Recovery and conversion components shared by every locale. */
.recovery-reference {
  padding-top: clamp(2.5rem, 5vw, 5rem);
}

.recovery-reference-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.recovery-reference-card {
  position: relative;
  display: block;
  min-height: 150px;
  padding: 1.4rem 3.5rem 1.4rem 1.4rem;
  color: inherit;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.recovery-reference-card:hover,
.recovery-reference-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--brand, #f39a17);
  box-shadow: 0 14px 30px rgba(21, 48, 92, .12);
}

.recovery-reference-card h3 { margin-top: 0; }
.recovery-reference-card p { margin-bottom: 0; color: var(--muted, #5e6675); }
.recovery-reference-card > span {
  position: absolute;
  top: 1.4rem;
  right: 1.4rem;
  color: var(--brand-dark, #d88308);
  font-size: 1.35rem;
}

.recovery-contact { margin: 1.5rem 0 0; }
.recovery-contact a { font-weight: 700; }

@media (max-width: 700px) {
  .recovery-reference-grid { grid-template-columns: 1fr; }
}

.enquiry-builder-layout {
  display: grid;
  grid-template-columns: minmax(220px, .72fr) minmax(0, 1.5fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}

.enquiry-builder-intro { position: sticky; top: 6rem; }
.enquiry-builder-form { padding: clamp(1.25rem, 3vw, 2rem); }
.enquiry-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.enquiry-field-grid label { display: grid; gap: .45rem; font-weight: 700; }
.enquiry-field-grid input,
.enquiry-field-grid select,
.enquiry-field-grid textarea {
  width: 100%;
  box-sizing: border-box;
  padding: .78rem .85rem;
  border: 1px solid #cbd3df;
  border-radius: 8px;
  background: #fff;
  color: inherit;
  font: inherit;
}
.enquiry-field-grid input:focus,
.enquiry-field-grid select:focus,
.enquiry-field-grid textarea:focus {
  outline: 3px solid rgba(243, 154, 23, .18);
  border-color: var(--brand, #f39a17);
}
.enquiry-field-wide { grid-column: 1 / -1; }
.enquiry-builder-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.enquiry-privacy { margin: 1rem 0 0; color: var(--muted, #5e6675); font-size: .88rem; }
.enquiry-consent { display: flex; gap: .65rem; align-items: flex-start; margin-top: 1.15rem; font-size: .9rem; line-height: 1.55; font-weight: 500; }
.enquiry-consent input { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; margin-top: .2rem; accent-color: var(--brand, #f39a17); }
.enquiry-capture-status { margin: .9rem 0 0; color: var(--muted, #5e6675); font-size: .88rem; }
.enquiry-capture-status[data-error="true"] { color: #a52727; }
.enquiry-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.page-solution-pattern .section-case-post-hero-trust .container {
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-left: 4px solid #f19124;
  background: rgba(243, 154, 23, .07);
}
.page-solution-pattern .case-post-hero-trust-text { margin: 0; font-weight: 650; }

@media (max-width: 800px) {
  .enquiry-builder-layout { grid-template-columns: 1fr; }
  .enquiry-builder-intro { position: static; }
}
@media (max-width: 560px) {
  .enquiry-field-grid { grid-template-columns: 1fr; }
  .enquiry-field-wide { grid-column: auto; }
  .enquiry-builder-actions .btn { width: 100%; }
}
.footer-subheading {
  margin: 1.35rem 0 .65rem;
  color: #fff;
  font-size: .92rem;
  letter-spacing: .02em;
}


/* ai-economics.css */
/* Human + AI productivity, AI Economics and browser calculators. */

.page-ai-economics .page-hero {
  overflow: hidden;
  background:
    radial-gradient(circle at 85% 12%, rgb(243 154 23 / 20%), transparent 28rem),
    linear-gradient(145deg, #fff9ee 0%, #fff 58%, #f7f3eb 100%);
}

.page-ai-economics .page-hero-layout {
  gap: clamp(1.5rem, 4vw, 3.75rem);
  align-items: center;
}

.page-ai-economics .page-hero-copy {
  min-width: 0;
}

.page-ai-economics .page-hero-subtitle {
  max-width: 70ch;
  color: var(--text);
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.72;
}

.page-ai-economics .page-hero-trust-meta {
  color: var(--muted);
  font-size: .875rem;
}

.page-hero-visual--ai-economics,
.hero-visual--ai-economics-home {
  align-self: center;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgb(216 131 8 / 22%);
  border-radius: clamp(18px, 3vw, 28px);
  background: #efe7d8;
  box-shadow: 0 24px 58px rgb(76 48 14 / 16%);
}

.page-hero-visual--ai-economics .page-hero-visual-photo,
.hero-visual--ai-economics-home .hero-visual-photo {
  position: relative;
  inset: auto;
  width: 100%;
  min-height: 0;
  aspect-ratio: 16 / 10;
}

.page-hero-visual--ai-economics img,
.hero-visual--ai-economics-home img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-hero-visual--ai-economics .page-hero-visual-overlay,
.hero-visual--ai-economics-home .hero-visual-overlay {
  background: linear-gradient(180deg, transparent 58%, rgb(32 29 24 / 24%));
}

.hero-visual--ai-economics-home .hero-visual-photo-micro {
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  width: fit-content;
  max-width: calc(100% - 2rem);
  color: #fff;
  background: rgb(28 32 38 / 78%);
  backdrop-filter: blur(8px);
}

.section-ai-economics {
  position: relative;
}

.section-ai-economics .ai-economics-section-heading {
  max-width: 800px;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.section-ai-economics .ai-economics-section-heading h2 {
  margin-top: .35rem;
  text-wrap: balance;
}

.section-ai-economics .ai-economics-section-heading .section-intro {
  max-width: 70ch;
  margin-bottom: 0;
}

.ai-economics-image,
.ai-outcome-card__picture {
  display: block;
  width: 100%;
}

.ai-economics-image img,
.ai-outcome-card__picture img {
  display: block;
  width: 100%;
  height: auto;
}

/* Generic editorial figures must never retain their intrinsic bitmap width. */
.page-ai-economics .media-highlight,
.page-ai-economics .media-highlight-figure,
.page-ai-economics .media-highlight-figure-inner {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.page-ai-economics .media-highlight-figure-inner {
  overflow: hidden;
}

.page-ai-economics .media-highlight-figure {
  margin: 0;
}

.page-ai-economics .media-highlight-figure-inner > img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.ai-outcome-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

.ai-outcome-card {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgb(216 131 8 / 20%);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.ai-outcome-card__media {
  aspect-ratio: 16 / 8.5;
  margin: 0;
  overflow: hidden;
  background: #eee5d7;
}

.ai-outcome-card__media img {
  height: 100%;
  object-fit: cover;
}

.ai-outcome-card__body {
  display: flex;
  flex-direction: column;
  padding: clamp(1.3rem, 3vw, 2rem);
}

.ai-outcome-card__kicker {
  margin: 0 0 .45rem;
  color: var(--brand-dark);
  font-size: .8rem;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.ai-outcome-card h3,
.ai-tool-teaser-card h3,
.ai-workflow-card h3,
.ai-cost-layer h3 {
  margin: 0 0 .55rem;
}

.ai-check-list {
  display: grid;
  gap: .5rem;
  margin: .8rem 0 0;
  padding: 0;
}

.ai-check-list li {
  position: relative;
  padding-left: 1.55rem;
  list-style: none;
}

.ai-check-list li::before {
  position: absolute;
  top: .04rem;
  left: 0;
  color: var(--brand-dark);
  content: "✓";
  font-weight: 900;
}

.ai-outcome-card__action {
  margin: auto 0 0;
  padding-top: 1.1rem;
}

.ai-cost-layer-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .8rem;
  margin: 0;
  padding: 0;
  counter-reset: none;
}

.ai-cost-layer {
  display: block;
  min-width: 0;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-top: 4px solid var(--brand);
  border-radius: 14px;
  background: var(--surface);
}

.ai-cost-layer__number {
  display: block;
  margin-bottom: .75rem;
  color: var(--brand-dark);
  font-size: .8rem;
  font-weight: 900;
  letter-spacing: .12em;
}

.ai-cost-layer h3 {
  font-size: 1rem;
  line-height: 1.35;
}

.ai-cost-layer p {
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
}

.ai-economics-split {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(320px, .96fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}

.ai-economics-split__copy,
.ai-economics-split__media {
  min-width: 0;
}

.ai-economics-split__media {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgb(216 131 8 / 18%);
  border-radius: 20px;
  background: #f2eadc;
  box-shadow: var(--shadow);
}

.ai-economics-split__media img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.ai-economics-framework .ai-economics-section-heading,
.ai-model-routing .ai-economics-section-heading {
  margin-bottom: 1.3rem;
}

.ai-routing-list {
  display: grid;
  gap: .55rem;
  margin: 0;
}

.ai-routing-list__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: .75rem;
  align-items: center;
  padding: .72rem .85rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgb(255 255 255 / 78%);
}

.ai-routing-list dt {
  color: var(--muted);
  font-weight: 700;
}

.ai-routing-list dd {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .55rem;
  align-items: center;
  margin: 0;
  color: var(--text);
  font-weight: 800;
}

.ai-routing-arrow {
  color: var(--brand-dark);
  font-size: 1.1rem;
}

.ai-routing-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ai-economics-equation {
  display: grid;
  grid-template-columns: repeat(7, auto);
  gap: .45rem;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin-top: 1.35rem;
}

.ai-economics-equation__term {
  padding: .65rem .75rem;
  border: 1px solid rgb(216 131 8 / 24%);
  border-radius: 9px;
  background: rgb(243 154 23 / 9%);
  font-size: .82rem;
  font-weight: 800;
  text-align: center;
}

.ai-economics-equation__term:last-child {
  color: #fff;
  background: var(--text);
}

.ai-economics-equation__operator {
  color: var(--brand-dark);
  font-weight: 900;
}

.ai-workflow-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.ai-workflow-card {
  min-width: 0;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface);
}

.ai-workflow-card dl,
.ai-workflow-card dl div {
  display: grid;
  gap: .3rem;
  margin: 0;
}

.ai-workflow-card dl {
  gap: .75rem;
}

.ai-workflow-card dl div {
  padding: .75rem;
  border-radius: 9px;
  background: #f6f7f9;
}

.ai-workflow-card dl div:last-child {
  background: rgb(243 154 23 / 10%);
}

.ai-workflow-card dt {
  color: var(--muted);
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.ai-workflow-card dd {
  margin: 0;
  font-size: .92rem;
}

.ai-tools-teaser-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.ai-tool-teaser-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 225px;
  padding: 1.4rem;
  overflow: hidden;
  border: 1px solid rgb(216 131 8 / 22%);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 10px 26px rgb(31 39 50 / 6%);
}

.ai-tool-teaser-card::after {
  position: absolute;
  right: -3rem;
  bottom: -4rem;
  width: 10rem;
  height: 10rem;
  content: "";
  border-radius: 50%;
  background: rgb(243 154 23 / 8%);
}

.ai-tool-teaser-card__number {
  margin-bottom: .8rem;
  color: var(--brand-dark);
  font-size: .8rem;
  font-weight: 900;
  letter-spacing: .12em;
}

.ai-tool-teaser-card p {
  margin-top: 0;
  color: var(--muted);
}

.ai-tool-teaser-card__link {
  z-index: 1;
  width: fit-content;
  margin-top: auto;
  color: var(--brand-dark);
  font-weight: 850;
}

.ai-tools-privacy {
  width: fit-content;
  margin: 1.25rem auto 0;
  padding: .7rem 1rem;
  border-radius: 999px;
  color: var(--muted);
  background: rgb(255 255 255 / 72%);
  font-size: .875rem;
}

.section-ai-calculator-workspace {
  padding-top: clamp(2rem, 4vw, 3.5rem);
  background:
    radial-gradient(circle at 95% 5%, rgb(243 154 23 / 12%), transparent 22rem),
    #f6f8fb;
}

.ai-calculator-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(300px, .6fr);
  gap: clamp(1rem, 2.5vw, 1.5rem);
  align-items: start;
}

.ai-calculator-form,
.ai-calculator-results {
  min-width: 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.ai-calculator-form__header {
  margin-bottom: 1.2rem;
}

.ai-calculator-form__header h2 {
  margin: .35rem 0 .5rem;
  text-wrap: balance;
}

.ai-calculator-form__header p:not(.eyebrow),
.ai-calculator-fieldset-intro {
  color: var(--muted);
}

.ai-calculator-required-note {
  margin-bottom: 0;
  font-size: .82rem;
}

.ai-calculator-required {
  color: #a83b1f;
}

.ai-calculator-privacy {
  margin: 0 0 1.2rem;
  padding: .8rem 1rem;
  border-left: 4px solid var(--brand);
  color: var(--muted);
  background: rgb(243 154 23 / 8%);
  font-size: .88rem;
}

.ai-calculator-noscript {
  margin: 0 0 1.2rem;
  padding: .8rem 1rem;
  border: 1px solid #b74a32;
  border-radius: 9px;
  color: #7c2f1e;
  background: #fff5f2;
  font-weight: 750;
}

.ai-calculator-form fieldset {
  min-width: 0;
  margin: 0 0 1.35rem;
  padding: 0;
  border: 0;
}

.ai-calculator-form legend {
  width: 100%;
  margin-bottom: .8rem;
  padding: 0 0 .55rem;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-size: 1.03rem;
  font-weight: 850;
}

.ai-calculator-fieldset-intro {
  margin: -.35rem 0 .8rem;
  font-size: .85rem;
}

.ai-calculator-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem;
}

.ai-calculator-grid--spend {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ai-calculator-field {
  display: grid;
  min-width: 0;
  gap: .38rem;
}

.ai-calculator-field__label {
  color: var(--text);
  font-size: .88rem;
  font-weight: 750;
  line-height: 1.42;
}

.ai-calculator-input-wrap {
  position: relative;
  display: block;
}

.ai-calculator-field input,
.ai-calculator-field select {
  width: 100%;
  min-height: 48px;
  padding: .72rem .8rem;
  border: 1px solid #b9c2ce;
  border-radius: 9px;
  background: #fff;
  color: var(--text);
  font: inherit;
}

.ai-calculator-field input {
  padding-right: 4.8rem;
}

.ai-calculator-field input:focus,
.ai-calculator-field select:focus {
  outline: 3px solid rgb(243 154 23 / 23%);
  outline-offset: 1px;
  border-color: var(--brand-dark);
}

.ai-calculator-field input:invalid:not(:focus):not(:placeholder-shown),
.ai-calculator-field select:invalid:not(:focus) {
  border-color: #b74a32;
}

.ai-calculator-field__suffix {
  position: absolute;
  top: 50%;
  right: .75rem;
  max-width: 4rem;
  overflow: hidden;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
  transform: translateY(-50%);
  pointer-events: none;
}

.ai-calculator-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  padding-top: .25rem;
}

.ai-calculator-actions .btn {
  min-height: 48px;
  cursor: pointer;
}

.ai-calculator-actions .btn:disabled {
  cursor: not-allowed;
  opacity: .48;
}

.ai-calculator-results {
  position: static;
  scroll-margin-top: calc(72px + 1rem);
  border-top: 5px solid var(--brand);
}

.ai-calculator-results[hidden] {
  display: none;
}

.ai-calculator-results h2,
.ai-calculator-results h3 {
  text-wrap: balance;
}

.ai-calculator-results h2:first-child {
  margin-top: 0;
}

.ai-calculator-results dl {
  display: grid;
  gap: .6rem;
  margin: 1rem 0;
}

.ai-calculator-results dl > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .2rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--line);
}

.ai-calculator-results dt {
  color: var(--muted);
}

.ai-calculator-results dd {
  margin: 0;
  font-weight: 850;
  overflow-wrap: anywhere;
  text-align: left;
}

.ai-calculator-results table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}

.ai-calculator-results th,
.ai-calculator-results td {
  padding: .65rem .5rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.ai-calculator-results .ai-result-highlight,
.ai-calculator-results .calculator-highlight {
  padding: .9rem 1rem;
  border-radius: 10px;
  background: rgb(243 154 23 / 10%);
}

.ai-calculator-result-list {
  margin-top: 1.15rem;
  padding-top: .2rem;
}

.ai-calculator-result-list h3 {
  margin-bottom: .55rem;
  font-size: 1rem;
}

.ai-calculator-result-list ul,
.ai-calculator-error-list,
.ai-calculator-assumptions ul {
  display: grid;
  gap: .5rem;
  margin: 0;
  padding-left: 1.2rem;
}

.ai-calculator-assumptions {
  margin-top: 1.2rem;
  padding: .8rem 1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8f9fb;
}

.ai-calculator-assumptions summary {
  cursor: pointer;
  font-weight: 800;
}

.ai-calculator-assumptions ul {
  margin-top: .75rem;
}

.ai-calculator-disclaimer {
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: .82rem;
}

.ai-calculator-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 1.15rem;
}

.ai-calculator-error-list {
  color: #7c2f1e;
}

.section-ai-calculator-method .rich-text-block {
  max-width: 900px;
}

.page-ai-calculator .site-whatsapp-fab {
  display: none;
}

/* Insights hub: five illustrated AI Economics guides. */
.page-id-insights .section-ai-economics-cornerstones .ai-economics-cornerstone-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(.8rem, 1.4vw, 1.15rem);
  align-items: stretch;
}

.page-id-insights .section-ai-economics-cornerstones .contact-enquiry-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100%;
  padding: 0 0 1.1rem;
  overflow: hidden;
  border: 1px solid rgb(80 66 43 / 14%);
  border-radius: 18px;
  background: #fffdfa;
  box-shadow: 0 10px 28px rgb(62 48 28 / 7%);
}

.page-id-insights .section-ai-economics-cornerstones .contact-enquiry-card .card-media {
  width: 100%;
  min-height: 0;
  aspect-ratio: 3 / 2;
  margin: 0 0 1rem;
  overflow: hidden;
  border-radius: 0;
  background: #efe7d8;
}

.page-id-insights .section-ai-economics-cornerstones .contact-enquiry-card .card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .28s ease;
}

.page-id-insights .section-ai-economics-cornerstones .contact-enquiry-card h3,
.page-id-insights .section-ai-economics-cornerstones .contact-enquiry-card .section-card-desc {
  margin-right: 1.05rem;
  margin-left: 1.05rem;
}

.page-id-insights .section-ai-economics-cornerstones .contact-enquiry-card h3 {
  margin-bottom: .5rem;
  font-size: clamp(1rem, 1.3vw, 1.14rem);
  line-height: 1.32;
  text-wrap: balance;
}

.page-id-insights .section-ai-economics-cornerstones .contact-enquiry-card .section-card-desc {
  color: #5d6470;
  font-size: .9rem;
  line-height: 1.55;
}

.page-id-insights .section-ai-economics-cornerstones .contact-enquiry-card:hover .card-media img,
.page-id-insights .section-ai-economics-cornerstones .contact-enquiry-card:focus-visible .card-media img {
  transform: scale(1.025);
}

@media (max-width: 1099px) {
  .page-id-insights .section-ai-economics-cornerstones .ai-economics-cornerstone-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 719px) {
  .page-id-insights .section-ai-economics-cornerstones .ai-economics-cornerstone-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 479px) {
  .page-id-insights .section-ai-economics-cornerstones .ai-economics-cornerstone-grid {
    grid-template-columns: 1fr;
  }

  .page-id-insights .section-ai-economics-cornerstones .contact-enquiry-card .card-media {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 1020px) {
  .ai-cost-layer-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ai-calculator-shell {
    grid-template-columns: 1fr;
  }

  .ai-calculator-results {
    position: static;
  }
}

@media (max-width: 820px) {
  .ai-outcome-grid,
  .ai-economics-split {
    grid-template-columns: 1fr;
  }

  .ai-model-routing .ai-economics-split__media {
    order: -1;
  }

  .ai-workflow-grid,
  .ai-tools-teaser-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ai-calculator-grid--spend {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 980px) and (max-width: 1300px) {
  body.page-ai-economics .site-head .container,
  body.page-id-home .site-head .container,
  body.page-id-services .site-head .container,
  body.page-id-insights .site-head .container,
  body.page-id-contact .site-head .container {
    width: min(1200px, 96%);
  }
}

@media (max-width: 600px) {
  .page-ai-economics .page-hero-layout {
    gap: 1.25rem;
  }

  .ai-cost-layer-list,
  .ai-workflow-grid,
  .ai-tools-teaser-grid,
  .ai-calculator-grid,
  .ai-calculator-grid--spend {
    grid-template-columns: 1fr;
  }

  .ai-cost-layer {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .9rem;
  }

  .ai-routing-list__row {
    grid-template-columns: 1fr;
    gap: .25rem;
  }

  .ai-routing-list dd {
    padding-left: .15rem;
  }

  .ai-economics-equation {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .ai-economics-equation__operator {
    text-align: center;
  }

  .ai-calculator-form,
  .ai-calculator-results {
    padding: 1rem;
    border-radius: 14px;
  }

  .ai-calculator-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .ai-tools-privacy {
    border-radius: 12px;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-ai-economics *,
  .section-ai-calculator-workspace * {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .site-header,
  .site-footer,
  .page-hero,
  .proof-strip,
  .section-ai-calculator-method,
  .section-ai-economics-faq,
  .section-ai-economics-cta,
  .related-pages,
  .ai-calculator-form,
  .skip-link {
    display: none !important;
  }

  .section-ai-calculator-workspace {
    padding: 0;
    background: #fff;
  }

  .ai-calculator-shell {
    display: block;
  }

  .ai-calculator-results {
    position: static;
    display: block !important;
    border: 1px solid #777;
    box-shadow: none;
  }
}


/* copilot-campaign.css */
/* Copilot and practical-AI campaign additions. Keep all commercial text in HTML. */

.section-copilot-pricing .section-card,
.section-copilot-extras .section-card,
.section-ai-ecosystem .section-card,
.section-home-ai-readiness-band .section-card {
  height: 100%;
}

.copilot-pricing-grid .section-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(34, 48, 72, 0.14);
  background:
    radial-gradient(circle at 100% 0%, rgba(243, 154, 23, 0.12), transparent 42%),
    #fff;
}

.copilot-pricing-grid .section-card--emphasis-featured {
  border-color: rgba(224, 127, 17, 0.42);
  box-shadow: 0 18px 42px rgba(107, 65, 13, 0.1);
}

.copilot-pricing-grid .section-card-value-line strong {
  color: #b65d08;
  font-size: clamp(1.16rem, 2vw, 1.48rem);
}

.copilot-journey-grid .step-card {
  border-top: 3px solid rgba(235, 137, 22, 0.8);
}

/* The base theme adds a decorative empty square to every section card. On the
   Copilot page it reads as a missing icon, so use only the real inline SVGs. */
.page-id-service-microsoft-365-copilot main .section-card::before {
  content: none;
  display: none;
}

.page-id-service-microsoft-365-copilot main .geo-answer-summary {
  display: none;
}

.section-copilot-journey-visual .flow-visual-split {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(2rem, 5vw, 4.75rem);
  align-items: center;
}

.section-copilot-journey-visual .flow-visual-copy h2 {
  max-width: 16ch;
  margin-bottom: 1.25rem;
}

.section-copilot-journey-visual .flow-visual-bullets {
  counter-reset: copilot-journey;
  display: grid;
  gap: 0.72rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.section-copilot-journey-visual .flow-visual-bullets li {
  counter-increment: copilot-journey;
  position: relative;
  min-height: 3.25rem;
  margin: 0;
  padding: 0.82rem 1rem 0.82rem 3.7rem;
  border: 1px solid rgba(34, 48, 72, 0.12);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 10px 28px rgba(37, 48, 64, 0.05);
}

.section-copilot-journey-visual .flow-visual-bullets li::before {
  content: counter(copilot-journey);
  position: absolute;
  top: 50%;
  left: 0.95rem;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #e88f21, #b85c09);
  font-weight: 800;
  transform: translateY(-50%);
}

.section-copilot-journey-visual .flow-visual-figure {
  margin: 0;
}

.section-copilot-journey-visual .flow-visual-figure-inner {
  overflow: hidden;
  border: 1px solid rgba(34, 48, 72, 0.14);
  border-radius: clamp(1.1rem, 2.5vw, 1.75rem);
  background: #f3eee7;
  box-shadow: 0 24px 60px rgba(37, 48, 64, 0.12);
}

.section-copilot-journey-visual .flow-visual-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.section-copilot-extras .section-card,
.section-copilot-fit .section-card {
  padding: clamp(1.25rem, 2.2vw, 1.65rem);
}

.copilot-ecosystem-grid .section-card {
  display: flex;
  flex-direction: column;
}

.copilot-ecosystem-grid .section-card-cta-line {
  margin-top: auto;
  padding-top: 1rem;
}

.copilot-ecosystem-grid .copilot-ecosystem-card--optional {
  border-style: dashed;
  border-color: rgba(224, 127, 17, 0.6);
  background: rgba(255, 248, 238, 0.72);
}

.copilot-readiness-grid {
  counter-reset: readiness;
}

.copilot-readiness-grid .section-card {
  position: relative;
  border-top: 3px solid rgba(26, 69, 96, 0.72);
}

.copilot-readiness-grid .section-card:not(:last-child)::after {
  content: "→";
  position: absolute;
  z-index: 2;
  top: 50%;
  right: -1.1rem;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(224, 127, 17, 0.24);
  border-radius: 50%;
  color: #b65d08;
  background: #fff;
  transform: translateY(-50%);
}

.section-ai-knowledge-two-paths .section-card:first-child {
  border-top: 3px solid #e48618;
}

.section-ai-knowledge-two-paths .section-card:last-child {
  border-top: 3px solid #236f82;
}

.section-copilot-direct-answer .container,
.section-copilot-public-nonprofit .container {
  max-width: 58rem;
}

/* ImageGen campaign heroes: let the artwork carry the visual story without
   repeating the hero bullets over the image. The delivery-scope copy remains
   in the document for non-visual consumers, but is visually suppressed here. */
.page-hero-visual.campaign-hero-art {
  min-height: 420px;
  padding: 0;
  border-color: rgba(33, 54, 78, 0.16);
  background: #e8edf2;
}

.page-hero-visual.campaign-hero-art::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(17, 32, 49, 0.08));
}

.page-hero-visual.campaign-hero-art .page-hero-visual-overlay {
  background: linear-gradient(180deg, rgba(14, 28, 44, 0.03), rgba(14, 28, 44, 0.12));
}

.page-hero-visual.campaign-hero-art .page-hero-visual-content {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 900px) {
  .page-hero-visual.campaign-hero-art {
    min-height: 340px;
  }

  .copilot-readiness-grid .section-card:not(:last-child)::after {
    content: none;
  }

  .section-copilot-journey-visual .flow-visual-split {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .section-copilot-journey-visual .flow-visual-copy h2 {
    max-width: none;
  }

  /* Direct WhatsApp actions already appear in the hero and closing CTA. Avoid
     covering cards with a second floating action on narrow screens. */
  .page-id-service-microsoft-365-copilot .site-whatsapp-fab {
    display: none;
  }

  .page-id-service-microsoft-365-copilot .footer-platform-section .footer-region-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem 1rem;
  }

  .page-id-service-microsoft-365-copilot .footer-platform-section .footer-region-list a {
    overflow-wrap: anywhere;
  }
}


/* proof.css */
/* Proof strip — live HTML figures under the hero. Accent uses AA-safe brand text. */
:root {
  --proof-brand-text: #9a5600;
}

.proof-strip {
  background: linear-gradient(180deg, #f7f5f1 0%, #efece6 100%);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  padding: 1.25rem 0 1.5rem;
}

.proof-strip-cells {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem 1.25rem;
}

.proof-strip-cell {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.proof-strip-value {
  font-size: clamp(0.95rem, 1.6vw, 1.125rem);
  font-weight: 650;
  line-height: 1.35;
  color: #0f172a;
  letter-spacing: -0.01em;
}

.proof-strip-cell-note {
  font-size: 0.75rem;
  color: var(--proof-brand-text);
  font-weight: 600;
}

.proof-strip-clients {
  margin: 1rem 0 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #334155;
}

.proof-strip-attrib {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
  color: #64748b;
}

@media (max-width: 900px) {
  .proof-strip-cells {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .proof-strip-cells {
    grid-template-columns: 1fr;
  }
}


/* work-website-portfolio-r1.css */
/* Work / Care portfolio-truth layer — loads before artwork.css */

:root {
  --work-line: #dde3ec;
  --work-rule: #9caab3;
  --work-surface: #fff;
  --work-radius: 18px;
  --work-radius-sm: 12px;
}

/* —— Filters —— */
.work-filter-panel {
  background: var(--work-surface);
  border: 1px solid var(--work-line);
  border-radius: var(--work-radius);
  padding: 1.1rem 1.25rem 1.25rem;
  margin: 1.25rem 0 1rem;
}
.work-filter-row + .work-filter-row {
  margin-top: 0.9rem;
}
.work-filter-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5b6775;
  margin-bottom: 0.55rem;
}
.work-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.work-filter-chip {
  appearance: none;
  border: 1px solid var(--work-line);
  background: #fff;
  color: #1f2937;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  cursor: pointer;
}
.work-filter-chip:focus-visible {
  outline: 2px solid #1f2937;
  outline-offset: 2px;
}
.work-filter-chip.is-active {
  background: #1f2937;
  border-color: #1f2937;
  color: #fff;
  box-shadow: inset 0 0 0 1px #1f2937;
}
.work-result-count {
  font-size: 0.95rem;
  color: #5b6775;
  margin: 0 0 1rem;
}
.work-empty {
  border: 1px dashed var(--work-line);
  border-radius: var(--work-radius-sm);
  padding: 1.25rem;
  color: #5b6775;
  margin: 0 0 1.5rem;
}

@media (max-width: 430px) {
  .work-filter-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.25rem;
  }
  .work-filter-chip {
    flex: 0 0 auto;
  }
  .work-filter-panel {
    border-radius: var(--work-radius-sm);
  }
}

/* —— Pattern / case cards —— */
.work-case-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.35rem;
}
.work-case-card {
  display: flex;
  flex-direction: column;
  background: var(--work-surface);
  border: 1px solid var(--work-line);
  border-radius: var(--work-radius);
  overflow: hidden;
  min-width: 0;
}
.work-case-visual {
  min-height: 150px;
  background: #eef2f6;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  padding: 1rem;
  position: relative;
}
.work-case-visual--dark {
  background: #1f2937;
  color: #e8eef5;
}
.work-case-visual--paper {
  background: #f7f5f1;
}
.work-mini-diagram {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}
.work-mini-diagram .work-node {
  border: 1px solid var(--work-rule);
  border-radius: 8px;
  padding: 0.35rem 0.55rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.work-case-visual--dark .work-node {
  border-color: rgba(255, 255, 255, 0.35);
}
.work-mini-diagram .work-connector {
  width: 1.1rem;
  height: 1px;
  background: var(--work-rule);
}
.work-website-sheet {
  height: 88px;
  border-radius: 10px;
  border: 1px solid var(--work-line);
  background: linear-gradient(#fff, #f3f5f8);
  box-shadow: 0 8px 18px rgba(31, 41, 55, 0.06);
}
.work-case-caption {
  margin-top: 0.75rem;
  font-size: 0.72rem;
  color: #6b7785;
}
.work-case-visual--dark .work-case-caption {
  color: rgba(232, 238, 245, 0.75);
}
.work-case-body {
  padding: 1rem 1.1rem 0.85rem;
  flex: 1;
}
.work-case-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.65rem;
}
.work-case-tag {
  font-size: 0.68rem;
  font-weight: 700;
  border: 1px solid var(--work-line);
  border-radius: 999px;
  padding: 0.2rem 0.5rem;
  color: #44505c;
}
.work-case-card h3 {
  margin: 0 0 0.25rem;
  font-size: 1.05rem;
  line-height: 1.35;
}
.work-case-en {
  color: #667280;
  font-size: 0.88rem;
  margin-bottom: 0.85rem;
}
.work-case-answers {
  margin: 0;
}
.work-case-answers .work-answer {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: 0.45rem;
  padding: 0.35rem 0;
  border-top: 1px solid var(--work-line);
  font-size: 0.88rem;
}
.work-case-answers dt {
  margin: 0;
  font-weight: 700;
  color: #5b6775;
}
.work-case-answers dd {
  margin: 0;
}
.work-case-care {
  margin-top: auto;
  padding: 0.75rem 1.1rem;
  border-top: 1px solid var(--work-line);
  font-size: 0.86rem;
  font-weight: 600;
  color: #334155;
}

@media (max-width: 980px) {
  .work-case-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .work-case-grid {
    grid-template-columns: 1fr;
  }
  .work-case-card {
    border-radius: var(--work-radius-sm);
  }
}

/* —— Care cards —— */
.work-care-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem;
}
.work-care-card {
  background: var(--work-surface);
  border: 1px solid var(--work-line);
  border-radius: var(--work-radius);
  padding: 1.15rem 1.2rem 0;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.work-care-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: #fff1e8;
  color: var(--brand-text, #c2410c);
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}
.work-care-card h3 {
  margin: 0 0 0.55rem;
  font-size: 1.05rem;
}
.work-care-card h3 .work-case-en {
  display: block;
  margin: 0.2rem 0 0;
  font-weight: 500;
}
.work-care-card > p {
  margin: 0 0 1rem;
  color: #44505c;
  flex: 1;
}
.work-care-card footer {
  border-top: 1px solid var(--work-line);
  padding: 0.8rem 0;
  font-size: 0.86rem;
  font-weight: 600;
}
@media (max-width: 760px) {
  .work-care-grid {
    grid-template-columns: 1fr;
  }
}

/* —— Sector grid —— */
.work-sector-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
}
.work-sector-link {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border: 1px solid var(--work-line);
  border-radius: var(--work-radius-sm);
  padding: 1rem 1.05rem;
  text-decoration: none;
  color: inherit;
  background: #fff;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.work-sector-link:hover,
.work-sector-link:focus-visible {
  border-color: #9aa7b5;
  background: #f8fafc;
}
.work-sector-link b {
  font-size: 0.98rem;
}
.work-sector-link span {
  font-size: 0.82rem;
  color: #667280;
}
@media (max-width: 980px) {
  .work-sector-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* —— Stats —— */
.work-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
  margin: 0 0 0.5rem;
}
.work-stat {
  border: 1px solid var(--work-line);
  border-radius: var(--work-radius-sm);
  padding: 0.95rem 1rem;
  background: #fff;
}
.work-stat strong {
  display: block;
  font-size: 1.35rem;
  line-height: 1.2;
  margin-bottom: 0.35rem;
}
.work-stat span {
  display: block;
  font-size: 0.82rem;
  color: #5b6775;
  line-height: 1.4;
}
@media (max-width: 900px) {
  .work-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* —— Consent strip —— */
.work-consent-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
}
.work-consent {
  border: 1px solid var(--work-line);
  border-radius: var(--work-radius-sm);
  padding: 1rem 1.05rem;
  background: #fff;
}
.work-consent b {
  display: block;
  margin-bottom: 0.35rem;
}
.work-consent p {
  margin: 0;
  color: #5b6775;
  font-size: 0.88rem;
}
@media (max-width: 900px) {
  .work-consent-row {
    grid-template-columns: 1fr;
  }
}

/* —— Quick answer —— */
.work-quick-answer {
  border: 1px solid var(--work-line);
  border-radius: var(--work-radius);
  padding: 1.15rem 1.25rem;
  background: #fff;
}
.work-quick-answer b {
  display: block;
  margin-bottom: 0.45rem;
}
.work-quick-answer p {
  margin: 0;
  color: #334155;
}

/* —— Simulator strip —— */
.work-simulator {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 1.5rem;
  align-items: center;
}
.work-simulator-copy h2 {
  margin: 0.35rem 0 0.65rem;
}
.work-simulator-schematic {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--work-radius-sm);
  padding: 1.1rem;
  background: rgba(15, 23, 42, 0.28);
}
.work-simulator-schematic svg {
  width: 100%;
  height: auto;
  display: block;
}
.work-simulator-caption {
  margin: 0.7rem 0 0;
  font-size: 0.78rem;
  opacity: 0.85;
}
@media (max-width: 900px) {
  .work-simulator {
    grid-template-columns: 1fr;
  }
}

/* Dark band sections that carry work simulator / care figures */
.section-work-simulator.art-band .work-simulator-copy,
.section-work-simulator.art-band .work-simulator-caption,
.section-care-band.art-band .band-copy,
.section-industry-construction-band.art-band .band-copy,
.section-industry-professional-band.art-band .band-copy {
  color: #fff;
}
.section-work-simulator.art-band .eyebrow,
.section-care-band.art-band .eyebrow,
.section-industry-construction-band.art-band .eyebrow,
.section-industry-professional-band.art-band .eyebrow {
  color: rgba(255, 255, 255, 0.78);
}

.section-care-hero .care-number,
.section-clients-work-hero .hero-side-note {
  border: 1px solid var(--work-line);
  border-radius: var(--work-radius);
  padding: 1.1rem 1.2rem;
  background: #fff;
}
.section-care-hero .care-number strong,
.section-clients-work-hero .hero-side-note strong {
  display: block;
  margin-bottom: 0.4rem;
}
.section-care-hero .care-number span,
.section-clients-work-hero .hero-side-note span {
  color: #5b6775;
  font-size: 0.9rem;
}

.work-pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.work-pillar {
  border: 1px solid var(--work-line);
  border-radius: var(--work-radius-sm);
  padding: 1.05rem 1.1rem;
  background: #fff;
}
.work-pillar > span {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  color: #667280;
  margin-bottom: 0.45rem;
}
.work-pillar h3 {
  margin: 0 0 0.45rem;
}
.work-pillar p {
  margin: 0;
  color: #44505c;
}
@media (max-width: 800px) {
  .work-pillar-grid {
    grid-template-columns: 1fr;
  }
}

.section-clients-logo-showcase {
  margin-top: 0.5rem;
}

/* —— Website screenshot portfolio —— */
.section-clients-screen-preview,
.section-web-portfolio-gallery {
  position: relative;
}

.portfolio-screen-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem 1.4rem;
  align-items: end;
  margin: 1.4rem 0 0.9rem;
  padding: 1rem;
  border: 1px solid var(--work-line);
  border-radius: var(--work-radius);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 34px rgba(31, 41, 55, 0.06);
}

.portfolio-screen-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.portfolio-screen-sort {
  display: grid;
  gap: 0.4rem;
  min-width: 12rem;
  color: #4d5966;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.portfolio-screen-sort select {
  min-height: 2.55rem;
  padding: 0.45rem 2.2rem 0.45rem 0.75rem;
  border: 1px solid var(--work-line);
  border-radius: 10px;
  background: #fff;
  color: #1f2937;
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
}

.portfolio-screen-sort select:focus-visible {
  outline: 2px solid #1f2937;
  outline-offset: 2px;
}

.portfolio-screen-result {
  margin: 0 0 1rem;
  color: #5b6775;
  font-size: 0.9rem;
}

.portfolio-screen-result strong {
  color: #1f2937;
}

.portfolio-screen-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 1.25rem;
}

.portfolio-screen-gallery--full .portfolio-screen-grid {
  margin-top: 0;
}

.portfolio-screen-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--work-line);
  border-radius: var(--work-radius);
  background: #fff;
  box-shadow: 0 12px 32px rgba(31, 41, 55, 0.07);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.portfolio-screen-card[hidden] {
  display: none !important;
}

.portfolio-screen-card:hover {
  transform: translateY(-3px);
  border-color: #c7d0dc;
  box-shadow: 0 18px 42px rgba(31, 41, 55, 0.12);
}

.portfolio-screen-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #e9eef4;
}

.portfolio-screen-card__desktop,
.portfolio-screen-card__mobile,
.portfolio-screen-card__variant {
  appearance: none;
  border: 0;
  font: inherit;
  cursor: zoom-in;
}

.portfolio-screen-card__desktop {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  background: #e9eef4;
  text-align: left;
}

.portfolio-screen-card__desktop > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 260ms ease;
}

.portfolio-screen-card:hover .portfolio-screen-card__desktop > img {
  transform: scale(1.018);
}

.portfolio-screen-browser {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  height: 25px;
  align-items: center;
  gap: 4px;
  padding: 0 0.55rem;
  background: rgba(21, 29, 40, 0.9);
  color: rgba(255, 255, 255, 0.76);
  backdrop-filter: blur(5px);
}

.portfolio-screen-browser i {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #fb923c;
}

.portfolio-screen-browser i:nth-child(2) {
  background: #facc15;
}

.portfolio-screen-browser i:nth-child(3) {
  background: #4ade80;
}

.portfolio-screen-browser b {
  min-width: 0;
  margin-left: 0.35rem;
  overflow: hidden;
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portfolio-screen-zoom {
  position: absolute;
  z-index: 2;
  right: 0.65rem;
  bottom: 0.65rem;
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 999px;
  background: rgba(21, 29, 40, 0.76);
  color: #fff;
  font-size: 1.05rem;
  line-height: 1;
  backdrop-filter: blur(4px);
}

.portfolio-screen-card__mobile {
  position: absolute;
  z-index: 3;
  right: 0.75rem;
  bottom: 0.75rem;
  width: clamp(52px, 22%, 82px);
  padding: 0;
  overflow: hidden;
  border: 3px solid #fff;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 9px 24px rgba(15, 23, 42, 0.28);
}

.portfolio-screen-card__mobile img {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  object-position: top center;
}

.portfolio-screen-card__media--has-mobile .portfolio-screen-zoom {
  right: calc(clamp(52px, 22%, 82px) + 1.15rem);
}

.portfolio-screen-card__variants {
  position: absolute;
  z-index: 4;
  bottom: 0.7rem;
  left: 0.7rem;
  display: flex;
  max-width: calc(100% - 7.5rem);
  flex-wrap: wrap;
  gap: 0.35rem;
}

.portfolio-screen-card__variant {
  display: inline-flex;
  width: auto;
  min-height: 1.8rem;
  align-items: center;
  justify-content: center;
  padding: 0.28rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  background: rgba(21, 29, 40, 0.82);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.2;
  backdrop-filter: blur(4px);
}

.portfolio-screen-card__desktop:focus-visible,
.portfolio-screen-card__mobile:focus-visible,
.portfolio-screen-card__variant:focus-visible {
  outline: 3px solid #f59e0b;
  outline-offset: -3px;
}

.portfolio-screen-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1rem 1.05rem 0.95rem;
}

.portfolio-screen-card__meta,
.portfolio-screen-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  color: #687583;
  font-size: 0.7rem;
}

.portfolio-screen-card__meta {
  margin-bottom: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.portfolio-screen-card__meta span {
  min-width: 0;
}

.portfolio-screen-card__meta time {
  flex: 0 0 auto;
  color: #b45309;
}

.portfolio-screen-card h3 {
  margin: 0;
  color: #1f2937;
  font-size: 1.04rem;
  line-height: 1.35;
}

.portfolio-screen-card__secondary {
  margin: 0.35rem 0 0;
  color: #687583;
  font-size: 0.78rem;
  line-height: 1.45;
}

.portfolio-screen-card__feature {
  margin: 0.65rem 0 0;
  padding-left: 0.65rem;
  border-left: 2px solid #f59e0b;
  color: #3f4a56;
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.45;
}

.portfolio-screen-card__foot {
  margin-top: auto;
  padding-top: 0.8rem;
  border-top: 1px solid #edf0f4;
}

.portfolio-screen-card__feature + .portfolio-screen-card__foot,
.portfolio-screen-card__secondary + .portfolio-screen-card__foot,
.portfolio-screen-card h3 + .portfolio-screen-card__foot {
  margin-top: 0.9rem;
}

.portfolio-screen-card__foot span:last-child {
  min-width: 0;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portfolio-screen-more {
  margin: 1.5rem 0 0;
  text-align: center;
}

.portfolio-screen-capture-note {
  margin: 1rem 0 0;
  color: #687583;
  font-size: 0.76rem;
  text-align: center;
}

.page-id-clients .site-image-modal-image,
.page-id-clients-web-platform .site-image-modal-image {
  max-height: none;
}

@media (max-width: 980px) {
  .portfolio-screen-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portfolio-screen-controls {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .portfolio-screen-sort {
    width: min(100%, 18rem);
  }
}

@media (max-width: 620px) {
  .portfolio-screen-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .portfolio-screen-filter {
    margin: 0 -0.15rem;
    padding: 0.15rem 0.15rem 0.4rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .portfolio-screen-filter .work-filter-chip {
    flex: 0 0 auto;
  }

  .portfolio-screen-sort {
    width: 100%;
  }

  .portfolio-screen-card__media {
    aspect-ratio: 16 / 10.5;
  }

  .portfolio-screen-card__mobile {
    width: 20%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-screen-card,
  .portfolio-screen-card__desktop > img {
    transition: none;
  }

  .portfolio-screen-card:hover,
  .portfolio-screen-card:hover .portfolio-screen-card__desktop > img {
    transform: none;
  }
}


/* artwork.css */
/* ==========================================================================
   artwork.css — page artwork and background system
   iGears Technology Limited · 2026-08-15
   --------------------------------------------------------------------------
   Register it in includes/head.php alongside portfolio.css / tools.css:

       asset_url('/assets/css/artwork.css') . site_asset_version_suffix()

   Without site_asset_version_suffix() this file is served stale from caches.

   This file is ADDITIVE and CSS-only. It adds no markup and changes no PHP.
   Removing the <link> reverts the site exactly. Do not edit foundation.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens — scoped to this file, never added to foundation.css :root
   -------------------------------------------------------------------------- */
:root {
  /* Band base fill. Matched to the mean border colour of the delivered
     band artwork (#030305–#07090d) so the image blends into the fill with
     no visible seam, and the band is still correct if the image never loads. */
  --art-ink:         #05070b;
  --art-ink-soft:    #10151d;   /* a card sitting inside a dark band */
  --art-on-ink:      #ffffff;   /* 18.9:1 on --art-ink */
  --art-on-ink-mut:  #b8c2d0;   /* 10.6:1 on --art-ink */
  --art-band-min:    clamp(360px, 40vh, 460px);

  /* Accessible orange for TEXT on light bands.
     --brand #f39a17 is 2.22:1 on white and --brand-dark #d88308 is 2.93:1 —
     both fail WCAG AA (4.5:1). This passes at 5.67:1 on white, 5.04:1 on cream.
     --brand stays the fill/graphic colour and the text colour on dark bands. */
  --brand-text:      #9a5600;
}

/* --------------------------------------------------------------------------
   2. Register A — full-bleed dark punctuation band
   -------------------------------------------------------------------------- */
.art-band,
main > section[class*="-cta"]:not([class*="mid-"]):not([class*="pre-cta"]):not([class*="saas-cta"]),
main > section.geo-answer-summary,
body.page-id-home main > section.section-home-ai-focus {
  position: relative;
  background-color: var(--art-ink) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: 72% center !important;
  color: var(--art-on-ink);
  /* full-bleed out of the container without touching markup */
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-block: clamp(3rem, 6vw, 5rem);
  min-height: var(--art-band-min);
  display: grid;
  align-items: center;
  overflow: hidden;
}

/* Scrim. The artwork is already near-black on the left (mean luminance
   0.0011–0.0028), so this is insurance rather than correction. */
.art-band::before,
main > section[class*="-cta"]:not([class*="mid-"]):not([class*="pre-cta"]):not([class*="saas-cta"])::before,
main > section.geo-answer-summary::before,
body.page-id-home main > section.section-home-ai-focus::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
              rgba(5, 7, 11, 0.94) 0%,
              rgba(5, 7, 11, 0.76) 42%,
              rgba(5, 7, 11, 0.08) 78%);
  pointer-events: none;
}

.art-band > *,
main > section[class*="-cta"]:not([class*="mid-"]):not([class*="pre-cta"]):not([class*="saas-cta"]) > *,
main > section.geo-answer-summary > *,
body.page-id-home main > section.section-home-ai-focus > * {
  position: relative;
  z-index: 1;
}

/* Text colours inside a band — written flat (no CSS nesting) for maximum
   browser support. Kept low-specificity so page rules can still override. */
.art-band :is(h2, h3, h4, strong) { color: var(--art-on-ink); }
main > section[class*="-cta"]:not([class*="mid-"]):not([class*="pre-cta"]):not([class*="saas-cta"]) :is(h2, h3, h4, strong) { color: var(--art-on-ink); }
main > section.geo-answer-summary :is(h2, h3, h4, strong) { color: var(--art-on-ink); }
body.page-id-home .section-home-ai-focus :is(h2, h3, h4, strong) { color: var(--art-on-ink); }
.art-band :is(p, li, dd) { color: var(--art-on-ink-mut); }
main > section[class*="-cta"]:not([class*="mid-"]):not([class*="pre-cta"]):not([class*="saas-cta"]) :is(p, li, dd) { color: var(--art-on-ink-mut); }
main > section.geo-answer-summary :is(p, li, dd) { color: var(--art-on-ink-mut); }
body.page-id-home .section-home-ai-focus :is(p, li, dd) { color: var(--art-on-ink-mut); }
.art-band :is(.eyebrow, .section-card-tag, .home-case-tag-pill-label) { color: var(--brand); }
main > section[class*="-cta"]:not([class*="mid-"]):not([class*="pre-cta"]):not([class*="saas-cta"]) :is(.eyebrow, .section-card-tag, .home-case-tag-pill-label) { color: var(--brand); }
main > section.geo-answer-summary :is(.eyebrow, .section-card-tag, .home-case-tag-pill-label) { color: var(--brand); }
body.page-id-home .section-home-ai-focus :is(.eyebrow, .section-card-tag, .home-case-tag-pill-label) { color: var(--brand); }
.art-band a:not(.btn) { color: #ffd8a1; }
main > section[class*="-cta"]:not([class*="mid-"]):not([class*="pre-cta"]):not([class*="saas-cta"]) a:not(.btn) { color: #ffd8a1; }
main > section.geo-answer-summary a:not(.btn) { color: #ffd8a1; }
body.page-id-home .section-home-ai-focus a:not(.btn) { color: #ffd8a1; }
/* Inner panels: the live site paints .card / .geo-answer-card / .service-cta
   with light fills and gradient background-images. Inside a band those panels
   go dark — background (not background-color) so any gradient is cleared. */
.art-band :is(.card, .section-card, .geo-answer-card, .service-cta) { background: var(--art-ink-soft) !important; border-color: rgba(255,255,255,.16) !important; box-shadow: none !important; }
main > section[class*="-cta"]:not([class*="mid-"]):not([class*="pre-cta"]):not([class*="saas-cta"]) :is(.card, .section-card, .geo-answer-card, .service-cta) { background: var(--art-ink-soft) !important; border-color: rgba(255,255,255,.16) !important; box-shadow: none !important; }
main > section.geo-answer-summary :is(.card, .section-card, .geo-answer-card, .service-cta) { background: var(--art-ink-soft) !important; border-color: rgba(255,255,255,.16) !important; box-shadow: none !important; }
body.page-id-home .section-home-ai-focus :is(.card, .section-card, .geo-answer-card, .service-cta) { background: var(--art-ink-soft) !important; border-color: rgba(255,255,255,.16) !important; box-shadow: none !important; }
main > section.geo-answer-summary .geo-answer-facts > div,
.art-band .geo-answer-facts > div { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.14) !important; }
.art-band :is(dt, h2, h3) { color: var(--art-on-ink) !important; }
main > section[class*="-cta"]:not([class*="mid-"]):not([class*="pre-cta"]):not([class*="saas-cta"]) :is(dt, h2, h3) { color: var(--art-on-ink) !important; }
main > section.geo-answer-summary :is(dt, h2, h3) { color: var(--art-on-ink) !important; }
body.page-id-home .section-home-ai-focus :is(dt, h2, h3) { color: var(--art-on-ink) !important; }
.art-band :is(p, li, dd) { color: var(--art-on-ink-mut) !important; }
main > section[class*="-cta"]:not([class*="mid-"]):not([class*="pre-cta"]):not([class*="saas-cta"]) :is(p, li, dd) { color: var(--art-on-ink-mut) !important; }
main > section.geo-answer-summary :is(p, li, dd) { color: var(--art-on-ink-mut) !important; }
body.page-id-home .section-home-ai-focus :is(p, li, dd) { color: var(--art-on-ink-mut) !important; }
.art-band .eyebrow { color: var(--brand) !important; }
main > section[class*="-cta"]:not([class*="mid-"]):not([class*="pre-cta"]):not([class*="saas-cta"]) .eyebrow { color: var(--brand) !important; }
main > section.geo-answer-summary .eyebrow { color: var(--brand) !important; }
body.page-id-home .section-home-ai-focus .eyebrow { color: var(--brand) !important; }

/* Buttons on a band */
.art-band .btn-primary { background: var(--brand); color: #1c2531; border-color: var(--brand); }
main > section[class*="-cta"]:not([class*="mid-"]):not([class*="pre-cta"]):not([class*="saas-cta"]) .btn-primary { background: var(--brand); color: #1c2531; border-color: var(--brand); }
main > section.geo-answer-summary .btn-primary { background: var(--brand); color: #1c2531; border-color: var(--brand); }
body.page-id-home .section-home-ai-focus .btn-primary { background: var(--brand); color: #1c2531; border-color: var(--brand); }
.art-band .btn-ghost { color: #fff; border-color: rgba(255,255,255,.45); background: transparent; }
main > section[class*="-cta"]:not([class*="mid-"]):not([class*="pre-cta"]):not([class*="saas-cta"]) .btn-ghost { color: #fff; border-color: rgba(255,255,255,.45); background: transparent; }
main > section.geo-answer-summary .btn-ghost { color: #fff; border-color: rgba(255,255,255,.45); background: transparent; }
body.page-id-home .section-home-ai-focus .btn-ghost { color: #fff; border-color: rgba(255,255,255,.45); background: transparent; }
.art-band .btn-ghost:hover { background: rgba(255,255,255,.10); color: #fff; }
main > section[class*="-cta"]:not([class*="mid-"]):not([class*="pre-cta"]):not([class*="saas-cta"]) .btn-ghost:hover { background: rgba(255,255,255,.10); color: #fff; }
main > section.geo-answer-summary .btn-ghost:hover { background: rgba(255,255,255,.10); color: #fff; }
body.page-id-home .section-home-ai-focus .btn-ghost:hover { background: rgba(255,255,255,.10); color: #fff; }

/* --------------------------------------------------------------------------
   3. Band artwork, mapped by the page-id body class
   Bands are 2400×760 / 1600×507 WebP, 15–27 KB each.
   `simulation` is deliberately unassigned — it is reserved for Case 7 and
   nothing on the live site should carry it yet.
   -------------------------------------------------------------------------- */
:root { --art-band-src: url("../img/bands/band-default-2400.webp"); }

.art-band,
main > section[class*="-cta"]:not([class*="mid-"]):not([class*="pre-cta"]):not([class*="saas-cta"]),
main > section.geo-answer-summary,
body.page-id-home main > section.section-home-ai-focus {
  background-image: var(--art-band-src) !important;
}

body.page-id-service-ai-knowledge-assistant,
body.page-id-service-ai-document-processing,
body.page-id-service-ai-hub,
body.page-id-service-private-ai-agent,
body.page-id-service-workflow-automation,
body.page-id-clients-ai-digital-workflow {
  --art-band-src: url("../img/bands/band-ai-workflow-2400.webp");
}

body.page-id-service-system-development,
body.page-id-clients-system-development,
body.page-solution-pattern {
  --art-band-src: url("../img/bands/band-system-development-2400.webp");
}

body.page-id-service-web-platform,
body.page-id-service-digital-operations,
body.page-id-clients-web-platform {
  --art-band-src: url("../img/bands/band-ecommerce-2400.webp");
}

body.page-id-service-cybersecurity-risk-assurance,
body.page-id-industry-listed-corporate,
body.page-id-industry-construction-engineering {
  --art-band-src: url("../img/bands/band-engineering-2400.webp");
}

body.page-id-care {
  --art-band-src: url("../img/bands/band-default-2400.webp");
}

body.page-id-products-hub,
body.page-tools,
body.page-id-service-voicebot-speech-analytics {
  --art-band-src: url("../img/bands/band-mobile-2400.webp");
}

body.page-id-clients,
body.page-id-industries,
body.page-id-industry-professional-services {
  --art-band-src: url("../img/bands/band-clients-2400.webp");
}

body.page-id-industry-education { --art-band-src: url("../img/bands/band-education-2400.webp"); }

body.page-id-industry-ngo,
body.page-id-industry-church { --art-band-src: url("../img/bands/band-nonprofit-2400.webp"); }

/* Homepage simulator strip uses engineering band (not repeating AI-focus motif). */
body.page-id-home main > section.section-work-simulator,
body.page-id-clients main > section.section-work-simulator {
  background-image: url("../img/bands/band-engineering-2400.webp") !important;
}


/* The near-top answer band and the closing CTA band appear on the same page,
   so the answer band draws from a second image — the two dark landmarks on a
   page never repeat the same motif. */
:root { --art-band-alt: url("../img/bands/band-default-2400.webp"); }
body.page-id-industry-medical,
body.page-id-services { --art-band-alt: url("../img/bands/band-clients-2400.webp"); }
main > section.geo-answer-summary { background-image: var(--art-band-alt) !important; }

@media (max-width: 1400px) {
  :root { --art-band-alt: url("../img/bands/band-default-1600.webp"); }
  body.page-id-industry-medical,
  body.page-id-services { --art-band-alt: url("../img/bands/band-clients-1600.webp"); }
}

/* Narrow desktop / tablet: serve the 1600 px derivative */
@media (max-width: 1400px) {
  :root { --art-band-src: url("../img/bands/band-default-1600.webp"); }
  body.page-id-service-ai-knowledge-assistant,
  body.page-id-service-ai-document-processing,
  body.page-id-service-ai-hub,
  body.page-id-service-private-ai-agent,
  body.page-id-service-workflow-automation,
  body.page-id-clients-ai-digital-workflow { --art-band-src: url("../img/bands/band-ai-workflow-1600.webp"); }
  body.page-id-service-system-development,
  body.page-id-clients-system-development,
  body.page-solution-pattern { --art-band-src: url("../img/bands/band-system-development-1600.webp"); }
  body.page-id-service-web-platform,
  body.page-id-service-digital-operations,
  body.page-id-clients-web-platform { --art-band-src: url("../img/bands/band-ecommerce-1600.webp"); }
  body.page-id-service-cybersecurity-risk-assurance,
  body.page-id-industry-listed-corporate { --art-band-src: url("../img/bands/band-engineering-1600.webp"); }
  body.page-id-products-hub,
  body.page-tools,
  body.page-id-service-voicebot-speech-analytics { --art-band-src: url("../img/bands/band-mobile-1600.webp"); }
  body.page-id-clients,
  body.page-id-industries { --art-band-src: url("../img/bands/band-clients-1600.webp"); }
  body.page-id-industry-education { --art-band-src: url("../img/bands/band-education-1600.webp"); }
  body.page-id-industry-ngo,
  body.page-id-industry-church { --art-band-src: url("../img/bands/band-nonprofit-1600.webp"); }
  body.page-id-home main > section.section-home-ai-focus {
    background-image: url("../img/bands/band-ai-workflow-1600.webp") !important;
  }
}

/* Mobile: drop the artwork request entirely. The gradient keeps the rhythm —
   a dark landmark between light sections — at zero bytes. */
@media (max-width: 720px) {
  .art-band,
  main > section[class*="-cta"]:not([class*="mid-"]):not([class*="pre-cta"]):not([class*="saas-cta"]),
  body.page-id-home main > section.section-home-ai-focus {
    background-image: linear-gradient(158deg, #05070b 0%, #141b26 58%, #2a1c08 100%) !important;
    min-height: 0;
    padding-block: 2.75rem;
  }
}

@media print {
  .art-band,
  main > section[class*="-cta"]:not([class*="mid-"]):not([class*="pre-cta"]):not([class*="saas-cta"]),
  body.page-id-home main > section.section-home-ai-focus {
    background: none !important;
    color: var(--text) !important;
    width: auto; margin-inline: 0;
  }
  .art-band h2, .art-band p,
  main > section[class*="-cta"]:not([class*="mid-"]):not([class*="pre-cta"]):not([class*="saas-cta"]) h2, main > section[class*="-cta"]:not([class*="mid-"]):not([class*="pre-cta"]):not([class*="saas-cta"]) p { color: var(--text) !important; }
}

/* --------------------------------------------------------------------------
   4. Register B — light field texture, zero HTTP requests
   Differentiates adjacent light sections that would otherwise both read as
   flat #f5f1eb. Contrast against the band fill stays under 1.2:1 — it is
   texture, not pattern.
   -------------------------------------------------------------------------- */
main > section.section-alt:not([class*="-cta"]) {
  background-image:
    radial-gradient(ellipse 74% 62% at 50% 46%, rgba(245,241,235,0.94) 0%, rgba(245,241,235,0) 72%),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><g fill="none" stroke="rgb(28,37,49)" stroke-opacity="0.055" stroke-width="1"><path d="M0 32h64M32 0v64"/></g><circle cx="32" cy="32" r="1.5" fill="rgb(243,154,23)" fill-opacity="0.13"/></svg>');
  background-size: auto, 64px 64px;
  background-position: center, center;
}

/* Every second alt band uses the dot field instead, so two alt sections never
   look identical when they end up adjacent. */
main > section.section-alt:not([class*="-cta"]):nth-of-type(even) {
  background-image:
    radial-gradient(ellipse 74% 62% at 50% 46%, rgba(245,241,235,0.94) 0%, rgba(245,241,235,0) 72%),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><circle cx="12" cy="12" r="1.4" fill="rgb(28,37,49)" fill-opacity="0.075"/><circle cx="36" cy="36" r="1.4" fill="rgb(243,154,23)" fill-opacity="0.15"/></svg>');
  background-size: auto, 48px 48px;
}

/* --------------------------------------------------------------------------
   5. Contrast repair on light bands
   Measured on the live 繁中 homepage: --brand-dark #d88308 renders at 2.88:1
   on #fffdf8 and 2.60:1 on #f5f1eb. Both fail WCAG AA for body text.
   These selectors were taken from the rendered page, not guessed. Verify the
   list against the repo and extend it — see the Cursor prompt, STEP 4.
   -------------------------------------------------------------------------- */
main .eyebrow,
main a.sector-link,
main a.related-page-link,
main a.insight-card-read-link,
main a.btn-ghost,
main .section-card-tag,
main .home-case-tag-pill-label {
  color: var(--brand-text);
}

/* …but not when they sit on a dark band, where --brand is already 8.4:1. */
.art-band :is(.eyebrow, .section-card-tag, .home-case-tag-pill-label) { color: var(--brand); }
main > section[class*="-cta"]:not([class*="mid-"]):not([class*="pre-cta"]):not([class*="saas-cta"]) :is(.eyebrow, .section-card-tag, .home-case-tag-pill-label) { color: var(--brand); }
body.page-id-home .section-home-ai-focus :is(.eyebrow, .section-card-tag, .home-case-tag-pill-label) { color: var(--brand); }
.art-band :is(a.sector-link, a.related-page-link, a.insight-card-read-link) { color: #ffd8a1; }
main > section[class*="-cta"]:not([class*="mid-"]):not([class*="pre-cta"]):not([class*="saas-cta"]) :is(a.sector-link, a.related-page-link, a.insight-card-read-link) { color: #ffd8a1; }
body.page-id-home .section-home-ai-focus :is(a.sector-link, a.related-page-link, a.insight-card-read-link) { color: #ffd8a1; }

/* 148,163,184 on #fffdf8 is 2.52:1 at 10.88px — the least legible text on the
   site. Darkened to 4.6:1 without changing the visual hierarchy. */
main .case-detail-label { color: #5e6774; }

/* --------------------------------------------------------------------------
   6. Motion, forced colours, layout stability
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .art-band, main > section[class*="-cta"]:not([class*="mid-"]):not([class*="pre-cta"]):not([class*="saas-cta"]) { background-attachment: scroll; }
}

@media (forced-colors: active) {
  .art-band, main > section[class*="-cta"]:not([class*="mid-"]):not([class*="pre-cta"]):not([class*="saas-cta"]),
  body.page-id-home main > section.section-home-ai-focus {
    background-image: none !important;
    forced-color-adjust: none;
  }
}


/* work-visual-refresh.css */
/* Homepage delivery-pattern and simulator visual refresh (2026-08-27). */

.work-case-visual--delivery {
  --work-visual-accent: #e87f12;
  --work-visual-accent-soft: rgba(232, 127, 18, 0.12);
  min-height: 176px;
  padding: 0.9rem 1rem 0.85rem;
  align-items: stretch;
  justify-content: space-between;
  gap: 0.75rem;
  overflow: hidden;
  isolation: isolate;
  color: #172033;
  background:
    radial-gradient(circle at 90% 0%, var(--work-visual-accent-soft), transparent 42%),
    linear-gradient(145deg, #f8fafc 0%, #eef3f7 100%);
}

.work-case-visual--delivery::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto -2.5rem -4.6rem auto;
  width: 9rem;
  aspect-ratio: 1;
  border: 1px solid var(--work-visual-accent-soft);
  border-radius: 50%;
  box-shadow:
    0 0 0 1.35rem color-mix(in srgb, var(--work-visual-accent) 5%, transparent),
    0 0 0 2.7rem color-mix(in srgb, var(--work-visual-accent) 3%, transparent);
}

.work-case-visual--cms-care {
  --work-visual-accent: #0f7893;
  --work-visual-accent-soft: rgba(15, 120, 147, 0.13);
}

.work-case-visual--web-app-hosting {
  --work-visual-accent: #d86f10;
  --work-visual-accent-soft: rgba(216, 111, 16, 0.13);
}

.work-case-visual--monthly-operations {
  --work-visual-accent: #4d6d56;
  --work-visual-accent-soft: rgba(77, 109, 86, 0.13);
}

.work-case-visual--specialist-equipment {
  --work-visual-accent: #435b87;
  --work-visual-accent-soft: rgba(67, 91, 135, 0.13);
}

.work-visual-meta,
.work-visual-proof {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
}

.work-visual-meta > span:first-child,
.work-visual-proof > span {
  color: #536071;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.work-visual-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #334155;
  font-size: 0.68rem;
  font-weight: 750;
  white-space: nowrap;
}

.work-visual-status i {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--work-visual-accent);
  box-shadow: 0 0 0 0.22rem var(--work-visual-accent-soft);
}

.work-delivery-map {
  display: flex;
  align-items: stretch;
  gap: 0.35rem;
}

.work-delivery-stage {
  flex: 1 1 0;
  min-width: 0;
  min-height: 66px;
  padding: 0.55rem 0.48rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.28rem;
  border: 1px solid rgba(102, 116, 135, 0.19);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 7px 18px rgba(28, 39, 57, 0.055);
}

.work-delivery-stage small {
  color: var(--work-visual-accent);
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.work-delivery-stage b {
  color: #202b3d;
  font-size: 0.72rem;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.work-delivery-arrow {
  flex: 0 0 0.72rem;
  align-self: center;
  height: 1px;
  position: relative;
  background: color-mix(in srgb, var(--work-visual-accent) 48%, #aab3be);
}

.work-delivery-arrow::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -3px;
  width: 5px;
  height: 5px;
  border-top: 1px solid var(--work-visual-accent);
  border-right: 1px solid var(--work-visual-accent);
  transform: rotate(45deg);
}

.work-visual-proof {
  min-height: 1.4rem;
  padding-top: 0.58rem;
  border-top: 1px solid rgba(102, 116, 135, 0.18);
}

.work-visual-proof strong {
  color: var(--work-visual-accent);
  font-size: 0.76rem;
  text-align: right;
}

.section-home-proof-patterns .work-case-card {
  border-color: rgba(120, 130, 145, 0.22);
  box-shadow: 0 14px 35px rgba(39, 32, 23, 0.055);
}

/* Conceptual simulator scene: factual labels remain live, localized HTML. */
body.page-id-home main > section.section-work-simulator {
  background-color: #03070c !important;
  background-image:
    linear-gradient(90deg, rgba(3, 7, 12, 0.99) 0%, rgba(3, 7, 12, 0.95) 35%, rgba(3, 7, 12, 0.75) 62%, rgba(3, 7, 12, 0.48) 100%),
    url("/assets/img/editorial/driving-simulator-rehab-v1.webp") !important;
  background-position: center, center 55% !important;
  background-size: cover, cover !important;
  background-repeat: no-repeat !important;
}

body.page-id-home main > section.section-work-simulator .work-simulator {
  grid-template-columns: minmax(0, 0.86fr) minmax(31rem, 1.14fr);
  gap: clamp(1.8rem, 4vw, 4rem);
  min-height: 340px;
}

.section-work-simulator .work-simulator-copy {
  position: relative;
  z-index: 1;
}

.section-work-simulator .work-simulator-copy p:last-child {
  max-width: 42rem;
  color: rgba(242, 246, 250, 0.83);
  line-height: 1.75;
}

.work-simulator-schematic {
  margin: 0;
  padding: 0.85rem;
  border-color: rgba(255, 255, 255, 0.17);
  background: rgba(4, 11, 20, 0.74);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.work-simulator-scope {
  display: grid;
  gap: 0.8rem;
}

.work-simulator-panel-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: #f4f7fb;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.work-simulator-panel-head i {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(242, 145, 28, 0.76), rgba(255, 255, 255, 0.08));
}

.work-simulator-stage-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.work-simulator-stage-grid li {
  min-width: 0;
  min-height: 86px;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.7rem;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.035));
}

.work-simulator-stage-grid li:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 50%;
  right: -0.48rem;
  width: 0.5rem;
  height: 0.5rem;
  border-top: 1px solid rgba(245, 156, 48, 0.9);
  border-right: 1px solid rgba(245, 156, 48, 0.9);
  transform: translateY(-50%) rotate(45deg);
}

.work-simulator-stage-grid span {
  color: #f3a33f;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.work-simulator-stage-grid strong {
  color: #fff;
  font-size: 0.92rem;
  line-height: 1.25;
}

.work-simulator-context {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.8rem;
  border: 1px solid rgba(243, 163, 63, 0.25);
  border-radius: 10px;
  background: rgba(235, 133, 18, 0.075);
}

.work-simulator-context-label {
  color: #f3a33f;
  font-size: 0.7rem;
  font-weight: 800;
  white-space: nowrap;
}

.work-simulator-context-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
}

.work-simulator-context-pills b {
  padding: 0.32rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: #f7f9fc;
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.72rem;
  line-height: 1.2;
}

.work-simulator-context small {
  color: rgba(235, 241, 247, 0.67);
  font-size: 0.68rem;
  text-align: right;
}

@media (max-width: 1050px) {
  body.page-id-home main > section.section-work-simulator .work-simulator {
    grid-template-columns: minmax(0, 0.78fr) minmax(27rem, 1.22fr);
    gap: 1.5rem;
  }

  .work-simulator-context {
    grid-template-columns: auto 1fr;
  }

  .work-simulator-context small {
    grid-column: 1 / -1;
    text-align: left;
  }
}

@media (max-width: 900px) {
  body.page-id-home main > section.section-work-simulator .work-simulator {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  body.page-id-home main > section.section-work-simulator {
    background-position: center, 64% center !important;
  }

  .work-simulator-schematic {
    max-width: 44rem;
  }
}

@media (max-width: 720px) {
  body.page-id-home main > section.section-work-simulator {
    background-image:
      radial-gradient(circle at 92% 10%, rgba(35, 72, 103, 0.28), transparent 45%),
      linear-gradient(145deg, #03070c 0%, #09111c 100%) !important;
    background-position: center !important;
  }

  .work-case-visual--delivery {
    min-height: 168px;
  }

  .work-simulator-stage-grid {
    grid-template-columns: 1fr;
  }

  .work-simulator-stage-grid li {
    min-height: 0;
    display: grid;
    grid-template-columns: 2rem 1fr;
    align-items: center;
    gap: 0.55rem;
  }

  .work-simulator-stage-grid li:not(:last-child)::after {
    top: auto;
    right: auto;
    bottom: -0.48rem;
    left: 50%;
    transform: translateX(-50%) rotate(135deg);
  }

  .work-simulator-context {
    grid-template-columns: 1fr;
  }

  .work-simulator-context small {
    grid-column: auto;
  }
}

@media (max-width: 420px) {
  .work-case-visual--delivery {
    padding-inline: 0.8rem;
  }

  .work-delivery-map {
    gap: 0.25rem;
  }

  .work-delivery-arrow {
    flex-basis: 0.48rem;
  }

  .work-delivery-stage {
    padding-inline: 0.38rem;
  }
}

/* Homepage-only hierarchy pass. The artwork is decorative; all labels remain live HTML. */
.section-home-proof-patterns .work-case-visual--delivery {
  --work-visual-art-position: 50% 52%;
  min-height: 224px;
  padding: 1.05rem;
  gap: 0.95rem;
  border-top: 3px solid var(--work-visual-accent);
  background:
    linear-gradient(145deg, rgba(248, 250, 252, 0.95) 0%, rgba(241, 246, 248, 0.9) 54%, rgba(250, 246, 238, 0.78) 100%),
    url("/assets/img/editorial/workflow-system-map-v1.webp");
  background-repeat: no-repeat;
  background-position: center, var(--work-visual-art-position);
  background-size: cover, 235% auto;
}

.section-home-proof-patterns .work-case-visual--cms-care {
  --work-visual-art-position: 8% 52%;
}

.section-home-proof-patterns .work-case-visual--web-app-hosting {
  --work-visual-art-position: 50% 52%;
}

.section-home-proof-patterns .work-case-visual--monthly-operations {
  --work-visual-art-position: 92% 52%;
}

.section-home-proof-patterns .work-visual-meta {
  min-height: 1.9rem;
}

.section-home-proof-patterns .work-visual-meta > span:first-child,
.section-home-proof-patterns .work-visual-status {
  padding: 0.3rem 0.5rem;
  border: 1px solid rgba(84, 98, 116, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 5px 14px rgba(31, 41, 55, 0.06);
}

.section-home-proof-patterns .work-delivery-map {
  gap: 0.48rem;
}

.section-home-proof-patterns .work-delivery-stage {
  min-height: 88px;
  padding: 0.68rem 0.58rem;
  border-color: color-mix(in srgb, var(--work-visual-accent) 25%, #cbd5df);
  border-top: 3px solid var(--work-visual-accent);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 24px rgba(28, 39, 57, 0.08);
}

.section-home-proof-patterns .work-delivery-stage small {
  align-self: flex-start;
  padding: 0.14rem 0.34rem;
  border-radius: 999px;
  background: var(--work-visual-accent-soft);
  font-size: 0.65rem;
}

.section-home-proof-patterns .work-delivery-stage b {
  font-size: 0.8rem;
  line-height: 1.25;
}

.section-home-proof-patterns .work-delivery-arrow {
  flex-basis: 0.9rem;
  height: 2px;
}

.section-home-proof-patterns .work-visual-proof {
  padding-top: 0.72rem;
}

.section-home-proof-patterns .work-visual-proof strong {
  max-width: 65%;
  padding: 0.24rem 0.45rem;
  border-radius: 8px;
  background: var(--work-visual-accent-soft);
  font-size: 0.8rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

body.page-id-home main > section.section-work-simulator {
  min-height: 0;
  color: #172033;
  background-color: #f4efe7 !important;
  background-image:
    radial-gradient(circle at 92% 8%, rgba(243, 154, 23, 0.15), transparent 36%),
    linear-gradient(145deg, #fbf8f2 0%, #f0ede6 100%) !important;
}

body.page-id-home main > section.section-work-simulator::before {
  background:
    radial-gradient(circle at 7% 86%, rgba(15, 120, 147, 0.08), transparent 36%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.52), transparent 62%);
}

body.page-id-home main > section.section-work-simulator .work-simulator--home {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem) clamp(2rem, 5vw, 4.75rem);
  min-height: 0;
  align-items: stretch;
}

body.page-id-home main > section.section-work-simulator .work-simulator--home > * {
  min-width: 0;
}

body.page-id-home main > section.section-work-simulator .work-simulator-copy {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  padding: 0.45rem 0.15rem 0 1rem;
  border-left: 3px solid rgba(216, 111, 16, 0.55);
  color: #172033;
}

body.page-id-home main > section.section-work-simulator .work-simulator-copy h2 {
  color: #172033 !important;
}

body.page-id-home main > section.section-work-simulator .work-simulator-copy .eyebrow {
  color: #8a4b00 !important;
}

body.page-id-home main > section.section-work-simulator .work-simulator-copy p:last-child {
  max-width: 38rem;
  color: #465468 !important;
  line-height: 1.72;
}

body.page-id-home main > section.section-work-simulator .work-simulator-schematic {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  padding: 1rem;
  border-color: rgba(78, 91, 109, 0.2);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 18px 42px rgba(57, 43, 25, 0.11);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body.page-id-home main > section.section-work-simulator .work-simulator-panel-head {
  color: #344256;
}

body.page-id-home main > section.section-work-simulator .work-simulator-panel-head i {
  background: linear-gradient(90deg, rgba(196, 102, 7, 0.72), rgba(78, 91, 109, 0.12));
}

body.page-id-home main > section.section-work-simulator .work-simulator-stage-grid {
  gap: 0.75rem;
}

body.page-id-home main > section.section-work-simulator .work-simulator-stage-grid li {
  min-height: 94px;
  padding: 0.78rem;
  border-color: rgba(78, 91, 109, 0.2);
  background: linear-gradient(145deg, #fff, #f7f4ee);
  box-shadow: 0 8px 20px rgba(57, 43, 25, 0.075);
}

body.page-id-home main > section.section-work-simulator .work-simulator-stage-grid span {
  color: #8a4b00;
}

body.page-id-home main > section.section-work-simulator .work-simulator-stage-grid strong {
  color: #172033 !important;
  overflow-wrap: anywhere;
}

body.page-id-home main > section.section-work-simulator .work-simulator-context {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.65rem 0.8rem;
  padding: 0.8rem;
  border-color: rgba(196, 102, 7, 0.24);
  background: rgba(243, 154, 23, 0.08);
}

body.page-id-home main > section.section-work-simulator .work-simulator-context-label {
  color: #8a4b00;
}

body.page-id-home main > section.section-work-simulator .work-simulator-context-pills {
  min-width: 0;
}

body.page-id-home main > section.section-work-simulator .work-simulator-context-pills b {
  color: #253247;
  border-color: rgba(78, 91, 109, 0.2);
  background: rgba(255, 255, 255, 0.82);
  overflow-wrap: anywhere;
}

body.page-id-home main > section.section-work-simulator .work-simulator-context small {
  grid-column: 1 / -1;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(78, 91, 109, 0.14);
  color: #5b6879;
  text-align: left;
}

body.page-id-home main > section.section-work-simulator .work-simulator-media {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-height: clamp(25rem, 34vw, 31rem);
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(32, 43, 58, 0.2);
  border-radius: 24px;
  background: #08111d;
  box-shadow: 0 24px 54px rgba(32, 24, 15, 0.2);
}

body.page-id-home main > section.section-work-simulator .work-simulator-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
}

@media (max-width: 1050px) {
  body.page-id-home main > section.section-work-simulator .work-simulator--home {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.2rem 2.2rem;
  }

  body.page-id-home main > section.section-work-simulator .work-simulator-media {
    min-height: 24rem;
  }
}

@media (max-width: 900px) {
  body.page-id-home main > section.section-work-simulator .work-simulator--home {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    gap: 1.25rem;
  }

  body.page-id-home main > section.section-work-simulator .work-simulator-copy {
    grid-column: 1;
    grid-row: 1;
  }

  body.page-id-home main > section.section-work-simulator .work-simulator-schematic {
    grid-column: 1;
    grid-row: 2;
    max-width: none;
  }

  body.page-id-home main > section.section-work-simulator .work-simulator-media {
    grid-column: 1;
    grid-row: 3;
    min-height: 0;
    aspect-ratio: 3 / 2;
  }
}

@media (max-width: 720px) {
  .section-home-proof-patterns .work-case-visual--delivery {
    min-height: 210px;
    padding: 0.9rem;
    gap: 0.78rem;
    background-size: cover, 260% auto;
  }

  .section-home-proof-patterns .work-delivery-stage {
    min-height: 82px;
    padding: 0.58rem 0.48rem;
  }

  body.page-id-home main > section.section-work-simulator .work-simulator-copy {
    padding: 0.35rem 0 0 0.8rem;
  }

  body.page-id-home main > section.section-work-simulator .work-simulator-schematic {
    padding: 0.85rem;
  }

  body.page-id-home main > section.section-work-simulator .work-simulator-stage-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.page-id-home main > section.section-work-simulator .work-simulator-stage-grid li {
    min-height: 0;
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    align-items: center;
    gap: 0.55rem;
  }

  body.page-id-home main > section.section-work-simulator .work-simulator-context {
    grid-template-columns: minmax(0, 1fr);
  }

  body.page-id-home main > section.section-work-simulator .work-simulator-context small {
    grid-column: auto;
  }

  body.page-id-home main > section.section-work-simulator .work-simulator-media {
    border-radius: 16px;
  }
}

@media (max-width: 420px) {
  .section-home-proof-patterns .work-case-visual--delivery {
    min-height: 200px;
    padding-inline: 0.72rem;
  }

  .section-home-proof-patterns .work-delivery-map {
    gap: 0.25rem;
  }

  .section-home-proof-patterns .work-delivery-arrow {
    flex-basis: 0.48rem;
  }

  .section-home-proof-patterns .work-delivery-stage {
    padding-inline: 0.38rem;
  }

  .section-home-proof-patterns .work-delivery-stage b {
    font-size: 0.74rem;
  }
}


/* layout-repairs.css */
/* Shared responsive layout repairs. Loaded after page and feature styles. */

/* Partners cards already render an SVG icon; suppress the duplicate empty tile. */
.page-id-service-partners .section-card:has(> .section-card-icon-wrap)::before {
  content: none;
  display: none;
}

/* Direct children of main already span the page. Avoid 100vw scrollbar-gutter overflow. */
.art-band,
main > section[class*="-cta"]:not([class*="mid-"]):not([class*="pre-cta"]):not([class*="saas-cta"]),
main > section.geo-answer-summary,
body.page-id-home main > section.section-home-ai-focus {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
}

/* Keep every locale's desktop header usable at the narrow end of its breakpoint. */
@media (min-width: 980px) and (max-width: 1100px) {
  .site-head .container {
    width: min(1200px, 96%);
  }

  .site-head .site-head-row,
  .site-head .site-header-bar,
  .site-head .site-header-end,
  .site-head .lang-switch {
    gap: 8px;
  }

  .site-head .brand {
    margin-right: 0;
  }

  .site-head .brand img {
    width: 108px;
  }

  .site-head .lang-switch__icon {
    display: none;
  }

  .site-head .lang-switch__link,
  .site-head .lang-switch__current {
    min-width: 2.1rem;
    min-height: 34px;
    padding: 6px 8px;
  }

  .site-head .site-nav,
  .site-head .nav-list {
    gap: 3px;
  }

  .site-head .nav-trigger,
  .site-head .nav-link {
    padding-right: 7px;
    padding-left: 7px;
    font-size: .78rem;
  }

  .site-head .nav-cta {
    margin-left: 2px;
    padding: .52rem .7rem;
    font-size: .78rem;
  }
}

/* The five AI offer cards need real tablet and phone layouts, not 12 tiny columns. */
@media (max-width: 900px) {
  .page-id-service-ai-hub .ai-hub-solution-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-id-service-ai-hub .ai-hub-solution-grid > .section-card {
    grid-column: auto;
    min-width: 0;
  }

  .page-id-service-ai-hub .ai-hub-solution-grid > .section-card:nth-child(4) {
    grid-column: auto;
  }

  .page-id-service-ai-hub .ai-hub-solution-grid > .section-card:nth-child(5) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 10px);
  }
}

@media (max-width: 639px) {
  .page-id-service-ai-hub .ai-hub-solution-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .page-id-service-ai-hub .ai-hub-solution-grid > .section-card,
  .page-id-service-ai-hub .ai-hub-solution-grid > .section-card:nth-child(4),
  .page-id-service-ai-hub .ai-hub-solution-grid > .section-card:nth-child(5) {
    grid-column: 1;
    justify-self: stretch;
    width: auto;
    padding: 22px 20px;
  }
}

/* Generic comparison tables become labelled cards on phones. */
@media (max-width: 719px) {
  .table-wrap--mobile-stack:not(.table-wrap--industries) {
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
  }

  .table-wrap--mobile-stack > .comparison-table--mobile-stack:not(.comparison-table--industries) {
    display: block;
    width: 100%;
    min-width: 0;
    border-collapse: separate;
  }

  .comparison-table--mobile-stack:not(.comparison-table--industries) thead {
    position: absolute;
    display: block;
    width: 1px;
    max-width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .comparison-table--mobile-stack:not(.comparison-table--industries) thead tr,
  .comparison-table--mobile-stack:not(.comparison-table--industries) thead th {
    display: block;
    width: 1px;
    min-width: 0;
    max-width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    border: 0;
  }

  .comparison-table--mobile-stack:not(.comparison-table--industries) tbody {
    display: grid;
    gap: 12px;
  }

  .comparison-table--mobile-stack:not(.comparison-table--industries) tbody tr {
    display: block;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: none;
  }

  .comparison-table--mobile-stack:not(.comparison-table--industries) tbody td {
    display: grid;
    grid-template-columns: minmax(7rem, 34%) minmax(0, 1fr);
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border: 0;
    overflow-wrap: anywhere;
  }

  .comparison-table--mobile-stack:not(.comparison-table--industries) tbody td + td {
    border-top: 1px solid rgba(221, 227, 236, .95);
  }

  .comparison-table--mobile-stack:not(.comparison-table--industries) tbody td::before {
    content: attr(data-label);
    color: #526071;
    font-size: .76rem;
    font-weight: 800;
    line-height: 1.45;
  }
}

@media (max-width: 420px) {
  .comparison-table--mobile-stack:not(.comparison-table--industries) tbody td {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
}

/* The floating contact action should not cover tablet and phone content. */
@media (max-width: 1120px) {
  .site-whatsapp-fab {
    right: max(.85rem, env(safe-area-inset-right));
    bottom: max(.85rem, env(safe-area-inset-bottom));
    gap: 0;
    width: 54px;
    min-height: 54px;
    padding: 4px;
  }

  .site-whatsapp-fab-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .site-whatsapp-fab-icon {
    flex-basis: 42px;
    width: 42px;
    height: 42px;
  }
}

@media (max-width: 640px) {
  .site-whatsapp-fab {
    width: 50px;
    min-height: 50px;
  }

  .site-whatsapp-fab-icon {
    flex-basis: 38px;
    width: 38px;
    height: 38px;
  }
}

/* Match the footer grid to the accordion's mobile breakpoint. */
@media (max-width: 979px) {
  .footer-grid-5,
  .footer-grid-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .footer-grid-5,
  .footer-grid-6 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Mobile answer bands use the compact gradient just like the other dark bands. */
@media (max-width: 720px) {
  .page-id-services .section-card-grid > .section-card::after {
    right: 0;
  }

  main > section.geo-answer-summary {
    min-height: 0;
    padding-block: 2.75rem;
    background-image: linear-gradient(158deg, #05070b 0%, #141b26 58%, #2a1c08 100%) !important;
  }
}

/* Balance the homepage hero image with the copy column on desktop. */
@media (min-width: 980px) {
  .page-id-home .hero-visual.hero-visual--ai-economics-home {
    align-self: stretch;
  }

  .page-id-home .hero-visual.hero-visual--ai-economics-home .hero-visual-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
  }

  .page-id-home .hero-visual.hero-visual--ai-economics-home img {
    object-position: 60% 40%;
  }
}

/* Keep the footer product shortlist compact, labelled, and responsive. */
.footer-platform-groups {
  display: grid;
  gap: 24px;
  padding-top: 10px;
}

.footer-platform-group {
  min-width: 0;
}

.footer-platform-group-title {
  margin: 0 0 10px;
  color: rgba(232, 226, 213, .68) !important;
  font-family: inherit !important;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em !important;
  line-height: 1.4;
  text-transform: uppercase;
}

.footer-platform-grid {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-platform-grid > li {
  min-width: 0;
  margin: 0;
}

.footer-platform-link {
  position: relative;
  display: block;
  min-height: 64px;
  padding: 11px 38px 11px 13px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px;
  background: rgba(255, 255, 255, .035);
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.footer-platform-link:hover {
  border-color: rgba(204, 122, 86, .48);
  background: rgba(255, 255, 255, .07);
  transform: translateY(-1px);
}

.footer-platform-name,
.footer-platform-description {
  display: block;
  overflow-wrap: anywhere;
}

.footer-platform-name {
  color: #f1ecdf;
  font-size: .9rem;
  font-weight: 750;
  line-height: 1.35;
}

.footer-platform-description {
  margin-top: 3px;
  color: rgba(232, 226, 213, .58);
  font-size: .75rem;
  line-height: 1.35;
}

.footer-platform-arrow {
  position: absolute;
  top: 50%;
  right: 13px;
  color: rgba(245, 201, 175, .8);
  font-size: .9rem;
  transform: translateY(-50%);
}

.footer-platform-catalogue {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  margin-top: 12px;
  font-size: .82rem;
  font-weight: 750;
  text-decoration: none;
}

@media (min-width: 980px) {
  .footer-platform-groups {
    grid-template-columns: minmax(0, 3fr) minmax(220px, 1fr);
    gap: 28px;
  }

  .footer-platform-grid--products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .footer-platform-grid--brands {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 640px) and (max-width: 979px) {
  .footer-platform-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 639px) {
  .footer-platform-groups {
    gap: 22px;
  }

  .footer-platform-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer-platform-link {
    min-height: 60px;
  }
}
/* Text-only cards opt out of the generic decorative icon and corner glow. */
.section-card.section-card--no-decor::before,
.section-card.section-card--no-decor::after {
  display: none !important;
  content: none !important;
}

/* Five deployment choices use the existing card grid on both home and service pages. */
.page-id-service-ai-deployment-options .section-ai-deployment-options .section-card::before,
.page-id-home .section-ai-deployment-options .section-card::before { content: none; display: none; }
.page-id-service-ai-deployment-options .section-ai-deployment-options .section-note,
.page-id-home .section-ai-deployment-options .section-note { max-width: 75ch; }
.page-ai-adoption .section-copilot-pricing .section-card::before { content: none; display: none; }

/* Navigation cards must fill their grid cells, not inherit article prose sizing. */
body.site-hk-zh.page-id-insights .related-pages--insights-next .insights-related-next-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.site-hk-zh.page-id-insights .related-pages--insights-next .related-page-card {
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0;
}

@media (max-width: 979px) {
  body.site-hk-zh.page-id-insights .related-pages--insights-next .insights-related-next-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 599px) {
  body.site-hk-zh.page-id-insights .related-pages--insights-next .insights-related-next-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* footer-platforms.css */
/* Keep the platform directory aligned across the Hong Kong language sites. */
body:is(.site-hk-zh, .site-hk-en, .site-hk-cn) .footer-platform-section .footer-links.footer-region-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px 24px;
  margin: 0;
  padding: 8px 0 0;
  list-style: none;
  text-align: left;
}

body:is(.site-hk-zh, .site-hk-en, .site-hk-cn) .footer-platform-section .footer-links.footer-region-list > li {
  min-width: 0;
  margin: 0;
}

body:is(.site-hk-zh, .site-hk-en, .site-hk-cn) .footer-platform-section .footer-links.footer-region-list > li > a {
  display: flex;
  align-items: center;
  min-height: 44px;
  height: 100%;
  padding: 6px 0;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* Let cards fill their grid row when a product name wraps. */
body:is(.site-hk-zh, .site-hk-en, .site-hk-cn) .footer-platform-grid > li {
  display: flex;
  min-width: 0;
}

body:is(.site-hk-zh, .site-hk-en, .site-hk-cn) .footer-platform-link {
  width: 100%;
  height: 100%;
}

@media (min-width: 360px) {
  body:is(.site-hk-zh, .site-hk-en, .site-hk-cn) .footer-platform-section .footer-links.footer-region-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 639px) {
  body:is(.site-hk-zh, .site-hk-en, .site-hk-cn) .footer-platform-section .footer-links.footer-region-list {
    column-gap: 16px;
  }

  body:is(.site-hk-zh, .site-hk-en, .site-hk-cn) .footer-platform-section .footer-links.footer-region-list > li > a {
    font-size: .875rem;
  }
}

@media (min-width: 768px) {
  body:is(.site-hk-zh, .site-hk-en, .site-hk-cn) .footer-platform-section .footer-links.footer-region-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 980px) {
  body:is(.site-hk-zh, .site-hk-en, .site-hk-cn) .footer-platform-groups {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
  }

  body:is(.site-hk-zh, .site-hk-en, .site-hk-cn) .footer-platform-group--products {
    grid-column: span 3;
  }

  body:is(.site-hk-zh, .site-hk-en, .site-hk-cn) .footer-platform-grid {
    gap: 12px;
    grid-auto-rows: minmax(84px, auto);
  }
}

@media (min-width: 1100px) {
  body:is(.site-hk-zh, .site-hk-en, .site-hk-cn) .footer-platform-section .footer-links.footer-region-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Shared platform registry: always visible, including mobile and no-JavaScript views. */
.site-footer .ig-platform-section{padding-top:28px;padding-bottom:30px;overflow:visible;max-height:none}
.ig-platform-list{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px;overflow:visible;max-height:none}
.ig-platform-list>li{min-width:0;border-top:1px solid #d2d9d5}
.ig-platform-list a{display:block;padding:15px 2px;overflow-wrap:anywhere;text-decoration:none}
.ig-platform-list a:focus-visible{outline:3px solid #a64a0d;outline-offset:2px}
.ig-platform-tagline{display:block;font-size:.87rem;line-height:1.55;margin-top:4px;color:inherit}
.ig-preview{display:inline-block;background:#ffdfb6;color:#713100;font-size:.75rem;padding:1px 7px;border-radius:4px;line-height:1.7}
@media(max-width:850px){.ig-platform-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.ig-platform-list{grid-template-columns:1fr}}


/* header-insights.css */
/* All three Hong Kong language versions: Insights remains in the mobile drawer and footer. */
@media (min-width: 980px) {
  body:is(.site-hk-zh, .site-hk-en, .site-hk-cn) .site-head .nav-item--mobile-only {
    display: none;
  }

  body:is(.site-hk-zh, .site-hk-en, .site-hk-cn) .site-head .site-nav,
  body:is(.site-hk-zh, .site-hk-en, .site-hk-cn) .site-head .nav-list,
  body:is(.site-hk-zh, .site-hk-en, .site-hk-cn) .site-head .nav-cta {
    flex-shrink: 0;
  }

  body:is(.site-hk-zh, .site-hk-en, .site-hk-cn) .site-head .nav-cta {
    white-space: nowrap;
  }
}

/* Keep the compact desktop spacing through laptop widths, not just small tablets. */
@media (min-width: 980px) and (max-width: 1279px) {
  body:is(.site-hk-zh, .site-hk-en, .site-hk-cn) .site-head .container {
    width: min(1200px, 96%);
  }

  body:is(.site-hk-zh, .site-hk-en, .site-hk-cn) .site-head .site-head-row,
  body:is(.site-hk-zh, .site-hk-en, .site-hk-cn) .site-head .site-header-bar,
  body:is(.site-hk-zh, .site-hk-en, .site-hk-cn) .site-head .site-header-end,
  body:is(.site-hk-zh, .site-hk-en, .site-hk-cn) .site-head .lang-switch {
    gap: 8px;
  }

  body:is(.site-hk-zh, .site-hk-en, .site-hk-cn) .site-head .brand {
    margin-right: 0;
  }

  body:is(.site-hk-zh, .site-hk-en, .site-hk-cn) .site-head .brand img {
    width: 108px;
  }

  body:is(.site-hk-zh, .site-hk-en, .site-hk-cn) .site-head .lang-switch__icon {
    display: none;
  }

  body:is(.site-hk-zh, .site-hk-en, .site-hk-cn) .site-head .lang-switch__link,
  body:is(.site-hk-zh, .site-hk-en, .site-hk-cn) .site-head .lang-switch__current {
    min-width: 2.1rem;
    min-height: 34px;
    padding: 6px 8px;
  }

  body:is(.site-hk-zh, .site-hk-en, .site-hk-cn) .site-head .site-nav,
  body:is(.site-hk-zh, .site-hk-en, .site-hk-cn) .site-head .nav-list {
    gap: 3px;
  }

  body:is(.site-hk-zh, .site-hk-en, .site-hk-cn) .site-head .nav-trigger,
  body:is(.site-hk-zh, .site-hk-en, .site-hk-cn) .site-head .nav-link {
    padding-right: 7px;
    padding-left: 7px;
    font-size: .78rem;
  }

  body:is(.site-hk-zh, .site-hk-en, .site-hk-cn) .site-head .nav-cta {
    margin-left: 2px;
    padding: .52rem .7rem;
    font-size: .78rem;
  }
}

/* English labels need more room even after removing the desktop Insights link. */
@media (min-width: 980px) and (max-width: 1100px) {
  body.site-hk-en .site-head .nav-trigger,
  body.site-hk-en .site-head .nav-link {
    padding-inline: 4px;
  }
}

@media (min-width: 1280px) {
  body.site-hk-en .site-head .nav-trigger,
  body.site-hk-en .site-head .nav-link {
    padding-inline: 10px;
  }

  body.site-hk-en .site-head .site-header-bar {
    gap: 12px;
  }

  body.site-hk-en .site-head .lang-switch__icon {
    display: none;
  }

  body.site-hk-en .site-head .lang-switch__link,
  body.site-hk-en .site-head .lang-switch__current {
    min-width: 2.1rem;
    min-height: 34px;
    padding: 6px 8px;
  }
}