.upgrade-page {
  --gold: #E7C4AE;
  --gold-strong: #D5A642;
  --display-sans: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif;
}
.upgrade-page h1, .upgrade-page h2, .upgrade-page h3 { font-family: var(--display-sans); font-weight: 800; letter-spacing: -.035em; }
.upgrade-page .site-header {
  width: 100%;
  padding: 0 48px;
  border-bottom: 1px solid #426156;
  background: var(--ink);
}
.upgrade-page .site-header .brand, .upgrade-page .site-header .brand-name { color: var(--white); }
.upgrade-page .site-header .brand-role { color: #B9C8BD; }
.upgrade-page .primary-nav a { color: #E4ECE5; }
.upgrade-page .primary-nav a:hover, .upgrade-page .primary-nav a[aria-current="page"] { color: var(--gold); }
.upgrade-page .primary-nav a[aria-current="page"]::after { background: var(--gold); }
.upgrade-page .header-contact { border-color: var(--gold); color: var(--gold); }
.upgrade-page .header-contact:hover { background: var(--gold); color: var(--ink); }
.upgrade-page .page-hero {
  padding: 74px 0 68px;
  border-bottom: 0;
  background: var(--ink);
  color: #E8EEE8;
}
.upgrade-page .page-hero-grid { gap: 72px; }
.upgrade-page .page-hero h1 { color: var(--white); font-size: clamp(44px, 4.2vw, 60px); line-height: 1.24; }
.upgrade-page .page-hero p { color: #C5D1C9; }
.upgrade-page .page-hero-grid > p:last-child { position: relative; padding-top: 24px; border-top: 1px solid #4A6359; font-size: 17px; }
.upgrade-page .page-hero-grid > p:last-child::before { content: ""; position: absolute; top: -1px; left: 0; width: 48px; height: 3px; background: var(--gold); }
.upgrade-page .page-kicker, .upgrade-page .page-hero .eyebrow { color: var(--gold); }
.upgrade-page .about-hero { background: var(--ink); color: #E8EEE8; }
.upgrade-page .about-hero h1 { color: var(--white); }
.upgrade-page .about-hero .lead { color: #C5D1C9; }
.upgrade-page .about-hero .eyebrow, .upgrade-page .about-hero .page-kicker { color: var(--gold); }
.upgrade-page .about-portrait { border-color: #4A6359; background: #233F35; }
.upgrade-page .about-portrait figcaption { color: #C5D1C9; }
.upgrade-page .detail-hero { background: var(--ink); color: #E8EEE8; }
.upgrade-page .detail-hero h1, .upgrade-page .detail-hero .detail-client { color: var(--white); }
.upgrade-page .detail-hero .lead { color: #C5D1C9; }
.upgrade-page .detail-hero .eyebrow { color: var(--gold); }
.upgrade-page .project-facts dt { color: #B9C8BD; }
.upgrade-page .project-facts dd { color: var(--white); }
.upgrade-page .project-facts > div { border-bottom-color: #4A6359; }
.upgrade-page .breadcrumb { background: var(--ink); color: #B9C8BD; }
.upgrade-page .tab-list [role="tab"] { min-height: 56px; }
.upgrade-page .tab-list [role="tab"][aria-selected="true"] { color: var(--rust-tint); }
.upgrade-page .tab-panel { min-width: 0; }
.upgrade-page .related-case { border-color: var(--line); }
.upgrade-page .artifact-sheet, .upgrade-page .work-figure { border-color: #AAB8AE; box-shadow: 0 18px 44px rgba(23, 53, 44, .07); }
.upgrade-page .artifact-grid strong, .upgrade-page .work-figure-heading strong { font-family: var(--display-sans); }
.upgrade-page .contact-choice { border-color: #AAB8AE; }
.upgrade-page .contact-choice[aria-pressed="true"] { border-color: var(--ink); background: var(--sage); }
.upgrade-page .contact-guide { border-color: var(--ink); box-shadow: 0 18px 44px rgba(23, 53, 44, .06); }
.upgrade-page .contact-status { color: var(--ink); }
.upgrade-page .cta-panel.primary { background: var(--ink); }
.upgrade-page .site-footer .brand, .upgrade-page .site-footer .brand-name { color: var(--ink); }
.upgrade-page .section-dark .eyebrow { color: var(--gold); }
.upgrade-page .featured-case, .upgrade-page .work-figure, .upgrade-page .artifact-sheet { transform-origin: center; }

[data-reveal] { opacity: 1; transform: none; }
.motion-ready [data-reveal]:not(.is-visible) { opacity: 0; transform: translateY(16px); }
.motion-ready [data-reveal].is-visible { opacity: 1; transform: translateY(0); transition: opacity 420ms ease-out, transform 420ms ease-out; }
.panel-enter { animation: panel-enter 180ms ease-out; }
@keyframes panel-enter { from { opacity: .35; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], .motion-ready [data-reveal]:not(.is-visible), .motion-ready [data-reveal].is-visible { opacity: 1 !important; transform: none !important; transition: none !important; }
  .panel-enter { animation: none !important; }
}