/* =========================================================
   皇叡室內設計 RAURELL INTERIOR DESIGN
   台中市南屯區向上路二段 129 號 ・ 04 2252 9289
   黑金・室內設計形象網站
   ========================================================= */


:root{
  /* 黑：不是純黑，帶一點暖，才有石材與絨布的深度 */
  --bg:        #0A0908;
  --bg-2:      #0D0C0B;
  --panel:     #100F0E;
  --panel-2:   #141312;
  --ink:       #060505;

  /* 金：古董金，低彩度。刺眼的黃是土豪金的來源，這裡刻意壓下去 */
  --gold:      #A98F60;
  --gold-soft: #D4C3A0;
  --gold-deep: #6A5837;
  --gold-dim:  #8A754D;

  /* 線：極細、極淡。奢華靠克制，不靠加粗 */
  --line:      rgba(169,143,96,.20);
  --line-soft: rgba(255,255,255,.045);
  --line-hair: rgba(169,143,96,.11);

  /* 字：象牙白而非純白，純白在深色底上會刺眼且顯廉價 */
  --fg:        #EAE5DB;
  --fg-2:      #B8B2A6;
  --muted:     #7C766C;

  --serif: "Noto Serif TC", "Songti TC", "Source Han Serif TC", Georgia, serif;
  --disp:  "Cormorant Garamond", "Noto Serif TC", Georgia, serif;
  --sans:  "Inter", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;

  --ease:  cubic-bezier(.22,.61,.36,1);
  --ease2: cubic-bezier(.76,0,.24,1);
  --ease3: cubic-bezier(.16,1,.3,1);      /* 更慢更沉，開門用 */
  --shell: 1280px;
  --pad:   clamp(24px, 5.5vw, 92px);
}

*,
*::before,
*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg-2);
  font-family:var(--sans);
  font-size:16px; line-height:1.9; letter-spacing:.02em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.is-locked{ overflow:hidden; }

/* 顆粒質感 */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:118; opacity:.035;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
::selection{ background:var(--gold); color:#0A0908; }

/* ---------------------------------------------------------
   1. 開場：城堡雙門
   兩扇雕花門以外緣為軸，往內推開（3D rotateY），
   不是平移滑開 —— 差別就在這個透視。
   --------------------------------------------------------- */
.loader{
  position:fixed; inset:0; z-index:200; pointer-events:none;
  perspective:1500px; perspective-origin:50% 46%;
}

/* 門扇 */
.gate-leaf{
  position:absolute; top:0; bottom:0; width:50.3%;
  transform-style:preserve-3d; backface-visibility:hidden;
  background:
    linear-gradient(var(--dir,90deg), rgba(0,0,0,0) 78%, rgba(0,0,0,.72) 100%),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.012) 0 1px,
      rgba(0,0,0,.30) 1px 3px,
      rgba(255,255,255,.007) 3px 62px),
    radial-gradient(120% 90% at 50% 20%, #1B1815 0%, #110F0D 46%, #080706 100%);
  box-shadow:0 0 0 rgba(0,0,0,0);
  transition:transform 1.95s var(--ease3), box-shadow 1.95s var(--ease3);
  will-change:transform;
}
.gate-leaf--l{ left:0;  --dir:90deg;  transform-origin:left  center; }
.gate-leaf--r{ right:0; --dir:270deg; transform-origin:right center; }

/* 門扇上的金色雕花：外框 ・ 內框 ・ 拱心 */
.gate-orn{
  position:absolute; inset:clamp(28px,4.2vw,68px);
  border:1px solid rgba(169,143,96,.24);
}
.gate-orn::before{
  content:""; position:absolute; inset:clamp(13px,1.7vw,24px);
  border:1px solid rgba(169,143,96,.13);
}
.gate-orn::after{
  content:""; position:absolute;
  left:13%; right:13%; top:11%; height:48%;
  border:1px solid rgba(169,143,96,.17); border-bottom:0;
  border-radius:50% 50% 0 0 / 62% 62% 0 0;
}
/* 門把 */
.gate-leaf::after{
  content:""; position:absolute; top:50%; width:1px; height:clamp(64px,9.5vh,120px);
  transform:translateY(-50%);
  background:linear-gradient(transparent, var(--gold-dim), transparent);
  opacity:.55;
}
.gate-leaf--l::after{ right:clamp(17px,2.5vw,40px); }
.gate-leaf--r::after{ left:clamp(17px,2.5vw,40px); }

/* 門開時的內側受光：轉向觀者的那一面會亮起來 */
.loader.is-done .gate-leaf{ box-shadow:inset 0 0 120px 40px rgba(169,143,96,.10); }
.loader.is-done .gate-leaf--l{ transform:translateZ(1px) rotateY(-104deg); }
.loader.is-done .gate-leaf--r{ transform:translateZ(1px) rotateY(104deg); }

/* 中央封印：門開之前先淡出，所以光縫不會切到字 */
.loader-body{
  position:absolute; inset:0; z-index:4;
  display:grid; place-items:center;
  transition:opacity .42s var(--ease), transform .8s var(--ease);
}
.gate-seal{ text-align:center; }
.gate-crown{
  display:block; width:min(25vw,126px); height:auto; margin:0 auto;
  opacity:0; transform:translateY(12px);
  animation:gateIn 1.2s var(--ease) .12s forwards;
  filter:drop-shadow(0 8px 30px rgba(0,0,0,.75));
}
.gate-rule{
  width:min(32vw,220px); height:1px; margin:clamp(22px,3.2vh,32px) auto;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  transform:scaleX(0); animation:gateRule 1.5s var(--ease) .52s forwards;
}
@keyframes gateRule{ to{ transform:scaleX(1); } }
.gate-word{
  font-family:var(--disp); font-size:clamp(1.2rem,3.2vw,1.95rem); font-weight:300;
  letter-spacing:.54em; text-indent:.54em; color:var(--fg);
  opacity:0; animation:gateIn 1s var(--ease) .46s forwards;
}
.gate-sub{
  margin-top:15px; font-family:var(--serif); font-size:clamp(.62rem,1.5vw,.74rem);
  letter-spacing:.48em; text-indent:.48em; color:var(--gold-dim);
  opacity:0; animation:gateIn 1s var(--ease) .8s forwards;
}
@keyframes gateIn{ to{ opacity:1; transform:none; } }

/* 門縫的光：封印散去時綻開一道柔光，門一開就隨即散掉。
   絕不能留下一條硬邊細線橫在畫面上。 */
.gate-seam{
  position:absolute; top:-4%; bottom:-4%; left:50%; z-index:3;
  width:clamp(140px,26vw,400px);
  transform:translateX(-50%) scaleX(.08);
  opacity:0; pointer-events:none;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(169,143,96,.06) 30%,
    rgba(226,213,184,.34) 46%,
    rgba(244,236,218,.62) 50%,
    rgba(226,213,184,.34) 54%,
    rgba(169,143,96,.06) 70%,
    transparent 100%);
  filter:blur(10px);
  transition:opacity .4s var(--ease), transform .95s var(--ease3);
}
.loader.is-breaking .gate-seam{ opacity:1; transform:translateX(-50%) scaleX(1); }
/* 推門的同時光就開始散，門走完之前已經消失 */
.loader.is-done .gate-seam{
  opacity:0; transform:translateX(-50%) scaleX(1.6);
  transition:opacity .7s var(--ease), transform 1.2s var(--ease3);
}

/* 開門 */
.loader.is-breaking .loader-body{ opacity:0; transform:scale(1.06); }
.loader.is-gone{ display:none; }

@media (prefers-reduced-motion:reduce){
  .gate-crown,
.gate-word,
.gate-sub,
.gate-rule{ animation:none; opacity:1; transform:none; }
  .gate-leaf{ transition-duration:.45s; }
  .loader.is-done .gate-leaf--l{ transform:translateX(-101%); }
  .loader.is-done .gate-leaf--r{ transform:translateX(101%); }
}

/* ---------------------------------------------------------
   2. 捲動進度 ・ 自訂游標
   --------------------------------------------------------- */
.progress{
  position:fixed; right:0; top:0; width:1px; height:100vh; z-index:44;
  pointer-events:none; background:transparent;
}
.progress i{ display:block; width:100%; height:0; background:linear-gradient(var(--gold),var(--gold-deep)); }

.cursor,
.cursor-dot{ position:fixed; top:0; left:0; z-index:120; pointer-events:none; opacity:0; }
.cursor{
  width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%;
  border:1px solid rgba(169,143,96,0.495);
  transition:width .45s var(--ease), height .45s var(--ease), margin .45s var(--ease),
             background .45s var(--ease), border-color .45s var(--ease), opacity .3s;
  display:grid; place-items:center;
}
.cursor span{
  font-size:.58rem; letter-spacing:.22em; color:#0A0908; text-transform:uppercase;
  opacity:0; transform:scale(.6); transition:.35s var(--ease);
}
.cursor.is-active{
  width:96px; height:96px; margin:-48px 0 0 -48px;
  background:var(--gold); border-color:var(--gold);
}
.cursor.is-active span{ opacity:1; transform:none; }
.cursor-dot{ width:5px; height:5px; margin:-2.5px 0 0 -2.5px; border-radius:50%; background:var(--gold-soft); }
.cursor.is-active + .cursor-dot{ opacity:0 !important; }
body.cursor-on .cursor,
body.cursor-on .cursor-dot{ opacity:1; }
@media (hover:none),(max-width:900px){ .cursor,
.cursor-dot{ display:none; } }

/* ---------------------------------------------------------
   3. 文字系統
   --------------------------------------------------------- */
h1,
h2,
h3,
h4{ font-family:var(--serif); font-weight:500; color:var(--fg); letter-spacing:.06em; line-height:1.4; margin:0; }
.display{ font-size:clamp(2.5rem,6.6vw,5.6rem); line-height:1.16; letter-spacing:.06em; }
.h1{ font-size:clamp(2rem,4.6vw,3.6rem); line-height:1.3; }
.h2{ font-size:clamp(1.65rem,3.2vw,2.6rem); }
.h3{ font-size:clamp(1.12rem,1.7vw,1.42rem); }
.dsp-en{ font-family:var(--disp); font-weight:300; font-style:italic; letter-spacing:.02em; color:var(--gold); }

.eyebrow{
  font-family:var(--sans); font-size:.68rem; letter-spacing:.44em; text-transform:uppercase;
  color:var(--gold); display:inline-flex; align-items:center; gap:14px; margin:0 0 24px;
}
.eyebrow::before{ content:""; width:40px; height:1px; background:linear-gradient(90deg,transparent,var(--gold)); }

.lede{ font-size:clamp(1rem,1.2vw,1.06rem); color:var(--fg-2); max-width:min(100%, 45em); }
.muted{ color:var(--muted); }
.en{ font-family:var(--sans); letter-spacing:.34em; text-transform:uppercase; font-size:.66rem; color:var(--muted); }

/* 遮罩式逐行揭露 */
.rl{ display:block; overflow:hidden; padding-bottom:.08em; }
.rl > span{ display:block; transform:translateY(118%); transition:transform 1.25s var(--ease2); }
.is-in .rl > span{ transform:none; }
.rl:nth-child(2) > span{ transition-delay:.11s; }
.rl:nth-child(3) > span{ transition-delay:.22s; }
.rl:nth-child(4) > span{ transition-delay:.33s; }

/* ---------------------------------------------------------
   4. 版面
   --------------------------------------------------------- */
.shell{ width:min(100% - (var(--pad) * 2), var(--shell)); margin-inline:auto; }
.section{ padding:clamp(90px,12vw,180px) 0; position:relative; }
.section--tight{ padding:clamp(64px,8vw,110px) 0; }
.section--alt{ background:var(--bg-2); }
.divider{ height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent); }
.grid{ display:grid; gap:clamp(28px,3.4vw,58px); }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }
.head{ max-width:780px; margin-bottom:clamp(48px,5.5vw,86px); }
.head--center{ margin-inline:auto; text-align:center; }
.head--center .eyebrow{ justify-content:center; }
.head--center .eyebrow::after{ content:""; width:40px; height:1px; background:linear-gradient(90deg,var(--gold),transparent); }
.head p{ margin:24px 0 0; }

/* ---------------------------------------------------------
   5. 按鈕
   --------------------------------------------------------- */
.btn{
  --c:var(--gold);
  display:inline-flex; align-items:center; justify-content:center; gap:14px;
  padding:18px 40px; border:1px solid var(--c); color:var(--gold-soft);
  font-size:.74rem; letter-spacing:.26em; text-transform:uppercase;
  background:transparent; cursor:pointer; position:relative; overflow:hidden;
  transition:color .5s var(--ease), border-color .5s var(--ease), transform .35s var(--ease);
}
.btn span{ position:relative; z-index:1; }
.btn::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(115deg,var(--gold-deep),var(--gold) 42%,var(--gold-soft));
  transform:translateY(101%); transition:transform .6s var(--ease2);
}
.btn:hover::before{ transform:translateY(0); }
.btn:hover{ color:#0A0908; }
.btn--solid{ color:#0A0908; }
.btn--solid::before{ transform:translateY(0); }
.btn--solid:hover::before{ transform:translateY(-101%); }
.btn--solid:hover{ color:var(--gold-soft); }
.btn--ghost{ --c:rgba(255,255,255,.2); color:var(--fg-2); }
.btn--ghost:hover{ border-color:var(--gold); }
.btn--lg{ padding:24px 56px; font-size:.78rem; }

/* ---------------------------------------------------------
   6. 影像（佔位，可直接換成實拍）
   --------------------------------------------------------- */
.media{
  position:relative; overflow:hidden; background-color:#111114;
  background-image:
    linear-gradient(102deg, rgba(214,182,120,.22) 0%, rgba(169,143,96,0.054) 20%, transparent 44%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.34) 0 2px, rgba(255,255,255,.016) 2px 5px, transparent 5px 46px),
    linear-gradient(0deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.15) 26%, transparent 44%),
    radial-gradient(85% 65% at 20% 8%, #38352F 0%, #1C1B1D 46%, #0A0A0C 100%);
  background-size:cover; background-position:center;
}
.media img{ width:100%; height:100%; object-fit:cover; }
.media::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px var(--line-soft); pointer-events:none; }
.media--v2{ filter:hue-rotate(-10deg); background-position:28% 62%; }
.media--v3{ background-position:72% 38%; filter:saturate(.8) brightness(1.06); }

/* 簾幕開場 */
.curtain{ position:relative; overflow:hidden; }
.curtain > .media{ scale:1.18; transition:scale 1.6s var(--ease2); will-change:scale, translate; }
.curtain::after{
  content:""; position:absolute; inset:0; background:var(--bg); z-index:3;
  transform-origin:top; transition:transform 1.15s var(--ease2);
}
.is-in .curtain > .media{ scale:1; }
.is-in .curtain::after{ transform:scaleY(0); }

/* ---------------------------------------------------------
   7. Header ・ 選單
   --------------------------------------------------------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  transition:background .5s var(--ease), backdrop-filter .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.is-stuck{ background:rgba(7,7,8,.82); backdrop-filter:blur(16px) saturate(120%); border-bottom-color:var(--line); }
.site-header.is-hidden{ transform:translateY(-100%); transition:transform .5s var(--ease), background .5s var(--ease); }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:32px; height:clamp(76px,7vw,104px); }

.brand{ display:flex; align-items:center; gap:14px; }
img.brand-mark{
  height:40px; width:auto; flex:none; display:block; border:0;
  position:relative; top:-2px;           /* 皇冠底部較重，往上微調對齊文字光學中心 */
  transition:opacity .5s var(--ease), transform .7s var(--ease);
}
.brand:hover img.brand-mark{ opacity:.82; transform:translateY(-2px); }
.brand-text{
  display:flex; flex-direction:column; justify-content:center; gap:7px;
  padding-top:1px;
}
.brand-text b{
  display:block; font-family:var(--serif); font-weight:500;
  font-size:1.02rem; color:var(--fg);
  letter-spacing:.18em; line-height:1;
  margin-right:-.18em;                    /* 抵銷字距在尾端多出的空白 */
}
.brand-text i{
  display:block; font-style:normal;
  font-size:.53rem; letter-spacing:.34em; color:var(--muted);
  line-height:1; text-transform:none;
  margin-right:-.34em;
}

.nav-links{ display:flex; align-items:center; gap:clamp(22px,2.4vw,42px); list-style:none; margin:0; padding:0; }
.nav-links a{ position:relative; font-size:.79rem; letter-spacing:.2em; color:var(--fg-2); padding:6px 0; transition:color .4s var(--ease); }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--gold); transition:width .45s var(--ease); }
.nav-links a:hover,
.nav-links a[aria-current="page"]{ color:var(--gold-soft); }
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after{ width:100%; }
.nav-cta{ display:flex; align-items:center; gap:20px; }
.nav-cta .btn{ padding:14px 28px; font-size:.68rem; }
.nav-tel{ font-size:.77rem; letter-spacing:.16em; color:var(--muted); }
.nav-tel:hover{ color:var(--gold); }

.burger{ display:none; width:46px; height:46px; border:1px solid var(--line); background:transparent; cursor:pointer; position:relative; z-index:60; }
.burger i{ position:absolute; left:13px; right:13px; height:1px; background:var(--gold); transition:.4s var(--ease); }
.burger i:nth-child(1){ top:17px; } .burger i:nth-child(2){ bottom:17px; }
.burger.is-open i:nth-child(1){ top:22px; transform:rotate(45deg); }
.burger.is-open i:nth-child(2){ bottom:23px; transform:rotate(-45deg); }

.drawer{ position:fixed; inset:0; z-index:45; background:#0A0908; display:grid; place-items:center; opacity:0; visibility:hidden; transition:.5s var(--ease); }
.drawer.is-open{ opacity:1; visibility:visible; }
.drawer ul{ list-style:none; margin:0; padding:0; text-align:center; }
.drawer li{ margin:24px 0; opacity:0; transform:translateY(16px); transition:.6s var(--ease); }
.drawer.is-open li{ opacity:1; transform:none; }
.drawer.is-open li:nth-child(2){ transition-delay:.06s; }
.drawer.is-open li:nth-child(3){ transition-delay:.12s; }
.drawer.is-open li:nth-child(4){ transition-delay:.18s; }
.drawer.is-open li:nth-child(5){ transition-delay:.24s; }
.drawer a{ font-family:var(--serif); font-size:1.7rem; letter-spacing:.24em; color:var(--fg); }
.drawer a:hover{ color:var(--gold); }
.drawer .en{ display:block; margin-top:5px; font-size:.55rem; }

/* ---------------------------------------------------------
   8. Hero
   --------------------------------------------------------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; }
.hero-bg{ position:absolute; inset:-6% -2%; will-change:transform; }
.hero-bg .media{ position:absolute; inset:0; animation:kb 22s ease-in-out infinite alternate; }
@keyframes kb{ from{ transform:scale(1.04); } to{ transform:scale(1.14); } }
.hero::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(92deg, rgba(10,9,8,.96) 0%, rgba(10,9,8,.76) 46%, rgba(10,9,8,.28) 100%),
    radial-gradient(120% 100% at 50% 100%, rgba(0,0,0,.8), transparent 62%);
}
.hero-inner{ position:relative; z-index:2; padding:130px 0 210px; }
.hero .display{ max-width:min(100%, 11em); }
.hero .lede{ margin-top:34px; max-width:min(100%, 30em); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:18px; margin-top:52px; }

/* 內頁 Hero */
.page-hero{ position:relative; min-height:62vh; display:flex; align-items:flex-end; overflow:hidden; }
.page-hero .media{ position:absolute; inset:0; animation:kb 22s ease-in-out infinite alternate; }
.page-hero::before{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(7,7,8,.92) 0%,rgba(7,7,8,.5) 42%,rgba(7,7,8,.96) 100%); }
.page-hero-inner{ position:relative; z-index:2; padding:clamp(140px,15vw,200px) 0 clamp(52px,6vw,80px); }
@keyframes mq{ to{ transform:translateX(-50%); } }

/* ---------------------------------------------------------
   11. 橫向捲動作品展廊
   --------------------------------------------------------- */
.hgallery{ position:relative; background:var(--bg-2); }
.hgallery-sticky{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
  gap:clamp(20px,3vh,38px);
  padding:clamp(96px,13vh,140px) 0 clamp(72px,9vh,100px);
}
.hgallery-head{ flex:none; z-index:3; pointer-events:none; }
.hgallery-head .shell{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; }
.hgallery-head .eyebrow{ margin-bottom:14px; }
.htrack{ display:flex; align-items:flex-start; gap:clamp(24px,3vw,52px); padding-inline:var(--pad); will-change:transform; flex:none; }
/* 同寬同高：再用視窗高度收一次，確保整排卡片塞得進 100svh */
.hslide{ position:relative; flex:none; width:min(clamp(268px,30vw,420px), 46vh); }
.hslide .media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hgallery-bar{ position:absolute; left:var(--pad); right:var(--pad); bottom:clamp(32px,4.5vh,52px); height:1px; background:var(--line-soft); z-index:3; }
.hgallery-bar i{ display:block; height:1px; width:12%; background:var(--gold); transition:width .1s linear; }
.wfloat{
  position:fixed; top:0; left:0; width:clamp(240px,22vw,330px); aspect-ratio:3/4; z-index:30;
  pointer-events:none; opacity:0; transform:translate(-50%,-50%) scale(.9);
  transition:opacity .5s var(--ease), transform .6s var(--ease);
}
.wfloat.is-on{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.wfloat .media{ position:absolute; inset:0; }
@media (hover:none),(max-width:900px){ .wfloat{ display:none; } }

/* ---------------------------------------------------------
   14. 流程（金線繪製）
   --------------------------------------------------------- */
.process{ list-style:none; margin:0; padding:0; position:relative; }
.process::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:1px; background:var(--line-soft); }
.process-line{ position:absolute; left:0; top:0; width:1px; height:0; background:linear-gradient(var(--gold),var(--gold-deep)); z-index:1; }
.process li{
  display:grid; grid-template-columns:130px 1fr 1.25fr; gap:clamp(20px,3vw,52px);
  align-items:start; padding:clamp(30px,3.2vw,46px) 0 clamp(30px,3.2vw,46px) clamp(28px,4vw,64px);
  border-top:1px solid var(--line-soft); transition:background .5s var(--ease);
}
.process li:last-child{ border-bottom:1px solid var(--line-soft); }
.process li:hover{ background:rgba(169,143,96,0.032); }
.process .step{ font-family:var(--disp); font-size:2.3rem; font-weight:300; color:var(--gold-deep); line-height:1; }
.process h3{ font-size:1.18rem; }
.process p{ margin:0; font-size:.92rem; color:var(--muted); }
.acc-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; background:none; border:0; text-align:left; cursor:pointer; padding:28px 0; font-family:var(--serif); font-size:1.02rem; color:var(--fg); letter-spacing:.05em; transition:color .4s var(--ease); }
.acc-q:hover{ color:var(--gold-soft); }
.acc-q i{ position:relative; width:14px; height:14px; flex:none; }
.acc-q i::before,
.acc-q i::after{ content:""; position:absolute; background:var(--gold); transition:.4s var(--ease); }
.acc-q i::before{ top:6px; left:0; width:14px; height:1px; }
.acc-q i::after{ left:6px; top:0; height:14px; width:1px; }
.acc-a{ max-height:0; overflow:hidden; transition:max-height .6s var(--ease); }
.acc-a p{ margin:0 0 28px; font-size:.92rem; color:var(--muted); max-width:min(100%, 50em); }
.form-note{ font-size:.76rem; color:var(--muted); }

.info{ list-style:none; margin:0; padding:0; }
.info li{ padding:24px 0; border-bottom:1px solid var(--line-soft); }
.info b{ display:block; font-size:.63rem; letter-spacing:.3em; color:var(--gold); text-transform:uppercase; margin-bottom:9px; font-weight:500; }
.info span{ font-size:.97rem; color:var(--fg-2); }

/* ---------------------------------------------------------
   17. CTA ・ Footer
   --------------------------------------------------------- */
.cta{ position:relative; overflow:hidden; text-align:center; }
.cta .media{ position:absolute; inset:0; }
.cta::before{ content:""; position:absolute; inset:0; background:rgba(7,7,8,.88); }
.cta .shell{ position:relative; z-index:2; }

.site-footer{ background:#060607; border-top:1px solid var(--line); position:relative; overflow:hidden; }
.foot-mark{
  font-family:var(--disp); font-size:clamp(3.4rem,13vw,11rem); line-height:1; text-align:center;
  color:transparent; -webkit-text-stroke:1px rgba(169,143,96,0.144); letter-spacing:.06em;
  padding:clamp(48px,7vw,90px) 0 0; user-select:none;
}
.foot-top{ display:grid; grid-template-columns:1.6fr 1fr 1.3fr; gap:clamp(28px,3vw,52px); padding:clamp(56px,7vw,92px) 0; }
.foot-top h4{ font-family:var(--sans); font-size:.63rem; letter-spacing:.3em; color:var(--gold); text-transform:uppercase; margin:0 0 24px; font-weight:500; }
.foot-top ul{ list-style:none; margin:0; padding:0; }
.foot-top li{ margin-bottom:13px; font-size:.87rem; color:var(--muted); }
.foot-top a:hover{ color:var(--gold-soft); }
.foot-brand p{ margin:24px 0 0; font-size:.85rem; color:var(--muted); max-width:min(100%, 24em); }
.foot-bottom{ display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; padding:26px 0; border-top:1px solid var(--line-soft); font-size:.7rem; letter-spacing:.14em; color:#67635C; }

/* ---------------------------------------------------------
   18. 進場動效
   --------------------------------------------------------- */
[data-reveal]{ opacity:0; transform:translateY(30px); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease); }
[data-reveal].is-in{ opacity:1; transform:none; }
[data-reveal][data-delay="1"]{ transition-delay:.12s; }
[data-reveal][data-delay="2"]{ transition-delay:.24s; }
[data-reveal][data-delay="3"]{ transition-delay:.36s; }
[data-reveal][data-delay="4"]{ transition-delay:.48s; }
[data-reveal].no-fade{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  [data-reveal]{ opacity:1; transform:none; }
  .rl > span{ transform:none; }
  .curtain::after{ display:none; }
}

/* ---------------------------------------------------------
   19. 響應式
   --------------------------------------------------------- */
@media (max-width:1150px){
  .g4{ grid-template-columns:repeat(2,1fr); }
  .foot-top{ grid-template-columns:repeat(2,1fr); }
  .nav-tel{ display:none; }
  .worklist a{ grid-template-columns:64px 1fr 150px 78px; }
}
@media (max-width:900px){
  .nav-links{ display:none; }
  .nav-cta .btn{ display:none; }
  .burger{ display:block; }
  .g2,
.g3{ grid-template-columns:1fr; }
  .process li{ grid-template-columns:64px 1fr; padding-left:24px; }
  .process li .p-desc{ grid-column:2; }
  .hero{ min-height:0; display:block; }
  .hero-bg{ inset:0; }
  .hero-inner{ padding:clamp(150px,28vw,190px) 0 clamp(52px,8vw,68px); }
  .hgallery{ height:auto !important; }
  .hgallery-sticky{ position:static; height:auto; padding:clamp(90px,12vw,140px) 0; }
  .htrack{ transform:none !important; flex-direction:column; align-items:stretch; gap:36px; }
  .hslide{ width:100%; }
  .hgallery-head{ position:static; margin-bottom:44px; }
  .hgallery-bar{ display:none; }
}
@media (max-width:680px){
  .foot-top{ grid-template-columns:1fr; }
  .hero .display{ max-width:none; }
}


@media (max-width:640px){
  img.brand-mark{ height:32px; }
}


/* =========================================================
   右下角懸浮工具列（電話 ・ LINE ・ 回到頁首）
   ========================================================= */
.dock{
  position:fixed; right:clamp(14px,2.2vw,26px); bottom:clamp(16px,2.6vw,30px);
  z-index:120; display:flex; flex-direction:column; align-items:center;
  gap:12px; pointer-events:none;
}
.dock-btn{
  pointer-events:auto; position:relative;
  width:52px; height:52px; flex:none;
  display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--line); background:rgba(12,12,14,.86);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  color:var(--gold); cursor:pointer; padding:0;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
  transition:transform .45s var(--ease), border-color .45s var(--ease),
             color .45s var(--ease), background .45s var(--ease), opacity .4s var(--ease);
}
.dock-btn svg{ width:21px; height:21px; fill:currentColor; }
.dock-btn:hover{
  transform:translateY(-3px);
  border-color:var(--gold); color:var(--gold-soft); background:rgba(20,18,14,.94);
}
.dock-btn--line:hover{ color:#8FD24C; border-color:rgba(143,210,76,.55); }

/* 側邊提示文字 */
.dock-tip{
  position:absolute; right:calc(100% + 12px); top:50%; transform:translate(6px,-50%);
  white-space:nowrap; padding:7px 13px; border-radius:2px;
  border:1px solid var(--line); background:rgba(12,12,14,.94);
  font-family:var(--sans); font-size:.7rem; letter-spacing:.12em; color:var(--fg-2);
  opacity:0; visibility:hidden; transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.dock-btn:hover .dock-tip{ opacity:1; visibility:visible; transform:translate(0,-50%); }

/* 回到頁首：鯨魚吉祥物（無外框，直接漂浮） */
.dock-btn--top{
  width:auto; height:auto; margin-top:6px; padding:0;
  border:0; border-radius:0; background:none; box-shadow:none;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  opacity:0; visibility:hidden; transform:translateY(16px);
}
.dock-btn--top::before{
  /* 深色背景下的柔光墊，讓鯨魚不會糊掉 */
  content:""; position:absolute; left:50%; top:52%;
  width:104px; height:104px; transform:translate(-50%,-50%);
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,
    rgba(169,143,96,0.18) 0%,
    rgba(169,143,96,0.081) 42%,
    transparent 70%);
  transition:opacity .45s var(--ease);
}
.dock-btn--top img{
  position:relative; width:84px; height:auto; display:block;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.65))
         drop-shadow(0 0 10px rgba(169,143,96,0.252));
  transition:transform .5s var(--ease), filter .5s var(--ease);
}
.dock-btn--top:hover{ transform:translateY(-5px); }
.dock-btn--top:hover img{
  transform:translateY(-4px) rotate(-4deg);
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.7))
         drop-shadow(0 0 16px rgba(169,143,96,0.45));
}
.dock-btn--top .dock-tip{ right:calc(100% + 2px); }
.dock-btn--top.is-on{ opacity:1; visibility:visible; transform:none; }
.dock-btn--top.is-on:hover{ transform:translateY(-5px); }

@media (max-width:640px){
  .dock{ gap:10px; }
  .dock-btn{ width:46px; height:46px; }
  .dock-btn svg{ width:19px; height:19px; }
  .dock-btn--top img{ width:64px; }
  .dock-btn--top::before{ width:80px; height:80px; }
  .dock-tip{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .dock-btn,
.dock-btn--top img{ transition:none; }
}


.info li{
  position:relative;
}

/* ---- 3. 按鈕：填色之外再加一道流光 ---- */
.btn::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(105deg,
    transparent 40%,
    rgba(240,232,214,.34) 49%,
    rgba(240,232,214,.55) 51%,
    rgba(240,232,214,.34) 53%,
    transparent 62%);
  transform:translateX(-130%); transition:transform 1s var(--ease2);
}
.btn:hover::after{ transform:translateX(130%); }
.btn{ box-shadow:0 0 0 0 rgba(169,143,96,0); }
.btn:hover{ box-shadow:0 14px 38px rgba(169,143,96,0.126); }

/* ---- 4. 圖片：玻璃邊、內光暈、hover 光線掃過 ---- */
.media::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(120% 80% at 12% 0%, rgba(240,230,206,.10) 0%, transparent 55%),
    linear-gradient(180deg, transparent 62%, rgba(0,0,0,.35) 100%);
}
.curtain{
  box-shadow:0 30px 70px rgba(0,0,0,.5);
}
.curtain::before{
  content:""; position:absolute; inset:0; z-index:4; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(169,143,96,0.18);
}
.curtain > .media::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(102deg,
    transparent 42%,
    rgba(240,232,214,.09) 49%,
    rgba(240,232,214,.16) 51%,
    rgba(240,232,214,.09) 53%,
    transparent 60%);
  transform:translateX(-115%); transition:transform 1.4s var(--ease2);
  box-shadow:none;
}
.curtain:hover > .media::after{ transform:translateX(115%); }

/* ---- 5. Hero：多層光暈 ＋ 隨捲動加深的暗角 ---- */
.hero{ --hero-p:0; }
.hero-bg{ will-change:transform; }
.hero-bg::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(70% 50% at 18% 14%, rgba(214,182,120,.17) 0%, transparent 62%),
    radial-gradient(55% 45% at 88% 82%, rgba(169,143,96,0.099) 0%, transparent 60%),
    radial-gradient(125% 95% at 50% 45%,
      transparent 36%, rgba(0,0,0,.40) 76%, rgba(0,0,0,.70) 100%);
  opacity:calc(.62 + var(--hero-p) * .38);
}
.hero-inner{ position:relative; z-index:3; will-change:translate, opacity; }

/* ---- 6. 區塊之間的金線分隔改為漸層呼吸 ---- */
.divider{
  background:linear-gradient(90deg,
    transparent 0%, rgba(169,143,96,0.045) 18%,
    rgba(169,143,96,0.306) 50%,
    rgba(169,143,96,0.045) 82%, transparent 100%);
  height:1px; border:0;
}

/* ---- 8. 導覽玻璃感 ---- */
.site-header.is-stuck{
  background:linear-gradient(180deg, rgba(8,8,10,.9), rgba(8,8,10,.72));
  backdrop-filter:blur(18px) saturate(135%);
  -webkit-backdrop-filter:blur(18px) saturate(135%);
  box-shadow:0 1px 0 rgba(169,143,96,0.126), 0 18px 40px rgba(0,0,0,.4);
}

/* ---- 9. 降級：省電模式與觸控裝置關掉會動的部分 ---- */
@media (prefers-reduced-motion:reduce){
  .card::after,.btn::after,.curtain > .media::after{ display:none; }
}
@media (max-width:900px){
  .curtain > .media{ translate:none !important; }
  body::after{ opacity:.02; }
}

/* ---- 地圖嵌入框 ---- */
.map-frame{
  position:relative; aspect-ratio:16/10; overflow:hidden;
  border:1px solid var(--line); background:var(--panel);
  box-shadow:0 20px 50px rgba(0,0,0,.45);
}
.map-frame iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
  filter:grayscale(1) invert(.92) contrast(.86) brightness(.94) sepia(.18);
  transition:filter .6s var(--ease);
}
.map-frame:hover iframe{ filter:grayscale(.4) invert(.9) contrast(.9) brightness(1) sepia(.1); }


/* =========================================================
   奢華優雅：留白、字級、節奏
   金退回細線與小字，畫面靠比例與呼吸撐起質感
   ========================================================= */

/* ---- 1. Header：LOGO 縮小 15%，導覽更輕 ---- */
img.brand-mark{ height:34px; top:-2px; }          /* 40px → 34px */
.brand{ gap:13px; }
.brand-text b{ font-size:.95rem; letter-spacing:.2em; }
.brand-text i{ font-size:.5rem; letter-spacing:.36em; margin-right:-.36em; color:var(--gold-dim); }
.nav{ height:clamp(80px,7.5vw,112px); }
.nav-links a{ font-size:.75rem; letter-spacing:.24em; color:var(--fg-2); }
.nav-links a::after{ background:var(--gold); height:1px; }
.nav-tel{ font-size:.72rem; letter-spacing:.2em; color:var(--gold-dim); }

/* ---- 2. 字級與行氣：放大、拉開、放慢 ---- */
body{ font-size:16px; line-height:2.0; letter-spacing:.035em; }
.display{
  font-family:var(--disp); font-weight:300;
  font-size:clamp(2.7rem,7.2vw,6.2rem); line-height:1.1;
  letter-spacing:.08em; color:var(--fg);
}
.h1{
  font-weight:300; font-size:clamp(2.1rem,5vw,4rem);
  line-height:1.32; letter-spacing:.07em; color:var(--fg);
}
.h2{ font-weight:300; font-size:clamp(1.5rem,2.8vw,2.3rem); line-height:1.5; letter-spacing:.06em; color:var(--fg); }
.h3{ font-weight:400; letter-spacing:.05em; color:var(--fg); }
.lede{ font-size:1.02rem; line-height:2.15; letter-spacing:.04em; }

/* eyebrow 是金色唯一該大量出現的地方：小、細、字距極開 */
.eyebrow{
  font-family:var(--sans); font-size:.6rem; font-weight:400;
  letter-spacing:.46em; text-indent:.46em;
  color:var(--gold-dim); text-transform:uppercase;
}

/* ---- 3. 區塊留白加大 ---- */
.section{ padding:clamp(110px,13vw,220px) 0; }
.section--tight{ padding:clamp(76px,8vw,130px) 0; }
.head{ margin-bottom:clamp(56px,6vw,96px); }
.shell{ max-width:var(--shell); }

/* ---- 4. 分隔線退到幾乎看不見 ---- */
.divider{
  background:linear-gradient(90deg,
    transparent 0%, var(--line-hair) 30%,
    rgba(169,143,96,.24) 50%,
    var(--line-hair) 70%, transparent 100%);
}

/* ---- 5. 按鈕：細金線，填色也是沉金不是亮金 ---- */
.btn{
  padding:19px 44px; font-size:.7rem; letter-spacing:.3em;
  border-color:var(--line); color:var(--fg-2);
}
.btn::before{
  background:linear-gradient(112deg, var(--gold-deep), var(--gold-dim) 46%, var(--gold));
}
.btn:hover{ color:var(--ink); border-color:var(--gold-dim); box-shadow:0 16px 40px rgba(0,0,0,.5); }
.btn::after{
  background:linear-gradient(105deg,
    transparent 42%,
    rgba(240,232,214,.20) 49%,
    rgba(240,232,214,.34) 51%,
    rgba(240,232,214,.20) 53%,
    transparent 60%);
}
.btn--solid{ border-color:var(--gold-dim); color:var(--gold-soft); }
.btn--lg{ padding:22px 54px; }

/* ---- 7. 圖片：更深的暗角、更細的金框 ---- */
.curtain{ box-shadow:0 36px 90px rgba(0,0,0,.6); }
.curtain::before{ box-shadow:inset 0 0 0 1px rgba(169,143,96,.16); }
.media::before{
  background:
    radial-gradient(120% 80% at 12% 0%, rgba(240,230,206,.07) 0%, transparent 55%),
    linear-gradient(180deg, transparent 58%, rgba(0,0,0,.45) 100%);
}
.media{
  background-image:
    linear-gradient(102deg, rgba(190,163,116,.16) 0%, rgba(169,143,96,.04) 22%, transparent 46%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.3) 0 2px, rgba(255,255,255,.012) 2px 5px, transparent 5px 52px),
    linear-gradient(0deg, rgba(0,0,0,.84) 0%, rgba(0,0,0,.16) 28%, transparent 46%),
    radial-gradient(85% 65% at 20% 8%, #302C26 0%, #171614 46%, #0A0908 100%);
}

/* ---- 8. 頁尾浮水印：極淡的描邊字，不填色 ---- */
.foot-mark{
  color:transparent;
  -webkit-text-stroke:1px rgba(169,143,96,.10);
  opacity:1;
  font-size:clamp(3rem,12vw,10rem); letter-spacing:.1em;
}
.site-footer{ border-top:1px solid var(--line-hair); }
.foot-top h4{ color:var(--gold-dim); font-size:.6rem; letter-spacing:.34em; }
.foot-bottom{ font-size:.7rem; letter-spacing:.14em; color:var(--muted); }

/* ---- 9. 導覽玻璃：更薄更淡 ---- */
.site-header.is-stuck{
  background:linear-gradient(180deg, rgba(10,9,8,.92), rgba(10,9,8,.74));
  box-shadow:0 1px 0 var(--line-hair), 0 20px 44px rgba(0,0,0,.45);
}

/* ---- 10. 顆粒再淡一點 ---- */
body::after{ opacity:.026; }

/* ---- 11. 選取與捲軸 ---- */
::selection{ background:var(--gold-dim); color:var(--ink); }
::-webkit-scrollbar{ width:0; }


/* =========================================================
   紋樣與層次
   奢華不只來自留白，來自「有東西可看」：
   織紋底、飾邊、拱形、角花、大寫序號。
   ========================================================= */

/* ---- 1. 底層織紋：極淡的菱格暗紋，讓黑不再是平的一片 ---- */
body{
  background-color:var(--bg);
  background-image:
    /* 中心暖光，四周壓暗，整頁像被一盞燈照著 */
    radial-gradient(120% 80% at 50% 0%, rgba(169,143,96,.055) 0%, transparent 58%),
    radial-gradient(100% 100% at 50% 50%, transparent 42%, rgba(0,0,0,.5) 100%),
    /* 菱格織紋 */
    repeating-linear-gradient(45deg,
      rgba(169,143,96,.016) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(-45deg,
      rgba(169,143,96,.016) 0 1px, transparent 1px 34px);
  background-attachment:fixed;
}

/* 深色區塊改用實色 ＋ 自己的暗紋，避免蓋掉底層 */
.section--alt{
  background:
    linear-gradient(180deg, rgba(16,15,14,.96), rgba(10,9,8,.96)),
    repeating-linear-gradient(45deg, rgba(169,143,96,.02) 0 1px, transparent 1px 26px);
  border-block:1px solid var(--line-hair);
}

/* ---- 2. 飾邊分隔：中央菱形，兩側細線收尾 ---- */
.divider{
  position:relative; height:1px; overflow:visible;
  background:linear-gradient(90deg,
    transparent 0%, var(--line-hair) 22%,
    rgba(169,143,96,.26) 50%,
    var(--line-hair) 78%, transparent 100%);
}
.divider::before,
.divider::after{
  content:""; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%) rotate(45deg);
  pointer-events:none;
}
.divider::before{
  width:9px; height:9px; background:var(--bg);
  box-shadow:0 0 0 1px rgba(169,143,96,.34);
}
.divider::after{
  width:3px; height:3px; background:var(--gold);
  opacity:.75;
}

/* ---- 3. Eyebrow 加兩側細線，變成有儀式感的標籤 ---- */
.eyebrow{ display:inline-flex; align-items:center; gap:16px; }
.eyebrow::before,
.eyebrow::after{
  content:""; width:clamp(22px,3vw,46px); height:1px; flex:none;
  background:linear-gradient(90deg, transparent, var(--gold-dim));
}
.eyebrow::after{ background:linear-gradient(90deg, var(--gold-dim), transparent); }
/* 置中標題區塊的 eyebrow 左右對稱，非置中的只留右邊那道 */
.head:not(.head--center) .eyebrow::before,
.hero-inner .eyebrow::before,
.page-hero-inner .eyebrow::before{ display:none; }

/* ---- 7. 章節序號：巨大的裝飾數字襯在標題後 ---- */
.head{ position:relative; }
.head[data-ord]::before{
  content:attr(data-ord);
  position:absolute; right:0; top:-.34em;
  font-family:var(--disp); font-size:clamp(5rem,13vw,11rem); line-height:1;
  color:transparent; -webkit-text-stroke:1px rgba(169,143,96,.09);
  pointer-events:none; user-select:none; z-index:0;
}
.head > *{ position:relative; z-index:1; }

/* ---- 8. 首字放大：段落的古典排版手法 ---- */
.lede--drop::first-letter{
  float:left; font-family:var(--disp); font-size:3.6em; line-height:.82;
  margin:.06em .16em 0 0; color:var(--gold-soft); font-weight:300;
}

/* ---- 10. 資訊列表：左側金線 ＋ 標籤小寫飾字 ---- */
.info li{
  border-bottom:1px solid var(--line-hair);
  padding:22px 0 22px 22px; position:relative;
}
.info li::before{
  content:""; position:absolute; left:0; top:26px;
  width:8px; height:1px; background:var(--gold-dim);
}
.info li b{
  font-family:var(--sans); font-size:.58rem; font-weight:400;
  letter-spacing:.38em; text-transform:uppercase; color:var(--gold-dim);
}

/* ---- 11. 頁首頁尾的金色細飾線 ---- */
.site-header::after{
  content:""; position:absolute; left:var(--pad); right:var(--pad); bottom:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--line-hair) 30%, var(--line-hair) 70%, transparent);
  opacity:0; transition:opacity .5s var(--ease);
}
.site-header.is-stuck::after{ opacity:1; }

/* ---- 12. 手機降級 ---- */
@media (max-width:768px){
  .head[data-ord]::before{ font-size:clamp(4rem,20vw,7rem); opacity:.6; }
  .curtain--arch{ border-radius:clamp(80px,30vw,140px) clamp(80px,30vw,140px) 0 0; }
  body{ background-attachment:scroll; }
}


/* =========================================================
   版面重構
   宮廷感來自「對稱」與「拱形」。
   左對齊 ＋ 三欄卡片是簡約風的骨架，這裡整個換掉。
   ========================================================= */

/* ---------- 1. 拱門：全站共用的構圖母題 ----------
   金線用 inset box-shadow 畫，把 ::before / ::after 讓給
   .curtain 的揭幕動畫，兩者才能疊在同一個元素上。 */
.arch{
  position:relative; overflow:hidden;
  border-radius:999px 999px 0 0 / 46% 46% 0 0;
  box-shadow:inset 0 0 0 1px rgba(169,143,96,.26);
}
.arch > .media,
.arch > img{ border-radius:inherit; }
/* 雙層金線：只用在 hero 與 CTA 這種不做揭幕的大拱門 */
.arch--inner::before{
  content:""; position:absolute; inset:clamp(12px,1.4vw,22px); z-index:5;
  pointer-events:none; border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(169,143,96,.13);
}
/* 揭幕遮罩與內框都跟著拱形走 */
.curtain.arch{ box-shadow:inset 0 0 0 1px rgba(169,143,96,.26), 0 36px 90px rgba(0,0,0,.6); }
.curtain.arch::after,
.curtain.arch::before{ border-radius:inherit; }

/* ---------- 2. HERO：對稱的門洞構圖 ---------- */
.hero--gate{
  position:relative; min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; text-align:center;
  padding:clamp(120px,14vh,180px) var(--pad) clamp(80px,10vh,120px);
}
.hero-arch{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(78vw,880px); height:min(112vh,1120px);
  z-index:0;
}
.hero-arch .media{ position:absolute; inset:0; }
.hero-arch::before{
  content:""; position:absolute; inset:0; z-index:4;
  background:linear-gradient(180deg,
    rgba(10,9,8,.62) 0%, rgba(10,9,8,.42) 34%,
    rgba(10,9,8,.72) 72%, rgba(10,9,8,.94) 100%);
  border-radius:inherit;
}
/* 拱門兩側的落地暗幕，讓視線收在中央 */
.hero--gate::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, var(--bg) 0%, rgba(10,9,8,.55) 22%, transparent 44%,
                    transparent 56%, rgba(10,9,8,.55) 78%, var(--bg) 100%),
    radial-gradient(90% 70% at 50% 42%, transparent 30%, rgba(0,0,0,.55) 100%);
}
.hero--gate .hero-inner{
  position:relative; z-index:3;
  max-width:min(92vw,860px); margin:0 auto; padding:0;
}
.hero--gate .eyebrow{ justify-content:center; }
.hero--gate .display{
  max-width:none; margin:clamp(26px,3.4vh,40px) 0 0;
  font-size:clamp(2.4rem,6.4vw,5.4rem);
}
.hero--gate .lede{
  margin:clamp(28px,3.6vh,44px) auto 0; max-width:min(100%, 32em);
  color:var(--fg-2);
}
.hero--gate .hero-actions{ justify-content:center; margin-top:clamp(38px,5vh,60px); }

/* 皇冠壓在標題上方，強化中軸 */
.hero-crest{
  display:block; width:clamp(52px,6vw,84px); height:auto; margin:0 auto clamp(22px,3vh,34px);
  opacity:.9; filter:drop-shadow(0 6px 22px rgba(0,0,0,.7));
}

/* ---------- 3. 序章：置中的品牌陳述 ---------- */
.prologue{ text-align:center; }
.prologue .shell{ max-width:820px; }
.prologue .eyebrow{ justify-content:center; }
.prologue h2{
  font-family:var(--disp); font-weight:300;
  font-size:clamp(1.7rem,3.6vw,3rem); line-height:1.6;
  letter-spacing:.09em; color:var(--fg);
  margin:clamp(26px,3vw,40px) 0 0;
}
.prologue p{ margin:clamp(26px,3vw,38px) auto 0; max-width:min(100%, 38em); color:var(--fg-2); }
.prologue-ord{
  font-family:var(--disp); font-size:.9rem; letter-spacing:.5em; text-indent:.5em;
  color:var(--gold-deep); display:block; margin-bottom:26px;
}

/* ---------- 4. 服務：編年式橫列，取代三欄卡片 ---------- */
.ledger{ list-style:none; margin:0; padding:0; }
.ledger > li{
  position:relative;
  display:grid; grid-template-columns:1fr minmax(280px,42%);
  align-items:center; gap:clamp(36px,5vw,88px);
  padding:clamp(56px,6vw,96px) 0;
  border-top:1px solid var(--line-hair);
}
.ledger > li:last-child{ border-bottom:1px solid var(--line-hair); }
.ledger > li:nth-child(even){ grid-template-columns:minmax(280px,42%) 1fr; }
.ledger > li:nth-child(even) .ledger-txt{ order:2; }
.ledger > li:nth-child(even) .ledger-fig{ order:1; }

.ledger-ord{
  display:block; font-family:var(--disp); font-weight:300;
  font-size:clamp(2.6rem,5vw,4.4rem); line-height:1;
  color:transparent; -webkit-text-stroke:1px rgba(169,143,96,.38);
  letter-spacing:.06em; margin-bottom:clamp(18px,2vw,28px);
}
.ledger-txt h3{
  font-family:var(--disp); font-weight:300;
  font-size:clamp(1.6rem,3.4vw,2.7rem); line-height:1.35;
  letter-spacing:.07em; color:var(--fg); margin:0;
}
.ledger-en{
  display:block; margin-top:12px;
  font-family:var(--sans); font-size:.58rem; font-weight:400;
  letter-spacing:.42em; text-indent:.42em; color:var(--gold-dim);
  text-transform:uppercase;
}
.ledger-txt p{ margin:clamp(20px,2.4vw,30px) 0 0; max-width:min(100%, 33em); color:var(--fg-2); }
.ledger-txt ul{
  list-style:none; margin:clamp(22px,2.6vw,32px) 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:10px 0;
}
.ledger-txt ul li{
  font-size:.74rem; letter-spacing:.16em; color:var(--muted);
  padding:0 18px; border-right:1px solid var(--line-hair);
}
.ledger-txt ul li:first-child{ padding-left:0; }
.ledger-txt ul li:last-child{ border-right:0; }
.ledger-fig .arch{ aspect-ratio:3/4; }
.ledger-fig .media{ position:absolute; inset:0; }

@media (max-width:900px){
  .ledger > li,
.ledger > li:nth-child(even){ grid-template-columns:1fr; gap:34px; }
  .ledger > li:nth-child(even) .ledger-txt,
.ledger > li:nth-child(even) .ledger-fig{ order:initial; }
  .ledger-fig .arch{ aspect-ratio:4/3; }
}

/* ---------- 5. 置中的章節標頭 ---------- */
.head--center{ text-align:center; }
.head--center .eyebrow{ justify-content:center; }
.head--center .lede{ margin-left:auto; margin-right:auto; max-width:min(100%, 36em); }
.head--center[data-ord]::before{
  right:auto; left:50%; transform:translateX(-50%);
  top:-.42em;
}

/* ---------- 8. 內頁標頭也改為對稱 ---------- */
.page-hero{ text-align:center; }
.page-hero-inner{ max-width:820px; margin:0 auto; }
.page-hero-inner .eyebrow{ justify-content:center; }

/* ---------- 9. 橫向作品卡改為拱形 ---------- */
.hslide .arch{ aspect-ratio:4/5; }
.hslide .arch .media{
  position:absolute; inset:0; height:100%;
  transition:transform 1.3s var(--ease);
}
.hslide:hover .arch .media{ transform:scale(1.06); }
.hgallery-head .shell{ align-items:flex-end; }

/* ---------- 10. hero 皇冠在 reveal 前先隱藏 ---------- */
.hero-crest[data-reveal]{ opacity:0; transform:translateY(14px); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.hero-crest[data-reveal].is-in{ opacity:.9; transform:none; }

/* ---------- 11. 內頁的單純遮罩：不做開門，只淡出 ---------- */
.loader--veil{ background:var(--ink); }
.loader--veil .loader-body{ transition:opacity .5s var(--ease); }
.veil-seal{ display:grid; place-items:center; gap:20px; }
.veil-crest{
  width:clamp(44px,6vw,68px); height:auto; display:block; opacity:0;
  transform:translateY(8px);
  animation:gateIn .8s var(--ease) .05s forwards;
  filter:drop-shadow(0 6px 20px rgba(0,0,0,.7));
}
.veil-rule{
  display:block; width:min(24vw,150px); height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  transform:scaleX(0); animation:gateRule .9s var(--ease) .22s forwards;
}
.loader--veil.is-done{
  opacity:0; transform:scale(1.02);
  transition:opacity .65s var(--ease), transform .9s var(--ease);
}
.loader--veil.is-done .loader-body{ opacity:0; transition-duration:.35s; }
@media (prefers-reduced-motion:reduce){
  .veil-crest,
.veil-rule{ animation:none; opacity:1; transform:none; }
}


/* =========================================================
   手機版總整
   前面新增的元件都寫在既有 media query 之後，
   會反過來蓋掉手機規則。這一段放在檔案最後，統一收尾。
   ========================================================= */

/* ---------- 平板以下 ---------- */
@media (max-width:900px){

  /* HERO：拱門改為滿版，文字不再擠在窄拱裡 */
  .hero--gate{
    display:block; min-height:auto;
    padding:clamp(140px,24vw,190px) var(--pad) clamp(64px,10vw,92px);
  }
  .hero--gate::before{
    /* 兩側落地暗幕在窄螢幕會把中間夾死，改成單純的上下壓暗 */
    background:linear-gradient(180deg,
      rgba(10,9,8,.72) 0%, rgba(10,9,8,.30) 38%,
      rgba(10,9,8,.62) 78%, var(--bg) 100%);
  }
  .hero-arch{
    left:0; top:0; transform:none;
    width:100%; height:100%;
    border-radius:44% 44% 0 0 / 14% 14% 0 0;
    translate:none !important;
  }
  .hero--gate .hero-inner{ max-width:100%; }
  .hero--gate .display{ font-size:clamp(2.1rem,8.2vw,3.2rem); letter-spacing:.05em; }
  .hero--gate .lede{ font-size:.95rem; line-height:1.95; }
  .hero--gate .lede br{ display:none; }
  .hero-crest{ width:clamp(46px,12vw,62px); }
  .hero-axis{ height:clamp(46px,8vh,70px); }
  .hero-actions{ gap:12px; }
  .hero-actions .btn{ flex:1 1 auto; min-width:0; padding:17px 22px; }

  /* 巨大羅馬序號在窄螢幕會壓到標題 */
  .head[data-ord]::before{ font-size:clamp(3.4rem,17vw,5.6rem); opacity:.5; }

  /* 橫向作品：改為直向堆疊（重新宣告，蓋掉後面的桌機規則） */
  /* width:max-content 在直向堆疊時會跟 .hslide 的 100% 互相循環，必須解掉 */
  .htrack{
    transform:none !important; flex-direction:column; align-items:stretch;
    width:auto; gap:40px; padding-inline:var(--pad);
  }
  .hslide{ width:100% !important; }
  .hslide .arch{ aspect-ratio:4/3; }
  .hgallery-sticky{ position:static; height:auto; }
  .hgallery-head .shell{ display:block; }
  .hgallery-count{ display:none; }

  /* CTA 拱門 */
  .cta--gate{ padding:clamp(96px,18vw,140px) var(--pad); }
  .cta--gate .cta-arch{ width:100%; height:100%; border-radius:40% 40% 0 0 / 12% 12% 0 0; }
  .cta--gate::before{ background:linear-gradient(180deg, rgba(10,9,8,.6), rgba(10,9,8,.2) 40%, var(--bg) 100%); }

  /* 編年橫列的序號與圖框 */
  .ledger > li{ padding:clamp(44px,8vw,64px) 0; }
  .ledger-ord{ font-size:clamp(2.2rem,9vw,3rem); margin-bottom:14px; }
  .ledger-fig .arch{ aspect-ratio:4/3; }
  .ledger-txt ul{ gap:8px 0; }
  .ledger-txt ul li{ padding:0 12px; font-size:.7rem; }

  /* 地圖 */
  .map-frame{ aspect-ratio:4/3; }
}

/* ---------- 手機 ---------- */
@media (max-width:640px){
  :root{ --pad:20px; }

  /* 城堡門：門扇變得又窄又高，雕花比例會壞掉，這裡整個簡化 */
  .loader--gate{ perspective:820px; }
  .gate-orn{ inset:16px 12px; }
  .gate-orn::before{ inset:9px; }
  .gate-orn::after{ display:none; }          /* 拱心在窄門上會扁掉，拿掉 */
  .gate-leaf::after{ height:52px; }
  .gate-leaf--l::after{ right:12px; }
  .gate-leaf--r::after{ left:12px; }
  .loader.is-done .gate-leaf--l{ transform:translateZ(1px) rotateY(-96deg); }
  .loader.is-done .gate-leaf--r{ transform:translateZ(1px) rotateY(96deg); }

  .gate-crown{ width:clamp(66px,22vw,90px); }
  .gate-rule{ width:min(52vw,190px); margin:18px auto; }
  .gate-word{ font-size:1.05rem; letter-spacing:.38em; text-indent:.38em; }
  .gate-sub{ font-size:.6rem; letter-spacing:.34em; text-indent:.34em; margin-top:11px; }
  .gate-seam{ width:clamp(90px,42vw,180px); filter:blur(8px); }

  .veil-crest{ width:clamp(40px,13vw,54px); }
  .veil-rule{ width:min(40vw,120px); }

  /* 版面節奏收緊：手機不需要桌機那種留白 */
  .section{ padding:clamp(72px,14vw,110px) 0; }
  .section--tight{ padding:clamp(56px,11vw,84px) 0; }
  .head{ margin-bottom:clamp(38px,8vw,56px); }
  body{ font-size:15px; line-height:1.95; }
  .lede{ font-size:.95rem; line-height:2; }

  .h1{ font-size:clamp(1.7rem,7.4vw,2.4rem); letter-spacing:.05em; }
  .h2{ font-size:clamp(1.3rem,5.6vw,1.75rem); }
  .prologue h2{ font-size:clamp(1.3rem,5.6vw,1.85rem); line-height:1.75; }
  .prologue h2 br{ display:none; }
  .prologue-ord{ font-size:.7rem; letter-spacing:.38em; text-indent:.38em; margin-bottom:18px; }

  /* eyebrow 兩側的線在窄螢幕會把字擠掉 */
  .eyebrow{ gap:10px; font-size:.56rem; letter-spacing:.34em; text-indent:.34em; }
  .eyebrow::before,.eyebrow::after{ width:16px; }

  /* 引言 */
  .pullquote{ padding:clamp(34px,8vw,48px) 4vw; font-size:clamp(1.1rem,5.2vw,1.45rem); line-height:1.75; }
  .pullquote br{ display:none; }
  .pullquote::before,.pullquote::after{ font-size:2rem; }
  .pullquote cite{ font-size:.56rem; letter-spacing:.3em; text-indent:.3em; margin-top:20px; }

  /* 中軸階梯 */
  .ladder > li{ padding:clamp(28px,7vw,40px) 0; }
  .ladder-ord{ width:44px; height:44px; font-size:.82rem; margin-bottom:16px; }
  .ladder h3{ font-size:clamp(1.1rem,5vw,1.35rem); }
  .ladder p{ font-size:.9rem; }

  /* 編年橫列 */
  .ledger-txt h3{ font-size:clamp(1.3rem,6vw,1.7rem); }
  .ledger-txt p{ font-size:.92rem; }

  /* 卡片與按鈕 */
  .card{ padding:clamp(28px,7vw,40px); }
  .btn{ padding:16px 26px; font-size:.66rem; letter-spacing:.24em; }
  .btn--lg{ padding:18px 32px; }

  /* 序號浮水印在手機幾乎只會礙事 */
  .head[data-ord]::before{ display:none; }

  /* 首字放大在窄欄會擠壞行 */
  .lede--drop::first-letter{ font-size:2.6em; }

  /* 資訊列表 */
  .info li{ padding:18px 0 18px 18px; }
  .info li b{ font-size:.55rem; letter-spacing:.3em; }

  /* 頁尾 */
  .foot-mark{ font-size:clamp(2.4rem,18vw,4.6rem); }
  .foot-bottom{ flex-direction:column; gap:10px; text-align:center; font-size:.64rem; }

  /* 懸浮工具列縮一點，別擋住內容 */
  .dock{ right:12px; bottom:14px; gap:9px; }
  .dock-btn{ width:44px; height:44px; }
  .dock-btn svg{ width:18px; height:18px; }
  .dock-btn--top img{ width:56px; }
  .dock-btn--top::before{ width:70px; height:70px; }
}

/* ---------- 極窄機型 ---------- */
@media (max-width:380px){
  .hero-actions{ flex-direction:column; }
  .hero-actions .btn{ width:100%; }
  .gate-word{ font-size:.92rem; letter-spacing:.3em; text-indent:.3em; }
  .ledger-txt ul{ flex-direction:column; }
  .ledger-txt ul li{ padding:0; border-right:0; }
}

/* ---------- 橫置手機：門與 hero 不要爆高 ---------- */
@media (max-height:520px) and (orientation:landscape){
  .hero--gate{ padding-top:clamp(100px,18vh,130px); }
  .gate-crown{ width:64px; }
  .gate-rule{ margin:14px auto; }
  .gate-word{ font-size:1rem; }
}

/* ---------- 全站防橫向溢出 ---------- */
html,
body{ max-width:100%; overflow-x:hidden; }
img,
iframe,
video,
svg{ max-width:100%; }


/* =========================================================
   手機版設計
   手機不是縮小的桌機。直式螢幕又高又窄，
   正好適合「門洞」這個母題 —— 上一版把拱門壓扁是走錯方向。
   ========================================================= */
@media (max-width:900px){

  /* ---- 1. HERO：內縮的門洞，內容站在門裡 ---- */
  .hero--gate{
    display:grid; place-items:center;
    min-height:100svh; padding:0;
  }
  .hero-arch{
    left:var(--portal-x,26px); right:var(--portal-x,26px);
    top:clamp(88px,12vh,104px); bottom:clamp(96px,13vh,124px);
    width:auto; height:auto; transform:none; translate:none !important;
    border-radius:999px 999px 0 0 / 40% 40% 0 0;
    box-shadow:inset 0 0 0 1px rgba(169,143,96,.32),
               0 40px 90px rgba(0,0,0,.6);
  }
  .hero-arch.arch--inner::before{
    inset:11px; border-radius:inherit;
    box-shadow:inset 0 0 0 1px rgba(169,143,96,.16);
  }
  .hero-arch::before{
    /* 門洞內側壓暗，文字才站得住 */
    background:linear-gradient(180deg,
      rgba(10,9,8,.80) 0%, rgba(10,9,8,.60) 34%,
      rgba(10,9,8,.82) 74%, rgba(10,9,8,.95) 100%);
  }
  /* 門外的地板陰影，讓門像立在空間裡 */
  .hero--gate::before{
    background:
      radial-gradient(70% 40% at 50% 100%, rgba(169,143,96,.07), transparent 70%),
      linear-gradient(180deg, var(--bg) 0%, transparent 18%, transparent 78%, var(--bg) 100%);
  }
  .hero--gate .hero-inner{
    max-width:none; width:100%;
    padding:0 clamp(34px,10vw,52px);
  }
  .hero-crest{ width:clamp(44px,11vw,58px); margin-bottom:clamp(16px,2.6vh,24px); }
  .hero--gate .display{
    font-size:clamp(2rem,8.6vw,2.9rem); line-height:1.24; letter-spacing:.06em;
    margin-top:clamp(16px,2.4vh,24px);
  }
  .hero--gate .lede{
    margin-top:clamp(18px,2.6vh,26px);
    font-size:.88rem; line-height:1.95; color:var(--fg-2);
  }
  .hero--gate .lede br{ display:none; }
  .hero-actions{
    flex-direction:column; align-items:stretch; gap:11px;
    margin-top:clamp(24px,3.4vh,34px);
  }
  .hero-actions .btn{ width:100%; padding:15px 20px; font-size:.64rem; }
  /* 中軸線改成門檻下方的短線 */
  .hero-axis{ height:clamp(38px,6vh,58px); bottom:clamp(30px,5vh,48px); }

  /* ---- 2. 選單：全螢幕的儀式，不是一份清單 ---- */
  .drawer{
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    background:
      radial-gradient(120% 70% at 50% 0%, rgba(169,143,96,.09), transparent 60%),
      linear-gradient(180deg, #0C0B0A, #070606);
    place-items:stretch;
  }
  .drawer::before{
    /* 頂部的皇冠 */
    content:""; position:absolute; left:50%; top:clamp(96px,14vh,132px);
    width:46px; height:46px; transform:translateX(-50%);
    background:url("../img/logo/raurell-crown.png") center/contain no-repeat;
    opacity:0; transition:opacity .6s var(--ease) .1s;
  }
  .drawer.is-open::before{ opacity:.85; }
  .drawer ul{
    align-self:center; width:100%;
    padding:clamp(150px,22vh,200px) clamp(30px,9vw,52px) clamp(120px,18vh,160px);
  }
  .drawer li{
    margin:0; padding:clamp(18px,2.6vh,26px) 0;
    border-bottom:1px solid var(--line-hair);
  }
  .drawer li:first-child{ border-top:1px solid var(--line-hair); }
  .drawer a{
    display:flex; align-items:baseline; justify-content:center; gap:14px;
    font-family:var(--disp); font-weight:300;
    font-size:clamp(1.5rem,7vw,2rem); letter-spacing:.16em;
  }
  .drawer .en{
    display:inline; margin:0; font-family:var(--sans);
    font-size:.54rem; letter-spacing:.34em; text-transform:uppercase;
    color:var(--gold-dim);
  }
  /* 選單底部的聯絡資訊 */
  .drawer-foot{
    margin-top:clamp(34px,5vh,50px); text-align:center;
    font-size:.64rem; letter-spacing:.16em; line-height:2.1; color:var(--muted);
  }
  .drawer-foot a{
    display:inline; font-family:var(--sans); font-size:.72rem;
    letter-spacing:.2em; color:var(--gold-dim);
  }

  /* ---- 3. 章節：每段開頭一個菱形記號，建立節奏 ---- */
  .section > .shell > .head--center{ position:relative; padding-top:34px; }
  .section > .shell > .head--center::after{
    content:""; position:absolute; left:50%; top:0;
    width:7px; height:7px; transform:translateX(-50%) rotate(45deg);
    box-shadow:0 0 0 1px rgba(169,143,96,.4);
  }

  /* ---- 4. 編年橫列：圖維持直式拱門，序號騎在拱肩上 ---- */
  .ledger > li{
    padding:clamp(52px,10vw,76px) 0;
    display:flex; flex-direction:column; gap:clamp(26px,5vw,36px);
  }
  .ledger-fig{ order:-1; }                    /* 圖在上，先看到畫面 */
  .ledger-fig .arch{
    aspect-ratio:7/8;
    width:min(78%,300px); margin:0 auto;
    border-radius:999px 999px 0 0 / 34% 34% 0 0;
  }
  .ledger-txt{ text-align:center; }
  .ledger-ord{
    font-size:clamp(1.6rem,7vw,2.2rem); margin:0 0 10px;
    -webkit-text-stroke:1px rgba(169,143,96,.45);
  }
  .ledger-txt p{ margin-left:auto; margin-right:auto; }
  .ledger-txt ul{ justify-content:center; }

  /* ---- 5. 作品卡：直式拱門，維持門洞語彙 ---- */
  .hslide .arch{
    aspect-ratio:5/6;
    border-radius:999px 999px 0 0 / 30% 30% 0 0;
  }
  .htrack{ gap:clamp(44px,9vw,60px); }

  /* ---- 6. 內頁標頭：縮成一道拱形帶 ---- */
  .page-hero{ min-height:clamp(300px,44vh,380px) !important; }
  .page-hero-inner{ padding-inline:clamp(24px,7vw,40px); }

  /* ---- 7. CTA：跟 Hero 同一個門洞語彙 ---- */
  .cta--gate{ padding:clamp(110px,20vw,150px) 0; }
  .cta--gate .cta-arch{
    left:26px; right:26px; width:auto; bottom:0; height:88%;
    border-radius:999px 999px 0 0 / 34% 34% 0 0;
    box-shadow:inset 0 0 0 1px rgba(169,143,96,.28);
  }
  .cta--gate .shell{ padding-inline:clamp(40px,12vw,60px); }

  /* ---- 8. 頁首細節 ---- */
  .site-header.is-stuck{ box-shadow:0 1px 0 var(--line-hair), 0 14px 30px rgba(0,0,0,.5); }
  .burger{ width:42px; height:42px; }
  .burger i{ left:11px; right:11px; }
}

@media (max-width:400px){
  :root{ --portal-x:20px; }
  .hero--gate .hero-inner{ padding-inline:30px; }
}


/* =========================================================
   收掉拱門造型
   拱形套在沒有實拍照的空框上，只會變成一團圓角色塊。
   門的意象留給開場的城堡雙門就好，內容區回到乾淨的方框。
   ========================================================= */
.arch,
.curtain.arch,
.hero-arch,
.ledger-fig .arch,
.hslide .arch{
  border-radius:0;
}
.arch > .media,
.arch > img,
.arch.arch--inner::before{ border-radius:0; }

/* ---- HERO：改為滿版影像 ＋ 置中文字，不再框在造型裡 ---- */
.hero-arch{
  position:absolute; left:0; right:0; top:0; bottom:0;
  width:auto; height:auto; transform:none;
  box-shadow:none;
}
.hero-arch.arch--inner::before{ display:none; }
.hero-arch::before{
  background:linear-gradient(180deg,
    rgba(10,9,8,.72) 0%, rgba(10,9,8,.42) 32%,
    rgba(10,9,8,.66) 72%, rgba(10,9,8,.92) 100%);
}
.hero--gate::before{
  background:
    radial-gradient(80% 60% at 50% 40%, transparent 34%, rgba(0,0,0,.5) 100%),
    linear-gradient(180deg, rgba(10,9,8,.5) 0%, transparent 22%, transparent 76%, var(--bg) 100%);
}

/* ---- 圖框回到細金線方框 ---- */
.arch{ box-shadow:inset 0 0 0 1px rgba(169,143,96,.20); }
.curtain.arch{ box-shadow:inset 0 0 0 1px rgba(169,143,96,.20), 0 30px 70px rgba(0,0,0,.55); }

/* ---- 手機：同樣滿版，不再做門洞內縮 ---- */
@media (max-width:900px){
  .hero--gate{
    display:block; min-height:100svh;
    padding:clamp(150px,26vw,200px) 0 clamp(80px,14vw,110px);
  }
  .hero-arch{ inset:0; border-radius:0; box-shadow:none; }
  .hero--gate .hero-inner{ padding-inline:clamp(26px,7vw,44px); }
  .hero--gate .display{ font-size:clamp(2.1rem,9vw,3rem); }

  .ledger-fig .arch{ width:100%; aspect-ratio:4/3; border-radius:0; }
  .hslide .arch{ aspect-ratio:4/3; border-radius:0; }
  .cta--gate .cta-arch{ left:0; right:0; height:100%; border-radius:0; }
  .curtain--arch{ border-radius:0; }
  .hero-arch.arch--inner::before{ display:none; }
}


/* =========================================================
   凱旋門
   跟門洞不同：方正的基座上開一個半圓拱洞，
   有楣樑、題銘、立柱、拱心石。全部用金線畫，不靠圓角切圖。
   ========================================================= */
.hero--gate{
  --mon-x:      clamp(26px,6vw,110px);   /* 基座左右內縮 */
  --mon-top:    clamp(94px,13vh,150px);  /* 基座頂 */
  --mon-bottom: clamp(34px,6vh,80px);    /* 基座底 */
  --open:       clamp(300px,52vw,720px); /* 拱洞寬度 */
  --spring:     30%;                     /* 拱起點（楣樑下方） */
  position:relative;
  display:block; min-height:100svh;
}

/* ---- 基座 ---- */
.monument{
  position:absolute; z-index:2; pointer-events:none;
  left:var(--mon-x); right:var(--mon-x);
  top:var(--mon-top); bottom:var(--mon-bottom);
  border:1px solid rgba(169,143,96,.24);
}

/* ---- 楣樑：上下兩道線夾住題銘，中間是簷口 ---- */
.mon-cornice,
.mon-entab{
  position:absolute; left:-1px; right:-1px; height:1px;
  background:linear-gradient(90deg,
    rgba(169,143,96,.10), rgba(169,143,96,.42) 22%,
    rgba(169,143,96,.42) 78%, rgba(169,143,96,.10));
}
.mon-cornice{ top:clamp(46px,7%,84px); }
.mon-entab{  top:var(--spring); }
/* 簷口下再補一道細線，做出石材的層次 */
.mon-entab::after{
  content:""; position:absolute; left:2.4%; right:2.4%; top:5px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(169,143,96,.18) 30%,
             rgba(169,143,96,.18) 70%, transparent);
}

/* ---- 立柱：拱洞兩側的壁柱 ---- */
.mon-pier{
  position:absolute; top:var(--spring); bottom:0; width:1px;
  background:linear-gradient(rgba(169,143,96,.30), rgba(169,143,96,.06));
}
.mon-pier--l{ left:calc(50% - var(--open) / 2 - clamp(16px,2.4vw,40px)); }
.mon-pier--r{ left:calc(50% + var(--open) / 2 + clamp(16px,2.4vw,40px)); }

/* ---- 拱洞：半圓拱。radius 用開口寬的一半，才是正圓不是橢圓 ---- */
.mon-opening{
  position:absolute; left:50%; transform:translateX(-50%);
  width:var(--open); top:var(--spring); bottom:0;
  border:1px solid rgba(169,143,96,.40); border-bottom:0;
  border-radius:calc(var(--open) / 2) calc(var(--open) / 2) 0 0;
}
/* 拱洞內側透光，門外壓暗 */
.mon-opening::before{
  content:""; position:absolute; inset:1px; border-radius:inherit;
  background:radial-gradient(120% 90% at 50% 88%,
    rgba(212,195,160,.09) 0%, rgba(169,143,96,.03) 40%, transparent 72%);
}
/* 拱線內再一道極細的內圈 */
.mon-opening::after{
  content:""; position:absolute;
  left:clamp(9px,1.1vw,15px); right:clamp(9px,1.1vw,15px);
  top:clamp(9px,1.1vw,15px); bottom:0;
  border:1px solid rgba(169,143,96,.14); border-bottom:0;
  border-radius:calc(var(--open) / 2) calc(var(--open) / 2) 0 0;
}

/* ---- 拱心石 ---- */
.mon-key{
  /* 拱洞上緣就是拱頂，拱心石騎在那條線上 */
  position:absolute; left:50%; top:var(--spring);
  width:clamp(14px,1.5vw,20px); height:clamp(14px,1.5vw,20px);
  transform:translate(-50%,-50%) rotate(45deg);
  background:var(--bg);
  box-shadow:0 0 0 1px rgba(169,143,96,.45);
}
.mon-key::after{
  content:""; position:absolute; inset:4px;
  background:var(--gold); opacity:.55;
}

/* ---- 內容站在拱洞裡 ---- */
.hero--gate .hero-inner{
  position:absolute; z-index:3; left:50%; transform:translateX(-50%);
  width:var(--open);
  top:var(--spring); bottom:var(--mon-bottom);
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding:clamp(20px,3vh,40px) clamp(26px,3vw,54px) clamp(28px,4vh,52px);
  max-width:none; margin:0; text-align:center;
}
.hero--gate .display{
  font-size:clamp(1.9rem,4.6vw,3.8rem); line-height:1.22; margin:0;
}
.hero--gate .lede{
  margin:clamp(18px,2.4vh,28px) 0 0; max-width:min(100%, 27em); font-size:.96rem;
}
.hero--gate .hero-actions{ margin-top:clamp(24px,3.2vh,40px); justify-content:center; }
.hero-crest{ margin:0 0 clamp(14px,2vh,22px); }
.hero--gate .eyebrow{ justify-content:center; }

/* ---- 進場：門開之後基座才浮現 ---- */
.monument{ opacity:0; transition:opacity 1.5s var(--ease) .2s; }
body.is-ready .monument{ opacity:1; }

/* ---- 凱旋門：手機 ---- */
@media (max-width:900px){
  .hero--gate{
    --mon-x:      18px;
    --mon-top:    clamp(84px,12vh,110px);
    --mon-bottom: clamp(26px,4vh,44px);
    --open:       min(78vw, 340px);
    --spring:     26%;
    padding:0;
  }
  .mon-cornice{ top:clamp(38px,6.5%,58px); }
  .mon-inscription{
    top:calc(clamp(38px,6.5%,58px) + 14px);
    font-size:.46rem; letter-spacing:.36em; text-indent:.36em;
  }
  .mon-pier{ display:none; }              /* 窄螢幕沒空間放外側壁柱 */
  .mon-entab::after{ top:4px; }
  .mon-key{ width:12px; height:12px; }
  .mon-key::after{ inset:3px; }

  .hero--gate .hero-inner{
    padding:clamp(14px,2vh,24px) 18px clamp(18px,3vh,30px);
  }
  .hero--gate .display{ font-size:clamp(1.55rem,7vw,2.2rem); line-height:1.3; }
  .hero--gate .lede{ font-size:.82rem; line-height:1.85; margin-top:14px; }
  .hero--gate .lede br{ display:none; }
  .hero-crest{ width:clamp(34px,9vw,46px); margin-bottom:12px; }
  .hero--gate .eyebrow{ font-size:.5rem; letter-spacing:.3em; text-indent:.3em; }
  .hero--gate .eyebrow::before,
  .hero--gate .eyebrow::after{ width:12px; }
  .hero-actions{ flex-direction:column; align-items:stretch; width:100%; gap:9px; margin-top:18px; }
  .hero-actions .btn{ width:100%; padding:13px 16px; font-size:.6rem; letter-spacing:.2em; }
}

/* 極窄機型：內容再收一階，確保塞得進拱洞 */
@media (max-width:380px){
  .hero--gate{ --open:min(84vw,310px); --mon-x:14px; --spring:24%; }
  .hero--gate .display{ font-size:1.45rem; }
  .hero--gate .lede{ font-size:.78rem; }
  .hero--gate .lede{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
}

/* 橫置手機：基座壓扁，拱洞放寬 */
@media (max-height:560px) and (orientation:landscape){
  .hero--gate{ --mon-top:70px; --mon-bottom:22px; --spring:34%; --open:min(56vw,480px); }
  .mon-cornice{ top:26px; }
  .mon-inscription{ top:38px; }
  .hero-crest{ display:none; }
  .hero--gate .display{ font-size:clamp(1.4rem,4vw,2rem); }
  .hero--gate .lede{ display:none; }
  .hero-actions{ flex-direction:row; }
}


/* =========================================================
   凱旋門・精修
   閣樓放品牌題銘、簷口加齒飾、拱線做雙圈、按鈕去掉大面積填色
   ========================================================= */
.hero--gate{ --spring:34%; }

/* ---- 1. 閣樓：皇冠與題銘的位置 ---- */
.mon-attic{
  position:absolute; left:8%; right:8%;
  top:calc(clamp(38px,5.6%,70px) + clamp(16px,2.2vh,26px));
  bottom:calc(100% - var(--spring) + clamp(14px,2vh,24px));
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(9px,1.3vh,15px); text-align:center;
}
.mon-crest{
  width:clamp(38px,4.4vw,62px); height:auto; display:block;
  opacity:.92; filter:drop-shadow(0 5px 18px rgba(0,0,0,.7));
}
.mon-word{
  /* 用絕對定位掛兩側細線，避免 flex 破壞字距的置中補償 */
  position:relative; display:inline-block;
  font-family:var(--disp); font-weight:300;
  font-size:clamp(.86rem,1.5vw,1.24rem);
  letter-spacing:.56em; text-indent:.56em; color:var(--fg);
}
.mon-word::before,
.mon-word::after{
  content:""; position:absolute; top:50%;
  width:clamp(18px,2.6vw,44px); height:1px;
}
.mon-word::before{
  right:calc(100% + clamp(10px,1.4vw,20px));
  background:linear-gradient(90deg, transparent, rgba(169,143,96,.5));
}
.mon-word::after{
  left:calc(100% + clamp(4px,.9vw,13px));
  background:linear-gradient(90deg, rgba(169,143,96,.5), transparent);
}
.mon-sub{
  font-family:var(--serif); font-size:clamp(.5rem,.82vw,.62rem);
  letter-spacing:.44em; text-indent:.44em; color:var(--gold-dim);
}          /* 題銘搬到閣樓了 */

/* ---- 2. 簷口：主線 ＋ 下方一排齒飾（古典建築的 dentil）---- */
.mon-cornice{ top:clamp(38px,5.6%,70px); }
.mon-dentil{
  position:absolute; left:6%; right:6%;
  top:calc(clamp(38px,5.6%,70px) + 5px);
  height:4px; opacity:.5;
  background:repeating-linear-gradient(90deg,
    rgba(169,143,96,.42) 0 1px, transparent 1px 9px);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}

/* ---- 3. 楣樑：三道線的線腳，厚薄有別 ---- */
.mon-entab{ height:1px; background:linear-gradient(90deg,
  rgba(169,143,96,.10), rgba(169,143,96,.52) 20%,
  rgba(169,143,96,.52) 80%, rgba(169,143,96,.10)); }
.mon-entab::after{ top:4px; left:1.6%; right:1.6%; }
.mon-entab::before{
  content:""; position:absolute; left:4.5%; right:4.5%; top:8px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(169,143,96,.13) 26%,
             rgba(169,143,96,.13) 74%, transparent);
}

/* ---- 4. 拱：外圈實、內圈虛，交界處留厚度 ---- */
.mon-opening{ border-color:rgba(169,143,96,.46); }
.mon-opening::after{
  left:clamp(7px,.9vw,13px); right:clamp(7px,.9vw,13px); top:clamp(7px,.9vw,13px);
  border-color:rgba(169,143,96,.17);
}
/* 拱腳兩側的柱頭橫線 */
.mon-opening::before{
  box-shadow:
    inset 0 1px 0 0 rgba(169,143,96,.10);
}

/* ---- 5. 拱心石：加內圈與上下的收頭 ---- */
.mon-key{
  width:clamp(16px,1.7vw,22px); height:clamp(16px,1.7vw,22px);
  box-shadow:0 0 0 1px rgba(169,143,96,.5), 0 0 18px 4px rgba(10,9,8,.9);
}
.mon-key::after{ inset:4px; background:var(--gold); opacity:.5; }

/* ---- 6. 柱腳：立柱底部的踏腳線 ---- */
.mon-plinth{
  position:absolute; left:-1px; right:-1px; bottom:0; height:1px;
  background:linear-gradient(90deg,
    transparent, rgba(169,143,96,.30) 18%,
    rgba(169,143,96,.30) 82%, transparent);
}
.mon-plinth::after{
  content:""; position:absolute; left:8%; right:8%; bottom:5px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(169,143,96,.12), transparent);
}
.mon-pier{ background:linear-gradient(rgba(169,143,96,.34), rgba(169,143,96,.08)); }

/* ---- 7. eyebrow 兩側對稱，不要只剩單邊那一撇 ---- */
.hero-inner .eyebrow::before,
.page-hero-inner .eyebrow::before{ display:inline-block; }

/* ---- 8. 按鈕：拿掉大面積填色，改細金線 ＋ 極淡的金霧 ---- */
.btn--solid{
  color:var(--gold-soft);
  border-color:rgba(169,143,96,.55);
  background:linear-gradient(180deg, rgba(169,143,96,.14), rgba(169,143,96,.05));
}
.btn--solid::before{ transform:translateY(101%); }        /* 預設不填色 */
.btn--solid:hover::before{ transform:translateY(0); }
.btn--solid:hover{ color:var(--ink); }
.btn--ghost{
  --c:rgba(169,143,96,.26);
  color:var(--fg-2); background:rgba(255,255,255,.012);
}
.btn--ghost:hover{ border-color:rgba(169,143,96,.55); color:var(--gold-soft); }

/* ---- 9. 佔位底圖的直紋收斂，太密會顯廉價 ---- */
.media{
  background-image:
    linear-gradient(102deg, rgba(190,163,116,.13) 0%, rgba(169,143,96,.03) 24%, transparent 48%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.16) 0 1px, transparent 1px 96px),
    linear-gradient(0deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.18) 30%, transparent 48%),
    radial-gradient(85% 65% at 22% 6%, #2B2823 0%, #161513 48%, #0A0908 100%);
}

/* ---- 10. 拱內文字再收一階，讓拱的線條當主角 ---- */
.hero--gate .display{ font-size:clamp(1.8rem,4.2vw,3.5rem); letter-spacing:.07em; }
.hero--gate .lede{ font-size:.94rem; max-width:min(100%, 26em); color:var(--fg-2); }
.hero--gate .hero-actions{ gap:14px; }

/* ---- 手機 ---- */
@media (max-width:900px){
  .hero--gate{ --spring:30%; }
  .mon-attic{
    left:10%; right:10%;
    top:calc(clamp(30px,5%,48px) + 12px);
    bottom:calc(100% - var(--spring) + 12px);
    gap:8px;
  }
  .mon-crest{ width:clamp(32px,8vw,44px); }
  .mon-word{ font-size:.76rem; letter-spacing:.42em; text-indent:.42em; }
  .mon-word::before,.mon-word::after{ width:14px; }
  .mon-word::before{ right:calc(100% + 8px); }
  .mon-word::after{ left:calc(100% + 3px); }
  .mon-sub{ font-size:.46rem; letter-spacing:.34em; text-indent:.34em; }
  .mon-cornice{ top:clamp(30px,5%,48px); }
  .mon-dentil{ top:calc(clamp(30px,5%,48px) + 4px); height:3px;
    background:repeating-linear-gradient(90deg, rgba(169,143,96,.4) 0 1px, transparent 1px 7px); }
  .mon-key{ width:13px; height:13px; }
  .mon-key::after{ inset:3.5px; }
  .hero--gate .display{ font-size:clamp(1.5rem,6.6vw,2.05rem); }
  .hero--gate .lede{ font-size:.8rem; }
}


/* =========================================================
   拱洞裡的立面線稿
   拱內不再放文字，改成一張建築立面。
   基座比例重新分配：門佔上方，標語與入口退到門下。
   ========================================================= */
.hero--gate{
  --mon-top:    clamp(84px,11vh,124px);
  --mon-bottom: clamp(128px,20vh,196px);   /* 門下留給標語與按鈕 */
  --open:       clamp(250px,32vw,470px);   /* 拱洞收窄，才有立面的縱深 */
  --spring:     32%;
  --spring-n:   .32;                       /* 同一個值的無單位版，給 calc 用 */
}

/* 線稿站在拱洞的地面上 */
.mon-scene{
  position:absolute; z-index:3; pointer-events:none;
  left:50%; transform:translateX(-50%);
  width:calc(var(--open) - clamp(26px,3vw,46px));
  /* 拱起點在版面座標中的位置 = 基座頂 + 基座高 × 拱起比例 */
  top:calc(var(--mon-top) + (100% - var(--mon-top) - var(--mon-bottom)) * var(--spring-n));
  bottom:var(--mon-bottom);
  display:flex; align-items:flex-end; justify-content:center;
  padding-bottom:clamp(2px,.6vh,8px);
}
.mon-scene picture{ display:block; width:100%; }
.mon-scene img{
  display:block; width:100%; height:auto;
  max-height:100%; object-fit:contain; object-position:bottom;
  opacity:0; transform:translateY(18px);
  transition:opacity 1.8s var(--ease) .35s, transform 1.8s var(--ease) .35s;
  filter:drop-shadow(0 18px 46px rgba(0,0,0,.75));
}
body.is-ready .mon-scene img{ opacity:.92; transform:none; }

/* 線稿背後的光，讓白線浮起來 */
.mon-scene::before{
  content:""; position:absolute; left:50%; bottom:6%;
  width:150%; height:78%; transform:translateX(-50%);
  background:radial-gradient(52% 60% at 50% 78%,
    rgba(212,195,160,.13) 0%, rgba(169,143,96,.05) 42%, transparent 74%);
  pointer-events:none;
}

/* ---- 門下的標語與入口 ---- */
.hero--gate .hero-inner{
  position:absolute; left:0; right:0; transform:none;
  top:auto; bottom:0; width:100%; height:var(--mon-bottom);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(16px,2.4vh,26px);
  padding:0 var(--pad);
}
.hero--gate .hero-actions{ margin:0; gap:14px; }

/* ---- 序章升格為頁面主標題 ---- */
.prologue-h1{
  font-family:var(--disp); font-weight:300;
  font-size:clamp(2rem,4.6vw,3.9rem); line-height:1.28;
  letter-spacing:.08em; color:var(--fg);
  margin:clamp(24px,3vw,38px) 0 0;
}
.prologue-h1 .dsp-en{ font-style:italic; color:var(--gold-soft); }

/* ---- 手機 ---- */
@media (max-width:900px){
  .hero--gate{
    --mon-top:    clamp(76px,10vh,100px);
    --mon-bottom: clamp(112px,17vh,150px);
    --open:       min(74vw,320px);
    --spring:     28%;
    --spring-n:   .28;
  }
  .mon-scene{ width:calc(var(--open) - 20px); padding-bottom:2px; }
  .hero--gate .hero-inner{ gap:14px; }
  .hero-actions{ flex-direction:row; width:auto; }
  .hero-actions .btn{ width:auto; padding:12px 20px; font-size:.58rem; letter-spacing:.18em; }
  .prologue-h1{ font-size:clamp(1.7rem,7.4vw,2.4rem); }
}
@media (max-width:380px){
  .hero--gate{ --open:min(80vw,290px); --mon-bottom:104px; }
  .hero-actions .btn{ padding:11px 15px; font-size:.55rem; letter-spacing:.14em; }
}
@media (max-height:560px) and (orientation:landscape){
  .hero--gate{ --mon-top:56px; --mon-bottom:88px; --spring:30%; --spring-n:.30; --open:min(38vw,320px); }
}


/* =========================================================
   電腦版：凱旋門收成置中的一幅版面，不再滿版
   寬螢幕上橫跨到底會把拱拉扁；收進來像一幅裱好的立面圖。
   ========================================================= */
@media (min-width:901px){
  .hero--gate{
    --plate:  min(880px, 72vw);          /* 版心寬度 */
    --mon-top:    clamp(96px,13vh,150px);
    --mon-bottom: clamp(132px,20vh,200px);
    --open:       min(340px, calc(var(--plate) * .42));
    --spring:     30%;
    --spring-n:   .30;
  }

  /* 底圖收成同寬的一片深色panel，四周留給頁面底色 */
  .hero-arch{
    left:50%; right:auto; transform:translateX(-50%);
    width:calc(var(--plate) + clamp(40px,4vw,80px));
    top:clamp(56px,8vh,92px); bottom:clamp(56px,8vh,92px);
    height:auto;
    box-shadow:0 50px 120px rgba(0,0,0,.6);
  }
  .hero-arch::before{
    background:linear-gradient(180deg,
      rgba(10,9,8,.80) 0%, rgba(10,9,8,.52) 34%,
      rgba(10,9,8,.74) 74%, rgba(10,9,8,.94) 100%);
  }
  /* panel 外緣一道極細金線 */
  .hero-arch::after{
    content:""; position:absolute; inset:0; z-index:5; pointer-events:none;
    box-shadow:inset 0 0 0 1px rgba(169,143,96,.13);
  }

  /* 基座置中收窄 */
  .monument{
    left:50%; right:auto; transform:translateX(-50%);
    width:var(--plate);
  }

  /* 兩側暗幕改成柔和的邊緣，不再把中間夾死 */
  .hero--gate::before{
    background:radial-gradient(78% 66% at 50% 46%, transparent 40%, rgba(0,0,0,.42) 100%);
  }

  /* 線稿與門下內容都跟著版心走 */
  .mon-scene{ width:calc(var(--open) - clamp(24px,2.6vw,40px)); }
  .hero--gate .hero-inner{
    left:50%; right:auto; transform:translateX(-50%);
    width:var(--plate); padding:0;
  }

  /* 中軸線收在版心底下 */
  .hero-axis{ display:none; }
}

/* 超寬螢幕：版心不再跟著長 */
@media (min-width:1600px){
  .hero--gate{ --plate:900px; }
}


/* =========================================================
   凱旋門・比例重整
   問題不是留白不夠，是柱身根本沒有東西。
   把拱放大、柱子補上凹槽壁板、整體收緊。
   ========================================================= */
@media (min-width:901px){
  .hero--gate{
    --plate:      min(760px, 60vw);
    --mon-top:    clamp(72px,9vh,104px);
    --mon-bottom: clamp(112px,15vh,164px);
    --open:       calc(var(--plate) * .60);   /* 340px → 版心的六成 */
    --spring:     25%;
    --spring-n:   .25;
  }
  .hero-arch{
    width:calc(var(--plate) + clamp(46px,4.4vw,86px));
    top:clamp(40px,5.5vh,72px); bottom:clamp(40px,5.5vh,72px);
  }
  /* 版心底色提亮一點，跟頁面底分得開 */
  .hero-arch::before{
    background:
      linear-gradient(180deg, rgba(26,24,21,.5) 0%, rgba(16,15,13,.35) 40%, rgba(10,9,8,.72) 100%),
      linear-gradient(180deg, rgba(10,9,8,.55) 0%, rgba(10,9,8,.3) 34%, rgba(10,9,8,.8) 100%);
  }
  .hero-arch::after{ box-shadow:inset 0 0 0 1px rgba(169,143,96,.20); }

  /* ---- 柱身：凹槽壁板，凱旋門的柱子本來就不是空的 ---- */
  .mon-pier{
    top:calc(var(--spring) + clamp(16px,2vh,26px));
    bottom:clamp(18px,2.4vh,30px);
    left:auto; right:auto;
    width:calc((100% - var(--open)) / 2 - clamp(30px,3.4vw,56px));
    background:linear-gradient(180deg, rgba(255,255,255,.012), rgba(255,255,255,0));
    box-shadow:inset 0 0 0 1px rgba(169,143,96,.14);
  }
  .mon-pier--l{ left:clamp(15px,1.7vw,28px); }
  .mon-pier--r{ right:clamp(15px,1.7vw,28px); }
  /* 壁板內圈 */
  .mon-pier::before{
    content:""; position:absolute; inset:clamp(8px,.9vw,13px);
    box-shadow:inset 0 0 0 1px rgba(169,143,96,.075);
  }
  /* 壁板中央的小菱飾 */
  .mon-pier::after{
    content:""; position:absolute; left:50%; top:50%;
    width:9px; height:9px; transform:translate(-50%,-50%) rotate(45deg);
    box-shadow:0 0 0 1px rgba(169,143,96,.26);
  }

  /* ---- 閣樓收緊，皇冠與題銘靠攏 ---- */
  .mon-cornice{ top:clamp(30px,4.4%,52px); }
  .mon-dentil{ top:calc(clamp(30px,4.4%,52px) + 5px); }
  .mon-attic{
    left:14%; right:14%;
    top:calc(clamp(30px,4.4%,52px) + clamp(12px,1.6vh,20px));
    bottom:calc(100% - var(--spring) + clamp(10px,1.4vh,18px));
    gap:clamp(7px,.9vh,11px);
  }
  .mon-crest{ width:clamp(34px,3.4vw,48px); }
  .mon-word{ font-size:clamp(.8rem,1.2vw,1.05rem); letter-spacing:.5em; text-indent:.5em; }
  .mon-sub{ font-size:.54rem; }

  /* ---- 線稿放大，貼滿拱洞寬度 ---- */
  .mon-scene{
    width:calc(var(--open) - clamp(14px,1.4vw,24px));
    padding-bottom:clamp(10px,1.4vh,18px);
  }
  .mon-scene img{ opacity:0; }
  body.is-ready .mon-scene img{ opacity:.95; }

  /* ---- 門下：確保按鈕看得到 ---- */
  .hero--gate .hero-inner{
    height:var(--mon-bottom);
    gap:clamp(14px,1.8vh,22px);
    justify-content:center;
  }
  .hero--gate .hero-actions{ margin:0; }
  .hero--gate .btn{ padding:15px 32px; font-size:.66rem; }
}

/* 超寬螢幕鎖住版心 */
@media (min-width:1700px){
  .hero--gate{ --plate:790px; }
}

/* 矮螢幕（筆電）：垂直吃緊時整體再收一階 */
@media (min-width:901px) and (max-height:900px){
  .hero--gate{
    --mon-top:60px; --mon-bottom:104px;
    --plate:min(660px,52vw); --spring:23%; --spring-n:.23;
  }
  .hero-arch{ top:28px; bottom:28px; }
  .mon-crest{ width:38px; }
}


/* =========================================================
   凱旋門・對齊修正
   之前版面、基座、按鈕各自從不同基準算，所以接不起來。
   這裡全部從 --plate-y 推導，只有一個基準。
   ========================================================= */
@media (min-width:901px){
  .hero--gate{
    --plate-y:    clamp(38px,5vh,68px);                              /* 版面距視窗上下 */
    --mon-inset:  clamp(26px,3vh,44px);                              /* 基座距版面頂 */
    --mon-band:   clamp(92px,11.5vh,128px);                          /* 門下標語與按鈕的帶狀區 */
    --mon-top:    calc(var(--plate-y) + var(--mon-inset));
    --mon-bottom: calc(var(--plate-y) + var(--mon-band));
  }

  /* 版面 */
  .hero-arch{ top:var(--plate-y); bottom:var(--plate-y); }

  /* 基座：頂與底都在版面之內 */
  .monument{ top:var(--mon-top); bottom:var(--mon-bottom); }

  /* 門下帶狀區：正好是柱腳線到版面下緣之間，不會掉出版面 */
  .hero--gate .hero-inner{
    bottom:var(--plate-y);
    height:var(--mon-band);
    gap:clamp(12px,1.6vh,20px);
  }

  /* ---- 柱身：從楣樑一路落到柱腳，中間不留縫 ---- */
  .mon-pier{
    top:var(--spring); bottom:0;
    width:calc((100% - var(--open)) / 2 - clamp(24px,2.6vw,44px));
    box-shadow:none; background:none;
  }
  .mon-pier--l{ left:clamp(12px,1.4vw,22px); }
  .mon-pier--r{ right:clamp(12px,1.4vw,22px); }
  /* 嵌板往內縮，柱身本體則是滿的 */
  .mon-pier::before{
    inset:clamp(20px,2.6vh,34px) clamp(14px,1.4vw,22px);
    box-shadow:inset 0 0 0 1px rgba(169,143,96,.15);
    background:linear-gradient(180deg, rgba(255,255,255,.014), rgba(255,255,255,0) 70%);
  }
  .mon-pier::after{ top:50%; }

  /* ---- 柱腳線加重：立面要站得住，得有地面 ---- */
  .mon-plinth{
    height:1px;
    background:linear-gradient(90deg,
      transparent, rgba(169,143,96,.42) 12%,
      rgba(169,143,96,.42) 88%, transparent);
  }
  .mon-plinth::after{ bottom:-4px; left:4%; right:4%;
    background:linear-gradient(90deg, transparent, rgba(169,143,96,.16), transparent); }

  /* ---- 線稿踩在柱腳線上，不再懸空 ---- */
  .mon-scene{ padding-bottom:0; }
  .mon-scene img{ filter:drop-shadow(0 14px 34px rgba(0,0,0,.8)); }

  /* ---- 齒飾太像壞掉的虛線，改密一點、淡一點 ---- */
  .mon-dentil{
    height:3px; opacity:.34;
    background:repeating-linear-gradient(90deg,
      rgba(169,143,96,.5) 0 1px, transparent 1px 6px);
  }

  /* ---- 門下的題銘貼著柱腳線，像刻在基座上 ---- */
  .hero--gate .hero-inner .eyebrow{ margin:0; font-size:.56rem; letter-spacing:.42em; text-indent:.42em; }
}

/* 矮螢幕：帶狀區與內縮再收，維持同一組基準 */
@media (min-width:901px) and (max-height:900px){
  .hero--gate{
    --plate-y:26px; --mon-inset:22px; --mon-band:84px;
    --plate:min(620px,50vw); --spring:22%; --spring-n:.22;
  }
  .hero--gate .btn{ padding:12px 24px; font-size:.6rem; }
}


/* =========================================================
   去掉版面 panel
   panel 有自己的填色，邊緣就是一條硬邊；
   加上基座本身也有外框，變成兩層矩形互相打架。
   整個 Hero 已經是線稿 ＋ 金線，底下不需要墊色塊。
   ========================================================= */
@media (min-width:901px){
  /* panel 的填色與外框整個拿掉，只留一團沒有邊界的柔光 */
  .hero-arch{
    inset:0; width:auto; height:auto; transform:none;
    box-shadow:none; background:none;
  }
  .hero-arch .media{
    background-color:transparent;
    background-image:none;
  }
  .hero-arch::after{ display:none; }        /* panel 外框，多餘 */
  .hero-arch::before{
    /* 唯一的背景：中央一團暖光，四周無邊界地散掉 */
    background:
      radial-gradient(46% 52% at 50% 44%, rgba(169,143,96,.085) 0%, transparent 68%),
      radial-gradient(80% 70% at 50% 50%, transparent 34%, rgba(0,0,0,.34) 100%);
  }
  .hero--gate::before{ background:none; }

  /* 基座成為畫面上唯一的框，線再收細一點 */
  .monument{ border-color:rgba(169,143,96,.20); }
  .mon-pier::before{ background:none; }      /* 嵌板不填色，只留線 */

  /* 拱洞內側的透光也收斂，避免又冒出一塊色 */
  .mon-opening::before{
    background:radial-gradient(120% 88% at 50% 90%,
      rgba(212,195,160,.07) 0%, rgba(169,143,96,.02) 44%, transparent 74%);
  }
}


/* =========================================================
   雕花
   直線與圓弧撐不起奢華，缺的是曲線的細節。
   全部用 inline SVG 的細線畫，跟金線同一套語言。
   ========================================================= */
.orn{
  display:block; width:100%; height:auto;
  stroke-linecap:round; stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  color:rgba(169,143,96,.42);
  opacity:0; transform:translateY(8px);
  transition:opacity 1.6s var(--ease), transform 1.6s var(--ease);
}
body.is-ready .orn{ opacity:1; transform:none; }

/* ---- 3. 柱身嵌板中央的花飾 ---- */
.mon-pier{ display:flex; align-items:center; justify-content:center; }
.orn-rosette{
  width:clamp(26px,2.8vw,42px); height:auto;
  color:rgba(169,143,96,.30); transition-delay:.22s;
}
.mon-pier::after{ display:none; }          /* 舊的小菱飾換成花飾 */

/* ---- 4. 題銘下的月桂枝 ---- */
.orn-laurel{
  width:clamp(120px,15vw,190px); margin-top:clamp(4px,.7vh,9px);
  color:rgba(169,143,96,.36); transition-delay:.28s;
}

/* ---- 5. 拱洞內緣的連續齒紋，讓拱不是一條光禿的線 ---- */
.mon-opening::after{
  border-color:rgba(169,143,96,.13);
}
.mon-opening{
  background-image:
    radial-gradient(circle at 50% 0, transparent 0, transparent 0);
}

/* ---- 手機：雕花縮小，四角只留上面兩個 ---- */
@media (max-width:900px){
  .mon-orn{ width:clamp(32px,9vw,52px); }
  .mon-orn--bl,.mon-orn--br{ display:none; }
  .mon-swag{ width:calc(var(--open) * .8); margin-top:10px; }
  .orn-laurel{ width:clamp(96px,30vw,140px); }
  .orn-rosette{ width:26px; }
}
@media (prefers-reduced-motion:reduce){
  .orn{ opacity:1; transform:none; transition:none; }
}


/* =========================================================
   雕花・精修
   線寬分階、金屬漸層、刻線式的進場、拱券飾帶
   ========================================================= */

/* ---- 1. 線寬分階：主線 1、副線 .7、極細 .55 ---- */
.orn{ stroke-width:1; }
.orn .orn-heavy,
.orn .orn-heavy path{ stroke-width:1.1; }
.orn .orn-light,
.orn .orn-light path{ stroke-width:.7; }
.orn g[opacity] path{ stroke-width:.75; }

/* ---- 2. 金屬漸層：上緣受光、下緣沉入陰影 ---- */
.orn path,
.orn circle{ stroke:url(#ornGold); }
.orn .orn-bead circle{ stroke:none; fill:rgba(178,151,105,.5); }

/* ---- 3. 進場改成「刻出來」：線條沿路徑畫開 ---- */
.orn{ opacity:1; transform:none; transition:none; }
.orn path,
.orn circle{
  stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset 2.6s var(--ease);
}
body.is-ready .orn path,
body.is-ready .orn circle{ stroke-dashoffset:0; }
/* 珠飾不畫線，改淡入 */
.orn .orn-bead circle{
  stroke-dasharray:none; stroke-dashoffset:0;
  opacity:0; transition:opacity 1.2s var(--ease) 1.5s;
}
body.is-ready .orn .orn-bead circle{ opacity:1; }
/* 各部位錯開 */
.mon-archivolt .orn path{ transition-duration:2.9s; transition-delay:.15s; }
.orn-rosette path,
.orn-rosette circle{ transition-delay:.8s; }
.orn-laurel path,
.orn-laurel circle{ transition-delay:.5s; }

/* ---- 4. 拱券飾帶：貼齊拱洞上緣的半圓，2:1 才不會變橢圓 ---- */
.mon-archivolt{
  position:absolute; z-index:2; pointer-events:none;
  left:50%; top:var(--spring); transform:translateX(-50%);
  width:var(--open); height:calc(var(--open) / 2);
}
.mon-archivolt .orn{ height:100%; }

/* 有了飾帶，原本那兩圈 CSS 拱線收淡，避免變成四條平行線 */
.mon-opening{ border-color:rgba(169,143,96,.16); }
.mon-opening::after{ border-color:rgba(169,143,96,.08); }

/* ---- 5. 齒飾換成串珠線腳，比虛線精緻 ---- */
.mon-dentil{
  height:5px; opacity:.5;
  background:
    radial-gradient(circle at 3px 2.5px, rgba(178,151,105,.55) 0 1.1px, transparent 1.2px);
  background-size:9px 5px; background-repeat:repeat-x;
}

/* ---- 6. 拱心石：加一道刻線 ---- */
.mon-key::before{
  content:""; position:absolute; inset:0;
  box-shadow:inset 0 0 0 1px rgba(224,210,178,.16);
}

/* ---- 7. 皇冠與雕花同一個受光方向 ---- */
.mon-crest{ filter:drop-shadow(0 4px 14px rgba(0,0,0,.75)) brightness(1.04); }

@media (max-width:900px){
  .mon-archivolt{ width:var(--open); height:calc(var(--open) / 2); }
  .mon-dentil{ height:4px; background-size:7px 4px;
    background:radial-gradient(circle at 2.5px 2px, rgba(178,151,105,.5) 0 1px, transparent 1.1px);
    background-size:7px 4px; background-repeat:repeat-x; }
}
@media (prefers-reduced-motion:reduce){
  .orn path,
.orn circle{ stroke-dashoffset:0; transition:none; }
  .orn .orn-bead circle{ opacity:1; }
}


/* =========================================================
   電腦版：拿掉基座外框
   四角捲葉本來就在界定範圍，再加一圈矩形反而把畫面關起來。
   ========================================================= */
@media (min-width:901px){
  .monument{ border:0; }

  /* 沒有外框之後，橫線不要再頂到邊，兩端要收得掉 */
  .mon-cornice,
  .mon-entab{
    left:6%; right:6%;
    background:linear-gradient(90deg,
      transparent 0%, rgba(169,143,96,.30) 16%,
      rgba(169,143,96,.46) 50%,
      rgba(169,143,96,.30) 84%, transparent 100%);
  }
  .mon-entab::after{ left:14%; right:14%; }
  .mon-entab::before{ left:22%; right:22%; }
  .mon-dentil{ left:11%; right:11%; }

  /* 柱腳線同樣收在裡面 */
  .mon-plinth{
    left:6%; right:6%;
    background:linear-gradient(90deg,
      transparent 0%, rgba(169,143,96,.34) 18%,
      rgba(169,143,96,.34) 82%, transparent 100%);
  }
  .mon-plinth::after{ left:16%; right:16%; }

  /* 柱身嵌板的矩形也收掉，只留花飾與一道垂直暗示 */
  .mon-pier::before{
    box-shadow:none;
    background:linear-gradient(180deg,
      transparent, rgba(255,255,255,.016) 30%, rgba(255,255,255,.016) 70%, transparent);
    -webkit-mask-image:linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
            mask-image:linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
  }
  /* 柱身中軸一道極淡的縱線，取代方框 */
  .mon-pier{
    background:linear-gradient(180deg,
      transparent, rgba(169,143,96,.10) 26%,
      rgba(169,143,96,.10) 74%, transparent);
    background-size:1px 100%; background-position:50% 0; background-repeat:no-repeat;
  }

  /* 四角捲葉稍微放大並外移，讓它真正扮演「界定範圍」的角色 */
  .mon-orn{ width:clamp(52px,6.4vw,96px); }
  .mon-orn--tl{ top:-6px; left:-6px; }
  .mon-orn--tr{ top:-6px; right:-6px; }
  .mon-orn--bl{ bottom:-6px; left:-6px; }
  .mon-orn--br{ bottom:-6px; right:-6px; }
  .mon-orn .orn{ color:rgba(169,143,96,.34); }
}

/* ---- 序章標語 ---- */
.prologue-motto{
  margin:clamp(30px,4vw,52px) auto 0 !important;
  max-width:none !important;
  font-family:var(--disp); font-weight:300;
  font-size:clamp(1.15rem,2.4vw,1.9rem);
  line-height:1.85; letter-spacing:.16em; text-indent:.16em;
  color:var(--gold-soft);
}
.prologue-motto .mk{
  color:var(--gold-deep); font-size:1.15em;
  letter-spacing:0; text-indent:0;
}
@media (max-width:640px){
  .prologue-motto{
    font-size:clamp(1rem,4.6vw,1.3rem);
    letter-spacing:.1em; text-indent:.1em; line-height:1.9;
  }
}

/* ---- 序章：品牌宣言 ---- */
.prologue-h1 .x{
  font-family:var(--disp); font-style:normal;
  color:var(--gold); font-size:.86em;
  margin:0 .18em; vertical-align:.04em;
}
.prologue-h1 .dsp-en{ font-style:normal; color:var(--gold-soft); }
@media (max-width:640px){
  .prologue-h1 .x{ margin:0 .1em; }
}


/* =========================================================
   CTA 重做
   原本讓拱門跟標題疊在一起，皇冠又沒置中。
   改成單純的中軸構圖：皇冠 → 飾線 → 標題 → 說明 → 入口。
   ========================================================= */
.cta{
  position:relative; overflow:hidden; text-align:center;
  padding:clamp(110px,15vw,200px) var(--pad) clamp(120px,16vw,210px);
  border-top:1px solid var(--line-hair);
}
.cta-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(58% 62% at 50% 30%, rgba(169,143,96,.10) 0%, transparent 66%),
    radial-gradient(100% 90% at 50% 50%, transparent 38%, rgba(0,0,0,.4) 100%);
}
.cta-inner{
  position:relative; z-index:2;
  max-width:min(720px, 92%); margin-inline:auto;
  display:flex; flex-direction:column; align-items:center;
}

.cta .eyebrow{ justify-content:center; margin:0; }
.cta .h1{
  margin:clamp(20px,2.4vw,32px) 0 0;
  font-size:clamp(1.9rem,4.4vw,3.6rem); line-height:1.3;
}
.cta-lede{
  margin:clamp(24px,3vw,38px) auto 0; max-width:min(100%, 30em);
  color:var(--fg-2); font-size:.98rem;
}
.cta-actions{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:16px; margin-top:clamp(34px,4vw,54px);
}

@media (max-width:640px){
  .cta{ padding:clamp(84px,18vw,120px) var(--pad) clamp(92px,20vw,130px); }
  .cta-inner{ max-width:100%; }
  .cta .h1{ font-size:clamp(1.6rem,7vw,2.2rem); }
  .cta-lede{ font-size:.9rem; }
  .cta-lede br{ display:none; }
  .cta-actions{ flex-direction:column; align-items:stretch; width:100%; gap:11px; }
  .cta-actions .btn{ width:100%; }
}

/* ---- CTA 收乾淨：拿掉皇冠與飾線，只留文字與一個入口 ---- */
.cta::before{ display:none; }                 /* 模板舊的黑幕，會蓋掉柔光 */
.cta .media{ display:none; }
.cta-inner{ gap:0; }
.cta .eyebrow{ margin:0; }


/* =========================================================
   服務項目頁
   八項服務的編號清單 ＋ 三組流程的分頁
   ========================================================= */

/* ---- 1. 八項服務：只留序號與名稱，四欄兩列 ---- */
.svc{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:0;
}
.svc-item{
  position:relative;
  padding:clamp(34px,3.6vw,52px) clamp(18px,2vw,30px);
  border-top:1px solid var(--line-hair);
  transition:background .55s var(--ease);
}
/* 欄與欄之間的細線，最右欄不畫 */
.svc-item:not(:nth-child(4n))::after{
  content:""; position:absolute; right:0; top:18%; bottom:18%;
  width:1px; background:var(--line-hair);
}
.svc-item:nth-last-child(-n+4){ border-bottom:1px solid var(--line-hair); }
.svc-item:hover{ background:rgba(169,143,96,.035); }

.svc-no{
  display:block; margin-bottom:clamp(12px,1.4vw,18px);
  font-family:var(--disp); font-weight:300;
  font-size:clamp(1.1rem,1.6vw,1.5rem); line-height:1;
  color:transparent; -webkit-text-stroke:1px rgba(169,143,96,.45);
  letter-spacing:.1em;
  transition:color .55s var(--ease);
}
.svc-item:hover .svc-no{ color:rgba(169,143,96,.14); }
.svc-item h3{
  margin:0; font-family:var(--disp); font-weight:300;
  font-size:clamp(1.15rem,1.9vw,1.55rem); line-height:1.5;
  letter-spacing:.09em; color:var(--fg);
}

@media (max-width:1100px){
  .svc{ grid-template-columns:repeat(2,1fr); }
  .svc-item:not(:nth-child(4n))::after{ display:none; }
  .svc-item:not(:nth-child(2n))::after{
    content:""; position:absolute; right:0; top:18%; bottom:18%;
    width:1px; background:var(--line-hair);
  }
  .svc-item:nth-last-child(-n+4){ border-bottom:0; }
  .svc-item:nth-last-child(-n+2){ border-bottom:1px solid var(--line-hair); }
}
@media (max-width:560px){
  .svc{ grid-template-columns:1fr; }
  .svc-item{ padding:26px 0; }
  .svc-item::after{ display:none !important; }
  .svc-item:nth-last-child(-n+2){ border-bottom:0; }
  .svc-item:last-child{ border-bottom:1px solid var(--line-hair); }
  .svc-no{ margin-bottom:8px; font-size:1rem; }
  .svc-item h3{ font-size:1.1rem; }
}

/* ---- 2. 流程分頁 ---- */
.flows{ max-width:900px; margin-inline:auto; }
.flows-tabs{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(10px,1.4vw,20px);
  margin-bottom:clamp(48px,5vw,76px);
}
.flows-tab{
  display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:16px clamp(20px,2.4vw,36px);
  border:1px solid var(--line-hair); background:transparent;
  cursor:pointer; color:var(--fg-2);
  transition:border-color .5s var(--ease), color .5s var(--ease), background .5s var(--ease);
}
.flows-tab span{
  font-family:var(--serif); font-size:.92rem; letter-spacing:.1em;
}
.flows-tab em{
  font-style:normal; font-size:.58rem;
  letter-spacing:.26em; text-indent:.26em; color:var(--gold-deep);
}
.flows-tab:hover{ border-color:var(--line); color:var(--fg); }
.flows-tab.is-on{
  border-color:rgba(169,143,96,.5); color:var(--gold-soft);
  background:linear-gradient(180deg, rgba(169,143,96,.10), rgba(169,143,96,.03));
}
.flows-tab.is-on em{ color:var(--gold-dim); }

.flow[hidden]{ display:none; }
.flow-list{
  list-style:none; margin:0; padding:0; position:relative;
}
/* 貫穿的中軸金線 */
.flow-list::before{
  content:""; position:absolute; left:clamp(19px,2.2vw,29px); top:14px; bottom:14px;
  width:1px; transform:translateX(-50%);
  background:linear-gradient(transparent, var(--line-hair) 6%, var(--line-hair) 94%, transparent);
}
.flow-list > li{
  position:relative; display:grid;
  grid-template-columns:clamp(38px,4.4vw,58px) 1fr;
  gap:clamp(20px,2.4vw,36px);
  padding:clamp(18px,2vw,26px) 0;
}
.flow-no{
  position:relative; z-index:1;
  display:grid; place-items:center;
  width:clamp(38px,4.4vw,58px); height:clamp(38px,4.4vw,58px);
  border:1px solid var(--line); border-radius:50%;
  background:var(--bg-2);
  font-family:var(--disp); font-size:.8rem; letter-spacing:.06em; color:var(--gold);
}
.flow-list h3{
  margin:0; padding-top:.5em;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(.98rem,1.6vw,1.15rem); line-height:1.75;
  letter-spacing:.05em; color:var(--fg);
}
.flow-detail{
  list-style:none; margin:14px 0 0; padding:0;
}
.flow-detail li{
  position:relative; padding-left:18px; margin-bottom:7px;
  font-size:.86rem; line-height:1.95; color:var(--muted);
}
.flow-detail li::before{
  content:""; position:absolute; left:0; top:.92em;
  width:6px; height:1px; background:var(--gold-deep);
}

@media (max-width:900px){
  .svc{ grid-template-columns:1fr; }
  .svc-item:nth-child(-n+2){ border-top:1px solid var(--line-hair); }
  .svc-item:nth-last-child(-n+2){ border-bottom:0; }
  .svc-item:last-child{ border-bottom:1px solid var(--line-hair); }
  .flows-tabs{ gap:9px; }
  .flows-tab{ flex:1 1 auto; padding:13px 14px; }
  .flows-tab span{ font-size:.82rem; letter-spacing:.06em; }
  .flows-tab em{ font-size:.52rem; letter-spacing:.18em; text-indent:.18em; }
}
@media (max-width:640px){
  .svc-item{ padding:26px 0; gap:14px; }
  .svc-no{ font-size:1.35rem; }
  .flow-list > li{ grid-template-columns:34px 1fr; gap:16px; padding:15px 0; }
  .flow-no{ width:34px; height:34px; font-size:.72rem; }
  .flow-list::before{ left:17px; }
  .flow-list h3{ font-size:.94rem; line-height:1.8; }
  .flow-detail li{ font-size:.82rem; padding-left:15px; }
}

/* ---- 燈箱 ---- */
.lightbox{
  position:fixed; inset:0; z-index:150; display:none;
  place-items:center; padding:clamp(20px,4vw,64px);
  background:rgba(6,5,5,.94);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0; transition:opacity .45s var(--ease);
}
.lightbox.is-open{ display:grid; }
.lightbox.is-in{ opacity:1; }
.lightbox img{
  max-width:100%; max-height:100%; object-fit:contain; display:block;
  box-shadow:0 40px 100px rgba(0,0,0,.7);
  transform:scale(.98); transition:transform .5s var(--ease);
}
.lightbox.is-in img{ transform:none; }
.lb-close,
.lb-prev,
.lb-next{
  position:absolute; z-index:2; width:52px; height:52px;
  display:grid; place-items:center; cursor:pointer;
  border:1px solid var(--line); background:rgba(12,11,10,.7);
  color:var(--gold); font-family:var(--disp); font-size:1.3rem; line-height:1;
  transition:border-color .4s var(--ease), color .4s var(--ease);
}
.lb-close:hover,
.lb-prev:hover,
.lb-next:hover{ border-color:var(--gold-dim); color:var(--gold-soft); }
.lb-close{ top:clamp(16px,2.4vw,34px); right:clamp(16px,2.4vw,34px); }
.lb-prev{ left:clamp(12px,2vw,30px);  top:50%; transform:translateY(-50%); }
.lb-next{ right:clamp(12px,2vw,30px); top:50%; transform:translateY(-50%); }
.lb-count{
  position:absolute; bottom:clamp(16px,2.4vw,32px); left:50%; transform:translateX(-50%);
  font-size:.66rem; letter-spacing:.26em; color:var(--muted);
}
@media (max-width:640px){
  .lb-close,
.lb-prev,
.lb-next{ width:42px; height:42px; font-size:1.1rem; }
  .lb-prev{ left:8px; } .lb-next{ right:8px; }
}


/* =========================================================
   製圖底紋與浮水印
   流程區借用建築製圖的語彙：極淡的方格網 ＋ 斜向剖面線 ＋ 大字浮水印
   ========================================================= */
.section--draft{ position:relative; overflow:hidden; }

/* 底紋：方格網 ＋ 斜線，兩層都極淡，靠近才看得見 */
.section--draft::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    /* 主網格 96px */
    linear-gradient(90deg, rgba(169,143,96,.055) 0 1px, transparent 1px),
    linear-gradient(0deg,  rgba(169,143,96,.055) 0 1px, transparent 1px),
    /* 細分格 24px */
    linear-gradient(90deg, rgba(169,143,96,.022) 0 1px, transparent 1px),
    linear-gradient(0deg,  rgba(169,143,96,.022) 0 1px, transparent 1px),
    /* 斜向剖面線 */
    repeating-linear-gradient(45deg,
      rgba(169,143,96,.016) 0 1px, transparent 1px 14px);
  background-size:96px 96px, 96px 96px, 24px 24px, 24px 24px, auto;
  -webkit-mask-image:radial-gradient(110% 90% at 50% 46%, #000 34%, transparent 88%);
          mask-image:radial-gradient(110% 90% at 50% 46%, #000 34%, transparent 88%);
}

/* 浮水印：描邊大字，壓在網格之上、內容之下 */
.section--draft[data-watermark]::after{
  content:attr(data-watermark);
  position:absolute; left:50%; top:50%; z-index:0; pointer-events:none;
  transform:translate(-50%,-50%);
  font-family:var(--disp); font-weight:300;
  font-size:clamp(6rem,17vw,15rem); line-height:1;
  letter-spacing:.22em; text-indent:.22em; white-space:nowrap;
  color:transparent; -webkit-text-stroke:1px rgba(169,143,96,.06);
  user-select:none;
}
.section--draft > .shell{ position:relative; z-index:1; }

/* 流程分頁本身也墊一層更集中的暖光，讓內容從底紋裡浮起來 */
.flows{ position:relative; }
.flows::before{
  content:""; position:absolute; inset:-6% -8%; z-index:-1; pointer-events:none;
  background:radial-gradient(60% 52% at 50% 40%,
    rgba(10,9,8,.72) 0%, rgba(10,9,8,.42) 52%, transparent 78%);
}

@media (max-width:640px){
  .section--draft::before{
    background-size:64px 64px, 64px 64px, 16px 16px, 16px 16px, auto;
  }
  .section--draft[data-watermark]::after{
    font-size:clamp(4rem,26vw,7rem); letter-spacing:.16em; text-indent:.16em;
  }
}
@media (prefers-reduced-motion:reduce){
  .section--draft::before,
.section--draft::after{ opacity:.7; }
}

/* ---- .media 裡放實拍：撐滿並蓋掉佔位漸層 ---- */
.media:has(> img){ background-image:none; background-color:#0D0C0B; }
.media > img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}
.hslide .media > img,
.ledger-fig .media > img{ position:absolute; inset:0; }
.hslide .arch{ aspect-ratio:4/5; }
.hslide .arch::after{
  content:""; position:absolute; inset:0; z-index:5; pointer-events:none;
  background:linear-gradient(180deg, transparent 58%, rgba(0,0,0,.55));
}

/* ---- 精選作品：三組、標頭置中、無序號 ---- */
.hgallery-head .shell{ display:block; text-align:center; }
.hgallery-head .eyebrow{ justify-content:center; }
.hgallery-head .h1{ margin-top:14px; }
.htrack{ justify-content:center; }
.hslide{ width:min(clamp(300px,32vw,460px), 52vh); }

/* ---- 服務三列的圖是直式 2:3，圖框跟著調 ---- */
.ledger-fig .arch{ aspect-ratio:2/3; }
@media (max-width:900px){
  .ledger-fig .arch{ aspect-ratio:3/4; width:min(78%,340px); margin-inline:auto; }
}


/* =========================================================
   作品案例：分案別卡片
   點開後由燈箱以遮罩呈現該案全部照片，可左右切換。
   ========================================================= */
.albums{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,2.6vw,44px);
}
.album{
  display:block; padding:0; border:0; background:none; cursor:pointer;
  text-align:left; color:inherit; font:inherit;
}
.album-fig{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:4/5; background:var(--panel);
  box-shadow:inset 0 0 0 1px rgba(169,143,96,.16);
}
.album-fig img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1.6s var(--ease), filter .8s var(--ease);
}
.album:hover .album-fig img{ transform:scale(1.05); filter:brightness(.72); }

/* 遮罩：hover 才浮出的「檢視 N 張」 */
.album-veil{
  position:absolute; inset:0; display:grid; place-items:center;
  background:linear-gradient(180deg, rgba(10,9,8,.15), rgba(10,9,8,.6));
  opacity:0; transition:opacity .55s var(--ease);
}
.album:hover .album-veil,
.album:focus-visible .album-veil{ opacity:1; }
.album-veil em{
  font-style:normal; font-family:var(--sans);
  font-size:.66rem; letter-spacing:.3em; text-indent:.3em;
  color:var(--gold-soft);
  padding:14px 28px; border:1px solid rgba(169,143,96,.5);
  background:rgba(10,9,8,.5); backdrop-filter:blur(6px);
  transform:translateY(8px); transition:transform .55s var(--ease);
}
.album:hover .album-veil em{ transform:none; }
.album-ord{
  font-family:var(--disp); font-weight:300;
  font-size:clamp(1.4rem,2.2vw,2rem); line-height:1;
  color:transparent; -webkit-text-stroke:1px rgba(169,143,96,.5);
  letter-spacing:.1em;
  transition:color .5s var(--ease);
}
.album:hover .album-ord{ color:rgba(169,143,96,.16); }

/* 單張時不顯示左右鍵 */
.lightbox.is-single .lb-prev,
.lightbox.is-single .lb-next{ display:none; }

@media (max-width:900px){
  .albums{ grid-template-columns:repeat(2,1fr); gap:18px; }
  .album:last-child{ grid-column:1 / -1; }
  .album:last-child .album-fig{ aspect-ratio:16/10; }
}
@media (max-width:640px){
  .albums{ grid-template-columns:1fr; gap:26px; }
  .album:last-child .album-fig{ aspect-ratio:4/5; }
  .album-veil em{ font-size:.58rem; padding:11px 20px; letter-spacing:.22em; text-indent:.22em; }
}

/* ---- 燈箱：可拖曳 ---- */
.lightbox{ touch-action:pan-y; }
.lightbox img{ cursor:grab; user-select:none; -webkit-user-drag:none; }
.lightbox.is-dragging{ cursor:grabbing; }
.lightbox.is-dragging img{ cursor:grabbing; transition:none; }
.lightbox.is-single img{ cursor:default; }
/* 拖曳提示：第一次打開時左右各浮一下 */
.lightbox:not(.is-single) .lb-prev,
.lightbox:not(.is-single) .lb-next{ opacity:.85; }
.lightbox .lb-prev:hover,
.lightbox .lb-next:hover{ opacity:1; }

/* ---- CTA 補述：比主文再小一階，說明性的文字不搶主標 ---- */
.cta-note{
  margin:clamp(18px,2vw,26px) auto 0; max-width:min(100%, 36em);
  font-size:.86rem; line-height:2.1; letter-spacing:.04em;
  color:var(--muted);
}
@media (max-width:640px){
  .cta-note{ font-size:.8rem; line-height:2; margin-top:16px; }
}

/* ---- 關於頁：團隊服務項目 ----
   八個項目用邊框當分隔，折行後對不齊也會留下孤字。
   改成兩欄網格，每項前面一道金色短劃。 */
.team-tags{
  list-style:none; margin:clamp(30px,3.4vw,44px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(12px,1.4vw,18px) clamp(20px,2.4vw,40px);
}
.team-tags li{
  position:relative; padding-left:20px;
  font-size:.86rem; letter-spacing:.1em; line-height:1.7; color:var(--fg-2);
}
.team-tags li::before{
  content:""; position:absolute; left:0; top:.72em;
  width:9px; height:1px; background:var(--gold-dim);
}
@media (max-width:640px){
  .team-tags{ grid-template-columns:1fr; gap:11px; margin-top:26px; }
  .team-tags li{ font-size:.82rem; padding-left:17px; }
}

/* =========================================================
   長標題與段落排版
   中文標題超過 10 字時，用主標的字級會撐破容器並折出孤字。
   ========================================================= */
.h1--long{
  /* 中文用 ch 會算錯：1ch 是「0」的寬度，中文字約是它的兩倍。
     這裡用 em，1em 剛好是一個中文字寬。 */
  font-size:clamp(1.5rem,3.2vw,2.7rem);
  line-height:1.45; letter-spacing:.05em;
  max-width:min(100%, 24em); margin-inline:auto;
  text-wrap:balance;
}
.head--center .h1--long{ margin-inline:auto; }

/* 說明段落：收窄字寬並讓折行更均勻 */
.lede--para{
  max-width:min(100%, 34em); margin-inline:auto;
  text-wrap:pretty;               /* 避免最後一行只剩一兩個字 */
}
.lede--para + .lede--para{ margin-top:clamp(18px,2vw,26px); }

@media (max-width:900px){
  .h1--long{ font-size:clamp(1.35rem,4.6vw,1.9rem); max-width:min(100%, 17em); }
  .lede--para{ max-width:min(100%, 26em); }
  .lede--para br{ display:none; }
}
@media (max-width:640px){
  .h1--long{ font-size:clamp(1.25rem,5.6vw,1.6rem); letter-spacing:.03em; }
  .lede--para{ max-width:100%; }
}


/* =========================================================
   凱旋門・高度自適應
   之前只有 900px 與 560px 兩個高度斷點，中間那段（600–900px，
   例如縮小的桌機視窗）閣樓塞不下題銘，就會撞上拱心石。
   這裡改成連續縮放，並讓閣樓自己吃掉溢出。
   ========================================================= */
@media (min-width:901px){
  /* 閣樓不論多窄都不讓內容溢出 */
  .mon-attic{
    min-height:0; overflow:hidden;
    gap:clamp(4px,.9vh,13px);
  }
  /* 題銘尺寸改吃視窗高度，視窗變矮就跟著縮 */
  .mon-crest{ width:clamp(24px,4.2vh,48px); }
  .mon-word{ font-size:clamp(.62rem,1.5vh,1.05rem); }
  .mon-sub{  font-size:clamp(.4rem,.8vh,.54rem); }
  .orn-laurel{ width:clamp(70px,14vh,190px); }

  /* 基座整體也跟著視窗高度收 */
  .hero--gate{
    --plate: min(760px, 60vw, 122vh);
    --mon-top:    clamp(44px,7vh,104px);
    --mon-bottom: clamp(76px,13vh,164px);
  }
}

/* 中等高度（縮小的桌機視窗）：閣樓再收，月桂枝先讓位 */
@media (min-width:901px) and (max-height:820px){
  .hero--gate{ --spring:21%; --spring-n:.21; --plate-y:22px; --mon-inset:18px; --mon-band:76px; }
  .mon-cornice{ top:clamp(18px,3.6%,34px); }
  .mon-dentil{ top:calc(clamp(18px,3.6%,34px) + 4px); }
  .mon-attic{ top:calc(clamp(18px,3.6%,34px) + 8px); bottom:calc(100% - var(--spring) + 8px); }
  .orn-laurel{ display:none; }
  .hero--gate .btn{ padding:12px 24px; font-size:.6rem; }
}

/* 更矮：中文副標也收掉，只留皇冠與 RAURELL */
@media (min-width:901px) and (max-height:680px){
  .hero--gate{ --spring:19%; --spring-n:.19; --mon-band:66px; --plate:min(560px,46vw); }
  .mon-sub{ display:none; }
  .mon-crest{ width:clamp(22px,3.6vh,34px); }
  .mon-word{ font-size:.66rem; letter-spacing:.34em; text-indent:.34em; }
  .mon-word::before{ right:calc(100% + 8px); width:16px; }
  .mon-word::after{ left:calc(100% + 3px); width:16px; }
  .mon-dentil{ display:none; }
  .hero--gate .eyebrow{ font-size:.5rem; }
}

/* 極矮：閣樓整個收起來，畫面只留拱與立面 */
@media (min-width:901px) and (max-height:560px){
  .hero--gate{ --spring:16%; --spring-n:.16; --mon-band:56px; --plate-y:14px; --mon-inset:12px; }
  .mon-attic{ display:none; }
  .mon-cornice{ top:14px; }
  .hero--gate .hero-actions{ gap:10px; }
}

/* 立面線稿永遠不超出拱洞 */
.mon-scene{ overflow:hidden; }

/* ---- 901–1100px：窄桌機的過渡帶，之前直接套桌機規則會擠 ---- */
@media (min-width:901px) and (max-width:1100px){
  .svc{ grid-template-columns:1fr; }
  .svc-item:nth-last-child(-n+2){ border-bottom:0; }
  .svc-item:last-child{ border-bottom:1px solid var(--line-hair); }
  .ledger > li,
  .ledger > li:nth-child(even){ gap:clamp(28px,3.4vw,50px); }
  .albums{ gap:clamp(14px,2vw,26px); }
  .flows-tab{ padding:14px 18px; }
  .flows-tab span{ font-size:.84rem; }
}

/* ---- 全站保險：任何區塊都不該撐出橫向捲軸 ---- */
.shell,
.head,
.svc,
.ledger,
.albums,
.flows{ min-width:0; }
.ledger-txt,
.flow-list > li > div{ min-width:0; }
.h1,
.h2,
.h3,
.display,
.prologue-h1{ overflow-wrap:break-word; }

/* ---- 收尾：早期的矮螢幕規則會把背景再內縮，這裡統一壓回滿版 ---- */
@media (min-width:901px){
  .hero-arch{ inset:0 !important; width:auto !important; height:auto !important;
              transform:none !important; box-shadow:none !important; }
}

/* ---- 聯絡頁：立面線稿 ---- */
.contact-fig{
  position:relative; display:grid; place-items:center;
  padding:clamp(20px,3vw,40px);
  aspect-ratio:16/11;
}
.contact-fig::before{
  content:""; position:absolute; left:50%; bottom:6%;
  width:120%; height:80%; transform:translateX(-50%);
  background:radial-gradient(52% 58% at 50% 74%,
    rgba(212,195,160,.12) 0%, rgba(169,143,96,.04) 44%, transparent 74%);
  pointer-events:none;
}
.contact-fig img{
  position:relative; display:block;
  width:100%; height:100%; object-fit:contain; object-position:bottom;
  opacity:.94;
  filter:drop-shadow(0 14px 34px rgba(0,0,0,.7));
}
@media (max-width:640px){
  .contact-fig{ aspect-ratio:4/3; padding:14px; }
}


/* =========================================================
   手機版頁尾：改置中
   單欄堆疊時左對齊會顯得零散，置中才有收尾的感覺。
   ========================================================= */
@media (max-width:768px){
  .site-footer{ text-align:center; }
  .foot-top{
    grid-template-columns:1fr;
    gap:clamp(34px,7vw,48px);
    padding:clamp(44px,9vw,68px) 0 clamp(30px,6vw,44px);
  }

  /* 品牌區置中 */
  .foot-brand .brand{ justify-content:center; }
  .foot-brand p{ margin-inline:auto; }

  /* 欄標題兩側加細線，取代單邊對齊的視覺重心 */
  .foot-top h4{
    display:flex; align-items:center; justify-content:center; gap:14px;
    margin-bottom:20px;
  }
  .foot-top h4::before,
  .foot-top h4::after{
    content:""; width:26px; height:1px; flex:none;
    background:linear-gradient(90deg, transparent, var(--gold-dim));
  }
  .foot-top h4::after{ background:linear-gradient(90deg, var(--gold-dim), transparent); }

  .foot-top ul{ display:flex; flex-direction:column; align-items:center; gap:2px; }
  .foot-top li{ margin-bottom:11px; }

  .foot-bottom{
    flex-direction:column; align-items:center; gap:10px;
    text-align:center;
  }

  /* 右下懸浮列會壓到聯絡資訊，頁尾底部留出空間 */
  .site-footer{ padding-bottom:clamp(72px,16vw,104px); }
}

/* 內頁的其他區塊在手機也一併置中，跟頁尾一致 */
@media (max-width:768px){
  .contact-fig{ margin-inline:auto; }
  .info li{ text-align:left; }          /* 地址電話仍靠左，讀起來才順 */
}


/* =========================================================
   聯絡管道按鈕：圖示 ＋ 文字
   ========================================================= */
.reach{
  display:flex; flex-wrap:wrap; gap:14px;
  margin-top:clamp(34px,4vw,50px);
}
.reach-btn{
  display:inline-flex; align-items:center; gap:13px;
  padding:16px clamp(22px,2.4vw,32px);
  border:1px solid var(--line);
  font-size:.76rem; letter-spacing:.18em;
  color:var(--fg-2); position:relative; overflow:hidden;
  transition:border-color .5s var(--ease), color .5s var(--ease),
             background .5s var(--ease), transform .35s var(--ease);
}
.reach-btn svg{
  width:18px; height:18px; flex:none; fill:currentColor;
  transition:color .5s var(--ease);
}
.reach-btn span{ position:relative; z-index:1; }
.reach-btn:hover{
  transform:translateY(-2px);
  border-color:rgba(169,143,96,.55);
  background:linear-gradient(180deg, rgba(169,143,96,.12), rgba(169,143,96,.04));
  color:var(--gold-soft);
}
.reach-btn--tel{ color:var(--gold-soft); border-color:rgba(169,143,96,.45); }
.reach-btn--line:hover{
  color:#8FD24C; border-color:rgba(143,210,76,.5);
  background:linear-gradient(180deg, rgba(143,210,76,.10), rgba(143,210,76,.03));
}

@media (max-width:640px){
  .reach{ flex-direction:column; align-items:stretch; gap:11px; margin-top:30px; }
  .reach-btn{ justify-content:center; padding:15px 18px; font-size:.72rem; letter-spacing:.14em; }
}

.hgallery-bar{ display:none !important; }


/* =========================================================
   置中文字的字距補償
   letter-spacing 會在最後一個字後面留下一格空白，
   text-align:center 把那格也算進去，整段就會偏右。
   ========================================================= */
.head--center .eyebrow,
.page-hero-inner .eyebrow,
.cta .eyebrow,
.prologue .eyebrow,
.hero--gate .eyebrow,
.hgallery-head .eyebrow{ text-indent:0; margin-right:-.46em; }

.head--center .h1,
.head--center .h2,
.page-hero-inner .h1,
.cta .h1,
.hgallery-head .h1{ margin-right:-.07em; }

.prologue-h1,
.prologue h2{ margin-right:-.08em; }
.prologue-motto{ text-indent:0; margin-right:-.16em; }
.hero--gate .display{ margin-right:-.07em; }
.mon-word{ text-indent:0; margin-right:-.56em; }
.mon-sub{ text-indent:0; margin-right:-.48em; }

/* 置中的多行標題讓瀏覽器自己平衡斷行，不要手動硬拆 */
.head--center .h1,
.page-hero-inner .h1,
.cta .h1{ text-wrap:balance; }

/* 服務頁主標：14 字單行，寬螢幕放得下，窄螢幕由 balance 折成兩行 */
.page-hero-inner .h1{ max-width:min(100%, 20em); margin-inline:auto; }

/* ---- 位置圖：獨立一段，左右拉滿版心 ---- */
.map-section{ padding-top:0; }
.map-frame--wide{
  aspect-ratio:21/7;
  min-height:320px;
}
@media (max-width:900px){
  .map-frame--wide{ aspect-ratio:16/9; min-height:260px; }
}
@media (max-width:640px){
  .map-frame--wide{ aspect-ratio:4/3; min-height:230px; }
}

/* =========================================================
   長標題的權重修正
   .cta .h1 是 (0,
2,
0)，.h1--long 只有 (0,
1,
0)，
   不管寫在哪裡都贏不了，字級一直沒被收下來。
   ========================================================= */
.cta-inner{ max-width:min(920px, 94%); }

.cta .h1--long,
.head--center .h1--long,
.page-hero-inner .h1--long,
.hgallery-head .h1--long{
  font-size:clamp(1.55rem,3vw,2.6rem);
  line-height:1.45; letter-spacing:.05em;
  max-width:min(100%, 26em); margin-inline:auto;
  text-wrap:balance;
}
@media (max-width:900px){
  .cta .h1--long,
.head--center .h1--long,
.page-hero-inner .h1--long{
    font-size:clamp(1.35rem,4.4vw,1.9rem);
    max-width:min(100%, 18em);
  }
}
@media (max-width:640px){
  .cta .h1--long,
.head--center .h1--long,
.page-hero-inner .h1--long{
    font-size:clamp(1.25rem,5.4vw,1.6rem); letter-spacing:.03em;
  }
}

/* ---- <picture> 預設是行內元素，撐不開也置不了中 ---- */
.contact-fig picture,
.mon-scene picture,
.hslide picture,
.media picture{
  display:block; width:100%; height:100%;
  margin-inline:auto;
}
.contact-fig{ justify-items:center; }
.contact-fig img{
  object-position:center bottom;
  margin-inline:auto;
}

/* ---- 修正：立面線稿要被拱洞「框住」，不是照高度撐開 ---- */
.mon-scene picture{ display:block; width:100%; height:100%; }
.mon-scene img{
  width:100% !important; height:100% !important;
  max-width:100%; max-height:100%;
  object-fit:contain; object-position:center bottom;
  margin:0;
}

/* =========================================================
   導覽列防溢出
   901–1150px 之間，logo ＋ 五個項目 ＋ 電話 ＋ 按鈕塞不下，
   會把版面推寬而產生橫向捲軸。
   ========================================================= */
.nav{ gap:clamp(16px,2vw,32px); min-width:0; }
.nav > nav{ min-width:0; flex:0 1 auto; }
.nav-links{ flex-wrap:nowrap; min-width:0; }
.nav-links a{ white-space:nowrap; }
.brand{ flex:0 0 auto; }
.nav-cta{ flex:0 0 auto; }

/* 中間寬度先讓字距與間隔縮，還不夠再收元件 */
@media (max-width:1280px){
  .nav-links{ gap:clamp(14px,1.8vw,26px); }
  .nav-links a{ letter-spacing:.14em; font-size:.72rem; }
  .brand-text i{ display:none; }        /* 英文副標先讓位 */
}
@media (max-width:1150px){
  .nav-cta .btn{ padding:12px 20px; font-size:.62rem; }
  .nav-links{ gap:14px; }
  .nav-links a{ letter-spacing:.1em; }
}
/* 提前切換成漢堡選單，不要撐到 900 才換 */
@media (max-width:1060px){
  .nav-links{ display:none; }
  .nav-cta .btn{ display:none; }
  .burger{ display:block; }
  .brand-text i{ display:block; }
}


/* =========================================================
   聯絡頁：右側立面線稿垂直置中
   左欄（文案＋資訊＋按鈕）比右圖高得多，grid 子項雖然 stretch，
   但 .contact-fig 有固定的 aspect-ratio，所以會黏在欄位頂端。
   讓外層欄位自己做垂直置中，圖才會對齊左欄的視覺中線。
   ========================================================= */
.contact-figcol{
  display:flex;
  align-items:center;          /* ← 垂直置中的關鍵 */
  justify-content:center;
  min-height:100%;
}
.contact-figcol .contact-fig{
  width:100%;
  padding-block:0;             /* 置中後不需要靠內距補位 */
}
/* 圖在框內也改成正中，不再靠下 */
.contact-figcol .contact-fig img{ object-position:center center; }
.contact-figcol .contact-fig::before{ bottom:10%; }

@media (max-width:900px){
  .contact-figcol{ min-height:0; margin-top:clamp(40px,7vw,64px); }
}


/* =========================================================
   長標題斷字修正
   問題：.head 的 max-width 是 780px，但 .h1--long 最大 2.6rem，
   一行只放得下 11–12 個中文字，於是 13 字的句子被折成
   「…空間規／劃。」這種孤字結尾。手動用兩個 .rl 硬拆也沒用，
   因為每個 .rl 自己還會再折一次。
   作法：長標題專用的較寬版心 ＋ 收小字級，並交給 balance 折行。
   ========================================================= */
.head--center:has(.h1--long),
.page-hero-inner:has(.h1--long){
  max-width:min(1060px, 92vw);
}
.cta .h1--long,
.head--center .h1--long,
.page-hero-inner .h1--long,
.hgallery-head .h1--long{
  font-size:clamp(1.5rem, 2.35vw, 2.15rem);
  line-height:1.5;
  letter-spacing:.04em;
  max-width:min(100%, 30em);
  text-wrap:balance;
  margin-inline:auto;
}
@media (max-width:900px){
  .cta .h1--long,
.head--center .h1--long,
.page-hero-inner .h1--long{
    font-size:clamp(1.3rem, 4.2vw, 1.8rem);
    max-width:min(100%, 20em);
  }
}

/* 英文／裝飾字不要被拆開（美好序章 被折成「美／好序章」） */
.h1 .dsp-en,
.h2 .dsp-en,
.display .dsp-en{ white-space:nowrap; }

/* =========================================================
   內頁 hero 的小字沒有水平置中
   .lede 有 max-width 但沒有 margin auto，
   區塊本身靠左，只有「行內文字」置中，看起來就偏左。
   ========================================================= */
.page-hero-inner .lede,
.cta .lede,
.head--center .lede{
  margin-inline:auto;
  max-width:min(100%, 34em);
  text-align:center;
  margin-right:auto;
}
/* 字距補償：letter-spacing 會在行尾多留一格 */
.page-hero-inner .lede,
.head--center .lede{ padding-left:.06em; }

/* 內頁 hero 主標：15 字要能一行放下，放不下也只折成兩段完整詞 */
.page-hero-inner{ max-width:min(1060px, 92vw); }
.page-hero-inner .h1{
  font-size:clamp(1.8rem, 3.4vw, 3rem);
  max-width:min(100%, 26em);
  line-height:1.4;
  text-wrap:balance;
}
@media (max-width:900px){
  .page-hero-inner .h1{ font-size:clamp(1.6rem, 6.4vw, 2.2rem); }
}


/* =========================================================
   作品案例：重新設計
   舊版在圖片下方掛一條 meta（編號 ＋ N Photos），
   在深色版面裡是一條突兀的橫槓，也違反「作品不特別介紹」。
   新版把編號刻進圖面左下、四周留一道極細金線，
   資訊全部收回圖裡，卡片本身就是作品。
   ========================================================= */
.section--albums{ padding-top:clamp(56px,7vw,110px); }

.albums{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(16px, 1.8vw, 30px);
}

.album{
  display:block; padding:0; border:0; background:none;
  cursor:pointer; color:inherit; font:inherit; text-align:left;
  -webkit-tap-highlight-color:transparent;
}

.album-fig{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:3/4;
  background:var(--panel);
  isolation:isolate;
}
.album-fig img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1.8s var(--ease), filter .9s var(--ease);
  filter:saturate(.92) brightness(.88);
}
.album:hover .album-fig img,
.album:focus-visible .album-fig img{
  transform:scale(1.045);
  filter:saturate(.92) brightness(.6);
}

/* 內縮的金色細框：不是硬邊框，是「畫框」 */
.album-frame{
  position:absolute; inset:clamp(10px,1.1vw,18px);
  border:1px solid rgba(212,195,160,.26);
  pointer-events:none; z-index:2;
  opacity:.55; transition:opacity .6s var(--ease), inset .6s var(--ease);
}
.album:hover .album-frame,
.album:focus-visible .album-frame{
  opacity:1; inset:clamp(7px,.8vw,13px);
}

/* 編號：刻在圖面左下，描邊字，不搶戲 */
.album-ord{
  position:absolute; left:clamp(20px,2vw,32px); bottom:clamp(16px,1.7vw,26px);
  z-index:3; pointer-events:none;
  font-family:var(--disp); font-weight:300; line-height:1;
  font-size:clamp(1.5rem,2.4vw,2.3rem); letter-spacing:.08em;
  color:transparent; -webkit-text-stroke:1px rgba(232,224,208,.62);
  text-shadow:0 2px 18px rgba(0,0,0,.6);
  transition:color .6s var(--ease), -webkit-text-stroke-color .6s var(--ease);
}
.album:hover .album-ord,
.album:focus-visible .album-ord{
  color:rgba(212,195,160,.9);
  -webkit-text-stroke-color:rgba(212,195,160,.9);
}

/* hover 才浮出的「探索作品」 */
.album-veil{
  position:absolute; inset:0; z-index:3;
  display:grid; place-items:center;
  background:linear-gradient(180deg, rgba(10,9,8,.1), rgba(10,9,8,.5));
  opacity:0; transition:opacity .55s var(--ease);
  pointer-events:none;
}
.album:hover .album-veil,
.album:focus-visible .album-veil{ opacity:1; }
.album-veil em{
  font-style:normal; font-family:var(--sans); font-weight:400;
  font-size:.64rem; letter-spacing:.32em; text-indent:.32em;
  color:var(--gold-soft);
  padding:13px 26px;
  border:1px solid rgba(212,195,160,.45);
  background:rgba(10,9,8,.42);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transform:translateY(10px);
  transition:transform .55s var(--ease);
}
.album:hover .album-veil em,
.album:focus-visible .album-veil em{ transform:none; }

@media (max-width:900px){
  .albums{ grid-template-columns:repeat(2,1fr); gap:14px; }
  .album:last-child{ grid-column:1 / -1; }
  .album:last-child .album-fig{ aspect-ratio:16/10; }
}
@media (max-width:640px){
  .albums{ grid-template-columns:1fr; gap:20px; }
  .album:last-child .album-fig{ aspect-ratio:3/4; }
  .album-veil em{ font-size:.58rem; padding:11px 20px; letter-spacing:.22em; text-indent:.22em; }
}


/* =========================================================
   內頁 HERO 重新設計（全站共用）
   問題：原本 align-items:flex-end ＋ 200px 上內距，
   文字被壓在下緣，上面留下一大片死掉的黑。
   作法：
   1. 改成真正的水平＋垂直置中，上下內距對稱
   2. 高度收到 48vh，不再是一片空曠
   3. 背景改用「橫向光帶 ＋ 立柱細線」的抽象建築語彙，
      取代那個又小又具象的拱門
   ========================================================= */
.page-hero{
  position:relative;
  min-height:clamp(340px, 48vh, 520px);
  display:grid;                 /* flex-end → grid 置中 */
  place-items:center;
  overflow:hidden;
  text-align:center;
}
.page-hero > *{ grid-area:1 / 1; width:100%; }

.page-hero-inner{
  position:relative; z-index:4;
  padding:clamp(96px,11vw,140px) 0 clamp(56px,6vw,80px);  /* 讓開固定頁首 */
  max-width:min(1060px, 92vw);
  margin-inline:auto;
  display:flex; flex-direction:column; align-items:center;
}

/* ---- 背景第 1 層：底圖壓暗 ---- */
.page-hero .media{ z-index:0; }
.page-hero::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(64% 74% at 50% 52%, rgba(169,143,96,.10) 0%, transparent 68%),
    linear-gradient(180deg, rgba(7,7,8,.94) 0%, rgba(7,7,8,.66) 46%, rgba(7,7,8,.98) 100%);
}

/* ---- 背景第 2 層：立柱細線（抽象柱列，不是拱門） ---- */
.page-hero::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background-image:repeating-linear-gradient(90deg,
    rgba(212,195,160,.085) 0 1px,
    transparent 1px calc(100% / 9));
  background-size:100% 100%;
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0%, #000 26%, #000 66%, transparent 100%),
    radial-gradient(58% 100% at 50% 50%, transparent 0%, #000 74%);
  -webkit-mask-composite:source-in;
          mask-image:
    linear-gradient(180deg, transparent 0%, #000 26%, #000 66%, transparent 100%),
    radial-gradient(58% 100% at 50% 50%, transparent 0%, #000 74%);
          mask-composite:intersect;
}

/* ---- 標題上下的細金線：給置中的文字一個「框」 ---- */
.page-hero-inner .eyebrow{
  position:relative; justify-content:center;
  margin-bottom:clamp(22px,2.4vw,32px);
}
.page-hero-inner .h1{
  position:relative;
  padding-bottom:clamp(26px,3vw,40px);
}
.page-hero-inner .h1::after{
  content:""; position:absolute; left:50%; bottom:0;
  width:clamp(56px,6vw,88px); height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg, transparent, rgba(212,195,160,.62), transparent);
}

/* hero 之後的第一個 lede 也置中 */
.page-hero-inner .lede{
  margin:clamp(4px,1vw,12px) auto 0;
  max-width:min(100%, 34em);
  text-align:center;
}

@media (max-width:900px){
  .page-hero{ min-height:clamp(280px, 42vh, 400px); }
  .page-hero-inner{
    padding:clamp(104px,22vw,132px) clamp(24px,7vw,40px) clamp(40px,8vw,56px);
  }
  .page-hero::after{
    background-image:repeating-linear-gradient(90deg,
      rgba(212,195,160,.07) 0 1px, transparent 1px calc(100% / 5));
  }
}


/* =========================================================
   作品案例：改成由上往下的橫幅堆疊
   三張封面都是橫幅，塞進 3:4 直式格子等於把畫面裁掉一半。
   改成單欄、每案一條 16:9 橫幅，一路往下讀，
   照片拿回原本的比例，也更像一本作品輯。
   ========================================================= */
.albums{
  display:flex;
  flex-direction:column;
  gap:clamp(28px, 3.4vw, 64px);
}

.album{ width:100%; }

.album-fig{
  aspect-ratio:16/9;
}

/* 編號放大一些，橫幅有空間撐得住 */
.album-ord{
  left:clamp(26px,2.6vw,44px);
  bottom:clamp(20px,2.2vw,34px);
  font-size:clamp(1.8rem,3.2vw,3.2rem);
}

.album-frame{ inset:clamp(12px,1.3vw,22px); }
.album:hover .album-frame,
.album:focus-visible .album-frame{ inset:clamp(8px,.9vw,15px); }

/* 交錯縮排：偶數案往右退一點，往下讀時有節奏，不是一疊方塊 */
@media (min-width:1024px){
  .album:nth-child(even){
    width:92%;
    margin-left:auto;
  }
  .album:nth-child(odd){
    width:92%;
    margin-right:auto;
  }
}

@media (max-width:900px){
  .albums{ gap:22px; }
  .album,
.album:nth-child(even),
.album:nth-child(odd){ width:100%; margin:0; }
  .album-fig{ aspect-ratio:16/10; }
}
@media (max-width:640px){
  .album-fig{ aspect-ratio:4/3; }
}


/* =========================================================
   內頁 HERO：加大字級層級 ＋ 收尾裝飾
   問題一：hero 主標和內文區的 h2 幾乎一樣大，
           進站後看不出「這是頁面標題」。
   問題二：hero 和下一段之間沒有交界，兩塊黑接在一起。
   ========================================================= */

/* ---- 1. 主標拉開層級（頁面標題 > 段落標題） ---- */
.page-hero-inner .h1{
  font-size:clamp(2.3rem, 4.6vw, 4.2rem);
  line-height:1.28;
  letter-spacing:.06em;
  max-width:min(100%, 20em);
}
.page-hero-inner .eyebrow{
  font-size:.7rem; letter-spacing:.5em;
}
.page-hero-inner .lede{
  font-size:clamp(.92rem, 1.05vw, 1.02rem);
  opacity:.82;
}

/* ---- 2. 中央徽記：極淡的皇冠壓在標題之後 ---- */
.page-hero .hero-crest{
  position:absolute; left:50%; top:46%; z-index:2;
  width:clamp(300px, 30vw, 480px);
  transform:translate(-50%,-50%);
  opacity:.055;
  pointer-events:none;
  -webkit-mask-image:radial-gradient(60% 60% at 50% 50%, #000 30%, transparent 82%);
          mask-image:radial-gradient(60% 60% at 50% 50%, #000 30%, transparent 82%);
}
.page-hero .hero-crest img{ width:100%; height:auto; display:block; }

/* ---- 3. 底緣收尾：金線 ＋ 中央菱形雕花 ---- */
.page-hero .hero-rule{
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  height:1px; pointer-events:none;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(212,195,160,.07) 18%,
    rgba(212,195,160,.34) 50%,
    rgba(212,195,160,.07) 82%,
    transparent 100%);
}
.page-hero .hero-rule::before{
  content:""; position:absolute; left:50%; top:50%;
  width:9px; height:9px;
  transform:translate(-50%,-50%) rotate(45deg);
  border:1px solid rgba(212,195,160,.55);
  background:var(--bg, #070708);
}
.page-hero .hero-rule::after{
  content:""; position:absolute; left:50%; top:50%;
  width:3px; height:3px;
  transform:translate(-50%,-50%) rotate(45deg);
  background:rgba(212,195,160,.8);
}

/* ---- 4. 頂部的一道暖光，讓 hero 自成一個區帶 ---- */
.page-hero .hero-glow{
  position:absolute; left:50%; top:0; z-index:1;
  width:min(1100px, 96vw); height:clamp(200px, 26vh, 300px);
  transform:translateX(-50%);
  pointer-events:none;
  background:radial-gradient(50% 100% at 50% 0%,
    rgba(212,195,160,.13) 0%,
    rgba(169,143,96,.05) 44%,
    transparent 76%);
}

@media (max-width:900px){
  .page-hero-inner .h1{ font-size:clamp(1.9rem, 7vw, 2.6rem); }
  .page-hero .hero-crest{ width:min(62vw, 300px); opacity:.045; }
  .page-hero .hero-glow{ height:clamp(140px, 22vh, 200px); }
}


/* =========================================================
   內頁 HERO：色溫的細微差異
   不換色，只把黑往暖的方向偏一點點（冷黑 → 暖炭黑），
   加上一道由上而下收束的暖光。差異小到說不出哪裡不同，
   但捲過交界時會感覺到「換了一塊地方」。
   ========================================================= */
.page-hero{
  background:
    linear-gradient(180deg,
      #0C0A09 0%,      /* 暖炭黑 */
      #0A0908 46%,
      #080707 100%);   /* 回到接近全站底色 */
}
.page-hero .media{ opacity:.5; }

/* 交界處往下再淡出一段，不要有硬邊 */
.page-hero .hero-rule{
  box-shadow:0 -60px 90px -40px rgba(169,143,96,.10);
}


/* =========================================================
   內頁 HERO：黑金質感底
   四層疊出來，每一層都壓得很低，靠層數而不是靠彩度做出「質感」：
   1. 暖炭黑基底（斜向，不是垂直，避免像色卡）
   2. 兩道極淡的金色斜光，一上一下交錯
   3. 顆粒（feTurbulence 生成的雜訊），讓漸層不死板
   4. 四周暗角，把視線收回中央
   ========================================================= */
.page-hero{
  background:
    /* 2b. 右下斜向的第二道金光，更弱 */
    linear-gradient(202deg,
      transparent 38%,
      rgba(169,143,96,.055) 62%,
      rgba(140,116,74,.02) 78%,
      transparent 92%),
    /* 2a. 左上斜向主金光 */
    linear-gradient(148deg,
      rgba(212,195,160,.085) 0%,
      rgba(169,143,96,.035) 22%,
      transparent 52%),
    /* 1. 暖炭黑基底 */
    linear-gradient(160deg,
      #100D0A 0%,
      #0B0908 34%,
      #090807 66%,
      #0B0A08 100%);
}

/* 3. 顆粒：極細的雜訊，只有 3% 濃度，靠近才看得見 */
.page-hero .hero-grain{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:.055; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

/* 4. 暗角：把中央的暖光襯出來 */
.page-hero .hero-glow{
  background:
    radial-gradient(50% 100% at 50% 0%,
      rgba(212,195,160,.14) 0%,
      rgba(169,143,96,.05) 44%,
      transparent 76%);
}
.page-hero::before{
  background:
    radial-gradient(62% 72% at 50% 50%, rgba(169,143,96,.09) 0%, transparent 66%),
    radial-gradient(120% 88% at 50% 50%, transparent 42%, rgba(6,6,7,.72) 100%),
    linear-gradient(180deg, rgba(8,7,7,.72) 0%, rgba(8,7,7,.28) 44%, rgba(8,7,7,.9) 100%);
}

/* 底圖退成質地 */
.page-hero .media{ opacity:.34; filter:saturate(.55) brightness(.8); }

@media (max-width:900px){
  .page-hero .hero-grain{ opacity:.045; background-size:130px 130px; }
}


/* =========================================================
   HERO 底緣分隔線：升級成一組雕花
   單一條線太薄，撐不住上面那塊黑金。
   改成「雙細線 ＋ 中央菱形 ＋ 兩側短羽線」，
   跟站上其他 divider 同一套語彙，但更明確。
   ========================================================= */
.page-hero .hero-rule{
  height:auto; bottom:0;
  display:flex; align-items:center; justify-content:center;
  padding-bottom:clamp(18px,2vw,28px);
  background:none;
  box-shadow:none;
}
/* 主線：貼在 hero 最底 */
.page-hero .hero-rule::before{
  content:""; position:absolute; left:0; right:0; bottom:0;
  width:auto; height:1px;
  transform:none; border:0; background:linear-gradient(90deg,
    transparent 0%,
    rgba(212,195,160,.06) 14%,
    rgba(212,195,160,.30) 50%,
    rgba(212,195,160,.06) 86%,
    transparent 100%);
}
/* 副線：主線上方 5px，更淡，做出厚度 */
.page-hero .hero-rule::after{
  content:""; position:absolute; left:0; right:0; bottom:5px;
  width:auto; height:1px;
  transform:none; background:linear-gradient(90deg,
    transparent 0%,
    rgba(212,195,160,.03) 26%,
    rgba(212,195,160,.13) 50%,
    rgba(212,195,160,.03) 74%,
    transparent 100%);
}

/* 中央雕花：菱形 ＋ 左右羽線 */
.page-hero .hero-rule .hero-orn{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:14px;
  padding:0 18px;
  background:linear-gradient(180deg, transparent, #0A0908 62%);
}
.page-hero .hero-rule .hero-orn i{
  display:block; width:clamp(26px,3vw,46px); height:1px;
  background:linear-gradient(90deg, transparent, rgba(212,195,160,.5));
}
.page-hero .hero-rule .hero-orn i:last-child{
  background:linear-gradient(90deg, rgba(212,195,160,.5), transparent);
}
.page-hero .hero-rule .hero-orn b{
  display:block; width:7px; height:7px;
  transform:rotate(45deg);
  border:1px solid rgba(212,195,160,.62);
  position:relative;
}
.page-hero .hero-rule .hero-orn b::after{
  content:""; position:absolute; inset:1.5px;
  background:rgba(212,195,160,.75);
}


/* =========================================================
   HERO 高度 ＋ 分隔線置中修正
   分隔線原本靠 flex 置中，但 .hero-rule 同時被前面的規則
   設成 height:1px 的絕對定位元素，flex 容器沒有高度可置中，
   雕花就掉到左邊去了。改成直接用絕對定位置中，不依賴 flex。
   ========================================================= */
.page-hero{
  min-height:clamp(460px, 66vh, 720px);
}
.page-hero-inner{
  padding:clamp(130px,13vw,190px) 0 clamp(90px,9vw,130px);
}

/* 分隔線容器：只是定位用的空殼 */
.page-hero .hero-rule{
  position:absolute; left:0; right:0; bottom:0; top:auto;
  width:auto; height:0;
  display:block; padding:0; margin:0;
  z-index:5; pointer-events:none;
  background:none; box-shadow:none;
}
/* 主線 */
.page-hero .hero-rule::before{
  content:""; position:absolute; left:0; right:0; bottom:0;
  width:auto; height:1px; transform:none; border:0;
  background:linear-gradient(90deg,
    transparent 0%, rgba(212,195,160,.06) 14%,
    rgba(212,195,160,.30) 50%,
    rgba(212,195,160,.06) 86%, transparent 100%);
}
/* 副線 */
.page-hero .hero-rule::after{
  content:""; position:absolute; left:0; right:0; bottom:5px;
  width:auto; height:1px; transform:none;
  background:linear-gradient(90deg,
    transparent 0%, rgba(212,195,160,.03) 26%,
    rgba(212,195,160,.13) 50%,
    rgba(212,195,160,.03) 74%, transparent 100%);
}
/* 中央雕花：絕對定位置中，與 flex 無關 */
.page-hero .hero-rule .hero-orn{
  position:absolute; left:50%; bottom:0;
  transform:translate(-50%, 50%);
  display:flex; align-items:center; gap:14px;
  padding:0 18px;
  background:none;
}
.page-hero .hero-rule .hero-orn i{
  display:block; width:clamp(26px,3vw,46px); height:1px;
  background:linear-gradient(90deg, transparent, rgba(212,195,160,.5));
}
.page-hero .hero-rule .hero-orn i:last-child{
  background:linear-gradient(90deg, rgba(212,195,160,.5), transparent);
}
.page-hero .hero-rule .hero-orn b{
  display:block; width:7px; height:7px; position:relative;
  transform:rotate(45deg);
  border:1px solid rgba(212,195,160,.62);
  background:#0A0908;
}
.page-hero .hero-rule .hero-orn b::after{
  content:""; position:absolute; inset:1.5px;
  background:rgba(212,195,160,.75);
}

@media (max-width:900px){
  .page-hero{ min-height:clamp(360px, 54vh, 460px); }
  .page-hero-inner{
    padding:clamp(120px,24vw,150px) clamp(24px,7vw,40px) clamp(64px,10vw,86px);
  }
}


/* =========================================================
   分隔線雕花：與首頁紀念碑的 .orn 命名衝突修正
   全站已有一個 .orn（SVG 雕花，display:block; width:100%），
   分隔線的雕花沿用同名，就被撐成整條寬度，
   left:50% + translateX(-50%) 於是把它推回最左邊。
   改名為 .hero-orn，並明確鎖住尺寸。
   ========================================================= */
.page-hero .hero-rule .hero-orn{
  position:absolute; left:50%; bottom:0;
  transform:translate(-50%, 50%);
  display:flex; align-items:center; justify-content:center;
  width:auto; max-width:none; height:auto;
  gap:14px; padding:0 18px; margin:0;
  opacity:1; transition:none;
  white-space:nowrap;
}


/* =========================================================
   作品案例：取消交錯縮排
   我原本讓奇偶數各縮 92% 想做出節奏，結果變成左右不對齊，
   在滿版的深色底上只看得出「沒對齊」。全部切齊版心。
   ========================================================= */
.album,
.album:nth-child(odd),
.album:nth-child(even){
  width:100%;
  margin-left:0;
  margin-right:0;
}


/* =========================================================
   Cookie 告知視窗
   右下角橫幅，避開懸浮工具列，用和站上一致的細金線語彙。
   ========================================================= */
.consent{
  position:fixed; z-index:60;
  left:clamp(16px,3vw,40px);
  bottom:clamp(16px,3vw,34px);
  width:min(560px, calc(100vw - clamp(32px,6vw,80px) - 96px));
  opacity:0; transform:translateY(18px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  pointer-events:none;
}
.consent.is-in{ opacity:1; transform:none; pointer-events:auto; }

.consent-inner{
  position:relative;
  display:flex; align-items:center; flex-wrap:wrap;
  gap:clamp(14px,1.6vw,22px);
  padding:clamp(20px,2.2vw,28px) clamp(46px,3.4vw,54px) clamp(20px,2.2vw,28px) clamp(22px,2.4vw,32px);
  background:linear-gradient(150deg, rgba(16,13,10,.97), rgba(10,9,8,.97));
  border:1px solid rgba(212,195,160,.22);
  box-shadow:0 24px 60px -20px rgba(0,0,0,.85);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
/* 左上角一道金線，呼應站上的雕花 */
.consent-orn{
  position:absolute; left:-1px; top:-1px;
  width:38px; height:38px; pointer-events:none;
  border-left:1px solid rgba(212,195,160,.55);
  border-top:1px solid rgba(212,195,160,.55);
}

.consent-text{
  flex:1 1 240px; min-width:0; margin:0;
  font-size:.8rem; line-height:1.95; letter-spacing:.04em;
  color:var(--fg-2);
}
.consent-text a{
  color:var(--gold-soft);
  border-bottom:1px solid rgba(212,195,160,.4);
  padding-bottom:1px;
  transition:border-color .4s var(--ease), color .4s var(--ease);
}
.consent-text a:hover{ color:#E0D2B2; border-bottom-color:rgba(224,210,178,.9); }

.consent-btn{
  flex:0 0 auto;
  padding:13px clamp(20px,2vw,28px);
  border:1px solid rgba(212,195,160,.45);
  background:none; cursor:pointer;
  font:inherit; font-size:.66rem;
  letter-spacing:.24em; text-indent:.24em;
  color:var(--gold-soft);
  transition:background .5s var(--ease), border-color .5s var(--ease), color .5s var(--ease);
}
.consent-btn:hover{
  background:rgba(212,195,160,.1);
  border-color:rgba(212,195,160,.8);
  color:#E8E0D0;
}

.consent-close{
  position:absolute; right:10px; top:10px;
  width:28px; height:28px; padding:0;
  border:0; background:none; cursor:pointer;
  font-size:.72rem; line-height:1;
  color:var(--muted);
  transition:color .4s var(--ease);
}
.consent-close:hover{ color:var(--gold-soft); }

@media (max-width:640px){
  .consent{
    left:12px; right:12px; bottom:12px;
    width:auto;
  }
  .consent-inner{
    flex-direction:column; align-items:stretch;
    padding:22px 20px 20px;
    gap:16px;
  }
  .consent-text{ font-size:.76rem; line-height:1.85; }
  .consent-btn{ width:100%; padding:14px 0; }
}


/* =========================================================
   法律條文頁（隱私權政策）
   純文字長頁，重點是行距、階層和可讀寬度。
   ========================================================= */
.legal{ max-width:min(820px, 92vw); margin-inline:auto; }

.legal-updated{
  margin:0 0 clamp(30px,3.4vw,44px);
  font-family:var(--sans); font-size:.64rem;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold-dim);
}
.legal-lead{
  margin:0 0 clamp(44px,5vw,66px);
  padding-bottom:clamp(36px,4vw,52px);
  border-bottom:1px solid var(--line-hair);
  font-size:1rem; line-height:2.2; letter-spacing:.05em;
  color:var(--fg-2);
}

.legal-block{ margin-bottom:clamp(44px,5vw,68px); }
.legal-block h2{
  margin:0 0 clamp(20px,2.2vw,28px);
  font-family:var(--disp); font-weight:300;
  font-size:clamp(1.15rem,1.7vw,1.45rem);
  letter-spacing:.1em; color:var(--fg);
  padding-left:18px; position:relative;
}
.legal-block h2::before{
  content:""; position:absolute; left:0; top:.62em;
  width:9px; height:1px; background:var(--gold-dim);
}
.legal-block p{
  margin:0 0 16px;
  font-size:.9rem; line-height:2.1; letter-spacing:.045em;
  color:var(--muted);
}
.legal-block p strong{ color:var(--fg-2); font-weight:500; }
.legal-block ul{
  margin:0 0 18px; padding:0; list-style:none;
}
.legal-block ul li{
  position:relative; padding-left:20px; margin-bottom:9px;
  font-size:.88rem; line-height:2; letter-spacing:.045em;
  color:var(--muted);
}
.legal-block ul li::before{
  content:""; position:absolute; left:2px; top:.92em;
  width:5px; height:1px; background:rgba(169,143,96,.6);
}

.legal-defs{ margin:0 0 20px; }
.legal-defs dt{
  margin-top:24px; margin-bottom:8px;
  font-size:.84rem; letter-spacing:.12em;
  color:var(--gold-soft);
}
.legal-defs dt:first-child{ margin-top:0; }
.legal-defs dd{
  margin:0 0 0 0; padding-left:18px;
  border-left:1px solid var(--line-hair);
  font-size:.86rem; line-height:2.05; letter-spacing:.045em;
  color:var(--muted);
}

@media (max-width:640px){
  .legal-lead{ font-size:.92rem; line-height:2.05; }
  .legal-block h2{ font-size:1.05rem; padding-left:15px; }
  .legal-block p,
.legal-block ul li{ font-size:.84rem; line-height:1.95; }
}


/* =========================================================
   頁尾品牌：LOGO 改成獨立一行
   原本沿用 header 的橫排（皇冠 ＋ 文字並列），
   在頁尾這種置中、單欄的版面裡，皇冠被擠成文字的附屬品。
   改成上下堆疊：皇冠自己一行，下面才是中英文字。
   ========================================================= */
.foot-brand .brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(14px,1.6vw,20px);
  text-align:center;
}
.foot-brand .brand-mark{
  width:clamp(56px,5vw,74px);
  height:auto;
  margin:0;
}
.foot-brand .brand-text{
  display:block;
  text-align:center;
}
.foot-brand .brand-text b{
  display:block;
  font-size:clamp(1rem,1.3vw,1.15rem);
  letter-spacing:.22em; text-indent:.22em;
  line-height:1.5;
}
.foot-brand .brand-text i{
  display:block;
  margin-top:6px;
  font-size:.62rem; letter-spacing:.3em; text-indent:.3em;
  color:var(--gold-dim);
}
.foot-brand p{
  margin-top:clamp(18px,2vw,26px);
  text-align:center;
  line-height:2.1;
}

/* 桌機版頁尾是多欄左對齊，品牌欄仍然置左但保持堆疊 */
@media (min-width:769px){
  .foot-brand .brand,
  .foot-brand .brand-text,
  .foot-brand p{ align-items:flex-start; text-align:left; }
  .foot-brand .brand{ align-items:flex-start; }
}


/* =========================================================
   手機選單：收斂
   原本中文 2rem、7vw，在窄螢幕上幾乎頂到左右邊界，
   字大不等於高級，反而顯得粗。
   作法：字級收小、字距放寬、行距拉開，改用留白撐氣勢。
   ========================================================= */
@media (max-width:900px){
  /* 皇冠縮小、位置上移，不要壓在選單上方顯得笨重 */
  .drawer::before{
    width:clamp(38px,9vw,50px);
    height:clamp(38px,9vw,50px);
    top:clamp(96px,13vh,124px);
  }
  .drawer.is-open::before{ opacity:.7; }

  .drawer ul{
    padding:clamp(170px,24vh,215px) clamp(34px,10vw,60px) clamp(110px,16vh,150px);
    max-width:440px; margin-inline:auto;
  }

  .drawer li{
    padding:clamp(20px,2.8vh,28px) 0;
  }

  .drawer a{
    display:flex; align-items:baseline; justify-content:space-between;
    gap:16px;
    font-size:clamp(1.05rem, 4.4vw, 1.3rem);
    letter-spacing:.3em; text-indent:.3em;
    line-height:1.5;
  }
  .drawer .en{
    font-size:.5rem; letter-spacing:.3em; text-indent:.3em;
    color:rgba(169,143,96,.55);
    flex:0 0 auto;
  }

  /* 目前所在頁面：金色 ＋ 左側短劃 */
  .drawer a[aria-current]{ color:var(--gold-soft); }

  .drawer-foot{
    margin-top:clamp(40px,6vh,58px);
    font-size:.6rem; letter-spacing:.18em; line-height:2.2;
  }
  .drawer-foot a{ font-size:.68rem; }
}

@media (max-width:380px){
  .drawer a{ font-size:1rem; letter-spacing:.24em; text-indent:.24em; }
  .drawer .en{ font-size:.46rem; letter-spacing:.24em; text-indent:.24em; }
}


/* =========================================================
   手機版排版修正
   1. 內頁 hero 主標會在「全新品牌紀｜元・榮耀啟航」中間斷開，
      因為字級 ＋ 字距超過可用寬度。收字級、收字距。
   2. .lede--drop 的首字放大在窄螢幕上會把整段推歪，關掉。
   3. 段落標題與內文的左緣要對齊，不要各縮各的。
   ========================================================= */
@media (max-width:900px){

  /* ---- hero 主標：讓每個 .rl 都放得下 ---- */
  .page-hero-inner .h1{
    font-size:clamp(1.55rem, 6vw, 2.1rem);
    letter-spacing:.04em;
    line-height:1.5;
    max-width:100%;
  }
  .page-hero-inner .h1 .rl{ overflow:visible; }
  .page-hero-inner .h1 .rl > span{ display:block; }
  .page-hero-inner .eyebrow{
    font-size:.58rem; letter-spacing:.3em; text-indent:.3em;
  }
  .page-hero-inner .eyebrow::before,
  .page-hero-inner .eyebrow::after{ width:22px; }

  /* ---- 首字放大：窄螢幕關掉 ---- */
  .lede--drop::first-letter{
    float:none; font-size:inherit; line-height:inherit;
    margin:0; padding:0; color:inherit; font-family:inherit;
  }

  /* ---- 段落：統一左右內距與左緣 ---- */
  .section > .shell{
    padding-inline:clamp(24px,7vw,40px);
  }
  .section .grid.g2{ gap:clamp(34px,7vw,48px); }

  .section .h2{
    font-size:clamp(1.35rem, 5.4vw, 1.7rem);
    line-height:1.6; letter-spacing:.06em;
  }
  .section .lede{
    font-size:.88rem; line-height:2.05; letter-spacing:.04em;
  }

  /* ---- 服務標籤：兩欄，不要拉成一長串 ---- */
  .team-tags{
    grid-template-columns:repeat(2,1fr);
    gap:12px 18px;
    margin-top:clamp(26px,5vw,34px);
  }
  .team-tags li{ font-size:.8rem; padding-left:16px; letter-spacing:.06em; }
}

@media (max-width:400px){
  .page-hero-inner .h1{ font-size:1.45rem; }
  .team-tags{ grid-template-columns:1fr; }
}


/* =========================================================================
   ██  手機版總成（≤900px）
   =========================================================================
   這個檔案有六十幾組 media query 散在各處，每次補一塊就撞一次。
   以下是「手機版的最終定義」——放在檔案最末，永遠贏。
   之後要調手機版，只改這一區。

   設計規則：
   ・版心左右內距統一 24px（≥400px 用 28px）
   ・區塊上下留白統一 64px，區塊之間靠留白分隔，不靠線
   ・字級只有四階：主標 / 段標 / 內文 / 標籤，不再各自為政
   ・所有可點擊元素最小 44px
   ・裝飾一律減量：手機看的是內容，不是雕花
   ========================================================================= */
@media (max-width:900px){

  /* ---------- 0. 基準 ---------- */
  :root{
    --m-pad: 24px;        /* 版心內距 */
    --m-gap: 64px;        /* 區塊間距 */
  }
  html,body{ overflow-x:hidden; }

  .shell{
    width:100%; max-width:100%;
    padding-inline:var(--m-pad);
    margin-inline:0;
  }
  .section{ padding-block:var(--m-gap); }
  .section--tight{ padding-block:calc(var(--m-gap) * .6); }
  .divider{ margin-block:0; opacity:.5; }

  /* 手機不需要自訂游標和捲動進度條 */
  .cursor, .cursor-dot{ display:none !important; }


  /* ---------- 1. 字級：四階，全站一致 ---------- */
  .h1,
  .page-hero-inner .h1{
    font-size:1.65rem;
    line-height:1.55;
    letter-spacing:.05em;
    max-width:100%;
  }
  .h2,
  .section .h2{
    font-size:1.3rem;
    line-height:1.65;
    letter-spacing:.06em;
  }
  .lede,
  .section .lede{
    font-size:.9rem;
    line-height:2.05;
    letter-spacing:.04em;
  }
  .eyebrow{
    font-size:.56rem;
    letter-spacing:.28em; text-indent:.28em;
    margin-bottom:18px;
  }
  .eyebrow::before,
  .eyebrow::after{ width:20px; }

  /* 手動拆行的 .rl 在窄螢幕會再折一次，改成允許自然換行 */
  .rl{ overflow:visible; }
  .rl > span{ display:block; }

  /* 首字放大在窄欄會把整段推歪 */
  .lede--drop::first-letter{
    float:none; font-size:inherit; line-height:inherit;
    margin:0; padding:0; color:inherit; font-family:inherit;
  }


  /* ---------- 2. 頁首 ---------- */
  .site-header{ padding-block:14px; }
  .nav{ padding-inline:var(--m-pad); gap:12px; }
  .brand-mark{ width:38px; }
  .brand-text b{ font-size:.9rem; letter-spacing:.14em; }
  .brand-text i{ font-size:.5rem; letter-spacing:.2em; }
  .nav-links, .nav-cta .btn, .nav-tel{ display:none; }
  .burger{
    display:grid; place-content:center;
    width:44px; height:44px;      /* 觸控最小尺寸 */
    border:1px solid rgba(212,195,160,.28);
    background:none;
  }
  .burger i{ width:18px; margin:3px 0; }


  /* ---------- 3. 內頁 HERO ---------- */
  .page-hero{
    min-height:auto;
    display:block;
    padding-block:0;
  }
  .page-hero-inner{
    padding:118px var(--m-pad) 72px;
    max-width:100%;
    text-align:center;
  }
  .page-hero-inner .h1{ padding-bottom:24px; }
  .page-hero-inner .h1::after{ width:44px; }
  .page-hero-inner .lede{
    font-size:.86rem; line-height:1.95;
    max-width:100%; margin-top:8px;
  }
  /* 裝飾減量：留光暈和分隔線，柱列細線太細看不到，關掉 */
  .page-hero::after{ display:none; }
  .page-hero .hero-crest{ width:min(52vw, 220px); opacity:.05; top:44%; }
  .page-hero .hero-glow{ height:150px; }
  .page-hero .hero-grain{ opacity:.04; background-size:120px 120px; }
  .page-hero .hero-rule .hero-orn i{ width:22px; }


  /* ---------- 4. 兩欄一律變單欄 ---------- */
  .grid.g2, .grid.g3, .grid.g4{
    grid-template-columns:1fr;
    gap:44px;
  }
  .grid.g2 > *{ min-width:0; }
  /* 單欄時圖不需要再垂直置中 */
  .contact-figcol{ min-height:0; }
  .contact-fig{ aspect-ratio:4/3; padding:0; }


  /* ---------- 5. 首頁：服務編年列 ---------- */
  .ledger li{
    grid-template-columns:1fr;
    gap:20px;
    padding-block:34px;
  }
  .ledger-fig{ aspect-ratio:16/10; }
  .ledger-txt h3{ font-size:1.15rem; letter-spacing:.08em; }
  .ledger-en{ font-size:.54rem; letter-spacing:.26em; }
  .ledger-ord{ font-size:1.1rem; }
  .ledger-txt p{ font-size:.84rem; line-height:2; }
  .ledger-txt p br{ display:none; }


  /* ---------- 6. 首頁：精選作品橫向廊道 ---------- */
  /* 手機不做橫向捲動劫持，改成直向堆疊 */
  .hgallery-sticky{ position:static; height:auto; }
  .htrack{
    display:flex; flex-direction:column;
    gap:16px; width:100%; transform:none !important;
    padding-inline:0;
  }
  .hslide{ width:100%; flex:0 0 auto; }
  .hslide .media{ aspect-ratio:4/3; }


  /* ---------- 7. 服務頁 ---------- */
  .svc{ grid-template-columns:repeat(2,1fr); gap:0; }
  .svc-item{
    padding:20px 0;
    border-bottom:1px solid var(--line-hair);
  }
  .svc-no{ font-size:.78rem; letter-spacing:.16em; }
  .svc-item h3{ font-size:.92rem; letter-spacing:.08em; margin-top:6px; }

  /* 流程分頁：橫向捲動的 tab 列 */
  .flows-tabs{
    display:flex; gap:8px;
    overflow-x:auto; scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    margin-inline:calc(var(--m-pad) * -1);
    padding-inline:var(--m-pad);
    padding-bottom:12px;
  }
  .flows-tabs::-webkit-scrollbar{ display:none; }
  .flows-tab{
    flex:0 0 auto; min-height:44px;
    padding:12px 18px;
    white-space:nowrap;
  }
  .flows-tab span{ font-size:.8rem; letter-spacing:.06em; }
  .flows-tab em{ font-size:.54rem; letter-spacing:.14em; }

  .flow-list li{
    grid-template-columns:34px 1fr;
    gap:14px; padding-block:22px;
  }
  .flow-no{ font-size:.8rem; }
  .flow-list h3{ font-size:.9rem; line-height:1.85; letter-spacing:.04em; }
  .flow-detail li{ font-size:.8rem; line-height:1.9; }

  /* 製圖底紋和浮水印在小螢幕會變成雜訊 */
  .section--draft::before{ opacity:.5; }
  .section--draft[data-watermark]::after{ font-size:4.5rem; opacity:.7; }


  /* ---------- 8. 作品案例 ---------- */
  .albums{ gap:18px; }
  .album,
  .album:nth-child(odd),
  .album:nth-child(even){ width:100%; margin:0; }
  .album-fig{ aspect-ratio:4/3; }
  .album-frame{ inset:9px; }
  .album-ord{ left:18px; bottom:14px; font-size:1.4rem; }
  /* 手機沒有 hover，遮罩常駐但很淡 */
  .album-veil{
    opacity:1;
    background:linear-gradient(180deg, transparent 40%, rgba(10,9,8,.55));
  }
  .album-veil em{
    transform:none;
    font-size:.54rem; padding:9px 16px;
    letter-spacing:.2em; text-indent:.2em;
    align-self:end; margin-bottom:16px;
  }


  /* ---------- 9. 聯絡頁 ---------- */
  .info li{
    grid-template-columns:1fr;
    gap:6px; padding-block:18px;
  }
  .info b{ font-size:.56rem; letter-spacing:.24em; }
  .info span{ font-size:.88rem; line-height:1.9; }

  .reach{ flex-direction:column; gap:10px; margin-top:32px; }
  .reach-btn{
    justify-content:center;
    min-height:52px; padding:0 20px;
    font-size:.72rem; letter-spacing:.14em;
  }
  .map-frame--wide{ aspect-ratio:1/1; min-height:0; }


  /* ---------- 10. 隱私權政策 ---------- */
  .legal{ max-width:100%; }
  .legal-lead{ font-size:.9rem; line-height:2; padding-bottom:32px; margin-bottom:40px; }
  .legal-block{ margin-bottom:44px; }
  .legal-block h2{ font-size:1.02rem; padding-left:15px; letter-spacing:.08em; }
  .legal-block p,
  .legal-block ul li{ font-size:.84rem; line-height:1.95; }
  .legal-defs dd{ padding-left:14px; font-size:.82rem; }


  /* ---------- 11. CTA ---------- */
  .cta{ padding-block:calc(var(--m-gap) * 1.1); }
  .cta-inner{ max-width:100%; padding-inline:var(--m-pad); }
  .cta .h1, .cta .h1--long{
    font-size:1.4rem; line-height:1.65; letter-spacing:.04em;
  }
  .cta-lede{ font-size:.86rem; line-height:2; }
  .cta-lede br{ display:none; }
  .cta-note{ font-size:.76rem; line-height:1.95; margin-top:20px; }
  .cta-actions{ margin-top:32px; }
  .btn--lg{
    display:flex; align-items:center; justify-content:center;
    width:100%; min-height:56px; padding:0 24px;
    font-size:.72rem; letter-spacing:.24em; text-indent:.24em;
  }


  /* ---------- 12. 頁尾 ---------- */
  .site-footer{ text-align:center; }
  .foot-mark{ font-size:3.4rem; opacity:.055; }
  .foot-top{
    grid-template-columns:1fr;
    gap:40px;
    padding-block:56px 36px;
  }
  .foot-brand .brand{ align-items:center; }
  .foot-brand .brand-mark{ width:58px; }
  .foot-brand .brand-text,
  .foot-brand p{ text-align:center; }
  .foot-brand p{ font-size:.8rem; line-height:2; }
  .foot-top h4{ font-size:.56rem; letter-spacing:.28em; }
  .foot-top ul{ display:flex; flex-direction:column; align-items:center; gap:0; }
  .foot-top li{
    margin:0; font-size:.84rem;
    min-height:44px; display:flex; align-items:center;
  }
  .foot-bottom{
    flex-direction:column; gap:8px;
    padding-block:22px; font-size:.62rem; line-height:1.9;
  }


  /* ---------- 13. 懸浮工具列 ---------- */
  .dock{ right:14px; bottom:14px; gap:10px; }
  .dock-btn{ width:48px; height:48px; }
  .dock-tip{ display:none; }        /* 手機沒有 hover，tooltip 沒意義 */


  /* ---------- 14. 燈箱 ---------- */
  .lb-close{ top:14px; right:14px; width:44px; height:44px; }
  .lb-prev, .lb-next{
    width:44px; height:44px;
    top:auto; bottom:20px;
    transform:none;
  }
  .lb-prev{ left:calc(50% - 60px); }
  .lb-next{ right:calc(50% - 60px); }
  .lb-count{ bottom:78px; font-size:.62rem; }
  .lightbox img{ max-height:74vh; }


  /* ---------- 15. Cookie 告知 ---------- */
  .consent{ left:12px; right:12px; bottom:12px; width:auto; }
  .consent-inner{
    flex-direction:column; align-items:stretch;
    gap:16px; padding:22px 20px 20px;
  }
  .consent-text{ font-size:.76rem; line-height:1.85; }
  .consent-btn{ width:100%; min-height:48px; }
  .consent-close{ top:8px; right:8px; width:36px; height:36px; }
}


/* ---------- 小螢幕微調（≤400px） ---------- */
@media (max-width:400px){
  :root{ --m-pad:20px; --m-gap:56px; }
  .h1, .page-hero-inner .h1{ font-size:1.45rem; }
  .h2, .section .h2{ font-size:1.18rem; }
  .svc{ grid-template-columns:1fr; }
  .team-tags{ grid-template-columns:1fr; }
  .lb-prev{ left:calc(50% - 54px); }
  .lb-next{ right:calc(50% - 54px); }
}


/* ---------- 平板直向（901–1060px）：兩欄但收窄 ---------- */
@media (min-width:901px) and (max-width:1060px){
  .shell{ padding-inline:clamp(32px,5vw,48px); }
  .albums{ gap:24px; }
  .svc{ grid-template-columns:repeat(2,1fr); }
}


/* =========================================================
   手機選單開啟時，隱藏懸浮工具列
   drawer 是 z-index:45，dock 疊在它上面，
   選單開著還看得到電話和 LINE 泡泡，很亂。
   ========================================================= */
body.is-nav-open .dock,
body.is-nav-open .consent,
body.is-nav-open .progress{
  opacity:0;
  pointer-events:none;
  transition:opacity .3s var(--ease);
}


/* =========================================================
   懸浮工具列：鎖死右下角
   明確寫上 left:auto，避免被其他規則拉走；
   並加上 safe-area，iPhone 底部手勢條不會蓋住按鈕。
   ========================================================= */
.dock{
  position:fixed;
  left:auto !important;
  right:calc(clamp(14px,2.2vw,26px) + env(safe-area-inset-right, 0px));
  bottom:calc(clamp(16px,2.6vw,30px) + env(safe-area-inset-bottom, 0px));
  z-index:120;
}

/* =========================================================
   Cookie 告知：改成底部置中的長條
   原本放左下角，和右下的懸浮按鈕形成兩個對角的浮動物件，
   畫面下緣被切成兩塊。改成貼底置中，讓下緣只有一個焦點。
   ========================================================= */
.consent{
  left:50%;
  right:auto;
  bottom:calc(18px + env(safe-area-inset-bottom, 0px));
  transform:translate(-50%, 18px);
  width:min(680px, calc(100vw - 40px - 96px));
  z-index:110;
}
.consent.is-in{ transform:translate(-50%, 0); }

@media (max-width:900px){
  .dock{
    right:calc(14px + env(safe-area-inset-right, 0px));
    bottom:calc(14px + env(safe-area-inset-bottom, 0px));
  }
  /* 手機：告知條貼底滿寬，並讓開右下的按鈕 */
  .consent{
    left:12px; right:12px; bottom:12px;
    width:auto; transform:translateY(16px);
  }
  .consent.is-in{ transform:none; }
  .consent-inner{ padding-right:76px; }   /* 右側留出懸浮按鈕的位置 */
  .consent-btn{ width:100%; }
}


/* =========================================================
   手機版八項服務：置中
   上方大標和小字都是置中的，下面的項目卻靠左，
   中軸對不起來。改成整格置中。
   ========================================================= */
@media (max-width:900px){
  .svc{ column-gap:0; }
  .svc-item{
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    text-align:center;
    padding:22px 8px;
  }
  .svc-item .svc-no{
    letter-spacing:.2em; text-indent:.2em;   /* 字距補償，數字才會真的置中 */
    margin-bottom:8px;
  }
  .svc-item h3{
    letter-spacing:.1em; text-indent:.1em;
    margin:0;
  }
  /* 奇數欄加一道細線，兩欄之間才有分隔 */
  .svc-item:nth-child(odd){
    border-right:1px solid var(--line-hair);
  }

  /* 最後一列不要被右下角的懸浮按鈕蓋住 */
  .svc{ padding-bottom:8px; }
  .section:has(> .shell > .svc){ padding-bottom:calc(var(--m-gap) + 28px); }
}

@media (max-width:400px){
  .svc-item:nth-child(odd){ border-right:0; }
}


/* =========================================================
   手機版首頁精選作品：收回版心
   我把橫向捲動改成直向堆疊時，順手把 .htrack 的左右內距歸零，
   結果三張圖變成出血滿版；又因為 .hslide .arch 是 4/5 直幅，
   一張圖就佔掉一個螢幕，滑起來像在翻牆紙。
   收回版心、改成 4/3、把標題區的空白壓掉。
   ========================================================= */
@media (max-width:900px){
  .hgallery-sticky{
    position:static; height:auto;
    padding-block:var(--m-gap);
  }
  .hgallery-head{
    position:static; margin-bottom:32px;
    padding-inline:0;
  }
  .hgallery-head .shell{
    display:block; text-align:center;
    padding-inline:var(--m-pad);
  }
  .hgallery-head .eyebrow{ margin-bottom:14px; justify-content:center; }
  .hgallery-head .h1{ font-size:1.5rem; letter-spacing:.08em; margin:0; }

  .htrack{
    display:flex; flex-direction:column; align-items:stretch;
    gap:16px;
    width:100%;
    padding-inline:var(--m-pad);   /* ← 收回版心，不要出血 */
    transform:none !important;
  }
  .hslide{ width:100%; flex:0 0 auto; }
  .hslide .arch{
    aspect-ratio:4/3;              /* ← 直幅改橫幅，一頁看得到兩張 */
    border-radius:0;
  }
  .hslide .arch .media{ transform:none; }
  .hslide .media img{ object-fit:cover; }

  .hgallery-bar, .hgallery-hint{ display:none; }
}


/* =========================================================
   手機版頁尾：把空白收掉
   .foot-mark 那個描邊 RAURELL 幾乎看不見，卻佔掉將近 200px 的高度，
   加上 .foot-top 的上內距，CTA 和皇冠之間就空了一大塊。
   改成絕對定位的背景浮水印，不再參與版面高度。
   ========================================================= */
@media (max-width:900px){
  .site-footer{ position:relative; overflow:hidden; }

  .foot-mark{
    position:absolute; left:50%; top:18px;
    transform:translateX(-50%);
    margin:0; padding:0;
    font-size:3rem; letter-spacing:.14em;
    -webkit-text-stroke:1px rgba(169,143,96,.07);
    pointer-events:none; z-index:0;
    white-space:nowrap;
  }

  .foot-top{
    position:relative; z-index:1;
    padding-block:44px 28px;
    gap:30px;
  }

  .foot-brand .brand{ gap:12px; }
  .foot-brand .brand-mark{ width:50px; }
  .foot-brand p{
    margin-top:14px;
    font-size:.78rem; line-height:1.95;
  }

  /* 導覽 ／ 聯絡：標題與清單之間不要留太多 */
  .foot-top h4{ margin-bottom:14px; }
  .foot-top li{ min-height:40px; font-size:.82rem; }

  .foot-bottom{ padding-block:18px; }
}

@media (max-width:400px){
  .foot-mark{ font-size:2.5rem; top:14px; }
  .foot-top{ padding-block:38px 24px; gap:26px; }
}


/* =========================================================
   漢堡鍵／關閉鍵：重寫
   壞掉的原因：兩條線是 absolute 的 top:17px / bottom:17px，
   我在手機版把按鈕從 46px 改成 44px，又給了 width:18px（和
   left/right 打架），兩條線於是只差 9px，看起來像一條粗線；
   展開成 X 時的旋轉支點也跟著跑掉。
   改成用 transform 從中心點推開，尺寸怎麼變都不會歪。
   ========================================================= */
.burger{
  position:relative; z-index:60;
  width:46px; height:46px; padding:0;
  border:1px solid rgba(212,195,160,.28);
  background:transparent; cursor:pointer;
  display:none;                       /* 桌機隱藏，下面斷點開啟 */
}
.burger i{
  position:absolute;
  left:50%; top:50%;
  width:20px; height:1px;
  margin:0;
  background:var(--gold);
  transform-origin:50% 50%;
  transition:transform .45s var(--ease), opacity .3s var(--ease);
}
/* 收合：兩條線各自從中心往上／往下推 5px */
.burger i:nth-child(1){ transform:translate(-50%, -50%) translateY(-5px); }
.burger i:nth-child(2){ transform:translate(-50%, -50%) translateY(5px); }

/* 展開成 X：回到中心再各轉 45° */
.burger.is-open i:nth-child(1){ transform:translate(-50%, -50%) rotate(45deg); }
.burger.is-open i:nth-child(2){ transform:translate(-50%, -50%) rotate(-45deg); }

.burger:hover{ border-color:rgba(212,195,160,.6); }

/* 選單開啟時，按鈕要浮在遮罩之上 */
.drawer{ z-index:45; }
.site-header{ z-index:50; }
.burger.is-open{ z-index:60; }

@media (max-width:1060px){
  .burger{ display:block; }
}
@media (max-width:900px){
  .burger{ width:44px; height:44px; }
  .burger i{ width:18px; }
  .burger i:nth-child(1){ transform:translate(-50%, -50%) translateY(-4.5px); }
  .burger i:nth-child(2){ transform:translate(-50%, -50%) translateY(4.5px); }
  .burger.is-open i:nth-child(1){ transform:translate(-50%, -50%) rotate(45deg); }
  .burger.is-open i:nth-child(2){ transform:translate(-50%, -50%) rotate(-45deg); }
}


/* =========================================================
   捲動揭露：加快、縮短位移
   原本 1.1s ＋ 30px 位移，加上 .rl 的 1.25s 和遮罩的 1.6s，
   三層疊在一起，捲到哪裡都要等一下才長出來，很拖。
   改成 .55s ＋ 14px，延遲階距對半砍。
   進場動畫還在，只是不再讓人「等」。
   ========================================================= */
[data-reveal]{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .55s var(--ease), transform .55s var(--ease);
}
[data-reveal].is-in{ opacity:1; transform:none; }
[data-reveal][data-delay="1"]{ transition-delay:.06s; }
[data-reveal][data-delay="2"]{ transition-delay:.12s; }
[data-reveal][data-delay="3"]{ transition-delay:.18s; }
[data-reveal][data-delay="4"]{ transition-delay:.24s; }

/* 文字逐行推上來：1.25s → .7s */
.rl > span{ transition:transform .7s var(--ease2); }
.rl:nth-child(2) > span{ transition-delay:.07s; }
.rl:nth-child(3) > span{ transition-delay:.14s; }
.rl:nth-child(4) > span{ transition-delay:.21s; }

/* 照片遮罩揭露：1.6s / 1.15s → .9s / .7s */
.curtain > .media{ transition:scale .9s var(--ease2); }
.curtain::after{ transition:transform .7s var(--ease2); }

.hero-crest[data-reveal]{ transition:opacity .6s var(--ease), transform .6s var(--ease); }

/* 手機再快一點：拇指捲動速度比滑鼠快 */
@media (max-width:900px){
  [data-reveal]{
    transform:translateY(10px);
    transition-duration:.42s;
  }
  [data-reveal][data-delay="1"]{ transition-delay:.04s; }
  [data-reveal][data-delay="2"]{ transition-delay:.08s; }
  [data-reveal][data-delay="3"]{ transition-delay:.12s; }
  [data-reveal][data-delay="4"]{ transition-delay:.16s; }
  .rl > span{ transition-duration:.55s; }
  .curtain > .media{ transition-duration:.7s; }
  .curtain::after{ transition-duration:.55s; }
}


/* =========================================================
   手機版：兩欄塌成單欄後一律置中
   桌機版左右分欄時靠左是對的（有對照的軸線），
   但塌成單欄後只剩一條中軸，靠左就顯得歪。
   ========================================================= */
@media (max-width:900px){
  .section .grid.g2 > *,
  .section .grid.g3 > *,
  .section .grid.g4 > *{
    text-align:center;
  }
  .section .grid.g2 .eyebrow,
  .section .grid.g3 .eyebrow{
    justify-content:center;
  }
  .section .grid.g2 .h2,
  .section .grid.g2 .h1,
  .section .grid.g2 .lede,
  .section .grid.g2 p{
    margin-inline:auto;
    max-width:min(100%, 30em);
  }
  /* 字距補償：letter-spacing 會在行尾多留一格，置中就會偏右 */
  .section .grid.g2 .h2,
  .section .grid.g2 .h1{ padding-left:.06em; }

  /* 條列項目仍然靠左，逐項對齊才讀得順 */
  .team-tags{
    justify-items:start;
    max-width:22em; margin-inline:auto;
  }
  .team-tags li{ text-align:left; }
  .info li{ text-align:center; }
  .info b{ display:block; }
}

@media (max-width:400px){
  .team-tags{ max-width:14em; }
}


/* =========================================================
   中文標點的置中補償
   全形逗號「，」佔一個全形寬，但字形只畫在左半邊，
   右半邊是空的。當它落在行尾時，text-align:center 仍把
   那半格算進行寬，整行就會被往左推半格 —— 看起來就是
   「逗號位置怪怪的」。

   兩層處理：
   1. hanging-punctuation:allow-end —— Safari／iOS 原生支援，
      讓行尾標點吊在版心外，是最正確的做法。
   2. .cjk-end —— 其他瀏覽器的備案：手動把行尾標點
      往右拉回半格。只在「確定會斷行」的地方使用，
      搭配 .br-m 這種強制斷行使用才安全。
   ========================================================= */
.h1,
.h2,
.h3,
.display,
.prologue-h1,
.page-hero-inner .h1{
  hanging-punctuation:allow-end;
}

.cjk-end{ font-style:normal; }

/* 手機才強制斷行的位置 */
.br-m{ display:none; }

@media (max-width:900px){
  .br-m{ display:inline; }
  /* 斷行點確定了，才把行尾標點的空白半格收掉 */
  .cjk-end{
    display:inline-block;
    margin-right:-.5em;
  }
}


/* =========================================================
   燈箱縮圖列
   手機上看不到「還有幾張」，也不知道自己在第幾張。
   底部加一條可橫滑的縮圖，目前這張用金框標示並自動捲到中央。
   ========================================================= */
.lightbox{ grid-template-rows:1fr auto; align-content:stretch; }

.lb-thumbs{
  position:absolute; left:0; right:0;
  bottom:0; z-index:5;
  display:flex; align-items:center;
  gap:8px;
  padding:14px clamp(14px,3vw,28px) calc(14px + env(safe-area-inset-bottom, 0px));
  overflow-x:auto; overscroll-behavior-x:contain;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
  background:linear-gradient(180deg, transparent, rgba(6,6,7,.82) 42%);
}
.lb-thumbs::-webkit-scrollbar{ display:none; }
.lb-thumbs[hidden]{ display:none; }

.lb-thumb{
  flex:0 0 auto; position:relative;
  width:64px; height:44px;
  padding:0; border:0; background:none; cursor:pointer;
  opacity:.42;
  transition:opacity .35s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.lb-thumb img{
  width:100%; height:100%;
  object-fit:cover; display:block;
  /* 不要繼承主圖的置中／縮放規則 */
  position:static; transform:none; max-height:none;
}
.lb-thumb::after{
  content:""; position:absolute; inset:0;
  border:1px solid transparent;
  transition:border-color .35s var(--ease);
}
.lb-thumb.is-on{ opacity:1; }
.lb-thumb.is-on::after{ border-color:rgba(212,195,160,.9); }
.lb-thumb:hover{ opacity:.8; }

/* 主圖要讓開縮圖列的高度 */
.lightbox img{ max-height:calc(100vh - 190px); }

@media (max-width:900px){
  .lb-thumb{ width:56px; height:40px; }
  .lb-thumbs{ gap:6px; padding-inline:12px; }
  .lightbox img{ max-height:calc(100dvh - 210px); }
  /* 有縮圖列之後，左右鍵往上移，不要疊在縮圖上 */
  .lb-prev,
.lb-next{ bottom:auto; top:50%; transform:translateY(-50%); }
  .lb-prev{ left:8px; }
  .lb-next{ right:8px; }
  .lb-count{ bottom:auto; top:22px; left:20px; right:auto; }
}


/* =========================================================
   手機選單：改回置中
   我把中文靠左、英文靠右（space-between），項目長短不一時
   中間的空隙就忽大忽小，「精選作品案例」和「PROJECTS」被拉到
   兩端，看起來像兩個不相干的東西。
   改成整組置中，英文縮小跟在後面當註記。
   ========================================================= */
@media (max-width:900px){
  .drawer ul{ max-width:360px; }

  .drawer a{
    display:flex;
    align-items:baseline;
    justify-content:center;      /* ← space-between 改成置中 */
    gap:10px;
    font-size:clamp(1.05rem, 4.4vw, 1.25rem);
    letter-spacing:.26em;
    text-indent:.26em;           /* 字距補償 */
    line-height:1.5;
  }
  .drawer .en{
    flex:0 0 auto;
    font-size:.48rem;
    letter-spacing:.26em; text-indent:.26em;
    color:rgba(169,143,96,.5);
    transform:translateY(-.15em);   /* 對齊中文的視覺中線 */
  }
}

@media (max-width:380px){
  .drawer a{ font-size:1rem; letter-spacing:.2em; text-indent:.2em; gap:8px; }
  .drawer .en{ font-size:.44rem; letter-spacing:.2em; text-indent:.2em; }
}


/* =========================================================
   隱私權政策：手機版重寫
   長篇條文和行銷頁的規則完全不同：
   ・一律靠左，絕不置中（置中的長段落每行起點都不一樣，很難讀）
   ・章節之間要有明顯的分段，不能靠留白硬撐
   ・行寬、行距優先於美感
   ========================================================= */
@media (max-width:900px){

  /* 條文頁不吃「單欄置中」那套規則 */
  .legal,
  .legal *{ text-align:left; }

  .legal{
    max-width:100%;
    margin:0;
  }

  /* ---- 更新日期：做成一枚標籤 ---- */
  .legal-updated{
    display:inline-block;
    margin:0 0 26px;
    padding:7px 12px;
    border:1px solid rgba(169,143,96,.28);
    font-size:.54rem; letter-spacing:.2em; text-indent:.2em;
    color:var(--gold-dim);
  }

  /* ---- 前言 ---- */
  .legal-lead{
    margin:0 0 34px;
    padding:0 0 28px;
    border-bottom:1px solid var(--line-hair);
    font-size:.88rem; line-height:1.95; letter-spacing:.03em;
    color:var(--fg-2);
  }

  /* ---- 章節：標題獨立成一列，不要和內文黏在一起 ---- */
  .legal-block{
    margin:0 0 34px;
    padding:0 0 30px;
    border-bottom:1px solid rgba(169,143,96,.09);
  }
  .legal-block:last-child{ border-bottom:0; padding-bottom:0; margin-bottom:0; }

  .legal-block h2{
    margin:0 0 16px;
    padding:0 0 12px;
    border-bottom:1px solid rgba(169,143,96,.18);
    font-size:.98rem; letter-spacing:.1em; line-height:1.6;
    color:var(--gold-soft);
  }
  .legal-block h2::before{ display:none; }   /* 短劃改用底線，不要兩種記號 */

  .legal-block p{
    margin:0 0 13px;
    font-size:.85rem; line-height:1.95; letter-spacing:.03em;
  }
  .legal-block p:last-child{ margin-bottom:0; }

  /* ---- 條列 ---- */
  .legal-block ul{ margin:0 0 14px; }
  .legal-block ul li{
    padding-left:16px; margin-bottom:8px;
    font-size:.83rem; line-height:1.9;
  }
  .legal-block ul li::before{
    top:.88em; left:0; width:6px;
    background:rgba(169,143,96,.7);
  }

  /* ---- 定義清單：Cookie 三分類 ---- */
  .legal-defs{ margin:0 0 14px; }
  .legal-defs dt{
    margin:20px 0 7px;
    font-size:.8rem; letter-spacing:.1em;
    color:var(--gold-soft);
  }
  .legal-defs dt:first-child{ margin-top:0; }
  .legal-defs dd{
    margin:0; padding:0 0 0 13px;
    border-left:1px solid rgba(169,143,96,.22);
    font-size:.8rem; line-height:1.95;
  }

  /* ---- 最後的聯絡資訊：改回靠左的兩行式 ---- */
  .legal .info{ margin-top:18px; }
  .legal .info li{
    display:grid; grid-template-columns:1fr;
    gap:4px; padding:14px 0;
    text-align:left;
  }
  .legal .info b{
    display:block;
    font-size:.54rem; letter-spacing:.22em; text-indent:.22em;
    color:var(--gold-dim);
  }
  .legal .info span{ font-size:.86rem; letter-spacing:.03em; }
  .legal .info a{ color:var(--gold-soft); }
}

@media (max-width:400px){
  .legal-block h2{ font-size:.92rem; }
  .legal-block p,
.legal-block ul li{ font-size:.8rem; }
}


/* =========================================================
   Cookie 告知視窗：手機版重做
   原本為了避開右下的懸浮按鈕，我在卡片右側硬留 76px 內距，
   結果文字被擠成一條窄長條，按鈕也對不齊，很醜。
   改成：卡片全寬、乾淨排版；懸浮按鈕改為在告知條顯示期間往上讓位。
   ========================================================= */

/* 告知條出現時，右下懸浮按鈕整組上移 */
body.has-consent .dock{
  transform:translateY(-18px);
  transition:transform .5s var(--ease);
}

@media (max-width:900px){
  .consent{
    left:12px; right:12px;
    bottom:calc(12px + env(safe-area-inset-bottom, 0px));
    width:auto;
    transform:translateY(20px);
  }
  .consent.is-in{ transform:none; }

  .consent-inner{
    display:block;                 /* 不再用 flex 擠 */
    padding:20px 18px 18px;        /* ← 右側不再硬留 76px */
    gap:0;
    border:1px solid rgba(212,195,160,.24);
    background:linear-gradient(150deg, rgba(18,15,12,.985), rgba(10,9,8,.985));
    box-shadow:0 20px 50px -18px rgba(0,0,0,.9);
  }

  .consent-orn{ width:26px; height:26px; }

  .consent-text{
    margin:0 0 16px;
    padding-right:34px;            /* 只讓開右上角的 ✕ */
    font-size:.74rem; line-height:1.85; letter-spacing:.02em;
  }
  .consent-text a{ white-space:nowrap; }

  .consent-btn{
    display:block; width:100%;
    min-height:46px; padding:0;
    font-size:.62rem; letter-spacing:.22em; text-indent:.22em;
  }

  .consent-close{
    top:6px; right:6px;
    width:38px; height:38px;
    font-size:.7rem;
  }

  /* 告知條在時，讓懸浮按鈕再往上一點，兩者不重疊 */
  body.has-consent .dock{ transform:translateY(-96px); }
}

@media (max-width:400px){
  .consent-inner{ padding:18px 16px 16px; }
  .consent-text{ font-size:.71rem; line-height:1.8; }
}


/* =========================================================
   手機版格言：強制一行
   《以王者之姿，打造您一生唯一的家。》連同書名號共 19 個字元，
   目前字級放不下，被折成「家。》」孤字結尾，很難看。
   作法：nowrap ＋ 用 vw 綁定字級，讓它永遠剛好塞得下一行。
   ========================================================= */
@media (max-width:900px){
  .prologue-motto{
    white-space:nowrap;
    /* 版心可用寬 ≈ 100vw - 48px，除以 19 個字 ≈ 4.4vw */
    font-size:min(4.4vw, 1.15rem);
    letter-spacing:.02em; text-indent:.02em;
    line-height:1.9;
    margin-inline:0 !important;
  }
  .prologue-motto .mk{ font-size:1.1em; }
}

@media (max-width:360px){
  .prologue-motto{ font-size:4.2vw; letter-spacing:0; text-indent:0; }
}


/* =========================================================
   手機版 hero：位置固定
   JS 的景深效果已停用，這裡把 CSS 端也鎖死，
   避免任何殘留的 translate／opacity 讓標題和按鈕飄移。
   ========================================================= */
@media (max-width:900px){
  .hero-inner{
    translate:none !important;
    opacity:1 !important;
    transform:none;
  }
  /* 按鈕組：等寬、置中、不隨捲動變化 */
  .hero-actions{
    display:flex; justify-content:center;
    gap:10px; flex-wrap:nowrap;
    width:100%; max-width:340px;
    margin-inline:auto;
  }
  .hero-actions .btn{
    flex:1 1 0; min-width:0;
    display:flex; align-items:center; justify-content:center;
    min-height:48px; padding:0 12px;
    font-size:.62rem; letter-spacing:.16em; text-indent:.16em;
    white-space:nowrap;
  }
}


/* =========================================================
   避免孤字行（orphan）
   段落最後只剩「對話。」三個字獨佔一行，是中文排版最扎眼的
   毛病之一。text-wrap:pretty 會讓瀏覽器在斷行時多看幾行，
   自動把前一行擠一點字下來，補滿最後一行。
   Chrome 117+ / Safari 17.5+ 支援；不支援的瀏覽器維持原樣，
   不會有副作用。
   ========================================================= */
p,
.lede,
.legal-block p,
.legal-lead,
.cta-note,
.cta-lede,
.ledger-txt p,
.flow-detail li,
.consent-text{
  text-wrap:pretty;
}

/* 標題仍然用 balance：讓每一行長度接近，比補滿最後一行重要 */
.h1,
.h2,
.h3,
.display,
.prologue-h1,
.page-hero-inner .h1{
  text-wrap:balance;
}

@media (max-width:900px){
  /* 手機行寬窄，孤字更容易發生，字距收一點多爭取空間 */
  .lede,
.section .lede{ letter-spacing:.02em; }
  .legal-block p{ letter-spacing:.02em; }
}


/* =========================================================
   短段落改用 balance，不用 pretty
   text-wrap:pretty 的設計目標是「避免最後一行只剩一個字」，
   但它判斷的是「詞」——中文沒有詞界，整段對它來說近乎一個詞，
   所以「到位。」這種孤字它救不了。

   短段落（三、四行）改用 balance：讓每一行長度盡量接近，
   最後一行自然就不會只剩兩三個字。
   長篇條文不適用（balance 有行數上限且成本高），維持 pretty。
   ========================================================= */
.ledger-txt p,
.lede,
.lede--para,
.cta-lede,
.cta-note,
.page-hero-inner .lede,
.head .lede,
.flow-list h3{
  text-wrap:balance;
}

/* 長篇條文維持 pretty */
.legal-block p,
.legal-lead,
.legal-block ul li,
.legal-defs dd{
  text-wrap:pretty;
}

@media (max-width:900px){
  /* 手機行寬窄，硬斷行只會製造更多孤字，一律交給瀏覽器 */
  .ledger-txt p br,
.lede br,
.lede--para br,
.cta-lede br{ display:none; }

  /* 收一點字距，每行多擠進半個字，孤字機率再降低 */
  .ledger-txt p{ letter-spacing:.01em; }
}


/* =========================================================
   頁尾服務清單
   取代原本那兩行籠統的標語（住宅・別墅・商業空間／室內設計與整體規劃），
   改列八項實際服務。做成兩欄的細字清單，不搶品牌標的視覺重量。
   ========================================================= */
.foot-services{
  list-style:none;
  margin:clamp(20px,2.2vw,28px) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:9px clamp(16px,1.8vw,28px);
  max-width:26em;
}
.foot-services li{
  position:relative;
  padding-left:15px;
  margin:0;
  font-size:.76rem;
  letter-spacing:.08em;
  line-height:1.85;
  color:var(--muted);
}
.foot-services li::before{
  content:"";
  position:absolute; left:0; top:.86em;
  width:7px; height:1px;
  background:rgba(169,143,96,.55);
}

@media (min-width:769px){
  .foot-services{ margin-inline:0; }
}

@media (max-width:900px){
  .foot-services{
    justify-items:start;
    max-width:20em;
    margin-inline:auto;
    gap:7px 20px;
  }
  .foot-services li{
    font-size:.73rem; padding-left:13px; line-height:1.8;
  }
  .foot-services li::before{ width:6px; top:.82em; }
}

@media (max-width:400px){
  .foot-services{ max-width:16em; }
}


/* =========================================================
   作品卡片比例：三張一致
   殘留規則：`.album:last-child .album-fig{ aspect-ratio:3/4 }`
   是三欄網格時代的東西 —— 當時最後一張要獨佔一整列，才刻意
   給它不同比例。現在改成單欄直向堆疊，這條規則沒被清掉，
   第三張就突然變成直幅。
   ========================================================= */
.album:last-child .album-fig,
.album:first-child .album-fig,
.album:nth-child(even) .album-fig,
.album .album-fig{
  aspect-ratio:16/9;
}

@media (max-width:900px){
  .album:last-child .album-fig,
.album:first-child .album-fig,
.album:nth-child(even) .album-fig,
.album .album-fig{
    aspect-ratio:4/3;
  }
  /* 單欄堆疊後不再需要「最後一張佔滿整列」 */
  .album:last-child{ grid-column:auto; }
}


/* =========================================================
   Hero 內容位置固定
   捲動時不再位移／淡出（JS 的景深效果已整組停用），
   這裡把 CSS 端也鎖死，避免殘留值造成漂移。
   ========================================================= */
.hero-inner{
  translate:none !important;
  opacity:1 !important;
}


/* =========================================================
   序章：左圖右文的編年式跨頁
   原本是整段置中的純文字，加了肖像之後改成不對稱雙欄：
   圖 5 ／ 文 7，文字改靠左，用一道金線把大標和格言分開。
   圖片本身三層：偏移的細線襯底 → 照片 → 內縮金框，
   和作品卡片同一套「畫框」語彙。
   ========================================================= */
.prologue--split{
  position:relative;
  padding-block:clamp(90px, 11vw, 170px);
}

/* 背景的 PROLOGUE 描邊字：移到區塊左上，不再置中壓在文字上 */
.prologue--split .prologue-ord{
  position:absolute; left:50%; top:clamp(30px,4vw,58px);
  transform:translateX(-50%);
  font-family:var(--disp); font-weight:300;
  font-size:clamp(.62rem,.8vw,.72rem);
  letter-spacing:.52em; text-indent:.52em;
  color:var(--gold-dim); opacity:.75;
  white-space:nowrap;
}

.prologue-grid{
  display:grid;
  grid-template-columns:5fr 7fr;
  gap:clamp(40px, 5.5vw, 96px);
  align-items:center;
}

/* ---- 左：肖像 ---- */
.prologue-fig{
  position:relative;
  margin:0;
  aspect-ratio:1380 / 1800;
}
.prologue-fig .curtain{
  position:relative; height:100%; overflow:hidden;
}
.prologue-fig .media{
  position:absolute; inset:0;
}
.prologue-fig picture{ display:block; width:100%; height:100%; }
.prologue-fig img{
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block;
  filter:saturate(.94) brightness(.94);
}
/* 內縮金框 */
.prologue-fig-frame{
  position:absolute; inset:clamp(12px,1.3vw,20px);
  border:1px solid rgba(212,195,160,.3);
  pointer-events:none; z-index:2;
}
/* 偏移的細線襯底：讓照片像被架在圖框上 */
.prologue-fig-rule{
  position:absolute; z-index:0; pointer-events:none;
  left:clamp(-26px,-2.2vw,-14px);
  top:clamp(-26px,-2.2vw,-14px);
  width:62%; height:62%;
  border-left:1px solid rgba(212,195,160,.24);
  border-top:1px solid rgba(212,195,160,.24);
}

/* ---- 右：文字 ---- */
.prologue-txt{ min-width:0; text-align:left; }
.prologue--split .eyebrow{ justify-content:flex-start; margin-bottom:22px; }
.prologue--split .eyebrow::after{ display:none; }

.prologue--split .prologue-h1{
  margin:0;
  text-align:left;
  font-size:clamp(1.9rem, 3.4vw, 3.3rem);
  line-height:1.42;
  letter-spacing:.08em;
  margin-right:0;
}

/* 大標與格言之間的金線 */
.prologue-hr{
  display:block;
  width:clamp(52px,5vw,84px); height:1px;
  margin:clamp(30px,3.4vw,46px) 0;
  background:linear-gradient(90deg, rgba(212,195,160,.75), transparent);
}

.prologue--split .prologue-motto{
  margin:0 !important;
  text-align:left;
  white-space:normal;
  font-size:clamp(1rem, 1.35vw, 1.28rem);
  line-height:1.9;
  letter-spacing:.1em; text-indent:0;
  color:var(--gold-soft);
  max-width:24em;
}

/* ---- 平板：縮小欄距 ---- */
@media (max-width:1060px){
  .prologue-grid{ grid-template-columns:1fr 1.25fr; gap:36px; }
  .prologue--split .prologue-h1{ font-size:clamp(1.7rem,3.6vw,2.4rem); }
}

/* ---- 手機：圖在上、文字在下並置中 ---- */
@media (max-width:900px){
  .prologue--split{ padding-block:var(--m-gap); }

  .prologue--split .prologue-ord{
    position:static; transform:none;
    display:block; text-align:center;
    margin-bottom:28px;
  }

  .prologue-grid{
    grid-template-columns:1fr;
    gap:34px;
  }

  .prologue-fig{
    aspect-ratio:4/3;              /* 直幅裁成橫幅，不佔掉整個螢幕 */
    max-width:100%;
  }
  .prologue-fig-rule{ display:none; }   /* 襯底細線在窄螢幕會出血 */
  .prologue-fig-frame{ inset:9px; }

  .prologue-txt{ text-align:center; }
  .prologue--split .eyebrow{ justify-content:center; }
  .prologue--split .prologue-h1{
    text-align:center;
    font-size:clamp(1.6rem, 6.4vw, 2.1rem);
    line-height:1.55;
  }
  .prologue-hr{
    margin:26px auto;
    background:linear-gradient(90deg, transparent, rgba(212,195,160,.75), transparent);
    width:64px;
  }
  .prologue--split .prologue-motto{
    text-align:center;
    margin-inline:auto !important;
    max-width:100%;
    white-space:nowrap;
    font-size:min(4.4vw, 1.05rem);
    letter-spacing:.02em;
  }
}

@media (max-width:400px){
  .prologue--split .prologue-motto{ font-size:4.2vw; letter-spacing:0; }
}


/* =========================================================
   關於頁「品牌故事」：兩欄重新平衡
   拿掉第三段之後右欄變短，兩欄各自靠上，中間就空出一大塊。
   改成垂直置中、收窄欄距，並讓左欄的大標與右欄的首字放大
   對齊同一條視覺基線。
   ========================================================= */
.about-story .shell{
  align-items:center;
  gap:clamp(40px,5vw,88px);
  grid-template-columns:1fr 1.15fr;
}
.about-story{
  padding-block:clamp(70px,8vw,120px);
}
.about-story .h2{
  margin:0;
  font-size:clamp(1.5rem,2.4vw,2.15rem);
  line-height:1.65;
  letter-spacing:.09em;
}
.about-story .eyebrow{ margin-bottom:26px; }

/* 首字放大：縮小一級，不要壓過左欄大標 */
.about-story .lede--drop::first-letter{
  font-size:2.6em;
  line-height:.92;
  margin:.06em .18em 0 0;
}

@media (max-width:900px){
  .about-story .shell{ grid-template-columns:1fr; }
  .about-story{ padding-block:var(--m-gap); }
}


/* =========================================================
   頁尾：四欄重新排版
   之前把八項服務直接掛在品牌標下面，沒有欄標、沒有間距，
   兩欄清單又比品牌欄寬，整塊擠在一起。
   改成正規的四欄：品牌 ／ 服務 ／ 導覽 ／ 聯絡，
   三個內容欄共用同一組欄標與行距，品牌欄只放識別。
   ========================================================= */
.foot-top{
  display:grid;
  grid-template-columns:1.35fr 1.5fr 1fr 1.25fr;
  gap:clamp(28px,3vw,56px);
  padding-block:clamp(64px,7vw,96px) clamp(44px,5vw,68px);
  align-items:start;
}

/* ---- 品牌欄 ---- */
.foot-brand{ align-self:start; }
.foot-brand .brand{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:clamp(16px,1.8vw,22px);
}
.foot-brand .brand-mark{ width:clamp(58px,5vw,76px); height:auto; }
.foot-brand .brand-text{ display:block; }
.foot-brand .brand-text b{
  display:block;
  font-size:clamp(1rem,1.25vw,1.12rem);
  letter-spacing:.2em; text-indent:.2em; line-height:1.5;
}
.foot-brand .brand-text i{
  display:block; margin-top:7px;
  font-size:.58rem; letter-spacing:.28em; text-indent:.28em;
  color:var(--gold-dim); font-style:normal;
}

/* ---- 三個內容欄：共用欄標 ---- */
.foot-col h4{
  font-family:var(--sans); font-weight:500;
  font-size:.58rem; letter-spacing:.32em; text-indent:.32em;
  text-transform:uppercase;
  color:var(--gold-dim);
  margin:0 0 clamp(18px,2vw,26px);
  padding-bottom:12px;
  border-bottom:1px solid rgba(169,143,96,.16);
}
.foot-col ul{ list-style:none; margin:0; padding:0; }
.foot-col li{
  margin:0 0 11px;
  font-size:.82rem; line-height:1.9; letter-spacing:.05em;
  color:var(--muted);
}
.foot-col li:last-child{ margin-bottom:0; }
.foot-col a{ color:inherit; transition:color .4s var(--ease); }
.foot-col a:hover{ color:var(--gold-soft); }

/* ---- 服務欄：內部再切兩欄 ---- */
.foot-services{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px clamp(14px,1.4vw,24px);
  max-width:none;
}
.foot-services li{
  position:relative; padding-left:14px; margin:0;
  font-size:.78rem; line-height:1.85; letter-spacing:.05em;
  color:var(--muted);
}
.foot-services li::before{
  content:""; position:absolute; left:0; top:.86em;
  width:6px; height:1px; background:rgba(169,143,96,.55);
}

/* ---- 中間寬度：服務欄先收成一欄 ---- */
@media (max-width:1180px){
  .foot-top{ grid-template-columns:1.2fr 1.4fr 1fr 1.2fr; gap:32px; }
  .foot-services{ gap:9px 14px; }
  .foot-services li{ font-size:.74rem; }
}

/* ---- 平板：兩欄兩列 ---- */
@media (max-width:1060px) and (min-width:901px){
  .foot-top{
    grid-template-columns:repeat(2, 1fr);
    gap:44px 40px;
  }
}

/* ---- 手機：單欄置中 ---- */
@media (max-width:900px){
  .foot-top{
    grid-template-columns:1fr;
    gap:38px;
    padding-block:44px 28px;
    text-align:center;
  }
  .foot-brand .brand{ align-items:center; }
  .foot-brand .brand-mark{ width:54px; }

  .foot-col h4{
    margin-bottom:16px; padding-bottom:11px;
    font-size:.56rem; letter-spacing:.28em; text-indent:.28em;
  }
  .foot-col li{
    margin:0; min-height:40px;
    display:flex; align-items:center; justify-content:center;
    font-size:.8rem;
  }

  .foot-services{
    justify-items:start;
    max-width:20em; margin-inline:auto;
    gap:6px 18px;
  }
  .foot-services li{
    display:block; min-height:0;
    font-size:.75rem; padding-left:13px; text-align:left;
  }
}

@media (max-width:400px){
  .foot-services{ max-width:16em; }
}


/* =========================================================
   序章：重排（第二版）
   第一版的問題：
   ・圖只佔 5 欄又有固定比例，右側 7 欄裝兩行字，右邊空一大片
   ・那張本身就是金光閃閃的視覺海報，外面再加金框是兩層裝飾打架
   ・左上那個偏移的直角線條沒有意義，看起來像漏畫的框
   作法：圖放大到接近等分、拿掉所有外框、只留一圈暖光把它托起來，
   文字改成靠左的窄欄，和圖等高置中。
   ========================================================= */
.prologue--split{
  padding-block:clamp(80px, 9vw, 140px);
}

.prologue-grid{
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:clamp(48px, 6vw, 110px);
  align-items:center;
  max-width:1240px;
  margin-inline:auto;
}

/* ---- 左：海報 ---- */
.prologue-fig{
  aspect-ratio:1380 / 1800;
  max-width:none;
  width:100%;
  margin-inline:auto;
}
/* 拿掉外框與偏移線：海報本身已經夠華麗 */
.prologue-fig-frame,
.prologue-fig-rule{ display:none; }

/* 改用一圈暖光把海報從黑底上托起來 */
.prologue-fig .curtain{
  box-shadow:
    0 0 0 1px rgba(212,195,160,.14),
    0 40px 90px -30px rgba(0,0,0,.9),
    0 0 120px -40px rgba(169,143,96,.35);
}
.prologue-fig img{
  filter:none;
  object-fit:cover;
}

/* ---- 右：文字，窄欄靠左 ---- */
.prologue-txt{
  max-width:min(100%, 22em);
}
.prologue--split .prologue-h1{
  font-size:clamp(1.8rem, 2.9vw, 2.7rem);
  line-height:1.5;
  letter-spacing:.1em;
}
.prologue-hr{
  margin-block:clamp(26px,2.8vw,38px);
  width:clamp(44px,4vw,68px);
}
.prologue--split .prologue-motto{
  font-size:clamp(.95rem, 1.15vw, 1.12rem);
  line-height:2;
  letter-spacing:.08em;
  max-width:100%;
}

/* PROLOGUE 標記：縮小、往上收，不要孤零零漂在中間 */
.prologue--split .prologue-ord{
  top:clamp(26px,3vw,44px);
  font-size:.58rem;
  letter-spacing:.46em; text-indent:.46em;
  opacity:.5;
}

@media (max-width:1060px){
  .prologue-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:40px;
  }
  .prologue--split .prologue-h1{ font-size:clamp(1.6rem,3.2vw,2.1rem); }
  .prologue-txt{ max-width:100%; }
}

@media (max-width:900px){
  .prologue-grid{
    grid-template-columns:1fr;
    gap:32px;
    max-width:100%;
  }
  .prologue-fig{
    aspect-ratio:1380 / 1800;      /* 手機單欄，海報維持原比例不裁切 */
    max-width:min(78vw, 340px);
  }
  .prologue-fig .curtain{
    box-shadow:
      0 0 0 1px rgba(212,195,160,.14),
      0 24px 50px -20px rgba(0,0,0,.9),
      0 0 80px -30px rgba(169,143,96,.32);
  }
  .prologue-txt{ max-width:100%; }
}


/* =========================================================
   手機版頁尾服務清單：修正參差
   問題：整塊 text-align:center，八個項目各自置中，
   前面那道短劃就跟著每一行的長度左右跳動，看起來很亂。
   作法：兩欄用 auto 寬度、整組置中，項目本身一律靠左，
   短劃就會對齊成兩條直線。
   ========================================================= */
@media (max-width:900px){
  .foot-services{
    display:grid;
    grid-template-columns:repeat(2, auto);
    justify-content:center;      /* 整組置中 */
    justify-items:start;         /* 項目靠左 */
    gap:8px clamp(20px,6vw,34px);
    max-width:none;
    margin-inline:0;
  }
  .foot-services li{
    display:block;
    text-align:left;
    min-height:0;
    padding-left:14px;
    font-size:.78rem;
    letter-spacing:.05em;
    line-height:1.9;
    white-space:nowrap;
  }
  .foot-services li::before{ top:.88em; width:6px; }
}

@media (max-width:400px){
  .foot-services{
    gap:7px 18px;
    max-width:none;
  }
  .foot-services li{ font-size:.72rem; padding-left:12px; }
}

/* 極窄螢幕才退成單欄，並整欄靠左置中對齊 */
@media (max-width:330px){
  .foot-services{ grid-template-columns:auto; }
}


/* =========================================================
   頁尾服務清單：拿掉前置短劃
   短劃在兩欄置中的情況下只會製造參差，項目本身已經夠清楚。
   ========================================================= */
.foot-services li::before{ display:none; }
.foot-services li{ padding-left:0; }

@media (max-width:900px){
  .foot-services li{ padding-left:0; text-align:center; }
  .foot-services{ justify-items:center; }
}


/* =========================================================
   首席設計團隊的服務標籤：改成一塊帶框的面板
   短劃拿掉，改用細金框把八項圈起來，
   欄與列之間用髮絲線分隔——像一張規格表，而不是散落的清單。
   ========================================================= */
.team-tags{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:0;                                  /* 間距改由 li 的內距與分隔線負責 */
  margin:clamp(30px,3.4vw,44px) 0 0;
  padding:clamp(6px,.8vw,10px) clamp(14px,1.6vw,22px);
  max-width:none;
  position:relative;
  border:1px solid rgba(212,195,160,.22);
  background:
    linear-gradient(150deg, rgba(212,195,160,.035), transparent 46%),
    rgba(255,255,255,.012);
}

/* 四角的金色短角：只做角，不做整圈重框 */
.team-tags::before,
.team-tags::after{
  content:""; position:absolute;
  width:14px; height:14px;
  pointer-events:none;
}
.team-tags::before{
  left:-1px; top:-1px;
  border-left:1px solid rgba(212,195,160,.75);
  border-top:1px solid rgba(212,195,160,.75);
}
.team-tags::after{
  right:-1px; bottom:-1px;
  border-right:1px solid rgba(212,195,160,.75);
  border-bottom:1px solid rgba(212,195,160,.75);
}

.team-tags li{
  position:relative;
  padding:clamp(12px,1.4vw,16px) clamp(8px,1vw,14px);
  margin:0;
  font-size:.84rem;
  letter-spacing:.1em;
  line-height:1.7;
  color:var(--fg-2);
  text-align:left;
}
/* 短劃拿掉 */
.team-tags li::before{ display:none; }

/* 列與列之間的髮絲線：最後一列不畫 */
.team-tags li:not(:nth-last-child(-n+2))::after{
  content:""; position:absolute;
  left:0; right:0; bottom:0; height:1px;
  background:rgba(212,195,160,.1);
}
/* 左右欄之間的直線 */
.team-tags li:nth-child(odd){
  box-shadow:1px 0 0 rgba(212,195,160,.1);
}

@media (max-width:900px){
  .team-tags{
    max-width:min(100%, 26em);
    margin-inline:auto;
    padding-inline:clamp(10px,3vw,18px);
  }
  .team-tags li{
    padding:12px 10px;
    font-size:.78rem;
    letter-spacing:.08em;
    text-align:center;
  }
}

@media (max-width:400px){
  .team-tags{ grid-template-columns:1fr; max-width:100%; }
  .team-tags li:nth-child(odd){ box-shadow:none; }
  .team-tags li:not(:last-child)::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
    background:rgba(212,195,160,.1);
  }
  .team-tags li:last-child::after{ display:none; }
}


/* =========================================================
   聯絡資訊清單：拿掉左側短劃
   內容已經置中，左邊那道短劃孤零零掛在外面，
   既不對齊也沒有分隔作用。
   ========================================================= */
.info li::before{ display:none; }
.info li{ padding-left:0; }

@media (max-width:900px){
  .info li{ padding:18px 0; }
}


/* =========================================================
   服務標籤：改成一項一框
   外層那個大面板拿掉，八項各自成為一枚獨立的方框。
   ========================================================= */
.team-tags{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(10px,1.1vw,14px);
  margin:clamp(30px,3.4vw,44px) 0 0;
  padding:0;
  max-width:none;
  border:0;
  background:none;
}
/* 外框的四角記號拿掉 */
.team-tags::before,
.team-tags::after{ display:none; }

.team-tags li{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  min-height:clamp(50px,5vw,62px);
  padding:12px 14px;
  margin:0;
  border:1px solid rgba(212,195,160,.2);
  background:linear-gradient(150deg, rgba(212,195,160,.035), transparent 60%);
  font-size:.82rem;
  letter-spacing:.12em; text-indent:.12em;
  line-height:1.6;
  color:var(--fg-2);
  text-align:center;
  transition:border-color .5s var(--ease), background .5s var(--ease), color .5s var(--ease);
}
/* 先前用來畫分隔線的偽元素一併清掉 */
.team-tags li::before,
.team-tags li::after{ display:none; }
.team-tags li:nth-child(odd){ box-shadow:none; }

.team-tags li:hover{
  border-color:rgba(212,195,160,.5);
  background:linear-gradient(150deg, rgba(212,195,160,.075), transparent 60%);
  color:var(--fg);
}

@media (max-width:900px){
  .team-tags{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:9px;
    max-width:min(100%, 26em);
    margin-inline:auto;
  }
  .team-tags li{
    min-height:46px;
    padding:10px 8px;
    font-size:.75rem;
    letter-spacing:.08em; text-indent:.08em;
  }
}

@media (max-width:400px){
  .team-tags{ grid-template-columns:repeat(2, minmax(0,1fr)); max-width:100%; }
  .team-tags li{ font-size:.71rem; letter-spacing:.05em; text-indent:.05em; min-height:44px; }
}


/* =========================================================
   服務標籤：等高等寬 ＋ 真正置中
   兩個問題：
   1. grid 的每一列高度由該列最高的項目決定，列與列之間就不一樣高
      → grid-auto-rows:1fr 讓所有列等高
   2. letter-spacing 會在最後一個字後面多留一格，text-align:center
      把那格也算進去，文字就整體偏右
      → 改用 padding 補償，不要用 text-indent（那只影響第一行）
   ========================================================= */
.team-tags{
  grid-auto-rows:1fr;                    /* 所有列等高 */
  align-items:stretch;
}
.team-tags li{
  height:100%;
  min-height:clamp(52px,5vw,64px);
  box-sizing:border-box;
  text-indent:0;                          /* 取消，改用下面的 padding 補償 */
  padding:12px 14px 12px calc(14px + .12em);
}

@media (max-width:900px){
  .team-tags li{
    min-height:48px;
    padding:10px 8px 10px calc(8px + .08em);
    text-indent:0;
  }
}

@media (max-width:400px){
  .team-tags li{
    min-height:46px;
    padding:10px 6px 10px calc(6px + .05em);
    text-indent:0;
  }
}


/* =========================================================
   首席設計團隊：右欄置中 ＋ 標籤改成輕量膠囊
   兩個問題：
   1. 左邊是一整張圖，右邊卻靠左排，兩欄沒有共同的軸線
      → 右欄整體置中，和圖的中線呼應
   2. 八個等寬大方框在桌機上太重，把上面的標題壓下去了
      → 改成依內容寬度的小膠囊，置中換行排列
   ========================================================= */

/* ---- 右欄置中 ---- */
.about-team .shell > div:last-child{
  text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.about-team .eyebrow{ justify-content:center; }
.about-team .h2{
  text-align:center;
  padding-left:.06em;            /* 字距補償 */
}
.about-team .lede{
  text-align:center;
  max-width:min(100%, 30em);
  margin-inline:auto;
}

/* ---- 標籤：輕量膠囊 ---- */
.about-team .team-tags,
.team-tags{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:9px;
  grid-template-columns:none;
  grid-auto-rows:auto;
  margin:clamp(30px,3.2vw,42px) auto 0;
  padding:0;
  max-width:min(100%, 34em);
  border:0; background:none;
}
.team-tags li{
  display:inline-flex; align-items:center; justify-content:center;
  width:auto; height:auto;
  min-height:0;
  padding:9px 16px 9px calc(16px + .1em);
  border:1px solid rgba(212,195,160,.22);
  background:rgba(212,195,160,.035);
  font-size:.76rem;
  letter-spacing:.1em; text-indent:0;
  line-height:1.7;
  color:var(--fg-2);
  white-space:nowrap;
}
.team-tags li:hover{
  border-color:rgba(212,195,160,.5);
  background:rgba(212,195,160,.08);
  color:var(--fg);
}

@media (max-width:900px){
  .about-team .shell > div:last-child{ align-items:center; }
  .team-tags{
    gap:8px;
    max-width:100%;
    margin-inline:auto;
  }
  .team-tags li{
    padding:8px 13px 8px calc(13px + .08em);
    font-size:.72rem;
    letter-spacing:.06em;
  }
}


/* =========================================================
   首席設計團隊：文字欄確實置中
   前一版用 .about-team .shell > div:last-child 選取，
   在單欄（手機／窄視窗）時那一欄仍被更早的靠左規則蓋掉。
   這裡直接對每個元素下規則，不依賴子選擇器的位置。
   ========================================================= */
.about-team .shell > div,
.about-team .shell > div > *{
  text-align:center;
}
.about-team .eyebrow{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-inline:auto;
}
.about-team .h2{
  text-align:center;
  margin-inline:auto;
  padding-left:.06em;
  max-width:min(100%, 18em);
}
.about-team .lede{
  text-align:center;
  margin-inline:auto;
  max-width:min(100%, 28em);
}
.about-team .team-tags{
  justify-content:center;
  margin-inline:auto;
}
/* 左欄是圖，不受置中影響 */
.about-team .curtain{ text-align:initial; }


/* =========================================================
   序章：右欄文字置中（與首席設計團隊一致）
   左邊是一整張海報，右邊靠左排會找不到共同軸線。
   ========================================================= */
.prologue-txt,
.prologue-txt > *{
  text-align:center;
}
.prologue-txt{
  max-width:min(100%, 26em);
  margin-inline:auto;
  display:flex; flex-direction:column; align-items:center;
}
.prologue--split .eyebrow{
  display:flex; justify-content:center; align-items:center;
  margin-inline:auto;
}
.prologue--split .prologue-h1{
  text-align:center;
  margin-inline:auto;
  padding-left:.1em;              /* 字距補償 */
}
.prologue-hr{
  margin-inline:auto;
  background:linear-gradient(90deg, transparent, rgba(212,195,160,.75), transparent);
}
.prologue--split .prologue-motto{
  text-align:center;
  margin-inline:auto !important;
  padding-left:.08em;
}

/* 海報：確實收在版心內，不要出血到螢幕邊緣 */
.prologue-grid{ padding-inline:var(--pad, clamp(24px,5vw,64px)); }
.prologue-fig{
  max-width:min(100%, 460px);
  margin-inline:auto;
}

@media (max-width:900px){
  .prologue-grid{ padding-inline:var(--m-pad); }
  .prologue-fig{ max-width:min(78vw, 340px); }
  .prologue-txt{ max-width:100%; }
}


/* =========================================================
   關於頁「品牌故事」：改成上下堆疊
   左右兩欄一邊是三行大標、一邊只有一小段文字，
   兩邊份量差太多，中間永遠空一大塊。
   改成單欄：宣言在上、敘事在下，中間用一道金線分隔。
   ========================================================= */
.about-story .shell{
  display:block;                 /* 取消 grid */
  max-width:min(760px, 90vw);
  margin-inline:auto;
  text-align:center;
}
.about-story .shell > div{
  text-align:center;
}
.about-story .eyebrow{
  display:flex; justify-content:center; align-items:center;
  margin:0 auto 26px;
}
.about-story .h2{
  margin:0 auto;
  text-align:center;
  padding-left:.09em;                    /* 字距補償 */
  font-size:clamp(1.5rem,2.6vw,2.25rem);
  line-height:1.75;
  letter-spacing:.09em;
}

/* 分隔金線 */
.about-story .shell > div:first-child::after{
  content:"";
  display:block;
  width:clamp(48px,5vw,76px); height:1px;
  margin:clamp(32px,3.6vw,48px) auto;
  background:linear-gradient(90deg, transparent, rgba(212,195,160,.7), transparent);
}

.about-story .lede{
  margin:0 auto;
  max-width:min(100%, 30em);
  text-align:center;
  font-size:.95rem;
  line-height:2.15;
  letter-spacing:.045em;
  color:var(--muted);
}
/* 置中的段落不適合首字放大 */
.about-story .lede--drop::first-letter{
  float:none; font-size:inherit; line-height:inherit;
  margin:0; padding:0; color:inherit; font-family:inherit;
}

@media (max-width:900px){
  .about-story .shell{ max-width:100%; padding-inline:var(--m-pad); }
  .about-story .h2{ font-size:clamp(1.3rem,5.4vw,1.65rem); line-height:1.8; }
  .about-story .lede{ font-size:.88rem; line-height:2.05; }
}


/* =========================================================
   頁尾浮水印 RAURELL：上移到 CTA 區塊
   原本它在頁尾頂端自成一條橫帶，前後都是黑的，
   看起來像多出來的一段空白。
   改成絕對定位、往上抬到跨在 CTA 與頁尾的交界上，
   讓它變成兩區之間的過渡，而不是獨立的一塊。
   ========================================================= */
html, body{ overflow-x:clip; }      /* 浮水印越界時不要產生橫向捲軸 */

.site-footer{
  position:relative;
  overflow:visible;                  /* 讓浮水印可以往上溢出 */
}

.foot-mark{
  position:absolute;
  left:50%; top:0;
  transform:translate(-50%, -54%);   /* 約一半疊進上方的 CTA */
  margin:0; padding:0;
  z-index:0; pointer-events:none;
  width:max-content; max-width:96vw;
  font-family:var(--disp); font-weight:300;
  font-size:clamp(3.2rem, 11vw, 9.5rem);
  line-height:1; letter-spacing:.14em; text-indent:.14em;
  white-space:nowrap;
  color:transparent;
  -webkit-text-stroke:1px rgba(169,143,96,.085);
  user-select:none;
}

/* 內容要壓在浮水印之上 */
.site-footer .shell > .foot-top,
.site-footer .foot-bottom{
  position:relative; z-index:1;
}

/* 頁尾少了那條橫帶，上內距可以收一點 */
.foot-top{ padding-block:clamp(56px,6vw,84px) clamp(44px,5vw,68px); }

@media (max-width:900px){
  .foot-mark{
    font-size:clamp(2.6rem, 16vw, 4.4rem);
    letter-spacing:.12em; text-indent:.12em;
    transform:translate(-50%, -50%);
    -webkit-text-stroke:1px rgba(169,143,96,.075);
  }
  .foot-top{ padding-block:44px 28px; }
}


/* =========================================================
   頁尾品牌欄：水平＋垂直置中
   其餘三欄是「欄標 ＋ 清單」靠上對齊，品牌欄只有識別，
   靠上又靠左就顯得孤零零、和右邊三欄對不上任何一條線。
   讓它在自己的欄位裡上下左右都置中。
   ========================================================= */
.foot-top{ align-items:stretch; }      /* 讓品牌欄可以撐滿高度後自行置中 */

.foot-brand{
  align-self:stretch;
  display:flex;
  flex-direction:column;
  align-items:center;                  /* 水平置中 */
  justify-content:center;              /* 垂直置中 */
  text-align:center;
}
.foot-brand .brand{
  display:flex; flex-direction:column;
  align-items:center;
  gap:clamp(14px,1.6vw,20px);
}
.foot-brand .brand-text{ text-align:center; }
.foot-brand .brand-text b{
  padding-left:.2em;                   /* 字距補償，置中才不會偏右 */
}
.foot-brand .brand-text i{
  padding-left:.28em;
}


/* =========================================================
   按鈕：不再跟著滑鼠位移
   磁吸效果已移除，這裡把 transform 鎖回原位，
   避免任何殘留的 inline style 讓按鈕偏移。
   ========================================================= */
.btn,
.btn--lg,
.btn--solid,
.btn--ghost{
  transform:none !important;
}


/* =========================================================
   手機版頁尾：四欄一律置中（含聯絡欄）
   前面的規則分散在好幾個區塊，聯絡欄沒被涵蓋到，
   欄標和內容都還靠左。這裡統一收斂。
   ========================================================= */
@media (max-width:900px){
  .site-footer,
  .foot-top,
  .foot-top > *,
  .foot-col,
  .foot-col h4,
  .foot-col ul,
  .foot-col li,
  .foot-bottom{
    text-align:center;
  }

  .foot-col h4{
    display:block;
    margin-inline:auto;
    padding-left:.3em;                 /* 字距補償 */
  }

  .foot-col ul{
    display:flex; flex-direction:column;
    align-items:center;
  }
  .foot-col li{
    display:flex; align-items:center; justify-content:center;
    width:100%;
    text-align:center;
  }
  .foot-col a{ display:inline-block; }

  /* 服務欄維持兩欄，但整組置中 */
  .foot-services{
    display:grid;
    grid-template-columns:repeat(2, auto);
    justify-content:center;
    justify-items:center;
    align-items:center;
  }
  .foot-services li{
    display:block; width:auto;
    text-align:center;
  }
}


/* =========================================================
   序章：改成上下堆疊（最終版）
   左右分欄的問題：右欄被 26em 的上限夾住，大標「以空間的尺度
   承載一生的講究」被折成四段短行，格言也跟著斷成兩截。
   海報是直幅、文字是短句，兩者本來就不適合並排。
   改成：海報在上、文字在下，整組置中。
   ========================================================= */
.prologue-grid{
  display:block;                     /* 取消 grid */
  max-width:min(760px, 90vw);
  margin-inline:auto;
  padding-inline:0;
  text-align:center;
}

/* ---- 海報 ---- */
.prologue-fig{
  width:min(100%, 340px);
  margin:0 auto clamp(40px,4.5vw,64px);
  aspect-ratio:1380 / 1800;
}

/* ---- 文字 ---- */
.prologue-txt{
  display:block;
  max-width:100%;
  margin-inline:auto;
  text-align:center;
}
.prologue--split .eyebrow{
  display:flex; justify-content:center; align-items:center;
  margin:0 auto 24px;
}
.prologue--split .prologue-h1{
  display:block;
  max-width:100%;                    /* 不再被窄欄夾住，一行放得下 */
  margin:0 auto;
  text-align:center;
  padding-left:.1em;
  font-size:clamp(1.8rem, 3.2vw, 2.9rem);
  line-height:1.55;
  letter-spacing:.1em;
  white-space:normal;
}
.prologue-hr{
  display:block;
  width:clamp(48px,5vw,76px); height:1px;
  margin:clamp(30px,3.4vw,44px) auto;
  background:linear-gradient(90deg, transparent, rgba(212,195,160,.75), transparent);
}
.prologue--split .prologue-motto{
  display:block;
  max-width:100%;
  margin:0 auto !important;
  text-align:center;
  white-space:nowrap;                /* 格言一定要一行 */
  font-size:min(2.6vw, 1.25rem);
  letter-spacing:.06em; text-indent:0;
  padding-left:.06em;
}

/* PROLOGUE 標記 */
.prologue--split .prologue-ord{
  position:static;
  transform:none;
  display:block;
  text-align:center;
  margin:0 auto clamp(26px,3vw,40px);
}

@media (max-width:900px){
  .prologue-grid{
    max-width:100%;
    padding-inline:var(--m-pad);
  }
  .prologue-fig{
    width:min(72vw, 300px);
    margin-bottom:32px;
  }
  .prologue--split .prologue-h1{
    font-size:clamp(1.6rem, 6.2vw, 2.1rem);
    line-height:1.6;
  }
  .prologue--split .prologue-motto{
    font-size:min(4.4vw, 1.05rem);
    letter-spacing:.02em;
  }
}

@media (max-width:400px){
  .prologue--split .prologue-motto{ font-size:4.2vw; letter-spacing:0; }
}


/* =========================================================
   序章：字在上、圖在下
   海報壓在最上面會先聲奪人，把「以空間的尺度／承載一生的講究」
   這句主張擠到很後面才讀到。改成先讀文字、再看畫面收尾。
   順便把間距收緊——原本每一段之間都空太多。
   ========================================================= */
.prologue-grid{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
}

/* 文字先、圖後 */
.prologue-txt{ order:1; width:100%; }
.prologue-fig{ order:2; }

.prologue--split .prologue-ord{
  margin-bottom:clamp(20px,2.4vw,30px);
}
.prologue--split .eyebrow{ margin-bottom:20px; }

.prologue-hr{
  margin:clamp(24px,2.6vw,34px) auto;
}
.prologue--split .prologue-motto{
  margin:0 auto !important;
}

/* 圖：跟在文字後面，尺寸再收一級 */
.prologue-fig{
  width:min(100%, 300px);
  margin:clamp(44px,5vw,68px) auto 0;
}

@media (max-width:900px){
  .prologue-fig{
    width:min(66vw, 260px);
    margin-top:36px;
  }
}


/* =========================================================
   照片不再隨捲動位移
   視差已在 JS 端停用，這裡把 CSS 也鎖死，
   避免任何殘留的 translate 讓圖片飄動。
   ========================================================= */
.curtain > .media,
[data-parallax],
.hero-arch,
.ledger-fig .media,
.hslide .media,
.album-fig img,
.prologue-fig .media{
  translate:none !important;
}


/* =========================================================
   關於頁「品牌故事」大標：收小一級
   它是段落標題，不該和頁面主標（DDNY 帝叡集團…）同一個量級，
   三行連著排更會顯得壓迫。
   ========================================================= */
.about-story .h2{
  font-size:clamp(1.3rem, 2.1vw, 1.85rem);
  line-height:1.8;
  letter-spacing:.1em;
}

@media (max-width:900px){
  .about-story .h2{
    font-size:clamp(1.12rem, 4.4vw, 1.38rem);
    line-height:1.85;
    letter-spacing:.08em;
  }
  .about-story .lede{
    font-size:.84rem;
    line-height:2.1;
  }
}

@media (max-width:400px){
  .about-story .h2{ font-size:1.08rem; }
}


/* =========================================================
   修正：手機版 header／選單失效
   起因是我為了讓頁尾浮水印能往上溢出，在 html, body 加了
   overflow-x:clip。在 iOS Safari 上，對根元素設 overflow
   會影響 position:fixed 的包含區塊，導致固定頁首跟著內容捲、
   全螢幕選單也蓋不滿。
   → 移除根元素的 overflow，改用其他方式擋住橫向溢出。
   ========================================================= */
html, body{ overflow-x:visible; }

/* 橫向溢出改由頁尾自己處理 */
.site-footer{
  position:relative;
  overflow:hidden;                 /* 改回裁切，浮水印不再越界 */
}
.foot-mark{
  position:absolute;
  left:50%; top:0;
  transform:translate(-50%, -28%); /* 上緣被裁掉一部分，像從邊界浮出 */
  z-index:0;
}

/* 固定頁首：明確宣告，不受任何祖先影響 */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  width:100%;
  z-index:50;
}

/* 全螢幕選單：用 dvh，避開 iOS 網址列造成的高度變化 */
.drawer{
  position:fixed;
  inset:0;
  width:100%;
  height:100vh;
  height:100dvh;
  z-index:45;
  overflow-y:auto;
  overscroll-behavior:contain;
}

/* =========================================================
   內頁 hero 底緣分隔線：手機版拉長
   漸層原本在 14%／86% 就淡掉，在窄螢幕上可見的只剩中間一小段，
   看起來像線只畫了一半。手機版把漸層的擴散範圍拉開。
   ========================================================= */
@media (max-width:900px){
  .page-hero .hero-rule::before{
    background:linear-gradient(90deg,
      transparent 0%,
      rgba(212,195,160,.22) 6%,
      rgba(212,195,160,.34) 50%,
      rgba(212,195,160,.22) 94%,
      transparent 100%);
  }
  .page-hero .hero-rule::after{
    background:linear-gradient(90deg,
      transparent 0%,
      rgba(212,195,160,.1) 10%,
      rgba(212,195,160,.16) 50%,
      rgba(212,195,160,.1) 90%,
      transparent 100%);
  }
  .page-hero .hero-rule .hero-orn i{ width:26px; }
}


/* =========================================================
   內頁 hero 分隔線：改用 border 畫，不再靠偽元素
   偽元素定位在不同版面（grid／block、有無 overflow）下會出現
   只畫一段的情況。分隔線本來就是「區塊的下緣」，
   直接用 border-bottom 畫在 .page-hero 上最穩，一定滿寬。
   ========================================================= */
.page-hero{
  border-bottom:1px solid rgba(212,195,160,.26);
}

/* 偽元素只留副線的厚度感，主線交給 border */
.page-hero .hero-rule::before{ display:none; }
.page-hero .hero-rule::after{
  content:""; position:absolute;
  left:0; right:0; bottom:4px;
  width:auto; height:1px; transform:none;
  background:rgba(212,195,160,.1);
}

/* 中央雕花：菱形要蓋住 border，線才會「穿過」它 */
.page-hero .hero-rule .hero-orn b{
  background:var(--bg, #0A0908);
  box-shadow:0 0 0 3px var(--bg, #0A0908);
}

@media (max-width:900px){
  .page-hero{ border-bottom-color:rgba(212,195,160,.22); }
  .page-hero .hero-rule::after{ background:rgba(212,195,160,.08); }
}


/* =========================================================
   手機選單：拿掉英文副標，中文置中
   中英並排時，中文的長度不一（兩字到四字），
   整組置中就等於每一行的中文都落在不同位置。
   拿掉英文，中文自己置中，五行才會對齊同一條軸線。
   ========================================================= */
@media (max-width:900px){
  .drawer .en{ display:none; }

  .drawer a{
    display:block;
    text-align:center;
    padding-left:.28em;              /* 字距補償 */
    font-size:clamp(1.1rem, 4.6vw, 1.35rem);
    letter-spacing:.28em;
    text-indent:0;
    line-height:1.6;
  }
  .drawer li{ padding:clamp(18px,2.6vh,24px) 0; }
}

@media (max-width:380px){
  .drawer a{
    font-size:1.05rem;
    letter-spacing:.22em;
    padding-left:.22em;
  }
}


/* =========================================================
   關於頁：品牌故事長文
   一篇有節奏的文章，不是一坨字。分五種角色：
   標題組 → 敘事段落 → 核心理念 → 詩句 → 收尾三段式
   每一種給不同的字級、行距與留白，讀者才知道現在讀到哪裡。
   ========================================================= */
.about-story{
  padding-block:clamp(78px,9vw,132px);
}
.about-story .shell{
  display:block;
  max-width:min(720px, 90vw);
  margin-inline:auto;
  text-align:center;
}

/* ---- 1. 標題組 ---- */
.story-head{ margin-bottom:clamp(40px,4.6vw,62px); }
.story-head .eyebrow{
  display:flex; justify-content:center; align-items:center;
  margin:0 auto 24px;
}
.story-title{
  margin:0 auto;
  font-size:clamp(1.5rem, 2.6vw, 2.15rem);
  line-height:1.6;
  letter-spacing:.16em;
  padding-left:.16em;                       /* 字距補償 */
  color:var(--fg);
}
.story-sub{
  margin:clamp(14px,1.6vw,20px) auto 0;
  font-size:clamp(.86rem, 1.05vw, .96rem);
  line-height:1.95;
  letter-spacing:.1em;
  padding-left:.1em;
  color:var(--gold-soft);
}
.story-hr{
  display:block;
  width:clamp(44px,4.4vw,68px); height:1px;
  margin:clamp(30px,3.4vw,44px) auto 0;
  background:linear-gradient(90deg, transparent, rgba(212,195,160,.75), transparent);
}

/* ---- 2. 敘事段落 ---- */
.story-body p{
  margin:0 auto clamp(22px,2.4vw,30px);
  max-width:min(100%, 30em);
  font-size:clamp(.88rem, 1vw, .95rem);
  line-height:2.25;
  letter-spacing:.05em;
  color:var(--muted);
  text-wrap:pretty;
}
.story-body p:last-child{ margin-bottom:0; }
.story-body--tight p{
  margin-bottom:clamp(16px,1.8vw,22px);
  line-height:2.1;
}

/* ---- 3. 核心理念：帶引號的重點句 ---- */
.story-quote{
  position:relative;
  margin:clamp(44px,5vw,68px) auto;
  padding:clamp(32px,3.6vw,46px) clamp(24px,3vw,40px);
  max-width:min(100%, 26em);
  border-top:1px solid rgba(212,195,160,.2);
  border-bottom:1px solid rgba(212,195,160,.2);
  font-family:var(--disp); font-weight:300;
  font-size:clamp(1.08rem, 1.7vw, 1.45rem);
  line-height:2;
  letter-spacing:.14em;
  padding-left:calc(clamp(24px,3vw,40px) + .14em);
  color:var(--gold-soft);
}
/* 兩端的菱形，把引句框住 */
.story-quote::before,
.story-quote::after{
  content:"";
  position:absolute; left:50%;
  width:7px; height:7px;
  transform:translateX(-50%) rotate(45deg);
  border:1px solid rgba(212,195,160,.55);
  background:var(--bg, #0A0908);
}
.story-quote::before{ top:-4px; }
.story-quote::after{ bottom:-4px; }

/* ---- 4. 詩句 ---- */
.story-verse{
  margin:clamp(40px,4.6vw,62px) auto;
}
.story-verse p{
  margin:0 auto;
  max-width:min(100%, 26em);
  font-size:clamp(.92rem, 1.15vw, 1.05rem);
  line-height:2.3;
  letter-spacing:.1em;
  padding-left:.1em;
  color:var(--fg-2);
}

/* 對句：兩行金字，字距拉開 */
.story-couplet{
  margin:clamp(34px,4vw,52px) auto;
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(8px,1vw,12px);
}
.story-couplet em{
  font-style:normal;
  font-family:var(--disp); font-weight:300;
  font-size:clamp(1.05rem, 1.6vw, 1.38rem);
  line-height:1.9;
  letter-spacing:.2em;
  padding-left:.2em;
  color:var(--gold-soft);
}

/* ---- 5. 小鯨魚 ---- */
.story-whale{
  margin:clamp(48px,5.5vw,76px) auto 0;
  padding-top:clamp(40px,4.6vw,60px);
  border-top:1px solid var(--line-hair);
}
.story-whale picture{ display:block; }
.story-whale img{
  display:block;
  width:clamp(64px,7vw,92px);
  height:auto;
  margin:0 auto clamp(24px,2.8vw,34px);
  opacity:.85;
}

/* ---- 6. 收尾三段式 ---- */
.story-triad{
  list-style:none;
  margin:clamp(50px,5.6vw,78px) auto 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:0;
  border:1px solid rgba(212,195,160,.18);
}
.story-triad li{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px;
  padding:clamp(24px,2.8vw,34px) clamp(10px,1.4vw,18px);
  text-align:center;
}
.story-triad li + li{
  border-left:1px solid rgba(212,195,160,.12);
}
.story-triad b{
  font-family:var(--disp); font-weight:300;
  font-size:clamp(1.05rem, 1.6vw, 1.35rem);
  letter-spacing:.14em; padding-left:.14em;
  line-height:1.4;
  color:var(--gold-soft);
}
.story-triad span{
  font-size:.74rem;
  letter-spacing:.16em; padding-left:.16em;
  line-height:1.7;
  color:var(--muted);
}

/* ---- 手機 ---- */
@media (max-width:900px){
  .about-story{ padding-block:var(--m-gap); }
  .about-story .shell{ max-width:100%; padding-inline:var(--m-pad); }

  .story-title{
    font-size:clamp(1.2rem, 5vw, 1.5rem);
    letter-spacing:.12em; padding-left:.12em;
    line-height:1.7;
  }
  .story-sub{ font-size:.8rem; line-height:1.9; letter-spacing:.06em; padding-left:.06em; }

  .story-body p{
    font-size:.84rem;
    line-height:2.15;
    letter-spacing:.03em;
    margin-bottom:20px;
  }

  .story-quote{
    margin-block:36px;
    padding:26px 18px;
    padding-left:calc(18px + .1em);
    font-size:.98rem;
    line-height:1.95;
    letter-spacing:.1em;
  }

  .story-verse{ margin-block:34px; }
  .story-verse p{ font-size:.86rem; line-height:2.2; letter-spacing:.06em; padding-left:.06em; }

  .story-couplet em{
    font-size:.98rem;
    letter-spacing:.14em; padding-left:.14em;
  }

  .story-whale{ margin-top:40px; padding-top:34px; }
  .story-whale img{ width:64px; margin-bottom:22px; }

  /* 三段式改直排，橫線分隔 */
  .story-triad{
    grid-template-columns:1fr;
    margin-top:44px;
  }
  .story-triad li{ padding:20px 14px; }
  .story-triad li + li{
    border-left:0;
    border-top:1px solid rgba(212,195,160,.12);
  }
  .story-triad b{ font-size:1rem; }
  .story-triad span{ font-size:.72rem; }
}

@media (max-width:400px){
  .story-title{ font-size:1.15rem; }
  .story-body p{ font-size:.8rem; }
}


/* =========================================================
   品牌故事收尾三句：維持原文的三行寫法
   （原本被我改成表格式的「20 年／是累積」，那是改動文案，
     現在還原成使用者寫的「20年，是累積；」三行。）
   ========================================================= */
.story-close{
  margin:clamp(50px,5.6vw,78px) auto 0;
  padding-top:clamp(40px,4.4vw,58px);
  border-top:1px solid var(--line-hair);
  max-width:min(100%, 24em);
  font-family:var(--disp); font-weight:300;
  font-size:clamp(1.05rem, 1.6vw, 1.35rem);
  line-height:2.15;
  letter-spacing:.16em;
  padding-left:.16em;
  color:var(--gold-soft);
  text-align:center;
}

@media (max-width:900px){
  .story-close{
    margin-top:44px;
    padding-top:34px;
    font-size:.98rem;
    line-height:2.1;
    letter-spacing:.1em;
    padding-left:.1em;
  }
}


/* =========================================================
   品牌故事：回到最單純的「標頭 ＋ 內文」
   先前拆成引句、詩句、對句、鯨魚、三段框五種樣式，
   讀起來反而破碎。整篇就是一篇文章：
   一個標題、一行副標、其餘都是同一種內文。
   ========================================================= */
.about-story .shell{
  max-width:min(680px, 90vw);
  margin-inline:auto;
  text-align:center;
}

/* ---- 標頭 ---- */
.story-head{
  margin:0 auto clamp(44px,5vw,66px);
  padding-bottom:clamp(30px,3.4vw,44px);
  border-bottom:1px solid rgba(212,195,160,.2);
}
.story-title{
  margin:0;
  font-family:var(--disp); font-weight:300;
  font-size:clamp(1.5rem, 2.6vw, 2.2rem);
  line-height:1.6;
  letter-spacing:.16em;
  padding-left:.16em;
  color:var(--fg);
}
.story-sub{
  margin:clamp(14px,1.6vw,20px) 0 0;
  font-size:clamp(.85rem, 1.05vw, .95rem);
  line-height:1.95;
  letter-spacing:.1em;
  padding-left:.1em;
  color:var(--gold-soft);
}

/* ---- 內文：全部同一種 ---- */
.story-body p{
  margin:0 auto clamp(26px,2.8vw,34px);
  max-width:100%;
  font-size:clamp(.88rem, 1vw, .95rem);
  line-height:2.3;
  letter-spacing:.05em;
  color:var(--muted);
  text-align:center;
  text-wrap:pretty;
}
.story-body p:last-child{ margin-bottom:0; }

/* 先前那些特殊區塊的樣式一律失效 */
.story-quote, .story-verse, .story-couplet,
.story-whale, .story-triad, .story-close, .story-hr{
  all:unset;
}

@media (max-width:900px){
  .about-story{ padding-block:var(--m-gap); }
  .about-story .shell{ max-width:100%; padding-inline:var(--m-pad); }

  .story-head{
    margin-bottom:36px;
    padding-bottom:26px;
  }
  .story-title{
    font-size:clamp(1.2rem, 5vw, 1.5rem);
    letter-spacing:.12em; padding-left:.12em;
    line-height:1.7;
  }
  .story-sub{
    font-size:.8rem; line-height:1.9;
    letter-spacing:.06em; padding-left:.06em;
  }
  .story-body p{
    font-size:.84rem;
    line-height:2.2;
    letter-spacing:.03em;
    margin-bottom:24px;
  }
  /* 窄螢幕不要硬斷行 */
  .story-body p br{ display:none; }
}

@media (max-width:400px){
  .story-title{ font-size:1.15rem; }
  .story-body p{ font-size:.8rem; }
}


/* =========================================================================
   ██ 固定頁首：最終定案
   =========================================================================
   反覆沒貼齊上緣的真正原因：
   `html, body { max-width:100%; overflow-x:hidden }`（檔案中出現兩處）。
   在 iOS Safari 上，對根元素同時設 max-width 與 overflow，
   position:fixed 的包含區塊會從「視埠」變成「html 的框」，
   於是 top:0 對齊的是那個框的上緣，而不是螢幕上緣。

   作法：根元素完全不設 overflow / max-width；
   橫向溢出改由各區塊自己用 overflow-x:clip 處理。
   ========================================================================= */
html{
  max-width:none;
  overflow-x:visible;
  margin:0;
  padding:0;
  border:0;
}
body{
  max-width:none;
  overflow-x:visible;
  margin:0;
  padding:0;
  border:0;
  position:static;      /* 不要讓 body 變成包含區塊 */
}

/* 頁首硬釘在視埠上緣 */
.site-header{
  position:fixed !important;
  inset:0 0 auto 0;                    /* top:0; right:0; left:0 */
  width:100%;
  margin:0;
  z-index:50;
  /* iPhone 瀏海：內距往下推，但元素本身仍貼齊上緣 */
  padding-top:env(safe-area-inset-top, 0px);
}
/* 捲動時隱藏：只做位移，不改變定位 */
.site-header.is-hidden{
  transform:translateY(-100%);
}

/* 橫向溢出改由這些容器各自處理，不再動根元素 */
main,
.section,
.hero,
.page-hero,
.cta,
.site-footer,
.hgallery{
  overflow-x:clip;
}

@media (max-width:900px){
  .site-header{ padding-block:14px; padding-top:calc(14px + env(safe-area-inset-top, 0px)); }
}


/* =========================================================================
   手機版 header：一律不透明
   原本只有捲動後（.is-stuck）才有背景，在頁面頂端是全透明的，
   hero 的凱旋門線條會穿透顯示，看起來像「header 上面還有東西」。
   手機螢幕小、hero 圖又滿版，透明 header 的可讀性本來就不好。
   ========================================================================= */
@media (max-width:900px){
  .site-header{
    background:linear-gradient(180deg, rgba(8,7,7,.97) 0%, rgba(8,7,7,.94) 100%);
    -webkit-backdrop-filter:blur(14px) saturate(120%);
            backdrop-filter:blur(14px) saturate(120%);
    border-bottom:1px solid rgba(212,195,160,.12);
  }
  .site-header.is-stuck{
    background:linear-gradient(180deg, rgba(8,7,7,.98) 0%, rgba(8,7,7,.95) 100%);
    border-bottom-color:rgba(212,195,160,.18);
  }
  /* 裝飾底線關掉，避免和 border 疊成兩條 */
  .site-header::after{ display:none; }

  /* 內容要讓開固定頁首的高度 */
  .hero--gate .hero-inner{ padding-top:0; }
}


/* =========================================================================
   ██ iOS Safari：修正 position:fixed 失效
   =========================================================================
   病灶：body::after 的顆粒層用了 mix-blend-mode:overlay。
   mix-blend-mode 會讓 body 建立 stacking context；在 WebKit 上，
   這使 body 成為 position:fixed 子元素的「包含區塊」——
   於是 .site-header 的 top:0 對齊的是 body 上緣而非視埠，
   body 一捲動 header 就跟著跑，頂端也會多出一段空隙。

   Chrome 的裝置模擬不會重現，只有真 iPhone 看得到。

   作法：顆粒改掛在獨立的 .grain 元素上，不再用 body 的偽元素，
   也不用混合模式——3.5% 的雜訊本來就看不出混合與否的差別。
   ========================================================================= */
body::after{
  content:none !important;          /* 整個關掉，改用下面的 .grain */
}

.grain{
  position:fixed; inset:0;
  z-index:118;
  pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}

/* 手機直接關掉顆粒：小螢幕看不出來，又多一層全螢幕合成負擔 */
@media (max-width:900px){
  .grain{ display:none; }
}

/* 確認頁首的定位不被任何祖先影響 */
.site-header{
  position:fixed !important;
  top:0 !important;
  left:0; right:0;
  width:100%;
  z-index:50;
}