/* ---------- 字型 ----------
   自架，不走 fonts.googleapis.com。
   原因：目标客群有中国大陆买家，而 Google Fonts 在大陆是封的。
   原本那一行是 render-blocking 的 stylesheet —— 浏览器要不到它就不画页面，
   大陆访客会白屏到超时（十几二十秒）。自架之後字型从本站来，立刻显示。
   只取 latin 子集（站上的字元含 é 都在里面），9 个档合计约 416 KB，
   .htaccess 已经设定字型快取一年。中文字沿用系统字型，本来就没有 webfont。
   要改字重或换字型：重新从 Google Fonts 下载 woff2 放进 /fonts/，再改这里。 */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/playfair-display-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/playfair-display-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/playfair-display-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/playfair-display-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/playfair-display-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/dm-sans-300.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/dm-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/dm-sans-500.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/dm-sans-700.woff2') format('woff2');
}

/* ---------- Design tokens ----------
   Palette and type taken from the Forresta landing page so the whole site
   reads as one brand. Change these and everything follows.               */
:root {
  /* Forresta palette */
  --ink: #26302b;
  --forest: #3e4d42;
  --sage: #7d8a78;
  --stone: #61685f;      /* 次要文字。原本 #6f7670 在米白底只有 4.28:1，未达 4.5 标准 */
  --gold: #b7975a;          /* 装饰用：外框、底线、圆点 */
  --gold-text: #806528;     /* 浅底上的金色【文字】—— 深一点才够对比 (5.1:1) */
  --gold-light: #e0cba4;    /* 照片／深底上的金色文字 (4.9:1) */
  --cream: #efece4;
  --ivory: #f7f5f0;
  --line: #dcd8cd;

  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'DM Sans', system-ui, -apple-system, sans-serif;

  /* Mapped onto the names the rest of this file already uses */
  --color-primary: var(--forest);
  --color-primary-dark: var(--ink);
  --color-accent: var(--gold);
  --color-bg: var(--ivory);
  --color-surface: #ffffff;
  --color-text: var(--ink);
  --color-text-muted: var(--stone);
  --color-border: var(--line);

  --radius: 2px;
  --shadow: 0 1px 3px rgba(38, 48, 43, 0.05);
  --shadow-lg: 0 12px 40px rgba(38, 48, 43, 0.10);
  --max-width: 1160px;
}

/* ---------- Reset ---------- */
* {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  padding: 0;
}
/* Stops the sticky header covering headings when jumping to #about / #contact. */
html {
  scroll-padding-top: 84px;
  scroll-behavior: smooth;
}
body {
  font-family: var(--sans);
  font-weight: 300;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
/* Display headings carry the serif; everything else stays in DM Sans.
   Playfair has far more contrast than the old face, so it runs a touch
   tighter and lighter to stop the headings shouting. */
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.015em;
}

/* Gold highlight for the one or two words that carry a heading.
   Use sparingly — the accent stops working when everything is accented. */
.hl {
  color: var(--gold-text);
  font-style: italic;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
h1, h2, h3, p {
  margin: 0 0 0.5em;
}
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
/* WhatsApp is the main call to action, so it takes the gold treatment
   rather than the bright brand green, which fights this palette. */
/* 文字色从 #fff 改成深墨色：白字压在金底上只有 2.77:1，未达 WCAG AA 的
   4.5:1（按钮字 12.8px 属於小字，标准就是 4.5）。深墨色是 4.93:1。
   hover 时底色转成森林绿，那时才换回白字（8.22:1）。 */
.btn-whatsapp {
  background: var(--gold);
  color: var(--ink);
}
.btn-whatsapp:hover {
  background: var(--forest);
  color: #fff;
}
.btn-primary {
  background: var(--forest);
  color: var(--ivory);
}
.btn-primary:hover {
  background: var(--ink);
}
.btn-outline {
  background: transparent;
  color: var(--forest);
  border: 1px solid var(--line);
}
.btn-outline:hover {
  border-color: var(--forest);
  background: transparent;
}
/* The small header button keeps WhatsApp green - at icon size it reads as
   a recognisable badge rather than a clashing block of colour. */
.header-cta .btn-whatsapp {
  background: #25d366;
  padding: 12px 16px;
}
.header-cta .btn-whatsapp:hover {
  background: #1fbd5a;
}
/* On mobile the label is hidden, so the button becomes an icon-only circle -
   the same treatment as the floating WhatsApp button on the Forresta page. */
@media (max-width: 959px) {
  .header-cta .btn-whatsapp {
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 50%;
  }
}
.btn-block {
  width: 100%;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;              /* logo 与选单之间至少留这么多，免得挤在一起 */
  height: 64px;
}
.logo {
  display: flex;
  align-items: center;
}
.logo svg {
  color: var(--gold);
  width: 22px;
  height: 22px;
  stroke-width: 1.4;
}
.logo svg {
  flex-shrink: 0;
}
.main-nav ul {
  display: flex;
  gap: 28px;
}
.main-nav a {
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone);
  padding: 6px 2px;
  border-bottom: 1px solid transparent;
}
.main-nav a:hover,
.main-nav a.active {
  color: var(--ink);
  border-bottom-color: var(--gold);
}
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle svg {
  width: 26px;
  height: 26px;
}
.header-cta {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 中间宽度（平板、小笔电）：导航还是横的，但 8 个项目 + 两个下拉箭头
   在 900px 左右会撑破版面。这一段把间距和字距收窄，撑得下才不会溢出。 */
@media (min-width: 960px) and (max-width: 1080px) {
  .main-nav ul { gap: 16px; }
  .main-nav a,
  .main-nav .nav-sub-btn { font-size: 0.72rem; letter-spacing: 0.08em; }
  .main-nav .nav-sub-btn { gap: 4px; }
  .main-nav .nav-sub a { font-size: 0.75rem; letter-spacing: 0.03em; }
}

@media (max-width: 959px) {
  .main-nav {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow);
  }
  .main-nav.open {
    display: block;
  }
  .main-nav ul {
    flex-direction: column;
    padding: 12px 20px 20px;
    gap: 4px;
  }
  .main-nav a {
    display: block;
    padding: 12px 4px;
    border-bottom: 1px solid var(--color-border);
  }
  .nav-toggle {
    display: inline-flex;
  }
  .header-cta .btn-primary-label {
    display: none;
  }
}

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(180deg, var(--cream) 0%, var(--ivory) 100%);
  padding: 76px 0 64px;
}
.hero .container {
  display: grid;
  gap: 22px;
  text-align: center;
}
/* Small letter-spaced label above the headline, as on the Forresta page. */
.eyebrow {
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin: 0;
}
.hero h1 {
  font-size: clamp(2.4rem, 8vw, 3.8rem);
  font-weight: 400;
  color: var(--ink);
  margin: 0;
}
.hero p.subhead {
  color: var(--stone);
  font-size: 1.05rem;
  font-weight: 300;
  max-width: 520px;
  margin: 0 auto 0.75em;
}
.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.hero-note {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* ---------- Sections ---------- */
.section {
  padding: 48px 0;
}
.section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.section-heading h2 {
  font-size: clamp(1.9rem, 5vw, 2.5rem);
  font-weight: 400;
  margin: 0;
}
.section-heading .view-all {
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-text);
  white-space: nowrap;
}

/* ---------- Listing cards ---------- */
.listing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 20px;
}
.listing-card {
  background: var(--color-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow 0.4s ease, border-color 0.4s ease;
  display: flex;
  flex-direction: column;
}
.listing-card:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--gold);
}
/* Slow zoom on the photo instead of lifting the whole card - quieter,
   and it matches the image treatment on the Forresta page. */
.listing-card img.listing-photo {
  transition: transform 0.9s cubic-bezier(0.16, 0.7, 0.24, 1);
}
.listing-card:hover img.listing-photo {
  transform: scale(1.05);
}
.photo-placeholder {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--cream) 0%, var(--line) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--color-primary-dark);
}
.photo-placeholder svg {
  width: 40px;
  height: 40px;
  opacity: 0.55;
}
.photo-placeholder span {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.listing-card img.listing-photo {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}
.listing-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.listing-status {
  align-self: flex-start;
  font-size: 0.66rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  padding: 5px 12px;
  border-radius: var(--radius);
  background: var(--cream);
  color: var(--forest);
}
.listing-status.rent {
  background: rgba(183, 151, 90, 0.16);
  color: #8a6f34;
}
.listing-price {
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.2;
}
.listing-title {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--ink);
}
.listing-location {
  color: var(--stone);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.listing-facts {
  display: flex;
  gap: 16px;
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--stone);
  margin-top: 6px;
}
.listing-card-link {
  margin-top: auto;
  padding-top: 14px;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-text);
}

/* 卡片版的占位框：跟真照片一样的比例，版面才不会跳 */
.photo-placeholder--card {
  aspect-ratio: 4 / 3;
  width: 100%;
}

/* ---------- 深色区块（混合式配色）----------
   浅色为主，只有【有照片、需要停顿】的区块转深色。
   每一段都换会变成条纹，反而更乱，所以只挑两段。

   节奏：Hero 深 → 介绍 浅 → 主打建案 深 → 地区 浅 → 服务 浅
        → 客户见证 深 → 关于 浅 → 联络 浅 → 页尾 深 */

.section-dark {
  position: relative;
  color: #f2efe9;
  background-color: #141a17;   /* 保命用：下面的渐层若没生效，至少还是深底 */
  /* 上下各一条金色细线，两端淡出 —— 比一条直挺挺的边框有质感；
     底下那层放射渐层让大片深色不会死板，中间微亮、边缘收深。 */
  background-image:
    linear-gradient(90deg, transparent, rgba(226,205,164,.45), transparent),
    linear-gradient(90deg, transparent, rgba(226,205,164,.45), transparent),
    radial-gradient(130% 80% at 50% 0%, #1c241f 0%, #141a17 62%);
  background-size: 100% 1px, 100% 1px, 100% 100%;
  background-position: top left, bottom left, center;
  background-repeat: no-repeat;
}
/* 极淡的颗粒感。大片纯色会显得扁，加一点噪点会像印刷品而不像色块。
   用内嵌 SVG，不会多一个网路请求。 */
.section-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.section-dark > * { position: relative; z-index: 1; }
/* --- 深色区块内的文字 --- */
.section-dark h1, .section-dark h2, .section-dark h3 { color: #f2efe9; }
.section-dark .hl { color: #e2cda4; }
.section-dark .eyebrow,
.section-dark .section-heading .view-all,
.section-dark .area-link,
.section-dark .proj-cta,
.section-dark .listing-card-link { color: #e2cda4; }
.section-dark .section-lead,
.section-dark p { color: #a6afa9; }
.section-dark .section-heading h2::after { background: #e2cda4; }

/* --- 深色区块内的卡片 --- */
.section-dark .listing-card,
.section-dark .proj-card,
.section-dark .area-card,
.section-dark .service-card,
.section-dark .tst,
.section-dark .tst-track > .tst {
  background: #1d2521;
  border-color: #2f3a34;
}
.section-dark .listing-card:hover,
.section-dark .proj-card:hover,
.section-dark .area-card:hover { border-color: #c9a961; }

.section-dark .listing-title,
.section-dark .area-card h3,
.section-dark .service-body h3,
.section-dark .listing-price { color: #f2efe9; }
.section-dark .listing-location,
.section-dark .listing-subtitle,
.section-dark .listing-facts,
.section-dark .area-card p,
.section-dark .service-body p,
.section-dark .listing-highlights li,
.section-dark .tst figcaption span { color: #a6afa9; }
.section-dark .listing-status { background: #2a332d; color: #e2cda4; }
.section-dark .listing-highlights li::before { background: #c9a961; }
.section-dark .tst blockquote { color: #f2efe9; }
.section-dark .stars { color: #c9a961; }
.section-dark .photo-placeholder { background: linear-gradient(135deg, #222b26, #1d2521); }

/* --- 深色区块内的按钮与控制项 --- */
.section-dark .btn-outline { color: #f2efe9; border-color: #3a453e; }
.section-dark .btn-outline:hover { color: #141a17; border-color: #c9a961; }
.section-dark .btn::before { background: #c9a961; }
.section-dark .tst-controls button { border-color: #3a453e; color: #f2efe9; }
.section-dark .tst-controls button:hover:not(:disabled) { border-color: #c9a961; color: #e2cda4; }
.section-dark .tst-dots button { background: #3a453e; }
.section-dark .tst-dots button.on { background: #c9a961; }
.section-dark .video-note { color: #a6afa9; }
.section-dark .video-facade { border-color: #2f3a34; }

/* ---------- 特效 ----------
   四个原则：
   1. 全部包在 prefers-reduced-motion 里 —— 使用者在系统关掉动画就一律不动。
   2. 有风险的写法一律用 @supports 包起来，浏览器不支援就整段跳过，
      退回没有动画的正常样子，绝不会把内容弄不见。
   3. 手机优先：hover 才有的效果只是加分，主要效果在手机上也看得到。
   4. 不加任何函式库，不多一个网路请求。 */

/* --- 1. 金色关键字扫光 ---
   标题里那个斜体金字，每隔几秒有一道亮光扫过。
   background-clip:text 万一不支援会让文字变透明（等於看不见），
   所以整段用 @supports 挡住；而且渐层大部分是原本的金色，
   就算动画播到一半也还是读得到。 */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  @media (prefers-reduced-motion: no-preference) {
    .hl {
      background-image: linear-gradient(
        100deg,
        var(--gold-text) 0%, var(--gold-text) 42%,
        #e8d9b8 50%, var(--gold-text) 58%,
        var(--gold-text) 100%);
      background-size: 260% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      /* 用 -webkit-text-fill-color 而不是 color:transparent ——
         不认得这个属性的浏览器会整行忽略，直接显示实心金字；
         用 color:transparent 的话万一渐层没画出来，字就消失了。
         color 本身保持金色，永远有个看得见的底。 */
      -webkit-text-fill-color: transparent;
      animation: hlShine 7s ease-in-out infinite;
    }
    /* 照片上和深色区块里的金字要用浅金，深金压在暗色上看不清 */
    /* 用 h1 .hl 而不是 .hero-photo .hl —— 後面还有一条同权重的
       .hero-photo .hl 会把颜色改回实色，权重要更高才压得过。 */
    .hero-photo h1 .hl,
    .section-dark .hl {
      -webkit-text-fill-color: transparent;
      background-image: linear-gradient(
        100deg,
        var(--gold-light) 0%, var(--gold-light) 42%,
        #fff6e2 50%, var(--gold-light) 58%,
        var(--gold-light) 100%);
    }
  }
}
@keyframes hlShine {
  0%, 65% { background-position: 130% 0; }
  100%    { background-position: -30% 0; }
}

/* --- 2. Hero 视差 ---
   往下捲时背景照片移动得比文字慢，产生景深。
   用 animation-timeline: scroll()，纯 CSS、零 JavaScript。
   .hero-bg 上下各多留 7%，位移时才不会露出边缘空白。 */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-photo .hero-bg {
      top: -7%;
      bottom: -7%;
      animation: heroParallax linear both;
      animation-timeline: scroll();
      animation-range: 0 90vh;
    }
  }
}
@keyframes heroParallax {
  to { transform: translateY(7%); }
}

/* --- 3. 卡片扫光 ---
   滑鼠移到卡片上时，一道斜向的光扫过照片。
   只在有滑鼠的装置上启用（手机没有 hover，不做无谓的运算）。 */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .listing-photo-wrap,
  .proj-photo { position: relative; }
  .listing-photo-wrap::after,
  .proj-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
      100deg,
      transparent 35%,
      rgba(255,255,255,.28) 50%,
      transparent 65%);
    background-size: 250% 100%;
    background-position: 130% 0;
    opacity: 0;
    transition: opacity .2s ease;
  }
  .listing-card:hover .listing-photo-wrap::after,
  .proj-card:hover .proj-photo::after {
    opacity: 1;
    animation: cardSheen .85s cubic-bezier(.22,.7,.3,1);
  }
}
@keyframes cardSheen {
  from { background-position: 130% 0; }
  to   { background-position: -40% 0; }
}

/* --- 4. 深色区块的卡片微微发光 ---
   深底上的卡片如果只有边框会显得平，加一层很淡的金色光晕，
   滑过去时更明显 —— 这是深色版本最值钱的一个细节。 */
.section-dark .listing-card,
.section-dark .proj-card,
.section-dark .tst {
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
  transition: box-shadow .45s ease, border-color .45s ease, transform .45s cubic-bezier(.16,.7,.24,1);
}
@media (hover: hover) {
  .section-dark .listing-card:hover,
  .section-dark .proj-card:hover {
    box-shadow: 0 10px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(201,169,97,.35);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-photo .hero-bg { animation: none; top: 0; bottom: 0; }
  .hl { animation: none; }
}

/* ---------- Completion badge on photos ---------- */
/* 贴在照片左上角，让人一眼就分得出「已完工可看屋」和「还在盖」。
   只有已完工 / 今年内交屋才贴，资料来源是 areas.js 的 completion 栏位。 */
.listing-photo-wrap,
.proj-photo,
.detail-gallery {
  position: relative;
}
.listing-photo-wrap {
  overflow: hidden;
}
.listing-photo-wrap img.listing-photo {
  display: block;
}
.photo-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}
.photo-badge--completed {
  background: var(--forest);
  color: #fff;
}
.photo-badge--soon {
  background: var(--gold);
  color: var(--ink);
}
.detail-gallery .photo-badge {
  top: 18px;
  left: 18px;
  font-size: 0.72rem;
  padding: 8px 16px;
}

/* ---------- Filters (listings page) ---------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.filter-btn {
  padding: 11px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: transparent;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone);
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.filter-btn:hover {
  color: var(--ink);
  border-color: var(--forest);
}
.filter-btn.active {
  background: var(--forest);
  border-color: var(--forest);
  color: var(--ivory);
}
.empty-state {
  text-align: center;
  color: var(--color-text-muted);
  padding: 60px 20px;
}

/* ---------- Listing detail ---------- */
.detail-back {
  display: inline-block;
  margin-bottom: 16px;
  color: var(--color-primary);
  font-weight: 600;
}
.detail-grid {
  display: grid;
  gap: 32px;
}
@media (min-width: 860px) {
  .detail-grid {
    grid-template-columns: 1.3fr 1fr;
    align-items: start;
  }
}
.detail-gallery .photo-placeholder {
  border-radius: var(--radius);
  aspect-ratio: 16 / 10;
}
.detail-gallery img.listing-photo {
  border-radius: var(--radius);
  aspect-ratio: 16 / 10;
  /* 没有这行的话，比例不同的照片会被拉伸变形 —— 房子会看起来变胖。
     cover 是裁切多余部分，不动比例。 */
  object-fit: cover;
  width: 100%;
}
.detail-info h1 {
  font-size: 1.6rem;
}
/* 特定建案用的副标语（目前只有 Thompson Prestige 用），没有这栏位的
   建案完全不受影响。用金色系斜体，跟 .hl 同一套语气，但字级小一点、
   不抢标题风头。 */
.detail-tagline {
  font-family: var(--serif); font-style: italic; font-size: 1.05rem;
  color: var(--gold-text); margin: 4px 0 10px;
}
.detail-price {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--color-primary-dark);
  margin-bottom: 4px;
}
.detail-location {
  color: var(--color-text-muted);
  margin-bottom: 16px;
}
.fact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px;
  margin: 16px 0;
  text-align: center;
}
.fact-grid .fact-value {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-primary-dark);
}
.fact-grid .fact-label {
  font-size: 0.78rem;
  color: var(--color-text-muted);
}
.detail-description {
  margin: 16px 0;
  color: var(--color-text);
}
.detail-cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

/* ---------- Trust section ---------- */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.trust-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px;
}
.trust-item svg {
  width: 28px;
  height: 28px;
  color: var(--color-primary);
  margin-bottom: 10px;
}
.trust-item h3 {
  font-size: 1rem;
}
.trust-item p {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin: 0;
}

/* ---------- Contact ---------- */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.contact-form label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
  display: block;
  margin-bottom: 4px;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: inherit;
}
.contact-form textarea {
  resize: vertical;
  min-height: 100px;
}
.form-note {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* ---------- Lead capture form ----------
   A two-field version of the contact form used wherever WhatsApp used to be a
   plain link. The submit button still opens WhatsApp, so it costs the visitor
   nothing extra — but the number is saved before they leave the page. */
.lead-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 420px;
  text-align: left;
}
.lead-form-row {
  display: grid;
  gap: 10px;
}
@media (min-width: 480px) {
  .lead-form-row {
    grid-template-columns: 1fr 1fr;
  }
}
.lead-form input {
  width: 100%;
  padding: 14px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: inherit;
  background: #fff;
}
.lead-form .form-note {
  text-align: center;
}
/* Hidden from people, visible to spam bots — see the honeypot check in leads.js.
   Kept off-screen rather than display:none so bots still fill it in. */
.lead-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-primary-dark);
  color: rgba(255, 255, 255, 0.85);
  padding: 32px 0;
  margin-top: 40px;
}
.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 0.85rem;
}
.site-footer a {
  color: #fff;
}

/* Header WhatsApp button: the label is hidden on mobile, so the icon carries it. */
.btn-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.header-cta .btn-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ============================================================
   2026 改版：旧站内容重新设计后新增的区块
   ============================================================ */

.logo-mark {
  /* 原图 1563x1563 四周有大片留白，用 background-position 裁到内容
     （内容位于 x266 y406，尺寸 945x680）—— 不动原始档，改数字就能调 */
  display: block;
  width: 53px; height: 38px;
  background-image: url(../images/site/logo-acez.webp);
  background-repeat: no-repeat;
  background-size: 87px auto;
  background-position: -15px -23px;
}

/* ---------- 主视觉：整张照片当背景 ---------- */
.hero-photo {
  position: relative;
  padding: 0;
  min-height: 78vh;
  display: flex;
  align-items: center;
  background: var(--ink);
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
/* 压暗照片，白字才读得清楚。中段要够暗，副标才不会糊在亮部里。 */
.hero-photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(38,48,43,.72) 0%, rgba(38,48,43,.66) 40%, rgba(38,48,43,.70) 70%, rgba(38,48,43,.82) 100%);
}
.hero-photo .container { position: relative; z-index: 2; padding-top: 90px; padding-bottom: 90px; }
/* 选择器要比前面的 .hero p.subhead 更具体，否则文字会变回灰色 */
.hero-photo .eyebrow {
  color: var(--gold-light);
  text-shadow: 0 2px 18px rgba(0,0,0,.45);
}
/* 照片上的金色关键字也要跟着变浅，深金压在照片上看不清 */
.hero-photo .hl { color: var(--gold-light); }
.hero-photo h1 { color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.hero-photo p.subhead {
  color: #fff;
  text-shadow: 0 1px 16px rgba(0,0,0,.5);
}

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

/* ---------- 区块底色交替 ---------- */
.section-alt { background: var(--cream); }
.section-lead {
  max-width: 560px;
  color: var(--stone);
  margin: -8px 0 28px;
}
/* .section-lead 原本是给一句话的短导语设计的，560px 刚好。
   Botani 那页的介绍段落有两整段，塞在 560px 里字挤成一条窄柱、
   右边留一大片空白。这个 class 只加在多段落介绍上，跟 .section-lead
   共用间距/颜色，只放宽最大宽度，不影响其他只有一句话的地方。 */
.section-lead.area-intro-wide { max-width: 760px; }
.section-heading .eyebrow { margin-bottom: 6px; }

/* ---------- 简介：图 + 文 ---------- */
.intro-grid { display: grid; gap: 28px; }
.intro-photo img { width: 100%; border-radius: var(--radius); }
.intro-copy h2 { margin: 0 0 14px; font-size: clamp(1.9rem, 5vw, 2.5rem); font-weight: 400; }
.intro-copy p { color: var(--stone); margin-bottom: 14px; }
.intro-copy .btn { margin-top: 8px; }

/* ---------- 建案卡片补充 ---------- */
.listing-subtitle {
  font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); margin-top: -2px;
}
.listing-highlights {
  list-style: none; margin: 10px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 5px;
}
.listing-highlights li {
  font-size: 0.85rem; font-weight: 300; color: var(--stone);
  padding-left: 16px; position: relative;
}
.listing-highlights li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; background: var(--gold); border-radius: 50%;
}
.listing-card .listing-price { margin-top: 12px; }

/* ---------- 地区 ---------- */
.area-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.area-card {
  display: flex; flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.area-card:hover { border-color: var(--gold); box-shadow: var(--shadow-lg); }
/* 地区卡的代表照片。16:9 比建案卡的 4:3 扁一些 —— 这里是「地方」的印象，
   不是在看单一间房子，扁一点比较像风景，也不会把卡片撑太高。 */
.area-photo { overflow: hidden; background: var(--cream); }
.area-photo img {
  display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  transition: transform .9s cubic-bezier(.16,.7,.24,1);
}
.area-card:hover .area-photo img { transform: scale(1.05); }
.area-body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.area-card h3 { font-size: 1.35rem; font-weight: 500; margin: 0 0 8px; }
.area-card p { font-size: 0.86rem; font-weight: 300; color: var(--stone); margin: 0 0 12px; }
.area-card .area-link { margin-top: auto; }
.area-link { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-text); }

/* 地区页底部：把人导去地区比较那篇 */
.area-guide-link {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
  padding: 16px 20px; margin: 0 0 26px;
  background: var(--cream); border: 1px solid rgba(183,151,90,.35);
  border-radius: var(--radius);
  transition: border-color .3s ease;
}
.area-guide-link:hover { border-color: var(--gold); }
.area-guide-link strong { font-weight: 500; color: var(--ink); font-size: 0.95rem; }
/* 快速筛选连结：projects.html 顶部，导去 SEO 静态筛选页（/ipoh-freehold-property/ 等）。
   跟站内的 JS 下拉筛选是两回事 —— 下拉筛选是给已经在这页的人用，
   这排连结是给 Google 抓、也给还没进站的人在搜寻结果直接点进特定条件页。 */
.quick-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 28px; }
.quick-filters a {
  font-size: 0.78rem; padding: 7px 14px; border-radius: 999px;
  background: var(--cream); border: 1px solid var(--line); color: var(--ink);
  transition: border-color .3s ease, background .3s ease;
}
.quick-filters a:hover { border-color: var(--gold); background: var(--ivory); }

.area-guide-link span {
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-text); white-space: nowrap;
}

/* ---------- 3D 实景导览 ---------- */
.vr-block { margin: 44px 0 0; }
.vr-block h2 {
  font-size: clamp(1.5rem, 3.8vw, 2rem); font-weight: 400; margin: 0 0 8px;
}
.vr-lead { color: var(--stone); font-weight: 300; margin: 0 0 18px; line-height: 1.7; }
.vr-frame {
  position: relative; width: 100%; aspect-ratio: 16 / 10;
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--ink);
}
@media (max-width: 599px) { .vr-frame { aspect-ratio: 4 / 3; } }
.vr-frame.is-live { border-color: var(--gold); }
.vr-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* 外框：一张照片 + 按钮，点了才载入播放器 */
.vr-facade {
  position: absolute; inset: 0; width: 100%; height: 100%;
  padding: 0; border: 0; cursor: pointer; background: var(--ink);
  display: block; overflow: hidden;
}
.vr-facade img {
  width: 100%; height: 100%; object-fit: cover; opacity: .55;
  transition: transform .8s cubic-bezier(.16,.7,.24,1), opacity .3s ease;
}
.vr-facade:hover img { transform: scale(1.04); opacity: .45; }
.vr-badge {
  position: absolute; top: 14px; left: 14px;
  font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 500; color: var(--ink); background: var(--gold);
  padding: 6px 12px; border-radius: 999px;
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
}
.vr-play {
  position: absolute; inset: 0; margin: auto;
  width: 76px; height: 76px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.94); color: var(--ink);
  transition: transform .3s ease, background .3s ease;
}
.vr-facade:hover .vr-play { transform: scale(1.07); background: #fff; }
.vr-play svg { width: 32px; height: 32px; }
.vr-hint {
  position: absolute; left: 0; right: 0; bottom: 20px;
  text-align: center; color: #fff;
  font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(0,0,0,.6);
}
.vr-note { font-size: 0.78rem; color: var(--stone); margin: 10px 0 0; }
@media (prefers-reduced-motion: reduce) {
  .vr-facade img, .vr-play { transition: none; }
  .vr-facade:hover img { transform: none; }
  .vr-facade:hover .vr-play { transform: none; }
}

/* 首页的指南卡。这两篇本来只挂在页尾，等於没人看得到 —— 挪到前段。 */
.guide-cards { display: grid; gap: 18px; }
@media (min-width: 760px) { .guide-cards { grid-template-columns: 1fr 1fr; } }
/* 3 张卡并排的版本（目前只有 MM2H 页的 Platinum/Gold/Silver 用），
   宽度够时（1000px+）三栏并排，中间宽度维持两栏，不会硬挤。 */
@media (min-width: 1000px) { .guide-cards--3 { grid-template-columns: 1fr 1fr 1fr; } }
.guide-card {
  display: flex; flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 22px;
  transition: border-color .3s ease, box-shadow .3s ease, transform .45s cubic-bezier(.16,.7,.24,1);
}
/* 卡片顶部的照片——用负边距把图片顶到卡片边缘（卡片本身是四周留白的），
   目前只有 MM2H 页的地区卡片在用真实的建案封面照。 */
.guide-card-photo {
  margin: -24px -22px 16px; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden;
  position: relative;
}
.guide-card-photo img { width: 100%; height: 160px; object-fit: cover; display: block; }
.guide-card:hover { border-color: var(--gold); box-shadow: var(--shadow-lg); }
.guide-tag {
  align-self: flex-start;
  font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold-text); background: var(--cream);
  border: 1px solid rgba(183,151,90,.35); border-radius: 999px;
  padding: 4px 11px; margin-bottom: 14px;
}
.guide-card h3 {
  font-family: var(--serif); font-size: 1.35rem; font-weight: 500;
  margin: 0 0 10px; color: var(--ink);
}
.guide-card p {
  font-size: 0.9rem; font-weight: 300; color: var(--stone);
  line-height: 1.7; margin: 0 0 18px;
}
.guide-cta {
  margin-top: auto;
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-text);
}

/* 独立段落里的照片——跟 .guide-card-photo 是同一套视觉语言，
   但不挂在卡片里（比如 dark 区块的文字段落中间插一张照片），
   所以不能借 .guide-card 的负边距技巧，要自己有圆角、阴影。 */
.area-section-photo { margin: 20px 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); }
.area-section-photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.area-section-photo figcaption {
  font-size: 0.76rem; color: var(--stone); padding: 8px 2px 0; font-style: italic;
}
.guide-panel--dark .area-section-photo figcaption { color: #c7d0cb !important; }

/* 分级卡片的左边色条——目前只有 MM2H 页的 Platinum/Gold/Silver 用，
   三个名字本来就对应三种颜色，用左边框顺势区分，不是新发明一套配色。
   全部沿用既有 token（forest / gold / stone），没有新增任何颜色数值。 */
.guide-card--platinum { border-left: 3px solid var(--forest); }
.guide-card--gold { border-left: 3px solid var(--gold); }
.guide-card--silver { border-left: 3px solid var(--stone); }
.guide-card--platinum .guide-tag { color: var(--forest); background: var(--ivory); border-color: rgba(62,77,66,.3); }
.guide-card--silver .guide-tag { color: var(--stone); background: var(--ivory); border-color: rgba(111,118,112,.3); }

/* ---------- 指南页（价格总表 / 地区比较 / 买房流程）---------- */
/* 散文页限制行宽比较好读；价格总表要满宽，栏位才不用一直横捲 */
#guide { max-width: 860px; margin: 0 auto; }
#guide.guide-wide { max-width: none; }
.guide-head { margin-bottom: 30px; }
.guide-head h1 { font-size: clamp(1.9rem, 5.4vw, 2.9rem); font-weight: 400; margin: 0 0 12px; }
#guide h2 {
  font-size: clamp(1.35rem, 3.4vw, 1.75rem); font-weight: 400;
  margin: 38px 0 14px;
}

/* MM2H 页专用——13 个主要段落前面加大号编号，业主反映资讯量大、
   段落之间容易混在一起看不出分界，编号让人一眼看出「第几节／共几节」。
   颜色沿用既有的 gold-text／gold-light token（跟 .guide-tag 同一套，
   没有新增颜色数值），不是每个 h2 都加，只用在主线的 13 个大标题。 */
.section-num {
  display: flex; align-items: baseline; gap: 14px;
  margin: 38px 0 14px;
}
.section-num h2 { margin: 0 !important; }
.section-num-n {
  font-family: var(--serif); font-weight: 600; line-height: 1;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  color: var(--gold-text); flex-shrink: 0;
}
.guide-panel--dark .section-num-n { color: var(--gold-light) !important; }
@media (max-width: 480px) {
  .section-num { flex-direction: column; gap: 2px; align-items: flex-start; }
}
#guide h3 { font-size: 1.1rem; font-weight: 500; margin: 26px 0 10px; }
#guide p { color: var(--color-text); line-height: 1.75; margin: 0 0 14px; }
#guide p strong { color: var(--ink); font-weight: 600; }
#guide a { color: var(--gold-text); border-bottom: 1px solid var(--line); }
#guide a:hover { border-bottom-color: var(--gold); }

/* ⚠️ 上面那条 `#guide a` 是 ID 选择器（优先度 1-0-1），会连按钮一起吃掉 ——
   .btn-whatsapp 的 `color: var(--ink)` 只有 0-1-0，压不过它。
   结果是 35 个 kind:"guide" 的页面上，每一颗 WhatsApp 按钮都是
   金字压金底：#806528 on #b7975a = 1.99:1，等於看不见。
   深绿面板里更糟 —— `.guide-panel--dark a` 带 !important，
   把按钮文字变成 gold-light 压在 gold 底上 = 1.75:1。

   按钮不是内文连结，不该继承连结色与底线。下面用
   `#guide a.btn-*`（1-1-1）与 !important 分别盖回各变体自己的颜色。
   改动前後都实测过对比，别把这几条删掉。 */
#guide a.btn, .guide-panel--dark a.btn { border-bottom: 0; }
#guide a.btn-whatsapp { color: var(--ink); }
#guide a.btn-whatsapp:hover { color: #fff; }
#guide a.btn-primary { color: var(--ivory); }
#guide a.btn-outline { color: var(--forest); }
/* 深绿底上：实心金按钮维持深字；外框按钮改成象牙白字＋浅框，
   否则 forest 字压 forest 底就是隐形 */
.guide-panel--dark a.btn-whatsapp { color: var(--ink) !important; }
.guide-panel--dark a.btn-whatsapp:hover { color: #fff !important; }
.guide-panel--dark a.btn-primary { color: var(--ivory) !important; }
.guide-panel--dark a.btn-outline {
  color: var(--ivory) !important; border-color: rgba(255,255,255,.42) !important;
}
.guide-panel--dark a.btn-outline:hover { border-color: var(--gold-light) !important; }
#guide .btn { border-bottom: 0; }

.guide-note {
  background: var(--cream); border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 8px; padding: 14px 17px;
  font-size: 0.92rem !important; margin: 22px 0 !important;
}
.guide-points { margin: 0 0 18px; padding-left: 20px; }

/* 长指南页用的色块面板——目前只有 MM2H 页在用，让不同区块视觉上分开，
   不是整页从头到尾同一个米白色。颜色都从既有 token 来，gold-tint
   是把 --gold 转成很淡的透明度，不是新调一个颜色。 */
.guide-panel { border-radius: 14px; padding: 32px 28px; margin: 34px 0; }
.guide-panel h2 { margin-top: 0 !important; }
.guide-panel > .section-num:first-child { margin-top: 0; }
.guide-panel--cream { background: var(--cream); }
.guide-panel--gold-tint { background: rgba(183,151,90,.08); border: 1px solid rgba(183,151,90,.22); }
.guide-panel .steps { margin-top: 26px !important; }

/* 深色面板——跟首页 .section-dark 同一套配色（forest 底、ivory 字），
   只是做成 guide 窄栏内的圆角色块，不是整个 viewport 满版。
   底下每个既有元件（表格/卡片/清单/连结）都要单独覆写文字颜色，
   不然套用既有的深色文字在深底上会看不见。 */
.guide-panel--dark {
  background: var(--forest); color: var(--ivory);
}
/* #guide h2/h3/p/a 那几条是 ID 选择器，优先度天生比 class 高，
   这里全部要加 !important 才盖得过去——已经实测确认过，
   不加的话卡片内文字会变成深字在深底上，看不见。 */
.guide-panel--dark h2, .guide-panel--dark h3 { color: var(--ivory) !important; }
.guide-panel--dark p { color: #c7d0cb !important; }
.guide-panel--dark p strong, .guide-panel--dark strong { color: var(--ivory) !important; }
.guide-panel--dark a { color: var(--gold-light) !important; border-bottom-color: rgba(224,203,164,.4) !important; }
.guide-panel--dark .guide-points li { color: #c7d0cb; }
.guide-panel--dark .guide-points li strong { color: var(--ivory) !important; }
/* 表格本身有自己写死的浅色底（.table-scroll/thead th/th[scope=row]），
   之前只覆写了文字颜色，没覆写底色，深色面板里就变成一个浅色方框，
   看起来脏脏的、字看不清楚——这裡把底色也一起换掉。 */
.guide-panel--dark .table-scroll { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.16); }
.guide-panel--dark .vs-table th, .guide-panel--dark .vs-table td { border-color: rgba(255,255,255,.14); }
.guide-panel--dark .vs-table thead th { color: #c7d0cb; background: rgba(255,255,255,.08); }
.guide-panel--dark .vs-table th[scope="row"] { color: var(--ivory); background: rgba(255,255,255,.04); }
.guide-panel--dark .vs-table tbody td { color: #e7e2d6; }
.guide-panel--dark .guide-card {
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16);
}
.guide-panel--dark .guide-card:hover { border-color: var(--gold-light); }
.guide-panel--dark .guide-card h3 { color: var(--ivory) !important; }
.guide-panel--dark .guide-card p { color: #c7d0cb !important; }
.guide-panel--dark .guide-tag { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); }
.guide-panel--dark .guide-card--platinum .guide-tag { color: #e7e2d6; }
.guide-panel--dark .guide-card--gold .guide-tag { color: var(--gold-light); }
.guide-panel--dark .guide-card--silver .guide-tag { color: #c7d0cb; }
.guide-panel--dark .guide-note {
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16);
  border-left-color: var(--gold-light); color: #e7e2d6 !important;
}
.guide-panel--dark .guide-note strong { color: var(--ivory) !important; }
.guide-panel--dark .area-section--tag { color: var(--gold-light) !important; }
/* .faq-item 折叠区块本来只在米白底用（8 reasons／4 property types），
   现在 Platinum/Gold/Silver 卡片里也要放一个，summary 文字预设是深色
   （var(--ink)），深底看不见，這裡单独覆写。 */
.guide-panel--dark .faq-item { border-bottom-color: rgba(255,255,255,.16); }
.guide-panel--dark .faq-item summary { color: var(--ivory) !important; }
.guide-panel--dark .faq-item summary:hover { color: var(--gold-light) !important; }
.guide-panel--dark .faq-item summary::after { color: var(--gold-light) !important; }

/* ---------- 商业／工业内页的双色分区（.pd-panel） ----------
   米色 = 「这个物件是什麽」（事实）；深绿 = 「你该怎麽判断」（指引）。
   连着的同类段落合并成一块，所以一页只有两块深底 —— 亮底为主的节奏不变。

   下面这几条是补 .guide-panel--dark 原本没照顾到的 class：
   .pd-lead / .pd-note / .ka-points 都是 pd-* 系列，本来只在亮底出现过，
   直接放进深底会是深字压深底。
   #c7d0cb on --forest #3e4d42 = 5.7:1，--ivory 上 forest = 11.4:1。 */
.pd-panel { padding: 34px 30px; }
.pd-panel > h2:first-child { margin-top: 0 !important; }
.guide-panel--dark .pd-lead,
.guide-panel--dark .pd-note { color: #c7d0cb !important; }
.guide-panel--dark .pd-lead strong,
.guide-panel--dark .pd-note strong { color: var(--ivory) !important; }
.guide-panel--dark .ka-points li { color: #c7d0cb; }
.guide-panel--dark .ka-points li::before { color: var(--gold-light); }
.guide-panel--dark .ka-points strong { color: var(--ivory); }
.guide-panel--dark em { color: var(--gold-light); font-style: normal; }
.guide-panel--dark ol.guide-points { color: #c7d0cb; }

/* .ka-points 之前只定义在 klemeru-4 的 inline <style> 里，
   所以这 11 页的 Key features 一直是浏览器预设的黑圆点。搬进来。 */
.ka-points { list-style: none; margin: 0 0 16px; padding: 0; }
.ka-points li {
  position: relative; padding-left: 20px; margin-bottom: 9px;
  color: var(--pd-text); line-height: 1.7;
}
.ka-points li::before { content: "\2014"; position: absolute; left: 0; color: var(--gold-text); }
.ka-points strong { color: var(--ink); }

@media (max-width: 600px) {
  .pd-panel { padding: 26px 20px; margin: 24px 0; border-radius: 10px; }
}
@media (max-width: 619px) { .guide-panel { padding: 24px 20px; } }

/* 目录锚点跳转时，固定表头不要挡住标题 */
#guide h2[id] { scroll-margin-top: 90px; }

/* 单独一颗可展开区块（不是 FAQ 但借用同一套折叠视觉），
   跟 .faq-item 共用样式，只是不在 #faq 区块里。 */
.guide-expand { margin: 18px 0; }
.guide-expand summary { font-weight: 500; }

/* 事实小胶囊——带 emoji 的圆角标签，比 .detail-spec 的方框更活泼，
   字体正常大小（不是全大写小字），适合放完整短句。 */
.fact-pills { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.fact-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--color-surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 10px 18px; font-size: 0.85rem; color: var(--ink); line-height: 1.3;
}
.fact-pill .emoji { font-size: 1.05rem; line-height: 1; }
.guide-points li { margin-bottom: 10px; line-height: 1.7; color: var(--color-text); }
.guide-points li strong { color: var(--ink); font-weight: 600; }

/* 4 格迷你卡——图示 + 短标题（+ 可选一句话），MM2H 页的 "What Is MM2H"
   4 个身份卡、"Why Consider Ipoh" 6 个理由卡、"What Brings You to
   Malaysia" 4 个入口卡都共用同一个元件，没有另外发明新样式。 */
.guide-cards--4 { }
@media (min-width: 640px) { .guide-cards--4 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .guide-cards--4 { grid-template-columns: repeat(4,1fr); } }
.guide-card--mini { text-align: center; align-items: center; padding: 22px 16px; }
.guide-card--mini .emoji { font-size: 1.7rem; line-height: 1; margin-bottom: 10px; }
.guide-card--mini h3 { margin: 0 0 6px; font-size: 1rem; }
.guide-card--mini p { margin: 0; font-size: 0.82rem; }
/* Airport & Connectivity 卡片用真实照片／官方 logo 取代 emoji，
   跟 emoji 同一个视觉份量（固定高度、置中），不做成满版大图，
   免得跟同一排另外两张 logo 卡片比例不一致。 */
.guide-card--mini .living-icon-img { height: 48px; width: auto; max-width: 100%; object-fit: contain; margin-bottom: 10px; }

/* Platinum/Gold/Silver 卡片顶部的数字列（Fixed Deposit / Pass 年期），
   跟表格数字一致，只是换一种更快扫到重点的排版，不是新的一组数字。 */
.glance-stats { margin: 2px 0 14px; }
.glance-stat {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 9px 0; border-top: 1px solid var(--line);
}
.glance-stat:first-child { border-top: none; padding-top: 0; }
.glance-stat strong { font-family: var(--serif); font-size: 1.15rem; font-weight: 500; color: var(--ink); white-space: nowrap; }
.glance-stat span { font-size: 0.7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--stone); text-align: right; }
.guide-panel--dark .glance-stat { border-top-color: rgba(255,255,255,.14); }
.guide-panel--dark .glance-stat strong { color: var(--ivory) !important; }
.guide-panel--dark .glance-stat span { color: #c7d0cb !important; }

/* "View more" 小折叠——用在 Living in Ipoh 卡片里的胶囊清单，
   跟 .guide-expand 是同一个折叠机制，只是换一套更小、行内的视觉，
   不是完整一行的 FAQ 样式。 */
.guide-expand--inline { margin: 10px 0 0; }
.guide-expand--inline summary {
  cursor: pointer; list-style: none;
  font-weight: 500; font-size: 0.76rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--gold-text); display: inline-block;
}
.guide-expand--inline summary::-webkit-details-marker { display: none; }
.guide-expand--inline summary:hover { color: var(--gold); }
.guide-expand--inline .fact-pills { margin: 10px 0 0; }
.guide-card--mini .guide-tag { align-self: center; }
/* guide-card--mini 的内距跟标准 .guide-card 不一样（22/16 vs 24/22），
   照片版位如果直接沿用标准的负边距，会跟卡片边缘留一条不对齐的缝。 */
.guide-card--mini .guide-card-photo { margin: -22px -16px 14px; }
/* Wikimedia Commons 的 CC BY / CC BY-SA 照片依授权条款需要署名，
   业主不要照片上叠浮水印，改成整组照片跑完后一行小字统一列出来。 */
.photo-credits-note {
  font-size: 0.72rem !important; color: var(--stone) !important;
  margin: 4px 0 22px !important; line-height: 1.6;
}
.photo-credits-note a { color: var(--stone) !important; }

/* 宽表格在自己的容器里横向捲动，页面本身绝不横向捲 */
.table-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin: 0 0 26px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--color-surface);
}
.price-table, .vs-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.price-table th, .price-table td, .vs-table th, .vs-table td {
  padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.price-table thead th, .vs-table thead th {
  font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--stone); font-weight: 500; background: var(--cream);
  position: sticky; top: 0;
}
.price-table tbody tr:last-child td, .vs-table tbody tr:last-child td { border-bottom: 0; }
.price-table tbody tr:hover { background: var(--ivory); }
.price-table td a { font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--line); }
.price-table td a:hover { color: var(--gold-text); border-bottom-color: var(--gold); }
.ta-r { text-align: right !important; }
.nowrap { white-space: nowrap; }
.pl-area {
  display: flex; align-items: baseline; gap: 10px;
  margin: 32px 0 12px !important;
}
.pl-area span {
  font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--stone); font-weight: 400;
}

/* 比较表：第一栏是标题列 */
.vs-table th[scope="row"] {
  font-weight: 400; color: var(--stone); font-size: 0.82rem;
  background: var(--ivory);
}
.vs-table tbody td { font-weight: 500; color: var(--ink); }
.vs-grid { display: grid; gap: 20px; margin: 26px 0; }
@media (min-width: 760px) { .vs-grid { grid-template-columns: 1fr 1fr; } }
.vs-col {
  background: var(--color-surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 20px;
  display: flex; flex-direction: column;
}
.vs-col h3 { margin-top: 0 !important; }
.vs-list { list-style: none; margin: 0 0 18px; padding: 0; flex: 1; }
.vs-list li {
  padding: 9px 0; border-bottom: 1px solid var(--line);
  font-size: 0.88rem; line-height: 1.6; color: var(--stone);
}
.vs-list li:last-child { border-bottom: 0; }
.vs-list li strong { color: var(--ink); font-weight: 500; }

/* 流程步骤 */
.steps { list-style: none; margin: 26px 0; padding: 0; counter-reset: step; }
.step { display: flex; gap: 16px; padding-bottom: 26px; position: relative; }
.step:not(:last-child)::before {
  content: ""; position: absolute; left: 17px; top: 40px; bottom: 4px;
  width: 1px; background: var(--line);
}
.step-n {
  flex: 0 0 auto; width: 35px; height: 35px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--cream); border: 1px solid rgba(183,151,90,.4);
  color: var(--gold-text); font-family: var(--serif); font-weight: 600;
  font-size: 0.95rem; position: relative; z-index: 1;
}
.step-body { min-width: 0; }
.step-body h2 { margin: 5px 0 8px !important; font-size: 1.15rem !important; font-weight: 500; }
.step-body p { margin: 0 !important; font-size: 0.92rem; }

/* ---------- 地区页：数字带 + 为什么选这区 ---------- */
/* 数字全部由 areaStats() 现算，不写死 —— 改资料就自动跟著变。 */
.area-stats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 18px 14px;
  margin: 0 0 34px;
  padding: 22px 24px;
  background: var(--color-surface);
  border: 1px solid var(--line); border-radius: var(--radius);
}
@media (min-width: 760px) { .area-stats { grid-template-columns: repeat(4, 1fr); } }
/* 底部对齐：数值换行时（例如 Botani 的 Property Types 两行）标籤才不会跟著往下掉，
   跟旁边单行的栏位对不齐。没有换行的栏位视觉上不受影响（bottom = top）。 */
.area-stats div { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; min-width: 0; text-align: center; }
.area-stats strong {
  font-family: var(--serif); font-size: 1.5rem; font-weight: 500;
  color: var(--gold-text); line-height: 1.1;
}
.area-stats span {
  font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--stone); line-height: 1.3;
}

/* 折叠起来，客人想看才点开 —— 手机上这段会把建案列表推很下面。
   用原生 <details>，不需要 JavaScript。 */
.area-why {
  margin: 0 0 30px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.area-why summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: baseline; gap: 12px;
  padding: 18px 40px 18px 0; position: relative;
}
.area-why summary::-webkit-details-marker { display: none; }
.area-why h2 {
  font-size: clamp(1.35rem, 3.2vw, 1.7rem); font-weight: 400; margin: 0;
}
.why-hint {
  font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--stone); white-space: nowrap;
}
/* 右边的 ＋，展开时转成 × —— 跟 FAQ 同一个语言 */
.area-why summary::after {
  content: "+";
  position: absolute; right: 4px; top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 300; color: var(--gold-text);
  transition: transform .3s ease;
}
.area-why[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.area-why summary:hover h2 { color: var(--gold-text); }
.area-why[open] .why-grid { padding-bottom: 22px; }
.why-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 720px) { .why-grid { grid-template-columns: 1fr 1fr; } }
.why-card {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 18px 20px;
  background: var(--color-surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .3s ease;
}
.why-card:hover { border-color: var(--gold); }
.why-icon {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--cream); border: 1px solid rgba(183,151,90,.35);
  color: var(--gold-text);
}
.why-icon svg { width: 20px; height: 20px; }
.why-card h3 { margin: 0 0 5px; font-size: 1.02rem; font-weight: 500; }
/* 原本 weight 300 太细，一整段扫过去抓不到重点 —— 加到 400、颜色也压深一点 */
.why-card p { margin: 0; font-size: 0.88rem; font-weight: 400; color: var(--color-text); line-height: 1.6; }
.why-card p strong { font-weight: 600; color: var(--ink); }

/* 地区页专用的大区块标题——目前只有 Tambun & Bercham 用（area.extraSectionsHTML），
   字级跟既有的 .area-why h2 对齐，其他 8 个地区页完全不受影响。 */
.area-section { margin: 42px 0; }
.area-section h2 {
  font-size: clamp(1.35rem, 3.2vw, 1.7rem); font-weight: 400; margin: 0 0 12px;
}
.area-section > p.section-lead { max-width: 760px; margin: 0 0 20px; }
.area-section--tag {
  display: block; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-text); margin: 0 0 8px;
}
.area-stats-heading {
  font-size: clamp(1.35rem, 3.2vw, 1.7rem); font-weight: 400; margin: 34px 0 14px;
}

/* 学校、商场、医院这些【具体名字】才是客人在找的，也是 Google 拿去配对的字。
   从句子里抽出来做成标签，一眼就扫得到，不会埋在一段话里。 */
.why-tags {
  list-style: none; margin: 9px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.why-tags li {
  font-size: 0.78rem; font-weight: 500; color: var(--ink);
  background: var(--cream);
  border: 1px solid rgba(183, 151, 90, .38);
  border-radius: 999px;
  padding: 4px 11px;
  line-height: 1.35;
}

/* ---------- 服务 ---------- */
/* auto-fit 而不是 auto-fill：只有 3 张卡时不会多留一栏空的，
   否则整块内容看起来会偏左。 */
.service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.service-card {
  background: var(--color-surface);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.service-card { transition: border-color .3s ease, box-shadow .3s ease; }
.service-card:hover { border-color: var(--gold); box-shadow: var(--shadow-lg); }
.service-card img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform .9s cubic-bezier(.16,.7,.24,1);
}
.service-card:hover img { transform: scale(1.04); }
.service-body { padding: 20px; }
.service-body h3 { font-size: 1.3rem; font-weight: 500; margin: 0 0 8px; }
.service-body p { font-size: 0.9rem; font-weight: 300; color: var(--stone); margin: 0; }

/* ---------- 客户评价 ---------- */
.tst-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.tst {
  margin: 0; padding: 26px 24px;
  background: var(--color-surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  display: flex; flex-direction: column; gap: 14px;
}
.stars { color: var(--gold); letter-spacing: 3px; font-size: 0.95rem; }
.tst blockquote {
  margin: 0; font-family: var(--serif); font-size: 1.12rem;
  line-height: 1.55; color: var(--ink);
}
.tst figcaption {
  margin-top: auto; display: flex; align-items: center; gap: 12px;
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone);
}
.tst figcaption img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }

/* ---------- 关于我们 ---------- */
/* 关於我 ＋ 联络表单合并成一段：左边介绍，右边表单。
   联络方式（电话／email／地区）不再重複列出 —— 页尾已经有了，
   同一页讲两次反而稀释重点。 */
.about-grid { display: grid; gap: 32px; align-items: start; }
@media (min-width: 900px) {
  .about-grid { grid-template-columns: 1.05fr .95fr; gap: 48px; }
}
/* grid 子元素预设 min-width:auto —— 表单里的 input 有自己的最小宽度，
   会把右栏撑得比该有的份额宽（左栏就被挤扁）。归零才会照 fr 分配。 */
.about-copy, .about-form { min-width: 0; }
.about-copy h2 { margin: 0 0 6px; font-size: clamp(1.7rem, 4.4vw, 2.3rem); font-weight: 400; }
.hd-sep { color: var(--line); font-weight: 300; }
.about-role {
  margin: 0 0 20px;
  font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 500; color: var(--gold-text);
}
.about-copy p { color: var(--stone); margin: 0 0 14px; }
.about-copy strong { color: var(--ink); font-weight: 500; }

/* 三个数字。屋主自己提供的真实数字，不是凑出来的信任标章。 */
.about-stats {
  list-style: none; margin: 22px 0; padding: 20px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.about-stats li { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.about-stats strong {
  font-family: var(--serif); font-size: 1.45rem; font-weight: 500;
  color: var(--ink); line-height: 1.1;
}
.about-stats span {
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--stone); line-height: 1.3;
}
@media (max-width: 419px) {
  .about-stats { grid-template-columns: 1fr; gap: 16px; }
}

/* 表单放在白卡上，跟左边米色的底分开 */
.about-form {
  background: var(--color-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
}
.about-form h3 {
  margin: 0 0 6px; font-size: 1.5rem; font-weight: 500;
}
.form-lead { font-size: 0.88rem; color: var(--stone); margin: 0 0 18px; }


/* ---------- 浮动 WhatsApp 按钮 ---------- */
.wa-float {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  width: 54px; height: 54px; border-radius: 50%;
  background: #25d366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.22);
  transition: transform .25s ease;
}
.wa-float:hover { transform: scale(1.06); }
.wa-float svg { width: 30px; height: 30px; }

/* 商业／工业的照片。⚠️ 一律用 aspect-ratio + height:auto，
   【不要】在 <img> 上加 width/height 属性 —— HTML 属性会被当成
   presentational hint 压过 aspect-ratio，图会被拉成属性写的高度。
   2026-09-09 全站图片走位就是这个原因。 */
.cm-hero { margin: 22px 0 28px; border-radius: 10px; overflow: hidden; background: var(--cream); }
.cm-hero img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover;
}
.cm-card-photo { display: block; margin: -20px -22px 14px; overflow: hidden; background: var(--cream); }
.cm-card-photo img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform .9s cubic-bezier(.16,.7,.24,1);
}
.cm-card--photo { padding-top: 0; overflow: hidden; }
.cm-card--photo .cm-card-cat { padding-top: 2px; }
.cm-card:hover .cm-card-photo img { transform: scale(1.05); }
@media (max-width: 600px) {
  .cm-card-photo { margin: -20px -22px 12px; }
  .cm-hero img { aspect-ratio: 3 / 2; }
}

/* ---------- 商业／工业列表（/commercial-industrial-ipoh/） ----------
   卡片刻意把「地皮尺寸／净高／电力／地契」直接印在卡面上 ——
   工业买家用这几项决定要不要点进去，藏在内页等於逼他一个个开。 */
.cm-grid { display: grid; gap: 16px; margin-top: 26px; }
@media (min-width: 700px) { .cm-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .cm-grid { grid-template-columns: repeat(3, 1fr); } }
.cm-card {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--ivory); border: 1px solid var(--line); border-radius: 8px;
  padding: 20px 22px 22px;
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.cm-card:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -18px rgba(40,48,43,.4);
}
.cm-card-cat { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: #806528; }
.cm-card-name { font-family: var(--serif); font-size: 1.25rem; color: var(--ink); line-height: 1.25; }
.cm-card-type { font-size: .88rem; color: #61685f; }
/* 卡片规格：标签一栏、值一栏。
   原本是 middot 串成一行，四个数字并排，读者分不出哪个是净高哪个是地皮。
   标签栏固定 4.6em —— 六个标签（Land / Built-up / Ceiling / Power /
   Tenure / Status）里最长的 Built-up 刚好放得下，值就全部对齐。
   标签 9.9px、值 12.5px，两者都算小字，套 4.5:1 不是 3:1。
   标签 #61685f on --ivory #f7f5f0 = 5.3:1，值 #4a524b = 7.3:1。
   （先写的 #6f7670 只有 4.29:1，不过 —— 别再改回去。） */
.cm-card-bits { display: grid; gap: 3px; margin-top: 2px; font-size: .78rem; line-height: 1.45; }
.cm-bit { display: grid; grid-template-columns: 4.6em 1fr; gap: 8px; align-items: baseline; }
.cm-bit-k {
  font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  color: #61685f; white-space: nowrap;
}
.cm-bit-v { color: #4a524b; }
.cm-card-price { margin-top: 6px; font-family: var(--serif); font-size: 1.2rem; color: var(--forest); }

/* ---------- 建案页的价格卡 ----------
   版型沿用 forresta/ 那页的 .price-card（深绿头 + 明细列），
   移到主样式表让 30 个产生页共用。Forresta 自己的 <style> 里有一份
   同名规则，那页不吃这支样式表，两边互不影响。
   Forresta 有的「SPA 原价」与「Inclusive of」这里不做 —— 那是它独有的
   发展商配套，其他建案 data/areas.js 里没有这些资料，硬凑就是编。 */
.price-card { max-width: 560px; margin: 30px auto 0; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 70px -40px rgba(40,48,43,.4); }
.price-head { background: var(--forest); color: #fff; padding: 40px 30px; text-align: center; }
.price-head .from { font-size: .74rem; letter-spacing: .3em; text-transform: uppercase; color: #e9dcbf; }
.price-head .amt { font-family: var(--serif); font-size: 3.4rem; line-height: 1; margin: 8px 0 4px; }
.price-body { padding: 34px 40px 40px; }
.price-row { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.price-row span:first-child { color: #61685f; flex: none; }
.price-row span:last-child { color: var(--ink); text-align: right; }
.price-row small { color: #61685f; }
.price-note { text-align: center; font-size: .78rem; line-height: 1.65; color: #61685f; margin-top: 22px; }
.price-cta { text-align: center; margin-top: 24px; }

/* ---------- 商业／工业价格卡的方案卡版型 ----------
   版型参考 21st.dev 的 polar-subscription：超大价格数字 + 打勾规格清单
   + 整宽 CTA。配色不照抄（那张是近黑底），走站上原本的森林绿／金／象牙白。

   规格用 <dl> 不是 <ul><li>✓…</li></ul> —— 打勾是 ::before 画的，
   语意上仍然是「栏位名 / 值」成对，读屏软体才念得出对应关系。

   对比：dt #5c635d on #fff = 5.9:1；dd --ink 上白 = 13.9:1；
   price-range #e9dcbf on --forest = 8.6:1；spa 同色系。都过 4.5:1。 */
.price-head .price-range {
  font-size: .84rem; color: #e9dcbf; margin-top: 6px;
}
.price-head .spa {
  font-size: .78rem; color: #cfd8d1; margin-top: 10px;
  padding-top: 10px; border-top: 1px solid rgba(255,255,255,.16);
}
.price-head .spa s { color: #e9dcbf; }

.price-specs { margin: 0; }
.price-spec {
  display: grid; grid-template-columns: 1.15rem 8.6em 1fr; gap: 0 10px;
  align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line);
}
.price-spec:last-child { border-bottom: 0; }
.price-spec::before {
  content: "\2713"; color: var(--gold-text); font-size: .82rem; line-height: 1.5;
}
.price-spec dt {
  font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; color: #5c635d;
}
.price-spec dd { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--ink); }

.price-free {
  margin-top: 22px; padding: 16px 18px; border-radius: 6px;
  background: rgba(183,151,90,.09); border: 1px solid rgba(183,151,90,.22);
}
.price-free h4 {
  margin: 0 0 8px; font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-text); font-weight: 600;
}
.price-free ul { margin: 0; padding: 0; list-style: none; }
.price-free li {
  position: relative; padding-left: 20px; margin-bottom: 5px;
  font-size: .86rem; line-height: 1.55; color: var(--ink);
}
.price-free li:last-child { margin-bottom: 0; }
.price-free li::before {
  content: "\2713"; position: absolute; left: 0; color: var(--gold-text); font-size: .82rem;
}

@media (max-width: 600px) {
  .price-body { padding: 26px 22px 30px; }
  .price-head { padding: 32px 22px; }
  .price-head .amt { font-size: 2.6rem; }
  .price-row { font-size: .86rem; }
  /* 窄萤幕栏位名改成叠在值上面，8.6em 那栏在 375px 会把值挤到只剩两三个字 */
  .price-spec { grid-template-columns: 1.15rem 1fr; row-gap: 2px; }
  .price-spec dt { grid-column: 2; }
  .price-spec dd { grid-column: 2; }
}

/* ---------- 建案页的决策区块（js/listings.js 的 pd-* 系列） ----------
   照片＋规格＋FAQ 不足以让人做决定，这几块补上「谁适合」「要多少钱」
   「同区还有什麽」。--pd-text 用 #61685f，在米白与米色底上都过 4.5:1。 */
.pd-block {
  --pd-text: #61685f;
  max-width: 820px; margin: 46px auto 0;
  padding-top: 40px; border-top: 1px solid var(--line);
}
.pd-block h2 { font-family: var(--serif); font-size: 1.9rem; font-weight: 500; margin: 0 0 14px; color: var(--ink); }
.pd-block h3 { font-family: var(--serif); font-size: 1.15rem; font-weight: 500; margin: 0 0 10px; color: var(--ink); }
.pd-lead { font-size: .95rem; line-height: 1.75; color: var(--pd-text); margin: 0 0 20px; }
.pd-note { font-size: .82rem; line-height: 1.7; color: var(--pd-text); margin: 14px 0 0; }
.pd-note--flag { background: rgba(183,151,90,.09); border-left: 2px solid var(--gold); padding: 12px 14px; }
/* Quick answer：整页最上面那段直答，给读者也给 AI 引擎。
   比一般 pd-note 大一号、字色用 --ink，因为它是要被读的，不是注脚。
   #26302b on rgba(183,151,90,.09) 叠在 --ivory 上 ≈ 12:1。 */
.pd-answer {
  font-size: .95rem; line-height: 1.75; color: var(--ink);
  background: rgba(183,151,90,.09); border-left: 3px solid var(--gold);
  padding: 16px 18px; border-radius: 0 6px 6px 0; margin: 18px 0 6px;
}
.pd-answer strong { font-weight: 600; }
.pd-note strong, .pd-lead strong { color: var(--ink); font-weight: 600; }

/* 户型图与家私效果图（js/listings.js floorPlansHTML）。
   手机一栏、平板以上两栏。figcaption #61685f on #f7f5f0 → 5.36:1。 */
.pd-media { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 600px) { .pd-media { grid-template-columns: 1fr 1fr; } }
.pd-media-item { margin: 0; }
.pd-media-item a { display: block; background: #fff; border: 1px solid var(--line); }
.pd-media-item img { display: block; width: 100%; height: auto; }
.pd-media-item--plan a { padding: 14px; }
.pd-media-item--plan img { max-height: 520px; object-fit: contain; }
.pd-media-item figcaption { font-size: .85rem; color: var(--pd-text); margin-top: 8px; line-height: 1.5; }
.pd-media-item a:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; }

/* 表格一律包在可横向捲动的框里，窄萤幕才不会把版面撑破 */
.pd-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pd-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.pd-table th, .pd-table td { padding: 11px 13px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.pd-table th[scope="row"] { color: var(--pd-text); font-weight: 400; width: 34%; }
.pd-table td { color: var(--ink); }
.pd-table--compare { min-width: 660px; }
.pd-table--compare thead th { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--pd-text); font-weight: 500; }
.pd-table--compare th[scope="row"] { width: auto; color: var(--ink); font-weight: 500; }
.pd-table tr.pd-me th, .pd-table tr.pd-me td { background: var(--cream); }
/* 比较表里标出「你正在看的这一款」，免得读者要自己对名字。
   #5c635d on --cream #efece4 = 5.0:1。 */
/* ---------- 建案页的实拍照片格（.proj-shots） ----------
   住宅内页只吃一张 hero 图（areaProjectAsListing 里 images 只取 p.image），
   要放多张就得走 extraSectionsHTML。这个格子就是给那个用的。
   照片本身长宽不一（竖拍的卧房、横拍的空拍），所以统一用 aspect-ratio + cover，
   而且【不要】在 <img> 上写 width/height —— 那两个属性会盖掉 aspect-ratio，
   照片就会被压扁。这个坑站上踩过一次，整站 22 张图走位。 */
.proj-shots { display: grid; gap: 12px; margin: 20px 0 8px; }
@media (min-width: 620px) { .proj-shots { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .proj-shots { grid-template-columns: repeat(3, 1fr); } }
.proj-shot { margin: 0; }
.proj-shot img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 8px; background: var(--cream);
}
.proj-shot figcaption {
  margin-top: 7px; font-size: .78rem; line-height: 1.5; color: #61685f;
}
.proj-shots--wide { grid-template-columns: 1fr !important; }
.proj-shots--wide .proj-shot img { aspect-ratio: 16 / 9; }

.pd-thispage {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
  color: #5c635d; background: #fff; border: 1px solid var(--line); white-space: nowrap;
}

/* 适合 / 不适合。两栏并排，窄萤幕叠成一栏 */
.pd-fit-grid { display: grid; gap: 20px; }
@media (min-width: 720px) { .pd-fit-grid { grid-template-columns: 1fr 1fr; } }
.pd-fit-col { background: var(--ivory); border: 1px solid var(--line); border-radius: 8px; padding: 20px 22px; }
.pd-fit-col--yes { border-left: 3px solid var(--sage); }
.pd-fit-col--no { border-left: 3px solid var(--gold); }
.pd-fit-col ul { list-style: none; margin: 0; padding: 0; }
.pd-fit-col li { position: relative; padding-left: 18px; margin-bottom: 10px; font-size: .88rem; line-height: 1.65; color: var(--pd-text); }
.pd-fit-col li:last-child { margin-bottom: 0; }
.pd-fit-col li::before { content: "\2014"; position: absolute; left: 0; color: #806528; }

/* 两个数字并排：day-one 现金 与 月供 */
.pd-cost { display: grid; gap: 16px; }
@media (min-width: 600px) { .pd-cost { grid-template-columns: 1fr 1fr; } }
.pd-cost--one { grid-template-columns: 1fr !important; max-width: 420px; }
.pd-cost-box { background: var(--ivory); border: 1px solid var(--line); border-radius: 8px; padding: 20px 22px; }
.pd-cost-label { display: block; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--pd-text); margin-bottom: 8px; }
.pd-cost-val { display: block; font-family: var(--serif); font-size: 1.85rem; color: var(--ink); line-height: 1.15; }
.pd-cost-sub { display: block; margin-top: 8px; font-size: .8rem; line-height: 1.6; color: var(--pd-text); }

/* ---------- 滚动触发的 CTA 小卡（js/scrollcta.js） ----------
   读者滚到 FAQ 才滑出来。不遮内容 —— 中央弹窗有 intrusive interstitial
   的 SEO 风险，手机上更是直接挡住整页。 */
.cta-card {
  position: fixed; right: 18px; bottom: 18px; z-index: 61;
  width: min(310px, calc(100vw - 36px));
  background: var(--forest); color: #fff;
  border-radius: 10px; padding: 18px 20px 20px;
  box-shadow: 0 18px 44px -12px rgba(0,0,0,.45);
  transform: translateY(24px); opacity: 0;
  transition: transform .45s cubic-bezier(.16,.7,.24,1), opacity .35s ease;
}
body.has-cta-card .cta-card { transform: none; opacity: 1; }
/* 小卡出现时浮动钮让位 —— 两个都是 WhatsApp 入口，同时出现只是重复 */
body.has-cta-card .wa-float { opacity: 0; pointer-events: none; }
/* padding-right 让开右上角的关闭钮。18px 够用 —— 站上最长的建案名
   （Urban FORResSSTss (GCB)）换行後，文字离关闭钮还有 30px 以上。 */
.cta-card-tx { margin: 0 0 8px; font-size: .98rem; line-height: 1.45; padding-right: 18px; }
.cta-card-tx strong { color: #fff; font-weight: 600; }
/* 白字 72% 配深绿底 = 6.3:1；13.4px 属小字，套 4.5:1 门槛 */
.cta-card-sub { margin: 0 0 15px; font-size: .84rem; line-height: 1.6; color: rgba(255,255,255,.82); }
.cta-card-go {
  display: block; text-align: center;
  background: #fff; color: var(--forest);
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
  padding: 12px 16px; border-radius: 5px;
  transition: background .3s ease, color .3s ease;
}
.cta-card-go:hover { background: var(--gold); color: #fff; }
.cta-card-x {
  position: absolute; top: 8px; right: 8px;
  width: 30px; height: 30px; padding: 0;
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,.75); font-size: 1.4rem; line-height: 1;
}
.cta-card-x:hover { color: #fff; }
@media (max-width: 600px) {
  .cta-card { right: 12px; left: 12px; bottom: 12px; width: auto; padding: 16px 18px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .cta-card { transition: opacity .2s ease; transform: none; }
}

/* ---------- 桌机版 ---------- */
@media (min-width: 860px) {
  .intro-grid { grid-template-columns: 1fr 1fr; align-items: center; gap: 46px; }
  .hero-photo .container { padding-top: 120px; padding-bottom: 120px; }
}

/* 蜜罐栏位：完全隐藏，只有机器人会填 */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ---------- 地区页 (area.html) ---------- */
.area-head { margin-bottom: 30px; }
.area-head h1 {
  font-size: clamp(2.1rem, 6vw, 3rem);
  font-weight: 400; margin: 10px 0 12px;
}
.area-count {
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-text); margin: 0;
}
.proj-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px;
}
.proj-card {
  display: flex; flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.proj-card:hover { border-color: var(--gold); box-shadow: var(--shadow-lg); }
/* Padding lives on the body so the photo can sit flush to the card edge. */
.proj-body {
  display: flex; flex-direction: column; flex: 1;
  padding: 22px 20px;
}
.proj-photo { overflow: hidden; background: var(--cream); }
.proj-photo img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform .9s cubic-bezier(.16,.7,.24,1);
}
.proj-card:hover .proj-photo img { transform: scale(1.05); }
.proj-card h3 {
  font-size: 1.3rem; font-weight: 500; margin: 0 0 4px;
}
.proj-type {
  font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--stone); margin: 0 0 14px;
}
.proj-facts {
  list-style: none; margin: 0 0 16px; padding: 0;
  font-size: 0.88rem; font-weight: 300; color: var(--color-text);
}
.proj-facts li {
  padding: 5px 0; border-bottom: 1px solid var(--line);
}
.proj-facts li:last-child { border-bottom: none; }
.proj-cta {
  margin-top: auto;
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-text);
}
.area-foot {
  margin-top: 40px; padding-top: 28px;
  border-top: 1px solid var(--line); text-align: center;
}
.area-foot p { color: var(--stone); font-weight: 300; margin-bottom: 16px; }

/* ---------- Instalment calculator ---------- */
.calc-head { text-align: center; max-width: 600px; margin: 0 auto 40px; }
.calc-head h1 { font-size: clamp(2.1rem, 6vw, 3rem); font-weight: 400; margin: 10px 0 14px; }
.calc-lead { color: var(--stone); font-weight: 300; margin: 0; }

.calc-wrap {
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
  align-items: start;
  max-width: 940px;
  margin: 0 auto;
}
@media (min-width: 860px) {
  .calc-wrap { grid-template-columns: 1fr 1fr; gap: 40px; }
  /* Keeps the result in view while the inputs are adjusted. */
  .calc-result { position: sticky; top: 96px; }
}

.calc-field { margin-bottom: 22px; }
.calc-field label {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 9px;
}
.calc-label-note { text-transform: none; letter-spacing: 0.04em; opacity: 0.75; }

.calc-input {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  transition: border-color 0.3s ease;
}
.calc-input:focus-within { border-color: var(--gold); }
.calc-input input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--ink);
  padding: 13px 14px;
}
.calc-prefix, .calc-suffix {
  font-size: 0.85rem;
  color: var(--stone);
  padding: 0 15px;
  flex-shrink: 0;
}
.calc-prefix { border-right: 1px solid var(--line); }
.calc-suffix { border-left: 1px solid var(--line); }
.calc-hint { font-size: 0.8rem; color: var(--stone); margin: 7px 0 0; font-weight: 300; }
.calc-error {
  color: #a33; font-size: 0.85rem; margin: 0 0 16px;
  padding: 11px 14px; background: rgba(170,51,51,0.07); border-radius: var(--radius);
}

.calc-result {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 26px;
}
.calc-result-label {
  font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--stone); margin: 0 0 6px;
}
.calc-monthly {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 9vw, 3.4rem);
  font-weight: 500; color: var(--ink);
  margin: 0 0 22px; line-height: 1.1;
}
.calc-breakdown { margin: 0 0 24px; }
.calc-breakdown > div {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.calc-breakdown > div:last-child { border-bottom: none; }
.calc-breakdown dt { font-size: 0.85rem; color: var(--stone); font-weight: 300; }
.calc-breakdown dd { margin: 0; font-weight: 400; color: var(--ink); }
.calc-disclaimer {
  font-size: 0.76rem; line-height: 1.6; color: var(--stone);
  font-weight: 300; margin: 18px 0 0;
}

/* ---------- 前期费用计算器：选项控制项 ---------- */
/* 二选一的分段控制（公民/非公民、首购/非首购）。用真的 radio，
   键盘和螢幕阅读器都正常，视觉上再套一层。 */
.calc-group-label {
  display: block;
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--stone); margin-bottom: 9px;
}
.calc-seg { display: flex; gap: 8px; }
.calc-seg label { flex: 1; min-width: 0; cursor: pointer; }
.calc-seg input { position: absolute; opacity: 0; width: 0; height: 0; }
.calc-seg span {
  display: block; text-align: center;
  padding: 11px 10px; font-size: 0.85rem; font-weight: 300; color: var(--stone);
  background: var(--color-surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .25s ease, color .25s ease, background .25s ease;
}
.calc-seg label:hover span { border-color: var(--gold); }
/* 选中：金色边框 + 深色字，不只靠颜色区分（也有边框粗细与背景变化），
   色盲使用者一样分得出来。 */
.calc-seg input:checked + span {
  border-color: var(--gold); background: var(--cream);
  color: var(--ink); font-weight: 400;
}
.calc-seg input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }

/* 发展商配套：可复选的卡片，不用系统预设的方块 checkbox。
   权重要压过 .calc-field label（那条是 display:block 的大写小标）。 */
/* 外框画在 .calc-pkg-inner 上（input 的兄弟节点），所以用 input:checked ~ ...
   就能切换状态，不需要 :has()。相邻兄弟选择器每个浏览器都支援。 */
.calc-pkg { display: grid; gap: 8px; }
.calc-field .calc-pkg-opt {
  display: block; cursor: pointer; margin: 0; padding: 0;
  text-transform: none; letter-spacing: 0;
}
.calc-pkg-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.calc-pkg-inner {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 15px;
  background: var(--color-surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .25s ease, background .25s ease;
}
.calc-pkg-tick {
  flex: none; width: 22px; height: 22px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--color-surface);
  display: flex; align-items: center; justify-content: center;
  color: #fff; transition: background .2s ease, border-color .2s ease;
}
.calc-pkg-tick svg { width: 13px; height: 13px; opacity: 0; transition: opacity .2s ease; }
.calc-pkg-opt:hover .calc-pkg-inner { border-color: var(--gold); }
.calc-pkg-opt input:checked ~ .calc-pkg-inner { border-color: var(--gold); background: var(--cream); }
.calc-pkg-opt input:checked ~ .calc-pkg-inner .calc-pkg-tick { background: var(--gold-text); border-color: var(--gold-text); }
.calc-pkg-opt input:checked ~ .calc-pkg-inner .calc-pkg-tick svg { opacity: 1; }
.calc-pkg-opt input:focus-visible ~ .calc-pkg-inner { outline: 2px solid var(--gold); outline-offset: 2px; }
.calc-pkg-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.calc-pkg-tx strong { font-size: 0.9rem; font-weight: 500; color: var(--ink); }
.calc-pkg-tx small { font-size: 0.76rem; font-weight: 300; color: var(--stone); }

/* 计算结果里的提示（例如「首购全免已套用」）*/
.calc-note {
  font-size: 0.84rem; line-height: 1.65; font-weight: 300; color: var(--ink);
  background: var(--color-surface);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 12px 14px; margin: 0 0 18px;
}
.calc-note strong { font-weight: 500; }

/* ---------- /guides/ 指南索引页 ---------- */
.guides-grid {
  display: grid; gap: 18px; margin-top: 38px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .guides-grid { grid-template-columns: 1fr 1fr; } }
/* 索引页用满整个 container 宽度（.guide-wide），够宽时排三栏，
   不然卡片会被拉得又宽又扁，右边一大片空白。 */
@media (min-width: 1040px) { .guide-wide .guides-grid { grid-template-columns: repeat(3, 1fr); } }
.guides-card {
  display: flex; flex-direction: column;
  color: inherit; text-decoration: none;
  background: var(--color-surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 26px 24px;
  transition: border-color .3s ease, box-shadow .3s ease, transform .45s cubic-bezier(.16,.7,.24,1);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .guides-card:hover { border-color: var(--gold); box-shadow: var(--shadow-lg); transform: translateY(-4px); }
}
.guides-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* 分类标签 + 阅读时间同一行，卡片顶端 */
.guides-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.guides-meta .guide-tag { margin-bottom: 0; }
.guides-read {
  font-size: 0.7rem; letter-spacing: 0.1em; color: var(--stone); white-space: nowrap;
}
.guides-card h3 {
  font-family: var(--serif); font-size: 1.3rem; font-weight: 500;
  color: var(--ink); margin: 0 0 10px; line-height: 1.32;
}
.guides-card:hover h3 { color: var(--gold-text); }
.guides-card p {
  font-size: 0.9rem; font-weight: 300; color: var(--stone);
  line-height: 1.7; margin: 0 0 18px;
}
/* 推到卡片底部，几张卡的这一行才会对齐 */
.guides-more {
  margin-top: auto;
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-text);
}
.guides-more span { display: inline-block; transition: transform .3s ease; }
.guides-card:hover .guides-more span { transform: translateX(4px); }

.guides-cat {
  font-family: var(--serif); font-size: 1.5rem; font-weight: 500;
  margin: 54px 0 0; padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
/* 分类底下一句话说明这一类在讲什么，读者不用点进去猜 */
.guides-cat-note {
  font-size: 0.92rem; font-weight: 300; color: var(--stone);
  margin: 14px 0 0;
}
.guides-cat-note + .guides-grid { margin-top: 20px; }
/* 第一个分类标题不用离上面那么远 */
.guide-head + .guides-cat { margin-top: 40px; }
/* 工具是拿来用的、不是拿来读的，所以做成横式带图标，跟文章卡分开 */
.guides-tools { display: grid; gap: 14px; margin-top: 20px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .guides-tools { grid-template-columns: 1fr 1fr; } }
/* 索引页的开头文案在满宽版面下会拉成一长条，限一下行长比较好读 */
.guide-wide .guide-head .section-lead { max-width: 620px; }
.guides-tool {
  display: flex; align-items: flex-start; gap: 16px;
  color: inherit; text-decoration: none;
  background: var(--cream);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 22px;
  transition: border-color .3s ease, box-shadow .3s ease;
}
@media (hover: hover) { .guides-tool:hover { border-color: var(--gold); box-shadow: var(--shadow-lg); } }
.guides-tool:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.guides-tool-ic { flex: none; color: var(--gold-text); }
.guides-tool-ic svg { width: 26px; height: 26px; display: block; }
.guides-tool-tx { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.guides-tool-tx strong {
  font-family: var(--serif); font-size: 1.06rem; font-weight: 500; color: var(--ink);
}
.guides-tool:hover .guides-tool-tx strong { color: var(--gold-text); }
.guides-tool-tx span { font-size: 0.85rem; font-weight: 300; color: var(--stone); line-height: 1.6; }

/* 每篇指南底部的「继续读」区块 */
.guides-more-wrap {
  margin-top: 58px; padding-top: 40px; border-top: 1px solid var(--line);
}
.guides-more-wrap h2 {
  font-family: var(--serif); font-size: clamp(1.6rem, 4vw, 2rem);
  font-weight: 500; margin: 8px 0 0;
}
.guides-more-wrap .guides-grid { margin-top: 26px; }
@media (min-width: 900px) { .guides-grid--3 { grid-template-columns: repeat(3, 1fr); } }
/* 这里的卡片只有标签和标题，padding 收一点，不要跟索引页的大卡一样高 */
.guides-more-wrap .guides-card { padding: 22px 22px 20px; }
.guides-more-wrap .guides-card h3 { font-size: 1.15rem; margin-bottom: 16px; }
.guides-more-wrap .guides-meta { margin-bottom: 12px; }
.guides-more-wrap .guide-note { margin-top: 22px; }

.guides-ask {
  margin-top: 54px; padding: 34px 28px; text-align: center;
  background: var(--cream); border-radius: var(--radius);
}
.guides-ask h2 { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; margin: 0 0 8px; }
.guides-ask p { color: var(--stone); font-weight: 300; margin: 0 0 20px; }

/* 「不包含什么」—— 杂费（disbursement）这些要讲清楚，
   客人照着算错预算比看不到还伤。 */
.calc-excl-title {
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--stone); margin: 22px 0 10px;
  padding-top: 18px; border-top: 1px solid var(--line);
}
.calc-excl { list-style: none; margin: 0; padding: 0; }
.calc-excl li {
  position: relative; padding-left: 18px; margin-bottom: 10px;
  font-size: 0.8rem; line-height: 1.6; font-weight: 300; color: var(--stone);
}
.calc-excl li::before {
  content: "\00d7"; position: absolute; left: 2px; top: -1px;
  color: var(--gold-text); font-size: 0.95rem;
}
.calc-excl strong { color: var(--ink); font-weight: 500; }

/* 可负担计算器：算完直接列出真的买得起的建案 */
.af-matches { display: grid; gap: 14px; margin-top: 22px; }
@media (min-width: 560px) { .af-matches { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .af-matches { grid-template-columns: repeat(3, 1fr); } }
.af-match {
  display: flex; flex-direction: column;
  color: inherit; text-decoration: none;
  background: var(--color-surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease, transform .45s cubic-bezier(.16,.7,.24,1);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .af-match:hover { border-color: var(--gold); box-shadow: var(--shadow-lg); transform: translateY(-3px); }
}
.af-match:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.af-match-photo { display: block; overflow: hidden; background: var(--cream); }
.af-match-photo img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  transition: transform .8s cubic-bezier(.16,.7,.24,1);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .af-match:hover .af-match-photo img { transform: scale(1.05); }
}
/* 还没有实景照的建案 —— 沿用站内既有的占位视觉，不要破图 */
.af-match-noimg {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--cream) 0%, var(--line) 100%);
  color: var(--stone); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
}
/* 筛选沿用 projects.html 那一套 .filters / .filter-row，这里只调间距 */
.af-filters { margin: 20px 0 4px; }
.af-matches .empty-state { grid-column: 1 / -1; }
.af-more-wrap { text-align: center; margin: 20px 0 0; }
.af-match-body { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px 16px; }
.af-match-name { font-family: var(--serif); font-size: 1.08rem; font-weight: 500; color: var(--ink); line-height: 1.3; }
.af-match:hover .af-match-name { color: var(--gold-text); }
.af-match-meta { font-size: 0.78rem; color: var(--stone); font-weight: 300; }
.af-match-price { font-size: 0.95rem; color: var(--gold-text); font-weight: 500; margin-top: 4px; }

/* 问责署名 —— 学 Lewis Chong 那套，把执照号码摆出来 */
.calc-accountability {
  font-size: 0.78rem; line-height: 1.7; color: var(--stone); font-weight: 300;
  text-align: center; margin: 46px auto 0; max-width: 640px;
  padding-top: 22px; border-top: 1px solid var(--line);
}
.calc-accountability strong { color: var(--ink); font-weight: 500; }

/* ---------- 导航下拉（Calculator 底下的两个工具）---------- */
.nav-has-sub { position: relative; }
/* 父层是 <button> 不是 <a> —— 点了只展开子选单，不会跳去其中一页。
   外观要跟旁边的导航连结一模一样。 */
.main-nav .nav-sub-btn {
  background: none; border: none; cursor: pointer;
  font-family: inherit;
  font-size: 0.78rem; font-weight: 400;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--stone);
  padding: 6px 2px;
  border-bottom: 1px solid transparent;
  display: inline-flex; align-items: center; gap: 6px;
  position: relative;
}
.main-nav .nav-sub-btn::after {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: -1px;
  height: 1px; background: var(--gold); transition: left .3s ease, right .3s ease;
}
.main-nav .nav-sub-btn:hover, .main-nav .nav-sub-btn.active { color: var(--ink); }
.main-nav .nav-sub-btn:hover::after,
.main-nav .nav-sub-btn.active::after { left: 0; right: 0; }
.main-nav .nav-sub-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* 小箭头，让人一看就知道底下还有东西 */
.nav-sub-caret { width: 9px; height: 9px; flex: none; transition: transform .25s ease; }
.nav-has-sub.open .nav-sub-caret { transform: rotate(180deg); }

/* 权重要压过上面的 .main-nav ul（它有 gap:28px，直接继承下来会把子项目撑开） */
.main-nav .nav-sub {
  display: none;
  position: absolute; top: 100%; left: 0; z-index: 40;
  min-width: 215px;
  flex-direction: column; gap: 0;
  background: var(--color-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 6px 0;
}
.nav-has-sub.open .nav-sub { display: flex; }
.main-nav .nav-sub a {
  display: block; padding: 10px 16px;
  font-size: 0.78rem; letter-spacing: 0.04em; text-transform: none;
  border-bottom: none;
}
.main-nav .nav-sub a::after { display: none; }   /* 盖掉主导航那条底线动画 */
.main-nav .nav-sub a:hover { background: var(--cream); color: var(--ink); border-bottom-color: transparent; }
@media (max-width: 959px) {
  /* 手机版：一样要点了才展开，展开後直接缩排在下面，不浮在上层 */
  .main-nav .nav-sub-btn {
    display: flex; width: 100%; justify-content: space-between;
    padding: 12px 4px; border-bottom: 1px solid var(--color-border);
  }
  .main-nav .nav-sub-btn::after { display: none; }
  .main-nav .nav-sub {
    position: static;
    border: none; box-shadow: none; border-radius: 0;
    padding: 0 0 0 16px; min-width: 0;
  }
  .main-nav .nav-sub a { padding: 11px 4px; border-bottom: 1px solid var(--color-border); }
}

/* 地区页建案卡片：整张可点，价格与规格 */
.proj-card { color: inherit; text-decoration: none; }
.proj-price {
  font-family: var(--serif); font-size: 1.45rem; font-weight: 500;
  color: var(--ink); margin: 2px 0 8px; line-height: 1.2;
}
.proj-meta {
  display: flex; flex-wrap: wrap; gap: 14px;
  font-size: 0.85rem; font-weight: 300; color: var(--stone);
  margin-bottom: 14px;
}
.detail-note {
  font-size: 0.78rem; line-height: 1.6; color: var(--stone);
  font-weight: 300; margin: 16px 0 0;
}

/* 建案卡片的 Status / Facilities / Why consider ——
   目前只有 Botani 页面在用（资料档没填 statusLabel 的建案卡片完全不受影响）。
   Tenure 併进上面既有的 .proj-meta（跟 bed/bath/坪数同一行小字，不再另开一段）。
   Status/Facilities 用金色系小字，跟灰色的 quick facts 拉开一点层次；
   Why consider 加一条细上框线，看起来是「这一组资讯的结论」，
   而不是又一段浮动的文字，视觉上才不会七零八落。 */
.proj-status-row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px;
  font-size: 0.7rem; letter-spacing: 0.04em;
  margin: -4px 0 10px;
}
.proj-status { color: var(--gold-text); font-weight: 500; }
.proj-status-sep { color: var(--line); }
.proj-facilities { color: var(--stone); font-weight: 300; }
.proj-why {
  font-size: 0.78rem; line-height: 1.5; color: var(--stone);
  font-style: italic; font-weight: 300;
  margin: 0 0 14px; padding-top: 10px;
  border-top: 1px solid var(--line);
}
/* Tenure 胶囊：从 .proj-meta 的纯文字 flex-wrap 独立出来，换行也不会看起来
   像断错行的孤儿文字——不管排在同一行或自己另起一行，都清楚是一个标签。
   对比：底色 --cream 配文字 --gold-text，在浅底上是 5.1:1，够看。 */
.proj-tenure {
  display: inline-flex; align-items: center;
  padding: 2px 10px; border-radius: 999px;
  border: 1px solid var(--gold);
  background: var(--cream);
  color: var(--gold-text); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.01em; line-height: 1.5;
}
/* Why consider 前的小标签，跟 tenure 胶囊同一套视觉语言，
   让这句斜体字读起来像有明确身分的「推荐理由」，不是漂浮的文字。 */
.proj-why-tag {
  display: inline-block; margin-right: 7px;
  padding: 1px 8px; border-radius: 999px;
  background: var(--forest); color: var(--ivory);
  font-style: normal; font-weight: 600; font-size: 0.62rem;
  letter-spacing: 0.05em; text-transform: uppercase;
  vertical-align: middle;
}
/* 顶部 Quick Summary 若有 5 项（Botani 专用），桌面版改五栏，
   其他地区页维持原本的四栏，不受影响。 */
@media (min-width: 760px) {
  .area-stats--five { grid-template-columns: repeat(5, 1fr); }
}
/* 手机上 .area-stats 预设两栏，5 项排下来最后一行只剩 1 个孤零零的格子，
   右边留一大块空白。只有 Botani（5 项）会遇到，改单栏堆叠，
   其他地区页（都是 3～4 项，兩栏排得下）不受影响。 */
@media (max-width: 759px) {
  .area-stats--five { grid-template-columns: 1fr; }
}

/* ============ 动态效果 ============
   全部尊重 prefers-reduced-motion：使用者若在系统关掉动画，这里一律不动。 */

/* --- 卷动淡入：纯 CSS 捲动驱动 ---
   用 animation-timeline: view()，元素进入视窗时自己播放。
   关键在於它天生安全：浏览器不支援就整段不套用，元素维持正常显示，
   不可能出现「动画坏掉导致内容永远隐形」。也不需要任何 JavaScript。 */
@keyframes revealIn {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .section-heading, .section-lead, .intro-photo, .intro-copy,
    .listing-card, .proj-card, .area-card, .service-card, .tst,
    .calc-field, .calc-result, .area-head, .area-foot,
    .detail-gallery, .detail-info,
    .area-section, .guide-card, .vs-col {
      animation: revealIn linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 42%;
    }
  }
}

/* --- Hero 背景缓慢推近 --- */
.hero-photo .hero-bg img {
  animation: heroZoom 22s ease-out forwards;
}
@keyframes heroZoom {
  from { transform: scale(1.10); }
  to   { transform: scale(1.00); }
}

/* --- 标题下方金色细线展开（同样只在动画启用时才收起来）--- */
.section-heading h2 { position: relative; display: inline-block; }
.section-heading h2::after {
  content: "";
  position: absolute; left: 0; bottom: -10px;
  height: 2px; width: 56px; background: var(--gold);
  transition: width 1.1s cubic-bezier(.16,.7,.24,1) .2s;
}


/* --- 按钮：滑过时金色由左扫入 --- */
.btn { position: relative; overflow: hidden; z-index: 0; }
.btn::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s cubic-bezier(.16,.7,.24,1);
}
.btn:hover::before { transform: scaleX(1); }
.btn-outline:hover { color: var(--ivory); border-color: var(--ink); }

/* --- 导览列底线由中间展开 --- */
.main-nav a { position: relative; border-bottom-color: transparent !important; }
.main-nav a::after {
  content: "";
  position: absolute; left: 50%; bottom: 0;
  height: 1px; width: 0; background: var(--gold);
  transition: width .35s ease, left .35s ease;
}
.main-nav a:hover::after,
.main-nav a.active::after { width: 100%; left: 0; }

/* --- 卡片浮起 --- */
.listing-card, .proj-card, .service-card {
  transition: transform .5s cubic-bezier(.16,.7,.24,1),
              box-shadow .5s ease, border-color .5s ease;
}
.listing-card:hover, .proj-card:hover { transform: translateY(-6px); }

/* --- 「View details」箭头滑出 --- */
.proj-cta, .listing-card-link { display: inline-block; }
.proj-card:hover .proj-cta,
.listing-card:hover .listing-card-link { color: var(--ink); }

/* --- 计算机金额数字变动时轻微跳动 --- */
.calc-monthly { transition: transform .25s ease; }
.calc-monthly.bump { transform: scale(1.04); }

/* --- WhatsApp 浮动钮呼吸光晕 --- */
/* 注意：这里不要再写 position —— .wa-float 已经是 fixed，
   fixed 本身就是定位基準，::after 用 inset:0 就能对齐。
   之前误加了 position:relative，把 fixed 盖掉，按钮整个掉出画面左下角。 */
.wa-float::after {
  content: "";
  position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, .55);
  animation: waPulse 2.8s ease-out infinite;
}
@keyframes waPulse {
  70%  { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-photo .hero-bg img { animation: none; }
  .section-heading h2::after { transition: none; }
  .btn::before { transition: none; }
  .wa-float::after { animation: none; }
  .listing-card:hover, .proj-card:hover { transform: none; }
}


/* ---------- 麵包屑 ---------- */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px; margin-bottom: 22px;
  font-size: 0.82rem; font-weight: 300;
}
.crumbs a { color: var(--stone); transition: color .3s ease; }
.crumbs a:hover { color: var(--gold-text); }
.crumbs [aria-current="page"] { color: var(--ink); font-weight: 400; }
.crumb-sep { color: var(--line); }

/* ---------- FAQ ---------- */
.faq { max-width: 760px; margin: 56px auto 0; }
.faq-title {
  font-size: clamp(1.6rem, 4.5vw, 2.1rem);
  font-weight: 400; margin: 0 0 22px;
}
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-item summary {
  cursor: pointer; list-style: none;
  padding: 18px 34px 18px 0; position: relative;
  font-size: 1rem; font-weight: 400; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
/* 右侧的 + 号，展开时转成 × */
.faq-item summary::after {
  content: "+";
  position: absolute; right: 4px; top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem; font-weight: 300; color: var(--gold-text);
  transition: transform .3s ease;
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item summary:hover { color: var(--gold-text); }
.faq-a {
  padding: 0 34px 20px 0;
  color: var(--stone); font-weight: 300; line-height: 1.75;
}
.faq-a p { margin: 0; }

/* 详情页：产权 / 交屋日期 */
.detail-spec {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 18px 0 0;
}
.detail-spec > div {
  flex: 1 1 140px;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; background: var(--color-surface);
}
.detail-spec dt {
  font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--stone); margin-bottom: 4px;
}
.detail-spec dd {
  margin: 0; font-size: 0.95rem; font-weight: 400; color: var(--ink);
}

/* ---------- 麵包屑 ---------- */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 0.85rem; font-weight: 300;
  margin-bottom: 22px; padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.crumbs a { color: var(--stone); transition: color .3s ease; }
.crumbs a:hover { color: var(--gold-text); }
.crumbs [aria-current="page"] { color: var(--ink); font-weight: 400; }
.crumb-sep { color: var(--line); }

/* ---------- FAQ ---------- */
.faq { max-width: 760px; margin: 8px auto 0; }
.faq-title {
  font-size: clamp(1.6rem, 4.5vw, 2.1rem); font-weight: 400;
  margin: 0 0 20px;
}
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-item summary {
  cursor: pointer; list-style: none;
  padding: 18px 34px 18px 0; position: relative;
  font-size: 1rem; font-weight: 400; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-size: 1.3rem; font-weight: 300; color: var(--gold);
  transition: transform .3s ease;
}
.faq-item[open] summary::after { content: "–"; }
.faq-item summary:hover { color: var(--gold-text); }
.faq-a { padding: 0 34px 20px 0; }
.faq-a p {
  margin: 0; font-size: 0.94rem; font-weight: 300;
  line-height: 1.75; color: var(--stone);
}


/* 视觉上隐藏，但萤幕阅读器与搜寻引擎读得到 —— header 的品牌名用这个 */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* 跳过导览连结。收在画面上方外，键盘 Tab 第一下才滑下来。
   不用 display:none —— 那样键盘根本聚焦不到，等於没做。
   z-index 要比 .site-header 的 50 高，否则会被固定的表头盖住。 */
.skip-link {
  position: fixed;
  top: -80px; left: 12px;
  z-index: 100;
  background: var(--forest);
  color: var(--ivory);          /* 在 --forest 上是 8.2:1 */
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 14px 22px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  transition: top .18s ease;
}
.skip-link:focus {
  top: 12px;
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none; }
}

/* ---------- 页尾三栏 ---------- */
.foot-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 38px;
  padding: 52px 0 40px;
}
@media (min-width: 860px) {
  .foot-grid {
    grid-template-columns: 2fr 1fr 1.4fr;
    gap: 56px;
    padding: 64px 0 48px;
  }
}

.foot-brand h2 {
  font-family: var(--serif);
  font-size: 1.9rem; font-weight: 500;
  color: var(--ivory); margin: 0 0 6px;
}
.foot-eyebrow {
  font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-light); margin: 0 0 16px;
}
.foot-brand p:not(.foot-eyebrow) {
  font-size: 0.92rem; font-weight: 300; line-height: 1.8;
  color: rgba(247,245,240,.72); max-width: 420px; margin: 0 0 22px;
}

.foot-social { display: flex; gap: 10px; }
.foot-social a {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(247,245,240,.10); color: var(--ivory);
  transition: background .3s ease, color .3s ease;
}
.foot-social a:hover { background: var(--gold); color: var(--ink); }
.foot-social svg { width: 18px; height: 18px; }

.foot-col h3 {
  font-family: var(--sans);
  font-size: 0.74rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-light); margin: 0 0 18px;
}
.foot-col ul { display: grid; gap: 12px; }
.foot-col ul a {
  font-size: 0.92rem; font-weight: 300;
  color: rgba(247,245,240,.78);
  transition: color .3s ease;
}
.foot-col ul a:hover { color: var(--gold-light); }

.foot-item {
  display: flex; gap: 12px; align-items: flex-start;
  margin-bottom: 16px;
  font-size: 0.88rem; font-weight: 300;
  color: rgba(247,245,240,.72);
  transition: color .3s ease;
}
a.foot-item:hover { color: var(--gold-light); }
.foot-item strong { font-weight: 500; color: var(--ivory); }
.foot-icon {
  flex-shrink: 0; width: 22px; height: 22px; margin-top: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--gold-light);
}
.foot-icon--wa { color: #25d366; }
.foot-icon svg { width: 17px; height: 17px; }
.foot-agency {
  font-size: 0.86rem; font-weight: 300;
  color: rgba(247,245,240,.72); margin: 20px 0 0;
}
.foot-agency strong { color: var(--ivory); font-weight: 500; }

.foot-bottom {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center; justify-content: space-between;
  padding: 20px 0 26px;
  border-top: 1px solid rgba(247,245,240,.14);
  font-size: 0.82rem; font-weight: 300;
  color: rgba(247,245,240,.6);
}
.foot-bottom a { color: rgba(247,245,240,.6); transition: color .3s ease; }
.foot-bottom a:hover { color: var(--gold-light); }

/* ---------- 客户见证：轮播 + 影片 + 交屋照 ---------- */
.tst-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
}
@media (min-width: 860px) {
  .tst-wrap { grid-template-columns: 1fr 1.1fr; gap: 40px; }
}
/* grid 子元素预设 min-width:auto，里面的轮播会把栏位撑开，
   结果影片那栏被挤到只剩 200 多 px。设 0 才会照 1fr:1.1fr 分配。 */
.tst-side, .tst-video { min-width: 0; }

/* --- 评价轮播：用原生捲动 + scroll-snap，没有轮播函式库 --- */
.tst-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.tst-track::-webkit-scrollbar { display: none; }
.tst-track > .tst {
  flex: 0 0 100%;
  scroll-snap-align: start;
  margin: 0;
  background: var(--color-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
}
.tst-track > .tst:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.tst-controls {
  display: flex; align-items: center; gap: 14px;
  margin-top: 16px;
}
.tst-controls button {
  width: 38px; height: 38px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--line); border-radius: 50%;
  color: var(--forest); cursor: pointer;
  transition: border-color .3s ease, color .3s ease, opacity .3s ease;
}
.tst-controls button:hover:not(:disabled) { border-color: var(--gold); color: var(--gold-text); }
.tst-controls button:disabled { opacity: .32; cursor: default; }
.tst-controls svg { width: 17px; height: 17px; }

.tst-dots { display: flex; gap: 8px; flex: 1; }
.tst-dots button {
  width: 7px; height: 7px; padding: 0;
  border: none; border-radius: 50%;
  background: var(--line); cursor: pointer;
  transition: background .3s ease, transform .3s ease;
}
.tst-dots button.on { background: var(--gold); transform: scale(1.3); }

/* #guide 本身限宽 860px 方便长文阅读，但业主反映左右留白太多、
   希望轮播这类视觉区块能撑满版面，用「跳出」手法让指定区块暂时
   撑到跟 .container 一样宽（--max-width），其他文字段落不受影响。 */
.guide-fullwidth {
  position: relative; left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -50vw; width: 100vw;
  max-width: var(--max-width); padding: 0 24px;
}
/* 之前这里用 calc(-50vw + 50%) 想在宽度封顶后把区块拉回置中，但那条公式
   算出来的「50%」是相对 #guide 自己（860px）算的，跟 .container 置中用的
   基准（1160px）对不上，结果区块贴到浏览器视窗最左边、右边留一大块空白
   ——业主反馈「资料往左边」就是这个。#guide 跟 .container 两个宽度上限
   固定差 150px（(1160-860)/2），直接用这个常数校正，不再用 vw 混合算。 */
@media (min-width: 1200px) { .guide-fullwidth { left: auto; right: auto; margin-left: -150px; margin-right: -150px; } }
@media (max-width: 619px) { .guide-fullwidth { padding: 0 20px; } }

/* 同一招用在整块色卡面板（dark / cream）上——面板本身的圆角、底色、
   padding 都维持原样（不能连 .guide-fullwidth 的 padding:0 24px 一起套，
   会盖掉 .guide-panel 自己的 32px/28px），只处理宽度跟置中。
   面板变宽以后，纯文字内容（段落/提示框/手风琴）用下面这条规则
   维持原本适合阅读的宽度，卡片网格/表格/照片则不受限，自然撑满。 */
.guide-panel--wide {
  position: relative; left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -50vw; width: 100vw;
  max-width: var(--max-width);
}
/* 同一个修正，理由见上面 .guide-fullwidth 的说明。 */
@media (min-width: 1200px) { .guide-panel--wide { left: auto; right: auto; margin-left: -150px; margin-right: -150px; } }
.guide-panel--wide > p,
.guide-panel--wide > .guide-note,
.guide-panel--wide > details.faq-item {
  max-width: 740px;
}

/* MM2H 页「How I Can Help」轮播——借用首页评价轮播同一套 .tst-track
   机制。卡片是完整的资讯图（本身已经有标题/说明文字）+ 底下重复一次
   标题/简述方便扫读，图片原尺寸显示、不裁切、不额外加 padding，
   文字部分维持卡片原本的内距。 */
.tst--info { padding: 0; overflow: hidden; }
.tst--info img { width: 100%; display: block; margin-bottom: 18px; }
.tst--info h3, .tst--info p { padding: 0 24px; }
.tst--info p { padding-bottom: 24px; }
.tst h3 { margin-top: 0 !important; font-size: 1.05rem !important; }
.tst p { margin-bottom: 0 !important; }

/* --- 影片：先放本机封面，点了才载入 YouTube --- */
.video-facade {
  position: relative; display: block; width: 100%;
  padding: 0; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--ink); cursor: pointer; overflow: hidden;
  aspect-ratio: 16 / 9;
}
.video-facade img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s cubic-bezier(.16,.7,.24,1), opacity .3s ease;
}
.video-facade:hover img { transform: scale(1.04); opacity: .82; }
.video-play {
  position: absolute; inset: 0; margin: auto;
  width: 68px; height: 68px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.92); color: var(--ink);
  box-shadow: 0 6px 26px rgba(0,0,0,.28);
  transition: transform .3s ease, background .3s ease;
}
.video-facade:hover .video-play { transform: scale(1.08); background: #fff; }
.video-play svg { width: 26px; height: 26px; margin-left: 3px; }
.tst-video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
.video-note {
  font-size: 0.82rem; font-weight: 300; color: var(--stone);
  margin: 10px 0 0; text-align: center;
}

/* --- 交屋照片 --- */
.tst-photos-wrap { margin-top: 34px; }
/* 一次看 3 张，其余用滑的 —— 原生 scroll-snap，不用轮播套件 */
.tst-photos {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 2px;
  align-items: flex-start;   /* 不要拉伸，否则高度会回头决定宽度 */
}
.tst-photos::-webkit-scrollbar { display: none; }
.tst-photos > img {
  flex: 0 0 calc((100% - 10px) / 2);
  scroll-snap-align: start;
  /* flex item 预设 min-width:auto —— 配上 aspect-ratio 会用高度反推出最小宽度，
     结果一张图撑掉大半个轨道。归零才会照 flex-basis 走。 */
  min-width: 0;
}
.tst-photos:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
@media (min-width: 620px) { .tst-photos > img { flex-basis: calc((100% - 20px) / 3); } }
@media (min-width: 1000px) { .tst-photos > img { flex-basis: calc((100% - 20px) / 3); } }
.tst-photos img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: var(--radius);
  transition: transform .6s cubic-bezier(.16,.7,.24,1);
}
.tst-photos img:hover { transform: scale(1.04); }

/* ---------- header 搜寻钮 ---------- */
.header-search {
  width: 38px; height: 38px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 50%;
  color: var(--forest);
  transition: border-color .3s ease, color .3s ease;
}
.header-search:hover { border-color: var(--gold); color: var(--gold-text); }
.header-search svg { width: 17px; height: 17px; }

/* ---------- 搜寻 / 筛选列 ---------- */
.filters { margin: 26px 0 28px; }
.filter-search {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--color-surface); padding: 0 16px;
  transition: border-color .3s ease;
}
.filter-search:focus-within { border-color: var(--gold); }
.filter-search svg { width: 19px; height: 19px; color: var(--stone); flex-shrink: 0; }
.filter-search input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font-family: var(--sans); font-size: 1rem; font-weight: 300;
  color: var(--ink); padding: 15px 0;
}
.filter-row {
  /* auto-fit：几个筛选就排几栏，宽度够就一整排，不够自动折行 —— 以后加/减
     筛选条件不用再改这里的栏数 */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin-top: 10px;
}
/* 手机两栏，落单的最后一个拉满整行，才不会右边空一块 */
@media (max-width: 519px) {
  .filter-row select:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.filter-row select {
  width: 100%; appearance: none;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--color-surface); cursor: pointer;
  font-family: var(--sans); font-size: 0.86rem; font-weight: 300; color: var(--ink);
  padding: 12px 32px 12px 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f7670' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 15px;
}
.filter-row select:focus { outline: none; border-color: var(--gold); }
.filter-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 14px;
  font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone);
}
#f-reset {
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold-text);
  border-bottom: 1px solid currentColor; padding: 0 0 2px;
}

/* ---------- 卡片上的比较勾选 ---------- */
.proj-card--pick { position: relative; display: flex; flex-direction: column; }
.proj-card--pick .proj-link { display: flex; flex-direction: column; flex: 1; color: inherit; }
.proj-area { font-size: 0.8rem; color: var(--stone); margin: 0 0 8px; }
.pick {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 20px 16px;
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--stone); cursor: pointer;
  border-top: 1px solid var(--line);
}
.pick input { width: 16px; height: 16px; accent-color: var(--gold); cursor: pointer; }
.pick:hover { color: var(--gold-text); }

/* ---------- 底部比较列 ---------- */
#compare-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: var(--ink); color: var(--ivory);
  box-shadow: 0 -6px 24px rgba(0,0,0,.18);
}
.cbar-inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  justify-content: space-between; padding-top: 12px; padding-bottom: 12px;
}
.cbar-list { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cbar-count {
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-light); margin-right: 4px;
}
.cbar-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(247,245,240,.10); border-radius: 999px;
  padding: 6px 8px 6px 13px; font-size: 0.82rem; font-weight: 300;
}
.cbar-chip button {
  border: 0; background: transparent; color: rgba(247,245,240,.65);
  cursor: pointer; font-size: 1.05rem; line-height: 1; padding: 0 3px;
}
.cbar-chip button:hover { color: #fff; }
.cbar-actions { display: flex; align-items: center; gap: 12px; }
.cbar-clear {
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(247,245,240,.66);
}
.cbar-clear:hover { color: var(--gold-light); }
.cbar-actions .btn { padding: 12px 22px; }
/* 比较列浮在最下面，页尾要留位置，免得挡住最後一行 */
body.has-compare-bar { padding-bottom: 84px; }
body.has-compare-bar .wa-float { bottom: 92px; }

/* ---------- 比较表 ---------- */
.cmp-scroll { overflow-x: auto; }
.cmp-table { width: 100%; border-collapse: collapse; min-width: 520px; }
.cmp-table th, .cmp-table td {
  text-align: left; vertical-align: top;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
  font-size: 0.9rem; font-weight: 300;
}
.cmp-table thead th {
  background: var(--cream); vertical-align: bottom;
  border-bottom: 1px solid var(--line);
}
.cmp-table thead th img {
  width: 100%; max-width: 180px; aspect-ratio: 4/3; object-fit: cover;
  border-radius: var(--radius); margin-bottom: 10px;
}
.cmp-name {
  display: block; font-family: var(--serif); font-size: 1.15rem;
  font-weight: 500; color: var(--ink); margin-bottom: 6px;
}
.cmp-name:hover { color: var(--gold-text); }
.cmp-drop {
  border: 0; background: transparent; cursor: pointer; padding: 0;
  font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--stone);
  border-bottom: 1px solid currentColor;
}
.cmp-drop:hover { color: var(--gold-text); }
.cmp-table tbody th {
  width: 150px; font-weight: 400; color: var(--stone);
  font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.cmp-note { display: block; text-transform: none; letter-spacing: 0; font-size: 0.72rem; opacity: .75; margin-top: 3px; }
.cmp-price { font-family: var(--serif); font-size: 1.2rem; font-weight: 500; color: var(--ink); }
.cmp-ask { color: var(--stone); opacity: .6; }
.cmp-foot { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.cmp-disclaimer { font-size: 0.78rem; font-weight: 300; color: var(--stone); margin-top: 18px; line-height: 1.7; }
.cmp-hint { font-size: 0.9rem; color: var(--stone); font-weight: 300; }

/* ---------- Hero 地区标籤 ---------- */
.hero-areas {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 9px; margin-top: 30px;
}
.hero-areas a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 17px;
  border: 1px solid rgba(247,245,240,.28);
  border-radius: 999px;
  font-size: 0.82rem; font-weight: 300;
  color: rgba(247,245,240,.88);
  backdrop-filter: blur(6px);
  transition: border-color .35s ease, background .35s ease, color .35s ease;
}
.hero-areas a span { opacity: .55; transition: transform .35s ease, opacity .35s ease; }
.hero-areas a:hover {
  border-color: var(--gold-light);
  background: rgba(247,245,240,.10);
  color: #fff;
}
.hero-areas a:hover span { transform: translateX(3px); opacity: 1; }

/* ---------- 详情页：Key Features / Facilities 胶囊 ----------
   两组用同一套结构，只有颜色不同：
   Key Features 是卖点，用金色系比较跳；Facilities 是设施，中性灰底。 */
.pill-group { margin: 24px 0 0; }
.pill-group h2 {
  font-family: var(--sans);
  font-size: 0.72rem; font-weight: 400;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--stone); margin: 0 0 12px;
}
.pill-group ul {
  display: flex; flex-wrap: wrap; gap: 8px;
  list-style: none; margin: 0; padding: 0;
}
.pill-group li {
  font-size: 0.84rem; font-weight: 300;
  border-radius: 999px; padding: 8px 16px;
  transition: border-color .3s ease, background .3s ease;
}
.pill-group--features li {
  color: var(--ink);
  background: rgba(183, 151, 90, .12);
  border: 1px solid rgba(183, 151, 90, .40);
}
.pill-group--facilities li {
  color: var(--forest);
  background: var(--cream);
  border: 1px solid var(--line);
}


/* 照片轮播的控制列 */
.tst-controls--photos { margin-top: 14px; }

/* ── 同地区的自製专页（生成的建案页连回去用）──
   之前专页单向连出去，生成页连不回来，权重和访客都流不回来。 */
.related { margin-top: 60px; }
.related-title {
  font-size: 1.5rem; margin: 0 0 22px;
}
.related-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.related-card {
  display: block; overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.related-card:hover {
  border-color: var(--gold); transform: translateY(-3px);
  box-shadow: 0 14px 34px -22px rgba(40,48,43,.5);
}
.related-card img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block;
}
.related-body { padding: 16px 18px 18px; }
.related-body h3 { font-size: 1.08rem; margin: 0 0 5px; }
.related-body p { font-size: .84rem; color: var(--stone); margin: 0 0 10px; }
.related-link {
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text);
}
@media (max-width: 900px) { .related-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .related-grid { grid-template-columns: 1fr; } }

/* ---------- 商业／工业分类页的询问表单（.cmq） ----------
   分类页不该用「问这个建案」—— 读者还没选定标的。这里先问两件事
   （要什么、预算多少），把答案直接写进 WhatsApp 讯息，省掉第一轮来回。
   只出现在深色 panel 里，所以配色是照深底算的：
   未选取 #e7e2d6 on rgba(255,255,255,.06) ≈ 12.8:1；
   选取後 #26302b on --gold-light #e0cba4 ≈ 9.4:1。两者都远高於 4.5:1。 */
/* ---------- 语言切换钮 ----------
   摆在搜寻图示左边。刻意做得小而安静 —— 它是给需要的人用的，
   不是主要动线；SEO 靠的是 hreflang，不是这颗钮。
   #61685f on --ivory = 5.3:1；hover 时 --forest on --cream = 8.9:1。 */
.lang-switch {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 30px; padding: 0 9px; margin-right: 4px;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: .72rem; letter-spacing: .06em; color: #61685f;
  text-decoration: none; white-space: nowrap;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.lang-switch:hover { border-color: var(--gold); color: var(--forest); background: var(--cream); }
.lang-switch:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* 中文页的正文行高放宽一点 —— 中文没有词间空白，行距太紧会糊成一片 */
html[lang="zh-Hans"] body { line-height: 1.85; }
html[lang="zh-Hans"] p, html[lang="zh-Hans"] li { letter-spacing: .01em; }
@media (prefers-reduced-motion: reduce) { .lang-switch { transition: none; } }

.cmq { margin: 22px 0 6px; }
.cmq-set { border: 0; padding: 0; margin: 0 0 18px; }
.cmq-set legend {
  padding: 0; margin-bottom: 10px;
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-light);
}
.cmq-chip { display: inline-block; margin: 0 8px 8px 0; }
/* 视觉上藏起 radio，但键盘与读屏软体仍抓得到 —— 不能用 display:none */
.cmq-chip input {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0;
}
.cmq-chip span {
  display: inline-block; padding: 9px 16px; border-radius: 999px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.22);
  color: #e7e2d6; font-size: .84rem; line-height: 1.2; cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.cmq-chip span:hover { border-color: var(--gold-light); }
.cmq-chip input:checked + span {
  background: var(--gold-light); border-color: var(--gold-light);
  color: var(--ink); font-weight: 600;
}
.cmq-chip input:focus-visible + span { outline: 2px solid var(--gold-light); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .cmq-chip span { transition: none; } }

/* 页尾的微信 —— 它是 <button> 不是 <a>（微信没有可点的连结），
   所以要把浏览器预设的按钮样式清掉，让它跟旁边的 WhatsApp／Email 长得一样。 */
.foot-wechat {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  width: 100%;
  cursor: pointer;
}
.foot-copy {
  display: block;
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  /* .foot-item 本身已经是 rgba(...,.72)，这里再乘一次 opacity。
     .62 会让实际对比度掉到 3.78:1，11.5px 的字要 4.5:1 —— 用 .80（5.22:1）。 */
  opacity: .80;
  margin-top: 2px;
}
.foot-wechat:hover .foot-copy { opacity: 1; }
.foot-wechat:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* 微信 CTA。用站上的配色而不是微信品牌绿 —— #07C160 配白字只有 2.38:1，
   过不了 4.5:1（按钮字 12.8px）。森林绿配 ivory 是 8.22:1。
   WhatsApp 钮是金色，两个摆在一起分得开，也都还在品牌里。 */
.btn-wechat {
  background: var(--forest);
  color: var(--ivory);
}
.btn-wechat:hover { background: var(--ink); color: #fff; }
.btn-wechat.is-copied { background: var(--gold); color: var(--ink); }
/* .btn:hover::before 会把 --ink 的覆盖层滑过按钮。点完之後滑鼠还停在钮上，
   ink 的字压在 ink 的覆盖层上＝完全看不见。复制成功这一下把覆盖层收掉。 */
.btn-wechat.is-copied::before { transform: scaleX(0); }
.btn-wechat .wx-label { white-space: nowrap; }
/* 两个钮并排时给一点间距 —— .detail-cta 之类的容器本来就有 gap，
   这里只处理没有 gap 的父层（例如 .area-foot）。 */
.area-foot .btn-wechat, .price-cta .btn-wechat { margin-left: 10px; }
@media (max-width: 480px) {
  .area-foot .btn-wechat, .price-cta .btn-wechat { margin-left: 0; margin-top: 10px; }
}