/* ═══════════════════════════════════════════════════════════
   哈墅 HASHU · 设计系统
   纯白底   = 唯一底色。区块靠 1px 线与留白分区，不靠底色差
   深块面   = 首屏 / 内页头（#0A0A0A，影像底）；预约区（#1F1F1F 深炭）
   金       = 唯一的撞色，只做点缀（白底古铜金 / 深底香槟金，同一色相压两级明度）
   ═══════════════════════════════════════════════════════════ */

/* ── 0. 令牌 ──
   纯色体系：白（底）+ 黑（块面）+ 金（点缀），不用任何中间调的米/灰黄。
   默认上下文 = 白底黑字。深色块面加 .on-dark，内部 --t* / --ln* / --accent 自动翻转。
   换撞色只需改 --accent 三兄弟，别满文件找颜色。 */
:root{
  /* 纯色：只有白。区块靠 1px 线与留白分隔，不靠底色差 */
  --paper:#FFFFFF; --paper-2:#FAFAFA; --card:#FFFFFF;
  /* 白底上的文字（主/次/弱）—— 纯黑系，不带暖调 */
  --t1:#0F0F0F; --t2:rgba(15,15,15,.60); --t3:rgba(15,15,15,.40);
  /* 白底上的线条 */
  --ln:rgba(15,15,15,.10); --ln-2:rgba(15,15,15,.22);
  /* 撞色 · 金。品牌金是香槟金 #C6A15B，但它直上白底只有 2.43:1 —— 小字必糊。
     解法是沿同一色相（H≈39°）往下压明度，而不是换色相：
       accent    #8A6A32  5.01:1  线条 / 眼眉 / 小字 / hover  ← 与标识副标同色
       accent-lt #A07C36  3.87:1  白底大字强调（≥24px，3:1 即达标）
       accent-pale #C6A15B        只做细边框与装饰，不承载信息
     深色块面整体提亮成香槟金，见 .on-dark。 */
  --accent:#8A6A32;      /* 主强调：线条 / 眼眉 / 小字 / hover */
  --accent-lt:#A07C36;   /* 提亮：白底上的大字强调 */
  --accent-pale:#C6A15B; /* 香槟金：细边框、装饰，与标识 / 首屏同色 */
  --accent-ink:#FFFFFF;  /* 压在撞色填充上的字（白底深金 -> 白字，5.01:1） */
  --ok-bd:rgba(138,106,50,.45); --ok-bg:rgba(138,106,50,.07);
  /* 块面。首屏/内页头是影像底，纯黑才压得住；预约区不做纯黑，用深炭 */
  --block:#0A0A0A; --block-soft:#1F1F1F;
  /* 错误态用墨色 —— 撞色已经是金，不能再拿它当错误色（后台警示另走 WP 原生红） */
  --err:#0F0F0F; --err-ink:#FFFFFF;
  --serif:"Noto Serif SC","Source Han Serif SC","Songti SC",STSong,SimSun,Georgia,serif;
  --sans:"Noto Sans SC","PingFang SC","Microsoft YaHei","Hiragino Sans GB",system-ui,-apple-system,sans-serif;
  --pad:clamp(22px,5.4vw,96px);
  --ease:cubic-bezier(.22,1,.36,1);
  --ease2:cubic-bezier(.65,0,.35,1);
}
/* 深色块面局部反转：金整体提亮成香槟金，否则深金糊在炭灰里 */
.on-dark{
  --t1:#FFFFFF; --t2:rgba(255,255,255,.66); --t3:rgba(255,255,255,.42);
  --ln:rgba(255,255,255,.14); --ln-2:rgba(255,255,255,.28);
  --accent:#C6A15B; --accent-lt:#E1C893; --accent-pale:#C6A15B;
  --accent-ink:#22211F;  /* 深底金 #C6A15B 对黑 8.16:1；压白字只有 2.43:1 -> 必须墨字 */
  --ok-bd:rgba(198,161,91,.45); --ok-bg:rgba(198,161,91,.12);
  --err:#FFFFFF; --err-ink:#0F0F0F;
  --card:rgba(255,255,255,.06);
  color:var(--t2);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;color-scheme:light}
body{
  margin:0;background:var(--paper);color:var(--t2);
  font-family:var(--sans);font-weight:300;font-size:15.5px;line-height:1.95;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.lock{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
h1,h2,h3,h4,h5{font-family:var(--serif);font-weight:400;margin:0;color:var(--t1);
  letter-spacing:.02em;line-height:1.32}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0}
li{list-style:none}
::selection{background:#0F0F0F;color:#FFFFFF}
::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-track{background:#FFFFFF}
::-webkit-scrollbar-thumb{background:#D6D6D6}
::-webkit-scrollbar-thumb:hover{background:var(--t1)}

.shell{padding-inline:var(--pad)}
.sec{padding-block:clamp(96px,12vw,188px)}
.sec--sm{padding-block:clamp(60px,7.5vw,112px)}
/* .on-light = 中性次级底（#FAFAFA），保留区块之间的节奏；不带任何暖色 */
.on-light{background:var(--paper-2)}

.eyebrow{display:inline-flex;align-items:center;gap:16px;
  font-size:11px;font-weight:400;letter-spacing:.34em;text-transform:uppercase;color:var(--accent)}
.eyebrow::before{content:"";width:44px;height:1px;background:currentColor;opacity:.7;flex:none}
h2.big{font-size:clamp(29px,3.7vw,56px);line-height:1.34;letter-spacing:.03em}
.lead{margin-top:26px;max-width:660px;font-size:16px;line-height:2.05}

/* ── 按钮 ── */
.btn{display:inline-flex;align-items:center;gap:14px;padding:17px 38px;
  border:1px solid var(--ln-2);color:var(--t1);font-size:12.5px;font-weight:400;
  letter-spacing:.22em;cursor:pointer;position:relative;overflow:hidden;
  transition:color .5s var(--ease),border-color .5s var(--ease);background:transparent}
.btn span{position:relative;z-index:2}
.btn svg{position:relative;z-index:2;transition:transform .5s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;background:var(--accent);
  transform:translateY(101%);transition:transform .55s var(--ease);z-index:1}
.btn:hover{color:var(--accent-ink);border-color:var(--accent)}
.btn:hover::before{transform:translateY(0)}
.btn:hover svg{transform:translateX(6px)}
/* 主按钮：白底上用纯黑块面，与白底形成最强对比 */
.btn--solid{background:var(--t1);border-color:var(--t1);color:#FFFFFF}
.btn--solid::before{background:var(--accent)}
.btn--solid:hover{color:var(--accent-ink);border-color:var(--accent)}
/* 深色块面里反过来：金主按钮（压墨字）+ 白字描边次按钮 */
.on-dark .btn:hover{color:var(--accent-ink)}
.on-dark .btn--solid{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.on-dark .btn--solid::before{background:#FFFFFF}
.on-dark .btn--solid:hover{color:var(--accent-ink);border-color:#FFFFFF}

[data-reveal]{--d:0s;
  opacity:0;transform:translateY(34px);
  transition:opacity 1.05s var(--ease) var(--d),transform 1.05s var(--ease) var(--d)}
[data-reveal].in{opacity:1;transform:none}

@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

/* ── 2. 顶栏 ──
   常驻白色玻璃条。首屏换成白天亮照片后，透明顶栏的白字会看不见，
   所以不再做「透明 → 滚动变白」双态，全程白底深字，到哪一页都读得清。 */
.progress{position:fixed;top:0;left:0;height:1px;width:0;background:var(--accent);z-index:120}
.top{position:fixed;inset:0 0 auto;z-index:110;
  /* 顶部安全区：iPhone 刘海 / 灵动岛下不压内容 */
  padding:calc(15px + env(safe-area-inset-top)) var(--pad) 15px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:rgba(255,255,255,.90);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--ln);color:var(--t1)}
.brand{display:flex;align-items:center;gap:13px;color:var(--t1);
  --lg-fill:#C6A15B;--lg-mark:#453119;--lg-sub:#8A6A32}
.brand svg{width:38px;height:38px;flex:none;transition:transform .6s var(--ease)}
/* 纯金印：大圆角实心金块 + 深棕「墅」字，四边不留任何描边 / 内衬线。
   字用 <text> 而不是描边 path —— 「墅」14 画，做成描边 path 在 22px 显示尺寸下会糊成一团；
   <text> 直接吃系统衬线体的字形，任何中文系统都能正确渲染。
   底色恒定是香槟金 ⇒ 字色写死深棕，不跟 --t1 / .on-dark 翻转（否则首屏翻成白色糊在金底上）。 */
.brand svg .lg-fill{fill:var(--lg-fill)}
.brand svg .lg-word{font-family:var(--serif);font-size:24px;font-weight:700;fill:var(--lg-mark)}
.brand:hover svg{transform:translateY(-3px)}
.brand b{display:block;font-family:var(--serif);font-size:19px;font-weight:700;letter-spacing:.2em;line-height:1}
/* 口号行「开开♥装别墅」：7 个字符天然长过「哈 墅」，字距收回正常值即可。
   line-height 给死 13px —— 顶栏在窄视口下由文字行盒撑高，行盒一旦浮动就会把顶栏压矮
   （19 + 5 + 13 = 37 < 方块 38px，顶栏高度仍由方块决定，pageH 才能严格零回归）。 */
.brand em{display:block;font-style:normal;font-weight:600;color:var(--lg-sub);
  font-size:9.5px;letter-spacing:.1em;line-height:13px;margin-top:5px}
/* 心形用 SVG 而非 ♥/❤：SVG 才能跟着 currentColor 走金棕体系，
   emoji 是固定彩色字形，会把标识切出一块红。 */
.brand em .lg-heart{width:.8em;height:.73em;fill:currentColor;display:inline-block;
  vertical-align:-.02em;margin:0 .09em}
.top__right{display:flex;align-items:center;gap:clamp(14px,2.4vw,34px)}
.top__nav{display:flex;gap:clamp(14px,2.2vw,32px);font-size:12.5px;letter-spacing:.14em;color:var(--t2)}
.top__nav a{position:relative;padding:4px 0}
.top__nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--accent);transition:width .5s var(--ease)}
.top__nav a:hover{color:var(--accent)}
.top__nav a:hover::after,.top__nav a.on::after{width:100%}
.top__nav a.on{color:var(--t1)}
.top__tel{display:flex;align-items:center;gap:9px;font-size:13px;letter-spacing:.1em;color:var(--t2)}
.top__tel:hover{color:var(--accent)}
.top__tel svg{width:14px;height:14px}
/* 顶栏菜单按钮：**只在移动层（≤1080px）存在**。
   桌面端顶栏本身就是完整导航（首页 / 工艺验收 / 施工团队 / 动态 / 别墅业务 / 预约量房），
   再挂一个「菜单」按钮去展开同一套链接，等于同一屏里两个入口 —— 所以 >1080 一律不渲染，
   显示开关交给文件末 18 节的窄屏块（那里同时把它做成金胶囊）。
   手机端顶栏高度是由这个按钮撑的（36.9px > 金印 36px）：所以窄屏块里把行盒锁成固定
   20.9px，让字号与顶栏高度彻底解耦 —— 这样才敢缩字号而全站 pageH 不掉。 */
.burger{display:none;align-items:center;gap:12px;font-size:11px;letter-spacing:.3em;
  line-height:1.9;color:var(--t2)}
.burger span{white-space:nowrap}
.burger:hover{color:var(--accent)}
.burger i{display:block;width:26px;height:8px;position:relative}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:100%;height:1px;
  background:currentColor;transition:transform .45s var(--ease)}
.burger i::before{top:0}.burger i::after{bottom:0}
.burger.on i::before{transform:translateY(3.5px) rotate(45deg);background:var(--accent)}
.burger.on i::after{transform:translateY(-3.5px) rotate(-45deg);background:var(--accent)}
.menu{position:fixed;inset:0;z-index:100;background:var(--paper);
  display:grid;grid-template-columns:1.15fr .85fr;
  clip-path:inset(0 0 100% 0);transition:clip-path .85s var(--ease)}
.menu.on{clip-path:inset(0 0 0 0)}
.menu__l{padding:calc(var(--pad) + 90px) var(--pad) calc(60px + env(safe-area-inset-bottom));display:flex;
  flex-direction:column;justify-content:center;gap:2px;overflow-y:auto}
.menu__l a{font-family:var(--serif);font-size:clamp(26px,3.4vw,44px);color:var(--t1);
  padding:12px 0;display:flex;align-items:baseline;gap:20px;width:fit-content;
  opacity:0;transform:translateY(26px);
  transition:opacity .7s var(--ease),transform .7s var(--ease),color .4s}
.menu.on .menu__l a{opacity:1;transform:none}
.menu__l a:hover{color:var(--accent)}
.menu__l a small{font-family:var(--sans);font-size:11px;color:var(--accent);letter-spacing:.2em}
.menu__r{border-left:1px solid var(--ln);padding:calc(var(--pad) + 90px) var(--pad) calc(60px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;justify-content:flex-end;gap:34px;background:var(--paper-2)}
.menu__r img{width:100%;aspect-ratio:4/3;object-fit:cover}
.menu__r dl{display:grid;gap:22px}
.menu__r dt{font-size:10.5px;letter-spacing:.3em;color:var(--accent);text-transform:uppercase}
.menu__r dd{margin:6px 0 0;color:var(--t2);font-size:14px;line-height:1.85}

/* ── 3. HERO ──
   白天亮照片 + 左侧纯黑硬边面板。
   之所以在亮图上**不用**渐变压暗：渐变盖在白墙上会糊出一条灰雾带，
   正是之前被否掉的观感。改成实心块面，硬切 —— 照片保持原亮度，
   文字落在纯黑上，两边都不将就。 */
.hero{--hp:clamp(330px,47%,760px);
  position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  justify-content:flex-end;overflow:hidden;background:var(--block)}
.hero__bg{position:absolute;inset:0 0 0 var(--hp);z-index:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:52% 46%}
/* 面板：从左边一路实心到底，右缘一条硬边就是照片的起幅 */
.hero__scrim{position:absolute;inset:0 auto 0 0;z-index:1;width:var(--hp);background:var(--block)}
.hero__body{position:relative;z-index:2;padding-inline:var(--pad);
  padding-top:120px;flex:1;display:flex;flex-direction:column;justify-content:center;max-width:var(--hp)}
.hero h1{font-size:clamp(40px,7.1vw,106px);line-height:1.1;letter-spacing:.04em;margin-top:30px;color:#fff}
.hero h1 .ln{display:block}
.hero h1 .ln i{display:block;font-style:normal}
.hero h1 em{font-style:normal;color:var(--accent-lt)}
.hero__sub{max-width:560px;margin-top:34px;color:rgba(255,255,255,.70);
  font-size:15.5px;line-height:2.1}
.hero__sub b{color:var(--t1);font-weight:400}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:46px}
/* 数据条铺满整幅、实心底，右侧压在照片上也不吃字 */
.hero__stats{position:relative;z-index:3;border-top:1px solid var(--ln);
  background:var(--block);padding-inline:var(--pad);
  display:grid;grid-template-columns:repeat(4,1fr)}
.hero__stats-list>div{padding:30px 28px 34px;border-left:1px solid var(--ln)}
.hero__stats-list>div:first-child{border-left:0;padding-left:0}
.hero__stats b{display:block;font-family:var(--serif);font-size:clamp(26px,3.1vw,42px);
  color:var(--t1);font-weight:400;line-height:1;white-space:nowrap}
.hero__stats b i{font-style:normal;font-size:.44em;color:var(--accent);margin-left:6px}
.hero__stats p{margin-top:10px;font-size:11px;letter-spacing:.24em;color:var(--t3)}

/* ── 4. 区域条 ── */
.strip{border-block:1px solid var(--ln);padding-block:24px;overflow:hidden}
.strip__in{display:flex;align-items:center;gap:clamp(16px,2.6vw,48px);
  font-family:var(--serif);font-size:clamp(14px,1.5vw,20px);color:var(--t3);letter-spacing:.2em;
  white-space:nowrap;overflow-x:auto;scrollbar-width:none}
.strip__in::-webkit-scrollbar{display:none}
.strip__in b{color:var(--accent);font-weight:400;font-size:11px;letter-spacing:.3em;
  font-family:var(--sans);flex:none}
.strip__in span{transition:color .4s;flex:none}
.strip__in span:hover{color:var(--t1)}
.strip__in i{width:4px;height:4px;border-radius:50%;background:var(--ln-2);flex:none}

/* ── 5. 两栏通用 ── */
.two{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,7vw,120px);align-items:start}
.two--ledger{grid-template-columns:.78fr 1.22fr}
.two--craft{grid-template-columns:1.25fr .75fr}
.body p{font-size:16px;line-height:2.1;color:var(--t2)}
.body p+p{margin-top:24px}
.body p:first-child{color:var(--t1);font-size:17.5px}
.sign{margin-top:38px;font-family:var(--serif);font-size:15px;color:var(--accent);letter-spacing:.16em}

/* ── 6. 数据 ── */
.nums{border-top:1px solid var(--ln);display:grid;grid-template-columns:repeat(4,1fr)}
.nums--3{grid-template-columns:repeat(3,1fr)}
.nums div{padding:clamp(38px,5vw,66px) clamp(18px,2.4vw,38px);
  border-left:1px solid var(--ln);border-bottom:1px solid var(--ln)}
.nums div:first-child{border-left:0;padding-left:0}
.nums b{display:block;font-family:var(--serif);font-size:clamp(38px,5.6vw,78px);
  line-height:.95;color:var(--t1);font-weight:400;white-space:nowrap}
.nums b i{font-style:normal;font-size:.32em;color:var(--accent);margin-left:8px;letter-spacing:.1em}
.nums p{margin-top:16px;font-size:11.5px;letter-spacing:.24em;color:var(--t3)}

/* ── 7. 四重承诺 ── */
.promise{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:1px solid var(--ln)}
.promise article{padding:clamp(30px,3.4vw,48px) clamp(18px,2.2vw,32px) clamp(34px,3.8vw,54px);
  border-left:1px solid var(--ln);border-bottom:1px solid var(--ln);position:relative;overflow:hidden}
.promise article:first-child{border-left:0;padding-left:0}
.promise article::before{content:"";position:absolute;left:0;top:0;width:0;height:2px;
  background:var(--accent);transition:width .8s var(--ease)}
.promise article:hover::before{width:100%}
.promise b.n{display:block;font-family:var(--serif);font-size:12px;color:var(--accent);letter-spacing:.2em}
.promise h3{margin-top:20px;font-size:clamp(18px,1.7vw,23px);letter-spacing:.08em}
.promise p{margin-top:16px;font-size:14px;line-height:2;color:var(--t3)}
.promise span{margin-top:22px;display:inline-block;font-size:11.5px;letter-spacing:.2em;color:var(--accent)}

/* ── 8. 报价清单（预算透明） ── */
.ledger{border:1px solid var(--ln-2);background:var(--card)}
.ledger__hd{display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:18px 22px;border-bottom:1px solid var(--ln);flex-wrap:wrap}
.ledger__hd b{font-family:var(--serif);font-size:16px;letter-spacing:.1em}
.ledger__hd span{font-size:11.5px;letter-spacing:.16em;color:var(--t3)}
.ledger__row{display:grid;grid-template-columns:1.5fr 1.7fr 1.9fr .8fr;gap:16px;
  padding:15px 22px;border-bottom:1px solid var(--ln);font-size:13px;align-items:baseline}
.ledger__row:last-child{border-bottom:0}
.ledger__row.head{background:rgba(15,15,15,.035);font-size:10.5px;letter-spacing:.2em;color:var(--t3)}
.ledger__row b{font-weight:400;color:var(--t1)}
.ledger__row i{font-style:normal;color:var(--t2);font-size:12.5px;line-height:1.75}
.ledger__row u{text-decoration:none;color:var(--accent);font-size:12.5px}
.ledger__row span{text-align:right;color:var(--t2);font-variant-numeric:tabular-nums}
.ledger__ft{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:18px 22px;background:rgba(15,15,15,.035);flex-wrap:wrap}
.ledger__ft span{font-size:11.5px;letter-spacing:.14em;color:var(--t3)}
.ledger__ft b{font-family:var(--serif);font-size:19px;color:var(--t1)}

/* ── 9. 参数行 / 节点计数器 / 阶段 ── */
.craft__rows div{display:flex;justify-content:space-between;align-items:baseline;
  gap:18px;padding:17px 0;border-top:1px solid var(--ln)}
.craft__rows div:last-child{border-bottom:1px solid var(--ln)}
.craft__rows dt{font-size:13px;letter-spacing:.12em;color:var(--t3)}
.craft__rows dd{font-family:var(--serif);font-size:23px;color:var(--t1)}
.craft__rows dd i{font-style:normal;font-size:12px;color:var(--accent);
  margin-left:7px;letter-spacing:.14em}

.gauge{border-top:1px solid var(--ln)}
.gauge__row{display:grid;grid-template-columns:56px 1fr auto;gap:clamp(14px,2.4vw,30px);
  align-items:center;padding:20px 0;border-bottom:1px solid var(--ln);
  transition:padding-left .55s var(--ease)}
.gauge__row:hover{padding-left:12px}
.gauge__row em{font-style:normal;font-family:var(--serif);font-size:12px;color:var(--accent);letter-spacing:.2em}
.gauge__row h3{font-size:clamp(16px,1.6vw,21px);letter-spacing:.1em;font-weight:400}
.gauge__row .bar{grid-column:2;height:1px;background:var(--ln);position:relative;margin-top:10px}
.gauge__row .bar i{position:absolute;left:0;top:0;height:100%;width:0;background:var(--accent);
  transition:width 1.2s var(--ease)}
.gauge__row.in .bar i{width:var(--w)}
.gauge__row u{grid-row:1/3;grid-column:3;text-decoration:none;font-family:var(--serif);
  font-size:clamp(20px,2.2vw,30px);color:var(--t1);font-variant-numeric:tabular-nums}
.gauge__row u s{text-decoration:none;font-size:.42em;color:var(--accent);margin-left:5px;letter-spacing:.1em}

.stage{border-top:1px solid var(--ln);padding:clamp(20px,2.6vw,30px) 0}
.stage__hd{display:flex;align-items:baseline;gap:clamp(14px,2.2vw,26px);flex-wrap:wrap}
.stage__no{font-family:var(--serif);font-size:12.5px;color:var(--accent);letter-spacing:.2em}
.stage__hd h3{flex:1;font-size:clamp(19px,2vw,26px);letter-spacing:.08em}
.stage__cnt{font-size:12px;letter-spacing:.14em;color:var(--t3);
  font-variant-numeric:tabular-nums}
.stage__cnt em{font-style:normal;font-family:var(--serif);font-size:22px;color:var(--accent);margin-right:5px}
.stage__tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.stage__tabs li{border:1px solid var(--ln);padding:5px 11px;font-size:12.5px;color:var(--t3)}
.stage__tabs li b{font-weight:400;color:var(--t1)}
.stage__tabs li i{font-style:normal;color:var(--accent);margin-left:7px;font-size:12px}
.stage details{margin-top:20px;border-top:1px solid var(--ln);padding-top:16px}
.stage summary{cursor:pointer;font-size:12.5px;letter-spacing:.12em;color:var(--accent);
  list-style:none;display:inline-flex;align-items:center;gap:9px}
.stage summary::-webkit-details-marker{display:none}
.stage summary::before{content:"＋";font-size:13px}
.stage details[open] summary::before{content:"－"}
.stage__items{margin-top:18px;display:grid;gap:0;max-height:390px;overflow:auto;padding-right:10px}
.stage__items li{display:grid;grid-template-columns:36px minmax(120px,190px) 1fr;
  gap:clamp(10px,1.6vw,20px);font-size:13px;padding:12px 0;
  border-bottom:1px solid var(--ln)}
.stage__items i{font-style:normal;color:var(--accent);font-variant-numeric:tabular-nums}
.stage__items b{font-weight:400;color:var(--t1)}
.stage__items p{color:var(--t3);font-size:12.7px;line-height:1.7}

/* ── 10. 团队墙（统一彩色，不做灰度处理） ── */
/* 团队墙已改为连续流动（见文件末 21.2），旧的 .wall 网格/横滑规则全部移除 */
.mc{margin:0;position:relative;overflow:hidden;background:var(--paper-2)}
.mc img{width:100%;aspect-ratio:1;object-fit:cover;display:block;
  transition:transform .7s var(--ease)}
.mc:hover img{transform:scale(1.06)}
.mc figcaption{position:absolute;inset:auto 0 0 0;padding:16px 4px 6px;
  background:linear-gradient(transparent,rgba(0,0,0,.86));font-size:12px;
  text-align:center;letter-spacing:.08em;color:#FFFFFF}
.team-block+.team-block{margin-top:clamp(40px,5vw,70px)}
.team-block__hd{display:flex;justify-content:space-between;align-items:baseline;
  gap:18px;flex-wrap:wrap;margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid var(--ln)}
.team-block__hd h3{font-size:clamp(19px,2vw,25px);letter-spacing:.1em}
.team-block__hd b{font-family:var(--serif);font-size:clamp(24px,2.6vw,34px);font-weight:400;color:var(--accent)}
.team-block__hd p{margin-top:8px;font-size:13.5px;color:var(--t3);max-width:56ch}

/* ── 11. 承接范围 ── */
.scope{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ln);
  border:1px solid var(--ln)}
.scope article{background:var(--card);padding:clamp(26px,3vw,40px)}
.scope dt{font-size:10.5px;letter-spacing:.28em;color:var(--accent);text-transform:uppercase}
.scope dd{margin-top:16px;font-family:var(--serif);font-size:clamp(18px,1.8vw,24px);
  color:var(--t1);line-height:1.6;letter-spacing:.04em}
.scope p{margin-top:14px;font-size:13.5px;line-height:1.95;color:var(--t3)}

/* ── 12. 项目解析 ──
   原为评价轮播。虚构客户原话 + 署名到具体小区存在虚假广告风险，
   改成客观的项目造价解析（不留客户身份、不编造案例），把「341 节点」的品牌资产用起来。 */
.voi__pts{margin:34px 0 0;display:grid}
.voi__pts>div{padding:20px 0;border-top:1px solid var(--ln)}
.voi__pts>div:last-child{border-bottom:1px solid var(--ln)}
.voi__pts dt{font-family:var(--serif);font-size:18px;letter-spacing:.1em;color:var(--t1)}
.voi__pts dd{margin:9px 0 0;font-size:13.5px;line-height:1.85;color:var(--t2)}
.voi__by{margin-top:38px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.voi__by b{font-family:var(--serif);font-size:17px;font-weight:400;letter-spacing:.12em;color:var(--t1)}
.voi__by i{width:38px;height:1px;background:var(--accent);display:block}
.voi__by span{font-size:12px;letter-spacing:.18em;color:var(--t3)}
/* 照片撑满左列高度：解析内容变多后，若仍用固定比例，照片下方会留一大片空 */
.voi__grid{display:grid;grid-template-columns:.42fr 1fr;gap:clamp(30px,5vw,90px);align-items:stretch}
.voi__photo{position:relative;overflow:hidden;min-height:420px}
.voi__photo img{width:100%;height:100%;object-fit:cover}

/* ── 13. 预约 ── */
.book{position:relative;overflow:hidden;background:var(--block-soft)}
.book__glow{position:absolute;right:-18%;top:-32%;width:70vw;height:70vw;border-radius:50%;
  background:radial-gradient(circle,rgba(198,161,91,.16),transparent 68%);pointer-events:none}
.book__grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(40px,6vw,110px);align-items:center}
.book h2{font-size:clamp(30px,3.7vw,54px);line-height:1.34}
.book__copy>p{margin-top:28px;font-size:15.5px;line-height:2.1;color:var(--t2);max-width:470px}
.book__info{margin-top:44px;display:grid;gap:24px}
.book__info>div{display:flex;gap:16px;align-items:flex-start;font-size:14px;color:var(--t2)}
.book__info svg{width:16px;height:16px;color:var(--accent);flex:none;margin-top:5px}
.book__info em{font-style:normal;display:block;font-size:10.5px;letter-spacing:.28em;
  color:var(--t3);margin-bottom:6px}
.form{border:1px solid var(--ln-2);padding:clamp(28px,3.6vw,52px);background:var(--card)}
.form h3{font-size:20px;letter-spacing:.1em}
.form>p{margin-top:12px;font-size:13px;color:var(--t3);letter-spacing:.06em}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:0 30px;margin-top:14px}
.field{margin-top:26px}
.field label{display:block;font-size:10.5px;letter-spacing:.26em;color:var(--t3);margin-bottom:8px}
.field input,.field select,.field textarea{width:100%;background:transparent;border:0;
  border-bottom:1px solid var(--ln-2);padding:11px 0;color:var(--t1);
  font-size:15px;font-weight:300;outline:none;font-family:var(--sans);
  transition:border-color .4s var(--ease);border-radius:0}
.field input::placeholder,.field textarea::placeholder{color:rgba(15,15,15,.28)}
.field select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--accent) 50%),
                   linear-gradient(135deg,var(--accent) 50%,transparent 50%);
  background-position:calc(100% - 7px) 19px,calc(100% - 1px) 19px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.field select option{background:#FFFFFF;color:#0F0F0F}
.on-dark .field select option{background:#1F1F1F;color:#FFFFFF}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--accent)}
/* 浏览器自动填充不要覆盖成刺眼的系统底色 */
.field input:-webkit-autofill,.field input:-webkit-autofill:focus{-webkit-text-fill-color:var(--t1);
  box-shadow:0 0 0 1000px #FFFFFF inset;transition:background-color 9999s ease-out}
.on-dark .field input:-webkit-autofill,.on-dark .field input:-webkit-autofill:focus{
  -webkit-text-fill-color:#FFFFFF;box-shadow:0 0 0 1000px #1F1F1F inset}
.field.err input,.field.err select,.field.err textarea{border-bottom-color:var(--err)}
.field.err label{color:var(--err)}
.field--full{grid-column:1/-1}
.form .btn{width:100%;justify-content:center;margin-top:38px}
.on-dark .field input::placeholder,.on-dark .field textarea::placeholder{color:rgba(255,255,255,.32)}
.form__note{margin-top:20px;font-size:11.5px;line-height:1.85;color:var(--t3);letter-spacing:.04em}
.form__ok{display:none;margin-top:26px;padding:20px 22px;
  border:1px solid var(--ok-bd);background:var(--ok-bg);
  color:var(--t1);font-size:14px;line-height:1.85}
.form__ok.on{display:block;animation:fadeUp .6s var(--ease)}
.form__err{display:none;margin-top:22px;padding:16px 20px;
  border:1px solid var(--err);background:var(--err);color:var(--err-ink);
  font-size:13.5px;line-height:1.8;letter-spacing:.04em}
.form__err.on{display:block;animation:fadeUp .6s var(--ease)}
.form__err a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* ── 14. 页脚 ── */
.foot{border-top:1px solid var(--ln);background:var(--paper);
  padding-top:clamp(56px,7vw,96px);overflow:hidden}
.foot__mark{font-family:var(--serif);font-size:clamp(40px,10.8vw,164px);line-height:.9;
  color:transparent;-webkit-text-stroke:1px var(--ln-2);letter-spacing:.04em;
  white-space:nowrap;user-select:none;margin-bottom:clamp(40px,5vw,72px)}
.foot__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;
  gap:clamp(28px,3.6vw,56px);padding-bottom:clamp(44px,5vw,70px)}
.foot h5{font-family:var(--sans);font-size:10.5px;font-weight:400;letter-spacing:.3em;
  color:var(--accent);margin:0 0 22px;text-transform:uppercase}
.foot ul{display:grid;gap:13px;font-size:13.5px;color:var(--t2)}
.foot li a:hover{color:var(--accent)}
.foot__about .brand{margin-bottom:24px}
.foot__about p{font-size:13.5px;line-height:2.05;color:var(--t3);max-width:330px}
.foot__tel{font-family:var(--serif);font-size:25px;color:var(--t1);
  letter-spacing:.04em;display:block;margin-bottom:20px}
.foot__tel:hover{color:var(--accent)}
.foot__bar{border-top:1px solid var(--ln);padding:24px 0 calc(24px + env(safe-area-inset-bottom));display:flex;
  justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:11.5px;letter-spacing:.1em;color:var(--t3)}

/* ── 15. 内页头（深色影像区） ── */
.phead{padding-top:clamp(150px,17vw,230px);padding-bottom:clamp(46px,6vw,76px);
  position:relative;overflow:hidden}
.phead__bg{position:absolute;inset:0;z-index:0}
.phead__bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(.7) brightness(.36)}
.phead::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(10,10,10,.86),rgba(10,10,10,.93) 58%,rgba(10,10,10,.96) 100%)}
.phead__in{position:relative;z-index:2}
.phead h1{font-size:clamp(32px,4.6vw,68px);line-height:1.22;letter-spacing:.04em;margin-top:26px}
.phead__meta{margin-top:34px;display:flex;gap:clamp(20px,3vw,56px);flex-wrap:wrap;
  border-top:1px solid var(--ln);padding-top:26px}
.phead__meta div{border-left:1px solid var(--ln);padding-left:clamp(14px,2vw,26px)}
.phead__meta div:first-child{border-left:0;padding-left:0}
.phead__meta b{display:block;font-family:var(--serif);font-size:clamp(22px,2.6vw,34px);
  color:var(--t1);font-weight:400;line-height:1}
.phead__meta span{display:block;margin-top:9px;font-size:11px;letter-spacing:.24em;color:var(--t3)}
.crumb{font-size:11.5px;letter-spacing:.2em;color:var(--t3)}
.crumb a:hover{color:var(--accent)}

/* ── 16. 悬浮：返回顶部（全站唯一一枚悬浮件） ──
   桌面端这个位置原本是 .fab（免费量房），已按要求撤掉 —— 一来两个悬浮件在右下角打架，
   二来桌面端的预约入口本来就有三处（顶栏「预约量房」/ 展开菜单 07 / 页脚），不缺这一颗。
   配色专门为「任何背景上都看得见」设计：深黑玻璃底 + 金描边 + 金箭头。
   浅底上靠深玻璃立住；深色实景照片上靠金色描边与箭头立住 —— 旧的「1px 深灰描边」
   落进深照片等于没有边框，和当年 .burger 踩的是同一个坑。 */
.up{position:fixed;right:24px;bottom:24px;z-index:90;width:46px;height:46px;
  display:grid;place-items:center;border-radius:999px;
  background:rgba(12,12,12,.82);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(198,161,91,.38),0 10px 26px -12px rgba(0,0,0,.55);
  opacity:0;transform:translateY(14px);transition:.5s var(--ease);pointer-events:none}
.up.on{opacity:1;transform:none;pointer-events:auto}
/* hover 固定用香槟金 + 墨字（不用 var(--accent)：浅色上下文里它是 #8A6A32 深金棕，
   上面压墨字对比度不够）。金底墨字 = 6.63:1，与底栏右格同一口径。 */
.up:hover{background:#C6A15B;
  box-shadow:inset 0 0 0 1px #C6A15B,0 10px 26px -12px rgba(0,0,0,.45)}
.up:active{transform:scale(.94)}
.up svg{width:15px;height:15px;color:#E1C893}
.up:hover svg{color:#22211F}

/* ── 17. 响应式 ── */
/* 这里原有一条 `@media (max-width:1280px){.up,.peek{display:none}}`，把返回顶部按钮
   在 1280 以下直接藏掉了（当年它只服务宽屏）。现已撤掉 —— 返回顶部改为**全站**可用，
   移动层的位置在 21.0 单独处理（抬到底栏之上、右侧 14px）。
   顺带说明：`.peek` 只在那一行里出现过，模板与脚本都没引用，属于死引用，一并清掉。 */
@media (max-width:1080px){
  .menu{grid-template-columns:1fr}
  .menu__r{display:none}
  /* 首屏 / 卡片化 / 圆角等小屏规则统一放在文件末「18. 小屏设计层」，见那里 */
  .two,.two--ledger,.two--craft,.ledger__row,.book__grid,.voi__grid,.promise,.scope,.nums--3{grid-template-columns:1fr}
  .nums{grid-template-columns:1fr 1fr}
  .foot__grid{grid-template-columns:1fr 1fr;gap:36px}
  .top__nav{display:none}
  .ledger__row.head{display:none}
  .ledger__row{gap:6px;padding:14px 18px}
  .ledger__row span{text-align:left}
}
@media (max-width:680px){
  body{font-size:15px}
  .brand b{font-size:16px;font-weight:700;letter-spacing:.16em}
  /* 窄屏：标识保持「哈 墅 + 口号」两行 */
  .brand svg{width:36px;height:36px}
  /* 口号行窄屏 8.5px（中文还能读清的下限），行盒仍给死 12px：16 + 4 + 12 = 32 < 36px，
     顶栏高度照旧由方块定，不会被文字行盒顶高。 */
  .brand em{font-size:8.5px;letter-spacing:.06em;line-height:12px;margin-top:4px}
  .top{padding:20px var(--pad)}
  .top__tel{font-size:12.5px;letter-spacing:.04em}
  /* 与 ≤1080 块里的胶囊尺寸保持一致（该视口下实际以后者为准，这两条只是防止
     将来有人调断点时出现两套尺寸不一致）。 */
  .burger{gap:6px;letter-spacing:.10em}
  .burger i{width:12px}
  .hero__cta{width:100%}
  .hero__cta .btn{flex:1 1 100%;justify-content:center}
  .nums div{border-left:0;padding-left:0}
  .fields{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr}
  .stage__items li{grid-template-columns:1fr;gap:4px}
  .gauge__row{grid-template-columns:38px 1fr auto;gap:12px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  [data-reveal]{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ═══════════════════════════════════════════════════════════
   17. 通用内容页（单页 / 文章 / 列表）
   主题正式内容是三张手工页面，这里补齐 WordPress 内容的兜底排版，
   以后往后台写文章、写案例时不用再调样式。
   ═══════════════════════════════════════════════════════════ */
.entry{max-width:860px}
.entry>*+*{margin-top:26px}
.entry h2{font-size:clamp(22px,2.4vw,32px);margin-top:56px;letter-spacing:.03em}
.entry h3{font-size:clamp(18px,1.9vw,24px);margin-top:44px}
.entry h4{font-size:17px;margin-top:34px}
.entry h2+h3,.entry h3+h4{margin-top:24px}
.entry p{font-size:16px;line-height:2.1;color:var(--t2)}
.entry strong{color:var(--t1);font-weight:500}
.entry a{color:var(--accent);border-bottom:1px solid rgba(138,106,50,.32);transition:.3s}
.entry a:hover{border-bottom-color:var(--accent)}
.entry ul,.entry ol{padding-left:0}
.entry ul li{position:relative;padding-left:26px;margin-top:12px;line-height:2}
.entry ul li::before{content:"";position:absolute;left:2px;top:.92em;width:12px;height:1px;background:var(--accent)}
.entry ol{counter-reset:hs}
.entry ol li{position:relative;padding-left:38px;margin-top:12px;line-height:2;counter-increment:hs}
.entry ol li::before{content:counter(hs,decimal-leading-zero);position:absolute;left:0;top:0;
  font-family:var(--serif);font-size:12.5px;letter-spacing:.08em;color:var(--accent)}
.entry blockquote{margin:40px 0;padding:6px 0 6px 30px;border-left:2px solid var(--accent-pale);
  font-family:var(--serif);font-size:19px;line-height:1.9;color:var(--t1)}
.entry img{width:100%;height:auto;margin-block:34px}
.entry figure{margin:34px 0}
.entry figcaption,.entry .wp-caption-text{margin-top:12px;font-size:12.5px;letter-spacing:.1em;color:var(--t3);text-align:center}
.entry hr{margin:52px 0;border:0;border-top:1px solid var(--ln)}
.entry table{width:100%;border-collapse:collapse;margin-block:34px;font-size:14.5px}
.entry th,.entry td{padding:14px 16px;border-bottom:1px solid var(--ln);text-align:left;vertical-align:top}
.entry th{font-family:var(--serif);font-weight:400;color:var(--t1);border-bottom-color:var(--ln-2);
  font-size:13px;letter-spacing:.14em}
.entry tbody tr:hover{background:rgba(15,15,15,.03)}
.entry code{padding:2px 7px;background:rgba(15,15,15,.06);font-size:13.5px;border-radius:2px}
.entry pre{padding:22px 24px;background:#0A0A0A;color:#FFFFFF;overflow-x:auto;font-size:13.5px;line-height:1.8}
.entry pre code{padding:0;background:none;color:inherit}
.entry__pages{margin-top:44px;font-size:13px;letter-spacing:.1em;color:var(--t3)}

/* 内容列表 */
.entry-list{display:grid;gap:0;border-top:1px solid var(--ln)}
.entry-item{padding:38px 0;border-bottom:1px solid var(--ln)}
.entry-item h2{font-size:clamp(21px,2.2vw,30px);letter-spacing:.02em}
.entry-item h2 a{transition:.3s}
.entry-item h2 a:hover{color:var(--accent)}
.entry-item__meta{margin-top:12px;font-size:11.5px;letter-spacing:.2em;color:var(--t3)}
.entry-item p:last-child{margin-top:16px;font-size:15.5px;line-height:2;color:var(--t2)}

/* 分页 */
.pagination,.navigation.pagination{margin-top:56px}
.pagination .nav-links{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;height:44px;padding:0 14px;border:1px solid var(--ln-2);
  font-size:13px;letter-spacing:.1em;color:var(--t2);transition:.3s}
.pagination .page-numbers:hover{border-color:var(--accent);color:var(--t1)}
.pagination .page-numbers.current{background:var(--t1);color:var(--paper);border-color:var(--t1)}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap}
.alignleft{float:left;margin:0 30px 20px 0}
.alignright{float:right;margin:0 0 20px 30px}
.aligncenter{margin-inline:auto}
.entry .alignwide{max-width:none;width:calc(100% + clamp(0px,6vw,120px));margin-left:clamp(0px,-3vw,-60px)}
.entry .wp-block-image img{width:100%}
.entry .wp-block-button__link{display:inline-flex;align-items:center;gap:14px;padding:17px 38px;
  background:var(--t1);color:var(--paper);font-size:12.5px;letter-spacing:.22em;border:0;border-radius:0}
@media (max-width:760px){
  .alignleft,.alignright{float:none;margin:0 0 24px}
  .entry .alignwide{width:100%;margin-left:0}
}

/* ── 17.1 哈墅动态：筛选 / 列表 / 详情延伸 ──
   沿用全站语言：直角、1px 发丝线分区、衬线数字、金色只做点缀。
   350 篇动态全部无配图，所以版式按「日期 + 栏目 / 标题 + 摘要」的文字密度来排，
   不硬塞图片位。 */
.phead--article{padding-top:clamp(136px,14.5vw,200px)}
.phead--article h1{font-size:clamp(26px,3.4vw,44px);line-height:1.36;letter-spacing:.02em}

/* 栏目筛选 */
.news-filter{display:flex;flex-wrap:wrap;gap:0 34px;border-bottom:1px solid var(--ln)}
.news-filter a{display:inline-flex;align-items:baseline;gap:8px;padding:16px 0 14px;
  margin-bottom:-1px;border-bottom:1px solid transparent;
  font-size:13.5px;letter-spacing:.1em;color:var(--t3);transition:.3s}
.news-filter a i{font-style:normal;font-family:var(--serif);font-size:11.5px;color:inherit;
  opacity:.7;font-variant-numeric:tabular-nums}
.news-filter a:hover{color:var(--t1)}
.news-filter a.on{color:var(--t1);border-bottom-color:var(--accent)}
.news-filter a.on i{color:var(--accent);opacity:1}

/* 列表小标题行 */
.news-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  margin:clamp(32px,3.8vw,52px) 0 clamp(4px,1vw,12px)}
.news-head__cnt{font-size:11.5px;letter-spacing:.2em;color:var(--t3)}

/* 列表 */
.news-list{display:grid;border-top:1px solid var(--ln)}
.news-item{display:grid;grid-template-columns:186px 1fr;gap:clamp(20px,3vw,54px);
  padding:clamp(26px,3vw,40px) 0;border-bottom:1px solid var(--ln)}
.news-item__side{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.news-item__side time{font-family:var(--serif);font-size:13px;letter-spacing:.1em;
  color:var(--t3);font-variant-numeric:tabular-nums}
.news-item__cat{font-size:11px;letter-spacing:.2em;color:var(--accent);
  border:1px solid var(--ok-bd);padding:4px 10px;transition:.3s}
.news-item__cat:hover{background:var(--ok-bg)}
.news-item__main h2{font-size:clamp(19px,1.9vw,25px);letter-spacing:.02em;line-height:1.46}
.news-item__main h2 a{transition:.3s}
.news-item:hover .news-item__main h2 a{color:var(--accent)}
.news-item__main>p{margin-top:14px;font-size:15px;line-height:1.95;color:var(--t2);max-width:64ch}
.news-item__more{display:inline-flex;align-items:center;gap:7px;margin-top:16px;
  font-size:11.5px;letter-spacing:.18em;color:var(--t3);transition:.3s}
.news-item__more svg{width:14px;height:14px;transition:transform .45s var(--ease)}
.news-item:hover .news-item__more{color:var(--accent)}
.news-item:hover .news-item__more svg{transform:translateX(5px)}

/* 详情页：栏目标签 + 联系入口 */
.news-foot{margin-top:clamp(46px,5.6vw,72px);padding-top:26px;
  border-top:1px solid var(--ln);max-width:860px}
.news-foot__tags{display:flex;flex-wrap:wrap;gap:10px}
.news-foot__tags a{font-size:11.5px;letter-spacing:.16em;color:var(--accent);
  border:1px solid var(--ok-bd);padding:6px 13px;transition:.3s}
.news-foot__tags a:hover{background:var(--ok-bg)}
.news-foot__cta{margin-top:22px;font-size:14px;line-height:2;color:var(--t3)}
.news-foot__cta a{color:var(--accent);border-bottom:1px solid var(--ok-bd);transition:.3s}
.news-foot__cta a:hover{border-bottom-color:var(--accent)}

/* 上一篇 / 下一篇 */
.news-nav{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ln);
  margin-top:clamp(38px,4.8vw,62px);border-top:1px solid var(--ln);border-bottom:1px solid var(--ln)}
.news-nav a{background:var(--paper);padding:26px clamp(18px,2.4vw,30px);transition:background .3s}
.news-nav a:hover{background:var(--paper-2)}
.news-nav a span{display:block;font-size:11px;letter-spacing:.2em;color:var(--t3)}
.news-nav a b{display:block;margin-top:11px;font-weight:400;font-size:15px;line-height:1.62;
  color:var(--t1);transition:.3s}
.news-nav a:hover b{color:var(--accent)}
.news-nav__next{text-align:right}
.news-nav .is-empty{background:var(--paper)}

/* 接着看 */
.news-related{margin-top:clamp(44px,5.4vw,72px)}
.news-related__hd{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding-bottom:16px;border-bottom:1px solid var(--ln)}
.news-related__hd h3{font-size:clamp(18px,1.8vw,23px);letter-spacing:.03em}
.news-related__hd a{font-size:11.5px;letter-spacing:.16em;color:var(--t3);transition:.3s}
.news-related__hd a:hover{color:var(--accent)}
.news-related__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ln)}
.news-card{display:flex;flex-direction:column;background:var(--paper);
  padding:26px clamp(18px,2.2vw,28px) 30px;transition:background .3s}
.news-card time{font-family:var(--serif);font-size:12px;letter-spacing:.1em;
  color:var(--t3);font-variant-numeric:tabular-nums}
.news-card b{flex:1;margin-top:14px;font-weight:400;font-size:16px;line-height:1.62;
  color:var(--t1);transition:.3s}
.news-card span{margin-top:16px;font-size:11px;letter-spacing:.18em;color:var(--accent)}
.news-card:hover{background:var(--paper-2)}
.news-card:hover b{color:var(--accent)}

@media (max-width:1080px){
  .news-item{grid-template-columns:1fr;gap:14px}
  .news-item__side{flex-direction:row;align-items:center;gap:13px}
  .news-item__main>p{font-size:14.5px;max-width:none}
  .news-related__grid{grid-template-columns:1fr}
}

@media (max-width:680px){
  /* 栏目多了之后换行会把整屏吃掉，改成横向滑动 */
  .news-filter{flex-wrap:nowrap;gap:0 24px;overflow-x:auto;
    scrollbar-width:none;-ms-overflow-style:none}
  .news-filter::-webkit-scrollbar{display:none}
  .news-filter a{flex:none;white-space:nowrap}
  .news-head{flex-direction:column;align-items:flex-start;gap:8px}
  .news-nav{grid-template-columns:1fr}
  .news-nav__next{text-align:left}
  .news-nav .is-empty{display:none}
}

/* ═══════════════════════════════════════════════════════════
   18. 小屏设计层（iOS 化）
   ───────────────────────────────────────────────────────────
   桌面那套「发丝线分割的表格式排布 + 直角」在窄屏会读成文档 / 网页：
   1px 线一多、字号又小，观感就掉。所以手机端整体换一套语言 ——
     大圆角卡片 + 极浅投影 + 更大字号 + 更大留白 + 顺滑微动效，
   首屏改成「整屏亮照片 + 白色 sheet 上翻」。
   桌面（>1080px）保持建筑事务所的直角细线风不变，两套并行不打架。
   ═══════════════════════════════════════════════════════════ */
@media (max-width:1080px){
  :root{
    --rad:18px;        /* 卡片 */
    --rad-lg:24px;     /* 媒体 */
    --rad-sheet:26px;  /* 上翻的 sheet */
    --sh:0 1px 2px rgba(15,15,15,.05),0 14px 34px -14px rgba(15,15,15,.20);
    --sh-s:0 1px 2px rgba(15,15,15,.05),0 8px 20px -10px rgba(15,15,15,.16);
    --sec-m:clamp(54px,9vw,78px);
    /* 手机上正文/小字加深一档：60%/40% 在窄屏会发灰、显得没精神 */
    --t2:rgba(15,15,15,.70); --t3:rgba(15,15,15,.48);
  }
  *{-webkit-tap-highlight-color:transparent}

  /* 段间距收紧：原来 14000px 级的页面长度是「low」的一大来源 */
  .sec{padding-block:var(--sec-m)}
  .sec--sm{padding-block:calc(var(--sec-m) * .7)}

  /* ── 圆角 / 投影 基元 ── */
  .btn{border-radius:999px;padding:16px 30px;box-shadow:var(--sh-s);
    transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
  .btn::before{border-radius:999px}
  .btn:active{transform:scale(.97)}
  .btn--solid{box-shadow:0 8px 22px -10px rgba(15,15,15,.5)}
  /* 窄屏按钮做成胶囊，但**只做凸出感、不换色相**：原来的「1px 深灰描边 + 透明底」
     在深色首屏照片上等于没有边框（深线落在深照片上），按钮就"贴"在背景上分不出来。
     四件事把体积做出来：① 边框对比提一档；② 半透明玻璃底（深底上微微提亮、白底上微微压暗，
     两边都能从背景里分离）；③ 顶部一道 inset 内高光当凸起倒角；④ 一层柔和落影。
     不做实心色块、不做金 —— 首屏那个金色主 CTA 才是页面唯一的抢眼点，按钮不能抢戏。 */
  /* 尺寸再收一档（用户第二次提「框再小一些」）：横向 11→8px、gap 8→6px、
     图标 14→12px、字距 .24em→.10em —— 实际宽 72→约 59px（本轮 -18%，两轮累计 -31%）。
     竖向这次**刻意**收了一档：padding-block 7→6px ⇒ 高 36.9→34.9px。
     理由是 34.9 已经小于金印方块（≤680 时 36px、768 时 38px），顶栏高度从此改由
     标识决定，按钮不再参与撑高 —— 以后再调按钮就彻底不动 pageH 了。
     代价仅是 m390/m430 顶栏 77.9→77.0px（-0.9px），t768 因为方块 38px 完全不变。
     行盒仍锁死固定 20.9px（= 原 11px × 1.9）：字号与高度解耦，改字号不牵动行盒。 */
  /* display:flex 必须写在这里：基础层是 display:none（桌面不渲染），
     移动层的这一条源序更后，正好把开关打开。 */
  .burger{display:flex;--bg-fg:var(--t2);--bg-ln:rgba(15,15,15,.26);--bg-bg:rgba(15,15,15,.04);
    --bg-sh:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(15,15,15,.06),
      0 5px 14px -7px rgba(15,15,15,.22);
    border:1px solid var(--bg-ln);border-radius:999px;padding:6px 8px;gap:6px;
    font-size:10.5px;line-height:20.9px;letter-spacing:.10em;
    color:var(--bg-fg);background:var(--bg-bg);box-shadow:var(--bg-sh);
    -webkit-backdrop-filter:blur(8px) saturate(1.08);backdrop-filter:blur(8px) saturate(1.08);
    transition:color .3s var(--ease),border-color .3s var(--ease),
      background .3s var(--ease),box-shadow .3s var(--ease),transform .2s var(--ease)}
  .burger:hover{--bg-ln:rgba(15,15,15,.42);
    --bg-sh:inset 0 1px 0 rgba(255,255,255,.95),0 6px 16px -7px rgba(15,15,15,.28)}
  .burger:active{transform:scale(.97)}
  .burger i{width:12px}
  img{border-radius:0}

  /* ── 首屏：整屏亮照片 + 白色 sheet 上翻（文案落到亮底上，不再压黑板） ── */
  .hero{display:flex;flex-direction:column;min-height:0;padding-top:0;background:var(--paper)}
  .hero__bg{position:relative;inset:auto;height:min(58svh,500px);
    border-radius:0 0 var(--rad-sheet) var(--rad-sheet);overflow:hidden}
  .hero__bg img{object-position:58% 46%}
  .hero__scrim{display:none}
  /* sheet 里改回浅色上下文：直接重定义令牌，整块自动翻转 */
  .hero__body,.hero__stats{
    --t1:#0F0F0F; --t2:rgba(15,15,15,.70); --t3:rgba(15,15,15,.48);
    --ln:rgba(15,15,15,.10); --ln-2:rgba(15,15,15,.22);
    --accent:#8A6A32; --accent-lt:#A07C36; --accent-ink:#FFFFFF}
  .hero__body{position:relative;z-index:2;max-width:none;
    margin-top:calc(var(--rad-sheet) * -1);
    background:var(--paper);border-radius:var(--rad-sheet) var(--rad-sheet) 0 0;
    padding:34px var(--pad) 6px;display:block;flex:none}
  .hero h1{color:var(--t1);margin-top:22px}
  .hero h1 em{color:var(--accent-lt)}
  .hero__sub{color:var(--t2);margin-top:22px}
  .hero__sub b{color:var(--t1);font-weight:500}
  .hero__cta{margin-top:30px;gap:10px}
  .hero__stats{background:var(--paper);border-top:0;padding:26px var(--pad) 30px;
    display:grid;grid-template-columns:1fr 1fr;gap:22px 16px}
  .hero__stats-list>div{padding:0;border:0!important}
  .hero__stats b{font-size:38px}

  /* ── 区域条：改成可横滑的胶囊 ── */
  .strip{padding-block:18px;border-block:0}
  .strip__in{gap:9px;font-family:var(--sans);font-size:13px;letter-spacing:.04em;
    scroll-snap-type:x proximity;scroll-padding-left:var(--pad);
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 32px),transparent 100%);
    mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 32px),transparent 100%)}
  .strip__in i{display:none}
  .strip__in b{font-size:11px;letter-spacing:.24em;color:var(--t3);margin-right:4px}
  .strip__in span{border:1px solid var(--ln);border-radius:999px;padding:7px 15px;
    color:var(--t2);scroll-snap-align:start}
  .strip__in span:hover{color:var(--t1);border-color:var(--ln-2)}

  /* ── 数字：白卡 2×2，去掉发丝线 ── */
  .nums,.nums--3{border-top:0;grid-template-columns:1fr 1fr;gap:12px}
  .nums div,.nums div:first-child{border:1px solid var(--ln)!important;padding:24px 20px;
    background:var(--card);border-radius:var(--rad);box-shadow:var(--sh-s)}
  .nums b{font-size:44px}
  .nums b i{font-size:.30em}
  .nums p{margin-top:10px;font-size:11px;letter-spacing:.16em}

  /* ── 四重承诺：白卡，一行一张 ── */
  .promise{border-top:0;gap:12px}
  .promise article,.promise article:first-child{border:1px solid var(--ln)!important;
    padding:24px 22px 26px;background:var(--card);border-radius:var(--rad);box-shadow:var(--sh-s)}
  .promise b.n{font-size:11px}
  .promise h3{margin-top:12px;font-size:19px}
  .promise p{margin-top:12px;font-size:14.5px;line-height:1.9}
  .promise span{margin-top:16px;font-size:11px}

  /* ── 报价清单：圆角卡片，行距放宽 ── */
  .ledger{border:1px solid var(--ln);border-radius:var(--rad);box-shadow:var(--sh);overflow:hidden}
  .ledger__hd{padding:18px 20px}
  .ledger__row{padding:16px 20px;font-size:13.5px;gap:5px}
  .ledger__row b{font-size:14.5px}
  .ledger__row i,.ledger__row u{font-size:13px}
  .ledger__ft{padding:16px 20px}

  /* ── 工艺：卡片化 ── */
  .craft__rows{background:var(--card);border:1px solid var(--ln);border-radius:var(--rad);
    box-shadow:var(--sh-s);padding:4px 20px;margin-top:6px}
  .craft__rows div{border-top:1px solid var(--ln);padding:16px 0}
  .craft__rows div:first-child{border-top:0;padding-top:18px}
  .craft__rows div:last-child{border-bottom:0;padding-bottom:18px}
  .craft__rows dt{font-size:14px}
  .craft__rows dd{font-size:26px}
  .gauge{background:var(--card);border:1px solid var(--ln);border-radius:var(--rad);
    box-shadow:var(--sh-s);padding:4px 20px}
  .gauge__row{padding:18px 0}
  .gauge__row:last-child{border-bottom:0}
  .stage{border:1px solid var(--ln);background:var(--card);border-radius:var(--rad);
    box-shadow:var(--sh-s);padding:22px 20px;margin-top:12px}
  .stage__hd h3{font-size:20px}
  .stage__tabs li{border-radius:999px;padding:6px 13px;font-size:12.5px}
  .stage details{margin-top:16px;padding-top:14px}
  .stage__items{max-height:none;overflow:visible;padding-right:0}
  .stage__items li{font-size:13.5px;padding:13px 0}

  /* ── 团队墙：由 21.2 的连续流动墙接管（原横滑画廊规则已移除） ── */
  .team-block+.team-block{margin-top:var(--sec-m)}
  .team-block__hd{margin-bottom:18px;padding-bottom:14px}
  /* 名册墙在移动层同样由 21.2 的流动轨道接管 */
  .mc{flex:0 0 108px;width:108px;scroll-snap-align:start;
    background:none;overflow:visible;position:relative}
  .mc img{border-radius:14px;box-shadow:var(--sh-s)}
  .mc:hover img{transform:none}
  .mc:active img{transform:scale(.97)}
  .mc figcaption{position:static;padding:8px 2px 0;background:none;
    color:var(--t2);font-size:12px;text-align:left;letter-spacing:.02em;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* ── 承接范围：三张白卡 ── */
  .scope{background:none;border:0;gap:12px}
  .scope article{border:1px solid var(--ln);border-radius:var(--rad);box-shadow:var(--sh-s);padding:24px 22px}
  .scope dd{margin-top:12px;font-size:20px}

  /* ── 补齐直角：小屏一律圆角化 ── */
  /* 数字卡奇数张时，最后一张跨满两列，避免右半留空 */
  .nums--3>div:last-child:nth-child(odd),
  .nums>div:last-child:nth-child(odd){grid-column:1/-1}
  /* 五条基线标签是内联 style 的方框（模板里写死了 border），这里补圆角成 chip */
  .voi__tags span{border-radius:999px}
  /* 分页：小屏改圆角，别留方角（返回顶部的圆形与尺寸已在基础层第 16 节定好） */
  .pagination .page-numbers{border-radius:12px;min-width:42px;height:42px}

  /* ── 项目解析：三条解析收进一张白卡，与工艺卡同一语言 ── */
  .voi__grid{gap:24px}
  /* 小屏单列：照片回到固定比例，别被 flex 高度规则压没了 */
  .voi__photo{min-height:0}
  .voi__photo img{border-radius:var(--rad-lg);height:auto;aspect-ratio:9/11}
  .voi__pts{margin-top:26px;background:var(--card);border:1px solid var(--ln);
    border-radius:var(--rad);box-shadow:var(--sh-s);padding:4px 20px}
  .voi__pts>div{border-top:1px solid var(--ln);padding:16px 0}
  .voi__pts>div:first-child{border-top:0;padding-top:18px}
  .voi__pts>div:last-child{border-bottom:0;padding-bottom:18px}
  .voi__pts dt{font-size:17px}
  .voi__pts dd{margin-top:8px;font-size:13.5px;line-height:1.8}
  .voi__by{margin-top:26px;gap:14px}
  .voi__tags{margin-top:32px!important;padding-top:22px!important}

  /* ── 预约：深色块面加圆角，表单卡圆角化 ── */
  .book{border-radius:var(--rad-sheet);margin-inline:10px}
  .form{border-radius:var(--rad);padding:26px 20px 30px;border-color:var(--ln)}
  .field{margin-top:22px}
  .field input,.field select,.field textarea{font-size:16px;padding:12px 0}
  .form .btn{margin-top:30px}

  /* ── 页脚 ── */
  .foot{padding-top:48px}
  .foot__mark{font-size:clamp(30px,9.4vw,52px);letter-spacing:.02em;
    color:var(--ln-2);-webkit-text-stroke:0;margin-bottom:34px}
  .foot__grid{gap:34px;padding-bottom:38px}
  .foot h5{margin-bottom:13px}
  .foot ul{gap:10px;font-size:13.5px;line-height:1.6}
  /* 导航型分组（业务 / 了解哈墅）走两列，节奏紧凑；地址型分组保持单列 */
  .foot__grid>div:nth-child(2) ul,
  .foot__grid>div:nth-child(3) ul{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px}
  .foot__grid>div:nth-child(4) ul{gap:9px}
  .foot__grid>div:nth-child(4) ul li{color:var(--t2)}
  .foot__tel{display:inline-flex;align-items:center;gap:10px;font-size:20px;
    border:1px solid var(--ln-2);border-radius:999px;padding:13px 22px;box-shadow:var(--sh-s);
    margin-bottom:4px}

  /* ── 展开菜单 ──
     用户反馈「里面导航各个页面间距过大，且字数有点大」。根因是**行高不是内边距**：
     `.menu__l a` 自己没有 line-height，吃的是 body 的 1.9 —— 24px 的字配 1.9 行高，
     光单行内容就占 46px，再叠上下各 16px 内边距，一项 78px、整列 6 项跨度 400px，
     中间全是空档。所以两件事一起收，且先收行盒再收字：
       ① line-height 显式给 1.4（原来是 inherit 1.9，这才是"间距大"的真凶）
       ② 字号 clamp 上限 30→26px、下限 22→20px，内边距 16→11px
     收紧后一项约 51px（仍 ≥44px 触控下限，不会难点），整列跨度 400→268px（-33%）。 */
  .menu__l a{font-size:clamp(20px,5.4vw,26px);line-height:1.4;padding-block:11px}
  .menu__l a small{font-size:11px}

  /* ── 顺滑：浮现更短更轻，图片轻微呼吸 ── */
  [data-reveal]{transform:translateY(16px);
    transition:opacity .7s var(--ease) var(--d),transform .7s var(--ease) var(--d)}
  .hero__bg img{transform:scale(1.02)}
  .voi__photo img,.mc img{transition:transform .5s var(--ease)}
}

/* ── 手机窄屏：字号再上一档，标题收紧行距 ── */
@media (max-width:680px){
  body{font-size:16px;line-height:1.9}
  h2.big{font-size:clamp(27px,7.6vw,34px);line-height:1.3;letter-spacing:.01em}
  .hero h1{font-size:clamp(42px,12.6vw,54px);line-height:1.08}
  .hero__sub{font-size:15.5px;line-height:1.95}
  .lead{font-size:15.5px;margin-top:20px}
  .body p{font-size:15.5px;line-height:1.95}
  .body p:first-child{font-size:16.5px}
  .eyebrow{font-size:10.5px;letter-spacing:.28em;gap:12px}
  .eyebrow::before{width:30px}
  .book h2{font-size:clamp(28px,8vw,36px)}
  .nums b{font-size:46px}
  .team-block__hd b{font-size:26px}
  .foot__mark{font-size:clamp(28px,9vw,44px)}
}

/* >>> DL-START <<< */
/* ══════════════════════════════════════════════════════════════════
   19. 桌面精修层（>1080px）
   桌面端此前是「发丝线 + 等宽列」的编辑排版：整页近白、缺视觉重心，
   读起来像文档而不是作品。本节只动视觉、不动内容：
     19.1 明暗节奏 —— 工艺段改深色块，与首屏 / 预约区三点呼应
     19.2 团队墙   —— 13 列小方块 → 大图网格，圆角 + 柔化压字
     19.3 四重承诺 —— 裸列改白卡，hover 抬起
     19.4 数据带   —— 金短标 + 更大留白
     19.5 承接范围 —— 1px 缝隙改真卡片
     19.6 报价表   —— 去外框，保留顶部粗线（更像"文档截图"而非后台表格）
     19.7 节点条   —— 1px 折线改 2px 占比条，比例一眼可读
     19.8 内页头 / 工艺标签 —— 金短标 + 胶囊
   ══════════════════════════════════════════════════════════════════ */
/* 19.0 深色带 —— 背景必须全局生效。
   PHP 已给该段加了 .on-dark（令牌整层翻转）；若深色底只写在桌面媒体查询里，
   小屏就会变成「白底白字」。桌面与手机共用这块深底，内部卡片靠 var(--card)
   自动适配（浅色上下文=白卡，#on-dark 上下文=淡白卡）。 */
.band--dark{background:var(--block);position:relative;overflow:hidden}
.band--dark::after{content:"";position:absolute;right:-16%;bottom:-48%;width:66%;height:156%;
  background:radial-gradient(closest-side,rgba(198,161,91,.15),transparent 72%);
  pointer-events:none}
.band--dark .sec{position:relative;z-index:1}

@media (min-width:1081px){

  /* ── 19.1 明暗节奏：工艺段深色块（桌面加高上下留白） ── */
  .band--dark .sec{padding-block:clamp(86px,10vw,152px)}

  /* ── 19.2 团队墙：13 列小方块 → 10 列大图 ── */
  .mc{border-radius:12px;background:var(--paper-2)}
  .mc img{transition:transform .9s var(--ease)}
  .mc:hover img{transform:scale(1.07)}
  .mc figcaption{padding:38px 8px 12px;font-size:12.5px;letter-spacing:.1em;
    background:linear-gradient(transparent,rgba(0,0,0,.48) 46%,rgba(0,0,0,.86))}

  /* ── 19.3 四重承诺：裸列改白卡 ── */
  .promise{gap:clamp(12px,1.4vw,20px);border-top:0}
  .promise article{border:1px solid var(--ln);background:var(--card);border-radius:14px;
    padding:clamp(30px,3.2vw,46px) clamp(22px,2.4vw,34px) clamp(34px,3.6vw,52px);
    box-shadow:0 1px 2px rgba(15,15,15,.035);
    transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .55s var(--ease)}
  .promise article:first-child{border-left:1px solid var(--ln);padding-left:clamp(22px,2.4vw,34px)}
  .promise article::before{border-radius:13px 13px 0 0}
  .promise article:hover{transform:translateY(-5px);
    box-shadow:0 22px 48px -22px rgba(15,15,15,.22);border-color:var(--ln-2)}

  /* ── 19.4 数据带：金短标 ── */
  .nums{border-top:1px solid var(--ln-2)}
  .nums div{position:relative;
    padding:clamp(44px,5.2vw,68px) clamp(20px,2.6vw,42px) clamp(34px,4vw,52px)}
  .nums div::before{content:"";position:absolute;top:clamp(26px,3.2vw,40px);
    left:clamp(20px,2.6vw,42px);width:28px;height:2px;background:var(--accent)}
  .nums div:first-child::before{left:0}

  /* ── 19.5 承接范围：真卡片 ── */
  .scope{gap:clamp(12px,1.4vw,20px);background:none}
  .scope article{border:1px solid var(--ln);border-radius:14px;
    box-shadow:0 1px 2px rgba(15,15,15,.035);
    transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
  .scope article:hover{transform:translateY(-5px);box-shadow:0 22px 48px -22px rgba(15,15,15,.2)}

  /* ── 19.6 报价表：去外框 ── */
  .ledger{border:0;border-top:2px solid var(--t1);background:none}
  .ledger__hd{padding:22px 0 18px}
  .ledger__row{padding:16px 0;gap:22px}
  .ledger__row.head{background:none;border-bottom:1px solid var(--ln-2);padding-top:10px}
  .ledger__ft{background:none;border-top:1px solid var(--ln-2);padding:20px 0 0}

  /* ── 19.7 节点条：占比条加粗、比例可读 ── */
  .gauge{border-top:2px solid var(--t1)}
  .gauge__row .bar{height:2px;border-radius:2px;background:var(--ln-2)}
  .gauge__row .bar i{border-radius:2px}

  /* ── 19.8 内页头数据 + 工艺标签 ── */
  .phead__meta div{position:relative;padding-top:16px}
  .phead__meta div::before{content:"";position:absolute;top:0;width:24px;height:2px;
    background:var(--accent);left:clamp(14px,2vw,26px)}
  .phead__meta div:first-child::before{left:0}
  .stage__tabs{gap:10px}
  .stage__tabs li{border:1px solid var(--ln);border-radius:999px;padding:7px 15px;
    background:var(--card);transition:border-color .45s var(--ease),color .45s var(--ease)}
  .stage__tabs li:hover{border-color:var(--ln-2);color:var(--t1)}
}
/* >>> DL-END <<< */

/* >>> LUX-START <<< */
/* ══════════════════════════════════════════════════════════════════
   20. 中式奢华首屏
   参照「深灰墙 + 香槟金 + 实景家居 + 竖排标题」的海报语言重做首屏。
   背景图为 AI 生成的暗调实景家居照（assets/img/hero-lux.jpg，已去字、无水印），
   非任何同行成品图。
   覆盖第 3 节基础规则与第 18 节小屏规则，故置于文件末尾。

   设计要点：
     ① 照片真正全屏 —— 顶栏在首屏内完全透明（无底色、无边框、无模糊），
        照片一直铺到屏幕最顶端，消除"导航条割裂"。
     ② 曝光对齐参考图 —— 参考图底片均值约 (82,74,64)，本图经提亮后约 (95,81,66)；
        关键是把覆盖层压暗强度砍到原来的一半（旧的 rgba(...,.92) 把左半屏压成死黑，
        照片细节全丢，这才是"不够高级"的主因），让墙面线脚、丝绒质感透出来。
     ③ 文字极简 —— 只留「竖排大字 + 一列竖排小注 + 一小段说明 + 一个按钮」。
     ④ 主标题用香槟金渐变（参考图通篇是金，没有白字），区别于正文的白。
     ⑤ 数据改成底部一行细字信息带，保留信息量但不抢画面。
   ══════════════════════════════════════════════════════════════════ */

.hero{
  --lux-bg:#333331;
  --lux-ink:#F5F1E9;
  --lux-gold:#C6A15B;
  --lux-gold-lt:#E1C893;
  --lux-dark:#22211F;
  --t1:var(--lux-ink);
  --t2:rgba(245,241,233,.66);
  --t3:rgba(245,241,233,.40);
  --ln:rgba(198,161,91,.24);
  --ln-2:rgba(198,161,91,.46);
  --accent:var(--lux-gold);
  --accent-lt:var(--lux-gold-lt);
  --accent-ink:var(--lux-dark);
  background:var(--lux-bg);
  display:flex;flex-direction:column;
  /* 首屏不再顶满一屏（100svh 太高、压迫感重），收到 88% —— 底部露出一点下一屏，
     向下滑动引导才有落点。用 svh 而不是 vh，规避移动端地址栏收放导致的跳高。

     ★★ 必须先写一条 vh 兜底，再让支持 svh 的浏览器覆盖它 ★★
     svh/dvh/lvh 需要 Chromium 108+ / Safari 15.4+。百度 APP 内置浏览器（安卓 T7 内核，
     约停在 Chromium 79~107 区间）不支持，整条声明会被**丢弃**，级联于是落到 ≤1080 块里
     那条 `.hero{min-height:0}` —— 首屏直接由内容高度决定，手机端实测 743px → 511px，
     少了 232px，表现就是「首屏断了一截」。而 clamp()（79+）/ env()（69+）都正常，
     所以只有高度会塌、别的都看不出问题。
     vh（Chrome 20+ 就支持）在老内核上给出几乎相同的值，是最合适的兜底。 */
  min-height:88vh;
  min-height:88svh;
  padding:0;overflow:hidden;
}

/* ── 背景：整幅实景家居照铺满。覆盖层只做"托字"的最低限度，不再整体压黑 ── */
.hero__bg{position:absolute;inset:0;z-index:0;height:auto;border-radius:0;overflow:hidden}
.hero__bg picture{display:block;width:100%;height:100%}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:52% 50%;
  filter:brightness(1) contrast(1.02) saturate(1.02)}
.hero__bg::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(20,20,18,.52) 0%, rgba(20,20,18,.14) 16%, rgba(20,20,18,0) 32%),
    linear-gradient(90deg, rgba(26,26,24,.62) 0%, rgba(26,26,24,.38) 24%, rgba(26,26,24,.08) 52%, rgba(26,26,24,.22) 100%),
    linear-gradient(0deg, rgba(18,18,16,.54) 0%, rgba(18,18,16,.12) 20%, rgba(18,18,16,0) 38%)}
.hero__scrim{display:none}

/* ── 金色装饰斜线（参考图右上那两道） ── */
.hero::before{content:"";position:absolute;top:23%;right:16%;width:122px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(224,197,138,.72));
  transform:rotate(-40deg);transform-origin:right center;z-index:1;pointer-events:none}
.hero::after{content:"";position:absolute;top:29%;right:12%;width:70px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(224,197,138,.44));
  transform:rotate(-40deg);transform-origin:right center;z-index:1;pointer-events:none}

/* ── 文字层：竖排小注 / 竖排大字 / 竖排小英文 / 右说明 + 按钮 ── */
.hero__body{
  position:relative;z-index:2;max-width:none;margin:0;background:none;border-radius:0;
  flex:1 1 auto;min-height:0;
  padding-inline:var(--pad);
  padding-block:clamp(120px,16vh,200px) clamp(18px,4vh,44px);
  display:grid;
  grid-template-columns:auto auto auto minmax(0,1fr);
  grid-template-rows:auto auto;
  gap:14px clamp(12px,1.8vw,30px);
  align-items:end;
  align-content:center;
}
.hero__side{grid-area:1/1/3/2;align-self:end;margin:0;padding-bottom:6px;
  writing-mode:vertical-rl;text-orientation:upright;
  font-size:11px;letter-spacing:.36em;color:var(--lux-gold)}
.hero h1{
  grid-area:1/2/3/3;
  writing-mode:vertical-rl;text-orientation:upright;
  font-family:var(--serif);
  font-size:clamp(40px,4.8vw,84px);
  line-height:1.52;letter-spacing:.16em;
  color:#E3C892;
  margin:0;max-height:none;
}
.hero h1 .ln{display:block}
/* 香槟金渐变（参考图通篇金字）；不支持 background-clip 的浏览器落回上面的实色 */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero h1{
    background-image:linear-gradient(169deg,#FAEDCE 0%,#EAD3A2 38%,#D3AF6A 76%,#C09C54 100%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
  }
}
.hero h1 em{font-style:normal}
.hero__en{grid-area:1/3/3/4;align-self:start;margin:0;padding-top:8px;
  writing-mode:vertical-rl;text-orientation:upright;
  font-size:9.5px;letter-spacing:.44em;color:rgba(226,200,146,.46)}
.hero__sub{grid-area:1/4/2/5;align-self:end;
  max-width:30ch;margin:0;
  font-size:14px;line-height:2.15;color:var(--t2)}
.hero__sub b{color:var(--lux-gold-lt);font-weight:400}
.hero__cta{grid-area:2/4/3/5;margin-top:26px;gap:12px}

/* ── 右列容器：桌面用 display:contents 让 .sub / .cta 继续当 grid 子项，
      小屏才真正变成一列（徽记 / 说明 / 按钮 纵向叠放） ── */
.hero__col{display:contents}

/* ── 按钮：金色填充 ── */
.hero .btn{border-color:rgba(198,161,91,.55);color:var(--lux-gold-lt)}
.hero .btn::before{background:var(--lux-gold)}
.hero .btn:hover{color:var(--lux-dark);border-color:var(--lux-gold)}
.hero .btn--solid{background:var(--lux-gold);border-color:var(--lux-gold);color:var(--lux-dark)}
.hero .btn--solid::before{background:var(--lux-gold-lt)}
.hero .btn--solid:hover{color:var(--lux-dark);border-color:var(--lux-gold-lt)}

/* ── 底栏：一行细字信息带（原四条大数字卡撤掉）+ 右侧下滑引导 ── */
.hero__stats{position:relative;z-index:3;flex:none;
  background:none;
  border-top:1px solid rgba(198,161,91,.20);
  padding:20px var(--pad) calc(22px + env(safe-area-inset-bottom));
  display:flex;flex-wrap:nowrap;align-items:center;
  gap:clamp(12px,2.2vw,30px)}
.hero__stats-list{flex:1 1 auto;min-width:0;
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:10px clamp(16px,2.6vw,40px)}
.hero__stats-list>div{border:0;padding:0;
  display:flex;align-items:baseline;gap:7px}
.hero__stats b{font-family:var(--serif);font-size:17px;font-weight:400;
  color:var(--lux-gold-lt);line-height:1}
.hero__stats b i{font-size:10.5px;font-style:normal;margin-left:1px;
  color:var(--lux-gold);letter-spacing:.06em}
.hero__stats p{margin:0;font-size:11px;letter-spacing:.14em;color:rgba(245,241,233,.50)}

/* ── 下滑引导：金色细竖线 + 向下 chevron，呼吸 + 轻微浮动 ── */
.hero__cue{flex:none;align-self:center;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  width:22px;color:var(--lux-gold);text-decoration:none;
  opacity:1;transition:opacity .5s var(--ease),color .5s var(--ease)}
.hero__cue:hover,.hero__cue:focus-visible{color:var(--lux-gold-lt)}
.hero__cue i{display:block;width:1px;height:18px;
  background:linear-gradient(180deg,rgba(198,161,91,.12),rgba(214,186,128,1));
  animation:heroCueLine 2.6s ease-in-out infinite}
.hero__cue svg{width:11px;height:7px;display:block;
  animation:heroCueArrow 2.6s ease-in-out infinite}
@keyframes heroCueLine{0%,100%{opacity:.42}50%{opacity:1}}
@keyframes heroCueArrow{0%,100%{transform:translateY(-4px);opacity:.55}50%{transform:translateY(2px);opacity:1}}
@media (prefers-reduced-motion:reduce){
  .hero__cue i,.hero__cue svg{animation:none}
}

/* ── 顶栏：首屏内完全透明，照片铺到顶端；滚过首屏由 main.js 撤掉 .at-top 恢复白玻璃 ── */
.top{transition:background-color .5s var(--ease),border-color .5s var(--ease),color .5s var(--ease)}
body.at-top .top{
  background:transparent;
  border-bottom-color:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  color:#F5F1E9}
/* 首屏内：标识块是香槟金底 + 深棕字，本身就融进首屏的金棕体系；
   这里只把「哈 墅」提到米白、口号行提到亮金。 */
body.at-top .brand{color:#F5F1E9;--lg-sub:#E1C893}
body.at-top .top__nav{color:rgba(245,241,233,.74)}
body.at-top .top__nav a:hover,body.at-top .top__nav a.on{color:#F5F1E9}
/* 首屏是深色照片，按钮要在这里"凸"出来：关键是**边框必须改成浅色** ——
   原来那圈 rgba(15,15,15,.22) 深灰边框落在深色照片上等于不存在，
   这就是"按钮和背景隔离不明显"的根因。再配一层薄白玻璃底（blur 在基础规则里）
   + 顶部内高光 + 落在照片上的落影，凸出感就出来了，色相始终是白玻璃、不抢主 CTA 的戏。
   :not(.lock) 是必须的 —— 菜单展开时按钮浮在白色菜单上，而页面并没有滚动、body 仍是 at-top，
   这套"压深色照片"的浅边框与落影放白底上会显脏，所以菜单态要回落到白底那套。 */
body.at-top:not(.lock) .burger{--bg-fg:rgba(245,241,233,.88);
  --bg-ln:rgba(255,255,255,.34);--bg-bg:rgba(255,255,255,.10);
  --bg-sh:inset 0 1px 0 rgba(255,255,255,.30),0 6px 18px -8px rgba(0,0,0,.45)}
body.at-top:not(.lock) .burger:hover{--bg-fg:#F5F1E9;
  --bg-ln:rgba(255,255,255,.54);--bg-bg:rgba(255,255,255,.17);
  --bg-sh:inset 0 1px 0 rgba(255,255,255,.38),0 8px 20px -8px rgba(0,0,0,.50)}

/* 桌面端不再有菜单按钮（>1080 已 display:none），所以「深色首屏上按钮要变米白」
   这类规则无需在桌面层再写一份；移动层的浅色玻璃胶囊由上面 :not(.lock) 那条覆盖。 */
body.at-top .progress{background:#C6A15B}

/* ══ 手机端：整幅竖版海报 ══
   手机用的是竖版专用底图 hero-lux-m.jpg（1:2.2，由 hero-lux.jpg 纵向无痕延展而成），
   它的宽高比比手机屏更"瘦长"，所以 object-fit:cover 时裁掉的是上下各几像素 ——
   整幅横向画面（左侧金色格栅柱 / 灰纱帘 / 墙面线脚 / 白茶几 / 丝绒沙发）全部可见，
   不再像之前那样被横向切掉 35%。
   文字排布照参考图：竖排标题走单列、整体挪到金柱右侧的空白墙面，
   下半幅留给实景，不在照片主体上压字。 */
@media (max-width:1080px){
  /* vh 兜底必须重复一遍：这里特异性/源序都在上面那条之后，
     只写 svh 会让老内核在这个块里照样丢声明（见文件头部的说明）。 */
  .hero{min-height:88vh;min-height:88svh;background:var(--lux-bg)}
  .hero__bg{position:absolute;inset:0;height:auto;border-radius:0}
  /* 底图本身已是 9:16 竖幅（hero-lux-m.jpg，1024×1792）。手机屏约 0.462，
     cover 必然横向裁掉约 19% —— 这是唯一无法避免的裁切，且**不再做任何纵向拉伸合成**
     （旧版把 0.715 的横图上下拉伸 35% 补高，拉出满屏金色条纹，是"难看"的根源）。
     object-position 取 20%：左边留住金柱与纱帘，右边让掉沙发一小截
     （参考图里沙发同样是被右边缘切掉的）。 */
  .hero__bg img{object-position:20% 50%}
  /* 托字压暗只做三处：顶部托顶栏 / 标题所在那片墙面轻压 / 底部托信息带。
     实景区（沙发、茶几、地毯）一律不动 —— 顶部那条是给导航留的暗带，
     因为金柱正好从左上角入画，logo 与「菜单」要有底才读得清。 */
  .hero__bg::after{background:
    linear-gradient(180deg, rgba(20,20,18,.60) 0%, rgba(20,20,18,.30) 6%, rgba(20,20,18,.06) 15%, rgba(20,20,18,0) 26%),
    radial-gradient(48% 42% at 47% 31%, rgba(18,18,16,.38), transparent 76%),
    linear-gradient(0deg, rgba(18,18,16,.52) 0%, rgba(18,18,16,.16) 11%, rgba(18,18,16,0) 24%)}
  /* 参考图右上那两道金色斜线，手机上也保留 */
  .hero::before{top:12%;right:13%;width:64px}
  .hero::after{top:16%;right:10%;width:38px}

  /* 文字块整体落在画面上半部那片空墙上（底图天生留白），
     下半幅原封不动留给沙发/茶几/地毯 —— 与参考图的构图一致。
     横排 flex：左 = 竖排标题（margin-left 让开金色格栅柱），右 = 徽记/说明/按钮 的小列。 */
  .hero__body{
    display:flex;flex-direction:row;align-items:flex-start;
    gap:18px;
    /* 同一类风险的第二处：env() 若被老内核丢弃，整条 padding 会失效、文字位置全乱。
       先给一条不含 env() 的等价兜底，再由下面一条覆盖成带刘海避让的版本。 */
    padding:calc(var(--pad) + 64px) var(--pad) 20px var(--pad);
    padding:calc(var(--pad) + 64px + env(safe-area-inset-top,0px)) var(--pad) 20px var(--pad);
  }
  .hero__side{display:none}
  .hero__en{display:none}
  /* 单列竖排：两行合成一竖列，与参考图的「深呼吸环保装 / 无限量全包」一样。
     竖排元素的 width 是"列数×行高"，必须 width:max-content 才能收成一列；
     nowrap 防止在中文字之间再折行。margin-left 用 vw 让开左侧金色格栅柱，
     固定 px 在平板上会「金压金」看不清。 */
  .hero h1{flex:none;align-self:flex-start;
    width:max-content;white-space:nowrap;
    margin-left:clamp(104px,33vw,360px);
    font-size:clamp(31px,8.4vw,42px);
    line-height:1.16;letter-spacing:.1em}
  .hero h1 .ln{display:inline}
  /* 第 3 节把 .ln i 设成了 block，会把一竖列强行切成两列，这里必须打回 inline */
  .hero h1 .ln i{display:inline}

  /* 右列：说明 → 按钮，紧凑成一簇落在上部空墙（下半幅留给实景） */
  .hero__col{flex:1 1 auto;min-width:0;
    display:flex;flex-direction:column;gap:16px}

  /* align-self:stretch 必须写：桌面的 .hero__sub 是 grid 项，带 align-self:end，
     到了 flex 列里会把整段文字顶到右边 */
  .hero__sub{align-self:stretch;margin:0 0 0 4px;max-width:none;
    font-size:12px;line-height:1.95;color:rgba(245,241,233,.82)}
  .hero__cta{margin-top:0;margin-left:4px}
  /* 小屏上按钮的可用宽度只有一列（约 160px），必须 nowrap 且收窄内边距，
     否则「免费上门量房」会折成两行。 */
  .hero__cta .btn{width:auto;max-width:none;white-space:nowrap;
    padding:13px 18px;font-size:13px;letter-spacing:.04em}

  .hero__stats{border-top-color:rgba(198,161,91,.18);
    gap:12px;
    padding:16px var(--pad) 18px;
    padding:16px var(--pad) calc(18px + env(safe-area-inset-bottom))}
  .hero__stats-list{gap:8px 14px}
  .hero__stats b{font-size:15px}
  .hero__stats p{font-size:10px;letter-spacing:.12em}
  .hero__cue i{height:15px}
}
/* >>> LUX-END <<< */

/* >>> MTB-START <<< */
/* ══════════════════════════════════════════════════════════════════
   21. 手机端底部行动栏 + 名册墙连续流动
   21.0 断点口径 —— 只在主题的「移动层」（≤1080px）出现。
        也就是说：顶栏导航在同一断点收起为汉堡菜单，底栏同时出现，
        移动端的导航与转化入口成对切换。桌面端保留顶栏 6 项导航、不出现底栏；
        右下角原先的 .fab（免费量房）已撤掉，那个位置让给全站的返回顶部（第 16 节）。
   21.1 视觉 —— 纯黑块面 + 香槟金，与首屏 / 预约区 / 页脚同一套语言。
        右格是实心香槟金 CTA，压墨字（金底对墨实测 6.63:1；压米白只有 2.43:1，
        所以必须是墨字，与 .on-dark 的 --accent-ink 同一口径）。
   21.2 名册墙 —— 桌面网格 10~13 列会把 68 张脸一次摆清，
        等于把团队人数写在了页面上，与「不体现团队人数」的站内口径冲突。
        改成连续流动：保留「看得见的固定班底」，但数不出人头。
   ══════════════════════════════════════════════════════════════════ */
.mbar{display:none}

/* ── 21.0 / 21.1 底部行动栏 ── */
@media (max-width:1080px){
  /* 返回顶部：全站都在，但移动层右下角被底栏占了，必须抬到底栏之上
     （底栏高 59px + 14px 间距 = 73px，再叠 iOS 安全区）。
     底栏是 z-index:95、返回顶部是 90，即便算错也不会盖住底栏，只是会"贴"上去。 */
  .up{right:14px;bottom:calc(73px + env(safe-area-inset-bottom,0px))}

  /* 两个入口做成**独立的胶囊按钮**，四周留出呼吸位（条内 6/12px、两枚之间 10px），
     而不是各占半屏、贴边顶满的通栏格 —— 与悬浮件的圆角/色系同一套语言。
     列宽上限 240px + 整行居中：手机（390）由屏宽决定仍是 ~178px，平板/宽屏则停在 240px
     居中，不会在 768 及以上被拉成两条 367px 的大色块。
     左格透明胶囊在深条上会「没有形」，所以给一层 1px 内描边把轮廓勾出来（不占盒模型，
     不会因为加边框把高度撑到 47px 而污染下面的 body padding 计算）。
     右格仍是实心香槟金 + 墨字（金底对墨实测 6.63:1，见 21.1）。 */
  .mbar{position:fixed;left:0;right:0;bottom:0;z-index:95;
    display:grid;grid-template-columns:repeat(2,minmax(0,240px));justify-content:center;gap:10px;
    padding:6px 12px calc(6px + env(safe-area-inset-bottom,0px));
    background:rgba(10,10,10,.93);
    -webkit-backdrop-filter:blur(18px) saturate(1.2);
    backdrop-filter:blur(18px) saturate(1.2);
    border-top:1px solid rgba(198,161,91,.30);
    box-shadow:0 -14px 34px -20px rgba(0,0,0,.55);
    transition:transform .5s var(--ease)}
  /* 汉堡菜单展开时整条滑走：菜单是全屏白底遮罩，底栏留在下面会露一条黑边 */
  body.lock .mbar{transform:translateY(101%)}

  .mbar a{display:flex;align-items:center;justify-content:center;gap:9px;
    height:46px;font-size:13px;letter-spacing:.14em;font-weight:400;
    color:#F0EBE1;position:relative;border-radius:999px;
    transition:background-color .4s var(--ease),color .4s var(--ease),
      transform .25s var(--ease)}
  /* 按下时的轻微回弹，与全站 .btn:active 同一手感 */
  .mbar a:active{transform:scale(.975)}
  .mbar a svg{width:18px;height:18px;flex:none}
  .mbar a b{font-weight:400}

  .mbar a.mbar__tel{box-shadow:inset 0 0 0 1px rgba(240,235,225,.16)}
  .mbar a.mbar__tel svg{color:#C6A15B}
  .mbar a.mbar__tel:active{background:rgba(198,161,91,.12)}

  /* 权重坑：`.mbar a` 是 (0,1,1)，单写 `.mbar__book` 只有 (0,1,0) —— 会被压掉，
     于是金底上渲染出米白字（对比度 2.43:1，几乎不可读）。统一提升到 `.mbar a.mbar__book`
     (=0,2,1) 才真正生效：墨字对金底 8.16:1。 */
  .mbar a.mbar__book{background:#C6A15B;color:#22211F;font-weight:500}
  .mbar a.mbar__book b{font-weight:500}
  .mbar a.mbar__book svg{color:#22211F}
  .mbar a.mbar__book:active{background:#D6BA80}

  /* 内容不被底栏盖住：46（按钮高）+ 12（条内上下各 6）+ 1（顶部发丝线）+ 1（取整余量）。
     少算这 1px 会让页脚版权行的最后一行压在底栏上沿。 */
  body{padding-bottom:calc(60px + env(safe-area-inset-bottom,0px))}
}

/* ── 21.2 名册墙：连续流动 ── */
.wallflow{position:relative;overflow:hidden;padding-block:4px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.wallflow__track{display:flex;width:max-content;
  animation:wallFlow 70s linear infinite}
.wallflow:hover .wallflow__track{animation-play-state:paused}
.wallflow__row{display:flex;flex:none;gap:14px;padding-right:14px;
  overflow:visible;margin-inline:0;
  -webkit-mask-image:none;mask-image:none}
/* 桌面 132 / 小屏收到 100，保证一屏内至少能看到 6~8 张脸 */
.wallflow__row .mc{flex:0 0 auto;width:clamp(100px,11vw,132px)}
@keyframes wallFlow{from{transform:translateX(0)}to{transform:translateX(-50%)}}

@media (prefers-reduced-motion:reduce){
  /* 关掉动效时退回可手动横滑，并且不重复渲染第二份（否则滑到底会看到两遍同一批人） */
  .wallflow{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .wallflow__track{animation:none}
  .wallflow__row[aria-hidden="true"]{display:none}
}
/* >>> MTB-END <<< */

/* >>> OFFICIAL-START <<< */
/* ══════════════════════════════════════════════════════════════════
   22. 官方联络与授权渠道
   22.0 关于页的「官方联系方式」区块 —— 找电话、找地址是这一页的第一意图，
        TKD 也按「哈墅电话 / 哈墅联系方式」写。两栏卡片负责"给信息"，
        下面一条淡金声明负责"防冒用"。
   22.1 页脚同口径一行，全站每一页都看得到 —— 山寨站会照抄电话，
        但抄不走「任何分公司无权安排也无权签约」这句限定。
   ══════════════════════════════════════════════════════════════════ */
.official{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.6vw,20px);margin-top:clamp(38px,4.6vw,62px)}
.official article{background:var(--card);border:1px solid var(--ln);
  border-top:2px solid var(--accent-pale);
  padding:clamp(26px,3vw,40px) clamp(22px,2.6vw,36px)}
.official__k{display:block;font-size:11px;letter-spacing:.3em;color:var(--accent)}
/* 电话与地址是这一页真正的主角，字号给到与页脚电话同级再上一档 */
.official__v{display:block;margin-top:14px;font-family:var(--serif);
  font-size:clamp(23px,2.9vw,36px);line-height:1.34;letter-spacing:.03em;color:var(--t1)}
a.official__v:hover{color:var(--accent-lt)}
.official article p{margin:14px 0 0;font-size:13.5px;line-height:1.95;color:var(--t2)}

/* 授权声明：金色左标 + 淡金底。整页只此一处"警示"，不跟上面的卡片抢视觉 */
.official__notice{margin-top:clamp(14px,1.6vw,20px);
  padding:clamp(24px,2.8vw,34px) clamp(22px,2.6vw,36px);
  border:1px solid var(--ok-bd);border-left:3px solid var(--accent);background:var(--ok-bg)}
.official__notice b{display:block;font-family:var(--serif);font-weight:400;
  font-size:15px;letter-spacing:.2em;color:var(--t1)}
.official__notice p{margin:14px 0 0;font-size:13.5px;line-height:2.05;color:var(--t2)}
.official__notice em{font-style:normal;color:var(--t1);border-bottom:1px solid var(--ok-bd)}

/* 页脚提示：跨满整行（grid-column:1/-1），于是自动吃到网格的行间距，
   不用额外写 margin，也不会跟上面的四栏错位 */
.foot__alert{grid-column:1/-1;border-top:1px solid var(--ln);
  padding-top:clamp(18px,2vw,26px);
  font-size:12.5px;line-height:2.05;color:var(--t3);letter-spacing:.02em}
.foot__alert b{font-weight:400;color:var(--t2)}
.foot__alert a{color:var(--t1);border-bottom:1px solid var(--ok-bd)}

/* 版权行里的品牌别名：字号沿用 .foot__bar 的 11.5px，只靠下划线区分可点，
   不抢版权行本身的视觉；换行时按词折行（flex-wrap），移动端不会溢出 */
.foot__brands{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px}
.foot__brands a{color:var(--t3);border-bottom:1px solid var(--ln-2);padding-bottom:1px;
  transition:color .25s ease,border-color .25s ease}
.foot__brands a:hover{color:var(--accent);border-bottom-color:var(--accent)}

@media (max-width:1080px){
  .official{grid-template-columns:1fr}
}
/* >>> OFFICIAL-END <<< */