/* ==========================================================
   墨之屿全案设计 · 演示文稿 Skeleton
   统一双色系统：品牌红(节奏页) + 象牙白(内容页)
   ========================================================== */
:root {
  --red:    #9C1F25;   /* 品牌主红（用于点睛/文字/描边） */
  --red-deep: #6E181D; /* 节奏页更沉稳的酒红底 */
  --gold:   #E1CCAF;   /* 米金点睛 */
  --ink:    #241917;   /* 深棕黑 正文 */
  --ivory:  #EFE9E9;   /* 象牙白 内容底 */
  --mist:   #D8D4CC;   /* 辅助雾灰 */
  --gold-line: rgba(225,204,175,.4);

  /* 全站统一字体（中英文一致，不使用宋体/衬线） */
  --serif: "Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --sans:  "Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: #0f0d0c;
  font-family: var(--sans);
  color: var(--ink);
  overflow: hidden;
}

/* ---------- Deck / Track ---------- */
.deck { position: fixed; inset: 0; overflow: hidden; }
.track {
  display: flex;
  height: 100%;
  transition: transform .5s cubic-bezier(.65,.05,.36,1);
  will-change: transform;
}
.slide {
  position: relative;
  flex: 0 0 100vw;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3vh 3vw;
}

/* 16:9 canvas */
.canvas {
  position: relative;
  width: 100%;
  max-width: calc(100vh * 16 / 9 - 6vw);
  aspect-ratio: 16 / 9;
  max-height: 100%;
  padding: 4.5% 6%;
  overflow: hidden;
}
.canvas.center {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
}

/* ---------- 底色变体 ---------- */
.slide.red   {
  background:
    radial-gradient(130% 110% at 72% 22%, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 40%),
    linear-gradient(160deg, #7a1c22 0%, var(--red-deep) 55%, #55131a 100%);
}
.slide.ivory { background: var(--ivory); }

/* ---------- 通用文字 ---------- */
.kicker {
  font-family: var(--serif);
  letter-spacing: .28em;
  font-size: .82vw;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 1.1em;
}
.red-k { color: var(--red); opacity: .75; }
.title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 2.5vw;
  line-height: 1.25;
  color: var(--ink);
}
.title .hl { color: var(--red); }
.title .em-word { font-size: 1.4em; font-weight: 900; color: var(--red); line-height: 1; }
.subtitle { font-size: 1vw; color: #6b5d55; margin-top: .8em; }
.subtitle.center { text-align: center; }

/* ---------- 页眉 / 页脚 ---------- */
.head { margin-bottom: 3%; }
.center-head { text-align: center; }
.foot {
  display: none;
}
.corner-logo {
  position: absolute; top: 5%; right: 6%;
  height: 4.2%; opacity: .8;
}

/* ==========================================================
   P1 封面
   ========================================================== */
.cover .canvas { padding: 0; }
.cover .cover-media {
  position: absolute; inset: 0;
}
.cover .cover-carousel { overflow: hidden; background: #241917; }
.cover .cc-slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 1.2s ease;
}
.cover .cc-slide.is-on { opacity: 1; }
.cover .cover-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--red) 0%, var(--red) 24%, rgba(156,31,37,.72) 44%, rgba(156,31,37,0) 72%);
  z-index: 1;
}
.cover-text {
  position: absolute; left: 7%; top: 50%; transform: translateY(-50%);
  z-index: 2; max-width: 42%;
}
.cover-logo { height: 5vh; margin-bottom: 3vh; display: block; }
.cover .kicker { color: var(--gold); }
.display {
  font-family: var(--serif); font-weight: 700;
  font-size: 2.9vw; color: var(--gold); line-height: 1.2;
}
.lead { font-size: 1.35vw; color: #f3ede2; margin-top: 1vh; font-weight: 300; }
.tags { margin-top: 3.5vh; color: var(--gold); font-size: .95vw; letter-spacing: .12em; }
.sign {
  position: absolute; left: 7%; bottom: 6%;
  color: rgba(225,204,175,.7); font-size: .75vw; letter-spacing: .22em; z-index: 2;
}

/* ==========================================================
   红底转场页 (P2/P6/P9)
   ========================================================== */
.divider .canvas { display: flex; align-items: center; }
.divider-mark {
  position: absolute; right: 5%; bottom: 8%;
  width: 42%; height: auto; opacity: .10;
  pointer-events: none;
}
.divider-body { position: relative; z-index: 2; padding-left: 2%; border-left: 2px solid var(--gold); }
.divider .kicker { color: var(--gold); }
.divider-name {
  font-family: var(--serif); font-weight: 700;
  font-size: 3.2vw; color: var(--gold); margin: .2em 0 .5em;
}
.divider-q { font-size: 1.2vw; color: #f3ede2; font-weight: 300; max-width: 34vw; line-height: 1.7; }
.logic-chain {
  margin-top: 2.2vh; font-size: 1vw; color: var(--gold);
  letter-spacing: .06em; border-top: 1px solid var(--gold-line); padding-top: 1.4vh;
}
.logic-chain i { font-style: normal; opacity: .6; margin: 0 .3em; }

/* ==========================================================
   P3 品牌宣言
   ========================================================== */
.declaration { display: flex; flex-direction: column; gap: 1.6vh; }
.declaration span {
  font-family: var(--serif); font-weight: 700; font-size: 3vw;
  color: var(--ink); position: relative;
}
.declaration span::before {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  bottom: -.9vh; width: 2px; height: .8vh; background: var(--gold);
}
.declaration span:last-child::before { display: none; }
.manifesto .note { margin-top: 4vh; color: #6b5d55; font-size: 1vw; max-width: 44vw; }

/* ==========================================================
   分栏布局
   ========================================================== */
.split-6-4, .split-4-6, .split-5-5 { display: grid; gap: 4%; height: 100%; align-items: center; }
.split-6-4 { grid-template-columns: 56% 40%; }
.split-4-6 { grid-template-columns: 38% 58%; }
.split-5-5 { grid-template-columns: 48% 48%; }
.col-text { align-self: center; }
.col-media {
  height: 82%; border-radius: 4px;
}
.col-media img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; display: block; }
.photo-cloud {
  position: relative; overflow: hidden;
  display: grid; gap: 1.4%;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
}
.photo-cloud img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 4px; display: block;
  box-shadow: 0 2px 8px rgba(36,25,23,.14);
}
.photo-cloud .pc-1 { grid-column: 1 / 3; grid-row: 1 / 3; }
.photo-cloud .pc-2 { grid-column: 3 / 4; grid-row: 1 / 2; }
.photo-cloud .pc-3 { grid-column: 4 / 5; grid-row: 1 / 2; }
.photo-cloud .pc-4 { grid-column: 3 / 4; grid-row: 2 / 3; }
.photo-cloud .pc-5 { grid-column: 4 / 5; grid-row: 2 / 3; }
.photo-cloud .pc-6 { grid-column: 1 / 3; grid-row: 3 / 4; }
.photo-cloud .pc-7 { grid-column: 3 / 5; grid-row: 3 / 4; }
.quote {
  font-family: var(--serif); font-size: 1.5vw; line-height: 1.9;
  color: var(--ink); border: none; margin: 2vh 0;
}
.signoff { color: var(--red); font-size: 1vw; margin-top: 2vh; }
.founder-page .quote { max-width: 76%; margin: 3vh auto; }
.founder-page .kicker { margin-bottom: 1.4vh; }
.founder-page .signoff { margin-top: 3vh; }

/* ---------- 卡片组 ---------- */
.cols-3, .cols-4, .cols-5 { display: grid; gap: 2%; margin-top: 2%; }
.cols-3 { grid-template-columns: repeat(3,1fr); }
.cols-4 { grid-template-columns: repeat(4,1fr); }
.cols-5 { grid-template-columns: repeat(5,1fr); }

.card {
  border: 1px solid var(--gold); border-radius: 4px;
  padding: 3vh 1.6vw; text-align: center; background: rgba(225,204,175,.08);
}
.card h3 { font-size: 1.15vw; color: var(--ink); margin-bottom: .8vh; }
.card p { font-size: .85vw; color: #7a6c63; }
.closing-line { text-align: center; margin-top: 4vh; font-family: var(--serif); font-size: 1.25vw; color: var(--red); }

/* 痛点卡片 */
.pain { padding: 2.4vh 1.3vw; background: #e6dfda; border-radius: 4px; border-top: 3px solid var(--red); display: flex; flex-direction: column; }
.pain .num { font-family: var(--serif); font-size: 1.9vw; color: var(--red); font-weight: 900; }
.pain h3 { font-size: 1.1vw; color: var(--red); margin: 1vh 0 .8vh; }
.pain p { font-size: .82vw; color: #6b5d55; line-height: 1.6; margin-bottom: 1.4vh; }
.pain .pain-img { height: 20vh; margin-top: auto; border-radius: 4px; overflow: hidden; background: #efe9e3; }
.pain .pain-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- 对比 ---------- */
.compare { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 3%; margin-top: 2%; }
.compare-col { border-radius: 6px; padding: 3vh 1.8vw; }
.compare-col h4 { font-family: var(--serif); font-size: 1.3vw; margin-bottom: 1.6vh; }
.compare-col ul { list-style: none; }
.compare-col li { padding: 1vh 0; font-size: .95vw; border-bottom: 1px dashed rgba(0,0,0,.08); }
.compare-col.dim { background: #e2dbd6; color: #8a7c73; }
.compare-col.dim h4 { color: #8a7c73; }
.compare-col.hi { background: var(--red); color: var(--ivory); }
.compare-col.hi h4 { color: var(--gold); }
.compare-col.hi li span { display: block; font-size: .72vw; color: rgba(239,233,233,.7); margin-top: .3vh; }
.vs-badge {
  width: 3vw; height: 3vw; border-radius: 50%;
  background: var(--gold); color: var(--red);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 700; font-size: 1.1vw;
}

/* ==========================================================
   数字页
   ========================================================== */
.stats { display: grid; grid-template-columns: repeat(5,1fr); margin-top: 5%; }
.stat { text-align: center; position: relative; padding: 0 1vw; }
.stat + .stat::before {
  content: ""; position: absolute; left: 0; top: 15%; height: 70%; width: 1px; background: var(--gold-line);
}
.stat b { font-family: var(--serif); font-weight: 700; font-size: 3.6vw; color: var(--red); display: block; line-height: 1; }
.stat span { font-size: .9vw; color: #6b5d55; margin-top: 1.4vh; display: block; letter-spacing: .06em; }

/* ---------- 图片网格 ---------- */
.grid-6 { display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(2,1fr); gap: 1.4%; height: 72%; margin-top: 2%; }
.tile { font-size: 1vw; }

/* ---------- 服务城市地图 ---------- */
.numbers-page .stats { margin-top: 3%; }
.map-band {
  display: grid; grid-template-columns: 26% 1fr; gap: 3%;
  align-items: center; margin-top: 4%;
}
.map-intro h3 { font-size: 1.4vw; color: var(--ink); margin: .3vh 0 1vh; }
.map-desc { font-size: .85vw; color: #6b5d55; }
.map-desc b { color: var(--red); }
.city-legend { list-style: none; margin-top: 1.8vh; display: grid; grid-template-columns: 1fr 1fr; gap: .8vh 1vw; }
.city-legend li { display: flex; align-items: center; font-size: .82vw; color: var(--ink); }
.city-legend .dot { width: .6vw; height: .6vw; border-radius: 50%; background: var(--gold); margin-right: .5vw; flex: none; }
.city-legend .dot.hq { background: var(--red); }
.city-legend span { font-size: .62vw; color: var(--red); margin-left: .35vw; letter-spacing: .05em; }

.geo-map { width: 100%; height: 34vh; display: block; }
.geo-map .land { fill: rgba(216,212,204,.5); stroke: var(--gold-line); stroke-width: 1.5; }
.geo-map .route { fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-dasharray: 5 6; opacity: .8; }
.geo-map .route.flow {
  stroke: var(--red); stroke-width: 2.2; opacity: .9;
  stroke-dasharray: 6 10; stroke-linecap: round;
  animation: mapFlow 1.6s linear infinite; animation-delay: var(--d, 0s);
}
.geo-map .pin { fill: var(--gold); stroke: #fff; stroke-width: 1.5; }
.geo-map .pin.hq { fill: var(--red); animation: hqBlink 1.6s ease-in-out infinite; }
.geo-map .pin.city { transform-box: fill-box; transform-origin: center; animation: cityPop .6s ease-out both; animation-delay: var(--d, 0s); }
.geo-map .hq-pulse, .geo-map .city-pulse {
  transform-box: fill-box; transform-origin: center; pointer-events: none;
}
.geo-map .hq-pulse { fill: var(--red); animation: mapPing 2.4s ease-out infinite; animation-delay: var(--d, 0s); }
.geo-map .city-pulse { fill: var(--gold); animation: mapPing 2.6s ease-out infinite; animation-delay: var(--d, 0s); }
.geo-map .lbl { font-family: var(--sans); font-size: 15px; fill: var(--ink); text-anchor: middle; font-weight: 500; }
.geo-map .hq-lbl { fill: var(--red); font-weight: 700; font-size: 13px; }
@keyframes mapPulse { 0% { transform: scale(1); opacity: .4; } 70% { transform: scale(2.6); opacity: 0; } 100% { opacity: 0; } }
@keyframes mapPing { 0% { transform: scale(.5); opacity: .55; } 70% { transform: scale(3); opacity: 0; } 100% { transform: scale(3); opacity: 0; } }
@keyframes mapFlow { to { stroke-dashoffset: -32; } }
@keyframes hqBlink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes cityPop { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* ==========================================================
   案例 效果图 vs 实景
   ========================================================== */
.case-head { text-align: center; margin-bottom: 2%; }
.case-tag { color: #7a6c63; font-size: .95vw; margin-top: .6vh; letter-spacing: .08em; }
.case-split { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 0; height: 62%; }
.case-side { position: relative; overflow: hidden; }
.case-side .ph { height: 100%; border-radius: 2px; }
.case-side img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; display: block; background: #efe9e2; }
.corner-tag {
  position: absolute; top: 1vh; z-index: 3; left: 1vh;
  background: rgba(36,25,23,.72); color: var(--gold);
  font-size: .72vw; padding: .4vh .8vw; letter-spacing: .1em;
}
.case-side:last-child .corner-tag { left: auto; right: 1vh; }
.vs-mid {
  align-self: center; z-index: 4; margin: 0 -1.4vw;
  width: 2.8vw; height: 2.8vw; border-radius: 50%;
  background: var(--gold); color: var(--red);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 700; font-size: 1vw;
  box-shadow: 0 0 0 6px var(--ivory);
}
.case-hero-line {
  text-align: center; margin-top: 2.6vh;
  font-family: var(--serif); font-size: 1.6vw; color: var(--red); font-weight: 700;
}
.case-note { text-align: center; margin-top: 2.6vh; font-size: 1vw; color: #6b5d55; }

/* ==========================================================
   模块 / 施工卡片
   ========================================================== */
.module, .stage-card { text-align: center; padding: 2vh 1vw; }
.module .ico { color: var(--gold); font-size: 1.6vw; }
.module h3, .stage-card h3 { font-size: 1vw; color: var(--ink); margin: 1.2vh 0 .8vh; }
.module p, .stage-card p { font-size: .78vw; color: #7a6c63; line-height: 1.6; }
.stage-card .mini { height: 27vh; margin-bottom: 1vh; border-radius: 4px; overflow: hidden; background: #efe9e3; }
.stage-card .mini img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- 时间轴 ---------- */
.timeline {
  display: grid; grid-template-columns: repeat(6,1fr); gap: 2vh 1.5%;
  margin-top: 5%; position: relative;
}
.step {
  position: relative; padding-left: 1.6vw; font-size: .92vw; color: var(--ink);
}
.step b {
  font-family: var(--serif); color: var(--red); font-size: 1.3vw; font-weight: 700;
  margin-right: .5vw;
}

/* ---------- 要点列表 ---------- */
.points { list-style: none; margin-top: 2vh; }
.points li { padding: 1.4vh 0; font-size: .92vw; color: #6b5d55; border-bottom: 1px solid rgba(0,0,0,.06); }
.points li b { display: block; color: var(--ink); font-size: 1vw; margin-bottom: .3vh; }
.points li em { color: var(--red); font-style: normal; font-weight: 700; }
.split-5-5 .col-text .title .hl { white-space: nowrap; }
.nowrap { white-space: nowrap; }
.brand-wall { margin-top: 2.4vh; font-size: .85vw; color: #8a7c73; letter-spacing: .04em; }

/* ---------- 透明交付三栏 ---------- */
.trans-col { text-align: center; }
.trans-col .ph { height: 30vh; margin-bottom: 1.2vh; }
.trans-col .ph { overflow: hidden; border: none; background: #efe9e3; }
.trans-col .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.trans-col .ph.cam { position: relative; }
.live-dot {
  position: absolute; top: .9vh; left: .9vh; z-index: 2;
  background: var(--red); color: #fff; font-size: .6vw; font-weight: 700;
  letter-spacing: .08em; padding: .3vh .55vw; border-radius: 3px;
}
.trans-col h3 { font-size: 1.05vw; margin-bottom: .5vh; }
.trans-col p { font-size: .8vw; color: #7a6c63; }

/* ---------- 设计师 / 团队 ---------- */
.team-layout {
  display: grid; grid-template-columns: 30% 1fr; gap: 3%;
  height: 74%; margin-top: 2%; align-items: stretch;
}
.founder-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--gold); border-radius: 6px; overflow: hidden;
  background: rgba(225,204,175,.1);
}
.founder-photo { width: 100%; height: 58%; object-fit: cover; object-position: top center; }
.founder-card figcaption { padding: 1.6vh 1.2vw; text-align: center; }
.founder-card b { display: block; font-size: 1.4vw; color: var(--ink); }
.founder-card span { display: block; font-size: .78vw; color: var(--red); margin: .5vh 0 1vh; letter-spacing: .04em; }
.founder-card em { display: block; font-style: normal; font-size: .9vw; color: var(--ink); line-height: 1.6; }
.founder-card p { font-size: .74vw; color: #7a6c63; margin-top: 1vh; }

.member-grid { display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(2,1fr); gap: 1.1vw; }
.member {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; background: #e6dfda; border-radius: 6px; padding: 1.6vh 1vw;
}
.member img {
  width: 6.4vw; height: 6.4vw; border-radius: 50%; object-fit: cover;
  object-position: top center; border: 2px solid var(--gold); margin-bottom: 1vh;
}
.member b { font-size: 1vw; color: var(--ink); }
.member span { font-size: .72vw; color: #7a6c63; margin-top: .4vh; letter-spacing: .03em; }

/* ---------- 施工团队 · 工匠公告墙 ---------- */
.craft-wall {
  display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr);
  gap: 1.1vw; height: 74%; margin-top: 2%;
}
.cw-card {
  position: relative; display: flex; flex-direction: column; justify-content: center;
  background: #ece5de; border: 1px solid var(--gold-line); border-radius: 6px;
  padding: 1.8vh 1.3vw; overflow: hidden;
}
.cw-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--gold);
}
.cw-lg { grid-column: 1 / 3; grid-row: 1 / 3; }
.cw-wide { grid-column: 3 / 5; grid-row: 1 / 2; }
.cw-concept { grid-column: 3 / 5; grid-row: 3 / 4; }
.cw-trade {
  display: inline-block; align-self: flex-start;
  font-size: .64vw; letter-spacing: .06em; color: #fff; background: var(--red);
  padding: .3vh .7vw; border-radius: 10px; margin-bottom: .9vh;
}
.cw-name { font-family: var(--serif); font-size: 1.2vw; color: var(--ink); font-weight: 700; }
.cw-lg .cw-name { font-size: 2vw; }
.cw-case { font-size: .7vw; color: var(--red); margin-top: .8vh; letter-spacing: .02em; }
.cw-quote { font-style: normal; font-size: .74vw; color: #6b5d55; line-height: 1.65; margin-top: .9vh; }
.cw-lg .cw-quote { font-size: .92vw; }
.cw-tag {
  align-self: flex-start; margin-top: 1.2vh;
  font-size: .64vw; letter-spacing: .1em; color: var(--red);
  border: 1px solid var(--red); padding: .3vh .7vw; border-radius: 3px;
}
.cw-concept {
  align-items: center; justify-content: center; text-align: center;
  background: linear-gradient(150deg, var(--red) 0%, #7a1a1f 100%);
  border: none; color: var(--gold);
}
.cw-concept::before { display: none; }
.cw-c-title { font-family: var(--serif); font-size: 1.15vw; font-weight: 700; line-height: 1.4; letter-spacing: .06em; }
.cw-c-sub { font-size: .68vw; line-height: 1.7; margin-top: 1vh; letter-spacing: .04em; opacity: .9; }

/* ---------- 荣誉 ---------- */
.honor-grid {
  display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(2,1fr);
  gap: 1.4vw; height: 72%; margin-top: 2.4%;
}
.honor-item {
  border: 1px solid var(--gold-line); border-radius: 4px; overflow: hidden;
  background: #efe9e3; display: flex; align-items: center; justify-content: center;
}
.honor-item img { width: 100%; height: 100%; object-fit: cover; }
.brands-slot { font-size: .8vw; }

/* ---------- 合作品牌 ---------- */
.brand-grid {
  display: grid; grid-template-columns: repeat(4,1fr); grid-template-rows: repeat(3,1fr);
  gap: 1.2vw; height: 60%; margin-top: 2%;
}
.brand-grid .ph { height: 100%; font-size: .8vw; letter-spacing: .08em; }
.brand-grid .brand-logo {
  height: 100%; border-radius: 4px; overflow: hidden;
  background: #fff; border: 1px solid rgba(36,25,23,.08);
  display: flex; align-items: center; justify-content: center;
  padding: 0.4vh 0.4vw;
}
.brand-grid .brand-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }

/* ==========================================================
   P23 价值观 (红底)
   ========================================================== */
.values .canvas { display: flex; flex-direction: column; justify-content: center; }
.values-title {
  font-family: var(--serif); font-weight: 700; font-size: 2.6vw;
  color: var(--gold); text-align: center; margin-bottom: 4vh;
}
.values-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3vh 5%; max-width: 70%; margin: 0 auto; }
.value { border-left: 2px solid var(--gold); padding-left: 1.6vw; }
.value h3 { color: var(--gold); font-family: var(--serif); font-size: 1.3vw; margin-bottom: .8vh; }
.value p { color: #f0e6da; font-size: .92vw; line-height: 1.7; font-weight: 300; }

/* ==========================================================
   P24 承诺
   ========================================================== */
.promises { display: grid; grid-template-columns: repeat(3,1fr); gap: 4%; margin-top: 4%; }
.seal {
  aspect-ratio: 1; border-radius: 50%; border: 3px double var(--gold);
  background: var(--red); color: var(--ivory);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 2vh; margin: 0 auto; width: 78%;
}
.seal b { font-family: var(--serif); font-size: 1.4vw; line-height: 1.35; }
.seal span { font-size: .78vw; color: var(--gold); margin-top: 1.2vh; }

/* ---------- 保障 / 售后 ---------- */
.guard-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 1.4%; margin: 3% 0; }
.guard, .after-item {
  position: relative; display: flex; align-items: center; gap: .55vw;
  text-align: left; padding: 2.6vh .85vw;
  background: linear-gradient(180deg, rgba(225,204,175,.22), rgba(225,204,175,.07));
  border: 1px solid var(--gold-line); border-left: 3px solid var(--gold);
  border-radius: 5px; font-size: .9vw; color: var(--ink); line-height: 1.35;
}
.guard::before, .after-item::before {
  content: "\2713"; flex: none;
  width: 1.5vw; height: 1.5vw; border-radius: 50%;
  background: var(--red); color: var(--gold);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .78vw; font-weight: 700;
}
.after { margin-top: 2%; }

/* ==========================================================
   P27 CTA
   ========================================================== */
.cta-logo { height: 8vh; margin-bottom: 3vh; }
.cta-title { font-family: var(--serif); font-weight: 700; font-size: 3vw; color: var(--gold); }
.cta-sub { color: #f3ede2; font-size: 1.1vw; margin-top: 1vh; letter-spacing: .1em; }
.cta-btns { display: flex; gap: 2vw; margin: 4vh 0 3vh; }
.btn {
  border: 1px solid var(--gold); color: var(--gold);
  padding: 1.4vh 2.4vw; border-radius: 2px; font-size: 1vw; letter-spacing: .06em;
}
.cta-contact { color: rgba(243,237,226,.85); font-size: .85vw; letter-spacing: .05em; }
.qrcode { width: 17vh; height: 17vh; margin-top: 3vh; }
.qrcode img { width: 100%; height: 100%; object-fit: contain; background: #fff; border-radius: 4px; padding: .4vh; }

/* ==========================================================
   占位符样式
   ========================================================== */
.ph {
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,.03) 0 10px, transparent 10px 20px),
    #d9d1ca;
  border: 1px dashed #b3a79d;
  display: flex; align-items: center; justify-content: center;
  color: #8a7c70; font-size: .9vw; letter-spacing: .05em; text-align: center;
  position: relative;
}
.slide.red .ph { background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 10px, transparent 10px 20px),
    rgba(0,0,0,.18);
  border-color: rgba(225,204,175,.4); color: rgba(225,204,175,.8); }
.ph::after {
  content: attr(data-src);
  position: absolute; bottom: .6vh; left: 50%; transform: translateX(-50%);
  font-size: .62vw; color: #a99c90; white-space: nowrap;
  max-width: 92%; overflow: hidden; text-overflow: ellipsis;
}
.ph-text { color: #a08d6f !important; }
.ph-inline { color: var(--red); background: rgba(156,31,37,.08); padding: 0 .3em; border-radius: 2px; }
.slide.red .ph-inline { color: var(--gold); background: rgba(225,204,175,.14); }

/* ==========================================================
   HUD 控制
   ========================================================== */
.hud {
  display: none;
  position: fixed; bottom: 2.4vh; left: 50%; transform: translateX(-50%);
  align-items: center; gap: 1.4vw; z-index: 50;
  background: rgba(36,25,23,.55); backdrop-filter: blur(6px);
  padding: .8vh 1.4vw; border-radius: 40px; color: var(--ivory);
}
.hud button {
  background: none; border: none; color: var(--gold); cursor: pointer;
  font-size: 1.6vw; line-height: 1; padding: 0 .4vw;
}
.hud button:hover { color: #fff; }
#counter { display: none; }

.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: rgba(0,0,0,.15); z-index: 50; }
#bar { height: 100%; width: 0; background: var(--gold); transition: width .5s ease; }

.act-label {
  position: fixed; top: 2vh; left: 3vw; z-index: 50;
  font-size: .75vw; letter-spacing: .2em; color: rgba(225,204,175,.85);
  background: rgba(36,25,23,.4); padding: .5vh 1vw; border-radius: 20px;
}

/* ==========================================================
   进入动画（Apple 式逐项揭示）
   .reveal 单元素（可用 --i 控制次序）；.stagger 容器自动错峰
   ========================================================== */
.reveal {
  opacity: 0; transform: translateY(30px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2,.75,.25,1);
  transition-delay: calc(var(--i, 0) * .09s);
}
.slide.is-active .reveal { opacity: 1; transform: none; }

.stagger > * {
  opacity: 0; transform: translateY(30px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2,.75,.25,1);
}
.slide.is-active .stagger > * { opacity: 1; transform: none; }
.slide.is-active .stagger > *:nth-child(1)  { transition-delay: .06s; }
.slide.is-active .stagger > *:nth-child(2)  { transition-delay: .15s; }
.slide.is-active .stagger > *:nth-child(3)  { transition-delay: .24s; }
.slide.is-active .stagger > *:nth-child(4)  { transition-delay: .33s; }
.slide.is-active .stagger > *:nth-child(5)  { transition-delay: .42s; }
.slide.is-active .stagger > *:nth-child(6)  { transition-delay: .51s; }
.slide.is-active .stagger > *:nth-child(7)  { transition-delay: .60s; }
.slide.is-active .stagger > *:nth-child(8)  { transition-delay: .69s; }
.slide.is-active .stagger > *:nth-child(9)  { transition-delay: .78s; }
.slide.is-active .stagger > *:nth-child(10) { transition-delay: .87s; }
.slide.is-active .stagger > *:nth-child(11) { transition-delay: .96s; }
.slide.is-active .stagger > *:nth-child(12) { transition-delay: 1.05s; }

/* 数字/印章类：带轻微缩放的弹入 */
.pop { transform: translateY(24px) scale(.86); }
.slide.is-active .pop { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .stagger > *, .pop { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ==========================================================
   内容页垂直居中（填满页面中部，避免下方留白）
   ========================================================== */
.canvas.mid {
  display: flex; flex-direction: column; justify-content: center;
}
.canvas.mid .head { margin-bottom: 4%; }

/* ==========================================================
   P3 品牌宣言（重构：主句 + 副说明）
   ========================================================== */
.decl-line { position: relative; padding-bottom: 1.4vh; }
.decl-line span {
  font-family: var(--serif); font-weight: 700; font-size: 2.6vw;
  color: var(--ink); display: block; line-height: 1.2;
}
.decl-line span::before {
  content: ""; position: absolute; left: 0; top: .55vh;
  width: 3px; height: 2vw; background: var(--gold); border-radius: 2px;
}
.decl-line { padding-left: 2.8vw; }
.decl-line em {
  display: block; font-style: normal; font-size: .95vw;
  color: #7a6c63; margin-top: .8vh; letter-spacing: .02em;
}

/* ==========================================================
   P8 对比页强化 + 总结带
   ========================================================== */
.compare-col.dim li { color: #9a8c83; }
.summary-band {
  margin-top: 3.4vh; text-align: center;
  background: linear-gradient(90deg, rgba(156,31,37,.06), rgba(156,31,37,.14), rgba(156,31,37,.06));
  border-top: 1px solid var(--gold-line); border-bottom: 1px solid var(--gold-line);
  padding: 2vh 2vw;
}
.summary-band b { font-family: var(--serif); font-size: 1.35vw; color: var(--red); }
.summary-band span { display: block; font-size: .88vw; color: #6b5d55; margin-top: .8vh; }

/* ==========================================================
   P10 数字页（重构：数字 + 佐证图 + 融合足迹带）
   ========================================================== */
.numbers-page .stats { grid-template-columns: repeat(5,1fr); margin-top: 3%; gap: 1.4%; }
.numbers-page .stat { padding: 0 .6vw; }
.stat-ev {
  height: 18vh; margin-top: 1.6vh; border-radius: 4px; font-size: .68vw;
}
.footprint {
  margin-top: 3.2vh; padding-top: 2.4vh; border-top: 1px solid var(--gold-line);
  display: grid; grid-template-columns: 30% 1fr; gap: 2%; align-items: center;
}
.footprint-cap { text-align: left; }
.footprint-cap h3 { font-size: 1.2vw; color: var(--ink); margin: .4vh 0; }
.footprint-cap p { font-size: .82vw; color: #6b5d55; }
.footprint-cap p b { color: var(--red); }
.city-chips { list-style: none; display: flex; flex-wrap: wrap; gap: .8vh 1.2vw; }
.city-chips li { display: flex; align-items: center; font-size: .9vw; color: var(--ink); }
.city-chips .dot { width: .7vw; height: .7vw; border-radius: 50%; background: var(--gold); margin-right: .5vw; }
.city-chips .dot.hq { background: var(--red); box-shadow: 0 0 0 4px rgba(156,31,37,.12); }
.city-chips small { color: var(--red); margin-left: .3vw; font-size: .68vw; }

/* P10 上移 + 放大证据图 + 竖向图例 + 地图 */
.numbers-page .canvas.mid { justify-content: flex-start; padding-top: 5%; }
.numbers-page .canvas.mid .head { margin-bottom: 2.4vh; }
.city-chips.vertical { flex-direction: column; align-items: flex-start; gap: 1.2vh; margin-top: 1.8vh; }
.numbers-page .geo-map { height: 30vh; justify-self: start; }

/* ==========================================================
   P11 代表作品（统一间隔 + 图注）
   ========================================================== */
.grid-6 { gap: 1.1vw; }
.tile { position: relative; overflow: hidden; }
.tile-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(0deg, rgba(36,25,23,.82), rgba(36,25,23,0));
  color: var(--ivory); font-size: .82vw; letter-spacing: .04em;
  padding: 2.4vh .9vw .9vh; text-align: left;
}

/* ==========================================================
   P16 模块（编号强化）
   ========================================================== */
.module { position: relative; border-top: 2px solid var(--gold-line); padding-top: 2.2vh; }
.module .mod-no {
  font-family: var(--serif); font-weight: 700; font-size: 1.5vw;
  color: var(--red); opacity: .85; display: block; margin-bottom: .8vh;
}

/* ==========================================================
   P17 时间轴连接线
   ========================================================== */
.timeline { position: relative; }
.timeline .step {
  background: #e6dfda; border-radius: 4px; padding: 1.6vh 1vw 1.6vh 2.6vw;
  border-left: 3px solid var(--gold);
}

/* ==========================================================
   P24 承诺卡（替代圆圈）
   ========================================================== */
.promises { display: grid; grid-template-columns: repeat(3,1fr); gap: 3%; margin-top: 5%; }
.promise {
  position: relative; overflow: hidden; text-align: center;
  background: linear-gradient(180deg, rgba(225,204,175,.22), rgba(225,204,175,.07));
  border: 1px solid var(--gold-line); border-top: 3px solid var(--gold);
  border-radius: 8px; padding: 5vh 2vw 4vh; color: var(--ink);
}
.promise .p-no {
  font-family: var(--serif); font-weight: 700; font-size: 2.6vw;
  color: var(--red); display: block; line-height: 1; margin-bottom: 1.6vh;
}
.promise b { font-family: var(--serif); font-size: 1.4vw; display: block; line-height: 1.3; color: var(--ink); }
.promise p { font-size: .85vw; color: #7a6c63; margin-top: 1.4vh; line-height: 1.6; }

/* ==========================================================
   P25 保障/售后 分区标题
   ========================================================== */
.section-k {
  font-family: var(--serif); font-size: 1.1vw; color: var(--red);
  letter-spacing: .06em; margin: 2.4vh 0 1.4vh; display: flex; align-items: center; gap: .8vw;
}
.section-k::after { content: ""; flex: 1; height: 1px; background: var(--gold-line); }

/* ==========================================================
   P17-A/B/C 客户旅程案例（李先生一家的 186 天）
   ========================================================== */

/* 案例主角画像（开场红底页） */
.persona {
  display: flex; justify-content: center; flex-wrap: wrap;
  margin-top: 4vh;
}
.persona .p-item {
  padding: 0 1.9vw; text-align: left;
  border-left: 1px solid rgba(225,204,175,.3);
}
.persona .p-item:first-child { border-left: none; }
.persona .p-k {
  display: block; font-size: .68vw; letter-spacing: .14em;
  color: var(--gold); margin-bottom: .8vh;
}
.persona .p-v {
  display: block; font-size: .92vw; color: var(--ivory); font-weight: 500;
  white-space: nowrap;
}
.persona-worry {
  margin-top: 3.2vh; font-size: .92vw; color: rgba(239,233,233,.82);
}
.persona-worry b { color: var(--gold); font-weight: 500; }

/* 意向锚点小标 */
.anchor-tag {
  display: inline-block; font-size: .72vw; letter-spacing: .1em;
  color: var(--red); background: rgba(156,31,37,.08);
  border: 1px solid var(--gold-line); border-radius: 20px;
  padding: .5vh 1.1vw; margin-bottom: 1.4vh;
}

/* 横向 8 步时间轴 */
.journey { margin-top: 2.4%; }
.j-track {
  display: grid; grid-template-columns: repeat(8, 1fr);
  position: relative;
}
.j-track::before {
  content: ""; position: absolute; left: 6%; right: 6%; top: .62vw;
  height: 2px; background: var(--gold-line); z-index: 0;
}
.j-step { text-align: center; padding: 0 .45vw; position: relative; }
.j-dot {
  width: 1.25vw; height: 1.25vw; border-radius: 50%;
  background: var(--gold); border: 2px solid var(--ivory);
  margin: 0 auto; position: relative; z-index: 2;
  box-shadow: 0 0 0 3px rgba(225,204,175,.25);
}
.j-step.key .j-dot { background: var(--red); box-shadow: 0 0 0 3px rgba(156,31,37,.16); }
.j-step.run .j-dot { background: var(--gold); box-shadow: 0 0 0 3px rgba(225,204,175,.25); }
.j-role {
  display: inline-block; font-size: .56vw; letter-spacing: .08em;
  margin-top: .9vh; padding: .2vh .55vw; border-radius: 10px; line-height: 1.4;
}
.j-step.key .j-role { color: #fff; background: var(--red); }
.j-step.run .j-role { color: #7a6c63; background: rgba(0,0,0,.06); }
.j-legend { display: flex; justify-content: center; gap: 2.4vw; margin-top: 1.6vh; }
.j-legend .lg { display: flex; align-items: center; gap: .5vw; font-size: .72vw; color: #6b5d55; }
.j-legend .lg i { width: .8vw; height: .8vw; border-radius: 50%; flex: none; }
.j-legend .lg.key i { background: var(--red); }
.j-legend .lg.run i { background: var(--gold); }
.j-day {
  color: var(--red); font-size: .62vw; font-weight: 700;
  letter-spacing: .03em; margin-top: 1vh;
}
.j-name { font-size: .8vw; color: var(--ink); font-weight: 700; margin: .5vh 0 .5vh; line-height: 1.3; }
.j-get { font-size: .62vw; color: #7a6c63; line-height: 1.55; }

/* 过程实拍 filmstrip */
.j-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1%; margin-top: 3.4%; }
.j-shot { position: relative; height: 23vh; border-radius: 4px; overflow: hidden; background: #e6dfda; }
.j-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.j-shot .cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(0deg, rgba(36,25,23,.82), rgba(36,25,23,0));
  color: var(--ivory); font-size: .62vw; letter-spacing: .04em;
  padding: 2vh .6vw .6vh; text-align: left;
}
.j-hero-line {
  text-align: center; margin-top: 3vh;
  font-family: var(--serif); font-size: 1.4vw; color: var(--red); font-weight: 700;
}

/* 双栏价值（中途获得 vs 最终获得） */
.journey-value { display: grid; grid-template-columns: 1fr 1fr; gap: 3%; margin-top: 2.4%; align-items: stretch; }
.jv-col { border-radius: 8px; padding: 3vh 1.8vw; }
.jv-col.mid-col { background: #e6dfda; border-top: 3px solid var(--gold); }
.jv-col.final-col { background: var(--red); color: var(--ivory); border-top: 3px solid var(--gold); }
.jv-h { font-family: var(--serif); font-size: 1.3vw; margin-bottom: 1.8vh; }
.jv-col.mid-col .jv-h { color: var(--ink); }
.jv-col.final-col .jv-h { color: var(--gold); }
.jv-list { list-style: none; }
.jv-list li { padding: 1.3vh 0; font-size: .82vw; border-bottom: 1px dashed rgba(0,0,0,.1); line-height: 1.5; }
.jv-col.final-col .jv-list li { border-bottom-color: rgba(255,255,255,.16); color: rgba(239,233,233,.9); }
.jv-list li b { display: block; font-size: .95vw; margin-bottom: .3vh; }
.jv-col.mid-col .jv-list li b { color: var(--red); }
.jv-col.final-col .jv-list li b { color: var(--gold); }
.jv-proof { display: grid; grid-template-columns: 1fr 1fr; gap: 4%; margin-top: 2vh; }
.jv-proof figure { position: relative; height: 14vh; border-radius: 4px; overflow: hidden; background: rgba(0,0,0,.2); }
.jv-proof img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jv-proof figcaption {
  position: absolute; top: .8vh; left: .8vh;
  background: rgba(36,25,23,.72); color: var(--gold);
  font-size: .62vw; padding: .3vh .6vw; letter-spacing: .06em;
}

/* ==========================================================
   P5 理念页 · 引入标题（衔接上一页）
   ========================================================== */
.manifesto-head { margin-bottom: 4vh; }
.manifesto .canvas.center { justify-content: center; }

/* ==========================================================
   数字页 · iPod 唱片翻页（Cover Flow）
   ========================================================== */
.cf-page .canvas.mid { justify-content: center; }
.coverflow {
  position: relative; height: 52vh; margin-top: 3vh;
  display: flex; align-items: center; justify-content: center;
  perspective: 1600px;
}
.cf-card {
  position: absolute; top: 50%; left: 50%;
  width: 24vw; height: 46vh; margin: -23vh 0 0 -12vw;
  border: none; padding: 0; cursor: pointer; background: transparent;
  display: flex; flex-direction: column;
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.2,.7,.2,1), opacity .55s;
  transform:
    translateX(calc(var(--off, 0) * 13vw))
    rotateY(calc(var(--off, 0) * -32deg))
    scale(.62);
  opacity: .5; will-change: transform;
}
.cf-card.is-active {
  transform: translateX(0) rotateY(0) scale(1);
  opacity: 1; cursor: default;
}
.cf-cap { text-align: center; margin-bottom: 1.4vh; }
.cf-num {
  display: block; font-family: var(--serif); font-weight: 700;
  font-size: 2.8vw; color: var(--red); line-height: 1;
}
.cf-label {
  display: block; font-size: .9vw; letter-spacing: .1em;
  color: #6b5d55; margin-top: .5vh;
}
.cf-media {
  flex: 1; min-height: 0; border-radius: 8px; overflow: hidden;
  box-shadow: 0 1.2vw 3vw rgba(36,25,23,.28);
  display: flex; align-items: center; justify-content: center;
  font-size: .8vw; transition: box-shadow .55s; background: #e6dfda;
}
.cf-media img { width: 100%; height: 100%; object-fit: cover; }
.cf-cloud {
  width: 100%; height: 100%;
  display: grid; gap: 2.5%;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}
.cf-cloud img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; display: block; }
.cf-cloud .cc-a { grid-column: 1 / 3; grid-row: 1 / 3; }
.cf-cloud .cc-b { grid-column: 3 / 4; grid-row: 1 / 2; }
.cf-cloud .cc-c { grid-column: 3 / 4; grid-row: 2 / 3; }
.cf-cloud .cc-d { grid-column: 1 / 2; grid-row: 3 / 4; }
.cf-cloud .cc-e { grid-column: 2 / 3; grid-row: 3 / 4; }
.cf-cloud .cc-f { grid-column: 3 / 4; grid-row: 3 / 4; }
.cf-cloud-4 {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
.cf-cloud-4 img { grid-column: auto; grid-row: auto; object-fit: cover; object-position: top; }
.cf-card.is-active .cf-media { box-shadow: 0 2vw 4.6vw rgba(36,25,23,.4); }

/* 全部展示：铺开所有数字与图 */
.coverflow.cf-showall { perspective: none; gap: 1.4vw; }
.coverflow.cf-showall .cf-card {
  position: relative; top: auto; left: auto; margin: 0;
  width: auto; height: 42vh; flex: 1 1 0;
  transform: none !important; opacity: 1 !important; pointer-events: none;
}
.coverflow.cf-showall .cf-num { font-size: 1.8vw; }
.coverflow.cf-showall .cf-label { font-size: .72vw; }
.cf-dots { display: flex; justify-content: center; gap: .9vw; margin-top: 3.2vh; }
.cf-dots button {
  width: .8vw; height: .8vw; border-radius: 50%; border: none; padding: 0;
  background: var(--gold-line); cursor: pointer; transition: transform .3s, background .3s;
}
.cf-dots button.on { background: var(--red); transform: scale(1.35); }
.cf-hint { text-align: center; margin-top: 1.8vh; font-size: .78vw; color: #9a8c83; }

/* ==========================================================
   服务足迹 · 独立页
   ========================================================== */
.footprint-page .footprint {
  border-top: none; margin-top: 3vh; padding-top: 0;
  grid-template-columns: 26% 1fr; gap: 4%; align-items: center;
}
.footprint-page .footprint-cap { text-align: center; padding-left: 3vw; }
.footprint-page .footprint-cap h3 { font-size: 1.5vw; }
.footprint-page .footprint-cap p { font-size: .95vw; margin-top: 1vh; }
.footprint-page .city-chips.vertical { align-items: center; gap: 1.6vh; margin-top: 2.4vh; }
.footprint-page .city-chips li { font-size: 1.05vw; }
.footprint-page .geo-map { height: 52vh; width: 100%; }

/* ==========================================================
   焦点序列动画（模块 / 十二步 / 标准化施工）
   逐个放大高亮，其余变灰缩后。规则带 .slide.is-active 前缀，
   与 .stagger 同权重且置于其后，从而覆盖 transform:none。
   ========================================================== */
.focus-seq > * {
  transition: transform .4s cubic-bezier(.2,.7,.2,1), opacity .4s ease, box-shadow .4s ease;
  position: relative; cursor: pointer; will-change: transform, opacity;
}
.slide.is-active .focus-seq > * {
  transform: scale(.9); filter: grayscale(.85); opacity: .5; z-index: 1;
  transition-delay: 0s;
}
.slide.is-active .focus-seq > *.is-focus {
  transform: scale(1.08); filter: none; opacity: 1; z-index: 5;
  box-shadow: 0 1vw 2.6vw rgba(36,25,23,.16);
}
/* 十二步：更小的缩放幅度 + 更快过渡，切换更顺滑不卡顿 */
.slide.is-active .focus-seq.timeline > * { transform: scale(.97); transition-duration: .22s; }
.slide.is-active .focus-seq.timeline > *.is-focus {
  transform: scale(1.09); box-shadow: 0 .5vw 1.4vw rgba(36,25,23,.14);
}
/* 标准化施工：图片块放大时更大一点 */
.slide.is-active .focus-seq > .stage-card.is-focus { transform: scale(1.24); }
/* 全部展示：解除灰缩，所有块恢复清晰 */
.slide.is-active .focus-seq.seq-all > * {
  transform: none; filter: none; opacity: 1; box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
  .slide.is-active .focus-seq > * { transform: none !important; filter: none !important; opacity: 1 !important; }
  .cf-card { transition: none !important; }
}

/* ==========================================================
   代表作品 · 五页项目图集 + 翻书翻页效果
   ========================================================== */
.work-grid { margin-top: 3vh; height: 76%; }
.work-grid .tile {
  border-radius: 4px; background: #e6dfda;
  box-shadow: 0 .5vw 1.4vw rgba(36,25,23,.12);
}
.work-grid .tile img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* 翻书：整页以左侧书脊柔和翻入，像真的翻过一页那样落下 */
.book-slide { perspective: 3200px; perspective-origin: 10% 50%; }
.book-slide .canvas {
  transform-origin: left center;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}
.book-slide.is-active .canvas {
  animation: pageTurn 1.3s cubic-bezier(.16,.84,.3,1) both;
}
@keyframes pageTurn {
  0%   { transform: rotateY(-72deg); opacity: 0; }
  28%  { opacity: 1; }
  100% { transform: rotateY(0deg); opacity: 1; }
}
/* 翻页时纸张弧度的柔和阴影，自书脊向外扫过后散去 */
.book-slide .canvas::after {
  content: ''; position: absolute; inset: 0; z-index: 40; pointer-events: none;
  background: linear-gradient(100deg,
    rgba(36,25,23,.34) 0%,
    rgba(36,25,23,.12) 20%,
    rgba(36,25,23,0) 44%);
  opacity: 0;
}
.book-slide.is-active .canvas::after {
  animation: pageShade 1.3s cubic-bezier(.16,.84,.3,1) both;
}
@keyframes pageShade {
  0%   { opacity: .95; }
  55%  { opacity: .4; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .book-slide.is-active .canvas,
  .book-slide.is-active .canvas::after { animation: none; opacity: 1; }
}