body:has(.reference-home) .site-header {
  position: fixed;
  inset: 0 0 auto;
  background: transparent;
  color: var(--ink);
  border-bottom-color: transparent;
  box-shadow: none;
}
body:has(.reference-home) .site-header:not(.scrolled):not(.menu-open) {
  background: transparent;
  color: var(--ink);
  border-bottom-color: transparent;
}
body:has(.reference-home) .site-header.scrolled,
body:has(.reference-home) .site-header.menu-open {
  background: #fffffff2;
  border-bottom-color: #e7ecef;
  box-shadow: 0 4px 24px #263c4a08;
  backdrop-filter: blur(12px);
}
body:has(.reference-home) .site-header:not(.scrolled):not(.menu-open) .brand-day { display: block; }
body:has(.reference-home) .site-header:not(.scrolled):not(.menu-open) .brand-night { display: none; }
body:has(.reference-home) .site-header:not(.scrolled):not(.menu-open) .brand small { color: var(--ink); }
body:has(.reference-home) .site-header:not(.scrolled):not(.menu-open) .menu-toggle span { background: var(--ink); }
body:has(.reference-home) .site-header:not(.scrolled):not(.menu-open) :is(.desktop-nav > a.current, .language-switch a.active) { color: #a9844e; }
.reference-hero { position: relative; height: 100svh; min-height: 680px; overflow: hidden; background: #f4f7fb; }
.reference-hero-frame { position: relative; height: 100%; }
.reference-hero-image { position: absolute; inset: auto 0 0 auto; width: auto; min-width: 100%; max-width: none; height: 88%; object-fit: contain; object-position: right bottom; mask-image: linear-gradient(to bottom, transparent, #000 7%); }
.reference-hero-layout { position: relative; height: 100%; display: flex; align-items: center; }
.reference-hero-copy { width: min(43%, 510px); margin: 0; padding: 84px 0 60px; animation: hero-copy-arrive .8s ease-out both; }
.reference-hero-kicker { margin-bottom: 22px; color: #92774f; font-size: 10px; line-height: 1.4; font-weight: 500; letter-spacing: 1.8px; }
.reference-hero h1 { font-size: clamp(32px, 2.9vw, 46px); font-weight: 400; line-height: 1.25; letter-spacing: -.8px; white-space: pre-line; color: #383c40; }
.reference-hero-description { max-width: 340px; margin: 24px 0 30px; color: #66727c; font-size: 14px; line-height: 1.85; white-space: pre-line; }
.reference-hero-action { min-height: 44px; min-width: 175px; padding: 9px 18px; background: transparent; border-color: #59657066; color: #343a3e; font-size: 12px; }
.reference-hero-action svg { width: 20px; height: 20px; transition: transform .25s; }
.reference-hero-action:hover { background: #343a3e; border-color: #343a3e; color: #fff; }
.reference-hero-action:hover svg { transform: translateX(3px); }
[lang="zh-CN"] .reference-hero-copy { width: min(43%, 510px); }
[lang="zh-CN"] .reference-hero h1 { font-size: clamp(40px, 3.5vw, 58px); line-height: 1.32; letter-spacing: 2px; }
@keyframes hero-copy-arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (min-width: 768px) and (max-width: 1100px) {
  .reference-hero { height: min(100svh, 850px); min-height: 680px; }
  .reference-hero-image { right: -100px; height: min(82%, 560px); }
  .reference-hero-copy, [lang="zh-CN"] .reference-hero-copy { width: 46%; padding: 84px 0 60px; }
  .reference-hero h1 { font-size: clamp(30px, 3.5vw, 38px); }
  [lang="zh-CN"] .reference-hero h1 { font-size: 44px; }
  .reference-hero-description { max-width: 280px; font-size: 13px; }
}
@media (max-width: 767px) {
  .reference-hero { height: min(100svh, clamp(620px, 174vw, 700px)); min-height: 620px; }
  .reference-hero-image { inset: auto 0 0 auto; width: 100%; min-width: 0; max-width: 440px; height: auto; object-fit: contain; object-position: right bottom; mask-image: linear-gradient(to bottom, transparent, #000 15%); }
  .reference-hero-layout { align-items: center; }
  .reference-hero-copy, [lang="zh-CN"] .reference-hero-copy { width: 55%; max-width: 235px; padding: 0 0 104px; }
  .reference-hero-kicker { font-size: 8px; letter-spacing: 1.3px; margin-bottom: 19px; }
  .reference-hero h1 { font-size: clamp(23px, 6.25vw, 32px); line-height: 1.2; letter-spacing: -.5px; }
  .reference-hero-description { max-width: 160px; font-size: 11px; line-height: 1.85; margin: 20px 0 25px; }
  .reference-hero-action { min-height: 42px; min-width: 142px; padding-inline: 12px; gap: 8px; white-space: nowrap; font-size: 11px; background: #f4f9fdbf; }
  .reference-hero-action svg { width: 18px; height: 18px; flex-shrink: 0; }
  [lang="zh-CN"] .reference-hero h1 { font-size: clamp(29px, 8.2vw, 37px); line-height: 1.4; letter-spacing: .5px; }
}
@media (min-width: 480px) and (max-width: 767px) {
  .reference-hero-image { mask-image: linear-gradient(to bottom, transparent, #000 15%), linear-gradient(to right, transparent, #000 12%); mask-composite: intersect; }
}
@media (max-width: 359px) {
  .reference-hero-image { width: calc(100% - 24px); right: -10px; mask-image: linear-gradient(to bottom, transparent, #000 15%), linear-gradient(to right, transparent, #000 12%); mask-composite: intersect; }
  .reference-hero-action { min-width: 128px; padding-inline: 10px; gap: 6px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .reference-hero-copy { animation: none; }
  .reference-hero-action svg { transition: none; }
}