/* ==========================================================================
   home.css — 首頁 9 大 section 專用樣式（dingda-2026）
   依 DESIGN.md：亮帶↔深帶交替、hairline 分層無陰影、copper <5% 稀有訊號、
   遮罩 35%、動效只做淡入/微放大/位移、1440 max、手機單欄不橫捲。
   本檔補齊 style.css 未定義的衍生 token（同色不同透明度，非新色）。
   ========================================================================== */

:root{
  --copper-hover:      rgba(154,116,77,.85);
  --ink-on-dark:       #F4F2ED;
  --metal-on-dark:     #A9AEB2;
  --hairline:          rgba(109,115,120,.28);
  --hairline-strong:   rgba(109,115,120,.5);
  --hairline-on-dark:  rgba(244,242,237,.16);
  --scrim-gradient:    linear-gradient(180deg,rgba(28,30,32,.15) 0%,rgba(28,30,32,.55) 100%);
  --shadow-case:       0 5px 30px rgba(28,30,32,.18);
  --ease-out:          cubic-bezier(.16,.84,.44,1);
  --dur-fast:          180ms;
  --dur:               280ms;
  --dur-slow:          400ms;
  --sp-lg:             24px;
  --sp-xl:             32px;
  --gutter:            32px;
}

/* 共用 eyebrow / section 標題群 -------------------------------------------- */
.home-eyebrow{
  font:600 .8125rem/1.3 var(--font-en);
  letter-spacing:1.4px; text-transform:uppercase;
  color:var(--copper); margin:0 0 12px;
}
.home-section-head{ max-width:60ch; margin-bottom:48px; }
.home-section-head .home-eyebrow{ margin-bottom:12px; }
.home-section-head h2{
  font:700 clamp(1.5rem,3vw,1.875rem)/1.25 var(--font-zh);
  letter-spacing:0; color:inherit; margin:0 0 12px;
}
.home-section-head p{
  font:400 1.0625rem/1.7 var(--font-zh);
  color:var(--metal); margin:0; max-width:54ch;
}
.section-dark .home-section-head p{ color:var(--metal-on-dark); }

/* 深帶 / 白帶 底色（交替節奏） ------------------------------------------- */
.section-dark{ background:var(--steel); color:var(--ink-on-dark); }
.section-white{ background:var(--white); }
.section-dark h2, .section-dark h3, .section-dark h4{ color:var(--ink-on-dark); }

/* 按鈕（home 專用，補 DESIGN.md 深底次要鈕） ----------------------------- */
.home-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font:600 1rem/1 var(--font-zh); letter-spacing:.4px;
  border-radius:var(--radius); padding:14px 28px; border:1px solid transparent;
  cursor:pointer; transition:background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.home-btn--primary{ background:var(--copper); color:var(--white); }
.home-btn--primary:hover{ background:var(--copper-hover); }
.home-btn--primary:active{ transform:scale(.98); }
.home-btn--ghost{ background:transparent; color:var(--ink); border-color:var(--hairline-strong); }
.home-btn--ghost:hover{ border-color:var(--ink); }
.home-btn--ghost.on-dark{ color:var(--ink-on-dark); border-color:var(--hairline-on-dark); }
.home-btn--ghost.on-dark:hover{ border-color:var(--ink-on-dark); }
.home-textlink{
  display:inline-flex; align-items:center; gap:6px;
  font:600 .8125rem/1.3 var(--font-en); letter-spacing:1.2px; text-transform:uppercase;
  color:var(--copper);
}
.home-textlink::after{ content:"\203A"; transition:transform var(--dur-fast) var(--ease-out); }
.home-card:hover .home-textlink::after,
.home-textlink:hover::after{ transform:translateX(4px); }

/* ── SECTION 1: HERO ─────────────────────────────────────────────────── */
.home-hero{
  position:relative; min-height:82vh; display:flex; align-items:flex-end;
  background:var(--ink); color:var(--ink-on-dark); overflow:hidden; padding:0;
}
/* Hero 背景圖鋪滿整個 section（dingda_img 輸出的 img class 為 attachment-hero，
   非 .home-hero__bg，故用「Hero 直接子 img」選擇器確實命中，絕對定位置底） */
.home-hero > img{
  position:absolute; inset:0; width:100%; height:100%; max-width:none;
  object-fit:cover; object-position:center 35%; z-index:0;
}
.home-hero__scrim{ z-index:1; }
.home-hero__inner{ position:relative; z-index:2; }
.home-hero__bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 35%; display:block;
}
.home-hero__scrim{ position:absolute; inset:0; background:var(--scrim-gradient); }
.home-hero__inner{
  position:relative; z-index:2; width:100%;
  max-width:var(--container-max); margin-inline:auto;
  padding:96px var(--gutter) 72px;
}
.home-hero__title{
  font:700 clamp(2rem,5vw,3.25rem)/1.18 var(--font-zh);
  letter-spacing:0; color:var(--ink-on-dark); max-width:20ch; margin:0;
}
.home-hero__sub{
  font:400 1.125rem/1.7 var(--font-zh); color:var(--ink-on-dark);
  max-width:44ch; margin:16px 0 0;
}
.home-hero__cta{ display:flex; gap:16px; margin-top:32px; flex-wrap:wrap; }

/* ── SECTION 2: 數字牆 ───────────────────────────────────────────────── */
.home-stats__grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.home-stats__cell{ padding:24px; border-right:1px solid var(--hairline); }
.home-stats__cell:last-child{ border-right:0; }
.home-stats__num{
  font:700 clamp(2.5rem,6vw,3.5rem)/1 var(--font-en);
  letter-spacing:-1px; font-variant-numeric:tabular-nums; color:var(--copper);
}
.home-stats__label{ font:400 .9375rem/1.6 var(--font-zh); color:var(--metal); margin-top:8px; }

/* ── SECTION 3: 精選實績（不規則拼貼） ─────────────────────────────────
   桌機 12 欄 grid：大主案例橫跨 6 欄 × 2 列，其餘小/中案例填右側與下方。 */
.home-featured__grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:minmax(180px,auto);
  gap:var(--sp-lg);
}
/* 1 大（左，跨 2 列高）+ 2 小（右上下）+ 2 中（下方各半） */
.home-featured__grid > .home-case:nth-child(1){ grid-column:span 6; grid-row:span 2; }
.home-featured__grid > .home-case:nth-child(2){ grid-column:span 6; grid-row:span 1; }
.home-featured__grid > .home-case:nth-child(3){ grid-column:span 6; grid-row:span 1; }
.home-featured__grid > .home-case:nth-child(4){ grid-column:span 6; grid-row:span 1; }
.home-featured__grid > .home-case:nth-child(5){ grid-column:span 6; grid-row:span 1; }

.home-case{
  position:relative; display:block; overflow:hidden;
  border-radius:var(--radius); background:var(--ink); min-height:100%;
  border:1px solid var(--hairline);
  transition:border-color var(--dur) var(--ease-out);
}
.home-case:hover{ border-color:var(--copper); }
.home-case__media{ position:absolute; inset:0; overflow:hidden; }
.home-case__media img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  transition:transform var(--dur-slow) var(--ease-out);
}
.home-case:hover .home-case__media img{ transform:scale(1.04); }
.home-case__scrim{ position:absolute; inset:0; background:var(--scrim-gradient); }
.home-case__body{
  position:relative; z-index:2; height:100%; display:flex; flex-direction:column;
  justify-content:flex-end; padding:24px; color:var(--ink-on-dark); min-height:180px;
}
.home-case--lg .home-case__body{ min-height:400px; }
.home-case__type{
  font:600 .75rem/1.3 var(--font-en); letter-spacing:1.2px; text-transform:uppercase;
  color:var(--metal-on-dark); margin:0 0 6px;
}
.home-case__title{ font:700 1.125rem/1.35 var(--font-zh); color:var(--ink-on-dark); margin:0 0 6px; }
.home-case--lg .home-case__title{ font-size:1.5rem; }
.home-case__meta{ font:400 .875rem/1.5 var(--font-zh); color:var(--metal-on-dark); margin:0 0 12px; }
.home-case__link{
  font:600 .75rem/1.3 var(--font-en); letter-spacing:1.2px; text-transform:uppercase;
  color:var(--paper); display:inline-flex; gap:6px; align-items:center;
}
.home-case__link::after{ content:"\203A"; transition:transform var(--dur-fast) var(--ease-out); }
.home-case:hover .home-case__link::after{ transform:translateX(4px); }

/* ── SECTION 4: 六大服務 ─────────────────────────────────────────────── */
.home-services__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-lg); }
/* 純展示圖例：文字壓在工程照上（無連結、無內頁） */
.home-service{
  position:relative; display:block; overflow:hidden;
  border-radius:var(--radius); aspect-ratio:4/3;
  background:var(--ink);
}
.home-service__media{ position:absolute; inset:0; overflow:hidden; }
.home-service__media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform var(--dur-slow) var(--ease-out);
}
.home-service:hover .home-service__media img{ transform:scale(1.05); }
/* 底部漸層遮罩，讓白字在任何照片上都清楚 */
.home-service__overlay{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(28,30,32,0) 30%,rgba(28,30,32,.35) 55%,rgba(28,30,32,.82) 100%);
}
.home-service__body{
  position:absolute; z-index:2; left:0; right:0; bottom:0;
  padding:24px;
}
.home-service__title{ font:700 1.375rem/1.4 var(--font-zh); color:#fff; margin:0 0 6px; }
.home-service__desc{ font:400 .9375rem/1.6 var(--font-zh); color:rgba(244,242,237,.9); margin:0; }
/* 銅棕細線點綴（<5%） */
.home-service::after{
  content:""; position:absolute; z-index:2; left:24px; bottom:0; width:0; height:3px;
  background:var(--copper); transition:width var(--dur) var(--ease-out);
}
.home-service:hover::after{ width:48px; }

/* ── SECTION 5: 一站式流程 ───────────────────────────────────────────── */
.home-process__grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:var(--sp-lg); }
.home-step{ position:relative; padding-top:24px; }
.home-step::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:var(--hairline-on-dark);
}
.home-step__num{
  font:700 1.5rem/1 var(--font-en); letter-spacing:-.5px; color:var(--copper);
  font-variant-numeric:tabular-nums; margin-bottom:12px;
}
.home-step__title{ font:600 1.0625rem/1.4 var(--font-zh); color:var(--ink-on-dark); margin:0; }

/* ── SECTION 6: 主打案例深度 ─────────────────────────────────────────── */
.home-showcase__wrap{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.home-showcase__media{ overflow:hidden; border-radius:var(--radius); box-shadow:var(--shadow-case); }
.home-showcase__media img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; }
.home-showcase__body h3{
  font:700 clamp(1.5rem,3vw,1.875rem)/1.25 var(--font-zh); color:var(--ink); margin:0 0 16px;
}
.home-showcase__items{ margin:0 0 24px; }
.home-showcase__items li{
  font:400 1rem/1.6 var(--font-zh); color:var(--ink);
  padding:10px 0; border-bottom:1px solid var(--hairline); display:flex; gap:12px;
}
.home-showcase__items li strong{ color:var(--metal); font-weight:600; min-width:6em; }
.home-showcase__thumbs{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:24px; }
.home-showcase__thumbs .home-showcase__thumb{ aspect-ratio:3/2; overflow:hidden; border-radius:var(--radius); }
.home-showcase__thumbs img{ width:100%; height:100%; object-fit:cover; }

/* ── SECTION 7: 為何選鼎大 ───────────────────────────────────────────── */
.home-why__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-lg); }
.home-why__item{
  background:var(--white); border:1px solid var(--hairline); border-radius:var(--radius);
  overflow:hidden;
}
.home-why__media{ aspect-ratio:16/10; overflow:hidden; background:var(--paper); }
.home-why__media img{ width:100%; height:100%; object-fit:cover; }
.home-why__body{ padding:20px 24px; }
.home-why__num{
  font:700 .875rem/1 var(--font-en); letter-spacing:.5px; color:var(--copper);
  font-variant-numeric:tabular-nums; margin-bottom:8px;
}
.home-why__title{ font:600 1.125rem/1.45 var(--font-zh); color:var(--ink); margin:0; }

/* ── SECTION 8: 合作案例／客戶 ───────────────────────────────────────── */
.home-partners__grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--hairline); border-left:1px solid var(--hairline);
}
.home-partner{
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:96px; padding:20px;
  border-right:1px solid var(--hairline); border-bottom:1px solid var(--hairline);
  font:600 1rem/1.4 var(--font-zh); color:var(--ink);
  transition:color var(--dur-fast) var(--ease-out);
}
.home-partner:hover{ color:var(--copper); }

/* ── SECTION 9: 詢價 CTA ─────────────────────────────────────────────── */
.home-cta{ text-align:center; }
.home-cta__inner{ max-width:720px; margin-inline:auto; }
.home-cta h2{
  font:700 clamp(1.75rem,3.5vw,2.25rem)/1.25 var(--font-zh);
  color:var(--ink-on-dark); margin:0 0 16px; letter-spacing:0;
}
.home-cta p{
  font:400 1.0625rem/1.7 var(--font-zh); color:var(--metal-on-dark);
  margin:0 0 32px; max-width:48ch; margin-inline:auto;
}
.home-cta__btns{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ── 進場動效（淡入 + 微位移） ───────────────────────────────────────── */
.home-reveal{ opacity:0; transform:translateY(16px); animation:home-fade-up var(--dur) var(--ease-out) forwards; }
.home-reveal.d1{ animation-delay:60ms; }
.home-reveal.d2{ animation-delay:120ms; }
.home-reveal.d3{ animation-delay:180ms; }
@keyframes home-fade-up{ to{ opacity:1; transform:none; } }

/* ── 響應式 ─────────────────────────────────────────────────────────── */
@media (max-width:1023px){
  .home-stats__grid{ grid-template-columns:repeat(2,1fr); }
  .home-stats__cell:nth-child(2n){ border-right:0; }
  .home-services__grid,
  .home-why__grid{ grid-template-columns:repeat(2,1fr); }
  .home-process__grid{ grid-template-columns:repeat(3,1fr); }
  .home-partners__grid{ grid-template-columns:repeat(3,1fr); }
  /* 拼貼降為 2 欄，大案例橫跨滿寬 */
  .home-featured__grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:minmax(200px,auto); }
  .home-featured__grid > .home-case:nth-child(1){ grid-column:span 2; grid-row:span 1; }
  .home-featured__grid > .home-case{ grid-column:span 1 !important; grid-row:span 1 !important; }
  .home-case--lg .home-case__body{ min-height:280px; }
}

@media (max-width:767px){
  .home-hero{ min-height:auto; }
  .home-hero__inner{ padding:72px 24px 48px; }
  .home-stats__grid{ grid-template-columns:1fr; }
  .home-stats__cell{ border-right:0; border-bottom:1px solid var(--hairline); }
  .home-stats__cell:last-child{ border-bottom:0; }
  /* 全部拼貼/網格降單欄，不橫捲 */
  .home-featured__grid{ grid-template-columns:1fr; }
  .home-featured__grid > .home-case{ grid-column:span 1 !important; grid-row:span 1 !important; min-height:240px; }
  .home-case--lg .home-case__body,
  .home-case__body{ min-height:240px; }
  .home-services__grid,
  .home-why__grid,
  .home-process__grid,
  .home-partners__grid{ grid-template-columns:1fr; }
  .home-showcase__wrap{ grid-template-columns:1fr; gap:32px; }
  .home-showcase__thumbs{ grid-template-columns:repeat(3,1fr); }
  .home-partners__grid{ grid-template-columns:repeat(2,1fr); }
  .home-cta__btns .home-btn{ width:100%; }
}

@media (prefers-reduced-motion:reduce){
  .home-reveal{ animation:none; opacity:1; transform:none; }
  .home-case:hover .home-case__media img,
  .home-service:hover .home-service__media img{ transform:none; }
}