@charset "utf-8";
/* ============================================================
   主角 · 南洋体验坊 — Zhu Jue My
   配色取自品牌 logo（叶绿 #72B043）与娘惹瓷砖（墨绿 #3A5729 / 瓷砖米 #F7ECD6）
   点缀色取自实拍绣花：牡丹粉 / 灯笼红 / 古金
   ============================================================ */

/* 自托管、子集化的标题字体 —— 只含 display 元素真正用到的 95 个汉字 + 基本拉丁，
   两个字重合计 63KB（Google Fonts 供同样两族需约 2500KB）。
   正文不用 web font：系统中文字体（PingFang SC / Microsoft YaHei）本身质量很好，
   而中文正文字重动辄上百 KB，不值得让首屏等它。
   南洋老招牌的气质全在标题的宋体上 —— 只为它付流量。

   ⚠ 改了标题/品名文案就必须重跑子集脚本 build_fonts3.py，
   否则新字会静默掉回系统宋体 —— 两个都是宋体，肉眼极难发现。
   URL 带内容哈希：档名不变的话浏览器会一直吃旧子集。 */
@font-face {
  font-family: "Noto Serif SC"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("../font/NotoSerifSC-Bold.woff2?v=b9362ef2") format("woff2");
}
@font-face {
  font-family: "Noto Serif SC"; font-style: normal; font-weight: 900;
  font-display: swap; src: url("../font/NotoSerifSC-Black.woff2?v=4a855c22") format("woff2");
}

/* 弹簧缓动 —— 由阻尼弹簧位移解 x(t)=1-e^(-ζω₀t)(cos ω_d t + ζω₀/ω_d · sin ω_d t)
   直接取样生成，非取自任何第三方代码。参数即物理量（劲度/阻尼）。
   linear() 支援：Chrome 113+ / Safari 17.2+ / Firefox 112+；旧浏览器自动回退成 ease。 */
:root {
  --spring-snap: linear(0, 0.0211, 0.0764, 0.1551, 0.2482, 0.3483, 0.4496, 0.5478, 0.6396, 0.723, 0.7967, 0.8602, 0.9134, 0.9568, 0.9911, 1.0172, 1.0361, 1.0487, 1.0563, 1.0597, 1.0598, 1.0575, 1.0535, 1.0483, 1.0424, 1.0363, 1.0303, 1.0246, 1.0193, 1.0145, 1.0104, 1.0068, 1.0039, 1.0016, 0.9997, 0.9984, 0.9974, 0.9968, 0.9965, 0.9964, 0.9965, 0.9966, 0.9969, 0.9973, 0.9976, 0.998, 0.9983, 0.9987, 1);
  --spring-snap-t: 531ms;
  --spring: linear(0, 0.0144, 0.0522, 0.1065, 0.1718, 0.2434, 0.3179, 0.3924, 0.465, 0.5341, 0.5987, 0.6581, 0.7121, 0.7604, 0.8032, 0.8408, 0.8732, 0.9011, 0.9247, 0.9444, 0.9608, 0.9741, 0.9848, 0.9933, 0.9998, 1.0047, 1.0082, 1.0106, 1.0122, 1.013, 1.0132, 1.0131, 1.0126, 1.0119, 1.011, 1.0101, 1.0091, 1.0081, 1.0071, 1.0062, 1.0054, 1.0046, 1.0038, 1.0032, 1.0026, 1.0021, 1.0017, 1.0013, 1);
  --spring-t: 576ms;
  --spring-soft: linear(0, 0.0095, 0.0345, 0.0707, 0.1146, 0.1636, 0.2154, 0.2684, 0.3214, 0.3734, 0.4237, 0.4719, 0.5175, 0.5605, 0.6006, 0.638, 0.6725, 0.7043, 0.7335, 0.7602, 0.7846, 0.8068, 0.8269, 0.8451, 0.8615, 0.8764, 0.8898, 0.9018, 0.9126, 0.9222, 0.9309, 0.9386, 0.9455, 0.9517, 0.9572, 0.9621, 0.9664, 0.9703, 0.9738, 0.9768, 0.9795, 0.9819, 0.9841, 0.9859, 0.9876, 0.9891, 0.9904, 0.9915, 1);
  --spring-soft-t: 531ms;
}

/* ---------- 1. 令牌 ---------- */
:root {
  /* 地色 */
  --cream:      #F7ECD6;   /* 瓷砖米 — 页面主底 */
  --cream-lt:   #FCF6EA;
  --cream-dp:   #EFE0C4;

  /* 绿 */
  --leaf:       #72B043;   /* 品牌叶绿（取自 logo） */
  --leaf-lt:    #9ED16F;   /* 深地上的可读绿 5.56:1 */
  --tile-green: #3A5729;   /* 瓷砖墨绿 */
  --deep:       #2F4A22;   /* 深绿地 — 米字 8.44:1 */
  --deep-dk:    #24371A;

  /* 墨 */
  --ink:        #22301A;   /* 正文 11.9:1 on cream */
  --ink-soft:   #4A5C3C;   /* 次级正文 6.21:1 */

  /* 点缀（取自实拍） */
  --rose:       #B03A52;   /* 牡丹粉（加深至 5.02:1） */
  --rose-lt:    #E2808F;   /* 绣花原色 — 仅用于深地大字 */
  --red:        #B8301A;   /* 灯笼红 5.16:1 */
  --gold:       #C9A46A;   /* 古金 — 深地 4.24:1 大字 */
  --gold-dk:    #8A6B34;

  /* 字体 —— 2 个家族：标题宋体（自托管子集）+ 正文系统黑体（零流量） */
  --display: "Noto Serif SC", "Songti SC", "Noto Serif CJK SC", "SimSun", serif;
  --body:    -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
             "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;

  /* 尺寸 */
  --header-h: 68px;
  --maxw: 1280px;
  --gut: clamp(20px, 5vw, 56px);

  /* 字阶 */
  --fs-hero:  clamp(2.6rem, 7.2vw, 5.6rem);
  --fs-h2:    clamp(1.9rem, 4vw, 3.2rem);
  --fs-h3:    clamp(1.15rem, 1.9vw, 1.5rem);
  --fs-lead:  clamp(1rem, 1.5vw, 1.18rem);
  --fs-body:  1rem;
  --fs-sm:    .875rem;
  --fs-xs:    .78rem;

  --tile-url: url("../img/tile.svg");
  --tile-dark-url: url("../img/tile-dark.svg");

  --ease: cubic-bezier(.4, 0, .2, 1);
}

@media (min-width: 1025px) { :root { --header-h: 78px; } }

/* ---------- 2. 复位 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: 1.7;
  /* 保险：任何一段都不许横向溢出。
     用 clip 不用 hidden —— hidden 会让 body 的 overflow-y 计算成 auto，
     把 body 变成滚动容器（与 html 争夺滚动），clip 不会。 */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

/* height:auto 必须有 —— 否则 HTML 的 height 属性会成为 presentational hint，
   与 width:100% 一起把尺寸定死，让 CSS 的 aspect-ratio 完全失效。 */
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.2; margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--leaf);
  outline-offset: 3px;
  border-radius: 2px;
}


.skip {
  position: absolute; left: 50%; top: -100px;
  transform: translateX(-50%);
  z-index: 200; padding: 12px 22px;
  background: var(--deep); color: var(--cream);
  border-radius: 0 0 6px 6px;
  transition: top .18s var(--ease);
}
.skip:focus { top: 0; }

/* ---------- 3. 通用件 ---------- */
.wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);   /* 只设左右，绝不用 padding 简写 */
}

.eyebrow {
  font-family: var(--body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--rose);
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 2px;
  background: currentColor;
  flex: none;
}
.eyebrow--onDark { color: var(--gold); }
.eyebrow--center { justify-content: center; }

/* 按钮 —— 白字压叶绿只有 2.62:1，故实心按钮一律深墨字 */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-block: 13px;
  padding-inline: 26px;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .06em;
  border-radius: 2px;
  transition: transform var(--spring-snap-t) var(--spring-snap), background-color .18s var(--ease), color .18s var(--ease);
}
.btn svg { width: 17px; height: 17px; flex: none; }

/* WhatsApp 预约按钮 —— 白底 + WhatsApp 品牌绿图标。
   全站 6 个预约入口统一用它（浮动按钮除外，那个按规范必须是纯绿圆形）。
   为什么这么配：
   · 字用墨色不用 WhatsApp 绿 —— #25D366 压白底只有 1.98:1，当文字直接不合格
   · 描边用瓷砖墨绿 —— 5 个按钮压在深色上，1 个压在米色 CTA 上；
     白底 vs 瓷砖米只有 1.09:1，没描边边界就糊了（墨绿压米 6.96:1 ✓）
   · 图标保留 #25D366：手机筒是镂空的，绿底白筒就是 WhatsApp 本尊的标志 */
.btn--wa {
  background: #fff;
  color: var(--ink);                      /* 13.95:1 ✓ */
  border: 1.5px solid var(--tile-green);
  box-shadow: 0 3px 14px rgba(20, 32, 12, .14);
}
.btn--wa svg { color: #25D366; width: 19px; height: 19px; }  /* 品牌标志，比通用图标大一号 */
.btn--wa:hover {
  background: #25D366;
  color: var(--ink);                      /* 墨字压 WhatsApp 绿 7.03:1 ✓ */
  border-color: #25D366;
  transform: translateY(-2px);
}
.btn--wa:hover svg { color: #fff; }       /* 反白：绿底上变成白气泡镂空绿手机筒 */

.btn--ghost {
  border: 1.5px solid currentColor;
  color: var(--cream);
  background: rgba(247, 236, 214, .06);
}
.btn--ghost:hover { background: var(--cream); color: var(--deep); transform: translateY(-2px); }

.btn--ghostInk { border: 1.5px solid var(--ink); color: var(--ink); }
.btn--ghostInk:hover { background: var(--ink); color: var(--cream); transform: translateY(-2px); }

/* 按下时下沉一点 —— 触觉反馈。放在各 hover 之后，让 :active 盖掉抬起的位移：
   按下去就该「落下」，不该还浮着。弹簧让它弹回来。 */
.btn:active { transform: scale(.965); }
.chip:active { transform: scale(.94); }
.wa-float:active, .bgm-btn:active { transform: scale(.92); }

/* ---------- kinetics: Magnetic Button ----------
   手法照 kinetics：游标相对中心的位移 × 0.35，transform .15s ease-out。
   位移放在外层 .magnet 上，按钮自身的 hover 抬起／按下缩放各走各的，互不覆盖。
   负 margin 抵销 padding，只是把「磁场」撑大一点，不影响版面。
   离开时改用弹簧弹回 —— 比原版的 ease-out 回位更像磁铁松手。 */
.magnet {
  display: inline-block;
  padding: 12px;
  margin: -12px;
  transition: transform .15s ease-out;
  will-change: transform;
}
.magnet.is-back { transition: transform var(--spring-snap-t) var(--spring-snap); }

/* ---------- kinetics: Ripple Feedback ----------
   点击处长出一个圆、放大 3 倍并淡出。颜色换成品牌色。 */
.btn--wa, .chip { position: relative; overflow: hidden; }
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(37, 211, 102, .38);   /* WhatsApp 绿 —— 只是水纹，非文字，不受 AA 约束 */
  transform: scale(0);
  pointer-events: none;
  animation: ripple-out .6s ease-out forwards;
}
.chip .ripple { background: rgba(47, 74, 34, .22); }
@keyframes ripple-out {
  to { transform: scale(3); opacity: 0; }
}

/* 待客户提供的实料 —— 明确标出来，不用假数据充数。
   不用 opacity 压淡：会把对比度压到 AA 以下（Lighthouse 已抓到）。 */
.todo {
  border-bottom: 1px dashed currentColor;
  font-style: italic;
}

/* 瓷砖条 —— 品牌纹样作为结构分隔，而非装饰贴图 */
.tileband {
  height: 26px;
  background: var(--tile-url) repeat-x center / auto 100%;
  border-block: 1.5px solid var(--tile-green);
}


/* ---------- 4. 页头 ---------- */
.hdr {
  position: sticky;
  top: 0;
  z-index: 90;
  height: var(--header-h);
  background: var(--deep);
  border-bottom: 2px solid var(--leaf);
}
.hdr__in {
  height: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.brand { display: flex; align-items: center; gap: 11px; flex: none; }
.brand img { width: 38px; height: 38px; border-radius: 50%; }
.brand__tx { display: flex; flex-direction: column; line-height: 1.15; }
.brand__cn { font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--cream); }
.brand__en { font-size: .58rem; letter-spacing: .28em; color: var(--leaf-lt); }

.nav { display: flex; align-items: center; gap: clamp(16px, 2vw, 30px); }

/* :not(.btn) —— 导航里也放着预约按钮。若让 .nav a 的米色管到按钮上，
   会盖掉 .btn--wa 的墨字（.nav a 0,1,1 > .btn--wa 0,1,0），
   变成米字压白底 1.17:1、几乎看不见。这里从源头排除按钮，不靠层层覆盖。 */
.nav a:not(.btn) {
  position: relative;
  font-size: var(--fs-sm);
  color: var(--cream);
  padding-block: 6px;
  white-space: nowrap;
  transition: color .18s var(--ease);
}
.nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--leaf);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s var(--ease);
}
.nav a:not(.btn):hover { color: var(--leaf-lt); }
.nav a:not(.btn):hover::after,
.nav a:not(.btn)[aria-current="page"]::after { transform: scaleX(1); }
.nav a:not(.btn)[aria-current="page"] { color: var(--leaf-lt); font-weight: 700; }

.hdr__cta { flex: none; }
.nav__cta { display: none; }   /* 仅在移动抽屉里出现 */

.burger {
  display: none;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  color: var(--cream);
}
.burger svg { width: 24px; height: 24px; }

/* ---------- 5. 首屏 hero ---------- */
/* header + hero = 100svh */
.hero {
  position: relative;
  min-height: calc(100svh - var(--header-h));
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--deep-dk);
}
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 62% 38%;   /* 人脸抬到画面中上部，避开底部最重的 scrim；横向偏右让开左侧标题 */
}
/* 深绿 scrim —— 保证叠字 AA 可读 */
.hero__scrim {
  position: absolute;
  inset: 0;
  /* 左侧压够暗托住标题，右侧退开让灯笼的红出来 */
  background:
    linear-gradient(to top, rgba(30,44,20,.92) 0%, rgba(30,44,20,.58) 30%, rgba(30,44,20,.1) 58%, rgba(30,44,20,.3) 100%),
    linear-gradient(to right, rgba(30,44,20,.82) 0%, rgba(30,44,20,.34) 46%, rgba(30,44,20,0) 78%);
}
/* 左右瓷砖轨 —— 首屏就让品牌纹样上场 */
.hero__rail {
  position: absolute;
  top: 0; bottom: 0;
  width: 34px;
  background: var(--tile-url) repeat-y center / 100% auto;
  opacity: .96;
  z-index: 2;
}
.hero__rail--l { left: 0; border-right: 1.5px solid var(--tile-green); }
.hero__rail--r { right: 0; border-left: 1.5px solid var(--tile-green); }

.hero__in {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: calc(var(--gut) + 34px);
  padding-block: clamp(28px, 5vh, 68px);
}
.hero__body { max-width: 40rem; }

.hero h1 {
  font-size: var(--fs-hero);
  font-weight: 900;
  color: var(--cream);
  margin-block: 16px 18px;
  letter-spacing: .01em;
  text-shadow: 0 2px 22px rgba(20, 32, 12, .5);
}
.hero h1 em {
  font-style: normal;
  color: var(--leaf-lt);
  position: relative;
  white-space: nowrap;
}
/* 强调号 —— 中文着重号，不是随手加的下划线 */
.hero h1 em::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -.12em;
  height: 5px;
  background: var(--rose-lt);
  border-radius: 3px;
}
.hero__lead {
  font-size: var(--fs-lead);
  color: var(--cream);
  opacity: .93;
  max-width: 30rem;
  text-shadow: 0 1px 12px rgba(20, 32, 12, .6);
}
.hero__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.hero__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(24px, 4vh, 44px);
  padding-top: 18px;
  border-top: 1px solid rgba(247, 236, 214, .24);
  font-size: var(--fs-xs);
  letter-spacing: .16em;
  color: var(--cream);
  opacity: .8;
}
.hero__meta span { display: flex; align-items: center; gap: 8px; }
.hero__meta svg { width: 14px; height: 14px; color: var(--leaf-lt); }
.hero__meta i { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); flex: none; }

/* ---------- 6. 序 · 不对称叠压 ---------- */
.intro {
  position: relative;
  padding-block: clamp(64px, 9vw, 118px);
  background: var(--cream-lt);
}
.intro__grid {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  gap: clamp(34px, 5vw, 76px);
  align-items: center;
}
/* 左：照片叠在瓷砖块上 */
.intro__fig { position: relative; }
.intro__tile {
  position: absolute;
  left: -18px; top: -22px;
  width: 74%; height: 68%;
  background: var(--tile-url) repeat center / 116px 116px;
  border: 1.5px solid var(--tile-green);
}
.intro__ph {
  position: relative;
  width: 88%;
  margin-left: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border: 8px solid var(--cream-lt);
  box-shadow: 0 22px 52px rgba(35, 55, 26, .26);
}
.intro__cap {
  position: relative;
  margin-top: 14px;
  margin-left: auto;
  width: 88%;
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  letter-spacing: .04em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.intro__cap::before { content: ""; width: 18px; height: 1px; background: var(--rose); flex: none; }

.intro h2 { font-size: var(--fs-h2); margin-block: 18px 20px; color: var(--deep); }
.intro p { font-size: var(--fs-lead); color: var(--ink-soft); max-width: 32rem; }

/* 服务范围条 —— 不编造数字，只列真实品类 */
.scope {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
  padding-top: 30px;
  border-top: 1.5px solid var(--cream-dp);
}
.scope li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-block: 8px;
  padding-inline: 14px;
  background: var(--cream);
  border: 1.5px solid var(--tile-green);
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: .05em;
  color: var(--deep);
}
.scope svg { width: 14px; height: 14px; color: var(--rose); flex: none; }

/* ---------- 7. 两大业务 · 错位叠压 ---------- */
.svc {
  position: relative;
  padding-block: clamp(70px, 10vw, 130px);
  background: var(--deep);
  color: var(--cream);
  overflow: hidden;
}
.svc__bg {
  position: absolute;
  inset: 0;
  background: var(--tile-dark-url) repeat center / 150px 150px;
  opacity: .5;
}
.svc__in { position: relative; z-index: 2; }
.svc__hd { max-width: 34rem; margin-bottom: clamp(38px, 5vw, 62px); }
.svc__hd h2 { font-size: var(--fs-h2); color: var(--cream); margin-top: 16px; }

.svc__stack { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); }
/* 两块刻意错位互压，不是并排卡片 */
.svc__item { position: relative; }
.svc__item--a { grid-column: 1 / 8; grid-row: 1; z-index: 2; }
.svc__item--b { grid-column: 7 / 13; grid-row: 1; margin-top: clamp(60px, 10vw, 140px); z-index: 3; align-self: start; }

.svc__ph {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 6px solid var(--deep);
  box-shadow: 0 26px 60px rgba(10, 20, 6, .5);
}
.svc__item--b .svc__ph { aspect-ratio: 4 / 5; }

.svc__cap {
  position: relative;
  margin-top: -46px;
  margin-left: 26px;
  width: min(28rem, 88%);
  padding: 26px 28px;
  background: var(--cream);
  border-left: 5px solid var(--rose);
  color: var(--ink);
  box-shadow: 0 18px 44px rgba(10, 20, 6, .4);
}
.svc__item--b .svc__cap { border-left-color: var(--leaf); margin-left: 0; margin-right: 26px; }
.svc__no {
  font-family: var(--display);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--rose);
}
.svc__item--b .svc__no { color: var(--gold-dk); }
.svc__cap h3 { font-size: var(--fs-h3); margin-block: 6px 10px; color: var(--deep); }
.svc__cap p { font-size: var(--fs-sm); color: var(--ink-soft); }
.svc__list { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.svc__list li {
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  display: flex; align-items: center; gap: 6px;
}
.svc__list svg { width: 13px; height: 13px; color: var(--leaf); flex: none; }

/* 价目 —— 嵌在瓷砖墙上的米色价牌。挂在「体验」段内，不另起一段。
   原本行底 = 段底 = var(--deep)，同色 1.0:1，等于根本没有面板 —— 客户说「不明显」是对的。
   现在整块翻成米地压在深绿瓷砖墙上：8.44:1，图底关系一秒建立。

   与正上方那两张 .svc__cap 米卡的区分（手机上它是 calc(100%-20px) 近乎通栏，
   光靠「米色面板」会被读成第三张一样的卡）：
   · 上下嵌真瓷砖带 —— svc__cap 一寸纹样都没有，这是最强的区分点，也补上娘惹 DNA
   · 零阴影、实描边 —— svc__cap 是 0 18px 44px 的浮起卡；这块是「嵌进墙里」
   · 价格用 --red —— 全站定义了却一处没用过的颜色，整页唯一的红点就是价钱 */
.rates {
  position: relative;
  margin-top: clamp(46px, 6vw, 84px);
  background: var(--cream);
  border: 2px solid var(--tile-green);
  padding-block: clamp(44px, 5vw, 58px);
  padding-inline: clamp(16px, 3vw, 38px);
}
/* 上下两道真瓷砖带（与全站 .tileband 同一套纹样语言） */
.rates::before, .rates::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 20px;
  background: var(--tile-url) repeat-x center / auto 100%;
}
.rates::before { top: 0; border-bottom: 1.5px solid var(--tile-green); }
.rates::after { bottom: 0; border-top: 1.5px solid var(--tile-green); }

.rates__t {
  font-size: var(--fs-xs);
  font-family: var(--body);
  font-weight: 700;
  letter-spacing: .24em;
  color: var(--tile-green);       /* 6.96:1 —— 原本的 gold 压米只有 4.23，小字不合格 */
  margin-bottom: 14px;
}
.rates__list { display: grid; }
.rates__list li {
  display: grid;
  grid-template-columns: minmax(7rem, 12rem) 1fr auto;
  align-items: baseline;
  gap: 8px 24px;
  padding-block: 18px;
  border-top: 1px solid var(--cream-dp);
}
.rates__list li:first-child { border-top: 0; }
.rates__n { font-family: var(--display); font-weight: 700; font-size: 1.12rem; color: var(--ink); }   /* 11.9:1 */
.rates__d { font-size: var(--fs-xs); color: var(--ink-soft); }                                        /* 6.21:1 */
.rates__p {
  font-family: var(--display);
  font-weight: 900;
  font-size: 2rem;
  color: var(--red);              /* 5.16:1 on cream ✓ 全站唯一的红 */
  line-height: 1;
  white-space: nowrap;
}
.rates__p i { font-style: normal; font-size: .5em; margin-right: 4px; vertical-align: .28em; }
.rates__note { margin-top: 16px; font-size: var(--fs-xs); color: var(--ink-soft); }                   /* 6.21:1 */

@media (max-width: 767px) {
  /* 明确指派格位 —— 只靠自动排版会把价钱挤到说明底下、变成第三行 */
  .rates__list li { grid-template-columns: 1fr auto; gap: 4px 16px; }
  .rates__n { grid-column: 1; grid-row: 1; }
  .rates__p { grid-column: 2; grid-row: 1; font-size: 1.7rem; }
  .rates__d { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------- 8. 衣橱 · 画廊网格 ---------- */
.ward { padding-block: clamp(64px, 9vw, 118px); }
.ward__hd {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.ward__hd h2 { font-size: var(--fs-h2); color: var(--deep); margin-top: 14px; }
.ward__hd p { font-size: var(--fs-sm); color: var(--ink-soft); max-width: 24rem; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.chip {
  padding-block: 8px;
  padding-inline: 16px;
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--deep);
  background: transparent;
  border: 1.5px solid var(--cream-dp);
  border-radius: 2px;
  /* 不用 all —— transform 要走弹簧，颜色仍走快的线性缓动 */
  transition: transform var(--spring-snap-t) var(--spring-snap),
              background-color .18s var(--ease),
              border-color .18s var(--ease),
              color .18s var(--ease);
}
/* ---------- kinetics: Choice Chips ----------
   选中瞬间弹一下（原版 scale(1.12) + cubic-bezier(.34,1.56,.64,1)，照用）。
   .pop 由 JS 挂上、300ms 后摘掉；与 :active 的按下缩放接成「按下→弹出→归位」。 */
.chip.pop {
  transform: scale(1.12);
  transition: transform .3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.chip:hover { border-color: var(--tile-green); }
.chip[aria-pressed="true"] {
  background: var(--deep);
  border-color: var(--deep);
  color: var(--cream);
  font-weight: 700;
}

/* Masonry —— 用 CSS 多栏，不用 JS：
   零脚本（TBT 保持 0）、筛选的 display:none 天然生效、无 JS 也成立。
   每张图按原始比例出，不再 object-fit 硬裁（indian-2 原本纵向被切掉约 20%）。 */
.grid {
  columns: 4;
  column-gap: 18px;
}
/* ---------- kinetics: Shimmer Skeleton ----------
   20 张图都是 loading="lazy"，载入前原本是一块死掉的米色。
   照原版做法：三段渐层 + background-size 280%，横扫过去。配色换成瓷砖米。 */
.tileitem {
  position: relative;
  margin: 0 0 18px;
  overflow: hidden;
  background: linear-gradient(90deg, var(--cream-dp) 0%, var(--cream-lt) 20%, var(--cream-dp) 40%);
  background-size: 280% 100%;
  animation: shimmer 1.5s linear infinite;
  cursor: pointer;
  break-inside: avoid;      /* 不许一张图被拆到两栏 */
  -webkit-column-break-inside: avoid;
}
.tileitem.is-loaded { animation: none; background: var(--cream-dp); }
@keyframes shimmer {
  0%   { background-position: 140% 0; }
  100% { background-position: -140% 0; }
}
.tileitem img {
  width: 100%;
  height: auto;             /* 由 width/height 属性推出真实比例，CLS 仍为 0 */
  transition: transform var(--spring-soft-t) var(--spring-soft);
}
.tileitem:hover img, .tileitem:focus-visible img { transform: scale(1.05); }
.tileitem figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 22px 14px 12px;
  background: linear-gradient(to top, rgba(30,44,20,.9), transparent);
  color: var(--cream);
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .28s var(--ease), transform var(--spring-snap-t) var(--spring-snap);
}
.tileitem:hover figcaption, .tileitem:focus-visible figcaption { opacity: 1; transform: none; }
.tileitem.is-hidden { display: none; }

/* ---------- 9. 分店 · 真·双分屏 ---------- */
.branch { position: relative; }
.branch__hd {
  text-align: center;
  padding-block: clamp(56px, 8vw, 96px) clamp(30px, 4vw, 46px);
  padding-inline: var(--gut);
}
.branch__hd h2 { font-size: var(--fs-h2); color: var(--deep); margin-top: 14px; }
.branch__hd .eyebrow { justify-content: center; }

/* position:relative 必须在 .split 上 —— 否则瓷砖缝的包含块会变成整个 .branch，
   直接从标题上穿过去。 */
.split { position: relative; display: grid; grid-template-columns: 1fr 1fr; }
.split > * { min-width: 0; }

.store { position: relative; overflow: hidden; min-height: clamp(440px, 56vw, 620px); display: flex; }
.store__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--spring-soft-t) var(--spring-soft);
}
.store:hover .store__img { transform: scale(1.04); }
.store__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(28,42,18,.93) 6%, rgba(28,42,18,.62) 44%, rgba(28,42,18,.2) 100%);
}
.store--pg .store__scrim { background: linear-gradient(to top, rgba(28,42,18,.93) 6%, rgba(28,42,18,.6) 44%, rgba(28,42,18,.18) 100%); }
.store--mk .store__scrim { background: linear-gradient(to top, rgba(46,30,16,.93) 6%, rgba(46,30,16,.6) 44%, rgba(46,30,16,.18) 100%); }

.store__in {
  position: relative;
  z-index: 2;
  align-self: flex-end;
  width: 100%;
  padding: clamp(26px, 3.4vw, 44px);
  color: var(--cream);
}
.store__no {
  font-family: var(--display);
  font-size: var(--fs-xs);
  letter-spacing: .24em;
  color: var(--gold);
}
.store h3 {
  font-size: clamp(1.6rem, 2.7vw, 2.3rem);
  color: var(--cream);
  margin-block: 8px 4px;
}
.store__en { font-size: var(--fs-xs); letter-spacing: .2em; color: var(--leaf-lt); }
.store__desc {
  font-size: var(--fs-sm);
  margin-top: 14px;
  opacity: .9;
  max-width: 26rem;
}
.store__facts { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.store__facts li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: var(--fs-xs);
  opacity: .88;
}
.store__facts svg { width: 14px; height: 14px; color: var(--leaf-lt); flex: none; margin-top: 3px; }
.store__acts { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; }

/* 两店之间的瓷砖缝 */
.split__seam {
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 22px;
  transform: translateX(-50%);
  background: var(--tile-url) repeat-y center / 100% auto;
  border-inline: 1.5px solid var(--tile-green);
  z-index: 3;
}

/* ---------- 10. 客群 · 四窄条并列 ---------- */
.who {
  padding-block: clamp(64px, 9vw, 118px);
  background: var(--cream-lt);
}
.who__hd { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-bottom: 34px; }
.who__hd h2 { font-size: var(--fs-h2); color: var(--deep); margin-top: 14px; }
.who__hd p { font-size: var(--fs-sm); color: var(--ink-soft); max-width: 22rem; }

.strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.who__item { display: flex; flex-direction: column; }
.who__ph {
  width: 100%;
  aspect-ratio: 3 / 4.4;
  object-fit: cover;
  filter: saturate(.94);
  transition: filter .3s var(--ease);
}
.who__item:hover .who__ph { filter: saturate(1.1); }
.who__bar {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-block: 14px 10px;
  border-bottom: 2px solid var(--tile-green);
}
.who__n { font-family: var(--display); font-size: 1.5rem; font-weight: 700; color: var(--rose); line-height: 1; }
.who__item h3 { font-size: var(--fs-h3); color: var(--deep); }
.who__item p { font-size: var(--fs-xs); color: var(--ink-soft); padding-top: 10px; }

/* ---------- 11. 传承 · 引用式 ---------- */
.herit {
  position: relative;
  padding-block: clamp(70px, 10vw, 130px);
  background: var(--deep-dk);
  color: var(--cream);
  overflow: hidden;
}
.herit__bg { position: absolute; inset: 0; background: var(--tile-dark-url) repeat center / 170px 170px; opacity: .42; }
.herit__in {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .78fr);
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}
.herit blockquote { margin: 0; }
.herit__q {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.9vw, 2.4rem);
  font-weight: 700;
  line-height: 1.5;
  color: var(--cream);
  margin-block: 20px 22px;
}
.herit__q b { color: var(--gold); font-weight: 700; }
.herit__body { font-size: var(--fs-sm); color: rgba(247, 236, 214, .82); max-width: 30rem; }
.herit cite {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  font-style: normal;
  font-size: var(--fs-xs);
  letter-spacing: .14em;
  color: var(--leaf-lt);
}
.herit cite::before { content: ""; width: 22px; height: 1px; background: currentColor; }

/* 老照片：拼贴式 —— 两张带原始描金相框的旧照微微转角叠压，
   像贴在相册里。刻意与「序」的规整两栏拉开版式差异。 */
.herit__fig {
  position: relative;
  padding-bottom: 16%;
  padding-left: 8%;
}
.herit__ph {
  display: block;
  width: 100%;
  box-shadow: 0 26px 60px rgba(0, 0, 0, .55);
  transform: rotate(-2.4deg);
}
.herit__ph--sub {
  position: absolute;
  left: 0; bottom: 0;
  width: 46%;
  transform: rotate(3.2deg);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .6);
  outline: 3px solid rgba(247, 236, 214, .1);
}
.herit__badge {
  position: absolute;
  right: 4%; top: -12px;
  z-index: 3;
  padding-block: 9px;
  padding-inline: 15px;
  background: var(--gold);
  color: #2C2110;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
  transform: rotate(-2.4deg);
}

/* ---------- 12b. 常见问题 · 全宽手风琴 ----------
   结构签名：全宽编号清单，行间用真瓷砖细带分隔 —— 与其它各段（满幅照/两栏/错位叠压/
   masonry/双分屏/四条并列/拼贴/居中横幅）都不同。
   刻意不配照片：这是问答清单，硬塞一张图就是装饰填充（基准第四章明令禁止）；
   品牌视觉由行间的瓷砖带承担，全站已有 29 张实拍照撑「非纯文字站」这条。 */
.faq { padding-block: clamp(64px, 9vw, 118px); background: var(--cream-lt); }
.faq__hd { margin-bottom: clamp(26px, 3vw, 40px); }
.faq__hd h2 { font-size: var(--fs-h2); color: var(--deep); margin-top: 14px; }

.faq__list { border-top: 2px solid var(--tile-green); }
.faq__item { border-bottom: 1px solid var(--cream-dp); }
/* 行间瓷砖带 —— 展开时才露出来，收合时是一条素线 */
.faq__item.is-open { border-bottom-color: transparent; }
.faq__item.is-open::after {
  content: "";
  display: block;
  height: 14px;
  background: var(--tile-url) repeat-x center / auto 100%;
  border-block: 1px solid var(--tile-green);
}

.faq__qh { margin: 0; }
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 22px;
  text-align: left;
  cursor: pointer;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-h3);
  color: var(--deep);
  transition: color .18s var(--ease);
}
.faq__q:hover { color: var(--rose); }
.faq__q:focus-visible { outline: 3px solid var(--leaf); outline-offset: 2px; }

/* 自绘的加号 -> 减号，用两根线转 90°（不用 emoji / unicode 当图标） */
.faq__q::after {
  content: "";
  flex: none;
  width: 18px; height: 18px;
  background:
    linear-gradient(var(--tile-green) 0 0) center / 100% 2px no-repeat,
    linear-gradient(var(--tile-green) 0 0) center / 2px 100% no-repeat;
  transition: transform var(--spring-snap-t) var(--spring-snap);
}
.faq__q[aria-expanded="true"]::after {
  transform: rotate(90deg);
  background:                       /* 竖线转 90° 后与横线重合 -> 变成减号 */
    linear-gradient(var(--rose) 0 0) center / 100% 2px no-repeat,
    linear-gradient(var(--rose) 0 0) center / 2px 100% no-repeat;
}
.faq__q[aria-expanded="true"] { color: var(--rose); }

/* 高度动画由 JS 的 Web Animations API 跑明确的像素值。
   收合时用 [hidden] 把内容真正移出无障碍树（不能只靠 height:0，
   那样读屏仍读得到收起来的内容）。 */
.faq__wrap { overflow: hidden; }
.faq__item.is-closing::after { display: none; }
.faq__a p {
  padding-bottom: 22px;
  padding-right: 38px;
  font-size: var(--fs-sm);
  color: var(--ink-soft);           /* 6.21:1 ✓ */
  max-width: 44rem;
}
.faq__more { margin-top: 26px; font-size: var(--fs-sm); color: var(--ink-soft); }
.faq__more a { color: var(--rose); text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }
.faq__more a:hover { color: var(--red); }

@media (max-width: 767px) {
  .faq__q { padding-block: 18px; gap: 14px; }
  .faq__a p { padding-right: 0; }
}

/* ---------- 13. CTA 横幅 ---------- */
.cta {
  position: relative;
  padding-block: clamp(64px, 9vw, 112px);
  background: var(--tile-url) repeat center / 132px 132px;
  border-block: 2px solid var(--tile-green);
  text-align: center;
  overflow: hidden;
}
/* 面纱只压中间，让两侧瓷砖保持清晰 —— 整片压 .82 会把纹样糊成灰噪点 */
.cta__veil {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 62% 82% at 50% 50%,
    rgba(247, 236, 214, .97) 0%, rgba(247, 236, 214, .93) 46%, rgba(247, 236, 214, .5) 78%, rgba(247, 236, 214, .18) 100%);
}
.cta__in { position: relative; z-index: 2; }
.cta h2 {
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  color: var(--deep);
  margin-block: 16px 14px;
}
.cta p { font-size: var(--fs-lead); color: var(--ink-soft); max-width: 30rem; margin-inline: auto; }
.cta__acts { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }

/* ---------- 14. 页脚 ---------- */
.ft { background: var(--deep-dk); color: rgba(247, 236, 214, .78); padding-block: clamp(48px, 6vw, 74px) 0; }
.ft__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: 42px;
}
.ft__brand { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.ft__brand img { width: 44px; height: 44px; border-radius: 50%; }
.ft__brand .brand__cn { font-size: 1.15rem; }
.ft__about { font-size: var(--fs-sm); max-width: 22rem; }
.ft h3 {
  font-size: var(--fs-xs);
  letter-spacing: .2em;
  color: var(--gold);
  margin-bottom: 15px;
  font-family: var(--body);
  font-weight: 700;
}
.ft__links li { margin-bottom: 9px; }
.ft__links a { font-size: var(--fs-sm); transition: color .16s var(--ease); }
.ft__links a:hover { color: var(--leaf-lt); }
.ft__addr li { display: flex; gap: 9px; font-size: var(--fs-sm); margin-bottom: 12px; align-items: flex-start; }
.ft__addr svg { width: 15px; height: 15px; color: var(--leaf-lt); flex: none; margin-top: 4px; }
.ft__addr b { color: var(--cream); font-weight: 700; display: block; }

.ft__base {
  border-top: 1px solid rgba(247, 236, 214, .16);
  padding-block: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: var(--fs-xs);
}
.ft__base a { color: var(--leaf-lt); text-decoration: underline; text-underline-offset: 3px; }
.ft__base a:hover { color: var(--cream); }

/* ---------- 15. 浮动 WhatsApp ---------- */
.wa-float {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 95;
  width: 56px; height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  box-shadow: 0 8px 26px rgba(37, 211, 102, .46);
  transition: transform var(--spring-snap-t) var(--spring-snap);
}
.wa-float svg { width: 30px; height: 30px; }
.wa-float:hover { transform: scale(1.08); }
.wa-float::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25D366;
  animation: pulse 2.4s ease-out infinite;
  z-index: -1;
}
@keyframes pulse {
  0%   { transform: scale(1);   opacity: .65; }
  70%  { transform: scale(1.7); opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* ---------- 15a. 复制号码（图标变勾） ---------- */
.copybtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding-block: 5px;
  padding-inline: 10px;
  font-size: var(--fs-xs);
  color: var(--cream);
  border: 1px solid rgba(247, 236, 214, .3);
  border-radius: 2px;
  transition: transform var(--spring-snap-t) var(--spring-snap),
              border-color .18s var(--ease), background-color .18s var(--ease);
}
.copybtn:hover { border-color: var(--leaf); background: rgba(114, 176, 67, .14); }
.copybtn:active { transform: scale(.94); }

/* 同一套 Icon Morph Swap：复制 -> 打勾 也用 blur + 缩放 + 转角对调 */
.copybtn__ico { display: grid; width: 13px; height: 13px; flex: none; }
.copybtn__ico > svg {
  grid-area: 1 / 1;
  width: 13px; height: 13px;
  transition: opacity .3s var(--ease), filter .3s var(--ease), transform .3s var(--spring-snap);
}
.copybtn__k { color: var(--leaf-lt); opacity: 0; filter: blur(6px); transform: scale(.7) rotate(-20deg); }
.copybtn.is-done .copybtn__c { opacity: 0; filter: blur(6px); transform: scale(.7) rotate(-20deg); }
.copybtn.is-done .copybtn__k { opacity: 1; filter: blur(0); transform: scale(1) rotate(0deg); }
.copybtn.is-done { border-color: var(--leaf); color: var(--leaf-lt); }

/* ---------- 15c. 提示条 ---------- */
.toast {
  position: fixed;
  left: 50%; bottom: 26px;
  z-index: 110;
  display: flex;
  align-items: center;
  gap: 9px;
  padding-block: 12px;
  padding-inline: 18px;
  background: var(--deep);
  color: var(--cream);                 /* 8.44:1 ✓ */
  border: 1.5px solid var(--leaf);
  border-radius: 3px;
  box-shadow: 0 10px 34px rgba(20, 32, 12, .45);
  font-size: var(--fs-sm);
  white-space: nowrap;
  /* 收起时移出视线并不可点；用 visibility 而非 display，才能有过场 */
  visibility: hidden;
  opacity: 0;
  transform: translate(-50%, 22px);
  transition: transform var(--spring-t) var(--spring),
              opacity .2s var(--ease),
              visibility 0s linear var(--spring-t);
}
.toast.is-on {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, 0);
  transition: transform var(--spring-t) var(--spring),
              opacity .2s var(--ease),
              visibility 0s;
}
.toast__ico { width: 17px; height: 17px; color: var(--leaf-lt); flex: none; }

@media (max-width: 767px) {
  /* 别压在两颗浮钮上 */
  .toast { left: 14px; right: 92px; bottom: 20px; transform: translateY(22px); white-space: normal; }
  .toast.is-on { transform: translateY(0); }
}

/* ---------- 15b. 背景音乐开关 ---------- */
/* 尺寸与 .wa-float 对齐（56/52），两颗浮钮同大小才像一组 */
.bgm-btn {
  position: fixed;
  right: 20px; bottom: 88px;          /* 叠在 WhatsApp 浮钮之上，留 12px 缝 */
  z-index: 95;
  width: 56px; height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--deep);
  color: var(--cream);
  border: 1.5px solid var(--leaf);
  box-shadow: 0 6px 20px rgba(20, 32, 12, .34);
  transition: transform var(--spring-snap-t) var(--spring-snap), background-color .2s var(--ease);
}
.bgm-btn:hover { transform: scale(1.08); background: var(--tile-green); }
.bgm-btn[aria-pressed="true"] { background: var(--leaf); color: var(--ink); border-color: var(--leaf); }

/* ---------- kinetics: Icon Morph Swap ----------
   原本是 display:none 硬切，没有过场。照原版：两个图标叠在同一格，
   用 opacity + blur(6px) + scale(.7) rotate(-20deg) 对调。
   叠在 grid 同一格而非绝对定位 —— 按钮尺寸不会因此塌掉。 */
.bgm-btn { display: grid; place-items: center; }
.bgm-btn svg {
  grid-area: 1 / 1;
  width: 24px; height: 24px;
  transition: opacity .3s var(--ease), filter .3s var(--ease), transform .3s var(--spring-snap);
}
.bgm-btn__on { opacity: 0; filter: blur(6px); transform: scale(.7) rotate(-20deg); }
.bgm-btn[aria-pressed="true"] .bgm-btn__off { opacity: 0; filter: blur(6px); transform: scale(.7) rotate(-20deg); }
.bgm-btn[aria-pressed="true"] .bgm-btn__on  { opacity: 1; filter: blur(0); transform: scale(1) rotate(0deg); }

/* 原本按钮下方挂了三格跳动的均衡器，但两颗浮钮改成同尺寸后只剩 12px 缝，
   跳动条会撞到 WhatsApp 浮钮。播放状态已由「实心叶绿底 + 喇叭图标 + aria-pressed」
   表达清楚，不需要再加一个会打架的装饰。 */

@media (max-width: 767px) {
  .bgm-btn { right: 14px; bottom: 78px; width: 52px; height: 52px; }
  .bgm-btn svg { width: 22px; height: 22px; }
}

/* ---------- 16. 灯箱 ---------- */
.lb {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  place-items: center;
  background: rgba(20, 30, 12, .95);
  padding: clamp(16px, 4vw, 46px);
}
.lb[open], .lb.is-open { display: grid; }
.lb__fig { margin: 0; max-width: min(92vw, 900px); max-height: 86vh; display: flex; flex-direction: column; gap: 12px; }
.lb__img {
  max-width: 100%;
  max-height: 76vh;
  width: auto; height: auto;
  margin-inline: auto;
  object-fit: contain;
  border: 5px solid var(--cream);
}
.lb__cap { text-align: center; color: var(--cream); font-size: var(--fs-sm); letter-spacing: .06em; }
.lb__cap b { color: var(--leaf-lt); font-weight: 700; }
.lb__btn {
  position: absolute;
  width: 50px; height: 50px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(247, 236, 214, .12);
  border: 1.5px solid rgba(247, 236, 214, .4);
  color: var(--cream);
  transition: background .16s var(--ease);
}
.lb__btn:hover { background: var(--leaf); color: var(--ink); border-color: var(--leaf); }
.lb__btn svg { width: 22px; height: 22px; }
.lb__x    { top: 18px; right: 18px; }
.lb__prev { left: 18px;  top: 50%; transform: translateY(-50%); }
.lb__next { right: 18px; top: 50%; transform: translateY(-50%); }

/* ---------- 17. 滚动揭示 ---------- */
.rv { opacity: 0; transform: translateY(24px); transition: opacity .45s var(--ease), transform var(--spring-t) var(--spring); }
.rv.in { opacity: 1; transform: none; }

/* ---------- 18. 平板 ≤1024 ---------- */
@media (max-width: 1024px) {
  .nav { display: none; }
  .burger { display: flex; }
  .hdr__cta { display: none; }

  /* 移动抽屉 */
  .nav.is-open {
    display: flex;
    position: fixed;
    inset: var(--header-h) 0 0;
    z-index: 88;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    /* 抽屉也铺瓷砖 —— 纯色底会脱离全站的南洋纹样语言 */
    background: var(--deep) var(--tile-dark-url) repeat center / 150px 150px;
    border-top: 2px solid var(--leaf);
    overflow-y: auto;
  }
  .nav.is-open .nav__cta { display: inline-flex; margin-top: 22px; }
  .nav.is-open a:not(.btn) {
    width: 100%;
    font-family: var(--display);
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    padding-block: 14px;
  }
  .nav.is-open a:not(.btn)::after { left: 50%; transform: translateX(-50%) scaleX(0); width: 46px; }
  .nav.is-open a:not(.btn)[aria-current="page"]::after { transform: translateX(-50%) scaleX(1); }

  /* 错位叠压是桌面专属：宽度不够时，其二的照片（z-index 更高）会压住
     其一说明卡的右缘、把文字吃掉。平板起改为上下堆叠。 */
  .svc__stack { display: flex; flex-direction: column; gap: 48px; }
  .svc__item--a, .svc__item--b { grid-column: auto; grid-row: auto; margin-top: 0; }
  .svc__item--b .svc__ph { aspect-ratio: 4 / 3; }
  .svc__cap { width: min(30rem, calc(100% - 32px)); margin-left: 32px; margin-top: -40px; }
  .svc__item--b .svc__cap { margin-left: auto; margin-right: 32px; }

  .grid { columns: 3; }
  .strip { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .herit__in { grid-template-columns: 1fr; gap: 38px; }
  .herit__fig { max-width: 30rem; }
  .ft__grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- 19. 手机 <768 ---------- */
@media (max-width: 767px) {
  .hero__rail { width: 18px; }
  .hero__in { padding-inline: calc(var(--gut) + 18px); }
  /* 右侧留出浮动 WhatsApp 按钮的位置，否则首屏最后一项会被按钮压住 */
  .hero__meta { flex-wrap: wrap; gap: 8px 14px; padding-right: 64px; }
  .hero__meta i { display: none; }   /* 换行后分隔点会吊在行尾 */
  .hero h1 { margin-block: 12px 14px; }
  .hero__acts { margin-top: 22px; }
  .btn { padding-inline: 20px; }

  /* 序：改单列，瓷砖块退到照片背后 */
  .intro__grid { grid-template-columns: 1fr; gap: 34px; }
  .intro__fig { max-width: 24rem; margin-inline: auto; }
  .intro__tile { width: 66%; height: 60%; left: -10px; top: -12px; }

  /* 业务：堆叠后再收紧（叠压已在 ≤1024 解除） */
  .svc__stack { gap: 42px; }
  .svc__cap { width: calc(100% - 20px); margin-left: 20px; margin-top: -34px; padding: 20px 22px; }
  .svc__item--b .svc__cap { margin-left: 0; margin-right: 20px; }

  .grid { columns: 2; column-gap: 12px; }
  .tileitem { margin-bottom: 12px; }
  /* 触屏没有 hover，说明常显 */
  .tileitem figcaption { opacity: 1; transform: none; padding-top: 26px; }

  /* 分店：双分屏在手机上垂直堆叠，缝改成横向瓷砖带 */
  .split { grid-template-columns: 1fr; }
  .split__seam {
    left: 0; right: 0; top: 50%; bottom: auto;
    width: auto; height: 22px;
    transform: translateY(-50%);
    background: var(--tile-url) repeat-x center / auto 100%;
    border-inline: 0;
    border-block: 1.5px solid var(--tile-green);
  }
  .store { min-height: 420px; }

  .strip { grid-template-columns: 1fr; gap: 26px; }
  .who__ph { aspect-ratio: 4 / 3; }

  .herit__badge { left: -8px; bottom: -8px; }
  .ft__grid { grid-template-columns: 1fr; gap: 30px; }
  .ft__base { justify-content: center; text-align: center; }

  .wa-float { right: 14px; bottom: 14px; width: 52px; height: 52px; }
  .lb__prev { left: 8px; }
  .lb__next { right: 8px; }
  .lb__btn { width: 42px; height: 42px; }
  .lb__x { top: 10px; right: 10px; }
}

/* ---------- 20. 尊重减动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .wa-float::before { animation: none; display: none; }
  .rv { opacity: 1; transform: none; }
  /* kinetics 那几个也要收：shimmer 是无限循环、ripple/magnetic 是纯位移 */
  .tileitem { animation: none; background: var(--cream-dp); }
  .ripple { display: none; }
  .magnet { transform: none !important; }
  .chip.pop { transform: none; }
  .bgm-btn svg, .copybtn__ico > svg { filter: none !important; }
}