/* ============================================================
   Beyond Realty — shared site styles
   v91 palette (2026-09-08) — espresso brown + champagne gold

   Surfaces : --surface-0 #2A1D14 (deepest: topbar/header/hero/footer/emphasis bands)
              --surface-1 #3B2A1E (main body)
              --surface-2 #4A3628 (alternating section, restores rhythm)
              --surface-card #FAF7F1 (warm white cards)

   Gold     : --gold-deep #8A6D1F  -> carries white text, 4.90:1 AA
              --gold-lt   #D9B36A  -> text / hairlines on brown, 6.91:1 AA
              --gold      #F3C88B  -> bright highlight text on brown, 8.75:1 AAA

   Semantic : --success #1B7A35 (on white 5.41:1 AA)
              --danger  #A32B2B (on white 7.15:1 AAA)
              --info    #8FB4D9 (on brown 6.31:1 AA)

   !! --blue and --red are LEGACY ALIASES, kept only so old rules
      keep resolving. Before v91 both were #B08A2E, which silently
      broke every two-colour contrast on the site (pricing ✓ vs ✗,
      the LA vs TX state dots, and all 8 nth-child(even) alternations)
      and rendered the EMERGENCY and ERROR states gold instead of red.
      Do not add new usages — use --gold-deep / --success / --danger / --info.
   ============================================================ */
:root{
  --navy:#0A2A6B;
  --blue:#B08A2E; /* LEGACY ALIAS — use --gold-deep or --success */
  --red:#B08A2E;  /* LEGACY ALIAS — use --gold-deep or --danger */
  --gold:#F3C88B;
  --gold-deep:#7F641C; /* v91: was #B08A2E — white text 3.22:1 FAIL -> 5.61:1 AA.
                          Chosen over #8A6D1F (4.90:1) because admin.html runs the
                          legacy cream theme, where #8A6D1F only reaches 4.46:1 on
                          small .kicker / .map-note text. #7F641C clears AA on
                          cream 5.11:1, cream-2 4.68:1 and white 5.61:1.
                          NOTE: do NOT use on brown surfaces — 2.4:1, invisible.
                          Brown-surface gold is --gold-lt. */
  --gold-lt:#D9B36A;
  --gold-pale:#E8D5AE;  /* v91: LA state dot — 9.48:1 on brown */
  --cream:#F7F4EC;
  --cream-2:#EFEAE0;
  --ink:#1A1A1A;
  --ink-soft:#4A4A46;
  --line:rgba(10,42,107,.18);
  /* v91: form-field borders + hairline rules. --line at .18 composites to
     1.42:1 on the warm card, and even .45 only reaches 2.64:1, both below the
     3:1 WCAG 1.4.11 threshold for the boundary of an interactive component.
     .55 composites to 3.43:1. */
  --line-strong:rgba(10,42,107,.55);
  /* v179：中文标题/正文改用系统字体栈（Songti/SimSun/PingFang/YaHei…），不再加载 Noto SC 网页字体。
     中文系统字体首屏即有、无 swap，CLS 保持 0；拉丁字符仍走 Fraunces/Archivo + 度量匹配兜底。 */
  --serif:'Fraunces','Fraunces-fallback','Songti SC','Source Han Serif SC','Noto Serif CJK SC','STSong','SimSun',Georgia,'Times New Roman',serif;
  --sans:'Archivo','Archivo-fallback','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Source Han Sans SC','Noto Sans CJK SC','Helvetica Neue',Arial,sans-serif;
  --shadow:0 24px 60px -30px rgba(26,14,5,.45); /* v91: was navy rgba(10,42,107,.35), clashed with brown theme */

  /* ---- v91 semantic tokens ---- */
  --success:#1B7A35;
  --danger:#A32B2B;
  --danger-bg:#FBDADA;
  --info:#8FB4D9;
  --info-deep:#3E7CB8;  /* v91: TX state dot — 3.11:1 on brown, 3.05:1 vs --gold-pale */

  /* ---- v91 surface-aware accent ------------------------------------
     Replaces every remaining var(--accent) / var(--blue) usage. Both legacy
     aliases were pinned to #B08A2E, which could not work on both surfaces:
     on brown it was a mediocre 4.25:1, on white cards only 3.22:1 FAIL.

     This follows the same pattern already used for --ink / --navy:
       :root default      -> deep gold, correct on CREAM and on WHITE
                             (admin.html loads style.css alone and runs the
                              cream theme, so the default must suit cream:
                              #7F641C = 5.11:1 AA)
       app.css body       -> overrides to gold-lt for BROWN surfaces (6.91:1 AA)
       app.css card reset -> overrides back to deep gold inside white cards
                             (5.61:1 AA)

     !! Same trap as the existing reset list: if you add a new white-card
        class, you MUST add it to the reset selector block in app.css, or it
        inherits gold-lt and the accent becomes invisible (1.98:1). */
  --accent:#7F641C;

  /* --gold-brand is the brighter heritage gold, reserved for DECORATIVE
     stripes on white cards where it must pair with --gold-deep to create a
     visible alternation. #B08A2E on white = 3.22:1, which clears the 3:1
     WCAG 1.4.11 threshold for non-text graphics but NOT the 4.5:1 text
     threshold — so never use it for text or as a background behind white
     text. Before v91 every alternation paired #B08A2E with #B08A2E, so all
     of them rendered as a single flat colour. */
  --gold-brand:#B08A2E;

  /* ---- v91 surface scale ---- */
  --brown:#3B2A1E;
  --surface-0:#2A1D14;
  --surface-1:#3B2A1E;
  --surface-2:#4A3628;
  --surface-card:#FAF7F1;
  --surface-input:#FFFFFF; /* pure white kept ONLY for editable fields */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--cream);
  line-height:1.38;
  -webkit-font-smoothing:antialiased;
}

p{margin:0 0 .3rem}
p:last-child{margin-bottom:0}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:#6E5517;color:#fff} /* v91: white on gold was 3.22:1 FAIL -> 7.06:1 AAA */

.wrap{width:min(1160px,92%);margin:0 auto}
.serif{font-family:var(--serif)}

/* ---------- small caps kicker ---------- */
.kicker{
  font-size:.78rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold-deep);font-weight:700;
  display:flex;align-items:center;gap:14px;
}
.kicker::before{content:"";width:34px;height:2px;background:var(--gold-deep)}

/* ---------- top bar ---------- */
.topbar{
  background:linear-gradient(120deg,#8A6D1F,#5C4714);color:rgba(255,255,255,.85);
  font-size:.8rem;letter-spacing:.06em;
}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;padding:.45rem 0;gap:1rem;flex-wrap:wrap}
.topbar a:hover{color:#fff}
.topbar .emergency{color:#F3C88B;font-weight:600}

/* ---------- header ---------- */
header.site{
  position:sticky;top:0;z-index:50;
  background:rgba(247,244,236,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.55rem 0}
.brand{display:flex;align-items:center;gap:14px}
.brand img{height:58px;width:auto}
.brand .t{line-height:1.2}
.brand .t b{font-family:var(--serif);font-size:1.22rem;color:var(--navy);letter-spacing:.02em;display:block}
.brand .t span{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);font-weight:700}
nav.main{display:flex;gap:1.6rem;align-items:center;font-size:.92rem;font-weight:600}
nav.main a{color:var(--ink-soft);padding:.3rem 0;border-bottom:2px solid transparent;transition:.25s;white-space:nowrap} /* v119: nowrap — 窄窗口下「中文」等项被 flex 压缩导致换行(中文两字上下堆叠) */
nav.main a:hover{color:var(--navy);border-bottom-color:var(--accent)}
.lang-switch{
  border:1.5px solid var(--navy);color:var(--navy);
  padding:.35rem .9rem;font-weight:700;font-size:.8rem;letter-spacing:.08em;
  transition:.25s;white-space:nowrap;flex-shrink:0; /* v119: 窄窗口不被 flex 压缩换行 */
}
.lang-switch:hover{background:var(--gold-deep);color:#fff} /* v91: 4.90:1 AA */
/* v91 — .btn used navy on a #D9B36A->#B08A2E gradient: 6.81:1 at the light end
   but only 4.19:1 at the dark end, and the hover state flipped to white on gold
   (3.22:1 FAIL; white on the #D9B36A end was 1.98:1, the worst on the site).
   A single text colour cannot satisfy both ends of a light-to-dark gradient, so
   the gradient now stays bright and the text goes espresso — the "foil stamping"
   treatment, 8.26:1 AAA at the light end and 5.08:1 AA at the dark end. */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  background:linear-gradient(135deg,#D9B36A 0%,#B08A2E 100%);color:#2A1D14;font-weight:700;
  padding:.72rem 1.5rem;letter-spacing:.04em;
  transition:.25s;border:none;cursor:pointer;font-size:.95rem;
}
.btn:hover{background:var(--gold-deep);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow)}
.btn.ghost{background:transparent;color:var(--navy);border:2px solid var(--navy)}
.btn.ghost:hover{background:var(--gold-deep);color:#fff}
.btn.light{background:var(--surface-input);color:var(--navy)}
.btn.light:hover{background:var(--gold-deep);color:#fff} /* v91: was var(--accent)+white = 3.22:1 FAIL */

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:#081226 url("../assets/img/brand-hero.webp") center 35%/cover no-repeat;color:#fff}
.hero::before{ /* dark veil + gold diagonal motif */
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(115deg,transparent 62%,rgba(176,138,46,.5) 62%,rgba(176,138,46,.5) 64.5%,transparent 64.5%),
    linear-gradient(90deg,rgba(8,18,38,.92) 0%,rgba(8,18,38,.78) 46%,rgba(8,18,38,.35) 100%),
    radial-gradient(1200px 600px at 85% -10%,rgba(176,138,46,.35),transparent 60%);
}
.hero::after{ /* grain */
  content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* v93: hero shortened — wrap padding 2.2/2.4rem -> 1.3/1.45rem, h1 clamp
   2rem/4vw/3.2rem -> 1.7rem/3.1vw/2.55rem, lead 1rem -> .94rem. Only the two
   homepages (en/index.html, zh/index.html) use .hero, so no other page moves. */
/* v114: 1.15fr/.85fr -> minmax(0,…)。fr 轨道的最小值是 min-content，
   .hero .svc 用了 white-space:nowrap，min-content 高达 ~453px，在手机上把整个
   轨道撑到 453px（容器只有 359px），超出的部分被 .hero 的 overflow:hidden 裁掉，
   标题/徽章右侧看不到。minmax(0,…) 让轨道可以收缩到容器宽度。 */
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:1.8rem;align-items:center;padding:1.3rem 0 1.45rem}
.hero .wrap>*{min-width:0}
.hero h1{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(1.7rem,3.1vw,2.55rem);line-height:1.06;
  letter-spacing:-.01em;margin:.4rem 0 .35rem;
}
.hero h1 em{font-style:italic;color:#F3C88B}
.hero p.lead{font-size:.94rem;color:rgba(255,255,255,.82);max-width:34rem;margin-bottom:.8rem;line-height:1.4}
.hero .cta{display:flex;gap:.8rem;flex-wrap:wrap}
.hero .svc{display:flex;align-items:center;flex-wrap:nowrap;white-space:nowrap;overflow-x:auto;gap:0;margin:.35rem 0 1rem}
.hero .svc a{color:#F3C88B;font-size:.98rem;font-weight:600;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px;padding:.3rem .55rem;white-space:nowrap}
.hero .svc a:hover{color:#fff}
.hero .svc .sep{color:rgba(243,200,139,.45);font-size:.8rem}
.hero .badges{display:flex;gap:1.2rem;margin-top:.55rem;flex-wrap:wrap}
.hero .badges div{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.75);display:flex;align-items:center;gap:.6rem}
.hero .badges div::before{content:"";width:8px;height:8px;background:var(--gold);transform:rotate(45deg)}
.hero .figure{position:relative}
.hero .figure{position:relative;height:300px;border:1px solid rgba(255,255,255,.25);box-shadow:var(--shadow);overflow:hidden;background:#8A6D1F} /* v93: was 440px */
.hero .figure::before{
  content:"";position:absolute;inset:-16px 16px 16px -16px;
  border:2px solid rgba(243,200,139,.5);z-index:-1;
}
.hero .figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease}
.hero .figure img.on{opacity:1}
.hero .figure .cap{
  position:absolute;left:0;right:0;bottom:0;padding:1.15rem 1.15rem .65rem; /* v93: was 1.6rem 1.4rem .9rem */
  background:linear-gradient(transparent,rgba(10,42,107,.92));
  color:#fff;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
}
.hero .figure .cap .dots{display:flex;gap:.45rem}
.hero .figure .cap .dots i{width:9px;height:9px;background:rgba(255,255,255,.4);transform:rotate(45deg);cursor:pointer;transition:.25s}
.hero .figure .cap .dots i.on{background:#F3C88B}

/* ---------- sections ---------- */
section{padding:1.5rem 0}
.sec-head{max-width:46rem;margin-bottom:.7rem}
.sec-head h2{font-family:var(--serif);font-size:clamp(1.5rem,2.6vw,2.05rem);font-weight:600;line-height:1.18;margin-top:.25rem;color:var(--navy)}
.sec-head p{color:var(--ink-soft);margin-top:.3rem;font-size:.96rem;line-height:1.45}

/* alternating backgrounds */
.alt{background:var(--surface-card)}
.alt-2{background:var(--cream-2)}

/* ---------- service cards ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.card{
  background:var(--surface-card);border:1px solid var(--line);padding:.9rem .95rem;
  position:relative;transition:.3s;display:flex;flex-direction:column;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.card .num{
  /* v91: was var(--cream-2) #EFEAE0 on white = 1.20:1, i.e. invisible.
     Now a perceptible champagne watermark that does not compete with body text. */
  font-family:var(--serif);font-size:2.4rem;line-height:1;color:rgba(138,109,31,.26);
  position:absolute;top:.8rem;right:1.1rem;font-weight:600;
}
.card .icon{font-size:1.5rem;margin-bottom:.45rem}
.card h3{font-family:var(--serif);color:var(--navy);font-size:1.28rem;font-weight:600;margin-bottom:.3rem}
.card p{color:var(--ink-soft);font-size:.94rem;flex:1;line-height:1.42}
.card ul{margin-top:.5rem;list-style:none}
.card ul li{padding:.16rem 0 .16rem 1.3rem;position:relative;font-size:.9rem;color:var(--ink-soft)}
.card ul li::before{content:"";position:absolute;left:0;top:.78rem;width:7px;height:7px;background:var(--gold-deep);transform:rotate(45deg)} /* v91: --red */

/* ---------- management split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;align-items:center}
.split .figure{position:relative}
.split .figure img{box-shadow:var(--shadow)}
.split .figure .tag{
  /* v91: white label on gold badge — --red/#B08A2E gave 3.22:1, gold-deep gives 4.90:1 AA */
  position:absolute;left:-14px;bottom:26px;background:var(--gold-deep);color:#fff;
  padding:.55rem 1rem;font-weight:700;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;
}
.checks{list-style:none;margin-top:.5rem}
.checks li{display:flex;gap:.7rem;padding:.22rem 0;border-bottom:1px dashed var(--line);color:var(--ink-soft)}
.checks li b{color:var(--navy)}
.checks .mk{flex:0 0 auto;width:24px;height:24px;border:2px solid var(--gold-lt);color:var(--gold-lt);display:grid;place-items:center;font-size:.78rem;font-weight:800;margin-top:.1rem} /* v91: sits on brown, --red gave 4.25:1 */

/* repair flow */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin-top:.6rem}
.flow .step{
  background:var(--surface-card);border-top:4px solid var(--gold-deep);padding:.6rem .75rem;
  position:relative;counter-increment:step;
}
.flow .step:nth-child(even){border-top-color:var(--gold-brand)} /* v91: decorative stripe, --accent now equals --gold-deep inside white cards so the alternation would be flat again */
.flow .step b{display:block;font-family:var(--serif);color:#0A2A6B;font-size:1.05rem;margin-bottom:.15rem}
.flow .step span{font-size:.85rem;color:#0A2A6B}
.flow .step i{
  /* v91: was rgba(10,42,107,.18) = 1.42:1, invisible. Same treatment as .card .num. */
  font-style:normal;font-family:var(--serif);font-size:1.4rem;color:rgba(127,100,28,.26);
  position:absolute;top:.5rem;right:.9rem;font-weight:700;
}
.quote{
  margin-top:.8rem;padding:.8rem 1.1rem;background:linear-gradient(120deg,#8A6D1F,#5C4714);color:rgba(255,255,255,.95);
  font-family:var(--serif);font-size:1.05rem;font-style:italic;line-height:1.4;
  border-left:6px solid var(--gold); /* v91: was var(--accent); admin.html loads style.css alone, so this 6px rule sat at #7F641C on the #8A6D1F gradient = 1.15:1, invisible. --gold gives 3.59:1 here and 8.75:1 AAA on the brown the front-end actually renders. */
}

/* ---------- stats band ---------- */
.stats{background:linear-gradient(120deg,#8A6D1F,#5C4714);color:#fff;padding:1.1rem 0;position:relative;overflow:hidden}
.stats::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 78%,rgba(90,70,15,.55) 78%,rgba(90,70,15,.55) 80%,transparent 80%)}
.stats .wrap{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;text-align:center}
.stats b{font-family:var(--serif);font-size:2rem;font-weight:600;display:block;color:#F3C88B;line-height:1.05}
.stats span{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.92)} /* v91: .72 = 3.76:1 on the light gradient end, FAIL at this .8rem size; .92 = 5.01:1 AA */

/* ---------- broker profile ---------- */
.broker{display:grid;grid-template-columns:.9fr 1.1fr;gap:1.8rem;align-items:center}
.broker .figure img{border:1px solid var(--line);box-shadow:var(--shadow);background:var(--surface-card)}
.broker h2{font-family:var(--serif);font-size:clamp(1.9rem,3vw,2.5rem);color:var(--navy);font-weight:600;margin:.15rem 0 .2rem;line-height:1.12}
.broker .role{color:var(--accent);font-weight:700;letter-spacing:.18em;text-transform:uppercase;font-size:.8rem}
.broker p{color:var(--ink-soft);margin-top:.6rem}
.broker .lic{
  margin-top:.9rem;display:inline-block;border:1.5px solid var(--navy);
  padding:.4rem .9rem;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--navy);
}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:1.4rem}
.c-item{display:flex;gap:.9rem;padding:.55rem 0;border-bottom:1px solid var(--line)}
.c-item .ic{flex:0 0 auto;width:42px;height:42px;background:var(--gold-deep);color:#fff;display:grid;place-items:center;font-size:1.05rem}
.c-item b{display:block;color:var(--navy);font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:.1rem}
.c-item a:hover{color:var(--accent)}
form.inq{background:var(--surface-card);border:1px solid var(--line);padding:1.1rem}
form.inq h3{font-family:var(--serif);color:var(--navy);font-size:1.5rem;margin-bottom:.2rem}
form.inq>p{font-size:.9rem;color:var(--ink-soft);margin-bottom:.9rem}
.field{margin-bottom:.55rem}
.field label{display:block;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);margin-bottom:.25rem}
.field input,.field select,.field textarea{
  width:100%;padding:.55rem .8rem;border:1.5px solid var(--line-strong); /* v91: was --line, 1.42:1 */
  background:var(--cream);font-family:var(--sans);font-size:.95rem;color:var(--ink);
  transition:.2s;
}
/* v91: focus state keeps PURE white (--surface-input), not the warm card tone.
   The field rests on var(--cream), so the jump to pure white on focus is what
   signals "this is the field you are editing". Warm white would flatten that cue. */
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--navy);background:var(--surface-input)}
.field textarea{min-height:90px;resize:vertical}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.form-note{font-size:.78rem;color:var(--ink-soft);margin-top:.5rem}

/* ---------- footer ---------- */
footer.site{background:linear-gradient(120deg,#8A6D1F,#5C4714);color:rgba(255,255,255,.92);padding:1.2rem 0 .9rem;position:relative;overflow:hidden} /* v91: .8 = 3.75:1 on the light gradient end */
footer.site::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 88%,rgba(176,138,46,.6) 88%,rgba(176,138,46,.6) 90%,transparent 90%)}
footer.site .wrap{position:relative}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:1.4rem;padding-bottom:1rem;border-bottom:1px solid rgba(255,255,255,.15)}
.foot-grid img{height:58px;width:auto;margin-bottom:.6rem;border:1px solid rgba(243,200,139,.35);box-shadow:0 8px 24px -12px rgba(0,0,0,.5)}
.foot-slogan{font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:.3rem 0 0}
footer.site h4{color:#fff;font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:.6rem}
footer.site ul{list-style:none}
footer.site li{padding:.16rem 0;font-size:.92rem}
footer.site a:hover{color:#F3C88B}
.foot-base{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-top:.9rem;font-size:.8rem;color:rgba(255,255,255,.55)}

/* ---------- footer: broker social & contact ---------- */
.foot-social{margin-top:1rem;padding-top:.9rem;border-top:1px solid rgba(255,255,255,.15)}
.foot-social h4{margin-bottom:.55rem}
.fs-list{display:flex;flex-wrap:wrap;gap:.1rem 1.15rem;list-style:none}
.fs-list li{padding:.16rem 0;font-size:.85rem;line-height:1.5}
.fs-list a,.fs-list .fs-copy{color:rgba(255,255,255,.88);text-decoration:none}
.fs-list a:hover,.fs-list .fs-copy:hover{color:#F3C88B}
.fs-list .fs-copy{background:none;border:0;border-bottom:1px dashed rgba(243,200,139,.5);padding:0;font:inherit;font-size:.85rem;color:rgba(255,255,255,.88);cursor:pointer}
.fs-hint{font-size:.72rem;color:rgba(255,255,255,.5);margin:.5rem 0 0}
#fs-toast{position:fixed;left:50%;bottom:2rem;transform:translateX(-50%);background:#3B2A1E;color:#fff;padding:.6rem 1.05rem;font-size:.85rem;border:1px solid rgba(243,200,139,.45);opacity:0;pointer-events:none;transition:opacity .25s;z-index:9999}
#fs-toast.on{opacity:1}
@media (max-width:560px){.fs-list{gap:.2rem .8rem}}

/* ---------- reveal animations ---------- */
.rv{transition:opacity .7s ease,transform .7s ease}
/* Pre-reveal hidden state is applied per-element by JS (assets/nav.js revealOnScroll).
   If JS fails or browser is old, elements stay visible — content can never disappear. */
.rv.pre{opacity:0;transform:translateY(26px)}
.rv.pre.in{opacity:1;transform:none}

/* ---------- values row (why choose us) ---------- */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-top:.6rem}
.value{background:var(--surface-card);border:1px solid var(--line);padding:.75rem .85rem;text-align:center;transition:.3s}
.value:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.value .ic{width:42px;height:42px;margin:0 auto .45rem;background:var(--gold-deep);color:#fff;display:grid;place-items:center;font-size:1.3rem;transform:rotate(45deg)}
.value .ic span{transform:rotate(-45deg)}
.value h3{font-family:var(--serif);color:var(--navy);font-size:1.14rem;font-weight:600;margin-bottom:.2rem}
.value p{font-size:.9rem;color:var(--ink-soft);line-height:1.42}

/* ---------- two-column management services list ---------- */
.cols-2{columns:2;column-gap:2rem;margin-top:.6rem}
.cols-2 li{
  list-style:none;padding:.2rem 0 .2rem 1.5rem;position:relative;
  color:var(--ink-soft);font-size:.95rem;border-bottom:1px dashed var(--line);
  break-inside:avoid;
}
/* v91: .cols-2 is NOT in the white-card reset list — it sits directly on brown,
   so --gold-deep (#7F641C) would be 2.4:1 and invisible. Brown-surface gold is
   --gold-lt / --gold-pale. The old --blue/--red pair were both #B08A2E, so this
   alternation never rendered. */
.cols-2 li::before{content:"";position:absolute;left:0;top:.78rem;width:8px;height:8px;background:var(--gold-lt);transform:rotate(45deg)}
.cols-2 li:nth-child(even)::before{background:var(--gold-pale)}

/* ---------- mission band ---------- */
.mission{background:linear-gradient(120deg,#8A6D1F,#5C4714);color:#fff;padding:1.4rem 0;position:relative;overflow:hidden}
.mission::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 80%,rgba(90,70,15,.5) 80%,rgba(90,70,15,.5) 82%,transparent 82%)}
.mission .wrap{position:relative;text-align:center;max-width:52rem}
.mission .kicker{justify-content:center}
.mission .kicker::after{content:"";width:34px;height:2px;background:var(--accent)}
.mission blockquote{font-family:var(--serif);font-size:clamp(1.15rem,2vw,1.5rem);font-style:italic;line-height:1.38;margin-top:.6rem;color:rgba(255,255,255,.94)}
.mission cite{display:block;margin-top:.5rem;font-style:normal;font-size:.8rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}

/* ---------- tech advantage cards ---------- */
.tech-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-top:.6rem}
.tech{background:var(--surface-card);border-left:4px solid var(--gold-deep);padding:.6rem .85rem;box-shadow:0 10px 30px -22px rgba(10,42,107,.35)}
.tech:nth-child(even){border-left-color:var(--gold-brand)} /* v91: decorative stripe alternation */
.tech b{display:block;font-family:var(--serif);color:var(--navy);font-size:1.05rem;margin-bottom:.2rem}
.tech span{font-size:.87rem;color:var(--ink-soft)}

/* ---------- rentals ---------- */
.rental-cta{
  margin-top:1.4rem;background:linear-gradient(120deg,#8A6D1F,#5C4714);
  color:#fff;padding:1.2rem 1.4rem;display:flex;align-items:center;justify-content:space-between;
  gap:1.4rem;flex-wrap:wrap;position:relative;overflow:hidden;
}
.rental-cta::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 82%,rgba(90,70,15,.55) 82%,rgba(90,70,15,.55) 84%,transparent 84%)}
.rental-cta .t{position:relative}
.rental-cta h3{font-family:var(--serif);font-size:1.55rem;font-weight:600;margin-bottom:.25rem}
.rental-cta p{color:rgba(255,255,255,.92);font-size:.98rem} /* v91: .8 = 4.25:1 on the light gradient end */
.rental-cta .btn{position:relative}

/* ---------- team members ---------- */
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:.8rem;margin-top:.6rem}
.member{background:var(--surface-card);border:1px solid var(--line);padding:.9rem .95rem;transition:.3s;display:flex;gap:1rem}
.member:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.member .avatar{
  flex:0 0 auto;width:58px;height:58px;background:var(--gold-deep);color:#fff;
  display:grid;place-items:center;font-family:var(--serif);font-size:1.4rem;font-weight:600;
}
.member:nth-child(even) .avatar{background:var(--gold-brand)} /* v91: was #8A6D1F, only 1.15:1 from --gold-deep so the alternation read as flat; gold-brand is 1.74:1 apart. White text on it is 3.22:1, but this avatar holds only initials at 1.4rem/600 serif — large text, 3:1 threshold. */
.member h3{font-family:var(--serif);color:var(--navy);font-size:1.24rem;font-weight:600;line-height:1.2}
.member .role{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:700;margin:.1rem 0 .3rem}
.member .meta{font-size:.8rem;color:var(--ink-soft);margin-bottom:.35rem}
.member .meta b{color:var(--navy)}
.member p{font-size:.88rem;color:var(--ink-soft);line-height:1.42}

/* ---------- areas we serve + map ---------- */
.map-frame{position:relative;background:var(--surface-card);border:1px solid var(--line);padding:8px;margin-top:.8rem}
.map-frame iframe{width:100%;height:340px;border:0;display:block;filter:saturate(.9)}
.map-note{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;padding:.5rem .4rem .2rem;font-size:.8rem;color:var(--ink-soft)}
.map-note a{color:var(--accent);font-weight:700}
.chip-groups{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:.6rem}
.chip-group h3{font-family:var(--serif);color:var(--navy);font-size:1.3rem;font-weight:600;margin-bottom:.5rem;display:flex;align-items:center;gap:.6rem}
/* v91 — LA vs TX dots were both #B08A2E, so the state distinction never rendered.
   First attempt used --gold-lt + --info, but those are only 1.09:1 apart.
   WCAG 1.4.1 wants >=3:1 between adjacent non-text elements: pale gold vs deep
   blue gives 3.05:1 mutual, 9.48:1 and 3.11:1 on brown respectively. */
.chip-group h3 .dot{width:10px;height:10px;transform:rotate(45deg);background:var(--gold-pale);display:inline-block}
.chip-group.tx h3 .dot{background:var(--info-deep)}
.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chip{background:var(--surface-card);border:1px solid var(--line);padding:.25rem .75rem;font-size:.86rem;color:var(--ink-soft);transition:.2s}
.chip:hover{border-color:var(--navy);color:var(--navy)}

/* ---------- affiliate family ---------- */
.family-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-top:.6rem}
.aff{background:var(--surface-card);border:1px solid var(--line);border-top:5px solid var(--navy);padding:.85rem .95rem;transition:.3s}
.aff:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.aff:nth-child(2){border-top-color:var(--accent)}
.aff:nth-child(3){border-top-color:var(--navy)}
.aff .tagline{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-weight:700}
.aff h3{font-family:var(--serif);color:var(--navy);font-size:1.32rem;font-weight:600;margin:.2rem 0 .45rem}
.aff p{font-size:.92rem;color:var(--ink-soft);line-height:1.42}
.aff .zh{margin-top:.45rem;font-size:.88rem;color:var(--ink-soft);border-top:1px dashed var(--line);padding-top:.45rem}

/* ---------- I-10 corridor strip (always-render fallback) ---------- */
.corridor{margin-top:.6rem;background:var(--surface-card);border:1px solid var(--line);padding:.8rem .8rem .4rem}
.corridor svg{width:100%;height:auto;display:block}
.corridor .cap{text-align:center;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);padding-top:.3rem}

/* ---------- fee highlight ---------- */
.fee-box{
  margin-top:.8rem;display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;
  background:linear-gradient(120deg,#8A6D1F,#5C4714);color:#fff;padding:.9rem 1.2rem;position:relative;overflow:hidden;
}
.fee-box::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 84%,rgba(90,70,15,.55) 84%,rgba(90,70,15,.55) 86%,transparent 86%)}
.fee-box .pct{position:relative;font-family:var(--serif);font-size:2.3rem;font-weight:600;color:var(--gold);line-height:1}
.fee-box .pct small{font-size:1.1rem;color:#fff;font-family:var(--sans)}
.fee-box .txt{position:relative;max-width:38rem}
.fee-box .txt b{display:block;margin-bottom:.15rem}
.fee-box .txt span{font-size:.9rem;color:rgba(255,255,255,.92)} /* v91: .8 = 4.25:1 on the light gradient end; .92 = 5.01:1 AA */

/* ---------- referral program ---------- */
.ref-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-top:.6rem}
.ref{background:var(--surface-card);border:1px solid var(--line);padding:.85rem .95rem;text-align:center;transition:.3s;position:relative}
.ref:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.ref .ic{width:50px;height:50px;margin:0 auto .6rem;background:var(--gold-deep);color:#fff;display:grid;place-items:center;font-size:1.35rem;transform:rotate(45deg)} /* v91: was --accent; on a white card that resolves to gold-lt 1.98:1. This diamond carries white emoji/letters, so it needs the deep gold (5.61:1). */
.ref .ic span{transform:rotate(-45deg)} /* counter-rotation: the .ic box is rotate(45deg), its content must be rotated back or it renders tilted */
.ref:nth-child(even) .ic{background:var(--gold-brand)} /* v91: was --gold-deep, i.e. identical to odd */
.ref .big{font-family:var(--serif);font-size:2rem;font-weight:600;color:var(--accent);line-height:1.05}
.ref h3{font-family:var(--serif);color:var(--navy);font-size:1.22rem;font-weight:600;margin:.35rem 0 .3rem}
.ref p{font-size:.9rem;color:var(--ink-soft);line-height:1.42}

/* ---------- responsive ---------- */
@media (max-width:980px){
  /* v92 REMOVED: `nav.main{display:none}` used to live here. It is what broke
     the mobile menu — the drawer block further down (the second 980px query)
     only set flex-direction, never display, so even after nav.js opened
     .navwrap the nav inside it stayed display:none and the drawer came up
     EMPTY (no top-level items, no dropdowns). Show/hide is now owned solely
     by header.site .navwrap / .navwrap.open below, so this rule is not
     needed. If JS is unavailable the nav simply renders as a vertical list,
     which is a better fallback than hiding it entirely. */
  /* v114: 同上，单列也要 minmax(0,1fr)，否则仍会被 .svc 的 min-content 撑爆 */
  .hero .wrap{grid-template-columns:minmax(0,1fr);padding:1.5rem 0 1.7rem}
  /* v114: 手机上 5 个服务入口原本是 nowrap 的横向滚动条 —— 既要占满一行又
     容易被用户忽略。改成可换行的金色胶囊，分隔符隐藏。 */
  .hero .svc{flex-wrap:wrap;white-space:normal;overflow:visible;gap:.4rem .45rem}
  .hero .svc .sep{display:none}
  .hero .svc a{border:1px solid rgba(243,200,139,.45);border-radius:999px;padding:.3rem .7rem;font-size:.92rem}
  .hero .figure{max-width:480px;height:230px} /* v93: inherited 440px from the base rule; explicit short height keeps the stacked mobile hero compact and preserves the ~1.5:1 crop ratio */
  .grid-3{grid-template-columns:1fr}
  .values{grid-template-columns:1fr}
  .tech-grid{grid-template-columns:1fr}
  .family-grid{grid-template-columns:1fr}
  .ref-grid{grid-template-columns:1fr}
  .chip-groups{grid-template-columns:1fr}
  .cols-2{columns:1}
  .rental-cta{padding:2rem;flex-direction:column;align-items:flex-start}
  .split,.broker,.contact-grid{grid-template-columns:1fr;gap:1.6rem}
  .map-frame iframe{height:320px}
  .flow{grid-template-columns:1fr 1fr}
  .stats .wrap{grid-template-columns:1fr 1fr;gap:2.4rem}
  .foot-grid{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
}
@media (max-width:560px){
  .flow{grid-template-columns:1fr}
  .brand .t b{font-size:1.02rem}
  .brand img{height:46px}
}

/* ============================================================
   v92 — mobile robustness
   Covers 375px (iPhone SE) / 390px (iPhone 14) / 414px, none of
   which had their own breakpoint before. The site only had 980px
   and 560px, so 561–980px was a dead zone where the 3-column
   grids had already collapsed but nothing else adapted.
   ============================================================ */

/* ---- wide tables scroll instead of crushing their columns ----
   The portal and admin tables are rendered by JS into static container
   divs, 5–7 columns wide. With `table.data{width:100%}` and no overflow
   handling, a 7-column table on a 375px screen squeezes every cell to
   ~40px — unreadable, and it can also push the page into horizontal
   scroll, which is worse because it breaks the sticky header.

   Scoped by container id rather than by table selector: portal uses
   #o-props / #o-stmt / #o-wos / #t-pays / #t-wos, admin uses *-tbl.
   The attribute selector [id$="-tbl"] catches all eleven admin tables
   without touching a single line of HTML.
   Only applied below 980px so desktop keeps its full-width tables. */
@media (max-width:980px){
  #o-props,#o-stmt,#o-wos,#t-pays,#t-wos,[id$="-tbl"]{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  /* min-width keeps the columns legible inside that scroller instead of
     wrapping every cell into a tall stack of one-word lines */
  #o-props table.data,#o-stmt table.data,#o-wos table.data,
  #t-pays table.data,#t-wos table.data,[id$="-tbl"] table.data{
    min-width:640px;
  }
}

/* ---- 561–980px: the dead zone ---- */
@media (max-width:980px) and (min-width:561px){
  /* two-up is still comfortable at tablet width, and one column would
     waste a lot of horizontal space on a 768px iPad */
  .grid-3,.family-grid,.tech-grid{grid-template-columns:1fr 1fr}
  .stats .wrap{grid-template-columns:repeat(4,1fr)}
  .flow{grid-template-columns:repeat(4,1fr)}
}

/* ---- ≤560px: phone ---- */
@media (max-width:560px){
  /* Footer links were ~25px tall with ~5px gaps — below the 24x24px
     WCAG 2.5.8 target and easy to mis-tap. */
  footer.site li{padding:.34rem 0}
  .foot-grid{gap:1.6rem 1.1rem}

  /* The hero H1 uses clamp(2rem,4vw,3.2rem); at 375px the 4vw term
     resolves below the 2rem floor anyway, but the badges row and the
     slogan's .34em letter-spacing overflowed on narrow screens. */
  .hero .badges{gap:.7rem}
  .hero .badges div{font-size:.72rem;letter-spacing:.08em}
  .hero-slogan{letter-spacing:.12em;font-size:.76rem}

  /* A 6-column filter bar became 1 column, which is very tall. Two up
     fits comfortably at 375px. */
  .filters{grid-template-columns:1fr 1fr}

  /* contact grid: the icon + text rows were cramped */
  .c-item{padding:.7rem 0}
  .c-item .ic{width:38px;height:38px}

  /* long unbroken strings (emails, licence numbers) can force overflow */
  .c-item a,.member .meta,.kv div,.muted{overflow-wrap:anywhere}
}

/* ---- horizontal-overflow insurance ----
   Deliberately NOT setting overflow-x on body: an inherited overflow would
   disable position:sticky on the header and let the page scroll sideways.
   No front-end page sets a fixed pixel width above 375px.
   v92 note: admin.html's .doc-page WAS width:480px (105px of overflow on a
   375px screen). A max-width:560px rule was tried here first and removed as
   dead code — admin.html's inline <style> block comes AFTER this stylesheet
   link, so an external rule of equal specificity always lost the cascade.
   Fixed at the source instead: .doc-page now uses max-width:480px;width:100%. */

/* ============================================================
   v5.1 — dropdown nav + mobile menu (iOS compatible)
   ============================================================ */
/* ---------- dropdown menu (hover) ---------- */
nav.main{position:relative}
nav.main .drop{position:relative}
nav.main .drop>a{cursor:default}
nav.main .drop .submenu{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);
  min-width:210px;background:#3B2A1E;border:1px solid rgba(217,179,106,.4);box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transition:opacity .22s ease,transform .22s ease,visibility .22s;
  padding:.5rem 0;z-index:70;display:flex;flex-direction:column;
}
nav.main .drop:hover .submenu,
nav.main .drop:focus-within .submenu,
nav.main .drop.open .submenu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
nav.main .drop .submenu a{padding:.55rem 1.3rem;font-size:.88rem;border-bottom:none;white-space:nowrap;color:var(--gold)} /* v91: was #4A90D9, a cool sky blue that clashed with the warm espresso/gold theme and only reached 4.09:1 on the #3B2A1E submenu bg. --gold #F3C88B = 8.75:1 AAA. */
nav.main .drop .submenu a:hover{background:rgba(217,179,106,.18);color:#fff} /* v91: was #7EB3E8; white on brown = 13.67:1 AAA */

/* ---------- v43: 城市菜单（平铺两列，不再分州） ---------- */
nav.main .drop .submenu.cm-sub{display:grid;grid-template-columns:1fr 1fr;gap:.05rem .4rem;min-width:340px;padding:.4rem 0 .5rem}
nav.main .drop .submenu.cm-sub a.cm-star{color:#fff;font-weight:700}
nav.main .drop .submenu.cm-sub .cm-map{grid-column:1/-1;border-top:1px solid rgba(217,179,106,.35);margin:.4rem .6rem 0;padding-top:.5rem}
@media (max-width:900px){
  nav.main .drop .submenu.cm-sub{grid-template-columns:1fr;min-width:230px}
}

/* ---------- mobile hamburger ---------- */
.menu-btn{
  display:none;align-items:center;gap:.5rem;background:var(--gold-deep);color:#fff;
  border:none;padding:.6rem 1rem;font-size:.9rem;font-weight:700;cursor:pointer;
  font-family:var(--sans);letter-spacing:.05em;
}
.menu-btn .bars{display:inline-flex;flex-direction:column;gap:4px}
.menu-btn .bars i{display:block;width:18px;height:2px;background:var(--surface-input);border-radius:1px} /* v91: icon glyph, pure white for crispness — 5.61:1 on gold-deep */

@media (max-width:980px){
  .menu-btn{display:inline-flex}
  header.site .wrap{flex-wrap:wrap}
  /* v175e: hide the mobile menu on first paint. The old rule only hid
     `.navwrap`, which does not exist until nav.js wraps <nav> in it — so
     on first paint the unwrapped nav.main rendered fully expanded (~520px
     tall), then collapsed to 77px when JS ran. That collapse was the
     site-wide CLS (~0.43, 4x the 0.1 budget). Hiding nav.main directly
     (not via the wrapper) keeps the header compact from the very first
     paint; nav.js still reveals it via .navwrap.open. */
  nav.main{display:none !important}
  header.site .navwrap{width:100%;margin-top:.6rem;display:none}
  header.site .navwrap.open{display:block}
  header.site .navwrap.open nav.main{display:flex !important}
  nav.main{flex-direction:column;gap:0;align-items:stretch;width:100%}
  nav.main>a,nav.main .drop>a{
    display:block;padding:.75rem .3rem;border-bottom:1px solid var(--line);font-size:.95rem;
  }
  nav.main .drop .submenu{
    display:none;
  }
  nav.main .drop.open .submenu{
    display:flex;position:static;transform:none;opacity:1;visibility:visible;
    box-shadow:none;border:none;border-left:3px solid var(--accent);
    background:var(--brown,#3B2A1E);margin:.2rem 0 .4rem;padding:.25rem 0;
    /* v50：一条下拉最多占 55% 屏高，超出内部滚动 —— 避免 8 项子菜单顶满整屏 */
    max-height:55vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  }
  nav.main .drop .submenu a{padding:.42rem 1rem;font-size:.86rem;line-height:1.4}
  /* v50：抽屉本身也限高，主菜单很长时内部滚动 */
  .navwrap.open{max-height:80vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
  nav.main .lang-switch{display:inline-block;margin:.6rem 0;padding:.5rem 1rem}
  nav.main .btn{display:inline-block;margin:.6rem 0;text-align:center;justify-content:center}
}

/* iOS Safari fixes */
@supports (-webkit-touch-callout:none){
  header.site{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
}

/* ---------- brand slogan (v7.1) ---------- */
.hero-slogan{
  font-size:.85rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold);font-weight:600;
  display:flex;align-items:center;gap:.9rem;
}
.hero-slogan::before,.hero-slogan::after{content:"";width:30px;height:1px;background:rgba(243,200,139,.55)}
.hero-slogan.zh-cn{letter-spacing:.34em;font-size:.9rem}
@media (max-width:560px){
  .hero-slogan{letter-spacing:.14em;font-size:.78rem}
  .hero-slogan.zh-cn{letter-spacing:.2em}
}

/* ============================================================
   v114 — 中文首页主标题缩小
   .hero h1 的 clamp(1.7rem,3.1vw,2.55rem) 是按英文 "Property management
   & real estate, beyond expectations." 调的；中文「专业物业管理与地产服务，
   超越您的期待。」有 20 个全角字，同样字号下宽度几乎翻倍，会在 1240px 容器
   里折成两行并把下面的 slogan / lead 挤下去。用 html[lang] 限定，只缩中文，
   英文首页尺寸保持不变。
   ============================================================ */
html[lang="zh-CN"] .hero h1,
html[lang="zh"] .hero h1{
  font-size:clamp(1.32rem,2.15vw,1.95rem);
  line-height:1.2;
  letter-spacing:0;
}
@media (max-width:980px){
  html[lang="zh-CN"] .hero h1,
  html[lang="zh"] .hero h1{font-size:clamp(1.28rem,5.4vw,1.6rem)}
}

/* ============================================================
   v116 — 移动端极简咨询表单（mobile-lead.js 配套样式）
   仅 ≤760px 生效：原表单隐藏，注入 姓名/电话/意向 3 项极简卡
   + 一键拨打 / WhatsApp / Facebook Messenger 沟通条。
   ============================================================ */
.mlead{display:none}
.mlead-solo{display:none}
@media (max-width:760px){
  .m-orig-hide{display:none!important}
  .mlead{display:block;background:#fff;border:1px solid var(--line,rgba(10,42,107,.18));border-radius:12px;padding:1rem 1rem .9rem;box-shadow:0 6px 18px rgba(10,42,107,.08)}
  .mlead-in{display:block;width:100%;box-sizing:border-box;min-height:46px;margin:0 0 .6rem;padding:.7rem .8rem;font:inherit;font-size:1rem;color:#1A1A1A;background:#FBFAF7;border:1px solid rgba(10,42,107,.22);border-radius:8px;-webkit-appearance:none;appearance:none}
  .mlead-in:focus{outline:2px solid rgba(10,42,107,.35);outline-offset:1px;background:#fff}
  .mlead-go{width:100%;justify-content:center;min-height:48px;font-size:1.02rem}
  .mlead-note{margin-top:.6rem;font-size:.9rem;font-weight:700;color:#0F6E56}
  .mlead-cta{display:flex;gap:.55rem;margin-top:.8rem}
  .mlead-cta a{flex:1;display:flex;align-items:center;justify-content:center;gap:.35rem;min-height:44px;border-radius:9px;color:#fff;font-size:.86rem;font-weight:700;text-decoration:none;padding:.4rem .3rem}
  .mlead-cta a svg{width:17px;height:17px;flex:none}
  .mlead-cta a span{white-space:nowrap}
  .ml-tel{background:#3B2A1E}
  .ml-wa{background:#25D366;color:#08351d!important}
  .ml-fb{background:#1877F2}
  .mlead-cta a:active{opacity:.85}
  /* 无表单页面的独立沟通栏：固定底栏（脱离文档流，零 CLS，不挤动下方内容） */
  .mlead-solo{display:block;position:fixed;left:0;right:0;bottom:0;z-index:80;background:#fff;border-top:1px solid rgba(10,42,107,.15);box-shadow:0 -6px 18px rgba(0,0,0,.14);padding:.5rem 0;margin:0}
  .mlead-solo .mlead-cta{margin-top:0}
  body{padding-bottom:62px}
}

/* ---------- v41: 城市页市场区块（服务 + 市场 + 指南 + 月报归档） ---------- */
.mkt{background:var(--surface-card,#FAF7F1);border:1px solid rgba(217,179,106,.45);border-radius:12px;padding:1.6rem 1.5rem;margin:2rem auto;max-width:1100px}
.mkt h2{font-family:var(--font-serif,'Fraunces',Georgia,serif);color:var(--espresso,#3B2A1E);margin:0 0 .3rem;font-size:1.35rem}
.mkt .mkt-sub{margin:0 0 1.2rem;color:#4A4A46;font-size:.92rem}
.mkt-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.mkt-stat{background:linear-gradient(160deg,#FDFBF6,#F5EFE3);border:1px solid rgba(217,179,106,.45);border-radius:10px;padding:1rem 1.1rem;position:relative;overflow:hidden}
.mkt-stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:#7F641C}
.mkt-stat b{display:block;font-size:1.6rem;color:#3B2A1E;line-height:1.15;font-family:var(--font-serif,'Fraunces',Georgia,serif)}
.mkt-stat span{font-size:.82rem;color:#4A4A46}
.mkt-chips{margin-top:1rem}
.mkt-chips a{display:inline-block;margin:0 .4rem .4rem 0;background:#F5EFE3;color:#3B2A1E;border:1px solid rgba(217,179,106,.45);border-radius:14px;padding:.28rem .7rem;font-size:.8rem;text-decoration:none}
.mkt-chips a:hover{background:#D9B36A}
.mkt-chips a.cur{background:#2A1D14;color:#F3EDE3}
.mkt-guides{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-top:1rem}
.mkt-guides a{display:block;background:#FDFBF6;border:1px solid rgba(217,179,106,.45);border-radius:10px;padding:1rem 1.1rem;text-decoration:none}
.mkt-guides a:hover{border-color:#7F641C}
.mkt-guides b{color:#3B2A1E;display:block}
.mkt-guides span{color:#4A4A46;font-size:.84rem}
@media(max-width:680px){.mkt-stats{grid-template-columns:1fr}.mkt-guides{grid-template-columns:1fr}}