@font-face {
  font-family: "Sanhua Editorial";
  src: url("/assets/fonts/sbc-shift-editorial.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

html.home-page { scroll-padding-top: 0; }
/* Keep decorative wakes/pulses from looping while their section is off screen. */
.home-page .magic-supply[data-motion-visible="false"] .rail-fx,
.home-page .magic-supply[data-motion-visible="false"] .rail-mail-icon { animation-play-state: paused; }
.shift-hero, .shift-business {
  --shift-ink: #252a28;
  --shift-muted: #686f6b;
  --shift-accent: #8b4437;
  color: var(--shift-ink);
  font-family: "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.shift-hero *, .shift-business * { box-sizing: border-box; }
.shift-hero a, .shift-business a { color: inherit; text-decoration: none; }
.shift-hero :is(p, h1), .shift-business :is(p, h2, h3, figure) { margin: 0; }
.shift-hero {
  position: relative;
  min-height: 720px;
  height: 100svh;
  overflow: clip;
  isolation: isolate;
  background: #e7e9e8;
}
.shift-hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  z-index: -2;
}
.shift-hero-wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(241 243 243 / 42%), transparent 68%);
  z-index: -1;
  pointer-events: none;
}
.shift-hero-layout {
  position: relative;
  height: 100%;
  min-height: inherit;
  padding: clamp(180px, 25svh, 290px) 8.5vw 64px;
}
.shift-hero-title {
  width: max-content;
  max-width: 100%;
  font-size: clamp(44px, 5.9vw, 104px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -.05em;
}
.shift-title-line { display: block; white-space: nowrap; }
.shift-title-line--serif {
  font-family: "Sanhua Editorial", "Noto Serif SC", "Songti SC", SimSun, serif;
  font-weight: 400;
}
.shift-title-line--sans {
  margin-left: 8.2vw;
  font-family: "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-weight: 450;
  letter-spacing: -.065em;
}
.shift-char-mask { display: inline-block; overflow: clip; vertical-align: bottom; padding: .03em .05em .08em; margin: -.03em -.025em -.08em; }
.shift-char { display: inline-block; transform-origin: 0 100%; }
.shift-hero-bottom { margin-top: 44px; margin-left: .4vw; }
.shift-hero-bottom p { font-size: 14px; line-height: 1.95; color: #535b57; letter-spacing: .035em; }
.shift-text-link { display: inline-flex; align-items: center; gap: 32px; min-height: 48px; font-size: 14px; line-height: 1.6; font-weight: 500; }
.shift-hero-bottom .shift-text-link { margin-top: 20px; border-bottom: 1px solid #606863; }
.shift-link-mask { display: block; overflow: hidden; }
.shift-link-mask > span { position: relative; display: block; transition: transform .5s cubic-bezier(.22,1,.36,1); }
.shift-link-mask > span::after { content: attr(data-text); position: absolute; left: 0; top: 110%; white-space: nowrap; }
.shift-text-link:hover .shift-link-mask > span { transform: translateY(-110%); }
.shift-link-arrow { font-size: 20px; transition: transform .4s ease; }
.shift-text-link:hover .shift-link-arrow { transform: rotate(45deg); }

/* Keep the original mobile sequence; desktop brings the company facts forward. */
.shift-business { position: relative; background: #f3f3ef; }
.shift-business-overview {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: center;
  gap: 7vw;
  min-height: 67svh;
  padding: 56px 8.5vw;
  background: #f3f3ef;
}
.shift-overview-copy h2 {
  color: #191c1b;
  font-family: "Songti SC", SimSun, serif;
  font-size: clamp(40px, 3.7vw, 62px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.05em;
}
.shift-overview-mask { display: block; overflow: clip; }
.shift-overview-mask > span { display: block; }
.shift-overview-copy p {
  max-width: 470px;
  margin-top: 24px;
  color: #191c1b;
  font-size: 16px;
  line-height: 1.95;
}
.shift-overview-art { justify-self: end; width: min(100%, 40svh, 380px); }
.shift-overview-art img {
  display: block;
  width: 100%;
  height: auto;
}
.shift-business-intro {
  min-height: 67svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
  padding: 44px 8vw;
  background: #191c1b;
  color: #f5f4ef;
}
.shift-business-intro h2 {
  font-family: "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: clamp(36px, 3.2vw, 56px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -.055em;
  text-align: center;
}
.shift-intro-mask { display: block; overflow: clip; }
.shift-intro-mask > span { display: block; }
.shift-business-intro h2 .shift-intro-mask:first-child { font-weight: 600; }
.shift-business-intro h2 .shift-intro-mask:last-child { font-weight: 400; }
.shift-business-intro .shift-intro-description {
  max-width: 650px;
  margin-top: 20px;
  color: #bdc3bd;
  font-size: 16px;
  line-height: 1.9;
  text-align: center;
}
.shift-company-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 42px;
  width: min(100%, 1100px);
  margin: 36px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid #444b46;
}
.shift-company-fact { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 10px; }
.shift-company-fact dt { color: #bdc3bd; font-family: inherit; font-size: 14px; line-height: 1.5; font-weight: 400; }
.shift-company-fact dd { margin: 0; font-family: inherit; font-size: clamp(34px, 3.2vw, 50px); line-height: 1.25; font-weight: 400; letter-spacing: -.045em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.shift-company-fact dd span { margin-left: 7px; font-size: 18px; letter-spacing: 0; }
.shift-company-fact--market dd { font-size: clamp(32px, 2.9vw, 46px); line-height: 1.25; letter-spacing: -.035em; }
.shift-business-directory { position: relative; padding: 84px 8.5vw 100px; }
.shift-directory-heading { margin: 0 0 42px; }
.shift-directory-heading h2 { font-family: inherit; font-size: 22px; font-weight: 400; line-height: 1.5; }
.shift-directory-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 6vw; }
.shift-business-list-track { min-width: 0; }
.shift-business-list { position: relative; min-width: 0; }
.shift-business-row { position: relative; border-top: 1px solid #d3d6d0; }
.shift-business-row:last-child { border-bottom: 1px solid #d3d6d0; }
.shift-business-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: clamp(210px, 31svh, 340px);
  padding: 40px 0;
}
.shift-business-link h3 {
  position: relative;
  z-index: 1;
  font-family: "Sanhua Editorial", "Noto Serif SC", "Songti SC", SimSun, serif;
  font-size: clamp(36px, 4.6vw, 80px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -.045em;
}
.shift-row-name { display: inline-block; }
.shift-row-copy { min-width: 0; }
.shift-row-description { display: none; }
.shift-business-list:has(.is-preview-active) .shift-business-row:not(.is-preview-active) .shift-row-name { color: #818981; }
.shift-business-link:hover .shift-row-name, .shift-business-link:focus-visible .shift-row-name { color: var(--shift-ink) !important; }
.shift-row-arrow { color: #515a54; font-size: 26px; transition: transform .4s ease; }
.shift-business-link:hover .shift-row-arrow { transform: translate(5px,-5px); }

/* The image stays within the right column. On desktop, paired translations
   reveal the next photo from below while its subject remains stationary. */
.shift-preview-rail { min-width: 0; padding-block: 20px; }
.shift-business-preview {
  position: sticky;
  top: max(110px, calc(50svh - 11.3vw));
  width: 100%;
  aspect-ratio: 1.52;
  pointer-events: none;
}
.shift-preview-layer { position: absolute; inset: 0; opacity: 0; }
.shift-preview-layer:first-child { opacity: 1; }
/* Every reveal has its own solid canvas: transparent product cutouts must
   cover the previous subject instead of accumulating into a ghosted stack. */
.shift-preview-photo { position: absolute; inset: 0; overflow: hidden; background: #f3f3ef; }
.shift-preview-layer img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.shift-hero a:focus-visible, .shift-business a:focus-visible { outline: 2px solid var(--shift-accent); outline-offset: 6px; }
.shift-business-intro a:focus-visible { outline-color: #fff; }

@media (min-width: 960px) {
  /* The two non-interactive introductions swap visually on desktop only. */
  .shift-business { display: flex; flex-direction: column; }
  .shift-business-intro { order: -1; }
  /* Bring the collage and the directory closer, without filling the gap with copy. */
  .shift-business-overview { min-height: 0; padding-block: 40px; padding-inline: 11vw; gap: 4vw; grid-template-columns: 1.25fr 1fr; }
  .shift-overview-copy h2 { font-size: clamp(34px, 3.1vw, 54px); line-height: 1.3; }
  .shift-overview-mask:nth-child(n+2) { display: inline-block; vertical-align: top; }
  .shift-overview-copy p { margin-top: 20px; }
  .shift-company-fact--market dd { font-size: 48px; }
  .shift-business-overview .shift-overview-art { justify-self: end; width: clamp(240px, 23vw, 320px); margin-right: 1.5vw !important; }
  .shift-business-directory { padding-block: 72px 112px; }
  .shift-directory-heading { margin-bottom: 40px; }
  .shift-directory-heading h2 { font-size: 20px; font-weight: 600; }
  .shift-directory-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); gap: 8vw; }
  .shift-business-link { min-height: clamp(280px, 41svh, 380px); }
  .shift-business-link h3 { font-size: clamp(36px, 4.2vw, 72px); }
  .shift-business-link .shift-row-description { display: block; margin-top: 20px; color: #686f6b; font-size: 15px; font-weight: 400; line-height: 1.8; }
  .shift-business-preview { overflow: hidden; }
  .shift-preview-layer { overflow: hidden; }
}
@media (min-width: 960px) and (max-height: 780px) {
  .shift-hero { min-height: 650px; }
  .shift-hero-layout { padding-top: 168px; }
  .shift-hero-title { font-size: min(5.9vw, 80px); }
  .shift-hero-bottom { margin-top: 32px; }
}
@media (max-width: 959px) {
  .shift-hero-title { font-size: clamp(36px, 9.2vw, 80px); }
  .shift-title-line--sans { margin-left: 4vw; }
  .shift-preview-rail { display: none; }
  .shift-directory-layout { display: block; }
  .shift-business-directory { padding-inline: 4vw; }
  .shift-directory-heading { margin-inline: 4.5vw; }
  .shift-business-link { padding-inline: 4.5vw; }
  .shift-business-overview { grid-template-columns: minmax(0, 1fr); }
  .shift-overview-art { justify-self: center; max-width: 360px; }
  .shift-company-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .shift-hero *, .shift-business * { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}