:root{--accent:#d4a574;--gold-deep:#b08968;--highlight:#f4e8d8;--bg:#fefaf3;--text:#3a2820;}
  *{margin:0;padding:0;box-sizing:border-box}
  body{font-family:"Noto Serif TC","Songti TC",serif;color:#fbf3e6;background:#140d08;-webkit-font-smoothing:antialiased}
  #stage{position:fixed;inset:0;overflow:hidden;z-index:0}
  #amber{position:absolute;inset:-12%;background:radial-gradient(120% 100% at 50% 26%, #4a2e15 0%, #2c1c10 48%, #160e08 100%);will-change:filter,transform}
  #bokeh{position:absolute;inset:0;opacity:.5;will-change:opacity}
  .spark{position:absolute;border-radius:50%;background:radial-gradient(circle,#f4e0b8,rgba(244,224,184,0))}
  /* scene: AI image composite (screen-blend drops the black bg) */
  #scene{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:min(90vw,360px);height:60vh;z-index:1;pointer-events:none}
  #scene img{position:absolute;left:50%;will-change:transform,opacity}
  #glassImg{bottom:4%;width:52%;transform:translateX(-50%);filter:drop-shadow(0 6px 20px rgba(0,0,0,.45))}
  #heelImg{top:0;width:42%;transform:translateX(-50%);filter:drop-shadow(0 14px 30px rgba(0,0,0,.55))}
  #splashImg{bottom:22%;width:64%;transform:translateX(-50%) scale(.6);opacity:0;mix-blend-mode:screen}
  #beam{position:absolute;left:50%;bottom:30%;width:7px;height:0;transform:translateX(-50%);background:linear-gradient(to top,rgba(244,232,216,.98),rgba(212,165,116,.55),rgba(212,165,116,0));opacity:0;filter:blur(1px);border-radius:4px;box-shadow:0 0 22px rgba(212,165,116,.75)}
  .lp{position:absolute;left:50%;bottom:30%;border-radius:50%;background:radial-gradient(circle,#fbeed0,rgba(212,165,116,0));opacity:0;will-change:transform,opacity}
  /* foreground copy */
  #fg{position:fixed;inset:0;z-index:3;pointer-events:none}
  .station{position:absolute;left:0;right:0;top:7%;padding:0 24px;text-align:center;opacity:0;transform:translateY(24px);will-change:transform,opacity}
  .eyebrow{font:600 11px/1.6 "Manrope",system-ui,sans-serif;letter-spacing:.3em;color:var(--accent);text-transform:uppercase;margin-bottom:11px;text-shadow:0 2px 12px rgba(0,0,0,.6)}
  .station h1{font-size:29px;line-height:1.32;font-weight:600;text-shadow:0 2px 18px rgba(0,0,0,.7)}
  .station h2{font-size:22px;line-height:1.4;font-weight:600;text-shadow:0 2px 18px rgba(0,0,0,.7)}
  .hl{color:var(--accent);font-style:italic}
  .station p{font-size:14px;line-height:1.85;color:#ecdcc6;margin-top:12px;text-shadow:0 1px 10px rgba(0,0,0,.7)}
  .heroCtas{margin-top:18px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;pointer-events:auto}
  .pill{font:600 13.5px/1 "Manrope",sans-serif;letter-spacing:.03em;padding:13px 19px;border-radius:999px;cursor:pointer;border:1px solid var(--accent);text-decoration:none}
  .pill.primary{background:var(--accent);color:#241608;box-shadow:0 12px 30px -12px rgba(212,165,116,.8)}
  .pill.line{background:#06c755;color:#fff;border-color:#06c755}
  .pill.ghost{background:rgba(255,255,255,.08);color:var(--highlight)}
  .chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px;pointer-events:auto}
  .chip{padding:9px 15px;border:1px solid var(--accent);border-radius:999px;font:600 12.5px/1 "Manrope",sans-serif;color:var(--highlight);background:rgba(212,165,116,.14);cursor:pointer}
  .askbtn{margin-top:14px;pointer-events:auto;font:600 13px/1 "Manrope",sans-serif;color:var(--accent);background:none;border:none;border-bottom:1px dashed var(--accent);cursor:pointer;padding-bottom:3px}
  #meta{position:fixed;left:16px;top:16px;z-index:4;font:600 10px/1.5 "Manrope",sans-serif;letter-spacing:.2em;color:var(--accent);opacity:.85;text-transform:uppercase}
  #brand{position:fixed;right:16px;top:14px;z-index:4;font-size:15px;font-weight:700;color:#fbf3e6}
  #bar{position:fixed;left:0;right:0;bottom:0;z-index:5;display:flex;transform:translateY(110%);transition:transform .4s ease}
  #bar.show{transform:none}
  #bar a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:15px 0;font:600 15px/1 "Manrope",sans-serif;text-decoration:none;color:#2a1b0d;background:#e9cfa3}
  #bar a.line{color:#fff;background:#06c755}
  #bar svg{width:18px;height:18px}
  #spacer{position:relative;z-index:2;height:520vh}
  .modal{position:fixed;inset:0;z-index:9;display:none;align-items:center;justify-content:center;background:rgba(20,12,7,.62);backdrop-filter:blur(4px);padding:24px}
  .modal.open{display:flex}
  .card{background:var(--bg);color:var(--text);border-radius:22px;padding:24px 22px;max-width:340px;width:100%;box-shadow:0 30px 70px -20px rgba(0,0,0,.6);text-align:center}
  .card .eyebrow{color:var(--gold-deep);text-shadow:none}
  .card h3{font-size:21px;margin:10px 0 8px;font-weight:600}
  .card .sub{font-size:13px;line-height:1.85;color:#6a5447;text-align:left}
  .card ul{text-align:left;font-size:13px;line-height:1.9;color:#5c473a;margin:8px 0 4px;padding-left:18px}
  .chooser{display:flex;flex-direction:column;gap:10px;margin-top:8px}
  .chooser a{display:flex;align-items:center;justify-content:center;gap:9px;padding:14px;border-radius:14px;text-decoration:none;font:600 15px/1 "Manrope",sans-serif}
  .chooser a.tel{background:var(--gold-deep);color:#fff}
  .chooser a.tel.alt{background:rgba(176,137,104,.14);color:var(--gold-deep);border:1px solid var(--accent)}
  .chooser a.ln{background:#06c755;color:#fff}
  .card .note{font-size:11px;color:#8a7565;margin-top:14px;line-height:1.6}
  .card .x{margin-top:14px;font-size:13px;color:#8a7565;background:none;border:none;cursor:pointer}
  /* desktop: text left, big scene right */
  @media (min-width:900px){
    #scene{left:auto;right:5vw;transform:none;bottom:5vh;width:min(42vw,540px);height:88vh}
    #glassImg{width:56%}#heelImg{width:46%}#splashImg{width:70%}
    .station{left:5vw;right:auto;top:50%;width:42vw;text-align:left;transform:translateY(calc(-50% + 24px))}
    .station h1{font-size:46px}.station h2{font-size:34px}.station p{font-size:16px}
    .heroCtas,.chips{justify-content:flex-start}
    #bar{display:none}
  }
  /* reduced-motion fallback */
  html.reduced #stage{position:relative;height:auto}
  html.reduced #scene{position:relative;height:60vh;margin:0 auto}
  html.reduced #fg{position:relative}html.reduced #spacer{display:none}
  html.reduced .station{position:relative;opacity:1!important;transform:none!important;padding:40px 24px;top:auto}
  html.reduced #bar{position:sticky}
  /* site nav (preserve old menu) + footer links */
  #navToggle{position:fixed;left:14px;top:12px;z-index:7;width:34px;height:30px;background:none;border:none;cursor:pointer;display:flex;flex-direction:column;justify-content:center;gap:5px}
  #navToggle span{display:block;height:2px;background:var(--highlight);border-radius:2px}
  #navOverlay{position:fixed;inset:0;z-index:8;background:rgba(20,12,7,.97);backdrop-filter:blur(6px);display:none;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:40px}
  #navOverlay.open{display:flex}
  #navOverlay a.navlink{color:#fbf3e6;text-decoration:none;font-size:21px;font-weight:600;padding:11px 18px;letter-spacing:.05em}
  #navOverlay a.navlink:active{color:var(--accent)}
  #navOverlay .navc{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
  #navClose{position:absolute;right:20px;top:14px;background:none;border:none;color:#fbf3e6;font-size:28px;cursor:pointer;line-height:1}
  .sitenav{display:flex;flex-wrap:wrap;gap:9px 16px;justify-content:center;margin:16px 0 4px}
  .sitenav a{color:var(--accent);text-decoration:none;font:600 12.5px/1 "Manrope",sans-serif;letter-spacing:.04em}
  #brand{left:auto}
  @media (min-width:900px){ .sitenav{justify-content:flex-start} }

  /* ===== v4.1 P1 overlap hotfix (2026-05-21, CSS-only) ===== */
  /* explicit z-index hierarchy: bg < content < chrome/nav < bottom CTA < drawer < modal */
  #stage{z-index:0}
  #scene{z-index:1}
  #spacer{z-index:2}
  #fg{z-index:10}
  .station{z-index:20;padding-top:calc(env(safe-area-inset-top) + 6px)}
  .borne,.chips,.heroCtas,.sitenav{position:relative;z-index:1}
  #meta,#brand,#navToggle{z-index:100}
  #bar{z-index:150}
  #navOverlay{z-index:200;overflow:auto}
  .modal{z-index:300}
  /* fix: hamburger no longer overlaps the progress label — shift meta to the right of the toggle */
  #meta{left:58px;max-width:calc(100vw - 132px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* bottom sticky CTA safe-area + keep the final station clear of the bar */
  #bar a{padding-bottom:calc(15px + env(safe-area-inset-bottom))}
  #st4{padding-bottom:calc(76px + env(safe-area-inset-bottom) + 24px)}
  @media (min-width:900px){ #meta{left:58px;max-width:38vw} #st4{padding-bottom:24px} }