/* The identity is the entrance. Service names remain concise and directly usable. */
.landing-page .uo-nav { height: 88px; }
.landing-page .landing-main { height: calc(100svh - 88px); min-height: 560px; display: flex; flex-direction: column; position: relative; isolation: isolate; overflow: hidden; }
.landing-page .hero { position: static; isolation: auto; flex: 1; min-height: 0; height: auto; padding: 0 var(--uo-space); display: flex; align-items: center; justify-content: center; overflow: visible; }
.landing-page .stage { position: absolute; inset: 0; z-index: -1; mask-image: linear-gradient(to bottom, transparent, black 18%, black 75%, transparent); }
.landing-page .identity-stage { position: relative; z-index: 1; width: 100%; max-width: 1450px; margin: 0 auto; }
.landing-page .hero-wordmark { display: block; width: 100%; height: auto; }
.landing-page .identity-stacked { display: none; }
.landing-page .hero-bottom { position: absolute; inset: auto var(--uo-space) 14px; z-index: 3; width: auto; height: auto; padding: 0; margin: 0; display: flex; justify-content: flex-end; }
.landing-page .hero-controls { display: flex; align-items: center; gap: 12px; position: static; flex-direction: row; }
.landing-page .hero-controls button { position: static; width: auto; height: 44px; min-height: 44px; padding: 0 8px; border: 0; background: transparent; color: #465973; font-size: 12px; clip-path: none; overflow: visible; }
.landing-page #identity-replay { width: 44px; padding: 0; display: grid; place-items: center; font-size: 20px; }
.landing-page .hero-controls button:hover { color: var(--uo-blue); }
.landing-page .hero-controls button:disabled { opacity: .4; }
.landing-page .landing-services { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; padding: 0 var(--uo-space) 84px; margin: 0; background: none; flex: none; }
.landing-page .landing-service { min-height: 58px; padding: 0; display: flex; align-items: center; justify-content: center; font: 400 clamp(19px, 2vw, 30px)/1.2 var(--uo-font); letter-spacing: -.045em; }
.landing-page .landing-service > span { position: relative; transition: color .2s, transform .35s var(--uo-ease); }
.landing-page .landing-service > span::after { content: none; }
.landing-page .home-service-arrow { position: absolute; left: calc(100% + 8px); top: 50%; width: 15px; height: 15px; opacity: 0; transform: translate(-4px, -50%); transition: opacity .2s, transform .3s var(--uo-ease); }
.landing-service:hover > span, .landing-service:focus-visible > span { color: var(--uo-blue); }
.landing-page .landing-service:hover .home-service-arrow, .landing-page .landing-service:focus-visible .home-service-arrow { opacity: 1; transform: translate(0, -50%); }
@media (max-width: 900px) and (min-width: 761px) {
  .landing-page .landing-services { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-bottom: 76px; }
  .landing-page .landing-service { font-size: 25px; }
}
@media (max-width: 760px) {
  .landing-page .uo-nav { height: 64px; }
  .landing-page .landing-main { height: calc(100svh - 64px); min-height: 480px; }
  .landing-page .hero { padding: 24px var(--uo-space); }
  .landing-page .identity-stage { width: min(100%, 390px); margin: 0; }
  .landing-page .hero-wordmark { display: none; }
  .landing-page .identity-stacked { display: block; position: static; width: 100%; height: auto; opacity: 1; transform: none; }
  .landing-page .landing-services { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 30px; padding-bottom: 84px; }
  .landing-page .landing-service { justify-content: flex-start; min-height: 49px; font-size: clamp(23px, 6vw, 28px); }
  .landing-page .hero-bottom { bottom: 15px; }
  .landing-page .stage { mask-image: linear-gradient(to bottom, transparent, black 15%, black 70%, transparent); }
}
@media (hover: none) { .landing-page .home-service-arrow { opacity: 1; transform: translate(0, -50%); width: 13px; height: 13px; } }
@media (prefers-reduced-motion: reduce) { .home-service-arrow, .landing-page .landing-service > span { transition: none; } }

/* Keep the name legible throughout the particle sequence and at every replay. */
.landing-page .hero-wordmark { overflow: visible; }
.landing-page .hero-wordmark > g { filter: none; }
.identity-active .hero-wordmark, .identity-active .identity-stacked { animation: none; clip-path: none; }
.landing-page .hero-actions { margin: 0; }
@media (max-width: 760px) {
  .landing-page .hero-controls { flex-direction: row; align-items: center; }
  .landing-page .hero-bottom { bottom: 12px; }
}
@media (max-height: 600px) and (min-width: 761px) {
  .landing-page .landing-main { min-height: 300px; }
  .landing-page .landing-services { padding-bottom: 70px; }
}