/* 星悅勞務官網 · 共用樣式（由 v4 抽出）
   tokens：深紅 #8C1C1C × 炭黑 × 暖白；動效遵循 prefers-reduced-motion */

  /* 方向四：Korn Ferry 骨架 ＋ 深紅品牌（去綠）＋ 數字事實帶 ＋ 動效 */
  :root{
    --void:#100A0A; --void-2:#1A1011; --surface:#1E1415;
    --cream:#F4EBE7; --cream-2:#C6B3AE; --dim:#94807C;
    --red:#8C1C1C; --red-lift:#D9564A; --red-deep:#6E1414;
    --line:rgba(244,235,231,.14); --line-2:rgba(244,235,231,.26);
    --sans:'Noto Sans TC','PingFang TC','Microsoft JhengHei',-apple-system,sans-serif;
    --maxw:1280px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--void);color:var(--cream);font-family:var(--sans);
    font-weight:300;font-size:16.5px;line-height:1.75;-webkit-font-smoothing:antialiased;
    caret-color:var(--red-lift);font-variant-numeric:tabular-nums;overflow-x:hidden}
  ::selection{background:var(--red-lift);color:#140909}
  body::-webkit-scrollbar{width:11px}
  body::-webkit-scrollbar-track{background:#0A0505}
  body::-webkit-scrollbar-thumb{background:#3A2426;border:3px solid #0A0505;border-radius:9px}
  body::-webkit-scrollbar-thumb:hover{background:var(--red)}
  :focus-visible{outline:2px solid var(--red-lift);outline-offset:3px}
  h1,h2,h3{margin:0;line-height:1.16;font-weight:400;letter-spacing:-.01em;text-wrap:balance}
  p{margin:0}
  a{color:inherit}
  .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:24px}
  @media(min-width:900px){.wrap{padding-inline:64px}}
  .lede{color:var(--cream-2);font-size:clamp(16px,1.5vw,18.5px);max-width:62ch;font-weight:300}

  /* 捲動進度條 */
  #prog{position:fixed;top:0;left:0;height:2px;width:0;background:var(--red-lift);z-index:60;
    will-change:width}
  /* 頁首 */
  header{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .5s,border-color .5s;
    border-bottom:1px solid transparent}
  header.solid{background:#0C0707;border-bottom-color:var(--line)}
  header .wrap{display:flex;align-items:center;gap:clamp(14px,3vw,44px);padding-block:16px}
  .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--cream);flex:none}
  .brand svg{width:46px;color:var(--red-lift);flex:none}
  .brand .n{font-size:18.5px;font-weight:500;letter-spacing:.02em}
  .brand .e{display:block;font-size:11px;letter-spacing:.04em;color:var(--dim)}
  nav{margin-left:auto;display:flex;gap:clamp(12px,2vw,30px);font-size:14.5px}
  nav a{text-decoration:none;color:var(--cream-2);padding-block:6px;border-bottom:1px solid transparent;
    transition:color .35s,border-color .35s}
  nav a:hover,nav a[aria-current]{color:var(--cream);border-color:var(--red-lift)}
  .lang{display:flex;gap:2px;font-size:12.5px;color:var(--dim);border:1px solid var(--line);
    border-radius:999px;overflow:hidden}
  .lang span{padding:4px 10px}
  .lang span:first-child{background:var(--line);color:var(--cream)}
  .cta{display:inline-flex;align-items:center;gap:10px;padding:13px 24px;text-decoration:none;
    font-size:14.5px;font-weight:400;letter-spacing:.02em;border:1px solid var(--line-2);
    color:var(--cream);background:transparent;transition:background .4s,color .4s,border-color .4s;flex:none}
  .cta:hover{background:var(--cream);color:var(--void);border-color:var(--cream)}
  .cta.solid{background:var(--red);border-color:var(--red);color:#FFF6F3}
  .cta.solid:hover{background:#A83228;border-color:#A83228;color:#FFF6F3}
  .cta svg{width:15px;height:15px;transition:transform .4s cubic-bezier(.16,1,.3,1)}
  .cta:hover svg{transform:translateX(4px)}

  /* 首屏：全屏場景大圖 + 左文右憑證（Korn Ferry 骨架） */
  .hero{position:relative;min-height:92vh;display:flex;align-items:flex-end;overflow:hidden;
    padding-block:140px 56px}
  .hero .bg{position:absolute;inset:0;background:url("../assets/refs/hero-hk-night.jpg?v=06320076") center 42%/cover no-repeat;
    transform:scale(1.08);animation:kb 26s ease-out forwards;filter:saturate(.86) brightness(1.06) contrast(1.02)}
  @keyframes kb{to{transform:scale(1)}}
  .hero .veil{position:absolute;inset:0;background:
    linear-gradient(90deg,rgba(10,5,5,.66) 0%,rgba(10,5,5,.42) 30%,rgba(10,5,5,.06) 58%,rgba(10,5,5,0) 78%,rgba(10,5,5,.06) 100%),
    linear-gradient(180deg,rgba(10,5,5,.42) 0%,rgba(10,5,5,0) 40%,rgba(10,5,5,.34) 100%)}
  .hero .tint{position:absolute;inset:0;background:var(--red);mix-blend-mode:multiply;opacity:.10}
  .hero .wrap{position:relative;width:100%;display:grid;
    grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:clamp(24px,4vw,72px);align-items:end}
  .hero h1{font-size:clamp(31px,4.5vw,64px);font-weight:300;line-height:1.14;letter-spacing:-.02em;
    line-break:strict;word-break:keep-all}
  .hero h1 .ln{display:block;overflow:hidden}
  .hero h1 .ln > span{display:block;transform:translateY(105%);animation:up 1.15s cubic-bezier(.16,1,.3,1) forwards}
  .hero h1 .ln:nth-child(2) > span{animation-delay:.12s}
  .hero h1 .ln:nth-child(3) > span{animation-delay:.24s}
  .hero h1 em{font-style:normal;color:var(--red-lift)}
  @keyframes up{to{transform:none}}
  .hero .lede{margin-top:28px;color:#DCCCC7;opacity:0;animation:fade 1s .55s ease-out forwards}
  .hero .row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;opacity:0;animation:fade 1s .7s ease-out forwards}
  @keyframes fade{to{opacity:1}}
  .badge{justify-self:end;text-align:right;border-top:2px solid var(--red-lift);padding-top:20px;
    max-width:380px;opacity:0;animation:fade 1.2s .9s ease-out forwards}
  .badge .lic{font-size:54px;font-weight:200;letter-spacing:0;line-height:1;color:#FFF6F3}
  .badge .lic small{display:block;font-size:12.5px;letter-spacing:.2em;color:#D9C6C1;margin-bottom:10px}
  .badge p{margin-top:16px;font-size:14.6px;color:#E4D3CE;line-height:1.75}
  .scroll-cue{position:absolute;left:24px;bottom:20px;display:flex;align-items:center;gap:12px;
    font-size:11.5px;letter-spacing:.2em;color:var(--dim)}
  @media(min-width:900px){.scroll-cue{left:64px}}
  .scroll-cue i{display:block;width:46px;height:1px;background:var(--line-2)}
  .scroll-cue i::after{content:"";display:block;width:16px;height:1px;background:var(--red-lift)}

  section{padding-block:104px}
  @media(max-width:899px){section{padding-block:72px}}
  .shead{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(20px,4vw,64px);
    align-items:end;padding-bottom:clamp(28px,3.6vw,52px)}
  @media(max-width:899px){.shead{grid-template-columns:1fr}}
  .shead h2{font-size:clamp(26px,3.2vw,46px);font-weight:300}

  /* 數字事實帶（ManpowerGroup 式） */
  .stats{background:var(--void-2);border-block:1px solid var(--line)}
  .stats .row{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.6vw,44px)}
  @media(max-width:899px){.stats .row{grid-template-columns:repeat(2,1fr)}}
  .stat{padding-top:22px;border-top:1px solid var(--line-2)}
  .stat .fig{font-size:clamp(46px,6.6vw,92px);font-weight:200;line-height:1;letter-spacing:-.03em;
    display:flex;align-items:baseline;gap:6px}
  .stat .fig u{text-decoration:none;font-size:.42em;font-weight:300;color:var(--red-lift);letter-spacing:.02em}
  .stat b{display:block;margin-top:16px;font-weight:500;font-size:16.5px;color:var(--cream)}
  .stat p{margin-top:8px;font-size:14px;color:var(--dim);line-height:1.7}
  .stats .note{margin-top:44px;padding-top:20px;border-top:1px solid var(--line);font-size:13.5px;
    color:var(--dim);display:flex;gap:14px;flex-wrap:wrap}

  /* 服務：左固定標題 + 右列表 */
  .svc{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(26px,4vw,80px);align-items:start}
  @media(max-width:899px){.svc{grid-template-columns:1fr}}
  .svc .lead{position:sticky;top:110px}
  @media(max-width:899px){.svc .lead{position:static}}
  .svc .lead h2{font-size:clamp(25px,3vw,40px);font-weight:300}
  .svc .lead .lede{margin-top:22px;font-size:16px}
  .svc-item{display:grid;grid-template-columns:44px 1fr;gap:clamp(14px,2vw,30px);padding-block:34px;
    border-top:1px solid var(--line);opacity:0;transform:translateY(26px);
    transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1),border-color .4s}
  .svc-item:last-child{border-bottom:1px solid var(--line)}
  .svc-item.in{opacity:1;transform:none}
  .svc-item:hover{border-color:var(--line-2)}
  .svc-item .ic{width:34px;height:34px;color:var(--red-lift);margin-top:4px}
  .svc-item h3{font-size:clamp(19px,2vw,25px);font-weight:400}
  .svc-item p{margin-top:12px;color:var(--cream-2);font-size:15.4px;max-width:54ch}
  .ticks{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px;font-size:15px;color:var(--cream-2)}
  .ticks li{display:grid;grid-template-columns:20px 1fr;gap:12px}
  .ticks svg{width:15px;height:15px;margin-top:6px;color:var(--red-lift)}

  /* 流程：線條長出 + 節點彈出 */
  .flow{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,54px);padding-top:40px}
  @media(max-width:899px){.flow{grid-template-columns:1fr;gap:30px}}
  .flow .line{position:absolute;top:5px;left:0;right:0;height:1px;background:var(--line-2);
    transform:scaleX(0);transform-origin:0 50%;transition:transform 1.6s cubic-bezier(.16,1,.3,1)}
  .flow.in .line{transform:scaleX(1)}
  .node{position:relative;opacity:0;transform:translateY(18px);
    transition:opacity .7s,transform .7s cubic-bezier(.16,1,.3,1)}
  .node.in{opacity:1;transform:none}
  .node::before{content:"";position:absolute;top:-39px;left:0;width:11px;height:11px;border-radius:50%;
    border:1px solid var(--red-lift);background:var(--void);transform:scale(0);
    transition:transform .5s .5s cubic-bezier(.34,1.56,.64,1)}
  .node.in::before{transform:scale(1)}
  .node .step{font-size:12.5px;letter-spacing:.2em;color:var(--red-lift)}
  .node h3{margin-top:14px;font-size:clamp(19px,1.9vw,24px);font-weight:400}
  .node p{margin-top:12px;color:var(--cream-2);font-size:15px}
  .node .org{margin-top:16px;font-size:12.5px;letter-spacing:.06em;color:var(--dim)}

  /* 行業：三欄圖文（duotone 壓成品牌色） */
  .sectors{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px)}
  @media(max-width:899px){.sectors{grid-template-columns:1fr}}
  .sector{position:relative;overflow:hidden;min-height:340px;display:flex;align-items:flex-end;
    clip-path:inset(0 0 100% 0);transition:clip-path 1.1s cubic-bezier(.16,1,.3,1)}
  .sector.in{clip-path:inset(0 0 0 0)}
  .sector .ph{position:absolute;inset:0;background-size:cover;background-position:center;
    filter:grayscale(.10) contrast(1.0) brightness(1.12);transform:scale(1.04);
    transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
  .sector:hover .ph{transform:scale(1.1)}
  .sector .ov{position:absolute;inset:0;background:var(--red);mix-blend-mode:multiply;opacity:.24;
    transition:opacity .6s}
  .sector:hover .ov{opacity:.16}
  .sector .txt{position:relative;padding:26px;width:100%;
    background:linear-gradient(0deg,rgba(10,5,5,.60),rgba(10,5,5,0) 68%)}
  .sector h3{font-size:21px;font-weight:500}
  .sector p{margin-top:8px;font-size:14.4px;color:#D8C7C2}
  .nurse{margin-top:clamp(22px,2.6vw,34px);border:1px solid var(--line-2);padding:32px;
    display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.35fr);gap:clamp(22px,3.4vw,60px)}
  @media(max-width:899px){.nurse{grid-template-columns:1fr}}
  .nurse h3{font-size:clamp(20px,2.2vw,28px);font-weight:400}
  .nurse .note{margin-top:14px;color:var(--cream-2);font-size:15.2px}
  .nurse ol{list-style:none;counter-reset:n;margin:0;padding:0;display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 26px}
  @media(max-width:899px){.nurse ol{grid-template-columns:1fr}}
  .nurse li{counter-increment:n;display:grid;grid-template-columns:30px 1fr;gap:12px;font-size:15px;color:var(--cream-2)}
  .nurse li::before{content:counter(n,decimal-leading-zero);font-size:12.5px;letter-spacing:.1em;
    color:var(--red-lift);padding-top:3px}

  /* 政策法規預告（Korn Ferry insights 卡片式） */
  .policy{background:var(--void-2);border-block:1px solid var(--line)}
  .plist{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,28px)}
  @media(max-width:899px){.plist{grid-template-columns:1fr}}
  .pcard{border:1px solid var(--line);padding:clamp(22px,2.4vw,32px);text-decoration:none;display:block;
    background:linear-gradient(180deg,rgba(140,28,28,.06),transparent);
    opacity:0;transform:translateY(22px);
    transition:opacity .7s,transform .7s cubic-bezier(.16,1,.3,1),border-color .4s,background .4s}
  .pcard.in{opacity:1;transform:none}
  .pcard:hover{border-color:var(--line-2);background:linear-gradient(180deg,rgba(140,28,28,.14),transparent)}
  .pcard .src{font-size:12px;letter-spacing:.2em;color:var(--red-lift)}
  .pcard h3{margin-top:16px;font-size:clamp(18px,1.9vw,23px);font-weight:400}
  .pcard p{margin-top:12px;color:var(--cream-2);font-size:15px;max-width:46ch}
  .pcard .more{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-size:13.5px;color:var(--cream)}
  .pcard .more svg{width:14px;height:14px;color:var(--red-lift);transition:transform .4s}
  .pcard:hover .more svg{transform:translateX(4px)}

  /* 公司價值（Korn Ferry careers 01–04） */
  .values .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,34px)}
  @media(max-width:899px){.values .grid{grid-template-columns:1fr 1fr}}
  .value{padding-top:20px;border-top:1px solid var(--line-2);transition:border-color .4s}
  .value:hover{border-color:var(--red-lift)}
  .value .no{font-size:12.5px;letter-spacing:.2em;color:var(--red-lift)}
  .value h3{margin-top:16px;font-size:19px;font-weight:500}
  .value p{margin-top:10px;font-size:14.6px;color:var(--cream-2)}

  /* 查詢 */
  .enq{position:relative;overflow:hidden;background:var(--surface)}
  .enq .bg{position:absolute;inset:0;background:url("../assets/refs/ai/contact-bg.jpg?v=cf020727") center/cover no-repeat;
    filter:grayscale(.10) brightness(1.06)}
  .enq .ov{position:absolute;inset:0;background:var(--red);mix-blend-mode:multiply;opacity:.30}
  .enq .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
    gap:clamp(26px,4vw,72px);align-items:center}
  @media(max-width:899px){.enq .wrap{grid-template-columns:1fr}}
  .enq h2{font-size:clamp(26px,3.4vw,48px);font-weight:300;color:#FFF3F0}
  .enq p{margin-top:20px;color:#E2D2CD;font-size:16.5px;max-width:50ch}
  .enq .row{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
  .contact{border:1px dashed rgba(244,235,231,.42);padding:26px;font-size:14.6px;color:#E4D5D0}
  .contact b{display:block;font-size:11.5px;letter-spacing:.22em;color:#FFF3F0;margin-bottom:14px;font-weight:400}
  .contact span{display:flex;gap:14px;padding-block:12px;border-bottom:1px dotted rgba(244,235,231,.28)}
  .contact span:last-child{border-bottom:0}
  .contact i{font-style:normal;color:#D8C2BC;min-width:74px}

  footer{background:#0B0606;border-top:1px solid var(--line);padding-block:56px 34px;font-size:13.8px;color:var(--dim)}
  footer .cols{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,.6fr));
    gap:clamp(22px,3vw,54px)}
  @media(max-width:899px){footer .cols{grid-template-columns:1fr 1fr}}
  footer h3{font-size:16px;letter-spacing:.02em;color:var(--cream);font-weight:500}
  footer ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
  footer a{text-decoration:none} footer a:hover{color:var(--cream);border-bottom:1px solid var(--red-lift)}
  footer .lic{margin-top:32px;padding-top:20px;border-top:1px solid var(--line);display:flex;
    flex-wrap:wrap;gap:10px 28px;font-size:12.8px}
  .legend{border-top:1px solid var(--line);background:#0B0606;padding-top:11px;font-size:12.8px;color:var(--dim)}
  .legend .wrap{padding-block:18px;display:flex;gap:12px;align-items:baseline}
  .legend i{width:16px;height:10px;border:1px dashed var(--red-lift);flex:none;margin-top:4px}

  @media(min-width:900px){.nurse{padding:46px}}
  @media (prefers-reduced-motion:reduce){
    .hero .bg{animation:none}
    .hero h1 .ln > span{transform:none;animation:none}
    .hero .lede,.hero .row,.badge{opacity:1;animation:none}
    .svc-item,.node,.pcard{opacity:1;transform:none;clip-path:none}
    .flow .line{transform:scaleX(1)} .node::before{transform:scale(1)}
    html{scroll-behavior:auto}
  }

/* 無障礙：視覺隱藏但仍供讀屏器讀取 */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 浮動 WhatsApp 按鈕（行業慣例：一鍵直達查詢） */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:70;display:inline-flex;align-items:center;gap:10px;
  background:var(--red);color:#FFF6F3;text-decoration:none;font-size:15px;font-weight:400;
  padding:14px 20px;border-radius:999px;box-shadow:0 6px 22px -8px rgba(0,0,0,.75);
  transition:background .3s,transform .3s cubic-bezier(.16,1,.3,1)}
.wa-float:hover{background:#A83228;transform:translateY(-2px)}
.wa-float svg{width:20px;height:20px;flex:none}
.wa-float span{white-space:nowrap}
@media(max-width:600px){.wa-float{padding:14px;right:16px;bottom:16px}.wa-float span{display:none}}

  /* 各段「更多」入口（多頁站：每段都給出口，Korn Ferry 式） */
  .sec-more{margin-top:clamp(26px,3vw,44px);display:flex;gap:14px;flex-wrap:wrap;align-items:center}
  .sec-more svg{width:16px;height:16px}