/* adaptig-reuse v6: the two service pages use the HOME page's components (homepage-professional-layout.css + sam-style.css).
   This file only (1) fits the hero and stat row to service-page content, (2) lays out the dark feature panel (Spark / Shift / Shape)
   and the white "why it stalls" panel inside home's sketch-proof-grid, (3) gives the remaining sections home's air. Site tokens only. */

/* hero: home's grid, portrait column a little wider for the service copy */
.service-hero{grid-template-columns:minmax(0,1fr) 320px}
.service-hero .case-back{margin:0 0 18px}
.service-hero h1{max-width:20em}
.service-hero .headline-phrase{white-space:normal;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.service-hero .sketch-intro{max-width:36em}
.service-hero .sketch-intro+.sketch-intro{margin-top:14px}
.service-hero .whatsapp-primary{margin:0}
.service-hero .sketch-voice{margin-top:4px}
.service-stats .case-facts{margin-top:30px}
html[data-sk] body .service-stats .case-facts>div{font-size:17px;line-height:1.7}
html[data-sk] body .service-stats .case-facts dt{font-size:14px}

/* the white panel: 5 reasons, text only */
.ad-feature{padding-top:58px}
.ad-why h3{margin:0 0 14px}
html[data-sk] body .ad-why h3{font-size:20px!important;letter-spacing:0;color:var(--ink)}
.ad-reasons{list-style:none;margin:0;padding:0;counter-reset:r}
.ad-reasons li{counter-increment:r;display:flex;gap:14px;padding:13px 0;border-top:1px solid var(--line);font-size:18px;line-height:1.5;font-weight:600}
.ad-reasons li:first-child{border-top:0}
.ad-reasons li::before{content:counter(r,decimal-leading-zero);font-weight:800;color:var(--ad-orange,#fa5929);min-width:1.8em}

/* the dark panel: Spark / Shift / Shape with the 100-10-10-100 numbers */
.ad-panel{text-align:left;justify-content:flex-start}
html[data-sk] body .ad-panel figcaption{font-size:20px!important;margin-bottom:22px}
.ad-cols{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:0}
html[data-sk] body .ad-panel .ad-col p.ad-col__n{white-space:nowrap}
.ad-col{padding:4px 18px 4px 0}
.ad-col+.ad-col{padding-left:18px;border-left:1px solid rgba(249,245,234,.22)}
html[data-sk] body .ad-panel .ad-col p{margin:0;max-width:none;color:rgba(249,245,234,.82)!important;font-size:16px!important;line-height:1.55}
html[data-sk] body .ad-panel .ad-col p.ad-col__k{color:var(--ad-beige,#f9f5ea)!important;font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:16px!important}
html[data-sk] body .ad-panel .ad-col p.ad-col__n{color:var(--ad-beige,#f9f5ea)!important;font-size:44px!important;font-weight:900;line-height:1.15;letter-spacing:-.02em;margin:6px 0 4px}
html[data-sk] body .ad-panel .ad-col p.ad-col__t{color:var(--ad-beige,#f9f5ea)!important;font-weight:800;font-size:17px!important;margin-bottom:8px}
.ad-col:nth-child(1) .ad-col__n{color:var(--ad-orange,#fa5929)!important}
.ad-panel__link{display:inline-block;margin-top:12px;color:var(--ad-beige,#f9f5ea);font-weight:700;font-size:16px;border-bottom:1px solid currentColor;text-decoration:none}
html[data-sk] body .ad-panel p.ad-proof{margin:24px 0 0;padding-top:16px;border-top:1px solid rgba(249,245,234,.22);color:var(--ad-beige,#f9f5ea)!important;font-size:17px!important;font-weight:700;text-align:left}
html[data-sk] body .ad-panel p.ad-proof--me{margin-top:10px;padding-top:0;border-top:0;font-weight:800}
.ad-nw{white-space:nowrap}
.ad-offer{margin-top:26px}
html[data-sk] body .ad-credit{font-size:15px!important;margin:18px 0 0}
.ad-cta{margin-top:20px}
.ad-cta .whatsapp-alt{margin:0}

/* the remaining sections: home's air and heading size */
@media (min-width:761px){
  html[data-sk] .service-page .case-section{padding:58px 0}
  html[data-sk] .service-page .case-section h2{font-size:25px!important;line-height:1.5}
}

/* one-pass build of the panel (staff, champions, leaders), as in the deck */
.ad-js [data-step]{transition:opacity .5s ease,transform .5s ease}
.ad-js [data-step].ad-off{opacity:.12;transform:translateY(10px)}

@media (max-width:1000px){.service-hero{grid-template-columns:minmax(0,1fr) 240px}}
@media (max-width:760px){
  .service-hero{grid-template-columns:1fr}
  .service-hero .sketch-portrait{max-width:280px}
  .ad-feature{padding-top:34px}
  .ad-cols{grid-template-columns:1fr}
  .ad-col,.ad-col+.ad-col{padding:14px 0;border-left:0;border-top:1px solid rgba(249,245,234,.22)}
  .ad-col:first-child{border-top:0;padding-top:0}
  html[data-sk] body .ad-panel .ad-col p.ad-col__n{font-size:36px!important}
  .ad-reasons li{font-size:17px;padding:11px 0}
}
@media (prefers-reduced-motion:reduce){.ad-js [data-step]{transition:none}}

/* corporate: the feature section uses the page's phone fold (cm-fold); on desktop the fold chrome is hidden so it reads as home's section */
@media (min-width:768px){
  .ad-feature .cm-fold__icon,.ad-feature .cm-fold__line,.ad-feature .cm-fold__plus{display:none!important}
  .ad-feature .cm-fold__sum{display:block;padding:0;cursor:default;list-style:none;border:0;background:none}
  .ad-feature .cm-fold__sum::-webkit-details-marker{display:none}
}
/* corporate phones: the hero stays as short as live (the sticky bar carries the voice button) */
@media (max-width:760px){.service-hero--corp .sketch-portrait{display:none}}
@media (max-width:760px){
  .service-stats{padding:18px 0 26px}
  .service-stats .case-facts{margin-top:18px}
  html[data-sk] body .service-stats .case-facts>div{font-size:16px;padding:9px 0}
  .service-hero{padding-bottom:26px}
}
@media (max-width:760px){
  .service-stats .sketch-stats{margin-top:12px}
  .service-hero{padding-top:22px;gap:22px}
  .service-hero .case-back{margin-bottom:10px}
  .service-hero .sketch-intro{line-height:1.7;margin-top:16px}
  .service-hero .sketch-actions{margin-top:20px}
}
@media (min-width:768px){
  .ad-feature details.cm-fold{display:block!important;grid-template-columns:none!important}
  .ad-feature details.cm-fold>div{display:block!important;padding:0!important;margin:0!important;grid-column:auto!important}
  .ad-feature details.cm-fold>summary{margin-bottom:22px}
  .ad-feature details.cm-fold>summary h2{margin:0}
}
@media (min-width:768px){
  .ad-feature .cm-fold>summary{float:none!important;width:auto!important}
  .ad-feature .cm-fold>div{margin-left:0!important}
}

/* final: no orphan line in the panel titles (善用 AI 的領導層 / AI-Smart Leaders); type size unchanged */
@media (min-width:761px){.ad-cols{grid-template-columns:.95fr 1.25fr 1.1fr}}
.ad-col__t{text-wrap:balance}
.ad-nb{white-space:nowrap}
/* tablets (761-1000 px): stack the two panels so the dark one is not stretched to the white one's height */
@media (max-width:1000px){.ad-feature .sketch-proof-grid{grid-template-columns:1fr;align-items:start}}