@charset "UTF-8";
/* ========================
  🎨 Design Tokens - Variables
======================== */
/* Theme semantic colors */
/* Libraries fixed colors：不隨 Theme 切換。 */
/* v1 migration aliases：案件檔案完成遷移前保留，不是新的正式命名。 */
/* Viewport breakpoints */
/* Font Family */
/* Content Spacing */
/*
  content-px：內容版心與瀏覽器邊界的預設距離
  content-py：承接內容之容器的上下留白
  Section 自身構圖需要的 padding 使用案件 Node override，不建立 section-py Token。
*/
/* Content Spacing - Mobile */
/* Content Spacing - Desktop */
/* Text Block Padding */
/* Layout Pattern */
/* 舊單值 alias；新 layout 應分別使用 X / Y。 */
/* ==========================================================================
  Project stylesheet entry

  只放目前案件的 Theme override、Text Style 與 #pageXX 精準版型。
  共用元件與 utilities 應回到對應的 scss/_*.scss；不得把上一案樣式留在此處。
========================================================================== */
:root {
  --project-name: "麒源．介";
  /*
    案件字體覆寫（CASE-BRIEF Codex 審查裁定）：
    英文無襯線 = Google Fonts Inter；中文無襯線 = Google Fonts Chiron Hei HK。
    只覆寫這兩個角色 Token，Body、Footer 與所有 .font-* / .page-* 會一起跟隨，
    不另建第二套案件字型變數。
  */
  --font-zh-sans: "Chiron Hei HK", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --font-en-sans: "Inter", "Helvetica Neue", Arial, sans-serif;
}

/*
  Mobile fixed Nav 的底部保留量。
  共用層 _nav.scss 的預設值不保證吻合本 Nav 的實際高度，短少時 Footer 會被
  蓋住。此處為 Starter 佔位 Nav 的實測值：780 = 101.58px、390 = 51.78px，
  取兩者換算後的較大值。
  ⚠ 更動 Nav 的文字、字級、icon、padding 或排列後，必須重新量測並更新此值。
*/
@media (max-width: 991.98px) {
  :root {
    /* 2026-09-11 使用者第三輪修正：Navbar 四個動作改為只顯示 icon（文字
       用 HTML 註解保留，未刪除），取代舊版含文字時期的 81px。以 Playwright
       實測 icon-only 版 Navbar 的真實渲染高度：Mobile 610 得 50.890625px
       （610 基準下可直接視為 N）；Mobile 390 得 33.25px，換算回 610 基準
       為 33.25×610/390≈52.0064px，比 610 直接量到的值更大——依既有註記
       的方法「取兩者換算後的較大值」，改用 52.01（非上一輪聊天中提到、
       未經量測的 49 候選值）。 */
    --site-nav-height: calc(52.01 * var(--vw-base));
  }
}
/*
  2026-09-11 使用者第三輪修正：Navbar 四個動作（貴賓專線／粉絲專頁／
  地圖導航／立即預約）改為 icon-only 輸出，文字（<b>／<span>）以 HTML
  註解保留、未刪除，並補上 aria-label 維持可理解名稱。Starter 的
  .site-nav--property-sales 預設只在 Mobile 顯示 icon（Desktop 用
  `> i { display:none }` 隱藏、改顯示文字），本案 Desktop 也要顯示
  icon，因此在案件層覆寫，不修改共用 _nav.scss 本身。
*/
.site-nav--property-sales .navbar-Link .btn > i {
  display: block;
}

/*
  #page01 Hero
  來源：AI 原檔文字層／向量填色量測（source-exact，見 docs/CASE-BRIEF.md）。
  裁定：一般全出血 Hero background image（Image Contract §3.1 單一權威結構），
  非 Carousel、非 Lightbox、非 Pannable。Desktop／Mobile 各自量測，不互相推導。
  Motion：未發現多層 Hero 美術證據，不採 data-motion-hero；.img-wrap／.txt-content
  仍是各自獨立的 Motion target（沿用 Starter 掃描機制）。2026-09-11 Quiet
  Luxury 動態輪次：改為在 img.img-cover／.txt-content 上明確標 data-motion-*
  調整 distance／speed（見 index.html），取代先前「沿用預設 fade-up、不寫案
  件專屬動畫」的決定——預設 distance:1（40px）超出本輪 16–24px 的規格，需要
  逐一覆寫，詳見 docs/CASE-BRIEF.md「Motion」小節。
  結構收尾（2026-09-10）：.img-wrap 只能擁有圖片，不得同時包住 .txt-content——
  否則 Motion 會把兩者都選中：.img-wrap 走 image 動畫、內層 .txt-content 走 text
  動畫，.txt-content 的絕對定位又以 .img-wrap 為基準，父層動畫的 transform 會
  連帶位移子層，造成文字跟著圖片位移一次、又自己再位移一次的巢狀雙重動畫。
  改為 .hero 只負責定位容器（position:relative），.img-wrap 與 .txt-content
  變成兄弟節點，各自只被 Motion 選中一次。
*/
#page01 .hero {
  position: relative;
}
#page01 .img-wrap {
  /* 同一張來源照片，Desktop／Mobile 各自的可視框比例（見設計稿量測） */
  --ratio: 1920 / 1080;
  --ratio-m: 610 / 1080;
  /* Motion 進場（img.img-cover 的 zoom-out scale(1.025→1)）需要一個裁切
     邊界，避免縮放過程中短暫溢出到視窗外；settled 後 scale 已收回 1，
     對最終可視範圍與 object-position 皆無影響。 */
  overflow: hidden;
}
#page01 .img-wrap img {
  /* 初始值，待瀏覽器實測後與 JPG comp 比對校正 */
  -o-object-position: 75% 42%;
     object-position: 75% 42%;
}
@media (max-width: 991.98px) {
  #page01 .img-wrap img {
    -o-object-position: 50% 42%;
       object-position: 50% 42%;
  }
}
#page01 .txt-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding-left: calc(47 * var(--vw-base));
}
#page01 .txt-heading {
  color: var(--color-fixed-white);
}
#page01 .txt-heading__title {
  margin: 0;
}
#page01 .txt-heading__title[lang=en] {
  font-family: var(--font-en-sans);
  font-weight: 600;
  font-size: calc(70.78 * var(--vw-base));
  line-height: 1.17;
  max-width: calc(400 * var(--vw-base));
  margin-bottom: calc(41 * var(--vw-base));
}
#page01 .txt-heading__title[lang=zh-Hant] {
  font-family: var(--font-zh-sans);
  font-weight: 500;
  font-size: calc(39 * var(--vw-base));
  line-height: 1.28;
}
@media (min-width: 992px) {
  #page01 .img-wrap img {
    -o-object-position: 68% 46%;
       object-position: 68% 46%;
  }
  #page01 .txt-content {
    padding-left: calc(101 * var(--vw-base));
  }
  #page01 .txt-heading__title[lang=en] {
    font-size: calc(110.98 * var(--vw-base));
    line-height: 1.12;
    max-width: calc(600 * var(--vw-base));
    margin-bottom: calc(51 * var(--vw-base));
  }
  #page01 .txt-heading__title[lang=zh-Hant] {
    font-size: calc(43.01 * var(--vw-base));
    line-height: 1.26;
  }
}

/*
  #page02 Refined Living
  來源：AI 原檔文字層／向量填色量測 + 渲染裁切比對（source-exact 幾何，見
  docs/CASE-BRIEF.md）。裁定：文字內容（品牌 lockup + 段落 + 英文大標）+
  單張圖片燈箱（Image Contract §8.2 lightbox-image），非 Carousel。
  版型：重用共用 `.layout-split`（Grid 兩欄，Mobile 自動收成單欄），三個直接
  子節點（.txt／.media／.txt-title）交給 Grid auto-flow／grid-template-areas
  排列，不需另寫案件排序 class：
    - Mobile（單欄）：DOM 順序本身就是「品牌→段落→圖片→Refined Living」。
    - Desktop（雙欄）：grid-template-areas 把 .txt-title 獨立配置到左欄第二列，
      不落在圖片欄。
  `.txt`/`.txt-wrap`/`.txt-title`/`.txt-body` 為 Starter 現行相容結構（非
  v3 `.txt-heading`/`.txt-content`）；本節仍依賴共用 `.layout-split` 的
  `.txt`/`.media` content-type marker 與 `.txt-wrap`/`.txt-title`/`.txt-body`
  內部樣式，屬「目前共用 CSS 要求」而非案件自行發明，相容缺口已記錄於
  CASE-BRIEF，待 Starter v3 遷移後再整併。
  「Refined Living」在來源設計中的精確垂直位置與圖片下緣重疊（comp-tier-approx，
  字型已置換為 Google Fonts Inter，無法逐 px 還原），本實作改用 Grid 兩列
  （文字列／大標列）+ 大標獨立列的簡化排版，不強行還原重疊效果。
*/
#page02 .layout-split {
  --layout-columns: minmax(0, 1fr);
  --layout-gap-y: calc(26.47 * var(--vw-base));
  grid-template-areas: "text" "image" "heading";
  align-items: start;
  padding-top: calc(61.48 * var(--vw-base));
  padding-bottom: calc(80 * var(--vw-base));
}
#page02 .txt {
  grid-area: text;
}
#page02 .media {
  grid-area: image;
  padding: 0 calc(58.65 * var(--vw-base));
}
#page02 .txt-wrap {
  padding-left: calc(82.02 * var(--vw-base));
}
#page02 .brand-lockup {
  display: block;
  width: calc(392.06 * var(--vw-base));
  height: auto;
  margin-bottom: calc(52.21 * var(--vw-base));
}
#page02 .txt-body p {
  font-family: var(--font-zh-sans);
  font-weight: 400;
  font-size: calc(20 * var(--vw-base));
  line-height: 1.5;
  color: var(--color-fixed-black);
  max-width: calc(440 * var(--vw-base));
}
#page02 .img-wrap {
  --ratio: 1010 / 1080;
  /* Motion 進場（img.img-cover zoom-out）安全裁切邊界，見 page01 同段註解 */
  overflow: hidden;
}
#page02 .txt-title {
  grid-area: heading;
  font-family: var(--font-en-sans);
  font-weight: 600;
  font-size: calc(76.85 * var(--vw-base));
  line-height: 1.1;
  color: var(--color-fixed-black);
  margin-top: calc(13.96 * var(--vw-base));
  padding-left: calc(37 * var(--vw-base));
  white-space: nowrap;
  position: relative;
  /* 「Refined Living」下方分隔線：AI 原檔向量量測到一條真實 stroke 物件
     （source-exact，非稿面殘留猜測；2026-09-11 使用者視覺驗收後複查確認）
     ——0.5pt 黑色水平線，起點都是各自版心左緣（x=0），不是文字左邊界。
     Mobile／Desktop 各自的 Artboard 都有這條線（分別為 569.74／845.21
     寬，y 2207.39／2117.58），比例、寬度、與 heading 的間距各自獨立量測，
     不互相推導。用 left:0 的絕對定位偽元素掛在既有 .txt-title 節點上，
     不受它自己的 padding-left 影響、也不新增 HTML 節點或案件 class。 */
}
#page02 .txt-title::after {
  content: "";
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: calc(21.33 * var(--vw-base));
  width: calc(569.74 * var(--vw-base));
  height: 1px;
  background: #000;
}
@media (min-width: 992px) {
  #page02 .layout-split {
    --layout-columns: minmax(0, 1fr) calc(930.75 * var(--vw-base));
    --layout-gap-x: 0;
    --layout-gap-y: 0;
    grid-template-areas: "text    image" "heading image";
    padding-top: calc(42 * var(--vw-base));
    padding-bottom: calc(42 * var(--vw-base));
    /* Desktop 右側留白：來源 AI 向量量測圖片右緣距版心 42.75，圖片欄本身
       寬度已固定為 vw(930.75)（見上方 --layout-columns），留白必須放在
       Grid 容器自己的 padding-right，而不是縮小圖片欄寬度或改全域 token。 */
    padding-right: calc(42 * var(--vw-base));
  }
  #page02 .media {
    padding: 0;
  }
  #page02 .txt-wrap {
    padding-left: calc(100.43 * var(--vw-base));
    padding-top: calc(216 * var(--vw-base));
  }
  #page02 .brand-lockup {
    margin-bottom: calc(76.11 * var(--vw-base));
  }
  #page02 .txt-body p {
    max-width: calc(615 * var(--vw-base));
  }
  #page02 .txt-title {
    font-size: calc(107.59 * var(--vw-base));
    margin-top: calc(280.32 * var(--vw-base));
    padding-left: calc(100.43 * var(--vw-base));
  }
  #page02 .txt-title::after {
    margin-top: calc(35.16 * var(--vw-base));
    width: calc(845.21 * var(--vw-base));
  }
}

/*
  #page03 天母東路（區位）
  來源：AI 原檔文字/向量 bbox 直接量測（source-exact）+ 裁切影像逐列/逐欄
  近白像素掃描交叉核對（White text on photo，用 min(R,G,B)>230 取代前幾節
  的暗色門檻）。裁定：一般全出血 Image（Image Contract §3.1，非 Pannable、
  非 Carousel、非 Map，見 CASE-BRIEF 正式裁定）+ 文字疊層。
  結構比照 page01 Hero 的既有修正模式：`#page03` 本身即為 position:relative
  定位容器，`.img-wrap`／`.txt-content` 是它的直接子節點（兄弟關係），不再
  另外包一層 `.hero`——因為這裡不需要 Hero 專屬語意，`<section>` 自己就能
  當定位容器，比 page01 的寫法更精簡，兩者對 Motion 的隔離效果相同。
  Desktop／Mobile 文字順序不同（Desktop：中文大標→中文副標→英文標語；
  Mobile：中文大標→英文標語→中文副標），比照 page02 的解法，用
  `.txt-heading` 內的 `grid-template-areas` 依斷點重新排列三個既有 canonical
  子節點（`.txt-heading__title[lang]` 重複兩次＋`.txt-heading__subtitle`），
  不新增案件 class、不用 JS 或 `order` 重排 DOM。
  英文標語文字經由已揭露的「+1 位移」glyph→Unicode 對映還原（與 page01/05
  同一手法，見 Typography Inventory），非猜測；還原後之字級（Desktop 54.31／
  Mobile 70.78）與既有 Inventory 記錄的「110px 系列」不同，已在 CASE-BRIEF
  更正該筆分類誤植。
*/
#page03 {
  position: relative;
}
#page03 .img-wrap {
  --ratio: 1932 / 1080;
  --ratio-m: 610 / 1079;
  /* Motion 進場（img.img-cover zoom-out）安全裁切邊界，見 page01 同段註解 */
  overflow: hidden;
}
#page03 .img-wrap img {
  -o-object-position: center;
     object-position: center;
}
@media (max-width: 991.98px) {
  #page03 .img-wrap img {
    -o-object-position: 46% center;
       object-position: 46% center;
  }
}
#page03 .txt-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  padding-left: calc(46 * var(--vw-base));
  /* 文案群組上緣到 Section 上邊界的距離（user-confirmed，2026-09-11 視覺
     驗收）：Mobile／Desktop 各自獨立設定，不建立全域 spacing token，
     只影響文字定位，不動 .img-wrap 的圖片幾何。 */
  padding-top: calc(120 * var(--vw-base));
}
#page03 .txt-heading {
  display: grid;
  grid-template-areas: "title" "tagline" "subtitle";
  color: var(--color-fixed-white);
}
#page03 .txt-heading__title, #page03 .txt-heading__subtitle {
  margin: 0;
}
#page03 .txt-heading__title[lang=zh-Hant] {
  grid-area: title;
  font-family: var(--font-zh-sans);
  font-weight: 500;
  font-size: calc(60 * var(--vw-base));
  line-height: 1.2;
}
#page03 .txt-heading__title[lang=en] {
  grid-area: tagline;
  font-family: var(--font-en-sans);
  font-weight: 600;
  /* source-exact：Illustrator 字元面板截圖判讀（2026-09-11 使用者提供），
     取代先前 vw(54) 的目視推測。font-size/line-height/letter-spacing 為
     可直接對應的 CSS metrics；horizontal scale 105% 不可用 font-size
     模擬（見下方 transform 說明），撤回先前推測值。 */
  font-size: calc(69.07 * var(--vw-base));
  line-height: 1.2;
  letter-spacing: -0.005em;
  /* 換行寬度為「未縮放」狀態下的量測值——transform 不參與瀏覽器換行計算，
     必須先在未縮放字級下量到能重現四行斷點的寬度，再疊加 scaleX。 */
  max-width: calc(510 * var(--vw-base));
  margin-top: calc(73.91 * var(--vw-base));
  /* Illustrator horizontal scale 105%／vertical scale 100%：目前載入的
     Google Fonts Inter（靜態字重檔，@font-face stretch 皆為 normal，
     無 width 軸）已實測 font-stretch:105% 對渲染寬度零影響，不得宣稱
     已還原。改用 scaleX(1.05) 只讓水平拉伸，不影響行高／字級；掛在
     `.txt-heading__title` 本身（非 `.txt-content` 這個 Motion target），
     transform-origin 設為左緣，讓拉伸方向與左對齊文字的視覺錨點一致。 */
  transform: scaleX(1.05);
  transform-origin: left center;
}
#page03 .txt-heading__subtitle {
  grid-area: subtitle;
  font-family: var(--font-zh-sans);
  font-weight: 400;
  font-size: calc(40 * var(--vw-base));
  line-height: 1.25;
  margin-top: calc(102.7 * var(--vw-base));
}
@media (min-width: 992px) {
  #page03 .txt-content {
    padding-left: calc(100.43 * var(--vw-base));
    padding-top: calc(264 * var(--vw-base));
  }
  #page03 .txt-heading {
    grid-template-areas: "title" "subtitle" "tagline";
  }
  #page03 .txt-heading__subtitle {
    font-size: calc(20 * var(--vw-base));
    line-height: 1.4;
    margin-top: calc(29.25 * var(--vw-base));
  }
  #page03 .txt-heading__title[lang=en] {
    font-size: calc(54.31 * var(--vw-base));
    line-height: 1.13;
    max-width: calc(730 * var(--vw-base));
    margin-top: calc(105.75 * var(--vw-base));
    /* Mobile 專屬的字元面板數值（letter-spacing／scaleX 105%）不得沿用到
       Desktop——來源截圖只涵蓋 Mobile 設定，Desktop 字級本輪未變動，
       重設回預設避免從 base 規則繼承。 */
    letter-spacing: normal;
    transform: none;
  }
}

/*
  #page04 Request Your Private Invitation
  來源：AI 原檔向量量測（source-exact 幾何）；本節所有文字皆已轉外框
  （AI 文字層完全缺席），字級／字重僅能以向量 bbox 高度＋渲染影像目視推算，
  屬 `comp-tier-approx`／`inference`，非逐位元還原，需以瀏覽器截圖與標準化
  設計稿比對校正。裁定：文字內容（page03-logo.svg 品牌標誌重複使用＋坪數
  標語＋CTA 大標＋「預展中」徽章）+ **單張圖片燈箱**（page04-img-1.jpg，
  Image Contract §8.2，非 Carousel）。
  關鍵發現：品牌標誌、坪數標語、CTA 大標、徽章這一整組內容在 Desktop／
  Mobile 兩份 Artboard 上是「完全相同的絕對尺寸與間距」（向量 bbox 逐一核
  對寬高一致），只有整組內容在版面上的位置與圖片處理方式不同——因此字級、
  行高、內部間距只寫一份 base 規則，不需要 Desktop override；只有「整組
  文案的頂部位移」與「標語到 CTA 的間距」這兩個因版面配置而變的量才需要
  Desktop override。
  版面：重用 `.layout-split`＋`.layout-desktop-reverse`（Grid 兩欄，Mobile
  自動收成單欄）。DOM 順序＝Mobile 視覺順序（文字在前、圖片在後）；
  Desktop 用既有的 `.layout-desktop-reverse`（非新案件 class）把圖片換到
  左欄、文字換到右欄，不靠 JS 或重排 DOM。文字整組改為置中對齊
  （`text-align:center`），與 page02/03 的靠左對齊不同，依向量量測結果
  （品牌標誌／標語／CTA／徽章分隔線在 Desktop 與 Mobile 皆對齊同一條置中
  基準線）裁定，非隨意選擇。
  「預展中」左右的分隔線為裝飾用途、無內容意義，依 Unified Contract
  §6.5.3 用 `::before`／`::after` 偽元素掛在既有 `.txt-heading__subtitle`
  上，不新增案件 class、不新增 HTML 節點。
*/
#page04 {
  /*
    2026-09-11 使用者視覺驗收修正（第二輪）：撤回上一輪「Desktop 圖片欄
    1236.4px」與「Mobile 用單一 margin-top 粗略推算」的錯誤做法。
    重新以 scripts/normalize_design_refs.sh 產生的標準化 Desktop 1920／
    Mobile 610 PNG 逐像素量測，證據來源標記如下：
      - `user-confirmed`：Desktop 圖片欄寬 1088、內容外側邊界 42（使用者
        直接給值，本輪逐像素核對確認精確成立：圖片可視範圍 x 42–1130、
        y 42–1037，三邊留白皆為 42px）。
      - `browser-measured`＋`design-measured` 雙欄比對：Mobile 的
        txt-heading--page／CTA／徽章／圖片這條錨點鏈，過去用「單一 margin-top
        疊加」會被每個文字節點自己的 line-height（比設計稿的墨色高度寬鬆）
        逐層放大成累積誤差，因此本輪全部改用「目標絕對位移 − 上一個節點
        實際渲染後的下緣」反推每一段 margin-top，而不是直接套用設計稿本身
        的視覺間距數字。
    Desktop／Mobile 的字級／行高共用同一份 base 規則不變（見前一輪已驗證
    的「整組內容絕對尺寸相同」結論），只有錨點所在的絕對位移與圖片欄寬度
    此次重新核定。
  */
}
#page04 .layout-split {
  --layout-columns: minmax(0, 1fr);
  /* Mobile 單欄堆疊時，.txt 實際渲染後的下緣到 .media 圖片上緣的間距：
     目標圖片上緣（設計稿量測 685）－ .txt 內容實際渲染後的下緣
     （見下方 &__subtitle margin-top 註解的推算鏈），非共用預設值，
     也非直接套用設計稿本身的墨色間距。 */
  --layout-gap-y: calc(42.17 * var(--vw-base));
  /* 覆寫共用預設的 align-items:center——文案群組的頂部位移用
     padding-top 精確控制，若欄位本身又置中，會疊加成不可預期的位置。 */
  align-items: start;
}
#page04 .txt-wrap {
  text-align: center;
  /* 整組文案頂部到 Section 頂部的距離。Mobile 93／Desktop 356，
     皆為標準化設計稿逐像素量測（design-measured），非向量 bbox 估算。 */
  padding-top: calc(93 * var(--vw-base));
}
#page04 .brand-lockup {
  display: block;
  width: calc(314.3 * var(--vw-base));
  height: auto;
  /* logo 下緣（93+68=161）到標語上緣（設計稿量測 195）的間距＝34，
     Desktop／Mobile 標準化設計稿分別量測後數值相同，共用一份即可。 */
  margin: 0 auto calc(34 * var(--vw-base));
}
#page04 .txt-body p {
  font-family: var(--font-zh-sans);
  font-weight: 500;
  font-size: calc(29 * var(--vw-base));
  line-height: 1.3;
  letter-spacing: normal;
  color: var(--color-fixed-black);
}
#page04 .txt-heading__title {
  margin: 0 auto;
  /*
    Mobile CTA 上緣目標絕對位移＝設計稿量測 494。
    推算：標語上緣(195) + 標語實際渲染高度(29px×1.3=37.7) = 232.7
    （標語只有一行，但 line-height 讓渲染框比設計稿的墨色高度 26 高，
    比設計稿多出的空間會被下面這段 margin-top 扣掉，不是照抄設計稿
    本身量到的「墨色間距」273）。
    margin-top = 494 − 232.7 = 261.3。
  */
  margin-top: calc(261.3 * var(--vw-base));
  max-width: calc(520 * var(--vw-base));
  font-family: var(--font-en-sans);
  font-weight: 600;
  font-size: calc(50 * var(--vw-base));
  line-height: 1.08;
  letter-spacing: normal;
  color: var(--color-fixed-black);
}
#page04 .txt-heading__subtitle {
  margin: 0 auto;
  /*
    Mobile 徽章上緣目標絕對位移＝設計稿量測 603。
    推算：CTA 上緣(494) + CTA 實際渲染高度(50px×1.08×2 行=108) = 602。
    margin-top = 603 − 602 ≈ 1（Desktop 同一推算鏈也剛好落在 1，
    兩斷點共用同一個值，不需要 Desktop override）。
  */
  margin-top: calc(1 * var(--vw-base));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(21 * var(--vw-base));
  font-family: var(--font-zh-sans);
  font-weight: 500;
  font-size: calc(24 * var(--vw-base));
  letter-spacing: normal;
  color: var(--color-fixed-black);
}
#page04 .txt-heading__subtitle::before, #page04 .txt-heading__subtitle::after {
  content: "";
  flex: 0 0 calc(179.6 * var(--vw-base));
  height: 1px;
  background: #000;
}
#page04 .img-wrap {
  --ratio: 610 / 486;
  /* Motion 進場（img.img-cover zoom-out）安全裁切邊界，見 page01 同段註解 */
  overflow: hidden;
}
#page04 .img-wrap img {
  -o-object-position: center;
     object-position: center;
}
@media (min-width: 992px) {
  #page04 .layout-split {
    /*
      Desktop 正式幾何（user-confirmed，2026-09-11 第二輪視覺驗收）：
      內容外側邊界 42、圖片欄寬度 1088（不是上一輪誤植的 1236.4）。
      逐像素核對標準化 desktop-1920.png：圖片可視範圍 x 42–1130、
      y 42–1037（三邊留白皆 42px，與內容外側邊界一致）。
      文字欄＝扣掉 padding-left(42) 與圖片欄(1088) 後的剩餘 1fr
      （1920−42−1088＝790，欄位本身即為 x 1130–1920，不再另外加
      padding-right——文字置中基準線＝(1130+1920)/2＝1525，與實測的
      文案群組中心 x≈1525.27 相符，不需要額外欄位留白）。
    */
    --layout-columns: calc(1088 * var(--vw-base)) minmax(0, 1fr);
    --layout-gap-x: 0;
    padding-left: calc(42 * var(--vw-base));
    /* Grid row 高度需明確等於 Section 高度（1080），否則兩欄各自的
       內容高度（文字欄 968、圖片欄 42+995=1037）都小於 1080，
       row 會自動收縮、和相鄰 Section 的邊界對不齊。 */
    min-height: calc(1080 * var(--vw-base));
  }
  #page04 .txt-wrap {
    padding-top: calc(356 * var(--vw-base));
  }
  #page04 .txt-heading__title {
    /*
      Desktop CTA 上緣目標絕對位移＝設計稿量測 819。
      推算：標語上緣(356+68+34=458) + 標語實際渲染高度(37.7) = 495.7。
      margin-top = 819 − 495.7 = 323.3（沿用同一套「目標位移減實際渲染
      下緣」推算法，非套用設計稿本身的墨色間距 334）。
    */
    margin-top: calc(323.3 * var(--vw-base));
  }
  #page04 .img-wrap {
    --ratio: 1181 / 1080;
    width: calc(1088 * var(--vw-base));
    /* 圖片本身與 Section 頂部的距離＝42，和內容外側邊界一致，
       用 margin-top 明確定位，不依賴 Grid 置中或伸展。 */
    margin-top: calc(42 * var(--vw-base));
  }
}

/*
  page05（For The Chosen Few／收藏展訊表單）
  幾何來源：AI 原檔（PyMuPDF 文字/向量 bbox，source-exact）＋標準化
  desktop-1920.png／mobile-610.png 逐像素核對（design-measured），兩者
  交叉確認一致。Mobile 內容外側邊界 18.87（兩側對稱，572.26=610-2×18.87）；
  Desktop 內容左緣 333.42、寬度 1261.29（右緣 1594.71，非對稱置中，直接採
  實測左緣值，不用 auto 置中假設）。表單欄位／Logo／按鈕／checkbox 在
  Desktop／Mobile 兩個 Artboard 上是相同的絕對向量尺寸（沿用 page04 已驗證
  的「整組內容絕對尺寸相同」寫法：同一個數值寫在 Mobile base 規則，兩個
  斷點各自的canonical 測試視窗會各自重現該字面值，不需要 Desktop override）。
  垂直間距沿用 page04 建立的「補償式反推」方法：margin-top＝目標絕對位移－
  上一節點實際渲染後的下緣，而非直接套用設計稿本身的墨色間距；初版數值
  為設計稿量測的墨色間距估算，將於瀏覽器驗證階段依實際渲染結果校正。
*/
#page05 {
  background: #E8E7E6;
  /*
    2026-09-11 第三輪修正：改用共用 canonical .container class 取代案件
    自創的 .page05-inner，重用共用 class 的責任與其他案件 Section 一致（用既有共用
    class 表達「內容置中容器」語意）；但 .container 本身的
    --container-max-width（本案 Desktop 為 vw(1600)）與 page05 實際量測
    的美術指導幾何（Desktop 1261.29／Mobile 572.26，含非對稱留白）無關，
    因此仍在 `#page05 > .container` 這個唯一、高特異度的 scope 內完整覆寫
    寬度／位移，不依賴 .container 共用預設值，也不改動 _foundation.scss。
  */
}
#page05 > .container {
  padding-inline: calc(18.87 * var(--vw-base));
}
#page05 .txt-content {
  padding-left: calc(28.46 * var(--vw-base));
  /* logo 上緣到 Section 頂部：Mobile 92.54（design-measured）。 */
  padding-top: calc(92.54 * var(--vw-base));
}
#page05 .brand-lockup {
  display: block;
  width: calc(208.42 * var(--vw-base));
  height: auto;
  /* logo 下緣到標題上緣：Mobile 25.64（design-measured）。 */
  margin: 0 0 calc(25.64 * var(--vw-base));
}
#page05 .txt-heading__title {
  margin: 0;
  font-family: var(--font-en-sans);
  font-weight: 600;
  font-size: calc(70.78 * var(--vw-base));
  line-height: 1.3;
  letter-spacing: normal;
  /* Mobile 專屬 responsive 差異值（source-exact，AI 向量文字填色）：
     Desktop 為 #000000，Mobile 為 #1A1A1A，兩者皆照實輸出，不升級 Token。 */
  color: #1A1A1A;
}
#page05 .page05-divider {
  position: relative;
  /*
    2026-09-11 第三輪修正（使用者提供 Illustrator 精確結構，取代前兩輪的
    推測）：這條分隔線在原始檔裡其實是兩層獨立責任疊在一起，不是同一個
    尺寸的兩種寫法：
      - 漸層原圖（實際圖片素材）寬 546.5952、高 7.2978（PyMuPDF 於
        Desktop／Mobile、divider 1／2 共 4 處全精度量測皆為同一組數值，
        source-exact）。
      - Illustrator 的 clipping mask（決定畫面上真正看得到的視窗）寬
        358.2884、高 7（user-confirmed，Illustrator 圖層直接讀值）。
    兩者不是互相取代：原圖比 mask 寬，只有 mask 範圍內的那一段原圖會被
    看到。用「mask 容器（358.2884 寬，flush 到分隔線容器的外側邊界）+
    背景圖以 background-size 撐到原圖真實寬度、用 background-position
    位移出正確視窗」重現，不需要額外的 DOM 節點，也不需要在外層再包一層
    overflow:hidden（mask 本身的 box 就是可視邊界，background 天生不會
    畫出自己的 box 之外）。
    mask 位移量＝flush 到分隔線容器右緣時，反推漸層原圖左緣相對於 mask
    左緣的偏移：以 Desktop 為例，容器右緣 1594.7061，mask 左緣＝
    1594.7061−358.2884＝1236.4177；漸層原圖左緣 1119.6693；偏移＝
    1119.6693−1236.4177＝−116.7484。Mobile 用同一套算法算出偏移同樣是
    −116.7484（source-exact，兩斷點絕對值相同，只在 Mobile base 定義
    一次，不需要 Desktop override）。第二條分隔線（下方）用
    transform:scaleX(-1) 鏡射整個元素重現「mask 改靠左、漸層方向反轉」，
    不重複定義。
  */
  /* 上一節點（標題）實際渲染下緣到分隔線（此處量測基準為細底線本身的
     視覺位置，而非容器頂端；容器高度改為 vw(7) 後已扣除新的半高校正）：
     Mobile 88.8（補償式反推，將於瀏覽器驗證後再校正）。
     ⚠ 2026-09-11 第四輪修正 bug：這裡原本還有 margin-left:vw(18.87)，
     與 `#page05 > .container` 自己的 padding-inline:vw(18.87) 疊加，
     把分隔線整條多推了 18.87px；container 的 padding 已經負責內縮，
     分隔線本身不需要再加一次。
     2026-09-11 第五輪使用者更正：水平置中的責任屬於 `.page05-divider`
     容器本身，不是 `::after`（見下方 `::after` 註解，該輪已撤回對
     `::after` 的置中寫法）。容器寬度 vw(572.26) 與父層
     `#page05 > .container` 扣除 padding 後的內容寬度本為同一組向量
     stroke 端點反推出的數字（見 CASE-BRIEF「Mobile 內容容器」段），
     理論上零餘裕、`margin:auto` 不會位移，但改用 `margin-left:auto;
     margin-right:auto;`（longhand，不覆蓋 margin-top）取代寫死的
     `margin-left:0`，讓容器對兩個獨立量測值之間的次像素落差有自我修正
     能力，不必依賴兩組數字永遠精確相等。 */
  margin-top: calc(88.8 * var(--vw-base));
  margin-left: auto;
  margin-right: auto;
  width: calc(572.26 * var(--vw-base));
  height: calc(7 * var(--vw-base));
}
#page05 .page05-divider::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 1px;
  background: #000;
}
#page05 .page05-divider::after {
  content: "";
  position: absolute;
  /* 2026-09-11 第五輪使用者更正：撤回第四輪把 Mobile 置中寫在 `::after`
     （`left:50%; transform:translate(-50%,-50%)`）的做法——水平置中是
     `.page05-divider` 容器本身的責任（見上方 margin 註解），`::after`
     必須維持兩層結構確立以來就沒變過的靠右 flush 定位與偏移量，不重新
     置中；Mobile／Desktop 共用同一條規則，不需要 Desktop override。 */
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: calc(358.2884 * var(--vw-base));
  height: calc(7 * var(--vw-base));
  background-image: linear-gradient(to right, #FFFEFD 0%, #FFA74E 25%, #FF981E 30%, #FF7300 55%, #CF4200 60%, #451D15 70%, #3A1D17 75%, #835B49 90%, #EAE3DF 100%);
  background-repeat: no-repeat;
  background-size: calc(546.5952 * var(--vw-base)) 100%;
  background-position: calc(-116.7484 * var(--vw-base)) 0;
}
#page05 .page05-divider--flip {
  transform: scaleX(-1);
  /* 上一節點（表單三欄，取最深者）實際渲染下緣到第二條分隔線：
     Mobile 71.5（補償式反推，將於瀏覽器驗證後再校正）。 */
  margin-top: calc(71.5 * var(--vw-base));
}
#page05 .page05-form {
  display: block;
}
#page05 .page05-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "fields" "map" "legal";
  /* 表單欄位／地圖／法律文字在 Mobile 是各自獨立量測的間距，
     不是同一個 row-gap 數值，改用各區塊自己的 margin-top（見下）。 */
}
#page05 .page05-fields,
#page05 .page05-map,
#page05 .page05-legal {
  /* Mobile 欄位／地圖／法律文字群組左緣一律內縮 74.14（design-measured），
     用 margin-left + 明確 width 定位，不用 padding-left——padding 會把
     這段內縮也算進內容寬度，導致欄位本身被壓窄成 498 而非設計稿的 424。 */
  margin-left: calc(74.14 * var(--vw-base));
  width: calc(423.98 * var(--vw-base));
}
#page05 .page05-fields {
  grid-area: fields;
  /* 分隔線下緣到欄位群組：Mobile 79.77（補償式反推）。 */
  margin-top: calc(77.28 * var(--vw-base));
}
#page05 .page05-fields > * + * {
  margin-top: calc(14.17 * var(--vw-base));
}
#page05 .page05-field-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 calc(11.65 * var(--vw-base));
}
#page05 .form-control,
#page05 .form-select {
  background: #E2E2E2;
  border: 0;
  border-radius: 0;
  color: var(--color-fixed-black);
  font-family: var(--font-zh-sans);
  font-weight: 400;
  /* Mobile 表單控制項 16px 下限（Form Contract §4.1）：設計稿本身
     Desktop／Mobile 皆為 16px，非案件自行縮小，仍需 max() 下限避免
     實際窄螢幕（如 Mobile 390）因 vw() 縮放跌破 16px 觸發 iOS 自動放大。
     欄位本身的 height／padding 也需要一起用 max() 頂住下限，否則字級
     被頂到 16px 後、欄位盒子仍繼續等比縮小，會在窄螢幕擠壓出文字被
     上下裁切的畫面（已用 Mobile 390 實測發現此問題並修正）。 */
  font-size: max(16px, calc(16 * var(--vw-base)));
  line-height: 1;
  padding-inline: max(12px, calc(16 * var(--vw-base)));
  padding-block: max(9px, calc(12 * var(--vw-base)));
  /* 用固定 height（而非 min-height）搭配同一組 max() 下限：曾經試過
     min-height，讓瀏覽器依 _foundation.scss 的 `font:inherit` reset
     帶入的行高與各控制項（尤其 select）原生最小高度自行撐開，導致
     Mobile 390 量到的高度在 43–45px 之間不等、且比設計稿的 42.5 明顯
     偏高；改回固定 height 搭配 max() 下限，字級被頂到 16px 的同時高度
     也一起被頂到 38px（實測仍足以容納 16px 文字，不會裁切），兩者維持
     同一組換算關係，不受個別控制項原生最小高度影響。 */
  height: max(38px, calc(42.5 * var(--vw-base)));
}
#page05 select.form-select[data-empty=true] {
  color: #6b6b6b;
}
#page05 input[type=email].form-control {
  font-family: var(--font-en-sans);
}
#page05 .page05-field--note textarea.form-control {
  height: max(96px, calc(116.08 * var(--vw-base)));
  resize: vertical;
}
#page05 .page05-map {
  grid-area: map;
  --ratio: 1511 / 1080;
  /* 表單欄位群組實際渲染下緣到地圖上緣：Mobile 20.69（補償式反推）。
     此值與分隔線容器加高無關（Mobile 版型中 .page05-map 的基準是
     .page05-fields 的實際下緣，不是 divider1），故不隨分隔線修正調整。 */
  margin-top: calc(20.69 * var(--vw-base));
  /* Motion 進場（img.img-cover zoom-out）安全裁切邊界，見 page01 同段註解 */
  overflow: hidden;
}
#page05 .page05-legal {
  grid-area: legal;
  /* 地圖實際渲染下緣到法律文字上緣：Mobile 47.99（補償式反推）。
     同上，基準是 .page05-map 的實際下緣，與分隔線容器加高無關。 */
  margin-top: calc(47.99 * var(--vw-base));
}
#page05 .page05-legal__notice {
  margin: 0;
  font-family: var(--font-zh-sans);
  font-weight: 300;
  font-size: calc(15 * var(--vw-base));
  line-height: 1.47;
  color: var(--color-fixed-black);
}
#page05 .page05-legal__consent {
  /* 法律文字實際渲染下緣到同意勾選：Mobile 43.31（補償式反推，依加入
     第 5 行 <br> 後的實測 notice 渲染下緣 1392.44 校正）。
     改用 flex 排列（不沿用 Starter .form-check 的 float + 負 margin
     寫法）：checkbox 與文字之間的間距 5.56 為 AI 向量量測值，float
     版型難以精確重現這麼小的間距。 */
  display: flex;
  align-items: flex-start;
  gap: calc(5.56 * var(--vw-base));
  margin-top: calc(43.31 * var(--vw-base));
  padding-inline-start: 0;
  min-height: 0;
  font-family: var(--font-zh-sans);
  font-weight: 300;
  font-size: calc(15 * var(--vw-base));
  color: var(--color-fixed-black);
}
#page05 .page05-legal__consent .form-check-input {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  float: none;
  width: calc(14.41 * var(--vw-base));
  height: calc(14.41 * var(--vw-base));
  margin: calc(2.5 * var(--vw-base)) 0 0;
  background: #C5C5C5;
  border-radius: 0;
}
#page05 .page05-legal__consent .form-check-input:checked {
  background: #000;
  accent-color: #000;
}
#page05 .page05-legal__policy-link {
  display: inline;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}
#page05 .g-recaptcha {
  /* 正式載入 Google reCAPTCHA API＋真實 site key（user-confirmed），
     實際渲染的 iframe widget 固定為 304×78（Google 原生尺寸，非本案
     vw() 版型可縮放的元素，不論斷點皆為相同的實體 px）。設計稿本身的
     223×52.24 只是壓縮版位圖，不是真正元件尺寸，不再拿來當版位保留值。
     同意勾選實際渲染下緣到 reCAPTCHA：Mobile／Desktop 皆用同一組 margin-top
     （見下方重新量測後的數值）。 */
  display: block;
  width: 304px;
  min-height: 78px;
  margin-top: calc(38.49 * var(--vw-base));
}
#page05 .page05-submit {
  text-align: center;
  /* 上一節點（第二條分隔線）下緣到按鈕：Mobile 83.61（補償式反推）。 */
  margin-top: calc(83.61 * var(--vw-base));
  padding-bottom: calc(66.66 * var(--vw-base));
}
#page05 .page05-submit__btn {
  width: calc(190.32 * var(--vw-base));
  height: calc(42.48 * var(--vw-base));
  padding: 0;
  border-radius: 0;
  font-family: var(--font-zh-sans);
  font-weight: 400;
  font-size: calc(19.78 * var(--vw-base));
}
@media (min-width: 992px) {
  #page05 > .container {
    padding-inline: 0;
    margin-left: calc(333.42 * var(--vw-base));
    width: calc(1261.29 * var(--vw-base));
  }
  #page05 .txt-content {
    padding-left: 0;
    padding-top: calc(123.54 * var(--vw-base));
    text-align: center;
  }
  #page05 .brand-lockup {
    margin: 0 auto calc(28.37 * var(--vw-base));
  }
  #page05 .txt-heading__title {
    margin-inline: auto;
    max-width: none;
    font-size: calc(110.3 * var(--vw-base));
    line-height: 1.1;
    color: var(--color-fixed-black);
  }
  #page05 .page05-divider {
    /* 標題實際渲染下緣到分隔線（已扣除容器加高的校正）：
       Desktop 47.95（補償式反推，將於瀏覽器驗證後再校正）。容器高度
       vw(7)、mask／漸層原圖尺寸與位移皆與 Mobile base 共用同一組絕對
       數值（見上，source-exact 已驗證兩斷點相同），此處只覆寫容器
       寬度與 margin-top（用 margin 的 longhand，不用簡寫，避免意外
       覆蓋掉這裡精算的 margin-top）。 */
    margin-top: calc(47.95 * var(--vw-base));
    /* Mobile base 改用 margin-left:auto／margin-right:auto 自我置中；
       Desktop 容器改成 width:100%（填滿 `#page05 > .container` 扣除
       padding 後的內容寬度，位移改由 container 自己的 margin-left 負
       責），auto margin 在零餘裕下本就會收斂為 0，這裡明確寫死 0 只是
       避免依賴這個巧合、保持與 Mobile base 相同的顯式風格。 */
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    /* `::after` 的靠右 flush 定位與偏移量已在 Mobile base 定義一次，
       Desktop 沿用同一條規則，不需要 Desktop override（見上方 Mobile
       base `::after` 註解，第五輪已撤回原本這裡的重複覆寫）；&--flip
       沿用既有 transform:scaleX(-1) 整體鏡射，鏡射後自動變成靠左。 */
  }
  #page05 .page05-divider--flip {
    /* 表單三欄（取最深者）實際渲染下緣到第二條分隔線：
       Desktop 44.75（補償式反推，將於瀏覽器驗證後再校正）。 */
    margin-top: calc(44.75 * var(--vw-base));
  }
  #page05 .page05-grid {
    grid-template-columns: calc(423.98 * var(--vw-base)) calc(472 * var(--vw-base)) calc(292.02 * var(--vw-base));
    grid-template-areas: "fields map legal";
    -moz-column-gap: calc(36.46 * var(--vw-base));
         column-gap: calc(36.46 * var(--vw-base));
    align-items: start;
  }
  #page05 .page05-fields,
  #page05 .page05-map,
  #page05 .page05-legal {
    margin-left: 0;
    width: auto;
  }
  #page05 .page05-fields {
    /* 分隔線下緣到欄位群組：Desktop 43.91（補償式反推）。 */
    margin-top: calc(41.42 * var(--vw-base));
  }
  #page05 .page05-map {
    /* 分隔線下緣到地圖：Desktop 48.77（補償式反推）。 */
    margin-top: calc(46.29 * var(--vw-base));
  }
  #page05 .page05-legal {
    /* 分隔線下緣到法律文字欄：Desktop 52.24（補償式反推）。 */
    margin-top: calc(49.76 * var(--vw-base));
  }
  #page05 .page05-legal__consent {
    /* 法律文字實際渲染下緣到同意勾選：Desktop 43.75（補償式反推）。 */
    margin-top: calc(43.75 * var(--vw-base));
  }
  #page05 .g-recaptcha {
    /* 同意勾選實際渲染下緣到 reCAPTCHA：Desktop 78.66（補償式反推，
       依實測 consent 渲染下緣 649.3 校正）。 */
    margin-top: calc(78.66 * var(--vw-base));
  }
  #page05 .page05-submit {
    /* 上一節點（第二條分隔線）下緣到按鈕：Desktop 71.89（補償式反推）。 */
    margin-top: calc(71.89 * var(--vw-base));
    padding-bottom: calc(111.54 * var(--vw-base));
  }
}/*# sourceMappingURL=style.css.map */