/* ============================================================
   岛屿空间 ISLAND SPACE — 站点样式
   ============================================================ */

:root {
  --paper:        #F6F2EA;
  --paper-warm:   #EDE6D9;
  --paper-deep:   #E3DACA;
  --ink:          #211E18;
  --ink-soft:     #5C564B;
  --ink-faint:    #8B8477;
  --line:         rgba(33, 30, 24, .14);
  --line-soft:    rgba(33, 30, 24, .08);
  --clay:         #A9744E;
  --sand:         #C9A87C;
  --dark:         #1A1815;
  --dark-soft:    #24211C;

  --serif: "Noto Serif SC", "Songti SC", "STSong", "Source Han Serif SC", "SimSun", serif;
  --sans:  "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;

  --wrap: 1240px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.9;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

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

/* ---------- 通用文字 ---------- */

.eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .22em;
  color: var(--clay);
  text-transform: uppercase;
  margin-bottom: 22px;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.34;
  letter-spacing: .01em;
}

h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); }

.muted { color: var(--ink-faint); }

/* ---------- 按钮 ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 34px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .1em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
  white-space: nowrap;
}

.btn--solid {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn--solid:hover { background: var(--clay); border-color: var(--clay); }

.btn--line {
  border-color: var(--line);
  color: var(--ink);
  background: transparent;
}
.btn--line:hover { border-color: var(--ink); }

.btn--ghost {
  border-color: rgba(255, 255, 255, .45);
  color: #fff;
  background: transparent;
}
.btn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }

.btn--block { width: 100%; }

/* ============================================================
   导航
   ============================================================ */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background .45s var(--ease), border-color .45s var(--ease), backdrop-filter .45s;
  border-bottom: 1px solid transparent;
}

.nav__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 40px;
  height: 82px;
  display: flex;
  align-items: center;
  gap: 40px;
}

.nav.is-solid {
  background: rgba(246, 242, 234, .92);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line-soft);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: auto;
}

.brand__mark {
  width: 22px;
  height: 22px;
  border: 1.2px solid currentColor;
  border-radius: 50%;
  position: relative;
  flex: none;
  transition: transform .6s var(--ease);
}
.brand__mark::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .28;
}
.brand:hover .brand__mark { transform: rotate(180deg); }

.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__text strong {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: .16em;
}
.brand__text em {
  font-style: normal;
  font-size: 9px;
  letter-spacing: .28em;
  opacity: .55;
  margin-top: 3px;
}

.nav__links {
  display: flex;
  gap: 34px;
  font-size: 14px;
  letter-spacing: .06em;
}
.nav__links a {
  position: relative;
  padding: 4px 0;
  opacity: .82;
  transition: opacity .3s;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: currentColor;
  transition: width .4s var(--ease);
}
.nav__links a:hover { opacity: 1; }
.nav__links a:hover::after { width: 100%; }

.nav__toggle {
  display: none;
  width: 34px; height: 34px;
  background: none; border: 0; cursor: pointer;
  position: relative;
  color: inherit;
  padding: 0;
}
.nav__toggle span {
  position: absolute;
  left: 6px; right: 6px;
  height: 1px;
  background: currentColor;
  transition: transform .4s var(--ease), opacity .3s;
}
.nav__toggle span:first-child { top: 13px; }
.nav__toggle span:last-child { top: 20px; }
.nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* 首页顶部：导航文字为白色 */
body.at-top .nav { color: #fff; }
body.at-top .nav.is-solid { color: var(--ink); }

body.at-top .nav .btn--line {
  border-color: rgba(255, 255, 255, .5);
  color: #fff;
}
body.at-top .nav .btn--line:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, .12);
}

/* ============================================================
   Hero
   ============================================================ */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: #fff;
}

.hero__media { position: absolute; inset: 0; }
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 58%;
  transform: scale(1.04);
  animation: heroIn 2.4s var(--ease) forwards;
}
@keyframes heroIn {
  to { transform: scale(1); }
}

.hero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(20, 18, 15, .5) 0%, rgba(20, 18, 15, .1) 16%, rgba(20, 18, 15, 0) 30%),
    linear-gradient(to top, rgba(20, 18, 15, .9) 0%, rgba(20, 18, 15, .58) 46%, rgba(20, 18, 15, .3) 100%);
}

.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 40px 96px;
}

.hero .eyebrow { color: var(--sand); }

.hero h1 {
  font-size: clamp(2.5rem, 5.6vw, 4.6rem);
  font-weight: 300;
  letter-spacing: .04em;
  margin-bottom: 26px;
  text-shadow: 0 2px 40px rgba(0, 0, 0, .28);
}

.hero__lead {
  font-size: clamp(.95rem, 1.3vw, 1.06rem);
  color: rgba(255, 255, 255, .8);
  max-width: 620px;
  line-height: 2;
}

.hero__actions {
  display: flex;
  gap: 14px;
  margin-top: 40px;
  flex-wrap: wrap;
}

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  width: 1px;
  height: 54px;
  background: rgba(255, 255, 255, .22);
  overflow: hidden;
  z-index: 2;
}
.hero__scroll span {
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 22px;
  background: rgba(255, 255, 255, .85);
  animation: scrollDot 2.2s var(--ease) infinite;
}
@keyframes scrollDot {
  0%   { transform: translateY(-24px); }
  60%  { transform: translateY(54px); }
  100% { transform: translateY(54px); }
}

/* ============================================================
   数据条
   ============================================================ */

.facts {
  background: var(--paper-warm);
  border-bottom: 1px solid var(--line-soft);
}

.facts__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-top: 56px;
  padding-bottom: 56px;
}

.fact {
  text-align: center;
  padding: 0 16px;
  border-right: 1px solid var(--line-soft);
}
.fact:last-child { border-right: 0; }

.fact strong {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  font-weight: 400;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}
.fact em {
  font-style: normal;
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--clay);
  margin-left: 4px;
}
.fact span {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  color: var(--ink-faint);
  letter-spacing: .04em;
}

/* ============================================================
   通用 section
   ============================================================ */

.section { padding: 130px 0; }

.section__head {
  max-width: 640px;
  margin-bottom: 76px;
}
.section__head h2 { margin-bottom: 24px; }
.section__desc {
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 2;
}

.section__head--light h2 { color: var(--paper); }
.section__head--light .section__desc { color: rgba(246, 242, 234, .58); }
.section__head--light .eyebrow { color: var(--sand); }

/* ============================================================
   品牌故事
   ============================================================ */

.story__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 96px;
  align-items: center;
}

.story__media { position: relative; }
.story__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.story__media figcaption {
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--ink-faint);
}

.story__body h2 { margin-bottom: 30px; }
.story__body p { margin-bottom: 20px; color: var(--ink-soft); }
.story__body p strong { font-weight: 500; color: var(--ink); }

blockquote {
  margin: 38px 0;
  padding-left: 26px;
  border-left: 1px solid var(--clay);
  font-family: var(--serif);
  font-size: 1.12rem;
  line-height: 2;
  color: var(--ink);
}
blockquote cite {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  font-family: var(--sans);
  font-style: normal;
  font-size: 12.5px;
  letter-spacing: .08em;
  color: var(--ink-faint);
}
blockquote cite img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 20%;
  flex: none;
}

/* ============================================================
   风格系列
   ============================================================ */

.collections { background: var(--paper-warm); }

.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}

.card {
  background: var(--paper);
  overflow: hidden;
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px -28px rgba(33, 30, 24, .45);
}

.card__media {
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.card:hover .card__media img { transform: scale(1.07); }

.card__body { padding: 26px 24px 32px; }
.card__body h3 {
  font-size: 1.24rem;
  margin-bottom: 12px;
  letter-spacing: .06em;
}
.card__body p {
  font-size: 13.5px;
  line-height: 1.95;
  color: var(--ink-faint);
}

/* ============================================================
   我们的坚持（深色）
   ============================================================ */

.promise {
  background: var(--dark);
  color: var(--paper);
}
.promise .section__desc { color: rgba(246, 242, 234, .55); }

.promise__item {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 40px;
  padding: 46px 0;
  border-top: 1px solid rgba(246, 242, 234, .13);
}
.promise__item:last-child { border-bottom: 1px solid rgba(246, 242, 234, .13); }

.promise__no {
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: .16em;
  color: var(--sand);
  padding-top: 10px;
}

.promise__text h3 {
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  color: var(--paper);
  margin-bottom: 18px;
  line-height: 1.5;
}
.promise__text p {
  color: rgba(246, 242, 234, .62);
  font-size: 15px;
  line-height: 2.05;
  max-width: 720px;
}
.promise__text p + p { margin-top: 14px; }
.promise__text .muted { color: rgba(246, 242, 234, .4); font-size: 14px; }

.promise__item--split {
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}
.promise__item--split .promise__no { margin-bottom: 22px; padding-top: 0; }
.promise__media img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* ============================================================
   服务承诺
   ============================================================ */

.service__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(4, auto);
  grid-auto-flow: column;
  gap: 0 80px;
  border-top: 1px solid var(--line);
}

.service__grid li {
  display: flex;
  align-items: baseline;
  gap: 28px;
  padding: 30px 4px 28px;
  border-bottom: 1px solid var(--line);
  transition: padding-left .45s var(--ease);
}
.service__grid li:hover { padding-left: 14px; }

.service__grid .val {
  flex: none;
  min-width: 96px;
  display: flex;
  align-items: baseline;
}
.service__grid .num {
  font-family: var(--serif);
  font-size: clamp(1.55rem, 2.3vw, 2.05rem);
  line-height: 1;
}
.service__grid em {
  font-style: normal;
  font-family: var(--serif);
  font-size: .9rem;
  color: var(--clay);
  margin-left: 4px;
}
.service__grid p {
  font-size: 14.5px;
  color: var(--ink-soft);
  letter-spacing: .04em;
}

/* ============================================================
   到店参观
   ============================================================ */

.showroom { background: var(--paper-warm); }

.showroom__grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 90px;
  align-items: start;
}

.showroom__body h2 { margin-bottom: 24px; }
.showroom__body > p { color: var(--ink-soft); max-width: 520px; }

.info {
  margin: 46px 0 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 40px;
}
.info dt {
  font-size: 11.5px;
  letter-spacing: .2em;
  color: var(--clay);
  margin-bottom: 9px;
}
.info dd {
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--ink);
}
.info dd a { border-bottom: 1px solid var(--line); transition: border-color .3s; }
.info dd a:hover { border-color: var(--ink); }
.hint { font-size: 11.5px; color: var(--ink-faint); margin-left: 6px; }

.showroom__actions { display: flex; gap: 14px; flex-wrap: wrap; }

.showroom__card {
  background: var(--paper);
  padding: 44px 38px 40px;
  border: 1px solid var(--line-soft);
}
.showroom__card h3 {
  font-size: 1.35rem;
  margin-bottom: 12px;
  letter-spacing: .06em;
}
.showroom__card > p {
  font-size: 13.5px;
  color: var(--ink-faint);
  margin-bottom: 30px;
}

/* 蜜罐：移到屏外而不是 display:none —— 部分机器人会跳过不可见元素，
   而真实用户（含键盘 Tab）也碰不到它（tabindex=-1 + aria-hidden）。
   与 apps/site 的留资表单同一套做法。 */
.hp-field {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.form label { display: block; margin-bottom: 20px; }
.form label > span {
  display: block;
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--ink-soft);
  margin-bottom: 9px;
}
.form input,
.form textarea {
  width: 100%;
  padding: 13px 0;
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 300;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  transition: border-color .4s;
  resize: none;
}
.form input::placeholder,
.form textarea::placeholder { color: var(--ink-faint); opacity: .7; }
.form input:focus,
.form textarea:focus { outline: none; border-bottom-color: var(--ink); }

.form button { margin-top: 10px; }

.form__tip {
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.7;
  min-height: 22px;
  color: var(--clay);
}
.form__tip.is-error { color: #B4483C; }

/* ============================================================
   Footer
   ============================================================ */

.footer {
  background: var(--dark);
  color: rgba(246, 242, 234, .72);
  padding: 84px 0 34px;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 60px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(246, 242, 234, .12);
}

.footer__brand strong {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 400;
  letter-spacing: .16em;
  color: var(--paper);
  display: inline-block;
  margin-left: 10px;
  vertical-align: middle;
}
.footer__brand .brand__mark { display: inline-block; vertical-align: middle; }
.footer__brand p { font-size: 13.5px; margin-top: 14px; }
.footer__brand .muted { color: rgba(246, 242, 234, .4); line-height: 1.9; }

.footer__col h4 {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: .22em;
  color: var(--sand);
  margin-bottom: 20px;
}
.footer__col a,
.footer__col p {
  display: block;
  font-size: 13.5px;
  line-height: 2.1;
  opacity: .78;
  transition: opacity .3s;
}
.footer__col a:hover { opacity: 1; }

.footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 26px;
  font-size: 12px;
  color: rgba(246, 242, 234, .38);
}
.footer__bottom .muted { color: rgba(246, 242, 234, .3); }

/* ============================================================
   滚动进场
   ============================================================ */

/*
 * 进场动画：**默认可见**，只有 main.js 真正执行到位（给 <html> 加了 anim-ready）
 * 才隐藏未进入视口的元素。
 *
 * ⚠️ 反过来写（CSS 里直接 opacity:0、靠 JS 加 .is-in 才显现）会让整页在
 * 脚本没加载成功时变成空白 —— 2026-10-26 实测：拦掉 /assets/js/main.js 后
 * 76 个 .reveal 区块**全部不可见**，只剩头图与导航。
 * 而“脚本没加载”比“用户禁用 JS”常见得多：部署漏文件、CDN/网关拦截、路径改错、
 * 静态资源缓存失效。`<noscript>` 只能盖住后者，盖不住前者。
 * 现在这层是单一机制：没有 anim-ready = 内容可见（只是没有动画）。
 */
.reveal {
  opacity: 1;
  transform: none;
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
html.anim-ready .reveal:not(.is-in) {
  opacity: 0;
  transform: translateY(26px);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ============================================================
   口号跑马灯
   ============================================================ */

.marquee {
  overflow: hidden;
  background: var(--paper);
  border-bottom: 1px solid var(--line-soft);
  padding: 26px 0;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 44s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__group {
  display: flex;
  align-items: center;
  flex: none;
}

.marquee__group span {
  font-family: var(--serif);
  font-size: clamp(.92rem, 1.4vw, 1.12rem);
  letter-spacing: .14em;
  color: var(--ink-soft);
  white-space: nowrap;
  padding: 0 34px;
}

.marquee__group i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--clay);
  opacity: .6;
  flex: none;
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* ============================================================
   对标品牌
   ============================================================ */

.bench {
  margin-top: 62px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px 40px;
  flex-wrap: wrap;
}
.bench__label {
  font-size: 13px;
  color: var(--ink-faint);
  letter-spacing: .04em;
}
.bench__list {
  font-family: var(--serif);
  font-size: clamp(.95rem, 1.4vw, 1.08rem);
  letter-spacing: .1em;
  color: var(--ink);
}

/* ============================================================
   服务体系
   ============================================================ */

.system__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.system__col {
  padding: 42px 38px 48px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background .5s var(--ease);
}
.system__col:hover { background: var(--paper-warm); }

.system__col h3 {
  font-size: 1.18rem;
  letter-spacing: .16em;
  margin-bottom: 32px;
  color: var(--ink);
}

.system__col ol { list-style: none; counter-reset: sys; }

.system__col li {
  counter-increment: sys;
  position: relative;
  padding-left: 36px;
  margin-bottom: 28px;
}
.system__col li:last-child { margin-bottom: 0; }

.system__col li::before {
  content: "0" counter(sys);
  position: absolute;
  left: 0;
  top: 2px;
  font-family: var(--serif);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--clay);
}

.system__col strong {
  display: block;
  font-weight: 500;
  font-size: 14.5px;
  letter-spacing: .04em;
  margin-bottom: 7px;
  color: var(--ink);
}
.system__col span {
  display: block;
  font-size: 13.5px;
  line-height: 1.95;
  color: var(--ink-faint);
}

/* ============================================================
   创始人 / 创业历程
   ============================================================ */

.founder { background: var(--paper); }

.founder__grid {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 92px;
  align-items: start;
}

.founder__media { position: relative; }

.founder__media img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 22%;
  filter: saturate(.94) contrast(1.02);
}

.founder__tag {
  position: absolute;
  left: 0;
  bottom: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 18px 26px 20px;
}
.founder__tag strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 400;
  letter-spacing: .16em;
}
.founder__tag span {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  letter-spacing: .1em;
  color: var(--sand);
}

.founder__body h2 { margin-bottom: 26px; }
.founder__body > p { color: var(--ink-soft); margin-bottom: 20px; }

.timeline {
  list-style: none;
  margin: 40px 0 34px;
  border-top: 1px solid var(--line);
}

.timeline li {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 28px;
  padding: 17px 0;
  border-bottom: 1px solid var(--line-soft);
}

.timeline time {
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--clay);
  padding-top: 4px;
}

.timeline p {
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--ink-soft);
}

.founder__note {
  font-size: 13px;
  line-height: 1.9;
  color: var(--ink-faint);
  padding-left: 18px;
  border-left: 1px solid var(--line);
}

/* ============================================================
   家具品类
   ============================================================ */

.categories { background: var(--paper-warm); }

.cat__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.cat__grid li {
  padding: 34px 32px 36px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background .5s var(--ease), padding-left .45s var(--ease);
}
.cat__grid li:hover {
  background: var(--paper);
  padding-left: 40px;
}

.cat__grid h3 {
  font-size: 1.16rem;
  font-weight: 400;
  letter-spacing: .1em;
  margin-bottom: 10px;
}

.cat__grid p {
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--ink-faint);
}

/* ============================================================
   微信咨询
   ============================================================ */

.wechat {
  margin-top: 46px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 28px;
}

.wechat img {
  width: 140px;
  height: 140px;
  flex: none;
  background: #fff;
  padding: 8px;
  border: 1px solid var(--line-soft);
}

.wechat__text strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: .12em;
  margin-bottom: 9px;
}
.wechat__text p {
  font-size: 13.5px;
  line-height: 1.95;
  color: var(--ink-faint);
}

/* ============================================================
   展厅实景（2026-10-27，PR #377）
   ============================================================ */

.gallery { background: var(--paper); }

.gallery__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}

.gallery__grid figure {
  margin: 0;
  overflow: hidden;
}

.gallery__grid img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  transition: transform .9s var(--ease);
}

.gallery__grid figure:hover img {
  transform: scale(1.03);
}

.gallery__grid figcaption {
  margin-top: 14px;
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--ink-faint);
}

@media (max-width: 860px) {
  .gallery__grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ============================================================
   响应式
   ============================================================ */

@media (max-width: 1100px) {
  .wrap { padding: 0 32px; }
  .nav__inner { padding: 0 32px; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .story__grid { gap: 60px; }
  .showroom__grid { grid-template-columns: 1fr; gap: 56px; }
  .showroom__card { max-width: 520px; }
  .service__grid { grid-template-columns: repeat(2, 1fr); }
  .founder__grid { grid-template-columns: 1fr; gap: 48px; }
  .founder__media { max-width: 380px; }
}

@media (max-width: 860px) {
  /**
   * 移动端导航：**无脚本时静态展开、完全可用**，有脚本时才是开关菜单。
   *
   * ⚠️ 两条都是 2026-10-26 003 审查抓到的真实缺陷，别改回去：
   *
   * 1. **兜底布局本身要成立**（P1-1）：`.nav__links` 是 `.nav__inner`（display:flex;height:82px;
   *    align-items:center）的 flex 子项。只把它改成 `position:static` 不顶用 ——
   *    brand / 导航 / CTA 三者挤在同一行，flex-shrink 把导航压到 18px 宽，链接变成
   *    一字一行、整块高 686px 且 top:-307px，六个链接只有三个落在视口内
   *    （`position:fixed` 永远滚不到）。必须让 `.nav__inner` 换行、导航占整行。
   * 2. **导航本身要回到文档流**：`.nav` 是 `position:fixed`，无脚本时它会长到好几行、
   *    把首屏盖住。降级成 static，视觉略差但内容不被遮；字色也要强制深色
   *    （`body.at-top` 的白字是写给压在深色头图上的 fixed 导航的）。
   */
  html:not(.js) .nav {
    position: static;
    color: var(--ink);
    background: var(--bg);
    border-bottom-color: var(--line-soft);
  }
  html:not(.js) .nav__inner {
    flex-wrap: wrap;
    height: auto;
    padding: 14px 26px 0;
    gap: 0;
  }
  html:not(.js) .nav__cta {
    order: 2;
    margin-left: auto;
  }
  html:not(.js) .nav__links {
    order: 3;
    flex: 1 0 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px 18px;
    padding: 12px 0 14px;
    font-size: 13px;
  }
  html:not(.js) .nav__toggle { display: none; }

  /* 有脚本：收成开关菜单 */
  html.js .nav__links,
  html.js .nav__cta { display: none; }
  html.js .nav__toggle { display: block; }

  html.js .nav__links.is-open {
    display: flex;
    position: fixed;
    inset: 82px 0 auto 0;
    flex-direction: column;
    gap: 0;
    background: var(--paper);
    color: var(--ink);
    padding: 12px 32px 28px;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 20px 40px -30px rgba(0, 0, 0, .5);
  }
  html.js .nav__links.is-open a {
    padding: 16px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 15px;
  }
  body.at-top .nav.is-solid .nav__links.is-open { color: var(--ink); }

  .section { padding: 92px 0; }
  .section__head { margin-bottom: 52px; }

  .hero__content { padding: 0 32px 76px; }
  .br-pc { display: none; }

  .facts__grid { grid-template-columns: repeat(2, 1fr); gap: 40px 0; padding: 44px 0; }
  .fact:nth-child(2) { border-right: 0; }

  .story__grid { grid-template-columns: 1fr; gap: 46px; }
  .story__media img { aspect-ratio: 4 / 3; }

  .promise__item { grid-template-columns: 1fr; gap: 16px; padding: 38px 0; }
  .promise__item--split { grid-template-columns: 1fr; gap: 30px; }

  .info { grid-template-columns: 1fr; gap: 26px; }

  .system__grid { grid-template-columns: 1fr; }
  .system__col { padding: 36px 28px 40px; }

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

  .bench { flex-direction: column; align-items: flex-start; gap: 14px; }
  .marquee__group span { padding: 0 22px; }

  .service__grid { gap: 0 40px; }
  .service__grid .val { min-width: 78px; }
  .service__grid li { gap: 20px; }

  .footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .wrap { padding: 0 22px; }
  .nav__inner { padding: 0 22px; height: 72px; }
  .nav__links.is-open { top: 72px; padding: 8px 22px 22px; }
  .hero__content { padding: 0 22px 68px; }
  .cards { grid-template-columns: 1fr; }
  .service__grid { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
  .cat__grid { grid-template-columns: 1fr; }
  .timeline li { grid-template-columns: 78px 1fr; gap: 16px; }
  .wechat { flex-direction: column; align-items: flex-start; gap: 22px; }
  .showroom__card { padding: 34px 26px 30px; }
  .btn { padding: 13px 26px; }
  .hero__actions { gap: 10px; }
  .facts__grid { grid-template-columns: 1fr 1fr; }
  .fact strong { font-size: 1.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  /* 减动效时就连进场的位移也不做：直接全部可见，不保留过渡 */
  html.anim-ready .reveal,
  .reveal { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
}

/* ── 常见问题（2026-11-05，GEO）──────────────────────────── */
.faq__list { border-top: 1px solid var(--line); }
.faq__list details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq__list summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ink);
}
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after { content: "＋"; color: var(--ink-faint); }
.faq__list details[open] summary::after { content: "－"; }
.faq__list p { margin-top: 10px; color: var(--ink-soft); line-height: 1.8; font-size: 15px; }