:root {
  --brand: #8c2d30;
  --brand-dark: #6f2024;
  --brand-bright: #e62129;
  --gold: #8c2d30;
  --gold-dark: #6f2024;
  --sand: #caa268;
  --forest: #1e2523;
  --ink: #222629;
  --muted: #777b7d;
  --paper: #fbfaf7;
  --cream: #f6f1e8;
  --line: #e8e1d7;
  --white: #fff;
  --shadow: 0 20px 55px rgba(56, 36, 30, .09);
  --radius: 10px;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", Arial, sans-serif;
  --font-heading: "Noto Serif CJK SC", "Source Han Serif SC", "Songti SC", STSong, SimSun, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--font-ui); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; }
.shell { width: min(1280px, calc(100% - 48px)); margin-inline: auto; }
.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; }
.skip-link { position: fixed; top: -60px; left: 16px; z-index: 300; padding: 10px 16px; color: #fff; background: var(--brand); }
.skip-link:focus { top: 10px; }
[hidden] { display: none !important; }

.site-header { position: sticky; z-index: 120; top: 0; height: 86px; background: rgba(255, 255, 255, .97); border-bottom: 1px solid rgba(50, 40, 35, .08); box-shadow: 0 7px 22px rgba(38, 28, 24, .07); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-family: var(--font-ui); }
.header-inner { height: 100%; display: flex; align-items: center; gap: 24px; }
.brand { width: 205px; flex: 0 0 auto; display: block; }
.brand-logo { width: 100%; height: 58px; object-fit: contain; object-position: left center; }
.site-nav { align-self: stretch; margin-left: auto; display: flex; align-items: stretch; gap: 22px; }
.site-nav a { position: relative; display: grid; place-items: center; color: #383b3d; font-family: var(--font-ui); font-size: 14px; font-weight: 500; letter-spacing: .015em; white-space: nowrap; }
.site-nav a::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: 0; height: 3px; background: var(--brand); transition: left .2s ease, right .2s ease; }
.site-nav a:hover, .site-nav a.is-active { color: var(--brand); }
.site-nav a:hover::after, .site-nav a.is-active::after { left: 0; right: 0; }
.header-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; }
.header-actions > a.is-active { color: var(--brand); }
.search-glyph { display: block; font: 25px/1 Georgia, serif; transform: rotate(-20deg); }
.header-phone { display: flex; align-items: center; gap: 7px; white-space: nowrap; font-family: var(--font-ui); font-size: 15px; }
.header-phone > span { color: var(--brand); }
.header-phone strong { font-family: var(--font-ui); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .035em; }
.header-cta { flex: 0 0 auto; min-width: 124px; white-space: nowrap; }
.menu-toggle { display: none; width: 42px; height: 42px; padding: 9px; border: 0; background: transparent; }
.menu-toggle span { display: block; width: 21px; height: 2px; margin: 5px auto; background: #24282a; transition: .2s; }

.button { min-height: 46px; padding: 0 23px; display: inline-flex; align-items: center; justify-content: center; gap: 11px; color: inherit; background: #fff; border: 1px solid transparent; border-radius: 5px; font-family: var(--font-ui); font-weight: 650; font-size: 14px; line-height: 1.35; cursor: pointer; transition: transform .2s, background .2s, border-color .2s; }
.button:hover { transform: translateY(-2px); }
.button-sm { min-height: 40px; padding-inline: 18px; font-size: 13px; }
.button-xs { min-height: 36px; padding-inline: 12px; font-size: 12px; }
.button-primary { color: #fff; background: var(--brand); box-shadow: 0 12px 26px rgba(140, 45, 48, .18); }
.button-primary:hover { background: var(--brand-dark); }
.button-ghost { color: var(--brand-dark); background: rgba(255, 255, 255, .88); border-color: rgba(140, 45, 48, .38); }
.button-light { color: var(--brand); background: #fff; }

.hero { position: relative; min-height: 345px; overflow: hidden; background: #d9d4ca center / cover no-repeat; }
.home-hero { min-height: 345px; background-image: url("/skin/xiangshubang/images/customer/home-hero.jpg"); background-position: center 53%; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(248, 246, 241, .98) 0%, rgba(248, 246, 241, .87) 35%, rgba(248, 246, 241, .28) 66%, rgba(27, 27, 25, .08) 100%); }
.hero-inner { position: relative; z-index: 2; min-height: inherit; display: flex; align-items: center; padding-block: 38px; }
.hero-copy { width: min(600px, 52%); }
.eyebrow { margin: 0 0 12px; color: var(--brand); font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.hero h1 { margin: 0; display: grid; color: #23282b; font-family: var(--font-heading); font-size: clamp(48px, 5vw, 72px); font-weight: 500; line-height: 1.12; letter-spacing: -.04em; }
.hero h1 em { color: var(--brand); font-style: normal; }
.hero-lead { max-width: 610px; margin: 20px 0 24px; color: #3f4649; font-size: 16px; line-height: 1.8; }
.hero-cta { display: flex; gap: 12px; }

.mobile-service-grid, .mobile-home-cta, .mobile-showcase { display: none; }
.trust-strip { background: #fff; border-bottom: 1px solid var(--line); }
.trust-strip-inner { min-height: 108px; display: grid; grid-template-columns: repeat(5, 1fr); }
.trust-strip article { position: relative; padding: 22px 20px; display: flex; align-items: center; justify-content: center; gap: 15px; }
.trust-strip article + article::before { content: ""; position: absolute; left: 0; top: 25%; bottom: 25%; width: 1px; background: var(--line); }
.trust-strip article > span { width: 38px; height: 38px; display: grid; place-items: center; color: var(--brand); border: 2px solid var(--sand); border-radius: 50%; font-size: 17px; }
.trust-strip article div { display: grid; gap: 5px; }
.trust-strip strong { font-size: 15px; }
.trust-strip small { color: #8b8d8f; font-size: 11px; }

.portal-dashboard { padding: 34px 0 86px; background: linear-gradient(#fff 0, #fbf8f2 100%); }
.portal-dashboard-grid { display: grid; grid-template-columns: 1.05fr .98fr .88fr; gap: 22px; align-items: stretch; }
.dashboard-panel { min-width: 0; padding: 26px; background: #fff; border: 1px solid #eadfd3; border-radius: 12px; box-shadow: 0 16px 44px rgba(74, 48, 35, .06); }
.dashboard-store { background: linear-gradient(135deg, #fff9f1, #fff); }
.dashboard-head { margin-bottom: 18px; display: flex; align-items: center; justify-content: space-between; }
.dashboard-head h2 { margin: 0; font-family: var(--font-heading); font-size: 25px; font-weight: 500; line-height: 1.2; }
.dashboard-head a { color: #6d6560; font-size: 12px; }
.featured-project { position: relative; height: 250px; display: block; overflow: hidden; border-radius: 12px; background: #ddd; }
.featured-project > img { width: 100%; height: 100%; object-fit: cover; }
.featured-project::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(17, 16, 15, .8)); }
.featured-project > div { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 17px; display: grid; gap: 5px; color: #fff; }
.featured-project strong { font-size: 20px; }
.featured-project small { font-size: 12px; }
.test-badge { display: inline-flex; width: max-content; padding: 3px 7px; color: #fff; background: var(--brand); border-radius: 3px; font-size: 9px; font-weight: 700; }
.featured-project > .test-badge { position: absolute; z-index: 3; top: 14px; left: 14px; }
.project-brief { margin-top: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.project-brief span { min-height: 78px; padding: 12px; display: grid; align-content: center; gap: 5px; background: #fffaf4; border: 1px solid #eee1d5; border-radius: 10px; }
.project-brief small { color: #96908b; font-size: 10px; }
.project-brief strong { font-size: 12px; line-height: 1.55; }
.plan-mini-grid { display: grid; gap: 11px; }
.plan-mini { min-width: 0; padding: 10px; display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 12px; align-items: center; border: 1px solid #ede2d8; border-radius: 12px; }
.plan-mini img { width: 100px; height: 84px; object-fit: cover; border-radius: 8px; }
.plan-mini div { min-width: 0; display: grid; gap: 6px; }
.plan-mini strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.plan-mini small { color: #777c7f; font-size: 11px; }
.plan-mini em { color: var(--brand); font-size: 10px; font-style: normal; }
.plan-tags { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 7px; }
.plan-tags span { padding: 6px 10px; color: var(--brand-dark); background: #f8eee6; border-radius: 99px; font-size: 10px; }
.plan-note { margin: 13px 0 0; padding-top: 13px; color: #74787a; border-top: 1px solid var(--line); font-size: 11px; line-height: 1.7; }
.store-combo { display: grid; gap: 11px; }
.store-copy { position: relative; }
.store-copy strong { font-family: var(--font-heading); font-size: 20px; font-weight: 600; line-height: 1.35; }
.store-copy p { margin: 8px 0; color: #777; font-size: 12px; line-height: 1.7; }
.location-row { padding: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; border: 1px solid #eedfd2; border-radius: 10px; }
.location-row div { display: grid; gap: 4px; }
.location-row strong { font-size: 12px; }
.location-row small { color: #858585; font-size: 10px; }
.store-profile { height: 138px; position: relative; overflow: hidden; border-radius: 10px; }
.store-profile > img { width: 100%; height: 100%; object-fit: cover; }
.store-profile::after { content: ""; position: absolute; inset: 42% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .75)); }
.store-profile > div { position: absolute; z-index: 2; left: 15px; bottom: 12px; display: grid; gap: 3px; color: #fff; }
.store-profile small { font-size: 10px; }
.store-profile strong { font-size: 13px; }
.store-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.store-meta span { padding: 10px 8px; display: grid; gap: 5px; background: #fff; border: 1px solid #eee1d6; border-radius: 9px; }
.store-meta small { color: #96918d; font-size: 9px; }
.store-meta strong { overflow: hidden; font-size: 10px; white-space: nowrap; }
.store-tags { display: flex; justify-content: space-between; gap: 6px; color: var(--brand); font-size: 10px; }
.store-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.store-actions .button { min-height: 40px; padding-inline: 8px; font-size: 11px; }

.shortcut-bar { position: fixed; z-index: 80; right: 12px; top: 48%; transform: translateY(-50%); padding: 6px; display: grid; gap: 2px; color: #48505a; background: rgba(255, 255, 255, .96); border: 1px solid #ece7df; border-radius: 12px; box-shadow: 0 14px 35px rgba(30, 34, 38, .12); }
.shortcut-bar a { width: 60px; aspect-ratio: 1 / 1; padding: 7px 4px 6px; display: grid; grid-template-rows: 1fr auto; place-items: center; align-content: center; gap: 4px; border-radius: 8px; font-size: 10px; }
.shortcut-bar a:hover { color: var(--brand); background:#f8f2eb; }
.shortcut-bar span { align-self:end;font-size: 22px;line-height:1; }
.mobile-dock { display: none; }

.site-footer { color: rgba(255, 255, 255, .72); background: #2c2524; }
.footer-top { min-height: 132px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-nav a { font-size: 12px; }
.footer-nav a:hover { color: #fff; }
.footer-brand-lockup { display: flex; align-items: center; gap: 15px; }
.footer-brand-lockup img { width: 150px; max-height: 58px; object-fit: contain; }
.footer-brand-lockup div { display: grid; gap: 5px; }
.footer-brand-lockup strong { color: #fff; font-size: 13px; }
.footer-brand-lockup small { font-size: 9px; }
.footer-bottom { min-height: 58px; padding-block: 15px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 10px; }

.reveal { opacity: 1; transform: none; }
.form-status { min-height: 18px; margin: 0; color: var(--brand); font-size: 11px; }

@media (min-width: 1121px) and (max-width: 1360px) {
  .header-inner { gap: 18px; }
  .brand { width: 185px; }
  .site-nav { gap: 14px; }
  .header-actions { gap: 10px; }
  .header-phone { font-size: 16px; }
  .header-cta { min-width: 116px; padding-inline: 14px; font-size: 14px; }
}

@media (max-width: 1220px) {
  .shell { width: min(1120px, calc(100% - 40px)); }
  .brand { width: 185px; }
  .site-nav { gap: 14px; }
  .site-nav a { font-size: 14px; }
  .header-phone strong { display: none; }
  .portal-dashboard-grid { grid-template-columns: 1fr 1fr; }
  .dashboard-store { grid-column: 1 / -1; }
  .store-combo { grid-template-columns: 1.1fr 1fr 1fr; }
  .store-copy, .location-row, .store-profile { grid-row: 1 / span 2; }
  .store-meta, .store-tags, .store-actions { grid-column: 3; }
}

@media (max-width: 1120px) {
  html { scroll-padding-top: 64px; }
  .site-header { position: sticky; top: 0; height: 57px; }
  .header-inner { width: 100%; padding: 0 12px; gap: 8px; }
  .brand { width: 158px; margin-right: auto; }
  .brand-logo { height: 43px; }
  .header-actions { gap: 7px; }
  .header-actions > a:first-child { width: 36px; height: 36px; display: grid; place-items: center; }
  .header-phone, .header-cta { display: none; }
  .menu-toggle { display: block; flex: 0 0 auto; }
  .site-nav { position: fixed; z-index: 130; inset: 57px 0 auto; max-height: calc(100vh - 57px); padding: 10px 18px 18px; display: none; grid-template-columns: repeat(2, 1fr); gap: 0; overflow: auto; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 18px 30px rgba(0, 0, 0, .12); }
  .site-nav.is-open { display: grid; }
  .site-nav a { min-height: 48px; justify-items: start; border-bottom: 1px solid #f0ede8; }
  .site-nav a::after { display: none; }
}

@media (max-width: 860px) {
  body { padding-bottom: 60px; background: #fff; }
  .shell { width: calc(100% - 24px); }
  .site-header { position: sticky; top: 0; height: 57px; }
  .header-inner { width: 100%; padding: 0 12px; gap: 8px; }
  .brand { width: 158px; margin-right: auto; }
  .brand-logo { height: 43px; }
  .header-actions { gap: 7px; }
  .header-actions > a:first-child { width: 36px; height: 36px; display: grid; place-items: center; }
  .header-phone, .header-cta { display: none; }
  .menu-toggle { display: block; flex: 0 0 auto; }
  .site-nav { position: fixed; z-index: 130; inset: 57px 0 auto; max-height: calc(100vh - 57px); padding: 10px 18px 18px; display: none; grid-template-columns: repeat(2, 1fr); gap: 0; overflow: auto; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 18px 30px rgba(0, 0, 0, .12); }
  .site-nav.is-open { display: grid; }
  .site-nav a { min-height: 48px; justify-items: start; border-bottom: 1px solid #f0ede8; }
  .site-nav a::after { display: none; }

  .home-hero { min-height: 198px; background-position: 60% center; }
  .hero-shade { background: linear-gradient(90deg, rgba(12, 17, 20, .86), rgba(12, 17, 20, .15)); }
  .hero-inner { padding: 18px 12px; }
  .hero-copy { width: min(92%, 360px); }
  .hero .eyebrow { margin-bottom: 6px; color: #fff; font-size: 10px; letter-spacing: .14em; }
  .hero h1 { color: #fff; font-size: 30px; line-height: 1.05; }
  .hero h1 em { color: var(--sand); }
  .hero-lead { margin: 10px 0 0; color: rgba(255, 255, 255, .9); font-size: 12px; line-height: 1.55; }
  .hero-cta { display: none; }

  .mobile-service-grid { padding: 16px 12px 11px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; background: #fff; }
  .mobile-service-grid article { min-width: 0; aspect-ratio: 1 / 1; padding: 10px 2px 9px; overflow: hidden; display: grid; grid-template-rows: 1fr auto; place-items: center; align-content: center; gap: 5px; border: 1px solid #eedfd5; border-radius: 11px; }
  .mobile-service-grid b { align-self: end; color: #24282b; font: 25px/1 Georgia, serif; }
  .service-icon { color: var(--brand); font: 30px/1 Georgia, serif; }
  .mobile-service-grid strong { font-size: 13px; white-space: nowrap; }
  .mobile-service-grid small { display: none; }
  .mobile-home-cta { padding: 0 12px 12px; display: grid; grid-template-columns: 1.25fr 1fr; gap: 8px; background: #fff; border-bottom: 1px solid #eee9e3; }
  .mobile-home-cta a { min-height: 43px; display: flex; align-items: center; justify-content: center; gap: 8px; color: #fff; background: var(--brand); border-radius: 5px; font-size: 13px; font-weight: 650; }
  .mobile-home-cta a + a { color: var(--brand); background: #fff; border: 1px solid var(--brand); }
  .trust-strip, .portal-dashboard { display: none; }
  .mobile-showcase { padding: 16px 12px 24px; display: block; background: #fff; }
  .mobile-section-head { margin: 0 0 11px; display: flex; align-items: center; justify-content: space-between; }
  .mobile-section-head:not(:first-child) { margin-top: 22px; }
  .mobile-section-head h2 { margin: 0; font-family: var(--font-heading); font-size: 22px; font-weight: 500; }
  .mobile-section-head a { color: #777; font-size: 11px; }
  .mobile-case-card { min-height: 146px; padding: 11px; display: grid; grid-template-columns: 48% 1fr; gap: 12px; background: #fff; border: 1px solid #f0ebe5; border-radius: 10px; box-shadow: 0 8px 25px rgba(50, 38, 30, .06); }
  .mobile-case-card img { width: 100%; height: 124px; object-fit: cover; border-radius: 7px; }
  .mobile-case-card div { display: grid; align-content: center; gap: 7px; }
  .mobile-case-card h3 { margin: 0; font-size: 15px; line-height: 1.45; }
  .mobile-case-card p { margin: 0; color: #858585; font-size: 11px; }
  .mobile-case-card b { width: max-content; padding: 6px 10px; color: var(--brand); border: 1px solid var(--brand); border-radius: 4px; font-size: 10px; }
  .mobile-plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
  .mobile-plan-grid a { min-width: 0; display: grid; gap: 6px; }
  .mobile-plan-grid img { width: 100%; aspect-ratio: 1.42; object-fit: cover; border-radius: 8px; }
  .mobile-plan-grid strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
  .mobile-plan-grid small { color: #8c8c8c; font-size: 10px; }
  .mobile-store-card { padding: 10px; display: grid; grid-template-columns: 92px 1fr auto; gap: 11px; align-items: center; border: 1px solid #eee8e1; border-radius: 10px; }
  .mobile-store-card img { width: 92px; height: 76px; object-fit: cover; border-radius: 7px; }
  .mobile-store-card div { display: grid; gap: 5px; }
  .mobile-store-card strong { font-size: 13px; }
  .mobile-store-card small { color: #888; font-size: 10px; }
  .mobile-store-card > b { color: var(--brand); font-size: 24px; }
  .mobile-lead-card { margin-top: 22px; padding: 18px; display: grid; gap: 10px; color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-dark)); border-radius: 10px; }
  .mobile-lead-card h2 { margin: 0 0 4px; font-size: 19px; }
  .mobile-lead-card p { margin: 0; color: rgba(255, 255, 255, .8); font-size: 10px; }
  .mobile-lead-card input { height: 40px; padding: 0 12px; border: 0; border-radius: 4px; outline: 0; font-size: 12px; }
  .mobile-lead-card .button { color: var(--brand); background: #fff; box-shadow: none; }
  .mobile-lead-card .form-status { color: #fff; }

  .shortcut-bar { display: none; }
  .mobile-dock { position: fixed; z-index: 150; left: 0; right: 0; bottom: 0; height: 60px; padding-bottom: env(safe-area-inset-bottom); display: grid; grid-template-columns: repeat(5, 1fr); background: rgba(255, 255, 255, .98); border-top: 1px solid #dedad4; box-shadow: 0 -6px 20px rgba(0, 0, 0, .05); }
  .mobile-dock a { display: grid; place-items: center; align-content: center; gap: 2px; color: #454b52; font-size: 10px; }
  .mobile-dock a.is-active { color: var(--brand); }
  .mobile-dock span { font-size: 19px; line-height: 1; }
  .site-footer { display: none; }
}

@media (max-width: 390px) {
  .brand { width: 145px; }
  .mobile-service-grid { gap: 6px; }
  .mobile-service-grid strong { font-size: 12px; }
  .mobile-service-grid b, .service-icon { font-size: 23px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}