/* The first HTML paint must already have the same one-line geometry as the
   enhanced marquee. The Japanese font can still be loading at this point. */
body:is(.service-web-page,.service-ai-page,.service-branding-page,.service-ec-page,.service-marketing-page) .subpage-hero h1:not([data-hero-marquee-state='static']) {
  left: 0;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  white-space: nowrap;
  overflow-wrap: normal;
  overflow: clip;
  padding-block: .12em;
  margin-block: -.12em;
}
body:is(.service-web-page,.service-ai-page,.service-branding-page,.service-ec-page,.service-marketing-page) .subpage-hero h1 > .hero-line {
  display: inline;
}
body:is(.service-web-page,.service-ai-page,.service-branding-page,.service-ec-page,.service-marketing-page) .subpage-hero h1 > .hero-line + .hero-line::before {
  content: ' ';
}

/* Keep the existing title size and vertical placement. Running service titles
   span their entire hero stage; the stage scales to the viewport on desktop. */
.subpage-hero h1.hero-marquee-heading {
  white-space: nowrap;
  overflow-wrap: normal;
}

body .subpage-hero h1.hero-marquee-heading:not([data-hero-marquee-state='static']) {
  left: 0;
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.hero-marquee-window {
  display: block;
  width: 100%;
  overflow: hidden;
  padding-block: .12em;
  margin-block: -.12em;
}

.hero-marquee-track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  animation: hero-marquee-slide var(--hero-marquee-duration, 20s) linear infinite;
  will-change: transform;
}

.hero-marquee-copy {
  display: block;
  flex: 0 0 auto;
  width: max-content;
  padding-right: 64px;
  white-space: nowrap;
}

@keyframes hero-marquee-slide {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(-1 * var(--hero-marquee-distance, 0px)), 0, 0); }
}

[data-hero-marquee-paused='true'] .hero-marquee-track,
[data-hero-marquee-state='pending'] .hero-marquee-track,
html[data-motion-paused='true'] .hero-marquee-track {
  animation-play-state: paused;
}

[data-hero-marquee-paused='true'] .hero-marquee-window,
html[data-motion-paused='true'] .hero-marquee-window {
  animation: none;
}

.subpage-hero h1[data-hero-marquee-state='static'] {
  white-space: normal;
  overflow-wrap: anywhere;
}
[data-hero-marquee-state='static'] .hero-marquee-window {
  overflow: visible;
  animation: none;
}
[data-hero-marquee-state='static'] .hero-marquee-track {
  display: block;
  width: auto;
  animation: none;
  transform: none;
  will-change: auto;
}
[data-hero-marquee-state='static'] .hero-marquee-copy {
  width: auto;
  padding-right: 0;
  white-space: normal;
}
[data-hero-marquee-state='static'] .hero-marquee-copy ~ .hero-marquee-copy { display: none; }

@media (prefers-reduced-motion: reduce) {
  body:is(.service-web-page,.service-ai-page,.service-branding-page,.service-ec-page,.service-marketing-page) .subpage-hero h1:not([data-hero-marquee-state='static']) {
    left: 32px;
    width: calc(100% - 64px);
    white-space: normal;
    overflow-wrap: anywhere;
    overflow: visible;
    padding-block: 0;
    margin-block: 0;
  }
  .subpage-hero h1.hero-marquee-heading { white-space: normal; overflow-wrap: anywhere; }
  .hero-marquee-window { overflow: visible; animation: none; }
  .hero-marquee-track { display: block; width: auto; animation: none; transform: none; will-change: auto; }
  .hero-marquee-copy { width: auto; padding-right: 0; white-space: normal; }
  .hero-marquee-copy ~ .hero-marquee-copy { display: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 767px) {
  body:is(.service-web-page,.service-ai-page,.service-branding-page,.service-ec-page,.service-marketing-page) .subpage-hero h1:not([data-hero-marquee-state='static']) {
    left: auto;
    margin-left: 20px;
    width: calc(100% - 44px);
  }
}