/* ============================================================
   百丽雅 · PAPIRA 官网改版原型 · 设计系统
   底色：沿用现有项目原有配色（米白 #faf7f2 + 香槟金 #b8944a）
   ============================================================ */

/* ---------- 1. 变量 ---------- */
:root {
  /* 版面 */
  --bg: #faf7f2;          /* 页面底色，同现有项目 --color-bg */
  --bg-alt: #f4efe6;      /* 交替区块底色 */
  --surface: #ffffff;     /* 卡片，同现有项目 --color-bg-card */
  --surface-2: #fbf8f2;   /* 卡片 hover / 次级面 */
  --surface-3: #efe7d9;   /* 图片占位底 */

  /* 文字，同现有项目 text-primary / secondary / muted */
  --text: #1e1c1a;
  --text-2: #4d453e;
  --text-3: #8a7d72;

  /* 金色 */
  --gold: #b8944a;
  --gold-bright: #d4b87a;
  --gold-dim: #8c7038;    /* 小字号金，保证在米白底上的可读性 */
  --gold-pale: #ede5d5;

  /* 描边 */
  --line: rgba(184, 148, 74, 0.28);
  --line-soft: #e8dfd4;
  --line-strong: rgba(184, 148, 74, 0.5);

  /* 卡片，规格沿用现有项目的门店卡片 */
  --card-radius: 16px;
  --shadow-soft: 0 8px 32px rgba(30, 28, 26, 0.06);
  --shadow-hover: 0 16px 48px rgba(30, 28, 26, 0.1);

  --champagne-1: #f6ecd6;
  --champagne-2: #dcc394;

  --serif: 'Cormorant Garamond', 'Songti SC', 'Noto Serif SC', 'Source Han Serif SC', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', sans-serif;

  --wrap: 1200px;
  --ease: 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);

  /* 纸张颗粒（feTurbulence 生成的 SVG，约 5% 不透明度）。
     叠在大块面卡片的最底层，远看是质感、近看才见颗粒，用来消除平涂色块的死板感。 */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: white;
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.85;
  letter-spacing: 0.02em;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 32px;
}

/* 品牌 Logo 原图是纯白，浅底上必须压深才可见（与现有站点同一问题） */
.logo-ink {
  filter: invert(1) brightness(0.14) sepia(0.18);
}

/* ---------- 2. 头部导航 ---------- */
.hd {
  position: sticky;
  top: 0;
  z-index: 900;
  background: rgba(250, 247, 242, 0.93);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}

.hd-in {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 32px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.hd-brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

.hd-brand img {
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.hd-name {
  display: block;
  font-family: var(--serif);
  font-size: 20px;
  letter-spacing: 0.14em;
  color: var(--text);
}

.hd-name em {
  font-style: normal;
  color: var(--gold);
}

.hd-sub {
  display: block;
  font-size: 10px;
  letter-spacing: 0.34em;
  color: var(--text-3);
  text-transform: uppercase;
}

.hd-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
}

.hd-nav a {
  display: block;
  padding: 10px 16px;
  font-size: 14px;
  color: var(--text-2);
  border-bottom: 1px solid transparent;
  transition: var(--ease);
}

.hd-nav a:hover {
  color: var(--gold);
}

.hd-nav a.on {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

/* ---------- 3. 首屏 ---------- */
/* 首屏是客户设计稿的香槟金主视觉，本身为浅色，与米白底衔接自然 */
.hero {
  position: relative;
  min-height: calc(100vh - 76px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(120% 95% at 10% 4%, #fdf7ea 0%, rgba(253, 247, 234, 0) 58%),
    radial-gradient(95% 85% at 92% 16%, #eddbb8 0%, rgba(237, 219, 184, 0) 62%),
    radial-gradient(110% 110% at 74% 104%, #a98a54 0%, rgba(169, 138, 84, 0) 66%),
    linear-gradient(158deg, var(--champagne-1) 0%, var(--champagne-2) 40%, #c3a56d 70%, #9b7f4b 100%);
}

.hero::before,
.hero::after {
  content: '';
  position: absolute;
  left: -10%;
  right: -10%;
  pointer-events: none;
  z-index: 1;
}

.hero::before {
  top: 30%;
  height: 26%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 252, 244, 0.5) 34%, rgba(255, 255, 255, 0) 72%);
  filter: blur(38px);
  transform: rotate(-6deg);
}

.hero::after {
  bottom: 12%;
  height: 22%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 8%, rgba(220, 195, 148, 0.55) 48%, rgba(255, 255, 255, 0) 88%);
  filter: blur(46px);
  transform: rotate(4deg);
}

.hero-mark {
  position: absolute;
  left: 2%;
  top: 50%;
  z-index: 2;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(80px, 13vw, 190px);
  line-height: 1;
  color: rgba(255, 255, 255, 0.34);
  text-shadow: 0 2px 30px rgba(255, 255, 255, 0.25);
  pointer-events: none;
  user-select: none;
}

.hero-in {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1040px;
  padding: 0px 32px;
  text-align: center;
}

.hero-logo {
  width: 118px;
  height: 118px;
  object-fit: contain;
  margin: 0 auto 34px;
  filter: drop-shadow(0 6px 24px rgba(120, 92, 44, 0.3));
}

.hero h1 {
  font-family: var(--serif);
  font-size: clamp(25px, 3.5vw, 46px);
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: 0.04em;
  color: #fffdf8;
  text-shadow: 0 2px 22px rgba(120, 92, 44, 0.34);
}

.hero .en {
  margin-top: 14px;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 253, 248, 0.78);
}

.hero-line {
  width: 1px;
  height: 40px;
  margin: 26px auto;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
}

.hero h2 {
  font-family: var(--serif);
  font-size: clamp(21px, 2.6vw, 33px);
  font-weight: 500;
  letter-spacing: 0.18em;
  color: #fffdf8;
  text-shadow: 0 2px 18px rgba(120, 92, 44, 0.3);
}

.hero h3 {
  margin-top: 24px;
  font-family: var(--serif);
  font-size: clamp(18px, 2vw, 25px);
  font-weight: 500;
  letter-spacing: 0.3em;
  color: #fffdf8;
}

.hero-end {
  margin-top: 46px;
  font-family: var(--serif);
  font-size: clamp(15px, 1.5vw, 19px);
  letter-spacing: 0.24em;
  color: rgba(255, 253, 248, 0.94);
}

.hero-end .en {
  margin-top: 8px;
  color: rgba(255, 253, 248, 0.66);
}

.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 26px;
  z-index: 3;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: rgba(255, 253, 248, 0.62);
}

/* ---------- 4. 区块外壳 ---------- */
.sec {
  padding: 40px 0;
}

.sec.alt {
  background: var(--bg-alt);
}

.sec-head {
  margin-bottom: 10px;
}

.sec-head.center {
  text-align: left;
}

.eyebrow {
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold-dim);
}

.sec-title {
  margin-top: 1px;
  font-family: var(--serif);
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--text);
}

.sec-title em {
  font-style: normal;
  color: var(--gold);
}

.rule {
  width: 56px;
  height: 1px;
  margin-top: 0px;
  background: var(--gold);
  opacity: 0.8;
}



.sec-sub {
  margin-top: 18px;
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--text-3);
}

.lead {
  font-size: 15px;
  line-height: 2.1;
  color: var(--text-2);
}

.lead strong {
  color: var(--text);
  font-weight: 500;
}

/* ---------- 5. 品牌简介 ---------- */
.brand-grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 72px;
  align-items: stretch;
}

/* 右列用绝对定位撑满左列高度：
   肖像 flex 自适应剩余空间，使下方「以三养滋养身心…」文字块的底部
   与左列「创业理念」卡片的底部自动对齐（左列内容变长变短都不用调数值） */
.brand-grid > aside {
  position: relative;
}

.aside-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}

.aside-inner .person-photo {
  flex: 1 1 0;
  min-height: 240px;
  aspect-ratio: auto;
}

.fact-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  margin: 34px 0 0;
  padding: 26px 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.fact {
  min-width: 170px;
}

.fact dt {
  font-size: 11px;
  letter-spacing: 0.26em;
  color: var(--text-3);
  text-transform: uppercase;
}

.fact dd {
  margin-top: 6px;
  font-family: var(--serif);
  font-size: 19px;
  letter-spacing: 0.06em;
  color: var(--gold);
}

.block-h {
  margin-top: 44px;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--text);
}

.block-h .num {
  color: var(--gold-dim);
  margin-right: 10px;
  font-size: 13px;
}

.honor-list {
  margin-top: 20px;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 28px;
}

.honor-list li {
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--text-2);
  padding-left: 16px;
  position: relative;
}

.honor-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 13px;
  width: 5px;
  height: 5px;
  border: 1px solid var(--gold);
  transform: rotate(45deg);
}

.creed {
  margin-top: 36px;
  padding: 28px 32px;
  border-left: 2px solid var(--gold);
  background: var(--bg-alt);
  box-shadow: var(--shadow-soft);
}

.creed p {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.9;
  letter-spacing: 0.06em;
  color: var(--text);
}

.creed p + p {
  margin-top: 10px;
  color: var(--gold);
}

/* 人物肖像 */
.person-photo {
  position: relative;
  aspect-ratio: 2 / 3;
  background: linear-gradient(160deg, #fdfaf4 0%, var(--surface-3) 100%);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.person-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

/* 素材缺失时的占位（替换为真图后不再使用，保留以备补图） */
.person-ph {
  text-align: center;
  padding: 24px;
}

.person-ph .mono {
  font-family: var(--serif);
  font-size: 64px;
  line-height: 1;
  color: var(--gold);
  opacity: 0.55;
}

.person-ph .tag {
  margin-top: 20px;
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--text-3);
}

.person-meta {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
}

.person-meta .nm {
  font-family: var(--serif);
  font-size: 24px;
  letter-spacing: 0.14em;
  color: var(--text);
}

.person-meta .rl {
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--gold);
}

.person-meta .qt {
  margin-top: 16px;
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: 0.06em;
  color: var(--text-2);
}

/* CEO */
.ceo {
  margin-top: 88px;
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 60px;
  align-items: center;
  padding: 52px;
  background: var(--bg-alt);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-soft);
}

/* 与创始人肖像同一展示尺寸：宽 420，高与创始人图当前渲染高度一致。
   创始人图是 flex 自适应高度（420×569），若左侧文案长度有增减，
   这里的比例值需同步调整，保持两张肖像视觉一致。 */
.ceo .person-photo {
  aspect-ratio: 420 / 569;
}

.ceo-txt .nm {
  font-family: var(--serif);
  font-size: 30px;
  letter-spacing: 0.12em;
  color: var(--text);
}

.ceo-txt .rl {
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: 0.24em;
  color: var(--gold);
}

.ceo-txt .lead {
  margin-top: 22px;
}

/* ---------- 6. 历程 ---------- */
.tl {
  position: relative;
  /* 做成与 CEO 卡片同宽的卡片；左侧留出脊柱与菱形标记的空间 */
  padding: 44px 48px 44px 78px;
  background: var(--bg-alt);
  border: 1px solid var(--line-soft);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-soft);
}

.tl::before {
  content: '';
  position: absolute;
  left: 53px;
  top: 62px;
  bottom: 62px;
  width: 1px;
  background: linear-gradient(180deg, rgba(184, 148, 74, 0), var(--line) 8%, var(--line) 92%, rgba(184, 148, 74, 0));
}

.tl-item {
  position: relative;
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 36px;
  padding: 30px 0;
  border-bottom: 1px solid var(--line-soft);
}

.tl-item::before {
  content: '';
  position: absolute;
  left: -30px;
  top: 40px;
  width: 11px;
  height: 11px;
  background: var(--bg-alt);
  border: 1px solid var(--gold);
  transform: rotate(45deg);
  transition: var(--ease);
}

.tl-item:hover::before {
  background: var(--gold);
}

.tl-item:last-child {
  border-bottom: 0;
}

.tl-year {
  font-family: var(--serif);
  font-size: 26px;
  letter-spacing: 0.06em;
  color: var(--gold);
  line-height: 1.3;
}

.tl-tag {
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--text-3);
}

.tl-body {
  font-size: 14.5px;
  line-height: 2;
  color: var(--text-2);
}

/* ---------- 7. 文化 / 服务观 ---------- */
.culture-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

/* ---- 三养之美：左文字 + 右竖版海报（海报贴齐卡片右缘，不内缩） ----
   用 .card.culture-hero 提高权重，压过后面定义的 .card / .card h3
   底纹见第 19 节 */
.card.culture-hero {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 0;
  padding: 0;
  align-items: stretch;
  overflow: hidden; /* 让海报被卡片圆角裁齐 */
}

.ch-txt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 46px 52px;
}

.card.culture-hero h3 {
  font-size: 28px;
}

/* h3 与正文之间的短金线 */
.ch-rule {
  width: 56px;
  height: 1px;
  margin-top: 22px;
  background: var(--gold);
}

/* 三养分项：中文 + 海报上对应的英文 */
.ch-list {
  margin-top: 26px;
  list-style: none;
}

.ch-list li {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 11px 0;
  border-top: 1px solid var(--line-soft);
}

.ch-list li:first-child {
  border-top: 0;
  padding-top: 0;
}

.ch-list b {
  flex: 0 0 auto;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--gold);
}

.ch-list span {
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}

.ch-en {
  margin-top: 24px;
  font-family: var(--serif);
  font-size: 12.5px;
  letter-spacing: 0.2em;
  color: var(--text-3);
}

.ch-fig {
  margin: 0;
  display: flex;
}

.ch-fig img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* 品牌文化卡片的底纹/颗粒统一在第 19 节处理，这里只保留排版与描边 */
.card {
  position: relative;
  overflow: hidden;
  padding: 38px;
  border: 1px solid var(--line-soft);
  transition: var(--ease);
}

/* 右上角的淡金水印字（「五」「六」）——放在标题上方的空白处，不压列表 */
.card[data-mark]::after {
  content: attr(data-mark);
  position: absolute;
  right: 16px;
  top: -38px;
  z-index: 0;
  font-family: var(--serif);
  font-size: 132px;
  line-height: 1;
  color: var(--gold);
  opacity: 0.09;
  pointer-events: none;
  user-select: none;
  transition: var(--ease);
}

.card[data-mark]:hover::after {
  opacity: 0.15;
  transform: translateY(6px);
}

/* 卡片内容压在水印与颗粒之上 */
.card > * {
  position: relative;
  z-index: 1;
}

.card:hover {
  border-color: var(--line);
  box-shadow: var(--shadow-hover);
}

.card .cap {
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold-dim);
}

.card h3 {
  margin-top: 16px;
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--text);
}

.card .lead {
  margin-top: 18px;
}

.kv {
  margin-top: 24px;
  list-style: none;
}

/* 每条 = 英文列（定宽）+ 中文列。
   定宽 112px 是按最长的 "Thoughtfulness" 实测量的，
   否则长词会把中文列挤偏（原来 flex 62px 就有这个毛病）。 */
.kv li {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: baseline;
  gap: 0 10px;
  padding: 11px 0;
  border-top: 1px solid var(--line-soft);
  font-size: 13.5px;
  color: var(--text-2);
}

.kv li span:first-child {
  color: var(--gold);
  font-family: var(--serif);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* 两列排布：至尊五 A（5 项）与六心服务（6 项）各排 3 行，
   两张卡用同一套列宽，中文列左右也对齐 */
.kv.cols-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 32px;
}

/* 三养文化引用带 */
.quote-band {
  padding: 30px 32px;
  text-align: center;
  background:
    radial-gradient(70% 120% at 50% 0%, rgba(184, 148, 74, 0.13) 0%, rgba(184, 148, 74, 0) 68%),
    transparent;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.quote-band .yr {
  font-family: var(--serif);
  font-size: 56px;
  line-height: 1;
  color: var(--gold);
  opacity: 0.9;
}

.quote-band .qt {
  margin-top: 22px;
  font-family: var(--serif);
  font-size: clamp(20px, 2.4vw, 28px);
  letter-spacing: 0.2em;
  color: var(--text);
}

.quote-band .sub {
  margin-top: 16px;
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--text-3);
}

/* ---------- 8. 业务概览 ---------- */
.biz-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.biz {
  padding: 0;
  overflow: hidden; /* 让顶部图片被卡片圆角裁齐 */
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(184, 148, 74, 0.08), rgba(184, 148, 74, 0)), var(--bg-alt);
}

/* 业务概览：卡片顶部自动轮播图 */
.biz-media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--bg-alt); /* 竖版海报用 contain 时两侧露出的底色 */
}

.biz-track {
  display: flex;
  height: 100%;
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

.biz-track img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  /* 用 contain 而不是 cover：这些图自带标语文字，裁切会把字切掉。
     图片不可点击放大，所以不给 pointer 光标 */
  object-fit: contain;
  display: block;
}

/* 轮播指示点 */
.biz-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  z-index: 2;
  display: flex;
  gap: 7px;
  width: fit-content;
  margin: 0 auto;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(30, 28, 26, 0.32);
}

.biz-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: var(--ease);
}

.biz-dot.on {
  width: 18px;
  background: var(--gold-bright);
}

.biz-body {
  padding: 5px 28px 10px;
}

.biz .no {
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 0.3em;
  color: var(--gold-dim);
}

.biz h3 {
  margin-top: 14px;
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--text);
}

.biz .slogan {
  margin-top: 10px;
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--gold);
}

.tags {
  margin-top: 5px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tags span {
  padding: 7px 14px;
  font-size: 12.5px;
  color: var(--text-2);
  border: 1px solid var(--line-soft);
  background: transparent;
}

/* ---------- 9. 荣誉 ---------- */
.honor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

/* 证书卡＝一张暖白卡纸。
   15 张证书里 11 张是白底扫描件，卡片底色必须跟着「纸色」走，
   否则上半截的白色衬纸和下半截的米黄会分成两块，像两个色块拼在一起。
   所以这里刻意用**单一平色 + 颗粒**，不再做上下明暗渐变——
   只要有渐变，证件区和文字区就会在分界处露一道色差。
   也因此 .honor-card 不参与第 19 节那套米黄大卡片质感（那节已把它剔出）。 */
.honor-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #fcf9f2;
  background-image: var(--grain);
  background-repeat: repeat;
  background-size: 160px 160px;
  border: 1px solid var(--line-soft);
  transition: var(--ease);
  overflow: hidden;
}

.honor-card:hover {
  border-color: var(--gold-bright);
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}

/* 证件区：4:3 画幅、不再单独铺白底。
   证书 11 张横向（宽高比 1.34–1.58），4:3 能填到 85%–99%，几乎不留白；
   少数竖版（福布斯奖牌 0.70、全国百强 0.67）两侧露出的是卡片自己的纸色，
   读起来是「衬纸留边」，不再是一块突兀的白板。
   内边距从 12px 收到 8px，把画幅尽量让给图片。 */
.honor-media {
  aspect-ratio: 4 / 3;
  background: transparent;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.honor-media img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 证书有印章与编号，不能裁 */
  padding: 8px;
  /* 用 drop-shadow 而非 box-shadow：阴影顺着图片实际渲染区域走，
     白纸证件才像「放在卡纸上的一张纸」，而不是贴在卡片里的一个色块 */
  filter: drop-shadow(0 5px 14px rgba(96, 74, 36, 0.14));
  transition: var(--ease);
}

.honor-card:hover .honor-media img {
  transform: scale(1.02);
  filter: drop-shadow(0 9px 20px rgba(96, 74, 36, 0.16));
}

.honor-media.pending {
  background:
    repeating-linear-gradient(45deg, rgba(184, 148, 74, 0.09) 0 8px, rgba(184, 148, 74, 0) 8px 16px);
}

.honor-media.pending span {
  font-size: 11px;
  letter-spacing: 0.26em;
  color: var(--text-3);
}

/* 文字区：行距、外边距全部收紧，并取消名称原先预留的两行高度
   —— 15 项里只有两三行名称会折行，为它们预留 3.2em 反而让其余卡片都空一大块。 */
.honor-body {
  flex: 1 1 auto;
  padding: 18px 20px 20px;
}

.honor-year {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--gold);
}

/* 年份前一小段金线，给正文区一个视觉锚点，打破纯文字的单调 */
.honor-year::before {
  content: '';
  flex: 0 0 auto;
  width: 14px;
  height: 1px;
  background: var(--gold);
}

.honor-name {
  margin-top: 6px;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.45;
  letter-spacing: 0.05em;
  color: var(--text);
}

.honor-note {
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-3);
}

/* 首页荣誉条 */
/* 首页荣誉条：改为带间距的卡片网格（原来是 1px 缝隙拼贴，套 16px 圆角会互相打架） */
/* 荣誉展示条：无卡片、无放大的纯图片链接，整块点击跳到 /honors。
   7 项一行 4 个、第二行 3 个自动居中。 */
.honor-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.honor-strip .it {
  flex: 0 1 calc((100% - 60px) / 4); /* 4 个一行：扣掉 3 个 gap */
  min-width: 0;
  display: block;
  padding: 0;
  text-align: center;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/* 证书图：白底衬纸 + 极细描边。
   用 contain 而不是 cover —— 证书上有印章与编号，裁掉就看不全了；
   竖版（福布斯奖牌、亚洲大奖）两侧露出的白底正好像纸面留白。 */
.honor-strip .it .thumb {
  display: block;
  aspect-ratio: 4 / 3;
  background: #fff;
  border: 1px solid var(--line-soft);
  overflow: hidden;
  transition: var(--ease);
}

.honor-strip .it .thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.6s var(--ease);
}

.honor-strip .it:hover .thumb {
  border-color: var(--gold);
}

.honor-strip .it:hover .thumb img {
  transform: scale(1.03);
}

.honor-strip .it .t {
  display: block;
  min-height: 1em;
  margin-top: 10px;
  font-family: var(--serif);
  font-size: 15.5px;
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: var(--text);
  transition: var(--ease);
}

.honor-strip .it:hover .t {
  color: var(--gold-dim);
}

.honor-strip .it .d {
  display: block;
  margin-top: 5px;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  color: var(--text-3);
}

/* ---------- 10. 尾屏 ---------- */
.endcap {
  position: relative;
  padding: 70px 32px;
  text-align: center;
  background:
    radial-gradient(80% 130% at 50% 100%, rgba(184, 148, 74, 0.16) 0%, rgba(184, 148, 74, 0) 70%),
    transparent;
  border-top: 1px solid var(--line-soft);
}

.endcap .big {
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 38px);
  letter-spacing: 0.18em;
  color: var(--text);
}

.endcap .rule {
  margin: 30px auto 0;
}

.endcap .cta {
  margin-top: 36px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 34px;
  font-size: 13px;
  letter-spacing: 0.24em;
  color: #fff;
  background: var(--gold);
  transition: var(--ease);
}

.endcap .cta:hover {
  background: #a5833d;
}

/* ---------- 11. 门店环境 ---------- */
.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 28px;
}

.store-card {
  background: var(--bg-alt);
  border: 1px solid var(--line-soft);
  transition: var(--ease);
}

.store-card:hover {
  border-color: var(--line);
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}

.store-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface-3);
}

.store-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}

.store-card:hover .store-media img {
  transform: scale(1.05);
}

.store-media .cnt {
  position: absolute;
  right: 14px;
  top: 14px;
  padding: 5px 12px;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--text);
  background: rgba(250, 247, 242, 0.86);
  border: 1px solid var(--line);
}

.store-body {
  padding: 26px 28px 28px;
}

.store-name {
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: 0.12em;
  color: var(--text);
}

.store-sub {
  margin-top: 6px;
  font-size: 11.5px;
  letter-spacing: 0.24em;
  color: var(--gold);
}

.store-feat {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.store-feat span {
  padding: 5px 11px;
  font-size: 11.5px;
  color: var(--text-3);
  border: 1px solid var(--line-soft);
}

/* ---- 卡片底部图片轮播（2026-10-25：由 4 宫格缩略图改为左右按钮控制的轮播）---- */
.store-carousel {
  position: relative;
  margin-top: 20px;
}

.store-cv {
  overflow: hidden;
}

.store-track {
  display: flex;
  gap: 8px;
  transition: transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

.store-track button {
  /* 一屏 3 张：(100% - 2×8px) / 3 */
  flex: 0 0 calc((100% - 16px) / 3);
  padding: 0;
  border: 1px solid var(--line-soft);
  background: none;
  cursor: pointer;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  transition: var(--ease);
}

.store-track button:hover {
  border-color: var(--gold);
}

.store-track img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 轮播左右按钮：圆形浮层 + 柔和阴影 + 线性箭头图标（无边框，hover 转金色） */
.cv-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--text-2);
  background: rgba(255, 255, 255, 0.92);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(30, 28, 26, 0.18);
  cursor: pointer;
  transition: var(--ease);
}

.cv-nav svg {
  display: block;
  width: 13px;
  height: 13px;
}

.cv-nav:hover {
  background: var(--gold);
  color: #fff;
  box-shadow: 0 4px 14px rgba(184, 148, 74, 0.45);
  transform: translateY(-50%) scale(1.08);
}

.cv-nav.prev {
  left: -8px;
}

.cv-nav.next {
  right: -8px;
}

/* 环境特色条 */
/* 环境特色条：同上，改为带间距的卡片网格 */
.feat-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 64px;
}

.feat-bar .it {
  padding: 34px 24px;
  background: var(--bg-alt);
  text-align: center;
}

.feat-bar .it .n {
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 0.26em;
  color: var(--gold-dim);
}

.feat-bar .it .t {
  margin-top: 12px;
  font-family: var(--serif);
  font-size: 17px;
  letter-spacing: 0.1em;
  color: var(--text);
}

/* ---------- 12. 联系我们 ---------- */
.contact-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-bottom: 64px;
}

/* 热线卡：整页的主行动点。
   版式改成「上：标签+号码 / 下：按钮+品牌小字」，上下各占一端，
   不再像原来那样四行内容挤在正中、上下各留一块死白。 */
.tel-card {
  position: relative;
  overflow: hidden;
  padding: 38px 44px;
  background:
    linear-gradient(150deg, rgba(184, 148, 74, 0.16) 0%, rgba(184, 148, 74, 0.03) 46%, rgba(184, 148, 74, 0) 100%),
    var(--bg-alt);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* 内嵌一圈极细金线：把大片空白的右半张「框」住，构图才立得起来 */
.tel-card::after {
  content: '';
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(184, 148, 74, 0.24);
  border-radius: 3px;
  pointer-events: none;
}

/* 品牌暗纹：缩小成右下角的一行小字距文字，和按钮同处底部一行 */
.tel-card .tel-mark {
  position: absolute;
  right: 44px;
  bottom: 30px;
  font-family: var(--serif);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.42em;
  color: var(--gold);
  opacity: 0.6;
  pointer-events: none;
  user-select: none;
}

.tel-card > *:not(.tel-mark) {
  position: relative;
  z-index: 1;
}

/* 注意：类名不能叫 .lb —— 那是灯箱遮罩的类名，会继承它的 display:none */
.tel-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.3em;
  color: var(--gold-dim);
}

/* 标签前一小段金线，与荣誉页的年份标记同一套语言 */
.tel-label::before {
  content: '';
  flex: 0 0 auto;
  width: 18px;
  height: 1px;
  background: var(--gold);
}

.tel-card .tel {
  margin-top: 16px;
  font-family: var(--serif);
  font-size: clamp(30px, 3.4vw, 42px);
  letter-spacing: 0.06em;
  color: var(--gold);
  transition: var(--ease);
}

.tel-card .tel:hover {
  color: #a5833d;
}

.tel-rule {
  width: 56px;
  height: 1px;
  margin-top: 2px;
  margin-bottom: 26px;
  background: var(--gold);
  opacity: 0.55;
}

.tel-btn {
  margin-top: auto;      /* 按钮压到卡片底部，与右下角的品牌暗纹同一行 */
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 30px;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: #fff;
  background: var(--gold);
  box-shadow: 0 10px 24px rgba(184, 148, 74, 0.26);
  transition: var(--ease);
}

.tel-btn:hover {
  background: #a5833d;
  box-shadow: 0 12px 28px rgba(165, 131, 61, 0.32);
}

/* 总部信息卡：原来是「88px 标签列 + 值列」的两栏，宽卡片里左列空得慌。
   改成标签在上、内容在下的堆叠式，标签用金色小字距，读起来像一份信息卡片的条目。 */
.info-card {
  padding: 38px 44px;
  background: var(--bg-alt);
  border: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.info-card .row {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 19px 0;
  border-bottom: 1px solid var(--line-soft);
}

.info-card .row:first-child {
  padding-top: 0;
}

.info-card .row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.info-card .row .k {
  font-size: 11.5px;
  letter-spacing: 0.24em;
  color: var(--gold-dim);
}

.info-card .row .v {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
}

/* 中文地址下方的英文地址 */
.info-card .row .v .v-en {
  display: block;
  margin-top: 5px;
  font-family: var(--serif);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--text-3);
}

.info-card .row .v small {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-3);
}

/* 门店 / 医疗中心地址卡：
   1) 用 CSS 计数器自动编号（01–06），一排米黄方块有了节奏，不再像复制粘贴的色块；
   2) 名称下方一条极细金线当分隔，替代原来「名称—地址」之间硬邦邦的空白；
   3) flex 纵向布局 + 电话 margin-top:auto —— 地址长短不一，电话号码永远贴底对齐。
   底色质感统一交给第 19 节（颗粒 + 左上高光 + 对角渐变）。 */
.loc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  /* grid-auto-rows: 1fr —— 让每一行等高。
     否则地址长的卡片（香蜜湖店）会把第一行撑高，两行卡片高度不一致。 */
  grid-auto-rows: 1fr;
  gap: 24px;
  counter-reset: loc;
}

.loc {
  counter-increment: loc;
  display: flex;
  flex-direction: column;
  min-height: 178px;
  padding: 26px 28px 24px;
  background: var(--bg-alt);
  transition: var(--ease);
}

.loc .nm {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--serif);
  font-size: 19px;
  letter-spacing: 0.1em;
  color: var(--text);
  transition: var(--ease);
}

.loc .nm::before {
  content: counter(loc, decimal-leading-zero);
  flex: 0 0 auto;
  font-size: 15px;
  font-style: italic;
  letter-spacing: 0.04em;
  color: var(--gold);
  opacity: 0.62;
  transition: var(--ease);
}

.loc .bd {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--text-2);
}

/* 中文地址下方的英文地址：与总部信息卡里的英文地址同一套字号与颜色 */
.loc .bd .bd-en {
  display: block;
  margin-top: 5px;
  font-family: var(--serif);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--text-3);
}

.loc .tl2 {
  margin-top: auto;      /* 贴底对齐：同排卡片的电话号码落在同一条线上 */
  padding-top: 14px;
  font-family: var(--serif);
  font-size: 17px;
  letter-spacing: 0.06em;
  color: var(--gold);
  transition: var(--ease);
}

.loc:hover .nm::before {
  opacity: 1;
}

.loc:hover .tl2 {
  color: #a5833d;
}

/* 门店信息：两列三行（医疗中心仍是自适应三列）。
   卡片宽了近一倍，内部就改成「名称 + 电话」一行当表头，中英地址通栏在下方——
   横向空间不浪费，六家店也更好扫读。 */
.loc-grid.cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 761px) {
  .loc-grid.cols-2 .loc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: 24px;
    min-height: 0;
    padding: 24px 28px 22px;
  }

  .loc-grid.cols-2 .loc .nm {
    grid-area: 1 / 1 / 2 / 2;
    padding-bottom: 0;
    border-bottom: 0;
  }

  .loc-grid.cols-2 .loc .tl2 {
    grid-area: 1 / 2 / 2 / 3;
    margin-top: 0;
    padding-top: 0;
    text-align: right;
  }

  /* 通栏的分隔线移到地址块上方，与「名称 / 电话」表头分开 */
  .loc-grid.cols-2 .loc .bd {
    grid-area: 2 / 1 / 3 / 3;
    margin-top: 12px;
    padding-top: 13px;
    border-top: 1px solid var(--line-soft);
  }
}

/* 二维码 */
.qr-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
}

/* 参照现有项目 .qr-mini 的呈现：不做卡片，只有
   二维码本体（圆角 + 细边框 + 白底）+ 小圆点 + 名称 */
.qr {
  padding: 0;
  text-align: center;
  background: none;
  border: 0;
}

.qr img {
  width: 132px;
  height: 132px;
  margin: 0 auto;
  object-fit: contain;
  background: #fff;
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  transition: var(--ease);
}

.qr:hover img {
  border-color: var(--gold);
  box-shadow: 0 4px 16px rgba(184, 148, 74, 0.25);
}

.qr .nm {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: 0.08em;
  color: var(--text);
}

/* 小圆点区分类型：金色＝公众号，红色＝视频号（与现有项目一致） */
.qr .nm::before {
  content: '';
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
}

.qr.is-sph .nm::before {
  background: #e74c3c;
}

.qr .kd {
  margin-top: 5px;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  color: var(--text-3);
}

/* ---------- 13. 页脚 ---------- */
.ft {
  padding: 66px 0 40px;
  background: white;
  border-top: 1px solid var(--line-soft);
}

.ft-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.ft-brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ft-brand img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.ft-brand .nm {
  display: block;
  font-family: var(--serif);
  font-size: 20px;
  letter-spacing: 0.14em;
  color: var(--text);
}

.ft-brand .nm em {
  font-style: normal;
  color: var(--gold);
}

.ft-nav {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  list-style: none;
}

.ft-nav a {
  font-size: 13px;
  color: var(--text-2);
}

.ft-nav a:hover,
.ft-nav a.on {
  color: var(--gold);
}

.ft-note {
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-3);
}

/* ICP 备案号（与现有项目同一备案主体，便于核验） */
.ft-icp {
  color: var(--text-3);
  transition: var(--ease);
}

.ft-icp:hover {
  color: var(--gold);
}

.proto-flag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border: 1px dashed var(--line);
  color: var(--gold-dim);
  font-size: 11px;
  letter-spacing: 0.14em;
}

/* ---------- 14. 灯箱 ---------- */
.lb {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
  background: rgba(30, 28, 26, 0.92);
  backdrop-filter: blur(6px);
}

.lb.on {
  display: flex;
}

.lb img {
  max-width: min(1100px, 92vw);
  max-height: 82vh;
  object-fit: contain;
  background: #fff;
  padding: 14px;
}

.lb img[src=''],
.lb img:not([src]) {
  visibility: hidden;
}

.lb-close {
  position: absolute;
  right: 34px;
  top: 28px;
  width: 44px;
  height: 44px;
  font-size: 20px;
  color: var(--gold-bright);
  background: none;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: var(--ease);
}

.lb-close:hover {
  background: var(--gold);
  color: #fff;
}

/* 灯箱左右切换按钮 */
.lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 3px;
  font-size: 28px;
  line-height: 1;
  color: var(--gold-bright);
  background: rgba(30, 28, 26, 0.45);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: var(--ease);
}

.lb-nav:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}

.lb-nav[hidden] {
  display: none;
}

.lb-nav.prev {
  left: 28px;
}

.lb-nav.next {
  right: 28px;
}

.lb-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 30px;
  text-align: center;
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: 0.12em;
  color: var(--gold-bright);
}

/* ---------- 15. 内页头 ---------- */
.page-hd {
  padding: 50px 0 68px;
  text-align: center;
  background:
    radial-gradient(70% 130% at 50% 0%, rgba(184, 148, 74, 0.14) 0%, rgba(184, 148, 74, 0) 70%),
    var(--bg-alt);
  border-bottom: 1px solid var(--line-soft);
}

.page-hd h1 {
  margin-top: 18px;
  font-family: var(--serif);
  font-size: clamp(30px, 3.8vw, 46px);
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--text);
}

.page-hd h1 em {
  font-style: normal;
  color: var(--gold);
}

.page-hd .sub {
  margin-top: 20px;
  font-size: 13px;
  letter-spacing: 0.24em;
  color: var(--text-3);
}

.page-hd .rule {
  margin: 26px auto 0;
}

/* 提示条 */
.notice {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 20px 26px;
  margin-bottom: 52px;
  background: rgba(184, 148, 74, 0.08);
  border: 1px dashed var(--line);
  font-size: 13px;
  line-height: 1.9;
  color: var(--text-2);
}

.notice b {
  flex: 0 0 auto;
  font-weight: 500;
  color: var(--gold-dim);
  letter-spacing: 0.1em;
}

/* ---------- 16. 卡片统一规格 ----------
   规格参照现有项目的门店卡片（.carousel-slide）：
   16px 圆角 + 1px 细描边 + 柔和投影，hover 上浮 4px 并把描边转为金色。
   写在最后，统一覆盖各处零散的卡片定义；**卡片底色仍为 --bg-alt，未改动**。 */
.card,
.creed,
.ceo,
.honor-card,
.store-card,
.biz,
.tel-card,
.info-card,
.person-photo,
.tl,
.loc,
.feat-bar .it {
  border-radius: var(--card-radius);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-soft);
  transition: var(--ease);
}

.card:hover,
.creed:hover,
.ceo:hover,
.honor-card:hover,
.store-card:hover,
.biz:hover,
.tel-card:hover,
.info-card:hover,
.loc:hover,
.feat-bar .it:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
  border-color: var(--gold-bright);
}

/* 含图卡片要裁掉圆角外的溢出 */
.store-card,
.honor-card,
.person-photo {
  overflow: hidden;
}

/* 上面统一了 border，这里还原各卡片的个性描边 */
.creed {
  border-left: 3px solid var(--gold);
}

.tel-card,
.biz {
  border-color: var(--line);
}

/* ---------- 17. 响应式 ---------- */
@media (max-width: 1080px) {
  .brand-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  /* 单列时取消绝对定位，否则右列高度会塌成 0 */
  .brand-grid > aside {
    position: static;
  }

  .aside-inner {
    position: static;
  }

  .aside-inner .person-photo {
    flex: 0 0 auto;
    aspect-ratio: 2 / 3;
    max-width: 380px;
  }

  .ceo {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 38px 30px;
  }

  .ceo .person-photo {
    max-width: 240px;
  }

  /* 荣誉条是 flex，靠 flex-basis 控制每行个数 */
  .honor-strip .it {
    flex-basis: calc((100% - 20px) / 2);
  }

  .feat-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .qr-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact-top,
  .culture-grid,
  .biz-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  body {
    font-size: 14.5px;
  }

  .wrap,
  .hd-in {
    padding: 0 20px;
  }

  .sec {
    padding: 78px 0;
  }

  .hd-in {
    height: auto;
    padding-top: 14px;
    padding-bottom: 14px;
    flex-wrap: wrap;
  }

  .hd-nav {
    gap: 0;
    flex-wrap: wrap;
  }

  .hd-nav a {
    padding: 8px 11px;
    font-size: 13px;
  }

  .hero-in {
    padding: 72px 20px;
  }

  .hero-mark {
    font-size: 80px;
    top: 30%;
  }

  .tl-item {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .honor-list {
    grid-template-columns: 1fr;
  }

  .honor-strip .it {
    flex-basis: 100%;
  }

  .feat-bar,
  .qr-grid {
    grid-template-columns: 1fr;
  }

  /* 窄屏下两列会挤到中文列放不下，退回单列 */
  .kv.cols-2 {
    grid-template-columns: 1fr;
  }

  .store-grid,
  .loc-grid,
  .loc-grid.cols-2 {
    grid-template-columns: 1fr;
    /* 单列时不需要等高：否则所有卡都被撑成最高那张的高度，白得离谱 */
    grid-auto-rows: auto;
  }

  /* .biz 不加内边距，否则顶部轮播图无法通栏 */
  .card,
  .tel-card,
  .info-card {
    padding: 30px 24px;
  }

  .biz-body {
    padding: 26px 24px 30px;
  }
}

/* ---------- 17. 轮播 / 灯箱按钮：小屏适配 ---------- */
@media (max-width: 760px) {
  /* 卡片底部轮播：按钮缩小并贴近边缘，避免压住缩略图 */
  .cv-nav {
    width: 26px;
    height: 26px;
  }

  .cv-nav svg {
    width: 11px;
    height: 11px;
  }

  .cv-nav.prev {
    left: -6px;
  }

  .cv-nav.next {
    right: -6px;
  }

  /* 灯箱：收窄留白，左右按钮贴边，给图片让出宽度 */
  .lb {
    padding: 58px 14px;
  }

  .lb-nav {
    width: 38px;
    height: 38px;
    font-size: 22px;
  }

  .lb-nav.prev {
    left: 6px;
  }

  .lb-nav.next {
    right: 6px;
  }

  .lb-close {
    right: 14px;
    top: 12px;
    width: 38px;
    height: 38px;
  }
}

/* ---------- 18. 三养之美：小屏改为上下堆叠 ---------- */
@media (max-width: 760px) {
  .card.culture-hero {
    grid-template-columns: 1fr;
    padding: 0;
  }

  .ch-txt {
    padding: 32px 26px;
  }

  .card.culture-hero h3 {
    font-size: 24px;
  }

  /* 堆叠后海报通栏放在文字下方，不再限宽 */
  .ch-fig {
    max-width: none;
    margin: 0;
  }
}

/* ---------- 19. 大块面卡片质感：对角柔光 + 纸张颗粒 ----------
   平涂色块在大面积上会显得死板。这里给「品牌简介 / 35 年历程 / 品牌文化」里的
   几类大卡片统一叠三层背景：纸张颗粒 → 左上高光 → 对角底色渐变。
   底色仍是 --bg-alt，不改变全站配色；只增加受光方向与质感。
   写在文件末尾，确保压过前面各处单独的 background 定义。
   注意：荣誉证书卡（.honor-card）**不在此列**——证书是白纸文档，卡面必须走暖白纸色，
   米黄底会和证件区打架，具体见第 9 节。 */
  .card,
  .ceo,
  .tl,
  .creed,
  .loc,
  .info-card {
    background-color: var(--bg-alt);
    background-image:
      var(--grain),
      radial-gradient(120% 88% at 6% 0%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 58%),
      linear-gradient(155deg, #fbf7f0 0%, var(--bg-alt) 45%, #eee5d5 100%);
    background-repeat: repeat, no-repeat, no-repeat;
    background-size: 160px 160px, 100% 100%, 100% 100%;
  }

/* 三养之美：文字区补一层暖金晕，与右侧那张饱和度很高的金色海报取得分量平衡 */
.card.culture-hero {
  background-image:
    var(--grain),
    radial-gradient(64% 74% at 19% 33%, rgba(184, 148, 74, 0.13), rgba(184, 148, 74, 0) 70%),
    radial-gradient(120% 88% at 6% 0%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 58%),
    linear-gradient(155deg, #fbf7f0 0%, var(--bg-alt) 45%, #eee5d5 100%);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  background-size: 160px 160px, 100% 100%, 100% 100%, 100% 100%;
}

/* 创始人 / AL 先生 肖像卡：文字侧（右侧）加一层暖光，
   让人像与文字两个分区都有光感，右侧大片空白不再发闷 */
.ceo {
  background-image:
    var(--grain),
    radial-gradient(58% 70% at 78% 46%, rgba(184, 148, 74, 0.11), rgba(184, 148, 74, 0) 72%),
    radial-gradient(120% 88% at 6% 0%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 58%),
    linear-gradient(155deg, #fbf7f0 0%, var(--bg-alt) 45%, #eee5d5 100%);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  background-size: 160px 160px, 100% 100%, 100% 100%, 100% 100%;
}

/* 35 年历程：卡片很长（9 个阶段），改用纵向渐变，
   顶部微亮、底部沉稳，长条面才不会像一条均匀的色带 */
.tl {
  background-image:
    var(--grain),
    radial-gradient(70% 16% at 50% 0%, rgba(184, 148, 74, 0.1), rgba(184, 148, 74, 0) 78%),
    linear-gradient(180deg, #fbf7f0 0%, var(--bg-alt) 28%, var(--bg-alt) 76%, #eee6d7 100%);
  background-repeat: repeat, no-repeat, no-repeat;
  background-size: 160px 160px, 100% 100%, 100% 100%;
}

/* 联系页热线卡：底色本来就是「斜向金纱 + 米黄」，这里只补颗粒与右下暖光，
   让金纱不再是均匀的一片，右下角 PAPIRA 暗纹也有光可借 */
.tel-card {
  background-color: var(--bg-alt);
  background-image:
    var(--grain),
    radial-gradient(72% 92% at 88% 98%, rgba(184, 148, 74, 0.18), rgba(184, 148, 74, 0) 68%),
    radial-gradient(120% 88% at 6% 0%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 60%),
    linear-gradient(150deg, rgba(184, 148, 74, 0.18) 0%, rgba(184, 148, 74, 0.04) 46%, rgba(184, 148, 74, 0) 100%);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  background-size: 160px 160px, 100% 100%, 100% 100%, 100% 100%;
}


/* ---------- 20. 错误页（404 / 5xx） ----------
   404 与 5xx 共用一套版式：页头沿用 .page-hd，正文居中一段说明 + 两个按钮。
   替代 Spring Boot 默认的 Whitelabel 页面（带英文堆栈提示，绝不能出现在正式站点上）。 */
.err-wrap {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}

.err-txt {
  font-size: 15px;
  line-height: 2;
  color: var(--text-2);
}

.err-tel {
  font-family: var(--serif);
  font-size: 19px;
  letter-spacing: 0.04em;
  color: var(--gold);
}

.err-actions {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

.err-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 30px;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: #fff;
  background: var(--gold);
  box-shadow: 0 10px 24px rgba(184, 148, 74, 0.22);
  transition: var(--ease);
}

.err-btn:hover {
  background: #a5833d;
}

.err-btn.ghost {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--gold-dim);
  box-shadow: none;
}

.err-btn.ghost:hover {
  border-color: var(--gold);
  background: rgba(184, 148, 74, 0.07);
}