/* Viva Andorra — Design Tokens
 * Source of truth: design/vivaandorra-redesign.pen
 * Mirrors mobile app theme (constants/theme.ts) + Pencil variables
 */

:root {
  /* Brand */
  --va-brand-green: #508786;
  --va-brand-green-dark: #3F6E6D;
  --va-brand-yellow: #FFD918;
  --va-brand-pink: #E9417C;
  --va-brand-purple: #8B2F8C;
  --va-brand-blue: #4A90D9;

  /* Surface */
  --va-bg-primary: #FFFFFF;
  --va-bg-secondary: #F6F7F8;
  --va-bg-card: #F6F7F8;
  --va-bg-dark: #0F1F1F;

  /* Text */
  --va-text-primary: #1A1A1A;
  --va-text-secondary: #6B7280;
  --va-text-tertiary: #9CA3AF;
  --va-text-on-brand: #FFFFFF;

  /* Border */
  --va-border-subtle: #F3F4F6;
  --va-border-default: #E5E7EB;

  /* Overlay (matches Pencil overlay-* variables) */
  --va-overlay-light: rgba(0,0,0,0.15);
  --va-overlay-dark: rgba(0,0,0,0.35);
  --va-overlay-darker: rgba(0,0,0,0.6);

  /* Spacing */
  --va-space-xs: 4px;
  --va-space-sm: 8px;
  --va-space-md: 12px;
  --va-space-lg: 16px;
  --va-space-xl: 20px;
  --va-space-2xl: 24px;
  --va-space-3xl: 32px;
  --va-space-4xl: 48px;
  --va-space-5xl: 64px;

  /* Radius */
  --va-radius-sm: 8px;
  --va-radius-md: 12px;
  --va-radius-lg: 16px;
  --va-radius-xl: 20px;
  --va-radius-pill: 100px;

  /* Type scale (synced with Pencil get_variables) */
  --va-font-display: 40px;
  --va-font-h1: 32px;
  --va-font-h2: 24px;
  --va-font-h3: 20px;
  --va-font-headline: 16px;
  --va-font-body: 14px;
  --va-font-caption: 12px;
  --va-font-micro: 11px;

  /* Shadow */
  --va-shadow-sm: 0 4px 16px rgba(0,0,0,0.05);
  --va-shadow-md: 0 8px 24px rgba(0,0,0,0.08);
  --va-shadow-lg: 0 16px 48px rgba(80,135,134,0.3);
}

/* Reset for redesigned templates */
.va-page {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;
  color: var(--va-text-primary);
  line-height: 1.5;
}

.va-page *,
.va-page *::before,
.va-page *::after {
  box-sizing: border-box;
}

.va-page img {
  max-width: 100%;
  height: auto;
  display: block;
}

.va-page a {
  color: inherit;
  text-decoration: none;
}

.va-page button {
  font: inherit;
  cursor: pointer;
}

/* Hide ListingPro page wrappers when our redesign is active */
body.va-redesigned .lp_top_breadcrumb,
body.va-redesigned .top_listingpro_section,
body.va-redesigned .lp-breadcrumb,
body.va-redesigned #wrap-content > .top_section,
body.va-redesigned .lp-home-banner-contianer,
body.va-redesigned .lp-home-page-banner,
body.va-redesigned .lp-home-page-info-strip,
body.va-redesigned .lp-theme-loader,
body.va-redesigned .lp-top-notification-bar,
body.va-redesigned .listingpro-banner-section,
body.va-redesigned .page-header-overlay,
body.va-redesigned .lp-banner-browse-txt,
body.va-redesigned .home-categories-area,
body.va-redesigned .lp-header-overlay {
  display: none !important;
}

/* Strip the random cityscape bg the parent dynamic-css.css paints onto the header */
body.va-redesigned .header-container.lp-header-bg,
body.va-redesigned .lp-header.header-front-page-wrap,
body.va-redesigned .lp-header.header-inner-page-wrap {
  background-image: none !important;
  background-color: transparent !important;
}

body.va-redesigned #wrap-content {
  background: var(--va-bg-primary);
}

/* Aggressively hide ALL parent-theme content between our header and <main>,
 * because in some templates parent theme adds extra wrappers we can't predict. */
body.va-redesigned > .lp-header,
body.va-redesigned .lp-header,
body.va-redesigned .header-container,
body.va-redesigned .header-inner-page-wrap,
body.va-redesigned .header-front-page-wrap,
body.va-redesigned .lp-banner-area,
body.va-redesigned .lp-banner-area-wrap,
body.va-redesigned .lp-search-description,
body.va-redesigned .home-search-container,
body.va-redesigned #lp-banner-area,
body.va-redesigned #header-section {
  display: none !important;
}

/* Make sure main is visible and positioned correctly */
body.va-redesigned main.va-page,
body.va-redesigned .va-page {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 1;
}

/* ============================================================
   Redesigned site header (matches Pencil TXdwD desktop / LQGIT mobile)
   ============================================================ */

/* Hide parent theme's entire header for redesigned pages */
body.va-redesigned > .lp-header,
body.va-redesigned .lp-header.header-front-page-wrap,
body.va-redesigned .lp-header.header-inner-page-wrap {
  display: none !important;
}

.va-site-header {
  background: var(--va-bg-primary);
  border-bottom: 1px solid var(--va-border-subtle);
  position: relative;
  z-index: 1000;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;
}
.va-site-header__inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--va-space-2xl);
  padding: var(--va-space-2xl) var(--va-space-4xl);
  height: 80px;
}
.va-site-header__logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.va-site-header__logo img {
  width: 160px;
  height: 50px;
  object-fit: contain;
  display: block;
}

/* Nav (desktop) */
.va-site-header__nav {
  display: flex;
  align-items: center;
  gap: var(--va-space-3xl);
  flex: 1 1 auto;
  justify-content: center;
}
.va-site-header__nav-link {
  color: var(--va-text-secondary);
  font-size: var(--va-font-body);
  font-weight: 500;
  padding: 4px 0;
  text-decoration: none;
  transition: color 0.15s ease;
}
.va-site-header__nav-link:hover,
.va-site-header__nav-link:focus {
  color: var(--va-text-primary);
}
.va-site-header__nav-link.is-current {
  color: var(--va-text-primary);
  font-weight: 600;
}

/* CTA group (desktop) */
.va-site-header__cta {
  display: flex;
  align-items: center;
  gap: var(--va-space-md);
  flex-shrink: 0;
}
.va-site-header__lang {
  display: inline-flex;
  align-items: center;
  gap: var(--va-space-sm);
  padding: var(--va-space-sm) var(--va-space-md);
  border: 1px solid var(--va-border-default);
  background: transparent;
  color: var(--va-text-primary);
  border-radius: var(--va-radius-pill);
  font-size: var(--va-font-caption);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.va-site-header__lang:hover {
  border-color: var(--va-text-primary);
  background: var(--va-bg-secondary);
}
.va-site-header__lang .va-icon {
  color: var(--va-text-secondary);
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
}
.va-site-header__add {
  display: inline-flex;
  align-items: center;
  gap: var(--va-space-sm);
  padding: var(--va-space-md) var(--va-space-xl);
  background: var(--va-brand-green);
  color: var(--va-text-on-brand);
  border-radius: var(--va-radius-pill);
  font-size: var(--va-font-body);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.va-site-header__add:hover {
  background: var(--va-brand-green-dark);
  color: var(--va-text-on-brand);
  transform: translateY(-1px);
}
.va-site-header__add .va-icon {
  width: 14px;
  height: 14px;
  display: inline-flex;
}

/* Mobile actions */
.va-site-header__mobile-actions {
  display: none;
  align-items: center;
  gap: var(--va-space-sm);
}
.va-site-header__icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: var(--va-bg-secondary);
  border: none;
  color: var(--va-text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease;
}
.va-site-header__icon-btn:hover {
  background: var(--va-border-default);
}
.va-site-header__icon-btn .va-icon {
  width: 18px;
  height: 18px;
}

/* Generic icon span — wraps inline SVGs */
.va-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.va-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Tablet — collapse Nav, keep CTA */
@media (max-width: 960px) {
  .va-site-header__nav {
    display: none;
  }
}

/* Mobile — Logo + actions only, smaller header */
@media (max-width: 768px) {
  .va-site-header__inner {
    height: 64px;
    padding: var(--va-space-md) var(--va-space-lg);
    gap: var(--va-space-md);
  }
  .va-site-header__logo img {
    width: 120px;
    height: 38px;
  }
  .va-site-header__nav,
  .va-site-header__cta {
    display: none;
  }
  .va-site-header__mobile-actions {
    display: flex;
  }
}

/* ============================================================
   Redesigned site footer (matches Pencil footer pattern)
   ============================================================ */

.va-site-footer {
  background: var(--va-bg-dark);
  color: rgba(255,255,255,0.85);
  margin-top: var(--va-space-5xl);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;
}
.va-site-footer__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--va-space-5xl) var(--va-space-4xl) var(--va-space-3xl);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--va-space-4xl);
  align-items: start;
}
.va-site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--va-space-lg);
  max-width: 480px;
}
.va-site-footer__logo {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  background: #FFFFFF;
  padding: var(--va-space-sm) var(--va-space-lg);
  border-radius: var(--va-radius-md);
}
.va-site-footer__logo img {
  width: 160px;
  height: 50px;
  object-fit: contain;
  display: block;
}
.va-site-footer__tagline {
  margin: 0;
  font-size: var(--va-font-body);
  line-height: 1.6;
  color: rgba(255,255,255,0.7);
}
.va-site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--va-space-xl) var(--va-space-2xl);
  align-content: start;
}
.va-site-footer__nav a {
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  font-size: var(--va-font-body);
  font-weight: 500;
  transition: color 0.15s ease;
}
.va-site-footer__nav a:hover { color: #FFFFFF; }
.va-site-footer__bottom {
  grid-column: 1 / -1;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: var(--va-space-xl);
  margin-top: var(--va-space-2xl);
  font-size: var(--va-font-caption);
  color: rgba(255,255,255,0.55);
}
@media (max-width: 768px) {
  .va-site-footer__inner {
    grid-template-columns: 1fr;
    padding: var(--va-space-3xl) var(--va-space-lg) var(--va-space-2xl);
    gap: var(--va-space-2xl);
  }
  .va-site-footer__logo img {
    width: 120px;
    height: 38px;
  }
}


/* ============================================================
   .va-rich — Pencil-style rich content for the_content() output.
   Used by page-service-detail.php and page-author-bio.php.
   ============================================================ */

.va-svc-body,
.va-au-body {
  background: var(--va-bg-primary);
}
.va-svc-body__inner,
.va-au-body__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--va-space-5xl) var(--va-space-4xl);
}

.va-rich {
  font-size: var(--va-font-headline);
  line-height: 1.75;
  color: var(--va-text-primary);
}
.va-rich > * + * { margin-top: var(--va-space-xl); }
.va-rich > h2 + *, .va-rich > h3 + * { margin-top: var(--va-space-lg); }

/* ---------- Headings ---------- */
.va-rich h1, .va-rich h2, .va-rich h3, .va-rich h4 {
  margin: var(--va-space-4xl) 0 var(--va-space-md);
  line-height: 1.25;
  font-weight: 700;
  color: var(--va-text-primary);
  letter-spacing: -0.01em;
}
.va-rich > :first-child { margin-top: 0; }
.va-rich h1 { font-size: clamp(28px, 3vw, 36px); font-weight: 800; }
.va-rich h2 {
  font-size: clamp(22px, 2.5vw, 28px);
  padding-top: var(--va-space-lg);
  position: relative;
}
.va-rich h2::before {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  background: var(--va-brand-green);
  border-radius: 2px;
  margin-bottom: var(--va-space-md);
}
.va-rich h3 { font-size: clamp(18px, 2vw, 22px); }
.va-rich h4 { font-size: var(--va-font-headline); }
.va-rich h2 + h2,
.va-rich h2 + h3,
.va-rich h3 + h3 { margin-top: var(--va-space-md); }
.va-rich h1 a, .va-rich h2 a, .va-rich h3 a {
  color: var(--va-brand-green);
  text-decoration: none;
}
.va-rich h1 a:hover, .va-rich h2 a:hover, .va-rich h3 a:hover { text-decoration: underline; }

/* ---------- Body text ---------- */
.va-rich p {
  margin: 0 0 var(--va-space-lg);
  font-size: var(--va-font-headline);
  line-height: 1.75;
}
.va-rich strong { color: var(--va-text-primary); font-weight: 700; }
.va-rich em { font-style: italic; }
.va-rich a {
  color: var(--va-brand-green);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  word-break: break-word;
  transition: color 0.15s ease;
}
.va-rich a:hover { color: var(--va-brand-green-dark); text-decoration-thickness: 2px; }

.va-rich ul, .va-rich ol {
  padding-left: var(--va-space-2xl);
  margin: 0 0 var(--va-space-lg);
}
.va-rich li { margin-bottom: var(--va-space-sm); line-height: 1.7; }

.va-rich blockquote {
  margin: var(--va-space-2xl) 0;
  padding: var(--va-space-xl) var(--va-space-2xl);
  border-left: 4px solid var(--va-brand-green);
  background: var(--va-bg-secondary);
  border-radius: 0 var(--va-radius-md) var(--va-radius-md) 0;
  color: var(--va-text-secondary);
  font-style: italic;
}

.va-rich img {
  max-width: 100%;
  height: auto;
  border-radius: var(--va-radius-md);
  margin: var(--va-space-2xl) auto;
  display: block;
  box-shadow: var(--va-shadow-sm);
}
.va-rich figure {
  margin: var(--va-space-2xl) 0;
  text-align: center;
}
.va-rich figure img { margin: 0 auto; }
.va-rich figcaption {
  margin-top: var(--va-space-sm);
  font-size: var(--va-font-caption);
  color: var(--va-text-tertiary);
}

/* ============================================================
   Tab strip — horizontal pills, one per Elementor tab group.
   Sticky on desktop so users can navigate long pages.
   ============================================================ */
.va-rich .va-tab-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--va-space-sm);
  margin: var(--va-space-3xl) 0 var(--va-space-xl);
  padding: var(--va-space-md);
  background: var(--va-bg-primary);
  border: 1px solid var(--va-border-default);
  border-radius: var(--va-radius-pill);
  box-shadow: var(--va-shadow-sm);
}
.va-rich .va-tab-strip + .va-tab-strip {
  margin-top: var(--va-space-md);
  padding: var(--va-space-sm);
  background: var(--va-bg-secondary);
  border-color: var(--va-border-subtle);
  box-shadow: none;
}
.va-rich button[role="tab"] {
  flex: 0 1 auto;
  padding: var(--va-space-sm) var(--va-space-xl);
  border: 1px solid transparent;
  border-radius: var(--va-radius-pill);
  background: transparent;
  color: var(--va-text-secondary);
  font-size: var(--va-font-body);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  line-height: 1.4;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.va-rich button[role="tab"]:hover {
  background: var(--va-bg-secondary);
  color: var(--va-text-primary);
}
.va-rich button[role="tab"][aria-selected="true"] {
  background: var(--va-brand-green);
  color: var(--va-text-on-brand);
}
.va-rich button[role="tab"]:active {
  transform: scale(0.98);
}

/* ============================================================
   Chip grid — long h2 runs render as a chip cluster.
   ============================================================ */
.va-rich .va-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--va-space-sm);
  margin: var(--va-space-xl) 0 var(--va-space-3xl);
  padding: var(--va-space-xl);
  background: var(--va-bg-secondary);
  border-radius: var(--va-radius-md);
}
.va-rich .va-chip {
  display: inline-flex;
  align-items: center;
  padding: var(--va-space-sm) var(--va-space-md);
  background: var(--va-bg-primary);
  border: 1px solid var(--va-border-subtle);
  border-radius: var(--va-radius-sm);
  font-size: var(--va-font-caption);
  font-weight: 500;
  color: var(--va-text-primary);
  line-height: 1.3;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
  cursor: default;
}
.va-rich .va-chip:hover {
  background: var(--va-bg-primary);
  border-color: var(--va-brand-green);
  color: var(--va-brand-green);
  transform: translateY(-1px);
}

/* ============================================================
   Image-link card grid + figure gallery.
   ============================================================ */
.va-rich .va-img-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--va-space-lg);
  margin: var(--va-space-3xl) 0;
}
.va-rich .va-img-grid > a {
  display: block;
  text-decoration: none;
  border-radius: var(--va-radius-md);
  overflow: hidden;
  background: var(--va-bg-card);
  position: relative;
  aspect-ratio: 4 / 3;
  box-shadow: var(--va-shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.va-rich .va-img-grid > a:hover {
  transform: translateY(-4px);
  box-shadow: var(--va-shadow-md);
}
.va-rich .va-img-grid > a > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  border-radius: 0;
  display: block;
  box-shadow: none;
  transition: transform 0.4s ease;
}
.va-rich .va-img-grid > a:hover > img {
  transform: scale(1.05);
}

.va-rich .va-fig-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--va-space-md);
  margin: var(--va-space-3xl) 0;
}
.va-rich .va-fig-grid > figure {
  margin: 0;
  border-radius: var(--va-radius-md);
  overflow: hidden;
  background: var(--va-bg-card);
  aspect-ratio: 3 / 4;
  box-shadow: var(--va-shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.va-rich .va-fig-grid > figure:hover {
  transform: translateY(-4px);
  box-shadow: var(--va-shadow-md);
}
.va-rich .va-fig-grid > figure > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  border-radius: 0;
  display: block;
  box-shadow: none;
  transition: transform 0.4s ease;
}
.va-rich .va-fig-grid > figure:hover > img {
  transform: scale(1.05);
}

/* ============================================================
   Native HTML accordions — used in 求职信息 / 网页设计详细页 etc.
   ============================================================ */
.va-rich details {
  background: var(--va-bg-primary);
  border: 1px solid var(--va-border-default);
  border-radius: var(--va-radius-md);
  padding: 0;
  margin: var(--va-space-md) 0;
  overflow: hidden;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.va-rich details:hover {
  border-color: var(--va-brand-green);
  box-shadow: var(--va-shadow-sm);
}
.va-rich details[open] {
  box-shadow: var(--va-shadow-sm);
  border-color: var(--va-brand-green);
}
.va-rich details summary {
  list-style: none;
  cursor: pointer;
  padding: var(--va-space-lg) var(--va-space-2xl);
  font-size: var(--va-font-headline);
  font-weight: 700;
  color: var(--va-text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--va-space-md);
  transition: background 0.15s ease;
  user-select: none;
}
.va-rich details summary::-webkit-details-marker { display: none; }
.va-rich details summary::marker { display: none; }
.va-rich details summary:hover { background: var(--va-bg-secondary); }
.va-rich details[open] summary {
  background: var(--va-bg-secondary);
  border-bottom: 1px solid var(--va-border-subtle);
}
.va-rich details summary svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  fill: var(--va-text-secondary);
  transition: transform 0.2s ease;
}
.va-rich details summary svg:nth-of-type(2) {
  display: none;
}
.va-rich details > *:not(summary) {
  padding: var(--va-space-lg) var(--va-space-2xl);
  margin: 0;
}
.va-rich details > strong {
  display: block;
  padding: var(--va-space-lg) var(--va-space-2xl) var(--va-space-xs);
  margin: 0;
  color: var(--va-brand-green);
  font-size: var(--va-font-body);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.va-rich details > strong + p,
.va-rich details > strong + strong {
  padding-top: var(--va-space-xs);
}
.va-rich details > p {
  padding: var(--va-space-xs) var(--va-space-2xl) var(--va-space-md);
  margin: 0;
  font-size: var(--va-font-body);
  line-height: 1.7;
}

/* ============================================================
   Stray inline buttons / SVG icons that survived from Elementor.
   ============================================================ */
.va-rich > svg,
.va-rich p > svg {
  width: 14px;
  height: 14px;
  fill: var(--va-text-tertiary);
  display: inline-block;
  vertical-align: middle;
}

/* Standalone images and inline videos */
.va-rich iframe,
.va-rich video {
  max-width: 100%;
  border-radius: var(--va-radius-md);
  margin: var(--va-space-2xl) auto;
  display: block;
}

/* ============================================================
   Feature card grid — image + title + description cards.
   Matches Pencil "Why Choose Us" design.
   ============================================================ */
.va-rich .va-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--va-space-xl);
  margin: var(--va-space-3xl) 0;
}
.va-rich .va-feature-card {
  display: flex;
  flex-direction: column;
  background: var(--va-bg-primary);
  border-radius: var(--va-radius-lg);
  overflow: hidden;
  box-shadow: var(--va-shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.va-rich .va-feature-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--va-shadow-md);
}
.va-rich .va-feature-card__media {
  width: 100%;
  height: 180px;
  background-size: cover;
  background-position: center;
  background-color: var(--va-bg-secondary);
}
.va-rich .va-feature-card__body {
  padding: var(--va-space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--va-space-sm);
}
.va-rich .va-feature-card__title {
  margin: 0;
  font-size: var(--va-font-headline);
  font-weight: 700;
  color: var(--va-text-primary);
  line-height: 1.3;
  padding: 0;
}
.va-rich .va-feature-card__title::before { display: none; }
.va-rich .va-feature-card__desc {
  margin: 0;
  font-size: var(--va-font-body);
  line-height: 1.6;
  color: var(--va-text-secondary);
}
@media (max-width: 640px) {
  .va-rich .va-feature-card__media { height: 160px; }
}

/* ============================================================
   H2 + P feature cards — alternating "title + description" pairs
   become a grid of icon cards (matches Pencil "Why Work With Me").
   ============================================================ */
.va-rich .va-h2p-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--va-space-xl);
  margin: var(--va-space-3xl) 0;
}
.va-rich .va-h2p-card {
  display: flex;
  flex-direction: column;
  gap: var(--va-space-md);
  padding: var(--va-space-2xl);
  background: var(--va-bg-secondary);
  border-radius: var(--va-radius-md);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.va-rich .va-h2p-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--va-shadow-sm);
}
.va-rich .va-h2p-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--va-text-on-brand);
  font-size: 22px;
  line-height: 1;
}
.va-rich .va-h2p-card--pink   .va-h2p-card__icon { background: var(--va-brand-pink); }
.va-rich .va-h2p-card--purple .va-h2p-card__icon { background: var(--va-brand-purple); }
.va-rich .va-h2p-card--green  .va-h2p-card__icon { background: var(--va-brand-green); }
.va-rich .va-h2p-card--blue   .va-h2p-card__icon { background: var(--va-brand-blue); }
.va-rich .va-h2p-card--yellow .va-h2p-card__icon { background: var(--va-brand-yellow); color: var(--va-text-primary); }
.va-rich .va-h2p-card__title {
  font-size: var(--va-font-headline);
  font-weight: 700;
  color: var(--va-text-primary);
  line-height: 1.3;
  margin: 0;
  padding: 0;
}
.va-rich .va-h2p-card__desc {
  font-size: var(--va-font-body);
  line-height: 1.65;
  color: var(--va-text-secondary);
  margin: 0;
}

/* ============================================================
   Hero CTA button — standalone <h1><a>...</a></h1> at top of body
   converts into a prominent green pill button.
   ============================================================ */
.va-rich .va-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--va-space-sm);
  padding: var(--va-space-md) var(--va-space-2xl);
  background: var(--va-brand-green);
  color: var(--va-text-on-brand);
  border-radius: var(--va-radius-pill);
  font-size: var(--va-font-headline);
  font-weight: 700;
  text-decoration: none;
  margin: var(--va-space-md) 0 var(--va-space-3xl);
  transition: background 0.15s ease, transform 0.15s ease;
  box-shadow: var(--va-shadow-md);
}
.va-rich .va-hero-cta:hover {
  background: var(--va-brand-green-dark);
  transform: translateY(-2px);
  color: var(--va-text-on-brand);
  text-decoration: none;
}
.va-rich .va-hero-cta__arrow { font-size: 18px; }

/* ============================================================
   Image pair — exactly 2 side-by-side images (e.g. office photos).
   ============================================================ */
.va-rich .va-img-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--va-space-md);
  margin: var(--va-space-2xl) 0;
}
.va-rich .va-img-pair > img {
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: var(--va-radius-md);
  object-fit: cover;
  aspect-ratio: 4 / 3;
  box-shadow: var(--va-shadow-sm);
}
@media (max-width: 640px) {
  .va-rich .va-img-pair { grid-template-columns: 1fr; }
}

/* ============================================================
   Numbered feature list — e.g. "1. 特殊功能 — desc" pattern.
   Two-column grid of cards with big numbers + title + desc.
   ============================================================ */
.va-rich .va-feat-num-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--va-space-lg);
  margin: var(--va-space-2xl) 0 var(--va-space-3xl);
}
.va-rich .va-feat-num {
  display: flex;
  align-items: flex-start;
  gap: var(--va-space-lg);
  padding: var(--va-space-xl);
  background: var(--va-bg-secondary);
  border-radius: var(--va-radius-md);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.va-rich .va-feat-num:hover {
  background: var(--va-bg-card);
  box-shadow: var(--va-shadow-sm);
}
.va-rich .va-feat-num__num {
  flex-shrink: 0;
  font-size: 32px;
  font-weight: 800;
  color: var(--va-brand-green);
  line-height: 1;
  letter-spacing: -1px;
  width: 48px;
}
.va-rich .va-feat-num__body {
  display: flex;
  flex-direction: column;
  gap: var(--va-space-xs);
  min-width: 0;
  flex: 1;
}
.va-rich .va-feat-num__title {
  font-size: var(--va-font-headline);
  font-weight: 700;
  color: var(--va-text-primary);
  line-height: 1.3;
  margin: 0;
  padding: 0;
}
.va-rich .va-feat-num__desc {
  font-size: var(--va-font-body);
  line-height: 1.6;
  color: var(--va-text-secondary);
  margin: 0;
}

/* ============================================================
   Step grid — numbered cards (e.g. "1.咨询办理 → 2.上传资料 →")
   ============================================================ */
.va-rich .va-step-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--va-space-lg);
  margin: var(--va-space-2xl) 0 var(--va-space-3xl);
}
.va-rich .va-step-card {
  display: flex;
  flex-direction: column;
  gap: var(--va-space-md);
  padding: var(--va-space-xl);
  background: var(--va-bg-primary);
  border: 1px solid var(--va-border-subtle);
  border-radius: var(--va-radius-md);
  box-shadow: var(--va-shadow-sm);
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.va-rich .va-step-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--va-shadow-md);
}
.va-rich .va-step-card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: var(--va-brand-green);
  color: var(--va-text-on-brand);
  font-size: 18px;
  font-weight: 800;
  flex-shrink: 0;
}
.va-rich .va-step-card__label {
  font-size: var(--va-font-headline);
  font-weight: 700;
  color: var(--va-text-primary);
  line-height: 1.3;
}

/* ============================================================
   Contact grid — styled cards for 邮箱 / 电话 / 地址.
   ============================================================ */
.va-rich .va-contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--va-space-md);
  margin: var(--va-space-2xl) 0;
}
.va-rich .va-contact-card {
  display: flex;
  align-items: center;
  gap: var(--va-space-md);
  padding: var(--va-space-lg);
  background: var(--va-bg-primary);
  border: 1px solid var(--va-border-subtle);
  border-radius: var(--va-radius-md);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.va-rich .va-contact-card:hover {
  border-color: var(--va-border-default);
  box-shadow: var(--va-shadow-sm);
}
.va-rich .va-contact-card__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--va-text-on-brand);
  font-size: 20px;
  line-height: 1;
}
.va-rich .va-contact-card--green .va-contact-card__icon { background: var(--va-brand-green); }
.va-rich .va-contact-card--pink  .va-contact-card__icon { background: var(--va-brand-pink); }
.va-rich .va-contact-card--purple .va-contact-card__icon { background: var(--va-brand-purple); }
.va-rich .va-contact-card__icon[data-icon="mail"]::before { content: '✉'; }
.va-rich .va-contact-card__icon[data-icon="phone"]::before { content: '☎'; }
.va-rich .va-contact-card__icon[data-icon="pin"]::before { content: '📍'; }
.va-rich .va-contact-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--va-space-xs);
  min-width: 0;
}
.va-rich .va-contact-card__label {
  font-size: var(--va-font-micro);
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--va-text-tertiary);
  text-transform: uppercase;
}
.va-rich .va-contact-card__value {
  font-size: var(--va-font-body);
  font-weight: 600;
  color: var(--va-text-primary);
  word-break: break-all;
}

/* Tables (some pages may render tabular data) */
.va-rich table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--va-space-2xl) 0;
  font-size: var(--va-font-body);
}
.va-rich table th,
.va-rich table td {
  padding: var(--va-space-md) var(--va-space-lg);
  border: 1px solid var(--va-border-default);
  text-align: left;
}
.va-rich table th {
  background: var(--va-bg-secondary);
  font-weight: 700;
}

/* ============================================================
   Tablet / mobile breakpoints
   ============================================================ */
@media (max-width: 768px) {
  .va-svc-body__inner,
  .va-au-body__inner {
    padding: var(--va-space-2xl) var(--va-space-lg) var(--va-space-3xl);
  }
  .va-rich h1 { font-size: 26px; }
  .va-rich h2 { font-size: 20px; }
  .va-rich h3 { font-size: 17px; }
  .va-rich .va-tab-strip {
    border-radius: var(--va-radius-md);
    padding: var(--va-space-sm);
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .va-rich .va-tab-strip::-webkit-scrollbar { display: none; }
  .va-rich button[role="tab"] {
    padding: var(--va-space-sm) var(--va-space-md);
    font-size: var(--va-font-caption);
  }
  .va-rich .va-chip-grid {
    padding: var(--va-space-md);
  }
  .va-rich details summary {
    padding: var(--va-space-md) var(--va-space-lg);
    font-size: var(--va-font-body);
  }
  .va-rich details > *:not(summary),
  .va-rich details > p,
  .va-rich details > strong {
    padding-left: var(--va-space-lg);
    padding-right: var(--va-space-lg);
  }
}