/* ============================================================
   DACHUAN ADVISORY — SHARED DESIGN SYSTEM
   Every page links this file. Do not duplicate these tokens
   locally in a page — edit once, here, so all nine pages stay
   in sync automatically.
   ============================================================ */

:root{
  /* ---- Confirmed brand colors ---- */
  --burgundy:#6A1F2B;        /* Primary */
  --burgundy-deep:#3A1017;   /* derived: dark section bg */
  --burgundy-bright:#8A2C3B; /* derived: hover state */
  --warm-white:#F8F7F4;      /* Secondary */
  --charcoal:#2F2F2F;        /* Neutral / body text */
  --grey:#6E6E73;            /* Supporting grey */
  --gold:#B08D57;            /* Accent — sparing use only */

  --line:rgba(47,47,47,0.12);
  --line-dark:rgba(248,247,244,0.14);

  --radius:2px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  background:var(--warm-white);
  color:var(--charcoal);
  font-family:'Inter',sans-serif;
  font-size:15.5px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,.headline{
  font-family:'General Sans',sans-serif;
  font-weight:600;
  letter-spacing:-0.01em;
  line-height:1.1;
  color:var(--charcoal);
}

.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.7rem;
  letter-spacing:0.13em;
  text-transform:uppercase;
  color:var(--burgundy);
  font-weight:500;
}
.eyebrow.on-dark{ color:var(--gold); }

a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--burgundy); outline-offset:3px; }

.wrap{ max-width:1180px; margin:0 auto; padding:0 32px; }

/* ---- Nav (shared across all 9 pages) ---- */
header.site-nav{
  position:sticky; top:0; z-index:50;
  background:rgba(248,247,244,0.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:1180px; margin:0 auto; padding:14px 32px;
  display:flex; align-items:center; justify-content:space-between;
}
.wordmark{ display:flex; align-items:center; gap:10px; }
.wordmark img{ height:32px; width:32px; object-fit:cover; border-radius:3px; }
.wordmark .text{ display:flex; flex-direction:column; line-height:1.1; }
.wordmark .text b{ font-family:'General Sans',sans-serif; font-weight:600; font-size:0.95rem; letter-spacing:0.02em; }
.wordmark .text span{ font-family:'IBM Plex Mono',monospace; font-size:0.62rem; letter-spacing:0.1em; color:var(--grey); text-transform:uppercase; }

nav.links{ display:flex; gap:30px; }
nav.links a{ font-size:0.85rem; color:var(--charcoal); opacity:0.72; transition:opacity .2s; }
nav.links a:hover{ opacity:1; }
nav.links a.current{ opacity:1; color:var(--burgundy); }

@media (max-width:900px){ nav.links{ display:none; } }

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--burgundy); color:var(--warm-white);
  padding:11px 20px; border-radius:var(--radius);
  font-size:0.84rem; font-weight:500;
  border:1px solid var(--burgundy);
  transition:background .2s, color .2s, border-color .2s;
  cursor:pointer;
}
.btn:hover{ background:var(--burgundy-deep); border-color:var(--burgundy-deep); }
.btn.ghost{ background:transparent; color:var(--charcoal); border:1px solid var(--line); }
.btn.ghost:hover{ border-color:var(--burgundy); color:var(--burgundy); }
.btn.on-dark{ background:var(--gold); color:var(--burgundy-deep); border-color:var(--gold); }
.btn.on-dark:hover{ background:#c4a06c; }
.btn.small{ padding:8px 14px; font-size:0.78rem; }

/* ---- Tag / chip (used for sectors, regions, roles — reused across pages) ---- */
.tag{
  display:inline-flex; align-items:center;
  border:1px solid var(--line); padding:7px 13px;
  font-size:0.78rem; border-radius:var(--radius);
  color:var(--charcoal); font-family:'IBM Plex Mono',monospace;
  letter-spacing:0.02em;
}
.tag-row{ display:flex; flex-wrap:wrap; gap:8px; }

hr.hair{ border:none; border-top:1px solid var(--line); }

section{ padding:76px 0; position:relative; }
section.tight{ padding:56px 0; }
.section-head{ max-width:620px; margin-bottom:44px; }
.section-head h2{ font-size:clamp(1.5rem,2.3vw,1.95rem); margin-top:10px; }
.section-head p.dek{ margin-top:14px; color:var(--grey); font-size:0.98rem; }

/* ---- Footer (shared) ---- */
footer{ border-top:1px solid var(--line); padding:36px 0; }
.footer-inner{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
footer .meta{ font-size:0.8rem; color:var(--grey); }
footer .foot-links{ display:flex; gap:22px; font-size:0.8rem; }
footer .foot-links a{ color:var(--grey); }
footer .foot-links a:hover{ color:var(--burgundy); }

::selection{ background:var(--burgundy); color:var(--warm-white); }

@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

/* ============================================================
   V2.0 SHARED VISUAL SYSTEM
   Established on Page 1 + Page 8, extended to all nine pages.
   Visual grammar: Opportunity → Stakeholders → Constraints →
   Alignment → Capability → Execution. Same tokens as above —
   nothing new introduced in color or type, only structure.
   ============================================================ */

/* ---- Quiet statement: a short line standing alone, no box ---- */
.quiet-statement{
  padding:40px 0; text-align:left; max-width:720px;
}
.quiet-statement p{
  font-family:'General Sans',sans-serif; font-weight:500;
  font-size:clamp(1.1rem,1.8vw,1.4rem); color:var(--charcoal); line-height:1.4;
}
.quiet-statement span{ color:var(--grey); font-weight:400; }

/* ---- Pathway diagram (homepage signature visual) ---- */
.pathway{ display:flex; align-items:stretch; gap:0; margin:32px 0; }
@media (max-width:820px){ .pathway{ flex-direction:column; gap:18px; } }

.pathway-stage{
  flex:1; display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:0 8px;
}
.pathway-stage .stage-box{
  border:1px solid var(--line); background:#fff; border-radius:var(--radius);
  padding:16px 14px; width:100%; min-height:84px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.pathway-stage .stage-label{
  font-family:'IBM Plex Mono',monospace; font-size:0.66rem; text-transform:uppercase;
  letter-spacing:0.07em; color:var(--grey); margin-bottom:6px;
}
.pathway-stage .stage-name{ font-family:'General Sans',sans-serif; font-weight:600; font-size:0.9rem; }

.pathway-stage.is-dachuan .stage-box{ background:var(--burgundy); border-color:var(--burgundy); }
.pathway-stage.is-dachuan .stage-label{ color:var(--gold); }
.pathway-stage.is-dachuan .stage-name{ color:var(--warm-white); }

.pathway-stage.is-fragmented .stage-box{
  display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:10px;
}
.pathway-stage.is-fragmented .frag-chip{
  border:1px solid var(--line); border-radius:2px; padding:6px 4px;
  font-size:0.68rem; color:var(--grey); font-family:'IBM Plex Mono',monospace;
}

.pathway-connector{
  display:flex; align-items:center; justify-content:center; flex:0 0 auto; width:32px; color:var(--burgundy);
}
.pathway-connector .h-arrow{ display:inline; }
.pathway-connector .v-arrow{ display:none; }
@media (max-width:820px){
  .pathway-connector{ width:auto; height:20px; }
  .pathway-connector .h-arrow{ display:none; }
  .pathway-connector .v-arrow{ display:inline; }
}

/* ---- Preview strip: light cards that link deeper, never re-explain ---- */
.preview-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:8px; }
@media (max-width:820px){ .preview-strip{ grid-template-columns:1fr; } }
.preview-card{ background:#fff; padding:20px 20px; }
.preview-card .eyebrow{ font-size:0.64rem; margin-bottom:8px; }
.preview-card h3{ font-size:0.92rem; margin-bottom:6px; }
.preview-card p{ font-size:0.82rem; color:var(--grey); }
.preview-strip-foot{ margin-top:16px; }
.preview-strip-foot a{ font-size:0.86rem; color:var(--burgundy); border-bottom:1px solid var(--burgundy); }

/* ---- Radial ecosystem diagram (page 8 signature visual) ---- */
.ecosystem-radial{
  position:relative; width:100%; max-width:560px; aspect-ratio:1/1; margin:32px auto;
}
.ecosystem-radial svg{ position:absolute; inset:0; width:100%; height:100%; }
.eco-node{
  position:absolute; transform:translate(-50%,-50%); text-align:center; width:150px;
}
.eco-node .eco-dot{ width:10px; height:10px; border-radius:50%; background:var(--burgundy); margin:0 auto 8px; }
.eco-node h4{ font-family:'General Sans',sans-serif; font-weight:600; font-size:0.82rem; margin-bottom:4px; }
.eco-node p{ font-size:0.72rem; color:var(--grey); line-height:1.35; }
.eco-center{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:96px; height:96px; border-radius:50%; background:var(--burgundy);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:8px;
}
.eco-center .eco-mark{ font-family:'General Sans',sans-serif; font-weight:600; font-size:0.76rem; color:var(--warm-white); }
.eco-center .eco-sub{ font-family:'IBM Plex Mono',monospace; font-size:0.56rem; color:var(--gold); text-transform:uppercase; letter-spacing:0.05em; margin-top:2px; }

.ecosystem-radial-wrap{ display:block; }
.ecosystem-fallback{ display:none; }
@media (max-width:760px){
  .ecosystem-radial-wrap{ display:none; }
  .ecosystem-fallback{ display:block; }
}