/* =========================================================
   Stage 14B — Refero Column direct-file redesign
   Source of truth for the post-reconstruction visual system.
   Loaded after site.css.
   ========================================================= */

:root {
  --column-indigo-navy: #111a4a;
  --column-midnight-ink: #011821;
  --column-obsidian: #12161e;
  --column-charcoal: #232730;
  --column-slate-ink: #3b3e47;
  --column-steel: #7c7f88;
  --column-fog: #a9acb6;
  --column-mist: #cbcccf;
  --column-line: #e3e4e8;
  --column-canvas: #f6f6f8;
  --column-white: #ffffff;
  --column-signal-orange: #ec652b;
  --column-peach: #f2936b;
  --column-seafoam: #44b48b;
  --column-seafoam-dark: #167e6c;
  --column-seafoam-light: #94efb7;
  --column-deep-sea: #023247;
  --column-sky: #88deeb;
  --column-cobalt: #1e4199;
  --column-ocean: #0c6997;

  --column-radius: 8px;
  --column-page-max: 1200px;
  --column-section-gap: 72px;
  --column-card-padding: 24px;
  --column-element-gap: 8px;

  --column-shadow-button:
    rgba(17,26,74,.10) 0 1px 3px,
    rgba(17,26,74,.05) 0 1px 0,
    rgba(255,255,255,.5) 0 1px 0 inset,
    rgba(255,255,255,.5) 0 1px 4px inset;

  --column-shadow-card:
    rgba(18,22,30,.024) 0 1px 4px,
    rgba(18,22,30,.05) 0 1px 0,
    rgba(18,22,30,.024) 0 0 0 1px;

  --column-shadow-product:
    rgba(0,0,0,.02) 0 40px 32px,
    rgba(0,0,0,.03) 0 22px 18px,
    rgba(0,0,0,.03) 0 12px 10px,
    rgba(0,0,0,.04) 0 7px 5px,
    rgba(0,0,0,.07) 0 3px 2px;
}

/* Base --------------------------------------------------- */

html {
  background: var(--column-canvas);
  color: var(--column-slate-ink);
}

body {
  margin: 0;
  background: var(--column-canvas);
  color: var(--column-slate-ink);
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "PingFang SC",
    "Microsoft YaHei",
    sans-serif;
  font-size: 16px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: border-box;
}

::selection {
  background: rgba(68,180,139,.22);
  color: var(--column-indigo-navy);
}

a {
  color: inherit;
}

img,
video {
  display: block;
  max-width: 100%;
}

.container {
  width: min(calc(100% - 64px), var(--column-page-max)) !important;
  max-width: var(--column-page-max) !important;
  margin-inline: auto !important;
}

.skip-link:focus {
  z-index: 999;
  top: 8px;
  left: 8px;
  border-radius: var(--column-radius);
  background: var(--column-white);
  color: var(--column-indigo-navy);
  box-shadow: var(--column-shadow-card);
}

/* Header ------------------------------------------------- */

.site-header {
  position: sticky !important;
  top: 0;
  z-index: 120;
  border-bottom: 1px solid rgba(227,228,232,.9) !important;
  background: rgba(246,246,248,.88) !important;
  box-shadow: none !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.header-main {
  width: min(calc(100% - 64px), var(--column-page-max)) !important;
  min-height: 62px !important;
  margin-inline: auto !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(190px, auto) minmax(0, 1fr) auto;
  align-items: center !important;
  gap: 20px !important;
}

.brand {
  min-width: 0;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: var(--column-indigo-navy) !important;
  text-decoration: none !important;
}

.brand img {
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 auto;
  object-fit: contain;
}

.brand-text {
  min-width: 0;
  display: grid !important;
  gap: 2px !important;
}

.brand-name {
  color: var(--column-indigo-navy) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.08 !important;
  letter-spacing: -.01em !important;
  white-space: nowrap;
}

.brand-subtitle {
  max-width: 225px;
  overflow: hidden;
  color: var(--column-steel) !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: .035em !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-slogan,
.header-nav,
.nav-wrap {
  display: contents !important;
}

.nav-menu {
  min-width: 0;
  justify-self: center;
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 4px !important;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: var(--column-radius) !important;
  background: rgba(255,255,255,.42) !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.nav-link {
  min-height: 32px !important;
  padding: 8px 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  border: 0 !important;
  border-radius: var(--column-radius) !important;
  background: transparent !important;
  color: var(--column-charcoal) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition:
    color .18s ease,
    background-color .18s ease,
    box-shadow .18s ease;
}

.nav-link:hover {
  background: rgba(255,255,255,.72) !important;
  color: var(--column-indigo-navy) !important;
}

.nav-link[aria-current="page"] {
  background: var(--column-white) !important;
  color: var(--column-indigo-navy) !important;
  box-shadow: var(--column-shadow-card) !important;
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.header-contact {
  min-height: 38px !important;
  padding: 7px 11px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  border: 0 !important;
  border-radius: var(--column-radius) !important;
  background: var(--column-indigo-navy) !important;
  color: var(--column-white) !important;
  box-shadow: var(--column-shadow-button) !important;
  text-decoration: none !important;
}

.header-contact-icon {
  width: 18px !important;
  height: 18px !important;
  color: var(--column-white) !important;
}

.header-contact-copy {
  display: grid !important;
  gap: 0 !important;
}

.header-contact-label {
  color: rgba(255,255,255,.65) !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
}

.header-contact strong {
  color: var(--column-white) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
}

.language-switch {
  position: static !important;
  inset: auto !important;
  min-width: 0 !important;
  height: 38px !important;
  padding: 0 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  border: 1px solid var(--column-line) !important;
  border-radius: var(--column-radius) !important;
  background: rgba(255,255,255,.58) !important;
  color: var(--column-indigo-navy) !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

.language-switch-icon {
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  background: transparent !important;
  color: var(--column-indigo-navy) !important;
  font-size: 10px !important;
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;
}

.menu-toggle {
  display: none !important;
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  place-items: center;
  border: 1px solid var(--column-line) !important;
  border-radius: var(--column-radius) !important;
  background: rgba(255,255,255,.72) !important;
  color: var(--column-indigo-navy) !important;
  box-shadow: none !important;
}

/* Typography -------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--column-indigo-navy) !important;
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "PingFang SC",
    "Microsoft YaHei",
    sans-serif !important;
}

h1,
.hero h1,
.page-hero h1,
.audit-page-hero h1,
.service-page-hero h1 {
  margin: 0 !important;
  font-size: clamp(44px, 4.6vw, 60px) !important;
  font-weight: 600 !important;
  line-height: 1.02 !important;
  letter-spacing: -.03em !important;
}

h2,
.section-head h2 {
  font-size: clamp(34px, 3.7vw, 48px) !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
  letter-spacing: -.02em !important;
}

h3 {
  font-size: clamp(20px, 2vw, 28px) !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
  letter-spacing: -.01em !important;
}

p,
li,
label,
input,
textarea,
select,
button {
  font-family: inherit !important;
}

p,
li {
  color: var(--column-slate-ink);
}

.hero-lead,
.page-lead,
.section-head p,
.split-copy p,
.audit-copy p {
  color: var(--column-steel) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.43 !important;
}

.eyebrow,
.kicker,
.audit-kicker,
.services-kicker {
  display: inline-flex !important;
  width: fit-content;
  align-items: center;
  gap: 8px;
  color: var(--column-indigo-navy) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: .04em !important;
  text-transform: none !important;
}

.eyebrow::before,
.kicker::before,
.audit-kicker::before,
.services-kicker::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--column-seafoam-dark) !important;
}

/* Hero --------------------------------------------------- */

.hero,
.page-hero,
.audit-page-hero,
.service-page-hero {
  position: relative;
  overflow: hidden;
  border: 0 !important;
  background:
    linear-gradient(180deg, rgba(246,246,248,.90), rgba(246,246,248,.98)) !important;
  color: var(--column-slate-ink) !important;
}

.hero::after,
.page-hero::after,
.audit-page-hero::after,
.service-page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 84% 18%, rgba(136,222,235,.18), transparent 30%),
    radial-gradient(circle at 73% 68%, rgba(68,180,139,.10), transparent 28%);
}

.hero-inner,
.audit-hero-layout,
.service-hero-layout {
  width: min(calc(100% - 64px), var(--column-page-max)) !important;
  min-height: 640px !important;
  margin-inline: auto !important;
  padding: 88px 0 80px !important;
  position: relative;
  z-index: 1;
  display: grid !important;
  grid-template-columns: minmax(0, .78fr) minmax(520px, 1.22fr) !important;
  align-items: center !important;
  gap: 64px !important;
}

.hero-copy,
.audit-hero-copy,
.service-hero-copy {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 24px;
}

.hero-copy h1,
.audit-hero-copy h1,
.service-hero-copy h1 {
  max-width: 720px;
}

.hero-lead,
.page-lead {
  max-width: 680px !important;
  margin: 0 !important;
}

.hero-actions {
  margin: 4px 0 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.btn {
  min-height: 44px !important;
  padding: 12px 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border-radius: var(--column-radius) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    background-color .16s ease;
}

.btn-primary,
.btn-secondary {
  border: 1px solid var(--column-indigo-navy) !important;
  background: var(--column-indigo-navy) !important;
  color: var(--column-white) !important;
  box-shadow: var(--column-shadow-button) !important;
}

.btn-outline {
  border: 1px solid var(--column-indigo-navy) !important;
  background: transparent !important;
  color: var(--column-indigo-navy) !important;
  box-shadow: none !important;
}

.btn-light {
  border: 1px solid rgba(255,255,255,.86) !important;
  background: rgba(255,255,255,.94) !important;
  color: var(--column-indigo-navy) !important;
  box-shadow: var(--column-shadow-card) !important;
}

.btn:hover {
  transform: translateY(-1px);
}

.hero-points {
  margin-top: 12px !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
  border: 0 !important;
  background: transparent !important;
}

.hero-point {
  min-width: 0;
  display: grid !important;
  gap: 4px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.hero-point strong {
  color: var(--column-seafoam-dark) !important;
  font-size: 28px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: -.01em;
}

.hero-point span {
  color: var(--column-steel) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

.hero-next {
  display: none !important;
}

/* Column hero product visual ----------------------------- */

.column-hero-visual {
  position: relative;
  min-height: 500px;
  isolation: isolate;
}

.column-halftone {
  position: absolute;
  inset: 18px -40px 0 18px;
  z-index: -2;
  opacity: .88;
  background:
    url("/assets/design/column-hero-network.svg")
    center / contain no-repeat;
}

.column-product-card {
  position: absolute;
  border-radius: var(--column-radius);
  background: rgba(255,255,255,.94);
  color: var(--column-slate-ink);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.column-product-card--primary {
  top: 56px;
  left: 12px;
  width: min(470px, 72%);
  padding: 26px;
  box-shadow: var(--column-shadow-product);
}

.column-product-card--floating {
  right: 6px;
  bottom: 40px;
  width: min(300px, 47%);
  padding: 22px;
  box-shadow:
    rgba(30,30,44,.14) 24px 48px 64px,
    rgba(255,255,255,1) 0 0 0 1px inset;
}

.column-product-card__top,
.column-product-card__metric {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.column-micro-label {
  color: var(--column-steel);
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: .02em;
}

.column-status-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--column-seafoam-dark);
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;
  font-size: 10px;
}

.column-status-dot > span {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--column-seafoam);
  box-shadow: 0 0 0 4px rgba(68,180,139,.12);
}

.column-product-card__metric {
  margin-top: 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--column-line);
}

.column-product-card__metric > div:first-child {
  display: grid;
  gap: 6px;
}

.column-product-card__metric span {
  color: var(--column-steel);
  font-size: 12px;
}

.column-product-card__metric strong {
  color: var(--column-indigo-navy);
  font-size: 40px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.03em;
}

.column-sparkline {
  width: 128px;
  height: 56px;
  display: flex;
  align-items: end;
  gap: 7px;
}

.column-sparkline i {
  flex: 1;
  min-width: 6px;
  border-radius: 3px 3px 0 0;
  background: var(--column-seafoam);
}

.column-sparkline i:nth-child(1) { height: 24%; opacity: .55; }
.column-sparkline i:nth-child(2) { height: 38%; opacity: .62; }
.column-sparkline i:nth-child(3) { height: 48%; opacity: .68; }
.column-sparkline i:nth-child(4) { height: 62%; opacity: .76; }
.column-sparkline i:nth-child(5) { height: 52%; opacity: .72; }
.column-sparkline i:nth-child(6) { height: 78%; opacity: .88; }
.column-sparkline i:nth-child(7) { height: 94%; }

.column-service-status-list {
  margin-top: 8px;
  display: grid;
}

.column-service-status {
  padding: 13px 0;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid rgba(227,228,232,.72);
  font-size: 12px;
}

.column-service-status:last-child {
  border-bottom: 0;
}

.column-service-status > span {
  color: var(--column-charcoal);
}

.column-service-status > strong {
  color: var(--column-seafoam-dark);
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;
  font-size: 10px;
  font-weight: 400;
  text-align: right;
}

.column-floating-value {
  display: block;
  margin-top: 8px;
  color: var(--column-indigo-navy);
  font-size: 30px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.02em;
}

.column-bar-chart {
  height: 82px;
  margin-top: 24px;
  display: flex;
  align-items: end;
  gap: 10px;
}

.column-bar-chart span {
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: var(--column-seafoam);
}

.column-bar-chart span:nth-child(1) { height: 38%; opacity: .45; }
.column-bar-chart span:nth-child(2) { height: 58%; opacity: .58; }
.column-bar-chart span:nth-child(3) { height: 72%; opacity: .7; }
.column-bar-chart span:nth-child(4) { height: 88%; opacity: .86; }
.column-bar-chart span:nth-child(5) { height: 100%; }

.column-product-card--floating p {
  margin: 16px 0 0;
  color: var(--column-steel);
  font-size: 11px;
  line-height: 1.45;
}

/* Service-page hero panel -------------------------------- */

.audit-hero-panel,
.service-hero-panel,
.hero-panel {
  position: relative;
  overflow: hidden;
  min-height: 380px;
  padding: 28px !important;
  border: 0 !important;
  border-radius: var(--column-radius) !important;
  background:
    rgba(255,255,255,.94)
    url("/assets/design/column-service-scene.svg")
    center bottom / 96% auto no-repeat !important;
  color: var(--column-slate-ink) !important;
  box-shadow: var(--column-shadow-product) !important;
}

.audit-hero-panel::after,
.service-hero-panel::after,
.hero-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.96) 0 34%,
      rgba(255,255,255,.45) 70%,
      rgba(255,255,255,.12) 100%
    );
}

.audit-hero-panel > *,
.service-hero-panel > *,
.hero-panel > * {
  position: relative;
  z-index: 1;
}

.audit-hero-panel-head,
.service-hero-panel-head,
.hero-panel h2 {
  color: var(--column-indigo-navy) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: .03em !important;
  text-transform: none !important;
}

.audit-hero-service-list,
.service-hero-service-list {
  margin-top: 16px !important;
  display: grid !important;
  gap: 8px !important;
}

.audit-hero-service-list > *,
.service-hero-service-list > *,
.panel-service {
  padding: 12px 14px !important;
  border: 1px solid rgba(227,228,232,.82) !important;
  border-radius: var(--column-radius) !important;
  background: rgba(255,255,255,.74) !important;
  color: var(--column-charcoal) !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

.audit-hero-service-list strong,
.service-hero-service-list strong,
.panel-service strong {
  color: var(--column-indigo-navy) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.audit-hero-service-list span,
.service-hero-service-list span,
.panel-service span {
  color: var(--column-steel) !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
}

.audit-hero-proof,
.service-hero-proof {
  color: var(--column-steel) !important;
  font-size: 12px !important;
}

.audit-hero-proof strong,
.service-hero-proof strong {
  color: var(--column-seafoam-dark) !important;
}

/* Section rhythm ---------------------------------------- */

.section,
.section-soft,
.section-dark,
.section-tight {
  padding-block: var(--column-section-gap) !important;
}

.section {
  background: var(--column-white) !important;
}

.section-soft {
  background: var(--column-canvas) !important;
}

.section-dark {
  background: var(--column-midnight-ink) !important;
}

.section-dark h2,
.section-dark h3,
.section-dark p,
.section-dark li {
  color: var(--column-white) !important;
}

.section-head {
  max-width: 760px;
  margin: 0 auto 40px !important;
  display: grid !important;
  gap: 12px !important;
}

.section-head.center {
  text-align: center !important;
}

.section-head.left,
.section-head.reveal:not(.center) {
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
}

.section-head p {
  max-width: 700px;
  margin: 0 auto !important;
}

.section-head:not(.center) p {
  margin-left: 0 !important;
}

.grid,
.grid-2,
.grid-3,
.grid-4,
.geo-answer-grid,
.entity-signal-grid {
  gap: 24px !important;
}

/* Cards -------------------------------------------------- */

.card,
.service-card,
.accounting-focus-card,
.accounting-price-card,
.registration-company-card,
.registration-followup-card,
.registration-matter-card,
.qualification-license-card,
.about-value-card,
.about-advantage-card,
.about-service-card,
.about-vision-card,
.audit-service-card,
.audit-advantage-card,
.audit-process-step,
.contact-channel-card,
.contact-info-panel,
.contact-form-panel,
.contact-prep-card,
.contact-trust-card,
.entity-signal-card,
.geo-answer-card,
.utility-shell {
  border: 0 !important;
  border-radius: var(--column-radius) !important;
  background: var(--column-white) !important;
  box-shadow: var(--column-shadow-card) !important;
}

.card,
.accounting-focus-card,
.accounting-price-card,
.registration-company-card,
.registration-followup-card,
.registration-matter-card,
.about-value-card,
.about-advantage-card,
.about-service-card,
.audit-advantage-card,
.audit-process-step,
.contact-channel-card,
.contact-prep-card,
.contact-trust-card,
.entity-signal-card,
.geo-answer-card {
  padding: var(--column-card-padding) !important;
}

.card-link,
.service-card {
  text-decoration: none !important;
  transition:
    transform .16s ease,
    box-shadow .16s ease;
}

.card-link:hover,
.service-card:hover {
  transform: translateY(-2px);
  box-shadow:
    rgba(17,26,74,.05) 0 8px 16px,
    rgba(17,26,74,.05) 0 4px 8px !important;
}

.card h3,
.service-card h3,
.accounting-focus-card h3,
.geo-answer-card h3 {
  margin-top: 0 !important;
  color: var(--column-indigo-navy) !important;
}

.card p,
.service-card p,
.accounting-focus-card p,
.geo-answer-card p {
  color: var(--column-steel) !important;
}

/* Homepage service cards -------------------------------- */

#services .service-card {
  position: relative !important;
  overflow: hidden;
  min-height: 330px !important;
  padding: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  border: 0 !important;
  background: var(--column-white) !important;
  box-shadow: var(--column-shadow-card) !important;
}

#services .service-card::before {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 20px;
  height: 142px;
  border-radius: var(--column-radius);
  background:
    var(--service-bg)
    center / contain no-repeat,
    var(--column-canvas);
}

#services .service-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 20px;
  height: 142px;
  border-radius: var(--column-radius);
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(227,228,232,.68);
}

#services .service-card > * {
  position: relative;
  z-index: 1;
}

#services .service-card .icon-box {
  margin: 0 !important;
}

#services .service-card h3 {
  margin: 0 !important;
  font-size: 20px !important;
}

#services .service-card p {
  max-width: 92%;
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

.icon-box,
.registration-company-icon,
.registration-matter-icon,
.about-card-icon,
.contact-channel-icon {
  width: 38px !important;
  height: 38px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(68,180,139,.14) !important;
  border-radius: var(--column-radius) !important;
  background: rgba(68,180,139,.08) !important;
  color: var(--column-seafoam-dark) !important;
  box-shadow: none !important;
}

/* Split showcase ---------------------------------------- */

.split {
  gap: 56px !important;
  align-items: center !important;
}

.visual-frame,
.accounting-service-media,
.audit-card-media,
.about-vision-media {
  overflow: hidden;
  border: 0 !important;
  border-radius: var(--column-radius) !important;
  background: var(--column-canvas) !important;
  box-shadow: var(--column-shadow-product) !important;
}

.visual-frame img,
.accounting-service-media img,
.about-vision-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: var(--column-canvas);
}

.audit-feature .visual-frame {
  min-height: 520px;
}

.audit-feature .visual-frame img {
  min-height: 520px;
  object-fit: contain !important;
}

/* Homepage accounting cards ---------------------------- */

.accounting-focus-grid .accounting-focus-card {
  position: relative;
  overflow: hidden;
  min-height: 320px;
  padding-bottom: 168px !important;
}

.accounting-focus-grid .accounting-focus-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 22px;
  height: 126px;
  border-radius: var(--column-radius);
  background:
    var(--accounting-bg)
    center / contain no-repeat,
    var(--column-canvas);
  box-shadow: inset 0 0 0 1px rgba(227,228,232,.68);
}

.accounting-focus-grid .accounting-focus-card > * {
  position: relative;
  z-index: 1;
}

/* Trust / process / answers ----------------------------- */

.process .card {
  position: relative;
  min-height: 190px;
  padding-top: 62px !important;
}

.process .card::before {
  position: absolute;
  top: 24px;
  left: 24px;
  color: var(--column-seafoam-dark);
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;
  font-size: 10px;
}

.process .card:nth-child(1)::before { content: "01"; }
.process .card:nth-child(2)::before { content: "02"; }
.process .card:nth-child(3)::before { content: "03"; }
.process .card:nth-child(4)::before { content: "04"; }

.process .card h3 {
  font-size: 20px !important;
}

.geo-answer-card--highlight,
.registration-company-card--featured,
.contact-channel-card--primary {
  position: relative;
  overflow: hidden;
  border: 0 !important;
  background:
    linear-gradient(180deg, #fffaf7 0%, #ffffff 100%) !important;
  box-shadow: var(--column-shadow-card) !important;
}

.geo-answer-card--highlight::before,
.registration-company-card--featured::before,
.contact-channel-card--primary::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--column-signal-orange);
}

.geo-answer-card > span,
.accounting-service-index,
.about-service-index {
  color: var(--column-seafoam-dark) !important;
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: .02em;
}

/* Audit service cards ----------------------------------- */

.audit-service-list {
  display: grid !important;
  gap: 28px !important;
}

.audit-service-card {
  overflow: hidden;
  display: grid !important;
  grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr) !important;
  border: 0 !important;
  background: var(--column-white) !important;
  box-shadow: var(--column-shadow-card) !important;
}

.audit-card-media {
  min-height: 360px !important;
  background:
    var(--audit-card-image)
    center / contain no-repeat,
    var(--column-canvas) !important;
  box-shadow: none !important;
}

.audit-card-body {
  padding: 32px !important;
}

.audit-card-head {
  grid-template-columns: 40px minmax(0, 1fr) !important;
  gap: 14px !important;
}

.audit-card-head h3 {
  font-size: 26px !important;
}

.audit-detail-grid h4 {
  color: var(--column-indigo-navy) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.audit-detail-grid li,
.audit-note {
  color: var(--column-slate-ink) !important;
}

.audit-detail-grid li::before,
.check-list li::before {
  background: var(--column-seafoam) !important;
}

.audit-note,
.accounting-service-note,
.compliance-note {
  border: 0 !important;
  border-left: 3px solid var(--column-signal-orange) !important;
  border-radius: 0 var(--column-radius) var(--column-radius) 0 !important;
  background: #fffaf7 !important;
  color: var(--column-slate-ink) !important;
}

/* Accounting service rows ------------------------------- */

.accounting-service-stack {
  gap: 28px !important;
}

.accounting-service-row {
  overflow: hidden;
  grid-template-columns: minmax(300px, .78fr) minmax(0, 1.22fr) !important;
  border: 0 !important;
  border-radius: var(--column-radius) !important;
  background: var(--column-white) !important;
  box-shadow: var(--column-shadow-card) !important;
}

.accounting-service-media {
  min-height: 330px !important;
  background:
    var(--accounting-row-bg)
    center / contain no-repeat,
    var(--column-canvas) !important;
  box-shadow: none !important;
}

.accounting-service-media > * {
  opacity: 0 !important;
}

.accounting-service-body {
  padding: 32px !important;
}

.accounting-price-card {
  min-height: 100%;
}

.accounting-price-card--featured {
  border-top: 3px solid var(--column-signal-orange) !important;
}

/* Registration ------------------------------------------ */

.registration-company-card,
.registration-followup-card,
.registration-matter-card {
  border: 0 !important;
  background: var(--column-white) !important;
  box-shadow: var(--column-shadow-card) !important;
}

.registration-company-card--featured {
  background: linear-gradient(180deg, #fffaf7, #fff) !important;
}

.registration-company-card--featured .registration-company-icon {
  border-color: rgba(236,101,43,.16) !important;
  background: rgba(236,101,43,.08) !important;
  color: var(--column-signal-orange) !important;
}

.registration-matter-index {
  color: var(--column-seafoam-dark) !important;
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;
  font-weight: 400 !important;
}

/* Licensing --------------------------------------------- */

.qualification-license-card {
  overflow: hidden;
  grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr) !important;
  border: 0 !important;
  background: var(--column-white) !important;
  box-shadow: var(--column-shadow-card) !important;
}

.qualification-license-summary {
  min-height: 360px;
  padding: 28px !important;
  align-content: start !important;
  color: var(--column-slate-ink) !important;
  background:
    linear-gradient(180deg, rgba(246,246,248,.92), rgba(246,246,248,.98)),
    url("/assets/design/jinshun-b1-permission-approval.png")
    center bottom / 94% auto no-repeat !important;
}

.qualification-license-summary h3,
.qualification-license-summary strong,
.qualification-license-summary p {
  color: var(--column-indigo-navy) !important;
}

.qualification-license-summary .check-list li {
  color: var(--column-slate-ink) !important;
}

.qualification-license-index {
  color: var(--column-seafoam-dark) !important;
  border-color: var(--column-seafoam-dark) !important;
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;
}

.qualification-license-detail-grid {
  padding: 32px !important;
}

/* About -------------------------------------------------- */

.about-intro-grid,
.about-vision-card {
  gap: 48px !important;
}

.about-proof-grid {
  gap: 24px !important;
}

.about-proof-item strong {
  color: var(--column-seafoam-dark) !important;
  font-size: 28px !important;
  font-weight: 500 !important;
}

.about-vision-media {
  min-height: 360px;
}

.about-vision-media img {
  min-height: 360px;
  object-fit: contain !important;
}

.about-vision-block {
  border: 0 !important;
  border-radius: var(--column-radius) !important;
  background: var(--column-white) !important;
  box-shadow: var(--column-shadow-card) !important;
}

.about-vision-block--dark {
  border-left: 3px solid var(--column-signal-orange) !important;
  background: #fffaf7 !important;
}

.about-vision-block span {
  color: var(--column-seafoam-dark) !important;
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;
  font-size: 10px !important;
  font-weight: 400 !important;
}

.about-vision-block--dark span {
  color: var(--column-signal-orange) !important;
}

/* Contact ------------------------------------------------ */

.contact-channel-card,
.contact-info-panel,
.contact-form-panel {
  border: 0 !important;
  background: var(--column-white) !important;
  box-shadow: var(--column-shadow-card) !important;
}

.contact-form-panel {
  overflow: hidden;
}

input,
textarea,
select {
  min-height: 44px;
  border: 1px solid var(--column-line) !important;
  border-radius: var(--column-radius) !important;
  background: var(--column-white) !important;
  color: var(--column-slate-ink) !important;
  box-shadow: none !important;
}

textarea {
  min-height: 128px;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--column-indigo-navy) !important;
  outline: 3px solid rgba(17,26,74,.08) !important;
  outline-offset: 1px;
}

/* Tables / FAQ ------------------------------------------ */

table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden;
  border-radius: var(--column-radius) !important;
  background: var(--column-white) !important;
  box-shadow: var(--column-shadow-card) !important;
}

th {
  background: var(--column-canvas) !important;
  color: var(--column-indigo-navy) !important;
  font-weight: 500 !important;
}

td,
th {
  border-color: var(--column-line) !important;
}

.faq {
  max-width: 960px;
  margin-inline: auto;
  display: grid !important;
  gap: 8px !important;
}

.faq details {
  border: 0 !important;
  border-radius: var(--column-radius) !important;
  background: var(--column-white) !important;
  box-shadow: var(--column-shadow-card) !important;
}

.faq summary {
  padding: 18px 20px !important;
  color: var(--column-indigo-navy) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

.faq details p {
  padding: 0 20px 18px !important;
  color: var(--column-steel) !important;
}

/* Breadcrumbs ------------------------------------------- */

.breadcrumbs,
.audit-breadcrumbs,
.service-breadcrumbs {
  width: min(calc(100% - 64px), var(--column-page-max)) !important;
  margin: 0 auto !important;
  padding-top: 22px !important;
  color: var(--column-steel) !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
}

.breadcrumbs a,
.audit-breadcrumb-link,
.service-breadcrumb-link {
  color: var(--column-indigo-navy) !important;
}

/* CTA ---------------------------------------------------- */

.cta-band,
.about-cta-band {
  overflow: hidden;
  border-radius: var(--column-radius) !important;
  background:
    var(--column-midnight-ink)
    url("/assets/design/column-consultation.svg")
    right center / min(52vw, 720px) auto no-repeat !important;
  color: var(--column-white) !important;
  box-shadow: none !important;
}

.cta-band h2,
.cta-band h3,
.cta-band p,
.about-cta-band h2,
.about-cta-band h3,
.about-cta-band p {
  color: var(--column-white) !important;
}

/* Footer ------------------------------------------------- */

.site-footer {
  background: var(--column-midnight-ink) !important;
  color: rgba(255,255,255,.72) !important;
}

.site-footer .container {
  padding-block: 56px 28px !important;
}

.footer-grid {
  display: none !important;
}

.footer-shell {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: 64px;
  align-items: start;
}

.footer-intro {
  display: grid;
  gap: 18px;
}

.footer-brand {
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: var(--column-white) !important;
  font-size: 18px !important;
  font-weight: 500 !important;
}

.footer-brand img {
  width: 30px !important;
  height: 30px !important;
}

.footer-desc {
  max-width: 460px;
  margin: 0 !important;
  color: rgba(255,255,255,.58) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

.footer-contact-card {
  width: fit-content;
  max-width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  gap: 8px !important;
  align-items: flex-start !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(255,255,255,.62) !important;
  font-size: 12px !important;
  font-style: normal !important;
}

.footer-address-icon {
  width: 16px !important;
  height: 16px !important;
  margin-top: 1px;
  color: var(--column-seafoam-light) !important;
}

.footer-address-copy {
  color: inherit !important;
  font-weight: 400 !important;
}

.footer-direct-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.footer-direct-actions a {
  min-height: 34px;
  padding: 8px 10px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--column-radius);
  background: rgba(255,255,255,.035);
  color: rgba(255,255,255,.76);
  font-size: 11px;
  text-decoration: none;
}

.footer-directory {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr))
    auto;
  gap: 28px;
  align-items: start;
}

.footer-directory h3 {
  margin: 0 0 12px !important;
  color: var(--column-white) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

.footer-links {
  display: grid !important;
  gap: 8px !important;
}

.footer-links a {
  color: rgba(255,255,255,.55) !important;
  font-size: 11px !important;
  font-weight: 300 !important;
  line-height: 1.45 !important;
  text-decoration: none !important;
}

.footer-links a:hover {
  color: var(--column-white) !important;
}

.footer-qr-wrap {
  margin: 0 !important;
  display: grid !important;
  justify-items: center !important;
  gap: 8px !important;
  color: rgba(255,255,255,.52) !important;
  font-size: 10px !important;
}

.footer-qr {
  width: 78px !important;
  height: 78px !important;
  border: 4px solid var(--column-white);
  border-radius: 4px;
  background: var(--column-white);
}

.footer-bottom {
  margin-top: 36px !important;
  padding-top: 18px !important;
  display: flex !important;
  justify-content: space-between !important;
  gap: 20px !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.38) !important;
  font-size: 10px !important;
  line-height: 1.5 !important;
}

/* Responsive -------------------------------------------- */

@media (max-width: 1280px) {
  .header-main,
  .hero-inner,
  .audit-hero-layout,
  .service-hero-layout,
  .breadcrumbs,
  .audit-breadcrumbs,
  .service-breadcrumbs {
    width: min(calc(100% - 40px), var(--column-page-max)) !important;
  }

  .header-contact-label {
    display: none !important;
  }

  .nav-link {
    padding-inline: 8px !important;
    font-size: 11px !important;
  }
}

@media (max-width: 1100px) {
  .container {
    width: min(calc(100% - 32px), var(--column-page-max)) !important;
  }

  .header-main {
    width: min(calc(100% - 32px), var(--column-page-max)) !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px !important;
  }

  .nav-menu {
    display: none !important;
    position: absolute !important;
    top: 62px;
    left: 16px;
    right: 16px;
    max-height: calc(100vh - 80px);
    overflow: auto;
    padding: 8px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px !important;
    border: 1px solid var(--column-line) !important;
    background: rgba(255,255,255,.98) !important;
    box-shadow: var(--column-shadow-product) !important;
  }

  .nav-menu.is-open {
    display: grid !important;
  }

  .nav-link {
    min-height: 42px !important;
    padding: 12px !important;
    justify-content: flex-start !important;
    font-size: 13px !important;
  }

  .header-contact {
    display: none !important;
  }

  .menu-toggle {
    display: grid !important;
  }

  .hero-inner,
  .audit-hero-layout,
  .service-hero-layout {
    width: min(calc(100% - 32px), var(--column-page-max)) !important;
    min-height: auto !important;
    padding: 64px 0 !important;
    grid-template-columns: 1fr !important;
    gap: 44px !important;
  }

  .column-hero-visual {
    min-height: 460px;
  }

  .audit-service-card,
  .accounting-service-row,
  .qualification-license-card {
    grid-template-columns: 1fr !important;
  }

  .audit-card-media,
  .accounting-service-media,
  .qualification-license-summary {
    min-height: 320px !important;
  }

  .footer-shell {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

@media (max-width: 820px) {
  .container {
    width: min(calc(100% - 28px), var(--column-page-max)) !important;
  }

  h1,
  .hero h1,
  .page-hero h1,
  .audit-page-hero h1,
  .service-page-hero h1 {
    font-size: clamp(38px, 10vw, 50px) !important;
  }

  h2,
  .section-head h2 {
    font-size: clamp(30px, 8vw, 40px) !important;
  }

  .hero-points {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .hero-point strong {
    font-size: 24px !important;
  }

  .column-product-card--primary {
    width: 78%;
  }

  .column-product-card--floating {
    width: 48%;
  }

  .split {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  .footer-directory {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-qr-wrap {
    justify-self: start !important;
  }

  .footer-bottom {
    flex-direction: column;
  }
}

@media (max-width: 600px) {
  .header-main {
    width: calc(100% - 24px) !important;
  }

  .brand img {
    width: 30px !important;
    height: 30px !important;
  }

  .brand-name {
    max-width: 180px;
    overflow: hidden;
    font-size: 12px !important;
    text-overflow: ellipsis;
  }

  .brand-subtitle {
    display: none !important;
  }

  .language-switch {
    height: 36px !important;
    padding-inline: 8px !important;
  }

  .language-switch > span:last-child {
    display: none;
  }

  .menu-toggle {
    width: 36px !important;
    height: 36px !important;
  }

  .nav-menu {
    grid-template-columns: 1fr;
  }

  .section,
  .section-soft,
  .section-dark,
  .section-tight {
    padding-block: 56px !important;
  }

  .hero-inner,
  .audit-hero-layout,
  .service-hero-layout {
    width: calc(100% - 28px) !important;
    padding: 52px 0 !important;
    gap: 36px !important;
  }

  .hero-copy,
  .audit-hero-copy,
  .service-hero-copy {
    gap: 20px;
  }

  .hero-lead,
  .page-lead,
  .section-head p,
  .split-copy p,
  .audit-copy p {
    font-size: 16px !important;
  }

  .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .btn {
    width: 100%;
  }

  .hero-points {
    gap: 10px !important;
  }

  .hero-point strong {
    font-size: 21px !important;
  }

  .hero-point span {
    font-size: 10px !important;
  }

  .column-hero-visual {
    min-height: 390px;
  }

  .column-halftone {
    inset: 0 -22px 0 0;
  }

  .column-product-card--primary {
    top: 28px;
    left: 0;
    width: 86%;
    padding: 18px;
  }

  .column-product-card--floating {
    right: 0;
    bottom: 22px;
    width: 56%;
    padding: 16px;
  }

  .column-product-card__metric {
    margin-top: 18px;
    padding-bottom: 16px;
  }

  .column-product-card__metric strong {
    font-size: 32px;
  }

  .column-sparkline {
    width: 90px;
  }

  .column-service-status {
    padding: 10px 0;
  }

  .column-bar-chart {
    height: 58px;
    margin-top: 16px;
  }

  .column-product-card--floating p {
    display: none;
  }

  #services .service-card {
    min-height: 300px !important;
  }

  .accounting-focus-grid .accounting-focus-card {
    min-height: 290px;
  }

  .audit-feature .visual-frame,
  .audit-feature .visual-frame img {
    min-height: 320px;
  }

  .audit-card-body,
  .accounting-service-body,
  .qualification-license-detail-grid {
    padding: 24px !important;
  }

  .audit-detail-grid {
    grid-template-columns: 1fr !important;
  }

  .footer-directory {
    grid-template-columns: 1fr 1fr;
    gap: 24px 20px;
  }

  .footer-qr {
    width: 72px !important;
    height: 72px !important;
  }
}

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


/* =========================================================
   Stage 14C — Visual Director corrections from 120 renders
   Evidence-driven fixes after desktop/tablet/mobile review.
   ========================================================= */

/* Remove the legacy homepage photographic/dark overlay.
   The Column hero is a light editorial canvas with its product
   visual supplied by ColumnHeroVisual instead. */
.hero::before {
  content: none !important;
}

/* Editorial breadcrumbs: the legacy pill treatment was still
   spanning the hero at full width because old source styles
   remained more specific. */
.audit-page-hero .breadcrumbs,
.service-page-hero .breadcrumbs {
  width: fit-content !important;
  max-width: 100% !important;
  min-height: auto !important;
  margin: 0 0 28px !important;
  padding: 0 !important;
  align-items: center !important;
  gap: 7px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--column-steel) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  font-size: 11px !important;
  font-weight: 400 !important;
}

.audit-breadcrumb-link,
.audit-breadcrumb-current,
.service-breadcrumb-link,
.service-breadcrumb-current {
  min-height: auto !important;
  padding: 0 !important;
  gap: 5px !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--column-steel) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
}

.audit-breadcrumb-link,
.service-breadcrumb-link {
  color: var(--column-indigo-navy) !important;
}

.audit-breadcrumb-link:hover,
.service-breadcrumb-link:hover {
  background: transparent !important;
  color: var(--column-indigo-navy) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.audit-breadcrumb-current,
.service-breadcrumb-current {
  color: var(--column-steel) !important;
}

.audit-breadcrumb-separator,
.service-breadcrumb-separator {
  width: 12px !important;
  height: auto !important;
  color: var(--column-mist) !important;
}

.audit-breadcrumb-link svg,
.service-breadcrumb-link svg {
  width: 12px !important;
  height: 12px !important;
  color: var(--column-seafoam-dark) !important;
}

/* Service/detail heroes were visually too tall once the old
   pill breadcrumb was removed. Keep the homepage cinematic,
   but make service and article heroes more editorial. */
.audit-hero-layout,
.service-hero-layout {
  min-height: 520px !important;
  padding: 40px 0 64px !important;
  gap: 56px !important;
}

/* The service badges survived from the dark legacy hero as
   almost invisible white text. Convert them to quiet utility
   chips using Column's line/canvas treatment. */
.audit-hero-badges,
.service-hero-badges {
  margin-top: 8px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
}

.audit-hero-badges span,
.service-hero-badges span {
  min-height: 28px !important;
  padding: 0 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  border: 1px solid var(--column-line) !important;
  border-radius: var(--column-radius) !important;
  background: rgba(255,255,255,.68) !important;
  color: var(--column-steel) !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}

/* Give the large product panel a business-specific visual.
   This keeps one shared component while avoiding a generic
   illustration on every core service page. */
.audit-page-hero .audit-hero-panel {
  --column-panel-visual:
    url("/assets/design/column-audit-report.svg");
}

.service-page-hero--accounting .service-hero-panel {
  --column-panel-visual:
    url("/assets/design/column-accounting-ledger.svg");
}

.service-page-hero--registration .service-hero-panel {
  --column-panel-visual:
    url("/assets/design/column-registration-flow.svg");
}

.service-page-hero--qualification .service-hero-panel {
  --column-panel-visual:
    url("/assets/design/column-licensing-matrix.svg");
}

.service-page-hero--about .service-hero-panel {
  --column-panel-visual:
    url("/assets/design/column-hero-network.svg");
}

.audit-hero-panel,
.service-hero-panel,
.hero-panel {
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.98) 0 36%,
      rgba(255,255,255,.76) 64%,
      rgba(255,255,255,.42) 100%
    ),
    var(
      --column-panel-visual,
      url("/assets/design/column-service-scene.svg")
    )
    center bottom / 94% auto no-repeat !important;
}

/* Homepage core-service cards:
   site.css left `inset:0` and a dark pseudo-overlay active.
   That made the media fill the card and placed navy text over
   a dark image while leaving a large empty white region.
   Explicitly reset all inset/background properties. */
#services .service-card {
  min-height: 360px !important;
  padding: 24px 24px 192px !important;
  gap: 10px !important;
  background: var(--column-white) !important;
}

#services .service-card::before {
  top: auto !important;
  left: 24px !important;
  right: 24px !important;
  bottom: 24px !important;
  width: auto !important;
  height: 144px !important;
  inset: auto 24px 24px 24px !important;
  z-index: 0 !important;
  border-radius: var(--column-radius) !important;
  background:
    var(--service-bg)
    center / contain no-repeat,
    var(--column-canvas) !important;
  transform: none !important;
  filter: none !important;
}

#services .service-card::after {
  top: auto !important;
  left: 24px !important;
  right: 24px !important;
  bottom: 24px !important;
  width: auto !important;
  height: 144px !important;
  inset: auto 24px 24px 24px !important;
  z-index: 0 !important;
  border-radius: var(--column-radius) !important;
  background: transparent !important;
  box-shadow:
    inset 0 0 0 1px rgba(227,228,232,.74) !important;
}

#services .service-card:hover::before {
  transform: none !important;
  filter: none !important;
}

#services .service-card > * {
  z-index: 1 !important;
}

#services .service-card .icon-box {
  width: 38px !important;
  height: 38px !important;
  border: 0 !important;
  background: rgba(68,180,139,.10) !important;
  color: var(--column-seafoam-dark) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

#services .service-card .icon-box::after {
  content: none !important;
}

#services .service-card h3 {
  color: var(--column-indigo-navy) !important;
  text-shadow: none !important;
}

#services .service-card p {
  max-width: 100% !important;
  color: var(--column-steel) !important;
  text-shadow: none !important;
}

/* Homepage accounting cards had the same legacy pseudo-layer
   conflict. Keep one contained illustration at the bottom and
   restore readable content on the white card surface. */
.accounting-focus-grid .accounting-focus-card {
  min-height: 348px !important;
  padding: 24px 24px 176px !important;
  align-content: start !important;
  gap: 10px !important;
  background: var(--column-white) !important;
  color: var(--column-slate-ink) !important;
}

.accounting-focus-grid .accounting-focus-card::before {
  content: none !important;
}

.accounting-focus-grid .accounting-focus-card::after {
  top: auto !important;
  left: 24px !important;
  right: 24px !important;
  bottom: 24px !important;
  width: auto !important;
  height: 128px !important;
  inset: auto 24px 24px 24px !important;
  z-index: 0 !important;
  border-radius: var(--column-radius) !important;
  background:
    var(--accounting-bg)
    center / contain no-repeat,
    var(--column-canvas) !important;
  box-shadow:
    inset 0 0 0 1px rgba(227,228,232,.74) !important;
}

.accounting-focus-grid .accounting-focus-card > * {
  z-index: 1 !important;
}

.accounting-focus-grid .accounting-focus-card .icon-box {
  width: 38px !important;
  height: 38px !important;
  border: 0 !important;
  background: rgba(68,180,139,.10) !important;
  color: var(--column-seafoam-dark) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.accounting-focus-grid .accounting-focus-card .icon-box::after {
  content: none !important;
}

.accounting-focus-grid .accounting-focus-card h3 {
  color: var(--column-indigo-navy) !important;
  text-shadow: none !important;
}

.accounting-focus-grid .accounting-focus-card p {
  color: var(--column-steel) !important;
  text-shadow: none !important;
  line-height: 1.5 !important;
}

/* The homepage itself should now read as the clearest expression
   of Column: light canvas, product UI, quiet hierarchy. */
.hero {
  background:
    radial-gradient(
      circle at 82% 20%,
      rgba(136,222,235,.16),
      transparent 30%
    ),
    radial-gradient(
      circle at 68% 78%,
      rgba(68,180,139,.08),
      transparent 26%
    ),
    var(--column-canvas) !important;
}

.hero-copy {
  position: relative;
  z-index: 3;
}

/* Reduce the visual dominance of repeated centered headings.
   The main service intro can stay centered; supporting page
   sections remain editorial and compact. */
.section-head {
  margin-bottom: 36px !important;
}

.section-head h2 {
  text-wrap: balance;
}

.section-head p {
  text-wrap: pretty;
}

/* Mobile corrections from the supplied 390px renders. */
@media (max-width: 1100px) {
  .audit-page-hero .breadcrumbs,
  .service-page-hero .breadcrumbs {
    margin-bottom: 20px !important;
  }

  .audit-hero-layout,
  .service-hero-layout {
    padding: 36px 0 56px !important;
    gap: 32px !important;
  }
}

@media (max-width: 600px) {
  .hero-inner {
    padding: 46px 0 52px !important;
  }

  .audit-hero-layout,
  .service-hero-layout {
    padding: 28px 0 44px !important;
  }

  .audit-page-hero .breadcrumbs,
  .service-page-hero .breadcrumbs {
    margin-bottom: 16px !important;
    font-size: 10px !important;
  }

  .audit-hero-badges,
  .service-hero-badges {
    margin-top: 4px !important;
  }

  .audit-hero-badges span,
  .service-hero-badges span {
    min-height: 26px !important;
    padding-inline: 8px !important;
    font-size: 10px !important;
  }

  #services .service-card {
    min-height: 338px !important;
    padding: 22px 22px 174px !important;
  }

  #services .service-card::before,
  #services .service-card::after {
    left: 22px !important;
    right: 22px !important;
    bottom: 22px !important;
    height: 128px !important;
    inset: auto 22px 22px 22px !important;
  }

  .accounting-focus-grid .accounting-focus-card {
    min-height: 332px !important;
    padding: 22px 22px 164px !important;
  }

  .accounting-focus-grid .accounting-focus-card::after {
    left: 22px !important;
    right: 22px !important;
    bottom: 22px !important;
    height: 118px !important;
    inset: auto 22px 22px 22px !important;
  }
}


/* =========================================================
   Stage 14D — Final visual refinement
   Based on Stage 14C rendered evidence + Refero Column rules.
   ========================================================= */

/* Page-family hooks -------------------------------------- */

.core-service-page,
.content-hub-page,
.article-page {
  background: var(--column-canvas);
}

.core-service-page--audit .audit-hero-panel,
.article-page--audit .service-hero-panel {
  --column-panel-visual:
    url("/assets/design/column-hero-audit.svg");
}

.core-service-page--accounting .service-hero-panel,
.article-page--accounting .service-hero-panel {
  --column-panel-visual:
    url("/assets/design/column-hero-accounting.svg");
}

.core-service-page--registration .service-hero-panel,
.article-page--registration .service-hero-panel {
  --column-panel-visual:
    url("/assets/design/column-hero-registration.svg");
}

.core-service-page--qualification .service-hero-panel,
.article-page--licensing .service-hero-panel {
  --column-panel-visual:
    url("/assets/design/column-hero-licensing.svg");
}

.content-hub--faq .service-hero-panel {
  --column-panel-visual:
    url("/assets/design/column-hero-knowledge.svg");
}

.content-hub--about .service-hero-panel {
  --column-panel-visual:
    url("/assets/design/column-hero-network.svg");
}

.content-hub--contact .service-hero-panel {
  --column-panel-visual:
    url("/assets/design/column-consultation.svg");
}

/* Core-service and hub hero product panels --------------- */

.core-service-page .audit-hero-panel,
.core-service-page .service-hero-panel,
.content-hub-page .service-hero-panel,
.article-page .service-hero-panel {
  min-height: 430px !important;
  padding: 28px 28px 188px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: var(--column-radius) !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: var(--column-shadow-product) !important;
}

.core-service-page .audit-hero-panel::before,
.core-service-page .service-hero-panel::before,
.content-hub-page .service-hero-panel::before,
.article-page .service-hero-panel::before {
  content: "";
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 28px;
  height: 132px;
  z-index: 0;
  border-radius: var(--column-radius);
  background:
    var(
      --column-panel-visual,
      url("/assets/design/column-hero-knowledge.svg")
    )
    center / cover no-repeat,
    var(--column-canvas);
  box-shadow:
    inset 0 0 0 1px rgba(227,228,232,.76);
}

.core-service-page .audit-hero-panel::after,
.core-service-page .service-hero-panel::after,
.content-hub-page .service-hero-panel::after,
.article-page .service-hero-panel::after {
  content: none !important;
}

.core-service-page .audit-hero-panel > *,
.core-service-page .service-hero-panel > *,
.content-hub-page .service-hero-panel > *,
.article-page .service-hero-panel > * {
  position: relative;
  z-index: 1;
}

.audit-hero-panel-head,
.service-hero-panel-head {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid var(--column-line) !important;
}

.audit-hero-panel-head > span,
.service-hero-panel-head > span {
  color: var(--column-steel) !important;
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: .02em !important;
}

.audit-hero-panel-head > strong,
.service-hero-panel-head > strong {
  color: var(--column-indigo-navy) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-align: right;
}

.audit-hero-service-list,
.service-hero-service-list {
  margin-top: 16px !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.audit-hero-service-list > *,
.service-hero-service-list > * {
  min-width: 0;
  min-height: 42px !important;
  padding: 10px 11px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  border: 1px solid var(--column-line) !important;
  border-radius: var(--column-radius) !important;
  background: var(--column-white) !important;
  color: var(--column-charcoal) !important;
  box-shadow: none !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
}

.audit-hero-service-list svg,
.service-hero-service-list svg {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px;
  color: var(--column-seafoam-dark) !important;
}

.audit-hero-proof,
.service-hero-proof {
  margin-top: 16px !important;
  padding-top: 14px !important;
  border-top: 1px solid var(--column-line) !important;
}

.audit-hero-proof strong,
.service-hero-proof strong {
  display: block;
  color: var(--column-indigo-navy) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

.audit-hero-proof p,
.service-hero-proof p {
  margin: 5px 0 0 !important;
  color: var(--column-steel) !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
}

/* Service hero editorial hierarchy ----------------------- */

.core-service-page .audit-hero-copy h1,
.core-service-page .service-hero-copy h1,
.content-hub-page .service-hero-copy h1,
.article-page .service-hero-copy h1 {
  max-width: 650px !important;
  font-size: clamp(44px, 4.4vw, 56px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.03em !important;
  text-wrap: balance;
}

.core-service-page .page-lead,
.content-hub-page .page-lead,
.article-page .page-lead {
  max-width: 620px !important;
  color: var(--column-steel) !important;
  font-size: 17px !important;
  line-height: 1.45 !important;
  text-wrap: pretty;
}

.core-service-page .hero-actions,
.content-hub-page .hero-actions,
.article-page .hero-actions {
  margin-top: 0 !important;
}

.core-service-page .audit-hero-badges span,
.core-service-page .service-hero-badges span,
.content-hub-page .service-hero-badges span,
.article-page .service-hero-badges span {
  background: rgba(255,255,255,.56) !important;
  color: var(--column-steel) !important;
}

/* Article / knowledge template --------------------------- */

.article-page > .section .container {
  width: min(calc(100% - 64px), 1040px) !important;
  max-width: 1040px !important;
}

.article-page > .section .section-head {
  max-width: 780px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
}

.article-page > .section .section-head.center {
  text-align: left !important;
}

.article-page > .section .section-head p {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.article-page > .section .kicker {
  justify-self: start;
}

.article-page > .section .grid {
  align-items: stretch !important;
}

.article-page > .section .card,
.article-page > .section .geo-answer-card {
  min-height: 100%;
  border: 0 !important;
  background: var(--column-white) !important;
  box-shadow: var(--column-shadow-card) !important;
}

.article-page > .section .card h3 {
  font-size: 19px !important;
  line-height: 1.18 !important;
}

.article-page > .section .card p,
.article-page > .section .card li {
  font-size: 14px !important;
  line-height: 1.55 !important;
}

.article-page .accounting-service-index {
  color: var(--column-seafoam-dark) !important;
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace !important;
  font-size: 10px !important;
  font-weight: 400 !important;
}

.article-page .contact-faq {
  width: min(100%, 880px) !important;
  margin-inline: auto !important;
}

.article-page .contact-faq details {
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--column-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.article-page .contact-faq details:first-child {
  border-top: 1px solid var(--column-line) !important;
}

.article-page .contact-faq summary {
  padding: 17px 4px !important;
  color: var(--column-indigo-navy) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

.article-page .contact-faq details p {
  padding: 0 4px 18px !important;
  color: var(--column-slate-ink) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

/* FAQ hub: turn the long list into a compact knowledge index */

.content-hub--faq .contact-faq {
  width: min(100%, 1060px) !important;
  margin-inline: auto !important;
  columns: 2 420px;
  column-gap: 16px;
}

.content-hub--faq .contact-faq details {
  width: 100%;
  margin: 0 0 10px !important;
  display: inline-block;
  break-inside: avoid;
  border: 0 !important;
  border-radius: var(--column-radius) !important;
  background: var(--column-white) !important;
  box-shadow: var(--column-shadow-card) !important;
}

.content-hub--faq .contact-faq summary {
  padding: 16px 18px !important;
  color: var(--column-indigo-navy) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
}

.content-hub--faq .contact-faq details p {
  padding: 0 18px 18px !important;
  color: var(--column-slate-ink) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

/* Contact: make the form the single elevated product surface */

.content-hub--contact .contact-form-panel {
  border: 0 !important;
  box-shadow: var(--column-shadow-product) !important;
}

.content-hub--contact .contact-info-panel {
  border: 0 !important;
  box-shadow: var(--column-shadow-card) !important;
}

.content-hub--contact input,
.content-hub--contact select {
  min-height: 46px !important;
}

.content-hub--contact textarea {
  min-height: 148px !important;
}

.content-hub--contact .contact-channel-card {
  box-shadow: var(--column-shadow-card) !important;
}

/* About: keep one deliberate dark-surface inversion -------- */

.content-hub--about .about-vision-block--dark {
  border-radius: var(--column-radius) !important;
  background: var(--column-midnight-ink) !important;
  color: rgba(255,255,255,.74) !important;
  box-shadow: none !important;
}

.content-hub--about .about-vision-block--dark h2,
.content-hub--about .about-vision-block--dark h3,
.content-hub--about .about-vision-block--dark strong {
  color: var(--column-white) !important;
}

.content-hub--about .about-vision-block--dark p,
.content-hub--about .about-vision-block--dark li {
  color: rgba(255,255,255,.68) !important;
}

/* Supporting card density -------------------------------- */

.core-service-page .section-head,
.content-hub-page .section-head {
  max-width: 760px !important;
}

.core-service-page .section-head h2,
.content-hub-page .section-head h2,
.article-page .section-head h2 {
  text-wrap: balance;
}

.core-service-page .section-head p,
.content-hub-page .section-head p,
.article-page .section-head p {
  text-wrap: pretty;
}

.core-service-page .card,
.content-hub-page .card,
.article-page .card {
  transition:
    transform .16s ease,
    box-shadow .16s ease;
}

/* Responsive refinement ---------------------------------- */

@media (max-width: 1100px) {
  .core-service-page .audit-hero-panel,
  .core-service-page .service-hero-panel,
  .content-hub-page .service-hero-panel,
  .article-page .service-hero-panel {
    min-height: 390px !important;
  }

  .article-page > .section .container {
    width: min(calc(100% - 32px), 1040px) !important;
  }
}

@media (max-width: 700px) {
  .core-service-page .audit-hero-copy h1,
  .core-service-page .service-hero-copy h1,
  .content-hub-page .service-hero-copy h1 {
    font-size: clamp(34px, 9vw, 42px) !important;
    line-height: 1.04 !important;
    letter-spacing: -.025em !important;
  }

  .article-page .service-hero-copy h1 {
    font-size: clamp(32px, 8.6vw, 40px) !important;
    line-height: 1.05 !important;
    letter-spacing: -.024em !important;
  }

  .core-service-page .page-lead,
  .content-hub-page .page-lead,
  .article-page .page-lead {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  .core-service-page .audit-hero-panel,
  .core-service-page .service-hero-panel,
  .content-hub-page .service-hero-panel {
    min-height: 356px !important;
    padding: 22px 22px 150px !important;
  }

  .core-service-page .audit-hero-panel::before,
  .core-service-page .service-hero-panel::before,
  .content-hub-page .service-hero-panel::before {
    left: 22px;
    right: 22px;
    bottom: 22px;
    height: 104px;
  }

  .audit-hero-service-list,
  .service-hero-service-list {
    gap: 7px !important;
  }

  .audit-hero-service-list > *,
  .service-hero-service-list > * {
    min-height: 38px !important;
    padding: 8px 9px !important;
    font-size: 10px !important;
  }

  .article-page .service-hero-panel {
    display: none !important;
  }

  .article-page .service-hero-layout {
    grid-template-columns: 1fr !important;
  }

  .article-page > .section .container {
    width: calc(100% - 28px) !important;
  }

  .article-page > .section .section-head {
    margin-bottom: 28px !important;
  }

  .article-page > .section .grid-3 {
    grid-template-columns: 1fr !important;
  }

  .content-hub--faq .service-hero-panel {
    display: none !important;
  }

  .content-hub--faq .contact-faq {
    columns: 1;
  }
}

@media (max-width: 480px) {
  .audit-hero-service-list,
  .service-hero-service-list {
    grid-template-columns: 1fr 1fr !important;
  }

  .core-service-page .audit-hero-panel,
  .core-service-page .service-hero-panel,
  .content-hub-page .service-hero-panel {
    padding-inline: 18px !important;
  }

  .core-service-page .audit-hero-panel::before,
  .core-service-page .service-hero-panel::before,
  .content-hub-page .service-hero-panel::before {
    left: 18px;
    right: 18px;
  }

  .content-hub--contact .contact-form-panel {
    box-shadow: var(--column-shadow-card) !important;
  }
}


/* =========================================================
   Stage 14E — Release Candidate typography guard
   Evidence: Stage 14D mobile screenshots showed inherited
   legacy break-all/overflow-wrap:anywhere splitting English
   words inside hero and section headings.
   ========================================================= */

html[lang="en"] h1,
html[lang="en"] h2,
html[lang="en"] h3,
html[lang="en"] h4,
html[lang="en"] .hero h1,
html[lang="en"] .page-hero h1,
html[lang="en"] .audit-page-hero h1,
html[lang="en"] .service-page-hero h1,
html[lang="en"] .section-head h2,
html[lang="en"] .split-copy h2,
html[lang="en"] .cta-band h2,
html[lang="en"] .about-cta-band h2,
html[lang="en"] .contact-info-panel h2,
html[lang="en"] .contact-form-head h2,
html[lang="en"] .registration-company-head h2 {
  overflow-wrap: normal !important;
  word-break: normal !important;
  line-break: auto !important;
  hyphens: none !important;
}

html[lang="en"] .hero h1,
html[lang="en"] .page-hero h1,
html[lang="en"] .audit-page-hero h1,
html[lang="en"] .service-page-hero h1,
html[lang="en"] .section-head h2 {
  text-wrap: balance;
}

@media (max-width: 700px) {
  html[lang="en"] .hero h1,
  html[lang="en"] .core-service-page .audit-hero-copy h1,
  html[lang="en"] .core-service-page .service-hero-copy h1,
  html[lang="en"] .content-hub-page .service-hero-copy h1 {
    font-size: clamp(32px, 8.4vw, 38px) !important;
    line-height: 1.06 !important;
    letter-spacing: -.022em !important;
  }

  html[lang="en"] .article-page .service-hero-copy h1 {
    font-size: clamp(30px, 8vw, 36px) !important;
    line-height: 1.07 !important;
    letter-spacing: -.02em !important;
  }

  html[lang="en"] .section-head h2,
  html[lang="en"] .split-copy h2,
  html[lang="en"] .cta-band h2,
  html[lang="en"] .about-cta-band h2,
  html[lang="en"] .contact-info-panel h2,
  html[lang="en"] .contact-form-head h2,
  html[lang="en"] .registration-company-head h2 {
    font-size: clamp(26px, 7.2vw, 32px) !important;
    line-height: 1.12 !important;
    letter-spacing: -.016em !important;
  }

  html[lang="en"] .hero-lead,
  html[lang="en"] .page-lead {
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }
}

/* =========================================================
   Stage 14E — FAQ 360px overflow guard
   The desktop FAQ uses CSS multi-columns. At 360px the
   legacy inline-block/multicol combination can retain a
   fractional horizontal width even after column-count: 1.
   Collapse it to a normal block flow on mobile.
   ========================================================= */

@media (max-width: 700px) {
  .content-hub--faq,
  .content-hub--faq .container,
  .content-hub--faq .grid,
  .content-hub--faq .grid-3,
  .content-hub--faq .card,
  .content-hub--faq .card-link,
  .content-hub--faq .contact-faq,
  .content-hub--faq .contact-faq details {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .content-hub--faq .grid-3 {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .content-hub--faq .contact-faq {
    width: 100% !important;
    column-count: 1 !important;
    column-width: auto !important;
    column-gap: 0 !important;
  }

  .content-hub--faq .contact-faq details {
    display: block !important;
    width: 100% !important;
    break-inside: auto !important;
  }

  .content-hub--faq .contact-faq summary,
  .content-hub--faq .contact-faq details p,
  .content-hub--faq .card,
  .content-hub--faq .card-link {
    overflow-wrap: break-word !important;
  }
}

/* =========================================================
   Stage 14E — 360px footer intrinsic-grid fix

   Root cause:
   legacy site.css assigns `grid-area: qr` and a fixed wrapper
   width to .footer-qr-wrap. The redesigned footer uses a new
   unnamed grid, so that legacy named-grid placement creates an
   implicit column. At 360px it expands the footer from 360px to
   ~363px. Reset the obsolete grid placement and allow every new
   footer grid item to shrink normally.
   ========================================================= */

.footer-shell,
.footer-intro,
.footer-directory,
.footer-shell > *,
.footer-directory > * {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.footer-qr-wrap {
  grid-area: auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

@media (max-width: 600px) {
  .footer-directory {
    width: 100% !important;
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

  .footer-intro,
  .footer-directory,
  .footer-contact-card,
  .footer-direct-actions {
    width: 100% !important;
  }

  .footer-address-copy {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* =========================================================
   Stage 15A — Jinshun legal-name wrapping guard
   Only accommodates the longer new legal company name.
   ========================================================= */

.brand-name,
.footer-brand span {
  min-width: 0 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

html[lang="en"] .brand-name {
  max-width: 300px;
  font-size: 13px !important;
  line-height: 1.12 !important;
}

@media (max-width: 680px) {
  html[lang="en"] .brand-name {
    max-width: 190px;
    font-size: 11px !important;
  }
}
/* =========================================================
   Stage 15B — Jinshun brand integration refinements
   Keeps the Column system intact; only corrects rebrand-specific
   lockup, QR, long address and long legal-name presentation.
   ========================================================= */

:root {
  --jinshun-gold: #dcb250;
  --jinshun-gold-deep: #b98d2f;
}

.brand {
  gap: 12px !important;
}

.brand img {
  width: 38px !important;
  height: 38px !important;
  object-fit: contain !important;
  flex: 0 0 38px !important;
}

.brand-text {
  min-width: 0 !important;
  max-width: 270px;
}

.brand-name {
  max-width: 100%;
  overflow: hidden;
  color: var(--column-indigo-navy) !important;
  font-size: 14px !important;
  line-height: 1.05 !important;
  text-overflow: ellipsis;
  white-space: nowrap !important;
}

.brand-subtitle {
  max-width: 260px !important;
  overflow: hidden !important;
  color: var(--column-steel) !important;
  font-size: 8.5px !important;
  line-height: 1.15 !important;
  letter-spacing: .025em !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[lang="en"] .brand-name {
  font-size: 13px !important;
}

html[lang="en"] .brand-subtitle {
  max-width: 250px !important;
  font-size: 8px !important;
}

.footer-brand {
  gap: 10px !important;
}

.footer-brand img {
  width: 38px !important;
  height: 38px !important;
  object-fit: contain !important;
  flex: 0 0 38px !important;
}

.footer-brand span {
  min-width: 0 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.footer-contact-card,
.footer-address-copy,
.contact-info-panel,
.contact-channel-card,
.contact-prep-card,
.contact-trust-card {
  min-width: 0 !important;
}

.footer-address-copy {
  line-height: 1.55 !important;
  overflow-wrap: break-word !important;
}

.footer-qr-wrap {
  min-width: 0 !important;
}

.footer-qr {
  width: 96px !important;
  height: 96px !important;
  padding: 5px;
  border-radius: 8px !important;
  background: #fff;
  object-fit: contain !important;
}

.contact-channel-card a[href^="mailto:"],
.contact-info-panel a[href^="mailto:"] {
  overflow-wrap: anywhere;
}

@media (min-width: 1101px) {
  .header-main {
    grid-template-columns:
      minmax(250px, 280px)
      minmax(0, 1fr)
      auto !important;
  }
}

@media (max-width: 1100px) {
  .brand-text {
    max-width: 245px;
  }

  .brand-subtitle {
    max-width: 230px !important;
  }
}

@media (max-width: 680px) {
  .brand {
    gap: 9px !important;
  }

  .brand img {
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
  }

  .brand-text {
    max-width: min(48vw, 180px);
  }

  .brand-name,
  html[lang="en"] .brand-name {
    font-size: 12px !important;
  }

  .brand-subtitle {
    display: none !important;
  }

  .footer-qr {
    width: 104px !important;
    height: 104px !important;
  }
}
/* =========================================================
   Stage 15C — Jinshun post-rebrand visual refinement
   ========================================================= */

:root {
  --jinshun-gold: #dcb250;
  --jinshun-gold-deep: #b98d2f;
}

.brand img {
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px !important;
  padding: 4px;
  border: 1px solid rgba(185, 141, 47, .18);
  border-radius: var(--column-radius) !important;
  background: rgba(220, 178, 80, .07);
  box-sizing: border-box;
  object-fit: contain !important;
}

.brand-text {
  min-width: 0 !important;
}

.brand-name {
  text-overflow: clip !important;
}

html[lang="en"] .brand {
  min-width: 0 !important;
}

html[lang="en"] .brand-text {
  max-width: none !important;
}

html[lang="en"] .brand-name {
  max-width: none !important;
  overflow: visible !important;
  white-space: nowrap !important;
  font-size: 12.5px !important;
  line-height: 1.05 !important;
}

html[lang="en"] .brand-subtitle {
  display: none !important;
}

html[lang="en"] .nav-menu {
  gap: 1px !important;
}

html[lang="en"] .nav-link {
  padding-inline: 7px !important;
  font-size: 11.5px !important;
  letter-spacing: -.005em !important;
}

.footer-brand {
  gap: 12px !important;
}

.footer-brand img {
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px !important;
  padding: 4px;
  border: 1px solid rgba(220, 178, 80, .28);
  border-radius: var(--column-radius) !important;
  background: rgba(255, 255, 255, .035);
  box-sizing: border-box;
  object-fit: contain !important;
}

.footer-brand span {
  font-size: 16px !important;
  line-height: 1.2 !important;
}

.footer-desc {
  max-width: 520px;
  font-size: 12.5px !important;
  line-height: 1.58 !important;
}

.footer-address-copy {
  font-size: 12.5px !important;
  line-height: 1.58 !important;
}

.footer-qr {
  width: 108px !important;
  height: 108px !important;
}

@media (min-width: 981px) {
  html[lang="en"] .contact-channel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  html[lang="en"] .contact-channel-card {
    min-height: 168px !important;
    padding: 20px !important;
  }

  html[lang="en"] .contact-channel-copy > span {
    font-size: 14px !important;
  }

  html[lang="en"] .contact-channel-copy strong {
    font-size: 17px !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    line-height: 1.34 !important;
  }

  html[lang="en"] .contact-channel-copy em {
    max-width: 46ch;
  }

  .contact-channel-card[href^="mailto:"] .contact-channel-copy strong {
    white-space: nowrap !important;
    font-size: 16px !important;
    letter-spacing: -.01em;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
}

.contact-qr-panel {
  scroll-margin-top: 92px;
}

@media (max-width: 680px) {
  .brand img {
    width: 36px !important;
    height: 36px !important;
    flex-basis: 36px !important;
    padding: 3px;
  }

  .brand-name,
  html[lang="en"] .brand-name {
    font-size: 12px !important;
  }

  .footer-brand img {
    width: 42px !important;
    height: 42px !important;
    flex-basis: 42px !important;
  }

  .footer-brand span {
    font-size: 15px !important;
  }

  .footer-desc,
  .footer-address-copy {
    font-size: 12px !important;
  }

  .contact-channel-copy strong {
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  .contact-channel-card[href^="mailto:"] .contact-channel-copy strong {
    white-space: normal !important;
  }
}
/* =========================================================
   Stage 15D3 — clean Column homepage Hero reconstruction
   Reference: user-supplied Column homepage recording.
   Structural DOM is explicit: .column-home-hero__inner > .column-map-hero
   ========================================================= */

.column-home-hero {
  min-height: clamp(
    720px,
    calc(100svh - 62px),
    920px
  ) !important;
  display: block !important;
  position: relative !important;
  overflow: hidden !important;
  background: #f6f6f8 !important;
  color: #111a4a !important;
}

.column-home-hero::before,
.column-home-hero::after {
  content: none !important;
  display: none !important;
}

.column-home-hero__inner {
  width: 100% !important;
  max-width: none !important;
  min-height: clamp(
    720px,
    calc(100svh - 62px),
    920px
  ) !important;
  height: clamp(
    720px,
    calc(100svh - 62px),
    920px
  ) !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  display: block !important;
  isolation: isolate;
  overflow: hidden;
}

/* Full map is a REAL direct child of hero-inner. */
.column-home-hero__inner > .column-map-hero {
  --hero-pointer-x: 0;
  --hero-pointer-y: 0;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  pointer-events: none;
}

.column-map-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* Headline sits directly over the map, matching Column's left overlay. */
.column-home-hero__copy {
  position: absolute !important;
  left: max(
    32px,
    calc((100% - 1200px) / 2)
  ) !important;
  top: 54% !important;
  z-index: 5 !important;
  width: min(
    500px,
    calc(100% - 64px)
  ) !important;
  min-width: 0 !important;
  padding: 0 !important;
  display: grid !important;
  align-content: start !important;
  gap: 14px !important;
  transform: translateY(-50%);
}

.column-home-hero__copy .eyebrow {
  width: fit-content !important;
  min-height: 24px !important;
  padding: 5px 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  border: 1px solid rgba(227,228,232,.86) !important;
  border-radius: 6px !important;
  background: rgba(255,255,255,.44) !important;
  color: #a9acb6 !important;
  box-shadow:
    rgba(17,26,74,.018) 0 1px 2px,
    rgba(255,255,255,.72) 0 1px 0 inset !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 9.5px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

.column-home-hero__copy .eyebrow::before {
  content: none !important;
  display: none !important;
}

.column-home-hero__copy #home-title {
  max-width: 500px !important;
  margin: 0 !important;
  color: #111a4a !important;
  font-size: clamp(46px, 3.65vw, 58px) !important;
  font-weight: 600 !important;
  line-height: .99 !important;
  letter-spacing: -.045em !important;
  text-wrap: balance;
}

html[lang="en"]
.column-home-hero__copy
#home-title {
  max-width: 520px !important;
  font-size: clamp(42px, 3.3vw, 54px) !important;
  line-height: .98 !important;
}

.column-home-hero__copy .hero-lead {
  max-width: 470px !important;
  margin: 0 !important;
  color: #3b3e47 !important;
  font-size: 14px !important;
  line-height: 1.48 !important;
  text-wrap: pretty;
}

html[lang="en"]
.column-home-hero__copy
.hero-lead {
  max-width: 500px !important;
  font-size: 13.5px !important;
}

.column-home-hero__copy .hero-actions {
  margin: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.column-home-hero__copy .btn {
  width: auto !important;
  min-height: 34px !important;
  padding: 8px 13px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  transform: none !important;
}

.column-home-hero__copy .btn::before,
.column-home-hero__copy .btn::after {
  content: none !important;
  display: none !important;
}

.column-home-hero__copy .btn-primary {
  border: 1px solid #111a4a !important;
  background: #111a4a !important;
  color: #fff !important;
  box-shadow:
    rgba(17,26,74,.10) 0 1px 3px,
    rgba(255,255,255,.36) 0 1px 0 inset !important;
}

.column-home-hero__copy .btn-primary:hover {
  border-color: #12161e !important;
  background: #12161e !important;
  transform: none !important;
}

.column-home-hero__copy .btn-outline {
  border: 1px solid rgba(227,228,232,.9) !important;
  background: rgba(255,255,255,.56) !important;
  color: #232730 !important;
  box-shadow:
    rgba(17,26,74,.02) 0 1px 2px,
    rgba(255,255,255,.72) 0 1px 0 inset !important;
}

.column-home-hero__copy .btn-outline:hover {
  border-color: #cbcccf !important;
  background: rgba(255,255,255,.86) !important;
  color: #111a4a !important;
  transform: none !important;
}

.column-home-hero__copy .hero-points {
  max-width: 440px;
  margin-top: 8px !important;
  display: grid !important;
  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    ) !important;
  gap: 18px !important;
}

.column-home-hero__copy .hero-point {
  padding: 0 !important;
  display: grid !important;
  gap: 2px !important;
  border: 0 !important;
  background: transparent !important;
}

.column-home-hero__copy .hero-point strong {
  color: #167e6c !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
}

.column-home-hero__copy .hero-point span {
  margin: 0 !important;
  color: #a9acb6 !important;
  font-size: 8.5px !important;
  line-height: 1.28 !important;
}

/* Small "FDIC-like" contextual badge from the reference, translated
   into an explicit illustrative-workflow label to avoid false claims. */
.column-map-badge {
  position: absolute;
  left: max(
    32px,
    calc((100% - 1200px) / 2)
  );
  top: 25.5%;
  z-index: 3;
  min-height: 23px;
  padding: 5px 9px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(227,228,232,.70);
  border-radius: 4px;
  background: rgba(255,255,255,.34);
  color: #b1b4bd;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;
  font-size: 8px;
  line-height: 1;
  pointer-events: none;
}

/* Floating product card: one card only, aligned over the map. */
.column-map-widget {
  position: absolute;
  left: 56.5%;
  top: 48.5%;
  z-index: 6;
  width: 332px;
  min-height: 244px;
  border: 1px solid rgba(255,255,255,.96);
  border-radius: 8px;
  background: rgba(255,255,255,.94);
  color: #232730;
  box-shadow:
    rgba(30,30,44,.16) 26px 50px 66px,
    rgba(30,30,44,.035) 0 2px 6px,
    rgba(255,255,255,1) 0 0 0 1px inset;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  pointer-events: auto;
  outline: none;
  transform:
    translate3d(
      calc(var(--hero-pointer-x) * 4px),
      calc(var(--hero-pointer-y) * 3px),
      0
    );
  transition:
    background-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms cubic-bezier(.2,.75,.25,1);
}

.column-map-widget:hover {
  background: rgba(255,255,255,.985);
  box-shadow:
    rgba(30,30,44,.19) 30px 56px 74px,
    rgba(30,30,44,.04) 0 2px 7px,
    rgba(255,255,255,1) 0 0 0 1px inset;
  transform:
    translate3d(
      calc(var(--hero-pointer-x) * 5px),
      calc(var(--hero-pointer-y) * 4px - 2px),
      0
    );
}

.column-map-widget:focus-visible {
  outline: 2px solid #111a4a;
  outline-offset: 3px;
}

.column-map-widget__row {
  min-height: 52px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns:
    26px
    minmax(0,1fr)
    auto;
  align-items: center;
  gap: 9px;
}

.column-map-widget__row + .column-map-widget__row {
  border-top: 1px solid rgba(227,228,232,.70);
}

.column-map-account-icon {
  width: 23px;
  height: 23px;
  padding: 5px;
  display: grid;
  align-content: center;
  gap: 2px;
  border-radius: 50%;
  box-sizing: border-box;
}

.column-map-account-icon i {
  height: 2px;
  border-radius: 2px;
  background: rgba(255,255,255,.92);
}

.column-map-account-icon--navy {
  background: #111a4a;
}

.column-map-account-icon--green {
  background: #44b48b;
}

.column-map-widget__copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.column-map-widget__copy small,
.column-map-widget__row em {
  color: #a9acb6;
  font-size: 8px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.15;
}

.column-map-widget__copy strong {
  color: #232730;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.15;
}

.column-map-widget__connector {
  height: 0;
  margin-left: 23px;
  position: relative;
  z-index: 2;
  color: #a9acb6;
  font-size: 10px;
  line-height: 0;
  pointer-events: none;
}

.column-map-widget__tabs {
  min-height: 34px;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  gap: 2px;
  border-top: 1px solid #e3e4e8;
  border-bottom: 1px solid #e3e4e8;
}

.column-map-widget__tabs button {
  min-height: 24px;
  padding: 5px 7px !important;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0 !important;
  border-radius: 5px !important;
  background: transparent !important;
  color: #a9acb6 !important;
  box-shadow: none !important;
  cursor: pointer;
  font: inherit;
  font-size: 8px !important;
  line-height: 1 !important;
  transform: none !important;
  transition:
    background-color 130ms ease,
    color 130ms ease !important;
}

.column-map-widget__tabs button i {
  width: 6px;
  height: 6px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

.column-map-widget__tabs button:hover {
  background: #f6f6f8 !important;
  color: #3b3e47 !important;
}

.column-map-widget__tabs button[aria-pressed="true"] {
  background: rgba(68,180,139,.06) !important;
  color: #44b48b !important;
}

.column-map-widget__payload {
  min-height: 78px;
  padding: 10px 12px 8px;
  display: grid;
  align-content: start;
  gap: 1px;
  overflow: hidden;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.06),
      rgba(246,246,248,.78)
    );
  color: #b5b8c0;
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;
  font-size: 7px;
  line-height: 1.38;
}

.column-map-widget__payload b {
  color: #167e6c;
  font-weight: 400;
}

.column-map-widget__payload strong {
  color: #94bdb3;
  font-weight: 400;
}

.column-map-widget__footer {
  min-height: 30px;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid rgba(227,228,232,.72);
  color: #b1b4bd;
  font-size: 7px;
  line-height: 1.1;
}

.column-map-widget__status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #44b48b;
}

.column-map-widget__status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #44b48b;
  box-shadow: 0 0 0 3px rgba(68,180,139,.08);
}

/* Scene feedback is deliberately subtle. */
.column-map-hero[data-active-scene="1"]
.column-map-widget {
  box-shadow:
    rgba(22,126,108,.075) 18px 44px 62px,
    rgba(30,30,44,.15) 26px 50px 66px,
    rgba(255,255,255,1) 0 0 0 1px inset;
}

.column-map-hero[data-active-scene="2"]
.column-map-widget {
  box-shadow:
    rgba(68,180,139,.09) 20px 46px 64px,
    rgba(30,30,44,.15) 26px 50px 66px,
    rgba(255,255,255,1) 0 0 0 1px inset;
}

/* Tablet / mobile keep the same visual identity without overflow. */
@media (max-width: 1100px) {
  .column-home-hero__copy {
    left: 32px !important;
    width: min(450px, calc(100% - 64px)) !important;
  }

  .column-map-badge {
    left: 32px;
  }

  .column-map-widget {
    left: auto;
    right: 28px;
    width: 300px;
  }
}

@media (max-width: 760px) {
  .column-home-hero {
    min-height: 920px !important;
  }

  .column-home-hero__inner {
    min-height: 920px !important;
    height: 920px !important;
  }

  .column-home-hero__copy {
    left: 16px !important;
    right: 16px !important;
    top: 42px !important;
    width: auto !important;
    transform: none !important;
    gap: 14px !important;
  }

  .column-home-hero__copy #home-title,
  html[lang="en"]
  .column-home-hero__copy
  #home-title {
    max-width: 355px !important;
    font-size: clamp(37px, 10.4vw, 46px) !important;
    line-height: 1 !important;
  }

  .column-home-hero__copy .hero-lead,
  html[lang="en"]
  .column-home-hero__copy
  .hero-lead {
    max-width: 358px !important;
    font-size: 14px !important;
  }

  .column-home-hero__copy .hero-actions {
    display: flex !important;
    grid-template-columns: none !important;
  }

  .column-home-hero__copy .btn {
    width: auto !important;
  }

  .column-home-hero__copy .hero-points {
    max-width: 360px;
    gap: 10px !important;
  }

  .column-map-badge {
    display: none;
  }

  .column-map-canvas {
    top: 325px;
    height: 595px;
  }

  .column-map-widget {
    left: auto;
    right: 14px;
    top: auto;
    bottom: 72px;
    width: min(310px, calc(100% - 56px));
    transform: none !important;
  }

  .column-map-widget:hover {
    transform: translateY(-2px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .column-map-widget {
    transform: none !important;
    transition: none !important;
  }
}
/* =========================================================
   Stage 15D4 — Regional map pixel/motion calibration + nav refinement
   Keeps Stage 15D3 DOM intact.
   ========================================================= */

/* ---------- Hero geometry / pixel calibration ---------- */

@media (min-width: 761px) {
  .column-home-hero,
  .column-home-hero__inner {
    min-height: clamp(
      720px,
      calc(100svh - 108px),
      820px
    ) !important;

    height: clamp(
      720px,
      calc(100svh - 108px),
      820px
    ) !important;
  }

  .column-home-hero__copy {
    top: 55.5% !important;
    width: min(
      500px,
      calc(100% - 64px)
    ) !important;
  }

  .column-map-widget {
    left: 59% !important;
    top: 39.5% !important;
    width: 310px !important;
    min-height: 232px !important;
  }

  .column-map-widget__row {
    min-height: 49px !important;
  }

  .column-map-widget__payload {
    min-height: 72px !important;
  }

  .column-map-badge {
    top: 25.2% !important;
  }
}

/* Region labels are intentionally quiet: map first, labels second. */
.column-city-labels {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.column-city-label {
  position: absolute;
  min-height: 21px;
  padding: 4px 7px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 999px;
  background: rgba(246,246,248,.52);
  color: rgba(59,62,71,.66);
  box-shadow:
    rgba(17,26,74,.025) 0 1px 2px,
    rgba(255,255,255,.72) 0 1px 0 inset;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 8px;
  font-weight: 500;
  line-height: 1;
  transform:
    translate(
      -50%,
      -50%
    );
}

.column-city-label i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #44b48b;
  box-shadow:
    0 0 0 3px rgba(68,180,139,.08);
}

.column-city-label--dongguan i {
  background: #7ecfe0;
  box-shadow:
    0 0 0 3px rgba(126,207,224,.08);
}

.column-city-label--huizhou i {
  background: #68a2da;
  box-shadow:
    0 0 0 3px rgba(104,162,218,.08);
}

.column-regional-map .column-map-widget {
  box-shadow:
    rgba(30,30,44,.155) 24px 46px 62px,
    rgba(30,30,44,.032) 0 2px 6px,
    rgba(255,255,255,1) 0 0 0 1px inset;
}

/* ---------- Navigation: closer to the supplied Column reference ---------- */

.site-header {
  height: 62px !important;
  min-height: 62px !important;
  border-bottom: 1px solid rgba(227,228,232,.62) !important;
  background: rgba(250,250,251,.82) !important;
  box-shadow: none !important;
  backdrop-filter: blur(18px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(120%) !important;
}

.header-main {
  min-height: 62px !important;
  gap: 24px !important;
}

.nav-menu {
  padding: 0 !important;
  gap: 1px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.nav-link,
.nav-link:link,
.nav-link:visited {
  position: relative !important;
  min-height: 34px !important;
  padding: 8px 11px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #232730 !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  transform: none !important;
  transition:
    color 140ms ease,
    background-color 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease !important;
}

/* Kill every legacy orange/underline pseudo-element. */
.nav-link::before,
.nav-link::after,
.nav-link:hover::before,
.nav-link:hover::after,
.nav-link[aria-current="page"]::before,
.nav-link[aria-current="page"]::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 0 !important;
  transform: none !important;
}

.nav-link:hover {
  border-color: rgba(227,228,232,.72) !important;
  background: rgba(255,255,255,.72) !important;
  color: #000000 !important;
  box-shadow:
    rgba(17,26,74,.025) 0 1px 2px,
    rgba(255,255,255,.78) 0 1px 0 inset !important;
  transform: none !important;
}

.nav-link[aria-current="page"] {
  border-color: rgba(227,228,232,.84) !important;
  background: rgba(255,255,255,.88) !important;
  color: #111a4a !important;
  box-shadow:
    rgba(17,26,74,.035) 0 1px 3px,
    rgba(255,255,255,.84) 0 1px 0 inset !important;
}

.nav-link:focus-visible {
  outline: 2px solid #111a4a !important;
  outline-offset: 2px !important;
}

.header-contact {
  min-height: 36px !important;
  height: 36px !important;
  padding: 6px 10px !important;
  border: 1px solid #111a4a !important;
  border-radius: 8px !important;
  background: #111a4a !important;
  box-shadow:
    rgba(17,26,74,.10) 0 1px 3px,
    rgba(255,255,255,.42) 0 1px 0 inset !important;
  transform: none !important;
  transition:
    background-color 140ms ease,
    border-color 140ms ease !important;
}

.header-contact:hover {
  border-color: #12161e !important;
  background: #12161e !important;
  transform: none !important;
}

.language-switch {
  height: 36px !important;
  min-height: 36px !important;
  padding-inline: 10px !important;
  border: 1px solid #e3e4e8 !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.48) !important;
  color: #232730 !important;
  box-shadow: none !important;
  transform: none !important;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease !important;
}

.language-switch:hover {
  border-color: #cbcccf !important;
  background: #ffffff !important;
  color: #111a4a !important;
  transform: none !important;
}

/* Mobile keeps map labels readable without covering the copy. */
@media (max-width: 760px) {
  .column-home-hero,
  .column-home-hero__inner {
    min-height: 900px !important;
    height: 900px !important;
  }

  .column-map-canvas {
    top: 350px !important;
    height: 550px !important;
  }

  .column-city-labels {
    top: 350px;
    height: 550px;
  }

  .column-city-label {
    font-size: 7px;
    padding: 3px 6px;
  }

  .column-map-widget {
    right: 14px !important;
    bottom: 54px !important;
    width: min(
      292px,
      calc(100% - 62px)
    ) !important;
  }

  .column-home-hero__copy .hero-points {
    margin-top: 5px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .column-regional-map .column-map-widget {
    transform: none !important;
    transition: none !important;
  }
}
/* =========================================================
   Stage 15D5 — map-shape + nav-state correction

   User corrections:
   1. Replace the crude 3-city blob with a cleaner, separate regional
      terrain silhouette and variable dot-field depth.
   2. Hover must NOT look the same as the current/clicked nav state.
   3. Remove the extra regional badge; add nothing else.
   ========================================================= */

/* ---------- Hero / regional dot-map refinement ---------- */

@media (min-width: 761px) {
  .column-map-widget {
    left: 59.5% !important;
    top: 40.5% !important;
    width: 306px !important;
    min-height: 228px !important;
  }
}

/* Stage 15D4's added map badge / city chips are intentionally gone
   from the Stage 15D5 component. These defensive rules prevent any
   stale markup from becoming visible if a browser caches old HTML. */
.column-map-badge,
.column-city-labels,
.column-city-label {
  display: none !important;
}

/* Widget stays quiet so the new geography remains the visual subject. */
.column-regional-map .column-map-widget {
  box-shadow:
    rgba(30,30,44,.145) 22px 44px 60px,
    rgba(30,30,44,.028) 0 2px 5px,
    rgba(255,255,255,1) 0 0 0 1px inset !important;
}

.column-regional-map .column-map-widget:hover {
  box-shadow:
    rgba(30,30,44,.175) 26px 50px 68px,
    rgba(30,30,44,.034) 0 2px 6px,
    rgba(255,255,255,1) 0 0 0 1px inset !important;
}

/* ---------- Navigation: separate NORMAL / HOVER / CURRENT ---------- */

/* Normal */
.nav-link,
.nav-link:link,
.nav-link:visited {
  border-color: transparent !important;
  background: transparent !important;
  color: #232730 !important;
  box-shadow: none !important;
}

/* Hover is intentionally lighter and flatter than current/clicked.
   No white button/pill and no legacy underline. */
.nav-link:not([aria-current="page"]):hover {
  border-color: transparent !important;
  background: rgba(17,26,74,.035) !important;
  color: #111a4a !important;
  box-shadow: none !important;
}

/* Current page is the only persistent surface state. */
.nav-link[aria-current="page"] {
  border-color: rgba(227,228,232,.92) !important;
  background: rgba(255,255,255,.92) !important;
  color: #111a4a !important;
  box-shadow:
    rgba(17,26,74,.04) 0 1px 3px,
    rgba(255,255,255,.86) 0 1px 0 inset !important;
}

/* Hovering the current page must not create a second visual state. */
.nav-link[aria-current="page"]:hover {
  border-color: rgba(227,228,232,.92) !important;
  background: rgba(255,255,255,.92) !important;
  color: #111a4a !important;
  box-shadow:
    rgba(17,26,74,.04) 0 1px 3px,
    rgba(255,255,255,.86) 0 1px 0 inset !important;
}

/* Never restore old orange/underline pseudo elements. */
.nav-link::before,
.nav-link::after,
.nav-link:hover::before,
.nav-link:hover::after,
.nav-link[aria-current="page"]::before,
.nav-link[aria-current="page"]::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

@media (max-width: 760px) {
  .column-map-widget {
    right: 14px !important;
    bottom: 54px !important;
    width: min(
      290px,
      calc(100% - 64px)
    ) !important;
  }
}
/* =========================================================
   Stage 15D6 — fixed-camera regional map + Column palette restoration

   Scope:
   - keep the successful Stage 15D3/15D5 Hero DOM;
   - replace map projection with aspect-preserving fixed camera;
   - restore supplied Column reference fog/mint/cyan/sky/indigo palette;
   - keep navigation Hover != Current and only tune its palette.
   ========================================================= */

:root {
  --column-ref-fog: #f6f6f8;
  --column-ref-ink: #131c4c;
  --column-ref-mint: #8dc8bd;
  --column-ref-cyan: #a2ccde;
  --column-ref-sky: #92badf;
  --column-ref-route: #6b708f;
}

/* ---------- Hero reference palette ---------- */

.column-home-hero {
  background: var(--column-ref-fog) !important;
}

.column-home-hero__inner {
  background:
    radial-gradient(
      circle at 31% 14%,
      rgba(141, 200, 189, .07),
      transparent 25%
    ),
    radial-gradient(
      circle at 76% 34%,
      rgba(146, 186, 223, .065),
      transparent 31%
    ),
    var(--column-ref-fog) !important;
}

.column-home-hero__copy #home-title {
  color: var(--column-ref-ink) !important;
}

.column-home-hero__copy .hero-lead {
  color: #2f3440 !important;
}

/* Reference screenshot is visually tighter than D5. */
@media (min-width: 761px) {
  .column-home-hero,
  .column-home-hero__inner {
    min-height: clamp(
      710px,
      calc(100svh - 104px),
      810px
    ) !important;

    height: clamp(
      710px,
      calc(100svh - 104px),
      810px
    ) !important;
  }

  .column-home-hero__copy {
    top: 56.5% !important;
  }

  .column-map-widget {
    left: 59.4% !important;
    top: 39.5% !important;
    width: 306px !important;
    min-height: 226px !important;
  }
}

/* Product widget is white/quiet with the Column-style off-axis shadow. */
.column-regional-map .column-map-widget {
  border-color: rgba(255, 255, 255, .96) !important;
  background: rgba(255, 255, 255, .95) !important;
  box-shadow:
    rgba(30, 30, 44, .145) 24px 48px 64px,
    rgba(30, 30, 44, .028) 0 2px 6px,
    rgba(255, 255, 255, 1) 0 0 0 1px inset !important;
}

.column-regional-map .column-map-widget:hover {
  background: rgba(255, 255, 255, .985) !important;
  box-shadow:
    rgba(30, 30, 44, .175) 28px 54px 72px,
    rgba(30, 30, 44, .034) 0 2px 7px,
    rgba(255, 255, 255, 1) 0 0 0 1px inset !important;
}

.column-map-account-icon--navy {
  background: var(--column-ref-ink) !important;
}

.column-map-account-icon--green {
  background: #74c5a6 !important;
}

.column-map-widget__tabs button[aria-pressed="true"] {
  background: rgba(116, 197, 166, .07) !important;
  color: #55ad8a !important;
}

.column-map-widget__status {
  color: #55ad8a !important;
}

.column-map-widget__status i {
  background: #55ad8a !important;
  box-shadow:
    0 0 0 3px rgba(85, 173, 138, .08) !important;
}

/* Do not reintroduce D4 badge/chips or any new regional UI. */
.column-map-badge,
.column-city-labels,
.column-city-label {
  display: none !important;
}

/* ---------- Navigation palette calibration ----------
   State logic from Stage 15D5 remains:
   normal != hover != current.
   Only the visual values move closer to the supplied Column reference.
   ---------- */

.site-header {
  border-bottom-color: rgba(227, 228, 232, .60) !important;
  background: rgba(246, 246, 248, .90) !important;
}

.nav-link,
.nav-link:link,
.nav-link:visited {
  color: #20232c !important;
}

/* Hover stays flatter/lighter than clicked/current. */
.nav-link:not([aria-current="page"]):hover {
  border-color: transparent !important;
  background: rgba(19, 28, 76, .026) !important;
  color: #131c4c !important;
  box-shadow: none !important;
}

/* Current stays persistent and visibly distinct. */
.nav-link[aria-current="page"],
.nav-link[aria-current="page"]:hover {
  border-color: rgba(227, 228, 232, .92) !important;
  background: rgba(255, 255, 255, .92) !important;
  color: #131c4c !important;
  box-shadow:
    rgba(19, 28, 76, .038) 0 1px 3px,
    rgba(255, 255, 255, .88) 0 1px 0 inset !important;
}

/* Never allow legacy orange underline/pseudos back. */
.nav-link::before,
.nav-link::after,
.nav-link:hover::before,
.nav-link:hover::after,
.nav-link[aria-current="page"]::before,
.nav-link[aria-current="page"]::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Keep the real business hotline as the primary site action, but tune its
   indigo to the reference Hero ink. */
.header-contact {
  border-color: var(--column-ref-ink) !important;
  background: var(--column-ref-ink) !important;
}

.header-contact:hover {
  border-color: #0f163c !important;
  background: #0f163c !important;
}

.language-switch {
  background: rgba(255, 255, 255, .52) !important;
}

/* Mobile uses the Canvas camera from the component. Do not stretch the map. */
@media (max-width: 760px) {
  .column-home-hero,
  .column-home-hero__inner {
    min-height: 900px !important;
    height: 900px !important;
  }

  .column-map-canvas {
    top: 0 !important;
    height: 100% !important;
  }

  .column-map-widget {
    right: 14px !important;
    bottom: 48px !important;
    width: min(
      288px,
      calc(100% - 66px)
    ) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .column-regional-map .column-map-widget {
    transform: none !important;
    transition: none !important;
  }
}
/* =========================================================
   Stage 15D8 — Hero Atmosphere + Widget Scale + Chinese Type System

   Frozen:
   - Stage 15D7B real regional geometry
   - Canvas route / pointer / ripple algorithm
   - Hero DOM
   - navigation/header interaction states
   - business copy
   - routes / SEO

   Changed:
   - Hero background atmosphere only
   - desktop workflow widget scale only
   - Chinese typography system + semantic wrapping rules
   ========================================================= */

:root {
  --jinshun-zh-font:
    "PingFang SC",
    "Hiragino Sans GB",
    "Microsoft YaHei UI",
    "Microsoft YaHei",
    "Noto Sans CJK SC",
    "Noto Sans SC",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;

  --column-hero-fog: #f6f6f8;
  --column-hero-mint: #97cfc1;
  --column-hero-cyan: #9fcdDA;
  --column-hero-sky: #8bb8de;
  --column-hero-indigo: #131c4c;
}

/* ---------------------------------------------------------
   1. Hero atmosphere
   The reference is not flat white: it has a visible but quiet
   mint -> cyan -> sky field behind the dot map.
   --------------------------------------------------------- */

.column-home-hero {
  background:
    linear-gradient(
      112deg,
      #f6f6f8 0%,
      #f4f8f8 25%,
      #f0f8f7 45%,
      #eef6fa 69%,
      #f3f5fa 86%,
      #f6f6f8 100%
    ) !important;
}

.column-home-hero__inner {
  background:
    radial-gradient(
      ellipse 58% 50% at 30% 14%,
      rgba(151, 207, 193, .18) 0%,
      rgba(151, 207, 193, .105) 31%,
      rgba(151, 207, 193, 0) 70%
    ),
    radial-gradient(
      ellipse 58% 56% at 62% 28%,
      rgba(159, 205, 218, .16) 0%,
      rgba(159, 205, 218, .09) 35%,
      rgba(159, 205, 218, 0) 72%
    ),
    radial-gradient(
      ellipse 52% 62% at 86% 56%,
      rgba(139, 184, 222, .145) 0%,
      rgba(139, 184, 222, .075) 37%,
      rgba(139, 184, 222, 0) 74%
    ),
    linear-gradient(
      112deg,
      rgba(246, 246, 248, .96) 0%,
      rgba(239, 248, 247, .92) 42%,
      rgba(238, 246, 251, .90) 73%,
      rgba(246, 246, 248, .95) 100%
    ) !important;
}

/* Keep the visual field soft; never create a hard panel around the map. */
.column-map-hero {
  background: transparent !important;
}

/* ---------------------------------------------------------
   2. Workflow card scale
   Reference card is a product surface, not a small annotation.
   Only desktop/tablet is enlarged; mobile stays compact.
   --------------------------------------------------------- */

@media (min-width: 761px) {
  .column-map-widget {
    left: 58.6% !important;
    top: 37.8% !important;
    width: 354px !important;
    min-height: 260px !important;
  }

  .column-map-widget__row {
    min-height: 57px !important;
  }

  .column-map-widget__payload {
    min-height: 82px !important;
  }

  .column-map-widget__copy small {
    font-size: 9.5px !important;
    line-height: 1.35 !important;
  }

  .column-map-widget__copy strong {
    font-size: 13px !important;
    line-height: 1.3 !important;
  }

  .column-map-widget__row em {
    font-size: 8.5px !important;
  }

  .column-map-widget__tabs button {
    min-height: 28px !important;
    font-size: 8.5px !important;
  }

  .column-map-widget__payload {
    font-size: 8.5px !important;
    line-height: 1.52 !important;
  }

  .column-map-widget__footer {
    min-height: 30px !important;
    font-size: 7.5px !important;
  }
}

/* ---------------------------------------------------------
   3. Chinese type system
   This sets language behavior first, not arbitrary font sizes.
   --------------------------------------------------------- */

html[lang^="zh"] body,
html[lang^="zh"] button,
html[lang^="zh"] input,
html[lang^="zh"] textarea,
html[lang^="zh"] select {
  font-family: var(--jinshun-zh-font) !important;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Chinese punctuation must not start a line; headings should balance,
   prose should prefer visually complete final lines. */
html[lang^="zh"] :where(
  h1,
  h2,
  h3,
  h4,
  p,
  li,
  summary,
  a,
  button,
  label
) {
  word-break: normal;
  line-break: strict;
}

html[lang^="zh"] :where(
  h1,
  h2,
  h3,
  h4
) {
  overflow-wrap: normal;
  text-wrap: balance;
}

html[lang^="zh"] :where(
  p,
  li
) {
  overflow-wrap: break-word;
  text-wrap: pretty;
}

/* ---------------------------------------------------------
   4. Chinese Hero hierarchy
   Desktop H1 is deliberately sized to ~11 CJK em so the natural
   punctuation break is:
   把财税基础工作做清楚，
   让企业经营更稳
   --------------------------------------------------------- */

html[lang^="zh"] .column-home-hero__copy {
  width: min(
    620px,
    calc(100% - 64px)
  ) !important;
}

html[lang^="zh"] .column-home-hero__copy #home-title {
  width: 11em !important;
  max-width: 11em !important;
  margin: 0 !important;

  color: var(--column-hero-indigo) !important;

  font-family: var(--jinshun-zh-font) !important;
  font-size: clamp(
    54px,
    4.15vw,
    64px
  ) !important;
  font-weight: 700 !important;
  line-height: 1.055 !important;
  letter-spacing: -.042em !important;

  word-break: normal !important;
  line-break: strict !important;
  overflow-wrap: normal !important;
  text-wrap: balance !important;
}

html[lang^="zh"] .column-home-hero__copy .eyebrow,
html[lang^="zh"] .column-home-hero__copy .hero-eyebrow {
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  letter-spacing: .015em !important;
}

html[lang^="zh"] .column-home-hero__copy .hero-lead {
  max-width: 31em !important;
  margin-top: 20px !important;

  color: #4b4f58 !important;

  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.68 !important;
  letter-spacing: .005em !important;

  word-break: normal !important;
  line-break: strict !important;
  overflow-wrap: break-word !important;
  text-wrap: pretty !important;
}

html[lang^="zh"] .column-home-hero__copy .hero-actions {
  margin-top: 22px !important;
}

html[lang^="zh"] .column-home-hero__copy .hero-actions :is(
  a,
  button
) {
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

html[lang^="zh"] .column-home-hero__copy .hero-points {
  margin-top: 27px !important;
}

html[lang^="zh"] .column-home-hero__copy .hero-points strong {
  font-size: 25px !important;
  font-weight: 600 !important;
  line-height: 1.05 !important;
  letter-spacing: -.025em !important;
}

html[lang^="zh"] .column-home-hero__copy .hero-points span,
html[lang^="zh"] .column-home-hero__copy .hero-points small {
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  letter-spacing: .01em !important;
}

/* ---------------------------------------------------------
   5. Chinese section hierarchy
   No content is rewritten. These are semantic reading rules only.
   --------------------------------------------------------- */

html[lang^="zh"] main :where(h2) {
  font-family: var(--jinshun-zh-font) !important;
  font-weight: 650 !important;
  line-height: 1.18 !important;
  letter-spacing: -.03em !important;
  line-break: strict !important;
  text-wrap: balance !important;
}

html[lang^="zh"] main :where(h3) {
  font-family: var(--jinshun-zh-font) !important;
  font-weight: 600 !important;
  line-height: 1.30 !important;
  letter-spacing: -.018em !important;
  line-break: strict !important;
  text-wrap: balance !important;
}

html[lang^="zh"] main :where(
  .section-lead,
  .section-desc,
  .section-description
) {
  max-width: 34em;
  line-height: 1.72 !important;
  letter-spacing: .004em !important;
  line-break: strict !important;
  text-wrap: pretty !important;
}

/* Mobile: preserve hierarchy but let the viewport decide the wrap.
   Do not force desktop's 11-em title width into a narrow phone. */
@media (max-width: 760px) {
  html[lang^="zh"] .column-home-hero__copy {
    width: calc(100% - 32px) !important;
  }

  html[lang^="zh"] .column-home-hero__copy #home-title {
    width: auto !important;
    max-width: 9.2em !important;

    font-size: clamp(
      38px,
      10.6vw,
      43px
    ) !important;
    line-height: 1.08 !important;
    letter-spacing: -.038em !important;
  }

  html[lang^="zh"] .column-home-hero__copy .hero-lead {
    max-width: 22em !important;

    font-size: 15px !important;
    line-height: 1.72 !important;
  }

  html[lang^="zh"] .column-home-hero__copy .hero-actions {
    margin-top: 18px !important;
  }

  html[lang^="zh"] .column-home-hero__copy .hero-points {
    margin-top: 22px !important;
  }
}
/* =========================================================
   Stage 15D8B — Chinese Semantic Typesetting + Sitewide Visual System
   ========================================================= */

:root {
  --js-text-heading: #111a4a;
  --js-text-body: #424650;
  --js-text-secondary: #666b75;
  --js-text-muted: #7c7f88;

  --js-canvas: #f6f6f8;
  --js-surface: #ffffff;
  --js-surface-soft: #fafbfc;
  --js-surface-tint: #f1f7f6;
  --js-surface-cool: #f1f6fa;

  --js-line-soft: rgba(17, 26, 74, .065);
  --js-line-default: rgba(17, 26, 74, .095);
  --js-line-hover: rgba(17, 26, 74, .145);

  --js-seafoam: #44b48b;
  --js-seafoam-dark: #167e6c;
  --js-cyan: #88c8d6;
  --js-sky: #8bb8de;
  --js-indigo: #111a4a;

  --js-shadow-flat:
    rgba(17, 26, 74, .018) 0 1px 1px;

  --js-shadow-card:
    rgba(17, 26, 74, .025) 0 1px 2px,
    rgba(17, 26, 74, .035) 0 4px 10px;

  --js-shadow-card-hover:
    rgba(17, 26, 74, .045) 0 4px 10px,
    rgba(17, 26, 74, .07) 0 14px 30px;

  --js-shadow-product:
    rgba(18, 22, 30, .025) 0 3px 4px,
    rgba(18, 22, 30, .045) 0 14px 28px,
    rgba(18, 22, 30, .06) 0 34px 66px;
}

.zh-semantic-phrase {
  white-space: nowrap;
}

html[lang^="zh"] :where(
  h1,
  h2,
  h3,
  h4,
  p,
  li,
  summary,
  dd,
  dt,
  td,
  th
) {
  line-break: strict;
  word-break: normal;
}

@supports (word-break: auto-phrase) {
  html[lang^="zh"] :where(
    h1,
    h2,
    h3,
    h4,
    p,
    li,
    summary,
    dd,
    dt,
    td,
    th
  ) {
    word-break: auto-phrase;
  }
}

html[lang^="zh"] :where(
  h1,
  h2,
  h3,
  h4
) {
  text-wrap: balance;
  overflow-wrap: normal;
}

html[lang^="zh"] :where(
  p,
  li,
  dd
) {
  text-wrap: pretty;
  overflow-wrap: break-word;
  orphans: 2;
  widows: 2;
}

html[lang^="zh"] .column-home-hero__copy #home-title {
  width: auto !important;
  max-width: 12.2em !important;
}

html[lang^="zh"] .zh-hero-title-group {
  white-space: nowrap;
}

html[lang^="zh"] .zh-hero-title-group--subject,
html[lang^="zh"] .zh-hero-title-group--action,
html[lang^="zh"] .zh-hero-title-group--outcome {
  display: inline;
}

html[lang^="zh"] .zh-hero-title-desktop-break {
  display: initial;
}

@media (max-width: 760px) {
  html[lang^="zh"] .column-home-hero__copy #home-title {
    width: auto !important;
    max-width: none !important;
  }

  html[lang^="zh"] .zh-hero-title-group--subject,
  html[lang^="zh"] .zh-hero-title-group--action,
  html[lang^="zh"] .zh-hero-title-group--outcome {
    display: block;
    width: fit-content;
  }

  html[lang^="zh"] .zh-hero-title-desktop-break {
    display: none;
  }
}

/* Chinese type hierarchy */

html[lang^="zh"] body {
  color: var(--js-text-body);
  font-size: 16px;
  line-height: 1.72;
}

html[lang^="zh"] :where(
  .page-hero h1,
  .audit-page-hero h1,
  .service-page-hero h1,
  .core-service-page .audit-hero-copy h1,
  .core-service-page .service-hero-copy h1,
  .content-hub-page .service-hero-copy h1
) {
  font-size: clamp(44px, 4.1vw, 56px) !important;
  font-weight: 650 !important;
  line-height: 1.10 !important;
  letter-spacing: -.035em !important;
}

html[lang^="zh"] .article-page :where(
  .service-hero-copy h1,
  .audit-hero-copy h1,
  h1
) {
  font-size: clamp(40px, 3.6vw, 50px) !important;
  font-weight: 650 !important;
  line-height: 1.13 !important;
  letter-spacing: -.03em !important;
}

html[lang^="zh"] :where(
  .section-head h2,
  main > section h2
) {
  font-size: clamp(32px, 3vw, 42px) !important;
  font-weight: 620 !important;
  line-height: 1.22 !important;
  letter-spacing: -.028em !important;
}

html[lang^="zh"] .article-page :where(h2) {
  font-size: clamp(27px, 2.25vw, 34px) !important;
  font-weight: 620 !important;
  line-height: 1.30 !important;
  letter-spacing: -.022em !important;
}

html[lang^="zh"] :where(
  .card h3,
  .service-card h3,
  .accounting-focus-card h3,
  .registration-company-card h3,
  .registration-followup-card h3,
  .registration-matter-card h3,
  .qualification-license-card h3,
  .audit-service-card h3,
  .audit-advantage-card h3,
  .about-value-card h3,
  .about-advantage-card h3,
  .about-service-card h3,
  .contact-channel-card h3,
  .contact-prep-card h3,
  .contact-trust-card h3,
  .entity-signal-card h3,
  .geo-answer-card h3
) {
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 1.36 !important;
  letter-spacing: -.016em !important;
}

html[lang^="zh"] .article-page :where(h3) {
  font-size: 21px !important;
  font-weight: 600 !important;
  line-height: 1.40 !important;
  letter-spacing: -.012em !important;
}

html[lang^="zh"] :where(
  .page-lead,
  .section-head p,
  .split-copy > p,
  .audit-copy > p,
  .service-hero-copy > p,
  .audit-hero-copy > p
) {
  color: var(--js-text-secondary) !important;
  font-size: 17px !important;
  line-height: 1.76 !important;
  letter-spacing: .002em !important;
}

html[lang^="zh"] :where(
  .article-page p,
  .article-page li,
  .content-hub-page p,
  .core-service-page .section p
) {
  color: var(--js-text-body) !important;
  font-size: 16px !important;
  line-height: 1.78 !important;
  letter-spacing: .002em !important;
}

html[lang^="zh"] :where(
  .card p,
  .service-card p,
  .accounting-focus-card p,
  .registration-company-card p,
  .registration-followup-card p,
  .registration-matter-card p,
  .qualification-license-card p,
  .audit-service-card p,
  .audit-advantage-card p,
  .about-value-card p,
  .about-advantage-card p,
  .about-service-card p,
  .contact-channel-card p,
  .contact-prep-card p,
  .contact-trust-card p,
  .entity-signal-card p,
  .geo-answer-card p
) {
  color: var(--js-text-secondary) !important;
  font-size: 14px !important;
  line-height: 1.68 !important;
  letter-spacing: .002em !important;
}

html[lang^="zh"] :where(
  .eyebrow,
  .kicker,
  .audit-kicker,
  .services-kicker,
  .breadcrumbs,
  .audit-breadcrumbs,
  .service-breadcrumbs
) {
  line-height: 1.55 !important;
}

html[lang^="zh"] :where(
  h1,
  h2,
  h3,
  h4
) {
  color: var(--js-text-heading) !important;
}

/* Card hierarchy */

:where(
  .card,
  .accounting-focus-card,
  .accounting-price-card,
  .registration-company-card,
  .registration-followup-card,
  .registration-matter-card,
  .qualification-license-card,
  .about-value-card,
  .about-advantage-card,
  .about-service-card,
  .about-vision-card,
  .audit-service-card,
  .audit-advantage-card,
  .audit-process-step,
  .contact-channel-card,
  .contact-prep-card,
  .contact-trust-card,
  .entity-signal-card,
  .geo-answer-card
) {
  border: 1px solid var(--js-line-soft) !important;
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fdfdfe 100%
    ) !important;
  box-shadow: var(--js-shadow-card) !important;
}

:where(
  .card-link,
  .service-card,
  a.accounting-focus-card,
  a.registration-company-card,
  a.registration-followup-card,
  a.registration-matter-card,
  a.qualification-license-card,
  a.audit-service-card,
  a.contact-channel-card,
  a.geo-answer-card
) {
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease !important;
}

:where(
  .card-link,
  .service-card,
  a.accounting-focus-card,
  a.registration-company-card,
  a.registration-followup-card,
  a.registration-matter-card,
  a.qualification-license-card,
  a.audit-service-card,
  a.contact-channel-card,
  a.geo-answer-card
):hover {
  border-color: var(--js-line-hover) !important;
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fbfcfd 100%
    ) !important;
  box-shadow: var(--js-shadow-card-hover) !important;
  transform: translateY(-2px) !important;
}

#services .service-card::before,
.accounting-focus-grid .accounting-focus-card::after {
  background-color: var(--js-surface-soft) !important;
}

:where(
  .icon-box,
  .registration-company-icon,
  .registration-matter-icon,
  .about-card-icon,
  .contact-channel-icon
) {
  border-color: rgba(68, 180, 139, .15) !important;
  background:
    linear-gradient(
      180deg,
      rgba(68, 180, 139, .085),
      rgba(68, 180, 139, .045)
    ) !important;
  color: var(--js-seafoam-dark) !important;
}

:where(
  .visual-frame,
  .accounting-service-media,
  .audit-card-media,
  .about-vision-media,
  .core-service-page .audit-hero-panel,
  .core-service-page .service-hero-panel,
  .content-hub-page .service-hero-panel,
  .article-page .service-hero-panel
) {
  border: 1px solid rgba(17, 26, 74, .07) !important;
  box-shadow: var(--js-shadow-product) !important;
}

.contact-form-panel {
  border: 1px solid rgba(17, 26, 74, .075) !important;
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fcfdfd 100%
    ) !important;
  box-shadow:
    rgba(18, 22, 30, .035) 0 4px 10px,
    rgba(18, 22, 30, .055) 0 18px 38px,
    rgba(18, 22, 30, .065) 0 42px 82px !important;
}

.faq details {
  border: 1px solid var(--js-line-soft) !important;
  background: rgba(255, 255, 255, .78) !important;
  box-shadow: var(--js-shadow-flat) !important;
}

.faq details[open] {
  border-color: var(--js-line-default) !important;
  background: #ffffff !important;
}

.faq summary {
  font-weight: 550 !important;
  line-height: 1.50 !important;
}

html[lang^="zh"] .faq details p {
  font-size: 15px !important;
  line-height: 1.76 !important;
}

@media (max-width: 760px) {
  html[lang^="zh"] :where(
    .page-hero h1,
    .audit-page-hero h1,
    .service-page-hero h1,
    .core-service-page .audit-hero-copy h1,
    .core-service-page .service-hero-copy h1,
    .content-hub-page .service-hero-copy h1,
    .article-page .service-hero-copy h1
  ) {
    font-size: clamp(34px, 9.2vw, 42px) !important;
    line-height: 1.14 !important;
    letter-spacing: -.03em !important;
  }

  html[lang^="zh"] :where(
    .section-head h2,
    main > section h2,
    .article-page h2
  ) {
    font-size: clamp(27px, 7.2vw, 34px) !important;
    line-height: 1.28 !important;
  }

  html[lang^="zh"] :where(
    .page-lead,
    .section-head p,
    .split-copy > p,
    .audit-copy > p,
    .service-hero-copy > p,
    .audit-hero-copy > p
  ) {
    font-size: 15px !important;
    line-height: 1.76 !important;
  }

  html[lang^="zh"] :where(
    .article-page p,
    .article-page li,
    .content-hub-page p,
    .core-service-page .section p
  ) {
    font-size: 15px !important;
    line-height: 1.80 !important;
  }

  html[lang^="zh"] :where(
    .card h3,
    .service-card h3,
    .accounting-focus-card h3,
    .registration-company-card h3,
    .registration-followup-card h3,
    .registration-matter-card h3,
    .qualification-license-card h3,
    .audit-service-card h3,
    .audit-advantage-card h3,
    .about-value-card h3,
    .about-advantage-card h3,
    .about-service-card h3,
    .contact-channel-card h3,
    .contact-prep-card h3,
    .contact-trust-card h3,
    .entity-signal-card h3,
    .geo-answer-card h3
  ) {
    font-size: 18px !important;
    line-height: 1.40 !important;
  }
}
/* =========================================================
   Stage 15D8B-R1 — Specificity + Semantic Layout Calibration

   This is a corrective layer for D8B:
   - no navigation changes
   - no map/widget changes
   - no copy changes
   - no SEO changes
   ========================================================= */

/* ---------------------------------------------------------
   1. Homepage semantic H1:
   use explicit layout geometry instead of measuring a text Range.
   Desktop = 2 semantic rows.
   Mobile = 3 semantic rows.
   --------------------------------------------------------- */

@media (min-width: 761px) {
  html[lang^="zh"] body .column-home-hero__copy #home-title {
    display: grid !important;
    grid-template-columns: max-content max-content !important;
    grid-template-rows: auto auto !important;
    column-gap: 0 !important;
    row-gap: 0 !important;

    width: max-content !important;
    max-width: 100% !important;

    font-size: clamp(
      52px,
      3.65vw,
      56px
    ) !important;
    line-height: 1.055 !important;
    letter-spacing: -.042em !important;
  }

  html[lang^="zh"] body .column-home-hero__copy #home-title
  .zh-hero-title-group--subject {
    grid-column: 1;
    grid-row: 1;
  }

  html[lang^="zh"] body .column-home-hero__copy #home-title
  .zh-hero-title-group--action {
    grid-column: 2;
    grid-row: 1;
  }

  html[lang^="zh"] body .column-home-hero__copy #home-title
  .zh-hero-title-group--outcome {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  html[lang^="zh"] body .column-home-hero__copy #home-title
  .zh-hero-title-desktop-break {
    display: none !important;
  }

  html[lang^="zh"] body .column-home-hero__copy #home-title
  .zh-hero-title-group {
    display: block !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 760px) {
  html[lang^="zh"] body .column-home-hero__copy #home-title {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;

    width: max-content !important;
    max-width: 100% !important;

    font-size: clamp(
      38px,
      9.65vw,
      41px
    ) !important;
    line-height: 1.08 !important;
    letter-spacing: -.038em !important;
  }

  html[lang^="zh"] body .column-home-hero__copy #home-title
  .zh-hero-title-group {
    display: block !important;
    width: max-content !important;
    max-width: 100% !important;
    white-space: nowrap !important;
  }

  html[lang^="zh"] body .column-home-hero__copy #home-title
  .zh-hero-title-desktop-break {
    display: none !important;
  }
}

/* ---------------------------------------------------------
   2. Page / article Chinese H1 hierarchy.
   Previous D8B :where() selectors lost to legacy !important rules.
   These selectors intentionally carry stronger specificity.
   --------------------------------------------------------- */

html[lang^="zh"] body main h1:not(#home-title) {
  color: var(--js-text-heading) !important;
  font-family: var(--jinshun-zh-font) !important;
  font-weight: 650 !important;
  line-height: 1.10 !important;
  letter-spacing: -.035em !important;

  line-break: strict !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  text-wrap: balance !important;
}

html[lang^="zh"] body main .article-page h1:not(#home-title) {
  line-height: 1.13 !important;
  letter-spacing: -.03em !important;
}

/* Hero / page lead paragraphs */
html[lang^="zh"] body main :is(
  .service-hero-copy,
  .audit-hero-copy,
  .page-hero-copy,
  .split-copy,
  .audit-copy
) > p {
  color: var(--js-text-secondary) !important;
  font-size: 17px !important;
  line-height: 1.72 !important;
  letter-spacing: .002em !important;
  line-break: strict !important;
  word-break: normal !important;
  text-wrap: pretty !important;
}

/* Long-form editorial body */
html[lang^="zh"] body main .article-page :is(
  section,
  article,
  .article-body,
  .content
) p {
  color: var(--js-text-body) !important;
  line-height: 1.78 !important;
}

/* ---------------------------------------------------------
   3. Card hierarchy specificity correction.
   [class] + body/main prevents old site.css from winning.
   --------------------------------------------------------- */

body main :is(
  .card,
  .service-card,
  .accounting-focus-card,
  .accounting-price-card,
  .registration-company-card,
  .registration-followup-card,
  .registration-matter-card,
  .qualification-license-card,
  .about-value-card,
  .about-advantage-card,
  .about-service-card,
  .about-vision-card,
  .audit-service-card,
  .audit-advantage-card,
  .audit-process-step,
  .contact-channel-card,
  .contact-prep-card,
  .contact-trust-card,
  .entity-signal-card,
  .geo-answer-card
)[class] {
  border: 1px solid var(--js-line-soft) !important;
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fdfdfe 100%
    ) !important;
  box-shadow: var(--js-shadow-card) !important;
}

/* Interactive card state is deliberately stronger than rest state. */
body main :is(
  .card-link,
  .service-card,
  a.accounting-focus-card,
  a.registration-company-card,
  a.registration-followup-card,
  a.registration-matter-card,
  a.qualification-license-card,
  a.audit-service-card,
  a.contact-channel-card,
  a.geo-answer-card
)[class] {
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease !important;
}

body main :is(
  .card-link,
  .service-card,
  a.accounting-focus-card,
  a.registration-company-card,
  a.registration-followup-card,
  a.registration-matter-card,
  a.qualification-license-card,
  a.audit-service-card,
  a.contact-channel-card,
  a.geo-answer-card
)[class]:hover {
  border-color: var(--js-line-hover) !important;
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fbfcfd 100%
    ) !important;
  box-shadow: var(--js-shadow-card-hover) !important;
  transform: translateY(-2px) !important;
}

/* Product/data surfaces remain one tier deeper. */
body main :is(
  .visual-frame,
  .accounting-service-media,
  .audit-card-media,
  .about-vision-media,
  .audit-hero-panel,
  .service-hero-panel
)[class] {
  border: 1px solid rgba(17, 26, 74, .07) !important;
  box-shadow: var(--js-shadow-product) !important;
}

/* FAQ stays flatter than cards. */
body main .faq details {
  border: 1px solid var(--js-line-soft) !important;
  background: rgba(255, 255, 255, .78) !important;
  box-shadow: var(--js-shadow-flat) !important;
}

body main .faq details[open] {
  border-color: var(--js-line-default) !important;
  background: #ffffff !important;
}

/* Contact form remains deepest non-Hero product surface. */
body main .contact-form-panel[class] {
  border: 1px solid rgba(17, 26, 74, .075) !important;
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fcfdfd 100%
    ) !important;
  box-shadow:
    rgba(18, 22, 30, .035) 0 4px 10px,
    rgba(18, 22, 30, .055) 0 18px 38px,
    rgba(18, 22, 30, .065) 0 42px 82px !important;
}

@media (max-width: 760px) {
  html[lang^="zh"] body main h1:not(#home-title) {
    line-height: 1.14 !important;
    letter-spacing: -.03em !important;
  }

  html[lang^="zh"] body main .article-page h1:not(#home-title) {
    line-height: 1.16 !important;
  }

  html[lang^="zh"] body main :is(
    .service-hero-copy,
    .audit-hero-copy,
    .page-hero-copy,
    .split-copy,
    .audit-copy
  ) > p {
    font-size: 15px !important;
    line-height: 1.72 !important;
  }
}
/* =========================================================
   Stage 15D8C — Semantic / Color / Brand Refinement

   Frozen:
   - D7B map geometry + route/pointer/ripple
   - D8 Hero atmosphere + workflow widget
   - navigation information architecture/current-hover logic
   - company truth / routes / SEO
   ========================================================= */

:root {
  /* Light canvas */
  --d8c-canvas: #f6f6f8;
  --d8c-canvas-soft: #f9fafb;
  --d8c-surface: #ffffff;
  --d8c-surface-mint: #f2f8f6;
  --d8c-surface-sky: #f2f7fb;

  /* Ink */
  --d8c-ink: #111a4a;
  --d8c-body: #424650;
  --d8c-secondary: #676c75;
  --d8c-muted: #858994;

  /* Dark canvas */
  --d8c-midnight: #001b25;
  --d8c-on-dark: #ffffff;
  --d8c-on-dark-body: rgba(255,255,255,.68);
  --d8c-on-dark-link: rgba(255,255,255,.64);
  --d8c-on-dark-muted: rgba(255,255,255,.43);
  --d8c-on-dark-line: rgba(255,255,255,.11);

  /* Accents */
  --d8c-seafoam: #44b48b;
  --d8c-seafoam-deep: #167e6c;
  --d8c-cyan: #88c8d6;
  --d8c-sky: #8bb8de;

  /* Hairlines/elevation */
  --d8c-line: rgba(17,26,74,.075);
  --d8c-line-hover: rgba(17,26,74,.14);

  --d8c-shadow-editorial:
    rgba(17,26,74,.018) 0 1px 2px,
    rgba(17,26,74,.022) 0 0 0 1px;

  --d8c-shadow-card:
    rgba(17,26,74,.025) 0 2px 5px,
    rgba(17,26,74,.04) 0 10px 24px,
    rgba(17,26,74,.025) 0 0 0 1px;

  --d8c-shadow-card-hover:
    rgba(17,26,74,.04) 0 5px 12px,
    rgba(17,26,74,.065) 0 20px 42px,
    rgba(17,26,74,.035) 0 0 0 1px;
}

/* ---------------------------------------------------------
   A. Correct color scoping:
   light-content heading colors must never leak into dark footer.
   --------------------------------------------------------- */

html[lang^="zh"] body main :is(
  h1,
  h2,
  h3,
  h4
) {
  color: var(--d8c-ink) !important;
}

html[lang^="zh"] body main :is(
  p,
  li,
  dd
) {
  color: var(--d8c-body);
}

/* ---------------------------------------------------------
   B. Chinese semantic headings / page-family composition
   --------------------------------------------------------- */

.zh-heading-phrase,
.zh-semantic-phrase {
  white-space: nowrap !important;
}

html[lang^="zh"] body main h1:not(#home-title) {
  word-break: normal !important;
  line-break: strict !important;
  overflow-wrap: normal !important;
  text-wrap: balance !important;
}

/* Core-service Hero: wider measure, slightly calmer scale. */
@media (min-width: 1101px) {
  html[lang^="zh"] body main.core-service-page :is(
    .audit-hero-layout,
    .service-hero-layout
  ) {
    grid-template-columns:
      minmax(0, 1.04fr)
      minmax(390px, .96fr) !important;
    gap: 56px !important;
  }

  html[lang^="zh"] body main.core-service-page :is(
    .audit-hero-copy,
    .service-hero-copy
  ) {
    max-width: 690px !important;
  }

  html[lang^="zh"] body main.core-service-page :is(
    .audit-hero-copy,
    .service-hero-copy
  ) h1 {
    max-width: 12.5em !important;
    font-size: clamp(
      48px,
      3.55vw,
      54px
    ) !important;
    line-height: 1.12 !important;
    letter-spacing: -.034em !important;
  }

  /* Knowledge/FAQ Hero becomes editorial rather than an empty 2-col product hero. */
  html[lang^="zh"] body main.content-hub-page .service-hero-layout {
    grid-template-columns:
      minmax(0, 790px) !important;
    justify-content: start !important;
    min-height: auto !important;
    gap: 0 !important;
    padding-block:
      78px 68px !important;
  }

  html[lang^="zh"] body main.content-hub-page .service-hero-copy {
    max-width: 790px !important;
  }

  html[lang^="zh"] body main.content-hub-page .service-hero-copy h1 {
    max-width: 14em !important;
    font-size: clamp(
      46px,
      3.35vw,
      52px
    ) !important;
    line-height: 1.14 !important;
  }

  html[lang^="zh"] body main.content-hub-page .service-hero-panel {
    display: none !important;
  }

  /* Article Hero is editorial: broader measure, less oversized headline. */
  html[lang^="zh"] body main.article-page :is(
    .audit-hero-layout,
    .service-hero-layout
  ) {
    grid-template-columns:
      minmax(0, 1.14fr)
      minmax(340px, .86fr) !important;
    gap: 52px !important;
  }

  html[lang^="zh"] body main.article-page :is(
    .audit-hero-copy,
    .service-hero-copy
  ) {
    max-width: 780px !important;
  }

  html[lang^="zh"] body main.article-page h1:not(#home-title) {
    max-width: 16.5em !important;
    font-size: clamp(
      42px,
      3.05vw,
      48px
    ) !important;
    line-height: 1.18 !important;
    letter-spacing: -.028em !important;
  }
}

/* Mobile page-family rhythm */
@media (max-width: 760px) {
  html[lang^="zh"] body main h1:not(#home-title) {
    max-width: 100% !important;
    font-size: clamp(
      33px,
      8.8vw,
      39px
    ) !important;
    line-height: 1.18 !important;
    letter-spacing: -.026em !important;
  }

  html[lang^="zh"] body main.article-page h1:not(#home-title) {
    font-size: clamp(
      32px,
      8.5vw,
      38px
    ) !important;
    line-height: 1.20 !important;
  }
}

/* ---------------------------------------------------------
   C. Card color/elevation recalibration
   --------------------------------------------------------- */

body main :is(
  .card,
  .service-card,
  .accounting-focus-card,
  .accounting-price-card,
  .registration-company-card,
  .registration-followup-card,
  .registration-matter-card,
  .qualification-license-card,
  .about-value-card,
  .about-advantage-card,
  .about-service-card,
  .audit-service-card,
  .audit-advantage-card,
  .contact-channel-card,
  .contact-prep-card,
  .contact-trust-card,
  .entity-signal-card,
  .geo-answer-card
)[class] {
  border-color:
    var(--d8c-line) !important;
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fefefe 100%
    ) !important;
  box-shadow:
    var(--d8c-shadow-card) !important;
}

body main :is(
  .card-link,
  .service-card,
  a.accounting-focus-card,
  a.registration-company-card,
  a.registration-followup-card,
  a.registration-matter-card,
  a.qualification-license-card,
  a.audit-service-card,
  a.contact-channel-card,
  a.geo-answer-card
)[class]:hover {
  border-color:
    var(--d8c-line-hover) !important;
  box-shadow:
    var(--d8c-shadow-card-hover) !important;
  transform:
    translateY(-2px) !important;
}

body main .faq details {
  border-color:
    rgba(17,26,74,.06) !important;
  background:
    rgba(255,255,255,.72) !important;
  box-shadow:
    var(--d8c-shadow-editorial) !important;
}

/* Low-saturation accent surfaces. */
body main :is(
  .icon-box,
  .registration-company-icon,
  .registration-matter-icon,
  .about-card-icon,
  .contact-channel-icon
) {
  color:
    var(--d8c-seafoam-deep) !important;
  border-color:
    rgba(68,180,139,.13) !important;
  background:
    linear-gradient(
      180deg,
      rgba(68,180,139,.075),
      rgba(136,200,214,.04)
    ) !important;
}

/* ---------------------------------------------------------
   D. HEADER — stronger brand, no hotline capsule.
   Navigation selectors intentionally untouched.
   --------------------------------------------------------- */

@media (min-width: 1101px) {
  body .site-header .brand {
    gap: 11px !important;
  }

  body .site-header .brand img {
    width: 48px !important;
    height: 48px !important;
    flex: 0 0 48px !important;
    padding: 4px !important;
  }

  body .site-header .brand-name {
    font-size: 15.5px !important;
    font-weight: 650 !important;
    line-height: 1.08 !important;
    letter-spacing: -.018em !important;
  }

  body .site-header .brand-subtitle {
    max-width: 250px !important;
    font-size: 9.5px !important;
    line-height: 1.12 !important;
    letter-spacing: .025em !important;
  }
}

/* Remove capsule treatment while preserving phone utility. */
body .site-header .header-contact {
  min-height: 38px !important;
  padding: 3px 0 3px 12px !important;
  gap: 8px !important;

  border: 0 !important;
  border-left:
    1px solid
    rgba(17,26,74,.13) !important;
  border-radius: 0 !important;

  background:
    transparent !important;
  box-shadow:
    none !important;

  color:
    var(--d8c-ink) !important;
}

body .site-header .header-contact-icon {
  width: 17px !important;
  height: 17px !important;
  color:
    var(--d8c-seafoam-deep) !important;
}

body .site-header .header-contact-label {
  color:
    var(--d8c-muted) !important;
  font-size: 8.5px !important;
  line-height: 1.1 !important;
}

body .site-header .header-contact strong {
  color:
    var(--d8c-ink) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  line-height: 1.18 !important;
}

body .site-header .header-contact:hover {
  background:
    transparent !important;
  box-shadow:
    none !important;
}

body .site-header .header-contact:hover strong {
  color:
    var(--d8c-seafoam-deep) !important;
}

@media (max-width: 680px) {
  body .site-header .brand img {
    width: 39px !important;
    height: 39px !important;
    flex-basis: 39px !important;
  }

  body .site-header .brand-name {
    font-size: 12.8px !important;
  }
}

/* ---------------------------------------------------------
   E. FOOTER — true dark-mode color rules.
   Fix D8B light-content heading tokens leaking into footer.
   --------------------------------------------------------- */

html body .site-footer {
  background:
    var(--d8c-midnight) !important;
  color:
    var(--d8c-on-dark-body) !important;
}

html[lang^="zh"] body .site-footer .footer-brand,
html[lang^="zh"] body .site-footer .footer-brand span,
html[lang^="zh"] body .site-footer .footer-directory h3 {
  color:
    var(--d8c-on-dark) !important;
}

/* Force supplied footer brand artwork to a monochrome white mark. */
html body .site-footer .footer-brand img {
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px !important;

  padding: 4px !important;

  border:
    1px solid
    rgba(255,255,255,.18) !important;
  border-radius:
    8px !important;

  background:
    transparent !important;

  filter:
    grayscale(1)
    brightness(0)
    invert(1) !important;

  opacity:
    .98;
}

html body .site-footer .footer-brand span {
  font-size: 17px !important;
  font-weight: 550 !important;
  line-height: 1.2 !important;
  letter-spacing: -.012em !important;
}

html body .site-footer .footer-desc,
html body .site-footer .footer-contact-card,
html body .site-footer .footer-address-copy {
  color:
    var(--d8c-on-dark-body) !important;
}

html body .site-footer .footer-links a {
  color:
    var(--d8c-on-dark-link) !important;
}

html body .site-footer .footer-links a:hover {
  color:
    var(--d8c-on-dark) !important;
}

html body .site-footer .footer-direct-actions a {
  border-color:
    rgba(255,255,255,.14) !important;
  background:
    rgba(255,255,255,.035) !important;
  color:
    rgba(255,255,255,.78) !important;
}

html body .site-footer .footer-direct-actions a:hover {
  border-color:
    rgba(255,255,255,.24) !important;
  background:
    rgba(255,255,255,.065) !important;
  color:
    #ffffff !important;
}

html body .site-footer .footer-qr-wrap {
  color:
    rgba(255,255,255,.57) !important;
}

html body .site-footer .footer-bottom {
  border-top-color:
    var(--d8c-on-dark-line) !important;
  color:
    var(--d8c-on-dark-muted) !important;
}

@media (max-width: 680px) {
  html body .site-footer .footer-brand img {
    width: 42px !important;
    height: 42px !important;
    flex-basis: 42px !important;
  }

  html body .site-footer .footer-brand span {
    font-size: 16px !important;
  }
}
/* =========================================================
   Stage 15D8D-Mobile — Responsive Hardening + Language Switch

   THIS STAGE SOLVES ONLY:
   1) Mobile/tablet responsive quality
   2) Language switch visible label = EN / 中文

   FROZEN:
   - card visual redesign
   - icon redesign
   - SVG illustration redesign
   - D7B map geometry/motion
   - D8 Hero atmosphere/widget
   - desktop nav current/hover logic
   ========================================================= */

/* ---------------------------------------------------------
   A. Language switch:
   visually render exactly one token regardless of legacy children/text.
   Existing accessibility label/href remain untouched.
   --------------------------------------------------------- */

body .site-header .language-switch {
  position: static !important;
  inset: auto !important;

  min-width: 40px !important;
  height: 38px !important;
  padding: 0 10px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 1px solid rgba(17,26,74,.10) !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.76) !important;
  color: #111a4a !important;
  box-shadow: none !important;

  font-size: 0 !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  white-space: nowrap !important;

  flex: 0 0 auto !important;
}

body .site-header .language-switch > * {
  display: none !important;
}

html[lang^="zh"] body .site-header .language-switch::after {
  content: "EN";
  display: block;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
}

html[lang="en"] body .site-header .language-switch::after {
  content: "中文";
  display: block;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
}

body .site-header .language-switch:hover {
  border-color: rgba(17,26,74,.17) !important;
  background: #fff !important;
  color: #167e6c !important;
}

/* ---------------------------------------------------------
   B. 1100 and below:
   make Header a deterministic brand + actions geometry.
   --------------------------------------------------------- */

@media (max-width: 1100px) {
  body .site-header .header-main {
    width: min(
      calc(100% - 28px),
      var(--column-page-max)
    ) !important;

    min-height: 62px !important;

    display: grid !important;
    grid-template-columns:
      minmax(0, 1fr)
      max-content !important;

    align-items: center !important;
    gap: 10px !important;
  }

  body .site-header .brand {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  body .site-header .brand-text {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  body .site-header .brand-name {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body .site-header .header-actions {
    min-width: max-content !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    gap: 6px !important;
    flex-wrap: nowrap !important;
  }

  /* The hotline belongs to desktop utility space, not phone Header. */
  body .site-header .header-contact {
    display: none !important;
  }

  body .site-header .menu-toggle {
    position: static !important;
    inset: auto !important;

    display: grid !important;
    place-items: center !important;

    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;

    padding: 0 !important;

    border: 1px solid rgba(17,26,74,.10) !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,.76) !important;
    color: #111a4a !important;
    box-shadow: none !important;

    flex: 0 0 38px !important;
  }

  body .site-header .menu-toggle:hover {
    border-color: rgba(17,26,74,.17) !important;
    background: #fff !important;
  }

  body .site-header .menu-toggle svg {
    width: 18px !important;
    height: 18px !important;
  }

  /* Menu is viewport-bounded instead of inheriting desktop positioning. */
  body .site-header .nav-menu {
    top: 62px !important;
    left: 14px !important;
    right: 14px !important;

    width: auto !important;
    max-width: none !important;
    max-height: calc(100dvh - 78px) !important;

    padding: 8px !important;

    grid-template-columns: 1fr !important;
    gap: 4px !important;

    overflow-y: auto !important;
    overscroll-behavior: contain !important;

    border: 1px solid rgba(17,26,74,.09) !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,.985) !important;

    box-shadow:
      rgba(17,26,74,.06) 0 16px 34px,
      rgba(17,26,74,.03) 0 0 0 1px !important;

    z-index: 90 !important;
  }

  body .site-header .nav-menu.is-open {
    display: grid !important;
  }

  body .site-header .nav-link {
    width: 100% !important;
    min-height: 44px !important;

    padding: 12px 13px !important;

    justify-content: flex-start !important;

    font-size: 13px !important;
    line-height: 1.2 !important;
  }
}

/* ---------------------------------------------------------
   C. Phone Header — preserve brand while guaranteeing no collision.
   --------------------------------------------------------- */

@media (max-width: 680px) {
  body .site-header .header-main {
    width: calc(100% - 24px) !important;
    gap: 8px !important;
  }

  body .site-header .brand {
    gap: 8px !important;
  }

  body .site-header .brand img {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
    padding: 3px !important;
  }

  body .site-header .brand-text {
    max-width:
      calc(100vw - 164px) !important;
  }

  body .site-header .brand-name,
  html[lang="en"] body .site-header .brand-name {
    font-size: 12.5px !important;
    line-height: 1.08 !important;
  }

  body .site-header .brand-subtitle {
    display: none !important;
  }

  body .site-header .language-switch {
    min-width: 38px !important;
    height: 38px !important;
    padding-inline: 8px !important;
  }
}

@media (max-width: 350px) {
  body .site-header .header-main {
    width: calc(100% - 20px) !important;
    gap: 6px !important;
  }

  body .site-header .brand {
    gap: 7px !important;
  }

  body .site-header .brand img {
    width: 36px !important;
    height: 36px !important;
    flex-basis: 36px !important;
  }

  body .site-header .brand-text {
    max-width:
      calc(100vw - 150px) !important;
  }

  body .site-header .brand-name,
  html[lang="en"] body .site-header .brand-name {
    font-size: 11.5px !important;
  }

  body .site-header .header-actions {
    gap: 5px !important;
  }

  body .site-header .language-switch,
  body .site-header .menu-toggle {
    height: 36px !important;
    min-height: 36px !important;
  }

  body .site-header .language-switch {
    min-width: 36px !important;
    padding-inline: 7px !important;
  }

  body .site-header .menu-toggle {
    width: 36px !important;
    min-width: 36px !important;
    flex-basis: 36px !important;
  }
}

/* ---------------------------------------------------------
   D. Mobile page-family measure/rhythm.
   This is responsive calibration, not visual redesign.
   --------------------------------------------------------- */

@media (max-width: 700px) {
  html body main {
    overflow-x: clip;
  }

  html body main :is(
    .hero-inner,
    .audit-hero-layout,
    .service-hero-layout
  ) {
    width: calc(100% - 28px) !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  html body main :is(
    .hero-copy,
    .audit-hero-copy,
    .service-hero-copy
  ) {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  html[lang^="zh"] body main h1:not(#home-title),
  html[lang="en"] body main h1:not(#home-title) {
    width: 100% !important;
    max-width: 100% !important;
  }

  html[lang^="zh"] body main.core-service-page h1:not(#home-title) {
    font-size: clamp(
      31px,
      8.2vw,
      35px
    ) !important;
    line-height: 1.18 !important;
    letter-spacing: -.026em !important;
  }

  html[lang^="zh"] body main.article-page h1:not(#home-title) {
    font-size: clamp(
      28px,
      7.55vw,
      32px
    ) !important;
    line-height: 1.20 !important;
    letter-spacing: -.022em !important;
  }

  html[lang^="zh"] body main.content-hub-page h1:not(#home-title) {
    font-size: clamp(
      30px,
      7.9vw,
      34px
    ) !important;
    line-height: 1.19 !important;
  }

  html[lang="en"] body main.core-service-page h1:not(#home-title),
  html[lang="en"] body main.content-hub-page h1:not(#home-title) {
    font-size: clamp(
      29px,
      7.5vw,
      33px
    ) !important;
    line-height: 1.16 !important;
  }

  html[lang="en"] body main.article-page h1:not(#home-title) {
    font-size: clamp(
      27px,
      7.1vw,
      31px
    ) !important;
    line-height: 1.18 !important;
  }

  html body main :is(
    .hero-lead,
    .page-lead,
    .service-hero-copy > p,
    .audit-hero-copy > p
  ) {
    width: 100% !important;
    max-width: 100% !important;
  }

  html body main .hero-actions {
    width: 100% !important;
  }

  html body main .hero-actions .btn {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Responsive safety only — no card visual changes. */
  html body main :is(
    .audit-hero-panel,
    .service-hero-panel,
    .visual-frame,
    .contact-form-panel
  ) {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  html body main :is(
    img,
    svg,
    canvas,
    video
  ) {
    max-width: 100%;
  }
}

/* ---------------------------------------------------------
   E. Footer layout safety only.
   --------------------------------------------------------- */

@media (max-width: 820px) {
  body .site-footer .container {
    width: calc(100% - 28px) !important;
  }

  body .site-footer .footer-shell {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  body .site-footer .footer-intro,
  body .site-footer .footer-directory {
    min-width: 0 !important;
    width: 100% !important;
  }

  body .site-footer .footer-directory {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
    gap: 28px 20px !important;
  }

  body .site-footer .footer-qr-wrap {
    justify-self: start !important;
  }

  body .site-footer .footer-bottom {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}

@media (max-width: 350px) {
  body .site-footer .container {
    width: calc(100% - 24px) !important;
  }

  body .site-footer .footer-directory {
    gap: 24px 14px !important;
  }
}
/* =========================================================
   Stage 15D8D-R1 — Mobile Edge-Case Calibration

   Fixes only the 9 failing D8D matrix cases:
   - 320px Chinese business-registration CTA geometry
   - 320/360px English long-heading editorial measure

   Frozen:
   - language switch labels/behavior
   - menu geometry
   - cards/icons/SVG
   - desktop design
   - D7B map / D8 Hero
   ========================================================= */

/* ---------------------------------------------------------
   1. 320px CTA containment.
   Force border-box sizing so width:100% includes button padding/border.
   --------------------------------------------------------- */

@media (max-width: 350px) {
  html body main .hero-actions {
    display: grid !important;
    grid-template-columns:
      minmax(0, 1fr) !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    gap: 9px !important;
    margin-inline: 0 !important;
  }

  html body main .hero-actions .btn {
    box-sizing: border-box !important;

    display: inline-flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin-inline: 0 !important;
    padding-inline: 12px !important;

    justify-content: center !important;

    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
}

/* ---------------------------------------------------------
   2. English very-narrow editorial headline scale.
   Do not change Chinese or desktop/tablet typography.
   320px needs a different editorial scale than 390px.
   --------------------------------------------------------- */

@media (max-width: 350px) {
  html[lang="en"] body main.content-hub-page h1:not(#home-title) {
    font-size: 24px !important;
    line-height: 1.15 !important;
    letter-spacing: -.022em !important;

    text-wrap: balance !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  html[lang="en"] body main.article-page h1:not(#home-title) {
    font-size: 23px !important;
    line-height: 1.16 !important;
    letter-spacing: -.021em !important;

    text-wrap: balance !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }
}

/* 360px only needs a smaller correction for very long editorial titles. */
@media (min-width: 351px) and (max-width: 370px) {
  html[lang="en"] body main.article-page h1:not(#home-title) {
    font-size: 24px !important;
    line-height: 1.17 !important;
    letter-spacing: -.021em !important;

    text-wrap: balance !important;
    hyphens: none !important;
  }
}
/* =========================================================
   Stage 15D8D-R3 — Mobile Double-Gutter Final Fix

   Evidence-derived root cause:
   - .container already owns the mobile outer gutter.
   - D8D additionally set inner .service/.audit hero layout to
     calc(100% - 28px), creating a second gutter.
   - At 320px: container=292px but inner layout=264px.
   - Registration copy's auto grid track then grew to 301.95px.

   Fix:
   - inner page-family Hero layouts use 100% of their container;
   - copy grid track is explicitly minmax(0,1fr);
   - actions/buttons stretch inside that real track.

   Frozen:
   - Home Hero
   - language switch
   - mobile menu
   - card/icon/SVG visuals
   - desktop layout
   ========================================================= */

@media (max-width: 700px) {
  /* Home .hero-inner is intentionally NOT included here. */
  html body main :is(
    .audit-hero-layout,
    .service-hero-layout
  ) {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html body main :is(
    .audit-hero-copy,
    .service-hero-copy
  ) {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    grid-template-columns:
      minmax(0, 1fr) !important;
  }

  html body main :is(
    .audit-hero-copy,
    .service-hero-copy
  ) > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body main :is(
    .audit-hero-copy,
    .service-hero-copy
  ) .hero-actions {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    grid-template-columns:
      minmax(0, 1fr) !important;

    margin-inline: 0 !important;
  }

  html body main :is(
    .audit-hero-copy,
    .service-hero-copy
  ) .hero-actions .btn {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin-inline: 0 !important;
  }
}

/* At the hardest phone width, make the CTA geometry deterministic.
   This does not change the visual treatment of the buttons. */
@media (max-width: 350px) {
  html body main :is(
    .audit-hero-copy,
    .service-hero-copy
  ) .hero-actions {
    display: grid !important;
    grid-template-columns:
      minmax(0, 1fr) !important;
    gap: 9px !important;
  }
}
/* =========================================================
   Stage 15D8E — Mobile Chinese Typography System Refinement

   Scope:
   - Chinese only
   - 320–430px phone widths
   - typography, semantic wrapping, card text rhythm, section spacing

   Frozen:
   - English visual system
   - tablet/desktop typography
   - Header/menu/language switch behavior
   - D7B map / D8 Hero visual mechanics
   - card border/shadow visual language
   - icons / SVG illustrations
   ========================================================= */

@media (max-width: 700px) {

  /* -------------------------------------------------------
     1. Chinese base reading system
     ------------------------------------------------------- */

  html[lang^="zh"] body {
    font-family:
      "PingFang SC",
      "Hiragino Sans GB",
      "Microsoft YaHei UI",
      "Microsoft YaHei",
      "Noto Sans CJK SC",
      "Noto Sans SC",
      system-ui,
      -apple-system,
      BlinkMacSystemFont,
      sans-serif !important;

    color: #424650 !important;

    font-size: 15px !important;
    line-height: 1.76 !important;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  html[lang^="zh"] body main {
    color: #424650;
  }

  html[lang^="zh"] body main :is(
    h1,
    h2,
    h3,
    h4,
    p,
    li,
    dd,
    dt,
    summary,
    label
  ) {
    line-break: strict !important;
    word-break: normal !important;
  }

  html[lang^="zh"] body main :is(
    h1,
    h2,
    h3,
    h4
  ) {
    text-wrap: balance !important;
    overflow-wrap: normal !important;
    hanging-punctuation: allow-end;
  }

  html[lang^="zh"] body main :is(
    p,
    li,
    dd
  ) {
    text-wrap: pretty !important;
    overflow-wrap: break-word !important;
    orphans: 2;
    widows: 2;
  }

  html[lang^="zh"] body :is(
    .zh-semantic-phrase,
    .zh-heading-phrase
  ) {
    white-space: nowrap !important;
    word-break: keep-all !important;
  }

  /* Chinese should not use artificial tracking as a hierarchy device. */
  html[lang^="zh"] body main :is(
    h1,
    h2,
    h3,
    h4,
    p,
    li
  ) {
    font-kerning: normal;
  }


  /* -------------------------------------------------------
     2. Page H1 / Hero title system
     ------------------------------------------------------- */

  html[lang^="zh"] body main h1:not(#home-title) {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 0 18px !important;

    color: #111a4a !important;

    font-size: clamp(
      30px,
      8.25vw,
      35px
    ) !important;

    font-weight: 650 !important;
    line-height: 1.17 !important;
    letter-spacing: -.027em !important;

    text-wrap: balance !important;
  }

  html[lang^="zh"] body main.article-page h1:not(#home-title) {
    font-size: clamp(
      28px,
      7.65vw,
      33px
    ) !important;

    line-height: 1.20 !important;
    letter-spacing: -.023em !important;

    margin-bottom: 17px !important;
  }

  html[lang^="zh"] body main.content-hub-page h1:not(#home-title) {
    font-size: clamp(
      29px,
      7.9vw,
      34px
    ) !important;

    line-height: 1.19 !important;
    letter-spacing: -.024em !important;
  }

  /* Homepage explicit semantic three-line title remains structurally frozen.
     Only optical typography is calibrated. */
  html[lang^="zh"] body .column-home-hero__copy #home-title {
    font-size: clamp(
      36px,
      9.25vw,
      40px
    ) !important;

    font-weight: 650 !important;
    line-height: 1.075 !important;
    letter-spacing: -.038em !important;

    margin-bottom: 20px !important;
  }

  html[lang^="zh"] body .column-home-hero__copy #home-title
  .zh-hero-title-group {
    white-space: nowrap !important;
  }


  /* -------------------------------------------------------
     3. Hero lead / introductory copy
     ------------------------------------------------------- */

  html[lang^="zh"] body main :is(
    .hero-lead,
    .page-lead,
    .service-hero-copy > p,
    .audit-hero-copy > p,
    .page-hero-copy > p
  ) {
    max-width: 100% !important;

    margin-top: 0 !important;
    margin-bottom: 22px !important;

    color: #5d626d !important;

    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.78 !important;
    letter-spacing: 0 !important;

    text-wrap: pretty !important;
  }

  html[lang^="zh"] body .column-home-hero__copy .hero-lead {
    max-width: 34em !important;

    font-size: 15px !important;
    line-height: 1.76 !important;

    margin-bottom: 24px !important;
  }


  /* -------------------------------------------------------
     4. Section heading hierarchy
     ------------------------------------------------------- */

  html[lang^="zh"] body main :is(
    .section-heading,
    .section-header,
    .content-heading,
    .service-section-heading
  ) {
    max-width: 100% !important;

    margin-bottom: 26px !important;
  }

  html[lang^="zh"] body main :is(
    .section-heading,
    .section-header,
    .content-heading,
    .service-section-heading
  ) > :is(
    .eyebrow,
    .section-kicker,
    .kicker,
    .overline
  ) {
    margin: 0 0 8px !important;

    color: #167e6c !important;

    font-size: 11.5px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    letter-spacing: .035em !important;
  }

  html[lang^="zh"] body main h2 {
    color: #111a4a !important;

    font-size: clamp(
      23px,
      6.35vw,
      27px
    ) !important;

    font-weight: 650 !important;
    line-height: 1.24 !important;
    letter-spacing: -.021em !important;
  }

  html[lang^="zh"] body main :is(
    .section-heading,
    .section-header,
    .content-heading,
    .service-section-heading
  ) h2 {
    margin: 0 0 12px !important;
  }

  html[lang^="zh"] body main :is(
    .section-heading,
    .section-header,
    .content-heading,
    .service-section-heading
  ) > p {
    max-width: 34em !important;

    margin: 0 !important;

    color: #676c75 !important;

    font-size: 14.5px !important;
    font-weight: 400 !important;
    line-height: 1.72 !important;
    letter-spacing: 0 !important;

    text-wrap: pretty !important;
  }

  html[lang^="zh"] body main h3 {
    color: #111a4a !important;

    font-size: 18px !important;
    font-weight: 620 !important;
    line-height: 1.38 !important;
    letter-spacing: -.012em !important;
  }

  html[lang^="zh"] body main h4 {
    color: #111a4a !important;

    font-size: 15.5px !important;
    font-weight: 600 !important;
    line-height: 1.42 !important;
    letter-spacing: -.006em !important;
  }


  /* -------------------------------------------------------
     5. Section vertical rhythm
     ------------------------------------------------------- */

  html[lang^="zh"] body main :is(
    section,
    .section
  ) {
    scroll-margin-top: 78px;
  }

  html[lang^="zh"] body main :is(
    .service-section,
    .audit-section,
    .accounting-section,
    .registration-section,
    .qualification-section,
    .about-section,
    .contact-section,
    .faq-section,
    .article-section
  ) {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }

  html[lang^="zh"] body main :is(
    .service-section,
    .audit-section,
    .accounting-section,
    .registration-section,
    .qualification-section,
    .about-section,
    .contact-section,
    .faq-section,
    .article-section
  ) + :is(
    .service-section,
    .audit-section,
    .accounting-section,
    .registration-section,
    .qualification-section,
    .about-section,
    .contact-section,
    .faq-section,
    .article-section
  ) {
    padding-top: 48px !important;
  }

  /* Generic grids should breathe consistently without changing their columns. */
  html[lang^="zh"] body main :is(
    .cards-grid,
    .service-grid,
    .audit-grid,
    .accounting-grid,
    .registration-grid,
    .qualification-grid,
    .about-grid,
    .contact-grid
  ) {
    row-gap: 14px !important;
  }


  /* -------------------------------------------------------
     6. Card typography / internal spacing
     visual border/shadow treatment stays frozen.
     ------------------------------------------------------- */

  html[lang^="zh"] body main :is(
    .card,
    .service-card,
    .accounting-focus-card,
    .accounting-price-card,
    .registration-company-card,
    .registration-followup-card,
    .registration-matter-card,
    .qualification-license-card,
    .about-value-card,
    .about-advantage-card,
    .about-service-card,
    .audit-service-card,
    .audit-advantage-card,
    .audit-process-step,
    .contact-channel-card,
    .contact-prep-card,
    .contact-trust-card,
    .entity-signal-card,
    .geo-answer-card
  )[class] {
    padding: 18px 16px !important;
  }

  html[lang^="zh"] body main :is(
    .card,
    .service-card,
    .accounting-focus-card,
    .accounting-price-card,
    .registration-company-card,
    .registration-followup-card,
    .registration-matter-card,
    .qualification-license-card,
    .about-value-card,
    .about-advantage-card,
    .about-service-card,
    .audit-service-card,
    .audit-advantage-card,
    .audit-process-step,
    .contact-channel-card,
    .contact-prep-card,
    .contact-trust-card,
    .entity-signal-card,
    .geo-answer-card
  )[class] :is(
    h3,
    .card-title,
    .service-card-title
  ) {
    margin: 0 0 8px !important;

    color: #111a4a !important;

    font-size: 17px !important;
    font-weight: 620 !important;
    line-height: 1.42 !important;
    letter-spacing: -.01em !important;

    text-wrap: balance !important;
  }

  html[lang^="zh"] body main :is(
    .card,
    .service-card,
    .accounting-focus-card,
    .accounting-price-card,
    .registration-company-card,
    .registration-followup-card,
    .registration-matter-card,
    .qualification-license-card,
    .about-value-card,
    .about-advantage-card,
    .about-service-card,
    .audit-service-card,
    .audit-advantage-card,
    .audit-process-step,
    .contact-channel-card,
    .contact-prep-card,
    .contact-trust-card,
    .entity-signal-card,
    .geo-answer-card
  )[class] :is(
    p,
    li,
    dd
  ) {
    color: #5f646e !important;

    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.72 !important;
    letter-spacing: 0 !important;

    text-wrap: pretty !important;
  }

  html[lang^="zh"] body main :is(
    .card,
    .service-card,
    .accounting-focus-card,
    .accounting-price-card,
    .registration-company-card,
    .registration-followup-card,
    .registration-matter-card,
    .qualification-license-card,
    .about-value-card,
    .about-advantage-card,
    .about-service-card,
    .audit-service-card,
    .audit-advantage-card,
    .audit-process-step,
    .contact-channel-card,
    .contact-prep-card,
    .contact-trust-card,
    .entity-signal-card,
    .geo-answer-card
  )[class] :is(
    p,
    ul,
    ol
  ) + :is(
    p,
    ul,
    ol
  ) {
    margin-top: 10px !important;
  }

  html[lang^="zh"] body main :is(
    .card,
    .service-card,
    .accounting-focus-card,
    .registration-company-card,
    .registration-matter-card,
    .qualification-license-card,
    .audit-service-card,
    .contact-channel-card,
    .geo-answer-card
  )[class] :is(
    .meta,
    .caption,
    small
  ) {
    color: #7f848e !important;

    font-size: 12.5px !important;
    line-height: 1.58 !important;
    letter-spacing: 0 !important;
  }


  /* -------------------------------------------------------
     7. List rhythm
     ------------------------------------------------------- */

  html[lang^="zh"] body main :is(
    ul,
    ol
  ) {
    padding-left: 1.2em;
  }

  html[lang^="zh"] body main :is(
    ul,
    ol
  ) > li + li {
    margin-top: 7px !important;
  }

  html[lang^="zh"] body main :is(
    .check-list,
    .feature-list,
    .article-list,
    .service-list
  ) > li {
    font-size: 14.5px !important;
    line-height: 1.7 !important;
  }


  /* -------------------------------------------------------
     8. FAQ reading system
     ------------------------------------------------------- */

  html[lang^="zh"] body main .faq {
    display: grid;
    gap: 10px !important;
  }

  html[lang^="zh"] body main .faq details {
    padding: 0 !important;
  }

  html[lang^="zh"] body main .faq summary {
    min-height: 52px !important;

    padding: 14px 16px !important;

    color: #111a4a !important;

    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.52 !important;
    letter-spacing: -.006em !important;

    text-wrap: pretty !important;
  }

  html[lang^="zh"] body main .faq details > :not(summary) {
    margin-left: 16px !important;
    margin-right: 16px !important;
  }

  html[lang^="zh"] body main .faq details > p {
    margin-top: 0 !important;
    margin-bottom: 16px !important;

    color: #626772 !important;

    font-size: 14px !important;
    line-height: 1.74 !important;
  }


  /* -------------------------------------------------------
     9. Article / editorial body
     ------------------------------------------------------- */

  html[lang^="zh"] body main.article-page :is(
    .article-body,
    .content,
    article
  ) {
    font-size: 15px !important;
    line-height: 1.8 !important;
  }

  html[lang^="zh"] body main.article-page :is(
    .article-body,
    .content,
    article
  ) p {
    margin-top: 0 !important;
    margin-bottom: 18px !important;

    color: #4d525c !important;

    font-size: 15px !important;
    line-height: 1.8 !important;
  }

  html[lang^="zh"] body main.article-page :is(
    .article-body,
    .content,
    article
  ) h2 {
    margin-top: 36px !important;
    margin-bottom: 14px !important;
  }

  html[lang^="zh"] body main.article-page :is(
    .article-body,
    .content,
    article
  ) h3 {
    margin-top: 28px !important;
    margin-bottom: 10px !important;
  }


  /* -------------------------------------------------------
     10. Buttons / CTA text rhythm
     geometry from D8D remains frozen.
     ------------------------------------------------------- */

  html[lang^="zh"] body main .btn {
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;

    letter-spacing: 0 !important;
  }

  html[lang^="zh"] body main .hero-actions {
    margin-top: 4px !important;
    gap: 10px !important;
  }


  /* -------------------------------------------------------
     11. Contact/form copy
     ------------------------------------------------------- */

  html[lang^="zh"] body main .contact-form-panel {
    padding: 20px 16px !important;
  }

  html[lang^="zh"] body main .contact-form-panel label {
    color: #303642 !important;

    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
  }

  html[lang^="zh"] body main .contact-form-panel :is(
    input,
    textarea,
    select
  ) {
    font-size: 16px !important;
    line-height: 1.4 !important;
  }

  html[lang^="zh"] body main .contact-form-panel :is(
    small,
    .form-help,
    .field-help
  ) {
    font-size: 12.5px !important;
    line-height: 1.58 !important;
  }


  /* -------------------------------------------------------
     12. Footer mobile Chinese hierarchy
     colors remain D8C; only typography/spacing refined.
     ------------------------------------------------------- */

  html[lang^="zh"] body .site-footer {
    font-size: 13.5px !important;
    line-height: 1.68 !important;
  }

  html[lang^="zh"] body .site-footer .footer-shell {
    gap: 30px !important;
  }

  html[lang^="zh"] body .site-footer .footer-brand span {
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
  }

  html[lang^="zh"] body .site-footer .footer-desc {
    margin-top: 12px !important;

    font-size: 13.5px !important;
    line-height: 1.72 !important;
  }

  html[lang^="zh"] body .site-footer .footer-directory {
    gap: 26px 18px !important;
  }

  html[lang^="zh"] body .site-footer .footer-directory h3 {
    margin-bottom: 10px !important;

    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
  }

  html[lang^="zh"] body .site-footer .footer-links {
    gap: 7px !important;
  }

  html[lang^="zh"] body .site-footer .footer-links a {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  html[lang^="zh"] body .site-footer .footer-bottom {
    padding-top: 18px !important;

    font-size: 11.5px !important;
    line-height: 1.55 !important;
  }
}


/* Hardest width: preserve hierarchy without crushing text. */
@media (max-width: 350px) {
  html[lang^="zh"] body main h1:not(#home-title) {
    font-size: 29px !important;
  }

  html[lang^="zh"] body .column-home-hero__copy #home-title {
    font-size: 35px !important;
  }

  html[lang^="zh"] body main h2 {
    font-size: 22px !important;
  }

  html[lang^="zh"] body main :is(
    .card,
    .service-card,
    .accounting-focus-card,
    .registration-company-card,
    .registration-matter-card,
    .qualification-license-card,
    .audit-service-card,
    .contact-channel-card,
    .geo-answer-card
  )[class] {
    padding: 16px 14px !important;
  }

  html[lang^="zh"] body main :is(
    .card,
    .service-card,
    .accounting-focus-card,
    .registration-company-card,
    .registration-matter-card,
    .qualification-license-card,
    .audit-service-card,
    .contact-channel-card,
    .geo-answer-card
  )[class] :is(
    p,
    li,
    dd
  ) {
    font-size: 13.5px !important;
    line-height: 1.72 !important;
  }
}
/* =========================================================
   Stage 15D8E-R1 — Homepage Mobile Card Typography Specificity Fix

   Evidence:
   D8E passed 44/48. The only four failures were homepage at
   320/360/390/430px. All H1/H2/body/semantic/overflow gates passed.
   The only failing metric was card body = 13px / 1.45 line-height.

   This patch affects only:
   - Chinese
   - phone widths <=430px
   - homepage (detected by #home-title)
   - card text rhythm

   Everything else remains frozen.
   ========================================================= */

@media (max-width: 430px) {

  /* Strong homepage-only scope.
     :has(#home-title) prevents this from touching inner-page cards. */
  html[lang^="zh"] body main:has(#home-title) :is(
    .service-card,
    .card,
    .accounting-focus-card,
    .registration-company-card,
    .qualification-license-card,
    .audit-service-card,
    .contact-channel-card,
    .geo-answer-card
  )[class] {
    padding: 18px 16px !important;
  }

  html[lang^="zh"] body main:has(#home-title) :is(
    .service-card,
    .card,
    .accounting-focus-card,
    .registration-company-card,
    .qualification-license-card,
    .audit-service-card,
    .contact-channel-card,
    .geo-answer-card
  )[class] :is(
    h3,
    .card-title,
    .service-card-title
  ) {
    margin: 0 0 8px !important;

    color: #111a4a !important;

    font-size: 18px !important;
    font-weight: 620 !important;
    line-height: 1.40 !important;
    letter-spacing: -.01em !important;

    text-wrap: balance !important;
  }

  html[lang^="zh"] body main:has(#home-title) :is(
    .service-card,
    .card,
    .accounting-focus-card,
    .registration-company-card,
    .qualification-license-card,
    .audit-service-card,
    .contact-channel-card,
    .geo-answer-card
  )[class] :is(
    p,
    li,
    dd
  ) {
    margin-top: 0 !important;

    color: #5f646e !important;

    font-size: 14.25px !important;
    font-weight: 400 !important;
    line-height: 1.72 !important;
    letter-spacing: 0 !important;

    text-wrap: pretty !important;
    line-break: strict !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  html[lang^="zh"] body main:has(#home-title) :is(
    .service-card,
    .card,
    .accounting-focus-card,
    .registration-company-card,
    .qualification-license-card,
    .audit-service-card,
    .contact-channel-card,
    .geo-answer-card
  )[class] :is(
    p,
    ul,
    ol
  ) + :is(
    p,
    ul,
    ol
  ) {
    margin-top: 10px !important;
  }

  html[lang^="zh"] body main:has(#home-title) :is(
    .service-card,
    .card,
    .accounting-focus-card,
    .registration-company-card,
    .qualification-license-card,
    .audit-service-card,
    .contact-channel-card,
    .geo-answer-card
  )[class] :is(
    small,
    .meta,
    .caption
  ) {
    font-size: 12.5px !important;
    line-height: 1.58 !important;
  }
}

@media (max-width: 350px) {
  html[lang^="zh"] body main:has(#home-title) :is(
    .service-card,
    .card,
    .accounting-focus-card,
    .registration-company-card,
    .qualification-license-card,
    .audit-service-card,
    .contact-channel-card,
    .geo-answer-card
  )[class] {
    padding: 16px 14px !important;
  }

  html[lang^="zh"] body main:has(#home-title) :is(
    .service-card,
    .card,
    .accounting-focus-card,
    .registration-company-card,
    .qualification-license-card,
    .audit-service-card,
    .contact-channel-card,
    .geo-answer-card
  )[class] :is(
    p,
    li,
    dd
  ) {
    font-size: 13.75px !important;
    line-height: 1.74 !important;
  }
}
/* =========================================================
   Stage 15D8F-A — Mobile Card Structure + Navigation + Known Bug Fixes

   Evidence basis:
   - supplied iPhone 16 Pro Max screenshots are 440 × 956 CSS pixels
   - D8E typography is the new frozen Chinese reading baseline

   This stage intentionally DOES:
   1. mobile card structural rhythm
   2. mobile navigation popover geometry
   3. homepage process-step card bug
   4. homepage Hero metrics vs route/canvas interference
   5. inner-service Hero card/CTA spacing calibration

   This stage intentionally DOES NOT:
   - redesign icons
   - redraw SVG illustrations
   - change D8E typography scale
   - change desktop layout
   - change business copy / SEO / routes
   ========================================================= */


/* ---------------------------------------------------------
   A. Mobile navigation popover
   Fix the narrow centered "white strip" shown in the phone capture.
   --------------------------------------------------------- */

@media (max-width: 700px) {
  body .site-header .nav-menu.is-open {
    position: fixed !important;

    top: 70px !important;
    left: 12px !important;
    right: 12px !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    max-height: calc(100dvh - 86px) !important;

    display: grid !important;
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    align-items: stretch !important;
    justify-content: stretch !important;

    gap: 4px !important;
    padding: 8px !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;

    border:
      1px solid
      rgba(17, 26, 74, .085) !important;

    border-radius: 12px !important;

    background:
      rgba(255, 255, 255, .985) !important;

    box-shadow:
      rgba(17, 26, 74, .055) 0 10px 24px,
      rgba(17, 26, 74, .065) 0 28px 58px,
      rgba(17, 26, 74, .025) 0 0 0 1px !important;

    backdrop-filter: blur(18px) !important;

    z-index: 120 !important;

    animation:
      d8fa-nav-enter
      150ms
      cubic-bezier(.2,.7,.3,1)
      both;
  }

  body .site-header .nav-menu.is-open .nav-link {
    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    padding: 11px 12px !important;

    border-radius: 8px !important;

    font-size: 13.5px !important;
    font-weight: 520 !important;
    line-height: 1.22 !important;

    white-space: nowrap !important;
  }

  body .site-header .nav-menu.is-open
  .nav-link[aria-current="page"] {
    background:
      #f6f6f8 !important;

    box-shadow:
      inset 0 0 0 1px
      rgba(17, 26, 74, .055) !important;
  }

  @keyframes d8fa-nav-enter {
    from {
      opacity: 0;
      transform: translateY(-6px) scale(.99);
    }

    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
}


/* ---------------------------------------------------------
   B. Homepage Hero metrics safety zone
   The dotted route/canvas must remain atmosphere, not cross the data labels.
   No new card/chip is introduced.
   --------------------------------------------------------- */

@media (max-width: 700px) {
  html[lang^="zh"] body
  .column-home-hero__copy {
    position: relative !important;
    z-index: 8 !important;
  }

  html[lang^="zh"] body
  .column-home-hero__copy
  .hero-actions {
    position: relative !important;
    z-index: 9 !important;
  }

  html[lang^="zh"] body
  .column-home-hero__copy
  .hero-points {
    position: relative !important;
    z-index: 10 !important;
    isolation: isolate !important;

    width: 100% !important;
    max-width: 100% !important;

    display: grid !important;
    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;

    gap: 10px !important;

    margin-top: 24px !important;
    padding:
      10px 0
      12px !important;

    border: 0 !important;
    border-radius: 0 !important;

    /*
     * A low-contrast fog fade masks only the route behind the data.
     * It is intentionally not a card surface.
     */
    background:
      linear-gradient(
        90deg,
        rgba(246, 250, 250, .96) 0%,
        rgba(246, 250, 250, .90) 48%,
        rgba(246, 250, 250, .68) 82%,
        rgba(246, 250, 250, .18) 100%
      ) !important;

    box-shadow: none !important;
  }

  html[lang^="zh"] body
  .column-home-hero__copy
  .hero-point {
    min-width: 0 !important;

    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    box-shadow: none !important;
  }

  html[lang^="zh"] body
  .column-home-hero__copy
  .hero-point strong {
    display: block !important;

    color: #167e6c !important;

    font-size: clamp(
      21px,
      5.8vw,
      25px
    ) !important;

    font-weight: 580 !important;
    line-height: 1.08 !important;
    letter-spacing: -.025em !important;

    white-space: nowrap !important;
  }

  html[lang^="zh"] body
  .column-home-hero__copy
  .hero-point span {
    display: block !important;

    margin-top: 5px !important;

    color: #858994 !important;

    font-size: 11.5px !important;
    font-weight: 400 !important;
    line-height: 1.36 !important;
    letter-spacing: 0 !important;

    text-wrap: pretty !important;
  }
}


/* ---------------------------------------------------------
   C. Mobile card structural compaction
   Remove desktop equal-height inertia on single-column phone layouts.
   Card color/shadow system remains D8C/D8E.
   --------------------------------------------------------- */

@media (max-width: 700px) {
  html[lang^="zh"] body main :is(
    .card,
    .service-card,
    .accounting-focus-card,
    .accounting-price-card,
    .registration-company-card,
    .registration-followup-card,
    .registration-matter-card,
    .qualification-license-card,
    .about-value-card,
    .about-advantage-card,
    .about-service-card,
    .audit-service-card,
    .audit-advantage-card,
    .audit-process-step,
    .contact-channel-card,
    .contact-prep-card,
    .contact-trust-card,
    .entity-signal-card,
    .geo-answer-card
  )[class] {
    min-height: 0 !important;
    height: auto !important;

    align-self: stretch !important;
  }

  html[lang^="zh"] body main :is(
    .grid,
    .grid-2,
    .grid-3,
    .grid-4
  ) {
    row-gap: 12px !important;
  }
}


/* ---------------------------------------------------------
   D. Homepage process-step bug
   Current screenshot: huge empty cards + 01/02/03/04 circles overlap titles.
   Convert each phone step into a compact two-column information row.
   --------------------------------------------------------- */

@media (max-width: 700px) {
  html[lang^="zh"] body
  main:has(#home-title)
  .process {
    grid-template-columns:
      minmax(0, 1fr) !important;

    gap: 12px !important;
  }

  html[lang^="zh"] body
  main:has(#home-title)
  .process .card {
    box-sizing: border-box !important;

    min-height: 0 !important;
    height: auto !important;

    display: grid !important;
    grid-template-columns:
      32px
      minmax(0, 1fr) !important;

    grid-template-rows:
      auto
      auto !important;

    column-gap: 12px !important;
    row-gap: 5px !important;

    align-items: start !important;

    padding:
      17px 16px
      18px !important;
  }

  html[lang^="zh"] body
  main:has(#home-title)
  .process .card::before {
    grid-column: 1 !important;
    grid-row: 1 !important;

    align-self: start !important;
    justify-self: start !important;

    width: 30px !important;
    height: 30px !important;

    margin: 0 !important;

    border-radius: 999px !important;

    background: #08283a !important;
    color: #ffffff !important;

    font-size: 10.5px !important;
    font-weight: 650 !important;
    line-height: 1 !important;

    letter-spacing: .02em !important;
  }

  html[lang^="zh"] body
  main:has(#home-title)
  .process .card h3 {
    grid-column: 2 !important;
    grid-row: 1 !important;

    align-self: center !important;

    margin: 1px 0 0 !important;

    min-width: 0 !important;

    font-size: 17px !important;
    line-height: 1.36 !important;
  }

  html[lang^="zh"] body
  main:has(#home-title)
  .process .card p {
    grid-column: 2 !important;
    grid-row: 2 !important;

    margin: 0 !important;

    min-width: 0 !important;

    font-size: 14px !important;
    line-height: 1.68 !important;
  }
}


/* ---------------------------------------------------------
   E. Core/service Hero phone composition calibration
   Keep D8E typography; refine only spacing/card flow.
   --------------------------------------------------------- */

@media (max-width: 700px) {
  html[lang^="zh"] body
  main :is(
    .audit-hero-copy,
    .service-hero-copy
  ) .hero-actions {
    width: 100% !important;

    display: grid !important;
    grid-template-columns:
      minmax(0, 1fr) !important;

    gap: 9px !important;

    margin-top: 22px !important;
  }

  html[lang^="zh"] body
  main :is(
    .audit-hero-copy,
    .service-hero-copy
  ) .hero-actions .btn {
    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    min-height: 46px !important;

    margin: 0 !important;
  }

  html[lang^="zh"] body
  main .audit-hero-badges {
    gap: 6px !important;

    margin-top: 18px !important;
  }

  html[lang^="zh"] body
  main .audit-hero-badges span {
    min-height: 30px !important;

    padding:
      5px 9px !important;

    font-size: 12px !important;
    font-weight: 520 !important;
    line-height: 1.2 !important;
  }

  html[lang^="zh"] body
  main :is(
    .audit-hero-panel,
    .service-hero-panel
  ) {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 100% !important;

    min-height: 0 !important;
    height: auto !important;

    margin-top: 24px !important;

    padding: 16px !important;
  }

  html[lang^="zh"] body
  main .audit-hero-service-list {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 8px !important;
  }

  html[lang^="zh"] body
  main .audit-hero-service-list span {
    box-sizing: border-box !important;

    min-width: 0 !important;
    min-height: 42px !important;

    padding:
      8px 9px !important;

    line-height: 1.35 !important;
  }
}


/* ---------------------------------------------------------
   F. Very narrow phones
   Preserve compact process geometry without squeezing text.
   --------------------------------------------------------- */

@media (max-width: 350px) {
  html[lang^="zh"] body
  main:has(#home-title)
  .process .card {
    grid-template-columns:
      30px
      minmax(0, 1fr) !important;

    column-gap: 10px !important;

    padding:
      16px 14px
      17px !important;
  }

  html[lang^="zh"] body
  .column-home-hero__copy
  .hero-points {
    gap: 7px !important;
  }

  html[lang^="zh"] body
  .column-home-hero__copy
  .hero-point strong {
    font-size: 20px !important;
  }

  html[lang^="zh"] body
  .column-home-hero__copy
  .hero-point span {
    font-size: 10.75px !important;
  }
}
/* =========================================================
   Stage 15D8F-A-R2 — Mobile Nav Viewport Width Specificity Fix

   Evidence:
   - Core D8F-A route/width checks already passed 15/15.
   - ZH menu stayed ~182px at both 320 and 440.
   - EN menu stayed ~295px at both 320 and 440.
   Therefore a legacy intrinsic/max-content width rule is still winning.

   This patch fixes only mobile open-menu geometry.
   ========================================================= */

@media (max-width: 700px) {
  html body .site-header .nav-menu.is-open {
    box-sizing: border-box !important;

    position: fixed !important;

    top: 70px !important;
    left: 12px !important;
    right: auto !important;

    inset-inline-start: 12px !important;
    inset-inline-end: auto !important;

    width: calc(100vw - 24px) !important;
    min-width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;

    margin: 0 !important;

    justify-self: auto !important;
    align-self: auto !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    transform-origin: top center !important;
  }

  html body .site-header .nav-menu.is-open .nav-link {
    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}
/* =========================================================
   Stage 15D8F-A-R3 — Mobile Brand Lockup / Hero Continuity /
   CTA Normalization / Card Bug Fix

   User-visible targets:
   1. Mobile Header brand matches desktop/Web brand lockup.
   2. Homepage Hero has no right-side visual seam.
   3. Homepage Hero CTAs use the same system as inner-page Hero CTAs.
   4. Accounting focus cards and 01/02/03/04 process cards are structurally fixed.

   Includes the D8F-A-R2 mobile-nav viewport-width correction so R3 is
   self-contained whether or not R2 was already applied.

   Frozen:
   - D8E Chinese typography scale
   - desktop content/layout
   - D7B map geometry/motion
   - Hero workflow widget behavior
   - business copy / routes / SEO
   - icon drawing language
   - SVG artwork itself
   ========================================================= */


/* ---------------------------------------------------------
   A. Self-contained R2 mobile nav viewport width correction
   --------------------------------------------------------- */

@media (max-width: 700px) {
  html body .site-header .nav-menu.is-open {
    box-sizing: border-box !important;

    position: fixed !important;
    top: 76px !important;
    left: 12px !important;
    right: auto !important;

    inset-inline-start: 12px !important;
    inset-inline-end: auto !important;

    width: calc(100vw - 24px) !important;
    min-width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;

    margin: 0 !important;

    display: grid !important;
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 4px !important;
    padding: 8px !important;

    justify-self: auto !important;
    align-self: auto !important;

    transform-origin: top center !important;
  }

  html body .site-header .nav-menu.is-open .nav-link {
    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}


/* ---------------------------------------------------------
   B. Mobile Web-consistent brand lockup
   --------------------------------------------------------- */

@media (max-width: 700px) {
  html body .site-header .header-main {
    min-height: 68px !important;
  }

  html body .site-header .brand {
    min-width: 0 !important;
    max-width: 100% !important;

    display: flex !important;
    align-items: center !important;

    gap: 10px !important;

    overflow: hidden !important;
  }

  html body .site-header .brand img {
    box-sizing: border-box !important;

    width: 46px !important;
    height: 46px !important;
    flex: 0 0 46px !important;

    padding: 4px !important;

    border:
      1px solid
      rgba(194, 150, 47, .30) !important;

    border-radius: 10px !important;

    background:
      rgba(255, 252, 245, .88) !important;
  }

  html body .site-header .brand-text {
    min-width: 0 !important;
    max-width: 100% !important;

    display: grid !important;
    align-content: center !important;

    gap: 3px !important;

    overflow: hidden !important;
  }

  html body .site-header .brand-name {
    display: block !important;

    max-width: 100% !important;

    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;

    color: #111a4a !important;

    font-size: 15px !important;
    font-weight: 650 !important;
    line-height: 1.08 !important;
    letter-spacing: -.018em !important;
  }

  html body .site-header .brand-subtitle {
    display: block !important;

    max-width: 100% !important;

    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;

    color: #858994 !important;

    font-size: 10.5px !important;
    font-weight: 400 !important;
    line-height: 1.10 !important;
    letter-spacing: .005em !important;
  }

  html body .site-header .header-actions {
    flex: 0 0 auto !important;

    gap: 6px !important;
  }
}

@media (max-width: 350px) {
  html body .site-header .brand {
    gap: 8px !important;
  }

  html body .site-header .brand img {
    width: 40px !important;
    height: 40px !important;
    flex-basis: 40px !important;
  }

  html body .site-header .brand-name {
    font-size: 13px !important;
  }

  html body .site-header .brand-subtitle {
    font-size: 9.25px !important;
  }
}


/* ---------------------------------------------------------
   C. Homepage Hero continuity
   Fix D8D's legacy Home .hero-inner calc(100% - 28px) seam.
   Copy keeps phone gutter; visual field spans the entire Hero.
   --------------------------------------------------------- */

@media (max-width: 700px) {
  html body .column-home-hero {
    position: relative !important;

    width: 100% !important;
    max-width: 100% !important;

    overflow: hidden !important;

    background:
      radial-gradient(
        circle at 10% 25%,
        rgba(141, 200, 189, .18),
        transparent 38%
      ),
      radial-gradient(
        circle at 78% 18%,
        rgba(162, 204, 222, .22),
        transparent 43%
      ),
      linear-gradient(
        112deg,
        #f6f9f8 0%,
        #eef8f7 42%,
        #eef6fa 72%,
        #edf4fb 100%
      ) !important;
  }

  html body .column-home-hero__inner {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html body .column-home-hero__inner .column-map-hero {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  html body .column-home-hero__copy {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 100% !important;

    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

@media (max-width: 350px) {
  html body .column-home-hero__copy {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}


/* ---------------------------------------------------------
   D. One Hero CTA system on phone
   Home and inner service pages share identical geometry.
   --------------------------------------------------------- */

@media (max-width: 700px) {
  html body :is(
    .column-home-hero__copy,
    main .audit-hero-copy,
    main .service-hero-copy
  ) .hero-actions {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 100% !important;

    display: grid !important;
    grid-template-columns:
      minmax(0, 1fr) !important;

    gap: 9px !important;

    margin-top: 22px !important;
  }

  html body :is(
    .column-home-hero__copy,
    main .audit-hero-copy,
    main .service-hero-copy
  ) .hero-actions .btn {
    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    min-height: 46px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 12px 16px !important;

    border-radius: 6px !important;

    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;

    text-align: center !important;
  }

  html body :is(
    .column-home-hero__copy,
    main .audit-hero-copy,
    main .service-hero-copy
  ) .hero-actions .btn-primary {
    border: 1px solid #111a4a !important;
    background: #111a4a !important;
    color: #ffffff !important;

    box-shadow:
      rgba(17, 26, 74, .11) 0 5px 12px !important;
  }

  html body :is(
    .column-home-hero__copy,
    main .audit-hero-copy,
    main .service-hero-copy
  ) .hero-actions :is(
    .btn-outline,
    .btn-secondary
  ) {
    border: 1px solid #111a4a !important;
    background: rgba(255, 255, 255, .76) !important;
    color: #111a4a !important;

    box-shadow: none !important;
  }

  /* Remove decorative arrow generated by legacy Home button CSS. */
  html body .column-home-hero__copy
  .hero-actions .btn::after {
    content: none !important;
    display: none !important;
  }
}


/* ---------------------------------------------------------
   E. Accounting-focus card structural bug from supplied Fig.2
   SVG artwork itself is not redrawn; only mobile composition is fixed.
   --------------------------------------------------------- */

@media (max-width: 700px) {
  html[lang^="zh"] body
  main .accounting-focus-grid {
    grid-template-columns:
      minmax(0, 1fr) !important;

    gap: 12px !important;
  }

  html[lang^="zh"] body
  main .accounting-focus-card {
    box-sizing: border-box !important;

    min-height: 0 !important;
    height: auto !important;

    display: grid !important;
    grid-template-columns:
      42px
      minmax(0, 1fr) !important;

    grid-template-rows:
      102px
      auto
      auto !important;

    column-gap: 12px !important;
    row-gap: 9px !important;

    align-content: start !important;
    align-items: start !important;

    overflow: hidden !important;

    padding: 14px 16px 16px !important;
  }

  html[lang^="zh"] body
  main .accounting-focus-card::before {
    content: "" !important;

    position: static !important;
    inset: auto !important;

    grid-column: 2 !important;
    grid-row: 1 !important;

    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;
    height: 102px !important;

    align-self: stretch !important;
    justify-self: stretch !important;

    border:
      1px solid
      rgba(17, 26, 74, .07) !important;

    border-radius: 6px !important;

    background-image:
      var(--accounting-bg) !important;

    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;

    transform: none !important;
  }

  html[lang^="zh"] body
  main .accounting-focus-card::after {
    content: none !important;
    display: none !important;
  }

  html[lang^="zh"] body
  main .accounting-focus-card > * {
    position: relative !important;
    z-index: 2 !important;
  }

  html[lang^="zh"] body
  main .accounting-focus-card .icon-box {
    grid-column: 1 !important;
    grid-row: 1 !important;

    align-self: start !important;
    justify-self: start !important;

    width: 38px !important;
    height: 38px !important;

    margin: 0 !important;
  }

  html[lang^="zh"] body
  main .accounting-focus-card h3 {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;

    margin: 0 !important;

    text-shadow: none !important;
  }

  html[lang^="zh"] body
  main .accounting-focus-card p {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;

    margin: 0 !important;
  }
}


/* ---------------------------------------------------------
   F. 01/02/03/04 process-card bug from supplied Fig.3
   Root fix: legacy ::before was still absolutely positioned.
   --------------------------------------------------------- */

@media (max-width: 700px) {
  html[lang^="zh"] body
  main:has(#home-title)
  .process .card {
    position: relative !important;

    min-height: 0 !important;
    height: auto !important;

    display: grid !important;
    grid-template-columns:
      36px
      minmax(0, 1fr) !important;

    grid-template-rows:
      auto
      auto !important;

    column-gap: 12px !important;
    row-gap: 5px !important;

    align-items: start !important;

    padding: 17px 16px 18px !important;
  }

  html[lang^="zh"] body
  main:has(#home-title)
  .process .card::before {
    position: static !important;

    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    transform: none !important;

    grid-column: 1 !important;
    grid-row: 1 !important;

    align-self: start !important;
    justify-self: start !important;

    width: 32px !important;
    height: 32px !important;

    margin: 0 !important;

    display: grid !important;
    place-items: center !important;

    border-radius: 999px !important;

    background: #08283a !important;
    color: #ffffff !important;

    font-size: 10.5px !important;
    font-weight: 650 !important;
    line-height: 1 !important;

    letter-spacing: .02em !important;
  }

  html[lang^="zh"] body
  main:has(#home-title)
  .process .card h3 {
    grid-column: 2 !important;
    grid-row: 1 !important;

    align-self: center !important;

    margin: 0 !important;

    min-width: 0 !important;
  }

  html[lang^="zh"] body
  main:has(#home-title)
  .process .card p {
    grid-column: 2 !important;
    grid-row: 2 !important;

    margin: 0 !important;

    min-width: 0 !important;
  }
}

@media (max-width: 350px) {
  html[lang^="zh"] body
  main:has(#home-title)
  .process .card {
    grid-template-columns:
      32px
      minmax(0, 1fr) !important;

    column-gap: 10px !important;

    padding: 16px 14px 17px !important;
  }

  html[lang^="zh"] body
  main:has(#home-title)
  .process .card::before {
    width: 30px !important;
    height: 30px !important;
  }
}
/* =========================================================
   Stage 15D8F-A-R5 — HomeHero Root Fix

   R4 proved:
   - section = viewport width
   - .hero-inner = viewport - 28px
   - .column-map-hero = same as .hero-inner
   - Home copy has another internal width/padding reduction

   Root strategy:
   1. Beat the legacy D8D !important selector by specificity, not by hope.
   2. Full-width Hero visual field.
   3. Content copy gets ONE 14px phone gutter.
   4. No nested copy padding, so CTA = viewport - 28px.
   ========================================================= */

@media (max-width: 700px) {

  /*
   * Specificity intentionally exceeds the legacy:
   * html body main :is(.hero-inner, ...)
   */
  html body main
  .column-home-hero
  .hero-inner.column-home-hero__inner {
    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    left: auto !important;
    right: auto !important;

    transform: none !important;
  }

  html body main
  .column-home-hero
  .hero-inner.column-home-hero__inner
  .column-map-hero.column-regional-map {
    box-sizing: border-box !important;

    position: absolute !important;

    left: 0 !important;
    right: 0 !important;

    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;

    transform: none !important;
  }

  /*
   * One and only one content gutter:
   * viewport - 28px = 14px each side.
   */
  html body main
  .column-home-hero
  .hero-copy.column-home-hero__copy {
    box-sizing: border-box !important;

    width: calc(100% - 28px) !important;
    min-width: 0 !important;
    max-width: calc(100% - 28px) !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    grid-template-columns:
      minmax(0, 1fr) !important;

    justify-self: stretch !important;
  }

  html body main
  .column-home-hero
  .hero-copy.column-home-hero__copy
  > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body main
  .column-home-hero
  .hero-copy.column-home-hero__copy
  .hero-actions {
    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    grid-template-columns:
      minmax(0, 1fr) !important;
  }

  html body main
  .column-home-hero
  .hero-copy.column-home-hero__copy
  .hero-actions .btn {
    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /*
   * Defensive presentation guard only.
   * R5 source patch removes the real DOM arrow span.
   */
  html body main
  .column-home-hero
  .hero-actions .btn-primary
  > span[aria-hidden="true"] {
    display: none !important;
  }
}
/* =========================================================
   Stage 15D8F-A-R6 — Home Copy 16px Offset Final Fix

   R5 proof:
   - hero / inner / map = full viewport: PASS
   - CTA width = copy width: PASS
   - CTA arrow removed: PASS
   - copy width itself = viewport - 28px: PASS
   - only copy position is wrong by +16px:
     320: left 30 instead of 14
     390: left 30 instead of 14
     440: left 30 instead of 14

   Root fix: reset legacy relative-position offset on Home copy.
   ========================================================= */

@media (max-width: 700px) {
  html body main
  .column-home-hero
  .hero-copy.column-home-hero__copy {
    position: relative !important;

    left: 0 !important;
    right: auto !important;

    inset-inline-start: 0 !important;
    inset-inline-end: auto !important;

    translate: none !important;
    transform: none !important;

    width: calc(100% - 28px) !important;
    min-width: 0 !important;
    max-width: calc(100% - 28px) !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
/* =========================================================
   Stage 15D8F-A-R7 — Mobile Hero Compact Composition

   Design intent:
   Reference Column's mobile composition rather than merely lowering height.

   Phone Hero architecture:
   1. Full-width map remains the atmospheric canvas.
   2. Product/workflow widget becomes an upper floating visual stage.
   3. Eyebrow + H1 + lead + CTAs form the lower information stage.
   4. Proof metrics become a compact bottom strip.
   5. No important business content is hidden.

   Primary target: supplied 440 × 956 phone viewport.
   Frozen: desktop, D7B map data/motion, card/icon/SVG systems outside Hero,
   routes, copy meaning and SEO.
   ========================================================= */


/* ---------------------------------------------------------
   1. Compact phone Hero frame
   --------------------------------------------------------- */

@media (max-width: 700px) {
  html body .column-home-hero {
    box-sizing: border-box !important;

    height: 700px !important;
    min-height: 700px !important;
    max-height: 700px !important;

    overflow: hidden !important;
  }

  html body .column-home-hero
  .hero-inner.column-home-hero__inner {
    position: relative !important;

    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow: hidden !important;
  }

  html body .column-home-hero
  .column-map-hero {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow: hidden !important;

    z-index: 1 !important;
  }

  html body .column-home-hero
  .column-map-hero > canvas {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;
  }


  /* -------------------------------------------------------
     2. Upper visual stage
     The map has exactly one non-canvas direct child: workflow widget.
     Scale/position the existing widget; do not redraw or replace it.
     ------------------------------------------------------- */

  html body .column-home-hero
  .column-map-hero > :not(canvas) {
    position: absolute !important;

    top: 44px !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;

    width: min(
      320px,
      calc(100vw - 56px)
    ) !important;

    max-width: none !important;

    margin: 0 !important;

    transform:
      translateX(-50%)
      scale(.80) !important;

    transform-origin:
      top center !important;

    z-index: 4 !important;
  }


  /* -------------------------------------------------------
     3. Information stage
     One 14px horizontal gutter, full-height overlay.
     Empty overlay does not block widget interactions.
     ------------------------------------------------------- */

  html body .column-home-hero
  .hero-copy.column-home-hero__copy {
    box-sizing: border-box !important;

    position: absolute !important;

    top: 0 !important;
    bottom: 0 !important;
    left: 14px !important;
    right: 14px !important;

    inset-inline-start: 14px !important;
    inset-inline-end: 14px !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;

    margin: 0 !important;

    padding:
      250px
      0
      0 !important;

    display: block !important;

    transform: none !important;
    translate: none !important;

    pointer-events: none !important;

    z-index: 6 !important;
  }

  html body .column-home-hero
  .hero-copy.column-home-hero__copy > * {
    pointer-events: auto !important;
  }


  /* -------------------------------------------------------
     4. Hero-local typography calibration
     D8E site typography remains unchanged outside Home Hero.
     ------------------------------------------------------- */

  html[lang^="zh"] body
  .column-home-hero__copy
  #home-title {
    max-width: 100% !important;

    margin:
      12px
      0
      12px !important;

    font-size: 36px !important;
    line-height: 1.055 !important;
    letter-spacing: -.040em !important;
  }

  html[lang^="zh"] body
  .column-home-hero__copy
  .hero-lead {
    max-width: 100% !important;

    margin:
      0
      0
      14px !important;

    font-size: 14.5px !important;
    line-height: 1.66 !important;

    color: #555b66 !important;
  }

  html body .column-home-hero__copy
  :is(
    .hero-eyebrow,
    .eyebrow
  ) {
    margin: 0 !important;

    min-height: 28px !important;

    display: inline-flex !important;
    align-items: center !important;
  }


  /* -------------------------------------------------------
     5. Compact CTA block
     Preserve R6/D8F-A button design; reduce only surrounding whitespace.
     ------------------------------------------------------- */

  html body .column-home-hero
  .column-home-hero__copy
  .hero-actions {
    width: 100% !important;

    margin:
      14px
      0
      0 !important;

    gap: 8px !important;
  }

  html body .column-home-hero
  .column-home-hero__copy
  .hero-actions .btn {
    min-height: 44px !important;
    height: 44px !important;

    padding:
      10px
      16px !important;
  }


  /* -------------------------------------------------------
     6. Bottom proof strip
     Keep all 3 metrics, remove their vertical stacking cost.
     ------------------------------------------------------- */

  html body .column-home-hero
  .column-home-hero__copy
  .hero-points {
    box-sizing: border-box !important;

    position: absolute !important;

    left: 0 !important;
    right: 0 !important;
    bottom: 18px !important;

    width: 100% !important;
    height: 58px !important;
    min-height: 58px !important;

    display: grid !important;
    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;

    align-items: start !important;

    gap: 8px !important;

    margin: 0 !important;

    padding:
      7px
      0
      5px !important;

    background:
      linear-gradient(
        90deg,
        rgba(246,250,250,.92),
        rgba(246,250,250,.82) 62%,
        rgba(246,250,250,.48)
      ) !important;
  }

  html body .column-home-hero
  .column-home-hero__copy
  .hero-point {
    min-width: 0 !important;

    padding: 0 !important;
  }

  html body .column-home-hero
  .column-home-hero__copy
  .hero-point strong {
    font-size: 20px !important;
    line-height: 1.05 !important;
  }

  html body .column-home-hero
  .column-home-hero__copy
  .hero-point span {
    margin-top: 4px !important;

    font-size: 10.5px !important;
    line-height: 1.25 !important;
  }


  /* -------------------------------------------------------
     7. English gets more room for naturally longer copy
     ------------------------------------------------------- */

  html[lang="en"] body .column-home-hero {
    height: 760px !important;
    min-height: 760px !important;
    max-height: 760px !important;
  }

  html[lang="en"] body
  .column-home-hero
  .hero-copy.column-home-hero__copy {
    padding-top: 245px !important;
  }

  html[lang="en"] body
  .column-home-hero__copy
  #home-title {
    margin:
      12px
      0
      12px !important;

    font-size: 34px !important;
    line-height: 1.06 !important;
  }

  html[lang="en"] body
  .column-home-hero__copy
  .hero-lead {
    margin-bottom: 12px !important;

    font-size: 14px !important;
    line-height: 1.55 !important;
  }
}


/* ---------------------------------------------------------
   8. Narrow phone calibration
   --------------------------------------------------------- */

@media (max-width: 390px) {
  html[lang^="zh"] body .column-home-hero {
    height: 720px !important;
    min-height: 720px !important;
    max-height: 720px !important;
  }

  html[lang^="zh"] body
  .column-home-hero
  .hero-copy.column-home-hero__copy {
    padding-top: 235px !important;
  }

  html[lang^="zh"] body
  .column-home-hero__copy
  #home-title {
    font-size: 34px !important;
  }

  html body .column-home-hero
  .column-map-hero > :not(canvas) {
    top: 40px !important;

    width: min(
      300px,
      calc(100vw - 52px)
    ) !important;

    transform:
      translateX(-50%)
      scale(.78) !important;
  }
}

@media (max-width: 350px) {
  html[lang^="zh"] body .column-home-hero {
    height: 760px !important;
    min-height: 760px !important;
    max-height: 760px !important;
  }

  html[lang^="zh"] body
  .column-home-hero
  .hero-copy.column-home-hero__copy {
    left: 14px !important;
    right: 14px !important;

    padding-top: 220px !important;
  }

  html[lang^="zh"] body
  .column-home-hero__copy
  #home-title {
    font-size: 32px !important;
    line-height: 1.07 !important;
  }

  html[lang^="zh"] body
  .column-home-hero__copy
  .hero-lead {
    font-size: 13.75px !important;
    line-height: 1.62 !important;
  }

  html body .column-home-hero
  .column-map-hero > :not(canvas) {
    top: 34px !important;

    width: min(
      276px,
      calc(100vw - 48px)
    ) !important;

    transform:
      translateX(-50%)
      scale(.76) !important;
  }

  html body .column-home-hero
  .column-home-hero__copy
  .hero-point strong {
    font-size: 18px !important;
  }

  html body .column-home-hero
  .column-home-hero__copy
  .hero-point span {
    font-size: 9.75px !important;
  }
}
/* =========================================================
   Stage 15D8F-A-R7-R1 — Compact Hero Final Calibration

   R7 proven GOOD and frozen:
   - ZH 390 = 720px: full pass
   - ZH 440 = 700px: full pass
   - full-width map
   - upper workflow-widget stage
   - bottom 3-metric proof strip
   - inner-page Hero control

   R1 fixes only:
   1. ZH 320 copy inherited +14px legacy offset.
   2. EN 390/440 is still longer than desired -> 720px.
   3. EN 320 needs controlled 800px safety height.
   4. EN CTA real DOM arrow is removed by source patch.
   ========================================================= */


/* ---------------------------------------------------------
   A. 320px Chinese: defeat the remaining narrow-screen copy offset.
   --------------------------------------------------------- */

@media (max-width: 350px) {
  html[lang^="zh"] body main
  .column-home-hero
  .hero-inner.column-home-hero__inner
  > .hero-copy.column-home-hero__copy {
    position: absolute !important;

    left: 14px !important;
    right: 14px !important;

    inset-inline-start: 14px !important;
    inset-inline-end: 14px !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    translate: none !important;
    transform: none !important;
  }
}


/* ---------------------------------------------------------
   B. English 390/440: match the compact reference rhythm.
   --------------------------------------------------------- */

@media (min-width: 351px) and (max-width: 700px) {
  html[lang="en"] body .column-home-hero {
    height: 720px !important;
    min-height: 720px !important;
    max-height: 720px !important;
  }

  html[lang="en"] body
  .column-home-hero
  .hero-copy.column-home-hero__copy {
    padding-top: 220px !important;
  }

  html[lang="en"] body
  .column-home-hero__copy
  #home-title {
    width: 100% !important;
    max-width: 100% !important;

    margin:
      10px
      0
      10px !important;

    font-size: 32px !important;
    line-height: 1.055 !important;
    letter-spacing: -.034em !important;
  }

  html[lang="en"] body
  .column-home-hero__copy
  .hero-lead {
    width: 100% !important;
    max-width: 100% !important;

    margin:
      0
      0
      10px !important;

    font-size: 13.75px !important;
    line-height: 1.50 !important;
  }

  html[lang="en"] body
  .column-home-hero
  .column-home-hero__copy
  .hero-actions {
    margin-top: 10px !important;
    gap: 8px !important;
  }
}


/* ---------------------------------------------------------
   C. English 320: safe but still materially shorter than old 900px Hero.
   --------------------------------------------------------- */

@media (max-width: 350px) {
  html[lang="en"] body .column-home-hero {
    height: 800px !important;
    min-height: 800px !important;
    max-height: 800px !important;
  }

  html[lang="en"] body
  .column-home-hero
  .hero-copy.column-home-hero__copy {
    position: absolute !important;

    left: 14px !important;
    right: 14px !important;

    inset-inline-start: 14px !important;
    inset-inline-end: 14px !important;

    width: auto !important;
    max-width: none !important;

    margin: 0 !important;

    padding:
      210px
      0
      0 !important;

    transform: none !important;
    translate: none !important;
  }

  html[lang="en"] body
  .column-home-hero__copy
  #home-title {
    width: 100% !important;
    max-width: 100% !important;

    margin:
      10px
      0
      10px !important;

    font-size: 29px !important;
    line-height: 1.06 !important;
    letter-spacing: -.030em !important;
  }

  html[lang="en"] body
  .column-home-hero__copy
  .hero-lead {
    width: 100% !important;
    max-width: 100% !important;

    margin:
      0
      0
      8px !important;

    font-size: 13.25px !important;
    line-height: 1.48 !important;
  }

  html[lang="en"] body
  .column-home-hero
  .column-home-hero__copy
  .hero-actions {
    margin-top: 8px !important;
    gap: 8px !important;
  }
}
/* =========================================================
   Stage 15D8F-A-R8-R1 — Mobile ZH H1 Two-Line Guard ONLY

   This patch deliberately contains ZERO map/canvas/widget rules.
   The map and its original interaction animation are restored from
   the exact pre-R8 backup.
   ========================================================= */

@media (max-width: 700px) {
  html[lang^="zh"] body
  .column-home-hero__copy
  #home-title {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 100% !important;

    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;

    font-size:
      clamp(
        25px,
        7vw,
        31px
      ) !important;

    line-height: 1.075 !important;
    letter-spacing: -.036em !important;

    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }

  html[lang^="zh"] body
  .column-home-hero__copy
  #home-title
  .zh-hero-title-group--subject,
  html[lang^="zh"] body
  .column-home-hero__copy
  #home-title
  .zh-hero-title-group--action {
    display: inline-block !important;

    flex: 0 0 auto !important;

    white-space: nowrap !important;
  }

  html[lang^="zh"] body
  .column-home-hero__copy
  #home-title
  .zh-hero-title-group--outcome {
    display: block !important;

    flex: 0 0 100% !important;

    width: 100% !important;

    white-space: nowrap !important;
  }

  html[lang^="zh"] body
  .column-home-hero__copy
  #home-title
  .zh-hero-title-desktop-break {
    display: none !important;
  }
}
/* =========================================================
   Stage 15D8F-A-R8-R2 — Chinese Mobile H1 Two-Line ONLY
   ========================================================= */

.home-title-mobile-line {
  display: none !important;
}

@media (max-width: 700px) {
  html[lang^="zh"] body
  .column-home-hero__copy
  #home-title {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px 0 12px !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    text-wrap: wrap !important;
  }

  html[lang^="zh"] body
  .column-home-hero__copy
  #home-title
  > :not(.home-title-mobile-line) {
    display: none !important;
  }

  html[lang^="zh"] body
  .column-home-hero__copy
  #home-title
  > .home-title-mobile-line {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;

    font-family:
      "PingFang SC",
      "Hiragino Sans GB",
      "Microsoft YaHei UI",
      "Microsoft YaHei",
      "Noto Sans CJK SC",
      "Noto Sans SC",
      system-ui,
      -apple-system,
      sans-serif !important;

    font-size: clamp(24.5px, 6.7vw, 29.5px) !important;
    font-weight: 720 !important;
    line-height: 1.10 !important;
    letter-spacing: -.035em !important;

    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    text-wrap: nowrap !important;
  }

  html[lang^="zh"] body
  .column-home-hero__copy
  #home-title
  > .home-title-mobile-line
  + .home-title-mobile-line {
    margin-top: 2px !important;
  }
}
/* =========================================================
   Stage 15D8F-B1-R2-R1 — Self-healing Homepage SVG Mapping

   Installed only when the four B1 filenames are not already mapped.
   It does not redraw or replace any SVG.
   ========================================================= */

#services .service-card[href$="audit-report.html"],
#services .service-card:has(a[href$="audit-report.html"]) {
  --service-bg:
    url("/assets/design/jinshun-b1-audit-verification.png") !important;
}

#services .service-card[href$="accounting-service.html"],
#services .service-card:has(a[href$="accounting-service.html"]) {
  --service-bg:
    url("/assets/design/jinshun-b1-accounting-ledger.png") !important;
}

#services .service-card[href$="business-registration.html"],
#services .service-card:has(a[href$="business-registration.html"]) {
  --service-bg:
    url("/assets/design/jinshun-b1-entity-registration.png") !important;
}

#services .service-card[href$="qualification-service.html"],
#services .service-card:has(a[href$="qualification-service.html"]) {
  --service-bg:
    url("/assets/design/jinshun-b1-permission-approval.png") !important;
}

#services .service-card::before {
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

@media (max-width: 700px) {
  #services .service-card::before {
    background-size: 110% auto !important;
    background-position: center 52% !important;
  }
}


/* Stage 15D8F-B2 / P0 — PNG semantic 2.5D service illustration overrides.
   Source of truth: real service href + --service-bg. */
#services .service-card[href$="audit-report.html"],
#services .service-card:has(a[href$="audit-report.html"]) {
  --service-bg: url("/assets/design/jinshun-b1-audit-verification.png") !important;
}
#services .service-card[href$="accounting-service.html"],
#services .service-card:has(a[href$="accounting-service.html"]) {
  --service-bg: url("/assets/design/jinshun-b1-accounting-ledger.png") !important;
}
#services .service-card[href$="business-registration.html"],
#services .service-card:has(a[href$="business-registration.html"]) {
  --service-bg: url("/assets/design/jinshun-b1-entity-registration.png") !important;
}
#services .service-card[href$="qualification-service.html"],
#services .service-card:has(a[href$="qualification-service.html"]) {
  --service-bg: url("/assets/design/jinshun-b1-permission-approval.png") !important;
}

/* Keep the proven pseudo-element mechanism, but tune raster artwork for card readability. */
#services .service-card::before {
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

@media (max-width: 700px) {
  #services .service-card::before {
    background-size: 112% auto !important;
    background-position: center top !important;
  }
}

/* === Stage 15D8F-B2-P0-Runtime-Lock BEGIN === */
/* Stage 15D8F-B2-P0-Runtime-Lock
   Goal: lock the service-card raster presentation grammar before B2 global expansion.
   Desktop is intentionally unchanged. Mobile gets a 3:2 media safe-area so the 1536x1024
   PNG masters render whole instead of being vertically cropped. */

@media (max-width: 700px) {
  /* Existing cards were ~356px tall while the image viewport was only ~128px high.
     A 3:2 2.5D master needs a true landscape safe-area on mobile. */
  #services .service-card {
    min-height: 445px !important;
  }

  #services .service-card::before {
    /* Override the previous 112% / top crop rule. */
    top: auto !important;
    right: 22px !important;
    bottom: 20px !important;
    left: 22px !important;
    width: auto !important;
    height: auto !important;
    aspect-ratio: 3 / 2 !important;

    background-repeat: no-repeat !important;
    background-size: contain !important;
    background-position: center center !important;
  }
}

/* Narrow phones: preserve the full object while keeping the card compact enough. */
@media (max-width: 390px) {
  #services .service-card {
    min-height: 425px !important;
  }

  #services .service-card::before {
    right: 20px !important;
    bottom: 18px !important;
    left: 20px !important;
  }
}
/* === Stage 15D8F-B2-P0-Runtime-Lock END === */

/* === Stage 15D8F-B2-05-Tax-Planning BEGIN === */
/* No route/class override required: mapping was replaced in source-owned service data. */
/* === Stage 15D8F-B2-05-Tax-Planning END === */

/* === Stage 15D8F-B2-P1-A-03-04-Accounting-Family-Closeout BEGIN === */
/* Accounting Family is fully migrated to semantic 3:2 PNG masters. */
.accounting-focus-card::before {
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: center center !important;
}

.accounting-service-row {
  --jinshun-p1a-family-locked: 1;
}

.accounting-service-media {
  background: linear-gradient(180deg, #f8fcfd 0%, #eef7fa 100%) !important;
}

.accounting-service-media::before {
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: center center !important;
  transform: none !important;
  filter: none !important;
}

.accounting-service-media::after {
  background:
    linear-gradient(180deg, rgba(15,23,42,0) 0%, rgba(15,23,42,.035) 100%),
    linear-gradient(110deg, rgba(3,105,161,.025), rgba(5,150,105,.018)) !important;
}

.accounting-service-row:hover .accounting-service-media::before {
  transform: none !important;
  filter: none !important;
}
/* === Stage 15D8F-B2-P1-A-03-04-Accounting-Family-Closeout END === */

/* === Stage 15D8F-B2-P1-B-Audit-Family BEGIN === */
/* Audit Family card media only. Audit Hero remains frozen. */
.audit-card-media {
  --jinshun-p1b-audit-family-locked: 1;
  background: linear-gradient(180deg, #fbfcff 0%, #f0f5fc 100%) !important;
}

.audit-card-media::before {
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: center center !important;
  transform: none !important;
  filter: none !important;
}

.audit-card-media::after {
  background:
    linear-gradient(180deg, rgba(15,23,42,0) 0%, rgba(15,23,42,.025) 100%),
    linear-gradient(110deg, rgba(48,105,205,.018), rgba(52,190,184,.018)) !important;
}

.audit-service-card:hover .audit-card-media::before {
  transform: none !important;
  filter: none !important;
}

.audit-card-media span {
  color: rgba(26,72,118,.18) !important;
  text-shadow: none !important;
}
/* === Stage 15D8F-B2-P1-B-Audit-Family END === */

/* === Stage 15D8F-B2-P1-C1-Qualification-Family BEGIN === */
/*
  Runtime truth:
  The current qualification detail page renders exactly three semantic detail cards:
  food / transport / export.
  Keep the structural qualification Hero frozen.
*/
.qualification-license-card {
  --jinshun-license-image: url("/assets/design/jinshun-b1-permission-approval.png");
  --jinshun-p1c1-license-locked: 1;
}

.qualification-license-card--food {
  --jinshun-license-image: url("/assets/design/jinshun-b2-food-license.png");
}

.qualification-license-card--transport {
  --jinshun-license-image: url("/assets/design/jinshun-b2-road-transport.png");
}

.qualification-license-card--export {
  --jinshun-license-image: url("/assets/design/jinshun-b2-import-export.png");
}

/*
  Copy/actions stay readable at the top. The semantic business illustration
  gets a dedicated lower visual stage instead of being hidden under a 96% wash.
*/
.qualification-license-summary {
  position: relative !important;
  isolation: isolate;
  overflow: hidden;
  min-height: 462px !important;
  padding: 28px 28px 224px !important;
  color: var(--column-slate-ink) !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #f7fbfb 100%) !important;
}

.qualification-license-summary::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 20px;
  right: 20px;
  bottom: 18px;
  height: 188px;
  border: 1px solid rgba(180, 213, 213, .42);
  border-radius: 22px;
  background:
    var(--jinshun-license-image)
    center center / contain no-repeat,
    linear-gradient(180deg, rgba(249,253,252,.98), rgba(240,248,248,.98));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 12px 28px rgba(24, 78, 86, .055);
  pointer-events: none;
}

.qualification-license-summary > * {
  position: relative;
  z-index: 1;
}

.qualification-license-summary h3,
.qualification-license-summary p,
.qualification-license-index {
  color: var(--column-slate-ink) !important;
  text-shadow: none !important;
}

.qualification-license-index {
  border-bottom-color: var(--license-accent) !important;
}

.qualification-license-summary .btn-light {
  background: rgba(255,255,255,.96) !important;
}

@media (max-width: 767px) {
  .qualification-license-summary {
    min-height: 448px !important;
    padding: 22px 16px 218px !important;
  }

  .qualification-license-summary::before {
    left: 14px;
    right: 14px;
    bottom: 14px;
    height: 184px;
    border-radius: 18px;
  }
}
/* === Stage 15D8F-B2-P1-C1-Qualification-Family END === */

/* === Stage 15D8F-B2-P1-C2-Registration-Content BEGIN === */
/*
  Registration content illustration only.
  Runtime polish R2:
  the visual stage participates in the card grid as the final item,
  so mobile buttons can never overlap the illustration.
  Structural registration Hero remains frozen.
*/
.registration-followup-card--warning {
  --jinshun-registration-followup-image:
    url("/assets/design/jinshun-b2-registration-lifecycle.png");
  --jinshun-p1c2-registration-locked: 1;
  position: relative !important;
  isolation: isolate;
  overflow: hidden;
  padding-bottom: 26px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(249,252,252,.98)) !important;
}

.registration-followup-card--warning::after {
  content: "";
  position: relative;
  inset: auto;
  z-index: 0;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 178px;
  min-width: 0;
  border: 1px solid rgba(193, 220, 224, .52);
  border-radius: 20px;
  background:
    var(--jinshun-registration-followup-image)
    center center / contain no-repeat,
    linear-gradient(180deg, rgba(250,253,253,.98), rgba(241,248,249,.98));
  box-shadow: 0 12px 28px rgba(29, 80, 91, .055);
  pointer-events: none;
}

.registration-followup-card--warning > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 767px) {
  .registration-followup-card--warning {
    padding-bottom: 18px !important;
  }

  .registration-followup-card--warning::after {
    width: 100%;
    height: 176px;
    border-radius: 17px;
  }
}
/* === Stage 15D8F-B2-P1-C2-Registration-Content END === */



\n\n\n

/* === HERO EMERGENCY 900 RECOVERY BEGIN === */
@media (min-width: 1100px) {
  .column-home-hero {
    height: 900px !important;
    min-height: 900px !important;
    max-height: 900px !important;
    overflow: hidden !important;
  }

  .column-home-hero__inner {
    width: min(calc(100% - 64px), 1200px) !important;
    height: 900px !important;
    min-height: 900px !important;
    max-height: 900px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns:
      minmax(0, 1.02fr)
      minmax(500px, .98fr) !important;
    gap: clamp(48px, 5vw, 72px) !important;
    align-items: start !important;
    align-content: start !important;
  }

  .column-home-hero__copy {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: start !important;
    height: auto !important;
    min-height: 0 !important;
    margin-top: 145px !important;
    padding: 0 !important;
  }

  .column-home-hero .column-hero-visual {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: start !important;
    margin-top: 88px !important;
  }
}

@media (max-width: 1099px) {
  .column-home-hero {
    height: auto !important;
    max-height: none !important;
  }

  .column-home-hero__inner {
    height: auto !important;
    max-height: none !important;
  }
}
/* === HERO EMERGENCY 900 RECOVERY END === */

/* === STAGE16 FINAL HERO PAYLOAD BEGIN === */
.column-map-widget__payload {
  padding: 10px 12px 12px !important;
  white-space: normal !important;
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: normal !important;
  color: inherit !important;
}

.column-map-widget__payload::before,
.column-map-widget__payload::after {
  content: none !important;
  display: none !important;
}

.column-map-widget__business-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.column-map-widget__business-item {
  min-width: 0 !important;
  min-height: 52px !important;
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 7px !important;
  padding: 8px 9px !important;
  border: 1px solid rgba(42,102,115,.13) !important;
  border-radius: 11px !important;
  background: rgba(255,255,255,.96) !important;
}

.column-map-widget__business-icon {
  width: 20px !important;
  min-width: 20px !important;
  height: auto !important;
  min-height: 0 !important;
  display: block !important;
  padding: 2px 0 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #5c7b86 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
  text-align: center !important;
}

.column-map-widget__business-copy {
  min-width: 0 !important;
  display: grid !important;
  gap: 3px !important;
}

.column-map-widget__business-copy strong {
  color: #16303c !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 760 !important;
  line-height: 1.2 !important;
}

.column-map-widget__business-copy small {
  color: #7a8c94 !important;
  font-family: inherit !important;
  font-size: 8.5px !important;
  line-height: 1.3 !important;
}

.header-contact-number,
.header-contact-copy > strong {
  color: #4b5e77 !important;
  font-size: clamp(24px, 1.95vw, 29px) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
  white-space: nowrap !important;
}

.header-contact-icon {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.header-contact-icon::before,
.header-contact-icon::after {
  content: none !important;
  display: none !important;
}

.header-contact-icon svg circle,
.header-contact-icon svg ellipse {
  display: none !important;
}
/* === STAGE16 FINAL HERO PAYLOAD END === */

/* === STAGE16 TYPOGRAPHY REFINEMENT BEGIN === */
.header-contact-number,
.header-contact-copy > strong {
  font-size: clamp(30px, 2.35vw, 36px) !important;
  font-weight: 800 !important;
  line-height: .98 !important;
  letter-spacing: -.04em !important;
  white-space: nowrap !important;
}

section:has(.card-link .accounting-service-index)
  > .container
  > .section-head h2,
section:has(.faq)
  > .container
  > .section-head h2 {
  font-size: clamp(34px, 2.7vw, 40px) !important;
  line-height: 1.16 !important;
  font-weight: 780 !important;
  letter-spacing: -.025em !important;
}

section:has(.card-link .accounting-service-index)
  > .container
  > .section-head .kicker,
section:has(.faq)
  > .container
  > .section-head .kicker {
  font-size: 15px !important;
  font-weight: 800 !important;
}

section:has(.card-link .accounting-service-index)
  > .container
  > .section-head p {
  max-width: 760px !important;
  margin-top: 14px !important;
  font-size: 17px !important;
  line-height: 1.72 !important;
}

.cta-band h2,
.cta-band h3 {
  font-size: clamp(28px, 2.2vw, 34px) !important;
  line-height: 1.2 !important;
  font-weight: 780 !important;
  letter-spacing: -.02em !important;
}

.cta-band p {
  font-size: 16px !important;
  line-height: 1.75 !important;
}

.cta-band .btn,
.cta-band a {
  font-size: 15px !important;
  font-weight: 750 !important;
}

footer h2,
footer h3 {
  font-size: 19px !important;
  line-height: 1.3 !important;
  font-weight: 780 !important;
}

footer strong {
  font-size: 16px !important;
  line-height: 1.35 !important;
  font-weight: 760 !important;
}

footer p,
footer a,
footer li {
  font-size: 14.5px !important;
  line-height: 1.7 !important;
}

footer small {
  font-size: 13px !important;
  line-height: 1.65 !important;
}

@media (max-width: 1099px) {
  .header-contact-number,
  .header-contact-copy > strong {
    font-size: clamp(24px, 3vw, 30px) !important;
  }

  section:has(.card-link .accounting-service-index)
    > .container
    > .section-head h2,
  section:has(.faq)
    > .container
    > .section-head h2 {
    font-size: 32px !important;
  }
}

@media (max-width: 767px) {
  .header-contact-number,
  .header-contact-copy > strong {
    font-size: 22px !important;
    letter-spacing: -.03em !important;
  }

  section:has(.card-link .accounting-service-index)
    > .container
    > .section-head h2,
  section:has(.faq)
    > .container
    > .section-head h2 {
    font-size: 28px !important;
    line-height: 1.22 !important;
  }

  section:has(.card-link .accounting-service-index)
    > .container
    > .section-head p {
    font-size: 16px !important;
  }

  .cta-band h2,
  .cta-band h3 {
    font-size: 26px !important;
  }

  footer h2,
  footer h3 {
    font-size: 18px !important;
  }

  footer p,
  footer a,
  footer li {
    font-size: 14px !important;
  }
}
/* === STAGE16 TYPOGRAPHY REFINEMENT END === */

/* === STAGE16 TYPOGRAPHY REFINEMENT LOCAL BEGIN === */
/* phone */
.header-contact-number,
.header-contact-copy > strong {
  font-size: clamp(30px, 2.35vw, 36px) !important;
  font-weight: 800 !important;
  line-height: .98 !important;
  letter-spacing: -.04em !important;
  white-space: nowrap !important;
}

/* high-frequency + FAQ section headings */
section:has(.card-link .accounting-service-index) > .container > .section-head h2,
section:has(.faq) > .container > .section-head h2 {
  font-size: clamp(34px, 2.7vw, 40px) !important;
  line-height: 1.16 !important;
  font-weight: 780 !important;
  letter-spacing: -.025em !important;
}

section:has(.card-link .accounting-service-index) > .container > .section-head .kicker,
section:has(.faq) > .container > .section-head .kicker {
  font-size: 15px !important;
  font-weight: 800 !important;
}

section:has(.card-link .accounting-service-index) > .container > .section-head p {
  max-width: 760px !important;
  margin-top: 14px !important;
  font-size: 17px !important;
  line-height: 1.72 !important;
}

body .faq summary {
  font-size: 21px !important;
  line-height: 1.45 !important;
  font-weight: 800 !important;
}

/* bottom CTA + footer */
.cta-band h2,
.cta-band h3 {
  font-size: clamp(28px, 2.2vw, 34px) !important;
  line-height: 1.2 !important;
  font-weight: 780 !important;
  letter-spacing: -.02em !important;
}

.cta-band p {
  font-size: 16px !important;
  line-height: 1.75 !important;
}

.cta-band .btn,
.cta-band a {
  font-size: 15px !important;
  font-weight: 750 !important;
}

footer h2,
footer h3 {
  font-size: 19px !important;
  line-height: 1.3 !important;
  font-weight: 780 !important;
}

footer strong {
  font-size: 16px !important;
  line-height: 1.35 !important;
  font-weight: 760 !important;
}

footer p,
footer a,
footer li {
  font-size: 14.5px !important;
  line-height: 1.7 !important;
}

footer small {
  font-size: 13px !important;
  line-height: 1.65 !important;
}

@media (max-width: 1099px) {
  .header-contact-number,
  .header-contact-copy > strong {
    font-size: clamp(24px, 3vw, 30px) !important;
  }

  section:has(.card-link .accounting-service-index) > .container > .section-head h2,
  section:has(.faq) > .container > .section-head h2 {
    font-size: 32px !important;
  }
}

@media (max-width: 767px) {
  .header-contact-number,
  .header-contact-copy > strong {
    font-size: 22px !important;
    letter-spacing: -.03em !important;
  }

  section:has(.card-link .accounting-service-index) > .container > .section-head h2,
  section:has(.faq) > .container > .section-head h2 {
    font-size: 28px !important;
    line-height: 1.22 !important;
  }

  section:has(.card-link .accounting-service-index) > .container > .section-head p {
    font-size: 16px !important;
  }

  body .faq summary {
    font-size: 19px !important;
  }

  .cta-band h2,
  .cta-band h3 {
    font-size: 26px !important;
  }

  footer h2,
  footer h3 {
    font-size: 18px !important;
  }

  footer p,
  footer a,
  footer li {
    font-size: 14px !important;
  }
}
/* === STAGE16 TYPOGRAPHY REFINEMENT LOCAL END === */

/* === STAGE16 PHONE NUMBER CANONICAL R6 BEGIN === */
/* Canonical header hotline sizing. Exact source class + high specificity. */
html body .site-header .header-main .header-actions > a.header-contact {
  transform: none !important;
  transform-origin: initial !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 0 0 auto !important;
}

html body .site-header .header-main .header-actions > a.header-contact .header-contact-icon {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  color: #67cfb8 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html body .site-header .header-main .header-actions > a.header-contact .header-contact-icon svg {
  width: 34px !important;
  height: 34px !important;
  color: #67cfb8 !important;
}

html body .site-header .header-main .header-actions > a.header-contact .header-contact-copy {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 1px !important;
  min-width: 0 !important;
}

html body .site-header .header-main .header-actions > a.header-contact .header-contact-label {
  font-size: 14px !important;
  line-height: 1.08 !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

html body .site-header .header-main .header-actions > a.header-contact strong.header-contact-number {
  display: block !important;
  transform: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #111a4a !important;
  font-size: 32px !important;
  line-height: .94 !important;
  font-weight: 800 !important;
  letter-spacing: -.035em !important;
  white-space: nowrap !important;
}

html body .site-header .header-main .header-actions {
  gap: 16px !important;
  flex-wrap: nowrap !important;
}

@media (min-width: 981px) and (max-width: 1199px) {
  html body .site-header .header-main .header-actions > a.header-contact strong.header-contact-number {
    font-size: 30px !important;
  }

  html body .site-header .header-main .header-actions > a.header-contact .header-contact-icon,
  html body .site-header .header-main .header-actions > a.header-contact .header-contact-icon svg {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
  }
}
/* === STAGE16 PHONE NUMBER CANONICAL R6 END === */

/* === STAGE16 PHONE NUMBER R7 BEGIN === */
/* R7: reduce ONLY the phone number by exactly 25% visually. */
html body .site-header .header-contact .header-contact-number,
html body header .header-contact .header-contact-number,
html body .header-contact-number {
  display: inline-block !important;
  transform: scale(0.75) !important;
  transform-origin: left center !important;
  white-space: nowrap !important;
}
/* === STAGE16 PHONE NUMBER R7 END === */

/* === STAGE16 PHONE FOOTER TUNE R1 BEGIN === */
/* Header phone: preserve the current typography, only make the digits subtly smaller. */
.site-header .header-contact-number,
.site-header .header-contact-copy > strong,
.header-contact-number {
  scale: .96 !important;
  transform-origin: left center !important;
}

/* Mobile footer: phone number/contact item is intentionally omitted. */
@media (max-width: 767px) {
  footer a[href^="tel:"],
  .site-footer a[href^="tel:"],
  footer .footer-phone,
  footer .footer-contact-phone,
  footer .site-footer__phone,
  footer [data-phone],
  .site-footer .footer-phone,
  .site-footer .footer-contact-phone,
  .site-footer .site-footer__phone,
  .site-footer [data-phone] {
    display: none !important;
  }
}
/* === STAGE16 PHONE FOOTER TUNE R1 END === */

/* === STAGE16 MOBILE HEADER HIDE PHONE R3 BEGIN === */
@media (max-width: 767px) {
  html body .header-actions > *:has(.header-contact-number),
  html body .header-actions > *:has(.header-contact-copy),
  html body .header-actions > *:has(a[href*="18028769366"]),
  html body .header-main > *:has(.header-contact-number),
  html body .header-main > *:has(.header-contact-copy),
  html body .header-main > *:has(a[href*="18028769366"]),
  html body header .header-contact,
  html body header .header__contact,
  html body .site-header .header-contact,
  html body .site-header .header__contact {
    display: none !important;
  }

  html body header .header-contact-number,
  html body header .header-contact-copy,
  html body header .header-contact-icon,
  html body header .header__contact-number,
  html body header .header__contact-copy,
  html body header .header__contact-icon,
  html body .site-header .header-contact-number,
  html body .site-header .header-contact-copy,
  html body .site-header .header-contact-icon {
    display: none !important;
    visibility: hidden !important;
  }
}
/* === STAGE16 MOBILE HEADER HIDE PHONE R3 END === */