/* Centum Continental Group: charcoal + bronze. One industrial sans, bronze used sparingly for detail.
   Layout: left-aligned editorial column; trade-lane table is the signature element. */
:root {
  --paper: #f4f2ef;
  --paper-2: #eae6e1;
  --ink: #1f1d1b;
  --muted: #6b6560;
  --line: #d9d3cc;
  --harbour: #2b2826;
  --harbour-ink: #f4f2ef;
  --band: #2b2826;
  --band-ink: #f4f2ef;
  --signal: #a97b3c;
  --signal-text: #8a6228;
  --display: "Archivo", "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --body: "Archivo", "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --wrap: 72rem;
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #171513; --paper-2: #211e1b; --ink: #ece7e1; --muted: #a39b93; --line: #35302b;
    --harbour: #ece7e1; --harbour-ink: #171513; --band: #24201d; --band-ink: #ece7e1;
    --signal: #c39a5f; --signal-text: #d0a86c;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #171513; --paper-2: #211e1b; --ink: #ece7e1; --muted: #a39b93; --line: #35302b;
  --harbour: #ece7e1; --harbour-ink: #171513; --band: #24201d; --band-ink: #ece7e1;
  --signal: #c39a5f; --signal-text: #d0a86c;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--body); font-size: 1.0625rem; line-height: 1.6;
  font-stretch: 100%;
}
img { max-width: 100%; }
a { color: inherit; text-decoration-color: var(--line); text-underline-offset: 0.2em; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 2px; }
[hidden] { display: none !important; }

.wrap {
  max-width: var(--wrap); margin-inline: auto;
  padding-left: var(--gutter-l); padding-right: var(--gutter-r);
}
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper); padding: 0.5rem 1rem; z-index: 50; }
.skip:focus { left: 16px; }

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--display); text-wrap: balance; margin: 0; line-height: 1.08; }
h1 { font-stretch: 100%; font-weight: 700; font-size: clamp(2.1rem, 4.4vw, 3.3rem); letter-spacing: -0.02em; line-height: 1.1; }
h2 { font-stretch: 100%; font-weight: 650; font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.012em; }
h3 { font-stretch: 100%; font-weight: 650; font-size: 1.2rem; }
p { margin: 0; }
.lede { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--muted); max-width: 40em; line-height: 1.55; }
.prose { max-width: 38em; display: grid; gap: 1.1rem; }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }

/* ---------- header ---------- */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--paper); }
.site-head {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: var(--paper); border-bottom: 1px solid var(--line);
}
.head-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.25rem; }
.brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.brand-mark { width: 32px; height: 32px; flex: none; display: block; }
.brand-text { display: grid; line-height: 1; }
.brand-name { font-weight: 750; font-size: 1.15rem; letter-spacing: 0.13em; }
.brand-sub { font-size: 0.56rem; font-weight: 500; color: var(--muted); margin-top: 5px; letter-spacing: 0.3em; text-transform: uppercase; }

.nav { display: flex; align-items: center; gap: 0.25rem; }
.nav > a, .nav-group > button {
  font: inherit; font-size: 0.95rem; color: var(--ink); background: none; border: 0;
  padding: 0.55rem 0.75rem; text-decoration: none; cursor: pointer; border-radius: 4px;
}
.nav > a:hover, .nav-group > button:hover { background: var(--paper-2); }
.nav a[aria-current="page"], .nav-group.is-current > button { box-shadow: inset 0 -2px 0 var(--signal); border-radius: 0; }
.nav .nav-cta { background: var(--harbour); color: var(--harbour-ink); margin-left: 0.5rem; }
.nav .nav-cta:hover { background: var(--harbour); opacity: 0.9; }
.nav .nav-cta[aria-current="page"] { box-shadow: none; border-radius: 4px; }
.caret { display: inline-block; width: 0.5em; height: 0.5em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-0.2em) rotate(45deg); margin-left: 0.45em; }

.nav-group { position: relative; }
.nav-menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 17rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: 6px;
  padding: 0.4rem; display: grid; box-shadow: 0 12px 30px -18px rgba(10, 30, 24, 0.45);
}
.nav-menu a { display: grid; padding: 0.55rem 0.7rem; text-decoration: none; border-radius: 4px; line-height: 1.3; }
.nav-menu a:hover, .nav-menu a[aria-current="page"] { background: var(--paper-2); }
.nav-menu small { color: var(--muted); font-size: 0.8rem; }

.menu-toggle { display: none; font: inherit; background: none; border: 1px solid var(--line); color: var(--ink); padding: 0.45rem 0.8rem; border-radius: 4px; cursor: pointer; }

@media (max-width: 1100px) {
  .menu-toggle { display: inline-block; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: 0.5rem var(--gutter-r) 1rem var(--gutter-l);
  }
  .nav.is-open { display: flex; }
  .nav > a, .nav-group > button { text-align: left; width: 100%; padding: 0.8rem 0.25rem; }
  .nav a[aria-current="page"], .nav-group.is-current > button { box-shadow: none; font-weight: 650; }
  .nav-menu { position: static; box-shadow: none; border: 0; border-left: 2px solid var(--line); border-radius: 0; margin: 0 0 0.5rem 0.25rem; min-width: 0; }
  .nav .nav-cta { margin: 0.5rem 0 0; text-align: center; }
}

/* ---------- sections ---------- */
main { display: block; }
.section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section + .section { border-top: 1px solid var(--line); }
.section-head { display: grid; gap: 0.9rem; margin-bottom: 2.25rem; max-width: 44rem; }

.page-head { padding-block: clamp(2.75rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--line); }
.page-head .wrap { display: grid; gap: 1.1rem; }
.crumbs { font-size: 0.88rem; color: var(--muted); }
.crumbs a { color: var(--muted); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.btn {
  display: inline-block; font: inherit; font-size: 0.98rem; font-weight: 600;
  padding: 0.8rem 1.25rem; border-radius: 4px; text-decoration: none; cursor: pointer;
  border: 1.5px solid var(--harbour); background: var(--harbour); color: var(--harbour-ink);
}
.btn:hover { opacity: 0.92; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); opacity: 1; }

/* ---------- hero ---------- */
.hero { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 4rem); }
.hero .wrap { display: grid; gap: 1.5rem; }
.hero h1 { max-width: 15em; }

/* ---------- ledger strip ---------- */
.ledger { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ledger div { padding: 1.1rem 1rem 1.1rem 0; display: grid; gap: 0.15rem; }
.ledger div + div { border-left: 1px solid var(--line); padding-left: 1rem; }
.ledger b { font-stretch: 100%; font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.ledger span { color: var(--muted); font-size: 0.92rem; line-height: 1.35; }
@media (max-width: 700px) {
  .ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ledger div:nth-child(3) { border-left: 0; padding-left: 0; }
  .ledger div:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* ---------- trade lanes (signature) ---------- */
.lanes { border-top: 2px solid var(--ink); }
.lane-head, .lane {
  display: grid; grid-template-columns: minmax(0, 11rem) minmax(3rem, 1fr) minmax(0, 13rem) minmax(0, 1.4fr);
  gap: 1rem; align-items: center;
}
.lane-head { font-size: 0.85rem; color: var(--muted); padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
.lane { padding: 1.05rem 0; border-bottom: 1px solid var(--line); }
.lane-from, .lane-to { font-stretch: 100%; font-weight: 650; line-height: 1.25; }
.lane-to small { display: block; font-stretch: 100%; font-weight: 400; color: var(--muted); font-size: 0.85rem; }
.lane-line { position: relative; height: 2px; background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 13px); }
.lane-line::before { content: ""; position: absolute; left: 0; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--harbour); }
.lane-line::after { content: ""; position: absolute; right: -2px; top: -5px; border-left: 9px solid var(--ink); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.lane-goods { color: var(--muted); font-size: 0.95rem; line-height: 1.45; }
.lane-line i { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); animation: ship 2.4s cubic-bezier(.55,.1,.35,1) 0.3s 1 both; }
.lane:nth-child(3) .lane-line i { animation-delay: 0.45s; }
.lane:nth-child(4) .lane-line i { animation-delay: 0.6s; }
.lane:nth-child(5) .lane-line i { animation-delay: 0.75s; }
.lane:nth-child(6) .lane-line i { animation-delay: 0.9s; }
.lane:nth-child(7) .lane-line i { animation-delay: 1.05s; }
@keyframes ship { from { left: 0; } to { left: calc(100% - 10px); } }
@media (prefers-reduced-motion: reduce) { .lane-line i { animation: none; left: calc(100% - 10px); } }
@media (max-width: 760px) {
  .lane-head { display: none; }
  .lane { grid-template-columns: minmax(0, auto) minmax(2rem, 1fr) minmax(0, auto); row-gap: 0.4rem; }
  .lane-goods { grid-column: 1 / -1; }
  .lane-to { text-align: right; }
}

/* ---------- product lines ---------- */
.lines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.line-item { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1rem; padding: 1.6rem 1.5rem 1.6rem 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.line-item:nth-child(even) { padding-left: 1.5rem; border-left: 1px solid var(--line); }
a.line-item:hover h3 { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 0.2em; }
.hs { display: grid; align-content: start; gap: 0.1rem; }
.hs b { font-stretch: 100%; font-size: 1.45rem; font-weight: 700; color: var(--signal-text); font-variant-numeric: tabular-nums; line-height: 1; }
.hs span { font-size: 0.78rem; color: var(--muted); }
.line-body { display: grid; gap: 0.45rem; }
.line-body p { color: var(--muted); }
@media (max-width: 700px) {
  .lines { grid-template-columns: minmax(0, 1fr); }
  .line-item, .line-item:nth-child(even) { padding-left: 0; padding-right: 0; border-left: 0; }
}

/* ---------- plain lists / columns ---------- */
.cols { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 2rem 2.5rem; }
.cols > div { display: grid; gap: 0.5rem; align-content: start; min-width: 0; }
.cols > div p { color: var(--muted); }
@media (max-width: 800px) { .cols { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; } }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; }
.ticks li { padding-left: 1.4rem; position: relative; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.6rem; height: 2px; background: var(--signal); }
.split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 800px) { .split { grid-template-columns: minmax(0, 1fr); } }
.aside { border-left: 2px solid var(--signal); padding-left: 1.25rem; display: grid; gap: 0.75rem; }
.aside h3 { font-size: 1rem; }

/* ---------- tabs ---------- */
.tabs { display: grid; gap: 2rem; }
.tablist { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: thin; }
.tablist button {
  font: inherit; font-size: 0.98rem; font-weight: 550; background: none; border: 0; color: var(--muted);
  padding: 0.8rem 1rem; cursor: pointer; white-space: nowrap; border-bottom: 2.5px solid transparent; margin-bottom: -1px;
}
.tablist button:hover { color: var(--ink); }
.tablist button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--signal); }
html:not(.js) .tablist { display: none; }
.js .tabs:not(.is-ready) .tabpanel + .tabpanel { display: none; }
.tabpanel { display: grid; gap: 1.5rem; animation: panel-in 0.25s ease-out; }
html:not(.js) .tabpanel + .tabpanel { border-top: 1px solid var(--line); padding-top: 2rem; }
.js .tabpanel > .panel-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@keyframes panel-in { from { opacity: 0.4; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tabpanel { animation: none; } }
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.6rem 1.5rem; margin: 0; }
.facts dt { color: var(--muted); font-size: 0.95rem; }
.facts dd { margin: 0; }
@media (max-width: 520px) { .facts { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; } .facts dd { margin-bottom: 0.6rem; } }

/* ---------- insights ---------- */
.posts { display: grid; border-top: 1px solid var(--line); }
.post { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1.5rem; padding: 1.4rem 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.post time, .post .cat { font-size: 0.9rem; color: var(--muted); }
.post-meta { display: grid; gap: 0.15rem; align-content: start; }
.post h3 { font-size: 1.15rem; }
.post p { color: var(--muted); margin-top: 0.35rem; }
a.post:hover h3 { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 0.2em; }
@media (max-width: 600px) { .post { grid-template-columns: minmax(0, 1fr); gap: 0.4rem; } }
.article { max-width: 40rem; display: grid; gap: 1.25rem; }
.article p { font-size: 1.1rem; line-height: 1.7; }
.article h2 { font-size: 1.35rem; margin-top: 0.75rem; }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 1100px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
.lines-list { display: grid; border-top: 1px solid var(--line); }
.lines-list > div { display: grid; gap: 0.2rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.lines-list span { color: var(--muted); font-size: 0.9rem; }
.lines-list a, .lines-list b { font-stretch: 100%; font-size: 1.2rem; font-weight: 650; text-decoration: none; word-break: break-word; }
.form { display: grid; gap: 1.1rem; background: var(--paper-2); padding: clamp(1.25rem, 3vw, 2rem); border-radius: 6px; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
@media (max-width: 560px) { .form-row { grid-template-columns: minmax(0, 1fr); } }
.field { display: grid; gap: 0.35rem; }
.field label { font-size: 0.92rem; font-weight: 550; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 1rem; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 4px; padding: 0.7rem 0.8rem; width: 100%;
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--harbour); outline-offset: 0; border-color: var(--harbour); }
.form-note { font-size: 0.88rem; color: var(--muted); }
.form-status { font-size: 0.95rem; }

/* ---------- closing band + footer ---------- */
.band { background: var(--band); color: var(--band-ink); }
.band .wrap { padding-block: clamp(2.5rem, 6vw, 4rem); display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; align-items: end; justify-content: space-between; }
.band h2 { max-width: 18em; }
.band p { opacity: 0.85; margin-top: 0.6rem; max-width: 34em; }
.band .btn { background: var(--band-ink); color: var(--band); border-color: var(--band-ink); }

.site-foot { border-top: 1px solid var(--line); font-size: 0.93rem; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 2rem; padding-block: 3rem 2rem; }
.foot-grid h3 { font-size: 0.95rem; font-stretch: 100%; margin-bottom: 0.7rem; }
.foot-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; }
.foot-grid a { text-decoration: none; color: var(--muted); }
.foot-grid a:hover { color: var(--ink); }
.foot-grid p { color: var(--muted); max-width: 24em; margin-top: 0.8rem; }
.foot-base { border-top: 1px solid var(--line); padding-block: 1.25rem 2rem; color: var(--muted); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; }
@media (max-width: 800px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; } }

/* ---------- language switch + small helpers ---------- */
.langs { display: flex; align-items: center; gap: 0.1rem; margin-left: 0.5rem; padding-left: 0.75rem; border-left: 1px solid var(--line); }
.langs a { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; color: var(--muted); text-decoration: none; padding: 0.35rem 0.4rem; border-radius: 3px; }
.langs a:hover { color: var(--ink); background: var(--paper-2); }
.langs a[aria-current="true"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--signal); border-radius: 0; }
@media (max-width: 1100px) {
  .langs { margin: 0.5rem 0 0; padding: 0.75rem 0 0; border-left: 0; border-top: 1px solid var(--line); gap: 0.5rem; }
  .langs a { font-size: 0.95rem; padding: 0.4rem 0.6rem; }
}
.stack { display: grid; gap: 3rem; }
.hs-note { margin-top: 1.5rem; max-width: 40em; }
.h1-article { font-size: clamp(2rem, 4.4vw, 3.2rem); max-width: 18em; }
.form-title { font-size: 1.4rem; }

/* ---------- partners, spec sheet ---------- */
.partners { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; align-items: baseline; color: var(--ink); font-stretch: 100%; font-weight: 600; font-size: 1.05rem; letter-spacing: 0.01em; }
.partners span { color: var(--muted); font-stretch: 100%; font-weight: 400; font-size: 0.92rem; letter-spacing: 0; }
.partner-note { color: var(--muted); font-size: 0.98rem; max-width: 40em; }
.specs-h { font-size: 1.15rem; font-stretch: 100%; margin-bottom: 0.9rem; }
.specs { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); }
.specs > div { padding: 0.9rem 1rem 1rem 0; display: grid; gap: 0.25rem; align-content: start; }
.specs > div + div { border-left: 1px solid var(--line); padding-left: 1rem; }
.specs dt { color: var(--muted); font-size: 0.88rem; }
.specs dd { margin: 0; font-weight: 600; line-height: 1.4; }
@media (max-width: 760px) {
  .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .specs > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .specs > div:nth-child(n+3) { border-top: 1px solid var(--line); }
}
.lines > :last-child:nth-child(odd) { grid-column: 1 / -1; border-left: 0; padding-left: 0; }

/* ---------- trade map ---------- */
.map-wrap { margin: 0; display: grid; gap: 1rem; }
.map-scroll { overflow-x: auto; scrollbar-width: thin; }
.trade-map { display: block; width: 100%; min-width: 620px; height: auto; }
.land-dark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .land-light { display: none; } :root:not([data-theme="light"]) .land-dark { display: inline; } }
:root[data-theme="dark"] .land-light { display: none; }
:root[data-theme="dark"] .land-dark { display: inline; }
.flow { fill: none; stroke-width: 2.2; transition: opacity 0.25s ease; }
.flow-east { stroke: var(--signal); }
.flow-west { stroke: var(--ink); stroke-dasharray: 6 5; }
.ah-e { fill: var(--signal); }
.ah-w { fill: var(--ink); }
.flows-east, .flows-west { transition: opacity 0.25s ease; }
.map-wrap[data-dir="east"] .flows-west, .map-wrap[data-dir="west"] .flows-east { opacity: 0.1; }
.hub circle { fill: var(--ink); stroke: var(--paper); stroke-width: 2.5; }
.hub text { font-family: var(--body); font-size: 13.5px; font-weight: 600; fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .flow, .flows-east, .flows-west { transition: none; } }

.map-toggle { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.25rem; background: var(--paper-2); border-radius: 6px; justify-self: start; }
.map-toggle button { font: inherit; font-size: 0.92rem; font-weight: 550; color: var(--muted); background: none; border: 0; border-radius: 4px; padding: 0.5rem 0.85rem; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; }
.map-toggle button:hover { color: var(--ink); }
.map-toggle button[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(20, 16, 12, 0.12); }
.sw { display: inline-block; width: 20px; height: 0; border-top: 2.5px solid var(--signal); flex: none; }
.sw-west { border-top: 2.5px dashed var(--ink); }
.map-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: 0.92rem; color: var(--muted); }
.lg { display: inline-flex; align-items: center; gap: 0.5rem; }
.lg::before { content: ""; width: 20px; border-top: 2.5px solid var(--signal); }
.lg-west::before { border-top: 2.5px dashed var(--ink); }
.map-more { margin-top: 1.25rem; }
.map-more a { font-weight: 600; }

.dirs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 3rem; margin-top: 2.5rem; }
.dir { display: grid; gap: 0.9rem; align-content: start; border-top: 2px solid var(--ink); padding-top: 1rem; min-width: 0; }
.dir h3 { display: flex; align-items: center; gap: 0.6rem; font-size: 1.15rem; }
@media (max-width: 760px) { .dirs { grid-template-columns: minmax(0, 1fr); } }
.regions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 3rem; }
@media (max-width: 760px) { .regions { grid-template-columns: minmax(0, 1fr); } }
.region { display: grid; gap: 0.75rem; align-content: start; min-width: 0; }
.region h3 { font-size: 1.05rem; color: var(--muted); font-stretch: 100%; font-weight: 600; }
.region-list { margin: 0; border-top: 1px solid var(--line); }
.region-list > div { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 1rem; padding: 0.8rem 0; border-bottom: 1px solid var(--line); }
.region-list dt { font-weight: 650; }
.region-list dd { margin: 0; color: var(--muted); }
@media (max-width: 520px) { .region-list > div { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; } }
@media (max-width: 700px) {
  .trade-map { min-width: 0; }
  .hub text { font-size: 22px; stroke-width: 6px; }
  .hub circle { r: 8px; }
  .flow { stroke-width: 3.6; }
  .map-toggle button { font-size: 0.85rem; padding: 0.45rem 0.6rem; }
}

/* ---------- round three: one two-way map, emphasis, labels, Chinese ---------- */
.flow { stroke: var(--signal); }
.ah { fill: var(--signal); }
.map-legend .lg::before { width: 30px; }
.dirs-h { font-size: 1.25rem; margin-top: 2.75rem; }
.dirs { margin-top: 1.25rem; }
main strong { font-weight: 650; color: var(--ink); }
/* data labels: small caps-style uppercase so buyers can scan them */
.facts dt, .specs dt, .region h3, .hs span, .lines-list span {
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.74rem; font-weight: 600; color: var(--muted);
}
.hs span { font-size: 0.66rem; }
html[lang="zh-Hans"] body { line-height: 1.75; }
html[lang="zh-Hans"] h1, html[lang="zh-Hans"] h2 { letter-spacing: 0.01em; line-height: 1.2; }
html[lang="zh-Hans"] .lede { line-height: 1.7; }

.partners { margin-inline: 0; margin-bottom: 0; }

/* round four */
.foot-grid h3 a.foot-h { color: var(--ink); }
.foot-grid h3 a.foot-h:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.specs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) {
  .specs { grid-template-columns: minmax(0, 1fr); }
  .specs > div, .specs > div + div { border-left: 0; padding-left: 0; }
  .specs > div + div { border-top: 1px solid var(--line); }
}
.partner-note { color: var(--muted); }

/* About: offices */
.offices { display: grid; gap: 0.9rem; align-content: start; min-width: 0; }
.offices h3 { font-size: 1.15rem; }
.offices ul { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.offices li { padding: 1rem 0; border-bottom: 1px solid var(--line); display: grid; gap: 0.3rem; }
.office-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.office-top b { font-size: 1.2rem; font-weight: 650; line-height: 1.25; }
.tz { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.08em; color: var(--signal-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.offices li p { color: var(--muted); font-size: 0.98rem; line-height: 1.5; }
.offices-note { font-size: 0.95rem; color: var(--ink); padding-left: 0.9rem; border-left: 2px solid var(--signal); }

/* larger header logo */
.head-row { min-height: 5.25rem; }
.site-head .brand { gap: 0.75rem; }
.site-head .brand-mark { width: 46px; height: 46px; }
.site-head .brand-name { font-size: 1.55rem; letter-spacing: 0.12em; }
.site-head .brand-sub { font-size: 0.66rem; margin-top: 6px; letter-spacing: 0.32em; }
@media (max-width: 1100px) {
  .head-row { min-height: 4.5rem; }
  .site-head .brand-mark { width: 38px; height: 38px; }
  .site-head .brand-name { font-size: 1.3rem; }
  .site-head .brand-sub { font-size: 0.58rem; margin-top: 5px; }
}

/* Contact without a form */
.clines { border-top: 2px solid var(--ink); }
.cline { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) auto; gap: 0.5rem 1.5rem; align-items: center; padding: 1.4rem 0; border-bottom: 1px solid var(--line); }
.clabel { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.74rem; font-weight: 600; color: var(--muted); }
.cvalue { font-size: clamp(1.35rem, 2.6vw, 1.8rem); font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; overflow-wrap: anywhere; user-select: all; }
.cacts { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.cacts .btn { padding: 0.6rem 1rem; font-size: 0.92rem; }
@media (max-width: 640px) {
  .cline { grid-template-columns: minmax(0, 1fr); }
}
.ctips { background: var(--paper-2); border-radius: 6px; padding: clamp(1.25rem, 3vw, 1.75rem); display: grid; gap: 0.9rem; align-content: start; }
.ctips h2 { font-size: 1.15rem; }
.ctips h3 { font-size: 0.95rem; margin-top: 0.75rem; }
.coffices { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.coffices li { display: flex; justify-content: space-between; gap: 1rem; }
.foot-wa { color: var(--muted); font-size: 0.88rem; }
.contact-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
@media (max-width: 1100px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
.cline { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label label" "value acts"; row-gap: 0.35rem; }
.clabel { grid-area: label; }
.cvalue { grid-area: value; white-space: nowrap; }
.cacts { grid-area: acts; }
@media (max-width: 640px) {
  .cline { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "value" "acts"; }
  .cvalue { white-space: normal; }
}
.cline { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "value"; }
a.cvalue { color: var(--ink); text-decoration: none; justify-self: start; }
a.cvalue:hover { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 0.2em; }
.ctips-p { color: var(--muted); line-height: 1.6; }

/* Products dropdown: invisible bridge over the gap so moving the pointer down doesn't close the menu */
@media (min-width: 1101px) {
  .nav-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
}

/* round five: standard-width type, calmer hero, bigger header logo */
.hero h1 { max-width: 20em; }
.h1-article { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
.head-row { min-height: 6rem; }
.site-head .brand { gap: 0.85rem; }
.site-head .brand-mark { width: 58px; height: 58px; }
.site-head .brand-name { font-size: 1.95rem; letter-spacing: 0.11em; }
.site-head .brand-sub { font-size: 0.78rem; margin-top: 7px; letter-spacing: 0.3em; }
@media (max-width: 1100px) {
  .head-row { min-height: 4.75rem; }
  .site-head .brand-mark { width: 44px; height: 44px; }
  .site-head .brand-name { font-size: 1.45rem; }
  .site-head .brand-sub { font-size: 0.62rem; margin-top: 5px; }
}
.nav > a, .nav-group > button { white-space: nowrap; }