.home-page {
  --home-bg: #f4f7f6;
  --home-surface: #fbfcfb;
  --home-ink: #111817;
  --home-muted: #53615f;
  --home-line: #ccd7d4;
  --home-brand: #078c7d;
  --home-brand-dark: #045e56;
  --home-mist: #eaf1ef;
  --home-ease: cubic-bezier(.16, 1, .3, 1);
  --home-copy-max: 920px;
  --home-grid-max: 1440px;
  color: var(--home-ink);
  background: var(--home-bg);
  font-family: "Outfit", "Noto Sans SC", sans-serif;
  font-weight: 400;
}

.home-page :focus-visible {
  outline: 2px solid var(--home-brand);
  outline-offset: 4px;
}

.home-page h1,
.home-page h2,
.home-page h3,
.home-page p { text-wrap: pretty; }

.home-page .site-header {
  font-family: "Outfit", "Noto Sans SC", sans-serif;
}

.home-page .site-header.scrolled,
.home-page .site-header.is-scrolled {
  background: rgba(251, 252, 251, .94);
  border-color: rgba(17, 24, 23, .12);
  box-shadow: 0 8px 34px rgba(7, 48, 43, .035);
}

/* Hero: one message, one place, one deliberate gesture. */
.home-page .hero {
  min-height: 100svh;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #09100f;
}

.home-page .hero-media {
  filter: saturate(.72) contrast(1.12) brightness(.72);
  transform: scale(1.025);
}

.home-page .hero-shade {
  background: rgba(2, 12, 11, .44);
}

.home-page .hero-content {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 80px var(--pad) 0;
  text-align: center;
}

.home-page .hero .eyebrow {
  display: block;
  width: auto;
  margin: 0 auto 24px;
  padding: 0;
  color: rgba(255, 255, 255, .82);
  background: none;
  font-family: "Outfit", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .24em;
}

.home-page .hero h1 {
  max-width: none;
  margin: 0 auto;
  color: white;
  font-family: "Noto Sans SC", sans-serif;
  font-size: clamp(34px, 4.6vw, 68px);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -.055em;
  white-space: nowrap;
}

.home-page .hero-location {
  margin: 27px 0 0;
  color: rgba(255, 255, 255, .78);
  font-family: "Outfit", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .26em;
}

.home-brand-planes {
  position: absolute;
  z-index: 2;
  right: clamp(14px, 5vw, 76px);
  bottom: clamp(32px, 6vh, 72px);
  width: 250px;
  height: 220px;
  opacity: .22;
  pointer-events: none;
}

.home-brand-planes span {
  position: absolute;
  width: 112px;
  height: 128px;
  background: var(--home-brand);
  clip-path: polygon(50% 0, 100% 26%, 100% 74%, 50% 100%, 0 74%, 0 26%);
  animation: home-plane-drift 11s var(--home-ease) infinite alternate;
}
.home-brand-planes span:nth-child(1) { right: 126px; bottom: 0; transform: rotate(30deg); }
.home-brand-planes span:nth-child(2) { right: 40px; bottom: 51px; background: #c7e6e1; animation-duration: 14s; animation-delay: -5s; }
.home-brand-planes span:nth-child(3) { right: -45px; bottom: 0; background: #31b6a5; animation-duration: 17s; animation-delay: -8s; }

@keyframes home-plane-drift {
  from { translate: 0 0; rotate: -1deg; }
  to { translate: 8px -12px; rotate: 3deg; }
}

/* Services: typographic editorial opening + a functional systems diagram. */
.home-page .services {
  position: relative;
  padding: clamp(112px, 10vw, 158px) var(--pad) clamp(100px, 9vw, 142px);
  color: var(--home-ink);
  background: #fff;
}

.home-page .services::before,
.home-page .services::after { display: none; }
.home-page .services > * { position: relative; z-index: 1; }

.home-page .services-intro {
  width: min(1180px, 100%);
  max-width: 920px;
  margin: 0 auto clamp(60px, 6vw, 86px) 0;
  text-align: left;
}

.home-section-label,
.home-page .section-kicker {
  margin: 0 0 24px;
  color: var(--home-brand-dark);
  font-family: "Outfit", sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .24em;
}

.home-page .services-intro h2 {
  max-width: 900px;
  margin: 0;
  color: var(--home-ink);
  font-family: "Noto Sans SC", sans-serif;
  font-size: clamp(28px, 2.8vw, 40px);
  font-weight: 400;
  line-height: 1.36;
  letter-spacing: .015em;
}

.home-inline-media {
  display: inline-block;
  width: clamp(92px, 10vw, 154px);
  aspect-ratio: 2 / 1;
  margin: 0 .18em;
  overflow: hidden;
  vertical-align: .05em;
  border-radius: 2px 22px 2px 2px;
  box-shadow: 0 18px 42px rgba(3, 65, 58, .16);
}

.home-inline-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.72) contrast(1.08);
  transition: transform 900ms var(--home-ease), filter 500ms ease;
}
.home-inline-media:hover img { transform: scale(1.08); filter: saturate(.92) contrast(1.08); }

.home-page .services-intro > p:last-child {
  max-width: 640px;
  margin: 22px 0 0;
  padding-left: 16px;
  border-left: 1px solid var(--home-brand);
  color: var(--home-muted);
  font-size: 15px;
  line-height: 1.85;
}

.home-page .services-orbit-layout {
  width: min(1180px, 100%);
  grid-template-columns: minmax(0, 1.72fr) minmax(300px, .85fr);
  gap: clamp(32px, 4vw, 60px);
  margin: 0 auto;
  align-items: center;
  transform: translateX(clamp(-18px, -1.4vw, -10px));
}

.home-page .services-orbit-visual {
  position: sticky;
  top: 120px;
  align-self: start;
  width: 100%;
  max-width: 748px;
  filter: drop-shadow(0 28px 54px rgba(4, 94, 86, .08));
}
.home-page .services-orbit-line { stroke: rgba(4, 94, 86, .23); }
.home-page .services-orbit-line-middle { stroke-dasharray: 5 8; }
.home-page .services-orbit-label { fill: var(--home-ink); font-family: "Noto Sans SC", sans-serif; font-weight: 400; }
.home-page .services-orbit-label-en,
.home-page .services-orbit-core { fill: var(--home-brand-dark); font-family: "Outfit", sans-serif; }
.home-page .services-orbit-point circle { fill: var(--home-brand); }

.home-page .services-orbit-index {
  border-top: 1px solid rgba(4, 94, 86, .22);
}

.home-page .services-orbit-item {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 8px;
  align-items: center;
  min-height: 102px;
  padding: 22px 18px 22px 0;
  border-bottom: 1px solid rgba(4, 94, 86, .18);
  color: var(--home-muted);
  overflow: hidden;
  transition: color 360ms var(--home-ease), padding 420ms var(--home-ease), border-color 360ms ease;
}
.home-page .services-orbit-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 2px;
  background: var(--home-brand);
  transform: scaleY(0);
  transform-origin: center;
  opacity: 0;
  transition: transform 460ms var(--home-ease), opacity 260ms ease;
}
.home-page .services-orbit-item:hover,
.home-page .services-orbit-item:focus-within { padding-left: 8px; color: var(--home-ink); border-bottom-color: rgba(4, 94, 86, .32); }
.home-page .services-orbit-item:hover::before,
.home-page .services-orbit-item:focus-within::before { transform: scaleY(1); opacity: 1; }
.home-page .services-orbit-item > i {
  grid-column: 1;
  grid-row: 1 / span 2;
  color: var(--home-brand-dark);
  font-size: 23px;
  opacity: .7;
  transition: transform 420ms var(--home-ease), opacity 260ms ease, color 320ms ease;
}
.home-page .services-orbit-item:hover > i,
.home-page .services-orbit-item:focus-within > i { transform: translateY(-2px) scale(1.04); color: var(--home-brand); opacity: 1; }
.home-page .services-orbit-item h3 {
  color: var(--home-ink);
  font-family: "Noto Sans SC", sans-serif;
  font-size: clamp(18px, 1.4vw, 22px);
  font-weight: 400;
  letter-spacing: -.02em;
  transition: color 320ms ease, transform 420ms var(--home-ease);
}
.home-page .services-orbit-item:hover h3,
.home-page .services-orbit-item:focus-within h3 { color: var(--home-brand-dark); transform: translateX(2px); }
.home-page .services-orbit-item > div { grid-column: 2; }
.home-page .services-orbit-item small { color: var(--home-brand-dark); font-family: "Outfit", sans-serif; font-size: 9px; font-weight: 500; letter-spacing: .13em; }
.home-page .services-orbit-item p { grid-column: 2; color: inherit; font-size: 12px; line-height: 1.7; }

/* One content-serving marquee. */
.home-capability-marquee {
  overflow: hidden;
  border-top: 1px solid var(--home-line);
  border-bottom: 1px solid var(--home-line);
  background: var(--home-surface);
}
.home-capability-track {
  display: flex;
  width: max-content;
  align-items: stretch;
  animation: home-marquee var(--home-marquee-duration, 30s) linear infinite;
  will-change: transform;
}
.home-capability-group {
  display: flex;
  flex: none;
  min-width: max-content;
  align-items: stretch;
}
.home-capability-track span {
  display: flex;
  align-items: center;
  min-height: clamp(66px, 5.25vw, 80px);
  padding-inline: clamp(30px, 3.55vw, 56px);
  color: #33413f;
  border-right: 1px solid var(--home-line);
  font-family: "Outfit", sans-serif;
  font-size: clamp(11px, .84vw, 13px);
  font-weight: 500;
  letter-spacing: clamp(.13em, .15vw, .18em);
  white-space: nowrap;
}
@keyframes home-marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

/* Work: preserve the approved 2 + 4 editorial composition, align its visual language. */
.home-page .work {
  padding: clamp(112px, 10vw, 154px) var(--pad);
  color: var(--home-ink);
  background: var(--home-surface);
}
.home-page .work-intro,
.home-page .film-stories-intro {
  width: min(var(--home-copy-max), 100%);
  margin-inline: auto;
  text-align: left;
}
.home-page .work-intro { margin-bottom: clamp(58px, 6vw, 88px); }
.home-page .work-intro h2,
.home-page .film-stories-intro h2,
.home-page .process-header h2 {
  max-width: 900px;
  margin: 0;
  color: var(--home-ink);
  font-family: "Noto Sans SC", sans-serif;
  font-size: clamp(28px, 2.8vw, 40px);
  font-weight: 400;
  line-height: 1.36;
  letter-spacing: .015em;
}
.home-page .work-intro p,
.home-page .film-stories-intro > p:last-child {
  max-width: 640px;
  margin: 22px 0 0;
  padding-left: 16px;
  border-left: 1px solid var(--home-brand);
  color: var(--home-muted);
  font-size: 15px;
  line-height: 1.85;
  letter-spacing: 0;
}
.home-page .project-carousel {
  width: min(var(--home-grid-max), 100%);
  max-width: var(--home-grid-max);
  margin-inline: auto;
}

@media (min-width: 801px) {
  .home-page #work .project-track {
    column-gap: clamp(18px, 1.7vw, 30px);
  }
}
.home-page .project-carousel-bar { color: var(--home-muted); border-color: var(--home-line); }
.home-page .project-control { color: var(--home-ink); border-color: var(--home-line); background: transparent; }
.home-page .project-control:hover { color: white; background: var(--home-brand-dark); border-color: var(--home-brand-dark); }
.home-page .work .project-slide .project-image {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 2px 24px 2px 2px;
  background: #dfe7e5;
}
.home-page .project-youtube-link { display: block; color: inherit; text-decoration: none; }
.home-page .project-youtube-link:focus-visible { outline: 2px solid var(--home-brand); outline-offset: 6px; }
.home-page .work .project-slide video { transition: transform 900ms var(--home-ease), filter 500ms ease; filter: saturate(.8) contrast(1.04); }
.home-page .work .project-slide:hover video { transform: scale(1.035); filter: saturate(1) contrast(1.04); }
.home-page .project-youtube-cue {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 10px;
  color: #f7f8f7;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 10px;
  background: rgba(12,15,16,.82);
  box-shadow: 0 14px 34px rgba(6,9,10,.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: "Outfit", sans-serif;
  font-size: clamp(8px, .68vw, 10px);
  font-weight: 500;
  letter-spacing: .14em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-50%, calc(-50% + 10px), 0) scale(.96);
  transition: opacity 180ms ease, transform 240ms cubic-bezier(.16,1,.3,1);
}
.home-page .project-youtube-mark {
  position: relative;
  width: 32px;
  height: 22px;
  flex: none;
  border-radius: 7px;
  background: #ff0033;
}
.home-page .project-youtube-mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 52%;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid #fff;
  transform: translate(-50%, -50%);
}
.home-page .project-youtube-link:focus-visible .project-video {
  transform: scale(1.025);
  filter: saturate(.9) contrast(1.04) brightness(.72);
}
.home-page .project-youtube-link:focus-visible .project-youtube-cue {
  opacity: 1;
  transform: translate3d(-50%, -50%, 0) scale(1);
}
@media (hover: hover) and (pointer: fine) {
  .home-page .project-youtube-link:hover .project-video {
    transform: scale(1.035);
    filter: saturate(.9) contrast(1.04) brightness(.72);
  }
  .home-page .project-youtube-link:hover .project-youtube-cue {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) scale(1);
  }
}
.home-page .work .project-meta { border-color: var(--home-line); }
.home-page .work .project-meta p { color: var(--home-brand-dark); }
.home-page .work .project-meta h3 { color: var(--home-ink); font-family: "Outfit", "Noto Sans SC", sans-serif; font-weight: 400; }
.home-page .work .project-meta > span { color: var(--home-muted); }
.home-page .work .project-meta > .project-service-tags,
.home-page .film-story-role.project-service-tags {
  display: flex;
  flex-wrap: wrap;
  align-content: start;
  align-items: start;
  gap: 0;
}
.home-page .project-service-tags > span {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  background: #2d6396;
  color: #f8fbfa;
  font-size: inherit;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.home-page .project-service-tags > span:nth-child(2) { background: #c6dc68; color: #274119; }
.home-page .project-service-tags > span:nth-child(3) { background: #83bdb1; color: #123832; }
.home-page .project-service-tags > span:nth-child(4) { background: #eaa06d; color: #4b2817; }
.home-page .project-all-link { color: var(--home-ink); border-color: var(--home-ink); }
.home-page .project-all-link:hover { color: white; background: var(--home-brand-dark); border-color: var(--home-brand-dark); }

/* Film stories are a single editorial spread rather than another carousel. */
.home-page .film-stories {
  color: var(--home-ink);
  background: #fff;
}
.home-page .film-stories-shell { width: min(var(--home-grid-max), calc(100% - 2 * var(--pad))); }
.home-page .film-stories-intro {
  display: block;
  margin-bottom: clamp(58px, 6vw, 88px);
  padding-bottom: 0;
  border-bottom: 0;
}
.home-page .film-stories-kicker {
  margin: 0 0 22px;
  color: var(--home-brand-dark);
  font-family: "Outfit", sans-serif;
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .24em;
}
.home-page .film-story h3 { color: var(--home-ink); }
.home-page .film-story-description,
.home-page .film-story-role { color: var(--home-muted); }

/* Process: the interaction is retained, the surrounding system is unified. */
.home-page .process {
  padding: clamp(112px, 10vw, 154px) var(--pad);
  color: var(--home-ink);
  background: var(--home-surface);
}
.home-page .process-header,
.home-page .process-grid {
  width: min(var(--home-grid-max), 100%);
  max-width: var(--home-grid-max);
  margin-inline: auto;
}
.home-page .process-header {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(28px, 4vw, 54px);
}
.home-page .process-header .section-kicker {
  grid-column: 1 / -1;
  margin: 0 0 22px;
}
.home-page .process-header h2 { white-space: normal; }
.home-page .process-link {
  color: var(--home-ink);
  justify-self: end;
}
.home-page .process-link-rule { background: var(--home-line); }
.home-page .process-link-arrow { background: var(--home-brand); }
.home-page .process-card { border-radius: 2px 24px 2px 2px; box-shadow: 0 22px 56px rgba(3, 48, 43, .1); }
.home-page .process-card-copy strong { font-family: "Noto Sans SC", sans-serif; font-weight: 400; }
.home-page .process-card-copy em { color: #92e1d7; font-family: "Outfit", sans-serif; }

/* Retain the deliberately dark HAKUTEN-inspired directory footer. */
.home-page .footer-redesign .footer-directory-style {
  font-family: "Outfit", "Noto Sans SC", sans-serif;
}
.home-page .footer-social-placeholder { transition: color 260ms ease, background 260ms ease, transform 220ms var(--home-ease); }
.home-page .footer-social-placeholder:hover { transform: translateY(-3px); }
.home-page .footer-directory > .footer-social-placeholders {
  margin-top: 30px;
  padding-bottom: 38px;
  border-bottom: 1px solid rgba(244, 246, 245, 0.72);
}
.home-page .footer-directory > .footer-social-placeholders [data-platform="linkedin"] { order: -1; }
.home-page .footer-utility-row { grid-template-columns: 1fr; }

.home-motion-item {
  opacity: 0;
  translate: 0 28px;
  transition: opacity 760ms var(--home-ease), translate 900ms var(--home-ease);
}
.home-motion-item.home-motion-in-view { opacity: 1; translate: 0 0; }
.project-slide.home-motion-item:nth-child(2),
.film-story.home-motion-item:nth-child(2) { transition-delay: 70ms; }
.project-slide.home-motion-item:nth-child(3),
.film-story.home-motion-item:nth-child(3) { transition-delay: 140ms; }
.project-slide.home-motion-item:nth-child(4),
.film-story.home-motion-item:nth-child(4) { transition-delay: 210ms; }
.project-slide.home-motion-item:nth-child(5) { transition-delay: 280ms; }
.project-slide.home-motion-item:nth-child(6) { transition-delay: 350ms; }

@media (max-width: 980px) {
  .home-page .services-orbit-layout { grid-template-columns: 1fr; transform: none; }
  .home-page .services-orbit-visual { margin: 0 auto; }
  .home-page .services-orbit-item { grid-template-columns: 30px minmax(190px, .8fr) minmax(220px, 1.2fr); }
  .home-brand-planes { opacity: .14; transform: scale(.78); transform-origin: right bottom; }
}

@media (max-width: 720px) {
  .home-page .hero-content { width: 100%; padding: 72px 22px 0; }
  .home-page .hero h1 { max-width: 620px; font-size: clamp(38px, 11vw, 54px); white-space: normal; }
  .home-brand-planes { display: none; }
  .home-page .services-intro h2 { font-size: clamp(36px, 10vw, 50px); }
  .home-inline-media { width: 86px; border-radius: 2px 15px 2px 2px; }
  .home-page .services-intro > p:last-child { margin-left: 0; }
  .home-page .services-orbit-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin-bottom: 32px; }
  .home-page .services-orbit-visual { position: static; width: 100%; max-width: 480px; filter: none; }
  .home-page .services-orbit-index { display: none; }
  .home-page .services .service-list { display: grid; }
  .home-capability-track span { min-height: 64px; padding-inline: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-brand-planes span,
  .home-capability-track { animation: none !important; }
  .home-page .project-youtube-cue,
  .home-page .project-youtube-link .project-video { transition: none; }
  .home-page .project-youtube-link:focus-visible .project-youtube-cue { transform: translate3d(-50%, -50%, 0); }
  .home-page .hero-media,
  .home-page .project-video,
  .home-page .film-story-media img { transform: none !important; }
  .home-motion-item { opacity: 1 !important; translate: none !important; }
}

/* ========================================================================== */
/* Homepage typography — the shared five-tier NexScene production scale.      */
/* ========================================================================== */
.home-page {
  --home-type-1: clamp(48px, 6.2vw, 92px);
  --home-type-2: clamp(28px, 2.85vw, 40px);
  --home-type-3: 16px;
  --home-type-4: 12px;
  --home-type-5: 10px;
}

/* Tier 1 — one page-defining title. */
.home-page #hero-title {
  max-width: none;
  font-size: var(--home-type-1) !important;
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.04em;
}

/* Tier 2 — section statements and editorial case titles. */
.home-page .services-intro h2,
.home-page .work-intro h2,
.home-page .film-stories-intro h2,
.home-page .film-story h3,
.home-page .process-header h2,
.home-page .process-card-copy strong,
.home-page .services .service-item h3 {
  font-size: var(--home-type-2) !important;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.025em;
}

/* Tier 3 — navigation, body copy and compact content titles. */
.home-page .nav-links > a,
.home-page .language-button,
.home-page .language-menu button,
.home-page .services-intro > p,
.home-page .services-orbit-label > text:not(.services-orbit-label-en),
.home-page .services-orbit-item h3,
.home-page .services-orbit-item p,
.home-page .services .service-item p,
.home-page .work-intro p,
.home-page .project-meta h3,
.home-page .film-stories-intro > p:last-child,
.home-page .film-story-description,
.home-page .process-card-copy > span,
.home-page .footer-brand-lockup p,
.home-page .footer-primary-nav a {
  font-size: var(--home-type-3) !important;
}

.home-page .services-intro > p,
.home-page .services-orbit-item p,
.home-page .services .service-item p,
.home-page .work-intro p,
.home-page .film-stories-intro > p:last-child,
.home-page .film-story-description,
.home-page .process-card-copy > span,
.home-page .footer-brand-lockup p {
  font-weight: 400;
  line-height: 1.8;
}

/* Tier 4 — labels, metadata, captions and compact actions. */
.home-page .hero .eyebrow,
.home-page .hero-location,
.home-page .services-orbit-label-en,
.home-page .services-orbit-core text,
.home-page .services-orbit-item small,
.home-page .services .service-item small,
.home-page .home-capability-track span,
.home-page .project-carousel-bar p,
.home-page .project-meta p,
.home-page .project-meta > span,
.home-page .project-youtube-cue,
.home-page .project-all-link,
.home-page .film-stories-kicker,
.home-page .film-story-index,
.home-page .film-story-meta,
.home-page .film-story-meta span,
.home-page .film-story-role,
.home-page .film-story-more b,
.home-page .process-header .section-kicker,
.home-page .process-link-copy,
.home-page .process-card-no,
.home-page .process-card-copy em,
.home-page .footer-business-nav a,
.home-page .footer-languages,
.home-page .footer-social-placeholder {
  font-size: var(--home-type-4) !important;
  font-weight: 500;
}

/* Symbol glyphs follow the same scale instead of introducing one-off sizes. */
.home-page .language-button > span:last-child,
.home-page .film-story-more em {
  font-size: var(--home-type-4) !important;
}

.home-page .process-link-arrow > span {
  font-size: var(--home-type-3) !important;
}

.home-page .project-control > span {
  font-size: var(--home-type-3) !important;
}

.home-page .hero .eyebrow,
.home-page .hero-location,
.home-page .services-orbit-label-en,
.home-page .services-orbit-core text,
.home-page .services-orbit-item small,
.home-page .home-capability-track span,
.home-page .project-youtube-cue,
.home-page .film-stories-kicker,
.home-page .film-story-index,
.home-page .film-story-meta,
.home-page .film-story-role,
.home-page .film-story-more b,
.home-page .process-header .section-kicker,
.home-page .process-card-no,
.home-page .process-card-copy em {
  letter-spacing: 0.14em;
}

/* Tier 5 — legal and copyright copy only. */
.home-page .footer-utility-row > small {
  font-size: var(--home-type-5) !important;
  font-weight: 400;
}

@media (min-width: 721px) {
  .home-page #hero-title { white-space: nowrap; }
}

@media (max-width: 720px) {
  .home-page {
    --home-type-1: clamp(42px, 12vw, 60px);
    --home-type-2: 28px;
  }

  .home-page #hero-title {
    max-width: 11em;
    white-space: normal;
  }
}

/* ========================================================================== */
/* Homepage typography refinement — applied from the 2026-08-21 annotations.  */
/* Keeps the five-tier system while fine-tuning equivalent content together.  */
/* ========================================================================== */
.home-page {
  --home-type-1-minus-2: calc(var(--home-type-1) - 2px);
  --home-type-1-minus-4: calc(var(--home-type-1) - 4px);
  --home-type-2-minus-2: calc(var(--home-type-2) - 2px);
  --home-type-3-minus-1: calc(var(--home-type-3) - 1px);
  --home-type-3-minus-2: calc(var(--home-type-3) - 2px);
  --home-type-3-minus-3: calc(var(--home-type-3) - 3px);
  --home-type-4-minus-2: calc(var(--home-type-4) - 2px);
}

/* Hero statement: annotated as two pixels smaller. */
.home-page #hero-title {
  font-size: var(--home-type-1-minus-4) !important;
}

/* Chapter introductions share the same left and right boundaries. */
.home-page .services-intro,
.home-page .work-intro,
.home-page .film-stories-intro {
  width: min(var(--home-copy-max), 100%);
  max-width: var(--home-copy-max);
  margin-left: 0;
  margin-right: auto;
}

/* All equivalent section statements follow the same two-pixel adjustment. */
.home-page .services-intro h2,
.home-page .work-intro h2,
.home-page .film-stories-intro h2,
.home-page .process-header h2 {
  font-size: var(--home-type-2-minus-2) !important;
}

/* Introductory supporting copy: annotated as one pixel smaller. */
.home-page .services-intro > p,
.home-page .work-intro p,
.home-page .film-stories-intro > p:last-child {
  font-size: var(--home-type-3-minus-1) !important;
}

/* All five service names and their English labels move down together. */
.home-page .services-orbit-item h3 {
  font-size: var(--home-type-3-minus-2) !important;
}

.home-page .services-orbit-item small {
  font-size: var(--home-type-4-minus-2) !important;
}

/* All five service descriptions use the annotated three-pixel reduction. */
.home-page .services-orbit-item p {
  font-size: var(--home-type-3-minus-3) !important;
}

/* All three case preview titles use Tier 3 and reserve an equal two-line block. */
.home-page .film-story h3 {
  min-height: 2.6em;
  font-size: var(--home-type-3) !important;
}

.home-page .film-story-description {
  font-size: var(--home-type-3-minus-2) !important;
}

/*
 * Homepage case-study cards share one editorial baseline.
 * Reserve the same vertical space for metadata, two-line titles,
 * summaries and scope text so dividers and actions stay aligned even
 * when individual copy wraps differently.
 */
@media (min-width: 801px) {
  .home-page .film-stories-spread {
    align-items: stretch;
  }

  .home-page .film-story,
  .home-page .film-story-link {
    height: 100%;
  }

  .home-page .film-story-meta,
  .home-page .film-story h3,
  .home-page .film-story-description,
  .home-page .film-story-role {
    box-sizing: border-box;
  }

  .home-page .film-story-meta {
    min-height: 3em;
    align-content: flex-start;
  }

  .home-page .film-story h3 {
    min-height: 2.6em;
  }

  .home-page .film-story-description {
    min-height: 3.6em;
  }

  .home-page .film-story-role {
    min-height: calc(3.4em + 14px);
  }

  .home-page .film-story-more {
    min-height: 54px;
    align-items: center;
  }
}

/* Desktop type scale shared with the About page; mobile retains its existing rules. */
@media (min-width: 761px) {
  .home-page #hero-title {
    font-size: clamp(33.6px, 3.08vw, 44.8px) !important;
    line-height: 1.2;
  }

  .home-page .services-intro h2,
  .home-page .work-intro h2,
  .home-page .film-stories-intro h2,
  .home-page .process-header h2 {
    font-size: clamp(21px, 1.75vw, 25.2px) !important;
    line-height: 1.4;
  }

  .home-page .services-orbit-item h3,
  .home-page .services .service-item h3,
  .home-page .project-meta h3,
  .home-page .film-story h3,
  .home-page .process-card-copy strong {
    font-size: 20px !important;
    line-height: 1.4;
  }

  .home-page .services-intro > p,
  .home-page .services-orbit-item p,
  .home-page .services .service-item p,
  .home-page .work-intro p,
  .home-page .film-story-description,
  .home-page .process-card-copy > span {
    font-size: 16px !important;
    line-height: 1.8;
  }

  .home-page .nav-links > a,
  .home-page .language-button,
  .home-page .language-menu button,
  .home-page .footer-primary-nav a {
    font-size: 15px !important;
  }

  .home-page .services-orbit-item small {
    font-size: 12px !important;
  }

  .home-page .film-story h3 { font-size: 18px !important; min-height: 2.8em; }
}

/* Selected homepage copy follows the shared header navigation size. */
.home-page { --home-nav-copy:12.075px; }
@media(max-width:800px) {
  .home-page { --home-nav-copy:16.1px; }
}
.home-page #services .services-intro > p,
.home-page #services .services-orbit-item h3,
.home-page #services .services-orbit-item small,
.home-page #services .services-orbit-item p,
.home-page #services .service-item h3,
.home-page #services .service-item small,
.home-page #services .service-item p,
.home-page #work .work-intro h2,
.home-page #work .work-intro p,
.home-page .project-service-tags > span,
.home-page .film-story .film-story-description {
  font-size:var(--home-nav-copy) !important;
}

/* Give narrower desktop layouts one extra line without losing alignment. */
@media (min-width: 761px) {
  .home-page #work .work-intro h2 {
    font-size: calc(var(--home-nav-copy) * 1.3) !important;
  }

  .home-page .project-service-tags > span {
    font-size: calc(var(--home-nav-copy) * .85) !important;
  }
}

@media (min-width: 801px) and (max-width: 1120px) {
  .home-page .film-story-description {
    min-height: 5.4em;
  }

  .home-page .film-story-role {
    min-height: calc(5.1em + 14px);
  }
}

/* Chinese mobile preview: preserve all desktop and other-language rules. */
@media (max-width: 760px) {
  html:is(:lang(zh), :lang(en), :lang(ja)) .home-page #hero-title {
    font-size: calc(var(--home-type-1-minus-4) * .5) !important;
    max-width: 100%;
    white-space: normal;
  }

  html:lang(ja) .home-page #hero-title {
    font-size: clamp(12px, 4vw, 20px) !important;
    white-space: nowrap;
    letter-spacing: 0;
  }

  html:lang(ja) .home-page .film-stories-kicker {
    font-size: calc(var(--home-type-4) * .7) !important;
  }
  html:lang(ja) .home-page .film-stories-intro h2,
  html:lang(ja) .home-page #process-title {
    font-size: calc(var(--home-type-2-minus-2) * .7) !important;
  }
  html:lang(ja) .home-page .film-stories-intro > p:last-child {
    font-size: calc(var(--home-type-3-minus-1) * .7) !important;
  }
  html:lang(ja) .home-page .film-story .film-story-description {
    font-size: calc(var(--home-nav-copy) * .7) !important;
  }
  html:lang(ja) .home-page .process-steps {
    grid-template-columns: repeat(4, 133px);
    margin-bottom: 23.8px;
    padding-bottom: 8.4px;
  }
  html:lang(ja) .home-page .process-step { gap: 9.1px; padding-right: 29.4px; }
  html:lang(ja) .home-page .process-step-number { font-size: 21px; }
  html:lang(ja) .home-page .process-step-name { font-size: 9.1px; }
  html:lang(ja) .home-page .process-step-connector { top: 15.4px; right: 10.5px; width: 23.8px; }
  html:lang(ja) .home-page .process-step-connector::after { top: -2.1px; width: 4.9px; height: 4.9px; }
  @media (max-width: 520px) {
    html:lang(ja) .home-page .process-steps { grid-template-columns: repeat(4, 121.8px); }
  }

  html:is(:lang(zh), :lang(en), :lang(ja)) .home-page #services {
    --home-nav-copy: calc(16.1px * .6);
  }
  html:is(:lang(zh), :lang(en), :lang(ja)) .home-page #services .services-intro h2 {
    font-size: calc(var(--home-type-2-minus-2) * .6) !important;
  }
  html:is(:lang(zh), :lang(en), :lang(ja)) .home-page #services .services-orbit-label > text:not(.services-orbit-label-en) {
    font-size: 24px !important;
  }
  html:is(:lang(zh), :lang(en), :lang(ja)) .home-page #services .services-orbit-label-en,
  html:is(:lang(zh), :lang(en), :lang(ja)) .home-page #services .services-orbit-core text {
    font-size: 18px !important;
  }

  html:is(:lang(zh), :lang(en), :lang(ja)) .home-page #work .project-track {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    gap: 32px 16px;
  }
  html:is(:lang(zh), :lang(en), :lang(ja)) .home-page #work .project-slide:nth-child(n) {
    grid-column: auto;
    grid-row: auto;
    min-width: 0;
    margin: 0;
  }
  html:is(:lang(zh), :lang(en), :lang(ja)) .home-page #work .project-viewport { overflow: visible; }
  html:is(:lang(zh), :lang(en), :lang(ja)) .home-page #work .project-controls { display: none; }
  html:is(:lang(zh), :lang(en), :lang(ja)) .home-page #work .project-meta { overflow-wrap: anywhere; }
  html:is(:lang(zh), :lang(en), :lang(ja)) .home-page #work .project-service-tags { flex-wrap: wrap; }
  html:is(:lang(zh), :lang(en), :lang(ja)) .home-page #work .project-service-tags > span,
  html:is(:lang(zh), :lang(en), :lang(ja)) .home-page #film-stories .project-service-tags > span {
    font-size: calc(var(--home-nav-copy) * .5) !important;
    padding: 3px 5px;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}