/* 寶和天母案
   版面比例以客戶設計稿（1920×1080）為準；手機版沿用同一套設計，只改成直式版型。
   動態分兩層：
   - 基本版：一般上下捲動 + 視差（沒有 JavaScript 或系統設定「減少動態」時）
   - 敘事版（html.cine）：前三幕釘在畫面上，用捲動推進轉場（升幕 → 穿過圓窗 → 表單覆蓋） */

:root {
  --serif-tc: "Noto Serif TC", "Songti TC", "PMingLiU", serif;
  --sans-tc: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --caps: "Cinzel", "Noto Serif TC", serif;
  --din: "Barlow", "Noto Sans TC", sans-serif;
  --ink: #0e1116;
  --ease: cubic-bezier(.19, .78, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --gutter: 10.25vw;      /* 設計稿左邊界 205/2000 */
  --dock-h: 0px;          /* 底部固定按鈕列的高度。目前手機也改用浮動按鈕，所以是 0；留著是為了哪天要改回一整列時版面會自動讓位 */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: #071426;
  color: #fff;
  font-family: var(--sans-tc);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; }
p, h1, h2, h3 { margin: 0; }
a { color: inherit; }

/* ───────── 版面基礎 ───────── */
.panel {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
}
.media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.media__inner {
  position: absolute; left: 0; right: 0; top: -12%; bottom: -12%;
  transform: translate3d(0, calc(var(--p, 0) * 8%), 0) scale(calc(1 + max(0, var(--p, 0) * -1) * .07));
  will-change: transform;
}
.media picture { display: contents; }
.media img { width: 100%; height: 100%; object-fit: cover; }

/* ───────── 文字進場：從遮罩後方升起 ───────── */
.w {
  display: inline-block; white-space: nowrap; overflow: hidden; vertical-align: top;
  padding: .16em .03em; margin: -.16em -.03em;
}
.ch { display: inline-block; }
.js .ch {
  transform: translate3d(0, 122%, 0);
  transition: transform 1.55s var(--ease-out);
  transition-delay: calc(var(--d, 0ms) + var(--i, 0) * 55ms);
}
.js .is-in .ch { transform: none; }

/* 內文：一行一行升起 */
.ln { display: inline-block; overflow: hidden; vertical-align: top; }
.ln__i { display: inline-block; }
.js .ln__i {
  transform: translate3d(0, 112%, 0);
  transition: transform 1.5s var(--ease-out);
  transition-delay: calc(var(--d, 0ms) + var(--li, 0) * 150ms);
}
.ln:nth-child(2) .ln__i { --li: 1; }
.js .is-in .ln__i { transform: none; }

/* 一般淡入上移 */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity 1.3s var(--ease-out), transform 1.5s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.js .is-in [data-reveal] { opacity: 1; transform: none; }

/* ───────── 01 主視覺 ───────── */
.hero { background: #0a3f8f; }
.hero .media__inner {
  inset: 0;
  transform: translate3d(0, calc(max(0, var(--p, 0)) * 16%), 0);
}
.hero .media img {
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: auto; min-height: 136%;
  object-fit: cover; object-position: 60% 100%;
  transform-origin: 60% 100%;
  transition: transform 3.2s cubic-bezier(.2, .82, .2, 1), opacity .9s ease-out;
}
/* 進場：主視覺一開始就在畫面裡，只做很小幅度的推近與淡入。
   原本是「鏡頭從高空的深藍緩緩降到人物」，但開頁的前兩秒整個畫面只有藍色和字，看起來像還沒載入完（Hanson 2026-11-11 回報），所以改掉。 */
.js .hero:not(.img-in) .media img { opacity: 0; transform: translate3d(0, 3.5%, 0) scale(1.045); }
/* 進場完成後，畫面極緩慢地呼吸 */
.hero.is-in .media { animation: breathe 18s ease-in-out 4.2s infinite alternate; }
@keyframes breathe { from { transform: scale(1); } to { transform: scale(1.035); } }

.hero__copy {
  position: absolute; left: 0; right: 0;
  top: 17.4%;
  padding: 0 4vw;
  text-align: center;
  opacity: calc(1 - max(0, var(--p, 0)) * 2.4);
  transform: translate3d(0, calc(max(0, var(--p, 0)) * -9vh), 0);
}
.hero__title {
  display: flex; justify-content: center; align-items: center;
  gap: 1.45vw;
  padding-left: 2.2vw;   /* 句號右半是空白，補回視覺置中（對齊設計稿） */
  font-weight: 500;
  white-space: nowrap;
}
.hero__en {
  font: 500 clamp(22px, 3.1vw, 80px)/1.1 var(--caps);
  letter-spacing: .05em;
  --d: 900ms;
}
.hero__zh {
  font: 500 clamp(22px, 2.72vw, 70px)/1.1 var(--serif-tc);
  letter-spacing: .03em;
  --d: 1900ms;
}
.hero__en .ch { transition-delay: calc(var(--d) + var(--i) * 62ms); }
.hero__zh .ch { transition-delay: calc(var(--d) + var(--i) * 90ms); }
.hero__rule {
  flex: none;
  width: 15.7vw; height: max(1px, .1vw);
  background: #fff;
  transform-origin: left center;
  transition: transform 1.8s var(--ease-out) 1450ms;
}
.js .hero:not(.is-in) .hero__rule { transform: scaleX(0); }
.hero__credit {
  margin-top: clamp(26px, 6.9vh, 96px);
  font: 700 clamp(12px, 1.08vw, 26px)/1 var(--sans-tc);
  letter-spacing: .1em;
  --d: 2900ms;
}
.times { display: inline-block; margin: 0 .12em; font-weight: 300; transform: scale(1.15); }

.scroll-cue {
  position: absolute; left: 50%; bottom: clamp(20px, 4vh, 44px);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  transform: translate3d(-50%, 0, 0);
  font: 400 10px/1 var(--caps); letter-spacing: .42em; text-indent: .42em;
  color: rgba(14, 17, 22, .62);
  opacity: calc(1 - max(0, var(--p, 0)) * 5);
  transition: opacity 1s var(--ease-out) 3.6s;
}
.js .hero:not(.is-in) .scroll-cue { opacity: 0; }
.scroll-cue i {
  position: relative; display: block; width: 1px; height: clamp(34px, 6vh, 60px);
  background: rgba(14, 17, 22, .2); overflow: hidden;
}
.scroll-cue i::after {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 45%;
  background: rgba(14, 17, 22, .75);
  animation: cue 2.6s cubic-bezier(.6, 0, .3, 1) infinite;
}
@keyframes cue {
  0% { transform: translateY(-110%); }
  60%, 100% { transform: translateY(240%); }
}

/* ───────── 02／03 意象場景 ───────── */
.scene { background: #06120f; }
.scene--tree .media__inner { bottom: -2%; }
.scene--tree .media img { object-position: 50% 100%; }
.scene--river .media img { object-position: 50% 78%; }

.scene__shade, .scene__dim { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.scene--tree .scene__shade {
  background: linear-gradient(90deg, rgba(3, 10, 12, .58) 0%, rgba(3, 10, 12, .26) 34%, rgba(3, 10, 12, 0) 62%);
}
.scene--river .scene__shade {
  background: linear-gradient(118deg, rgba(6, 34, 84, .5) 0%, rgba(6, 34, 84, .16) 34%, rgba(6, 34, 84, 0) 56%);
}
.scene__dim { z-index: 1; background: #04101f; opacity: 0; }

.scene__copy {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
  min-height: 100vh; min-height: 100svh;
  padding: 18.6vh var(--gutter) 17.2vh;
}
.scene__title {
  font: 700 clamp(28px, 2.72vw, 70px)/1.2 var(--serif-tc);
  letter-spacing: .01em;
}
.scene__title > span + span { margin-left: .28em; --d: 300ms; }
.scene__lead {
  margin-top: clamp(16px, 4.1vh, 54px);
  font: 300 clamp(13px, 1.22vw, 30px)/1.9 var(--sans-tc);
  letter-spacing: .27em;
  --d: 750ms;
}
.scene__line {
  flex: 1 1 auto;
  width: 1px; min-height: 90px;
  margin: clamp(20px, 4vh, 52px) 0 clamp(20px, 5.2vh, 64px) .1vw;
  background: rgba(255, 255, 255, .92);
  transform-origin: top center;
  transition: transform 2.2s var(--ease-out) 950ms;
}
.js .scene:not(.is-in) .scene__line { transform: scaleY(0); }
.scene__en {
  font: 500 clamp(11px, 1.14vw, 28px)/1 var(--caps);
  letter-spacing: .3em;
  white-space: nowrap;
  transition: opacity 2s var(--ease-out) 1500ms, letter-spacing 2.8s var(--ease-out) 1500ms;
}
.js .scene:not(.is-in) .scene__en { opacity: 0; letter-spacing: .62em; }

/* ───────── 04 聯絡我們 ───────── */
.contact { background: #7db4ea; color: var(--ink); }
.contact .media { z-index: -3; }
.grain {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  opacity: .16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.contact__inner {
  display: grid;
  grid-template-columns: 22.1vw minmax(0, 1fr);
  column-gap: 9.25vw;
  align-items: center;
  min-height: 100vh; min-height: 100svh;
  padding: 9vh 9.65vw 9vh 10.15vw;
}

.contact__title {
  font: 600 clamp(30px, 3.76vw, 96px)/1.56 var(--serif-tc);
  letter-spacing: .17em;
  margin-right: -.17em;
  white-space: nowrap;
}
.contact__title > span { display: block; }
.contact__title > span + span { --d: 360ms; }
.contact__title .ch { transition-delay: calc(var(--d, 0ms) + var(--i, 0) * 80ms); }
.contact__en {
  margin-top: clamp(22px, 5.6vh, 76px);
  font: 500 clamp(12px, 1.34vw, 34px)/1 var(--caps);
  display: flex; justify-content: space-between;
  --d: 950ms;
}
/* 逐字均分到與標語同寬（同設計稿），這一行改用淡入 */
.contact__en .w { display: contents; }
.contact__en .w + .w > .ch:first-child { margin-left: 1.1em; }
.js .contact__en .ch {
  opacity: 0; transform: translate3d(0, .7em, 0);
  transition: opacity 1.3s var(--ease-out), transform 1.5s var(--ease-out);
  transition-delay: calc(var(--d) + var(--i) * 45ms);
}
.js .is-in .contact__en .ch { opacity: 1; transform: none; }
.contact__credit {
  margin-top: clamp(18px, 4.2vh, 56px);
  padding: clamp(14px, 2.7vh, 36px) 0;
  border-top: 1px solid rgba(14, 17, 22, .8);
  border-bottom: 1px solid rgba(14, 17, 22, .8);
  text-align: center;
  font: 700 clamp(17px, 2.02vw, 52px)/1.55 var(--sans-tc);
  letter-spacing: .02em;
  white-space: nowrap;
  --d: 1250ms;
}
.contact__credit .times { margin: 0 .02em; transform: scale(1.05); }

.contact__head { text-align: center; color: #fff; }
.contact__eyebrow {
  font: 400 clamp(15px, 1.78vw, 44px)/1 var(--din);
  letter-spacing: .58em; margin-right: -.58em;
}
.contact__heading {
  margin-top: clamp(10px, 2.2vh, 28px);
  font: 700 clamp(20px, 2.08vw, 52px)/1 var(--serif-tc);
  letter-spacing: .04em;
}

.form { margin-top: clamp(18px, 4vh, 48px); }
.field { position: relative; }
.field + .field, .field + .field-row, .consent { margin-top: clamp(12px, 2.6vh, 30px); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 2.8vw; }
.form .field-row > .field + .field { margin-top: 0; }
.field__top { display: flex; align-items: center; gap: 2.1vw; }
.field__label, .radio {
  font: 400 clamp(13px, 1.02vw, 26px)/1.4 var(--sans-tc);
  color: #262c36;
}
.field__label { display: block; margin-bottom: .5em; }
.radios { display: flex; gap: 1.1em; margin-bottom: .5em; }
.radio { display: inline-flex; align-items: center; gap: .3em; cursor: pointer; }
.radio input, .check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.radio span {
  width: 1em; height: 1em; border-radius: 50%;
  background: #fff; border: .16em solid #fff;
  transition: border-color .25s, box-shadow .25s;
}
.radio input:checked + span { border-color: #6b3410; box-shadow: inset 0 0 0 .12em #fff, inset 0 0 0 1em #6b3410; }
.radio input:focus-visible + span, .check input:focus-visible + span { outline: 2px solid #0e1116; outline-offset: 2px; }

.input {
  display: block; width: 100%;
  height: clamp(40px, 4.55vh + .35vw, 64px);
  padding: 0 1em;
  border: 0; border-radius: 0;
  background: rgba(255, 255, 255, .46);
  color: var(--ink);
  font: 400 clamp(15px, 1.05vw, 24px)/1 var(--sans-tc);
  letter-spacing: .06em;
  outline: 1px solid transparent;
  transition: background .3s, outline-color .3s;
  -webkit-appearance: none; appearance: none;
}
.input:hover { background: rgba(255, 255, 255, .56); }
.input:focus { background: rgba(255, 255, 255, .78); outline-color: rgba(255, 255, 255, .95); }
.input[aria-invalid="true"] { outline-color: #a5281b; background: rgba(255, 255, 255, .7); }
.input--select {
  padding-right: 2.4em; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23262c36' stroke-width='1.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1em center; background-size: .75em;
}
.input--select:disabled { cursor: not-allowed; color: rgba(14, 17, 22, .5); }
.field__error {
  margin-top: .3em;
  font: 500 clamp(12px, .82vw, 18px)/1.4 var(--sans-tc);
  color: #8f1d12;
}
.field__error:empty { display: none; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.consent {
  font: 400 clamp(12.5px, 1.02vw, 26px)/1.9 var(--sans-tc);
  color: #333a45;
}
.check { display: inline-flex; align-items: center; gap: .5em; margin-top: .15em; cursor: pointer; color: #262c36; }
.check span {
  flex: none; width: 1.05em; height: 1.05em; background: #fff;
  background-repeat: no-repeat; background-position: center; background-size: 78%;
}
.check input:checked + span {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.2l3.4 3.4L11 1.4' fill='none' stroke='%236b3410' stroke-width='1.8'/%3E%3C/svg%3E");
}
.check a { text-underline-offset: .22em; text-decoration-thickness: 1px; }

.form__actions { margin-top: clamp(14px, 2.8vh, 32px); display: flex; align-items: center; gap: 1.6vw; }
.btn {
  position: relative; overflow: hidden;
  flex: none;
  min-width: clamp(150px, 12.5vw, 300px);
  height: clamp(44px, 4.55vh + .35vw, 64px);
  padding: 0 2em;
  border: 1px solid var(--ink); border-radius: 0;
  background: var(--ink); color: #fff;
  font: 500 clamp(14px, 1.05vw, 24px)/1 var(--sans-tc);
  letter-spacing: .5em; text-indent: .5em;
  cursor: pointer;
  transition: color .5s var(--ease-out);
}
.btn::before {
  content: ""; position: absolute; inset: 0; background: #fff;
  transform: translate3d(0, 101%, 0); transition: transform .65s var(--ease-out);
}
.btn span { position: relative; }
.btn:hover, .btn:focus-visible { color: var(--ink); }
.btn:hover::before, .btn:focus-visible::before { transform: none; }
.btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.btn[disabled] { opacity: .55; cursor: progress; }
.form__note { font: 400 clamp(11px, .8vw, 18px)/1.5 var(--sans-tc); color: rgba(14, 17, 22, .62); }

.form-done {
  margin-top: clamp(18px, 4vh, 48px);
  padding: clamp(22px, 4vh, 48px) clamp(20px, 2.4vw, 48px);
  background: rgba(255, 255, 255, .5);
  font: 400 clamp(14px, 1.05vw, 24px)/1.9 var(--sans-tc);
  color: var(--ink);
  outline: none;
}
.form-done strong { display: block; margin-bottom: .4em; font: 600 1.35em/1.4 var(--serif-tc); letter-spacing: .08em; }
.form-done small { display: block; margin-top: .8em; font-size: .8em; color: rgba(14, 17, 22, .66); word-break: break-all; }

/* 表單欄位依序浮現 */
.contact__form .field:nth-of-type(1) { --d: 150ms; }
.contact__form .field:nth-of-type(2) { --d: 270ms; }
.contact__form .field-row { --d: 390ms; }
.contact__form .consent { --d: 520ms; }
.contact__form .form__actions { --d: 660ms; }

/* ───────── 敘事版：前三幕釘住，用捲動推進 ───────── */
.cine .stage-wrap { position: relative; height: 480vh; height: 480lvh; }
.cine .stage { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; background: #071426; }
.cine .stage > .panel { position: absolute; inset: 0; min-height: 0; }
.cine .stage .media__inner { inset: 0; transform: none; }
.cine .hero { z-index: 1; }
.cine .hero__copy { opacity: 1; transform: none; will-change: opacity, transform; }
.cine .scroll-cue { opacity: 1; }
.cine .scene--tree { z-index: 2; clip-path: inset(100% 0 0 0); }
.cine .scene--river { z-index: 3; visibility: hidden; }
.cine .scene__copy { will-change: opacity, transform; }
.cine .contact {
  z-index: 5;
  margin-top: -100vh; margin-top: -100lvh;
  box-shadow: 0 -40px 90px rgba(4, 16, 36, .38);
}

/* 章節指示（電腦版左側） */
.chapters {
  position: fixed; z-index: 15; left: clamp(18px, 2.6vw, 56px); top: 50%;
  display: none; flex-direction: column; align-items: center; gap: 14px;
  transform: translate3d(0, -50%, 0);
  font: 400 11px/1 var(--caps); letter-spacing: .2em;
  color: #fff;
  transition: color .8s var(--ease-out), opacity 1s var(--ease-out) 3.4s;
}
.cine .chapters { display: flex; }
.js:not(.intro-done) .chapters { opacity: 0; }
.chapters.is-dark { color: var(--ink); }
.chapters__bar { position: relative; width: 1px; height: clamp(70px, 14vh, 150px); }
.chapters__bar::before { content: ""; position: absolute; inset: 0; background: currentColor; opacity: .28; }
.chapters__fill {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  background: currentColor; transform-origin: top center; transform: scaleY(0);
}
.chapters__total { opacity: .55; }

/* ───────── 浮動聯絡按鈕 ───────── */
.dock {
  position: fixed; z-index: 20;
  right: clamp(14px, 1.9vw, 40px); top: 50%;
  display: flex; flex-direction: column; gap: 12px;
  transform: translate3d(0, -50%, 0);
  transition: opacity 1.2s var(--ease-out) 3.3s, transform 1.4s var(--ease-out) 3.3s;
}
.js:not(.intro-done) .dock { opacity: 0; transform: translate3d(24px, -50%, 0); }
.dock__btn {
  position: relative;
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  color: #fff; text-decoration: none;
  background: rgba(14, 30, 52, .3);
  border: 1px solid rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
  box-shadow: 0 6px 22px rgba(4, 16, 36, .18);
  transition: background .4s var(--ease-out), color .4s var(--ease-out), transform .5s var(--ease-out);
}
.dock__btn svg { width: 22px; height: 22px; }
.dock__btn:hover, .dock__btn:focus-visible { background: #fff; color: var(--ink); transform: scale(1.06); outline: none; }
.dock__btn--primary { background: rgba(255, 255, 255, .94); color: var(--ink); }
.dock__btn--primary:hover, .dock__btn--primary:focus-visible { background: var(--ink); color: #fff; }
.dock__label {
  position: absolute; right: calc(100% + 12px); top: 50%;
  padding: .5em .9em;
  background: rgba(14, 17, 22, .86); color: #fff;
  font: 400 13px/1 var(--sans-tc); letter-spacing: .14em; white-space: nowrap;
  opacity: 0; transform: translate3d(8px, -50%, 0); pointer-events: none;
  transition: opacity .3s, transform .45s var(--ease-out);
}
.dock__btn:hover .dock__label, .dock__btn:focus-visible .dock__label { opacity: 1; transform: translate3d(0, -50%, 0); }

.toast {
  position: fixed; z-index: 60; left: 50%; bottom: calc(var(--dock-h) + 28px);
  max-width: min(88vw, 520px);
  padding: .85em 1.4em;
  background: rgba(14, 17, 22, .9); color: #fff;
  font: 400 14px/1.6 var(--sans-tc); letter-spacing: .06em; text-align: center;
  opacity: 0; transform: translate3d(-50%, 12px, 0); pointer-events: none;
  transition: opacity .35s, transform .5s var(--ease-out);
}
.toast.is-on { opacity: 1; transform: translate3d(-50%, 0, 0); }

/* ───────── 後台預覽標示、人機驗證 ───────── */
.preview-flag {
  position: fixed; z-index: 70; left: 50%; top: 14px;
  padding: .6em 1.3em;
  background: #b4530f; color: #fff;
  font: 500 13px/1.4 var(--sans-tc); letter-spacing: .12em; white-space: nowrap;
  transform: translate3d(-50%, 0, 0); pointer-events: none;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .3);
}
.turnstile { margin-top: clamp(12px, 2.4vh, 26px); }
.turnstile:empty { margin-top: 0; }

/* ───────── 隱私權政策視窗 ───────── */
.modal {
  width: min(92vw, 760px); max-height: min(86vh, 860px);
  padding: 0; border: 0;
  background: #f6f4ef; color: #1c2027;
  box-shadow: 0 40px 120px rgba(2, 10, 24, .5);
  overflow: hidden;
}
.modal[open] { display: flex; flex-direction: column; animation: modal-in .7s var(--ease-out); }
.modal::backdrop { background: rgba(4, 14, 30, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@keyframes modal-in { from { opacity: 0; transform: translate3d(0, 28px, 0); } }
.modal__head {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 26px clamp(22px, 4vw, 44px) 20px;
  border-bottom: 1px solid rgba(28, 32, 39, .14);
}
.modal__title { font: 600 clamp(20px, 2.2vw, 26px)/1.3 var(--serif-tc); letter-spacing: .12em; }
.modal__close {
  flex: none; width: 40px; height: 40px; border: 1px solid rgba(28, 32, 39, .3); border-radius: 50%;
  background: none; color: inherit; font: 300 22px/1 var(--sans-tc); cursor: pointer;
  transition: background .3s, color .3s;
}
.modal__close:hover, .modal__close:focus-visible { background: #1c2027; color: #f6f4ef; outline: none; }
.modal__body {
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 22px clamp(22px, 4vw, 44px) 36px;
  font: 400 15px/1.95 var(--sans-tc); letter-spacing: .03em;
}
.modal__body h3 { margin: 1.7em 0 .5em; font: 600 16px/1.5 var(--serif-tc); letter-spacing: .08em; }
.modal__body p + p { margin-top: .7em; }
.modal__body ul { margin: .4em 0 0; padding-left: 1.3em; }
.modal__body li + li { margin-top: .25em; }
.modal__meta { margin-top: 2em; font-size: 13px; color: rgba(28, 32, 39, .6); }
.modal mark { background: #f3e2a8; padding: 0 .25em; }

/* ───────── 直式／手機 ───────── */
@media (max-aspect-ratio: 1/1) {
  .hero .media img { object-position: 61% 100%; transform-origin: 61% 100%; }
  .hero__copy { top: 13.5%; padding: 0 6vw; }
  .cine .hero__copy { top: 13.5svh; }
  .hero__title { flex-direction: column; gap: clamp(16px, 2.6vh, 30px); padding-left: 0; }
  .hero__en { font-size: clamp(24px, 7.5vw, 60px); letter-spacing: .08em; margin-right: -.08em; }
  .hero__zh { font-size: clamp(23px, 7vw, 56px); letter-spacing: .1em; margin-right: -.6em; }
  .hero__rule { width: 1px; height: clamp(36px, 6vh, 64px); transform-origin: center top; }
  .js .hero:not(.is-in) .hero__rule { transform: scaleY(0); }
  .hero__credit { margin-top: clamp(22px, 3.6vh, 44px); font-size: clamp(12px, 3.5vw, 26px); letter-spacing: .14em; }
  .scroll-cue { display: none; }

  .scene--tree .media img { object-position: 54% 100%; }
  .scene--river .media img { object-position: 30% 100%; }
  .scene--tree .scene__shade {
    background: linear-gradient(180deg, rgba(3, 10, 12, .62) 0%, rgba(3, 10, 12, .28) 36%, rgba(3, 10, 12, 0) 60%, rgba(3, 10, 12, .34) 100%);
  }
  .scene--river .scene__shade {
    background: linear-gradient(180deg, rgba(6, 34, 84, .46) 0%, rgba(6, 34, 84, .12) 38%, rgba(6, 34, 84, 0) 58%, rgba(4, 22, 20, .36) 100%);
  }
  .scene__copy { padding: 13.5vh 8.5vw calc(var(--dock-h) + 7.5vh); }
  .scene__title { font-size: clamp(30px, 9.2vw, 72px); line-height: 1.34; letter-spacing: .06em; }
  .scene__title > span { display: block; }
  .scene__title > span + span { margin-left: 0; }
  .scene__lead { margin-top: clamp(18px, 3.2vh, 40px); font-size: clamp(13.5px, 3.75vw, 28px); line-height: 2.05; letter-spacing: .16em; }
  .ln { display: block; }
  .scene__line { margin: clamp(22px, 3.6vh, 48px) 0 clamp(20px, 3.2vh, 44px) 1px; }
  .scene__en { font-size: clamp(11px, 3.1vw, 24px); letter-spacing: .26em; }
  .js .scene:not(.is-in) .scene__en { letter-spacing: .5em; }

  .contact__inner {
    display: block;
    padding: 12vh 8.5vw calc(var(--dock-h) + 9vh);
  }
  .contact__statement { width: max-content; max-width: 100%; margin: 0 auto; }
  .contact__title { font-size: clamp(34px, 10.4vw, 84px); line-height: 1.5; }
  .contact__en { margin-top: clamp(20px, 3.4vh, 40px); font-size: clamp(12px, 3.5vw, 28px); }
  .contact__credit { margin-top: clamp(18px, 3vh, 36px); padding: clamp(14px, 2.2vh, 28px) 0; font-size: clamp(17px, 5.3vw, 42px); }
  .contact__form { margin-top: clamp(56px, 9vh, 110px); }
  .contact__eyebrow { font-size: clamp(17px, 5vw, 40px); }
  .contact__heading { font-size: clamp(22px, 6.2vw, 48px); margin-top: 14px; }
  .form { margin-top: 30px; }
  .field + .field, .field + .field-row, .consent { margin-top: 20px; }
  .field-row { gap: 4vw; }
  .field__top { gap: 5vw; }
  .field__label, .radio { font-size: clamp(14px, 3.75vw, 26px); }
  .input { height: 50px; font-size: 16px; }   /* 16px：避免 iOS 聚焦時自動放大畫面 */
  .field__error { font-size: 13px; }
  .consent { font-size: clamp(13px, 3.5vw, 24px); line-height: 1.95; }
  .form__actions { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 24px; }
  .btn { width: 100%; height: 54px; font-size: 16px; }
  .form__note { font-size: 12px; text-align: center; }
  .form-done { font-size: 15px; }
}

/* 窄螢幕：按鈕一樣是浮動的圓形按鈕，縮小一點、靠右下角（Hanson 2026-11-11：不要固定在底部的一整列） */
@media (max-width: 760px) {
  .cine .chapters { display: none; }
  .dock {
    right: 12px; top: auto; bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    gap: 10px; transform: none;
  }
  .js:not(.intro-done) .dock { opacity: 0; transform: translate3d(20px, 0, 0); }
  .intro-done .dock { transition: opacity .5s var(--ease-out), transform .6s var(--ease-out); }
  /* 捲到預約表單時先讓開，不要蓋住輸入欄位 */
  .dock.is-away { opacity: 0; transform: translate3d(20px, 0, 0); pointer-events: none; }
  .dock__btn { width: 46px; height: 46px; background: rgba(14, 30, 52, .56); }
  .dock__btn svg { width: 20px; height: 20px; }
  .dock__btn:hover, .dock__btn:focus-visible { background: rgba(14, 30, 52, .56); color: #fff; transform: none; }
  .dock__btn:active { transform: scale(.93); }
  .dock__btn--primary, .dock__btn--primary:hover, .dock__btn--primary:focus-visible { background: rgba(255, 255, 255, .95); color: var(--ink); }
  .dock__label { display: none; } /* 觸控沒有滑鼠停留；按鈕名稱另外寫在 aria-label 給螢幕朗讀 */

  /* 敘事版：主視覺以「網址列顯示時」的可視高度為準，人物才不會被切到 */
  .cine .hero .media { bottom: auto; height: 100svh; }
  .cine .hero.img-in { background: linear-gradient(180deg, #0a3f8f 0%, #0a3f8f 50%, #e3e8ef 50%); }
}

/* 尊重「減少動態」的系統設定（此時不會啟用敘事版） */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .ch, .js .ln__i, .js [data-reveal], .hero .media img, .hero__rule, .scene__line, .scene__en, .dock, .chapters, .scroll-cue {
    transition: none !important; opacity: 1 !important; transform: none !important;
  }
  .js .scene:not(.is-in) .scene__en { letter-spacing: .3em; }
  .media__inner, .hero .media__inner, .hero__copy { transform: none !important; opacity: 1 !important; }
  .hero.is-in .media, .scroll-cue i::after, .modal[open] { animation: none; }
}

/* 觸控裝置：不把文字區塊另外升成獨立圖層。
   App 內建瀏覽器（例如 LINE）的繪圖記憶體有限，全螢幕圖層一多，就可能有區塊來不及重畫而留下前一幕的殘影。 */
@media (pointer: coarse) {
  .cine .hero__copy, .cine .scene__copy { will-change: auto; }
}

/* ───────── 05 接待中心位置（自製地圖）＋頁尾 ───────── */
.place {
  position: relative; z-index: 5;
  display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.6fr); align-items: center; column-gap: 4vw;
  padding: clamp(72px, 13vh, 170px) 0 clamp(56px, 9vh, 120px) var(--gutter);
  background: #071426; color: #fff; overflow: hidden;
}
.place__en { font: 500 clamp(11px, .9vw, 20px)/1 var(--caps); letter-spacing: .42em; color: rgba(255, 255, 255, .62); }
.place__title { margin-top: clamp(18px, 3vh, 40px); font: 600 clamp(30px, 3.1vw, 80px)/1.4 var(--serif-tc); letter-spacing: .2em; }
.place__rule { display: block; width: clamp(40px, 4vw, 90px); height: 1px; margin: clamp(22px, 4vh, 52px) 0; background: rgba(255, 255, 255, .5); transform-origin: left center; }
.place__addr { font: normal 400 clamp(15px, 1.2vw, 28px)/1.9 var(--sans-tc); letter-spacing: .14em; }
.place__tel { margin-top: .5em; font: 400 clamp(20px, 1.7vw, 40px)/1.4 var(--din); letter-spacing: .12em; }
.place__tel a { text-decoration: none; }
.place__go {
  display: inline-flex; align-items: center; gap: .9em;
  margin-top: clamp(26px, 5vh, 64px); padding: 1.05em 1.9em;
  border: 1px solid rgba(255, 255, 255, .7);
  font: 400 clamp(13px, 1vw, 22px)/1 var(--sans-tc); letter-spacing: .22em; text-decoration: none;
  transition: background-color .5s var(--ease-out), color .5s var(--ease-out);
}
.place__go:hover, .place__go:focus-visible { background: #fff; color: var(--ink); outline: none; }
.place__go svg { width: 1em; height: 1em; }

.map { position: relative; min-width: 0; }
.map__canvas {
  position: relative; aspect-ratio: 4 / 3;
  -webkit-mask-image: radial-gradient(ellipse 74% 74% at 50% 50%, #000 50%, transparent 100%);
  mask-image: radial-gradient(ellipse 74% 74% at 50% 50%, #000 50%, transparent 100%);
}
.map__img { position: absolute; inset: 0; width: 100%; height: 100%; }
.map__label {
  position: absolute; transform: translate(-50%, -50%) rotate(var(--r, 0deg));
  white-space: nowrap; pointer-events: none;
  font: 400 clamp(9px, .76vw, 17px)/1 var(--sans-tc); letter-spacing: .2em;
  color: rgba(255, 255, 255, .58);
  text-shadow: 0 0 5px #071426, 0 0 5px #071426, 0 0 3px #071426;
}
.map__label--main { color: #fff; font-size: clamp(10px, .9vw, 20px); letter-spacing: .32em; }
.map__label--water { color: #8fc4f1; font-family: var(--serif-tc); letter-spacing: .5em; }
.map__label--poi { transform: translate(-3px, -50%); display: inline-flex; align-items: center; gap: .7em; color: rgba(255, 255, 255, .84); letter-spacing: .14em; }
.map__label--poi i { flex: none; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.map__pin { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.map__pin i { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgba(255, 255, 255, .2); }
.map__pin i::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .75); animation: pin 2.8s var(--ease-out) infinite; }
@keyframes pin {
  0% { transform: scale(.6); opacity: .9; }
  100% { transform: scale(3.6); opacity: 0; }
}
.map__pin b {
  position: absolute; left: 0; bottom: 24px; transform: translateX(-50%);
  padding: .8em 1.25em .8em 1.5em; background: #fff; color: var(--ink); white-space: nowrap;
  font: 600 clamp(12px, 1vw, 22px)/1 var(--serif-tc); letter-spacing: .25em;
}
.map__pin b::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 14px; background: #fff; }
.map__credit { position: absolute; right: clamp(14px, 3vw, 60px); bottom: 0; font: 400 10px/1 var(--sans-tc); letter-spacing: .1em; color: rgba(255, 255, 255, .38); }

.js .place .place__info > * { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity 1.2s var(--ease-out), transform 1.4s var(--ease-out); }
.js .place .place__info > :nth-child(2) { transition-delay: .1s; }
.js .place .place__info > :nth-child(3) { transition-delay: .2s; }
.js .place .place__info > :nth-child(4) { transition-delay: .3s; }
.js .place .place__info > :nth-child(5) { transition-delay: .38s; }
.js .place .place__info > :nth-child(6) { transition-delay: .5s; }
.js .place.is-in .place__info > * { opacity: 1; transform: none; }
.js .place .map__canvas { opacity: 0; transform: scale(1.05); transition: opacity 1.8s var(--ease-out) .15s, transform 2.4s var(--ease-out) .15s; }
.js .place.is-in .map__canvas { opacity: 1; transform: none; }
.js .place .map__pin { opacity: 0; transition: opacity .9s var(--ease-out) 1.1s; }
.js .place.is-in .map__pin { opacity: 1; }

.foot {
  position: relative; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 40px;
  padding: clamp(30px, 5vh, 60px) var(--gutter) calc(var(--dock-h) + clamp(30px, 5vh, 60px));
  background: #050f1d; border-top: 1px solid rgba(255, 255, 255, .1);
  font: 400 clamp(12px, .85vw, 18px)/1.8 var(--sans-tc); letter-spacing: .14em; color: rgba(255, 255, 255, .6);
}
.foot__name { color: #fff; font-family: var(--serif-tc); letter-spacing: .2em; }
.foot__grow { flex: 1; }
.foot a { text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .3); white-space: nowrap; }
.foot a:hover, .foot a:focus-visible { color: #fff; border-bottom-color: #fff; outline: none; }

@media (max-aspect-ratio: 1/1) {
  .place { display: block; padding: 11vh 0 6vh; }
  .place__info { padding: 0 8.5vw; }
  .place__en { font-size: clamp(10px, 2.9vw, 22px); }
  .place__title { font-size: clamp(30px, 9.2vw, 72px); }
  .place__addr { font-size: clamp(14px, 4vw, 30px); }
  .place__tel { font-size: clamp(20px, 5.6vw, 44px); }
  .place__go { font-size: clamp(13px, 3.5vw, 26px); }
  .map { margin-top: 7vh; aspect-ratio: 1 / 1.04; overflow: hidden; }
  .map__canvas { position: absolute; left: -30%; top: 50%; width: 160%; transform: translate3d(0, -50%, 0); }
  .js .place .map__canvas { transform: translate3d(0, -50%, 0) scale(1.05); }
  .js .place.is-in .map__canvas { transform: translate3d(0, -50%, 0); }
  .map__label { font-size: clamp(9px, 2.5vw, 20px); }
  .map__label--main { font-size: clamp(10px, 2.8vw, 22px); }
  .map__pin b { font-size: clamp(12px, 3.4vw, 26px); }
  .map__credit { right: 8.5vw; bottom: 8px; }
  .foot { display: block; padding-left: 8.5vw; padding-right: 8.5vw; font-size: clamp(11.5px, 3.1vw, 22px); }
  .foot p + p, .foot__grow + p { margin-top: .5em; }
}
@media (prefers-reduced-motion: reduce) {
  .map__pin i::after { animation: none; }
}

/* 主程式就緒之前，主視覺的文字先不顯示。
   否則會有一瞬間（程式還在下載時）整片藍底上先冒出還沒套動畫的標題，接著消失、再重新動畫進場——看起來像畫面閃了一下。
   主程式載入失敗時，boot.js 會在 4 秒後拿掉 .js，文字照樣會出現。 */
.js:not(.ready) .hero__copy { visibility: hidden; }