/* Local motion study: one stage, one focal point, no detached media overlays. */
.hero { overflow: clip; border: 0; background: var(--paper); }
.hero::after { content: none; }
.site-header { position: absolute; z-index: 10; width: 100%; background: transparent; border-bottom: 0; }
.site-header .shell { width: min(calc(100% - clamp(2rem, 7.5vw, 10rem)), 96rem); }
.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 2rem;
  width: min(calc(100% - clamp(2rem, 7.5vw, 10rem)), 96rem);
  min-height: 100svh;
  padding-block: 8.5rem 2rem;
}
.hero__editorial { position: relative; z-index: 2; padding-block: 1rem 2rem; }
.hero .eyebrow { font-size: .63rem; letter-spacing: .09em; margin-bottom: 1.8rem; }
.hero .eyebrow::before { width: 1.5rem; height: 2px; }
.hero h1 { max-width: none; margin-bottom: 1.75rem; font-size: clamp(3rem, 4.6vw, 6rem); font-weight: 540; line-height: 1.08; letter-spacing: -.07em; text-wrap: initial; }
.hero h1 .hero__line { display: block; overflow: clip; padding-block: .06em; margin-block: -.06em; }
.hero h1 .hero__line > span { display: block; }
.hero__line--accent { color: #ac452c; }
.hero__lead { max-width: 33rem; font-size: clamp(.94rem, 1.15vw, 1.13rem); line-height: 1.7; margin-bottom: 0; }
.hero__footer { position: relative; z-index: 4; grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-top: 1.5rem; border-top: 1px solid #c7bdae; }
.hero__footer .actions { flex-wrap: nowrap; align-items: center; gap: 1.7rem; justify-content: start; }
.hero__footer .button { min-height: 3.3rem; gap: 1.5rem; border-radius: 4px; font-size: .8rem; font-weight: 650; box-shadow: none; padding-inline: 1.2rem; }
.hero__footer .button:hover { transform: translateY(-2px); box-shadow: 0 8px 20px #16191f14; }
.hero__contact { display: inline-flex; align-items: center; gap: 1rem; min-height: 44px; font-size: .8rem; font-weight: 650; text-decoration: none; }
.hero__contact span { color: #ac452c; }
.hero__responsibility { display: block; max-width: none; margin: 0; font-size: .7rem; font-weight: 500; line-height: 1.6; }
.hero__scroll-cue { display: flex; align-items: center; gap: 1rem; font-size: .53rem; letter-spacing: .1em; }
.hero__scroll-cue > div { width: 3rem; height: 1px; background: var(--line); }
.hero__scroll-cue i { display: block; height: 1px; background: var(--ink); transform-origin: left; transform: scaleX(var(--motion-progress, .04)); }
.system-sculpture { position: relative; width: min(100%, 64svh); justify-self: center; aspect-ratio: 1; isolation: isolate; }
.system-sculpture__halo { position: absolute; inset: 8%; z-index: -1; border-radius: 50%; background: radial-gradient(ellipse, #e5cbb266, transparent 70%); transform: scale(1.3); }
.system-sculpture__form { position: absolute; top: -6%; left: -6%; width: 112%; max-width: none; transform: perspective(1100px) rotateX(var(--form-x, -8deg)) rotateY(var(--form-y, -14deg)) rotateZ(var(--form-z, -12deg)) scale(var(--form-scale, 1)); }
.system-sculpture__axis { position: absolute; z-index: -1; opacity: .35; }
.system-sculpture__axis--x { left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); }
.system-sculpture__axis--y { top: 0; bottom: 0; left: 50%; width: 1px; background: linear-gradient(transparent, var(--line), transparent); }
.system-sculpture__label { position: absolute; font-size: .57rem; letter-spacing: .1em; color: var(--muted); }
.system-sculpture__label--top { left: 9%; top: 4%; }
.system-sculpture__label--right { right: -2%; top: 51%; writing-mode: vertical-rl; }
.system-sculpture__label--bottom { left: 17%; bottom: 9%; }
.system-sculpture__origin { position: absolute; left: 49%; top: 46%; color: #ac452c; font-size: 1.4rem; font-weight: 300; }
.system-sculpture__caption { display: flex; justify-content: space-between; position: absolute; left: 9%; right: 3%; bottom: -1rem; color: var(--muted); font-size: .68rem; }
.projects__echo { display: none; }

/* One canonical set of cases continues the hero inside the same pinned frame.
   Without enhancement, every case and its media remain in normal document flow. */
@media (min-width: 75rem) and (min-height: 45rem) and (prefers-reduced-motion: no-preference) {
  html.hero-motion .hero-journey { position: relative; height: 505svh; }
  html.hero-motion .hero { position: sticky; top: 0; height: 100svh; }
  html.hero-motion .hero__inner { height: 100%; min-height: 0; }
  html.hero-motion .hero__editorial { clip-path: inset(0 calc(var(--copy-wipe, 0) * 100%) 0 0); }
  html.hero-motion .system-sculpture { transform: translate3d(calc(var(--form-travel, 0) * -12%), 0, 0); clip-path: inset(0 0 0 calc(var(--form-hide, 0) * 100%)); }
  html.hero-motion .system-sculpture__label,
  html.hero-motion .system-sculpture__caption,
  html.hero-motion .system-sculpture__origin { opacity: calc(1 - var(--form-travel, 0)); }
  html.hero-motion .projects { position: absolute; inset: 0; padding: 0; background: transparent; pointer-events: none; }
  html.hero-motion .projects > .shell { width: min(calc(100% - clamp(2rem, 7.5vw, 10rem)), 96rem); height: 100%; }
  html.hero-motion .projects .section-intro { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
  html.hero-motion .projects__gallery { height: 100%; padding-bottom: 8rem; }
  html.hero-motion .projects__stage {
    position: sticky; top: 8.5rem; height: calc(100svh - 16.5rem); z-index: 3;
    display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 1rem;
    padding: clamp(1.5rem, 2.5vw, 3rem); border-radius: 12px;
    overflow: clip; background: #191c20; color: #f3ede3;
    clip-path: inset(var(--portal-inset, 38%) var(--portal-right, 8%) var(--portal-inset, 38%) var(--portal-left, 100%) round 12px);
  }
  html.hero-motion .projects--interactive .projects__stage { pointer-events: auto; }
  html.hero-motion .projects__stage::before { content: ''; position: absolute; width: 70%; aspect-ratio: 1; right: -5%; top: -40%; border: 1px solid #f3ede312; border-radius: 50%; pointer-events: none; }
  html.hero-motion .projects__echo { display: block; position: absolute; right: -5%; top: -20%; height: 140%; width: 70%; object-fit: contain; opacity: var(--feature-echo, .55); filter: invert(1); transform: rotate(var(--form-z, 40deg)); pointer-events: none; }
  html.hero-motion .projects__stage-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid #f3ede326; opacity: var(--feature-copy-alpha, 0); }
  html.hero-motion .projects__stage-head p { display: flex; gap: 1.5rem; margin: 0; color: #b8b7b2; font-size: .56rem; letter-spacing: .09em; text-transform: uppercase; }
  html.hero-motion [data-project-counter] { color: #ff987c; font-variant-numeric: tabular-nums; }
  html.hero-motion .projects__stage-nav { display: flex; gap: 1.3rem; }
  html.hero-motion .projects__stage-nav a { display: flex; align-items: center; min-height: 44px; color: #b8b7b2; font-size: .62rem; text-decoration: none; transition: color 180ms; }
  html.hero-motion .projects__stage-nav a:hover,
  html.hero-motion .projects__stage-nav a[aria-current] { color: #ff987c; }
  html.hero-motion .projects__canvas { position: relative; min-height: 0; overflow: clip; }
  html.hero-motion .case {
    position: absolute; inset: 0; display: grid;
    grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
    grid-template-rows: minmax(0, 1fr) auto auto; gap: .65rem 2rem;
    padding: 0; margin: 0; border: 0; border-radius: 0; box-shadow: none;
    background: transparent;
    z-index: var(--panel-order, 0);
  }
  html.hero-motion .case__overview { display: contents; }
  html.hero-motion .case__lead { grid-column: 1; grid-row: 1; align-self: center; padding: 0; border: 0; opacity: calc(var(--feature-copy-alpha, 0) * var(--panel-copy, 0)); transform: translate3d(0, calc(var(--feature-copy-y, 30px) + var(--panel-drift, 0px)), 0); }
  html.hero-motion .case__title-row { flex-direction: column-reverse; align-items: start; gap: 1rem; }
  html.hero-motion .case__title-row h3 { color: #f3ede3; font-size: clamp(3rem, 6.6vw, 7.4rem); font-weight: 430; line-height: 1.1; letter-spacing: -.07em; }
  html.hero-motion .case--autohome h3 { font-size: clamp(2.5rem, 4.2vw, 5.1rem); }
  html.hero-motion .case--proof h3 { font-size: clamp(2.5rem, 4.2vw, 5.1rem); }
  html.hero-motion .status { max-width: 23rem; padding: 0; border: 0; color: #ff987c; border-radius: 0; font-size: .64rem; font-weight: 500; line-height: 1.6; }
  html.hero-motion .case__result { max-width: 23rem; margin-top: 1.2rem; font-family: inherit; font-size: clamp(1.05rem, 1.6vw, 1.6rem); font-weight: 450; letter-spacing: -.025em; line-height: 1.45; }
  html.hero-motion .case__date { margin-top: 1rem; color: #b8b7b2; font-size: .58rem; font-weight: 500; }
  html.hero-motion .facts { margin-top: 1.2rem; gap: .45rem 1rem; }
  html.hero-motion .facts li { padding: 0; border: 0; color: #b8b7b2; font-size: .64rem; font-weight: 500; }
  html.hero-motion .case__snapshot { grid-column: 1; grid-row: 2; grid-template-columns: 1fr; border-color: #f3ede326; opacity: calc(var(--feature-copy-alpha, 0) * var(--panel-copy, 0)); }
  html.hero-motion .case-snapshot-item { display: grid; grid-template-columns: 4.6rem 1fr; gap: .6rem; padding: .5rem 0; border: 0; border-top: 1px solid #f3ede312; font-size: .65rem; line-height: 1.5; color: #cfcdc7; }
  html.hero-motion .case-snapshot-item:first-child { padding-block: .5rem; border-top: 0; }
  html.hero-motion .case-snapshot-item .case-step__label { margin-bottom: .25rem; color: #b8b7b2; font-size: .52rem; }
  html.hero-motion .case__media-grid,
  html.hero-motion .case--autohome .case__media-grid,
  html.hero-motion .case__media-grid--proof {
    grid-column: 2; grid-row: 1 / 3; align-self: center; justify-self: end;
    display: flex; flex-direction: column; gap: .55rem; width: min(100%, calc((100svh - 32rem) * 1.75));
    opacity: var(--feature-image-alpha, 0); perspective: 1400px;
    clip-path: inset(var(--media-enter, 100%) 0 var(--media-exit, 0%) 0 round 8px);
    transform: translate3d(0, var(--feature-image-y, 60px), 0);
  }
  html.hero-motion .case--proof .case__media-grid { width: min(100%, calc((100svh - 32rem) * 1.5)); }
  html.hero-motion .media-card__frame { padding: 7px; border: 1px solid #ffffff24; border-radius: 9px; background: #303337; box-shadow: 0 20px 55px #0003; color: #f3ede3; }
  html.hero-motion .media-card--primary .media-card__frame { transform: rotateY(var(--feature-angle, -12deg)) rotateX(var(--feature-tilt, 6deg)); transform-origin: left center; }
  html.hero-motion .media-card__frame img { border-radius: 3px; }
  html.hero-motion .media-card__open { font-size: .55rem; font-weight: 500; opacity: 0; transition: opacity 180ms; }
  html.hero-motion .media-card__frame:hover .media-card__open,
  html.hero-motion .media-card__frame:focus-visible .media-card__open { opacity: 1; }
  html.hero-motion .media-card figcaption { padding-top: .55rem; color: #b8b7b2; font-size: .58rem; }
  html.hero-motion .media-card figcaption span { display: inline; margin-right: .5rem; color: #cfcdc7; font-family: inherit; font-size: inherit; font-weight: 500; text-transform: none; letter-spacing: 0; }
  html.hero-motion .case .media-card--supporting { display: grid; grid-template-columns: 3.2rem 1fr; align-items: center; gap: .65rem; width: 100%; justify-self: auto; }
  html.hero-motion .media-card--supporting .media-card__frame { display: flex; align-items: center; justify-content: center; height: 44px; padding: 2px; box-shadow: none; border-radius: 4px; }
  html.hero-motion .media-card--supporting .media-card__frame img { width: auto; max-width: 100%; max-height: 38px; }
  html.hero-motion .media-card--supporting .media-card__open { display: none; }
  html.hero-motion .media-card--supporting figcaption { padding: 0; }
  html.hero-motion .case__actions-row { grid-column: 1 / -1; grid-row: 3; justify-content: start; opacity: calc(var(--feature-copy-alpha, 0) * var(--panel-copy, 0)); }
  html.hero-motion .case__actions { width: 100%; justify-content: space-between; }
  html.hero-motion .case__actions .button { min-height: 44px; padding: .4rem 0; border: 0; border-radius: 0; background: transparent; color: #f3ede3; font-size: .7rem; font-weight: 550; box-shadow: none; }
  html.hero-motion .case__actions .button::after { content: '↗'; margin-left: 1rem; color: #ff987c; }
  html.hero-motion .case__actions .button:hover { transform: none; color: #ff987c; }
  html.hero-motion .projects__stage :focus-visible { outline: 2px solid #ff987c; outline-offset: -2px; }
}
@media (min-width: 64rem) and (max-height: 49rem) {
  .hero__inner { padding-top: 6.5rem; padding-bottom: 1.3rem; }
  .hero h1 { font-size: clamp(2.7rem, 4vw, 4.4rem); }
  .hero .eyebrow { margin-bottom: 1rem; }
  .hero__editorial { padding-block: 0 1rem; }
  .hero__lead { max-width: 32rem; font-size: .9rem; }
  .hero__scroll-cue > span:first-child { display: none; }
  html.hero-motion .projects__gallery { padding-bottom: 7.5rem; }
  html.hero-motion .projects__stage { top: 6.5rem; height: calc(100svh - 14rem); padding: 1.25rem 1.5rem; gap: .65rem; }
  html.hero-motion .case__title-row { gap: .7rem; }
  html.hero-motion .case__title-row h3 { font-size: 4rem; }
  html.hero-motion .case--autohome h3,
  html.hero-motion .case--proof h3 { font-size: clamp(2rem, 3.2vw, 2.75rem); }
  html.hero-motion .case__result { margin-top: .75rem; font-size: 1.15rem; }
  html.hero-motion .facts, html.hero-motion .case__date { margin-top: .75rem; }
  html.hero-motion .case__media-grid,
  html.hero-motion .case--autohome .case__media-grid { width: min(100%, calc((100svh - 29rem) * 1.75)); }
  html.hero-motion .case--proof .case__media-grid { width: min(100%, calc((100svh - 29rem) * 1.5)); }
  html.hero-motion .case-snapshot-item { padding-block: .5rem; font-size: .65rem; }
  html.hero-motion .case-snapshot-item:first-child { padding-block: .5rem; }
}
@media (max-width: 63.99rem) {
  .site-header { position: relative; }
  .hero__inner { min-height: 0; padding-block: 3rem 2rem; grid-template-columns: 1.1fr 1fr; column-gap: 1rem; }
  .hero h1 { font-size: clamp(2.4rem, 5.5vw, 4.2rem); }
  .hero .eyebrow { font-size: .58rem; }
  .hero__lead { font-size: .96rem; }
  .hero__footer { flex-wrap: wrap; margin-top: 2rem; }
  .hero__scroll-cue { display: none; }
}
@media (max-width: 47.99rem) {
  .hero__inner { grid-template-columns: 1fr; padding-top: 2.5rem; }
  .hero h1 { font-size: clamp(2.55rem, 10.4vw, 4.8rem); margin-bottom: 1.5rem; }
  .hero__editorial { padding-bottom: 0; }
  .hero__lead { max-width: 34rem; }
  .system-sculpture { grid-row: 3; width: min(100%, 26rem); margin: 2.2rem auto 1rem; }
  .system-sculpture__caption { font-size: .6rem; bottom: 0; }
  .system-sculpture__label { font-size: .49rem; }
  .hero__footer { grid-row: 2; margin-top: 1.5rem; gap: 1.3rem; }
  .hero__footer .actions { display: flex; flex-wrap: wrap; gap: 1.25rem; }
  .hero__footer .actions .button { width: auto; }
  .hero__responsibility br { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero h1 .hero__line > span, .system-sculpture__form { transform: none; }
}