/*
 * Ruihe v13 — unequal appraisal band
 * Selected visual target: second revised direction, 2026-07-13.
 * This layer keeps the existing content, routes, modal system and estimate API intact.
 */

:root {
  color-scheme: light;
  --cream: #f2f3f1;
  --cream-soft: #ffffff;
  --cream-glass: rgba(255, 255, 255, 0.96);
  --wine: #151b1e;
  --wine-rich: #151b1e;
  --wine-deep: #0d1214;
  --gold: #151b1e;
  --gold-bright: #242c31;
  --gold-pale: #d6dbdd;
  --green: #151b1e;
  --green-deep: #0d1214;
  --ink: #151b1e;
  --ink-soft: #30393e;
  --muted: #68737a;
  --line: rgba(21, 27, 30, 0.14);
  --line-gold: #d6dbdd;
  --surface: #ffffff;
  --surface-strong: #ffffff;
  --shadow-soft: 0 20px 56px rgba(13, 18, 20, 0.08);
  --shadow-card: 0 12px 30px rgba(13, 18, 20, 0.08);
  --shadow-lift: 0 28px 70px rgba(13, 18, 20, 0.16);
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 14px;
  --radius-pill: 4px;
  --sans: "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display: "Manrope", "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: var(--sans);
  --wrap: min(1320px, calc(100% - 64px));
  --header-height: 82px;
}

html,
body {
  background: #f2f3f1;
}

body {
  color: #151b1e;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.72;
}

h1,
h2,
h3 {
  color: #151b1e;
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: -0.035em;
}

::selection {
  color: #ffffff;
  background: #30393e;
}

:focus-visible {
  outline: 2px solid #879299;
  outline-offset: 4px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

.utility-bar {
  color: #485258;
  background: #e5e8e8;
  border-bottom-color: rgba(21, 27, 30, 0.1);
}

.site-header,
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.97);
  border-bottom-color: rgba(21, 27, 30, 0.1);
  box-shadow: none;
}

.brand-copy strong {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0.12em;
}

.brand-copy small,
.site-nav a,
.home-stage-number,
.footer-bottom {
  font-family: var(--display);
}

.header-action,
.btn-primary,
.form-submit,
.btn-light,
.btn-dark {
  color: #ffffff;
  background: #151b1e;
  border-color: #151b1e;
}

.header-action:hover,
.btn-primary:hover,
.form-submit:hover,
.btn-light:hover,
.btn-dark:hover {
  color: #ffffff;
  background: #30393e;
  border-color: #30393e;
}

.btn-line,
.asset-action-line {
  color: #151b1e;
  background: transparent;
  border-color: rgba(21, 27, 30, 0.34);
}

.btn-line:hover,
.asset-action-line:hover {
  color: #ffffff;
  background: #151b1e;
  border-color: #151b1e;
}

.text-link {
  color: #151b1e;
  border-bottom-color: rgba(21, 27, 30, 0.44);
}

.text-link:hover {
  color: #59656c;
  border-bottom-color: #59656c;
}

.page-hero,
.section-warm,
.home-proof,
.restored-trust-section,
.restored-process-flow {
  background: #f2f3f1;
}

.section-soft,
.restored-trust-section.is-soft,
.home-contact {
  background: #e9eceb;
}

.section-dark,
.service-hero,
.home-valuation,
.cta-band,
.site-footer,
.restored-trust-contact-band {
  color: #ffffff;
  background: #151b1e;
}

.section-dark h1,
.section-dark h2,
.section-dark h3,
.service-hero h1,
.service-hero h2,
.service-hero h3,
.home-valuation h1,
.home-valuation h2,
.home-valuation h3,
.cta-band h1,
.cta-band h2,
.cta-band h3,
.restored-trust-contact-band h1,
.restored-trust-contact-band h2,
.restored-trust-contact-band h3 {
  color: #ffffff;
}

.service-card-media::after,
.page-hero::before,
.service-hero::before,
.cta-band::before,
.cta-band::after {
  display: none;
}

.review-summary span,
.review-person p,
.restored-trust-reviews > article > span,
.home-proof-grid h3,
.modal-kicker,
.line-id,
.copy-status {
  color: #30393e;
}

.review-card,
.restored-trust-reviews article {
  border-color: rgba(21, 27, 30, 0.14);
  border-radius: 6px;
}

.modal-backdrop {
  background: rgba(8, 12, 14, 0.76);
  backdrop-filter: blur(18px) saturate(75%);
}

.modal-panel {
  width: min(76vw, 1180px);
  max-height: min(88vh, 920px);
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 14px;
  box-shadow: 0 44px 120px rgba(0, 0, 0, 0.4);
}

.modal-close {
  color: #151b1e;
  background: #f2f3f1;
  border-color: rgba(21, 27, 30, 0.14);
}

.asset-action-primary,
.asset-action-line {
  color: #ffffff;
  background: #151b1e;
  border-color: #151b1e;
}

.asset-callout {
  color: #30393e;
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(21, 27, 30, 0.14);
  border-radius: 4px;
}

.asset-callout::before {
  background: #59656c;
}

.floating-action,
.floating-action:first-child,
.floating-action.is-line,
.floating-action.is-map {
  color: #ffffff;
  background: #151b1e;
  border-color: rgba(255, 255, 255, 0.22);
}

.floating-action:hover,
.floating-action:first-child:hover,
.floating-action.is-line:hover,
.floating-action.is-map:hover {
  color: #151b1e;
  background: #ffffff;
}

/* Selected homepage stage */

.home-page .utility-bar {
  display: none;
}

.home-page .site-header {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  color: #ffffff;
  background: transparent;
  border-bottom-color: rgba(255, 255, 255, 0.12);
  backdrop-filter: none;
}

.home-page .site-header.is-scrolled {
  position: fixed;
  color: #ffffff;
  background: #192125;
  border-bottom-color: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(16px);
}

.home-page .site-header .brand-copy strong,
.home-page .site-header .brand-copy small,
.home-page .site-header .site-nav a {
  color: #ffffff;
}

.home-page .site-header .brand-copy small {
  opacity: 0.68;
}

.home-page .site-header .brand-mark {
  width: 52px;
  height: 52px;
}

.home-page .site-header .brand-copy strong {
  font-size: 1.22rem;
}

.home-page .site-header .site-nav a {
  font-size: 1rem;
  font-weight: 400;
}

.home-page .site-header .site-nav a::after {
  background: #ffffff;
}

.home-page .site-header .header-action {
  display: none;
}

.home-page .menu-toggle {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
}

.home-stage {
  position: relative;
  overflow: hidden;
  padding: 0;
  color: #ffffff;
  background: #323c43;
}

.home-stage::before,
.home-stage::after {
  display: none;
}

.home-stage-shell {
  position: relative;
  min-height: clamp(640px, calc(100svh - 174px), 780px);
  overflow: hidden;
  padding-top: var(--header-height);
  background: #323c43;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.home-stage-scene {
  position: absolute;
  inset: var(--header-height) 0 104px;
  overflow: hidden;
}

.home-stage-scene::after {
  position: absolute;
  right: 4%;
  bottom: 7%;
  left: 4%;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  content: "";
}

.home-stage-object {
  position: absolute;
  z-index: 1;
  margin: 0;
  opacity: 0.55;
  pointer-events: none;
  transition: left 420ms cubic-bezier(0.22, 1, 0.36, 1), bottom 420ms cubic-bezier(0.22, 1, 0.36, 1), width 420ms cubic-bezier(0.22, 1, 0.36, 1), opacity 280ms ease, filter 280ms ease, transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.home-stage-object img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.home-stage-object[data-stage-object="car"] {
  bottom: 25%;
  left: 39%;
  width: 36%;
  filter: saturate(0.66) brightness(0.82);
}

.home-stage-object[data-stage-object="motorcycle"] {
  bottom: 14%;
  left: 66%;
  width: 37%;
  opacity: 0.78;
  filter: saturate(0.72) brightness(0.9);
}

.home-stage-object[data-stage-object="gold"] {
  bottom: 6%;
  left: 78%;
  z-index: 3;
  width: 13%;
  opacity: 0.92;
}

.home-stage-object[data-stage-object="luxury"] {
  bottom: 7%;
  left: 4%;
  z-index: 4;
  width: min(32vw, 430px);
  opacity: 1;
  transform: rotate(78deg);
}

.home-stage[data-stage-active="car"] .home-stage-object[data-stage-object="car"] {
  bottom: 12%;
  left: 17%;
  z-index: 4;
  width: 59%;
  opacity: 1;
  filter: none;
}

.home-stage[data-stage-active="car"] .home-stage-object[data-stage-object="motorcycle"] {
  bottom: 14%;
  left: 72%;
  width: 30%;
  opacity: 0.48;
}

.home-stage[data-stage-active="car"] .home-stage-object[data-stage-object="gold"] {
  left: 80%;
  width: 11%;
  opacity: 0.58;
}

.home-stage[data-stage-active="car"] .home-stage-object[data-stage-object="luxury"] {
  bottom: 1%;
  left: -4%;
  z-index: 2;
  width: 26%;
  opacity: 0.34;
  filter: saturate(0.6) brightness(0.76);
}

.home-stage[data-stage-active="motorcycle"] .home-stage-object[data-stage-object="motorcycle"] {
  bottom: 4%;
  left: 39%;
  z-index: 4;
  width: 56%;
  opacity: 1;
  filter: none;
}

.home-stage[data-stage-active="motorcycle"] .home-stage-object[data-stage-object="car"] {
  bottom: 24%;
  left: 20%;
  width: 38%;
  opacity: 0.42;
}

.home-stage[data-stage-active="motorcycle"] .home-stage-object[data-stage-object="gold"] {
  bottom: 4%;
  left: 80%;
  width: 10%;
  opacity: 0.46;
}

.home-stage[data-stage-active="motorcycle"] .home-stage-object[data-stage-object="luxury"] {
  bottom: 0;
  left: -2%;
  z-index: 2;
  width: 27%;
  opacity: 0.38;
  filter: saturate(0.58) brightness(0.76);
}

.home-stage[data-stage-active="gold"] .home-stage-object[data-stage-object="gold"] {
  bottom: -4%;
  left: 47%;
  z-index: 4;
  width: 31%;
  opacity: 1;
}

.home-stage[data-stage-active="gold"] .home-stage-object[data-stage-object="car"] {
  bottom: 28%;
  left: 27%;
  width: 36%;
  opacity: 0.4;
}

.home-stage[data-stage-active="gold"] .home-stage-object[data-stage-object="motorcycle"] {
  bottom: 18%;
  left: 70%;
  width: 28%;
  opacity: 0.34;
}

.home-stage[data-stage-active="gold"] .home-stage-object[data-stage-object="luxury"] {
  bottom: 1%;
  left: 0;
  z-index: 2;
  width: 27%;
  opacity: 0.34;
  filter: saturate(0.58) brightness(0.76);
}

.home-stage-index-wrap {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
}

.home-stage-index {
  display: grid;
  min-height: 104px;
  grid-template-columns: 0.95fr 1fr 1.24fr 1.34fr;
  align-items: end;
}

.home-stage-index-item {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 104px;
  grid-template-columns: 28px minmax(0, 1fr);
  align-content: center;
  align-items: center;
  gap: 4px;
  padding: 20px clamp(14px, 2vw, 30px) 18px;
  color: rgba(255, 255, 255, 0.48);
  border-bottom: 2px solid transparent;
  transition: color 180ms ease, border-color 180ms ease;
}

.home-stage-index-item::after {
  position: absolute;
  top: 28px;
  right: 0;
  bottom: 28px;
  width: 1px;
  background: rgba(255, 255, 255, 0.12);
  content: "";
}

.home-stage-index-item:last-child::after {
  display: none;
}

.home-stage-index-item:hover,
.home-stage-index-item:focus-visible,
.home-stage-index-item.is-active {
  color: #ffffff;
  border-bottom-color: #ffffff;
}

.home-stage-number {
  position: absolute;
  top: 16px;
  left: clamp(14px, 2vw, 30px);
  color: rgba(255, 255, 255, 0.34);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
}

.home-stage-index-item strong {
  overflow: hidden;
  font-size: clamp(1.08rem, 1.55vw, 1.48rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-stage-icon {
  color: currentColor;
  font-size: 24px;
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
}

.home-stage-index-item small {
  position: absolute;
  right: clamp(14px, 2vw, 30px);
  bottom: 8px;
  left: clamp(14px, 2vw, 30px);
  overflow: hidden;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  text-overflow: ellipsis;
  transform: translateY(4px);
  transition: opacity 180ms ease, transform 180ms ease;
  white-space: nowrap;
}

.home-stage-index-item:hover small,
.home-stage-index-item:focus-visible small {
  opacity: 1;
  transform: translateY(0);
}

.home-stage-contact {
  position: relative;
  z-index: 12;
  color: #ffffff;
  background: #192125;
}

.home-stage-contact-inner {
  display: grid;
  min-height: 148px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
}

.home-stage-info {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(260px, 1.7fr) minmax(140px, 0.82fr) minmax(160px, 0.92fr) minmax(220px, 1.18fr);
  align-items: stretch;
  font-style: normal;
}

.home-stage-info > a,
.home-stage-info > span,
.home-stage-info > button {
  display: flex;
  min-width: 0;
  min-height: 58px;
  align-items: center;
  gap: 12px;
  padding: 6px clamp(16px, 2vw, 28px);
  color: rgba(255, 255, 255, 0.82);
  background: transparent;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  font-size: clamp(0.9rem, 1.05vw, 1rem);
  line-height: 1.45;
  text-align: left;
}

.home-stage-info > :first-child {
  padding-left: 0;
  border-left: 0;
}

.home-stage-info svg {
  width: 25px;
  height: 25px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-stage-info span {
  overflow-wrap: anywhere;
}

.home-stage-info > :not(.home-stage-address) span {
  white-space: nowrap;
}

.home-stage-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(154px, 1fr));
  gap: 14px;
}

.home-stage-actions .btn {
  min-height: 58px;
  padding: 12px 24px;
  color: #ffffff;
  background: transparent;
  border-color: rgba(255, 255, 255, 0.7);
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 500;
}

.home-stage-actions .btn-primary {
  background: #0d1214;
}

.home-stage-actions .btn:hover {
  color: #151b1e;
  background: #ffffff;
  border-color: #ffffff;
}

.home-split {
  background: #ffffff;
}

.home-split-image img,
.restored-trust-identity figure img,
.restored-trust-store figure img,
.evidence-image img {
  box-shadow: 0 18px 48px rgba(13, 18, 20, 0.1);
}

.home-process,
.home-questions,
.home-reviews {
  background: #f2f3f1;
}

.home-process-list > article > span,
.restored-process-list > article > span,
.restored-trust-summary > article > span {
  color: #879299;
}

.home-proof-grid h3 {
  color: #30393e;
}

.mobile-dock {
  color: rgba(255, 255, 255, 0.76);
  background: #151b1e;
  border-top-color: rgba(255, 255, 255, 0.16);
}

.mobile-dock > :last-child {
  color: #151b1e;
  background: #ffffff;
}

@media (max-width: 1180px) {
  .home-stage-info {
    grid-template-columns: minmax(220px, 1.45fr) minmax(124px, 0.78fr) minmax(144px, 0.9fr) minmax(190px, 1.12fr);
  }

  .home-stage-info > a,
  .home-stage-info > span,
  .home-stage-info > button {
    padding-inline: 16px;
    font-size: 0.8rem;
  }

  .home-stage-actions {
    grid-template-columns: 142px 142px;
  }

  .home-stage-actions .btn {
    padding-inline: 14px;
  }
}

@media (max-width: 900px) {
  :root {
    --wrap: min(100% - 40px, 820px);
    --header-height: 72px;
  }

  .home-page .site-nav {
    color: #ffffff;
    background: #192125;
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
  }

  .home-page .site-nav a {
    color: #ffffff;
    border-bottom-color: rgba(255, 255, 255, 0.14);
  }

  .home-stage-shell {
    min-height: 640px;
  }

  .home-stage-contact-inner {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 24px;
    padding-block: 28px;
  }

  .home-stage-info {
    grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(132px, 1fr));
  }

  .home-stage-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  :root {
    --wrap: calc(100% - 28px);
    --header-height: 64px;
  }

  .home-page .header-inner {
    min-height: 64px;
  }

  .home-page .brand-mark {
    width: 40px;
    height: 40px;
  }

  .home-page .brand-copy strong {
    font-size: 0.98rem;
  }

  .home-page .menu-toggle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
  }

  .home-stage-shell {
    min-height: 502px;
    padding-top: var(--header-height);
  }

  .home-stage-scene {
    inset: var(--header-height) 0 76px;
  }

  .home-stage-scene::after {
    right: 14px;
    bottom: 20px;
    left: 14px;
  }

  .home-stage .home-stage-object[data-stage-object] {
    opacity: 0;
    filter: none !important;
  }

  .home-stage[data-stage-active="car"] .home-stage-object[data-stage-object="car"] {
    bottom: 22%;
    left: 4%;
    width: 92%;
    opacity: 1;
  }

  .home-stage[data-stage-active="motorcycle"] .home-stage-object[data-stage-object="motorcycle"] {
    bottom: 4%;
    left: 8%;
    width: 86%;
    opacity: 1;
  }

  .home-stage[data-stage-active="gold"] .home-stage-object[data-stage-object="gold"] {
    bottom: -3%;
    left: 25%;
    width: 52%;
    opacity: 1;
  }

  .home-stage[data-stage-active="luxury"] .home-stage-object[data-stage-object="luxury"] {
    bottom: -3%;
    left: 16%;
    width: 68%;
    opacity: 1;
    transform: rotate(-5deg);
  }

  .home-stage-index-wrap {
    --wrap: 100%;
  }

  .home-stage-index {
    display: flex;
    min-height: 76px;
    overflow-x: auto;
    padding-inline: 14px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .home-stage-index::-webkit-scrollbar {
    display: none;
  }

  .home-stage-index-item {
    min-height: 76px;
    flex: 0 0 48%;
    grid-template-columns: 22px minmax(0, 1fr);
    align-content: end;
    padding: 18px 14px 12px;
    border-bottom-width: 2px;
    scroll-snap-align: start;
  }

  .home-stage-index-item::after {
    top: 20px;
    bottom: 14px;
  }

  .home-stage-number {
    top: 12px;
    left: 14px;
    font-size: 0.58rem;
  }

  .home-stage-index-item strong {
    font-size: 0.96rem;
  }

  .home-stage-icon {
    font-size: 20px;
  }

  .home-stage-index-item small {
    display: none;
  }

  .home-stage-contact-inner {
    gap: 18px;
    padding-block: 20px 22px;
  }

  .home-stage-info {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }

  .home-stage-info > a,
  .home-stage-info > span,
  .home-stage-info > button {
    min-height: 54px;
    padding: 9px 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    border-left: 0;
    font-size: 0.78rem;
  }

  .home-stage-info > :not(.home-stage-address) span {
    white-space: normal;
  }

  .home-stage-info > :first-child {
    padding-left: 10px;
    border-top: 0;
  }

  .home-stage-info > :nth-child(2) {
    border-top: 0;
  }

  .home-stage-info > :nth-child(even) {
    border-left: 1px solid rgba(255, 255, 255, 0.14);
  }

  .home-stage-address {
    grid-column: 1 / -1;
  }

  .home-stage-info > .home-stage-address + a {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }

  .home-stage-info svg {
    width: 21px;
    height: 21px;
  }

  .home-stage-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .home-stage-actions .btn {
    min-height: 52px;
    padding: 10px 8px;
    font-size: 0.9rem;
  }

  .home-split,
  .home-process,
  .home-reviews,
  .home-valuation,
  .home-proof,
  .home-questions {
    scroll-margin-top: 72px;
  }

  .modal-panel {
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    border-radius: 12px;
  }
}

@media (max-width: 360px) {
  .home-stage-shell {
    min-height: 436px;
  }

  .home-stage-index-item {
    flex-basis: 54%;
  }

  .home-stage-actions {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-stage-object,
  .home-stage-index-item,
  .home-stage-index-item small {
    transition-duration: 0.01ms !important;
  }
}