:root {
  /* Color — VI manual standard colors (环贸智荟VI手册 p.37); see docs/design-system-v2.md */
  --paper: #f7f6f4;        /* 米白 Off-White — page base */
  --paper-2: #fbfaf9;      /* lighter paper for raised surfaces */
  --mist: #ecebe9;         /* silver-soft — large soft fills (derived paper↔silver) */
  --mist-2: #d9d9d9;       /* 银灰 Silver — secondary surface / strong divider */
  --ink: #333333;          /* 炭灰 Charcoal — body text / structure (≈11.8:1 on paper) */
  --char: #1a1a18;         /* off-black — dark sections (softer than pure #000) */
  --slate: #6b6862;        /* muted caption grey */
  --line: rgba(51, 51, 51, 0.16);
  --line-gold: rgba(166, 137, 102, 0.42);
  --gold: #a68966;         /* 金 Gold — single accent, ≤15–20%, marketing/CTA only */
  --gold-strong: #8a7050;  /* deeper bronze — hover/emphasis */
  --gold-ink: #7a6346;     /* gold *text* on light, AA ≥4.5:1 */
  --white: #ffffff;
  --shadow: 0 24px 70px rgba(35, 34, 32, 0.12);
  --radius: 6px;
  --shell: 1280px;
  --sans: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  --serif: "Source Serif 4", "Noto Serif", Georgia, serif;        /* Latin display / eyebrows / wordmark */
  --latin: "Geist", "Manrope", "Avenir Next", Arial, sans-serif;  /* Latin body / data */
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.75;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: 0.025;
  mix-blend-mode: multiply;
  background-image: radial-gradient(rgba(26, 26, 24, 0.28) 0.6px, transparent 0.6px);
  background-size: 3px 3px;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

::selection {
  background: rgba(180, 149, 89, 0.28);
}

.sr-only,
.skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link:focus {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 300;
  width: auto;
  height: auto;
  padding: 10px 14px;
  clip: auto;
  color: var(--paper);
  background: var(--char);
}

.shell {
  width: min(calc(100% - 40px), var(--shell));
  margin-inline: auto;
}

.narrow {
  width: min(calc(100% - 40px), 880px);
  margin-inline: auto;
}

.site-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 100;
  color: var(--ink);
  transition: background 180ms ease, box-shadow 180ms ease;
}

.site-header.is-solid,
.site-header.is-open {
  background: rgba(247, 245, 243, 0.92);
  box-shadow: 0 1px 0 var(--line);
  backdrop-filter: blur(18px);
}

.site-header__inner {
  width: min(calc(100% - 32px), 1440px);
  height: 74px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  min-width: max-content;
}

.brand-mark__logo {
  width: 230px;
  height: 58px;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
  mix-blend-mode: normal;
}

.brand-mark__symbol,
.brand-mark__text {
  display: none;
}

.primary-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2vw, 30px);
  min-width: 0;
  color: rgba(26, 26, 24, 0.76);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.primary-nav a,
.site-footer__links a {
  transition: color 160ms ease;
}

.primary-nav a:hover,
.site-footer__links a:hover {
  color: var(--gold-strong);
}

.site-header__tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.language-switch {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.3);
}

.language-switch button {
  width: 34px;
  height: 28px;
  padding: 0;
  border: 0;
  color: var(--slate);
  background: transparent;
  font-family: var(--latin);
  font-size: 11px;
  font-weight: 800;
}

.language-switch button.is-active {
  color: var(--paper);
  background: var(--char);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.button:active {
  transform: translateY(1px);
}

.button--gold {
  color: var(--paper);
  background: var(--gold-strong);
}

.button--gold:hover {
  background: var(--char);
}

.button--ghost {
  color: var(--ink);
  border-color: rgba(26, 26, 24, 0.28);
  background: transparent;
}

.button--ghost:hover {
  color: var(--gold-strong);
  border-color: var(--gold);
}

.button--dark {
  color: var(--char);
  background: var(--paper);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.menu-button {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--line);
  background: transparent;
}

.menu-button span:not(.sr-only) {
  display: block;
  width: 18px;
  height: 2px;
  margin: 4px auto;
  background: var(--ink);
}

.mobile-nav {
  display: none;
  width: min(calc(100% - 32px), 1440px);
  margin: 0 auto 14px;
  padding: 12px;
  border: 1px solid var(--line);
  background: rgba(247, 245, 243, 0.96);
  box-shadow: var(--shadow);
}

.mobile-nav a {
  display: block;
  padding: 13px 10px;
  border-bottom: 1px solid var(--line);
  font-weight: 800;
}

.mobile-nav a:last-child {
  border-bottom: 0;
}

.section {
  padding: clamp(72px, 9vw, 128px) 0;
}

.section--mist {
  background: var(--mist);
}

.section--dark {
  color: var(--paper);
  background: var(--char);
}

.section-kicker {
  margin: 0 0 18px;
  color: var(--gold-strong);
  font-family: var(--latin);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
}

.display {
  margin: 0;
  max-width: 920px;
  font-size: clamp(40px, 7vw, 92px);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: 0;
}

.display span {
  display: block;
  color: var(--gold-strong);
}

.section-title {
  margin: 0;
  max-width: 860px;
  font-size: clamp(30px, 4.2vw, 56px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: 0;
}

.section-lead,
.lead {
  max-width: 680px;
  margin: 24px 0 0;
  color: var(--slate);
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.75;
}

.muted {
  color: rgba(107, 104, 98, 0.86);
}

.hm-hero {
  position: relative;
  min-height: 100dvh;
  padding: 124px 0 72px;
  overflow: hidden;
}

.hm-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(26, 26, 24, 0.06) 1px, transparent 1px),
    linear-gradient(rgba(26, 26, 24, 0.05) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(90deg, black, transparent 72%);
}

.hm-hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(360px, 0.78fr);
  gap: clamp(36px, 6vw, 86px);
  align-items: center;
}

.hm-hero .lead {
  max-width: 590px;
}

.hero-note {
  margin-top: 32px;
  color: var(--slate);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.report-visual {
  position: relative;
  min-height: 520px;
}

.report-visual__image {
  position: relative;
  z-index: 1;
  width: min(100%, 620px);
  margin-left: auto;
  border: 1px solid rgba(255, 255, 255, 0.56);
  box-shadow: var(--shadow);
}

.report-visual__panel {
  position: absolute;
  right: -8%;
  bottom: 2%;
  z-index: 2;
  width: min(76%, 390px);
  padding: 24px;
  border: 1px solid var(--line-gold);
  background: rgba(247, 245, 243, 0.88);
  box-shadow: 0 18px 50px rgba(35, 34, 32, 0.12);
  backdrop-filter: blur(16px);
}

.report-lines {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.report-lines span {
  display: block;
  height: 8px;
  background: linear-gradient(90deg, var(--gold), rgba(180, 149, 89, 0.16));
}

.metric-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 42px;
  border: 1px solid var(--line-gold);
  background: var(--line-gold);
}

.metric {
  padding: 22px;
  background: rgba(247, 245, 243, 0.86);
}

.metric strong {
  display: block;
  font-family: var(--latin);
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
}

.metric span {
  display: block;
  margin-top: 8px;
  color: var(--slate);
  font-size: 13px;
}

.split-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(34px, 6vw, 86px);
  align-items: start;
}

.comparison-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
  margin-top: 52px;
}

.comparison-card,
.visual-card,
.tier-card,
.solution-card,
.deliverable-card,
.process-card,
.form-card,
.article-card {
  border: 1px solid var(--line);
  background: var(--paper-2);
}

.comparison-card {
  padding: clamp(24px, 3vw, 36px);
  min-height: 360px;
}

.comparison-card.is-after {
  border-color: var(--line-gold);
  box-shadow: 0 18px 54px rgba(180, 149, 89, 0.14);
}

.comparison-card h3,
.tier-card h3,
.solution-card h3,
.deliverable-card h3,
.process-card h3 {
  margin: 0;
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 900;
  line-height: 1.15;
}

.comparison-card ul,
.tier-card ul,
.solution-card ul,
.deliverable-card ul {
  padding: 0;
  margin: 26px 0 0;
  list-style: none;
}

.comparison-card li,
.tier-card li,
.solution-card li,
.deliverable-card li {
  padding: 12px 0;
  border-top: 1px solid var(--line);
  color: var(--slate);
}

.turning-point {
  display: grid;
  place-items: center;
  width: 96px;
  color: var(--paper);
  background: var(--char);
}

.turning-point span {
  writing-mode: vertical-rl;
  color: var(--gold);
  font-family: var(--latin);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.os-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(300px, 0.78fr);
  gap: clamp(36px, 6vw, 82px);
  align-items: center;
  margin-top: 56px;
}

.os-list {
  display: grid;
  gap: 16px;
}

.os-item {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 20px;
  padding: 24px 0;
  border-top: 1px solid var(--line-gold);
}

.os-item:last-child {
  border-bottom: 1px solid var(--line-gold);
}

.os-item__code {
  color: var(--gold-strong);
  font-family: var(--latin);
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
}

.os-item h3 {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
}

.os-item p {
  margin: 8px 0 0;
  color: var(--slate);
}

.orbit {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 1px solid var(--line-gold);
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(180, 149, 89, 0.16) 0 18%, transparent 19%),
    repeating-radial-gradient(circle at center, transparent 0 29%, rgba(26, 26, 24, 0.09) 30%, transparent 31%);
}

.orbit__core {
  display: grid;
  place-items: center;
  width: 136px;
  height: 136px;
  border-radius: 50%;
  color: var(--paper);
  background: var(--char);
  font-size: 18px;
  font-weight: 900;
  text-align: center;
}

.orbit__node {
  position: absolute;
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: 0 12px 30px rgba(35, 34, 32, 0.1);
  color: var(--slate);
  font-size: 13px;
  font-weight: 800;
}

.orbit__node:nth-child(2) { top: 8%; left: 50%; transform: translateX(-50%); }
.orbit__node:nth-child(3) { right: 6%; top: 50%; transform: translateY(-50%); }
.orbit__node:nth-child(4) { bottom: 8%; left: 50%; transform: translateX(-50%); }
.orbit__node:nth-child(5) { left: 6%; top: 50%; transform: translateY(-50%); }

.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 54px;
  background: var(--line-gold);
  border: 1px solid var(--line-gold);
}

.tier-card {
  min-height: 420px;
  padding: clamp(24px, 3vw, 36px);
}

.tier-card__index,
.card-index {
  display: inline-block;
  margin-bottom: 22px;
  color: var(--gold-strong);
  font-family: var(--latin);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.tier-card__meta {
  margin: 14px 0 0;
  color: var(--slate);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.solution-list {
  margin-top: 50px;
  border-top: 1px solid var(--line-gold);
}

.solution-row {
  display: grid;
  grid-template-columns: minmax(180px, 0.28fr) minmax(0, 0.46fr) minmax(260px, 0.26fr);
  gap: 28px;
  align-items: center;
  padding: 30px 0;
  border-bottom: 1px solid var(--line-gold);
}

.solution-row h3 {
  margin: 0;
  font-size: 28px;
  font-weight: 900;
}

.solution-row p {
  margin: 0;
  color: var(--slate);
}

.mini-visual,
.placeholder-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 150px;
  overflow: hidden;
  border: 1px dashed var(--line-gold);
  color: rgba(107, 104, 98, 0.8);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(227, 225, 221, 0.66)),
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(26, 26, 24, 0.035) 18px 19px);
  font-size: 13px;
  font-weight: 800;
}

.mini-visual::before,
.placeholder-visual::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(180, 149, 89, 0.22);
}

.deliverable-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 48px;
  border: 1px solid rgba(247, 245, 243, 0.14);
  background: rgba(247, 245, 243, 0.14);
}

.deliverable-card {
  min-height: 230px;
  padding: 26px;
  border: 0;
  color: var(--paper);
  background: rgba(247, 245, 243, 0.045);
}

.deliverable-card p,
.section--dark .lead {
  color: rgba(247, 245, 243, 0.66);
}

.page-hero {
  padding: 144px 0 72px;
  border-bottom: 1px solid var(--line);
}

.page-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(300px, 0.42fr);
  gap: clamp(34px, 6vw, 82px);
  align-items: end;
}

.page-title {
  margin: 0;
  max-width: 860px;
  font-size: clamp(42px, 6.2vw, 82px);
  font-weight: 900;
  line-height: 0.98;
}

.page-title span {
  color: var(--gold-strong);
}

.page-aside {
  padding: 28px;
  border: 1px solid var(--line-gold);
  background: rgba(255, 255, 255, 0.38);
}

.page-aside p {
  margin: 0;
  color: var(--slate);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 44px;
}

.feature-card,
.solution-card,
.process-card,
.article-card {
  padding: clamp(24px, 3vw, 34px);
}

.feature-card {
  border: 1px solid var(--line);
  background: var(--paper-2);
}

.feature-card h3 {
  margin: 0;
  font-size: 24px;
  font-weight: 900;
}

.feature-card p {
  margin: 14px 0 0;
  color: var(--slate);
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 48px;
  background: var(--line-gold);
  border: 1px solid var(--line-gold);
}

.process-card {
  min-height: 250px;
  background: var(--paper-2);
}

.process-card p {
  color: var(--slate);
}

.package-table {
  display: grid;
  grid-template-columns: 0.85fr repeat(3, 1fr);
  margin-top: 48px;
  border: 1px solid var(--line-gold);
  background: var(--line-gold);
  gap: 1px;
}

.package-cell {
  min-height: 84px;
  padding: 20px;
  background: var(--paper-2);
}

.package-cell.is-head {
  color: var(--paper);
  background: var(--char);
  font-weight: 900;
}

.package-cell strong {
  display: block;
  font-size: 20px;
  line-height: 1.2;
}

.package-cell span {
  color: var(--slate);
  font-size: 14px;
}

.solutions-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 48px;
}

.solution-card {
  min-height: 480px;
  display: flex;
  flex-direction: column;
}

.solution-card .placeholder-visual {
  min-height: 190px;
  margin: 24px 0;
}

.solution-card .button {
  margin-top: auto;
  align-self: flex-start;
}

.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(320px, 0.38fr);
  gap: clamp(34px, 6vw, 82px);
}

.sticky-panel {
  position: sticky;
  top: 104px;
}

.deliverables-list {
  display: grid;
  gap: 14px;
  margin-top: 28px;
}

.deliverables-list div {
  padding: 18px;
  border: 1px solid var(--line-gold);
  background: rgba(255, 255, 255, 0.42);
  font-weight: 800;
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.54fr) minmax(360px, 0.46fr);
  gap: clamp(36px, 6vw, 86px);
  align-items: start;
}

.form-card {
  padding: clamp(24px, 3vw, 38px);
  box-shadow: var(--shadow);
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.field {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}

.field label {
  font-size: 14px;
  font-weight: 900;
}

.field input,
.field textarea {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(26, 26, 24, 0.22);
  border-radius: 0;
  padding: 12px 14px;
  color: var(--ink);
  background: var(--paper);
}

.field textarea {
  min-height: 132px;
  resize: vertical;
}

.field input:focus,
.field textarea:focus {
  outline: 2px solid rgba(180, 149, 89, 0.35);
  border-color: var(--gold);
}

.field--full {
  grid-column: 1 / -1;
}

.honeypot {
  display: none;
}

.rich {
  color: rgba(26, 26, 24, 0.86);
  font-size: 17px;
  line-height: 1.9;
}

.rich h2,
.rich h3 {
  margin: 2em 0 0.7em;
  color: var(--ink);
  font-weight: 900;
  line-height: 1.18;
}

.rich h2 {
  font-size: 30px;
}

.rich h3 {
  font-size: 23px;
}

.rich p {
  margin: 0 0 1.1em;
}

.rich ul,
.rich ol {
  margin: 0 0 1.2em;
  padding-left: 1.2em;
}

.rich a {
  color: var(--gold-strong);
  text-decoration: underline;
}

.news-list {
  margin-top: 48px;
  border-top: 1px solid var(--line-gold);
}

.news-row {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) minmax(220px, 0.36fr);
  gap: 28px;
  align-items: baseline;
  padding: 30px 0;
  border-bottom: 1px solid var(--line-gold);
}

.news-row time {
  color: var(--slate);
  font-family: var(--latin);
  font-size: 13px;
  font-weight: 800;
}

.news-row h2 {
  margin: 0;
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 900;
  line-height: 1.2;
}

.news-row p {
  margin: 0;
  color: var(--slate);
}

.article-hero {
  padding: 144px 0 56px;
}

.article-shell {
  width: min(calc(100% - 40px), 920px);
  margin-inline: auto;
}

.article-title {
  margin: 0;
  font-size: clamp(38px, 5.6vw, 74px);
  font-weight: 900;
  line-height: 1.04;
}

.article-meta {
  margin: 0 0 22px;
  color: var(--gold-strong);
  font-family: var(--latin);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.article-body {
  padding-bottom: clamp(72px, 9vw, 128px);
}

.article-image {
  margin: 38px 0;
  border: 1px solid var(--line);
}

.status-page {
  min-height: 76dvh;
  display: grid;
  place-items: center;
  padding: 140px 20px 72px;
}

.status-card {
  width: min(100%, 900px);
  border: 1px solid var(--line-gold);
  padding: clamp(34px, 6vw, 76px);
  background: var(--paper-2);
  box-shadow: var(--shadow);
}

.status-code {
  margin: 0 0 20px;
  color: var(--gold-strong);
  font-family: var(--latin);
  font-size: clamp(64px, 13vw, 168px);
  font-weight: 900;
  line-height: 0.85;
}

.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 420ms ease, transform 420ms ease;
}

.reveal.is-visible,
.no-js .reveal {
  opacity: 1;
  transform: none;
}

.site-footer {
  padding: 64px 0;
  color: rgba(247, 245, 243, 0.74);
  background: var(--char);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.75fr 1fr 1fr;
  gap: 34px;
}

.site-footer__brand {
  margin: 0 0 14px;
  color: var(--paper);
  font-size: 22px;
  font-weight: 900;
}

.site-footer__summary {
  max-width: 360px;
  margin: 0;
}

.footer-label {
  margin: 0 0 16px;
  color: var(--gold);
  font-family: var(--latin);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.site-footer__links {
  display: grid;
  gap: 8px;
}

.site-footer__legal {
  color: rgba(247, 245, 243, 0.5);
  font-size: 13px;
}

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

  .menu-button {
    display: inline-block;
  }

  .site-header.is-open .mobile-nav {
    display: block;
  }
}

/* Inner-page final-design restoration */
.template-screen {
  --serif: "Source Han Serif SC", "Noto Serif SC", "Songti SC", "SimSun", serif;
  background: #f7f6f2;
  color: #252523;
  font-family: var(--serif);
}

.template-screen .site-header {
  background: rgba(247, 246, 242, 0.96);
  border-bottom: 1px solid rgba(51, 51, 51, 0.12);
  backdrop-filter: blur(12px);
}

.template-screen .site-header__inner {
  width: min(calc(100% - 76px), 1600px);
  height: 104px;
}

.template-screen .brand-mark__logo {
  width: 300px;
  height: 72px;
  object-position: left center;
}

.template-screen .primary-nav {
  gap: clamp(42px, 5vw, 74px);
  color: #222;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
}

.template-screen .primary-nav a {
  position: relative;
  padding: 38px 0 34px;
}

.template-screen .primary-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  height: 0;
  background: var(--gold-strong);
}

.template-ai-brand .primary-nav a:nth-child(2)::after,
.template-product .primary-nav a:nth-child(3)::after,
.template-deliverables .primary-nav a:nth-child(3)::after,
.template-solutions .primary-nav a:nth-child(4)::after,
.template-solution-detail .primary-nav a:nth-child(4)::after,
.template-insights .primary-nav a:nth-child(5)::after,
.template-insight-detail .primary-nav a:nth-child(5)::after,
.template-about .primary-nav a:nth-child(6)::after {
  height: 3px;
}

html[lang="zh-hans"] .template-ai-brand .primary-nav a:nth-child(5),
html[lang="zh-hans"] .template-product .primary-nav a:nth-child(5),
html[lang="zh-hans"] .template-solutions .primary-nav a:nth-child(5),
html[lang="zh-hans"] .template-about .primary-nav a:nth-child(5),
html[lang="zh-hans"] .template-contact .primary-nav a:nth-child(5),
html[lang="zh-hans"] .template-status-page .primary-nav a:nth-child(5) {
  display: none;
}

.template-screen .language-switch {
  display: none;
}

.template-screen .site-header__cta {
  min-height: 54px;
  padding: 0 28px;
  border-radius: 0;
  color: #c3a36c;
  background: #242424;
  box-shadow: inset 0 0 0 1px rgba(166, 137, 102, 0.24);
}

.template-screen .site-header__cta::after {
  content: "→";
  margin-left: 18px;
  font-size: 22px;
}

.template-screen .site-footer {
  display: none;
}

.screen-page {
  position: relative;
  height: 100vh;
  min-height: 941px;
  padding: 148px 64px 44px;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 42%, rgba(180, 149, 89, 0.06), transparent 28%),
    linear-gradient(180deg, #fbfaf8, #f3f1ed);
}

.screen-page h1,
.screen-page h2,
.screen-page h3,
.screen-page p {
  margin-top: 0;
}

.screen-page h1 {
  color: #252523;
  font-size: clamp(62px, 5.6vw, 96px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: 0;
}

.screen-kicker,
.screen-crumb,
.screen-subtitle {
  color: var(--gold-strong);
  font-family: Georgia, serif;
  font-size: 18px;
  letter-spacing: 0.08em;
}

.screen-crumb {
  color: #807a70;
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: 0;
}

.screen-rule {
  display: block;
  width: 43px;
  height: 2px;
  margin: 24px 0 34px;
  background: var(--gold-strong);
}

.screen-rule--spaced {
  margin-top: 36px;
}

.screen-lead,
.screen-page p {
  color: #46433d;
  font-size: 22px;
  line-height: 1.9;
}

.screen-actions {
  display: flex;
  align-items: center;
  gap: 44px;
  margin-top: 42px;
}

.screen-btn,
.screen-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 210px;
  height: 68px;
  padding: 0 34px;
  border: 1px solid rgba(166, 137, 102, 0.48);
  color: #b89458;
  font-size: 20px;
  line-height: 1;
  white-space: nowrap;
  transition: transform 160ms ease, background 160ms ease;
}

.screen-btn--dark {
  color: #c3a36c;
  background: #242424;
}

.screen-btn--gold {
  color: #fff8ea;
  background: linear-gradient(135deg, #b99558, #9f7e45);
  border-color: rgba(166, 137, 102, 0.74);
  box-shadow: 0 16px 28px rgba(110, 82, 42, 0.18);
}

.screen-btn--light,
.screen-link {
  min-width: 0;
  height: auto;
  padding: 0 0 10px;
  border-width: 0 0 1px;
  background: transparent;
}

.screen-btn span,
.screen-link span {
  margin-left: 20px;
  font-size: 26px;
}

.screen-btn:hover,
.screen-link:hover {
  transform: translateY(-2px);
}

.ai-mobile-cta,
.solution-mobile-cta,
.hm-mobile-belief {
  display: none;
}

.screen-building {
  position: absolute;
  pointer-events: none;
  opacity: 0.38;
  background:
    linear-gradient(120deg, transparent 0 45%, rgba(115, 120, 120, 0.17) 46% 47%, transparent 48%),
    repeating-linear-gradient(90deg, rgba(90, 96, 96, 0.13) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(0deg, rgba(90, 96, 96, 0.12) 0 1px, transparent 1px 42px);
  clip-path: polygon(10% 16%, 100% 0, 100% 100%, 0 100%, 0 34%);
}

.screen-building--left {
  left: -20px;
  bottom: -62px;
  width: 430px;
  height: 420px;
}

.screen-building--about,
.screen-building--contact {
  left: -10px;
  bottom: -80px;
  width: 520px;
  height: 390px;
}

.template-about .screen-building--about {
  left: -80px;
  bottom: -120px;
  width: 560px;
  height: 325px;
  opacity: .22;
  clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 100%);
  background:
    linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,.76)),
    url("/static/img/generated-assets/business-park-campus-v2.2c4ad1ef1f08.png") center 56% / cover no-repeat;
  filter: grayscale(1) brightness(1.18) contrast(.62);
}

.screen-rings {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0.42;
  background: repeating-radial-gradient(circle, transparent 0 54px, rgba(166, 137, 102, 0.18) 55px 56px, transparent 57px 82px);
}

.screen-rings--right {
  right: -170px;
  top: 320px;
  width: 440px;
  height: 440px;
}

.screen-copy--left {
  position: absolute;
  left: 78px;
  top: 224px;
  z-index: 2;
  width: 620px;
}

.screen-copy--left h1 {
  margin: 68px 0 0;
  font-size: 84px;
  white-space: nowrap;
}

.ai-orbit {
  position: absolute;
  left: 735px;
  top: 180px;
  width: 540px;
  height: 540px;
  border-radius: 50%;
}

.ai-orbit__ring {
  position: absolute;
  inset: 42px;
  border: 2px dashed rgba(166, 137, 102, 0.48);
  border-radius: 50%;
}

.ai-orbit__ring::before,
.ai-orbit__ring::after {
  content: "";
  position: absolute;
  inset: 76px;
  border: 1px solid rgba(166, 137, 102, 0.32);
  border-radius: 50%;
}

.ai-orbit__ring::after {
  inset: 142px;
  border-color: rgba(166, 137, 102, 0.5);
  box-shadow: 0 16px 40px rgba(48, 46, 42, 0.16);
}

.ai-orbit__core {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 154px;
  height: 154px;
  border: 4px solid rgba(166, 137, 102, 0.72);
  border-radius: 50%;
  background: #f7f5f0;
  transform: translate(-50%, -50%);
  font-size: 30px;
  font-weight: 800;
  box-shadow: 0 18px 38px rgba(48, 46, 42, 0.13);
}

.ai-orbit__node {
  position: absolute;
  display: grid;
  place-items: center;
  width: 122px;
  height: 122px;
  border: 1px solid rgba(166, 137, 102, 0.55);
  border-radius: 50%;
  background: #f6f4ef;
  box-shadow: 0 14px 34px rgba(48, 46, 42, 0.16), inset 0 0 0 6px rgba(255,255,255,0.54);
  font-size: 22px;
}

.ai-orbit__node b {
  display: block;
  color: #1f1f1d;
  font-family: var(--sans);
  font-size: 34px;
  font-weight: 400;
  line-height: 1;
}

.ai-orbit__node span {
  margin-top: -8px;
}

.node-top { left: 209px; top: 4px; }
.node-right-top { right: 14px; top: 126px; }
.node-right-bottom { right: 24px; bottom: 82px; }
.node-bottom { left: 209px; bottom: 0; }
.node-left-bottom { left: 22px; bottom: 82px; }
.node-left-top { left: 22px; top: 126px; }

.p-axis {
  position: absolute;
  right: 154px;
  top: 150px;
  width: 250px;
  padding-left: 38px;
  border-left: 1px solid rgba(70, 67, 61, 0.28);
}

.p-axis p {
  margin-bottom: 42px;
  color: #2b2925;
  font-family: Georgia, serif;
  font-size: 18px;
  letter-spacing: 0.04em;
}

.p-axis p em {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 14px;
  border-radius: 50%;
  background: var(--gold-strong);
}

.p-axis div {
  position: relative;
  margin: 0 0 42px;
}

.p-axis div::before {
  content: "";
  position: absolute;
  left: -44px;
  top: 12px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #8f8d87;
}

.p-axis div:first-of-type::before {
  border: 3px solid var(--gold-strong);
  background: transparent;
}

.p-axis strong {
  display: block;
  color: #9f7e45;
  font-family: Georgia, serif;
  font-size: 31px;
  font-weight: 400;
}

.p-axis span {
  display: block;
  font-size: 21px;
}

/* Laptop range (1321–1699px): the orbit (left:735,w:540) and the right-anchored
   p-axis only clear each other at >=1700px. Shrink the orbit and pull the axis
   to the edge so they don't collide on common laptop widths. */
@media (min-width: 1321px) and (max-width: 1699px) {
  .template-ai-brand .screen-copy--left { width: 540px; }
  .template-ai-brand .ai-orbit {
    left: 585px;
    transform: scale(0.8);
    transform-origin: center center;
  }
  .template-ai-brand .p-axis { right: 40px; width: 205px; }
}

.screen-materials {
  position: absolute;
}

.screen-materials--ai {
  right: 92px;
  bottom: -22px;
  width: 520px;
  height: 310px;
}

.doc-card,
.manual,
.name-card,
.note-card {
  position: absolute;
  border: 1px solid rgba(166, 137, 102, 0.24);
  background: #f8f6f1;
  box-shadow: 0 20px 46px rgba(44, 42, 38, 0.17);
}

.doc-card--black,
.manual--black {
  color: #e7dfd0;
  background:
    linear-gradient(135deg, rgba(180,149,89,.18), transparent 42%),
    #242421;
}

.doc-card--black {
  left: 78px;
  bottom: 8px;
  z-index: 3;
  width: 190px;
  height: 220px;
  padding: 58px 24px 20px;
  transform: rotate(4deg);
}

.doc-card--black span,
.doc-card--black small {
  display: block;
  color: rgba(231, 223, 208, 0.7);
  font-size: 12px;
  letter-spacing: 0.08em;
}

.doc-card--black b {
  display: block;
  margin: 20px 0 8px;
  font-size: 23px;
  line-height: 1.24;
}

.doc-card--white {
  width: 210px;
  height: 235px;
  padding: 26px;
}

.doc-card--map {
  left: 214px;
  top: 18px;
  transform: rotate(8deg);
}

.doc-card--visual {
  right: 6px;
  top: 52px;
  transform: rotate(4deg);
}

.doc-card--white b {
  display: block;
  font-size: 17px;
}

.doc-card--white i,
.doc-card--table i {
  display: block;
  height: 110px;
  margin-top: 28px;
  background:
    repeating-linear-gradient(90deg, rgba(166,137,102,.22) 0 16px, transparent 16px 26px),
    linear-gradient(rgba(40,40,38,.12), rgba(40,40,38,.12));
  opacity: .72;
}

.brand-coin {
  position: absolute;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 132px;
  height: 132px;
  border: 4px solid rgba(166, 137, 102, 0.55);
  border-radius: 50%;
  background: radial-gradient(circle, #efeae0, #d8d1c4);
  box-shadow: 0 18px 36px rgba(44, 42, 38, 0.19);
}

.brand-coin img {
  width: 88px;
  height: 76px;
  object-fit: contain;
}

.screen-materials--ai .brand-coin {
  right: 66px;
  bottom: 0;
}

.screen-product {
  display: grid;
  grid-template-columns: 500px 1fr;
  gap: 34px;
  padding-left: 64px;
  padding-right: 34px;
}

.screen-copy--product {
  position: relative;
  z-index: 2;
  padding-top: 16px;
}

.screen-copy--product h1 {
  margin: 56px 0 12px;
  font-size: 76px;
}

.screen-copy--product .screen-lead {
  margin-bottom: 34px;
}

.manual-stack {
  position: relative;
  height: 232px;
  margin-top: 18px;
}

.manual {
  width: 170px;
  height: 218px;
  padding: 28px 24px;
}

.manual img {
  width: 34px;
  height: 30px;
  margin-bottom: 34px;
}

.manual b {
  display: block;
  font-size: 18px;
  line-height: 1.4;
}

.manual--black {
  left: 4px;
  bottom: 0;
  z-index: 3;
}

.manual--white {
  left: 142px;
  bottom: 18px;
  color: #4a4741;
  transform: rotate(-3deg);
}

.manual--photo {
  left: 250px;
  bottom: 8px;
  width: 130px;
  background:
    linear-gradient(135deg, transparent 0 42%, rgba(44,44,42,.2) 43% 44%, transparent 45%),
    repeating-linear-gradient(90deg, rgba(80,80,78,.15) 0 1px, transparent 1px 18px),
    #ddd9d0;
  transform: rotate(5deg);
}

.choice-card {
  position: absolute;
  left: 364px;
  top: 364px;
  z-index: 4;
  width: 198px;
  min-height: 316px;
  padding: 34px 24px;
  border: 1px solid rgba(166,137,102,.32);
  background: rgba(250,248,244,.84);
  box-shadow: 0 18px 46px rgba(44, 42, 38, 0.09);
}

.screen-actions--product {
  margin-top: 4px;
  gap: 26px;
}

.screen-actions--product .screen-btn {
  height: 60px;
}

.screen-actions--product .screen-btn--light {
  height: 60px;
  padding: 0 28px;
  border-width: 1px;
}

.screen-actions--product .screen-btn span {
  font-size: 22px;
}

.choice-card h2 {
  color: #9f7e45;
  font-size: 17px;
  font-weight: 500;
}

.choice-card div {
  margin-top: 26px;
  padding-left: 34px;
}

.choice-card b {
  display: block;
  font-size: 15px;
}

.choice-card span {
  color: #64605a;
  font-size: 12px;
  line-height: 1.65;
}

.product-board {
  position: relative;
  z-index: 1;
  align-self: start;
  padding-top: 10px;
}

/* Laptop widths (1321-1700): no <=1320 mobile reflow applies yet, so the
   absolutely-positioned choice-card sits at its 1700px-canvas spot and covers
   the lead copy. Drop it into the left column's flow under the copy; let the
   board span the right column. */
@media (min-width: 1321px) and (max-width: 1700px) {
  .screen-product {
    grid-template-columns: 452px 1fr;
    align-items: start;
  }
  .screen-copy--product {
    grid-row: 1;
    grid-column: 1;
  }
  .choice-card {
    position: static;
    grid-row: 2;
    grid-column: 1;
    width: auto;
    min-height: 0;
    margin-top: 30px;
  }
  .product-board {
    grid-row: 1 / span 2;
    grid-column: 2;
  }
}

.phase-ribbon {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 82px;
  border: 1px solid rgba(80, 76, 70, 0.18);
  background: rgba(255,255,255,.26);
}

.phase-ribbon div {
  position: relative;
  padding: 16px 16px 14px 26px;
  border-right: 1px solid rgba(80, 76, 70, 0.18);
}

.phase-ribbon div:last-child {
  border-right: 0;
}

.phase-ribbon b {
  color: #9f7e45;
  font-family: Georgia, serif;
  font-size: 28px;
  font-weight: 400;
}

.phase-ribbon strong {
  margin-left: 8px;
  font-size: 18px;
}

.phase-ribbon span {
  display: block;
  color: #66625b;
  font-size: 13px;
}

.product-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  min-height: 554px;
  margin-top: 18px;
  border: 1px solid rgba(80, 76, 70, 0.18);
}

.product-tiers article {
  padding: 34px 36px 28px;
  border-right: 1px solid rgba(80, 76, 70, 0.14);
  background: rgba(255,255,255,.18);
}

.product-tiers article:last-child {
  border-right: 0;
}

.product-tiers article.is-featured {
  border: 1px solid rgba(166,137,102,.86);
  background: rgba(255,255,255,.32);
  transform: translateY(-1px);
}

.product-tiers span,
.product-tiers h3 {
  color: #9f7e45;
}

.product-tiers h2 {
  margin: 8px 0 4px;
  font-size: 42px;
  line-height: 1.1;
}

.product-tiers h3 {
  font-size: 21px;
  font-weight: 400;
}

.tier-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 44px 0 26px;
}

.tier-tags i {
  padding: 6px 12px;
  border: 1px solid rgba(166,137,102,.36);
  background: rgba(238,235,229,.6);
  color: #8b8071;
  font-size: 13px;
  font-style: normal;
  white-space: nowrap;
}

.product-tiers ul {
  min-height: 118px;
  padding-left: 18px;
  border-top: 1px solid rgba(80, 76, 70, 0.15);
  padding-top: 22px;
  font-size: 15px;
  line-height: 1.9;
}

.tier-icons {
  padding-top: 18px;
  border-top: 1px solid rgba(80, 76, 70, 0.15);
  color: #1f1f1d;
  font-family: var(--sans);
  font-size: 24px !important;
  letter-spacing: 0.6em;
}

.product-note {
  display: flex;
  align-items: center;
  gap: 22px;
  height: 72px;
  margin-top: 16px;
  padding: 0 28px;
  border: 1px solid rgba(80, 76, 70, 0.18);
  color: #5b5750;
  font-size: 18px;
}

.product-note img {
  width: 38px;
  height: 32px;
  object-fit: contain;
}

.product-note span {
  margin-left: auto;
  color: #77716a;
  font-family: Georgia, serif;
  font-size: 12px;
  letter-spacing: .14em;
}

.screen-solutions {
  display: block;
  padding-left: 66px;
  padding-right: 58px;
}

.solutions-left h1 {
  margin: 40px 0 0;
  font-size: 76px;
}

.solutions-left p {
  max-width: 445px;
}

.photo-mosaic {
  position: absolute;
  left: 66px;
  top: 192px;
  display: block;
  width: 815px;
  height: 690px;
  margin-top: 0;
  overflow: visible;
}

.photo,
.photo-doc {
  position: absolute;
  overflow: hidden;
  background: #d7d4cc;
  filter: grayscale(1);
}

.photo {
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 22px 42px rgba(45,43,39,.14);
}

.photo::before,
.photo::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.photo--factory {
  right: 0;
  top: 6px;
  width: 330px;
  height: 188px;
  clip-path: polygon(8% 0, 100% 0, 91% 100%, 0 100%);
  background:
    linear-gradient(90deg, rgba(255,255,255,.18), transparent 15%, rgba(30,30,29,.32) 16%, transparent 20%),
    radial-gradient(circle at 76% 64%, rgba(34,34,33,.44) 0 25px, transparent 27px),
    repeating-linear-gradient(108deg, rgba(34,34,32,.36) 0 5px, transparent 5px 25px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.18) 0 2px, transparent 2px 22px),
    linear-gradient(135deg, #d3d0c9, #777671);
}

.photo--factory::before {
  left: 42px;
  top: 18px;
  width: 62px;
  height: 138px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent 0 42%, rgba(22,22,21,.62) 43% 56%, transparent 57%),
    linear-gradient(180deg, rgba(250,250,248,.2), rgba(20,20,20,.24));
  box-shadow:
    62px 24px 0 -16px rgba(26,26,25,.54),
    96px 66px 0 -20px rgba(26,26,25,.48);
  transform: rotate(31deg);
}

.photo--factory::after {
  left: 124px;
  bottom: 32px;
  width: 84px;
  height: 52px;
  border: 8px solid rgba(30,30,29,.5);
  border-radius: 16px 16px 12px 12px;
  transform: rotate(-12deg);
}

.photo--campus {
  left: 0;
  top: 230px;
  width: 412px;
  height: 250px;
  clip-path: polygon(0 0, 100% 0, 91% 100%, 0 100%);
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(0,0,0,.12)),
    linear-gradient(0deg, rgba(22,22,21,.24) 0 22%, transparent 23%),
    linear-gradient(140deg, transparent 0 48%, rgba(255,255,255,.34) 49% 53%, transparent 54%),
    repeating-linear-gradient(90deg, rgba(45,45,43,.24) 0 2px, transparent 2px 34px),
    repeating-linear-gradient(0deg, rgba(45,45,43,.16) 0 2px, transparent 2px 34px),
    #c8c3ba;
}

.photo--campus::before {
  left: 36px;
  bottom: 35px;
  width: 124px;
  height: 116px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.34) 0 8px, transparent 8px 20px),
    linear-gradient(180deg, rgba(37,37,36,.34), rgba(22,22,21,.1));
  box-shadow:
    110px -22px 0 -6px rgba(38,38,37,.28),
    208px 14px 0 -14px rgba(38,38,37,.24);
  clip-path: polygon(0 22%, 100% 0, 100% 100%, 0 100%);
}

.photo--meeting {
  left: 0;
  bottom: -24px;
  width: 392px;
  height: 236px;
  clip-path: polygon(0 0, 94% 0, 100% 100%, 0 100%);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.12)),
    url("/static/img/source-assets/vi-reception-wall-fresh.e127f3d701ac.jpg") center / cover no-repeat,
    radial-gradient(circle at 20% 72%, rgba(24,24,23,.62) 0 16px, transparent 17px),
    radial-gradient(circle at 38% 72%, rgba(24,24,23,.54) 0 15px, transparent 16px),
    radial-gradient(circle at 56% 71%, rgba(24,24,23,.54) 0 15px, transparent 16px),
    radial-gradient(circle at 74% 72%, rgba(24,24,23,.48) 0 14px, transparent 15px),
    radial-gradient(circle at 88% 72%, rgba(24,24,23,.42) 0 13px, transparent 14px),
    linear-gradient(0deg, rgba(28,28,26,.36) 0 43%, transparent 44%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 28px, transparent 28px 56px),
    linear-gradient(#d3cec5, #aaa397);
}

.photo--meeting::before {
  left: 50px;
  bottom: 34px;
  width: 245px;
  height: 28px;
  background: rgba(26,26,25,.36);
  box-shadow: 0 13px 0 rgba(26,26,25,.18);
  transform: skewX(-8deg);
}

.photo--meeting::after {
  left: 72px;
  top: 24px;
  width: 184px;
  height: 62px;
  border: 1px solid rgba(255,255,255,.56);
  background: linear-gradient(180deg, rgba(245,244,240,.56), rgba(232,231,226,.38));
  box-shadow: 0 12px 22px rgba(26,26,24,.16);
}

.photo-doc {
  display: block;
  min-height: 116px;
  padding: 26px 24px;
  border: 1px solid rgba(80,76,70,.13);
  color: #3e3a34;
  font-size: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(242,240,235,.92)),
    repeating-linear-gradient(0deg, transparent 0 13px, rgba(51,51,51,.035) 13px 14px);
  box-shadow: 0 20px 38px rgba(45,43,39,.15);
}

.photo-doc b,
.photo-doc span {
  position: relative;
  z-index: 1;
  display: block;
}

.photo-doc b {
  font-size: 19px;
  line-height: 1.3;
}

.photo-doc span {
  margin-top: 8px;
  color: rgba(70,67,61,.55);
  font-family: Georgia, serif;
  font-size: 10px;
  letter-spacing: .12em;
}

.photo-doc::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 20px;
  height: 46px;
  background: repeating-linear-gradient(90deg, rgba(166,137,102,.22) 0 13px, transparent 13px 23px);
}

.photo-doc--top {
  right: 160px;
  top: 24px;
  z-index: 4;
  width: 224px;
  height: 178px;
  transform: rotate(-5deg);
}

.photo-doc--top::before {
  content: "";
  position: absolute;
  left: 48px;
  bottom: 28px;
  width: 78px;
  height: 88px;
  opacity: .35;
  background:
    repeating-linear-gradient(90deg, rgba(70,70,68,.42) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(0deg, rgba(70,70,68,.28) 0 1px, transparent 1px 12px);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.photo-doc--dark {
  right: 42px;
  top: 8px;
  z-index: 3;
  width: 230px;
  height: 170px;
  transform: rotate(4deg);
  color: #eee7dc;
  background:
    linear-gradient(115deg, #242421 0 58%, rgba(166,137,102,.22) 59%),
    #242421;
}

.photo-doc--dark span {
  color: rgba(238,231,220,.62);
}

.photo-doc--grid {
  left: 400px;
  top: 240px;
  z-index: 2;
  width: 214px;
  height: 190px;
}

.photo-doc--grid::after {
  height: 66px;
  background:
    linear-gradient(90deg, rgba(166,137,102,.14), transparent 33%, rgba(166,137,102,.14) 34% 66%, transparent 67%),
    repeating-linear-gradient(0deg, rgba(51,51,51,.08) 0 1px, transparent 1px 13px);
}

.photo-doc--map {
  right: -20px;
  top: 240px;
  z-index: 2;
  width: 236px;
  height: 190px;
}

.photo-doc--map::after {
  height: 72px;
  background:
    radial-gradient(circle at 28% 42%, rgba(166,137,102,.68) 0 5px, transparent 6px),
    radial-gradient(circle at 62% 30%, rgba(166,137,102,.68) 0 5px, transparent 6px),
    radial-gradient(circle at 72% 68%, rgba(166,137,102,.68) 0 5px, transparent 6px),
    linear-gradient(135deg, transparent 0 48%, rgba(51,51,51,.16) 49% 51%, transparent 52%),
    linear-gradient(25deg, transparent 0 45%, rgba(51,51,51,.12) 46% 48%, transparent 49%);
}

.photo-doc--list {
  left: 350px;
  bottom: 14px;
  z-index: 3;
  width: 224px;
  height: 168px;
  transform: rotate(-3deg);
}

.photo-doc--list::after {
  height: 82px;
  background:
    repeating-linear-gradient(0deg, rgba(51,51,51,.11) 0 1px, transparent 1px 16px),
    radial-gradient(circle at 15px 8px, rgba(166,137,102,.45) 0 5px, transparent 6px);
}

.photo-doc--circle {
  right: 24px;
  bottom: 6px;
  z-index: 2;
  width: 226px;
  height: 170px;
  transform: rotate(4deg);
}

.photo-doc--circle::after {
  left: 58px;
  right: auto;
  bottom: 30px;
  width: 92px;
  height: 70px;
  background:
    radial-gradient(circle at 50% 50%, rgba(166,137,102,.72) 0 15px, transparent 16px),
    radial-gradient(circle at 18% 18%, rgba(51,51,51,.2) 0 13px, transparent 14px),
    radial-gradient(circle at 84% 22%, rgba(51,51,51,.2) 0 13px, transparent 14px),
    radial-gradient(circle at 24% 82%, rgba(51,51,51,.2) 0 13px, transparent 14px),
    radial-gradient(circle at 82% 82%, rgba(51,51,51,.2) 0 13px, transparent 14px);
}

.photo-mosaic__coin {
  right: 14px;
  bottom: 14px;
  z-index: 6;
  width: 96px;
  height: 96px;
}

.photo-mosaic__coin img {
  width: 70px;
  height: 62px;
}

.photo--factory {
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.12)),
    url("/static/img/source-assets/vi-marketing-folded.1adcb4e74638.jpg") center 52% / cover no-repeat;
}

.photo--campus {
  background:
    linear-gradient(180deg, rgba(255,255,255,.1), rgba(0,0,0,.1)),
    url("/static/img/generated-assets/business-park-campus-v1.cc953cdf94b4.png") center / cover no-repeat;
}

.photo--meeting {
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.14)),
    url("/static/img/generated-assets/association-training-photo-v1.9216009cb0a9.png") center / cover no-repeat;
}

.photo--factory::before,
.photo--factory::after,
.photo--campus::before,
.photo--meeting::before,
.photo--meeting::after {
  display: none;
}

.template-solutions .photo,
.template-solutions .photo-doc {
  filter: grayscale(1) brightness(1) contrast(.78);
}

.solution-routes {
  position: absolute;
  right: 146px;
  top: 176px;
  width: 704px;
  padding-top: 0;
}

.solution-routes article {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 156px;
  gap: 18px;
  padding: 22px 0 45px;
  border-bottom: 1px solid rgba(80, 76, 70, 0.15);
}

.solution-routes article::after {
  content: "";
  position: absolute;
  right: 156px;
  top: 74px;
  width: 1px;
  height: 88px;
  background: rgba(80, 76, 70, 0.15);
}

.solution-routes h2 {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 31px;
}

.route-icons {
  display: flex;
  align-items: center;
  gap: 12px;
}

.route-icons span {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border: 1px solid rgba(166,137,102,.5);
  border-radius: 50%;
  color: #222;
  font-family: var(--sans);
  font-size: 28px;
}

.route-icons span b {
  position: absolute;
  margin-top: 108px;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 500;
}

.route-icons i,
.deliver-process i {
  flex: 1;
  min-width: 28px;
  height: 1px;
  border-top: 1px dashed rgba(166,137,102,.7);
}

.solution-routes a {
  align-self: center;
  justify-self: end;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(166,137,102,.8);
  color: #9f7e45;
  font-size: 18px;
}

@media (min-width: 1321px) {
  .solution-routes h2 {
    padding-left: 125px;
  }

  .solution-routes .route-icons {
    margin-left: 125px;
    gap: 8px;
  }

  .solution-routes .route-icons span {
    width: 64px;
    height: 64px;
    font-size: 23px;
  }

  .solution-routes .route-icons i {
    min-width: 10px;
  }
}

/* Laptop range: the 815px mosaic and the right-anchored routes only clear each
   other at >=1606px. Shrink the mosaic and pull the routes in so they don't
   collide on common laptop widths. */
@media (min-width: 1321px) and (max-width: 1605px) {
  .template-solutions .photo-mosaic {
    top: 252px;
    transform: scale(0.74);
    transform-origin: top left;
  }
  .template-solutions .solutions-left h1,
  .template-solutions .solutions-left > .screen-rule,
  .template-solutions .solutions-left > p {
    position: relative;
    z-index: 3;
  }
  .template-solutions .solution-routes {
    right: 70px;
    width: 680px;
  }
}

.vertical-caption {
  position: absolute;
  right: 38px;
  top: 190px;
  writing-mode: vertical-rl;
  color: #59554e;
  font-family: Georgia, serif;
  font-size: 18px !important;
  letter-spacing: .06em;
}

.vertical-caption::before,
.vertical-caption::after {
  content: "";
  display: block;
  width: 1px;
  height: 92px;
  margin: 18px auto;
  background: rgba(80, 76, 70, 0.24);
}

.screen-about,
.screen-contact {
  padding-left: 144px;
}

.side-manifest {
  position: absolute;
  left: 36px;
  top: 172px;
  writing-mode: vertical-rl;
  color: #66625b;
  font-family: Georgia, serif;
  font-size: 16px !important;
  letter-spacing: .06em;
}

.side-manifest img {
  width: 34px;
  height: 30px;
  margin: 0 0 18px;
  object-fit: contain;
}

.about-copy,
.contact-copy {
  position: absolute;
  left: 136px;
  top: 285px;
  z-index: 2;
  width: 430px;
}

.about-copy {
  top: 256px;
  width: 520px;
}

.about-copy h1,
.contact-copy h1 {
  font-size: 74px;
}

.about-copy h1 {
  white-space: nowrap;
}

.template-about .about-copy h1 {
  color: #46433d;
  font-weight: 700;
  text-shadow: none;
}

.about-panel {
  position: absolute;
  right: 40px;
  top: 162px;
  display: grid;
  grid-template-columns: 475px 536px;
  width: 1010px;
  height: 710px;
  min-height: 0;
  border: 1px solid rgba(80,76,70,.18);
  background: rgba(255,255,255,.28);
}

.about-panel section {
  padding: 54px 42px;
}

.about-panel h2 {
  font-size: 25px;
  white-space: nowrap;
}

.about-panel h3 {
  margin: 42px 0 8px;
  color: #9f7e45;
  font-size: 24px;
}

.about-panel ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-panel li {
  padding: 10px 0;
  border-bottom: 1px dashed rgba(80,76,70,.18);
  font-size: 20px;
}

.about-panel li b {
  margin-right: 18px;
  color: #9f7e45;
}

.value-icons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.value-icons span {
  display: grid;
  place-items: center;
  color: #252523;
  font-family: var(--sans);
  font-size: 34px;
}

.value-icons b {
  margin-top: 0;
  font-family: var(--serif);
  font-size: 19px;
}

.value-icons span {
  position: relative;
  padding-top: 68px;
  font-size: 0;
}

.value-icons span::before {
  position: absolute;
  top: 0;
  left: 50%;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  transform: translateX(-50%);
  border: 1px solid rgba(80,76,70,.24);
  border-radius: 50%;
  color: #252523;
  font-family: var(--sans);
  font-size: 27px;
}

.value-icons span:nth-child(1)::before { content: "◇"; }
.value-icons span:nth-child(2)::before { content: "♧"; }
.value-icons span:nth-child(3)::before { content: "◎"; }
.value-icons span:nth-child(4)::before { content: "☆"; }

.about-panel aside,
.contact-scene {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #d6d1c8 0 48%, #bdb5aa 48% 100%);
}

.showroom {
  position: absolute;
  inset: 0 0 auto;
  height: 300px;
  padding: 110px 80px 0 230px;
  background:
    linear-gradient(90deg, rgba(60,55,48,.12), transparent 20%),
    linear-gradient(#cfc8bc, #bdb5aa);
}

.showroom img {
  position: absolute;
  left: 130px;
  top: 96px;
  width: 74px;
  height: 64px;
  object-fit: contain;
}

.showroom b {
  display: block;
  font-size: 30px;
}

.showroom span {
  display: block;
  margin-top: 8px;
  font-size: 18px;
}

.showroom--logo {
  padding: 0;
}

.showroom--logo img {
  left: 76px;
  top: 102px;
  width: 360px;
  height: 96px;
  object-position: left center;
}

.about-panel .showroom--logo {
  height: 338px;
  background:
    linear-gradient(90deg, rgba(55,50,44,.34) 0 24%, transparent 24%),
    repeating-linear-gradient(90deg, rgba(58,54,49,.2) 0 2px, transparent 2px 18px),
    linear-gradient(180deg, #d8d2c5 0 68%, #c3baad 68% 100%);
}

.template-about .about-panel .showroom--logo {
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(35,32,28,.1)),
    url("/static/img/generated-assets/about-reception-wall-clean-v2.0b00a65bbe0b.png") center 20% / cover no-repeat;
  filter: brightness(1.04) contrast(.82);
}

.about-panel .showroom--logo img {
  left: 220px;
  top: 140px;
  width: 276px;
  height: 76px;
}

.template-about .about-panel .showroom--logo img {
  display: block;
  left: 180px;
  top: 128px;
  width: 340px;
  height: auto;
  opacity: .72;
  filter: grayscale(1) drop-shadow(0 10px 10px rgba(36, 32, 28, .18));
  mix-blend-mode: multiply;
}

.about-kit {
  position: absolute;
  left: 46px;
  right: 28px;
  bottom: 30px;
  height: 310px;
}

.template-about .about-kit {
  left: 0;
  right: 0;
  bottom: 0;
  height: 372px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(45,42,36,.08)),
    url("/static/img/generated-assets/about-collateral-blank-v2.7ec9f7ef6412.png") center / cover no-repeat;
  filter: brightness(1.08) contrast(.9);
}

@media (min-width: 901px) {
  .template-about .about-kit {
    translate: 8px 0;
  }
}

.template-about .about-kit .manual--white,
.template-about .about-kit .name-card,
.template-about .about-kit .doc-card--black {
  display: none;
}

.template-about .about-kit .brand-coin {
  right: 145px;
  bottom: 30px;
  width: 112px;
  height: 112px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.template-about .about-kit .brand-coin img {
  width: 78px;
  height: 70px;
  opacity: .82;
}

.about-kit .manual--white {
  left: 30px;
  bottom: 0;
  width: 170px;
  height: 250px;
}

.about-kit .name-card {
  left: 250px;
  top: 52px;
}

.about-kit .doc-card--black {
  left: auto;
  right: 10px;
  bottom: 10px;
  transform: none;
}

.about-kit .brand-coin {
  right: 118px;
  bottom: 0;
}

.name-card {
  width: 160px;
  height: 88px;
  padding: 22px 18px 0 58px;
  color: #ede6da;
  background: #242421;
  font-size: 15px;
  line-height: 1.35;
}

.name-card img {
  position: absolute;
  left: 18px;
  top: 22px;
  width: 28px;
  height: 24px;
  object-fit: contain;
}

.screen-contact {
  padding-bottom: 130px;
}

/* About: the 520px copy + 1010px panel only clear each other at ~1706px (the
   design canvas). Below that they overlap, so stack the panel under the copy. */
@media (min-width: 1321px) and (max-width: 1705px) {
  .template-about .screen-about {
    height: auto;
    min-height: 0;
    padding-bottom: 88px;
    overflow: visible;
  }
  .template-about .about-copy {
    position: relative;
    inset: auto;
    margin-bottom: 52px;
  }
  .template-about .about-panel {
    position: relative;
    inset: auto;
    margin: 0;
  }
}

/* Contact: copy + form + photo scene only clear each other near the ~1700px
   design canvas; below it the scene's cards punch through the form. Re-flow as
   a 2-col grid (copy | form, then full-width scene, then strip). */
@media (min-width: 1321px) and (max-width: 1705px) {
  .template-contact .screen-contact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 40px 44px;
    height: auto;
    min-height: 0;
    padding-bottom: 72px;
    overflow: visible;
  }
  .template-contact .contact-copy,
  .template-contact .diagnosis-form,
  .template-contact .contact-scene,
  .template-contact .contact-strip {
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: auto;
    margin: 0;
  }
  .template-contact .contact-scene,
  .template-contact .contact-strip {
    grid-column: 1 / -1;
  }
  .template-contact .contact-scene {
    height: 480px;
    max-width: 900px;
  }
}

.template-contact .contact-copy {
  left: 144px;
  top: 164px;
  width: 500px;
}

.template-contact .contact-copy h1 {
  font-size: 66px;
}

.template-contact .contact-copy > p {
  max-width: 470px;
  font-size: 20px;
  line-height: 1.75;
}

.contact-flow {
  margin-top: 54px;
}

.contact-flow h2 {
  margin-bottom: 10px;
  font-size: 22px;
}

.contact-flow div {
  display: flex;
  gap: 22px;
  padding: 7px 0;
}

.contact-flow b {
  color: #9f7e45;
  font-family: Georgia, serif;
  font-size: 28px;
  font-weight: 400;
}

.contact-flow span {
  display: block;
  line-height: 1.25;
  font-size: 20px;
}

.contact-flow small {
  display: block;
  color: #716b62;
  font-size: 12px;
  line-height: 1.45;
}

.diagnosis-form {
  position: absolute;
  left: 600px;
  top: 146px;
  z-index: 4;
  width: 532px;
  min-height: 0;
  padding: 44px 46px 30px;
  border: 1px solid rgba(166,137,102,.68);
  border-radius: 4px;
  background: rgba(249,247,242,.93);
  box-shadow: 0 24px 70px rgba(44,42,38,.16);
}

.diagnosis-form h2 {
  font-size: 34px;
}

.diagnosis-form .screen-rule {
  margin: 18px 0 24px;
}

.diagnosis-form label,
.diagnosis-form legend {
  display: block;
  margin-top: 14px;
  color: #2b2925;
  font-size: 15px;
}

.diagnosis-form input[type="text"],
.diagnosis-form input[type="email"] {
  width: 100%;
  height: 38px;
  margin-top: 8px;
  padding: 0 14px;
  border: 1px solid rgba(166,137,102,.48);
  background: rgba(255,255,255,.46);
}

.diagnosis-form fieldset {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 16px 0 20px;
  padding: 0;
  border: 0;
}

.diagnosis-form fieldset label {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 58px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid rgba(80,76,70,.18);
  font-size: 13px;
}

.diagnosis-form button {
  width: 100%;
  height: 58px;
  border-radius: 0;
}

.contact-scene {
  position: absolute;
  right: 10px;
  top: 146px;
  width: 530px;
  height: 638px;
}

.template-contact .contact-scene {
  background: #c6bdb1;
}

.template-contact .contact-scene::before,
.template-contact .contact-scene::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}

.template-contact .contact-scene::before {
  inset: 0 0 auto;
  z-index: 0;
  height: 48%;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(45,39,34,.08)),
    url("/static/img/source-assets/vi-reception-wall.e1cc44a4513a.jpg") center 20% / cover no-repeat;
}

.template-contact .contact-scene::after {
  bottom: 0;
  z-index: 1;
  height: 52%;
  border-top: 0;
  background: linear-gradient(180deg, rgba(242,238,230,.9), rgba(174,164,151,.96));
  opacity: 1;
}

.template-contact .contact-scene .showroom {
  z-index: 2;
  height: 48%;
  padding: 0;
  background: none;
}

.template-contact .contact-scene .showroom img {
  left: 170px;
  top: 86px;
  width: 280px;
  height: auto;
  object-fit: contain;
}

.contact-doc,
.calendar-doc {
  position: absolute;
  z-index: 3;
  width: 210px;
  height: 260px;
  padding: 54px 34px;
  background: #f5f1e9;
  box-shadow: 0 18px 44px rgba(44,42,38,.2);
  transform: rotate(-12deg);
}

.contact-doc {
  left: 42px;
  bottom: 38px;
  font-size: 25px;
}

.calendar-doc {
  right: -36px;
  bottom: 20px;
  transform: rotate(7deg);
}

.contact-scene .name-card {
  left: 64px;
  bottom: 74px;
  z-index: 4;
}

.contact-scene .brand-coin {
  right: 92px;
  bottom: 72px;
}

.template-contact .contact-doc,
.template-contact .calendar-doc,
.template-contact .contact-scene .name-card,
.template-contact .contact-scene .brand-coin {
  z-index: 3;
  opacity: 1;
}

.template-contact .contact-doc {
  left: 50px;
  bottom: 58px;
  width: 245px;
  height: 302px;
  padding: 66px 34px 28px;
  transform: rotate(-11deg);
  color: #282622;
  background: #f7f3ea;
  box-shadow: 0 22px 42px rgba(44,42,38,.22);
}

.template-contact .contact-doc::after {
  content: "";
  position: absolute;
  left: 54px;
  right: 38px;
  bottom: 36px;
  height: 150px;
  background:
    repeating-linear-gradient(90deg, rgba(82,82,78,.16) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(0deg, rgba(82,82,78,.11) 0 1px, transparent 1px 13px);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.template-contact .calendar-doc {
  right: -50px;
  bottom: 40px;
  width: 250px;
  height: 296px;
  transform: rotate(5deg);
  color: #686158;
  background: #f1eee7;
  box-shadow: 0 20px 40px rgba(44,42,38,.18);
}

.template-contact .calendar-doc::after {
  content: "";
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 40px;
  height: 150px;
  background:
    repeating-linear-gradient(0deg, rgba(166,137,102,.16) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(80,76,70,.1) 0 1px, transparent 1px 42px);
}

.template-contact .contact-scene .name-card {
  left: 40px;
  bottom: 76px;
  z-index: 5;
  color: #efe8dc;
  background: #242421;
  box-shadow: 0 16px 28px rgba(30,28,25,.24);
}

.template-contact .contact-scene .brand-coin {
  right: 112px;
  bottom: 78px;
  z-index: 6;
  background: #e7dfd1;
  box-shadow: 0 16px 28px rgba(30,28,25,.24);
}

.contact-strip {
  position: absolute;
  left: 675px;
  right: 74px;
  bottom: 36px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  min-height: 86px;
  border: 1px solid rgba(80,76,70,.16);
  background: rgba(250,248,244,.82);
}

.contact-strip div {
  padding: 12px 32px;
  border-right: 1px solid rgba(80,76,70,.18);
}

.contact-strip div:last-child {
  border-right: 0;
}

.contact-strip b,
.contact-strip span {
  display: block;
}

.contact-strip b {
  font-size: 20px;
}

.contact-strip span {
  color: #5f5b55;
  font-size: 15px;
  line-height: 1.45;
}

.screen-deliverables {
  padding-left: 52px;
  padding-right: 74px;
}

.deliver-copy {
  position: absolute;
  left: 52px;
  top: 130px;
  width: 345px;
}

.deliver-copy .screen-crumb {
  width: 390px;
  white-space: nowrap;
}

.screen-count {
  margin-top: 30px;
  color: #9f7e45 !important;
  font-family: Georgia, serif;
  font-size: 28px !important;
}

.deliver-copy h1 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 72px;
}

.deliver-copy .screen-rule {
  margin-top: 18px;
  margin-bottom: 24px;
}

.deliver-copy .screen-rule + p {
  font-size: 20px;
  line-height: 1.75;
}

.deliver-copy .screen-btn {
  margin: 26px 0 22px;
}

.deliver-grid {
  position: absolute;
  left: 455px;
  right: 102px;
  top: 118px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px 34px;
}

.deliver-grid article h2 {
  margin-bottom: 14px;
  font-size: 23px;
  font-weight: 600;
}

.deliver-grid article h2 b {
  color: #9f7e45;
  font-family: Georgia, serif;
  font-size: 26px;
  font-weight: 400;
}

.deliver-grid article p {
  margin-bottom: 0;
  font-size: 18px;
}

.deliver-media {
  position: relative;
  height: 224px;
  padding: 30px 34px;
  overflow: hidden;
  border: 1px solid rgba(80,76,70,.14);
  background: rgba(255,255,255,.76);
  box-shadow: 0 16px 34px rgba(44,42,38,.13);
}

.deliver-media strong {
  position: relative;
  z-index: 2;
  display: block;
  color: #252523;
  font-size: 19px;
}

.deliver-media > span {
  position: relative;
  z-index: 2;
  display: block;
  margin-top: 8px;
  color: #676159;
  font-size: 12px;
}

.media-report {
  padding-left: 78px;
  background:
    linear-gradient(112deg, rgba(248,247,243,.96) 0 50%, #262626 51% 100%);
}

.media-report > i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 28px;
  background: linear-gradient(90deg, #1f1f1f, #4a4a47 48%, #1f1f1f);
}

.media-report img {
  position: absolute;
  left: 58px;
  top: 22px;
  width: 28px;
  height: 24px;
  object-fit: contain;
  filter: grayscale(1);
}

.media-report::before {
  content: "";
  position: absolute;
  left: 142px;
  bottom: 26px;
  width: 82px;
  height: 94px;
  opacity: .34;
  background:
    repeating-linear-gradient(90deg, rgba(70,70,68,.42) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(0deg, rgba(70,70,68,.26) 0 1px, transparent 1px 12px);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.media-report::after {
  content: "";
  position: absolute;
  right: 30px;
  bottom: 24px;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, transparent 0 42%, rgba(255,255,255,.22) 43% 45%, transparent 46%),
    conic-gradient(rgba(166,137,102,.5), rgba(166,137,102,.12), rgba(255,255,255,.16), rgba(166,137,102,.5));
}

.template-deliverables .media-report {
  background:
    linear-gradient(90deg, rgba(248,246,241,.98) 0 55%, rgba(232,228,219,.96) 56% 100%),
    linear-gradient(180deg, #fbfaf7, #e6e1d7);
}

.template-deliverables .media-report::before {
  left: 62px;
  bottom: 18px;
  width: 118px;
  height: 132px;
  opacity: .55;
  background:
    linear-gradient(135deg, transparent 0 44%, rgba(85,82,76,.42) 45% 48%, transparent 49%),
    repeating-linear-gradient(0deg, rgba(75,72,66,.16) 0 1px, transparent 1px 13px),
    #f8f6f0;
  clip-path: polygon(0 0, 78% 0, 100% 100%, 0 100%);
  box-shadow: 0 16px 28px rgba(44,42,38,.18);
}

.template-deliverables .media-report::after {
  right: 22px;
  bottom: 20px;
  width: 154px;
  height: 142px;
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(166,137,102,.28) 0 30%, transparent 31%),
    repeating-linear-gradient(0deg, rgba(51,51,51,.12) 0 1px, transparent 1px 16px),
    linear-gradient(180deg, rgba(255,255,255,.9), rgba(238,234,226,.94));
  box-shadow: 0 18px 30px rgba(44,42,38,.16);
  transform: rotate(4deg);
}

.media-map,
.media-vi,
.media-calendar {
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(242,241,237,.92)),
    repeating-linear-gradient(0deg, transparent 0 15px, rgba(51,51,51,.035) 15px 16px);
}

.media-map div {
  position: absolute;
  left: 34px;
  right: 34px;
  bottom: 30px;
  height: 76px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.media-map div span {
  border: 1px solid rgba(51,51,51,.1);
  background:
    repeating-linear-gradient(0deg, rgba(51,51,51,.08) 0 1px, transparent 1px 12px),
    linear-gradient(180deg, rgba(166,137,102,.16), rgba(255,255,255,.6));
}

.media-map::after,
.media-vi::after {
  content: "";
  position: absolute;
  left: 34px;
  right: 34px;
  bottom: 14px;
  height: 9px;
  background: repeating-linear-gradient(90deg, rgba(166,137,102,.22) 0 18px, transparent 18px 29px);
}

.media-ppt {
  color: #efe8da;
  background:
    linear-gradient(112deg, #242424 0 56%, rgba(166,137,102,.28) 57%),
    linear-gradient(160deg, transparent 0 46%, rgba(255,255,255,.12) 47% 50%, transparent 51%),
    #242424;
}

.media-ppt strong,
.media-ppt > span {
  color: #f6f3ee;
}

.media-ppt i {
  position: absolute;
  left: 34px;
  bottom: 30px;
  width: 134px;
  height: 34px;
  background:
    radial-gradient(circle at 12% 50%, rgba(166,137,102,.84) 0 11px, transparent 12px),
    radial-gradient(circle at 38% 50%, rgba(166,137,102,.84) 0 11px, transparent 12px),
    radial-gradient(circle at 64% 50%, rgba(166,137,102,.84) 0 11px, transparent 12px),
    radial-gradient(circle at 90% 50%, rgba(166,137,102,.84) 0 11px, transparent 12px);
}

.media-ppt::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 160px;
  height: 140px;
  opacity: .54;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 1px, transparent 1px 20px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.16) 0 1px, transparent 1px 20px);
  clip-path: polygon(42% 0, 100% 100%, 0 100%);
}

.media-dashboard {
  padding: 24px;
  border: 9px solid #1f1f1f;
  border-radius: 20px;
  background: #f8f7f4;
}

.media-dashboard div {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 14px;
}

.media-dashboard div span {
  min-height: 30px;
  padding: 7px;
  color: #2f2d2a;
  background: rgba(166,137,102,.12);
  font-family: var(--latin);
  font-size: 8px;
}

.media-dashboard i {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  height: 58px;
  background:
    radial-gradient(circle at 82% 48%, transparent 0 22px, rgba(166,137,102,.48) 23px 29px, transparent 30px),
    linear-gradient(155deg, transparent 0 18%, rgba(51,51,51,.32) 19% 21%, transparent 22% 45%, rgba(166,137,102,.7) 46% 49%, transparent 50%),
    repeating-linear-gradient(0deg, rgba(51,51,51,.08) 0 1px, transparent 1px 18px);
}

.media-vi img {
  position: absolute;
  right: 36px;
  top: 34px;
  width: 82px;
  height: 66px;
  object-fit: contain;
  opacity: .8;
  filter: grayscale(1);
}

.media-vi span {
  position: absolute;
  left: 34px;
  bottom: 48px;
  color: rgba(51,51,51,.5);
  font-family: Georgia, serif;
  font-size: 36px;
}

.media-vi i {
  position: absolute;
  right: 34px;
  bottom: 44px;
  width: 94px;
  height: 36px;
  background: linear-gradient(90deg, #5d5d5a 0 28%, #d6d3ca 28% 54%, #a68b62 54% 76%, #1f1f1e 76%);
}

.media-calendar {
  overflow: visible;
}

.media-calendar::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 20px;
  background: repeating-linear-gradient(90deg, #3b3a38 0 5px, transparent 5px 20px);
}

.media-calendar div {
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}

.media-calendar div span {
  display: grid;
  place-items: center;
  min-height: 30px;
  color: rgba(51,51,51,.52);
  background: rgba(166,137,102,.12);
  border: 1px solid rgba(51,51,51,.08);
  font-size: 9px;
}

.template-deliverables .deliver-media {
  border: 0;
  background-color: transparent;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 96% auto;
  box-shadow: none;
  filter: drop-shadow(0 14px 16px rgba(44, 42, 38, .12));
  overflow: visible;
}

.template-deliverables .deliver-media > * {
  visibility: hidden;
}

/* The generated photo replaces the CSS placeholder; hide every placeholder
   pseudo decoration too (e.g. the calendar's spiral-binding bars), not just
   the child elements above. */
.template-deliverables .deliver-media::before,
.template-deliverables .deliver-media::after {
  display: none;
}

.template-deliverables .media-report {
  background-image: url("/static/img/generated-assets/deliverable-report-diagnosis-v2.251e0b9814bd.png");
  background-size: 90% auto;
}

.template-deliverables .media-report::before,
.template-deliverables .media-report::after {
  display: none;
}

.template-deliverables .media-map {
  background-image: url("/static/img/generated-assets/deliverable-strategy-map-trim-v1.935d1caf4298.png");
}

.template-deliverables .media-vi {
  background-image: url("/static/img/generated-assets/deliverable-vi-system-trim-v2.f02fbc71d990.png");
  background-size: 110% auto;
}

.template-deliverables .media-calendar {
  background-image: url("/static/img/generated-assets/deliverable-content-calendar-trim-v1.9a40e767bb9f.png");
}

.template-deliverables .media-ppt {
  background-image: url("/static/img/generated-assets/deliverable-sales-deck-trim-v1.83f414a3da5e.png");
}

.template-deliverables .media-dashboard {
  background-image: url("/static/img/generated-assets/deliverable-dashboard-tablet-trim-v1.080b4b8be295.png");
  background-size: 100% auto;
}

.template-deliverables .screen-building--left {
  opacity: .12;
}

.deliver-process {
  position: absolute;
  left: 466px;
  right: 220px;
  bottom: 48px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.deliver-process span {
  display: grid;
  place-items: center;
  min-width: 118px;
  color: #222;
  font-family: var(--sans);
  font-size: 30px;
}

.deliver-process b {
  margin-top: 8px;
  font-family: var(--serif);
  font-size: 19px;
}

.deliver-process small {
  color: #6e6961;
  font-family: var(--serif);
  font-size: 14px;
}

.solution-detail-screen {
  padding-left: 72px;
  padding-right: 66px;
}

.solution-detail-copy {
  position: absolute;
  left: 72px;
  top: 152px;
  width: 410px;
}

.solution-detail-copy h1 {
  margin-top: 66px;
  font-size: 58px;
}

.solution-detail-copy p {
  font-size: 18px;
}

.template-solution-detail .solution-detail-copy .screen-btn {
  min-width: 280px;
}

.solution-detail-core {
  position: absolute;
  left: 454px;
  top: 232px;
  z-index: 2;
  width: 540px;
}

.solution-challenges,
.solution-path-panel {
  border-top: 1px solid rgba(80,76,70,.18);
}

.solution-challenges h2,
.solution-path-panel h2,
.solution-detail-showcase h2 {
  margin: 0 0 20px;
  padding-top: 14px;
  color: #9f7e45;
  font-size: 20px;
  font-weight: 500;
}

.template-solution-enterprise .solution-detail-copy {
  top: 120px;
}

.template-solution-enterprise .solution-detail-showcase {
  top: 104px;
}

.solution-challenges > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid rgba(80,76,70,.12);
  border-left: 0;
  border-right: 0;
}

.solution-challenges article {
  min-height: 142px;
  padding: 22px 20px;
  border-right: 1px solid rgba(80,76,70,.1);
}

.solution-challenges article:last-child {
  border-right: 0;
}

.solution-challenges i {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
  border: 1px solid rgba(166,137,102,.48);
  border-radius: 50%;
  color: #242421;
  font-family: var(--sans);
  font-style: normal;
  font-size: 22px;
}

.solution-challenges h3,
.solution-path-steps h3 {
  margin: 0 0 7px;
  color: #252523;
  font-size: 18px;
  line-height: 1.2;
}

.solution-challenges p,
.solution-path-steps p {
  margin: 0;
  color: #676159;
  font-size: 13px;
  line-height: 1.65;
}

.solution-path-panel {
  margin-top: 48px;
}

.solution-path-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.solution-path-steps article {
  position: relative;
  min-height: 164px;
  text-align: center;
}

.solution-path-steps span {
  display: block;
  color: #9f7e45;
  font-family: Georgia, serif;
  font-size: 15px;
}

.solution-path-steps i {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  margin: 14px auto 14px;
  border: 1px solid rgba(166,137,102,.52);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(166,137,102,.2), transparent 42%),
    rgba(255,255,255,.42);
}

.solution-path-steps article:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: -12px;
  top: 47px;
  color: #b59a68;
  font-size: 20px;
}

.solution-detail-showcase {
  position: absolute;
  right: 78px;
  top: 150px;
  z-index: 1;
  width: 620px;
}

.solution-detail-showcase .detail-visual {
  min-height: 470px;
}

.solution-detail-board {
  position: absolute;
  left: 506px;
  right: 74px;
  top: 162px;
  display: grid;
  grid-template-columns: 48% 1fr;
  gap: 36px;
  min-height: 600px;
}

.detail-visual {
  position: relative;
  min-height: 600px;
}

.solution-detail-showcase .detail-visual {
  min-height: 472px;
}

.detail-photo {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  width: 430px;
  height: 292px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.58);
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
  box-shadow: 0 24px 44px rgba(45,43,39,.14);
  background:
    linear-gradient(90deg, rgba(255,255,255,.34), transparent 16%, rgba(30,30,30,.16) 17%, transparent 20%),
    radial-gradient(circle at 78% 62%, rgba(40,40,40,.36) 0 30px, transparent 31px),
    repeating-linear-gradient(110deg, rgba(38,38,36,.24) 0 5px, transparent 5px 30px),
    repeating-linear-gradient(0deg, rgba(48,48,45,.12) 0 2px, transparent 2px 24px),
    linear-gradient(135deg, #e0ddd6, #8c8b86);
  filter: grayscale(1);
}

.detail-photo span {
  position: absolute;
  left: 72px;
  bottom: 30px;
  padding: 10px 16px;
  color: rgba(255,255,255,.78);
  background: rgba(35,35,33,.42);
  font-size: 15px;
}

.template-solution-park .detail-photo {
  background:
    linear-gradient(180deg, rgba(255,255,255,.2), rgba(0,0,0,.08)),
    linear-gradient(140deg, transparent 0 48%, rgba(255,255,255,.42) 49% 53%, transparent 54%),
    repeating-linear-gradient(90deg, rgba(40,40,38,.16) 0 2px, transparent 2px 38px),
    repeating-linear-gradient(0deg, rgba(40,40,38,.12) 0 2px, transparent 2px 36px),
    #c8c4ba;
}

.template-solution-association .detail-photo {
  background:
    radial-gradient(circle at 22% 72%, rgba(30,30,30,.44) 0 17px, transparent 18px),
    radial-gradient(circle at 42% 72%, rgba(30,30,30,.34) 0 16px, transparent 17px),
    radial-gradient(circle at 64% 72%, rgba(30,30,30,.32) 0 16px, transparent 17px),
    radial-gradient(circle at 84% 72%, rgba(30,30,30,.28) 0 15px, transparent 16px),
    linear-gradient(0deg, rgba(40,40,40,.15) 0 42%, transparent 43%),
    #d7d2c8;
}

.detail-visual .doc-card--white {
  left: 34px;
  top: 202px;
  z-index: 4;
  width: 214px;
  height: 232px;
  transform: rotate(-2deg);
}

.detail-visual .doc-card--black {
  left: 238px;
  bottom: 70px;
  z-index: 5;
  width: 196px;
  height: 224px;
  transform: rotate(-5deg);
}

.doc-card--table {
  right: 2px;
  top: 242px;
  z-index: 3;
  width: 214px;
  height: 220px;
  padding: 28px;
  background: #f8f6f1;
}

.doc-card--list {
  right: 128px;
  top: 150px;
  z-index: 2;
  width: 214px;
  height: 212px;
  padding: 28px;
  transform: rotate(3deg);
}

.doc-card--list b {
  display: block;
  font-size: 17px;
}

.doc-card--list i {
  display: block;
  height: 92px;
  margin-top: 24px;
  background:
    repeating-linear-gradient(0deg, rgba(51,51,51,.1) 0 1px, transparent 1px 16px),
    radial-gradient(circle at 15px 8px, rgba(166,137,102,.44) 0 5px, transparent 6px);
}

.template-solution-park .doc-card--list i {
  background:
    linear-gradient(90deg, rgba(166,137,102,.16), transparent 33%, rgba(166,137,102,.16) 34% 66%, transparent 67%),
    repeating-linear-gradient(0deg, rgba(51,51,51,.08) 0 1px, transparent 1px 13px);
}

.template-solution-association .doc-card--list i {
  background:
    radial-gradient(circle at 50% 50%, rgba(166,137,102,.72) 0 15px, transparent 16px),
    radial-gradient(circle at 18% 18%, rgba(51,51,51,.2) 0 13px, transparent 14px),
    radial-gradient(circle at 84% 22%, rgba(51,51,51,.2) 0 13px, transparent 14px),
    radial-gradient(circle at 24% 82%, rgba(51,51,51,.2) 0 13px, transparent 14px),
    radial-gradient(circle at 82% 82%, rgba(51,51,51,.2) 0 13px, transparent 14px);
}

.detail-visual .brand-coin {
  right: 80px;
  bottom: 46px;
  z-index: 6;
}

.detail-stages {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  align-content: end;
}

.detail-stages article {
  min-height: 156px;
  padding: 28px;
  border: 1px solid rgba(80,76,70,.15);
  background: rgba(255,255,255,.28);
}

.detail-stages span {
  color: #9f7e45;
  font-family: Georgia, serif;
  font-size: 24px;
}

.detail-stages h2 {
  margin: 10px 0 8px;
  font-size: 23px;
}

.detail-stages p {
  color: #6b655d;
  font-size: 14px;
  line-height: 1.7;
}

.solution-detail-bottom {
  position: absolute;
  left: 454px;
  right: 72px;
  bottom: 44px;
  display: grid;
  grid-template-columns: 130px repeat(3, 1fr);
  border: 1px solid rgba(80,76,70,.15);
  background: rgba(250,248,244,.78);
}

.solution-detail-bottom b {
  display: grid;
  place-items: center;
  color: #9f7e45;
  font-size: 18px;
  font-weight: 500;
  border-right: 1px solid rgba(80,76,70,.12);
}

.solution-detail-bottom span {
  padding: 24px 26px;
  border-right: 1px solid rgba(80,76,70,.12);
  font-size: 17px;
}

.solution-detail-bottom strong {
  display: block;
  margin-bottom: 6px;
  color: #252523;
  font-size: 19px;
  font-weight: 600;
}

.solution-detail-bottom small {
  display: block;
  color: #6b655d;
  font-size: 13px;
  line-height: 1.55;
}

.solution-detail-bottom span:last-child {
  border-right: 0;
}

.solution-showcase-labels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid rgba(80,76,70,.14);
  background: rgba(250,248,244,.76);
}

.solution-showcase-labels span {
  padding: 14px 12px;
  border-right: 1px solid rgba(80,76,70,.12);
  color: #5d5851;
  font-size: 13px;
  text-align: center;
}

.solution-showcase-labels span:last-child {
  border-right: 0;
}

.template-solution-park .solution-challenges,
.template-solution-association .solution-challenges {
  display: none;
}

.template-solution-park .solution-detail-core,
.template-solution-association .solution-detail-core {
  left: 72px;
  top: 560px;
  width: 1035px;
}

.template-solution-park .solution-detail-core {
  left: 128px;
  top: 462px;
  width: 980px;
}

.template-solution-park .solution-path-panel,
.template-solution-association .solution-path-panel {
  margin-top: 0;
  border-top: 1px solid rgba(80,76,70,.16);
}

.template-solution-park .solution-path-panel h2,
.template-solution-association .solution-path-panel h2 {
  display: none;
}

.template-solution-park .solution-path-steps,
.template-solution-association .solution-path-steps {
  gap: 0;
  padding-top: 26px;
}

.template-solution-park .solution-path-steps article,
.template-solution-association .solution-path-steps article {
  min-height: 156px;
  padding: 0 14px 10px;
  text-align: center;
}

.template-solution-park .solution-path-steps span,
.template-solution-association .solution-path-steps span {
  font-size: 16px;
}

.template-solution-park .solution-path-steps h3,
.template-solution-association .solution-path-steps h3 {
  font-size: 16px;
}

.template-solution-park .solution-path-steps p,
.template-solution-association .solution-path-steps p {
  font-size: 11px;
  line-height: 1.42;
}

.template-solution-park .solution-path-steps p {
  display: none;
}

.template-solution-park .solution-path-steps article {
  height: 250px;
  min-height: 0;
  overflow: hidden;
}

.template-solution-park .solution-path-steps article > span,
.template-solution-park .solution-path-steps article > i,
.template-solution-park .solution-path-steps article > h3 {
  position: absolute;
  z-index: 2;
}

.template-solution-park .solution-path-steps span {
  left: 96px;
  top: 12px;
  width: auto;
  font-size: 18px;
  text-align: left;
}

.template-solution-park .solution-path-steps i {
  left: 28px;
  top: 0;
  margin: 0;
}

.template-solution-park .solution-path-steps h3 {
  left: 96px;
  top: 40px;
  width: 128px;
  margin: 0;
  font-size: 19px;
  line-height: 1.1;
  text-align: left;
}

.template-solution-park .solution-detail-copy {
  top: 116px;
  width: 560px;
}

.template-solution-park .solution-detail-copy h1 {
  margin-top: 28px;
  white-space: nowrap;
}

.template-solution-park .solution-detail-copy h1,
.template-solution-park .solution-detail-copy .screen-rule,
.template-solution-park .solution-detail-copy > p:not(.screen-crumb),
.template-solution-park .solution-detail-copy .screen-actions {
  margin-left: 72px;
}

.template-solution-park .solution-detail-copy .screen-rule {
  margin-top: 18px;
  margin-bottom: 24px;
}

.template-solution-park .solution-detail-copy .screen-actions {
  margin-top: 18px;
}

.template-solution-park .solution-path-steps i,
.template-solution-association .solution-path-steps i {
  width: 58px;
  height: 58px;
  margin: 10px auto 10px;
  border-color: rgba(166,137,102,.56);
  background:
    radial-gradient(circle at 50% 50%, rgba(166,137,102,.2) 0 22px, transparent 23px),
    rgba(255,255,255,.58);
}

.template-solution-park .solution-path-steps i {
  position: absolute;
  margin: 0;
  background: rgba(255,255,255,.64);
}

.template-solution-park .solution-path-steps i::before {
  content: "";
  position: absolute;
  inset: 15px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.template-solution-park .solution-path-steps article:nth-child(1) i::before {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23242421" stroke-width="1.55" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="8" cy="8" r="2.4"/%3E%3Ccircle cx="16" cy="8" r="2.4"/%3E%3Cpath d="M4.5 18v-1.4c0-2.2 1.8-4 4.5-4"/%3E%3Cpath d="M19.5 18v-1.4c0-2.2-1.8-4-4.5-4"/%3E%3Cpath d="M8.8 18v-1c0-1.8 1.4-3.1 3.2-3.1s3.2 1.3 3.2 3.1v1"/%3E%3C/svg%3E');
}

.template-solution-park .solution-path-steps article:nth-child(2) i::before {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23242421" stroke-width="1.55" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="12" cy="12" r="7.5"/%3E%3Ccircle cx="12" cy="12" r="3"/%3E%3Cpath d="M12 2.5v4"/%3E%3Cpath d="M12 17.5v4"/%3E%3Cpath d="M2.5 12h4"/%3E%3Cpath d="M17.5 12h4"/%3E%3C/svg%3E');
}

.template-solution-park .solution-path-steps article:nth-child(3) i::before {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23242421" stroke-width="1.55" stroke-linecap="round" stroke-linejoin="round"%3E%3Crect x="5" y="8" width="14" height="11" rx="1.5"/%3E%3Cpath d="M9 8V6.5A1.5 1.5 0 0 1 10.5 5h3A1.5 1.5 0 0 1 15 6.5V8"/%3E%3Cpath d="M5 12h14"/%3E%3Cpath d="M12 12v2"/%3E%3C/svg%3E');
}

.template-solution-park .solution-path-steps article:nth-child(4) i::before {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23242421" stroke-width="1.55" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M12 21s6-5.3 6-11a6 6 0 0 0-12 0c0 5.7 6 11 6 11Z"/%3E%3Ccircle cx="12" cy="10" r="2.2"/%3E%3C/svg%3E');
}

.template-solution-park .solution-path-steps article::before,
.template-solution-association .solution-path-steps article::before {
  content: "";
  display: block;
  height: 54px;
  margin: 0 0 10px;
  border: 1px solid rgba(80,76,70,.12);
  background:
    repeating-linear-gradient(0deg, rgba(51,51,51,.08) 0 1px, transparent 1px 14px),
    linear-gradient(130deg, rgba(166,137,102,.12), rgba(255,255,255,.56));
  box-shadow: 0 16px 26px rgba(44,42,38,.08);
}

.template-solution-park .solution-path-steps article:nth-child(1)::before {
  background:
    linear-gradient(140deg, transparent 0 48%, rgba(255,255,255,.42) 49% 52%, transparent 53%),
    repeating-linear-gradient(90deg, rgba(45,45,43,.16) 0 2px, transparent 2px 22px),
    #d3cec4;
}

.template-solution-park .solution-path-steps article::before {
  position: absolute;
  z-index: 1;
  left: 12px;
  right: 12px;
  top: 104px;
  height: 216px;
  margin: 0;
  border-color: rgba(80,76,70,.16);
  box-shadow: 0 12px 22px rgba(44,42,38,.08);
}

.template-solution-park .solution-path-steps article:not(:last-child)::after {
  top: 42px;
  z-index: 2;
}

.template-solution-park .solution-path-steps article:nth-child(2)::before {
  background:
    radial-gradient(circle at 78% 65%, rgba(166,137,102,.38) 0 26px, transparent 27px),
    repeating-linear-gradient(0deg, rgba(51,51,51,.1) 0 2px, transparent 2px 16px),
    #f3f1ec;
}

.template-solution-park .solution-path-steps article:nth-child(3)::before,
.template-solution-association .solution-path-steps article:nth-child(3)::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(166,137,102,.7) 0 15px, transparent 16px),
    radial-gradient(circle at 20% 30%, rgba(51,51,51,.16) 0 12px, transparent 13px),
    radial-gradient(circle at 80% 30%, rgba(51,51,51,.16) 0 12px, transparent 13px),
    radial-gradient(circle at 30% 76%, rgba(51,51,51,.16) 0 12px, transparent 13px),
    radial-gradient(circle at 74% 76%, rgba(51,51,51,.16) 0 12px, transparent 13px),
    #f3f1ec;
}

.template-solution-park .solution-path-steps article:nth-child(4)::before {
  background:
    radial-gradient(circle at 30% 44%, rgba(166,137,102,.62) 0 4px, transparent 5px),
    radial-gradient(circle at 62% 32%, rgba(166,137,102,.62) 0 4px, transparent 5px),
    radial-gradient(circle at 72% 68%, rgba(166,137,102,.62) 0 4px, transparent 5px),
    linear-gradient(135deg, transparent 0 48%, rgba(51,51,51,.16) 49% 51%, transparent 52%),
    #f3f1ec;
}

.template-solution-association .solution-path-steps article::before {
  display: none;
}

.template-solution-association .solution-detail-core {
  top: 476px;
  width: 560px;
}

.template-solution-association .solution-path-panel {
  border-top: 0;
}

.template-solution-association .solution-path-steps {
  padding-top: 0;
}

.template-solution-association .solution-path-steps article {
  min-height: 150px;
  padding: 0 10px;
}

.template-solution-association .solution-detail-copy .screen-actions {
  margin-top: 236px;
}

@media (min-width: 901px) {
  .template-solution-association .solution-detail-copy {
    translate: -8px 0;
  }
}

.template-solution-association .solution-path-steps i {
  position: relative;
  width: 54px;
  height: 54px;
  margin: 14px auto 12px;
  background: rgba(255,255,255,.64);
}

.template-solution-association .solution-path-steps i::before {
  content: "";
  position: absolute;
  inset: 14px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.template-solution-association .solution-path-steps article:nth-child(1) i::before {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23242421" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="12" cy="6.8" r="2.4"/%3E%3Ccircle cx="5.2" cy="9" r="2"/%3E%3Ccircle cx="18.8" cy="9" r="2"/%3E%3Cpath d="M7.2 18v-1.7c0-2.2 1.8-4 4.8-4s4.8 1.8 4.8 4V18"/%3E%3Cpath d="M2.8 17v-1.2c0-1.8 1.3-3.1 3.4-3.1"/%3E%3Cpath d="M21.2 17v-1.2c0-1.8-1.3-3.1-3.4-3.1"/%3E%3C/svg%3E');
}

.template-solution-association .solution-path-steps article:nth-child(2) i::before {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23242421" stroke-width="1.55" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M3 9.2 12 4l9 5.2-9 5.2L3 9.2Z"/%3E%3Cpath d="M7 11.6v4.1c2.8 1.8 7.2 1.8 10 0v-4.1"/%3E%3Cpath d="M20 10.2v5.4"/%3E%3C/svg%3E');
}

.template-solution-association .solution-path-steps article:nth-child(3) i::before {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23242421" stroke-width="1.55" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="12" cy="5" r="2.2"/%3E%3Ccircle cx="5" cy="18" r="2.2"/%3E%3Ccircle cx="19" cy="18" r="2.2"/%3E%3Cpath d="M11 7 6.2 16"/%3E%3Cpath d="M13 7 17.8 16"/%3E%3Cpath d="M7.2 18h9.6"/%3E%3C/svg%3E');
}

.template-solution-association .solution-path-steps article:nth-child(4) i::before {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23242421" stroke-width="1.55" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M4 14h3.6l7.9 4.5V5.5L7.6 10H4v4Z"/%3E%3Cpath d="M7.4 14 9 19H6.8l-1.3-5"/%3E%3Cpath d="M18.3 9.2c.9.7 1.4 1.7 1.4 2.8s-.5 2.1-1.4 2.8"/%3E%3Cpath d="M20.4 6.8c1.5 1.3 2.4 3.1 2.4 5.2s-.9 3.9-2.4 5.2"/%3E%3C/svg%3E');
}

.template-solution-park .solution-detail-showcase,
.template-solution-association .solution-detail-showcase {
  right: 54px;
  top: 132px;
  width: 680px;
}

.template-solution-association .solution-detail-showcase {
  right: 100px;
  top: 132px;
  width: 780px;
}

.template-solution-association .solution-detail-showcase h2 {
  position: absolute;
  left: -132px;
  top: 44px;
  z-index: 4;
  width: 180px;
  margin: 0;
  padding-top: 0;
  border: 0;
}

.template-solution-association .solution-detail-showcase h2::after {
  content: "会员品牌扫描\A品牌培训手册\A联合传播计划\A活动内容包";
  display: block;
  margin-top: 24px;
  color: #6f6960;
  font-size: 14px;
  line-height: 2.45;
  white-space: pre;
}

.template-solution-association .solution-detail-showcase h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50px;
  width: 108px;
  height: 116px;
  background:
    radial-gradient(circle at 3px 16px, #a98b55 0 3px, transparent 4px),
    radial-gradient(circle at 3px 48px, #a98b55 0 3px, transparent 4px),
    radial-gradient(circle at 3px 80px, #a98b55 0 3px, transparent 4px),
    radial-gradient(circle at 3px 112px, #a98b55 0 3px, transparent 4px);
}

.template-solution-park .solution-detail-showcase {
  right: 10px;
  top: 132px;
  width: 620px;
}

.template-solution-park .solution-detail-showcase h2 {
  display: none;
}

.template-solution-park .detail-photo,
.template-solution-park .detail-visual .doc-card--white,
.template-solution-park .detail-visual .doc-card--black,
.template-solution-park .doc-card--table,
.template-solution-park .doc-card--list,
.template-solution-park .detail-visual .brand-coin {
  filter: brightness(1.16) contrast(.84);
}

.template-solution-park .solution-detail-showcase .detail-visual,
.template-solution-association .solution-detail-showcase .detail-visual {
  min-height: 586px;
}

.template-solution-association .solution-detail-showcase .detail-visual {
  min-height: 604px;
}

@media (min-width: 901px) {
  .template-solution-association .solution-detail-showcase .detail-visual::before {
    content: "";
    position: absolute;
    left: -20px;
    top: 156px;
    z-index: 3;
    width: 960px;
    height: 540px;
    pointer-events: none;
    background: url("/static/img/generated-assets/association-collateral-stack-cutout-v2.7d7197bce081.png") left top / 960px auto no-repeat;
    opacity: .94;
    filter: brightness(1.2) contrast(.84) drop-shadow(0 14px 16px rgba(45, 43, 39, .09));
  }

  .template-solution-association .detail-visual .doc-card--white,
  .template-solution-association .detail-visual .doc-card--black,
  .template-solution-association .doc-card--table,
  .template-solution-association .doc-card--list {
    display: none;
  }

  .template-solution-association .detail-visual .brand-coin {
    left: 340px;
    top: 442px;
    right: auto;
    bottom: auto;
    z-index: 5;
    width: 150px;
    height: 126px;
    border: 0;
    background: transparent;
    box-shadow: none;
    opacity: .12;
  }

  .template-solution-association .detail-visual .brand-coin img {
    width: 118px;
    height: 100px;
  }
}

.template-solution-park .detail-photo,
.template-solution-association .detail-photo {
  right: 0;
  top: 0;
  width: 620px;
  height: 248px;
  clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
}

.template-solution-park .detail-photo {
  width: 570px;
  height: 300px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.1), rgba(0,0,0,.12)),
    url("/static/img/generated-assets/business-park-campus-v2.2c4ad1ef1f08.png") center 55% / cover no-repeat;
  filter: grayscale(1) brightness(1.04) contrast(.88);
}

.template-solution-park .detail-photo span {
  display: none;
}

.template-solution-park .vertical-caption {
  left: 22px;
  right: auto;
  top: 170px;
  font-size: 14px !important;
  letter-spacing: .03em;
}

.template-solution-association .detail-photo {
  right: 20px;
  width: 664px;
  height: 312px;
  clip-path: polygon(8% 0, 100% 0, 94% 100%, 0 100%);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.16)),
    url("/static/img/generated-assets/association-training-photo-v1.9216009cb0a9.png") center / cover no-repeat;
  filter: grayscale(1) brightness(.78) contrast(.82);
  opacity: .85;
}

.template-solution-association .detail-photo span {
  display: none;
}

.template-solution-association .detail-photo::before {
  content: "品牌共建 价值共享";
  position: absolute;
  left: 210px;
  top: 44px;
  z-index: 2;
  width: 188px;
  height: 78px;
  padding-top: 24px;
  color: rgba(35,35,33,.76);
  background: rgba(249,247,241,.9);
  font-size: 19px;
  text-align: center;
  box-shadow: 0 10px 18px rgba(44,42,38,.08);
}

.template-solution-association .detail-photo::after {
  content: "";
  position: absolute;
  left: 56px;
  right: 42px;
  bottom: 30px;
  height: 50px;
  background:
    radial-gradient(ellipse at 50% 0, rgba(248,245,239,.72) 0 42%, transparent 43%),
    linear-gradient(90deg, rgba(26,26,25,.42), rgba(246,242,236,.6), rgba(26,26,25,.34));
  box-shadow: 0 16px 12px rgba(35,34,32,.16);
}

.template-solution-park .detail-visual .doc-card--white,
.template-solution-association .detail-visual .doc-card--white {
  left: 118px;
  top: 194px;
  width: 226px;
  height: 244px;
}

.template-solution-park .detail-visual .doc-card--white {
  left: 64px;
  top: 292px;
  width: 214px;
  height: 270px;
  transform: rotate(-7deg);
}

.template-solution-association .detail-visual .doc-card--white {
  left: 40px;
  top: 240px;
  width: 190px;
  height: 292px;
  transform: rotate(-1deg);
}

.template-solution-park .doc-card--list,
.template-solution-association .doc-card--list {
  right: 102px;
  top: 204px;
  width: 230px;
  height: 228px;
}

.template-solution-park .doc-card--list {
  right: 38px;
  top: 302px;
  width: 236px;
  height: 248px;
  transform: rotate(3deg);
}

.template-solution-association .doc-card--list {
  right: 290px;
  top: 312px;
  width: 214px;
  height: 266px;
  transform: rotate(-2deg);
}

.template-solution-park .detail-visual .doc-card--black,
.template-solution-association .detail-visual .doc-card--black {
  left: 296px;
  bottom: 82px;
  width: 212px;
  height: 246px;
}

.template-solution-park .detail-visual .doc-card--black {
  left: 130px;
  top: 474px;
  bottom: auto;
  width: 234px;
  height: 288px;
  transform: rotate(-4deg);
}

.template-solution-association .detail-visual .doc-card--black {
  left: 470px;
  top: 210px;
  bottom: auto;
  width: 238px;
  height: 322px;
  transform: rotate(5deg);
}

.template-solution-park .doc-card--table,
.template-solution-association .doc-card--table {
  right: 6px;
  top: 288px;
  width: 230px;
  height: 224px;
}

.template-solution-park .doc-card--table {
  right: -10px;
  top: 538px;
  width: 248px;
  height: 236px;
  transform: rotate(5deg);
}

.template-solution-association .doc-card--table {
  right: 62px;
  top: 330px;
  width: 214px;
  height: 250px;
  transform: rotate(1deg);
}

.template-solution-park .detail-visual .brand-coin,
.template-solution-association .detail-visual .brand-coin {
  right: 148px;
  bottom: 92px;
}

.template-solution-park .detail-visual .brand-coin {
  display: none;
}

.template-solution-association .detail-visual .brand-coin {
  right: 260px;
  bottom: 74px;
}

.template-solution-park .solution-showcase-labels,
.template-solution-association .solution-showcase-labels {
  margin-top: -44px;
}

.template-solution-association .solution-showcase-labels {
  display: none;
}

.template-solution-park .solution-showcase-labels {
  margin-top: -18px;
}

.template-solution-park .solution-detail-bottom,
.template-solution-association .solution-detail-bottom {
  left: 54px;
  right: 696px;
  bottom: 42px;
  grid-template-columns: 130px repeat(3, 1fr);
}

.template-solution-park .solution-detail-bottom {
  right: 570px;
  bottom: 42px;
}

.template-solution-association .solution-detail-bottom {
  right: 54px;
}

.success-screen {
  padding-left: 92px;
}

.success-copy {
  position: absolute;
  left: 94px;
  top: 164px;
  width: 500px;
}

.status-check {
  position: relative;
  display: grid;
  place-items: center;
  width: 94px;
  height: 94px;
  margin-bottom: 36px;
  border: 1px solid rgba(166,137,102,.58);
  border-radius: 50%;
  color: #9f7e45;
  font-size: 48px;
}

.status-check i {
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(166,137,102,.18);
  border-radius: 50%;
}

.status-check span {
  position: relative;
  z-index: 1;
  transform: translateY(-2px);
}

.success-copy h1 {
  font-size: 76px;
}

.mini-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 60px;
  border: 1px solid rgba(80,76,70,.14);
}

.mini-steps span {
  padding: 18px;
  border-right: 1px solid rgba(80,76,70,.12);
  color: #66625b;
  text-align: center;
}

.success-journey {
  position: absolute;
  left: 94px;
  top: 585px;
  width: 720px;
  min-height: 104px;
  margin-top: 0;
  background: rgba(255,255,255,.42);
}

.success-journey span {
  position: relative;
  padding: 24px 28px 22px 88px;
  text-align: left;
}

.success-journey span::before {
  content: "";
  position: absolute;
  left: 34px;
  top: 28px;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(166,137,102,.52);
  border-radius: 50%;
}

.success-journey span::after {
  content: "";
  position: absolute;
  left: 48px;
  top: 43px;
  width: 10px;
  height: 14px;
  border-right: 1px solid rgba(166,137,102,.76);
  border-bottom: 1px solid rgba(166,137,102,.76);
  transform: rotate(38deg);
}

.success-journey i,
.success-journey b {
  display: block;
  font-style: normal;
}

.success-journey i {
  margin-bottom: 8px;
  color: #766951;
  font-size: 18px;
}

.success-journey b {
  color: rgba(70,67,61,.68);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}

.success-next {
  position: absolute;
  left: 94px;
  right: 76px;
  bottom: 82px;
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr 1.25fr;
  border: 1px solid rgba(80,76,70,.12);
  background: rgba(255,255,255,.32);
}

.success-next a {
  position: relative;
  min-height: 92px;
  padding: 22px 52px 18px 86px;
  border-right: 1px solid rgba(80,76,70,.12);
  color: #3d3933;
}

.success-next a:last-child {
  display: flex;
  align-items: center;
  padding-left: 30px;
  color: #c2a06a;
  background: #242424;
}

.success-next i {
  position: absolute;
  left: 30px;
  top: 24px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(166,137,102,.52);
  border-radius: 50%;
  color: #8d7a5f;
  font-style: normal;
  font-size: 20px;
}

.success-next b,
.success-next span {
  display: block;
}

.success-next b {
  margin-bottom: 8px;
  font-size: 18px;
}

.success-next span {
  color: rgba(70,67,61,.62);
  font-size: 12px;
  line-height: 1.45;
}

.success-next em {
  position: absolute;
  right: 24px;
  top: 29px;
  color: #a98a56;
  font-style: normal;
  font-size: 22px;
}

.success-scene {
  position: absolute;
  right: 44px;
  top: 76px;
  width: 700px;
  height: 540px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(246,243,237,.6), rgba(224,218,208,.66)),
    url("/static/img/hero-report.f394e59e3423.png") center / cover no-repeat;
  box-shadow: 0 26px 52px rgba(45,43,39,.08);
}

.success-scene > * {
  opacity: .82;
  filter: brightness(1.12) contrast(.9);
}

.success-scene .showroom {
  left: 0;
  right: 0;
  height: 230px;
  padding: 0;
  display: grid;
  place-items: center;
  background:
    linear-gradient(180deg, rgba(60,55,48,.05), rgba(255,255,255,.08)),
    linear-gradient(#d2cabd, #c3baad);
}

.success-scene .showroom img {
  position: static;
  width: 210px;
  height: 58px;
  object-fit: contain;
}

.success-scene .doc-card--white {
  left: 94px;
  bottom: 76px;
  transform: rotate(-12deg);
}

.success-request {
  position: absolute;
  left: 74px;
  top: 204px;
  z-index: 3;
  width: 210px;
  height: 268px;
  padding: 26px 24px 20px;
  background: linear-gradient(180deg, #fbfaf6, #eeeae1);
  box-shadow: 0 26px 46px rgba(44,42,38,.18);
  transform: rotate(-11deg);
}

.success-request img {
  width: 40px;
  height: 34px;
  object-fit: contain;
}

.success-request b {
  display: block;
  margin: 22px 0 18px;
  color: #2f2d29;
  font-size: 20px;
}

.success-request dl {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 9px 12px;
  margin: 0;
  color: rgba(54,51,46,.68);
  font-size: 10px;
}

.success-request dt,
.success-request dd {
  margin: 0;
}

.success-request small {
  position: absolute;
  left: 24px;
  bottom: 18px;
  color: rgba(54,51,46,.56);
  font-size: 9px;
}

.success-book {
  position: absolute;
  right: 146px;
  top: 40px;
  z-index: 2;
  width: 210px;
  height: 280px;
  padding: 36px 28px;
  color: rgba(238,231,220,.68);
  background:
    linear-gradient(135deg, rgba(180,149,89,.16), transparent 42%),
    #242421;
  box-shadow: 0 28px 48px rgba(44,42,38,.22);
  transform: rotate(4deg);
}

.success-book img {
  width: 54px;
  height: 46px;
  object-fit: contain;
  filter: grayscale(.35);
}

.success-book span {
  position: absolute;
  right: 28px;
  top: 38px;
  font-family: Georgia, serif;
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: .12em;
}

.success-calendar {
  position: absolute;
  right: 106px;
  bottom: 120px;
  z-index: 4;
  width: 182px;
  height: 162px;
  padding: 24px;
  background: #f4efe6;
  box-shadow: 0 22px 36px rgba(44,42,38,.16);
  transform: rotate(8deg);
}

.success-calendar b {
  color: #625a50;
  font-family: Georgia, serif;
  font-size: 13px;
  letter-spacing: .12em;
}

.success-calendar i {
  display: block;
  height: 92px;
  margin-top: 18px;
  background:
    radial-gradient(circle at 21% 72%, rgba(166,137,102,.82) 0 5px, transparent 6px),
    repeating-linear-gradient(90deg, rgba(80,76,70,.13) 0 1px, transparent 1px 25%),
    repeating-linear-gradient(0deg, rgba(80,76,70,.11) 0 1px, transparent 1px 23px);
}

.success-pen {
  position: absolute;
  left: 336px;
  bottom: 84px;
  z-index: 6;
  width: 10px;
  height: 248px;
  border-radius: 8px;
  background: linear-gradient(90deg, #262421, #d2ad6b 35% 48%, #22201e 49% 100%);
  box-shadow: 0 16px 26px rgba(44,42,38,.18);
  transform: rotate(4deg);
}

.success-scene .name-card {
  left: 334px;
  bottom: 54px;
  z-index: 5;
}

.success-caption {
  right: 78px;
  top: 148px;
}

.success-footnote {
  position: absolute;
  left: 560px;
  bottom: 42px;
  color: rgba(70,67,61,.72) !important;
  font-size: 16px !important;
}

.success-footnote::before,
.success-footnote::after {
  content: "";
  display: inline-block;
  width: 42px;
  height: 1px;
  margin: 0 18px 5px;
  background: rgba(166,137,102,.54);
}

@media (max-width: 1320px) {
  .success-copy {
    width: 100%;
  }

  .success-journey,
  .success-next,
  .success-footnote,
  .success-caption {
    position: relative;
    inset: auto;
  }

  .success-journey,
  .success-next {
    width: 100%;
    margin-top: 24px;
  }

  .success-journey,
  .success-next {
    grid-template-columns: 1fr;
  }

  .success-next a {
    border-right: 0;
    border-bottom: 1px solid rgba(80,76,70,.12);
  }

  .success-footnote {
    margin: 24px 0 0;
  }

  .success-caption {
    display: none;
  }
}

.error-screen {
  padding-left: 52px;
}

.status-side-caption {
  position: absolute;
  left: 46px;
  top: 150px;
  height: 330px;
  padding-left: 18px;
  border-left: 1px solid rgba(80,76,70,.18);
  color: #4c4841 !important;
  font-family: Georgia, serif;
  font-size: 18px !important;
  line-height: 1.3 !important;
  writing-mode: vertical-rl;
  letter-spacing: .05em;
}

.status-side-caption::before {
  content: "";
  position: absolute;
  left: -5px;
  top: -18px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold-strong);
}

.status-side-caption--right {
  left: auto;
  right: 88px;
  top: 190px;
}

.error-copy {
  position: absolute;
  left: 128px;
  top: 304px;
  z-index: 2;
  width: 410px;
}

.error-copy h1 {
  font-size: 54px;
  line-height: 1.16;
}

.error-copy p {
  max-width: 330px;
  font-size: 20px;
  line-height: 1.9;
}

.error-copy .screen-btn {
  width: 210px;
  height: 62px;
  margin-top: 22px;
  font-size: 18px;
}

.error-code {
  position: absolute;
  left: 600px;
  top: 244px;
  z-index: 1;
  color: rgba(166,137,102,.86);
  font-family: Georgia, serif;
  font-size: 190px;
  line-height: 1;
  letter-spacing: .02em;
  text-shadow: 0 18px 34px rgba(44,42,38,.1);
}

.template-404 .error-code {
  color: rgba(43,42,39,.92);
}

.error-screen--500 .error-code {
  color: rgba(166,137,102,.82);
}

.error-code--split {
  display: flex;
  gap: 0;
}

.error-code--split span,
.error-code--split em {
  font-style: normal;
}

.error-code--split em {
  color: rgba(166,137,102,.82);
}

.error-art {
  position: absolute;
  right: 100px;
  top: 208px;
  width: 610px;
  height: 388px;
}

.error-paper {
  position: absolute;
  right: 78px;
  top: 22px;
  width: 226px;
  height: 248px;
  border: 1px solid rgba(80,76,70,.11);
  background:
    linear-gradient(135deg, transparent 0 67%, rgba(166,137,102,.2) 68% 69%, transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.76), rgba(240,236,229,.68));
  box-shadow: 0 18px 40px rgba(44,42,38,.08);
  transform: rotate(8deg);
}

.error-paper::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 28px;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(80,76,70,.16);
  background:
    linear-gradient(45deg, transparent 48%, rgba(80,76,70,.18) 49% 51%, transparent 52%),
    linear-gradient(-45deg, transparent 48%, rgba(80,76,70,.18) 49% 51%, transparent 52%);
}

.error-folder {
  position: absolute;
  left: 90px;
  top: 142px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 340px;
  height: 178px;
  border: 1px solid rgba(80,76,70,.13);
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(235,231,223,.86));
  box-shadow: 0 24px 60px rgba(44,42,38,.12);
}

.error-folder::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -48px;
  width: 116px;
  height: 66px;
  border: 1px solid rgba(80,76,70,.13);
  border-bottom: 0;
  border-radius: 6px 18px 0 0;
  background: rgba(247,244,238,.92);
}

.error-folder img {
  width: 92px;
  height: 78px;
  object-fit: contain;
  opacity: .42;
}

.error-curve {
  position: absolute;
  left: 6px;
  right: 34px;
  bottom: 36px;
  height: 92px;
  border-bottom: 3px solid rgba(166,137,102,.66);
  border-radius: 0 0 56% 50%;
  transform: rotate(-3deg);
}

.error-curve::after {
  content: "";
  position: absolute;
  right: 100px;
  bottom: -9px;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(166,137,102,.72);
  border-radius: 50%;
  background: #f6f3ec;
}

.error-system-orbit {
  position: absolute;
  right: 315px;
  top: 192px;
  width: 360px;
  height: 360px;
  border: 1px solid rgba(166,137,102,.28);
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle, transparent 0 58px, rgba(80,76,70,.1) 59px 60px, transparent 61px 104px),
    conic-gradient(from -20deg, rgba(166,137,102,.14), rgba(166,137,102,.03), rgba(166,137,102,.16), rgba(166,137,102,.03));
}

.error-system-orbit::before {
  content: "";
  position: absolute;
  inset: -42px;
  border: 1px dashed rgba(80,76,70,.14);
  border-radius: 50%;
}

.error-orbit-core {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  border: 3px solid rgba(166,137,102,.64);
  border-radius: 50%;
  background: rgba(249,247,242,.94);
  transform: translate(-50%, -50%);
  box-shadow: 0 15px 34px rgba(44,42,38,.11);
}

.error-orbit-core img {
  width: 46px;
  height: 40px;
  object-fit: contain;
  opacity: .62;
}

.error-orbit-core span {
  margin-top: -8px;
  color: #7c6743;
  font-size: 12px;
}

.error-system-orbit i {
  position: absolute;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border: 1px solid rgba(80,76,70,.15);
  border-radius: 50%;
  background: rgba(249,247,242,.96);
  color: #3e3b35;
  font-size: 13px;
  font-style: normal;
  box-shadow: 0 12px 28px rgba(44,42,38,.1);
}

.error-system-orbit .node--0 { left: 144px; top: -24px; }
.error-system-orbit .node--1 { right: 4px; top: 62px; }
.error-system-orbit .node--2 { right: 16px; bottom: 56px; }
.error-system-orbit .node--3 { left: 144px; bottom: -24px; }
.error-system-orbit .node--4 { left: 16px; bottom: 56px; }
.error-system-orbit .node--5 { left: 4px; top: 62px; }

.error-doc-stack {
  position: absolute;
  right: 82px;
  bottom: 92px;
  width: 575px;
  height: 326px;
}

.error-status-doc,
.error-report-doc,
.error-help-doc {
  position: absolute;
  border: 1px solid rgba(166,137,102,.22);
  background: rgba(249,247,242,.94);
  box-shadow: 0 20px 48px rgba(44,42,38,.16);
}

.error-status-doc {
  left: 78px;
  bottom: 36px;
  width: 218px;
  height: 250px;
  padding: 28px;
  transform: rotate(8deg);
}

.error-status-doc b,
.error-report-doc b,
.error-help-doc b {
  display: block;
  color: #282723;
  font-size: 22px;
}

.error-status-doc span {
  display: block;
  margin-top: 28px;
  color: #666059;
}

.error-status-doc em {
  position: absolute;
  right: 28px;
  bottom: 28px;
  color: var(--gold-strong);
  font-family: Georgia, serif;
  font-size: 26px;
  font-style: normal;
}

.error-report-doc {
  right: 58px;
  bottom: 54px;
  width: 210px;
  height: 260px;
  padding: 34px 28px;
  transform: rotate(11deg);
}

.error-report-doc img {
  width: 42px;
  height: 36px;
  margin-bottom: 36px;
  object-fit: contain;
}

.error-help-doc {
  right: 190px;
  bottom: -4px;
  width: 220px;
  height: 116px;
  padding: 24px;
  transform: rotate(-6deg);
}

.error-help-doc span {
  color: #666059;
  font-size: 13px;
  line-height: 1.7;
}

.error-links {
  position: absolute;
  left: 52px;
  right: 130px;
  bottom: 54px;
  z-index: 6;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  min-height: 94px;
  border: 1px solid rgba(80,76,70,.16);
  background: rgba(250,248,244,.72);
}

.error-links a {
  display: grid;
  grid-template-columns: 58px 1fr auto;
  align-items: center;
  column-gap: 18px;
  padding: 20px 30px;
  border-right: 1px solid rgba(80,76,70,.12);
  color: #4a463f;
}

.error-links a:last-child {
  border-right: 0;
}

.error-links i {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(166,137,102,.45);
  border-radius: 50%;
  color: #9f7e45;
  font-family: var(--sans);
  font-style: normal;
}

.error-links b,
.error-links small {
  display: block;
}

.error-links b {
  font-size: 18px;
}

.error-links small {
  margin-top: 3px;
  color: #6e6960;
  font-size: 12px;
}

.error-links span {
  color: #9f7e45;
  font-size: 24px;
}

.insights-screen {
  display: grid;
  grid-template-columns: 365px 1fr 400px;
  gap: 52px;
  padding-left: 56px;
  padding-right: 86px;
  padding-bottom: 128px;
}

.insights-left h1 {
  margin-top: 72px;
  font-size: 72px;
}

.category-list {
  display: grid;
  gap: 0;
  margin-top: 34px;
}

.category-list a {
  display: flex;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px dashed rgba(80,76,70,.22);
  font-size: 20px;
}

.category-list b {
  color: #9f7e45;
}

.featured-insight {
  padding-top: 48px;
}

.insight-cover {
  position: relative;
  height: 386px;
  background: #d9d4cb url("/static/img/generated-assets/insight-cover-diagnosis-v1.cb459528a8f0.png") center / cover no-repeat;
}

/* The report photo now carries the cover; the placeholder logo + text labels
   are redundant (the article title and summary sit directly below it). */
.insight-cover img,
.insight-cover b,
.insight-cover span {
  display: none;
}

.featured-insight > p {
  margin: 18px 0 8px;
  color: #9f7e45;
  font-size: 16px;
}

.featured-insight h2 {
  margin: 0 0 8px;
  font-size: 34px;
}

.featured-insight p + p {
  font-size: 17px;
  line-height: 1.7;
}

.latest-insights {
  padding-top: 42px;
}

.latest-insights h2 {
  color: #9f7e45;
  font-size: 24px;
  font-weight: 400;
}

.latest-insights > a:not(.screen-link) {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 25px 0;
  border-bottom: 1px solid rgba(80,76,70,.14);
}

.latest-insights span {
  grid-row: span 3;
  color: #9f7e45;
  font-family: Georgia, serif;
  font-size: 30px;
}

.latest-insights small,
.latest-insights em {
  color: #6a655d;
  font-size: 13px;
  font-style: normal;
}

.latest-insights b {
  font-size: 21px;
}

.topic-strip {
  position: absolute;
  left: 56px;
  right: 128px;
  bottom: 48px;
  display: flex;
  align-items: center;
  gap: 18px;
  height: 80px;
  padding: 0 32px;
  border: 1px solid rgba(80,76,70,.16);
  background: rgba(250,248,244,.78);
}

.topic-strip b {
  color: #9f7e45;
  font-size: 23px;
}

.topic-strip span {
  padding: 10px 22px;
  border: 1px solid rgba(80,76,70,.12);
  font-size: 15px;
}

.topic-strip a {
  margin-left: auto;
  padding-left: 28px;
  border-left: 1px solid rgba(80,76,70,.2);
  font-size: 22px;
}

/* Insights: below the ~1700px canvas the featured title wraps and the columns
   grow past the clipped 100vh, colliding with the bottom-pinned topic strip.
   Let the section grow and flow the strip as a full-width row under the cols. */
@media (min-width: 1321px) and (max-width: 1699px) {
  .insights-screen {
    height: auto;
    min-height: 0;
    overflow: visible;
    padding-bottom: 56px;
  }
  .insights-screen .topic-strip {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    grid-column: 1 / -1;
    margin-top: 28px;
  }
}

.insight-detail-screen {
  display: grid;
  grid-template-columns: 292px 1fr 370px;
  gap: 58px;
  padding-left: 50px;
  padding-right: 88px;
}

.article-side {
  position: relative;
  min-height: 760px;
  border-right: 1px solid rgba(80,76,70,.14);
}

.article-side h2 {
  margin-top: 42px;
  font-size: 24px;
}

.article-side time {
  display: block;
  margin: 58px 0 30px;
  color: #44413c;
  font-size: 18px;
}

.share-dots {
  display: flex;
  gap: 18px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(80,76,70,.14);
}

.share-dots span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(80,76,70,.22);
  border-radius: 50%;
  font-family: var(--sans);
  font-size: 12px;
}

.article-side h3 {
  margin-top: 30px;
  font-size: 22px;
}

.article-side ol {
  padding-left: 20px;
  color: #8b6f3e;
  line-height: 2.5;
}

.screen-building--article {
  left: 0;
  bottom: -70px;
  width: 250px;
  height: 260px;
}

.article-main {
  padding-top: 28px;
}

.article-main h1 {
  font-size: 50px;
  line-height: 1.15;
  /* Was white-space:nowrap, which forced the center column to the title's
     full width (~800px) and pushed the right sidebar off-screen below the
     ~1728px design canvas. Let it wrap; balance the line lengths. */
  text-wrap: balance;
}

.article-meta,
.article-lead {
  font-size: 18px !important;
}

.article-cover {
  height: 368px;
  margin: 22px 0 34px;
  overflow: hidden;
  background: #d9d4cb url("/static/img/generated-assets/insight-article-cover-v1.584b4bbe5912.png") center / cover no-repeat;
}

/* The open-report photo (gold radar + six-module ring, matching the detail
   mockup) replaces the former CSS-drawn book placeholder; its inner diagrams
   make the dashed circle and score label redundant. */
.open-book {
  height: 100%;
}

.open-book img,
.open-book b,
.open-book i,
.open-book span {
  display: none;
}

.article-content h2 {
  font-size: 31px;
}

.article-content .rich {
  color: #403c36;
  font-size: 16px;
  line-height: 2;
}

.article-aside {
  padding-top: 28px;
}

.cta-card {
  min-height: 296px;
  padding: 42px;
  border: 1px solid rgba(80,76,70,.14);
  background: rgba(250,248,244,.82);
}

.cta-card > b {
  color: #9f7e45;
  font-family: var(--sans);
  font-size: 38px;
}

.cta-card h2 {
  margin-top: 26px;
  font-size: 28px;
}

.cta-card p {
  font-size: 17px;
}

/* Laptop range: the center core (challenges + path) and the right delivery
   showcase only clear each other at >=1692px. Narrow the core and scale the
   showcase toward its right edge so they don't collide on laptop widths.
   Placed after the per-variant rules so it overrides all three solutions. */
@media (min-width: 1321px) and (max-width: 1691px) {
  .template-solution-enterprise .solution-detail-core { width: 446px; }
  .template-solution-enterprise .solution-detail-showcase {
    right: 40px;
    width: 560px;
    transform: scale(0.82);
    transform-origin: top right;
  }
  /* Park & association: pull the right montage off the full-width step row. */
  .template-solution-park .solution-detail-showcase,
  .template-solution-association .solution-detail-showcase {
    transform: scale(0.85);
    transform-origin: top right;
  }
}

.related-list {
  margin-top: 34px;
}

.related-list h2 {
  font-size: 22px;
}

.related-list a:not(.screen-link) {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid rgba(80,76,70,.14);
}

/* :not(.screen-link) so the trailing "查看更多 →" link's arrow <span> keeps
   its inline .screen-link styling instead of becoming a 58px thumbnail box. */
.related-list a:not(.screen-link) span {
  height: 58px;
  background: #d8d3ca center / cover no-repeat;
}

.related-list a:nth-of-type(1) span {
  background-image: url("/static/img/generated-assets/deliverable-report-book-v1.333d843a662c.png");
}

.related-list a:nth-of-type(2) span {
  background-image: url("/static/img/generated-assets/deliverable-report-book-v2.95940166f0c4.png");
}

.related-list a:nth-of-type(3) span {
  background-image: url("/static/img/generated-assets/deliverable-report-diagnosis-v1.980794506cae.png");
}

.related-list a b,
.related-list a small {
  display: block;
}

.related-list a b {
  font-size: 17px;
}

.related-list a small {
  color: #716c64;
}

@media (max-width: 1320px) {
  .template-screen .primary-nav {
    display: none;
  }

  .template-screen .menu-button {
    display: inline-block;
  }

  .screen-page {
    height: auto;
    min-height: auto;
    padding: 108px 24px 54px;
    overflow: visible;
  }

  .screen-copy--left,
  .ai-orbit,
  .p-axis,
  .screen-materials,
  .choice-card,
  .about-copy,
  .contact-copy,
  .about-panel,
  .diagnosis-form,
  .contact-scene,
  .contact-strip,
  .deliver-copy,
  .deliver-grid,
  .deliver-process,
  .solution-detail-copy,
  .solution-detail-core,
  .solution-detail-showcase,
  .solution-detail-board,
  .solution-detail-bottom,
  .success-copy,
  .success-scene,
  .error-copy,
  .error-code,
  .error-folder,
  .error-links {
    position: relative;
    inset: auto;
  }

  .screen-product,
  .screen-solutions,
  .insights-screen,
  .insight-detail-screen {
    display: block;
  }

  .screen-page h1 {
    font-size: clamp(42px, 12vw, 70px);
  }

  .screen-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .ai-orbit {
    width: min(540px, 100vw - 48px);
    height: min(540px, 100vw - 48px);
    margin: 48px auto;
    transform: scale(.72);
    transform-origin: top center;
  }

  .p-axis,
  .screen-materials--ai,
  .choice-card,
  .about-panel,
  .diagnosis-form,
  .contact-scene,
  .contact-strip,
  .deliver-grid,
  .solution-detail-core,
  .solution-detail-showcase,
  .solution-detail-board,
  .success-scene,
  .error-links,
  .topic-strip {
    width: 100%;
    margin-top: 34px;
  }

  .product-tiers,
  .phase-ribbon,
  .about-panel,
  .solution-challenges > div,
  .solution-path-steps,
  .solution-detail-board,
  .detail-stages,
  .solution-detail-bottom,
  .deliver-grid,
  .contact-strip {
    grid-template-columns: 1fr;
  }

  .photo-mosaic,
  .success-scene,
  .contact-scene {
    height: 520px;
  }

  .solution-detail-core,
  .solution-detail-showcase {
    width: 100%;
  }

  .solution-detail-showcase .detail-visual {
    min-height: 560px;
  }

  .solution-detail-bottom {
    grid-template-columns: 1fr;
  }

  .solution-detail-copy {
    width: 100%;
  }

  .about-panel h2 {
    white-space: normal;
  }

  .about-panel {
    height: auto;
  }

  .deliver-copy .screen-crumb {
    width: 100%;
    white-space: normal;
  }

  .solution-detail-showcase .detail-visual {
    display: grid;
    gap: 14px;
    min-height: auto;
    overflow: visible;
  }

  .detail-photo,
  .detail-visual .doc-card--white,
  .detail-visual .doc-card--black,
  .doc-card--table,
  .doc-card--list,
  .detail-visual .brand-coin {
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    height: auto;
    min-height: 160px;
    transform: none;
  }

  .detail-photo {
    clip-path: none;
  }

  .detail-visual .brand-coin {
    width: 112px;
    min-height: 112px;
    height: 112px;
    justify-self: end;
    margin-top: -86px;
  }

  .template-solution-park .solution-detail-core,
  .template-solution-association .solution-detail-core,
  .template-solution-enterprise .solution-detail-copy,
  .template-solution-park .solution-detail-copy,
  .template-solution-association .solution-detail-copy,
  .template-solution-enterprise .solution-detail-showcase,
  .template-solution-park .solution-detail-showcase,
  .template-solution-association .solution-detail-showcase {
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: 100%;
  }

  .template-solution-park .solution-detail-copy h1,
  .template-solution-park .solution-detail-copy .screen-rule,
  .template-solution-park .solution-detail-copy > p:not(.screen-crumb),
  .template-solution-park .solution-detail-copy .screen-actions {
    margin-left: 0;
  }

  .template-solution-park .solution-detail-copy h1 {
    white-space: normal;
  }

  .template-solution-association .solution-detail-copy .screen-actions {
    margin-top: 28px;
  }

  .template-solution-detail .solution-detail-copy .screen-btn {
    min-width: 0;
  }

  .template-solution-park .solution-path-steps article,
  .template-solution-association .solution-path-steps article {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .template-solution-park .solution-path-steps p {
    display: block;
  }

  .template-solution-park .detail-photo,
  .template-solution-association .detail-photo,
  .template-solution-park .detail-visual .doc-card--white,
  .template-solution-association .detail-visual .doc-card--white,
  .template-solution-park .detail-visual .doc-card--black,
  .template-solution-association .detail-visual .doc-card--black,
  .template-solution-park .doc-card--table,
  .template-solution-association .doc-card--table,
  .template-solution-park .doc-card--list,
  .template-solution-association .doc-card--list,
  .template-solution-park .detail-visual .brand-coin,
  .template-solution-association .detail-visual .brand-coin {
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    height: auto;
    min-height: 150px;
    transform: none;
    clip-path: none;
  }

  .template-solution-park .detail-visual .brand-coin,
  .template-solution-association .detail-visual .brand-coin {
    width: 112px;
    min-height: 112px;
    height: 112px;
    margin-top: -86px;
    justify-self: end;
  }

  .template-solution-park .solution-detail-bottom,
  .template-solution-association .solution-detail-bottom {
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    grid-template-columns: 1fr;
  }

  .solution-detail-bottom b,
  .solution-detail-bottom span {
    border-right: 0;
    border-bottom: 1px solid rgba(80,76,70,.12);
  }

  .deliver-process {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .deliver-process i {
    display: none;
  }

  .deliver-process span {
    display: grid;
    grid-template-columns: 52px 1fr;
    justify-items: start;
    width: 100%;
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid rgba(80,76,70,.12);
    background: rgba(255,255,255,.42);
  }

  .deliver-process b,
  .deliver-process small {
    grid-column: 2;
  }

  .about-kit .name-card {
    left: auto;
    right: 0;
  }

  .vertical-caption,
  .side-manifest,
  .screen-building,
  .screen-rings {
    display: none;
  }

  .topic-strip {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    flex-wrap: wrap;
    height: auto;
    padding: 20px;
  }
}

@media (max-width: 680px) {
  html,
  body {
    scrollbar-width: none;
  }

  html::-webkit-scrollbar,
  body::-webkit-scrollbar {
    display: none;
  }

  .template-screen .site-header__inner {
    width: calc(100% - 24px);
    height: 76px;
  }

  .template-screen .brand-mark__logo {
    width: 146px;
    height: 48px;
  }

  .template-screen .site-header__cta {
    display: none;
  }

  .template-screen .menu-button {
    width: 42px;
    height: 42px;
    background: rgba(255,255,255,.34);
  }

  .screen-page {
    padding: 96px 20px 34px;
  }

  .screen-page h1 {
    font-size: clamp(42px, 12vw, 56px);
    line-height: 1.18;
  }

  .screen-kicker {
    margin-bottom: 20px;
    font-size: 18px;
  }

  .screen-lead,
  .screen-page p {
    font-size: 17px;
    line-height: 1.75;
  }

  .screen-copy--left {
    width: auto;
  }

  .screen-copy--left h1 {
    margin-top: 28px;
    font-size: 52px;
    white-space: normal;
  }

  .template-ai-brand .screen-kicker,
  .template-ai-brand .screen-copy--left > .screen-rule:not(.screen-rule--spaced) {
    display: none;
  }

  .template-ai-brand .screen-rule {
    margin: 14px 0 18px;
  }

  .template-ai-brand .screen-rule--spaced {
    margin-top: 16px;
  }

  .template-ai-brand .screen-lead {
    line-height: 1.56;
  }

  .template-ai-brand .screen-copy--left .screen-actions {
    display: none;
  }

  .screen-actions {
    gap: 18px;
    margin-top: 28px;
  }

  .screen-btn {
    width: 100%;
    min-width: 0;
    height: 68px;
    font-size: 18px;
  }

  .screen-link {
    font-size: 16px;
  }

  .ai-orbit {
    width: 286px;
    height: 286px;
    margin: 20px auto 12px;
    transform: none;
  }

  .ai-orbit__ring {
    inset: 29px;
  }

  .ai-orbit__ring::before {
    inset: 44px;
  }

  .ai-orbit__ring::after {
    inset: 78px;
  }

  .ai-orbit__core {
    width: 80px;
    height: 80px;
    border-width: 3px;
    font-size: 20px;
  }

  .ai-orbit__node {
    width: 62px;
    height: 62px;
    font-size: 13px;
    box-shadow: 0 10px 20px rgba(48,46,42,.12), inset 0 0 0 4px rgba(255,255,255,.54);
  }

  .ai-orbit__node b {
    font-size: 17px;
  }

  .ai-orbit__node span {
    margin-top: -4px;
  }

  .node-top { left: 112px; top: 0; }
  .node-right-top { right: 8px; top: 66px; }
  .node-right-bottom { right: 9px; bottom: 40px; }
  .node-bottom { left: 112px; bottom: 0; }
  .node-left-bottom { left: 9px; bottom: 40px; }
  .node-left-top { left: 8px; top: 66px; }

  .p-axis {
    display: grid;
    gap: 0;
    padding: 0;
    border: 1px solid rgba(80,76,70,.16);
    background: rgba(255,255,255,.42);
    margin-top: 12px;
  }

  .p-axis p {
    display: none;
  }

  .p-axis div {
    display: grid;
    grid-template-columns: 56px 1fr;
    align-items: center;
    margin: 0;
    padding: 6px 14px;
    border-bottom: 1px solid rgba(80,76,70,.12);
  }

  .p-axis div:last-child {
    border-bottom: 0;
  }

  .p-axis div::before {
    content: none;
  }

  .p-axis strong {
    font-size: 16px;
  }

  .p-axis span {
    font-size: 12px;
  }

  .screen-materials--ai {
    display: none;
  }

  .ai-mobile-cta {
    display: flex;
    width: 100%;
    height: 48px;
    margin-top: 8px;
    font-size: 16px;
  }

  .screen-solutions {
    padding-bottom: 28px;
  }

  .solutions-left h1 {
    margin-top: 18px;
  }

  .photo-mosaic {
    display: none;
  }

  .solution-routes {
    padding-top: 12px;
  }

  .solution-routes article {
    display: block;
    margin-bottom: 14px;
    padding: 17px 16px 18px;
    border: 1px solid rgba(166,137,102,.44);
    border-radius: 6px;
    background: rgba(255,255,255,.4);
  }

  .solution-routes article:not(:first-child) {
    padding: 16px;
    border-color: rgba(80,76,70,.14);
  }

  .solution-routes article::after {
    display: none;
  }

  .solution-routes h2 {
    position: relative;
    font-size: 22px;
  }

  .solution-routes article:not(:first-child) h2::after {
    content: "+";
    position: absolute;
    right: 0;
    color: #6d6760;
    font-family: var(--sans);
  }

  .route-icons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 20px 0 16px;
  }

  .solution-routes article:not(:first-child) .route-icons,
  .solution-routes article:not(:first-child) a {
    display: none;
  }

  .route-icons span {
    width: 54px;
    height: 54px;
    font-size: 19px;
  }

  .route-icons span b {
    position: static;
    margin-top: 8px;
    font-size: 11px;
    white-space: nowrap;
  }

  .route-icons i {
    display: none;
  }

  .solution-routes a {
    display: inline-flex;
    justify-self: start;
    font-size: 16px;
  }

  .solution-mobile-cta {
    display: flex;
    width: 100%;
    height: 58px;
    margin-top: 16px;
    font-size: 17px;
  }

  .screen-contact {
    padding-bottom: 18px;
  }

  .contact-copy h1 {
    margin-top: 18px;
  }

  .template-contact .contact-copy h1 {
    font-size: clamp(42px, 12vw, 56px);
  }

  .about-copy,
  .contact-copy {
    width: auto;
  }

  .contact-copy .screen-actions {
    display: none;
  }

  .contact-flow {
    display: none;
  }

  .diagnosis-form {
    margin-top: 12px;
    padding: 18px 14px 14px;
    width: 100%;
  }

  .diagnosis-form h2 {
    font-size: 21px;
    line-height: 1.12;
    margin-bottom: 0;
  }

  .diagnosis-form .screen-rule {
    margin: 9px 0 12px;
  }

  .diagnosis-form label,
  .diagnosis-form legend {
    margin-top: 7px;
    font-size: 13px;
  }

  .diagnosis-form > label {
    color: transparent;
    font-size: 0;
  }

  .diagnosis-form > label input {
    margin-top: 0;
  }

  .diagnosis-form input[type="text"],
  .diagnosis-form input[type="email"] {
    height: 32px;
    font-size: 13px;
  }

  .diagnosis-form input.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .diagnosis-form fieldset {
    display: block;
    margin: 10px 0 12px;
  }

  .diagnosis-form fieldset label {
    height: 32px;
    margin-top: 5px;
    font-size: 13px;
  }

  .diagnosis-form button {
    height: 46px;
    margin-top: 8px;
    font-size: 16px;
  }

  .contact-scene {
    display: none;
  }

  .contact-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 8px;
  }

  .contact-strip div {
    padding: 7px 4px;
    text-align: center;
  }

  .contact-strip b {
    font-size: 12px;
  }

  .contact-strip span {
    font-size: 10px;
    line-height: 1.28;
    max-height: 13px;
    overflow: hidden;
    word-break: break-word;
  }
}

@media (max-width: 960px) {
  .hm-hero {
    padding-top: 108px;
  }

  .hm-hero__grid,
  .split-grid,
  .os-grid,
  .page-hero__grid,
  .detail-layout,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .report-visual {
    min-height: auto;
  }

  .report-visual__panel {
    position: relative;
    right: auto;
    bottom: auto;
    width: 92%;
    margin: -28px auto 0;
  }

  .comparison-grid {
    grid-template-columns: 1fr;
  }

  .turning-point {
    width: auto;
    min-height: 72px;
  }

  .turning-point span {
    writing-mode: initial;
  }

  .tier-grid,
  .feature-grid,
  .solutions-grid,
  .process-grid,
  .deliverable-grid,
  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
  }

  .solution-row,
  .news-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .package-table {
    grid-template-columns: 1fr;
  }

  .package-cell.is-head {
    min-height: auto;
  }
}

@media (max-width: 680px) {
  .shell,
  .narrow,
  .article-shell {
    width: min(calc(100% - 28px), var(--shell));
  }

  .site-header__inner {
    width: calc(100% - 24px);
    height: 66px;
  }

  .site-header__cta {
    display: none;
  }

  .language-switch button {
    width: 30px;
  }

  .display {
    font-size: clamp(36px, 12.8vw, 50px);
    line-height: 1.02;
  }

  .hm-hero {
    min-height: auto;
    padding: 102px 0 58px;
  }

  .button-row {
    align-items: stretch;
  }

  .button-row .button {
    width: 100%;
  }

  .metric-strip,
  .tier-grid,
  .feature-grid,
  .solutions-grid,
  .process-grid,
  .deliverable-grid,
  .site-footer__grid,
  .field-grid {
    grid-template-columns: 1fr;
  }

  .page-hero,
  .article-hero {
    padding-top: 112px;
  }

  .orbit__node {
    width: 76px;
    height: 76px;
    font-size: 12px;
  }

  .orbit__core {
    width: 112px;
    height: 112px;
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* Homepage: Images 2.0 final-design restoration */
.template-home {
  --serif: "Source Han Serif SC", "Noto Serif SC", "Songti SC", "SimSun", serif;
  background: #f7f6f2;
  color: #252523;
  font-family: var(--serif);
}

.template-home .site-header {
  position: absolute;
  background: rgba(247, 246, 242, 0.94);
  border-bottom: 1px solid rgba(51, 51, 51, 0.12);
  backdrop-filter: blur(12px);
}

.template-home .site-header__inner {
  width: min(calc(100% - 80px), 1640px);
  height: 112px;
}

.template-home .brand-mark {
  min-width: 300px;
}

.template-home .brand-mark__logo {
  width: 300px;
  height: 76px;
}

html[lang="zh-hans"] .template-home .brand-mark {
  min-width: 252px;
  gap: 18px;
  align-items: center;
}

html[lang="zh-hans"] .template-home .brand-mark__logo--lockup {
  display: none;
}

html[lang="zh-hans"] .template-home .brand-mark__symbol {
  display: block;
  width: 76px;
  height: 72px;
  object-fit: contain;
}

html[lang="zh-hans"] .template-home .brand-mark__text {
  display: grid;
  gap: 8px;
  color: #191a19;
  font-family: var(--serif);
}

html[lang="zh-hans"] .template-home .brand-mark__text strong {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.18em;
  white-space: nowrap;
}

html[lang="zh-hans"] .template-home .brand-mark__text span {
  font-size: 17px;
  line-height: 1;
  letter-spacing: 0.22em;
  white-space: nowrap;
}

.template-home .primary-nav {
  gap: clamp(46px, 4.8vw, 76px);
  font-family: var(--serif);
  font-size: 18px;
  color: #222;
}

.template-home .primary-nav a {
  position: relative;
  padding: 42px 0 36px;
}

.template-home .primary-nav a:first-child::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  height: 3px;
  background: var(--gold-strong);
}

html[lang="zh-hans"] .template-home .primary-nav a:nth-child(5),
.template-home .language-switch {
  display: none;
}

html[lang="en"] .template-home .brand-mark {
  min-width: 280px;
}

html[lang="en"] .template-home .brand-mark__logo {
  width: 280px;
  height: 72px;
}

html[lang="en"] .template-home .primary-nav {
  gap: clamp(22px, 2.25vw, 38px);
  font-family: var(--latin);
  font-size: 14px;
}

html[lang="en"] .template-home .primary-nav a:nth-child(6) {
  display: block;
}

html[lang="en"] .template-home .language-switch {
  display: inline-flex;
}

html[lang="en"] .template-home .site-header__cta {
  padding: 0 24px;
  font-family: var(--latin);
  font-size: 14px;
}

@media (min-width: 1321px) {
  html[lang="en"] .template-home .brand-mark {
    min-width: 320px;
  }

  html[lang="en"] .template-home .brand-mark__logo {
    width: 320px;
    height: 76px;
  }

  html[lang="en"] .template-home .site-header__cta {
    order: 1;
    min-width: 232px;
  }

  html[lang="en"] .template-home .language-switch {
    order: 2;
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
  }

  html[lang="en"] .template-home .language-switch button {
    width: auto;
    height: auto;
    color: #222 !important;
    background: transparent !important;
    font-family: var(--serif);
    font-size: 18px;
    font-weight: 500;
  }

  html[lang="en"] .template-home .language-switch button:first-of-type::after {
    content: " /";
    margin-left: 8px;
    color: #222;
  }

  html[lang="en"] .template-home .language-switch button.is-active {
    color: #a68b62 !important;
  }
}

.template-home .site-header__cta {
  min-height: 54px;
  padding: 0 28px;
  border-radius: 0;
  color: #c3a36c;
  background: #242424;
  box-shadow: inset 0 0 0 1px rgba(166, 137, 102, 0.22);
}

.template-home .site-header__cta::after {
  content: "→";
  margin-left: 18px;
  font-size: 22px;
}

.hm-plate {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 70% 28%, rgba(166, 137, 102, 0.08), transparent 28%),
    linear-gradient(180deg, #fbfaf7, #f4f2ee);
}

.hm-plate::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background:
    linear-gradient(90deg, rgba(51, 51, 51, 0.035) 1px, transparent 1px),
    linear-gradient(rgba(51, 51, 51, 0.028) 1px, transparent 1px);
  background-size: 112px 112px;
  mask-image: linear-gradient(180deg, transparent, black 18%, black 85%, transparent);
}

.hm-hero {
  min-height: 945px;
  padding-top: 112px;
}

.hm-hero__inner {
  position: relative;
  z-index: 1;
  width: min(calc(100% - 96px), 1540px);
  min-height: clamp(760px, calc(100dvh - 112px), 833px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(430px, 0.45fr) minmax(620px, 0.55fr);
  align-items: center;
  gap: 54px;
  padding: 72px 0 58px;
}

.hm-hero__copy {
  padding-left: 10px;
}

.hm-hero__title,
.hm-section-title,
.hm-center-head h2 {
  margin: 0;
  color: #171817;
  font-family: var(--serif);
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.28;
  text-shadow: 0 0 0 #171817;
}

.hm-hero__title {
  font-size: clamp(54px, 5.6vw, 92px);
}

.hm-gold-rule {
  width: 52px;
  height: 3px;
  margin: 26px 0 24px;
  background: var(--gold-strong);
}

.hm-hero__lead,
.hm-section-subtitle,
.hm-center-head p {
  margin: 0;
  color: #333333;
  font-family: var(--serif);
  font-size: clamp(18px, 1.55vw, 25px);
  line-height: 1.85;
  letter-spacing: 0.06em;
}

.hm-hero__lead {
  max-width: 760px;
}

.hm-hero__actions {
  display: flex;
  align-items: center;
  gap: 44px;
  margin-top: 46px;
}

.hm-btn,
.hm-link-cta {
  display: inline-flex;
  align-items: center;
  gap: 26px;
  font-family: var(--serif);
  font-size: 20px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.hm-btn {
  min-width: 254px;
  height: 70px;
  justify-content: center;
  padding: 0 34px;
  border: 1px solid rgba(166, 137, 102, 0.55);
}

.hm-btn--dark {
  color: #c6a56f;
  background: #222322;
  box-shadow: 0 16px 32px rgba(35, 34, 32, 0.16);
}

.hm-link-cta {
  color: #2c2c2a;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(166, 137, 102, 0.8);
}

.hm-btn span,
.hm-link-cta span {
  font-size: 24px;
  transition: transform 160ms ease;
}

.hm-btn:hover span,
.hm-link-cta:hover span {
  transform: translateX(5px);
}

.hm-hero__mark {
  margin: 120px 0 0;
  color: #57534b;
  font-size: 18px;
  letter-spacing: 0.16em;
}

.hm-hero__kicker,
.hm-hero-features,
.hm-paper--identity,
.hm-manual-book,
.hm-name-slip {
  display: none;
}

.hm-hero__stage {
  position: relative;
  min-height: 690px;
}

@media (min-width: 1321px) {
  html[lang="zh-hans"] .hm-hero__copy {
    translate: 8px 40px;
  }

  html[lang="zh-hans"] .hm-hero__stage {
    translate: -40px 10px;
  }

  html[lang="zh-hans"] .hm-hero__title {
    color: #46433d;
    font-size: 84px;
    text-shadow: none;
  }

  html[lang="zh-hans"] .hm-hero__lead,
  html[lang="zh-hans"] .hm-hero__mark {
    color: #777067;
  }

  html[lang="zh-hans"] .hm-hero__actions .hm-btn--dark {
    background: #2d2d2a;
  }
}

html[lang="en"] .hm-hero {
  height: 941px;
  min-height: 941px;
  padding-top: 112px;
}

html[lang="en"] .hm-hero__inner {
  width: min(calc(100% - 96px), 1540px);
  min-height: 829px;
  grid-template-columns: 530px minmax(0, 1fr);
  align-items: start;
  gap: 40px;
  padding: 43px 0 26px;
}

html[lang="en"] .hm-hero__copy {
  position: relative;
  z-index: 10;
  padding-left: 10px;
  margin-top: 84px;
}

html[lang="en"] .hm-hero__kicker {
  display: block;
  margin: 0 0 24px;
  color: var(--gold-strong);
  font-family: var(--latin);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

html[lang="en"] .hm-hero__title {
  font-size: 69px;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

html[lang="en"] .hm-gold-rule {
  margin: 26px 0 24px;
}

html[lang="en"] .hm-hero__lead {
  max-width: 520px;
  font-family: var(--latin);
  font-size: 18px;
  line-height: 1.75;
  letter-spacing: 0.01em;
}

html[lang="en"] .hm-hero__actions {
  gap: 34px;
  margin-top: 30px;
}

html[lang="en"] .hm-hero__actions .hm-btn,
html[lang="en"] .hm-hero__actions .hm-link-cta {
  font-family: var(--latin);
  font-size: 15px;
  letter-spacing: 0;
}

html[lang="en"] .hm-hero__actions .hm-btn {
  min-width: 228px;
  height: 58px;
}

html[lang="en"] .hm-hero__actions .hm-link-cta {
  padding-bottom: 9px;
}

html[lang="en"] .hm-hero__mark {
  display: none;
}

html[lang="en"] .hm-hero__stage {
  min-height: 620px;
  margin-top: -8px;
}

@media (min-width: 1321px) {
  html[lang="en"] .hm-hero__stage {
    translate: -20px 32px;
    scale: 1.07;
    transform-origin: left top;
  }
}

/* That upscale is sized for the 1540px inner column (viewport >= ~1636px). On
   narrower screens the column shrinks but the stage stays upscaled, so the
   report paper (left:-108) pokes under the headline. Shrink + shift it right to
   clear the copy while keeping the right paper on-screen. */
@media (min-width: 1321px) and (max-width: 1635px) {
  html[lang="en"] .hm-hero__stage {
    translate: 48px 32px;
    scale: 0.93;
  }
}

html[lang="en"] .hm-paper--report {
  left: -108px;
  top: 94px;
  width: 264px;
  height: 398px;
  padding: 60px 36px 36px;
  transform: rotate(-9deg);
}

html[lang="en"] .hm-paper--map {
  left: -8px;
  right: auto;
  top: 18px;
  z-index: 4;
  width: 360px;
  height: 498px;
  padding: 56px 42px 38px;
  transform: rotate(-3deg);
}

html[lang="en"] .hm-paper--identity {
  display: block;
  right: 44px;
  top: 88px;
  z-index: 3;
  width: 280px;
  height: 398px;
  padding: 58px 38px 34px;
  transform: rotate(9deg);
}

html[lang="en"] .hm-paper h2 {
  font-family: var(--latin);
  font-size: 17px;
  line-height: 1.35;
  letter-spacing: 0.08em;
}

html[lang="en"] .hm-paper__logo {
  left: 36px;
  top: 28px;
  width: 118px;
  height: 24px;
}

html[lang="en"] .hm-paper__tower {
  left: 58px;
  bottom: 44px;
  width: 164px;
  height: 228px;
}

html[lang="en"] .hm-value-orbit {
  width: 214px;
  height: 214px;
  margin: 56px auto 30px;
}

html[lang="en"] .hm-value-orbit strong,
html[lang="en"] .hm-value-orbit span {
  font-family: var(--latin);
  font-size: 10px;
}

html[lang="en"] .hm-paper--identity > span {
  position: absolute;
  left: 40px;
  bottom: 86px;
  color: rgba(38, 37, 35, 0.55);
  font-family: Georgia, serif;
  font-size: 46px;
}

.hm-identity-swatches {
  position: absolute;
  left: 38px;
  right: 38px;
  bottom: 58px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.hm-identity-swatches i {
  height: 28px;
  background: #5f5d58;
}

.hm-identity-swatches i:nth-child(2) { background: #d5d0c7; }
.hm-identity-swatches i:nth-child(3) { background: #a98b58; }
.hm-identity-swatches i:nth-child(4) { background: #1f1f1d; }

html[lang="en"] .hm-manual-book {
  position: absolute;
  right: 232px;
  bottom: 62px;
  z-index: 6;
  display: block;
  width: 166px;
  height: 224px;
  padding: 94px 24px 0;
  color: #f0eadf;
  background: #242421;
  box-shadow: 0 22px 42px rgba(35, 34, 32, 0.24);
  font-family: var(--latin);
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transform: rotate(5deg);
}

html[lang="en"] .hm-name-slip {
  position: absolute;
  right: 72px;
  bottom: 58px;
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 178px;
  height: 58px;
  padding: 0 18px;
  color: #4e4a43;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 24px rgba(35, 34, 32, 0.14);
  font-family: var(--latin);
  font-size: 10px;
  letter-spacing: 0.08em;
}

html[lang="en"] .hm-name-slip img {
  width: 34px;
  height: 30px;
}

html[lang="en"] .hm-medallion {
  right: 22px;
  bottom: 46px;
  z-index: 8;
  width: 154px;
  height: 154px;
}

html[lang="en"] .hm-logo-knot {
  width: 96px;
  height: 82px;
}

html[lang="en"] .hm-arc--one {
  right: -8px;
  top: 58px;
  width: 520px;
  height: 520px;
}

html[lang="en"] .hm-arc--two {
  right: 86px;
  top: 146px;
  width: 330px;
  height: 330px;
}

html[lang="en"] .hm-building--hero {
  left: -700px;
  bottom: -108px;
  width: 560px;
  height: 520px;
}

html[lang="en"] .hm-hero-features {
  position: absolute;
  left: 60px;
  bottom: 36px;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 940px;
  min-height: 116px;
  border: 1px solid rgba(51, 51, 51, 0.12);
  background: rgba(255, 255, 255, 0.56);
}

html[lang="en"] .hm-hero-features article {
  display: grid;
  grid-template-columns: 54px 1fr;
  column-gap: 18px;
  align-content: center;
  padding: 22px 28px;
  border-right: 1px solid rgba(51, 51, 51, 0.12);
}

html[lang="en"] .hm-hero-features article:last-child {
  border-right: 0;
}

html[lang="en"] .hm-hero-features i {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(166, 137, 102, 0.42);
  border-radius: 50%;
  color: #222;
  font-style: normal;
  font-size: 24px;
}

html[lang="en"] .hm-hero-features strong {
  color: #2a2927;
  font-family: var(--latin);
  font-size: 15px;
}

html[lang="en"] .hm-hero-features span {
  color: #6b665e;
  font-family: var(--latin);
  font-size: 10px;
  line-height: 1.45;
}

.hm-building {
  position: absolute;
  pointer-events: none;
  opacity: 0.22;
  filter: grayscale(1);
}

.hm-building::before,
.hm-building::after {
  content: "";
  position: absolute;
  background:
    linear-gradient(63deg, transparent 49.4%, rgba(120, 120, 120, 0.3) 50%, transparent 50.6%),
    repeating-linear-gradient(90deg, rgba(92, 92, 92, 0.26) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(0deg, rgba(92, 92, 92, 0.16) 0 1px, transparent 1px 28px),
    linear-gradient(135deg, rgba(176, 178, 176, 0.42), rgba(255, 255, 255, 0.18));
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.hm-building--hero {
  left: -120px;
  bottom: -90px;
  width: 520px;
  height: 560px;
}

.hm-building--hero::before {
  left: 40px;
  bottom: 0;
  width: 340px;
  height: 520px;
}

.hm-building--hero::after {
  left: 230px;
  bottom: 0;
  width: 230px;
  height: 360px;
  opacity: 0.8;
}

.hm-arc {
  position: absolute;
  border: 1.5px solid rgba(166, 137, 102, 0.66);
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-radius: 50%;
}

.hm-arc--one {
  right: -28px;
  top: 16px;
  width: 520px;
  height: 520px;
}

.hm-arc--two {
  right: 34px;
  top: 96px;
  width: 390px;
  height: 390px;
}

.hm-paper {
  position: absolute;
  color: #272725;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 243, 239, 0.98)),
    repeating-linear-gradient(0deg, transparent 0 11px, rgba(51, 51, 51, 0.025) 11px 12px);
  border: 1px solid rgba(51, 51, 51, 0.08);
  box-shadow: 0 28px 58px rgba(50, 48, 44, 0.22);
}

.hm-paper--report {
  z-index: 3;
  left: 118px;
  top: 54px;
  width: 382px;
  height: 500px;
  padding: 74px 58px 46px;
  transform: rotate(-12deg);
}

.hm-paper--map {
  z-index: 2;
  right: 0;
  top: 92px;
  width: 382px;
  height: 520px;
  padding: 74px 48px 44px;
  transform: rotate(8deg);
}

.hm-paper__logo {
  position: absolute;
  left: 58px;
  top: 32px;
  width: 146px;
  height: 28px;
  object-fit: contain;
  object-position: left center;
}

.hm-paper h2 {
  margin: 0;
  color: #20211f;
  font-size: 31px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-shadow: 0 0 0 #20211f;
}

.hm-paper__line {
  width: 58px;
  height: 2px;
  margin-top: 28px;
  background: var(--gold-strong);
}

.hm-paper__tower {
  position: absolute;
  left: 86px;
  bottom: 54px;
  width: 230px;
  height: 250px;
  opacity: 0.54;
  background:
    repeating-linear-gradient(90deg, rgba(75, 75, 75, 0.48) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(0deg, rgba(75, 75, 75, 0.3) 0 1px, transparent 1px 22px),
    linear-gradient(130deg, rgba(120, 120, 120, 0.3), rgba(255, 255, 255, 0.15));
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.hm-value-orbit {
  position: relative;
  width: 230px;
  height: 230px;
  margin: 60px auto 36px;
  border: 1px dashed rgba(51, 51, 51, 0.22);
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.hm-value-orbit::before,
.hm-value-orbit::after {
  content: "";
  position: absolute;
  inset: 38px;
  border: 1px solid rgba(51, 51, 51, 0.12);
  border-radius: 50%;
}

.hm-value-orbit::after {
  inset: 76px;
  border-color: rgba(166, 137, 102, 0.38);
}

.hm-value-orbit strong {
  z-index: 1;
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  color: #fff;
  background: var(--gold-strong);
  border-radius: 50%;
  font-size: 15px;
}

.hm-value-orbit span {
  position: absolute;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  color: #fff;
  background: #4c4b49;
  border-radius: 50%;
  font-size: 14px;
}

.hm-value-orbit span:nth-child(1) { top: 8px; left: 50%; transform: translateX(-50%); }
.hm-value-orbit span:nth-child(2) { right: 8px; top: 50%; transform: translateY(-50%); }
.hm-value-orbit span:nth-child(4) { bottom: 8px; left: 50%; transform: translateX(-50%); }
.hm-value-orbit span:nth-child(5) { left: 8px; top: 50%; transform: translateY(-50%); }

.hm-paper__bars {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.hm-paper__bars i {
  display: block;
  height: 8px;
  background: linear-gradient(90deg, rgba(166, 137, 102, 0.75), rgba(166, 137, 102, 0.12));
}

.hm-paper__bars i:nth-child(2) { width: 74%; }
.hm-paper__bars i:nth-child(3) { width: 88%; }

.hm-medallion {
  position: absolute;
  z-index: 4;
  right: 150px;
  bottom: -70px;
  width: 240px;
  height: 240px;
  border: 4px solid rgba(166, 137, 102, 0.55);
  border-radius: 50%;
  background: radial-gradient(circle, #f1eee8, #dcd8cf);
  box-shadow: 0 20px 45px rgba(50, 48, 44, 0.18);
  display: grid;
  place-items: center;
}

.hm-logo-knot {
  width: 150px;
  height: 128px;
  object-fit: contain;
  display: block;
}

.hm-section {
  position: relative;
  min-height: 945px;
  padding: clamp(70px, 7vw, 104px) clamp(40px, 5vw, 88px);
}

.hm-opportunity {
  padding-top: 40px;
}

.hm-section-label {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 20px;
  color: var(--gold-strong);
  font-size: 22px;
  letter-spacing: 0.08em;
}

.hm-section-label span {
  font-size: 34px;
}

.hm-section-label i {
  width: 92px;
  height: 1px;
  background: rgba(166, 137, 102, 0.64);
}

.hm-section-label strong {
  color: #2b2b29;
  font-weight: 500;
}

.hm-center-head {
  position: relative;
  z-index: 1;
  max-width: 1040px;
  margin: 0 auto 58px;
  text-align: center;
}

.hm-opportunity .hm-center-head {
  margin-bottom: 0;
}

.hm-center-head h2 {
  font-size: clamp(44px, 4.2vw, 72px);
}

.hm-center-head p {
  margin-top: 18px;
  font-size: 22px;
}

.hm-opportunity__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 555px 138px minmax(560px, 1fr);
  gap: 44px;
  align-items: center;
}

.hm-chaos h3,
.hm-engineering h3 {
  margin: 0 0 24px;
  font-size: 34px;
  line-height: 1.2;
}

.hm-scatter {
  position: relative;
  min-height: 520px;
}

.hm-scatter::before,
.hm-scatter::after {
  content: "";
  position: absolute;
  inset: 80px 20px;
  background:
    linear-gradient(25deg, transparent 49.8%, rgba(51,51,51,.16) 50%, transparent 50.2%),
    linear-gradient(150deg, transparent 49.8%, rgba(51,51,51,.16) 50%, transparent 50.2%);
}

.hm-sheet,
.hm-note {
  position: absolute;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(51, 51, 51, 0.08);
  box-shadow: 0 14px 34px rgba(50, 48, 44, 0.12);
}

.hm-sheet {
  width: 250px;
  height: 158px;
  padding: 22px;
  color: rgba(51, 51, 51, 0.42);
  font-family: var(--latin);
  font-size: 10px;
  letter-spacing: 0.08em;
}

.hm-sheet::after {
  content: "";
  display: block;
  height: 62px;
  margin-top: 20px;
  background:
    repeating-linear-gradient(0deg, rgba(51, 51, 51, 0.18) 0 1px, transparent 1px 11px),
    linear-gradient(90deg, rgba(166,137,102,.25), transparent);
}

.hm-sheet--concept { left: 34px; top: 58px; transform: rotate(-8deg); }
.hm-sheet--visual { right: 24px; top: 88px; transform: rotate(12deg); }
.hm-sheet--plan { left: 92px; bottom: 76px; transform: rotate(2deg); }
.hm-sheet--media { right: 64px; bottom: 38px; transform: rotate(-10deg); }

.hm-note {
  z-index: 2;
  width: 102px;
  height: 88px;
  display: grid;
  place-items: center;
  text-align: center;
  color: #4e4a42;
  font-size: 24px;
  line-height: 1.35;
}

.hm-note--a { left: 278px; top: 52px; transform: rotate(-4deg); }
.hm-note--b { right: 2px; top: 214px; transform: rotate(5deg); }
.hm-note--c { left: 14px; bottom: 42px; transform: rotate(8deg); }
.hm-note--d { right: 176px; bottom: 10px; transform: rotate(-7deg); }

.hm-turning {
  position: relative;
  height: 620px;
  border-radius: 7px;
  color: #c2a16b;
  background: #2b2b2a;
  box-shadow: 0 18px 36px rgba(35,34,32,.22);
  display: grid;
  place-items: center;
}

.hm-turning::before,
.hm-turning::after {
  content: "";
  position: absolute;
  top: 50%;
  height: 1px;
  background: rgba(166, 137, 102, 0.92);
}

.hm-turning::before {
  right: 100%;
  width: 66px;
}

.hm-turning::after {
  left: 100%;
  width: 64px;
}

.hm-turning span {
  position: relative;
  font-size: 32px;
  letter-spacing: 0.08em;
}

.hm-turning span::before,
.hm-turning span::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 1px;
  height: 142px;
  background: rgba(166,137,102,.7);
}

.hm-turning span::before { bottom: calc(100% + 28px); }
.hm-turning span::after { top: calc(100% + 28px); }

.hm-engineering {
  position: relative;
  min-height: 620px;
  padding-left: 42px;
}

.hm-radar {
  position: absolute;
  left: 0;
  top: 108px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  opacity: 0.88;
  background:
    conic-gradient(from -20deg, rgba(166,137,102,.45), rgba(166,137,102,.12), rgba(166,137,102,.35), transparent 74%),
    repeating-radial-gradient(circle, transparent 0 38px, rgba(51,51,51,.14) 39px 40px),
    repeating-conic-gradient(rgba(51,51,51,.12) 0 1deg, transparent 1deg 30deg);
}

.hm-engineering__list {
  position: absolute;
  left: 244px;
  top: 58px;
  width: 150px;
  display: grid;
  gap: 14px;
}

.hm-engineering__list div {
  min-height: 62px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 8px 18px;
  border: 1px solid rgba(166,137,102,.35);
  border-radius: 7px;
  background: rgba(255,255,255,.62);
}

.hm-engineering__list i {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(166,137,102,.65);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--gold-strong);
  font-style: normal;
  font-size: 12px;
}

.hm-engineering__list strong {
  font-size: 23px;
}

.hm-workflow {
  position: absolute;
  right: 0;
  top: 58px;
  width: 156px;
  height: 460px;
  min-height: 0;
  padding: 24px 20px;
  border: 1px solid rgba(51,51,51,.14);
  border-radius: 8px;
  display: grid;
  align-content: start;
  gap: 10px;
  text-align: center;
  background: rgba(255,255,255,.5);
}

.hm-workflow strong {
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(51,51,51,.12);
  font-weight: 500;
}

.hm-workflow span {
  color: #4f4b45;
}

.hm-workflow span::after {
  content: "↓";
  display: block;
  margin-top: 6px;
  color: rgba(51,51,51,.35);
}

.hm-workflow span:last-child::after {
  content: "";
}

.hm-bottom-call {
  position: absolute;
  left: -16px;
  right: 0;
  bottom: 0;
  height: 78px;
  display: flex;
  align-items: center;
  padding: 0 42px;
  border: 1px solid rgba(51,51,51,.13);
  color: #242321;
  font-size: 25px;
  font-weight: 700;
}

.hm-bottom-call::before {
  content: "";
  width: 4px;
  height: 34px;
  margin-right: 22px;
  background: var(--gold-strong);
}

.hm-bottom-call::after {
  content: "";
  position: absolute;
  right: 30px;
  width: 46px;
  height: 46px;
  background: url("../img/huanmao-logo-symbol.aea37c15cba3.png") center / contain no-repeat;
  opacity: 0.58;
}

.hm-brand-small {
  position: absolute;
  top: 42px;
  left: 48px;
  color: #2c2b29;
  font-family: var(--latin);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
}

.hm-system__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 260px minmax(520px, 0.46fr) minmax(430px, 0.38fr);
  gap: 70px;
  align-items: center;
  width: min(100%, 1500px);
  margin: 0 auto;
}

.hm-levels {
  display: grid;
  gap: 52px;
}

.hm-levels div {
  display: grid;
  grid-template-columns: 70px 62px 1fr;
  align-items: center;
  gap: 20px;
}

.hm-levels i {
  width: 54px;
  height: 54px;
  border: 1px solid rgba(51,51,51,.1);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(166,137,102,.28), transparent 42%), #fff;
  box-shadow: 0 8px 18px rgba(35,34,32,.1);
}

.hm-levels strong {
  color: var(--gold-strong);
  font-size: 34px;
  font-weight: 500;
}

.hm-levels span {
  font-size: 24px;
}

.hm-brand-orbit {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle, transparent 0 76px, rgba(166,137,102,.28) 77px 79px, transparent 80px 118px),
    conic-gradient(from 20deg, rgba(166,137,102,.08), rgba(166,137,102,.23), rgba(166,137,102,.08), transparent);
}

.hm-brand-orbit::before,
.hm-brand-orbit::after {
  content: "";
  position: absolute;
  inset: 74px;
  border: 2px solid rgba(166,137,102,.55);
  border-radius: 50%;
}

.hm-brand-orbit::after {
  inset: 138px;
  border-color: rgba(51,51,51,.1);
}

.hm-brand-orbit__core {
  position: absolute;
  inset: 50%;
  width: 164px;
  height: 164px;
  transform: translate(-50%, -50%);
  border: 5px solid rgba(166,137,102,.75);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #232321;
  background: rgba(255,255,255,.7);
  font-size: 38px;
  font-weight: 700;
}

.hm-brand-node {
  position: absolute;
  width: 132px;
  height: 132px;
  border: 1px solid rgba(166,137,102,.45);
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 18px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 14px 28px rgba(50,48,44,.1);
  font-size: 20px;
  line-height: 1.25;
}

.hm-brand-node--one { top: -8px; left: 50%; transform: translateX(-50%); }
.hm-brand-node--two { right: 34px; top: 110px; }
.hm-brand-node--three { right: 34px; bottom: 110px; }
.hm-brand-node--four { bottom: -8px; left: 50%; transform: translateX(-50%); }
.hm-brand-node--five { left: 34px; bottom: 110px; }
.hm-brand-node--six { left: 34px; top: 110px; }

.hm-card-stack {
  position: relative;
  min-height: 430px;
}

.hm-stack-card {
  position: absolute;
  width: 310px;
  height: 260px;
  padding: 26px;
  border-radius: 7px;
  border: 1px solid rgba(51,51,51,.1);
  background: rgba(255,255,255,.82);
  box-shadow: 0 18px 34px rgba(50,48,44,.13);
  font-size: 22px;
  font-weight: 700;
}

.hm-stack-card::after {
  content: "";
  display: block;
  height: 110px;
  margin-top: 36px;
  background:
    repeating-linear-gradient(90deg, rgba(166,137,102,.28) 0 22px, transparent 22px 34px),
    repeating-linear-gradient(0deg, rgba(51,51,51,.08) 0 1px, transparent 1px 18px);
}

.hm-stack-card--dark {
  right: 0;
  top: 0;
  color: #fff;
  background: #262626;
}

.hm-stack-card:nth-child(2) { right: 72px; top: 72px; }
.hm-stack-card:nth-child(3) { right: 144px; top: 144px; }
.hm-stack-card--front {
  right: 216px;
  top: 216px;
  width: 330px;
}

.hm-stack-card--front span {
  display: block;
  margin-top: 110px;
  color: var(--gold-strong);
  font-size: 20px;
}

.hm-underlink {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  width: max-content;
  margin: 36px auto 0;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(166,137,102,.8);
  color: var(--gold-strong);
  font-size: 26px;
  letter-spacing: 0.08em;
}

.hm-side-caption {
  position: absolute;
  right: 38px;
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  color: #5a554d;
  font-family: Georgia, serif;
  font-size: 18px;
  letter-spacing: 0.06em;
}

.hm-side-caption::before {
  content: "";
  display: block;
  width: 1px;
  height: 160px;
  margin: 0 auto 22px;
  background: rgba(166,137,102,.58);
}

.hm-section-title {
  position: relative;
  z-index: 1;
  font-size: clamp(46px, 4.8vw, 78px);
}

.hm-section-subtitle {
  position: relative;
  z-index: 1;
  margin-top: 24px;
}

.hm-products__body {
  position: relative;
  z-index: 1;
  width: min(100%, 1320px);
  margin: 62px auto 0;
  padding-left: 140px;
}

.hm-building--product {
  left: -70px;
  bottom: -90px;
  width: 470px;
  height: 650px;
}

.hm-building--product::before {
  left: 0;
  bottom: 0;
  width: 330px;
  height: 560px;
}

.hm-building--product::after {
  left: 112px;
  bottom: 220px;
  width: 190px;
  height: 190px;
  border: 2px solid rgba(166,137,102,.28);
  border-radius: 50%;
  background: transparent;
  clip-path: none;
}

.hm-phase-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid rgba(51,51,51,.14);
  background: rgba(255,255,255,.42);
}

.hm-phase-bar div {
  position: relative;
  min-height: 92px;
  padding: 20px 26px;
  text-align: center;
  border-right: 1px solid rgba(51,51,51,.12);
}

.hm-phase-bar div:last-child {
  border-right: 0;
}

.hm-phase-bar strong {
  color: var(--gold-strong);
  font-size: 26px;
  font-weight: 500;
}

.hm-phase-bar span {
  display: block;
  color: #68635b;
  font-size: 18px;
  line-height: 1.45;
}

.hm-product-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid rgba(51,51,51,.14);
  border-top: 0;
}

.hm-product-card {
  min-height: 485px;
  padding: 42px 42px 36px;
  border-right: 1px solid rgba(51,51,51,.14);
  background: rgba(255,255,255,.35);
}

.hm-product-card:last-child {
  border-right: 0;
}

.hm-product-card--featured {
  border-top: 2px solid var(--gold-strong);
}

.hm-product-card span {
  color: var(--gold-strong);
  font-size: 30px;
}

.hm-product-card h3 {
  margin: 18px 0 8px;
  font-size: 48px;
  line-height: 1.15;
}

.hm-product-card h4 {
  margin: 0 0 26px;
  color: var(--gold-strong);
  font-size: 25px;
  font-weight: 500;
}

.hm-product-card ul {
  margin: 0;
  padding: 24px 0 0;
  border-top: 1px solid rgba(51,51,51,.16);
  list-style: none;
}

.hm-product-card li {
  position: relative;
  padding: 8px 0 8px 20px;
  color: #615d55;
  font-size: 18px;
}

.hm-product-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 19px;
  width: 6px;
  height: 18px;
  background: var(--gold-strong);
}

.hm-product-card a {
  display: inline-block;
  margin-top: 28px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(166,137,102,.8);
  color: var(--gold-strong);
  font-size: 20px;
}

.hm-solutions .hm-gold-rule {
  margin-top: 22px;
}

.hm-solution-table {
  position: relative;
  z-index: 1;
  margin-top: 24px;
  border-top: 1px solid rgba(51,51,51,.14);
  width: min(100%, 1720px);
}

.hm-solution-line {
  display: grid;
  grid-template-columns: 300px 610px 1fr;
  gap: 28px;
  align-items: center;
  min-height: 186px;
  border-bottom: 1px solid rgba(51,51,51,.14);
}

.hm-solution-name {
  display: grid;
  grid-template-columns: 68px 1fr;
  column-gap: 24px;
  align-items: center;
}

.hm-solution-name i {
  grid-row: span 2;
  width: 64px;
  height: 64px;
  border: 1px solid rgba(166,137,102,.72);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--gold-strong);
  font-style: normal;
  font-size: 23px;
}

.hm-solution-name strong {
  font-size: 34px;
}

.hm-solution-name span {
  color: #615d55;
  font-size: 18px;
}

.hm-solution-path {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, auto);
  gap: 22px;
  align-items: center;
  justify-content: center;
}

.hm-solution-path::before {
  content: "";
  position: absolute;
  left: -27px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: rgba(166,137,102,.74);
  transform: skewX(-12deg);
}

.hm-solution-path span {
  display: grid;
  place-items: center;
  min-width: 92px;
  height: 92px;
  border: 1px solid rgba(166,137,102,.66);
  border-radius: 50%;
  color: #2c2b29;
  font-size: 18px;
  text-align: center;
}

.hm-solution-path b {
  color: var(--gold-strong);
  font-size: 34px;
  font-weight: 300;
}

.hm-solution-media {
  position: relative;
  height: 178px;
  overflow: hidden;
}

.hm-solution-media::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0;
  bottom: 0;
  width: 4px;
  background: rgba(166,137,102,.78);
  transform: skewX(-12deg);
  transform-origin: top;
}

.hm-solution-media em {
  position: absolute;
  display: grid;
  place-items: center;
  margin: 0;
  border: 1px solid rgba(51,51,51,.12);
  background: rgba(252,250,246,.92);
  box-shadow: 0 18px 34px rgba(52,50,46,.16);
  color: #56524b;
  font-style: normal;
  text-align: center;
}

.hm-solution-photo {
  overflow: hidden;
  filter: grayscale(1);
}

.hm-solution-photo::before,
.hm-solution-photo::after,
.hm-solution-doc::before,
.hm-solution-doc::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.hm-solution-media .hm-solution-photo--factory {
  left: 18px;
  top: 0;
  width: 250px;
  height: 178px;
  background: url("/static/img/source-assets/vi-marketing-folded.1adcb4e74638.jpg") center / cover no-repeat;
}

.hm-solution-photo--factory::before {
  left: 34px;
  top: 14px;
  width: 58px;
  height: 142px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent 0 42%, rgba(22,22,21,.62) 43% 56%, transparent 57%),
    linear-gradient(180deg, rgba(250,250,248,.22), rgba(20,20,20,.24));
  box-shadow:
    56px 26px 0 -14px rgba(26,26,25,.54),
    86px 68px 0 -18px rgba(26,26,25,.48);
  transform: rotate(31deg);
  transform-origin: top left;
}

.hm-solution-photo--factory::after {
  left: 95px;
  bottom: 30px;
  width: 86px;
  height: 54px;
  border: 8px solid rgba(30,30,29,.5);
  border-radius: 18px 18px 12px 12px;
  box-shadow:
    28px 28px 0 -18px rgba(24,24,23,.58),
    -18px 30px 0 -20px rgba(24,24,23,.5);
  transform: rotate(-12deg);
}

.hm-solution-media .hm-solution-photo--park {
  left: 18px;
  top: 0;
  width: 276px;
  height: 178px;
  background: url("/static/img/source-assets/vi-building-facade.512c66f82041.jpg") center / cover no-repeat;
}

.hm-solution-photo--park::before {
  left: 18px;
  bottom: 27px;
  width: 92px;
  height: 100px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.34) 0 7px, transparent 7px 18px),
    linear-gradient(180deg, rgba(37,37,36,.38), rgba(22,22,21,.12));
  box-shadow:
    82px -18px 0 -4px rgba(38,38,37,.28),
    152px 12px 0 -12px rgba(38,38,37,.24);
  clip-path: polygon(0 22%, 100% 0, 100% 100%, 0 100%);
}

.hm-solution-photo--park::after {
  left: 44px;
  bottom: 0;
  width: 180px;
  height: 120px;
  background:
    repeating-linear-gradient(90deg, rgba(40,40,40,.22) 0 2px, transparent 2px 18px),
    repeating-linear-gradient(0deg, rgba(40,40,40,.16) 0 2px, transparent 2px 20px);
  clip-path: polygon(0 28%, 42% 0, 100% 24%, 100% 100%, 0 100%);
}

.hm-solution-media .hm-solution-photo--meeting {
  left: 18px;
  top: 0;
  width: 276px;
  height: 178px;
  background: url("/static/img/source-assets/vi-reception-wall-fresh.e127f3d701ac.jpg") center / cover no-repeat;
}

.hm-solution-photo--meeting::before {
  left: 42px;
  bottom: 34px;
  width: 190px;
  height: 28px;
  background: rgba(26,26,25,.36);
  box-shadow: 0 13px 0 rgba(26,26,25,.18);
  transform: skewX(-8deg);
}

.hm-solution-photo--meeting::after {
  left: 52px;
  top: 24px;
  width: 156px;
  height: 64px;
  border: 1px solid rgba(255,255,255,.56);
  background:
    linear-gradient(90deg, rgba(20,20,19,.34) 0 1px, transparent 1px),
    linear-gradient(180deg, rgba(245,244,240,.56), rgba(232,231,226,.4));
  box-shadow: 0 12px 22px rgba(26,26,24,.18);
}

.hm-solution-media .hm-solution-photo--factory {
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.12)),
    url("/static/img/generated-assets/enterprise-factory-line-v1.0a3113c97a66.png") center / cover no-repeat;
}

.hm-solution-media .hm-solution-photo--park {
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.1)),
    url("/static/img/generated-assets/business-park-campus-v1.cc953cdf94b4.png") center / cover no-repeat;
}

.hm-solution-media .hm-solution-photo--meeting {
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.14)),
    url("/static/img/generated-assets/association-training-photo-v1.9216009cb0a9.png") center / cover no-repeat;
}

.hm-solution-photo--factory::before,
.hm-solution-photo--factory::after,
.hm-solution-photo--park::before,
.hm-solution-photo--park::after,
.hm-solution-photo--meeting::before,
.hm-solution-photo--meeting::after {
  display: none;
}

.hm-solution-doc {
  padding: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(242,241,237,.9)),
    repeating-linear-gradient(0deg, transparent 0 13px, rgba(51,51,51,.05) 13px 14px);
}

.template-home .hm-solution-doc {
  filter: grayscale(1) brightness(1.16) contrast(.84);
}

.template-home .hm-solution-photo {
  filter: grayscale(1) brightness(1) contrast(.82);
}

.hm-solution-doc span {
  position: relative;
  z-index: 1;
  font-size: 15px;
}

.hm-solution-doc small {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 8px;
  color: rgba(51,51,51,.5);
  font-size: 10px;
}

.hm-solution-doc::after {
  left: 18px;
  right: 18px;
  bottom: 18px;
  height: 36px;
  background: repeating-linear-gradient(90deg, rgba(166,137,102,.2) 0 12px, transparent 12px 21px);
}

.hm-solution-doc--report {
  left: 236px;
  top: 16px;
  z-index: 2;
  width: 190px;
  height: 150px;
  transform: rotate(-3deg);
}

.hm-solution-doc--report::before {
  left: 32px;
  bottom: 24px;
  width: 72px;
  height: 82px;
  opacity: .38;
  background:
    repeating-linear-gradient(90deg, rgba(70,70,70,.4) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(0deg, rgba(70,70,70,.28) 0 1px, transparent 1px 11px);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.hm-solution-doc--plan {
  left: 422px;
  top: 0;
  width: 205px;
  height: 178px;
}

.hm-solution-doc--value {
  right: 0;
  top: 0;
  width: 178px;
  height: 178px;
}

.hm-solution-doc--value::after {
  left: 62px;
  right: auto;
  bottom: 34px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background:
    conic-gradient(rgba(166,137,102,.78) 0 32%, rgba(166,137,102,.22) 0 100%);
}

.hm-solution-doc--cluster {
  left: 282px;
  top: 14px;
  width: 270px;
  height: 150px;
}

.hm-solution-doc--cluster::after {
  left: 22px;
  right: 22px;
  bottom: 24px;
  height: 58px;
  background:
    linear-gradient(90deg, rgba(166,137,102,.18), transparent 32%, rgba(166,137,102,.18) 33% 66%, transparent 67%),
    repeating-linear-gradient(0deg, rgba(51,51,51,.08) 0 1px, transparent 1px 12px);
}

.hm-solution-doc--map {
  right: 0;
  top: 0;
  width: 294px;
  height: 178px;
}

.hm-solution-doc--map::after {
  left: 32px;
  right: 32px;
  bottom: 24px;
  height: 84px;
  background:
    radial-gradient(circle at 28% 42%, rgba(166,137,102,.68) 0 5px, transparent 6px),
    radial-gradient(circle at 62% 30%, rgba(166,137,102,.68) 0 5px, transparent 6px),
    radial-gradient(circle at 72% 68%, rgba(166,137,102,.68) 0 5px, transparent 6px),
    linear-gradient(135deg, transparent 0 48%, rgba(51,51,51,.16) 49% 51%, transparent 52%),
    linear-gradient(25deg, transparent 0 45%, rgba(51,51,51,.12) 46% 48%, transparent 49%);
}

.hm-solution-doc--training {
  left: 276px;
  top: 12px;
  width: 188px;
  height: 154px;
  transform: rotate(-2deg);
}

.hm-solution-doc--members {
  left: 448px;
  top: 0;
  width: 210px;
  height: 178px;
}

.hm-solution-doc--members::after {
  left: 26px;
  right: 26px;
  bottom: 20px;
  height: 78px;
  background:
    repeating-linear-gradient(0deg, rgba(51,51,51,.12) 0 1px, transparent 1px 16px),
    radial-gradient(circle at 16px 8px, rgba(166,137,102,.45) 0 5px, transparent 6px);
}

.hm-solution-doc--union {
  right: 0;
  top: 0;
  width: 180px;
  height: 178px;
}

.hm-solution-doc--union::after {
  left: 46px;
  right: auto;
  bottom: 34px;
  width: 92px;
  height: 70px;
  background:
    radial-gradient(circle at 50% 50%, rgba(166,137,102,.7) 0 15px, transparent 16px),
    radial-gradient(circle at 18% 18%, rgba(51,51,51,.22) 0 13px, transparent 14px),
    radial-gradient(circle at 84% 22%, rgba(51,51,51,.22) 0 13px, transparent 14px),
    radial-gradient(circle at 24% 82%, rgba(51,51,51,.22) 0 13px, transparent 14px),
    radial-gradient(circle at 82% 82%, rgba(51,51,51,.22) 0 13px, transparent 14px);
}

/* Laptop widths: the 1fr media column shrinks below the doc cards' fixed px
   offsets, so the secondary cards collide and their labels overlap into an
   unreadable smear. Keep only the photo + one primary doc card per row; the
   path column already carries the full step sequence. */
@media (max-width: 1700px) {
  .hm-solution-media em.hm-solution-doc--plan,
  .hm-solution-media em.hm-solution-doc--value,
  .hm-solution-media em.hm-solution-doc--cluster,
  .hm-solution-media em.hm-solution-doc--members,
  .hm-solution-media em.hm-solution-doc--union {
    display: none;
  }
}

.hm-solution-cta {
  position: relative;
  display: flex;
  width: max-content;
  margin: 30px auto 0;
}

.hm-solution-cta.reveal {
  opacity: 1;
  transform: none;
}

.hm-solution-cta::before,
.hm-solution-cta::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 300px;
  height: 1px;
  background: rgba(166,137,102,.52);
}

.hm-solution-cta::before {
  right: calc(100% + 34px);
}

.hm-solution-cta::after {
  left: calc(100% + 34px);
}

.hm-deliverables {
  min-height: 945px;
  padding-right: 360px;
  background:
    radial-gradient(circle at 50% 60%, rgba(217,205,184,.16), transparent 52%),
    linear-gradient(180deg, #f7f5ef 0%, #f6f3eb 100%);
}

.hm-deliverables__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 48px;
  margin-top: 54px;
}

.hm-deliverable-card {
  position: relative;
  min-height: 294px;
  display: grid;
  align-content: end;
}

.hm-deliverable-card > div {
  position: relative;
  min-height: 226px;
  border: 1px solid rgba(51,51,51,.13);
  background: rgba(255,255,255,.78);
  box-shadow: 0 28px 46px rgba(44,42,38,.22);
  overflow: hidden;
}

.hm-deliverable-card p {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin: 18px 0 0;
  color: #5f5a52;
  font-size: 19px;
  letter-spacing: 0.05em;
}

.hm-deliverable-card p b {
  color: var(--gold-strong);
  font-family: Georgia, serif;
  font-size: 24px;
  font-weight: 500;
}

.hm-deliverable-card strong {
  position: relative;
  z-index: 1;
  display: block;
  color: #262523;
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: 0.05em;
}

.hm-deliverable-card span {
  position: relative;
  z-index: 1;
  color: #625d55;
  font-size: 13px;
}

.hm-asset-report {
  min-height: 238px;
  padding: 54px 44px 34px 82px;
}

.hm-deliverable-card .hm-asset-report {
  background:
    linear-gradient(112deg, rgba(248,247,243,.96) 0 49%, rgba(38,38,38,.88) 50% 100%),
    url("/static/img/hero-report.f394e59e3423.png") center / cover no-repeat;
}

.hm-asset-report i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 34px;
  background: linear-gradient(90deg, #1f1f1f, #4a4a47 48%, #1f1f1f);
}

.hm-asset-report img {
  position: absolute;
  left: 74px;
  top: 26px;
  width: 34px;
  height: 30px;
  object-fit: contain;
  filter: grayscale(1);
}

.hm-asset-report strong,
.hm-asset-report span {
  color: #252523;
}

.hm-asset-report::before {
  content: "";
  position: absolute;
  left: 156px;
  bottom: 36px;
  width: 96px;
  height: 112px;
  opacity: .33;
  background:
    repeating-linear-gradient(90deg, rgba(80,80,80,.5) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(0deg, rgba(80,80,80,.32) 0 1px, transparent 1px 12px);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.hm-asset-report::after {
  content: "";
  position: absolute;
  right: 38px;
  bottom: 30px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, transparent 0 42%, rgba(255,255,255,.22) 43% 45%, transparent 46%),
    conic-gradient(rgba(166,137,102,.52), rgba(166,137,102,.12), rgba(255,255,255,.16), rgba(166,137,102,.52));
}

.hm-asset-map,
.hm-asset-vi {
  padding: 48px 44px 30px;
}

.hm-deliverable-card .hm-asset-map,
.hm-deliverable-card .hm-asset-vi,
.hm-deliverable-card .hm-asset-calendar {
  background: linear-gradient(180deg, #fff 0%, #e8e3d8 100%);
}

.hm-asset-map::before,
.hm-asset-vi::before,
.hm-asset-map::after,
.hm-asset-vi::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.hm-asset-map div {
  position: absolute;
  left: 42px;
  right: 42px;
  bottom: 32px;
  height: 92px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.hm-asset-map div span {
  border: 1px solid rgba(51,51,51,.1);
  background:
    repeating-linear-gradient(0deg, rgba(51,51,51,.08) 0 1px, transparent 1px 12px),
    linear-gradient(180deg, rgba(166,137,102,.16), rgba(255,255,255,.6));
}

.hm-asset-map::after,
.hm-asset-vi::after {
  left: 42px;
  right: 42px;
  bottom: 18px;
  height: 12px;
  background: repeating-linear-gradient(90deg, rgba(166,137,102,.22) 0 18px, transparent 18px 29px);
}

.hm-asset-vi img {
  position: absolute;
  right: 54px;
  top: 40px;
  width: 110px;
  height: 88px;
  object-fit: contain;
  opacity: .8;
  filter: grayscale(1);
}

.hm-asset-vi span {
  position: absolute;
  left: 44px;
  bottom: 60px;
  color: rgba(51,51,51,.5);
  font-family: Georgia, serif;
  font-size: 42px;
}

.hm-asset-vi::before {
  right: 42px;
  bottom: 58px;
  width: 122px;
  height: 48px;
  background: linear-gradient(90deg, #5d5d5a 0 28%, #d6d3ca 28% 54%, #a68b62 54% 76%, #1f1f1e 76%);
}

.hm-asset-calendar {
  min-height: 224px;
  padding: 48px 38px 30px;
  overflow: visible;
}

.hm-asset-calendar::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 24px;
  background: repeating-linear-gradient(90deg, #3b3a38 0 6px, transparent 6px 24px);
}

.hm-asset-calendar div {
  position: absolute;
  left: 36px;
  right: 36px;
  bottom: 28px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.hm-asset-calendar div span {
  display: grid;
  place-items: center;
  min-height: 36px;
  color: rgba(51,51,51,.52);
  background: rgba(166,137,102,.12);
  border: 1px solid rgba(51,51,51,.08);
  font-size: 11px;
}

.hm-asset-ppt {
  min-height: 224px;
  padding: 52px 42px;
  color: #f4f2ee;
}

.hm-deliverable-card .hm-asset-ppt {
  background:
    linear-gradient(112deg, rgba(28,28,27,.96) 0 48%, rgba(42,35,28,.74) 49% 100%),
    url("/static/img/source-assets/vi-building-facade.512c66f82041.jpg") right center / cover no-repeat,
    linear-gradient(160deg, transparent 0 46%, rgba(255,255,255,.12) 47% 50%, transparent 51%),
    #242424;
}

.hm-asset-ppt strong,
.hm-asset-ppt span {
  color: #f6f3ee;
}

.hm-asset-ppt::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 185px;
  height: 160px;
  opacity: .54;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 1px, transparent 1px 20px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.16) 0 1px, transparent 1px 20px);
  clip-path: polygon(42% 0, 100% 100%, 0 100%);
}

.hm-asset-ppt::after {
  content: "";
  position: absolute;
  left: 42px;
  bottom: 36px;
  width: 160px;
  height: 44px;
  background:
    radial-gradient(circle at 12% 50%, rgba(166,137,102,.84) 0 12px, transparent 13px),
    radial-gradient(circle at 38% 50%, rgba(166,137,102,.84) 0 12px, transparent 13px),
    radial-gradient(circle at 64% 50%, rgba(166,137,102,.84) 0 12px, transparent 13px),
    radial-gradient(circle at 90% 50%, rgba(166,137,102,.84) 0 12px, transparent 13px);
}

.hm-asset-dashboard {
  min-height: 224px;
  padding: 34px 34px 30px;
}

.hm-deliverable-card .hm-asset-dashboard {
  border: 10px solid #1f1f1f;
  border-radius: 24px;
  background: #f7f6f2;
}

.hm-asset-dashboard strong {
  font-size: 18px;
}

.hm-dashboard-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 18px;
}

.hm-dashboard-metrics span {
  min-height: 42px;
  padding: 8px;
  color: #2f2d2a;
  background: rgba(166,137,102,.12);
  font-family: var(--latin);
  font-size: 10px;
}

.hm-dashboard-chart {
  position: absolute;
  left: 34px;
  right: 34px;
  bottom: 28px;
  height: 74px;
  background:
    radial-gradient(circle at 82% 48%, transparent 0 25px, rgba(166,137,102,.48) 26px 33px, transparent 34px),
    linear-gradient(155deg, transparent 0 18%, rgba(51,51,51,.32) 19% 21%, transparent 22% 45%, rgba(166,137,102,.7) 46% 49%, transparent 50%),
    repeating-linear-gradient(0deg, rgba(51,51,51,.08) 0 1px, transparent 1px 18px);
}

.hm-deliverable-card > div {
  border: 0;
  background-color: transparent;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 110% auto;
  box-shadow: none;
  filter: drop-shadow(0 20px 22px rgba(44,42,38,.16));
  overflow: visible;
}

.hm-deliverable-card .hm-asset-report {
  background: url("/static/img/generated-assets/deliverable-report-book-home-v3.ce6579c39f13.png") center bottom / 144% auto no-repeat;
}

.template-home .hm-asset-report img,
.template-home .hm-asset-report strong,
.template-home .hm-asset-report span {
  visibility: hidden;
}

.hm-deliverable-card .hm-asset-map {
  background: url("/static/img/generated-assets/deliverable-strategy-map-trim-v1.935d1caf4298.png") center bottom / 96% auto no-repeat;
  filter: brightness(1.18) contrast(.86) drop-shadow(0 20px 22px rgba(44,42,38,.16));
}

.hm-deliverable-card .hm-asset-vi {
  background: url("/static/img/generated-assets/deliverable-vi-system-trim-v2.f02fbc71d990.png") center bottom / 88% auto no-repeat;
  filter: brightness(1.12) contrast(.86) drop-shadow(0 20px 22px rgba(44,42,38,.16));
}

.hm-deliverable-card .hm-asset-calendar {
  background: url("/static/img/generated-assets/deliverable-content-calendar-trim-v1.9a40e767bb9f.png") center bottom / 118% auto no-repeat;
  filter: brightness(1.18) contrast(.86) drop-shadow(0 20px 22px rgba(44,42,38,.16));
}

.hm-deliverable-card .hm-asset-ppt {
  background: url("/static/img/generated-assets/deliverable-sales-deck-trim-v1.83f414a3da5e.png") right bottom / 120% auto no-repeat;
  filter: brightness(.92) contrast(1.06) drop-shadow(0 20px 22px rgba(44,42,38,.16));
}

.hm-deliverable-card .hm-asset-dashboard {
  border: 0;
  border-radius: 0;
  background: url("/static/img/generated-assets/deliverable-dashboard-tablet-trim-v1.080b4b8be295.png") center bottom / 108% auto no-repeat;
  filter: brightness(1) contrast(.94) drop-shadow(0 20px 22px rgba(44,42,38,.16));
}

.hm-asset-report i,
.hm-asset-map div,
.hm-asset-calendar div,
.hm-dashboard-metrics,
.hm-dashboard-chart,
.hm-asset-report::before,
.hm-asset-report::after,
.hm-asset-map::before,
.hm-asset-map::after,
.hm-asset-vi::before,
.hm-asset-vi::after,
.hm-asset-calendar::before,
.hm-asset-ppt::before,
.hm-asset-ppt::after {
  display: none;
}

.hm-asset-report strong,
.hm-asset-report span,
.hm-asset-map strong,
.hm-asset-vi strong,
.hm-asset-calendar strong,
.hm-asset-ppt strong,
.hm-asset-ppt span,
.hm-asset-dashboard strong {
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}

.hm-asset-report img {
  left: 68px;
  top: 30px;
  width: 32px;
  height: 28px;
  opacity: .78;
}

.hm-deliverable-card .hm-asset-report::after {
  display: none;
}

.template-home .hm-deliverable-card {
  isolation: isolate;
}

.template-home .hm-deliverable-card::before {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 50px;
  z-index: 0;
  height: 20px;
  border-radius: 50%;
  background: rgba(47,40,32,.22);
  filter: blur(10px);
  transform: skewX(-6deg);
  pointer-events: none;
}

.template-home .hm-deliverable-card--strategy::before,
.template-home .hm-deliverable-card--vi::before {
  left: 32px;
  right: 32px;
  bottom: 54px;
  height: 16px;
  background: rgba(47,40,32,.25);
}

.template-home .hm-deliverable-card--calendar::before {
  left: 24px;
  right: 24px;
  bottom: 54px;
  background: rgba(47,40,32,.24);
}

.template-home .hm-deliverable-card--dashboard::before {
  left: 30px;
  right: 30px;
  bottom: 54px;
  background: rgba(47,40,32,.24);
}

.template-home .hm-deliverable-card > div,
.template-home .hm-deliverable-card p {
  z-index: 2;
}

.template-home .hm-deliverable-card .hm-asset-report::after,
.template-home .hm-deliverable-card .hm-asset-map::after,
.template-home .hm-deliverable-card .hm-asset-vi::after,
.template-home .hm-deliverable-card .hm-asset-calendar::after,
.template-home .hm-deliverable-card .hm-asset-ppt::after,
.template-home .hm-deliverable-card .hm-asset-dashboard::after {
  content: "";
  display: block;
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 4px;
  z-index: 3;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(54,48,40,.24) 12%, rgba(54,48,40,.18) 88%, transparent);
  filter: blur(.8px);
  pointer-events: none;
}

.template-home .hm-deliverable-card .hm-asset-report::after,
.template-home .hm-deliverable-card .hm-asset-ppt::after {
  bottom: 3px;
  background: linear-gradient(90deg, transparent, rgba(24,22,20,.24) 14%, rgba(24,22,20,.18) 86%, transparent);
}

.hm-asset-vi img {
  left: 74px;
  top: 92px;
  right: auto;
  width: 118px;
  height: 96px;
  opacity: .64;
}

.hm-asset-vi span {
  display: none;
}

.hm-asset-dashboard strong {
  position: absolute;
  left: 54px;
  top: 46px;
}

.hm-final-cta {
  position: absolute;
  right: 78px;
  bottom: 84px;
  z-index: 2;
  width: 270px;
  padding-left: 38px;
  border-left: 1px solid rgba(166,137,102,.6);
}

.hm-final-cta h3 {
  margin: 0;
  font-size: 34px;
  line-height: 1.25;
}

.hm-final-cta p {
  margin: 22px 0 34px;
  color: #5f5a52;
  font-size: 18px;
  line-height: 1.8;
}

.hm-final-cta .hm-btn {
  min-width: 240px;
  height: 62px;
}

@media (min-width: 1321px) {
  .hm-final-cta .hm-btn {
    translate: 0 12px;
  }
}

.hm-final-cta .hm-link-cta {
  margin-top: 28px;
  font-size: 20px;
}

@media (min-width: 1321px) {
  .template-home .hm-products,
  .template-home .hm-solutions,
  .template-home .hm-deliverables {
    box-sizing: border-box;
    height: 941px;
    min-height: 941px;
    padding-top: 72px;
    padding-bottom: 42px;
  }

  .template-home .hm-products .hm-section-title,
  .template-home .hm-solutions .hm-section-title,
  .template-home .hm-deliverables .hm-section-title {
    font-size: clamp(46px, 4vw, 66px);
    line-height: 1.14;
  }

  .template-home .hm-products .hm-section-subtitle,
  .template-home .hm-solutions .hm-section-subtitle,
  .template-home .hm-deliverables .hm-section-subtitle {
    margin-top: 16px;
    font-size: 20px;
    line-height: 1.65;
  }

  .template-home .hm-solutions .hm-section-title {
    color: #24231f;
    font-size: 62px;
    font-weight: 800;
    letter-spacing: .035em;
    text-shadow: none;
    translate: 0 -6px;
  }

  .template-home .hm-solutions .hm-section-subtitle {
    translate: 0 -6px;
  }

  .template-home .hm-deliverables .hm-section-label {
    translate: -12px -24px;
  }

  .template-home .hm-deliverables .hm-section-title,
  .template-home .hm-deliverables .hm-section-subtitle {
    translate: -12px -8px;
  }

  .template-home .hm-deliverables .hm-section-label {
    color: #b39b6b;
  }

  .template-home .hm-deliverables .hm-section-label span {
    font-weight: 400;
  }

  .template-home .hm-deliverables .hm-section-title {
    color: #3c3933;
    font-weight: 800;
    text-shadow: none;
  }

  .template-home .hm-deliverables .hm-section-subtitle {
    color: #5c574d;
    text-shadow: none;
  }

  .hm-products__body {
    margin-top: 42px;
  }

  .hm-building--product {
    bottom: -132px;
    height: 610px;
  }

  .hm-phase-bar div {
    min-height: 74px;
    padding: 14px 22px;
  }

  .hm-phase-bar strong {
    font-size: 22px;
  }

  .hm-phase-bar span {
    font-size: 15px;
    line-height: 1.35;
  }

  .hm-product-card {
    min-height: 402px;
    padding: 30px 38px 24px;
  }

  .hm-product-card span {
    font-size: 25px;
  }

  .hm-product-card h3 {
    margin: 14px 0 6px;
    font-size: 42px;
  }

  .hm-product-card h4 {
    margin-bottom: 18px;
    font-size: 22px;
  }

  .hm-product-card ul {
    padding-top: 18px;
  }

  .hm-product-card li {
    padding: 6px 0 6px 18px;
    font-size: 16px;
  }

  .hm-product-card li::before {
    top: 16px;
    height: 15px;
  }

  .hm-product-card a {
    margin-top: 18px;
    font-size: 18px;
  }

  .hm-solutions .hm-gold-rule {
    margin: 18px 0 0;
  }

  .hm-solution-table {
    margin-top: 22px;
  }

  .hm-solution-line {
    grid-template-columns: 280px 460px minmax(0, 1fr);
    gap: 24px;
    min-height: 186px;
  }

  .hm-solution-name {
    grid-template-columns: 58px 1fr;
    column-gap: 20px;
  }

  .hm-solution-name i {
    width: 54px;
    height: 54px;
    font-size: 20px;
  }

  .hm-solution-name strong {
    font-size: 30px;
  }

  .hm-solution-name span {
    font-size: 16px;
    line-height: 1.55;
  }

  .hm-solution-path {
    gap: 12px;
  }

  .hm-solution-path span {
    min-width: 74px;
    height: 74px;
    font-size: 15px;
  }

  .hm-solution-path b {
    font-size: 28px;
  }

  .hm-solution-media {
    height: 182px;
  }

  .hm-solution-photo--factory,
  .hm-solution-photo--park,
  .hm-solution-photo--meeting {
    width: 230px;
    height: 162px;
  }

  .hm-solution-doc span {
    font-size: 13px;
  }

  .hm-solution-doc small {
    font-size: 9px;
  }

  .hm-solution-doc::after {
    bottom: 14px;
    height: 26px;
  }

  .hm-solution-doc--report {
    left: 196px;
    top: 10px;
    width: 172px;
    height: 140px;
  }

  .hm-solution-doc--plan {
    left: 354px;
    width: 196px;
    height: 162px;
  }

  .hm-solution-doc--value {
    width: 170px;
    height: 162px;
  }

  .hm-solution-doc--cluster {
    left: 220px;
    top: 10px;
    width: 250px;
    height: 140px;
  }

  .hm-solution-doc--map {
    width: 292px;
    height: 162px;
  }

  .hm-solution-doc--training {
    left: 204px;
    top: 10px;
    width: 176px;
    height: 140px;
  }

  .hm-solution-doc--members {
    left: 360px;
    width: 202px;
    height: 162px;
  }

  .hm-solution-doc--union {
    width: 174px;
    height: 162px;
  }

  .hm-solution-cta {
    width: 400px;
    height: 58px;
    margin-top: 36px;
    justify-content: center;
    translate: -60px 12px;
    font-size: 18px;
  }

  .hm-deliverables {
    padding-right: 434px;
  }

  .hm-deliverables__grid {
    gap: 36px 18px;
    margin-top: 30px;
  }

  .hm-deliverables .hm-side-caption {
    top: 104px;
    transform: none;
  }

  .hm-deliverables .hm-side-caption::after {
    content: "";
    position: absolute;
    right: 2px;
    top: -56px;
    width: 34px;
    height: 30px;
    background: url("../img/huanmao-logo-symbol.aea37c15cba3.png") center / contain no-repeat;
    filter: grayscale(1);
    opacity: .72;
  }

  .hm-deliverable-card {
    min-height: 294px;
  }

  .hm-deliverable-card > div {
    min-height: 262px;
  }

  .template-home .hm-deliverable-card .hm-asset-calendar {
    background: url("/static/img/generated-assets/deliverable-content-calendar-trim-v1.9a40e767bb9f.png") center 92% / 118% auto no-repeat;
  }

  .hm-deliverable-card p {
    margin-top: 12px;
    font-size: 16px;
  }

  .hm-deliverable-card p b {
    font-size: 20px;
  }

  .hm-deliverable-card strong {
    font-size: 20px;
  }

  .hm-asset-report {
    min-height: 234px;
    padding: 40px 30px 26px 62px;
  }

  .hm-asset-report i {
    width: 26px;
  }

  .hm-asset-report img {
    left: 54px;
    top: 20px;
    width: 26px;
    height: 24px;
  }

  .hm-asset-report::before {
    left: 122px;
    bottom: 24px;
    width: 72px;
    height: 84px;
  }

  .hm-asset-report::after {
    right: 24px;
    bottom: 20px;
    width: 86px;
    height: 86px;
  }

  .hm-asset-map,
  .hm-asset-vi {
    padding: 36px 32px 22px;
  }

  .hm-asset-map div {
    left: 30px;
    right: 30px;
    bottom: 26px;
    height: 66px;
  }

  .hm-asset-map::after,
  .hm-asset-vi::after {
    left: 30px;
    right: 30px;
    bottom: 14px;
    height: 9px;
  }

  .hm-asset-vi img {
    right: 34px;
    top: 32px;
    width: 82px;
    height: 66px;
  }

  .hm-asset-vi span {
    left: 32px;
    bottom: 48px;
    font-size: 32px;
  }

  .hm-asset-vi::before {
    right: 30px;
    bottom: 44px;
    width: 92px;
    height: 36px;
  }

  .hm-asset-calendar,
  .hm-asset-ppt,
  .hm-asset-dashboard {
    min-height: 226px;
  }

  .hm-asset-calendar {
    padding: 36px 30px 22px;
  }

  .hm-asset-calendar div {
    left: 28px;
    right: 28px;
    bottom: 20px;
    gap: 6px;
  }

  .hm-asset-calendar div span {
    min-height: 28px;
    font-size: 9px;
  }

  .hm-asset-ppt {
    padding: 40px 32px;
  }

  .hm-asset-ppt::before {
    width: 146px;
    height: 126px;
  }

  .hm-asset-ppt::after {
    left: 32px;
    bottom: 26px;
    width: 124px;
    height: 34px;
  }

  .hm-asset-dashboard {
    padding: 22px 22px 20px;
    border-width: 8px;
    border-radius: 20px;
  }

  .hm-dashboard-metrics {
    margin-top: 12px;
  }

  .hm-dashboard-metrics span {
    min-height: 32px;
    font-size: 8px;
  }

  .hm-dashboard-chart {
    left: 22px;
    right: 22px;
    bottom: 20px;
    height: 54px;
  }

  .hm-final-cta {
    right: 58px;
    bottom: 6px;
    width: 290px;
  }

  .hm-final-cta h3 {
    font-size: 24px;
    white-space: nowrap;
  }

  .hm-final-cta p {
    margin: 18px 0 18px;
    font-size: 16px;
    line-height: 1.72;
  }

  .hm-final-cta p::after {
    content: "";
    display: block;
    width: 220px;
    height: 1px;
    margin-top: 28px;
    background: rgba(166,137,102,.58);
  }

  .hm-final-cta .hm-btn {
    min-width: 240px;
    height: 58px;
    font-size: 18px;
  }

  .hm-final-cta .hm-link-cta {
    margin-top: 20px;
  }
}

@media (max-width: 1320px) {
  .template-home .site-header__inner {
    width: calc(100% - 40px);
  }

  .template-home .primary-nav {
    display: none;
  }

  .template-home .primary-nav a:nth-child(6) {
    display: block;
  }

  .hm-hero__inner,
  .hm-opportunity__grid,
  .hm-system__grid,
  .hm-solution-line {
    grid-template-columns: 1fr;
  }

  .hm-hero__inner {
    width: min(calc(100% - 48px), 980px);
  }

  html[lang="en"] .hm-hero__copy {
    margin-top: 0;
  }

  .hm-opportunity__grid,
  .hm-system__grid {
    gap: 34px;
  }

  .hm-turning {
    height: 90px;
  }

  .hm-turning span::before,
  .hm-turning span::after {
    display: none;
  }

  .hm-engineering,
  .hm-scatter {
    min-height: 620px;
  }

  .hm-products__body {
    padding-left: 0;
  }

  .hm-building--product {
    display: none;
  }

  .hm-solution-table {
    width: 100%;
  }

  .hm-solution-line {
    padding: 28px 0;
    gap: 20px;
  }

  .hm-deliverables {
    padding-right: clamp(40px, 5vw, 88px);
  }

  .hm-final-cta {
    position: relative;
    right: auto;
    bottom: auto;
    width: auto;
    margin-top: 44px;
  }
}

@media (max-width: 860px) {
  .template-home .site-header__inner {
    height: 76px;
  }

  .template-home .brand-mark__logo {
    width: 146px;
    height: 48px;
  }

  .template-home .brand-mark {
    min-width: 146px;
  }

  html[lang="zh-hans"] .template-home .brand-mark {
    min-width: 190px;
    gap: 10px;
  }

  html[lang="zh-hans"] .template-home .brand-mark__symbol {
    width: 52px;
    height: 50px;
  }

  html[lang="zh-hans"] .template-home .brand-mark__text {
    gap: 5px;
  }

  html[lang="zh-hans"] .template-home .brand-mark__text strong {
    font-size: 20px;
    letter-spacing: 0.12em;
  }

  html[lang="zh-hans"] .template-home .brand-mark__text span {
    font-size: 12px;
    letter-spacing: 0.16em;
  }

  .template-home .site-header__cta {
    display: none;
  }

  .hm-hero {
    padding-top: 76px;
  }

  .hm-hero__inner,
  .hm-section {
    width: min(calc(100% - 40px), 620px);
    padding-left: 0;
    padding-right: 0;
  }

  .hm-hero__inner {
    min-height: auto;
    display: block;
    padding-top: 46px;
  }

  .hm-hero__copy {
    padding-left: 0;
  }

  .hm-hero__title {
    font-size: clamp(42px, 13vw, 58px);
    line-height: 1.22;
  }

  .hm-hero__actions {
    align-items: stretch;
    flex-direction: column;
    gap: 20px;
  }

  .hm-btn,
  .hm-link-cta {
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
    justify-content: center;
  }

  .hm-hero__mark {
    display: none;
  }

  .hm-hero__stage {
    min-height: 260px;
    margin-top: 22px;
  }

  .hm-building--hero {
    left: -92px;
    bottom: 6px;
    width: 460px;
    height: 390px;
    opacity: 0.3;
  }

  .hm-building--hero::before {
    left: 64px;
    width: 265px;
    height: 360px;
  }

  .hm-building--hero::after {
    left: 210px;
    width: 180px;
    height: 260px;
  }

  .hm-arc,
  .hm-paper,
  .hm-medallion {
    display: none;
  }

  .hm-mobile-belief {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 12px;
    z-index: 5;
    display: grid;
    grid-template-columns: 1fr 58px;
    gap: 14px;
    align-items: center;
    min-height: 96px;
    padding: 16px 18px;
    border: 1px solid rgba(166, 137, 102, 0.24);
    border-radius: 8px;
    background: rgba(250, 248, 244, 0.92);
    box-shadow: 0 16px 34px rgba(44, 42, 38, 0.12);
  }

  .hm-mobile-belief span {
    display: block;
    grid-column: 1;
    margin-bottom: 7px;
    color: #716b63;
    font-size: 13px;
  }

  .hm-mobile-belief strong {
    grid-column: 1;
    color: #252523;
    font-family: var(--serif);
    font-size: 19px;
    line-height: 1.45;
    letter-spacing: 0.03em;
  }

  .hm-mobile-belief img {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 56px;
    height: 48px;
    object-fit: contain;
  }

  .hm-paper--report {
    left: 16px;
    top: 50px;
    width: 250px;
    height: 340px;
    padding: 64px 32px 30px;
  }

  .hm-paper--map {
    right: -12px;
    top: 78px;
    width: 240px;
    height: 350px;
    padding: 50px 28px;
  }

  .hm-paper h2 {
    font-size: 22px;
  }

  .hm-value-orbit {
    transform: scale(.68);
    transform-origin: top center;
    margin-top: 34px;
  }

  .hm-medallion {
    right: 70px;
    bottom: 20px;
    width: 150px;
    height: 150px;
  }

  .hm-logo-knot {
    width: 96px;
    height: 82px;
  }

  .hm-center-head {
    text-align: left;
  }

  .hm-center-head h2,
  .hm-section-title {
    font-size: clamp(36px, 11vw, 50px);
    line-height: 1.22;
  }

  .hm-center-head p,
  .hm-section-subtitle,
  .hm-hero__lead {
    font-size: 17px;
    letter-spacing: 0.02em;
  }

  .hm-opportunity__grid,
  .hm-system__grid,
  .hm-product-cards,
  .hm-phase-bar,
  .hm-deliverables__grid {
    grid-template-columns: 1fr;
  }

  .hm-section-label {
    font-size: 16px;
  }

  .hm-section-label span {
    font-size: 24px;
  }

  .hm-scatter,
  .hm-engineering {
    min-height: auto;
  }

  .hm-scatter {
    display: grid;
    gap: 14px;
  }

  .hm-scatter::before,
  .hm-scatter::after {
    display: none;
  }

  .hm-sheet,
  .hm-note {
    position: relative;
    inset: auto;
    width: auto;
    transform: none;
  }

  .hm-note {
    height: auto;
    padding: 16px;
  }

  .hm-radar,
  .hm-engineering__list,
  .hm-workflow,
  .hm-bottom-call {
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
  }

  .hm-engineering {
    padding-left: 0;
  }

  .hm-radar {
    width: min(100%, 320px);
    height: 320px;
    margin: 20px 0;
  }

  html[lang="en"] .template-home .language-switch,
  html[lang="en"] .hm-hero-features,
  html[lang="en"] .hm-paper--identity,
  html[lang="en"] .hm-manual-book,
  html[lang="en"] .hm-name-slip {
    display: none;
  }

  html[lang="en"] .hm-hero {
    height: auto;
    min-height: auto;
  }

  .template-contact .contact-copy {
    left: auto;
    top: auto;
    width: 100%;
    max-width: 100%;
  }

  .template-contact .contact-copy > p {
    width: 100%;
    max-width: 100%;
  }

  .hm-engineering__list,
  .hm-workflow {
    width: 100%;
  }

  .hm-bottom-call {
    margin-top: 18px;
    height: auto;
    padding: 18px;
    font-size: 19px;
  }

  .hm-levels div {
    grid-template-columns: 54px 52px 1fr;
  }

  .hm-brand-orbit {
    transform: scale(.75);
    transform-origin: center;
    margin: -50px 0;
  }

  .hm-card-stack {
    min-height: auto;
    display: grid;
    gap: 14px;
    transform: none;
  }

  .hm-stack-card,
  .hm-stack-card:nth-child(2),
  .hm-stack-card:nth-child(3),
  .hm-stack-card--front {
    position: relative;
    inset: auto;
    right: auto;
    top: auto;
    width: 100%;
    height: auto;
    min-height: 160px;
    padding: 22px;
    font-size: 19px;
  }

  .hm-stack-card::after {
    height: 58px;
    margin-top: 18px;
  }

  .hm-stack-card--front span {
    margin-top: 46px;
    font-size: 17px;
  }

  .hm-phase-bar div {
    border-right: 0;
    border-bottom: 1px solid rgba(51,51,51,.12);
  }

  .hm-product-card {
    border-right: 0;
    border-bottom: 1px solid rgba(51,51,51,.14);
  }

  .hm-solution-name {
    grid-template-columns: 56px 1fr;
  }

  .hm-solution-path {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }

  .hm-solution-path span {
    width: 100%;
    height: auto;
    min-height: 56px;
    border-radius: 0;
  }

  .hm-solution-path b {
    transform: rotate(90deg);
    justify-self: center;
  }

  .hm-solution-media {
    display: grid;
    gap: 12px;
    height: auto;
    min-height: 120px;
    overflow: visible;
  }

  .hm-solution-media::before {
    display: none;
  }

  .hm-solution-media em,
  .hm-solution-photo--factory,
  .hm-solution-photo--park,
  .hm-solution-photo--meeting,
  .hm-solution-doc--report,
  .hm-solution-doc--plan,
  .hm-solution-doc--value,
  .hm-solution-doc--cluster,
  .hm-solution-doc--map,
  .hm-solution-doc--training,
  .hm-solution-doc--members,
  .hm-solution-doc--union {
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    height: auto;
    min-height: 110px;
    transform: none;
  }

  .hm-solution-photo--factory,
  .hm-solution-photo--park,
  .hm-solution-photo--meeting {
    min-height: 150px;
  }

  .hm-side-caption {
    display: none;
  }
}