/* atme motion system — content stays readable without JavaScript or WebGL. */
.hero { isolation: isolate; background: radial-gradient(ellipse at 79% 45%, #e7eef0 0, transparent 53%), #f8f8f8; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(90deg, #5575860a 1px, transparent 1px); background-size: 25% 100%; pointer-events: none; }
.hero-scene { position: absolute; width: 64%; height: 100%; right: -5%; top: 0; z-index: 1; pointer-events: none; }
.hero-scene canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1.4s ease; position: relative; z-index: 2; }
.hero-scene.scene-ready canvas { opacity: 1; }
.scene-ground { position: absolute; width: 52%; height: 4%; left: 24%; bottom: 15%; background: #557586; opacity: .07; border-radius: 50%; filter: blur(22px); transform: scaleX(calc(1 - var(--hero-scroll, 0) * .2)); }
.scene-still { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .7s; }
.scene-ready .scene-still { opacity: 0; }
.hero-copy { animation: none; transform: translate3d(0, calc(var(--hero-scroll, 0) * -44px), 0); }
.hero-copy h1, .hero-copy p, .hero-copy > a { animation: atme-hero-enter 1.1s cubic-bezier(.2,.65,.25,1) both; }
.hero-copy p { animation-delay: .13s; }
.hero-copy > a { animation-delay: .25s; }
.hero-concept { position: absolute; z-index: 3; right: 4.5%; bottom: 98px; width: 44%; text-align: center; }
.hero-concept-label { display: block; font-size: 10px; letter-spacing: .14em; color: #557586; margin-bottom: 12px; }
.hero-concept p { margin: 0; font-size: 14px; letter-spacing: .08em; line-height: 1.8; color: #354b58; }
.hero-concept .only-small { display: none; }
@keyframes atme-hero-enter { from { opacity: 0; transform: translateY(24px); filter: blur(5px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }

/* A single unbroken row. Both groups have identical width, including the end gap. */
.logo-marquee { overflow: hidden; width: 100%; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.logo-track { display: flex; flex-wrap: nowrap; width: max-content; animation: atme-client-flow 80s linear infinite; will-change: transform; }
.logo-group { flex: 0 0 auto; flex-wrap: nowrap; }
.logo-group li { flex: 0 0 150px; }

.reveal.in-view { animation: none; }
.motion-item { opacity: 0; transform: translate3d(0, 35px, 0); transition: opacity .85s ease var(--reveal-delay, 0ms), transform 1s cubic-bezier(.16,1,.3,1) var(--reveal-delay, 0ms); }
.motion-item.is-visible, .motion-item:focus-within { opacity: 1; transform: translate3d(0, 0, 0); }
.service-row.motion-item { border-top-color: transparent; position: relative; }
.service-row.motion-item::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background: var(--border); transform: scaleX(0); transform-origin: left; transition: transform 1.15s cubic-bezier(.16,1,.3,1); }
.service-row.motion-item.is-visible::before { transform: scaleX(1); }
.header::after { content: ''; position: absolute; height: 2px; left: 0; right: 0; bottom: -1px; background: linear-gradient(90deg, #557586, #f5a85f); transform: scaleX(var(--reading-progress, 0)); transform-origin: left; pointer-events: none; }
@media (min-width: 1001px) { .hero-copy { max-width: 63%; } .hero h1 { font-size: clamp(46px, 5.25vw, 80px); } }
@media (max-width: 1000px) { .hero { min-height: 960px; height: auto; } .hero-copy { margin-top: 65px; } .hero-scene { width: 84%; right: -10%; height: 62%; top: 36%; } .hero-concept { bottom: 67px; right: 3%; width: 60%; } }
@media (max-width: 640px) {
  .hero { min-height: 800px; }
  .hero-copy { margin-top: 49px; }
  .hero h1 { font-size: clamp(34px, 8.2vw, 46px); }
  .hero-scene { width: 112%; right: -6%; height: 410px; top: auto; bottom: 56px; }
  .scene-ground { bottom: 17%; }
  .hero-concept { bottom: 72px; right: 6%; width: 88%; }
  .hero-concept-label { font-size: 8px; margin-bottom: 8px; }
  .hero-concept p { font-size: 11px; }
  .hero-bottom { bottom: 20px; }
  .logo-group li { flex-basis: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-copy, .hero-word, .motion-item { transform: none; opacity: 1; }
  .service-row.motion-item::before { transform: none; }
  .logo-marquee { overflow-x: auto; mask-image: none; scrollbar-width: thin; }
  .logo-track { animation: none; will-change: auto; }
  .logo-group[aria-hidden=true] { display: none; }
}