/* 風格參考 woodwrights.co.nz
   文字只用三個層級：大標（只在 Banner）、陳述句 statement、小字標籤/列表；其餘交給留白與大圖 */
:root{
  --gold:#bda366; --gold-l:#DDD0B0; --ink:#262525; --text:#4a4848; --mute:#8d8a85;
  --ivory:#F7F4EE; --white:#fff; --line:#E3DED4;
  --gutter:40px;
  --serif:'Noto Serif TC',serif; --en:'Cormorant Garamond',serif;
  --sans:'Helvetica Neue',Arial,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--white);color:var(--ink);font-family:var(--serif);font-weight:400;letter-spacing:.06em;line-height:1.8;overflow-x:hidden}
img{display:block;max-width:100%}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
.en{font-family:var(--en);letter-spacing:.04em}
h1,h3,h4{color:var(--ink);font-weight:500}
body{background:#fff}
/* 背景紋路：固定不捲動，不透明度 60% */
body::before{content:"";position:fixed;inset:0;z-index:-1;background:url(../images/bg.png) repeat center top / 1920px auto;opacity:.6;pointer-events:none}
section{background:transparent}

.js-fade{opacity:0;transform:translateY(40px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
.js-fade.is-in{opacity:1;transform:none}

/* 文字層級 */
h1{font-weight:600;font-size:clamp(34px,3.6vw,64px);line-height:1.4;letter-spacing:.1em}
.statement{font-weight:500;font-size:clamp(20px,1.45vw,26px);line-height:1.75;letter-spacing:.08em;max-width:500px;color:var(--ink)}
.label,.no,.numList,.metaList{font-family:var(--sans);font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.label{color:var(--ink);margin-bottom:40px}
.no{color:var(--mute)}
.textLink{display:inline-block;margin-top:36px;font-size:14px;border-bottom:1px solid var(--ink);padding-bottom:3px}

/* 小字編號列表：與參考相同，01 + 文字，無分隔線 */
.numList li{display:grid;grid-template-columns:80px 1fr;align-items:center;padding:7px 0;color:var(--ink)}
.numList li .no{color:var(--ink)}
.listBlock{margin-top:clamp(160px,18vh,260px)}

/* 格線 */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding:0 var(--gutter)}
.split{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding:0 var(--gutter);align-items:start}
.split-text{grid-column:1 / span 4;padding-top:60px;position:sticky;top:40px}
.split-img{grid-column:6 / -1;margin:0;aspect-ratio:4/5;overflow:hidden}
.split-img img{width:100%;height:100%;object-fit:cover}

.btnGold{display:inline-flex;align-items:center;gap:18px;padding:12px 26px;background:var(--gold);color:#fff;font-family:var(--en);font-size:13px;letter-spacing:.15em}
.btnGold i{width:34px;height:1px;background:currentColor;position:relative}
.btnGold i::after{content:'';position:absolute;right:0;top:0;width:8px;height:1px;background:currentColor;transform:rotate(35deg);transform-origin:100% 50%}

/* 01 banner */
.caseBannerArea{padding:150px 0 100px}
.caseBanner-head{grid-column:1 / span 7}
.metaList{grid-column:9 / -1;align-self:end}
.metaList li{display:grid;grid-template-columns:110px 1fr;padding:7px 0}
.metaList span{color:var(--mute)}
.metaList a{justify-self:start}

/* 02 hero */
.cstHeroArea{height:400vh;position:relative}
.cstHero-sticky{position:sticky;top:0;height:100vh;padding:var(--gutter);display:flex;align-items:center;justify-content:center}
.cstHero-frame{position:relative;width:min(1440px,82%,calc((100vh - 120px) * 1920 / 980));aspect-ratio:1920/980}
.cstHero-frame img{width:100%;height:100%;object-fit:cover}
.cstHero-mask{position:absolute;inset:0;background:rgba(0,0,0,.3);opacity:0;transition:.6s}
.cstHeroArea.is-active .cstHero-mask{opacity:1}
.cstHero-note{position:absolute;left:var(--x);top:var(--y);opacity:0;transform:translateY(16px);transition:.6s;z-index:2}
.cstHero-note.is-show{opacity:1;transform:none}
.cstHero-note .dot{display:block;width:14px;height:14px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 7px rgba(189,163,102,.35);animation:pulse 2s infinite}
.cstHero-note .card{position:absolute;top:26px;right:0;white-space:nowrap;background:#fff;padding:12px 20px;font-size:16px;display:flex;gap:16px;align-items:baseline}
.cstHero-note.left .card{right:auto;left:0}
@keyframes pulse{50%{box-shadow:0 0 0 14px rgba(189,163,102,0)}}

/* 03 brand */
.cstBrandArea{padding:160px 0}
.colorList li{grid-template-columns:80px 30px 1fr}
.colorList li i{display:block;width:16px;height:16px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}

/* 04 rooms */
.cstRoomArea{padding:160px 0}
.browser{grid-column:5 / -1;border:1px solid #d9d9d9;border-radius:8px;overflow:hidden;background:#fff}
.browser-bar{display:flex;align-items:center;gap:16px;padding:12px 18px;background:#f1f1f1;border-bottom:1px solid #e0e0e0}
.browser-dots{display:flex;gap:8px}
.browser-dots i{width:12px;height:12px;border-radius:50%;background:#ff5f57}
.browser-dots i:nth-child(2){background:#febc2e}.browser-dots i:nth-child(3){background:#28c840}
.browser-url{flex:1;background:#fff;border-radius:6px;padding:5px 14px;font-family:var(--sans);font-size:13px;color:#666;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.browser-tag{font-size:13px;color:#fff;background:var(--gold);padding:4px 12px;border-radius:3px;white-space:nowrap}
.browser-body{position:relative}
.browser-body video{display:block;width:100%}
.room-demo{padding:64px 7% 84px;background:#fff;color:var(--text)}
.room-head{margin-bottom:24px}
.room-head .en{color:var(--gold);font-style:italic;font-size:16px}
.room-head h3{font-size:clamp(22px,1.8vw,30px);letter-spacing:.14em}
.room-tabs{display:flex;gap:4px 30px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:48px}
.room-tabs li{padding:12px 2px;cursor:pointer;font-size:15px;color:var(--mute);position:relative;transition:.3s}
.room-tabs li::after{content:'';position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--gold);transition:.4s}
.room-tabs li.is-on{color:var(--ink)}
.room-tabs li.is-on::after{width:100%}
.room-stage{display:grid;grid-template-columns:1.5fr 1fr;gap:48px;align-items:center;position:relative}
.room-stage::before{content:'';position:absolute;left:-12%;top:14%;width:calc(50% + 12%);height:100%;background:var(--gold);z-index:0}
.room-photo{position:relative;z-index:1;aspect-ratio:16/10;overflow:hidden}
.room-photo img{width:100%;height:100%;object-fit:cover;transition:opacity .5s,transform 1.2s}
.room-photo img.is-swap{opacity:0;transform:scale(1.04)}
.room-info{position:relative;z-index:1;transition:opacity .5s}
.room-info.is-swap{opacity:0}
.room-en{color:var(--gold);font-style:italic;font-size:16px}
.room-name{font-size:clamp(22px,1.9vw,32px);letter-spacing:.14em;margin:2px 0 14px}
.room-desc{font-size:14px;margin-bottom:18px}
.room-spec{display:grid;grid-template-columns:auto 1fr;gap:6px 20px;font-size:14px;margin-bottom:26px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.room-spec dt{color:var(--ink);font-weight:500}
.browser-cursor{position:absolute;width:24px;height:24px;pointer-events:none;opacity:0;transition:left .8s ease,top .8s ease,opacity .3s;z-index:5;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 11-7 1-3 7z' fill='%23222' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center/contain}
.browser-cursor.is-show{opacity:1}

/* 05 pages */
.cstPageArea{position:relative;padding:40px 0 160px;overflow:hidden}
.pageHead .statement{grid-column:1 / span 5}
.pageSwiper{margin-top:80px;padding:0 var(--gutter);overflow:visible}
.pageSwiper .pageItem{width:clamp(300px,58vw,1100px);aspect-ratio:759/486;user-select:none;overflow:hidden}
.pageSwiper .pageItem img{width:100%;height:100%;object-fit:cover;object-position:top;pointer-events:none;transition:transform .8s var(--ease)}
.pageSwiper.is-grabbing .pageItem img{transform:scale(.96)}
.pageFoot{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;padding:0 var(--gutter);margin-top:32px}
.pageProgress{height:1px;background:rgba(0,0,0,.12)}
.pageProgress i{display:block;height:100%;background:var(--gold);transform-origin:left center;transform:scaleX(.1667);transition:transform .6s}
.dragCursor{position:fixed;left:0;top:0;z-index:60;width:71px;height:71px;margin:-35.5px 0 0 -35.5px;pointer-events:none}
.dragCursor .inner{width:100%;height:100%;border:1px solid #000;border-radius:50%;display:flex;align-items:center;justify-content:center;gap:7px;opacity:0;transform:scale(.3);transition:opacity .35s,transform .45s,background .35s,color .35s;background:rgba(255,255,255,.6);backdrop-filter:blur(4px)}
.dragCursor .arrowL,.dragCursor .arrowR{width:6px;height:6px;border-left:1px solid;border-bottom:1px solid}
.dragCursor .arrowL{transform:rotate(45deg)}.dragCursor .arrowR{transform:rotate(-135deg)}
.dragCursor .dot{width:2px;height:2px;border-radius:50%;background:currentColor}
.dragCursor.is-show .inner{opacity:1;transform:scale(1)}
.dragCursor.is-down .inner{transform:scale(.78);background:#000;color:#fff}
@media (hover:hover) and (pointer:fine){.pageSwiper,.pageSwiper *{cursor:none}}
@media (hover:none){.dragCursor{display:none}}

/* 06 end：版型同範例 */
.caseEndArea{padding:60px 0 140px;text-align:center}
.caseEndArea .logo{margin:0 auto;width:250px;height:auto}
.caseEndArea .text{margin-top:28px;font-size:16px;letter-spacing:.2em;color:#3b3b3b}
.caseEndArea .btnBox{display:flex;justify-content:center;gap:16px;margin-top:44px;flex-wrap:wrap;padding:0 16px}
.btn{display:inline-flex;align-items:center;justify-content:center;width:318px;max-width:100%;height:48px;padding:0 32px;background:var(--gold);color:#fff;font-size:14px;letter-spacing:.2em;position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;inset:0;background:#000;transform:translateY(101%);transition:transform .6s var(--ease)}
.btn span{position:relative;z-index:1}
.btn:hover::after{transform:translateY(0)}
.btn.line{background:none;color:#000;border:1px solid #c0c0c0}
.btn.line:hover{color:#fff}

/* RWD */
@media (max-width:1200px){
  .split-text{grid-column:1 / span 5}
  .split-img{grid-column:7 / -1}
  .split.reverse .split-text{grid-column:1 / span 8;position:static}
  .browser{grid-column:1 / -1;margin-top:80px}
  .split.reverse .listBlock{margin-top:60px}
}
@media (max-width:900px){
  :root{--gutter:20px}
  .grid,.split{display:block}
  .split-text{position:static;padding-top:0}
  .listBlock{margin-top:60px}
  .metaList{margin-top:48px}
  .split-img{margin-top:60px}
  .room-stage{grid-template-columns:1fr;gap:30px}
  .room-stage::before{left:-10%;width:120%;height:auto;aspect-ratio:16/9;top:-20px}
}
@media (max-width:640px){
  .caseBannerArea{padding:90px 0 60px}
  .cstHeroArea{height:auto}
  .cstHero-sticky{position:static;height:auto}
  .cstHero-frame{height:auto;aspect-ratio:1920/980}
  .cstHero-note{display:none}
  .cstBrandArea,.cstRoomArea{padding:90px 0}
  .browser-tag{display:none}
  .room-demo{padding:30px 18px 40px}
  .pageSwiper{margin-top:48px}
  .pageSwiper .pageItem{width:84vw}
}

/* 首頁設計稿：框內緩慢捲動整頁 */
.scrollShot img{height:auto;object-fit:initial;animation:shotScroll 40s ease-in-out infinite alternate}
.scrollShot:hover img{animation-play-state:paused}
@keyframes shotScroll{0%,6%{transform:translateY(0)}94%,100%{transform:translateY(calc(-100% + var(--frameH,100%)))}}

/* 照片堆疊（參考 perappelgren.de） */
.stackArea{position:relative;height:calc(100vh + 6 * 70vh)}
.stack-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center}
.stack-cards{position:relative;width:min(480px,78vw);aspect-ratio:4/5}
.stack-card{position:absolute;inset:0;margin:0;transform:translate3d(0,110vh,0);will-change:transform}
.stack-card img{width:100%;height:100%;object-fit:cover}
@media (max-width:640px){
  .stackArea{height:calc(100vh + 6 * 55vh)}
}

/* 平滑捲動（Lenis，參考 bybang.co） */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}
[data-speed]{will-change:translate}

/* 內頁跑馬燈：線性等速 */
.pageSwiper .swiper-wrapper{transition-timing-function:linear !important}

/* 上下邊緣往後捲 */
[data-curve]{backface-visibility:hidden}
[data-curve].curve-ready{transition:opacity 1.2s var(--ease),transform .15s linear}

/* ===== 文字排版：參考大倉久和官網 ===== */
:root{--vollkorn:'Vollkorn',serif}
.secEn{font-family:var(--vollkorn);font-size:15px;letter-spacing:.04em;color:var(--mute);margin-bottom:14px;text-transform:none}
.secTitle{font-family:var(--serif);font-size:clamp(26px,1.9vw,34px);font-weight:600;letter-spacing:3px;line-height:1.5;color:var(--ink)}
.secSub{margin-top:26px;font-size:16px;line-height:2.3;letter-spacing:.08em;color:var(--ink)}
.secTag{font-family:var(--vollkorn);font-size:16px;line-height:2;text-align:right;color:var(--ink)}
.caseBanner-head .secEn{font-size:17px}
.metaList{font-family:var(--serif);text-transform:none;letter-spacing:.1em;font-size:15px}
.metaList span{font-family:var(--vollkorn);font-size:14px;letter-spacing:.04em}
.numList{font-family:var(--serif);text-transform:none;font-size:15px;letter-spacing:.12em}
.numList .no,.no{font-family:var(--vollkorn);font-size:15px;letter-spacing:.04em}
.colorList li{font-family:var(--vollkorn);font-size:16px;letter-spacing:.04em}
.cstPageArea .pageHead{align-items:end}
.pageHead .secHead{grid-column:1 / span 6}
.pageHead .secTag{grid-column:9 / -1}

/* 大英文字浮水印 */
.caseBannerArea,.cstBrandArea,.cstRoomArea,.cstPageArea{position:relative;overflow-x:clip}
.watermark{position:absolute;top:40px;right:-0.04em;z-index:0;font-family:var(--vollkorn);font-size:clamp(120px,13vw,260px);line-height:1;letter-spacing:.02em;color:#000;opacity:.035;white-space:nowrap;pointer-events:none;user-select:none}
.cstBrandArea .watermark,.cstPageArea .watermark{right:auto;left:-0.04em}
.caseBannerArea .watermark{top:auto;bottom:-0.12em}
.caseBannerArea .grid,.split,.pageHead,.pageSwiper,.pageFoot{position:relative;z-index:1}
@media (max-width:900px){
  .watermark{font-size:28vw}
  .pageHead .secTag{text-align:left;margin-top:24px}
}

/* 聚光網格：游標附近的麻葉紋線條變成香檳金（只有線條變色）
   做法：同一張紋路當遮罩（bg-lines.png），再疊一個以游標為圓心的圓形遮罩 */
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .5s;
  background:var(--gold);/* 整層 45% 不透明，線條變淡，不搶文字 */
  -webkit-mask-image:var(--lines),radial-gradient(circle 240px at var(--mx,50%) var(--my,50%),#000 0%,rgba(0,0,0,.6) 45%,transparent 100%);
          mask-image:var(--lines),radial-gradient(circle 240px at var(--mx,50%) var(--my,50%),#000 0%,rgba(0,0,0,.6) 45%,transparent 100%);
  -webkit-mask-size:1920px auto,100% 100%;mask-size:1920px auto,100% 100%;
  -webkit-mask-position:center top,0 0;mask-position:center top,0 0;
  -webkit-mask-repeat:repeat,no-repeat;mask-repeat:repeat,no-repeat;
  -webkit-mask-composite:source-in;mask-composite:intersect}
body.is-spot::after{opacity:.28}
@media (hover:none){body::after{display:none}}

/* 置中標題區塊（參考春水堂範例）：圖示 → 中文標題 → 英文副標 → 兩行說明 */
.centerHead{position:relative;z-index:1;max-width:960px;margin:0 auto 110px;padding:0 20px;text-align:center}
.centerHead-icon{display:block;width:44px;height:44px;margin:0 auto 26px;color:var(--gold)}
.centerHead-title{font-family:var(--serif);font-size:clamp(24px,1.9vw,34px);font-weight:600;letter-spacing:.14em;line-height:1.6;color:var(--ink)}
.centerHead-en{margin-top:10px;font-family:var(--vollkorn);font-size:clamp(16px,1.1vw,20px);letter-spacing:.03em;color:var(--ink)}
.centerHead-desc{margin-top:34px;font-size:16px;line-height:2.1;letter-spacing:.1em;color:var(--text)}
/* 標題移到上方後，左欄只留列表 */
.split-text .listBlock{margin-top:0}
.cstPageArea{padding-top:140px}
@media (max-width:900px){
  .centerHead{margin-bottom:60px}
  .centerHead-desc br{display:none}
}

/* 客房區：移除左欄後，瀏覽器框置中 */
.cstRoomArea .browser{grid-column:2 / span 10}
@media (max-width:1200px){.cstRoomArea .browser{grid-column:1 / -1;margin-top:0}}

/* 品牌區：色卡（A）+ 字體示範（C） */
.colorCards{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;max-width:1500px;margin:0 auto;padding:0 var(--gutter)}
.colorCard:nth-child(2){transition-delay:.12s}.colorCard:nth-child(3){transition-delay:.24s}
.colorCard-chip{position:relative;aspect-ratio:16/9;padding:26px 30px;display:flex;flex-direction:column;justify-content:flex-end;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.colorCard-chip.is-dark{color:#fff}
.colorCard-chip .no{position:absolute;top:24px;left:30px;color:inherit;opacity:.7}
.colorCard-chip b{font-family:var(--vollkorn);font-size:clamp(22px,1.7vw,30px);font-weight:400;line-height:1.2}
.colorCard-chip em{font-style:normal;font-family:var(--vollkorn);font-size:15px;opacity:.75;margin-top:4px}
.colorCard-use{margin:0;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--line);border-top:0}
.colorCard-use img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.colorCard:hover .colorCard-use img{transform:scale(1.05)}
.colorCard-name{margin-top:22px;font-size:20px;font-weight:600;letter-spacing:.14em}
.colorCard-desc{margin-top:4px;font-size:15px;color:var(--text);letter-spacing:.08em}

.typeSpec{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center;max-width:1500px;margin:120px auto 0;padding:56px var(--gutter) 0;border-top:1px solid var(--line)}
.typeSpec-zh{font-size:clamp(32px,2.9vw,56px);font-weight:600;letter-spacing:.16em;line-height:1.3;color:var(--ink)}
.typeSpec-en{font-family:var(--vollkorn);font-style:italic;font-size:clamp(20px,1.5vw,28px);color:var(--gold);margin-top:6px}
.typeSpec-list div{display:grid;grid-template-columns:110px 1fr;padding:18px 0;border-bottom:1px solid var(--line)}
.typeSpec-list div:first-child{border-top:1px solid var(--line)}
.typeSpec-list dt{font-size:14px;color:var(--mute);letter-spacing:.1em;padding-top:3px}
.typeSpec-list dd{font-size:14px;color:var(--text);letter-spacing:.06em}
.typeSpec-list dd b{display:block;font-size:19px;font-weight:600;color:var(--ink);margin-bottom:2px}
.typeSpec-list dd b.vk{font-family:var(--vollkorn);font-weight:400;font-size:21px}
@media (max-width:900px){
  .colorCards{grid-template-columns:1fr;gap:48px}
  .typeSpec{grid-template-columns:1fr;gap:36px;margin-top:80px}
}

/* 字體樣本卡：用底色區隔，不用線條 */
.typeSpec{border-top:0;padding-top:0}
.typeCards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.typeCards li{background:var(--ivory);padding:30px 24px 26px;display:flex;flex-direction:column}
.typeCard-glyph{font-size:clamp(40px,3.2vw,60px);font-weight:600;line-height:1.1;color:var(--ink);margin-bottom:26px;letter-spacing:.06em}
.typeCard-glyph.vk{font-family:var(--vollkorn);font-weight:400;color:var(--gold)}
.typeCard-glyph.light{font-weight:400}
.typeCards b{font-size:15px;font-weight:600;color:var(--ink);letter-spacing:.04em;line-height:1.5}
.typeCards em{font-style:normal;margin-top:4px;font-size:13px;color:var(--mute);letter-spacing:.08em}
@media (max-width:640px){.typeCards{grid-template-columns:1fr}}
.typeCards b small{display:block;font-family:var(--vollkorn);font-weight:400;font-size:14px;color:var(--text);letter-spacing:.02em}
/* 字體樣本卡：加大內距與間距，留白多一點 */
.typeCards{gap:24px}
.typeCards li{padding:48px 36px 42px}
.typeCard-glyph{margin-bottom:40px}
.typeCards em{margin-top:14px}
.typeSpec{grid-template-columns:.8fr 1.4fr}
.typeCards em,.typeCards b small{white-space:nowrap}

/* 內頁區塊：米白底色，和前後區塊區隔 */
.cstPageArea{background:var(--ivory)}

/* 04-2 餐飲美饌：直排選單切換（仿首頁餐飲區） */
.cstDineArea{position:relative;padding:40px 0 160px}
.dine-browser{position:relative;z-index:1;max-width:1520px;margin:0 auto;width:calc(100% - var(--gutter) * 2)}
.dine-demo{position:relative;aspect-ratio:16/7;min-height:460px;overflow:hidden;background:#111;color:#fff}
.dine-bgs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity 1s var(--ease),transform 2.4s var(--ease)}
.dine-bgs img.is-on{opacity:1;transform:scale(1)}
.dine-demo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.35) 45%,rgba(0,0,0,.15) 70%,rgba(0,0,0,.55) 100%);pointer-events:none}
.dine-info{position:absolute;z-index:2;left:7%;top:50%;transform:translateY(-50%);max-width:420px;transition:opacity .45s}
.dine-info.is-swap{opacity:0}
.dine-en{font-family:var(--vollkorn);font-size:15px;opacity:.75}
.dine-name{font-size:clamp(24px,2vw,34px);font-weight:600;letter-spacing:.14em;color:#fff;margin:6px 0 20px}
.dine-desc{font-size:14px;line-height:2.1;letter-spacing:.06em;opacity:.88}
.dine-more{display:inline-flex;align-items:center;gap:16px;margin-top:30px;padding:10px 22px;border:1px solid rgba(255,255,255,.6);font-family:var(--vollkorn);font-size:12px;letter-spacing:.15em}
.dine-more i{width:30px;height:1px;background:currentColor}
/* 直排選單 */
.dine-menu{position:absolute;z-index:2;right:12%;top:12%;display:flex;flex-direction:row-reverse;gap:6px}
.dine-menu li{writing-mode:vertical-rl;font-size:16px;letter-spacing:.32em;padding:6px 10px;cursor:pointer;color:rgba(255,255,255,.55);border-right:1px solid rgba(255,255,255,.18);transition:color .4s}
.dine-menu li:hover{color:#fff}
.dine-menu li.is-on{color:#fff;border-right-color:var(--gold)}
.dine-menu li small{display:block;font-family:var(--vollkorn);font-size:11px;letter-spacing:.08em;opacity:.7;margin-top:10px}
.dine-label{position:absolute;z-index:2;right:4.5%;top:12%;writing-mode:vertical-rl;font-size:24px;letter-spacing:.4em;font-weight:600;padding-right:14px;border-right:1px solid rgba(255,255,255,.5)}
.dine-mark{position:absolute;z-index:1;right:3%;bottom:-.18em;font-family:var(--vollkorn);font-size:clamp(80px,9vw,170px);line-height:1;color:#fff;opacity:.1;pointer-events:none}
@media (max-width:900px){
  .dine-demo{aspect-ratio:auto;min-height:620px}
  .dine-info{top:auto;bottom:40px;transform:none;left:24px;right:24px}
  .dine-menu{right:auto;left:20px;top:24px;flex-direction:row}
  .dine-label{display:none}
}

/* 首屏解析：縮短釘選距離（原 400vh），圖片隨捲動放大 */
.cstHeroArea{height:220vh}
.cstHero-frame{transform-origin:50% 50%;will-change:transform}
.cstHero-note{transition:opacity .5s,transform .5s}
@media (max-width:640px){.cstHeroArea{height:auto}.cstHero-frame{transform:none !important}}

/* 色卡修正：圖片寬度對齊色塊；色塊與圖片之間固定白線，hover 放大不會蓋掉 */
.colorCard-use{position:relative;border:0;box-shadow:none}
.colorCard-use::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:#fff;z-index:2}
.colorCard-use::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);pointer-events:none;z-index:2}

/* Banner：右欄導言＋專案資訊，和大標底部對齊 */
.caseBannerArea .grid{align-items:end}
.caseBanner-side{grid-column:8 / -1;align-self:end}
.caseBanner-lead{font-size:17px;line-height:2.1;letter-spacing:.08em;color:var(--ink);margin-bottom:36px}
.caseBanner-side .metaList{grid-column:auto;padding-top:24px;border-top:1px solid var(--line)}
@media (max-width:900px){.caseBanner-side{margin-top:48px}.caseBanner-lead br{display:none}}
/* Banner：左右多留一些空間 */
.caseBannerArea .grid{padding:0 max(var(--gutter),8vw)}
/* Banner 專案資訊：行距縮小 */
.caseBanner-side .metaList li{padding:3px 0;line-height:1.6}

/* Banner 醒目化：①「款待」香檳金＋逐字浮現 ②大銀杏葉裝飾 */
.caseBannerArea h2 .gold{color:var(--gold)}
.js-splitTitle .ch{display:inline-block;opacity:0;transform:translateY(.6em);filter:blur(6px);
  animation:chIn 1s var(--ease) forwards;animation-delay:calc(var(--i) * 70ms + .2s)}
@keyframes chIn{to{opacity:1;transform:none;filter:none}}
/* 標題逐字跑完後，右欄才淡入 */
.caseBanner-side.js-fade{transition-delay:.9s}

.bannerLeaf{position:absolute;z-index:0;top:40px;right:20%;width:clamp(260px,26vw,500px);height:auto;aspect-ratio:1;
  color:var(--gold);opacity:.16;pointer-events:none;transform-origin:50% 70%;
  animation:leafFloat 9s ease-in-out infinite}
@keyframes leafFloat{0%,100%{translate:0 0}50%{translate:0 -16px}}
@media (max-width:900px){.bannerLeaf{right:-10%;top:20px;opacity:.12}}
@media (prefers-reduced-motion:reduce){.js-splitTitle .ch{animation:none;opacity:1;transform:none;filter:none}.bannerLeaf{animation:none}}
/* 大銀杏葉移到左側大標後方 */
.bannerLeaf{right:auto;left:2vw;top:10px}
@media (max-width:900px){.bannerLeaf{left:-10%;right:auto}}
/* 大銀杏葉：縮小、傾斜，扇面朝左上，葉柄斜向大標 */
.bannerLeaf{left:-1vw;top:80px;width:clamp(200px,17vw,330px);transform-origin:50% 50%}
.bannerLeaf{left:24px;top:110px}
.bannerLeaf{width:clamp(260px,22vw,420px);left:0;top:90px;opacity:.22}
/* 葉子水平翻轉 */
.bannerLeaf{scale:-1 1}
/* 葉子再往左，葉柄可超出畫面 */
.bannerLeaf{left:-90px}
/* 大銀杏葉：依調整面板設定（量測寬 1889px：left 338 / top 89 / width 367 / opacity .12 / 不翻轉），換算成畫面寬比例 */
.bannerLeaf{left:17.9vw;top:89px;width:clamp(200px,19.4vw,420px);opacity:.12;scale:1 1}
.dine-more i{position:relative}.dine-more i::after{content:"";position:absolute;right:0;top:0;width:8px;height:1px;background:currentColor;transform:rotate(35deg);transform-origin:100% 50%}
.caseBanner-logo{display:block;width:150px;height:auto;margin:0 0 40px}
.caseBanner-side{display:grid;grid-template-columns:auto 1fr;column-gap:48px;align-items:center}.caseBanner-side .caseBanner-logo{margin:0;width:140px}.caseBanner-side .caseBanner-lead{margin:0;max-width:30em}.caseBanner-side .metaList{grid-column:1/-1;margin-top:40px}
.cstHero-frame{width:min(calc(100% + 2 * var(--gutter) - 2 * max(var(--gutter),8vw)),calc((100vh - 60px) * 1920 / 980))}
.caseBanner-head .caseBanner-lead{margin:48px 0 0;max-width:32em}.caseBanner-side{display:block}.caseBanner-side .caseBanner-logo{width:150px;margin:0 0 48px}.caseBanner-side .metaList{margin-top:0}
.caseBanner-side{position:relative}.caseBanner-side .caseBanner-logo{position:absolute;right:0;bottom:0;margin:0;width:150px}
.caseBanner-side .caseBanner-logo{width:110px}
.caseBanner-side .caseBanner-logo{top:28px;bottom:auto}
.caseBanner-head .caseBanner-lead{max-width:none;white-space:nowrap}@media (max-width:900px){.caseBanner-head .caseBanner-lead{white-space:normal}}
.metaList li{align-items:last baseline}
.caseBanner-side .caseBanner-logo{top:40px}
.stack-slogan{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;z-index:0;pointer-events:none}.stack-slogan .secEn{margin:0 0 20px}.stack-slogan h2{margin:0;font-family:"Noto Serif TC",serif;font-weight:600;font-size:clamp(28px,3.4vw,64px);letter-spacing:.12em;line-height:1.4;color:var(--ink,#262525)}.stack-cards{z-index:1}

/* ===== 沉穩動態：1 圖片遮罩展開 ===== */
.rv{clip-path:inset(0 0 100% 0);transition:clip-path 1.5s cubic-bezier(.77,0,.18,1)}
.rv.is-rv{clip-path:inset(0 0 0 0)}
.rv.rv-done{clip-path:none}
.rv img{scale:1.12;transition:scale 2.2s cubic-bezier(.2,.7,.2,1)}
.rv.is-rv img{scale:1}

/* ===== 2 標題淡入（模糊轉清晰） ===== */
.centerHead-title,.centerHead-en,.centerHead-desc{opacity:0;filter:blur(8px);translate:0 28px;transition:opacity 1.4s ease,filter 1.4s ease,translate 1.4s cubic-bezier(.2,.7,.2,1),letter-spacing 1.8s ease}
.centerHead-en{letter-spacing:0;transition-delay:.25s}
.centerHead-desc{transition-delay:.45s}
.centerHead.is-in .centerHead-title,.centerHead.is-in .centerHead-en,.centerHead.is-in .centerHead-desc{opacity:1;filter:none;translate:0 0}
.centerHead.is-in .centerHead-en{letter-spacing:.08em}

/* ===== 3 細線延伸 ===== */
.metaList{border-top:0;position:relative}
.metaList::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);transform:scaleX(0);transform-origin:left;transition:transform 1.6s cubic-bezier(.77,0,.18,1) .3s}
.is-in .metaList::before{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.rv{clip-path:none}.rv img{scale:1}.centerHead-title,.centerHead-en,.centerHead-desc{opacity:1;filter:none;translate:0 0}.metaList::before{transform:none}}
.stack-slogan{z-index:2}
.browser.rv{transition:clip-path 2.6s cubic-bezier(.65,0,.25,1)}.browser.rv img{transition:scale 3.2s cubic-bezier(.2,.7,.2,1)}
.cstHero-frame{overflow:hidden}.cstHero-frame.rv img{scale:none;transition:none}.cstHero-frame > img{transform-origin:50% 50%;will-change:transform}
.stack-slogan.is-white{z-index:3;clip-path:inset(100% 0 0 0)}.stack-slogan.is-white h2,.stack-slogan.is-white .secEn{color:#fff}
.stack-slogan:not(.is-white){z-index:0}
.pageSwiper .pageItem{width:clamp(280px,30vw,640px)}@media (max-width:900px){.pageSwiper .pageItem{width:72vw}}
.pageSwiper .pageItem{width:clamp(280px,44vw,960px)}@media (max-width:900px){.pageSwiper .pageItem{width:72vw}}

/* ===== Banner 置中版 ===== */
.bnCenter{min-height:max(760px,100vh);padding:140px 0 120px;display:flex;align-items:center;justify-content:center}
.bnInner{position:relative;z-index:2;text-align:center;padding:0 var(--gutter);max-width:980px}
.bnLogo{display:block;width:96px;height:auto;margin:0 auto 40px}
.bnInner .secEn{font-size:17px;margin-bottom:22px}
.bnInner h1{margin:0}
.bnLead{margin:44px auto 0;font-size:17px;line-height:2.1;letter-spacing:.08em;color:var(--ink)}
.bnMeta{display:flex;justify-content:center;flex-wrap:wrap;gap:0;margin:48px auto 0;padding:0;list-style:none;font-size:15px;color:var(--ink)}
.bnMeta li{padding:0 28px;line-height:1.8;position:relative}
.bnMeta li+li::before{content:"";position:absolute;left:0;top:50%;width:1px;height:14px;margin-top:-7px;background:var(--line)}
.bnMeta span{font-family:var(--vollkorn);font-size:13px;color:var(--mute);margin-right:12px;letter-spacing:.04em}
.bnMeta a{color:inherit;text-decoration:none}
.bnCenter .bannerLeaf{left:50%;top:50%;width:clamp(320px,30vw,560px);margin:calc(clamp(320px,30vw,560px) * -.62) 0 0 calc(clamp(320px,30vw,560px) * -.5);opacity:.09}
/* 點綴小圖 */
.bnDeco{position:absolute;z-index:1;margin:0;overflow:hidden;opacity:.92}
.bnDeco img{display:block;width:100%;height:100%;object-fit:cover}
.bnDeco.d1{left:7vw;top:20%;width:clamp(120px,9vw,180px);aspect-ratio:3/4}
.bnDeco.d2{left:15vw;bottom:14%;width:clamp(90px,6.5vw,130px);aspect-ratio:1}
.bnDeco.d3{right:8vw;top:16%;width:clamp(100px,7vw,140px);aspect-ratio:1}
.bnDeco.d4{right:14vw;bottom:18%;width:clamp(120px,9vw,180px);aspect-ratio:3/4}
@media (max-width:900px){.bnDeco{display:none}.bnLead br{display:none}.bnMeta{flex-direction:column;gap:6px}.bnMeta li::before{display:none}}

/* ===== Loading ===== */
.loader{position:fixed;inset:0;z-index:10000;pointer-events:none}
.ld-half{position:absolute;left:0;right:0;height:50.5%;background:var(--gold);transition:transform 1.3s cubic-bezier(.77,0,.18,1)}
.ld-top{top:0}.ld-bot{bottom:0}
.ld-leaf{position:absolute;left:50%;top:50%;width:120px;height:auto;aspect-ratio:820/1060;translate:-50% -50%;overflow:visible;transition:opacity .6s ease}
.ld-leaf path{fill:#fff;fill-opacity:0;stroke:#fff;stroke-width:5;stroke-dasharray:1;stroke-dashoffset:1;
  animation:ldDraw 1.8s cubic-bezier(.65,0,.35,1) .2s forwards,ldFill .8s ease 1.7s forwards}
@keyframes ldDraw{to{stroke-dashoffset:0}}
@keyframes ldFill{to{fill-opacity:1}}
.loader.is-open .ld-leaf{opacity:0}
.loader.is-open .ld-top{transform:translateY(-100%)}
.loader.is-open .ld-bot{transform:translateY(100%)}
.loader.is-done{display:none}
html.is-loading{overflow:hidden}
/* 載入中先暫停 banner 進場，展開後才播放 */
html.is-loading .js-splitTitle .ch{animation-play-state:paused}
html.is-loading .caseBannerArea .js-fade{opacity:0 !important;transform:translateY(40px) !important}
@media (prefers-reduced-motion:reduce){.loader{display:none}}
.bnInner .secEn{margin-bottom:28px}
.bnInner .secEn{display:inline-block;padding:10px 4px;border-top:1px solid var(--gold);border-bottom:1px solid var(--gold)}.bnInner .bnLogo{margin-top:0}
.bnInner .secEn{line-height:1;padding:9px 2px 5px}
.bnInner .secEn{margin-bottom:56px}
.bnInner{max-width:none}.bnInner h1{white-space:nowrap}@media (max-width:900px){.bnInner h1{white-space:normal}}
.bnInner .secEn{border-color:#c9c6c0}

/* ===== Banner 雜誌錯落版 ===== */
.bnEdit{position:relative;height:max(880px,100vh);padding:0;overflow:hidden}
.bnEdit > *{position:absolute;margin:0}
.bnEdit .bnLogo{left:max(var(--gutter),5vw);top:48px;width:84px;height:auto}
.bnEdit .bnTag{left:max(var(--gutter),5vw);top:22%;font-size:15px;line-height:1;padding:9px 2px 5px;border-top:1px solid #c9c6c0;border-bottom:1px solid #c9c6c0}
.bnEdit .bnYear{left:30%;top:27%;font-family:var(--vollkorn);font-size:14px;color:var(--mute);letter-spacing:.06em}
.bnEdit .bnNote{right:max(var(--gutter),5vw);top:14%;width:200px;font-size:13px;line-height:1.9;letter-spacing:.06em;color:var(--ink)}
.bnEdit .bnNote span{display:block;font-family:var(--vollkorn);color:var(--mute);margin-bottom:14px}
.bnEdit .bnNote p{margin:0}
/* 照片 */
.bnPhoto{overflow:hidden;z-index:0}
.bnPhoto img{display:block;width:100%;height:100%;object-fit:cover}
.bnPhoto.p1{left:61%;top:0;width:clamp(200px,15vw,290px);aspect-ratio:4/5}
.bnPhoto.p2{left:4%;top:56%;width:clamp(240px,19vw,360px);aspect-ratio:4/5}
.bnPhoto.p3{right:4%;top:66%;width:clamp(280px,24vw,460px);aspect-ratio:4/3}
/* 大標三行錯落 */
.bnEdit .bnTitle{left:0;right:0;top:36%;z-index:2;font-size:clamp(52px,6.2vw,118px);line-height:1.18;letter-spacing:.12em;font-weight:600;color:var(--ink)}
.bnTitle .ln{display:block;white-space:nowrap}
.bnTitle .l1{padding-left:24%}
.bnTitle .l2{padding-left:34%}
.bnTitle .l3{padding-left:50%}
.bnEdit .bnLead{left:36%;top:80%;font-size:14px;line-height:2;letter-spacing:.08em;color:var(--ink)}
.bnEdit .bnMeta{right:max(var(--gutter),5vw);top:36%;display:block;margin:0;padding:0;list-style:none;font-size:14px;text-align:left}
.bnEdit .bnMeta li{padding:3px 0;line-height:1.8}
.bnEdit .bnMeta li::before{display:none}
.bnEdit .bnMeta span{display:inline-block;width:72px;font-family:var(--vollkorn);font-size:12px;color:var(--mute)}
.bnEdit .bnMeta a{color:inherit;text-decoration:none}
html.is-loading .bnEdit > *{opacity:0}
.bnEdit > :not(.bnTitle){transition:opacity 1.4s ease .8s}
@media (max-width:900px){
  .bnEdit{height:auto;padding:100px var(--gutter) 60px;display:flex;flex-direction:column;gap:28px}
  .bnEdit > *{position:static}
  .bnTitle .ln{padding-left:0 !important;white-space:normal}
  .bnPhoto.p1,.bnPhoto.p2,.bnPhoto.p3{width:100%}
  .bnEdit .bnNote{width:auto}
}
.bnEdit .bnTitle{font-size:clamp(44px,4.6vw,88px)}.bnTitle .l2{padding-left:30%}.bnPhoto.p1{width:clamp(240px,18vw,350px)}.bnPhoto.p2{width:clamp(280px,22vw,420px);top:52%}.bnPhoto.p3{width:clamp(320px,27vw,520px);top:62%}
.bnPhoto.p1{left:61.1%;top:-80px;width:18.9vw}.bnPhoto.p2{left:2.5%;top:46%;width:25.5vw;aspect-ratio:6/7}.bnPhoto.p3{left:auto;right:0;top:72%;width:31.9vw;aspect-ratio:8/3}@media (max-width:900px){.bnPhoto.p1,.bnPhoto.p2,.bnPhoto.p3{width:100%}}
.bnPhoto.p3 img{object-position:75% 40%}

/* ===== Banner 拼貼版（參考雜誌提案頁） ===== */
.bcCollage{position:relative;height:max(900px,100vh);padding:0;overflow:hidden}
.bcCollage > *{position:absolute;margin:0}
.bcLogo{left:max(var(--gutter),5vw);top:44px;width:80px;height:auto;z-index:4}
.bcTop{right:max(var(--gutter),5vw);top:48px;text-align:right;font-family:var(--vollkorn);font-size:12px;line-height:1.9;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.bcSide{left:max(16px,2vw);top:50%;transform:translate(-50%,-50%) rotate(-90deg) translateY(50%);transform-origin:center;font-family:var(--vollkorn);font-size:11px;letter-spacing:.3em;color:var(--mute);white-space:nowrap}
.bcCollage::before{content:"";position:absolute;left:max(36px,3.6vw);top:16%;bottom:14%;width:1px;background:#c9c6c0}
.bcTitle{left:10%;top:8%;z-index:5;font-size:clamp(44px,4.4vw,84px);line-height:1.2;letter-spacing:.14em;font-weight:600;color:var(--ink);white-space:nowrap}
.bcPh{overflow:hidden;box-shadow:0 20px 40px -24px rgba(38,37,37,.35)}
.bcPh img{display:block;width:100%;height:100%;object-fit:cover}
.bcPh.c{left:33%;top:14%;width:25vw;aspect-ratio:3/4;z-index:2}
.bcPh.l1{left:10%;top:32%;width:12vw;aspect-ratio:4/5;z-index:1}
.bcPh.l2{left:16%;top:44%;width:15vw;aspect-ratio:4/5;z-index:3}
.bcPh.r1{left:61%;top:28%;width:17vw;aspect-ratio:4/5;z-index:2}
.bcPh.r2{left:73.5%;top:56%;width:8.5vw;aspect-ratio:4/5;z-index:3}
.bcOval{z-index:6;padding:8px 22px;border:1px solid var(--ink);border-radius:50%;background:rgba(255,255,255,.85);font-family:"Cormorant Garamond",serif;font-style:italic;font-size:clamp(16px,1.2vw,22px);color:var(--ink)}
.bcOval.o1{left:19%;top:31%}
.bcOval.o2{left:52%;top:72%}
.bcLead{left:33%;top:82%;font-size:14px;line-height:2;letter-spacing:.08em;color:var(--ink)}
.bcMeta{left:61%;top:78%;padding:0;list-style:none;font-size:14px;color:var(--ink)}
.bcMeta li{padding:2px 0;line-height:1.8}
.bcMeta span{display:inline-block;width:72px;font-family:var(--vollkorn);font-size:12px;color:var(--mute)}
.bcMeta a{color:inherit;text-decoration:none}
.bcFoot{left:max(var(--gutter),5vw);bottom:36px;display:flex;align-items:center;gap:16px;font-family:var(--vollkorn);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.bcFoot i{display:block;width:80px;height:1px;background:#c9c6c0}
html.is-loading .bcCollage > *{opacity:0}
.bcCollage > :not(.bcTitle){transition:opacity 1.4s ease .6s}
@media (max-width:900px){
  .bcCollage{height:auto;padding:100px var(--gutter) 60px;display:flex;flex-direction:column;gap:24px}
  .bcCollage::before,.bcSide,.bcOval,.bcPh.l1,.bcPh.r2{display:none}
  .bcCollage > *{position:static;transform:none}
  .bcTitle{white-space:normal}
  .bcPh.c,.bcPh.l2,.bcPh.r1{width:100%}
}

/* ===== Banner 置中標題＋圓角照片列 ===== */
.bfRow{position:relative;min-height:max(900px,100vh);padding:150px 0 0;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;
  background:linear-gradient(to bottom,transparent 0%,transparent 45%,rgba(189,163,102,.22) 75%,rgba(189,163,102,.55) 100%)}
.bfHead{position:relative;z-index:2;text-align:center;padding:0 var(--gutter)}
.bfTag{display:inline-block;font-size:15px;line-height:1;padding:9px 2px 5px;margin:0 0 36px;border-top:1px solid #c9c6c0;border-bottom:1px solid #c9c6c0}
.bfTitle{margin:0;font-size:clamp(40px,4.2vw,80px);line-height:1.35;letter-spacing:.12em;font-weight:600;color:var(--ink)}
.bfLead{margin:32px auto 0;font-size:16px;line-height:2;letter-spacing:.08em;color:var(--mute,#6b6762)}
.bfBtns{display:flex;justify-content:center;gap:14px;margin-top:40px}
.bfBtn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 32px;border-radius:999px;font-size:14px;letter-spacing:.14em;text-decoration:none;transition:background .4s,color .4s,border-color .4s}
.bfBtn.dark{background:var(--ink);color:#fff;border:1px solid var(--ink)}
.bfBtn.dark:hover{background:var(--gold);border-color:var(--gold)}
.bfBtn.light{background:#fff;color:var(--ink);border:1px solid #e3ded4}
.bfBtn.light:hover{border-color:var(--gold);color:var(--gold)}
.bfPhotos{position:relative;z-index:1;display:flex;justify-content:center;gap:20px;margin:72px -6vw 0;padding-bottom:60px}
.bfPhotos figure{flex:0 0 auto;width:22vw;aspect-ratio:4/3;margin:0;border-radius:18px;overflow:hidden}
.bfPhotos figure:nth-child(odd){aspect-ratio:3/2.4}
.bfPhotos img{display:block;width:100%;height:100%;object-fit:cover}
html.is-loading .bfRow .bfLead,html.is-loading .bfRow .bfBtns,html.is-loading .bfRow .bfPhotos,html.is-loading .bfRow .bfTag{opacity:0;transform:translateY(30px)}
.bfRow .bfLead,.bfRow .bfBtns,.bfRow .bfPhotos,.bfRow .bfTag{transition:opacity 1.3s ease,transform 1.3s cubic-bezier(.2,.7,.2,1)}
.bfRow .bfLead{transition-delay:.7s}.bfRow .bfBtns{transition-delay:.9s}.bfRow .bfPhotos{transition-delay:1.1s}
@media (max-width:900px){.bfRow{padding-top:110px}.bfLead br,.bfTitle br{display:none}.bfPhotos{margin:48px -30vw 0}.bfPhotos figure{width:44vw}}
.bfPhotos figure:nth-child(4) img{object-position:75% 40%}
.bfPhotos{align-items:center;margin-left:-4vw;margin-right:-4vw}.bfPhotos figure,.bfPhotos figure:nth-child(odd){width:18vw;aspect-ratio:4/3;border-radius:24px}@media (max-width:900px){.bfPhotos figure,.bfPhotos figure:nth-child(odd){width:44vw}}
.bfTitle{white-space:nowrap}@media (max-width:900px){.bfTitle{white-space:normal}}
.bfRow{justify-content:center;padding:120px 0 100px}.bfPhotos{margin-top:96px;padding-bottom:0}.bfPhotos figure,.bfPhotos figure:nth-child(odd){border-radius:0}
.bfInfo{margin-top:44px}html.is-loading .bfRow .bfInfo{opacity:0;transform:translateY(30px)}.bfRow .bfInfo{transition:opacity 1.3s ease .9s,transform 1.3s cubic-bezier(.2,.7,.2,1) .9s}
.bfTitle{font-size:clamp(34px,3.3vw,64px)}
.bfTitle{font-size:clamp(30px,2.7vw,52px)}
.bfTag{border:0;padding:0;display:inline-flex;flex-direction:column;align-items:center;gap:18px}.bfTag::after{content:"";display:block;width:1px;height:48px;background:#c9c6c0}
.bfTag{margin-bottom:18px}.bfSub{margin:0 0 22px;font-size:14px;letter-spacing:.3em;color:var(--mute,#6b6762)}html.is-loading .bfRow .bfSub{opacity:0}.bfRow .bfSub{transition:opacity 1.3s ease .3s}
.bfPhotos{margin-left:0;margin-right:0;gap:16px}.bfPhotos figure,.bfPhotos figure:nth-child(odd){width:14.2vw;aspect-ratio:16/10}@media (max-width:900px){.bfPhotos{margin-left:-30vw;margin-right:-30vw}.bfPhotos figure,.bfPhotos figure:nth-child(odd){width:40vw}}
.bfTag::after{height:96px}.bfPhotos figure:nth-child(4) img{object-position:85% 40%}
.bfTag{font-size:13px;letter-spacing:.08em}
.bfSub{font-size:16px;font-weight:400;line-height:1.8;color:var(--mute,#6b6762)}
/* Banner 照片微 3D：跟著滑鼠輕微傾斜 */
.bfPhotos{perspective:1000px}
.bfPhotos figure{transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,.7,.2,1),box-shadow .7s ease;will-change:transform}

.bfPhotos figure img{transition:transform .7s cubic-bezier(.2,.7,.2,1);transform:scale(1.06)}
.bfPhotos figure{transition:box-shadow .7s ease}
.bfRow .bfInfo{position:relative;z-index:2;margin:64px auto 0;padding:0 var(--gutter)}.bfPhotos{margin-top:72px}
.bfRow{background:none}
.bfRow{padding-bottom:200px}
.cstRoomArea{background:#efe6d3}
.cstRoomArea{background:var(--ivory)}
.cstDineArea{padding-top:160px}
.room-demo{padding-bottom:64px}

/* ===== 字體示範：雜誌字樣頁排版 ===== */
.tySpec{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr);column-gap:6vw;align-items:end;max-width:1500px;margin:140px auto 0;padding:0 max(var(--gutter),6vw)}
.tyLabel{display:flex;align-items:center;gap:16px;margin:0 0 28px;font-family:var(--vollkorn);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.tyLabel i{flex:1;height:1px;background:#d9d4ca}
.tyGlyph{position:relative;line-height:1;border-top:1px solid #d9d4ca;border-bottom:1px solid #d9d4ca;padding:28px 0 18px}
/* 字身框輔助線 */
.tyGlyph::before,.tyGlyph::after{content:"";position:absolute;left:0;right:0;height:1px;background:repeating-linear-gradient(90deg,#d9d4ca 0 6px,transparent 6px 12px)}
.tyGlyph::before{top:30%}.tyGlyph::after{top:72%}
.tyGlyph span{position:relative;display:block;font-size:clamp(160px,15vw,300px);font-weight:600;color:var(--ink);letter-spacing:0}
.tyCap{margin:18px 0 0;font-size:13px;letter-spacing:.1em;color:var(--mute)}
.tyCap b{font-weight:600;color:var(--ink);margin-right:14px;font-size:15px}
.tyRows{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.tyRows li{display:grid;grid-template-columns:48px minmax(0,1fr) 170px;align-items:baseline;gap:24px;padding:34px 0;border-bottom:1px solid #d9d4ca}
.tyRows em{font-style:normal;font-family:var(--vollkorn);font-size:13px;color:var(--gold);letter-spacing:.1em}
.tySample{margin:0;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tySample.zh{font-size:clamp(28px,2.4vw,46px);font-weight:600;letter-spacing:.16em}
.tySample.vk{font-family:var(--vollkorn);font-size:clamp(28px,2.4vw,46px);font-style:italic;color:var(--gold)}
.tySample.body{font-size:16px;letter-spacing:.1em;white-space:normal;line-height:1.9}
.tyMeta{text-align:right}
.tyMeta b{display:block;font-size:13px;font-weight:500;color:var(--ink);letter-spacing:.06em;white-space:nowrap}
.tyMeta span{font-size:12px;color:var(--mute);letter-spacing:.14em}
.tyChars{grid-column:1/-1;margin:48px 0 0;font-family:var(--vollkorn);font-size:clamp(14px,1vw,18px);letter-spacing:.32em;color:#b9b4ab;white-space:nowrap;overflow:hidden;text-align:center}
@media (max-width:900px){
  .tySpec{grid-template-columns:1fr;row-gap:48px;margin-top:80px}
  .tyRows li{grid-template-columns:36px 1fr;}
  .tyMeta{grid-column:2;text-align:left}
  .tyChars{white-space:normal}
}
.caseEndArea{position:relative}.caseEndArea::before{content:"";position:absolute;top:0;left:max(var(--gutter),4.5vw);right:max(var(--gutter),4.5vw);height:1px;background:#d9d4ca}
.caseEndArea::before{display:none}.caseEndArea{background:#fff}
.tyGlyph span{color:transparent;-webkit-text-stroke:1.2px #8d8a85}
.tyGlyph span{color:#000;-webkit-text-stroke:0;filter:url(#tyOutline)}
.leafFall{position:fixed;inset:0;z-index:60;pointer-events:none;overflow:hidden}.leafFall img{position:absolute;top:0;left:0;height:auto;opacity:0;will-change:transform,opacity}
body{background:linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.5)),url(../images/bg-shadow.jpg) center / cover fixed #fff}
body{background:linear-gradient(rgba(255,255,255,.15),rgba(255,255,255,.15)),url(../images/bg-shadow.jpg) center / cover fixed #fff}
.tySample.body{white-space:nowrap;font-size:15px;overflow:visible}@media (max-width:1280px){.tySample.body{white-space:normal}.tySample.body br{display:none}}
.tyRows li{align-items:center}.tySample{line-height:1.3}.tySample.body{line-height:1.9}
.stackArea{height:calc(100vh + 6 * 95vh)}.stack-card{opacity:0}
.tySpec{background:#fff;border:1px solid #e6e1d7;padding:80px 88px 64px;max-width:min(1500px,calc(100% - 2 * max(var(--gutter),6vw)))}@media (max-width:900px){.tySpec{padding:48px 24px}}
.stackArea{height:calc(100vh + 4 * 95vh)}
.stack-card{opacity:1}

/* ===== 效能：聚光改成小方塊跟著游標移動，不再整頁重繪 ===== */
body::after{display:none !important}
.spotLayer{position:fixed;left:0;top:0;width:480px;height:480px;z-index:-1;pointer-events:none;opacity:0;transition:opacity .5s;will-change:transform;
  background:var(--gold);
  -webkit-mask-image:var(--lines),radial-gradient(circle 240px at 50% 50%,#000 0%,rgba(0,0,0,.6) 45%,transparent 100%);
          mask-image:var(--lines),radial-gradient(circle 240px at 50% 50%,#000 0%,rgba(0,0,0,.6) 45%,transparent 100%);
  -webkit-mask-size:1920px auto,100% 100%;mask-size:1920px auto,100% 100%;
  -webkit-mask-repeat:repeat,no-repeat;mask-repeat:repeat,no-repeat;
  -webkit-mask-composite:source-in;mask-composite:intersect}
.spotLayer.is-on{opacity:.28}
@media (hover:none){.spotLayer{display:none}}
/* 光影背景改成固定圖層，捲動時不必重繪 */
body{background:#fff}
.shadowLayer{position:fixed;inset:0;z-index:-2;pointer-events:none;background:url(../images/bg-shadow.jpg) center / cover no-repeat;opacity:.85}
.caseEndArea{padding-top:120px;padding-bottom:120px}
body::before{opacity:.45}
.colorCard-use.rv img,.colorCard-use img{transform:none;transition:scale 1.4s cubic-bezier(.2,.7,.2,1)}.colorCard:hover .colorCard-use.rv-done img,.colorCard:hover .colorCard-use.is-rv img{scale:1.06}
[data-speed],[data-curve]{will-change:transform}
.colorCard:hover .colorCard-use img{transform:none}.colorCard-use img{will-change:scale;backface-visibility:hidden}
.dine-browser .dine-bgs img{transition:opacity 1.2s ease,transform 2.4s var(--ease),scale 3.2s cubic-bezier(.2,.7,.2,1)}.dine-browser .dine-info{transition:opacity .6s ease,translate .6s ease}.dine-browser .dine-info.is-swap{translate:0 10px}
.shadowLayer{display:none}

/* ===== 網站截圖牆：多張截圖散落，標題固定在畫面中央 ===== */
.shotWall{position:relative;height:220vh;margin:120px 0 0}
.shotWall-sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;z-index:3;pointer-events:none}
.shotWall-title{margin:0;padding:0 var(--gutter);text-align:center;font-weight:600;font-size:clamp(28px,3.2vw,60px);letter-spacing:.12em;line-height:1.4;color:var(--ink);
  text-shadow:0 0 24px rgba(255,255,255,.9),0 0 48px rgba(255,255,255,.8)}
.shot{position:absolute;z-index:1;margin:0;aspect-ratio:16/10;overflow:hidden;background:#fff;box-shadow:0 24px 50px -28px rgba(38,37,37,.35);border:1px solid #ece7dd}
.shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.shot.s1 {left:6%; top:4%;  width:24vw}
.shot.s2 {left:70%;top:2%;  width:20vw}
.shot.s3 {left:38%;top:9%;  width:16vw}
.shot.s4 {left:-2%;top:30%; width:18vw}
.shot.s5 {left:78%;top:24%; width:22vw}
.shot.s6 {left:20%;top:46%; width:15vw}
.shot.s7 {left:62%;top:44%; width:17vw}
.shot.s8 {left:4%; top:66%; width:21vw}
.shot.s9 {left:42%;top:70%; width:19vw}
.shot.s10{left:74%;top:68%; width:20vw}
.shot.s11{left:28%;top:86%; width:16vw}
@media (max-width:900px){.shotWall{height:auto;padding:80px 0}.shotWall-sticky{position:relative;height:auto;margin-bottom:40px}.shot{position:relative;left:auto !important;top:auto !important;width:86vw !important;margin:0 auto 20px}}
.shot.s1{width:31vw}.shot.s2{width:26vw}.shot.s3{width:21vw}.shot.s4{width:23vw}.shot.s5{width:28vw;left:74%}.shot.s6{width:20vw}.shot.s7{width:22vw}.shot.s8{width:27vw}.shot.s9{width:25vw}.shot.s10{width:26vw;left:70%}.shot.s11{width:21vw}@media (max-width:900px){.shot{width:86vw !important}}
/* 截圖牆：拉開間距，部分截圖超出畫面左右 */
.shotWall{height:320vh;overflow:hidden}
.shot.s1 {left:-6%; top:2%;  width:31vw}
.shot.s2 {left:58%; top:0%;  width:26vw}
.shot.s3 {left:88%; top:13%; width:21vw}
.shot.s4 {left:30%; top:18%; width:23vw}
.shot.s5 {left:-9%; top:32%; width:28vw}
.shot.s6 {left:70%; top:36%; width:22vw}
.shot.s7 {left:34%; top:50%; width:22vw}
.shot.s8 {left:84%; top:56%; width:27vw}
.shot.s9 {left:4%;  top:64%; width:25vw}
.shot.s10{left:52%; top:74%; width:26vw}
.shot.s11{left:-5%; top:88%; width:23vw}
.shotWall{overflow:visible;overflow-x:clip}
.shotWall-sticky{position:fixed;inset:0;height:auto;opacity:0;z-index:3;will-change:opacity}@media (max-width:900px){.shotWall-sticky{position:relative;opacity:1 !important}}
/* 截圖牆：大中小對比，左右交錯平衡 */
.shot.s1 {left:-6%; top:2%;  width:36vw}
.shot.s2 {left:62%; top:4%;  width:13vw}
.shot.s3 {left:80%; top:12%; width:24vw}
.shot.s4 {left:36%; top:21%; width:12vw}
.shot.s5 {left:6%;  top:31%; width:22vw}
.shot.s6 {left:56%; top:33%; width:34vw}
.shot.s7 {left:38%; top:48%; width:13vw}
.shot.s8 {left:-8%; top:55%; width:38vw}
.shot.s9 {left:80%; top:53%; width:12vw}
.shot.s10{left:52%; top:68%; width:24vw}
.shot.s11{left:16%; top:83%; width:14vw}
.shotWall-title{text-shadow:0 0 12px rgba(255,255,255,1),0 0 24px rgba(255,255,255,1),0 0 40px rgba(255,255,255,.95),0 0 64px rgba(255,255,255,.9),0 0 96px rgba(255,255,255,.8)}
.shotWall-title{position:relative;text-shadow:none}.shotWall-title::before{content:"";position:absolute;z-index:-1;left:-10%;right:-10%;top:-90%;bottom:-90%;background:radial-gradient(ellipse at center,rgba(255,255,255,.95) 0%,rgba(255,255,255,.85) 40%,rgba(255,255,255,0) 70%);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);-webkit-mask-image:radial-gradient(ellipse at center,#000 35%,transparent 70%);mask-image:radial-gradient(ellipse at center,#000 35%,transparent 70%)}
.shotWall-title::before{left:-18%;right:-18%;top:-130%;bottom:-130%}
.pageSwiper{touch-action:pan-y}.pageSwiper .swiper-wrapper{transition:none !important;will-change:transform}

/* 專案團隊 */
.teamArea{position:relative;z-index:3;overflow:hidden;padding:140px 0 150px;background:var(--ink);color:#fff;text-align:center}
.teamArea::before{content:"TEAM";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--vollkorn);font-size:clamp(160px,26vw,420px);line-height:1;letter-spacing:.06em;color:rgba(255,255,255,.035);pointer-events:none;user-select:none}
.teamArea .wrap{position:relative;max-width:1100px;margin:0 auto;padding:0 var(--gutter)}
.teamArea .teamIcon{display:block;width:40px;height:40px;margin:0 auto 26px;color:var(--gold)}
.teamArea .decotitle{margin:0 0 16px;font-family:var(--vollkorn);font-size:15px;letter-spacing:.2em;color:var(--gold)}
.teamArea .titleBox .title{margin:0;font-family:var(--serif);font-size:clamp(26px,2.4vw,40px);font-weight:600;letter-spacing:.3em;text-indent:.3em;color:#fff}
.teamArea .dataList{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin:84px 0 0;padding:0;list-style:none}
.teamArea .dataItem{position:relative;padding:44px 20px 48px;border:1px solid rgba(189,163,102,.35);transition:border-color .5s,background .5s,transform .5s}
.teamArea .dataItem::before{content:"";position:absolute;left:50%;top:-1px;width:0;height:2px;background:var(--gold);transition:width .6s,margin .6s}
.teamArea .dataItem:hover{border-color:var(--gold);background:rgba(189,163,102,.07);transform:translateY(-6px)}
.teamArea .dataItem:hover::before{width:100%;margin-left:-50%}
.teamArea .no{display:block;margin-bottom:34px;font-family:var(--vollkorn);font-size:15px;letter-spacing:.2em;color:rgba(255,255,255,.4)}
.teamArea .txtBox .title{margin:0;font-family:var(--vollkorn);font-size:clamp(34px,3vw,48px);font-weight:400;letter-spacing:.08em;line-height:1.2;color:#fff}
.teamArea .txtBox .title::after{content:"";display:block;width:28px;height:1px;margin:22px auto 20px;background:var(--gold)}
.teamArea .txtBox .subtitle{margin:0;font-family:var(--vollkorn);font-size:16px;font-style:italic;letter-spacing:.12em;color:var(--gold-l)}
.teamArea .txtBox .role{margin:8px 0 0;font-size:13px;letter-spacing:.3em;text-indent:.3em;color:rgba(255,255,255,.55)}
@media (max-width:900px){.teamArea{padding:90px 0 96px}.teamArea .dataList{grid-template-columns:1fr;gap:16px;margin-top:52px}.teamArea .dataItem{padding:32px 20px 36px}.teamArea .no{margin-bottom:20px}}

/* ===== 輔助圖形：麻の葉／切子玉在網站背景的運用 ===== */
.geSpec{position:relative;z-index:1;max-width:min(1500px,calc(100% - 2 * max(var(--gutter),6vw)));margin:140px auto 0;padding:80px 88px 72px;background:#fff;border:1px solid #e6e1d7}
.geList{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin:0;padding:0;list-style:none}
.geSwatch{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--ivory);border:1px solid #ece7dd}
/* 圖形本體：香檳金線條，往右下漸淡，示意鋪成背景後的濃淡 */
.geSwatch::before{content:"";position:absolute;inset:0;background:var(--gold);
  -webkit-mask-image:var(--ge),linear-gradient(120deg,#000 0%,rgba(0,0,0,.55) 45%,rgba(0,0,0,.12) 100%);
          mask-image:var(--ge),linear-gradient(120deg,#000 0%,rgba(0,0,0,.55) 45%,rgba(0,0,0,.12) 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.geSwatch.asanoha{--ge:var(--lines)}
.geSwatch.asanoha::before{-webkit-mask-size:960px auto,100% 100%;mask-size:960px auto,100% 100%}
.geSwatch.kiriko{--ge:url(../images/kirikodama.svg)}
.geSwatch.kiriko::before{-webkit-mask-size:120px auto,100% 100%;mask-size:120px auto,100% 100%}
.geItem:hover .geSwatch::before{transform:scale(1.04)}
.geBadge{position:absolute;right:16px;bottom:14px;z-index:1;padding:4px 12px;background:rgba(255,255,255,.9);font-size:12px;letter-spacing:.2em;color:var(--mute)}
.geTxt{display:grid;grid-template-columns:48px 1fr;column-gap:16px;margin-top:28px}
.geTxt em{grid-row:1/3;font-style:normal;font-family:var(--vollkorn);font-size:13px;letter-spacing:.1em;color:var(--gold);padding-top:8px}
.geTxt h3{margin:0;font-size:clamp(22px,1.6vw,28px);font-weight:600;letter-spacing:.14em;color:var(--ink)}
.geTxt h3 small{margin-left:14px;font-family:var(--vollkorn);font-size:15px;font-weight:400;font-style:italic;letter-spacing:.06em;color:var(--gold)}
.geTxt p{grid-column:2;margin:14px 0 0;font-size:14px;line-height:2;letter-spacing:.08em;color:var(--text,#555)}
@media (max-width:900px){.geSpec{padding:48px 24px}.geList{grid-template-columns:1fr;gap:40px}}
/* 輔助圖形：首頁實際運用截圖＋右下角圖形樣本 */
.geVisual{position:relative;padding:0 0 36px}
.geShot{margin:0;aspect-ratio:16/10;overflow:hidden;border:1px solid #ece7dd}
.geShot img{display:block;width:100%;height:100%;object-fit:cover;object-position:left center;transition:scale 1.6s cubic-bezier(.2,.7,.2,1)}
.geItem:hover .geShot img{scale:1.04}
.geVisual .geSwatch{position:absolute;right:-18px;bottom:0;width:34%;aspect-ratio:1;border:6px solid #fff;box-shadow:0 18px 36px -20px rgba(38,37,37,.4)}
.geVisual .geSwatch::before{-webkit-mask-image:var(--ge);mask-image:var(--ge);-webkit-mask-composite:source-over;mask-composite:add}
.geSwatch.asanoha::before{-webkit-mask-size:640px auto;mask-size:640px auto}
.geSwatch.kiriko::before{-webkit-mask-size:90px auto;mask-size:90px auto}
.geItem:hover .geSwatch::before{transform:none}
.geTxt{margin-top:20px}
@media (max-width:900px){.geVisual .geSwatch{right:-6px;width:30%}}
.geVisual .geSwatch.kiriko::before{-webkit-mask-size:58px auto;mask-size:58px auto}
.geVisual .geSwatch.kiriko::before{opacity:.6}
:root{--kiriko:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTgwIiBoZWlnaHQ9IjEwMy45MiIgdmlld0JveD0iMCAwIDE4MCAxMDMuOTIiPgogIDwhLS0g5YiH5a2Q546J77ya5L6d5aSn5YCJIFZJIOimj+evhOWQkemHj+W6p+aomeaPm+eul++8iOWFreinkuW9oumCiumVtyA2MO+8iSAtLT4KICA8ZGVmcz4KICAgIDxnIGlkPSJrIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS4yIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICAgICAgPHBhdGggZD0iTS02MCAwTC0zMCAtNTEuOTZMMzAgLTUxLjk2TDYwIDBMMzAgNTEuOTZMLTMwIDUxLjk2WiIvPgogICAgICA8cGF0aCBkPSJNLTUzLjEgLTExLjk0TC0yNy43OCAwTDAgLTExLjk0TDI3Ljc4IDBMNTMuMSAtMTEuOTRNMCAtMTEuOTRMMCAtNTEuOTZNMjcuNzggMEwxOC4wNiA1MS45Nk0tMjcuNzggMEwtMTguMDYgNTEuOTYiLz4KICAgIDwvZz4KICA8L2RlZnM+CiAgPHVzZSB4bGluazpocmVmPSIjayIgeD0iMCIgeT0iMCIvPjx1c2UgeGxpbms6aHJlZj0iI2siIHg9IjE4MCIgeT0iMCIvPgogIDx1c2UgeGxpbms6aHJlZj0iI2siIHg9IjAiIHk9IjEwMy45MiIvPjx1c2UgeGxpbms6aHJlZj0iI2siIHg9IjE4MCIgeT0iMTAzLjkyIi8+CiAgPHVzZSB4bGluazpocmVmPSIjayIgeD0iOTAiIHk9IjUxLjk2Ii8+PHVzZSB4bGluazpocmVmPSIjayIgeD0iOTAiIHk9Ii01MS45NiIvPjx1c2UgeGxpbms6aHJlZj0iI2siIHg9IjkwIiB5PSIxNTUuODgiLz4KPC9zdmc+Cg==")}.geSwatch.kiriko{--ge:var(--kiriko)}
.geVisual .geSwatch.asanoha::before{-webkit-mask-size:900px auto;mask-size:900px auto}.geVisual .geSwatch.kiriko::before{-webkit-mask-size:82px auto;mask-size:82px auto}
.cstBrandArea .centerHead-title{white-space:nowrap;font-size:min(clamp(24px,1.9vw,34px),calc((100vw - 80px) / 25))}
/* 輔助圖形：加入銀杏葉，三欄並排 */
.geList{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
.geVisual .geSwatch.ginkgo{background:var(--gold)}
.geVisual .geSwatch.ginkgo::before{display:none}
/* 黑灰兩色的銀杏葉以「濾色」疊在香檳金上，變成金色深淺兩層 */
.geSwatch.ginkgo img{display:block;width:100%;height:100%;object-fit:cover;object-position:30% 50%;mix-blend-mode:screen;opacity:.92}
.geTxt{grid-template-columns:36px 1fr}
@media (max-width:1100px){.geList{grid-template-columns:1fr 1fr}}
@media (max-width:900px){.geList{grid-template-columns:1fr}}

/* ===== 品牌象徵：銀杏葉（放在色卡上方） ===== */
.geList{grid-template-columns:repeat(2,minmax(0,1fr));gap:56px}
.gkFeature{max-width:min(1500px,calc(100% - 2 * max(var(--gutter),6vw)));margin:72px auto 96px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:6vw;align-items:center}
.gkVisual{position:relative;aspect-ratio:16/9;background:var(--gold);overflow:hidden}
/* 黑灰兩色的銀杏葉以「濾色」疊在香檳金上，變成金色深淺兩層 */
.gkVisual img{position:absolute;left:-4%;top:50%;width:108%;height:auto;translate:0 -50%;mix-blend-mode:screen;opacity:.9;transition:scale 1.8s cubic-bezier(.2,.7,.2,1)}
.gkFeature:hover .gkVisual img{scale:1.04}
.gkLabel{margin:0;font-family:var(--vollkorn);font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.gkTxt h3{margin:18px 0 0;font-size:clamp(30px,2.6vw,46px);font-weight:600;letter-spacing:.2em;color:var(--ink)}
.gkTxt h3 small{margin-left:16px;font-family:var(--vollkorn);font-size:17px;font-weight:400;font-style:italic;letter-spacing:.06em;color:var(--gold)}
.gkDesc{margin:22px 0 0;font-size:15px;line-height:2.1;letter-spacing:.08em;color:var(--text,#555)}
.gkAcs{display:grid;grid-template-columns:repeat(3,1fr);margin:34px 0 0;padding:0;list-style:none;border-top:1px solid #e3ddd1}
.gkAcs li{padding:22px 0 0;text-align:center;border-left:1px solid #e3ddd1}
.gkAcs li:first-child{border-left:0}
.gkAcs b{display:block;font-family:var(--vollkorn);font-size:34px;font-weight:400;line-height:1;color:var(--gold)}
.gkAcs span{display:block;margin-top:10px;font-family:var(--vollkorn);font-size:12px;letter-spacing:.12em;color:var(--mute)}
.gkAcs em{display:block;margin-top:6px;font-style:normal;font-size:14px;letter-spacing:.2em;color:var(--ink)}
@media (max-width:900px){.gkFeature{grid-template-columns:1fr;gap:36px;margin:48px auto 64px}.geList{grid-template-columns:1fr}}
.gkFeature{margin:120px auto 0}
.geSpec .gkFeature{max-width:none;margin:0 0 72px;padding-bottom:72px;border-bottom:1px solid #ece7dd}
.gkVisual{background:#fff;border:1px solid #ece7dd}.gkVisual img{mix-blend-mode:normal;opacity:1}
.gkVisual img{left:8%;width:84%}
.gkVisual img{left:50%;top:50%;width:auto;height:72%;translate:-50% -50%}
.gkAcs{border-top:0}
.gkAcs span{line-height:1.2}.gkAcs em{margin-top:2px;line-height:1.5}
.gkVisual > img{left:34%}.gkShot{position:absolute;right:0;top:0;bottom:0;width:32%;margin:0;overflow:hidden;border-left:1px solid #ece7dd;box-shadow:-18px 0 36px -24px rgba(38,37,37,.25)}.gkShot img{position:static;display:block;width:100%;height:100%;object-fit:cover;object-position:left top;translate:none;mix-blend-mode:normal}
.gkShot{box-shadow:-10px 0 24px -20px rgba(38,37,37,.12)}.gkShot img{scale:none !important;opacity:1;filter:none;transform:translateZ(0);backface-visibility:hidden}.gkFeature:hover .gkShot img{scale:none}
.gkShot img{object-position:center top}
.gkShot{width:52%}.gkShot img{object-position:center top}.gkVisual > img{left:25%}
.gkVisual{background:none;border:0;overflow:visible;display:grid;grid-template-columns:1fr 1fr;gap:14px}.gkVisual > img{position:static;left:auto;top:auto;translate:none;width:100%;height:100%;box-sizing:border-box;padding:14%;object-fit:contain;background:#fff;border:1px solid #ece7dd}.gkShot{position:static;width:auto;border:1px solid #ece7dd;box-shadow:none}
/* 銀杏線稿：規範稿感的對準線（中心十字、外接圓、淡方格） */
.gkVisual > img{background-color:#fff;background-image:
  linear-gradient(to right,transparent calc(50% - .5px),rgba(189,163,102,.45) calc(50% - .5px),rgba(189,163,102,.45) calc(50% + .5px),transparent calc(50% + .5px)),
  linear-gradient(to bottom,transparent calc(50% - .5px),rgba(189,163,102,.45) calc(50% - .5px),rgba(189,163,102,.45) calc(50% + .5px),transparent calc(50% + .5px)),
  radial-gradient(circle at 50% 50%,transparent 41%,rgba(189,163,102,.35) 41%,rgba(189,163,102,.35) calc(41% + 1px),transparent calc(41% + 1px)),
  linear-gradient(to right,#f1ede5 1px,transparent 1px),
  linear-gradient(to bottom,#f1ede5 1px,transparent 1px);
  background-size:100% 100%,100% 100%,100% 100%,20px 20px,20px 20px;background-position:0 0,0 0,0 0,center,center}
/* 對準線精簡：只留淡十字＋外接圓，拿掉方格 */
.gkVisual > img{background-image:
  linear-gradient(to right,transparent calc(50% - .5px),rgba(189,163,102,.22) calc(50% - .5px),rgba(189,163,102,.22) calc(50% + .5px),transparent calc(50% + .5px)),
  linear-gradient(to bottom,transparent calc(50% - .5px),rgba(189,163,102,.22) calc(50% - .5px),rgba(189,163,102,.22) calc(50% + .5px),transparent calc(50% + .5px)),
  radial-gradient(circle at 50% 50%,transparent 41%,rgba(189,163,102,.2) 41%,rgba(189,163,102,.2) calc(41% + 1px),transparent calc(41% + 1px));
  background-size:100% 100%;background-position:0 0}
.gkVisual > img{background-image:
  linear-gradient(to right,transparent calc(50% - .5px),rgba(189,163,102,.22) calc(50% - .5px),rgba(189,163,102,.22) calc(50% + .5px),transparent calc(50% + .5px)),
  linear-gradient(to bottom,transparent calc(50% - .5px),rgba(189,163,102,.22) calc(50% - .5px),rgba(189,163,102,.22) calc(50% + .5px),transparent calc(50% + .5px))}
.geSpec .gkFeature{grid-template-columns:repeat(2,minmax(0,1fr));gap:56px}