/* 壹 首頁（關於慧盈）（單 2；award_build/p_index.py＋src/templates/award/p-index.html）：
   首屏（直排 h1＋落印 logo＋線條圖版；圖版不標圖號）、開場（純 CSS；每瀏覽階段一次＝boot.js 的 html.aw-opened）、信條帶、
   關於慧盈、服務項目三列（主張）、金句帶（註冊標語）。
   規則同 base.css 檔頭：色只用 token、字重只用已載入樣式（Serif 600／其餘 400）、字級 --fs-*、間距 --s1～--s7；例外就地註明。 */

/* ── 首屏 ─────────────────────────────────────────────────────────── */
.p-idx__hero {
  /* 例外：直排 h1 展示字級（總綱 §4 壹）＝clamp(40px, (100svh − 頁首高 − 160px) / 7.6, 104px)；手機上限 52px（§10） */
  --p-h1: clamp(40px, (100svh - var(--aw-hdr-full, var(--aw-head-h)) - 160px) / 7.6, 104px);
  position: relative; overflow: hidden; display: flex; align-items: center;
  min-height: calc(100svh - var(--aw-hdr-full, var(--aw-head-h))); padding: var(--s4) 0;
}
.p-idx__grid { position: relative; z-index: 1; width: 100%; align-items: end; row-gap: var(--s4); }
.p-idx__copy { grid-column: 1 / 6; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); padding-bottom: var(--s3); }
.p-idx__sheet {
  grid-column: 6 / 13; grid-row: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr) auto;
  column-gap: var(--s3); align-items: end;
}
.p-idx__h1 {
  position: relative; z-index: 2; grid-column: 2; grid-row: 1 / 3; margin: 0;
  font: 600 var(--p-h1)/1 var(--f-serif); letter-spacing: .08em; color: var(--fg);
}
.p-idx__ch { display: inline-block; }
/* 落款（單 2 要做的 6；夜間代決 4）：毛筆字所名署名＋logo 鈐印；整組位置見下方「落款整組位置」（手機靠右、768 以上置中）。毛筆字只等比縮放與換色（字高 ≥24px）。
   兩者「墨跡」上下置中、淨間距＝印章墨跡高約 19.1%（沿用組合檔 B 的比例）。尺寸放在共同祖先 .p-idx__kuan：
   --k-seal＝印章框（logo 墨跡貼齊框，寬高比 0.9988＝左右各留約 0.062%）、--k-brush＝毛筆字框高。
   兩素材上下留白都對稱（毛筆字上下各 1.923% 框高、logo 0）＝框置中即墨跡置中；
   CSS gap＝目標墨跡淨距 − 相鄰留白：毛筆字右側留白＝框寬 1.923%＝框高 × 0.14278、logo 左側留白＝框 × 0.00062。
   留白比例是素材實測值（tmp_j2_kuan_bbox.js；換素材檔要重量），驗收以畫面墨跡為準（tmp_j2_kuan_px.js） */
.p-idx__kuan {
  --k-seal: calc(var(--p-h1) * .8); --k-brush: max(24px, calc(var(--p-h1) * .48));
  grid-column: 1; grid-row: 2; display: flex; justify-content: flex-end; align-items: center; margin-top: var(--s3);
  gap: calc(var(--k-seal) * (.191 - .00062) - var(--k-brush) * .14278);
}
@supports (width: round(1.5px, 1px)) {   /* 取整數 px：毛筆字（行內 SVG）點陣化對齊像素，墨跡位置才準（不支援 round() 的瀏覽器用上面未取整的值） */
  .p-idx__kuan { --k-seal: round(calc(var(--p-h1) * .8), 1px); --k-brush: round(max(24px, calc(var(--p-h1) * .48)), 1px); }
}
.p-idx__sign { position: relative; z-index: 2; display: block; flex: none; color: var(--fg); line-height: 0; }
.p-idx__brush { --aw-brush-h: var(--k-brush); }
/* 落印開場時印章放大到 1.6 倍（§5-1），會伸進淨距 19.1% 與 h1 欄距：印章疊在字的下層（h1、毛筆字 z-index 2），字永遠在上、不被遮 */
.p-idx__stamp { position: relative; z-index: 1; flex: none; line-height: 0; }
.p-idx__stamp .aw-logo { position: relative; z-index: 1; --logo-sz: var(--k-seal); }
.p-idx__bloom {                    /* 墨暈（開場落印時擴散後淡出；平常不顯示） */
  position: absolute; left: -60%; top: -60%; width: 220%; height: 220%; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--seal) 45%, transparent), transparent);
}
.p-idx__art { position: relative; grid-column: 1; grid-row: 1; align-self: stretch; min-height: 0; }
.p-idx__art svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--accent); stroke-width: 1px; }
.p-idx__art svg * { vector-effect: non-scaling-stroke; }
/* 首屏圖版三種圖式語言（單 2c）：主輪廓與節點＝全強度（非文字 ≥3:1）、輔助線較弱 */
/* 商標監控（服務項目第三列同一張圖的同向小版）：地球＝環境（虛線＝不主張；外框全強度、經緯內線較弱）、監視網＝主張（實線強調色） */
.p-idx__art .p-idx__ge { stroke: var(--fg-2); stroke-dasharray: 6 4; }
.p-idx__art .p-idx__gg { opacity: .45; }
.p-idx__gn { stroke: var(--accent); }
.p-idx__gn .p-idx__dot { fill: var(--accent); }
@media (max-width: 767.98px) { .p-idx__art .p-idx__gt { display: none; } }   /* 手機：一般監控點只留圈與點（刻線縮到 1～2px 會糊成一片） */
.p-idx__unclaimed { stroke: var(--fg-2); stroke-dasharray: 6 4; }     /* 虛線＝不主張（手機外框、按鍵） */
.p-idx__claimed { stroke: var(--accent); }                            /* 實線＝主張（螢幕內 GUI 圖示） */
.p-idx__claimed .p-idx__dot { fill: var(--accent); }
.p-idx__struct { stroke: var(--accent); }                             /* 發明：構件輪廓 */
.p-idx__hidg { stroke: var(--fg-2); }
.p-idx__hid { stroke-dasharray: 5 4; }                               /* 虛線＝隱藏邊 */
.p-idx__lead-l { stroke: var(--fg-2); }
/* 標號（Plex Mono；例外：SVG 內字級以 viewBox 單位計） */
.p-idx__num text { fill: var(--fg-2); stroke: none; font: 400 17px/1 var(--f-mono); letter-spacing: .04em; }
/* 落款整組位置與印章在哪一側（業主 11/06 10:59:49、11:03:05 與組合圖說明）：
   兩個開關都放在 .p-idx__kuan，每種寬度可各自改（不必動構圖）：
     --k-side：印章在所名哪一側（1＝右、-1＝左；換到的是 flex 排列順序，DOM 與報讀順序不變）；
     justify-content：整組靠右（flex-end）或置中（center）。
   淨距公式兩側通用：毛筆字左右留白相同（各 1.923% 框寬）、logo 左右留白相同，換邊不必重算 gap。
   手機（767 以下）＝方案一：整組靠右、印章在右（上面的預設）。
   768 以上＝組合圖 B（logo_deliver/慧盈logo組合_置中間距B）：整組在插圖下方置中、印章在左、所名在右；
   所名大小比例照組合圖——所名墨跡高 ÷ 印章紅色外框高＝0.6782（tmp_j2c_combo_ratio.js 實測），
   換成毛筆字框高（墨跡＝框高 × 0.96154）＝印章框 × 0.70533；所名與印章仍各自獨立（落印動畫照舊）。 */
.p-idx__kuan { --k-side: 1; }
.p-idx__stamp { order: var(--k-side); }
/* 768 以上的那條寫在英文版規則之後（英文版選擇器較具體、且同樣要套） */
/* 1024 以上左右平衡（單 2c；採用表 3）：圖紙加寬到第 6–12 欄；左欄撐滿圖紙高度——kicker、標語、段落從圖紙內緣頂端起排，
   段落改宋體置於中段、CTA 沉到底與落款同高（兩個 margin-top:auto 平分剩餘高度），左半不再上空下擠。
   段落字級＝--fs-h2 的 80%（例外：不在 §2.2 級距；第一屏主角只留直排標語，這段退一階）；max-width 用 em，斷行照舊落在語意單位 */
@media (min-width: 1024px) {
  .p-idx__copy { align-self: stretch; padding-top: var(--s3); }
  .p-idx__copy .p-idx__lead { margin-top: auto; max-width: 13em; font: 600 calc(var(--fs-h2) * .8)/1.6 var(--f-serif); letter-spacing: .04em; }
  .p-idx__ctawrap { margin-top: auto; }
}

.p-idx__kicker { font: 400 var(--fs-label)/1.5 var(--f-mono); letter-spacing: .16em; color: var(--accent); }
.p-idx__en { font: italic 400 var(--fs-it)/1.6 var(--f-latin); letter-spacing: .04em; color: var(--accent); }
.p-idx__lead { max-width: 26em; font: 400 var(--fs-lead)/1.9 var(--f-sans); color: var(--fg); }
.p-idx__u { display: inline-block; }   /* 導言只在語意單位之間換行（所有寬度；行內區塊：單位比可用寬還寬才在單位內換行，不溢出）；不改字 */
.p-idx__cta {
  position: relative; display: inline-flex; align-items: center; gap: var(--s2); min-height: 48px; padding: 0 var(--s1) 0 0;
  font: 400 var(--fs-body)/1.3 var(--f-sans); letter-spacing: .16em; color: var(--fg); text-decoration: none;
}
.p-idx__cta::after {               /* 指向下方關於區的引線（裝飾 1px） */
  content: ""; width: var(--s4); height: 1px; background: var(--accent);
  transition: width var(--t-state) var(--ease-out);
}
.p-idx__cta:hover::after, .p-idx__cta:focus-visible::after { width: var(--s5); }

/* 英文版：h1 橫排（base.css 已把 .aw-vert 改橫排），佔圖版第一列；圖與 logo 在下 */
html[lang="en"] .p-idx__h1 { grid-column: 1 / -1; grid-row: 1; margin-bottom: var(--s3); font-size: clamp(32px, 8vw, 64px); letter-spacing: .04em; }
html[lang="en"] .p-idx__sheet { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
html[lang="en"] .p-idx__art { grid-column: 1; grid-row: 2; aspect-ratio: 4 / 3; }
html[lang="en"] .p-idx__kuan { grid-column: 1; grid-row: 3; }
html[lang="en"] .p-idx__kuan { --k-seal: 64px; --k-brush: 36px; }
/* 落款 768 以上＝組合圖 B 排法（說明見上方「落款整組位置」）：置中、印章在左、所名照組合圖比例 */
/* 置中時以「墨跡」置中：毛筆字外側那一邊的留白（框高 × .14278）用同寬內距補回另一邊（依 --k-side 自動算在左或右）。
   印章大小另受插圖欄寬限制：整組寬＝印章框 × 6.427（1＋淨距 .19＋所名 7.4244 × .70533），上限取「插圖欄寬 ÷ 6.6」換成視窗寬比例——
   768～1023（圖紙全寬）≈ 10.2vw、1024 以上（圖紙第 6–12 欄）≈ 5.1vw（各寬實量欄寬：768＝515px、1024＝350px）。
   不用容器查詢（cqw）：圖紙設成 inline-size 容器會讓 WebKit 的直排 h1 改成橫排、插圖高度變 0（實測）。英文版另有固定尺寸、單欄，不受此限 */
@media (min-width: 768px) {
  .p-idx__kuan, html[lang="en"] .p-idx__kuan {
    --k-side: -1; justify-content: center; --k-brush: calc(var(--k-seal) * .70533);
    padding-left: calc(var(--k-brush) * .14278 * (1 - var(--k-side)) / 2); padding-right: calc(var(--k-brush) * .14278 * (1 + var(--k-side)) / 2);
  }
  .p-idx__kuan { --k-cap: 10.2vw; --k-seal: min(var(--p-h1) * .8, var(--k-cap)); }
  @supports (width: round(1.5px, 1px)) {
    .p-idx__kuan { --k-seal: round(min(var(--p-h1) * .8, var(--k-cap)), 1px); }
    .p-idx__kuan, html[lang="en"] .p-idx__kuan { --k-brush: round(calc(var(--k-seal) * .70533), 1px); }
  }
}
@media (min-width: 1024px) { .p-idx__kuan { --k-cap: 5.1vw; } }
/* 矮視窗（寬 ≥1024、高 ≤760）：直排字級已隨視窗高縮（--p-h1）；左欄也跟著收，高度不再把圖框撐到視窗底（例外字級：依視窗高） */
@media (min-width: 1024px) and (max-height: 760px) {
  .p-idx__hero { padding: var(--s3) 0; }
  .p-idx__copy { gap: var(--s2); padding-top: var(--s2); padding-bottom: var(--s2); }
  .p-idx__copy .p-idx__lead { font-size: min(calc(var(--fs-h2) * .8), 4svh); }
}

/* ── 開場（總綱 §5-1；純 CSS，不掛 data-reveal、不依賴 defer 的 JS）：kicker 收攏淡入 → h1 逐字落墨（每字 300ms、
   錯開 30ms，最後一字約 480ms 落定；單 3m2 A9：400ms 時標語全句已清楚，落款與其他時序不動）→ 900ms 落印（logo 只縮放、旋轉、透明度，420ms）＋墨暈 600ms；總長 ≤1.6s；
   其餘文字 200ms 起淡入、800ms 完成（900ms 內可讀）。boot.js 判定本瀏覽階段已播＝html.aw-opened＝直接最終狀態；
   減動態＝base.css §11 全停＝最終狀態。 */
@media (prefers-reduced-motion: no-preference) {
  html:not(.aw-opened) .p-idx__kicker { animation: p-idx-gather 520ms var(--ease-out) both; }
  html:not(.aw-opened) .p-idx__ch { animation: p-idx-ink 300ms var(--ease-out) calc(var(--i, 0) * 30ms) both; }
  html:not(.aw-opened) :is(.p-idx__en, .p-idx__lead, .p-idx__ctawrap, .p-idx__art) {
    animation: p-idx-fade 600ms var(--ease-out) 200ms both;
  }
  /* 署名：毛筆字由左往右裁切顯現（像書寫；只用 clip-path，字形不變形）300～900ms，接著 900ms 鈐印；
     兩者填充 backwards：最後一格＝元素原本樣子，動畫結束後不留 clip-path 與印章動畫狀態（單 3bn 補令 1） */
  html:not(.aw-opened) .p-idx__brush { animation: p-idx-write 600ms var(--ease-io) 300ms backwards; }
  html:not(.aw-opened) .p-idx__stamp .aw-logo { animation: p-idx-stamp 420ms var(--ease-stamp) 900ms backwards; }
  html:not(.aw-opened) .p-idx__bloom { animation: p-idx-bloom 600ms var(--ease-out) 900ms forwards; }   /* 不用 backwards：落印前不可先出現 */
}
@keyframes p-idx-gather { from { opacity: 0; letter-spacing: .6em; } to { opacity: 1; } }
@keyframes p-idx-ink { from { opacity: 0; transform: translateY(-.18em) scale(1.12); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes p-idx-fade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes p-idx-write { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes p-idx-stamp { from { opacity: 0; transform: scale(1.6) rotate(-6deg); } to { opacity: 1; transform: none; } }
@keyframes p-idx-bloom { from { opacity: .7; transform: scale(.3); } to { opacity: 0; transform: scale(1.6); } }

/* ── 第一屏以下（單 3d）：一份攤開的專利文件。尺度由大字、線稿、細字三階輪流主導；段與段不再是等寬橫條，而是引線、圖版、信條階梯互相咬合（關於與服務兩段交界為水平直線，單 3st）。
   例外字級（展示字）都就地註明；間距照 --s1～--s7。線稿 aria-hidden、pointer-events:none；線稿與大字重疊處，線色對字與對底都 ≥3:1（--p-dl）；小字不疊線。 */

/* ── 信條帶：三條引線從首屏下緣垂下，長度遞增成階梯（字固定掛在引線右側） ── */
.p-idx__credo { position: relative; padding-bottom: var(--s4); }
.p-idx__credo-list { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; list-style: none; }
.p-idx__credo-cell { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s1); padding-left: var(--s2); }
.p-idx__credo-cell:nth-child(1) { grid-column: 1 / 5; padding-top: var(--s4); }
.p-idx__credo-cell:nth-child(2) { grid-column: 5 / 9; padding-top: var(--s6); }
.p-idx__credo-cell:nth-child(3) { grid-column: 9 / 13; padding-top: var(--s7); }
.p-idx__credo-cell::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--accent); }
.p-idx__credo-cell::after {       /* 引線端點（例外：5px 節點幾何） */
  content: ""; position: absolute; left: -2px; bottom: 0; width: 5px; height: 1px; background: var(--accent);
}
/* 例外：信條展示字級（不在 §2.2 級距；隨寬度放大，1024 時約 h3） */
.p-idx__credo-t { font: 600 clamp(24px, 2.4vw, 36px)/1.3 var(--f-serif); letter-spacing: .08em; }
.p-idx__credo-s { font: italic 400 var(--fs-it)/1.5 var(--f-latin); letter-spacing: .04em; color: var(--fg-2); }

/* ── 章節頭（關於慧盈／服務項目；只有章名、不帶章號，業主 11/08）：小字，用尺度差襯大字 ── */
.p-idx__shead { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s3); row-gap: var(--s1); margin-bottom: var(--s4); }
.p-idx__sname { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s2); font: 600 var(--fs-h3)/1.3 var(--f-serif); letter-spacing: .12em; }
.p-idx__sen { font: italic 400 var(--fs-it)/1.5 var(--f-latin); letter-spacing: .04em; color: var(--fg-2); }

/* ── 關於慧盈：宣言放到展示字級；爆炸圖從視窗左緣出血、頂端伸到宣言下方、隨閱讀 sticky；正文在右六欄 ── */
.p-idx__about { position: relative; z-index: 0; scroll-margin-top: 0; padding-top: 0; padding-bottom: var(--s5); overflow-x: hidden; overflow-x: clip; }
/* 章節頭在階梯之後、頂一條通欄細線：跟階梯三項分屬不同層級 */
.p-idx__about > .p-idx__shead { position: relative; margin-bottom: var(--s5); }
.p-idx__about > .p-idx__shead::before { content: ""; flex: 0 0 100%; height: 1px; margin-bottom: var(--s2); background: var(--line); }
.p-idx__ledewrap { position: relative; z-index: 1; margin-bottom: var(--s5); }
/* 例外：宣言展示字級（第二行 17 字×1.04em 要放進版心，依視窗寬算） */
.p-idx__lede { grid-column: 1 / -1; font: 600 min(4.7vw, 68px)/1.36 var(--f-serif); letter-spacing: .04em; text-wrap-style: balance; }
.p-idx__spec {
  position: relative;
  /* 爆炸圖尺寸：寬不超過左五欄＋出血、高不超過視窗（sticky 才放得下）；--p-bl＝視窗左緣到版心距離 */
  --p-dl: color-mix(in srgb, var(--fg-2) 80%, var(--bg));
  --p-w: min(1320px, 100vw - 2 * var(--aw-margin));
  --p-bl: max(var(--aw-margin), (100vw - 1320px) / 2);
  --p-dw: min((var(--p-w) - 264px) * 5 / 12 + 96px + var(--p-bl), (100svh - var(--aw-bar-h) - var(--s4)) * .7391, 636px);
}
.p-idx__draw {
  grid-column: 1 / 6; grid-row: 1; justify-self: start; position: sticky; top: calc(var(--aw-bar-h) + var(--s2)); align-self: start;
  width: var(--p-dw); aspect-ratio: 680 / 920; margin-top: calc(var(--s3) - var(--s5) + var(--p-dw) * 20 / 680); margin-left: calc(-1 * var(--p-bl) - var(--p-dw) * .1); pointer-events: none;
}
/* 圖框垂直定位（≥1024 一律）：圖最高點＝宣言框底（版心上方 --s5）下 --s3，不鑽進宣言字下。圖最高點＝中心線頂＝座標 y −20
   （上層後角 y 20 再往上 p_index.py fig_about_svg 的 AX；改 AX 要同步 margin-top 式裡的 20）。
   margin-bottom 不反補：段落底部隨圖框下移，下層圖板與下端伸出線不被下一段墨底蓋住。≤1023 另有 margin（見 1023 段） */
/* 爆炸圖中心軸不再用頁面背景線延伸（業主 11/10 19:23:52：背景線跟著頁面、圖框黏住跟著視窗，捲動時兩段相對滑動、接不齊）；
   伸出上下兩端的線改由 SVG 同一條線畫、跟所屬層一起動（p_index.py fig_about_svg 的 clk 與 AX） */
/* 寬螢幕（≥1440）爆炸圖往右靠、貼近正文（業主 11/09 15:09:52）；<1440 不套本段。
   --p-dx＝圖框左緣相對版心左緣：讓圖最右圖元（引線數字 200 的右緣 x＝664.8／680）到段號左緣（第 6 欄左緣＝5 欄＋5 欄距）留 --s5；
   但圖最左圖元（圖板左角 x＝35.6／680）離視窗左緣至少 --s2，兩者衝突取後者。兩個座標住 p_index.py fig_about_svg，改圖要一起改。
   垂直定位同上方 .p-idx__draw 基本規則。 */
@media (min-width: 1440px) {
  .p-idx__spec { --p-dx: max((var(--p-w) - 264px) * 5 / 12 + 120px - var(--s5) - var(--p-dw) * 664.8 / 680, var(--s2) - var(--p-bl) - var(--p-dw) * 35.6 / 680); }
  .p-idx__draw { margin-left: var(--p-dx); }
}
.p-idx__draw svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--accent); stroke-width: 1px; }
/* 上下層位移：--p-xo＝定格時往中間收多少（桌機 0＝全展開）、--p-xa＝捲動展開的行程（座標單位） */
.p-idx__draw { --p-xo: 0px; --p-xa: 64px; }
.p-idx__xt { transform: translateY(var(--p-xo)); }
.p-idx__xb { transform: translateY(calc(-1 * var(--p-xo))); }
.p-idx__draw svg * { vector-effect: non-scaling-stroke; }
/* 不主張的線用 --p-dl：對紙色 ≥3:1、對疊在上面的大字也 ≥3:1（由 fg-2 混紙色調出） */
.p-idx__pl { fill: var(--bg); stroke: var(--p-dl); stroke-dasharray: 5 4; }
.p-idx__d { stroke: var(--p-dl); stroke-dasharray: 5 4; }
.p-idx__cl { stroke: var(--p-dl); stroke-dasharray: 16 4 2 4; }
.p-idx__k { stroke: var(--accent); }
.p-idx__dot { fill: var(--accent); }
.p-idx__ld { stroke: var(--p-dl); }
.p-idx__gl { stroke-dasharray: none !important; }
.p-idx__spec > .aw-spec__body { grid-column: 6 / 13; grid-row: 1 / span 2; padding-top: var(--s4); }
.p-idx__spec > .aw-spec__body > * { grid-column: 2 / -1; }
.p-idx__spec > .aw-spec__body > .aw-para { grid-column: 1 / -1; }
.p-idx__spec > .aw-spec__body > .aw-para:lang(zh) { text-wrap-style: auto; }   /* 中文兩端對齊段落改一般換行：WebKit 的 pretty 會依各段總字數重排全段行長，各段行寬不同、右緣不齊（單 3pj） */
.p-idx__spec .aw-para__no { grid-column: 1 / 2; }
.p-idx__spec .aw-para__text { grid-column: 2 / -1; }
.p-idx__spec > .aw-spec__aside { grid-column: 1 / 6; grid-row: 2; margin-top: var(--s4); }
/* 關於區小目錄（有小標才出，建站照出、DOM 不變）：所有寬度都不顯示——四段很短、留小標即可；≥1024 目錄與 sticky 爆炸圖同在左欄、
   鋪底會遮掉圖、不鋪則圖線穿字，1023 以下又落在正文之後（主管 11/10 定案）。邊欄只剩目錄＝整欄不出，不留空白上距（:has 不支援＝只留空白） */
.p-idx__toc { display: none; }
.p-idx__spec > .aw-spec__aside:has(> .p-idx__toc:only-child) { display: none; }
.p-idx__alead { margin-bottom: var(--s4); }
.p-idx__sub { margin: var(--s4) 0 var(--s3); font: 600 var(--fs-h3)/1.4 var(--f-serif); letter-spacing: .06em; scroll-margin-top: var(--s2); }
.p-idx__img { aspect-ratio: 4 / 3; margin-bottom: var(--s4); border: 1px solid var(--line); }
.p-idx__img img { width: 100%; height: 100%; object-fit: contain; }

/* ── 服務項目：墨底上緣與關於區交界為水平直線（單 3st）；三張圖版左右錯開，線稿穿出虛線框直到出血 ── */
.p-idx__prac {
  position: relative; z-index: 1; padding: var(--s6) 0; overflow-x: hidden; overflow-x: clip;
}
.p-idx__rows { list-style: none; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: var(--s6); }
.p-idx__ri { min-width: 0; }
.p-idx__ri:nth-child(odd) { grid-column: 1 / 10; }
.p-idx__ri:nth-child(even) { grid-column: 4 / 13; }
.p-idx__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.05fr); grid-template-rows: auto minmax(0, 1fr) auto;
  column-gap: var(--s4); padding: var(--s4); min-height: 440px;
}
.p-idx__row .aw-claim__body { display: contents; }
.p-idx__row .aw-claim__no { grid-column: 1; grid-row: 1; justify-self: start; margin-bottom: 0; z-index: 1; background: var(--bg); }   /* 編號壓在線稿上：底色擋線，字不疊線 */
.p-idx__rname { grid-column: 2; grid-row: 1 / -1; display: flex; flex-direction: row-reverse; align-items: flex-start; column-gap: var(--s2); }
/* 例外：列名展示字級（直排，呼應首屏） */
.p-idx__rzh { writing-mode: vertical-rl; font: 600 clamp(56px, 6vw, 88px)/1.06 var(--f-serif); letter-spacing: .06em; color: var(--fg); }
.p-idx__ren { writing-mode: vertical-rl; font: italic 400 var(--fs-it)/1.5 var(--f-latin); letter-spacing: .04em; color: var(--fg-2); }
html[lang="en"] .p-idx__rname { flex-direction: column; row-gap: var(--s1); }
html[lang="en"] .p-idx__rzh { writing-mode: horizontal-tb; font-size: clamp(40px, 4.4vw, 64px); }
html[lang="en"] .p-idx__ren { writing-mode: horizontal-tb; }
.p-idx__rdesc { grid-column: 1; grid-row: 2; align-self: end; margin-bottom: var(--s3); color: color-mix(in srgb, var(--fg-2) 55%, var(--fg)); }   /* 單 3m2 A4：服務卡說明 ≥7:1（深底＝往本文色調亮） */
.p-idx__rto { grid-column: 1; grid-row: 3; justify-self: start; display: inline-flex; align-items: baseline; gap: var(--s1); white-space: nowrap; font: 600 var(--fs-small)/1.5 var(--f-serif); letter-spacing: .12em; color: var(--accent); }
/* 右邊距＝hover 位移量的預留空間：平常箭頭後面空 2 個 --s1，hover 位移後仍留 1 個，不貼後面的字 */
.p-idx__rarr { margin-right: var(--s1); font: 400 var(--fs-body)/1 var(--f-sans); transition: transform var(--t-state) var(--ease-out); }
.p-idx__row:hover .p-idx__rarr, .p-idx__row:focus-visible .p-idx__rarr { transform: translateX(var(--s1)); }
/* 線稿：佔第三欄、向框外穿出（不接事件；虛實切換在 svg 本身＝工具與共用主張元件的約定） */
.p-idx__ricon { position: relative; grid-column: 3; grid-row: 1 / -1; display: block; pointer-events: none; }
.p-idx__ricon svg {
  position: absolute; left: 0; top: 50%; width: 46vw; max-width: 720px; height: auto; transform: translateY(-50%); overflow: visible;
  fill: none; stroke: var(--accent); stroke-width: 1px; stroke-dasharray: 5 4;
}
.p-idx__ricon svg * { vector-effect: non-scaling-stroke; }
:is(.p-idx__row:hover, .p-idx__row:focus-visible, .p-idx__row:focus-within, .p-idx__row.is-claimed) .p-idx__ricon svg { stroke-dasharray: none; }
/* 商標監控：地球＝環境用較弱色（外框 --fg-2 全強度、經緯內線再淡），監視網跟 svg 的強調色；虛實照上一條一起切 */
.p-idx__ricon .p-idx__ge { stroke: var(--fg-2); }
.p-idx__ricon .p-idx__gg { opacity: .5; }
@media (max-width: 767.98px) { .p-idx__ricon .p-idx__gt { display: none; } }   /* 手機：同首屏，一般監控點只留圈與點 */
/* 偶數列左右相反：線稿往左穿出 */
.p-idx__ri:nth-child(even) .p-idx__row { grid-template-columns: minmax(0, 1.05fr) auto minmax(0, 1fr); }
.p-idx__ri:nth-child(even) .p-idx__row .aw-claim__no,
.p-idx__ri:nth-child(even) .p-idx__rdesc,
.p-idx__ri:nth-child(even) .p-idx__rto { grid-column: 3; }
.p-idx__ri:nth-child(even) .p-idx__ricon { grid-column: 1; }
.p-idx__ri:nth-child(even) .p-idx__ricon svg { left: auto; right: 0; }
/* 三列圖號：每種寬度都出；FIG. 2、3 在線稿右下（右下支點放大）、FIG. 4 在左下（左下支點）；--p-gs＝小寬度的放大倍率；--p-gx／--p-gy＝位移（座標單位），讓標籤不貼線稿、不碰列名、不壓框 */
.p-idx__ricon .p-idx__gl { transform-box: fill-box; transform-origin: 0 100%; transform: translate(var(--p-gx, 0px), var(--p-gy, 0px)) scale(var(--p-gs, 1)); }
.p-idx__ri:nth-child(1) .p-idx__ricon .p-idx__gl, .p-idx__ri:nth-child(even) .p-idx__ricon .p-idx__gl { transform-origin: 100% 100%; }
.p-idx__ri:nth-child(3) .p-idx__ricon { --p-gy: -40px; }
.p-idx__ri:nth-child(1) .p-idx__ricon { --p-gx: -322px; --p-gy: 10px; }   /* FIG. 2 收進設計列卡片框內右下、手機圖右下緣之下（位移量依各寬卡片框實量） */
@media (max-width: 1279.98px) { .p-idx__ricon { --p-gs: 1.5; } }
@media (max-width: 1279.98px) { .p-idx__ri:nth-child(1) .p-idx__ricon { --p-gx: -330px; --p-gy: 40px; } }   /* 放大 1.5 倍後移到手機圖下緣之下，不碰線稿 */
@media (min-width: 768px) and (max-width: 1023.98px) { .p-idx__ri:nth-child(3) .p-idx__ricon { --p-gx: 40px; --p-gy: 12px; } }
@media (min-width: 768px) and (max-width: 1023.98px) { .p-idx__ri:nth-child(1) .p-idx__ricon { --p-gx: -285px; --p-gy: 16px; } }   /* 此段卡片較矮：右移、少下移 */
@media (max-width: 767.98px) {
  .p-idx__ricon { --p-gs: 2.3; --p-gy: 50px; }
  .p-idx__ri:nth-child(1) .p-idx__ricon { --p-gx: 0px; --p-gy: 50px; }   /* 手機：線稿格右下、直排列名左側（同改前的放大與下移） */
  .p-idx__ri:nth-child(2) .p-idx__ricon { --p-gy: 40px; }
  .p-idx__ri:nth-child(3) .p-idx__ricon { --p-gy: 70px; }
}
/* 桌機 FIG. 4 字高對齊 FIG. 2：實量比例在 0.837～0.852 間，以 0.8445 使全測寬度誤差低於 1%；1024～1279 沿用圖號 1.5 倍底值。 */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .p-idx__ri:nth-child(3) .p-idx__ricon .p-idx__gl--desktop-match { transform: translate(var(--p-gx, 0px), var(--p-gy, 0px)) scale(1.26675); }
}
@media (min-width: 1280px) {
  .p-idx__ri:nth-child(3) .p-idx__ricon .p-idx__gl--desktop-match { transform: translate(var(--p-gx, 0px), var(--p-gy, 0px)) scale(0.8445); }
}
/* 第三張把球放大、往右出血，但整張圖的右極值不進固定角標欄（視窗右緣 56px 內：角標 16＋16、捲軸 17、間隙 7）。
   由右緣定位：圖內最右圖元（單 3gl 起＝軌道環右端衛星的太陽板，球本身再往左約 20）右側留白＝圖寬 60/720＝--p-gw/12（座標住 p_index.py fig_trademark_svg）；--p-gd＝視窗右緣到本列內容右緣（1～9 欄＋內距 --s4）；極寬時不再外推（下限 -601px＝1920 寬的舊位置） */
.p-idx__ri:nth-child(3) .p-idx__ricon svg {
  --p-gw: min(54vw, 860px); --p-m: max(var(--aw-margin), (100vw - 1320px) / 2);
  --p-gd: calc(var(--p-m) + (100vw - 2 * var(--p-m)) / 4 + 6px + var(--s4));
  left: auto; right: max(calc(56px - var(--p-gd) - var(--p-gw) / 12), -601px); width: var(--p-gw); max-width: none;
}

/* ── 收尾：標語撐滿版心，放在田字輔助格裡（格是虛線＝不主張，字才是主張）；連結由長引線帶出 ── */
.p-idx__quote { position: relative; padding: var(--s6) 0; overflow-x: hidden; overflow-x: clip; }
.p-idx__qwrap { display: block; }
.p-idx__qbox { position: relative; container-type: inline-size; }
.p-idx__qgrid { position: absolute; inset: 0; display: block; pointer-events: none; }
.p-idx__qg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: color-mix(in srgb, var(--fg-2) 80%, var(--bg)); stroke-width: 1px; stroke-dasharray: 5 4; }
.p-idx__qg * { vector-effect: non-scaling-stroke; }
.p-idx__qi { opacity: .5; }
.p-idx__qg--v { display: none; }
/* 例外：標語展示字級＝版心寬 ÷ 4 格（一格＝1em＋字距 .12em）。不支援容器單位＝用 vw 近似 */
.p-idx__q {
  position: relative; display: block; margin-right: -.12em; padding-left: .06em;
  font: 600 19vw/1.12 var(--f-serif); font-size: calc(100cqi / 4.48); letter-spacing: .12em; color: var(--fg); white-space: nowrap;
}
.p-idx__q--en { padding-left: 0; margin-right: 0; font: italic 400 10vw/1.2 var(--f-latin); font-size: calc(100cqi / 7.9); letter-spacing: 0; }
/* 連結：實心塊掛在第四格正下方、寬至少一格（貼著標語，下一步一眼可見）；英文版靠右貼在標語下 */
.p-idx__qcta { display: flex; justify-content: flex-end; margin-top: 0; }
.p-idx__cta--to {
  justify-content: space-between; gap: var(--s2); min-width: 25%; min-height: 64px; padding: var(--s2) var(--s3);
  font: 600 var(--fs-h3)/1.3 var(--f-serif); letter-spacing: .12em; color: var(--bg); background: var(--fg); text-underline-offset: 6px;
  transition: background-color var(--t-state) var(--ease-out);
}
.p-idx__cta--to:hover, .p-idx__cta--to:focus-visible { background: var(--accent); color: var(--on-accent); }
.p-idx__cta--to::after { content: none; }
.p-idx__qarr { display: inline-block; transition: transform var(--t-state) var(--ease-out); }
.p-idx__cta--to:hover .p-idx__qarr, .p-idx__cta--to:focus-visible .p-idx__qarr { transform: translateX(var(--s1)); }

/* ── 捲動動畫（不支援 animation-timeline 或減動態＝完整定格在展開、靜止）：爆炸圖由合攏展開；齒輪依齒數比轉 ── */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .p-idx__spec { view-timeline: --p-ab block; }
    .p-idx__xt { animation: p-idx-xt linear both; animation-timeline: --p-ab; animation-range: cover 0% cover 45%; }
    .p-idx__xb { animation: p-idx-xb linear both; animation-timeline: --p-ab; animation-range: cover 0% cover 45%; }
    .p-idx__ri { view-timeline: --p-r block; }
    .p-idx__g1 { animation: p-idx-g1 linear both; animation-timeline: --p-r; }
    .p-idx__g2 { animation: p-idx-g2 linear both; animation-timeline: --p-r; }
    .p-idx__g3 { animation: p-idx-g3 linear both; animation-timeline: --p-r; }
  }
}
@keyframes p-idx-xt { from { transform: translateY(calc(var(--p-xo) + var(--p-xa))); } to { transform: translateY(var(--p-xo)); } }
@keyframes p-idx-xb { from { transform: translateY(calc(-1 * var(--p-xo) - var(--p-xa))); } to { transform: translateY(calc(-1 * var(--p-xo))); } }
/* 轉角比＝齒數反比（32：18：12），才咬得住 */
@keyframes p-idx-g1 { from { transform: rotate(-22.5deg); } to { transform: rotate(22.5deg); } }
@keyframes p-idx-g2 { from { transform: rotate(40deg); } to { transform: rotate(-40deg); } }
@keyframes p-idx-g3 { from { transform: rotate(-60deg); } to { transform: rotate(60deg); } }

/* ── 版面換軌：1023 以下 ── */
@media (max-width: 1023.98px) {
  /* 信條：階梯改直向，一樣掛引線 */
  .p-idx__credo-list { grid-template-columns: minmax(0, 1fr); }
  .p-idx__credo-cell:nth-child(1), .p-idx__credo-cell:nth-child(2), .p-idx__credo-cell:nth-child(3) { grid-column: 1; padding-top: var(--s3); }
  .p-idx__credo-cell:nth-child(2) { margin-left: 8%; }
  .p-idx__credo-cell:nth-child(3) { margin-left: 16%; }
  .p-idx__credo-t { font-size: clamp(24px, 4.4vw, 36px); }
  .p-idx__about > .p-idx__shead { margin-top: var(--s5); }
  /* 例外：宣言展示字級（平板） */
  .p-idx__lede { font-size: 4.9vw; }
  /* 爆炸圖先出、靠右出血，正文接在下面 */
  .p-idx__spec { row-gap: var(--s4); }
  /* 層距「拉開一半」（業主 11/10 19:00:43 選）：上下層各往中間收 --p-xo（座標單位；桌機 0＝全展開）。
     圖框＝座標 y (4＋--p-xo)～(916－--p-xo)，aspect-ratio＝680 /（912－2×--p-xo）；改 --p-xo 要同步 aspect-ratio 與手機段 svg 高。
     編號與引線終點（座標 x ≤ 674）留在視窗內 */
  .p-idx__draw {
    --p-xo: 40px; --p-xa: 28px; grid-column: 1 / -1; grid-row: 1; justify-self: end; position: relative; top: auto;
    width: min(68vw, 560px); aspect-ratio: 680 / 832; margin: calc(-1 * var(--s3)) 0 0; overflow: hidden;
  }
  .p-idx__draw svg { position: absolute; left: 0; top: 50%; height: auto; transform: translateY(-50%); }
  /* 中心線同桌機畫成貫通三層（業主 11/10 18:31:32）：圖板照基本規則填紙色、畫各層分段線（p_index.py fig_about_svg 的 clk）；
     伸出上下兩端的線會被本段圖框（overflow: hidden）裁掉框外部分 */
  .p-idx__spec > .aw-spec__body { grid-column: 1 / -1; grid-row: 2; padding-top: 0; }
  .p-idx__spec > .aw-spec__aside { grid-column: 1 / -1; grid-row: 3; }
  .p-idx__ri:nth-child(odd) { grid-column: 1 / 12; }
  .p-idx__ri:nth-child(even) { grid-column: 2 / 13; }
  .p-idx__row { padding: var(--s3); min-height: 340px; column-gap: var(--s3); }
  .p-idx__ricon svg { width: 54vw; }
  .p-idx__ri:nth-child(3) .p-idx__ricon svg { --p-gw: 46vw; --p-gd: calc(var(--p-m) + (100vw - 2 * var(--p-m)) / 12 + 2px + var(--s3)); }   /* 這段寬度列佔 1～11 欄、內距 --s3；球縮一些，圖號不碰列名 */
  .p-idx__rzh { font-size: clamp(48px, 7vw, 72px); }
}
/* 平板：爆炸圖在內文欄置中——圖框置中後再左移「墨跡中心偏離座標中心」的量（墨跡座標 x 35.56～664.8、中心 350.18，座標中心 340 → 圖框寬的 10.18/680）；業主 11/08 19:03:34 */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .p-idx__draw { justify-self: center; transform: translateX(-1.4971%); }
}

/* ── 手機：不是縮小版——線稿滿版出血、直排列名靠外側、標語直排一欄四格 ── */
@media (max-width: 767.98px) {
  .p-idx__credo { padding-bottom: var(--s3); }
  .p-idx__credo-cell { padding-left: var(--s2); }
  .p-idx__credo-cell:nth-child(2) { margin-left: var(--s4); }
  .p-idx__credo-cell:nth-child(3) { margin-left: var(--s5); }
  /* 例外：信條手機字級（360 寬也要一行放下 8 字） */
  .p-idx__credo-t { font-size: min(6.4vw, 26px); }
  .p-idx__about > .p-idx__shead { margin-top: var(--s4); margin-bottom: var(--s3); }
  .p-idx__ledewrap { margin-bottom: var(--s3); }
  /* 例外：宣言手機展示字級 */
  .p-idx__lede { font-size: min(8.4vw, 36px); line-height: 1.4; }
  /* 手機：圖框＝內文欄寬，整張圖（墨跡座標 x 35.56～678.72＝最左圖板角～放大後編號右緣）在欄內左右各留欄寬 3.5%（業主 11/08 19:03:34：原本太靠右）。
     svg 框比座標寬、內容靠左（preserveAspectRatio xMin，p_index.py）＝編號右側留白也在 svg 內。
     推導：縮放 k＝欄寬×(1−2×3.5%)/643.16；svg 左＝3.5%−35.56k、右緣＝圖框右緣、高＝920k÷圖框高（圖框比例住上方 1023 段 aspect-ratio）；改縮放、編號放大倍率或 1023 段 --p-xo 要重算 */
  .p-idx__draw { width: 100%; margin: 0; }
  .p-idx__draw svg { left: -1.6419%; width: 101.6419%; max-width: none; height: 108.7273%; }   /* max-width：解除 base.css 全站 svg 上限 100%，否則寬被壓回圖框寬 */
  /* 編號放大到約 11px（字仍是線稿，只等比縮放） */
  .p-idx__draw .p-idx__gl { transform-box: fill-box; transform-origin: 0 50%; transform: scale(1.4); }
  .p-idx__spec > .aw-spec__body { display: block; }
  .p-idx__about { padding-bottom: var(--s4); }
  .p-idx__prac { padding: var(--s5) 0; }
  .p-idx__rows { grid-template-columns: minmax(0, 1fr); row-gap: var(--s4); }
  .p-idx__ri:nth-child(odd), .p-idx__ri:nth-child(even) { grid-column: 1; }
  /* 三列：編號＋線稿在左（線稿穿出框到螢幕邊）、直排列名靠外；說明與動作收在底下，整列收緊 */
  .p-idx__row, .p-idx__ri:nth-child(even) .p-idx__row {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(120px, 1fr) auto auto;
    column-gap: var(--s2); padding: var(--s2); min-height: 0;
  }
  .p-idx__row .aw-claim__no, .p-idx__ri:nth-child(even) .p-idx__row .aw-claim__no { grid-column: 1; grid-row: 1; min-width: 36px; height: 36px; }
  .p-idx__rname { grid-column: 2; grid-row: 1 / span 2; column-gap: var(--s1); }
  /* 例外：列名手機展示字級 */
  .p-idx__rzh { font-size: 52px; }
  .p-idx__ricon, .p-idx__ri:nth-child(even) .p-idx__ricon { grid-column: 1; grid-row: 2; height: 46vw; margin-top: var(--s1); }
  /* 線稿高度＝這一格（往上不碰編號、往下不碰說明），橫向只穿出框內距 */
  .p-idx__ricon svg, .p-idx__ri:nth-child(even) .p-idx__ricon svg, .p-idx__ri:nth-child(3) .p-idx__ricon svg { left: calc(-1 * var(--s2)); right: auto; top: 0; transform: none; width: auto; height: 100%; max-width: none; }
  .p-idx__ri:nth-child(3) .p-idx__ricon svg { left: calc(-1 * var(--s1)); }   /* 圖號在線稿左下角：離框線留距 */
  .p-idx__rdesc, .p-idx__ri:nth-child(even) .p-idx__rdesc { grid-column: 1 / -1; grid-row: 3; margin: var(--s2) 0 var(--s1); line-height: 1.75; }
  .p-idx__rto, .p-idx__ri:nth-child(even) .p-idx__rto { grid-column: 1 / -1; grid-row: 4; justify-self: end; }
  /* 偶數列相反：列名在左、線稿穿出右緣 */
  .p-idx__ri:nth-child(even) .p-idx__row { grid-template-columns: auto minmax(0, 1fr); }
  .p-idx__ri:nth-child(even) .p-idx__rname { grid-column: 1; }
  .p-idx__ri:nth-child(even) .p-idx__row .aw-claim__no { grid-column: 2; justify-self: end; }
  .p-idx__ri:nth-child(even) .p-idx__ricon { grid-column: 2; }
  .p-idx__ri:nth-child(even) .p-idx__ricon svg { left: auto; right: calc(-1 * var(--s2)); }
  /* 英文版列名橫排：編號＋列名一列、線稿自成一列（高度跟線稿）、說明與動作接後面 */
  html[lang="en"] .p-idx__row, html[lang="en"] .p-idx__ri:nth-child(even) .p-idx__row { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto auto; }
  html[lang="en"] .p-idx__row .aw-claim__no, html[lang="en"] .p-idx__ri:nth-child(even) .p-idx__row .aw-claim__no { grid-column: 1; grid-row: 1; justify-self: start; }
  html[lang="en"] .p-idx__rname, html[lang="en"] .p-idx__ri:nth-child(even) .p-idx__rname { grid-column: 2; grid-row: 1; }
  html[lang="en"] .p-idx__rzh { font-size: 36px; }
  html[lang="en"] .p-idx__ricon, html[lang="en"] .p-idx__ri:nth-child(even) .p-idx__ricon { grid-column: 1 / -1; grid-row: 2; margin-top: var(--s2); }
  .p-idx__quote { padding: var(--s4) 0; }   /* 收尾區上下各收一級（單 3m2 A7）；標語字級、田字格、連結塊不動 */
  html:not([lang="en"]) .p-idx__qbox { container-type: normal; }
  .p-idx__qwrap { position: relative; }
  /* 標語直排一欄：靠右、整句不拆；旁邊改成尺寸線＋中心線（直排字面位置各瀏覽器略有差，不用貼字的格子）；連結落到左下；一欄寬明寫、不用 max-content（業主 iPhone 把直排內容的 max-content 算成約 0，11/08 17:50:49） */
  html:not([lang="en"]) .p-idx__qbox { width: calc(26vw * 1.12); margin-left: auto; }
  .p-idx__qg--h { display: none; }
  .p-idx__qg--v { display: block; }
  html:not([lang="en"]) .p-idx__q { writing-mode: vertical-rl; font-size: 26vw; line-height: 1.12; letter-spacing: .12em; padding: .06em 0 0; margin: 0 0 -.12em; }
  /* 連結塊右緣貼著尺寸線、底齊標語（例外字級：320 寬也要放得下） */
  html:not([lang="en"]) .p-idx__qcta { position: absolute; left: var(--aw-margin); bottom: 0; right: calc(var(--aw-margin) + 26vw * 1.12); margin: 0; }
  .p-idx__cta--to { min-width: 0; padding: var(--s2); font-size: min(5.2vw, 20px); }
}

/* ── 首屏響應規則（單 3d 未動） ── */
/* 1023 以下：首屏改上下堆疊；767 以下：h1 上限 52px */
/* 平板首屏（768～1023；單 2c 第二段；單 3tm 介紹句加長後多留 40px）：圖版不撐滿首屏，下方留出文字區；介紹句平衡換行 */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .p-idx__hero { --p-h1: clamp(56px, (100svh - var(--aw-hdr-full, var(--aw-head-h)) - 500px) / 7, 104px); }
  .p-idx__lead { text-wrap: balance; }
}
@media (max-width: 1023.98px) {
  .p-idx__copy, .p-idx__sheet { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 767.98px) {
  /* 手機首屏收尾（單 2c 第二段）：h1 依視窗高留出下方文字區，首屏停在 CTA 之後、不切半行；手機上限 52px（§10） */
  .p-idx__hero { --p-h1: clamp(40px, (100svh - var(--aw-hdr-full, var(--aw-head-h)) - 470px) / 7, 52px); }
  .p-idx__grid { row-gap: var(--s3); }
  .p-idx__copy { gap: var(--s2); padding-bottom: 0; }
  .p-idx__sheet { padding: var(--s2); column-gap: var(--s2); }
  .p-idx__h1 { grid-row: 1; }
  .p-idx__kuan { grid-column: 1 / -1; }
  .p-idx__kuan, html[lang="en"] .p-idx__kuan { --k-seal: 48px; --k-brush: 28px; }   /* 英文版選擇器較具體，手機要一併寫 */
  /* 預設導言字住 award_build/p_index.py 的 AWARD_HOME_DEFAULTS；index.json.award_home 有效值覆蓋，規則見該檔 helper；手機保留自訂 .p-idx__br。 */
  .p-idx__lead br:not(.p-idx__br) { display: none; }
  .p-idx__num text { font-size: 24px; }   /* 例外：首屏圖版標號以 viewBox 單位計；手機圖版約半尺寸，放大到實際約 11px */
}