/* ============================================================
   依緹美學 — brand 頁面樣式（由原網站 brand.html 內嵌樣式抽出，內容未變更）
   ============================================================ */
/* ============================================================
   品牌理念 — 頁面專屬樣式
   ============================================================ */

/* ---------- 內頁 HERO ---------- */
.phero{position:relative;height:62vh;min-height:440px;overflow:hidden;color:#fff;
  display:flex;align-items:flex-end;}
.phero__bg{position:absolute;inset:-4%;}
.phero__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 46%;
  filter:sepia(.16) saturate(1.04) contrast(1.02);}
.phero__veil{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(24,11,7,.68),rgba(24,11,7,.30) 52%,rgba(24,11,7,.06)),
             linear-gradient(0deg,rgba(24,11,7,.52),transparent 46%);}
.phero__in{position:relative;z-index:3;width:100%;padding:0 var(--pad) clamp(48px,7vw,92px);}
.phero__en{font-family:var(--ff-en);font-weight:300;text-transform:uppercase;
  font-size:clamp(34px,6.4vw,88px);line-height:1.1;letter-spacing:.09em;margin:0 0 14px;
  text-shadow:0 8px 40px rgba(0,0,0,.4);}
.phero__en .ln{display:block;overflow:hidden;}
.phero__en.split .ch{display:inline-block;transform:translateY(115%);opacity:0;}
.phero__en.split.play .ch{animation:chUp .95s var(--ease) both;}
.phero__tc{font-size:clamp(15px,1.8vw,21px);letter-spacing:.3em;margin:0;
  opacity:0;transform:translateY(14px);animation:fadeUp 1s .9s var(--ease) forwards;}

/* ---------- 麵包屑 ---------- */
.crumb{padding:22px var(--pad);font-family:var(--ff-sans);font-size:var(--fs-xs);
  letter-spacing:.18em;color:var(--ink-3);border-bottom:1px solid var(--line);}
.crumb a{display:inline-flex;align-items:center;min-height:44px;transition:color .4s var(--ease);}
.crumb a:hover{color:var(--brand);}
.crumb i{font-style:normal;margin:0 10px;color:var(--line);}

/* ---------- 開場宣言 ---------- */
.manifesto{position:relative;padding:var(--sec-y) var(--pad);overflow:hidden;
  text-align:center;}
.manifesto__ghost{top:14%;left:50%;transform:translateX(-50%);
  font-size:clamp(70px,14vw,210px);color:rgba(157,117,83,.05);}
.manifesto__in{position:relative;z-index:2;max-width:820px;margin:0 auto;}
.manifesto h2{font-size:clamp(21px,2.6vw,33px);font-weight:400;letter-spacing:.16em;
  line-height:var(--lh-loose);margin:26px 0 30px;}
.manifesto p{font-size:var(--fs-md);line-height:2.4;color:var(--ink-2);letter-spacing:.08em;margin:0 0 18px;}

/* ---------- 三段式圖文 ---------- */
.story{padding:0 var(--pad) clamp(70px,9vw,120px);}
.story__row{
  max-width:var(--w-page);margin:0 auto clamp(60px,8vw,120px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,5vw,92px);align-items:center;
}
.story__row:nth-child(even) .story__fig{order:2;}
.story__fig{position:relative;}
.story__fig .frame{
  position:relative;aspect-ratio:4/3.4;overflow:hidden;
  border-radius:0 0 clamp(60px,10vw,160px) 0;
  box-shadow:0 40px 90px -55px rgba(60,30,20,.6);
}
.story__row:nth-child(even) .story__fig .frame{border-radius:0 0 0 clamp(60px,10vw,160px);}
.story__fig img{width:100%;height:100%;object-fit:cover;
  filter:sepia(.12) saturate(.98);transition:transform 1.8s var(--ease);}
.story__fig:hover img{transform:scale(1.05);}
/* 圖片進場：底色簾幕退開。用簾幕而非縮放，避免與 hover 的 scale 衝突。 */
.story__fig .frame::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:var(--bg);transform:translateX(0);
  transition:transform 1.05s var(--ease);
}
.story__fig.in .frame::after{transform:translateX(101%);}
/* 偶數列圖片在右側，簾幕改往左退，方向與版面一致 */
.story__row:nth-child(even) .story__fig.in .frame::after{transform:translateX(-101%);}
.story__no{
  position:absolute;top:-22px;left:-10px;z-index:2;
  font-family:var(--ff-en);font-size:clamp(56px,7vw,104px);font-weight:300;
  color:var(--bg);text-shadow:0 0 1px rgba(157,117,83,.35);letter-spacing:.02em;
  -webkit-text-stroke:1px rgba(157,117,83,.4);
}
.story__body h3{font-size:clamp(19px,2.2vw,27px);font-weight:500;letter-spacing:.14em;
  margin:18px 0 20px;line-height:var(--lh-snug);}
.story__body p{font-size:var(--fs-base);line-height:var(--lh-loose);color:var(--ink-2);letter-spacing:.07em;margin:0 0 16px;}

/* ---------- 五大特點（時間軸） ---------- */
.values{position:relative;background:var(--brand-deep);color:#F3E7D6;
  padding:var(--sec-y) var(--pad);overflow:hidden;
  border-radius:0 clamp(90px,14vw,240px) 0 0;}
.values__ghost{top:6%;left:50%;transform:translateX(-50%);
  font-size:clamp(66px,13vw,190px);color:rgba(255,255,255,.05);}
.values__hd{position:relative;z-index:2;text-align:center;margin-bottom:clamp(44px,6vw,80px);}
.values__hd .en{display:block;font-family:var(--ff-en);font-size:clamp(15px,1.5vw,19px);
  letter-spacing:.44em;color:var(--gold-lt);margin-bottom:14px;text-transform:uppercase;}
.values__hd h2{font-size:clamp(19px,2.2vw,27px);font-weight:400;letter-spacing:.2em;margin:0;}
.vlist{position:relative;z-index:2;max-width:900px;margin:0 auto;}
.vitem{
  display:grid;grid-template-columns:76px 1fr;gap:clamp(16px,2.4vw,40px);
  padding:clamp(26px,3vw,40px) 0;border-top:1px solid rgba(233,220,200,.2);
  transition:background .5s var(--ease);
}
.vitem:last-child{border-bottom:1px solid rgba(233,220,200,.2);}
.vitem__no{font-family:var(--ff-en);font-size:clamp(26px,3vw,40px);font-weight:300;
  color:var(--gold-lt);line-height:1;opacity:.8;transition:.6s var(--ease);}
.vitem:hover .vitem__no{opacity:1;transform:translateY(-4px);}
.vitem h3{font-size:clamp(17px,1.9vw,21px);font-weight:500;letter-spacing:.2em;margin:0 0 14px;}
.vitem h3 em{font-style:normal;color:var(--gold-lt);padding:0 4px;}
.vitem p{font-size:var(--fs-base);line-height:var(--lh-loose);color:rgba(243,231,214,.78);letter-spacing:.06em;margin:0;}

/* ---------- 結語 CTA ---------- */
.closing{position:relative;padding:var(--sec-y) var(--pad);text-align:center;overflow:hidden;}
.closing__in{position:relative;z-index:2;max-width:760px;margin:0 auto;}
.closing h2{font-size:clamp(20px,2.4vw,30px);font-weight:400;letter-spacing:.16em;
  line-height:var(--lh-loose);margin:24px 0 32px;}
.closing__btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;}

@media(max-width:900px){
  .phero{height:52vh;}
  .story__row{grid-template-columns:1fr;}
  .story__row:nth-child(even) .story__fig{order:0;}
  .values{border-radius:0;}
  .vitem{grid-template-columns:52px 1fr;}
}