/* =============================================================
   派遣 AI 長 — 首頁版面 v2（home.css）
   編輯部式:滿版攝影 hero、髮絲線編號清單、非對稱網格、方角。
   RWD 依 Blocksy breakpoint:tablet ≤999.98px、mobile ≤689.98px
   ============================================================= */

/* 首頁滿版:解除 Blocksy 容器限制 */
.paid-home{overflow-x:clip;}
#main-container{padding:0!important;max-width:100%!important;}
.site-main{max-width:100%!important;margin:0!important;}

/* 桌機才生效的手動斷行 */
.br-d{display:none;}
@media (min-width:690px){.br-d{display:inline;}}

/* ---- 進場(subtle) ---- */
[data-reveal]{opacity:0;transform:translateY(var(--move));
  transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out);}
[data-reveal].is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1!important;transform:none!important;}}

/* 區塊標頭通用 */
.sec-head{max-width:60ch;}
.sec-head .h2{margin:0 0 var(--space-5);}
.sec-head .lead{margin:0;max-width:44ch;}

/* =============================================================
   圖解(diagram)系統:顧問報告級線繪動畫
   由外層 [data-reveal].is-in 觸發;stroke-dashoffset 描繪 + 節點淡入
   ============================================================= */
.diag{width:100%;height:auto;display:block;}
.diag text{font-family:var(--font-sans);}
.diag .d-hair{stroke-width:1;fill:none;}
.diag circle.d-fade:not([fill]):not([style*="fill"]){fill:none;stroke-width:1;}
.diag .d-line{fill:none;stroke-width:2;stroke-linecap:round;}
.diag .d-draw{stroke-dasharray:1;stroke-dashoffset:1;}
.diag .d-fade{opacity:0;}
[data-reveal].is-in .d-draw{stroke-dashoffset:0;
  transition:stroke-dashoffset 1.2s var(--ease-out) .15s;}
[data-reveal].is-in .d-fade{opacity:1;
  transition:opacity .6s var(--ease-out) .15s;}
[data-reveal].is-in .d-t1{transition-delay:.4s;}
[data-reveal].is-in .d-t2{transition-delay:.65s;}
[data-reveal].is-in .d-t3{transition-delay:.9s;}
[data-reveal].is-in .d-t4{transition-delay:1.15s;}
[data-reveal].is-in .d-t5{transition-delay:1.4s;}
[data-reveal].is-in .d-t6{transition-delay:1.65s;}
@media (prefers-reduced-motion:reduce){
  .diag .d-draw{stroke-dashoffset:0;}
  .diag .d-fade{opacity:1;}
}

/* 區塊頂部:文字 × 圖解 非對稱網格(6/5) */
.p-pain__top,.p-modes__top{display:grid;
  grid-template-columns:repeat(var(--grid-cols),1fr);
  column-gap:var(--gutter);align-items:end;margin-bottom:var(--space-9);}
.p-pain__top .sec-head,.p-modes__top .sec-head{grid-column:1 / span 6;margin:0;}
.p-pain__diag,.p-modes__diag{grid-column:8 / span 5;}
@media (max-width:999.98px){
  .p-pain__top .sec-head,.p-modes__top .sec-head{grid-column:1 / -1;}
  .p-pain__diag,.p-modes__diag{grid-column:1 / span 9;margin-top:var(--space-7);}
}
@media (max-width:689.98px){
  .p-pain__diag,.p-modes__diag{grid-column:1 / -1;}
}

/* =============================================================
   ① HERO:滿版攝影 + 深藍壓景
   ============================================================= */
.p-hero{position:relative;min-height:min(92vh,960px);display:flex;
  align-items:center;overflow:clip;background:var(--navy-900);}
.p-hero__img{position:absolute;inset:0;}
.p-hero__img img{width:100%;height:100%;object-fit:cover;object-position:64% center;display:block;}
.p-hero__scrim{position:absolute;inset:0;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--navy-900) 88%, transparent) 0%,
      color-mix(in srgb, var(--navy-900) 62%, transparent) 34%,
      color-mix(in srgb, var(--navy-900) 18%, transparent) 62%,
      transparent 82%),
    linear-gradient(0deg,
      color-mix(in srgb, var(--navy-900) 55%, transparent) 0%,
      transparent 30%);}
.p-hero .container{position:relative;z-index:1;width:100%;
  padding-block:clamp(120px,16vh,180px);}
.p-hero__copy{max-width:620px;}
.p-hero .eyebrow{color:rgba(255,255,255,.72);}
.p-hero .eyebrow::before{background:var(--sky-400);}
.p-hero__title{color:#fff;margin:0 0 var(--space-6);
  font-size:clamp(2.75rem,5.6vw,4.75rem);line-height:1.26;}
.p-hero__lead{color:rgba(255,255,255,.82);font-size:var(--fs-lead);
  line-height:var(--lh-lead);margin:0 0 var(--space-8);max-width:34em;}
.p-hero__cta{display:flex;flex-wrap:wrap;gap:var(--space-4);}

/* hero 一次性編排(CSS keyframes,不依賴 JS) */
@keyframes heroUp{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}
.p-hero .eyebrow{animation:heroUp var(--dur-3) var(--ease-out) .05s both;}
.p-hero__title{animation:heroUp var(--dur-3) var(--ease-out) .16s both;}
.p-hero__lead{animation:heroUp var(--dur-3) var(--ease-out) .3s both;}
.p-hero__cta{animation:heroUp var(--dur-3) var(--ease-out) .44s both;}
.p-hero__img img{animation:heroZoom 2.4s var(--ease-out) both;}
@keyframes heroZoom{from{transform:scale(1.05);}to{transform:scale(1);}}

@media (max-width:999.98px){
  .p-hero__img img{object-position:70% center;}
}
@media (max-width:689.98px){
  .p-hero{min-height:88vh;}
  .p-hero__scrim{background:
    linear-gradient(0deg,
      color-mix(in srgb, var(--navy-900) 92%, transparent) 8%,
      color-mix(in srgb, var(--navy-900) 46%, transparent) 55%,
      color-mix(in srgb, var(--navy-900) 30%, transparent) 100%);}
  .p-hero .container{display:flex;align-items:flex-end;min-height:88vh;
    padding-block:0 var(--space-8);}
  .p-hero__cta .btn{flex:1 1 100%;}
}

/* =============================================================
   ② 痛點:編號 + 髮絲線編輯清單
   ============================================================= */
.p-pain__row{display:grid;grid-template-columns:repeat(var(--grid-cols),1fr);
  column-gap:var(--gutter);padding-block:var(--space-7);
  border-top:1px solid var(--border-hair);align-items:baseline;}
.p-pain__num{grid-column:1 / span 1;font-family:var(--font-num);
  font-size:1.5rem;font-weight:var(--fw-light);color:var(--ink-400);
  font-feature-settings:var(--fnum);}
.p-pain__title{grid-column:2 / span 4;margin:0;font-family:var(--font-display);
  font-size:var(--fs-h3);font-weight:var(--fw-semibold);color:var(--brand-ink);line-height:1.5;}
.p-pain__desc{grid-column:7 / span 6;margin:0;color:var(--ink-700);
  line-height:1.9;max-width:36em;}
@media (max-width:999.98px){
  .p-pain__title{grid-column:2 / span 10;}
  .p-pain__desc{grid-column:2 / span 10;margin-top:var(--space-3);}
}
@media (max-width:689.98px){
  .p-pain__row{grid-template-columns:repeat(4,1fr);}
  .p-pain__num{grid-column:1 / -1;}
  .p-pain__title{grid-column:1 / -1;margin-top:var(--space-2);}
  .p-pain__desc{grid-column:1 / -1;}
}

/* =============================================================
   ③ 服務主張:文字 × 攝影 分欄
   ============================================================= */
.p-def .container{align-items:center;}
.p-def__copy{grid-column:1 / span 6;}
.p-def__copy .lead{margin:0 0 var(--space-7);}
.p-def__levels{border-top:1px solid var(--border-hair);}
.p-def__level{display:grid;grid-template-columns:9em 1fr;gap:var(--space-5);
  padding-block:var(--space-5);border-bottom:1px solid var(--border-hair);}
.p-def__level h4{margin:0;font-family:var(--font-display);
  font-weight:var(--fw-semibold);color:var(--brand-navy);font-size:1.1rem;}
.p-def__level p{margin:0;color:var(--ink-700);font-size:var(--fs-sm);line-height:1.85;}
.p-def__media{grid-column:8 / span 5;}
.p-def__media img{width:100%;height:auto;display:block;aspect-ratio:4/5;object-fit:cover;}
@media (max-width:999.98px){
  .p-def__copy{grid-column:1 / -1;}
  .p-def__media{grid-column:1 / -1;margin-top:var(--space-8);}
  .p-def__media img{aspect-ratio:3/2;}
}
@media (max-width:689.98px){
  .p-def__level{grid-template-columns:1fr;gap:var(--space-2);}
}

/* =============================================================
   ④ 三種合作情境:三欄髮絲線
   ============================================================= */
.p-modes__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);}
.p-mode{border-top:1px solid var(--border-strong);padding-top:var(--space-6);
  display:flex;flex-direction:column;}
.p-mode__label{font-size:var(--fs-eyebrow);font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ink-500);
  margin:0 0 var(--space-5);}
.p-mode h3{margin:0 0 var(--space-3);}
.p-mode__role{margin:0 0 var(--space-3);color:var(--brand-navy);
  font-weight:var(--fw-medium);}
.p-mode__desc{margin:0 0 var(--space-6);color:var(--ink-700);
  font-size:var(--fs-sm);line-height:1.9;flex:1;}
@media (max-width:999.98px){.p-modes__cols{grid-template-columns:1fr;row-gap:var(--space-7);}}

/* =============================================================
   ⑤ 方法三步
   ============================================================= */
.p-method .sec-head{margin-bottom:var(--space-9);}
.p-method__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);}
.p-step{position:relative;border-top:1px solid var(--border-hair);padding-top:var(--space-6);}
/* 線繪:頂線由左描過 + 節點亮起(隨各步 is-in 依序觸發) */
.p-step::after{content:"";position:absolute;top:-1px;left:0;height:1px;width:100%;
  background:var(--brand-navy);transform:scaleX(0);transform-origin:left;}
.p-step.is-in::after{transform:scaleX(1);
  transition:transform 1s var(--ease-out) .1s;}
.p-step::before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;
  border-radius:50%;background:var(--brand-sky);opacity:0;transform:scale(.4);}
.p-step.is-in::before{opacity:1;transform:scale(1);
  transition:opacity .4s var(--ease-out) .95s,transform .4s var(--ease-out) .95s;}
@media (prefers-reduced-motion:reduce){
  .p-step::after{transform:scaleX(1);}
  .p-step::before{opacity:1;transform:scale(1);}
}
.p-step__num{font-family:var(--font-num);font-size:clamp(2.6rem,4vw,3.4rem);
  font-weight:var(--fw-light);color:var(--navy-300);line-height:1;
  margin-bottom:var(--space-5);font-feature-settings:var(--fnum);}
.p-step h3{margin:0 0 var(--space-3);font-size:var(--fs-h4);}
.p-step p{margin:0;color:var(--ink-700);font-size:var(--fs-sm);line-height:1.9;}
.p-method__more{margin-top:var(--space-8);}
@media (max-width:689.98px){.p-method__cols{grid-template-columns:1fr;row-gap:var(--space-7);}}

/* =============================================================
   ⑥ 數據帶(深藍)+ 滿版影像帶
   ============================================================= */
.p-stats .sec-head{margin-bottom:var(--space-9);}
.p-stats__row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);}
.p-stats__row .stat{border-top:1px solid var(--on-surface-hair);padding-top:var(--space-6);}
.p-stats__note{margin-top:var(--space-8);max-width:52em;}
@media (max-width:689.98px){
  .p-stats__row{grid-template-columns:1fr;row-gap:var(--space-7);}
}

.p-photo-band{height:clamp(300px,42vw,560px);overflow:clip;}
.p-photo-band img{width:100%;height:100%;object-fit:cover;object-position:center 38%;display:block;}

/* =============================================================
   ⑦ 能力地圖(去識別)
   ============================================================= */
.p-cap .container{align-items:start;}
.p-cap__head{grid-column:1 / span 5;}
.p-cap__list{grid-column:7 / span 6;}
.p-cap__item{border-top:1px solid var(--border-hair);padding-block:var(--space-6);}
.p-cap__item:last-child{border-bottom:1px solid var(--border-hair);}
.p-cap__item h3{margin:0 0 var(--space-2);font-size:var(--fs-h4);}
.p-cap__item p{margin:0;color:var(--ink-700);font-size:var(--fs-sm);line-height:1.85;}
.p-cap__diag{max-width:300px;margin-top:var(--space-8);}
@media (max-width:999.98px){
  .p-cap__head{grid-column:1 / -1;margin-bottom:var(--space-7);}
  .p-cap__list{grid-column:1 / -1;}
  .p-cap__diag{display:none;} /* 窄幅時列表緊接標頭,圖解省略 */
}

/* =============================================================
   ⑧ 最新專欄:編輯列表
   ============================================================= */
.p-ins__head{display:flex;justify-content:space-between;align-items:flex-end;
  gap:var(--space-5);margin-bottom:var(--space-9);flex-wrap:wrap;}
.p-ins__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);}
.p-ins__item{border-top:1px solid var(--border-strong);padding-top:var(--space-5);
  display:flex;flex-direction:column;gap:var(--space-3);text-decoration:none;}
.p-ins__cover{aspect-ratio:3/2;overflow:hidden;background:var(--bg-subtle);
  margin-bottom:var(--space-2);}
.p-ins__cover img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform var(--dur-3) var(--ease-out);}
.p-ins__item:hover .p-ins__cover img{transform:scale(1.035);}
.p-ins__cat{font-size:var(--fs-eyebrow);font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--sky-600);}
.p-ins__title{margin:0;font-family:var(--font-display);font-size:var(--fs-h4);
  font-weight:var(--fw-semibold);line-height:1.55;color:var(--brand-ink);
  transition:color var(--dur-1) var(--ease-out);}
.p-ins__item:hover .p-ins__title{color:var(--brand-navy);}
.p-ins__meta{color:var(--ink-500);font-size:var(--fs-cap);}
.p-ins__item--empty{color:var(--ink-500);}
.p-ins__item--empty .p-ins__title{color:var(--ink-400);}
@media (max-width:999.98px){.p-ins__cols{grid-template-columns:1fr;row-gap:var(--space-8);}}

/* =============================================================
   ⑨ 最終 CTA(深藍)
   ============================================================= */
.p-cta{text-align:left;}
.p-cta .container{display:grid;grid-template-columns:repeat(var(--grid-cols),1fr);
  column-gap:var(--gutter);align-items:center;}
.p-cta__copy{grid-column:1 / span 8;}
.p-cta__copy .h2{margin:0 0 var(--space-4);}
.p-cta__copy .lead{margin:0;}
.p-cta__act{grid-column:10 / span 3;justify-self:end;}
@media (max-width:999.98px){
  .p-cta__copy{grid-column:1 / -1;margin-bottom:var(--space-7);}
  .p-cta__act{grid-column:1 / -1;justify-self:start;}
}