@charset "UTF-8";
/* ========================
  🎨 Design Tokens - Variables
======================== */
/* Theme semantic colors */
/*
  ⚠ 案件副本：品牌主色已改為佳瑞森城的金色（使用者正式確認）。
    這是 Sass compile-time 的消費路徑——`.btn-primary`、`.text-primary`、`.bg-primary`、
    `.border-primary`、`.form-control:focus`、`.form-check-input:checked`、Loader、
    vendor controls 等規則在編譯期就把顏色寫死，**只覆寫 `style.scss` 的 `:root` 無效**。
    `$color-primary` / `$color-primary-hover` 是由這兩個變數派生的 migration alias，會自動跟隨。
    ⚠ 不得把這份變更寫回 `_template_onePage`：母版維持中性 Theme 預設色。
*/
/* Libraries fixed colors：不隨 Theme 切換。 */
/* v1 migration aliases：案件檔案完成遷移前保留，不是新的正式命名。 */
/* Viewport breakpoints */
/* Font Family */
/* Section Spacing */
/*
  content-edge：內容版心與瀏覽器邊界的預設距離
  section-py：section 上下留白
  如果不需要上下 padding，可用 .section-py--mobile-0 等類別局部去除。
*/
/* Section Spacing - Mobile */
/* Section Spacing - Desktop */
/* Text Block Padding */
/* Layout Pattern */
/* 舊單值 alias；新 layout 應分別使用 X / Y。 */
/* ==========================================================================
  佳瑞森城｜個案樣式入口

  版型量測基準：docs/LAYOUT-SPEC.md
  Desktop 1920 × 8486 / Mobile 610 × 10175（`260827佳瑞森城_手機版-1.jpg`）
  兩個斷點是各自獨立的設計值，不得互相推算。
========================================================================== */
/* ==========================================================================
  1. 案件字型

  Cinzel（英文大標）、League Spartan（Hero 規格數字）、Noto Serif HK（中文標題）、
  Noto Sans HK（中文內文）全部由 index.html 的 Google Fonts 載入，皆有 Web 授權。
  本檔不自行宣告字型來源，也不做字級補償；字型一律由 Google Fonts 提供。
========================================================================== */
/* ==========================================================================
  2. 案件 Theme override

  色值讀自 AI content stream 的 scn 與 Shading 物件（見 LAYOUT-SPEC §4）。
========================================================================== */
:root {
  --project-name: "佳瑞森城";
  /*
    品牌角色（正式 Theme role，使用者已確認）。
    金色曾以 provisional accent token 暫存，本輪已升級為正式的 brand-primary 並移除暫時 alias；
    另一個與 `--color-border-primary` 完全重複的線色暫時 Token 也一併移除。
    ⚠ 同一組值也寫在案件的 `scss/_tokens.scss`，供 Sass compile-time 消費者使用
      （`.btn-primary`、`.form-control:focus`、Loader、vendor controls…）。
      兩條路徑必須同步，只改這裡不會影響已編譯的規則。
    使用規則：靜態元素（eyebrow／金框／數字／分隔裝飾）只用 --color-brand-primary，
      不產生 hover；互動元素（submit、品牌色按鈕）default 用 --color-brand-primary，
      :hover 與 :focus-visible 用 --color-brand-primary-hover；
      disabled／aria-disabled 不套用 hover。
    ⚠ 設計稿未提供 Hover 色，--color-brand-primary-hover 是以基礎色加深約 12% 的案件候選值。
  */
  --color-brand-primary: #d6a679;
  --color-brand-primary-hover: #bc926a;
  /* 介面結構角色 */
  --color-background-primary: #dbd9d6;
  --color-text-primary: #3e3a39;
  --color-border-primary: #bb9980;
  /*
    ⚠ brandSecondary: unset —— 本案沒有經設計稿確認的第二品牌色。
      不得為了填滿欄位而複製 Primary、指定深綠或邊框色。
      平台 `_root.scss` 保留完整 Secondary Schema，本案不覆寫、不使用。
    ⚠ --focus-ring-color 不在此覆寫：共用 `_root.scss` 的預設已是
      `var(--color-brand-primary)`，本案覆寫 brand-primary 後焦點色自動跟隨。
  */
  /*
    特定畫面效果（不是品牌色，也不是 Secondary）：
    深色 Section 漸層與空拍補底。Section 只消費 Token，不重複寫 hex。
  */
  --gradient-section-dark: linear-gradient(90deg, #0d241d 0%, #1a382d 100%);
  --gradient-section-dark-reverse: linear-gradient(90deg, #1a382d 0%, #0d241d 100%);
  --color-aerial-sky-top: #084b82;
  --color-aerial-sky-bottom: #0667ab;
  --gradient-aerial-sky: linear-gradient(180deg,
      var(--color-aerial-sky-top) 0%,
      var(--color-aerial-sky-bottom) 100%);
  /*
    字型角色：覆寫共用 `_root.scss` 的四個穩定角色，不建立案件專屬字型變數。
    Body、Footer、`.page-*` 與 `.font-*` 全部經由這四個角色取得字型，
    因此不需要也不得再建立第二套案件專屬的字型變數。
  */
  /*
    HK webfont 是第一順位。後面的 TC／系統字型是**跨平台 CJK fallback**：
    只留 generic `sans-serif` / `serif` 時，Windows 會先落到 Arial／Times（無 CJK），
    再由瀏覽器逐字替換，字面不可預測。實測 CJK 是全形 advance，
    補回 fallback 不影響斷行與 Section 高度。
  */
  --font-zh-sans:
    "Noto Sans HK",
    "Noto Sans TC",
    "PingFang TC",
    "Microsoft JhengHei",
    sans-serif;
  --font-zh-serif:
    "Noto Serif HK",
    "Noto Serif TC",
    "Songti TC",
    "PMingLiU",
    serif;
  --font-en-sans: "League Spartan", "Avenir Next", Arial, sans-serif;
  --font-en-serif: "Cinzel", "Times New Roman", 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 {
    --site-nav-height: calc(81 * var(--vw-base));
  }
}
/* ==========================================================================
  3. 案件 Text Style

  只承載 typography metrics（字型、字重、字級、行高、字距）。
  依 CLAUDE.md：Text Style 不得包含 padding、margin、transform、對齊或位置；
  色彩、位置、grid 與群組間距由 #pageXX 負責。
========================================================================== */
/*
  英文大標（Cinzel）。實測各 Section 的 cap 高度：
    Desktop  page02 = 34（唯一放大版）／page03–page08 = 28–29
    Mobile   全部 = 25–26
  因此拆成 display（page02）與標準 eyebrow（page03 起）兩支。
*/
/* 英文 display 大標：目前僅 page02 BRAND CONCEPT */
.text-style-display-en {
  font-family: var(--font-en-serif);
  font-weight: 400;
  font-size: calc(35 * var(--vw-base));
  line-height: 1;
  letter-spacing: calc(0.5 * var(--vw-base));
}
@media (min-width: 992px) {
  .text-style-display-en {
    font-size: calc(46.6 * var(--vw-base));
  }
}

/* 英文標準 eyebrow：page03–page08 */
.text-style-heading-en {
  font-family: var(--font-en-serif);
  font-weight: 400;
  font-size: calc(36 * var(--vw-base));
  line-height: 1;
  letter-spacing: 0;
}
@media (min-width: 992px) {
  .text-style-heading-en {
    font-size: calc(40 * var(--vw-base));
  }
}

/* 中文 Section 標題（Noto Serif HK Bold）：實測設計稿為粗襯線，與 page01 裁決一致 */
.text-style-heading-zh {
  font-family: var(--font-zh-serif);
  font-weight: 700;
  font-size: calc(28 * var(--vw-base));
  line-height: 1.6;
  letter-spacing: 0;
}
@media (min-width: 992px) {
  .text-style-heading-zh {
    font-size: calc(36 * var(--vw-base));
  }
}

/*
  ⚠ CJK 約物緊縮不是 Text Style。設計稿在 Illustrator 套了標點擠壓（約物半形），
  CSS 最接近的等價是 OpenType 的 halt；它只切換排版特性，不含字型與字級，
  已升級為共用 _typography.scss 的 .text-cjk-compact／.text-desktop-cjk-normal。
  本案 page03 內文以 base 緊縮＋Desktop 還原表達（實測同一句：Desktop 設計稿 528
  未擠壓、Mobile 設計稿 514 已擠壓）。
*/
/* 圖說：共用 .img-caption 的 vw(12)/vw(10.8) 遠小於本案設計值 */
.text-style-caption-zh {
  font-family: var(--font-zh-sans);
  font-weight: 400;
  font-size: calc(20 * var(--vw-base));
  line-height: 1.4;
}
@media (min-width: 992px) {
  .text-style-caption-zh {
    font-size: calc(21 * var(--vw-base));
  }
}

/*
  數據列（page04 起）。英文用 Cinzel、中文用 Noto Serif HK Bold。
  校準依據（設計稿 vs 渲染，Desktop）：
    中文以「字元 advance」定案——設計稿第三欄 6 字的間距為精確的 23.0 × 5，故字級 = 23。
    英文以「墨框寬度比」定案——三欄 ink 寬 47/95/124，26.7 版渲染為 49/98/129，
    比值 0.959/0.969/0.961（平均 0.963）⇒ 字級 = 26.7 × 0.963 = 25.7。
    ⚠ 不用 cap 高度反推：「A20」「2-3 ROOM」含圓形數字，overshoot 會讓墨高比 cap 大 1。
  兩個斷點是同一組絕對值，因此不需要斷點覆寫（與 .text-style-body-zh 相同）。
  只承載 typography；Grid、padding、border 與位置由 #pageXX 負責。
*/
.text-style-label-en {
  font-family: var(--font-en-serif);
  font-weight: 400;
  font-size: calc(25.7 * var(--vw-base));
  line-height: 1;
  letter-spacing: 0;
}

.text-style-label-zh {
  font-family: var(--font-zh-serif);
  font-weight: 700;
  font-size: calc(23 * var(--vw-base));
  line-height: 1;
  letter-spacing: 0;
}

/*
  條目小標與序號（page05 起）。
  校準（AP-021 多軸）：
    中文 —— 逐字 advance 在 Desktop／Mobile 的第 2、3 欄皆為精確的 28.67；
            交叉檢查墨寬（城市便利 ink 109 ＝ 3×28.67 ＋ 利 ink 23 ✓）與墨高（24.5 / 28.67 = 0.855 em ✓）。
            ⚠ 不可只取第 1 欄「自然日常」：「自」的左字身較大，會把 pitch 誤讀成 27.3。
    英數 —— 序號含「0」有 overshoot，不以 cap 高度反推。改用三軸交叉：
            (a) 01/02/03 的墨寬（設計稿 14 / 19 / 18，19 版渲染 15 / 20 / 18）；
            (b) 墨高（設計稿 13 / 13 / 14，19 版渲染 14 / 14 / 15）；
            (c) 與同字型同段 eyebrow 的墨高比（13 / 28 × 40 = 18.6）。
            三者收斂在 18.1～18.6 ⇒ 取 18.5。
            ⚠ 設計稿墨框僅 13～19px，±1px 量化誤差已達 5～7%，此殘差無法再收斂。
  兩者在兩個斷點都是同一組絕對值，不需要斷點覆寫。
*/
.text-style-subheading-zh {
  font-family: var(--font-zh-serif);
  font-weight: 700;
  font-size: calc(28.67 * var(--vw-base));
  line-height: 1;
  letter-spacing: 0;
}

.text-style-index-en {
  font-family: var(--font-en-serif);
  font-weight: 400;
  font-size: calc(18.5 * var(--vw-base));
  line-height: 1;
  letter-spacing: 0;
}

/*
  page07 方案卡與免責小字。
  ⚠ 這 5 支在兩個斷點都是各自的絕對值（不像 page04 數據列／page05 條目那樣兩斷點同值），
    因此都需要斷點覆寫。字級以 Desktop／610／390 的墨寬、墨高與字身推進多軸校準（AP-021）。
*/
/* 「早鳥首付」：Noto Serif HK Bold */
.text-style-offer-label-zh {
  font-family: var(--font-zh-serif);
  font-weight: 700;
  font-size: calc(21.7 * var(--vw-base));
  line-height: 1;
  letter-spacing: 0;
}
@media (min-width: 992px) {
  .text-style-offer-label-zh {
    font-size: calc(38.2 * var(--vw-base));
  }
}

/* 「限量早鳥付款方案」：Noto Sans HK */
.text-style-offer-note-zh {
  font-family: var(--font-zh-sans);
  font-weight: 400;
  font-size: calc(18.3 * var(--vw-base));
  line-height: 1;
  letter-spacing: 0;
}
@media (min-width: 992px) {
  .text-style-offer-note-zh {
    font-size: calc(26.4 * var(--vw-base));
  }
}

/* 數字「3」：Cinzel */
.text-style-offer-figure-en {
  font-family: var(--font-en-serif);
  font-weight: 400;
  font-size: calc(115.4 * var(--vw-base));
  line-height: 1;
  letter-spacing: 0;
}
@media (min-width: 992px) {
  .text-style-offer-figure-en {
    font-size: calc(189.5 * var(--vw-base));
  }
}

/*
  百分號「%」（Rich Text Run）。
  實測設計稿：「3」墨高 143、「%」墨高 78（比 0.545），且「%」是**頂端對齊**
  （墨頂 6477 對 6475）而非基線對齊 ——「同一數值內同時存在不同字級與不同對齊基準」，
  符合 AP-004 建立 Rich Text Run 的條件。
  本 class 只負責字級與頂端對齊補償；位移用 relative 而非 vertical-align，
  避免撐高所屬行框。字級以 em 表示，隨「3」縮放，兩個斷點共用同一組值。
*/
.text-style-offer-unit-en {
  font-size: 0.565em;
  line-height: 1;
  position: relative;
  top: -0.52em;
}

/* 免責小字：Noto Sans HK。⚠ 顏色不是純白，透明度由 #page07 以實測比值決定 */
.text-style-disclaimer-zh {
  font-family: var(--font-zh-sans);
  font-weight: 400;
  font-size: calc(12 * var(--vw-base));
  line-height: 1.6;
  letter-spacing: 0;
}
@media (min-width: 992px) {
  .text-style-disclaimer-zh {
    font-size: calc(18.3 * var(--vw-base));
  }
}

/*
  page08 案訊與表單。四支在兩個斷點都是同一組絕對值（實測 Desktop／Mobile 墨框相同），
  因此不需要斷點覆寫。字級以墨寬與字身推進多軸校準（AP-021）。
*/
/* 案訊副標「城市與綠意之間的新生活座標」：Noto Serif HK Bold */
.text-style-contact-slogan-zh {
  font-family: var(--font-zh-serif);
  font-weight: 700;
  font-size: calc(26.5 * var(--vw-base));
  line-height: 1;
  letter-spacing: 0;
}

/* 表單欄位標籤：Noto Serif HK Bold（實測「備註」墨框 Desktop／Mobile 皆為 44 寬） */
.text-style-field-label-zh {
  font-family: var(--font-zh-serif);
  font-weight: 700;
  font-size: calc(23.3 * var(--vw-base));
  line-height: 1;
  letter-spacing: 0;
}

/* 個資用途說明與同意項：Noto Serif HK Bold */
.text-style-consent-zh {
  font-family: var(--font-zh-serif);
  font-weight: 700;
  font-size: calc(14.3 * var(--vw-base));
  line-height: 1;
  letter-spacing: 0;
}

/* 送出鈕文字：Noto Serif HK */
.text-style-submit-zh {
  font-family: var(--font-zh-serif);
  font-weight: 400;
  font-size: calc(22.2 * var(--vw-base));
  line-height: 1;
  letter-spacing: 0;
}

/*
  數字區間內的全形波浪號（Rich Text Run）。
  實測：U+FF5E 在所有可用字型的字身都是 1em，font stack 與 OpenType feature
  （palt／halt／hwid）皆無法收斂，因此同一句內確實存在不同的 typography metric，
  必須以最小必要 span 承載。本 class 只負責字型、字級、行高與 baseline 校正；
  寬度與位置由所屬的區間（.hero-spec__range 等）負責。
  baseline 校正用 relative 位移而非 vertical-align，避免撐高所屬行框而推動下一行。
  字級以 em 表示，隨所屬區間縮放，兩個斷點共用同一組值。
*/
.text-style-range-wave {
  font-family: var(--font-zh-serif);
  font-size: 0.53em;
  line-height: 1;
  position: relative;
  top: -0.25em;
}

/* 中文內文（Noto Sans HK Thin）：設計稿兩個斷點為相同絕對級數，故不需斷點覆寫 */
.text-style-body-zh {
  font-family: var(--font-zh-sans);
  font-weight: 300;
  font-size: calc(21 * var(--vw-base));
  line-height: calc(36 * var(--vw-base));
  letter-spacing: calc(0.55 * var(--vw-base));
}

/* ==========================================================================
  4. Loader 交接

  一般 reveal 的起始狀態要等 site-loader:hidden 之後才由 GSAP 寫入，首屏會先
  以完整不透明度露出一瞬再跳回起點。loader.js 是在同一個 task 內先移除
  body.is-loading 再派送事件，GSAP 於同一幀寫入起點，因此用 is-loading 先壓住
  首屏即可讓交接無縫。
  安全性：GSAP／ScrollTrigger 未載入時 motion.js 直接 return，但 is-loading 已
  由 loader.js 移除，內容照樣顯示；此規則不會造成 CDN 失效時的隱藏。
========================================================================== */
body.is-loading #page01 .txt-content,
body.is-loading #page01 .layer--bg {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  body.is-loading #page01 .txt-content,
  body.is-loading #page01 .layer--bg {
    opacity: 1;
  }
}
/* ==========================================================================
  5. Site-level 元件覆寫

  Nav 與 Footer 是 Site-level Template component，不屬於任何 pageXX。
  只覆寫元件 Token，不改 DOM、幾何或共用選擇器。
========================================================================== */
/*
  Footer 底色延續 page08 的深綠漸層（同一支 Token、同為滿版、同一水平座標系），
  因此 page08 → Footer 的背景是連續的，交界無接縫（實測見 IMPLEMENTATION-LOG）。
  ⚠ 這裡覆寫的是「Footer 元件 Token」，不是品牌色：
    --color-brand-primary 仍是金色 #d6a679，送出鈕、金框、eyebrow 與 focus ring 不受影響。
*/
.site-footer--property-sales {
  --site-footer-background: var(--gradient-section-dark);
}

/*
  隱私權政策 Footer 入口（2026-09-03）：<button> 觸發 Fancybox inline content，
  視覺上做成與 .site-footer__credit-link 一致的行內文字連結，不是按鈕外觀。
*/
.site-footer__policy-link {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* ==========================================================================
  page01 — Hero
  Desktop 0–1079（1080）／Mobile 0–1080（1081）
  背景照片依斷點使用 page01-bg.jpg（Desktop）／page01-bg-m.jpg（Mobile），
  object-fit: cover + object-position: center。
========================================================================== */
#page01 {
  position: relative;
  overflow: hidden;
  height: calc(1081 * var(--vw-base));
  background-color: #4b5049; /* 圖片未載入時的安全底色，取自設計稿首屏平均色 */
  color: #fff;
}
@media (min-width: 992px) {
  #page01 {
    height: calc(1080 * var(--vw-base));
  }
}
#page01 .layer--bg {
  background: none;
}
#page01 .layer--bg img,
#page01 .layer--bg video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
#page01 .container {
  position: relative;
  z-index: 1;
  height: 100%;
}
#page01 .txt-content {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(329 * var(--vw-base));
  text-align: center;
}
@media (min-width: 992px) {
  #page01 .txt-content {
    top: calc(319 * var(--vw-base));
  }
}
#page01 .hero-logo {
  margin: 0;
  width: calc(302 * var(--vw-base));
  margin-inline: auto;
}
@media (min-width: 992px) {
  #page01 .hero-logo {
    width: calc(405 * var(--vw-base));
  }
}
#page01 .hero-logo img {
  width: 100%;
  height: auto;
}
#page01 .hero-title {
  margin: calc(96 * var(--vw-base)) 0 0;
  font-family: var(--font-zh-serif);
  font-weight: 700;
  font-size: calc(38 * var(--vw-base));
  letter-spacing: calc(1.2 * var(--vw-base));
  line-height: calc(61 * var(--vw-base));
}
@media (min-width: 992px) {
  #page01 .hero-title {
    margin-top: calc(154 * var(--vw-base));
    font-size: calc(50 * var(--vw-base));
    letter-spacing: calc(3 * var(--vw-base));
    line-height: calc(70 * var(--vw-base));
  }
}
#page01 .hero-spec {
  margin: calc(57 * var(--vw-base)) 0 0;
  font-family: var(--font-zh-serif);
  font-weight: 700;
  font-size: calc(30 * var(--vw-base));
  letter-spacing: calc(1 * var(--vw-base));
  line-height: calc(49 * var(--vw-base));
}
@media (min-width: 992px) {
  #page01 .hero-spec {
    margin-top: calc(34.5 * var(--vw-base));
    font-size: calc(42 * var(--vw-base));
    line-height: calc(60 * var(--vw-base));
  }
}
#page01 {
  /*
    數字區間：整組不斷行。本身承載整個區間的主要字型與尺寸，
    左右數字是它的直接文字節點；只有 typography metric 不同的「～」
    以 .text-style-range-wave 建立 Text Run。
  */
}
#page01 .hero-spec__range {
  white-space: nowrap;
  font-family: var(--font-en-sans);
  font-weight: 700;
  font-size: calc(46 * var(--vw-base));
  /*
    區間與「坪／房」之間的必要間距。
    改用 Text Run 後區間寬度已回到設計稿值。標籤間的空白字元落在中文字級
    （30 / 42），略寬於設計稿的間距，以 -3 微收。
    實測 ink 間距：Desktop 20／19（設計稿 19／22）、Mobile 14／14（設計稿 13／16）。
  */
  margin-right: calc(-3 * var(--vw-base));
}
@media (min-width: 992px) {
  #page01 .hero-spec__range {
    font-size: calc(64.3 * var(--vw-base));
  }
}
#page01 {
  /*
    英數字：League Spartan 700（Google Fonts，具 Web 授權）。
    設計稿英數字的大寫高度為同列中文字級的 1.071 倍；League Spartan 的
    cap-height 比例實測為 0.699，故字級取 中文字級 × 1.071 / 0.699 = 1.532。
      Mobile  30 × 1.532 = 46
      Desktop 42 × 1.532 = 64.3
  */
}
#page01 .hero-spec__key {
  font-family: var(--font-en-sans);
  font-weight: 700;
  font-size: calc(46 * var(--vw-base));
  /* 同上：`A20 興南核心` 之間的空白補足（Mobile +5、Desktop +8） */
  margin-right: calc(5 * var(--vw-base));
}
@media (min-width: 992px) {
  #page01 .hero-spec__key {
    font-size: calc(64.3 * var(--vw-base));
    margin-right: calc(8 * var(--vw-base));
  }
}
#page01 {
  /*
    全形「｜」兩側留白。
    標籤間的一個空白字元＋「｜」自身字身留白已使 ink 間距達 35 / 35（設計稿 30 / 33），
    故以 -0.05em 微收。
    ⚠ 此值為 League Spartan 版的實測結果，非沿用前一版字型時的 0.18em。
  */
}
#page01 .hero-spec__separator {
  margin-inline: -0.05em;
}

/* ==========================================================================
  page02 — BRAND CONCEPT ＋ 區位空拍
  Desktop 1080–2159（1080）／Mobile 1081–2158（1078）

  Desktop：page02-img-1.jpg 1:1 鋪滿整段。
  Mobile ：同一張圖等比縮至 0.850 → 1632 × 918，left -403、底部切齊 section 底；
           圖上方 160px 由垂直漸層補底。
           補底終點直接採用合成圖首列色 #0667ab，與圖片同色相接，
           數學上不會產生接縫或色帶（設計稿原本以羽化遮罩藏住 11 階色差）。
========================================================================== */
#page02 {
  position: relative;
  overflow: hidden;
  height: calc(1078 * var(--vw-base));
  color: #fff;
  /* 補底：起點取自設計稿逐列取樣，終點＝合成圖首列色 */
  background-color: var(--color-aerial-sky-bottom);
  background-image: var(--gradient-aerial-sky);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% calc(160 * var(--vw-base));
}
@media (min-width: 992px) {
  #page02 {
    height: calc(1080 * var(--vw-base));
    background-image: none;
  }
}
#page02 {
  /*
    共用空拍元件（scss/_aerial-map.scss + js/home.js 的 initAerialView）。
    Mobile：圖高 918 → 依原生比例得寬 1632，與設計稿量測值一致；
            元件貼齊 section 底部，上方 160 的藍色補底與文字都在元件之外，
            因此拖動地圖時補底與文字完全不動。
            初始 scrollLeft = scrollWidth × data-anchor-x% − boxW/2
                            = 1632 × 43.4% − 305 ≒ 403 ＝ 原本 left:-403 的等價位置。
    Desktop：圖寬正好等於 1920 視窗，沒有可捲範圍是正確結果；不放大圖片製造拖曳。
  */
}
#page02 .aerial-map-wrap {
  position: absolute;
  inset: auto 0 0 0;
  --aerial-h: calc(918 * var(--vw-base));
  --aerial-min-h: 0;
  /* 共用元件頂部的漸層罩本案不使用。它沒有定位也沒有 pointer-events: none，
     會疊在地圖上緣並吃掉該區域的拖曳。 */
}
#page02 .aerial-map-wrap::before {
  display: none;
}
@media (min-width: 992px) {
  #page02 .aerial-map-wrap {
    inset: 0;
  }
}
#page02 {
  /*
    光束在 .aerial-map-inner 的內容座標內，Mobile 橫向拖曳後仍與空拍圖
    保持相同相對位置。只用 transform / opacity，不觸發排版重算。
  */
}
#page02 .aerial-light-sweep {
  position: absolute;
  z-index: 2;
  top: -25%;
  bottom: auto;
  left: -42%;
  width: 34%;
  height: 150%;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(108deg, transparent 18%, rgba(214, 166, 121, 0.04) 37%, rgba(255, 255, 255, 0.24) 50%, rgba(214, 166, 121, 0.07) 63%, transparent 82%);
  mix-blend-mode: screen;
  will-change: transform, opacity;
}
#page02 .container {
  position: relative;
  z-index: 1;
  height: 100%;
  width: 100%; /* _spacing.scss 的 .container 以 width 綁定版心，需一併解除 */
  max-width: none;
  padding-inline: 0;
  /* 文字以外的區域讓事件穿透到地圖，維持整段可拖 */
  pointer-events: none;
}
#page02 .txt-content {
  position: absolute;
  pointer-events: auto;
  left: calc(45 * var(--vw-base));
  right: calc(45 * var(--vw-base));
  top: calc(79 * var(--vw-base));
  display: grid;
  gap: calc(20 * var(--vw-base));
}
@media (min-width: 992px) {
  #page02 .txt-content {
    left: calc(77 * var(--vw-base));
    right: calc(95 * var(--vw-base));
    top: calc(57 * var(--vw-base));
    gap: 0;
    grid-template-columns: 1fr auto;
    align-items: start;
  }
}
#page02 {
  /*
    文字角色：.txt-content > .txt-heading + .txt-content__body。
    typography 由 .text-style-* 提供；此處只負責位置、grid、對齊與群組間距。
  */
}
@media (min-width: 992px) {
  #page02 .txt-heading {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    margin-top: calc(13 * var(--vw-base));
  }
}
#page02 .txt-heading__eyebrow {
  margin: 0;
  color: var(--color-brand-primary);
}
@media (min-width: 992px) {
  #page02 .txt-content__body {
    grid-column: 1;
    grid-row: 1;
  }
}
#page02 .txt-content__body p {
  margin: 0;
}

/* ==========================================================================
  page03 — CONNECTED TO THE CITY（交通）
  Desktop 2160–3139（980）／Mobile 2159–3284（1126），背景純色 #dbd9d6

  布局分類：flow／responsive grid
    Desktop：媒體＋文字兩欄 Grid（.layout-split ＋ .layout-reverse-lg）
    Mobile ：文字＋媒體單欄 Flow
    葉影   ：Section 內 absolute decoration layer
  欄寬與間距雖為量測值，仍屬 Grid／Flow 的參數，不是 art-directed 自由構圖。
========================================================================== */
#page03 {
  position: relative;
  overflow: hidden;
  /* 把葉影的混色範圍限制在本 Section，不讓它與 Section 外的背景相乘 */
  isolation: isolate;
  padding-block: calc(87 * var(--vw-base)) calc(83 * var(--vw-base));
  background-color: var(--color-background-primary);
  color: var(--color-text-primary);
}
@media (min-width: 992px) {
  #page03 {
    padding-block: calc(85 * var(--vw-base));
  }
}
#page03 {
  /* 葉影：貼齊 Section 右上角。Desktop 為素材原尺寸 590×318；
     Mobile 縮至 387 寬並讓上緣溢出 29，由 Section overflow 裁切。
     素材 PNG 的半透明邊緣仍帶白，直接疊在 #dbd9d6 上會出現白邊；
     以「色彩增值 / multiply」與底色相乘，白色即等於透明。
     不使用 brightness／contrast 濾鏡：那會整張改變葉影顏色，也不保證消除白邊。 */
}
#page03 .layer--deco {
  mix-blend-mode: multiply;
  pointer-events: none;
  inset: calc(-29 * var(--vw-base)) 0 auto auto;
  width: calc(387 * var(--vw-base));
  aspect-ratio: 590/318;
  background-image: url("../images/img/page03-deco-shadow.png");
  background-size: contain;
  background-position: top right;
  z-index: 0;
}
@media (min-width: 992px) {
  #page03 .layer--deco {
    inset: 0 0 auto auto;
    width: calc(590 * var(--vw-base));
  }
}
#page03 .container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  padding-inline: calc(45 * var(--vw-base));
}
@media (min-width: 992px) {
  #page03 .container {
    max-width: calc(1720 * var(--vw-base));
    padding-inline: 0;
  }
}
#page03 .layout-split {
  align-items: start;
  --layout-gap-y: calc(57 * var(--vw-base));
}
@media (min-width: 992px) {
  #page03 .layout-split {
    --layout-columns: calc(952 * var(--vw-base)) calc(670 * var(--vw-base));
    --layout-gap-x: calc(77 * var(--vw-base));
  }
}
#page03 {
  /* Desktop 文字欄的垂直起點比媒體欄低（設計稿量測值） */
}
@media (min-width: 992px) {
  #page03 .txt-content {
    padding-top: calc(270 * var(--vw-base));
  }
}
#page03 .txt-heading__eyebrow {
  margin: 0;
  color: var(--color-brand-primary);
}
#page03 .txt-heading__title {
  margin: calc(53 * var(--vw-base)) 0 0;
}
@media (min-width: 992px) {
  #page03 .txt-heading__title {
    margin-top: calc(65 * var(--vw-base));
  }
}
#page03 {
  /*
    標題分隔線：純裝飾、依附 .txt-heading，沒有內容、互動、獨立動畫或無障礙責任，
    因此以偽元素輸出，不留空節點。兩個斷點都是各自設計基準的 215 × 2，以 vw() 表示。
    Desktop 依設計稿把線盒左緣移到文字盒左緣前 10（Mobile 兩者對齊，offset 0）。
  */
}
#page03 .txt-heading::after {
  content: "";
  display: block;
  width: calc(215 * var(--vw-base));
  height: calc(2 * var(--vw-base));
  margin-block-start: calc(31 * var(--vw-base));
  background-color: var(--color-border-primary);
}
@media (min-width: 992px) {
  #page03 .txt-heading::after {
    margin-block-start: calc(53 * var(--vw-base));
    margin-inline-start: calc(-10 * var(--vw-base));
  }
}
#page03 .txt-content__body {
  display: grid;
  gap: calc(36 * var(--vw-base));
  margin-top: calc(37 * var(--vw-base));
}
#page03 .txt-content__body p {
  margin: 0;
}
#page03 {
  /* 媒體群組：路網圖 → 兩張照片 */
}
#page03 .media {
  display: grid;
  gap: calc(6 * var(--vw-base));
}
@media (min-width: 992px) {
  #page03 .media {
    gap: calc(10 * var(--vw-base));
  }
}
#page03 .media img {
  width: 100%;
  height: auto;
}
#page03 {
  /* 兩張照片的欄寬比例在兩個斷點相同（41.63 : 57.16），間距為容器的 1.2% */
}
#page03 .layout-gallery {
  grid-template-columns: 396.4fr 544.3fr;
  -moz-column-gap: 1.2%;
       column-gap: 1.2%;
}
#page03 .img-caption {
  padding: calc(9 * var(--vw-base)) calc(16 * var(--vw-base));
}

/* ==========================================================================
  page04 — A PLACE WITH FUTURE（生活機能）
  Desktop 3140–4119（980）／Mobile 3285–4365（1081），背景純色 #dbd9d6

  布局分類：flow／responsive grid
    Desktop：文字 520 ＋ gap 53 ＋ 地圖 1146.6（＝版心 A 1720）
    Mobile ：文字單欄（版心 520）＋ 滿版地圖切齊 Section 底
    葉影   ：Section 內 absolute decoration layer（左下）
  DOM 閱讀順序＝視覺順序，兩個斷點都不需要 layout-reverse。
========================================================================== */
#page04 {
  position: relative;
  overflow: hidden;
  /* 把葉影的混色範圍限制在本 Section（同 page03） */
  isolation: isolate;
  padding-block: calc(62 * var(--vw-base)) 0; /* Mobile 地圖切齊 Section 底，故下留白為 0 */
  background-color: var(--color-background-primary);
  color: var(--color-text-primary);
}
@media (min-width: 992px) {
  #page04 {
    padding-block: calc(133 * var(--vw-base)); /* 地圖在 Section 內垂直置中：133 / 133 */
  }
}
#page04 {
  /*
    葉影：貼齊 Section 左下角，使用 page04 專屬素材（與 page03 不是同一張、也不是鏡像）。
    設計稿葉影區「比底色更亮」的像素僅 0.012%，與 page03 同級 ⇒ 同樣以色彩增值輸出。
    Desktop 為素材原尺寸 590×318 且未被裁切；Mobile 縮至 342 寬，下緣約 17 被地圖蓋住。
  */
}
#page04 .layer--deco {
  mix-blend-mode: multiply;
  pointer-events: none;
  inset: calc(533 * var(--vw-base)) auto auto 0;
  width: calc(342 * var(--vw-base));
  aspect-ratio: 590/318;
  background-image: url("../images/img/page04-deco-shadow.png");
  background-size: contain;
  background-position: left top;
  z-index: 0;
}
@media (min-width: 992px) {
  #page04 .layer--deco {
    inset: auto auto 0 0;
    width: calc(590 * var(--vw-base));
  }
}
#page04 .container {
  position: relative;
  z-index: 1;
  width: 100%; /* _spacing.scss 的 .container 以 width 綁定版心，需一併解除 */
  max-width: none;
  padding-inline: calc(45 * var(--vw-base));
}
@media (min-width: 992px) {
  #page04 .container {
    max-width: calc(1720 * var(--vw-base));
    padding-inline: 0;
  }
}
#page04 .layout-split {
  align-items: start;
  --layout-gap-y: calc(192 * var(--vw-base));
}
@media (min-width: 992px) {
  #page04 .layout-split {
    --layout-columns: calc(520 * var(--vw-base)) calc(1146.6 * var(--vw-base));
    --layout-gap-x: calc(53 * var(--vw-base));
  }
}
#page04 .txt-heading__eyebrow {
  margin: 0;
  color: var(--color-brand-primary);
}
#page04 .txt-heading__title {
  margin: calc(53 * var(--vw-base)) 0 0;
}
@media (min-width: 992px) {
  #page04 .txt-heading__title {
    margin-top: calc(65 * var(--vw-base));
  }
}
#page04 {
  /*
    標題分隔線：純裝飾偽元素（AP-018）。兩個斷點都與文字盒左緣對齊，
    ⚠ 不沿用 page03 Desktop 的 -10 instance override——那是該段的個別設計值。
  */
}
#page04 .txt-heading::after {
  content: "";
  display: block;
  width: calc(215 * var(--vw-base));
  height: calc(2 * var(--vw-base));
  margin-block-start: calc(31 * var(--vw-base));
  background-color: var(--color-border-primary);
}
@media (min-width: 992px) {
  #page04 .txt-heading::after {
    margin-block-start: calc(53 * var(--vw-base));
  }
}
#page04 {
  /* 單一段落，兩個斷點都是自然換行；設計稿未套標點擠壓，故不加 .text-cjk-compact */
}
#page04 .txt-content__body {
  margin-top: calc(37 * var(--vw-base));
}
#page04 .txt-content__body p {
  margin: 0;
}
#page04 {
  /*
    三欄數據列。HTML 已使用中性 .spec-list 結構，但樣式暫留 #page04 scope；
    等其他 Section 再次出現同型才提升為 Starter 共用元件。
  */
}
#page04 .spec-list {
  display: grid;
  grid-template-columns: repeat(3, calc(172 * var(--vw-base)));
  margin-top: calc(41 * var(--vw-base));
}
@media (min-width: 992px) {
  #page04 .spec-list {
    margin-top: calc(35 * var(--vw-base));
  }
}
#page04 {
  /*
    分隔線色＝ --color-border-primary 的 50% 使用端透明度派生，
    不建立帶 alpha 的 Color Token，也不寫死 #cbb9ab。
    設計稿的描邊置中於欄邊界，CSS border 落在欄內側；已裁決接受這 1px 差，不補負位移。
  */
}
#page04 .spec-list__item {
  display: grid;
  /* 由設計稿反推：分隔線高 94，英文墨頂距線頂 11、中文墨頂距線頂 63、中文墨底距線底 11 */
  row-gap: calc(27.2 * var(--vw-base));
  padding: calc(9.7 * var(--vw-base)) 0 calc(8.4 * var(--vw-base)) calc(16 * var(--vw-base));
  border-inline-start: calc(2 * var(--vw-base)) solid color-mix(in srgb, var(--color-border-primary) 50%, transparent);
}
#page04 .spec-list__item:last-child {
  border-inline-end: calc(2 * var(--vw-base)) solid color-mix(in srgb, var(--color-border-primary) 50%, transparent);
}
#page04 .spec-list__value {
  margin: 0;
  color: var(--color-border-primary);
}
#page04 .spec-list__label {
  margin: 0;
}
#page04 {
  /* 地圖：原生比例，不裁切、不扭曲，不需要 object-fit */
}
#page04 .media {
  /* Mobile 為滿版例外，需脫出 520 版心 */
}
@media (max-width: 991.98px) {
  #page04 .media {
    margin-inline: calc(-45 * var(--vw-base));
  }
}
#page04 .media img {
  display: block;
  width: 100%;
  height: auto;
}

/* ==========================================================================
  page05 — EVERYDAY, NATURALLY（生活主張＋公園輪播）
  Desktop 4120–5099（980）／Mobile 4366–5870（1505）

  布局分類：flow／responsive grid ＋ Swiper 元件
    Desktop：深綠面板 40.625%（780）＋ 輪播 59.375%（1140），兩欄等高
    Mobile ：面板 980 ＋ 滿版輪播 525，單欄堆疊
    裝飾層：無（面板為純漸層，逐列取樣證實無 overlay）

  背景：實測 Desktop x0 = #1a382e、x779 = #153027，正好等於反向漸層在 1920 上
        取 779/1920 的內插 ⇒ 漸層鋪滿整個 Section，面板只是「輪播沒蓋到的區域」，
        不是獨立的 780 寬色塊。

  7 張正式輪播圖與圖說已補齊；每張仍使用同一個 cover 版位與 Fancybox 群組。
========================================================================== */
#page05 {
  position: relative;
  overflow: hidden;
  color: #fff;
  background-image: var(--gradient-section-dark-reverse);
}
#page05 .container {
  width: 100%; /* _spacing.scss 的 .container 以 width 綁定版心，需一併解除 */
  max-width: none;
  padding-inline: 0;
}
#page05 .layout-split {
  align-items: stretch; /* 共用預設為 center；本段兩欄需等高 */
  --layout-gap-y: 0; /* Mobile 面板與輪播直接相接 */
}
@media (min-width: 992px) {
  #page05 .layout-split {
    /* 保存設計稿欄位比例：780 / 1140 於 1920 */
    --layout-columns: 40.625% 59.375%;
    --layout-gap-x: 0;
  }
}
#page05 {
  /* 左緣維持設計位置；右側留白縮減，讓三行指定文案有約 545 的有效寬度，
     不需用 nowrap 把文字硬撐出內容盒。 */
}
#page05 .txt-content {
  padding: calc(78 * var(--vw-base)) calc(20 * var(--vw-base)) calc(67 * var(--vw-base)) calc(45 * var(--vw-base));
}
@media (min-width: 992px) {
  #page05 .txt-content {
    padding: calc(74 * var(--vw-base)) calc(142 * var(--vw-base)) calc(67 * var(--vw-base)) calc(93 * var(--vw-base));
  }
}
#page05 .txt-heading__eyebrow {
  margin: 0;
  color: var(--color-brand-primary);
}
#page05 {
  /*
    ⚠ 設計稿大標有標點擠壓（「，」→下一字的字距 20 對正常 37），但本案 .text-style-heading-zh
      的字級（36 / 28）本來就比設計稿（37.1 / 28.8）小約 3%，兩者相抵後「不加 halt」更接近
      設計稿墨寬。依裁決 7：不加 .text-cjk-compact，以正式渲染量測驗收。
  */
}
#page05 .txt-heading__title {
  margin: calc(37 * var(--vw-base)) 0 0;
}
@media (min-width: 992px) {
  #page05 .txt-heading__title {
    margin-top: calc(26 * var(--vw-base));
  }
}
#page05 .txt-content__body {
  margin-top: calc(28 * var(--vw-base));
}
@media (min-width: 992px) {
  #page05 .txt-content__body {
    margin-top: calc(25 * var(--vw-base));
  }
}
#page05 .txt-content__body p {
  margin: 0;
}
#page05 {
  /*
    三個條目。上下兩條分隔線是 215 × 2 的獨立裝飾（不是滿寬邊框），
    以 ::before / ::after 輸出，不產生空裝飾節點（AP-018）。
    .spec-list 為 grid，偽元素會自動成為 grid item。
  */
}
#page05 .spec-list {
  display: grid;
  margin-top: calc(44 * var(--vw-base));
}
#page05 .spec-list::before, #page05 .spec-list::after {
  content: "";
  display: block;
  width: calc(215 * var(--vw-base));
  height: calc(2 * var(--vw-base));
  background-color: var(--color-border-primary);
}
#page05 .spec-list::after {
  margin-top: calc(35 * var(--vw-base));
}
#page05 .spec-list__item {
  margin-top: calc(53.6 * var(--vw-base));
}
#page05 .spec-list__item:first-child {
  margin-top: calc(49 * var(--vw-base));
}
#page05 {
  /* 序號欄寬 35（設計稿：文字盒左緣 93、小標盒左緣 128）；Mobile 序號隱藏後自動收成單欄 */
}
#page05 .spec-list__head {
  display: grid;
  align-items: start;
}
@media (min-width: 992px) {
  #page05 .spec-list__head {
    grid-template-columns: calc(35 * var(--vw-base)) 1fr;
  }
}
#page05 {
  /*
    序號與小標的墨線對齊：設計稿序號墨頂比小標墨頂低 9（4557 對 4548）。
    用 relative 位移而非 margin，避免序號的高度參與 grid row 而把條目撐高 0.8
    （條目 pitch 必須維持設計稿的 168）。
  */
}
#page05 .spec-list__index {
  margin: 0;
  top: calc(11 * var(--vw-base));
  color: var(--color-border-primary);
}
#page05 .spec-list__title {
  margin: 0;
}
#page05 .spec-list__body {
  margin: calc(13.7 * var(--vw-base)) 0 0;
}
#page05 {
  /*
    輪播。外層 .media.img-wrap 是唯一 image motion target（GSAP transform 停在這一層）；
    Swiper 自己的 transform 在內層 .swiper-wrapper，兩者不作用於同一節點。
  */
}
#page05 .media {
  min-width: 0;
}
@media (max-width: 991.98px) {
  #page05 .media {
    height: calc(525 * var(--vw-base));
  }
}
#page05 .media-slider {
  height: 100%;
  /* 設計稿：active 純白、inactive 白 50%（實測圓點 2 對草地底色反推 α ≈ 0.51） */
  --swiper-pagination-color: #fff;
  --swiper-pagination-bullet-inactive-color: #fff;
  --swiper-pagination-bullet-inactive-opacity: 0.5;
  /* 圓點直徑 10、pitch 22（兩斷點同值）；下內縮 17 */
  --swiper-pagination-bullet-size: calc(10 * var(--vw-base));
  --swiper-pagination-bullet-horizontal-gap: calc(6 * var(--vw-base));
  /* Swiper 的 pagination 容器高於圓點本身約 6.5，故 bottom 需扣掉這段：
     設計稿圓點下緣內縮 Desktop 17.6 / Mobile 15.5 ⇒ 11 / 9 */
  --swiper-pagination-bottom: calc(9 * var(--vw-base));
  /* 箭頭：Desktop 37×61、Mobile 20×29，兩斷點各自的設計值 */
  --swiper-navigation-size: calc(30 * var(--vw-base));
  --swiper-navigation-sides-offset: calc(18 * var(--vw-base));
}
@media (min-width: 992px) {
  #page05 .media-slider {
    --swiper-pagination-bottom: calc(11 * var(--vw-base));
    --swiper-navigation-size: calc(61 * var(--vw-base));
    --swiper-navigation-sides-offset: calc(34 * var(--vw-base));
  }
}
#page05 {
  /* Swiper CSS 缺件（CDN 失效）時補上高度鏈，圖片才不會塌陷成原生比例。
     Swiper 自己的 CSS 也設同值，載入正常時為無作用宣告。 */
}
#page05 .swiper-wrapper {
  height: 100%;
}
#page05 .swiper-slide {
  position: relative; /* .img-caption 是 absolute，需要各自 slide 作為定位脈絡 */
  height: 100%;
  /* Fancybox 連結插在 slide 與 img 之間，必須接上高度鏈，圖片才不會塌陷成原生比例 */
}
#page05 .swiper-slide > a {
  display: block;
  height: 100%;
}
#page05 {
  /* 7 張素材均為 3:2 或 16:9，與版面視窗（Desktop 1.163 / Mobile 1.162）比例不符，
     以 cover + center 統一裁切。 */
}
#page05 .media-slider img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
#page05 .img-caption {
  padding: calc(9 * var(--vw-base)) calc(16 * var(--vw-base));
}

/* ==========================================================================
  page06 — DESIGNED FOR LIVING（產品規劃）
  Desktop 5100–6079（980）／Mobile 5871–6850（980），背景純色 #dbd9d6

  布局分類：flow／responsive grid（與 page03 同型：媒體左、文字右）
    Desktop：照片 952.2 ＋ gap 83.8 ＋ 文字 690，專屬版心 x93–1819（1726）
    Mobile ：文字上、照片下，版心 520
    葉影   ：Section 內 absolute decoration layer（右下）

  ⚠ Desktop 照片左緣是 **93** 不是版心 A 的 100 —— AI content stream 的權威值：
      影像框 x=8 y=5185 1218×812（來源 1920×1280）
      裁切框 x=93 y=5185 952.2×810
    依裁決 1 照設計稿實作，不為了統一版心改成 100。
========================================================================== */
#page06 {
  position: relative;
  overflow: hidden;
  /* 把葉影的混色範圍限制在本 Section */
  isolation: isolate;
  padding-block: calc(82 * var(--vw-base)) calc(71 * var(--vw-base));
  background-color: var(--color-background-primary);
  color: var(--color-text-primary);
}
@media (min-width: 992px) {
  #page06 {
    padding-block: calc(85 * var(--vw-base)); /* 照片在 Section 內垂直置中：85 / 85 */
  }
}
#page06 {
  /*
    葉影：貼齊 Section 右下角，使用 page06 專屬素材（與 page03／page04 皆不同，
    對兩者的 NCC 僅 0.21 / −0.17）。
    視覺配準：Desktop NCC **0.9986**、scale 1.0000、左上角 (1329, 5761) ⇒ 原尺寸 590×318、右下切齊；
              Mobile 以兩個「純葉影」區域（照片下方帶、照片右方帶）分別配準，
              NCC **0.9892 / 0.9877** 皆得 scale **0.73** ⇒ **430.7 × 232.1**、右下切齊。
    ⚠ Mobile 未沿用 Desktop 尺寸，也未沿用其他 Section 的縮放比，是本段獨立量測值。
  */
}
#page06 .layer--deco {
  mix-blend-mode: multiply;
  pointer-events: none;
  inset: auto 0 0 auto;
  width: calc(430.7 * var(--vw-base));
  aspect-ratio: 590/318;
  background-image: url("../images/img/page06-deco-shadow.png");
  background-size: contain;
  background-position: right bottom;
  z-index: 0;
}
@media (min-width: 992px) {
  #page06 .layer--deco {
    width: calc(590 * var(--vw-base));
  }
}
#page06 .container {
  position: relative;
  z-index: 1;
  width: 100%; /* _spacing.scss 的 .container 以 width 綁定版心，需一併解除 */
  max-width: none;
  padding-inline: calc(45 * var(--vw-base));
}
@media (min-width: 992px) {
  #page06 .container {
    /* 本段專屬版心 x93–1819：左 93（AI 裁切框）、右 101（收在版心 A 的 1819） */
    padding-inline: calc(93 * var(--vw-base)) calc(101 * var(--vw-base));
  }
}
#page06 .layout-split {
  align-items: start;
  --layout-gap-y: calc(72 * var(--vw-base));
}
@media (min-width: 992px) {
  #page06 .layout-split {
    --layout-columns: calc(952.2 * var(--vw-base)) calc(690 * var(--vw-base));
    --layout-gap-x: calc(83.8 * var(--vw-base));
  }
}
#page06 {
  /* Desktop 文字欄的垂直起點比照片低（設計稿量測值） */
}
@media (min-width: 992px) {
  #page06 .txt-content {
    padding-top: calc(198 * var(--vw-base));
  }
}
#page06 .txt-heading__eyebrow {
  margin: 0;
  color: var(--color-brand-primary);
}
#page06 {
  /*
    ⚠ 設計稿大標有標點擠壓（「，」→下一字字距 17，正常 37.25），但本案
      .text-style-heading-zh 的字級（36 / 28）本來就比設計稿（37.25 / 28.7）小約 3%，
      相抵後不加 halt 更接近。依裁決 4：不加 .text-cjk-compact，以渲染量測驗收。
  */
}
#page06 .txt-heading__title {
  margin: calc(28 * var(--vw-base)) 0 0;
}
@media (min-width: 992px) {
  #page06 .txt-heading__title {
    margin-top: calc(64 * var(--vw-base));
  }
}
#page06 {
  /*
    標題分隔線（AP-018 偽元素）。Desktop 依設計稿左移 10（線盒 1119 對文字盒 1129），
    Mobile offset 0。位移掛在裝飾自身，不移動文字群組。
    ⚠ 這是 per-instance 值：page04／page05 的文字在左欄時兩斷點皆切齊。
  */
}
#page06 .txt-heading::after {
  content: "";
  display: block;
  width: calc(215 * var(--vw-base));
  height: calc(2 * var(--vw-base));
  margin-block-start: calc(56 * var(--vw-base));
  background-color: var(--color-border-primary);
}
@media (min-width: 992px) {
  #page06 .txt-heading::after {
    margin-block-start: calc(53 * var(--vw-base));
    margin-inline-start: calc(-10 * var(--vw-base));
  }
}
#page06 .txt-content__body {
  margin-top: calc(38 * var(--vw-base));
}
#page06 .txt-content__body p {
  margin: 0;
}
#page06 {
  /*
    照片。素材 1472×1080（1.363）與版面視窗（Desktop 1.1756 / Mobile 1.1765）比例不符
    ⇒ 必須由 CSS 裁切。兩斷點的可見來源區間都是 x101–1371 of 1472（純水平、左右對稱、
    垂直完整不裁）⇒ object-position: center，兩斷點共用。
  */
}
#page06 .media {
  aspect-ratio: 520/442;
}
@media (min-width: 992px) {
  #page06 .media {
    aspect-ratio: 952.2/810;
  }
}
#page06 .media {
  /* Fancybox 連結插在 .media 與 img 之間，需接上高度鏈 */
}
#page06 .media > a {
  display: block;
  height: 100%;
}
#page06 .media img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

/* ==========================================================================
  page07 — PRIVATE PREVIEW（早鳥禮遇）
  Desktop 6080–7059（980）／Mobile 6851–7830（980）

  布局分類：flow／responsive grid，**純文字段，全段沒有任何圖片素材**
    Desktop：文字 647.5 ＋ gap 0 ＋ 金框卡 812.5 ＝ 版心 B 1460（x230–1690，置中）
    Mobile ：文字（置中）在上、金框卡在下，版心 520
    裝飾層：無葉影 ⇒ **不需要 mix-blend-mode 與 isolation**

  背景：正向漸層 --gradient-section-dark（實測 x0 #0d241c → x1919 #1a382e）。
  ⚠ page07 與 page08 相鄰且共用同一支 90deg 漸層，實測交界逐列色值完全相同、無接縫——
    因為兩段都是滿版寬、同一組座標系，各自宣告 background-image 會得到一致結果。
========================================================================== */
#page07 {
  position: relative;
  overflow: hidden;
  padding-block: calc(139 * var(--vw-base)) calc(164 * var(--vw-base));
  background-image: var(--gradient-section-dark);
  color: #fff;
}
@media (min-width: 992px) {
  #page07 {
    padding-block: calc(273 * var(--vw-base));
  }
}
#page07 .container {
  width: 100%;
  max-width: none;
  padding-inline: calc(45 * var(--vw-base));
}
@media (min-width: 992px) {
  #page07 .container {
    /* 版心 B：1460 置中 ⇒ x230–1690 */
    max-width: calc(1460 * var(--vw-base));
    padding-inline: 0;
  }
}
#page07 .layout-split {
  align-items: start;
  --layout-gap-y: calc(65.5 * var(--vw-base));
}
@media (min-width: 992px) {
  #page07 .layout-split {
    --layout-columns: calc(647.5 * var(--vw-base)) calc(812.5 * var(--vw-base));
    --layout-gap-x: 0;
  }
}
#page07 {
  /* Desktop 文字欄比卡片低 30（設計稿量測值） */
}
@media (min-width: 992px) {
  #page07 .txt-content {
    padding-top: calc(30 * var(--vw-base));
  }
}
#page07 .txt-heading__eyebrow {
  margin: 0;
  color: var(--color-brand-primary);
}
#page07 .txt-heading__title {
  margin: calc(42 * var(--vw-base)) 0 0;
}
@media (min-width: 992px) {
  #page07 .txt-heading__title {
    margin-top: calc(65 * var(--vw-base));
  }
}
#page07 {
  /*
    標題分隔線（AP-018 偽元素）。兩斷點都與文字盒對齊（offset 0）——
    文字在左欄／單欄置中時皆切齊，與 page03／page06 的右欄 −10 不同。
    Mobile 文字群組置中，分隔線需一併置中。
  */
}
#page07 .txt-heading::after {
  content: "";
  display: block;
  width: calc(215 * var(--vw-base));
  height: calc(2 * var(--vw-base));
  margin: calc(56 * var(--vw-base)) auto 0;
  background-color: var(--color-border-primary);
}
@media (min-width: 992px) {
  #page07 .txt-heading::after {
    margin: calc(52 * var(--vw-base)) 0 0;
  }
}
#page07 .txt-content__body {
  margin-top: calc(38 * var(--vw-base));
}
@media (min-width: 992px) {
  #page07 .txt-content__body {
    margin-top: calc(39 * var(--vw-base));
  }
}
#page07 .txt-content__body p {
  margin: 0;
}
#page07 {
  /*
    方案卡。非圖片元件，掛既有 .txt-wrap 成為第二個 text motion target
    （不掛 .img-wrap；語意上它不是圖片）。本輪不修改共用 Motion runtime。
  */
}
#page07 .offer-card__frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(255 * var(--vw-base));
  /*
    ⚠ 兩層框線的實作限制：
    1. 設計稿細線在 390 會落到次像素（vw(1) = 0.64px），以 max() 保底 1px。
    2. Chrome 在 dpr 1 會把 border-width **無條件捨去**到整數裝置像素。
       設計稿 Mobile 外框 1.75 若照寫會被捨成 1px，與內框（1）同粗，
       失去設計稿的粗細對比；宣告 vw(2) 才會落在最接近 1.75 的 2px。
       Desktop 的 2.5 捨去為 2（誤差 0.5），宣告 3 也是誤差 0.5，故維持設計值。
  */
  border: max(1px, calc(2 * var(--vw-base))) solid var(--color-brand-primary);
}
@media (min-width: 992px) {
  #page07 .offer-card__frame {
    min-height: calc(388 * var(--vw-base));
    border-width: max(1px, calc(2.5 * var(--vw-base)));
  }
}
#page07 .offer-card__frame {
  /* 內框：純裝飾，偽元素輸出，不產生空節點（AP-018） */
}
#page07 .offer-card__frame::before {
  content: "";
  position: absolute;
  inset: calc(5.5 * var(--vw-base));
  border: max(1px, calc(1 * var(--vw-base))) solid var(--color-brand-primary);
  pointer-events: none;
}
@media (min-width: 992px) {
  #page07 .offer-card__frame::before {
    inset: calc(9 * var(--vw-base));
    border-width: max(1px, calc(1.5 * var(--vw-base)));
  }
}
#page07 .offer-card__label,
#page07 .offer-card__figure,
#page07 .offer-card__note {
  margin: 0;
}
#page07 .offer-card__figure {
  color: var(--color-brand-primary);
  /* 設計稿墨距：label→3 為 61、%→note 為 48（Mobile）／94、70（Desktop） */
  margin-inline: calc(61 * var(--vw-base)) calc(48 * var(--vw-base));
}
@media (min-width: 992px) {
  #page07 .offer-card__figure {
    margin-inline: calc(94 * var(--vw-base)) calc(70 * var(--vw-base));
  }
}
#page07 {
  /*
    免責小字：與卡片左緣對齊，**不跟著 Mobile 的置中**（.text-start 已由 utility 提供）。
    ⚠ 顏色不是純白：設計稿以 18480px 大樣本取峰值仍只有 #c8c4c5（L197），
      而同段內文（40800px、較粗筆畫）峰值為 #fffeff（L254）。
      透明度由實作後的渲染比值反推，不直接採用目測估算值。
  */
}
#page07 .offer-card__disclaimer {
  margin: calc(10.5 * var(--vw-base)) 0 0;
  /*
    實測比值法（依裁決 5）：設計稿同區峰值 L197、以 #fff 渲染同區峰值 L255、
    該區背景 L38.9 ⇒ α = (197 − 38.9) / (255 − 38.9) = 0.732。
  */
  color: rgba(255, 255, 255, 0.73);
}
@media (min-width: 992px) {
  #page07 .offer-card__disclaimer {
    margin-top: calc(17 * var(--vw-base));
  }
}

/* ==========================================================================
  page08 — PRIVATE APPOINTMENT（預約｜案訊＋表單）
  Desktop 7060–8485（1426）／Mobile 7831–10174（2344）

  布局分類：flow／responsive grid ＋ 表單元件。全段沒有圖片素材。
    Desktop：Header 置中 → 案訊 667 ＋ gap 0 ＋ 表單 655（＝版心 C 1322，x299–1620）
    Mobile ：Header（獨立內容寬）→ 案訊 → 表單，皆單欄

  ⚠ 同一 Section 內有**兩種 Mobile 內容寬**：
     Header 最長行實測 551 > 520，故 Header 自用較寬的 frame；案訊與表單維持 520 版心。

  背景：與 page07 同一支正向漸層 --gradient-section-dark，交界已驗證無接縫（AP-024）。
========================================================================== */
#page08 {
  position: relative;
  overflow: hidden;
  padding-block: calc(69 * var(--vw-base)) calc(86 * var(--vw-base));
  background-image: var(--gradient-section-dark);
  color: #fff;
}
@media (min-width: 992px) {
  #page08 {
    padding-block: calc(103 * var(--vw-base)) calc(100 * var(--vw-base));
  }
}
#page08 .container {
  width: 100%;
  max-width: none;
  /*
    Header 的 Mobile frame。最長行墨寬 551、**進位寬 560.3**（尾字「。」墨跡提早結束），
    內容寬必須以進位寬為準：610 − 22×2 = 566，留 5.7 餘裕。
    以 29 計算會得到 552 而讓該行折成兩行。
  */
  padding-inline: calc(22 * var(--vw-base));
}
@media (min-width: 992px) {
  #page08 .container {
    max-width: calc(1322 * var(--vw-base)); /* 版心 C，1920 置中 ⇒ x299–1620 */
    padding-inline: 0;
  }
}
#page08 {
  /* ── Header ───────────────────────────────────────────────────────── */
}
#page08 .txt-heading__eyebrow {
  margin: 0;
  color: var(--color-brand-primary);
}
#page08 {
  /*
    「讓理想生活 從佳瑞森城開始」的詞組間距。
    設計稿在「活→從」之間多出約 0.65–0.7em，既非全形空格（1em）也非半形空格（≈0.25em）。
    依裁決：使用一般空格作為語意分隔，由**本標題實例**的 word-spacing 校準視覺距離，
    不把這個間距寫進共用 .text-style-heading-zh。
  */
}
#page08 .txt-heading__title {
  margin: calc(59 * var(--vw-base)) 0 0;
  word-spacing: 0.58em;
}
@media (min-width: 992px) {
  #page08 .txt-heading__title {
    margin-top: calc(49 * var(--vw-base));
  }
}
#page08 .txt-content__body {
  margin-top: calc(31 * var(--vw-base));
}
@media (min-width: 992px) {
  #page08 .txt-content__body {
    margin-top: calc(27 * var(--vw-base));
  }
}
#page08 .txt-content__body p {
  margin: 0;
}
#page08 {
  /*
    分隔線 1：Header 之後，兩斷點皆顯示。裝飾以偽元素輸出，不產生空節點（AP-018）。
    ⚠ 三條線各自歸屬不同的 block，不是 Section 的絕對座標。
  */
}
#page08 .txt-content::after {
  content: "";
  display: block;
  /* ⚠ Header 在 Mobile 用的是 566 的較寬 frame，但設計稿的線 1 對齊 520 版心，
     故線寬單獨指定並置中，不跟隨 Header frame。 */
  width: calc(520 * var(--vw-base));
  max-width: 100%;
  height: max(1px, calc(1.25 * var(--vw-base)));
  margin: calc(74 * var(--vw-base)) auto 0;
  background-color: var(--color-border-primary);
}
@media (min-width: 992px) {
  #page08 .txt-content::after {
    width: 100%;
    height: max(1px, calc(1.75 * var(--vw-base)));
    margin-top: calc(76 * var(--vw-base));
  }
}
#page08 {
  /* ── 兩欄 ─────────────────────────────────────────────────────────── */
}
#page08 .layout-split {
  align-items: start;
  --layout-gap-y: 0;
  margin-top: calc(51 * var(--vw-base));
}
@media (min-width: 992px) {
  #page08 .layout-split {
    --layout-columns: calc(667 * var(--vw-base)) calc(655 * var(--vw-base));
    --layout-gap-x: 0;
    margin-top: calc(79 * var(--vw-base));
  }
}
#page08 .layout-split {
  /* 分隔線 3：收尾線，Desktop 才輸出（Mobile 設計稿底部沒有線） */
}
#page08 .layout-split::after {
  content: none;
}
@media (min-width: 992px) {
  #page08 .layout-split::after {
    content: "";
    grid-column: 1/-1;
    display: block;
    width: 100%;
    height: max(1px, calc(1.75 * var(--vw-base)));
    margin-top: calc(88 * var(--vw-base));
    background-color: var(--color-border-primary);
  }
}
#page08 {
  /*
    案訊區。Mobile 需回到 520 版心（Header 用的是 29 padding 的較寬 frame），
    以負邊距把 container 的 29 補到 45。
  */
}
#page08 .contact-info {
  margin-inline: calc(23 * var(--vw-base)); /* container 的 22 ＋ 23 ＝ 版心 45 */
}
@media (min-width: 992px) {
  #page08 .contact-info {
    margin-inline: 0;
  }
}
#page08 .contact-info {
  /* 分隔線 2：案訊之後，Mobile 才輸出（Desktop 兩欄並排，中間不需要線） */
}
#page08 .contact-info::after {
  content: "";
  display: block;
  width: 100%;
  height: max(1px, calc(1.25 * var(--vw-base)));
  margin-top: calc(60 * var(--vw-base));
  background-color: var(--color-border-primary);
}
@media (min-width: 992px) {
  #page08 .contact-info::after {
    content: none;
  }
}
#page08 .contact-info__name {
  margin: 0;
}
#page08 .contact-info__slogan {
  margin: calc(40 * var(--vw-base)) 0 0;
}
@media (min-width: 992px) {
  #page08 .contact-info__slogan {
    margin-top: calc(37 * var(--vw-base));
  }
}
#page08 {
  /* 資料列的列距 40 由 Section 負責，不寫進 Text Style（Text Style 的行高仍是 36） */
}
#page08 .contact-info__list {
  margin: calc(58 * var(--vw-base)) 0 0;
}
#page08 .contact-info__list dt,
#page08 .contact-info__list dd {
  margin: 0;
  display: inline;
}
#page08 .contact-info__list {
  /* 全形分隔符屬呈現格式，不寫進資料值 */
}
#page08 .contact-info__list dt::after {
  content: "｜";
}
#page08 .contact-info__list a {
  color: inherit;
}
#page08 .contact-info__row {
  line-height: calc(40 * var(--vw-base));
}
#page08 {
  /* 424 × 297（D）／520 × 365（M）。Desktop 的地圖不占滿 667 欄寬，需明確給寬度。
     缺 mapEmbedSrc 時仍保留待串接版位。 */
}
#page08 .contact-info__map {
  /* 共用 .map-embed 的預設高度是 clamp(…)（整幅寬版地圖）；
     本 Section 是固定比例內嵌，改由容器的 aspect-ratio 決定高度。 */
  --map-embed-height: 100%;
  margin-top: calc(51 * var(--vw-base));
  width: 100%;
  aspect-ratio: 520/365;
}
@media (min-width: 992px) {
  #page08 .contact-info__map {
    margin-top: calc(52 * var(--vw-base));
    width: calc(424 * var(--vw-base));
    aspect-ratio: 424/297;
  }
}
#page08 {
  /* ── 表單 ─────────────────────────────────────────────────────────── */
}
#page08 .contact-form {
  margin-inline: calc(23 * var(--vw-base)); /* 同上，回到 520 版心 */
  margin-top: calc(49 * var(--vw-base));
}
@media (min-width: 992px) {
  #page08 .contact-form {
    margin-inline: 0;
    margin-top: 0;
    padding-top: calc(13 * var(--vw-base)); /* 右欄 label 盒頂比左欄案名盒頂低 13（設計稿量測值） */
  }
}
#page08 .contact-form__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: calc(27.5 * var(--vw-base));
}
#page08 .contact-form__label {
  display: block;
  margin: 0 0 calc(10.7 * var(--vw-base));
  color: #fff;
}
#page08 .contact-form__required {
  margin-left: 0.2em;
  color: #ff5252;
}
#page08 {
  /*
    欄位外觀：設計稿為純白、無框、直角。
    共用 .form-control 的預設是灰框＋半透明白底，需在此覆寫。
  */
}
#page08 .form-control {
  height: calc(41 * var(--vw-base));
  padding: 0 calc(12 * var(--vw-base));
  border: 0;
  border-radius: 0;
  background: #fff;
  color: var(--color-text-primary);
  font-family: var(--font-zh-sans);
  font-size: calc(18 * var(--vw-base));
}
#page08 textarea.form-control {
  height: calc(116 * var(--vw-base));
  padding: calc(10 * var(--vw-base)) calc(12 * var(--vw-base));
  resize: vertical;
}
#page08 {
  /*
    焦點框由共用 main.scss 的 :focus-visible 規則負責，顏色走 --focus-ring-color，
    本案已在 :root 換成金色。這裡只負責關掉 _foundation.scss 的滑鼠 focus 光暈
    （$color-primary，與本案綠金色系不符）；鍵盤焦點框不受影響。
  */
}
#page08 .form-control:focus {
  border-color: transparent;
  box-shadow: none;
}
#page08 .contact-form__verify {
  display: grid;
  row-gap: calc(36 * var(--vw-base));
  margin-top: calc(53 * var(--vw-base));
}
@media (min-width: 992px) {
  #page08 .contact-form__verify {
    /* reCAPTCHA 以縮放後的實際視覺寬度佔位，把空間還給右側說明。 */
    grid-template-columns: max-content minmax(0, 1fr);
    -moz-column-gap: calc(21 * var(--vw-base));
         column-gap: calc(21 * var(--vw-base));
    row-gap: 0;
    margin-top: calc(34 * var(--vw-base));
  }
}
#page08 {
  /* Mobile 保留 Google 原尺寸；Desktop 縮到 82%，並由外層同步收縮佔位。 */
}
#page08 .contact-form__captcha {
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
}
@media (min-width: 992px) {
  #page08 .contact-form__captcha {
    width: 249.28px; /* 304 × .82 */
    height: 63.96px; /* 78 × .82 */
  }
}
#page08 .g-recaptcha {
  transform-origin: 0 0;
  transition: transform 0.2s ease;
}
@media (min-width: 992px) {
  #page08 .g-recaptcha {
    transform: scale(0.82);
  }
}
#page08 .contact-form__consent {
  color: #fff;
}
#page08 .contact-form__consent-title {
  margin: 0;
}
#page08 .contact-form__consent-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: consent;
}
#page08 .contact-form__consent-list li {
  counter-increment: consent;
  margin-top: calc(12.7 * var(--vw-base));
}
#page08 .contact-form__consent-list {
  /* 「（一）（二）（三）」是呈現格式，不寫進內容 */
}
#page08 .contact-form__consent-list li::before {
  content: "(" counter(consent, cjk-ideographic) ")";
}
#page08 .contact-form__agree {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--vw-base));
  margin-top: calc(33 * var(--vw-base));
  cursor: pointer;
}
#page08 {
  /*
    Fancybox 觸發用 <button>（無可跳轉 URL，且在表單內不得誤送出，見標籤旁註記）。
    重置按鈕外觀，做成與週遭同意文字一致的行內文字連結。
  */
}
#page08 .contact-form__policy-trigger {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}
#page08 .form-check-input {
  flex: 0 0 auto;
  width: calc(22 * var(--vw-base));
  height: calc(22 * var(--vw-base));
  margin: 0;
  float: none;
  border-radius: calc(4 * var(--vw-base));
  accent-color: var(--color-brand-primary);
}
#page08 .contact-form__submit {
  display: block;
  width: 100%;
  height: calc(41 * var(--vw-base));
  /* 設計稿實測：Mobile 同意項底 → 送出鈕頂為 69，Desktop 為 35（兩斷點不同） */
  margin-top: calc(69 * var(--vw-base));
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: var(--color-brand-primary);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
@media (min-width: 992px) {
  #page08 .contact-form__submit {
    margin-top: calc(35 * var(--vw-base));
  }
}
#page08 .contact-form__submit {
  /*
    互動元素的品牌色狀態：default 用 --color-brand-primary，
    :hover 與 :focus-visible 用 --color-brand-primary-hover。
    焦點「框」本身仍是 --focus-ring-color（= brand-primary），兩者是不同角色。
    disabled／aria-disabled 不套用 hover（本鈕在 pending-client 階段不加 disabled）。
  */
}
#page08 .contact-form__submit:hover, #page08 .contact-form__submit:focus-visible {
  background-color: var(--color-brand-primary-hover);
}

/*
  Nav 的預約錨點目標。Desktop 的 .site-nav 固定於頂部且 --site-nav-height 為 0，
  無法直接沿用該變數，故以本案實測的 Desktop nav 高度設定安全距離；
  Mobile 的 nav 固定於底部，不會遮住捲到視窗頂端的錨點，但仍保留一致的呼吸距離。
*/
#form1 {
  scroll-margin-top: calc(24 * var(--vw-base));
}
@media (min-width: 992px) {
  #form1 {
    scroll-margin-top: calc(80 * var(--vw-base));
  }
}/*# sourceMappingURL=style.css.map */