/* A shared canvas and a continuous reading rhythm, across both locales. */
:root {
  --reese-page: #f7f9fa;
  --reese-ink: #203d49;
  --reese-muted: #687e87;
  --reese-line: #dce5e8;
  --flow-space: clamp(48px, 5vw, 80px);
  --header-block: 88px;
}
body {
  background:
    radial-gradient(ellipse 72% 12% at 50% 31%, #dfeef460, transparent 100%),
    radial-gradient(ellipse 80% 14% at 60% 65%, #e1edf36b, transparent 100%),
    radial-gradient(ellipse 70% 10% at 40% 99%, #e0edf174, transparent 100%),
    var(--reese-page);
}
main { background: transparent; }
.header { background: #f7f9faed; }
.header::after {
  content: '';
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, #296179, #69b2af);
  transform: scaleX(var(--page-progress, 0));
  transform-origin: left;
  opacity: .65;
}
.header.is-scrolled { box-shadow: 0 8px 24px -20px #305c6c55; }

/* The film dissolves into the same paper as the introduction. */
.editorial-hero.centered-video-hero {
  margin-top: 8px;
  border-radius: 20px 20px 0 0;
  box-shadow: none;
  background: var(--reese-page);
}
.centered-video-hero::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: clamp(155px, 18vw, 240px);
  background: linear-gradient(180deg, #f7f9fa00, #f7f9fa80 48%, var(--reese-page) 100%);
  z-index: -1;
  pointer-events: none;
}
.centered-video-hero .editorial-hero-image {
  transform: translate3d(0, var(--hero-offset, 0px), 0) scale(var(--hero-scale, 1.045));
}
.centered-video-hero .editorial-hero-copy { transform: translate3d(0, var(--hero-copy-y, 0px), 0); }
.centered-video-hero .hero-scroll-hint { color: #587680; filter: none; }
.hero-media-footer { bottom: 24px; }

.editorial-section { padding-block: var(--flow-space); }
.brand-intro { padding-top: 32px; padding-bottom: 28px; }
.brand-intro-grid { gap: 10%; }
.brand-intro-copy h2, .process-heading h2 { font-weight: 500; }
.brand-highlights dt { font-size: 27px; font-weight: 500; color: #345864; }
.editorial-disciplines {
  border-bottom: 0;
  border-top-color: #dce5e8;
  margin-top: 34px;
  padding-block: 22px 0;
}

/* Keep the approved 3D scene; remove the separate rectangular backdrop. */
.reese-move {
  background: transparent;
  border: 0;
  padding-top: 45px;
  padding-bottom: 34px;
  margin-bottom: 0;
}
.reese-move::before { opacity: .12; }
.reese-move .rm-tag { color: #58818d; font-weight: 500; letter-spacing: .18em; }
.reese-move .rm-tag::before, .reese-move .rm-tag::after { background: #b9d0d8; }
.reese-move .rm-head { font-weight: 500; color: var(--reese-ink); }
.reese-move .rm-lead { color: var(--reese-muted); }
.rm-orbit { border-color: #729da519; }
.rm-orbit::after { border-color: #729da512; }

.editorial-process { padding-top: 58px; padding-bottom: 42px; }
.process-heading { margin-bottom: 38px; }
.process-photo-card, .process-photo-card > img { border-radius: 18px; }
.process-photo-card { box-shadow: 0 16px 36px -32px #34586b45; }
.process-photo-card::after { border-radius: 0 0 18px 18px; }
.conversation-badge { background: #537c86; }
.process-icon { background: #345c6b; }
.editorial-steps li { border-bottom-color: var(--reese-line); }

/* The atlas belongs to the page, without another large enclosing card. */
.global-connections {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 64px 0 46px;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  isolation: isolate;
}
.global-scroll-track { position: relative; }
.global-content.wrap { width: min(var(--reese-width), calc(100% - 80px)); }
.global-connections .world-map { max-width: none; margin-top: 28px; }
.global-connections .global-heading h2 { font-size: 36px; color: var(--reese-ink); }
.global-connections .eyebrow { color: #58818d; letter-spacing: .18em; }
.global-connections .global-heading > p:last-child { color: var(--reese-muted); }
.map-stage {
  height: clamp(460px, 38vw, 600px);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.map-stage.is-focused { height: clamp(575px, 42.5vw, 648px); }
.map-stage::after { box-shadow: none; }
.map-city-detail { top: 56px; bottom: 44px; }
.map-stage-top, .map-stage-bottom { left: 8px; right: 8px; }
.global-connections .map-city-index { margin-block: 17px 24px; }
.global-map-caption { border-top-color: var(--reese-line); }
.atlas-can-dwell .global-content { position: sticky; top: calc(var(--header-block) + 16px); }

.editorial-guides { padding-top: 58px; padding-bottom: 38px; }
.section-aside h2, .faq h2 { font-weight: 500; }
.faq { padding-top: 38px; padding-bottom: 56px; }
.contact-band.wrap {
  padding: 0;
  margin-bottom: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.contact-inner { border-top: 1px solid var(--reese-line); padding-block: 64px; }
.contact-inner h2 { font-weight: 500; }
footer { padding-top: 18px; }

@media (max-width: 1150px) {
  .global-content.wrap { width: calc(100% - 64px); }
}
@media (max-width: 980px) {
  .global-content.wrap { width: calc(100% - 48px); }
  .global-connections { padding-top: 52px; }
  .global-connections .global-heading h2 { font-size: 31px; }
  .map-stage { height: 506px; }
  .contact-inner { padding-block: 50px; }
}
@media (max-width: 700px) {
  :root { --flow-space: 42px; }
  .editorial-hero.centered-video-hero { margin-top: 0; border-radius: 12px 12px 0 0; }
  .centered-video-hero .editorial-hero-image { transform: none; }
  .centered-video-hero::after { height: 165px; }
  .brand-intro { padding-block: 22px 14px; }
  .brand-intro-grid { gap: 27px; }
  .brand-highlights dt { font-size: 23px; }
  .editorial-disciplines { margin-top: 26px; padding-top: 17px; }
  .reese-move { padding: 31px 12px 26px; margin-bottom: 0; }
  .editorial-process { padding-block: 40px 28px; }
  .process-heading { margin-bottom: 28px; }
  .global-connections { padding: 44px 0 28px; }
  .global-content.wrap { width: calc(100% - 40px); }
  .global-connections .global-heading h2 { font-size: 27px; }
  .global-connections .world-map { margin-top: 14px; }
  .map-stage { height: 310px; }
  .map-stage-top { left: 4px; right: 4px; top: 16px; }
  .map-stage-bottom { left: 4px; right: 4px; bottom: 12px; }
  .map-stage.is-focused { height: 760px; }
  .map-city-detail { top: 285px; bottom: 15px; }
  .global-connections .map-city-index { margin-block: 13px 20px; }
  .editorial-guides { padding-top: 36px; padding-bottom: 23px; }
  .faq { padding-top: 23px; padding-bottom: 38px; }
  .contact-inner { padding-block: 38px 42px; }
  footer { padding-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .centered-video-hero .editorial-hero-image { transform: none; }
  .atlas-can-dwell .global-content { position: static; }
  .atlas-can-dwell .map-stage:not(.is-focused) .map-viewport { transform: none; }
}

/* Scroll-linked camera layers are separate from card rotation and city zoom. */
@media (min-width: 1000px) and (hover: hover) and (prefers-reduced-motion: no-preference) {
  .reese-move:not(.is-expanded) .rm-scene {
    transform: translate3d(0, calc((1 - var(--service-enter, 1)) * 44px), 0)
      scale(calc(.94 + var(--service-enter, 1) * .06));
  }
  .reese-move .rm-orbit {
    transform: translate(-50%, -36%) rotate(calc(-14deg + var(--service-enter, 1) * 12deg));
  }
  .process-photo-window > img {
    transform: translate3d(0, var(--process-image-y, 0px), 0) scale(1.12);
  }
  .map-stage:not(.is-focused) .map-viewport {
    transform: translate3d(0, calc((1 - var(--atlas-enter, 1)) * 26px), 0)
      rotateX(calc(12deg - var(--atlas-enter, 1) * 5deg - var(--atlas-progress, 0) * 4deg + var(--map-rx, 0deg)))
      rotateY(var(--map-ry, 0deg))
      scale(calc(.91 + var(--atlas-enter, 1) * .06 + var(--atlas-progress, 0) * .03));
    transition: transform .14s linear;
  }
}
.process-photo-window { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.process-photo-window > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: 100% center; filter: saturate(.4);
}

/* One content boundary across navigation, film, services, stories and atlas. */
:root { --reese-gutter: clamp(64px, 5.55vw, 96px); }
.wrap,
.global-content.wrap {
  width: min(var(--reese-width), calc(100% - var(--reese-gutter) * 2));
  max-width: var(--reese-width);
  margin-inline: auto;
}
.contact-band.wrap > .contact-inner.wrap { width: 100%; max-width: none; }
.reese-move.wrap { padding-inline: 0; }

/* Let the document installation taper out within the shared page margin. */
.case-gateway .case-art {
  width: 78%;
  right: -4%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 92%, transparent);
}

@media (min-width: 981px) and (max-width: 1279px) {
  :root { --reese-gutter: 48px; }
}
@media (min-width: 1280px) and (max-width: 1510px) {
  .header-inner { gap: 20px; }
  .header-brand { gap: 5px; }
  .header .brand-image { width: 200px; height: 80px; }
  .brand-locations { padding-left: 13px; }
  .city-names-cn { font-size: 11px; }
  .city-names-en { font-size: 9px; letter-spacing: .04em; }
  .desktop-nav { gap: 20px; }
  :lang(en) .desktop-nav { gap: 15px; }
  .header-actions { gap: 17px; }
}
@media (min-width: 1261px) and (max-width: 1379px) {
  .header-cta { display: none; }
}
@media (min-width: 701px) and (max-width: 980px) {
  :root { --reese-gutter: 32px; }
}
@media (max-width: 700px) {
  :root { --reese-gutter: 20px; }
  .case-gateway .case-art {
    width: 100%;
    right: auto;
    margin: 0 0 10px;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* Let the amount and kind of content determine the composition width. */
:root { --reese-brief-width: 900px; --reese-editorial-width: 1080px; --reese-feature-width: 1260px; }
.brand-intro-grid.wrap,
.editorial-disciplines.wrap,
.editorial-process > .wrap,
.guide-list-layout.wrap,
.faq-grid.wrap,
.contact-band.wrap,
footer > .wrap {
  width: min(var(--reese-editorial-width), calc(100% - var(--reese-gutter) * 2));
}
.brand-intro-grid.wrap, .editorial-disciplines.wrap,
.guide-list-layout.wrap, .faq-grid.wrap {
  width: min(var(--reese-brief-width), calc(100% - var(--reese-gutter) * 2));
}
.brand-intro-grid { grid-template-columns: 1fr; gap: 28px; }
.brand-intro-copy > p:last-child { max-width: 680px; }
.brand-highlights { grid-template-columns: 1fr 1fr; gap: 0 48px; margin: 0; }
.brand-highlights > div {
  display: grid;
  grid-template-columns: 64px minmax(0,1fr);
  align-items: baseline;
  gap: 24px;
  padding-block: 15px;
  border-bottom: 1px solid var(--reese-line);
}
.brand-highlights dt { font-size: 20px; margin: 0; line-height: 1.5; }
.brand-highlights dd { font-size: 12px; line-height: 1.8; }
:lang(en) .brand-highlights > div { grid-template-columns: 105px minmax(0,1fr); gap: 18px; }
:lang(en) .brand-highlights dt { font-size: 17px; }
.editorial-disciplines { justify-content: flex-start; gap: 30px; flex-wrap: wrap; }
.editorial-disciplines > div { justify-content: flex-start; flex-wrap: wrap; gap: 12px 24px; }
.process-layout { grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); gap: 56px; }
.process-heading { max-width: 580px; }
.guide-list-layout, .faq-grid { grid-template-columns: 240px minmax(0,1fr); gap: 48px; }
.guide-reading-list p, .faq details p { max-width: 58ch; }
.contact-inner { flex-direction: column; align-items: center; text-align: center; gap: 24px; }
.contact-inner p:not(.eyebrow) { max-width: 540px; }
.contact-inner .contact-actions { flex-direction: row; align-items: center; justify-content: center; gap: 28px; }

.case-gateway.wrap {
  width: min(var(--reese-editorial-width), calc(100% - var(--reese-gutter) * 2));
}
.case-gateway .case-gateway-inner { min-height: 410px; }
.case-gateway .case-gateway-copy { width: 42%; }
.case-gateway .case-art { width: 68%; right: 0; }
@media (min-width: 1051px) {
  .case-gateway .case-watermark { font-size: 132px; right: 2%; top: 10%; }
  .case-gateway .case-gateway-copy h2 { font-size: 44px; }
  :lang(en) .case-gateway .case-gateway-copy h2 { font-size: 40px; }
  .case-gateway .case-gateway-intro { font-size: 15px; }
}

@media (min-width: 701px) and (max-width: 980px) {
  .brand-intro-grid { gap: 24px; }
  .brand-highlights > div { grid-template-columns: 50px minmax(0,1fr); gap: 15px; }
  .brand-highlights dt { font-size: 19px; }
  .brand-highlights dd { font-size: 10px; }
  :lang(en) .brand-highlights > div { grid-template-columns: 92px minmax(0,1fr); gap: 12px; }
  :lang(en) .brand-highlights dt { font-size: 15px; }
  .process-layout { gap: 36px; }
  .guide-list-layout, .faq-grid { grid-template-columns: 220px minmax(0,1fr); gap: 36px; }
  .case-gateway .case-gateway-copy { width: 51%; }
  .case-gateway .case-art { width: 78%; right: -9%; }
}
@media (max-width: 700px) {
  .brand-intro-grid { grid-template-columns: 1fr; gap: 24px; }
  .brand-highlights { grid-template-columns: 1fr; }
  .brand-highlights > div { grid-template-columns: 54px minmax(0,1fr); gap: 20px; padding-block: 12px; }
  .brand-highlights dt { font-size: 19px; }
  .brand-highlights dd { font-size: 11px; }
  .editorial-disciplines { display: block; }
  .editorial-disciplines > div { display: flex; gap: 12px 20px; }
  .process-layout, .guide-list-layout, .faq-grid { grid-template-columns: 1fr; gap: 26px; }
  .contact-inner .contact-actions { flex-direction: column; gap: 18px; }
  .case-gateway .case-gateway-inner { min-height: 0; }
  .case-gateway .case-gateway-copy { width: 100%; }
  .case-gateway .case-art { width: 100%; right: auto; }
}

/* Ordinary English uses sentence case; reserve capitals for names and codes. */
.eyebrow,
.reese-move .rm-tag,
.global-connections .eyebrow,
.contact-band .eyebrow,
.case-gateway .case-gateway-copy .eyebrow {
  font-size: 11px;
  letter-spacing: .035em;
}
.header .city-names-en { font-size: 10.5px; letter-spacing: .025em; }
.reese-move .rm-suptitle,
.rm-overview-kicker { letter-spacing: .025em; }
.rm-cardtop { letter-spacing: .035em; }
.map-story-tag,
.map-story-top,
.map-overview-label,
.map-scale,
.map-city-translation { letter-spacing: .025em; }
@media (max-width: 700px) {
  .header .city-names-en { font-size: 9px; }
  .case-gateway .case-gateway-copy .eyebrow { font-size: 10px; }
}

@media (max-width: 340px) { .map-stage.is-focused { height: 790px; } }