@charset "UTF-8";
/* ==========================================================================
   Simple Systems Limited — Direction A: Corporate Clarity
   Mobile-first. No framework, no CDN, no dark-mode toggle.
   Colour values sampled from the company's own SSL-Profile.pdf and logo.
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */
:root {
  /* brand green family — primary #009151 sampled from SSL-Profile.pdf */
  --brand-900: #04361f;
  --brand-800: #00512f;
  --brand-700: #006b3d;
  --brand-600: #007a44;   /* 5.43:1 with white — button / link text */
  --brand:     #009151;   /* graphic accent, large display type only */
  --brand-500: #12a85c;
  --brand-300: #68b96a;   /* sampled from the logo sphere */

  --tint-100: #e6f3e9;
  --tint-50:  #f4f9f5;
  --surface:  #ffffff;
  --surface-alt: #f7f9f8;
  --surface-band: #f1f5f3;

  --ink:   #1e1916;        /* 17.4:1 on white */
  --ink-2: #3d4744;        /* 9.8:1  on white — default body colour */
  --ink-3: #4a534e;        /* 7.9:1  on white, 7.2:1 on --surface-band — AA body text */
  --ink-inv: #eaf3ee;
  --ink-inv-2: #b9d3c4;

  --line:      #dce5df;
  --line-2:    #c3d2c9;
  --line-dark: #1e3a2c;

  --focus: #007a44;
  --focus-inv: #8fe0b4;

  --maxw: 1200px;
  --gutter: 20px;
  --nav-h: 60px;
  --radius: 4px;

  /* System fonts only. No webfont, no CDN, no FOUT, no extra request.
     Latin glyphs come from the platform UI face; Traditional Chinese glyphs
     fall through to the first installed CJK face in the list. */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
          "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Hiragino Sans CNS",
          "Source Han Sans TC", "Heiti TC", sans-serif;
}

/* ---------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }

/* The hidden attribute must win over component display rules such as
   .btn { display: inline-flex }. Without this a hidden button stays visible. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--surface);
  overflow-wrap: break-word;
}

h1, h2, h3, h4 { color: var(--ink); margin: 0 0 .5em; line-height: 1.2; font-weight: 700; letter-spacing: -0.015em; }
h1 { font-size: clamp(2rem, 1.15rem + 3.4vw, 3.25rem); letter-spacing: -0.025em; }
h2 { font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.125rem); }
h3 { font-size: 1.125rem; font-weight: 650; letter-spacing: -0.01em; }
h4 { font-size: 1rem; font-weight: 650; }
p  { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0 0 1.15em; padding-left: 1.25em; }
li { margin-bottom: .35em; }
strong { color: var(--ink); font-weight: 650; }

a { color: var(--brand-600); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--brand-800); text-decoration-thickness: 2px; }

table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--ink); font-weight: 650; background: var(--tint-50); }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}
.on-dark :focus-visible, .site-footer :focus-visible, .band-dark :focus-visible { outline-color: var(--focus-inv); }

::selection { background: var(--brand-300); color: var(--brand-900); }

/* ------------------------------------------------------------- layout ---- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: 56px; }
.section--tight { padding-block: 40px; }
.section--alt { background: var(--surface-alt); }
.section--band { background: var(--surface-band); }
@media (min-width: 768px) {
  :root { --gutter: 32px; --nav-h: 68px; }
  .section { padding-block: 80px; }
  .section--tight { padding-block: 56px; }
}

.stack > * + * { margin-top: var(--gap, 1rem); }
.grid { display: grid; gap: var(--gap, 24px); }
@media (min-width: 640px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* ------------------------------------------------------------ skip link -- */
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  background: var(--brand-800); color: #fff; padding: 10px 16px;
  border-radius: var(--radius); font-weight: 600; text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: 8px; color: #fff; }

/* --------------------------------------------------------------- header -- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex; align-items: center; gap: 16px;
  min-height: var(--nav-h);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.brand__mark { width: 38px; height: 38px; flex: 0 0 38px; }
/* The wordmark block is sized by the English name, and the Chinese name is set
   to the same measure with justified distribution (分散對齊). The two lines
   therefore end on the same right edge on every platform, whatever font the
   OS resolves for the Latin name - the Chinese measure follows the English
   one instead of the other way round. */
.brand__text { display: flex; flex-direction: column; line-height: 1.15; width: fit-content; }
.brand__name { font-weight: 700; font-size: 1.0625rem; color: var(--ink); letter-spacing: -0.015em; }
.brand__zh { font-size: .8125rem; color: var(--ink-3); letter-spacing: .02em; }

/* Bilingual wordmark.
   The Chinese name is set to the same measure as the English one with
   justified distribution (分散對齊), so both lines end on the same right edge.
   The measure is taken from the rendered English name, so the alignment holds
   whatever font the operating system resolves for the Latin name.
   A wordmark is a lockup, not a paragraph: the English name must not wrap.
   Below 375px there is not enough room for it on one line, so the alignment
   rules are not applied there and the wordmark wraps as before. */
@media (min-width: 375px) {
  .brand__name { white-space: nowrap; }
  .brand__zh {
    text-align: justify; text-align-last: justify; white-space: nowrap;
  }
}

.nav { display: none; }
/* The desktop nav needs the full wordmark next to it. Below 1080px the header
   cannot fit the brand, the seven nav links, the language switch and the
   contact button on one line - they all used to wrap - so the drawer is used
   instead. Measured: the nav fits from 1040px upward, 1080px keeps a margin
   for a different system font. */
@media (min-width: 1080px) {
  .nav { display: flex; align-items: center; gap: 4px; }
}
.nav__link {
  display: inline-flex; align-items: center; height: 40px; padding: 0 12px;
  color: var(--ink-2); text-decoration: none; font-size: .9375rem; font-weight: 550;
  border-bottom: 2px solid transparent; border-radius: 2px;
}
.nav__link:hover { color: var(--brand-700); background: var(--tint-50); }
.nav__link[aria-current="page"] { color: var(--brand-700); border-bottom-color: var(--brand); font-weight: 650; }

.header-actions { display: flex; align-items: center; gap: 8px; }

/* Small screens: the header keeps mark + wordmark + language + menu.
   The "Contact us" button is repeated inside the mobile drawer. */
@media (max-width: 639px) {
  .header-actions .btn { display: none; }
  .brand { gap: 8px; }
  .brand__mark { width: 32px; height: 32px; flex-basis: 32px; }
  .brand__name { font-size: .9375rem; }
  /* Chinese size keeps the same ratio to the English name (13/17), so the
     distributed tracking stays visually identical at every breakpoint. */
  .brand__zh { font-size: .72rem; letter-spacing: .02em; }
}
@media (max-width: 479px) {
  :root { --gutter: 16px; }
  .brand__name { font-size: .8125rem; }
  .brand__zh { font-size: .625rem; }
}
/* The language switch stands next to the contact button, so it is the same
   height as the button (46px). */
.lang-switch {
  display: flex; align-items: stretch; min-height: 46px;
  border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden;
}
.lang-switch a {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 5px 12px; font-size: .8125rem; text-decoration: none; color: var(--ink-3); font-weight: 550;
  min-width: 38px; text-align: center;
}
.lang-switch a:hover { background: var(--tint-50); color: var(--brand-700); }
.lang-switch a[aria-current="true"] { background: var(--brand-700); color: #fff; }

/* ---------------------------------------------------------- hamburger ---- */
.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0;
  background: none; border: 1px solid var(--line-2); border-radius: var(--radius);
  color: var(--ink); cursor: pointer;
}
.nav-toggle:hover { background: var(--tint-50); }
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  display: block; width: 18px; height: 2px; background: currentColor; position: relative;
}
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { top: 0; transform: rotate(-45deg); }
@media (min-width: 1080px) { .nav-toggle { display: none; } }

/* ------------------------------------------------------- mobile drawer --- */
.mobile-nav {
  position: fixed; inset: 0; z-index: 99;
  background: var(--surface);
  overflow-y: auto;
  padding: 16px var(--gutter) 40px;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .22s ease, visibility .22s;
}
.mobile-nav[data-open="true"] { transform: translateY(0); visibility: visible; }
.mobile-nav__head { display: flex; align-items: center; justify-content: space-between; min-height: 48px; margin-bottom: 8px; }
.mobile-nav__close {
  width: 44px; height: 44px; border: 1px solid var(--line-2); background: none;
  border-radius: var(--radius); font-size: 1.25rem; line-height: 1; color: var(--ink); cursor: pointer;
}
.mobile-nav__close:hover { background: var(--tint-50); }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
/* :not(.btn) keeps the drawer's call-to-action on its own button colours --
   .mobile-nav a would otherwise out-specify .btn--primary and turn the
   white label on the green button into body ink. */
.mobile-nav a:not(.btn) {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 52px; padding: 8px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink); text-decoration: none; font-size: 1.0625rem; font-weight: 550;
}
/* The current-page marker for the drawer's text links. :not(.btn) is needed
   here too -- the drawer's call-to-action is a link as well, and without the
   exclusion it would take the green link colour on the green button. */
.mobile-nav a:not(.btn)[aria-current="page"] { color: var(--brand-700); }
.mobile-nav a:not(.btn)[aria-current="page"]::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.mobile-nav .btn { margin-top: 24px; width: 100%; }

body.nav-open { overflow: hidden; }

/* ------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 11px 22px;
  font-family: inherit; font-size: .9375rem; font-weight: 650; line-height: 1.2;
  text-decoration: none; border-radius: var(--radius);
  border: 1px solid transparent; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn--primary { background: var(--brand-700); color: #fff; }
.btn--primary:hover { background: var(--brand-800); color: #fff; }
.btn--secondary { background: var(--surface); color: var(--brand-700); border-color: var(--line-2); }
.btn--secondary:hover { background: var(--tint-50); color: var(--brand-800); border-color: var(--brand-300); }
.btn--on-dark, .band-dark .btn--on-dark, .site-footer .btn--on-dark { background: #fff; color: var(--brand-800); }
.btn--on-dark:hover, .band-dark .btn--on-dark:hover { background: var(--tint-100); color: var(--brand-900); }
.btn--ghost-dark, .band-dark .btn--ghost-dark { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.btn--ghost-dark:hover, .band-dark .btn--ghost-dark:hover { background: rgba(255, 255, 255, .1); color: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; text-decoration: none; color: var(--brand-700);
}
.link-arrow::after { content: "\2192"; transition: transform .15s ease; }
.link-arrow:hover { color: var(--brand-900); }
.link-arrow:hover::after { transform: translateX(3px); }

/* ------------------------------------------------------------ typography - */
.eyebrow {
  display: block; margin-bottom: 12px;
  font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand-700);
}
.section-head { max-width: 62ch; margin-bottom: 40px; }
.section-head h2 { margin-bottom: .4em; }
.section-head .lead { font-size: 1.0625rem; color: var(--ink-2); margin: 0; }
@media (min-width: 768px) { .section-head { margin-bottom: 56px; } }

.rule { width: 48px; height: 3px; background: var(--brand); border: 0; margin: 0 0 20px; }
.section-cta { margin-top: 32px; }

.lead { font-size: 1.0625rem; line-height: 1.65; color: var(--ink-2); }
.text-sm { font-size: .875rem; }
.muted { color: var(--ink-3); }

/* ---------------------------------------------------------------- hero -- */
.hero {
  background:
    radial-gradient(120% 100% at 88% 0%, var(--tint-50) 0%, rgba(244, 249, 245, 0) 58%),
    var(--surface);
  border-bottom: 1px solid var(--line);
  padding-block: 44px 52px;
}
@media (min-width: 960px) {
  .hero { padding-block: 72px 80px; }
  .hero__inner { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 52px; align-items: center; }
}
.hero h1 { margin-bottom: .45em; }
.hero h1 .accent { color: var(--brand-700); }
.hero__lead { font-size: clamp(1.0625rem, 1rem + .4vw, 1.1875rem); color: var(--ink-2); max-width: 56ch; margin-bottom: 28px; }

/* the brand motif: the logo's angular geometry, extended. Static, decorative. */
.hero__visual { display: none; }
@media (min-width: 960px) {
  .hero__visual { display: block; color: var(--brand); }
  .motif { display: block; width: 100%; max-width: 380px; height: auto; margin-left: auto; }
}

.hero-panel {
  border: 1px solid var(--line);
  border-top: 3px solid var(--brand);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 26px 24px;
}
.hero-panel h2 { font-size: 1rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--ink); margin-bottom: 16px; }
.hero-panel ol { list-style: none; margin: 0; padding: 0; counter-reset: hp; }
.hero-panel li { counter-increment: hp; padding: 14px 0; border-top: 1px solid var(--line); }
.hero-panel li:first-child { border-top: 0; padding-top: 0; }
.hero-panel li b { display: block; color: var(--ink); font-weight: 650; margin-bottom: 2px; }
.hero-panel li span { font-size: .9375rem; color: var(--ink-3); }
.hero-panel li::before {
  content: "0" counter(hp);
  display: block; font-size: .75rem; font-weight: 700; letter-spacing: .08em;
  color: var(--brand); margin-bottom: 4px;
}
.hero-panel__foot { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: .875rem; }

/* --------------------------------------------------- customer problems ---- */
.section--flush { padding-block: 40px; }
@media (min-width: 768px) { .section--flush { padding-block: 48px; } }
.problems { border-top: 3px solid var(--brand); padding-top: 24px; }
/* The strip is followed by a full section, which already carries its own top
   padding. Adding the strip's bottom padding on top of it doubled the gap. */
#problems { padding-bottom: 0; }
/* The Resources list adds its own padding per article, so the block above it
   needs a smaller gap than the standard section head. */
#resources .section-head { margin-bottom: 16px; }
.problems__title {
  font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand-700); margin-bottom: 20px;
}
.problems__list { list-style: none; margin: 0; padding: 0; }
@media (min-width: 700px) { .problems__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 28px; } }
.problems__item { padding: 16px 0; border-top: 1px solid var(--line); }
.problems__h { font-size: 1.0625rem; font-weight: 650; margin: 0 0 6px; line-height: 1.35; }
.problems__p { font-size: 1rem; color: var(--ink-2); margin: 0; line-height: 1.6; }

/* -------------------------------------------------------- problem set ---- */
.problem { border-top: 2px solid var(--line-2); padding-top: 22px; }
.problem:hover { border-top-color: var(--brand); }
.problem__idx { font-size: .75rem; font-weight: 700; letter-spacing: .1em; color: var(--brand); }
.problem h3 { margin: 8px 0 10px; }
.problem p { font-size: .9375rem; color: var(--ink-2); margin-bottom: 14px; }

/* ------------------------------------------------------ solutions grid -- */
.sol-grid { display: grid; gap: 0; border-top: 1px solid var(--line); }
@media (min-width: 640px)  { .sol-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sol-grid { grid-template-columns: repeat(4, 1fr); } }
.sol-grid--3 { grid-template-columns: 1fr; }
@media (min-width: 640px)  { .sol-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .sol-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .sol-grid--3 .sol:nth-child(3n) { border-right: 0; }
}
.sol {
  display: block; padding: 26px 24px 28px;
  border-bottom: 1px solid var(--line); border-right: 1px solid var(--line);
  text-decoration: none; color: inherit;
  position: relative; transition: background-color .15s ease;
}
.sol:hover { background: var(--tint-50); color: inherit; }
.sol:hover .sol__title { color: var(--brand-800); }
@media (min-width: 640px)  { .sol:nth-child(2n) { border-right: 0; } }
@media (min-width: 1024px) { .sol:nth-child(2n) { border-right: 1px solid var(--line); } .sol:nth-child(4n) { border-right: 0; } }
.sol__idx { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .1em; color: var(--brand-600); }
.sol__title { display: block; font-size: 1.0625rem; font-weight: 650; color: var(--ink); margin: 8px 0 8px; line-height: 1.3; }
.sol__desc { display: block; font-size: 1rem; color: var(--ink-2); margin: 0 0 12px; line-height: 1.6; }
.sol__more { display: inline-block; font-size: .8125rem; font-weight: 600; color: var(--brand-700); }
.sol:hover .sol__more { color: var(--brand-900); }
@media (max-width: 639px) { .sol { border-right: 0; } }

/* ----------------------------------------- six-stage delivery flow ------ */
.flow {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line); margin-bottom: 40px;
}
@media (min-width: 900px) { .flow { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.flow__step { position: relative; padding: 16px 18px 18px 0; border-bottom: 1px solid var(--line); }
.flow__step::before {
  content: ""; position: absolute; top: -1px; left: 0; width: 26px; height: 3px; background: var(--brand);
}
.flow__n { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .1em; color: var(--brand-600); margin-bottom: 6px; }
.flow__t { display: block; font-size: .9375rem; font-weight: 600; color: var(--ink); line-height: 1.35; }
@media (max-width: 899px) {
  .flow__step:nth-child(2n) { padding-right: 0; }
}

/* ------------------------------------------------------------ services -- */
.lifecycle { display: grid; gap: 0; border-top: 1px solid var(--line); }
@media (min-width: 768px) { .lifecycle { grid-template-columns: repeat(3, 1fr); } }
.lifecycle__step { padding: 18px 20px 18px 0; border-bottom: 1px solid var(--line); position: relative; }
.lifecycle__step::before {
  content: ""; position: absolute; top: -1px; left: 0; width: 28px; height: 3px; background: var(--brand);
}
.lifecycle__step b { display: block; color: var(--ink); font-size: .9375rem; font-weight: 650; }
.lifecycle__step span { font-size: .875rem; color: var(--ink-3); }
@media (min-width: 768px) {
  .lifecycle__step { border-bottom: 0; border-right: 1px solid var(--line); padding-right: 24px; }
  .lifecycle__step:last-child { border-right: 0; }
}

/* --------------------------------------------------------- dark bands ---- */
.band-dark { background: var(--brand-900); color: var(--ink-inv); }
.band-dark h2, .band-dark h3 { color: #fff; }
.band-dark .eyebrow { color: var(--brand-300); }
.band-dark p { color: #e3f0e8; }
.band-dark a { color: #fff; }
.band-dark .link-arrow { color: #fff; }
.band-dark .rule { background: var(--brand-300); }

.about__grid { display: grid; gap: 36px; }
@media (min-width: 900px) { .about__grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; align-items: start; } }
.facts { list-style: none; margin: 0; padding: 0; }
.facts li { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.facts li:first-child { border-top: 0; padding-top: 0; }
.facts b { color: var(--ink); font-weight: 650; display: block; }
.facts span { font-size: .9375rem; color: var(--ink-2); }
.facts__v { min-width: 0; }
.facts__k {
  flex: 0 0 auto; width: 118px; font-size: .75rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--brand-700); padding-top: 3px;
  overflow-wrap: normal; word-break: normal;
}
/* the same list appears on the dark band on the home page */
.band-dark .facts li { border-top-color: var(--line-dark); }
.band-dark .facts b { color: #fff; }
.band-dark .facts span { color: #e3f0e8; }
.band-dark .facts__k { color: var(--brand-300); }
/* in the narrow About-page sidebar the value needs the full width */
.side-nav .facts li { display: block; }
.side-nav .facts__k { display: block; width: auto; margin-bottom: 4px; padding-top: 0; }

/* Below 560px the label and the value stack, so a long label such as
   "POSITIONING" can never be broken across lines and can never overflow. */
@media (max-width: 559px) {
  .facts li { display: block; }
  .facts__k { display: block; width: auto; margin-bottom: 4px; padding-top: 0; }
}

/* -------------------------------------------- solutions overview diagram -- */
.schematic { border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; background: var(--surface); }
.sch { list-style: none; margin: 0; padding: 0; }
.sch__band {
  display: grid; grid-template-columns: 186px 1fr; gap: 0 22px; align-items: center;
  padding: 15px 0 15px 14px; border-left: 3px solid var(--brand);
  background: var(--tint-50); border-radius: 0 3px 3px 0;
}
.sch__band + .sch__band { margin-top: 9px; }
.sch__band:nth-child(2) { border-left-color: var(--brand-600); }
.sch__band:nth-child(3) { border-left-color: var(--brand-300); }
.sch__label {
  margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: var(--brand-700); line-height: 1.45;
}
.sch__nodes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sch__node a {
  display: flex; align-items: center; gap: 9px; background: var(--surface);
  border: 1px solid var(--line-2); border-radius: 3px; padding: 9px 13px;
  font-size: .875rem; font-weight: 600; color: var(--ink); text-decoration: none; line-height: 1.3;
}
.sch__node a::before { content: ""; width: 7px; height: 7px; flex: 0 0 7px; background: var(--brand); border-radius: 1px; }
.sch__node a:hover { border-color: var(--brand-300); background: var(--tint-100); }
@media (max-width: 719px) {
  .schematic { padding: 18px 14px 16px; }
  .sch__band { grid-template-columns: 1fr; gap: 10px; padding: 13px 0 13px 11px; }
  .sch__node { flex: 1 1 100%; }
  .sch__node a { font-size: .8125rem; padding: 8px 11px; }
}

/* ------------------------------------------------------------ insights -- */
.insight { display: flex; flex-direction: column; gap: 10px; padding: 22px 0; border-top: 1px solid var(--line); }
.insight__meta { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.insight__title { font-size: 1.0625rem; font-weight: 650; color: var(--ink); margin: 0; }
.insight__title a { text-decoration: none; color: inherit; }
.insight__title a:hover { color: var(--brand-800); }
.insight p { font-size: 1rem; color: var(--ink-2); margin: 0; line-height: 1.6; }
.insight .link-arrow { font-size: .875rem; margin-top: 2px; }

/* ------------------------------------------------------------- contact -- */
.contact__grid { display: grid; gap: 32px; }
@media (min-width: 900px) { .contact__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; } }
.contact-list { list-style: none; margin: 0 0 26px; padding: 0; }
.contact-list li { padding: 14px 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; }
.contact-list li:first-child { border-top: 0; padding-top: 0; }
.contact-list .k { flex: 0 0 96px; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-700); }
.contact-list .v { color: var(--ink); font-size: 1.0625rem; font-weight: 550; }
.contact-list .v a { color: var(--brand-700); text-decoration: underline; }
.contact-list .v a:hover { color: var(--brand-900); }
/* click-to-load map -------------------------------------------------------
   The iframe is created by script only when the visitor asks for it, so no
   request reaches Google before that. The address, telephone number, e-mail
   address and the external map link sit outside this component and stay
   usable whether or not the map ever loads. */
.map__cta {
  border: 1px solid var(--line); border-top: 3px solid var(--brand);
  border-radius: var(--radius); background: var(--surface); padding: 22px 20px;
}
.map--dark .map__cta { border-color: var(--line-dark); background: rgba(255, 255, 255, .05); }
.map__note { font-size: .875rem; color: var(--ink-3); margin: 14px 0 0; }
.map--dark .map__note { color: var(--ink-inv-2); }
.map__cta .btn + .map__note { margin-top: 14px; }
.map__frame { margin-top: 14px; }
.map__embed {
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: var(--surface); min-height: 180px;
}
.map--dark .map__embed { border-color: var(--line-dark); }
.map__embed iframe { display: block; width: 100%; height: 260px; border: 0; }
@media (min-width: 900px) { .map__embed iframe { height: 320px; } }
.map__status { font-size: .875rem; color: var(--ink-3); margin: 10px 0 0; }
.map--dark .map__status { color: var(--ink-inv-2); }
.map__frame .btn { margin-top: 14px; }
.map__out { margin: 16px 0 0; }
.map__printurl { display: none; }

/* dark band variant */
.band-dark .contact-list li { border-top-color: var(--line-dark); }
.band-dark .contact-list .k { color: var(--brand-300); }
.band-dark .contact-list .v, .band-dark .contact-list .v a { color: #fff; }
.band-dark .contact-list .v a:hover { color: var(--brand-300); }

/* ------------------------------------------------------------- footer --- */
.site-footer { background: var(--brand-900); color: #d8ebe1; padding-block: 48px 28px; }
.site-footer h2, .site-footer h3 { color: #fff; }
.footer__grid { display: grid; gap: 32px; }
/* Two columns through the tablet range: five columns at 768px squeeze the
   telephone number, the e-mail address and the company name into broken
   fragments. The five-column layout only switches on once each column can
   hold a full address without wrapping. */
@media (min-width: 768px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (min-width: 1180px) {
  .footer__grid {
    grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr);
    gap: 32px;
  }
  .footer__brand { grid-column: auto; }
}
.footer__brand .brand__name { color: #fff; }
.footer__brand .brand__zh { color: #d8ebe1; }
.footer__tag { font-size: .875rem; margin: 14px 0 0; max-width: 34ch; }
.footer__col h3 { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #7ed08f; margin-bottom: 14px; }
.footer__sum {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 14px; cursor: pointer; list-style: none;
}
.footer__sum::-webkit-details-marker { display: none; }
.footer__sum-t { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #7ed08f; }
.footer__sum::after { content: "+"; font-size: 1.375rem; line-height: 1; color: #7ed08f; }
.footer__col[open] > .footer__sum::after { content: "\2212"; }
.footer__col--contact h3 { margin-bottom: 14px; }
@media (min-width: 768px) {
  .footer__sum { pointer-events: none; cursor: default; }
  .footer__sum::after { content: none; }
  .footer__col[open] > .footer__sum::after { content: none; }
}
.footer__col ul { list-style: none; margin: 0; padding: 0; }
.footer__col li { margin-bottom: 8px; }
.footer__col a { color: #d8ebe1; text-decoration: none; font-size: .9375rem; }
.footer__col a:hover { color: #fff; text-decoration: underline; }
.footer__bottom {
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line-dark);
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
  font-size: .8125rem; color: #d8ebe1;
}

/* --------------------------------------------------------- inner pages -- */
.page-head { background: var(--tint-50); border-bottom: 1px solid var(--line); padding-block: 40px 44px; }
@media (min-width: 768px) { .page-head { padding-block: 56px 60px; } }
.page-head h1 { margin-bottom: .35em; }
.breadcrumb { font-size: .8125rem; color: var(--ink-3); margin-bottom: 18px; }
.breadcrumb a { color: var(--ink-3); }
.breadcrumb a:hover { color: var(--brand-700); }
.breadcrumb span { margin: 0 6px; }

.prose { max-width: 72ch; }
.prose h2 { font-size: 1.375rem; margin-top: 2rem; }
.prose h3 { font-size: 1.0625rem; margin-top: 1.75rem; }
.prose img { border-radius: var(--radius); margin-block: 8px; }

.layout-2col { display: grid; gap: 40px; }
@media (min-width: 1024px) { .layout-2col { grid-template-columns: minmax(0, 1fr) 300px; gap: 64px; } }
.side-nav { align-self: start; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.side-nav h2 { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.side-nav ul { list-style: none; margin: 0; padding: 0; }
.side-nav li { margin-bottom: 2px; }
.side-nav a { display: block; padding: 7px 0; font-size: .9375rem; text-decoration: none; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.side-nav a:last-child { border-bottom: 0; }
.side-nav a:hover { color: var(--brand-700); }
.side-nav a[aria-current="page"] { color: var(--brand-700); font-weight: 650; }

/* --------------------------------------------- legacy content wrapper -- */
/* Wraps the 2010-era raw HTML pulled from contents/**/main.txt so that it
   reads acceptably inside the new layout. Phase 3 removes this entirely. */
.legacy { font-size: 1rem; color: var(--ink-2); }
.legacy > br:first-child { display: none; }
.legacy font[style*="font-weight:bold"], .legacy font[style*="font-weight:bold "] {
  color: var(--brand-700) !important;
  font-size: 1rem !important;
  display: block;
  margin: 1.75rem 0 .6rem;
  font-weight: 650;
}
.legacy table { width: 100% !important; margin-block: 1.25rem; }
.legacy table td { border: 0; padding: 0 16px 0 0; vertical-align: top; }
.legacy table ul { margin: 0; padding-left: 1.15em; }
.legacy ul { padding-left: 1.25em; }
.legacy img { border-radius: var(--radius); margin-block: 10px; }
.legacy img[align="left"]  { float: left; margin: 6px 22px 12px 0; }
.legacy img[align="right"] { float: right; margin: 6px 0 12px 22px; }
.legacy div[align="left"] { clear: both; }
@media (max-width: 640px) {
  .legacy img[align] { float: none; margin: 14px auto; }
}
.legacy a { word-break: break-word; }

/* ------------------------------------------------------ utility / misc -- */
.pill {
  display: inline-block; padding: 4px 10px; border-radius: 100px;
  background: var(--tint-100); color: var(--brand-800);
  font-size: .75rem; font-weight: 650; letter-spacing: .04em;
}
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; }
.tag-row li { margin: 0; }

.note {
  border-left: 3px solid var(--brand); background: var(--tint-50);
  padding: 14px 18px; font-size: .9375rem; color: var(--ink-2);
}
.note strong { color: var(--ink); }

.vh {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .site-header, .mobile-nav, .site-footer, .btn-row, .nav-toggle { display: none !important; }
  body { font-size: 12pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  /* the map cannot be printed -- print the address and the map link instead */
  .map__cta, .map__frame { display: none !important; }
  .map__printurl {
    display: block; margin: 6px 0 0; font-size: 9pt; color: #000;
    word-break: break-all;
  }
  .hero__visual { display: none !important; }
}