/* 漢一「服務項目」頁 — 只放這一頁專用的樣式；共用樣式全在 style.css（不改）。
   編排：頁首大標＋引言＋兩顆按鈕 → 六格卡片 → 六個服務段落（段落導覽黏在上方）→ 行動呼籲 → 頁尾 */

/* 這一頁的色值照「關於我們」頁（about.css 的同一組；不新增色票） */
/* 深色版：服務頁不再另設 --navy／--ink-2／--slot-ink，全站同一套（style.css :root） */

/* ---------- 頁首選單（同關於我們頁的做法：米白底上字改深藍、目前頁加珊瑚底線） ---------- */
.page-services header .logo,.page-services .nav-links a:not(.btn){color:var(--navy)}
.page-services .burger i{background:var(--navy)}
.page-services .nav-links a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--brick);text-decoration-thickness:2px;text-underline-offset:6px}
@media (min-width:821px){
  .page-services .nav-links .roll-in > span[aria-hidden]{color:var(--navy)}
}
@media (max-width:820px){
  .page-services header.solid{background:color-mix(in srgb,var(--bg) 94%,transparent)}
  .page-services header.solid .logo,.page-services header.open .logo,.page-services .nav-links a:not(.btn){color:#fff}
  @media (hover: hover) and (pointer: fine){.page-services .nav-links a:not(.btn):hover{color:var(--brick)}}
  .page-services header.solid .burger i,.page-services header.open .burger i{background:#fff}
  .page-services .nav-links a[aria-current="page"]{color:var(--brick);text-decoration:none}
}

/* ---------- ① 頁首區 ---------- */
.sv-title{padding:138px 0 145px}
.sv-hero-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,5vw,76px);align-items:end}
.sv-hero-copy{padding-bottom:18px}
.sv-hero-media{aspect-ratio:5/3;align-self:start;overflow:hidden;background:var(--slot-bg)}
.sv-hero-media img{width:100%;height:100%;object-fit:cover}
.sv-head{display:flex;align-items:flex-end;flex-wrap:wrap;gap:6px 18px;margin-bottom:44px}
.sv-head h1{font-size:96px;line-height:1.08;font-weight:600;letter-spacing:-.025em;color:var(--navy);display:flex;align-items:flex-end}
.sv-head .dot{display:inline-block;width:.13em;height:.13em;background:var(--navy);margin:0 0 .2em .06em}
.sv-tag{font-size:15px;font-weight:600;line-height:1.6;color:var(--ink-2);padding-bottom:22px}
.sv-lead{font-size:18px;font-weight:400;line-height:1.8;max-width:36em;margin-bottom:34px}

/* ---------- ② 六格卡片 ---------- */
.sv-grid-sec{padding:0 0 104px;scroll-margin-top:20px}
.sv-grid{list-style:none;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:48px 20px}
.sv-grid > li:nth-child(1),.sv-grid > li:nth-child(6){grid-column:span 5}
.sv-grid > li:nth-child(2),.sv-grid > li:nth-child(5){grid-column:span 3}
.sv-grid > li:nth-child(3),.sv-grid > li:nth-child(4){grid-column:span 4}
.sv-card{display:block;position:relative;min-width:0;transition:transform .2s ease}
.sv-card-img{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--slot-bg);margin-bottom:14px}
.sv-grid > li:nth-child(2) .sv-card-img,.sv-grid > li:nth-child(3) .sv-card-img,.sv-grid > li:nth-child(4) .sv-card-img,.sv-grid > li:nth-child(5) .sv-card-img{aspect-ratio:auto;height:clamp(210px,21vw,300px)}
.sv-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.sv-card:focus-visible{transform:translateY(-3px)}
@media (hover: hover) and (pointer: fine){.sv-card:hover{transform:translateY(-3px)}}
.sv-card:active{transform:translateY(0)}
.sv-card:focus-visible .sv-card-img img{transform:scale(1.03)}
@media (hover: hover) and (pointer: fine){.sv-card:hover .sv-card-img img{transform:scale(1.03)}}
.sv-card h3{font-size:23px;line-height:1.35;margin-bottom:4px;color:var(--navy)}
@media (hover: hover) and (pointer: fine){.sv-card:hover h3{text-decoration:underline;text-decoration-color:var(--brick);text-decoration-thickness:2px;text-underline-offset:5px}}
.sv-card-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:15px;font-weight:400;line-height:1.75;color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){.sv-card{transition:none}.sv-card:focus-visible,.sv-card:active{transform:none}
@media (hover: hover) and (pointer: fine){.sv-card:hover{transform:none}}.sv-card-img img{transition:none}.sv-card:focus-visible .sv-card-img img{transform:none}
@media (hover: hover) and (pointer: fine){.sv-card:hover .sv-card-img img{transform:none}}}

/* ---------- ③ 段落導覽：捲過六格之後黏在畫面上方，點哪項跳到哪項 ---------- */
.sv-body{padding-top:28px}
.sv-jump{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line);border-top:1px solid var(--line)}
.sv-jump-in{display:flex;gap:6px 26px;overflow-x:auto;scrollbar-width:none;white-space:nowrap;align-items:center}
.sv-jump-in::-webkit-scrollbar{display:none}
.sv-jump a{flex:none;display:inline-flex;align-items:center;min-height:52px;font-size:13px;font-weight:600;line-height:1.5;color:var(--ink-2);border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
@media (hover: hover) and (pointer: fine){.sv-jump a:hover{color:var(--navy)}}
.sv-jump a[aria-current="true"]{color:var(--navy);border-bottom-color:var(--brick)}
.sv-jump .sv-jump-top{padding-right:20px;margin-right:2px;border-right:1px solid var(--line);color:var(--navy);border-bottom:0}

/* ---------- ④ 單項服務段落 ---------- */
.sv{padding:82px 0 62px;border-bottom:1px solid var(--line);scroll-margin-top:60px}
.sv:last-child{border-bottom:0}
.sv-top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,5vw,76px);align-items:center;margin-bottom:52px}
.sv:nth-of-type(even) .sv-top{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.sv:nth-of-type(even) .sv-intro{grid-column:2;grid-row:1}
.sv:nth-of-type(even) .sv-main{grid-column:1;grid-row:1}
@media (min-width:901px){#svc-2 .sv-top{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.sv-intro h2{font-size:46px;line-height:1.2;margin-bottom:20px;color:var(--navy)}
.sv-text{font-size:17px;font-weight:400;line-height:1.9;max-width:35em;margin-bottom:28px}
.sv-main{aspect-ratio:1280/1040;overflow:hidden;background:var(--slot-bg)}
.sv-main img{width:100%;height:100%;object-fit:cover}
.sv-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px clamp(36px,5vw,64px);margin-bottom:40px}
.sv-block{min-width:0;margin-bottom:0}
.sv-block > h3{font-size:20px;line-height:1.45;color:var(--navy);margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.sv-block[data-block="photos"],.sv-block[data-block="faq"]{margin-bottom:38px}
.sv-block .slot{min-height:88px;font-size:12.5px;line-height:1.55;color:var(--slot-ink)}
.sv-list{list-style:none;display:grid;gap:10px}
.sv-list li{position:relative;padding-left:22px;color:var(--ink-2);overflow-wrap:anywhere}
.sv-list li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:8px;border:1.5px solid var(--navy);border-radius:50%}
.sv-steps{list-style:none;counter-reset:st;display:grid;gap:18px}
.sv-steps li{counter-increment:st;position:relative;padding-left:52px;min-width:0}
.sv-steps li::before{content:counter(st);position:absolute;left:0;top:0;width:34px;height:34px;border:1px solid var(--brick);color:var(--navy);display:grid;place-items:center;font-size:15px;font-weight:600}
.sv-steps h4{font-size:17px;font-weight:600;line-height:1.5;color:var(--navy);margin-bottom:2px;overflow-wrap:anywhere}
.sv-steps p{font-size:15px;overflow-wrap:anywhere}
.sv-photos{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.sv-photos li{min-width:0;aspect-ratio:1280/1040;overflow:hidden;background:var(--slot-bg)}
.sv-photos img{width:100%;height:100%;object-fit:cover}
.sv-photos-slots{grid-template-columns:minmax(0,1fr)}
.sv-photos-slots .sv-pslot{aspect-ratio:auto;min-height:88px}
.sv-faq{border-top:1px solid var(--line)}
.sv-faq-item{border-bottom:1px solid var(--line)}
.sv-faq-q{display:flex;justify-content:space-between;align-items:center;gap:20px;width:100%;min-height:56px;padding:14px 8px 14px 0;text-align:left;font-size:17px;font-weight:600;line-height:1.5;color:var(--navy);overflow-wrap:anywhere;transition:color .18s ease,background-color .18s ease}
@media (hover: hover) and (pointer: fine){.sv-faq-q:hover{color:var(--navy);background:color-mix(in srgb,var(--navy) 4%,transparent)}}
.sv-faq-q::after{content:"";flex:none;width:12px;height:12px;border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);transform:rotate(45deg) translateY(-3px);transition:transform .2s}
.sv-faq-q[aria-expanded="true"]::after{transform:rotate(-135deg) translateY(-3px)}
.sv-faq-q:focus-visible,.sv-card:focus-visible,.sv-jump a:focus-visible,.sv-back a:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.sv-title .btn,.sv-intro .btn{transition:background .2s,color .2s,transform .12s ease}
.sv-title .btn:active,.sv-intro .btn:active{transform:translateY(1px)}
.sv-faq-a[hidden]{display:none}
.sv-faq-a p{padding:0 40px 18px 0;overflow-wrap:anywhere}
.sv-back{text-align:right}
.sv-back a{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:600;color:var(--navy);transition:color .2s,text-decoration-color .2s}
@media (hover: hover) and (pointer: fine){.sv-back a:hover{text-decoration:underline;text-decoration-color:var(--brick);text-decoration-thickness:2px;text-underline-offset:5px}}
.sv-needs{display:none}
@media (prefers-reduced-motion:reduce){.sv-faq-q,.sv-faq-q::after,.sv-title .btn,.sv-intro .btn{transition:none}.sv-title .btn:active,.sv-intro .btn:active{transform:none}}

/* ---------- ⑤ 行動呼籲：沿用首頁 .cta，高度同關於我們頁 ---------- */
.page-services .ab-cta{min-height:516px}
.page-services .ab-cta .cta-in{padding-bottom:90px}
.page-services .ab-cta .anchor{color:rgba(255,255,255,.85)}

/* ---------- 聊天視窗小字、底部對話列：同關於我們頁（底下是米白，對話列底色加深） ---------- */
.page-services .slot.dark{color:rgba(255,255,255,.78)}
.page-services .chat-head small{color:rgba(255,255,255,.82)}
.page-services .dock-ask{background:rgba(27,33,48,.94)}
.page-services .dock-ask input::placeholder{color:#C9C4BC}
.page-services .dock-chips .chip{background:rgba(9,17,30,.82)}
@media (hover: hover) and (pointer: fine){.page-services .dock-chips .chip:hover{background:rgba(9,17,30,.95)}}

/* ---------- 平板 ---------- */
@media (max-width:1100px){
  .page-services footer{padding-bottom:250px}
  .sv-head h1{font-size:80px}
  .sv-top{gap:36px}
  .sv-cols{gap:20px 36px}
}
@media (max-width:900px){
  .sv-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 16px}
  .sv-grid > li:nth-child(n){grid-column:auto}
  .sv-grid > li:nth-child(n) .sv-card-img{aspect-ratio:4/3;height:auto}
  .sv-top{grid-template-columns:minmax(0,1fr)}
  .sv:nth-of-type(even) .sv-top{grid-template-columns:minmax(0,1fr)}
  .sv:nth-of-type(even) .sv-intro,.sv:nth-of-type(even) .sv-main{grid-column:auto;grid-row:auto}
  .sv-cols{grid-template-columns:minmax(0,1fr);gap:40px}
}

/* ---------- 手機 ---------- */
@media (max-width:820px){
  .sv-title{padding:112px 0 56px}
  .sv-hero-grid{grid-template-columns:minmax(0,1fr);gap:34px}
  .sv-hero-copy{padding-bottom:0}
  .sv-hero-media{aspect-ratio:4/3}
  .sv-head{margin-bottom:24px}
  .sv-head h1{font-size:56px}
  .sv-tag{font-size:14px;padding-bottom:10px}
  .sv-grid-sec{padding-bottom:68px}
  .sv-body{padding-top:16px}
  /* 手機選單列固定在最上面（高 68px），段落導覽黏在它下面 */
  .sv-jump{top:var(--hdr-h)}
  .sv{padding:50px 0 38px;scroll-margin-top:130px}
  .sv-top{margin-bottom:34px}
  .sv-cols{gap:28px;margin-bottom:30px}
  .sv-block[data-block="photos"],.sv-block[data-block="faq"]{margin-bottom:30px}
  .sv .sv-block.is-empty{display:none}
  .sv-cols:has(.sv-block.is-empty){display:contents}
  .sv:has(.sv-needs){padding-top:34px;padding-bottom:18px}
  .sv:has(.sv-needs) .sv-top{margin-bottom:22px}
  .sv-needs{display:block;list-style:none;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 0 4px}
  .sv-needs li{display:grid;grid-template-columns:minmax(82px,.8fr) minmax(0,2.2fr);gap:12px;padding:7px 0;border-bottom:1px solid var(--line)}
  .sv-needs li:last-child{border-bottom:0}
  .sv-needs-label{font-size:14px;font-weight:600;line-height:1.55;color:var(--navy)}
  .sv-needs-spec{font-size:12.5px;font-weight:500;line-height:1.45;color:var(--slot-ink)}
  .sv-text{font-size:16px;line-height:1.85}
  .sv-block > h3{font-size:19px}
  .sv-photos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sv-photos-slots{grid-template-columns:minmax(0,1fr)}
  .page-services .ab-cta{min-height:600px}
  .page-services .ab-cta .cta-in{padding-bottom:60px}
}
@media (max-width:560px){
  .sv-grid{grid-template-columns:minmax(0,1fr)}
  .sv-photos-slots .sv-pslot{min-height:84px}
  .sv-faq-a p{padding-right:0}
}
@media (max-width:420px){
  .sv-head h1{font-size:52px}
}