/* SEASUSIAM · 视觉系统 v2
   依据《网站视觉优化与图片实施手册》2026-08-26
   §03 设计 Token / §05 Header+Hero / §06 首页模块 / §08 详情页 / §09 动画与性能 */

/* §4 视觉系统 Token —— Pearl Ivory / Deep Burgundy / Champagne Gold
   颜色比例：Ivory+White 78% / 房产图片 16% / Burgundy 4% / Champagne 2% */
:root{
  --ivory:#F7F2EA;          /* 主背景 */
  --paper:#FFFDF9;          /* Header、卡片、搜索条、表单 */
  --warmgray:#FBF7F1;       /* 交替区块、hover、内容带 */
  --white:#FFFFFF;
  --burgundy:#4B0B10;       /* 签名色：主 CTA、选中态、重点、Footer */
  --burgundy-hover:#35070B;
  --champagne:#C3A16B;      /* 细线、标签、图标、品牌点缀 */
  --ink:#271917;            /* 正文与主要 UI 文字 */
  --char:var(--ink);
  --muted:#756C67;
  --sand:#E7DDCE;
  --line:rgba(75,11,16,.14);
  --line-soft:rgba(75,11,16,.07);

  /* phase-1 兼容别名：内页与后台仍在引用，先不重命名以降低回归风险 */
  --ocean:var(--burgundy);
  --bronze:var(--champagne);

  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Inter','Noto Sans Thai','Noto Sans SC','Noto Sans JP','Noto Sans KR',
         -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  --wrap:1440px;
  --standard:1200px;
  --editorial:960px;
  --copy:760px;
  --gut:clamp(22px,3.4vw,52px);
  --sec:clamp(56px,6.2vw,88px);   /* §3 密度：从 112–144 收到 56–88 */
  --r:6px;

  /* ── §2 Motion Tokens ────────────────────────── */
  --motion-xs:160ms; --motion-s:240ms; --motion-m:420ms;
  --motion-l:680ms;  --motion-xl:1000ms;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.16,1,.3,1);
  --ease-standard:cubic-bezier(.4,0,.2,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease:var(--ease-out);
  --move-xs:12px; --move-s:24px; --move-m:40px;
  --stagger:80ms;
}
/* 各语言展示标题各自的衬线回退（§03 多语言字体） */
html[lang^="zh"]{ --serif:'Noto Serif SC','Songti SC',STSong,serif; }
html[lang^="th"]{ --serif:'Noto Serif Thai','Sarabun',serif; --lh-display:1.30; }
html[lang^="ja"]{ --serif:'Noto Serif JP','Hiragino Mincho ProN',serif; }
html[lang^="ko"]{ --serif:'Noto Serif KR','Nanum Myeongjo',serif; }
html{ --lh-display:1.08; --lh-body:1.6; }
html[lang^="th"]{ --lh-body:1.65; }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto!important }
  *,*::before,*::after{
    animation-duration:1ms!important; animation-iteration-count:1!important;
    transition-duration:1ms!important; scroll-behavior:auto!important }
  /* 内容必须立即可见且功能完整（§10 P0） */
  .reveal,.reveal-group > *,.ln-i,.hero-media .ph-img{ opacity:1!important; transform:none!important }
}
body{
  margin:0; background:var(--ivory); color:var(--char);
  font-family:var(--sans); font-size:17px; line-height:var(--lh-body); font-weight:400;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,video{ max-width:100%; display:block }
/* §5 加载逻辑：占位底色 → 解码完成后淡入；失败切 fallback 而非破图 */
.ph-img{ width:100%; height:100%; object-fit:cover; background:var(--sand) }
/* §9 淡入只在 JS 初始化成功后启用；脚本失败或禁用时图片直接可见 */
.js-motion .ph-img{ opacity:0; transition:opacity .34s var(--ease-out) }
.js-motion .ph-img.is-loaded,.js-motion .ph-img.is-error{ opacity:1 }
@media (prefers-reduced-motion:reduce){ .js-motion .ph-img{ opacity:1; transition:none } }
a{ color:inherit; text-decoration:none }
button,input,select,textarea{ font:inherit; color:inherit }
:focus-visible{ outline:2px solid var(--bronze); outline-offset:3px }

.wrap{ width:min(100% - 2 * var(--gut), var(--wrap)); margin-inline:auto }
.wrap.standard{ max-width:var(--standard) }
.wrap.editorial{ max-width:var(--editorial) }
/* §04 Copy 容器：不再叠加全局左右 padding，避免桌面实际文字宽只剩 536px */
.copy{ max-width:var(--copy) }
.narrow{ max-width:var(--copy) }
/* §04 中文断行：禁止单字孤行 */
html[lang^="zh"] .copy,html[lang^="zh"] .prose,html[lang^="zh"] p,html[lang^="zh"] .lede{
  line-break:strict; word-break:normal; overflow-wrap:break-word; text-wrap:pretty }
html[lang^="ja"] .copy,html[lang^="ja"] .prose,html[lang^="ja"] p{ line-break:strict; word-break:normal; text-wrap:pretty }
html[lang^="zh"] .d1,html[lang^="zh"] .d2,html[lang^="zh"] .d3,
html[lang^="ja"] .d1,html[lang^="ja"] .d2,html[lang^="ja"] .d3,
html[lang^="ko"] .d1,html[lang^="ko"] .d2,html[lang^="ko"] .d3{ text-wrap:balance; word-break:keep-all }
/* §04 中文正文 17–18px / 1.75–1.85 */
html[lang^="zh"]{ --lh-body:1.78 }
html[lang^="ja"],html[lang^="ko"]{ --lh-body:1.75 }
html[lang^="zh"] body,html[lang^="ja"] body,html[lang^="ko"] body{ font-size:17px }
.sec{ padding-block:var(--sec) }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.skip{ position:absolute; left:-999px; top:0; z-index:300; background:var(--ocean); color:#fff; padding:12px 18px }
.skip:focus{ left:8px; top:8px }

/* ── §03 字号 Token ───────────────────────────── */
.d1,.d2,.d3{ font-family:var(--serif); font-weight:500; color:var(--ocean); margin:0; letter-spacing:0 }
.d1{ font-size:clamp(38px,5.2vw,66px); line-height:var(--lh-display); max-width:900px }
.d2{ font-size:clamp(30px,3.4vw,44px); line-height:1.15 }
.d3{ font-size:clamp(22px,2.1vw,28px); line-height:1.2 }
html[lang^="th"] .d1{ line-height:1.3 }
.lede{ font-size:clamp(17px,1.25vw,19px); color:var(--muted); max-width:56ch; font-weight:400 }
p{ margin:0 0 1em }
.prose{ max-width:680px }
.prose p{ margin:0 0 1.2em }
.prose h2{ font-family:var(--serif); font-weight:500; font-size:clamp(26px,2.4vw,34px); color:var(--ocean); margin:1.9em 0 .5em; line-height:1.2 }
.prose h3{ font-size:19px; font-weight:600; color:var(--ocean); margin:1.8em 0 .5em }
.prose ul{ padding-left:1.1em; margin:0 0 1.2em }
.prose li{ margin-bottom:.5em }
.prose a{ border-bottom:1px solid var(--bronze) }

.eyebrow{ display:flex; align-items:center; gap:14px; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--bronze); font-weight:600; margin:0 0 18px }
.eyebrow::after{ content:''; flex:1; height:1px; background:var(--sand) }
.eyebrow.plain::after{ display:none }
.mono{ font-variant-numeric:tabular-nums; letter-spacing:.01em }
.tiny{ font-size:14px; color:var(--muted) }
.label{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--bronze); font-weight:600 }

/* ── §5.1 Header：始终浅色实体导航，不再透明反白 ────────── */
.top{ position:fixed; top:0; left:0; right:0; z-index:80;
  background:var(--paper); color:var(--ink); border-bottom:1px solid var(--line-soft);
  transition:background var(--motion-s) var(--ease-standard),
             height var(--motion-s) var(--ease-standard) }
.top-in{ display:flex; align-items:center; gap:26px; height:82px;
  transition:height var(--motion-s) var(--ease-standard) }
.top.solid .top-in{ height:70px }                    /* §5.1 滚动压缩到 68–72px */
.top.solid{ background:rgba(255,253,249,.94) }
@supports (backdrop-filter:blur(8px)){ .top.solid{ backdrop-filter:blur(10px) } }
.logo img{ height:34px; width:auto; transition:height var(--motion-s) var(--ease-standard) }
.top.solid .logo img{ height:30px }
.mainnav{ display:flex; gap:26px; margin-left:auto; list-style:none; margin-block:0; padding:0 }
.mainnav > li{ position:relative }
.mainnav > li > a{ font-size:13px; letter-spacing:.02em; padding:10px 0; display:inline-block; color:var(--ink) }
.mainnav > li > a::after{ content:''; display:block; height:1px; background:var(--burgundy);
  transform:scaleX(0); transform-origin:left; transition:transform var(--motion-s) var(--ease-out) }
.mainnav > li:hover > a::after,.mainnav > li > a[aria-current]::after{ transform:scaleX(1) }
.mainnav > li:hover > a{ color:var(--burgundy) }
.mainnav ul{ position:absolute; top:100%; left:-18px; min-width:236px; background:var(--paper);
  border:1px solid var(--line-soft); padding:10px 0; margin:0; list-style:none; opacity:0; visibility:hidden;
  transform:translateY(6px); transition:.24s var(--ease); box-shadow:0 20px 50px -34px rgba(39,25,23,.45);
  border-radius:var(--r) }
.mainnav li:hover > ul,.mainnav li:focus-within > ul{ opacity:1; visibility:visible; transform:none }
.mainnav ul a{ display:block; padding:10px 20px; font-size:13px; color:var(--ink) }
.mainnav ul a:hover{ background:var(--warmgray); color:var(--burgundy) }
.top-act{ display:flex; align-items:center; gap:14px }
.langbtn{ background:none; border:0; padding:8px 4px; font-size:12px; letter-spacing:.06em;
  cursor:pointer; color:var(--muted) }
.langbtn:hover{ color:var(--burgundy) }
.burger{ display:none; background:none; border:0; cursor:pointer; padding:8px; margin-left:auto; color:var(--ink) }
.burger span{ display:block; width:24px; height:1.5px; background:currentColor; margin:6px 0 }
/* 首页与内页统一：main 一律让开固定 header 的高度 */
body{ padding-top:82px }
@media (max-width:992px){ body{ padding-top:74px } .top-in{ height:74px } .logo img{ height:31px } }
@media (max-width:479px){ .logo img{ height:27px } }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:15px 30px;
  background:var(--ocean); color:var(--ivory); border:1px solid var(--ocean); border-radius:var(--r);
  font-size:14px; font-weight:500; letter-spacing:.03em; cursor:pointer; transition:.3s var(--ease) }
.btn:hover{ background:var(--ink); border-color:var(--ink) }
.btn.ghost{ background:transparent; color:inherit; border-color:currentColor; opacity:.85 }
.btn.ghost:hover{ background:transparent; opacity:1; border-color:var(--bronze); color:var(--bronze) }
.btn.bronze{ background:var(--bronze); border-color:var(--bronze); color:#fff }
.btn.sm{ padding:10px 18px; font-size:13px }
.btn.wide{ width:100% }
/* §05 次入口用文本链接而非第二个边框按钮 */
.textlink{ display:inline-flex; align-items:center; gap:8px; font-size:14px; letter-spacing:.03em;
  border-bottom:1px solid currentColor; padding-bottom:3px; transition:.3s var(--ease) }
.textlink:hover{ gap:14px }

/* ── §5.2 Hero：左浅色文案 38% + 右景观图 62%，高度 560–620px ── */
.home-hero{ background:var(--ivory); position:relative }
.home-hero__grid{ display:grid; grid-template-columns:38% 62%; align-items:stretch;
  min-height:clamp(560px,42vw,620px); max-height:620px }
.home-hero__copy{ display:flex; flex-direction:column; justify-content:center;
  padding:clamp(32px,4vw,56px) clamp(28px,3.4vw,56px) clamp(32px,4vw,56px) 0 }
.home-hero__media{ position:relative; overflow:hidden; border-radius:var(--r) }
.home-hero__media .ph-img{ width:100%; height:100%; object-fit:cover; object-position:68% 50% }
/* §5.2 左右交界 60–100px 轻柔 Ivory 渐变，不做深色遮罩 */
.home-hero__media::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:100px; z-index:2;
  background:linear-gradient(90deg,var(--ivory) 0%,rgba(247,242,234,.55) 46%,rgba(247,242,234,0) 100%) }
.home-hero .d1{ color:var(--ink); font-size:clamp(40px,3.4vw,60px); line-height:1.06; max-width:14ch }
html[lang^="zh"] .home-hero .d1,html[lang^="ja"] .home-hero .d1,
html[lang^="ko"] .home-hero .d1,html[lang^="th"] .home-hero .d1{ font-size:clamp(34px,2.9vw,50px) }
.home-hero .lede{ color:var(--muted); margin-top:16px; max-width:38ch; font-size:15px; line-height:1.6 }
.home-hero .eyebrow{ color:var(--champagne) }
.home-hero .eyebrow::after{ background:var(--line) }
.hero-cta{ display:flex; align-items:center; gap:12px; margin-top:24px; flex-wrap:wrap }
/* §5.2 地点快捷入口 */
.hero-places{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px }
.hero-places a{ font-size:12px; letter-spacing:.04em; color:var(--muted);
  border:1px solid var(--line); border-radius:999px; padding:7px 14px; background:var(--paper);
  transition:color var(--motion-xs) var(--ease-standard), border-color var(--motion-xs) var(--ease-standard) }
.hero-places a:hover{ color:var(--burgundy); border-color:var(--burgundy) }

/* §6.1 搜索条：悬浮白盒，圆角 8px，细边＋轻影 */
.home-search{ position:relative; z-index:5; margin-top:-38px }
.searchbox{ background:var(--paper); border:1px solid var(--line); border-radius:8px;
  box-shadow:0 18px 44px -32px rgba(39,25,23,.34) }
.tabrow{ display:flex; gap:6px; padding:10px 10px 0 }
.tabrow button{ background:none; border:0; padding:8px 18px; font-size:13px; letter-spacing:.03em;
  color:var(--muted); cursor:pointer; border-radius:999px; transition:.16s var(--ease-standard) }
.tabrow button.on{ background:var(--burgundy); color:var(--paper); font-weight:500 }
.searchbar{ background:transparent; padding:8px 10px 10px; display:grid;
  grid-template-columns:1.5fr 1fr 1fr .9fr auto; gap:4px; align-items:end }
.searchbar .fld{ padding:8px 14px; border-right:1px solid var(--line-soft) }
.searchbar .fld:nth-last-of-type(1){ border-right:0 }
.searchbar label{ display:block; font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--champagne); font-weight:600 }
.searchbar input,.searchbar select{ width:100%; border:0; background:transparent; padding:5px 0 0;
  font-size:15px; outline:none; color:var(--ink) }
.searchbar .btn{ margin:0; height:46px; align-self:end }
.search-adv{ padding:0 24px 12px; text-align:right }
.search-adv a{ font-size:12px; color:var(--muted); border-bottom:1px solid var(--line) }
.search-adv a:hover{ color:var(--burgundy) }

/* ── §06 编辑式构图 ───────────────────────────── */
.grid{ display:grid; gap:clamp(20px,2.2vw,34px) }
.g2{ grid-template-columns:repeat(2,1fr) } .g3{ grid-template-columns:repeat(3,1fr) }
.g4{ grid-template-columns:repeat(4,1fr) }

/* 通用双栏（About 介绍、区域详情、私人房源、顾问服务等） */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,72px); align-items:center }
@media (max-width:992px){ .split{ grid-template-columns:1fr!important; gap:32px; align-items:start } }

/* Featured：第一张占 2/3 宽，后两张右侧堆叠 */
.feat{ display:grid; grid-template-columns:2fr 1fr; gap:clamp(20px,2.2vw,34px); align-items:start }
.feat-side{ display:grid; gap:clamp(20px,2.2vw,34px) }
.feat .lead .card-img{ aspect-ratio:3/2 }
.feat-side .card-img{ aspect-ratio:3/2 }
.feat .lead .card-title{ font-size:clamp(24px,2vw,30px) }

/* Collections：2×2 非对称 */
.coll{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,2.2vw,34px) }
.coll a:nth-child(1),.coll a:nth-child(4){ margin-top:0 }
.coll a:nth-child(2),.coll a:nth-child(3){ margin-top:clamp(24px,4vw,64px) }

/* ── 卡片（§06 卡片通用规则） ──────────────────── */
.card{ position:relative; display:flex; flex-direction:column }
.card-img{ position:relative; aspect-ratio:3/2; overflow:hidden; background:var(--sand); border-radius:var(--r) }
.card-img .ph-img{ transition:transform .8s var(--ease), opacity .34s var(--ease) }
.card:hover .card-img .ph-img{ transform:scale(1.03) }
.badge{ position:absolute; top:14px; left:14px; background:rgba(255,255,255,.94); color:var(--ocean);
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; padding:7px 12px; font-weight:600 }
.badge.dark{ background:rgba(39,25,23,.84); color:var(--ivory) }
.badge.bronze{ background:var(--bronze); color:#fff }
.card-act{ position:absolute; top:12px; right:12px; display:flex; gap:6px; opacity:0; transition:opacity .3s var(--ease) }
.card:hover .card-act,.card-act:focus-within{ opacity:1 }
.iconbtn{ width:36px; height:36px; display:grid; place-items:center; background:rgba(255,255,255,.94);
  border:0; cursor:pointer; color:var(--ocean); transition:.25s var(--ease) }
.iconbtn:hover{ color:var(--bronze) }
.iconbtn[aria-pressed="true"]{ background:var(--bronze); color:#fff }
.card-body{ padding-top:18px }
.card-loc{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--bronze); font-weight:600 }
.card-title{ font-family:var(--serif); font-weight:500; font-size:clamp(21px,1.7vw,24px); line-height:1.22;
  color:var(--ocean); margin:9px 0 10px }
.card-price{ font-size:17px; color:var(--char); font-weight:500 }
.card-meta{ display:flex; flex-wrap:wrap; gap:16px; margin-top:10px; font-size:14px; color:var(--muted) }
.card:hover .card-title{ color:var(--bronze) }
.stretch::after{ content:''; position:absolute; inset:0 }

/* 图块（Collections / Locations，4:5） */
.tile{ position:relative; display:block; overflow:hidden; background:var(--sand); border-radius:var(--r) }
.tile .ph{ aspect-ratio:4/5 }
.tile .ph-img{ transition:transform .9s var(--ease), opacity .34s var(--ease) }
.tile:hover .ph-img{ transform:scale(1.035) }
.tile-cap{ position:absolute; left:0; right:0; bottom:0; padding:88px 22px 22px; color:var(--white);
  /* §2 文字安全区：底部约 40% 压成低细节区，保证覆盖文字可读 */
  background:linear-gradient(transparent 0%,rgba(75,11,16,.18) 28%,rgba(75,11,16,.62) 62%,rgba(75,11,16,.90) 100%) }
.tile-cap b{ display:block; font-family:var(--serif); font-weight:500; font-size:clamp(20px,1.6vw,25px); line-height:1.2 }
.tile-cap span{ font-size:13px; opacity:.86; display:block; margin-top:6px; line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.tile-cap span + span{ -webkit-line-clamp:1; opacity:1 }
.tile-out{ margin-top:16px }
.tile-out b{ display:block; font-family:var(--serif); font-weight:500; font-size:22px; color:var(--ocean); line-height:1.2 }
.tile-out span{ font-size:13px; color:var(--muted) }

/* 细线列表（§06 Advisory 用细线列表而非大卡片） */
.rowlist{ border-top:1px solid var(--line) }
.rowlist a{ display:flex; align-items:baseline; gap:24px; padding:26px 0; border-bottom:1px solid var(--line-soft);
  transition:padding .3s var(--ease), color .3s var(--ease) }
.rowlist a:hover{ padding-left:12px; color:var(--bronze) }
.rowlist .n{ font-size:11px; letter-spacing:.14em; color:var(--bronze); flex:0 0 40px; font-weight:600 }
.rowlist .t{ flex:1; font-family:var(--serif); font-weight:500; font-size:clamp(19px,1.5vw,23px); color:inherit; line-height:1.25 }
.rowlist .m{ font-size:14px; color:var(--muted); max-width:34ch; text-align:right }
.rowlist a:hover .t{ color:var(--bronze) }

/* 品牌陈述段（§06 顺序里的 Brand Statement） */
.statement{ text-align:center; max-width:900px; margin-inline:auto }
.statement .q{ font-family:var(--serif); font-weight:500; font-size:clamp(26px,3vw,40px); line-height:1.28; color:var(--ocean) }

/* 全宽横幅（Private Collection） */
.banner{ position:relative; min-height:560px; display:grid; align-content:center; overflow:hidden; background:var(--ocean) }
.banner .ph-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.banner::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(75,11,16,.72) 0%,rgba(75,11,16,.28) 58%,rgba(75,11,16,0) 100%) }
.banner > .wrap{ position:relative; z-index:2 }
.banner-in{ position:relative; z-index:2; color:var(--white); max-width:560px }
.banner .d2{ color:var(--white) }
.banner .lede{ color:rgba(255,255,255,.84) }

/* Insights 60/40 编辑式 */
.ins{ display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(26px,3.4vw,56px); align-items:center }
.ins-lead .card-img{ aspect-ratio:3/2 }
.ins-lead .card-title{ font-size:clamp(24px,2.2vw,32px) }

/* 创始人（§07） */
.founder{ display:grid; grid-template-columns:42% 58%; gap:clamp(24px,3vw,52px); align-items:center }
.founder.rev{ grid-template-columns:58% 42% }
.founder.rev .fimg{ order:2 }
.fimg{ aspect-ratio:4/5; overflow:hidden; background:var(--sand); border-radius:var(--r) }
.fimg .ph-img{ object-position:center top }
.founders-wrap{ display:grid; gap:clamp(48px,6vw,80px) }

/* §4 关于我们：1280 容器 + 800px 正文列，不再缩成页面正中窄列 */
.page-shell{ width:min(100% - 2 * var(--gut), 1280px); margin-inline:auto }
.about-copy{ width:min(100%, 800px) }
.about-copy p{ font-size:18px; line-height:1.75; text-wrap:pretty }
html[lang^="zh"] .about-copy p,html[lang^="ja"] .about-copy p,html[lang^="ko"] .about-copy p{ line-height:1.78 }
/* 中英混排：品牌词与专有名词不被拆到两行 */
.nowrap{ white-space:nowrap }
@media (max-width:767px){ .about-copy p{ font-size:16px; line-height:1.8 } }

/* §05 团队网格：两位创始人时居中双列，绝不留空占位卡 */
.team-grid{ margin:40px auto 0; display:grid;
  grid-template-columns:repeat(2,minmax(0,420px));
  justify-content:center; gap:clamp(24px,4vw,56px) }
.team-card .tile{ aspect-ratio:4/5 }
@media (max-width:767px){ .team-grid{ max-width:420px; grid-template-columns:1fr; gap:48px } }

/* ── §08 详情页 ───────────────────────────────── */
.gallery{ display:grid; grid-template-columns:65fr 35fr; gap:8px; height:clamp(420px,52vw,720px) }
.gallery > *{ overflow:hidden; background:var(--sand); border-radius:var(--r) }
.gallery .ph-img{ cursor:zoom-in; transition:transform .8s var(--ease), opacity .34s var(--ease) }
.gallery a:hover .ph-img{ transform:scale(1.025) }
.gallery .side{ display:grid; grid-template-rows:1fr 1fr; gap:8px }
.gallery .side > div{ overflow:hidden; position:relative; border-radius:var(--r) }
.gmore{ position:absolute; right:16px; bottom:16px; background:rgba(255,255,255,.95); color:var(--ocean);
  padding:11px 20px; font-size:13px; font-weight:500; border:0; cursor:pointer; letter-spacing:.02em }
.det{ display:grid; grid-template-columns:1fr 380px; gap:clamp(36px,5vw,84px); align-items:start }
.aside{ position:sticky; top:110px }
.advisorcard{ background:var(--white); border:1px solid var(--line-soft); padding:28px }

/* §08 Key facts：4–6 个大数字横排，不做表格 */
.facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:clamp(20px,2.4vw,40px); padding:34px 0; border-block:1px solid var(--line) }
.facts div dt{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--bronze); font-weight:600; margin-bottom:10px }
.facts div dd{ margin:0; font-family:var(--serif); font-weight:500; font-size:clamp(24px,2.2vw,32px); color:var(--ocean); line-height:1.1 }
.facts div dd small{ font-family:var(--sans); font-size:14px; font-weight:400; color:var(--muted); margin-left:4px }

/* §08 ROI：3 个大指标 */
.roi{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,40px) }
.roi div{ background:var(--warmgray); padding:26px }
.roi dt{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--bronze); font-weight:600; margin-bottom:10px }
.roi dd{ margin:0; font-family:var(--serif); font-weight:500; font-size:clamp(26px,2.4vw,34px); color:var(--ocean); line-height:1.1 }

.chips{ display:flex; flex-wrap:wrap; gap:9px }
.chips[hidden]{ display:none }
.chip{ border:1px solid var(--line); padding:8px 15px; font-size:14px; color:var(--ocean); background:transparent; cursor:pointer; border-radius:var(--r) }
.chip.on{ background:var(--ocean); color:var(--ivory); border-color:var(--ocean) }
.note{ border-left:2px solid var(--bronze); padding:14px 0 14px 18px; font-size:14px; color:var(--muted); background:rgba(195,161,107,.05) }
.mapbox{ aspect-ratio:16/9; background:var(--sand); position:relative; overflow:hidden; border-radius:var(--r) }
.mapbox iframe{ width:100%; height:100%; border:0 }
.blur-loc{ position:absolute; inset:0; display:grid; place-items:center; background:rgba(75,11,16,.84);
  color:var(--white); text-align:center; padding:26px; backdrop-filter:blur(6px) }

/* ── 搜索 / 列表页 ────────────────────────────── */
.srch{ display:grid; grid-template-columns:270px 1fr; gap:clamp(28px,3.4vw,56px); align-items:start }
.facet{ position:sticky; top:110px }
.facet fieldset{ border:0; border-bottom:1px solid var(--line-soft); padding:0 0 22px; margin:0 0 22px }
.facet legend{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--bronze); margin-bottom:14px; padding:0; font-weight:600 }
.facet label.ck{ display:flex; align-items:center; gap:10px; padding:6px 0; font-size:15px; cursor:pointer }
.field{ display:block; margin-bottom:16px }
.field > span{ display:block; font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--bronze); margin-bottom:8px; font-weight:600 }
.field input,.field select,.field textarea{ width:100%; padding:13px 15px; border:1px solid var(--line);
  background:var(--white); border-radius:var(--r); font-size:15px }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--bronze); outline:none }
.field textarea{ min-height:120px; resize:vertical }
.two{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
.bar{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding-bottom:22px;
  border-bottom:1px solid var(--line); margin-bottom:34px; flex-wrap:wrap }
.pager{ display:flex; gap:8px; justify-content:center; margin-top:60px }
.pager a,.pager span{ padding:11px 17px; border:1px solid var(--line); font-size:14px }
.pager .on{ background:var(--ocean); color:var(--ivory); border-color:var(--ocean) }
.empty{ text-align:center; padding:90px 20px }

.formcard{ background:var(--white); border:1px solid var(--line-soft); padding:clamp(26px,3vw,42px) }
.consent{ display:flex; gap:11px; align-items:flex-start; font-size:14px; color:var(--muted); margin:16px 0 }
.consent input{ margin-top:4px; flex:0 0 auto }
.ok{ background:rgba(75,11,16,.05); border-left:2px solid var(--ocean); padding:20px 22px }
.bad{ border-left:2px solid #A4453A; background:rgba(164,69,58,.06); padding:15px 19px; font-size:14px }

/* 计算器 */
.calc{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,3.4vw,56px); align-items:start }
.out{ background:var(--ocean); color:var(--ivory); padding:clamp(28px,3vw,40px) }
.out .big{ font-family:var(--serif); font-weight:500; font-size:clamp(34px,4vw,52px); line-height:1.05; margin:8px 0 4px }
.out dl{ margin:26px 0 0 }
.out .r{ display:flex; justify-content:space-between; gap:18px; padding:14px 0; border-top:1px solid rgba(247,242,234,.16); font-size:15px }
.out .r span:last-child{ font-weight:500 }
.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:38px; overflow-x:auto }
.tabs button{ background:none; border:0; padding:15px 22px; font-size:15px; color:var(--muted); cursor:pointer;
  white-space:nowrap; border-bottom:2px solid transparent; margin-bottom:-1px }
.tabs button.on{ color:var(--ocean); border-bottom-color:var(--bronze); font-weight:500 }

table.data{ width:100%; border-collapse:collapse; font-size:15px }
table.data th,table.data td{ padding:16px 12px; text-align:left; border-bottom:1px solid var(--line-soft) }
table.data th{ font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--bronze); font-weight:600 }
table.data td.num{ text-align:right; font-variant-numeric:tabular-nums }

/* 深色区块 */
.dark{ background:var(--ocean); color:var(--ivory) }
.dark .d1,.dark .d2,.dark .d3{ color:var(--ivory) }
.dark .lede{ color:rgba(247,242,234,.78) }
.dark .eyebrow{ color:var(--sand) } .dark .eyebrow::after{ background:rgba(216,203,185,.3) }
.dark .btn.ghost{ color:var(--ivory) } .dark .btn.ghost:hover{ color:var(--sand); border-color:var(--sand) }
.paper{ background:var(--warmgray) }

/* ── 页脚 ─────────────────────────────────────── */
.foot{ background:var(--burgundy); color:rgba(247,242,234,.7); padding-block:clamp(56px,7vw,96px) 34px }
.foot a{ color:rgba(247,242,234,.7) } .foot a:hover{ color:var(--sand) }
.foot img{ height:62px }
.foot-grid{ display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:clamp(26px,3.4vw,56px) }
.foot h4{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--sand); margin:0 0 18px; font-weight:600 }
.foot ul{ list-style:none; margin:0; padding:0 }
.foot li{ margin-bottom:11px; font-size:15px }
.foot-bot{ margin-top:58px; padding-top:28px; border-top:1px solid rgba(247,242,234,.13);
  display:flex; justify-content:space-between; gap:22px; flex-wrap:wrap; font-size:13px; color:rgba(247,242,234,.5) }
.langlist{ display:flex; gap:18px; flex-wrap:wrap }

/* ── §09 移动端固定条：最多两个按钮 ───────────── */
.mbar{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:70; background:var(--ivory);
  border-top:1px solid var(--line); padding:10px 16px calc(10px + env(safe-area-inset-bottom)); gap:10px }
.mbar .btn{ flex:1; padding:14px 10px }

/* ── §09 Cookie：右下角紧凑卡，不遮挡 CTA ─────── */
.cbar{ position:fixed; right:20px; bottom:20px; z-index:90; width:min(360px,calc(100vw - 40px));
  background:var(--white); color:var(--char); padding:20px 22px; border:1px solid var(--line);
  box-shadow:0 24px 60px -34px rgba(39,25,23,.4); border-radius:var(--r) }
.cbar p{ margin:0 0 16px; font-size:14px; color:var(--muted) }
.cbar .row{ display:flex; gap:10px }
.cbar .btn{ flex:1 }

/* 灯箱 */
.lb{ position:fixed; inset:0; z-index:200; background:rgba(39,25,23,.97); display:none; place-items:center }
.lb.on{ display:grid }
.lb img{ max-width:92vw; max-height:84vh; object-fit:contain }
.lb img:not([src]){ display:none }   /* 未打开时不留空 img，避免破图图标 */
.lb .x{ position:absolute; top:20px; right:24px; background:none; border:0; color:var(--ivory); font-size:30px; cursor:pointer; padding:10px; line-height:1 }
.lb .nav{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.12); border:0;
  color:var(--ivory); width:56px; height:56px; cursor:pointer; font-size:22px }
.lb .prev{ left:20px } .lb .next{ right:20px }
.lb .cnt{ position:absolute; bottom:24px; left:0; right:0; text-align:center; color:rgba(247,242,234,.7); font-size:13px; letter-spacing:.1em }

/* 咨询 Modal（§08 详情页表单） */
.modal{ position:fixed; inset:0; z-index:190; background:rgba(39,25,23,.6); display:none; place-items:center; padding:20px }
.modal.on{ display:grid }
.modal-in{ background:var(--white); width:min(560px,100%); max-height:88vh; overflow-y:auto; padding:clamp(26px,3vw,40px); position:relative }
.modal .x{ position:absolute; top:14px; right:16px; background:none; border:0; font-size:26px; cursor:pointer; color:var(--muted); line-height:1 }

/* 抽屉导航 */
.drawer{ position:fixed; inset:0; z-index:180; background:var(--ivory); transform:translateX(100%);
  transition:transform .32s var(--ease); overflow-y:auto; padding:24px var(--gut) 60px; color:var(--ocean) }
.drawer.on{ transform:none }
.drawer .x{ background:none; border:0; font-size:28px; cursor:pointer; float:right; padding:6px 10px; color:var(--ocean); line-height:1 }
.drawer nav{ clear:both; padding-top:26px }
.drawer nav a{ display:block; padding:16px 0; border-bottom:1px solid var(--line-soft); font-size:18px; font-family:var(--serif); font-weight:500 }

/* ── §09 断点 1440 / 1200 / 992 / 768 / 480 ───── */
@media (max-width:1200px){
  .g4{ grid-template-columns:repeat(3,1fr) }
  .mainnav{ gap:22px } .mainnav > li > a{ font-size:13px }
}
@media (max-width:992px){
  .g3,.g4{ grid-template-columns:repeat(2,1fr) }
  .feat{ grid-template-columns:1fr } .feat-side{ grid-template-columns:1fr 1fr }
  .det{ grid-template-columns:1fr } .aside{ position:static }
  .srch{ grid-template-columns:1fr } .facet{ position:static; display:none } .facet.open{ display:block }
  .mainnav,.top-act .btn,.langbtn{ display:none }
  .burger{ display:block }
  .ins{ grid-template-columns:1fr }
  .founder,.founder.rev{ grid-template-columns:1fr } .founder.rev .fimg{ order:0 }
  .fimg{ max-width:420px }
  .searchbar{ grid-template-columns:1fr 1fr }
  .foot-grid{ grid-template-columns:1fr 1fr }
  .hero{ min-height:720px }
}
@media (max-width:768px){
  body{ font-size:16px; padding-bottom:70px }
  .g2,.g3,.g4,.coll,.feat-side,.roi{ grid-template-columns:1fr }
  .coll a{ margin-top:0!important }
  .calc{ grid-template-columns:1fr }
  .searchcard{ margin-top:0; padding-inline:0 }
  .searchbar{ grid-template-columns:1fr 1fr; padding:0; box-shadow:none; background:var(--ivory) }
  .searchbar .fld{ background:var(--white); border-right:0; border-bottom:1px solid var(--line-soft) }
  .searchbar .btn{ grid-column:1/-1 }
  .gallery{ grid-template-columns:1fr; height:auto }
  .gallery > a:first-child{ aspect-ratio:3/2 }
  .gallery .side{ grid-template-columns:1fr 1fr; grid-template-rows:none }
  .gallery .side > div{ aspect-ratio:3/2 }
  .mbar{ display:flex }
  .foot-grid{ grid-template-columns:1fr }
  .hero{ min-height:680px }                    /* §09 手机 Hero */
  .hero-in{ padding-block:40px 40px }
  .banner{ min-height:440px }
  .rowlist .m{ display:none }
  .cbar{ left:16px; right:16px; bottom:78px; width:auto }   /* 不覆盖底部咨询条 */
  .facts{ grid-template-columns:repeat(2,1fr); gap:24px }
}
@media (max-width:480px){
  .searchbar{ grid-template-columns:1fr }
  .tabsw a{ padding:8px 16px; font-size:12px }
  .hero .lede{ font-size:15px }
}

/* ── §06 少量结果的编辑式布局 ───────────────── */
.result-single .card{ display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(24px,3vw,48px); align-items:center }
.result-single .card-img{ aspect-ratio:3/2 }
.result-single .card-title{ font-size:clamp(24px,2.2vw,32px) }
.result-single .card-body{ padding-top:0 }
.result-duo{ max-width:1000px; margin-inline:auto }
@media (max-width:768px){ .result-single .card{ grid-template-columns:1fr } .result-single .card-body{ padding-top:18px } }

/* §06 品牌化空状态 */
.emptybrand{ display:grid; grid-template-columns:minmax(0,340px) 1fr; gap:clamp(28px,4vw,64px); align-items:center;
  padding:clamp(24px,3vw,40px) 0 }
.emptybrand-img{ aspect-ratio:4/5; overflow:hidden; border-radius:var(--r); background:var(--sand) }

@media (max-width:768px){ .emptybrand{ grid-template-columns:1fr } .emptybrand-img{ max-width:280px } }

/* §06 更多筛选折叠 */
.advanced{ border-top:1px solid var(--line-soft); padding-top:18px }
.advanced summary{ cursor:pointer; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bronze); font-weight:600; list-style:none; padding:6px 0 }
.advanced summary::-webkit-details-marker{ display:none }
.advanced summary::after{ content:' +'; font-weight:400 }
.advanced[open] summary::after{ content:' \2212' }
.advanced fieldset{ margin-top:18px }

/* §07 私人房源卡：局部裁切而非表格 */
.privcard .card-img img{ filter:saturate(.86) contrast(.96) }
.privcard .card-img::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(75,11,16,.1),rgba(75,11,16,.34)) }

/* §09 分步表单 */
.step[hidden]{ display:none }

/* §09 自定义上传区，替换浏览器默认 Choose Files */
.drop{ border:1px dashed var(--sand); background:var(--warmgray); border-radius:var(--r);
  padding:26px 22px; text-align:center; cursor:pointer; transition:.25s var(--ease) }
.drop:hover,.drop.over{ border-color:var(--bronze); background:rgba(195,161,107,.06) }
.drop input[type=file]{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none }
.drop b{ display:block; font-size:15px; color:var(--ocean); font-weight:500 }
.drop span{ display:block; font-size:13px; color:var(--muted); margin-top:6px }
.droplist{ list-style:none; margin:14px 0 0; padding:0; text-align:left }
.droplist li{ display:flex; justify-content:space-between; gap:12px; font-size:14px;
  padding:9px 0; border-bottom:1px solid var(--line-soft) }
.droplist button{ background:none; border:0; color:var(--bronze); cursor:pointer; font-size:13px }

/* §10 计算器：一次只显示一个面板，标签可横滑 */
.tabs{ scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch }
.tabs::-webkit-scrollbar{ display:none }
.tabs button{ scroll-snap-align:start }
.calc[hidden]{ display:none }

/* §12 移动端页脚折叠 */
@media (max-width:768px){
  body{ padding-bottom:92px }                 /* §12 固定底栏预留 */
  .foot-col > h4{ cursor:pointer; display:flex; justify-content:space-between; align-items:center;
    margin-bottom:0; padding:16px 0; border-bottom:1px solid rgba(247,242,234,.13) }
  .foot-col > h4::after{ content:'+'; font-size:16px; font-weight:400 }
  .foot-col.open > h4::after{ content:'\2212' }
  .foot-col > ul{ display:none; padding:14px 0 4px }
  .foot-col.open > ul{ display:block }
  .foot-bot{ margin-top:30px }
  .card-title{ font-size:19px }
  .btn{ min-height:50px }                     /* §12 触控按钮 48–52 */
  .grid{ gap:30px }                           /* §12 卡片间距 28–36 */
}

/* ── §5 响应式裁切（视觉素材指南对照表） ────── */
.banner{ min-height:0 }
.banner > .wrap{ padding-block:clamp(64px,8vw,120px) }
@media (max-width:1024px){ .banner > .wrap{ padding-block:clamp(56px,7vw,96px) } }
@media (max-width:767px){
  /* 私人横幅：手机改自下而上渐变，文字移到底部 */
  .banner{ display:block; position:relative; min-height:0 }
  .banner .ph-img{ position:relative; aspect-ratio:4/5; height:auto }
  .banner::after{ background:linear-gradient(180deg,rgba(75,11,16,.12) 0%,rgba(75,11,16,.30) 46%,rgba(75,11,16,.88) 100%) }
  .banner > .wrap{ position:absolute; inset:auto 0 0 0; padding-block:0 32px }
  .banner-in{ max-width:none }
  /* 洞察首图：手机 4:3 居中裁切 */
  .ins-lead,.artcover{ aspect-ratio:4/3!important }
  /* 隐私地图：手机 4:3 */
  .mapbox{ aspect-ratio:4/3 }
}

/* 横向滑动卡列（§09 露出下一张 12–20%） */
.scroller{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(260px,1fr); gap:16px;
  overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  padding-bottom:6px; scrollbar-width:none }
.scroller::-webkit-scrollbar{ display:none }
.scroller > *{ scroll-snap-align:start }
@media (max-width:768px){
  .scroll-m{ display:grid; grid-auto-flow:column; grid-auto-columns:82%; gap:14px;
    overflow-x:auto; scroll-snap-type:x mandatory; margin-inline:calc(var(--gut) * -1);
    padding-inline:var(--gut); scrollbar-width:none }
  .scroll-m::-webkit-scrollbar{ display:none }
  .scroll-m > *{ scroll-snap-align:start }
}

/* ══════════════════════════════════════════════════════════
   MOTION SYSTEM
   依据《网站动态效果设计与开发指南》2026-08-26
   原则：慢半拍、幅度小、结束干净；关掉动画网站依然完整可用。
   ══════════════════════════════════════════════════════════ */

/* §9 SSR 默认可见；只有 JS 初始化成功后才加待动画状态，
   脚本失败绝不会让内容消失。 */
.js-motion .reveal{ opacity:0; transform:translate3d(0,var(--move-m),0) }
.js-motion .reveal.is-visible{ opacity:1; transform:none;
  transition:opacity var(--motion-l) var(--ease-soft),
             transform var(--motion-l) var(--ease-soft) }
/* §9 同组 stagger 最多 6 个，更多卡片分批 */
.js-motion .reveal[style*="--i"]{ transition-delay:calc(var(--i) * var(--stagger)) }
.js-motion .reveal.is-visible{ transition-delay:calc(var(--i,0) * var(--stagger)) }
.js-motion .reveal.move-s{ transform:translate3d(0,var(--move-s),0) }
.js-motion .reveal.move-xs{ transform:translate3d(0,var(--move-xs),0) }
/* §4 精选系列：左右以不同方向 24px 进入，只用一次 */
/* §4 精选系列：左右以不同 24px 方向进入，只用一次 */
.js-motion .reveal.from-left{ transform:translate3d(calc(var(--move-s) * -1),0,0) }
.js-motion .reveal.from-right{ transform:translate3d(var(--move-s),0,0) }
/* §8 <768px 关闭横向位移，只保留 opacity + 12–20px 纵向，避免窄屏横向溢出 */
@media (max-width:767px){
  .js-motion .reveal.from-left,.js-motion .reveal.from-right{ transform:translate3d(0,var(--move-xs),0) }
}

/* §3 图片揭示：外层裁切，图 1.04→1，只执行一次 */
.js-motion .card-img,.js-motion .tile .ph,.js-motion .fimg,.js-motion .artcover{ overflow:hidden }
.js-motion .reveal-img .ph-img{ transform:scale(1.04) }
.js-motion .reveal-img.is-visible .ph-img{ transform:none;
  transition:transform 800ms var(--ease-soft), opacity .34s var(--ease-out) }

/* ── §4 Hero 编排：总时长约 1.2s ─────────────────────────── */
/* 120ms 起：背景 scale 1.06→1，1800ms，仅初次进入，不做无限 Ken Burns */
.js-motion .hero-media .ph-img{ transform:scale(1.06) }
.js-motion .hero.is-in .hero-media .ph-img{ transform:none;
  transition:transform 1800ms var(--ease-soft) 120ms, opacity .34s var(--ease-out) }

/* 220ms 起：标题按行从遮罩内 y:110%→0，行间隔 90ms；绝不逐字 */
.ln{ display:block; overflow:hidden; padding-bottom:.04em }
.js-motion .ln-i{ display:block; transform:translate3d(0,110%,0) }
.js-motion .is-in .ln-i{ transform:none;
  transition:transform 900ms var(--ease-soft);
  transition-delay:calc(220ms + var(--ln,0) * 90ms) }

/* 480ms 副标题 / 620ms 搜索与 CTA */
.js-motion .hero .lede,.js-motion .hero-cta,.js-motion .searchcard{ opacity:0; transform:translate3d(0,20px,0) }
.js-motion .hero.is-in .lede{ opacity:1; transform:none;
  transition:opacity 600ms var(--ease-out) 480ms, transform 600ms var(--ease-out) 480ms }
.js-motion .hero.is-in ~ .searchcard,.js-motion .hero.is-in .hero-cta{ opacity:1; transform:none;
  transition:opacity 600ms var(--ease-out) 620ms, transform 600ms var(--ease-out) 620ms }
.js-motion .hero .eyebrow{ opacity:0 }
.js-motion .hero.is-in .eyebrow{ opacity:1; transition:opacity 500ms var(--ease-out) 160ms }
/* §3 同一会话返回时不重复完整编排，只做 180ms 淡入 */
.js-motion.replay-off .hero-media .ph-img,
.js-motion.replay-off .ln-i,
.js-motion.replay-off .hero .lede,
.js-motion.replay-off .hero-cta,
.js-motion.replay-off .searchcard,
.js-motion.replay-off .hero .eyebrow{ transform:none!important; opacity:1!important;
  transition:opacity 180ms var(--ease-out)!important }

/* 旧的 keyframe 进入动画退役，统一走 reveal */
.reveal{ animation:none }

/* ── §3 滚动页眉：下滚 >120px 收起，上滚立即出现 ─────────── */
.top{ will-change:height;
  transition:background var(--motion-s) var(--ease-standard),
             border-color var(--motion-s) var(--ease-standard) }
/* §3 页眉初始：Logo 与菜单 70ms stagger */
.js-motion .top .logo,.js-motion .top .mainnav > li,.js-motion .top .top-act{ opacity:0 }
.js-motion .top.is-in .logo,.js-motion .top.is-in .mainnav > li,.js-motion .top.is-in .top-act{
  opacity:1; transition:opacity var(--motion-m) var(--ease-out);
  transition-delay:calc(var(--n,0) * 70ms) }

/* ── §3 导航下划线：从左到右，不改变文字位置 ─────────────── */
.mainnav > li > a::after{ transition:transform var(--motion-s) var(--ease-out) }

/* ── §3 按钮：箭头 x:0→4；active scale .985 ──────────────── */
.btn,.textlink,.chip{ transition:background var(--motion-xs) var(--ease-standard),
  color var(--motion-xs) var(--ease-standard), border-color var(--motion-xs) var(--ease-standard),
  transform var(--motion-xs) var(--ease-standard) }
.btn:active,.chip:active,.iconbtn:active{ transform:scale(.985) }
.textlink [aria-hidden]{ display:inline-block; transition:transform 180ms var(--ease-out) }
.textlink:hover [aria-hidden],.textlink:focus-visible [aria-hidden]{ transform:translateX(4px) }
.textlink{ transition:border-color var(--motion-xs) var(--ease-standard) }
.textlink:hover{ gap:8px }   /* 位移交给箭头，容器不再变宽 */

/* ── §4 卡片 hover：本体不上跳；触摸设备不跑 hover ───────── */
@media (hover:hover) and (pointer:fine){
  .card:hover .card-img .ph-img{ transform:scale(1.035) }
  .card-img::after{ content:''; position:absolute; inset:0; background:rgba(75,11,16,.06);
    opacity:1; transition:opacity var(--motion-m) var(--ease-standard); pointer-events:none }
  .card:hover .card-img::after{ opacity:0 }
  .privcard .card-img::after{ background:linear-gradient(180deg,rgba(75,11,16,.1),rgba(75,11,16,.34)) }
  .privcard:hover .card-img::after{ opacity:.7 }
  /* §4 城市卡：名称上移 4px，细线展开，卡片高度不变 */
  .tile-cap b{ transition:transform var(--motion-m) var(--ease-out) }
  .tile:hover .tile-cap b{ transform:translateY(-4px) }
  .tile-cap::before{ content:''; position:absolute; left:22px; bottom:16px; height:1px; width:44px;
    background:var(--sand); transform:scaleX(0); transform-origin:left;
    transition:transform var(--motion-m) var(--ease-out) }
  .tile:hover .tile-cap::before{ transform:scaleX(1) }
}
@media (hover:none){
  .card:active,.tile:active{ transform:scale(.985); transition:transform 120ms var(--ease-standard) }
}

/* ── §5 收藏按钮：描边→填充，一次弹性 ───────────────────── */
.iconbtn{ transition:background var(--motion-xs) var(--ease-standard),
  color var(--motion-xs) var(--ease-standard), transform 260ms var(--ease-out) }
.iconbtn.pulse{ animation:favpulse 260ms var(--ease-out) }
@keyframes favpulse{ 0%{transform:scale(1)} 45%{transform:scale(1.12)} 100%{transform:scale(1)} }

/* ── §3 页面切换：不整页白屏，导航保持稳定 ──────────────── */
.js-motion main{ animation:pagein var(--motion-m) var(--ease-out) both }
@keyframes pagein{ from{ opacity:0; transform:translate3d(0,12px,0) } to{ opacity:1; transform:none } }
body.is-leaving main{ animation:none!important; opacity:0; transform:translate3d(0,-6px,0);
  transition:opacity var(--motion-xs) var(--ease-in-out), transform var(--motion-xs) var(--ease-in-out) }
.js-motion.replay-off main{ animation-duration:180ms }

/* ── §3 返回顶部：滚动 900px 后出现，不遮挡聊天入口 ─────── */
.totop{ position:fixed; right:20px; bottom:20px; z-index:75; width:46px; height:46px;
  display:grid; place-items:center; background:var(--ocean); color:var(--ivory);
  border:0; border-radius:50%; cursor:pointer; opacity:0; visibility:hidden;
  transform:translateY(8px); transition:opacity var(--motion-s) var(--ease-out),
  transform var(--motion-s) var(--ease-out), visibility var(--motion-s) }
.totop.on{ opacity:1; visibility:visible; transform:none }
.totop:hover{ background:var(--ink) }
/* Cookie 卡在时让位，避免两个浮层重叠 */
.cbar:not([hidden]) ~ .totop{ bottom:auto; top:auto; right:20px; bottom:calc(20px + 132px) }
@media (max-width:767px){ .totop{ bottom:96px; right:16px; width:42px; height:42px } }

/* ── §5 筛选：反馈必须在 100ms 内 ───────────────────────── */
.facet .chip,.facet .ck{ transition:background var(--motion-xs) var(--ease-standard),
  color var(--motion-xs) var(--ease-standard), border-color var(--motion-xs) var(--ease-standard) }
.advanced > *:not(summary){ }
.advanced[open] fieldset{ animation:fadein var(--motion-s) var(--ease-out) both }
@keyframes fadein{ from{ opacity:0; transform:translate3d(0,8px,0) } to{ opacity:1; transform:none } }
/* 排序菜单 transform-origin: top right */
.bar select{ transform-origin:top right }
/* §5 骨架：结果加载时卡片高度固定，页面不跳动 */
.skeleton{ position:relative; overflow:hidden; background:var(--sand); border-radius:var(--r) }
.skeleton::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transform:translateX(-100%); animation:shimmer 1.4s var(--ease-standard) infinite }
@keyframes shimmer{ to{ transform:translateX(100%) } }

/* ── §6 灯箱：背景淡入，图片 scale .985→1 ───────────────── */
.lb{ opacity:0; transition:opacity var(--motion-s) var(--ease-in-out) }
.lb.on{ opacity:1 }
.lb img{ transform:scale(.985); transition:transform 320ms var(--ease-out), opacity 240ms var(--ease-out) }
.lb.on img{ transform:none }
.lb img.swapping{ opacity:0; transition-duration:180ms }   /* 切换 360ms crossfade */
.modal{ opacity:0; transition:opacity var(--motion-s) var(--ease-in-out) }
.modal.on{ opacity:1 }
.modal-in{ transform:translate3d(0,16px,0) scale(.99); transition:transform var(--motion-m) var(--ease-out) }
.modal.on .modal-in{ transform:none }

/* ── §5 移动端抽屉：底部上滑，最大 88vh，背景轻微暗化 ───── */
.drawer{ transition:transform 360ms var(--ease-in-out) }
.scrim{ position:fixed; inset:0; z-index:170; background:rgba(75,11,16,.42);
  opacity:0; visibility:hidden; transition:opacity var(--motion-s) var(--ease-in-out), visibility var(--motion-s) }
.scrim.on{ opacity:1; visibility:visible }
@media (max-width:992px){
  .facet.open{ position:fixed; left:0; right:0; bottom:0; z-index:175; max-height:88vh; overflow-y:auto;
    background:var(--ivory); padding:26px var(--gut) calc(26px + env(safe-area-inset-bottom));
    border-radius:12px 12px 0 0; transform:translateY(100%);
    transition:transform 360ms var(--ease-in-out); box-shadow:0 -20px 60px -30px rgba(75,11,16,.5) }
  .facet.open.in{ transform:none }
}

/* ── §6 详情页：信息 70ms stagger；地图圆点呼吸一次 ─────── */
.js-motion .det .reveal{ transform:translate3d(0,var(--move-s),0) }
.mapdot{ position:absolute; left:50%; top:50%; width:14px; height:14px; margin:-7px 0 0 -7px;
  border-radius:50%; background:var(--bronze); box-shadow:0 0 0 0 rgba(195,161,107,.55) }
.mapbox.is-visible .mapdot{ animation:dotbreath 600ms var(--ease-out) 200ms 1 both }
@keyframes dotbreath{ 0%{ box-shadow:0 0 0 0 rgba(195,161,107,.55) } 100%{ box-shadow:0 0 0 18px rgba(195,161,107,0) } }

/* ── §7 文章：顶部阅读进度线 ────────────────────────────── */
.progress{ position:fixed; top:0; left:0; height:2px; width:100%; z-index:95;
  background:var(--bronze); transform:scaleX(0); transform-origin:left;
  transition:transform 120ms linear; pointer-events:none }

/* ── §7 联系页：字段 focus 细线展开；错误 180ms 淡入 ─────── */
.field{ position:relative }
.field input,.field select,.field textarea{ transition:border-color var(--motion-xs) var(--ease-standard) }
.field > span{ transition:color var(--motion-xs) var(--ease-standard) }
.field:focus-within > span{ color:var(--ocean) }
.bad,.ok{ animation:fadein 180ms var(--ease-out) both }

/* ── §8 焦点必须比 hover 更明确，动画不移除焦点轮廓 ─────── */
:focus-visible{ outline:2px solid var(--bronze); outline-offset:3px; transition:none }
.btn:focus-visible,.iconbtn:focus-visible{ outline-offset:4px }

/* §8 抽屉/灯箱打开时锁背景滚动 */
body.locked{ overflow:hidden }

/* ══════════════════════════════════════════════════════════
   首页改版（客户确认方向 2026-08-27）
   规则限定在 .home-page 下，避免污染内页与后台。
   ══════════════════════════════════════════════════════════ */

/* §6 密度：区块 56–88px，模块之间连续不断层 */
.home-page .sec{ padding-block:var(--sec) }
.home-page .sec.tight{ padding-block:clamp(40px,4.4vw,56px) }
.home-page .d2{ font-size:clamp(26px,2.6vw,38px) }
.home-page .bar{ padding-bottom:16px; margin-bottom:24px }

/* §6.2 / §6.3 统一横向卡列：桌面 4 张，手机露出下一张 */
.hscroll{ display:grid; grid-auto-flow:column; gap:20px; overflow-x:auto;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; padding-bottom:4px }
.hscroll::-webkit-scrollbar{ display:none }
.hscroll > *{ scroll-snap-align:start }
.hscroll.of4{ grid-auto-columns:calc((100% - 60px) / 4) }
.hscroll.of5{ grid-auto-columns:calc((100% - 80px) / 5) }
@media (max-width:1199px){
  .hscroll.of4{ grid-auto-columns:calc((100% - 40px) / 3) }
  .hscroll.of5{ grid-auto-columns:calc((100% - 60px) / 4) }
}
@media (max-width:991px){
  .hscroll.of4,.hscroll.of5{ grid-auto-columns:calc((100% - 20px) / 2) }
}
@media (max-width:767px){
  /* 手机满幅滚动，露出下一张约 14% */
  .hscroll.of4,.hscroll.of5{ grid-auto-columns:86%; gap:14px;
    margin-inline:calc(var(--gut) * -1); padding-inline:var(--gut) }
}

/* §6.2 房源卡：白底、1px 暖边线、极轻阴影 */
.home-page .card{ background:var(--paper); border:1px solid var(--line-soft);
  border-radius:var(--r); overflow:hidden;
  transition:box-shadow var(--motion-m) var(--ease-standard),
             border-color var(--motion-m) var(--ease-standard) }
.home-page .card-img{ aspect-ratio:16/10; border-radius:0 }
.home-page .card-body{ padding:16px 18px 18px }
.home-page .card-title{ font-size:19px; margin:8px 0 8px }
.home-page .card-price{ font-size:16px; color:var(--burgundy); font-weight:600 }
.home-page .card-meta{ font-size:13px; gap:12px; margin-top:8px }
.home-page .badge{ background:var(--paper); color:var(--burgundy); border-radius:3px }
.home-page .badge.dark,.home-page .badge.bronze{ background:var(--burgundy); color:var(--paper) }
@media (hover:hover) and (pointer:fine){
  .home-page .card:hover{ box-shadow:0 14px 34px -26px rgba(39,25,23,.4); border-color:var(--line) }
  .home-page .card:hover .card-img .ph-img{ transform:scale(1.025) }
}

/* §6.3 Lifestyle / Locations 横向短卡 16:10 */
.home-page .tile{ border-radius:var(--r); overflow:hidden }
.home-page .tile .ph{ aspect-ratio:16/10 }
.home-page .tile-cap{ padding:56px 18px 16px;
  background:linear-gradient(transparent 0%,rgba(39,25,23,.22) 34%,rgba(39,25,23,.78) 100%) }
.home-page .tile-cap b{ font-size:19px }
.home-page .tile-cap span{ font-size:12px }
@media (max-width:767px){ .home-page .tile .ph{ aspect-ratio:4/3 } }

/* §7 Brand Statement：压缩为一句话窄带 */
.home-statement{ background:var(--warmgray); border-block:1px solid var(--line-soft) }
.home-statement .wrap{ padding-block:clamp(40px,4vw,56px); text-align:center }
.home-statement p{ font-family:var(--serif); font-weight:500; margin:0;
  font-size:clamp(21px,2.1vw,30px); line-height:1.3; color:var(--burgundy);
  max-width:26ch; margin-inline:auto }

/* §7.1 Property Owner Paths：两个并列卡，由现有入口重组 */
.home-owner-paths{ display:grid; grid-template-columns:1fr 1fr; gap:20px }
.opath{ position:relative; display:block; border:1px solid var(--line-soft); border-radius:var(--r);
  overflow:hidden; background:var(--paper);
  transition:box-shadow var(--motion-m) var(--ease-standard) }
.opath:hover{ box-shadow:0 14px 34px -26px rgba(39,25,23,.4) }
.opath .ph{ aspect-ratio:16/9; overflow:hidden }
.opath-body{ padding:20px 22px 24px }
.opath .label{ color:var(--champagne) }
.opath h3{ font-family:var(--serif); font-weight:500; font-size:clamp(20px,1.8vw,25px);
  color:var(--burgundy); margin:8px 0 8px; line-height:1.22 }
.opath p{ font-size:14px; color:var(--muted); margin:0; max-width:44ch }
.opath .textlink{ margin-top:14px; display:inline-flex; font-size:13px; color:var(--burgundy) }
@media (max-width:767px){ .home-owner-paths{ grid-template-columns:1fr } }

/* §7.2 顾问式紧凑人物卡：图 34–40%，卡高 210–250px */
.home-advisors{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px }
.advisor{ display:grid; grid-template-columns:37% 63%; gap:18px; align-items:center;
  background:var(--paper); border:1px solid var(--line-soft); border-radius:var(--r);
  padding:16px; min-height:210px }
.advisor__photo{ aspect-ratio:4/5; overflow:hidden; border-radius:var(--r); background:var(--sand) }
.advisor__photo .ph-img{ object-position:center top }   /* 人物头部不得被裁切 */
.advisor h3{ font-family:var(--serif); font-weight:500; font-size:22px; color:var(--ink); margin:0 0 4px }
.advisor .label{ color:var(--champagne) }
.advisor p{ font-size:14px; color:var(--muted); margin:10px 0 0 }
@media (max-width:991px){ .home-advisors{ grid-template-columns:1fr } }
@media (max-width:479px){ .advisor{ grid-template-columns:1fr; min-height:0 } .advisor__photo{ max-width:180px } }

/* §7 Insights 紧凑三卡 */
.home-page .ins-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
.home-page .ins-grid .card-img{ aspect-ratio:3/2 }
@media (max-width:991px){ .home-page .ins-grid{ grid-template-columns:1fr 1fr } }
@media (max-width:640px){ .home-page .ins-grid{ grid-template-columns:1fr } }

/* §7 Final CTA：浅色咨询带，按钮酒红；不再整屏深色 */
.home-contact-band{ background:var(--warmgray); border-top:1px solid var(--line-soft) }
.home-contact-band .wrap{ padding-block:clamp(40px,4.4vw,60px);
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap }
.home-contact-band h2{ font-family:var(--serif); font-weight:500; margin:0;
  font-size:clamp(22px,2.2vw,32px); color:var(--burgundy); max-width:22ch; line-height:1.25 }
.home-contact-band p{ margin:8px 0 0; font-size:14px; color:var(--muted); max-width:46ch }

/* §7 Footer：整块酒红 + Ivory 文本 + Gold 小标题 */
.foot{ background:var(--burgundy); color:rgba(247,242,234,.76);
  padding-block:clamp(44px,5vw,72px) 28px }
.foot a{ color:rgba(247,242,234,.76) }
.foot a:hover{ color:var(--champagne) }
.foot h4{ color:var(--champagne) }
.foot-bot{ margin-top:40px; border-top:1px solid rgba(247,242,234,.16); color:rgba(247,242,234,.55) }

/* §4 按钮：主 CTA 酒红实心，次 CTA 白底酒红描边 */
.btn{ background:var(--burgundy); border-color:var(--burgundy); color:var(--paper);
  border-radius:var(--r); padding:14px 26px; font-size:14px }
.btn:hover{ background:var(--burgundy-hover); border-color:var(--burgundy-hover) }
.btn.ghost{ background:var(--paper); color:var(--burgundy); border-color:var(--burgundy); opacity:1 }
.btn.ghost:hover{ background:var(--burgundy); color:var(--paper); border-color:var(--burgundy) }
.btn.bronze{ background:var(--champagne); border-color:var(--champagne); color:var(--ink) }
.btn.sm{ padding:10px 18px; font-size:13px }
.textlink{ color:var(--burgundy) }
.chip.on{ background:var(--burgundy); color:var(--paper); border-color:var(--burgundy) }
.tabs button.on{ color:var(--burgundy); border-bottom-color:var(--burgundy) }
.eyebrow{ color:var(--champagne) }
.eyebrow::after{ background:var(--line) }
.label,.card-loc,.facet legend,.field > span,.searchbar label{ color:var(--champagne) }
.d1,.d2,.d3,.card-title,.tile-out b{ color:var(--ink) }
.home-page .d2,.prose h2{ color:var(--burgundy) }
.iconbtn[aria-pressed="true"]{ background:var(--burgundy); color:var(--paper) }
.out{ background:var(--burgundy) }
.dark{ background:var(--burgundy) }

/* §9.2 focus-visible 用 2px 香槟金，视觉变浅也不牺牲键盘可见性 */
:focus-visible{ outline:2px solid var(--champagne); outline-offset:3px }
.btn:focus-visible{ outline-offset:4px }
/* disabled 状态 */
.btn[disabled],.btn[aria-disabled="true"]{ opacity:.45; pointer-events:none }

/* §9 Hero 动效改为更克制：右图 1.02→1，文案 y16 */
.js-motion .home-hero__media .ph-img{ transform:scale(1.02) }
.js-motion .home-hero.is-in .home-hero__media .ph-img{ transform:none;
  transition:transform 1000ms var(--ease-soft) 120ms, opacity .34s var(--ease-out) }
.js-motion .home-hero .lede,.js-motion .home-hero .hero-cta,
.js-motion .home-hero .hero-places,.js-motion .home-search{ opacity:0; transform:translate3d(0,16px,0) }
.js-motion .home-hero.is-in .lede{ opacity:1; transform:none;
  transition:opacity 600ms var(--ease-out) 420ms, transform 600ms var(--ease-out) 420ms }
.js-motion .home-hero.is-in .hero-places{ opacity:1; transform:none;
  transition:opacity 600ms var(--ease-out) 520ms, transform 600ms var(--ease-out) 520ms }
.js-motion .home-hero.is-in .hero-cta{ opacity:1; transform:none;
  transition:opacity 600ms var(--ease-out) 580ms, transform 600ms var(--ease-out) 580ms }
.js-motion .home-hero.is-in ~ .home-search{ opacity:1; transform:none;
  transition:opacity 600ms var(--ease-out) 640ms, transform 600ms var(--ease-out) 640ms }
.js-motion .home-hero .eyebrow{ opacity:0 }
.js-motion .home-hero.is-in .eyebrow{ opacity:1; transition:opacity 500ms var(--ease-out) 160ms }
.js-motion.replay-off .home-hero__media .ph-img,
.js-motion.replay-off .home-hero .lede,.js-motion.replay-off .home-hero .hero-cta,
.js-motion.replay-off .home-hero .hero-places,.js-motion.replay-off .home-search,
.js-motion.replay-off .home-hero .eyebrow{ transform:none!important; opacity:1!important;
  transition:opacity 180ms var(--ease-out)!important }
/* §9 区块位移收敛到 16–24px */
.js-motion .home-page .reveal{ transform:translate3d(0,var(--move-s),0) }

/* ── §8 响应式 ─────────────────────────────────────────── */
@media (max-width:1439px){ .home-hero__grid{ grid-template-columns:40% 60% } }
@media (max-width:1199px){ .home-hero__grid{ grid-template-columns:42% 58% } }
@media (max-width:991px){
  .searchbar{ grid-template-columns:1fr 1fr; gap:6px }
  .searchbar .btn{ grid-column:1/-1; height:48px }
  .searchbar .fld{ border-right:0; border-bottom:1px solid var(--line-soft) }
}
@media (max-width:767px){
  /* §8.1 手机 Hero：文案 → 图片 → 搜索，不缩小桌面分栏 */
  .home-hero__grid{ grid-template-columns:1fr; min-height:0 }
  .home-hero__copy{ padding:28px 0 22px; order:1 }
  .home-hero__media{ order:2; aspect-ratio:4/3 }
  .home-hero__media::before{ display:none }
  .home-search{ margin-top:16px; order:3 }        /* 不再负 margin 压图 */
  .home-hero .d1{ font-size:clamp(38px,10vw,46px) }
  .hero-cta .btn{ flex:1; min-height:48px }
  .home-contact-band .wrap{ flex-direction:column; align-items:flex-start }
}
@media (max-width:479px){
  :root{ --gut:21px }
  .home-hero .d1{ font-size:41px }
  .searchbar{ grid-template-columns:1fr }
  .btn{ min-height:48px }
}