/* ===== 首屏字標（10-31，fable 第二版）：奶油底「聖芯」巨型字標 → 照片從字標底下長成滿版 → 三張堆疊 ===== */
.hw{position:relative;--g:clamp(16px,3.4vw,48px);--mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace}
.hw .t-label{font:500 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.hw-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--cream);--strip:clamp(150px,24svh,240px)}
.hw-mast{position:absolute;inset:0;padding:calc(var(--nav-h,56px) + var(--nav-top,0px) + clamp(20px,4vh,48px)) var(--g) var(--strip);display:flex;flex-direction:column;
  --mk:min(calc((100vw - 2 * var(--g)) / 2.02), calc((100svh - var(--strip) - 250px) / 1.2))}
.hw-top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 40px;flex-wrap:wrap}
.hw-h1{font:700 clamp(22px,2vw,28px)/1.45 'Noto Serif TC',serif;margin:0;letter-spacing:.02em;color:var(--ink)}
.hw-h1 small{display:block;margin-top:6px;font:400 clamp(14px,1.1vw,16px)/1.7 'Noto Sans TC',sans-serif;color:var(--ink-2);letter-spacing:0}
.hw-cta{display:flex;align-items:center;gap:20px}
.hw-line{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 24px;border-radius:999px;background:#04873A;color:#fff!important;text-decoration:none;font:600 15px/1 'Noto Sans TC',sans-serif}
.hw-line svg{width:20px;height:20px}
.hw-tel{display:inline-flex;align-items:center;min-height:44px;font:500 15px/1 var(--mono);color:var(--ink);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.hw-row{display:flex;justify-content:space-between;margin-top:auto;padding-top:24px;color:var(--ink-2);margin-bottom:calc(var(--mk) * .1)}
.hw-mark{margin:0;font:500 var(--mk)/1 'Noto Serif TC',serif;color:var(--sky);letter-spacing:-.02em;white-space:nowrap;text-align:center;transform:translateY(var(--mark-y,0))}
.hw-photo{position:absolute;inset:0;margin:0;clip-path:inset(var(--ct,70%) var(--cs,48px) 0 var(--cs,48px) round var(--cr,18px) var(--cr,18px) 0 0);will-change:clip-path}
.hw-photo img,.hw-pn img{width:100%;height:100%;object-fit:cover;max-width:none}
.hw-photo img{transform:translateY(var(--py,0px)) scale(var(--ps,1.12));transform-origin:50% 50%}
.hw-photo::after,.hw-pn::before{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(12,18,26,.66),rgba(12,18,26,0) 48%);z-index:1;pointer-events:none}
.hw-photo::after{opacity:var(--po,0)}
.hw-cap{position:absolute;left:var(--g);right:var(--g);bottom:clamp(28px,7vh,72px);color:#fff;z-index:2;max-width:780px}
.hw-cap .t-label{color:#F4F0B8;display:block;margin-bottom:14px}
.hw-cap-t{display:block;font:700 clamp(28px,3.4vw,52px)/1.35 'Noto Serif TC',serif;text-wrap:balance}
.hw-cap-f{display:block;margin-top:12px;font:400 clamp(15px,1.2vw,17px)/1.7 'Noto Sans TC',sans-serif;color:rgba(255,255,255,.9)}
.hw-stage .hw-cap{opacity:var(--co,0);transform:translateY(calc((1 - var(--co,0)) * 16px))}
.hw-spacer{height:60vh}   /* 第六版：90→60，照片長成滿版的捲動距離縮短 */
.hw-pn{position:sticky;top:0;height:100vh;height:100svh;margin:0;overflow:hidden;background:#0c121a}
.hw-dim{position:absolute;inset:0;background:#0c121a;opacity:0;pointer-events:none;z-index:3}
@media (max-width:900px){
  .hw-top{flex-direction:column;align-items:flex-start}
}
/* 直式螢幕（手機、iPad 直拿）：字標不要被推到底部留一大塊空白，多出來的高度給照片 */
@media (max-width:900px),(orientation:portrait){
  .hw-row{margin-top:clamp(28px,6svh,56px)}
}
@media (max-width:768px){
  .hw-cta{display:none}        /* 手機：聯絡只走底部按鈕列，不重複 */
  .hw-pn,.hw-stage{height:calc(100svh - 64px)}  /* 扣掉底部按鈕列 */
  .hw-mast{--mk:min(calc((100vw - 2 * var(--g)) / 2.02), 44vw)}
}
@media (prefers-reduced-motion:reduce){
  .hw-stage{position:relative;height:auto}
  .hw-mast{position:relative;min-height:80svh}
  .hw-photo{position:relative;clip-path:none;height:90svh}
  .hw-photo img{transform:none}
  .hw-photo::after,.hw-stage .hw-cap{opacity:1;transform:none}
  .hw-spacer{display:none}
  .hw-pn{position:relative}
}
/* 舊 #hero 規則（height:auto／display:flex／深色底）會蓋過 class，用 id+class 拉回來 */
#hero.hw-stage{display:block;position:sticky;top:0;z-index:0;min-height:0;height:100vh;height:100svh;padding:0;background:var(--cream)}
@media (max-width:768px){ #hero.hw-stage{height:calc(100svh - 64px)} }
@media (prefers-reduced-motion:reduce){ #hero.hw-stage{position:relative;height:auto} }
.hw-cap-t span{display:inline-block}   /* 斷行落在逗號，不要切在詞中間 */
#hero.hw-stage .hero-scroll-hint{display:none}   /* 舊首屏的 SCROLL 提示 */
/* 預覽框撐開整頁時（hero2.js 判斷）：跟 reduced-motion 一樣改成靜態排列 */
.hw-static #hero.hw-stage{position:relative;height:auto}
.hw-static .hw-mast{position:relative;min-height:0;padding-bottom:48px}
.hw-static .hw-photo{position:relative;clip-path:none;height:760px}
.hw-static .hw-photo img{transform:none}
.hw-static .hw-photo::after,.hw-static .hw-stage .hw-cap{opacity:1;transform:none}
.hw-static .hw-spacer{display:none}
.hw-static .hw-pn{position:relative;height:760px}
@media (max-width:768px){ .hw-spacer{height:40vh} }   /* 第六版：手機捲動距離再短一點 */
.hw-cap-f span{display:inline-block}   /* 11-03：事實行斷在「・」，不留孤字 */
/* 11-03（Shawn「手機版面照片被切掉」）：手機直式面板改完整顯示橫式照片（不裁左右），照片放在說明上方的深色底上 */
@media (max-width:768px){
  .hw-photo{background:#0c121a}
  .hw-photo img,.hw-pn img{object-fit:contain;object-position:50% 45%;transform:none!important}
  .hw-photo::after,.hw-pn::before{background:linear-gradient(to top,rgba(12,18,26,.9),rgba(12,18,26,0) 40%)}
}