/* =============================================================================
   ai-architect.css — 建築業 AI 落地架構師單頁
   結構依 docs/plans/AI落地架構師_單頁網頁文案與版面規劃.md：
   Banner → 導入動機 → 服務項目 → 落地實例（嵌入情境流程頁） → 服務流程 → CTA。
   視覺語彙取自建築圖說（格線、裁切角標、尺寸線、圖框標題欄）。內容預設全部
   可見；js/ai-architect.js 只有在 GSAP 載入且未偏好減少動態時才於 <body> 加上
   .has-motion，再隱藏起始畫格交給動畫揭露。
   ============================================================================= */

.aiarch-page {
  --ds-font-sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --aiarch-section-space: clamp(var(--ds-space-3xl), 9vw, var(--ds-space-5xl));
  --aiarch-gutter: clamp(32px, 8vw, 64px);
  /* 容器外側到視窗邊緣的距離：Banner 圖片向右延伸出血用 */
  --aiarch-bleed: calc((100vw - min(100vw - var(--aiarch-gutter), var(--ds-container-max))) / 2);
  --aiarch-ease-out: cubic-bezier(.16, 1, .3, 1);
  --aiarch-blueprint-line: color-mix(in srgb, var(--ds-color-secondary) 9%, transparent);
  font-family: var(--ds-font-sans);
  background: var(--ds-color-page);
}

.aiarch-page main [id] { scroll-margin-top: 96px; }

/* 只作用於主內容且權重為 0：頁首／頁尾 logo 尺寸由共用元件決定 */
:where(.aiarch-page main img) { height: auto; }

.aiarch-container {
  width: min(100% - var(--aiarch-gutter), var(--ds-container-max));
  margin-inline: auto;
}

.aiarch-magnetic { will-change: transform; }

/* 區塊標題組：標題靠左、導言靠右下對齊，避免每區都是置中的單欄標題 */
.aiarch-split-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: end;
  gap: var(--ds-space-lg) clamp(var(--ds-space-xl), 5vw, var(--ds-space-4xl));
  margin-bottom: clamp(var(--ds-space-2xl), 6vw, var(--ds-space-3xl));
}

.aiarch-split-intro__title { margin-top: var(--ds-space-sm); max-width: 16em; }

/* 中文標題以標點分句：後半句整段換行，避免在詞語中間斷開 */
.aiarch-phrase { display: inline-block; }
.aiarch-split-intro > .ds-lead { max-width: 34em; }

.aiarch-rule {
  position: absolute;
  background: var(--ds-color-border);
  pointer-events: none;
}

@media (width <= 1024px) {
  .aiarch-split-intro { grid-template-columns: 1fr; align-items: start; }
}

/* =============================================================================
   1. Banner
   ============================================================================= */
.aiarch-hero {
  position: relative;
  padding-block: clamp(var(--ds-space-2xl), 7vw, var(--ds-space-4xl)) var(--aiarch-section-space);
  overflow: hidden;
  isolation: isolate;
}

.aiarch-hero::before {
  content: "";
  position: absolute;
  inset: -10% 30% auto -20%;
  height: 110%;
  z-index: -1;
  background:
    radial-gradient(closest-side, var(--ds-color-primary-wash), transparent 70%) 20% 30% / 60% 70% no-repeat,
    radial-gradient(closest-side, var(--ds-color-secondary-wash), transparent 70%) 70% 80% / 50% 60% no-repeat;
  pointer-events: none;
}

.aiarch-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(var(--ds-space-xl), 5vw, var(--ds-space-4xl));
}

.aiarch-hero__eyebrow { color: var(--ds-color-secondary); font-size: var(--ds-text-body-sm-size); }

.aiarch-hero__title { margin-block: var(--ds-space-md) var(--ds-space-lg); }

.aiarch-hero__title em {
  font-style: normal;
  background: linear-gradient(100deg, var(--ds-color-primary), var(--ds-color-secondary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.aiarch-mask { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.aiarch-mask__line { display: block; text-wrap: balance; }

.aiarch-hero__lead { max-width: 32em; }

.aiarch-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-sm) var(--ds-space-xl);
  margin-top: var(--ds-space-xl);
}

/* 主視覺向右延伸到視窗邊緣，左側保留圓角 */
.aiarch-hero__visual {
  position: relative;
  margin: 0 calc(var(--aiarch-bleed) * -1) 0 0;
  padding-top: var(--ds-space-xl);
}

/* 尺寸線：圖面上標示寬度的細線與兩端短豎線 */
.aiarch-hero__dimension {
  position: absolute;
  top: var(--ds-space-xs);
  left: 0;
  right: var(--aiarch-bleed);
  height: 9px;
  border-inline: 1px solid var(--ds-color-secondary);
  transform-origin: left center;
}

.aiarch-hero__dimension::before {
  content: "";
  position: absolute;
  inset: 4px 0 auto;
  height: 1px;
  background: var(--ds-color-secondary);
  opacity: .5;
}

.aiarch-hero__frame {
  position: relative;
  height: clamp(420px, 40vw, 600px);
  border-radius: var(--ds-radius-lg) 0 0 var(--ds-radius-lg);
  overflow: hidden;
  background: var(--ds-color-surface-muted);
  box-shadow: 0 30px 60px -30px rgba(30, 14, 98, .35);
}

/* 上下各多留 8% 給捲動視差位移，避免露出畫框底色 */
.aiarch-page .aiarch-hero__image {
  position: absolute;
  inset: -8% 0 auto;
  display: block;
  width: 100%;
  height: 116%;
  object-fit: cover;
  object-position: 42% 50%;
  transform-origin: 60% 50%;
}

/* 圖紙格線疊在畫面左側，往右淡出到實景 */
.aiarch-hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .35) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .35) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(100deg, #000 0%, transparent 55%);
  mask-image: linear-gradient(100deg, #000 0%, transparent 55%);
  pointer-events: none;
}

.aiarch-hero__corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 0 solid var(--ds-color-on-dark);
  pointer-events: none;
}

.aiarch-hero__corner--tl { top: var(--ds-space-md); left: var(--ds-space-md); border-width: 2px 0 0 2px; }
.aiarch-hero__corner--tr { top: var(--ds-space-md); right: calc(var(--aiarch-bleed) + var(--ds-space-md)); border-width: 2px 2px 0 0; }
.aiarch-hero__corner--bl { bottom: var(--ds-space-md); left: var(--ds-space-md); border-width: 0 0 2px 2px; }
.aiarch-hero__corner--br { bottom: var(--ds-space-md); right: calc(var(--aiarch-bleed) + var(--ds-space-md)); border-width: 0 2px 2px 0; }

/* 圖框標題欄：建築圖面右下角的資訊欄，在這裡用來摘要服務範圍 */
.aiarch-titleblock {
  position: absolute;
  left: clamp(-56px, -4vw, -24px);
  bottom: calc(var(--ds-space-xl) * -1);
  width: min(360px, 70%);
  padding: var(--ds-space-md) var(--ds-space-lg);
  border: var(--ds-border-width) solid var(--ds-color-border);
  border-radius: var(--ds-radius-md);
  background: color-mix(in srgb, var(--ds-color-card) 92%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--ds-shadow-panel);
}

.aiarch-titleblock__head {
  display: block;
  padding-bottom: var(--ds-space-xs);
  border-bottom: var(--ds-border-width) solid var(--ds-color-border);
  color: var(--ds-color-secondary);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
  font-weight: var(--ds-weight-bold);
  letter-spacing: .14em;
}

.aiarch-titleblock__rows { margin: 0; }

.aiarch-titleblock__row {
  display: grid;
  grid-template-columns: 3em minmax(0, 1fr);
  gap: var(--ds-space-sm);
  padding-block: var(--ds-space-xs);
  border-bottom: var(--ds-border-width) dashed var(--ds-color-border);
  font-size: var(--ds-text-body-sm-size);
  line-height: var(--ds-text-body-sm-line);
}

.aiarch-titleblock__row:last-child { border-bottom: 0; padding-bottom: 0; }

.aiarch-titleblock__row dt { color: var(--ds-color-text-muted); }
.aiarch-titleblock__row dd { margin: 0; color: var(--ds-color-text-primary); font-weight: var(--ds-weight-medium); }

body.has-motion [data-hero-in] { opacity: 0; }

@media (width <= 1024px) {
  .aiarch-hero__layout { grid-template-columns: 1fr; }
  .aiarch-hero__frame { height: clamp(320px, 56vw, 480px); }
  .aiarch-titleblock { left: auto; right: calc(var(--aiarch-bleed) + var(--ds-space-lg)); }
}

@media (width <= 768px) {
  .aiarch-hero__frame { height: clamp(260px, 72vw, 340px); }
  .aiarch-titleblock {
    position: relative;
    inset: auto;
    width: auto;
    margin: calc(var(--ds-space-xl) * -1) calc(var(--aiarch-bleed) + var(--ds-space-md)) 0 var(--ds-space-md);
  }
}

/* =============================================================================
   2. 導入動機 — 三段編號文字，細直線分隔；不加卡片底色或陰影
   ============================================================================= */
.aiarch-motivation {
  background: var(--ds-color-surface-inner);
  padding-block: calc(var(--aiarch-section-space) + var(--ds-space-xl)) var(--aiarch-section-space);
}

.aiarch-motivation__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.aiarch-motivation__item {
  position: relative;
  padding-inline: clamp(var(--ds-space-lg), 3.5vw, var(--ds-space-2xl));
}

.aiarch-motivation__item:first-child { padding-left: 0; }
.aiarch-motivation__item:last-child { padding-right: 0; }

.aiarch-motivation__item .aiarch-rule {
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--ds-border-width);
  transform-origin: top center;
}

.aiarch-motivation__item:first-child .aiarch-rule { display: none; }

/* 大型空心編號：以 Secondary 細描邊呈現順序，不搶標題層級 */
.aiarch-motivation__index {
  display: block;
  margin-bottom: var(--ds-space-lg);
  color: var(--ds-color-secondary);
  font-size: clamp(56px, 6vw, 88px);
  line-height: 1;
  font-weight: var(--ds-weight-bold);
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

@supports (-webkit-text-stroke: 1px black) {
  .aiarch-motivation__index {
    color: transparent;
    -webkit-text-stroke: 1.25px var(--ds-color-secondary);
  }
}

.aiarch-motivation__item h3 { margin-bottom: var(--ds-space-sm); }

@media (width <= 768px) {
  .aiarch-motivation__list { grid-template-columns: 1fr; }
  .aiarch-motivation__item,
  .aiarch-motivation__item:first-child,
  .aiarch-motivation__item:last-child { padding: var(--ds-space-xl) 0 0; }
  .aiarch-motivation__item:first-child { padding-top: 0; }
  .aiarch-motivation__item + .aiarch-motivation__item { margin-top: var(--ds-space-xl); }
  .aiarch-motivation__item .aiarch-rule {
    right: 0;
    bottom: auto;
    width: auto;
    height: var(--ds-border-width);
    transform-origin: left center;
  }
  .aiarch-motivation__index { margin-bottom: var(--ds-space-md); }
}

/* =============================================================================
   3. 服務項目 — 品牌色整體色塊；左側定位、右側四組白底橫向圖文列
   ============================================================================= */
.aiarch-services { padding-block: var(--aiarch-section-space); }

.aiarch-services__panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 3.4fr) minmax(0, 6.6fr);
  gap: clamp(var(--ds-space-xl), 4vw, 56px);
  padding: clamp(var(--ds-space-lg), 4.5vw, 64px);
  border-radius: var(--ds-radius-lg);
  background: linear-gradient(155deg, var(--ds-color-secondary) 0%, var(--ds-color-text-primary) 85%);
  color: var(--ds-color-on-dark-strong);
  overflow: hidden;
  isolation: isolate;
}

.aiarch-services__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 15% 20%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 80% at 15% 20%, #000 20%, transparent 75%);
}

.aiarch-services__panel::after {
  content: "";
  position: absolute;
  inset: -30% auto auto -20%;
  width: 70%;
  aspect-ratio: 1;
  z-index: -1;
  background: radial-gradient(closest-side, var(--ds-color-cyan-40), transparent);
  opacity: .55;
  pointer-events: none;
}

.aiarch-services__intro { align-self: start; padding-top: var(--ds-space-xs); }

.aiarch-services__eyebrow { color: var(--ds-color-on-dark-strong); }

.aiarch-services__eyebrow .ds-eyebrow__decoration {
  background-image: none;
  color: var(--ds-color-cyan);
}

.aiarch-services__eyebrow .ds-eyebrow__divider::before { background: var(--ds-color-on-dark); }
.aiarch-services__eyebrow .ds-eyebrow__divider::after { background: var(--ds-color-cyan); }

.aiarch-services__title {
  margin-block: var(--ds-space-md);
  color: var(--ds-color-on-dark);
}

.aiarch-services__lead { color: var(--ds-color-on-dark-strong); }

.aiarch-services__actions { margin-top: var(--ds-space-xl); }

.aiarch-services__list {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--ds-space-md), 1.6vw, var(--ds-space-lg));
  margin: 0;
  padding: 0;
  list-style: none;
}

.aiarch-service {
  display: grid;
  grid-template-columns: clamp(160px, 14vw, 200px) minmax(0, 1fr);
  align-items: center;
  gap: var(--ds-space-lg);
  padding: clamp(var(--ds-space-md), 1.8vw, var(--ds-space-lg));
  border-radius: var(--ds-radius-lg);
  background: var(--ds-color-card);
  box-shadow: var(--ds-shadow-ambient);
  color: var(--ds-color-text-secondary);
}

.aiarch-service__media {
  aspect-ratio: 1;
  border-radius: var(--ds-radius-md);
  overflow: hidden;
  background: var(--ds-color-surface-muted);
}

.aiarch-page .aiarch-service__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--aiarch-ease-out);
}

.aiarch-service:hover .aiarch-service__media img { transform: scale(1.06); }

.aiarch-service__title {
  display: flex;
  align-items: baseline;
  gap: var(--ds-space-sm);
  margin-bottom: var(--ds-space-xs);
}

.aiarch-service__index {
  flex-shrink: 0;
  color: var(--ds-color-secondary);
  font-size: var(--ds-text-label-sm-size);
  font-weight: var(--ds-weight-bold);
  font-variant-numeric: tabular-nums;
}

.aiarch-service__focus-label {
  margin-top: var(--ds-space-md);
  color: var(--ds-color-text-muted);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
  font-weight: var(--ds-weight-semibold);
  letter-spacing: var(--ds-tracking-wide);
}

.aiarch-service__focus {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-xs);
  margin: var(--ds-space-xs) 0 0;
  padding: 0;
  list-style: none;
}

.aiarch-service__note {
  display: flex;
  gap: var(--ds-space-xs);
  margin-top: var(--ds-space-md);
  padding-top: var(--ds-space-sm);
  border-top: var(--ds-border-width) dashed var(--ds-color-border);
  color: var(--ds-color-text-secondary);
  font-size: var(--ds-text-body-sm-size);
  line-height: var(--ds-text-body-sm-line);
}

.aiarch-service__note .ds-icon { margin-top: 3px; color: var(--ds-color-primary); }

@media (width <= 1024px) {
  .aiarch-services__panel { grid-template-columns: 1fr; }
  .aiarch-services__intro { max-width: 36em; }
}

@media (width <= 768px) {
  .aiarch-services__panel { padding: var(--ds-space-lg) var(--ds-space-md); }
  .aiarch-service {
    grid-template-columns: 1fr;
    align-items: start;
    gap: var(--ds-space-md);
    padding: var(--ds-space-md);
  }
  .aiarch-service__media { width: clamp(200px, 64%, 240px); }
}

/* =============================================================================
   3.5 落地實例——以瀏覽器視窗外框（網址列＋面板陰影）嵌入智驗宅情境流程頁（外部網站）。
   預設為固定高度：來源頁尚未支援嵌入模式時，以各寬度下最長情境的內容高度為準，
   避免 iframe 內出現垂直捲軸（較短的情境下方會留白）。來源頁以 postMessage 回報
   內容高度後，js/ai-architect.js 加上 .is-auto-height 並改由行內 height 控制。
   視窗內底色與來源頁底色相近，固定高度時的留白不會形成色塊。
   ============================================================================= */
.aiarch-scenarios { padding-block: var(--aiarch-section-space); }

.aiarch-scenarios .aiarch-split-intro { margin-bottom: clamp(var(--ds-space-lg), 3vw, var(--ds-space-2xl)); }

/* --- 瀏覽器視窗外框 --- */
.aiarch-browser {
  overflow: hidden;
  border: var(--ds-border-width) solid var(--ds-color-border);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-color-surface-muted);
  box-shadow: var(--ds-shadow-panel);
}

.aiarch-browser__bar {
  display: grid;
  grid-template-columns: 1fr minmax(0, auto) 1fr;
  align-items: center;
  gap: var(--ds-space-md);
  padding: var(--ds-space-xs) var(--ds-space-sm) var(--ds-space-xs) var(--ds-space-md);
  border-bottom: var(--ds-border-width) solid var(--ds-color-border);
  background: var(--ds-color-card);
}

.aiarch-browser__dots { display: inline-flex; gap: 8px; }

.aiarch-browser__dots i {
  width: 12px;
  height: 12px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-surface-muted);
  box-shadow: inset 0 0 0 1px var(--ds-color-border);
}

.aiarch-browser__address {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-xxs);
  width: min(100%, 420px);
  padding: 6px var(--ds-space-md);
  overflow: hidden;
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-surface-inner);
  color: var(--ds-color-text-secondary);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.aiarch-browser__address .ds-icon { flex: none; color: var(--ds-color-text-muted); font-size: 14px; }

.aiarch-browser__open { justify-self: end; }

/* 視窗本體設最大高度（不超過一屏），iframe 維持完整內容高度，超出部分在這裡捲動；
   窄螢幕不限高度，隨內容自然排列、整頁捲動 */
.aiarch-browser__viewport {
  max-height: clamp(480px, calc(100vh - var(--ds-navbar-height) - 140px), 860px);
  max-height: clamp(480px, calc(100dvh - var(--ds-navbar-height) - 140px), 860px);
  overflow-y: auto;
  /* 預留捲軸寬度：捲軸出現與否不會改變 iframe 寬度，避免來源頁重新排版後高度來回變動 */
  scrollbar-gutter: stable;
}

@media (max-width: 760px) {
  .aiarch-browser__viewport { max-height: none; overflow: visible; }
}

.aiarch-scenarios .aiarch-split-intro .ds-lead { max-width: 34em; }

.aiarch-scenarios__fallback {
  margin-top: var(--ds-space-sm);
  color: var(--ds-color-text-muted);
  font-size: var(--ds-text-body-sm-size);
  line-height: var(--ds-text-body-sm-line);
}

.aiarch-scenarios__fallback a { color: var(--ds-color-secondary); font-weight: var(--ds-weight-semibold); }
.aiarch-scenarios__fallback a:hover { color: var(--ds-color-secondary-hover); }

@media (max-width: 639px) {
  .aiarch-browser__bar { gap: var(--ds-space-sm); padding-left: var(--ds-space-sm); }
  .aiarch-browser__dots { gap: 6px; }
  .aiarch-browser__dots i { width: 10px; height: 10px; }
}

.aiarch-scenarios__frame {
  display: block;
  width: 100%;
  height: 1500px;
  border: 0;
  background: transparent;
  color-scheme: light;
}

@media (max-width: 1023px) { .aiarch-scenarios__frame { height: 1620px; } }
@media (max-width: 760px) { .aiarch-scenarios__frame { height: 2460px; } }

/* 高度由來源頁回報時不套用固定值（行內 height 優先），也不需要捲軸 */
.aiarch-scenarios.is-auto-height .aiarch-scenarios__frame { overflow: hidden; }

/* 逐步介紹：在同頁以全螢幕對話框開啟，不另開分頁 */
.aiarch-guide {
  width: min(100vw - 32px, 1200px);
  max-width: none;
  height: min(100dvh - 32px, 900px);
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: var(--ds-radius-lg);
  background: var(--ds-color-card);
  box-shadow: var(--ds-shadow-panel);
  overflow: hidden;
}

.aiarch-guide[open] { display: flex; flex-direction: column; }
.aiarch-guide::backdrop { background: rgba(10, 10, 15, .72); }

.aiarch-guide__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-md);
  padding: var(--ds-space-sm) var(--ds-space-sm) var(--ds-space-sm) var(--ds-space-lg);
  border-bottom: var(--ds-border-hairline);
}

.aiarch-guide__title {
  color: var(--ds-color-text-primary);
  font-size: var(--ds-text-body-md-size);
  font-weight: var(--ds-weight-semibold);
}

.aiarch-guide__close {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-surface-inner);
  color: var(--ds-color-text-primary);
  cursor: pointer;
}

.aiarch-guide__close:hover { background: var(--ds-color-surface-muted); }
.aiarch-guide__close:focus-visible { outline: none; box-shadow: var(--ds-shadow-focus); }

.aiarch-guide__frame { flex: 1; width: 100%; border: 0; }

@media (max-width: 639px) {
  .aiarch-guide { width: 100vw; height: 100dvh; border-radius: 0; }
}

/* =============================================================================
   4. 服務流程 — 沿用 .ds-process 節點與捲動填線；寬桌機橫排，其餘改直向
   ============================================================================= */
.aiarch-process {
  background: var(--ds-color-surface-inner);
  padding-block: var(--aiarch-section-space);
}

.aiarch-process__steps { --ds-process-count: 6; }

/* .ds-process 的連接線以「欄寬一半」計算圓心，欄之間不能有 gap，改以內距留白 */
.aiarch-process__body { padding-inline: clamp(var(--ds-space-xs), 1vw, var(--ds-space-md)); }

.aiarch-process__steps .ds-process__node {
  font-size: var(--ds-text-label-sm-size);
  outline: 6px solid var(--ds-color-surface-inner);
}

.aiarch-process__title {
  margin-bottom: var(--ds-space-xs);
  font-size: var(--ds-text-body-md-size);
  line-height: var(--ds-text-cta-line);
  font-weight: var(--ds-weight-semibold);
}

.aiarch-process__desc {
  color: var(--ds-color-text-secondary);
  font-size: var(--ds-text-body-sm-size);
  line-height: var(--ds-text-body-sm-line);
}

@media (width <= 1024px) {
  .aiarch-process__steps {
    grid-template-columns: 1fr;
    row-gap: var(--ds-space-xl);
    max-width: 640px;
  }

  .aiarch-process__steps::before,
  .aiarch-process__steps::after {
    left: calc(var(--ds-control-height-md) / 2 - 1px);
    top: calc(var(--ds-control-height-md) / 2);
    width: 2px;
  }

  .aiarch-process__steps::before { height: calc(100% - var(--ds-control-height-md)); }
  .aiarch-process__steps::after { height: calc((100% - var(--ds-control-height-md)) * var(--ds-process-progress, 1)); }

  .aiarch-process__steps .ds-process__item {
    grid-template-columns: var(--ds-control-height-md) minmax(0, 1fr);
    justify-items: start;
    align-items: start;
    column-gap: var(--ds-space-lg);
    text-align: left;
  }

  /* 連接線以容器高度計算，會延伸過最後一個節點；以區塊底色蓋住節點以下的線段 */
  .aiarch-process__steps .ds-process__item:last-child::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: calc(var(--ds-control-height-md) / 2);
    bottom: 0;
    left: 0;
    width: var(--ds-control-height-md);
    background: var(--ds-color-surface-inner);
  }

  .aiarch-process__body { padding: 10px 0 0; }
}

/* =============================================================================
   5. CTA — 圖紙格線與品牌色光暈的寬幅留白收尾
   ============================================================================= */
.aiarch-cta {
  position: relative;
  padding-block: clamp(var(--ds-space-4xl), 11vw, var(--ds-space-5xl));
  overflow: hidden;
  isolation: isolate;
  background: var(--ds-color-surface-inner);
  text-align: center;
}

.aiarch-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(closest-side, var(--ds-color-primary-wash), transparent 70%) 20% 50% / 60% 120% no-repeat,
    radial-gradient(closest-side, var(--ds-color-secondary-wash), transparent 70%) 85% 40% / 55% 110% no-repeat;
}

.aiarch-cta__grid {
  position: absolute;
  inset: -25% 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, var(--aiarch-blueprint-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--aiarch-blueprint-line) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, #000 30%, transparent 80%);
  mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, #000 30%, transparent 80%);
  pointer-events: none;
}

.aiarch-cta__eyebrow { color: var(--ds-color-secondary); letter-spacing: var(--ds-tracking-wide); }

.aiarch-cta__title { margin-block: var(--ds-space-md) var(--ds-space-lg); text-wrap: balance; }

.aiarch-cta__lead { max-width: 38em; margin-inline: auto; }

.aiarch-cta__actions {
  display: flex;
  justify-content: center;
  margin-top: var(--ds-space-xl);
}

@media (width <= 768px) {
  .aiarch-cta__break { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .aiarch-page .aiarch-service__media img { transition: none; }

  .aiarch-service:hover .aiarch-service__media img { transform: none; }
}