/* Obsidian-black canvas, warm gold metal, ivory typography.
   Keep the approved layout, natural jade imagery and existing finite motion. */
:root {
  --bg: #050505;
  --surface: #11100e;
  --gold: #cfaa63;
  --jade: #cfaa63;
  --text: #f5f0e6;
  --muted: #b3aca0;
  --line: rgba(207, 170, 99, .21);
  --gold-light: #f0dca9;
  --gold-border: #655033;
  --gold-wash: rgba(207, 170, 99, .07);
}

body { background: var(--bg); }
#navbar { border-bottom-color: rgba(207, 170, 99, .12); }
#navbar::before { background: rgba(5, 5, 5, .97); }
.brand small { color: var(--muted); border-color: var(--gold-border); }
.brand .gold { color: var(--gold-light); }
#site-links > a { color: #ddd3c2; }
#site-links .nav-contact {
  color: var(--gold-light);
  border-color: var(--gold-border);
  background: rgba(5, 5, 5, .25);
}

.hero[data-background=black-jade] .hero-shade {
  background:
    linear-gradient(0deg, #050505 0%, rgba(5, 5, 5, .14) 28%, rgba(5, 5, 5, .13) 68%, rgba(5, 5, 5, .57) 100%),
    linear-gradient(90deg, rgba(5, 5, 5, .63) 0%, rgba(5, 5, 5, .49) 49%, rgba(5, 5, 5, .28) 100%);
}
.hero-eyebrow { color: var(--gold-light); }
#hero-title { color: var(--text); text-shadow: 0 4px 36px rgba(0, 0, 0, .3); }
.gold-line .hero-title-char {
  color: var(--gold);
  background-image: linear-gradient(120deg, #b98b42 0%, #ead099 30%, #fff0c8 50%, #c39950 73%, #e8cb8e 100%);
}
.hero-description { color: #d4cbbb; }
.hero-services, .hero-bottom { color: #b9ae99; }
.hero-services > span { background: var(--gold-border); }
.hero-bottom::before { background: linear-gradient(90deg, transparent, var(--gold-border) 14%, var(--gold-border) 86%, transparent); }

.button-gold {
  color: #181108;
  border-color: #debe80;
  background: linear-gradient(112deg, #bd9650, #eed9a6 48%, #d3ad67);
  box-shadow: inset 0 1px 0 rgba(255, 242, 208, .58), 0 5px 26px rgba(0, 0, 0, .14);
}
.button-outline { color: var(--gold-light); border-color: var(--gold-border); background: rgba(5, 5, 5, .4); }
.text-link { color: var(--gold-light); }
.hero-media-control { background: rgba(5, 5, 5, .86); border-color: var(--gold-border); color: var(--gold-light); }

.about { background: #050505; }
.about-pillars { border-color: var(--gold-border); }
.pillar .eyebrow { color: #c1aa7f; }
.jewelry {
  --jewelry-bg: #0c0b09;
  position: relative;
  isolation: isolate;
  background: var(--jewelry-bg);
}
/* One continuous silk-and-jade scene, with a soft reading shade rather than a panel. */
.jewelry::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, var(--jewelry-bg) 0%, transparent 19%, transparent 79%, var(--jewelry-bg) 100%),
    linear-gradient(90deg, rgba(12, 11, 9, .72) 0%, rgba(12, 11, 9, .58) 44%, rgba(12, 11, 9, .1) 72%, rgba(12, 11, 9, .1) 100%),
    url('assets/hero-hetian.png') right center / cover no-repeat;
}
.jewelry-figure {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.jewelry-figure::before { content: none; }
/* Feather into the section itself, without altering or clipping the jade subject. */
.jewelry-figure::after {
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--jewelry-bg) 0%, transparent 17%, transparent 83%, var(--jewelry-bg) 100%),
    linear-gradient(180deg, var(--jewelry-bg) 0%, transparent 16%, transparent 70%, var(--jewelry-bg) 100%);
}
.jewelry-figure figcaption { color: var(--gold-light); }
.jewelry-figure figcaption small { color: #ceb991; }
.service-row { border-color: var(--line); }

@media (min-width:701px) {
  .jewelry::before {
    background-position: 0 0, 0 0, calc(100% + clamp(0px, 532px - 50vw, 190px)) center;
  }
  /* The same photograph now fills the section; retain the semantic image and its layout. */
  .jewelry-figure img { opacity: 0; }
  .jewelry-figure::after { content: none; }
  .jewelry-figure figcaption { text-shadow: 0 2px 18px rgba(0, 0, 0, .75); }
}
@media (min-width:701px) and (max-width:960px) {
  .jewelry-figure figcaption { left: 18px; right: 18px; }
  .jewelry-figure figcaption > span { font-size: clamp(17px, 2.25vw, 23px); letter-spacing: .06em; }
}

.ai-section { background: radial-gradient(ellipse at 88% 50%, var(--gold-wash), transparent 65%), #050505; }
.agent-visual {
  background: linear-gradient(145deg, #1c1811, #0e0d0b 70%);
  border-color: var(--gold-border);
  box-shadow: inset 0 1px 0 rgba(240, 220, 169, .1), 0 25px 80px rgba(0, 0, 0, .25);
}
.visual-header { color: #bbad93; }
.source-chips span { color: #dbc8a4; background: #18150f; border-color: #4e402b; }
.connector-lines, .connector-lines i { border-color: #6c5430; }
.connector-lines::after, .agent-core::before, .connector-down { background: #6c5430; }
.agent-core { background: linear-gradient(125deg, #352918, #1b1710); border-color: #8d6e3b; }
.agent-core strong { color: var(--gold-light); }
.agent-core small { color: #cbb991; }
.result-sheet { background: #12110e; border-color: #483b28; }
.sheet-heading small { color: #bfac87; border-color: #5e4b30; }
.sheet-item > span { color: #dbcbb0; }
.sheet-foot { color: #c8b58c; border-color: #423723; }

/* Explanatory sequence: keep the layout reserved while each step becomes visible. */
.agent-visual[data-flow-state="waiting"] :is(.source-chips > span, .connector-lines, .agent-core, .connector-down, .result-sheet) {
  opacity: 0;
}
.agent-visual[data-flow-enabled="true"] .flow-caption { display: none; }
.flow-replay {
  min-width: 76px;
  min-height: 32px;
  padding: 5px 8px;
  border: 1px solid var(--gold-border);
  border-radius: 999px;
  background: transparent;
  color: var(--gold-light);
  font-size: 10px;
  letter-spacing: .02em;
  transition: background-color 160ms ease, transform 100ms var(--ease-out);
}
.flow-replay[hidden] { display: none; }
.flow-replay:active { transform: scale(.97); }
@media (hover:hover) and (pointer:fine) {
  .flow-replay:hover { background-color: var(--gold-wash); }
}
@media (max-width:700px) {
  .flow-replay { min-height: 44px; }
}
@media (prefers-reduced-motion:reduce) {
  .agent-visual[data-flow-state="waiting"] :is(.source-chips > span, .connector-lines, .agent-core, .connector-down, .result-sheet) { opacity: 1; }
  .flow-replay:active { transform: none; }
}

.process { background: #090807; }
.process-grid { border-top-color: #6e5430; }
.process-grid > [data-process-state="waiting"] { opacity: 0; }
.step-output { color: #cec0a7; }
.step-output::before { color: var(--gold); }
.cases { background: #050505; }
.case-card { background: #10100e; border-color: #493b26; }
@media (min-width:701px) {
  .case-grid { align-items: start; }
  /* Use layout spacing, leaving the existing scroll-reveal transform untouched. */
  .case-grid > .case-card:nth-child(2) { margin-top: clamp(40px, 6vw, 80px); }
}
.jewelry-cover::after { background: linear-gradient(90deg, rgba(5, 5, 5, .76), transparent); }
.case-label { color: var(--gold-light); border-color: rgba(240, 220, 169, .3); background: rgba(5, 5, 5, .48); }
.case-wordmark { color: var(--gold-light); }
.case-wordmark small { color: #d6c09a; }
.intelligence-cover {
  background: radial-gradient(ellipse at 50% 0%, #41321b, transparent 77%), #100e0b;
  border-bottom-color: #493b26;
}
.practice-graphic > div { background: #1e180f; color: #d7c099; border-color: #6c5430; }
.practice-graphic > i { background: #86693c; }
.practice-graphic > div.practice-center { background: #3b2c16; color: var(--gold-light); border-color: #bc9451; }
.practice-caption, .case-tags > span { color: #c6b99f; }
.faq { background: #0b0a08; }
.contact { background: radial-gradient(ellipse at 0 100%, rgba(165, 119, 49, .09), transparent 60%), #050505; }
.contact-links a, .contact-links button, .contact-links p { color: #d9d0c0; }
.contact-form { background: linear-gradient(140deg, #19150e, #11100d 65%); border-color: var(--gold-border); }
.interest-group label > span { color: #cabea8; }
.interest-group input:checked + span { color: var(--gold-light); background: #332715; border-color: #ab8645; }
.form-field label { color: #dfd3bc; }
.form-field input, .form-field textarea { background: #0a0907; color: var(--text); border-color: #5c4e37; }
.form-field input::placeholder, .form-field textarea::placeholder { color: #a99e89; }
.form-field [aria-invalid=true] { border-color: #ecaa9b; }
.privacy-note { color: #c2b496; }
.form-feedback { background: #241e11; border-color: #8a6d36; color: #e7d2a3; }
.form-feedback[data-type=error] { background: #2a1812; border-color: #976d60; color: #f2b9a9; }
footer { background: #050505; }
.footer-bottom { color: #b4a790; }

@media (hover:hover) and (pointer:fine) {
  .button-gold:hover { color: #181108; background: linear-gradient(112deg, #d2ab64, #f7e7bc 48%, #e0bd7c); }
  .button-outline:hover { color: #fff0c8; border-color: #c39950; background: rgba(207, 170, 99, .09); }
  #site-links .nav-contact:hover { color: #fff0c8; border-color: #c39950; }
}
@media (max-width:960px) {
  #site-links { background: #100e0a; border-color: var(--gold-border); }
}
@media (max-width:700px) {
  /* Use only the source's dark left-hand silk behind mobile copy; keep the jade below it. */
  .jewelry::before {
    background:
      linear-gradient(180deg, var(--jewelry-bg) 0%, transparent 15%, var(--jewelry-bg) 72%),
      linear-gradient(rgba(12, 11, 9, .68), rgba(12, 11, 9, .68)),
      url('assets/hero-hetian.png') left top / auto 820px no-repeat;
  }
  .hero[data-background=black-jade] .hero-shade {
    background: linear-gradient(0deg, #050505, rgba(5, 5, 5, .42) 35%, rgba(5, 5, 5, .45) 75%, rgba(5, 5, 5, .7)),
      linear-gradient(90deg, rgba(5, 5, 5, .32), rgba(5, 5, 5, .1));
  }
}